/* ============================================================
       DESIGN TOKENS — Punto Spanish
       ------------------------------------------------------------
       Brand palette: warm cream (--bg), deep espresso (--text),
       terracotta / burnt orange (--accent family) — the same system
       the Punto app icon uses (cream P, terracotta path, espresso
       dark mode). Keep it warm and polished, never loud/neon.
       ============================================================ */
    :root {
      color-scheme: light;

      --bg:           #FFF7EA;
      --bg-elev:      #FFFFFF;
      --card:         #FFFFFF;
      --card-hover:   #FFFDF8;
      --text:         #3A2B22;
      --text-2:       #75604D;
      --text-3:       #7A6552;
      --hairline:     #EFE2CE;
      --border:       #EFE2CE;
      --ledge:        #E7D5B8;

      --accent:       #F26430;
      --accent-deep:  #C8451B;
      --accent-soft:  #FFE6D8;
      --accent-line:  #F26430;

      --tint:         #F4E7D2;
      --tint-edge:    #E7D5B8;

      /* Large "accent card" surfaces (focus/coach/completion cards). In
         light mode this just follows the current per-mode --accent-soft
         (so nothing changes); dark mode overrides it to a warm-dark card
         so those big surfaces don't render as washed-out light panels —
         the accent identity then comes from the card's border/shadow,
         which still use the per-mode accent. Small chips/badges keep using
         --accent-soft directly and stay as light warm badges. */
      --accent-card:  var(--accent-soft);

      /* Themed decorative gradients (light values here; dark values in the
         dark-theme blocks below). Tokenised so the two dark overrides don't
         need duplicated selector rules. */
      --auth-radial:  radial-gradient(circle at 30% 18%, #FFF2DC 0%, #ECE0CB 68%);
      --hero-gradient: linear-gradient(135deg, #FFF9EF 0%, #FFFDF8 100%);

      --correct:      #17B89A;
      --correct-deep: #0E8D77;
      --correct-bg:   rgba(22,163,74,0.09);
      --almost:       #d97706;
      --almost-bg:    rgba(217,119,6,0.10);
      --incorrect:    #F25563;
      --incorrect-bg: rgba(220,38,38,0.08);
      --wrong:        #F25563;
      --wrong-deep:   #CC3543;
      --star-color:   #FFB02E;
      --gold:         #FFB02E;
      --gold-deep:    #D98A00;
      --sky:          #37A8E8;
      --sky-deep:     #1E7FBA;
      --sky-soft:     #D8EEFB;
      --plum:         #9B5DE5;
      --plum-deep:    #7A3FC4;
      --plum-soft:    #EADFFB;
      --overlay-bg:   rgba(0,0,0,0.42);
      --shadow:       0 4px 0 var(--ledge);
      --radius:       18px;
      /* PR4: 'Geist' removed — it was only ever loaded from the Google
         Fonts CDN (dropped from index.html for offline support), so the
         name could never resolve. The system-font stack below is what
         every browser was already falling back to. */
      --font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --speed:        0.07s;

      /* ── HablaAnimations timing tokens ─────────────────────────── */
      --ha-tab-switch:       180ms;
      --ha-card-entrance:    220ms;
      --ha-progress-bar:     420ms;
      --ha-punto-idle:       2400ms;
      --ha-correct-pop:      280ms;
      --ha-incorrect-shake:  320ms;
      --ha-session-complete: 460ms;
      --ha-roadmap-unlock:   380ms;
      --ha-nav-active:       150ms;
      --ha-coach-note:       220ms;
      --ha-confetti-burst:   800ms;
      --ha-milestone-star:   500ms;

      /* Named easing curves */
      --ha-ease-out:        cubic-bezier(0, 0, 0.2, 1);
      --ha-ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
      --ha-ease-progress:   cubic-bezier(0.2, 0.7, 0.3, 1);
      --ha-spring-pop:      cubic-bezier(0.34, 1.56, 0.64, 1);
      --ha-spring-bounce:   cubic-bezier(0.25, 1.72, 0.55, 1);
    }

    /* ============================================================
       DARK THEME — Dark-mode PR
       ------------------------------------------------------------
       Only the NEUTRAL tokens flip (bg / card / text / border /
       tint / ledge / overlay). The accent family (--accent /
       --accent-deep / --accent-soft) and the semantic status
       colours (--correct / --incorrect / --gold / --sky / --plum)
       deliberately inherit their light values unchanged: those
       colours are already used both as text AND as 3D-shadow/border
       shades, so re-tinting them would break the button-depth
       effect. Keeping terracotta + warm peach accents against a
       warm-espresso neutral base is what preserves the Punto Spanish identity.
       Two identical blocks so system-dark works with NO JS (the
       media query) and an explicit choice always wins (the
       attribute); js/app.js just sets/clears data-theme.
       ============================================================ */
    :root[data-theme="dark"] {
      color-scheme: dark;
      --bg:           #211710;
      --bg-elev:      #2A1D14;
      --card:         #2E2118;
      --card-hover:   #392819;
      --text:         #F4E8D8;
      --text-2:       #D8C4AD;
      --text-3:       #C0AC94;
      --hairline:     #43342A;
      --border:       #4A3A2C;
      --ledge:        #14100B;
      --tint:         #382A1E;
      --tint-edge:    #4A3626;
      --overlay-bg:   rgba(0,0,0,0.62);
      --auth-radial:  radial-gradient(circle at 30% 18%, #2C1F16 0%, #1B120C 70%);
      --hero-gradient: linear-gradient(135deg, #34251A 0%, #2A1D14 100%);
      --accent-card:  #3A2318;
    }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]):not([data-theme="dark"]) {
        color-scheme: dark;
        --bg:           #211710;
        --bg-elev:      #2A1D14;
        --card:         #2E2118;
        --card-hover:   #392819;
        --text:         #F4E8D8;
        --text-2:       #D8C4AD;
        --text-3:       #C0AC94;
        --hairline:     #43342A;
        --border:       #4A3A2C;
        --ledge:        #14100B;
        --tint:         #382A1E;
        --tint-edge:    #4A3626;
        --overlay-bg:   rgba(0,0,0,0.62);
        --auth-radial:  radial-gradient(circle at 30% 18%, #2C1F16 0%, #1B120C 70%);
        --hero-gradient: linear-gradient(135deg, #34251A 0%, #2A1D14 100%);
        --accent-card:  #3A2318;
      }
    }

    /* Dark-mode surface fixes for the two Learn-screen cards that hardcode
       a light peach->cream gradient (kept exactly as-is in light mode);
       in dark they reuse the themed warm-dark hero gradient. */
    :root[data-theme="dark"] .learn-v2 .learn-hero-card,
    :root[data-theme="dark"] .learn-v2 .learn-continue-card {
      background: var(--hero-gradient);
    }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]):not([data-theme="dark"]) .learn-v2 .learn-hero-card,
      :root:not([data-theme="light"]):not([data-theme="dark"]) .learn-v2 .learn-continue-card {
        background: var(--hero-gradient);
      }
    }

    /* Lesson grammar-note callout: light-mode keeps its solid sky-soft
       card; dark uses a subtle translucent sky tint (light body text stays
       readable) with a brighter --sky title (the darker --sky-deep title
       fails contrast on the dark tint). */
    :root[data-theme="dark"] .path-lesson-note--grammar {
      background: rgba(55,168,232,0.14);
    }
    :root[data-theme="dark"] .path-lesson-note--grammar .path-lesson-note-title {
      color: var(--sky);
    }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]):not([data-theme="dark"]) .path-lesson-note--grammar {
        background: rgba(55,168,232,0.14);
      }
      :root:not([data-theme="light"]):not([data-theme="dark"]) .path-lesson-note--grammar .path-lesson-note-title {
        color: var(--sky);
      }
    }

    /* ============================================================
       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; }
    }

    /* ============================================================
       SCREEN TRANSITIONS (UI polish) — a subtle, fast fade + tiny rise
       applied once to whichever main screen just became visible (see
       applyScreenEnterAnimation() in js/app.js). Deliberately small so it
       never delays interaction or shifts layout horizontally; disabled
       entirely under prefers-reduced-motion below.
       ============================================================ */
    @keyframes screen-enter {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .is-entering {
      animation: screen-enter 150ms var(--ha-ease-out, ease-out) both;
    }

    @media (prefers-reduced-motion: reduce) {
      .is-entering {
        animation: none !important;
      }
    }

    /* ============================================================
       MOBILE KEYBOARD HANDLING (UI polish) — while the on-screen keyboard
       is open (detected via visualViewport in js/app.js), hide the fixed
       bottom nav so it can't cover input controls, and give the scroll
       areas enough bottom room that the active field + its submit button
       can be scrolled clear of the keyboard. No-ops on desktop, where the
       keyboard-open class is never set.
       ============================================================ */
    body.keyboard-open .bottom-tab-nav {
      display: none;
    }

    body.keyboard-open .tab-scroll,
    body.keyboard-open #app,
    body.keyboard-open #conj-app {
      padding-bottom: calc(var(--keyboard-inset, 0px) + 24px);
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

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

    /* Boot-screen wordmark — a small brand moment while content loads. */
    #loading .loading-brand {
      margin-bottom: 18px;
      color: var(--text);
      font-size: 25px;
      font-weight: 900;
      letter-spacing: -0.01em;
    }

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

    /* ============================================================
       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;
    }

    #error-reload-btn {
      display: inline-block;
      margin: 2px 0 16px;
      padding: 12px 26px;
      border: none; border-radius: 100px;
      background: var(--accent); color: #fff;
      font-family: inherit; font-size: 15px; font-weight: 700;
      cursor: pointer;
      box-shadow: 0 3px 0 var(--accent-deep);
    }

    #error-box .error-dev-note {
      text-align: left;
      border-top: 1px solid var(--hairline);
      padding-top: 12px;
    }

    #error-box .error-dev-note summary {
      cursor: pointer;
      font-size: 13px; font-weight: 600;
      color: var(--text-3);
      margin-bottom: 8px;
    }

    #error-box .error-dev-note p { font-size: 13px; }

    /* Shown by notifyStorageWriteFailure() when a progress write fails */
    .storage-warning-toast {
      position: fixed;
      left: 50%;
      bottom: calc(112px + env(safe-area-inset-bottom));
      transform: translate(-50%, 8px);
      z-index: 500;
      max-width: min(90vw, 380px);
      padding: 12px 18px;
      border-radius: 16px;
      background: var(--almost);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.45;
      text-align: center;
      box-shadow: 0 10px 24px rgba(58,43,34,0.24);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .storage-warning-toast.is-visible {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    /* Global runtime-error fallback banner (Durability PR3) — a top
       banner rather than a bottom toast so it never collides with the
       storage-warning-toast or the bottom tab nav. */
    .global-error-banner {
      position: fixed;
      left: 12px; right: 12px;
      top: calc(12px + env(safe-area-inset-top));
      z-index: 600;
      display: flex; align-items: center; gap: 10px;
      flex-wrap: wrap;
      padding: 12px 14px;
      border-radius: 14px;
      background: var(--wrong);
      color: #fff;
      box-shadow: 0 10px 24px rgba(58,43,34,0.24);
      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .global-error-banner.is-visible { opacity: 1; transform: translateY(0); pointer-events: all; }

    .global-error-banner p {
      flex: 1 1 200px;
      margin: 0;
      font-size: 13px; font-weight: 600; line-height: 1.4;
    }

    .global-error-banner button {
      border: none; border-radius: 10px;
      font-family: var(--font); font-weight: 700;
      cursor: pointer;
    }

    #global-error-reload-btn {
      padding: 7px 14px; font-size: 13px;
      background: #fff; color: var(--wrong);
    }

    #global-error-dismiss-btn {
      width: 28px; height: 28px; padding: 0;
      background: rgba(255,255,255,0.22); color: #fff;
      font-size: 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); }

    /* ============================================================
       AUTH / WELCOME SCREEN
       ============================================================ */
    #auth-screen {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 100dvh;
      padding: calc(20px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));
      background:
        var(--auth-radial),
        var(--bg);
    }

    /* Onboarding polish: the welcome screen had no layout rule of its own,
       so the card hugged the top of the viewport. Centre it like
       #auth-screen — but centre via the card's margin:auto (inside a
       scrollable flex container) rather than align-items:center, so a
       taller step (wrapped copy, small iPhones) scrolls instead of
       clipping its top edge. */
    #onboarding-screen {
      flex: 1;
      display: flex;
      width: 100%;
      min-height: 100dvh;
      overflow-y: auto;
      padding: calc(20px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));
      background:
        var(--auth-radial),
        var(--bg);
    }

    #onboarding-screen .onboarding-card {
      margin: auto;
    }

    .auth-card {
      width: 100%;
      max-width: 390px;
      padding: 24px 20px 20px;
      border: 2px solid var(--border);
      border-radius: 24px;
      background: var(--bg);
      box-shadow: 0 6px 0 var(--ledge);
    }

    .auth-brand {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 24px;
    }

    .auth-punto {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 96px;
      height: 96px;
      overflow: visible;
    }

    .auth-punto .punto-avatar-img {
      transform: scale(1.08);
      transform-origin: center;
    }

    .auth-brand h1 {
      color: var(--text);
      font-size: 36px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0;
    }

    /* Punto Spanish wordmark lockup — stacked two-line treatment with the
       terracotta full stop (the "punto" the mascot was born from). Used on
       onboarding/auth next to the Punto avatar. The dot is drawn as a true
       circle (the period glyph is hidden) so the punto stays perfectly
       round on every platform font. */
    .brand-wordmark { line-height: 1.06; letter-spacing: -0.01em; }
    .brand-wordmark .brand-wordmark-line { display: block; }
    .brand-wordmark .home-title-dot,
    .loading-brand .home-title-dot {
      display: inline-block;
      width: 0.15em;
      height: 0.15em;
      margin-left: 0.09em;
      border-radius: 50%;
      background: var(--accent);
      color: transparent;
      overflow: hidden;
      vertical-align: baseline;
    }

    .auth-brand p {
      margin-top: 8px;
      color: var(--text-2);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
    }

    .auth-toggle {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 5px;
      padding: 5px;
      margin-bottom: 18px;
      border-radius: 16px;
      background: var(--tint);
    }

    .auth-toggle-btn {
      min-height: 42px;
      border: none;
      border-radius: 12px;
      background: transparent;
      color: var(--text-2);
      font-size: 14px;
      font-weight: 800;
    }

    .auth-toggle-btn.is-active {
      background: var(--card);
      color: var(--text);
      box-shadow: 0 2px 0 var(--ledge);
    }

    .auth-form {
      display: flex;
      flex-direction: column;
      gap: 13px;
    }

    .auth-field span {
      display: block;
      margin: 0 0 7px 2px;
      color: var(--text-3);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .auth-field input {
      width: 100%;
      min-height: 52px;
      padding: 14px 15px;
      border: 2px solid var(--border);
      border-radius: 16px;
      outline: none;
      background: var(--card);
      color: var(--text);
      box-shadow: inset 0 2px 0 var(--ledge);
      font-family: var(--font);
      font-size: 16px;
      font-weight: 700;
      -webkit-appearance: none;
    }

    .auth-field input::placeholder {
      color: var(--text-3);
      font-weight: 600;
    }

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

    .auth-primary-btn,
    .auth-local-btn {
      width: 100%;
      min-height: 54px;
      border-radius: 16px;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      transition: transform var(--speed) ease, box-shadow var(--speed) ease, opacity var(--speed);
    }

    .auth-primary-btn {
      margin-top: 5px;
      border: none;
      background: var(--accent);
      color: #fff;
      box-shadow: 0 5px 0 var(--accent-deep);
    }

    .auth-primary-btn:disabled {
      opacity: 0.55;
      transform: none;
    }

    .auth-local-btn {
      border: 2px solid var(--border);
      background: var(--card);
      color: var(--text);
      box-shadow: 0 4px 0 var(--ledge);
    }

    .auth-primary-btn:active,
    .auth-local-btn:active {
      transform: translateY(4px);
      box-shadow: none;
      opacity: 1;
    }

    .auth-status {
      min-height: 40px;
      margin: 14px 2px 15px;
      color: var(--text-2);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
      text-align: center;
    }

    .auth-status.is-error {
      color: var(--incorrect);
    }

    .auth-status.is-success {
      color: var(--correct-deep);
    }

    /* PR5: small reassurance lines added around the toggle/local-mode CTA
       — copy-only additions, same card/spacing rhythm as .auth-status. */
    .auth-toggle-caption {
      margin: -8px 2px 16px;
      color: var(--text-3);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.4;
      text-align: center;
    }

    .auth-local-caption {
      margin: 10px 4px 0;
      color: var(--text-3);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.4;
      text-align: center;
    }

    /* Password reset: a small secondary text action (not the primary CTA),
       plus the "Reset password" / "Update password" panel chrome. Reuses
       .auth-form/.auth-field/.auth-primary-btn/.auth-status as-is —
       only this link style and the panel heading/copy are new. */
    .auth-link-btn {
      display: block;
      width: 100%;
      min-height: 44px;
      margin-top: 4px;
      padding: 10px;
      border: none;
      background: transparent;
      color: var(--accent-deep);
      font-size: 14px;
      font-weight: 800;
      text-align: center;
    }

    .auth-link-btn:active {
      opacity: 0.6;
    }

    .auth-panel-title {
      margin: 0 0 6px;
      color: var(--text);
      font-size: 20px;
      font-weight: 900;
    }

    .auth-panel-copy {
      margin: 0 0 18px;
      color: var(--text-2);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
    }

    /* ============================================================
       PR5: FIRST-RUN ONBOARDING — reuses .auth-card's card chrome;
       only the internal step layout below is new.
       ============================================================ */
    .onboarding-progress {
      display: flex;
      justify-content: center;
      gap: 6px;
      margin-bottom: 18px;
    }

    .onboarding-progress-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--hairline);
    }

    .onboarding-progress-dot.is-active {
      background: var(--accent);
    }

    .onboarding-value-list {
      margin: 4px 2px 18px;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .onboarding-value-list li {
      position: relative;
      padding-left: 22px;
      color: var(--text);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
    }

    .onboarding-value-list li::before {
      content: '\2713';
      position: absolute;
      left: 0;
      top: 0;
      color: var(--correct-deep);
      font-weight: 800;
    }

    .onboarding-step-title {
      font-size: 20px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 6px;
    }

    .onboarding-step-copy {
      color: var(--text-2);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.4;
      margin-bottom: 16px;
    }

    .onboarding-options {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 8px;
    }

    .onboarding-option-btn {
      width: 100%;
      min-height: 52px;
      padding: 12px 16px;
      border: 2px solid var(--border);
      border-radius: 16px;
      background: var(--card);
      color: var(--text);
      font-family: var(--font);
      font-size: 14.5px;
      font-weight: 700;
      text-align: left;
      box-shadow: 0 3px 0 var(--ledge);
      transition: transform var(--speed) ease, box-shadow var(--speed) ease;
    }

    .onboarding-option-btn:active {
      transform: translateY(2px);
      box-shadow: 0 1px 0 var(--ledge);
    }

    .onboarding-option-btn.is-selected {
      border-color: var(--accent);
      background: var(--accent-soft);
      color: var(--accent-deep);
      box-shadow: 0 3px 0 var(--accent-deep);
    }

    .onboarding-step-note {
      min-height: 20px;
      margin: 8px 2px 16px;
      color: var(--correct-deep);
      font-size: 12.5px;
      font-weight: 700;
      line-height: 1.4;
      text-align: center;
    }

    /* ============================================================
       PROGRESS MIGRATION
       ============================================================ */
    #progress-migration-overlay {
      position: fixed;
      inset: 0;
      z-index: 360;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(58,43,34,0.34);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    .progress-migration-card {
      width: 100%;
      max-width: 390px;
      border: 2px solid var(--border);
      border-radius: 22px;
      background: var(--bg);
      box-shadow: 0 6px 0 rgba(58,43,34,0.18);
      padding: 22px 20px 18px;
    }

    .progress-migration-card h2 {
      color: var(--text);
      font-size: 20px;
      font-weight: 900;
      line-height: 1.2;
      letter-spacing: 0;
      margin-bottom: 10px;
    }

    .progress-migration-card p {
      color: var(--text-2);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
      margin-bottom: 16px;
    }

    .progress-migration-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    #progress-migration-move-btn,
    #progress-migration-later-btn,
    #cloud-backup-btn,
    #cloud-restore-btn {
      width: 100%;
      min-height: 48px;
      border-radius: 14px;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      transition: transform var(--speed) ease, box-shadow var(--speed) ease, opacity var(--speed);
    }

    #progress-migration-move-btn,
    #cloud-backup-btn {
      border: none;
      background: var(--accent);
      color: #fff;
      box-shadow: 0 4px 0 var(--accent-deep);
    }

    #progress-migration-later-btn,
    #cloud-restore-btn {
      border: 2px solid var(--border);
      background: var(--card);
      color: var(--text);
      box-shadow: 0 3px 0 var(--ledge);
    }

    #progress-migration-move-btn:active,
    #progress-migration-later-btn:active,
    #cloud-backup-btn:active,
    #cloud-restore-btn:active {
      transform: translateY(3px);
      box-shadow: none;
    }

    #progress-migration-move-btn:disabled,
    #progress-migration-later-btn:disabled,
    #cloud-backup-btn:disabled,
    #cloud-restore-btn:disabled,
    #delete-account-btn:disabled {
      opacity: 0.55;
      transform: none;
    }

    .progress-migration-status {
      min-height: 18px;
      margin-top: 12px;
      color: var(--text-2);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
      text-align: center;
    }

    .progress-migration-status.is-error,
    #cloud-progress-status.is-error {
      color: var(--incorrect);
    }

    .progress-migration-status.is-success,
    #cloud-progress-status.is-success {
      color: var(--correct-deep);
    }

    /* ============================================================
       MODE LIST / MODE BUTTONS — shared by Practice hub
       ============================================================ */
    .home-title-dot { color: var(--accent); }

    .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;
    }

    /* Phase 18C: spacing between grouped Practice-hub sections
       (Core practice / Create & review / Explore) when a label
       follows a mode list. */
    .mode-list + .home-mode-label {
      margin-top: 22px;
    }

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

    /* Journal promotion — featured card at the top of the Practice hub.
       Uses the themed --accent-card/--hero-gradient token family so it
       reads as a warm highlighted surface in light mode and a warm-dark
       card in dark mode, with the standard text tokens for contrast. */
    .practice-journal-hero {
      margin-bottom: 22px;
      padding: 18px 16px 16px;
      border-radius: 20px;
      border: 1.5px solid var(--accent);
      background: var(--accent-card);
      box-shadow: 0 4px 0 var(--accent-deep), 0 10px 20px rgba(242,100,48,0.10);
    }

    .practice-journal-hero .tab-eyebrow {
      color: var(--accent-deep);
    }

    .practice-journal-hero h2 {
      margin-top: 6px;
      color: var(--text);
      font-size: 18px;
      font-weight: 800;
      line-height: 1.25;
    }

    .practice-journal-hero p {
      margin-top: 6px;
      color: var(--text-2);
      font-size: 13.5px;
      font-weight: 600;
      line-height: 1.45;
    }

    .practice-journal-hero-actions {
      display: flex;
      gap: 10px;
      margin-top: 14px;
    }

    .practice-journal-hero-primary {
      flex: 1 1 auto;
      min-height: 46px;
      padding: 10px 14px;
      border: none;
      border-radius: 14px;
      background: var(--accent);
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      box-shadow: 0 3px 0 var(--accent-deep);
    }

    .practice-journal-hero-primary:active {
      transform: translateY(2px);
      box-shadow: 0 1px 0 var(--accent-deep);
    }

    .practice-journal-hero-secondary {
      flex: 0 1 auto;
      min-height: 46px;
      padding: 10px 14px;
      border: 1.5px solid var(--border);
      border-radius: 14px;
      background: var(--card);
      color: var(--text-2);
      font-size: 13.5px;
      font-weight: 700;
    }

    .practice-journal-hero-secondary:active {
      background: var(--card-hover);
    }

    @media (max-width: 360px) {
      .practice-journal-hero-actions {
        flex-wrap: wrap;
      }
      .practice-journal-hero-secondary {
        flex: 1 1 100%;
      }
    }

    /* Dark mode: the accent border + terracotta CTA already pop against the
       warm-dark --accent-card; the eyebrow's --accent-deep is too dark
       there, so lift it to the brighter accent. */
    :root[data-theme="dark"] .practice-journal-hero .tab-eyebrow {
      color: var(--accent);
    }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]):not([data-theme="dark"]) .practice-journal-hero .tab-eyebrow {
        color: var(--accent);
      }
    }

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

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

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

    .mode-btn[data-mode-accent="chunks"]       .mode-btn-icon { color:#1E7FBA; background:#D8EEFB; }
    .mode-btn[data-mode-accent="conversation"] .mode-btn-icon { color:#C8451B; background:#FFE6D8; }
    .mode-btn[data-mode-accent="conjugation"]  .mode-btn-icon { color:#7A3FC4; background:#EADFFB; }
    .mode-btn[data-mode-accent="listening"]    .mode-btn-icon { color:#1E7FBA; background:#D8EEFB; }
    .mode-btn[data-mode-accent="journal"]      .mode-btn-icon { color:#D98A00; background:#FFEFCF; }
    .mode-btn[data-mode-accent="islands"]      .mode-btn-icon { color:#0E8D77; background:#D4F4EC; }
    .mode-btn[data-mode-accent="missions"]     .mode-btn-icon { color:#7A3FC4; background:#EADFFB; }
    .mode-btn[data-mode-accent="story"]        .mode-btn-icon { color:#C8451B; background:#FFE6D8; }
    .mode-btn[data-mode-accent="learn"]        .mode-btn-icon { color:#D98A00; background:#FFEFCF; }
    .mode-btn[data-mode-accent="speaking"]     .mode-btn-icon { color:#C8451B; background:#FFE6D8; }

    .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; }

    @media (max-width: 430px) {
      .mode-btn-body {
        min-width: 0;
      }
    }

    /* ============================================================
       PUNTO / MY SPANISH TABS + BOTTOM NAV
       ============================================================ */
    .tab-shell {
      flex: 1;
      width: 100%;
      min-height: 100dvh;
      background: var(--bg);
    }

    .tab-scroll {
      width: 100%;
      max-width: 540px;
      margin: 0 auto;
      padding: 14px 18px calc(116px + env(safe-area-inset-bottom));
    }

    .punto-hero,
    .my-spanish-hero {
      display: flex;
      align-items: center;
      gap: 13px;
      margin-bottom: 18px;
    }

    .my-spanish-hero {
      justify-content: space-between;
      align-items: stretch;
    }

    .punto-hero h1,
    .my-spanish-hero h1 {
      color: var(--text);
      font-size: 23px;
      font-weight: 800;
      line-height: 1.08;
      letter-spacing: 0;
      margin-top: 2px;
    }

    .punto-hero p,
    .my-spanish-hero p,
    .brain-card-copy {
      color: var(--text-2);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.35;
      margin-top: 4px;
    }

    .tab-eyebrow {
      color: var(--text-2);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.11em;
      text-transform: uppercase;
    }

    .punto-mark,
    .punto-icon {
      position: relative;
      flex: 0 0 auto;
      border-radius: 16px;
      background: var(--accent);
      box-shadow: 0 4px 0 var(--accent-deep);
    }

    .punto-mark {
      width: 52px;
      height: 52px;
      border: 2px solid var(--accent-deep);
    }

.punto-brain-icon {
  width: 124px;
  height: 124px;
  flex: 0 0 auto;
  overflow: visible;
}

.punto-brain-icon .punto-avatar-img {
  transform: scale(1.12);
  transform-origin: center;
}

.punto-brain-icon .punto-avatar.has-soft-shadow::after {
  display: none;
  content: none;
}

    .punto-brain-avatar {
      position: relative;
      display: inline-block;
      width: var(--punto-size);
      height: var(--punto-size);
      transform-origin: 50% 74%;
    }

    .punto-brain-avatar.is-animated {
      animation: punto-brain-breathe 3.4s ease-in-out infinite;
    }

    .punto-brain-avatar svg,
    .punto-brain-svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .punto-brain-base {
      fill: var(--accent);
    }

    .punto-brain-lid {
      fill: var(--accent);
      transform-box: fill-box;
      transform-origin: 50% 100%;
    }

    .punto-brain-avatar.is-animated .punto-brain-lid {
      animation: punto-lid-think 4.8s ease-in-out infinite;
    }

    .punto-brain-foot {
      fill: var(--accent-deep);
    }

    .punto-brain-eye {
      fill: #3A2B22;
      transform-box: fill-box;
      transform-origin: center;
    }

    .punto-brain-avatar.is-animated .punto-brain-eye {
      animation: punto-brain-blink 4.2s ease-in-out infinite;
    }

    .punto-brain-mouth {
      fill: none;
      stroke: #3A2B22;
      stroke-linecap: round;
      stroke-width: 15;
    }

    .punto-brain-punctuation {
      font-family: var(--font);
      font-weight: 900;
      line-height: 1;
    }

    .punto-brain-punct {
      transform-box: fill-box;
      transform-origin: center;
    }

    .punto-brain-punct.punct-a {
      fill: var(--accent);
      font-size: 115px;
    }

    .punto-brain-punct.punct-b {
      fill: var(--gold);
      font-size: 135px;
    }

    .punto-brain-punct.punct-c {
      fill: #37A8E8;
      font-size: 105px;
    }

    .punto-brain-avatar.is-animated .punto-brain-punct {
      animation: punto-brain-pop 3.2s ease-in-out infinite;
    }

    .punto-brain-avatar.is-animated .punct-b { animation-delay: 0.35s; }
    .punto-brain-avatar.is-animated .punct-c { animation-delay: 0.7s; }

    .punto-brain-mark {
      display: none;
    }

    .punto-icon.has-brain {
      background: transparent;
      box-shadow: none;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
    }

    .punto-icon.has-brain::before,
    .punto-icon.has-brain::after {
      content: none;
    }

    @keyframes punto-brain-breathe {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-2px) scale(1.025); }
    }

    @keyframes punto-lid-think {
      0%, 100% { transform: rotate(0deg) translateY(0); }
      45%, 55% { transform: rotate(-5deg) translateY(-14px); }
    }

    @keyframes punto-brain-blink {
      0%, 86%, 100% { transform: scaleY(1); }
      90%, 94% { transform: scaleY(0.08); }
    }

    @keyframes punto-brain-pop {
      0%, 100% { transform: translateY(0) scale(0.98); opacity: 0.68; }
      48%, 58% { transform: translateY(-24px) scale(1.08); opacity: 1; }
    }

    /* ── Punto Brain Mark (new design) ──────────────────────── */
    @keyframes pbm-breathe {
      0%, 100% { transform: scale(1, 1); }
      50%       { transform: scale(1.018, 0.986); }
    }
    @keyframes pbm-lid {
      0%, 100% { transform: translateY(-6%) rotate(-2.5deg); }
      50%       { transform: translateY(-12%) rotate(-5deg); }
    }
    @keyframes pbm-spill {
      0%       { opacity: 0; transform: translate(-50%, 0) rotate(0deg) scale(0.4); }
      14%, 66% { opacity: 1; }
      100%     { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), var(--dy, -60px)) rotate(var(--rot, 20deg)) scale(1); }
    }
    .pbm-lid {
      animation: pbm-lid 3.4s ease-in-out infinite;
      transform-box: fill-box;
      transform-origin: center bottom;
    }

    .punto-mark::before,
    .punto-icon::before {
      content: "";
      position: absolute;
      top: 14px;
      left: 13px;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #fff;
      box-shadow: 18px 0 0 #fff;
    }

    .punto-mark-smile,
    .punto-icon::after {
      position: absolute;
      left: 50%;
      bottom: 13px;
      width: 16px;
      height: 8px;
      border: 2px solid #fff;
      border-top: 0;
      border-radius: 0 0 999px 999px;
      transform: translateX(-50%);
    }

    .punto-mark-smile {
      content: "";
      display: block;
    }

    .punto-icon::after {
      content: "";
      bottom: 8px;
      width: 13px;
      height: 6px;
    }

    .punto-icon.has-brain::before,
    .punto-icon.has-brain::after,
    .punto-icon:has(.punto-avatar-img)::before,
    .punto-icon:has(.punto-avatar-img)::after {
      content: none;
    }

    .journal-review-overlay {
      position: fixed;
      inset: 0;
      z-index: 105;
      display: flex;
      align-items: flex-end;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    .journal-review-overlay.open {
      opacity: 1;
      pointer-events: all;
    }

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

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

    .journal-review-overlay.open .journal-review-sheet {
      transform: translateY(0);
    }

    .journal-review-sheet::before {
      content: "";
      display: block;
      width: 36px;
      height: 4px;
      background: var(--border);
      border-radius: 2px;
      margin: 12px auto 20px;
    }

    .journal-review-header h2 {
      color: var(--text);
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 0;
      margin: 0;
    }

    .journal-review-header p,
    .journal-review-status {
      color: var(--text-2);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.4;
      margin: 6px 0 0;
      white-space: pre-line;
    }

    .journal-review-status.is-success,
    .jcc-import-status {
      color: var(--correct);
      font-weight: 800;
    }

    .jcc-import-status {
      font-size: 13px;
      line-height: 1.4;
      margin-bottom: 4px;
    }

    .journal-review-import-text {
      width: 100%;
      min-height: 260px;
      margin-top: 18px;
      padding: 14px;
      resize: vertical;
      border: 1px solid var(--hairline);
      border-radius: 14px;
      background: var(--card);
      color: var(--text);
      font-family: var(--font);
      font-size: 15px;
      line-height: 1.45;
      box-shadow: var(--shadow);
      outline: none;
      -webkit-appearance: none;
    }

    .journal-review-import-text:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14);
    }

    .journal-review-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 14px;
    }

    .journal-review-secondary-btn,
    .journal-review-primary-btn {
      min-height: 46px;
      border-radius: 14px;
      border: 1px solid var(--hairline);
      font-family: var(--font);
      font-size: 14px;
      font-weight: 800;
    }

    .journal-review-secondary-btn {
      background: var(--card);
      color: var(--text-2);
    }

    .journal-review-primary-btn {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
      box-shadow: 0 4px 0 var(--accent-deep);
    }

    /* ─ Journal Coach summary (Phase 7C) ─ */
    .journal-coach-summary {
      margin-top: 18px;
      padding: 14px 16px;
      background: var(--card);
      border-radius: 14px;
      border: 1px solid var(--hairline);
    }

    .journal-coach-copy {
      color: var(--text);
      font-size: 14px;
      font-weight: 700;
      margin: 0 0 10px;
      line-height: 1.4;
    }

    .journal-coach-list {
      margin: 0 0 8px 0;
      padding: 0 0 0 18px;
      font-size: 13px;
      line-height: 1.5;
      font-weight: 600;
    }

    .journal-coach-list--weak  { color: var(--text); }
    .journal-coach-list--positive { color: var(--correct); }

    .journal-coach-action-btn {
      display: block;
      width: 100%;
      margin-top: 12px;
    }

    /* ============================================================
       JOURNAL CHUNK CONVERTER (jcc) — design handoff restyle
       ============================================================ */

    .journal-chunk-sheet {
      padding-left: 0;
      padding-right: 0;
      padding-top: 0;
    }

    .jcc-state { padding: 0 22px 26px; }

    /* ─ Entry state ─ */
    .jcc-entry-row {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding-top: 10px;
      margin-bottom: 20px;
    }

    .jcc-entry-punto { flex-shrink: 0; display: block; width: 104px; height: 104px; }

    .jcc-entry-punto .punto-avatar-img,
    .jcc-complete-punto .punto-avatar-img {
      transform: scale(1.08);
      transform-origin: center;
    }

    .jcc-entry-title {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.025em;
      color: var(--text);
      line-height: 1.25;
    }

    .jcc-entry-title strong { color: var(--sky-deep); }

    .jcc-entry-sub {
      margin-top: 5px;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text-2);
    }

    /* ─ Review state ─ */
    .jcc-review-hdr {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-top: 4px;
      margin-bottom: 14px;
    }

    .jcc-review-punto { flex-shrink: 0; display: block; width: 44px; height: 44px; }

    .jcc-pips { display: flex; gap: 4px; flex: 1; }

    .jcc-pip {
      height: 6px;
      flex: 1;
      border-radius: 999px;
      background: var(--tint);
      transition: background 280ms ease;
    }

    .jcc-pip.is-done { background: var(--sky); }

    .jcc-pip.is-current {
      background: rgba(55, 168, 232, 0.30);
      box-shadow: inset 0 0 0 1.5px var(--sky);
    }

    .jcc-counter {
      flex-shrink: 0;
      font-size: 12px;
      font-weight: 800;
      color: var(--text-3);
      font-variant-numeric: tabular-nums;
      margin-left: 4px;
    }

    /* ─ Chunk card ─ */
    .journal-chunk-card {
      position: relative;
      overflow: hidden;
      background: var(--card);
      border: 2px solid var(--border);
      border-radius: 20px;
      box-shadow: 0 5px 0 var(--ledge);
      padding: 18px 18px 22px 28px;
      margin-top: 0;
    }

    .journal-chunk-card::before {
      content: "";
      position: absolute;
      top: 0; left: 0; bottom: 0;
      width: 5px;
      background: var(--sky);
      border-radius: 18px 0 0 18px;
    }

    .journal-chunk-source {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(255, 176, 46, 0.18);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--gold-deep);
      margin-bottom: 14px;
    }

    .journal-chunk-spanish {
      font-size: 27px;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--text);
      line-height: 1.15;
      overflow-wrap: anywhere;
    }

    .journal-chunk-english {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-2);
      letter-spacing: -0.01em;
      line-height: 1.4;
      margin-top: 8px;
      overflow-wrap: anywhere;
    }

    .journal-chunk-card.is-complete { display: none; }

    /* ─ Review actions ─ */
    .jcc-review-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 16px;
    }

    .jcc-edit-note {
      text-align: center;
      margin-top: 6px;
      font-size: 11.5px;
      font-weight: 600;
      color: var(--text-3);
    }

    /* ─ Primary button (sky blue) ─ */
    .jcc-primary-btn {
      width: 100%;
      min-height: 54px;
      border-radius: 16px;
      border: none;
      background: var(--sky);
      color: #fff;
      font-family: var(--font);
      font-size: 15px;
      font-weight: 900;
      letter-spacing: 0.02em;
      box-shadow: 0 4px 0 var(--sky-deep);
      -webkit-tap-highlight-color: transparent;
      transition: background var(--speed), transform var(--speed), box-shadow var(--speed);
    }

    .jcc-primary-btn:active {
      background: var(--sky-deep);
      box-shadow: 0 2px 0 var(--sky-deep);
      transform: translateY(2px);
    }

    /* ─ Skip button (text only) ─ */
    .jcc-skip-btn {
      background: transparent;
      border: none;
      font-family: var(--font);
      font-size: 15.5px;
      font-weight: 800;
      color: var(--text-3);
      padding: 9px 0;
      border-radius: 14px;
      text-align: center;
      width: 100%;
      -webkit-tap-highlight-color: transparent;
    }

    /* ─ Added state ─ */
    .jcc-added:not([hidden]) {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding-top: 28px;
      padding-bottom: 44px;
    }

    .jcc-added-check {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: var(--correct-bg);
      border: 2.5px solid var(--correct);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--correct);
      animation: jcc-pop 300ms both;
      box-shadow: 0 4px 0 rgba(14, 141, 119, 0.22);
    }

    .jcc-added-check svg { width: 27px; height: 27px; }

    .jcc-added-title {
      margin-top: 12px;
      font-size: 19px;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--text);
    }

    .jcc-added-sub {
      margin-top: 5px;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text-2);
      font-style: italic;
    }

    /* ─ Complete state ─ */
    .jcc-complete:not([hidden]) {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding-top: 20px;
    }

    .jcc-complete-punto { display: block; width: 112px; height: 112px; animation: jcc-pop 420ms both; }

    .jcc-complete-title {
      margin-top: 12px;
      font-size: 23px;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--text);
    }

    .jcc-complete-sub {
      margin-top: 6px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-2);
      max-width: 255px;
      line-height: 1.4;
    }

    .jcc-complete .jcc-primary-btn { margin-top: 22px; }

    .journal-chunk-coach-summary {
      width: 100%;
      margin-top: 18px;
      padding: 14px 16px;
      background: var(--card);
      border-radius: 14px;
      border: 1px solid var(--hairline);
      text-align: left;
    }

    .journal-chunk-coach-summary .journal-coach-copy { margin-bottom: 8px; }
    .journal-chunk-coach-summary .jcc-primary-btn    { width: 100%; margin-top: 10px; }

    /* ─ AI Journal Coach preview (Phase 7F) ─ */
    .journal-ai-preview-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
    }

    .journal-ai-preview-btn {
      flex-shrink: 0;
      min-height: 40px;
      font-size: 13px;
      padding: 0 14px;
    }

    .journal-ai-privacy-note {
      color: var(--text-2);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.4;
    }

    /* ─ AI Journal Coach real-endpoint UI (Phase 7G) ─ */
    .journal-ai-review-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 8px;
    }

    .journal-ai-review-btn {
      flex-shrink: 0;
      min-height: 40px;
      font-size: 13px;
      padding: 0 14px;
    }

    .journal-ai-review-note {
      color: var(--text-2);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.4;
    }

    .journal-ai-consent-bar {
      margin-top: 10px;
      background: var(--accent-soft);
      border: 1px solid var(--accent);
      border-radius: 12px;
      padding: 12px 14px;
    }

    .journal-ai-consent-copy {
      margin: 0 0 10px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.5;
    }

    .journal-ai-consent-btns {
      display: flex;
      gap: 8px;
    }

    .journal-ai-consent-btns button {
      flex: 1;
    }

    .journal-ai-loading-bar {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
    }

    /* Reinforce [hidden] — class display:flex would otherwise win the cascade */
    .journal-ai-loading-bar[hidden] {
      display: none;
    }

    .journal-ai-loading-text {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-2);
    }

    .journal-ai-loading-text::after {
      content: '';
      display: inline-block;
      animation: jc-dots 1.4s steps(4, end) infinite;
      width: 1.4ch;
      text-align: left;
    }

    @keyframes jc-dots {
      0%   { content: ''; }
      25%  { content: '.'; }
      50%  { content: '..'; }
      75%  { content: '...'; }
      100% { content: ''; }
    }

    .journal-ai-review-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    /* ─ AI Journal Coach preview polish (Phase 7H) ─ */

    .ai-jc-list--mistakes {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .ai-jc-mistake-item {
      padding: 10px 0;
      border-bottom: 1px solid var(--hairline);
    }

    .ai-jc-mistake-item:last-child { border-bottom: none; }

    .ai-jc-mistake-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
    }

    .ai-jc-mistake-label {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      flex: 1;
    }

    .ai-jc-badge {
      flex-shrink: 0;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 20px;
    }

    .ai-jc-badge--low    { background: #e8f5e9; color: #388e3c; }
    .ai-jc-badge--medium { background: #fff8e1; color: #f57c00; }
    .ai-jc-badge--high   { background: #fce4ec; color: #c62828; }

    .ai-jc-mistake-explanation {
      margin: 0 0 3px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text);
      line-height: 1.5;
    }

    .ai-jc-mistake-skill {
      margin: 0;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-2);
    }

    .ai-jc-list--chunks {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .ai-jc-chunk-item {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 9px 0;
      border-bottom: 1px solid var(--hairline);
    }

    .ai-jc-chunk-item:last-child { border-bottom: none; }

    .ai-jc-chunk-spanish {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
    }

    .ai-jc-chunk-english {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-2);
    }

    .ai-jc-chunk-cat {
      display: inline-block;
      margin-top: 3px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--accent);
      background: var(--accent-soft);
      padding: 2px 7px;
      border-radius: 20px;
      align-self: flex-start;
    }

    .ai-jc-chunks-hint {
      margin: 8px 0 2px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-2);
      line-height: 1.4;
    }

    .ai-jc-list li.ai-jc-positive-item {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 2px 0;
    }

    .ai-jc-positive-label {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
    }

    .ai-jc-positive-example {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-2);
    }

    .ai-jc-trust-note {
      margin: 6px 16px 12px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-2);
      line-height: 1.4;
      text-align: center;
    }

    .ai-journal-coach-preview {
      margin-top: 14px;
      background: var(--card);
      border-radius: 14px;
      border: 1px solid var(--hairline);
      overflow: hidden;
    }

    .ai-jc-section {
      padding: 12px 16px;
      border-bottom: 1px solid var(--hairline);
    }

    .ai-jc-section:last-of-type { border-bottom: none; }

    .ai-jc-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-2);
      margin-bottom: 6px;
    }

    .ai-jc-text {
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
      line-height: 1.5;
      margin: 0;
      white-space: pre-wrap;
    }

    .ai-jc-list {
      margin: 0;
      padding: 0 0 0 18px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.6;
    }

    .ai-jc-list li + li { margin-top: 4px; }

    .ai-jc-list--chunks li { font-weight: 700; }

    .ai-jc-chunk-en {
      color: var(--text-2);
      font-weight: 600;
      font-size: 12px;
    }

    #ai-journal-coach-use-btn {
      display: block;
      width: calc(100% - 32px);
      margin: 12px 16px 14px;
    }

    @keyframes jcc-pop {
      from { transform: scale(0.55); opacity: 0; }
      to   { transform: scale(1); opacity: 1; }
    }

    .brain-focus-card,
    .brain-card,
    .brain-import-card {
      border-radius: 22px;
      border: 2px solid var(--border);
      background: var(--card);
      box-shadow: 0 4px 0 var(--ledge);
    }

    .brain-focus-card {
      margin-bottom: 13px;
      padding: 15px;
      border-color: var(--accent);
      background: var(--accent-card);
      box-shadow: 0 5px 0 var(--accent-deep);
    }

    .brain-card {
      margin-bottom: 13px;
      padding: 16px;
    }

    .brain-card h2,
    .profile-list h2 {
      color: var(--text);
      font-size: 18px;
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: 0;
      margin-top: 4px;
    }

    .brain-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .brain-time-pill {
      flex: 0 0 auto;
      border-radius: 999px;
      background: var(--card);
      color: var(--text-2);
      border: 1px solid var(--border);
      padding: 5px 10px;
      font-size: 11px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }

    .brain-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 13px;
    }

    .brain-chip-row span {
      border: 1px solid rgba(242,100,48,0.35);
      border-radius: 999px;
      background: var(--card);
      color: var(--accent-deep);
      padding: 5px 11px;
      font-size: 12px;
      font-weight: 800;
    }

    .daily-mix-list {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 15px;
    }

    .daily-mix-row {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 0 0 14px;
      margin-bottom: 14px;
      border-bottom: 1px solid var(--hairline);
    }

    .daily-mix-row:last-child {
      margin-bottom: 0;
      border-bottom: 0;
    }

    .daily-mix-row strong,
    .brain-import-card strong {
      display: block;
      color: var(--text);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0;
    }

    .daily-mix-row small,
    .brain-import-card small {
      display: block;
      color: var(--text-2);
      font-size: 12.5px;
      font-weight: 600;
      line-height: 1.3;
      margin-top: 2px;
    }

    .daily-mix-row em {
      border-radius: 999px;
      background: var(--tint);
      color: var(--text-2);
      font-size: 11.5px;
      font-style: normal;
      font-weight: 800;
      padding: 3px 9px;
    }

    .mix-icon {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 900;
    }

    .mix-chunks { color: #1E7FBA; background: #D8EEFB; }
    .mix-verb { color: #7A3FC4; background: #EADFFB; }
    .mix-listen { color: #1E7FBA; background: #D8EEFB; }
    .mix-speak { color: #C8451B; background: #FFE6D8; }
    .punto-brain-v2 {
      padding-bottom: calc(112px + env(safe-area-inset-bottom));
    }

    .punto-brain-hero-card {
      align-items: center;
      margin-bottom: 16px;
      padding: 18px;
      border: 2px solid rgba(242,100,48,0.18);
      border-radius: 24px;
      background: var(--hero-gradient);
      box-shadow: 0 5px 0 rgba(105,70,44,0.08), 0 14px 28px rgba(105,70,44,0.08);
    }

    .punto-brain-v2 .punto-brain-icon {
      width: 112px;
      height: 112px;
    }

    .punto-brain-hero-body {
      min-width: 0;
    }

    .punto-brain-hero-card h1 {
      max-width: 260px;
      font-size: 27px;
      line-height: 1.04;
      margin: 4px 0 0;
    }

    .punto-brain-hero-card p {
      max-width: 270px;
      font-size: 14px;
      margin-top: 8px;
    }

    .punto-focus-pill-v2 {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      min-height: 34px;
      margin-top: 12px;
      padding: 7px 12px;
      border: 1px solid rgba(242,100,48,0.24);
      border-radius: 999px;
      background: #fff;
      color: var(--accent-deep);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.15;
    }

    /* Onboarding personalisation PR: additive goal chip under the focus
       pill above — its own line so it never fights the focus pill for
       width on narrow screens. */
    .punto-goal-pill-v2 {
      display: flex;
      margin-top: 8px;
      color: var(--text-2);
      border-color: var(--border);
    }

    /* The goal pill's display:flex above out-specifies the [hidden] UA
       rule, so it stayed visible (as an empty pill) when no onboarding
       goal is set. Restore the intended hide-when-empty behaviour — a
       correctness fix that applies in both light and dark. */
    .punto-goal-pill-v2[hidden] {
      display: none;
    }

    .punto-card-subtitle {
      color: var(--text-2);
      font-size: 13px;
      font-weight: 650;
      line-height: 1.35;
      margin-top: 4px;
    }

    .punto-brain-v2 .brain-card {
      border-color: rgba(105,70,44,0.12);
      background: var(--card);
      box-shadow: 0 4px 0 rgba(105,70,44,0.08), 0 12px 24px rgba(105,70,44,0.06);
    }

    .punto-brain-v2 .brain-card h2 {
      font-size: 20px;
      margin-top: 0;
    }

    .punto-lesson-card .daily-mix-list,
    .punto-chunk-list,
    .punto-recommend-list,
    .punto-why-list {
      margin-top: 14px;
    }

    .punto-lesson-card .daily-mix-list {
      border: 1px solid rgba(105,70,44,0.12);
      border-radius: 16px;
      overflow: hidden;
      background: var(--card);
    }

    .punto-lesson-card .daily-mix-row {
      min-height: 60px;
      margin: 0;
      padding: 10px 12px;
      border-bottom: 1px solid rgba(105,70,44,0.10);
    }

    .punto-lesson-card .daily-mix-row:last-child {
      border-bottom: 0;
    }

    .punto-lesson-card .brain-primary-btn {
      min-height: 58px;
      border-radius: 17px;
      background: linear-gradient(180deg, #FF7A32 0%, #F4511E 100%);
      font-size: 17px;
      box-shadow: 0 5px 0 #C53C12;
    }

    .punto-chunk-list {
      border: 1px solid rgba(105,70,44,0.12);
      border-radius: 16px;
      overflow: hidden;
      background: var(--card);
    }

    .punto-chunk-row {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      min-height: 48px;
      padding: 8px 11px;
      border-bottom: 1px solid rgba(105,70,44,0.10);
    }

    .punto-chunk-row:last-child {
      border-bottom: 0;
    }

    .punto-chunk-icon,
    .punto-recommend-icon,
    .punto-why-icon-pill {
      display: grid;
      place-items: center;
      border-radius: 12px;
      font-weight: 900;
    }

    .punto-chunk-icon {
      width: 34px;
      height: 34px;
      background: #FFE9D6;
      color: var(--accent-deep);
      font-size: 15px;
    }

    .punto-chunk-main {
      min-width: 0;
    }

    .punto-chunk-spanish {
      display: block;
      overflow: hidden;
      color: var(--text);
      font-size: 14px;
      font-weight: 850;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .punto-chunk-english {
      display: block;
      overflow: hidden;
      color: var(--text-2);
      font-size: 12px;
      font-weight: 650;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .punto-chunk-status {
      border-radius: 999px;
      background: #FFF1E8;
      color: var(--accent-deep);
      font-size: 11.5px;
      font-weight: 850;
      padding: 4px 8px;
      white-space: nowrap;
    }

    .punto-chunk-status.status-practising {
      background: #FFF7DF;
      color: #A25C00;
    }

    .punto-chunk-status.status-almost-mastered {
      background: #EAF7E2;
      color: #3E7F2C;
    }

    .punto-chunk-status.status-mastered {
      background: #E8EEF8;
      color: #3A5FA0;
    }

    .punto-chunk-empty {
      padding: 14px;
      color: var(--text-2);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.35;
    }

    .punto-secondary-row-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      min-height: 44px;
      margin-top: 10px;
      border: 1px solid rgba(242,100,48,0.24);
      border-radius: 14px;
      background: #FFF8F1;
      color: var(--accent-deep);
      font-size: 14px;
      font-weight: 900;
    }

    .punto-recommend-list {
      display: grid;
      gap: 10px;
    }

    .punto-recommend-btn {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      gap: 11px;
      align-items: center;
      width: 100%;
      min-height: 58px;
      padding: 10px;
      border: 1px solid rgba(105,70,44,0.12);
      border-radius: 16px;
      background: var(--card);
      text-align: left;
    }

    .punto-recommend-icon {
      width: 42px;
      height: 42px;
      font-size: 18px;
    }

    .punto-recommend-btn strong {
      display: block;
      color: var(--text);
      font-size: 14px;
      font-weight: 850;
      line-height: 1.15;
    }

    .punto-recommend-btn small {
      display: block;
      color: var(--text-2);
      font-size: 12px;
      font-weight: 650;
      line-height: 1.25;
      margin-top: 3px;
    }

    .punto-recommend-arrow {
      color: var(--text-3);
      font-size: 22px;
      font-weight: 900;
    }

    .punto-recommend-btn[data-route="listening"] .punto-recommend-icon { color: #3E7F2C; background: #EAF7E2; }
    .punto-recommend-btn[data-route="chunks"] .punto-recommend-icon { color: #7A3FC4; background: #EFE5FF; }
    .punto-recommend-btn[data-route="conjugation"] .punto-recommend-icon { color: #1E7FBA; background: #E3F4FD; }
    .punto-recommend-btn[data-route="journal"] .punto-recommend-icon { color: #C87500; background: #FFEFCF; }
    .punto-recommend-btn[data-route="my-spanish"] .punto-recommend-icon { color: var(--accent-deep); background: #FFE6D8; }

    .punto-brain-v2 .brain-import-card {
      min-height: 74px;
      margin-bottom: 13px;
      border-color: rgba(242,100,48,0.20);
      background: #FFFDF8;
    }

    .punto-details-pill {
      flex: 0 0 auto;
      min-height: 40px;
      border: 1px solid rgba(105,70,44,0.14);
      border-radius: 999px;
      background: var(--card);
      color: var(--text-2);
      padding: 6px 11px;
      font-size: 12px;
      font-weight: 850;
    }

    .punto-why-list {
      display: grid;
      gap: 8px;
    }

    .punto-why-signal-row {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      min-height: 46px;
      padding: 8px 0;
      border-top: 1px solid rgba(105,70,44,0.10);
    }

    .punto-why-signal-row:first-child {
      border-top: 0;
      padding-top: 0;
    }

    .punto-why-icon-pill {
      width: 38px;
      height: 38px;
      background: #FFF1E8;
      color: var(--accent-deep);
    }

    .punto-why-signal-text {
      color: var(--text);
      font-size: 13px;
      font-weight: 750;
      line-height: 1.25;
    }

    @media (max-width: 390px) {
      .punto-brain-hero-card {
        gap: 10px;
        padding: 15px;
      }

      .punto-brain-v2 .punto-brain-icon {
        width: 94px;
        height: 94px;
      }

      .punto-brain-hero-card h1 {
        font-size: 24px;
      }

      .punto-brain-hero-card p {
        font-size: 13px;
      }
    }

    .speaking-body {
      max-width: 540px;
      width: 100%;
      margin: 0 auto;
      padding: 18px 20px 32px;
    }

    .speaking-title {
      color: var(--text);
      font-size: 30px;
      font-weight: 800;
      line-height: 1.08;
      letter-spacing: 0;
      margin: 4px 0 14px;
    }

    .speaking-coach-card,
    .speaking-card {
      border: 2px solid var(--border);
      border-radius: 18px;
      background: var(--card);
      box-shadow: 0 4px 0 var(--ledge);
    }

    .speaking-coach-card {
      display: grid;
      grid-template-columns: 62px minmax(0, 1fr);
      gap: 13px;
      align-items: center;
      padding: 14px;
      margin-bottom: 14px;
      border-color: var(--accent);
      background: var(--accent-card);
      box-shadow: 0 5px 0 var(--accent-deep);
    }

    .speaking-punto {
      width: 76px;
      height: 76px;
      display: grid;
      place-items: center;
    }

    .speaking-coach-label,
    .speaking-label {
      color: var(--accent-deep);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    #speaking-guidance {
      margin: 4px 0 0;
      color: var(--text);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
    }

    .speaking-card {
      padding: 16px;
    }

    .speaking-card-topline,
    .speaking-footer-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }

    .speaking-meta {
      color: var(--text-2);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.3;
      margin-top: 3px;
    }

    .speaking-pattern-chip {
      flex: 0 0 auto;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent-deep);
      border: 1px solid rgba(200, 69, 27, 0.28);
      padding: 5px 10px;
      font-size: 12px;
      font-weight: 900;
    }

    .speaking-prompt {
      min-height: 168px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 10px;
      padding: 16px 0 14px;
    }

    .speaking-context {
      color: var(--text-3);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.35;
    }

    .speaking-spanish {
      margin: 0;
      color: var(--text);
      font-size: 28px;
      font-weight: 850;
      line-height: 1.12;
      letter-spacing: 0;
    }

    .speaking-english {
      margin: 0;
      color: var(--text-2);
      font-size: 16px;
      font-weight: 700;
      line-height: 1.35;
    }

    .speaking-transcript-placeholder {
      border-radius: 14px;
      background: var(--tint);
      border: 1px solid var(--hairline);
      padding: 12px;
      margin-bottom: 14px;
    }

    .speaking-transcript-placeholder p {
      margin: 4px 0 0;
      color: var(--text-2);
      font-size: 13px;
      font-weight: 650;
      line-height: 1.35;
    }

    .speaking-action-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 9px;
    }

    .speaking-action-row + .speaking-action-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .speaking-action-btn,
    .speaking-rating-btn,
    .speaking-next-btn {
      min-height: 48px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--bg-elev);
      color: var(--text);
      font-family: var(--font);
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 0;
      box-shadow: 0 3px 0 var(--ledge);
      -webkit-tap-highlight-color: transparent;
    }

    .speaking-action-btn.primary {
      border-color: var(--accent-deep);
      background: var(--accent);
      color: #fff;
      box-shadow: 0 4px 0 var(--accent-deep);
    }

    .speaking-action-btn:disabled,
    .speaking-rating-btn:disabled {
      opacity: 0.45;
      box-shadow: none;
    }

    .speaking-action-btn.is-recording {
      background: #C8451B;
      color: #fff;
    }

    .speaking-rating-row {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .speaking-rating-btn.good {
      border-color: rgba(14, 141, 119, 0.38);
      background: #D4F4EC;
      color: #0E8D77;
    }

    .speaking-rating-btn.almost {
      border-color: rgba(180, 120, 0, 0.30);
      background: #FFF3CC;
      color: #8A6000;
    }

    .speaking-rating-btn.needs-work {
      border-color: rgba(200, 69, 27, 0.34);
      background: #FFE6D8;
      color: #C8451B;
    }

    .speaking-rating-btn.is-selected {
      outline: 3px solid rgba(242, 100, 48, 0.22);
    }

    .speaking-rating-hint {
      margin-top: 7px;
      color: var(--text-3, var(--text-2));
      font-size: 12px;
      font-weight: 600;
      text-align: center;
      opacity: 0.72;
    }

    .speaking-session-progress {
      margin-top: 5px;
      color: var(--text-2);
      font-size: 12px;
      font-weight: 700;
      text-align: center;
    }

    .speaking-session-progress.speaking-progress-done {
      color: #0E8D77;
    }

    .speaking-footer-row {
      align-items: center;
      margin-top: 14px;
    }

    .speaking-status {
      min-height: 20px;
      color: var(--text-2);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.35;
    }

    .speaking-next-btn {
      flex: 0 0 auto;
      min-height: 42px;
      padding: 0 14px;
      color: var(--accent-deep);
      background: var(--accent-soft);
      border-color: rgba(200, 69, 27, 0.28);
    }

    .speaking-empty-state {
      margin-top: 14px;
      color: var(--text-2);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.4;
    }
    .mix-mission { color: #0E8D77; background: #D4F4EC; }

    .punto-session-scroll {
      padding-top: 10px;
    }

    /* ── Today's Plan Lesson — top nav + progress ── */
    .lesson-nav {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 4px;
    }

    .lesson-nav-title {
      flex: 1;
      text-align: center;
      font-size: 15px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.01em;
    }

    .lesson-counter-pill {
      font-variant-numeric: tabular-nums;
    }

    .punto-session-track {
      height: 8px;
      margin: 10px 0 16px;
      border-radius: 999px;
      background: var(--tint);
      overflow: hidden;
    }

    .punto-session-track span {
      display: block;
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: var(--accent);
      transition: width 420ms cubic-bezier(.2,.7,.3,1);
    }

    /* ── Punto + speech bubble ── */
    .lesson-punto-row {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 2px 0 14px;
    }

    .lesson-punto {
      width: 154px;
      min-height: 154px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
    }

    .lesson-punto .punto-avatar {
      width: var(--punto-size, 142px) !important;
      height: var(--punto-size, 142px) !important;
    }

    .lesson-punto .punto-avatar-img {
      transform: scale(1.08);
      transform-origin: center;
    }

    .lesson-speech {
      position: relative;
      max-width: 280px;
      background: var(--card);
      border: 2px solid var(--border);
      border-radius: 18px;
      box-shadow: 0 3px 0 var(--ledge);
      padding: 11px 16px;
      font-size: 14.5px;
      font-weight: 700;
      color: var(--text);
      text-align: center;
      line-height: 1.3;
    }

    .lesson-speech::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -8px;
      width: 14px;
      height: 14px;
      background: var(--card);
      border-right: 2px solid var(--border);
      border-bottom: 2px solid var(--border);
      transform: translateX(-50%) rotate(45deg);
    }

    .lesson-speech[hidden],
    .lesson-stars[hidden],
    .lesson-confetti[hidden] {
      display: none;
    }

    .lesson-stars {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .lesson-star {
      display: block;
      animation: pa-pop 460ms ease both;
    }

    /* ── Question type chip ── */
    .qtype-chip {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      padding: 5px 12px;
      border-radius: 999px;
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: var(--accent-soft);
      color: var(--accent-deep);
    }

    .qtype-chip:empty {
      display: none;
    }

    .qtype-chip.qtype-plum { background: var(--plum-soft); color: var(--plum-deep); }
    .qtype-chip.qtype-sky { background: var(--sky-soft); color: var(--sky-deep); }
    .qtype-chip.qtype-jade { background: var(--correct-bg); color: var(--correct-deep); }
    .qtype-chip.qtype-terra { background: var(--accent-soft); color: var(--accent-deep); }
    /* PR3: repair-round intro chip. */
    .qtype-chip.qtype-repair { background: var(--almost-bg); color: var(--almost); }

    .punto-session-card {
      display: grid;
      gap: 10px;
    }

    .punto-session-card h2 {
      margin: 0;
    }

    #punto-session-title:empty,
    #path-lesson-title:empty {
      display: none;
      margin: 0;
    }

    .punto-session-actions {
      display: none;
      gap: 8px;
      flex-wrap: wrap;
    }

    .punto-session-actions.is-visible {
      display: flex;
    }

    .punto-speaking-rating-hint {
      width: 100%;
      margin: 0 0 4px;
      color: var(--text-3, var(--text-2));
      font-size: 12px;
      font-weight: 600;
      text-align: center;
      opacity: 0.72;
    }

    .punto-speaking-rating-row {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    /* Phase 19F: guided lesson runner's 2-button ("I said it" / "Need
       practice") speaking rating — keeps Today's Plan's 3-button row above
       unchanged while avoiding an empty third grid column here. */
    .punto-speaking-rating-row--pair {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .punto-session-action-btn,
    .punto-session-option-btn {
      border: 2px solid var(--border);
      border-radius: 14px;
      background: var(--card);
      color: var(--text);
      font: inherit;
      font-size: 13px;
      font-weight: 800;
      padding: 10px 12px;
      text-align: left;
      box-shadow: 0 3px 0 var(--ledge);
    }

    .punto-session-action-btn:active,
    .punto-session-option-btn:active {
      transform: translateY(2px);
      box-shadow: 0 1px 0 var(--ledge);
    }

    .punto-session-action-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .punto-session-action-btn svg {
      width: 17px;
      height: 17px;
      flex: 0 0 auto;
    }

    .punto-session-option-btn {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
    }

    .punto-session-option-btn.is-selected {
      border-color: var(--sky);
      background: var(--sky-soft);
      box-shadow: 0 3px 0 var(--sky-deep);
    }

    .punto-session-option-btn.is-correct,
    .punto-session-option-btn.is-wrong {
      box-shadow: none;
    }

    .punto-session-option-btn.is-correct {
      border-color: var(--correct);
      color: var(--correct-deep);
      background: var(--correct-bg);
    }

    .punto-session-option-btn.is-wrong {
      border-color: var(--wrong);
      color: var(--wrong-deep);
      background: var(--incorrect-bg);
    }

    .punto-session-option-btn.is-correct::before,
    .punto-session-option-btn.is-wrong::before {
      content: '\2713';
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 900;
      color: #fff;
      background: var(--correct);
    }

    .punto-session-option-btn.is-wrong::before {
      content: '\2715';
      background: var(--wrong);
    }

    .punto-session-answer {
      display: none;
      margin-top: 4px;
    }

    .punto-session-answer.is-visible {
      display: block;
    }

    .punto-session-answer input {
      width: 100%;
      min-height: 56px;
      border: 2px solid var(--border);
      border-radius: 16px;
      background: var(--card);
      color: var(--text);
      font: inherit;
      font-size: 16px;
      font-weight: 700;
      padding: 0 14px;
      outline: none;
      box-shadow: 0 3px 0 var(--ledge);
      transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
    }

    .punto-session-answer input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(242,100,48,0.14);
    }

    .punto-session-answer input.is-correct {
      border-color: var(--correct);
      background: var(--correct-bg);
      color: var(--correct-deep);
      box-shadow: 0 3px 0 var(--correct-deep);
    }

    .punto-session-answer input.is-wrong {
      border-color: var(--wrong);
      background: var(--incorrect-bg);
      color: var(--wrong-deep);
      text-decoration: line-through;
      box-shadow: 0 3px 0 var(--wrong-deep);
    }

    .punto-session-result {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      border-radius: 16px;
      background: var(--card);
      border: 2px solid var(--border);
      color: var(--text-2);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.4;
      padding: 0 14px;
      margin-top: 0;
      transform: translateY(8px);
      transition: max-height 260ms cubic-bezier(.2,.7,.3,1), opacity 220ms ease,
                  transform 220ms ease, padding 220ms ease, margin 220ms ease,
                  border-color 160ms ease, background 160ms ease;
    }

    .punto-session-result.is-visible {
      max-height: 480px;
      opacity: 1;
      transform: translateY(0);
      padding: 14px;
      margin-top: 12px;
    }

    .punto-session-result.is-correct {
      border-color: var(--correct);
      color: var(--correct-deep);
      background: var(--correct-bg);
    }

    .punto-session-result.is-wrong {
      border-color: var(--wrong);
      color: var(--wrong-deep);
      background: var(--incorrect-bg);
    }

    .punto-session-result strong {
      display: block;
      color: inherit;
      font-size: 14px;
    }

    .punto-session-result .result-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 4px;
    }

    .punto-session-result .result-badge {
      flex-shrink: 0;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 900;
      color: #fff;
      background: var(--text-3);
    }

    .punto-session-result.is-correct .result-badge { background: var(--correct); }
    .punto-session-result.is-wrong .result-badge { background: var(--wrong); }

    .punto-session-result .result-line {
      margin-top: 4px;
      opacity: 0.85;
    }

    .punto-session-result .result-mastery {
      margin-top: 8px;
      padding: 6px 8px;
      border-radius: 8px;
      background: #EAF7E2;
      color: #3E7F2C;
      font-size: 12px;
      font-weight: 700;
    }

    /* ── Completion recap ── */
    .lesson-stats-grid {
      display: none;
      gap: 10px;
      margin-top: 4px;
    }

    .lesson-stats-grid[hidden] {
      display: none;
    }

    .lesson-stats-grid:not([hidden]) {
      display: flex;
    }

    .lesson-stat-chip {
      flex: 1;
      text-align: center;
      background: var(--card);
      border: 2px solid var(--border);
      border-radius: 16px;
      box-shadow: 0 3px 0 var(--ledge);
      padding: 12px 8px 10px;
    }

    .lesson-stat-chip strong {
      display: block;
      font-size: 20px;
      font-weight: 800;
      color: var(--text);
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.01em;
    }

    .lesson-stat-chip span {
      display: block;
      margin-top: 3px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-2);
    }

    /* Phase 17G: Path-specific completion card inside the existing
       Today's Plan completion screen. Shown only when the session was
       launched from a Path node — reuses the warm/terracotta/gold tokens
       already defined for the Path screen, no new palette. */
    .path-completion-card {
      margin-top: 14px;
      padding: 16px;
      border-radius: 18px;
      background: var(--accent-card);
      border: 1px solid var(--accent);
      text-align: center;
    }

    /* Phase 27A: small checkmark badge for the guided runner's own
       completion card — its only screen-reached way to feel "done" was
       plain text, unlike the Today's Plan completion screen which already
       has confetti/stars. Pure CSS, no new assets. */
    .path-completion-badge {
      width: 42px;
      height: 42px;
      margin: 0 auto 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--correct);
      color: #fff;
      font-size: 20px;
      font-weight: 800;
      animation: path-completion-badge-pop 420ms cubic-bezier(.34,1.56,.64,1);
    }

    @keyframes path-completion-badge-pop {
      0%   { transform: scale(0.4); opacity: 0; }
      60%  { transform: scale(1.12); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }

    .path-completion-eyebrow {
      font-size: 10.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--accent-deep);
    }

    .path-completion-node {
      margin-top: 4px;
      font-size: 17px;
      font-weight: 800;
      color: var(--text);
    }

    .path-completion-xp {
      display: inline-block;
      margin-top: 6px;
      font-size: 12.5px;
      font-weight: 800;
      color: var(--gold-deep);
    }

    .path-completion-next {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--accent);
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .path-completion-next-label {
      font-size: 10.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--correct-deep);
    }

    .path-completion-next-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
    }

    /* Curriculum Batch 28: fail-state modifiers for the same completion
       card/badge above — reuses --wrong/--wrong-deep (already used
       elsewhere for wrong-answer styling) so no new colors are introduced. */
    .path-completion-card--fail {
      background: var(--wrong-soft, #fde8e8);
      border-color: var(--wrong);
    }

    .path-completion-badge--fail {
      background: var(--wrong);
      animation: none;
    }

    .path-completion-score {
      margin-top: 6px;
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
    }

    .path-completion-pass-mark {
      display: block;
      margin-top: 2px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-3, var(--text-2));
    }

    /* PR4: compact "what was practised" / repair-round mention lines. */
    .path-completion-practised,
    .path-completion-repair {
      margin-top: 6px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-2);
    }

    .path-completion-weak {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--accent);
      text-align: left;
    }

    .path-completion-weak-title {
      font-size: 10.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--wrong-deep);
      margin-bottom: 4px;
    }

    .path-completion-weak-item {
      font-size: 12.5px;
      color: var(--text);
      padding: 3px 0;
    }

    /* Post-lesson next-step guidance: compact "keep going" links row on the
       Path lesson completion screen — deliberately small/text-link styled
       (not full-width buttons) so it doesn't compete with the primary
       "Continue Path" CTA below it. */
    .path-completion-keepgoing {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--accent);
      text-align: left;
    }

    .path-completion-keepgoing-title {
      font-size: 10.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--accent-deep);
      margin-bottom: 6px;
    }

    .path-completion-keepgoing-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .path-completion-link-btn {
      min-height: 34px;
      padding: 7px 12px;
      border-radius: 10px;
      background: var(--bg-elev);
      border: 1px solid var(--hairline);
      color: var(--accent-deep);
      font-size: 12.5px;
      font-weight: 700;
    }

    .path-completion-link-btn:active {
      transform: translateY(1px);
    }

    /* Phase 19E: Unit 1 guided lesson runner — "Learn" step chunk list.
       Reuses .ai-jc-chunk-item/-spanish/-english (Journal Coach chunk list)
       for the Spanish/English rows; only the note line below is new. */
    .path-lesson-chunks {
      margin: 4px 0 6px;
    }

    .path-lesson-chunk-note {
      margin-top: 3px;
      font-size: 11px;
      font-style: italic;
      color: var(--text-2);
      line-height: 1.35;
    }

    /* PR3: compact grammar-note / mistake "watch out" cards shown in the
       guided Path lesson runner — see applyPathLessonFeedbackNotes() and
       renderPathLessonLearnGrammarNote(). Mobile-first, warm-card style
       consistent with .punto-session-result above. */
    .path-lesson-notes {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 10px;
    }

    .path-lesson-notes:empty {
      margin-top: 0;
    }

    .path-lesson-note {
      border-radius: 14px;
      padding: 10px 12px;
      font-size: 12.5px;
      line-height: 1.4;
    }

    .path-lesson-note-title {
      font-size: 10.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 3px;
    }

    .path-lesson-note-body {
      color: var(--text);
    }

    .path-lesson-note--grammar {
      background: var(--sky-soft);
      border: 1px solid var(--sky);
    }

    .path-lesson-note--grammar .path-lesson-note-title {
      color: var(--sky-deep);
    }

    .path-lesson-note--mistake {
      background: var(--almost-bg);
      border: 1px solid var(--almost);
    }

    .path-lesson-note--mistake .path-lesson-note-title {
      color: var(--almost);
    }

    .lesson-secondary-btn {
      width: 100%;
      min-height: 48px;
      margin-top: 10px;
      border: 2px solid var(--border);
      border-radius: 16px;
      background: var(--card);
      color: var(--accent-deep);
      font-size: 14px;
      font-weight: 800;
    }

    .lesson-secondary-btn:active {
      transform: translateY(1px);
    }

    .lesson-secondary-btn[hidden] {
      display: none;
    }

    /* ── Completion confetti ── */
    .lesson-confetti {
      position: fixed;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 40;
    }

    .lesson-confetti-piece {
      position: absolute;
      top: -20px;
      animation: lesson-confetti-fall cubic-bezier(.3,.6,.6,1) infinite;
    }

    @keyframes lesson-confetti-fall {
      0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
      100% { transform: translate(var(--drift), 780px) rotate(var(--rot)); opacity: 0; }
    }

    .brain-primary-btn {
      width: 100%;
      min-height: 48px;
      margin-top: 14px;
      border: 0;
      border-radius: 16px;
      background: var(--accent);
      color: #fff;
      box-shadow: 0 4px 0 var(--accent-deep);
      font-size: 15px;
      font-weight: 800;
    }

    .brain-primary-btn:active {
      transform: translateY(2px);
      box-shadow: 0 2px 0 var(--accent-deep);
    }

    .brain-action-note {
      min-height: 18px;
      margin-top: 10px;
      color: var(--text-2);
      font-size: 12px;
      font-weight: 700;
      text-align: center;
    }

    .brain-import-card {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr) auto;
      gap: 13px;
      align-items: center;
      width: 100%;
      margin-bottom: 22px;
      padding: 15px;
      text-align: left;
    }

    .brain-import-icon {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border-radius: 13px;
      background: #FFEFCF;
      color: var(--gold-deep);
    }

    .brain-import-icon svg,
    .bottom-tab-icon svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2.2;
    }

    .brain-import-arrow {
      color: var(--text-3);
      font-size: 22px;
      font-weight: 800;
    }

    .focus-timeline {
      margin-top: 12px;
      border: 2px solid var(--border);
      border-radius: 18px;
      padding: 2px 15px;
    }

    .focus-timeline div {
      position: relative;
      display: grid;
      grid-template-columns: 88px minmax(0, 1fr);
      gap: 12px;
      padding: 12px 0 12px 20px;
      border-bottom: 1px solid var(--hairline);
    }

    .focus-timeline div:last-child {
      border-bottom: 0;
    }

    .focus-timeline span {
      position: absolute;
      top: 18px;
      left: 0;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 0 4px var(--accent-soft);
    }

    .focus-timeline strong {
      color: var(--text-3);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .focus-timeline em {
      color: var(--text);
      font-size: 14px;
      font-style: normal;
      font-weight: 700;
      line-height: 1.3;
    }

    .fluency-ring {
      display: flex;
      flex: 0 0 104px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--accent);
      border-radius: 22px;
      background:
        radial-gradient(circle at center, var(--card) 54%, transparent 56%),
        conic-gradient(var(--accent) 0 var(--fluency-fill, 0%), var(--tint) var(--fluency-fill, 0%) 100%);
      box-shadow: 0 4px 0 var(--accent-deep);
    }

    .fluency-ring strong {
      color: var(--text);
      max-width: 86px;
      font-size: 19px;
      font-weight: 900;
      line-height: 1;
      text-align: center;
    }

    .fluency-ring span {
      margin-top: 3px;
      color: var(--text-2);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .fluency-ring small {
      margin-top: 4px;
      color: var(--text-3);
      font-size: 10.5px;
      font-weight: 800;
      line-height: 1.15;
      text-align: center;
      max-width: 86px;
    }

    .skill-map {
      margin-top: 6px;
    }

    .skill-row {
      padding: 11px 0;
      border-bottom: 1px solid var(--hairline);
    }

    .skill-row:last-child {
      border-bottom: 0;
    }

    .skill-row > div:first-child {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 7px;
    }

    .skill-row strong {
      color: var(--text);
      font-size: 15px;
      font-weight: 800;
    }

    .skill-row span {
      color: var(--accent-deep);
      font-size: 12px;
      font-weight: 800;
      text-align: right;
    }

    .skill-track {
      width: 100%;
      height: 11px;
      overflow: hidden;
      border-radius: 999px;
      background: var(--tint);
      box-shadow: inset 0 1px 0 var(--ledge);
    }

    .skill-track span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: var(--accent);
    }

    .skill-row.needs-data span {
      color: var(--text-3);
    }

    .skill-row.needs-data .skill-track span {
      background: var(--border);
    }

    .journal-insight-summary {
      color: var(--text-2);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.35;
    }

    .journal-insight-section {
      margin-top: 14px;
    }

    .journal-insight-section h3 {
      color: var(--text);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0;
      margin: 0 0 8px;
    }

    .journal-insight-list {
      display: grid;
      gap: 7px;
    }

    .journal-insight-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 9px 10px;
      border: 1px solid var(--hairline);
      border-radius: 12px;
      background: var(--tint);
    }

    .journal-insight-row span {
      min-width: 0;
      color: var(--text);
      font-size: 13px;
      font-weight: 750;
      line-height: 1.25;
    }

    .journal-insight-row em {
      min-width: 28px;
      border-radius: 999px;
      background: var(--card);
      color: var(--accent-deep);
      padding: 3px 8px;
      font-size: 12px;
      font-style: normal;
      font-weight: 900;
      text-align: center;
    }

    .journal-insight-empty {
      color: var(--text-3);
      font-size: 12.5px;
      font-weight: 700;
      line-height: 1.35;
      margin: 0;
    }

    .profile-columns {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .profile-list ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 12px;
    }

    .profile-list li {
      border-radius: 12px;
      background: var(--tint);
      color: var(--text);
      padding: 9px 10px;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.25;
    }

    .bottom-tab-nav {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 80;
      display: flex;
      align-items: stretch;
      gap: 0;
      width: 100%;
      padding: 9px 8px calc(22px + env(safe-area-inset-bottom));
      border-top: 2px solid var(--hairline);
      background: var(--card-hover);
      box-shadow: 0 -6px 24px rgba(58,43,34,0.10);
    }

    .bottom-tab-btn {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-height: 60px;
      min-width: 0;
      border: 0;
      background: transparent;
      border-radius: 18px;
      color: var(--text-3);
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
      padding: 6px 2px;
      transition: background var(--speed), color var(--speed), transform var(--speed);
    }

    .bottom-tab-btn:active {
      transform: scale(0.96);
    }

    .bottom-tab-icon {
      display: grid;
      place-items: center;
      width: 60px;
      height: 42px;
      border-radius: 15px;
      background: transparent;
      box-shadow: none;
      opacity: 0.72;
      transition: background var(--speed), box-shadow var(--speed), opacity var(--speed);
    }

    .home-icon { color: var(--gold); }
    .home-icon svg path { fill: var(--gold); stroke: var(--gold-deep); }
    .home-icon svg rect { fill: #fff; stroke: #fff; }
    .punto-icon {
      width: 60px;
      height: 42px;
      margin-top: 0;
      background: transparent;
      box-shadow: none;
    }
    .roadmap-icon {
      color: var(--correct-deep);
    }

    .bottom-tab-btn.is-active {
      background: var(--accent-soft);
      color: var(--accent-deep);
      box-shadow: inset 0 0 0 2px rgba(242,100,48,0.36), 0 3px 0 rgba(200,69,27,0.16);
    }

    .bottom-tab-btn.is-active .bottom-tab-icon {
      background: transparent;
      box-shadow: none;
      opacity: 1;
    }

    .bottom-tab-btn[data-tab-screen="home"].is-active {
      background: #FFEFCF;
      color: var(--gold-deep);
      box-shadow: inset 0 0 0 2px rgba(255,176,46,0.42), 0 3px 0 rgba(217,138,0,0.16);
    }

    .bottom-tab-btn[data-tab-screen="home"].is-active .bottom-tab-icon {
      background: transparent;
      box-shadow: none;
    }

    .bottom-tab-btn[data-tab-screen="my-spanish"].is-active {
      background: #D4F4EC;
      color: var(--correct-deep);
      box-shadow: inset 0 0 0 2px rgba(23,184,154,0.38), 0 3px 0 rgba(14,141,119,0.14);
    }

    .bottom-tab-btn[data-tab-screen="my-spanish"].is-active .bottom-tab-icon {
      background: transparent;
      box-shadow: none;
    }

    @media (min-width: 640px) {
      .bottom-tab-nav {
        left: 50%;
        right: auto;
        width: min(540px, 100%);
        transform: translateX(-50%);
        border-left: 2px solid #F0E4CE;
        border-right: 2px solid #F0E4CE;
        border-radius: 22px 22px 0 0;
      }
    }

    @media (max-width: 360px) {
      .profile-columns {
        grid-template-columns: 1fr;
      }

      .focus-timeline div {
        grid-template-columns: 72px minmax(0, 1fr);
      }

      .my-spanish-hero {
        align-items: center;
      }

      .fluency-ring {
        flex-basis: 88px;
        min-height: 88px;
      }
    }

    /* ============================================================
       DAILY STORY
       ============================================================ */
    #daily-story-screen {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      padding-bottom: calc(32px + env(safe-area-inset-bottom));
    }

    .story-body {
      max-width: 640px;
      width: 100%;
      margin: 0 auto;
      padding: 18px 20px 0;
    }

    .story-title {
      font-size: 26px;
      font-weight: 700;
      letter-spacing: -0.025em;
      color: var(--text);
      line-height: 1.18;
      margin: 14px 0 18px;
    }

    .story-section {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 16px 18px;
      margin-bottom: 12px;
    }

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

    .story-text {
      font-size: 16px;
      line-height: 1.62;
      color: var(--text);
    }

    .story-text.muted {
      color: var(--text-2);
    }

    .story-transcript-panel {
      padding: 0;
    }

    .story-transcript-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 50px;
      padding: 16px 18px;
      color: var(--text);
      cursor: pointer;
      font-size: 14px;
      font-weight: 700;
      list-style: none;
    }

    .story-transcript-summary::-webkit-details-marker {
      display: none;
    }

    .story-transcript-summary::after {
      content: "›";
      color: var(--text-3);
      font-size: 22px;
      font-weight: 500;
      line-height: 1;
      transform: rotate(90deg);
      transition: transform 160ms ease;
    }

    .story-transcript-panel[open] .story-transcript-summary {
      border-bottom: 1px solid var(--hairline);
    }

    .story-transcript-panel[open] .story-transcript-summary::after {
      transform: rotate(-90deg);
    }

    .story-transcript-panel .story-text {
      padding: 14px 18px 16px;
    }

    .story-transcript-hide {
      display: none;
    }

    .story-transcript-panel[open] .story-transcript-show {
      display: none;
    }

    .story-transcript-panel[open] .story-transcript-hide {
      display: inline;
    }

    .story-audio-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }

    .story-audio-play-btn,
    .story-speed-btn {
      border: 1px solid var(--hairline);
      border-radius: 8px;
      background: var(--bg);
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
      line-height: 1;
      min-height: 34px;
      padding: 9px 12px;
    }

    .story-audio-play-btn {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
      min-width: 82px;
    }

    .story-audio-play-btn:disabled {
      opacity: 0.72;
    }

    .story-speed-group {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .story-speed-label {
      color: var(--text-3);
      font-size: 12px;
      font-weight: 700;
    }

    .story-speed-btn.is-active {
      background: var(--accent-soft);
      border-color: transparent;
      color: var(--accent);
    }

    .story-audio-play-btn:active,
    .story-speed-btn:active {
      transform: scale(0.97);
    }

    .story-audio-status {
      min-height: 18px;
      color: var(--text-3);
      font-size: 12px;
      font-weight: 700;
      margin: -2px 0 8px;
    }

    .story-audio-status.is-error {
      color: var(--incorrect);
    }

    .story-list {
      display: flex;
      flex-direction: column;
      gap: 9px;
      padding-left: 20px;
      color: var(--text);
      font-size: 15px;
      line-height: 1.5;
    }

    .story-list li::marker {
      color: var(--accent);
      font-weight: 700;
    }

    .story-chunks {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .story-chunk {
      background: var(--bg);
      border: 1px solid var(--hairline);
      border-radius: 10px;
      padding: 10px 12px;
    }

    .story-chunk-text {
      color: var(--accent);
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .story-chunk-meaning {
      color: var(--text-2);
      font-size: 13px;
      line-height: 1.45;
    }

    .story-chunk-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
      min-height: 28px;
    }

    .story-chunk-save {
      border: 1px solid var(--hairline);
      border-radius: 8px;
      background: var(--card);
      color: var(--accent);
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      padding: 7px 10px;
    }

    .story-chunk-save:active {
      transform: scale(0.97);
    }

    .story-chunk-save-status {
      color: var(--ok);
      font-size: 12px;
      font-weight: 700;
    }

    .story-chunk-save-status.is-error {
      color: var(--text-3);
    }

    .story-new-btn {
      width: 100%;
      border: none;
      border-radius: 12px;
      background: var(--accent);
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      padding: 14px 16px;
      margin-top: 6px;
      box-shadow: var(--shadow);
    }

    .story-new-btn:active {
      transform: scale(0.985);
    }

    /* ============================================================
       MODE CHOICE SCREEN
       ============================================================ */
    #mode-choice-screen {
      flex: 1; display: flex; flex-direction: column;
      overflow-y: auto;
      padding-bottom: calc(32px + env(safe-area-inset-bottom));
    }

    .mode-choice-body {
      max-width: 540px; width: 100%; margin: 0 auto;
      padding: 18px 20px 0;
    }

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

    .mode-choice-subtitle {
      font-size: 14px; color: var(--text-2);
      line-height: 1.5; margin: 0 0 22px;
    }

    .add-chunk-panel {
      margin-top: 18px;
    }

    .add-chunk-toggle,
    .add-chunk-save {
      width: 100%;
      border: none;
      border-radius: var(--radius);
      font-family: var(--font);
      font-weight: 700;
      transition: opacity var(--speed), transform 0.1s ease;
    }

    .add-chunk-toggle {
      padding: 15px;
      font-size: 15px;
      color: var(--accent);
      background: var(--accent-soft);
    }

    .add-chunk-save {
      padding: 16px;
      font-size: 16px;
      color: #fff;
      background: var(--accent);
    }

    .add-chunk-toggle:active,
    .add-chunk-save:active {
      opacity: 0.85;
      transform: scale(0.985);
    }

    .add-chunk-form {
      margin-top: 12px;
      padding: 14px;
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .add-chunk-field {
      display: block;
      margin-bottom: 12px;
    }

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

    .add-chunk-field input,
    .add-chunk-field select {
      width: 100%;
      padding: 12px 13px;
      font-size: 16px;
      font-family: var(--font);
      color: var(--text);
      background: var(--bg);
      border: 1.5px solid var(--hairline);
      border-radius: 10px;
      outline: none;
      -webkit-appearance: none;
      transition: border-color var(--speed);
    }

    .add-chunk-field input:focus,
    .add-chunk-field select:focus {
      border-color: var(--accent);
    }

    .add-chunk-status {
      min-height: 18px;
      margin-top: 10px;
      font-size: 13px;
      color: var(--correct);
      text-align: center;
    }

    .add-chunk-status.is-error {
      color: var(--incorrect);
    }

    .add-chunk-note,
    .saved-chunks-empty-note {
      margin: 10px 0 0;
      font-size: 13px;
      line-height: 1.45;
      color: var(--text-3);
      text-align: center;
    }

    .saved-chunks-empty-note {
      padding: 0 4px;
    }

    .smart-chunks-suggestions {
      margin-top: 14px;
      padding: 14px;
      background: var(--card);
      border: 1px solid var(--hairline);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .smart-chunks-header h3 {
      margin: 0;
      font-size: 14px;
      line-height: 1.25;
      color: var(--text);
    }

    .smart-chunks-header p {
      margin: 4px 0 0;
      font-size: 12px;
      line-height: 1.35;
      color: var(--text-3);
    }

    .smart-chunks-list {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }

    .smart-chunk-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 11px;
      background: var(--bg);
      border: 1px solid var(--hairline);
      border-radius: 10px;
    }

    .smart-chunk-body {
      min-width: 0;
    }

    .smart-chunk-spanish {
      font-size: 15px;
      font-weight: 700;
      line-height: 1.25;
      color: var(--text);
      overflow-wrap: anywhere;
    }

    .smart-chunk-english {
      margin-top: 3px;
      font-size: 13px;
      line-height: 1.35;
      color: var(--text-2);
      overflow-wrap: anywhere;
    }

    .smart-chunk-chip {
      display: inline-flex;
      max-width: 100%;
      margin-top: 7px;
      padding: 4px 7px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.1;
    }

    .smart-chunk-actions {
      display: grid;
      gap: 6px;
      width: 74px;
    }

    .smart-chunk-add,
    .smart-chunk-practise {
      width: 100%;
      min-height: 32px;
      border: none;
      border-radius: 8px;
      font-family: var(--font);
      font-size: 12px;
      font-weight: 700;
      transition: opacity var(--speed), transform 0.1s ease;
    }

    .smart-chunk-add {
      color: #fff;
      background: var(--accent);
    }

    .smart-chunk-practise {
      color: var(--accent);
      background: var(--accent-soft);
    }

    .smart-chunk-add:active,
    .smart-chunk-practise:active {
      opacity: 0.85;
      transform: scale(0.97);
    }

    .smart-chunk-item.is-added {
      opacity: 0.72;
    }

    .archive-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 14px;
      padding: 12px 0 0;
      border-top: 1px solid var(--hairline);
      color: var(--text-2);
      font-size: 14px;
      line-height: 1.35;
      cursor: pointer;
    }

    .archive-toggle input[type="checkbox"] {
      -webkit-appearance: none;
      appearance: none;
      width: 44px;
      height: 26px;
      border-radius: 13px;
      background: var(--text-3);
      flex-shrink: 0;
      position: relative;
      cursor: pointer;
      transition: background var(--speed);
    }

    .archive-toggle input[type="checkbox"]::after {
      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 var(--speed);
    }

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

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

    /* ============================================================
       LANGUAGE ISLANDS
       ============================================================ */
    #islands-screen {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      padding-bottom: calc(32px + env(safe-area-inset-bottom));
    }

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

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

    .islands-subtitle {
      font-size: 14px;
      color: var(--text-2);
      line-height: 1.5;
      margin: 0 0 18px;
    }

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

    .island-add-panel {
      margin-top: 18px;
    }

    .island-count {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-3);
      margin-top: 4px;
    }

    .island-assignment-panel {
      margin: 8px 0 14px;
      border-top: 1px solid var(--hairline);
      padding-top: 10px;
    }

    .island-assignment-panel summary {
      color: var(--text-2);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      list-style: none;
    }

    .island-assignment-panel summary::-webkit-details-marker {
      display: none;
    }

    .island-assignment-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 10px;
    }

    .island-assignment-option {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text-2);
      font-size: 13px;
      font-weight: 650;
      padding: 8px 10px;
      background: var(--bg);
      border-radius: 10px;
    }

    .island-assignment-status {
      min-height: 18px;
      margin-top: 8px;
      color: var(--text-3);
      font-size: 12px;
      font-weight: 650;
    }

    /* ============================================================
       FLUENCY MISSIONS
       ============================================================ */
    #missions-screen {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      padding-bottom: calc(32px + env(safe-area-inset-bottom));
    }

    .missions-body {
      max-width: 720px;
      width: 100%;
      margin: 0 auto;
      padding: 18px 20px 0;
    }

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

    .missions-subtitle {
      font-size: 14px;
      color: var(--text-2);
      line-height: 1.5;
      margin: 0 0 18px;
    }

    .missions-week {
      display: flex;
      align-items: stretch;
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .missions-week-item {
      flex: 1;
      padding: 14px 12px;
      text-align: center;
    }

    .missions-week-value {
      font-size: 22px;
      font-weight: 750;
      color: var(--text);
    }

    .missions-week-label {
      margin-top: 3px;
      font-size: 12px;
      font-weight: 650;
      color: var(--text-3);
    }

    .missions-week-sep {
      width: 1px;
      background: var(--hairline);
    }

    .missions-latest {
      margin: 10px 2px 18px;
      font-size: 13px;
      line-height: 1.45;
      color: var(--text-2);
    }

    .mission-layout {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: 14px;
      align-items: start;
    }

    .mission-groups,
    .mission-chunks {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

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

    .mission-group-title {
      margin: 8px 2px 0;
      font-size: 12px;
      font-weight: 750;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--text-3);
    }

    .mission-row {
      width: 100%;
      border: none;
      border-radius: 12px;
      background: var(--card);
      box-shadow: var(--shadow);
      color: var(--text);
      text-align: left;
      padding: 12px;
    }

    .mission-row.is-active {
      outline: 2px solid var(--accent-soft);
    }

    .mission-row-title {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
    }

    .mission-row-status {
      margin-top: 6px;
      font-size: 12px;
      font-weight: 700;
      color: var(--text-3);
    }

    .mission-row-status.status-tried {
      color: var(--almost);
    }

    .mission-row-status.status-completed {
      color: var(--correct);
    }

    .mission-detail {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 16px;
    }

    .mission-detail-empty {
      color: var(--text-2);
      font-size: 14px;
      line-height: 1.45;
    }

    .mission-detail-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }

    .mission-detail-group,
    .mission-section-label {
      font-size: 11px;
      font-weight: 750;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--text-3);
    }

    .mission-detail-title {
      margin-top: 4px;
      font-size: 20px;
      line-height: 1.25;
      color: var(--text);
    }

    .mission-status-select,
    .mission-reflection-field input,
    .mission-reflection-field select,
    .mission-reflection-field textarea {
      width: 100%;
      border: 1.5px solid var(--hairline);
      border-radius: 10px;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      font-size: 16px; /* PR4: was 15px — 16px avoids iOS Safari zoom-on-focus */
      outline: none;
      transition: border-color var(--speed);
    }

    .mission-status-select {
      max-width: 136px;
      padding: 10px;
      flex-shrink: 0;
    }

    .mission-reflection-field input,
    .mission-reflection-field select {
      padding: 12px;
    }

    .mission-reflection-field textarea {
      min-height: 76px;
      padding: 12px;
      resize: vertical;
    }

    .mission-status-select:focus,
    .mission-reflection-field input:focus,
    .mission-reflection-field select:focus,
    .mission-reflection-field textarea:focus {
      border-color: var(--accent);
    }

    .mission-section {
      border-top: 1px solid var(--hairline);
      padding-top: 14px;
      margin-top: 14px;
    }

    .mission-situation {
      margin-top: 7px;
      font-size: 14px;
      line-height: 1.5;
      color: var(--text-2);
    }

    .mission-chunk {
      padding: 12px;
      border-radius: 12px;
      background: var(--bg);
    }

    .mission-chunk-spanish {
      font-size: 15px;
      font-weight: 750;
      line-height: 1.35;
      color: var(--text);
    }

    .mission-chunk-english {
      margin-top: 4px;
      font-size: 13px;
      line-height: 1.35;
      color: var(--text-2);
    }

    .mission-reflection-field {
      display: block;
      margin-top: 12px;
    }

    .mission-reflection-field span {
      display: block;
      margin-bottom: 7px;
      font-size: 12px;
      font-weight: 700;
      color: var(--text-2);
    }

    .mission-primary-btn,
    .mission-secondary-btn {
      width: 100%;
      margin-top: 12px;
      border: none;
      border-radius: var(--radius);
      padding: 14px;
      font-family: var(--font);
      font-size: 15px;
      font-weight: 750;
      transition: opacity var(--speed), transform 0.1s ease;
    }

    .mission-primary-btn {
      color: #fff;
      background: var(--accent);
    }

    .mission-secondary-btn {
      color: var(--accent);
      background: var(--accent-soft);
    }

    .mission-primary-btn:active,
    .mission-secondary-btn:active {
      opacity: 0.85;
      transform: scale(0.985);
    }

    .mission-status-text {
      min-height: 18px;
      margin-top: 9px;
      font-size: 13px;
      color: var(--correct);
      text-align: center;
    }

    .mission-status-text.is-error {
      color: var(--incorrect);
    }

    @media (max-width: 760px) {
      .mission-layout {
        grid-template-columns: 1fr;
      }

      .mission-detail {
        padding: 15px;
      }
    }

    body[data-mode="chunks"]       { --accent:#37A8E8; --accent-deep:#1E7FBA; --accent-soft:#D8EEFB; }
    body[data-mode="conversation"] { --accent:#F26430; --accent-deep:#C8451B; --accent-soft:#FFE6D8; }
    body[data-mode="conjugation"]  { --accent:#9B5DE5; --accent-deep:#7A3FC4; --accent-soft:#EADFFB; }
    body[data-mode="listening"]    { --accent:#37A8E8; --accent-deep:#1E7FBA; --accent-soft:#D8EEFB; }
    body[data-mode="journal"]      { --accent:#FFB02E; --accent-deep:#D98A00; --accent-soft:#FFEFCF; }
    body[data-mode="islands"]      { --accent:#17B89A; --accent-deep:#0E8D77; --accent-soft:#D4F4EC; }
    body[data-mode="missions"]     { --accent:#9B5DE5; --accent-deep:#7A3FC4; --accent-soft:#EADFFB; }
    body[data-mode="story"]        { --accent:#F26430; --accent-deep:#C8451B; --accent-soft:#FFE6D8; }
    body[data-mode="learn"]        { --accent:#FFB02E; --accent-deep:#D98A00; --accent-soft:#FFEFCF; }
    body[data-mode="speaking"]     { --accent:#F26430; --accent-deep:#C8451B; --accent-soft:#FFE6D8; }

    /* ============================================================
       LISTENING CHALLENGE SCREEN
       ============================================================ */
    #listening-screen {
      flex: 1; display: flex; flex-direction: column;
      overflow-y: auto;
      padding-bottom: calc(32px + env(safe-area-inset-bottom));
    }

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

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

    .listening-stats {
      display: flex; align-items: center;
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 12px 16px;
      margin-bottom: 14px;
    }

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

    .listening-stat-value {
      font-size: 20px; font-weight: 700;
      color: var(--accent); line-height: 1.2;
    }

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

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

    .listening-card {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px;
      min-height: 156px;
      margin-bottom: 16px;
    }

    .listening-card-topline {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px;
    }

    #listening-srs-dots {
      display: flex;
      gap: 4px;
      margin-top: 8px;
    }

    .listening-empty-state {
      border-top: 1px solid var(--hairline);
      padding-top: 16px;
      color: var(--text-2);
      font-size: 15px;
      font-weight: 600;
      line-height: 1.45;
    }

    .listening-empty-state[hidden] {
      display: none;
    }

    .listening-placeholder-label {
      font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.09em;
      color: var(--text-3); margin-bottom: 8px;
    }

    .listening-item-meta,
    .listening-prompt-state {
      font-size: 17px; font-weight: 600;
      line-height: 1.45; color: var(--text);
    }

    .listening-task-panel {
      border-top: 1px solid var(--hairline);
      margin-top: 16px;
      padding-top: 16px;
    }

    .listening-task-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-3);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 8px;
    }

    .listening-task-prompt {
      font-size: 16px;
      font-weight: 600;
      line-height: 1.5;
      color: var(--text);
      margin-bottom: 12px;
    }

    .listening-meaning-options {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* Due-review session (Phase 2 PR2): conjugation subtitle + listening
       audio/multiple-choice area. Reuses .listening-option-btn/
       .listening-meaning-options and .punto-secondary-row-btn as-is. */
    .due-review-subtitle {
      font-size: 13px;
      color: var(--text-2);
      margin: -4px 0 4px;
    }

    .due-review-listening-area {
      margin: 12px 0;
    }

    .due-review-audio-status {
      font-size: 12px;
      color: var(--text-3);
      text-align: center;
      min-height: 16px;
      margin: 6px 0 10px;
    }

    .listening-option-btn {
      width: 100%;
      border: 1px solid var(--hairline);
      border-radius: 12px;
      background: var(--bg);
      color: var(--text);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.45;
      padding: 12px;
      text-align: left;
    }

    .listening-option-btn.correct {
      border-color: rgba(22,163,74,0.28);
      background: var(--correct-bg);
      color: var(--correct);
    }

    .listening-option-btn.incorrect {
      border-color: rgba(220,38,38,0.28);
      background: var(--incorrect-bg);
      color: var(--incorrect);
    }

    .listening-written-answer {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }

    #listening-answer-input {
      width: 100%;
      border: 1px solid var(--hairline);
      border-radius: 12px;
      background: var(--bg);
      color: var(--text);
      font: 600 16px/1.3 var(--font); /* PR4: was 15px — 16px avoids iOS Safari zoom-on-focus */
      padding: 13px 14px;
    }

    #listening-answer-input::placeholder {
      color: var(--text-3);
    }

    .listening-feedback {
      min-height: 20px;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.4;
      color: var(--text-3);
      margin-top: 10px;
    }

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

    .listening-star-btn {
      border: 1px solid var(--hairline);
      border-radius: 999px;
      background: var(--bg);
      color: var(--text-2);
      font-size: 13px;
      font-weight: 700;
      padding: 8px 12px;
      flex-shrink: 0;
    }

    .listening-star-btn:disabled,
    .listening-action-btn:disabled,
    .listening-option-btn:disabled {
      cursor: default;
    }

    .listening-star-btn.starred {
      color: var(--star-color);
      background: var(--accent-soft);
    }

    .listening-reveal {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .listening-reveal[hidden],
    .listening-prompt-state[hidden] {
      display: none;
    }

    .listening-reveal-section {
      border-top: 1px solid var(--hairline);
      padding-top: 14px;
    }

    .listening-reveal-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-3);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 8px;
    }

    .listening-reveal-section p {
      font-size: 16px;
      line-height: 1.55;
      color: var(--text);
    }

    .listening-chunks {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .listening-chunk {
      background: var(--bg);
      border: 1px solid var(--hairline);
      border-radius: 10px;
      padding: 10px 12px;
    }

    .listening-chunk-text {
      font-size: 15px;
      font-weight: 700;
      color: var(--accent);
      margin-bottom: 4px;
    }

    .listening-chunk-explanation {
      font-size: 13px;
      line-height: 1.45;
      color: var(--text-2);
    }

    .listening-action-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin-top: 18px;
    }

    .listening-playback-group {
      display: grid;
      grid-template-columns: 1.15fr repeat(3, minmax(0, 0.8fr));
      gap: 8px;
    }

    .listening-action-btn {
      border: none;
      border-radius: 12px;
      background: var(--bg);
      color: var(--text);
      font-size: 15px;
      font-weight: 700;
      padding: 13px 14px;
    }

    .listening-action-btn.primary {
      background: var(--accent);
      color: #fff;
    }

    .listening-speed-btn.is-active {
      background: var(--accent-soft);
      color: var(--accent);
    }

    .listening-action-btn:disabled {
      color: var(--text-3);
      opacity: 0.65;
      cursor: default;
    }

    .listening-audio-status {
      min-height: 18px;
      color: var(--text-3);
      font-size: 12px;
      font-weight: 600;
      margin-top: 10px;
    }

    .listening-settings {
      background: var(--card);
      border: 1px solid var(--hairline);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 0;
      margin-bottom: 14px;
    }

    .listening-settings-summary {
      align-items: center;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      list-style: none;
      padding: 14px;
      user-select: none;
    }

    .listening-settings-summary::-webkit-details-marker {
      display: none;
    }

    .listening-settings-summary::after {
      color: var(--text-3);
      content: "›";
      font-size: 20px;
      line-height: 1;
      transform: rotate(90deg);
      transition: transform 0.16s ease;
    }

    .listening-settings[open] .listening-settings-summary::after {
      transform: rotate(-90deg);
    }

    .listening-settings-summary span,
    .listening-settings-subtitle {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-3);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .listening-settings-subtitle {
      margin-bottom: 10px;
    }

    .listening-settings-content {
      border-top: 1px solid var(--hairline);
      padding: 14px;
    }

    .listening-cache-panel {
      margin-top: 14px;
    }

    .listening-premium-label {
      display: inline-flex;
      width: fit-content;
      margin-top: 8px;
      padding: 5px 8px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent);
      font-size: 12px;
      font-weight: 700;
    }

    .listening-cache-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .listening-cache-btn {
      border: none;
      border-radius: 10px;
      background: var(--bg);
      color: var(--text);
      font-size: 14px;
      font-weight: 700;
      padding: 11px 12px;
      text-align: left;
    }

    .listening-cache-btn:disabled {
      color: var(--text-3);
      cursor: default;
      opacity: 0.7;
    }

    .listening-cache-progress {
      min-height: 18px;
      color: var(--text-3);
      font-size: 12px;
      font-weight: 600;
      margin-top: 10px;
    }

    .listening-controls {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 14px;
    }

    .listening-control {
      display: flex;
      flex-direction: column;
      gap: 7px;
      padding: 12px;
      background: var(--card);
      border: 1px solid var(--hairline);
      border-radius: 12px;
    }

    .listening-control span {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-3);
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }

    .listening-control select {
      width: 100%;
      border: 1px solid var(--hairline);
      border-radius: 10px;
      background: var(--bg);
      color: var(--text);
      font: 600 15px/1.2 var(--font);
      padding: 11px 12px;
    }

    @media (min-width: 520px) {
      .listening-controls {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .listening-action-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .listening-cache-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    /* ============================================================
       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;
      min-height: 52px;
      padding: 6px 10px 6px 8px;
      border-bottom: 1px solid var(--hairline);
      background: var(--bg);
      position: sticky; top: 0; z-index: 10; gap: 4px;
    }

    .nav-back-btn {
      width: 44px; height: 44px;
      background: none; border: none;
      color: var(--text); font-size: 0; font-weight: 500;
      padding: 0; border-radius: 12px;
      display: flex; align-items: center; gap: 4px;
      flex-shrink: 0; font-family: var(--font);
      transition: opacity var(--speed), background var(--speed);
      overflow: hidden;
    }

    .nav-back-btn::before {
      content: "";
      width: 11px;
      height: 11px;
      border-left: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg);
      margin-left: 18px;
    }

    .nav-back-btn:active {
      opacity: 0.7;
      background: var(--accent-soft);
    }

    .screen-nav-title {
      flex: 1; font-size: 11.5px; font-weight: 700;
      color: var(--accent); text-align: left;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .screen-nav-title::before {
      content: "Punto › ";
      color: var(--text-3);
    }

    #mode-choice-screen .screen-nav-title::before,
    #islands-screen .screen-nav-title::before,
    #missions-screen .screen-nav-title::before,
    #listening-screen .screen-nav-title::before,
    #daily-story-screen .screen-nav-title::before,
    #daily-journal-screen .screen-nav-title::before,
    #tense-screen .screen-nav-title::before {
      content: "Punto › ";
    }

    #learn-screen .screen-nav-title::before {
      content: "Punto › Learn › ";
    }

    #shadow-screen .screen-nav-title::before {
      content: "Punto › Mode › ";
    }

    .screen-nav .home-header-btn {
      width: 34px;
      height: 34px;
      flex-shrink: 0;
    }

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

    .tense-landing {
      padding: 4px 4px 12px;
    }

    .tense-eyebrow {
      color: var(--accent);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .tense-title {
      color: var(--text);
      font-size: 29px;
      font-weight: 650;
      letter-spacing: -0.026em;
      line-height: 1.12;
    }

    .tense-subtitle {
      color: var(--text-2);
      font-size: 14.5px;
      line-height: 1.45;
      margin-top: 9px;
      max-width: 350px;
    }

    .tense-quick-start {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      margin: 6px 0 18px;
      padding: 15px 17px;
      border: 1px solid var(--accent-line);
      border-radius: 16px;
      background: var(--accent-soft);
      color: var(--accent);
      text-align: left;
      font-family: var(--font);
    }

    .tense-quick-start-icon {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--accent-soft);
      flex-shrink: 0;
    }

    .tense-quick-start-title {
      color: var(--accent);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }

    .tense-quick-start-sub {
      color: var(--accent);
      opacity: 0.78;
      font-size: 13px;
      margin-top: 2px;
    }

    .tense-timeline {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .tense-group {
      display: flex;
      gap: 14px;
    }

    .tense-rail {
      width: 16px;
      flex: 0 0 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 4px;
    }

    .tense-rail-dot {
      width: 14px;
      height: 14px;
      border-radius: 999px;
      border: 2px solid var(--accent);
      background: var(--bg);
      box-shadow: 0 0 0 3px var(--bg);
    }

    .tense-rail-line {
      width: 2px;
      flex: 1;
      min-height: 24px;
      margin-top: 5px;
      background: var(--accent-line);
    }

    .tense-group-body {
      min-width: 0;
      flex: 1;
      padding-bottom: 22px;
    }

    .tense-group:last-child .tense-group-body {
      padding-bottom: 0;
    }

    .tense-group-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    .tense-group-title {
      color: var(--text);
      font-size: 16.5px;
      font-weight: 700;
      letter-spacing: -0.015em;
    }

    .tense-group-desc {
      color: var(--text-2);
      font-size: 12.5px;
      line-height: 1.35;
      margin-top: 2px;
    }

    .tense-group-card {
      overflow: hidden;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: var(--shadow);
    }

    .tense-btn {
      display: flex; align-items: center; gap: 12px;
      width: 100%; padding: 14px 15px;
      background: transparent; border: none;
      border-radius: 0; box-shadow: none;
      text-align: left; font-family: var(--font);
      transition: transform var(--speed), background var(--speed);
      min-height: 64px;
    }

    .tense-btn + .tense-btn {
      border-top: 1px solid var(--hairline);
    }

    .tense-btn:active { transform: scale(0.992); background: var(--card-hover); }

    .tense-btn-body {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      flex: 1;
      min-width: 0;
      gap: 3px;
    }

    .tense-btn-name   {
      display: block;
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

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

    .tense-btn-meta {
      color: var(--text-3);
      font-size: 12px;
      white-space: nowrap;
      flex-shrink: 0;
      margin-left: auto;
    }

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

    /* ============================================================
       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; }

    /* ============================================================
       VERB LIBRARY
       ============================================================ */
    #verb-library-screen {
      flex: 1; display: flex; flex-direction: column;
      overflow-y: auto;
      padding-bottom: calc(40px + env(safe-area-inset-bottom));
      -webkit-overflow-scrolling: touch;
    }

    #verb-library-screen .screen-nav-title::before {
      content: "Punto › Drill › ";
    }

    .verb-library-body {
      max-width: 540px; width: 100%; margin: 0 auto;
      padding: 18px 20px 0;
    }

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

    .verb-library-subtitle {
      font-size: 14px; color: var(--text-2);
      line-height: 1.5; margin: 0 auto 18px;
      max-width: 390px; text-align: center;
    }

    .verb-library-search {
      display: block;
      max-width: 420px;
      margin: 0 auto 12px;
    }

    .verb-library-search input {
      width: 100%;
      min-height: 48px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--card);
      color: var(--text);
      font-family: var(--font);
      font-size: 16px;
      padding: 0 16px;
      box-shadow: var(--shadow);
      outline: none;
      -webkit-appearance: none;
    }

    .verb-library-search input:focus {
      border-color: var(--accent-line);
    }

    .verb-library-count {
      color: var(--text-3);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-align: center;
      margin: 14px 0 12px;
    }

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

    .verb-card {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--card);
      box-shadow: var(--shadow);
      padding: 16px 18px;
      text-align: left;
      font-family: var(--font);
      transition: transform var(--speed), background var(--speed);
    }

    .verb-card:active {
      transform: scale(0.992);
      background: var(--card-hover);
    }

    .verb-card-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 4px;
    }

    .verb-card-infinitive {
      color: var(--text);
      font-size: 19px;
      font-weight: 700;
      line-height: 1.2;
    }

    .verb-card-group {
      color: var(--accent);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .verb-card-meaning {
      color: var(--text);
      font-size: 14.5px;
      font-weight: 600;
      line-height: 1.35;
      margin-bottom: 5px;
    }

    .verb-card-context {
      color: var(--text-2);
      font-size: 13.5px;
      line-height: 1.45;
    }

    .verb-library-empty {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      color: var(--text-2);
      font-size: 14px;
      line-height: 1.5;
      padding: 18px;
      text-align: center;
    }

    .verb-detail-back {
      border: none;
      background: var(--accent-soft);
      color: var(--accent);
      border-radius: 12px;
      min-height: 40px;
      padding: 0 14px;
      font-family: var(--font);
      font-size: 13px;
      font-weight: 700;
      margin: 0 0 14px;
    }

    .verb-detail-title {
      color: var(--text);
      font-size: 28px;
      font-weight: 750;
      letter-spacing: -0.025em;
      line-height: 1.12;
      margin-bottom: 5px;
    }

    .verb-detail-meaning {
      color: var(--accent);
      font-size: 16px;
      font-weight: 650;
      line-height: 1.35;
      margin-bottom: 12px;
    }

    .verb-detail-context {
      color: var(--text-2);
      font-size: 15px;
      line-height: 1.55;
      margin-bottom: 24px;
    }

    .verb-detail-section {
      margin-bottom: 24px;
    }

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

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

    .verb-detail-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .verb-detail-list li {
      color: var(--text);
      font-size: 14.5px;
      line-height: 1.5;
    }

    .verb-detail-example + .verb-detail-example {
      border-top: 1px solid var(--hairline);
      padding-top: 12px;
      margin-top: 12px;
    }

    .verb-detail-spanish {
      color: var(--text);
      font-size: 15.5px;
      font-weight: 650;
      line-height: 1.45;
    }

    .verb-detail-english {
      color: var(--text-2);
      font-size: 13.5px;
      line-height: 1.45;
      margin-top: 3px;
    }

    .verb-detail-conj {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
    }

    .verb-detail-conj + .verb-detail-conj {
      border-top: 1px solid var(--hairline);
      padding-top: 10px;
      margin-top: 10px;
    }

    .verb-detail-conj-label {
      color: var(--text-2);
      font-size: 12.5px;
      line-height: 1.35;
    }

    .verb-detail-conj-form {
      color: var(--text);
      font-size: 15px;
      font-weight: 700;
      line-height: 1.35;
      text-align: right;
    }

    /* ============================================================
       DAILY JOURNAL
       ============================================================ */
    #daily-journal-screen {
      flex: 1; display: flex; flex-direction: column;
      overflow-y: auto;
      padding-bottom: calc(32px + env(safe-area-inset-bottom));
      -webkit-overflow-scrolling: touch;
    }

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

    .journal-note {
      background: var(--accent-soft);
      border-radius: 12px;
      color: var(--text-2);
      font-size: 14px;
      line-height: 1.5;
      padding: 14px 16px;
      margin-bottom: 18px;
    }

    .journal-sections {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .journal-section {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px;
    }

    .journal-section-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }

    .journal-section-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.25;
    }

    .journal-target {
      font-size: 12px;
      font-weight: 600;
      color: var(--accent);
      margin-top: 4px;
    }

    .journal-hint {
      color: var(--text-2);
      font-size: 13px;
      line-height: 1.45;
      margin-bottom: 16px;
    }

    .journal-prompt {
      display: flex;
      flex-direction: column;
      gap: 8px;
      color: var(--text);
      font-size: 15px;
      font-weight: 600;
      line-height: 1.4;
      margin-top: 16px;
    }

    .journal-prompt:first-of-type { margin-top: 0; }

    .journal-textarea {
      width: 100%;
      min-height: 96px;
      resize: vertical;
      border: 1px solid var(--hairline);
      border-radius: 12px;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      font-size: 16px;
      line-height: 1.5;
      padding: 12px 14px;
      outline: none;
      transition: border-color var(--speed), background var(--speed);
    }

    .journal-textarea:focus {
      border-color: var(--accent);
      background: var(--bg-elev);
    }

    .journal-textarea::placeholder { color: var(--text-3); }

    .journal-refresh-btn {
      width: 100%;
      margin-top: 18px;
      padding: 15px 18px;
      border: none;
      border-radius: 12px;
      background: var(--accent);
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      box-shadow: var(--shadow);
      transition: transform var(--speed), opacity var(--speed);
    }

    .journal-refresh-btn:active {
      transform: scale(0.985);
      opacity: 0.9;
    }

    /* Ending boxes — for ending tables like AR → -aba, -abas… */
    .journal-copy-area {
      margin-top: 18px;
      text-align: center;
    }

    .journal-copy-btn {
      width: 100%;
      padding: 15px 18px;
      border: 1px solid var(--hairline);
      border-radius: 12px;
      background: var(--card);
      color: var(--text);
      font-size: 15px;
      font-weight: 700;
      box-shadow: var(--shadow);
      transition: transform var(--speed), border-color var(--speed), opacity var(--speed);
    }

    .journal-copy-btn:active {
      transform: scale(0.985);
      opacity: 0.9;
    }

    .journal-copy-help {
      color: var(--text-2);
      font-size: 13px;
      line-height: 1.5;
      margin-top: 10px;
    }

    .journal-copy-status {
      min-height: 20px;
      color: var(--text-2);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.4;
      margin-top: 8px;
      opacity: 0;
      transition: opacity var(--speed);
    }

    .journal-copy-status.is-visible {
      opacity: 1;
    }

    .journal-copy-status.is-error {
      color: var(--incorrect);
    }

    .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-card);
      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; }

    /* Conversational Freedom lesson */
    .conversation-section {
      margin-bottom: 28px;
    }

    .conversation-section-intro {
      font-size: 14px;
      line-height: 1.55;
      color: var(--text-2);
      margin: -4px 0 12px;
    }

    .conversation-section-intro strong {
      color: var(--text);
      font-weight: 600;
    }

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

    .conversation-phrase-card {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 15px 17px;
    }

    .conversation-phrase-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 7px;
    }

    .conversation-phrase {
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.25;
    }

    .conversation-meaning {
      font-size: 12px;
      font-weight: 600;
      color: var(--accent);
      text-align: right;
      line-height: 1.3;
    }

    .conversation-usage {
      font-size: 14px;
      line-height: 1.5;
      color: var(--text-2);
      margin: 0 0 10px;
    }

    .conversation-usage strong,
    .conversation-usage em {
      color: var(--text);
      font-style: normal;
      font-weight: 600;
    }

    .conversation-example {
      border-top: 1px solid var(--hairline);
      padding-top: 9px;
      font-size: 14px;
      line-height: 1.45;
      color: var(--text);
      font-weight: 500;
    }

    /* 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); }

    /* ============================================================
       SHADOW MODE
       ============================================================ */
    #shadow-screen {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding-bottom: calc(28px + env(safe-area-inset-bottom));
      max-width: 540px;
      width: 100%;
      margin: 0 auto;
    }

    .shadow-body {
      padding: 18px 20px 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .shadow-card,
    .shadow-settings {
      background: var(--card);
      border: 1px solid var(--hairline);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .shadow-card {
      padding: 18px;
    }

    .shadow-meta {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: var(--text-3);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }

    .shadow-meaning-label {
      color: var(--text-3);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .shadow-meaning {
      font-size: 22px;
      font-weight: 650;
      line-height: 1.35;
      margin-bottom: 18px;
    }

    .shadow-spanish {
      color: var(--accent);
      font-size: 17px;
      font-weight: 650;
      line-height: 1.45;
      margin-bottom: 14px;
    }

    .shadow-status {
      min-height: 20px;
      color: var(--text-2);
      font-size: 13px;
      font-weight: 600;
    }

    .shadow-controls {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr;
      gap: 8px;
    }

    .shadow-progress-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .shadow-action-btn,
    .shadow-setting-btn,
    .shadow-progress-btn {
      border: none;
      border-radius: 12px;
      background: var(--bg);
      color: var(--text);
      font-size: 14px;
      font-weight: 700;
      padding: 13px 12px;
    }

    .shadow-action-btn.primary,
    .shadow-setting-btn.is-active {
      background: var(--accent);
      color: #fff;
    }

    .shadow-progress-btn {
      color: var(--text-2);
      border: 1px solid var(--hairline);
    }

    .shadow-action-btn:disabled {
      color: var(--text-3);
      opacity: 0.65;
      cursor: default;
    }

    .shadow-settings {
      padding: 0;
    }

    .shadow-settings-summary {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 46px;
      padding: 0 16px;
      color: var(--text-2);
      font-size: 13px;
      font-weight: 700;
      list-style: none;
      cursor: pointer;
    }

    .shadow-settings-summary::-webkit-details-marker {
      display: none;
    }

    .shadow-settings-summary::after {
      content: '+';
      color: var(--text-3);
      font-size: 18px;
    }

    .shadow-settings[open] .shadow-settings-summary::after {
      content: '-';
    }

    .shadow-settings-content {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 0 16px 16px;
    }

    .shadow-setting-group {
      display: grid;
      grid-template-columns: 54px repeat(4, minmax(0, 1fr));
      gap: 6px;
      align-items: center;
    }

    .shadow-setting-group[aria-label="Repetitions per sentence"],
    .shadow-setting-group[aria-label="Playback speed"] {
      grid-template-columns: 54px repeat(3, minmax(0, 1fr));
    }

    .shadow-setting-label {
      color: var(--text-3);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    /* ============================================================
       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;
    }

    .sentence-progress-display,
    .shadow-progress-display {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin: 4px 0 14px;
    }

    .progress-row {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text-3);
      font-size: 12px;
      font-weight: 700;
    }

    .progress-dots {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

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

    .progress-dot.filled {
      background: var(--accent);
      border-color: var(--accent);
      opacity: 0.72;
    }

    #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-icon.almost-color::before {
      content: ''; position: absolute; inset: 0;
      border-radius: 50%;
      background: var(--almost-bg); border: 2px solid var(--almost);
      animation: icon-pop 0.22s cubic-bezier(0.34,1.56,0.64,1) both;
    }

    #result-icon.almost-color::after {
      content: '~'; position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 32px; font-weight: 700; line-height: 1;
      color: var(--almost);
      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);   }
    .almost-color    { color: var(--almost);    }
    .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; }

    #conj-hear-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 8px 12px; font-size: 13px; font-weight: 600;
      color: var(--text-2); background: var(--bg-elev);
      border: 1px solid var(--hairline); border-radius: 8px;
      margin: 0 auto 12px; font-family: var(--font);
      transition: opacity var(--speed), transform 0.1s ease;
    }

    #conj-hear-btn:active { opacity: 0.75; transform: scale(0.98); }

    .speaker-icon {
      position: relative; display: inline-block;
      width: 15px; height: 14px; flex: 0 0 auto;
    }

    .speaker-icon::before {
      content: ""; position: absolute; left: 1px; top: 4px;
      width: 5px; height: 6px; background: currentColor;
      border-radius: 1px;
    }

    .speaker-icon::after {
      content: ""; position: absolute; left: 5px; top: 2px;
      width: 8px; height: 10px;
      border: 2px solid currentColor; border-left: 0; border-bottom-color: transparent;
      border-radius: 0 10px 10px 0;
    }

    #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;
    }

    .user-settings-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 16px;
    }

    .user-settings-name {
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 2px;
    }

    .user-settings-note {
      font-size: 12px;
      color: var(--text-3);
      line-height: 1.35;
    }

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

    .category-group-label {
      padding: 12px 0 4px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--text-3);
    }

    .category-group-label:first-child {
      padding-top: 0;
    }

    .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,
    #auth-logout-btn,
    #delete-account-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,
    #auth-logout-btn:active,
    #delete-account-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;
    }

    .verb-settings-group {
      border-bottom: 1px solid var(--hairline);
    }

    .verb-settings-group:last-child {
      border-bottom: none;
    }

    .verb-settings-group-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      color: var(--text);
      cursor: pointer;
      list-style: none;
    }

    .verb-settings-group-summary::-webkit-details-marker {
      display: none;
    }

    .verb-settings-group-summary::before {
      content: "";
      width: 8px;
      height: 8px;
      border-right: 2px solid var(--text-3);
      border-bottom: 2px solid var(--text-3);
      transform: rotate(-45deg);
      transition: transform 0.12s ease;
      flex-shrink: 0;
    }

    .verb-settings-group[open] .verb-settings-group-summary::before {
      transform: rotate(45deg);
    }

    .verb-settings-group-title {
      flex: 1;
      min-width: 0;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.25;
    }

    .verb-settings-group-count {
      color: var(--text-3);
      font-size: 12px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .verb-settings-group-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      padding: 0 16px 10px 32px;
    }

    .verb-settings-action {
      min-height: 36px;
      border: 1px solid var(--hairline);
      border-radius: 10px;
      background: var(--bg);
      color: var(--text-2);
      font-family: var(--font);
      font-size: 13px;
      font-weight: 700;
    }

    .verb-settings-action:active {
      opacity: 0.75;
    }

    .verb-settings-item {
      margin-left: 32px;
    }

    /* 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;
    }

    .settings-info-card p + p {
      margin-top: 6px;
    }

    .progress-file-status {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 12px 16px;
      margin: 0 0 8px;
      font-size: 14px;
      color: var(--text-2);
      line-height: 1.55;
    }

    .progress-file-status.is-error { color: var(--wrong); }
    .progress-file-status.is-success { color: var(--correct); }

    /* ─ Feature badges (Phase 8A) ─ */
    .feature-badge {
      display: inline-flex;
      align-items: center;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 2px 7px;
      border-radius: 10px;
      white-space: nowrap;
      vertical-align: middle;
      flex-shrink: 0;
    }

    .feature-badge--premium {
      background: var(--accent-soft);
      color: var(--accent-deep);
      border: 1px solid var(--accent-soft);
    }

    /* ─ Settings plan feature list (Phase 8A) ─ */
    .settings-plan-access {
      font-size: 14px;
      color: var(--text-2);
      margin: 0;
    }

    .settings-plan-note {
      font-size: 12px;
      color: var(--text-3);
      margin: 12px 0 0;
    }

    .settings-plan-note code {
      font-family: "SF Mono", "Fira Code", monospace;
      font-size: 11px;
      color: var(--text-2);
    }

    .settings-feature-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .settings-feature-list li {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--text);
    }

    .settings-feature-pill {
      display: inline-flex;
      align-items: center;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 2px 7px;
      border-radius: 10px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .settings-feature-pill--core {
      background: var(--tint);
      color: var(--text-2);
    }

    .settings-feature-pill--premium {
      background: var(--accent-soft);
      color: var(--accent-deep);
    }

    .account-action-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-top: 12px;
    }

    .account-action-list #auth-logout-btn {
      margin-top: 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; }

    /* Trust pages (Privacy / Terms) — same bottom-sheet pattern as
       Settings, layered above it (z-index 110 vs 100) so they can be
       opened from inside Settings and closed back to it. */
    .trust-overlay {
      position: fixed; inset: 0; z-index: 110;
      display: flex; align-items: flex-end;
      opacity: 0; pointer-events: none;
      transition: opacity 0.25s ease;
    }
    .trust-overlay.open { opacity: 1; pointer-events: all; }
    .trust-backdrop {
      position: absolute; inset: 0; background: var(--overlay-bg);
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    }
    .trust-sheet {
      position: relative; z-index: 1;
      width: 100%; max-height: 85dvh; overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      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);
    }
    .trust-overlay.open .trust-sheet { transform: translateY(0); }
    .trust-sheet::before {
      content: ''; display: block;
      width: 36px; height: 4px;
      background: var(--border); border-radius: 2px;
      margin: 12px auto 20px;
    }
    .trust-header {
      display: flex; align-items: center;
      justify-content: space-between; margin-bottom: 18px;
    }
    .trust-header h2 { font-size: 20px; font-weight: 700; color: var(--text); }
    .trust-close-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);
    }
    .trust-close-btn:active { opacity: 0.7; }
    .trust-body h3 {
      font-size: 13px; font-weight: 700; color: var(--text);
      margin: 18px 0 6px;
    }
    .trust-body h3:first-child { margin-top: 0; }
    .trust-body p, .trust-body li {
      font-size: 14px; line-height: 1.55; color: var(--text);
      overflow-wrap: break-word;
    }
    .trust-body ul { padding-left: 18px; margin: 0; }
    .trust-body li { margin-bottom: 10px; }
    .trust-body li:last-child { margin-bottom: 0; }

    /* Delete-account confirmation (PR5) */
    .delete-account-confirm-field {
      margin-top: 18px;
    }
    .delete-account-confirm-field label {
      display: block;
      font-size: 13px; font-weight: 700; color: var(--text);
      margin-bottom: 8px;
    }
    #delete-account-confirm-input {
      width: 100%;
      border: 1.5px solid var(--hairline);
      border-radius: 10px;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      font-size: 16px; /* avoids iOS Safari zoom-on-focus */
      padding: 12px;
      outline: none;
      transition: border-color var(--speed);
    }
    #delete-account-confirm-input:focus { border-color: var(--wrong); }

    .delete-account-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 16px;
    }
    .delete-account-danger-btn {
      min-height: 46px;
      border-radius: 14px;
      border: 1px solid var(--wrong);
      font-family: var(--font);
      font-size: 14px;
      font-weight: 800;
      background: var(--wrong);
      color: #fff;
    }
    .delete-account-danger-btn:disabled {
      opacity: 0.45;
    }

    /* 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-english-prompt.has-conj-hint {
      margin-bottom: 8px;
    }

    #conj-context-hint {
      font-size: 13px; font-weight: 500;
      color: var(--text-3); line-height: 1.35;
      margin-top: 2px; margin-bottom: 24px;
    }

    #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;
    }

/* ============================================================
   HABLA PLAY SKIN
   ============================================================ */

