/* Mental Math – Design-System v3 (Cyber Neon / OLED / Pastel) */

/* ---------- Tokens ---------- */
:root,
html[data-theme="neon"] {
  color-scheme: dark;
  --bg:#121214; --surface:#1A1A1E; --surface-2:#222228; --border:#2A2A30;
  --text:#F4F4F5; --muted:#A1A1AA;
  --accent:#7C3AED; --accent-text:#A78BFA; --on-accent:#FFFFFF;
  --streak:#F97316; --good:#10B981; --bad:#F43F5E; --warn:#F59E0B;
  --glow-accent:0 0 24px color-mix(in srgb, var(--accent) 45%, transparent);
  --glow-streak:0 0 28px color-mix(in srgb, var(--streak) 50%, transparent);
  --shadow-card:none;
  --glass:color-mix(in srgb, var(--surface) 72%, transparent);
  --hero-from:#7C3AED; --hero-to:#4C1D95;
}
html[data-theme="oled"] {
  color-scheme: dark;
  --bg:#000000; --surface:#161616; --surface-2:#1F1F1F; --border:#262626;
  --text:#FAFAFA; --muted:#A3A3A3;
  --accent:#06B6D4; --accent-text:#22D3EE; --on-accent:#001014;
  --streak:#F59E0B; --good:#22C55E; --bad:#EF4444; --warn:#EAB308;
  --hero-from:#06B6D4; --hero-to:#0E7490;
}
html[data-theme="pastel"] {
  color-scheme: light;
  --bg:#F8F9FA; --surface:#FFFFFF; --surface-2:#F1F3F5; --border:#E5E7EB;
  --text:#18181B; --muted:#6B7280;
  --accent:#4F46E5; --accent-text:#4338CA; --on-accent:#FFFFFF;
  --streak:#FF6B6B; --good:#059669; --bad:#DC2626; --warn:#D97706;
  --glow-accent:0 8px 24px color-mix(in srgb, var(--accent) 22%, transparent);
  --glow-streak:0 8px 24px color-mix(in srgb, var(--streak) 28%, transparent);
  --shadow-card:0 1px 2px rgba(24,24,27,.04), 0 6px 18px rgba(24,24,27,.06);
  --glass:color-mix(in srgb, var(--surface) 78%, transparent);
  --hero-from:#6366F1; --hero-to:#4338CA;
}
/* Kein data-theme (oder "system"): heller Systemmodus -> Pastel */
@media (prefers-color-scheme: light) {
  html:not([data-theme="neon"]):not([data-theme="oled"]):not([data-theme="pastel"]) {
    color-scheme: light;
    --bg:#F8F9FA; --surface:#FFFFFF; --surface-2:#F1F3F5; --border:#E5E7EB;
    --text:#18181B; --muted:#6B7280;
    --accent:#4F46E5; --accent-text:#4338CA; --on-accent:#FFFFFF;
    --streak:#FF6B6B; --good:#059669; --bad:#DC2626; --warn:#D97706;
    --glow-accent:0 8px 24px color-mix(in srgb, var(--accent) 22%, transparent);
    --glow-streak:0 8px 24px color-mix(in srgb, var(--streak) 28%, transparent);
    --shadow-card:0 1px 2px rgba(24,24,27,.04), 0 6px 18px rgba(24,24,27,.06);
    --glass:color-mix(in srgb, var(--surface) 78%, transparent);
    --hero-from:#6366F1; --hero-to:#4338CA;
  }
}
:root {
  --accent-soft:color-mix(in srgb, var(--accent) 15%, transparent);
  --good-soft:color-mix(in srgb, var(--good) 15%, transparent);
  --bad-soft:color-mix(in srgb, var(--bad) 15%, transparent);
  --warn-soft:color-mix(in srgb, var(--warn) 15%, transparent);
  --streak-soft:color-mix(in srgb, var(--streak) 15%, transparent);
  --radius:20px; --radius-md:14px; --radius-sm:10px;
  --font:system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter:16px;
  --tabbar-h:64px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
/* -soft Varianten müssen pro Theme neu aufgelöst werden (custom props erben als berechneter Wert nur wenn nicht lokal deklariert) */
html[data-theme] { --accent-soft:color-mix(in srgb, var(--accent) 15%, transparent); --good-soft:color-mix(in srgb, var(--good) 15%, transparent); --bad-soft:color-mix(in srgb, var(--bad) 15%, transparent); --warn-soft:color-mix(in srgb, var(--warn) 15%, transparent); --streak-soft:color-mix(in srgb, var(--streak) 15%, transparent); }
@media (min-width: 640px) { :root { --gutter:24px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:16px; line-height:1.5;
  overflow-x:hidden; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1, h2, h3, p { margin:0; }
a { color:inherit; text-decoration:none; }
button, input, select { font:inherit; color:inherit; }
button { -webkit-appearance:none; appearance:none; }
:focus-visible { outline:2px solid var(--accent-text); outline-offset:2px; border-radius:6px; }
[hidden] { display:none !important; }
svg { max-width:100%; }

.container { max-width:720px; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
main.container {
  padding-top:8px;
  padding-bottom:calc(var(--tabbar-h) + 40px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; gap:20px;
}
/* Fokus-Modus im Training: keine Tab-Leiste, „Weiter“ klebt unten */
body.in-play .tabbar { display:none; }
body.in-play main.container { padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px)); }
.next-btn {
  position:sticky; z-index:20; width:100%;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 0 0 6px var(--bg), var(--glow-accent, 0 8px 24px rgba(0,0,0,.3));
}

/* ---------- Topbar ---------- */
.topbar {
  position:sticky; top:0; z-index:20;
  padding-top:env(safe-area-inset-top, 0px);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.topbar-inner, .header-inner {
  max-width:720px; margin:0 auto; height:56px; padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
}
.brand { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-0.02em; font-size:1.0625rem; }
.brand-logo { flex:none; width:28px; height:28px; display:block; }
.brand-logo .logo-bg { fill:var(--accent); }
.brand-logo { color:var(--on-accent); filter:drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 55%, transparent)); }
.brand-mark { width:28px; height:28px; border-radius:8px; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; font-size:18px; line-height:1; }
.icon-btn {
  width:44px; height:44px; border-radius:50%; display:inline-grid; place-items:center; border:0; cursor:pointer;
  background:var(--surface); color:var(--muted); border:1px solid var(--border);
  transition:color 150ms, background-color 150ms, border-color 150ms, transform 150ms;
}
.icon-btn:hover { color:var(--text); border-color:var(--accent); }
.icon-btn:active { transform:scale(.94); }

/* ---------- Tab bar (floating glass) ---------- */
.tabbar {
  position:fixed; z-index:30; left:50%; transform:translateX(-50%);
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  width:min(calc(100% - 32px), 420px); height:var(--tabbar-h);
  display:flex; align-items:center; gap:4px; padding:6px;
  background:var(--glass); border:1px solid var(--border); border-radius:999px;
  -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
html[data-theme="pastel"] .tabbar { box-shadow:0 10px 30px rgba(24,24,27,.12); }
.tab {
  flex:1 1 0; min-width:0; height:100%; border-radius:999px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--muted); font-size:0.6875rem; font-weight:600; letter-spacing:.01em;
  transition:background-color 200ms var(--ease), color 200ms var(--ease), transform 150ms;
}
.tab:active { transform:scale(.96); }
.tab-icon { width:22px; height:22px; flex:none; }
.tab-label { line-height:1; }
.tab:hover { color:var(--text); }
.tab.active, .tab[aria-current="page"] { background:var(--accent); color:var(--on-accent); box-shadow:var(--glow-accent); }

/* legacy nav (alt) */
.site-header { height:56px; background:var(--bg); }
.nav { display:flex; gap:4px; }
.nav a { padding:8px 12px; border-radius:var(--radius-sm); color:var(--muted); font-size:15px; }
.nav a.active { color:var(--accent-text); font-weight:600; }

/* ---------- Typography & helpers ---------- */
.page-title { font-size:1.75rem; font-weight:800; letter-spacing:-0.03em; line-height:1.15; }
.section-title { font-size:1.0625rem; font-weight:700; letter-spacing:-0.01em; margin-bottom:12px; }
.muted { color:var(--muted); }
.small { font-size:0.875rem; }
.eyebrow { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); font-weight:700; }
.label { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); font-weight:700; }
.sub { font-size:0.8125rem; color:var(--muted); }
.big-num { font-size:2.25rem; font-weight:800; letter-spacing:-0.03em; line-height:1.05; font-variant-numeric:tabular-nums; }
.stack { display:flex; flex-direction:column; gap:12px; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.row-between { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.icon { flex:none; vertical-align:middle; }

/* ---------- Cards ---------- */
.card {
  display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow-card);
  transition:border-color 150ms, transform 150ms var(--ease), box-shadow 150ms;
}
a.card:hover, a.card:focus-visible { border-color:var(--accent); }
a.card:active { transform:scale(.985); }
.card-title { font-weight:700; }
.card-sub { color:var(--muted); font-size:0.875rem; }
.card-foot { margin-top:12px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; font-size:0.8125rem; color:var(--muted); }
.hm-legend { display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.hm-legend .hm-cell { width:10px; height:10px; }
.card-wide { padding:20px; }
.card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
@media (min-width:640px) { .grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
.banner { background:var(--accent-soft); border-color:transparent; color:var(--accent-text); font-weight:700; display:flex; justify-content:space-between; align-items:center; }
a.banner:hover { border-color:var(--accent); }

/* ---------- Bento ---------- */
.bento { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.bento > .span-2, .span-2 { grid-column:span 2; }
.tile {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow-card); min-width:0;
  display:flex; flex-direction:column; gap:4px;
}
.tile-value { font-size:1.5rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.tile-label { color:var(--muted); font-size:0.8125rem; }
.tile.good .tile-value { color:var(--good); }
.tile.warn .tile-value { color:var(--warn); }
.tile.bad .tile-value { color:var(--bad); }
a.tile { transition:border-color 150ms, transform 150ms var(--ease); }
a.tile:hover { border-color:var(--accent); }
a.tile:active { transform:scale(.985); }

.tile-streak { background:var(--surface); }
.tile-streak .icon, .tile-streak .tile-icon { color:var(--muted); width:28px; height:28px; }
.tile-streak.is-hot { border-color:color-mix(in srgb, var(--streak) 55%, var(--border)); background:linear-gradient(160deg, var(--streak-soft), var(--surface) 70%); box-shadow:var(--glow-streak); }
.tile-streak.is-hot .icon, .tile-streak.is-hot .tile-icon { color:var(--streak); animation:flicker 2.4s ease-in-out infinite; }
.tile-streak.is-hot .big-num { color:var(--streak); }
.tile-score .big-num { color:var(--accent-text); }
.tile-goal { flex-direction:row; align-items:center; gap:16px; }
.tile-goal > div { min-width:0; }

.tile-hero {
  border:0; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--hero-from), var(--hero-to));
  box-shadow:var(--glow-accent); padding:20px; gap:8px;
}
.tile-hero::after { content:''; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); pointer-events:none; }
.tile-hero .label, .tile-hero .sub { color:rgba(255,255,255,.82); }
.tile-hero .big-num, .tile-hero .page-title, .tile-hero .card-title { color:#fff; font-size:1.625rem; }
.tile-hero .btn { background:#fff; color:#2e1065; border-color:#fff; margin-top:6px; align-self:flex-start; }
.tile-hero .btn.primary { background:#fff; color:#2e1065; border-color:#fff; }
html[data-theme="oled"] .tile-hero .btn, html[data-theme="oled"] .tile-hero .btn.primary { color:#003a46; }
html[data-theme="pastel"] .tile-hero .btn, html[data-theme="pastel"] .tile-hero .btn.primary { color:#312e81; }
.tile-hero .btn:hover { filter:brightness(.96); }

/* ---------- Badges / Level ---------- */
.badge {
  display:inline-block; padding:2px 10px; border-radius:999px; font-size:0.8125rem; font-weight:700;
  font-variant-numeric:tabular-nums; background:var(--surface-2); color:var(--muted); white-space:nowrap;
}
.badge.good { background:var(--good-soft); color:var(--good); }
.badge.warn { background:var(--warn-soft); color:var(--warn); }
.badge.bad { background:var(--bad-soft); color:var(--bad); }
.badge.muted { background:var(--surface-2); color:var(--muted); }
.level-badge {
  display:inline-flex; align-items:center; gap:6px; padding:3px 12px; border-radius:999px; font-weight:800; font-size:0.8125rem;
  background:var(--accent-soft); color:var(--accent-text); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font-variant-numeric:tabular-nums; white-space:nowrap; width:fit-content;
}

/* ---------- Buttons ---------- */
.btn {
  min-height:48px; padding:0 22px; border-radius:var(--radius-md); border:1px solid var(--border);
  background:var(--surface); color:var(--text); cursor:pointer; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background-color 150ms, border-color 150ms, color 150ms, transform 120ms var(--ease), filter 150ms;
}
.btn:hover { border-color:var(--accent); }
.btn:active { transform:scale(.97); }
.btn:disabled { opacity:.5; cursor:default; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); box-shadow:var(--glow-accent); }
.btn.primary:hover { filter:brightness(1.1); }
.btn.danger { color:var(--bad); }
.btn.danger:hover { border-color:var(--bad); }
.btn-row { display:flex; gap:12px; flex-wrap:wrap; }
.btn-row .btn { flex:1 1 140px; }
.btn.small { min-height:36px; padding:0 14px; font-size:0.875rem; border-radius:var(--radius-sm); }
a.btn { text-decoration:none; }
.linkbtn {
  background:none; border:0; padding:8px 0; min-height:36px; cursor:pointer; font-weight:700; font-size:0.9375rem;
  color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; display:inline-flex; align-items:center;
}
.linkbtn:hover { filter:brightness(1.15); }

/* chips */
.chip {
  display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 12px; border-radius:999px;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--border); font-size:0.8125rem; font-weight:700; cursor:default;
  transition:background-color 150ms, color 150ms, border-color 150ms;
}
button.chip, a.chip { cursor:pointer; }
.chip.active { background:var(--accent-soft); color:var(--accent-text); border-color:var(--accent); }

/* ---------- Progress & rings ---------- */
.progress { height:6px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.progress > span, .progress > .progress-bar { display:block; height:100%; width:calc(var(--w, 0) * 1%); background:linear-gradient(90deg, var(--accent), var(--accent-text)); border-radius:999px; transition:width 300ms var(--ease); }

svg.ring { flex:none; display:block; overflow:visible; }
svg.ring.sm { width:40px; height:40px; }
svg.ring.md { width:64px; height:64px; }
svg.ring.lg { width:120px; height:120px; }
.ring-track { stroke:var(--surface-2); stroke-width:3.4; fill:none; }
.ring-value { stroke:var(--accent); stroke-width:3.4; fill:none; transition:stroke-dasharray 600ms var(--ease); filter:drop-shadow(0 0 2px color-mix(in srgb, var(--accent) 60%, transparent)); }
.ring-text { fill:var(--text); font-family:var(--font); font-weight:800; font-size:9px; font-variant-numeric:tabular-nums; }
svg.ring.sm .ring-text { font-size:10px; }
svg.ring.lg .ring-text { font-size:8px; }
svg.ring.good .ring-value { stroke:var(--good); }
svg.ring.warn .ring-value { stroke:var(--warn); }
svg.ring.bad .ring-value { stroke:var(--bad); }
svg.ring.streak .ring-value { stroke:var(--streak); }

.cat-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
@media (min-width:640px) { .cat-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
a.cat-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:16px; min-width:0;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-card);
  transition:border-color 150ms, transform 150ms var(--ease);
}
a.cat-card:hover { border-color:var(--accent); }
a.cat-card:active { transform:scale(.97); }
.cat-name { font-weight:700; line-height:1.25; }
.cat-meta { color:var(--muted); font-size:0.8125rem; }

/* ---------- Heatmap ---------- */
.heatmap { display:grid; grid-template-rows:repeat(7, 13px); grid-auto-flow:column; grid-auto-columns:13px; gap:3px; justify-content:start; max-width:100%; overflow:hidden; }
.hm-cell { width:13px; height:13px; border-radius:3px; background:var(--surface-2); display:block; }
.hm-cell[data-level="1"] { background:color-mix(in srgb, var(--good) 28%, var(--surface-2)); }
.hm-cell[data-level="2"] { background:color-mix(in srgb, var(--good) 52%, var(--surface-2)); }
.hm-cell[data-level="3"] { background:color-mix(in srgb, var(--good) 78%, var(--surface-2)); }
.hm-cell[data-level="4"] { background:var(--good); box-shadow:0 0 6px color-mix(in srgb, var(--good) 55%, transparent); }

/* ---------- Sparkline ---------- */
.spark { width:100%; height:auto; display:block; overflow:visible; }
.spark .axis { stroke:var(--border); stroke-width:1; }
.spark .line { fill:none; stroke:var(--accent-text); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.spark .area { stroke:none; }
.spark .stop-a { stop-color:var(--accent); stop-opacity:.45; }
.spark .stop-b { stop-color:var(--accent); stop-opacity:0; }
.spark .dot { fill:var(--accent-text); }
.spark text { fill:var(--muted); font-size:11px; font-family:var(--font); }
/* Legacy-Verlauf-Diagramm (Analyse, alt) bleibt als Karte lesbar */
svg.spark[viewBox^="0 0 6"], svg.spark[viewBox^="0 0 7"] { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }

.cat-history { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-card); }
.cat-history > summary { padding:12px 16px; min-height:56px; gap:12px; }
.cat-history > summary { flex-wrap:wrap; }
.cat-history > summary > span:first-of-type { flex:1; min-width:0; }
.cat-history .spark { order:3; flex-basis:100%; width:100%; height:36px; margin:2px 0 0; }
.cat-history[open] { border-color:var(--accent); }

/* ---------- Training ---------- */
.train, .play { display:flex; flex-direction:column; gap:16px; }
.train-head { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:0.9375rem; }
.back-link { color:var(--muted); padding:8px 0; min-height:44px; display:inline-flex; align-items:center; }
.back-link:hover { color:var(--text); }
.timerbar { height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.timerbar-fill { display:block; height:100%; width:calc(var(--w, 100) * 1%); background:linear-gradient(90deg, var(--good), var(--warn) 60%, var(--bad)); background-size:100vw 100%; border-radius:999px; transition:width 100ms linear; }
.task { text-align:center; padding:20px 0 8px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.task-type { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); font-weight:700; }
.question {
  font-size:clamp(2.5rem, 12vw, 3.5rem); font-weight:700; letter-spacing:-0.03em; line-height:1.1;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.question.long { font-size:clamp(1.25rem, 5vw, 1.625rem); line-height:1.4; font-weight:700; letter-spacing:-0.01em; }
.hint { color:var(--muted); font-size:0.9375rem; min-height:1.4em; }
.answer {
  display:flex; width:100%; max-width:360px; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--surface);
  overflow:hidden; transition:border-color 150ms, box-shadow 150ms;
}
.answer:focus-within { border-color:var(--accent); box-shadow:var(--glow-accent); }
.answer input {
  flex:1; min-width:0; border:0; background:transparent; padding:16px; font-size:1.875rem; font-weight:700; text-align:center;
  font-variant-numeric:tabular-nums; outline:none;
}
.answer .unit { display:grid; place-items:center; padding:0 16px; color:var(--muted); border-left:1px solid var(--border); min-width:56px; font-size:0.9375rem; white-space:nowrap; }
.answer input:disabled { color:var(--muted); }
.sign-toggle {
  flex:none; width:56px; border:0; border-right:1px solid var(--border); background:var(--surface-2); color:var(--accent-text);
  cursor:pointer; font-size:1.375rem; font-weight:800; display:grid; place-items:center; transition:background-color 150ms, transform 120ms;
}
.sign-toggle:hover { background:var(--accent-soft); }
.sign-toggle:active { transform:scale(.92); }
/* Kopf im Training: dünne Balken mit Beschriftung rechts */
.play-head { display:flex; flex-direction:column; gap:6px; }
.play-head .train-head .back-link { min-height:36px; padding:4px 0; }
.bar-row { display:flex; align-items:center; gap:10px; }
.bar-row > .progress, .bar-row > .timerbar { flex:1; height:5px; }
.bar-label, .timer {
  min-width:6.5em; text-align:right; font-size:0.8125rem; font-weight:600;
  color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap;
  transition:color 200ms;
}
.timer { color:var(--text); }
.timer.is-warn { color:var(--warn); }
.timer.is-over { color:var(--bad); animation:timer-pulse 1s ease-in-out infinite; }
.timerbar.is-warn .timerbar-fill { background:var(--warn); }
.timerbar.is-over .timerbar-fill { background:var(--bad); }
@keyframes timer-pulse { 50% { transform:scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .timer.is-over { animation:none; } }
.actions { width:100%; max-width:520px; display:flex; flex-direction:column; gap:12px; }
.actions .btn-row .btn { flex:1 1 120px; }
.intro-card { background:var(--surface); border:1px solid var(--accent); border-radius:var(--radius); padding:20px; box-shadow:var(--glow-accent); display:flex; flex-direction:column; gap:14px; text-align:left; }

/* Feedback */
.feedback { width:100%; max-width:520px; border-radius:var(--radius); padding:16px; text-align:left; display:flex; flex-direction:column; gap:6px; }
.feedback.good { background:var(--good-soft); color:var(--good); border:1px solid color-mix(in srgb, var(--good) 35%, transparent); }
.feedback.bad { background:var(--bad-soft); color:var(--bad); border:1px solid color-mix(in srgb, var(--bad) 35%, transparent); }
.feedback .fb-title { font-weight:800; font-size:1.125rem; }
.feedback .fb-detail { color:var(--text); font-size:0.9375rem; font-variant-numeric:tabular-nums; }
.feedback .fb-tip { color:var(--muted); font-size:0.875rem; }

@keyframes pop { 0% { transform:scale(.94); } 50% { transform:scale(1.05); } 100% { transform:scale(1); } }
@keyframes shake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-8px); } 40% { transform:translateX(7px); } 60% { transform:translateX(-5px); } 80% { transform:translateX(3px); } }
@keyframes flicker { 0%,100% { transform:scale(1) rotate(0); } 50% { transform:scale(1.1) rotate(-3deg); } }
.anim-pop { animation:pop 320ms var(--ease); }
.anim-shake { animation:shake 380ms ease-in-out; }

/* ---------- Stats (legacy) ---------- */
.stats { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
@media (min-width:640px) { .stats { grid-template-columns:repeat(4, minmax(0,1fr)); } }
.stats.three { grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:640px) { .stats.three { grid-template-columns:repeat(4, minmax(0,1fr)); } }

/* ---------- Lists ---------- */
.list { list-style:none; margin:0; padding:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-card); overflow:hidden; }
.list > li { display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:4px 12px; align-items:baseline; padding:12px 16px; border-top:1px solid var(--border); font-variant-numeric:tabular-nums; }
.list > li:first-child { border-top:0; }
.list .mark { font-weight:800; }
.list .mark.good { color:var(--good); }
.list .mark.bad { color:var(--bad); }
.list .item-main { overflow-wrap:anywhere; }
.list .item-meta { color:var(--muted); font-size:0.8125rem; text-align:right; white-space:nowrap; }
.list .item-sub { grid-column:2 / 4; color:var(--muted); font-size:0.875rem; }
.list .item-steps { grid-column:2 / -1; min-width:0; }

/* Bars */
.bars { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.bar-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center; }
.bar-name { font-weight:700; }
.bar-score { font-variant-numeric:tabular-nums; font-weight:700; }
.bar-meta { grid-column:1 / 3; color:var(--muted); font-size:0.8125rem; }
.bar-track { grid-column:1 / 3; height:8px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.bar-fill { display:block; height:100%; width:calc(var(--w, 0) * 1%); border-radius:999px; background:var(--accent); transition:width 400ms var(--ease); }
.bar-fill.good { background:var(--good); }
.bar-fill.warn { background:var(--warn); }
.bar-fill.bad { background:var(--bad); }

.empty { text-align:center; padding:48px 16px; display:flex; flex-direction:column; gap:12px; align-items:center; }
.notice { color:var(--warn); background:var(--warn-soft); border-radius:var(--radius-sm); padding:10px 14px; font-size:0.9375rem; }

/* ---------- Lernen & KI ---------- */
.card-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.section-actions { margin-top:12px; }
.section-sub { font-weight:400; font-size:0.875rem; }
.help-wrap { width:100%; max-width:520px; display:flex; flex-direction:column; align-items:center; }
.help { width:100%; text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:10px; }
.help[hidden], .example-solution[hidden] { display:none; }

.method { display:flex; flex-direction:column; gap:12px; text-align:left; }
.method-idea { line-height:1.55; }
.method-heading { margin:0 0 6px; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); font-weight:700; }
.steps { margin:0; padding-left:1.4em; font-variant-numeric:tabular-nums; line-height:1.65; text-align:left; }
.steps li { padding-left:0.2em; margin:2px 0; overflow-wrap:anywhere; }
.steps li::marker { color:var(--accent-text); font-weight:700; }
.bullets { margin:0; padding-left:1.2em; line-height:1.6; text-align:left; }
.bullets li { overflow-wrap:anywhere; }
.callout { background:var(--accent-soft); color:var(--text); border-radius:var(--radius-sm); padding:12px 14px; line-height:1.55; text-align:left; border-left:3px solid var(--accent); }
.callout-label { display:block; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; font-weight:800; color:var(--accent-text); margin-bottom:2px; }

.fb-section { text-align:left; display:flex; flex-direction:column; gap:8px; padding:4px 2px; }
.fb-heading { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); font-weight:700; }

details.fold { border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); text-align:left; }
.fold-body { padding:0 14px 14px; }
.item-steps { grid-column:2 / 4; }
.item-steps details.fold { border:0; background:transparent; }
.item-steps .fold-body { padding:0 0 4px; }
.item-steps summary { padding:0; min-height:36px; font-size:0.875rem; }

summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; min-height:44px; padding:0 14px;
  font-weight:700; font-size:0.9375rem;
}
summary::-webkit-details-marker { display:none; }
summary::marker { content:''; }
summary::before {
  content:''; flex:none; width:7px; height:7px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(-45deg); transition:transform 150ms; margin-right:2px;
}
details[open] > summary::before { transform:rotate(45deg); }

