:root{
  --bg:#0f1115; --panel:#171a21; --panel2:#1e222c; --line:#2b303c;
  --txt:#e7e9ee; --dim:#9aa3b2; --faint:#6b7385;
  --acc:#e0533d; --acc2:#f0a04b; --ok:#3fb27f; --bad:#e0533d; --info:#5a9bd8;
  --r:14px; --sh:0 8px 24px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
  --bg:#f6f4ef; --panel:#fff; --panel2:#f0eee8; --line:#e0dcd2;
  --txt:#1c1f26; --dim:#5d6472; --faint:#8b93a3;
  --sh:0 4px 16px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
/* คลาสที่ตั้ง display เอง (.catgrid, .vlist, .row …) จะทับกฎ [hidden] ของเบราว์เซอร์ ต้องบังคับไว้ */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt);
  font-family:"Noto Sans","Noto Sans Thai","Sarabun",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:15px; line-height:1.65; -webkit-text-size-adjust:100%;
}
.zh{font-family:"Noto Serif SC","Songti SC","PingFang SC","Microsoft YaHei",serif}
/* พินอิน: บังคับฟอนต์ละตินที่มีสระ+วรรณยุกต์แบบ precomposed (ā ē ǎ ǚ …) ไม่ให้เบราว์เซอร์ผสมฟอนต์เอง */
.pin{font-family:"Noto Sans","Lucida Sans Unicode","DejaVu Sans","Segoe UI",Arial,sans-serif;font-variant-ligatures:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:var(--info)}

