:root {
  --bg:#F6F8F3; --surface:#FFFFFF; --surface-2:#EFF2EA; --ink:#191F14; --muted:#59634E; --faint:#8A9380;
  --accent:#43811F; --accent-2:#6DB33F; --accent-soft:#E6F0DC; --border:#E0E5D8; --border-strong:#CBD2BE; --code-bg:#F2F4EC;
  --d1:#2F7DA6; --d1-bg:#E2EFF5; --d2:#B9791A; --d2-bg:#F6ECD8; --d3:#6A4C9C; --d3-bg:#EBE4F5; --d4:#B24229; --d4-bg:#F6E1DB; --d5:#8E2130; --d5-bg:#F3DAD8;
  --good:#3f8e3f; --bad:#c0492f;
  --shadow:0 1px 2px rgba(25,31,20,.05), 0 6px 22px rgba(25,31,20,.07);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#12150E; --surface:#1A1E14; --surface-2:#212619; --ink:#E9EDE1; --muted:#A2AC96; --faint:#6E7864;
  --accent:#82BC5A; --accent-2:#6DB33F; --accent-soft:#23301A; --border:#2A3020; --border-strong:#3A4230; --code-bg:#1E2317;
  --d1:#64B3D8; --d1-bg:#17242B; --d2:#D9A445; --d2-bg:#2C2412; --d3:#A98BDD; --d3-bg:#241C33; --d4:#E0765B; --d4-bg:#2C1913; --d5:#E86B7E; --d5-bg:#2E1620;
  --good:#6bbf6b; --bad:#e0765d;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 22px rgba(0,0,0,.35);
}}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; }
body {
  background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.55;
  -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; min-height:100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.app-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px max(18px, calc((100% - 676px) / 2));
  border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:5;
}
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem; letter-spacing:-.02em; }
.brand .accent { color:var(--accent); }
.logo { width:26px; height:26px; border-radius:8px; background:linear-gradient(150deg,var(--accent-2),var(--accent)); flex:0 0 auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3); display:grid; place-items:center; }
.logo svg { width:70%; height:70%; display:block; }
.icon-btn { font:inherit; font-size:1.1rem; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:6px 10px; cursor:pointer; }
.app-bar-actions { display:flex; gap:8px; }
.beta-badge { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:linear-gradient(150deg,var(--accent-2),var(--accent)); padding:2px 7px; border-radius:999px; margin-left:8px; vertical-align:middle; }
@media (prefers-color-scheme: dark){ .beta-badge { color:#12150E; } }
.about-body h2 { margin:8px 0 6px; }
.about-body p { color:var(--muted); font-size:.94rem; margin:0 0 12px; }
.about-body .row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:.92rem; }
.about-body .row .k { color:var(--muted); } .about-body .row .v { font-family:var(--mono); font-weight:700; }
.about-body .lbl { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); display:block; margin:18px 0 5px; }
.progress-strip { height:4px; background:var(--surface-2); }
.progress-fill { height:100%; width:0; background:linear-gradient(90deg,var(--accent-2),var(--accent)); transition:width .3s; }
.mode-switch { display:flex; gap:6px; padding:12px 18px 0; }
.mode-tab { flex:1; font:inherit; font-weight:600; font-size:.95rem; padding:11px; border-radius:12px; border:1px solid var(--border-strong); background:var(--surface); color:var(--muted); cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.mode-tab.active { background:var(--accent); color:#fff; border-color:transparent; }
@media (prefers-color-scheme: dark){ .mode-tab.active { color:#12150E; } }
.filters { display:flex; gap:8px; padding:12px 18px; flex-wrap:wrap; }
/* the [hidden] attribute must win over the author display:flex above (assess mode hides filters) */
.filters[hidden] { display:none; }
.sel { font:inherit; font-size:.85rem; padding:8px 10px; border-radius:10px; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); flex:1 1 auto; min-width:0; }
.stage { flex:1 1 auto; padding:8px 18px 18px; display:flex; justify-content:center; }
/* On desktop the tabs/filters would stretch full-width and look sparse; cap the
   control column to the card width (640 + 18px padding each side) and centre it. */
.mode-switch, .filters { max-width:676px; margin-left:auto; margin-right:auto; width:100%; }
.card {
  background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
  padding:22px; width:100%; max-width:640px; align-self:flex-start; animation:rise .22s ease;
}
@keyframes rise { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .card{animation:none;} .progress-fill{transition:none;} }
.card-top { display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.type-tag { font-family:var(--mono); font-size:11px; padding:3px 9px; border-radius:6px; background:var(--accent-soft); color:var(--accent); font-weight:600; }
.diff { font-family:var(--mono); font-size:11px; font-weight:600; padding:3px 8px; border-radius:6px; }
.diff.d1{background:var(--d1-bg);color:var(--d1);} .diff.d2{background:var(--d2-bg);color:var(--d2);} .diff.d3{background:var(--d3-bg);color:var(--d3);} .diff.d4{background:var(--d4-bg);color:var(--d4);} .diff.d5{background:var(--d5-bg);color:var(--d5);}
.subtopic { font-size:12px; color:var(--faint); margin-left:auto; text-align:right; }
.prompt { font-size:1.12rem; font-weight:650; margin:0 0 14px; text-wrap:pretty; }
pre.code { font-family:var(--mono); font-size:12.5px; line-height:1.5; background:var(--code-bg); border:1px solid var(--border); border-radius:10px; padding:13px 14px; overflow-x:auto; margin:0 0 16px; color:var(--ink); }
.options { display:grid; gap:9px; }
.opt { text-align:left; font:inherit; font-size:.96rem; padding:12px 14px; border-radius:11px; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); cursor:pointer; display:flex; gap:10px; align-items:flex-start; transition:border-color .12s, background .12s; }
.opt .mk { font-family:var(--mono); font-size:12px; color:var(--faint); margin-top:1px; flex:0 0 auto; }
/* long unbroken tokens (media types, URLs, generics) must wrap, not overflow on mobile */
.opt > span:not(.mk) { min-width:0; flex:1 1 auto; overflow-wrap:anywhere; }
.opt .ot { overflow-wrap:anywhere; }
.prompt, .res-topic, .subtopic { overflow-wrap:anywhere; }
.opt:active { transform:scale(.995); }
.opt.correct { border-color:var(--good); background:color-mix(in srgb, var(--good) 12%, var(--surface)); }
.opt.wrong { opacity:.55; }
.opt.picked-bad { border-color:var(--bad); background:color-mix(in srgb, var(--bad) 12%, var(--surface)); opacity:1; }
.opt .rat { display:none; font-size:.83rem; color:var(--muted); margin-top:5px; }
.opt.correct .rat, .opt.wrong .rat, .opt.picked-bad .rat { display:block; }
.reveal-btn, .next-btn, .grade button { font:inherit; font-weight:600; border-radius:11px; cursor:pointer; border:1px solid var(--border-strong); }
.reveal-btn { width:100%; padding:12px; background:var(--surface-2); color:var(--ink); }
.reveal { margin-top:14px; border-top:1px dashed var(--border-strong); padding-top:14px; }
.reveal .lbl { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); display:block; margin-bottom:3px; }
.reveal .ans { font-family:var(--mono); background:var(--code-bg); padding:6px 8px; border-radius:6px; white-space:pre-wrap; overflow-wrap:anywhere; display:block; margin-bottom:12px; }
.reveal p { margin:0 0 12px; font-size:.94rem; }
.reveal .iv { background:var(--d2-bg); border-radius:9px; padding:11px 12px; }
.reveal .iv .lbl { color:var(--d2); }
.learn-more { display:inline-block; margin-top:14px; font-size:.9rem; font-weight:600; color:var(--accent); text-decoration:none; border:1px solid var(--border-strong); border-radius:9px; padding:8px 12px; transition:border-color .12s, background .12s; }
.learn-more:hover { border-color:var(--accent); background:var(--accent-soft); }
.learn-more:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.grade { display:flex; gap:8px; margin-top:16px; }
.grade button { flex:1; padding:12px; }
.grade .again { background:var(--d3-bg); color:var(--d3); border-color:transparent; }
.grade .good { background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.next-btn { width:100%; padding:13px; margin-top:16px; background:var(--accent); color:#fff; border-color:transparent; }
@media (prefers-color-scheme: dark){ .next-btn{ color:#12150E; } }
.foot { padding:0 18px 18px; text-align:center; color:var(--faint); font-size:.8rem; }
.empty { text-align:center; color:var(--muted); padding:50px 20px; }
.empty h2 { color:var(--ink); }
.stats-panel { position:fixed; inset:0; background:var(--bg); padding:22px 18px; overflow-y:auto; z-index:10; }
.stats-panel h2 { margin:8px 0 18px; }
.stat-row { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); }
.stat-row .k { color:var(--muted); }
.stat-row .v { font-family:var(--mono); font-weight:700; }
.topic-bar { margin:14px 0; }
.topic-bar .lab { display:flex; justify-content:space-between; font-size:.85rem; margin-bottom:5px; }
.bar { height:8px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
.bar > span { display:block; height:100%; background:linear-gradient(90deg,var(--accent-2),var(--accent)); }
.close-btn { position:absolute; top:16px; right:16px; font-size:1.3rem; background:none; border:none; color:var(--muted); cursor:pointer; }
.reset-link { display:inline-block; margin-top:20px; color:var(--bad); font-size:.85rem; background:none; border:none; cursor:pointer; text-decoration:underline; }

/* ---- assessment ---- */
.assess-home, .assess-result { background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:22px; width:100%; max-width:640px; align-self:flex-start; animation:rise .22s ease; }
.assess-home h2 { margin:0 0 8px; letter-spacing:-.02em; }
.assess-sub { color:var(--muted); font-size:.94rem; margin:0 0 18px; }
.assess-actions { display:flex; flex-direction:column; gap:10px; margin:6px 0 4px; }
.assess-btn { font:inherit; font-weight:650; font-size:1rem; padding:14px 16px; border-radius:12px; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--ink); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; transition:border-color .12s, transform .06s; }
.assess-btn:active { transform:scale(.995); }
.assess-btn.primary { background:var(--accent); color:#fff; border-color:transparent; }
@media (prefers-color-scheme: dark){ .assess-btn.primary { color:#12150E; } }
.assess-btn .cnt { font-family:var(--mono); font-size:11px; font-weight:500; opacity:.85; }
.assess-note { color:var(--faint); font-size:.8rem; margin:14px 0 0; line-height:1.5; }
.assess-last { border:1px solid var(--border); border-radius:12px; padding:13px 14px; margin-bottom:18px; background:var(--surface-2); }
.assess-last .al-head { display:flex; justify-content:space-between; align-items:baseline; }
.assess-last .lbl { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
.assess-last .al-date { font-family:var(--mono); font-size:11px; color:var(--faint); }
.assess-last .al-headline { font-weight:700; font-size:1rem; margin:5px 0 9px; letter-spacing:-.01em; }
.assess-last .al-bars { display:flex; flex-wrap:wrap; gap:5px; }
.al-chip { font-size:11px; padding:2px 8px; border-radius:99px; font-weight:600; }
.al-chip.g { background:color-mix(in srgb, var(--good) 15%, var(--surface)); color:var(--good); }
.al-chip.a { background:var(--d2-bg); color:var(--d2); }
.al-chip.r { background:var(--d5-bg); color:var(--d5); }
/* assessment question */
.assess-card .assess-top { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.assess-dots { display:flex; gap:4px; flex-wrap:wrap; flex:1; }
.assess-dots .dot { width:7px; height:7px; border-radius:99px; background:var(--surface-2); border:1px solid var(--border-strong); }
.assess-dots .dot.done { background:var(--accent); border-color:transparent; }
.assess-dots .dot.cur { background:var(--accent-2); border-color:transparent; box-shadow:0 0 0 3px var(--accent-soft); }
.assess-count { font-family:var(--mono); font-size:12px; color:var(--muted); flex:0 0 auto; }
.assess-card .opt.chosen { border-color:var(--accent); background:var(--accent-soft); }
.assess-card .opt .ot { flex:1; }
/* results */
.assess-result .res-headline { font-size:1.25rem; font-weight:800; letter-spacing:-.02em; text-wrap:balance; margin-bottom:4px; }
.assess-result .res-overall { color:var(--muted); font-size:.9rem; margin-bottom:18px; }
.assess-result .res-overall b { color:var(--ink); font-family:var(--mono); }
.res-bars { display:flex; flex-direction:column; gap:11px; }
.res-row { display:grid; grid-template-columns:6.5rem 1fr auto; gap:10px; align-items:center; }
.res-topic { font-size:.88rem; font-weight:600; }
.res-track { height:9px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
.res-fill { display:block; height:100%; border-radius:99px; }
.res-fill.g { background:linear-gradient(90deg,var(--accent-2),var(--accent)); }
.res-fill.a { background:var(--d2); }
.res-fill.r { background:var(--d5); }
.res-meta { display:flex; align-items:center; gap:7px; }
.res-pill { font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:99px; }
.res-pill.g { background:color-mix(in srgb, var(--good) 15%, var(--surface)); color:var(--good); }
.res-pill.a { background:var(--d2-bg); color:var(--d2); }
.res-pill.r { background:var(--d5-bg); color:var(--d5); }
.res-lvl { font-family:var(--mono); font-size:10.5px; color:var(--faint); white-space:nowrap; }
.res-focus { margin-top:20px; }
.res-focus .lbl { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); display:block; margin-bottom:9px; }
.focus-chips { display:flex; flex-direction:column; gap:8px; }
.focus-btn { font:inherit; font-size:.9rem; font-weight:600; text-align:left; padding:11px 13px; border-radius:11px; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--ink); cursor:pointer; }
.focus-btn:active { transform:scale(.995); }
@media (max-width:420px){ .res-row { grid-template-columns:5rem 1fr; } .res-meta { grid-column:2; justify-self:start; } }
/* adaptive: self-select seed */
.seed { margin:.2rem 0 1rem; }
.seed .lbl { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); display:block; margin-bottom:8px; }
.seed .opt-note { text-transform:none; letter-spacing:0; }
.seed-chips { display:flex; gap:.5rem; flex-wrap:wrap; }
.seed-chip { font:inherit; font-size:.85rem; font-weight:600; padding:8px 14px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface); color:var(--muted); cursor:pointer; }
.seed-chip.active { background:var(--accent); color:#fff; border-color:transparent; }
@media (prefers-color-scheme: dark){ .seed-chip.active { color:#12150E; } }
.assess-topic-prog { font-family:var(--mono); font-size:12px; color:var(--muted); }
/* adaptive: level pill blue (junior) + result rows with level meter */
.res-pill.b { background:var(--d1-bg); color:var(--d1); }
.al-chip.b { background:var(--d1-bg); color:var(--d1); }
.res-row2 { display:grid; grid-template-columns:7rem 1fr auto; gap:10px; align-items:center; }
@media (max-width:420px){ .res-row2 { grid-template-columns:5.5rem 1fr auto; } }
.lvlmeter { display:flex; gap:4px; }
.lvlmeter .seg { font-family:var(--mono); font-size:11px; font-weight:700; width:22px; height:20px; display:grid; place-items:center; border-radius:5px; background:var(--surface-2); color:var(--faint); border:1px solid var(--border); }
.lvlmeter .seg.on.g { background:color-mix(in srgb, var(--good) 22%, var(--surface)); color:var(--good); border-color:transparent; }
.lvlmeter .seg.on.a { background:var(--d2-bg); color:var(--d2); border-color:transparent; }
.lvlmeter .seg.on.b { background:var(--d1-bg); color:var(--d1); border-color:transparent; }
.lvlmeter .seg.on.r { background:var(--d5-bg); color:var(--d5); border-color:transparent; }

/* ---- first-run welcome overlay ---- */
.welcome-overlay { position:fixed; inset:0; z-index:20; background:color-mix(in srgb, var(--bg) 82%, #000 18%); display:flex; align-items:center; justify-content:center; padding:20px; overflow-y:auto; animation:rise .18s ease; }
.welcome-card { background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); padding:26px 22px; width:100%; max-width:440px; text-align:center; }
.welcome-card .logo.lg { width:56px; height:56px; border-radius:15px; margin:0 auto 14px; }
.welcome-card h2 { margin:0 0 6px; font-size:1.35rem; }
.welcome-lead { color:var(--muted); font-size:.96rem; margin:0 0 18px; }
.welcome-steps { list-style:none; margin:0 0 16px; padding:0; text-align:left; display:flex; flex-direction:column; gap:12px; }
.welcome-steps li { display:flex; gap:12px; align-items:flex-start; font-size:.92rem; line-height:1.45; }
.welcome-steps .ws-ic { font-size:1.3rem; flex:0 0 auto; line-height:1.2; }
.welcome-steps b { color:var(--ink); }
.welcome-tip { color:var(--faint); font-size:.82rem; line-height:1.5; margin:0 0 18px; padding:10px 12px; background:var(--surface-2); border-radius:10px; }
.welcome-card .assess-btn.primary { width:100%; flex-direction:row; }
.welcome-skip { display:block; width:100%; margin-top:10px; font:inherit; font-size:.88rem; font-weight:600; color:var(--muted); background:none; border:none; cursor:pointer; padding:8px; }
.welcome-skip:hover { color:var(--ink); }