/* ═══ 2026 generator revamp — the rest of the pre-quiz view brought in
           line with the redesigned homepage (builderRefresh above did the
           builder card; this block does the today strip and the usage meter —
           the quiz builder, including the quick-start row that now lives
           inside it, is one consolidated block in the main stylesheet).
           Scoped to elements that exist only in the generator view, so
           quiz-play and the tool pages are untouched. White-first: flat card
           surfaces, near-black type, one accent surface (the daily challenge),
           depth from hairline borders + calm two-layer shadows — no gradient
           consoles, no glows, no decorative rings. ═══ */

        /* ── Today strip: flat white cards with hairline borders ── */
        #todayStrip .today-daily,
        #todayStrip #upNext,
        #todayStrip .review-due-banner {
            background: transparent;
            border: 1px solid rgba(14, 18, 32, .09);
            border-radius: 12px;
            box-shadow: none;
        }
        /* Emphasis stays in the border tint, never in a glow. */
        #todayStrip .review-due-banner { border-color: rgba(22, 163, 74, .28); }
        #todayStrip .exam-countdown-banner { border-color: rgba(217, 119, 6, .35); }
        [data-dark] #todayStrip .today-daily,
        [data-dark] #todayStrip #upNext,
        [data-dark] #todayStrip .review-due-banner {
            background: transparent;
            box-shadow: none;
        }
        [data-dark] #todayStrip .today-daily,
        [data-dark] #todayStrip #upNext { border-color: rgba(255, 255, 255, 0.08); }

        /* The streak nudge joins the flattened strip instead of sitting in it
           as an old-language tinted chip. */
        #todayStrip .streak-nudge {
            background: var(--card-bg, #fff);
            border: 1px solid rgba(217, 119, 6, .35);
            border-radius: 12px;
            box-shadow: none;
        }
        [data-dark] #todayStrip .streak-nudge {
            background: var(--card-bg, #1D1D21);
            box-shadow: none;
        }

        /* The daily challenge keeps its status colours on a flat surface. */
        #todayStrip .daily-challenge-banner {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            background: var(--violet);
            box-shadow: none;
        }
        #todayStrip .daily-challenge-banner::before {
            content: none;
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background: radial-gradient(360px 200px at 92% 0%, rgba(24, 192, 221, .22), transparent 60%);
        }
        #todayStrip .daily-challenge-banner > * { position: relative; z-index: 1; }
        #todayStrip .daily-challenge-banner:hover {
            transform: none;
            box-shadow: none;
        }
        #todayStrip .daily-challenge-banner.done {
            background: #166534;
            box-shadow: none;
        }
        #todayStrip .daily-challenge-banner.in-progress {
            background: #92400e;
            box-shadow: none;
        }
        /* The .9-opacity sub line sat under AA on the tinted surfaces. */
        #todayStrip .daily-challenge-banner .dc-sub { opacity: 1; }

        /* Touch devices get no sticky hover states — the id-scoped hovers above
           outrank the stylesheet's old @media(hover:none) guards, so they need
           their own. */
        @media (hover: none) {
            #todayStrip .daily-challenge-banner:hover {
                transform: none;
                box-shadow: none;
            }
            #todayStrip .daily-challenge-banner.done:hover {
                box-shadow: none;
            }
            #todayStrip .daily-challenge-banner.in-progress:hover {
                box-shadow: none;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            #todayStrip .daily-challenge-banner:hover { transform: none; box-shadow: none; }
        }
    

        /* ═══ 2026 quiz-play revamp — the game brought in line with the
           homepage and the generator. The reference is the homepage's own
           quiz demo (.qd-*): hairline option tiles with an indigo letter chip,
           right/wrong as border + tint with the chip going solid, non-picked
           options dimming — feedback carried by color and the explanation box,
           not by white-on-gradient fills, glows or 3D lips. Scoped to
           #quizSection (the score card lives inside it) + #achievementsPanel.
           JS contracts preserved: class names untouched, .options-list stays
           the explanation anchor, option width unchanged (floatPoints anchors
           to its right edge), .streak-badge display stays JS-owned. ═══ */

        /* ── Chrome: progress header, question card, score card ── */
        #quizSection .progress-wrap {
            background: var(--card-bg, #fff);
            border: 1px solid rgba(14, 18, 32, .09);
            border-radius: 14px;
            box-shadow: 0 1px 2px rgba(14, 18, 32, .04), 0 6px 18px rgba(14, 18, 32, .05);
        }
        #quizSection .progress-bar-fill { box-shadow: none; }
        #quizSection .progress-bar-fill::after { display: none; }   /* the sheen */
        #quizSection .question-card,
        #quizSection #scoreCard,
        #achievementsPanel {
            background: var(--card-bg, #fff);
            border: 1px solid rgba(14, 18, 32, .09);
            border-radius: 20px;
            box-shadow: 0 1px 2px rgba(14, 18, 32, .04), 0 18px 44px rgba(14, 18, 32, .08);
        }
        /* The v2 gradient hairlines along the top edge. */
        #quizSection .question-card::before,
        #quizSection #scoreCard::before { display: none; }
        [data-dark] #quizSection .progress-wrap {
            background: var(--card-bg, #1D1D21) !important;   /* the old dark rule is !important */
            border-color: rgba(157, 148, 255, 0.14);
            box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .3);
        }
        [data-dark] #quizSection .question-card,
        [data-dark] #quizSection #scoreCard,
        [data-dark] #achievementsPanel {
            background: var(--card-bg, #1D1D21);
            border-color: rgba(255, 255, 255, 0.08);
            box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 44px rgba(0, 0, 0, .4);
        }

        /* ── Answer options: the homepage demo's tiles ── */
        #quizSection .option {
            background: var(--card-bg, #fff);
            border: 1.5px solid rgba(14, 18, 32, .14);
            border-radius: 12px;
            box-shadow: none;                    /* kills the 3D lip */
            transition: border-color .15s ease, background .15s ease, transform .12s ease;
        }
        #quizSection .option:hover {
            border-color: var(--violet);
            background: var(--card-bg, #fff);
            transform: none;                     /* v2 slid options 4px right */
            box-shadow: none;
        }
        #quizSection .option:not(.disabled):not(.correct):not(.wrong):active {
            transform: scale(.985);
            background: var(--card-bg, #fff);
            box-shadow: none;
        }
        #quizSection .opt-letter {
            width: 28px;
            height: 28px;
            border: none;
            border-radius: 8px;
            background: rgba(91, 80, 232, .09);
            color: var(--violet);
        }
        #quizSection .option:hover .opt-letter { transform: none; }
        #quizSection .opt-text { font-size: .95rem; font-weight: 700; color: var(--text-secondary); }

        /* Right and wrong: border + tint, chip goes solid, ink stays ink. */
        #quizSection .option.correct,
        #quizSection .option.timeout-correct {
            border-color: #16a34a;
            background: rgba(22, 163, 74, .07);
            box-shadow: none;
        }
        #quizSection .option.correct .opt-letter,
        #quizSection .option.timeout-correct .opt-letter { background: #16a34a; color: #fff; }
        #quizSection .option.wrong {
            border-color: #dc2626;
            background: rgba(220, 38, 38, .06);
            box-shadow: none;
        }
        #quizSection .option.wrong .opt-letter { background: #dc2626; color: #fff; }
        #quizSection .option.correct .opt-text,
        #quizSection .option.timeout-correct .opt-text,
        #quizSection .option.wrong .opt-text {
            color: var(--text-primary);
            text-shadow: none;
            font-weight: 800;
        }
        #quizSection .option.dimmed { opacity: .55; }
        /* Multiselect: the old .ms-option.selected rule is !important, so this
           state (and the graded states that must beat it after submit — JS
           never removes .selected) counter it in kind. */
        #quizSection .option.ms-option.selected {
            border-color: var(--violet) !important;
            background: rgba(91, 80, 232, .06) !important;
        }
        #quizSection .option.ms-option.selected.correct,
        #quizSection .option.ms-option.selected.timeout-correct {
            border-color: #16a34a !important;
            background: rgba(22, 163, 74, .07) !important;
        }
        #quizSection .option.ms-option.selected.wrong {
            border-color: #dc2626 !important;
            background: rgba(220, 38, 38, .06) !important;
        }
        #quizSection .option.disabled:hover { border-color: rgba(14, 18, 32, .14); }
        #quizSection .option.correct:hover { border-color: #16a34a; background: rgba(22, 163, 74, .07); }
        #quizSection .option.timeout-correct:hover { border-color: #16a34a; background: rgba(22, 163, 74, .07); }
        #quizSection .option.wrong:hover { border-color: #dc2626; background: rgba(220, 38, 38, .06); }

        [data-dark] #quizSection .option {
            background: rgba(255, 255, 255, 0.03);
            border-color: rgba(255, 255, 255, 0.14);
            box-shadow: none;
        }
        [data-dark] #quizSection .option:hover {
            background: rgba(255, 255, 255, 0.03);
            border-color: #8b7cf8;
            box-shadow: none;
        }
        [data-dark] #quizSection .opt-letter {
            background: rgba(255, 255, 255, 0.08);
            border: none;
            color: #a89ffb;
        }
        [data-dark] #quizSection .option.correct,
        [data-dark] #quizSection .option.timeout-correct {
            background: rgba(34, 197, 94, .12);
            border-color: #22c55e;
        }
        [data-dark] #quizSection .option.wrong {
            background: rgba(244, 63, 94, .12);
            border-color: #f43f5e;
        }
        [data-dark] #quizSection .option.correct .opt-letter,
        [data-dark] #quizSection .option.timeout-correct .opt-letter { background: #22c55e; color: #111113; }
        [data-dark] #quizSection .option.wrong .opt-letter { background: #f43f5e; color: #111113; }
        [data-dark] #quizSection .option.correct .opt-text,
        [data-dark] #quizSection .option.timeout-correct .opt-text,
        [data-dark] #quizSection .option.wrong .opt-text { color: var(--text-primary); }
        [data-dark] #quizSection .option.disabled:hover { border-color: rgba(255, 255, 255, 0.14); }
        [data-dark] #quizSection .option.ms-option.selected {
            border-color: #8b7cf8 !important;
            background: rgba(157, 148, 255, 0.1) !important;
        }
        [data-dark] #quizSection .option.ms-option.selected.correct,
        [data-dark] #quizSection .option.ms-option.selected.timeout-correct {
            border-color: #22c55e !important;
            background: rgba(34, 197, 94, .12) !important;
        }
        [data-dark] #quizSection .option.ms-option.selected.wrong {
            border-color: #f43f5e !important;
            background: rgba(244, 63, 94, .12) !important;
        }

        /* True/false buttons follow the same tile recipe. */
        #quizSection .tf-btn {
            background: var(--card-bg, #fff);
            border: 1.5px solid rgba(14, 18, 32, .14);
            border-radius: 12px;
            box-shadow: none;
        }
        /* Hover must never repaint an answered button: answered T/F buttons get
           state CLASSES, never the disabled attribute, so exclude them here. */
        #quizSection .tf-btn:hover:not(:disabled):not(.correct):not(.wrong):not(.dimmed):not(.timeout-correct) {
            border-color: var(--violet);
            background: var(--card-bg, #fff);
        }
        #quizSection .tf-btn.correct,
        #quizSection .tf-btn.timeout-correct { border-color: #16a34a; background: rgba(22, 163, 74, .07); color: var(--text-primary); }
        #quizSection .tf-btn.wrong { border-color: #dc2626; background: rgba(220, 38, 38, .06); color: var(--text-primary); }
        #quizSection .tf-btn.dimmed { opacity: .55; }
        [data-dark] #quizSection .tf-btn { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.14); color: var(--text-primary); }
        [data-dark] #quizSection .tf-btn:hover:not(:disabled):not(.correct):not(.wrong):not(.dimmed):not(.timeout-correct) {
            border-color: #8b7cf8;
            background: rgba(255, 255, 255, 0.03);
        }
        [data-dark] #quizSection .tf-btn.correct,
        [data-dark] #quizSection .tf-btn.timeout-correct { background: rgba(34, 197, 94, .12); border-color: #22c55e; }
        [data-dark] #quizSection .tf-btn.wrong { background: rgba(244, 63, 94, .12); border-color: #f43f5e; }

        /* Inputs: the builder's field recipe. */
        #quizSection .written-textarea,
        #quizSection .fill-input,
        #quizSection .matching-select {
            background: var(--card-bg, #fff);
            border: 1px solid rgba(14, 18, 32, .13);
            border-radius: 12px;
        }
        #quizSection .written-textarea:focus,
        #quizSection .fill-input:focus,
        #quizSection .matching-select:focus {
            border-color: var(--violet);
            box-shadow: 0 0 0 3px rgba(91, 80, 232, .14);
            outline: none;
        }
        [data-dark] #quizSection .written-textarea,
        [data-dark] #quizSection .fill-input,
        [data-dark] #quizSection .matching-select {
            background: rgba(255, 255, 255, 0.03);
            border-color: rgba(255, 255, 255, 0.14);
        }
        /* Placed after the dark base so the ring survives the specificity tie. */
        [data-dark] #quizSection .written-textarea:focus,
        [data-dark] #quizSection .fill-input:focus,
        [data-dark] #quizSection .matching-select:focus {
            border-color: #8b7cf8;
            box-shadow: 0 0 0 3px rgba(157, 148, 255, 0.18);
        }
        /* Graded matching rows: the id-scoped field recipe above outranks the
           old row-tint rules, so the right/wrong marking is restated here. */
        #quizSection .matching-row.match-correct .matching-select {
            border-color: #16a34a;
            background: rgba(22, 163, 74, .07);
        }
        #quizSection .matching-row.match-wrong .matching-select {
            border-color: #dc2626;
            background: rgba(220, 38, 38, .06);
        }
        [data-dark] #quizSection .matching-row.match-correct .matching-select {
            border-color: #22c55e;
            background: rgba(34, 197, 94, .12);
        }
        [data-dark] #quizSection .matching-row.match-wrong .matching-select {
            border-color: #f43f5e;
            background: rgba(244, 63, 94, .12);
        }

        /* ── Buttons: the homepage pair ── */
        #quizSection .btn-next,
        #quizSection .btn-grade,
        #quizSection .btn-submit-type,
        #quizSection .btn-share {
            background: linear-gradient(135deg, #6156ee 0%, #5348d6 100%);
            color: #fff;
            border: none;
            border-radius: 999px;
            box-shadow: 0 1px 2px rgba(67, 56, 202, .35), 0 10px 26px rgba(91, 80, 232, .28);
            transition: transform .16s ease, box-shadow .2s ease;
        }
        #quizSection .btn-next:hover,
        #quizSection .btn-grade:hover:not(:disabled),
        #quizSection .btn-submit-type:hover,
        #quizSection .btn-share:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(67, 56, 202, .35), 0 16px 34px rgba(91, 80, 232, .34);
            filter: none;
        }
        #quizSection .btn-next:active,
        #quizSection .btn-grade:active,
        #quizSection .btn-submit-type:active,
        #quizSection .btn-share:active { transform: translateY(0); }
        #quizSection .btn-prev,
        #quizSection .btn-retry {
            background: var(--card-bg, #fff);
            color: var(--text-primary);
            border: 1.5px solid rgba(14, 18, 32, .14);
            border-radius: 999px;
            box-shadow: none;
            transition: border-color .16s ease, color .16s ease, transform .16s ease;
        }
        #quizSection .btn-prev:hover:not(:disabled),
        #quizSection .btn-retry:hover {
            border-color: var(--violet);
            color: var(--violet);
            background: var(--card-bg, #fff);
            transform: translateY(-1px);
            box-shadow: none;
        }
        [data-dark] #quizSection .btn-prev,
        [data-dark] #quizSection .btn-retry {
            background: rgba(255, 255, 255, 0.03);
            border-color: rgba(255, 255, 255, 0.14);
            color: var(--text-primary);
        }
        [data-dark] #quizSection .btn-prev:hover:not(:disabled),
        [data-dark] #quizSection .btn-retry:hover { border-color: #8b7cf8; color: #8b7cf8; }

        /* ── Score card details ── */
        #quizSection .score-stat {
            background: #f7f8fd;
            border: 1px solid rgba(14, 18, 32, .07);
            border-radius: 12px;
        }
        #quizSection .score-stat-val {
            background: none;
            -webkit-background-clip: initial;
            background-clip: initial;
            -webkit-text-fill-color: currentColor;
            color: var(--text-primary);
        }
        [data-dark] #quizSection .score-stat {
            background: rgba(255, 255, 255, 0.03);
            border-color: rgba(255, 255, 255, 0.08);
        }

        /* ── Touch + reduced motion guards for every hover above ── */
        @media (hover: none) {
            #quizSection .option:hover { border-color: rgba(14, 18, 32, .14); }
            #quizSection .option.correct:hover, #quizSection .option.timeout-correct:hover { border-color: #16a34a; }
            #quizSection .option.wrong:hover { border-color: #dc2626; }
            #quizSection .tf-btn:hover:not(:disabled) { border-color: rgba(14, 18, 32, .14); }
            #quizSection .btn-next:hover, #quizSection .btn-grade:hover:not(:disabled),
            #quizSection .btn-submit-type:hover, #quizSection .btn-share:hover {
                transform: none;
                box-shadow: 0 1px 2px rgba(67, 56, 202, .35), 0 10px 26px rgba(91, 80, 232, .28);
            }
            #quizSection .btn-prev:hover:not(:disabled), #quizSection .btn-retry:hover { transform: none; }
            #quizSection .tf-btn.correct:hover, #quizSection .tf-btn.timeout-correct:hover { border-color: #16a34a; background: rgba(22, 163, 74, .07); }
            #quizSection .tf-btn.wrong:hover { border-color: #dc2626; background: rgba(220, 38, 38, .06); }
            [data-dark] #quizSection .option:hover { border-color: rgba(255, 255, 255, 0.14); }
            [data-dark] #quizSection .option.correct:hover,
            [data-dark] #quizSection .option.timeout-correct:hover { border-color: #22c55e; background: rgba(34, 197, 94, .12); }
            [data-dark] #quizSection .option.wrong:hover { border-color: #f43f5e; background: rgba(244, 63, 94, .12); }
            [data-dark] #quizSection .tf-btn:hover { border-color: rgba(255, 255, 255, 0.14); }
            [data-dark] #quizSection .tf-btn.correct:hover,
            [data-dark] #quizSection .tf-btn.timeout-correct:hover { border-color: #22c55e; background: rgba(34, 197, 94, .12); }
            [data-dark] #quizSection .tf-btn.wrong:hover { border-color: #f43f5e; background: rgba(244, 63, 94, .12); }
        }
        @media (prefers-reduced-motion: reduce) {
            #quizSection .btn-next:hover, #quizSection .btn-grade:hover:not(:disabled),
            #quizSection .btn-submit-type:hover, #quizSection .btn-share:hover,
            #quizSection .btn-prev:hover:not(:disabled), #quizSection .btn-retry:hover,
            #quizSection .option:not(.disabled):not(.correct):not(.wrong):active { transform: none; }
        }
    

        /* ═══ 2026 workspace redesign — the app stops being a rounded card
           floating on a doodle wall and becomes an open, white-first workspace
           in the homepage's language.

           - the doodle backdrop is retired (as the homepage did); the ground is
             plain with one restrained top wash
           - pre-quiz at >=1100px the container itself becomes a 2-column grid:
             the whole form column left, the day's cards as a sticky right
             rail — no new wrappers, so every JS display toggle keeps
             addressing the same elements
           - quiz-play keeps a centred 760px reading column

           This block must stay the LAST style block in <head>: several rules
           below win same-specificity ties against legacy blocks purely by
           source order. ═══ */

        /* ── Ground ── */
        /* The theme cross-fade lives on body (transition block further up);
           the ground now paints on html, so it needs the same fade or the
           largest surface snaps while everything on it lags .35s behind. */
        html { background: #fff; color-scheme: light; transition: background-color .35s ease; }
        /* data-dark lives ON the html element — html[data-dark], never
           [data-dark] html (a descendant selector that can never match). */
        html[data-dark] { background: #111113; color-scheme: dark; }
        body {
            background-color: transparent;
            background-image: linear-gradient(180deg, #f7f8fd 0%, rgba(247, 248, 253, 0) 100%);
            background-repeat: no-repeat;
            background-size: 100% 520px;
        }
        /* Dark keeps the flat ground. The 520px top fade above reads as a
           gradient on the quiz page — which paints on body — while every study
           tool paints on .section-page, which is flat #111113 a few rules down.
           One surface lit two different ways. Dropping the image here lets
           html[data-dark]'s flat #111113 through, so the quiz and the tools are
           the same colour. Light keeps its fade. */
        [data-dark] body {
            background-color: transparent;
            background-image: none;
        }
        body::before, body::after { display: none; }   /* aurora + grain layers */

        /* Tool overlays share the current workspace ground. Only the old
           direct-child blueprint decorations are retired; charts and content
           illustrations inside each tool remain visible. */
        .section-page { background: #fff; }
        [data-dark] .section-page { background: #111113; }
        .section-page > svg.bp { display: none; }

        /* ── The workspace grid (pre-quiz, desktop) ── */
        @media (min-width: 1100px) {
            body:not(.quiz-active) .container {
                max-width: 1180px;
                display: grid;
                grid-template-columns: minmax(0, 1fr) 350px;
                column-gap: 32px;
                row-gap: 0;
                align-items: start;
            }
            body:not(.quiz-active) .container > * { grid-column: 1; min-width: 0; }
            body:not(.quiz-active) .container > #todayStrip {
                grid-column: 2;
                grid-row: 1 / span 12;   /* rides beside the whole form column */
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin: 0;
                position: sticky;
                top: 84px;
            }
            /* The empty-strip rule must out-rank the flex rule above, or a
               student with nothing due gets a blank right column. */
            body:not(.quiz-active) .container > #todayStrip.is-empty { display: none; }
            body:not(.quiz-active) .container:has(> #todayStrip.is-empty) {
                grid-template-columns: minmax(0, 820px);
                justify-content: center;
            }
            /* Flow states span the grid and centre as a reading column. */
            body:not(.quiz-active) .container > #loading,
            body:not(.quiz-active) .container > #quizSection,
            body:not(.quiz-active) .container > #achievementsPanel {
                grid-column: 1 / -1;
                max-width: 760px;
                width: 100%;
                margin-left: auto;
                margin-right: auto;
            }
            /* The rail tiles stay flat in the wide layout as well. */
            body:not(.quiz-active) #todayStrip .today-daily,
            body:not(.quiz-active) #todayStrip .review-due-banner {
                min-height: 0;
                box-shadow: none;
            }
            body:not(.quiz-active) #todayStrip .daily-challenge-banner { min-height: 0; }
            /* showScore() drops body.quiz-active while #quizSection is still
               on screen; without this pin the grid re-asserts mid-score and
               the card the student is reading shifts sideways. Keep the quiz
               geometry until the builder actually returns (restoreInputUI
               sets #quizSection back to display:none). */
            body:not(.quiz-active) .container:has(> #quizSection[style*="block"]) {
                display: block;
                max-width: 760px;
            }
        }
        body.quiz-active .container { display: block; max-width: 760px; }

        /* The sidebar's centring maths (study-rail.css) assumes the old 760px
           column; the wide workspace supplies its own offset beside the rail.
           quiz-active intentionally falls through to the original 760 centring. */
        @media (min-width: 1280px) and (min-height: 600px) and (hover: hover) {
            body.rail-left:not(.quiz-active) .container {
                margin-left: calc(256px + max(0px, (100vw - 280px - 1180px) / 2));
                margin-right: 24px;
            }
            /* Score screen (quiz-active gone, #quizSection still up): reuse
               study-rail.css's own quiz-era centring verbatim, so nothing
               moves sideways between the last question and the score card. */
            body.rail-left:not(.quiz-active) .container:has(> #quizSection[style*="block"]) {
                margin-left: calc(256px + (100vw - 256px - 760px) / 2);
                margin-right: 0;
            }
        }

        /* 1200-1279: study-rail is still the right-edge icon dock there (fixed,
           ~56px of glass at right:28px, painted above the page) — the sidebar
           variant only takes over at 1280. Pull the workspace in so the rail
           column never runs under the dock. Gates mirror study-rail.css, so
           when there is no dock (touch / short windows) the full 1180 stands. */
        @media (min-width: 1200px) and (max-width: 1279.98px) and (min-height: 600px) and (hover: hover) {
            body:not(.quiz-active) .container { max-width: calc(100vw - 200px); }
        }

        /* The builder's own surface, measures and CTA are one consolidated
           block in the main stylesheet — nothing about them is overridden
           here any more. */

        /* Banners read as slim rows on the open page. */
        #guestLimitBanner, #outageNotice, #installBanner { border-radius: 12px; }

        /* backdrop.css carried /app's only @media print rules; keep its
           white-paper guarantee for handouts now that the link is gone. */
        @media print {
            html, html[data-dark], body, .section-page,
            [data-dark] body, [data-dark] .section-page {
                background-color: #fff !important;
                background-image: none !important;
            }
        }
    

        /* ─────────────────────────────────────────────────────────────
           A · RESULTS SCREEN — the debrief

           A results slip, not a scoreboard. The mark is stated once and set
           large; structure comes from hairline rules rather than a stack of
           tinted rounded panels; and colour is rationed — violet for the one
           primary action and the measure, red for one meaning only (what you
           got wrong), nothing else. No gradients, no glows, no drop-shadowed
           stickers: every one of those was doing decoration, not work.

           Signature: the accuracy bar carries a tick at this student's own
           average for the subject, so the mark reads as "versus where I
           normally sit" instead of as a bare percentage.
        ───────────────────────────────────────────────────────────── */
        #scoreCard {
            --dbr-ink: #14141c;
            --dbr-sub: #565661;
            --dbr-mute: #6d6d78;
            --dbr-rule: #e8e8f0;
            --dbr-rule-hard: #d3d3e0;
            --dbr-track: #ececf4;
            --dbr-past: #b4b4c8;
            --dbr-accent: #5b50e8;
            --dbr-accent-ink: #4b40d8;
            --dbr-wrong: #cf2340;
            --dbr-hover: rgba(20, 20, 28, .04);
        }
        [data-dark] #scoreCard {
            --dbr-ink: #F5F5F7;
            --dbr-sub: #B4B4BD;
            --dbr-mute: #85858F;
            --dbr-rule: rgba(255, 255, 255, 0.14);
            --dbr-rule-hard: rgba(255, 255, 255, 0.14);
            --dbr-track: rgba(255, 255, 255, 0.08);
            --dbr-past: rgba(255, 255, 255, 0.22);
            --dbr-accent: #8b7cf8;
            --dbr-accent-ink: #9d94ff;
            --dbr-wrong: #ff6f88;
            --dbr-hover: rgba(255, 255, 255, .05);
        }

        #quizSection #scoreCard {
            padding: 24px 26px 26px;
            border-radius: 20px;
            border: 1px solid var(--dbr-rule);
            background: #fff;
            box-shadow: 0 1px 2px rgba(14, 18, 32, .04), 0 12px 32px -18px rgba(14, 18, 32, .18);
            overflow: visible;
            text-align: left;
            color: var(--dbr-ink);
        }
        [data-dark] #quizSection #scoreCard {
            background: #1D1D21;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 16px 40px -22px rgba(0, 0, 0, .7);
        }
        #quizSection #scoreCard::after { display: none; }

        /* Finished: the progress bar has nothing left to report, so it stops
           trailing the reader down over the debrief. */
        #quizSection .progress-wrap--done { position: static; }

        /* ── Masthead ── */
        #scoreCard .dbr-head {
            display: flex; align-items: baseline; justify-content: space-between;
            gap: 16px; padding-bottom: 12px; margin-bottom: 22px;
            border-bottom: 2px solid var(--dbr-ink);
        }
        #scoreCard .dbr-slug {
            font-family: var(--font-ui); font-size: .7rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: .13em; color: var(--dbr-mute);
            overflow-wrap: anywhere;
        }
        /* The tier, marked on the slip rather than stuck to it. */
        #scoreCard .debrief-stamp {
            position: static; flex-shrink: 0; opacity: 0;
            font-family: var(--font-ui); font-size: .66rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: .14em;
            padding: 4px 9px 3px; border-radius: 4px;
            border: 1.5px solid currentColor; background: none;
            color: var(--dbr-accent); -webkit-text-fill-color: currentColor;
            box-shadow: none;
        }
        #scoreCard .debrief-stamp[data-tier="flawless"] { color: #0a7d57; }
        #scoreCard .debrief-stamp[data-tier="passable"] { color: #9a5600; }
        #scoreCard .debrief-stamp[data-tier="shaky"]    { color: var(--dbr-wrong); }
        [data-dark] #scoreCard .debrief-stamp[data-tier="flawless"] { color: #4ad4a0; }
        [data-dark] #scoreCard .debrief-stamp[data-tier="passable"] { color: #f0b04a; }
        #scoreCard .debrief-stamp::before { content: none; }
        #scoreCard .debrief-stamp.show { animation: dbrStamp .3s ease-out forwards; }
        @keyframes dbrStamp { from { opacity: 0; } to { opacity: 1; } }

        /* ── The mark, and the remark ── */
        #scoreCard .dbr-result {
            display: grid; grid-template-columns: auto minmax(0, 1fr);
            align-items: center; gap: 34px; margin-bottom: 22px;
        }
        #scoreCard .dbr-frac {
            font-family: var(--font-display); font-weight: 800;
            font-size: 4.4rem; line-height: .82; letter-spacing: -.045em;
            font-variant-numeric: tabular-nums; color: var(--dbr-ink);
            white-space: nowrap;
        }
        /* What you scored is the loud half; what was available is context. */
        #scoreCard .dbr-frac .dbr-of,
        #scoreCard .dbr-frac #scoreTotal {
            color: var(--dbr-mute); font-size: .5em; letter-spacing: -.02em;
        }
        #scoreCard .dbr-frac .dbr-of { margin: 0 .04em 0 .1em; font-weight: 600; }
        #scoreCard .dbr-pct {
            font-family: var(--font-ui); font-size: .68rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: .13em;
            color: var(--dbr-mute); margin-top: 12px;
            font-variant-numeric: tabular-nums;
        }
        #scoreCard .debrief-verdict {
            display: block; max-width: 34ch; margin: 0; padding: 0;
            background: none; border: none; border-radius: 0; box-shadow: none;
            text-align: left;
        }
        #scoreCard .debrief-verdict-txt {
            font-family: var(--font-display); font-weight: 800; font-size: 1.32rem;
            line-height: 1.3; letter-spacing: -.015em; color: var(--dbr-ink);
        }

        /* ── The measure: this quiz against this student's own average ── */
        #scoreCard .dbr-measure { margin: 26px 0 18px; }
        #scoreCard .dbr-track {
            position: relative; height: 8px; border-radius: 2px;
            background: var(--dbr-track); overflow: hidden;
        }
        #scoreCard .dbr-fill {
            height: 100%; width: 0; border-radius: 2px;
            background: var(--dbr-accent);
            transition: width .9s .25s cubic-bezier(.22, .8, .3, 1);
        }
        #scoreCard .dbr-avg { display: none; }
        #scoreCard .dbr-measure[data-avg] .dbr-track { overflow: visible; }
        #scoreCard .dbr-measure[data-avg] .dbr-avg {
            display: block; position: absolute; top: -5px; bottom: -5px;
            left: var(--dbr-avg, 0%); width: 2px; margin-left: -1px;
            background: var(--dbr-ink); border-radius: 1px;
        }
        #scoreCard .dbr-measure[data-avg] .dbr-avg::after {
            content: 'Your average'; position: absolute; bottom: calc(100% + 5px); left: 50%;
            transform: translateX(-50%); white-space: nowrap;
            font-family: var(--font-ui); font-size: .58rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: .12em; color: var(--dbr-mute);
        }
        /* Near either end the centred label would hang off the card. These must
           follow the rule above — same specificity, so source order decides. */
        #scoreCard .dbr-measure[data-avg-edge="right"] .dbr-avg::after {
            left: auto; right: 0; transform: none;
        }
        #scoreCard .dbr-measure[data-avg-edge="left"] .dbr-avg::after {
            left: 0; right: auto; transform: none;
        }
        #scoreCard #subjectHistoryChip {
            display: none; margin: 10px 0 0; padding: 0; gap: 7px;
            background: none; border: none; border-radius: 0;
            font-family: var(--font-ui); font-size: .74rem; font-weight: 700;
            color: var(--dbr-mute);
        }
        #scoreCard #subjectHistoryChip .sjc-name { color: var(--dbr-mute); }
        #scoreCard #subjectHistoryChip .sjc-avg { color: var(--dbr-sub); }
        #scoreCard .sjc-delta[data-dir="up"] { color: #0a7d57; }
        #scoreCard .sjc-delta[data-dir="down"] { color: #9a5600; }
        [data-dark] #scoreCard .sjc-delta[data-dir="up"] { color: #4ad4a0; }
        [data-dark] #scoreCard .sjc-delta[data-dir="down"] { color: #f0b04a; }

        /* ── The three figures ── */
        #scoreCard .score-stats {
            display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0; margin: 0;
            border-top: 1px solid var(--dbr-rule);
            border-bottom: 1px solid var(--dbr-rule);
        }
        #scoreCard .score-stat {
            padding: 15px 18px 16px; text-align: left;
            background: none; border: none; border-radius: 0; box-shadow: none;
        }
        #scoreCard .score-stat + .score-stat {
            border-left: 1px solid var(--dbr-rule);
        }
        #scoreCard .score-stat:first-child { padding-left: 0; }
        #scoreCard .score-stat-label {
            font-family: var(--font-ui); font-size: .62rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: .13em;
            color: var(--dbr-mute); margin: 0 0 8px;
        }
        #scoreCard .score-stat-val {
            font-family: var(--font-display); font-weight: 800;
            font-size: 1.7rem; line-height: 1; letter-spacing: -.02em;
            font-variant-numeric: tabular-nums;
            color: var(--dbr-ink); -webkit-text-fill-color: var(--dbr-ink); margin: 0;
        }
        /* Red means one thing on this card: what you got wrong. */
        #scoreCard .score-stat--wrong.has-wrong .score-stat-val {
            color: var(--dbr-wrong); -webkit-text-fill-color: var(--dbr-wrong);
        }

        /* ── Recap chips: only what the figures above don't already say ── */
        #scoreCard .score-recap { gap: 0; margin: 0; justify-content: flex-start; }
        #scoreCard .score-recap:empty { display: none; }
        #scoreCard .recap-chip {
            padding: 14px 0 0; border: none; border-radius: 0;
            background: none; box-shadow: none; gap: 9px;
        }
        #scoreCard .recap-chip-ico { color: #9a5600; }
        [data-dark] #scoreCard .recap-chip-ico { color: #f0b04a; }
        #scoreCard .recap-chip-val { font-size: 1rem; color: var(--dbr-ink); }
        #scoreCard .recap-chip-lbl { color: var(--dbr-mute); }

        /* ── Next steps, as rows: navigational, not four competing buttons ── */
        #scoreCard .debrief-next { margin-top: 0; }
        #scoreCard .debrief-next > div + div > button { border-top: 1px solid var(--dbr-rule); }
        #scoreCard .debrief-next button {
            display: flex; align-items: center; justify-content: space-between;
            width: 100%; margin: 0; padding: 15px 0; text-align: left;
            background: none; border: none; border-radius: 0; box-shadow: none;
            font-family: var(--font-ui); font-size: .95rem; font-weight: 800;
            color: var(--dbr-ink);
            transition: color .14s, padding .14s;
        }
        #scoreCard .debrief-next button::after {
            content: '→'; font-size: 1rem; color: var(--dbr-mute);
            transition: transform .16s, color .14s;
        }
        #scoreCard .debrief-next button:hover { color: var(--dbr-accent-ink); }
        #scoreCard .debrief-next button:hover::after { transform: translateX(3px); color: var(--dbr-accent-ink); }
        #scoreCard .debrief-next .btn-review-toggle,
        #scoreCard .debrief-next .btn-review-toggle:hover,
        #scoreCard .debrief-next .btn-review-toggle::after,
        #scoreCard .debrief-next .btn-review-toggle:hover::after { color: var(--dbr-wrong); }

        /* The recommendation reads as one more row, not a card inside a card:
           it borrows the row's padding, hairline and arrow, and spends its
           only colour on the kicker. Nothing tinted, no icon, no pill — the
           row above is red because it names misses, and this one is not. */
        #scoreCard .debrief-next .btn-up-next { align-items: center; }
        #scoreCard .un-kicker {
            font-size: .68rem; font-weight: 800; letter-spacing: .12em;
            text-transform: uppercase; color: var(--dbr-accent-ink);
            margin-right: 14px; flex-shrink: 0;
        }
        /* margin-right:auto beats the row's space-between, so the kicker and
           the line stay together and the arrow keeps the far edge. */
        #scoreCard .un-line {
            display: flex; flex-direction: column; align-items: flex-start;
            min-width: 0; margin-right: auto;
        }
        #scoreCard .un-line .un-title {
            font-size: .95rem; font-weight: 800; color: var(--dbr-ink);
            transition: color .14s;
        }
        #scoreCard .un-line .un-reason {
            font-size: .8rem; font-weight: 600; color: var(--dbr-mute); margin-top: 2px;
        }
        #scoreCard .debrief-next .btn-up-next:hover .un-title { color: var(--dbr-accent-ink); }

        /* ── Consistency: streak and recent form share one quiet row ── */
        #scoreCard .dbr-meta {
            display: flex; flex-wrap: wrap; align-items: center;
            justify-content: space-between; gap: 18px 28px;
            margin-top: 0; padding: 16px 0 20px;
            border-top: 1px solid var(--dbr-rule);
        }
        #scoreCard .streak-section {
            display: flex; align-items: center; gap: 14px; text-align: left;
            margin: 0; padding: 0; border: none; border-radius: 0; background: none;
        }
        #scoreCard .streak-copy { min-width: 0; }
        #scoreCard .streak-headline {
            font-family: var(--font-ui); font-size: .84rem; font-weight: 800;
            letter-spacing: -.005em; color: var(--dbr-ink); margin: 0;
        }
        #scoreCard .streak-headline svg { display: none; }   /* the flame */
        #scoreCard .streak-sub { display: none; }            /* "You're on a roll!" */
        #scoreCard .week-dots { gap: 6px; flex-shrink: 0; }
        #scoreCard .week-dot-circle {
            width: 22px; height: 22px; font-size: .58rem; font-weight: 800;
            background: none; border: 1.5px solid var(--dbr-rule-hard);
            color: var(--dbr-mute); box-shadow: none;
        }
        #scoreCard .week-dot-circle.active {
            background: var(--dbr-accent); border-color: var(--dbr-accent);
            color: #fff; box-shadow: none;
        }
        /* The dark accent is a light violet — white on it is 3.3:1. */
        [data-dark] #scoreCard .week-dot-circle.active { color: #18181B; }
        #scoreCard .week-dot-circle.today { border-color: var(--dbr-ink); color: var(--dbr-ink); }
        #scoreCard .week-dot-label {
            font-size: .56rem; font-weight: 700; letter-spacing: .04em;
            text-transform: uppercase; color: var(--dbr-mute); margin-top: 5px;
        }
        #scoreCard #scoreHistoryWrap {
            display: none; width: auto; margin: 0; padding: 0;
            background: none; border: none; border-radius: 0;
        }
        #scoreCard .sh-label {
            font-size: .62rem; font-weight: 800; letter-spacing: .13em;
            text-transform: uppercase; color: var(--dbr-mute); margin-bottom: 8px;
        }
        #scoreCard .sh-bars { gap: 4px; height: 38px; align-items: stretch; }
        #scoreCard .sh-bar {
            flex: 0 0 11px; height: 100%; min-height: 0; border-radius: 2px;
            display: flex; align-items: flex-end; outline: none;
            background: var(--dbr-track);
        }
        #scoreCard .sh-fill {
            width: 100%; min-height: 2px; border-radius: 2px;
            background: var(--dbr-past);
        }
        #scoreCard .sh-bar.sh-current .sh-fill { background: var(--dbr-accent); }

        /* ── Actions: one primary, then a quiet row ── */
        #scoreCard .score-actions {
            gap: 10px; margin-top: 4px; justify-content: stretch;
        }
        #scoreCard .score-actions button {
            border-radius: 999px; font-family: var(--font-ui); font-weight: 800;
            font-size: .9rem; padding: 12px 18px; letter-spacing: -.005em;
            flex: 1 1 auto; box-shadow: none; transition: background .14s, border-color .14s, color .14s;
        }
        #scoreCard .btn-retry.btn-retry--primary,
        #scoreCard .btn-retry.btn-retry--wide { flex: 1 1 100%; }
        #scoreCard .btn-retry.btn-retry--primary {
            background: var(--dbr-accent); color: #fff; border: none;
            font-size: .98rem; padding: 15px 22px;
        }
        #scoreCard .btn-retry.btn-retry--primary:hover { background: var(--dbr-accent-ink); color: #fff; transform: none; }
        [data-dark] #scoreCard .btn-retry.btn-retry--primary { color: #18181B; }
        [data-dark] #scoreCard .btn-retry.btn-retry--primary:hover { color: #18181B; }
        #scoreCard .score-actions .btn-share,
        #scoreCard .score-actions .btn-retry:not(.btn-retry--primary) {
            background: none; color: var(--dbr-sub);
            border: 1px solid var(--dbr-rule-hard);
        }
        #scoreCard .score-actions .btn-share:hover,
        #scoreCard .score-actions .btn-retry:not(.btn-retry--primary):hover {
            transform: none; background: var(--dbr-hover);
            border-color: var(--dbr-ink); color: var(--dbr-ink);
        }

        /* ── Save-progress nudge ── */
        #scoreCard .debrief-nudge {
            align-items: center; gap: 14px; margin-top: 18px; padding: 16px 0 0;
            text-align: left; background: none; border: none;
            border-top: 1px solid var(--dbr-rule); border-radius: 0;
        }
        #scoreCard .debrief-nudge-copy { flex: 1; min-width: 0; }
        #scoreCard .debrief-nudge-title {
            font-family: var(--font-ui); font-weight: 800; font-size: .88rem; color: var(--dbr-ink);
        }
        #scoreCard .debrief-nudge-sub { font-size: .78rem; color: var(--dbr-sub); margin-top: 3px; }
        #scoreCard .debrief-nudge-x {
            background: none; border: none; color: var(--dbr-mute);
            cursor: var(--cur-point, pointer); font-size: .9rem; line-height: 1; padding: 6px;
        }
        #scoreCard .debrief-nudge-x:hover { color: var(--dbr-ink); }

        /* ── Optional bands keep the card's rhythm ── */
        #scoreCard #pbBanner {
            margin: 0 0 20px; padding: 10px 14px; border-radius: 8px;
            background: none; border: 1px solid var(--dbr-accent);
            color: var(--dbr-accent-ink); font-size: .82rem;
        }
        [data-dark] #scoreCard #pbBanner { color: var(--dbr-accent-ink); }
        /* No bottom rule: the figures row below supplies one. */
        #scoreCard .exam-marks-breakdown {
            margin: 0; padding: 16px 0 4px; background: none;
            border: none; border-top: 1px solid var(--dbr-rule); border-radius: 0;
        }

        #scoreCard :focus-visible {
            outline: 2px solid var(--dbr-accent); outline-offset: 3px; border-radius: 4px;
        }

        @media (prefers-reduced-motion: reduce) {
            #scoreCard .debrief-stamp.show { animation: none; opacity: 1; }
            #scoreCard .dbr-fill { transition: none; }
            #scoreCard .debrief-next button:hover::after { transform: none; }
            #settingsPage .set-row:hover { transform: none; }
        }

        /* Below ~720px the mark and the remark stop sharing a line. */
        @media (max-width: 720px) {
            #scoreCard .dbr-result { grid-template-columns: minmax(0, 1fr); gap: 16px; }
            #scoreCard .dbr-frac { font-size: 3.9rem; }
            #scoreCard .debrief-verdict { max-width: none; }
            #scoreCard .debrief-verdict-txt { font-size: 1.2rem; }
            #scoreCard .score-stat { padding: 14px 12px 15px; }
        }
        @media (max-width: 560px) {
            #scoreCard .dbr-meta { align-items: flex-start; gap: 16px; }
            #scoreCard .streak-section { width: 100%; justify-content: space-between; }
        }
        @media (max-width: 480px) {
            #scoreCard .debrief-next .btn-up-next { flex-wrap: wrap; align-items: flex-start; }
            #scoreCard .un-kicker { flex: 0 0 100%; margin: 0 0 6px; }
        }
        @media (max-width: 430px) {
            #quizSection #scoreCard { padding: 20px 18px 22px; border-radius: 18px; }
            #scoreCard .dbr-head { margin-bottom: 18px; }
            #scoreCard .dbr-frac { font-size: 3.4rem; }
            #scoreCard .debrief-verdict-txt { font-size: 1.12rem; }
            #scoreCard .score-stat { padding: 13px 9px 14px; }
            #scoreCard .score-stat-val { font-size: 1.4rem; }
            #scoreCard .score-stat-label { font-size: .56rem; letter-spacing: .1em; }
            #scoreCard .week-dot-circle { width: 20px; height: 20px; }
            #scoreCard .score-actions .btn-share,
            #scoreCard .score-actions .btn-retry:not(.btn-retry--primary) { flex: 1 1 120px; padding: 12px 10px; }
            #scoreCard .debrief-nudge { flex-wrap: wrap; gap: 12px; }
            #scoreCard .debrief-nudge-copy { flex: 1 1 100%; }
            #scoreCard .debrief-nudge .nav-auth-btn { flex: 1; }
        }

        /* ─────────────────────────────────────────────────────────────
           B · ACCOUNT — settings screen
           A settings page, not a lobby. One card language (white-first, a
           1px border, no gradients or drop shadows), one button system, and
           a "label column | controls" grid on desktop. Every rule is scoped
           under #accountPage, so nothing else on the app moves.
        ───────────────────────────────────────────────────────────── */
        /* Wider than the 760px study-tool column: the two-column section grid
           below spends 220px of it on labels before the controls start. */
        #accountPage > * { max-width: 880px; }
        /* Every section page paints the app's 40px dark-mode grid; behind a
           settings screen it reads as noise, so this page sits on the flat
           navy instead. Light mode keeps the shared soft washes. */
        [data-dark] #accountPage.section-page { background-image: none; }
        #accountPage h2 { margin-bottom: 6px; }
        #accountPage .acct-lede {
            color: var(--text-muted); font-size: .92rem;
            line-height: 1.6; margin: 0 auto 22px;
        }
        /* Back control. Below the rail breakpoint the floating #sectionBack
           pill is the one back control on every section page, so this page
           carries no inline arrow there. On the wide rail layout the pill
           hides itself — and un-hiding it for this page put it on top of the
           rail — so Account (which has no rail entry) gets a quiet back link
           inside its own column instead, shown only where the pill is not. */
        #accountPage .acct-back {
            display: none;
            align-items: center;
            gap: 7px;
            margin: 0 auto 14px;
            padding: 6px 10px 6px 4px;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: var(--text-muted);
            font-family: var(--font-ui, 'Plus Jakarta Sans'), sans-serif;
            font-size: .88rem;
            font-weight: 800;
            cursor: var(--cur-point, pointer);
            transition: color .14s ease, transform .14s ease;
        }
        #accountPage .acct-back:hover { color: var(--text-primary); transform: translateX(-2px); }
        #accountPage .acct-back:focus-visible { outline: 3px solid rgba(91, 80, 232, .4); outline-offset: 2px; }
        #accountPage .acct-back svg { flex: none; width: 16px; height: 16px; }
        @media (min-width: 1280px) and (min-height: 600px) and (hover: hover) {
            body.rail-left #accountPage .acct-back { display: inline-flex; }
        }

        /* ── Identity: who this account is, and how it is going ── */
        #accountPage .acct-id {
            display: grid; gap: 18px; align-items: center;
            background: var(--card-bg, #fff);
            border: 1px solid var(--card-border);
            border-radius: 18px; padding: 20px; margin: 0 auto 22px;
        }
        /* Top-aligned, not centred: the block beside it is two or three lines
           deep and a vertically centred bot floats below the name. */
        #accountPage .acct-id-who { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
        /* renderAvatarGrid() fills this with the same avatarSVG() the nav uses,
           so the page opens on the student's own bot. */
        #accountPage .acct-id-bot {
            flex: none; width: 52px; height: 52px; border-radius: 50%;
            overflow: hidden; background: transparent;
        }
        #accountPage .acct-id-bot svg { width: 100%; height: 100%; }
        #accountPage .acct-id-lines { min-width: 0; }
        #accountPage .acct-plan {
            display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
            padding: 4px 11px 4px 9px; border-radius: 999px;
            border: 1px solid var(--card-border); background: rgba(91, 80, 232, .06);
            color: var(--violet); font-size: .74rem; font-weight: 800;
        }
        #accountPage .acct-plan svg { width: 12px; height: 12px; flex: none; }
        [data-dark] #accountPage .acct-plan { color: #b9b2ff; background: rgba(255, 255, 255, 0.055); }

        #accountPage .acct-stats {
            display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 16px;
        }
        #accountPage .acct-stat { min-width: 0; }
        #accountPage .acct-stat-val {
            font-family: var(--font-display); font-weight: 800;
            font-size: 1.3rem; line-height: 1.1; color: var(--text-primary);
        }
        #accountPage .acct-stat-label {
            font-size: .7rem; font-weight: 700; color: var(--text-muted); margin-top: 1px;
        }

        /* renderLevelCard() writes the dashboard's gradient banner in here too.
           On this page it is one slim progress line rather than a second
           headline — restyled, so the two screens keep sharing one renderer. */
        #accountPage #acctLevel { margin-top: 15px; }
        #accountPage #acctLevel .level-card {
            display: block; gap: 0; padding: 0; margin: 0;
            background: none; box-shadow: none; border-radius: 0; color: inherit;
        }
        /* The level number is already in the title line ("· Level 3"). */
        #accountPage #acctLevel .level-ring { display: none; }
        #accountPage #acctLevel .level-title {
            font-family: var(--font-display); font-size: .82rem;
            font-weight: 800; color: var(--text-primary);
        }
        #accountPage #acctLevel .level-title .lt-sub {
            font-family: var(--font-ui); font-size: .78rem;
            font-weight: 700; color: var(--text-muted); opacity: 1;
        }
        #accountPage #acctLevel .level-bar {
            height: 6px; margin: 7px 0 5px; background: rgba(91, 80, 232, .14);
        }
        #accountPage #acctLevel .level-bar-fill { background: var(--violet); box-shadow: none; }
        #accountPage #acctLevel .level-xp {
            font-size: .72rem; font-weight: 700; color: var(--text-muted); opacity: 1;
        }
        [data-dark] #accountPage #acctLevel .level-bar { background: rgba(255, 255, 255, 0.08); }
        [data-dark] #accountPage #acctLevel .level-bar-fill { background: #8b7cf8; }

        @media (min-width: 720px) {
            #accountPage .acct-id { grid-template-columns: minmax(0, 1fr) 270px; gap: 26px; padding: 22px 24px; }
        }

        /* ── Settings rows ── */
        #accountPage .acct-sec {
            background: var(--card-bg, #fff);
            border: 1px solid var(--card-border);
            border-radius: 16px; padding: 20px; margin: 0 auto 14px;
        }
        /* The desktop `display: grid` below beats the UA's `[hidden]` rule, so
           the plan section would show itself before billing has answered. */
        #accountPage .acct-sec[hidden] { display: none; }
        #accountPage .acct-sec-title {
            font-family: var(--font-display); font-weight: 800;
            font-size: 1.05rem; line-height: 1.3; color: var(--text-primary); margin: 0;
        }
        #accountPage .acct-sec-sub {
            font-size: .82rem; line-height: 1.55; color: var(--text-muted); margin: 5px 0 0;
        }
        #accountPage .acct-sec-body { margin-top: 15px; }
        #accountPage .acct-sec-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

        @media (min-width: 900px) {
            #accountPage .acct-sec {
                display: grid; grid-template-columns: 220px minmax(0, 1fr);
                gap: 14px 28px; align-items: start; padding: 22px 24px;
            }
            #accountPage .acct-sec-body { margin-top: 0; }
        }

        /* ── Danger zone ── */
        #accountPage .acct-danger { border-color: rgba(220, 38, 38, .3); }
        #accountPage .acct-danger .acct-sec-title { color: #b91c1c; }
        [data-dark] #accountPage .acct-danger { border-color: rgba(248, 113, 113, .32); }
        [data-dark] #accountPage .acct-danger .acct-sec-title { color: #fca5a5; }

        /* ── One button system for the page ──
           primary (violet fill) · secondary (violet outline) · quiet-danger
           (text) · danger (red fill). Same height, radius and weight whatever
           element is underneath, so a link and a <button> read as one family. */
        #accountPage .acct-btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 7px;
            min-height: 44px; padding: 0 20px;
            font-family: var(--font-ui); font-size: .9rem; font-weight: 800;
            border: 1.5px solid transparent; border-radius: 999px;
            background: transparent; color: var(--text-primary);
            text-decoration: none; white-space: nowrap;
            cursor: var(--cur-point, pointer);
            transition: background .15s ease, border-color .15s ease, color .15s ease;
        }
        /* `display: inline-flex` above beats the UA's `[hidden]` rule, and the
           plan card hides Cancel / Keep / Update card by exactly that attribute
           — without this, Cancel and Keep both sit in the row at once. */
        #accountPage .acct-btn[hidden] { display: none; }
        #accountPage .acct-btn:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
        #accountPage .acct-btn:disabled { opacity: .55; cursor: not-allowed; }
        #accountPage .acct-btn--primary { background: var(--violet); border-color: var(--violet); color: #fff; }
        #accountPage .acct-btn--primary:hover:not(:disabled) { background: #4b41d4; border-color: #4b41d4; }
        #accountPage .acct-btn--secondary {
            color: var(--violet); border-color: rgba(91, 80, 232, .38); background: var(--card-bg, #fff);
        }
        #accountPage .acct-btn--secondary:hover:not(:disabled) {
            border-color: var(--violet); background: rgba(91, 80, 232, .06);
        }
        #accountPage .acct-btn--quiet-danger { color: #b91c1c; padding: 0 14px; }
        #accountPage .acct-btn--quiet-danger:hover:not(:disabled) { background: rgba(220, 38, 38, .08); }
        #accountPage .acct-btn--danger { background: #dc2626; border-color: #dc2626; color: #fff; }
        #accountPage .acct-btn--danger:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; }
        [data-dark] #accountPage .acct-btn--secondary {
            color: #b9b2ff; border-color: rgba(255, 255, 255, 0.22); background: transparent;
        }
        [data-dark] #accountPage .acct-btn--secondary:hover:not(:disabled) {
            border-color: #8b7cf8; background: rgba(255, 255, 255, 0.055);
        }
        [data-dark] #accountPage .acct-btn--quiet-danger { color: #fca5a5; }
        [data-dark] #accountPage .acct-btn--quiet-danger:hover:not(:disabled) { background: rgba(248, 113, 113, .12); }

        /* ── Fields ── */
        #accountPage .avatar-grid { margin: 0 0 22px; }
        #accountPage .avatar-hint { margin: -12px 0 22px; }
        #accountPage .auth-field { margin-bottom: 12px; }
        #accountPage .auth-field:last-of-type { margin-bottom: 0; }
        #accountPage .auth-field label {
            font-size: .78rem; font-weight: 700; color: var(--text-secondary);
            text-transform: none; letter-spacing: 0; margin-bottom: 6px;
        }
        #accountPage .auth-field input {
            min-height: 44px; padding: 11px 13px; border-radius: 10px;
            background: #fafbff; border: 1.5px solid var(--card-border);
        }
        [data-dark] #accountPage .auth-field input { background: #232327; border-color: rgba(255, 255, 255, 0.14); }
        #accountPage .acct-del-field { max-width: 250px; }
        #accountPage .auth-error { margin: 14px 0 0; border-radius: 10px; }

        /* ── Plan & billing, in the same language as the rest of the page ── */
        #accountPage .plan-status {
            display: flex; flex-wrap: wrap; align-items: baseline;
            justify-content: space-between; gap: 4px 14px;
            background: none; border: 1px solid var(--card-border);
            border-radius: 12px; padding: 12px 14px; margin: 0;
        }
        #accountPage .plan-now-name { font-size: 1.05rem; }
        #accountPage .plan-now-term { font-size: .64rem; background: rgba(91, 80, 232, .1); }
        #accountPage .plan-when { margin-top: 0; font-size: .82rem; }
        #accountPage .plan-ending { border-radius: 10px; margin-top: 10px; font-size: .82rem; }
        #accountPage .plan-switch { margin: 14px 0 10px; border-radius: 12px; }
        #accountPage .plan-offers { gap: 8px; margin-bottom: 14px; }
        #accountPage .plan-offer { border-width: 1px; border-radius: 12px; }
        #accountPage .plan-offer:hover:not([disabled]) { transform: none; box-shadow: none; }
        #accountPage .plan-actions {
            gap: 10px; padding-top: 14px; border-top: 1px solid var(--card-border);
        }
        /* The row is buttons now, so the underline the text links carried would
           only draw a line inside each pill. */
        #accountPage .plan-link, #accountPage .plan-compare { text-decoration: none; }
        /* Compare is a button in this row now, and four of them don't fit on
           one line — pushed flush right it wrapped to a line of its own with
           nothing beside it. It is still last, which is the point. */
        #accountPage .plan-compare { margin-left: 0; }
        #accountPage .plan-msg { font-size: .84rem; margin-top: 12px; }

        /* Receipts read as a table on anything wider than a phone. */
        #accountPage .plan-invoices {
            border-top: 1px solid var(--card-border); margin-top: 16px; padding-top: 14px;
        }
        #accountPage .plan-invoices-head { margin: 0 0 8px; }
        /* Never over "No invoices yet." or "Loading invoices…" — only over
           rows there actually are. */
        #accountPage .plan-inv-thead { display: none; }
        #accountPage .plan-inv-row { padding: 10px 0; border-bottom-color: var(--card-border); }
        @media (min-width: 560px) {
            #accountPage .plan-invoices:has(.plan-inv-row) .plan-inv-thead,
            #accountPage .plan-inv-row {
                display: grid; grid-template-columns: 106px minmax(0, 1fr) 186px;
                gap: 0 16px; align-items: baseline;
            }
            #accountPage .plan-inv-thead {
                font-size: .64rem; font-weight: 900; letter-spacing: .08em;
                text-transform: uppercase; color: var(--text-muted);
                padding-bottom: 7px; border-bottom: 1px solid var(--card-border);
            }
            /* `display: contents` lifts the date and description into the row's
               own grid. Every cell then names its column, so an invoice with no
               description can't slide the amount into the wrong one. */
            #accountPage .plan-inv-main { display: contents; }
            #accountPage .plan-inv-date { grid-column: 1; }
            #accountPage .plan-inv-desc { grid-column: 2; }
            /* Packed left, not right: an invoice with no PDF link would
               otherwise push its amount to a different x than the row above. */
            #accountPage .plan-inv-side {
                grid-column: 3; justify-content: flex-start; text-align: left;
            }
        }
        /* The only controls on this page still under 44px on a finger. Padding
           grows the hit area; the drawn link is unchanged, and desktop rows
           stay compact. */
        @media (pointer: coarse) {
            #accountPage .plan-inv-links a {
                display: inline-flex; align-items: center; min-height: 44px;
            }
        }

        @media (max-width: 430px) {
            #accountPage .acct-id, #accountPage .acct-sec { padding: 18px 16px; }
            #accountPage .acct-id-bot { width: 46px; height: 46px; border-radius: 50%; }
            #accountPage .acct-stat-val { font-size: 1.2rem; }
            #accountPage .acct-stats { gap: 4px 10px; }
            #accountPage .acct-sec-actions .acct-btn { flex: 1 1 100%; }
            #accountPage .plan-actions .acct-btn { flex: 1 1 100%; }
            /* The text button keeps its own width — stretched to the full
               column it reads as a red heading rather than a control. */
            #accountPage .plan-actions .acct-btn--quiet-danger { flex: 0 0 auto; }
            #accountPage .acct-del-field { max-width: none; }
        }

        /* ─────────────────────────────────────────────────────────────
           C · SETTINGS v3
        ───────────────────────────────────────────────────────────── */
        #settingsPage .settings-group { margin-bottom: 22px; }
        #settingsPage .settings-group-title {
            font-family: var(--font-ui); font-size: .72rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: .09em; color: var(--text-muted);
            margin: 0 4px 10px; display: flex; align-items: center; gap: 8px;
        }
        #settingsPage .settings-group-title::after { content: ''; flex: 1; height: 1.5px; background: linear-gradient(90deg, rgba(91,80,232,.16), transparent); border-radius: 2px; }
        /* Hide a conditional group whose rows are all still display:none (e.g. a
           signed-out guest with no analytics) so its header never orphans. */
        #settingsPage .settings-group--auto:not(:has(.set-row:not([style*="none"]))) { display: none; }
        #settingsPage .set-row {
            gap: 14px; padding: 15px 16px; border-radius: 18px; margin-bottom: 10px;
            border: 1.5px solid var(--card-border);
            box-shadow: 0 8px 20px -16px rgba(91,80,232,.5);
            transition: border-color .16s, box-shadow .16s, transform .16s;
        }
        #settingsPage .set-row:hover { border-color: rgba(91,80,232,.26); transform: translateY(-1px); }
        @media (hover: none) { #settingsPage .set-row:hover { transform: none; } }
        #settingsPage .set-row-lead { display: flex; align-items: center; gap: 13px; flex: 1; min-width: 0; }
        #settingsPage .set-row-ico {
            flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            background: linear-gradient(160deg, rgba(91,80,232,.12), rgba(34,195,221,.07));
            border: 1.5px solid rgba(91,80,232,.14); color: var(--violet);
        }
        [data-dark] #settingsPage .set-row-ico { color: #b9b2ff; border-color: rgba(255, 255, 255, 0.14); background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(34,195,221,.1)); }
        #settingsPage .set-row-ico svg { width: 19px; height: 19px; }
        #settingsPage .set-row-title { font-weight: 800; font-size: .96rem; }
        /* Beefier, glowing switch */
        #settingsPage .toggle-switch { width: 52px; height: 30px; }
        #settingsPage .toggle-switch .toggle-thumb { width: 23px; height: 23px; top: 3.5px; left: 3.5px; }
        #settingsPage .toggle-switch[aria-checked="true"] {
            background: linear-gradient(135deg, var(--violet), #22c3dd);
            box-shadow: 0 4px 14px -2px rgba(34,195,221,.5);
        }
        #settingsPage .toggle-switch[aria-checked="true"] .toggle-thumb { left: 25.5px; }
    

        /* ═══════════════════════════════════════════════════
           TEST — the builder's primitives for the setup, the quiz's card
           language for the run, and the debrief's register for the slip.
           One token set drives light and dark; every hover sits behind
           @media (hover: hover) so a finger never leaves one stuck on.
        ═══════════════════════════════════════════════════ */
        #testPage {
            --tst-ink: #14141c;
            --tst-sub: #565661;
            --tst-mute: #6d6d78;
            --tst-rule: rgba(91, 80, 232, .16);
            --tst-rule-soft: #e8e8f0;
            --tst-surface: #fff;
            --tst-accent: #5b50e8;
            --tst-accent-ink: #4b40d8;
            --tst-wrong: #cf2340;
        }

        [data-dark] #testPage {
            --tst-ink: #F5F5F7;
            --tst-sub: #B4B4BD;
            --tst-mute: #85858F;
            --tst-rule: rgba(255, 255, 255, 0.08);
            --tst-rule-soft: rgba(255, 255, 255, 0.14);
            --tst-surface: #1D1D21;
            --tst-accent: #8b7cf8;
            --tst-accent-ink: #9d94ff;
            --tst-wrong: #ff6f88;
        }

        /* ── Head: the flashcards page's eyebrow, heading, one sub ── */
        #testPage .tool-hero { margin-bottom: 20px; }
        #testPage .tool-hero h2::before { display: none; }

        #testPage .generator-kicker::before {
            content: none;
            width: 20px;
            height: 2px;
            border-radius: 2px;
            background: var(--violet);
        }

        [data-dark] #testPage .generator-kicker { color: var(--text-secondary); }
        [data-dark] #testPage .generator-kicker::before { background: #9d94ff; }

        #testPage .tool-hero h2 {
            margin: 9px 0 0;
            font-family: var(--font-display);
            font-size: clamp(1.5rem, 2.7vw, 2rem);
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: -.025em;
            color: var(--tst-ink);
        }

        #testPage .tool-hero p {
            max-width: 620px;
            margin: 8px 0 0;
            color: var(--tst-sub);
            font-size: .95rem;
            font-weight: 600;
            line-height: 1.5;
        }

        /* ── The card surface: .95 white, hairline, 20px ── */
        #testPage .tst-card {
            padding: 22px 24px 24px;
            border: 1px solid var(--tst-rule);
            border-radius: 20px;
            background: var(--tst-surface);
            box-shadow: 0 1px 2px rgba(14, 18, 32, .04), 0 12px 32px -18px rgba(14, 18, 32, .18);
        }

        [data-dark] #testPage .tst-card {
            box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 16px 40px -22px rgba(0, 0, 0, .7);
        }

        #testPage #testSetup { padding: 0; border: 0; background: none; box-shadow: none; }
        [data-dark] #testPage .csel-trigger { border-color: #85858F; }

        /* ── Settings: three segmented controls in the primitives' grid ── */
        #testPage .builder-group-label { margin-top: 4px; }

        /* The shared deck bar arrives as a tinted, bordered panel — a card
           inside the card. Here it is a field like the three below it: small
           caps caption over a 48px control. */
        #testPage .study-deck-bar {
            display: block;
            margin: 0 0 4px;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: none;
        }

        #testPage .study-deck-bar label {
            display: block;
            margin-bottom: 6px;
            color: var(--tst-mute);
            font-size: .875rem;
            font-weight: 600;
            letter-spacing: 0;
            text-transform: none;
        }

        #testPage .study-deck-bar .csel { width: 100%; }

        #testPage .csel-trigger {
            min-height: 48px;
            border-radius: 12px;
            border-color: #8791a3;
            background: var(--tst-surface);
            font-weight: 600;
        }

        #testPage .tst-settings {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: 18px 14px;
        }

        #testPage .setting-field { min-width: 0; }

        #testPage .field-label {
            display: block;
            margin-bottom: 6px;
            color: var(--tst-mute);
            font-size: .875rem;
            font-weight: 600;
            letter-spacing: 0;
            text-transform: none;
        }

        /* min-content, not 0, is the floor: .preset-opt is white-space:nowrap,
           so a track allowed to shrink below its label does not clip it — the
           text escapes a centred flex box BOTH ways and paints straight over
           the neighbouring segment, which is why scrollWidth never reported
           this. An equal third of the 230px group track is ~62px; "Multiple
           choice" needs 100px and "Exam pace" 72px, so both overflowed at
           EVERY width from 360 to 1440, worst (42px) at 768. The group has
           room to grow into — the row is three groups in a 1080px column —
           so let the track ask for what its label needs. */
        #testPage .preset-switch[data-cols="3"] {
            grid-template-columns: repeat(3, minmax(min-content, 1fr));
        }

        /* A segment the deck is too small for is off, not hidden: the reason
           is one line down, in the caption. */
        #testPage .preset-opt[aria-disabled="true"] {
            opacity: .42;
            cursor: var(--cur-not, not-allowed);
        }

        /* ── Primary: flat violet, 48px, matching the builder ── */
        #testPage .tst-primary {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            min-height: 48px;
            margin-top: 22px;
            padding: 12px 24px;
            border: 0;
            border-radius: 12px;
            background: var(--violet);
            color: #fff;
            font-family: var(--font-ui);
            font-size: .95rem;
            font-weight: 700;
            cursor: var(--cur-point, pointer);
            transition: background .16s ease;
        }

        @media (hover: hover) {
            #testPage .tst-primary:hover { background: var(--violet-shade, #4b40d8); }
        }

        #testPage .tst-primary:focus-visible {
            outline: 3px solid var(--violet);
            outline-offset: 3px;
        }

        [data-dark] #testPage .tst-primary:focus-visible { outline-color: #9d94ff; }

        #testPage .builder-caption {
            margin: 10px 0 0;
            color: var(--tst-mute);
            font-size: .82rem;
            font-weight: 600;
        }

        /* ── Empty state ── */
        #testPage .tst-empty-title {
            margin: 0;
            font-family: var(--font-display);
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--tst-ink);
        }

        #testPage .tst-empty-sub {
            margin: 6px 0 14px;
            color: var(--tst-sub);
            font-size: .9rem;
            font-weight: 600;
        }

        #testPage .tst-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 44px;
            padding: 0;
            border: 0;
            background: none;
            color: var(--tst-accent-ink);
            font-family: var(--font-ui);
            font-size: .86rem;
            font-weight: 800;
            cursor: var(--cur-point, pointer);
        }

        /* ── The run: a quiet header row, then the question ── */
        #testPage .tst-runhead {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 12px;
            padding: 0 4px;
        }

        #testPage .tst-count,
        #testPage .tst-clock {
            font-family: var(--font-ui);
            font-size: .8rem;
            font-weight: 800;
            letter-spacing: .06em;
            color: var(--tst-mute);
            font-variant-numeric: tabular-nums;
        }

        #testPage .tst-clock.is-low { color: var(--tst-wrong); }

        #testPage .tst-question { padding: 24px 24px 26px; }

        #testPage .tst-kind {
            margin-bottom: 8px;
            color: var(--tst-accent-ink);
            font-size: .68rem;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

        #testPage .tst-prompt {
            margin-bottom: 18px;
            font-family: var(--font-display);
            font-size: 1.2rem;
            font-weight: 800;
            line-height: 1.3;
            letter-spacing: -.01em;
            color: var(--tst-ink);
        }

        #testPage .tst-opts { display: grid; gap: 10px; }

        #testPage .tst-opt {
            display: flex;
            align-items: center;
            gap: 14px;
            width: 100%;
            min-height: 52px;
            padding: 12px 16px;
            border: 1px solid var(--tst-rule);
            border-radius: 14px;
            background: var(--tst-surface);
            color: var(--tst-ink);
            font-family: var(--font-ui);
            font-size: .95rem;
            font-weight: 600;
            line-height: 1.4;
            text-align: left;
            cursor: var(--cur-point, pointer);
            transition: border-color .15s ease, background .15s ease, color .15s ease;
        }

        #testPage .tst-opt-key {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border: 1px solid var(--tst-rule);
            border-radius: 8px;
            color: var(--tst-mute);
            font-size: .74rem;
            font-weight: 800;
            transition: border-color .15s ease, color .15s ease, background .15s ease;
        }

        #testPage .tst-opt-text { min-width: 0; }

        @media (hover: hover) {
            #testPage .tst-opt:hover:not(:disabled) { border-color: var(--tst-accent); }
        }

        #testPage .tst-opt:focus-visible {
            outline: 3px solid var(--violet);
            outline-offset: 2px;
        }

        [data-dark] #testPage .tst-opt:focus-visible { outline-color: #9d94ff; }

        #testPage .tst-opt.picked {
            border-color: var(--tst-accent);
            box-shadow: inset 0 0 0 1px var(--tst-accent);
        }

        #testPage .tst-opt.picked .tst-opt-key {
            border-color: var(--tst-accent);
            background: var(--tst-accent);
            color: #fff;
        }

        [data-dark] #testPage .tst-opt.picked .tst-opt-key { color: #18181B; }

        /* Violet marks the answer. Red means one thing here too: the option
           you chose and got wrong. */
        #testPage .tst-opt.is-answer {
            border-color: var(--tst-accent);
            box-shadow: inset 0 0 0 1px var(--tst-accent);
        }

        #testPage .tst-opt.is-wrong { border-color: var(--tst-wrong); color: var(--tst-wrong); box-shadow: none; }
        #testPage .tst-opt.is-wrong .tst-opt-key { border-color: var(--tst-wrong); background: none; color: var(--tst-wrong); }
        [data-dark] #testPage .tst-opt.is-wrong .tst-opt-key { color: var(--tst-wrong); }
        #testPage .tst-opt:disabled { cursor: default; opacity: 1; }

        #testPage .tst-typed .input-text {
            width: 100%;
            height: 48px;
            border-radius: 12px;
        }

        #testPage .tst-feedback {
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px solid var(--tst-rule-soft);
        }

        #testPage .tst-feedback-line {
            font-family: var(--font-ui);
            font-size: .86rem;
            font-weight: 800;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: var(--tst-mute);
        }

        #testPage .tst-feedback.is-wrong .tst-feedback-line { color: var(--tst-wrong); }
        #testPage .tst-feedback.is-right .tst-feedback-line { color: var(--tst-accent-ink); }

        #testPage .tst-feedback-answer {
            display: flex;
            flex-wrap: wrap;
            gap: 4px 10px;
            margin-top: 8px;
            color: var(--tst-ink);
            font-size: .95rem;
            font-weight: 700;
            line-height: 1.45;
        }

        #testPage .tst-feedback-label {
            flex-shrink: 0;
            color: var(--tst-mute);
            font-size: .62rem;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
            line-height: 1.9;
        }

        #testPage .tst-override {
            min-height: 44px;
            margin-top: 6px;
            padding: 0;
            border: 0;
            background: none;
            color: var(--tst-accent-ink);
            font-family: var(--font-ui);
            font-size: .86rem;
            font-weight: 800;
            cursor: var(--cur-point, pointer);
        }

        #testPage #testRunCaption { margin-top: 12px; text-align: center; }

        /* A keyboard hint on a device with no keyboard is doing no work. */
        @media (pointer: coarse) {
            #testPage #testRunCaption { display: none; }
        }

        /* ── The slip: hairlines, one mark, red only for the Wrong count ── */
        #testPage .tst-slip {
            padding: 24px 26px 26px;
            border: 1px solid var(--tst-rule-soft);
            border-radius: 20px;
            background: var(--tst-surface);
            box-shadow: 0 1px 2px rgba(14, 18, 32, .04), 0 12px 32px -18px rgba(14, 18, 32, .18);
            color: var(--tst-ink);
        }

        [data-dark] #testPage .tst-slip {
            box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 16px 40px -22px rgba(0, 0, 0, .7);
        }

        #testPage .tst-slug {
            font-family: var(--font-ui);
            font-size: .68rem;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--tst-mute);
        }

        #testPage .tst-mark {
            margin-top: 14px;
            font-family: var(--font-display);
            font-size: 3.2rem;
            font-weight: 800;
            line-height: 1;
            letter-spacing: -.03em;
            font-variant-numeric: tabular-nums;
        }

        #testPage .tst-of {
            margin: 0 .04em 0 .1em;
            color: var(--tst-mute);
            font-weight: 600;
        }

        #testPage .tst-mark #testTotal { color: var(--tst-mute); }

        #testPage .tst-verdict {
            margin: 10px 0 22px;
            max-width: 46ch;
            color: var(--tst-sub);
            font-size: .95rem;
            font-weight: 600;
            line-height: 1.5;
        }

        /* Two figures on one hairline band — no tinted panels. */
        #testPage .tst-figures {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            border-top: 1px solid var(--tst-rule-soft);
            border-bottom: 1px solid var(--tst-rule-soft);
        }

        #testPage .tst-figure { padding: 15px 18px 16px; }
        #testPage .tst-figure:first-child { padding-left: 0; }
        #testPage .tst-figure + .tst-figure { border-left: 1px solid var(--tst-rule-soft); }

        #testPage .tst-figure-label {
            margin-bottom: 8px;
            font-family: var(--font-ui);
            font-size: .62rem;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
            color: var(--tst-mute);
        }

        #testPage .tst-figure-val {
            font-family: var(--font-display);
            font-size: 1.7rem;
            font-weight: 800;
            line-height: 1;
            letter-spacing: -.02em;
            font-variant-numeric: tabular-nums;
            color: var(--tst-ink);
        }

        /* Red is spent here and nowhere else on the slip. */
        #testPage .tst-figure--wrong.has-wrong .tst-figure-val { color: var(--tst-wrong); }

        #testPage .tst-misses:empty { display: none; }

        #testPage .tst-misses-head {
            margin: 20px 0 2px;
            font-family: var(--font-ui);
            font-size: .62rem;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
            color: var(--tst-mute);
        }

        #testPage .tst-miss {
            padding: 14px 0;
            border-bottom: 1px solid var(--tst-rule-soft);
        }

        #testPage .tst-miss-term {
            font-family: var(--font-display);
            font-size: .98rem;
            font-weight: 800;
            letter-spacing: -.005em;
            color: var(--tst-ink);
        }

        #testPage .tst-miss-answer {
            margin-top: 3px;
            color: var(--tst-sub);
            font-size: .9rem;
            font-weight: 600;
            line-height: 1.45;
        }

        #testPage .tst-miss-said {
            margin-top: 4px;
            color: var(--tst-mute);
            font-size: .8rem;
            font-weight: 600;
        }

        /* ── The two ways out, as rows: navigational, not competing buttons ── */
        #testPage .tst-next { margin-top: 4px; }
        #testPage .tst-next-slot + .tst-next-slot .tst-row { border-top: 1px solid var(--tst-rule-soft); }

        #testPage .tst-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            min-height: 52px;
            padding: 15px 0;
            border: 0;
            background: none;
            color: var(--tst-ink);
            font-family: var(--font-ui);
            font-size: .95rem;
            font-weight: 800;
            text-align: left;
            cursor: var(--cur-point, pointer);
            transition: color .14s ease;
        }

        #testPage .tst-row--lead { color: var(--tst-accent-ink); }

        #testPage .tst-row::after {
            content: '→';
            font-size: 1rem;
            color: var(--tst-mute);
            transition: transform .16s ease, color .14s ease;
        }

        #testPage .tst-row--lead::after { color: var(--tst-accent-ink); }

        @media (hover: hover) {
            #testPage .tst-row:hover { color: var(--tst-accent-ink); }
            #testPage .tst-row:hover::after { transform: translateX(3px); color: var(--tst-accent-ink); }
        }

        @media (prefers-reduced-motion: reduce) {
            #testPage .tst-row:hover::after { transform: none; }
            #testPage .tst-opt,
            #testPage .tst-primary,
            #testPage .tst-row { transition: none; }
        }

        #testPage .tst-row:focus-visible {
            outline: 3px solid var(--violet);
            outline-offset: 2px;
        }

        [data-dark] #testPage .tst-row:focus-visible { outline-color: #9d94ff; }

        #testPage .tst-allclear {
            padding: 15px 0;
            font-family: var(--font-ui);
            font-size: .95rem;
            font-weight: 800;
            color: var(--tst-accent-ink);
        }

        /* ── Wide ── */
        @media (min-width: 900px) {
            #testPage .tool-hero h2 { font-size: 1.55rem; }
        }

        /* ── Phone: one column, nothing docked, nothing to clear ── */
        @media (max-width: 560px) {
            #testPage .tst-card,
            #testPage .tst-slip { padding: 20px 18px 22px; }
            #testPage .tst-settings { grid-template-columns: minmax(0, 1fr); }
            #testPage .tst-mark { font-size: 2.7rem; }
            #testPage .preset-opt { font-size: .8rem; padding: 9px 4px; }
            #testPage .tst-figure { padding: 14px 12px 15px; }
        }
    

        /* ══════════════════════════════════════════════════
           DAILY REVIEW — one queue over the mistake bank and the decks whose
           review date has come round. Same primitives as the Test page: the
           builder's head and primary, the quiz's card for the run, the
           debrief's hairline register for the slip. One token set drives
           light and dark; every hover sits behind @media (hover: hover).
        ══════════════════════════════════════════════════ */
        #dailyReview {
            --rvq-ink: #14141c;
            --rvq-sub: #565661;
            --rvq-mute: #6d6d78;
            --rvq-rule: rgba(91, 80, 232, .16);
            --rvq-rule-soft: #e8e8f0;
            --rvq-surface: #fff;
            --rvq-accent: #5b50e8;
            --rvq-accent-ink: #4b40d8;
            --rvq-wrong: #cf2340;
        }

        [data-dark] #dailyReview {
            --rvq-ink: #F5F5F7;
            --rvq-sub: #B4B4BD;
            --rvq-mute: #85858F;
            --rvq-rule: rgba(255, 255, 255, 0.08);
            --rvq-rule-soft: rgba(255, 255, 255, 0.14);
            --rvq-surface: #1D1D21;
            --rvq-accent: #8b7cf8;
            --rvq-accent-ink: #9d94ff;
            --rvq-wrong: #ff6f88;
        }

        /* ── Head: eyebrow, heading, one sub ── */
        #dailyReview .tool-hero { margin-bottom: 20px; }
        #dailyReview .tool-hero h2::before { display: none; }

        #dailyReview .generator-kicker::before {
            content: '';
            width: 20px;
            height: 2px;
            border-radius: 2px;
            background: var(--violet);
        }

        [data-dark] #dailyReview .generator-kicker { color: #9d94ff; }
        [data-dark] #dailyReview .generator-kicker::before { background: #9d94ff; }

        #dailyReview .tool-hero h2 {
            margin: 9px 0 0;
            font-family: var(--font-display);
            font-size: 1.35rem;
            font-weight: 800;
            line-height: 1.14;
            letter-spacing: -.01em;
            color: var(--rvq-ink);
        }

        #dailyReview .tool-hero p {
            max-width: 620px;
            margin: 8px 0 0;
            color: var(--rvq-sub);
            font-size: .95rem;
            font-weight: 600;
            line-height: 1.5;
        }

        /* ── The card surface ── */
        #dailyReview .rvq-card {
            padding: 22px 24px 24px;
            border: 1px solid var(--rvq-rule);
            border-radius: 20px;
            background: var(--rvq-surface);
            box-shadow: 0 1px 2px rgba(14, 18, 32, .04), 0 12px 32px -18px rgba(14, 18, 32, .18);
        }

        [data-dark] #dailyReview .rvq-card {
            box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 16px 40px -22px rgba(0, 0, 0, .7);
        }

        /* What the queue is made of, as figures on a hairline band — the
           slip's own device, so the intro states the split without a
           paragraph explaining it. */
        #dailyReview .rvq-figures {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            border-bottom: 1px solid var(--rvq-rule-soft);
        }

        #dailyReview .rvq-figure { padding: 2px 18px 16px; }
        #dailyReview .rvq-figure:first-child { padding-left: 0; }
        #dailyReview .rvq-figure + .rvq-figure { border-left: 1px solid var(--rvq-rule-soft); }

        #dailyReview .rvq-figure-label {
            margin-bottom: 8px;
            font-family: var(--font-ui);
            font-size: .62rem;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
            color: var(--rvq-mute);
        }

        #dailyReview .rvq-figure-val {
            font-family: var(--font-display);
            font-size: 1.7rem;
            font-weight: 800;
            line-height: 1;
            letter-spacing: -.02em;
            font-variant-numeric: tabular-nums;
            color: var(--rvq-ink);
        }

        #dailyReview .rvq-figure-note {
            margin-top: 5px;
            color: var(--rvq-mute);
            font-size: .8rem;
            font-weight: 600;
        }

        /* ── Primary: flat violet, 48px, matching the builder ── */
        #dailyReview .rvq-primary {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            min-height: 54px;
            margin-top: 22px;
            padding: 12px 24px;
            border: 0;
            border-radius: 999px;
            background: var(--violet);
            color: #fff;
            font-family: var(--font-display);
            font-size: 1.05rem;
            font-weight: 800;
            cursor: var(--cur-point, pointer);
            transition: background .16s ease;
        }

        @media (hover: hover) {
            #dailyReview .rvq-primary:hover { background: var(--violet-shade, #4b40d8); }
        }

        #dailyReview .rvq-primary:focus-visible {
            outline: 3px solid var(--violet);
            outline-offset: 3px;
        }

        [data-dark] #dailyReview .rvq-primary:focus-visible { outline-color: #9d94ff; }

        /* An explicit display beats [hidden]'s UA display:none, so the two
           panes that carry one would otherwise stay on screen while hidden —
           the multiple-choice question showed its self-grade buttons. */
        #dailyReview .rvq-primary[hidden],
        #dailyReview .rvq-grade[hidden] { display: none; }

        #dailyReview .builder-caption {
            margin: 10px 0 0;
            color: var(--rvq-mute);
            font-size: .82rem;
            font-weight: 600;
        }

        /* ── Nothing due ── */
        #dailyReview .rvq-empty { padding: 48px 20px; text-align: center; }

        #dailyReview .rvq-empty-tick {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 64px;
            height: 64px;
            margin-bottom: 16px;
            border-radius: 50%;
            background: var(--emerald-bg);
            color: var(--emerald);
        }

        #dailyReview .rvq-empty-title {
            margin: 0;
            font-family: var(--font-display);
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--rvq-ink);
        }

        #dailyReview .rvq-empty-sub {
            max-width: 380px;
            margin: 6px auto 0;
            color: var(--rvq-mute);
            font-size: .9rem;
            font-weight: 600;
            line-height: 1.5;
        }

        /* ── The run ── */
        #dailyReview .rvq-runhead {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 10px;
        }

        #dailyReview .rvq-count,
        #dailyReview .rvq-source {
            font-family: var(--font-ui);
            font-size: .78rem;
            font-weight: 800;
            letter-spacing: .04em;
            color: var(--rvq-mute);
            font-variant-numeric: tabular-nums;
        }

        #dailyReview .rvq-source {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            letter-spacing: 0;
        }

        #dailyReview .rvq-question { padding: 24px 24px 26px; }

        #dailyReview .rvq-kind {
            font-family: var(--font-ui);
            font-size: .62rem;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
            color: var(--rvq-mute);
        }

        #dailyReview .rvq-prompt {
            margin-top: 10px;
            font-family: var(--font-display);
            font-size: 1.15rem;
            font-weight: 800;
            line-height: 1.34;
            letter-spacing: -.01em;
            color: var(--rvq-ink);
        }

        #dailyReview .rvq-opts { display: grid; gap: 10px; margin-top: 18px; }
        #dailyReview .rvq-opts:empty { display: none; }

        #dailyReview .rvq-opt {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            min-height: 52px;
            padding: 12px 16px;
            border: 1px solid var(--rvq-rule);
            border-radius: 14px;
            background: var(--rvq-surface);
            color: var(--rvq-ink);
            font-family: var(--font-ui);
            font-size: .95rem;
            font-weight: 700;
            line-height: 1.4;
            text-align: left;
            cursor: var(--cur-point, pointer);
            transition: border-color .14s ease, box-shadow .14s ease;
        }

        #dailyReview .rvq-opt-key {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 26px;
            height: 26px;
            border: 1px solid var(--rvq-rule);
            border-radius: 8px;
            color: var(--rvq-mute);
            font-size: .78rem;
            font-weight: 800;
        }

        #dailyReview .rvq-opt-text { min-width: 0; }

        @media (hover: hover) {
            #dailyReview .rvq-opt:hover:not(:disabled) { border-color: var(--rvq-accent); }
        }

        #dailyReview .rvq-opt:focus-visible {
            outline: 3px solid var(--violet);
            outline-offset: 2px;
        }

        [data-dark] #dailyReview .rvq-opt:focus-visible { outline-color: #9d94ff; }

        #dailyReview .rvq-opt.is-answer {
            border-color: var(--rvq-accent);
            box-shadow: inset 0 0 0 1px var(--rvq-accent);
        }

        #dailyReview .rvq-opt.is-answer .rvq-opt-key {
            border-color: var(--rvq-accent);
            color: var(--rvq-accent-ink);
        }

        /* Red is spent on the option you picked and got wrong, nowhere else. */
        #dailyReview .rvq-opt.is-wrong {
            border-color: var(--rvq-wrong);
            color: var(--rvq-wrong);
            box-shadow: none;
        }

        #dailyReview .rvq-opt.is-wrong .rvq-opt-key {
            border-color: var(--rvq-wrong);
            background: none;
            color: var(--rvq-wrong);
        }

        [data-dark] #dailyReview .rvq-opt.is-wrong .rvq-opt-key { color: var(--rvq-wrong); }

        #dailyReview .rvq-opt:disabled { cursor: default; opacity: 1; }

        #dailyReview .rvq-feedback {
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px solid var(--rvq-rule-soft);
        }

        #dailyReview .rvq-feedback-line {
            font-family: var(--font-display);
            font-size: 1rem;
            font-weight: 800;
            color: var(--rvq-accent-ink);
        }

        #dailyReview .rvq-feedback.is-right .rvq-feedback-line { color: var(--rvq-accent-ink); }
        #dailyReview .rvq-feedback.is-wrong .rvq-feedback-line { color: var(--rvq-wrong); }

        #dailyReview .rvq-feedback-answer {
            margin-top: 8px;
            color: var(--rvq-ink);
            font-size: .95rem;
            font-weight: 700;
            line-height: 1.45;
        }

        #dailyReview .rvq-feedback-label {
            display: block;
            margin-bottom: 3px;
            font-family: var(--font-ui);
            font-size: .62rem;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
            color: var(--rvq-mute);
        }

        #dailyReview .rvq-feedback-note {
            margin-top: 6px;
            color: var(--rvq-sub);
            font-size: .88rem;
            font-weight: 600;
            line-height: 1.5;
        }

        /* Self-grade: the student's own call, so neither side is marked red. */
        #dailyReview .rvq-grade {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin-top: 22px;
        }

        #dailyReview .rvq-grade-btn {
            min-height: 54px;
            padding: 12px 18px;
            border: 1px solid var(--rvq-rule);
            border-radius: 999px;
            background: var(--rvq-surface);
            color: var(--rvq-ink);
            font-family: var(--font-display);
            font-size: 1rem;
            font-weight: 800;
            cursor: var(--cur-point, pointer);
            transition: border-color .14s ease, background .16s ease;
        }

        #dailyReview .rvq-grade-btn--knew {
            border-color: var(--violet);
            background: var(--violet);
            color: #fff;
        }

        @media (hover: hover) {
            #dailyReview .rvq-grade-btn:hover { border-color: var(--rvq-accent); }
            #dailyReview .rvq-grade-btn--knew:hover { background: var(--violet-shade, #4b40d8); }
        }

        #dailyReview .rvq-grade-btn:focus-visible {
            outline: 3px solid var(--violet);
            outline-offset: 3px;
        }

        [data-dark] #dailyReview .rvq-grade-btn:focus-visible { outline-color: #9d94ff; }

        /* ── The slip ── */
        #dailyReview .rvq-slip {
            padding: 24px 26px 26px;
            border: 1px solid var(--rvq-rule-soft);
            border-radius: 20px;
            background: var(--rvq-surface);
            box-shadow: 0 1px 2px rgba(14, 18, 32, .04), 0 12px 32px -18px rgba(14, 18, 32, .18);
            color: var(--rvq-ink);
        }

        [data-dark] #dailyReview .rvq-slip {
            box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 16px 40px -22px rgba(0, 0, 0, .7);
        }

        #dailyReview .rvq-slug {
            font-family: var(--font-ui);
            font-size: .68rem;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--rvq-mute);
        }

        #dailyReview .rvq-mark {
            margin-top: 14px;
            font-family: var(--font-display);
            font-size: 3.2rem;
            font-weight: 800;
            line-height: 1;
            letter-spacing: -.03em;
            font-variant-numeric: tabular-nums;
        }

        #dailyReview .rvq-of {
            margin: 0 .04em 0 .1em;
            color: var(--rvq-mute);
            font-weight: 600;
        }

        #dailyReview .rvq-mark #rvqTotal { color: var(--rvq-mute); }

        #dailyReview .rvq-mark-word {
            margin-left: .22em;
            font-size: 1.1rem;
            font-weight: 800;
            letter-spacing: -.01em;
            color: var(--rvq-mute);
        }

        #dailyReview .rvq-verdict {
            margin: 10px 0 4px;
            max-width: 46ch;
            color: var(--rvq-sub);
            font-size: .95rem;
            font-weight: 600;
            line-height: 1.5;
        }

        #dailyReview .rvq-redo:empty { display: none; }

        #dailyReview .rvq-redo-head {
            margin: 20px 0 2px;
            font-family: var(--font-ui);
            font-size: .62rem;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
            color: var(--rvq-mute);
        }

        #dailyReview .rvq-redo-row {
            padding: 14px 0;
            border-bottom: 1px solid var(--rvq-rule-soft);
        }

        #dailyReview .rvq-redo-term {
            font-family: var(--font-display);
            font-size: .98rem;
            font-weight: 800;
            letter-spacing: -.005em;
            color: var(--rvq-ink);
        }

        #dailyReview .rvq-redo-answer {
            margin-top: 3px;
            color: var(--rvq-sub);
            font-size: .9rem;
            font-weight: 600;
            line-height: 1.45;
        }

        #dailyReview .rvq-redo-from {
            margin-top: 4px;
            color: var(--rvq-mute);
            font-size: .8rem;
            font-weight: 600;
        }

        /* ── The way out, as a row ── */
        #dailyReview .rvq-next { margin-top: 4px; }

        #dailyReview .rvq-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            min-height: 52px;
            padding: 15px 0;
            border: 0;
            background: none;
            color: var(--rvq-accent-ink);
            font-family: var(--font-ui);
            font-size: .95rem;
            font-weight: 800;
            text-align: left;
            cursor: var(--cur-point, pointer);
            transition: color .14s ease;
        }

        #dailyReview .rvq-row::after {
            content: '\2192';
            font-size: 1rem;
            color: var(--rvq-accent-ink);
            transition: transform .16s ease;
        }

        @media (hover: hover) {
            #dailyReview .rvq-row:hover::after { transform: translateX(3px); }
        }

        @media (prefers-reduced-motion: reduce) {
            #dailyReview .rvq-row:hover::after { transform: none; }
            #dailyReview .rvq-opt,
            #dailyReview .rvq-primary,
            #dailyReview .rvq-grade-btn,
            #dailyReview .rvq-row { transition: none; }
        }

        #dailyReview .rvq-row:focus-visible {
            outline: 3px solid var(--violet);
            outline-offset: 2px;
        }

        [data-dark] #dailyReview .rvq-row:focus-visible { outline-color: #9d94ff; }

        /* ── Wide ── */
        @media (min-width: 900px) {
            #dailyReview .tool-hero h2 { font-size: 1.55rem; }
        }

        /* ── Phone: one column, nothing docked ── */
        @media (max-width: 560px) {
            #dailyReview .rvq-card,
            #dailyReview .rvq-slip { padding: 20px 18px 22px; }
            #dailyReview .rvq-question { padding: 20px 18px 22px; }
            #dailyReview .rvq-mark { font-size: 2.7rem; }
            #dailyReview .rvq-prompt { font-size: 1.05rem; }
            #dailyReview .rvq-figure { padding: 2px 12px 15px; }
            #dailyReview .rvq-grade-btn { font-size: .92rem; padding: 12px 10px; }
        }