/* ================= theming =================
   All colors/typography come from CSS variables. The default (light) theme
   is defined on :root; the other themes override the variables via
   :root[data-theme="..."]. The switcher lives in the top bar (#themebar). */

:root{
  /* light (default) */
  --bg:#f6f7f9; --card:#ffffff; --topbar:#ffffff; --sidebar-bg:#fbfcfd;
  --ink:#1c2430; --muted:#64707d; --line:#e3e7ec;
  --accent:#2f6fed; --accent-ink:#ffffff; --accent-soft:#e8f0fe;
  --ok:#1f9d63; --ok-ink:#ffffff; --warn:#c98a1b;
  --pos:#3b475a; --chip:#eef1f5; --track:#e6eaef;
  --ex-bg:#e8f0fe; --ex-ink:#33404f;
  --active-fg-soft:rgba(255,255,255,.25);
  --mark-bg:#ffe9a8; --mark-ink:#5a4a1e;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --shadow-hover:0 6px 18px rgba(16,24,40,.10);
  --radius:12px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
  --sidebar-w:230px; --top-h:56px;
}

:root[data-theme="dark"]{
  --bg:#0f1420; --card:#1a2130; --topbar:#151b28; --sidebar-bg:#131926;
  --ink:#e6ebf2; --muted:#93a1b5; --line:#2a3344;
  --accent:#5b9dff; --accent-ink:#0b1220; --accent-soft:#1d2c47;
  --ok:#2fa872; --ok-ink:#ffffff; --warn:#e0a63a;
  --pos:#aeb9cc; --chip:#232c3d; --track:#242e40;
  --ex-bg:#1a2740; --ex-ink:#c4d3ec;
  --active-fg-soft:rgba(255,255,255,.22);
  --mark-bg:#4a3d17; --mark-ink:#ffe9a8;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.35);
  --shadow-hover:0 6px 18px rgba(0,0,0,.45);
}

:root[data-theme="sepia"]{
  --bg:#f1e8d2; --card:#faf5e8; --topbar:#f6efdd; --sidebar-bg:#f3ebd8;
  --ink:#3d3226; --muted:#8a7a5f; --line:#e0d3b4;
  --accent:#9c5b2b; --accent-ink:#fff8ef; --accent-soft:#ede0c4;
  --ok:#5f7d3a; --ok-ink:#ffffff; --warn:#a86418;
  --pos:#7a5c3e; --chip:#ece0c6; --track:#e5d8ba;
  --ex-bg:#efe4cc; --ex-ink:#5a4a34;
  --active-fg-soft:rgba(122,84,42,.18);
  --mark-bg:#eed88f; --mark-ink:#5a4a1e;
  --shadow:0 1px 2px rgba(122,90,40,.10),0 1px 3px rgba(122,90,40,.12);
  --shadow-hover:0 6px 18px rgba(122,90,40,.16);
  --radius:10px;
  --font:Georgia,"Times New Roman","Songti SC",serif;
}

:root[data-theme="forest"]{
  --bg:#edf3ee; --card:#ffffff; --topbar:#ffffff; --sidebar-bg:#f3f7f3;
  --ink:#1f2d22; --muted:#5f7263; --line:#dbe5db;
  --accent:#2e7d4f; --accent-ink:#ffffff; --accent-soft:#dff0e4;
  --ok:#1f9d63; --ok-ink:#ffffff; --warn:#c98a1b;
  --pos:#33503c; --chip:#e4efe6; --track:#dce8dd;
  --ex-bg:#e3f0e7; --ex-ink:#2c4a37;
  --active-fg-soft:rgba(255,255,255,.25);
  --mark-bg:#f0e6a0; --mark-ink:#4a4318;
  --shadow:0 1px 2px rgba(30,60,40,.06),0 1px 3px rgba(30,60,40,.08);
  --shadow-hover:0 6px 18px rgba(30,60,40,.12);
}