.learn-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-card); transition:border-color 150ms; scroll-margin-top:72px; }
.learn-card:hover, .learn-card[open] { border-color:var(--accent); }
.learn-card > summary { padding:10px 16px; flex-wrap:wrap; row-gap:2px; min-height:56px; }
.ls-name { flex:1 1 140px; min-width:0; }
.ls-goal { font-size:0.8125rem; font-weight:400; font-variant-numeric:tabular-nums; white-space:nowrap; }
.learn-body { padding:4px 16px 16px; display:flex; flex-direction:column; gap:16px; }
.example { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px; }
.example-prompt { font-size:clamp(1.25rem, 5.5vw, 1.75rem); font-weight:700; letter-spacing:-0.02em; line-height:1.25; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; margin-bottom:6px; }
.example-solution { margin-top:12px; }

.ai { display:flex; flex-direction:column; gap:10px; align-items:flex-start; width:100%; }
.ai-out { width:100%; }
.ai-box { border:1px dashed var(--accent); background:var(--accent-soft); border-radius:var(--radius-md); padding:12px 14px; display:flex; flex-direction:column; gap:8px; text-align:left; line-height:1.55; width:100%; }
.ai-label { font-size:0.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; font-weight:700; }

/* ---------- Settings & controls ---------- */
.settings-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:6px 16px; display:flex; flex-direction:column; }
.settings-section > .section-title, .settings-section > h2 { margin:0; padding:14px 0 6px; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); font-weight:700; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; padding:10px 0; border-top:1px solid var(--border); flex-wrap:wrap; }
.settings-section > .setting-row:first-of-type, .settings-section > :first-child.setting-row { border-top:0; }
.setting-row > :first-child { min-width:0; flex:1 1 140px; font-weight:600; }

