/* ============================================================
       DESIGN TOKENS — Habla
       ============================================================ */
    :root {
      --bg:           #faf8f3;
      --bg-elev:      #fefdfa;
      --card:         #ffffff;
      --text:         #1a1714;
      --text-2:       #6f665b;
      --text-3:       #a8a098;
      --hairline:     rgba(26,23,20,0.07);
      --border:       rgba(26,23,20,0.06);
      --accent:       #c2410c;
      --accent-soft:  rgba(194,65,12,0.10);
      --shadow:       0 1px 2px rgba(26,23,20,0.04), 0 6px 18px rgba(26,23,20,0.06);
      --correct:      #16a34a;
      --correct-bg:   rgba(22,163,74,0.09);
      --incorrect:    #dc2626;
      --incorrect-bg: rgba(220,38,38,0.08);
      --star-color:   #f59e0b;
      --overlay-bg:   rgba(0,0,0,0.42);
      --radius:       16px;
      --font:         'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --speed:        0.18s;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg:           #17141a;
        --bg-elev:      #1f1c22;
        --card:         #211e25;
        --text:         #f3eee5;
        --text-2:       #b6ada0;
        --text-3:       #7d756b;
        --hairline:     rgba(255,255,255,0.07);
        --border:       rgba(255,255,255,0.08);
        --accent:       #ea6a3a;
        --accent-soft:  rgba(234,106,58,0.14);
        --shadow:       0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.35);
        --correct:      #4ade80;
        --correct-bg:   rgba(74,222,128,0.10);
        --incorrect:    #f87171;
        --incorrect-bg: rgba(248,113,113,0.10);
        --overlay-bg:   rgba(0,0,0,0.55);
      }
    }

    /* ============================================================
       RESET & BASE
       ============================================================ */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html { -webkit-text-size-adjust: 100%; height: 100%; }

    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--text);
      display: flex;
      flex-direction: column;
      min-height: 100dvh;
      padding-top: env(safe-area-inset-top);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    button {
      font-family: var(--font);
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation; /* prevent 300ms iOS double-tap delay */
      cursor: pointer;
    }

    /* ============================================================
       ANIMATIONS
       ============================================================ */
    @keyframes spin    { to { transform: rotate(360deg); } }
    @keyframes icon-pop {
      from { transform: scale(0.55); opacity: 0; }
      to   { transform: scale(1);    opacity: 1; }
    }

    /* ============================================================
       LOADING SCREEN
       ============================================================ */
    #loading {
      position: fixed; inset: 0; z-index: 500;
      display: flex; align-items: center; justify-content: center;
      background: var(--bg);
    }

    #loading p { color: var(--text-3); font-size: 15px; }

    /* ============================================================
       ERROR OVERLAY
       ============================================================ */
    #error-overlay {
      position: fixed; inset: 0; z-index: 400;
      display: none; align-items: center; justify-content: center;
      padding: 28px; background: var(--bg);
    }

    #error-overlay.visible { display: flex; }

    #error-box {
      max-width: 400px; width: 100%;
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 28px 24px;
      text-align: center;
    }

    #error-box .error-icon { font-size: 36px; margin-bottom: 14px; }

    #error-box h2 {
      font-size: 20px; font-weight: 700;
      color: var(--text); margin-bottom: 10px;
    }

    #error-box p {
      font-size: 14px; color: var(--text-2);
      line-height: 1.6; margin-bottom: 12px;
    }

    #error-box code {
      display: block;
      font-family: "SF Mono", "Fira Code", monospace;
      font-size: 13px; padding: 10px 14px;
      background: var(--bg); border-radius: 8px;
      color: var(--accent); word-break: break-all; margin-bottom: 12px;
    }

    /* ============================================================
       SHARED: ICON BUTTON (gear, etc.)
       ============================================================ */
    .home-header-btn {
      background: none; border: none;
      color: var(--text-3); padding: 6px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      transition: color var(--speed), background var(--speed);
      flex-shrink: 0;
    }

    .home-header-btn:active { color: var(--text); background: var(--accent-soft); }

    /* ============================================================
       HOME SCREEN
       ============================================================ */
    #home-screen {
      flex: 1; display: flex; flex-direction: column;
      padding: 0 20px calc(44px + env(safe-area-inset-bottom));
      max-width: 540px; width: 100%; margin: 0 auto;
    }

    .home-header {
      display: flex; align-items: center;
      justify-content: space-between;
      padding: 20px 0 0; margin-bottom: 28px;
    }

    .home-title {
      font-size: 28px; font-weight: 700;
      letter-spacing: -0.03em; color: var(--text);
    }

    .home-title-dot { color: var(--accent); }

    /* Quick-stats strip */
    .home-stats {
      display: flex; align-items: center;
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 14px 20px;
      margin-bottom: 28px;
    }

    .home-stat-item { flex: 1; text-align: center; }

    .home-stat-value {
      font-size: 22px; font-weight: 700;
      color: var(--accent); letter-spacing: -0.02em; line-height: 1.2;
    }

    .home-stat-label {
      font-size: 10px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.07em;
      color: var(--text-3); margin-top: 3px;
    }

    .home-stat-sep {
      width: 1px; height: 28px; background: var(--hairline);
    }

    .home-mode-label {
      font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.09em;
      color: var(--text-3); margin-bottom: 10px; padding-left: 2px;
    }

    .mode-list { display: flex; flex-direction: column; gap: 10px; }

    .mode-btn {
      display: flex; align-items: center; gap: 14px;
      width: 100%; padding: 18px;
      background: var(--card); border: none;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      text-align: left;
      transition: transform var(--speed), background var(--speed);
    }

    .mode-btn:active { transform: scale(0.985); background: var(--bg-elev); }

    .mode-btn-icon {
      width: 44px; height: 44px; border-radius: 12px;
      background: var(--accent-soft); color: var(--accent);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }

    .mode-btn-body { flex: 1; }

    .mode-btn-title {
      font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 3px;
    }

    .mode-btn-sub { font-size: 13px; color: var(--text-2); }

    .mode-btn-chevron { color: var(--text-3); font-size: 20px; line-height: 1; }

    /* ============================================================
       TENSE SELECT SCREEN
       ============================================================ */
    #tense-screen {
      flex: 1; display: flex; flex-direction: column;
      overflow-y: auto;
      padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }

    .screen-nav {
      display: flex; align-items: center;
      padding: 12px 16px 12px 8px;
      border-bottom: 1px solid var(--hairline);
      background: var(--bg);
      position: sticky; top: 0; z-index: 10; gap: 4px;
    }

    .nav-back-btn {
      background: none; border: none;
      color: var(--accent); font-size: 15px; font-weight: 500;
      padding: 6px 8px; border-radius: 8px;
      display: flex; align-items: center; gap: 4px;
      flex-shrink: 0; font-family: var(--font);
      transition: opacity var(--speed);
    }

    .nav-back-btn:active { opacity: 0.65; }

    .screen-nav-title {
      flex: 1; font-size: 16px; font-weight: 600;
      color: var(--text); text-align: center;
    }

    .tense-list {
      padding: 14px 16px;
      display: flex; flex-direction: column; gap: 8px;
      max-width: 540px; width: 100%; margin: 0 auto;
    }

    .tense-btn {
      display: flex; flex-direction: column; align-items: flex-start;
      width: 100%; padding: 16px 18px;
      background: var(--card); border: none;
      border-radius: var(--radius); box-shadow: var(--shadow);
      text-align: left; font-family: var(--font);
      transition: transform var(--speed), background var(--speed);
      gap: 4px;
    }

    .tense-btn:active { transform: scale(0.985); background: var(--bg-elev); }

    .tense-btn-name   { font-size: 16px; font-weight: 600; color: var(--text); }

    .tense-btn-explainer {
      font-size: 13px; color: var(--text-2);
      line-height: 1.45; font-weight: 400;
    }

    /* ============================================================
       LEARN — LESSON SCREEN
       ============================================================ */
    #learn-screen {
      flex: 1; display: flex; flex-direction: column;
      overflow-y: auto;
      padding-bottom: calc(40px + env(safe-area-inset-bottom));
    }

    .lesson-body {
      max-width: 540px; width: 100%; margin: 0 auto;
      padding: 8px 20px 0;
    }

    .lesson-title {
      font-size: 26px; font-weight: 700;
      letter-spacing: -0.025em; color: var(--text);
      margin: 18px 0 6px;
    }

    .lesson-subtitle {
      font-size: 14px; color: var(--text-2);
      line-height: 1.5; margin-bottom: 28px;
    }

    .lesson-section { margin-bottom: 30px; }

    .lesson-section-title {
      font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.09em;
      color: var(--text-3); margin-bottom: 12px;
    }

    .lesson-rule {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px 20px;
      font-size: 15px; line-height: 1.6; color: var(--text);
    }

    .lesson-rule strong { font-weight: 600; color: var(--text); }
    .lesson-rule em     { font-style: normal; color: var(--accent); font-weight: 500; }

    /* Ending boxes — for ending tables like AR → -aba, -abas… */
    .lesson-endings {
      display: flex; flex-direction: column; gap: 10px;
    }

    .lesson-ending-card {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 16px 18px;
    }

    .lesson-ending-label {
      font-size: 12px; font-weight: 600;
      color: var(--accent);
      text-transform: uppercase; letter-spacing: 0.06em;
      margin-bottom: 10px;
    }

    .lesson-ending-grid {
      display: grid;
      grid-template-columns: minmax(0,1fr) minmax(0,1fr);
      gap: 6px 18px;
    }

    .lesson-ending-row {
      display: flex; justify-content: space-between;
      font-size: 14px; line-height: 1.5;
      padding: 4px 0;
      border-bottom: 1px solid var(--hairline);
    }

    .lesson-ending-row:last-child,
    .lesson-ending-row:nth-last-child(2):nth-child(odd) {
      border-bottom: none;
    }

    .lesson-ending-person { color: var(--text-2); }
    .lesson-ending-form   {
      color: var(--text); font-weight: 500;
      font-variant-numeric: tabular-nums;
    }

    /* Examples list */
    .lesson-examples {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 14px 18px;
    }

    .lesson-example {
      display: flex; align-items: baseline;
      font-size: 14px; line-height: 1.6;
      padding: 7px 0;
      border-bottom: 1px solid var(--hairline);
    }

    .lesson-example:last-child { border-bottom: none; }

    .lesson-example-infinitive {
      color: var(--text-2);
      min-width: 88px; padding-right: 12px;
    }

    .lesson-example-form {
      color: var(--text); font-weight: 500; flex: 1;
    }

    .lesson-example-gloss {
      color: var(--text-3); font-size: 12px;
      margin-left: 8px;
    }

    /* Callout — irregulars, key insight, mental shortcut */
    .lesson-callout {
      background: var(--accent-soft);
      border-radius: var(--radius);
      padding: 16px 18px;
      border-left: 3px solid var(--accent);
    }

    .lesson-callout-title {
      font-size: 12px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--accent); margin-bottom: 8px;
    }

    .lesson-callout-body {
      font-size: 14px; line-height: 1.6; color: var(--text);
    }

    .lesson-callout-body strong { font-weight: 600; }

    /* Irregulars rows — verb → forms */
    .lesson-irregulars {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 6px 18px;
    }

    .lesson-irregular-row {
      display: flex; flex-direction: column;
      padding: 12px 0;
      border-bottom: 1px solid var(--hairline);
    }

    .lesson-irregular-row:last-child { border-bottom: none; }

    .lesson-irregular-verb {
      font-size: 14px; font-weight: 600; color: var(--text);
      margin-bottom: 4px;
    }

    .lesson-irregular-detail {
      font-size: 13px; color: var(--text-2);
      line-height: 1.5;
    }

    .lesson-irregular-detail code {
      font-family: var(--font); font-weight: 500;
      color: var(--text);
    }

    /* ============================================================
       STATS BAR
       ============================================================ */
    #stats-bar {
      display: flex; align-items: center;
      padding: 8px 14px;
      background: var(--bg);
      border-bottom: 1px solid var(--hairline);
      position: sticky; top: 0; z-index: 10; gap: 4px;
    }

    #back-to-home {
      flex-shrink: 0; background: none; border: none;
      color: var(--accent); font-size: 14px; font-weight: 600;
      padding: 6px 2px 6px 0;
      font-family: var(--font); white-space: nowrap;
      transition: opacity var(--speed);
    }

    #back-to-home:active { opacity: 0.65; }

    .stats-pills {
      flex: 1; display: flex;
      align-items: center; justify-content: center;
    }

    .stats-pill-item {
      display: flex; flex-direction: column;
      align-items: center; padding: 0 14px;
    }

    .stats-pill-item + .stats-pill-item {
      border-left: 1px solid var(--hairline);
    }

    .stat-value {
      font-size: 18px; font-weight: 700;
      color: var(--text); letter-spacing: -0.01em; line-height: 1.2;
    }

    .stat-label {
      font-size: 9px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.07em;
      color: var(--text-3); margin-top: 1px;
    }

    #settings-btn {
      flex-shrink: 0; background: none; border: none;
      color: var(--text-3); padding: 6px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      transition: color var(--speed);
    }

    #settings-btn:active { color: var(--text); }

    /* ============================================================
       MAIN PRACTICE AREA
       ============================================================ */
    #app {
      flex: 1; display: flex; flex-direction: column;
      padding: 24px 20px calc(28px + env(safe-area-inset-bottom));
      max-width: 540px; width: 100%; margin: 0 auto;
    }

    #question-meta {
      display: flex; align-items: center;
      justify-content: space-between;
      margin-bottom: 10px; min-height: 28px;
    }

    #direction-label {
      font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--text-3);
    }

    #srs-dots {
      display: flex; align-items: center;
      gap: 4px; padding-top: 3px;
    }

    .srs-dot {
      width: 6px; height: 6px; border-radius: 50%;
      border: 1.5px solid var(--text-3);
      opacity: 0.4; flex-shrink: 0;
    }

    .srs-dot.filled {
      background: var(--star-color);
      border-color: var(--star-color); opacity: 0.85;
    }

    #star-btn {
      background: none; border: none;
      font-size: 24px; line-height: 1; padding: 0 0 0 8px;
      color: var(--text-3); flex-shrink: 0;
      transition: color var(--speed), transform 0.12s ease;
    }

    #star-btn.starred { color: var(--star-color); }
    #star-btn:active  { transform: scale(1.3); }

    #category-badge {
      display: inline-block;
      font-size: 11px; font-weight: 500;
      color: var(--accent); background: var(--accent-soft);
      border-radius: 6px; padding: 3px 9px;
      margin-bottom: 20px;
      max-width: 100%; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
    }

    #prompt-text {
      font-size: 26px; font-weight: 600;
      line-height: 1.38; color: var(--text);
      margin-bottom: 32px; min-height: 68px;
      letter-spacing: -0.01em;
    }

    /* ============================================================
       INPUT + CHECK BUTTON
       ============================================================ */
    #input-area { display: flex; flex-direction: column; gap: 14px; }

    #answer-input {
      width: 100%; padding: 12px 0;
      font-size: 18px; font-family: var(--font);
      background: transparent; color: var(--text);
      border: none;
      border-bottom: 2px solid var(--hairline);
      border-radius: 0; outline: none;
      -webkit-appearance: none;
      transition: border-color var(--speed);
    }

    #answer-input::placeholder { color: var(--text-3); }
    #answer-input:focus        { border-bottom-color: var(--accent); }
    #answer-input:disabled     { opacity: 0.45; }

    #check-btn {
      width: 100%; padding: 18px;
      font-size: 16px; font-weight: 600;
      color: #fff; background: var(--accent);
      border: none; border-radius: var(--radius);
      font-family: var(--font); -webkit-appearance: none;
      letter-spacing: 0.01em;
      transition: opacity var(--speed), transform 0.1s ease;
    }

    #check-btn:active   { opacity: 0.85; transform: scale(0.985); }
    #check-btn:disabled { opacity: 0.3; }

    /* ============================================================
       RESULT AREA
       ============================================================ */
    #result-area {
      margin-top: 24px; opacity: 0;
      transform: translateY(10px);
      transition: opacity var(--speed) ease, transform var(--speed) ease;
      pointer-events: none;
    }

    #result-area.visible {
      opacity: 1; transform: translateY(0); pointer-events: all;
    }

    /* Groups icon + message so they animate and centre together */
    .result-header {
      text-align: center;
      padding-bottom: 18px;
    }

    /* Separates the answer-comparison block from the buttons */
    .result-body {
      margin-bottom: 4px;
    }

    /* Result icon — JS sets textContent ('✓'/'✗') and className.
       We hide the text with font-size:0 and draw icons via pseudo-elements. */
    #result-icon,
    #conj-result-icon {
      font-size: 0;
      position: relative;
      width: 68px; height: 68px;
      margin: 0 auto 14px;
    }

    /* Correct: circle */
    #result-icon.correct-color::before,
    #conj-result-icon.correct-color::before {
      content: ''; position: absolute; inset: 0;
      border-radius: 50%;
      background: var(--correct-bg); border: 2px solid var(--correct);
      animation: icon-pop 0.22s cubic-bezier(0.34,1.56,0.64,1) both;
    }

    /* Correct: checkmark */
    #result-icon.correct-color::after,
    #conj-result-icon.correct-color::after {
      content: ''; position: absolute;
      left: 21px; top: 16px;
      width: 11px; height: 21px;
      border-right: 2.5px solid var(--correct);
      border-bottom: 2.5px solid var(--correct);
      transform: rotate(45deg);
      animation: icon-pop 0.2s cubic-bezier(0.34,1.56,0.64,1) 0.04s both;
    }

    /* Incorrect: circle */
    #result-icon.incorrect-color::before,
    #conj-result-icon.incorrect-color::before {
      content: ''; position: absolute; inset: 0;
      border-radius: 50%;
      background: var(--incorrect-bg); border: 2px solid var(--incorrect);
      animation: icon-pop 0.22s cubic-bezier(0.34,1.56,0.64,1) both;
    }

    /* Incorrect: × symbol */
    #result-icon.incorrect-color::after,
    #conj-result-icon.incorrect-color::after {
      content: '×'; position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 30px; font-weight: 600; line-height: 1;
      color: var(--incorrect);
      animation: icon-pop 0.22s cubic-bezier(0.34,1.56,0.64,1) both;
    }

    #result-message,
    #conj-result-message {
      font-size: 18px; font-weight: 700;
      margin-bottom: 14px; text-align: center;
    }

    .correct-color   { color: var(--correct);   }
    .incorrect-color { color: var(--incorrect);  }

    #user-answer-wrong,
    #conj-user-answer-wrong {
      font-size: 15px; text-decoration: line-through;
      color: var(--text-3); margin-bottom: 8px; word-break: break-word;
    }

    #correct-answer-display,
    #conj-correct-answer-display {
      font-size: 17px; font-weight: 500;
      color: var(--correct); background: var(--correct-bg);
      border-radius: 10px; padding: 12px 16px;
      margin-bottom: 14px; line-height: 1.4; word-break: break-word;
    }

    #why-btn,
    #conj-why-btn {
      display: inline-block;
      padding: 7px 14px; font-size: 13px; font-weight: 600;
      color: var(--text-2); background: var(--bg-elev);
      border: 1px solid var(--hairline); border-radius: 8px;
      margin-bottom: 12px; font-family: var(--font);
      transition: opacity var(--speed);
    }

    #why-btn:active,
    #conj-why-btn:active { opacity: 0.7; }

    #explanation-area,
    #conj-explanation-area {
      font-size: 14px; line-height: 1.65;
      color: var(--text-2); background: var(--card);
      border: 1px solid var(--hairline); border-radius: 10px;
      padding: 12px 14px; margin-bottom: 14px;
      display: flex; align-items: flex-start; gap: 8px;
    }

    .spinner {
      width: 16px; height: 16px;
      border: 2px solid var(--hairline);
      border-top-color: var(--text-3);
      border-radius: 50%; flex-shrink: 0; margin-top: 2px;
      animation: spin 0.75s linear infinite;
    }

    #next-btn,
    #conj-next-btn {
      width: 100%; padding: 17px;
      font-size: 15px; font-weight: 600;
      color: var(--text); background: var(--card);
      border: 1px solid var(--hairline);
      border-radius: var(--radius); font-family: var(--font);
      -webkit-appearance: none; box-shadow: var(--shadow);
      transition: opacity var(--speed), transform 0.1s ease;
    }

    #next-btn:active,
    #conj-next-btn:active { opacity: 0.75; transform: scale(0.985); }

    #empty-message,
    #empty-starred-message {
      display: none; padding: 48px 0; text-align: center;
      font-size: 15px; color: var(--text-2); line-height: 1.7;
    }

    /* ============================================================
       SETTINGS — BOTTOM SHEET
       ============================================================ */
    #settings-overlay {
      position: fixed; inset: 0; z-index: 100;
      display: flex; align-items: flex-end;
      opacity: 0; pointer-events: none;
      transition: opacity 0.25s ease;
    }

    #settings-overlay.open { opacity: 1; pointer-events: all; }

    #settings-backdrop {
      position: absolute; inset: 0; background: var(--overlay-bg);
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    }

    #settings-sheet {
      position: relative; z-index: 1;
      width: 100%; max-height: 90dvh; overflow-y: auto;
      background: var(--bg-elev);
      border-radius: 24px 24px 0 0;
      padding: 8px 20px calc(28px + env(safe-area-inset-bottom));
      transform: translateY(100%);
      transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
    }

    #settings-overlay.open #settings-sheet { transform: translateY(0); }

    #settings-sheet::before {
      content: ''; display: block;
      width: 36px; height: 4px;
      background: var(--border); border-radius: 2px;
      margin: 12px auto 20px;
    }

    #settings-header {
      display: flex; align-items: center;
      justify-content: space-between; margin-bottom: 24px;
    }

    #settings-header h2 {
      font-size: 20px; font-weight: 700; color: var(--text);
    }

    #close-settings-btn {
      width: 30px; height: 30px; border-radius: 50%;
      border: none; background: var(--border);
      color: var(--text-2); font-size: 13px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font); transition: opacity var(--speed);
    }

    #close-settings-btn:active { opacity: 0.7; }

    .settings-section { margin-bottom: 26px; }

    .settings-section-title {
      font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--text-3); margin-bottom: 10px;
    }

    .settings-subsection-title {
      font-size: 12px; font-weight: 600;
      color: var(--text-2); margin-bottom: 6px; margin-top: 4px;
    }

    .category-item,
    .direction-item {
      display: flex; align-items: center; gap: 14px;
      padding: 10px 0; border-bottom: 1px solid var(--hairline);
    }

    .category-item:last-child,
    .direction-item:last-child { border-bottom: none; }

    .category-item input[type="checkbox"],
    .direction-item input[type="radio"] {
      width: 18px; height: 18px; flex-shrink: 0;
      accent-color: var(--accent); cursor: pointer;
    }

    .category-item label,
    .direction-item label {
      font-size: 15px; color: var(--text);
      cursor: pointer; flex: 1; line-height: 1.3;
    }

    /* Toggle rows */
    .toggle-item {
      display: flex; align-items: center;
      justify-content: space-between;
      padding: 12px 0; gap: 12px;
      border-bottom: 1px solid var(--hairline);
    }

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

    .toggle-item label {
      font-size: 15px; color: var(--text);
      cursor: pointer; flex: 1; line-height: 1.35;
    }

    /* CSS pill toggle switch (replaces plain checkbox in toggle rows) */
    .toggle-item input[type="checkbox"] {
      -webkit-appearance: none; appearance: none;
      width: 44px; height: 26px; border-radius: 13px;
      background: var(--text-3); flex-shrink: 0;
      cursor: pointer; position: relative;
      transition: background 0.2s;
    }

    .toggle-item input[type="checkbox"]::before {
      content: ''; position: absolute;
      top: 3px; left: 3px; width: 20px; height: 20px;
      border-radius: 50%; background: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
      transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
    }

    .toggle-item input[type="checkbox"]:checked { background: var(--accent); }

    .toggle-item input[type="checkbox"]:checked::before {
      transform: translateX(18px);
    }

    .field-block { padding: 12px 0 4px; }

    .field-label {
      display: block; font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.07em;
      color: var(--text-3); margin-bottom: 8px;
    }

    .field-input {
      width: 100%; padding: 11px 14px; font-size: 14px;
      font-family: "SF Mono", "Fira Code", monospace;
      background: var(--bg); color: var(--text);
      border: 1.5px solid var(--hairline); border-radius: 10px;
      outline: none; -webkit-appearance: none;
      transition: border-color var(--speed);
    }

    .field-input:focus { border-color: var(--accent); }

    .field-note { font-size: 12px; color: var(--text-3); line-height: 1.6; margin-top: 8px; }

    #srs-stats-text {
      font-size: 14px; color: var(--text-2);
      padding: 6px 0 10px;
      border-bottom: 1px solid var(--hairline);
    }

    #reset-stats-btn,
    #reset-srs-btn,
    #reset-conj-srs-btn,
    #reset-conj-stats-btn {
      width: 100%; padding: 13px;
      font-size: 14px; font-weight: 600;
      color: var(--incorrect); background: var(--incorrect-bg);
      border: none; border-radius: 10px;
      font-family: var(--font); -webkit-appearance: none;
      transition: opacity var(--speed); margin-top: 10px;
    }

    #reset-stats-btn:active,
    #reset-srs-btn:active,
    #reset-conj-srs-btn:active,
    #reset-conj-stats-btn:active { opacity: 0.75; }

    /* ============================================================
       SETTINGS — CARD GROUPING
       iOS-style grouped rows with rounded card container.
       ============================================================ */
    .settings-card {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      margin-bottom: 4px;
    }

    /* Give rows inside a card a horizontal inset */
    .settings-card > .category-item,
    .settings-card > .direction-item,
    .settings-card > .toggle-item {
      padding-left: 16px;
      padding-right: 16px;
    }

    /* Field block (API key) inside a card */
    .settings-card > .field-block {
      padding: 12px 16px 16px;
      border-top: 1px solid var(--hairline);
    }

    /* Muted info card for SRS summary text */
    .settings-info-card {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 12px 16px;
      margin-bottom: 8px;
    }

    .settings-info-card p {
      font-size: 14px;
      color: var(--text-2);
      line-height: 1.55;
      margin: 0;
    }

    /* Keyboard-accessible focus ring (non-touch navigators only) */
    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: 4px;
    }

    /* iOS momentum scrolling in the settings sheet */
    #settings-sheet { -webkit-overflow-scrolling: touch; }

    /* Thin custom scrollbar inside settings (Chrome / Edge) */
    #settings-sheet::-webkit-scrollbar       { width: 3px; }
    #settings-sheet::-webkit-scrollbar-track { background: transparent; }
    #settings-sheet::-webkit-scrollbar-thumb {
      background: var(--border); border-radius: 2px;
    }

    /* Desktop hover feedback — never fires on touch screens */
    @media (hover: hover) {
      .settings-card > .category-item:hover,
      .settings-card > .direction-item:hover,
      .settings-card > .toggle-item:hover {
        background: var(--bg-elev);
        cursor: pointer;
      }
      .mode-btn:hover  { background: var(--bg-elev); }
      .tense-btn:hover { background: var(--bg-elev); }
      #back-to-home:hover,
      .nav-back-btn:hover { opacity: 0.75; }
      #why-btn:hover,
      #conj-why-btn:hover { opacity: 0.8; background: var(--bg); }
    }

    /* ============================================================
       CONJUGATION DRILL
       ============================================================ */
    #conj-app {
      flex: 1; display: flex; flex-direction: column;
      max-width: 540px; width: 100%; margin: 0 auto;
    }

    #conj-tense-banner {
      padding: 14px 20px 16px;
      background: var(--card);
      border-bottom: 1px solid var(--hairline);
      margin-bottom: 24px; box-shadow: var(--shadow);
    }

    #conj-tense-name {
      font-size: 15px; font-weight: 700;
      color: var(--accent); margin-bottom: 3px; letter-spacing: -0.01em;
    }

    #conj-tense-explainer {
      font-size: 13px; color: var(--text-2); line-height: 1.45;
    }

    #conj-content {
      padding: 0 20px calc(24px + env(safe-area-inset-bottom));
      display: flex; flex-direction: column; flex: 1;
    }

    #conj-question-meta {
      display: flex; align-items: center;
      justify-content: flex-end;
      margin-bottom: 8px; min-height: 32px;
    }

    #conj-star-btn {
      background: none; border: none;
      font-size: 24px; line-height: 1; padding: 0 0 0 8px;
      color: var(--text-3); flex-shrink: 0;
      transition: color var(--speed), transform 0.12s ease;
    }

    #conj-star-btn.starred { color: var(--star-color); }
    #conj-star-btn:active  { transform: scale(1.3); }

    #conj-english-prompt {
      font-size: 32px; font-weight: 700; color: var(--text);
      line-height: 1.25; margin-bottom: 28px; letter-spacing: -0.02em;
    }

    #conj-input-area { display: flex; flex-direction: column; gap: 14px; }

    #conj-answer-input {
      width: 100%; padding: 12px 0;
      font-size: 18px; font-family: var(--font);
      background: transparent; color: var(--text);
      border: none; border-bottom: 2px solid var(--hairline);
      border-radius: 0; outline: none; -webkit-appearance: none;
      transition: border-color var(--speed);
    }

    #conj-answer-input::placeholder { color: var(--text-3); }
    #conj-answer-input:focus        { border-bottom-color: var(--accent); }
    #conj-answer-input:disabled     { opacity: 0.45; }

    #conj-check-btn {
      width: 100%; padding: 18px;
      font-size: 16px; font-weight: 600;
      color: #fff; background: var(--accent);
      border: none; border-radius: var(--radius);
      font-family: var(--font); -webkit-appearance: none;
      letter-spacing: 0.01em;
      transition: opacity var(--speed), transform 0.1s ease;
    }

    #conj-check-btn:active   { opacity: 0.85; transform: scale(0.985); }
    #conj-check-btn:disabled { opacity: 0.3; }

    #conj-result-area {
      margin-top: 24px; opacity: 0;
      transform: translateY(10px);
      transition: opacity var(--speed) ease, transform var(--speed) ease;
      pointer-events: none;
    }

    #conj-result-area.visible {
      opacity: 1; transform: translateY(0); pointer-events: all;
    }

    #conj-empty-message {
      display: none; padding: 40px 0; text-align: center;
      font-size: 15px; color: var(--text-2); line-height: 1.7;
    }