:root{
  --bg:#f6f4ee;--surface:#fffefa;--surface2:#efece2;--text:#262a30;--muted:#646b75;--line:#ddd8c9;
  --accent:#0f6b5c;--accent2:#e8f3ef;--warn:#b4531a;--warn2:#fdeee1;--ok:#1f7a3d;--ok2:#e3f4e8;--bad:#b3261e;--bad2:#fbe7e5;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 6px 18px rgba(0,0,0,.05);--fs:18px;--side:290px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --bg:#14171a;--surface:#1c2024;--surface2:#252a30;--text:#e6e8ea;--muted:#9aa3ad;--line:#333a42;
  --accent:#4fc3ab;--accent2:#173a33;--warn:#f0a066;--warn2:#3a2a1c;--ok:#6fd48c;--ok2:#17331f;--bad:#ff8a80;--bad2:#3d1d1b;--shadow:none;color-scheme:dark}}
:root[data-theme=dark]{
  --bg:#14171a;--surface:#1c2024;--surface2:#252a30;--text:#e6e8ea;--muted:#9aa3ad;--line:#333a42;
  --accent:#4fc3ab;--accent2:#173a33;--warn:#f0a066;--warn2:#3a2a1c;--ok:#6fd48c;--ok2:#17331f;--bad:#ff8a80;--bad2:#3d1d1b;--shadow:none;color-scheme:dark}
:root[data-theme=sepia]{
  --bg:#f1e6cf;--surface:#f8efdb;--surface2:#ecdfc2;--text:#3b2f1e;--muted:#6f5f45;--line:#d6c6a2;--accent:#7a4a12;--accent2:#efe0bf}
*{box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-size:16px;background:var(--bg);color:var(--text);font-family:'Sarabun','Noto Sans Thai','Leelawadee UI',Tahoma,sans-serif;line-height:1.75}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;display:flex;align-items:center;gap:.6em;padding:.5em max(1em,env(safe-area-inset-right,0px)) .5em max(1em,env(safe-area-inset-left,0px));background:var(--surface);border-bottom:1px solid var(--line)}
.brand{font-weight:700;color:var(--accent);text-decoration:none;white-space:nowrap}
.spacer{flex:1}
.icon-btn{background:var(--surface2);border:1px solid var(--line);border-radius:10px;min-width:44px;height:44px;padding:0 .7em}
@media (min-width:901px){
  body.sbhide .layout{grid-template-columns:minmax(0,1fr)}
  body.sbhide #sidebar{display:none}
  body.sbhide #main{margin:0 auto}
}
#search{width:min(260px,32vw);height:44px;border:1px solid var(--line);border-radius:10px;padding:0 .8em;background:var(--bg)}
.tools{display:flex;gap:.4em}
.progress{position:sticky;top:61px;height:3px;background:transparent;z-index:29}
#readBar{height:3px;width:0;background:var(--accent)}
.layout{display:grid;grid-template-columns:var(--side) minmax(0,1fr);max-width:1500px;margin:0 auto}
#sidebar{position:sticky;top:64px;align-self:start;height:calc(100vh - 64px);overflow:auto;padding:1em;border-right:1px solid var(--line)}
#sidebar h4{margin:.6em 0 .3em;color:var(--muted);font-size:.8em;letter-spacing:.04em}
#sidebar a{display:flex;gap:.5em;align-items:flex-start;padding:.5em .6em;border-radius:10px;color:var(--text);text-decoration:none;font-size:.9em;line-height:1.4;min-height:44px}
#sidebar a:hover{background:var(--surface2)}
#sidebar a.on{background:var(--accent2);color:var(--accent);font-weight:600}
#sidebar .num{flex:none;background:var(--accent);color:#fff;border-radius:8px;min-width:2em;text-align:center;font-size:.8em;padding:.1em .3em}
#sidebar .done::after{content:'✓';margin-left:auto;color:var(--ok)}
#main{padding:1.5em max(clamp(1em,3vw,2.5em),env(safe-area-inset-right,0px)) 5em max(clamp(1em,3vw,2.5em),env(safe-area-inset-left,0px));max-width:56em;width:100%;outline:none;font-size:var(--fs)}
#scrim{display:none}
h1{font-size:1.9em;line-height:1.3;margin:.2em 0 .3em}
h2{font-size:1.45em;margin:2.2em 0 .6em;padding-top:.4em;scroll-margin-top:80px}
h3{font-size:1.1em;margin:1.2em 0 .4em}
.en{color:var(--muted);margin:0 0 1em}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1em 1.2em;box-shadow:var(--shadow);margin:1em 0}
.tldr{background:var(--accent2);border-color:transparent}
.tldr li{margin:.25em 0}
.tabs{display:flex;gap:.4em;flex-wrap:wrap;margin:1em 0;position:sticky;top:67px;z-index:20;background:var(--bg);padding:.4em 0}
.tab{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:.35em 1em;min-height:44px}
.tab.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.points{padding-left:0;list-style:none;margin:.6em 0}
.points li{position:relative;padding:.35em 0 .35em 1.6em;border-bottom:1px dashed var(--line)}
.points li::before{content:'';position:absolute;left:.25em;top:1em;width:.5em;height:.5em;border-radius:50%;background:var(--accent)}
.points li:last-child{border-bottom:0}
b{color:var(--accent)}
.intro{color:var(--muted)}
.terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.6em;margin:.8em 0}
.term{background:var(--surface2);border-radius:12px;padding:.6em .8em;border-left:4px solid var(--accent)}
.term strong{display:block}
.mnemonic{background:var(--warn2);border-left:4px solid var(--warn);border-radius:12px;padding:.7em 1em;margin:.8em 0}
.mnemonic::before{content:'💡 ช่วยจำ: ';font-weight:700;color:var(--warn)}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:.8em;margin:1em 0}
figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
figure img{display:block;width:100%;height:auto;cursor:zoom-in;background:#fff}
figcaption{padding:.5em .8em;font-size:.85em;color:var(--muted)}
table{border-collapse:collapse;width:100%;font-size:.9em;margin:.6em 0}
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
th,td{border:1px solid var(--line);padding:.45em .6em;text-align:left;vertical-align:top}
th{background:var(--accent2)}
caption{caption-side:top;text-align:left;font-weight:600;padding-bottom:.3em}
.mark{display:inline-flex;gap:.4em;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:.3em .9em;min-height:44px;margin-top:1em}
.mark.on{background:var(--ok2);border-color:var(--ok);color:var(--ok)}
.hero{display:grid;gap:1em}
.chgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.8em}
.chcard{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1em;box-shadow:var(--shadow)}
.chcard:hover{border-color:var(--accent)}
.chcard .n{font-size:.8em;color:var(--accent);font-weight:700}
.chcard .bar{height:6px;border-radius:3px;background:var(--surface2);margin-top:.6em;overflow:hidden}
.chcard .bar i{display:block;height:100%;background:var(--ok)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;border:0;background:var(--accent);color:#fff;border-radius:12px;padding:.55em 1.1em;min-height:44px;text-decoration:none;font-weight:600}
.btn.alt{background:var(--surface2);color:var(--text);border:1px solid var(--line)}
.btn.sm{padding:.3em .8em;font-size:.85em}
.row{display:flex;gap:.6em;flex-wrap:wrap;align-items:center}
/* flashcards */
.fc{perspective:1000px;margin:1em auto;max-width:640px}
.fc-inner{position:relative;min-height:240px;transition:transform .5s;transform-style:preserve-3d;cursor:pointer}
.fc.flip .fc-inner{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;text-align:center;padding:1.4em;border-radius:18px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);font-size:1.15em;overflow:auto}
.fc-back{transform:rotateY(180deg);background:var(--accent2)}
/* quiz */
.q{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1em 1.2em;margin:1em 0}
.q .qn{font-weight:700;color:var(--accent)}
.opt{display:block;width:100%;text-align:left;background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:.6em .9em;margin:.4em 0;min-height:48px}
.opt:hover{border-color:var(--accent)}
.opt.sel{border-color:var(--accent);background:var(--accent2)}
.opt.right{border-color:var(--ok);background:var(--ok2)}
.opt.wrong{border-color:var(--bad);background:var(--bad2)}
.explain{margin-top:.6em;padding:.6em .9em;border-radius:12px;background:var(--surface2);font-size:.92em}
.score{font-size:2.4em;font-weight:700;color:var(--accent)}
.timer{position:sticky;top:67px;z-index:15;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.2em 1em;display:inline-block;font-variant-numeric:tabular-nums}
.keylist{columns:2;column-gap:2em;padding:0;list-style:none}
.keylist li{break-inside:avoid;padding:.3em 0;border-bottom:1px dashed var(--line);font-size:.92em}
.hl{background:#ffe27a;color:#000;border-radius:3px}
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1em}
#lightbox[hidden]{display:none}
#lightbox img{max-width:96vw;max-height:80vh;border-radius:8px;background:#fff}
#lightbox p{color:#fff;margin:.6em;max-width:900px;text-align:center}
#lbClose{position:absolute;top:12px;right:12px;width:48px;height:48px;border-radius:50%;border:0;font-size:1.2em}
/* iPad & small laptops */
@media (max-width:1100px){
  :root{--side:260px}
}
@media (max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr)}
  #sidebar{position:fixed;left:0;top:0;bottom:0;height:100%;width:min(320px,86vw);z-index:50;background:var(--surface);transform:translateX(-102%);transition:transform .25s;padding-top:4.5em}
  body.menu #sidebar{transform:none}
  body.menu #scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40}
  #main{margin:0 auto}
  .keylist{columns:1}
}
@media (max-width:600px){#search{display:none}.figs{grid-template-columns:1fr}}
@media print{.topbar,.progress,#sidebar,.tabs,.btn,.mark{display:none!important}.layout{display:block}body{background:#fff;color:#000}}

/* ---- v2 additions ---- */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.7em;margin:1em 0}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.7em 1em}
.tile .v{font-size:1.7em;font-weight:700;color:var(--accent);line-height:1.2;font-variant-numeric:tabular-nums}
.tile .l{font-size:.85em;color:var(--muted)}
.card.warn{background:var(--warn2);border-color:transparent}
.card a:not(.btn),.intro a:not(.btn){color:var(--accent)}
.meta{font-size:.82em;color:var(--muted)}
.hint{font-size:.85em;color:var(--muted)}
.row.readtools{margin:.4em 0 .8em}
.chip-btn{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:.3em 1em;min-height:44px}
.chip-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:.4em;margin:.5em 0}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:.2em 1em;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.chip input:checked+span{background:var(--accent);color:#fff;border-color:var(--accent)}
.chip input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.field{margin:.9em 0;display:flex;flex-direction:column;gap:.3em}
.field.row{flex-direction:row;gap:1em}
select,textarea{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.4em .6em;min-height:44px}
textarea{width:100%;font-family:inherit;margin:.4em 0;font-size:.85em}
.points li{padding-right:2.6em}
.points li .star{position:absolute;right:0;top:.1em;border:0;background:transparent;font-size:1.25em;color:var(--muted);min-width:44px;min-height:44px}
.points li.starred{background:var(--warn2);border-radius:8px}
.points li.starred .star{color:var(--warn)}
.points.marks li{padding-right:0}
.cloze .points b,.cloze .tbl b,.cloze .intro b,.cloze .tldr b{color:transparent;background:var(--accent2);border-radius:5px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--accent)}
.cloze .points b.show,.cloze .tbl b.show,.cloze .intro b.show,.cloze .tldr b.show{color:var(--accent);background:transparent;box-shadow:none}
.cloze .term .def{filter:blur(7px);cursor:pointer;transition:filter .2s}
.cloze .term .def.show{filter:none}
.term .def{display:block}
.qt{white-space:pre-line}
.q .qn{display:flex;justify-content:space-between;align-items:center;gap:.5em}
.q .qn small{color:var(--muted);font-weight:400}
.flag{border:0;background:transparent;font-size:1.4em;color:var(--muted);min-width:44px;min-height:44px}
.flag.on{color:var(--warn)}
.badge{display:inline-block;background:var(--bad2);color:var(--bad);border-radius:6px;font-size:.75em;padding:0 .5em;font-weight:600}
.sticky-sc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 68px);z-index:15;padding:.4em 1em;margin:.5em 0}
.statusbar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 68px);z-index:15;display:flex;gap:.5em;flex-wrap:wrap;margin:.4em 0}
.statusbar .timer{position:static}
.btn.bad{background:var(--bad);color:#fff}.btn.good{background:var(--ok);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.meter{display:flex;gap:.3em;justify-content:center;margin:.4em 0}
.meter i{width:2.2em;height:.4em;border-radius:3px;background:var(--line)}
.meter i.on{background:var(--ok)}
.bar{height:6px;border-radius:3px;background:var(--surface2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok)}
.bar.inline{margin:.4em 0}
.keyopts{padding-left:1.6em;margin:.4em 0}.keyopts li.ans{color:var(--ok);font-weight:700}
.keylist small{color:var(--muted)}
.tabs .tab{text-decoration:none;display:inline-flex;align-items:center;color:var(--text)}
.tabs .tab.on{color:#fff}
#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 1.2em);transform:translateX(-50%);background:var(--text);color:var(--bg);padding:.5em 1.2em;border-radius:999px;z-index:120;font-size:.95em}
#toast[hidden],#toTop[hidden]{display:none}
#toTop{position:fixed;right:max(1em,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 1em);width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);z-index:35;font-size:1.2em}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{#toTop,#toast{display:none!important}}
.prof-btn{display:inline-flex;align-items:center;gap:.3em;max-width:11em;min-height:44px;padding:0 .8em;border:1px solid var(--line);border-radius:999px;background:var(--accent2);color:var(--accent);font-weight:600}
.prof-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.greet{margin:.2em 0 .8em}
#profModal{position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:1em}
#profModal[hidden]{display:none}
.pm-box{position:relative;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:18px;padding:1.2em 1.4em;width:min(30em,100%);max-height:90vh;overflow:auto;box-shadow:var(--shadow)}
.pm-box h2{margin:.1em 2em .3em 0;font-size:1.25em}
.pm-x{position:absolute;right:.5em;top:.5em;width:44px;height:44px;border:0;background:transparent;font-size:1.2em}
.pm-box input[type=text]{flex:1;min-width:9em;min-height:44px;border:1px solid var(--line);border-radius:10px;padding:.3em .7em;background:var(--bg)}
.plist{list-style:none;margin:.6em 0;padding:0;display:flex;flex-direction:column;gap:.4em}
.plist li{display:flex;gap:.3em;align-items:center;border:1px solid var(--line);border-radius:12px;padding:.2em .3em .2em .2em;background:var(--bg)}
.plist li.cur{border-color:var(--accent);background:var(--accent2)}
.plist .pick{flex:1;text-align:left;border:0;background:transparent;padding:.3em .6em;min-height:44px;display:flex;flex-direction:column;gap:0}
.plist .pick small{color:var(--muted)}
.plist .mini{min-width:44px;min-height:44px;border:0;background:transparent;font-size:1.05em;border-radius:10px}
.plist .mini.arm{background:var(--bad);color:#fff;font-size:.9em}
.plist .ren{flex:1}
#syncDot{font-style:normal;font-size:.9em;line-height:1}
#syncDot.busy{animation:spin 1s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.syncnote{font-size:.85em;color:var(--muted);background:var(--surface2);border-radius:10px;padding:.5em .8em;margin:.4em 0}
.syncnote.ok{background:var(--ok2);color:var(--ok)}
.prof-btn span#profName{max-width:7em}
.bigcode{font-family:ui-monospace,Consolas,monospace;font-size:1.7em;font-weight:700;letter-spacing:.18em;padding:.1em .5em;border-radius:12px;background:var(--surface);border:2px dashed var(--accent);color:var(--accent)}
.bigcode.sm{font-size:1em;letter-spacing:.12em;padding:0 .35em;border-width:1px;display:inline-block}
.sync-how{background:var(--accent2);border:2px solid var(--accent)}
.sync-how h2{font-size:1.25em}
.sync-on{background:var(--ok2);border-color:var(--ok)}
.steps{margin:.2em 0 .8em;padding-left:1.4em}
.steps li{margin:.3em 0}
.or{color:var(--muted)}
.codein{width:8em;min-height:44px;text-align:center;font-family:ui-monospace,Consolas,monospace;font-size:1.1em;letter-spacing:.15em;text-transform:uppercase;border:2px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text)}
.joinbox{margin-top:1em;padding-top:.8em;border-top:1px dashed var(--line)}