:root{
  --bg:#121318;
  --bg2:#16181f;
  --card:#1b1e26;
  --card2:#242833;
  --text:rgba(255,255,255,.87);
  --muted:rgba(255,255,255,.60);
  --faint:rgba(255,255,255,.38);
  --line:rgba(255,255,255,.08);
  --acc:#8aa3ff;
  --acc-soft:rgba(138,163,255,.12);
  --akk:#f07682;
  --akk-soft:rgba(240,118,130,.12);
  --dat:#6aabf7;
  --dat-soft:rgba(106,171,247,.12);
  --nom:#5fd49a;
  --nom-soft:rgba(95,212,154,.12);
  --wex:#b794f6;
  --wex-soft:rgba(183,148,246,.12);
  --gold:#e8b34b;
  --ok:#5fd49a;
  --bad:#f07682;
  --radius:18px;
}
/* ---------- paper / exam mode (Lesen · Hören · Schreiben) ----------
   Scoped to body.exam — the reading-heavy views go high-contrast paper,
   while the hub, Sprechen, Redemittel and Grammatik keep the dark theme.
   Re-themes by overriding the design tokens, so components reflow. */
body.exam{
  --bg:#F4F2EC; --bg2:#FCFBF8; --card:#FCFBF8; --card2:#F1EFE7;
  --text:#1A1A18; --muted:#5E5D57; --faint:#8A887F; --line:#E2DFD5;
  --acc:#1B3A5B; --acc-soft:#E6ECF3;
  --nom:#2E6B4F; --nom-soft:#E7F0EA;
  --akk:#9A4A33; --akk-soft:#F5E8E3;
  --dat:#1B3A5B; --dat-soft:#E6ECF3;
  --wex:#5b4a86; --wex-soft:#ECE8F4;
  --gold:#9A6A00; --ok:#2E6B4F; --bad:#9A4A33;
}
body.exam .btn-primary{color:#fff}
body.exam .passage{
  font-family:Georgia,"Times New Roman",serif;font-size:17px;line-height:1.78;
  box-shadow:0 6px 24px -20px rgba(0,0,0,.3);
}
body.exam .passage h3{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:18px;line-height:1.3}
body.exam .qitem .qn,body.exam .choicebtn{font-size:15.5px}
/* Vorlesen study-aid button on Lesen passages */
.vorlesen{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 12px;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--acc);cursor:pointer}
.vorlesen:hover{background:#fff;border-color:var(--acc)}
.vorlesen.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.passage{position:relative}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  line-height:1.5;
  overflow-x:hidden;
}
#app{max-width:600px;margin:0 auto;padding:16px 16px 80px;min-height:100vh}

/* ---------- header ---------- */
header{display:flex;align-items:center;justify-content:space-between;padding:8px 4px 18px}
.brand{font-weight:800;font-size:18px;letter-spacing:-.02em;cursor:pointer}
.brand span.a{color:var(--acc)} .brand span.d{color:var(--acc)}
.hud{display:flex;align-items:center;gap:16px;font-weight:600;font-size:13px;color:var(--muted)}
.hud .pill{display:flex;align-items:center;gap:5px}
.ring{position:relative;width:38px;height:38px;cursor:pointer}
.ring svg{transform:rotate(-90deg)}
.ring .pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}

/* ---------- generic ---------- */
.screen{animation:slideUp .35s ease both}
@keyframes slideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
h1{font-size:26px;letter-spacing:-.03em;margin-bottom:4px}
h2{font-size:17px;margin-bottom:10px}
.sub{color:var(--muted);font-size:14px;margin-bottom:22px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:18px;margin-bottom:14px}
button{font-family:inherit;border:none;cursor:pointer;color:inherit;background:none;font-size:inherit}
.btn{display:block;width:100%;padding:15px;border-radius:16px;font-weight:700;font-size:16px;text-align:center;transition:transform .1s,filter .15s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--acc);color:#10131c}
.btn-ghost{background:var(--card2);color:var(--text)}
.back{color:var(--muted);font-weight:600;font-size:14px;padding:6px 0;margin-bottom:8px;display:inline-flex;align-items:center;gap:6px}
.tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:99px}
.tag-akk{background:var(--akk-soft);color:var(--akk)}
.tag-dat{background:var(--dat-soft);color:var(--dat)}
.tag-nom{background:var(--nom-soft);color:var(--nom)}
.tag-wex{background:var(--wex-soft);color:var(--wex)}
.tag-gold{background:rgba(255,201,77,.14);color:var(--gold)}