body { background: var(--bg); color: var(--text); }

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

#check-btn, #conj-check-btn,
#next-btn,  #conj-next-btn,
.story-audio-play-btn, .primary-btn {
  border: none; border-radius: 16px;
  background: var(--accent); color: #fff;
  font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
  box-shadow: 0 5px 0 var(--accent-deep);
  transition: transform var(--speed) ease, box-shadow var(--speed) ease, opacity var(--speed);
}
#check-btn:active, #conj-check-btn:active,
#next-btn:active,  #conj-next-btn:active,
.story-audio-play-btn:active, .primary-btn:active {
  transform: translateY(5px); box-shadow: 0 0 0 var(--accent-deep); opacity: 1;
}
#check-btn:disabled, #conj-check-btn:disabled { opacity: 0.4; box-shadow: 0 5px 0 var(--accent-deep); }

.mode-btn, .story-section, .card {
  border: 2px solid var(--border) !important;
  border-radius: 18px;
  box-shadow: 0 4px 0 var(--ledge);
  background: var(--card);
}
.mode-btn { padding: 15px 15px; }
.mode-btn:active {
  transform: translateY(4px); box-shadow: 0 0 0 var(--ledge);
  background: var(--card);
}

.mode-btn-icon  { width: 46px; height: 46px; border-radius: 13px; }
.mode-btn-title { font-weight: 800; letter-spacing: 0; }

