/* Erwachsen werden – Mias Lernstudio · app styles (tokens from shared/tokens.css) */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(../assets/fonts/Fredoka-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(../assets/fonts/Fredoka-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito';font-style:italic;font-weight:400 900;font-display:swap;src:url(../assets/fonts/Nunito-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:italic;font-weight:400 900;font-display:swap;src:url(../assets/fonts/Nunito-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;src:url(../assets/fonts/Nunito-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;src:url(../assets/fonts/Nunito-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#2B2A4C; --ink-soft:#5B5A7A; --ink-faint:#9897B3; --paper:#FFFBF5; --white:#FFFFFF; --line:#E9E3F5;
  --sun:#FFC53D; --sun-deep:#E59A00; --sun-soft:#FFF3CF;
  --mint:#2FBF9B; --mint-deep:#178F72; --mint-soft:#DDF7EE;
  --sky:#4DA8FF; --sky-deep:#2F7DE1; --sky-soft:#E0F0FF;
  --lilac:#9B7BFF; --lilac-deep:#6F4FE0; --lilac-soft:#ECE6FF;
  --coral:#FF6B6B; --coral-deep:#D9485F; --coral-soft:#FFE3E0;
  --hu:#D9485F; --en:#2F7DE1;
  --der:#2F7DE1; --die:#E5484D; --das:#1E9E6A;
  --font-display:'Fredoka','Nunito',system-ui,sans-serif;
  --font-text:'Nunito',system-ui,sans-serif;
  --r-s:10px; --r-m:18px; --r-l:28px;
  --shadow:0 6px 0 rgba(43,42,76,.08), 0 14px 30px rgba(43,42,76,.10);
  /* app-only derived values */
  --brand:#7C5CF0; /* logo/app-icon purple from shared/svg/logo.svg */
  --shadow-s:0 3px 0 rgba(43,42,76,.07), 0 8px 18px rgba(43,42,76,.07);
  --lip:0 4px 0;
  --top-h:60px; --tab-h:64px;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --c:var(--lilac); --c-deep:var(--lilac-deep); --c-soft:var(--lilac-soft);
  --ease:cubic-bezier(.2,.8,.2,1);
}
.c-lilac{--c:var(--lilac);--c-deep:var(--lilac-deep);--c-soft:var(--lilac-soft)}
.c-mint{--c:var(--mint);--c-deep:var(--mint-deep);--c-soft:var(--mint-soft)}
.c-sun{--c:var(--sun);--c-deep:var(--sun-deep);--c-soft:var(--sun-soft)}
.c-sky{--c:var(--sky);--c-deep:var(--sky-deep);--c-soft:var(--sky-soft)}
.c-coral{--c:var(--coral);--c-deep:var(--coral-deep);--c-soft:var(--coral-soft)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:500 17px/1.5 var(--font-text);-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.12;letter-spacing:-.012em;margin:0;text-wrap:balance}
h1{font-size:clamp(1.9rem,1.2rem + 3vw,3rem)}
h2{font-size:clamp(1.35rem,1.1rem + 1.2vw,1.8rem)}
h3{font-size:1.18rem}
p{margin:0}
a{color:var(--lilac-deep);text-underline-offset:3px}
img,svg{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0;touch-action:manipulation}
ul,ol{margin:0;padding:0;list-style:none}
:focus{outline:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;z-index:100;text-decoration:none}
.skip:focus{top:calc(8px + var(--sat))}
[hidden]{display:none!important}

/* ── language system ─────────────────────────────── */
.l-hu,.l-en{display:none}
.l-de{display:block}
.hu-on .l-hu,.en-on .l-en{display:block}
.l-hu{color:var(--hu);font-size:.9em;font-weight:600;margin-top:.12em}
.l-en{color:var(--en);font-size:.8em;font-weight:600;margin-top:.1em;opacity:.95}
.tri.tag .l-hu::before,.tri.tag .l-en::before{display:inline-block;font:700 .62rem/1 var(--font-text);letter-spacing:.06em;padding:.22em .45em .2em;border-radius:6px;margin-right:.5em;vertical-align:.14em;color:#fff}
.tri.tag .l-hu::before{content:'HU';background:var(--hu)}
.tri.tag .l-en::before{content:'EN';background:var(--en)}
.tri.inline .l-de,.hu-on .tri.inline .l-hu,.en-on .tri.inline .l-en{display:inline}
.tri.inline .l-hu::before,.tri.inline .l-en::before{content:' · ';color:var(--ink-faint)}
.tri.mini .l-hu,.tri.mini .l-en{font-size:.74em;margin-top:0;line-height:1.2}
h1 .l-hu,h2 .l-hu,h3 .l-hu,h1 .l-en,h2 .l-en,h3 .l-en{font-family:var(--font-text);letter-spacing:0;line-height:1.3}
h1 .l-hu{font-size:.44em;font-weight:700;margin-top:.35em} h1 .l-en{font-size:.36em;font-weight:700}
h2 .l-hu{font-size:.6em;font-weight:700;margin-top:.25em} h2 .l-en{font-size:.52em;font-weight:700}
h3 .l-hu{font-size:.76em;font-weight:700} h3 .l-en{font-size:.68em;font-weight:700}

/* ── shell ───────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;height:calc(var(--top-h) + var(--sat));padding:var(--sat) calc(14px + var(--sar)) 0 calc(14px + var(--sal));background:rgba(255,251,245,.9);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-height:44px;margin-right:auto}
.brand img{width:40px;height:40px}
.brand b{font:600 1.12rem/1 var(--font-display);letter-spacing:-.01em;display:block;white-space:nowrap}
@media (max-width:519px){.brand small{display:none!important}.brand b{font-size:1.02rem}}
.brand small{display:block;white-space:nowrap;font:700 .7rem/1.2 var(--font-text);color:var(--ink-soft);margin-top:3px}
.topnav{display:none;gap:4px;margin-right:12px}
.topnav a{display:flex;align-items:center;gap:8px;padding:7px 14px;min-height:44px;white-space:nowrap;border-radius:14px;text-decoration:none;color:var(--ink-soft);font:600 .98rem/1 var(--font-display)}
.topnav a svg{width:20px;height:20px}
.topnav a:hover{background:var(--lilac-soft);color:var(--ink)}
.topnav a[aria-current=page]{background:var(--ink);color:#fff}
.topnav a .l-hu,.topnav a .l-en{font:700 .68rem/1.1 var(--font-text);margin-top:2px}
.topnav a[aria-current=page] .l-hu,.topnav a[aria-current=page] .l-en{color:#fff;opacity:.8}
.langs{display:flex;gap:8px}
.sw{display:flex;align-items:center;gap:8px;height:44px;padding:0 10px 0 12px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 2px var(--line);font:700 .82rem/1 var(--font-text);color:var(--ink-soft);transition:background .2s,color .2s,box-shadow .2s}
.sw .sw-l{display:none}
.sw i{position:relative;width:34px;height:20px;border-radius:999px;background:var(--line);transition:background .2s}
.sw i::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(43,42,76,.3);transition:transform .25s var(--ease)}
.sw[aria-checked=true]{color:var(--ink)}
.sw[aria-checked=true] i::after{transform:translateX(14px)}
.sw.hu[aria-checked=true]{background:var(--coral-soft);box-shadow:inset 0 0 0 2px transparent}.sw.hu[aria-checked=true] i{background:var(--hu)}
.sw.en[aria-checked=true]{background:var(--sky-soft);box-shadow:inset 0 0 0 2px transparent}.sw.en[aria-checked=true] i{background:var(--en)}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);height:calc(var(--tab-h) + var(--sab));padding:0 var(--sar) var(--sab) var(--sal);background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--ink-faint);font:700 .68rem/1 var(--font-text);position:relative}
.tabbar a svg{width:26px;height:26px;transition:transform .25s var(--ease)}
.tabbar a[aria-current=page]{color:var(--ink)}
.tabbar a[aria-current=page] svg{transform:translateY(-2px) scale(1.08)}
.tabbar a[aria-current=page]::before{content:'';position:absolute;top:6px;width:46px;height:34px;border-radius:14px;background:var(--lilac-soft);z-index:-1}
.tabbar a .l-hu,.tabbar a .l-en{font-size:.92em;margin:1px 0 0}
body.in-session .tabbar,body.in-session .topbar{display:none}

#view{display:block;padding:18px calc(16px + var(--sar)) calc(var(--tab-h) + var(--sab) + 32px) calc(16px + var(--sal));max-width:1120px;margin:0 auto;min-height:60vh}
body.in-session #view{padding:0;max-width:none}
.view-enter{animation:viewIn .35s var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.boot{display:grid;place-items:center;gap:12px;padding:20vh 0;color:var(--ink-soft);font-family:var(--font-display)}
.boot img{border-radius:22px;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}

/* ── primitives ──────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;border-radius:18px;background:var(--lilac-deep);color:#fff;font:600 1.08rem/1.15 var(--font-display);letter-spacing:.005em;text-decoration:none;text-align:center;box-shadow:var(--lip) #4E33B8;transition:transform .08s,box-shadow .08s,filter .15s;position:relative}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #4E33B8}
.btn .l-hu,.btn .l-en{color:inherit;opacity:.82;font:700 .72em/1.15 var(--font-text);margin-top:2px}
.btn.mint{background:var(--mint-deep);box-shadow:var(--lip) #0F6B55}.btn.mint:active{box-shadow:0 1px 0 #0F6B55}
.btn.ink{background:var(--ink);box-shadow:var(--lip) #15142B}.btn.ink:active{box-shadow:0 1px 0 #15142B}
.btn.soft{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 2px var(--line),var(--lip) var(--line)}.btn.soft:active{box-shadow:inset 0 0 0 2px var(--line),0 1px 0 var(--line)}
.btn.chap{background:var(--c-deep);box-shadow:var(--lip) rgba(43,42,76,.35)}.c-sun .btn.chap{color:var(--ink);background:var(--sun)}
.btn.small{min-height:44px;padding:8px 16px;font-size:.95rem;border-radius:14px}
.btn.wide{width:100%}
.btn[disabled]{background:var(--line);color:var(--ink-faint);box-shadow:var(--lip) #D9D2EA;cursor:default;filter:none}
.btn svg{width:22px;height:22px;flex:none}
.iconbtn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;color:var(--ink-soft);transition:background .15s,transform .1s;flex:none}
.iconbtn:hover{background:var(--lilac-soft);color:var(--ink)}
.iconbtn:active{transform:scale(.92)}
.iconbtn svg{width:24px;height:24px}
.card{background:var(--white);border-radius:var(--r-l);box-shadow:var(--shadow);position:relative}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 11px;border-radius:999px;background:var(--c-soft);color:var(--ink);font:700 .76rem/1.1 var(--font-text);white-space:nowrap}
.chip.lz{background:var(--white);box-shadow:inset 0 0 0 1.5px rgba(43,42,76,.14)}
.chip.zusatz{background:var(--ink);color:#fff}
.chip.zusatz .l-hu,.chip.zusatz .l-en{color:#fff;opacity:.8;font-size:.9em;margin:0}
.chip svg{width:14px;height:14px}
.bar{height:10px;border-radius:999px;background:rgba(43,42,76,.09);overflow:hidden}
.bar>i{display:block;height:100%;width:0;border-radius:999px;background:var(--c-deep);transition:width .8s var(--ease)}
.muted{color:var(--ink-soft)}
.kicker{font:800 .74rem/1 var(--font-text);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px 0 8px;margin-left:-8px;border-radius:14px;color:var(--ink-soft);text-decoration:none;font:700 .92rem/1 var(--font-text)}
.back:hover{background:var(--lilac-soft);color:var(--ink)}
.back svg{width:20px;height:20px}
.section{margin-top:34px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-m);background:var(--sun-soft);font-size:.95rem}
.note img{width:36px;height:36px;flex:none}
.term{display:inline;padding:.02em .28em;margin:0 -.06em;border-radius:7px;background:linear-gradient(transparent 58%,var(--c-soft) 58%);font:inherit;font-weight:800;color:inherit;cursor:pointer;text-align:inherit;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background .15s}
.term:hover,.term:focus-visible{background:var(--c-soft)}
.art-der{color:var(--der)}.art-die{color:var(--die)}.art-das{color:var(--das)}

/* ── mascot ──────────────────────────────────────── */
.spross{width:100%;height:auto;overflow:visible}
.spross .leaf-l,.spross .leaf-r,.spross .arm,.spross .eyes,.spross .body-all{transform-box:fill-box}
.spross .leaf-l{transform-origin:100% 100%;animation:leafL 4s ease-in-out infinite}
.spross .leaf-r{transform-origin:0% 100%;animation:leafR 4s ease-in-out infinite .3s}
.spross .eyes{transform-origin:50% 50%;animation:blink 4.6s infinite}
.spross .arm{transform-origin:0% 100%;animation:wave 2.6s ease-in-out infinite}
.spross .body-all{transform-origin:50% 100%;animation:breathe 3.4s ease-in-out infinite}
.spross.grow{animation:grow .9s var(--ease) both}
.spross.cheer .body-all{animation:hop .6s var(--ease) 2}
@keyframes leafL{50%{transform:rotate(-7deg)}}
@keyframes leafR{50%{transform:rotate(8deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes wave{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-16deg)}80%{transform:rotate(10deg)}90%{transform:rotate(-12deg)}}
@keyframes breathe{50%{transform:scale(1.025,.975)}}
@keyframes grow{from{transform:scale(.2) translateY(40%);opacity:0}60%{transform:scale(1.08)}to{transform:none;opacity:1}}
@keyframes hop{50%{transform:translateY(-14px) scale(.97,1.04)}}

/* ── home ────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:1fr;gap:8px;padding:22px 20px 24px;border-radius:var(--r-l);background:var(--lilac-soft);position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:'';position:absolute;z-index:-1;width:340px;height:340px;right:-90px;top:-120px;background:url(../assets/svg/deco-blob-1.svg) center/contain no-repeat;opacity:.95}
.hero::after{content:'';position:absolute;z-index:-1;width:120px;height:120px;left:-26px;bottom:-34px;background:url(../assets/svg/deco-dots.svg) center/contain no-repeat;opacity:.7}
.hero-top{display:flex;align-items:flex-start;gap:8px}
.hero-txt{flex:1;min-width:0;padding-top:4px}
.hero .hello{font:700 .98rem/1.2 var(--font-text);color:var(--lilac-deep);margin-bottom:6px}
.hero h1 .l-de{letter-spacing:-.02em}
.hero-mascot{width:112px;flex:none;margin:-6px -4px 0 0}
.hero-stats{display:flex;align-items:center;gap:10px;margin-top:16px}
.ring{position:relative;width:76px;height:76px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10;stroke-linecap:round}
.ring .tr{stroke:rgba(255,255,255,.85)}
.ring .fg{stroke:var(--lilac-deep);transition:stroke-dashoffset 1.1s var(--ease)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:600 1.15rem/1 var(--font-display)}
.stat{display:flex;align-items:center;gap:6px;padding:8px 12px 8px 8px;min-width:0;border-radius:16px;background:rgba(255,255,255,.8);font:600 1.15rem/1 var(--font-display)}
.stat img{width:30px;height:30px;flex:none}
.stat small{display:block;font:700 .68rem/1.15 var(--font-text);color:var(--ink-soft);margin-top:2px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hero-cta .btn{flex:1 1 200px}
.hero-art{display:none}
.goalcard{display:flex;align-items:center;gap:14px;padding:16px 18px;margin-top:18px;text-decoration:none;color:inherit;transition:transform .2s var(--ease)}
.goalcard:hover{transform:translateY(-3px)}
.goalcard>img{width:52px;height:52px;flex:none}
.goalcard .g-main{flex:1;min-width:0}
.gdots{display:flex;gap:4px;margin-top:8px}
.gdots i{flex:1;max-width:22px;height:8px;border-radius:99px;background:var(--line)}
.gdots i.y{background:var(--sun)}.gdots i.g{background:var(--mint)}.gdots i.b{background:var(--sky)}
.gdots i:not(.on){opacity:.3}
.goalcard>svg{width:22px;height:22px;color:var(--ink-faint);flex:none}
.chapgrid{display:grid;grid-template-columns:1fr;gap:16px}
.chapcard{display:grid;grid-template-columns:108px 1fr;text-decoration:none;color:inherit;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s}
.chapcard:hover{transform:translateY(-4px);box-shadow:0 8px 0 rgba(43,42,76,.08),0 22px 40px rgba(43,42,76,.14)}
.chapcard:active{transform:translateY(1px)}
.chapcard .pic{position:relative;background:var(--c-soft);display:grid;place-items:center;overflow:hidden;min-height:128px}
.chapcard .pic img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.chapcard .pic img.icon{position:static;width:64px;height:64px;object-fit:contain}
.chapcard .pic img.dia{object-fit:contain;padding:8px}
.chapcard .num{position:absolute;left:8px;top:8px;display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:var(--c);color:var(--ink);font:600 1.05rem/1 var(--font-display);box-shadow:0 2px 0 rgba(43,42,76,.2);z-index:1}
.chapcard .body{padding:14px 16px 14px;min-width:0;display:flex;flex-direction:column;gap:8px}
.chapcard h3{font-size:1.14rem}
.chapcard .tags{display:flex;gap:6px;flex-wrap:wrap}
.chapcard .prog{display:flex;align-items:center;gap:10px;margin-top:auto;font:800 .78rem/1 var(--font-text);color:var(--ink-soft)}
.chapcard .prog .bar{flex:1}
.homefoot{display:grid;gap:12px;margin-top:34px}
.setrow{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--r-m);background:var(--white);box-shadow:var(--shadow-s);text-decoration:none;color:inherit;width:100%;text-align:left}
.setrow>img,.setrow>svg.lead{width:40px;height:40px;flex:none}
.setrow .g-main{flex:1;min-width:0;font-weight:700}

/* ── chapter ─────────────────────────────────────── */
.chaphead{display:grid;gap:14px;padding:20px;border-radius:var(--r-l);background:var(--c-soft);position:relative;overflow:hidden}
.chaphead .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chaphead .num{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--c);font:600 1.5rem/1 var(--font-display);box-shadow:0 3px 0 rgba(43,42,76,.2);flex:none}
.chaphead .pic{border-radius:var(--r-m);overflow:hidden;background:var(--paper);aspect-ratio:3/2;max-height:260px}
.chaphead .pic img{width:100%;height:100%;object-fit:cover}
.chaphead .pic.dia{background:var(--white);padding:10px}.chaphead .pic.dia img{object-fit:contain}
.learncta{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:20px;margin-top:18px}
.learncta img.ic{width:64px;height:64px}
.learncta .btn{grid-column:1/-1}
.learncta .bar{margin-top:10px}
.setgrid{display:grid;gap:12px}
.setcard{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-radius:var(--r-m);background:var(--white);box-shadow:var(--shadow-s);text-decoration:none;color:inherit;transition:transform .2s var(--ease)}
.setcard:hover{transform:translateY(-2px)}
.setcard .ti{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--c-soft);color:var(--c-deep)}
.c-sun .setcard .ti{color:#9A6800}
.setcard .ti svg{width:28px;height:28px}
.setcard h3{font-size:1.02rem}
.setcard .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px;font:700 .76rem/1 var(--font-text);color:var(--ink-soft)}
.stars{display:flex;gap:2px}
.stars svg{width:20px;height:20px;color:var(--line)}
.stars svg.on{color:var(--sun)}
.stars svg path{stroke:rgba(43,42,76,.25);stroke-width:1}

/* ── learn deck ──────────────────────────────────── */
.deckwrap{margin:14px -16px 0}
.deck{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 16px 26px;scrollbar-width:none;overscroll-behavior-x:contain}
.deck::-webkit-scrollbar{display:none}
.lcard{flex:0 0 min(100%,560px);scroll-snap-align:center;scroll-snap-stop:always;display:flex;flex-direction:column;overflow:hidden;min-height:min(66vh,580px)}
.lcard .pic{background:var(--c-soft);display:grid;place-items:center;padding:14px;min-height:150px;max-height:300px;position:relative}
.lcard .pic img{max-height:270px;width:auto;object-fit:contain}
.lcard .pic.photo{padding:0;background:var(--paper)}.lcard .pic.photo img{width:100%;height:100%;max-height:300px;object-fit:cover}
.lcard .pic.icons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;min-height:110px}
.lcard .pic.icons img{width:64px;height:64px}
.lcard .pic.white{background:var(--white);border-bottom:1px solid var(--line)}
.lcard .txt{padding:20px 22px 24px;display:flex;flex-direction:column;gap:14px;flex:1}
.lcard .cnt{font:800 .74rem/1 var(--font-text);letter-spacing:.08em;color:var(--c-deep);text-transform:uppercase;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.c-sun .lcard .cnt{color:#9A6800}
.lcard p.s{font-size:1.1rem;line-height:1.45}
.lcard p.s .l-de{font-weight:600}
.lcard p.s .l-hu{font-size:.86em;margin-top:.25em;font-weight:600}
.lcard p.s .l-en{font-size:.76em}
.bignum{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:var(--r-m);background:var(--c-soft)}
.bignum b{font:700 clamp(2.1rem,1.4rem + 3vw,2.9rem)/1 var(--font-display);letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.bignum span{font-weight:700;font-size:.95rem;line-height:1.3}
.legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 12px;font-size:.92rem}
.legend li{display:flex;gap:8px;align-items:baseline}
.legend li b{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font:700 .78rem/1 var(--font-display);flex:none;transform:translateY(-1px)}
.decknav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-6px auto 0;position:sticky;bottom:calc(var(--tab-h) + var(--sab) + 10px);z-index:6;width:min(100%,420px);padding:6px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:var(--shadow-s);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:60vw}
.dots button{width:12px;height:12px;border-radius:50%;background:var(--line);transition:all .25s var(--ease);position:relative}
.dots button::after{content:'';position:absolute;inset:-10px -3px}
.dots button.seen{background:var(--c)}
.dots button.on{width:28px;border-radius:99px;background:var(--c-deep)}
.navbtn{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--c-soft);color:var(--ink);flex:none}
.navbtn:active{transform:scale(.94)}
.navbtn svg{width:24px;height:24px}
.navbtn[disabled]{opacity:.35}

/* ── popover / sheet ─────────────────────────────── */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(43,42,76,.42);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s both}
@keyframes fade{from{opacity:0}}
.sheet{width:min(100%,520px);max-height:86dvh;overflow:auto;background:var(--white);border-radius:var(--r-l) var(--r-l) 0 0;padding:22px 22px calc(22px + var(--sab));box-shadow:0 -10px 40px rgba(43,42,76,.2);animation:sheetUp .32s var(--ease) both;position:relative}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}}
.sheet .x{position:absolute;right:10px;top:10px}
.gloss>div:first-child{padding-right:44px}
.gloss .word{font:600 1.7rem/1.15 var(--font-display);padding-right:44px;overflow-wrap:anywhere}
.gloss .word small{font:700 .55em/1 var(--font-display);margin-right:.3em}
.gloss .pl{color:var(--ink-soft);font-weight:700;margin-top:4px;font-size:.95rem}
.gloss .tr{display:grid;gap:8px;margin-top:16px}
.gloss .tr div{display:flex;gap:10px;align-items:baseline;font-weight:700;font-size:1.08rem}
.gloss .tr .pill{font:700 .62rem/1 var(--font-text);letter-spacing:.06em;padding:.3em .5em;border-radius:6px;color:#fff;flex:none;transform:translateY(-2px)}
.gloss .tr .hu{color:var(--hu)}.gloss .tr .hu .pill{background:var(--hu)}
.gloss .tr .en{color:var(--en);font-size:.98rem}.gloss .tr .en .pill{background:var(--en)}
.gloss .acts{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;align-items:center}

/* ── session (exercise runner) ───────────────────── */
.session{overflow-x:clip;min-height:100dvh;display:flex;flex-direction:column;background:var(--paper)}
.s-head{display:flex;align-items:center;gap:10px;padding:calc(10px + var(--sat)) calc(12px + var(--sar)) 10px calc(8px + var(--sal));position:sticky;top:0;background:var(--paper);z-index:5}
.s-head .bar{flex:1;height:14px}
.s-head .bar>i{background:var(--mint);transition:width .5s var(--ease)}
.s-head .cnt{font:600 .95rem/1 var(--font-display);color:var(--ink-soft);min-width:3.2em;text-align:right}
.s-head .mini-sw{width:44px;height:44px;border-radius:14px;font:800 .78rem/1 var(--font-text);color:var(--ink-faint)}
.s-head .mini-sw[aria-checked=true]{color:#fff;background:var(--hu)}
.s-body{flex:1;width:min(100%,680px);margin:0 auto;padding:8px calc(18px + var(--sar)) 150px calc(18px + var(--sal));display:flex;flex-direction:column;gap:18px}
.s-body.wide{width:min(100%,980px)}
.step{display:flex;flex-direction:column;gap:18px;animation:stepIn .32s var(--ease) both}
.step:focus,.step:focus-visible{outline:none}
@keyframes stepIn{from{opacity:0;transform:translateX(24px)}}
.task{font:800 .76rem/1.2 var(--font-text);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.task .l-hu,.task .l-en{text-transform:none;letter-spacing:0;font-size:1em}
.q{font:600 clamp(1.25rem,1.05rem + 1vw,1.6rem)/1.25 var(--font-display)}
.q .l-hu{font:700 .68em/1.3 var(--font-text);margin-top:.4em}.q .l-en{font:700 .58em/1.3 var(--font-text)}
.qcard{padding:20px 22px;border-radius:var(--r-l);background:var(--white);box-shadow:var(--shadow)}
.opts{display:grid;gap:12px}
.opts.two{grid-template-columns:1fr 1fr}
.opt{display:block;width:100%;text-align:left;min-height:58px;padding:14px 18px;border-radius:var(--r-m);background:var(--white);box-shadow:inset 0 0 0 2px var(--line),0 4px 0 var(--line);font-weight:700;font-size:1.05rem;line-height:1.3;transition:transform .08s,box-shadow .12s,background .12s}
.opt:hover{box-shadow:inset 0 0 0 2px var(--ink-faint),0 4px 0 var(--line)}
.opt:active{transform:translateY(3px);box-shadow:inset 0 0 0 2px var(--ink-faint),0 1px 0 var(--line)}
.opt.center{text-align:center}
.opt.big{min-height:72px;font:600 1.3rem/1.1 var(--font-display)}
.opt.ok{background:var(--mint-soft);box-shadow:inset 0 0 0 2.5px var(--mint-deep),0 4px 0 var(--mint)}
.opt.no{background:var(--sun-soft);box-shadow:inset 0 0 0 2.5px var(--sun-deep),0 4px 0 var(--sun);animation:nudge .35s}
.opt.dim{opacity:.5}
.opt[disabled]{cursor:default}
@keyframes nudge{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.opt.der{box-shadow:inset 0 0 0 2px var(--der),0 4px 0 var(--der);color:var(--der)}
.opt.die{box-shadow:inset 0 0 0 2px var(--die),0 4px 0 var(--die);color:var(--die)}
.opt.das{box-shadow:inset 0 0 0 2px var(--das),0 4px 0 var(--das);color:var(--das)}
.s-foot{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:12px calc(18px + var(--sar)) calc(14px + var(--sab)) calc(18px + var(--sal));background:linear-gradient(transparent,var(--paper) 26%);display:flex;justify-content:center;pointer-events:none}
.s-foot>*{pointer-events:auto;width:min(100%,644px)}
.fb{position:fixed;left:0;right:0;bottom:0;z-index:25;padding:18px calc(18px + var(--sar)) calc(16px + var(--sab)) calc(18px + var(--sal));border-radius:var(--r-l) var(--r-l) 0 0;animation:sheetUp .3s var(--ease) both;box-shadow:0 -8px 30px rgba(43,42,76,.14);max-height:72dvh;overflow:auto}
.fb.ok{background:var(--mint-soft)}
.fb.no{background:var(--sun-soft)}
.fb-in{width:min(100%,644px);margin:0 auto;display:grid;gap:12px}
.fb-top{display:flex;gap:12px;align-items:center}
.fb-top .m{width:58px;flex:none;margin:-6px 0}
.fb-top h2{font-size:1.3rem}
.fb .ans{font-weight:800;font-size:1.08rem;line-height:1.35}
.fb .ans small{display:block;font:800 .7rem/1 var(--font-text);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.fb .why{font-size:.98rem;line-height:1.4}
.fb .why .l-de{font-weight:600}
.diff{font:700 1.35rem/1.5 ui-monospace,'SF Mono',Menlo,Consolas,monospace;letter-spacing:.04em;overflow-wrap:anywhere}
.diff .bad{background:var(--coral);color:#fff;border-radius:5px;padding:0 2px;text-decoration:line-through;text-decoration-thickness:2px}
.diff .miss{background:var(--mint);color:#fff;border-radius:5px;padding:0 2px}
.diff-row{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline}
.diff-row small{font:800 .68rem/1 var(--font-text);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}

/* spell */
.prompt{padding:22px;border-radius:var(--r-l);background:var(--white);box-shadow:var(--shadow);text-align:center;display:grid;gap:6px;justify-items:center}
.prompt .big{font:600 clamp(1.5rem,1.2rem + 1.6vw,2.1rem)/1.2 var(--font-display);color:var(--hu);overflow-wrap:anywhere}
.prompt .sub{color:var(--en);font-weight:700;font-size:.95rem}
.prompt .hint{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-weight:800;font-size:.9rem;color:var(--ink-soft)}
.prompt .numdot{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;font:700 1.3rem/1 var(--font-display)}
.inp{width:100%;min-height:64px;padding:12px 18px;border-radius:var(--r-m);border:0;background:var(--white);box-shadow:inset 0 0 0 2.5px var(--ink-faint);font:700 1.5rem/1.2 var(--font-text);text-align:center;letter-spacing:.01em}
.inp:focus{box-shadow:inset 0 0 0 3px var(--lilac-deep),0 0 0 5px var(--lilac-soft)}
.inp::placeholder{color:var(--ink-faint);font-weight:600;font-size:1.05rem}
.keys{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.keys button{min-width:48px;height:48px;padding:0 10px;border-radius:14px;background:var(--white);box-shadow:inset 0 0 0 2px var(--line),0 3px 0 var(--line);font:700 1.2rem/1 var(--font-text)}
.keys button:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px var(--line),0 1px 0 var(--line)}

/* tiles: gap text, sentence builder, pairs, order */
.tile{display:inline-flex;align-items:center;justify-content:center;min-height:46px;min-width:46px;padding:8px 14px;border-radius:14px;background:var(--white);box-shadow:inset 0 0 0 2px var(--line),0 3px 0 var(--line);font-weight:800;font-size:1.05rem;transition:transform .1s,opacity .2s,background .15s}
.tile:active{transform:translateY(2px)}
.tile.used{opacity:.25;pointer-events:none}
.tile.sel{background:var(--lilac-soft);box-shadow:inset 0 0 0 2.5px var(--lilac-deep),0 3px 0 var(--lilac)}
.tile.ok{background:var(--mint-soft);box-shadow:inset 0 0 0 2.5px var(--mint-deep),0 3px 0 var(--mint)}
.tile.no{background:var(--sun-soft);box-shadow:inset 0 0 0 2.5px var(--sun-deep),0 3px 0 var(--sun)}
.bank{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:14px;border-radius:var(--r-m);background:rgba(43,42,76,.045)}
.gaptext{font-size:1.12rem;line-height:2.5;font-weight:600}
.gap{display:inline-flex;align-items:center;justify-content:center;min-width:92px;min-height:44px;padding:2px 12px;margin:0 3px;border-radius:12px;background:var(--lilac-soft);box-shadow:inset 0 -3px 0 var(--lilac);font-weight:800;vertical-align:middle;line-height:1.2}
.gap.cur{box-shadow:inset 0 0 0 2.5px var(--lilac-deep)}
.gap.filled{background:var(--white);box-shadow:inset 0 0 0 2px var(--line),0 3px 0 var(--line)}
.gap.ok{background:var(--mint-soft);box-shadow:inset 0 0 0 2.5px var(--mint-deep)}
.gap.no{background:var(--sun-soft);box-shadow:inset 0 0 0 2.5px var(--sun-deep)}
.gap.no s{opacity:.6;margin-right:6px;font-weight:600}
.trans{padding:12px 16px;border-radius:var(--r-m);background:rgba(217,72,95,.06);font-size:.95rem;line-height:1.45}
.trans .l-de{display:none}
.trans .l-hu,.trans .l-en{margin:0;font-size:1em}
.trans .l-en{margin-top:6px}
body:not(.hu-on):not(.en-on) .trans{display:none}
.line{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:68px;padding:10px 12px;border-radius:var(--r-m);background:var(--white);box-shadow:inset 0 0 0 2.5px var(--line);align-content:center}
.line:empty::before{content:attr(data-ph);color:var(--ink-faint);font-weight:700;padding:0 6px}
.olist{display:grid;gap:10px}
.oitem{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:8px 8px 8px 4px;border-radius:var(--r-m);background:var(--white);box-shadow:inset 0 0 0 2px var(--line),0 3px 0 var(--line);touch-action:pan-y;user-select:none;-webkit-user-select:none;transition:box-shadow .15s,background .15s}
.oitem.drag{box-shadow:inset 0 0 0 2.5px var(--lilac-deep),0 14px 30px rgba(43,42,76,.22);z-index:5;position:relative;transition:none}
.oitem .grip{display:grid;place-items:center;width:30px;height:52px;color:var(--ink-faint);cursor:grab;touch-action:none}
.oitem .grip svg{width:22px;height:22px}
.oitem .ot{font-weight:700;font-size:.94rem;line-height:1.3;display:flex;gap:10px;align-items:center;min-width:0}
.oitem .ot img{width:58px;height:50px;object-fit:contain;flex:none;border-radius:10px;background:var(--mint-soft)}
.oitem .mv{display:grid;gap:4px}
.oitem .mv button{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--lilac-soft);color:var(--lilac-deep)}
.oitem .mv button svg{width:18px;height:18px}
.oitem .mv button[disabled]{opacity:.3}
.oitem .pos{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font:700 .85rem/1 var(--font-display);flex:none}
.oitem.ok{background:var(--mint-soft);box-shadow:inset 0 0 0 2.5px var(--mint-deep)}
.oitem.no{background:var(--sun-soft);box-shadow:inset 0 0 0 2.5px var(--sun-deep)}
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.pairs .tile{width:100%;min-height:60px;text-align:center;line-height:1.25;font-size:.98rem;padding:8px 10px}
.pairs .tile.done{background:var(--mint-soft);box-shadow:inset 0 0 0 2px var(--mint);color:var(--ink-soft);pointer-events:none}
.pairs .tile.shake{animation:nudge .35s;background:var(--sun-soft)}
.sortcard{padding:26px 22px;border-radius:var(--r-l);background:var(--white);box-shadow:var(--shadow);text-align:center;font:600 1.3rem/1.3 var(--font-display)}
.sortcard .l-hu{font:700 .7em/1.3 var(--font-text);margin-top:.4em}.sortcard .l-en{font:700 .6em/1.3 var(--font-text)}
.buckets{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.buckets .opt{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px}
.buckets .opt img{width:44px;height:44px}
/* true/false */
.tfbtns{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tfbtns .opt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px}
.tfbtns .opt img{width:46px;height:46px}
/* dialog */
.chat{display:grid;gap:12px}
.scene{display:flex;gap:12px;align-items:center;padding:12px 16px;border-radius:var(--r-m);background:var(--c-soft);font-weight:700;font-size:.95rem}
.scene img{width:44px;height:44px;flex:none}
.bub{position:relative;max-width:88%;padding:12px 16px;border-radius:20px 20px 20px 6px;background:var(--white);box-shadow:var(--shadow-s);font-weight:700;animation:stepIn .3s var(--ease) both}
.bub .who{display:block;font:800 .68rem/1 var(--font-text);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.bub.me{justify-self:end;border-radius:20px 20px 6px 20px;background:var(--lilac-deep);color:#fff}
.bub.me .l-hu,.bub.me .l-en,.bub.me .who{color:#fff;opacity:.85}
.bub:not(.me){padding-right:50px}
.bub .say{position:absolute;right:2px;top:2px;color:var(--ink-faint)}
/* label diagram */
.labwrap{display:grid;gap:16px}
.diagram{position:relative;border-radius:var(--r-l);background:var(--white);box-shadow:var(--shadow);padding:8px;overflow:hidden}
.diagram svg{width:100%;height:auto;max-height:62vh;margin:0 auto;touch-action:manipulation}
.diagram svg .organ{transition:opacity .25s,filter .25s}
.diagram.focus svg .organ:not(.hot){opacity:.28}
.diagram svg .organ.hot{filter:drop-shadow(0 0 5px rgba(43,42,76,.5))}
.diagram svg .mk{cursor:pointer}
.diagram svg .mk circle{transition:fill .2s,stroke .2s,r .2s}
.diagram svg .mk.cur circle:last-of-type{fill:var(--ink)}
.diagram svg .mk.cur text{fill:#fff}
.diagram svg .mk.done circle:last-of-type{fill:var(--mint)}
.diagram svg .mk.miss circle:last-of-type{fill:var(--sun)}
.diagram svg .mk:focus-visible circle:last-of-type{stroke:var(--lilac-deep);stroke-width:5}
.lablegend{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.lablegend li{display:flex;gap:8px;align-items:center;padding:6px 10px;border-radius:12px;background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line);font-weight:800;font-size:.92rem;min-height:40px}
.lablegend li b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font:700 .78rem/1 var(--font-display);flex:none}
.lablegend li.open{color:var(--ink-faint);font-weight:700}
.lablegend li.ok b{background:var(--mint-deep)}.lablegend li.miss b{background:var(--sun-deep)}
/* flashcards */
.flashwrap{perspective:1200px;display:grid;place-items:center}
.flash{position:relative;width:min(100%,460px);aspect-ratio:4/3.3;max-height:52dvh;transform-style:preserve-3d;transition:transform .55s var(--ease);cursor:pointer;border-radius:var(--r-l)}
.flash.flip{transform:rotateY(180deg)}
.flash .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--r-l);background:var(--white);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center}
.flash .back{transform:rotateY(180deg);background:var(--coral-soft)}
.flash .w{font:600 clamp(1.5rem,1.1rem + 2.2vw,2.3rem)/1.15 var(--font-display);overflow-wrap:anywhere}
.flash .w small{font-size:.6em;margin-right:.25em}
.flash .sub{font-weight:700;color:var(--ink-soft)}
.flash .hu{color:var(--hu)}.flash .en{color:var(--en);font-weight:700;font-size:1rem}
.flash .tap{position:absolute;bottom:14px;font:800 .7rem/1 var(--font-text);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.flash .corner{position:absolute;top:12px;left:14px;display:flex;gap:6px}
.flash .say{position:absolute;top:8px;right:8px}
.flashbtns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.seg{display:inline-flex;padding:4px;border-radius:16px;background:rgba(43,42,76,.06);gap:4px;align-self:center}
.seg button{min-height:44px;padding:6px 14px;border-radius:12px;font:800 .85rem/1 var(--font-text);color:var(--ink-soft)}
.seg button[aria-pressed=true]{background:var(--white);color:var(--ink);box-shadow:0 2px 6px rgba(43,42,76,.12)}
/* results */
.result{display:grid;justify-items:center;text-align:center;gap:16px;padding-top:4vh}
.result .m{width:150px}
.result .bigstars{display:flex;gap:8px}
.result .bigstars svg{width:58px;height:58px;color:var(--line);transform:scale(0);animation:pop .5s var(--ease) both}
.result .bigstars svg.on{color:var(--sun)}
.result .bigstars svg:nth-child(2){animation-delay:.15s;width:70px;height:70px;margin-top:-10px}.result .bigstars svg:nth-child(3){animation-delay:.3s}
.result .bigstars svg path{stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
@keyframes pop{60%{transform:scale(1.2) rotate(-8deg)}to{transform:scale(1)}}
.result .score{font:600 1.1rem/1 var(--font-display);color:var(--ink-soft)}
.result .acts{display:grid;gap:12px;width:min(100%,400px);margin-top:8px}
.lzres{width:min(100%,520px);display:grid;gap:10px;text-align:left}
.lzres li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-m);background:var(--white);box-shadow:var(--shadow-s);text-decoration:none;color:inherit}
.lzres .n{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--c);font:600 1.05rem/1 var(--font-display)}
.lzres .t{font-weight:700;font-size:.92rem;line-height:1.3}
.lzres .bar{margin-top:6px}
.lzres .v{font:600 1rem/1 var(--font-display)}
.lzres a.rev{grid-column:2/-1;font:800 .82rem/1.2 var(--font-text);color:var(--lilac-deep);min-height:32px;display:inline-flex;align-items:center}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:10px;height:14px;border-radius:3px;animation:fall linear both}
@keyframes fall{to{transform:translate3d(var(--dx),105vh,0) rotate(var(--rot))}}

/* ── vocabulary ──────────────────────────────────── */
.pagehead{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.pagehead>img{width:56px;height:56px;flex:none;align-self:flex-start}
.pagehead p{font-size:.95rem}
.search{position:relative;margin-bottom:12px}
.search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:22px;height:22px;color:var(--ink-faint);pointer-events:none}
.search input{width:100%;min-height:54px;padding:10px 16px 10px 48px;border-radius:var(--r-m);border:0;background:var(--white);box-shadow:inset 0 0 0 2px var(--line),var(--shadow-s);font-weight:700}
.search input:focus{box-shadow:inset 0 0 0 3px var(--lilac-deep)}
.filters{display:flex;gap:8px;overflow-x:auto;padding:4px 16px 10px;margin:0 -16px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.fchip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 16px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 2px var(--line);font:800 .88rem/1.1 var(--font-text);color:var(--ink-soft);text-align:left}
.fchip[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.fchip[aria-pressed=true] .l-hu,.fchip[aria-pressed=true] .l-en{color:#fff;opacity:.8}
.fchip svg{width:18px;height:18px}
.fchip .l-hu,.fchip .l-en{font-size:.8em;margin:1px 0 0}
.vtools{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:6px 0 14px}
.vlist{display:grid;gap:10px}
.vrow{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;padding:12px 8px 12px 16px;border-radius:var(--r-m);background:var(--white);box-shadow:var(--shadow-s);border-left:0;position:relative;overflow:hidden}
.vrow::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--line)}
.vrow.der::before{background:var(--der)}.vrow.die::before{background:var(--die)}.vrow.das::before{background:var(--das)}
.vrow .de{padding:11px 0;margin:-11px 0;font:600 1.12rem/1.25 var(--font-display);overflow-wrap:anywhere;cursor:pointer;text-align:left}
.vrow .de .star{display:inline-block;width:16px;height:16px;color:var(--sun-deep);vertical-align:-1px;margin-left:4px}
.vrow .pl{font:700 .82rem/1.2 var(--font-text);color:var(--ink-soft)}
.vrow .hu{color:var(--hu);font-weight:700;font-size:.98rem}
.vrow .en{color:var(--en);font-weight:700;font-size:.86rem;display:none}
.en-on .vrow .en{display:block}
body:not(.hu-on) .vrow .hu{display:none}
.vrow .acts{display:flex;grid-row:1/span 4;grid-column:2}
.vrow .fav.on{color:var(--coral)}
.vrow .fav.on svg{fill:var(--coral)}
.vsec{margin:22px 0 10px;display:flex;align-items:baseline;gap:10px}
.empty{padding:36px 20px;text-align:center;color:var(--ink-soft);display:grid;justify-items:center;gap:10px}
.empty .m{width:110px}

/* ── discover / parents / goals ──────────────────── */
.linkgrid{display:grid;gap:12px}
.linkcard{display:grid;grid-template-columns:52px 1fr;gap:14px;padding:16px;border-radius:var(--r-m);background:var(--white);box-shadow:var(--shadow-s);text-decoration:none;color:inherit;transition:transform .2s var(--ease)}
.linkcard:hover{transform:translateY(-3px)}
.linkcard .ki{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--c-soft);color:var(--c-deep)}
.linkcard .ki svg{width:28px;height:28px}
.linkcard h3{font-size:1.04rem;line-height:1.25}
.linkcard .src{font:700 .84rem/1.3 var(--font-text);color:var(--ink-soft);margin-top:3px}
.linkcard .desc{font-size:.9rem;line-height:1.35;margin-top:8px}
.linkcard .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;align-items:center}
.lang{display:inline-grid;place-items:center;min-width:34px;height:24px;padding:0 7px;border-radius:7px;font:800 .7rem/1 var(--font-text);letter-spacing:.05em;color:#fff;background:var(--ink)}
.lang.hu{background:var(--hu)}.lang.en{background:var(--en)}
.ext{display:inline-flex;align-items:center;gap:4px;font:800 .74rem/1 var(--font-text);color:var(--ink-faint);margin-left:auto}
.ext svg{width:14px;height:14px}
.prose{display:grid;gap:14px;max-width:66ch}
.prose .card{padding:20px 22px;display:grid;gap:10px}
.prose .card>img{width:44px;height:44px}
.goals{display:grid;gap:12px}
.goal{display:grid;gap:12px;padding:16px 18px;border-radius:var(--r-m);background:var(--c-soft);position:relative}
.goal .gt{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.goal .n{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:var(--c);font:600 1.15rem/1 var(--font-display);box-shadow:0 2px 0 rgba(43,42,76,.18)}
.goal p{font-weight:700;line-height:1.4}
.rate{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rate button{display:flex;align-items:center;gap:6px;min-height:44px;padding:4px 12px 4px 6px;border-radius:999px;background:rgba(255,255,255,.7);font:800 .8rem/1.1 var(--font-text);color:var(--ink-soft);text-align:left}
.rate button img{width:32px;height:32px}
.rate button[aria-pressed=true]{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 2.5px var(--ink)}
.rate button .l-hu,.rate button .l-en{font-size:.84em;margin:1px 0 0}
.rate a{margin-left:auto;font:800 .84rem/1 var(--font-text);min-height:44px;display:inline-flex;align-items:center;color:var(--ink)}
.settings{display:grid;gap:10px}
.setrow .sw{box-shadow:none;background:none;padding:0 5px;min-width:44px;justify-content:center}
.danger{color:var(--coral-deep);font-weight:800;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + var(--sab) + 16px);transform:translateX(-50%);z-index:90;background:var(--ink);color:#fff;padding:12px 18px;border-radius:16px;font-weight:700;box-shadow:var(--shadow);animation:sheetUp .3s var(--ease) both;display:flex;gap:12px;align-items:center;max-width:calc(100vw - 32px)}
.toast button{color:var(--sun);font-weight:800;min-height:44px;padding:0 6px}

/* ── responsive ──────────────────────────────────── */
@media (min-width:520px){
  .sw .sw-l{display:inline}
  .hero{padding:28px}
  .hero-mascot{width:150px}
  .chapcard{grid-template-columns:150px 1fr}
  .linkgrid,.setgrid{grid-template-columns:1fr 1fr}
}
@media (min-width:760px){
  body{font-size:18px}
  #view{padding-top:26px;padding-left:28px;padding-right:28px}
  .chapgrid{grid-template-columns:1fr 1fr;gap:20px}
  .chapcard{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .chapcard .pic{aspect-ratio:3/2;min-height:0}
  .chapcard .pic img.icon{width:96px;height:96px}
  .chaphead{grid-template-columns:1.2fr 1fr;align-items:center;padding:28px}
  .chaphead .pic{order:2}
  .hero{grid-template-columns:1.25fr .75fr;padding:36px;gap:24px;align-items:center}
  .hero-art{display:block;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow);transform:rotate(2deg);background:var(--paper);height:400px}
  .hero-art img{width:100%;height:100%;object-fit:contain}
  .deckwrap{margin-left:-28px;margin-right:-28px}.deck{padding-left:28px;padding-right:28px}
  .lcard{flex-basis:560px}
  .vlist{grid-template-columns:1fr 1fr}
  .homefoot{grid-template-columns:1fr 1fr}
  .goals{grid-template-columns:1fr 1fr}
  .filters{flex-wrap:wrap;overflow:visible}
  .scrim{align-items:center}.sheet{border-radius:var(--r-l)}
}
@media (min-width:980px){
  .topnav{display:flex}
  .tabbar{display:none}
  #view{padding-bottom:60px}
  .chapgrid{grid-template-columns:repeat(3,1fr)}
  .linkgrid{grid-template-columns:repeat(3,1fr)}
  .setgrid{grid-template-columns:repeat(3,1fr)}
  .toast{bottom:24px}
  .decknav{bottom:16px}
  .labwrap.split{grid-template-columns:1.25fr 1fr;align-items:start}
}
@media (hover:none){.chapcard:hover,.linkcard:hover,.setcard:hover,.goalcard:hover{transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .result .bigstars svg{transform:none}
}
@media print{.topbar,.tabbar,.s-foot{display:none}}

/* speech API present but no German voice → hide listen buttons */
.no-speech .say{display:none!important}

/* audit 2026-11-10: legible number markers in diagrams (were ~5–7 px on phones) */
.lcard .pic.dia{max-height:none;padding:8px}
.lcard .pic.dia svg{display:block;width:100%;height:auto;max-height:min(70vh,520px);margin:0 auto}
.diagram svg .mk>circle:last-of-type,.diagram svg .mk>text,.lcard .pic.dia svg .mk>circle:last-of-type,.lcard .pic.dia svg .mk>text{transform-box:fill-box;transform-origin:center;transform:scale(1.4)}
/* audit: speaker button inside the feedback answer line must not stretch the line height */
.fb .ans .say{width:44px;height:44px;margin:-12px 0 -12px 0;vertical-align:middle}