/* ============================================================
   DeutschLernen · Aspekte neu Trainer
   Visual redesign — cool & calm blue-grays, vivid course accents,
   editorial serif (Newsreader) + grotesque (Hanken Grotesk),
   airy spacing, first-class light & dark, tasteful micro-motion.

   THEMING
   - data-theme = light | dark   (neutral ramp)
   - data-course = B1 | B2        (accent identity: green / blue)
   Accent adapts per theme via specificity-stacked selectors:
     :root(B1 light) < [data-course=B2](B2 light)
        < [data-theme=dark](B1 dark) < [data-theme=dark][data-course=B2](B2 dark)
   ============================================================ */

/* ---------- Tokens: light / B1 (default) ---------- */
:root {
  /* neutral ramp — cool blue-grays */
  --bg:        #eaeef4;
  --bg-soft:   #e1e7f0;
  --surface:   #ffffff;
  --surface-2: #f3f6fb;
  --surface-3: #e9eef6;
  --border:    #dde4ee;
  --border-2:  #c9d3e1;
  --text:      #16202f;
  --text-soft: #47576c;
  --text-mute: #5b6779;   /* 4.9:1 on --bg, 5.7:1 on --surface — was #7a8698 (3.2:1, failed AA) */

  /* accent (B1 · green) + supporting ramp */
  --accent:      #0bb083;
  --accent-strong:#08916b;
  --accent-ink:  #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --accent-tint: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 32%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 40%, transparent);

  /* secondary (violet-periwinkle) — reading, Arbeitsbuch, samples */
  --accent-2:    #6d6ef2;
  --accent-2-tint: color-mix(in srgb, var(--accent-2) 13%, transparent);

  /* status */
  --good:      #1f8f57;   /* cooler + darker than the B1 accent, so "correct" ≠ "brand green" */
  --good-bg:   #dff3e6;
  --good-line: color-mix(in srgb, var(--good) 34%, transparent);
  --bad:       #e24a68;
  --bad-bg:    #fce6ea;
  --bad-line:  color-mix(in srgb, var(--bad) 34%, transparent);
  --warn:      #d5892a;
  --warn-bg:   color-mix(in srgb, var(--warn) 15%, transparent);

  /* elevation — cool, layered, soft */
  --shadow-xs: 0 1px 2px rgba(24,42,74,.06);
  --shadow-sm: 0 1px 2px rgba(24,42,74,.05), 0 2px 8px rgba(24,42,74,.05);
  --shadow:    0 1px 2px rgba(24,42,74,.05), 0 6px 20px rgba(24,42,74,.07);
  --shadow-md: 0 4px 12px rgba(24,42,74,.08), 0 14px 34px rgba(24,42,74,.10);
  --shadow-lg: 0 12px 30px rgba(24,42,74,.12), 0 28px 64px rgba(24,42,74,.16);
  --ring:      0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);

  /* shape */
  --radius:    16px;
  --measure:   40em;   /* ~68 chars of German prose — the readable line length */
  --radius-s:  12px;
  --radius-xs: 9px;
  --radius-pill: 999px;

  /* layout */
  --sidebar-w: 300px;
  --header-h:  66px;
  --maxw:      1120px;

  /* motion */
  --dur:   .16s;
  --dur-2: .22s;
  --ease:  cubic-bezier(.2, .7, .25, 1);
  --ease-pop: cubic-bezier(.32, 1.55, .5, 1);

  /* type */
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --font: var(--font-sans);
}

/* ---------- Tokens: light / B2 (blue accent) ---------- */
[data-course="B2"] {
  --accent:       #2b7bff;
  --accent-strong:#155fe0;
  --accent-ink:   #ffffff;
}

/* ---------- Tokens: dark (neutral ramp + B1 dark accent) ---------- */
[data-theme="dark"] {
  --bg:        #0b1017;
  --bg-soft:   #0f151e;
  --surface:   #151d28;
  --surface-2: #1b2531;
  --surface-3: #222e3c;
  --border:    #29323f;
  --border-2:  #3a4552;
  --text:      #e7edf5;
  --text-soft: #aab7c6;
  --text-mute: #96a3b3;   /* 5.4:1 on --surface-3 — was #71808f (3.4:1, failed AA) */

  --accent:       #1fc596;
  --accent-strong:#3ad3a8;
  --accent-ink:   #052018;

  --accent-2:     #8b8cf7;
  --good:      #22c58a;
  --good-bg:   #12321f;
  --bad:       #ff6f8a;
  --bad-bg:    #38111c;
  --warn:      #e6a53f;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 3px 10px rgba(0,0,0,.34);
  --shadow:    0 1px 3px rgba(0,0,0,.42), 0 8px 24px rgba(0,0,0,.4);
  --shadow-md: 0 6px 18px rgba(0,0,0,.46), 0 18px 40px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.55), 0 32px 72px rgba(0,0,0,.62);
}

/* ---------- Tokens: dark / B2 (blue accent) ---------- */
[data-theme="dark"][data-course="B2"] {
  --accent:       #4b95ff;
  --accent-strong:#7ab2ff;
  --accent-ink:   #041226;
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
svg { width: 18px; height: 18px; flex: 0 0 auto; fill: currentColor; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); overflow-x: clip; }  /* clip (not hidden) so the sticky header keeps working */
body {
  font-family: var(--font-sans);
  background:
    radial-gradient(1200px 620px at 100% -8%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 15px;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
}
button { font-family: inherit; cursor: pointer; color: inherit; }
input, textarea { font-family: inherit; }
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: var(--accent-strong); }

/* tabular numerals for scores / times */
.wb-score, .cloze-score, .ptime, .fc-stat .n, .badge, .due-badge,
.gender-legend, .fc-row .box { font-variant-numeric: tabular-nums; }

/* soft, cohesive scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-mute) 42%, transparent);
  border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-mute) 66%, transparent); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Header
   ============================================================ */
.app-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 18px; letter-spacing: -.2px; }
.brand .logo {
  position: relative;
  width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-serif); font-weight: 700; font-size: 21px; line-height: 1;
  background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 58%, var(--accent-2)));
  box-shadow: 0 4px 12px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.brand .logo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.brand .txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand small { display: block; font-weight: 600; font-size: 11px; color: var(--text-mute); letter-spacing: .2px; margin-top: 1px; }
.header-spacer { flex: 1; }

.course-switch { display: flex; background: var(--surface-3); border-radius: var(--radius-s); padding: 4px; gap: 3px; border: 1px solid var(--border); box-shadow: var(--shadow-xs) inset; }
.course-switch button {
  border: 0; background: transparent; color: var(--text-soft);
  font-weight: 700; font-size: 13px; padding: 7px 15px; border-radius: 9px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.course-switch button:hover { color: var(--text); }
.course-switch button.active {
  background: var(--surface); color: var(--accent-strong);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .course-switch button.active { color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.course-switch button:active { transform: scale(.96); }

.search-box { position: relative; display: flex; align-items: center; }
.search-box input {
  width: 250px; max-width: 42vw; height: 40px; padding: 0 14px 0 38px;
  border: 1px solid var(--border-2); border-radius: var(--radius-s); background: var(--surface-2);
  color: var(--text); font-size: 14px; outline: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), width var(--dur-2) var(--ease);
}
.search-box input::placeholder { color: var(--text-mute); }
.search-box input:focus { border-color: var(--accent); background: var(--surface); box-shadow: var(--ring); }
.search-box svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--text-mute); pointer-events: none; }
.search-box:focus-within svg { color: var(--accent); }

.icon-btn {
  width: 40px; height: 40px; border-radius: var(--radius-s); border: 1px solid var(--border-2);
  background: var(--surface-2); color: var(--text-soft); display: grid; place-items: center;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--border-2); background: var(--surface-3); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0) scale(.96); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn.active-view {
  background: var(--accent); color: var(--accent-ink); border-color: transparent;
  box-shadow: 0 4px 14px var(--accent-glow);
}
.icon-btn.active-view:hover { background: var(--accent-strong); color: var(--accent-ink); }

