:root {
    /* ---- Colors (tuned for >= 4.5:1 text contrast on surfaces) ---- */
    --bg: #c7caf6;
    --surface: #ffffff;
    --surface-2: #eef0fc;
    --ink: #17171c;
    --ink-muted: #55555f; /* AA on surface 7.4:1, on bg 4.6:1 */
    --accent: #4338ca;
    --accent-ink: #ffffff;
    --accent-soft: #e4e4fa;
    --gold: #c1832c;
    --gold-soft: #f1e2c4;
    --gold-ink: #241a06; /* text on gold pills */
    --cta: #ffd447;
    --cta-ink: #221a02;
    --lav: #e7e3f8;
    --peach: #fbd9c4;
    --mint: #d2efe0;
    --sky: #d6e9f7;
    --ok: #3d6b52;
    --bad: #a8462f;
    --danger: #a8462f;
    --success: #3d6b52;
    --border: #cbcef0;
    --der: #2a4f73;
    --die: #8a2f42;
    --das: #35713f;
    --der-bg: #dbe7f3;
    --die-bg: #f3dbe0;
    --das-bg: #ddefe2;
    --btn-min-h: 44px;
    --btn-pad: 12px 20px;
    --btn-fs: 16px;
    --card-pad: 22px;
    --card-pad-mobile: 16px;
    --input-min-h: 44px;
    --input-pad: 12px;
    --input-fs: 16px;
    --focus-width: 3px;
    --shadow: 0 1px 0 var(--border), 0 10px 24px -18px rgba(60,55,120,0.28);
    /* ---- Type: one clean system stack (no webfonts) ---- */
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-sans: var(--font);
    --font-serif: var(--font); /* kept as alias so headings stay consistent */
    --font-display: var(--font);
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-base: 14px;
    --fs-md: 15px;
    --fs-lg: 16px;
    --fs-xl: 19px;
    --fs-2xl: 22px;
    --fs-3xl: 28px;
    --fs-hero: 32px;
    --fs-title: 30px;
    /* ---- Spacing scale ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 28px;
    --tap: 44px; /* minimum touch target */
    --gap: 8px; /* minimum gap between tap targets */
    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --fs-stat: 38px;
    --fs-result: 60px;
    --content-max: 760px;
    --card-max: 460px;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #12121c;
      --surface: #1c1c2b;
      --surface-2: #262636;
      --ink: #ecedf6;
      --ink-muted: #a6a6bb;
      --accent: #8b93f8;
      --accent-ink: #12121c;
      --accent-soft: #2a2a45;
      --gold: #e0a94e;
      --gold-soft: #3a3320;
      --gold-ink: #241a06;
      --cta: #ffd447;
      --cta-ink: #221a02;
      --lav: #2e2b45;
      --peach: #3a2c2c;
      --mint: #213a2c;
      --sky: #213040;
      --ok: #7fc0a0;
      --bad: #e08a72;
      --danger: #e08a72;
      --success: #7fc0a0;
      --border: #33334a;
      --der: #7fb0e8;
      --die: #f0a0b0;
      --das: #8fd6a0;
    }
  }
  :root[data-theme="dark"] {
    --bg: #12121c;
    --surface: #1c1c2b;
    --surface-2: #262636;
    --ink: #ecedf6;
    --ink-muted: #a6a6bb;
    --accent: #8b93f8;
    --accent-ink: #12121c;
    --accent-soft: #2a2a45;
    --gold: #e0a94e;
    --gold-soft: #3a3320;
    --gold-ink: #241a06;
    --cta: #ffd447;
    --cta-ink: #221a02;
    --lav: #2e2b45;
    --peach: #3a2c2c;
    --mint: #213a2c;
    --sky: #213040;
    --ok: #7fc0a0;
    --bad: #e08a72;
    --danger: #e08a72;
    --success: #7fc0a0;
    --border: #33334a;
    --der: #7fb0e8;
    --die: #f0a0b0;
    --das: #8fd6a0;
  }
  * { box-sizing: border-box; }
  /* Phase 7: calm 150-200ms motion */
  button, summary, .tab-btn, .match-card, .mc-option, .rate-btn,
  .filter-pill, .word-row, .candidate-row, .icon-btn, .auth-btn {
    transition: background-color 180ms ease, border-color 180ms ease,
      color 180ms ease, box-shadow 180ms ease;
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
    }
  }
  html { scroll-padding-top: env(safe-area-inset-top, 0px); }
  html, body { height: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-lg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  .app {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 28px 20px 60px;
  }
  header.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
    flex-wrap: wrap;
  }
  h1 {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--fs-title);
    margin: 0;
    letter-spacing: -0.01em;
  }
  .tagline {
    color: var(--ink-muted);
    font-size: var(--fs-base);
    margin-top: 2px;
  }
  .lang-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
  }
  .lang-btn {
    font-family: var(--font-sans);
    background: var(--surface);
    border: none;
    color: var(--ink-muted);
    padding: 6px 13px;
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
  }
  .lang-btn.active { background: var(--accent); color: var(--accent-ink); }
  .due-pill {
    background: var(--gold);
    color: var(--gold-ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .auth-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: none;
    padding: 4px 4px 4px 10px;
    margin-bottom: 8px;
    font-size: var(--fs-sm);
    border-radius: 999px;
    width: fit-content;
    max-width: 100%;
    min-height: 32px;
  }
  .auth-bar .auth-status { color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52vw; }
  .auth-bar .auth-status strong { color: var(--ink); font-weight: 600; }
  .auth-bar .spacer { display: none; }
  .auth-bar .auth-btn { min-height: 32px; padding: 4px 12px; font-size: var(--fs-sm); }
  .auth-btn {
    font-family: var(--font-sans);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--ink);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
  }
  .auth-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .auth-btn:disabled { opacity: 0.55; cursor: default; }
  .sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); display: inline-block; }
  .sync-dot.cloud { background: var(--success); }
  .sync-dot.local { background: var(--gold); }

  /* ---------- Mobile (375px) — layout only, no logic changes ---------- */
  @media (max-width: 560px) {
    .app { padding: 20px 14px calc(118px + env(safe-area-inset-bottom, 0px)); }
    h1 { font-size: var(--fs-2xl); }
    .card { padding: 16px; }
    .top--compact .tagline { display: none; }
    /* Tabs: fixed full-width bottom bar with rounded top corners */
    nav.tabs {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 50;
      flex-wrap: nowrap;
      justify-content: space-around;
      gap: 2px;
      margin: 0;
      padding: 8px 6px calc(10px + env(safe-area-inset-bottom, 0px));
      background: var(--surface);
      border-top: 1px solid var(--border);
      border-radius: 18px 18px 0 0;
      box-shadow: 0 -8px 24px -16px rgba(0,0,0,0.3);
    }
    nav.tabs button {
      flex: 1 1 0;
      min-width: 0;
      max-width: 20%;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      padding: 8px 2px 6px;
      min-height: var(--tap);
      border-radius: 12px;
      font-size: 11px;
      position: relative;
      background: transparent;
    }
    nav.tabs button.active {
      color: var(--accent);
      background: transparent;
      font-weight: 700;
    }
    nav.tabs button.active::after {
      content: "";
      width: 16px;
      height: 4px;
      border-radius: 999px;
      background: var(--accent);
      display: block;
    }
    /* Auth bar: stack status above buttons */
    .auth-bar { font-size: var(--fs-sm); }
    .auth-bar .spacer { display: none; }
    /* Rate buttons: 2x2 grid so labels fit */
    .rate-row { grid-template-columns: repeat(2, 1fr); }
    /* Add/edit forms: single column so selects don't squeeze; */
    /* except the Type/Level/Gender row: 2-up + full-width gender pills */
    .row2 { grid-template-columns: 1fr; }
    /* Pills need room on narrow screens: Type/Level share a row,
       Gender pills go full-width below instead of a squeezed 3-up */
    #panel-add .card .row2:has(#f-gender),
    #editModal .card .row2:has(#e-gender) { grid-template-columns: 1fr 1fr; gap: 8px; }
    #panel-add .card #f-gender-wrap,
    #editModal .card #e-gender-wrap { grid-column: 1 / -1; }
    /* Flashcard sizing is governed by the base .flashcard rule further down
       (it appears later in the file, so an override here would lose the cascade). */
    .german-sentence { font-size: var(--fs-md); }
    .cloze-sentence { font-size: var(--fs-lg); }
    .due-pill { font-size: var(--fs-xs); }
    .stat-grid { gap: 8px; }
    .stat-num { font-size: 24px; }
    /* Hero ring must fit the narrower mobile tiles */
    .stat-grid .stat-box:nth-child(3) .stat-num { width: 68px; height: 68px; font-size: 18px; }
    .match-card { font-size: var(--fs-base); min-height: 56px; }
    .mc-option { font-size: var(--fs-base); padding: 11px 12px; }
  }
  /* Tablet gutters: slightly wider side padding than mobile. (Was a nested
     @media inside the max-width:560 block — dead by impossible intersection;
     lifted out. Dropped its no-op .stat-grid gap 12px = base.) */
  @media (min-width: 561px) and (max-width: 860px) {
    .app { padding: 24px 24px 60px; }
  }

  /* ---------- Touch targets (44px) + no-zoom inputs (16px) — CSS only ---------- */
  /* iOS Safari zooms on focus when input/select/textarea font-size < 16px. */
  input[type=text], textarea, select,
  .answer-input-row input,
  .freewrite-panel textarea,
  .search-row input, .search-row select {
    font-size: var(--fs-lg);
  }
  /* All tappable controls: at least 44px tall, 8px+ gaps to neighbours */
  nav.tabs button {
    min-height: 44px;
  }
  nav.tabs { gap: 8px; }
  .lang-btn {
    min-height: 44px;
    padding: 6px 16px;
  }
  .auth-btn {
    min-height: 44px;
    padding: 8px 18px;
  }
  .auth-bar { gap: 8px 12px; }
  .filter-pill {
    min-height: 44px;
    padding: 8px 16px;
  }
  .source-filter { gap: 8px; }
  .reveal-btn {
    min-height: 44px;
    padding: 12px 28px;
  }
  .rate-btn {
    min-height: 56px;
    padding: 12px 8px;
  }
  .rate-row { gap: 8px; }
  .check-btn {
    min-height: 44px;
    padding: 8px 22px;
  }
  .mc-option {
    min-height: 44px;
  }
  .mc-options { gap: 8px; }
  .submit-btn {
    min-height: 44px;
    padding: 13px 22px;
  }
  .ghost-btn {
    min-height: 44px;
    padding: 12px 20px;
  }
  /* Match mode: two columns of tappable word cards */
  .match-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    width: 100%;
    max-width: var(--card-max);
    margin: 0 auto;
  }
  .match-card {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 12px;
    border-radius: 12px;
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    overflow-wrap: anywhere;
  }
  .match-card.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
  .match-card.matched {
    border-color: var(--success);
    background: color-mix(in srgb, var(--success) 14%, var(--surface));
    color: var(--success);
    cursor: default;
  }
  .match-card.wrong {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 14%, var(--surface));
    color: var(--danger);
    animation: match-shake 180ms ease;
  }
  @keyframes match-shake {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-4px); }
  }
  .match-result {
    text-align: center;
    font-size: var(--fs-stat);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    background: var(--peach);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 18px;
    margin-top: 16px;
  }
  .icon-btn {
    width: 44px; height: 44px;
    font-size: var(--fs-lg);
  }
  .word-row .wactions { gap: 8px; }
  .method-btn {
    min-height: 44px;
    padding: 10px 18px;
  }
  .method-toggle { gap: 8px; }
  .freewrite-toggle {
    min-height: 44px;
    padding: 10px 20px;
  }
  .freewrite-actions { gap: 8px; flex-wrap: wrap; }
  input[type=file] {
    min-height: 44px;
    font-size: var(--fs-base);
  }
  .candidate-row input[type=checkbox] {
    width: 24px; height: 24px;
    margin-top: 2px;
  }
  .candidate-list { gap: 8px; }
  input[type=text], textarea, select {
    padding: 12px;
  }

  nav.tabs {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 22px;
    border-bottom: none;
  }
  nav.tabs button {
    font-family: var(--font-sans);
    background: transparent;
    border: none;
    padding: 10px 18px;
    min-height: var(--tap);
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--ink-muted);
    cursor: pointer;
    border-radius: 999px;
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 8px;
  }
  nav.tabs button.active {
    color: var(--accent);
    background: var(--accent-soft);
    border: none;
    font-weight: 700;
  }
  nav.tabs button:not(.active):hover { color: var(--ink); background: var(--surface-2); }

  .panel { display: none; }
  .panel.active { display: block; }

  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
  }

  /* Review flashcard */
  .review-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .box-track { display: flex; gap: var(--gap); align-items: center; }
  .box-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--border);
  }
  .box-dot.filled { background: var(--accent); }
  .box-label { font-size: var(--fs-sm); color: var(--ink-muted); margin-left: 6px; }

  .source-filter { display: flex; gap: var(--gap); flex-wrap: wrap; justify-content: center; }
  .filter-pill {
    font-family: var(--font-sans);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--ink-muted);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
  }
  .filter-pill.active { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); }

  .gender-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--gap);
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--font-sans);
  }
  .gender-chip.der { background: var(--der-bg, color-mix(in srgb, var(--der) 18%, transparent)); color: var(--der); }
  .gender-chip.die { background: var(--die-bg, color-mix(in srgb, var(--die) 18%, transparent)); color: var(--die); }
  .gender-chip.das { background: var(--das-bg, color-mix(in srgb, var(--das) 18%, transparent)); color: var(--das); }
  /* Gender pills (rule 36): chunky 3-seg toggles; selected = gender tint + border.
     Value lives in the hidden #f-gender / #e-gender input (app.js syncs). */
  .gender-pills { display: flex; gap: 8px; }
  .gender-pill {
    flex: 1;
    min-height: 44px;
    padding: 8px 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: 700;
    cursor: pointer;
    transition: background 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out;
  }
  .gender-pill:hover { border-color: var(--accent); transform: translateY(-1px); }
  .gender-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .gender-pill.der.is-on { background: var(--der-bg, color-mix(in srgb, var(--der) 18%, transparent)); border-color: var(--der); color: var(--der); }
  .gender-pill.die.is-on { background: var(--die-bg, color-mix(in srgb, var(--die) 18%, transparent)); border-color: var(--die); color: var(--die); }
  .gender-pill.das.is-on { background: var(--das-bg, color-mix(in srgb, var(--das) 18%, transparent)); border-color: var(--das); color: var(--das); }
  .type-badge {
    display: inline-flex;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--ink);
    background: var(--peach);
    border: 1px solid transparent;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--font-sans);
  }
  /* Brief rule 23: noun→sky, verb→mint, adj→lav, other→peach */
  .type-badge.type-noun { background: var(--sky); }
  .type-badge.type-verb { background: var(--mint); }
  .type-badge.type-adjective { background: var(--lav); }
  .type-badge.type-adverb { background: var(--lav); }
  .type-badge.type-phrase { background: var(--peach); }

  .answer-input-row { display: flex; gap: 8px; width: 100%; max-width: var(--card-max); }
  .answer-input-row input { min-height: 52px; font-size: var(--fs-lg); }
  .check-btn { min-height: 52px; font-size: var(--fs-lg); border-radius: 12px; }
  .answer-input-row input {
    flex: 1;
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    /* surface (not surface-2): white tile on the tinted flashcard */
    background: var(--surface);
    color: var(--ink);
  }
  .answer-input-row input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  .check-btn {
    background: var(--cta);
    color: var(--cta-ink);
    border: none;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 17px;
    cursor: pointer;
    font-family: var(--font-sans);
  }
  .your-answer {
    font-size: var(--fs-sm);
    color: var(--ink-muted);
  }
  .your-answer .yes { color: var(--success); font-weight: 600; }
  .your-answer .no { color: var(--danger); font-weight: 600; }

  .mc-options { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: var(--card-max); counter-reset: mc-answer; }
  .mc-option {
    text-align: left;
    padding: 12px 16px 12px 12px;
    min-height: 56px;
    border-radius: var(--radius-md);
    border: 2px solid var(--border);
    background: var(--surface);
    font-family: var(--font-sans);
    font-size: var(--fs-lg);
    font-weight: 600;
    cursor: pointer;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 12px;
    counter-increment: mc-answer;
  }
  /* A-D letter badge via CSS counter (no JS change; letters auto A/B/C/D) */
  .mc-option::before {
    content: counter(mc-answer, upper-alpha);
    width: 28px; height: 28px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: var(--fs-sm);
    font-weight: 800;
    color: var(--ink-muted);
  }
  .mc-option:hover:not([disabled]) { border-color: var(--accent); }
  .mc-option:hover:not([disabled])::before { border-color: var(--accent); color: var(--accent); }
  .mc-option.correct { border-color: var(--success); background: color-mix(in srgb, var(--success) 14%, var(--surface)); }
  .mc-option.correct::before { background: var(--success); border-color: var(--success); color: #fff; content: "\2713"; }
  .mc-option.wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
  .mc-option.wrong::before { background: var(--danger); border-color: var(--danger); color: #fff; content: "\2715"; }
  .mc-option[disabled] { cursor: default; }

  .cloze-sentence {
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    line-height: 1.5;
    max-width: 400px;
  }
  .cloze-sentence .blank { border-bottom: 2px solid var(--accent); padding: 0 4px; }
  .mode-tag {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-weight: 700;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 4px 12px;
    border-radius: 999px;
  }

  .flashcard {
    width: 100%;
    max-width: var(--card-max);
    /* Size bugfix: no max-height/overflow — cards taller than 300px (MC options,
       cloze, revealed answers) were clipped at the bottom, and the centered
       overflow slid the top row (badges/cloze line) under .source-tag.
       The card now sizes to its content with a stable floor instead. */
    min-height: 270px;
    /* Chunky tinted tile: flat accent-soft fill, no border/shadow (rules 17/22);
       interactive tiles inside stay surface for contrast (rule 31) */
    background: var(--accent-soft);
    border: 0;
    border-radius: var(--radius-lg);
    /* 54px top pad reserves the corner for the absolute .source-tag so
       flow content can never start underneath it */
    padding: 54px 22px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    position: relative;
  }
  /* Gender + type badges share one row instead of stacking two centered rows */
  .card-chip-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  /* Phase 4: visible session progress */
  .session-progress {
    width: 100%;
    max-width: var(--card-max);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .session-progress-track {
    flex: 1;
    height: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
  }
  .session-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    min-width: 8px;
  }
  .session-progress-text {
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .source-tag {
    position: absolute;
    top: 14px; left: 16px;
    /* Parent no longer clips (overflow bugfix), so constrain long names here */
    max-width: calc(100% - 32px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    /* White chip on the tinted card so it stays legible */
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 3px 9px;
    border-radius: 999px;
  }
  .german-word {
    font-family: var(--font-serif);
    font-size: clamp(28px, 7vw, 34px);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  .example {
    font-size: var(--fs-base);
    color: var(--ink-muted);
    font-style: italic;
    max-width: 380px;
  }
  .translation {
    font-family: var(--font-serif);
    font-size: clamp(22px, 5.5vw, 26px);
    color: var(--accent);
    font-weight: 650;
    line-height: 1.25;
    text-wrap: balance;
  }
  .reveal-btn {
    width: 100%;
    max-width: var(--card-max);
    min-height: 52px;
    margin-top: 6px;
    background: var(--cta);
    color: var(--cta-ink);
    border: none;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-sans);
  }
  .reveal-btn:hover { filter: brightness(1.04); }
  /* Brief rule 20/30: bottom-docked full-width CTA on mobile so the word stays above fold */
  @media (max-width: 560px) {
    .reveal-btn {
      position: sticky;
      bottom: calc(84px + env(safe-area-inset-bottom, 0px));
      z-index: 20;
      box-shadow: 0 10px 24px -14px rgba(0,0,0,0.45);
    }
  }

  .rate-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
    max-width: var(--card-max);
  }
  .rate-btn {
    padding: 14px 6px 12px;
    min-height: 64px;
    border-radius: 12px;
    border: 2px solid var(--border);
    background: var(--surface);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    color: var(--ink);
    display: flex; flex-direction: column; gap: 2px; align-items: center;
  }
  .rate-btn small { font-weight: 400; color: var(--ink-muted); font-size: var(--fs-xs); }
  .rate-btn.good { border-color: color-mix(in srgb, var(--success) 55%, var(--border)); }
  .rate-btn.hard { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
  .rate-btn.easy { border-color: color-mix(in srgb, var(--gold) 65%, var(--border)); }
  .rate-btn.again { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
  .rate-btn.again:hover { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
  .rate-btn.good:hover { background: color-mix(in srgb, var(--success) 14%, var(--surface)); }
  .rate-btn.easy:hover { background: color-mix(in srgb, var(--gold) 18%, var(--surface)); }

  .empty-state {
    text-align: center;
    padding: 40px 24px;
    color: var(--ink-muted);
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 16px;
    line-height: 1.55;
  }
  .empty-state .big {
    font-family: var(--font-serif);
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
  }
  .empty-state .ghost-btn { min-height: 48px; padding: 12px 24px; border-radius: 12px; font-weight: 600; }
  .ghost-btn {
    margin-top: 16px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--ink);
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    cursor: pointer;
  }

  /* Add form */
  :focus-visible {
    outline: var(--focus-width) solid var(--accent);
    outline-offset: 2px;
  }
  button:focus-visible, input:focus-visible, select:focus-visible,
  textarea:focus-visible, a:focus-visible {
    outline: var(--focus-width) solid var(--accent);
    outline-offset: 2px;
  }
  label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); margin: 16px 0 6px; }
  label:first-child { margin-top: 0; }
  input[type=text], textarea, select {
    width: 100%;
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    padding: 12px 14px;
    min-height: 48px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--ink);
  }
  input[type=text]::placeholder, textarea::placeholder { color: var(--ink-muted); opacity: 0.75; }
  textarea { resize: vertical; min-height: 56px; }
  input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  /* Add form: v2 even rhythm (label 6px above input, 16px field-to-field) */
  #panel-add .card > label,
  #panel-add .card > .row2,
  #editModal .card > label,
  #editModal .card > .row2 { margin-top: var(--space-4); }
  #panel-add .card > label:first-child,
  #editModal .card > div:first-child { margin-top: 0; }
  .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: end; margin-bottom: 0; }
  /* Type + Level + Gender: 3 equal columns so Gender stops dangling alone */
  #panel-add .card .row2:has(#f-gender),
  #editModal .card .row2:has(#e-gender) { grid-template-columns: repeat(3, 1fr); }
  #panel-add .row2 label, #panel-add .card label,
  #editModal .card label { margin: 0 0 6px; }
  .row2 > div { min-width: 0; }
  /* Gender select: pill-look segmented feel (CSS-only; stays a native select) */
  #f-gender {
    border-radius: 999px;
    text-align: center;
    font-weight: 700;
    background: var(--accent-soft);
    border-color: var(--accent);
  }
  .submit-btn {
    width: 100%;
    min-height: 52px;
    margin-top: 20px;
    background: var(--cta);
    color: var(--cta-ink);
    border: none;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 17px;
    cursor: pointer;
    font-family: var(--font-sans);
  }
  .submit-btn:hover { filter: brightness(1.04); }
  .form-msg { font-size: var(--fs-sm); margin-top: 10px; color: var(--success); min-height: 16px; }

  /* Browse */
  .search-row { display: flex; gap: 8px; margin-bottom: 12px; }
  .search-row input { flex: 1; border-radius: 999px; padding-left: 18px; }
  .browse-filters { margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
  .browse-filters summary { cursor: pointer; padding: 12px 16px; font-size: var(--fs-base); font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
  .browse-filters summary::-webkit-details-marker { display: none; }
  .browse-filters summary::after { content: "+"; font-size: 20px; color: var(--accent); font-weight: 400; }
  .browse-filters[open] summary::after { content: "\2013"; }
  .browse-filters .filter-body { padding: 0 16px 16px; display: flex; gap: 8px; flex-wrap: wrap; }
  .browse-filters .filter-body select { flex: 1 1 140px; min-width: 0; }
  .word-list { display: flex; flex-direction: column; gap: 10px; }
  .word-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 14px 14px 14px 14px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    box-shadow: var(--shadow);
  }
  .word-row .wleft { min-width: 0; flex: 1; }
  .word-row .wg { font-family: var(--font-serif); font-size: 19px; font-weight: 600; line-height: 1.3; }
  .word-row .wt { font-size: var(--fs-md); color: var(--ink); margin-top: 2px; }
  .word-row .wmeta { font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 6px; line-height: 1.4; }
  .word-row .wactions { display: flex; gap: var(--gap); flex-shrink: 0; }
  .icon-btn {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    width: 44px; height: 44px;
    font-size: 17px;
    cursor: pointer;
    color: var(--ink-muted);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .icon-btn:hover { color: var(--danger); border-color: var(--danger); }
  .empty-list { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-md); color: var(--ink-muted); font-size: var(--fs-base); padding: 32px 20px; text-align: center; line-height: 1.5; }
  .empty-list .big { display: block; font-family: var(--font-sans); font-size: var(--fs-xl); font-weight: 700; color: var(--ink); margin-bottom: 6px; }
  .empty-list .submit-btn { max-width: 280px; margin-left: auto; margin-right: auto; }
  .empty-state .submit-btn { max-width: 280px; margin-left: auto; margin-right: auto; }

  /* Stats: v2 tinted tiles, big bold numerals (CSS-only, app.js untouched) */
  .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
  .stat-box {
    /* Chunky flat tint tile (rules 17/22): no border/shadow, bigger radius + pad */
    border: 0;
    box-shadow: none;
    text-align: left;
    padding: 18px;
    border-radius: var(--radius-lg);
    background: var(--surface);
  }
  /* One tint per tile: streak=peach, total=lav, mastered=mint (dark ink on all) */
  .stat-grid .stat-box:nth-child(1) { background: var(--peach); }
  .stat-grid .stat-box:nth-child(2) { background: var(--lav); }
  .stat-grid .stat-box:nth-child(3) { background: var(--mint); }
  .stat-box .stat-num { font-family: var(--font-sans); font-size: var(--fs-stat); font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
  /* Mastered hero tile: honest progress ring driven by --pct set in renderStats() */
  .stat-grid .stat-box:nth-child(3) { position: relative; overflow: hidden; --pct: 0; }
  .stat-grid .stat-box:nth-child(3) .stat-num {
    width: 84px; height: 84px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background:
      radial-gradient(circle, var(--mint) 60%, transparent 61%),
      conic-gradient(var(--accent) calc(var(--pct) * 1%), color-mix(in srgb, var(--accent) 15%, transparent) 0);
    font-size: 22px;
  }
  .stat-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin-top: 6px; line-height: 1.35; }
  /* Slimmer progress bars (h8, brief rule 34) under the tiles */
  .box-bar-track { flex: 1; height: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
  .boxes-breakdown { display: flex; flex-direction: column; gap: 8px; }
  .box-bar-row { display: flex; align-items: center; gap: 10px; }
  .box-bar-row .lbl { font-size: var(--fs-sm); color: var(--ink-muted); width: 68px; flex-shrink: 0; }
  .box-bar-fill { height: 100%; background: var(--accent); }
  .box-bar-count { font-size: var(--fs-sm); color: var(--ink-muted); width: 24px; text-align: right; }

  /* Header shell: single tidy row — logo + title + toggle + due badge */
  .top--compact { padding: 8px 0; gap: 8px; flex-wrap: nowrap; margin-bottom: 12px; }
  .brand { display: flex; align-items: center; gap: 8px; min-width: 0; flex-shrink: 1; }
  .brand-logo { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; }
  .brand-text { min-width: 0; }
  .top--compact h1 { font-size: 20px; margin: 0; white-space: nowrap; }
  .top--compact .tagline { display: none; }
  .header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin-left: auto; flex-shrink: 0; }
  .header-actions .lang-toggle { flex-shrink: 0; }
  .header-actions .lang-btn { min-height: 32px; padding: 4px 12px; }
  .header-actions .due-pill { order: 0; flex-shrink: 0; padding: 5px 10px; }

  /* Bottom tab bar (mobile) shared base */
  .tab-icon { width: 22px; height: 22px; flex-shrink: 0; }
  .tab-label { font-size: 11px; line-height: 1.2; white-space: nowrap; }
  .tab-btn { gap: 3px; }

  /* Segmented Add/Import switch */
  .segment {
    display: flex;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
    margin-bottom: 14px;
  }
  .segment-btn {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: 600;
    min-height: var(--tap);
    border-radius: 999px;
    cursor: pointer;
    padding: 8px 12px;
  }
  .segment-btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
  .method-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
  .method-btn {
    font-family: var(--font-sans);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--ink-muted);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
  }
  .method-btn.active { background: var(--accent-soft); color: var(--ink); border-color: var(--accent); }
  .import-textarea { min-height: 170px; }
  input[type=file] {
    width: 100%;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    padding: 9px 10px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink);
  }
  .candidate-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
  .candidate-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    box-shadow: var(--shadow);
  }
  .candidate-row input[type=checkbox] { margin-top: 4px; width: 24px; height: 24px; flex-shrink: 0; accent-color: var(--accent); }
  .candidate-row .cg { font-family: var(--font-serif); font-size: var(--fs-md); display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap); }
  .candidate-row .ct { font-size: var(--fs-sm); color: var(--ink-muted); margin-top: 1px; }
  .candidate-row .ce { font-size: var(--fs-xs); color: var(--ink-muted); font-style: italic; margin-top: 3px; }
  .dup-badge {
    font-size: var(--fs-xs);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 1px 8px;
    border-radius: 999px;
    color: var(--ink-muted);
    font-family: var(--font-sans);
    font-weight: 400;
  }
  .import-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .import-actions .submit-btn { margin-top: 0; }
  #selCount { font-size: var(--fs-base); font-weight: 600; }

  .freewrite-toggle {
    display: block;
    margin: 0 auto 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--ink);
    padding: 8px 16px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
  }
  .freewrite-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 18px;
  }
  .freewrite-words { font-family: var(--font-serif); font-size: var(--fs-lg); margin: 6px 0 12px; }
  .freewrite-words .fw-word { color: var(--accent); }
  .freewrite-panel textarea {
    width: 100%;
    min-height: 100px;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink);
  }
  .freewrite-actions { display: flex; gap: 8px; margin-top: 10px; }

  .offline-note {
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 16px;
  }