:root {
            /* Dark industrial base palette */
            --bg-primary: #0a0e14;
            --bg-secondary: #121820;
            --bg-tertiary: #1a222d;
            --bg-card: #1e2732;
            --bg-card-hover: #252f3c;

            /* Text colors - high contrast */
            --text-primary: #ffffff;
            --text-secondary: #e0e4ea;
            --text-muted: #a0a8b4;

            /* Accent colors - industrial/energy */
            --accent-orange: #ff6b35;
            --accent-amber: #f5a623;
            --accent-blue: #4a9eff;
            --accent-green: #00d4aa;
            /* Phrase/clitic chain identity — deliberately not a language accent
               (those change per language) and not a result colour. */
            --accent-phrases: #a78bfa;
            --accent-phrases-rgb: 167, 139, 250;

            /* Language-specific theme colors (dynamically updated) */
            --accent-primary: #C8102E;
            --accent-secondary: #FFCC00;
            --accent-primary-text: #ffffff;
            --accent-secondary-text: #1a1a2e;

            /* Semantic colors */
            --success: #00d4aa;
            --error: #ff5252;
            --warning: #f5a623;

            /* Borders and dividers */
            --border-color: #2a3441;
            --border-light: #3a4553;

            /* Glow effects */
            --glow-orange: rgba(255, 107, 53, 0.3);
            --glow-blue: rgba(74, 158, 255, 0.3);
            --glow-green: rgba(0, 212, 170, 0.3);

            /* Fonts */
            --font-reading: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            --font-emphasis: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
            --font-data: 'JetBrains Mono', monospace;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-reading);
            background: var(--bg-primary);
            background-image:
                radial-gradient(ellipse at top, var(--bg-secondary) 0%, transparent 50%),
                radial-gradient(ellipse at bottom right, rgba(255, 107, 53, 0.05) 0%, transparent 40%);
            min-height: 100vh;
            height: 100vh;
            padding: 0;
            margin: 0;
            color: var(--text-primary);
            overflow: hidden;
            touch-action: manipulation;
            user-select: none;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
        }

        .container {
            max-width: 100%;
            width: 100%;
            height: 100%;
            margin: 0 auto;
            padding: 10px;
            box-sizing: border-box;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
        }

        @media (min-width: 768px) {
            .container {
                max-width: 800px;
                padding: 20px;
                scrollbar-width: thin;
                scrollbar-color: var(--border-color) transparent;
            }

            .container::-webkit-scrollbar {
                width: 6px;
            }

            .container::-webkit-scrollbar-track {
                background: transparent;
            }

            .container::-webkit-scrollbar-thumb {
                background: var(--border-color);
                border-radius: 3px;
            }
        }

        .header {
            text-align: center;
            color: white;
            padding: 20px 0;
        }

        .header h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }

        .mode-selector {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .mode-btn {
            flex: 1;
            min-width: 120px;
            padding: 12px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            color: var(--text-secondary);
        }

        .mode-btn:hover {
            transform: translateY(-2px);
            background: var(--bg-card-hover);
            border-color: var(--accent-primary);
        }

        .mode-btn.active {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
        }

        .card-container {
            --study-card-max-width: 540px;
            perspective: 1000px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 20px 0;
            overflow: hidden;
            touch-action: pan-x pan-y;
            -webkit-user-select: none;
            user-select: none;
            position: relative;
        }

        .card {
            width: 100%;
            /* Foundation for a future accessibility text-size setting —
               nothing reads this yet. Clamped against viewport height (the
               567px iPhone SE card is the tight case, not card width). */
            --card-fs: clamp(15px, 2.1vh, 20px);
            /* Fixed mobile height so the card shell doesn't grow/shrink
               between cards. Content shifts that used to come from
               min-height→max-height auto-sizing are now contained inside
               the scrollable meanings region. */
            height: calc(100vh - 100px);
            min-height: 460px;
            max-height: calc(100vh - 100px);
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.6s;
            cursor: pointer;
            touch-action: none;
            -webkit-user-drag: none;
            z-index: 1;
        }

        /* Stacked-card cue: when the card was reached via search/synonym/lyric
           breakdown (cardNavStack non-empty), shrink the visible card to ~92%
           and reveal a phantom "underlying" card backdrop behind it. The
           smaller temporary view + visible-bigger backdrop together imply
           "you're temporarily on top of a previous card; tap back to return."
           The phantom is anchored to .card-container so it isn't transformed
           with the card itself; its dimensions match .card's natural height
           so it sits exactly where .card would be at full size. */
        .card-container::before {
            content: none;
        }

        /* Old phantom/scale stacked treatment removed — now uses X button instead. */

        /* Old peek-tab pseudos removed — kept disabled in case any cached
           rule cascade tries to use them. */
        .card.is-stacked::before,
        .card.is-stacked::after {
            display: none;
        }

        /* X button shown when browsing a card via search/synonym/lyric jump.
           This is the only way back out of a child card, so it is a full
           44x44 touch target — the old 28px disc was below the minimum and
           easy to miss on a phone — and it is legible rather than ghosted. */
        .stacked-exit-btn {
            display: none;
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 6;
            width: 44px;
            height: 44px;
            min-width: 44px;
            min-height: 44px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.14);
            border: 1px solid rgba(255, 255, 255, 0.26);
            color: rgba(255, 255, 255, 0.78);
            cursor: pointer;
            align-items: center;
            justify-content: center;
            padding: 0;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.15s, color 0.15s, transform 0.12s;
        }
        .stacked-exit-btn:hover {
            background: rgba(255, 255, 255, 0.24);
            color: #fff;
        }
        .stacked-exit-btn:active {
            transform: scale(0.94);
        }
        .stacked-exit-btn:focus-visible {
            outline: 2px solid rgba(255, 255, 255, 0.75);
            outline-offset: 2px;
        }
        /* Retired: the way out of a child card is now the labelled "Back to …"
           control in the top bar (.cbs-return), which says where it returns to
           instead of making the learner infer it from an X. Kept in the markup
           because the same ids are wired as navigateBack() targets. */
        .card.is-stacked .stacked-exit-btn {
            display: none;
        }
        /* Chain-child cards carry their own exit affordance in the
           breadcrumb header — the generic round X would double up. */
        .card.is-chain-child .stacked-exit-btn {
            display: none;
        }

        .card.swiping {
            transition: none;
        }

        .card.swipe-correct {
            animation: swipeRight 0.3s ease-out forwards;
        }

        .card.swipe-incorrect {
            animation: swipeLeft 0.3s ease-out forwards;
        }

        .card.swipe-flag {
            animation: swipeUp 0.3s ease-out forwards;
            box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.7);
        }

        .card.flipped.swipe-correct {
            animation: swipeRightFlipped 0.3s ease-out forwards;
        }

        .card.flipped.swipe-incorrect {
            animation: swipeLeftFlipped 0.3s ease-out forwards;
        }

        .card.flipped.swipe-flag {
            animation: swipeUpFlipped 0.3s ease-out forwards;
            box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.7);
        }

        /* Result tint: a translucent colour wash over the card face as it exits */
        .card-tint {
            position: absolute;
            inset: 0;
            border-radius: 16px;
            pointer-events: none;
            z-index: 50;
            background: transparent;
        }
        .card.swipe-correct .card-tint {
            background: rgba(55, 210, 105, 0.2);
        }
        .card.swipe-incorrect .card-tint {
            background: rgba(255, 70, 70, 0.2);
        }
        /* Artist mode sets position:relative on all card-face children; override it */
        body.artist-mode .card-tint {
            position: absolute;
            z-index: 50;
        }

        @keyframes swipeRight {
            to {
                transform: translateX(150%) rotate(20deg);
                opacity: 0;
            }
        }

        @keyframes swipeLeft {
            to {
                transform: translateX(-150%) rotate(-20deg);
                opacity: 0;
            }
        }

        @keyframes swipeUp {
            to {
                transform: translateY(-150%);
                opacity: 0;
            }
        }

        @keyframes swipeRightFlipped {
            to {
                transform: translateX(150%) rotate(20deg) rotateY(180deg);
                opacity: 0;
            }
        }

        @keyframes swipeLeftFlipped {
            to {
                transform: translateX(-150%) rotate(-20deg) rotateY(180deg);
                opacity: 0;
            }
        }

        @keyframes swipeUpFlipped {
            to {
                transform: translateY(-150%) rotateY(180deg);
                opacity: 0;
            }
        }

        @media (min-width: 768px) {
            .card {
                height: calc(100vh - 120px);
                max-width: var(--study-card-max-width);
                margin: 0 auto;
            }

            .card-container {
                position: relative;
            }

            .desktop-side-controls {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 20px;
                z-index: 10;
            }

            .desktop-side-controls.left {
                left: 20px;
            }

            .desktop-side-controls.right {
                right: 20px;
            }

            .desktop-answer-btn-outside,
            .desktop-nav-btn-outside {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 6px;
                background: none;
                border: none;
                cursor: pointer;
                padding: 12px;
                border-radius: 12px;
                transition: all 0.2s;
            }

            .desktop-answer-btn-outside .answer-icon {
                width: 48px;
                height: 48px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
                font-weight: bold;
            }

            .desktop-nav-btn-outside .nav-icon {
                width: 48px;
                height: 48px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 32px;
                font-weight: 600;
                background: rgba(255, 255, 255, 0.08);
                color: rgba(255, 255, 255, 0.85);
                line-height: 1;
                padding-bottom: 4px;
            }

            .desktop-answer-btn-outside.incorrect .answer-icon {
                background: var(--error);
                color: white;
            }

            .desktop-answer-btn-outside.correct .answer-icon {
                background: var(--success);
                color: white;
            }

            .answer-hint {
                font-size: 11px;
                color: var(--text-secondary);
                opacity: 0.7;
            }

            .answer-hint kbd {
                display: inline-block;
                background: rgba(255, 255, 255, 0.1);
                border: 1px solid rgba(255, 255, 255, 0.25);
                border-bottom-width: 2px;
                border-radius: 4px;
                padding: 2px 8px;
                font-family: inherit;
                font-size: 13px;
                color: rgba(255, 255, 255, 0.7);
                line-height: 1.4;
            }

            .desktop-answer-btn-outside:hover,
            .desktop-nav-btn-outside:hover {
                background: rgba(255, 255, 255, 0.05);
            }

            .desktop-nav-btn-outside:hover .nav-icon {
                background: rgba(255, 255, 255, 0.15);
                color: white;
            }

            .desktop-answer-btn-outside.pressed .answer-icon {
                animation: btnPress 0.3s ease-out;
            }

            @keyframes btnPress {
                0% { transform: scale(1); }
                30% { transform: scale(1.3); }
                100% { transform: scale(1); }
            }

            /* (hide rules moved to after .desktop-nav-row display:flex rule) */

            /* Adjacent-card ghost peeking in from each gutter.
               Ghost 1 is closer to the main card (narrower peek, taller, on top).
               Ghost 2 extends further out horizontally (wider peek, shorter, behind).
               This creates a staircase: ghost2-edge | ghost1-edge | main card. */
            .deck-ghost-prev,
            .deck-ghost-next {
                position: absolute;
                width: min(var(--study-card-max-width), calc(100% - 40px));
                top: 50%;
                border-radius: 16px;
                background: var(--bg-card);
                pointer-events: none;
                z-index: 0;
                transition: opacity 0.2s;
            }
            /* Ghost 1: closest to main card — 30px peek, slightly shorter */
            .deck-ghost-prev-1 {
                right: calc(50% - 210px);
                height: calc(100vh - 160px);
                min-height: 420px;
                transform: translateY(-50%);
                border: 1px solid rgba(255, 255, 255, 0.07);
                filter: brightness(0.55);
            }
            /* Ghost 2: behind ghost 1 — 45px peek (extends further), shortest */
            .deck-ghost-prev-2 {
                right: calc(50% - 195px);
                height: calc(100vh - 200px);
                min-height: 380px;
                transform: translateY(-50%);
                border: 1px solid rgba(255, 255, 255, 0.04);
                filter: brightness(0.3);
            }
            .deck-ghost-next-1 {
                left: calc(50% - 210px);
                height: calc(100vh - 160px);
                min-height: 420px;
                transform: translateY(-50%);
                border: 1px solid rgba(255, 255, 255, 0.07);
                filter: brightness(0.55);
            }
            .deck-ghost-next-2 {
                left: calc(50% - 195px);
                height: calc(100vh - 200px);
                min-height: 380px;
                transform: translateY(-50%);
                border: 1px solid rgba(255, 255, 255, 0.04);
                filter: brightness(0.3);
            }
            /* Hide all prev/next ghosts at the hard edges */
            .card-container.at-deck-start .deck-ghost-prev,
            .card-container.at-deck-end .deck-ghost-next,
            .card-container:has(.card.is-stacked) .deck-ghost-prev,
            .card-container:has(.card.is-stacked) .deck-ghost-next {
                opacity: 0;
            }
            /* One step from edge: only 1 real card behind — hide the outer ghost */
            .card-container.at-deck-start-2 .deck-ghost-prev-2,
            .card-container.at-deck-end-2 .deck-ghost-next-2 {
                opacity: 0;
            }

            /* #deckProgressTrack is retired everywhere (see base rules);
               .card-back-scrubber sits above the card in its place — same
               order:-1 flex-item trick. Width matches .card's own
               configured width exactly, so the rail and card continue to
               line up as the study surface is tuned. */
            .card-back-scrubber {
                position: relative;
                order: -1;
                flex: 0 0 auto;
                width: min(var(--study-card-max-width), 100%);
                pointer-events: auto;
            }
            .card-container {
                flex-direction: column;
                justify-content: flex-start;
                gap: 8px;
                padding: 20px 0;
            }
            /* fill styles live in the global block below so mobile shares them */
            /* Side zones stay hidden while browsing an off-deck card. The top
               bar itself no longer hides: it now carries the "Back to …"
               return control (see .cbs-return in the base rules). */
            .card-container:has(.card.is-stacked) .side-nav-zone {
                opacity: 0;
                pointer-events: none;
            }

            /* Side navigation zones — wide clickable gutters on either side of card */
            .side-nav-zone {
                display: none;
                position: absolute;
                top: 0;
                bottom: 0;
                width: calc((100% - var(--study-card-max-width)) / 2);
                background: transparent;
                border: none;
                cursor: pointer;
                align-items: center;
                z-index: 5;
                padding: 0;
                transition: opacity 0.2s;
            }
            .side-nav-prev {
                left: 0;
                justify-content: flex-end;
                padding-right: 24px;
            }
            .side-nav-next {
                right: 0;
                justify-content: flex-start;
                padding-left: 24px;
            }
            .side-nav-chevron {
                opacity: 0;
                transition: opacity 0.2s, transform 0.15s;
                color: rgba(255, 255, 255, 0.5);
                flex-shrink: 0;
            }
            .side-nav-zone:hover:not(:disabled) .side-nav-chevron {
                opacity: 1;
                color: rgba(255, 255, 255, 0.85);
            }
            .side-nav-prev:hover:not(:disabled) .side-nav-chevron {
                transform: translateX(-4px);
            }
            .side-nav-next:hover:not(:disabled) .side-nav-chevron {
                transform: translateX(4px);
            }
            .side-nav-zone:disabled {
                pointer-events: none;
                opacity: 0;
            }
        }

        @keyframes card-exit-left {
            to { transform: translateX(-150%) rotate(-20deg); opacity: 0; }
        }
        @keyframes card-exit-left-f {
            to { transform: translateX(-150%) rotate(-20deg) rotateY(180deg); opacity: 0; }
        }
        @keyframes card-exit-right {
            to { transform: translateX(150%) rotate(20deg); opacity: 0; }
        }
        @keyframes card-exit-right-f {
            to { transform: translateX(150%) rotate(20deg) rotateY(180deg); opacity: 0; }
        }
        @keyframes card-enter-right {
            from { transform: translateX(55%) rotate(8deg); opacity: 0; }
            to   { transform: translateX(0) rotate(0deg); opacity: 1; }
        }
        @keyframes card-enter-left {
            from { transform: translateX(-55%) rotate(-8deg); opacity: 0; }
            to   { transform: translateX(0) rotate(0deg); opacity: 1; }
        }
        @media (min-width: 768px) {
            .card.nav-exit-left  { animation: card-exit-left  0.28s ease-out forwards; }
            .card.nav-exit-left-f  { animation: card-exit-left-f  0.28s ease-out forwards; }
            .card.nav-exit-right { animation: card-exit-right 0.28s ease-out forwards; }
            .card.nav-exit-right-f { animation: card-exit-right-f 0.28s ease-out forwards; }
            .card.nav-enter-right { animation: card-enter-right 0.22s ease-out forwards; }
            .card.nav-enter-left  { animation: card-enter-left  0.22s ease-out forwards; }
        }

        @media (max-width: 767px) {
            .desktop-side-controls {
                display: none;
            }
            .side-nav-zone,
            .deck-ghost-prev,
            .deck-ghost-next {
                display: none;
            }
        }

        /* Desktop keyboard shortcut guide */
        .desktop-keyboard-guide {
            display: none;
        }

        @media (min-width: 768px) {
            /* Shortcuts only apply while a card is open, so reveal the guide
               only when #appContent is visible. The base rule above keeps it
               hidden on the setup / set-chooser view. */
            body:has(#appContent:not(.hidden)) .desktop-keyboard-guide {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 28px;
                position: fixed;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                z-index: 10;
                opacity: 0.5;
                transition: opacity 0.3s;
                pointer-events: auto;
                padding: 28px 10px;
            }

            .desktop-keyboard-guide:hover {
                opacity: 0.95;
            }

            /* Collapsed: hide the panel entirely (toggle lives in the right-edge
               sidebar; nothing should remain visible on the left). Selector
               matches the :has() prefix above so specificity wins. */
            body:has(#appContent:not(.hidden)) .desktop-keyboard-guide.collapsed {
                display: none;
            }
        }

        /* Expanded popup — wraps the key sections in a subtle glass-panel
           backdrop so the keys read as a connected widget instead of floating
           text. Spacing and dividers carry the visual hierarchy. */
        .kb-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 22px;
            padding: 22px 16px;
            background: rgba(20, 25, 32, 0.55);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
        }

        .kb-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            position: relative;
        }

        /* Subtle divider between sections — adds visual rhythm to the column */
        .kb-section + .kb-section::before {
            content: '';
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            width: 28px;
            height: 1px;
            background: rgba(255, 255, 255, 0.08);
        }

        /* kb-row: keys centered; hints (tick/cross) absolutely positioned so they
           don't push the key off the vertical centerline shared with other keys. */
        .kb-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            position: relative;
        }
        .kb-row .kb-hint.correct,
        .kb-row .kb-hint.incorrect {
            position: absolute;
            left: calc(100% + 4px);
            top: 50%;
            transform: translateY(-50%);
        }

        .kb-key {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 100%);
            border: 1px solid rgba(255, 255, 255, 0.22);
            border-bottom: 2px solid rgba(255, 255, 255, 0.32);
            border-radius: 7px;
            padding: 8px 14px;
            font-family: var(--font-data);
            font-size: 15px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.95);
            line-height: 1.2;
            min-width: 38px;
            text-align: center;
            white-space: nowrap;
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        .kb-key.small {
            padding: 5px 10px;
            font-size: 13px;
            min-width: 30px;
        }

        .kb-key.arrow {
            padding: 7px 12px;
            font-size: 19px;
            min-width: 42px;
        }

        .kb-key.wide {
            padding: 8px 26px;
        }

        .kb-command-section {
            width: 100%;
            gap: 6px;
        }
        .kb-command-section .kb-row {
            width: 100%;
            justify-content: space-between;
        }
        .kb-key.combo {
            min-width: 0;
            padding: 5px 8px;
            border-radius: 6px;
            font-size: 10px;
        }

        .kb-plus {
            color: rgba(255, 255, 255, 0.3);
            font-size: 9px;
            margin: 0 1px;
        }

        .kb-label {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.5);
            min-width: 62px;
            text-align: right;
            margin-right: 4px;
        }

        .kb-hint {
            font-size: 10px;
            color: rgba(255, 255, 255, 0.55);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.7px;
        }

        /* Report button (matches .kb-key look but is clickable) */
        .kb-info-btn {
            cursor: pointer;
            background: rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.7);
        }
        .kb-info-btn svg { display: block; }
        .kb-info-btn:hover {
            background: rgba(255, 255, 255, 0.18);
            color: #fff;
        }

        /* Card metadata popover */
        .card-meta-popover {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.6);
            z-index: 100;
            color: rgba(255, 255, 255, 0.9);
            font-family: var(--font-data);
            font-size: 12px;
            padding: 16px;
        }
        .card-meta-popover[hidden] { display: none; }

        .card-meta-modal-content {
            width: 100%;
            max-width: 480px;
            max-height: 85vh;
            overflow-y: auto;
            background: rgba(20, 22, 28, 0.97);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 8px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
        }

        .card-meta-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .card-meta-title {
            font-size: 13px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.85);
            font-family: var(--font-data);
        }
        .card-meta-close {
            background: transparent;
            border: none;
            color: rgba(255, 255, 255, 0.6);
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
            padding: 0 4px;
        }
        .card-meta-close:hover { color: #fff; }

        .card-meta-body { padding: 8px 12px 12px; }

        .card-meta-footer {
            padding: 8px 12px 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }
        .card-meta-flag-btn {
            display: block;
            width: 100%;
            padding: 8px 10px;
            background: rgba(255, 196, 0, 0.12);
            border: 1px solid rgba(255, 196, 0, 0.5);
            border-radius: 6px;
            color: rgba(255, 220, 120, 0.95);
            font-family: var(--font-data);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
        }
        .card-meta-flag-btn:hover {
            background: rgba(255, 196, 0, 0.22);
            border-color: rgba(255, 196, 0, 0.8);
        }

        .card-meta-flag-row {
            margin-left: 8px;
            padding: 1px 6px;
            background: transparent;
            border: 1px solid rgba(255, 196, 0, 0.45);
            border-radius: 3px;
            color: rgba(255, 220, 120, 0.85);
            font-family: var(--font-data);
            font-size: 9px;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            cursor: pointer;
            vertical-align: middle;
            transition: background 0.15s, border-color 0.15s;
        }
        .card-meta-flag-row:hover {
            background: rgba(255, 196, 0, 0.18);
            border-color: rgba(255, 196, 0, 0.75);
        }
        .card-meta-flag-row.flagged {
            background: rgba(255, 196, 0, 0.35);
            border-color: rgba(255, 196, 0, 0.9);
            color: rgba(255, 240, 200, 1);
        }
        .card-meta-section { margin-top: 10px; }
        .card-meta-section:first-child { margin-top: 0; }
        .card-meta-section h4 {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: rgba(255, 255, 255, 0.55);
            margin: 0 0 6px 0;
            font-weight: 600;
        }
        .card-meta-kv {
            display: grid;
            grid-template-columns: 90px 1fr;
            gap: 4px 8px;
            font-size: 11px;
        }
        .card-meta-kv dt { color: rgba(255, 255, 255, 0.5); }
        .card-meta-kv dd { margin: 0; color: rgba(255, 255, 255, 0.9); word-break: break-word; }
        .card-meta-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .card-meta-list li {
            padding: 5px 0;
            border-top: 1px dashed rgba(255, 255, 255, 0.08);
        }
        .card-meta-list li:first-child { border-top: none; }
        .card-meta-tag {
            display: inline-block;
            padding: 1px 6px;
            margin-right: 4px;
            border-radius: 3px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
            font-size: 10px;
            color: rgba(255, 255, 255, 0.75);
        }
        .card-meta-tag.method { background: rgba(100, 180, 255, 0.15); border-color: rgba(100, 180, 255, 0.3); }
        .card-meta-tag.source { background: rgba(180, 140, 255, 0.15); border-color: rgba(180, 140, 255, 0.3); }
        .card-meta-tag.flag { background: rgba(255, 180, 100, 0.15); border-color: rgba(255, 180, 100, 0.3); }
        .card-meta-ex {
            color: rgba(255, 255, 255, 0.65);
            font-size: 11px;
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .card-meta-current {
            color: rgba(255, 220, 120, 0.9);
            font-weight: 600;
        }
        .card-meta-empty {
            color: rgba(255, 255, 255, 0.4);
            font-style: italic;
            font-size: 11px;
        }

        /* ---- Sense-level flag menu (shares the card-meta modal chrome) ---- */
        .flag-menu-hint {
            color: rgba(255, 255, 255, 0.55);
            font-size: 11px;
            line-height: 1.4;
            margin-bottom: 10px;
        }
        .flag-menu-senses {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .flag-menu-senses.is-disabled { opacity: 0.4; }
        .flag-menu-sense {
            display: flex;
            align-items: baseline;
            gap: 8px;
            padding: 8px 10px;
            margin-bottom: 5px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.12s, border-color 0.12s;
        }
        .flag-menu-sense:last-child { margin-bottom: 0; }
        .flag-menu-sense:hover { background: rgba(255, 255, 255, 0.09); }
        .flag-menu-sense.selected {
            background: rgba(255, 196, 0, 0.16);
            border-color: rgba(255, 196, 0, 0.7);
        }
        .flag-menu-sense .fm-pos {
            flex: none;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: rgba(255, 255, 255, 0.5);
        }
        .flag-menu-sense .fm-gloss {
            font-size: 14px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.92);
            word-break: break-word;
        }
        .flag-menu-sense .fm-pct {
            margin-left: auto;
            flex: none;
            font-size: 11px;
            color: rgba(255, 255, 255, 0.5);
        }
        .flag-menu-pairing {
            padding: 10px;
            border: 1px solid rgba(255, 196, 0, 0.42);
            border-radius: 7px;
            background: rgba(255, 196, 0, 0.08);
            transition: opacity 0.15s, border-color 0.15s;
        }

        .flag-menu-pairing.is-secondary {
            opacity: 0.62;
            border-color: rgba(255, 255, 255, 0.16);
            background: rgba(255, 255, 255, 0.04);
        }

        .flag-pairing-sense {
            display: flex;
            align-items: baseline;
            gap: 7px;
            color: rgba(255, 255, 255, 0.94);
            font-family: var(--font-reading);
            font-size: 14px;
            font-weight: 650;
        }

        .flag-pairing-sense > span {
            flex: none;
            color: rgba(255, 220, 120, 0.82);
            font-family: var(--font-data);
            font-size: 9px;
            letter-spacing: 0.55px;
            text-transform: uppercase;
        }

        .flag-pairing-arrow {
            padding: 3px 0;
            color: rgba(255, 196, 0, 0.7);
            font-size: 12px;
            text-align: center;
        }

        .flag-pairing-example {
            color: rgba(255, 255, 255, 0.84);
            font-family: var(--font-reading);
            font-size: 13px;
            line-height: 1.38;
        }

        .flag-pairing-example small {
            display: block;
            margin-top: 3px;
            color: rgba(255, 255, 255, 0.55);
            font-size: 11px;
        }

        .flag-menu-note-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
            color: rgba(255, 255, 255, 0.58);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .flag-menu-note-label span {
            color: rgba(255, 255, 255, 0.35);
            font-size: 9px;
            font-weight: 500;
        }

        .flag-menu-note {
            width: 100%;
            box-sizing: border-box;
            resize: vertical;
            min-height: 72px;
            padding: 9px 10px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 7px;
            outline: none;
            background: rgba(0, 0, 0, 0.24);
            color: rgba(255, 255, 255, 0.92);
            font-family: var(--font-reading);
            font-size: 13px;
            line-height: 1.4;
        }

        .flag-menu-note:focus {
            border-color: rgba(255, 196, 0, 0.7);
            box-shadow: 0 0 0 2px rgba(255, 196, 0, 0.1);
        }

        .flag-menu-note::placeholder {
            color: rgba(255, 255, 255, 0.32);
        }

        /* Audit reporter — modern, bounded, and intentionally calmer than
           the legacy yellow debug popover it replaces. */
        .flag-menu {
            padding: 18px;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-y;
            background: rgba(7, 9, 14, 0.76);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .flag-menu .card-meta-modal-content {
            display: flex;
            flex-direction: column;
            width: min(100%, 620px);
            max-width: 620px;
            max-height: min(88dvh, 780px);
            overflow: hidden;
            border: 1px solid color-mix(in srgb, var(--accent-primary) 24%, var(--border-color));
            border-radius: 18px;
            background: color-mix(in srgb, var(--bg-secondary) 96%, #090b11);
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
        }
        .flag-menu .card-meta-header {
            flex: none;
            padding: 17px 19px 14px;
            border-color: color-mix(in srgb, var(--border-color) 78%, transparent);
        }
        .flag-menu .card-meta-title {
            color: var(--text-primary);
            font: 700 18px/1.2 var(--font-emphasis);
            letter-spacing: -0.01em;
        }
        .flag-menu .card-meta-close {
            width: 38px;
            height: 38px;
            padding: 0;
            border-radius: 50%;
            background: var(--bg-tertiary);
            color: var(--text-secondary);
        }
        .flag-menu .card-meta-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-y;
            scrollbar-width: thin;
            scrollbar-color: color-mix(in srgb, var(--accent-primary) 42%, transparent) transparent;
            padding: 14px 19px 19px;
        }
        .flag-menu .card-meta-body::-webkit-scrollbar { width: 6px; }
        .flag-menu .card-meta-body::-webkit-scrollbar-thumb {
            border-radius: 999px;
            background: color-mix(in srgb, var(--accent-primary) 42%, transparent);
        }
        .flag-menu .card-meta-footer {
            flex: none;
            padding: 13px 19px 17px;
            border-color: color-mix(in srgb, var(--border-color) 78%, transparent);
            background: color-mix(in srgb, var(--bg-secondary) 96%, transparent);
        }
        .flag-menu-hint {
            margin: 0 0 16px;
            color: var(--text-secondary);
            font: 500 12px/1.5 var(--font-reading);
        }
        .flag-menu-provenance {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 5px;
            margin: -7px 0 13px;
            font-size: 10px;
        }
        .flag-menu-provenance span { opacity: .62; }
        .flag-menu-provenance code {
            max-width: 100%;
            padding: 3px 6px;
            border-radius: 999px;
            background: color-mix(in srgb, currentColor 9%, transparent);
            overflow-wrap: anywhere;
            white-space: normal;
        }
        .flag-menu .card-meta-section {
            margin-top: 17px;
        }
        .flag-menu .card-meta-section h4 {
            margin-bottom: 8px;
            color: var(--text-muted);
            font: 700 10px/1.2 var(--font-emphasis);
            letter-spacing: 0.09em;
        }
        .flag-section-optional {
            margin-left: 4px;
            color: color-mix(in srgb, var(--text-muted) 65%, transparent);
            font-weight: 500;
            letter-spacing: 0;
            text-transform: none;
        }
        .flag-menu-targets {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }
        .flag-menu-quick-actions {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }
        .flag-menu-quick-action {
            min-width: 0;
            padding: 10px 9px;
            border: 1px solid var(--border-color);
            border-radius: 11px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            text-align: center;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s, transform 0.15s;
        }
        .flag-menu-quick-note {
            grid-column: 1 / -1;
            text-align: left;
        }
        .flag-menu-quick-action:hover {
            border-color: color-mix(in srgb, var(--accent-primary) 48%, var(--border-color));
            transform: translateY(-1px);
        }
        .flag-menu-quick-action.selected {
            border-color: color-mix(in srgb, var(--accent-primary) 72%, var(--border-color));
            background: color-mix(in srgb, var(--accent-primary) 13%, var(--bg-tertiary));
            box-shadow: inset 0 -3px 0 var(--accent-primary);
        }
        .flag-menu-quick-action strong,
        .flag-menu-quick-action span {
            display: block;
        }
        .flag-menu-quick-action strong {
            font: 700 12px/1.2 var(--font-emphasis);
        }
        .flag-menu-quick-action span {
            margin-top: 3px;
            color: var(--text-muted);
            font: 500 9px/1.3 var(--font-reading);
        }
        .flag-menu-target {
            min-width: 0;
            padding: 11px 12px;
            border: 1px solid var(--border-color);
            border-radius: 11px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            text-align: left;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s, transform 0.15s;
        }
        .flag-menu-target:hover {
            border-color: color-mix(in srgb, var(--accent-primary) 48%, var(--border-color));
            transform: translateY(-1px);
        }
        .flag-menu-target.selected {
            border-color: color-mix(in srgb, var(--accent-primary) 72%, var(--border-color));
            background: color-mix(in srgb, var(--accent-primary) 13%, var(--bg-tertiary));
            box-shadow: inset 3px 0 0 var(--accent-primary);
        }
        .flag-menu-target strong,
        .flag-menu-target span {
            display: block;
        }
        .flag-menu-target strong {
            font: 700 13px/1.25 var(--font-emphasis);
        }
        .flag-menu-target span {
            margin-top: 3px;
            color: var(--text-muted);
            font: 500 10px/1.35 var(--font-reading);
        }
        .flag-menu-senses {
            max-height: 190px;
            overflow-y: auto;
        }
        .flag-menu-sense {
            padding: 9px 11px;
            border-color: var(--border-color);
            border-radius: 9px;
            background: var(--bg-tertiary);
        }
        .flag-menu-sense:hover {
            background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-tertiary));
        }
        .flag-menu-sense.selected {
            border-color: color-mix(in srgb, var(--accent-primary) 64%, var(--border-color));
            background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-tertiary));
        }
        .flag-menu-sense .fm-pos,
        .flag-menu-sense .fm-pct {
            color: var(--text-muted);
        }
        .flag-menu-sense .fm-gloss {
            color: var(--text-primary);
            font-family: var(--font-reading);
            font-size: 13px;
        }
        .flag-menu-categories {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            transition: opacity 0.15s;
        }
        .flag-menu-categories.is-disabled {
            opacity: 0.34;
            pointer-events: none;
        }
        .flag-menu-category {
            min-height: 34px;
            padding: 6px 11px;
            border: 1px solid var(--border-color);
            border-radius: 999px;
            background: transparent;
            color: var(--text-secondary);
            font: 650 10px/1 var(--font-emphasis);
            cursor: pointer;
        }
        .flag-menu-category:hover {
            border-color: color-mix(in srgb, var(--accent-primary) 46%, var(--border-color));
            color: var(--text-primary);
        }
        .flag-menu-category.selected {
            border-color: color-mix(in srgb, var(--accent-primary) 64%, var(--border-color));
            background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-tertiary));
            color: var(--text-primary);
        }
        .flag-menu-pairing {
            padding: 12px 13px;
            border-color: color-mix(in srgb, var(--accent-primary) 30%, var(--border-color));
            border-radius: 11px;
            background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-tertiary));
        }
        .flag-pairing-sense {
            color: var(--text-primary);
            font-family: var(--font-reading);
        }
        .flag-pairing-sense > span,
        .flag-preview-object > span {
            color: var(--accent-primary);
        }
        .flag-pairing-arrow {
            color: var(--text-muted);
            font: 600 9px/1.2 var(--font-emphasis);
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .flag-pairing-example,
        .flag-preview-context {
            color: var(--text-secondary);
            font-family: var(--font-reading);
        }
        .flag-preview-context {
            margin-top: 5px;
            font-size: 11px;
        }
        .flag-preview-object > span,
        .flag-preview-object > strong,
        .flag-preview-object > small {
            display: block;
        }
        .flag-preview-object > span {
            font: 700 9px/1.2 var(--font-emphasis);
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .flag-preview-object > strong {
            margin-top: 4px;
            color: var(--text-primary);
            font: 700 16px/1.25 var(--font-reading);
        }
        .flag-preview-object > small {
            margin-top: 3px;
            color: var(--text-muted);
            font: 500 10px/1.4 var(--font-reading);
        }
        .flag-menu-note-label {
            display: block;
            margin: 0 0 7px;
            color: var(--text-muted);
            font-family: var(--font-emphasis);
        }
        .flag-menu-note-section {
            border-top: 1px solid var(--border-color);
            padding-top: 13px;
        }
        .flag-menu-note-summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 38px;
            color: var(--text-secondary);
            font: 700 12px/1.2 var(--font-emphasis);
            cursor: pointer;
            list-style: none;
        }
        .flag-menu-note-summary::-webkit-details-marker { display: none; }
        .flag-menu-note-summary::after {
            content: '+';
            color: var(--accent-primary);
            font-size: 20px;
            line-height: 1;
        }
        .flag-menu-note-section[open] .flag-menu-note-summary::after { content: '−'; }
        .flag-menu-note-summary small {
            margin: 0 10px 0 auto;
            color: var(--text-muted);
            font: 500 10px/1.2 var(--font-reading);
        }
        .flag-menu-note-composer { padding-top: 8px; }
        .flag-menu-note-back {
            min-height: 40px;
            padding: 9px 14px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            font: 700 12px/1.2 var(--font-emphasis);
            cursor: pointer;
        }
        .flag-menu .card-meta-body.is-note-mode .flag-menu-note-section {
            margin-top: 0;
            border-top: 0;
            padding-top: 0;
        }
        .flag-menu .card-meta-body.is-note-mode .flag-menu-note-summary { display: none; }
        .flag-menu-note-help {
            margin-top: 7px;
            color: var(--text-muted);
            font: 500 10px/1.4 var(--font-reading);
        }
        .flag-menu-note-actions {
            display: none;
            grid-template-columns: auto 1fr;
            gap: 8px;
            margin-top: 12px;
        }
        .flag-menu .card-meta-body.is-note-mode .flag-menu-note-actions { display: grid; }
        .flag-menu-note-send {
            min-height: 40px;
            padding: 9px 14px;
            border: 1px solid var(--accent-primary);
            border-radius: 10px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            font: 700 12px/1.2 var(--font-emphasis);
            cursor: pointer;
        }
        .flag-menu-note-send:disabled {
            opacity: 0.42;
            cursor: not-allowed;
        }
        .flag-menu-note {
            min-height: 88px;
            padding: 11px 12px;
            border-color: var(--border-color);
            border-radius: 11px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }
        .flag-menu-note:focus {
            border-color: color-mix(in srgb, var(--accent-primary) 68%, var(--border-color));
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 12%, transparent);
        }
        .flag-menu .card-meta-flag-btn {
            min-height: 45px;
            padding: 11px 14px;
            border: 1px solid var(--accent-primary);
            border-radius: 11px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            font: 700 12px/1.2 var(--font-emphasis);
            letter-spacing: 0;
            text-transform: none;
        }
        .flag-menu .card-meta-flag-btn:hover {
            border-color: var(--accent-primary);
            background: color-mix(in srgb, var(--accent-primary) 88%, white);
        }
        .flag-menu .card-meta-flag-btn:disabled {
            opacity: 0.42;
            cursor: not-allowed;
        }
        .flag-menu-status {
            position: sticky;
            top: 0;
            z-index: 3;
            margin: 0 0 12px;
            padding: 10px 12px;
            border: 1px solid color-mix(in srgb, var(--success) 48%, var(--border-color));
            border-radius: 10px;
            background: color-mix(in srgb, var(--success) 12%, var(--bg-tertiary));
            color: color-mix(in srgb, var(--success) 74%, white);
            font: 700 12px/1.35 var(--font-emphasis);
        }
        .flag-menu-status.is-error {
            border-color: color-mix(in srgb, var(--error) 52%, var(--border-color));
            background: color-mix(in srgb, var(--error) 10%, var(--bg-tertiary));
            color: color-mix(in srgb, var(--error) 74%, white);
        }
        .flag-sent-toast {
            position: fixed;
            top: max(18px, env(safe-area-inset-top));
            left: 50%;
            /* This confirmation is global, not part of the flag sheet. Keep it
               above modals and the app loading surface so a completed queue
               write cannot resolve invisibly behind whatever opened next. */
            z-index: 30002;
            display: flex;
            align-items: center;
            gap: 11px;
            min-width: min(82vw, 250px);
            padding: 12px 15px;
            border: 1px solid color-mix(in srgb, var(--success) 45%, var(--border-color));
            border-radius: 14px;
            background: color-mix(in srgb, var(--bg-card) 92%, var(--success) 8%);
            color: var(--text-primary);
            box-shadow: 0 14px 38px rgba(0, 0, 0, 0.32);
            opacity: 0;
            transform: translate(-50%, -12px) scale(0.97);
            transition: opacity 160ms ease, transform 180ms ease;
            pointer-events: none;
        }
        .flag-sent-toast[hidden] { display: none; }
        .flag-sent-toast.is-visible {
            opacity: 1;
            transform: translate(-50%, 0) scale(1);
        }
        .flag-sent-toast.is-error {
            border-color: color-mix(in srgb, var(--error) 50%, var(--border-color));
            background: color-mix(in srgb, var(--bg-card) 92%, var(--error) 8%);
        }
        .flag-sent-toast.is-pending {
            border-color: color-mix(in srgb, var(--accent-primary) 48%, var(--border-color));
            background: color-mix(in srgb, var(--bg-card) 92%, var(--accent-primary) 8%);
        }
        .flag-sent-toast-icon {
            display: grid;
            place-items: center;
            width: 30px;
            height: 30px;
            flex: 0 0 30px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--success) 18%, transparent);
            color: var(--success);
            font-weight: 800;
        }
        .flag-sent-toast.is-error .flag-sent-toast-icon {
            background: color-mix(in srgb, var(--error) 18%, transparent);
            color: var(--error);
        }
        .flag-sent-toast.is-pending .flag-sent-toast-icon {
            background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
            color: var(--accent-primary);
        }
        .flag-sent-toast-copy {
            display: flex;
            min-width: 0;
            flex-direction: column;
            gap: 2px;
            font: 12px/1.25 var(--font-emphasis);
        }
        .flag-sent-toast-copy strong { font-size: 13px; }
        .flag-sent-toast-copy > span { color: var(--text-muted); }
        .flag-simple-note-section {
            margin-top: 0 !important;
        }
        .flag-simple-send-note,
        .flag-simple-actions button,
        .flag-senses-route,
        .flag-senses-back,
        .flag-simple-sense button {
            border: 1px solid var(--border-color);
            background: var(--bg-tertiary);
            color: var(--text-primary);
            font: 700 12px/1.2 var(--font-emphasis);
            cursor: pointer;
        }
        .flag-simple-send-note {
            width: 100%;
            min-height: 42px;
            margin-top: 9px;
            border-color: var(--accent-primary);
            border-radius: 10px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
        }
        .flag-simple-send-note:disabled {
            opacity: 0.38;
            cursor: not-allowed;
        }
        .flag-simple-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }
        .flag-simple-actions button {
            min-height: 43px;
            padding: 9px 10px;
            border-radius: 10px;
        }
        .flag-simple-actions button[data-simple-flag="elision"] {
            grid-column: auto;
        }
        .flag-simple-actions button:hover,
        .flag-senses-route:hover,
        .flag-simple-sense button:hover {
            border-color: color-mix(in srgb, var(--accent-primary) 58%, var(--border-color));
            background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-tertiary));
        }
        .flag-senses-route {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            min-height: 58px;
            padding: 10px 13px;
            border-radius: 11px;
            text-align: left;
        }
        .flag-senses-route strong,
        .flag-senses-route small {
            display: block;
        }
        .flag-senses-route small {
            margin-top: 3px;
            color: var(--text-muted);
            font: 500 10px/1.3 var(--font-reading);
        }
        .flag-senses-route > span:last-child {
            color: var(--accent-primary);
            font-size: 25px;
        }
        .flag-senses-back {
            min-height: 36px;
            margin-bottom: 16px;
            padding: 7px 11px;
            border-radius: 9px;
            color: var(--text-secondary);
        }
        #flagMenuSensesView > h4 {
            margin: 0 0 9px;
            color: var(--text-muted);
            font: 700 10px/1.2 var(--font-emphasis);
            letter-spacing: 0.09em;
            text-transform: uppercase;
        }
        .flag-simple-senses {
            display: grid;
            gap: 9px;
        }
        .flag-simple-sense {
            padding: 11px;
            border: 1px solid var(--border-color);
            border-radius: 11px;
            background: color-mix(in srgb, var(--bg-tertiary) 76%, transparent);
        }
        .flag-simple-sense-meaning {
            display: flex;
            gap: 8px;
            align-items: baseline;
        }
        .flag-simple-sense-meaning span {
            color: var(--accent-primary);
            font: 700 9px/1 var(--font-emphasis);
        }
        .flag-simple-sense-meaning strong {
            color: var(--text-primary);
            font: 650 13px/1.35 var(--font-reading);
        }
        .flag-simple-sense-example {
            margin-top: 8px;
            color: var(--text-secondary);
            font: 500 12px/1.4 var(--font-reading);
        }
        .flag-simple-sense-example small {
            display: block;
            margin-top: 3px;
            color: var(--text-muted);
        }
        .flag-simple-sense-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-top: 10px;
        }
        .flag-simple-sense button {
            min-height: 38px;
            border-radius: 9px;
        }
        .flag-whole-card-btn {
            box-shadow: 0 7px 18px color-mix(in srgb, var(--accent-primary) 20%, transparent);
        }
        .flag-menu-content.is-sending,
        #flagMenuContent.is-sending {
            pointer-events: none;
            opacity: 0.72;
        }
        @media (max-width: 560px) {
            .flag-menu {
                align-items: flex-end;
                padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
            }
            .flag-menu .card-meta-modal-content {
                width: 100%;
                height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
                max-height: none;
                border-radius: 18px 18px 12px 12px;
            }
            .flag-menu .card-meta-header { padding: 12px 14px 10px; }
            .flag-menu .card-meta-body { padding: 11px 14px 18px; }
            .flag-menu .card-meta-footer { padding: 10px 14px 12px; }
            .flag-menu-targets {
                grid-template-columns: 1fr;
            }
            .flag-menu-quick-actions {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
            .flag-menu-target {
                padding: 10px 11px;
            }
            .flag-menu-note {
                min-height: 132px;
                resize: none;
                font-size: 16px;
            }
        }

        .kb-hint.correct {
            color: var(--success);
            font-weight: 700;
            font-size: 18px;
        }

        .kb-hint.incorrect {
            color: var(--error);
            font-weight: 700;
            font-size: 18px;
        }

        .kb-arrows {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }

        .kb-arrow-row {
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .kb-arrow-labels {
            display: flex;
            justify-content: space-between;
            width: 100%;
            padding: 0 2px;
        }

        .swipe-indicator {
            position: absolute;
            top: 50%;
            font-size: 72px;
            font-weight: bold;
            opacity: 0;
            transition: opacity 0.2s;
            z-index: 10;
            pointer-events: none;
            transform: translateY(-50%);
        }

        .swipe-indicator.correct {
            right: 20px;
            color: var(--accent-green);
            text-shadow: 0 0 20px var(--glow-green);
        }

        .swipe-indicator.incorrect {
            left: 20px;
            color: var(--error);
            text-shadow: 0 0 20px rgba(255, 82, 82, 0.5);
        }

        .swipe-indicator.visible {
            opacity: 1;
        }

        .card.flipped {
            transform: rotateY(180deg);
        }

        /* Hide front card controls when flipped */
        .card.flipped .card-front {
            visibility: hidden;
            opacity: 0;
            pointer-events: none;
        }

        .card.flipped .card-back {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
        }

        .card-front {
            visibility: visible;
            pointer-events: auto;
        }

        /* Ensure back is hidden when not flipped */
        .card-back {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 16px;
            padding: 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: var(--bg-card);
            box-shadow: 0 10px 40px rgba(0,0,0,0.4);
            overflow: hidden;
        }

        .card-face::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 16px;
            padding: 2px;
            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary), var(--accent-primary));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            pointer-events: none;
            /* Temporary product switch: keep the accent rim available without
               showing it. Set this custom property to 1 to restore it. */
            opacity: var(--card-accent-border-opacity, 0);
        }

        @media (max-width: 767px) {
            .card-face {
                padding: 20px;
            }
        }

        .card-back {
            transform: rotateY(180deg);
            padding-left: 4px;
            padding-right: 4px;
            /* Override .card-face's justify-content: center so the back's
               content anchors to the top and the scrollable meanings region
               takes the middle. Prevents the whole layout from shifting as
               meaning count / translation length changes between cards. */
            justify-content: flex-start;
            padding-top: 20px;
            padding-bottom: 4px;
        }

        /* Inline set scrubber — replaces #deckProgressTrack (retired below)
           on both desktop and mobile, sitting in the same reserved strip
           above the card. Shared layout here; positioning (absolute above
           the card on mobile, order:-1 flex item on desktop) is set per
           breakpoint further down. */
        #deckProgressTrack {
            display: none;
        }
        /* Top control row. The hairline divider and the 6px inset were both
           spending height on nothing: the strip already has its own outline,
           so it reads as a separate band without a rule under it. The height
           they freed goes straight into the controls (see .cbs-strip /
           .cbs-chevron / .cbs-gear stretching to fill this row). */
        .card-back-scrubber {
            display: flex;
            align-items: center;
            gap: 4px;
            height: 52px;
            /* No outer inset: the strip and gear draw their own edges, so this
               padding only shrank the controls inside a row whose height is
               already fixed. */
            padding: 0;
            box-sizing: border-box;
            transition: opacity 0.2s;
            z-index: 12;
        }
        /* A child card keeps this bar — it is where the return control lives.
           The pip row and the card chevrons are what get hidden, since neither
           addresses a card in the active set from here. */
        .card-container:has(.card.is-stacked) .cbs-pips,
        .card-container:has(.card.is-stacked) .cbs-chevron {
            display: none;
        }

        /* Return control on a child card. Fills the space the pips vacate, so
           the target is the width of the strip rather than a 44px disc. */
        .cbs-return {
            flex: 1 1 auto;
            min-width: 0;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            height: calc(100% - 4px);
            min-height: 44px;
            padding: 0 12px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.09);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #fff;
            cursor: pointer;
            text-align: left;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .cbs-return[hidden] {
            display: none;
        }
        .cbs-return:hover {
            background: rgba(255, 255, 255, 0.16);
        }
        .cbs-return:active {
            background: rgba(255, 255, 255, 0.22);
        }
        .cbs-return-arrow {
            flex: 0 0 auto;
            font-size: 26px;
            line-height: 1;
            color: rgba(255, 255, 255, 0.85);
        }
        .cbs-return-text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-width: 0;
            line-height: 1.15;
        }
        .cbs-return-kicker {
            font: 600 10.5px/1 var(--font-data);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.6);
        }
        .cbs-return-label {
            font: 650 16px/1.2 var(--font-reading);
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .cbs-strip {
            display: flex;
            align-items: center;
            flex: 1;
            /* Fill whatever the row leaves rather than a fixed 52px. Capped so
               the taller mobile rail (74px) doesn't stretch the controls into
               a slab. */
            height: 100%;
            max-height: 62px;
            gap: 3px;
            padding: 0 2px;
            box-sizing: border-box;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.14);
        }

        .cbs-chevron {
            flex: 0 0 50px;
            width: 50px;
            /* Stretch to the strip's inner height instead of a fixed 44px —
               the reclaimed divider/padding space becomes tap target. */
            height: calc(100% - 4px);
            min-height: 44px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            line-height: 1;
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
        }
        .cbs-chevron-prev,
        .cbs-chevron-next {
            background: rgba(255, 255, 255, 0.09);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #fff;
        }
        .cbs-chevron:disabled {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.25);
            cursor: default;
        }

        .cbs-pips {
            display: flex;
            align-items: center;
            flex: 1;
            height: calc(100% - 4px);
            min-height: 44px;
            gap: 3px;
            touch-action: none;
            cursor: pointer;
        }

        .cbp-pip {
            flex: 1 1 0;
            min-width: 0;
            height: 26px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.15);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            font: 700 13px/1 var(--font-reading);
            color: transparent;
            transition: all 170ms cubic-bezier(0.2, 0.85, 0.25, 1.25);
        }
        .cbp-pip.is-visited {
            background: rgba(255, 255, 255, 0.4);
        }
        .cbp-pip.is-current {
            flex: 0 0 34px;
            width: 34px;
            height: 34px;
            background: #ffffff;
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
            color: #1a1f26;
        }
        /* Same signal as the desktop scrubber: the pip holds its place and
           turns violet for the duration of the phrase chain. */
        .cbp-pip.is-current.is-phrases {
            background: var(--accent-phrases);
            box-shadow: 0 0 0 3px rgba(var(--accent-phrases-rgb), 0.3);
            color: #241b3d;
        }

        .cbs-gear {
            flex: 0 0 56px;
            width: 56px;
            /* Matches .cbs-strip so the two sit on the same top/bottom line. */
            height: 100%;
            max-height: 62px;
            border-radius: 11px;
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.16);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.85);
        }
        .cbs-gear svg {
            width: 28px;
            height: 28px;
        }

        /* Redundant on every breakpoint now — swiping already means grade,
           the legend was just restating it. Kept hidden everywhere so
           mobile and desktop no longer diverge here. */
        .swipe-legend {
            display: none;
        }
        .swipe-legend-wrong { color: #e08b8b; }
        .swipe-legend-right { color: #6fd8c0; }
        .swipe-legend-sep {
            width: 1px;
            height: 12px;
            background: rgba(255, 255, 255, 0.16);
        }
        .swipe-legend-commit {
            display: none;
            font-size: 11.5px;
            font-weight: 700;
        }
        .swipe-legend.legend-commit-correct,
        .swipe-legend.legend-commit-incorrect {
            border-top-width: 1px;
        }
        .swipe-legend.legend-commit-correct {
            background: rgba(0, 212, 170, 0.16);
            border-top-color: rgb(0, 212, 170);
        }
        .swipe-legend.legend-commit-incorrect {
            background: rgba(255, 82, 82, 0.16);
            border-top-color: rgb(255, 82, 82);
        }
        .swipe-legend.legend-commit-correct .swipe-legend-wrong,
        .swipe-legend.legend-commit-correct .swipe-legend-sep,
        .swipe-legend.legend-commit-correct .swipe-legend-right,
        .swipe-legend.legend-commit-incorrect .swipe-legend-wrong,
        .swipe-legend.legend-commit-incorrect .swipe-legend-sep,
        .swipe-legend.legend-commit-incorrect .swipe-legend-right {
            display: none;
        }
        .swipe-legend.legend-commit-correct .swipe-legend-commit,
        .swipe-legend.legend-commit-incorrect .swipe-legend-commit {
            display: inline;
        }
        .swipe-legend.legend-commit-correct .swipe-legend-commit { color: #6fd8c0; }
        .swipe-legend.legend-commit-incorrect .swipe-legend-commit { color: #e08b8b; }


        /* Back layout: header / scroll / tray / sentence / links.
           #backContent sits inside .card-back and is the actual flex column
           container — updateCard() writes all rows directly into it, so the
           flex-child rules target its direct children. */
        #backContent,
        .about-example-card-inner .card-details {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            width: 100%;
            row-gap: 10px;
        }

        #backContent > .back-header,
        .about-example-card-inner .card-details > .back-header {
            flex: 0 0 auto;
            width: 100%;
            margin-bottom: 0 !important;
            position: relative;
            text-align: left;
        }

        .back-headword-row {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 8px 10px;
            position: relative;
        }

        /* The back no longer renders a POS control beside the surface form.
           Centre the word while preserving the old layout if that control is
           re-enabled later. */
        .back-headword-row:not(:has(.back-pos-legend)) {
            justify-content: center;
        }

        /* `flex: 0 1 auto` lets the scroll region take its natural height
           instead of greedily filling the card. With `margin-top: auto`
           here and `margin-bottom: auto` on the LAST child of the block
           (`.links-section`), the two competing auto margins split the
           remaining slack evenly — centring the whole (meanings + tray +
           sentence + links) group vertically on sparse cards. One-sense
           words like `bueno` used to bottom-stack; now the group floats
           to the mid-card gap. When content fills the card, the auto
           margins collapse and the existing scroll-cap / overflow-y
           behaviour takes over unchanged. */
        #backContent > .meanings-scroll,
        .about-example-card-inner .card-details > .meanings-scroll {
            flex: 0 1 auto;
            min-height: 0;           /* required for overflow in a flex child */
            width: 100%;
            overflow-y: auto;
            margin-top: 0;
            /* No bottom padding: the row's own margin-bottom (6px) is
               the only gap between the last sense and whatever follows
               (tray's divider line, or the example sentence). Matches
               the sense-to-sense gap exactly.
               No mask-image fade either — the previous bottom-18px
               fade was a scroll affordance hint, but when decks are
               short (bueno, danse) and the last row sits near the
               scroll's bottom edge, the fade ate into the bottom of
               the row and read as a "halo" artefact. Native scrollbar
               is the clearer affordance when overflow actually happens. */
            padding-bottom: 0;
        }

        /* Pinned tray for MWE / CLITIC rows — only rendered when "Phrases
           mode" is off (js/ui.js); when on, those entries leave silently as
           chained child cards instead (collectChainItems in flashcards.js). */
        #backContent > .meanings-tray,
        .about-example-card-inner .card-details > .meanings-tray {
            flex: 0 0 auto;
            width: 100%;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 10px;
            margin-top: 0;
            margin-bottom: 0;
        }

        /* Chain-child card chrome (phrase/clitic handoff cards) */
        .card.is-chain-child .card-back .mobile-nav-row {
            display: none !important;
        }

        .phrase-summary-subtitle {
            margin-top: 4px;
            font-size: 13px;
            font-weight: 600;
            color: #b9c2cd;
            text-align: left;
        }

        /* One scrollable column of phrase cards, not a sequence you swipe
           through one at a time. Each item reads top to bottom, left
           aligned — no row backgrounds, no percentages. */
        .phrase-summary-scroll {
            flex: 1 1 auto;
            width: 100%;
            min-height: 0;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 12px;
        }
        .phrase-summary-item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
            width: 100%;
            padding: 12px 4px;
            text-align: left;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        .phrase-summary-item:first-child {
            border-top: none;
            padding-top: 0;
        }
        /* .phrase-summary-item is a column flex container, so the badge and its
           provenance pill need their own row wrapper — as bare flex children
           they would stack vertically. */
        .phrase-badge-row {
            display: flex;
            align-items: center;
        }
        .phrase-kind-badge {
            display: inline-block;
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: 0.04em;
            padding: 2px 7px;
            border-radius: 5px;
            background: rgba(20, 184, 166, 0.18);
            border: 1px solid rgba(20, 184, 166, 0.55);
            color: #7ce6d8;
        }
        /* Build-provenance letter, JST account only. Deliberately quieter than
           .phrase-kind-badge and than the POS colour treatment: no fill, thin
           border, low-opacity ink. It is a diagnostic sitting next to learner
           content and must not read as part of it. */
        .phrase-source-pill {
            display: inline-block;
            margin-left: 5px;
            min-width: 16px;
            font-size: 9.5px;
            font-weight: 700;
            line-height: 14px;
            text-align: center;
            padding: 0 3px;
            border-radius: 4px;
            border: 1px solid currentColor;
            background: transparent;
            opacity: 0.55;
            vertical-align: 1px;
        }
        .phrase-source-wiktionary   { color: #9fb4d8; }  /* W — Wiktionary */
        .phrase-source-spanishdict  { color: #d8b48c; }  /* S — SpanishDict */
        .phrase-source-corpus       { color: #a8d29a; }  /* C — corpus / PMI */
        .phrase-source-curated      { color: #c9a3d8; }  /* K — curated family */
        .phrase-source-construction { color: #8fc6cd; }  /* T — construction template */
        .phrase-expression {
            font-family: var(--font-reading);
            font-size: 20px;
            font-weight: 700;
            line-height: 1.25;
            color: #fff;
        }
        .phrase-translation {
            font-family: var(--font-reading);
            font-size: 17px;
            font-weight: 500;
            line-height: 1.3;
            color: #e6eaf0;
        }
        .phrase-context {
            font-size: 13px;
            font-style: italic;
            color: #b9c2cd;
        }
        .phrase-example {
            width: 100%;
            margin-top: 4px;
            padding: 10px 12px 6px;
            background: #0d141c;
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-left: 5px solid #14b8a6;
            border-radius: 10px;
        }
        /* ---- Attached-pronoun group (one block per base verb) -----------
           The header names the verb and says only "+ pronominal" — reflexive
           vs dative is not reliably known, so it must not be asserted. Each
           attached pronoun keeps its own translation, role detail and
           examples. Colour follows the CLITIC POS theme (.pos-clitic). */
        .clitic-group-title {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 6px;
        }
        .clitic-group-suffix {
            font-family: var(--font-data);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #fdba74;
        }
        .clitic-group-rows {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 2px;
        }
        .clitic-row {
            width: 100%;
            padding: 8px 0 8px 10px;
            border-left: 3px solid rgba(249, 115, 22, 0.55);
        }
        .clitic-row-head {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 8px;
        }
        .clitic-row-key {
            flex: 0 0 auto;
            font-family: var(--font-reading);
            font-size: 17px;
            font-weight: 700;
            color: #fdba74;
        }
        .clitic-row-translation {
            flex: 1 1 auto;
            min-width: 0;
            font-family: var(--font-reading);
            font-size: 16px;
            font-weight: 500;
            line-height: 1.3;
            color: #fff;
        }
        .clitic-row-detail {
            margin-top: 2px;
            font-size: 12.5px;
            font-style: italic;
            line-height: 1.35;
            color: #b9c2cd;
        }
        .clitic-more-toggle {
            flex: 0 0 auto;
            padding: 2px 8px;
            border: 1px solid rgba(249, 115, 22, 0.5);
            border-radius: 999px;
            background: rgba(249, 115, 22, 0.12);
            color: #fdba74;
            font-family: var(--font-data);
            font-size: 11.5px;
            font-weight: 700;
            cursor: pointer;
        }
        .clitic-more-toggle:hover {
            background: rgba(249, 115, 22, 0.22);
        }
        .clitic-more[hidden] {
            display: none;
        }
        .clitic-example {
            border-left-color: #f97316;
        }
        .clitic-example + .clitic-example {
            margin-top: 6px;
        }
        .clitic-form-hit {
            color: #fdba74;
            font-weight: 700;
        }

        /* ---- "In the wild" sentence list (second chain child) ----------
           Collapsed rows are a plain reading list. Opening one grows it into
           the translation plus a gloss of the words the learner has not met
           yet, which is what the old "2 new" badge only counted. */
        .wild-scroll {
            gap: 8px;
            /* Keep the list's own scroll from chaining to the page behind the
               card once it hits an end. */
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }
        .wild-row {
            display: block;
            width: 100%;
            /* Flex children shrink before their container overflows, so
               without this the rows squashed to fit and the list never
               scrolled. */
            flex: 0 0 auto;
            padding: 12px 14px;
            border: 1px solid rgba(255, 255, 255, 0.13);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.045);
            color: inherit;
            font: inherit;
            text-align: left;
            cursor: pointer;
            transition: background 150ms ease, border-color 150ms ease,
                        padding 150ms ease;
        }
        .wild-row:hover {
            background: rgba(255, 255, 255, 0.08);
        }
        .wild-row.is-revealed {
            padding: 16px 16px 18px;
            border-color: rgba(var(--accent-phrases-rgb), 0.5);
            background: rgba(var(--accent-phrases-rgb), 0.09);
        }
        .wild-target {
            color: #fff;
            font-family: var(--font-reading);
            font-size: 17px;
            font-weight: 500;
            line-height: 1.35;
        }
        .wild-row.is-revealed .wild-target {
            font-size: 19px;
        }
        .wild-reveal[hidden] {
            display: none;
        }
        .wild-english {
            margin-top: 9px;
            padding-top: 9px;
            border-top: 1px solid rgba(255, 255, 255, 0.13);
            color: #e6eaf0;
            font-size: 15px;
            font-style: italic;
            line-height: 1.35;
        }
        /* Only the words beyond the learner's position get a gloss; a sentence
           built entirely of known words shows nothing here. */
        /* One wrapping row rather than a stack: two or three unknown words
           read as a caption, not as a table. */
        .wild-new {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 3px 12px;
            margin-top: 7px;
            font-size: 14px;
            line-height: 1.3;
        }
        .wild-new-label {
            color: var(--text-muted);
            font-family: var(--font-data);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
        .wild-gloss-item {
            display: inline-flex;
            align-items: baseline;
            gap: 5px;
        }
        .wild-gloss-word {
            flex: 0 0 auto;
            color: #cdc3fb;
            font-family: var(--font-reading);
            font-weight: 650;
        }
        .wild-gloss-translation {
            min-width: 0;
            color: var(--text-muted);
        }

        .phrase-example-target {
            font-size: 16px;
            font-weight: 500;
            line-height: 1.4;
            color: #fff;
        }
        .phrase-example-translation {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(255, 255, 255, 0.13);
            font-size: 14px;
            line-height: 1.4;
            color: #e6eaf0;
        }

        .meaning-pos-section + .meaning-pos-section {
            margin-top: 6px;
        }

        /* Collapsible part-of-speech group. Only rendered when a card has more
           than one POS; a single-POS card keeps the plain section it always
           had, because a header and chevron around a two-line list is chrome
           with nothing to hide. */
        .pos-collapsible .pos-section-head {
            display: flex;
            align-items: center;
            gap: 7px;
            width: 100%;
            min-height: 38px;
            padding: 7px 10px;
            background: rgba(var(--sense-match-rgb), 0.10);
            border: none;
            border-left: 3px solid rgb(var(--sense-match-rgb));
            border-radius: 6px;
            cursor: pointer;
            text-align: left;
            font: inherit;
        }
        .pos-collapsible .pos-section-label {
            flex-shrink: 0;
            color: rgb(var(--sense-match-rgb));
            font-family: var(--font-emphasis);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.04em;
        }
        /* The group summary is the primary scan layer. It contains as many
           complete sense glosses as actually fit; JS measures the row and
           replaces only genuine overflow with +N. */
        .pos-collapsible .pos-section-summary {
            display: flex;
            align-items: baseline;
            gap: 0;
            flex: 1;
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
            color: var(--text-primary);
            font-family: var(--font-reading);
            /* Its own size, not --row-primary-size: that variable is set per
               row by the content-aware tiers (.row-text-xl … -sm), so a header
               sitting outside those containers only ever got the 17px
               fallback while the rows it heads rendered at up to 22px. The
               parent line then read as the smallest thing in its own group.
               Fixed instead, since sub-row sizes vary with their content. */
            font-size: 19px;
            font-weight: 650;
            line-height: 1.2;
        }
        .pos-collapsible .pos-summary-sense {
            flex: 0 0 auto;
            min-width: 0;
        }
        .pos-collapsible .pos-summary-sense + .pos-summary-sense::before {
            content: " · ";
            color: var(--text-muted);
            font-weight: 500;
        }
        /* The headword, when it differs from the word on the card. Carried on
           the pill rather than as a row tag or a nested level: only 201 POS
           groups in the deck hold more than one headword, so the pair is one
           level, not two. */
        .pos-collapsible .pos-pill-lemma {
            flex-shrink: 0;
            color: color-mix(in srgb, rgb(var(--sense-match-rgb)) 58%, var(--text-primary));
            font-family: var(--font-emphasis);
            font-size: 15px;
            font-weight: 700;
        }
        /* How many further meanings sit behind this pill. Makes the expand
           affordance honest — one meaning shown is not the whole story. */
        .pos-collapsible .pos-pill-more {
            flex: 0 0 auto;
            margin-left: 7px;
            color: var(--text-muted);
            font-size: 12px;
            font-family: var(--font-mono, monospace);
            font-weight: 700;
        }
        .pos-collapsible .pos-pill-more[hidden],
        .pos-collapsible .pos-summary-sense[hidden] {
            display: none;
        }
        /* Absent, not zero, when nothing was observed. A pill reading 0% looks
           like a measurement; blank reads as no evidence yet, which is true. */
        .pos-collapsible .pos-pill-pct {
            flex-shrink: 0;
        }

        /* One percentage grammar at both levels: the group aggregate in the
           header and the individual evidence values in its expanded rows. */
        .sense-percentage {
            color: rgb(var(--sense-match-rgb));
            /* Ordinary text rather than the tabular data face: at 12px the
               heavier figures drew more attention than a supporting number
               deserves. Size still separates it. */
            font-size: 12px;
            font-weight: 500;
            font-variant-numeric: tabular-nums;
            line-height: 1;
            white-space: nowrap;
        }

        .pos-collapsible .pos-pill-unassigned {
            flex-shrink: 0;
            color: var(--text-muted);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .pos-collapsible .pos-pill-known {
            flex-shrink: 0;
            color: var(--success);
            font-size: 11px;
            font-weight: 700;
        }

        .pos-collapsible .pos-section-chevron {
            flex-shrink: 0;
            color: var(--text-muted);
            font-size: 11px;
        }
        .pos-collapsible .meaning-pos-rows {
            display: none;
        }
        .pos-collapsible.is-open .meaning-pos-rows {
            display: block;
            margin: 5px 0 2px 6px;
            padding-left: 6px;
            border-left: 1px solid rgba(var(--sense-match-rgb), 0.38);
        }

        /* A fixed grammar bay keeps one to four POS labels stable beside the
           headword. One or two labels form one centred row; three or four use
           two rows. Every alternative stays fully legible. */
        .back-pos-legend {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-auto-rows: minmax(30px, auto);
            align-items: center;
            justify-items: stretch;
            align-content: center;
            gap: 5px;
            margin: 0 0 0 auto;
            flex: 0 0 206px;
            width: 206px;
            min-height: 70px;
        }
        .back-pos-legend.pos-count-1 {
            grid-template-columns: auto;
            justify-content: center;
        }
        .back-pos-legend.pos-count-1 .card-pos {
            width: auto;
            min-width: 78px;
        }
        .back-pos-legend.pos-count-3 > :last-child {
            grid-column: 1 / -1;
            width: calc(50% - 2.5px);
            justify-self: center;
        }

        /* Word + its single POS pill share the top line (.back-headword-row,
           inline with the word). This block holds what comes underneath:
           the lemma/citation on its own line, then verb morphology. */
        .back-grammar-block {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            margin: 3px 0 2px;
        }
        .back-lemma-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 5px 8px;
            width: 100%;
            line-height: 1.15;
        }
        .back-pos-legend .card-pos,
        .back-pos-unit .card-pos {
            margin: 0;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            justify-content: center;
            width: 100%;
            padding: 7px 9px;
            min-width: 0;
            white-space: nowrap;
            font-family: var(--font-reading);
            font-size: 14px;
            font-weight: 600;
            line-height: 1;
            text-transform: none;
            background: rgba(255, 255, 255, 0.055);
            border-color: rgba(255, 255, 255, 0.12);
            border-radius: 999px;
            cursor: pointer;
        }
        /* Non-interactive pills (no verb morphology to toggle) shouldn't
           look pressable. */
        .back-pos-legend span.card-pos {
            cursor: default;
        }
        .back-pos-legend .card-pos.has-morph-toggle {
            cursor: pointer;
        }
        .back-pos-legend .back-pos-tab {
            opacity: 0.76;
            border-color: rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.035);
            transition: opacity 150ms ease, background 150ms ease, border-color 150ms ease;
        }
        .back-pos-legend .back-pos-tab.selected {
            opacity: 1;
            background: color-mix(in srgb, currentColor 23%, transparent);
            border-color: color-mix(in srgb, currentColor 68%, transparent);
            box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent), 0 3px 10px rgba(0, 0, 0, 0.22);
        }
        .card-pos-list .front-pos-unit.is-inactive {
            opacity: 0.66;
        }
        .card-pos-list .front-pos-unit.is-active {
            opacity: 1;
        }
        .back-pos-dot {
            width: 7px;
            height: 7px;
            flex: 0 0 7px;
            border-radius: 50%;
            background: currentColor;
            box-shadow: 0 0 5px currentColor;
        }

        .meaning-pos-rows > .meaning-row:last-child {
            margin-bottom: 0 !important;
        }

        .meaning-pos-section .meaning-row {
            min-height: 48px;
            /* The same tint as the POS header above and the active row below.
               This was an opaque #1b232e, which — with the header at 0.10 and
               the active row at its own shade — meant an unselected sub-row
               read as a third kind of element rather than a sibling of the
               two. The border is what distinguishes active from inactive. */
            background: rgba(var(--sense-match-rgb), 0.10) !important;
            border: 1px solid rgba(255, 255, 255, 0.16);
            transition: background 160ms ease, border-color 160ms ease,
                        box-shadow 160ms ease, transform 160ms ease;
            /* Reserve the 18px check-glyph slot uniformly regardless of each
               row variant's own inline padding shorthand. */
            padding-left: 30px !important;
        }
        .meaning-row-check {
            position: absolute;
            left: 8px;
            top: 50%;
            transform: translateY(-50%);
            flex: 0 0 18px;
            z-index: 1;
        }

        .meaning-row.is-current-sense {
            /* Same flat fill as every other row and as the POS header above
               them. There used to be three different fills — 0.10 on the
               header, 0.08 unselected, 0.18 selected — so an unselected
               sub-row read as a third kind of thing rather than a sibling.
               The 2px outline below is what marks the active row. */
            background: rgba(var(--sense-match-rgb), 0.10) !important;
            border: 2px solid rgb(var(--sense-match-rgb));
            box-shadow: none;
            transform: none;
            opacity: 1 !important;
        }

        /* Zero top margin on the sentence so the only gap between the
           last sense/MWE and the example box is the row's own
           margin-bottom (6px) — matching sense-to-sense spacing, as
           requested. */
        #backContent > .sentence,
        .about-example-card-inner .card-details > .sentence {
            flex: 0 0 auto;
            width: 100%;
            margin-top: 0;
        }

        /* `margin-bottom: auto` pairs with `.meanings-scroll`'s
           `margin-top: auto` to centre the whole (meanings + tray +
           sentence + links) block vertically in the space below the
           header. Explicit margin-top: 4px sits inside the block
           itself — it's the gap between the example sentence and the
           links row, not a grow-to-fill hack. */
        /* Pinned to the bottom of the card at all times — the auto top
           margin absorbs whatever slack is left above it, instead of the
           row's position drifting with how tall the example sentence is. */
        #backContent > .links-section,
        .about-example-card-inner .card-details > .links-section {
            flex: 0 0 auto;
            margin-top: auto;
            margin-bottom: 0;
            padding-top: 6px;
        }

        .mwe-expression {
            max-width: 100%;
            min-width: 0;
            color: white;
            font-family: var(--font-reading);
            font-size: var(--row-primary-size, 17px);
            font-style: normal;
            font-weight: 700;
            line-height: 1.2;
            text-align: center;
            overflow-wrap: anywhere;
        }

        .special-meaning-copy {
            display: flex;
            flex: 1;
            min-width: 0;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 2px 8px;
            padding-inline: 8px;
            text-align: center;
            line-height: 1.2;
        }

        /* Source expression above English meaning gives the two languages a
           stable visual hierarchy without hard-coding a particular language. */
        .special-meaning-copy.bilingual-meaning-copy {
            flex-direction: column;
            flex-wrap: nowrap;
            gap: 4px;
        }

        .bilingual-meaning-copy .mwe-translation {
            display: block;
            align-self: stretch;
            padding-top: 4px;
            border-top: 1px solid rgba(255, 255, 255, 0.13);
            text-align: center;
        }

        .special-meaning-copy.has-counter {
            padding-right: 46px;
        }

        .special-meaning-copy strong {
            color: var(--text-primary);
            font-family: var(--font-reading);
            font-size: var(--row-secondary-size, 15px);
            font-style: italic;
            font-weight: 550;
            /* Same italic overhang reservation as .meaning-context. */
            padding-inline-end: 0.16em;
        }

        /* `.card-details strong` appears later in this stylesheet and uses
           the active app accent. Keep bilingual row translations white with
           a deliberately stronger selector so artist themes cannot turn the
           English MWE/clitic copy red. */
        .card-details .special-meaning-copy strong {
            color: #fff;
        }

        .special-meaning-copy small {
            color: var(--text-muted);
            font-family: var(--font-reading);
            font-size: var(--row-context-size, 12px);
            font-style: italic;
            font-weight: 500;
            line-height: 1.25;
            /* Same italic overhang reservation as .meaning-context. */
            padding-inline-end: 0.16em;
        }

        /* Content-aware typography: short rows fill the available card width
           confidently, while long rows step down before wrapping/clamping. */
        .row-text-xl {
            --row-primary-size: 21px;
            --row-secondary-size: 18px;
            --row-context-size: 17px;
        }

        .row-text-lg {
            --row-primary-size: 19px;
            --row-secondary-size: 17px;
            --row-context-size: 15px;
        }

        .row-text-md {
            --row-primary-size: 17px;
            --row-secondary-size: 15px;
            --row-context-size: 14px;
        }

        .row-text-sm {
            --row-primary-size: 15px;
            --row-secondary-size: 15px;
            --row-context-size: 14px;
        }

        .row-adaptive-text {
            font-size: var(--row-primary-size, 17px);
        }

        /* The ordinary dictionary senses are the card's primary reading
           content. Give them one extra step without enlarging the denser
           bilingual Expression/clitic rows that use the same type scale. */
        .meaning-row-regular .row-adaptive-text,
        .meaning-row-group .row-adaptive-text {
            font-size: calc(var(--row-primary-size, 17px) + 1px);
        }

        .meaning-row-mwe > .example-counter-group,
        .meaning-row-clitic > .example-counter-group {
            position: absolute;
            right: 7px;
            top: 50%;
            transform: translateY(-50%);
        }

        /* Regular-row translation: let the row grow naturally with the
           translation, but clamp at 3 lines with an ellipsis so very long
           glosses don't push everything else around. A post-render pass in
           updateCard() flags rows that actually overflow (`.is-clamped`) so
           the tap-to-expand affordance only appears where content is hidden;
           `.is-expanded` is set when the user taps to reveal the rest. */
        .meaning-row-translation {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.3;
            overflow-wrap: anywhere;
            word-break: break-word;
            max-width: 100%;
        }

        .sense-cross-reference {
            appearance: none;
            border: 0;
            border-bottom: 1px solid currentColor;
            border-radius: 0;
            padding: 0;
            background: transparent;
            color: rgb(var(--sense-match-rgb));
            font: inherit;
            font-weight: 650;
            line-height: inherit;
            cursor: pointer;
        }

        .sense-cross-reference:hover,
        .sense-cross-reference:focus-visible {
            color: var(--text-primary);
            border-bottom-color: rgb(var(--sense-match-rgb));
        }

        .sense-cross-reference:focus-visible {
            outline: 2px solid rgb(var(--sense-match-rgb));
            outline-offset: 3px;
        }

        .sense-cross-reference-prefix,
        .sense-cross-reference-separator {
            opacity: 0.72;
        }

        .sense-cross-reference-gloss {
            display: block;
        }

        .sense-cross-reference-related {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 3px 10px;
            width: 100%;
            margin-top: 3px;
            color: var(--text-muted);
            font-size: 10px;
            font-weight: 550;
            line-height: 1.35;
        }

        .sense-cross-reference-item {
            display: inline-flex;
            align-items: baseline;
            gap: 4px;
            white-space: nowrap;
        }

        .sense-cross-reference-related .sense-cross-reference {
            color: rgb(var(--sense-match-rgb));
            font-weight: 700;
        }

        .sense-metadata-list {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 0;
            width: 100%;
            margin-top: 3px;
            color: var(--text-secondary);
            font-size: 10px;
            font-style: normal;
            font-weight: 600;
            line-height: 1.3;
        }

        .sense-metadata-tier {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: baseline;
            width: 100%;
        }

        .sense-metadata-tier[hidden] {
            display: none;
        }

        .sense-metadata-tier--grammar {
            margin-top: 1px;
            color: var(--text-muted);
            font-size: 9px;
            font-weight: 550;
        }

        .sense-metadata-tier--details {
            justify-content: center;
            gap: 2px 0;
            margin-top: 4px;
            font-size: 11px;
            font-weight: 500;
            text-align: center;
            line-height: 1.45;
        }

        .sense-metadata-tier--details .sense-metadata-detail {
            width: auto;
            max-width: 100%;
            overflow-wrap: anywhere;
        }

        .sense-metadata-tier--details.is-single {
            margin-top: 2px;
        }

        .sense-metadata-tier-label {
            margin-right: 6px;
            opacity: 0.58;
            font-family: var(--font-data);
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
        }

        .sense-metadata-detail + .sense-metadata-detail::before {
            content: '·';
            margin: 0 5px;
            opacity: 0.5;
        }

        .sense-metadata-detail[data-family="register"] {
            color: color-mix(in srgb, #d97706 78%, var(--text-primary));
        }

        .sense-metadata-detail[data-family="domain"] {
            color: color-mix(in srgb, #2563eb 72%, var(--text-primary));
        }

        .sense-metadata-more {
            appearance: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            width: min(100%, 180px);
            min-height: 26px;
            border: 1px solid rgba(var(--sense-match-rgb), 0.24);
            border-radius: 999px;
            padding: 3px 10px;
            background: rgba(var(--sense-match-rgb), 0.06);
            color: rgb(var(--sense-match-rgb));
            font: inherit;
            font-size: 10.5px;
            margin: 4px auto 0;
            font-weight: 650;
            line-height: 1.2;
            cursor: pointer;
        }

        .sense-metadata-more:hover {
            background: rgba(var(--sense-match-rgb), 0.11);
        }

        .sense-metadata-more-count {
            min-width: 17px;
            border-radius: 999px;
            padding: 1px 5px;
            background: rgba(var(--sense-match-rgb), 0.13);
            font-family: var(--font-data);
            font-size: 9px;
            line-height: 1.4;
        }

        .sense-metadata-more:focus-visible {
            outline: 2px solid rgb(var(--sense-match-rgb));
            outline-offset: 2px;
        }

        .sense-metadata-chip {
            appearance: none;
            border: 1px solid rgba(var(--sense-match-rgb), 0.38);
            border-radius: 999px;
            padding: 1px 5px;
            background: rgba(var(--sense-match-rgb), 0.09);
            color: var(--text-secondary);
            font: inherit;
            font-size: 10px;
            font-style: normal;
            font-weight: 650;
            line-height: 1.25;
            white-space: normal;
        }

        button.sense-metadata-chip {
            cursor: pointer;
        }

        button.sense-metadata-chip::after {
            content: '›';
            display: inline-block;
            margin-left: 3px;
            opacity: 0.65;
        }

        button.sense-metadata-chip[aria-expanded="true"]::after {
            transform: rotate(90deg);
        }

        .sense-metadata-chip[data-family="register"] {
            border-color: rgba(245, 158, 11, 0.42);
            background: rgba(245, 158, 11, 0.09);
        }

        .sense-metadata-chip[data-family="domain"] {
            border-color: rgba(96, 165, 250, 0.4);
            background: rgba(96, 165, 250, 0.08);
        }

        .meaning-row .meaning-context {
            font-size: var(--row-context-size, 13px);
        }

        .meaning-row-translation.is-clamped {
            cursor: pointer;
        }

        .meaning-row-translation.is-expanded {
            display: block;
            -webkit-line-clamp: unset;
            line-clamp: unset;
            overflow: visible;
        }

        /* The selected subsense is the disclosure destination: always let it
           grow to reveal its complete gloss and metadata without a second
           tap on an ellipsis or an abbreviated pill. */
        .meaning-row.is-current-sense .meaning-row-translation {
            display: block;
            -webkit-line-clamp: unset;
            line-clamp: unset;
            overflow: visible;
        }
        .meaning-row.is-current-sense .sense-metadata-list {
            max-width: 100%;
        }
        .meaning-row.is-current-sense .sense-metadata-detail {
            overflow-wrap: anywhere;
        }

        /* Inactive sub-senses are compact navigation choices. The selected
           one remains uncapped and grows to show its complete dictionary
           detail, so density never makes information inaccessible. */
        .group-card-varying-cell:not(.is-active-subsense) > .row-adaptive-text,
        .group-card-varying-cell:not(.is-active-subsense) > .meaning-context-cell {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            overflow: hidden;
        }

        .meaning-row-regular:not(.is-current-sense) .meaning-row-translation {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            overflow: hidden;
        }

        /* Selection elevation is coloured by the surrounding POS section in
           `.meaning-row.is-current-sense`; this legacy class only preserves
           stacking for callers and older cached markup. */
        .meaning-row.selected {
            position: relative;
            z-index: 1;
        }

        /* Inline context: smaller, dimmer, flows on the same line as the
           translation. A leading "·" separates it from the translation. If
           the context is long we truncate at a word boundary and show a
           clickable "…" that expands the full text. */
        .meaning-context {
            font-size: 13px;
            font-weight: 400;
            /* Was dimmed to 0.6 and italic, which made it the hardest text on
               the card to read. The leading separator dot and the smaller size
               already mark it as secondary. */
            opacity: 1;
            font-style: normal;
            /* Italic glyphs lean past their advance width, but every box that
               clips this text is measured from that advance width: the 3-line
               `-webkit-box` clamp on .meaning-row-translation (overflow:hidden),
               the sub-sense cells' own overflow:hidden, and the max-content
               grid tracks they sit in. The result was a ~2-3px shave off the
               last italic character on the right edge. Reserving a sliver of
               trailing inline space puts the overhang inside every one of
               those boxes. Inline padding, so no row height changes. */
            padding-inline-end: 0.16em;
        }

        .meaning-context .ctx-expand {
            cursor: pointer;
            margin-left: 1px;
            padding: 0 2px;
            opacity: 0.9;
        }

        .meaning-context .ctx-expand:hover {
            opacity: 1;
        }

        /* SpanishDict sense metadata, separated from ordinary semantic
           context so a construction such as `used with "con"` reads as a
           usable language hint rather than another fragment of the gloss. */
        .meaning-usage-pill {
            display: inline-flex;
            align-items: center;
            max-width: 100%;
            margin-inline-start: 0.28em;
            border: 1px solid color-mix(in srgb, var(--accent-secondary) 42%, transparent);
            border-radius: 999px;
            background: color-mix(in srgb, var(--accent-secondary) 11%, transparent);
            color: var(--text-primary);
            font-family: var(--font-reading);
            font-size: 10px;
            font-style: normal;
            font-weight: 650;
            line-height: 1.25;
            vertical-align: 0.08em;
            overflow: hidden;
        }

        .meaning-usage-source {
            align-self: stretch;
            display: inline-flex;
            align-items: center;
            padding: 1px 5px;
            border-inline-end: 1px solid color-mix(in srgb, var(--accent-secondary) 32%, transparent);
            color: var(--accent-secondary);
            font-size: 8px;
            font-weight: 800;
            letter-spacing: 0.025em;
            white-space: nowrap;
        }

        .meaning-usage-label {
            min-width: 0;
            padding: 1px 6px;
            overflow-wrap: anywhere;
        }

        .meaning-context-cell .meaning-usage-pill,
        .group-card-shared .meaning-usage-pill {
            margin-block: 1px;
        }

        /* Register/dialect tag on a sense row (slang, vulgar, regional…).
           Deliberately quieter than the translation and not POS-coloured: it
           qualifies how a word is used, it does not compete with the meaning
           itself or with the POS legend above the rows. */
        .meaning-register {
            display: inline-block;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.03em;
            text-transform: lowercase;
            vertical-align: middle;
            padding: 1px 6px;
            margin-left: 5px;
            border-radius: 999px;
            opacity: 0.75;
            color: var(--text-primary);
            background: rgba(127, 127, 127, 0.16);
            border: 1px solid rgba(127, 127, 127, 0.22);
            white-space: nowrap;
        }

        /* Vulgar is the one tag a learner benefits from noticing before they
           use the word in the wrong room; give it a warning tint. */
        .meaning-register[data-register="vulgar"] {
            background: rgba(220, 70, 70, 0.16);
            border-color: rgba(220, 70, 70, 0.3);
        }

        .card-word {
            font-family: var(--font-emphasis);
            /* Headword baseline, front face. shrinkToFit() below still steps
               long prompts down to one line, so raising the ceiling only
               affects words that already had room to spare. */
            font-size: 70px;
            font-weight: 700;
            margin-bottom: 8px;
            color: #fff;
            text-align: center;
            /* updateCard measures the available width and shrinks long prompts
               to one line. Keep wrapping disabled so the result cannot fall
               back to an awkward two-line word after measurement. */
            width: 100%;
            max-width: 100%;
            white-space: nowrap;
            overflow-wrap: normal;
            word-break: normal;
            line-height: 1.1;
        }

        .card-lemma {
            font-family: var(--font-reading);
            font-size: 35px;
            color: color-mix(in srgb, rgb(var(--card-pos-rgb, var(--accent-primary-rgb))) 64%, var(--text-primary));
            text-align: center;
            margin-bottom: 10px;
            font-weight: 500;
            opacity: 1;
        }

        .card-lemma.has-form-note {
            display: flex !important;
            align-items: baseline;
            justify-content: center;
            flex-wrap: wrap;
            column-gap: 7px;
        }

        .card-lemma.has-form-note::after {
            content: "· " attr(data-form-note);
            font-family: var(--font-reading);
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 0.01em;
            color: var(--text-muted);
        }

        .card-meanings-front {
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            margin-bottom: 10px;
        }

        .front-meaning-row {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 8px;
            max-width: 100%;
        }

        .front-meaning-text {
            font-family: var(--font-emphasis);
            font-weight: 600;
            color: white;
            text-align: center;
        }

        .surface-relation-cue {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            width: fit-content;
            max-width: 100%;
            padding: 3px 10px;
            border: 1px solid rgba(var(--card-pos-rgb), 0.28);
            border-radius: 999px;
            background: rgba(var(--card-pos-rgb), 0.1);
            color: color-mix(in srgb, rgb(var(--card-pos-rgb)) 52%, white);
            font-family: var(--font-reading);
            font-size: 14px;
            font-weight: 650;
            line-height: 1.2;
            letter-spacing: 0.01em;
            white-space: nowrap;
        }

        .surface-relation-cue[hidden] {
            display: none;
        }

        .front-surface-relation {
            margin: -2px auto 10px;
        }

        .back-surface-relation {
            margin-top: 4px;
        }

        .front-meaning-pos {
            font-family: var(--font-data);
            font-size: 10px;
            text-transform: uppercase;
            padding: 3px 8px;
            border-radius: 4px;
            border: 1px solid var(--border-color);
            background: var(--bg-tertiary);
            color: white;
            white-space: nowrap;
            flex-shrink: 0;
        }

        /* The front uses the same fixed top-right grammar bay as the back.
           Its contents are centred within that bay and can use a 2 x 2 grid
           without changing position or obscuring one label with another. */
        .card-front .card-pos-list,
        .card-pos-list {
            position: absolute;
            top: 30px;
            right: 30px;
            transform: none;
            z-index: 4;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-auto-rows: minmax(30px, auto);
            place-content: center;
            align-items: center;
            gap: 5px;
            width: 206px;
            min-height: 70px;
            margin-bottom: 0;
        }
        /* Centred across the top rather than pinned to the right corner. The
           corner placement is what made fitBackHeadword cap the headword
           against the legend's width; centred, the pills sit above the word
           instead of beside it and the word keeps the full card. */
        .card-front .card-pos-list,
        .card-pos-list {
            left: 50%;
            right: auto;
            transform: translateX(-50%);
            justify-content: center;
            justify-items: center;
        }
        @media (max-width: 767px) {
            .card-front .card-pos-list,
            .card-pos-list { left: 50%; right: auto; transform: translateX(-50%); }
        }
        .card-pos-list.pos-count-1 {
            grid-template-columns: auto;
            justify-content: center;
        }
        .card-pos-list.pos-count-1 .card-pos {
            width: auto;
            min-width: 78px;
        }
        .card-pos-list.pos-count-3 > :last-child {
            grid-column: 1 / -1;
            width: calc(50% - 2.5px);
            justify-self: center;
        }
        @media (max-width: 767px) {
            .card-pos-list {
                top: 18px;
                left: 0;
                right: 0;
                width: auto;
                min-height: 0;
                padding: 0 14px;
            }
            .back-pos-legend {
                flex-basis: auto;
                width: auto;
                min-height: 0;
            }
            .card-pos-list .card-pos,
            .back-pos-legend .card-pos,
            .back-pos-unit .card-pos {
                padding-inline: 7px;
            }
        }
        /* Child cards used to push the POS pills down 62px to clear the exit
           disc in this corner. That control now lives in the top bar, so the
           corner is free and every card keeps the same pill position. */
        .card-pos-list .card-pos {
            margin-bottom: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            white-space: nowrap;
            padding: 7px 9px;
            border-radius: 999px;
            background: color-mix(in srgb, currentColor 14%, transparent);
            border-color: color-mix(in srgb, currentColor 38%, transparent);
            font-family: var(--font-reading);
            font-size: 14px;
            font-weight: 650;
            line-height: 1;
            text-transform: none;
        }
        .card-pos-list .card-pos.has-morph-toggle {
            cursor: pointer;
        }
        @media (max-width: 767px) {
            .card-pos-list .card-pos,
            .back-pos-legend .card-pos,
            .back-pos-unit .card-pos {
                font-size: 12.5px;
            }
        }


        .front-pos-unit .front-meaning-pos {
            border-radius: 999px;
            background: color-mix(in srgb, currentColor 14%, transparent);
            border-color: color-mix(in srgb, currentColor 38%, transparent);
            font-family: var(--font-reading);
            font-size: 11px;
            font-weight: 650;
            text-transform: none;
        }

        .front-pos-unit {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            position: relative;
        }

        /* Recognition keeps morphology in the verb-pill popover. Production
           additionally uses this compact coupled strip beneath the English
           senses, so person and tense are visible before the learner answers. */
        .card-morph {
            display: none;
        }
        .card-morph.front-morph-visible {
            display: flex !important;
            max-width: min(100%, 520px);
            margin: 4px auto 0;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 6px 8px;
            color: #66e4cc;
        }
        .front-morph-title {
            color: var(--text-muted);
            font: 650 10px/1 var(--font-data);
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .front-morph-analyses {
            display: inline-flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 5px;
        }
        .front-morph-analysis {
            display: inline-flex;
            align-items: baseline;
            gap: 5px;
            padding: 5px 9px;
            border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
            border-radius: 999px;
            background: color-mix(in srgb, currentColor 10%, transparent);
            color: var(--text-secondary);
            font: 550 12px/1.15 var(--font-reading);
            white-space: nowrap;
        }
        .front-morph-analysis strong {
            color: #fff;
            font-weight: 700;
        }

        /* Optional production context stays outside #flipBtn, so revealing or
           scrolling the fixed cloze does not flip the card. */
        .front-production-hint {
            position: absolute;
            left: 50%;
            bottom: 46px;
            z-index: 5;
            width: min(86%, 620px);
            transform: translateX(-50%);
            text-align: center;
        }
        .front-production-hint[hidden] {
            display: none;
        }
        .front-production-hint-toggle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.06);
            color: var(--text-secondary);
            font: 650 11px/1 var(--font-reading);
            cursor: pointer;
        }
        .front-production-hint-toggle.is-open {
            border-color: rgba(var(--card-pos-rgb), 0.44);
            background: rgba(var(--card-pos-rgb), 0.12);
            color: var(--text-primary);
        }
        .front-production-hint-icon {
            color: rgb(var(--card-pos-rgb));
            font-size: 15px;
            line-height: 0.8;
        }
        .front-production-cloze {
            max-height: 96px;
            margin-top: 7px;
            padding: 9px 12px;
            overflow-y: auto;
            border: 1px solid rgba(var(--card-pos-rgb), 0.3);
            border-radius: 12px;
            background: rgba(13, 18, 25, 0.94);
            color: var(--text-primary);
            font: 550 16px/1.35 var(--font-reading);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
        }
        .front-production-cloze[hidden] {
            display: none;
        }
        .production-cloze-blank {
            display: inline-block;
            min-width: 4.5em;
            margin-inline: 0.18em;
            border-bottom: 2px solid rgb(var(--card-pos-rgb));
            color: transparent;
            line-height: 0.95;
        }
        .morph-popover {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            z-index: 30;
            min-width: max-content;
            max-width: 288px;
            padding: 10px 12px;
            background: #1b232e;
            border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
            border-radius: 12px;
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
            text-align: left;
            animation: morph-popover-in 140ms cubic-bezier(0.2, 0.85, 0.25, 1.25) both;
        }
        .morph-popover[hidden] {
            display: none;
        }
        .morph-pop-title {
            margin-bottom: 7px;
            color: var(--text-muted);
            font: 650 11px/1 var(--font-data);
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .morph-pop-list {
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /* One row = one complete analysis. The subject chip and the tense it
           belongs to are bound inside a single bordered row, so two competing
           readings can never be misread as four independent pills. */
        .morph-pop-row {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 8px;
            padding: 5px 7px;
            border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
            border-radius: 10px;
            background: color-mix(in srgb, currentColor 7%, transparent);
        }
        .morph-pop-row.is-primary {
            border-color: color-mix(in srgb, currentColor 48%, transparent);
            background: color-mix(in srgb, currentColor 13%, transparent);
        }
        .morph-pop-subject {
            flex: 0 0 auto;
            padding: 4px 9px;
            border: 1px solid color-mix(in srgb, currentColor 42%, transparent);
            border-radius: 999px;
            background: color-mix(in srgb, currentColor 18%, transparent);
            color: #fff;
            font: 600 13px/1 var(--font-reading);
            white-space: nowrap;
        }
        .morph-pop-subject.is-empty {
            opacity: 0.45;
        }
        .morph-pop-form {
            flex: 1 1 auto;
            color: #fff;
            font: 500 13px/1.2 var(--font-reading);
        }
        /* The preferred reading stays first and undimmed; the rest live behind
           this "+" instead of competing with it. */
        .morph-pop-more {
            display: flex;
            align-items: center;
            gap: 6px;
            width: 100%;
            margin-top: 7px;
            padding: 6px 8px;
            border: 1px dashed color-mix(in srgb, currentColor 40%, transparent);
            border-radius: 10px;
            background: transparent;
            color: var(--text-muted);
            font: 600 11px/1 var(--font-data);
            letter-spacing: 0.04em;
            text-transform: uppercase;
            cursor: pointer;
        }
        .morph-pop-more-sign {
            font: 700 14px/1 var(--font-data);
            color: #fff;
        }
        .morph-pop-more.is-open {
            border-style: solid;
        }
        .morph-pop-alts {
            margin-top: 6px;
        }
        .morph-pop-alts[hidden] {
            display: none;
        }
        @keyframes morph-popover-in {
            from { opacity: 0; transform: translateY(-6px) scale(0.96); }
            to   { opacity: 1; transform: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            .morph-popover { animation: none; }
        }
        /* Verb accent, inherited by the popover border/tokens via currentColor. */
        .front-pos-unit,
        .back-pos-unit {
            position: relative;
            display: inline-flex;
            align-items: center;
            color: #66e4cc;
        }

        .card-pos {
            font-family: var(--font-data);
            font-size: 12px;
            color: white;
            text-align: center;
            margin-bottom: 12px;
            text-transform: uppercase;
            padding: 6px 14px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            display: inline-block;
        }

        /* Part of speech colours. Data aliases (for example ADJ/ADJECTIVE)
           intentionally share a semantic theme; genuinely different POS and
           special row types each receive their own accent. */
        .pos-noun { background: rgba(74, 158, 255, 0.45); border-color: rgba(74, 158, 255, 0.6); color: #8fc2ff; }
        .pos-propn { background: rgba(14, 165, 233, 0.45); border-color: rgba(14, 165, 233, 0.6); color: #7dd3fc; }
        .pos-verb { background: rgba(0, 212, 170, 0.45); border-color: rgba(0, 212, 170, 0.6); color: #66e4cc; }
        .pos-aux { background: rgba(45, 212, 191, 0.45); border-color: rgba(45, 212, 191, 0.6); color: #87eee0; }
        .pos-adj { background: rgba(245, 166, 35, 0.45); border-color: rgba(245, 166, 35, 0.6); color: #f9c96e; }
        .pos-adv { background: rgba(168, 85, 247, 0.45); border-color: rgba(168, 85, 247, 0.6); color: #c9a0f9; }
        .pos-prep { background: rgba(236, 72, 153, 0.45); border-color: rgba(236, 72, 153, 0.6); color: #f291be; }
        .pos-conj { background: rgba(20, 184, 166, 0.45); border-color: rgba(20, 184, 166, 0.6); color: #6dd4c8; }
        .pos-cconj { background: rgba(34, 197, 94, 0.45); border-color: rgba(34, 197, 94, 0.6); color: #86efac; }
        .pos-sconj { background: rgba(132, 204, 22, 0.45); border-color: rgba(132, 204, 22, 0.6); color: #bef264; }
        .pos-pron { background: rgba(99, 102, 241, 0.45); border-color: rgba(99, 102, 241, 0.6); color: #9b9df6; }
        .pos-det { background: rgba(244, 63, 94, 0.45); border-color: rgba(244, 63, 94, 0.6); color: #f88da5; }
        .pos-int { background: rgba(234, 179, 8, 0.45); border-color: rgba(234, 179, 8, 0.6); color: #f2d166; }
        .pos-num { background: rgba(6, 182, 212, 0.45); border-color: rgba(6, 182, 212, 0.6); color: #66d4e6; }
        .pos-mwe { background: rgba(251, 191, 36, 0.45); border-color: rgba(251, 191, 36, 0.6); color: #fcd57a; }
        .pos-clitic { background: rgba(249, 115, 22, 0.45); border-color: rgba(249, 115, 22, 0.6); color: #fdba74; }
        .pos-part { background: rgba(192, 132, 252, 0.45); border-color: rgba(192, 132, 252, 0.6); color: #d8b4fe; }
        .pos-prefix { background: rgba(163, 230, 53, 0.45); border-color: rgba(163, 230, 53, 0.6); color: #d9f99d; }
        .pos-suffix { background: rgba(74, 222, 128, 0.45); border-color: rgba(74, 222, 128, 0.6); color: #a7f3d0; }
        .pos-contraction { background: rgba(248, 113, 113, 0.45); border-color: rgba(248, 113, 113, 0.6); color: #fecaca; }
        .pos-other { background: rgba(148, 163, 184, 0.45); border-color: rgba(148, 163, 184, 0.6); color: #cbd5e1; }


        /* POS info popover — shown when the POS pill on a sense row is
           tapped. The backdrop dismisses it while the popover remains a
           stable scroll surface. The popover inherits its accent colour from
           the same .pos-* class the pill carries. */
        .pos-info-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
            cursor: pointer;
            overscroll-behavior: contain;
            animation: posInfoFadeIn 0.15s ease-out;
        }

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

        .pos-info-popover {
            position: relative;
            max-width: 360px;
            width: 100%;
            max-height: min(680px, calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
            padding: 22px 26px 18px;
            background: var(--bg-card, #1a1e27);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 14px;
            text-align: center;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
            font-family: var(--font-reading);
            color: var(--text-primary);
            cursor: auto;
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            touch-action: pan-y;
            -webkit-overflow-scrolling: touch;
            scrollbar-gutter: stable;
            outline: none;
        }

        .pos-info-close {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.07);
            color: var(--text-primary);
            font: 400 24px/1 var(--font-reading);
            cursor: pointer;
        }

        .pos-info-close:hover,
        .pos-info-close:focus-visible {
            background: rgba(255, 255, 255, 0.14);
            border-color: rgba(255, 255, 255, 0.28);
        }

        /* Same .pos-* classes adjust the popover accent. Only the
           border picks up the colour; background/text stay dark so
           the reading is comfortable. */
        .pos-info-popover.pos-noun { border-color: rgba(74, 158, 255, 0.7); }
        .pos-info-popover.pos-propn { border-color: rgba(14, 165, 233, 0.7); }
        .pos-info-popover.pos-verb { border-color: rgba(0, 212, 170, 0.7); }
        .pos-info-popover.pos-aux { border-color: rgba(45, 212, 191, 0.7); }
        .pos-info-popover.pos-adj  { border-color: rgba(245, 166, 35, 0.7); }
        .pos-info-popover.pos-adv  { border-color: rgba(168, 85, 247, 0.7); }
        .pos-info-popover.pos-prep { border-color: rgba(236, 72, 153, 0.7); }
        .pos-info-popover.pos-conj { border-color: rgba(20, 184, 166, 0.7); }
        .pos-info-popover.pos-cconj { border-color: rgba(34, 197, 94, 0.7); }
        .pos-info-popover.pos-sconj { border-color: rgba(132, 204, 22, 0.7); }
        .pos-info-popover.pos-pron { border-color: rgba(99, 102, 241, 0.7); }
        .pos-info-popover.pos-det  { border-color: rgba(244, 63, 94, 0.7); }
        .pos-info-popover.pos-int  { border-color: rgba(234, 179, 8, 0.7); }
        .pos-info-popover.pos-num  { border-color: rgba(6, 182, 212, 0.7); }
        .pos-info-popover.pos-mwe  { border-color: rgba(251, 191, 36, 0.7); }
        .pos-info-popover.pos-clitic { border-color: rgba(249, 115, 22, 0.7); }
        .pos-info-popover.pos-part { border-color: rgba(192, 132, 252, 0.7); }
        .pos-info-popover.pos-prefix { border-color: rgba(163, 230, 53, 0.7); }
        .pos-info-popover.pos-suffix { border-color: rgba(74, 222, 128, 0.7); }
        .pos-info-popover.pos-contraction { border-color: rgba(248, 113, 113, 0.7); }
        .pos-info-popover.pos-other { border-color: rgba(148, 163, 184, 0.7); }

        .pos-info-name {
            font-family: var(--font-emphasis, var(--font-data));
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--text-primary);
        }

        .pos-info-description {
            font-size: 15px;
            line-height: 1.55;
            color: var(--text-secondary, #c8d0e0);
            margin-bottom: 14px;
        }

        /* Secondary section in the popover — only present when the
           pill carried a real <100% frequency. Divider separates it
           from the POS definition above. */
        .pos-info-divider {
            height: 1px;
            background: rgba(255, 255, 255, 0.08);
            margin: 4px -6px 14px;
        }

        .pos-info-pct-label {
            font-family: var(--font-emphasis, var(--font-data));
            font-size: 10px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            color: var(--text-muted, #6a7389);
            opacity: 0.85;
            margin-bottom: 2px;
        }

        .pos-info-pct-value {
            font-family: var(--font-emphasis, var(--font-data));
            font-size: 28px;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1;
            margin-bottom: 8px;
        }

        .pos-info-pct-description {
            font-size: 13px;
            line-height: 1.55;
            color: var(--text-secondary, #c8d0e0);
            margin-bottom: 14px;
        }

        .pos-info-hint {
            font-size: 11px;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            color: var(--text-muted, #6a7389);
            opacity: 0.75;
        }

        .card-ranking {
            position: absolute;
            bottom: 16px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            pointer-events: none;
            z-index: 2;
        }
        .card-rank-label,
        .card-freq-label {
            font-family: var(--font-reading);
            font-size: 15px;
            color: rgba(255, 255, 255, 0.55);
        }
        /* The figure itself, lifted out of the muted label around it. Applies
           to the lyric-line count, the spoken frequency and the vocabulary
           rank — but never the "/ total vocabulary" denominator, which is
           reference, not the number being reported. */
        .card-stat-value {
            color: #fff;
            font-weight: 750;
        }
        .card-exclusion-label {
            max-width: 100%;
            padding: 5px 9px;
            border: 1px solid color-mix(in srgb, var(--accent-secondary) 42%, transparent);
            border-radius: 999px;
            background: color-mix(in srgb, var(--accent-secondary) 14%, transparent);
            color: color-mix(in srgb, var(--accent-secondary) 78%, white);
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: capitalize;
        }
        .card-exclusion-label--examples {
            border-color: rgba(255,255,255,0.18);
            background: rgba(255,255,255,0.07);
            color: rgba(255,255,255,0.72);
            text-transform: none;
        }
        .search-example-empty {
            padding: 20px;
            color: var(--text-muted);
            font-size: 13px;
        }
        .card-freq-btn {
            font-family: var(--font-reading);
            font-size: 18px;
            color: rgba(255, 255, 255, 0.55);
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            pointer-events: auto;
            line-height: inherit;
        }
        .card-freq-btn:hover {
            color: rgba(255, 255, 255, 0.8);
        }
        /* Frequency info tooltip */
        /* Shared by desktop and mobile active-set card scrubbers. */
        .deck-progress-segments {
            display: flex;
            position: relative;
            align-items: center;
            flex: 1 1 auto;
            max-width: 330px;
            min-width: 0;
            height: 50px;
            gap: 0;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
            padding: 0 calc(50% - 25px);
            background: none;
            -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
                    mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
        }
        .deck-progress-segments::before {
            content: '';
            position: absolute;
            z-index: 0;
            left: 0;
            right: 0;
            top: 50%;
            height: 2px;
            transform: translateY(-50%);
            pointer-events: none;
            background: linear-gradient(to right, transparent, rgba(170, 174, 184, 0.42) 14%, rgba(170, 174, 184, 0.42) 86%, transparent);
        }
        .deck-progress-segments::-webkit-scrollbar { display: none; }
        .deck-progress-segments.is-scrubbing {
            filter: drop-shadow(0 0 7px rgba(var(--accent-primary-rgb), 0.32));
        }
        .deck-progress-segments.is-scrubbing::before { height: 3px; }
        .deck-progress-segments.is-scrubbing .deck-progress-segment {
            transition-duration: 90ms;
        }
        .deck-progress-segments.is-scrubbing .deck-progress-segment.is-current {
            animation: none;
        }
        @media (max-width: 767px) {
            .deck-progress-segments {
                touch-action: none;
                cursor: ew-resize;
            }
        }
        .deck-progress-segment {
            position: relative;
            z-index: 1;
            flex: 0 0 44px;
            width: 42px;
            min-width: 42px;
            max-width: 42px;
            height: 42px;
            padding: 0;
            margin-inline: -8px;
            border: 1px solid var(--scrubber-marker-border, rgba(255, 255, 255, 0.16));
            border-radius: 10px;
            background: var(--scrubber-marker-fill, color-mix(in srgb, var(--bg-card) 88%, var(--bg-tertiary)));
            color: var(--scrubber-marker-text, rgba(255, 255, 255, 0.4));
            font: 750 16px/1 var(--font-reading);
            cursor: pointer;
            opacity: 1;
            transform: scale(0.42);
            scroll-snap-align: center;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
            transition: color 260ms ease,
                        transform 300ms cubic-bezier(0.2, 0.85, 0.25, 1.25),
                        border-color 260ms ease, background 260ms ease,
                        box-shadow 260ms ease;
        }
        .deck-progress-segment.is-visited:not(.is-current) {
            --scrubber-marker-text: rgba(255, 255, 255, 0.68);
        }
        .deck-progress-segment.is-result-correct {
            --scrubber-marker-fill: color-mix(in srgb, rgb(34, 197, 94) 28%, var(--bg-card));
            --scrubber-marker-border: rgba(74, 222, 128, 0.66);
            --scrubber-marker-text: #b9f6ca;
        }
        .deck-progress-segment.is-result-incorrect {
            --scrubber-marker-fill: color-mix(in srgb, rgb(239, 68, 68) 28%, var(--bg-card));
            --scrubber-marker-border: rgba(248, 113, 113, 0.68);
            --scrubber-marker-text: #fecaca;
        }
        .deck-progress-segment.is-result-mixed {
            --scrubber-marker-fill: color-mix(in srgb, rgb(245, 166, 35) 28%, var(--bg-card));
            --scrubber-marker-border: rgba(251, 191, 36, 0.68);
            --scrubber-marker-text: #fde7ae;
        }
        .deck-progress-segment.is-visited.is-result-correct:not(.is-current) {
            --scrubber-marker-text: #b9f6ca;
        }
        .deck-progress-segment.is-visited.is-result-incorrect:not(.is-current) {
            --scrubber-marker-text: #fecaca;
        }
        .deck-progress-segment.is-visited.is-result-mixed:not(.is-current) {
            --scrubber-marker-text: #fde7ae;
        }
        /* Phrases get their own colour rather than reusing a result state:
           green/red/amber already mean correct/incorrect/mixed, and the
           language accent is red for Spanish. Violet is unclaimed in the
           scrubber and in the POS palette's high-frequency range.
           The compound selector outranks .is-current (which follows below and
           would otherwise win on source order) and every .is-result-* state. */
        .deck-progress-segment.is-current.is-phrases {
            --scrubber-marker-fill: color-mix(in srgb, rgb(var(--accent-phrases-rgb)) 30%, var(--bg-card));
            --scrubber-marker-text: #ede9fe;
            border-color: color-mix(in srgb, rgb(var(--accent-phrases-rgb)) 78%, white);
            box-shadow: 0 0 0 2px rgba(var(--accent-phrases-rgb), 0.14),
                        0 0 13px rgba(var(--accent-phrases-rgb), 0.34);
            text-shadow: 0 0 12px rgba(var(--accent-phrases-rgb), 0.55);
        }
        .deck-progress-segment[data-distance="1"] { margin-inline: 3px; transform: scale(0.88); }
        .deck-progress-segment[data-distance="2"] { margin-inline: -2px; transform: scale(0.67); }
        .deck-progress-segment[data-distance="3"] { margin-inline: -5px; transform: scale(0.52); }
        .deck-progress-segment.is-current {
            color: white;
            opacity: 1;
            transform: scale(1.16);
            border-radius: 11px;
            border-color: color-mix(in srgb, var(--accent-primary) 74%, white);
            background: var(--scrubber-marker-fill, color-mix(in srgb, var(--accent-primary) 24%, var(--bg-card)));
            box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.12),
                        0 0 13px rgba(var(--accent-primary-rgb), 0.3);
            text-shadow: 0 0 12px rgba(var(--accent-primary-rgb), 0.5);
            animation: deck-scrubber-lens 300ms cubic-bezier(0.2, 0.85, 0.25, 1.25);
            margin-inline: 8px;
        }
        @keyframes deck-scrubber-lens {
            0% { transform: scale(0.82); }
            65% { transform: scale(1.22); }
            100% { transform: scale(1.16); }
        }
        @media (prefers-reduced-motion: reduce) {
            .deck-progress-segment {
                transition-duration: 0.01ms;
            }
            .deck-progress-segment.is-current {
                animation: none;
            }
        }
        .deck-progress-track .study-menu-btn {
            flex: 0 0 auto;
            width: 50px;
            min-width: 50px;
            height: 50px;
            padding: 9px;
            border-radius: 12px;
            border: 1px solid transparent;
            color: rgba(255, 255, 255, 0.68);
            background: transparent;
        }
        .deck-progress-track .study-menu-btn:hover,
        .deck-progress-track .study-menu-btn:focus-visible {
            border-color: color-mix(in srgb, var(--accent-primary) 70%, white);
            color: white;
            background: rgba(255, 255, 255, 0.06);
        }
        .deck-progress-track .study-menu-btn svg {
            width: 30px;
            height: 30px;
            flex: 0 0 30px;
        }

        .freq-tooltip {
            position: fixed;
            background: rgba(30, 30, 40, 0.95);
            color: rgba(255, 255, 255, 0.85);
            font-family: var(--font-reading);
            font-size: 13px;
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            pointer-events: none;
            z-index: 9999;
            max-width: 220px;
            text-align: center;
            opacity: 1;
            transition: opacity 0.3s ease;
        }
        .freq-tooltip.hiding {
            opacity: 0;
        }

        .card-control-btn {
            padding: 8px 14px;
            background: #1a1a1a;
            color: var(--text-primary);
            border: 1.5px solid #333333;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 700;
            font-family: var(--font-emphasis);
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 50px;
            height: 38px;
            letter-spacing: 0.3px;
            text-transform: uppercase;
            transform-style: preserve-3d;
        }

        /* Prevent buttons from rotating with card flip */
        .card.flipped .card-front .card-control-btn,
        .card.flipped .card-front .nav-btn-inline,
        .card.flipped .card-front .card-action-small {
            transform: rotateY(-180deg);
            pointer-events: auto;
        }

        /* Ensure buttons are clickable */
        .card-control-btn,
        .nav-btn-inline,
        .card-action-small {
            pointer-events: auto;
            position: relative;
        }

        .card-control-btn:hover {
            background: #2a2a2a;
            border-color: #444444;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        .card-control-btn:active {
            transform: scale(0.95);
            background: #0f0f0f;
        }

        .card-action-small {
            padding: 8px 16px;
            background: transparent;
            color: rgba(255, 255, 255, 0.85);
            border: none;
            border-radius: 6px;
            font-size: 28px;
            font-weight: 700;
            font-family: var(--font-emphasis);
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            letter-spacing: 0.3px;
            text-transform: uppercase;
            transform-style: preserve-3d;
            white-space: nowrap;
            overflow: hidden;
        }

        .card-action-small:hover {
            background: rgba(255, 255, 255, 0.08);
            color: white;
            transform: scale(1.1);
        }

        .card-action-small:active {
            transform: scale(0.95);
        }

        /* Language reverse button — single big "from" flag with a small
           circular swap badge in the bottom-right corner. Sized to match the
           shuffle button's visual weight. The "to" flag is emitted by JS for
           screen readers but hidden visually. */
        #reverseLangBtn {
            width: 52px;
            height: 52px;
            padding: 0;
            position: relative;
            overflow: visible;
            line-height: 1;
        }
        #reverseLangBtn .reverse-flag-from {
            font-size: 36px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #reverseLangBtn .reverse-flag-to {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            opacity: 0;
            pointer-events: none;
        }
        #reverseLangBtn .reverse-swap-glyph {
            position: absolute;
            right: -4px;
            bottom: -4px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: rgba(20, 24, 32, 0.92);
            color: rgba(255, 255, 255, 0.95);
            border: 1.5px solid rgba(255, 255, 255, 0.18);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            line-height: 1;
            box-sizing: border-box;
            font-family: var(--font-data);
            font-weight: 700;
        }
        #reverseLangBtn:hover .reverse-swap-glyph {
            background: var(--accent-primary, rgba(74, 158, 255, 0.95));
            color: #fff;
            border-color: rgba(255, 255, 255, 0.3);
        }

        .card-details {
            font-family: var(--font-reading);
            font-size: 18px;
            line-height: 1.8;
            text-align: center;
            width: 100%;
            max-width: 100%;
            overflow-wrap: break-word;
            word-wrap: break-word;
            color: var(--text-primary);
        }

        @media (max-width: 767px) {
            .card-details {
                font-size: 16px;
            }
        }

        .card-details strong {
            color: var(--accent-secondary);
        }

        .sentence {
            margin-top: 15px;
            padding: 10px 12px 6px;
            background: #0d141c;
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-left: 5px solid rgb(var(--sense-match-rgb));
            border-radius: 10px;
            font-family: var(--font-reading);
            font-style: normal;
            font-weight: 500;
            font-size: 20px;
            line-height: 1.4;
            overflow-wrap: break-word;
            word-wrap: break-word;
            text-align: center;
            color: #ffffff;
        }

        .sentence.example-is-matched {
            /* Flat fill; the left edge already carries the POS accent. */
            background: #0d141c;
            box-shadow: none;
        }

        .example-word-highlight,
        .example-related-highlight {
            color: #fff;
            font-style: normal;
            border-radius: 3px;
            padding: 0 0.14em;
            box-decoration-break: clone;
            -webkit-box-decoration-break: clone;
        }

        .example-word-highlight {
            font-weight: 800;
            color: color-mix(in srgb, rgb(var(--sense-match-rgb)) 55%, white);
            background: transparent;
            box-shadow: inset 0 -3px 0 rgb(var(--sense-match-rgb));
        }

        .example-word-highlight.example-pooled-form {
            background: rgba(var(--sense-match-rgb), 0.2);
            box-shadow:
                inset 0 -2px 0 rgba(var(--sense-match-rgb), 0.88),
                0 0 0 1px rgba(var(--sense-match-rgb), 0.16);
        }

        .example-usage-highlight {
            border-radius: 3px;
            padding: 0 0.12em;
            color: #fff;
            background: color-mix(in srgb, var(--accent-secondary) 12%, transparent);
            box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent-secondary) 72%, transparent);
            font-style: normal;
            font-weight: 700;
            box-decoration-break: clone;
            -webkit-box-decoration-break: clone;
        }

        .example-related-highlight {
            font-weight: 650;
            background: rgba(var(--sense-match-rgb), 0.07);
            box-shadow: inset 0 -1px 0 rgba(var(--sense-match-rgb), 0.38);
        }

        @media (max-width: 767px) {
            .sentence {
                font-size: 18px;
                padding: 6px 10px;
            }
        }

        .translation {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(255, 255, 255, 0.13);
            color: #e6eaf0;
            font-size: 16px;
            font-weight: 500;
            font-style: normal;
            line-height: 1.4;
        }

        @media (max-width: 389px) {
            .translation { font-size: 15px; }
        }

        .breakdown-trigger,
        .example-sentence-text {
            font-style: normal;
        }

        /* Desktop-only utility: hidden on mobile, inline-flex on desktop */
        .desktop-only {
            display: none;
        }

        @media (min-width: 768px) {
            .desktop-only {
                display: inline-flex;
            }
        }

        /* Example and MWE cycling buttons (desktop only) */
        .example-counter-group {
            display: inline-flex;
            align-items: center;
            gap: 2px;
        }

        .compact-example-counter {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 24px;
            padding: 2px 5px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
            color: var(--text-muted);
            font: 600 12px/1 var(--font-reading);
            font-variant-numeric: tabular-nums;
        }

        .compact-example-counter-label {
            margin-right: 3px;
            color: var(--text-subtle);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .example-autoplay-fallback {
            display: flex;
            justify-content: center;
            margin: 8px 0 2px;
        }

        .example-autoplay-btn {
            width: 44px;
            height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.28);
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            color: #fff;
            cursor: pointer;
            padding: 0;
            transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
        }

        .example-autoplay-btn:hover,
        .example-autoplay-btn:focus-visible {
            border-color: #1db954;
            background: rgba(29, 185, 84, 0.18);
            transform: scale(1.05);
        }

        .example-autoplay-btn.is-active {
            border-color: #1db954;
            background: #1db954;
        }

        .example-autoplay-icon {
            font-size: 10px;
            line-height: 1;
            transform: translateX(0.5px);
        }

        .example-autoplay-btn.is-active .example-autoplay-icon {
            transform: none;
        }

        .example-autoplay-btn.is-loading .example-autoplay-icon {
            animation: autoplay-loading-pulse 0.8s ease-in-out infinite alternate;
        }

        @keyframes autoplay-loading-pulse {
            from { opacity: 0.4; }
            to { opacity: 1; }
        }

        /* Catalogue song and vocalist names can be long enough to shove the
           Spotify control off the credit row. The song title is a bare text
           node inside this span, so it can only take an ellipsis while the
           span is one nowrap line box — hence block rather than flex. */
        .example-song-credit {
            display: block;
            flex: 0 1 auto;
            min-width: 0;
            max-width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: left;
        }

        .example-vocalist-credit {
            color: rgba(255, 255, 255, 0.72);
            font-style: normal;
            white-space: nowrap;
        }

        @media (max-width: 520px) {
            /* Keep the narrow two-line stack, each line ellipsised on its own. */
            .example-vocalist-credit {
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .example-cycle-btn,
        .mwe-cycle-btn {
            width: 44px;
            height: 44px;
            background: rgba(255, 255, 255, 0.08);
            border: none;
            border-radius: 9px;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
            line-height: 1;
        }

        .example-cycle-btn:hover,
        .mwe-cycle-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }

        /* A row, not an equal-column grid: under a grid the Look up tile slid
           left whenever a card lacked synonyms or wasn't a verb. Flow the
           optional tiles from the left and push Look up to the right edge, so
           it is always in the same corner. */
        .links-section {
            margin-top: auto;
            padding-top: 6px;
            width: 100%;
            display: flex;
            align-items: flex-end;
            gap: 10px;
            position: relative;
        }
        .links-section .ref-lookup-btn {
            margin-left: auto;
        }
        /* iPhone SE and smaller: the handoff row / example already claim
           this space, so the tile grid is dropped entirely. */
        @media (max-width: 359px) {
            .links-section {
                display: none;
            }
        }

        /* Provenance + flag moved off this row entirely (top-right of the
           headword now), so it's never more than 4 tiles — a bit taller
           with bigger icons fits comfortably without risking wrap. */
        /* No visible box — just the icon + label. The tile's own footprint
           (padding, min-height) still stands in as the tap target. */
        .ref-tile {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            min-height: 70px;
            padding: 4px 6px;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 12px;
            cursor: pointer;
            color: #e6eaf0;
        }
        /* Bare glyphs, no plate behind them: every tile icon inherits the
           tile's colour and shares one size so the row reads as a set. */
        .ref-tile-icon {
            width: 39px;
            height: 39px;
            flex: 0 0 auto;
        }
        .ref-tile-label {
            font-size: 13.5px;
            font-weight: 600;
            color: #e6eaf0;
            text-align: center;
            line-height: 1.2;
        }

        .lookup-sheet[hidden] {
            display: none;
        }
        /* Circular site icons stacked directly above the Look up tile — no
           panel, no text list. Right-aligned to the tile so the column reads
           as rising out of the button that opened it. */
        .lookup-sheet {
            position: absolute;
            bottom: calc(100% + 10px);
            right: 0;
            z-index: 20;
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
            gap: 10px;
            padding: 0;
            background: none;
            border: none;
            box-shadow: none;
        }
        .lookup-sheet-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.22);
            border-radius: 50%;
            background: #1b232e;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
            color: #e6eaf0;
            text-decoration: none;
            animation: lookup-icon-rise 180ms cubic-bezier(0.2, 0.85, 0.25, 1.25) both;
        }
        .lookup-sheet-icon img {
            width: 28px;
            height: 28px;
            border-radius: 50%;
        }
        .lookup-sheet-initial {
            font: 700 17px/1 var(--font-reading);
        }
        .lookup-sheet-icon:hover {
            border-color: rgba(255, 255, 255, 0.5);
        }
        /* Second icon trails the first slightly, so the group reads as one
           motion out of the tile rather than two things appearing at once. */
        .lookup-sheet-icon:nth-child(2) { animation-delay: 45ms; }
        .lookup-sheet-icon:nth-child(3) { animation-delay: 90ms; }
        @keyframes lookup-icon-rise {
            from { opacity: 0; transform: translateY(10px) scale(0.8); }
            to   { opacity: 1; transform: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            .lookup-sheet-icon { animation: none; }
        }

        .link-btn {
            display: inline-block;
            padding: 9px 18px;
            background: var(--bg-tertiary);
            color: white;
            text-decoration: none;
            border-radius: 7px;
            font-size: 15px;
            border: 1px solid var(--border-color);
            transition: all 0.3s;
        }

        .link-btn:hover {
            background: var(--accent-secondary);
            color: var(--accent-secondary-text);
            border-color: var(--accent-secondary);
        }

        .controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            background: var(--bg-card);
            padding: 15px;
            border-radius: 12px;
            border: 1px solid var(--border-color);
        }

        .nav-btn {
            padding: 12px 24px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .nav-btn:hover {
            box-shadow: 0 0 20px var(--glow-orange);
        }

        .nav-btn:disabled {
            background: var(--bg-tertiary);
            color: var(--text-muted);
            cursor: not-allowed;
        }

        #correctBtn:hover:not(:disabled) {
            box-shadow: 0 0 20px var(--glow-green);
        }

        #incorrectBtn:hover:not(:disabled) {
            box-shadow: 0 0 20px rgba(255, 82, 82, 0.5);
        }

        .nav-btn-inline {
            padding: 0;
            background: transparent;
            color: rgba(255, 255, 255, 0.85);
            border: none;
            border-radius: 50%;
            font-size: 48px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            width: 64px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            padding-bottom: 4px;
            pointer-events: auto;
            z-index: 10;
            transform-style: preserve-3d;
        }

        .nav-btn-inline:hover {
            background: rgba(255, 255, 255, 0.08);
            color: white;
            transform: scale(1.1);
        }

        .nav-btn-inline:active {
            transform: scale(0.95);
        }

        .nav-btn-inline:disabled {
            color: rgba(255, 255, 255, 0.15);
            background: transparent;
            cursor: not-allowed;
        }

        .nav-btn-inline:disabled:hover {
            transform: none;
        }

        .progress {
            text-align: center;
            font-weight: 600;
            color: var(--accent-secondary);
        }

        .action-btn {
            padding: 0;
            background: transparent;
            border: none;
            cursor: pointer;
            font-size: 52px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.15s ease-out, filter 0.15s ease-out;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }

        .action-btn:hover {
            transform: scale(1.1);
        }

        .action-btn:active {
            transform: scale(0.75);
            filter: brightness(0.8);
        }

        /* For touch devices - maintain pressed state while held */
        @media (hover: none) {
            .action-btn:active {
                transform: scale(0.7);
            }
        }

        .control-action-btn {
            padding: 10px 20px;
            background: #1a1a1a;
            color: var(--text-primary);
            border: 1.5px solid #333333;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 700;
            font-family: var(--font-emphasis);
            cursor: pointer;
            transition: all 0.3s;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .control-action-btn:hover {
            background: #2a2a2a;
            border-color: #444444;
            box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
        }

        .control-action-btn:active {
            transform: scale(0.95);
            background: #0f0f0f;
        }

        .quiz-container {
            background: var(--bg-card);
            padding: 30px;
            border-radius: 16px;
            border: 1px solid var(--border-color);
            margin-bottom: 20px;
        }

        .quiz-question {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 25px;
            color: var(--text-primary);
            text-align: center;
        }

        .quiz-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .quiz-option {
            padding: 15px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 16px;
            color: var(--text-primary);
        }

        .quiz-option:hover {
            background: var(--bg-card-hover);
            border-color: var(--accent-blue);
        }

        .quiz-option.correct {
            background: rgba(0, 212, 170, 0.15);
            border-color: var(--accent-green);
        }

        .quiz-option.incorrect {
            background: rgba(255, 82, 82, 0.15);
            border-color: var(--error);
        }

        .quiz-feedback {
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            font-weight: 600;
        }

        .quiz-feedback.correct {
            background: rgba(0, 212, 170, 0.15);
            color: var(--accent-green);
        }

        .quiz-feedback.incorrect {
            background: rgba(255, 82, 82, 0.15);
            color: var(--error);
        }

        .type-container {
            background: var(--bg-card);
            padding: 30px;
            border-radius: 16px;
            border: 1px solid var(--border-color);
            margin-bottom: 20px;
        }

        .type-prompt {
            font-size: 20px;
            margin-bottom: 20px;
            color: var(--text-primary);
            font-weight: 700;
            text-align: center;
        }

        .type-input {
            width: 100%;
            padding: 15px;
            font-size: 18px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            margin-bottom: 15px;
            color: var(--text-primary);
        }

        .type-input:focus {
            outline: none;
            border-color: var(--accent-blue);
        }

        .check-btn {
            width: 100%;
            padding: 15px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
        }

        .stats {
            background: var(--bg-card);
            padding: 20px;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            margin-bottom: 20px;
        }

        .stats h3 {
            color: var(--text-primary);
            margin-bottom: 15px;
        }

        .stat-row {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-secondary);
        }

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

        .file-upload {
            background: transparent;
            padding: 10px;
            border-radius: 12px;
            margin-bottom: 20px;
            text-align: center;
        }

        .file-input {
            display: none;
        }

        .upload-btn {
            padding: 12px 24px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
        }

        .hidden {
            display: none !important;
        }

        /* One coherent transition surface for boot, source changes and deck
           replacement. It sits above auth as well as the study UI, preventing
           partially hydrated screens from flashing during navigation. */
        .app-loading-screen {
            position: fixed;
            inset: 0;
            z-index: 20000;
            display: grid;
            place-items: center;
            padding: 24px;
            background:
                radial-gradient(circle at 50% 38%, rgba(var(--accent-primary-rgb), 0.13), transparent 34%),
                var(--bg-primary);
            opacity: 1;
            visibility: visible;
            transition: opacity 0.2s ease, visibility 0.2s ease;
        }

        .app-loading-screen.is-hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .app-loading-card {
            display: grid;
            justify-items: center;
            width: min(100%, 310px);
            color: var(--text-primary);
            text-align: center;
        }

        .app-loading-mark {
            width: 46px;
            height: 46px;
            display: grid;
            place-items: center;
            margin-bottom: 24px;
            border: 1px solid color-mix(in srgb, var(--accent-primary) 46%, transparent);
            border-radius: 14px;
            background: color-mix(in srgb, var(--accent-primary) 13%, transparent);
            color: var(--accent-primary);
            font-family: var(--font-emphasis);
            font-size: 21px;
            font-weight: 800;
        }

        .app-loading-spinner {
            width: 30px;
            height: 30px;
            margin-bottom: 18px;
            border: 2px solid color-mix(in srgb, var(--accent-primary) 18%, var(--border-color));
            border-top-color: var(--accent-primary);
            border-radius: 50%;
            animation: spin 0.75s linear infinite;
        }

        .app-loading-card strong {
            font-family: var(--font-emphasis);
            font-size: 17px;
            font-weight: 750;
            letter-spacing: -0.015em;
        }

        .app-loading-card > span {
            margin-top: 7px;
            color: var(--text-muted);
            font-family: var(--font-reading);
            font-size: 12px;
            line-height: 1.45;
        }

        @media (prefers-reduced-motion: reduce) {
            .app-loading-screen { transition: none; }
            .app-loading-spinner { animation-duration: 1.5s; }
        }

        #appContent {
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
        }

        /* Setup Steps */
        .setup-step {
            position: relative;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 14px 16px;
            margin-bottom: 8px;
        }

        .resume-set-card {
            display: flex;
            flex-direction: column;
            gap: 7px;
            margin-bottom: 10px;
        }

        .resume-set-button {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            width: 100%;
            padding: 15px 17px;
            border: 1px solid color-mix(in srgb, var(--accent-primary) 55%, var(--border-color));
            border-radius: 13px;
            background: linear-gradient(135deg,
                color-mix(in srgb, var(--accent-primary) 17%, var(--bg-card)),
                var(--bg-card));
            color: var(--text-primary);
            font-family: var(--font-reading);
            text-align: left;
            cursor: pointer;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
        }

        .resume-set-button:hover {
            border-color: var(--accent-primary);
            transform: translateY(-1px);
        }

        .resume-set-button strong {
            font-family: var(--font-emphasis);
            font-size: 18px;
        }

        .resume-set-button > span:not(.resume-set-eyebrow) {
            color: var(--text-secondary);
            font-size: 13px;
        }

        .resume-set-button small {
            color: var(--text-muted);
            font-size: 12px;
        }

        .resume-set-eyebrow {
            color: var(--accent-primary);
            font-family: var(--font-emphasis);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .resume-set-alternative {
            color: var(--text-muted);
            font-size: 11px;
            text-align: center;
        }

        .resume-entry-modal {
            padding: 18px;
            background: rgba(7, 9, 14, 0.74);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .resume-entry-content {
            box-sizing: border-box;
            width: min(92vw, 470px);
            max-width: 470px;
            padding: 26px;
            border-color: color-mix(in srgb, var(--accent-primary) 32%, var(--border-color));
        }
        .resume-entry-content h3 {
            margin: 7px 0 18px;
            color: var(--text-primary);
            font: 700 25px/1.15 var(--font-emphasis);
            letter-spacing: -0.02em;
        }
        .resume-entry-content > strong {
            display: block;
            color: var(--text-primary);
            font: 650 17px/1.3 var(--font-emphasis);
        }
        .resume-entry-content p {
            margin: 5px 0 3px;
            color: var(--text-secondary);
            font-size: 13px;
        }
        .resume-entry-content small {
            color: var(--text-muted);
            font-size: 11px;
            line-height: 1.45;
        }
        .resume-entry-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 22px;
        }
        .resume-entry-actions button {
            min-height: 46px;
            padding: 11px 14px;
            border-radius: 11px;
            font: 650 13px/1.2 var(--font-emphasis);
            cursor: pointer;
        }
        .resume-entry-secondary {
            border: 1px solid var(--border-color);
            background: transparent;
            color: var(--text-secondary);
        }
        .resume-entry-primary {
            border: 1px solid var(--accent-primary);
            background: var(--accent-primary);
            color: var(--accent-primary-text);
        }

        /* Sub-settings inside a setup-step (lemma + cognate live inside
           Choose Level). No card chrome — they read as compact rows under
           the parent step's main control rather than as their own panels.
           position: relative anchors the absolute-positioned ".step-help-btn"
           inside the substep itself rather than inheriting the parent
           setup-step's top-right corner (where step2's own help button sits). */
        .setup-substep {
            position: relative;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--border-color);
        }
        /* padding-right matches .step-header-with-help so the rightmost
           inline content (info-line "X excluded" badge) keeps clear of the
           absolute-positioned "?" help button anchored to the substep's
           top-right corner. */
        .substep-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
            padding-right: 24px;
        }
        .substep-title {
            font-family: var(--font-emphasis);
            font-size: 12px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .substep-header .level-info-line {
            margin-left: auto;
        }
        .substep-header .step-help-btn {
            margin-left: 4px;
        }
        .substep-header .level-info-line + .step-help-btn {
            margin-left: 4px;
        }
        /* When the info line is hidden, push the help button to the right */
        .substep-header > .step-help-btn:nth-child(3) {
            margin-left: auto;
        }

        /* Substep row — lemma + cognate side-by-side. Each substep takes
           half the width via flex: 1, and only one shared border-top sits
           above the row (otherwise both would draw their own and the row
           would have a doubled separator). */
        .substep-row {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--border-color);
        }
        .substep-row > .setup-substep {
            flex: 1 1 0;
            min-width: 0;
            margin-top: 0;
            padding-top: 0;
            border-top: none;
        }
        /* Push the help button to the right inside each side-by-side
           substep header — the info line moved out of the header (now
           lives below the toggle) so we can't rely on the existing
           sibling selectors that were keyed to the old header layout. */
        .substep-row .substep-header .step-help-btn {
            margin-left: auto;
        }
        /* Info line ("X flashcards excluded") rendered below the toggle
           rather than inline with the help button. Compact, muted, sits
           in the same horizontal slot under both substeps so the two
           info lines line up across the row. */
        .level-info-line.substep-info-below {
            display: block;
            margin-top: 4px;
            font-size: 11px;
        }
        /* Lemma + cognate stay side-by-side at every width — the toggle
           buttons shrink and wrap their labels onto two lines so they
           fit half-width even on narrow phones. */

        /* Desktop two-column setup layout — at wider viewports the existing
           setup steps stay at their original width in a left column, and
           "Continue Level" (#step4) gets its own narrower column on the right.
           Container widens just enough to fit the new column; everything
           that already existed (top bar, language tabs, level slider,
           lemma/cognate toggles, progress bar) keeps its prior width.

           Below 1024px the grid collapses and steps stack vertically as
           before — no change for mobile/tablet. */
        @media (min-width: 1024px) {
            .container { max-width: 1140px; }
            #setupPanel.file-upload {
                display: grid;
                grid-template-columns: minmax(0, 760px) minmax(280px, 340px);
                column-gap: 20px;
                align-items: start;
                justify-content: start;
                text-align: left;
            }
            /* All existing steps stay in the left column at their prior
               width — no `1 / -1` spanning, so the topBar / language tabs /
               progress bar look the same as on a single-column layout. */
            #setupPanel.file-upload > * {
                grid-column: 1;
                min-width: 0;
            }
            /* The stable-set progress panel gets the right column, top-aligned so it
               appears as a sidebar alongside the steps. grid-row: 1 / -1
               lets it span the full height of the left stack. */
            #setupPanel.file-upload > #step4 {
                grid-column: 2;
                grid-row: 1 / -1;
                align-self: start;
                margin-bottom: 0;
            }
        }

        .selection-pill {
            display: none;
            align-items: center;
            justify-content: center;
            margin-top: 12px;
            padding: 12px 20px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-radius: 8px;
            font-family: var(--font-emphasis);
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
        }

        .selection-pill.visible {
            display: flex;
        }

        .selection-pill:hover {
            filter: brightness(1.1);
        }

        /* Full width pill for language selection */
        .selection-pill.full-width {
            width: 100%;
            padding: 14px 20px;
            font-size: 17px;
        }

        /* Loading state for data refresh */
        .data-loading-indicator {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 15px;
            color: var(--text-muted);
            font-size: 14px;
        }

        .data-loading-indicator.visible {
            display: flex;
        }

        .data-loading-indicator .spinner {
            width: 20px;
            height: 20px;
            border: 2px solid var(--border-color);
            border-top-color: var(--accent-primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

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

        .step-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 8px;
            margin-top: 4px;
        }

        .step-number {
            font-family: var(--font-emphasis);
            width: 28px;
            height: 28px;
            background: var(--accent-secondary);
            color: var(--accent-secondary-text);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 14px;
        }

        .step-number.--active {
            animation: active-step-pulse 2.4s ease-in-out infinite;
        }

        @keyframes active-step-pulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(var(--accent-secondary-rgb, 255, 204, 0), 0);
            }
            50% {
                transform: scale(1.12);
                box-shadow: 0 0 0 7px rgba(var(--accent-secondary-rgb, 255, 204, 0), 0.22);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .step-number.--active {
                animation: none;
                box-shadow: 0 0 0 4px rgba(var(--accent-secondary-rgb, 255, 204, 0), 0.22);
            }
        }

        .step-title {
            font-family: var(--font-emphasis);
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .level-selector {
            display: flex;
            flex-wrap: nowrap;
            gap: 0;
            justify-content: flex-start;
            background: var(--bg-tertiary);
            border-radius: 12px;
            padding: 4px;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: thin;
            scrollbar-color: var(--border-color) transparent;
        }

        .level-selector::-webkit-scrollbar {
            height: 6px;
        }

        .level-selector::-webkit-scrollbar-track {
            background: transparent;
        }

        .level-selector::-webkit-scrollbar-thumb {
            background: var(--border-color);
            border-radius: 3px;
        }

        /* Step-header annotations ("X excluded", level coverage info, etc.).
           Match the surrounding header font (var(--font-emphasis)) and drop
           the italic so they read as quiet labels rather than a different
           voice. Positioning is handled by the parent .step-header-actions
           group, which keeps the annotation tight against the help button
           on the right edge. */
        .level-info-line {
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 500;
            color: var(--text-muted);
            white-space: nowrap;
        }

        .level-btn {
            flex: 0 0 auto;
            min-width: 60px;
            padding: 10px 14px;
            background: transparent;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            color: var(--text-muted);
            position: relative;
        }

        .level-btn.has-partial-progress::after {
            content: '';
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: 4px;
            height: 2px;
            border-radius: 999px;
            background: linear-gradient(to right,
                var(--accent-secondary) 0,
                var(--accent-secondary) var(--level-progress),
                rgba(var(--accent-secondary-rgb), 0.2) var(--level-progress),
                rgba(var(--accent-secondary-rgb), 0.2) 100%);
        }

        .level-btn:hover {
            background: rgba(255, 107, 53, 0.1);
            color: var(--text-primary);
        }

        .level-btn.selected {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            padding: 10px 16px;
        }

        /* Slider variant of the level selector — used in % mode (and artist
           mode, which forces % mode). The container loses its scrolling
           pill-row layout and becomes a single block holding the slider UI. */
        .level-selector.level-selector--slider {
            display: block;
            overflow: visible;
            padding: 12px 14px;
        }
        .level-slider-wrap {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .lsw-readout {
            display: flex;
            justify-content: flex-start;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 4px 12px;
            font-family: var(--font-emphasis);
            font-size: 14px;
            color: var(--text-muted);
        }
        .lsw-readout strong {
            color: var(--text-primary);
            font-weight: 700;
        }
        .lsw-readout .lsw-rank {
            font-size: 16px;
            color: var(--text-primary);
        }
        .lsw-readout .lsw-range {
            color: var(--text-secondary);
        }
        .lsw-readout .lsw-deck-total {
            color: var(--text-muted);
            font-size: 0.78em;
            font-weight: 500;
            opacity: 0.78;
        }
        .lsw-readout .lsw-coverage {
            margin-left: auto;
        }
        /* Segmented level bar — replaces the old <input type="range">
           thumb-on-track. Each .lsw-seg is one snap point; clicking a
           segment selects the range from start through that segment
           ("line within the line" fill). Equal widths regardless of how
           many cards a segment covers, so labels stay readable. */
        .lsw-segments {
            display: flex;
            gap: 2px;
            width: 100%;
            margin: 4px 0 2px;
        }
        .lsw-seg {
            flex: 1 1 0;
            min-width: 0;
            height: 14px;
            padding: 0;
            background: var(--bg-secondary, rgba(255, 255, 255, 0.08));
            border: 1px solid transparent;
            border-radius: 3px;
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .lsw-seg:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
        .lsw-seg:last-child  { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
        .lsw-seg:hover:not(.filled) {
            background: rgba(255, 107, 53, 0.18);
        }
        .lsw-seg.filled {
            background: var(--accent-primary);
        }
        .lsw-seg.selected {
            border-color: var(--text-primary);
            box-shadow: 0 0 0 1px var(--accent-primary);
        }
        /* Horizontal zoomed scrubber variant: the crammed segment bar becomes a
           scroll-snap "ruler" you swipe/drag left-right; the centered segment is
           magnified and is the selected level. Reuses .lsw-seg selection logic. */
        .lsw-segments.lsw-scrubber {
            gap: 0;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            padding: 8px 50% 4px;
            margin: 2px 0;
            scrollbar-width: none;
            -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
                    mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
        }
        .lsw-segments.lsw-scrubber::-webkit-scrollbar { display: none; }
        .lsw-segments.lsw-scrubber .lsw-seg {
            flex: 0 0 auto;
            width: 76px;
            height: 40px;
            padding: 0;
            background: transparent;
            border: none;
            border-radius: 0;
            box-shadow: none;
            scroll-snap-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.4;
            transform: scale(0.8);
            transition: transform 0.16s ease, opacity 0.16s ease, color 0.16s ease;
            color: var(--text-muted, #8a8f98);
            font: 700 0.82rem/1 var(--font-data, var(--font-emphasis, monospace));
            position: relative;
        }
        .lsw-segments.lsw-scrubber .lsw-seg.has-partial-progress::after {
            content: '';
            position: absolute;
            left: 18px;
            right: 18px;
            bottom: 7px;
            height: 3px;
            border-radius: 999px;
            background: linear-gradient(to right,
                var(--accent-secondary) 0,
                var(--accent-secondary) var(--level-progress),
                rgba(var(--accent-secondary-rgb), 0.22) var(--level-progress),
                rgba(var(--accent-secondary-rgb), 0.22) 100%);
            box-shadow: 0 0 5px rgba(var(--accent-secondary-rgb), 0.2);
        }
        .lsw-segments.lsw-scrubber .lsw-seg .lsw-seg-label { pointer-events: none; }
        .lsw-segments.lsw-scrubber .lsw-seg.filled:not(.selected) {
            opacity: 0.62; color: var(--text-secondary, #b7bcc4);
        }
        .lsw-segments.lsw-scrubber .lsw-seg:hover:not(.selected) {
            opacity: 0.8; background: transparent;
        }
        .lsw-segments.lsw-scrubber .lsw-seg.selected {
            opacity: 1;
            transform: scale(1.45);
            color: var(--accent-primary, #ff6b35);
            border: none;
            box-shadow: none;
        }
        .lsw-segments.lsw-scrubber .lsw-seg.is-suggestion-skipped:not(.selected) {
            opacity: 0.28;
            text-decoration: line-through;
            text-decoration-thickness: 1px;
        }
        .lsw-ticks.lsw-ticks--hidden { display: none !important; }
        .lsw-ticks {
            display: flex;
            font-family: var(--font-emphasis);
            font-size: 12px;
            color: var(--text-muted);
            user-select: none;
            padding: 0;
            gap: 2px;
        }
        .lsw-ticks span {
            flex: 1 1 0;
            min-width: 0;
            text-align: center;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .lsw-ticks span:hover {
            color: var(--text-primary);
        }
        .lsw-examples {
            /* Frequency sentence stacked over the example words — a new
               line for the examples, per the readout redesign. */
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 3px;
            font-family: var(--font-emphasis);
            font-size: 12px;
            font-weight: 500;
            color: var(--text-muted);
            min-height: 1.2em;
        }
        .lsw-examples .lsw-freq-sentence {
            color: var(--text-primary);
            font-weight: 500;
            line-height: 1.3;
        }
        .lsw-examples .lsw-freq-sentence strong {
            font-weight: 700;
        }
        .lsw-examples .lsw-egs {
            min-width: 0;
            max-width: 100%;
            color: var(--text-muted);
            line-height: 1.35;
            /* Allow examples to wrap onto two lines, then truncate. */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            white-space: normal;
            word-break: break-word;
        }

        .range-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }

        .study-set-panel {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 14px;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            background: color-mix(in srgb, var(--bg-tertiary) 82%, transparent);
        }
        .study-set-overview,
        .study-set-current-copy {
            display: flex;
            flex-direction: column;
            gap: 3px;
            font-family: var(--font-emphasis);
        }
        .study-set-overview strong,
        .study-set-current-copy strong {
            color: var(--text-primary);
            font-size: 14px;
        }
        .study-set-overview span,
        .study-set-current-copy span,
        .study-set-empty {
            color: var(--text-muted);
            font-size: 12px;
            line-height: 1.4;
        }
        .study-set-dots {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
            gap: 5px;
        }
        .study-set-legend {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 12px;
            color: var(--text-muted);
            font: 600 9px/1 var(--font-emphasis);
        }
        .study-set-legend span {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .study-set-legend i {
            width: 7px;
            height: 7px;
            border-radius: 2px;
            background: rgba(255, 255, 255, 0.06);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
        }
        .study-set-legend i.is-known {
            background: color-mix(in srgb, var(--success) 58%, var(--bg-card));
        }
        .study-set-legend i.is-review {
            background: color-mix(in srgb, var(--warning) 66%, var(--bg-card));
        }
        .study-set-dot {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 0;
            height: 32px;
            padding: 0;
            border: 1px solid var(--border-color);
            border-radius: 7px;
            background: linear-gradient(
                to right,
                color-mix(in srgb, var(--success) 58%, var(--bg-card)) 0 var(--set-known-end),
                color-mix(in srgb, var(--warning) 66%, var(--bg-card)) var(--set-known-end) var(--set-review-end),
                rgba(255, 255, 255, 0.045) var(--set-review-end) 100%
            );
            color: var(--text-primary);
            font: 700 11px/1 var(--font-emphasis);
            cursor: pointer;
            transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
        }
        .study-set-dot.is-partial {
            border-color: rgba(var(--accent-secondary-rgb), 0.48);
        }
        .study-set-dot:hover:not(:disabled) {
            border-color: var(--accent-secondary);
            color: var(--text-primary);
            transform: translateY(-1px);
        }
        .study-set-dot.is-complete {
            border-color: var(--accent-secondary);
        }
        .study-set-dot.is-current {
            border-color: var(--accent-primary);
            box-shadow:
                0 0 0 3px var(--bg-card),
                0 0 0 6px rgba(var(--accent-primary-rgb), 0.72),
                0 8px 18px rgba(var(--accent-primary-rgb), 0.28);
            color: var(--text-primary);
            z-index: 2;
            animation: current-study-set-pulse 1.65s ease-in-out infinite;
        }
        @keyframes current-study-set-pulse {
            0%, 100% {
                transform: translateY(-1px) scale(1);
                filter: brightness(1);
                box-shadow:
                    0 0 0 3px var(--bg-card),
                    0 0 0 6px rgba(var(--accent-primary-rgb), 0.72),
                    0 8px 18px rgba(var(--accent-primary-rgb), 0.28);
            }
            45% {
                transform: translateY(-4px) scale(1.09);
                filter: brightness(1.12);
                box-shadow:
                    0 0 0 3px var(--bg-card),
                    0 0 0 8px rgba(var(--accent-primary-rgb), 0.42),
                    0 11px 24px rgba(var(--accent-primary-rgb), 0.36);
            }
            62% {
                transform: translateY(-1px) scale(1.03);
                filter: brightness(1.04);
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .study-set-dot.is-current {
                animation: none;
                transform: translateY(-1px) scale(1.04);
            }
        }
        .study-set-dot.is-empty {
            opacity: 0.25;
            cursor: default;
        }
        .range-btn-new.study-set-start {
            width: 100%;
            min-height: 46px;
            font-size: 15px;
            font-weight: 700;
            background: var(--accent-primary);
            border-color: var(--accent-primary);
            color: var(--accent-primary-text);
        }
        .range-btn-new.study-set-start:hover {
            background: color-mix(in srgb, var(--accent-primary) 88%, white);
            border-color: var(--accent-primary);
            color: var(--accent-primary-text);
        }
        .study-set-review {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 12px;
            border: 1px solid color-mix(in srgb, var(--error) 38%, var(--border-color));
            border-radius: 9px;
            background: color-mix(in srgb, var(--error) 8%, transparent);
            color: var(--text-primary);
            font: 650 12px/1.3 var(--font-emphasis);
            cursor: pointer;
            transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
        }
        .study-set-review small {
            color: var(--text-muted);
            font-size: 10px;
            font-weight: 600;
        }
        .study-set-review:hover {
            border-color: var(--error);
            background: color-mix(in srgb, var(--error) 13%, transparent);
            transform: translateY(-1px);
        }
        .level-suggestion-toggle {
            width: auto;
            display: flex;
            align-items: center;
            align-self: flex-start;
            gap: 6px;
            padding: 3px 1px;
            border: 0;
            border-radius: 4px;
            background: transparent;
            color: var(--text-muted);
            text-align: left;
            cursor: pointer;
            transition: color 0.16s ease;
        }
        .level-suggestion-toggle::before {
            content: "↳";
            font: 600 11px/1 var(--font-data);
            opacity: 0.72;
        }
        .level-suggestion-toggle:hover {
            color: var(--text-secondary);
        }
        .level-suggestion-toggle-copy {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
            font-family: var(--font-emphasis);
        }
        .level-suggestion-toggle-copy strong {
            font-size: 10px;
            font-weight: 600;
        }
        .level-suggestion-toggle-copy small {
            display: none;
        }
        .level-suggestion-switch {
            display: none;
        }
        .level-suggestion-switch i {
            display: block;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--text-muted);
            transition: transform 0.16s ease, background 0.16s ease;
        }
        .level-suggestion-toggle.is-on {
            color: var(--accent-primary);
            background: transparent;
        }
        .level-suggestion-toggle.is-on .level-suggestion-switch {
            border-color: var(--accent-primary);
            background: var(--accent-primary);
        }
        .level-suggestion-toggle.is-on .level-suggestion-switch i {
            background: var(--accent-primary-text);
            transform: translateX(16px);
        }

        .knowledge-overview-trigger {
            position: relative;
            color: var(--text-primary);
            cursor: pointer;
        }
        .knowledge-overview-icon-lines,
        .knowledge-overview-icon-check {
            fill: none;
            stroke: currentColor;
            stroke-width: 2.2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .knowledge-overview-icon-check {
            color: var(--accent-green);
        }
        .knowledge-overview-count {
            position: absolute;
            right: -2px;
            bottom: 0;
            min-width: 25px;
            padding: 2px 4px;
            border: 2px solid var(--bg-primary);
            border-radius: 999px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            font: 750 11px/1 var(--font-emphasis);
            letter-spacing: -0.02em;
        }

        body.knowledge-overview-open {
            overflow: hidden;
        }
        .knowledge-overview-modal {
            position: fixed;
            inset: 0;
            z-index: 2600;
            display: grid;
            place-items: center;
            padding: 20px;
            background: rgba(4, 7, 12, 0.76);
            backdrop-filter: blur(12px);
        }
        .knowledge-overview-modal[hidden] {
            display: none;
        }
        /* The knowledge overview is a TOP sheet: it hangs from the top edge and
           drops down, and it leaves the same way. The syn-leave confirmation
           borrows this chrome and now shares the same top entrance, so every
           sheet built on it arrives from the same edge. */
        .knowledge-overview-modal {
            place-items: start center;
            padding-top: max(20px, env(safe-area-inset-top));
        }
        .knowledge-overview-modal .knowledge-overview-sheet {
            animation: knowledgeOverviewDropIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        .knowledge-overview-modal.is-closing {
            animation: knowledgeOverviewBackdropOut 170ms linear both;
            pointer-events: none;
        }
        .knowledge-overview-modal.is-closing .knowledge-overview-sheet {
            animation: knowledgeOverviewDropOut 170ms cubic-bezier(0.4, 0, 1, 1) both;
        }
        @keyframes knowledgeOverviewDropIn {
            from { transform: translateY(-18px) scale(0.985); opacity: 0; }
            to { transform: none; opacity: 1; }
        }
        @keyframes knowledgeOverviewDropOut {
            from { transform: none; opacity: 1; }
            to { transform: translateY(-16px) scale(0.985); opacity: 0; }
        }
        @keyframes knowledgeOverviewSlideDownIn {
            from { transform: translateY(-100%); }
            to { transform: none; }
        }
        @keyframes knowledgeOverviewSlideUpOut {
            from { transform: none; }
            to { transform: translateY(-100%); }
        }
        @keyframes knowledgeOverviewBackdropOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .knowledge-overview-modal,
            .knowledge-overview-modal.is-closing,
            .knowledge-overview-modal .knowledge-overview-sheet,
            .knowledge-overview-modal.is-closing .knowledge-overview-sheet {
                animation: none;
            }
        }
        .knowledge-overview-sheet {
            display: flex;
            flex-direction: column;
            width: min(580px, 100%);
            max-height: min(760px, calc(100dvh - 40px));
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.13);
            border-radius: 20px;
            background: linear-gradient(155deg, rgba(29, 35, 46, 0.99), rgba(13, 17, 24, 0.99));
            box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
            color: var(--text-primary);
            font-family: var(--font-emphasis);
        }
        .knowledge-overview-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;
            padding: 20px 20px 12px;
        }
        .knowledge-overview-kicker {
            display: block;
            margin-bottom: 4px;
            color: var(--accent-primary);
            font-size: 10px;
            font-weight: 750;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }
        .knowledge-overview-header h2 {
            margin: 0;
            color: var(--text-primary);
            font: 700 22px/1.15 var(--font-emphasis);
            letter-spacing: -0.025em;
        }
        .knowledge-overview-close {
            flex: 0 0 38px;
            width: 38px;
            height: 38px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.055);
            color: var(--text-primary);
            font: 400 25px/1 var(--font-reading);
            cursor: pointer;
        }
        .knowledge-overview-intro {
            margin: 0 20px 10px;
            color: var(--text-muted);
            font-size: 11.5px;
            line-height: 1.5;
        }
        .knowledge-overview-legend-known {
            color: var(--accent-green);
            font-weight: 650;
            white-space: nowrap;
        }
        .knowledge-overview-legend-review {
            color: color-mix(in srgb, var(--error) 82%, white);
            font-weight: 650;
            white-space: nowrap;
        }
        .knowledge-overview-summary {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px 14px;
            margin: 0 20px 10px;
            padding: 10px 12px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.045);
            color: var(--text-muted);
            font-size: 11px;
        }
        .knowledge-overview-summary strong {
            color: var(--accent-green);
            font-size: 12px;
        }
        .knowledge-overview-summary-review {
            color: color-mix(in srgb, var(--error) 82%, white);
        }
        .knowledge-overview-list {
            min-height: 0;
            overflow-y: auto;
            padding: 0 20px 20px;
            overscroll-behavior: contain;
        }
        .knowledge-overview-section + .knowledge-overview-section {
            margin-top: 18px;
        }
        .knowledge-overview-section h3 {
            display: flex;
            align-items: center;
            gap: 7px;
            margin: 0 0 7px;
            color: var(--text-secondary);
            font: 700 11px/1.2 var(--font-emphasis);
            letter-spacing: 0.07em;
            text-transform: uppercase;
        }
        .knowledge-overview-section h3 span {
            display: inline-grid;
            place-items: center;
            min-width: 20px;
            height: 20px;
            padding: 0 5px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.07);
            color: var(--text-muted);
            font-size: 10px;
        }
        .knowledge-overview-rows {
            display: grid;
            gap: 6px;
        }
        .knowledge-overview-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: stretch;
            gap: 8px;
            min-height: 54px;
            border: 1px solid rgba(255, 255, 255, 0.085);
            border-radius: 11px;
            background: rgba(255, 255, 255, 0.035);
        }
        .knowledge-overview-row.is-known {
            border-color: color-mix(in srgb, var(--accent-green) 34%, transparent);
            background: color-mix(in srgb, var(--accent-green) 7%, transparent);
        }
        .knowledge-overview-row.is-review {
            border-color: color-mix(in srgb, var(--error) 32%, transparent);
            background: color-mix(in srgb, var(--error) 6%, transparent);
        }
        .knowledge-overview-focus {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            padding: 8px 4px 8px 11px;
            border: 0;
            background: none;
            color: inherit;
            text-align: left;
            cursor: pointer;
        }
        .knowledge-overview-status {
            flex: 0 0 8px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--text-muted);
        }
        .is-known .knowledge-overview-status {
            background: var(--accent-green);
            box-shadow: 0 0 8px color-mix(in srgb, var(--accent-green) 60%, transparent);
        }
        .is-review .knowledge-overview-status {
            background: var(--error);
            box-shadow: 0 0 8px color-mix(in srgb, var(--error) 60%, transparent);
        }
        .knowledge-overview-copy {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 2px 6px;
            min-width: 0;
        }
        .knowledge-overview-copy strong {
            color: var(--text-primary);
            font: 650 14px/1.25 var(--font-reading);
        }
        .knowledge-overview-copy small {
            flex-basis: 100%;
            color: var(--text-muted);
            font: 500 11px/1.3 var(--font-reading);
        }
        .knowledge-overview-pos {
            color: var(--accent-secondary);
            font-size: 9px;
            font-weight: 750;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
        .knowledge-overview-actions {
            display: grid;
            grid-template-columns: 38px 38px;
            gap: 4px;
            align-items: center;
            padding-right: 7px;
        }
        .knowledge-overview-mark {
            width: 38px;
            height: 38px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 9px;
            background: rgba(255, 255, 255, 0.035);
            color: var(--text-muted);
            font: 750 17px/1 var(--font-emphasis);
            cursor: pointer;
        }
        .knowledge-overview-mark.mark-known:hover,
        .knowledge-overview-mark.mark-known.is-active {
            border-color: var(--accent-green);
            background: color-mix(in srgb, var(--accent-green) 16%, transparent);
            color: var(--accent-green);
        }
        .knowledge-overview-mark.mark-review:hover,
        .knowledge-overview-mark.mark-review.is-active {
            border-color: var(--error);
            background: color-mix(in srgb, var(--error) 14%, transparent);
            color: color-mix(in srgb, var(--error) 82%, white);
        }

        @media (max-width: 560px) {
            .knowledge-overview-modal {
                place-items: end center;
                padding: 0;
            }
            .knowledge-overview-sheet {
                width: 100%;
                max-height: min(88dvh, 820px);
                border-right: 0;
                border-bottom: 0;
                border-left: 0;
                border-radius: 20px 20px 0 0;
            }
            .knowledge-overview-header {
                padding: 17px 15px 10px;
            }
            .knowledge-overview-intro,
            .knowledge-overview-summary {
                margin-right: 15px;
                margin-left: 15px;
            }
            /* Top sheet on mobile: flush to the top edge, rounded on the
               bottom, entering and leaving through the top edge. The syn-leave
               confirmation is a short dialog, not an inventory, so it keeps the
               compact drop-in from the shared block above rather than becoming
               a full-bleed sheet. */
            .knowledge-overview-modal:not(.syn-leave-modal) {
                place-items: start center;
                padding: 0;
            }
            .knowledge-overview-modal:not(.syn-leave-modal) .knowledge-overview-sheet {
                border-top: 0;
                border-bottom: 1px solid rgba(255, 255, 255, 0.13);
                border-radius: 0 0 20px 20px;
                max-height: min(88dvh, 820px);
                animation-name: knowledgeOverviewSlideDownIn;
            }
            .knowledge-overview-modal:not(.syn-leave-modal).is-closing .knowledge-overview-sheet {
                animation-name: knowledgeOverviewSlideUpOut;
            }
            .knowledge-overview-modal:not(.syn-leave-modal) .knowledge-overview-header {
                padding-top: calc(17px + env(safe-area-inset-top));
            }
            .knowledge-overview-list {
                padding-right: 15px;
                padding-bottom: 18px;
                padding-left: 15px;
            }
            .knowledge-overview-row {
                gap: 4px;
            }
            .knowledge-overview-actions {
                grid-template-columns: 36px 36px;
                padding-right: 6px;
            }
            .knowledge-overview-mark {
                width: 36px;
                height: 36px;
            }
        }

        /* Range buttons: completion % drives a left-to-right gradient on the
           button bg — yellow on the filled portion, transparent on the rest
           so the page bg shows through and the yellow visibly IS the fill.
           Text is a single colour (--text-primary, white in this dark theme)
           so the label stays readable across the boundary regardless of
           where the fill cuts through it. @property lets --rb-fill animate
           as a percentage so :hover smoothly extends the fill to 100%. */
        @property --rb-fill {
            syntax: '<percentage>';
            inherits: false;
            initial-value: 0%;
        }

        .range-btn-new {
            font-family: var(--font-emphasis);
            padding: 10px 16px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-primary);
            min-width: 81px;
            position: relative;
            overflow: hidden;
            /* --rb-fill defaults to the inline --rb-pct set by the JS render,
               but :hover sets --rb-fill directly so it wins the cascade
               against the inline value. */
            --rb-fill: var(--rb-pct, 0%);
            background: linear-gradient(to right,
                var(--accent-secondary) 0%,
                var(--accent-secondary) var(--rb-fill),
                transparent var(--rb-fill),
                transparent 100%);
            transition: --rb-fill 0.3s ease, color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.2s;
        }

        /* Studied sets: full accent on the filled portion, translucent
           accent on the unfilled portion. Both halves stay tinted with
           the accent colour family, so --accent-secondary-text — which
           is white for dark accents (Bad Bunny red, etc.) and dark for
           light accents (yellow) — reads against either side. A plain
           white unfilled bg looks crisp for light accents but goes
           white-on-white invisible for dark-accent / white-text artists. */
        .range-btn-new.has-progress {
            color: var(--accent-secondary-text);
            border-color: var(--accent-secondary);
            background: linear-gradient(to right,
                var(--accent-secondary) 0%,
                var(--accent-secondary) var(--rb-fill),
                rgba(var(--accent-secondary-rgb, 255, 204, 0), 0.4) var(--rb-fill),
                rgba(var(--accent-secondary-rgb, 255, 204, 0), 0.4) 100%);
            font-weight: 600;
        }

        /* Hover always fills to 100% and switches text to the on-yellow
           contrast colour — applies to never-started buttons too so the
           full-yellow hover state isn't white-on-yellow. */
        .range-btn-new:hover {
            --rb-fill: 100%;
            color: var(--accent-secondary-text);
            border-color: var(--accent-secondary);
            box-shadow: 0 0 15px rgba(var(--accent-secondary-rgb, 255, 204, 0), 0.3);
            transform: translateY(-2px);
        }

        .range-btn-new:active {
            transform: scale(0.95);
        }

        .range-btn-new.disabled,
        .range-btn-new:disabled {
            background: var(--bg-secondary);
            color: var(--text-muted);
            border-color: var(--border-color);
            cursor: not-allowed;
            opacity: 0.35;
            pointer-events: none;
        }

        .range-btn-new.disabled:hover,
        .range-btn-new:disabled:hover {
            background: var(--bg-secondary);
            color: var(--text-muted);
            border-color: var(--border-color);
            box-shadow: none;
            transform: none;
            cursor: not-allowed;
            pointer-events: none;
        }

        .range-btn-new.disabled:active,
        .range-btn-new:disabled:active {
            transform: none;
            pointer-events: none;
        }

        .range-btn-new.incorrect-range-btn {
            background: rgba(255, 107, 53, 0.15);
            border-color: rgba(255, 107, 53, 0.4);
            color: var(--accent-primary);
        }

        .range-btn-new.incorrect-range-btn:hover {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
            box-shadow: 0 0 15px rgba(255, 107, 53, 0.3);
        }

        .range-btn {
            padding: 8px 16px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s;
            color: var(--text-secondary);
        }

        .range-btn:hover {
            background: var(--bg-card-hover);
            border-color: var(--accent-primary);
        }

        .range-btn.selected {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
        }

        .language-tabs {
            display: flex;
            background: transparent;
            border-radius: 12px;
            padding: 0;
            overflow: visible;
        }

        #step1:not(.language-summary-active) > .step-header {
            margin: 0;
            padding-right: 0;
            cursor: pointer;
        }

        #step1:not(.language-summary-active):hover {
            border-color: color-mix(in srgb, var(--accent-primary) 60%, var(--border-color));
            background: color-mix(in srgb, var(--accent-primary) 5%, var(--bg-card));
        }

        #step1:not(.language-summary-active) > .step-header:focus-visible {
            outline: 2px solid var(--accent-primary);
            outline-offset: 4px;
            border-radius: 8px;
        }

        .language-step-prompt-arrow {
            margin-left: auto;
            color: var(--text-muted);
            font-family: var(--font-emphasis);
            font-size: 28px;
            line-height: 1;
        }

        #step1.language-summary-active .language-step-prompt-arrow {
            display: none;
        }

        .language-picker-btn {
            width: 100%;
            min-height: 54px;
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 12px;
            padding: 10px 16px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background: var(--bg-tertiary);
            color: var(--text-primary);
            cursor: pointer;
            transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
        }

        .language-picker-btn:hover,
        .language-picker-btn:focus-visible {
            border-color: var(--accent-primary);
            background: var(--bg-card-hover);
            transform: translateY(-1px);
            outline: none;
        }

        .language-picker-btn-icon {
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(var(--accent-primary-rgb), 0.16);
            font-size: 20px;
        }

        .language-picker-btn-label {
            font-family: var(--font-emphasis);
            font-size: 15px;
            font-weight: 700;
            text-align: left;
        }

        .language-picker-btn-arrow {
            color: var(--text-muted);
            font-family: var(--font-emphasis);
            font-size: 28px;
            line-height: 1;
        }

        .language-picker-options {
            display: none;
        }

        .artist-source-step {
            padding-bottom: 15px;
        }
        .artist-source-header {
            align-items: flex-end;
            margin-bottom: 9px;
        }
        .artist-source-header > div {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .artist-source-eyebrow {
            font-family: var(--font-emphasis);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text-muted);
        }
        .artist-source-card {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
            padding: 8px;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            background: var(--bg-tertiary);
        }
        .artist-source-picker {
            min-width: 0;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 11px;
            padding: 4px 7px 4px 4px;
            border: 0;
            border-radius: 10px;
            background: transparent;
            color: var(--text-primary);
            cursor: pointer;
            text-align: left;
        }
        .artist-source-picker:hover,
        .artist-source-picker:focus-visible {
            background: var(--bg-card-hover);
            outline: none;
        }
        .artist-source-image {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            flex-shrink: 0;
            border-radius: 50%;
            background-position: center;
            background-size: cover;
            color: #fff;
            font-family: var(--font-emphasis);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.03em;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
        }
        .artist-source-image--fallback {
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 4px 14px rgba(var(--accent-primary-rgb), 0.24);
        }
        .artist-source-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
            color: var(--text-muted);
            font-family: var(--font-reading);
            font-size: 11px;
        }
        .artist-source-name {
            overflow: hidden;
            color: var(--text-primary);
            font-family: var(--font-emphasis);
            font-size: 15px;
            font-weight: 700;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .artist-source-speech-btn {
            align-self: stretch;
            padding: 0 13px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--bg-card);
            color: var(--text-secondary);
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
        }
        .artist-source-speech-btn:hover,
        .artist-source-speech-btn:focus-visible {
            border-color: var(--accent-secondary);
            background: color-mix(in srgb, var(--accent-secondary) 12%, var(--bg-card));
            color: var(--text-primary);
            outline: none;
        }
        .artist-source-secondary-actions {
            display: grid;
            grid-template-columns: 1fr;
            gap: 6px;
        }
        .artist-vocabulary-scope {
            grid-column: 1 / -1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            padding: 10px 10px 4px;
            border-top: 1px solid var(--border-color);
            color: var(--text-muted);
            font-family: var(--font-reading);
            font-size: 11px;
        }
        .artist-vocabulary-scope-title {
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--text-muted);
        }
        /* The static explainer now carries the Main/Extra description, so the
           dynamic one-line hint is redundant on the setup page. */
        #artistVocabularyScopeHint {
            display: none;
        }
        .artist-vocabulary-scope-buttons {
            display: inline-grid;
            grid-template-columns: 1fr 1fr;
            padding: 3px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--bg-card);
        }
        .artist-vocabulary-scope-btn {
            min-width: 66px;
            min-height: 32px;
            padding: 6px 12px;
            border: 0;
            border-radius: 7px;
            background: transparent;
            color: var(--text-muted);
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
        }
        .artist-vocabulary-scope-btn.selected {
            background: color-mix(in srgb, var(--accent-primary) 20%, var(--bg-tertiary));
            color: var(--text-primary);
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 52%, transparent);
        }
        .artist-vocabulary-scope-btn.is-locked {
            opacity: 0.52;
            border: 1px dashed color-mix(in srgb, var(--text-muted) 48%, transparent);
            cursor: not-allowed;
        }
        #artistVocabularyScopeHint {
            line-height: 1.35;
        }
        @media (max-width: 430px) {
            .artist-source-card {
                grid-template-columns: 1fr;
            }
            .artist-source-speech-btn {
                min-height: 38px;
            }
            .artist-source-secondary-actions {
                grid-template-columns: 1fr 1fr;
            }
            .artist-vocabulary-scope {
                grid-template-columns: 1fr;
                gap: 7px;
            }
            .artist-vocabulary-scope-buttons {
                width: 100%;
            }
        }

        .extra-translation-unavailable {
            margin: 2px 8px 10px;
            padding: 9px 12px;
            border: 1px dashed color-mix(in srgb, var(--accent-secondary) 45%, var(--border-color));
            border-radius: 10px;
            background: color-mix(in srgb, var(--accent-secondary) 8%, transparent);
            color: var(--text-secondary);
            font-family: var(--font-reading);
            font-size: 12px;
            line-height: 1.35;
            text-align: center;
        }

        /* --- Extra scope confirm modal --- */
        .extra-scope-body {
            padding: 4px 4px 0;
            color: var(--text-secondary);
            font-family: var(--font-reading);
            font-size: 14px;
            line-height: 1.55;
        }
        .extra-scope-body p {
            margin: 0 0 12px;
        }
        .extra-scope-lead strong,
        .extra-scope-note strong {
            color: var(--text-primary);
            font-family: var(--font-emphasis);
        }
        .extra-scope-points {
            margin: 0 0 14px;
            padding-left: 20px;
            display: grid;
            gap: 6px;
        }
        .extra-scope-points li {
            list-style: disc;
        }
        .extra-scope-note {
            padding: 10px 12px;
            border-radius: 10px;
            background: color-mix(in srgb, var(--accent-secondary) 8%, transparent);
            border: 1px solid color-mix(in srgb, var(--accent-secondary) 30%, var(--border-color));
            font-size: 13px;
        }
        .extra-scope-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            align-items: center;
            margin-top: 16px;
            flex-wrap: wrap;
        }
        .extra-scope-cancel {
            padding: 10px 16px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: transparent;
            color: var(--text-secondary);
            font-family: var(--font-emphasis);
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
        }
        .extra-scope-cancel:hover {
            background: var(--bg-card-hover);
            border-color: var(--accent-primary);
        }
        .extra-scope-confirm.range-btn-new {
            width: auto;
            min-width: 180px;
            margin: 0;
            padding: 11px 18px;
        }

        /* --- Extra category (level replacement) selector --- */
        .extra-category-selector {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .extra-category-intro {
            margin: 0;
            color: var(--text-muted);
            font-family: var(--font-reading);
            font-size: 12px;
            line-height: 1.4;
        }
        .extra-category-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .extra-category-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 14px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background: var(--bg-card);
            color: var(--text-secondary);
            font-family: var(--font-emphasis);
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: border-color 0.15s ease, background 0.15s ease;
        }
        .extra-category-chip:hover {
            background: var(--bg-card-hover);
            border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--border-color));
        }
        .extra-category-chip.selected {
            background: color-mix(in srgb, var(--accent-primary) 20%, var(--bg-tertiary));
            color: var(--text-primary);
            border-color: color-mix(in srgb, var(--accent-primary) 60%, transparent);
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 45%, transparent);
        }
        .extra-category-chip-count {
            padding: 1px 8px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--border-color) 60%, transparent);
            color: var(--text-muted);
            font-size: 11px;
            font-weight: 700;
        }
        .extra-category-chip.selected .extra-category-chip-count {
            background: color-mix(in srgb, var(--accent-primary) 30%, transparent);
            color: var(--text-primary);
        }

        .lang-tab {
            flex: 0 0 auto;
            min-width: 60px;
            padding: 10px 14px;
            background: transparent;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            color: var(--text-muted);
        }

        .lang-tab.active {
            background: var(--bg-card);
            color: var(--text-primary);
            font-weight: 700;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }

        .lang-tab.disabled {
            opacity: 0.3;
            cursor: not-allowed;
            position: relative;
        }

        .lang-tab.disabled:hover {
            background: transparent;
            color: var(--text-muted);
        }

        .cefr-card {
            background: var(--bg-card);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 15px;
            border: 1px solid var(--border-color);
            cursor: pointer;
            transition: all 0.3s;
        }

        .cefr-card:hover {
            transform: translateY(-2px);
            border-color: var(--accent-primary);
            box-shadow: 0 4px 20px rgba(255, 107, 53, 0.15);
        }

        .cefr-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .cefr-level {
            font-family: var(--font-emphasis);
            font-size: 24px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .cefr-description {
            font-size: 14px;
            color: var(--text-muted);
        }

        .cefr-stats {
            display: flex;
            gap: 20px;
            margin-top: 10px;
            font-size: 14px;
            color: var(--text-secondary);
        }

        .cefr-stats strong {
            color: var(--accent-secondary);
        }

        .cefr-ranges {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid var(--border-color);
            display: none;
        }

        .cefr-card.expanded .cefr-ranges {
            display: block;
        }

        .cefr-ranges-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }

        .cefr-range-btn {
            font-family: var(--font-emphasis);
            padding: 8px 16px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s;
            color: var(--text-secondary);
        }

        .cefr-range-btn:hover {
            background: var(--bg-card-hover);
            border-color: var(--accent-blue);
        }

        .cefr-range-btn.selected {
            background: var(--accent-blue);
            color: var(--bg-primary);
            border-color: var(--accent-blue);
            box-shadow: 0 0 10px var(--glow-blue);
        }

        .preset-size-btn {
            padding: 10px 16px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s;
            color: var(--text-secondary);
        }

        .preset-size-btn:hover {
            background: var(--bg-card-hover);
            border-color: var(--accent-primary);
        }

        .preset-size-btn.selected {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
        }

        .group-size-selector {
            display: flex;
            gap: 0;
            background: var(--bg-tertiary);
            border-radius: 12px;
            padding: 4px;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: thin;
            scrollbar-color: var(--border-color) transparent;
            justify-content: center;
        }

        .group-size-selector::-webkit-scrollbar {
            height: 6px;
        }

        .group-size-selector::-webkit-scrollbar-track {
            background: transparent;
        }

        .group-size-selector::-webkit-scrollbar-thumb {
            background: var(--border-color);
            border-radius: 3px;
        }

        .group-size-btn {
            font-family: var(--font-emphasis);
            flex: 0 0 auto;
            padding: 10px 14px;
            background: transparent;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s ease;
            min-width: 46px;
            color: var(--text-muted);
        }

        .group-size-btn:hover {
            background: rgba(255, 107, 53, 0.1);
            color: var(--text-primary);
        }

        .group-size-btn.selected {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            padding: 10px 16px;
        }

        .group-size-selector.header-toggle {
            display: flex;
            gap: 0;
            margin-left: auto;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
        }

        .header-toggle .group-size-btn {
            padding: 10px 18px;
            font-size: 13px;
            min-width: 50px;
            background: transparent;
            border: none;
            border-radius: 0;
            transition: all 0.2s ease;
        }

        .header-toggle .group-size-btn:first-child {
            border-right: 1px solid var(--border-color);
        }

        .header-toggle .group-size-btn:hover:not(.selected) {
            background: rgba(255, 107, 53, 0.15);
            color: var(--text-primary);
        }

        .header-toggle .group-size-btn.selected {
            padding: 10px 18px;
            background: var(--accent-primary);
            border-color: transparent;
            color: var(--accent-primary-text);
        }

        .header-toggle .group-size-btn.selected:hover {
            background: var(--accent-primary);
        }

        /* Settings modal variant */
        .group-size-selector.settings-toggle {
            display: flex;
            gap: 0;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            overflow: hidden;
        }

        .settings-toggle .group-size-btn {
            padding: 5px 14px;
            font-size: 13px;
            min-width: 40px;
            background: transparent;
            border: none;
            border-radius: 0;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: var(--font-data);
        }

        .settings-toggle .group-size-btn:first-child {
            border-right: 1px solid var(--border-color);
        }

        .settings-toggle .group-size-btn.selected {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
        }

        .step-row {
            display: flex;
            gap: 15px;
            width: 100%;
        }

        .step-half {
            flex: 1;
            min-width: 0;
            max-width: 90%;
        }

        .step-half:first-child {
            flex: 0.9;
        }

        .step-half:last-child {
            flex: 1.1;
        }

        .step-half .step-header {
            margin-bottom: 10px;
        }

        .step-header-inline {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
        }

        .step-header-inline .step-header {
            margin-bottom: 0;
        }

        .step-header-inline .group-size-selector {
            margin-top: 0;
            flex-shrink: 0;
        }

        .lemma-toggle-btn {
            font-family: var(--font-emphasis);
            flex: 1 1 0;
            padding: 8px 10px;
            background: transparent;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.2;
            transition: all 0.3s ease;
            min-width: 0;
            color: var(--text-muted);
            /* Allow the label ("All word forms" / "1 per lemma") to wrap
               onto two lines so the toggle stays narrow enough to sit
               side-by-side with the cognate toggle even on phones. */
            white-space: normal;
            word-break: break-word;
        }

        .lemma-toggle-btn:hover {
            background: rgba(255, 107, 53, 0.1);
            color: var(--text-primary);
        }

        .lemma-toggle-btn.selected {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
        }

        .lemma-toggle-btn.disabled {
            opacity: 0.4;
            cursor: not-allowed;
            pointer-events: none;
        }

        .lemma-toggle-unavailable .lemma-toggle-btn[data-lemma="on"] {
            opacity: 0.62;
            cursor: help;
        }

        .cognate-toggle-btn {
            font-family: var(--font-emphasis);
            flex: 1 1 0;
            padding: 8px 10px;
            background: transparent;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.2;
            transition: all 0.3s ease;
            min-width: 0;
            color: var(--text-muted);
            white-space: normal;
            word-break: break-word;
        }

        .cognate-toggle-btn:hover {
            background: rgba(255, 107, 53, 0.1);
            color: var(--text-primary);
        }

        .cognate-toggle-btn.selected {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
        }

        .cognate-toggle-btn.disabled {
            opacity: 0.4;
            cursor: not-allowed;
            pointer-events: none;
        }

        .cognate-toggle-unavailable .cognate-toggle-btn[data-cognate="exclude"] {
            opacity: 0.62;
            cursor: help;
        }

        .step-help-btn {
            position: absolute;
            top: 10px;
            right: 12px;
            width: auto;
            height: auto;
            min-width: unset;
            min-height: unset;
            border-radius: 0;
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            padding: 0;
            line-height: 1;
            transition: color 0.3s;
            margin-left: 6px;
            flex-shrink: 0;
        }

        .step-help-btn:hover {
            color: var(--accent-secondary);
        }
        .step-help-btn svg,
        .progress-info-btn svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .progress-info-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
        }
        .progress-info-btn {
            border: 0;
        }
        .progress-info-btn:hover {
            color: var(--accent-secondary);
        }

        .percent-mode-btn,
        .estimate-level-btn {
            padding: 6px 12px;
            border-radius: 6px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            font-size: 12px;
            font-weight: 600;
            font-family: var(--font-emphasis);
            cursor: pointer;
            transition: all 0.3s;
        }

        .percent-mode-btn {
            /* margin handled by .btn-with-info container */
        }

        .estimate-level-btn {
            /* margin handled by .btn-with-info container */
        }

        .percent-mode-btn:hover,
        .estimate-level-btn:hover {
            background: var(--bg-card-hover);
            border-color: var(--accent-primary);
            color: var(--text-primary);
        }

        .percent-mode-btn.active {
            background: var(--accent-primary);
            border-color: var(--accent-primary);
            color: var(--accent-primary-text);
        }

        .estimate-level-btn.hidden {
            display: none;
        }

        .btn-with-info {
            position: relative;
            display: inline-flex;
            margin-left: auto;
        }

        .btn-with-info + .btn-with-info {
            margin-left: 8px;
        }

        .btn-info-icon {
            position: absolute;
            top: -12px;
            right: -12px;
            width: 28px;
            height: 28px;
            min-width: 44px;
            min-height: 44px;
            border-radius: 50%;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            font-size: 15px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            z-index: 10;
        }

        .btn-info-icon:hover {
            background: var(--accent-secondary);
            color: var(--accent-secondary-text);
            border-color: var(--accent-secondary);
        }

        .btn-info-tooltip {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 220px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 10px 12px;
            font-size: 12px;
            line-height: 1.5;
            color: var(--text-secondary);
            z-index: 200;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }

        .btn-info-tooltip.visible {
            display: block;
        }

        .btn-info-tooltip p {
            margin: 0 0 6px 0;
        }

        .btn-info-tooltip p:last-child {
            margin-bottom: 0;
        }

        .step-info-tooltip {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .step-info-tooltip.visible {
            display: flex;
        }

        .step-info-tooltip-inner {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 24px;
            max-width: 400px;
            width: 90%;
            font-size: 15px;
            line-height: 1.6;
            color: var(--text-secondary);
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
            position: relative;
        }

        .step-info-tooltip-inner p {
            margin: 0 0 8px 0;
        }

        .step-info-tooltip-inner p:last-child {
            margin-bottom: 0;
        }

        .step-info-tooltip-inner strong {
            color: var(--text-primary);
        }

        /* Tabbed help inside the Choose Level tooltip — the lemma + cognate
           "?" buttons were folded into here as additional tabs alongside
           the original level explainer. Reuses .settings-tab styling for
           consistency with the settings + help modals. */
        .step-info-tooltip-inner .help-tabs {
            display: flex;
            gap: 4px;
            margin: -4px -4px 12px;
            border-bottom: 1px solid var(--border-color);
            padding: 0 0 6px;
        }
        .step-info-tooltip-inner .help-tabs .settings-tab {
            flex: 1 1 0;
            padding: 6px 10px;
            font-size: 12px;
            font-weight: 600;
            background: transparent;
            border: none;
            border-radius: 6px 6px 0 0;
            color: var(--text-muted);
            cursor: pointer;
            font-family: var(--font-emphasis);
            transition: all 0.2s ease;
        }
        .step-info-tooltip-inner .help-tabs .settings-tab:hover {
            color: var(--text-primary);
            background: rgba(255, 107, 53, 0.08);
        }
        .step-info-tooltip-inner .help-tabs .settings-tab.active {
            color: var(--accent-primary);
            background: rgba(255, 107, 53, 0.12);
        }
        .step-info-tooltip-inner > .settings-tab-content {
            display: none;
        }
        .step-info-tooltip-inner > .settings-tab-content.active {
            display: block;
        }

        .step-header-with-help {
            display: flex;
            align-items: center;
            padding-right: 20px;
        }

        /* Right-aligned group on step 2 — holds the optional info line, the
           CEFR/% mode toggle, and the help "?" button. margin-left: auto
           pushes the whole cluster to the far edge of the header. */
        .step-header-actions {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* The "?" help button stays absolute-positioned in the top-right
           corner of its .setup-step parent across all steps — the override
           that pulled it back into flex flow inside the actions group has
           been removed so the buttons read as a consistent affordance per
           box rather than floating mid-header. The actions group still
           lays out its other children (info-line, toggle) in flex flow. */
        .step-header-actions .level-info-line {
            margin-left: 0;
            padding-right: 0;
        }

        /* CEFR mode toggle — a single on/off pill. Off (default) = the
           standard percentage-coverage experience. On = light up and switch
           the level selector to CEFR (A1–C2) pills. The styling reuses the
           same shape/padding as the old segmented toggle so the header
           lockup keeps its rhythm; only the count of buttons changed. */
        .level-mode-btn {
            padding: 6px 12px;
            font-size: 12px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-muted);
            font-weight: 600;
            font-family: var(--font-emphasis);
            letter-spacing: 0.04em;
            cursor: pointer;
            transition: all 0.2s ease;
            line-height: 1;
        }

        .level-mode-btn:hover:not(.active) {
            background: rgba(255, 107, 53, 0.15);
            color: var(--text-primary);
            border-color: rgba(255, 107, 53, 0.4);
        }

        .level-mode-btn.active {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
        }

        .level-mode-btn.active:hover {
            background: var(--accent-primary);
        }

        .cefr-actions {
            display: none;
            margin-top: 15px;
            gap: 10px;
            justify-content: space-between;
        }

        .cefr-card.expanded .cefr-actions {
            display: flex;
        }

        .start-level-btn {
            flex: 1;
            padding: 12px;
            background: var(--accent-green);
            color: var(--bg-primary);
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .start-level-btn:hover {
            box-shadow: 0 0 20px var(--glow-green);
        }

        .start-level-btn:disabled {
            background: var(--bg-tertiary);
            color: var(--text-muted);
            cursor: not-allowed;
        }

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal:not(.hidden) {
            display: flex;
        }

        .modal-content {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 30px;
            max-width: 400px;
            width: 90%;
            border: 1px solid var(--border-color);
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }

        .modal-header h3 {
            font-family: var(--font-emphasis);
            color: var(--text-primary);
            margin: 0;
            font-size: 24px;
            font-weight: 700;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 28px;
            cursor: pointer;
            color: var(--text-muted);
            padding: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-close:hover {
            color: var(--accent-primary);
        }

        /* Fullscreen Modal */
        .fullscreen-modal {
            max-width: 600px;
            max-height: 90vh;
            overflow-y: auto;
        }

        /* Lyric Breakdown Modal */
        .lyric-breakdown-body {
            padding: 0 20px 20px;
            overflow-y: auto;
            max-height: calc(90vh - 60px);
        }

        .breakdown-header {
            text-align: center;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-color);
        }

        .breakdown-header .target-line {
            font-size: 16px;
            color: var(--text-primary);
            margin-bottom: 6px;
            line-height: 1.4;
        }

        .breakdown-header .english-line {
            font-size: 13px;
            color: var(--text-muted);
            font-style: italic;
        }

        .breakdown-word-row {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            margin-bottom: 4px;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.15s;
            border-left: 3px solid transparent;
        }

        .breakdown-word-row:hover {
            background: var(--bg-tertiary);
        }

        .breakdown-word-row.in-deck {
            border-left-color: var(--accent-green, #4CAF50);
        }

        .breakdown-word-row .word-spanish {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            min-width: 100px;
        }

        .breakdown-word-row .word-translation {
            font-size: 14px;
            color: var(--text-secondary);
            flex: 1;
            margin-left: 12px;
        }

        .breakdown-word-row .word-pos {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px;
            color: white;
            margin-left: 8px;
            white-space: nowrap;
        }

        /* Homograph chips */
        .homograph-chips {
            display: flex;
            justify-content: flex-start;
            gap: 8px;
            margin-top: -8px;
            margin-bottom: 4px;
            flex-wrap: wrap;
        }

        .homograph-chip {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--text-secondary);
            font-size: 13px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .homograph-chip:active {
            background: rgba(255, 255, 255, 0.2);
        }

        /* Word Popup */
        .word-popup {
            position: fixed;
            z-index: 1100;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 16px;
            min-width: 220px;
            max-width: 300px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        }

        .word-popup.hidden {
            display: none;
        }

        .word-popup .popup-word {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 4px;
        }

        .word-popup .popup-translation {
            font-size: 15px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .word-popup .popup-detail {
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: 4px;
        }

        .word-popup .popup-go-btn {
            display: inline-block;
            margin-top: 10px;
            padding: 6px 14px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border: none;
            border-radius: 6px;
            font-size: 13px;
            cursor: pointer;
            font-weight: 600;
        }

        .word-popup .popup-go-btn:hover {
            filter: brightness(1.15);
        }

        /* Breakdown trigger button on lyric example */
        .breakdown-btn {
            background: rgba(255,255,255,0.12);
            border: none;
            color: white;
            font-size: 18px;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.15s;
            margin-left: 8px;
            min-width: 44px;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .breakdown-btn:hover {
            opacity: 1;
        }

        /* The button used to carry an inline `position:relative; z-index:999`,
           which only needed to clear its own siblings in the song-credit row
           but instead outranked every card-face overlay in the same stacking
           context (.synonyms-panel / .conjugation-panel sit at z-index 10/11),
           so the green logo painted straight through the open panel. A local
           z-index keeps it above the example box's rails/tints and below the
           overlays. */
        .spotify-btn {
            position: relative;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 54px;
            min-height: 54px;
            padding: 6px;
            border: 1px solid transparent;
            border-radius: 50%;
            background: none;
            appearance: none;
            -webkit-appearance: none;
            box-shadow: none;
            text-decoration: none;
            opacity: 0.85;
            transition: opacity 0.2s, border-color 0.16s ease, background 0.16s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .spotify-btn svg {
            width: 48px;
            height: 48px;
            pointer-events: none;
        }
        .spotify-btn:hover {
            opacity: 1;
            background: none;
        }
        .spotify-btn:focus-visible {
            outline: 2px solid #1db954;
            outline-offset: 2px;
            box-shadow: none;
        }
        .spotify-btn:active {
            box-shadow: none;
        }
        /* Long-press on the Spotify button toggles card-wide lyric autoplay
           (merged from the old standalone autoplay button) — this ring shows
           it's on, matching the previous button's active treatment. */
        .spotify-btn.autoplay-active {
            border-color: #1db954;
            background: rgba(29, 185, 84, 0.18);
            opacity: 1;
        }
        .spotify-btn.autoplay-loading {
            animation: autoplay-loading-pulse 0.8s ease-in-out infinite alternate;
        }
        /* Between the tap and audio actually starting there is a real, variable
           delay (token refresh, device handoff, track load). A ring sweeping
           around the logo says "working" without moving the logo itself.
           spotify.js clears it on the SDK's player_state_changed, on failure,
           and on a failsafe timeout — it can never spin forever. */
        .spotify-btn {
            position: relative;
            touch-action: manipulation;
            -webkit-user-select: none;
            user-select: none;
        }
        .spotify-btn.spotify-loading::after {
            content: '';
            position: absolute;
            inset: 1px;
            border-radius: 50%;
            background: conic-gradient(from 0deg,
                rgba(29, 185, 84, 0) 0deg,
                rgba(29, 185, 84, 0.15) 140deg,
                rgba(29, 185, 84, 1) 320deg,
                rgba(29, 185, 84, 0) 360deg);
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
            animation: spotify-loading-spin 0.9s linear infinite;
            pointer-events: none;
        }
        @keyframes spotify-loading-spin {
            to { transform: rotate(360deg); }
        }
        @media (prefers-reduced-motion: reduce) {
            .spotify-btn.spotify-loading::after {
                animation: spotify-loading-pulse 1.1s ease-in-out infinite alternate;
            }
            @keyframes spotify-loading-pulse {
                from { opacity: 0.25; }
                to { opacity: 1; }
            }
        }

        /* Confirmed playback uses the familiar circular audio-spectrum idiom:
           sixteen radial bars change amplitude around the Spotify mark. The
           element is injected by spotify.js only after Spotify reports that
           audio is actually playing; a tap or accepted command cannot show it. */
        .spotify-music-visualizer {
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.16s ease;
        }
        .spotify-btn.spotify-playing:not(.spotify-loading) .spotify-music-visualizer {
            opacity: 1;
        }
        .spotify-music-visualizer i {
            position: absolute;
            inset: 0;
            transform: rotate(calc(var(--bar-index) * 22.5deg));
        }
        .spotify-music-visualizer i::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 2.5px;
            height: 7px;
            border-radius: 999px;
            background: #1db954;
            box-shadow: 0 0 4px rgba(29, 185, 84, 0.4);
            transform: translateX(-50%) scaleY(0.38);
            transform-origin: 50% 100%;
            animation: spotify-playing-amplitude 0.68s ease-in-out infinite alternate;
            animation-delay: calc(var(--bar-index) * -47ms);
        }
        .spotify-music-visualizer i:nth-child(3n)::before {
            animation-duration: 0.52s;
        }
        .spotify-music-visualizer i:nth-child(4n)::before {
            animation-duration: 0.83s;
        }
        @keyframes spotify-playing-amplitude {
            0% { transform: translateX(-50%) scaleY(0.32); opacity: 0.55; }
            55% { transform: translateX(-50%) scaleY(0.72); opacity: 0.85; }
            100% { transform: translateX(-50%) scaleY(1); opacity: 1; }
        }
        /* Reduced motion keeps a static circular equalizer as the playing cue. */
        @media (prefers-reduced-motion: reduce) {
            .spotify-music-visualizer i::before {
                animation: none;
                transform: translateX(-50%) scaleY(0.65);
                opacity: 0.85;
            }
        }

        /* Touch browsers can retain a generic button/link focus ring after a
           tap. That ring inherits the Spanish theme red and reads as part of
           Spotify's green mark. The control already has loading/autoplay state
           in Spotify green, so suppress only the touch focus decoration. */
        @media (hover: none), (max-width: 767px) {
            .spotify-btn,
            .spotify-btn:focus,
            .spotify-btn:focus-visible,
            .spotify-btn:active {
                border-color: transparent;
                outline: none;
                box-shadow: none;
                -webkit-tap-highlight-color: transparent;
            }
            .spotify-btn.autoplay-active {
                border-color: #1db954;
            }
        }

        /* Long-press popover on the Spotify button — the autoplay control that
           used to fire blind on hold. Same dismiss contract as the lookup
           sheet: any tap outside closes it. */
        .spotify-autoplay-popover {
            position: fixed;
            z-index: 400;
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-width: min(260px, calc(100vw - 16px));
            padding: 10px 12px;
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 14px;
            background: #1b232e;
            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
            animation: spotify-popover-rise 160ms cubic-bezier(0.2, 0.85, 0.25, 1.25) both;
        }
        .spotify-autoplay-popover-text {
            color: rgba(255, 255, 255, 0.78);
            font-size: 12.5px;
            line-height: 1.35;
        }
        .spotify-autoplay-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            align-self: flex-start;
            min-height: 34px;
            padding: 6px 14px;
            border: 1px solid rgba(255, 255, 255, 0.22);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.06);
            color: #e6eaf0;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s;
        }
        .spotify-autoplay-toggle:hover {
            border-color: rgba(255, 255, 255, 0.45);
        }
        .spotify-autoplay-toggle-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
        }
        .spotify-autoplay-toggle.is-on {
            border-color: #1db954;
            background: rgba(29, 185, 84, 0.18);
        }
        .spotify-autoplay-toggle.is-on .spotify-autoplay-toggle-dot {
            background: #1db954;
        }
        @keyframes spotify-popover-rise {
            from { opacity: 0; transform: translateY(6px) scale(0.96); }
            to   { opacity: 1; transform: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            .spotify-autoplay-popover { animation: none; }
        }

        .breakdown-trigger {
            text-decoration-line: underline;
            text-decoration-style: dotted;
            text-decoration-color: rgba(255,255,255,0.3);
            text-underline-offset: 3px;
            transition: text-decoration-color 0.2s;
        }
        .breakdown-trigger:hover {
            text-decoration-color: rgba(255,255,255,0.6);
        }

        .ref-icon-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 48px;
            min-height: 48px;
            padding: 2px;
            border-radius: 8px;
            background: none;
            border: none;
            opacity: 0.85;
            transition: all 0.2s;
            text-decoration: none;
        }
        /* Keep every reference destination comfortably tappable and give
           the icon artwork enough weight beside the larger Spotify action. */
        .ref-icon-btn img,
        .ref-icon-btn svg {
            width: 42px;
            height: 42px;
        }

        /* Match the sense-progress trigger's quiet glass treatment. The icon
           artwork remains white while its tile stays translucent rather than
           reading as a separate solid-white control. */
        .ref-conj-btn,
        .ref-syn-btn {
            color: var(--text-primary);
        }
        /* Plate treatment left over from the old boxed artwork. The Synonyms
           tile now draws a stroked glyph like the Known / Look up tiles and
           takes all of its chrome (radius, background, border, icon box) from
           .ref-tile, so it must not carry a divergent plate of its own. */
        .ref-conj-btn svg rect {
            fill: rgba(255, 255, 255, 0.07);
            stroke: rgba(255, 255, 255, 0.18);
            stroke-width: 1.5;
        }
        .ref-conj-btn svg text {
            fill: currentColor;
        }

        /* The favicon proxy supplies small raster marks, which become soft
           after card-button scaling. Recreate the two simple marks as local
           vector backgrounds so they remain crisp at every device density. */
        .ref-icon-btn[title="SpanishDict"],
        .ref-icon-btn[title="Reverso Context"] {
            position: relative;
        }
        .ref-icon-btn[title="SpanishDict"] img,
        .ref-icon-btn[title="Reverso Context"] img {
            opacity: 0;
        }
        .ref-icon-btn[title="SpanishDict"]::before,
        .ref-icon-btn[title="Reverso Context"]::before {
            content: "";
            position: absolute;
            width: 42px;
            height: 42px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
        }
        .ref-icon-btn[title="SpanishDict"]::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Crect width='42' height='42' rx='6' fill='white'/%3E%3Cg fill='%232684df'%3E%3Ccircle cx='14.5' cy='15' r='4.8'/%3E%3Cpath d='M9.8 22h9.4l1.3 13H8.5z'/%3E%3Ccircle cx='28' cy='27.5' r='4.8'/%3E%3Cpath d='M23 6h10l-1.3 15h-7.4z'/%3E%3C/g%3E%3C/svg%3E");
        }
        .ref-icon-btn[title="Reverso Context"]::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Crect width='42' height='42' rx='6' fill='white'/%3E%3Cpath d='M10 15h17c5 0 8 3 8 7 0 1.4-.4 2.8-1.1 4' fill='none' stroke='%231e91d6' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='m13 9-6 6 6 6' fill='none' stroke='%231e91d6' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M32 27H15c-5 0-8-3-8-7 0-1.4.4-2.8 1.1-4' fill='none' stroke='%23ef4938' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='m29 33 6-6-6-6' fill='none' stroke='%23ef4938' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        }
        .ref-icon-btn:hover {
            opacity: 1;
            transform: scale(1.1);
            background: none;
            border: none;
        }

        /* Conjugation panel — slides in over the card face.
           Synonyms panel reuses the same layout (slide-in, header, close
           button) so the two share these selectors. Synonym-specific
           rules live further down. */
        .conjugation-panel {
            /* VERB green — every accent inside the panel derives from this. */
            --conj-accent: 0, 212, 170;
        }
        .conjugation-panel,
        .synonyms-panel {
            position: absolute;
            /* Was top/bottom: -40px (extended past the card); .card-face
               has overflow: hidden so the close button at the panel top
               got clipped into the invisible region and couldn't be
               clicked. Pin the panel inside the card so it fully covers
               it instead of spilling past the top/bottom edges. */
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 16px 18px 20px;
            background: var(--bg-card);
            border-radius: 16px;
            /* Column layout so .syn-body can claim the remaining height; the
               panel itself no longer scrolls, the list inside it does. */
            display: flex;
            flex-direction: column;
            overflow: hidden;
            z-index: 10;
            transform: translateX(calc(100% + 30px));
            transition: transform 0.25s ease;
            box-shadow: 0 10px 40px rgba(0,0,0,0.4);
            visibility: hidden;
        }
        .conjugation-panel.visible,
        .synonyms-panel.visible {
            transform: translateX(0);
            visibility: visible;
        }

        /* ---- Conjugation panel, full-viewport ------------------------------
           While open the panel is re-parented to <body> (see
           hostConjPanelFullScreen in flashcards-conj.js) so it can cover the
           whole screen: inside the card it was clipped by .card-face's
           overflow and positioned against the card's 3D transform. Everything
           below only applies once it is a direct child of <body>. */
        body > .conjugation-panel {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100dvh;
            max-width: none;
            border-radius: 0;
            padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
            overflow-y: auto;
            overscroll-behavior: contain;
            z-index: 3000;
            /* The verb POS colour drives every accent in here. */
            --conj-accent: 0, 212, 170;
        }
        body > .conjugation-panel .conj-tables-wrap {
            /* Claim the space a full screen provides. Centring the short table
               in it, or pinning it to the top, both left a large void; the
               rows grow instead, so the extra height becomes legibility. */
            flex: 1 1 auto;
            align-items: stretch;
            margin-top: 18px;
        }
        body > .conjugation-panel .conj-table {
            font-size: 20px;
            /* Rows share the wrap's height between them. */
            height: 100%;
            max-height: 420px;
        }
        body > .conjugation-panel .conj-form {
            font-size: 26px;
            padding: 14px 16px 14px 8px;
        }
        body > .conjugation-panel .conj-pronoun {
            font-size: 16px;
            padding: 14px 18px 14px 16px;
        }

        /* Sense-assignment provenance panel (JST diagnostic). Toggled via
           display (see toggleProvenancePanel) — full-cover card overlay. */
        .provenance-panel {
            position: absolute;
            top: 0; bottom: 0; left: 0; right: 0;
            padding: 18px 18px 22px;
            background: var(--bg-card);
            border-radius: 16px;
            overflow-y: auto;
            overflow-x: hidden;
            z-index: 11;
            box-shadow: 0 10px 40px rgba(0,0,0,0.4);
        }
        .provenance-panel .prov-close {
            position: absolute;
            top: 10px; right: 12px;
            width: 30px; height: 30px;
            border: none;
            background: rgba(255,255,255,0.08);
            color: var(--text-primary);
            border-radius: 50%;
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
        }
        .provenance-panel .prov-close:hover { background: rgba(255,255,255,0.16); }
        .provenance-panel .prov-title {
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-secondary);
            margin-bottom: 12px;
            padding-right: 34px;
        }
        .provenance-panel .prov-row {
            padding: 10px 0;
            border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
        }
        .provenance-panel .prov-gloss {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .provenance-panel .prov-pos {
            font-size: 11px;
            font-weight: 500;
            color: var(--text-secondary);
            margin-left: 6px;
        }
        .provenance-panel .prov-model {
            font-size: 14px;
            color: var(--accent-secondary);
            margin-top: 2px;
        }
        .provenance-panel .prov-meta {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 2px;
        }
        .provenance-panel .prov-meta code {
            background: rgba(255,255,255,0.08);
            padding: 1px 5px;
            border-radius: 4px;
            font-size: 11px;
        }
        .provenance-panel .prov-notes {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: 4px;
            font-style: italic;
            line-height: 1.35;
        }
        .provenance-panel .prov-proposal {
            display: inline-flex;
            margin-top: 6px;
            padding: 2px 7px;
            border: 1px solid rgba(167, 139, 250, 0.5);
            border-radius: 999px;
            background: rgba(139, 92, 246, 0.12);
            color: #d8ccff;
            font-family: var(--font-data);
            font-size: 11px;
            letter-spacing: 0.02em;
        }
        .provenance-panel .prov-empty {
            color: var(--text-secondary);
            font-size: 14px;
        }

        .spanish-dict-panel[hidden] {
            display: none;
        }
        .spanish-dict-panel .sd-meta-intro {
            margin: -2px 34px 14px 0;
            color: var(--text-secondary);
            font-size: 12px;
            line-height: 1.45;
        }
        .spanish-dict-panel .sd-meta-sense {
            margin: 0 0 8px;
            border: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
            border-radius: 10px;
            background: color-mix(in srgb, var(--bg-secondary) 72%, transparent);
            overflow: hidden;
        }
        .spanish-dict-panel .sd-meta-sense summary {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 6px 12px;
            align-items: baseline;
            padding: 10px 12px;
            color: var(--text-primary);
            cursor: pointer;
            list-style: none;
        }
        .spanish-dict-panel .sd-meta-sense summary::-webkit-details-marker {
            display: none;
        }
        .spanish-dict-panel .sd-meta-sense summary::after {
            content: '›';
            grid-column: 2;
            grid-row: 1 / span 2;
            align-self: center;
            color: var(--text-secondary);
            font-size: 18px;
            line-height: 1;
            transform: rotate(90deg);
            transition: transform 140ms ease;
        }
        .spanish-dict-panel .sd-meta-sense[open] summary::after {
            transform: rotate(-90deg);
        }
        .spanish-dict-panel .sd-meta-summary-gloss {
            min-width: 0;
            font-size: 15px;
            font-weight: 650;
            overflow-wrap: anywhere;
        }
        .spanish-dict-panel .sd-meta-summary-identity {
            grid-column: 1;
            color: var(--text-secondary);
            font-family: var(--font-data);
            font-size: 10px;
            letter-spacing: 0.025em;
        }
        .spanish-dict-panel .sd-meta-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px 12px;
            margin: 0;
            padding: 10px 12px;
            border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
        }
        .spanish-dict-panel .sd-meta-field {
            min-width: 0;
        }
        .spanish-dict-panel .sd-meta-field--wide {
            grid-column: 1 / -1;
        }
        .spanish-dict-panel .sd-meta-field dt,
        .spanish-dict-panel .sd-meta-examples-heading,
        .spanish-dict-panel .sd-meta-candidates > span {
            color: var(--text-secondary);
            font-family: var(--font-data);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.055em;
            text-transform: uppercase;
        }
        .spanish-dict-panel .sd-meta-field dd {
            margin: 2px 0 0;
            color: var(--text-primary);
            font-size: 12px;
            line-height: 1.35;
            overflow-wrap: anywhere;
        }
        .spanish-dict-panel .sd-meta-field dd.sd-meta-code,
        .spanish-dict-panel .sd-meta-candidates code {
            font-family: var(--font-data);
        }
        .spanish-dict-panel .sd-meta-field dd.sd-meta-code {
            color: var(--accent-secondary);
        }
        .spanish-dict-panel .sd-meta-usage {
            margin: 0 12px 10px;
            padding: 9px 10px;
            border: 1px solid color-mix(in srgb, var(--accent-secondary) 32%, transparent);
            border-radius: 8px;
            background: color-mix(in srgb, var(--accent-secondary) 9%, transparent);
        }
        .spanish-dict-panel .sd-meta-usage-heading {
            display: flex;
            flex-wrap: wrap;
            gap: 4px 8px;
            align-items: baseline;
            color: var(--text-secondary);
            font-size: 10px;
        }
        .spanish-dict-panel .sd-meta-usage-heading strong {
            color: var(--accent-secondary);
            font-size: 12px;
        }
        .spanish-dict-panel .sd-meta-usage-detail,
        .spanish-dict-panel .sd-meta-caveat {
            margin-top: 5px;
            color: var(--text-secondary);
            font-size: 10px;
            line-height: 1.35;
        }
        .spanish-dict-panel .sd-meta-candidates {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            align-items: center;
            margin-top: 7px;
        }
        .spanish-dict-panel .sd-meta-candidates code {
            padding: 1px 5px;
            border-radius: 4px;
            background: rgba(255,255,255,0.08);
            color: var(--text-primary);
            font-size: 10px;
        }
        .spanish-dict-panel .sd-meta-examples-heading {
            margin: 0 12px 5px;
        }
        .spanish-dict-panel .sd-meta-example,
        .spanish-dict-panel .sd-meta-empty {
            margin: 0 12px 10px;
            padding: 8px 9px;
            border-radius: 7px;
            background: rgba(255,255,255,0.045);
        }
        .spanish-dict-panel .sd-meta-example-target {
            color: var(--text-primary);
            font-size: 12px;
            line-height: 1.4;
        }
        .spanish-dict-panel .sd-meta-example-english,
        .spanish-dict-panel .sd-meta-empty {
            margin-top: 3px;
            color: var(--text-secondary);
            font-size: 11px;
            font-style: italic;
            line-height: 1.4;
        }
        .spanish-dict-panel .sd-meta-source-link {
            display: inline-flex;
            gap: 5px;
            align-items: center;
            margin-top: 5px;
            color: var(--accent-secondary);
            font-size: 12px;
            text-decoration: none;
        }
        .spanish-dict-panel .sd-meta-source-link:hover,
        .spanish-dict-panel .sd-meta-source-link:focus-visible {
            text-decoration: underline;
        }

        @media (max-width: 520px) {
            .spanish-dict-panel .sd-meta-grid {
                grid-template-columns: minmax(0, 1fr);
            }
            .spanish-dict-panel .sd-meta-sense summary {
                grid-template-columns: minmax(0, 1fr) auto;
            }
        }

        /* Owner-only audit marker appended to a definition when the model had
           to propose a gloss outside SpanishDict's supplied sense menu. */
        .model-proposed-marker {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: 6px;
            padding: 1px 5px;
            border: 1px solid rgba(167, 139, 250, 0.55);
            border-radius: 999px;
            background: rgba(139, 92, 246, 0.12);
            color: #d8ccff;
            font-family: var(--font-data);
            font-size: 9px;
            font-weight: 700;
            line-height: 1.35;
            letter-spacing: 0.06em;
            vertical-align: 0.15em;
        }

        /* Synonyms / antonyms panel — two stacked sections, words rendered
           as inline pill-links sized by relationship strength. */
        /* Grows to fill whatever the header leaves, so the list occupies the
           card rather than sitting in a short block at the top. */
        .syn-body {
            flex: 1 1 auto;
            min-height: 0;
            padding: 16px 2px 8px;
            overflow-y: auto;
        }
        /* Header: headword + the synonyms/antonyms tab pair. */
        .syn-header {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 2px 40px 14px 2px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .syn-headword {
            font-family: var(--font-reading);
            font-size: 26px;
            font-weight: 700;
            color: #fff;
        }
        .syn-tabs {
            display: flex;
            gap: 8px;
        }
        .syn-tab {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 9px 15px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-secondary);
            font: 650 14px/1 var(--font-reading);
            cursor: pointer;
        }
        .syn-tab.selected {
            border-color: color-mix(in srgb, var(--accent-primary) 70%, white);
            background: color-mix(in srgb, var(--accent-primary) 22%, var(--bg-card));
            color: #fff;
        }
        .syn-tab-count {
            padding: 2px 7px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.12);
            font: 700 11px/1.4 var(--font-data);
        }

        /* Only the selected tab's panel renders, and it takes the rest of the
           card so the list has the whole surface rather than a short block
           floating under the header. */
        .syn-panel {
            display: none;
        }
        .syn-panel.selected {
            display: block;
        }
        .syn-empty {
            margin: 0;
            padding: 24px 2px;
            color: var(--text-muted);
            font-size: 14px;
        }
        .syn-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-content: flex-start;
        }
        /* One affordance for every row: they all navigate, so none of them is
           marked out as the special one. The chevron is the "tappable" cue. */
        .syn-item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 13px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-primary);
            text-decoration: none;
            line-height: 1.2;
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
        }
        .syn-item:hover,
        .syn-item:focus-visible {
            border-color: color-mix(in srgb, var(--accent-primary) 65%, transparent);
            background: rgba(var(--accent-primary-rgb), 0.16);
            transform: translateY(-1px);
        }
        .syn-item .syn-word {
            font-weight: 600;
        }
        .syn-item.syn-strong .syn-word {
            font-size: 17px;
        }
        .syn-item.syn-weak .syn-word {
            font-size: 15px;
        }
        .syn-item .syn-context {
            font-size: 11px;
            color: var(--text-muted);
            font-style: italic;
        }
        .syn-go {
            color: var(--text-muted);
            font-size: 17px;
            line-height: 1;
        }
        .syn-item:hover .syn-go {
            color: #fff;
        }

        .syn-close-btn {
            position: absolute;
            top: 12px;
            right: 14px;
            display: grid;
            place-items: center;
            width: 40px;
            height: 40px;
            padding: 0;
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.07);
            color: var(--text-primary);
            font-size: 26px;
            line-height: 1;
            cursor: pointer;
            z-index: 3;
        }
        .syn-close-btn:hover {
            background: rgba(255, 255, 255, 0.16);
        }

        /* Leave-the-app confirmation for a synonym with no card in the deck.
           Structure and chrome come from .knowledge-overview-modal /
           .knowledge-overview-sheet; only the narrower width, the body copy
           and the Cancel/Continue row are specific to it. It sits above the
           knowledge overview (z-index 2600) because it can never be the
           surface underneath. */
        .syn-leave-modal {
            z-index: 2700;
        }
        .syn-leave-sheet {
            width: min(400px, 100%);
        }
        .syn-leave-body {
            margin: 0 20px 18px;
            color: var(--text-secondary);
            font-size: 14px;
            line-height: 1.45;
        }
        .syn-leave-actions {
            display: flex;
            gap: 10px;
            padding: 0 20px 20px;
        }

        /* ---- Header: infinitive + type badge, translation, non-finite
           forms — all centred. Close button floats top-right out of flow. */
        /* Real 48px target. At 22px in a 4x8 pad this was the smallest control
           on a full-screen sheet whose only job it could not do was close. */
        .conj-close-btn {
            position: absolute;
            top: 12px;
            right: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.18);
            color: var(--text-primary);
            font-family: var(--font-reading);
            font-size: 32px;
            cursor: pointer;
            padding: 0;
            line-height: 1;
            z-index: 2;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.15s ease, transform 0.12s ease;
        }
        .conj-close-btn:hover {
            background: rgba(255, 255, 255, 0.16);
            color: #fff;
        }
        .conj-close-btn:active { transform: scale(0.94); }

        .conj-header {
            margin-bottom: 16px;
            padding: 4px 0 14px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            text-align: center;
        }
        .conj-title {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            justify-content: center;
        }
        .conj-infinitive {
            font-size: 30px;
            font-weight: 700;
            color: var(--text-primary);
            font-family: var(--font-emphasis);
            line-height: 1.1;
        }
        .conj-translation {
            font-size: 16px;
            color: var(--text-muted);
            font-style: italic;
            margin-top: 4px;
        }
        .conj-type-badge {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.5px;
            padding: 4px 10px;
            border-radius: 5px;
            background: rgba(var(--conj-accent, var(--accent-primary-rgb)), 0.24);
            color: #66e4cc;
            border: 1px solid rgba(var(--conj-accent, var(--accent-primary-rgb)), 0.4);
        }

        /* Non-finite forms. Reference detail, so they sit below the paradigm
           behind a divider rather than in the header beside the infinitive. */
        .conj-nonfinite {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: auto;
            padding-top: 14px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }
        .conj-nf-item {
            display: inline-flex;
            align-items: baseline;
            gap: 7px;
            padding: 5px 11px;
            border-radius: 7px;
            background: rgba(255,255,255,0.04);
        }
        .conj-nf-item.is-active {
            background: rgba(var(--conj-accent, var(--accent-primary-rgb)), 0.2);
            box-shadow: inset 0 0 0 1px rgba(var(--conj-accent, var(--accent-primary-rgb)), 0.5);
        }
        .conj-nf-label {
            font-size: 11px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }
        .conj-nf-form {
            font-size: 17px;
            color: var(--text-primary);
            font-weight: 600;
        }
        .conj-nf-item.is-active .conj-nf-form {
            color: white;
        }

        /* ---- Mood toggle ----
           Individual pill buttons, matching the `.level-btn` style used
           on the setup / Choose Card page — transparent when idle,
           filled with the mood's accent colour when active. Each mood's
           accent (blue/purple/pink) flows in via the --mood-accent
           custom property set on each button. Rendered only when more
           than one mood has data; single-mood cases skip it. */
        .conj-mood-toggle {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 14px;
        }
        .conj-mood-toggle-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 14px;
            font-weight: 600;
            font-family: var(--font-reading);
            padding: 9px 18px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            min-width: 110px;
        }
        .conj-mood-toggle-btn:hover {
            background: color-mix(in srgb, var(--mood-accent, rgba(255,255,255,0.4)) 10%, transparent);
            color: var(--text-primary);
        }
        .conj-mood-toggle-btn.conj-mood-toggle-active {
            background: var(--mood-accent);
            color: white;
        }

        /* ---- Tense picker (horizontal row of tenses for the active mood) ----
           Same pill-style treatment as mood toggle and the setup page's
           level buttons: clean, rounded, no borders. Sized smaller than
           moods because there are more of them per row. */
        .conj-tense-toggles {
            margin-bottom: 12px;
        }
        .conj-tense-toggle {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            justify-content: center;
        }
        .conj-tense-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 12px;
            font-weight: 600;
            font-family: var(--font-reading);
            padding: 6px 12px;
            border-radius: 7px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .conj-tense-btn:hover {
            background: color-mix(in srgb, var(--mood-accent) 12%, transparent);
            color: var(--text-primary);
        }
        .conj-tense-btn.conj-tense-active {
            background: color-mix(in srgb, var(--mood-accent) 85%, transparent);
            color: white;
        }

        /* ---- Conjugation table ---- */
        .conj-tables-wrap {
            margin-top: 12px;
            display: flex;
            justify-content: center;
        }
        .conj-table {
            /* Width fits content, and the wrap above centres it — the
               two columns cluster around the panel's horizontal midpoint
               instead of hugging the left edge. */
            width: auto;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 17px;
            color: var(--text-primary);
        }
        .conj-table tr {
            /* No cell borders — the active-row box-shadow + subtle
               striping do the visual work. Removes the lopsided look
               that came from each row being a <tr> with its own border. */
        }
        .conj-table tr:nth-child(even) td {
            background: rgba(255,255,255,0.02);
        }
        /* The row the card's own form lives in. This is the single fact the
           learner opened the panel to locate, so it is a filled green block
           with a rail and a glow, not a 14%-alpha tint that reads as striping. */
        .conj-table tr.conj-active td {
            background: rgba(var(--conj-accent, var(--accent-primary-rgb)), 0.3);
        }
        .conj-table tr.conj-active td:first-child {
            border-radius: 8px 0 0 8px;
            box-shadow: inset 4px 0 0 rgb(var(--conj-accent, var(--accent-primary-rgb))),
                        inset 0 2px 0 rgba(var(--conj-accent, var(--accent-primary-rgb)), 0.75),
                        inset 0 -2px 0 rgba(var(--conj-accent, var(--accent-primary-rgb)), 0.75);
        }
        .conj-table tr.conj-active td:last-child {
            border-radius: 0 8px 8px 0;
            box-shadow: inset -2px 0 0 rgba(var(--conj-accent, var(--accent-primary-rgb)), 0.75),
                        inset 0 2px 0 rgba(var(--conj-accent, var(--accent-primary-rgb)), 0.75),
                        inset 0 -2px 0 rgba(var(--conj-accent, var(--accent-primary-rgb)), 0.75);
        }
        .conj-table tr.conj-active .conj-pronoun {
            color: #eafffa;
            font-weight: 700;
        }
        .conj-table tr.conj-active .conj-stem,
        .conj-table tr.conj-active .conj-ending {
            color: white;
            font-weight: 700;
        }

        .conj-pronoun {
            /* Right-aligned so pronouns butt up against the visual centre
               line; form column starts just to the right of centre. Feels
               balanced without a hard column line. */
            padding: 9px 16px 9px 14px;
            color: var(--text-muted);
            font-size: 14px;
            font-family: var(--font-reading);
            white-space: nowrap;
            text-align: right;
        }
        .conj-form {
            padding: 9px 14px 9px 6px;
            font-size: 19px;
            font-family: var(--font-reading);
            text-align: left;
            min-width: 120px;
        }

        /* SpanishDict "full paradigm" button at the bottom of the panel.
           Sized as a proper tap target — the verb-conjugation panel has
           a predictable vertical footprint (header + toggles + fixed
           6-person table), so there's room for a real button without
           risking overflow. Escape hatch for compound / imperative
           tenses we don't ship locally. */
        .conj-sd-link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin: 18px auto 4px;
            padding: 12px 20px;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 10px;
            background: rgba(255,255,255,0.04);
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.2s ease;
            width: fit-content;
            min-width: 240px;
            justify-content: center;
        }
        .conj-sd-link:hover {
            background: rgba(var(--accent-primary-rgb), 0.14);
            border-color: rgba(var(--accent-primary-rgb), 0.45);
            color: white;
        }
        .conj-sd-link img {
            opacity: 0.85;
            width: 18px;
            height: 18px;
        }
        .conj-sd-link:hover img {
            opacity: 1;
        }

        /* "No conjugation data" variant — when we don't have inline data
           for a verb's lemma (defective verbs like "hay"). The panel
           collapses to: header + short message + a SpanishDict button. */
        .conj-empty-msg {
            text-align: center;
            color: var(--text-muted);
            font-size: 15px;
            font-style: italic;
            padding: 32px 16px 18px;
        }
        .conj-empty-msg strong {
            color: var(--text-primary);
            font-style: normal;
            font-weight: 600;
        }

        /* Related-paradigm note — shown when the panel is displaying the
           paradigm of a different verb than the card's own lemma
           (classic case: card is "hay" but we render haber's full table).
           Keeps the UI honest about whose paradigm the table actually is. */
        .conj-related-note {
            margin: 0 0 12px;
            padding: 10px 14px;
            border-radius: 8px;
            background: rgba(var(--accent-primary-rgb), 0.08);
            border: 1px solid rgba(var(--accent-primary-rgb), 0.25);
            color: var(--text-primary);
            font-size: 13px;
            line-height: 1.4;
            text-align: center;
        }
        .conj-related-note strong {
            color: var(--accent-primary);
            font-weight: 700;
        }
        .conj-sd-link-prominent {
            /* The no-data case uses the same `.conj-sd-link` button — no
               extra styling needed. This class is kept as a hook in case
               we want to differentiate later. */
        }
        /* Stem: muted. Ending: accent-coloured + bold. For regular verbs
           every ending in a tense shares the same colour + shape so the
           pattern pops visually. For irregulars, the common prefix is
           shorter so more of the word lights up — signalling "this is
           where the irregular happens". */
        .conj-stem {
            color: var(--text-muted);
            opacity: 0.7;
        }
        .conj-ending {
            /* The endings are the pattern the table exists to show, so they
               carry the VERB colour like everything else in this panel. They
               used to take the app's orange-red accent, which fought the
               green mood/active-row treatment around them. */
            color: rgb(var(--conj-accent, var(--accent-primary-rgb)));
            font-weight: 600;
        }
        .conj-ending-full {
            /* Fully irregular form (no shared prefix with infinitive) — still
               coloured but slightly dimmer so the table doesn't scream. */
            opacity: 0.95;
        }

        /* Back button on card (nav stack) */
        .nav-back-btn {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border: 1px solid var(--accent-primary);
            font-size: 16px;
            border-radius: 6px;
            padding: 4px 10px;
            cursor: pointer;
        }

        .nav-back-btn.hidden {
            display: none;
        }

        .tooltip-detail-btn {
            width: 100%;
            margin-top: 12px;
            padding: 12px 16px;
            min-height: 44px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-primary);
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
        }

        .tooltip-detail-btn:hover {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
        }

        /* "More about this project →" link in the Welcome tab — same shape
           as the project's other call-to-action buttons. */
        .help-more-info-btn {
            display: inline-block;
            padding: 10px 16px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-primary);
            font-family: var(--font-emphasis);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .help-more-info-btn:hover {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
        }

        /* Cognate Rules Modal */
        .cognate-rules-body {
            color: var(--text-secondary);
            line-height: 1.6;
        }

        .cognate-rules-body .rules-intro {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }

        .rule-section {
            margin-bottom: 20px;
        }

        .rule-section h4 {
            color: var(--accent-secondary);
            font-family: var(--font-emphasis);
            margin-bottom: 10px;
            font-size: 16px;
        }

        .rule-section ul {
            margin: 0;
            padding-left: 20px;
        }

        .rule-section li {
            margin-bottom: 5px;
        }

        .rule-examples {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
        }

        .rule-examples .example {
            background: var(--bg-tertiary);
            padding: 4px 10px;
            border-radius: 4px;
            font-family: var(--font-data);
            font-size: 13px;
            color: var(--text-muted);
        }

        .suffix-rule {
            margin: 15px 0;
            padding: 12px;
            background: var(--bg-tertiary);
            border-radius: 8px;
        }

        .suffix-rule code {
            display: inline-block;
            background: var(--bg-primary);
            padding: 4px 10px;
            border-radius: 4px;
            font-family: var(--font-data);
            color: var(--text-primary);
            font-weight: 700;
            font-size: 14px;
            margin-bottom: 8px;
        }

        /* Estimation Modal Styles */
        .estimation-body {
            padding: 10px 0;
            display: flex;
            flex-direction: column;
            min-height: 50vh;
        }

        .estimation-start-btn {
            width: 100%;
            padding: 16px 20px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border: none;
            border-radius: 10px;
            font-size: 18px;
            font-weight: 600;
            font-family: var(--font-emphasis);
            cursor: pointer;
            transition: all 0.3s;
        }

        .estimation-start-btn:hover {
            filter: brightness(1.1);
            box-shadow: 0 4px 15px rgba(200, 16, 46, 0.3);
        }

        .estimation-retry-btn {
            width: 100%;
            padding: 14px 20px;
            background: transparent;
            color: var(--text-muted);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            font-size: 16px;
            font-weight: 500;
            font-family: var(--font-emphasis);
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 10px;
        }

        .estimation-retry-btn:hover {
            border-color: var(--text-muted);
            color: var(--text-primary);
        }

        .estimation-progress {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 10px 15px;
            background: var(--bg-tertiary);
            border-radius: 8px;
            font-family: var(--font-data);
            font-size: 13px;
            color: var(--text-muted);
        }

        .estimation-word-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 200px;
        }

        .estimation-word {
            text-align: center;
            font-family: var(--font-emphasis);
            font-size: 48px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 6px;
        }

        .estimation-lemma {
            text-align: center;
            font-family: var(--font-emphasis);
            font-size: 16px;
            font-style: italic;
            color: var(--text-muted);
            margin-bottom: 10px;
            min-height: 20px;
        }

        .estimation-pos {
            text-align: center;
            font-family: var(--font-data);
            font-size: 12px;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 16px;
            padding: 6px 14px;
            background: var(--bg-tertiary);
            border-radius: 6px;
        }

        .estimation-translation {
            text-align: center;
            font-family: var(--font-emphasis);
            font-size: 20px;
            color: var(--text-secondary);
            min-height: 30px;
            opacity: 0;
            transition: opacity 0.3s ease-in;
        }

        .estimation-translation.visible {
            opacity: 1;
        }

        .estimation-reveal {
            text-align: center;
            color: var(--text-muted);
            font-family: var(--font-data);
            font-size: 14px;
            cursor: pointer;
            padding: 10px 16px;
            margin-top: 8px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 999px;
            transition: color 0.2s, border-color 0.2s, background 0.2s;
        }

        .estimation-reveal:hover {
            color: var(--text-primary);
            border-color: var(--accent-primary);
            background: var(--bg-secondary);
        }

        #estimationTest {
            text-align: center;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .estimation-buttons {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .estimation-btn {
            flex: 1;
            padding: 18px 20px;
            border: none;
            border-radius: 10px;
            font-size: 18px;
            font-weight: 600;
            font-family: var(--font-emphasis);
            cursor: pointer;
            transition: all 0.2s;
        }

        .estimation-btn.know-btn {
            background: rgba(0, 212, 170, 0.2);
            color: var(--accent-green);
            border: 2px solid var(--accent-green);
        }

        .estimation-btn.know-btn:hover {
            background: rgba(0, 212, 170, 0.3);
            transform: scale(1.02);
        }

        .estimation-btn.dont-know-btn {
            background: rgba(255, 82, 82, 0.2);
            color: var(--error);
            border: 2px solid var(--error);
        }

        .estimation-btn.dont-know-btn:hover {
            background: rgba(255, 82, 82, 0.3);
            transform: scale(1.02);
        }

        .estimation-result-level {
            text-align: center;
            font-family: var(--font-emphasis);
            font-size: clamp(30px, 8vw, 42px);
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 10px;
        }

        .stats-body {
            margin-top: 15px;
        }

        .settings-tabs-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 15px;
        }

        .settings-single-tab-title {
            display: none;
            min-width: 0;
            flex: 1;
            padding: 13px 0;
            color: var(--text-primary);
            font-family: var(--font-emphasis);
            font-size: 15px;
        }
        #settingsModal.settings-single-tab .settings-tabs {
            display: none;
        }
        #settingsModal.settings-single-tab .settings-single-tab-title:not([hidden]) {
            display: block;
        }

        .settings-modal-content {
            box-sizing: border-box;
            width: min(94vw, 620px);
            max-width: 620px;
            max-height: min(88dvh, 760px);
            padding: 0 26px 26px;
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-gutter: stable;
        }
        .settings-modal-content > .settings-tabs-header {
            position: sticky;
            top: 0;
            z-index: 3;
            margin: 0 -26px 18px;
            padding: 8px 16px 0 26px;
            background: color-mix(in srgb, var(--bg-card) 94%, transparent);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .settings-modal-content .settings-tabs {
            min-width: 0;
            overflow-x: auto;
            scrollbar-width: none;
        }
        .settings-modal-content .settings-tabs::-webkit-scrollbar { display: none; }
        .settings-modal-content .settings-tab {
            flex: 0 0 auto;
            padding: 13px 16px;
        }
        .settings-data-intro {
            margin: 3px 0 14px;
            color: var(--text-muted);
            font-size: 13px;
            line-height: 1.45;
        }
        .appearance-settings-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 8px;
            padding: 14px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background: var(--bg-secondary);
        }
        .appearance-settings-copy {
            min-width: 0;
        }
        .appearance-settings-copy strong,
        .appearance-settings-copy small {
            display: block;
        }
        .appearance-settings-copy strong {
            color: var(--text-primary);
            font-family: var(--font-emphasis);
            font-size: 14px;
        }
        .appearance-settings-copy small {
            margin-top: 4px;
            color: var(--text-muted);
            font-size: 11px;
            line-height: 1.35;
        }
        .appearance-selector {
            flex: 0 0 auto;
        }
        .appearance-selector .theme-preference-btn {
            min-width: 58px;
        }
        .appearance-selector .theme-preference-btn:focus-visible {
            position: relative;
            z-index: 1;
            outline: 2px solid var(--accent-primary);
            outline-offset: 2px;
        }
        @media (max-width: 520px) {
            .appearance-settings-card {
                align-items: stretch;
                flex-direction: column;
                gap: 11px;
            }
            .appearance-selector {
                width: 100%;
            }
            .appearance-selector .theme-preference-btn {
                flex: 1 1 0;
            }
        }
        .settings-action-row {
            width: 100%;
            border: 0;
            border-bottom: 1px solid var(--border-color);
            border-radius: 0;
            background: transparent;
            color: var(--text-secondary);
            font: inherit;
            text-align: left;
            cursor: pointer;
        }
        .settings-action-row > span:first-child {
            min-width: 0;
        }
        .settings-action-row strong,
        .settings-action-row small {
            display: block;
        }
        .settings-action-row small {
            margin-top: 3px;
            color: var(--text-muted);
            font-size: 11px;
            line-height: 1.35;
        }
        .settings-row-action {
            flex: 0 0 auto;
            padding: 4px 9px;
            border: 1px solid var(--border-color);
            border-radius: 999px;
            color: var(--text-secondary);
            font: 600 10px/1 var(--font-emphasis);
            letter-spacing: 0.03em;
            text-transform: uppercase;
        }
        .settings-row-action--warning {
            border-color: color-mix(in srgb, var(--warning) 50%, var(--border-color));
            color: var(--warning);
        }

        .vocabulary-import-modal-content {
            box-sizing: border-box;
            width: min(94vw, 650px);
            max-width: 650px;
            max-height: min(90dvh, 820px);
            overflow-y: auto;
            padding: 24px;
        }
        .vocabulary-import-modal-content .modal-header {
            margin-bottom: 12px;
        }
        .vocabulary-import-modal-content code {
            color: var(--text-secondary);
            font-family: var(--font-data);
            font-size: 0.92em;
        }
        .vocabulary-import-input-label {
            display: block;
            margin: 8px 0 6px;
            color: var(--text-primary);
            font: 700 13px/1.3 var(--font-reading);
        }
        .vocabulary-import-text {
            box-sizing: border-box;
            width: 100%;
            min-height: 170px;
            resize: vertical;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            padding: 12px;
            font: 13px/1.45 var(--font-data);
        }
        .vocabulary-import-text:focus {
            outline: 2px solid rgba(var(--accent-primary-rgb), 0.35);
            border-color: var(--accent-primary);
        }
        .vocabulary-import-actions {
            display: flex;
            justify-content: flex-end;
            gap: 9px;
            margin-top: 13px;
        }
        .vocabulary-import-actions--source {
            justify-content: space-between;
            align-items: center;
        }
        .vocabulary-import-actions button,
        .vocabulary-import-file-label {
            box-sizing: border-box;
            min-height: 38px;
            border: 1px solid var(--border-color);
            border-radius: 9px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            padding: 9px 13px;
            font: 650 12px/1.2 var(--font-reading);
            cursor: pointer;
        }
        .vocabulary-import-actions button:not(.secondary-btn) {
            border-color: var(--accent-primary);
            background: var(--accent-primary);
            color: white;
        }
        .vocabulary-import-actions button:disabled {
            cursor: not-allowed;
            opacity: 0.45;
        }
        .vocabulary-import-status {
            min-height: 1.4em;
            margin: 10px 0 0;
            color: var(--text-muted);
            font-size: 12px;
        }
        .vocabulary-import-status.is-error {
            color: var(--error);
        }

        .song-set-modal-content {
            box-sizing: border-box;
            width: min(94vw, 680px);
            max-width: 680px;
            max-height: min(90dvh, 820px);
            display: flex;
            flex-direction: column;
            padding: 24px;
            overflow: hidden;
        }
        .song-set-toolbar {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
        }
        .song-set-toolbar input {
            min-width: 0;
            min-height: 40px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            padding: 8px 11px;
            font: 13px/1.3 var(--font-reading);
        }
        .song-set-toolbar span {
            color: var(--text-muted);
            font: 600 11px/1.2 var(--font-data);
        }
        .song-set-bulk-actions {
            display: flex;
            gap: 8px;
            margin: 10px 0 8px;
        }
        .song-set-bulk-actions button,
        .song-set-footer button {
            min-height: 36px;
            border: 1px solid var(--border-color);
            border-radius: 9px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            padding: 8px 12px;
            font: 650 12px/1.2 var(--font-reading);
            cursor: pointer;
        }
        .song-set-list {
            min-height: 180px;
            overflow-y: auto;
            border-block: 1px solid var(--border-color);
        }
        .song-set-option {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 10px;
            align-items: center;
            padding: 10px 4px;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-primary);
            cursor: pointer;
        }
        .song-set-option:last-child { border-bottom: 0; }
        .song-set-option input {
            width: 18px;
            height: 18px;
            accent-color: var(--accent-primary);
        }
        .song-set-option strong,
        .song-set-option small { display: block; }
        .song-set-option strong {
            overflow: hidden;
            font: 650 13px/1.25 var(--font-reading);
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .song-set-option small {
            margin-top: 2px;
            color: var(--text-muted);
            font-size: 11px;
        }
        .song-set-empty {
            padding: 30px 10px;
            color: var(--text-muted);
            text-align: center;
        }
        .spotify-playlist-option {
            display: block;
            width: 100%;
            grid-template-columns: none;
            background: none;
            border: 0;
            border-bottom: 1px solid var(--border-color);
            font: inherit;
            text-align: left;
        }
        .spotify-playlist-option:hover { background: var(--bg-tertiary); }
        .spotify-playlist-option:last-child { border-bottom: 0; }
        .song-set-footer {
            display: flex;
            justify-content: flex-end;
            gap: 9px;
            padding-top: 12px;
        }
        .song-set-footer #applySongSetBtn {
            border-color: var(--accent-primary);
            background: var(--accent-primary);
            color: white;
        }
        .song-set-footer #applySongSetBtn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }
        .vocabulary-import-preview {
            margin-top: 12px;
            padding: 14px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background: rgba(var(--accent-primary-rgb), 0.05);
        }
        .vocabulary-import-preview h4 {
            margin: 0 0 10px;
            color: var(--text-primary);
            font-family: var(--font-emphasis);
        }
        .vocabulary-import-summary {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }
        .vocabulary-import-summary > div {
            min-width: 0;
            padding: 8px;
            border: 1px solid var(--border-color);
            border-radius: 9px;
            background: var(--bg-card);
        }
        .vocabulary-import-summary strong,
        .vocabulary-import-summary span {
            display: block;
        }
        .vocabulary-import-summary strong {
            color: var(--text-primary);
            font: 700 16px/1.1 var(--font-data);
        }
        .vocabulary-import-summary span {
            margin-top: 3px;
            color: var(--text-muted);
            font-size: 10px;
            line-height: 1.25;
            text-transform: uppercase;
        }
        .vocabulary-import-preview details {
            margin-top: 10px;
            color: var(--text-secondary);
            font-size: 12px;
        }
        .vocabulary-import-preview pre {
            max-height: 150px;
            overflow: auto;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
            color: var(--text-muted);
            font: 11px/1.4 var(--font-data);
        }
        @media (max-width: 560px) {
            .vocabulary-import-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .vocabulary-import-actions--source { align-items: stretch; flex-direction: column; }
            .vocabulary-import-actions--source > * { width: 100%; text-align: center; }
        }

        .settings-tabs {
            display: flex;
            gap: 0;
            flex: 1;
        }

        .settings-tab {
            background: transparent;
            border: none;
            padding: 12px 20px;
            color: var(--text-muted);
            font-family: var(--font-reading);
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
        }

        .settings-tab:hover {
            color: var(--text-primary);
        }

        .settings-tab.active {
            color: var(--text-primary);
            font-weight: 700;
            border-bottom-color: var(--accent-primary);
        }

        .settings-tabs-header .modal-close {
            position: relative;
            top: auto;
            right: auto;
            margin-right: 10px;
        }

        .settings-defaults-card {
            margin: 4px 0 14px;
            padding: 14px;
            border: 1px solid rgba(var(--accent-primary-rgb), 0.28);
            border-radius: 12px;
            background: rgba(var(--accent-primary-rgb), 0.07);
        }
        .settings-defaults-heading,
        .settings-default-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            font-family: var(--font-emphasis);
        }
        .settings-defaults-heading strong {
            color: var(--text-primary);
            font-size: 14px;
        }
        .settings-defaults-heading span {
            color: var(--text-muted);
            font-size: 10px;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .settings-defaults-warning {
            margin: 8px 0 12px;
            color: var(--text-muted);
            font-size: 11px;
            line-height: 1.45;
        }
        .settings-default-row {
            min-height: 42px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            font-size: 13px;
        }
        .settings-default-row .settings-toggle {
            flex: 0 0 auto;
        }
        /* Grouped study preferences: a heading row per group, and a
           label column that can hold a "?"-revealed explanation without
           pushing the toggle out of the row. */
        .settings-group-heading {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 10px;
            margin: 14px 0 2px;
            padding-top: 10px;
            border-top: 1px solid rgba(var(--accent-primary-rgb), 0.28);
            font-family: var(--font-emphasis);
        }
        /* The intro paragraph already separates the first group. */
        .settings-defaults-warning + .settings-group-heading {
            margin-top: 4px;
            padding-top: 0;
            border-top: none;
        }
        .settings-group-heading strong {
            color: var(--text-primary);
            font-size: 12px;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }
        .settings-group-heading span {
            color: var(--text-muted);
            font-size: 10px;
        }
        /* The heading already draws the separator above the group. */
        .settings-group-heading + .settings-default-row {
            border-top: none;
        }
        .settings-row-label-block {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
            min-width: 0;
        }
        .settings-row-explanation {
            display: block;
            max-width: 300px;
            margin-top: 3px;
            color: var(--text-muted);
            font: 500 10px/1.4 var(--font-reading);
        }
        .settings-row-explanation[hidden] {
            display: none;
        }
        .settings-row-label {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }
        .settings-info-btn {
            display: inline-grid;
            place-items: center;
            width: 22px;
            height: 22px;
            padding: 0;
            border: 1px solid var(--border-color);
            border-radius: 999px;
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            font: 700 12px/1 var(--font-reading);
        }
        .settings-info-btn:hover,
        .settings-info-btn[aria-expanded="true"] {
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }
        .settings-inline-explanation {
            margin: -2px 0 14px;
            padding: 11px 13px;
            border: 1px solid color-mix(in srgb, var(--accent-primary) 24%, var(--border-color));
            border-radius: 10px;
            background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
            color: var(--text-muted);
            font-size: 12px;
            line-height: 1.45;
        }
        .settings-inline-explanation[hidden] {
            display: none;
        }
        .settings-inline-explanation strong {
            color: var(--text-primary);
        }
        .settings-inline-explanation p {
            margin: 4px 0 0;
        }

        #helpModal .modal-content,
        .progress-modal-content {
            box-sizing: border-box;
            max-height: 86dvh;
            overflow-y: auto;
            overscroll-behavior: contain;
        }

        .settings-tab-content {
            display: none;
        }

        .settings-tab-content.active {
            display: block;
        }

        @media (max-width: 600px) {
            #settingsModal {
                align-items: flex-end;
            }
            .settings-modal-content {
                width: 100%;
                max-height: 92dvh;
                margin: 0;
                padding: 0 18px max(22px, env(safe-area-inset-bottom));
                border-radius: 22px 22px 0 0;
            }
            .settings-modal-content > .settings-tabs-header {
                margin: 0 -18px 16px;
                padding: 7px 10px 0 18px;
            }
            .settings-modal-content .settings-tab {
                padding: 13px 12px;
                font-size: 13px;
            }
            .settings-default-row {
                align-items: flex-start;
                flex-direction: column;
                gap: 8px;
                padding: 10px 0;
            }
            .settings-default-row .settings-toggle {
                width: 100%;
            }
            .settings-default-row .settings-toggle .group-size-btn {
                flex: 1;
            }
        }

        .tap-hint {
            text-align: center;
            color: var(--text-muted);
            font-size: 14px;
            margin-top: 10px;
            font-style: italic;
        }

        .flip-circle {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 60px;
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s;
        }

        .flip-circle:hover {
            border-color: rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.02);
        }

        .flip-circle:active {
            transform: scale(0.98);
        }

        .flip-back-area {
            display: block;
            width: 100%;
            /* Vertical padding kept small so single-line words don't carve
               out a fat top block that dwarfs the content below. Wrapping
               content (long word + lemma on narrow screens) still breathes
               because line-height on the inner word div takes over once a
               second line exists. Left-aligned now, so horizontal padding
               only needs to clear the card's own edge padding, not create a
               centered click target. */
            padding: 8px 4px;
            border: 2px solid rgba(255, 255, 255, 0);
            border-radius: 12px;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }

        .flip-back-area:hover {
            border-color: transparent;
            background: transparent;
        }

        .flip-back-area:active {
            transform: none;
        }

        /* Long-press popover on the card headword — the direction switch that
           used to appear as a bare button in the card header. Mirrors
           .spotify-autoplay-popover: same shape, same dismiss contract. */
        .direction-popover {
            position: fixed;
            z-index: 400;
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-width: min(260px, calc(100vw - 16px));
            padding: 10px 12px;
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 14px;
            background: #1b232e;
            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
            animation: direction-popover-rise 160ms cubic-bezier(0.2, 0.85, 0.25, 1.25) both;
        }
        .direction-popover-text {
            color: rgba(255, 255, 255, 0.78);
            font-size: 12.5px;
            line-height: 1.35;
        }
        .direction-popover-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            align-self: flex-start;
            min-height: 34px;
            padding: 6px 14px;
            border: 1px solid rgba(var(--accent-primary-rgb), 0.5);
            border-radius: 999px;
            background: rgba(var(--accent-primary-rgb), 0.16);
            color: #e6eaf0;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: border-color 0.15s, background 0.15s;
        }
        .direction-popover-btn:hover {
            border-color: rgba(var(--accent-primary-rgb), 0.85);
            background: rgba(var(--accent-primary-rgb), 0.26);
        }
        .direction-popover-btn:focus-visible {
            outline: 2px solid var(--accent-primary);
            outline-offset: 2px;
        }
        .direction-popover-btn-icon {
            font-size: 14px;
            line-height: 1;
            opacity: 0.85;
        }
        @keyframes direction-popover-rise {
            from { opacity: 0; transform: translateY(6px) scale(0.96); }
            to   { opacity: 1; transform: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            .direction-popover { animation: none; }
        }

        #flipBtn {
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }

        #flipBtn:focus {
            outline: none !important;
            box-shadow: none !important;
        }

        #flipBtn:active {
            opacity: 0.8;
        }

        /* Meaning boxes styles */
        .meanings-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin: 15px 0;
            width: 100%;
            padding: 0 5px;
        }

        .meaning-box {
            padding: 14px 20px;
            background: var(--bg-tertiary);
            border: 2px solid var(--border-color);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
            min-width: 100px;
            flex: 1;
            max-width: calc(50% - 5px);
            position: relative;
        }

        .meaning-box:hover {
            transform: translateY(-2px);
            border-color: var(--accent-blue);
        }

        .meaning-box.selected {
            background: var(--accent-blue);
            border-color: var(--accent-blue);
            transform: scale(1.02);
        }

        .meaning-box.selected .meaning-text {
            color: var(--bg-primary);
        }

        .meaning-box.selected .meaning-pos {
            color: var(--bg-primary);
            opacity: 0.8;
        }

        .meaning-text {
            font-size: 22px;
            font-weight: 600;
            color: white;
        }

        .meaning-pos {
            font-size: 13px;
            color: white;
            margin-top: 6px;
            font-family: var(--font-data);
            text-transform: uppercase;
            opacity: 0.75;
        }

        .meaning-percent {
            position: absolute;
            top: -10px;
            right: -10px;
            background: var(--accent-secondary);
            color: var(--accent-secondary-text);
            font-size: 12px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 12px;
            font-family: var(--font-data);
        }

        /* Headword and lemma follow the selected POS. The lemma is mixed with
           white for hierarchy and contrast without losing that POS identity. */
        .back-headword {
            color: #fff;
            /* Shrinkable, non-greedy: the POS legend's `margin-left: auto`
               does the pushing, so the word only gives up width when a long
               headword and the pills genuinely cannot share the line. */
            flex: 0 1 auto;
            min-width: 0;
            /* Holding this opens the direction popover, so suppress the
               browser's own long-press selection / callout. */
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }

        .back-lemma {
            font-size: 28px;
            font-weight: 600;
            color: color-mix(in srgb, rgb(var(--card-pos-rgb, var(--accent-primary-rgb))) 64%, var(--text-primary));
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
        }

        .back-lemma-row .back-lemma {
            font-size: 30px;
            text-align: left;
        }

        .back-form-note {
            font-family: var(--font-reading);
            font-size: 14px;
            font-weight: 500;
            color: var(--text-muted);
        }

        .back-form-note::before {
            content: "· ";
        }

        .back-derivation-line {
            display: flex;
            align-items: baseline;
            justify-content: flex-start;
            gap: 5px;
            margin-top: 5px;
            color: var(--text-muted);
            font-family: var(--font-reading);
            font-size: 12px;
            line-height: 1.2;
        }

        .back-derivation-line strong {
            color: color-mix(in srgb, var(--accent-primary) 48%, white);
            font-family: var(--font-display);
            font-size: 14px;
            font-weight: 700;
        }

        .reverse-example-form {
            display: flex;
            align-items: baseline;
            justify-content: center;
            flex-wrap: wrap;
            gap: 4px 7px;
            margin: 0 0 9px;
            color: rgba(255, 255, 255, 0.62);
            font-family: var(--font-reading);
            font-size: 11px;
            font-weight: 500;
            line-height: 1.2;
        }

        .reverse-example-form strong {
            color: color-mix(in srgb, rgb(var(--sense-match-rgb, 132, 201, 168)) 64%, white);
            font-family: var(--font-display);
            font-size: 14px;
            font-weight: 700;
        }

        /* Deck Complete Modal Styles */
        .deck-complete-content {
            max-width: 360px;
            text-align: center;
        }

        .deck-complete-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            margin-bottom: 22px;
        }

        .deck-complete-icon {
            font-size: 40px;
            line-height: 1;
            margin-bottom: 2px;
        }

        .deck-complete-header h3 {
            font-family: var(--font-emphasis);
            color: var(--text-primary);
            font-size: 24px;
            font-weight: 700;
            margin: 0;
        }

        .deck-complete-accuracy {
            font-family: var(--font-data);
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.02em;
            color: var(--text-secondary);
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 999px;
            padding: 3px 12px;
            margin-top: 4px;
        }

        .deck-complete-body {
            padding: 0;
        }

        .deck-complete-stats {
            display: flex;
            justify-content: center;
            gap: 14px;
            margin-bottom: 18px;
        }

        .deck-stat {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 14px 10px;
            border-radius: 14px;
            max-width: 130px;
        }

        .deck-stat.correct-stat {
            background: var(--glow-green);
            color: var(--accent-green);
            border: 1px solid var(--accent-green);
        }

        .deck-stat.incorrect-stat {
            background: rgba(255, 82, 82, 0.15);
            color: var(--error);
            border: 1px solid var(--error);
        }

        .deck-stat-emoji {
            font-size: 22px;
            margin-bottom: 2px;
        }

        .deck-stat-value {
            font-family: var(--font-emphasis);
            font-size: 28px;
            font-weight: 700;
            line-height: 1.1;
        }

        .deck-stat-label {
            font-family: var(--font-data);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            opacity: 0.85;
            margin-top: 2px;
        }

        .deck-complete-message {
            font-family: var(--font-reading);
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 22px;
            min-height: 18px;
        }

        .deck-complete-actions {
            display: flex;
            gap: 12px;
            margin-bottom: 12px;
        }

        .deck-complete-btn {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: var(--font-emphasis);
            padding: 14px 12px;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.2s ease;
            gap: 6px;
        }

        .deck-complete-btn .btn-icon {
            font-size: 22px;
        }

        .deck-complete-btn.restart-btn {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
        }

        .deck-complete-btn.restart-btn:hover {
            background: var(--bg-card-hover);
            border-color: var(--border-light);
        }

        .deck-complete-btn.continue-btn {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
        }

        .deck-complete-btn.continue-btn:hover {
            box-shadow: 0 4px 18px rgba(var(--accent-primary-rgb), 0.45);
            transform: translateY(-1px);
        }

        .deck-complete-btn.continue-btn:disabled {
            background: var(--bg-tertiary);
            color: var(--text-muted);
            cursor: not-allowed;
            box-shadow: none;
            transform: none;
        }

        .deck-complete-btn.exit-btn {
            width: 100%;
            background: transparent;
            color: var(--text-muted);
            border: 1px solid var(--border-color);
            flex-direction: row;
            gap: 10px;
            padding: 12px;
        }

        .deck-complete-btn.exit-btn:hover {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            border-color: var(--border-light);
        }
        .deck-complete-btn.exit-btn.has-next-set {
            background: var(--accent-secondary);
            color: var(--accent-secondary-text);
            border-color: var(--accent-secondary);
            font-weight: 700;
        }
        .deck-complete-btn.exit-btn.has-next-set:hover {
            background: color-mix(in srgb, var(--accent-secondary) 88%, white);
            color: var(--accent-secondary-text);
            border-color: var(--accent-secondary);
            box-shadow: 0 4px 18px rgba(var(--accent-secondary-rgb), 0.35);
        }

        /* Auto-continue countdown. The bar fills left to right across the
           continue button for the length of the hold, so the pause reads as a
           deliberate "next set starting" beat with time to choose Main menu
           instead — rather than the app appearing to freeze then jump. */
        .deck-complete-btn.is-auto-continuing {
            position: relative;
            overflow: hidden;
            isolation: isolate;
        }
        .deck-complete-btn.is-auto-continuing::before {
            content: '';
            position: absolute;
            inset: 0;
            transform-origin: left center;
            transform: scaleX(0);
            background: rgba(255, 255, 255, 0.28);
            animation: deck-auto-continue-fill var(--auto-continue-ms, 5000ms) linear forwards;
            z-index: -1;
            pointer-events: none;
        }
        @keyframes deck-auto-continue-fill {
            from { transform: scaleX(0); }
            to   { transform: scaleX(1); }
        }
        /* Respect a reduced-motion preference: the hold still applies, it just
           does not animate. */
        @media (prefers-reduced-motion: reduce) {
            .deck-complete-btn.is-auto-continuing::before { animation: none; }
        }

        /* Modern completion surface: one obvious continuation action, with
           review/restart demoted to consistent secondary controls. */
        .deck-complete-content {
            max-width: 390px;
            padding: 26px;
            border-radius: 20px;
            background: color-mix(in srgb, var(--bg-card) 94%, var(--accent-primary) 6%);
            border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, var(--border-color));
        }
        .deck-complete-header {
            gap: 7px;
            margin-bottom: 20px;
        }
        .deck-complete-eyebrow,
        .progress-modal-eyebrow {
            font-family: var(--font-emphasis);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.11em;
            text-transform: uppercase;
            color: var(--text-muted);
        }
        .deck-complete-icon {
            width: 52px;
            height: 52px;
            display: grid;
            place-items: center;
            margin: 2px 0 4px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--accent-secondary) 18%, transparent);
            border: 1px solid color-mix(in srgb, var(--accent-secondary) 52%, transparent);
            color: var(--accent-secondary);
        }
        .deck-complete-icon svg {
            width: 28px;
            height: 28px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2.2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .deck-complete-header h3 {
            font-size: 26px;
            letter-spacing: -0.02em;
        }
        .deck-complete-accuracy {
            padding: 0;
            margin: 0;
            border: 0;
            background: transparent;
            font-family: var(--font-emphasis);
            color: var(--text-secondary);
        }
        .deck-complete-stats {
            gap: 0;
            margin-bottom: 14px;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            overflow: hidden;
        }
        .deck-stat,
        .deck-stat.correct-stat,
        .deck-stat.incorrect-stat {
            max-width: none;
            padding: 13px 10px;
            border: 0;
            border-radius: 0;
            background: rgba(255, 255, 255, 0.025);
        }
        .deck-stat + .deck-stat {
            border-left: 1px solid var(--border-color);
        }
        .deck-stat-emoji {
            font-size: 15px;
            margin-bottom: 1px;
        }
        .deck-stat-value {
            font-size: 25px;
        }
        .deck-stat-label {
            font-family: var(--font-emphasis);
            text-transform: none;
            letter-spacing: 0;
        }
        .deck-complete-message {
            margin-bottom: 16px;
            min-height: 0;
        }
        .deck-complete-message:empty {
            display: none;
        }
        .deck-complete-perfect {
            color: var(--accent-green);
            font-weight: 600;
        }
        .deck-complete-btn {
            flex-direction: row;
            min-height: 44px;
            padding: 11px 14px;
            border-radius: 11px;
            font-size: 13px;
            gap: 7px;
        }
        .deck-complete-btn.exit-btn {
            width: 100%;
            margin-bottom: 9px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
            font-size: 14px;
        }
        .deck-complete-actions {
            gap: 8px;
            margin: 0;
        }
        .deck-complete-btn.menu-btn,
        .deck-complete-btn.restart-btn {
            min-height: 38px;
            padding: 8px 10px;
            background: transparent;
            color: var(--text-muted);
            border: 1px solid var(--border-color);
            font-size: 11px;
            font-weight: 600;
        }
        .deck-complete-btn.menu-btn:hover,
        .deck-complete-btn.restart-btn:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border-color: var(--border-light);
            box-shadow: none;
        }
        .secondary-action-icon {
            width: 15px;
            height: 15px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .progress-modal-content {
            max-width: 430px;
            border-radius: 18px;
            border: 1px solid var(--border-color);
        }
        .progress-modal-content .modal-header {
            align-items: flex-start;
        }
        .progress-modal-content .modal-header h3 {
            margin: 2px 0 0;
            font-family: var(--font-emphasis);
            letter-spacing: -0.02em;
        }
        #statsModal .progress-modal-content {
            width: min(94vw, 680px);
            max-width: 680px;
        }
        .active-set-progress-body {
            margin-top: 6px;
        }
        .active-set-progress-intro {
            margin: 0 0 14px;
            color: var(--text-muted);
            font-size: 12px;
            line-height: 1.5;
        }
        .active-set-progress-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .active-set-progress-empty,
        .active-set-history-empty {
            margin: 0;
            color: var(--text-muted);
            font-size: 12px;
            line-height: 1.45;
        }
        .active-set-card-progress {
            overflow: clip;
            border: 1px solid var(--border-color);
            border-radius: 13px;
            background: color-mix(in srgb, var(--bg-tertiary) 72%, transparent);
        }
        .active-set-card-progress[open] {
            border-color: color-mix(in srgb, var(--accent-primary) 32%, var(--border-color));
            background: color-mix(in srgb, var(--bg-tertiary) 88%, transparent);
        }
        .active-set-card-summary {
            display: grid;
            grid-template-columns: 30px minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px;
            padding: 11px 12px;
            cursor: pointer;
            list-style: none;
        }
        .active-set-card-summary::-webkit-details-marker { display: none; }
        .active-set-card-number {
            display: grid;
            place-items: center;
            width: 26px;
            height: 26px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--text-muted) 11%, transparent);
            color: var(--text-muted);
            font: 700 10px/1 var(--font-data);
        }
        .active-set-card-identity {
            display: flex;
            min-width: 0;
            flex-direction: column;
            gap: 2px;
        }
        .active-set-card-word {
            overflow: hidden;
            color: var(--text-primary);
            font: 700 14px/1.2 var(--font-emphasis);
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .active-set-card-translation {
            overflow: hidden;
            color: var(--text-muted);
            font-size: 11px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .active-set-card-result {
            padding: 5px 8px;
            border: 1px solid var(--border-color);
            border-radius: 999px;
            color: var(--text-muted);
            font: 700 10px/1.2 var(--font-data);
            white-space: nowrap;
        }
        .active-set-card-result.is-correct {
            border-color: color-mix(in srgb, var(--success) 38%, var(--border-color));
            background: color-mix(in srgb, var(--success) 10%, transparent);
            color: var(--success);
        }
        .active-set-card-result.is-incorrect {
            border-color: color-mix(in srgb, var(--error) 42%, var(--border-color));
            background: color-mix(in srgb, var(--error) 9%, transparent);
            color: var(--error);
        }
        .active-set-card-result.is-mixed {
            border-color: color-mix(in srgb, #f0b35a 45%, var(--border-color));
            background: color-mix(in srgb, #f0b35a 10%, transparent);
            color: #f0b35a;
        }
        .active-set-card-result.is-current {
            border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-color));
            background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
            color: var(--accent-primary);
        }
        .active-set-card-history {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 0 12px 13px 52px;
        }
        .active-set-history-section {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding-top: 10px;
            border-top: 1px solid var(--border-color);
        }
        .active-set-history-section h4 {
            margin: 0 0 2px;
            color: var(--text-primary);
            font: 700 11px/1.25 var(--font-emphasis);
            text-transform: none;
        }
        .active-set-history-row {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            color: var(--text-muted);
            font-size: 11px;
            line-height: 1.35;
        }
        .active-set-history-value {
            color: var(--text-primary);
            text-align: right;
        }
        .active-set-history-time { font-family: var(--font-data); }
        .active-set-saved-record {
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding: 9px 10px;
            border-radius: 10px;
            background: color-mix(in srgb, var(--bg-card) 60%, transparent);
        }
        .active-set-saved-record-title {
            color: var(--accent-primary);
            font-size: 11px;
        }
        .active-set-history-retention {
            margin: 0;
            color: var(--text-muted);
            font-size: 10px;
            line-height: 1.45;
        }
        @media (max-width: 520px) {
            .active-set-card-summary {
                grid-template-columns: 26px minmax(0, 1fr);
            }
            .active-set-card-result {
                grid-column: 2;
                justify-self: start;
            }
            .active-set-card-history { padding-left: 48px; }
            .active-set-history-row { flex-direction: column; gap: 2px; }
            .active-set-history-value { text-align: left; }
        }
        .progress-modal-explainer {
            margin: 0 0 16px;
            color: var(--text-muted);
            font-size: 12px;
            line-height: 1.5;
        }
        .total-progress-hero {
            display: flex;
            flex-direction: column;
            gap: 3px;
            padding: 17px;
            margin-bottom: 10px;
            border-radius: 14px;
            background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.16), rgba(var(--accent-secondary-rgb), 0.09));
            border: 1px solid rgba(var(--accent-primary-rgb), 0.24);
        }
        .total-progress-hero span {
            color: var(--text-muted);
            font: 600 11px/1.3 var(--font-emphasis);
        }
        .total-progress-hero strong {
            color: var(--text-primary);
            font: 700 32px/1.1 var(--font-emphasis);
        }
        .total-progress-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        .total-progress-grid .stat-row {
            min-width: 0;
            flex-direction: column;
            align-items: flex-start;
            gap: 5px;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.025);
        }
        .total-progress-grid .stat-row span:first-child {
            color: var(--text-muted);
            font-size: 10px;
        }
        .total-progress-grid .stat-row span:last-child {
            color: var(--text-primary);
            font: 700 18px/1.2 var(--font-emphasis);
        }

        /* Coverage Progress Bar */
        .coverage-bar-wrapper {
            margin: 0 0 8px 0;
            opacity: 0;
            transition: opacity 0.4s ease-in;
        }
        .coverage-bar-wrapper.visible {
            opacity: 1;
        }
        .coverage-bar-container {
            width: 100%;
            height: 8px;
            background: var(--bg-tertiary);
            border-radius: 4px;
            overflow: hidden;
        }
        .coverage-bar-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
            border-radius: 4px;
            transition: width 1.2s ease-out;
        }

        .personal-coverage-wrapper {
            position: relative;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 14px 16px;
            margin-bottom: 8px;
        }

        #step1.language-summary-active > .step-header {
            align-items: flex-end;
            margin-bottom: 9px;
        }

        #step1.language-summary-active #step1Title {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            color: var(--text-primary);
            font-size: 16px;
            text-transform: none;
            letter-spacing: normal;
        }

        #step1.language-summary-active #step1Title::before {
            content: 'Choose how to learn';
            margin-bottom: 2px;
            color: var(--text-muted);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        #step1.language-summary-active.source-speech-active #step1Title::before {
            content: 'Speech vocabulary';
        }

        .personal-coverage-wrapper.personal-coverage-wrapper--merged {
            flex: 1;
            min-width: 0;
            margin: 0;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            opacity: 1 !important;
        }

        .standard-source-card {
            grid-template-columns: minmax(0, 1fr);
        }

        .standard-source-choice {
            display: grid;
            gap: 7px;
            padding: 10px 7px 7px;
            border-top: 1px solid var(--border-color);
        }

        .standard-source-choice-title {
            color: var(--text-muted);
            font: 700 10px/1 var(--font-emphasis);
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .standard-source-choice-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .standard-source-choice-btn {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            gap: 9px;
            min-width: 0;
            min-height: 52px;
            padding: 8px 10px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--bg-card);
            color: var(--text-primary);
            cursor: pointer;
            text-align: left;
            transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
        }

        .standard-source-choice-btn:hover,
        .standard-source-choice-btn:focus-visible {
            border-color: color-mix(in srgb, var(--accent-primary) 58%, var(--border-color));
            background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-card));
            outline: none;
            transform: translateY(-1px);
        }

        .standard-source-choice-btn.is-selected {
            border-color: var(--accent-primary);
            background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-card));
        }

        .standard-source-choice-btn:disabled {
            opacity: 0.48;
            cursor: not-allowed;
            transform: none;
        }

        .standard-source-choice-btn > span:last-child {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .standard-source-choice-btn strong {
            font: 700 13px/1.15 var(--font-emphasis);
        }

        .standard-source-choice-btn small {
            overflow: hidden;
            color: var(--text-muted);
            font: 500 10px/1.25 var(--font-reading);
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .standard-source-choice-icon {
            width: 30px;
            height: 30px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: color-mix(in srgb, var(--accent-primary) 15%, var(--bg-tertiary));
            color: var(--accent-primary);
            font: 800 15px/1 var(--font-emphasis);
        }

        .standard-source-language-icon {
            background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-card));
            font-size: 20px;
            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 35%, transparent);
        }

        .standard-source-progress {
            grid-column: 1 / -1;
            min-width: 0;
            padding: 0 7px 4px;
        }

        .standard-source-progress:empty {
            display: none;
        }

        @media (max-width: 430px) {
            .standard-source-card {
                grid-template-columns: 1fr;
            }
            .standard-source-progress {
                grid-column: 1;
            }
            .standard-source-choice-buttons {
                grid-template-columns: 1fr;
            }
        }

        .personal-coverage-wrapper--merged .personal-progress-header {
            min-height: 28px;
            margin: 0 0 6px;
            padding: 0;
        }

        .personal-coverage-wrapper--merged .personal-progress-title {
            display: none;
        }

        .personal-coverage-wrapper--merged .personal-progress-header > .progress-info-btn {
            position: static;
            margin: 0 2px 0 0;
        }

        .personal-coverage-wrapper--merged .selection-pill-inline {
            flex-shrink: 0;
            margin-right: 2px;
        }

        .source-pill-inline {
            align-items: center;
            gap: 5px;
            flex-shrink: 0;
            padding: 4px 8px;
            border: 1px solid color-mix(in srgb, var(--accent-secondary) 55%, var(--border-color));
            border-radius: 6px;
            background: color-mix(in srgb, var(--accent-secondary) 10%, transparent);
            color: var(--text-secondary);
            font: 650 11px/1.2 var(--font-emphasis);
            cursor: pointer;
        }

        .source-pill-inline:hover,
        .source-pill-inline:focus-visible {
            border-color: var(--accent-secondary);
            color: var(--text-primary);
            outline: none;
        }

        .source-pill-inline--pending {
            border-style: dashed;
            color: var(--accent-secondary);
        }

        .personal-coverage-wrapper--merged .coverage-bar-container {
            height: 7px;
        }

        .personal-coverage-wrapper--merged.personal-coverage-wrapper--empty .personal-progress-header {
            margin-bottom: 0;
        }

        .personal-coverage-wrapper--merged.personal-coverage-wrapper--empty .personal-progress-info,
        .personal-coverage-wrapper--merged.personal-coverage-wrapper--empty .personal-progress-header > .progress-info-btn,
        .personal-coverage-wrapper--merged.personal-coverage-wrapper--empty .coverage-bar-container {
            display: none;
        }

        .personal-coverage-fill {
            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
        }

        .personal-progress-header {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 6px;
            padding-right: 20px;
        }

        .personal-progress-title {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.07em;
        }

        .personal-progress-info {
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 500;
            color: var(--text-muted);
            margin-left: auto;
            line-height: 1.5;
            display: inline-grid;
            grid-template-columns: max-content max-content;
            column-gap: 10px;
            justify-items: end;
        }
        .personal-progress-info .ppi-row {
            display: contents;
        }
        .personal-progress-info .ppi-label {
            text-align: right;
        }
        .personal-progress-info .ppi-value {
            color: var(--text-primary);
            font-weight: 600;
            font-variant-numeric: tabular-nums;
            min-width: 3.2em;
            text-align: right;
        }

        /* Top bar (shared: How to start, Estimate Level, gear) */
        .top-bar-header {
            margin-bottom: 0 !important;
            gap: 12px;
            align-items: center;
        }

        .top-bar-user-name {
            color: var(--text-primary);
            font-weight: 700;
            font-size: 16px;
            font-family: var(--font-emphasis);
            cursor: pointer;
        }

        .top-bar-text-btn {
            font-family: var(--font-emphasis);
            font-size: 14px;
            line-height: 1.1;
            font-weight: 600;
            background: transparent;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 0;
            transition: color 0.2s ease;
            /* Wrap to 2 lines to save horizontal space */
            white-space: normal;
            text-align: center;
            max-width: 78px;
        }

        .top-bar-text-btn:hover {
            color: var(--accent-primary);
        }

        /* Push the icon group (find + gear) to the right */
        .top-bar-find {
            margin-left: auto;
        }
        .top-bar-find + .top-bar-gear {
            margin-left: 0;
        }
        .top-bar-gear {
            margin-left: auto;
        }

        /* Offline / sync-pending status pill. Theme-aware via CSS variables.
           Sits between the top-bar text buttons and the right-aligned icons;
           .hidden collapses it when online with an empty queue. */
        .sync-status {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: var(--font-emphasis);
            font-size: 12px;
            font-weight: 600;
            line-height: 1;
            white-space: nowrap;
            padding: 4px 9px;
            border-radius: 999px;
            border: 1px solid var(--border-color);
            background: var(--bg-card);
            color: var(--text-muted);
            cursor: default;
            user-select: none;
        }
        .sync-status.hidden {
            display: none;
        }
        /* Leading status dot. */
        .sync-status::before {
            content: '';
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--text-muted);
            flex: 0 0 auto;
        }
        /* Offline: muted amber, steady dot. */
        .sync-status.is-offline {
            color: #b26a00;
            border-color: rgba(217, 138, 7, 0.45);
            background: rgba(217, 138, 7, 0.12);
        }
        .sync-status.is-offline::before {
            background: #d98a07;
        }
        /* Syncing: accent-colored, pulsing dot. */
        .sync-status.is-pending {
            color: var(--accent-primary);
            border-color: var(--accent-primary);
            background: rgba(200, 16, 46, 0.10);
        }
        .sync-status.is-pending::before {
            background: var(--accent-primary);
            animation: syncPulse 1.1s ease-in-out infinite;
        }
        .sync-status.is-syncing::before { animation: syncPulse 1.1s ease-in-out infinite; }
        .sync-status.is-failed,
        .sync-status.is-update {
            color: var(--error);
            border-color: currentColor;
            background: color-mix(in srgb, currentColor 10%, transparent);
        }
        .sync-status.is-failed::before,
        .sync-status.is-update::before { background: currentColor; }
        .sync-status.is-synced { opacity: .78; }
        @keyframes syncPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.35; transform: scale(0.7); }
        }
        @media (prefers-reduced-motion: reduce) {
            .sync-status.is-pending::before { animation: none; }
        }

        .offline-panel {
            margin: 12px 0;
            padding: 14px;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            background: var(--bg-card);
        }
        .offline-panel-heading,
        .offline-source {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px 12px;
            align-items: center;
        }
        .offline-panel-heading small,
        .offline-source small {
            display: block;
            margin-top: 3px;
            color: var(--text-muted);
            font-size: 12px;
        }
        .offline-panel button,
        .sync-queue-list button {
            min-height: 36px;
            border: 1px solid var(--border-color);
            border-radius: 9px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            padding: 7px 11px;
        }
        .offline-source {
            padding: 12px 0;
            border-bottom: 1px solid var(--border-color);
        }
        .offline-source:last-child { border-bottom: 0; }
        .offline-source-status { color: var(--text-muted); font-size: 12px; }
        .offline-error { grid-column: 1 / -1; color: var(--error); overflow-wrap: anywhere; }
        .offline-cancel { margin-top: 10px; }
        .sync-queue-list { list-style: none; padding: 0; margin: 8px 0 0; }
        .sync-queue-list li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; }
        .sync-queue-list small { display: block; color: var(--text-muted); }
        @media (max-width: 600px) {
            .sync-status { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
            .offline-panel-heading { grid-template-columns: 1fr; }
            .offline-panel-heading button { width: 100%; }
        }

        /* ===== Radial "clock of pictures" artist picker ===== */
        .artist-radial-overlay {
            position: fixed;
            inset: 0;
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        .artist-radial-overlay.is-open {
            opacity: 1;
        }

        /* Square stage the ring is laid out inside. Scales with the viewport. */
        .artist-radial-stage {
            position: relative;
            width: min(78vw, 78vh, 460px);
            height: min(78vw, 78vh, 460px);
            touch-action: none;
            user-select: none;
            transform: scale(0.9);
            transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .artist-radial-overlay.is-open .artist-radial-stage {
            transform: scale(1);
        }

        /* Center hub: doubles as the close target. */
        .artist-radial-hub {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 34%;
            height: 34%;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: var(--bg-secondary, #1a1a1a);
            border: 1px solid var(--border-color, rgba(255,255,255,0.15));
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
            cursor: pointer;
            transition: background 0.15s ease;
        }
        .artist-radial-hub:hover {
            background: var(--bg-tertiary, var(--bg-secondary, #262626));
        }
        .artist-radial-hub-title {
            font-family: var(--font-emphasis);
            font-weight: 700;
            font-size: clamp(13px, 3.4vw, 18px);
            line-height: 1.15;
            color: var(--text-primary, #fff);
            pointer-events: none;
        }
        .artist-radial-close-label {
            margin-top: 6px;
            color: var(--text-muted);
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 600;
            pointer-events: none;
        }

        /* Each artist thumbnail, absolutely positioned on the ring. */
        .artist-radial-thumb {
            position: absolute;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            width: 30%;
            transition: left 80ms linear, top 80ms linear, opacity 100ms ease;
            will-change: left, top;
        }
        .artist-radial-stage.is-scrubbing .artist-radial-thumb {
            transition: opacity 70ms ease;
        }
        .artist-radial-stage.is-snapping .artist-radial-thumb {
            transition: left 170ms cubic-bezier(0.22, 0.8, 0.3, 1),
                        top 170ms cubic-bezier(0.22, 0.8, 0.3, 1),
                        opacity 100ms ease;
        }
        .artist-radial-thumb.is-off-ring {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .artist-radial-disc {
            width: min(20vw, 20vh, 110px);
            height: min(20vw, 20vh, 110px);
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border: 3px solid var(--artist-accent, var(--accent-primary));
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .artist-radial-disc--fallback {
            color: #fff;
            font-family: var(--font-emphasis);
            font-weight: 800;
            font-size: clamp(18px, 5vw, 34px);
            letter-spacing: 0.5px;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }
        .artist-radial-thumb:hover .artist-radial-disc,
        .artist-radial-thumb:focus-visible .artist-radial-disc {
            transform: scale(1.08);
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
        }

        .artist-radial-thumb--disabled {
            opacity: 0.38;
            cursor: not-allowed;
        }

        .artist-radial-thumb--disabled:hover .artist-radial-disc,
        .artist-radial-thumb--disabled:focus-visible .artist-radial-disc {
            transform: none;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
        }

        .language-radial-disc {
            font-size: clamp(30px, 8vw, 52px);
            letter-spacing: 0;
            text-shadow: none;
        }

        .learning-source-radial-disc {
            font-size: clamp(30px, 8vw, 50px);
            letter-spacing: 0;
            text-shadow: none;
        }

        /* Study options reuse the radial interaction without borrowing the
           loud picture-picker palette. Quiet icon-and-label targets keep the
           actions readable on both desktop and mobile. */
        .study-radial-picker {
            background: rgba(7, 9, 14, 0.76);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .study-radial-picker .artist-radial-stage {
            width: min(90vw, 82vh, 500px);
            height: min(90vw, 82vh, 500px);
        }
        .study-radial-picker .artist-radial-hub {
            width: 27%;
            height: 27%;
            background: color-mix(in srgb, var(--bg-secondary) 92%, black);
            border-color: rgba(255, 255, 255, 0.13);
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.42);
        }
        .study-radial-picker .artist-radial-thumb {
            width: 25%;
            min-height: min(22vw, 22vh, 108px);
            justify-content: center;
            gap: 5px;
            border-radius: 50%;
        }
        .study-radial-picker .artist-radial-disc {
            width: min(19vw, 19vh, 92px);
            height: min(19vw, 19vh, 92px);
            border: 1px solid transparent;
            background: transparent;
            color: rgba(255, 255, 255, 0.86);
            box-shadow: none;
            text-shadow: none;
        }
        .artist-radial-disc--icon svg {
            width: 42%;
            height: 42%;
            pointer-events: none;
        }
        .study-radial-picker .artist-radial-thumb:hover .artist-radial-disc,
        .study-radial-picker .artist-radial-thumb:focus-visible .artist-radial-disc {
            transform: translateY(-2px);
            border-color: rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.06);
            box-shadow: none;
        }
        /* Larger glyph inside the (also larger) study disc. 58% of a 92px
           disc is ~53px at the capped 500px stage, still 20px clear of the
           disc edge and well inside the 25%-wide thumb column. */
        .study-radial-picker .artist-radial-disc--icon svg {
            width: 58%;
            height: 58%;
        }
        .study-radial-picker .artist-radial-label {
            max-width: 118px;
            color: rgba(255, 255, 255, 0.86);
            font-size: clamp(12px, 3.1vw, 16px);
            font-weight: 600;
            line-height: 1.18;
            overflow: visible;
            text-overflow: clip;
            white-space: normal;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
        }

        .artist-radial-label {
            font-family: var(--font-emphasis);
            font-weight: 600;
            font-size: clamp(11px, 2.8vw, 14px);
            color: #fff;
            text-align: center;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
            max-width: 132px;
            line-height: 1.15;
            overflow: visible;
            text-overflow: clip;
            white-space: normal;
            pointer-events: none;
        }

        /* ===== Stable growing-choice sheets =====
           Languages use a two-column grid; Study Options uses an action list.
           Both scroll conventionally and keep every choice in a fixed place. */
        .choice-sheet-overlay {
            position: fixed;
            inset: 0;
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(5, 7, 11, 0.66);
            backdrop-filter: blur(7px);
            -webkit-backdrop-filter: blur(7px);
            opacity: 0;
            transition: opacity 180ms ease;
        }
        .choice-sheet-overlay.is-open { opacity: 1; }
        .choice-sheet-panel {
            width: min(92vw, 480px);
            max-height: min(78vh, 680px);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.13);
            border-radius: 22px;
            background: color-mix(in srgb, var(--bg-secondary) 96%, black);
            box-shadow: 0 22px 65px rgba(0, 0, 0, 0.46);
            transform: translateY(12px) scale(0.98);
            transition: transform 200ms cubic-bezier(0.22, 0.8, 0.3, 1);
        }
        .choice-sheet-overlay.is-open .choice-sheet-panel {
            transform: translateY(0) scale(1);
        }
        .choice-sheet-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: none;
            padding: 18px 18px 12px 20px;
        }
        .choice-sheet-header h2 {
            margin: 0;
            color: var(--text-primary);
            font-family: var(--font-emphasis);
            font-size: 20px;
            font-weight: 750;
        }
        .choice-sheet-heading { min-width: 0; }
        .choice-sheet-heading p {
            max-width: 45ch;
            margin: 5px 0 0;
            color: var(--text-muted);
            font: 400 12px/1.4 var(--font-reading);
        }
        .choice-sheet-close {
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            border: 0;
            border-radius: 50%;
            padding: 0 0 2px;
            background: rgba(255, 255, 255, 0.07);
            color: var(--text-secondary);
            font: 400 25px/1 var(--font-emphasis);
            cursor: pointer;
        }
        .choice-sheet-close:hover { background: rgba(255, 255, 255, 0.12); }
        .choice-sheet-body {
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            padding: 4px 14px 18px;
        }
        .choice-sheet-grid .choice-sheet-body {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 9px;
        }
        .choice-sheet-item {
            width: 100%;
            min-width: 0;
            display: grid;
            grid-template-columns: 46px minmax(0, 1fr) 18px;
            align-items: center;
            gap: 11px;
            padding: 10px 11px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.035);
            color: var(--text-primary);
            text-align: left;
            cursor: pointer;
        }
        .choice-sheet-item:hover:not(:disabled) {
            border-color: color-mix(in srgb, var(--choice-accent, var(--accent-primary)) 48%, rgba(255,255,255,.12));
            background: rgba(255, 255, 255, 0.07);
        }
        .choice-sheet-item:focus-visible {
            outline: 2px solid var(--accent-primary);
            outline-offset: 2px;
        }
        .choice-sheet-item:disabled {
            opacity: 0.48;
            cursor: default;
        }
        .choice-sheet-item.is-selected {
            border-color: color-mix(in srgb, var(--accent-primary) 58%, rgba(255,255,255,.16));
            background: color-mix(in srgb, var(--accent-primary) 11%, transparent);
        }
        .choice-sheet-icon {
            width: 46px;
            height: 46px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: color-mix(in srgb, var(--choice-accent) 18%, var(--bg-tertiary));
            color: var(--choice-accent);
            font-size: 27px;
            line-height: 1;
        }
        .choice-sheet-icon svg { width: 23px; height: 23px; }
        .choice-sheet-icon--image {
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
        }
        .choice-sheet-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .choice-sheet-copy strong {
            overflow-wrap: anywhere;
            font-family: var(--font-emphasis);
            font-size: 14px;
            font-weight: 650;
            line-height: 1.22;
        }
        .choice-sheet-copy small {
            color: var(--text-muted);
            font-size: 11px;
            line-height: 1.2;
        }
        .choice-sheet-tail {
            color: var(--text-muted);
            font-family: var(--font-emphasis);
            font-size: 18px;
            text-align: center;
        }
        .choice-sheet-grid .choice-sheet-item {
            min-height: 78px;
            grid-template-columns: 42px minmax(0, 1fr) 14px;
            gap: 8px;
            padding: 10px;
        }
        .choice-sheet-grid .choice-sheet-icon {
            width: 42px;
            height: 42px;
            font-size: 25px;
        }
        .choice-sheet-list .choice-sheet-item + .choice-sheet-item {
            margin-top: 7px;
        }
        @media (max-width: 600px) {
            .choice-sheet-overlay {
                align-items: flex-end;
                padding: 0;
            }
            .choice-sheet-panel {
                width: 100%;
                max-height: min(82vh, 700px);
                border-width: 1px 0 0;
                border-radius: 24px 24px 0 0;
                padding-bottom: env(safe-area-inset-bottom);
                transform: translateY(28px);
            }
            .choice-sheet-header { padding-top: 16px; }
        }

        .artist-source-image--custom {
            background: color-mix(in srgb, #10B981 18%, var(--bg-secondary));
            color: #10B981;
            border-color: color-mix(in srgb, #10B981 55%, var(--border-color));
        }

        .artist-source-image--custom svg {
            width: 58%;
            height: 58%;
        }

        /* Inline language pill (compact, sits in the step header row) */
        .selection-pill-inline {
            display: none;
            align-items: center;
            padding: 4px 14px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-radius: 6px;
            font-family: var(--font-emphasis);
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: filter 0.2s ease;
        }

        .selection-pill-inline:hover {
            filter: brightness(1.15);
        }

        /* Help modal content */
        .help-content {
            padding: 4px 0;
        }

        .help-content p {
            margin: 0 0 10px 0;
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        .help-content p:last-child {
            margin-bottom: 0;
        }

        .help-content strong {
            color: var(--text-primary);
        }

        /* Exclusion Progress Bars (Lemma & Cognate steps) */
        .exclusion-bar-wrapper {
            margin: 12px 0 4px 0;
            opacity: 0;
            transition: opacity 0.4s ease-in;
        }
        .exclusion-bar-wrapper.visible {
            opacity: 1;
        }
        .exclusion-bar-container {
            width: 100%;
            height: 6px;
            background: var(--bg-tertiary);
            border-radius: 3px;
            overflow: hidden;
        }
        .exclusion-bar-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
            border-radius: 3px;
            transition: width 0.8s ease-out;
        }
        .exclusion-bar-label {
            font-family: var(--font-data);
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 5px;
            text-align: center;
        }

        /* Authentication Modal Styles */
        .auth-body {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .auth-btn {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 20px;
            background: var(--bg-tertiary);
            border: 2px solid var(--border-color);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s;
            font-family: var(--font-reading);
            font-size: 16px;
            color: var(--text-primary);
            text-align: left;
            width: 100%;
        }

        .auth-btn:hover {
            border-color: var(--accent-primary);
            background: var(--bg-card-hover);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

        .auth-btn .btn-icon {
            font-size: 32px;
            flex-shrink: 0;
        }

        .auth-btn-content {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .auth-btn-title {
            font-weight: 600;
            font-size: 18px;
            color: var(--text-primary);
        }

        .auth-btn-desc {
            font-size: 14px;
            color: var(--text-muted);
        }

        .login-form {
            margin-top: 10px;
            padding-top: 20px;
            border-top: 1px solid var(--border-color);
        }

        .login-form.hidden {
            display: none;
        }

        .initials-input {
            width: 100%;
            padding: 12px 16px;
            background: var(--bg-tertiary);
            border: 2px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-primary);
            font-family: var(--font-emphasis);
            font-size: 18px;
            text-transform: uppercase;
            text-align: center;
            letter-spacing: 2px;
            margin-bottom: 15px;
        }

        .initials-input:focus {
            outline: none;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1);
        }

        .login-form-actions {
            display: flex;
            gap: 10px;
        }

        .auth-submit-btn, .auth-cancel-btn {
            flex: 1;
            padding: 12px 20px;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            font-family: var(--font-emphasis);
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .auth-submit-btn {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
        }

        .auth-submit-btn:hover {
            box-shadow: 0 0 20px rgba(200, 16, 46, 0.3);
            transform: translateY(-2px);
        }

        .auth-submit-btn:disabled {
            background: var(--bg-tertiary);
            color: var(--text-muted);
            border-color: var(--border-color);
            cursor: not-allowed;
            transform: none;
        }

        .auth-cancel-btn {
            background: transparent;
            color: var(--text-secondary);
        }

        .auth-cancel-btn:hover {
            background: var(--bg-tertiary);
            border-color: var(--accent-secondary);
        }

        /* Login row + info button */
        .auth-btn-row {
            position: relative;
            display: flex;
            align-items: stretch;
            gap: 0;
        }

        .auth-btn-row .auth-btn {
            flex: 1;
        }

        .auth-info-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1.5px solid var(--border-color);
            background: var(--bg-tertiary);
            color: var(--text-muted);
            font-family: var(--font-emphasis);
            font-size: 13px;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: all 0.2s;
            z-index: 2;
        }

        .auth-info-btn:hover {
            color: var(--accent-primary);
            border-color: var(--accent-primary);
            background: var(--bg-card);
        }

        .auth-info-note {
            padding: 12px 14px;
            margin-top: -5px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-secondary);
            font-size: 13px;
            line-height: 1.5;
        }

        .auth-info-note.hidden {
            display: none;
        }

        /* About this project link */
        .auth-about-link {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-family: var(--font-reading);
            font-size: 14px;
            cursor: pointer;
            padding: 8px;
            margin-top: 4px;
            text-decoration: underline;
            text-underline-offset: 3px;
            transition: color 0.2s;
        }

        .auth-about-link:hover {
            color: var(--accent-primary);
        }

        /* First-run authentication surface. Scoped overrides keep the older
           generic modal primitives available to the remaining dialogs. */
        #authModal {
            z-index: 30001;
            pointer-events: auto;
            padding: 22px;
            background:
                radial-gradient(circle at 50% 10%, rgba(var(--accent-primary-rgb), 0.14), transparent 36%),
                rgba(7, 8, 13, 0.9);
            backdrop-filter: blur(16px);
        }
        body.auth-active .app-loading-screen {
            display: none !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }
        .auth-modal-content {
            position: relative;
            width: min(100%, 440px);
            max-width: 440px;
            padding: 31px;
            overflow: hidden;
            border: 1px solid color-mix(in srgb, var(--accent-primary) 24%, var(--border-color));
            border-radius: 24px;
            background:
                linear-gradient(145deg, rgba(var(--accent-primary-rgb), 0.07), transparent 42%),
                color-mix(in srgb, var(--bg-card) 97%, black 3%);
            box-shadow: 0 26px 80px rgba(0,0,0,0.46);
        }
        .auth-modal-content::before {
            content: '';
            position: absolute;
            inset: 0 0 auto;
            height: 3px;
            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
        }
        .auth-welcome-mark {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            margin-bottom: 22px;
            border: 1px solid color-mix(in srgb, var(--accent-primary) 48%, transparent);
            border-radius: 13px;
            background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
            color: var(--accent-primary);
            font-family: var(--font-emphasis);
            font-size: 20px;
            font-weight: 800;
        }
        .auth-welcome-copy {
            margin-bottom: 25px;
        }
        .auth-welcome-eyebrow {
            display: block;
            margin-bottom: 7px;
            color: var(--accent-primary);
            font-family: var(--font-emphasis);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }
        .auth-welcome-copy h3 {
            margin: 0 0 10px;
            color: var(--text-primary);
            font-family: var(--font-emphasis);
            font-size: clamp(25px, 7vw, 32px);
            font-weight: 750;
            line-height: 1.08;
            letter-spacing: -0.035em;
        }
        .auth-welcome-copy p {
            max-width: 34em;
            margin: 0;
            color: var(--text-secondary);
            font-family: var(--font-reading);
            font-size: 13px;
            line-height: 1.55;
        }
        .auth-modal-content .auth-body {
            gap: 10px;
        }
        .auth-modal-content .auth-btn {
            position: relative;
            z-index: 1;
            pointer-events: auto;
            touch-action: manipulation;
            min-height: 72px;
            gap: 12px;
            padding: 13px 15px;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            background: rgba(255,255,255,0.025);
            box-shadow: none;
            transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
        }
        .auth-modal-content .auth-btn:hover,
        .auth-modal-content .auth-btn:focus-visible {
            border-color: color-mix(in srgb, var(--accent-primary) 62%, var(--border-color));
            background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-tertiary));
            box-shadow: none;
            transform: translateY(-1px);
            outline: none;
        }
        .auth-modal-content .login-btn {
            padding-right: 45px;
        }
        .auth-choice-icon {
            width: 38px;
            height: 38px;
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            border-radius: 11px;
            background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
            color: var(--accent-primary);
        }
        .auth-choice-icon--guest {
            background: color-mix(in srgb, var(--accent-secondary) 12%, transparent);
            color: var(--accent-secondary);
        }
        .auth-choice-icon svg {
            width: 21px;
            height: 21px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .auth-modal-content .auth-btn-content {
            min-width: 0;
            flex: 1;
            gap: 3px;
        }
        .auth-modal-content .auth-btn-title {
            font-family: var(--font-emphasis);
            font-size: 14px;
            font-weight: 750;
        }
        .auth-modal-content .auth-btn-desc {
            font-size: 11px;
            line-height: 1.35;
        }
        .auth-choice-arrow {
            color: var(--text-muted);
            font-family: var(--font-emphasis);
            font-size: 18px;
        }
        .auth-modal-content .auth-info-btn {
            top: 24px;
            right: 12px;
            width: 27px;
            height: 27px;
            border: 0;
            background: transparent;
        }
        .auth-modal-content .auth-info-btn svg {
            width: 17px;
            height: 17px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
        }
        .auth-modal-content .auth-info-note {
            margin: 0 2px 2px;
            padding: 11px 13px;
            border-color: color-mix(in srgb, var(--accent-primary) 20%, var(--border-color));
            border-radius: 10px;
            background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-tertiary));
            font-size: 11px;
            line-height: 1.5;
        }
        .auth-modal-content .auth-about-link {
            align-self: center;
            margin: 6px 0 0;
            padding: 7px 10px;
            color: var(--text-muted);
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 650;
            text-decoration: none;
        }
        .auth-modal-content .login-form {
            margin: 0;
            padding: 3px 0 0;
            border: 0;
        }
        .auth-form-heading {
            margin-bottom: 18px;
        }
        .auth-form-heading h4 {
            margin: 0 0 5px;
            color: var(--text-primary);
            font-family: var(--font-emphasis);
            font-size: 20px;
            letter-spacing: -0.02em;
        }
        .auth-form-heading p {
            margin: 0;
            color: var(--text-muted);
            font-size: 12px;
        }
        .auth-input-label {
            display: block;
            margin: 0 0 7px 2px;
            color: var(--text-secondary);
            font-family: var(--font-emphasis);
            font-size: 11px;
            font-weight: 700;
        }
        .auth-modal-content .initials-input {
            min-height: 56px;
            margin-bottom: 11px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background: var(--bg-tertiary);
            font-size: 21px;
            font-weight: 750;
            letter-spacing: 0.16em;
        }
        .auth-modal-content .initials-input:focus {
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.13);
        }
        .auth-modal-content .login-form-actions {
            gap: 8px;
        }
        .auth-modal-content .auth-submit-btn,
        .auth-modal-content .auth-cancel-btn {
            min-height: 44px;
            padding: 10px 15px;
            border-width: 1px;
            border-radius: 11px;
            font-size: 12px;
            transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
        }
        .auth-modal-content .auth-submit-btn:hover {
            box-shadow: 0 5px 18px rgba(var(--accent-primary-rgb), 0.24);
            transform: translateY(-1px);
        }
        .auth-modal-content.is-login-form .auth-welcome-mark {
            width: 34px;
            height: 34px;
            margin-bottom: 15px;
            border-radius: 10px;
            font-size: 16px;
        }
        .auth-modal-content.is-login-form .auth-welcome-copy {
            margin-bottom: 18px;
        }
        .auth-modal-content.is-login-form .auth-welcome-copy h3 {
            font-size: 23px;
        }
        .auth-modal-content.is-login-form .auth-welcome-copy p {
            display: none;
        }
        @media (max-width: 480px) {
            #authModal {
                align-items: center;
                padding: 10px;
            }
            .auth-modal-content {
                width: 100%;
                padding: 24px 20px 21px;
                border-radius: 22px;
            }
            .auth-welcome-mark {
                margin-bottom: 17px;
            }
            .auth-welcome-copy {
                margin-bottom: 20px;
            }
        }

        /* About This Project modal — full-screen takeover. No persistent
           header bar (vertical space is premium); close button floats over
           the content in the top-right corner. */
        .about-project-modal {
            max-width: none;
            width: 100vw;
            height: 100vh;
            max-height: 100vh;
            border-radius: 0;
            padding: 0;
            border: none;
            background: var(--bg-primary, var(--bg-card));
            position: relative;
            /* Scroll container for the about modal. Putting overflow here
               (rather than on .about-project-body) keeps the scrollbar
               flush with the viewport's right edge instead of floating
               at the body's max-width boundary in the middle of wide
               screens. Transparent track lets the modal's own background
               show through so the scrollbar doesn't read as a white
               sidebar over dark themes. */
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: thin;
            scrollbar-color: var(--border-color) transparent;
        }

        .about-project-modal::-webkit-scrollbar {
            width: 8px;
        }

        .about-project-modal::-webkit-scrollbar-track {
            background: transparent;
        }

        .about-project-modal::-webkit-scrollbar-thumb {
            background: var(--border-color);
            border-radius: 4px;
        }

        .about-close-floating {
            /* Fixed (not absolute) so it stays pinned to the viewport
               corner while the modal scrolls underneath. */
            position: fixed;
            top: 18px;
            right: 22px;
            z-index: 10;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            font-size: 20px;
            line-height: 1;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }

        .about-close-floating:hover {
            background: var(--bg-card-hover, var(--bg-tertiary));
            color: var(--text-primary);
            border-color: var(--accent-primary);
        }

        /* Authenticated-user variant: close button becomes a pill-shaped
           "Back to the app" button, matching the bottom CTA. Toggled by
           _updateAboutCloseButton() in auth.js based on session state. */
        .about-close-floating.about-close-as-pill {
            width: auto;
            height: auto;
            border-radius: 999px;
            padding: 9px 18px;
            font-size: 13px;
            font-weight: 700;
            font-family: var(--font-emphasis);
            line-height: 1;
            letter-spacing: 0.2px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
        }

        .about-close-floating.about-close-as-pill:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.4);
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
        }

        .about-project-body {
            /* Scroll lives on the parent .about-project-modal so the
               scrollbar sits at the viewport's right edge. The body just
               flows naturally inside, capped at a readable width. */
            padding: 44px 48px 80px;
            color: var(--text-secondary);
            font-family: var(--font-reading);
            font-size: 16px;
            line-height: 1.7;
            max-width: 880px;
            width: 100%;
            margin: 0 auto;
            box-sizing: border-box;
        }

        /* About-modal title treatments. Using var(--accent-primary) for
           headings is unreadable in dark-blue themes (e.g. Bad Bunny theme),
           so we render titles in var(--text-primary) with a subtle accent
           underline instead of a coloured fill. */
        .about-project-modal .modal-header h3 {
            color: var(--text-primary);
        }

        .about-project-body h2 {
            font-family: var(--font-emphasis);
            color: var(--text-primary);
            font-size: 26px;
            font-weight: 700;
            margin: 36px 0 16px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--accent-primary);
            display: inline-block;
            letter-spacing: -0.3px;
        }

        .about-project-body h2:first-child {
            margin-top: 0;
        }

        .about-project-body h3 {
            font-family: var(--font-emphasis);
            color: var(--text-primary);
            font-size: 18px;
            font-weight: 600;
            margin: 22px 0 8px;
            letter-spacing: -0.1px;
        }

        .about-project-body p {
            margin: 0 0 14px;
        }

        .about-project-body ul {
            margin: 0 0 14px;
            padding-left: 22px;
        }

        .about-project-body li {
            margin-bottom: 8px;
        }

        .about-project-body strong {
            color: var(--text-primary);
            font-weight: 600;
        }

        .about-project-body em {
            color: var(--text-primary);
            font-style: italic;
        }

        .about-project-body a {
            color: var(--accent-primary);
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .about-project-body code {
            font-family: var(--font-data);
            font-size: 13px;
            background: var(--bg-tertiary);
            padding: 1px 6px;
            border-radius: 4px;
            color: var(--text-primary);
        }

        .about-figure {
            margin: 28px 0;
        }

        .about-project-body .about-figure img,
        .about-project-body .about-figure video {
            display: block;
            max-width: 100%;
            margin: 0 auto;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background: var(--bg-tertiary);
        }

        .about-project-body .about-figure video {
            /* Auto-looping silent demo clips — give them a sensible aspect ratio
               so they don't pop in/out as the file loads. */
            aspect-ratio: 16 / 10;
            object-fit: cover;
        }

        /* figcaption only shown on the placeholder (when the file is missing). */
        .about-figure figcaption {
            display: none;
        }

        /* Dashed placeholder box when the media file doesn't exist yet.
           The figcaption becomes the visible label so Josh knows what to drop in. */
        .about-figure.about-figure-missing {
            min-height: 220px;
            border: 2px dashed var(--border-color);
            background: var(--bg-tertiary);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .about-figure.about-figure-missing img,
        .about-figure.about-figure-missing video {
            display: none;
        }

        .about-figure.about-figure-missing figcaption {
            display: block;
            color: var(--text-muted);
            font-family: var(--font-data);
            font-size: 13px;
            text-align: center;
            line-height: 1.5;
        }

        .about-figure.about-figure-missing figcaption::before {
            content: "Image: ";
            color: var(--text-muted);
        }

        /* Override the label for video placeholders. */
        .about-figure.about-figure-video.about-figure-missing figcaption::before {
            content: "Video: ";
        }

        .about-loading {
            padding: 40px 20px;
            text-align: center;
            color: var(--text-muted);
            font-size: 14px;
        }

        /* -------- About-modal CTAs (appended to the About body) ----------- */
        /* Shown at the bottom of the About copy so first-time visitors have a
           clear path into the app from the landing. For already-authenticated
           users (e.g. arrived via Settings → "About this project"), this
           collapses to a single "Back to the app" button. */
        .about-ctas {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            margin-top: 48px;
            padding: 32px 24px;
            background: rgba(var(--accent-primary-rgb), 0.06);
            border: 1px solid rgba(var(--accent-primary-rgb), 0.25);
            border-radius: 12px;
        }

        .about-ctas-label {
            font-family: var(--font-emphasis);
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .about-ctas-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
        }

        .about-cta-btn {
            padding: 12px 24px;
            border-radius: 8px;
            font-family: var(--font-emphasis);
            font-weight: 700;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.2s;
            min-width: 180px;
            border: 1.5px solid var(--border-color);
        }

        .about-cta-btn.primary {
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border-color: var(--accent-primary);
        }

        .about-cta-btn.primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(var(--accent-primary-rgb), 0.4);
        }

        .about-cta-btn.secondary {
            background: transparent;
            color: var(--text-primary);
        }

        .about-cta-btn.secondary:hover {
            background: var(--bg-tertiary);
            border-color: var(--accent-primary);
        }

        /* Level-estimate CTA — fills the slot where the personal coverage
           bar will live once the user has progress. Shown only when no
           progress yet AND no prior level estimate for the current
           language. Compact pill-ish card: blurb left, action button right. */
        .level-estimate-cta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin: 16px 0 4px;
            padding: 14px 18px;
            background: rgba(var(--accent-primary-rgb), 0.08);
            border: 1px solid rgba(var(--accent-primary-rgb), 0.35);
            border-radius: 10px;
            font-family: var(--font-reading);
        }

        .level-estimate-cta-content {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }

        .level-estimate-cta-title {
            font-family: var(--font-emphasis);
            font-weight: 700;
            font-size: 15px;
            color: var(--text-primary);
        }

        .level-estimate-cta-desc {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.4;
        }

        .level-estimate-cta-btn {
            flex-shrink: 0;
            padding: 8px 16px;
            background: var(--accent-primary);
            color: var(--accent-primary-text);
            border: 1px solid var(--accent-primary);
            border-radius: 8px;
            font-family: var(--font-emphasis);
            font-weight: 700;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .level-estimate-cta-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.4);
        }

        /* -------- About-modal card demos ---------------------------------- */
        /* Live animated flashcards embedded inline in the About copy. Reuses
           the main app's real class names (.card-word, .card-pos, .sentence,
           .translation, .pos-verb, etc.) so the demo inherits actual
           flashcard typography. Scoped rules below only override SIZE so
           real-card styles fit a 320×440 demo footprint. */

        .about-demo-card {
            /* <div> placeholder the Markdown renderer drops in; JS mounts an
               .about-demo-card-inner child that holds the real .card. */
            margin: 18px auto 32px;
            max-width: 100%;
        }

        .about-demo-card-inner {
            width: 340px;
            max-width: 100%;
            height: 480px;
            margin: 0 auto;
            perspective: 1000px;
            position: relative;
        }

        /* Override the main-app .card sizing (which targets full viewport). */
        .about-demo-card-inner .card {
            width: 100%;
            height: 100%;
            min-height: 0;
            max-height: none;
            position: relative;
        }

        .about-demo-card-inner .card-front {
            justify-content: center;
            padding: 28px 20px;
        }

        .about-demo-card-inner .card-back {
            justify-content: flex-start;
            padding: 22px 18px 20px;
        }

        /* -------- Size overrides for the real card typography ------------- */
        /* The real card-word is 64px built for a viewport-filling card; scale
           to suit the demo. Colours / fonts inherit from the base rules so
           the look stays authentic. */

        .about-demo-card-inner .card-word {
            font-size: 48px;
            margin-bottom: 14px;
        }

        .about-demo-card-inner .card-pos {
            font-size: 11px;
            padding: 5px 12px;
            margin-bottom: 12px;
        }

        .about-demo-card-inner .card-ranking {
            font-size: 14px;
        }

        .about-demo-card-inner .card-details {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 0;
            text-align: center;
        }

        /* Back header — the big repeated word at the top of the back face.
           Matches the inline markup produced by updateCard() at line 1300. */
        .about-demo-card-inner .back-header {
            text-align: center;
            margin-bottom: 12px;
        }

        .about-demo-back-word {
            font-size: 32px;
            color: white;
            font-weight: bold;
            font-family: var(--font-emphasis);
        }

        .about-demo-pos-legend {
            display: flex;
            justify-content: center;
            margin-top: 7px;
        }

        .about-demo-pos-legend .card-pos {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-width: 0;
            margin: 0;
            padding: 4px 8px;
            font-family: var(--font-reading);
            font-size: 11px;
            font-weight: 600;
            line-height: 1;
            text-transform: none;
            background: rgba(255, 255, 255, 0.055);
            border-color: rgba(255, 255, 255, 0.12);
            border-radius: 999px;
        }

        /* Meanings list — part of speech sits once beneath the headword, while
           each row carries only its meaning and optional catalogue share. */
        .about-demo-card-inner .meanings-scroll {
            display: flex;
            flex-direction: column;
            gap: 6px;
            width: 100%;
            margin-bottom: 14px;
        }

        .about-demo-card-inner .meaning-row-regular {
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;
            padding: 9px 14px;
            background: rgba(15, 20, 28, 0.75);
            border-radius: 8px;
            min-height: 40px;
            border: 1px solid transparent;
            transition: background 0.25s, border-color 0.25s;
        }

        .about-demo-card-inner .meaning-row-regular.has-share {
            grid-template-columns: 52px 1fr 52px;
        }

        .about-demo-card-inner .meaning-row-regular.has-share .meaning-row-body {
            grid-column: 2;
        }

        .about-demo-card-inner .meaning-row-regular.is-selected {
            background: rgba(var(--accent-primary-rgb), 0.5);
            border: 2px solid var(--accent-primary);
            padding: 8px 13px;  /* compensate for the thicker border */
        }

        .about-demo-card-inner .meaning-row-body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: 0;
        }

        .about-demo-meaning-share {
            grid-column: 3;
            justify-self: end;
            font-family: var(--font-data);
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary);
            white-space: nowrap;
        }

        .about-demo-card-inner .meaning-row-translation {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
            text-align: center;
            /* Demo glosses are hand-curated and short — don't inherit the
               real card's aggressive word-breaking, which was splitting
               words like "happen" into "happe / n" in a narrow column. */
            overflow-wrap: normal;
            word-break: normal;
        }

        /* Example box — target sentence + English translation together inside
           a single accent-bordered box. Replaces the old split layout (Spanish
           in a box, English loose below it) so the two stay visually bound
           and read as a pair. */
        .about-demo-card-inner .about-demo-example {
            margin-top: 10px;
            padding: 12px 14px;
            background: rgba(var(--accent-primary-rgb), 0.1);
            border: 1px solid var(--accent-primary);
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            text-align: center;
        }

        .about-demo-card-inner .about-demo-example-target {
            font-family: var(--font-reading);
            font-style: italic;
            font-size: 15px;
            color: #fff;
            line-height: 1.4;
        }

        .about-demo-card-inner .about-demo-example-english {
            font-family: var(--font-reading);
            font-size: 13px;
            color: var(--text-secondary);
            font-weight: 500;
            line-height: 1.4;
        }

        /* Pill highlight for the target word inside the example sentence.
           Matches the real app's pill style (flashcards.js:1562). */
        .about-demo-highlight {
            background: rgba(255, 255, 255, 0.15);
            color: white;
            font-weight: 700;
            padding: 1px 5px;
            border-radius: 4px;
        }

        /* Spotify row at the bottom of the artist-mode back face.
           Song/artist text on the left, Spotify-green logo on the right.
           Hidden on normal-mode cards (JS sets display: none). */
        .about-demo-spotify-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .about-demo-song-back {
            font-family: var(--font-data);
            font-size: 11px;
            color: var(--text-muted);
            letter-spacing: 1.2px;
            text-transform: uppercase;
            opacity: 0.85;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
            text-align: left;
        }

        .about-demo-spotify-mark {
            display: inline-flex;
            align-items: flex-start;
            gap: 1px;
            flex-shrink: 0;
        }

        .about-demo-spotify-logo {
            width: 18px;
            height: 18px;
            fill: #1DB954;
            flex-shrink: 0;
        }

        .about-demo-footnote-ref {
            font-family: var(--font-data);
            font-size: 10px;
            font-weight: 700;
            color: var(--text-muted);
            cursor: pointer;
            text-decoration: none;
            line-height: 1;
            padding: 0 2px;
            border-radius: 2px;
            transition: color 0.15s, background 0.15s;
        }

        .about-demo-footnote-ref:hover,
        .about-demo-footnote-ref:focus-visible {
            color: var(--accent-primary);
            background: rgba(var(--accent-primary-rgb), 0.15);
            outline: none;
        }

        /* Footnote section at the bottom of the About body. Small, muted,
           sets itself off with a top rule so it reads as end-matter
           distinct from the main copy and the CTAs below it. */
        .about-footnotes {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid var(--border-color);
            font-family: var(--font-reading);
            font-size: 13px;
            line-height: 1.6;
            color: var(--text-muted);
            max-width: 760px;
        }

        .about-footnotes p {
            margin: 0 0 10px;
        }

        .about-footnote-number {
            font-weight: 700;
            color: var(--text-secondary);
            margin-right: 2px;
        }

        /* -------- Side-by-side "Two modes" layout ------------------------- */
        /* Optimised for desktop (Josh's explicit direction). On narrow
           viewports it collapses to a single column. */

        .about-modes-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: 32px;
            margin: 12px 0 32px;
        }

        @media (min-width: 900px) {
            .about-modes-row {
                grid-template-columns: 1fr 1fr;
                gap: 48px;
            }
        }

        .about-modes-column {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .about-modes-column > h3 {
            margin-top: 0;
            margin-bottom: 14px;
        }

        /* Card sits directly under the h3 inside its column. Text paragraphs
           follow below so the cards appear above the fold on desktop. */
        .about-modes-column .about-demo-card {
            margin: 0 0 18px;
        }

        .about-modes-column p {
            margin: 0 0 12px;
        }

        /* User Display */
        .user-info {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 18px;
            background: var(--bg-card);
            padding: 15px 40px;
            border-radius: 33px;
            border: 1px solid var(--border-color);
            font-family: var(--font-emphasis);
            font-size: 19px;
            z-index: 100;
        }

        .user-badge {
            color: var(--text-primary);
            font-weight: 700;
            letter-spacing: 1px;
            font-size: 20px;
        }

        .logout-btn {
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            padding: 8px 20px;
            border-radius: 16px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            font-family: var(--font-reading);
        }

        .logout-btn:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border-color: var(--accent-primary);
        }

        .floating-btns {
            display: none;
            gap: 10px;
            margin-right: 12px;
            align-items: center;
        }

        .floating-btns.visible {
            display: flex !important;
        }

        #floatingBtns > .gear-btn:not(#studyMenuBtn) {
            display: none;
        }

        .study-menu-btn {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-tertiary));
            border: 1px solid color-mix(in srgb, var(--accent-primary) 45%, var(--border-color));
        }

        .personal-progress-header > .personal-progress-title,
        .personal-progress-header > .personal-progress-info {
            display: none !important;
        }

        .personal-coverage-wrapper {
            cursor: default;
        }

        .personal-coverage-wrapper:not(.personal-coverage-wrapper--merged) .personal-progress-header {
            display: contents;
        }
        .personal-progress-header > .progress-info-btn {
            display: inline-flex !important;
            position: absolute;
            top: 8px;
            right: 8px;
            z-index: 2;
        }
        .personal-coverage-wrapper--merged .personal-progress-header > .progress-info-btn {
            position: static;
            order: 3;
            margin-left: 2px;
        }

        .gear-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            padding: 10px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .gear-btn:hover {
            color: var(--accent-primary);
        }

        .gear-btn svg {
            width: 29px;
            height: 29px;
        }

        /* Desktop: vertical sidebar on right edge */
        @media (min-width: 768px) {
            .user-info {
                top: 50%;
                right: 20px;
                left: auto;
                transform: translateY(-50%);
                flex-direction: column;
                padding: 20px 15px;
                border-radius: 16px;
            }

            .floating-btns {
                flex-direction: column;
                margin-right: 0;
            }
        }

        @media (max-width: 767px) {
            .user-info {
                top: 10px;
                padding: 10px 16px;
                font-size: 17px;
                gap: 12px;
                background: transparent;
                border: none;
            }

            .user-badge {
                font-size: 18px;
            }

            .logout-btn {
                padding: 6px 16px;
                font-size: 13px;
            }

            .gear-btn {
                padding: 8px;
            }

            .gear-btn svg {
                width: 24px;
                height: 24px;
            }

            .floating-btns,
            .floating-btns.visible {
                display: none !important;
            }

            /* Mobile banner buttons (back, gear) match the 64x64 footprint of
               the arrow buttons (.nav-btn-inline). SVG sized to 48px so the
               icons match the visual weight of the 48px arrow glyphs.
               Specificity matches .gear-btn so source order wins; keep these
               AFTER the .gear-btn rule above. */
            .nav-row-icon {
                padding: 8px;
                width: 54px;
                height: 54px;
                box-sizing: border-box;
                color: rgba(255, 255, 255, 0.8);
            }

            .nav-row-icon svg {
                width: 38px;
                height: 38px;
            }
        }

        @media (min-width: 768px) {
            .nav-row-icon-group {
                display: none !important;
            }
        }

        @media (max-width: 767px) {
            .card-container {
                min-height: 100vh;
                padding: 74px 0 44px;
                align-items: flex-start;
            }

            .card-container::before {
                height: calc(100vh - 80px);
                max-height: none;
                top: 52px;
                transform: none;
            }

            .card {
                height: calc(100vh - 118px);
                min-height: 460px;
                max-height: none;
            }

            /* Hide prev/next arrows in mobile banner when on an off-deck card */
            .card.is-stacked .mobile-nav-row .nav-btn-inline {
                visibility: hidden;
                pointer-events: none;
            }

            /* Mobile-specific positioning only — shared layout/appearance
               rules for .card-back-scrubber and its children live in the
               base stylesheet now, shared with desktop. Fills the entire
               reserved strip above the card (.card-container's 74px top
               padding) edge to edge, instead of floating as a smaller,
               inset pill within it. */
            .card-back-scrubber {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 74px;
                pointer-events: auto;
            }

            .card-word {
                font-size: 54px;
            }

            .action-btn {
                font-size: 38px;
            }

            /* Mobile card front layout adjustments */
            /* Navigation and Study options now live in the rail above the
               card, so mobile no longer reserves a toolbar inside each face. */
            .mobile-nav-row {
                display: none !important;
            }
            .mobile-nav-row > .nav-btn-inline,
            .mobile-nav-row .banner-center > [id^="backBtn"] {
                display: none !important;
            }
            .desktop-nav-row {
                display: none !important;
            }
        }

        @media (min-width: 768px) {
            .mobile-nav-row {
                display: none !important;
            }
            .desktop-nav-row {
                display: flex !important;
            }
            /* Hide nav arrows moved outside the card on desktop */
            .desktop-front-nav-hidden,
            .desktop-back-nav-hidden {
                display: none !important;
            }
            /* The gear popup is mobile-only — never visible on desktop. */
            .card-actions-popup,
            .card-actions-popup.visible {
                display: none !important;
            }
        }

        /* Floating actions popup that drops down from the top-banner gear on
           mobile. Hidden by default; .visible swaps display to flex. Tap any
           inner button to trigger its action AND dismiss; tap outside to
           dismiss (handled by document click listener in flashcards.js).
           position: fixed keeps the popup out of the card's preserve-3d
           context, avoiding z-fighting and axis-reversal issues on the back
           face. top: 84px = 12px card-container padding + 72px banner height,
           so the popup sits directly beneath the gear button. */
        .card-actions-popup {
            display: none;
            position: fixed;
            top: 124px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            pointer-events: auto;
            background: var(--bg-card-hover);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 12px 14px;
            gap: 14px;
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
            align-items: center;
        }
        .card-actions-popup.visible {
            display: flex;
        }

        /* Small pill button style (like logout) */
        .card-btn-pill {
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
            font-family: var(--font-reading);
        }

        .card-btn-pill:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border-color: var(--accent-primary);
        }

        .card-btn-pill svg {
            width: 14px;
            height: 14px;
            vertical-align: middle;
        }

        /* Bad Bunny mode album artwork backgrounds */
        body.artist-mode .card-face {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        body.artist-mode .card-face::after {
            content: '';
            position: absolute;
            inset: 0;
            /* Higher alpha = more opaque overlay = artist album artwork
               shows through less. Keeps it as an atmospheric cue without
               competing with the text. */
            background: rgba(30, 39, 50, 0.9);
            border-radius: 16px;
            z-index: 0;
        }

        /* Lift the face's own children above the ::after artwork overlay.
           This used to be a blanket `position: relative`, which silently
           reverted every child that positions itself absolutely: the POS pill
           left the top-right corner and fell back into flow at the bottom of
           the card, in lyrics mode only. Elements that own their positioning
           are excluded and get their stacking order below instead. */
        body.artist-mode .card-face > *:not(.card-pos-list):not(.card-ranking):not(.front-production-hint):not(.card-tint):not(.stacked-exit-btn) {
            position: relative;
            z-index: 1;
        }

        body.artist-mode .card-face > div[style*="position: absolute"] {
            z-index: 5;
        }

        /* Absolutely positioned by their own rules — only the layer they sit
           on needs restating here. .card-tint keeps its own z-index: 50. */
        body.artist-mode .card-pos-list,
        body.artist-mode .card-ranking,
        body.artist-mode .front-production-hint,
        body.artist-mode .stacked-exit-btn {
            z-index: 5;
        }

        /* Find-word modal */
        .find-word-body {
            padding: 16px 20px 20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .find-word-input {
            width: 100%;
            box-sizing: border-box;
            padding: 10px 14px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 16px;
            font-family: var(--font-emphasis);
            outline: none;
            transition: border-color 0.15s ease;
        }

        .find-word-input:focus {
            border-color: var(--accent-primary);
        }

        .find-word-status {
            color: var(--text-muted);
            font-size: 13px;
            min-height: 16px;
        }

        .find-word-results {
            display: flex;
            flex-direction: column;
            gap: 6px;
            max-height: 50vh;
            overflow-y: auto;
        }

        .find-word-result {
            display: flex;
            align-items: baseline;
            gap: 10px;
            padding: 10px 12px;
            background: var(--bg-tertiary);
            border: 1px solid transparent;
            border-radius: 8px;
            cursor: pointer;
            text-align: left;
            color: var(--text-primary);
            font-size: 14px;
            transition: background 0.12s ease, border-color 0.12s ease;
        }

        .find-word-result:hover {
            background: var(--bg-card-hover);
            border-color: var(--accent-primary);
        }

        .find-word-result .fw-word {
            font-weight: 600;
            color: var(--text-primary);
            font-family: var(--font-emphasis);
        }

        .find-word-result .fw-lemma {
            color: var(--text-muted);
            font-size: 12px;
            font-style: italic;
        }

        .find-word-result .fw-meaning {
            color: var(--text-secondary);
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .find-word-result .fw-rank {
            color: var(--text-muted);
            font-size: 12px;
            font-family: var(--font-mono, monospace);
            flex-shrink: 0;
        }
        .find-word-result .fw-status {
            flex-shrink: 0;
            padding: 3px 7px;
            border: 1px solid var(--border-color);
            border-radius: 999px;
            color: var(--text-muted);
            font-family: var(--font-emphasis);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.02em;
        }
        .find-word-result .fw-status--excluded {
            border-color: color-mix(in srgb, var(--accent-secondary) 34%, var(--border-color));
            color: var(--accent-secondary);
        }

        /* Whether the card is done. Same pill geometry as .fw-status so the two
           line up, but filled rather than outlined — this is the thing being
           looked up, not a footnote about it. */
        .find-word-result .fw-done {
            flex-shrink: 0;
            padding: 3px 7px;
            border-radius: 999px;
            font-family: var(--font-emphasis);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.02em;
            white-space: nowrap;
        }
        .find-word-result .fw-done--unseen {
            color: var(--text-muted);
            border: 1px solid var(--border-color);
        }
        .find-word-result .fw-done--known {
            color: var(--success);
            background: color-mix(in srgb, var(--success) 14%, transparent);
            border: 1px solid color-mix(in srgb, var(--success) 38%, transparent);
        }
        .find-word-result .fw-done--due {
            color: var(--warning);
            background: color-mix(in srgb, var(--warning) 14%, transparent);
            border: 1px solid color-mix(in srgb, var(--warning) 38%, transparent);
        }
        .find-word-result .fw-done--review {
            color: var(--error);
            background: color-mix(in srgb, var(--error) 14%, transparent);
            border: 1px solid color-mix(in srgb, var(--error) 38%, transparent);
        }

/* Data freshness in the JST-only App data tab (see trackDataFreshness in
   vocab.js). Diagnostic for service-worker staleness. */
.data-freshness-footer {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color, rgba(128, 128, 128, 0.2));
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
}
.data-freshness-footer:empty {
    display: none;
}

/* JST-only dev detail under the freshness footer (renderDevFooter in ui.js). */
.dev-footer-detail {
    margin-top: 8px;
    text-align: left;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
}
.dev-footer-label {
    margin-top: 6px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.04em;
}
.dev-footer-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-mono, monospace);
}
.dev-footer-row span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dev-footer-entry { margin-top: 3px; }
.dev-footer-commit { opacity: 0.6; }
.dev-footer-bullet { padding-left: 10px; }

.sense-prominence-label {
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    padding: 3px 6px;
    border: 1px solid color-mix(in srgb, var(--accent-green) 38%, var(--border-color));
    border-radius: 999px;
    color: #66e4cc;
    background: color-mix(in srgb, var(--accent-green) 10%, transparent);
    font-family: var(--font-data);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}
.sense-prominence-label.occasional {
    border-color: color-mix(in srgb, var(--warning) 42%, var(--border-color));
    color: #f9c96e;
    background: color-mix(in srgb, var(--warning) 9%, transparent);
}

/* ===========================================================================
   About → "See Example": annotated card walkthrough
   ===========================================================================
   The card inside .about-example-stage is built by js/about-example.js from
   the app's own class names, so almost everything it looks like is inherited
   from the real flashcard rules further up this file. The rules below cover
   only three things: the entry button in the About copy, the modal chrome
   around the card, and the SIZE overrides that make a viewport-scale .card
   sit inside a fixed stage. Nothing here restyles the card itself — if it
   did, the walkthrough would stop being a replica the moment the real card
   changed. */

/* -------- Entry button in the About copy --------------------------------- */

.about-see-example-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 460px;
    margin: 22px auto 26px;
    padding: 14px 20px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-primary) 16%, var(--bg-card)),
        var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--accent-primary) 40%, var(--border-color));
    border-radius: 14px;
    color: var(--text-primary);
    font-family: var(--font-emphasis);
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.about-see-example-btn:hover,
.about-see-example-btn:focus-visible {
    transform: translateY(-1px);
    border-color: var(--accent-primary);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}

.about-see-example-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: var(--accent-primary-text);
    font-size: 13px;
    /* The glyph's own bearing sits it left of centre in a circle. */
    padding-left: 2px;
}

.about-see-example-label {
    flex: 1 1 auto;
    font-size: 17px;
    font-weight: 700;
}

.about-see-example-hint {
    flex: 0 0 100%;
    order: 3;
    color: var(--text-muted);
    font-family: var(--font-reading);
    font-size: 12px;
    padding-left: 46px;
    margin-top: -6px;
}

/* -------- Modal chrome ---------------------------------------------------- */

/* Full-bleed, like .about-project-modal — this opens on top of the About
   modal, so it has to cover it rather than sit in a card on top of it.
   Scrolling belongs to .about-example-body: the header and step footer stay
   pinned while the card and its notes scroll between them. */
.about-example-modal {
    display: flex;
    flex-direction: column;
    max-width: none;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border: none;
    border-radius: 0;
    background: var(--bg-primary);
    padding: 0;
    overflow: hidden;
}

/* Chapter progress | summary | exit, on one line. The compact header leaves
   the card and its annotations as much vertical room as possible. */
.about-example-topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    margin-bottom: 14px;
}

.about-example-close {
    position: static;
    flex: 0 0 auto;
    justify-self: end;
}

.about-example-body {
    flex: 1 1 auto;
    padding: 16px 24px 26px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Face copy sits above the card, centred, because it describes the whole
   face rather than either column of notes. */
.about-example-intro {
    min-width: 0;
    text-align: center;
}

/* Card centred with a column of notes either side. The side columns are
   equal-width so the card lands on the real centre line of the modal, not
   wherever the longer column pushes it. */
.about-example-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 30px;
    align-items: start;
    justify-content: center;
    max-width: 1500px;
    margin: 0 auto;
}

.about-example-stage-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* The stage is the positioning context for the numbered badges, which are
   placed from measured element boxes rather than fixed offsets. */
.about-example-stage-wrap {
    position: relative;
    justify-self: center;
}

.about-example-stage {
    position: relative;
}

.about-example-markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 20;
}

/* -------- Size overrides so a viewport-scale .card fits the stage --------- */

.about-example-card-inner {
    width: 420px;
    max-width: 100%;
    height: 510px;
    perspective: 1200px;
    position: relative;
}

.about-example-card-inner .card {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    position: relative;
    cursor: pointer;
    /* The live card sets touch-action: none for swipe grading. There is no
       swipe here, and inheriting it would eat page scrolling on a phone,
       where the card covers most of the screen. */
    touch-action: auto;
}

.about-example-card-inner .card-front {
    justify-content: center;
    padding: 30px 22px;
}

.about-example-card-inner .card-back {
    justify-content: flex-start;
    padding: 24px 18px 20px;
}

.about-example-card-inner .card-word {
    font-size: 50px;
}

/* The back's flex column, its scroll region and its sentence row are shared
   with the live card via the widened `#backContent, .about-example-card-inner
   .card-details` selectors above — nothing about that layout is restated here.

   The replica has no `.links-section`, the row that normally carries
   `margin-top: auto` and pushes everything below the senses to the foot of the
   card. That job is deliberately NOT reassigned to the sentence: on a live card
   the gap is filled by the links row, but here it would be empty space holding
   the lyric away from the meaning it belongs to. The lyric is evidence for the
   selected sense, so it reads directly beneath it and the slack falls to the
   bottom of the card instead. */

/* Live cards leave the ranking pinned to the card's lower edge; keep that,
   but stop it colliding with the flip hint below it. */
.about-example-card-inner .card-ranking {
    bottom: 46px;
}

.about-example-flip-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
    animation: about-example-hint-pulse 2.4s ease-in-out infinite;
}

@keyframes about-example-hint-pulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.9; }
}

/* -------- Numbered badges and the elements they point at ----------------- */

.about-example-marker {
    position: absolute;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--bg-primary);
    background: var(--accent-blue);
    color: #06121f;
    font-family: var(--font-data);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    transition: transform 0.15s ease, background 0.15s ease;
}

.about-example-marker.is-active {
    transform: scale(1.25);
    background: var(--accent-amber);
}

/* Set by placeMarkers() from the note's `side`. The offset itself is applied
   inline (it depends on the measured box); these exist so the badge can be
   styled per side if it ever needs to be, and so the DOM says which column a
   badge belongs to. */
.about-example-marker.is-left,
.about-example-marker.is-right {
    z-index: 21;
}

/* Ring the annotated element itself. outline (not border) so no card element
   changes size when it lights up. */
.about-example-anchored.is-annotation-active {
    outline: 2px solid var(--accent-amber);
    outline-offset: 3px;
    border-radius: 6px;
}

/* -------- Notes column ---------------------------------------------------- */

.about-example-notes {
    min-width: 0;
    max-width: 420px;
    color: var(--text-secondary);
}

/* Hug the card: the left column's notes sit against their badges on the
   card's left edge, the right column's against its right edge. */
.about-example-notes-left {
    justify-self: end;
}

.about-example-notes-right {
    justify-self: start;
}

.about-example-lede {
    font-family: var(--font-emphasis);
    color: var(--text-primary);
    font-weight: 700;
}

/* The em dash is punctuation between lede and summary, so it belongs to the
   stylesheet rather than to the copy — the strings stay clean sentences. */
.about-example-lede::after {
    content: " —";
    color: var(--text-muted);
    font-weight: 400;
}

.about-example-blurb {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

.about-example-note-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.about-example-note {
    display: flex;
    gap: 12px;
    padding: 11px 13px;
    background: var(--bg-secondary);
    border: 1px solid transparent;
    border-radius: 10px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.about-example-note.is-active {
    background: var(--bg-tertiary);
    border-color: var(--accent-amber);
}

.about-example-note-num {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #06121f;
    font-family: var(--font-data);
    font-size: 12px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.about-example-note.is-active .about-example-note-num {
    background: var(--accent-amber);
}

.about-example-note strong {
    display: block;
    color: var(--text-primary);
    font-size: 15px;
    margin-bottom: 3px;
}

.about-example-note span:not(.about-example-note-num):not(.about-example-try) {
    display: block;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-muted);
}

.about-example-try {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-green) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-green) 45%, transparent);
    color: var(--accent-green);
    font-family: var(--font-data);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* -------- Tutorial progress and controls -------------------------------- */
.about-example-sequence {
    display: grid;
    gap: 1px;
    min-width: 74px;
    font-family: var(--font-emphasis);
}

.about-example-sequence strong {
    color: var(--text-primary);
    font-size: 14px;
}

.about-example-sequence span {
    color: var(--text-muted);
    font: 700 9px/1.2 var(--font-data);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about-example-flip,
.about-example-continue {
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-emphasis);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.about-example-flip:hover,
.about-example-continue:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-muted);
}

.about-example-continue {
    margin-top: 8px;
    border-color: transparent;
    background: var(--accent-primary);
    color: var(--accent-primary-text);
}

.about-example-mobile-coach {
    display: none;
}

/* -------- Narrow viewports ------------------------------------------------ */
/* Stack the card above its notes. The badges stay anchored because they are
   positioned from measured boxes and re-placed on resize. */

@media (max-width: 1180px) {
    /* Card first, then both note columns stacked beneath it. Badges stay
       anchored because they are positioned from measured boxes and re-placed
       on resize. */
    .about-example-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        justify-items: center;
    }

    .about-example-stage-col {
        order: -1;
    }

    .about-example-notes,
    .about-example-notes-left,
    .about-example-notes-right {
        justify-self: center;
        max-width: 560px;
        width: 100%;
    }

    /* Two stacked <ol>s would restart the visual rhythm; keeping them
       adjacent with no gap reads as one continuous list. */
    .about-example-notes-left .about-example-note-list {
        padding-bottom: 0;
    }
}

@media (max-width: 560px) {
    .about-example-body {
        padding: 16px 12px 24px;
    }

    /* Three cells will not fit across a phone. Controls keep the top line,
       the summary drops beneath them and spans the full width — still one
       block of chrome, just folded. */
    .about-example-topbar {
        grid-template-columns: auto auto;
        justify-content: space-between;
        gap: 10px 12px;
    }

    .about-example-topbar .about-example-sequence { grid-area: 1 / 1; }
    .about-example-topbar .about-example-close { grid-area: 1 / 2; }
    .about-example-topbar .about-example-intro { grid-area: 2 / 1 / 3 / 3; }

    .about-example-card-inner {
        width: 340px;
        height: 512px;
    }

    .about-example-blurb {
        font-size: 13.5px;
    }
}

@media (max-width: 700px) {
    .about-example-body {
        padding-bottom: 210px;
    }

    .about-example-notes {
        display: none;
    }

    .about-example-marker {
        display: none;
    }

    .about-example-marker.is-active {
        display: grid;
        animation: about-example-mobile-target 1.4s ease-in-out infinite;
    }

    .about-example-anchored.is-annotation-active {
        outline-width: 3px;
        box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent-amber) 18%, transparent);
        animation: about-example-mobile-spotlight 280ms ease-out;
    }

    .about-example-mobile-coach:not([hidden]) {
        position: fixed;
        z-index: 40;
        left: 10px;
        right: 10px;
        bottom: max(10px, env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 5px 12px;
        padding: 14px;
        border: 1px solid color-mix(in srgb, var(--accent-primary) 40%, var(--border-color));
        border-radius: 16px;
        background: color-mix(in srgb, var(--bg-card) 96%, transparent);
        box-shadow: 0 18px 55px rgba(0, 0, 0, 0.48);
        backdrop-filter: blur(18px);
        animation: about-example-mobile-coach-in 260ms ease-out;
    }

    .about-example-mobile-progress {
        grid-column: 1 / -1;
        color: var(--accent-amber);
        font-family: var(--font-data);
        font-size: 10px;
        font-weight: 750;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .about-example-mobile-coach > strong {
        align-self: center;
        color: var(--text-primary);
        font-family: var(--font-emphasis);
        font-size: 16px;
    }

    .about-example-mobile-coach > p {
        grid-column: 1 / -1;
        margin: 0;
        color: var(--text-secondary);
        font-size: 13px;
        line-height: 1.42;
    }

    .about-example-mobile-actions {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        gap: 7px;
    }

    .about-example-mobile-actions button {
        min-width: 64px;
        padding: 8px 11px;
        border: 1px solid var(--border-light);
        border-radius: 999px;
        background: transparent;
        color: var(--text-secondary);
        font: 650 12px/1 var(--font-emphasis);
    }

    .about-example-mobile-actions button:last-child {
        border-color: transparent;
        background: var(--accent-primary);
        color: var(--accent-primary-text);
    }

    .about-example-mobile-actions button:disabled {
        opacity: 0.35;
    }
}

@keyframes about-example-mobile-target {
    0%, 100% { transform: scale(1.12); }
    50% { transform: scale(1.32); }
}

@keyframes about-example-mobile-spotlight {
    from { box-shadow: 0 0 0 18px transparent; }
}

@keyframes about-example-mobile-coach-in {
    from { opacity: 0; transform: translateY(18px); }
}

@media (prefers-reduced-motion: reduce) {
    .about-example-marker.is-active,
    .about-example-anchored.is-annotation-active,
    .about-example-mobile-coach:not([hidden]) {
        animation: none;
    }
}

/* Provenance panel: confidence + the sentences a sense was assigned to.
   The panel itself already scrolls (absolute, inset 0, overflow-y:auto above);
   only momentum scrolling is added here so the longer content drags on iOS. */
.provenance-panel { -webkit-overflow-scrolling: touch; }
.prov-conf { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
  margin: 4px 0 2px; font-size: 11px; }
.prov-conf-band { text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; }
.prov-conf--high .prov-conf-band { background: rgba(31,107,74,.16); color: #1f6b4a; }
.prov-conf--medium .prov-conf-band { background: rgba(154,91,18,.16); color: #9a5b12; }
.prov-conf--low .prov-conf-band { background: rgba(194,47,74,.14); color: #c22f4a; }
.prov-conf-val { font-variant-numeric: tabular-nums; opacity: .85; }
.prov-conf-note { opacity: .6; }
.prov-examples { margin: 6px 0 2px; display: flex; flex-direction: column; gap: 6px; }
.prov-examples--empty { font-size: 11px; opacity: .55; font-style: italic; }
.prov-ex { border-left: 2px solid currentColor; padding-left: 8px; opacity: .95; }
.prov-ex-target { font-size: 12.5px; }
.prov-ex-english { font-size: 11.5px; opacity: .7; }
.prov-ex-meta { font-size: 10.5px; opacity: .6; display: flex; gap: 8px; margin-top: 2px; }
.prov-ex-src { text-decoration: underline; }
.prov-ex-align { font-variant-numeric: tabular-nums; }
.prov-ex-record { border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 8px; overflow: hidden; }
.prov-ex-record > summary { cursor: pointer; padding: 7px 9px; font-size: 11px; font-weight: 700; }
.prov-ex-record > .prov-ex { margin: 0 9px 9px; }
.prov-ex-fields { margin: 7px 0 0; display: grid; gap: 4px; }
.prov-ex-field { display: grid; grid-template-columns: minmax(84px, .7fr) minmax(0, 2fr); gap: 7px; font-size: 10px; }
.prov-ex-field dt { opacity: .58; }
.prov-ex-field dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.prov-ex-field code { font-size: 9.5px; white-space: normal; }
.prov-ex-raw { margin-top: 7px; font-size: 10px; }
.prov-ex-raw summary { cursor: pointer; opacity: .72; }
.prov-ex-raw pre { max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 9px; }
@media (prefers-color-scheme: dark) {
  .prov-conf--high .prov-conf-band { background: rgba(95,211,154,.16); color: #5fd39a; }
  .prov-conf--medium .prov-conf-band { background: rgba(226,165,99,.16); color: #e2a563; }
  .prov-conf--low .prov-conf-band { background: rgba(255,122,144,.16); color: #ff7a90; }
}

/* ── Fast mode row + page ─────────────────────────────────────────────────
   One row under the level picker: the toggle, what it currently does, and the
   way through to the page that explains it. Everything it bundles lives on
   that page rather than competing with the level picker for attention. */
.setup-options {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}
.setup-options-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
}
.fast-mode-master {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 52px;
  padding: 8px 11px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.fast-mode-master-icon { color: var(--accent-primary); font-size: 16px; }
.fast-mode-master-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.fast-mode-master-copy strong { font: 700 13px/1.2 var(--font-emphasis); }
.fast-mode-master-copy small { color: var(--text-muted); font: 500 11px/1.2 var(--font-reading); }
.fast-mode-master-switch {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--border-light);
  transition: background .18s ease;
}
.fast-mode-master-switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-primary);
  transition: transform .18s ease;
}
.fast-mode-master.selected .fast-mode-master-switch { background: var(--accent-primary); }
.fast-mode-master.selected .fast-mode-master-switch i { transform: translateX(14px); background: #10141b; }
.fast-mode-master.is-custom .fast-mode-master-switch { background: color-mix(in srgb, var(--accent-primary) 50%, var(--border-light)); }
.fast-mode-summary {
  flex: 1 1 140px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.85;
}
.fast-mode-detail-btn {
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}
.fast-mode-detail-btn:hover {
  color: var(--text-secondary);
  border-color: var(--border-light);
  background: var(--bg-card-hover);
}
.fast-mode-detail-btn:focus-visible,
.fast-mode-btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* The page. Reads as a document rather than a settings sheet, because the
   point is to explain the trade before offering the controls. */
.fast-mode-page-body {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}
.fast-mode-page-body h2 {
  font-family: var(--font-emphasis);
  font-size: 26px;
  margin: 0 0 10px;
  color: var(--text-primary, var(--text-secondary));
}
.fast-mode-lede {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}
.fast-mode-controls {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.fast-mode-controls .setup-substep {
  margin-top: 0;
  padding-top: 18px;
}
.fast-mode-explainer {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  opacity: 0.9;
}
.fast-mode-note {
  margin: 26px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  opacity: 0.8;
}
.fast-mode-close { position: absolute; top: 18px; right: 20px; z-index: 1; }

/* A page, not a dialogue. The explanation is the point, so it gets the whole
   screen rather than a card floating over the setup panel the learner is
   trying to understand. `.fullscreen-modal` caps at 600px for the other
   walkthroughs; this overrides that deliberately. */
.fast-mode-page {
  --accent-primary: #8795ff;
  --accent-primary-rgb: 135, 149, 255;
  --accent-primary-text: #10141b;
  max-width: none;
  width: 100%;
  min-height: 100%;
  max-height: none;
  border-radius: 0;
  margin: 0;
  background: var(--bg-primary, var(--bg-card));
  overflow-y: auto;
}
#fastModeModal .substep-title {
  color: var(--text-secondary);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
#fastModeModal.modal { padding: 0; align-items: stretch; justify-content: stretch; }

.extras-btn {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: none;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.extras-btn:hover {
  color: var(--text-secondary);
  border-color: var(--border-light);
  background: var(--bg-card-hover);
}
.extras-btn:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}

.extras-body {
  padding: 4px 20px 20px;
  max-height: 62vh;
  overflow-y: auto;
}
.extras-section + .extras-section { margin-top: 22px; }
.extras-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.extras-body h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-family: var(--font-emphasis);
  font-size: 13px;
  color: var(--text-secondary);
}
.extras-restore {
  flex: none;
  padding: 5px 8px;
  border: 0;
  border-radius: 7px;
  background: rgba(var(--accent-primary-rgb), .12);
  color: var(--accent-primary);
  font: 650 10px/1.2 var(--font-reading);
  cursor: pointer;
}
.extras-restore:hover { background: rgba(var(--accent-primary-rgb), .2); }
.extras-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
.extras-blurb {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.extras-list { margin: 0; padding: 0; list-style: none; }
.extras-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
}
.extras-row:last-child { border-bottom: 0; }
.extras-word { font-weight: 600; color: var(--text-secondary); }
.extras-translation {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.extras-note { font-size: 11px; color: var(--text-muted); opacity: 0.8; text-align: right; }
.extras-note strong { color: var(--text-secondary); font-weight: 600; }
.extras-empty { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.55; }
@media (max-width: 520px) {
  .extras-row { grid-template-columns: minmax(0, 1fr) auto; }
  .extras-translation { grid-column: 1 / -1; white-space: normal; }
}
.extras-score { font-variant-numeric: tabular-nums; }

/* Known-language picker: multi-select, unlike the two-state toggles beside it,
   so it reads as a set of chips rather than a pair of alternatives. */
.known-languages-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: none;
  padding: 0;
}
.known-language-btn {
  padding: 5px 12px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: none;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.known-language-btn:hover {
  color: var(--text-secondary);
  border-color: var(--border-light);
}
.known-language-btn.selected {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--accent-primary-text);
}
.known-language-btn:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}
.known-languages-note { display: block; opacity: 0.75; }

/* Fast mode's two states borrow the toggle look used by every other on/off
   pair in setup. When the parts are set individually neither reads as
   selected, and the summary beside them says so. */
.fast-mode-btn:not(.fast-mode-master) {
  flex: 1;
  padding: 7px 14px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
}
.fast-mode-btn:not(.fast-mode-master).selected {
  background: var(--accent-primary);
  color: var(--accent-primary-text);
}
.fast-mode-btn:not(.fast-mode-master):not(.selected):hover { color: var(--text-secondary); }

/* The level-percentage switch shares the fast-mode page's control styling. */
.coverage-mode-btn {
  flex: 1;
  padding: 7px 12px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
}
.coverage-mode-btn.selected {
  background: var(--accent-primary);
  color: var(--accent-primary-text);
}
.coverage-mode-btn:not(.selected):hover { color: var(--text-secondary); }
.coverage-mode-btn:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* ── Step 1 once a source is chosen ───────────────────────────────────────
   Before you pick, the card teaches: it names the language, offers "Choose
   another language", labels the pair of buttons "Learn from", and describes
   each of them. All of that earns its space once.

   Afterwards it says the same two facts five times — the header eyebrow
   already reads "Learning from speech", the arrow already means the language
   is tappable, and the descriptions describe a choice you have made. On a
   phone that pushed Choose level below the fold, so the first thing a
   returning learner sees is a decision they already took.

   Collapsed by :has() on the selection class the buttons already carry, so
   there is no second piece of state to keep in step, and a first run — where
   nothing is selected — keeps the full explanation. */
.standard-source-card:has(.standard-source-choice-btn.is-selected) .standard-source-choice-title,
.standard-source-card:has(.standard-source-choice-btn.is-selected) .standard-source-choice-btn small,
.standard-source-card:has(.standard-source-choice-btn.is-selected) .artist-source-copy > span:last-child {
  display: none;
}
.standard-source-card:has(.standard-source-choice-btn.is-selected) .standard-source-choice {
  padding: 7px 7px 6px;
  gap: 0;
}
.standard-source-card:has(.standard-source-choice-btn.is-selected) .standard-source-choice-btn {
  min-height: 0;
  padding: 7px 10px;
  border-radius: 8px;
}
/* The name carries the row on its own once the subtitle is gone. */
.standard-source-card:has(.standard-source-choice-btn.is-selected) .artist-source-picker {
  padding-top: 8px;
  padding-bottom: 8px;
}
.standard-source-card:has(.standard-source-choice-btn.is-selected) .artist-source-copy {
  display: block;
}

/* Once chosen, the two source buttons are one line of text each, so they fit
   side by side even on a phone — where the mobile rule stacks them because
   the uncollapsed version carries a description under each name. */
.standard-source-card:has(.standard-source-choice-btn.is-selected) .standard-source-choice-buttons {
  grid-template-columns: 1fr 1fr;
}
/* "Language" sitting above "Czech" says the same thing twice, so the word goes
   and the eyebrow above it stays — it is the only place the mode is named in
   words. They are one element: the eyebrow is #step1Title::before, so hiding
   the element took the eyebrow with it and left a bare step number over dead
   space. Zeroing the element's own type and restoring it on the pseudo-element
   drops the text without touching what is generated. */
#step1:has(.standard-source-choice-btn.is-selected) #step1Title {
  font-size: 0;
  line-height: 0;
}
#step1:has(.standard-source-choice-btn.is-selected) #step1Title::before {
  font-size: 10px;
  line-height: 1.2;
}

/* A chosen language/source becomes persistent context in the top bar. The
   setup panel can then lead with the next real decision: level and set. */
#step1.context-ready { display: none !important; }
.has-learning-context #step2 .step-number,
.has-learning-context #step4 .step-number { display: none; }

.learning-context-chip {
  display: grid;
  grid-template-columns: auto minmax(0, auto) auto;
  align-items: center;
  gap: 7px;
  max-width: 230px;
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-tertiary) 80%, transparent);
  color: var(--text-primary);
  cursor: pointer;
}
.learning-context-chip[hidden] { display: none; }
.learning-context-flag { font-size: 18px; line-height: 1; }
.learning-context-chip-copy { min-width: 0; text-align: left; line-height: 1.1; }
.learning-context-chip-copy strong { overflow: hidden; font: 700 13px var(--font-emphasis); text-overflow: ellipsis; white-space: nowrap; }
.learning-context-chevron { color: var(--text-muted); font-size: 17px; }

.learning-context-sheet {
  box-sizing: border-box;
  width: min(92vw, 390px);
  padding: 20px 20px 22px;
  border-radius: 20px;
}
.learning-context-close-row {
  display: flex;
  justify-content: flex-end;
  min-height: 34px;
  margin-bottom: 12px;
}
.learning-context-close-row .modal-close { position: static; }
.learning-context-switches { display: grid; gap: 8px; }
.learning-context-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.learning-context-sheet-flag { font-size: 30px; }
.learning-context-mode-icon { display: grid; place-items: center; width: 30px; color: var(--accent-primary); font-size: 18px; }
.learning-context-choice > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.learning-context-choice small { color: var(--text-muted); font: 600 10px/1.2 var(--font-reading); text-transform: uppercase; letter-spacing: .05em; }
.learning-context-choice strong { overflow: hidden; font: 700 14px/1.3 var(--font-emphasis); text-overflow: ellipsis; white-space: nowrap; }
.learning-context-choice > span:last-child { color: var(--text-muted); font-size: 19px; }
.learning-context-choice:hover,
.learning-context-progress:hover { border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--border-color)); }
.learning-context-progress {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 13px 12px 11px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-primary) 7%, var(--bg-tertiary));
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.learning-context-progress-copy { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: var(--text-secondary); font-size: 12px; }
.learning-context-progress-copy strong { color: var(--text-primary); font-family: var(--font-data); }
.learning-context-progress-track,
.level-complete-track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--bg-tertiary); }
.learning-context-progress-track i,
.level-complete-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); }
.learning-context-progress-link { display: flex; justify-content: space-between; margin-top: 9px; color: var(--text-secondary); font: 650 11px/1.2 var(--font-reading); }

.level-complete-celebration {
  position: relative;
  overflow: hidden;
  margin: 0 0 16px;
  padding: 16px;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 36%, var(--border-color));
  border-radius: 15px;
  background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-tertiary));
}
.level-complete-kicker { color: var(--text-secondary); font: 700 10px var(--font-emphasis); letter-spacing: .08em; text-transform: uppercase; }
.level-complete-values { display: flex; align-items: baseline; gap: 8px; margin: 7px 0 10px; color: var(--text-muted); font: 600 18px var(--font-data); }
.level-complete-values strong { color: var(--text-primary); font-size: 28px; }
.level-complete-celebration p { margin: 11px 0 0; color: var(--text-secondary); font: 400 12px/1.45 var(--font-reading); }
.level-complete-celebration.is-celebrating::after {
  content: ''; position: absolute; inset: -60%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--accent-primary) 18%, transparent), transparent 28%);
  animation: level-complete-shimmer 1.7s ease-out 1;
}
@keyframes level-complete-shimmer { from { transform: rotate(-30deg); opacity: 0; } 35% { opacity: 1; } to { transform: rotate(80deg); opacity: 0; } }

@media (max-width: 700px) {
  .learning-context-chip { max-width: 142px; grid-template-columns: auto minmax(0, 1fr) auto; }
  .learning-context-sheet {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    padding: calc(env(safe-area-inset-top) + 16px) 16px 20px;
    border-radius: 0 0 20px 20px;
  }
  .top-bar-user-name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .level-complete-celebration.is-celebrating::after { animation: none; }
  .level-complete-track i { transition: none !important; }
}

/* Source choice is the only onboarding explanation the home screen needs.
   Language already lives in the compact top-bar control, so do not repeat it
   as a numbered setup step or a second language card. */
#step1.language-summary-active {
  padding: 0;
  border: 0;
  background: transparent;
}
#step1.language-summary-active > .step-header,
#step1.language-summary-active .standard-source-card > .artist-source-picker,
#step1.language-summary-active .standard-source-progress {
  display: none !important;
}
#step1.language-summary-active #step1Title::before { content: none; }
#step1.language-summary-active .standard-source-card {
  display: block;
  padding: 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-card) 96%, var(--accent-primary) 4%);
}
#step1.language-summary-active .standard-source-choice {
  gap: 13px;
  padding: 0;
  border: 0;
}
.standard-source-choice-intro { display: grid; gap: 5px; }
.standard-source-choice-intro .standard-source-choice-title {
  color: var(--text-primary);
  font: 700 16px/1.25 var(--font-emphasis);
  letter-spacing: -0.01em;
  text-transform: none;
}
.standard-source-choice-intro p {
  max-width: 52ch;
  margin: 0;
  color: var(--text-muted);
  font: 400 12px/1.45 var(--font-reading);
}
#step1.language-summary-active .standard-source-choice-buttons {
  grid-template-columns: 1fr;
  gap: 10px;
}
#step1.language-summary-active .standard-source-choice-btn {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 68px;
  padding: 11px 12px;
  border-radius: 13px;
  background: var(--bg-tertiary);
}
.standard-source-choice-btn > span:nth-child(2) {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.standard-source-option-title {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.standard-source-option-title em {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(var(--accent-primary-rgb), .14);
  color: var(--accent-primary);
  font: 700 8px/1 var(--font-reading);
  font-style: normal;
  letter-spacing: .05em;
  text-transform: uppercase;
}
#step1.language-summary-active .standard-source-choice-btn small {
  overflow: visible;
  font-size: 11px;
  line-height: 1.38;
  text-overflow: clip;
  white-space: normal;
}
.standard-source-choice-arrow,
.standard-source-choice-status {
  color: var(--text-muted);
  font: 700 18px/1 var(--font-emphasis);
  font-style: normal;
}
.standard-source-choice-btn:disabled {
  opacity: 1;
  color: var(--text-muted);
  border-style: dashed;
  background: color-mix(in srgb, var(--bg-tertiary) 72%, transparent);
}
.standard-source-choice-btn:disabled .standard-source-choice-icon { opacity: .48; }
.standard-source-choice-btn:disabled .standard-source-choice-status {
  max-width: 58px;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.15;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.learning-context-availability {
  min-height: 0;
  margin: -3px 2px 10px;
  color: var(--text-muted);
  font: 400 11px/1.45 var(--font-reading);
}
.known-languages-context {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}
.known-languages-context > span {
  display: block;
  margin-bottom: 8px;
  color: var(--text-muted);
  font: 600 11px/1.2 var(--font-emphasis);
}

/* ── Calm product shell ──────────────────────────────────────────────────
   A stable neutral shell keeps the language itself—not changing chrome and
   nested panels—as the visual subject. Language colours still belong to the
   flashcards; setup uses one quiet product accent. */
:root {
  --bg-primary: #0b0f14;
  --bg-secondary: #10161d;
  --bg-tertiary: #161d26;
  --bg-card: #1a222c;
  --bg-card-hover: #202a35;
  --text-secondary: #d1d7df;
  --text-muted: #8e99a8;
  --border-color: #28323e;
  --border-light: #3a4654;
}
body {
  background-color: var(--bg-primary);
  background-image: radial-gradient(circle at 50% -18%, rgba(125, 143, 166, .13), transparent 42%);
}
#setupPanel,
.auth-modal-content {
  --accent-primary: #8795ff;
  --accent-primary-rgb: 135, 149, 255;
  --accent-secondary: #9ccfbe;
  --accent-secondary-rgb: 156, 207, 190;
  --accent-primary-text: #10141b;
  --accent-secondary-text: #10141b;
}

#topBar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 8px 10px;
  border-color: color-mix(in srgb, var(--border-color) 82%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.top-bar-header { min-height: 36px; gap: 7px; }
.top-bar-icon-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.top-bar-icon-btn:hover,
.top-bar-icon-btn:focus-visible {
  color: var(--text-primary);
  background: var(--bg-tertiary);
  outline: none;
}
.top-bar-icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sync-status.is-synced { display: none; }
#topBar .gear-btn { width: 34px; height: 34px; border-radius: 9px; }
#topBar .top-bar-find { margin-left: auto; }
#topBar .top-bar-gear { margin-left: 0; }

/* One level surface and one set surface, rather than a card wrapped around
   another card. Spacing now supplies most of the hierarchy. */
#step2,
#step4 {
  padding: 12px 2px 4px;
  border: 0;
  background: transparent;
}
#step2 > .step-header,
#step4 > .step-header { padding: 0 4px; }
#step2 .level-selector {
  border: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--bg-tertiary) 78%, transparent);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .10);
}
#step4 .study-set-panel {
  border-color: var(--border-color);
  background: var(--bg-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .13);
}
.study-set-dot.is-current {
  animation: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), .42);
}

/* Fast track has exactly two actions here: toggle the shortcut, or understand
   and adjust its two constituent choices. */
.setup-options {
  margin-top: 12px;
  padding: 10px 11px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg-tertiary) 66%, transparent);
}
.fast-mode-summary {
  font-family: var(--font-reading);
  font-size: 11px;
  font-weight: 400;
  opacity: 1;
}
.fast-mode-detail-btn,
.extras-btn {
  border-radius: 10px;
}

/* Reserve loud type for actual headings. Eyebrows stay useful but no longer
   resemble technical dashboard labels. */
.progress-modal-eyebrow,
.deck-complete-eyebrow,
.artist-source-eyebrow {
  letter-spacing: .06em;
  opacity: .8;
}

@media (max-width: 560px) {
  .container { padding: 10px 12px; }
  #topBar { margin-bottom: 10px; }
  .learning-context-chip { border-color: transparent; background: transparent; padding-left: 4px; }
  .setup-options-bar { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ── Unified learner modal system ──────────────────────────────────────── */
.product-modal,
.setup-info-modal {
  background: rgba(3, 7, 12, .74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
:is(#learningContextModal, #findWordModal, #statsModal, #totalStatsModal,
    #extrasModal, #cognateRulesModal, #estimationModal, #lyricBreakdownModal,
    #songSetModal, #vocabularyImportModal, #extraScopeModal, #helpModal) {
  background: rgba(3, 7, 12, .74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
:is(#learningContextModal, #findWordModal, #statsModal, #totalStatsModal,
    #extrasModal, #cognateRulesModal, #estimationModal, #lyricBreakdownModal,
    #songSetModal, #vocabularyImportModal, #extraScopeModal, #helpModal) .modal-content {
  border-color: color-mix(in srgb, var(--border-light) 72%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg-card) 96%, #111827);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .48), 0 1px 0 rgba(255, 255, 255, .04) inset;
}
:is(#findWordModal, #statsModal, #totalStatsModal, #extrasModal,
    #cognateRulesModal, #estimationModal, #lyricBreakdownModal,
    #songSetModal, #vocabularyImportModal) .modal-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}
.product-modal .modal-content,
.setup-info-modal .step-info-tooltip-inner {
  --accent-primary: #8795ff;
  --accent-primary-rgb: 135, 149, 255;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--border-light) 72%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg-card) 96%, #111827);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .48), 0 1px 0 rgba(255, 255, 255, .04) inset;
}
.product-modal-header,
.info-sheet-header,
.settings-title-block {
  min-width: 0;
}
.product-modal-header,
.info-sheet-header,
.settings-modal-content > .settings-tabs-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.product-modal-eyebrow,
.info-sheet-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--accent-primary);
  font: 650 10px/1.2 var(--font-reading);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.product-modal-header h2,
.info-sheet-header h3,
.settings-title-block h2 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-emphasis);
  letter-spacing: -.025em;
}
.product-modal-header h2,
.settings-title-block h2 { font-size: 24px; }
.info-sheet-header h3 { font-size: 20px; }
.product-modal .modal-close,
.info-sheet-close {
  position: static;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font: 500 14px/1 var(--font-reading);
  cursor: pointer;
}
.product-modal .modal-close:hover,
.info-sheet-close:hover { color: var(--text-primary); border-color: var(--border-light); }

/* Setup explainers are deliberately short: title, one sentence, three ideas. */
.setup-info-modal { padding: 18px; }
.setup-info-modal .step-info-tooltip-inner {
  width: min(100%, 460px);
  max-width: 460px;
  padding: 24px;
  font-size: 14px;
  line-height: 1.5;
}
.info-sheet-lead {
  margin: 17px 0 18px !important;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.5;
}
.info-sheet-points { display: grid; gap: 2px; }
.info-sheet-points > div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid var(--border-color);
}
.info-sheet-points > div > span {
  color: var(--accent-primary);
  font: 700 11px/1.35 var(--font-reading);
  text-transform: uppercase;
}
.info-sheet-points p { margin: 0 !important; color: var(--text-secondary); }
.info-sheet-points strong { display: block; margin-bottom: 2px; }

/* Tutorial starts with three compact principles, then asks for language. */
.tutorial-intro-sheet {
  width: min(92vw, 540px);
  max-width: 540px;
  padding: 26px;
}
.tutorial-intro-close-row { display: flex; justify-content: flex-end; min-height: 34px; }
.tutorial-intro-step { margin-top: 12px; }
.product-primary-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  border: 0;
  border-radius: 12px;
  background: var(--accent-primary);
  color: #10141b;
  font: 750 14px/1.2 var(--font-reading);
  cursor: pointer;
}
.tutorial-principles {
  display: grid;
  gap: 11px;
  margin: 0 0 18px;
}
.tutorial-principles p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.48; }
.tutorial-principles strong { color: var(--text-secondary); }
.product-back-action {
  margin: -4px 0 17px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: 600 12px/1.3 var(--font-reading);
  cursor: pointer;
}
.tutorial-intro-step > h3 { margin: 0 0 6px; color: var(--text-primary); font: 700 18px/1.3 var(--font-emphasis); }
.tutorial-intro-step > h3 + p { margin: 0 0 16px; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.tutorial-language-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.tutorial-language-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 66px;
  padding: 11px 12px;
  border: 1px solid var(--border-color);
  border-radius: 13px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.tutorial-language-choice:hover,
.tutorial-language-choice.is-current { border-color: color-mix(in srgb, var(--accent-primary) 70%, var(--border-color)); background: rgba(var(--accent-primary-rgb), .09); }
.tutorial-language-flag { font-size: 21px; }
.tutorial-language-choice strong,
.tutorial-language-choice small { display: block; }
.tutorial-language-choice strong { font: 700 13px/1.3 var(--font-reading); }
.tutorial-language-choice small { margin-top: 2px; color: var(--text-muted); font-size: 10px; }
.tutorial-language-arrow { color: var(--text-muted); }

/* Settings: clear title, stable sections, and plain-language rows. */
.settings-modal-content {
  width: min(94vw, 700px);
  max-width: 700px;
  max-height: min(90dvh, 780px);
  padding: 0 24px 26px;
}
.settings-modal-content > .settings-tabs-header {
  position: sticky;
  top: 0;
  z-index: 4;
  margin: 0 -24px;
  padding: 22px 24px 14px;
  border: 0;
  background: color-mix(in srgb, var(--bg-card) 95%, transparent);
}
.settings-title-block .settings-single-tab-title { padding: 0; }
.settings-modal-content > .settings-tabs {
  position: sticky;
  top: 70px;
  z-index: 3;
  display: flex;
  gap: 5px;
  margin: 0 -24px 20px;
  padding: 0 24px 13px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--bg-card) 95%, transparent);
  scrollbar-width: none;
}
.settings-modal-content > .settings-tabs::-webkit-scrollbar { display: none; }
.settings-modal-content .settings-tab {
  flex: 0 0 auto;
  min-height: 34px;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
}
.settings-modal-content .settings-tab[hidden] { display: none !important; }
.settings-modal-content .settings-tab:hover { background: var(--bg-tertiary); }
.settings-modal-content .settings-tab.active {
  border: 0;
  background: rgba(var(--accent-primary-rgb), .14);
  color: var(--accent-primary);
}
#settingsModal.settings-single-tab .settings-modal-content > .settings-tabs { display: none; }
.settings-section-intro {
  margin: 2px 0 18px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}
.settings-defaults-card {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.settings-defaults-heading { align-items: baseline; padding-bottom: 8px; }
.settings-defaults-heading strong { font-size: 16px; }
.settings-defaults-heading span { text-transform: none; letter-spacing: 0; font-size: 11px; }
.settings-defaults-warning {
  margin: 0 0 18px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  font-size: 11px;
}
.settings-group-heading {
  margin: 22px 0 5px;
  padding: 0 0 8px;
  border: 0;
}
.settings-defaults-warning + .settings-group-heading { margin-top: 0; }
.settings-group-heading strong { font-size: 13px; letter-spacing: 0; text-transform: none; }
.settings-group-heading span { font-size: 11px; }
.settings-default-row {
  min-height: 54px;
  padding: 8px 0;
  border-top: 1px solid var(--border-color);
  font-family: var(--font-reading);
}
.settings-group-heading + .settings-default-row { border-top: 1px solid var(--border-color); }
.settings-row-label { font-size: 13px; font-weight: 650; }
.settings-toggle .group-size-btn { font-family: var(--font-reading); font-weight: 650; }
.settings-info-btn { width: 20px; height: 20px; font-size: 10px; }
.settings-row-explanation { max-width: 360px; font-size: 11px; }
.appearance-settings-card,
.offline-panel {
  border-color: var(--border-color);
  background: var(--bg-tertiary);
}

@media (max-width: 600px) {
  .product-modal { align-items: flex-end; padding: 0; }
  .product-modal .modal-content,
  .setup-info-modal .step-info-tooltip-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    border-width: 1px 0 0;
    border-radius: 24px 24px 0 0;
  }
  .setup-info-modal { align-items: flex-end; padding: 0; }
  .setup-info-modal .step-info-tooltip-inner { padding: 22px 20px max(24px, env(safe-area-inset-bottom)); }
  .tutorial-intro-sheet { padding: 22px 20px max(24px, env(safe-area-inset-bottom)); }
  .tutorial-language-grid { grid-template-columns: 1fr; }
  .settings-modal-content {
    max-height: 94dvh;
    padding: 0 18px max(24px, env(safe-area-inset-bottom));
  }
  .settings-modal-content > .settings-tabs-header {
    margin: 0 -18px;
    padding: 18px 18px 11px;
  }
  .settings-modal-content > .settings-tabs {
    top: 63px;
    margin: 0 -18px 18px;
    padding: 0 18px 11px;
  }
  .settings-default-row { align-items: center; flex-direction: row; gap: 12px; }
  .settings-default-row .settings-toggle { width: auto; }
  .settings-default-row .settings-toggle .group-size-btn { min-width: 52px; }
}

/* ── Fast track and settings hierarchy ─────────────────────────────────── */
.setup-options:has(.fast-mode-master) {
  border-color: color-mix(in srgb, var(--accent-primary) 34%, var(--border-color));
  background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), .10), rgba(var(--accent-primary-rgb), .035));
}
.fast-mode-example {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 2px 0 14px;
}
.fast-mode-example span,
.fast-mode-example b {
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font: 600 11px/1.2 var(--font-reading);
}
.fast-mode-example b { border-color: rgba(var(--accent-primary-rgb), .35); color: var(--accent-primary); }
.fast-mode-details {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 12px;
}
.fast-mode-details summary {
  color: var(--text-secondary);
  font-weight: 650;
  cursor: pointer;
}
.fast-mode-details p { margin: 9px 0 0; line-height: 1.5; }

.extras-intro {
  margin: -4px 20px 12px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.extras-search {
  box-sizing: border-box;
  width: calc(100% - 40px);
  min-height: 40px;
  margin: 0 20px 14px;
  padding: 8px 11px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  outline: 0;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font: 13px/1.3 var(--font-reading);
}
.extras-search:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), .12); }
.extras-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto auto; padding: 9px 0; }
.extras-open-card {
  padding: 5px 8px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font: 650 10px/1.2 var(--font-reading);
  cursor: pointer;
}
.extras-open-card:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

.settings-preference-cluster { margin-top: 22px; }
.settings-preference-cluster:first-of-type { margin-top: 4px; }
.settings-cluster-heading { margin: 0 0 8px 2px; }
.settings-cluster-heading strong {
  display: block;
  color: var(--text-secondary);
  font: 750 11px/1.3 var(--font-emphasis);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.settings-cluster-heading span {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
}
.settings-preference-cluster .settings-preference-group:not(:first-child) { margin-top: 10px; }
.settings-preference-group {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--border-color);
}
.settings-preference-group--primary {
  margin-top: 4px;
  padding: 2px 12px 5px;
  border: 1px solid rgba(var(--accent-primary-rgb), .28);
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 12px 12px 0;
  background: rgba(var(--accent-primary-rgb), .055);
}
.settings-preference-group .settings-group-heading { margin-top: 8px; }
.settings-feature-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.settings-feature-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(var(--accent-primary-rgb), .14);
  color: var(--accent-primary);
  font: 750 13px/1 var(--font-emphasis);
}
.settings-feature-icon.is-connected { background: rgba(16, 185, 129, .16); color: #10B981; }
.settings-feature-card strong,
.settings-feature-card small { display: block; }
.settings-feature-card strong { color: var(--text-primary); font: 700 14px/1.3 var(--font-reading); }
.settings-feature-card p,
.settings-feature-card small { margin: 5px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.48; }
.settings-feature-action {
  min-height: 36px;
  padding: 8px 11px;
  border: 0;
  border-radius: 9px;
  background: var(--accent-primary);
  color: #10141b;
  font: 700 12px/1.2 var(--font-reading);
  cursor: pointer;
}
.settings-feature-action--danger { background: color-mix(in srgb, var(--error) 16%, var(--bg-tertiary)); color: var(--error); }
.settings-feature-note { grid-column: 2 / -1; }
.review-settings-card { grid-template-columns: auto minmax(0, 1fr); }
.review-settings-card .settings-default-row--standalone {
  grid-column: 1 / -1;
  margin-top: 3px;
  padding: 14px 0 2px;
  border-top: 1px solid var(--border-color);
}
.settings-default-row--standalone .settings-row-label-block small {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.42;
}
.settings-feature-card--button { width: 100%; text-align: left; cursor: pointer; }
.settings-feature-card--button:hover { border-color: rgba(var(--accent-primary-rgb), .45); }
.settings-feature-arrow { align-self: center; color: var(--text-muted); }

@media (max-width: 600px) {
  #settingsModal.product-modal { align-items: flex-start; }
  #settingsModal.product-modal .settings-modal-content {
    border-width: 0 0 1px;
    border-radius: 0 0 24px 24px;
  }
  .settings-feature-card { grid-template-columns: auto minmax(0, 1fr); }
  .settings-feature-action { grid-column: 1 / -1; width: 100%; }
  .settings-feature-note { grid-column: 1 / -1; }
  .extras-row { grid-template-columns: minmax(0, 1fr) auto; }
  .extras-translation { grid-column: 1; }
  .extras-note { grid-column: 1; text-align: left; }
  .extras-open-card { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* Mobile overlays all follow one spatial rule: content enters from and stays
   attached to the top edge. Desktop dialogs remain centred. */
@media (max-width: 600px) {
  .modal,
  .product-modal,
  .setup-info-modal,
  .flag-menu {
    align-items: flex-start !important;
    padding: 0 !important;
  }
  .modal > .modal-content,
  .product-modal > .modal-content,
  .setup-info-modal > .step-info-tooltip-inner {
    margin: 0;
    border-width: 0 0 1px;
    border-radius: 0 0 24px 24px;
  }
  .choice-sheet-overlay {
    align-items: flex-start;
    padding: 0;
  }
  .choice-sheet-panel {
    width: 100%;
    max-height: min(88dvh, 760px);
    padding: env(safe-area-inset-top) 0 0;
    border-width: 0 0 1px;
    border-radius: 0 0 24px 24px;
    transform: translateY(-28px);
  }
  .learning-context-sheet {
    inset: 0 8px auto;
    border-radius: 0 0 20px 20px;
  }
  .knowledge-overview-modal,
  .knowledge-overview-modal.syn-leave-modal {
    place-items: start center;
    padding: 0;
  }
  .knowledge-overview-modal .knowledge-overview-sheet {
    border-width: 0 0 1px;
    border-radius: 0 0 20px 20px;
  }
}

/* ── Numbered Fast track explanation + responsive Settings navigator ───── */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.fast-mode-controls .substep-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}
.fast-mode-number {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(var(--accent-primary-rgb), .15);
  color: var(--accent-primary);
  font: 750 12px/1 var(--font-reading);
}
.fast-mode-example--cognate { gap: 9px; }
.fast-mode-example--cognate > span {
  display: flex;
  flex-direction: column;
  min-width: 92px;
  gap: 2px;
}
.fast-mode-example--cognate span b {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font-size: 12px;
}
.fast-mode-example--cognate span small { color: var(--text-muted); font-size: 9px; font-weight: 500; }
.fast-mode-example--cognate > strong { color: var(--text-muted); font: 700 13px/1 var(--font-reading); }
.fast-mode-mapping-status {
  margin: 10px 0 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--error) 35%, var(--border-color));
  border-radius: 9px;
  background: color-mix(in srgb, var(--error) 7%, transparent);
  color: var(--text-secondary);
  font: 550 11px/1.4 var(--font-reading);
}
#fastModeModal .extras-btn {
  margin-top: 14px;
  min-height: 38px;
  padding: 8px 12px;
  border-color: var(--border-color);
  background: var(--bg-tertiary);
}

.settings-header-actions { display: flex; align-items: center; gap: 9px; }
.settings-search { display: block; }
.settings-search input {
  box-sizing: border-box;
  width: 190px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  outline: 0;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font: 12px/1.3 var(--font-reading);
}
.settings-search input:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), .12); }
.settings-search-hidden { display: none !important; }
.settings-nav-label {
  display: block;
  margin: 13px 9px 4px;
  color: var(--text-muted);
  font: 700 9px/1.2 var(--font-reading);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.settings-nav-label:first-child { margin-top: 2px; }
.settings-nav-label[hidden] { display: none; }

@media (min-width: 701px) {
  #settingsModal .settings-modal-content {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    width: min(94vw, 820px);
    max-width: 820px;
    height: min(86dvh, 720px);
    max-height: 720px;
    padding: 0;
    overflow: hidden;
  }
  #settingsModal .settings-modal-content > .settings-tabs-header {
    position: static;
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
    padding: 19px 21px 15px;
    border-bottom: 1px solid var(--border-color);
  }
  #settingsModal .settings-modal-content > .settings-tabs {
    position: static;
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 14px 10px 20px;
    overflow-y: auto;
    border: 0;
    border-right: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-tertiary) 44%, transparent);
  }
  #settingsModal .settings-modal-content .settings-tab {
    flex: none;
    width: 100%;
    min-height: 38px;
    padding: 9px 11px;
    text-align: left;
  }
  #settingsModal .settings-tab-content {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin: 0;
    padding: 20px 24px 28px;
    overflow-y: auto;
  }
  #settingsModal.settings-single-tab .settings-modal-content { grid-template-columns: 1fr; }
  #settingsModal.settings-single-tab .settings-tab-content { grid-column: 1; }
}

@media (max-width: 700px) {
  .settings-header-actions { flex: 1; justify-content: flex-end; }
  .settings-search { flex: 1; max-width: 180px; }
  .settings-search input { width: 100%; }
  #settingsModal .settings-nav-label { display: none; }
  #settingsModal .settings-modal-content > .settings-tabs { scrollbar-width: thin; }
}