:root[data-theme="midnight"]{
  --bg:#0c1226; --card:#161d33; --topbar:#111830; --sidebar-bg:#0f1528;
  --ink:#e3e8f5; --muted:#98a3c4; --line:#283353;
  --accent:#f2a33c; --accent-ink:#221503; --accent-soft:#2b2547;
  --ok:#3bbf8a; --ok-ink:#072418; --warn:#e0b13a;
  --pos:#aab6d8; --chip:#1f2946; --track:#212c4d;
  --ex-bg:#1c2140; --ex-ink:#c8d2ef;
  --active-fg-soft:rgba(255,255,255,.2);
  --mark-bg:#4a3a12; --mark-ink:#ffe19a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.4);
  --shadow-hover:0 6px 18px rgba(0,0,0,.5);
}

:root[data-theme="rose"]{
  --bg:#f7f1f4; --card:#ffffff; --topbar:#ffffff; --sidebar-bg:#faf5f8;
  --ink:#2a1f28; --muted:#7a6a75; --line:#eadfe6;
  --accent:#c2417a; --accent-ink:#ffffff; --accent-soft:#fbe9f1;
  --ok:#1f9d63; --ok-ink:#ffffff; --warn:#c98a1b;
  --pos:#5a3b4e; --chip:#f3e6ee; --track:#ecdfe8;
  --ex-bg:#fbe9f1; --ex-ink:#4a3540;
  --active-fg-soft:rgba(255,255,255,.25);
  --mark-bg:#f6dca8; --mark-ink:#5a4318;
  --shadow:0 1px 2px rgba(90,40,70,.06),0 1px 3px rgba(90,40,70,.08);
  --shadow-hover:0 6px 18px rgba(90,40,70,.12);
}

:root[data-theme="sunset"]{
  --bg:#fbf1e9; --card:#fffaf5; --topbar:#fdf5ee; --sidebar-bg:#faf0e6;
  --ink:#33231b; --muted:#8a6f5f; --line:#eed9c8;
  --accent:#e05a33; --accent-ink:#fff6f0; --accent-soft:#fbe3d7;
  --ok:#2f8f5b; --ok-ink:#ffffff; --warn:#c97b1b;
  --pos:#6b4a38; --chip:#f7e6d8; --track:#f0ddcb;
  --ex-bg:#fbe9df; --ex-ink:#5a3d2e;
  --active-fg-soft:rgba(255,255,255,.25);
  --mark-bg:#ffd98f; --mark-ink:#5a4218;
  --shadow:0 1px 2px rgba(140,80,40,.07),0 1px 3px rgba(140,80,40,.09);
  --shadow-hover:0 6px 18px rgba(140,80,40,.14);
}

:root[data-theme="dawn"]{
  --bg:#f3f1fa; --card:#ffffff; --topbar:#faf9fe; --sidebar-bg:#f7f5fc;
  --ink:#241f33; --muted:#756d88; --line:#e3dff0;
  --accent:#6d5bd0; --accent-ink:#ffffff; --accent-soft:#e9e5f9;
  --ok:#2f8f5b; --ok-ink:#ffffff; --warn:#c97b1b;
  --pos:#4c4468; --chip:#eeeaf8; --track:#e5e0f2;
  --ex-bg:#efeafa; --ex-ink:#3f375a;
  --active-fg-soft:rgba(255,255,255,.25);
  --mark-bg:#ffe08f; --mark-ink:#5a4218;
  --shadow:0 1px 2px rgba(80,60,140,.06),0 1px 3px rgba(80,60,140,.08);
  --shadow-hover:0 6px 18px rgba(80,60,140,.12);
  --radius:14px;
}

