:root{
  --bg:#faf8f5; --card:#ffffff; --ink:#1f2328; --muted:#667085; --line:#e6e1d9;
  --red:#d4351c; --gold:#f5b800; --ok:#1f8a4c; --okbg:#e6f5ec; --bad:#c0392b; --badbg:#fdecea;
  --a1:#2e9e6b; --a2:#1c9aa8; --b1:#3b7de0; --b2:#7a5ae0; --c1:#d4631c;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 4px 14px rgba(0,0,0,.06);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#16181c; --card:#1f2228; --ink:#eceef1; --muted:#9aa3b0; --line:#2e333b;
    --okbg:#173326; --badbg:#3a1d1a; --shadow:0 1px 2px rgba(0,0,0,.4)}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:900px;margin:0 auto;padding:0 16px}
a{color:var(--red)}
h1{font-size:2rem;line-height:1.2;margin:.4em 0}
h2{font-size:1.35rem;margin:1.6em 0 .6em}
h3{font-size:1.1rem;margin:1.2em 0 .4em}
h4{margin:1.2em 0 .4em}
.top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;flex-wrap:wrap}
.logo{font-weight:800;font-size:1.15rem;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px}
.flag{display:inline-flex;flex-direction:column;width:26px;height:20px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.flag i{flex:1}.flag i:nth-child(1){background:#222}.flag i:nth-child(2){background:#d4351c}.flag i:nth-child(3){background:#f5b800}
nav{display:flex;gap:4px}
nav a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:600;font-size:.95rem}
nav a:hover{background:var(--bg)}
nav a.on{color:var(--ink);background:var(--bg)}
.badge{background:var(--red);color:#fff;border-radius:99px;padding:0 7px;font-size:.75rem;margin-left:2px}
.foot{color:var(--muted);font-size:.85rem;padding:24px 16px 40px}

.hero{padding:28px 0 8px}
.hero p{font-size:1.1rem;color:var(--muted);max-width:60ch}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:18px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.stat b{display:block;font-size:1.5rem}
.stat span{color:var(--muted);font-size:.85rem}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 6px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:12px;padding:11px 18px;font:inherit;font-weight:700;cursor:pointer;background:var(--red);color:#fff;text-decoration:none}
.btn:hover{filter:brightness(1.07)}
.btn.sec{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn.sm{padding:6px 12px;font-size:.9rem}
.btn:disabled{opacity:.5;cursor:not-allowed}

.levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.lv{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);display:block;border-top:6px solid var(--c)}
.lv:hover{transform:translateY(-2px)}
.lv .code{font-size:2rem;font-weight:800;color:var(--c)}
.lv p{margin:.2em 0 .8em;color:var(--muted);font-size:.93rem}
.bar2{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.bar2 i{display:block;height:100%;background:var(--c);width:0}
.lv small{color:var(--muted)}

.crumb{color:var(--muted);font-size:.9rem;margin:18px 0 0}
.crumb a{color:var(--muted)}
.units{display:grid;gap:10px;margin:12px 0}
.unit{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--ink)}
.unit:hover{border-color:var(--c)}
.unit .n{width:38px;height:38px;border-radius:50%;background:var(--c);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
.unit.done .n{background:var(--ok)}
.unit .t{flex:1;font-weight:700}
.unit .t small{display:block;font-weight:400;color:var(--muted)}
.pill{font-size:.8rem;padding:2px 10px;border-radius:99px;background:var(--bg);color:var(--muted);border:1px solid var(--line);white-space:nowrap}
.pill.ok{background:var(--okbg);color:var(--ok);border-color:transparent}

.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);margin:14px 0}
.tabs a{padding:10px 14px;text-decoration:none;color:var(--muted);font-weight:700;border-bottom:3px solid transparent;white-space:nowrap}
.tabs a.on{color:var(--ink);border-color:var(--c,var(--red))}

.vlist{display:grid;gap:8px}
.w{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start}
.w .de{font-weight:800;font-size:1.05rem}
.w .vi{color:var(--ink)}
.w .ex{grid-column:2;color:var(--muted);font-size:.92rem}
.spk{border:0;background:var(--bg);border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:1rem;grid-row:span 2}
.spk:hover{background:var(--line)}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.gram table{border-collapse:collapse;width:100%;font-size:.93rem;margin:.6em 0}
.gram th,.gram td{border:1px solid var(--line);padding:6px 9px;text-align:left;vertical-align:top}
.gram th{background:var(--bg)}
.gram{overflow-x:auto}
.gram ul{padding-left:1.2em}

.flash{perspective:900px;max-width:480px;margin:10px auto}
.fc{background:var(--card);border:2px solid var(--line);border-radius:20px;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;cursor:pointer;box-shadow:var(--shadow);gap:6px}
.fc .big{font-size:1.9rem;font-weight:800}
.fc .hint{color:var(--muted);font-size:.85rem}
.fc .ex{color:var(--muted);font-size:.95rem;margin-top:8px}
.ctrl{display:flex;justify-content:center;gap:10px;margin:12px 0;flex-wrap:wrap}
.prog{color:var(--muted);text-align:center;font-size:.9rem}

.q{max-width:640px;margin:10px auto}
.q .kind{color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}
.q .prompt{font-size:1.3rem;font-weight:700;margin:6px 0 14px}
.opts{display:grid;gap:8px}
.opt{text-align:left;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;padding:12px 14px;font:inherit;font-weight:600;cursor:pointer}
.opt:hover:not(:disabled){border-color:var(--red)}
.opt.ok{border-color:var(--ok);background:var(--okbg)}
.opt.bad{border-color:var(--bad);background:var(--badbg)}
.opt:disabled{cursor:default}
.typebox{display:flex;gap:8px}
.typebox input{flex:1;font:inherit;padding:12px;border:2px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)}
.fb{margin-top:14px;padding:12px 14px;border-radius:12px}
.fb.ok{background:var(--okbg)}.fb.bad{background:var(--badbg)}
.score{font-size:3rem;font-weight:800;text-align:center}
.center{text-align:center}
.muted{color:var(--muted)}
.empty{text-align:center;padding:30px 10px}
.kbd{font-size:.8rem;color:var(--muted)}
.note{background:var(--bg);border-left:4px solid var(--gold);padding:10px 14px;border-radius:6px;margin:12px 0;font-size:.92rem}
@media(max-width:560px){h1{font-size:1.6rem}.bar{padding:6px 0}}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:14px 0}
.tile{background:var(--card);border:1px solid var(--line);border-top:5px solid var(--c);border-radius:14px;padding:16px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow)}
.tile:hover{transform:translateY(-2px)}.tile .ic{font-size:1.8rem}.tile small{color:var(--muted)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.diffs{display:flex;flex-wrap:wrap;gap:8px}
details{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:10px 0;padding:4px 14px}
summary{cursor:pointer;font-weight:700;padding:10px 0}
details[open]>summary{border-bottom:1px solid var(--line);margin-bottom:10px}
.pbtns{display:flex;gap:4px;grid-row:span 2}.pbtns .spk{width:34px;height:34px;font-size:.9rem}
.w{grid-template-columns:auto 1fr}.rres{grid-column:2;font-size:.9rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.ansbox{min-height:52px;border:2px dashed var(--line);border-radius:12px;padding:8px}
.chip{border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:8px 12px;font:inherit;font-weight:700;cursor:pointer}
.chip.used{opacity:.3}
.opt.sel{border-color:var(--red);background:var(--bg)}
.gex{margin:12px 0}.gex p{margin:0 0 6px;font-weight:600}.gfb .fb{margin-top:8px}
.card .big{font-size:1.6rem;font-weight:800}