:root{--bg:#f4f6fa;--card:#fff;--tx:#14213d;--mut:#5b6678;--pri:#0a5aa8;--ok:#1a8f4a;--bad:#d4121a;--bd:#dde3ee;--okbg:#e5f6ec;--badbg:#fde8e9}
:root[data-theme=dark]{--bg:#0f1520;--card:#1a2232;--tx:#e8edf6;--mut:#9aa7bd;--pri:#5aa6ee;--ok:#3fcf7c;--bad:#ff6b72;--bd:#2c3750;--okbg:#14301f;--badbg:#3a1a1d}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0f1520;--card:#1a2232;--tx:#e8edf6;--mut:#9aa7bd;--pri:#5aa6ee;--ok:#3fcf7c;--bad:#ff6b72;--bd:#2c3750;--okbg:#14301f;--badbg:#3a1a1d}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.55 system-ui,Segoe UI,Roboto,sans-serif;padding-bottom:72px}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
button,.btn,.opt,nav a{touch-action:manipulation;-webkit-appearance:none;min-height:48px}
header{padding-top:calc(10px + env(safe-area-inset-top))!important;padding-left:calc(14px + env(safe-area-inset-left))!important;padding-right:calc(14px + env(safe-area-inset-right))!important}
nav#tabs{padding-bottom:env(safe-area-inset-bottom)}
header button{min-height:44px;min-width:44px}
.dots i{width:26px;height:26px;font-size:.7rem}
header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--pri);color:#fff}
header h1{flex:1;margin:0;font-size:1.1rem}
header button{background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer;min-width:34px}
main{max-width:720px;margin:0 auto;padding:14px 16px}
nav#tabs{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--card);border-top:1px solid var(--bd);z-index:5}
nav a{flex:1;text-align:center;padding:8px 0 6px;color:var(--mut);text-decoration:none;font-size:1.2rem}
nav a span{display:block;font-size:.7rem}
nav a.on{color:var(--pri);font-weight:700}
.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:14px;margin:0 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{display:block;background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:12px;color:inherit;text-decoration:none}
.tile .ic{font-size:1.8rem}.tile b{display:block}.tile small{color:var(--mut)}
.tile.done{border-color:var(--ok);background:var(--okbg)}
.btn{display:inline-block;background:var(--pri);color:#fff;border:0;border-radius:12px;padding:12px 18px;font-size:1rem;cursor:pointer;text-decoration:none;margin:4px 6px 4px 0}
.btn.sec{background:var(--card);color:var(--pri);border:1px solid var(--pri)}
.btn:disabled{opacity:.45}
.opt{display:block;width:100%;text-align:left;background:var(--card);color:var(--tx);border:2px solid var(--bd);border-radius:12px;padding:12px;margin:8px 0;font-size:1rem;cursor:pointer}
.opt.sel{border-color:var(--pri)}
.opt.ok{border-color:var(--ok);background:var(--okbg)}.opt.no{border-color:var(--bad);background:var(--badbg)}
.exp{background:var(--card);border-left:4px solid var(--pri);padding:10px 12px;border-radius:8px;margin:10px 0}
.bar{height:8px;background:var(--bd);border-radius:6px;overflow:hidden;margin:6px 0}.bar i{display:block;height:100%;background:var(--ok)}
.sign{width:84px;height:84px}.signrow{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0}
.qsign{display:flex;justify-content:center;margin:8px 0}.qsign .sign{width:110px;height:110px}
.lesson h4{margin:16px 0 4px}.lesson ul,.lesson ol{padding-left:20px}.lesson li{margin:6px 0}
.stat{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}.stat div{text-align:center;flex:1;min-width:80px}.stat b{font-size:1.5rem;display:block}
.timer{font-weight:700;color:var(--pri)}.timer.low{color:var(--bad)}
.dots{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}.dots i{width:18px;height:18px;border-radius:5px;background:var(--bd);font-size:.6rem;display:grid;place-items:center;font-style:normal;cursor:pointer}.dots i.a{background:var(--pri);color:#fff}.dots i.c{outline:2px solid var(--tx)}
.pass{color:var(--ok)}.fail{color:var(--bad)}
.note{color:var(--mut);font-size:.85rem}