/*
 * Grüezi — the design system.
 *
 * Both faces ship inside the APK. Nothing is fetched at runtime — an offline
 * app that falls back to Georgia and Roboto at 07:05 has lost the thing it is.
 * Arimo is metric-compatible with Helvetica; Instrument Serif is the display
 * face, because the German word is the hero of every card.
 */
@font-face { font-family:'Arimo'; font-style:normal; font-weight:100 900; font-display:swap; src:url('./fonts/Arimo-Variable.woff2') format('woff2-variations'); }
@font-face { font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:block; src:url('./fonts/InstrumentSerif-Regular.ttf') format('truetype'); }
@font-face { font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:block; src:url('./fonts/InstrumentSerif-Italic.ttf') format('truetype'); }

/* ── tokens ─────────────────────────────────────────────────────────────
 * One palette, two schemes. Warm paper by day; deep ink at night, because a
 * bedtime review on a white screen undoes the sleep it is meant to feed.
 * Semantic colours are fixed to meaning: forest = act/learn, flame = streak,
 * gold = XP, and der/die/das keep their three hues in both schemes.
 */
:root {
  color-scheme: light;
  --paper:#F4EFE6; --paper-2:#ECE6DA; --card:#FFFDF8; --card-2:#F7F3EA;
  --ink:#1E221E; --ink-2:#3B403A; --muted:#676D63; --faint:#9AA095; --line:#E2DDD0; --line-2:#D3CDBF;
  --accent:#2E5A47; --accent-ink:#F6F5ED; --accent-soft:#E3EBDB; --accent-soft-2:#CFDCC4; --accent-deep:#213F33;
  --flame:#D9622B; --flame-soft:#FBE8DC; --gold:#D4A03A; --gold-soft:#FBF0D6;
  --der:#3D6E9E; --die:#B3453A; --das:#3A7A58;
  --ok:#2F6B45; --ok-soft:#E4F0DA; --warn:#8E4A1F; --warn-soft:#FAEBDD;
  --ground:var(--paper);
  --shadow-1:0 1px 2px rgba(30,34,30,.05), 0 6px 18px rgba(30,34,30,.06);
  --shadow-2:0 2px 6px rgba(30,34,30,.08), 0 16px 40px rgba(30,34,30,.12);
  --r-s:12px; --r-m:18px; --r-l:26px; --r-pill:999px;
  --fast:140ms; --base:240ms; --slow:420ms;
  --ease:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --serif:'Instrument Serif',Georgia,serif; --sans:'Arimo','Helvetica Neue',Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,'Roboto Mono',monospace;
  --green:var(--accent); --orange:var(--flame);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --paper:#121513; --paper-2:#181C19; --card:#1C211D; --card-2:#222824;
  --ink:#F0EDE4; --ink-2:#D5D2C9; --muted:#9BA196; --faint:#6E756B; --line:#2B312C; --line-2:#394038;
  --accent:#8DC1A4; --accent-ink:#0F1A14; --accent-soft:#213229; --accent-soft-2:#2B4234; --accent-deep:#A9D6BC;
  --flame:#F07A45; --flame-soft:#3A2519; --gold:#E8B85A; --gold-soft:#3A2F16;
  --der:#7FB0E0; --die:#E37E72; --das:#77C094;
  --ok:#8DC1A4; --ok-soft:#213229; --warn:#E8A874; --warn-soft:#3A2A1E;
  --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
  --shadow-2:0 2px 6px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { color-scheme: dark;
  --paper:#121513; --paper-2:#181C19; --card:#1C211D; --card-2:#222824;
  --ink:#F0EDE4; --ink-2:#D5D2C9; --muted:#9BA196; --faint:#6E756B; --line:#2B312C; --line-2:#394038;
  --accent:#8DC1A4; --accent-ink:#0F1A14; --accent-soft:#213229; --accent-soft-2:#2B4234; --accent-deep:#A9D6BC;
  --flame:#F07A45; --flame-soft:#3A2519; --gold:#E8B85A; --gold-soft:#3A2F16;
  --der:#7FB0E0; --die:#E37E72; --das:#77C094;
  --ok:#8DC1A4; --ok-soft:#213229; --warn:#E8A874; --warn-soft:#3A2A1E;
  --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
  --shadow-2:0 2px 6px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.5);
} }