.home-mode-label { font-weight: 800; }

#prompt-text, #conj-english-prompt {
  font-weight: 800; letter-spacing: 0; line-height: 1.1; color: var(--text);
}
#category-badge {
  font-weight: 800; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.06em; background: transparent; padding: 0;
}
#direction-label {
  font-weight: 800; color: var(--accent-deep);
  background: var(--accent-soft); padding: 5px 11px; border-radius: 999px;
}
#answer-input, #conj-answer-input {
  border: 2px solid var(--border) !important;
  border-radius: 16px; background: var(--card);
  box-shadow: inset 0 2px 0 var(--ledge);
  padding: 15px 17px !important; font-weight: 700; caret-color: var(--accent);
}
#answer-input:focus, #conj-answer-input:focus { border-color: var(--accent) !important; }

#conj-tense-banner {
  background: var(--accent); border-radius: 18px; box-shadow: 0 5px 0 var(--accent-deep);
  padding: 14px 16px; color: #fff;
}
#conj-tense-name { font-weight: 800; color: #fff; }
#conj-tense-explainer { color: rgba(255,255,255,0.82); font-weight: 700; }

#result-area, #conj-result-area {
  border-radius: 20px; border: 2px solid var(--correct);
  background: color-mix(in srgb, var(--correct) 14%, var(--card));
  box-shadow: 0 4px 0 var(--correct-deep); padding: 16px 18px;
}
#result-area.is-wrong, #result-area.incorrect,
#conj-result-area.is-wrong, #conj-result-area.incorrect {
  border-color: var(--wrong);
  background: color-mix(in srgb, var(--wrong) 14%, var(--card));
  box-shadow: 0 4px 0 var(--wrong-deep);
}
#result-message, #conj-result-message { font-weight: 800; }
#why-btn, #conj-why-btn {
  border: 2px solid var(--accent); border-radius: 999px; background: var(--card);
  color: var(--accent-deep); font-weight: 800;
}