/* minimal monochrome: flat, no shadow, black accent */
:root[data-theme="paper"]{
  --bg:#ffffff; --card:#ffffff; --topbar:#ffffff; --sidebar-bg:#fafafa;
  --ink:#111111; --muted:#737373; --line:#e5e5e5;
  --accent:#111111; --accent-ink:#ffffff; --accent-soft:#f2f2f2;
  --ok:#111111; --ok-ink:#ffffff; --warn:#8a5a00;
  --pos:#404040; --chip:#f5f5f5; --track:#ebebeb;
  --ex-bg:#f7f7f7; --ex-ink:#2b2b2b;
  --active-fg-soft:rgba(255,255,255,.25);
  --mark-bg:#ffffb0; --mark-ink:#3f3a00;
  --shadow:none; --shadow-hover:none;
  --radius:6px;
  --font:"Helvetica Neue",Helvetica,Arial,"Noto Sans",sans-serif;
}

:root[data-theme="ocean"]{
  --bg:#071a21; --card:#0d2530; --topbar:#0a1f29; --sidebar-bg:#091d26;
  --ink:#dceef2; --muted:#7fa3ad; --line:#1c3a46;
  --accent:#26c6b7; --accent-ink:#04201d; --accent-soft:#12333d;
  --ok:#35d08e; --ok-ink:#062417; --warn:#e8b04a;
  --pos:#9dbdc6; --chip:#14323e; --track:#1a3a48;
  --ex-bg:#0f2e3a; --ex-ink:#bfe2e8;
  --active-fg-soft:rgba(255,255,255,.2);
  --mark-bg:#0e3f4a; --mark-ink:#8ef0e2;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.4);
  --shadow-hover:0 6px 18px rgba(0,0,0,.5);
}

/* neon terminal: monospace, sharp corners, glow shadow */
:root[data-theme="cyber"]{
  --bg:#0a0612; --card:#120b20; --topbar:#0e0819; --sidebar-bg:#0c0716;
  --ink:#e8e4f5; --muted:#8d86ab; --line:#2a2144;
  --accent:#22e6a8; --accent-ink:#04241a; --accent-soft:#122b26;
  --ok:#22e6a8; --ok-ink:#04241a; --warn:#f5b942;
  --pos:#a79ecb; --chip:#1b1430; --track:#221a3c;
  --ex-bg:#151030; --ex-ink:#cfc6f0;
  --active-fg-soft:rgba(255,255,255,.18);
  --mark-bg:#2b2408; --mark-ink:#ffe27a;
  --shadow:0 0 0 1px rgba(34,230,168,.06),0 1px 3px rgba(0,0,0,.5);
  --shadow-hover:0 0 18px rgba(34,230,168,.25);
  --radius:2px;
  --font:ui-monospace,"Cascadia Mono",Consolas,"JetBrains Mono","Noto Sans Mono",monospace;
}

/* ================= base ================= */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:15px/1.6 var(--font);
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
body,#topbar,#sidebar,.card,.u-card,.opt,.tfb,.thm,#search,.az a,.u{
  transition:background-color .25s ease,color .25s ease,border-color .25s ease}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25}
.hidden{display:none!important}
mark{background:var(--mark-bg);color:var(--mark-ink);border-radius:3px;padding:0 1px}

/* top bar */
#topbar{position:sticky;top:0;z-index:50;height:var(--top-h);display:flex;align-items:center;gap:14px;
  padding:0 18px;background:var(--topbar);border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:16px;color:var(--ink);white-space:nowrap}
.brand:hover{text-decoration:none}
.unit-head .vol,.h-vol{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
  margin-left:8px;border-radius:6px;background:var(--accent);color:var(--accent-ink);font-size:13px;vertical-align:middle}
/* book selector */
#bookbar{display:flex;gap:4px;flex:none}
#bookbar .bk{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:var(--card);
  color:var(--muted);font-weight:700;font-size:13px;cursor:pointer;line-height:1}
#bookbar .bk:hover{border-color:var(--accent);color:var(--accent)}
#bookbar .bk.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
/* theme selector */
#themebar{display:flex;gap:6px;align-items:center;flex:none}
.thm{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);cursor:pointer;
  padding:0;position:relative;flex:none;transition:transform .12s ease,box-shadow .12s ease}