.setting-row > .segmented, .setting-row > .theme-swatches, .setting-row > select.select { flex:1 1 100%; min-width:0; }
.setting-row > label.switch, .setting-row > .btn, .setting-row > a, .setting-row > span { margin-left:auto; }
.segmented { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(max-content, 1fr); width:100%; max-width:100%; border:1px solid var(--border); border-radius:var(--radius-md); padding:3px; background:var(--surface-2); gap:2px; }
.segmented { overflow-x:auto; scrollbar-width:none; }
.segmented::-webkit-scrollbar { display:none; }
.segmented.scroll { display:flex; }
.segmented.scroll button { flex:1 0 auto; }
.segmented button {
  min-height:38px; min-width:0; padding:0 10px; border:0; border-radius:calc(var(--radius-md) - 3px); background:transparent; white-space:nowrap;
  cursor:pointer; color:var(--muted); font-weight:700; font-size:0.9375rem; font-variant-numeric:tabular-nums; transition:background-color 150ms, color 150ms;
}
@media (max-width: 359px) {
  .segmented button { font-size:0.8125rem; padding:0 4px; }
  .settings-section { padding-left:12px; padding-right:12px; }
}
@media (max-width: 379px) {
  .setting-row { flex-direction:column; align-items:stretch; gap:8px; }
  .setting-row > :first-child { flex:0 0 auto; }
  .setting-row > label.switch, .setting-row > .btn, .setting-row > a, .setting-row > span { margin-left:0; align-self:flex-end; }
  .cat-row, .setting-row.inline { flex-direction:row; align-items:center; flex-wrap:nowrap; }
  .cat-row > label.switch, .setting-row.inline > label.switch, .setting-row.inline > .btn { margin-left:auto; align-self:center; }
  /* Text neben Schalter darf schrumpfen und umbrechen, Schalter behält seine Breite */
  .cat-row > :first-child, .setting-row.inline > :first-child { flex:1 1 auto; min-width:0; }
  .cat-row > label.switch, .setting-row.inline > label.switch { flex:none; }
  select.select { width:100%; }
}
.segmented button:hover { color:var(--text); }
.segmented button.active, .segmented button[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); box-shadow:var(--glow-accent); }

