:root{--navy:#183957;--blue:#2b7bbb;--sky:#e9f6ff;--mint:#eaf8ef;--green:#2f8a58;--amber:#ffc857;--pink:#fff3f2;--purple:#f2edff;--ink:#1d2a35;--muted:#64748b;--line:#d9e4ef;--white:#fff;--danger:#d94a4a;--good:#2f8a58}*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,"Noto Sans Thai",sans-serif;color:var(--ink);background:linear-gradient(135deg,#f6fbff,#fff 38%,#f7fff8);user-select:none}.app-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:12px 22px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{display:flex;flex-direction:column}.course{font-weight:900;color:var(--navy);letter-spacing:.02em}.lab{font-size:13px;color:var(--muted)}.status-strip{display:flex;gap:10px;align-items:center}.status-strip span{background:var(--navy);color:white;border-radius:999px;padding:8px 12px;font-weight:800;font-size:14px}.screen{display:none}.screen.active{display:block}.hero{display:grid;grid-template-columns:1.5fr .9fr;gap:24px;max-width:1180px;margin:28px auto 18px;padding:24px}.hero-text,.login-card,.card,.hero-card{background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:28px;box-shadow:0 24px 70px rgba(23,57,87,.08)}.hero-text{padding:36px;background:linear-gradient(135deg,#fff,#f1f9ff)}.hero h1{font-size:54px;line-height:1;margin:0;color:var(--navy);max-width:800px}.lead{font-size:21px;line-height:1.55;color:#33556e}.eyebrow{text-transform:uppercase;font-size:13px;font-weight:900;color:var(--blue);letter-spacing:.12em}.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.pill-row span{background:#e5f4ff;border:1px solid #c9e7fa;color:#17496d;padding:9px 14px;border-radius:999px;font-weight:800}.hero-card{padding:28px;background:linear-gradient(135deg,#e8f6ff,#f4fff6)}.hero-card h3{font-size:28px;color:var(--navy)}.route-list{counter-reset:item;list-style:none;margin:0;padding:0;display:grid;gap:12px}.route-list li{background:white;border-radius:18px;border:1px solid var(--line);padding:14px;font-weight:800}.login-card{max-width:900px;margin:0 auto 26px;padding:26px}.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{font-weight:800;color:var(--navy)}input,textarea{width:100%;margin-top:8px;border:2px solid #dbe8f5;border-radius:15px;padding:13px 14px;font:inherit;background:#fbfdff}textarea{min-height:88px;resize:vertical;user-select:text}.honor{display:flex;gap:10px;align-items:flex-start;margin:18px 0}.honor input{width:auto}.warning-box{background:#fff8e6;border:1px solid #ffe0a3;border-radius:18px;padding:14px;color:#65450a;margin:14px 0}.primary,.secondary{border:0;border-radius:18px;padding:13px 20px;font-weight:900;cursor:pointer;font-size:16px}.primary{background:linear-gradient(135deg,var(--blue),#1b5e91);color:white}.secondary{background:#eef4fa;color:var(--navy);border:1px solid #d7e5f2}.primary:disabled,.secondary:disabled{opacity:.45;cursor:not-allowed}#lab{display:none;grid-template-columns:280px 1fr;gap:20px;max-width:1320px;margin:22px auto;padding:0 18px}#lab.active{display:grid}.sidebar{position:sticky;top:75px;height:calc(100vh - 100px);background:white;border:1px solid var(--line);border-radius:26px;padding:18px;box-shadow:0 20px 50px rgba(20,48,76,.08);overflow:auto}.sidebar h3{color:var(--navy);font-size:24px;margin:8px 0 12px}.step-nav-btn{display:flex;width:100%;align-items:center;gap:9px;padding:11px;border-radius:14px;background:#f7fbff;border:1px solid #e1edf8;margin:7px 0;color:#31506b;font-weight:800;text-align:left;cursor:pointer}.step-nav-btn.active{background:var(--navy);color:white}.step-nav-btn.done{border-color:#bde4cd;background:#eefbf3}.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.mini-stats div{background:#f7fbff;border:1px solid var(--line);border-radius:16px;padding:12px;text-align:center}.mini-stats b{display:block;font-size:26px;color:var(--blue)}.mini-stats span{font-size:12px;color:var(--muted)}.workspace{min-width:0}.card{padding:28px;margin-bottom:18px}.step-card h2{font-size:34px;color:var(--navy);margin:0 0 12px}.hidden{display:none}.quiz-block{display:grid;gap:14px}.question{border:1px solid #dce9f5;border-radius:20px;padding:16px;background:#fbfdff}.question h4{font-size:19px;margin:0 0 10px;color:var(--navy)}.options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.option{border:1px solid #dbe7f3;border-radius:14px;padding:12px;background:white;cursor:pointer;font-weight:700}.option.selected{border-color:var(--blue);background:#eaf6ff}.option.correct{background:#e9f8ee;border-color:#74c591}.option.wrong{background:#fff0f0;border-color:#f0a2a2}.article-box{background:linear-gradient(135deg,#ffffff,#f7fbff);border:2px solid #d8e7f5;border-radius:24px;padding:24px;font-size:20px;line-height:1.65}.article-box h3{color:var(--navy);font-size:28px;margin-top:0}.tip-grid,.summary-ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.tip-grid div,.summary-ladder div{background:#eff8ff;border:1px solid #d5eaf9;border-radius:18px;padding:14px;text-align:center}.tip-grid b,.summary-ladder b{display:block;color:var(--navy);font-size:20px}.long-input{display:block;margin-top:18px}.table-task table{width:100%;border-collapse:separate;border-spacing:0 10px}.table-task td,.table-task th{background:#fbfdff;border:1px solid #dce9f5;padding:12px}.table-task th{background:#eaf4ff;color:var(--navy)}select{border:2px solid #dbe8f5;border-radius:12px;padding:9px;font-weight:800;background:white}.snapshot-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.summary-area{min-height:220px;font-size:19px;line-height:1.55}.live-help{background:#eaf8ef;border:1px solid #cfead8;border-radius:16px;padding:12px;margin-top:12px;color:#205a3b;font-weight:800}.checklist{display:grid;gap:10px}.check{display:flex;gap:10px;align-items:flex-start;background:#f8fbff;border:1px solid #dce9f5;border-radius:15px;padding:12px}.check input{width:auto}.score-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0}.score-panel div{background:linear-gradient(135deg,#e9f6ff,#fff);border:1px solid #dce9f5;border-radius:18px;padding:16px;text-align:center}.score-panel span{display:block;color:var(--muted);font-weight:800}.score-panel b{display:block;color:var(--navy);font-size:32px}.evidence-canvas{max-width:100%;border:1px solid var(--line);border-radius:18px;background:white}.button-row{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}.nav-buttons{display:flex;justify-content:space-between;margin:18px 0 36px}.toast{position:fixed;bottom:22px;right:22px;background:var(--navy);color:white;padding:14px 18px;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.18);display:none;z-index:50}footer{text-align:center;color:#60758a;font-size:13px;padding:20px}@media(max-width:900px){.hero,#lab{grid-template-columns:1fr}.sidebar{position:relative;top:auto;height:auto}.grid.two,.snapshot-grid,.tip-grid,.summary-ladder,.score-panel{grid-template-columns:1fr}.hero h1{font-size:38px}.options{grid-template-columns:1fr}.topbar{flex-direction:column;align-items:flex-start;gap:10px}}@media print{.topbar,.sidebar,.nav-buttons,footer,.button-row{display:none}.card{box-shadow:none;border:1px solid #ddd}}