/* ── ground ─────────────────────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; }
html, body { box-sizing:border-box; margin:0; padding:0; height:100%; overflow:hidden; background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; overscroll-behavior:none; }
#app { box-sizing:border-box; height:100dvh; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background:var(--paper); }
#app > .screen { box-sizing:border-box; height:100%; display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; background:var(--paper); font-family:var(--sans); }
[data-tap] { cursor:pointer; user-select:none; }
[data-tap]:active { filter:brightness(.96); transform:scale(.985); }
[data-tap], [data-tap]:active { transition:transform .09s ease, filter .09s ease; }
[aria-disabled="true"] { opacity:.45; pointer-events:none; }
.scroll { overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.scroll::-webkit-scrollbar { width:0; height:0; }
:focus { outline:none; }
:focus-visible { outline:3px solid var(--flame); outline-offset:3px; border-radius:6px; }
::selection { background:var(--accent-soft-2); }

@keyframes chFade { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
@keyframes chPulse { 0%,100% { opacity:.35 } 50% { opacity:.9 } }
@keyframes chBar { 0% { transform:scaleY(.25) } 100% { transform:scaleY(1) } }
@keyframes chPop { 0% { transform:scale(.92); opacity:0 } 60% { transform:scale(1.02); opacity:1 } 100% { transform:none } }
@keyframes chShake { 0%,100% { transform:none } 20% { transform:translateX(-6px) } 40% { transform:translateX(6px) } 60% { transform:translateX(-4px) } 80% { transform:translateX(4px) } }
@keyframes chRise { 0% { opacity:0; transform:translate(-50%,0) scale(.8) } 20% { opacity:1; transform:translate(-50%,-14px) scale(1.05) } 100% { opacity:0; transform:translate(-50%,-64px) scale(1) } }
@keyframes chFall { 0% { transform:translate3d(0,-10vh,0) rotate(0) } 100% { transform:translate3d(var(--drift),105vh,0) rotate(var(--rot)) } }
@keyframes chFlame { 0%,100% { transform:scale(1) rotate(-2deg) } 50% { transform:scale(1.08) rotate(2deg) } }
@keyframes chRing { from { stroke-dashoffset:var(--from) } to { stroke-dashoffset:var(--to) } }
@keyframes chShimmer { 0% { background-position:-200% 0 } 100% { background-position:200% 0 } }
.fade-in { animation:chFade var(--base) var(--ease) both; }
.pop { animation:chPop var(--base) var(--spring) both; }
.shake { animation:chShake var(--slow) var(--ease) both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ── the learning surface ───────────────────────────────────────────── */
.learning-screen { color:var(--ink); }
#app > .screen.learning-screen { background:var(--paper); overflow:hidden; }
.learning-screen *, .learning-screen *::before, .learning-screen *::after { box-sizing:border-box; }
.learning-screen button, .learning-screen input { font:inherit; color:inherit; }
.learning-screen button { cursor:pointer; touch-action:manipulation; }
.learning-screen button:disabled { cursor:default; opacity:.5; }
.learning-screen button:focus-visible, .learning-screen input:focus-visible, .learning-screen summary:focus-visible { outline:3px solid var(--flame); outline-offset:3px; }
.learning-screen button { transition:background var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.learning-screen button:active:not(:disabled) { transform:translateY(1px) scale(.99); }
.learning-screen h1 { font:400 clamp(36px,6vw,54px)/1.02 var(--serif); letter-spacing:-.025em; margin:14px 0 12px; }
.learning-screen h1 em { font-weight:400; font-style:italic; color:var(--accent); }
.learning-screen h2 { font-size:19px; line-height:1.3; letter-spacing:-.02em; margin:0; }
.learning-screen p { line-height:1.55; }
.learning-screen select { font:inherit; max-width:100%; background:var(--card); color:var(--ink); border:1.5px solid var(--line-2); border-radius:var(--r-s); padding:12px; }
.learning-screen a { color:var(--accent); text-underline-offset:3px; }
.learning-screen h1, .learning-screen h2, .learning-screen h3, .learning-screen button { overflow-wrap:anywhere; }

.learn-topbar { width:100%; max-width:780px; align-self:center; flex:none; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 22px; min-height:68px; }
.learn-brand { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:700; letter-spacing:.12em; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--accent); color:var(--accent-ink); font:italic 24px/1 var(--serif); letter-spacing:-.08em; padding-right:3px; box-shadow:var(--shadow-1); }
.brand-tag { color:var(--muted); font-size:11px; font-weight:400; letter-spacing:0; border-left:1px solid var(--line-2); padding-left:12px; margin-left:2px; }
.topbar-right { display:flex; align-items:center; gap:8px; }
.profile-button { width:38px; height:38px; border-radius:50%; background:var(--accent-soft); border:1px solid var(--accent-soft-2); color:var(--accent); font-size:12px!important; font-weight:700!important; flex:none; }
.home-content { width:100%; max-width:780px; align-self:center; padding:8px 22px 26px; overflow-y:auto; flex:1; min-height:0; scrollbar-width:thin; }
.eyebrow { font-size:10.5px; font-weight:700; letter-spacing:.14em; color:var(--accent); line-height:1.5; text-transform:uppercase; }
.welcome-line, .section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.quiet-label { color:var(--muted); font-size:12px; }
.home-intro { color:var(--muted); font-size:15px; margin:0 0 22px; }
.home-content > section + section { margin-top:22px; }