/* ---------- layout ---------- */
.wrap{max-width:960px;margin:0 auto;padding:0 16px 96px}
header.top{
  position:sticky;top:0;z-index:30;background:var(--bg);
  border-bottom:1px solid var(--line);
}
.top-in{max-width:960px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.brand{font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.brand b{color:var(--acc)}
.spacer{flex:1}
.tag{font-size:12px;color:var(--dim);border:1px solid var(--line);border-radius:99px;padding:2px 10px;white-space:nowrap}
.tag.on{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.tag.off{color:var(--acc2);border-color:color-mix(in srgb,var(--acc2) 40%,transparent)}
.iconbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;color:var(--dim)}
.iconbtn:hover{color:var(--txt);background:var(--panel2)}

nav.tabs{display:flex;gap:4px;max-width:960px;margin:0 auto;padding:0 12px 8px;overflow-x:auto}
nav.tabs button{
  padding:8px 14px;border-radius:99px;color:var(--dim);font-weight:600;font-size:14px;white-space:nowrap;
}
nav.tabs button.active{background:var(--acc);color:#fff}
nav.tabs button:not(.active):hover{background:var(--panel2);color:var(--txt)}

section.view{display:none;padding-top:20px}
section.view.active{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- bits ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card+.card{margin-top:12px}
h2.h{font-size:17px;margin:0 0 12px}
.muted{color:var(--dim)}
.small{font-size:13px}
.tiny{font-size:12px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:12px}
input[type=text],input[type=number],select,textarea{
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;width:100%;outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--acc)}
textarea{min-height:120px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
label.fld{display:block;margin-bottom:12px}
label.fld>span{display:block;font-size:13px;color:var(--dim);margin-bottom:5px}
.btn{background:var(--acc);color:#fff;padding:10px 18px;border-radius:10px;font-weight:600}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
.btn.ghost:hover{background:var(--panel2)}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:8px}
.chip{border:1px solid var(--line);background:var(--panel2);border-radius:99px;padding:4px 11px;font-size:13px;color:var(--dim)}
.chip.pick{cursor:pointer}
.chip.pick:hover{border-color:var(--acc);color:var(--txt)}
.bar{height:8px;border-radius:99px;background:var(--panel2);overflow:hidden}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.empty{text-align:center;color:var(--faint);padding:48px 16px}

/* ---------- กริดหมวด ---------- */
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.cat{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 14px;
  text-align:left;cursor:pointer;display:block;width:100%;
}
.cat:hover{border-color:var(--acc);transform:translateY(-1px)}
.cat:disabled{opacity:.42;cursor:not-allowed;transform:none;border-color:var(--line)}
.cat .n{font-weight:700;font-size:15px}
.cat .rg{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.cat .st{font-size:12px;color:var(--dim);margin:8px 0 5px;font-variant-numeric:tabular-nums}
.cat .bar{height:5px}

/* ---------- vocab ---------- */
.vlist{display:grid;gap:8px;margin-top:12px}
.vrow{
  display:grid;grid-template-columns:42px minmax(96px,auto) minmax(90px,1fr) 2fr;gap:12px;align-items:baseline;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;text-align:left;width:100%;
}
.vrow:hover{border-color:var(--acc)}
.vrow .idx{color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}
.vrow .w{font-size:22px;line-height:1.2}
.vrow .py{color:var(--acc2);font-size:13px}
.vrow .mn{color:var(--dim);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vrow .dot{position:absolute}
@media(max-width:640px){
  .vrow{grid-template-columns:34px 1fr;grid-template-areas:"i w" ". p" ". m";gap:2px 10px}
  .vrow .idx{grid-area:i}.vrow .w{grid-area:w}.vrow .py{grid-area:p}.vrow .mn{grid-area:m;white-space:normal}
}
/* จุดสถานะ: เทา=ยังไม่เรียน, ส้ม=เรียนแล้ว, เขียว=จำได้แล้ว */
.dot{display:inline-block;width:8px;height:8px;border-radius:99px;background:var(--faint);margin:0 2px 0 6px;vertical-align:middle;flex:none}
.dot.big{width:11px;height:11px;margin-left:0}
.s0{background:var(--faint)} .s1{background:var(--acc2)} .s2{background:var(--ok)}
.warn{font-style:normal;font-size:12px;margin-left:5px;color:var(--bad);vertical-align:middle}
.warnpill{font-size:12px;color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 40%,transparent);border-radius:99px;padding:2px 9px}
.statusbox{background:var(--panel2);border-radius:10px;padding:12px 14px}
.statusnow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px}
.bar2{position:relative}
.bar2>b{position:absolute;left:0;top:0;height:100%;background:var(--ok);border-radius:99px}

/* ---------- modal ---------- */
.mask{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;display:grid;place-items:center;padding:16px}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;max-width:620px;width:100%;max-height:88vh;overflow:auto;box-shadow:var(--sh)}
.modal-h{position:sticky;top:0;background:var(--panel);border-bottom:1px solid var(--line);padding:14px 18px;display:flex;align-items:center;gap:10px}
.modal-b{padding:18px}
.det-w{font-size:44px;line-height:1.1}
.det-py{color:var(--acc2);font-size:16px}
.sec{margin-top:18px}
.sec>h4{margin:0 0 6px;font-size:13px;color:var(--faint);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.ex{border-left:2px solid var(--line);padding:2px 0 2px 12px;margin-bottom:10px}
.ex .zh{font-size:17px}
.ex .th{color:var(--dim);font-size:13px}
table.cmp{width:100%;border-collapse:collapse;font-size:13px}
table.cmp th{text-align:left;color:var(--faint);font-weight:600;padding:5px 8px;border-bottom:1px solid var(--line);font-size:12px}
table.cmp td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
table.cmp tr:last-child td{border-bottom:none}
.tipbox{background:var(--panel2);border-radius:10px;padding:10px 12px;font-size:14px}
.navrow{
  position:sticky;bottom:0;background:var(--panel);border-top:1px solid var(--line);
  margin:20px -18px -18px;padding:11px 18px;display:flex;align-items:center;gap:10px;
}
.navrow .pos{flex:1;text-align:center;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.navrow button{min-width:96px}

/* ---------- quiz ---------- */
.qhead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.qhead .bar{flex:1}
.qcount{font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.qtype{font-size:12px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.qword{font-size:62px;line-height:1.15;text-align:center;margin:10px 0 4px}
.qsub{text-align:center;color:var(--faint);font-size:13px;margin-bottom:22px}
.opts{display:grid;gap:9px}
.opt{
  display:flex;gap:12px;align-items:center;text-align:left;width:100%;
  background:var(--panel2);border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;transition:.12s;
}
.opt:hover:not(:disabled){border-color:var(--acc)}
.opt .key{width:24px;height:24px;flex:none;border-radius:7px;background:var(--panel);display:grid;place-items:center;font-size:12px;color:var(--faint)}
.opt.right{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent)}
.opt:disabled{cursor:default}
.fb{margin-top:14px;border-radius:12px;padding:12px 14px;font-size:14px}
.fb.ok{background:color-mix(in srgb,var(--ok) 13%,transparent);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent)}
.fb.no{background:color-mix(in srgb,var(--bad) 13%,transparent);border:1px solid color-mix(in srgb,var(--bad) 35%,transparent)}
.score{font-size:52px;font-weight:700;text-align:center;line-height:1.1}
.scorelbl{text-align:center;color:var(--dim);margin-bottom:18px}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.stat b{display:block;font-size:26px;line-height:1.2;font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--dim)}
.heat{display:grid;grid-template-columns:repeat(auto-fill,13px);gap:3px}
.heat i{width:13px;height:13px;border-radius:3px;background:var(--panel2)}
.heat i.l1{background:color-mix(in srgb,var(--acc) 30%,var(--panel2))}
.heat i.l2{background:color-mix(in srgb,var(--acc) 55%,var(--panel2))}
.heat i.l3{background:color-mix(in srgb,var(--acc) 80%,var(--panel2))}
.heat i.l4{background:var(--acc)}
table.log{width:100%;border-collapse:collapse;font-size:13px}
table.log th{text-align:left;color:var(--faint);font-size:12px;padding:6px 8px;border-bottom:1px solid var(--line)}
table.log td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 18px;box-shadow:var(--sh);font-size:14px;
}