:root{--bg:#f8fafc;--card:#fff;--fg:#0f172a;--mut:#475569;--bd:#cbd5e1;--acc:#2563eb;--ok:#15803d;--okbg:#dcfce7;--bad:#b91c1c;--badbg:#fee2e2;--bar:#e2e8f0}
@media (prefers-color-scheme:dark){html[data-theme=auto]{--bg:#0f172a;--card:#1e293b;--fg:#f1f5f9;--mut:#cbd5e1;--bd:#334155;--acc:#60a5fa;--ok:#4ade80;--okbg:#14532d;--bad:#f87171;--badbg:#450a0a;--bar:#334155}}
html[data-theme=dark]{--bg:#0f172a;--card:#1e293b;--fg:#f1f5f9;--mut:#cbd5e1;--bd:#334155;--acc:#60a5fa;--ok:#4ade80;--okbg:#14532d;--bad:#f87171;--badbg:#450a0a;--bar:#334155}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
main{max-width:560px;margin:0 auto;padding:max(12px,env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom))}
h1{font-size:1.5rem;margin:.2em 0}h2{font-size:1.15rem;margin:.8em 0 .4em}
.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:14px;margin:10px 0}
.row{display:flex;gap:8px;align-items:center;justify-content:space-between}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.stats b{display:block;font-size:1.35rem}.stats small{color:var(--mut)}
.bar{height:10px;background:var(--bar);border-radius:6px;overflow:hidden}.bar>i{display:block;height:100%;background:var(--acc)}
.dom{margin:8px 0}.dom .row{font-size:.92rem}
button{font:inherit;color:inherit;min-height:48px;border-radius:12px;border:1px solid var(--bd);background:var(--card);padding:10px 14px;cursor:pointer;touch-action:manipulation}
.btn{width:100%;margin:6px 0;font-weight:600;text-align:left}
.btn.primary{background:var(--acc);color:#fff;border-color:var(--acc);text-align:center}
.btn small{display:block;font-weight:400;color:var(--mut)}
.icon{min-width:48px}
.opt{display:block;width:100%;text-align:left;margin:8px 0;padding:12px 14px;line-height:1.35}
.opt.sel{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc) inset}
.opt.right{background:var(--okbg);border-color:var(--ok)}.opt.wrong{background:var(--badbg);border-color:var(--bad)}
.stem{font-size:1.06rem;font-weight:600}
.tag{display:inline-block;font-size:.78rem;color:var(--mut);border:1px solid var(--bd);border-radius:20px;padding:1px 8px;margin-right:4px}
.expl{font-size:.96rem}.expl p{margin:.45em 0}.expl .ok{color:var(--ok);font-weight:700}.expl .no{color:var(--bad);font-weight:700}
.timer{font-variant-numeric:tabular-nums;font-weight:700}
.big{font-size:2.4rem;font-weight:800;text-align:center;margin:.2em 0}
.mut{color:var(--mut)}.loading{text-align:center;margin-top:40vh}
.sticky{position:sticky;bottom:0;padding-top:6px;background:linear-gradient(transparent,var(--bg) 30%)}
button{-webkit-tap-highlight-color:transparent}button:focus{outline:none}button:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.btn.primary{color:var(--bg)}html:not([data-theme=dark]) .btn.primary{color:#fff}
@media (prefers-color-scheme:dark){html[data-theme=auto] .btn.primary{color:#0f172a}}
.opt:disabled{opacity:1;color:var(--fg)}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.cell{min-height:48px;padding:0;font-weight:700}.cell.ans{background:var(--acc);color:var(--bg);border-color:var(--acc)}html:not([data-theme=dark]) .cell.ans{color:#fff}
.cell.blank{border-style:dashed}.cell.flg{box-shadow:0 0 0 3px #f59e0b inset}
.primary-s{background:var(--acc);color:#fff;border-color:var(--acc);font-weight:600}
button:disabled{opacity:.45}.opt:disabled{opacity:1}
.filters{justify-content:flex-start;flex-wrap:wrap}.filt.on{background:var(--acc);color:#fff;border-color:var(--acc)}
#flag[aria-pressed=true]{border-color:#f59e0b;color:#b45309}

/* contrast: text on accent fills */
:root{--onacc:#fff;--flag:#b45309}
html[data-theme=dark]{--onacc:#0f172a;--flag:#fbbf24}
@media (prefers-color-scheme:dark){html[data-theme=auto]{--onacc:#0f172a;--flag:#fbbf24}}
.btn.primary,.primary-s,.filt.on,.cell.ans,html:not([data-theme=dark]) .btn.primary,html:not([data-theme=dark]) .cell.ans,html[data-theme=auto] .btn.primary{color:var(--onacc)}
#flag[aria-pressed=true]{border-color:var(--flag);color:var(--flag)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:var(--onacc);text-align:center}
button:disabled{opacity:.6}.opt:disabled{opacity:1}