.punto { flex-shrink: 0; display: block; }
@keyframes punto-pop { 0%{transform:scale(.7);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
.punto-pop { animation: punto-pop 400ms both; }

/* ============================================================
   HABLA PLAY POLISH
   ============================================================ */

#conj-tense-banner {
  margin: 18px 20px 24px;
  width: auto;
}

.result-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-bottom: 16px;
}

#result-icon,
#conj-result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin: 0 auto;
  overflow: visible;
}

#result-icon::before,
#result-icon::after,
#conj-result-icon::before,
#conj-result-icon::after {
  content: none !important;
  display: none !important;
}

#result-icon .punto,
#conj-result-icon .punto {
  margin: 0 auto;
}

#result-icon .punto-avatar,
#conj-result-icon .punto-avatar {
  width: var(--punto-size, 82px) !important;
  height: var(--punto-size, 82px) !important;
}

#result-icon .punto-avatar-img,
#conj-result-icon .punto-avatar-img {
  transform: scale(1.08);
  transform-origin: center;
}

#result-message,
#conj-result-message {
  margin: 0;
  text-align: center;
}

.correct-answer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.correct-answer-row #conj-correct-answer-display {
  flex: 1;
  margin-bottom: 0;
}

#conj-hear-btn {
  min-height: 46px;
  padding: 0 13px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  align-self: center;
  border: 2px solid var(--correct);
  border-radius: 14px;
  background: var(--card);
  color: var(--correct);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 0 var(--correct-deep);
}