/* ---------- home / path ---------- */
.hero{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:22px}
.hero .kicker{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.hero h2{font-size:21px;margin-bottom:2px}
.hero p{color:var(--muted);font-size:14px;margin-bottom:18px}
.quietrow{display:flex;gap:22px;justify-content:center;margin:0 0 28px;font-size:13px;color:var(--muted)}
.quietrow button{color:var(--muted);font-weight:600;font-size:13px}
.quietrow button:hover{color:var(--text)}
.sect{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin:0 4px 10px}
.path{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.unode{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 16px;text-align:left;transition:background .15s}
.unode:not(.locked):hover{background:var(--card2)}
.unode .dot{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--card2);color:var(--muted)}
.unode .un{font-weight:600;font-size:15px;color:var(--text)}
.unode .us{font-size:13px;color:var(--muted)}
.unode .meta{margin-left:auto;font-size:12px;font-weight:600;color:var(--faint);flex:none}
.unode.current{border-color:var(--acc)}
.unode.current .dot{background:var(--acc);color:#10131c}
.unode.done .dot{background:transparent;border:1.5px solid var(--ok);color:var(--ok)}
.unode.done .meta{color:var(--ok)}
.unode.locked{opacity:.38;cursor:default}
.tipbox{background:var(--acc-soft);border:1px solid rgba(138,163,255,.25);border-radius:14px;padding:14px 16px;font-size:14px;line-height:1.55}
.chunklist{display:flex;flex-direction:column;gap:8px;margin:12px 0 20px}
.chunk{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.chunk .de{font-weight:700;font-size:17px}
.chunk .de b{color:var(--acc)}
.chunk .en{font-size:13px;color:var(--muted);margin-top:2px}

/* ---------- quiz ---------- */
.qbar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.qprog{flex:1;height:8px;background:var(--card2);border-radius:99px;overflow:hidden}
.qprog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--dat),var(--akk));border-radius:99px;transition:width .4s ease}
.qcount{font-size:13px;font-weight:700;color:var(--muted)}
.combo{font-size:13px;font-weight:800;color:var(--gold);min-width:48px;text-align:right}
.qcat{margin-bottom:12px}
.qtext{font-size:26px;font-weight:700;line-height:1.45;margin:6px 0 24px;letter-spacing:-.01em}
.qtext .blank{display:inline-block;min-width:64px;border-bottom:3px solid var(--muted);text-align:center;color:var(--gold);font-weight:800;padding:0 6px}
.qtext .hint{color:var(--muted);font-weight:500;font-size:16px}
.opts{display:grid;gap:10px}
.opt{background:var(--card);border:2px solid rgba(255,255,255,.07);border-radius:16px;padding:14px 16px;font-size:17px;font-weight:600;text-align:left;transition:border-color .15s,background .15s;display:flex;align-items:center;gap:12px}
.opt .key{font-size:11px;font-weight:800;color:var(--muted);background:var(--card2);border-radius:6px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.opt:not(:disabled):hover{border-color:rgba(255,255,255,.25)}
.opt.correct{border-color:var(--ok);background:var(--nom-soft);animation:pop .3s ease}
.opt.wrong{border-color:var(--bad);background:var(--akk-soft);animation:shake .4s ease}
.opt.reveal{border-color:var(--ok)}
@keyframes pop{50%{transform:scale(1.03)}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* typing */
.type-row{display:flex;gap:10px;margin-bottom:12px}
.type-row input{flex:1;background:var(--card);border:2px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 16px;font-size:18px;font-weight:600;color:var(--text);font-family:inherit;outline:none}
.type-row input:focus{border-color:var(--dat)}
.type-row input.correct{border-color:var(--ok);background:var(--nom-soft)}
.type-row input.wrong{border-color:var(--bad);background:var(--akk-soft);animation:shake .4s}
.type-row .go{background:var(--dat);color:#fff;border-radius:16px;padding:0 22px;font-weight:800;font-size:15px}
.specials{display:flex;gap:8px}
.specials button{background:var(--card2);border-radius:10px;padding:8px 14px;font-size:16px;font-weight:700}

/* scene */
.stage{position:relative;height:130px;background:linear-gradient(180deg,#16202f,#121a27);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);margin-bottom:18px;overflow:hidden}
.stage .floor{position:absolute;bottom:18px;left:8%;right:8%;height:2px;background:rgba(255,255,255,.08)}
.stage .actor{position:absolute;font-size:40px;bottom:22px;left:12%;transition:none;z-index:2}
.stage .target{position:absolute;font-size:46px;bottom:20px;right:16%}
.stage .qmark{position:absolute;top:10px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:800;color:var(--muted);background:var(--card2);padding:4px 14px;border-radius:99px;opacity:.85}
.stage.anim-move .actor{animation:jumpTo 1.1s ease forwards}
@keyframes jumpTo{
  0%{left:12%;bottom:22px}
  45%{left:38%;bottom:64px}
  75%{left:58%;bottom:70px}
  100%{left:62%;bottom:58px}
}
.stage.anim-stay .actor{left:62%;bottom:58px;animation:bob 1s ease infinite}
@keyframes bob{50%{transform:translateY(-5px)}}
.stage .verdict{position:absolute;top:10px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:800;padding:4px 14px;border-radius:99px;animation:pop .3s ease}
.verdict.v-akk{background:var(--akk-soft);color:var(--akk)}
.verdict.v-dat{background:var(--dat-soft);color:var(--dat)}

/* word order builder */
.order-line{min-height:54px;background:var(--card);border:2px dashed rgba(255,255,255,.18);border-radius:16px;padding:10px;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;align-items:center}
.order-line.correct{border-style:solid;border-color:var(--ok);background:var(--nom-soft)}
.order-line.wrong{border-style:solid;border-color:var(--bad);background:var(--akk-soft);animation:shake .4s}
.order-pool{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;justify-content:center}
.wchip{background:var(--card2);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:9px 14px;font-weight:700;font-size:16px;transition:transform .1s}
.wchip:active{transform:scale(.94)}
.order-line .wchip{background:var(--dat-soft);border-color:rgba(77,163,255,.35)}

/* sort */
.chip-stage{display:flex;align-items:center;justify-content:center;height:110px;margin-bottom:16px}
.chip{font-size:34px;font-weight:800;letter-spacing:-.02em;background:var(--card);border:1px solid rgba(255,255,255,.1);padding:16px 34px;border-radius:22px;animation:pop .25s ease}
.chip.correct{border-color:var(--ok);color:var(--ok)}
.chip.wrong{border-color:var(--bad);animation:shake .4s}
.buckets{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.bucket{border-radius:16px;padding:16px 8px;font-weight:800;font-size:13px;text-align:center;border:2px solid transparent;transition:transform .1s}
.bucket:active{transform:scale(.95)}
.bucket.b-akk{background:var(--akk-soft);color:var(--akk)}
.bucket.b-dat{background:var(--dat-soft);color:var(--dat)}
.bucket.b-wex{background:var(--wex-soft);color:var(--wex)}
.bucket small{display:block;font-weight:600;opacity:.75;margin-top:3px;font-size:11px}

/* feedback */
.feedback{border-radius:var(--radius);padding:16px;margin-top:18px;animation:slideUp .25s ease both}
.feedback.fb-ok{background:var(--nom-soft);border:1px solid rgba(61,220,151,.3)}
.feedback.fb-bad{background:var(--akk-soft);border:1px solid rgba(255,93,115,.3)}
.feedback .fb-title{font-weight:800;font-size:15px;margin-bottom:4px}
.fb-ok .fb-title{color:var(--ok)} .fb-bad .fb-title{color:var(--bad)}
.feedback .fb-why{font-size:14px;color:var(--text);opacity:.92}
.feedback .btn{margin-top:14px;padding:12px}

/* ---------- learn ---------- */
.acc{margin-bottom:12px;border-radius:var(--radius);background:var(--card);border:1px solid rgba(255,255,255,.06);overflow:hidden}
.acc>button{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;font-weight:700;font-size:15px;text-align:left}
.acc>button .chev{color:var(--muted);transition:transform .25s}
.acc.open>button .chev{transform:rotate(90deg)}
.acc .body{display:none;padding:0 18px 18px;font-size:14px;color:var(--text)}
.acc.open .body{display:block;animation:slideUp .25s ease}
.acc .body p{margin-bottom:10px;color:var(--muted)}
.acc .body p b{color:var(--text)}
table.matrix{width:100%;border-collapse:separate;border-spacing:4px;margin:8px 0}
table.matrix th{font-size:11px;color:var(--muted);font-weight:700;padding:4px;text-transform:uppercase;letter-spacing:.05em}
table.matrix td{background:var(--card2);border-radius:10px;padding:9px 4px;text-align:center;font-weight:700;font-size:14px;cursor:default}
table.matrix td.hl-akk{background:var(--akk-soft);color:var(--akk);box-shadow:inset 0 0 0 1px rgba(255,93,115,.4)}
table.matrix td.hl-dat{background:var(--dat-soft);color:var(--dat);box-shadow:inset 0 0 0 1px rgba(77,163,255,.4)}
table.matrix td.hl-nom{background:var(--nom-soft);color:var(--nom)}
table.matrix td.rowlab{background:none;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.anatomy{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.anatomy button{padding:9px 13px;border-radius:12px;font-weight:700;font-size:16px;border:2px solid transparent;background:var(--card2)}
.anatomy button.sel-nom{border-color:var(--nom);color:var(--nom)}
.anatomy button.sel-akk{border-color:var(--akk);color:var(--akk)}
.anatomy button.sel-dat{border-color:var(--dat);color:var(--dat)}
.role-info{border-radius:12px;padding:12px;font-size:13px;background:var(--card2);min-height:58px}
.prep-group{border-radius:14px;padding:12px 14px;margin-bottom:10px}
.prep-group .gt{font-weight:800;font-size:13px;margin-bottom:6px}
.prep-group .preps{display:flex;flex-wrap:wrap;gap:6px}
.prep-group .preps span{background:rgba(0,0,0,.25);border-radius:8px;padding:4px 10px;font-weight:700;font-size:13px}
.pg-akk{background:var(--akk-soft)} .pg-akk .gt{color:var(--akk)}
.pg-dat{background:var(--dat-soft)} .pg-dat .gt{color:var(--dat)}
.pg-wex{background:var(--wex-soft)} .pg-wex .gt{color:var(--wex)}
.vchips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.vchips span{background:var(--dat-soft);color:var(--dat);border-radius:8px;padding:4px 10px;font-weight:700;font-size:13px}
.pairrow{display:flex;gap:8px;margin-bottom:6px;font-size:13px}
.pairrow span{flex:1;border-radius:10px;padding:8px 10px}
.pairrow .pa{background:var(--akk-soft);color:var(--akk);font-weight:700}
.pairrow .pd{background:var(--dat-soft);color:var(--dat);font-weight:700}

/* ---------- summary ---------- */
.sum-hero{text-align:center;padding:30px 0 10px}
.sum-hero .big{font-size:56px}
.sum-hero h1{margin:10px 0 4px}
.sum-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:20px 0}
.sum-stats .st{background:var(--card);border-radius:16px;padding:14px 6px;text-align:center}
.sum-stats .st .v{font-size:22px;font-weight:800}
.sum-stats .st .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}

/* modal */
.modal{position:fixed;inset:0;background:rgba(5,8,14,.75);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;z-index:50;animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}}
.modal .sheet{background:var(--bg2);border-radius:24px 24px 0 0;max-width:600px;width:100%;max-height:86vh;overflow-y:auto;padding:22px;animation:slideUp .3s ease}
.modal .close{position:sticky;top:0;float:right;background:var(--card2);border-radius:99px;width:32px;height:32px;font-weight:800}

/* confetti */
.cf{position:fixed;font-size:22px;z-index:99;pointer-events:none;animation:fall 1.4s ease-in forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(360deg);opacity:.3}}

.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:var(--card2);border:1px solid rgba(255,255,255,.15);padding:10px 20px;border-radius:99px;font-weight:700;font-size:14px;z-index:60;animation:slideUp .3s ease}
@media (max-width:420px){ .qtext{font-size:22px} }

/* ---------- speaking (Sprechen) ---------- */
.speakcard{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--acc-soft),var(--wex-soft));border:1px solid rgba(138,163,255,.25);border-radius:var(--radius);padding:16px 18px;margin-bottom:22px;cursor:pointer;width:100%;text-align:left;transition:transform .1s}
.speakcard:active{transform:scale(.99)}
.speakcard .ic{font-size:26px}
.speakcard .t{font-weight:800;font-size:16px}
.speakcard .s{font-size:13px;color:var(--muted)}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:left;transition:transform .1s,border-color .15s}
.tcard:active{transform:scale(.97)}
.tcard.due{border-color:rgba(232,179,75,.45)}
.tcard .tn{font-weight:700;font-size:14px;margin-bottom:8px;line-height:1.3}
.tcard .bar{height:5px;border-radius:99px;background:var(--card2);overflow:hidden;margin-bottom:6px}
.tcard .bar i{display:block;height:100%;background:var(--nom);border-radius:99px;transition:width .4s}
.tcard .tm{font-size:11px;color:var(--faint);font-weight:600}
.tcard .tm b{color:var(--gold)}
.spk-prompt{font-size:14px;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.spk-en{font-size:23px;font-weight:700;line-height:1.35;letter-spacing:-.02em;margin-bottom:24px}
.spk-de{font-size:25px;font-weight:800;line-height:1.4;letter-spacing:-.02em;color:var(--acc);margin-bottom:6px;animation:slideUp .3s ease}
.spk-de-en{font-size:14px;color:var(--muted);margin-bottom:24px}
.spk-hear{display:inline-flex;align-items:center;gap:8px;background:var(--card2);border-radius:99px;padding:11px 20px;font-weight:700;font-size:15px;margin-bottom:24px}
.spk-hear:active{transform:scale(.96)}
.spk-hint{font-size:13px;color:var(--faint);margin-bottom:24px;text-align:center}
.rate{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.rate button{padding:15px 8px;border-radius:14px;font-weight:800;font-size:15px;transition:transform .1s}
.rate button:active{transform:scale(.95)}
.rate .r-no{background:var(--akk-soft);color:var(--akk)}
.rate .r-ok{background:var(--dat-soft);color:var(--dat)}
.rate .r-got{background:var(--nom-soft);color:var(--nom)}
.rate small{display:block;font-size:10px;font-weight:600;opacity:.7;margin-top:2px}
.vtog{display:flex;gap:8px;margin-bottom:16px}
.vtog button{flex:1;padding:9px;border-radius:11px;font-weight:700;font-size:14px;background:var(--card2);color:var(--muted);border:1px solid transparent}
.vtog button.on{background:var(--acc-soft);color:var(--acc);border-color:rgba(138,163,255,.35)}

/* =====================================================================
   HUB (index.html) — exam dashboard
===================================================================== */
.hub-hero{padding:6px 4px 18px}
.hub-hero h1{font-size:28px;letter-spacing:-.03em;margin-bottom:4px}
.hub-hero .sub{margin-bottom:0}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:20px;display:flex;align-items:center;gap:14px}
.plan .pic{font-size:26px}
.plan>span:not(.pic):not(.go){flex:1;min-width:0}
.plan .pt{display:block;font-weight:700;font-size:15px}
.plan .ps{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.plan .go{margin-left:auto;font-size:20px;color:var(--acc);flex:none}
/* daily checklist */
.todolist{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.todo{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 16px;text-decoration:none;color:inherit;transition:background .15s,transform .1s}
.todo:active{transform:scale(.985)}
.todo:hover{background:var(--card2)}
.todo .tk{width:24px;height:24px;border-radius:99px;border:2px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--ok)}
.todo.done .tk{border-color:var(--ok);background:rgba(95,212,154,.14)}
.todo .tic{font-size:20px;flex:none}
.todo .ttx{flex:1;min-width:0}
.todo .tt{display:block;font-weight:700;font-size:15px}
.todo.done .tt{color:var(--muted);text-decoration:line-through}
.todo .ts{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.todo .tgo{margin-left:auto;color:var(--acc);font-size:18px;flex:none}
.done-banner{border-color:rgba(95,212,154,.4);color:var(--ok);font-weight:700;font-size:14px}
.modgrid{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.modcard{display:flex;align-items:center;gap:15px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 17px;text-align:left;transition:background .15s,transform .1s,border-color .15s}
.modcard:active{transform:scale(.985)}
.modcard:hover{background:var(--card2)}
.modcard .mi{width:44px;height:44px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center;font-size:22px}
.modcard .mt{display:block;font-weight:800;font-size:16px;letter-spacing:-.01em}
.modcard .ms{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.4}
.modcard .mr{margin-left:auto;flex:none;text-align:right}
.modcard .mr .pct{display:block;font-weight:800;font-size:15px}
.modcard .mr .lab{display:block;font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.modcard .mbar{height:5px;border-radius:99px;background:var(--card2);overflow:hidden;margin-top:8px;width:100%}
.modcard .mbar i{display:block;height:100%;border-radius:99px;transition:width .4s}
.mi-lesen{background:var(--akk-soft);color:var(--akk)} .bar-lesen{background:var(--akk)}
.mi-hoeren{background:var(--dat-soft);color:var(--dat)} .bar-hoeren{background:var(--dat)}
.mi-schreiben{background:var(--wex-soft);color:var(--wex)} .bar-schreiben{background:var(--wex)}
.mi-sprechen{background:var(--nom-soft);color:var(--nom)} .bar-sprechen{background:var(--nom)}
.mi-grammatik{background:rgba(232,179,75,.14);color:var(--gold)} .bar-grammatik{background:var(--gold)}
.mi-redemittel{background:var(--acc-soft);color:var(--acc)} .bar-redemittel{background:var(--acc)}
.modwrap{text-decoration:none;color:inherit;display:block}
.scorebadge{font-size:11px;font-weight:800;padding:3px 9px;border-radius:99px;letter-spacing:.04em}
.sb-pass{background:var(--nom-soft);color:var(--nom)} .sb-fail{background:var(--akk-soft);color:var(--akk)}

/* =====================================================================
   TEIL picker (shared by lesen / hoeren / schreiben)
===================================================================== */
.teil-list{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.teil{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-align:left;transition:background .15s,transform .1s}
.teil:active{transform:scale(.985)} .teil:hover{background:var(--card2)}
.teil .tnum{width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;background:var(--card2);color:var(--muted)}
.teil.done .tnum{background:var(--nom-soft);color:var(--nom)}
.teil .tt{display:block;font-weight:700;font-size:15px}
.teil .td{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.teil .tg{margin-left:auto;flex:none;font-size:12px;font-weight:700;color:var(--faint)}
.teil.done .tg{color:var(--nom)}

/* =====================================================================
   LESEN — reading passages
===================================================================== */
.passage{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:18px;font-size:15px;line-height:1.65}
.passage h3{font-size:16px;margin-bottom:8px;color:var(--text)}
.passage .src{font-size:12px;color:var(--faint);margin-bottom:10px;text-transform:uppercase;letter-spacing:.04em}
.passage p{margin-bottom:10px;color:var(--text);opacity:.92}
.adlist{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.ad{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.5}
.ad .al{font-weight:800;color:var(--gold);margin-right:6px}
.qitem{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.qitem .qn{font-size:14.5px;font-weight:600;margin-bottom:12px;line-height:1.5}
.qitem .qn .qix{color:var(--acc);font-weight:800;margin-right:7px}
.rfrow{display:flex;gap:8px}
.choicebtn{flex:1;background:var(--card2);border:2px solid transparent;border-radius:12px;padding:11px;font-weight:700;font-size:14px;text-align:center;transition:border-color .15s,background .15s;color:var(--text)}
.choicebtn:not(:disabled):hover{border-color:rgba(255,255,255,.22)}
.choicebtn.sel{border-color:var(--acc)}
.choicebtn.correct{border-color:var(--ok);background:var(--nom-soft);color:var(--ok)}
.choicebtn.wrong{border-color:var(--bad);background:var(--akk-soft);color:var(--bad)}
.choicebtn.reveal{border-color:var(--ok)}
.choicecol{display:flex;flex-direction:column;gap:8px}
.choicecol .choicebtn{text-align:left;display:flex;gap:10px;align-items:flex-start}
.choicecol .choicebtn .ck{font-size:11px;font-weight:800;color:var(--muted);background:var(--bg2);border-radius:6px;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.matchsel{background:var(--card2);border:2px solid transparent;border-radius:10px;padding:8px 12px;font-weight:800;font-size:15px;color:var(--gold);min-width:54px;outline:none}
.expl{font-size:13px;color:var(--muted);margin-top:10px;padding:10px 12px;background:var(--bg2);border-radius:10px;border-left:3px solid var(--acc);display:none}
.expl.show{display:block}
.expl b{color:var(--text)}

/* =====================================================================
   HÖREN — listening player
===================================================================== */
.player{background:linear-gradient(135deg,var(--dat-soft),var(--card));border:1px solid rgba(106,171,247,.25);border-radius:var(--radius);padding:20px;margin-bottom:18px;text-align:center}
.player .pbtn{width:64px;height:64px;border-radius:50%;background:var(--dat);color:#fff;font-size:26px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;transition:transform .1s}
.player .pbtn:active{transform:scale(.92)}
.player .pmeta{font-size:13px;color:var(--muted);font-weight:600}
.player .plays{font-size:12px;color:var(--faint);margin-top:4px}
.transcript{font-size:14px;line-height:1.6;color:var(--text);opacity:.92;margin-top:14px;padding:14px;background:var(--bg2);border-radius:12px;display:none}
.transcript.show{display:block}
.transcript .sp{font-weight:700;color:var(--dat)}

/* =====================================================================
   SCHREIBEN — writing tasks
===================================================================== */
.taskbox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:16px}
.taskbox .tlabel{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.taskbox .tprompt{font-size:15px;line-height:1.6;margin-bottom:12px}
.taskbox ul.points{list-style:none;display:flex;flex-direction:column;gap:8px}
.taskbox ul.points li{background:var(--bg2);border-radius:10px;padding:10px 12px;font-size:14px;display:flex;gap:9px;align-items:flex-start}
.taskbox ul.points li::before{content:"▸";color:var(--acc);font-weight:800;flex:none}
.wmeta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);margin-bottom:6px}
.wmeta .wc b{color:var(--text)} .wmeta .wc.ok b{color:var(--ok)}
textarea.draft{width:100%;min-height:200px;background:var(--card);border:2px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 16px;font-size:16px;line-height:1.6;color:var(--text);font-family:inherit;outline:none;resize:vertical}
textarea.draft:focus{border-color:var(--wex)}
.bausteine{margin-bottom:16px}
.bgroup{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:8px}
.bgroup .bgt{font-weight:800;font-size:13px;color:var(--wex);margin-bottom:7px}
.bgroup .bphrase{display:inline-block;background:var(--bg2);border-radius:8px;padding:5px 11px;margin:0 5px 6px 0;font-size:13.5px;cursor:pointer;transition:background .12s}
.bgroup .bphrase:hover{background:var(--card2)}
.modelbox{background:var(--nom-soft);border:1px solid rgba(95,212,154,.3);border-radius:var(--radius);padding:18px;margin-top:8px;font-size:15px;line-height:1.65;display:none}
.modelbox.show{display:block}
.modelbox h4{color:var(--ok);font-size:14px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em}
.checklist{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.checkitem{display:flex;gap:10px;align-items:flex-start;font-size:14px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.checkitem input{margin-top:3px;accent-color:var(--nom)}

/* =====================================================================
   SPRECHEN — topic reading view (full text of a topic at once)
===================================================================== */
.slist{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.srow{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 15px;transition:border-color .15s,background .15s}
.srow.playing{border-color:var(--nom);background:var(--nom-soft)}
.srow .sx{flex:none;width:30px;height:30px;border-radius:50%;background:var(--card2);color:var(--nom);display:flex;align-items:center;justify-content:center;font-size:15px;border:none;transition:transform .1s}
.srow .sx:active{transform:scale(.9)}
.srow .sde{font-weight:700;font-size:17px;line-height:1.4;letter-spacing:-.01em}
.srow .sen{font-size:13.5px;color:var(--muted);margin-top:3px}
.srow .sdot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:8px}
.srow .sdot.learned{background:var(--nom)}
.srow .sdot.due{background:var(--gold)}
.srow .sdot.new{background:rgba(255,255,255,.15)}