/* ── streak, xp, shields ───────────────────────────────────────────── */
.streak-chip { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:6px 12px 6px 9px; border-radius:var(--r-pill); background:var(--flame-soft); color:var(--flame); font-weight:700; font-size:13px; border:1px solid transparent; }
.streak-chip .flame { display:inline-block; font-size:16px; line-height:1; animation:chFlame 2.4s ease-in-out infinite; transform-origin:50% 90%; }
.streak-chip.cold { background:var(--paper-2); color:var(--muted); }
.streak-chip.cold .flame { animation:none; filter:grayscale(1); opacity:.6; }
.xp-pill { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:6px 12px; border-radius:var(--r-pill); background:var(--gold-soft); color:#7A5A16; font-weight:700; font-size:13px; }
html[data-theme="dark"] .xp-pill { color:var(--gold); }
.shield-row { display:inline-flex; gap:4px; align-items:center; color:var(--muted); font-size:12px; }
.shield-row i { display:inline-block; width:12px; height:14px; border-radius:3px 3px 6px 6px; background:var(--line-2); }
.shield-row i.full { background:var(--accent); }
.hero .shield-row i { background:rgba(255,255,255,.22); }
.hero .shield-row i.full { background:#fff; }

/* ── the hero: goal ring ──────────────────────────────────────────── */
.hero { position:relative; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; padding:22px; border-radius:var(--r-l); background:linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%); color:var(--accent-ink); box-shadow:var(--shadow-2); overflow:hidden; margin-top:14px; }
html[data-theme="dark"] .hero { background:linear-gradient(135deg, #23433A 0%, #17302A 100%); color:#EEF4EA; }
.hero::after { content:''; position:absolute; right:-60px; top:-70px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.07); pointer-events:none; }
.hero .ring { width:112px; height:112px; position:relative; flex:none; }
.hero .ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.hero .ring circle { fill:none; stroke-width:9; stroke-linecap:round; }
.hero .ring .track { stroke:rgba(255,255,255,.18); }
.hero .ring .bar { stroke:var(--gold); stroke-dasharray:var(--c); stroke-dashoffset:var(--to); animation:chRing 1.1s var(--ease) both; filter:drop-shadow(0 0 6px rgba(232,184,90,.45)); }
.hero .ring.done .bar { stroke:#F3D27A; }
.hero .ring-label { position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.hero .ring-label b { display:block; font:700 24px/1 var(--sans); letter-spacing:-.03em; }
.hero .ring-label span { display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.75; margin-top:4px; }
.hero-copy { min-width:0; position:relative; }
.hero-copy .eyebrow { color:rgba(255,255,255,.7); }
.hero-copy h2 { font:400 clamp(26px,5vw,34px)/1.1 var(--serif); margin:6px 0 8px; color:inherit; }
.hero-copy p { margin:0; font-size:14px; opacity:.85; max-width:420px; }
.hero-actions { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:4px; position:relative; }
.hero .learn-primary { flex:1 1 220px; margin:0; background:var(--card); color:var(--accent-deep); box-shadow:0 6px 18px rgba(0,0,0,.18); }
html[data-theme="dark"] .hero .learn-primary { color:#17302A; }
.hero .learn-primary:hover { transform:translateY(-1px); }
.hero-meta { display:flex; flex-wrap:wrap; gap:8px 14px; font-size:12px; opacity:.85; }
.hero-meta b { font-size:14px; }
.week-dots { display:flex; gap:6px; align-items:center; }
.week-dots i { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:9px; font-weight:700; background:rgba(255,255,255,.14); color:rgba(255,255,255,.7); border:1.5px solid transparent; }
.week-dots i.on { background:var(--gold); color:#3A2A10; }
.week-dots i.shield { background:rgba(255,255,255,.3); color:#fff; }
.week-dots i.today { border-color:#fff; }
.hero-banner { grid-column:1 / -1; font-size:13px; padding:10px 14px; border-radius:var(--r-s); background:rgba(255,255,255,.14); position:relative; }

/* ── mission list & cards ───────────────────────────────────────────── */

.mission-list { display:grid; gap:10px; margin-top:16px; }
.mission { display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:16px 18px; border-radius:var(--r-m); background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-1); }
.mission:hover { border-color:var(--accent-soft-2); }
.mission .icon { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:var(--accent-soft); color:var(--accent); flex:none; font-size:20px; }
.mission.night .icon { background:#2A2F3D; color:#F4E7C0; }
.mission.due .icon { background:var(--flame-soft); color:var(--flame); }
.mission.cards .icon { background:var(--gold-soft); color:#7A5A16; }
.mission .copy { flex:1; min-width:0; }
.mission .copy strong { display:block; font-size:15px; }
.mission .copy span { display:block; color:var(--muted); font-size:12.5px; margin-top:3px; }
.mission .count { font:400 26px/1 var(--serif); color:var(--accent); min-width:32px; text-align:right; }
.mission .count small { display:block; font:600 9px/1.4 var(--sans); letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.mission.done { opacity:.7; }
.mission.done .icon { background:var(--ok-soft); color:var(--ok); }

.daily-card { color:var(--accent-ink); background:var(--accent-deep); border-radius:var(--r-l); padding:24px; margin-top:22px; box-shadow:var(--shadow-2); }
html[data-theme="dark"] .daily-card { background:#213A31; color:#EEF4EA; }
.daily-top { display:flex; justify-content:space-between; gap:8px; align-items:center; font-size:11px; opacity:.8; }
.daily-badge { font-size:9px; font-weight:700; letter-spacing:.13em; }
.daily-card h2 { font:400 34px/1.12 var(--serif); margin:20px 0 8px; }
.daily-card > p { opacity:.85; font-size:14px; margin:0; max-width:480px; }
.session-recipe { display:flex; flex-wrap:wrap; gap:0; margin:20px 0; font-size:12px; opacity:.9; }
.session-recipe span { padding:0 15px; border-right:1px solid rgba(255,255,255,.2); }
.session-recipe span:first-child { padding-left:0; }
.session-recipe span:last-child { border:0; }
.session-recipe b { font-size:16px; margin-right:3px; }
.learn-primary { width:100%; min-height:56px; padding:15px 20px; display:flex; align-items:center; justify-content:center; gap:14px; border:0; border-radius:16px; background:var(--accent); color:var(--accent-ink); font-weight:700!important; font-size:15px!important; box-shadow:var(--shadow-1); }
.learn-primary:hover:not(:disabled) { filter:brightness(1.05); }
.learn-primary.light { background:var(--accent-soft); color:var(--accent-deep); justify-content:space-between; }
.daily-footnote { display:block; text-align:center; opacity:.7; font-size:10px; margin-top:12px; }
.time-selector { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 2px; font-size:12px; color:var(--muted); }
.time-selector > div { display:flex; padding:4px; background:var(--paper-2); border-radius:12px; gap:2px; }
.time-selector button { border:0; background:transparent; color:var(--ink-2); border-radius:9px; min-height:36px; padding:6px 12px; font-size:12px; }
.time-selector button[aria-pressed="true"] { background:var(--card); color:var(--accent); box-shadow:var(--shadow-1); font-weight:700; }
.home-stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; margin:1px 0 12px; }
.home-stats > * { text-align:center; border:0; border-right:1px solid var(--line); background:transparent; padding:0 7px; color:var(--ink); }
.home-stats > :last-child { border:0; }
.home-stats strong { display:block; font-size:25px; letter-spacing:-.03em; font-weight:500; }
.home-stats span { display:block; margin-top:5px; color:var(--muted); font-size:11px; }
.today-note { color:var(--accent); font-size:12px; }
.useful-phrase { border:1px solid var(--line); background:var(--card-2); border-radius:var(--r-m); padding:20px; margin:22px 0; }
.section-heading { margin:0 0 16px; }
.section-heading h2 { font-size:16px; }
.german-sentence { font:400 30px/1.2 var(--serif); margin:18px 0 12px; overflow-wrap:anywhere; }
.meaning { font-size:15px; color:var(--ink-2); margin:8px 0 12px; }
.meaning > span, .pronunciation > span { display:block; text-transform:uppercase; font:700 9px/1.4 var(--sans); letter-spacing:.13em; color:var(--muted); margin:0 0 4px; }
.audio-actions { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 4px; }
.audio-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:9px 14px; border:1px solid var(--accent-soft-2); border-radius:var(--r-s); background:var(--accent-soft); color:var(--accent-deep); font-size:12px!important; font-weight:600!important; }
.audio-button.slow { background:transparent; color:var(--muted); border-color:var(--line-2); }
.audio-button[aria-busy="true"] { opacity:.7; }
.audio-notice { font-size:12px; color:var(--warn); background:var(--warn-soft); border-radius:10px; padding:12px; }
.text-button { color:var(--accent); background:transparent; border:0; padding:13px 4px; min-height:44px; font-size:13px!important; font-weight:600!important; }
.level-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:18px 0; }
.level-tabs button { border:1px solid var(--line); background:var(--card); border-radius:var(--r-s); color:var(--muted); padding:11px 3px; min-height:64px; font-size:15px; font-weight:700; }
.level-tabs button small { display:block; font-size:10px; font-weight:400; margin-top:5px; }
.level-tabs button[aria-pressed="true"] { color:var(--accent-deep); background:var(--accent-soft); border-color:var(--accent); }
.chapter-list { display:flex; flex-direction:column; gap:8px; }
.chapter-row { display:flex; align-items:center; text-align:left; width:100%; gap:14px; border:1px solid var(--line); background:var(--card); border-radius:var(--r-m); padding:16px; }
.chapter-row:hover:not(:disabled) { border-color:var(--accent-soft-2); box-shadow:var(--shadow-1); }
.chapter-number { font:italic 23px var(--serif); color:var(--faint); min-width:26px; }
.chapter-copy { flex:1; min-width:0; }
.chapter-copy strong { display:block; font-size:14px; line-height:1.3; }
.chapter-copy > span:not(.chapter-bar) { display:block; font-size:12px; color:var(--muted); margin:4px 0 10px; }
.chapter-bar { display:block; background:var(--paper-2); height:4px; border-radius:5px; overflow:hidden; }
.chapter-bar > span { display:block; height:100%; background:var(--accent); border-radius:5px; transition:width var(--slow) var(--ease); }
.chapter-count { color:var(--muted); font-size:11px; text-align:right; }
.chapter-count > span { display:block; font-size:20px; margin-top:10px; color:var(--accent); }
.library-footnote { font-size:11px; text-align:center; color:var(--muted); margin:26px 0 10px; }

/* nav */
.learn-nav { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); width:100%; max-width:780px; align-self:center; flex:none; padding:8px 10px calc(10px + env(safe-area-inset-bottom)/2); border-top:1px solid var(--line); background:var(--paper); backdrop-filter:blur(12px); }
.learn-nav button { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; border:0; background:transparent; color:var(--muted); min-height:52px; font-size:10px!important; border-radius:14px; position:relative; }
.learn-nav button[aria-current="page"] { color:var(--accent); font-weight:700; background:var(--accent-soft); }
.learn-nav button[aria-current="page"] svg { transform:translateY(-1px) scale(1.08); }
.learn-nav svg { transition:transform var(--base) var(--spring); }
.learn-nav .nav-badge { position:absolute; top:6px; right:calc(50% - 20px); min-width:16px; height:16px; padding:0 4px; border-radius:var(--r-pill); background:var(--flame); color:#fff; font:700 10px/16px var(--sans); }

/* study / practice */
.study-card { border:1px solid var(--line); background:var(--card); border-radius:var(--r-l); padding:24px; margin:22px 0; box-shadow:var(--shadow-1); }
.german-word { font:400 44px/1.12 var(--serif); margin:18px 0; overflow-wrap:anywhere; }
.article.der, .article-choice.der { color:var(--der); } .article.die, .article-choice.die { color:var(--die); } .article.das, .article-choice.das { color:var(--das); }
.pronunciation { color:var(--warn); font:500 14px/1.5 var(--mono); margin:16px 0; }
.word-note { font-size:12px; color:var(--muted); padding-top:12px; margin-bottom:0; }
.learning-tip { background:var(--accent-soft); border-left:3px solid var(--accent); border-radius:0 var(--r-s) var(--r-s) 0; padding:16px 18px; font-size:13px; line-height:1.6; color:var(--ink-2); margin:20px 0; }
.learning-tip p { margin:7px 0 0; }
.practice-header { display:flex; align-items:center; gap:14px; padding:18px 22px; width:100%; max-width:660px; align-self:center; flex:none; }
.icon-button { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--line-2); border-radius:50%; background:var(--card); color:var(--muted); font-size:22px!important; flex:none; }
.practice-progress { height:10px; border-radius:8px; background:var(--paper-2); overflow:hidden; flex:1; position:relative; }
.practice-progress span { display:block; height:100%; border-radius:8px; background:linear-gradient(90deg, var(--accent), var(--accent-soft-2)); transition:width var(--slow) var(--spring); }
.practice-progress span::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); background-size:200% 100%; animation:chShimmer 2.2s linear infinite; }
.step-count { font-size:12px; color:var(--muted); white-space:nowrap; }
.combo { display:inline-flex; align-items:center; gap:5px; min-height:30px; padding:4px 10px; border-radius:var(--r-pill); background:var(--flame-soft); color:var(--flame); font-weight:700; font-size:12px; white-space:nowrap; }
.combo.hot { background:var(--flame); color:#fff; }
.practice-content { width:100%; max-width:660px; align-self:center; padding:16px 22px 30px; flex:1; min-height:0; overflow-y:auto; }
.practice-content h1 { font-size:42px; }
.practice-footer { width:100%; max-width:660px; align-self:center; padding:14px 22px calc(12px + env(safe-area-inset-bottom)/2); border-top:1px solid var(--line); flex:none; text-align:center; background:var(--paper); }
.practice-footer p { color:var(--muted); font-size:11px; margin:10px 0 0; }
.recall-prompt { background:var(--card); border:1px solid var(--line); padding:22px; border-radius:var(--r-m); margin:22px 0; box-shadow:var(--shadow-1); }
.recall-prompt > p { font-size:26px; color:var(--ink); margin:10px 0 0; font-family:var(--serif); }
.input-label { display:block; font-size:12px; color:var(--ink-2); font-weight:600; margin:20px 0 10px; }
.answer-input { box-sizing:border-box; display:block; width:100%; min-height:56px; background:var(--card); border:1.5px solid var(--line-2); border-radius:14px; padding:15px; color:var(--ink); font-size:17px!important; transition:border-color var(--fast), box-shadow var(--fast); }
.answer-input:focus { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); outline:none; }
.input-help { font-size:12px; color:var(--muted); margin:12px 0; }
.answer-feedback { border-radius:var(--r-m); padding:20px; margin:22px 0 0; background:var(--warn-soft); color:var(--warn); border:1px solid transparent; animation:chPop var(--base) var(--spring) both; }
.answer-feedback.correct { background:var(--ok-soft); color:var(--ok); }
.answer-feedback > strong { font-size:15px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.answer-feedback > strong .xp-pill { min-height:26px; padding:3px 9px; font-size:12px; }
.answer-feedback > p { font-size:13px; margin:10px 0; color:var(--ink-2); }
.answer-feedback > .feedback-answer { font:400 29px/1.15 var(--serif); color:var(--ink); }
.answer-feedback small { display:block; margin-top:12px; font-size:11px; }
.article-prompt { font:400 43px var(--serif); margin-top:34px; }
.article-prompt > span { color:var(--faint); margin-right:12px; }
.article-options { display:flex; gap:10px; margin:24px 0; }
.article-choice { flex:1; background:var(--card); border:1px solid var(--line-2); border-bottom-width:3px; border-radius:var(--r-m); padding:23px 10px; font-size:23px!important; font-weight:600; box-shadow:var(--shadow-1); }
.article-choice:hover:not(:disabled) { transform:translateY(-2px); }
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:22px 0; }
.learning-screen .choice { min-height:74px; padding:16px 14px; border-radius:var(--r-m); background:var(--card); border:1px solid var(--line-2); border-bottom-width:3px; font:400 22px/1.2 var(--serif); color:var(--ink); text-align:center; box-shadow:var(--shadow-1); overflow-wrap:anywhere; }
.choice:hover:not(:disabled) { transform:translateY(-2px); border-color:var(--accent-soft-2); }
.choice.right { background:var(--ok-soft); border-color:var(--ok); color:var(--ok); opacity:1!important; }
.choice.wrong { background:var(--warn-soft); border-color:var(--warn); color:var(--warn); opacity:1!important; animation:chShake var(--slow) var(--ease) both; }
.choice kbd { display:inline-block; font:600 10px/1 var(--sans); color:var(--faint); margin-right:6px; vertical-align:middle; }
.build-meaning { font-size:22px; color:var(--ink); font-family:var(--serif); }
.sentence-tray { display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start; min-height:112px; border:1.5px dashed var(--line-2); border-radius:var(--r-m); background:var(--card); padding:16px; margin-top:22px; }
.sentence-tray > span { color:var(--faint); font-size:13px; }
.token-bank { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0; }
.word-token { padding:11px 15px; min-height:46px; border:1px solid var(--line-2); border-bottom-width:3px; border-radius:12px; background:var(--card); color:var(--ink); font-size:15px!important; }
.word-token.selected { background:var(--accent-soft); border-color:var(--accent-soft-2); color:var(--accent-deep); }
.token-bank .word-token:disabled { color:transparent; background:var(--paper-2); opacity:.55; border-color:transparent; }
.recap { padding-top:30px; text-align:center; }
.recap > p { color:var(--muted); font-size:14px; }
.completion-mark { display:grid; place-items:center; width:78px; height:78px; margin:0 auto 22px; background:var(--accent); border-radius:50%; color:var(--accent-ink); font-size:36px; box-shadow:var(--shadow-2); animation:chPop var(--slow) var(--spring) both; }
.recap-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; margin:22px 0; gap:12px; }
.recap-stats strong { display:block; font-size:28px; font-weight:500; color:var(--accent); }
.recap-stats span { display:block; font-size:10px; color:var(--muted); margin-top:7px; }
.recap-xp { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:10px 0 0; }
.recap-banner { border-radius:var(--r-m); padding:16px 18px; background:var(--gold-soft); color:#5B4210; font-size:14px; margin:18px 0; text-align:left; }
html[data-theme="dark"] .recap-banner { color:var(--gold); }
.recap-banner.streak { background:var(--flame-soft); color:var(--flame); }
.recap-banner strong { display:block; font-size:16px; margin-bottom:4px; }

/* library, chips, tabs */
.library-tabs { display:flex; border-bottom:1px solid var(--line); margin:18px 0; }
.library-tabs button { flex:1; padding:14px; border:0; border-bottom:3px solid transparent; background:transparent; color:var(--muted); font-size:14px; }
.library-tabs button[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); font-weight:700; }
.filter-chips { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.filter-chips button { min-height:40px; padding:8px 16px; border:1px solid var(--line-2); background:var(--card); border-radius:var(--r-pill); color:var(--ink-2); font-size:12px; }
.filter-chips button[aria-pressed="true"] { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
.result-count { font-size:12px; color:var(--muted); margin:16px 0; }
.library-list { display:grid; grid-template-columns:1fr; gap:12px; }
.library-card { background:var(--card); border:1px solid var(--line); padding:22px; border-radius:var(--r-m); min-width:0; }
.library-card h2 { font:400 29px/1.15 var(--serif); margin:7px 0 12px; overflow-wrap:anywhere; }
.library-card h2.sentence { font-size:25px; }
.library-card details { font-size:12px; color:var(--muted); border-top:1px solid var(--line); padding-top:12px; margin-top:18px; }
.library-card summary { cursor:pointer; min-height:32px; padding:7px 0; color:var(--accent); }
.spelling { font:500 15px/1.6 var(--mono); overflow-wrap:anywhere; }
.learn-secondary { min-height:48px; width:100%; border:1px solid var(--accent-soft-2); background:var(--accent-soft); border-radius:14px; padding:12px 20px; color:var(--accent-deep); font-weight:600!important; font-size:13px!important; margin:16px 0 0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.onboarding h2 { margin-top:26px; }
.onboarding .learn-primary { margin-top:24px; }
.onboard-steps { display:flex; gap:6px; margin:10px 0 0; }
.onboard-steps i { flex:1; height:5px; border-radius:3px; background:var(--line-2); }
.onboard-steps i.on { background:var(--accent); }
.time-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0; }
.time-grid button { border:1px solid var(--line-2); background:var(--card); border-radius:var(--r-m); padding:14px 8px; min-height:74px; }
.time-grid button b { display:block; font:400 22px/1.1 var(--serif); }
.time-grid button small { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
.time-grid button[aria-pressed="true"] { background:var(--accent-soft); border-color:var(--accent); color:var(--accent-deep); }
@media (min-width:650px) { .library-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .learn-topbar { padding-left:32px; padding-right:32px; } .home-content { padding:8px 32px 32px; } }
@media (max-width:420px) { .brand-tag { display:none; } .learn-topbar { padding:14px 18px; min-height:62px; } .home-content { padding:6px 18px 22px; } .practice-content { padding:14px 18px 25px; } .practice-content h1 { font-size:38px; } .daily-card { padding:22px 20px; } .time-selector { font-size:11px; } .time-selector button { padding:6px 9px; } .section-heading .quiet-label { font-size:10px; } .study-card { padding:22px; } .german-word { font-size:40px; } .hero { padding:18px; gap:14px; } .hero .ring { width:96px; height:96px; } }

/* course */
.course-home-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-l); padding:22px; margin:22px 0; box-shadow:var(--shadow-1); }
.course-home-card > p { color:var(--muted); font-size:14px; }
.course-home-card .learn-primary { text-align:left; justify-content:space-between; }
.course-actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 14px; margin-top:8px; }
.course-badge { display:inline-block; background:var(--accent-soft); color:var(--accent-deep); padding:6px 10px; border-radius:8px; font-size:10px; font-weight:700; line-height:1.4; }
.course-badge.extension { background:var(--warn-soft); color:var(--warn); }
.course-pack, .course-spine { margin:30px 0; }
.course-pack .section-heading h2 { margin-top:6px; }
.course-pack > .quiet-label { margin-bottom:16px; }
.lesson-state { font-size:10px; color:var(--muted); line-height:1.5; text-align:right; max-width:78px; flex-shrink:0; }
.chapter-row.is-selected { border-color:var(--accent); background:var(--accent-soft); }
.chapter-row .priority-label { color:var(--warn)!important; font-weight:600; }
.lesson-heading { margin-top:28px; }
.lesson-heading h1 { font-size:clamp(34px,5vw,48px); }
.source-note { font-size:11px; line-height:1.6; color:var(--muted); background:var(--paper-2); padding:14px; border-radius:var(--r-s); }
.course-section-card { margin:18px 0; padding:22px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-m); }
.section-letter { display:inline-grid; place-items:center; width:32px; height:32px; background:var(--accent); color:var(--accent-ink); border-radius:10px; font-weight:700; margin-bottom:14px; }
.course-list { padding-left:20px; line-height:1.7; font-size:14px; }
.course-list li + li { margin-top:6px; }
.course-detail { border-top:1px solid var(--line); padding:14px 0; font-size:14px; }
.course-detail summary { cursor:pointer; min-height:44px; padding:10px 0; font-weight:600; color:var(--accent); }
.course-detail summary span { display:block; font-size:12px; font-weight:400; color:var(--muted); margin:6px 0 0; }
.course-detail .german-sentence { font-size:26px; }
.competency { display:flex; gap:12px; align-items:flex-start; margin-top:10px; min-height:44px; padding:12px 0; font-size:13px; line-height:1.6; cursor:pointer; border-top:1px solid var(--line); }
.competency input { width:20px; height:20px; margin:1px 0; flex-shrink:0; accent-color:var(--accent); }
.extension-card { padding:24px; background:var(--warn-soft); border:1px solid transparent; border-radius:var(--r-m); margin:22px 0; }
.extension-card h2 { margin-top:15px; }
.short-words { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.short-words h3 { margin:0; font-size:20px; }
.course-message { background:var(--warn-soft); border:1px solid transparent; border-radius:var(--r-s); padding:14px; font-size:14px; color:var(--warn); }
.diagnostic-score { font:400 60px var(--serif); color:var(--accent); margin:20px 0; }
.learning-art { margin:12px 0; overflow:hidden; border-radius:14px; background:var(--paper-2); max-width:100%; }
.learning-art img { display:block; width:100%; height:auto; object-fit:contain; }
.learning-art-card { width:min(300px, 48%); float:right; margin:0 0 18px 24px; }
.learning-art-thumb { flex:0 0 84px; width:84px; margin:0; }
.library-card > .learning-art-thumb { float:right; margin:0 0 12px 12px; }
.library-card > .learning-art-card { float:none; width:min(300px, 100%); margin:0 0 16px; }
.learning-art-state { width:220px; margin:18px auto; }
.learning-art-scene { width:min(100%, 360px); margin:20px auto; aspect-ratio:2/3; }
.learning-art-scene img { width:100%; height:100%; object-fit:contain; }
.lesson-heading::after, .study-card::after, .library-card::after, .course-section-card::after, .extension-card::after { content:''; display:table; clear:both; }
.lesson-heading > .learning-art-card { float:none; width:300px; margin:18px 0; }
@media (max-width:600px) { .learning-art-card { width:min(210px, 58%); margin-left:16px; } .learning-art-thumb { flex-basis:76px; width:76px; } .chapter-row .learning-art-thumb { flex-basis:56px; width:56px; } .learning-art-state { width:min(230px, 78vw); } .lesson-heading > .learning-art-card { width:min(240px, 72vw); } .course-list, .course-detail, .competency { font-size:16px; } }
.quiz-choices { display:grid; gap:10px; margin:22px 0 0; }
.quiz-choices .learn-secondary { margin:0; }
.course-content > .learn-primary { margin-top:22px; }
.course-content .study-card h3 { font-size:15px; margin-top:20px; }
.learn-nav span { white-space:nowrap; }
@media (max-width:400px) { .learn-nav span { font-size:9.5px; letter-spacing:-.01em; } }
@media (max-width:360px) { .chapter-row { padding:13px; gap:10px; } .lesson-state { max-width:58px; } .learn-nav { padding-left:6px; padding-right:6px; } .course-section-card, .extension-card, .course-home-card { padding:18px; } .daily-top, .time-selector { flex-wrap:wrap; } .short-words { grid-template-columns:minmax(0,1fr); } .learning-screen .choice { font-size:19px; min-height:64px; padding:12px 10px; } }

/* memory cards */
.cards-content .daily-card h2 { font-size:32px; }
.cards-filter-heading { margin-top:28px; }
.card-previews { display:grid; grid-template-columns:1fr; gap:10px; }
.card-preview { background:var(--card); border:1px solid var(--line); border-radius:var(--r-m); padding:18px 20px; }
.card-preview h2 { font-size:16px; margin:8px 0 8px; line-height:1.35; }
.card-preview .quiet-label { margin:0; font-size:11px; }
.memory-card { display:flex; flex-direction:column; justify-content:center; gap:18px; width:100%; min-height:220px; margin:20px 0 0; padding:30px 26px; text-align:left; border:1px solid var(--line); border-radius:var(--r-l); background:var(--card); box-shadow:var(--shadow-2); color:var(--ink); transition:transform var(--base) var(--spring), box-shadow var(--base); }
.memory-card:hover:not(:disabled) { transform:translateY(-2px); }
.memory-card .card-face { font:400 clamp(26px,4.6vw,34px)/1.18 var(--serif); letter-spacing:-.015em; }
.memory-card .card-hint { color:var(--muted); font-size:12px; line-height:1.5; }
.memory-card:disabled, .memory-card.is-flipped { opacity:1; cursor:default; background:var(--card-2); box-shadow:none; transform:none; }
.memory-card.is-flipped .card-face { font-size:clamp(21px,3.6vw,25px); }
.card-back { margin:14px 0 0; padding:22px; border-radius:var(--r-m); border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--card); animation:chPop var(--base) var(--spring) both; }
.card-explanation { margin:0 0 16px; font-size:14px; line-height:1.6; color:var(--ink-2); }
.card-back .german-sentence { margin:0 0 6px; }
.card-back .meaning { margin:0 0 4px; }
.card-rate-label { margin:0 0 12px; font-size:12px; font-weight:600; color:var(--ink-2); }
.card-ratings { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.card-ratings .learn-secondary, .card-ratings .learn-primary { margin:0; min-height:52px; padding:12px 8px; font-size:13px!important; }
@media (max-width:360px) { .memory-card { padding:24px 20px; min-height:180px; } .card-ratings { grid-template-columns:1fr; } }
@media (min-width:650px) { .card-previews { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* hints, tooltips, tables, study */
.word-hint { font:inherit; color:inherit; background:none; border:0; padding:2px; cursor:pointer; border-bottom:1px dotted currentColor; border-radius:4px; }
.word-hint:hover, .word-hint:focus-visible { background:var(--gold-soft); outline:2px solid var(--flame); outline-offset:2px; }
.learning-tooltip { position:fixed; bottom:100px; left:50%; transform:translateX(-50%); width:max-content; max-width:min(90vw,460px); z-index:100; background:var(--ink); color:var(--paper); padding:16px; border-radius:var(--r-s); font:14px/1.5 var(--sans); box-shadow:var(--shadow-2); pointer-events:none; }
.audio-actions { flex-wrap:wrap; } .voice-feedback { flex-basis:100%; font-size:13px; line-height:1.5; }
.table-scroll { overflow-x:auto; max-width:100%; margin:16px 0; } .table-scroll table { border-collapse:collapse; min-width:100%; font-size:14px; } .table-scroll td, .table-scroll th { padding:10px; border-bottom:1px solid var(--line); text-align:left; }
.study-content .chapter-row { width:100%; text-align:left; } .study-content .learn-primary, .study-content .learn-secondary { margin:8px 0; } .study-content h3 { margin-top:24px; } .study-content p { line-height:1.6; } .answer-choices { display:grid; gap:8px; } .night-caption { padding:24px; border-radius:var(--r-m); background:#22262E; color:#F4E7C0; min-height:120px; font-family:var(--serif); font-size:20px; line-height:1.4; } .study-content .filter-chips { flex-wrap:wrap; }

/* ── You: ladder, toggles ────────────────────────────────────────────── */
.ladder { display:grid; gap:14px; padding:22px; border-radius:var(--r-l); background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-1); }
.ladder-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.ladder-top h2 { font:400 34px/1 var(--serif); }
.ladder-top h2 small { display:block; font:600 11px/1.5 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
.ladder-bar { height:10px; border-radius:6px; background:var(--paper-2); overflow:hidden; }
.ladder-bar span { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg, var(--gold), var(--flame)); transition:width var(--slow) var(--ease); }
.ladder-next { font-size:12.5px; color:var(--muted); }
.ladder-rungs { display:flex; gap:4px; }
.ladder-rungs i { flex:1; height:6px; border-radius:3px; background:var(--line-2); }
.ladder-rungs i.on { background:var(--accent); }
.you-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:18px 0; }
.you-stat { padding:16px; border-radius:var(--r-m); background:var(--card); border:1px solid var(--line); }
.you-stat b { display:block; font:500 26px/1 var(--sans); letter-spacing:-.03em; }
.you-stat span { display:block; color:var(--muted); font-size:11.5px; margin-top:6px; }
/* ── Rangliste ──────────────────────────────────────────────────────── */
.podium { display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:10px; align-items:end; margin:18px 0; }
.podium-slot { position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r-m); padding:16px 10px; text-align:center; box-shadow:var(--shadow-1); }
.podium-slot.first { padding-top:26px; border-color:var(--gold); }
.podium-slot strong { display:block; font-size:13px; margin-top:4px; }
.podium-slot > span:not(.avatar) { display:block; color:var(--muted); font-size:11px; }
.podium-slot .rank { position:absolute; top:6px; left:8px; font:italic 15px var(--serif); color:var(--faint); }
.podium-slot.me { border-color:var(--accent); }
.avatar { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-weight:700; background:var(--accent-soft); color:var(--accent-deep); margin:0 auto 8px; }
.board-list { display:grid; gap:8px; margin-top:6px; }
.board-row { display:grid; grid-template-columns:28px 40px 1fr auto; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-m); background:var(--card); width:100%; text-align:left; }
.board-row.me { border-color:var(--accent); background:var(--accent-soft); }
.board-row .rank { font:italic 20px var(--serif); color:var(--faint); }
.board-row .avatar { width:36px; height:36px; margin:0; font-size:13px; }
.board-row .who { min-width:0; }
.board-row .who strong { display:block; font-size:15px; }
.board-row .who span { display:block; color:var(--muted); font-size:12px; }
.board-row .score { text-align:right; font-weight:700; }
.board-row .score small { display:block; color:var(--muted); font-weight:400; font-size:11px; }
.board-trophies { display:flex; flex-wrap:wrap; gap:6px; padding:8px 14px 14px; }
.board-trophies .trophy { min-width:90px; text-align:left; }

.trophy-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px; margin-top:14px; }
.trophy { padding:12px 10px; border-radius:var(--r-m); border:1px solid var(--line); background:var(--paper-2); text-align:center; }
.trophy b { display:block; font:400 15px/1.2 var(--serif); }
.trophy span { display:block; margin-top:5px; font-size:10.5px; line-height:1.4; color:var(--muted); }
.trophy.locked { opacity:.55; filter:grayscale(1); }
.trophy.won { background:var(--card); border-color:var(--gold); box-shadow:var(--shadow-1); }
.trophy.won.tier-2 b { color:var(--accent); }
.trophy.won.tier-3 { border-color:var(--flame); }
.trophy.won.tier-3 b { color:var(--flame); }
.recap-banner.earned { border:1px solid var(--gold); }

.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-top:1px solid var(--line); }
.toggle-row:first-of-type { border-top:0; }
.toggle-row strong { display:block; font-size:14px; }
.toggle-row span { display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.toggle { position:relative; width:52px; height:30px; border-radius:var(--r-pill); background:var(--line-2); border:0; flex:none; transition:background var(--fast); }
.toggle::after { content:''; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:var(--card); box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform var(--base) var(--spring); }
.toggle[aria-checked="true"] { background:var(--accent); }
.toggle[aria-checked="true"]::after { transform:translateX(22px); }
.seg { display:flex; padding:4px; background:var(--paper-2); border-radius:12px; gap:2px; }
.seg button { flex:1; border:0; background:transparent; color:var(--ink-2); border-radius:9px; min-height:38px; padding:6px 10px; font-size:12px; }
.seg button[aria-pressed="true"] { background:var(--card); color:var(--accent); box-shadow:var(--shadow-1); font-weight:700; }

/* ── celebration ───────────────────────────────────────────────────── */
.confetti { position:fixed; inset:0; pointer-events:none; z-index:200; overflow:hidden; }
.confetti i { position:absolute; top:0; display:block; animation:chFall 1.4s cubic-bezier(.2,.6,.4,1) both; will-change:transform; }
.xp-float { position:fixed; z-index:210; transform:translate(-50%,0); pointer-events:none; font:700 16px/1 var(--sans); color:#7A5A16; background:var(--gold-soft); padding:6px 10px; border-radius:var(--r-pill); box-shadow:var(--shadow-1); animation:chRise 1s var(--ease) both; }
html[data-theme="dark"] .xp-float { color:var(--gold); }
.goal-toast { position:fixed; left:16px; right:16px; margin:0 auto; width:max-content; bottom:calc(88px + env(safe-area-inset-bottom)); z-index:190; background:var(--ink); color:var(--paper); padding:12px 18px; border-radius:var(--r-pill); font-size:14px; font-weight:600; box-shadow:var(--shadow-2); animation:chPop var(--base) var(--spring) both; max-width:min(92vw,420px); text-align:center; }