#conj-hear-btn .speaker-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.speaker-icon::before,
.speaker-icon::after {
  content: none !important;
  display: none !important;
}

#conj-result-area.is-wrong #conj-hear-btn {
  border-color: var(--wrong);
  color: var(--wrong);
  box-shadow: 0 3px 0 var(--wrong-deep);
}

#conj-hear-btn:active {
  opacity: 1;
  transform: translateY(3px);
  box-shadow: none;
}

.hear-answer-btn {
  min-height: 44px;
  padding: 0 13px;
  margin: 10px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 2px solid var(--correct);
  border-radius: 14px;
  background: var(--card);
  color: var(--correct);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 0 var(--correct-deep);
  white-space: nowrap;
  max-width: 100%;
}

.hear-answer-btn .speaker-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hear-answer-btn:active {
  opacity: 1;
  transform: translateY(3px);
  box-shadow: none;
}

/* ============================================================
   PUNTO ALIVE
   ============================================================ */


.punto-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--punto-size, 84px);
  height: var(--punto-size, 84px);
  vertical-align: middle;
  flex-shrink: 0;
  transform-origin: 50% 88%;
}

.punto-avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

.punto-avatar.has-soft-shadow::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -3%;
  height: 12%;
  border-radius: 999px;
  background: rgba(58, 43, 34, 0.15);
  filter: blur(3px);
  z-index: -1;
}

