/* ── CSS VARIABLES ── */
    :root {
      --bg:           #12100e;
      --text-primary: #e8e0d0;
      --gold:         #c8a96e;
      --gold-dim:     #7a6540;
      --border:       #2a2520;
      --text-dim:     #8c7d6b;
      --error:        #c0392b;
      --success:      #4a7c59;
      --surface:      #1a1714;

      /* System fonts only — no Google Fonts, no external requests, no cookie dialogs.
         Playfair Display / DM Sans / Space Mono were causing Android to request Google Fonts. */
      --font-display: 'Georgia', 'Times New Roman', serif;
      --font-body:    'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
      --font-mono:    'Courier New', 'Consolas', monospace;

      --pad-h:        24px;
      --pad-card:     16px;
      --gap:          24px;
      --nav-h:        48px;
    }

    /* ── RESET ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }

    /* ── SAFE AREA (notch / home bar / dynamic island) ── */
    /* Adds env() padding so UI never hides behind device chrome */
    .nav {
      padding-left:  max(var(--pad-h), env(safe-area-inset-left));
      padding-right: max(var(--pad-h), env(safe-area-inset-right));
      padding-top:   env(safe-area-inset-top);
    }
    .library-footer {
      padding-bottom: max(16px, env(safe-area-inset-bottom));
      padding-left:   max(var(--pad-h), env(safe-area-inset-left));
      padding-right:  max(var(--pad-h), env(safe-area-inset-right));
    }
    .page-body {
      padding-left:  max(var(--pad-h), env(safe-area-inset-left));
      padding-right: max(var(--pad-h), env(safe-area-inset-right));
    }

    button {
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      cursor: pointer;
    }

    /* Tap-delay prevention + text-selection guard on all interactive items */
    .deck-item, .hub-item, .mode-item, .settings-item,
    .card-item, .quiz-option, .play-deck-item,
    .ndeck-card, .hub-chip, .stats-deck-item {
      touch-action: manipulation;
      user-select: none;
      -webkit-user-select: none;
      cursor: pointer;
    }

    /* ── FOCUS STATES (keyboard navigation) ── */
    :focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 2px;
    }
    /* Remove outline for mouse users */
    :focus:not(:focus-visible) { outline: none; }

    body {
      background: var(--bg);
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 0.88rem;
      line-height: 1.6;
      min-height: 100vh;
      -webkit-text-size-adjust: 100%; /* prevent iOS font inflation */
    }

    /* ── APP SHELL: centres content on wide screens ── */
    .app-shell {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      /* desktop grid lines behind the app column */
      background-image: repeating-linear-gradient(
        0deg, transparent, transparent 39px,
        #1a1714 39px, #1a1714 48px
      );
    }

    /* ── PAGE SYSTEM ── */
    .page {
      display: none;
      width: 100%;
      min-height: 100vh;
      flex-direction: column;
      background: var(--bg);
    }
    .page.active { display: flex; animation: fadeIn 200ms ease; }

    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

    /* ── REDUCED MOTION ──────────────────────
       Respects OS "Reduce Motion" setting.
       Disables all animations and transitions
       for users with vestibular disorders or epilepsy. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration:   0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:  0.01ms !important;
        scroll-behavior:      auto   !important;
      }
      .page.active { animation: none; }
      .flashcard-inner { transition: none; }
      /* Welcome elements: animation:none ensures clean state,
         opacity:1 is already the base so no override needed */
      .welcome-actions,
      .welcome-rule { animation: none; }
    }

    /* ════════════════════════════════════════
       RESPONSIVE BREAKPOINTS — Mobile first
       ─ xs:  < 480px   (small phone)
       ─ sm:  480–767px (large phone / phablet)
       ─ md:  768–1023px (tablet)
       ─ lg:  ≥ 1024px  (laptop / desktop)
    ════════════════════════════════════════ */

    /* ── XS (default, < 480px) ──────────────
       Compact layout, full-width, max touch targets */
    :root {
      --nav-h:    48px;
      --pad-h:    16px;
      --pad-card: 16px;
      --gap:      16px;
    }

    /* touch-friendly tap targets */
    .btn          { padding: 16px 24px; font-size: 0.85rem; min-height: 44px; } /* 44px = WCAG 2.5.5 minimum touch target */
    .deck-item    { padding: 16px var(--pad-h); min-height: 64px; }
    .hub-item     { padding: 16px var(--pad-h); min-height: 64px; }
    .mode-item    { padding: 16px var(--pad-h); min-height: 64px; }
    .settings-item{ padding: 16px var(--pad-h); min-height: 56px; }
    .card-item    { padding: 16px var(--pad-h); }
    .nav-back     { padding: 16px 0; font-size: 0.7rem; }

    /* flashcard full height on small phone */
    .flashcard-inner { min-height: 200px; }
    .flashcard-text  { font-size: 1.4rem; }

    /* quiz options full width */
    .quiz-option { padding: 16px var(--pad-h); min-height: 56px; }

    /* summary stats stacked if very narrow */
    @media (max-width: 360px) {
      .summary-stats { flex-direction: column; }
      .summary-stat  { border-right: none; border-bottom: 1px solid var(--border); }
      .summary-stat:last-child { border-bottom: none; }

      .detail-stats-row { flex-wrap: wrap; }
      .detail-stat      { flex: 1 1 50%; min-width: 50%; }
    }

    /* ── SM (480px – 767px, large phone) ────*/
    @media (min-width: 480px) {
      :root {
        --pad-h:    24px;
        --pad-card: 16px;
        --gap:      24px;
      }
      body           { font-size: 0.9rem; }
      .btn           { padding: 16px 24px; } /* 16px = grid value, 24px = grid value */
      .flashcard-text{ font-size: 1.7rem; }
      .flashcard-inner { min-height: 220px; }
    }

    /* ── MD (768px – 1023px, tablet) ────────*/
    @media (min-width: 768px) {
      :root {
        --nav-h:    56px;
        --pad-h:    32px;
        --pad-card: 24px;
        --gap:      24px;
      }
      body { font-size: 0.95rem; }

      /* centre app column, add side borders */
      .page {
        max-width: 600px;
        border-left:  1px solid var(--border);
        border-right: 1px solid var(--border);
      }

      .btn            { padding: 16px 32px; font-size: 0.85rem; } /* 16px = grid value */
      .nav-h          { height: 56px; }
      .nav-brand      { font-size: 1.15rem; }
      .nav-back       { font-size: 0.68rem; }
      .flashcard-inner{ min-height: 260px; }
      .flashcard-text { font-size: 2rem; }

      /* two-column card add form on tablet */
      .add-card-row { flex-direction: row; }

      /* larger hero numbers */
      .library-stat-num  { font-size: 1.8rem; }
      .stats-hero-num    { font-size: 2.2rem; }
      .summary-stat-num  { font-size: 2.2rem; }
      .detail-stat-num   { font-size: 1.5rem; }
    }

    /* ── LG (≥ 1024px, laptop / desktop) ───*/
    @media (min-width: 1024px) {
      :root {
        --nav-h:    56px;
        --pad-h:    32px;
        --pad-card: 24px;
        --gap:      32px;
      }
      body { font-size: 0.95rem; }

      .page {
        max-width: 680px;
        border-left:  1px solid var(--border);
        border-right: 1px solid var(--border);
      }

      /* show grid lines behind app column only on desktop */
      .app-shell {
        background-image: repeating-linear-gradient(
          0deg, transparent, transparent 39px,
          #1a1714 39px, #1a1714 48px
        );
      }

      .btn            { padding: 16px 32px; font-size: 0.85rem; }
      .flashcard-inner{ min-height: 280px; }
      .flashcard-text { font-size: 2.2rem; }
      .deck-item      { padding: 16px var(--pad-h); }
      .hub-item       { padding: 16px var(--pad-h); }
      .mode-item      { padding: 16px var(--pad-h); }
      .card-item      { padding: 16px var(--pad-h); }

      .library-stat-num  { font-size: 1.8rem; }
      .stats-hero-num    { font-size: 2.4rem; }
      .summary-stat-num  { font-size: 2.4rem; }
    }

    /* ── HIGH CONTRAST ──────────────────────
       Boosts border and text contrast for users
       with "Increase Contrast" enabled in OS. */
    @media (prefers-contrast: more) {
      :root {
        --border:       #4a4035; /* lighter border — more visible */
        --text-dim:     #8a7860; /* lighter dim text */
        --gold-dim:     #a08550; /* brighter gold-dim */
        --surface:      #211e1a; /* slightly more distinct surface */
      }
      .btn-ghost {
        border-color: var(--text-dim);
      }
      :focus-visible {
        outline-width: 3px;   /* thicker focus ring */
      }
    }

    /* ── LANDSCAPE PHONE (short viewport) ──
       When phone is in landscape, viewport height is ~360–420px.
       Reduce nav, shrink flashcard, keep footer usable. */
    @media (max-height: 500px) and (orientation: landscape) {
      :root { --nav-h: 40px; }

      .nav {
        min-height: 40px; /* off-grid: tight landscape constraint */
        padding-top: 0;
      }

      .flashcard-inner {
        min-height: 120px; /* off-grid: maximum available in landscape */
      }

      .flashcard-text {
        font-size: 1.1rem; /* off-grid: landscape space constraint */
      }

      .library-footer {
        padding-top:    8px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
      }

      /* Collapse hub-list padding in landscape */
      .hub-item,
      .deck-item,
      .mode-item,
      .settings-item {
        min-height: 44px; /* off-grid: WCAG minimum touch target */
        padding-top:    8px;
        padding-bottom: 8px;
      }
    }

    /* ── TOUCH DEVICE: remove hover side effects ── */
    @media (hover: hover) {
      .deck-item:hover,
      .mode-item:hover,
      .settings-item:hover { background: var(--surface); }
    }

    @media (hover: none) {
      .deck-item:hover,
      .hub-item:hover,
      .mode-item:hover,
      .settings-item:hover { background: transparent; }
      /* keep active state for tap feedback */
      .deck-item:active,
      .hub-item:active:not(.hub-disabled),
      .mode-item:active,
      .settings-item:active { background: var(--surface); }
    }

    /* ── NAV ── */
    .nav {
      position: sticky;
      top: 0;
      height: var(--nav-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--pad-h);
      border-bottom: 1px solid var(--border);
      background: var(--bg);
      z-index: 100;
    }

    .nav-brand {
      font-family: var(--font-display);
      font-size: 1.1rem;
      color: var(--gold);
      letter-spacing: 0.5px;
    }

    .nav-label {
      font-size: 0.65rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text-dim);
    }

    .nav-back {
      font-size: 0.65rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--gold-dim);
      cursor: pointer;
      border: none;
      background: none;
      font-family: var(--font-body);
      transition: color 150ms;
    }

    .nav-back:hover { color: var(--gold); }

    /* ── DIVIDER ── */
    .divider { border: none; border-top: 1px solid var(--border); }

    /* ── BUTTONS ── */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 16px 24px;
      border: 1px solid var(--border);
      background: none;
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 0.82rem;
      cursor: pointer;
      transition: border-color 150ms, color 150ms, background 150ms;
      letter-spacing: 0.5px;
    }

    .btn:hover { border-color: var(--text-dim); }

    .btn-primary {
      border-color: var(--gold);
      color: var(--gold);
    }

    .btn-primary:hover {
      background: var(--gold);
      color: var(--bg);
    }

    .btn-ghost {
      border-color: transparent;
      color: var(--text-dim);
    }

    .btn-ghost:hover { color: var(--text-primary); border-color: var(--border); }

    /* ── PROGRESS BAR ── */
    .progress-track {
      height: 2px;
      background: var(--border);
      border-radius: 2px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      background: var(--gold);
      border-radius: 2px;
      transition: width 400ms ease;
    }

    /* ── UNSAVED BANNER ── */
    .unsaved-banner {
      display: none;
      align-items: center;
      justify-content: space-between;
      padding: 8px var(--pad-h); /* off-grid: unsaved banner — 8px fits narrow strip */
      background: var(--surface);
      border-bottom: 1px solid var(--gold-dim);
      font-size: 0.75rem;
      color: var(--gold);
    }

    .unsaved-banner.visible { display: flex; }

    /* ════════════════════════════════════════
       PAGE 0 – WELCOME
    ════════════════════════════════════════ */
    #page-welcome {
      align-items: center;
      justify-content: center;
      padding: var(--pad-h);
      text-align: center;
      position: relative;
      /* overflow:hidden removed — was clipping buttons shifted by translateY animation */
    }

    /* subtle grain texture overlay */
    #page-welcome::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none;
      opacity: 0.4;
      z-index: 0; /* explicit: below welcome-inner content */
    }

    .welcome-inner {
      max-width: 380px;
      width: 100%;
      position: relative;
      z-index: 1; /* above ::before overlay — ensures buttons are clickable */
    }

    .welcome-rule {
      width: 48px;
      height: 1px;
      background: var(--gold);
      margin: 0 auto 32px;
      /* animation: expandRule removed — see welcome-actions note */
    }

    @keyframes expandRule {
      from { width: 0; opacity: 0; }
      to   { width: 48px; opacity: 1; }
    }

    /* Welcome animation safe defaults — opacity:1 is the base,
       animations START from 0 but elements are always visible
       if animation doesn't run (Android, no-anim, etc.) */

    .welcome-title {
      font-family: var(--font-display);
      font-size: clamp(2.8rem, 8vw, 4rem);
      color: var(--text-primary);
      line-height: 1.05;
      margin-bottom: 8px;
      opacity: 1;
      /* animation removed */
    }

    .welcome-title em {
      font-style: italic;
      color: var(--gold);
    }

    .welcome-version-tag {
      font-family: var(--font-mono);
      font-size: 0.62rem;
      color: var(--text-dim);
      letter-spacing: 1.5px;
      margin-top: -6px;
      margin-bottom: 6px;
    }

    .welcome-sub {
      font-size: 0.85rem;
      color: var(--text-dim);
      margin-bottom: 40px;
      letter-spacing: 0.5px;
      opacity: 1;
    }

    .welcome-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
      opacity: 1;
    }

    .welcome-actions .btn {
      min-height: 48px;
      font-size: 0.88rem;
    }

    .welcome-hint {
      margin-top: 28px;
      font-size: 0.7rem;
      color: var(--text-dim);
      letter-spacing: 1px;
      opacity: 1;
    }

    .welcome-login-panel {
      margin-top: 20px;
      padding: 20px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg);
      text-align: left;
    }

    .welcome-login-label {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--text-dim);
      margin-bottom: 14px;
    }

    .welcome-turnstile {
      /* Invisible Turnstile renders a 0×0 iframe — no visible space needed */
      height: 0;
      overflow: hidden;
    }

    @keyframes slideUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ════════════════════════════════════════
       PAGE 1 – LIBRARY
    ════════════════════════════════════════ */
    #page-library { flex-direction: column; }

    .library-header {
      padding: var(--gap) var(--pad-h) 16px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      border-bottom: 1px solid var(--border);
    }

    .library-title {
      font-family: var(--font-display);
      font-size: 1.8rem;
      line-height: 1.1;
    }

    .library-title em {
      font-style: italic;
      color: var(--gold);
    }

    .library-stat {
      text-align: right;
    }

    .library-stat-num {
      font-family: var(--font-mono);
      font-size: 1.6rem;
      color: var(--gold);
      line-height: 1;
    }

    .library-stat-label {
      font-size: 0.6rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text-dim);
    }

    /* deck list */
    .deck-list {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .deck-list.at-bottom { }

    .deck-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px var(--pad-h);
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: background 150ms;
    }

    .deck-item:hover { background: var(--surface); }

    .deck-num {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      color: var(--gold-dim);
      min-width: 24px;
      flex-shrink: 0;
    }

    .deck-info { flex: 1; min-width: 0; }

    .deck-name {
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--text-primary);
      margin-bottom: 2px; /* off-grid: sub-pixel optical gap between name and description */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .deck-desc {
      font-size: 0.72rem;
      color: var(--text-dim);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 6px; /* off-grid: tight gap before deck meta row — 8px too loose */
    }

    .deck-meta {
      display: flex;
      align-items: center;
      gap: 10px; /* off-grid: library header stat gap — 8px too tight, 16px too loose */
    }

    .deck-progress-track {
      flex: 1;
      height: 2px;
      background: var(--border);
      border-radius: 2px;
      overflow: hidden;
    }

    .deck-progress-fill {
      height: 100%;
      background: var(--gold);
      border-radius: 2px;
    }

    .deck-count {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      color: var(--text-dim);
      flex-shrink: 0;
    }

    .deck-arrow {
      color: var(--text-dim);
      font-size: 0.75rem;
      flex-shrink: 0;
    }

    /* empty state */
    .library-empty {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      color: var(--text-dim);
      padding: var(--pad-h);
      text-align: center;
    }

    .library-empty-icon {
      font-size: 2rem;
      opacity: 0.4;
      margin-bottom: 8px;
    }

    .library-empty-title {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-style: italic;
      color: var(--text-dim);
    }

    .library-empty-sub {
      font-size: 0.78rem;
      color: var(--text-dim);
      opacity: 0.7;
    }

    /* library footer */
    .library-footer {
      padding: 16px var(--pad-h);
      border-top: 1px solid var(--border);
      display: flex;
      gap: 16px;
      align-items: center;
    }
    /* Equal-width footer buttons */
    .library-footer .btn-action {
      flex: 1;
    }

    /* ── NO-DECK TOAST ── */
    /* Slides up from above the footer when Play is pressed with no decks. */
    .no-deck-toast {
      margin: 0 var(--pad-h) 0;
      padding: 12px 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 3px solid var(--gold);
      font-size: 0.82rem;
      color: var(--text-primary);
      font-family: var(--font-mono);
      letter-spacing: 0.5px;
      animation: toastIn 200ms ease;
    }
    .no-deck-toast.hidden { display: none; }

    .app-toast {
      position: fixed;
      left: var(--pad-h);
      right: var(--pad-h);
      bottom: 90px;
      max-width: 640px;
      margin: 0 auto;
      padding: 12px 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 3px solid var(--gold);
      font-size: 0.82rem;
      color: var(--text-primary);
      font-family: var(--font-mono);
      letter-spacing: 0.5px;
      animation: toastIn 200ms ease;
      z-index: 999;
    }
    .app-toast.hidden { display: none; }

    @keyframes toastIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── FILE INPUT HIDDEN ── */
    #file-input { display: none; }

    /* ════════════════════════════════════════
       UPDATE OVERLAY
    ════════════════════════════════════════ */
    #update-overlay {
      /* Use visibility+opacity instead of display:none — Android WebView
         keeps backdrop-filter active on display:none elements, creating
         an invisible full-screen click trap that blocks all interactions. */
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(18, 16, 14, 0.92);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 24px;
      text-align: center;
      padding: var(--pad-h);
      /* Hidden state — pointer-events:none is critical */
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      transition: opacity 200ms ease, visibility 200ms ease;
    }

    #update-overlay.visible {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }

    .update-spinner {
      width: 36px;
      height: 36px;
      border: 2px solid var(--border);
      border-top-color: var(--gold);
      border-radius: 50%;
      animation: spin 800ms linear infinite;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    .update-title {
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-style: italic;
      color: var(--text-primary);
    }

    .update-sub {
      font-size: 0.78rem;
      color: var(--text-dim);
      line-height: 1.6;
    }

    .update-versions {
      display: flex;
      align-items: center;
      gap: 16px;
      font-family: var(--font-mono);
      font-size: 0.78rem;
    }

    .update-ver-old { color: var(--text-dim); }
    .update-ver-arrow { color: var(--text-dim); }
    .update-ver-new { color: var(--gold); }

    /* Reload button — hidden while deploy is still in progress, shown once ready */
    .update-reload-btn {
      display: none;
      padding: 12px 28px;
      background: var(--gold);
      color: var(--bg);
      border: none;
      font-family: var(--font-mono);
      font-size: 0.82rem;
      letter-spacing: 1px;
      cursor: pointer;
      border-radius: 2px;
      margin-top: 8px;
      transition: opacity 150ms;
    }
    .update-reload-btn.ready {
      display: block;
    }
    .update-reload-btn:hover { opacity: 0.85; }

    /* ════════════════════════════════════════
       ONBOARDING OVERLAY
    ════════════════════════════════════════ */
    #onboarding-overlay {
      position: fixed;
      inset: 0;
      z-index: 9998; /* below update-overlay (9999) */
      background: rgba(18, 16, 14, 0.96);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      flex-direction: column;
      align-items: center;   /* centres dots, nav — NOT ob-viewport (it is width:100%) */
      justify-content: center;
      gap: 40px;
      padding: 0;
      overflow: hidden;
      /* hidden state */
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      transition: opacity 250ms ease, visibility 250ms ease;
    }

    /* ob-viewport: full-width clip zone for the slide track.
       width:100% + align-self:stretch keeps it flush to both edges
       despite align-items:center on the parent column flex. */
    .ob-viewport {
      width: 100%;
      overflow: hidden;
      flex-shrink: 0;
    }
    #onboarding-overlay.visible {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }

    /* Slide track: full-width row of 4 slides, moved by translateX */
    .ob-track {
      display: flex;
      width: 400%; /* 4 slides × 100% */
      transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .ob-slide {
      width: 25%; /* 100% / 4 slides = 25% of track = 100% of viewport */
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      padding: 0 var(--pad-h);
      text-align: center;
      flex-shrink: 0; /* prevent flex from squishing slides */
    }

    .ob-glyph {
      font-family: var(--font-display);
      font-size: 3.2rem;
      color: var(--gold);
      line-height: 1;
      font-style: italic;
    }

    .ob-title {
      font-family: var(--font-display);
      font-size: 1.8rem;
      font-style: italic;
      color: var(--text-primary);
      line-height: 1.2;
    }

    .ob-title em {
      color: var(--gold);
    }

    .ob-sub {
      font-size: 0.84rem;
      color: var(--text-dim);
      line-height: 1.7;
      max-width: 280px;
    }

    /* Dot indicators */
    .ob-dots {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .ob-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--border);
      transition: background 200ms, transform 200ms;
    }
    .ob-dot.active {
      background: var(--gold);
      transform: scale(1.4);
    }

    /* Navigation */
    .ob-nav {
      display: flex;
      gap: 16px;
      align-items: center;
    }
    .ob-btn-skip {
      background: none;
      border: none;
      color: var(--text-dim);
      font-family: var(--font-mono);
      font-size: 0.75rem;
      cursor: pointer;
      letter-spacing: 1px;
      padding: 8px 12px;
      transition: color 150ms;
    }
    /* ob-btn-skip:hover is handled in the @media (hover:hover) block below */

    .ob-btn-next {
      background: var(--gold);
      color: var(--bg);
      border: none;
      font-family: var(--font-mono);
      font-size: 0.82rem;
      letter-spacing: 1px;
      cursor: pointer;
      padding: 12px 28px;
      min-height: 44px; /* WCAG 2.5.5 touch target minimum */
      border-radius: 2px;
      transition: opacity 150ms;
    }
    .ob-btn-next:hover { opacity: 0.85; }

    /* ── ONBOARDING: RESPONSIVE BREAKPOINTS ──────────────────────────────────────
       Follows the same xs/sm/md/lg breakpoint system as the rest of the app.
       The overlay is fixed/inset:0 at all sizes — only typography, spacing,
       and the constrained content box change per breakpoint.
    ────────────────────────────────────────────────────────────────────────────── */

    /* xs: < 360px — very small phones (SE 1st gen, Galaxy A series) */
    @media (max-width: 359px) {
      .ob-glyph  { font-size: 2.2rem; }
      .ob-title  { font-size: 1.35rem; }
      .ob-sub    { font-size: 0.82rem; max-width: 240px; } /* min readable ~13px at default 16px base */
      #onboarding-overlay { gap: 24px; }
      .ob-btn-next { padding: 10px 20px; font-size: 0.82rem; min-height: 44px; }
    }

    /* sm: 480px – 767px — large phones / phablets */
    @media (min-width: 480px) {
      .ob-glyph  { font-size: 3.6rem; }
      .ob-title  { font-size: 2rem; }
      .ob-sub    { font-size: 0.88rem; max-width: 340px; }
      #onboarding-overlay { gap: 44px; }
    }

    /* md: 768px – 1023px — tablets
       Mirror what .page does: centre content in a 600px column with side borders. */
    @media (min-width: 768px) {
      .ob-slide {
        /* align content to the same 600px column as .page */
        max-width: 600px;
        margin: 0 auto;
        padding: 0 32px; /* matches --pad-h at md */
      }
      .ob-glyph  { font-size: 4rem; }
      .ob-title  { font-size: 2.2rem; }
      .ob-sub    { font-size: 0.9rem; max-width: 400px; }
      #onboarding-overlay { gap: 48px; }
      .ob-btn-next { padding: 14px 36px; font-size: 0.86rem; min-height: 44px; }
      .ob-dots   { gap: 10px; }
      .ob-dot    { width: 7px; height: 7px; }
    }

    /* lg: ≥ 1024px — laptop / desktop
       App column narrows to 680px — keep slide content inside that column. */
    @media (min-width: 1024px) {
      .ob-slide {
        max-width: 680px;
        padding: 0 32px;
      }
      .ob-glyph  { font-size: 4.4rem; }
      .ob-title  { font-size: 2.4rem; }
      .ob-sub    { font-size: 0.92rem; max-width: 460px; }
    }

    /* Landscape + short screen: hide glyph, tighten gap so content fits in one screen height */
    @media (max-height: 500px) and (orientation: landscape) {
      .ob-glyph          { display: none; }
      #onboarding-overlay { gap: 16px; }
      .ob-title  { font-size: 1.4rem; }
      .ob-sub    { font-size: 0.82rem; line-height: 1.5; } /* min ~13px */
      .ob-btn-next { padding: 10px 24px; min-height: 44px; }
    }

    /* Reduced motion: disable slide transition and dot scale animation */
    @media (prefers-reduced-motion: reduce) {
      .ob-track  { transition: none; }
      .ob-dot    { transition: none; }
      .ob-dot.active { transform: none; } /* skip scale pulse */
    }

    /* Hover guard: skip btn hover only on real pointer devices */
    @media (hover: hover) {
      .ob-btn-skip:hover { color: var(--text-primary); }
    }
    @media (hover: none) {
      /* on touch: remove hover state, keep :active for tap feedback */
      .ob-btn-skip:hover { color: var(--text-dim); }
      .ob-btn-next:hover  { opacity: 1; }
      .ob-btn-next:active { opacity: 0.82; }
    }



    /* ════════════════════════════════════════
       CLOUD SYNC — AUTH SECTION STYLES
    ════════════════════════════════════════ */

    .auth-message {
      font-size: 0.75rem;
      padding: 6px var(--pad-h) 4px;
      min-height: 20px;
      line-height: 1.4;
    }
    .auth-message-error { color: var(--error); }
    .auth-message-info  { color: var(--gold);  }

    .auth-input-row {
      padding: 6px var(--pad-h) 2px;
    }
    .auth-input-row .form-input {
      width: 100%;
      box-sizing: border-box;
    }

    .auth-remember-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px var(--pad-h);
      font-size: 0.78rem;
      color: var(--text-dim);
      cursor: pointer;
      user-select: none;
    }
    .auth-remember-row input[type="checkbox"] {
      accent-color: var(--gold);
      width: 15px;
      height: 15px;
      cursor: pointer;
    }

    .auth-btn-row {
      display: flex;
      gap: 8px;
      padding: 4px var(--pad-h) 10px;
    }
    .auth-btn-row .btn { flex: 1; min-height: 44px; }

    .auth-mode-row {
      padding: 6px var(--pad-h) 4px;
    }
    .auth-mode-row select {
      width: 100%;
      box-sizing: border-box;
      background: var(--surface);
      color: var(--text-primary);
      border: 1px solid var(--border);
      border-radius: 2px;
      padding: 10px 12px;
      font-family: var(--font-mono);
      font-size: 0.78rem;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235a5040'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
    }
    .auth-mode-row select:focus {
      outline: 2px solid var(--gold);
      outline-offset: 2px;
    }
    .auth-mode-label {
      font-size: 0.72rem;
      color: var(--text-dim);
      font-family: var(--font-mono);
      padding: 0 0 4px 0;
      letter-spacing: 0.5px;
    }

    #auth-sync-section {
      display: flex;
      gap: 8px;
      padding: 4px var(--pad-h) 6px;
    }
    #auth-sync-section .btn { flex: 1; min-height: 44px; }


    /* ════════════════════════════════════════
       PAGE 4b – PLAY
    ════════════════════════════════════════ */
    #page-play { flex-direction: column; }

    .play-section-label {
      padding: 16px var(--pad-h) 8px;
      font-size: 0.6rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text-dim);
      font-family: var(--font-body);
    }

    .play-deck-list {
      display: flex;
      flex-direction: column;
      border-top: 1px solid var(--border);
    }

    .play-deck-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px var(--pad-h);
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: background 150ms;
      min-height: 56px;
    }
    @media (hover: hover) {
      .play-deck-item:hover { background: var(--surface); }
    }
    .play-deck-item:active { background: var(--surface); }

    .play-deck-check {
      width: 16px;
      height: 16px;
      border: 1px solid var(--border);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.7rem;
      color: var(--gold);
      transition: border-color 150ms, background 150ms;
    }
    .play-deck-item.selected .play-deck-check {
      border-color: var(--gold);
      background: rgba(200,169,110,0.15);
    }
    .play-deck-label { flex: 1; font-size: 0.88rem; color: var(--text-primary); }
    .play-deck-count { font-size: 0.68rem; color: var(--text-dim); font-family: var(--font-mono); }

    .play-modes { border-top: 1px solid var(--border); }

    .play-mode-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px var(--pad-h);
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: background 150ms;
      min-height: 56px;
    }
    @media (hover: hover) {
      .play-mode-item:hover { background: var(--surface); }
    }
    .play-mode-item:active { background: var(--surface); }
    .play-mode-item.selected {
      background: rgba(200,169,110,0.08);
      border-left: 2px solid var(--gold);
      padding-left: calc(var(--pad-h) - 2px);
    }
    .play-mode-item .hub-name { color: var(--text-primary); }
    .play-mode-item.selected .hub-name { color: var(--gold); }

    .play-footer {
      padding: 16px var(--pad-h);
      border-top: 1px solid var(--border);
      margin-top: auto;
    }

    /* ════════════════════════════════════════
       PAGE 5 – MAIN INTERFACE / HUB
    ════════════════════════════════════════ */
    #page-hub { flex-direction: column; }

    .hub-header {
      padding: var(--gap) var(--pad-h) 16px;
      border-bottom: 1px solid var(--border);
    }

    .hub-deck-name {
      font-family: var(--font-display);
      font-size: 1.6rem;
      font-style: italic;
      color: var(--text-primary);
      margin-bottom: 4px;
    }

    .hub-deck-sub {
      font-size: 0.72rem;
      color: var(--text-dim);
      margin-bottom: 16px;
    }

    .hub-progress {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .hub-progress-track {
      flex: 1;
      height: 2px;
      background: var(--border);
      border-radius: 2px;
      overflow: hidden;
    }

    .hub-progress-fill {
      height: 100%;
      background: var(--gold);
      border-radius: 2px;
    }

    .hub-progress-pct {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: var(--gold);
      min-width: 32px;
      text-align: right;
    }

    .hub-section-label {
      padding: 16px var(--pad-h) 8px;
      font-size: 0.6rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text-dim);
      border-bottom: 1px solid var(--border);
    }

    .hub-list { flex: 1; overflow-y: auto; }

    .hub-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px var(--pad-h);
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: background 150ms;
    }

    @media (hover: hover) {
      .hub-item:hover:not(.hub-disabled) { background: var(--surface); }
    }

    .hub-disabled {
      opacity: 0.3;
      cursor: not-allowed;
      pointer-events: none;
    }

    .hub-icon {
      font-size: 1.2rem;
      width: 24px;
      text-align: center;
      flex-shrink: 0;
    }

    .hub-info { flex: 1; }

    .hub-name {
      font-size: 0.92rem;
      font-weight: 500;
      color: var(--text-primary);
    }

    .hub-sub {
      font-size: 0.72rem;
      color: var(--text-dim);
      margin-top: 1px; /* off-grid: optical line-height correction for small sub-label text */
    }

    .hub-arrow {
      color: var(--text-dim);
      font-size: 0.82rem;
      flex-shrink: 0;
    }

    /* divider between learn modes and tools */
    .hub-divider {
      height: 1px;
      background: var(--border);
      margin: 0;
    }

    /* ── Session length chips ── */
    .hub-chips--flush { margin-top: 0; }

    .hub-chips {
      display: flex;
      gap: 6px; /* off-grid: chip gap — 8px too wide for compact chip row */
    }
    .hub-chip {
      padding: 3px 10px; /* off-grid: chip compact padding — standard grid too large */
      border: 1px solid var(--border);
      background: none;
      color: var(--text-dim);
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 150ms;
    }
    .hub-chip.active {
      border-color: var(--gold);
      color: var(--gold);
    }
    @media (hover: hover) {
      .hub-chip:not(.active):hover {
        border-color: var(--text-dim);
        color: var(--text-primary);
      }
    }

    /* ── Direction row (Standard / Reversed / Random) ── */
    .hub-direction-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px var(--pad-h);
      border-bottom: 1px solid var(--border);
      gap: 16px;
    }

    .detail-header {
      padding: var(--gap) var(--pad-h) 16px;
      border-bottom: 1px solid var(--border);
    }

    .detail-title {
      font-family: var(--font-display);
      font-size: 1.8rem;
      font-style: italic;
      color: var(--text-primary);
      margin-bottom: 4px;
    }

    .detail-desc {
      font-size: 0.78rem;
      color: var(--text-dim);
      margin-bottom: 16px;
      line-height: 1.5;
    }

    .detail-stats-row {
      display: flex;
      border: 1px solid var(--border);
    }

    .detail-stat {
      flex: 1;
      padding: 16px var(--pad-card);
      border-right: 1px solid var(--border);
      text-align: center;
    }

    .detail-stat:last-child { border-right: none; }

    .detail-stat-num {
      font-family: var(--font-mono);
      font-size: 1.3rem;
      color: var(--gold);
      line-height: 1;
    }

    .detail-stat-label {
      font-size: 0.6rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--text-dim);
      margin-top: 4px;
    }

    .detail-progress {
      margin-top: 16px;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .detail-progress-track {
      flex: 1;
      height: 2px;
      background: var(--border);
      border-radius: 2px;
      overflow: hidden;
    }

    .detail-progress-fill {
      height: 100%;
      background: var(--gold);
      border-radius: 2px;
      transition: width 400ms ease;
    }

    .detail-progress-pct {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: var(--gold);
      min-width: 32px;
      text-align: right;
    }

    .mode-section-label {
      padding: 16px var(--pad-h) 8px;
      font-size: 0.6rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text-dim);
      border-bottom: 1px solid var(--border);
    }

    .mode-list { flex: 1; }

    .mode-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px var(--pad-h);
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: background 150ms;
    }

    .mode-item:hover { background: var(--surface); }

    .mode-item.disabled {
      opacity: 0.35;
      cursor: not-allowed;
      pointer-events: none;
    }

    .mode-icon {
      font-size: 1.1rem;
      width: 24px;
      text-align: center;
      flex-shrink: 0;
    }

    .mode-info { flex: 1; }

    .mode-name {
      font-size: 0.88rem;
      font-weight: 500;
      color: var(--text-primary);
    }

    .mode-sub {
      font-size: 0.72rem;
      color: var(--text-dim);
    }

    .mode-arrow { color: var(--text-dim); font-size: 0.75rem; }

    .detail-footer {
      padding: 16px var(--pad-h);
      border-top: 1px solid var(--border);
      display: flex;
      gap: 16px;
    }

    .btn-danger { border-color: var(--error); color: var(--error); }
    .btn-danger:hover { background: var(--error); color: #fff; }
    .btn--full     { width: 100%; } /* full-width button — replaces inline style="width:100%" */

    /* ════════════════════════════════════════
       PAGE 3 – CREATE / EDIT DECK
    ════════════════════════════════════════ */
    #page-create-deck { flex-direction: column; }

    .form-body {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: var(--gap) var(--pad-h);
      display: flex;
      flex-direction: column;
      gap: var(--gap);
    }

    .form-group { display: flex; flex-direction: column; gap: 8px; }

    .form-label {
      font-size: 0.6rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text-dim);
    }

    .form-input,
    .form-textarea {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 0.88rem;
      padding: 16px var(--pad-card);
      width: 100%;
      outline: none;
      transition: border-color 150ms;
      resize: none;
    }

    .form-input:focus,
    .form-textarea:focus { border-color: var(--gold); }

    .form-input::placeholder,
    .form-textarea::placeholder { color: var(--text-dim); }

    .form-hint { font-size: 0.7rem; color: var(--text-dim); }

    .form-error {
      font-size: 0.75rem;
      color: var(--error);
      display: none;
    }

    .form-error.visible { display: block; }

    .form-footer {
      padding: 16px var(--pad-h);
      border-top: 1px solid var(--border);
      display: flex;
      gap: 16px;
    }

    /* ════════════════════════════════════════
       PAGE 4 – MANAGE CARDS
    ════════════════════════════════════════ */
    #page-manage-cards { flex-direction: column; }

    /* add card form at top */
    .add-card-form {
      padding: var(--gap) var(--pad-h) 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      border-bottom: 1px solid var(--border);
      padding-bottom: var(--gap);
    }

    .add-card-row {
      display: flex;
      gap: 8px;
    }

    .add-card-row .form-input { flex: 1; }

    .add-card-section-label {
      font-size: 0.6rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text-dim);
      padding: 16px var(--pad-h) 0;
    }

    /* card list */
    .card-list {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .card-list.at-bottom { }

    .card-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px var(--pad-h);
      border-bottom: 1px solid var(--border);
      transition: background 150ms;
    }

    .card-item:hover { background: var(--surface); }

    .card-sides { flex: 1; min-width: 0; }

    .card-front {
      font-size: 0.88rem;
      font-weight: 500;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .card-back {
      font-size: 0.78rem;
      color: var(--text-dim);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .card-status {
      font-size: 0.65rem;
      padding: 2px 8px; /* off-grid: card status badge — minimal pill padding */
      border: 1px solid var(--border);
      color: var(--text-dim);
      flex-shrink: 0;
    }

    .card-status.learned {
      border-color: var(--success);
      color: var(--success);
    }

    .card-actions {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }

    .card-btn {
      background: none;
      border: 1px solid var(--border);
      color: var(--text-dim);
      font-size: 0.72rem;
      padding: 4px 8px;
      cursor: pointer;
      font-family: var(--font-body);
      transition: border-color 150ms, color 150ms;
    }

    .card-btn:hover { border-color: var(--text-primary); color: var(--text-primary); }
    .card-btn.delete:hover { border-color: var(--error); color: var(--error); }
    .card-btn.fav        { color: var(--text-dim); }
    .card-btn.fav.active { color: var(--gold); border-color: var(--gold); }

    /* edit card inline overlay */
    .card-edit-row {
      padding: 16px var(--pad-h);
      background: var(--surface);
      border-bottom: 1px solid var(--gold-dim);
      display: none;
      flex-direction: column;
      gap: 8px;
    }

    .card-edit-row.visible { display: flex; }

    .card-edit-inputs {
      display: flex;
      gap: 8px;
    }

    .card-edit-inputs .form-input { flex: 1; }

    .card-edit-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }

    /* empty card list */
    .cards-empty {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: var(--text-dim);
      padding: var(--pad-h);
      text-align: center;
    }

    .cards-empty-icon { font-size: 1.8rem; opacity: 0.3; }

    .cards-empty-title {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 1rem;
      color: var(--text-dim);
    }

    .cards-empty-sub {
      font-family: var(--font-body);
      font-size: 0.72rem;
      color: var(--text-dim);
      margin-top: 6px;
    }

    /* ════════════════════════════════════════
       PAGE 6 – FLASHCARD / LEARN MODE
    ════════════════════════════════════════ */
    #page-flashcard { flex-direction: column; }

    .learn-progress-bar {
      height: 2px;
      background: var(--border);
    }

    /* shared fill style — used by all progress bars across learn modes + hub */
    .learn-progress-fill,
    .hub-progress-fill {
      height: 100%;
      background: var(--gold);
      border-radius: 2px; /* off-grid: matches track border-radius */
    }

    .learn-progress-fill {
      transition: width 400ms ease;
    }

    .learn-counter {
      padding: 16px var(--pad-h) 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .learn-counter-text {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      color: var(--text-dim);
    }

    .learn-score {
      display: flex;
      gap: 16px;
      font-family: var(--font-mono);
      font-size: 0.7rem;
    }

    .learn-score-good  { color: var(--success); }
    .learn-score-bad   { color: var(--error); }

    /* flip card */
    .flashcard-area {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--pad-h);
      cursor: pointer;
    }

    .flashcard-wrap {
      width: 100%;
      max-width: 480px;
      perspective: 1000px;
    }

    .flashcard-inner {
      position: relative;
      width: 100%;
      min-height: 220px;
      transform-style: preserve-3d;
      transition: transform 400ms ease;
    }
    .flashcard-inner.flipped { transform: rotateY(180deg); }
    .flashcard-inner.no-transition { transition: none !important; }

    .flashcard-face {
      position: absolute;
      inset: 0;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border);
      padding: var(--pad-card);
      background: var(--surface);
      text-align: center;
    }

    .flashcard-face.back {
      transform: rotateY(180deg);
      border-color: var(--gold-dim);
    }

    .flashcard-side-label {
      font-size: 0.58rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text-dim);
      margin-bottom: 16px;
    }

    .flashcard-text {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 5vw, 2.2rem);
      color: var(--text-primary);
      line-height: 1.2;
    }

    .flashcard-hint {
      margin-top: 24px;
      font-size: 0.68rem;
      color: var(--text-dim);
      letter-spacing: 1px;
    }

    /* rating buttons */
    .learn-actions--hidden { visibility: hidden; } /* initial hidden state — JS removes this class */

    .learn-actions {
      padding: 16px var(--pad-h);
      border-top: 1px solid var(--border);
      display: flex;
      gap: 16px;
    }

    .btn-bad {
      flex: 1;
      border-color: var(--error);
      color: var(--error);
    }

    .btn-bad:hover { background: var(--error); color: #fff; }

    .btn-good {
      flex: 1;
      border-color: var(--success);
      color: var(--success);
    }

    .btn-good:hover { background: var(--success); color: #fff; }

    .learn-actions-hidden { visibility: hidden; }

    /* session summary */
    .summary-page {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: var(--pad-h);
      text-align: center;
      gap: 24px;
    }

    .summary-title {
      font-family: var(--font-display);
      font-size: 2rem;
      font-style: italic;
      color: var(--text-primary);
    }

    .summary-stats {
      display: flex;
      gap: 0;
      border: 1px solid var(--border);
    }

    .summary-stat {
      padding: 16px 32px;
      border-right: 1px solid var(--border);
    }

    .summary-stat:last-child { border-right: none; }

    .summary-stat-num {
      font-family: var(--font-mono);
      font-size: 2rem;
      line-height: 1;
    }

    .summary-stat-num.good { color: var(--success); }
    .summary-stat-num.bad  { color: var(--error); }

    .summary-stat-label {
      font-size: 0.6rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text-dim);
      margin-top: 4px;
    }

    .summary-actions {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
      max-width: 300px;
    }

    /* ════════════════════════════════════════
       PAGE 7 – QUIZ MODE
    ════════════════════════════════════════ */
    #page-quiz { flex-direction: column; }

    .quiz-question-area {
      padding: var(--gap) var(--pad-h);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .quiz-question-label {
      font-size: 0.6rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text-dim);
      margin-bottom: 16px;
    }

    .quiz-question-text {
      font-family: var(--font-display);
      font-size: clamp(1.3rem, 4vw, 1.8rem);
      color: var(--text-primary);
      line-height: 1.2;
    }

    .quiz-options {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
    }

    .quiz-option {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px var(--pad-h);
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: background 150ms;
    }

    @media (hover: hover) {
      .quiz-option:hover:not(.answered) { background: var(--surface); }
    }

    .quiz-option.correct {
      background: rgba(74, 124, 89, 0.15);
      border-color: var(--success);
      transform: scale(1.01);
      box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.12);
    }

    .quiz-option.wrong {
      background: rgba(192, 57, 43, 0.12);
      border-color: var(--error);
      transform: scale(0.99);
    }

    /* write input feedback */
    .write-input.correct {
      border-color: var(--success);
      background: rgba(74, 124, 89, 0.06);
      box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.1);
    }
    .write-input.almost {
      border-color: var(--gold);
      background: rgba(200, 169, 110, 0.06);
    }
    .write-input.wrong {
      border-color: var(--error);
      background: rgba(192, 57, 43, 0.06);
    }

    /* flashcard rating button active feedback */
    .btn-good:active { transform: scale(0.97); background: var(--success); color: #fff; }
    .btn-bad:active  { transform: scale(0.97); background: var(--error);   color: #fff; }

    .quiz-option-letter {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      color: var(--text-dim);
      width: 24px;
      flex-shrink: 0;
    }

    .quiz-option-text {
      font-size: 0.9rem;
      color: var(--text-primary);
      flex: 1;
    }

    .quiz-option-icon {
      font-size: 0.9rem;
      flex-shrink: 0;
    }

    .quiz-footer {
      padding: 16px var(--pad-h);
      border-top: 1px solid var(--border);
    }

    /* ════════════════════════════════════════
       PAGE 7b – WRITE MODE
    ════════════════════════════════════════ */
    #page-write { flex-direction: column; }

    .write-input-area {
      display: flex;
      gap: 16px;
      padding: 24px var(--pad-h) 0;
      align-items: stretch;
    }
    .write-input {
      flex: 1;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 1rem;
      padding: 16px var(--pad-card);
      outline: none;
      transition: border-color 150ms;
      border-radius: 0;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }
    .write-input:focus { border-color: var(--gold); }
    .write-submit {
      flex-shrink: 0;
      padding: 0 24px;
      font-size: 1.1rem;
    }

    .write-result {
      padding: 24px var(--pad-h);
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .write-result-badge {
      font-size: 0.72rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-family: var(--font-mono);
      padding: 8px 12px; /* off-grid: write result badge — compact label sizing */
      border: 1px solid;
      display: inline-block;
      align-self: flex-start;
    }
    .write-result-badge.correct { color: var(--success); border-color: var(--success); }
    .write-result-badge.almost  { color: var(--gold);    border-color: var(--gold); }
    .write-result-badge.wrong   { color: var(--error);   border-color: var(--error); }

    .write-result-correct {
      font-size: 0.88rem;
      color: var(--text-dim);
      line-height: 1.5;
    }
    .write-result-correct strong {
      color: var(--text-primary);
      font-weight: 500;
    }
    #page-stats { flex-direction: column; }

    .stats-header {
      padding: var(--gap) var(--pad-h) 16px;
      border-bottom: 1px solid var(--border);
    }

    .stats-title {
      font-family: var(--font-display);
      font-size: 1.8rem;
      line-height: 1.1;
    }

    .stats-title em { font-style: italic; color: var(--gold); }

    /* hero numbers row */
    .stats-hero {
      display: flex;
      border-bottom: 1px solid var(--border);
    }

    .stats-hero-item {
      flex: 1;
      padding: 24px var(--pad-h);
      border-right: 1px solid var(--border);
      text-align: center;
    }

    .stats-hero-item:last-child { border-right: none; }

    .stats-hero-num {
      font-family: var(--font-mono);
      font-size: 2rem;
      color: var(--gold);
      line-height: 1;
    }

    .stats-hero-label {
      font-size: 0.6rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text-dim);
      margin-top: 6px; /* off-grid: optical gap under hero stat number — 8px too large */
    }

    .stats-deck-list {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .stats-deck-list.at-bottom { }

    .stats-deck-item {
      padding: 16px var(--pad-h);
      border-bottom: 1px solid var(--border);
    }

    .stats-deck-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 8px;
    }

    .stats-deck-name {
      font-size: 0.88rem;
      font-weight: 500;
      color: var(--text-primary);
    }

    .stats-deck-figures {
      display: flex;
      gap: 16px;
      align-items: center;
    }

    .stats-deck-pct {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      color: var(--gold);
    }

    .stats-deck-err {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: var(--error);
    }

    .stats-bar-track {
      height: 2px;
      background: var(--border);
      border-radius: 2px;
      overflow: hidden;
    }

    .stats-bar-fill {
      height: 100%;
      background: var(--gold);
      border-radius: 2px;
    }

    .stats-bar-err {
      height: 100%;
      background: var(--error);
      border-radius: 2px;
    }

    .stats-section-label {
      padding: 16px var(--pad-h) 8px;
      font-size: 0.6rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text-dim);
      border-bottom: 1px solid var(--border);
    }

    .stats-empty {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: var(--text-dim);
      font-size: 0.82rem;
      padding: var(--pad-h);
      text-align: center;
    }

    /* ════════════════════════════════════════
       SCROLL-DOWN ARROW (WhatsApp-style)
       Appears when scrollable list has more content below.
       Parent must have position: relative.
    ════════════════════════════════════════ */
    .scroll-arrow {
      position: absolute;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--gold);
      font-size: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      opacity: 1;
      transition: opacity 200ms ease;
      pointer-events: auto;
      box-shadow: 0 2px 8px rgba(0,0,0,0.4);
      user-select: none;
    }
    /* ── GLOBAL VISIBILITY UTILITY ──
       Used by quiz-footer, write-result, write-submit-btn.
       Each element defines its own display value in its own rule;
       .hidden only overrides it to none without touching layout elsewhere. */
    .hidden { display: none !important; }

    .scroll-arrow.hidden {
      display: flex !important; /* restore scroll-arrow's own display for specificity */
      opacity: 0;
      pointer-events: none;
    }

    /* Containers that host a scroll-arrow need relative positioning */
    .deck-list-wrap,
    .card-list-wrap,
    .stats-deck-list-wrap,
    .settings-scroll-wrap {
      position: relative;
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    #page-settings { flex-direction: column; }

    /* scrollable content area with fade-out scroll hint */
    .settings-scroll {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      position: relative;
    }
    .settings-scroll.at-bottom { }

    .settings-section {
      border-bottom: 1px solid var(--border);
    }

    .settings-section-label {
      padding: 16px var(--pad-h) 8px;
      font-size: 0.6rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text-dim);
    }

    .settings-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px var(--pad-h);
      border-top: 1px solid var(--border);
      cursor: pointer;
      transition: background 150ms;
    }

    .settings-item:hover { background: var(--surface); }

    .settings-item-left { display: flex; align-items: center; gap: 16px; }
    .settings-item-icon { font-size: 1rem; width: 24px; text-align: center; }

    .settings-item-label {
      font-size: 0.88rem;
      color: var(--text-primary);
    }

    .settings-item-sub {
      font-size: 0.72rem;
      color: var(--text-dim);
    }

    .settings-item-value {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: var(--gold);
    }

    .settings-item-arrow { color: var(--text-dim); font-size: 0.75rem; }

    /* ── LANGUAGE PICKER ────────────────────
       Trigger button + dropdown list panel.
       Shows current flag + name, expands on click. */

    .lang-picker {
      padding: 12px var(--pad-h) 16px;
      position: relative;
    }

    .lang-trigger {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-primary);
      font-family: var(--font-body);
      font-size: 0.85rem;
      cursor: pointer;
      width: 100%;
      text-align: left;
      transition: border-color 150ms;
      touch-action: manipulation;
      user-select: none;
      -webkit-user-select: none;
    }
    .lang-trigger:hover { border-color: var(--text-dim); }
    .lang-trigger.open  { border-color: var(--gold); }

    .lang-trigger-flag { font-size: 1.3rem; line-height: 1; }
    .lang-trigger-name { flex: 1; }
    .lang-trigger-code {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      color: var(--gold-dim);
      letter-spacing: 2px;
    }
    .lang-trigger-chevron {
      color: var(--text-dim);
      font-size: 0.75rem;
      transition: transform 150ms;
    }
    .lang-trigger.open .lang-trigger-chevron { transform: rotate(180deg); }

    /* dropdown panel */
    .lang-dropdown {
      display: none;
      position: absolute;
      top: calc(100% - 4px); /* off-grid: overlap trigger border by 4px */
      left: var(--pad-h);
      right: var(--pad-h);
      border: 1px solid var(--gold);
      border-top: none;
      background: var(--surface);
      z-index: 50;
      max-height: 320px;
      overflow-y: auto;
    }
    .lang-dropdown.open { display: block; }

    .lang-option {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: background 100ms;
      touch-action: manipulation;
      user-select: none;
      -webkit-user-select: none;
    }
    .lang-option:last-child { border-bottom: none; }
    @media (hover: hover) {
      .lang-option:hover { background: var(--bg); }
    }
    .lang-option:active { background: var(--bg); }
    .lang-option.active { color: var(--gold); }
    .lang-option.active .lang-option-code { color: var(--gold); }

    .lang-option-flag { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
    .lang-option-name { flex: 1; font-size: 0.85rem; color: inherit; }
    .lang-option-code {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      color: var(--gold-dim);
      letter-spacing: 2px;
    }
    .lang-option-check { color: var(--gold); font-size: 0.85rem; width: 16px; text-align: right; }

    /* version log */
    .version-log {
      border: 1px solid var(--border);
      margin: 0 var(--pad-h) 8px;
    }

    .version-log-item {
      display: grid;
      grid-template-columns: 3.4rem 3.8rem 1fr;
      gap: 8px;
      padding: 8px 16px;
      border-bottom: 1px solid var(--border);
      align-items: start;
    }

    .version-log-item:last-child { border-bottom: none; }

    .version-log-num {
      font-family: var(--font-mono);
      font-size: 0.62rem;
      color: var(--gold);
      letter-spacing: 0.5px;
      padding-top: 1px; /* off-grid: optical vertical alignment with badge */
    }

    .version-log-badge {
      font-family: var(--font-mono);
      font-size: 0.55rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding-top: 2px; /* off-grid: optical vertical alignment */
    }

    .version-log-desc {
      font-size: 0.78rem;
      color: var(--text-dim);
      line-height: 1.45;
    }


    /* ── PRINT / SAVE AS PDF ───────────────
       Clean output: hide UI chrome, show content only.
       Useful for printing deck contents from manage-cards. */
    @media print {
      .nav, .library-footer, .update-overlay, #onboarding-overlay,
      .btn, .scroll-arrow, .unsaved-banner { display: none !important; }
      .page { display: block !important; border: none !important; }
      body  { background: white; color: black; font-size: 12pt; }
      .card-item { border: 1px solid #ccc; margin-bottom: 8pt; page-break-inside: avoid; }
    }

    /* ════════════════════════════════════════
       PAGE: NEW DECK CHOICE — v0.14.2 redesign
       Android-safe: no flex height inheritance,
       no position:absolute children.
       Two tall bordered cards, self-contained layout.
    ════════════════════════════════════════ */

    /* Page intro header */
    .ndeck-header {
      padding: var(--gap) var(--pad-h) 20px;
      border-bottom: 1px solid var(--border);
    }

    .ndeck-heading {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 5vw, 1.9rem);
      color: var(--text-primary);
      line-height: 1.15;
    }

    .ndeck-heading em, .ndeck-em {
      font-style: italic;
      color: var(--gold);
    }

    .ndeck-hint {
      font-family: var(--font-body);
      font-size: 0.72rem;
      color: var(--text-dim);
      letter-spacing: 0.5px;
      margin-top: 6px; /* off-grid: optical gap */
    }

    /* Card grid — simple block stacking, no flex height tricks */
    .ndeck-grid {
      padding: 24px var(--pad-h);
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .ndeck-card {
      display: block;
      padding: 28px 24px;
      border: 1px solid var(--border);
      background: var(--surface);
      cursor: pointer;
      transition: border-color 150ms, background 150ms;
      min-height: 160px;
      text-decoration: none;
    }
    @media (hover: hover) {
      .ndeck-card:hover {
        border-color: var(--gold-dim);
        background: var(--bg);
      }
    }
    .ndeck-card:active {
      border-color: var(--gold-dim);
      background: var(--bg);
    }

    /* Large glyph — inline flow, not absolute */
    .ndeck-card-glyph {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 2.8rem;
      color: var(--gold);
      line-height: 1;
      margin-bottom: 16px;
      display: block;
    }

    /* Card content */
    .ndeck-card-label {
      display: block;
      font-family: var(--font-body);
      font-size: 0.6rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--gold-dim);
      margin-bottom: 6px;
    }

    .ndeck-card-title {
      display: block;
      font-family: var(--font-display);
      font-size: 1.25rem;
      color: var(--text-primary);
      line-height: 1.2;
      margin-bottom: 8px;
    }

    .ndeck-card-sub {
      display: block;
      font-family: var(--font-body);
      font-size: 0.78rem;
      color: var(--text-dim);
      margin-bottom: 16px;
    }

    .ndeck-card-arrow {
      display: block;
      font-size: 0.68rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--gold);
      font-family: var(--font-body);
    }

    /* danger zone */
    .settings-danger {
      padding: 16px var(--pad-h);
    }

    .welcome-hint {
      font-size: 0.7rem;
      color: var(--text-dim);
      text-align: center;
      padding: 0 var(--pad-h);
      margin-top: -4px;
    }

    /* ── SYNC STATUS INDICATOR ── */
    .sync-indicator {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.68rem;
      font-family: var(--font-mono);
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 99px;
      border: 1px solid var(--border);
      color: var(--text-dim);
      cursor: default;
      transition: color 0.2s, border-color 0.2s;
      white-space: nowrap;
    }
    .sync-indicator.synced  { color: var(--gold);  border-color: var(--gold-dim); }
    .sync-indicator.pending { color: #f59e0b;       border-color: #f59e0b55; }
    .sync-indicator.error   { color: var(--error);  border-color: var(--error); }
    .sync-indicator.hidden  { display: none; }
    .sync-indicator-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: currentColor;
      flex-shrink: 0;
    }

    /* ── CONFLICT MODAL ── */
    .conflict-modal-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.65);
      z-index: 950;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .conflict-modal-backdrop.open { display: flex; }
    .conflict-modal {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px;
      width: 100%;
      max-width: 380px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .conflict-modal-title {
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text);
    }
    .conflict-modal-body {
      font-size: 0.78rem;
      color: var(--text-dim);
      line-height: 1.5;
    }
    .conflict-timestamps {
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: var(--bg-raised, #1a1a1a);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 10px 12px;
      font-family: var(--font-mono);
      font-size: 0.7rem;
    }
    .conflict-ts-row { display: flex; justify-content: space-between; gap: 8px; }
    .conflict-ts-label { color: var(--text-dim); }
    .conflict-ts-value { color: var(--text); font-weight: 600; }
    .conflict-ts-value.newer { color: var(--gold); }
    .conflict-modal-actions { display: flex; gap: 10px; flex-direction: column; }
    .conflict-modal-actions .btn { width: 100%; justify-content: center; }

    /* ── STORAGE MODE (settings radio) ── */
    .storage-mode-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 12px var(--pad-h) 8px;
    }
    .storage-mode-option {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      cursor: pointer;
      padding: 10px 12px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      transition: border-color 0.15s;
    }
    .storage-mode-option:hover    { border-color: var(--gold-dim); }
    .storage-mode-option.selected { border-color: var(--gold); }
    .storage-mode-option input[type="radio"] {
      margin-top: 3px;
      accent-color: var(--gold);
      flex-shrink: 0;
    }
    .storage-mode-option-label { font-size: 0.8rem; font-weight: 600; color: var(--text); }
    .storage-mode-option-sub   { font-size: 0.7rem; color: var(--text-dim); margin-top: 2px; }

    /* ── EXPORT FORMAT (settings radio) ── */
    .export-format-group {
      padding: 12px var(--pad-h) 4px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .export-format-option {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      cursor: pointer;
      padding: 10px 12px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      transition: border-color 0.15s;
    }
    .export-format-option:hover { border-color: var(--gold-dim); }
    .export-format-option input[type="radio"] {
      margin-top: 3px;
      accent-color: var(--gold);
      flex-shrink: 0;
    }
    .export-format-option-text { display: flex; flex-direction: column; gap: 2px; }
    .export-format-option-label { font-size: 0.8rem; font-weight: 600; color: var(--text); }
    .export-format-option-sub   { font-size: 0.7rem; color: var(--text-dim); }
    .export-format-option.selected { border-color: var(--gold); }

    /* ── EXPORT MODAL ── */
    .export-modal-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 900;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .export-modal-backdrop.open { display: flex; }
    .export-modal {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px;
      width: 100%;
      max-width: 360px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .export-modal-title {
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text);
    }
    .export-modal-options { display: flex; flex-direction: column; gap: 10px; }
    .export-modal-option {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      cursor: pointer;
      padding: 10px 12px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      transition: border-color 0.15s;
    }
    .export-modal-option:hover  { border-color: var(--gold-dim); }
    .export-modal-option.selected { border-color: var(--gold); }
    .export-modal-option input[type="radio"] {
      margin-top: 3px;
      accent-color: var(--gold);
      flex-shrink: 0;
    }
    .export-modal-option-label { font-size: 0.8rem; font-weight: 600; color: var(--text); }
    .export-modal-option-sub   { font-size: 0.7rem; color: var(--text-dim); margin-top: 2px; }
    .export-modal-actions      { display: flex; gap: 10px; justify-content: flex-end; }

  /* ════════════════════════════════════════
     PRIVACY POLICY
  ════════════════════════════════════════ */
  .privacy-policy {
    padding: var(--pad-h);
    max-width: 680px;
    margin: 0 auto;
  }
  .privacy-title {
    font-family: var(--font-serif);
    font-size: clamp(1.3rem, 4vw, 1.8rem);
    color: var(--gold);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.6rem;
    margin: 0 0 0.3rem;
  }
  .privacy-meta {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 1.6rem;
  }
  .privacy-section {
    margin-bottom: 1.8rem;
  }
  .privacy-section-de {
    background: rgba(200, 169, 110, 0.05);
    border-left: 3px solid var(--gold-dim);
    padding: 1rem;
    margin-top: 2rem;
  }
  .privacy-h2 {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--text);
    margin: 0 0 0.6rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
  }
  .privacy-h3 {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 1rem 0 0.4rem;
  }
  .privacy-policy p {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.65;
    margin: 0 0 0.6rem;
  }
  .privacy-list {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.65;
    padding-left: 1.2rem;
    margin: 0 0 0.6rem;
  }
  .privacy-list li {
    margin-bottom: 0.35rem;
  }
  .privacy-contact-box {
    background: rgba(200, 169, 110, 0.07);
    border-left: 3px solid var(--gold);
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.7;
    margin: 0.5rem 0 0.8rem;
  }
  .privacy-contact-box a {
    color: var(--gold);
  }
  .privacy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    margin: 0.5rem 0 0.8rem;
  }
  .privacy-table th {
    text-align: left;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    padding: 0.4rem 0.6rem 0.4rem 0;
  }
  .privacy-table td {
    color: var(--text);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 0.6rem 0.5rem 0;
    vertical-align: top;
    line-height: 1.5;
  }
  .privacy-table tr:last-child td {
    border-bottom: none;
  }
  .privacy-policy a {
    color: var(--gold);
    text-decoration: none;
  }
  @media (hover: hover) {
    .privacy-policy a:hover { text-decoration: underline; }
  }
  /* Responsive: collapse table on xs */
  @media (max-width: 479px) {
    .privacy-table thead { display: none; }
    .privacy-table tr    { display: block; margin-bottom: 0.8rem; border-bottom: 1px solid var(--border); }
    .privacy-table td    { display: block; border-bottom: none; padding: 0.2rem 0; }
    .privacy-table td::before {
      content: attr(data-label);
      font-size: 0.62rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-dim);
      display: block;
    }
  }


  /* ════════════════════════════════════════
     PRIVACY POLICY ACCORDION
  ════════════════════════════════════════ */
  .privacy-accordion {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 0 0 1rem;
    overflow: hidden;
  }

  .privacy-accordion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem var(--pad-h, 1rem);
    cursor: pointer;
    user-select: none;
    list-style: none;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.3px;
    background: transparent;
    transition: background 0.15s;
  }

  /* Remove default marker in all browsers */
  .privacy-accordion-summary::-webkit-details-marker { display: none; }
  .privacy-accordion-summary::marker { content: ''; }

  @media (hover: hover) {
    .privacy-accordion-summary:hover {
      background: rgba(200, 169, 110, 0.06);
    }
  }

  /* Chevron icon — rotates when open */
  .privacy-accordion-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    position: relative;
    color: var(--gold-dim);
    transition: transform 0.22s ease;
  }

  .privacy-accordion-icon::before,
  .privacy-accordion-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 7px;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.22s ease;
  }

  .privacy-accordion-icon::before { left: 2px;  transform: translateY(-50%) rotate(45deg);  }
  .privacy-accordion-icon::after  { right: 2px; transform: translateY(-50%) rotate(-45deg); }

  .privacy-accordion[open] .privacy-accordion-icon::before { transform: translateY(-50%) rotate(-45deg); }
  .privacy-accordion[open] .privacy-accordion-icon::after  { transform: translateY(-50%) rotate(45deg);  }

  /* Smooth open/close via max-height animation */
  .privacy-accordion .privacy-policy {
    animation: privacyOpen 0.25s ease;
    border-top: 1px solid var(--border);
    padding-top: 0.5rem;
  }

  @keyframes privacyOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }