:root{
  --bg:#FFF6EA; --card:#FFFFFF; --ink:#1E2240; --muted:#6B6F8A; --line:#EFE4D2;
  --coral:#FF6A48; --coral-d:#E2512F; --sun:#FFC83A; --teal:#14A38F; --teal-d:#0E8574;
  --sky:#4C7BFF; --plum:#7A4CE0; --ok:#20B26B; --ok-bg:#E3F8EC; --bad:#E5484D; --bad-bg:#FDE8E8;
  --r:22px; --shadow:0 4px 0 rgba(30,34,64,.08), 0 10px 24px rgba(30,34,64,.06);
  --fh:'Baloo 2', ui-rounded, system-ui, sans-serif; --fb:'Lexend', system-ui, sans-serif;
  color-scheme: light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:16px;line-height:1.45}
body{min-height:100dvh;overscroll-behavior:none}
body.kid{background:linear-gradient(180deg,#DFF1FF 0%,#FFF3D6 100%) fixed}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
#app{max-width:540px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 24px);min-height:100dvh;display:flex;flex-direction:column}
h1,h2,h3{font-family:var(--fh);margin:0;line-height:1.1;letter-spacing:-.01em}
h1{font-size:1.75rem;font-weight:800} h2{font-size:1.45rem;font-weight:800} h3{font-size:1.15rem;font-weight:700}
.muted{color:var(--muted)} .small{font-size:.85rem}
.row{display:flex;align-items:center;gap:10px} .between{justify-content:space-between} .grow{flex:1}
.stack>*+*{margin-top:14px}

/* top bar */
.top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.logo{display:flex;align-items:center;gap:10px}
.logo svg{width:46px;height:46px}
.iconbtn{width:44px;height:44px;border-radius:14px;background:var(--card);box-shadow:var(--shadow);display:grid;place-items:center;font-size:1.25rem}
.sync{font-size:.75rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.sync i{width:8px;height:8px;border-radius:50%;background:#C9C3B6;display:inline-block}
.sync.on i{background:var(--ok)} .sync.err i{background:var(--sun)}

/* cards */
.card{background:var(--card);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.family{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.family .flame{font-family:var(--fh);font-size:3rem;font-weight:800;line-height:1;white-space:nowrap;flex:none}
.family .today{display:flex;gap:8px;margin-top:14px}
.family .today span{flex:1;background:rgba(255,255,255,.1);border-radius:14px;padding:8px 6px;text-align:center;font-size:.8rem}
.family .today span b{display:block;font-size:1.4rem}
.family .today span.done{background:var(--teal)}
.family:after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,200,58,.18)}
.bar{height:12px;border-radius:99px;background:rgba(30,34,64,.08);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--sun);transition:width .5s}
.family .bar{background:rgba(255,255,255,.15)}

.profiles{display:grid;gap:12px}
.pcard{display:flex;align-items:center;gap:14px;text-align:left;width:100%;background:var(--card);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow);transition:transform .1s}
.pcard:active{transform:scale(.98)}
.avatar{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;font-size:2.1rem;flex:none}
.pcard .meta{flex:1;min-width:0}
.pcard .meta h3{font-size:1.35rem}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--bg)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.chev{font-size:1.4rem;color:var(--muted)}
.c0{background:#FFE3D9}.c1{background:#E6DEFF}.c2{background:#D8F3EE}.c3{background:#FFF0C7}

/* profile view */
.hero{display:flex;align-items:center;gap:14px;margin:6px 0 16px}
.hero .avatar{width:72px;height:72px;font-size:2.5rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.stat{background:var(--card);border-radius:18px;padding:12px;text-align:center;box-shadow:var(--shadow)}
.stat b{display:block;font-family:var(--fh);font-size:1.6rem;line-height:1}
.stat span{font-size:.75rem;color:var(--muted)}
.mission{background:var(--coral);color:#fff;border-radius:26px;padding:20px;position:relative;overflow:hidden;box-shadow:0 6px 0 var(--coral-d)}
.mission.done{background:var(--teal);box-shadow:0 6px 0 var(--teal-d)}
.mission h2{font-size:1.7rem}
.mission p{margin:6px 0 16px;opacity:.95}
.mission .deco{position:absolute;right:-6px;top:-4px;font-size:5.5rem;opacity:.25;transform:rotate(12deg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--fh);font-weight:800;font-size:1.2rem;padding:13px 22px;border-radius:18px;background:var(--ink);color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.25);transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.btn.white{background:#fff;color:var(--ink)}
.btn.block{width:100%}
.btn.ok{background:var(--ok)} .btn.bad{background:var(--bad)} .btn.coral{background:var(--coral)}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.btn:disabled{opacity:.4}
.seg{display:flex;background:var(--card);border-radius:16px;padding:4px;box-shadow:var(--shadow)}
.seg button{flex:1;padding:9px 6px;border-radius:12px;font-weight:600;font-size:.9rem}
.seg button.on{background:var(--ink);color:#fff}
.section-title{display:flex;align-items:baseline;justify-content:space-between;margin:22px 0 10px}
.topics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.topic{background:var(--card);border-radius:18px;padding:14px;text-align:left;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;min-height:118px}
.topic .ic{font-size:1.8rem}
.topic h3{font-size:1rem;line-height:1.15}
.topic .bar{height:8px;margin-top:auto}
.topic .bar i{background:var(--teal)}
.topic small{color:var(--muted);font-size:.72rem}
.tag{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--plum)}

/* lesson */
.lesson{display:flex;flex-direction:column;flex:1}
.lbar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.lbar .x{font-size:1.4rem;color:var(--muted);width:36px;height:36px}
.prog{flex:1;height:16px;border-radius:99px;background:rgba(30,34,64,.1);overflow:hidden}
.prog i{display:block;height:100%;background:var(--ok);border-radius:99px;transition:width .35s;box-shadow:inset 0 -4px 0 rgba(0,0,0,.08)}
.lstars{font-family:var(--fh);font-weight:800;font-size:1.1rem}
.ex{flex:1;display:flex;flex-direction:column}
.kicker{font-family:var(--fh);font-weight:800;color:var(--plum);font-size:1.25rem;margin:0 0 14px}
.prompt{font-family:var(--fh);font-size:1.7rem;font-weight:700;line-height:1.2;margin:0 0 18px}
.introcard{text-align:center;padding:26px 18px}
.introcard .de{color:var(--muted);margin:0 0 8px}
.introcard .en{font-family:var(--fh);font-size:2rem;font-weight:800;line-height:1.15;margin:0 0 18px}
.introcard .emoji{font-size:6rem;line-height:1.1;margin-bottom:6px}
.audio-row{display:flex;gap:10px;justify-content:center}
.abtn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:16px;background:var(--sky);color:#fff;font-weight:600;box-shadow:0 4px 0 #3560d8}
.abtn.slow{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.abtn:active{transform:translateY(3px);box-shadow:none}
.play{width:120px;height:120px;border-radius:50%;background:var(--sky);color:#fff;font-size:3rem;display:grid;place-items:center;margin:0 auto 6px;box-shadow:0 6px 0 #3560d8}
.play:active{transform:translateY(4px);box-shadow:0 2px 0 #3560d8}
.playwrap{text-align:center;margin-bottom:22px}
.opts{display:grid;gap:10px}
.opt{background:var(--card);border-radius:18px;padding:15px 16px;text-align:left;font-weight:500;box-shadow:0 3px 0 var(--line),0 0 0 2px var(--line) inset;transition:transform .08s}
.opt:active{transform:scale(.98)}
.opt.right{background:var(--ok-bg);box-shadow:0 0 0 3px var(--ok) inset}
.opt.wrong{background:var(--bad-bg);box-shadow:0 0 0 3px var(--bad) inset}
.opts.emoji{grid-template-columns:1fr 1fr}
.opts.emoji .opt{font-size:3.6rem;text-align:center;padding:16px 0;line-height:1.1}
.opts.words .opt{font-family:var(--fh);font-size:1.5rem;font-weight:700;text-align:center}
.bigemoji{font-size:7rem;text-align:center;line-height:1.1;margin:0 0 16px}
.answer{min-height:64px;border-bottom:2px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;padding:8px 0;margin-bottom:22px}
.bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tile{background:var(--card);border-radius:12px;padding:9px 13px;font-weight:500;box-shadow:0 3px 0 var(--line),0 0 0 2px var(--line) inset}
.tile.used{visibility:hidden}
.mic{width:130px;height:130px;border-radius:50%;background:var(--coral);color:#fff;font-size:3.4rem;display:grid;place-items:center;margin:8px auto 10px;box-shadow:0 6px 0 var(--coral-d)}
.mic.listening{animation:pulse 1.1s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,106,72,.55),0 6px 0 var(--coral-d)}100%{box-shadow:0 0 0 26px rgba(255,106,72,0),0 6px 0 var(--coral-d)}}
.center{text-align:center}
.heard{margin-top:10px;font-style:italic;color:var(--muted)}
.reveal{background:var(--card);border-radius:18px;padding:16px;text-align:center;box-shadow:var(--shadow);margin-top:10px}
.reveal .en{font-family:var(--fh);font-size:1.5rem;font-weight:800}
.lfoot{margin-top:20px;position:sticky;bottom:calc(env(safe-area-inset-bottom) + 8px)}
.fb{border-radius:22px;padding:16px;margin:0 -4px}
.fb.ok{background:var(--ok-bg)} .fb.bad{background:var(--bad-bg)}
.fb h3{font-size:1.4rem;margin-bottom:4px}
.fb.ok h3{color:var(--ok)} .fb.bad h3{color:var(--bad)}
.fb .sol{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-weight:600}
.fb .sol button{font-size:1.3rem}
.bubble{display:flex;align-items:flex-end;gap:10px;margin-bottom:16px}
.bubble svg{width:64px;height:64px;flex:none}
.bubble p{background:var(--card);border-radius:18px 18px 18px 4px;padding:10px 14px;margin:0;font-weight:600;box-shadow:var(--shadow)}

/* done */
.done{text-align:center;padding-top:20px}
.done svg.pip{width:140px;height:140px}
.done h1{font-size:2.4rem;margin:8px 0}
.sticker-new{font-size:6rem;animation:pop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(0) rotate(-30deg)}100%{transform:scale(1) rotate(0)}}
.album{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.album div{aspect-ratio:1;border-radius:16px;background:var(--card);display:grid;place-items:center;font-size:2rem;box-shadow:var(--shadow)}
.album div.no{background:rgba(255,255,255,.5);color:#C9C3B6;font-family:var(--fh);font-weight:800;font-size:1.4rem;box-shadow:none;border:2px dashed #DCD2C0}

/* forms */
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:#fff}
.switch{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.switch input{width:22px;height:22px;accent-color:var(--teal)}
.list{display:grid;gap:8px}
.li{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:14px;padding:10px 12px;box-shadow:var(--shadow)}
.li .grow b{display:block}
.avpick{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.avpick button{width:42px;height:42px;border-radius:12px;background:var(--bg);font-size:1.4rem}
.avpick button.on{background:var(--sun)}

#fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
#fx span{position:absolute;top:-40px;font-size:1.8rem;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}

body.kid .prompt,body.kid .kicker{text-align:center}
body.kid .kicker{font-size:1.5rem}

/* KI-Gespräch */
.talkcard{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--plum);color:#fff;border-radius:22px;padding:16px 18px;margin-top:14px;box-shadow:0 5px 0 #5a33b3}
.talkcard:active{transform:translateY(3px);box-shadow:0 2px 0 #5a33b3}
.talkcard .tic{font-size:2rem;width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.talkcard b{display:block;font-family:var(--fh);font-size:1.25rem}
.talkcard small{opacity:.85}
.talkcard .chev{color:#fff}
.talk{display:flex;flex-direction:column;flex:1}
.talk .top h3{font-size:1.15rem}
.chat{flex:1;display:flex;flex-direction:column;gap:12px;padding-bottom:12px}
.msg{display:flex;gap:8px;align-items:flex-end;max-width:92%}
.msg.me{align-self:flex-end;justify-content:flex-end}
.mav svg{width:38px;height:38px}
.mbody{background:var(--card);border-radius:20px 20px 20px 6px;padding:12px 14px;box-shadow:var(--shadow)}
.msg.me .mbody{background:var(--sky);color:#fff;border-radius:20px 20px 6px 20px}
.mbody p{margin:0;font-size:1.05rem}
.mbody p.de{color:var(--muted);font-size:.9rem;margin-top:6px}
.mtools{display:flex;gap:12px;margin-top:8px;font-size:.85rem;color:var(--muted)}
.mtools button{color:var(--muted);font-weight:600}
.better{margin-top:10px;background:#fff;color:var(--ink);border-radius:14px;padding:9px 11px;display:flex;flex-direction:column;gap:3px}
.better b{color:var(--ok)}
.better .small{color:var(--muted)}
.better button{align-self:flex-start}
.tfoot{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 18px);padding:18px 0 calc(env(safe-area-inset-bottom) + 6px)}
body.kid .tfoot{background:linear-gradient(transparent,#FFF3D6 18px)}
.talkbar{display:flex;align-items:center;justify-content:center;gap:26px}
.mic.small{width:84px;height:84px;font-size:2.3rem;margin:0}
.mic:disabled{opacity:.6}
.tbtn{width:54px;height:54px;border-radius:50%;background:var(--card);box-shadow:var(--shadow);font-size:1.4rem}
.tbtn:disabled{opacity:.35}
.tinput{padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:#fff;min-width:0}
.sugg{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.sugg button{background:var(--card);border-radius:14px;padding:10px 12px;text-align:left;box-shadow:var(--shadow);font-weight:500}
.terr{background:var(--bad-bg);color:var(--bad);border-radius:14px;padding:10px 12px;margin:0 0 10px;font-size:.9rem}
.summary p{margin:8px 0 14px}
.dots{display:flex;gap:5px;padding:4px 0}
.dots i{width:8px;height:8px;border-radius:50%;background:#C9C3B6;animation:blink 1s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{50%{opacity:.25}}