:root{
  --navy:#0b2a5b;--royal:#2563eb;--cyan:#06b6d4;--bg:#f4f7fb;--card:#fff;--ink:#0f1b33;--muted:#5b6b86;--line:#e2e8f2;
  --ok:#15803d;--ok-bg:#e8f7ee;--bad:#b91c1c;--bad-bg:#fdecec;--warn:#b45309;--warn-bg:#fff4e0;--soft:#eef3fb;
  --radius:18px;--shadow:0 6px 24px rgba(11,42,91,.08);--fs:17px;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --nav-h:62px;
}
:root[data-theme=dark]{--ok:#4ade80;--bad:#f87171;--warn:#f59e0b;--bg:#0a1220;--card:#121c2f;--ink:#e8eefb;--muted:#95a5c4;--line:#22304a;--soft:#17233a;--ok-bg:#0f2a1c;--bad-bg:#2f1517;--warn-bg:#2d2110;--shadow:0 6px 24px rgba(0,0,0,.35);--royal:#5b8cff;--navy:#8fb0ff}
@media(prefers-color-scheme:dark){:root[data-theme=auto]{--ok:#4ade80;--bad:#f87171;--warn:#f59e0b;--bg:#0a1220;--card:#121c2f;--ink:#e8eefb;--muted:#95a5c4;--line:#22304a;--soft:#17233a;--ok-bg:#0f2a1c;--bad-bg:#2f1517;--warn-bg:#2d2110;--shadow:0 6px 24px rgba(0,0,0,.35);--royal:#5b8cff;--navy:#8fb0ff}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:var(--fs);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Sarabun','Noto Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.7;overflow-x:hidden}
h1,h2,h3,h4{line-height:1.35;margin:0 0 .5em;color:var(--navy)}
h1{font-size:1.55rem}h2{font-size:1.25rem}h3{font-size:1.08rem}
p{margin:0 0 .8em}a{color:var(--royal)}
button{font:inherit;cursor:pointer}
.shell{display:flex;min-height:100vh;min-height:100dvh}
.main-col{flex:1;min-width:0;display:flex;flex-direction:column}
main{flex:1;padding:16px calc(16px + var(--sar)) calc(var(--nav-h) + var(--sab) + 28px) calc(16px + var(--sal));width:100%;max-width:980px;margin:0 auto;outline:none}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:calc(10px + var(--sat)) calc(16px + var(--sar)) 10px calc(16px + var(--sal));background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .title{font-weight:700;color:var(--navy);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--navy);display:grid;place-items:center}
.icon-btn svg,.ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* nav */
.sidebar{display:none}
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:var(--card);border-top:1px solid var(--line);padding:6px calc(6px + var(--sar)) calc(6px + var(--sab)) calc(6px + var(--sal));box-shadow:0 -6px 20px rgba(11,42,91,.08)}
.bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;color:var(--muted);text-decoration:none;font-size:.7rem;border-radius:12px;min-height:48px}
.bottomnav a.on{color:var(--royal);font-weight:700;background:var(--soft)}
body.focus-mode .bottomnav{display:none}body.focus-mode main{padding-bottom:calc(var(--sab) + 28px)}
@media(min-width:1024px){
  .sidebar{display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;width:260px;flex:none;padding:calc(20px + var(--sat)) 16px 20px;background:linear-gradient(180deg,#0b2a5b,#12408a);color:#fff;overflow:auto}
  .sidebar .brand{display:flex;gap:10px;align-items:center;font-weight:700;margin-bottom:18px;line-height:1.25}
  .sidebar .brand small{display:block;font-weight:400;opacity:.75;font-size:.72rem}
  .sidebar a{display:flex;gap:12px;align-items:center;padding:11px 14px;border-radius:14px;color:#dbe7ff;text-decoration:none}
  .sidebar a:hover{background:rgba(255,255,255,.1)}.sidebar a.on{background:#fff;color:var(--navy);font-weight:700}
  .bottomnav{display:none}main{padding-bottom:40px}
  :root{--fs:17px}
}
@media(min-width:1280px){main{max-width:1080px}}
/* cards & layout */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin-bottom:14px}
.card.flat{box-shadow:none}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.hero{background:linear-gradient(135deg,#0b2a5b,#2563eb 70%,#06b6d4);color:#fff;border-radius:24px;padding:22px 18px;margin-bottom:16px;box-shadow:var(--shadow)}
.hero h1,.hero h2{color:#fff;margin-bottom:.3em}.hero p{opacity:.92;margin:0 0 .7em}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.sp{flex:1}
.muted{color:var(--muted)}.small{font-size:.85rem}.tiny{font-size:.75rem}
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:999px;background:var(--soft);color:var(--navy);font-size:.78rem;font-weight:600}
.chip.ok{background:var(--ok-bg);color:var(--ok)}.chip.bad{background:var(--bad-bg);color:var(--bad)}.chip.warn{background:var(--warn-bg);color:var(--warn)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 18px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--navy);font-weight:600;text-decoration:none}
.btn.primary{background:var(--royal);border-color:var(--royal);color:#fff}.btn.cyan{background:var(--cyan);border-color:var(--cyan);color:#052b36}
.btn.ghost{background:transparent}.btn.block{display:flex;width:100%}.btn.sm{min-height:40px;padding:6px 14px;font-size:.9rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.stat{display:flex;flex-direction:column;gap:2px}.stat b{font-size:1.7rem;color:var(--navy);line-height:1.1}.stat span{color:var(--muted);font-size:.82rem}
.bar{height:10px;border-radius:99px;background:var(--soft);overflow:hidden}.bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--royal),var(--cyan));transition:width .5s}
.bar.ok>i{background:var(--ok)}.bar.bad>i{background:var(--bad)}.bar.warn>i{background:var(--warn)}
.list{display:flex;flex-direction:column;gap:10px}
.item{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--card);text-decoration:none;color:inherit;min-height:56px}
.item:hover{border-color:var(--royal)}.item .grow{flex:1;min-width:0}.item b{display:block;color:var(--navy)}
.badge-n{width:38px;height:38px;border-radius:12px;background:var(--soft);color:var(--royal);display:grid;place-items:center;font-weight:700;flex:none}
.empty{text-align:center;padding:28px 12px;color:var(--muted)}
.empty .ico{width:44px;height:44px;opacity:.5;margin-bottom:6px}
.notice{border-radius:14px;padding:12px 14px;margin:0 0 14px;font-size:.92rem;background:var(--warn-bg);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent)}
.notice.info{background:var(--soft);color:var(--navy);border-color:var(--line)}
input[type=text],input[type=search],input[type=number],select{font:inherit;width:100%;min-height:48px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
label.f{display:block;margin-bottom:12px;font-weight:600;color:var(--navy)}
label.f>span{display:block;margin-bottom:4px;font-size:.9rem}
.seg{display:flex;gap:6px;flex-wrap:wrap}.seg button{flex:1;min-width:64px;min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.seg button.on{background:var(--royal);border-color:var(--royal);color:#fff;font-weight:700}
.switch{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.switch input{width:48px;height:28px;accent-color:var(--royal)}
/* lesson reader */
.reader{font-size:1rem}.reader .sec{margin-bottom:22px}.reader.reading{font-family:Georgia,'Sarabun',serif;max-width:680px;margin:0 auto;line-height:1.95}
.reader h3.sh{border-left:4px solid var(--cyan);padding-left:10px;margin-top:6px}
.reader table{border-collapse:collapse;width:100%;font-size:.92rem}.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 14px;border:1px solid var(--line);border-radius:12px}
.reader th,.reader td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}.reader th{background:var(--soft);color:var(--navy);white-space:nowrap}
.reader code{background:var(--soft);padding:1px 6px;border-radius:6px;font-size:.88em;word-break:break-word}
.reader pre{background:#0f1b33;color:#e8eefb;border-radius:12px;padding:12px;overflow-x:auto;font-size:.85rem;line-height:1.5}
.reader pre code{background:none;padding:0;color:inherit}
.reader blockquote{margin:0 0 .9em;padding:8px 14px;border-left:4px solid var(--cyan);background:var(--soft);border-radius:0 10px 10px 0}
.reader ul,.reader ol{padding-left:1.3em;margin:0 0 .9em}.reader li{margin-bottom:.25em}
.diagram{background:var(--soft);border:1px dashed var(--line);border-radius:12px;padding:10px;overflow-x:auto;margin-bottom:14px}
.diagram svg{max-width:100%;height:auto}
.sec.example,.sec.scenario{background:var(--soft);border-radius:16px;padding:12px 14px}
.callout{border-radius:14px;padding:12px 14px;margin-bottom:12px}.callout.tip{background:var(--ok-bg)}.callout.warn{background:var(--warn-bg)}
.callout h3{font-size:1rem;margin-bottom:.3em}.callout ul{margin:0;padding-left:1.2em}
.toc{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px;-webkit-overflow-scrolling:touch}.toc a{flex:none;padding:6px 12px;border-radius:99px;background:var(--soft);color:var(--navy);font-size:.82rem;text-decoration:none}
/* exam */
.qhead{display:flex;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.qtext{font-size:1.08rem;font-weight:600;color:var(--ink);white-space:pre-wrap;margin-bottom:14px}
.opt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:14px;margin-bottom:10px;border:2px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);min-height:56px;transition:border-color .15s,background .15s}
.opt .k{flex:none;width:34px;height:34px;border-radius:50%;background:var(--soft);color:var(--navy);display:grid;place-items:center;font-weight:700}
.opt:not(:disabled):hover{border-color:var(--royal)}.opt.sel{border-color:var(--royal);background:var(--soft)}
.opt.right{border-color:var(--ok);background:var(--ok-bg)}.opt.right .k{background:var(--ok);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg)}.opt.wrong .k{background:var(--bad);color:#fff}
.opt:disabled{cursor:default;opacity:1;color:var(--ink)}
.fb{border-radius:18px;padding:16px;margin:6px 0 14px;border:2px solid;animation:pop .25s ease}
.fb.ok{background:var(--ok-bg);border-color:var(--ok)}.fb.bad{background:var(--bad-bg);border-color:var(--bad)}.fb.neutral{background:var(--soft);border-color:var(--line)}
.fb h3{margin-bottom:.3em}.fb.ok h3{color:var(--ok)}.fb.bad h3{color:var(--bad)}
.fb .why{margin:.5em 0;padding:8px 12px;background:color-mix(in srgb,var(--card) 70%,transparent);border-radius:12px;font-size:.93rem}
.fb details{margin-top:8px}.fb summary{cursor:pointer;font-weight:600;color:var(--navy);min-height:40px;display:flex;align-items:center}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.timer{font-variant-numeric:tabular-nums;font-weight:700;color:var(--navy)}.timer.low{color:var(--bad)}
.palette{display:flex;flex-wrap:wrap;gap:6px}.palette button{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:.82rem}
.palette button.ans{background:var(--soft);border-color:var(--royal)}.palette button.cur{outline:3px solid var(--cyan)}.palette button.ok{background:var(--ok-bg);border-color:var(--ok)}.palette button.bad{background:var(--bad-bg);border-color:var(--bad)}
.examfoot{position:sticky;bottom:calc(var(--nav-h) + var(--sab) + 6px);display:flex;gap:10px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);padding:8px 0}
body.focus-mode .examfoot{bottom:calc(var(--sab) + 6px)}
.examfoot .btn{flex:1}
.score-ring{width:140px;height:140px;border-radius:50%;display:grid;place-items:center;margin:0 auto 10px;background:conic-gradient(var(--ringc,var(--royal)) calc(var(--p)*1%),var(--soft) 0)}
.score-ring>div{width:108px;height:108px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:1.9rem;font-weight:800;color:var(--navy)}
/* charts */
.chart{width:100%;height:auto}.hbar{display:grid;grid-template-columns:minmax(80px,38%) 1fr 44px;gap:8px;align-items:center;margin-bottom:8px;font-size:.88rem}
.skeleton-wrap{padding:8px}.skeleton{height:90px;border-radius:18px;margin-bottom:14px;background:linear-gradient(90deg,var(--soft),var(--line),var(--soft));background-size:200% 100%;animation:sh 1.2s infinite}.skeleton.h{height:140px}
@keyframes sh{to{background-position:-200% 0}}
#toasts{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + var(--sab) + 14px);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:60;pointer-events:none;padding:0 16px}
.toast{pointer-events:auto;background:#0f1b33;color:#fff;padding:12px 16px;border-radius:14px;box-shadow:var(--shadow);max-width:560px;font-size:.92rem;animation:pop .2s}
.toast button{margin-left:10px;background:var(--cyan);border:0;border-radius:8px;padding:4px 10px;font-weight:700}
.install-step{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}.install-step .badge-n{width:30px;height:30px;border-radius:50%;font-size:.85rem}
.kbd{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border:1px solid var(--line);border-radius:8px;background:var(--soft);font-size:.85rem}
.src-real{background:var(--ok-bg);color:var(--ok)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* long unbroken strings (URLs, English terms) must wrap on narrow screens */
main,.card,li,p,td,th,h1,h2,h3,.item b,.fb{overflow-wrap:anywhere}

.readbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:40;background:transparent}.readbar i{display:block;height:100%;width:0;background:var(--cyan);transition:width .1s}
#exitbox[hidden]{display:none}