.punto-avatar.is-animated.punto-mood-idle,
.punto-avatar.is-animated.punto-mood-happy,
.punto-avatar.is-animated.punto-mood-explain,
.punto-avatar.is-animated.punto-mood-reassure {
  animation: punto-avatar-breathe 3.6s ease-in-out infinite;
}

.punto-avatar.is-animated.punto-mood-cheer {
  animation: punto-avatar-pop 1.15s cubic-bezier(.34, 1.56, .64, 1) infinite;
}

.punto-avatar.is-animated.punto-mood-thinking {
  animation: punto-avatar-think 2.8s ease-in-out infinite;
}

.punto-avatar.is-animated.punto-mood-oops {
  animation: punto-avatar-shake 2.6s ease-in-out infinite;
}

@keyframes punto-avatar-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1.5px) scale(1.01, 0.996); }
}

@keyframes punto-avatar-pop {
  0%, 100% { transform: translateY(0) scale(1); }
  36% { transform: translateY(-3.5%) scale(1.022); }
  58% { transform: translateY(0) scale(0.996, 1.008); }
}

@keyframes punto-avatar-think {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-2.5deg) translateY(-2px); }
}

@keyframes punto-avatar-shake {
  0%, 8%, 34%, 100% { transform: translateX(0) rotate(0deg); }
  13% { transform: translateX(-3%) rotate(-2.4deg); }
  20% { transform: translateX(3%) rotate(2.4deg); }
  27% { transform: translateX(-2%) rotate(-1.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .punto-avatar,
  .punto-avatar::after {
    animation: none !important;
    transition: none !important;
  }
}

.punto-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.punto {
  display: block;
  overflow: visible;
  flex-shrink: 0;
}

.punto-empty,
#loading-punto {
  display: block;
  width: 88px;
  margin: 0 auto 14px;
}

#loading-punto {
  width: 92px;
  margin: 0 auto 16px;
}