.thm:hover{transform:scale(1.15)}
.thm.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--topbar),0 0 0 3.5px var(--accent)}
#topbar nav{margin-left:auto;display:flex;gap:4px}
#topbar nav a{padding:7px 12px;border-radius:8px;color:var(--muted);font-weight:500}
#topbar nav a:hover{background:var(--accent-soft);color:var(--accent);text-decoration:none}
#topbar nav a.active{background:var(--accent-soft);color:var(--accent)}

/* search */
#searchbox{position:relative;flex:1;max-width:420px}
#search{width:100%;height:38px;padding:0 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);color:var(--ink);font-size:14px;outline:none}
#search::placeholder{color:var(--muted)}
#search:focus{border-color:var(--accent);background:var(--topbar)}
#search-drop{position:absolute;top:44px;left:0;right:0;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow);overflow:hidden;max-height:340px;overflow-y:auto}
#search-drop .row{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;color:var(--ink)}
#search-drop .row:hover,#search-drop .row.sel{background:var(--accent-soft)}
#search-drop .w{font-weight:600}
#search-drop .meta{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}

/* layout */
#layout{display:flex;align-items:flex-start}
#sidebar{position:sticky;top:var(--top-h);width:var(--sidebar-w);flex:none;height:calc(100vh - var(--top-h));
  overflow-y:auto;padding:14px;border-right:1px solid var(--line);background:var(--sidebar-bg)}
#main{flex:1;min-width:0;padding:26px 34px 80px;max-width:900px}

/* sidebar units */
#sidebar .side-title{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:6px 10px 8px}
#sidebar .u{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;
  color:var(--ink);position:relative}
#sidebar .u:hover{background:var(--accent-soft)}
#sidebar .u.active{background:var(--accent);color:var(--accent-ink)}
#sidebar .u .num{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:7px;
  background:var(--chip);font-size:12px;font-weight:700;color:var(--muted)}
#sidebar .u.active .num{background:var(--active-fg-soft);color:var(--accent-ink)}
#sidebar .u .lbl{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sidebar .u .bar{position:absolute;left:10px;right:10px;bottom:3px;height:3px;border-radius:2px;
  background:rgba(128,128,128,.18);overflow:hidden}
#sidebar .u .bar i{display:block;height:100%;background:var(--ok);border-radius:2px}
#sidebar .u.active .bar{background:var(--active-fg-soft)}
#sidebar .u.active .bar i{background:var(--accent-ink)}

/* generic cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:18px 20px;margin-bottom:16px}
.sect-h{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 4px}
.unit-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.unit-head h1{margin:0;font-size:26px}
.unit-head .pg{color:var(--muted);font-size:13px}
.progress-line{display:flex;align-items:center;gap:10px;margin:10px 0 4px;font-size:13px;color:var(--muted)}
.progress-line .track{flex:1;max-width:280px;height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.progress-line .track i{display:block;height:100%;background:var(--ok);border-radius:3px}

/* word list */
.word{border-bottom:1px solid var(--line);padding:16px 2px;border-radius:6px}
.word:last-child{border-bottom:0}
.word.flash{animation:flash 1.2s ease}
@keyframes flash{0%{background:var(--mark-bg)}100%{background:transparent}}
.word .top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.word .wname{font-size:20px;font-weight:700}
.word .pron{color:var(--muted);font-size:14px}
.word .pos{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--pos);background:var(--chip);
  padding:2px 7px;border-radius:5px;text-transform:lowercase}
.word .done{margin-left:auto;width:22px;height:22px;flex:none;border-radius:50%;border:2px solid var(--line);
  cursor:pointer;position:relative;background:var(--card)}