.header-cards { position: relative; }
.header-cards .due-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-size: 10px; font-weight: 800; display: grid; place-items: center;
  border: 2px solid var(--surface); box-shadow: 0 2px 6px var(--accent-glow);
}
.icon-btn.active-view .due-badge { border-color: var(--accent); }

/* ============================================================
   Layout shell
   ============================================================ */
.layout { display: flex; align-items: flex-start; max-width: 1560px; margin: 0 auto; }
.sidebar {
  position: sticky; top: var(--header-h);
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));   /* iOS: 100vh is the LARGE viewport, so Kapitel 9/10 hid under the browser chrome */
  overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 14px calc(48px + env(safe-area-inset-bottom)); border-right: 1px solid var(--border);
}
.sidebar h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-mute); font-weight: 700; margin: 6px 12px 12px; }
.chapter-link {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  padding: 11px 13px; border-radius: var(--radius-s); margin-bottom: 4px;
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chapter-link::before {
  content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%) scaleY(0);
  width: 3px; height: 22px; border-radius: 3px; background: var(--accent);
  transition: transform var(--dur-2) var(--ease-pop);
}
.chapter-link:hover { background: var(--surface-2); }
.chapter-link:active { transform: scale(.99); }
.chapter-link.active { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); }
.chapter-link.active::before { transform: translateY(-50%) scaleY(1); }
.chapter-link .num {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; background: var(--surface-3); color: var(--text-soft);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chapter-link:hover .num { color: var(--text); }
.chapter-link.active .num {
  background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--accent-2)));
  color: var(--accent-ink); box-shadow: 0 3px 9px var(--accent-glow);
}
/* finished chapters: a tick instead of the number */
.chapter-link.done .num { background: var(--good); color: #fff; }
.chapter-link.done .num svg { width: 16px; height: 16px; fill: currentColor; }
.chapter-link.done .ring { opacity: .5; }
.chapter-link .ctitle { font-size: 14px; font-weight: 650; line-height: 1.3; flex: 1; min-width: 0; letter-spacing: -.1px; }
.chapter-link .ctitle small { display: block; font-weight: 500; font-size: 11px; color: var(--text-mute); margin-top: 2px; letter-spacing: 0; }

/* progress ring — lovely conic dial with a soft track */
.ring {
  --p: 0; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; position: relative;
  background:
    conic-gradient(var(--accent) calc(var(--p)*1%), color-mix(in srgb, var(--text-mute) 22%, transparent) 0);
  transition: background .4s var(--ease);
}
.ring::after {
  content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent);
}
.chapter-link:not(.active) .ring::after { background: var(--bg); }
.chapter-link.active .ring { box-shadow: 0 0 0 1px var(--accent-line); }

.main { flex: 1; min-width: 0; padding: 30px clamp(18px, 4vw, 52px) 90px; }
.main > * { max-width: var(--maxw); }
.page-head { margin-bottom: 22px; }
.page-head .eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .3px; color: var(--accent-strong); text-transform: uppercase;
}
.page-head .eyebrow::before { content: ""; width: 16px; height: 2px; border-radius: 2px; background: var(--accent); }
.page-head h1 {
  margin: 8px 0 0; font-family: var(--font-serif); font-size: clamp(28px, 3.6vw, 40px);
  letter-spacing: -.5px; font-weight: 600; line-height: 1.08;
}

/* ============================================================
   Tabs
   ============================================================ */
.tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 20px 0 24px;
  /* stays reachable while scrolling a long chapter; translucent like the header so the body's
     fixed radial gradient doesn't show a seam */
  position: sticky; top: var(--header-h); z-index: 30;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(150%) blur(18px); -webkit-backdrop-filter: saturate(150%) blur(18px);
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  border: 0; background: transparent; color: var(--text-soft); font-weight: 600; font-size: 14.5px;
  padding: 11px 15px; position: relative; white-space: nowrap; flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  transition: color var(--dur) var(--ease);
}
.tabs button svg { width: 17px; height: 17px; opacity: .85; }
.tabs button .badge {
  font-size: 11px; background: var(--surface-3); color: var(--text-mute);
  padding: 1px 8px; border-radius: 999px; font-weight: 700; min-width: 20px; text-align: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tabs button:hover { color: var(--text); }
.tabs button:hover .badge { color: var(--text-soft); }
.tabs button.active { color: var(--accent-strong); }
.tabs button.active svg { opacity: 1; }
.tabs button.active .badge { background: var(--accent-tint); color: var(--accent-strong); }
.tabs button.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  animation: tabslide var(--dur-2) var(--ease);
}
@keyframes tabslide { from { opacity: 0; transform: scaleX(.4); } to { opacity: 1; transform: scaleX(1); } }

/* ============================================================
   Cards (listening / search)
   ============================================================ */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: 18px; overflow: hidden;
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); }
.card-head { display: flex; align-items: center; gap: 15px; padding: 17px 20px; }
.card-head .meta { flex: 1; min-width: 0; }
.card-head .sec { font-weight: 700; font-size: 16px; letter-spacing: -.2px; }
.card-head .sub { font-size: 12.5px; color: var(--text-mute); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.pill { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: .2px; white-space: nowrap; }
.pill.lb { background: var(--accent-tint); color: var(--accent-strong); }
.pill.ab { background: var(--accent-2-tint); color: var(--accent-2); }
.pill.muted { background: var(--surface-3); color: var(--text-mute); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
[data-theme="dark"] .pill.ab { color: color-mix(in srgb, var(--accent-2) 82%, white); }

.heard-btn {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-2); background: var(--surface-2);
  color: var(--text-soft); font-weight: 600; font-size: 12.5px; padding: 8px 13px; border-radius: var(--radius-xs);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.heard-btn:hover { border-color: color-mix(in srgb, var(--good) 55%, var(--border-2)); color: var(--good); background: var(--surface-3); }
.heard-btn:active { transform: scale(.97); }
.heard-btn.on { background: var(--good-bg); color: var(--good); border-color: transparent; }
.heard-btn.on svg { animation: pop .3s var(--ease-pop); }
.heard-btn svg { width: 15px; height: 15px; }

/* ============================================================
   Audio player
   ============================================================ */
.players { padding: 4px 20px 8px; display: flex; flex-direction: column; gap: 10px; }
.player {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-s);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.player:hover { border-color: var(--border-2); }
.player.missing { opacity: .62; }
.play-btn {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; border: 0;
  background: linear-gradient(150deg, var(--accent), var(--accent-strong)); color: #fff; display: grid; place-items: center;
  box-shadow: 0 4px 14px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform var(--dur) var(--ease-pop), box-shadow var(--dur) var(--ease);
}
.play-btn:hover { transform: scale(1.07); box-shadow: 0 6px 20px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.3); }
.play-btn:active { transform: scale(.97); }
.play-btn[data-playing] { box-shadow: 0 0 0 4px var(--accent-tint), 0 4px 14px var(--accent-glow); }
.play-btn svg { width: 20px; height: 20px; }
.player .pinfo { flex: 1; min-width: 0; }
.player .ptitle { font-weight: 650; font-size: 13.5px; }
.player .ptime { font-size: 12px; color: var(--text-mute); }
.scrub {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px;
  background: linear-gradient(var(--surface-3), var(--surface-3)); margin-top: 9px; cursor: pointer;
  border: 1px solid var(--border);
}
.scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 1px 5px var(--accent-glow); transition: transform var(--dur) var(--ease); }
.scrub::-webkit-slider-thumb:hover { transform: scale(1.15); }
.scrub::-moz-range-thumb { width: 15px; height: 15px; border: 2px solid var(--surface); border-radius: 50%; background: var(--accent); }
.speed-btn, .loop-btn, .seek-btn {
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text-soft);
  font-weight: 700; font-size: 12px; padding: 7px 10px; border-radius: var(--radius-xs); min-width: 44px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.speed-btn:hover, .loop-btn:hover, .seek-btn:hover { color: var(--accent-strong); border-color: var(--accent); }
.speed-btn:active, .loop-btn:active, .seek-btn:active { transform: scale(.95); }
.loop-btn.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: 0 3px 10px var(--accent-glow); }

/* ============================================================
   Transcript
   ============================================================ */