.theme-swatches { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; width:100%; }
@media (max-width: 339px) { .theme-swatches { grid-template-columns:repeat(2, 1fr); } }
button.swatch {
  display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; padding:8px 4px; border-radius:var(--radius-md);
  background:var(--surface-2); border:2px solid transparent; color:var(--muted); cursor:pointer; font-size:0.75rem; font-weight:700;
  transition:border-color 150ms, color 150ms, transform 120ms;
}
button.swatch:active { transform:scale(.95); }
button.swatch.active, button.swatch[aria-pressed="true"] { border-color:var(--accent); color:var(--text); }
.swatch-dot { width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:var(--surface); display:block; }
.swatch[data-theme-value="neon"] .swatch-dot { background:linear-gradient(135deg, #121214 50%, #7C3AED 50%); }
.swatch[data-theme-value="oled"] .swatch-dot { background:linear-gradient(135deg, #000000 50%, #06B6D4 50%); }
.swatch[data-theme-value="pastel"] .swatch-dot { background:linear-gradient(135deg, #F8F9FA 50%, #4F46E5 50%); }
.swatch[data-theme-value="system"] .swatch-dot { background:linear-gradient(135deg, #121214 50%, #F8F9FA 50%); }

label.switch { position:relative; display:inline-block; width:52px; height:32px; flex:none; cursor:pointer; }
label.switch input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1; }
.switch-track { position:absolute; inset:0; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); transition:background-color 200ms, border-color 200ms; }
.switch-track::after { content:''; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:var(--muted); transition:transform 200ms var(--ease), background-color 200ms; }
label.switch input:checked + .switch-track { background:var(--accent); border-color:var(--accent); }
label.switch input:checked + .switch-track::after { transform:translateX(20px); background:var(--on-accent); }
label.switch input:focus-visible + .switch-track { outline:2px solid var(--accent-text); outline-offset:2px; }

select.select {
  min-height:44px; padding:0 36px 0 14px; border-radius:var(--radius-md); border:1px solid var(--border); background-color:var(--surface-2); font-weight:600; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat;
}

/* ---------- Toast & Confetti ---------- */
@keyframes toast-in { from { opacity:0; transform:translate(-50%, 16px); } to { opacity:1; transform:translate(-50%, 0); } }
.toast {
  position:fixed; z-index:60; left:50%; transform:translateX(-50%);
  bottom:calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom, 0px));
  max-width:calc(100% - 32px); padding:12px 20px; border-radius:999px; font-weight:700; font-size:0.9375rem; text-align:center;
  background:var(--surface-2); color:var(--text); border:1px solid var(--accent); box-shadow:var(--glow-accent);
  animation:toast-in 260ms var(--ease);
}
@keyframes confetti-fall { 0% { transform:translate3d(0,-10vh,0) rotate(0); opacity:1; } 100% { transform:translate3d(var(--drift, 0px),105vh,0) rotate(var(--r, 360deg)); opacity:0; } }
.confetti { position:fixed; inset:0; z-index:70; pointer-events:none; overflow:hidden; }
.confetti-piece {
  position:absolute; top:0; left:calc(var(--x, 50) * 1%); width:8px; height:14px; border-radius:2px; background:var(--accent);
  animation:confetti-fall 2.4s ease-in var(--d, 0s) forwards; opacity:0;
}
.confetti-piece:nth-child(5n+1) { background:var(--accent-text); }
.confetti-piece:nth-child(5n+2) { background:var(--streak); --drift:40px; }
.confetti-piece:nth-child(5n+3) { background:var(--good); --drift:-40px; }
.confetti-piece:nth-child(5n+4) { background:var(--warn); --drift:24px; }
.confetti-piece:nth-child(5n) { background:var(--bad); --drift:-24px; }

/* ---------- Bildschirm-Tastatur ---------- */
/* Zahlentastatur: schwebende Glas-Karte */
.keypad {
  position:fixed; z-index:30;
  left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  max-width:440px; margin:0 auto; padding:10px;
  border-radius:28px;
  background:color-mix(in srgb, var(--surface) 68%, transparent);
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow:0 18px 48px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(22px) saturate(1.5); backdrop-filter:blur(22px) saturate(1.5);
  -webkit-user-select:none; user-select:none; touch-action:manipulation;
  animation:kp-in .22s ease-out;
}
html[data-theme="pastel"] .keypad { box-shadow:0 14px 40px rgba(24,24,27,.14); }
.keypad-top { display:flex; align-items:center; gap:8px; padding:0 2px 8px; }
.keypad .keypad-skip { margin-left:auto; }
.keypad .keypad-skip, .keypad .keypad-help {
  padding:5px 12px; border:0; border-radius:999px; text-decoration:none;
  background:color-mix(in srgb, var(--surface-2) 80%, transparent); color:var(--muted);
  font-size:0.8125rem; font-weight:600;
}
.keypad-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.keypad .key {
  height:54px; border:0; border-radius:18px; cursor:pointer;
  background:color-mix(in srgb, var(--text) 9%, var(--surface)); color:var(--text);
  font:inherit; font-size:1.5rem; font-weight:650; font-variant-numeric:tabular-nums;
  display:grid; place-items:center; -webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.22);
  transition:transform .08s ease, background-color .12s ease;
}
.keypad .key-aux { background:transparent; box-shadow:none; color:var(--muted); font-size:1.25rem; }
.keypad .key:active { transform:scale(.93); background:var(--accent-soft); }
.keypad .key-submit {
  grid-column:4; grid-row:3 / span 2; height:auto; border-radius:20px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 75%, #fff), var(--accent));
  color:var(--on-accent); font-size:1.0625rem; font-weight:700; box-shadow:var(--glow-accent);
}
.keypad .key-submit:active { background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 75%, #fff), var(--accent)); filter:brightness(.88); }
@keyframes kp-in { from { transform:translateY(18px); opacity:0; } }
/* Solange das Tastenfeld offen ist, passt alles auf einen Bildschirm – kein Scrollen */
body.has-keypad { position:fixed; inset:0; overflow:hidden; overscroll-behavior:none; }
body.has-keypad.kp-scroll { position:static; overflow:visible; }
/* Fokus-Modus im Training: keine Topbar */
body.in-play .topbar { display:none; }
body.in-play main.container { padding-top:calc(10px + env(safe-area-inset-top, 0px)); }
/* Kompaktes Layout mit Tastenfeld: Aufgabe + Eingabe passen über die Tastatur.
   Reicht der Platz trotzdem nicht, scrollt nur der Aufgabenbereich. */
body.has-keypad main.container {
  --kp-space:330px;
  height:100dvh; overflow-y:auto; overscroll-behavior:contain; gap:10px;
  padding-bottom:calc(var(--kp-space) + env(safe-area-inset-bottom, 0px));
}
body.has-keypad .task { padding:6px 0 0; gap:8px; }
body.has-keypad .question { font-size:clamp(1.75rem, 9vw, 2.5rem); }
body.has-keypad .question.long { font-size:clamp(1.125rem, 4.6vw, 1.375rem); line-height:1.35; }
body.has-keypad .hint:empty { display:none; }
body.has-keypad .answer input { padding-top:10px; padding-bottom:10px; }
@media (max-height: 760px) {
  body.has-keypad main.container { --kp-space:290px; }
  .keypad { padding:8px; border-radius:24px; }
  .keypad .key { height:44px; border-radius:15px; font-size:1.375rem; }
  .keypad .key-submit { height:auto; font-size:1rem; }
  .keypad-top { padding-bottom:6px; }
}
.keypad .keypad-help[aria-expanded="true"] { background:var(--accent-soft); color:var(--accent-text, var(--accent)); }
@media (prefers-reduced-motion: reduce) { .keypad { animation:none; } }
@media (prefers-reduced-motion: reduce) {
  .keypad .key { transition:none; }
  .keypad .key:active { transform:none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
  .confetti { display:none; }
}

/* ---------- v4: Auswahl-Aufgaben & Kategorien ---------- */
.choices { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin:12px 0; width:100%; max-width:520px; align-self:center; }
.choice {
  display:flex; align-items:center; justify-content:center; gap:8px; min-height:56px; padding:12px 14px;
  background:var(--surface-2); color:var(--text); border:1px solid var(--border); border-radius:14px;
  font:inherit; font-size:1.0625rem; font-weight:600; line-height:1.3; text-align:center;
  white-space:normal; overflow-wrap:anywhere; cursor:pointer;
  transition:transform 120ms var(--ease), border-color 160ms, background-color 160ms;
}
.choice:hover:not(:disabled) { border-color:var(--accent); }
.choice:active:not(:disabled) { transform:scale(0.97); }
.choice:focus-visible { outline:2px solid var(--accent-text); outline-offset:2px; }
.choice-key { flex:none; font-size:0.75rem; color:var(--muted); font-weight:700; }
.choice:disabled { cursor:default; opacity:.6; }
.choice.is-correct { opacity:1; border-color:var(--good); background:var(--good-soft); color:var(--good); box-shadow:0 0 0 2px var(--good-soft), 0 0 14px var(--good-soft); }
.choice.is-wrong { opacity:1; border-color:var(--bad); background:var(--bad-soft); color:var(--bad); }
.cat-row > :first-child { font-weight:600; }
.settings-section > p.small { margin:4px 0 8px; }

/* ---------- v5: Home-Schnellstarts, Kette, Custom, Lernkurve ---------- */
.quick-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.quick-grid .tile { min-height:88px; justify-content:center; }
.tile-daily.is-done { border-color:color-mix(in srgb, var(--good) 55%, var(--border)); }
.tile-daily .daily-result { color:var(--good); font-weight:800; font-variant-numeric:tabular-nums; }
.chain { display:flex; flex-direction:column; gap:16px; }
.chain-stage {
  min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center;
}
.chain-step {
  font-size:clamp(3rem, 18vw, 5rem); font-weight:800; letter-spacing:-0.03em; font-variant-numeric:tabular-nums;
  animation:chain-fade 200ms var(--ease);
}
@keyframes chain-fade { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:scale(1); } }
.chain-count { color:var(--muted); font-size:0.875rem; font-variant-numeric:tabular-nums; }
.chain-steps { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; font-variant-numeric:tabular-nums; }
.chain-steps li { padding:4px 12px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); font-weight:700; }
.chain-result { font-size:2rem; font-weight:800; font-variant-numeric:tabular-nums; }
.chain-result.good { color:var(--good); }
.chain-result.bad { color:var(--bad); }
.form-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.field { display:flex; flex-direction:column; gap:4px; min-width:0; }
.field > span { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); font-weight:700; }
.field input {
  min-height:48px; width:100%; min-width:0; padding:0 14px; border-radius:var(--radius-md); border:1px solid var(--border);
  background:var(--surface-2); font-size:1.125rem; font-weight:700; font-variant-numeric:tabular-nums;
}
.field input:focus { outline:none; border-color:var(--accent); }
.form-error { color:var(--bad); font-size:0.875rem; min-height:1.3em; }
.legend { display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; }
.legend i { display:inline-block; width:12px; height:3px; border-radius:2px; background:var(--accent-text); margin-right:4px; vertical-align:middle; }
.legend i.alt { background:var(--good); }
.alt .spark .line { stroke:var(--good); }
.alt .spark .stop-a, .alt .spark .stop-b { stop-color:var(--good); }
.spark-tall { height:64px; }
.spark-tall .spark { height:100%; }
@media (max-width: 359px) { .quick-grid { grid-template-columns:1fr; } }

/* ---------- Settings: Tabs & Daten ---------- */
.settings-tabs { position:sticky; top:0; z-index:5; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding:6px 0; margin:0 0 12px; background:var(--bg); max-width:100%; }
.settings-tabs::-webkit-scrollbar { display:none; }
.settings-tab { flex:1 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:42px; padding:0 14px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-2); color:var(--muted); font-weight:700; font-size:0.9375rem; white-space:nowrap; cursor:pointer; transition:background-color 150ms, color 150ms; }
.settings-tab:hover { color:var(--text); }
.settings-tab.active { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.settings-panel { display:flex; flex-direction:column; gap:14px; min-width:0; }
.id-chip { font-family:ui-monospace, Menlo, monospace; font-size:0.8125rem; padding:4px 8px; border-radius:8px; background:var(--surface-2); color:var(--muted); max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.setting-row > code.id-chip { margin-left:auto; }
@media (max-width: 359px) {
  .settings-tab { padding:0 10px; font-size:0.8125rem; gap:4px; }
}