.word .done.on{border-color:var(--ok);background:var(--ok)}
.word .done.on:after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;
  border:solid var(--ok-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.word .def{margin:8px 0 2px}
.word .ex{margin:2px 0 0;color:var(--ex-ink);background:var(--ex-bg);border-left:3px solid var(--accent);
  padding:8px 12px;border-radius:0 8px 8px 0}
.word .ex .tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);
  margin-right:8px}
.word.miss .def,.word.miss .ex{color:var(--warn)}

/* sections (exercises) */
.sec .sec-title{font-size:16px;font-weight:700;margin:0 0 12px}
.item{padding:12px 0;border-bottom:1px dashed var(--line)}
.item:last-child{border-bottom:0}
.item .stem{font-weight:600;margin-bottom:8px}
.item .extra{color:var(--muted);font-size:14px;margin-top:6px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt{display:flex;gap:9px;align-items:flex-start;padding:8px 11px;border:1px solid var(--line);border-radius:9px;
  cursor:pointer;background:var(--card);font-size:14px;transition:border-color .1s,background .1s}
.opt:hover{border-color:var(--accent)}
.opt .k{flex:none;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;
  background:var(--chip);font-size:12px;font-weight:700;color:var(--muted)}
.opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.opt.sel .k{background:var(--accent);color:var(--accent-ink)}
.opts.single{grid-template-columns:1fr}
.item .none{color:var(--muted);font-size:13px;font-style:italic}

/* comprehension (mark-style) */
.comp-sec{margin-bottom:6px}
.comp-sec .sec-title{font-size:15px;font-weight:700;margin:0 0 4px}
.open-note{color:var(--muted);font-size:12.5px;font-style:italic}
.tf{display:flex;gap:8px;margin-top:2px}
.tfb{width:34px;height:30px;border:1px solid var(--line);border-radius:8px;background:var(--card);
  font-weight:800;font-size:14px;color:var(--muted);cursor:pointer}
.tfb:hover{border-color:var(--accent);color:var(--accent)}
.tfb.sel{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* story */
.story .st-title{font-size:19px;font-weight:700;margin:0 0 10px}
.story p{margin:0 0 12px}
.story .read-btn{margin-top:6px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:9px;border:1px solid var(--line);
  background:var(--card);font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.on{background:var(--ok);border-color:var(--ok);color:var(--ok-ink)}
.btn.ghost{background:transparent}

/* all words */
.az .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.az a{display:flex;justify-content:space-between;gap:8px;padding:8px 11px;border:1px solid var(--line);
  border-radius:8px;background:var(--card);font-size:14px;color:var(--ink)}
.az a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.az a .pg{color:var(--muted);font-size:12px}
.az .letter{grid-column:1/-1;font-size:13px;font-weight:800;color:var(--muted);margin-top:10px;
  border-bottom:2px solid var(--line);padding-bottom:4px}
.empty{color:var(--muted);padding:30px;text-align:center}

/* home */
.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.u-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px;cursor:pointer;position:relative;overflow:hidden}
.u-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.u-card .n{font-size:13px;font-weight:700;color:var(--muted)}
.u-card .range{font-size:15px;font-weight:600;margin:6px 0 10px;min-height:42px}
.u-card .foot{display:flex;align-items:center;gap:8px}
.u-card .foot .track{flex:1;height:5px;border-radius:3px;background:var(--track);overflow:hidden}
.u-card .foot .track i{display:block;height:100%;background:var(--ok)}
.u-card .foot .pct{font-size:12px;color:var(--muted);width:38px;text-align:right}

footer{color:var(--muted);font-size:12.5px;text-align:center;padding:18px}

@media(max-width:960px){
  #topbar{gap:10px;padding:0 12px}
  .brand{font-size:14px}
  #themebar .thm{width:19px;height:19px}
}
@media(max-width:820px){
  #sidebar{display:none}
  #main{padding:18px 14px 60px}
  .opts{grid-template-columns:1fr}
  #searchbox{max-width:none}
  #bookbar .bk{width:26px;height:26px}
  #themebar{display:none}
}