.transcript-bar { display: flex; align-items: center; gap: 10px; padding: 14px 20px 4px; flex-wrap: wrap; }
.toggle-sub {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border-2);
  background: var(--surface-2); color: var(--text); font-weight: 600; font-size: 13px; padding: 9px 15px; border-radius: var(--radius-xs);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toggle-sub:hover { border-color: var(--accent); color: var(--accent-strong); }
.toggle-sub:active { transform: scale(.98); }
.toggle-sub svg { width: 16px; height: 16px; }
.transcript { padding: 8px 20px 20px; display: flex; flex-direction: column; gap: 11px; }
.transcript.blurred .turn .ttext { filter: blur(5.5px); user-select: none; opacity: .85; transition: filter .22s var(--ease); }
.transcript.blurred .turn:hover .ttext { filter: blur(0); }
.turn { display: flex; gap: 12px; align-items: flex-start; line-height: 1.7; }
.turn .who {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #fff; margin-top: 3px; box-shadow: var(--shadow-xs);
}
.turn .ttext { max-width: calc(var(--measure) + 2.2em); font-family: var(--font-serif); font-size: 17px; line-height: 1.68; color: var(--text); }
.turn.narration .ttext { color: var(--text-soft); font-style: italic; }
.who.r0{background:#0bab86}.who.r1{background:#3b82f6}.who.r2{background:#9264e8}.who.r3{background:#e0823a}.who.r4{background:#e0506e}.who.r5{background:#1f9b9b}

/* ============================================================
   Cloze (Lückendiktat)
   ============================================================ */
.cloze-text { padding: 8px 20px 4px; font-family: var(--font-serif); font-size: 18px; line-height: 2.4; }
.cloze-text input {
  display: inline-block; width: 8.5em; height: 32px; vertical-align: baseline;
  border: 0; border-bottom: 2px solid var(--border-2); background: var(--surface-2);
  color: var(--text); font: inherit; font-family: var(--font-sans); font-size: 15px; text-align: center;
  border-radius: 8px 8px 0 0; padding: 0 6px; outline: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cloze-text input:focus { border-bottom-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: 0 3px 0 -1px var(--accent-line); }
.cloze-text input.ok { border-color: var(--good); background: var(--good-bg); color: var(--good); font-weight: 700; animation: pop .34s var(--ease-pop); }
.cloze-text input.no { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); animation: shake .32s var(--ease); }
.cloze-actions { padding: 16px 20px 20px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cloze-score { font-weight: 700; font-size: 14px; }

/* ============================================================
   Answers (Lösungen)
   ============================================================ */
.answer-item { border: 1px solid var(--border); border-radius: var(--radius-s); margin-bottom: 10px; background: var(--surface); overflow: hidden; box-shadow: var(--shadow-xs); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.answer-item:hover { box-shadow: var(--shadow-sm); }
.answer-item.open { box-shadow: var(--shadow-sm); border-color: var(--border-2); }
.answer-head { display: flex; align-items: center; gap: 13px; padding: 14px 16px; cursor: pointer; transition: background var(--dur) var(--ease); }
.answer-head:hover { background: var(--surface-2); }
.answer-head .lab {
  flex: 0 0 auto; min-width: 44px; height: 31px; padding: 0 11px; border-radius: 9px; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; background: var(--surface-3); color: var(--text-soft);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.answer-head .asec { flex: 1; font-size: 13.5px; color: var(--text-soft); font-weight: 600; }
.answer-head .chev { color: var(--text-mute); transition: transform var(--dur-2) var(--ease); }
.answer-item.open .answer-head .chev { transform: rotate(90deg); color: var(--accent-strong); }
.answer-item.open .answer-head .lab { background: var(--accent); color: var(--accent-ink); box-shadow: 0 3px 9px var(--accent-glow); }
.answer-body {
  display: none; padding: 6px 18px 18px; font-size: 14.5px; color: var(--text); white-space: pre-wrap;
  line-height: 1.7; border-top: 1px solid var(--border);
}
.answer-item.open .answer-body { display: block; animation: reveal var(--dur-2) var(--ease); }
.answer-body .lead { color: var(--accent-strong); font-weight: 700; }

/* ============================================================
   Books
   ============================================================ */
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 15px; }
.book-card {
  display: flex; align-items: center; gap: 15px; padding: 17px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.book-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-2); }
.book-ico { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center; color: #fff; box-shadow: var(--shadow-sm); }
.book-ico svg { width: 24px; height: 24px; }
.book-ico.book { background: linear-gradient(150deg, #0bb083, #12a56e); }
.book-ico.key  { background: linear-gradient(150deg, #e0823a, #eaa24f); }
.book-ico.script { background: linear-gradient(150deg, #6d6ef2, #4b95ff); }
.book-card .bt { font-weight: 700; font-size: 14.5px; letter-spacing: -.1px; }
.book-card .bs { font-size: 12px; color: var(--text-mute); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.book-card .bs svg { width: 12px; height: 12px; opacity: .6; }

/* ============================================================
   Embedded book reader
   ============================================================ */
.reader-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.book-toggle { display: flex; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 4px; gap: 3px; }
.book-toggle button { border: 0; background: transparent; color: var(--text-soft); font-weight: 700; font-size: 13px; padding: 7px 15px; border-radius: 9px; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.book-toggle button:hover { color: var(--text); }
.book-toggle button.active { background: var(--surface); color: var(--accent-strong); box-shadow: var(--shadow-sm); }
.reader-spacer { flex: 1; }
.pdf-frame { width: 100%; height: calc(100vh - 250px); min-height: 480px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); box-shadow: var(--shadow); display: block; }
.doc-section-title { margin: 22px 0 10px; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.doc-section-title svg { width: 16px; height: 16px; color: var(--text-mute); }
.doc-links { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); color: var(--text); text-decoration: none; font-size: 13px; font-weight: 600; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.doc-chip:hover { border-color: var(--accent); color: var(--accent-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.doc-chip svg { width: 14px; height: 14px; }
.doc-chip .ext { width: 13px; height: 13px; opacity: .55; }

/* ============================================================
   Vocabulary (Wortschatz)
   ============================================================ */
.vocab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.vocab-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 16px 17px; position: relative; display: flex; flex-direction: column; gap: 8px; overflow: hidden;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.vocab-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: 0; transition: opacity var(--dur) var(--ease); }
.vocab-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-2); }
.vocab-card:hover::before { opacity: .55; }
.vocab-card .vc-word { font-family: var(--font-serif); font-weight: 600; font-size: 20px; letter-spacing: -.2px; display: flex; align-items: baseline; gap: 8px; line-height: 1.2; }
.vocab-card .vc-art { font-family: var(--font-sans); font-weight: 800; font-size: 12px; padding: 2px 8px; border-radius: 7px; text-transform: lowercase; }
.art-der { background: color-mix(in srgb, #3b82f6 16%, transparent); color: #2f74e6; }
.art-die { background: color-mix(in srgb, #e0506e 16%, transparent); color: #d63f5e; }
.art-das { background: color-mix(in srgb, #12a56e 18%, transparent); color: #0f9463; }
[data-theme="dark"] .art-der { color: #74a9ff; } [data-theme="dark"] .art-die { color: #ff8098; } [data-theme="dark"] .art-das { color: #45d199; }
.vocab-card .vc-ex { font-size: 14px; color: var(--text-soft); line-height: 1.6; }
.vocab-card .vc-ex b { color: var(--text); font-weight: 700; background: var(--accent-tint); border-radius: 4px; padding: 0 3px; }
.vc-add { align-self: flex-start; margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-soft); font-weight: 650; font-size: 12px; padding: 6px 11px; border-radius: var(--radius-xs); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.vc-add:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--surface-3); transform: translateY(-1px); }
.vc-add:active { transform: scale(.97); }
.vc-add.added { background: var(--good-bg); color: var(--good); border-color: transparent; }
.vc-add.added svg { animation: pop .3s var(--ease-pop); }
.vc-add svg { width: 13px; height: 13px; }
.gender-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-mute); margin-left: auto; align-items: center; }
.gender-legend span { display: inline-flex; align-items: center; gap: 5px; }
.gender-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ============================================================
   Grammar
   ============================================================ */
.grammar-topics { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.gtopic {
  display: flex; align-items: flex-start; gap: 13px; padding: 15px 17px;
  background: linear-gradient(135deg, var(--accent-soft), var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius-s); box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gtopic:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.gtopic .gnum { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(150deg, var(--accent), var(--accent-strong)); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; font-size: 13px; box-shadow: 0 2px 8px var(--accent-glow); }
.gtopic .gtxt { font-weight: 600; font-size: 15px; padding-top: 3px; }
.gr-intro {
  white-space: pre-wrap; background: linear-gradient(135deg, var(--accent-soft), var(--surface));
  border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-s);
  padding: 15px 18px; margin: 8px 0 16px; font-size: 14.5px; line-height: 1.7; color: var(--text-soft);
}

/* ============================================================
   Arbeitsbuch / Kursbuch (interactive workbook)
   ============================================================ */
.wb-section { margin-bottom: 56px; scroll-margin-top: calc(var(--header-h) + 56px); }
.wb-shead { display: flex; align-items: center; gap: 13px; margin: 0 0 16px; padding-bottom: 11px; border-bottom: 1px solid var(--border); }
.wb-shead .wb-snum {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px;
  background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 62%, var(--accent-2)));
  color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; font-size: 13px;
  box-shadow: 0 3px 10px var(--accent-glow);
}
.wb-shead .wb-snum svg { width: 16px; height: 16px; }
.wb-shead h2 { margin: 0; font-family: var(--font-serif); font-size: 22px; font-weight: 600; letter-spacing: -.3px; }

.wb-ex {
  border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 13px; background: var(--surface);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.wb-ex:hover { box-shadow: var(--shadow); }
.wb-ex-head { display: flex; gap: 13px; padding: 15px 17px 12px; align-items: flex-start; }
.wb-ex-lab {
  flex: 0 0 auto; min-width: 36px; height: 28px; padding: 0 10px; border-radius: 8px; display: grid; place-items: center;
  font-weight: 800; font-size: 12.5px; background: var(--accent-tint); color: var(--accent-strong);
}
.wb-ex-lab svg { width: 15px; height: 15px; }
.wb-ex-instr { font-weight: 700; font-size: 13.5px; line-height: 1.5; padding-top: 3px; color: var(--text-soft); letter-spacing: .1px; }
.wb-ex-body { padding: 0 18px 15px; white-space: pre-wrap; font-size: 15.5px; line-height: 1.75; color: var(--text); font-family: var(--font-sans); word-break: break-word; }
.wb-blank { color: var(--accent-strong); font-weight: 700; letter-spacing: 1px; }
.wb-ex-foot { padding: 2px 18px 16px; display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.wb-ex-foot .wb-answer { flex-basis: 100%; }
.wb-fill { white-space: pre-wrap; line-height: 2.4; }
.wb-line { white-space: pre-wrap; line-height: 2.3; max-width: 38em; }
.wb-line:empty { height: 7px; }

/* free (writable) blank input */
.wb-finput {
  display: inline-block; min-width: 7em; max-width: 100%; height: 32px; border: 0; border-bottom: 2px solid var(--border-2);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; padding: 0 8px; border-radius: 8px 8px 0 0;
  outline: none; margin: 0 2px; vertical-align: baseline; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.wb-finput:focus { border-color: var(--accent); background: var(--accent-tint); }
.wb-finput.long { display: block; width: 100%; margin: 5px 0; min-height: 32px; }
textarea.wb-finput.long { height: 58px; resize: vertical; padding: 8px 10px; line-height: 1.55; border: 1px solid var(--border-2); border-radius: var(--radius-xs); background: var(--surface-2); }
textarea.wb-finput.long:focus { border-color: var(--accent); background: var(--surface); box-shadow: var(--ring); }

/* table */
.wb-table-wrap { overflow-x: auto; margin: 10px 0; border: 1px solid var(--border); border-radius: var(--radius-s); }
.wb-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.wb-table th, .wb-table td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; vertical-align: middle; word-break: normal; overflow-wrap: break-word; hyphens: none; }
.wb-table th { background: var(--surface-3); font-weight: 700; color: var(--text); }
.wb-table td .wb-input, .wb-table td .wb-finput { min-width: 5em; width: 100%; margin: 0; }
.wb-table tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.wb-table-wrap .wb-table { border: 0; }
.wb-table tr:first-child th:first-child { border-top-left-radius: var(--radius-s); }
.wb-table tr:first-child th:last-child { border-top-right-radius: var(--radius-s); }

/* image */
.wb-img { display: block; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius-s); margin: 10px 0; box-shadow: var(--shadow-sm); background: #fff; }
.wb-imgph { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; margin: 4px 0; border: 1px dashed var(--border-2); border-radius: var(--radius-xs); color: var(--text-mute); font-size: 12.5px; font-style: italic; background: var(--surface-2); }
.wb-imgph svg { width: 15px; height: 15px; opacity: .7; }

/* word bank */
.wb-wordbank { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 12px; }
.wb-chip {
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-xs); padding: 5px 11px; font-size: 13px; font-weight: 600; color: var(--text);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); cursor: default;
}
.wb-chip:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-strong); transform: translateY(-1px); }
.wb-wb-label { font-size: 12px; font-weight: 700; color: var(--text-mute); width: 100%; margin-bottom: 3px; text-transform: uppercase; letter-spacing: .4px; }

/* checkable inline input */
.wb-input {
  display: inline-block; min-width: 6.5em; height: 30px; border: 0; border-bottom: 2px solid var(--border-2);
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; text-align: center;
  border-radius: 8px 8px 0 0; padding: 0 7px; outline: none; margin: 0 2px; vertical-align: baseline;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.wb-input:focus { border-bottom-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: 0 3px 0 -1px var(--accent-line); }
.wb-input.ok { border-color: var(--good); background: var(--good-bg); color: var(--good); font-weight: 700; animation: pop .34s var(--ease-pop); }
.wb-input.no { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); animation: shake .32s var(--ease); }
/* "close" = right word, wrong umlaut/ß. Amber, and deliberately NO shake — it must not read as failure. */
.wb-input.close { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); font-weight: 600; }
/* "given" = filled in by "Lösung eintragen" — neutral, never green, so it can't be mistaken for mastery */
.wb-input.given { border-color: var(--border-2); background: var(--surface-2); color: var(--text-soft); font-weight: 600; }
/* the correct answer, shown inline next to a wrong gap so a red box is never a dead end */
.wb-fix { display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: 12.5px; border-radius: var(--radius-xs); color: var(--good); background: var(--good-bg); white-space: nowrap; vertical-align: baseline; }
.wb-input-area { display: block; width: 100%; min-width: 0; height: auto; min-height: 32px; text-align: left; line-height: 1.5; padding: 7px 10px; margin: 5px 0 2px; border: 1px solid var(--accent); border-radius: var(--radius-xs); resize: vertical; overflow: hidden; background: var(--accent-tint); }
.wb-input-area:focus { box-shadow: var(--ring); }
.wb-input-area.ok { font-weight: 500; }

.wb-check {
  background: linear-gradient(150deg, var(--accent), var(--accent-strong)); color: var(--accent-ink); border-color: transparent;
  box-shadow: 0 3px 12px var(--accent-glow);
}
.wb-check:hover { color: var(--accent-ink); filter: brightness(1.05); box-shadow: 0 5px 16px var(--accent-glow); }
.wb-score { font-weight: 700; font-size: 13.5px; margin-left: 4px; }

.wb-answer.sample { background: var(--accent-2-tint); border-color: color-mix(in srgb, var(--accent-2) 34%, transparent); }
.wb-answer.sample .lab { color: var(--accent-2); }
[data-theme="dark"] .wb-answer.sample .lab { color: color-mix(in srgb, var(--accent-2) 82%, white); }

.wb-kindpill { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; margin-left: auto; flex: 0 0 auto; }
.wb-kindpill.fill { background: var(--accent-tint); color: var(--accent-strong); }
.wb-kindpill.sample { background: var(--accent-2-tint); color: var(--accent-2); }
[data-theme="dark"] .wb-kindpill.sample { color: color-mix(in srgb, var(--accent-2) 82%, white); }

.wb-reveal {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-soft);
  font-weight: 600; font-size: 13px; padding: 9px 14px; border-radius: var(--radius-xs);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.wb-reveal:hover { border-color: color-mix(in srgb, var(--good) 55%, var(--border-2)); color: var(--good); background: var(--surface-3); }
.wb-reveal:active { transform: scale(.97); }
.wb-reveal svg { width: 15px; height: 15px; }

.wb-answer {
  display: none; margin-top: 12px; padding: 14px 16px; border-radius: var(--radius-s);
  /* neutral, NOT green: looking the answer up must not be rendered as having been right */
  background: var(--surface-2); border: 1px solid var(--border-2);
  font-size: 14.5px; line-height: 1.65; color: var(--text); white-space: pre-wrap;
}
.wb-answer.show { display: block; animation: reveal var(--dur-2) var(--ease); }
.wb-answer .lab { font-weight: 800; color: var(--text-soft); margin-right: 6px; }
.wb-noans { font-size: 12.5px; color: var(--text-mute); font-style: italic; padding: 2px 0; }

.wb-banner {
  background:
    radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 55%),
    var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.wb-banner b { font-weight: 700; font-size: 15.5px; display: inline-flex; align-items: center; gap: 8px; }
.wb-banner b svg { width: 17px; height: 17px; color: var(--accent-strong); }
.wb-banner p { margin: 7px 0 0; color: var(--text-soft); font-size: 13.5px; line-height: 1.6; }
.wb-banner p b { font-size: inherit; display: inline; color: var(--text); }

/* categorization */
.wb-cat { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 10px 0; }
.wb-cat-col { display: flex; flex-direction: column; border: 1px solid var(--border-2); border-radius: var(--radius-s); overflow: hidden; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.wb-cat-col .ch { background: var(--surface-3); font-weight: 700; font-size: 13px; padding: 9px 11px; border-bottom: 1px solid var(--border); color: var(--text); }
.wb-cat-col textarea { border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; padding: 10px 11px; min-height: 96px; resize: vertical; outline: none; line-height: 1.8; }
.wb-cat-col textarea:focus { background: var(--accent-tint); }
.wb-cat-col.ok { border-color: var(--good); box-shadow: 0 0 0 1px var(--good-line); }
.wb-cat-col.ok .ch { background: var(--good-bg); color: var(--good); }

.wb-answerarea { width: 100%; border: 1px solid var(--border-2); border-radius: var(--radius-s); background: var(--surface-2); color: var(--text); font: inherit; font-size: 14.5px; padding: 11px 13px; min-height: 66px; resize: vertical; outline: none; line-height: 1.6; margin: 5px 0 2px; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.wb-answerarea:focus { border-color: var(--accent); background: var(--surface); box-shadow: var(--ring); }
.wb-answerlabel { font-size: 12px; font-weight: 700; color: var(--text-mute); margin: 8px 0 2px; text-transform: uppercase; letter-spacing: .4px; }

/* listening card inside the workbook */
.wb-ex.wb-listen { border-left: 3px solid var(--accent); }
.wb-ex.wb-ex-listen { border-left: 3px solid color-mix(in srgb, var(--accent) 50%, var(--border)); }
.wb-kindpill.listen { background: var(--accent-tint); color: var(--accent-strong); display: inline-flex; align-items: center; gap: 4px; }
.wb-kindpill.listen svg { width: 12px; height: 12px; }
.wb-listen .players { padding: 4px 17px 8px; }
.wb-transcript { display: none; flex-direction: column; gap: 11px; padding: 8px 18px 16px; }
.wb-transcript.open { display: flex; animation: reveal var(--dur-2) var(--ease); }

/* Kursbuch reading passages / boxes / sub-headings */
.wb-read {
  border: 1px solid var(--border); border-left: 3px solid var(--accent-2);
  border-radius: var(--radius-s); margin-bottom: 13px;
  background: linear-gradient(135deg, var(--accent-2-tint), var(--surface) 60%); overflow: hidden;
}
.wb-read-head { display: flex; gap: 11px; align-items: center; padding: 12px 16px 6px; }
.wb-read-lab { font-weight: 800; font-size: 12.5px; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 15%, transparent); padding: 2px 9px; border-radius: 8px; flex: 0 0 auto; }
[data-theme="dark"] .wb-read-lab { color: color-mix(in srgb, var(--accent-2) 82%, white); }
.wb-read-title { font-weight: 650; font-size: 14px; color: var(--text-soft); flex: 1; }
.wb-kindpill.read { background: color-mix(in srgb, var(--accent-2) 15%, transparent); color: var(--accent-2); }
[data-theme="dark"] .wb-kindpill.read { color: color-mix(in srgb, var(--accent-2) 82%, white); }
.wb-read-body { padding: 4px 17px 15px; white-space: pre-wrap; font-family: var(--font-serif); font-size: 17px; line-height: 1.7; color: var(--text); max-width: calc(var(--measure) + 2.2em); }
.wb-read-body.clip { max-height: 6em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 52%, transparent); mask-image: linear-gradient(#000 52%, transparent); }
.wb-read-more { margin: 0 16px 14px; }
.wb-read-heading { font-family: var(--font-serif); font-weight: 600; font-size: 18px; color: var(--text); display: flex; gap: 10px; align-items: baseline; margin: 20px 2px 8px; }
.wb-read-heading .wb-ex-lab { min-width: 28px; height: 25px; font-family: var(--font-sans); }

/* ============================================================
   Flashcards (Karteikarten)
   ============================================================ */
.fc-wrap { max-width: 780px; margin: 0 auto; }
.fc-head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; flex-wrap: wrap; }
.fc-head > svg { width: 24px; height: 24px; color: var(--accent-strong); }
.fc-head h1 { margin: 0; font-family: var(--font-serif); font-size: clamp(24px, 3vw, 32px); letter-spacing: -.4px; font-weight: 600; }
.fc-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.fc-stat { flex: 1; min-width: 100px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 15px 17px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.fc-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.fc-stat .n { font-family: var(--font-serif); font-size: 30px; font-weight: 600; letter-spacing: -.5px; line-height: 1; }
.fc-stat .l { font-size: 12px; color: var(--text-mute); font-weight: 600; margin-top: 5px; }
.fc-stat.due .n { color: var(--accent-strong); }

.fc-card-area { perspective: 1600px; margin: 8px 0 18px; }
.fc-card { position: relative; width: 100%; min-height: 280px; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4,.15,.2,1); cursor: pointer; }
.fc-card.flipped { transform: rotateY(180deg); }
.fc-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; text-align: center; padding: 36px 30px;
  background:
    radial-gradient(140% 120% at 50% -10%, var(--accent-soft), transparent 55%),
    var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.fc-face .tag { position: absolute; top: 16px; left: 18px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--accent-strong); display: inline-flex; align-items: center; gap: 6px; }
.fc-face .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.fc-face .ctx { position: absolute; bottom: 18px; left: 22px; right: 22px; font-size: 13px; color: var(--text-mute); font-style: italic; line-height: 1.5; }
.fc-back { transform: rotateY(180deg); }
.fc-face .word { font-family: var(--font-serif); font-size: clamp(26px, 5vw, 38px); font-weight: 600; letter-spacing: -.5px; line-height: 1.15; }
.fc-face .sub { font-size: 14px; color: var(--text-soft); }
.fc-hint { text-align: center; font-size: 12.5px; color: var(--text-mute); margin-bottom: 15px; }
.fc-rate { display: flex; gap: 11px; }
.fc-rate button { flex: 1; padding: 15px; border-radius: var(--radius-s); border: 0; font-weight: 700; font-size: 15px; transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); color: #fff; }
.fc-rate button:active { transform: scale(.97); }
.fc-again { background: linear-gradient(150deg, var(--bad), color-mix(in srgb, var(--bad) 80%, #000)); box-shadow: 0 4px 14px color-mix(in srgb, var(--bad) 34%, transparent); } .fc-again:hover { filter: brightness(1.06); transform: translateY(-1px); }
.fc-good { background: linear-gradient(150deg, var(--good), color-mix(in srgb, var(--good) 78%, #000)); box-shadow: 0 4px 14px color-mix(in srgb, var(--good) 34%, transparent); } .fc-good:hover { filter: brightness(1.06); transform: translateY(-1px); }
.fc-flipbtn { width: 100%; padding: 15px; border-radius: var(--radius-s); border: 0; background: linear-gradient(150deg, var(--accent), var(--accent-strong)); color: var(--accent-ink); font-weight: 700; font-size: 15px; box-shadow: 0 4px 16px var(--accent-glow); transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease); }
.fc-flipbtn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.fc-flipbtn:active { transform: scale(.98); }

.fc-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.seg { display: flex; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 4px; gap: 3px; }
.seg button { border: 0; background: transparent; color: var(--text-soft); font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 9px; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--surface); color: var(--accent-strong); box-shadow: var(--shadow-sm); }

.fc-add-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 11px; }
.fc-add-form input, .fc-add-form textarea { width: 100%; border: 1px solid var(--border-2); border-radius: var(--radius-xs); background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; padding: 11px 13px; outline: none; resize: vertical; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.fc-add-form input:focus, .fc-add-form textarea:focus { border-color: var(--accent); background: var(--surface); box-shadow: var(--ring); }
.fc-add-form label { font-size: 12px; font-weight: 700; color: var(--text-mute); margin-bottom: -5px; }
.btn-primary { border: 0; background: linear-gradient(150deg, var(--accent), var(--accent-strong)); color: var(--accent-ink); font-weight: 700; font-size: 14px; padding: 12px 19px; border-radius: var(--radius-s); align-self: flex-start; box-shadow: 0 4px 14px var(--accent-glow); display: inline-flex; align-items: center; gap: 8px; transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 6px 18px var(--accent-glow); }
.btn-primary:active { transform: scale(.98); }
.btn-primary svg { width: 16px; height: 16px; }

.fc-list { display: flex; flex-direction: column; gap: 9px; }
.fc-row { display: flex; align-items: center; gap: 13px; padding: 13px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); box-shadow: var(--shadow-xs); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.fc-row:hover { box-shadow: var(--shadow-sm); }
.fc-row .ff { flex: 1; min-width: 0; }
.fc-row .ff .a { font-weight: 700; font-size: 14.5px; }
.fc-row .ff .b { font-size: 13px; color: var(--text-soft); margin-top: 2px; }
.fc-row .box { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text-mute); white-space: nowrap; }
.fc-del { border: 0; background: transparent; color: var(--text-mute); padding: 7px; border-radius: var(--radius-xs); display: grid; place-items: center; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.fc-del:hover { color: var(--bad); background: var(--bad-bg); }

/* ============================================================
   Selection → flashcard, toast
   ============================================================ */
.sel-add { position: absolute; z-index: 80; transform: translate(-50%, -120%); background: var(--text); color: var(--bg); border: 0; font-weight: 700; font-size: 12.5px; padding: 8px 13px; border-radius: var(--radius-xs); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 6px; white-space: nowrap; animation: selpop .14s var(--ease-pop); }
.sel-add::after { content: ""; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--text); border-bottom: 0; }
.sel-add svg { width: 14px; height: 14px; }
@keyframes selpop { from { opacity: 0; transform: translate(-50%, -100%) scale(.9); } to { opacity: 1; transform: translate(-50%, -120%) scale(1); } }
@media (pointer: coarse) {   /* bigger, easier tap target on phones/tablets */
  .sel-add { font-size: 14px; padding: 11px 17px; border-radius: var(--radius-s); gap: 8px; }
  .sel-add svg { width: 16px; height: 16px; }
}

.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); font-weight: 650; font-size: 14px; padding: 13px 21px; border-radius: var(--radius-s); box-shadow: var(--shadow-lg); z-index: 200; display: flex; align-items: center; gap: 9px; animation: toastin .26s var(--ease-pop); }
.toast svg { width: 17px; height: 17px; color: var(--accent); }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ============================================================
   Misc: empty, hint, intro, search
   ============================================================ */
.empty { text-align: center; color: var(--text-mute); padding: 64px 20px; }
.empty svg { width: 48px; height: 48px; opacity: .4; margin-bottom: 12px; }
.hint { font-size: 13px; color: var(--text-mute); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; line-height: 1.55; }
.hint svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: .8; }
.intro-card { background: radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 55%), var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.intro-card p { margin: 6px 0 0; color: var(--text-soft); font-size: 14px; }

.search-results .card-head .sec mark { background: var(--accent-tint); color: inherit; padding: 0 3px; border-radius: 4px; }
.result-snippet { padding: 0 20px 18px; font-size: 14.5px; color: var(--text-soft); line-height: 1.65; }
.result-snippet mark { background: var(--accent-tint); color: var(--text); padding: 0 3px; border-radius: 4px; font-weight: 600; }
.crumb { font-size: 12px; color: var(--text-mute); cursor: pointer; transition: color var(--dur) var(--ease); }
.crumb:hover { color: var(--accent-strong); }

/* ============================================================
   Motion keyframes
   ============================================================ */
@keyframes pop { 0% { transform: scale(1); } 42% { transform: scale(1.11); } 100% { transform: scale(1); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 22% { transform: translateX(-3px); } 46% { transform: translateX(3px); } 70% { transform: translateX(-2px); } 88% { transform: translateX(1px); } }
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ============================================================
   Responsive
   ============================================================ */
.menu-btn { display: none; }
@media (max-width: 880px) {
  :root { --sidebar-w: 280px; }
  .menu-btn { display: grid; }
  .sidebar {
    position: fixed; left: 0; top: var(--header-h); z-index: 40; background: var(--surface);
    transform: translateX(-104%); transition: transform .28s var(--ease); box-shadow: var(--shadow-lg);
    border-right: 1px solid var(--border);
  }
  .sidebar.open { transform: none; }
  .scrim { display: none; position: fixed; inset: var(--header-h) 0 0 0; background: color-mix(in srgb, #050912 55%, transparent); backdrop-filter: blur(2px); z-index: 39; }
  .scrim.show { display: block; animation: reveal var(--dur-2) var(--ease); }
  .search-box { flex: 0 1 160px; min-width: 46px; }   /* let search shrink so the header never overflows */
  .search-box input { width: 100%; min-width: 0; }
  .brand .txt { display: none; }         /* logo-only in compact/drawer mode — keeps the header from overflowing */
  .main { padding: 24px clamp(16px, 4vw, 28px) 80px; }
}
@media (max-width: 560px) {
  .app-header { gap: 7px; padding: 0 11px; }
  .search-box { display: none; }        /* declutter the header so nothing overflows off-screen */
  #themeBtn { display: none; }           /* theme toggle moves into the profile menu on phones */
  .course-switch button { padding: 7px 12px; font-size: 12.5px; }
  .icon-btn svg { width: 19px; height: 19px; }
  .main { padding: 20px 15px 78px; }
  .lp-nav { margin-inline: -15px; padding-inline: 15px; }   /* edge-to-edge sticky bar */
  .card-head, .players, .transcript, .transcript-bar, .cloze-text, .cloze-actions { padding-left: 15px; padding-right: 15px; }
  .fc-rate { flex-direction: column; }
  /* keep table columns readable on phones — scroll the table instead of squeezing words to one letter per line */
  .wb-table { width: auto; min-width: 100%; }
  .wb-table th, .wb-table td { min-width: 5.5em; padding: 8px 10px; }
  .wb-table-wrap { -webkit-overflow-scrolling: touch; }
  /* belt-and-braces with the (pointer:coarse) block above: any 560px screen is a phone, and iOS
     Safari force-zooms on focus for any field under 16px — and never zooms back out */
  .wb-input, .wb-input-area, .wb-finput, textarea.wb-finput.long,
  .wb-answerarea, .wb-cat-col textarea, .cloze-text input,
  .fc-add-form input, .fc-add-form textarea,
  .search-box input, .gate-add input, .modal-card input { font-size: 16px; }
  .wb-input { height: 34px; }
  .wb-finput, .cloze-text input { height: 36px; }
  /* all four tabs visible at once instead of a hidden horizontal scroll */
  .tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; overflow: visible; }
  .tabs button { flex-direction: column; gap: 3px; padding: 8px 2px; font-size: 11.5px; position: relative; min-width: 0; }
  .tabs button span:not(.badge) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .tabs button .badge { position: absolute; top: 1px; left: calc(50% + 6px); font-size: 9px; padding: 0 4px; min-width: 0; line-height: 1.5; }
  .tabs button.active::after { left: 6px; right: 6px; }
  /* a touch larger & easier to read on phones (label stays below the German it introduces) */
  .wb-ex-instr { font-size: 14px; }
  .wb-ex-body  { font-size: 16px; }
  .wb-read-body { font-size: 17px; }
  .de-def { font-size: 15.5px; }
  .de-de  { font-size: 14.5px; }
}

/* ============ Profiles / avatars / competition ============ */
.pf-ava { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#fff; font-weight:800; font-size:12px; letter-spacing:.3px; flex:0 0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.pf-ava.sm { width:26px; height:26px; font-size:11px; }
.pf-ava.lg { width:60px; height:60px; font-size:22px; }
.pf-ava.add { background: var(--surface-2)!important; color: var(--text-mute); box-shadow: inset 0 0 0 2px var(--border-2); }
/* sync status dot — tells the truth about whether progress actually saved */
#syncDot { width:8px; height:8px; border-radius:50%; background:var(--good); flex:0 0 auto; margin-right:-4px; transition:background var(--dur) var(--ease); }
#syncDot[data-s="pending"] { background:var(--text-mute); }
#syncDot[data-s="offline"], #syncDot[data-s="auth"] { background:var(--warn); }
@media (max-width:560px) { #syncDot { width:7px; height:7px; margin-right:-3px; } }

.profile-btn { padding:0!important; }
.profile-btn .pf-ava { width:32px; height:32px; }

/* profile gate */
.gate { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px; padding:40px 20px; background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--accent) 12%, var(--bg)), var(--bg)); }
.gate-brand { text-align:center; }
.gate-brand .logo { width:64px; height:64px; border-radius:18px; margin:0 auto 14px; font-size:34px; }
.gate-brand h1 { margin:0; font-size:30px; font-weight:900; letter-spacing:-.5px; }
.gate-brand p { margin:6px 0 0; color:var(--text-mute); font-size:16px; }
.gate-profiles { display:flex; flex-wrap:wrap; gap:18px; justify-content:center; max-width:640px; }
.gate-prof { display:flex; flex-direction:column; align-items:center; gap:10px; background:none; border:0; color:var(--text-soft); font-weight:700; font-size:14px; padding:10px; border-radius:14px; transition:transform .12s, background .12s; }
.gate-prof:hover { transform:translateY(-3px); background: var(--surface); box-shadow: var(--shadow); color:var(--text); }
.gate-prof .pf-ava.lg { transition: box-shadow .12s; }
.gate-prof:hover .pf-ava.lg { box-shadow: 0 6px 20px rgba(20,40,60,.18), inset 0 0 0 1px rgba(255,255,255,.15); }
.gate-add { display:flex; gap:8px; align-items:center; }
.gate-add input { width:170px; padding:11px 13px; border:1px solid var(--border-2); border-radius:11px; background:var(--surface); color:var(--text); font:inherit; font-size:15px; outline:none; }
.gate-add input:focus { border-color: var(--accent); }

/* profile dropdown */
.prof-menu { position:absolute; top:calc(var(--header-h) - 6px); right:12px; z-index:60; width:250px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow: var(--shadow-lg); padding:7px; animation: menuin .13s ease; }
/* renamed from "pop": it was silently overriding the success bounce at l.847, so every correct
   answer faded out instead of popping. Keep these names distinct. */
@keyframes menuin { from { opacity:0; transform:translateY(-6px) scale(.98);} to { opacity:1; transform:none; } }
.pm-head { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--text-mute); padding:7px 10px 4px; }
.pm-row { display:flex; align-items:center; gap:10px; width:100%; background:none; border:0; padding:9px 10px; border-radius:9px; color:var(--text); font-weight:600; font-size:14px; text-align:left; }
.pm-row:hover { background: var(--surface-2); }
.pm-row.active { color: var(--accent); }
.pm-row svg { width:16px; height:16px; }
.pm-name { flex:1; }
.pm-add, .pm-comp { color: var(--text-soft); }
.pm-comp { border-top:1px solid var(--border); margin-top:4px; padding-top:11px; color: var(--accent-2); }

/* competition board */
.board { display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.board-row { display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-s); padding:12px 15px; box-shadow: var(--shadow); }
.board-row.me { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.board-row .rank { font-weight:900; font-size:16px; color:var(--text-mute); width:22px; text-align:center; }
.board-row:first-child .rank { color: var(--warn); }
.bd-main { flex:1; min-width:0; }
.bd-name { font-weight:800; font-size:14.5px; }
.bd-bar { height:7px; border-radius:5px; background:var(--surface-2); margin:6px 0 5px; overflow:hidden; }
.bd-bar span { display:block; height:100%; border-radius:5px; transition:width .5s; }
.bd-stats { font-size:12px; color:var(--text-mute); }
.bd-xp { font-weight:900; font-size:20px; color:var(--text); text-align:right; }
.bd-xp small { display:block; font-size:10px; font-weight:700; color:var(--text-mute); }
.btn-ghost { display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid var(--border-2); color:var(--text-soft); padding:9px 14px; border-radius:10px; font-weight:700; font-size:13px; }
.btn-ghost:hover { background:var(--surface-2); color:var(--text); }

/* ============ Lernpfad (guided slide mode) ============ */
.lp-cta { display:flex; align-items:center; gap:14px; width:100%; text-align:left; margin:0 0 18px; padding:15px 18px; border:0; border-radius:var(--radius); cursor:pointer;
  background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 65%, var(--accent-2))); color:#fff; box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 32%, transparent); transition: transform .12s, box-shadow .12s; }
.lp-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 40%, transparent); }
.lpc-play { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.22); flex:0 0 auto; }
.lpc-play svg { width:22px; height:22px; fill:#fff; }
.lpc-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lpc-txt b { font-size:16px; font-weight:800; }
.lpc-txt small { font-size:12.5px; opacity:.9; }
.lpc-ring { width:38px; height:38px; border-radius:50%; flex:0 0 auto; background: conic-gradient(#fff calc(var(--p)*1%), rgba(255,255,255,.28) 0); -webkit-mask: radial-gradient(circle 12px at 50% 50%, transparent 98%, #000 100%); mask: radial-gradient(circle 12px at 50% 50%, transparent 98%, #000 100%); }

.lp { max-width:760px; margin:0 auto; }
.lp-top { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.lp-exit { background:var(--surface-2); border:1px solid var(--border); color:var(--text-soft); width:38px; height:38px; border-radius:10px; display:grid; place-items:center; }
.lp-exit svg { transform: rotate(180deg); }
.lp-exit:hover { color:var(--text); }
.lp-partinfo { flex:1; min-width:0; display:flex; flex-direction:column; }
.lp-partinfo b { font-size:15.5px; font-weight:800; }
.lp-partinfo span { font-size:12px; color:var(--text-mute); }
.lp-star { background:var(--surface-2); border:1px solid var(--border); color:var(--text-mute); width:38px; height:38px; border-radius:10px; display:grid; place-items:center; }
.lp-star svg { width:18px; height:18px; }
.lp-star.on { color:#fff; background:var(--warn); border-color:var(--warn); }
.lp-prog { height:8px; border-radius:5px; background:var(--surface-2); overflow:hidden; }
.lp-prog span { display:block; height:100%; background:var(--accent); border-radius:5px; transition:width .3s; }
.lp-count { font-size:12px; color:var(--text-mute); margin:6px 2px 14px; font-weight:600; }
.lp-stage { min-height:120px; }
.lp-stage .wb-ex, .lp-stage .wb-read, .lp-stage .wb-listen, .lp-stage .vocab-card { margin-bottom:0; }
.lp-stage .vocab-card { max-width:none; width:100%; }
.lp-nav { display:flex; gap:10px; margin-top:20px; }
.lp-nav .btn-ghost { flex:0 0 auto; }
.lp-next { flex:1; justify-content:center; }
.lp-nav button[disabled] { opacity:.4; pointer-events:none; }

/* ---- touch devices: don't let iOS force-zoom, and keep the primary action in reach ---- */
@media (pointer: coarse) {
  /* iOS Safari zooms in on focus for any field under 16px and never zooms back out */
  .wb-input, .wb-input-area, .wb-finput, textarea.wb-finput.long,
  .wb-answerarea, .wb-cat-col textarea, .cloze-text input,
  .fc-add-form input, .fc-add-form textarea,
  .search-box input, .gate-add input, .modal-card input { font-size: 16px; }
  .wb-input { height: 34px; }
  .wb-finput, .cloze-text input { height: 36px; }

  .lp-nav {
    position: sticky; bottom: 0; z-index: 20;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
  }
  /* .btn-primary sets align-self:flex-start, which left the two nav buttons mismatched in height */
  .lp-nav .btn-ghost, .lp-nav .lp-next { min-height: 48px; align-self: stretch; }
  .lp-exit, .lp-star { width: 44px; height: 44px; }
}

.lp-divider { text-align:center; padding:26px 16px; background: color-mix(in srgb, var(--accent) 5%, var(--surface)); border:1px dashed color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius:var(--radius); }
.lpd-icon { width:52px; height:52px; border-radius:14px; margin:0 auto 12px; display:grid; place-items:center; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); }
.lpd-icon svg { width:26px; height:26px; }
.lp-divider h2 { margin:0; font-size:22px; font-weight:900; }
.lp-divider p { margin:7px 0 0; color:var(--text-soft); font-size:14px; }
.lp-divider .gr-intro { text-align:left; margin-top:16px; }

.lp-inter { text-align:center; padding:40px 20px; display:flex; flex-direction:column; align-items:center; }
.lp-check { width:74px; height:74px; border-radius:50%; display:grid; place-items:center; background:var(--good-bg); color:var(--good); margin-bottom:18px; animation: pop .3s var(--ease-pop); }
.lp-check svg { width:40px; height:40px; }
.lp-check.big { width:92px; height:92px; } .lp-check.big svg { width:52px; height:52px; }
.lp-inter h1 { margin:0 0 6px; font-size:26px; font-weight:900; }
.lp-inter p { margin:0 0 22px; color:var(--text-soft); }
.lp-big { font-size:16px; padding:13px 26px; }

/* what you actually wrote last time, shown above the exercise in the Rückblick */
.lp-yourans { background:var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--warn); border-radius:var(--radius-s); padding:10px 13px; margin:14px 0 -6px; font-size:14px; color:var(--text); }
.lp-yourans .lab { display:block; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-mute); margin-bottom:4px; }

.lp-stats { display:flex; gap:12px; margin:6px 0 20px; }
.lps { flex:1; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-s); padding:16px 10px; box-shadow:var(--shadow); }
.lps b { display:block; font-size:28px; font-weight:900; color:var(--text); }
.lps span { font-size:12px; color:var(--text-mute); font-weight:600; }
.lps.bad b { color:var(--bad); }

/* ============ Dictionary ============ */
.dict-search { display:flex; align-items:center; gap:10px; background:var(--surface); border:1.5px solid var(--border-2); border-radius:12px; padding:0 14px; margin:0 0 14px; box-shadow:var(--shadow); transition:border-color .12s; }
.dict-search:focus-within { border-color:var(--accent); }
.dict-search svg { color:var(--text-mute); }
.dict-search input { flex:1; border:0; background:none; outline:none; font:inherit; font-size:17px; color:var(--text); padding:14px 0; }
.dict-results { display:flex; flex-direction:column; gap:12px; }
.dict-entry { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); }
.de-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.de-word { font-size:24px; font-weight:800; letter-spacing:-.3px; }
.de-art { font-weight:800; }
.de-pl { font-size:13px; color:var(--text-mute); font-weight:600; }
.de-pos-box { margin-top:8px; }
.de-pos { display:inline-block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--accent-2); background:color-mix(in srgb, var(--accent-2) 12%, transparent); padding:2px 8px; border-radius:20px; margin-bottom:8px; }
.de-sense { display:flex; gap:10px; padding:5px 0; }
.de-num { flex:0 0 auto; width:20px; height:20px; border-radius:6px; background:var(--surface-2); color:var(--text-mute); font-size:11px; font-weight:800; display:grid; place-items:center; margin-top:2px; }
.de-body { flex:1; min-width:0; }
.de-def { font-size:15px; font-weight:600; color:var(--text); line-height:1.5; }
.de-ex { margin:5px 0 3px; padding-left:11px; border-left:2px solid var(--border-2); }
.de-de { display:block; font-size:14px; color:var(--text-soft); font-style:italic; }
.de-en { display:block; font-size:13px; color:var(--text-mute); }
.de-add { margin-top:12px; }
.dict-suglabel { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--text-mute); margin:6px 2px 0; }
.dict-sugs { display:flex; flex-wrap:wrap; gap:8px; }
.dict-sug { display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:8px 12px; font-weight:700; font-size:14px; color:var(--text); text-align:left; max-width:220px; }
.dict-sug:hover { border-color:var(--accent); }
.dict-sug i { font-style:normal; font-weight:800; }
.dict-sug small { font-weight:500; font-size:11.5px; color:var(--text-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:190px; }
.header-dict svg { width:19px; height:19px; }

/* flashcard back with dictionary def */
.fc-gender { font-size:16px; font-weight:800; margin-bottom:6px; }
.fc-def { font-size:clamp(15px,3vw,19px); font-weight:700; color:var(--text); line-height:1.4; margin-bottom:10px; }
.fc-example { font-size:14px; font-style:italic; color:var(--text-soft); line-height:1.5; }
.de-via { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-mute); margin:-2px 0 8px; }
.de-via svg { width:14px; height:14px; }
.de-via b { color:var(--accent); }

/* ============ Flashcard management (list / delete / clear) ============ */
.fc-list { margin-top:20px; border-top:1px solid var(--border); padding-top:16px; }
.fc-list-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; color:var(--text-soft); }
.fc-list-head svg { width:17px; height:17px; }
.fc-list-head h3 { margin:0; font-size:14px; font-weight:800; }
.fc-row { display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface); margin-bottom:7px; }
.fc-row-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.fc-row-main b { font-size:14.5px; font-weight:700; }
.fc-row-main small { font-size:12px; color:var(--text-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fc-del { flex:0 0 auto; width:34px; height:34px; border-radius:9px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-mute); display:grid; place-items:center; }
.fc-del svg { width:16px; height:16px; }
.fc-del:hover { color:var(--bad); border-color:var(--bad); background:var(--bad-bg); }
.fc-clear { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:12px; }
.fc-clearbtn:hover { color:var(--bad); border-color:var(--bad); }
.fc-confirm-q { font-weight:700; font-size:14px; color:var(--text); }
.btn-danger { background:var(--bad); color:#fff; border:0; padding:9px 16px; border-radius:10px; font-weight:800; font-size:13.5px; }
.btn-danger:hover { filter:brightness(1.06); }

/* ============ Login gate + change-password modal ============ */
.login-form { display:flex; flex-direction:column; gap:12px; width:min(320px, 90vw); }
.login-form input { padding:13px 15px; border:1.5px solid var(--border-2); border-radius:12px; background:var(--surface); color:var(--text); font:inherit; font-size:16px; outline:none; }
.login-form input:focus { border-color:var(--accent); }
.login-form .btn-primary { padding:13px; font-size:16px; justify-content:center; margin-top:2px; }
.login-err { color:var(--bad); font-size:13px; font-weight:600; text-align:center; min-height:16px; }
.modal-scrim { position:fixed; inset:0; z-index:200; background:rgba(15,25,35,.5); backdrop-filter:blur(3px); display:grid; place-items:center; padding:20px; animation:menuin .12s ease; }
.modal-card { width:min(360px,92vw); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:22px; display:flex; flex-direction:column; gap:12px; }
.modal-card h2 { margin:0 0 4px; font-size:19px; font-weight:800; }
.modal-card input { padding:12px 14px; border:1.5px solid var(--border-2); border-radius:11px; background:var(--surface); color:var(--text); font:inherit; font-size:15px; outline:none; }
.modal-card input:focus { border-color:var(--accent); }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:4px; }