#loading-punto .punto-avatar-img {
  transform: scale(1.08);
  transform-origin: center;
}

@keyframes pa-breathe {
  0%, 100% { transform: scale(1, 1); }
  50%       { transform: scale(1.022, 0.984); }
}

.punto.pa-breathe {
  animation: pa-breathe 3.9s ease-in-out infinite;
  transform-origin: center 96%;
}

@keyframes pa-shadow {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.16; }
  50%       { transform: translateX(-50%) scale(0.86); opacity: 0.10; }
}

@keyframes pa-dot {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%       { transform: translateY(-55%); opacity: 1; }
}

@keyframes pa-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6%); }
}

@keyframes pa-jump {
  0%, 100% { transform: translateY(0); }
  38% { transform: translateY(-17%); }
  52% { transform: translateY(-13%); }
  66% { transform: translateY(-17%); }
}

@keyframes pa-shake {
  0%, 7%, 32%, 100% { transform: translateX(0) rotate(0); }
  12% { transform: translateX(-7%) rotate(-5deg); }
  18% { transform: translateX(6%) rotate(4deg); }
  24% { transform: translateX(-4%) rotate(-3deg); }
  28% { transform: translateX(3%) rotate(2deg); }
}

@keyframes pa-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5%); }
}

@keyframes pa-blink {
  0%, 90%, 100% { transform: scaleY(0); }
  93%, 96% { transform: scaleY(1); }
}

@keyframes pa-wave {
  0%, 100% { transform: rotate(10deg); }
  50% { transform: rotate(-20deg); }
}

@keyframes pa-pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pa-zzz {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  25% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(38%, -48%) scale(1.1); }
}

@keyframes pa-heart {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  25% { opacity: 0.95; }
  100% { opacity: 0; transform: translateY(-110%) scale(1); }
}

@keyframes pa-float-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes pa-eye-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.7); }
}

@keyframes pa-pop-in {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes pa-shake-once {
  0%    { transform: translateX(0); }
  12.5% { transform: translateX(-5px); }
  25%   { transform: translateX(5px); }
  37.5% { transform: translateX(-5px); }
  50%   { transform: translateX(5px); }
  62.5% { transform: translateX(-5px); }
  75%   { transform: translateX(5px); }
  87.5% { transform: translateX(-5px); }
  100%  { transform: translateX(0); }
}

@keyframes pa-outfit-halo {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pa-hat-exit {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(-30px); opacity: 0; }
}

.pa-zzz {
  position: absolute;
  font-family: 'Geist', sans-serif;
  font-weight: 800;
  color: #9A8775;
  opacity: 0;
  animation: pa-zzz 3.4s ease-in-out infinite;
}

.pa-heart {
  position: absolute;
  opacity: 0;
  line-height: 0;
  animation: pa-heart 2.4s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .punto.pa-breathe,
  .punto .pa-act,
  .pa-zzz,
  .pa-heart,
  .punto-wrap[style*="pa-pop-in"],
  .punto-wrap[style*="pa-shake-once"] {
    animation: none !important;
  }
  [style*="pa-outfit-halo"],
  [style*="pa-hat-exit"] {
    animation: none !important;
  }
  .pbm-lid {
    animation: none !important;
    transform: translateY(-6%) rotate(-2.5deg);
  }
}

/* ============================================================
   HABLA ANIMATIONS — utility keyframes
   All durations/easings reference --ha-* custom properties.
   JS counterparts live in js/habla-animations.js.
   ============================================================ */

/* Card + panel entrance: fade-in + slide up 10px */
@keyframes ha-card-entrance {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ha-card-entrance {
  animation: ha-card-entrance var(--ha-card-entrance) var(--ha-ease-out) both;
}

/* Correct pop: scale 1 → 1.12 → 1 with spring overshoot */
@keyframes ha-correct-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.ha-correct-pop {
  animation: ha-correct-pop var(--ha-correct-pop) var(--ha-spring-pop) both;
}

/* Jade flash overlay that fades in 0ms, out in 200ms */
@keyframes ha-flash-fade {
  from { opacity: 0.15; }
  to   { opacity: 0; }
}
.ha-correct-flash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #17B89A;
  pointer-events: none;
  z-index: 10;
  animation: ha-flash-fade 200ms ease forwards;
}

/* Incorrect shake: ±5px × 4 oscillations */
@keyframes ha-incorrect-shake {
  0%, 100% { transform: translateX(0); }
  12.5%    { transform: translateX(-5px); }
  25%      { transform: translateX(5px); }
  37.5%    { transform: translateX(-5px); }
  50%      { transform: translateX(5px); }
  62.5%    { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
  87.5%    { transform: translateX(-5px); }
}
.ha-incorrect-shake {
  animation: ha-incorrect-shake var(--ha-incorrect-shake) var(--ha-ease-in-out) both;
}

/* Roadmap unlock: scale 0.88 → 1 + opacity */
@keyframes ha-roadmap-unlock {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
.ha-roadmap-unlock {
  animation: ha-roadmap-unlock var(--ha-roadmap-unlock) var(--ha-ease-out) both;
}

/* Coach note entrance: translateY -6 → 0 + opacity 0 → 1 */
@keyframes ha-coach-note {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ha-coach-note-enter {
  animation: ha-coach-note var(--ha-coach-note) var(--ha-ease-out) both;
}

/* Session complete entrance (bouncier spring) */
@keyframes ha-session-complete {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}
.ha-session-complete {
  animation: ha-session-complete var(--ha-session-complete) var(--ha-spring-bounce) both;
}

/* Milestone star ray: scaleX 0 → 1 then fade */
@keyframes ha-milestone-ray {
  0%  { transform-origin: left center; transform: scaleX(0); opacity: 1; }
  60% { opacity: 1; }
  100%{ transform-origin: left center; transform: scaleX(1); opacity: 0; }
}

/* ── Reduced motion overrides for ha-* classes ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .ha-card-entrance,
  .ha-correct-pop,
  .ha-incorrect-shake,
  .ha-roadmap-unlock,
  .ha-coach-note-enter,
  .ha-session-complete {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .ha-correct-flash { display: none !important; }
}

/* Phase 27A: reduced-motion for lesson-completion celebration (confetti,
   stars, checkmark badge) — this pattern already existed for ha-* classes
   above; these completion elements simply weren't covered yet. */
@media (prefers-reduced-motion: reduce) {
  .lesson-confetti,
  .lesson-stars {
    display: none !important;
  }
  .path-completion-badge {
    animation: none !important;
  }
}

.punto-moment {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 32px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: pa-pop 320ms ease both;
}

.punto-moment .pm-title {
  margin-top: 22px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text);
  line-height: 1.1;
  text-wrap: balance;
}

.punto-moment .pm-sub {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
  max-width: 280px;
  text-wrap: balance;
}

.punto-moment .pm-cta {
  margin-top: 26px;
  min-width: 220px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  font-family: 'Geist', sans-serif;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 16px;
  padding: 17px 22px;
  box-shadow: 0 5px 0 var(--accent-deep);
  transition: transform .07s ease, box-shadow .07s ease;
}

.punto-moment .pm-cta:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 var(--accent-deep);
}

/* ============================================================
   PATH SCREEN — Phase 17D (Habla v2 guided Path)
   Scoped to .path-v2 only; reuses existing --bg/--accent/--correct/
   --gold theme tokens (warm cream / terracotta / azulejo teal / gold).
   ============================================================ */
.path-intro-card {
  margin: 4px 0 14px;
  padding: 16px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--hairline);
  box-shadow: 0 4px 0 var(--border), 0 10px 22px rgba(58,43,34,0.07);
}

.path-intro-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}

.path-intro-copy {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 5px;
  line-height: 1.4;
}

.path-intro-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.path-intro-item {
  padding: 9px 10px;
  border-radius: 12px;
  background: var(--card-hover);
  border: 1px solid var(--hairline);
}

.path-intro-item strong {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--accent-deep);
}

.path-intro-item span {
  display: block;
  font-size: 11.5px;
  color: var(--text-2);
  margin-top: 1px;
}

.path-intro-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
}

.path-intro-action {
  flex: 1;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 11px;
  background: var(--accent);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  border: none;
  box-shadow: 0 3px 0 var(--accent-deep);
}

.path-intro-action:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--accent-deep);
}

.path-intro-action--secondary {
  background: var(--card-hover);
  color: var(--text);
  box-shadow: 0 3px 0 var(--border);
}

.path-intro-action--secondary:active {
  box-shadow: 0 1px 0 var(--border);
}

.path-v2-header {
  padding: 4px 0 6px;
}

.path-v2-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.path-v2-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--hairline);
}

.path-v2-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 36px;
}

.path-v2-stat-divider {
  width: 1px;
  height: 22px;
  background: var(--hairline);
}

.path-v2-stat-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--accent-deep);
  line-height: 1.1;
}

.path-v2-stat--streak .path-v2-stat-val {
  color: var(--gold-deep);
}

.path-v2-stat-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 1px;
}

/* PR4: prominent "Continue your Path" card — the single clearest entry
   point on the screen, so it gets a bolder treatment than the Punto
   guidance card below it. See renderPathContinueCard(). */
.path-v2-continue-card {
  margin-top: 14px;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent-deep) 130%);
  box-shadow: 0 5px 0 var(--accent-deep), 0 14px 26px rgba(242,100,48,0.22);
}

.path-v2-continue-card:empty {
  display: none;
}

.path-v2-continue-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85);
}

.path-v2-continue-next {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin-top: 6px;
}

.path-v2-continue-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-top: 2px;
  line-height: 1.25;
}

.path-v2-continue-sub {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  margin-top: 6px;
  line-height: 1.4;
}

.path-v2-continue-cta {
  margin-top: 14px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: 12px;
  background: #fff;
  color: var(--accent-deep);
  font-size: 14.5px;
  font-weight: 800;
  border: none;
  box-shadow: 0 3px 0 rgba(0,0,0,0.14);
}

.path-v2-continue-cta:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.14);
}

.path-v2-continue-cta-arrow {
  font-size: 15px;
  line-height: 1;
}

.path-v2-continue-link {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,0.95);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline;
}

.path-v2-continue-card--done {
  background: linear-gradient(150deg, var(--correct) 0%, var(--correct-deep) 130%);
  box-shadow: 0 5px 0 var(--correct-deep), 0 14px 26px rgba(23,184,154,0.22);
}

/* Unreachable since the daily Path lesson cap was removed —
   renderPathContinueCard() no longer produces this class. Left in place
   (harmless, unused) rather than deleted, for a smaller diff. */
.path-v2-continue-card--done-today {
  background: var(--card);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
}

.path-v2-continue-card--done-today .path-v2-continue-eyebrow {
  color: var(--gold-deep);
}

.path-v2-continue-card--done-today .path-v2-continue-title {
  color: var(--text);
  font-size: 15.5px;
}

.path-v2-continue-card--done-today .path-v2-continue-link {
  color: var(--accent-deep);
  text-decoration: none;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 8px 14px;
}

/* SRS audit PR B: compact, calm "Review due today" card — same muted
   --card/--hairline treatment as .path-v2-goal-card below (deliberately
   NOT the bold Continue-card gradient), and no red/overdue styling —
   this is meant to feel like a gentle nudge, not a debt tracker. Hidden
   entirely via the `hidden` attribute (toggled in renderPathDueReviewCard())
   whenever the due-review queue is empty. */
.path-v2-due-review-card {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* The display:flex above out-specifies the [hidden] UA rule, so the card
   rendered as an empty pill under the Continue hero whenever no reviews
   were due (same class of bug as .punto-goal-pill-v2[hidden]). Restore
   the intended hide-when-empty behaviour. */
.path-v2-due-review-card[hidden] {
  display: none;
}

.path-v2-due-review-text {
  min-width: 0;
}

.path-v2-due-review-eyebrow {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.path-v2-due-review-sub {
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}

.path-v2-due-review-cta {
  flex-shrink: 0;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 12px;
  border: none;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 13px;
  font-weight: 800;
}

.path-v2-due-review-cta:active {
  transform: translateY(1px);
}

@media (max-width: 380px) {
  .path-v2-due-review-card {
    flex-wrap: wrap;
  }

  .path-v2-due-review-cta {
    width: 100%;
  }
}

.path-v2-goal-card {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--hairline);
}

.path-v2-goal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.path-v2-goal-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.path-v2-goal-value {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}

.path-v2-goal-value.is-done {
  color: var(--correct-deep);
}

.path-v2-goal-track {
  margin-top: 7px;
  height: 6px;
  border-radius: 100px;
  background: var(--hairline);
  overflow: hidden;
}

.path-v2-goal-fill {
  height: 100%;
  border-radius: 100px;
  background: var(--gold);
  transition: width .3s ease;
}

.path-v2-goal-xp {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gold-deep);
}

.path-v2-punto-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(150deg, var(--card) 0%, var(--accent-soft) 130%);
  border: 1px solid var(--hairline);
  box-shadow: 0 4px 0 var(--border), 0 10px 22px rgba(58,43,34,0.07);
}

.path-v2-punto-mascot {
  flex-shrink: 0;
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-elev);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.path-v2-punto-body {
  flex: 1;
  min-width: 0;
}

.path-v2-punto-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--correct-deep);
}

/* Phase 27B: small static checkmark shown in the header eyebrow when
   today's guided lesson is complete — no animation, matches the
   completion-screen badge from Phase 27A at a smaller inline size. */
.path-v2-punto-badge-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--correct);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  vertical-align: middle;
}

.path-v2-punto-text {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  margin-top: 3px;
  line-height: 1.35;
}

.path-v2-punto-cta {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 9px 16px;
  border-radius: 11px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border: none;
  box-shadow: 0 3px 0 var(--accent-deep);
}

.path-v2-punto-cta-arrow {
  font-size: 14px;
  line-height: 1;
}

.path-v2-punto-cta:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--accent-deep);
}

/* Phase 18B: today's guided session already complete — softer, non-urgent CTA */
.path-v2-punto-cta--secondary {
  background: var(--bg-elev);
  color: var(--accent-deep);
  border: 1px solid var(--hairline);
  box-shadow: none;
}

.path-v2-punto-cta--secondary:active {
  transform: translateY(1px);
  box-shadow: none;
}

.path-v2-units {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Path finish polish: compact CEFR band section header between unit cards.
   Display-only; kept small and quiet so it reads as a divider, not a card. */
.path-band-header {
  margin: 8px 2px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.path-band-header:first-child {
  margin-top: 0;
}

.path-unit-card {
  border-radius: 20px;
}

.path-unit-card--expanded {
  background: var(--card);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-1, 0 4px 0 var(--border));
  padding: 16px;
}

.path-unit-card-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.path-unit-progress {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-3);
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 100px;
  padding: 2px 9px;
}

.path-unit-card-head h2 {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  margin-top: 4px;
}

.path-unit-card-head p {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 3px;
}

.path-unit-nodes {
  position: relative;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.path-unit-nodes::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--hairline);
  z-index: 0;
}

.path-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: var(--card-hover);
  transition: box-shadow .15s ease, transform .15s ease;
}

.path-node-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: var(--bg-elev);
  color: var(--text-3);
  border: 2px solid var(--card-hover);
}

.path-node-body {
  flex: 1;
  min-width: 0;
}

.path-node-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-radius: 100px;
  padding: 2px 8px;
  margin-bottom: 4px;
}

.path-node-badge--complete {
  color: var(--correct-deep);
  background: rgba(23,184,154,0.14);
}

.path-node-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.path-node-desc {
  font-size: 12.5px;
  color: var(--text-2);
  margin-top: 2px;
}

.path-node-meta {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  margin-top: 4px;
}

.path-node-cta {
  flex-shrink: 0;
  align-self: center;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  border: none;
  box-shadow: 0 3px 0 var(--accent-deep);
}

.path-node-cta:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--accent-deep);
}

/* Dark-mode readability: the active card's background is --accent-card,
   not --accent-soft. In light mode they are the same peach, so nothing
   changes; in dark mode --accent-card is the warm-dark surface, so the
   card's cream --text/--text-2/--text-3 title/description/meta stay
   readable instead of sitting on a light peach panel. */
.path-node--current {
  flex-wrap: wrap;
  border: 1.5px solid var(--accent);
  background: var(--accent-card);
  padding: 14px;
  box-shadow: 0 5px 0 var(--accent-deep), 0 10px 20px rgba(242,100,48,0.14);
}

.path-node--current .path-node-cta {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: 12px;
  font-size: 13.5px;
}

.path-node--current .path-node-icon {
  width: 38px;
  height: 38px;
  font-size: 14px;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-card);
}

.path-node--current .path-node-title {
  font-size: 15.5px;
}

.path-node--locked {
  opacity: 0.58;
  cursor: pointer;
}

/* Phase 27B: stronger-but-not-noisy "Done" state — a soft green tint and
   border replace the plain default background so completed nodes read as
   clearly finished at a glance, with a static halo (no animation) around
   the checkmark icon. */
.path-node--complete {
  background: linear-gradient(135deg, rgba(23,184,154,0.09) 0%, var(--card-hover) 65%);
  border-color: rgba(23,184,154,0.4);
}

.path-node--complete .path-node-icon {
  background: var(--correct);
  color: #fff;
  border-color: var(--card-hover);
  box-shadow: 0 0 0 3px rgba(23,184,154,0.16);
}

/* Phase 18B: current node, but today's shared guided session is already
   complete — distinct from --complete (node itself isn't marked done) and
   from --locked (this is still the next node, just not startable today).
   Phase 27B: dropped the flat opacity dimming (read as "disabled forever")
   in favour of a warm gold border — honestly "come back tomorrow", not
   broken — and wraps like --current so the fuller note/CTA below has
   room to breathe instead of being squeezed into a narrow right column.
   Removed the daily Path lesson cap: pathNodeState() no longer ever
   returns 'today-done', so these rules are unreachable. Left in place
   (harmless, unused) rather than deleted, for a smaller diff. */
.path-node--today-done {
  flex-wrap: wrap;
  border: 1.5px solid var(--gold);
  background: var(--card-hover);
  padding: 14px;
}

.path-node--today-done .path-node-icon {
  background: var(--bg-elev);
  color: var(--gold-deep);
  border-color: var(--card-hover);
}

.path-node-badge--today-done {
  color: var(--gold-deep);
  background: rgba(217,138,0,0.14);
}

.path-node-today-done-note {
  flex: 1 1 100%;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  text-align: left;
}

.path-node-today-done-text {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.4;
}

.path-node-practice-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  color: var(--accent-deep);
  font-size: 12.5px;
  font-weight: 700;
}

.path-node-practice-link:active {
  transform: translateY(1px);
}

/* PR4: outer preview card is now a column (summary row + optional detail
   below it, toggled via expandedPreviewUnitId) — the old single-row flex
   layout moved onto .path-unit-preview-summary below. */
.path-unit-card--preview {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px dashed var(--border);
  padding: 14px 16px;
  opacity: 0.85;
}

.path-unit-card--preview-complete {
  border-style: solid;
  border-color: var(--correct);
  opacity: 0.9;
}

.path-unit-card--preview-complete .path-unit-preview-lock {
  background: var(--correct);
  color: #fff;
}

