/* EnglishUp – Mobile first, Light & Dark */
:root{
  --bg:#f5f3ee;--card:#fff;--ink:#17212b;--muted:#667085;--line:#e4e0d6;--soft:#eeeae0;
  --pri:#0b7a75;--pri-ink:#fff;--pri-soft:#d9f0ed;--tech:#3f51c7;--tech-soft:#e3e7fb;
  --amber:#e8930c;--amber-soft:#fdf0d5;--ok:#15803d;--ok-soft:#dcf5e4;--bad:#c2372d;--bad-soft:#fde4e1;
  --c0:#0b7a75;--c1:#e8930c;--c2:#3f51c7;--c3:#d6486b;
  --r:18px;--shadow:0 1px 2px rgba(23,33,43,.05),0 8px 24px rgba(23,33,43,.06);
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
}
[data-theme=dark]{
  --bg:#10161d;--card:#1a232d;--ink:#e9eef3;--muted:#93a1b0;--line:#2a3541;--soft:#222d38;
  --pri:#35c9bd;--pri-ink:#06211f;--pri-soft:#133a38;--tech:#8e9bf5;--tech-soft:#252c57;
  --amber:#f5b445;--amber-soft:#3b2e12;--ok:#4ade80;--ok-soft:#143524;--bad:#f87171;--bad-soft:#3d1b1a;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);overscroll-behavior-y:none;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0;touch-action:manipulation}
h1,h2,h3,p{margin:0}
h1{font-size:1.6rem;line-height:1.15;letter-spacing:-.02em;font-weight:800}
h2{font-size:1.25rem;line-height:1.25;letter-spacing:-.01em;font-weight:750}
.ic{width:22px;height:22px;flex:none}
#app{max-width:560px;margin:0 auto;min-height:100dvh;padding:calc(var(--safe-t) + 14px) 16px calc(var(--safe-b) + 92px);opacity:0;transition:opacity .25s}
body.ready #app{opacity:1}
#view>*+*{margin-top:14px}
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:6px 2px 4px}
.hello,.lbl,.kicker{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kicker{color:var(--pri);margin-bottom:8px}
.pill{background:var(--amber-soft);color:var(--amber);font-weight:800;padding:8px 14px;border-radius:99px;white-space:nowrap}
.muted{color:var(--muted);font-size:.9rem}.center{text-align:center}.grow{flex:1;min-width:0}
.card{background:var(--card);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.card>*+*{margin-top:10px}
.card.flat{box-shadow:none;border:1px solid var(--line);background:transparent}
.card.accent{background:var(--amber-soft)}
.card.next{border-left:6px solid var(--pri)}.card.next.tech{border-left-color:var(--tech)}
.hero{display:flex;align-items:center;gap:18px}.hero.slim{justify-content:space-between}
.hero .big,.de.big{font-size:1.3rem;font-weight:800;letter-spacing:-.01em}
.herotxt>*+*{margin-top:2px}
.ring{--p:0;width:92px;height:92px;border-radius:50%;flex:none;display:grid;place-content:center;text-align:center;background:radial-gradient(closest-side,var(--card) 78%,transparent 80%),conic-gradient(var(--pri) calc(var(--p)*1%),var(--soft) 0)}
.ring b{font-size:1.5rem;line-height:1;font-weight:800}.ring small{color:var(--muted);font-size:.7rem}
.row{display:flex;gap:10px}.row>*{flex:1}
.btn{min-height:48px;padding:0 18px;border-radius:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .08s,opacity .15s}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--pri);color:var(--pri-ink);box-shadow:0 3px 0 rgba(0,0,0,.18)}
.btn.ghost{background:var(--soft);color:var(--ink)}
.btn.big{width:100%;min-height:54px;font-size:1.05rem}.btn.sm{min-height:38px;padding:0 14px;font-size:.9rem}
.btn:disabled{opacity:.4;box-shadow:none}
.btn.big+.btn.big{margin-top:10px}
.lnk{color:var(--pri);font-weight:650;text-decoration:underline;text-underline-offset:3px;padding:8px 0;min-height:36px}
.lnk.inline{padding:0;min-height:0}.lnk.danger{color:var(--bad);display:block;margin-top:14px}
.iconbtn{width:44px;height:44px;border-radius:50%;display:grid;place-content:center;color:var(--muted)}
.iconbtn.solid{background:var(--pri);color:var(--pri-ink)}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qbtn{background:var(--card);border-radius:16px;padding:14px 8px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:4px;min-height:84px}
.qbtn b{font-size:1.4rem;font-weight:800;color:var(--pri);display:grid;place-content:center;height:30px}
.qbtn span{font-size:.76rem;color:var(--muted);font-weight:600;text-align:center;line-height:1.2}
.sech{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:750;margin:22px 4px 10px!important}
.lgroup{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.lrow,.wrow{width:100%;display:flex;align-items:center;gap:14px;padding:14px 14px;text-align:left;min-height:68px}
.lrow+.lrow,.wrow+.wrow{border-top:1px solid var(--line)}
.lrow:active,.wrow:active{background:var(--soft)}
.num{width:40px;height:40px;border-radius:12px;display:grid;place-content:center;font-weight:800;flex:none;background:var(--pri-soft);color:var(--pri)}
.num.tech{background:var(--tech-soft);color:var(--tech)}
.lrow.done .num{background:var(--ok-soft);color:var(--ok)}
.ltxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ltxt b{font-weight:700;line-height:1.25}.ltxt small{color:var(--muted);font-size:.86rem;line-height:1.3}
.lmeta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.chev{color:var(--line);width:18px;height:18px}
.chip{font-size:.72rem;font-weight:750;padding:3px 9px;border-radius:99px;background:var(--soft);color:var(--muted);white-space:nowrap}
.chip.lv{background:var(--pri-soft);color:var(--pri)}.chip.rec{background:var(--amber-soft);color:var(--amber)}.chip.ok{background:var(--ok-soft);color:var(--ok)}.chip.warn{background:var(--bad-soft);color:var(--bad)}
.chipbtn{min-height:38px;padding:0 14px;border-radius:99px;background:var(--soft);font-weight:650;font-size:.88rem;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.chipbtn.on{background:var(--pri);color:var(--pri-ink)}.chipbtn .ic{width:16px;height:16px}
.filters{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none;margin-right:-16px;padding-right:16px}.filters::-webkit-scrollbar{display:none}
.dot{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none}.dot.lernen{background:var(--amber)}.dot.sicher{background:var(--ok)}.dot.neu{background:var(--tech)}
.empty,.note{color:var(--muted);font-size:.86rem;line-height:1.45}.empty{text-align:center;padding:26px 10px}
.note{margin-top:12px}.note.live{color:var(--pri);font-weight:700}
.tip{background:var(--amber-soft);border-radius:12px;padding:12px 14px;font-size:.93rem}
.inp{width:100%;min-height:52px;border-radius:14px;border:2px solid var(--line);background:var(--card);padding:12px 14px;font-size:1.05rem;outline:none;resize:none;-webkit-appearance:none;appearance:none}
.inp:focus{border-color:var(--pri)}.inp:disabled{opacity:.75}
.fld{display:block}.fld+.fld{margin-top:16px}.fld>span{display:block;font-size:.86rem;font-weight:650;color:var(--muted);margin-bottom:6px}
.seg{display:flex;background:var(--soft);border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;min-height:40px;border-radius:9px;font-weight:650;font-size:.86rem;color:var(--muted);padding:0 6px}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
input[type=range]{width:100%;accent-color:var(--pri);height:36px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:10px}
.tile{background:var(--card);border-radius:16px;padding:14px 8px;text-align:center;box-shadow:var(--shadow)}
.tile b{display:block;font-size:1.25rem;font-weight:800}.tile span{font-size:.74rem;color:var(--muted);font-weight:600}
.lvrow{display:flex;gap:16px;align-items:center}
.lvbadge,.lvbig{background:var(--pri);color:var(--pri-ink);font-weight:850;border-radius:18px;display:grid;place-content:center}
.lvbadge{width:68px;height:68px;font-size:1.4rem;flex:none}
.lvbig{width:120px;height:120px;font-size:2.6rem;margin:18px auto;border-radius:32px;animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
.bar{height:10px;border-radius:99px;background:var(--soft);overflow:hidden;margin:6px 0}.bar i{display:block;height:100%;background:var(--pri);border-radius:99px;transition:width .5s}.bar.warn i{background:var(--amber)}
.chart{display:flex;align-items:flex-end;gap:8px;height:140px}
.cbar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.cbar i{width:100%;min-height:4px;background:var(--pri-soft);border-radius:8px 8px 4px 4px}.cbar.hit i{background:var(--pri)}
.cbar span{font-size:.7rem;font-weight:700;color:var(--muted);min-height:1em}.cbar small{font-size:.72rem;color:var(--muted)}
.weak{display:flex;align-items:center;gap:12px}.weak+.weak{margin-top:14px}
details{margin-top:14px}summary{color:var(--pri);font-weight:650;min-height:36px;display:flex;align-items:center}
.trow{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid var(--line);font-size:.92rem}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.badge{background:var(--card);border-radius:16px;padding:12px 6px;text-align:center;opacity:.38;filter:grayscale(1);display:flex;flex-direction:column;gap:2px;align-items:center}
.badge.on{opacity:1;filter:none;box-shadow:var(--shadow)}
.badge span{font-size:1.7rem;line-height:1.2}.badge b{font-size:.8rem}.badge small{font-size:.66rem;color:var(--muted);line-height:1.2}
.plain{margin:0;padding-left:18px;font-size:.9rem;color:var(--muted)}.plain li+li{margin-top:6px}
.hint{display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:.9rem}

#nav{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;justify-content:center;background:color-mix(in srgb,var(--card) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px max(8px,env(safe-area-inset-left)) calc(var(--safe-b) + 6px)}
#nav button{flex:1;max-width:112px;min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:.68rem;font-weight:650;border-radius:12px}
#nav button.on{color:var(--pri)}#nav button.on .ic{stroke-width:2.6}
body.insession #nav{display:none}

#overlay{position:fixed;inset:0;z-index:20;background:var(--bg);display:none}#overlay.on{display:block}
.sess{max-width:560px;margin:0 auto;height:100%;display:flex;flex-direction:column;position:relative}
.sbar{display:flex;align-items:center;gap:10px;padding:calc(var(--safe-t) + 8px) 12px 8px}
.prog{flex:1;height:12px;border-radius:99px;background:var(--soft);overflow:hidden}.prog i{display:block;height:100%;background:var(--pri);border-radius:99px;transition:width .35s}
.sxp{font-weight:800;color:var(--amber);font-size:.9rem;min-width:52px;text-align:right}
.sbody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 18px 24px}
.sbody>*+*{margin-top:14px}
.sfoot{padding:12px 18px calc(var(--safe-b) + 14px);border-top:1px solid var(--line);background:var(--bg)}
.sfoot:empty{display:none}
.sfoot.good{background:var(--ok-soft);border-color:transparent}.sfoot.bad{background:var(--bad-soft);border-color:transparent}
.sfoot.good .fbt{color:var(--ok)}.sfoot.bad .fbt{color:var(--bad)}
.sfoot.good .btn.primary{background:var(--ok);color:#fff}.sfoot.bad .btn.primary{background:var(--bad);color:#fff}
[data-theme=dark] .sfoot.good .btn.primary,[data-theme=dark] .sfoot.bad .btn.primary{color:#10161d}
.fb{margin-bottom:12px;animation:rise .22s ease-out}.fb>*+*{margin-top:6px}.fbt{font-size:1.1rem;display:block}
.sol{font-weight:650}.sol .lbl{margin-right:4px}.why{font-size:.92rem;color:var(--ink);opacity:.85}
.selfq{font-weight:700;margin-bottom:10px;text-align:center}
.ltitle{font-size:1.75rem}.lsub{color:var(--muted);font-size:1.05rem;margin-top:4px!important}
.prose{font-size:1rem;line-height:1.55}.prose>*+*{margin-top:12px}.prose ul{margin:0;padding-left:20px}.prose li+li{margin-top:8px}
.prose i{color:var(--pri);font-style:normal;font-weight:600}.prose s{color:var(--bad);opacity:.8}
.q{font-size:1.3rem;line-height:1.35}.q.de{font-weight:700}
.blank{display:inline-block;width:64px;border-bottom:3px solid var(--pri);margin:0 4px;transform:translateY(2px)}
.hint{color:var(--muted)}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{width:100%;min-height:56px;text-align:left;padding:14px 16px;border-radius:16px;border:2px solid var(--line);background:var(--card);font-weight:600;line-height:1.3;transition:border-color .12s,background .12s}
.opt.sel{border-color:var(--pri);background:var(--pri-soft)}.opt.good{border-color:var(--ok);background:var(--ok-soft)}.opt.bad{border-color:var(--bad);background:var(--bad-soft);animation:shake .3s}
.opt.dunno{border-style:dashed;color:var(--muted);font-weight:500;background:transparent}
.toks,.bank,.line{display:flex;flex-wrap:wrap;gap:8px}
.tok,.wchip{min-height:46px;padding:8px 14px;border-radius:12px;border:2px solid var(--line);background:var(--card);font-weight:650;font-size:1.05rem}
.tok.sel{border-color:var(--pri);background:var(--pri-soft)}.tok.good{border-color:var(--ok);background:var(--ok-soft)}.tok.bad{border-color:var(--bad);background:var(--bad-soft)}
.line{min-height:64px;padding:8px;border-bottom:2px solid var(--line);align-items:center}.ph{color:var(--muted);font-size:.92rem}
.wchip.used{opacity:.25}
.match{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mcol{display:flex;flex-direction:column;gap:10px}
.mbtn{min-height:64px;padding:10px;border-radius:14px;border:2px solid var(--line);background:var(--card);font-weight:650;font-size:.92rem;line-height:1.25}
.mbtn.sel{border-color:var(--pri);background:var(--pri-soft)}.mbtn.good{border-color:transparent;background:var(--ok-soft);color:var(--ok);opacity:.7}.mbtn.bad{border-color:var(--bad);background:var(--bad-soft);animation:shake .3s}
.audio{display:flex;align-items:center;gap:16px}.audio .col{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.play{width:84px;height:84px;border-radius:26px;background:var(--pri);color:var(--pri-ink);display:grid;place-content:center;box-shadow:0 4px 0 rgba(0,0,0,.18);flex:none}
.play .ic{width:38px;height:38px}.play:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.saybtn{width:40px;height:40px;border-radius:50%;background:var(--pri-soft);color:var(--pri);display:inline-grid;place-content:center;vertical-align:middle;flex:none}
.saybtn.sm{width:32px;height:32px}.saybtn.sm .ic{width:17px;height:17px}.saybtn.ghost{background:transparent;color:var(--muted)}
.vlist{display:flex;flex-direction:column;gap:10px}
.vcard{background:var(--card);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow)}
.vrow{display:flex;justify-content:space-between;align-items:center;gap:10px}.vrow b{font-size:1.08rem}
.de{color:var(--muted)}.exs{font-size:.93rem;margin-top:6px;font-style:italic}
.model{font-size:1rem;line-height:1.5;margin-top:4px!important}.reading{font-size:1rem;line-height:1.6}
.kw{list-style:none;margin:6px 0 12px;padding:0;font-size:.92rem}.kw li{padding:3px 0}.kw .hit{color:var(--ok);font-weight:650}.kw .miss{color:var(--muted)}
.setting{background:var(--soft);padding:12px 14px;border-radius:14px;font-size:.95rem}
.chat{display:flex;flex-direction:column;gap:10px}
.bub{max-width:88%;padding:12px 14px;border-radius:18px;line-height:1.4;display:flex;gap:6px;align-items:flex-start;animation:rise .25s ease-out}
.bub.a{background:var(--card);box-shadow:var(--shadow);border-bottom-left-radius:6px;align-self:flex-start}
.bub.u{background:var(--pri);color:var(--pri-ink);border-bottom-right-radius:6px;align-self:flex-end}.bub.u .saybtn{color:var(--pri-ink);opacity:.8}
#choices{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.dfb{background:var(--bad-soft);color:var(--bad);padding:12px 14px;border-radius:14px;font-size:.93rem;font-weight:600}
.flash{background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:34px 20px;text-align:center;min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.flash h2{font-size:1.6rem}.flash .de{font-size:1.2rem;color:var(--ink);font-weight:650}
.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.grades .btn{padding:0 4px;font-size:.88rem}
.g0{background:var(--bad-soft);color:var(--bad)}.g1{background:var(--amber-soft);color:var(--amber)}.g2{background:var(--ok-soft);color:var(--ok)}.g3{background:var(--tech-soft);color:var(--tech)}
.result .sbody{padding-top:calc(var(--safe-t) + 34px)}
.burst{width:92px;height:92px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-content:center;margin:0 auto 10px;animation:pop .5s cubic-bezier(.2,1.6,.4,1)}.burst .ic{width:48px;height:48px;stroke-width:3}
.xpbig{text-align:center;font-size:1.7rem;font-weight:850;color:var(--amber)}.xpbig small{font-size:.8rem;color:var(--muted);font-weight:600}
.goalhit{text-align:center;font-weight:750;background:var(--amber-soft);border-color:transparent}
.wrongs{display:flex;flex-direction:column;gap:10px}.wq{color:var(--muted);font-size:.92rem}
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.confetti i{position:absolute;top:-16px;width:9px;height:15px;border-radius:2px;animation:fall 1.7s ease-in forwards}

#modal{position:fixed;inset:0;z-index:30;display:none}#modal.on{display:block}
.backdrop{position:absolute;inset:0;background:rgba(10,15,20,.5);animation:fade .2s}
.sheet{position:absolute;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;background:var(--card);border-radius:24px 24px 0 0;padding:10px 20px calc(var(--safe-b) + 22px);max-height:88dvh;overflow-y:auto;animation:up .25s cubic-bezier(.2,.9,.3,1)}
.sheet>*+*{margin-top:12px}.grab{width:40px;height:5px;border-radius:9px;background:var(--line);margin:0 auto 8px}
.askmsg{font-size:1.05rem;font-weight:600;padding:8px 0}
#toast{position:fixed;left:50%;bottom:calc(var(--safe-b) + 104px);transform:translate(-50%,20px);z-index:40;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:14px;font-size:.92rem;font-weight:600;max-width:min(92vw,480px);text-align:center;opacity:0;pointer-events:none;transition:.25s}
#toast.on{opacity:1;transform:translate(-50%,0)}
body.insession #toast{bottom:calc(var(--safe-b) + 150px)}
:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes rise{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.2}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (min-width:600px){#nav{border-radius:20px 20px 0 0;max-width:560px;margin:0 auto}}