/* PR4: the immediate next unit (still locked, but about to become
   current) — a lighter accent treatment distinguishes it from units
   further out, so the list reads as a guided queue, not a flat one. */
.path-unit-card--preview-next {
  border-style: solid;
  border-color: var(--accent);
  opacity: 0.95;
}

.path-unit-card--preview-next .path-unit-preview-lock {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.path-unit-card--preview-open {
  opacity: 1;
}

.path-unit-preview-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  min-height: 44px;
}

.path-unit-preview-lock {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--bg-elev);
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.path-unit-preview-body {
  flex: 1;
  min-width: 0;
}

.path-unit-preview-body h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-top: 2px;
}

.path-unit-preview-meta {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 700;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.path-unit-mastered-badge {
  color: var(--gold-deep);
  text-transform: none;
}

.path-unit-preview-chevron {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--text-3);
}

/* PR4: read-only detail shown when a preview card is toggled open —
   reuses .path-unit-nodes/.path-node for the list (see renderPathUnitCard()). */
.path-unit-preview-detail {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

.path-unit-preview-outcome {
  font-size: 12.5px;
  color: var(--text-2);
  margin-bottom: 10px;
  line-height: 1.4;
}

/* Path band visibility: one compact locked card per FUTURE CEFR band
   (renderPathBandCollapsedCard) so the current band's units stay the
   focus instead of the whole 51-unit list flooding the page. Shares the
   preview-card visual language (dashed border, muted lock chip); the
   band immediately after the current one gets the same accent lift as
   .path-unit-card--preview-next. */
.path-band-collapsed-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 18px;
  background: var(--card);
  border: 1px dashed var(--border);
  padding: 16px;
  opacity: 0.92;
}

.path-band-collapsed-card--next {
  border-style: solid;
  border-color: var(--accent);
  opacity: 1;
}

.path-band-collapsed-lock {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--bg-elev);
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.path-band-collapsed-card--next .path-band-collapsed-lock {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.path-band-collapsed-body {
  flex: 1;
  min-width: 0;
}

.path-band-collapsed-body h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin-top: 2px;
}

.path-band-collapsed-meta {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
  margin-top: 3px;
}

.path-band-preview-btn {
  flex-shrink: 0;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--bg-elev);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
}

.path-band-preview-btn:active {
  background: var(--card-hover);
}

/* Collapse row shown under an expanded future band's unit previews. */
.path-band-collapse-btn {
  width: 100%;
  min-height: 40px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: transparent;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 700;
}

.path-band-collapse-btn:active {
  background: var(--card-hover);
}

.path-node-cta--review {
  background: var(--bg-elev);
  color: var(--accent-deep);
  border: 1px solid var(--hairline);
  box-shadow: none;
}

.path-node-cta--review:active {
  box-shadow: none;
  transform: translateY(1px);
}

.path-v2-toast {
  position: fixed;
  left: 50%;
  bottom: calc(112px + env(safe-area-inset-bottom));
  transform: translate(-50%, 8px);
  z-index: 90;
  max-width: min(90vw, 380px);
  padding: 11px 18px;
  border-radius: 100px;
  background: var(--text);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 10px 24px rgba(58,43,34,0.24);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.path-v2-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================================
   FLUENCY ROADMAP — My Spanish screen
   ============================================================ */
.tab-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0 0;
  padding: 7px 10px 7px 6px;
  min-height: 40px;
  border-radius: 10px;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font);
}

.tab-back-link:active {
  background: var(--accent-soft);
  opacity: 0.85;
}

.roadmap-hero {
  padding: 22px 0 16px;
}

.roadmap-hero h1 {
  color: var(--text);
  font-size: 24px;
  font-weight: 800;
  margin-top: 4px;
}

.roadmap-hero p {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
}

/* ============================================================
   PROFILE SCREEN — Phase 25B
   ============================================================ */
.profile-hero {
  padding: 22px 0 16px;
}

.profile-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.profile-hero-head h1 {
  color: var(--text);
  font-size: 24px;
  font-weight: 800;
  margin-top: 4px;
}

.profile-hero p {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
}

.profile-settings-gear {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: var(--text-3);
  padding: 6px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--speed);
}

.profile-settings-gear:active { color: var(--text); }

.profile-stat-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.roadmap-next-card {
  margin-bottom: 13px;
}

.roadmap-next-title {
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  margin-top: 4px;
  margin-bottom: 0;
}

.roadmap-cta-btn {
  margin-top: 14px;
  width: 100%;
}

.roadmap-level-card {
  margin-bottom: 13px;
  overflow: hidden;
}

.roadmap-level-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.roadmap-level-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.roadmap-b1 { background: var(--accent-soft); color: var(--accent-deep); }
.roadmap-b2 { background: var(--plum-soft);   color: var(--plum-deep); }

.roadmap-level-info { flex: 1; }

.roadmap-level-info h2 {
  color: var(--text);
  font-size: 17px;
  font-weight: 800;
  margin-top: 2px;
}

.roadmap-level-pct {
  color: var(--accent);
  font-size: 17px;
  font-weight: 800;
}

.roadmap-level-pct--b2 { color: var(--plum); }

.roadmap-skill-list { margin-top: 2px; }

.roadmap-skill-row {
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
}

.roadmap-skill-row:last-child { border-bottom: 0; }

.roadmap-skill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.roadmap-skill-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}

.roadmap-skill-row.is-next .roadmap-skill-title {
  color: var(--accent);
}

.roadmap-skill-pct {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-left: 8px;
}

.roadmap-skill-desc {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 4px;
}

.roadmap-skill-reason {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 8px;
}

.roadmap-skill-track {
  height: 5px;
  background: var(--tint);
  border-radius: 99px;
  overflow: hidden;
}

.roadmap-skill-track span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.35s ease;
}

.roadmap-level-b2 .roadmap-skill-track span { background: var(--plum); }

/* ============================================================
   Phase 6A — Roadmap evidence
   ============================================================ */

.roadmap-focus-card {
  margin-bottom: 13px;
}

.roadmap-evidence {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

.roadmap-evidence-pill {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.roadmap-evidence-pill--none {
  background: var(--tint);
  color: var(--text-3, var(--text-2));
}

.roadmap-evidence-pill--low {
  background: var(--tint);
  color: var(--text-2);
}

.roadmap-evidence-pill--medium {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.roadmap-evidence-pill--strong {
  background: var(--accent);
  color: #fff;
}

.roadmap-evidence-meta {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
}

.roadmap-signal-copy {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  margin-top: 6px;
}

.roadmap-signal-action {
  color: var(--accent);
  font-weight: 700;
}

/* Phase 6B — Roadmap action buttons */

.roadmap-action-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.roadmap-action-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 99px;
  border: none;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.roadmap-action-btn:active {
  opacity: 0.75;
  transform: scale(0.97);
}

.roadmap-level-b2 .roadmap-action-btn {
  background: var(--plum-soft);
  color: var(--plum-deep);
}

.roadmap-action-note {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 6px;
}

.roadmap-focus-note {
  margin-top: 10px;
  font-size: 12px;
}

.roadmap-confidence {
  color: var(--text-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.roadmap-action-status {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  text-align: center;
  padding: 0 0 8px;
  min-height: 0;
  transition: opacity 0.2s ease;
}

.roadmap-action-status:empty {
  display: none;
}

.roadmap-action-status--active {
  color: var(--accent);
}

/* ============================================================
   PUNTO BRAIN v2 — Stage 2C New Sections
   ============================================================ */

/* ── Coach Summary Card ───────────────────────────────────── */
.punto-coach-card {
  margin-bottom: 13px;
  padding: 16px;
  border-radius: 22px;
  border: 2px solid var(--accent);
  background: var(--accent-card);
  box-shadow: 0 5px 0 var(--accent-deep);
}

.punto-coach-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

#punto-coach-icon {
  width: 88px;
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
}

#punto-coach-icon .punto-avatar-img {
  transform: scale(1.18);
  transform-origin: center;
}

.punto-coach-body {
  flex: 1;
  min-width: 0;
}

.punto-coach-quote {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.punto-coach-footer {
  padding: 7px 11px;
  background: var(--card);
  border-radius: 10px;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
}

.punto-coach-footer svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.55;
}

/* ── Roadmap Focus Card ───────────────────────────────────── */
.punto-roadmap-card {
  margin-bottom: 13px;
  padding: 15px 16px 17px;
  border-radius: 22px;
  border: 2px solid var(--gold);
  background: rgba(255,176,46,0.12);
  box-shadow: 0 5px 0 var(--gold-deep);
}

.punto-roadmap-eyebrow {
  margin-bottom: 12px;
}

.punto-roadmap-focus-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 2px;
}

.punto-roadmap-focus-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 3px;
}

.punto-roadmap-focus-level {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 11px;
}

.punto-roadmap-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.punto-roadmap-progress-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.punto-roadmap-progress-pct {
  font-size: 13px;
  font-weight: 800;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}

.punto-skill-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
}

.punto-skill-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--gold);
  transition: width 0.4s ease;
}

.punto-roadmap-reason-pill {
  margin-top: 10px;
  padding: 8px 11px;
  background: var(--card);
  border-radius: 10px;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.punto-roadmap-reason-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-deep);
  flex-shrink: 0;
}

.punto-roadmap-reason-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.35;
}

.punto-roadmap-open-btn {
  margin-top: 12px;
  width: 100%;
  padding: 11px 16px;
  background: var(--gold-deep);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  letter-spacing: -0.01em;
}

.punto-roadmap-open-btn:active {
  opacity: 0.85;
}

/* ── Next 3 Skills Card ───────────────────────────────────── */
.punto-next-skills-card {
  margin-bottom: 13px;
  padding: 15px 16px;
  border-radius: 22px;
  border: 2px solid var(--border);
  background: var(--card);
  box-shadow: 0 4px 0 var(--ledge);
}

.punto-next-skills-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.punto-next-count-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
}

.punto-skill-row-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  border-top: 1.5px solid var(--hairline);
}

.punto-skill-rank-bubble {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.punto-skill-rank-bubble.rank-focus    { background: var(--accent-soft); color: var(--accent-deep); }
.punto-skill-rank-bubble.rank-practise { background: rgba(255,176,46,0.18); color: var(--gold-deep); }
.punto-skill-rank-bubble.rank-building { background: rgba(22,163,74,0.10); color: #0e7a42; }

.punto-skill-row-body {
  flex: 1;
  min-width: 0;
}

.punto-skill-row-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.punto-skill-row-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  margin-top: 1px;
}

.punto-status-chip {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.punto-status-chip.chip-focus    { background: var(--accent-soft); color: var(--accent-deep); }
.punto-status-chip.chip-practise { background: rgba(255,176,46,0.18); color: var(--gold-deep); }
.punto-status-chip.chip-building { background: rgba(22,163,74,0.10); color: #0e7a42; }

/* ── Why Punto Chose This ─────────────────────────────────── */
.punto-why-card {
  margin-bottom: 13px;
  padding: 15px 16px;
  border-radius: 22px;
  border: 2px solid var(--border);
  background: var(--tint);
}

.punto-why-subtitle {
  margin-top: 3px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.4;
}

.punto-why-signal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1.5px solid var(--hairline);
}

.punto-why-icon-pill {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.punto-why-icon-pill svg { display: block; }

.punto-why-icon-pill.icon-journal  { background: rgba(255,176,46,0.18); color: var(--gold-deep); }
.punto-why-icon-pill.icon-practice { background: var(--accent-soft); color: var(--accent-deep); }
.punto-why-icon-pill.icon-listening { background: var(--plum-soft); color: var(--plum-deep); }

.punto-why-signal-text {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

/* Bottom nav: active tab shows a tile around the icon only */
.bottom-tab-btn.is-active {
  background: transparent !important;
  box-shadow: none !important;
}
.bottom-tab-btn.is-active .bottom-tab-icon {
  border-radius: 14px;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
  opacity: 1;
}
.bottom-tab-btn[data-tab-screen="home"].is-active .bottom-tab-icon {
  background: #FFEFCF;
  box-shadow: inset 0 0 0 2px var(--gold);
}
.bottom-tab-btn[data-tab-screen="my-spanish"].is-active .bottom-tab-icon {
  background: #D4F4EC;
  box-shadow: inset 0 0 0 2px var(--correct);
}

.bottom-tab-btn .bottom-tab-icon,
.bottom-tab-btn .punto-icon {
  margin-left: auto;
  margin-right: auto;
}

.bottom-tab-btn .bottom-tab-icon > svg {
  display: block;
}

.bottom-tab-btn .punto-icon.has-brain {
  overflow: hidden;
}

.bottom-tab-btn .punto-icon .punto-avatar {
  display: inline-flex;
}

/* Mode list label spacing when quick grid is above it */
.home-mode-label {
  margin-top: 20px;
}

.learn-icon,
.practice-icon,
.profile-icon { color: #9D8D84; }

.bottom-tab-nav .bottom-tab-btn { min-height: 62px; }

.bottom-tab-nav .punto-icon {
  width: 66px;
  height: 66px;
  margin-top: -30px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 24px rgba(200,69,27,0.18), 0 0 0 8px #fff;
}

.bottom-tab-nav .punto-icon.has-brain { background: #fff; }
.bottom-tab-nav .bottom-tab-btn[data-tab-screen="punto"] { color: var(--accent); }

.bottom-tab-nav .bottom-tab-btn[data-tab-screen="learn"].is-active,
.bottom-tab-nav .bottom-tab-btn[data-tab-screen="my-spanish"].is-active,
.bottom-tab-nav .bottom-tab-btn[data-tab-screen="home"].is-active {
  background: transparent !important;
  color: var(--accent-deep);
  box-shadow: none !important;
}


.bottom-tab-nav {
  padding-top: 7px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

.bottom-tab-nav .bottom-tab-btn {
  min-height: 54px;
  gap: 3px;
}

/* Punto nav size intentionally fixed after visual QA; keep these dimensions stable. */
.bottom-tab-nav .punto-icon {
  width: 68px;
  height: 68px;
  margin-top: -31px;
  overflow: hidden;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 9px 22px rgba(200,69,27,0.22), 0 0 0 4px rgba(255,255,255,0.92);
}

.bottom-tab-nav .punto-icon .punto-avatar {
  width: 104px !important;
  height: 104px !important;
  transform: translateY(0) scale(1.08);
  transform-origin: center;
}

.bottom-tab-nav .punto-icon .punto-avatar-img {
  width: 104px;
  height: 104px;
  object-fit: contain;
  transform: scale(1.18);
  transform-origin: center;
}

.bottom-tab-nav .punto-icon.has-brain {
  overflow: hidden;
  border-radius: 50%;
  background: var(--accent);
}

.bottom-tab-btn[data-tab-screen="punto"].is-active .punto-icon {
  box-shadow: 0 9px 22px rgba(200,69,27,0.26), 0 0 0 5px var(--accent-soft);
}


/* ============================================================
   LEARN HUB (learn-v2)
   ============================================================ */

/* Warm card override for all brain-cards in the Learn hub */
.learn-v2 .brain-card {
  border-color: rgba(105,70,44,0.12);
  background: var(--card);
  box-shadow: 0 4px 0 rgba(105,70,44,0.08), 0 12px 24px rgba(105,70,44,0.06);
}

/* ── Hero card ─────────────────────────────────────────────── */
.learn-v2 .learn-hero-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(255,230,216,0.55) 0%, rgba(255,253,248,0.96) 60%);
  border-color: rgba(242,100,48,0.22);
}

.learn-hub-punto {
  flex-shrink: 0;
  width: 112px;
  height: 112px;
}

.learn-hero-body .tab-eyebrow {
  margin-bottom: 4px;
}

.learn-hero-body h1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.15;
  max-width: 215px;
  margin: 0 0 6px;
}

.learn-hero-sub {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  max-width: 205px;
  line-height: 1.35;
  margin: 0;
}

/* ── Icon badges ───────────────────────────────────────────── */
.learn-badge {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
}

.learn-badge--lg {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 22px;
}

.learn-badge--accent  { background: var(--accent-soft); }
.learn-badge--gold    { background: rgba(255,176,46,0.20); }
.learn-badge--sky     { background: var(--sky-soft); }
.learn-badge--plum    { background: var(--plum-soft); }
.learn-badge--correct { background: var(--correct-bg); }

/* ── Continue Learning card ────────────────────────────────── */
.learn-v2 .learn-continue-card {
  background: linear-gradient(160deg, rgba(255,230,216,0.50) 0%, rgba(255,253,248,0.96) 60%);
  border-color: rgba(242,100,48,0.30);
  box-shadow: 0 5px 0 rgba(242,100,48,0.16), 0 12px 24px rgba(105,70,44,0.06);
}

.learn-continue-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.learn-continue-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
}

.learn-continue-card h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.15;
  margin: 0 0 6px;
}

.learn-continue-card .brain-primary-btn {
  min-height: 54px;
  border-radius: 17px;
  background: linear-gradient(180deg, #FF7A32 0%, #F4511E 100%);
  font-size: 17px;
  box-shadow: 0 4px 0 var(--accent-deep);
  margin-top: 16px;
}

.learn-continue-card .brain-primary-btn:active {
  box-shadow: 0 2px 0 var(--accent-deep);
}

/* ── Topic rows (Recs, Essentials, Explainers) ─────────────── */
.learn-topic-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
}

.learn-topic-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--speed);
}

.learn-topic-row:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

.learn-topic-row:active { opacity: 0.6; }

.learn-topic-body {
  flex: 1;
  min-width: 0;
}

.learn-topic-body strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.learn-topic-body span {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.35;
}

.learn-topic-chevron {
  font-size: 20px;
  color: var(--text-3);
  flex-shrink: 0;
  line-height: 1;
}

.learn-rec-pill {
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 10px;
  font-weight: 800;
  padding: 4px 9px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.learn-essentials-pill {
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(105,70,44,0.08);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 800;
  padding: 4px 9px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ── Section headings ──────────────────────────────────────── */
.learn-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 4px 0 0;
}

.learn-section-header h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.015em;
}

/* ── Learn by Situation grid ───────────────────────────────── */
.learn-situation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.learn-situation-chip {
  position: relative;
  overflow: hidden;
  min-height: 72px;
  padding: 14px 14px 12px;
  background: var(--card);
  border: 2px solid rgba(105,70,44,0.12);
  border-radius: var(--radius);
  box-shadow: 0 3px 0 rgba(105,70,44,0.10);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  text-align: left;
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--speed), box-shadow var(--speed);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Coloured accent bar at the top of each chip */
.learn-situation-chip::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
}

.learn-situation-chip:nth-child(2)::before { background: var(--gold); }
.learn-situation-chip:nth-child(3)::before { background: var(--sky); }
.learn-situation-chip:nth-child(4)::before { background: var(--plum); }
.learn-situation-chip:nth-child(5)::before { background: var(--correct); }

/* Lone chip on its row spans full width */
.learn-situation-chip:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  min-height: 56px;
}

.learn-situation-chip:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(105,70,44,0.10);
}

/* ── Small breakpoint ──────────────────────────────────────── */
@media (max-width: 360px) {
  .learn-hero-body h1 { font-size: 18px; }
  .learn-hub-punto    { width: 88px; height: 88px; }
  .learn-continue-card h2 { font-size: 20px; }
}

/* ── Punto Brain v2 Coach Insight card (Phase 4A) ──────────── */
.punto-coach-insight-card {
  border-color: var(--accent);
  background: var(--accent-card);
  box-shadow: 0 5px 0 var(--accent-deep);
}

.punto-coach-insight-card .tab-eyebrow {
  margin-bottom: 6px;
}

.punto-coach-insight-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.punto-coach-insight-body {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0;
}

.punto-coach-insight-chips:empty {
  display: none;
}

/* ── Punto Brain v2 Coach Action CTA (Phase 4B) ───────────── */
.punto-coach-action {
  margin-top: 14px;
}

.punto-coach-action .brain-primary-btn {
  margin-top: 0;
}

.punto-coach-action-note {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin: 8px 0 0;
  line-height: 1.5;
  min-height: 16px;
}

/* ── Today's Plan session: coach focus pill (Phase 4C) ────── */
.punto-session-focus-wrap {
  text-align: center;
  padding: 6px 16px 0;
  min-height: 0;
}

.punto-session-focus-note {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-radius: 20px;
  padding: 3px 10px;
  letter-spacing: 0.01em;
}

/* ── Today's Plan session: intent summary line (Phase 5B) ───── */
.punto-session-intent {
  font-size: 11px;
  color: var(--text-2);
  text-align: center;
  margin: 4px 16px 0;
  line-height: 1.4;
}

/* ── Punto Brain v2 "What Punto is watching" card (Phase 4A) ── */
.punto-watch-card .tab-eyebrow {
  margin-bottom: 6px;
}

.punto-watch-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-2);
  margin: 0 0 12px;
  letter-spacing: 0;
}

.punto-watch-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.punto-watch-item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
  color: var(--text);
  line-height: 1.4;
}

.punto-watch-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.punto-watch-item:first-child {
  padding-top: 0;
}

.punto-watch-item strong {
  font-weight: 800;
  margin-right: 2px;
}

.punto-watch-item span {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

.punto-watch-positive strong {
  color: var(--correct, #1a9e5c);
}

.punto-watch-positive span {
  color: var(--correct, #1a9e5c);
  opacity: 0.8;
}

/* ── Mistake Repair card (Phase 10A) ───────────────────────── */
.mistake-repair-card .tab-eyebrow {
  margin-bottom: 6px;
}

.mistake-repair-body {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0 0 10px;
}

.mistake-repair-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mistake-repair-list:empty {
  display: none;
}

.mistake-repair-item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
  color: var(--text);
  line-height: 1.4;
}

.mistake-repair-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mistake-repair-item:first-child {
  padding-top: 0;
}

.mistake-repair-item strong {
  font-weight: 800;
}

.mistake-repair-result {
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 8px;
  letter-spacing: 0.01em;
}

.mistake-repair-result--wrong {
  background: var(--wrong-soft, #fde8e8);
  color: var(--wrong, #c0392b);
}

.mistake-repair-result--almost {
  background: var(--almost-soft, #fff3cd);
  color: var(--almost, #b07800);
}

.mistake-repair-skill {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  flex-basis: 100%;
  margin-top: 1px;
}

.mistake-repair-btn {
  margin-top: 2px;
}

/* ── Weekly Coach Review card (Phase 12A/12B) ───────────────── */
.weekly-coach-card .tab-eyebrow {
  margin-bottom: 6px;
}

.weekly-coach-copy {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin: 0;
  line-height: 1.4;
}

.weekly-coach-chips {
  margin-top: 10px;
}

.weekly-coach-action {
  margin-top: 12px;
}

.weekly-coach-action-note {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  text-align: center;
  margin: 6px 0 0;
  opacity: 0.8;
}