/* study-review.css -- Review/learn container, landing screen, review create, learn config */

        /* ═══ Review panels, redesigned card pattern (James 2026-05-12) ═══
           Shared by Active Recall / Khio Tutor / Flashcards / Test / Podcast.
           Single big WHITE card, full-width inside the panel shell, hairline
           dividers between rows. Each row has a colored icon (no background
           tile), bold label + helper text on the left, a control on the
           right (pill row or textarea). Centered rocket CTA at the bottom. */
        .ar-card {
            background: #ffffff !important;
            border: 1px solid rgba(15,23,42,0.08);
            border-radius: 22px;
            padding: 28px 36px 28px;
            box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 10px 28px rgba(15,23,42,0.06);
        }
        .ar-card-head {
            display: flex; align-items: flex-start; gap: 16px;
            padding-bottom: 22px;
            border-bottom: 1px solid rgba(15,23,42,0.08);
            margin-bottom: 8px;
        }
        .ar-card-head-icon {
            width: 44px; height: 44px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            color: var(--ar-accent, #a85025);
        }
        .ar-card-head-icon i { width: 28px; height: 28px; }
        .ar-card-title {
            font-size: 22px; font-weight: 800;
            color: #1a1a1a;
            letter-spacing: -0.015em;
            line-height: 1.2;
        }
        .ar-card-sub {
            font-size: 14px; color: rgba(15,23,42,0.55);
            font-weight: 500; margin-top: 4px;
        }
        .ar-row {
            display: flex; align-items: center; gap: 24px;
            padding: 22px 0;
            border-bottom: 1px solid rgba(15,23,42,0.08);
        }
        .ar-row:last-of-type { border-bottom: none; }
        .ar-row-left {
            display: flex; align-items: flex-start; gap: 14px;
            flex: 0 0 38%; min-width: 0;
        }
        /* Icon, colored glyph only, no background tile. Per panel a
           CSS variable `--ar-accent` colors the icon + selected pill
           + the CTA, so each panel can have its own brand color while
           sharing the same layout. */
        .ar-row-icon {
            width: 32px; height: 32px; flex-shrink: 0;
            display: flex; align-items: flex-start; justify-content: center;
            color: var(--ar-accent, #a85025);
            margin-top: 1px;
        }
        .ar-row-icon i { width: 22px; height: 22px; }
        .ar-row-copy { min-width: 0; }
        .ar-row-label {
            font-size: 15px; font-weight: 700;
            color: #1a1a1a;
            line-height: 1.3;
        }
        .ar-row-meta {
            font-size: 13px; font-weight: 500;
            color: rgba(15,23,42,0.42);
            margin-left: 4px;
        }
        .ar-row-help {
            font-size: 13px; color: rgba(15,23,42,0.55);
            font-weight: 500; margin-top: 3px;
        }
        /* Pills, light rounded buttons with warm-orange active fill +
           checkmark. The active state reads at a glance. */
        .ar-pills {
            display: flex; gap: 10px;
            flex: 1; min-width: 0;
        }
        .ar-pill {
            flex: 1 1 0; min-width: 0;
            display: inline-flex; align-items: center; justify-content: center; gap: 6px;
            padding: 12px 14px;
            border-radius: 999px;
            border: 1px solid rgba(15,23,42,0.10);
            background: #ffffff;
            color: #1a1a1a;
            font-family: inherit; font-size: 14px; font-weight: 600;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .ar-pill:hover {
            border-color: var(--ar-accent, #a85025);
            background: rgba(168,80,37,0.04);
        }
        .ar-pill-check {
            width: 16px; height: 16px; display: none;
        }
        /* Active pill, filled accent, white text, visible check. Higher
           specificity than the legacy .review-setup-pill.active rule below
           so old styling doesn't bleed through. */
        .ar-card .ar-pill.review-setup-pill.active,
        .ar-card .ar-pill.active {
            background: var(--ar-accent, #a85025) !important;
            border-color: var(--ar-accent, #a85025) !important;
            color: #ffffff !important;
            box-shadow: 0 2px 8px rgba(168,80,37,0.28);
        }
        .ar-card .ar-pill.active .ar-pill-check { display: inline-flex; color: #ffffff; }
        /* Stacked row variant, label on top, control full-width below
           (used for the custom-instructions textarea + test-type grid). */
        .ar-row--stacked { flex-direction: column; align-items: stretch; gap: 14px; }
        .ar-row--stacked .ar-row-left { flex: 1; }
        .ar-textarea {
            width: 100%;
            min-height: 96px;
            border: 1.5px solid rgba(15,23,42,0.10);
            border-radius: 14px;
            padding: 14px 16px;
            font-family: inherit; font-size: 14px;
            background: #ffffff;
            color: #1a1a1a;
            resize: vertical;
            outline: none;
            box-sizing: border-box;
            transition: border-color 0.15s ease;
        }
        .ar-textarea:focus { border-color: var(--ar-accent, #a85025); }
        .ar-textarea::placeholder { color: rgba(15,23,42,0.4); }
        /* Centered CTA inside the card */
        .ar-cta-wrap {
            display: flex; justify-content: center;
            padding-top: 10px;
        }
        .ar-cta {
            display: inline-flex; align-items: center; justify-content: center; gap: 10px;
            min-width: 280px;
            padding: 14px 32px;
            border-radius: 14px;
            border: none;
            background: var(--ar-accent, #a85025);
            color: #ffffff;
            font-family: inherit; font-size: 16px; font-weight: 700;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(168,80,37,0.25);
            transition: filter 0.15s ease, transform 0.1s ease;
        }
        .ar-cta:hover { filter: brightness(1.05); }
        .ar-cta:active { filter: brightness(0.92); transform: translateY(1px); }
        .ar-cta i { width: 18px; height: 18px; }
        /* Test-type tiles inside the Test panel, clickable rectangles, no
           orange-tile background, accent-colored icon + label, active state
           is a soft accent-tinted border. Scoped under .ar-card so the new
           rules beat the legacy `.test-type-card` rules further down in
           this file (same specificity, but those load later and were
           winning the cascade). */
        .ar-card .ar-tile-grid {
            display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important;
        }
        .ar-card .ar-tile {
            display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
            gap: 8px !important;
            padding: 18px 12px !important;
            border-radius: 14px !important;
            border: 1.5px solid rgba(15,23,42,0.10) !important;
            background: #ffffff !important;
            cursor: pointer !important;
            transition: all 0.15s ease !important;
            transform: none !important;
            box-shadow: none !important;
        }
        .ar-card .ar-tile-icon {
            color: var(--ar-accent, #a85025) !important;
            background: transparent !important;
            width: auto !important; height: auto !important;
            display: inline-flex !important; align-items: center !important; justify-content: center !important;
        }
        .ar-card .ar-tile-icon i { width: 24px !important; height: 24px !important; color: var(--ar-accent, #a85025) !important; }
        .ar-card .ar-tile-title { font-size: 13px !important; font-weight: 700 !important; color: #1a1a1a !important; }
        .ar-card .ar-tile:hover {
            border-color: var(--ar-accent, #a85025) !important;
            background: rgba(168,80,37,0.03) !important;
            transform: none !important;
            box-shadow: none !important;
        }
        .ar-card .ar-tile.selected {
            background: rgba(168,80,37,0.06) !important;
            border-color: var(--ar-accent, #a85025) !important;
            transform: none !important;
            box-shadow: 0 2px 8px rgba(168,80,37,0.10) !important;
        }
        .ar-card .ar-tile.selected .ar-tile-icon,
        .ar-card .ar-tile.selected .ar-tile-icon i { color: var(--ar-accent, #a85025) !important; background: transparent !important; }
        .ar-card .ar-tile.selected .ar-tile-title { color: var(--ar-accent, #a85025) !important; }
        /* Slim toggle switch used inside the Test panel for the
           "Include fill-in-the-blank" row. Same accent as the rest of
           the ar-* family so it sits cleanly next to the pills. */
        .ar-toggle {
            position: relative;
            width: 52px; height: 30px;
            display: inline-block;
            flex-shrink: 0;
            cursor: pointer;
        }
        .ar-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
        .ar-toggle-track {
            position: absolute; inset: 0;
            background: rgba(15,23,42,0.18);
            border-radius: 999px;
            transition: background 0.18s ease;
        }
        .ar-toggle-knob {
            position: absolute; top: 3px; left: 3px;
            width: 24px; height: 24px;
            border-radius: 999px;
            background: #ffffff;
            box-shadow: 0 1px 3px rgba(0,0,0,0.18);
            transition: transform 0.18s ease;
        }
        .ar-toggle input:checked + .ar-toggle-track { background: var(--ar-accent, #a85025); }
        .ar-toggle input:checked + .ar-toggle-track .ar-toggle-knob { transform: translateX(22px); }
        /* "Previous Sessions" card, separate, sits BELOW the .ar-card.
           Always visible with an empty state so users can see where their
           history lives even before they've run a session. James 2026-05-12. */
        .ar-history {
            background: #ffffff;
            border: 1px solid rgba(15,23,42,0.08);
            border-radius: 18px;
            padding: 18px 22px;
            margin-top: 18px;
            box-shadow: 0 1px 2px rgba(15,23,42,0.04);
        }
        .ar-history-head {
            display: flex; align-items: center; gap: 10px;
            font-size: 13px; font-weight: 800;
            color: rgba(15,23,42,0.6);
            text-transform: uppercase; letter-spacing: 0.08em;
            margin-bottom: 12px;
        }
        .ar-history-head i { width: 16px; height: 16px; }
        .ar-history-empty {
            font-size: 13px; color: rgba(15,23,42,0.5);
            text-align: center; padding: 16px 8px;
            font-weight: 500;
        }
        @media (max-width: 768px) {
            .ar-card { padding: 20px 18px 18px; border-radius: 18px; }
            .ar-row { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 0; }
            .ar-row-left { flex: 1; }
            .ar-pill { padding: 10px 12px; font-size: 13px; }
            .ar-cta { width: 100%; min-width: 0; }
            .ar-tile-grid { grid-template-columns: 1fr 1fr; }
            .ar-history { padding: 14px 16px; border-radius: 14px; }
        }

        /* ═══ New tab, Tab navigation + centered panels ═══
           James 2026-05-12 v3: vertically center the redesigned panel
           card in the available viewport so it doesn't float at the
           top with a big empty void below. Flex column + min-height
           pins to "viewport minus the Review top bar" and the panel
           gets margin:auto so it sits in the middle. The previous v2
           bumped max-width 720→1200 so the card fills width too. */
        .new-tab-shell {
            max-width: 1200px;
            margin: 0 auto;
            padding: 24px 24px 60px;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            /* Top chrome (Review's .review-top-bar plus the app sidebar
               header on desktop) eats ~120px on a typical 1080px viewport.
               Subtract that so min-height equals the remaining canvas. */
            min-height: calc(100vh - 120px);
            box-sizing: border-box;
        }
        .new-tab-shell .new-panel {
            margin: auto 0;
            width: 100%;
        }
        /* Mobile + tutor-session takeover skip the vertical center ,
           those flows want the content top-aligned. */
        @media (max-width: 768px) {
            .new-tab-shell {
                min-height: auto;
                justify-content: flex-start;
            }
            .new-tab-shell .new-panel { margin: 0; }
        }
        body.tutor-session-active .new-tab-shell {
            min-height: auto !important;
            justify-content: flex-start !important;
        }
        body.tutor-session-active .new-tab-shell .new-panel { margin: 0 !important; }
        /* Chip slot sits inside the top-bar */
        .review-chip-slot { display: flex; justify-content: center; align-items: center; flex: 1; min-width: 0; }
        .new-jump-bar {
            display: flex; gap: 10px; justify-content: center;
            overflow-x: auto; scrollbar-width: none;
            padding: 0;
            margin: 0;
            flex-wrap: nowrap;
        }
        .new-jump-bar::-webkit-scrollbar { display: none; }
        /* Rounded pill chips, dark active state with accent border */
        .new-jump-chip {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 12px 20px;
            border-radius: 999px;
            background: var(--study-bg-secondary, rgba(0,0,0,0.04));
            border: 2px solid transparent;
            color: var(--study-text-secondary, #555);
            font-family: inherit; font-size: 14px; font-weight: 700;
            cursor: pointer; white-space: nowrap; flex-shrink: 0;
            transition: all 0.18s ease;
        }
        .new-jump-chip i { width: 16px; height: 16px; }
        .new-jump-chip:hover { color: var(--study-text, #1a1a1a); background: rgba(0,0,0,0.08); }
        .new-jump-chip.active {
            /* Matches the Study Sets mobile-method-tab.active treatment:
               solid accent (orange) pill with a subtle glow, instead of
               the previous black-with-orange-border which clashed with
               the warm Focused Scholar palette. */
            background: var(--study-accent, #e8853a);
            color: #fff;
            border-color: transparent;
            box-shadow: 0 2px 8px rgba(232, 133, 60, 0.28);
        }
        .new-jump-chip.active:hover {
            background: var(--study-accent, #e8853a);
            color: #fff;
        }
        .new-panel { animation: newPanelFade 0.2s ease; }
        @keyframes newPanelFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

        /* ═══ NEW: Per-section card pattern (Active Recall / Test /
           Flashcards). Replaces the "one big card holds everything"
           layout with discrete labeled cards stacked on the page bg. ═══ */
        .review-panel-title-row {
            display: flex;
            /* flex-start (not center) so single-line titles like "Khio
               Tutor" / "Podcast" don't appear pushed down because the
               36px icon dominates the row's vertical center. Active
               Recall's two-line title looked fine because it occupied
               the full icon height, single-line ones did not. */
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 18px;
            padding: 4px 4px 0;
        }
        .review-panel-title-icon {
            width: 36px; height: 36px;
            border-radius: 10px;
            background: var(--study-accent-dim, rgba(232,133,60,0.1));
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            color: var(--study-accent, #e8853a);
        }
        .review-panel-title-icon i { width: 20px; height: 20px; }
        .review-panel-title-text {
            font-size: 22px;
            font-weight: 800;
            color: var(--study-text);
            line-height: 1.2;
        }
        .review-section-card {
            background: var(--bg-card, #fff);
            border: 1px solid var(--study-border);
            border-radius: 16px;
            padding: 16px 18px;
            margin-bottom: 12px;
        }
        .review-section-card:last-of-type { margin-bottom: 16px; }
        .review-section-header {
            display: flex;
            align-items: baseline;
            gap: 8px;
            margin-bottom: 14px;
        }
        .review-section-header-title {
            font-size: 13px;
            font-weight: 800;
            color: var(--study-text);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .review-section-header-meta {
            font-size: 12px;
            color: var(--study-text-tertiary, rgba(0,0,0,0.4));
            font-weight: 500;
            text-transform: none;
            letter-spacing: 0;
        }
        .review-panel-title-row .review-panel-title-subtitle {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: var(--study-text-secondary, rgba(0,0,0,0.5));
            margin-top: 2px;
        }
        .review-section-card textarea {
            width: 100%;
            min-height: 80px;
            border: 1.5px solid var(--study-border);
            border-radius: 12px;
            padding: 12px 14px;
            font-family: inherit;
            font-size: 14px;
            background: var(--bg-base, #fafafa);
            color: var(--study-text);
            resize: vertical;
            outline: none;
            box-sizing: border-box;
        }
        .review-section-card textarea:focus { border-color: var(--study-accent); }
        .review-cta-btn {
            width: 100%;
            padding: 16px;
            border-radius: 14px;
            border: none;
            font-size: 16px;
            font-weight: 800;
            cursor: pointer;
            font-family: inherit;
            margin-top: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: filter 0.15s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        .review-cta-btn:active { filter: brightness(0.92); }
        /* Unified warm-orange palette for every CTA. The old --red/--blue
           /--green/--purple variants were inherited from a pre-Khio-brand
           color scheme and clashed with the warm peach palette used
           everywhere else. Variant class names kept so the JS doesn't
           need to change, but they all paint the same orange now.
           James 2026-05-12. */
        .review-cta-btn--primary,
        .review-cta-btn--red,
        .review-cta-btn--blue,
        .review-cta-btn--green,
        .review-cta-btn--purple { background: #a85025; color: #fff; }
        .review-cta-btn--primary:hover,
        .review-cta-btn--red:hover,
        .review-cta-btn--blue:hover,
        .review-cta-btn--green:hover,
        .review-cta-btn--purple:hover { background: #8a4118; }
        .review-cta-btn i { width: 18px; height: 18px; }

        /* Legacy pill-active + title-icon overrides removed 2026-05-12 ,
           the panels now use `.ar-card .ar-pill.active` / `.ar-card-head-icon`
           which already paint the filled-accent active state and the
           background-less colored icon. The old soft-tinted active rule
           outranked the new filled rule on specificity (id+2 classes vs
           4 classes), so it had to come out. */

        /* Empty-state Previous Sessions card was removed, these styles
           are kept neutralized so any cached/stale JS that still tries
           to render .review-empty-history* classes paints nothing. */
        .review-empty-history,
        .review-empty-history-label,
        .review-empty-history-card,
        .review-empty-history-icon,
        .review-empty-history-text { display: none !important; }

        /* Khio Tutor session takeover. While a real tutor session is
           active (body.tutor-session-active is set in startReview-
           TutorSession and removed by _backToTutorSetup / _endTutorSession),
           hide the Review chip bar so the tutor card is the only top
           chrome, its own back arrow returns to the setup screen.
           Also collapse the .new-tab-shell vertical padding so the
           tutor card hugs the safe-area edge. */
        body.tutor-session-active #view-review .review-top-bar,
        body.tutor-session-active #view-review .review-top-bar.review-top-bar-minimal {
            display: none !important;
        }
        body.tutor-session-active #view-review .new-tab-shell {
            padding-top: 0 !important;
        }
        @media (max-width: 768px) {
            /* Trim the 60px bottom whitespace below the panel cards on
               every Review tab, the mobile nav handles its own
               safe-area-bottom inset, so we only need a small breathing
               buffer here, not a full 60px. */
            .new-tab-shell { padding: 16px 16px 8px; }
            .new-jump-bar { justify-content: flex-start; flex-wrap: nowrap; gap: 8px; }
            .new-jump-chip { padding: 10px 16px; font-size: 13px; gap: 6px; }
            .new-jump-chip i { width: 15px; height: 15px; }
        }

        /* ═══ Active Recall settings modal ═══ */
        .active-recall-modal-backdrop {
            position: fixed; inset: 0; z-index: 10000;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
            display: flex; align-items: center; justify-content: center; padding: 20px;
            opacity: 0; transition: opacity 0.25s ease;
        }
        .active-recall-modal-backdrop.visible { opacity: 1; }
        .active-recall-modal {
            background: var(--bg-card, #fff);
            border: 2px solid #1a1a1a;
            border-radius: 24px;
            box-shadow: 4px 4px 0 #1a1a1a, 0 20px 60px rgba(0,0,0,0.15);
            padding: 32px; max-width: 480px; width: 100%;
            max-height: 90vh; overflow-y: auto; position: relative;
            font-family: 'Inter', sans-serif;
            transform: scale(0.96);
            transition: transform 0.25s ease;
        }
        .active-recall-modal-backdrop.visible .active-recall-modal { transform: scale(1); }
        .arm-close { position: absolute; top: 16px; right: 18px; background: none; border: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--study-text-tertiary); padding: 4px 10px; border-radius: 8px; }
        .arm-close:hover { background: rgba(0,0,0,0.05); color: var(--study-text); }
        .arm-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; padding-right: 30px; }
        .arm-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--study-accent-dim, rgba(232,133,58,0.12)); color: var(--study-accent, #e8853a); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .arm-icon i { width: 24px; height: 24px; }
        .arm-title { font-size: 20px; font-weight: 900; color: var(--study-text, #1a1a1a); margin-bottom: 2px; }
        .arm-sub { font-size: 13px; color: var(--study-text-secondary, #666); font-weight: 500; }
        .arm-section { margin-bottom: 18px; }
        .arm-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--study-text-tertiary, #888); margin-bottom: 10px; }
        .arm-optional { font-weight: 500; text-transform: none; letter-spacing: 0; }
        .arm-section textarea { width: 100%; min-height: 76px; border: 1.5px solid var(--study-border); border-radius: 12px; padding: 12px 14px; font-family: inherit; font-size: 14px; background: var(--study-bg-secondary, #f8f8f6); color: var(--study-text, #1a1a1a); resize: vertical; outline: none; box-sizing: border-box; transition: border-color 0.2s; }
        .arm-section textarea:focus { border-color: var(--study-accent, #e8853a); }
        .arm-start-btn { width: 100%; padding: 16px; border-radius: 14px; border: 2px solid rgba(232,133,58,0.3); background: var(--study-accent, #e8853a); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; font-family: inherit; box-shadow: 3px 3px 0 #1a1a1a; margin-top: 4px; transition: transform 0.15s; }
        .arm-start-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #1a1a1a; }
        .arm-start-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #1a1a1a; }

        /* ═══ Custom confirm dialog ═══ */
        .khio-confirm-backdrop {
            position: fixed; inset: 0; z-index: 10001;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
            display: flex; align-items: center; justify-content: center; padding: 20px;
            opacity: 0; transition: opacity 0.2s ease;
        }
        .khio-confirm-backdrop.visible { opacity: 1; }
        .khio-confirm-card {
            background: var(--bg-card, #fff);
            border: 2px solid #1a1a1a;
            border-radius: 18px;
            box-shadow: 4px 4px 0 #1a1a1a, 0 20px 60px rgba(0,0,0,0.18);
            padding: 26px 28px 22px;
            max-width: 380px; width: 100%;
            font-family: 'Inter', sans-serif;
            transform: scale(0.95);
            transition: transform 0.2s ease;
        }
        .khio-confirm-backdrop.visible .khio-confirm-card { transform: scale(1); }
        .khio-confirm-title { font-size: 18px; font-weight: 900; color: var(--study-text, #1a1a1a); margin-bottom: 6px; }
        .khio-confirm-msg { font-size: 14px; color: var(--study-text-secondary, #666); line-height: 1.5; margin-bottom: 20px; }
        .khio-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
        .khio-confirm-actions button {
            padding: 10px 20px; border-radius: 10px; font-family: inherit;
            font-size: 14px; font-weight: 700; cursor: pointer; border: 1.5px solid var(--study-border, #e5e5e5);
            transition: all 0.15s;
        }
        .khio-confirm-cancel { background: var(--bg-card, #fff); color: var(--study-text, #1a1a1a); }
        .khio-confirm-cancel:hover { background: var(--study-bg-secondary, #f5f5f5); }
        .khio-confirm-ok { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
        .khio-confirm-ok:hover { transform: translateY(-1px); }
        .khio-confirm-ok.danger { background: #ef4444; border-color: #ef4444; }
        .khio-confirm-ok.danger:hover { background: #dc2626; border-color: #dc2626; }

        /* ═══ Review / Learn Tab ═══ */
        .review-container { max-width: 1400px; width: 100%; margin: 0; padding: 32px 60px 36px; display: flex; flex-direction: column; min-height: 100%; text-align: left; }
        .review-top-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 0; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--study-border, rgba(0,0,0,0.06)); }
        .review-top-bar > .review-back-btn { justify-self: start; }
        .review-top-bar > .review-mode-tabs { justify-self: center; }
        .review-top-bar > .review-filter-compact { justify-self: end; }
        .review-top-bar.review-top-bar-minimal { display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: center; gap: 14px; }
        .review-top-bar.review-top-bar-minimal > .review-back-btn { justify-self: start; }
        .review-top-bar.review-top-bar-minimal > .review-chip-slot { justify-self: center; min-width: 0; max-width: 100%; }
        .review-top-bar.review-top-bar-minimal > .review-top-bar-spacer { justify-self: end; }
        /* Mobile: single horizontal row, Back + chips inline, scrollable together */
        @media (max-width: 768px) {
            .review-top-bar.review-top-bar-minimal {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                gap: 10px !important;
                /* In a regular mobile browser .study-main has no
                   safe-area-top padding, so .review-top-bar needs its
                   own to keep the chips below the iPhone notch.
                   In the iOS Capacitor app .study-main already pads
                   the safe area, adding it again here doubles the
                   top gap (a separate body.capacitor-app override
                   below collapses it back). */
                padding: calc(env(safe-area-inset-top, 0px) + 16px) 0 12px 0 !important;
                margin: 0 !important;
                overflow: visible !important;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                flex-wrap: nowrap !important;
                border-bottom: none;
                min-height: 42px;
                min-width: 0;
                max-width: 100%;
            }
            .review-top-bar.review-top-bar-minimal::-webkit-scrollbar { display: none; }
            .review-top-bar.review-top-bar-minimal > .review-back-btn {
                flex: 0 0 auto !important;
                justify-self: auto !important;
                order: 0;
            }
            .review-top-bar.review-top-bar-minimal > .review-chip-slot {
                flex: 1 1 auto !important;
                width: auto !important;
                max-width: 100% !important;
                min-width: 0 !important;
                overflow-x: auto !important;
                overflow-y: hidden !important;
                justify-content: flex-start !important;
                justify-self: auto !important;
                order: 1;
                display: flex !important;
                align-items: center !important;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }
            .review-top-bar.review-top-bar-minimal > .review-chip-slot::-webkit-scrollbar { display: none; }
            .review-top-bar.review-top-bar-minimal > .review-top-bar-spacer { display: none !important; }
            #reviewChipSlot .new-jump-bar {
                display: flex !important;
                flex-direction: row !important;
                justify-content: flex-start !important;
                flex-wrap: nowrap !important;
                overflow: visible !important;
                width: max-content !important;
                min-width: max-content !important;
                padding: 0 !important;
                padding-left: 10px !important;
                padding-right: 8px !important;
                margin: 0 !important;
                gap: 8px !important;
            }
            #reviewChipSlot .new-jump-chip { flex: 0 0 auto !important; }
        }
        .review-mode-tabs { display: flex; background: var(--study-bg-tertiary, rgba(0,0,0,0.04)); border-radius: 10px; padding: 3px; gap: 2px; }
        .review-mode-tab { padding: 10px 24px; border-radius: 8px; border: none; background: transparent; color: var(--study-text-secondary); font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: inherit; display: flex; align-items: center; gap: 7px; }
        .review-mode-tab.active { background: var(--study-accent); color: #fff; }
        .review-mode-tab:hover:not(.active) { color: var(--study-text); background: rgba(0,0,0,0.04); }
        .review-mode-tab .tab-badge { font-size: 10px; background: var(--study-accent); color: #fff; padding: 1px 6px; border-radius: 8px; font-weight: 700; }
        /* Landing screen */
        .review-landing { max-width: none; margin: 0; padding: 20px 0 28px; }
        .review-landing-header { margin-bottom: 14px; text-align: left; }
        .review-search-shell { position: relative; display: flex; align-items: center; min-width: 280px; }
        .review-search-input { width: 100%; height: 46px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--study-border) 55%, transparent); background: color-mix(in srgb, var(--study-bg) 78%, var(--study-bg-secondary)); color: var(--study-text); padding: 0 44px 0 18px; font: inherit; font-size: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
        .review-search-input::placeholder { color: var(--study-text-tertiary); }
        .review-search-input:focus { outline: none; border-color: color-mix(in srgb, var(--study-accent) 35%, var(--study-border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--study-accent) 10%, transparent); }
        .review-search-icon { position: absolute; right: 16px; width: 16px; height: 16px; color: var(--study-text-tertiary); pointer-events: none; }
        .review-landing-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
        .review-landing-inline-link { padding: 0; border: none; background: transparent; color: var(--study-accent); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
        .review-landing-inline-link:hover { opacity: 0.72; }
        .review-landing-inline-link.muted { color: var(--study-text-tertiary); cursor: default; }
        .review-landing-section { margin-bottom: 24px; }
        .review-landing-section-title { font-size: 11px; font-weight: 800; color: var(--study-text-tertiary); text-transform: uppercase; letter-spacing: 0.14em; margin: 0; }
        .review-set-grid { display: flex; flex-direction: column; gap: 8px; }
        .review-set-row { display: flex; align-items: center; gap: 18px; padding: 20px 24px; background: var(--bg-card, var(--study-bg-secondary)); border: 1px solid color-mix(in srgb, var(--study-border) 28%, transparent); border-radius: 18px; box-shadow: 0 4px 12px rgba(15,23,42,0.03); transition: all .2s ease; }
        .review-set-row:hover { box-shadow: 0 18px 36px rgba(15,23,42,0.055); transform: translateY(-1px); }
        .review-set-row.is-clickable { cursor: pointer; }
        .review-set-main { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1; }
        .review-set-methods { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
        .review-set-actions { display: flex; gap: 10px; flex-shrink: 0; }
        .review-set-open { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; color: var(--study-text-tertiary); background: color-mix(in srgb, var(--study-bg) 82%, var(--study-bg-secondary)); border: 1px solid color-mix(in srgb, var(--study-border) 45%, transparent); flex-shrink: 0; }
        .review-set-row.is-clickable:hover .review-set-open { color: var(--study-accent); border-color: color-mix(in srgb, var(--study-accent) 34%, var(--study-border)); }
        .review-set-badge { width: 64px; height: 64px; border-radius: 18px; background: color-mix(in srgb, var(--study-accent) 9%, var(--study-bg)); color: color-mix(in srgb, var(--study-accent) 78%, var(--study-text)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .review-set-badge i { width: 28px; height: 28px; }
        .review-set-info { flex: 1; min-width: 0; }
        .review-set-copy h4 { font-size: 22px; font-weight: 800; margin: 0 0 8px; line-height: 1.08; letter-spacing: -0.04em; color: var(--study-text); }
        .review-set-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--study-text-tertiary); }
        .review-set-meta span { display: inline-flex; align-items: center; gap: 6px; }
        .review-set-meta i { width: 13px; height: 13px; }
        .review-set-meta-dot { width: 4px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--study-text-tertiary) 55%, transparent); }
        .mastery-mini.mm-unfamiliar { background: rgba(239, 68, 68, 0.10); color: #c84c56; }
        .mastery-mini.mm-learning { background: rgba(232, 133, 58, 0.12); color: #b87431; }
        .mastery-mini.mm-familiar { background: rgba(59, 130, 246, 0.10); color: #557fc5; }
        .mastery-mini.mm-mastered { background: rgba(34, 197, 94, 0.10); color: #338a55; }
        .review-set-action { padding: 12px 20px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--study-border) 55%, transparent); background: color-mix(in srgb, var(--study-bg) 82%, var(--study-bg-secondary)); color: var(--study-text); font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 8px; transition: all 0.15s; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.045); }
        .review-set-action:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--study-accent) 34%, var(--study-border)); }
        .review-set-action.primary { background: linear-gradient(135deg, color-mix(in srgb, var(--study-accent) 88%, #c56f46), color-mix(in srgb, var(--study-accent) 74%, #8f4123)); color: #fff; border-color: transparent; box-shadow: 0 14px 24px color-mix(in srgb, var(--study-accent) 20%, transparent); }
        .review-set-action.primary:hover { filter: brightness(0.99); opacity: 1; }
        .review-set-action i { width: 14px; height: 14px; }
        .review-set-delete { padding: 12px; color: var(--study-text-tertiary); border-color: transparent; background: transparent; box-shadow: none; }
        .review-set-delete:hover { color: #ef4444; background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); }
        .review-landing-empty { text-align: center; padding: 48px 20px; }
        .review-landing-empty i { width: 48px; height: 48px; color: var(--study-text-tertiary); margin-bottom: 12px; opacity: 0.4; }
        .review-landing-empty h3 { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
        .review-landing-empty p { color: var(--study-text-secondary); font-size: 13px; }
        .review-empty-illustration { width: min(300px, 78vw); margin: 0 auto 18px; filter: drop-shadow(0 18px 30px rgba(15, 23, 42, 0.08)); }
        .review-search-empty { padding: 56px 16px; background: transparent; border: none; border-radius: 22px; }
        .review-back-btn { display: flex; align-items: center; gap: 3px; background: none; border: none; color: var(--study-text-secondary); cursor: pointer; font-size: 13px; font-weight: 700; font-family: inherit; padding: 4px 6px; border-radius: 6px; transition: color .15s; flex-shrink: 0; text-transform: uppercase; }
        .review-back-btn:hover { color: var(--study-text); background: none; }
        .review-back-btn i { width: 16px; height: 16px; }
        .review-filter-compact { position: relative; }
        .review-filter-compact select { background: rgba(255,255,255,0.06); color: var(--study-text); border: 1px solid var(--study-border); border-radius: 10px; padding: 10px 36px 10px 14px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
        .review-filter-compact select:focus { outline: none; border-color: var(--study-accent); }
        .review-card-area { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 12px 0; width: 100%; }
        .review-card-area .fc-card-wrap { height: 420px; max-width: none !important; width: 100% !important; }
        .review-card-area .fc-face { padding: 48px 40px; background: var(--study-bg-card, var(--bg-card, #fff)); border: 1px solid var(--study-border); box-shadow: 0 2px 12px rgba(0,0,0,0.04); border-radius: 20px; }
        .review-card-area .fc-text { font-size: 20px; font-weight: 600; line-height: 1.5; color: var(--study-text); }
        .review-card-area .fc-container { max-width: none !important; width: 100% !important; align-items: stretch !important; }
        .review-card-area .fc-actions { justify-content: center; }
        .review-session-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 0; }
        .review-session-counter { font-size: 20px; font-weight: 800; color: var(--study-accent); }
        .fc-question-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--study-text-tertiary); margin-bottom: 16px; }
        .fc-hint { font-size: 13px; color: var(--study-text-tertiary); margin-top: auto; display: flex; align-items: center; gap: 6px; }
        .fc-hint i { width: 14px; height: 14px; }
        .fc-space-badge { display: inline-block; padding: 4px 12px; border-radius: 6px; background: var(--study-text, #1a1a1a); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; margin-top: 12px; }
        .review-progress { width: 100%; max-width: 620px; margin: 0 auto 20px; }
        .review-progress-bar { height: 4px; background: var(--study-border); border-radius: 4px; overflow: hidden; }
        .review-progress-fill { height: 100%; background: var(--study-accent); border-radius: 4px; transition: width 0.3s ease; }
        .review-setup-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 20px;
            align-items: stretch;
        }
        .review-setup-section {
            background: var(--study-bg-secondary);
            border-radius: 16px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .review-setup-label {
            margin: 0;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            line-height: 1.25;
            color: var(--study-text-tertiary);
        }
        .review-setup-label .review-setup-label-muted {
            font-weight: 500;
            text-transform: none;
            letter-spacing: 0;
            opacity: .75;
        }
        /* Pills laid out 4-up on desktop so 3-5-10-All / Easy-Med-Hard-Mixed
           reads as a clean row rather than two oversized blocks. Drops to
           2-up on narrow viewports. James 2026-05-12. */
        .review-setup-pills {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
        }
        @media (max-width: 560px) {
            .review-setup-pills {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }
        }
        .review-setup-pills-four {
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        }
        .review-setup-textarea {
            background: var(--study-bg-secondary);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .review-setup-textarea .review-setup-label {
            margin-bottom: 10px;
        }
        .review-setup-pill { padding: 11px 12px; border-radius: 12px; border: 1.5px solid var(--study-border); background: var(--study-bg-card, var(--bg-card, #fff)); color: var(--study-text); font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; transition: border-color .18s ease, background .18s ease, color .18s ease; text-align: center; box-sizing: border-box; }
        .review-setup-pill:hover { border-color: #d8b89a; background: #fdf7f0; }
        .review-setup-pill.active { border-color: #a85025; background: rgba(168, 80, 37, 0.08); color: #a85025; }
        .test-type-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px 20px; background: var(--study-bg-card, var(--bg-card, #fff)); border: 2px solid var(--study-border); border-radius: 20px; cursor: pointer; transition: all .25s ease; text-align: center; }
        .test-type-card:hover { border-color: var(--study-accent); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(232,133,58,.12); }
        .test-type-card.selected { border-color: #a85025; background: rgba(168, 80, 37, 0.08); transform: scale(1.02); box-shadow: 0 8px 24px rgba(168, 80, 37, 0.15); }
        .test-type-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--study-bg-tertiary); display: flex; align-items: center; justify-content: center; }
        .test-type-card.selected .test-type-icon { background: #a85025; }
        .test-type-icon i { width: 24px; height: 24px; color: var(--study-text-secondary); }
        .test-type-card.selected .test-type-icon i { color: #fff; }
        .test-type-title { font-size: 15px; font-weight: 700; color: var(--study-text); }
        .test-type-desc { font-size: 12px; color: var(--study-text-tertiary); line-height: 1.4; }
        .review-progress-text { font-size: 13px; color: var(--study-text-tertiary); text-align: right; margin-top: 6px; opacity: 0.6; }
        .review-recall-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 14px;
            min-height: 300px;
            padding: 48px 20px;
            text-align: center;
        }
        .review-recall-spinner {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: conic-gradient(from 180deg, rgba(0,0,0,0.08) 0deg 245deg, #f59e0b 245deg 330deg, rgba(0,0,0,0.08) 330deg 360deg);
            -webkit-animation: reviewRecallSpin .9s linear infinite;
            animation: reviewRecallSpin .9s linear infinite;
            position: relative;
        }
        .review-recall-spinner::after {
            content: "";
            position: absolute;
            inset: 5px;
            border-radius: 50%;
            background: #fff;
        }
        @-webkit-keyframes reviewRecallSpin {
            to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
        }
        @keyframes reviewRecallSpin {
            to { transform: rotate(360deg); }
        }
        .review-recall-loading-text {
            margin: 0;
            font-size: 17px;
            font-weight: 600;
            color: var(--study-text-secondary);
        }
        .review-recall-shell {
            max-width: 860px;
            margin: 0 auto;
            width: 100%;
            padding: 12px 20px 28px;
            box-sizing: border-box;
        }
        .review-recall-topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
        }
        .review-recall-step {
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--study-text-tertiary);
        }
        .review-recall-end {
            border: 1px solid var(--study-border);
            background: var(--study-bg-card, var(--bg-card, #fff));
            color: var(--study-text-secondary);
            border-radius: 999px;
            padding: 10px 16px;
            font: inherit;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            transition: border-color .2s ease, color .2s ease;
        }
        .review-recall-end:hover {
            border-color: #ef4444;
            color: #ef4444;
        }
        .review-recall-progress {
            max-width: none;
            margin: 0 0 18px;
        }
        .review-recall-card {
            background: linear-gradient(180deg, #f9f0e1 0%, #f7eddf 100%);
            border: 1px solid rgba(206, 186, 154, 0.8);
            border-radius: 30px;
            padding: 28px 28px 24px;
            box-shadow: 0 16px 38px rgba(167, 116, 47, 0.08), inset 0 0 0 1px rgba(255,255,255,0.8);
        }
        .review-recall-kicker {
            margin: 0 0 8px;
            text-align: center;
            font-size: 14px;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #2f8f97;
        }
        .review-recall-title {
            margin: 0 auto 12px;
            max-width: 460px;
            text-align: center;
            font-size: clamp(30px, 5vw, 44px);
            line-height: 1.05;
            font-weight: 900;
            color: #2d241c;
            letter-spacing: -0.04em;
        }
        .review-recall-subtitle {
            margin: 0 0 18px;
            text-align: center;
            font-size: 14px;
            font-weight: 600;
            color: #7c6b5b;
        }
        .review-recall-textarea-wrap {
            position: relative;
            margin-bottom: 18px;
        }
        .review-recall-textarea {
            width: 100%;
            min-height: 260px;
            border-radius: 24px;
            border: 2px solid rgba(113, 179, 185, 0.75);
            background: rgba(255,255,255,0.92);
            color: #2d241c;
            font: inherit;
            font-size: 19px;
            line-height: 1.65;
            padding: 26px 24px 86px;
            box-sizing: border-box;
            resize: vertical;
            outline: none;
            box-shadow: inset 0 2px 10px rgba(235, 226, 214, 0.45);
            transition: border-color .2s ease, box-shadow .2s ease;
        }
        .review-recall-textarea:focus {
            border-color: #2f8f97;
            box-shadow: inset 0 2px 10px rgba(235, 226, 214, 0.45), 0 0 0 4px rgba(47, 143, 151, 0.12);
        }
        .review-recall-textarea:disabled {
            opacity: 0.72;
        }
        .review-recall-tools {
            position: absolute;
            left: 50%;
            bottom: 18px;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }
        .review-recall-tool {
            width: 46px;
            height: 46px;
            border: 0;
            border-radius: 14px;
            background: #dcebee;
            color: #5a6668;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(65, 90, 92, 0.08);
            transition: transform .18s ease, background .18s ease, color .18s ease;
        }
        .review-recall-tool:hover {
            transform: translateY(-1px);
            background: #cfe3e6;
            color: #2f8f97;
        }
        .review-recall-tool i {
            width: 20px;
            height: 20px;
        }
        .review-recall-cues {
            margin: 0 0 22px;
            padding-left: 22px;
            color: #6f6255;
            font-size: 14px;
            line-height: 1.55;
        }
        .review-recall-hints {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            margin: 0 0 22px;
        }
        .review-recall-hints-label {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--study-text-tertiary);
        }
        .review-recall-hint-chip {
            display: inline-block;
            padding: 6px 14px;
            border-radius: 999px;
            background: var(--study-bg-tertiary, rgba(0,0,0,0.04));
            color: var(--study-text-secondary);
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.01em;
        }
        .review-recall-feedback {
            margin-top: 20px;
        }
        .review-recall-feedback-card {
            border-radius: 20px;
            padding: 18px 18px 16px;
            border: 1px solid transparent;
        }
        .review-recall-feedback-card.is-good {
            background: rgba(46, 184, 92, 0.08);
            border-color: rgba(46, 184, 92, 0.18);
        }
        .review-recall-feedback-card.is-missed {
            background: rgba(248, 113, 113, 0.08);
            border-color: rgba(248, 113, 113, 0.18);
        }
        .review-recall-feedback-title {
            margin: 0 0 10px;
            font-size: 15px;
            font-weight: 800;
        }
        .review-recall-feedback-card.is-good .review-recall-feedback-title { color: #16a34a; }
        .review-recall-feedback-card.is-missed .review-recall-feedback-title { color: #dc2626; }
        .review-recall-feedback-label {
            margin: 0 0 8px;
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--study-text-tertiary);
        }
        .review-recall-missed-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .review-recall-missed-item {
            padding: 11px 13px;
            background: rgba(255,255,255,0.72);
            border-radius: 14px;
            font-size: 13px;
            line-height: 1.45;
            color: var(--study-text);
        }
        .review-recall-actions {
            display: flex;
            gap: 12px;
            margin-top: 18px;
        }
        .review-recall-primary,
        .review-recall-next {
            flex: 1;
            min-height: 58px;
            border-radius: 999px;
            border: 0;
            background: #218691;
            color: #fff;
            font: inherit;
            font-size: 19px;
            font-weight: 900;
            letter-spacing: -0.01em;
            cursor: pointer;
            box-shadow: 0 8px 18px rgba(27, 111, 119, 0.18);
            transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
        }
        .review-recall-primary:hover,
        .review-recall-next:hover {
            transform: translateY(-1px);
            filter: brightness(0.98);
        }
        .review-recall-secondary {
            min-width: 116px;
            min-height: 58px;
            border-radius: 999px;
            border: 1px solid rgba(129, 113, 95, 0.25);
            background: rgba(255,255,255,0.74);
            color: #6c5c4f;
            font: inherit;
            font-size: 16px;
            font-weight: 800;
            cursor: pointer;
            transition: transform .18s ease, border-color .18s ease;
        }
        .review-recall-secondary:hover {
            transform: translateY(-1px);
            border-color: rgba(47, 143, 151, 0.38);
        }
        .learn-fc-rating { display: flex; gap: 16px; justify-content: center; }
        .learn-fc-rate-btn { display: flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; border: 2px solid; transition: all 0.2s; }
        .learn-fc-rate-btn i { width: 18px; height: 18px; }
        .learn-fc-wrong { background: rgba(239,68,68,0.08); color: #ef4444; border-color: #ef4444; }
        .learn-fc-wrong:hover { background: rgba(239,68,68,0.15); }
        .learn-fc-right { background: rgba(34,197,94,0.08); color: #22c55e; border-color: #22c55e; }
        .learn-fc-right:hover { background: rgba(34,197,94,0.15); }
        .review-empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; }
        .review-empty-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(34,197,94,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
        .review-empty-icon i { width: 32px; height: 32px; color: var(--study-green); }
        .review-empty-state h3 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
        .review-empty-state p { color: var(--study-text-secondary); font-size: 14px; margin-bottom: 20px; }
        /* ═══ Learn Mode ═══ */
        /* ── Learn Mode, Polished UI ── */
        @keyframes learnSlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes learnPop { 0% { transform: scale(0.95); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
        @keyframes learnShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

        .learn-status-bar { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; animation: learnSlideIn 0.3s ease; }
        .learn-status-pill { font-size: 11px; font-weight: 800; padding: 5px 14px; border-radius: 10px; display: flex; align-items: center; gap: 5px; border: 1.5px solid transparent; transition: all 0.2s; text-transform: uppercase; letter-spacing: 0.04em; }
        .learn-status-remaining { background: var(--study-bg-secondary); color: var(--study-text-secondary); border-color: var(--study-border); }
        .learn-status-familiar { background: rgba(59,130,246,0.1); color: #3b82f6; border-color: rgba(59,130,246,0.25); }
        .learn-status-mastered { background: color-mix(in srgb, var(--study-green) 12%, transparent); color: color-mix(in srgb, var(--study-green) 72%, var(--study-text)); border-color: color-mix(in srgb, var(--study-green) 26%, transparent); }

        .learn-question-text { font-size: clamp(22px, 3vw, 28px); font-weight: 800; line-height: 1.4; text-align: center; padding: 36px 32px 40px; margin: 0 auto 24px; max-width: 680px; width: 100%; background: var(--study-bg-secondary); border: 2px solid var(--study-border); border-radius: 20px; box-shadow: 4px 4px 0 rgba(0,0,0,0.08); animation: learnPop 0.35s ease; color: var(--study-text); }

        .learn-options { display: flex; flex-direction: column; gap: 10px; max-width: 620px; width: 100%; margin: 0 auto; animation: learnSlideIn 0.4s ease; }
        .learn-option { padding: 16px 20px; background: var(--study-bg-secondary); border: 2px solid var(--study-border); border-radius: 14px; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 600; color: var(--study-text); font-family: inherit; text-align: left; box-shadow: 3px 3px 0 color-mix(in srgb, var(--study-text) 8%, transparent); }
        .learn-option:hover:not(.answered) { border-color: var(--study-accent); background: color-mix(in srgb, var(--study-accent) 8%, var(--study-bg-secondary)); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 color-mix(in srgb, var(--study-accent) 15%, transparent); }
        .learn-option .opt-key { width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--study-text) 8%, transparent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; flex-shrink: 0; color: var(--study-text-secondary); }
        .learn-option.correct { border-color: var(--study-green); background: rgba(34,197,94,0.1); box-shadow: 3px 3px 0 rgba(34,197,94,0.2); animation: learnPop 0.25s ease; }
        .learn-option.correct .opt-key { background: var(--study-green); color: #000; }
        .learn-option.wrong { border-color: var(--study-red); background: rgba(239,68,68,0.08); box-shadow: 3px 3px 0 rgba(239,68,68,0.15); animation: learnShake 0.3s ease; }
        .learn-option.wrong .opt-key { background: var(--study-red); color: #fff; }
        .learn-option.answered { pointer-events: none; }

        .learn-typed-wrap { max-width: 620px; width: 100%; margin: 0 auto; animation: learnSlideIn 0.4s ease; }
        .learn-typed-input { width: 100%; padding: 18px 22px; background: var(--study-bg-secondary); border: 2px solid var(--study-border); border-radius: 14px; color: var(--study-text); font-size: 17px; font-family: inherit; outline: none; transition: all 0.15s; box-shadow: 3px 3px 0 color-mix(in srgb, var(--study-text) 8%, transparent); box-sizing: border-box; }
        .learn-typed-input:focus { border-color: var(--study-accent); box-shadow: 3px 3px 0 color-mix(in srgb, var(--study-accent) 20%, transparent); }
        .learn-typed-input.correct { border-color: var(--study-green); background: rgba(34,197,94,0.06); box-shadow: 3px 3px 0 rgba(34,197,94,0.2); }
        .learn-typed-input.wrong { border-color: var(--study-red); background: rgba(239,68,68,0.06); box-shadow: 3px 3px 0 rgba(239,68,68,0.15); animation: learnShake 0.3s ease; }

        .learn-submit-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
        .learn-submit-btn { padding: 12px 32px; border-radius: 12px; border: none; background: var(--study-accent); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; font-family: inherit; transition: all 0.15s; box-shadow: 3px 3px 0 var(--study-accent-dim, rgba(0,0,0,0.3)); }
        .learn-submit-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 rgba(232,133,58,0.25); }

        .learn-feedback { max-width: 620px; width: 100%; margin: 16px auto 0; padding: 16px 20px; border-radius: 14px; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 10px; animation: learnPop 0.25s ease; }
        .learn-feedback.correct { background: rgba(34,197,94,0.12); color: var(--study-green); border: 1.5px solid rgba(34,197,94,0.25); }
        .learn-feedback.wrong { background: rgba(239,68,68,0.1); color: var(--study-red); border: 1.5px solid rgba(239,68,68,0.2); }
        .learn-feedback .override-btn { margin-left: auto; padding: 6px 14px; border-radius: 8px; border: 1.5px solid currentColor; background: transparent; color: inherit; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; opacity: 0.7; transition: all 0.15s; }
        .learn-feedback .override-btn:hover { opacity: 1; background: rgba(239,68,68,0.1); }

        .learn-explain-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 24px; border-radius: 12px; border: 2px solid var(--study-accent); background: transparent; color: var(--study-accent); font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.15s; box-shadow: 3px 3px 0 var(--study-accent-dim, rgba(0,0,0,0.2)); }
        .learn-explain-btn:hover { background: var(--study-accent); color: #fff; transform: translate(-2px, -2px); box-shadow: 5px 5px 0 rgba(232,133,58,0.25); }
        .learn-explain-card { max-width: 620px; width: 100%; margin: 16px auto 0; padding: 18px 20px; border-radius: 14px; border: 1.5px solid var(--study-border); border-left: 5px solid var(--study-accent); background: var(--study-bg-secondary); box-shadow: 4px 4px 0 var(--study-accent-dim, rgba(0,0,0,0.3)); animation: learnSlideIn 0.3s ease; }
        .learn-explain-header { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--study-accent); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
        .learn-explain-body { font-size: 14px; line-height: 1.65; color: var(--study-text); }

        .learn-continue-btn { display: inline-flex; align-items: center; padding: 12px 32px; border-radius: 12px; border: 2px solid var(--study-border); background: var(--study-bg-secondary); color: var(--study-text); font-weight: 700; font-size: 15px; cursor: pointer; font-family: inherit; transition: all 0.15s; box-shadow: 3px 3px 0 rgba(0,0,0,0.15); }
        .learn-continue-btn:hover { border-color: var(--study-accent); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--study-accent-dim, rgba(232,133,58,0.15)); }

        .learn-round-summary { text-align: center; padding: 56px 24px; animation: learnPop 0.4s ease; }
        .learn-round-summary h3 { font-size: 26px; font-weight: 800; margin-bottom: 24px; }
        .learn-round-stats { display: flex; gap: 24px; justify-content: center; margin-bottom: 32px; flex-wrap: wrap; }
        .learn-round-stat { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; padding: 8px 16px; border-radius: 10px; background: var(--study-bg-secondary); border: 1.5px solid var(--study-border); }
        .learn-round-stat i { width: 18px; height: 18px; }
        .learn-complete { text-align: center; padding: 56px 24px; animation: learnPop 0.4s ease; }
        .learn-complete h3 { font-size: 28px; font-weight: 800; margin-bottom: 10px; }
        .learn-complete p { color: var(--study-text-secondary); font-size: 15px; margin-bottom: 28px; }
        .learn-complete-actions { display: flex; gap: 14px; justify-content: center; }
        /* Learn config modal */
        .learn-config-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 999; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
        .learn-config-modal { background: var(--bg-raised, var(--study-bg-secondary)); color: var(--text-primary, var(--study-text)); border: 1px solid var(--border-default, var(--study-border)); border-radius: 24px; padding: 40px 44px; max-width: 560px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
        .learn-config-modal h3 { font-size: 24px; font-weight: 700; margin-bottom: 6px; text-align: center; color: var(--text-primary, var(--study-text)); }
        .learn-config-section { margin-bottom: 24px; }
        .learn-config-section label { font-size: 13px; font-weight: 700; color: var(--text-secondary, var(--study-text-secondary)); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px; display: block; }
        .learn-config-options { display: flex; gap: 12px; }
        .learn-config-opt { flex: 1; padding: 20px 14px; border-radius: 14px; border: 1.5px solid var(--border-default, var(--study-border)); background: var(--bg-elevated, var(--study-bg-tertiary)); cursor: pointer; text-align: center; transition: all 0.15s; color: var(--text-primary, var(--study-text)); }
        .learn-config-opt:hover { border-color: color-mix(in srgb, var(--accent-orange, var(--study-accent)) 32%, var(--border-default, var(--study-border))); background: color-mix(in srgb, var(--accent-orange, var(--study-accent)) 6%, var(--bg-elevated, var(--study-bg-tertiary))); }
        .learn-config-opt.active { border-color: var(--accent-orange, var(--study-accent)); background: color-mix(in srgb, var(--accent-orange, var(--study-accent)) 10%, var(--bg-elevated, var(--study-bg-tertiary))); }
        .learn-config-start { width: 100%; padding: 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent-orange, var(--study-accent)) 35%, transparent); background: var(--accent-orange, var(--study-accent)); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; font-family: inherit; transition: opacity 0.15s, transform 0.15s; margin-top: 12px; }
        .learn-config-start:hover { opacity: 0.92; transform: translateY(-1px); }
        .review-create-overlay { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(6px); }
        .review-create-modal { width: min(720px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--study-bg-secondary, #fff); color: var(--study-text); border: 1px solid color-mix(in srgb, var(--study-border) 85%, transparent); border-radius: 24px; box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25); }
        .review-create-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 24px 18px; border-bottom: 1px solid color-mix(in srgb, var(--study-border) 75%, transparent); }
        .review-create-head h3 { margin: 0 0 6px; font-size: 24px; font-weight: 700; color: var(--study-text); }
        .review-create-head p { margin: 0; font-size: 14px; color: var(--study-text-secondary); }
        .review-create-close { width: 38px; height: 38px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--study-border) 80%, transparent); background: var(--study-bg); color: var(--study-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .review-create-close:hover { color: var(--study-text); border-color: color-mix(in srgb, var(--study-accent) 35%, var(--study-border)); }
        .review-create-mode-row { display: flex; gap: 10px; padding: 18px 24px 0; }
        .review-create-mode-btn { border: 1px solid color-mix(in srgb, var(--study-border) 85%, transparent); background: var(--study-bg); color: var(--study-text-secondary); border-radius: 999px; padding: 10px 16px; font-family: inherit; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
        .review-create-mode-btn.active { color: var(--study-text); border-color: color-mix(in srgb, var(--study-accent) 35%, var(--study-border)); background: color-mix(in srgb, var(--study-accent) 10%, var(--study-bg)); }
        .review-create-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 18px; }
        .review-create-group { display: flex; flex-direction: column; gap: 8px; }
        .review-create-label { font-size: 12px; font-weight: 700; color: var(--study-text-secondary); text-transform: uppercase; letter-spacing: 0.08em; }
        .review-create-optional { font-size: 12px; font-weight: 500; color: var(--study-text-tertiary); text-transform: none; letter-spacing: 0; }
        .review-create-input,
        .review-create-textarea { width: 100%; border-radius: 12px; border: 1.5px solid var(--study-border); background: var(--study-bg-secondary); color: var(--study-text); font-family: inherit; font-size: 14px; padding: 14px 16px; outline: none; resize: vertical; box-shadow: 3px 3px 0 rgba(0,0,0,0.06); transition: all 0.15s; }
        .review-create-input:focus,
        .review-create-textarea:focus { border-color: var(--study-accent); box-shadow: 3px 3px 0 var(--study-accent-dim, rgba(232,133,58,0.15)); }
        .review-create-textarea { min-height: 150px; }
        .review-create-textarea-sm { min-height: 96px; }
        .review-create-mode-pane { display: none; }
        .review-create-mode-pane.active { display: block; }
        .review-create-dropzone { width: 100%; min-height: 160px; border-radius: 20px; border: 1.5px dashed color-mix(in srgb, var(--study-border) 85%, transparent); background: color-mix(in srgb, var(--study-bg) 75%, var(--study-bg-secondary)); color: var(--study-text-secondary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-family: inherit; padding: 20px; text-align: center; }
        .review-create-dropzone.dragover { border-color: color-mix(in srgb, var(--study-accent) 48%, var(--study-border)); background: color-mix(in srgb, var(--study-accent) 6%, var(--study-bg)); }
        .review-create-dropzone i { width: 22px; height: 22px; color: var(--study-accent); }
        .review-create-dropzone strong { font-size: 15px; color: var(--study-text); }
        .review-create-dropzone span { font-size: 12px; color: var(--study-text-secondary); }
        .review-create-file-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
        .review-create-file-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--study-border) 80%, transparent); background: var(--study-bg); }
        .review-create-file-name { display: inline-flex; align-items: center; gap: 8px; color: var(--study-text); font-size: 13px; font-weight: 600; }
        .review-create-file-name i { width: 14px; height: 14px; color: var(--study-text-secondary); }
        .review-create-file-size { margin-left: auto; font-size: 12px; color: var(--study-text-tertiary); }
        .review-create-file-remove { width: 28px; height: 28px; border-radius: 999px; border: none; background: transparent; color: var(--study-text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .review-create-file-remove:hover { background: color-mix(in srgb, var(--study-accent) 10%, transparent); color: var(--study-accent); }
        .review-create-foot { padding: 18px 24px 24px; border-top: 1px solid color-mix(in srgb, var(--study-border) 75%, transparent); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
        .review-create-foot-note { font-size: 12px; color: var(--study-text-tertiary); }
        .review-create-actions { display: flex; gap: 10px; }
        .review-create-cancel,
        .review-create-generate { border-radius: 14px; padding: 12px 18px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
        .review-create-cancel { background: var(--study-bg); color: var(--study-text-secondary); border: 1px solid color-mix(in srgb, var(--study-border) 85%, transparent); }
        .review-create-generate { background: linear-gradient(180deg, color-mix(in srgb, var(--study-accent) 92%, #fff), var(--study-accent), color-mix(in srgb, var(--study-accent) 88%, #000)); color: var(--study-accent-text, #fff); border: none; box-shadow: 3px 3px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2); }
        .review-create-generate:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.25); }
        .review-create-generate:disabled { opacity: 0.75; cursor: progress; }
.review-fab-menu-overlay,
.study-fab-menu-overlay { position: fixed; inset: 0; z-index: 10060; display: flex; align-items: flex-end; justify-content: center; padding: 18px 18px calc(92px + env(safe-area-inset-bottom,0px)); background: rgba(15,23,42,0.34); backdrop-filter: blur(4px); }
.review-fab-menu,
.study-fab-menu { width: min(420px, 100%); border-radius: 24px; background: var(--study-bg-secondary, #fff); border: 1px solid color-mix(in srgb, var(--study-border) 85%, transparent); box-shadow: 0 24px 64px rgba(15,23,42,0.22); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
        .review-fab-menu-head,
        .study-fab-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 8px; }
        .review-fab-menu-head strong,
        .study-fab-menu-head strong { font-size: 16px; color: var(--study-text); }
        .review-fab-menu-close,
        .study-fab-menu-close { width: 34px; height: 34px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--study-border) 80%, transparent); background: var(--study-bg); color: var(--study-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .review-fab-menu-option,
        .study-fab-menu-option { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--study-border) 78%, transparent); background: var(--study-bg); color: var(--study-text); cursor: pointer; font-family: inherit; text-align: left; }
        .review-fab-menu-option:hover,
        .study-fab-menu-option:hover { border-color: color-mix(in srgb, var(--study-accent) 34%, var(--study-border)); transform: translateY(-1px); }
        .review-fab-menu-option-icon,
        .study-fab-menu-option-icon { width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .review-fab-menu-option-copy,
        .study-fab-menu-option-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
        .review-fab-menu-option-copy strong,
        .study-fab-menu-option-copy strong { font-size: 15px; color: var(--study-text); }
.review-fab-menu-option-copy span,
.study-fab-menu-option-copy span { font-size: 12px; color: var(--study-text-secondary); }

/* Multi-URL chip input */
.url-multi-wrap { border:1.5px solid var(--study-border); border-radius:14px; background:transparent; padding:8px; transition:border-color 0.15s; display:flex; flex-direction:column; gap:6px; }
.url-multi-wrap:focus-within { border-color:var(--study-accent); }
.url-chip-list { display:flex; flex-wrap:wrap; gap:6px; }
.url-chip-list:empty { display:none; }
.url-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 8px 6px 10px; border-radius:10px; border:1px solid color-mix(in srgb, var(--study-border) 80%, transparent); background:var(--study-bg); max-width:100%; animation:urlChipIn 0.15s ease-out; }
@keyframes urlChipIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
.url-chip i:first-child { width:14px; height:14px; color:var(--study-text-secondary); flex-shrink:0; }
.url-chip-text { font-size:12px; font-weight:600; color:var(--study-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:240px; }
.url-chip-remove { width:20px; height:20px; border-radius:999px; border:none; background:transparent; color:var(--study-text-tertiary); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:0; transition:all 0.12s; }
.url-chip-remove:hover { background:color-mix(in srgb, var(--study-red, #ef4444) 15%, transparent); color:var(--study-red, #ef4444); }
.url-chip-remove i { width:11px; height:11px; }
.url-input-row { display:flex; align-items:center; gap:10px; padding:2px 6px; }
.url-input-row i { width:16px; height:16px; color:var(--study-text-tertiary); flex-shrink:0; }
.url-input-row input { flex:1; background:transparent !important; border:none !important; border-radius:0 !important; color:var(--study-text); font-size:13px; padding:6px 0; outline:none; font-family:inherit; box-shadow:none !important; }
.url-input-row input:disabled { opacity:0.4; cursor:not-allowed; }
/* Override the generic `body[data-scheme="light"] input[type="text"]` theme
   rule (study-themes.css) that otherwise gives #wizUrl its own grey "inner
   pill". The URL input should blend into the surrounding .url-multi-wrap so
   the row reads as a single flat white box instead of a pill-in-a-pill. */
body[data-scheme="light"] .url-multi-wrap,
body[data-theme="light"] .url-multi-wrap { background:#ffffff !important; }
body[data-scheme="light"] .url-multi-wrap .url-input-row input,
body[data-scheme="light"] .url-multi-wrap input[type="text"],
body[data-theme="light"] .url-multi-wrap .url-input-row input,
body[data-theme="light"] .url-multi-wrap input[type="text"] {
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    padding:6px 0 !important;
}
.url-error-list { display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.url-error-list:empty { display:none; }
.url-error-item { font-size:11px; color:var(--study-red, #ef4444); padding:4px 8px; border-radius:6px; background:color-mix(in srgb, var(--study-red, #ef4444) 8%, transparent); }
@media (max-width:768px) { .url-chip-text { max-width:180px; } }

.study-fab-menu-overlay {
    justify-content: flex-end;
    align-items: flex-end;
    padding: 18px 18px calc(112px + env(safe-area-inset-bottom, 0px));
    background: rgba(15, 23, 42, 0.10);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.review-fab-menu-overlay {
    justify-content: flex-end;
    padding: 18px 18px calc(96px + env(safe-area-inset-bottom, 0px));
    background: rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.review-fab-menu.review-fab-menu--quick {
    position: relative;
    width: min(270px, calc(100vw - 36px));
    padding: 10px 8px;
    border-radius: 26px;
    background: color-mix(in srgb, var(--study-bg-secondary, #fff) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--study-border) 72%, transparent);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
    gap: 2px;
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
}
.review-fab-menu.review-fab-menu--quick .review-fab-menu-head {
    display: none;
}
.review-fab-menu.review-fab-menu--quick .review-fab-menu-option {
    border: none;
    background: transparent;
    padding: 12px 14px;
    border-radius: 16px;
    gap: 14px;
}
.review-fab-menu.review-fab-menu--quick .review-fab-menu-option:hover {
    transform: none;
    border-color: transparent;
    background: color-mix(in srgb, var(--study-accent) 9%, transparent);
}
.review-fab-menu.review-fab-menu--quick .review-fab-menu-option:active {
    background: color-mix(in srgb, var(--study-accent) 14%, transparent);
}
.review-fab-menu.review-fab-menu--quick .review-fab-menu-option-icon {
    width: 26px;
    height: 26px;
    border-radius: 0;
    background: transparent !important;
    color: var(--study-accent) !important;
    box-shadow: none;
}
.review-fab-menu.review-fab-menu--quick .review-fab-menu-option-copy {
    gap: 0;
}
.review-fab-menu.review-fab-menu--quick .review-fab-menu-option-copy strong {
    font-size: 16px;
    font-weight: 600;
    color: var(--study-text);
}
.review-fab-menu.review-fab-menu--quick .review-fab-menu-option-copy span {
    display: none;
}
.study-fab-menu.study-fab-menu--quick {
    position: relative;
    width: min(268px, calc(100vw - 32px));
    padding: 12px 10px;
    border-radius: 28px;
    background: rgba(20, 18, 19, 0.96);
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 22px 48px rgba(0,0,0,.28);
    gap: 2px;
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
}
.study-fab-menu.study-fab-menu--quick .study-fab-menu-head {
    display: none;
}
.study-fab-menu.study-fab-menu--quick .study-fab-menu-option {
    border: none;
    background: transparent;
    padding: 12px 14px;
    border-radius: 16px;
    gap: 14px;
}
.study-fab-menu.study-fab-menu--quick .study-fab-menu-option:hover {
    transform: none;
    border-color: transparent;
    background: rgba(255,255,255,.04);
}
.study-fab-menu.study-fab-menu--quick .study-fab-menu-option:active {
    background: rgba(255,255,255,.07);
}
.study-fab-menu.study-fab-menu--quick .study-fab-menu-option-icon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: rgba(111, 35, 12, 0.88) !important;
    color: #ff6a1f !important;
    box-shadow: none;
}
.study-fab-menu.study-fab-menu--quick .study-fab-menu-option-copy {
    gap: 0;
}
.study-fab-menu.study-fab-menu--quick .study-fab-menu-option-copy strong {
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
}
.study-fab-menu.study-fab-menu--quick .study-fab-menu-option-copy span {
    display: none;
}
.study-fab-menu.study-fab-menu--quick .study-fab-menu-option-icon i,
.study-fab-menu.study-fab-menu--quick .study-fab-menu-option-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.1;
}
        .review-gen-progress-overlay { position: fixed; inset: 0; z-index: 10055; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, 0.48); backdrop-filter: blur(6px); }
        .review-gen-progress-card { width: min(520px, 100%); border-radius: 24px; background: var(--study-bg-secondary, #fff); border: 1px solid color-mix(in srgb, var(--study-border) 85%, transparent); box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28); padding: 32px 28px; text-align: center; }
        .review-gen-progress-spinner { width: 44px; height: 44px; margin: 0 auto 18px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--study-border) 90%, transparent); border-top-color: var(--study-accent); -webkit-animation: spin .8s linear infinite; animation: spin .8s linear infinite; }
        .review-gen-progress-card h3 { margin: 0 0 10px; font-size: 22px; font-weight: 800; color: var(--study-text); }
        .review-gen-progress-card p { margin: 0 auto 18px; max-width: 420px; color: var(--study-text-secondary); font-size: 14px; line-height: 1.65; }
        .review-gen-progress-bar { width: 100%; height: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--study-border) 80%, transparent); margin-bottom: 14px; }
        .review-gen-progress-bar-fill { width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--study-accent) 70%, #fff), var(--study-accent)); animation: reviewGenSlide 1.15s ease-in-out infinite; }
        .review-gen-progress-note { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--study-text-tertiary); }
        @keyframes reviewGenSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } }
        .nav-due-badge { background: var(--study-accent, #52b788); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; margin-left: 6px; min-width: 16px; text-align: center; }
        .fc-delete { position: absolute; bottom: 16px; left: 16px; background: none; border: none; color: var(--study-text-tertiary); cursor: pointer; }
        .fc-delete:hover { color: var(--study-red); }
        .fc-delete i { width: 16px; height: 16px; }
        body[data-theme="dark"] .fc-front .fc-delete,
        body[data-theme="dark"] .fc-back .fc-delete { color: rgba(255,255,255,0.25); }
        body[data-theme="dark"] .fc-front .fc-delete:hover,
        body[data-theme="dark"] .fc-back .fc-delete:hover { color: #ef4444; }

        /* ── Review/Learn Mobile Responsive ── */
        @media (max-width: 768px) and (pointer: coarse) , (max-width: 480px) {
            .review-container { padding: 16px 16px 24px; }
            .review-top-bar { gap: 8px; padding-bottom: 10px; flex-wrap: wrap; overflow-x: visible; -webkit-overflow-scrolling: touch; }
            .review-top-bar::-webkit-scrollbar { display: none; }
            .review-mode-tab { padding: 8px 14px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }
            .review-filter-compact { width: 100%; }
            .review-filter-compact select { width: 100%; }
            /* Bug #2: stack topic count + difficulty sections so pills get full width instead of cramped halves */
            .review-setup-grid {
                grid-template-columns: 1fr !important;
                gap: 10px !important;
                margin-bottom: 14px !important;
            }
            .review-setup-section {
                padding: 14px !important;
                gap: 10px !important;
            }
            .review-setup-pills {
                display: grid !important;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                grid-auto-rows: minmax(44px, auto);
                flex-wrap: nowrap !important;
                gap: 8px !important;
                width: 100%;
            }
            .review-setup-pill {
                flex: 0 0 auto;
                min-width: 0;
                width: 100%;
                min-height: 44px;
                padding: 0 6px !important;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 14px !important;
                line-height: 1.1;
                white-space: nowrap;
                text-align: center;
                box-sizing: border-box;
            }
            /* Bug #2: custom instructions textarea was overflowing its card container */
            .review-setup-textarea {
                padding: 14px !important;
                margin-bottom: 14px !important;
            }
            .review-setup-textarea textarea {
                width: 100% !important;
                max-width: 100% !important;
                min-height: 80px !important;
                box-sizing: border-box !important;
                font-size: 14px !important;
            }
            /* Bug #3: Test tab couldn't scroll to reveal Start button.
               Force the review session container to scroll and reserve bottom space
               for the mobile bottom nav + final action button. */
            #view-review { overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }
            #reviewSession {
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch !important;
                min-height: 0 !important;
                /* Was 96px, that was the humorously massive white slab
                   below the panel cards on iPhone. The mobile nav already
                   handles its own safe-area-bottom inset, so this just
                   needs a small breathing buffer. */
                padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
            }
            #reviewContent {
                overflow: visible !important;
                /* Review has no floating bottom action button, was 120px
                   to clear a nav that doesn't apply here. Drop it to a
                   minimal safe-area-only buffer so the action button
                   isn't followed by an empty white slab. */
                padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
            }
            #reviewContent .new-tab-shell,
            #reviewContent .new-panel {
                padding-bottom: 8px !important;
            }
            #reviewContent #panelTest {
                /* same, drop the 140px clearance, no floating CTA here. */
                padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
            }
            /* Bug #2+#3: shrink the outer card padding so big Start buttons aren't cut off on small screens */
            #reviewContent .new-panel > div:first-child {
                padding: 18px !important;
            }
            #reviewContent .test-type-card {
                padding: 16px 10px !important;
            }
            #reviewContent .test-type-title { font-size: 12px !important; }
            .review-setup-label {
                min-height: 44px;
            }
            .review-setup-pill:hover,
            .review-setup-pill.active { transform: none; }
            .review-recall-shell {
                padding: 8px 6px 20px;
            }
            .review-recall-topbar {
                gap: 8px;
                margin-bottom: 10px;
            }
            .review-recall-step {
                font-size: 11px;
            }
            .review-recall-end {
                padding: 9px 12px;
                font-size: 12px;
            }
            .review-recall-card {
                border-radius: 24px;
                padding: 20px 18px 18px;
            }
            .review-recall-kicker {
                font-size: 12px;
                margin-bottom: 6px;
            }
            .review-recall-title {
                max-width: none;
                font-size: 22px;
                line-height: 1.1;
                margin-bottom: 10px;
            }
            .review-recall-subtitle {
                font-size: 13px;
                margin-bottom: 14px;
            }
            .review-recall-textarea {
                min-height: 196px;
                font-size: 15px;
                line-height: 1.55;
                padding: 18px 16px 72px;
                border-radius: 22px;
            }
            .review-recall-tools {
                bottom: 14px;
                gap: 8px;
            }
            .review-recall-tool {
                width: 42px;
                height: 42px;
                border-radius: 13px;
            }
            .review-recall-cues {
                margin-bottom: 16px;
                padding-left: 18px;
                font-size: 13px;
            }
            .review-recall-hints {
                gap: 6px;
                margin-bottom: 16px;
            }
            .review-recall-hint-chip {
                padding: 5px 12px;
                font-size: 12px;
            }
            .review-recall-actions {
                flex-direction: column;
                gap: 10px;
            }
            .review-recall-secondary {
                width: 100%;
                min-width: 0;
                min-height: 52px;
            }
            .review-recall-primary,
            .review-recall-next {
                min-height: 54px;
                font-size: 17px;
            }
            .review-landing { padding: 12px 12px 20px; }
            .review-landing-header { margin-bottom: 10px; }
            .review-search-shell { min-width: 0; flex: 1; }
            .review-landing-section-head { flex-direction: column; align-items: flex-start; gap: 6px; }
            .review-set-row { grid-template-columns: 1fr; gap: 12px; padding: 16px; border-radius: 16px; }
            .review-set-row:hover { transform: none; box-shadow: 0 4px 12px rgba(15,23,42,0.03); }
            .review-set-actions { justify-content: stretch; }
            .review-set-actions > * { width: 100%; justify-content: center; }
            .review-set-open { width: 30px; height: 30px; }
            /* Flashcard in review, aspect ratio 3/2, capped height */
            .review-card-area .fc-card-wrap { aspect-ratio: 3/2; max-height: 280px; height: auto; }
            .review-card-area .fc-face { padding: 20px 18px; }
            .review-card-area .fc-text { font-size: 17px; }
            /* Compact SRS buttons */
            .srs-actions { gap: 6px; }
            .srs-btn { min-width: 60px; padding: 10px 8px; font-size: 11px; border-radius: 10px; }
            .srs-btn i { width: 16px; height: 16px; }
            .learn-question-text { font-size: 18px; padding: 16px 12px 20px; }
            .learn-config-modal { padding: 24px 20px; }
            .review-create-overlay { padding: 0; align-items: stretch; }
            .review-create-modal { max-height: 100%; height: 100%; border-radius: 0; }
            .review-create-head { padding: calc(16px + env(safe-area-inset-top, 0px)) 18px 14px; }
            .review-create-body,
            .review-create-foot { padding-left: 18px; padding-right: 18px; }
            .review-create-foot { flex-direction: column; align-items: stretch; }
            .review-create-actions { width: 100%; }
            .review-create-actions > button { flex: 1; justify-content: center; }
            .review-fab-menu-overlay,
            .study-fab-menu-overlay { padding: 12px 12px calc(100px + env(safe-area-inset-bottom,0px)); align-items: flex-end; justify-content: flex-end; }
            .review-fab-menu,
            .study-fab-menu { border-radius: 22px; }
        }

        /* ──────────────────────────────────────────────────────────────
           Active Recall / Review setup form, narrow-viewport fixes.
           This block is intentionally outside the `pointer: coarse` gate
           above because the user reported the fixes weren't visible on
           mobile in the demo set. Some devices/WebViews don't report
           `pointer: coarse` reliably, and the Active-Recall markup has
           inline `padding:32px` on its outer card which needs a strong
           override no matter how narrow the screen gets.
           ────────────────────────────────────────────────────────────── */
        @media (max-width: 768px) {
            /* Outer recall/flashcard/test panel card padding: the
               inline `padding:32px` was squeezing content on narrow
               phones so pill rows and textareas overflowed. */
            #reviewContent .new-panel > div:first-child,
            #view-review .new-panel > div:first-child {
                padding: 16px !important;
                border-radius: 16px !important;
            }
            /* Stack the 2-column setup grid into one column so each
               pill row gets the full card width on mobile. */
            #reviewContent .review-setup-grid,
            #view-review .review-setup-grid {
                grid-template-columns: 1fr !important;
                gap: 12px !important;
                margin-bottom: 14px !important;
            }
            #reviewContent .review-setup-section,
            #view-review .review-setup-section {
                padding: 14px !important;
                gap: 10px !important;
            }
            /* Put all 4 pills in a single row that shrinks evenly, no
               wrapping, no cramped halves. */
            #reviewContent .review-setup-pills,
            #view-review .review-setup-pills {
                display: grid !important;
                grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
                gap: 6px !important;
                width: 100% !important;
            }
            #reviewContent .review-setup-pill,
            #view-review .review-setup-pill {
                padding: 10px 4px !important;
                min-height: 44px !important;
                min-width: 0 !important;
                width: 100% !important;
                font-size: 13px !important;
                line-height: 1.1 !important;
                white-space: nowrap !important;
                border-radius: 12px !important;
                box-sizing: border-box !important;
            }
            /* Custom-instructions card + textarea, prevent horizontal
               overflow and let the textarea scale to the card's inner
               width (inline `width:100%` on the <textarea> is fine, but
               the card's inline 32px padding was clipping it). */
            #reviewContent .review-setup-textarea,
            #view-review .review-setup-textarea {
                padding: 14px !important;
                margin-bottom: 14px !important;
                box-sizing: border-box !important;
                max-width: 100% !important;
            }
            #reviewContent .review-setup-textarea textarea,
            #view-review .review-setup-textarea textarea {
                width: 100% !important;
                max-width: 100% !important;
                min-height: 72px !important;
                font-size: 14px !important;
                padding: 10px 12px !important;
                box-sizing: border-box !important;
            }
            /* Test-tab scroll fix, without this the Start Test button at
               the bottom of #panelTest is unreachable on iPhone. */
            #view-review {
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch !important;
            }
            #reviewContent {
                overflow: visible !important;
                padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
            }
            #reviewContent #panelTest {
                padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
            }
            /* Make the test-type picker cards smaller so all three fit
               on a narrow screen without their labels wrapping weirdly. */
            #reviewContent .test-type-card,
            #view-review .test-type-card {
                padding: 14px 8px !important;
                gap: 6px !important;
                border-radius: 14px !important;
            }
            #reviewContent .test-type-title,
            #view-review .test-type-title {
                font-size: 12px !important;
            }
        }

        /* (Removed earlier vertical-centering rules, Review should anchor
           at the top like Study Sets / Paper Checker / Focus, not float
           in the middle of the viewport.) */

        /* Bottom: minimal padding. The fixed mobile nav has transparent
           bg so it doesn't paint a "white bar", it just floats buttons
           on top of whatever scrolls behind them. Use 24px as the gentle
           buffer so the action button isn't hugging the bottom edge.
           Mobile nav buttons may overlay the very bottom of the empty-
           state card, but that's preferable to a giant empty white slab. */
        #view-review .dashboard-main,
        #view-review #reviewContent,
        #view-review #reviewContent #panelTest {
            padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
        }
        /* Top: collapse the chain of incremental paddings between the
           chip bar and the panel title row so the panel starts directly
           below the chips with minimal whitespace. */
        #view-review .review-card-area,
        #view-review #reviewContent { padding-top: 0 !important; }
        #view-review .new-tab-shell {
            padding-top: 0 !important;
        }
        #view-review .review-panel-title-row {
            margin-top: 16px !important;
            margin-bottom: 10px !important;
            padding-top: 0 !important;
        }
        /* Tighten the top-bar's own bottom padding so chips sit
           closer to the panel content, but keep a small gap. */
        #view-review .review-top-bar.review-top-bar-minimal {
            padding-bottom: 10px !important;
        }
        /* iOS Capacitor app: .study-main already pads safe-area-top.
           Drop .review-top-bar's safe-area padding so we don't stack
           two safe-area insets and create a 100+ px gap above the
           chip bar. Browsers (no body.capacitor-app class) keep the
           safe-area padding from the rule above. Bumped 12→26px per
           James to push the chip bar down ~14px so Back / Active
           Recall / Khio Tutor sit comfortably below the iPhone notch
           overlap with extra breathing room. */
        body.capacitor-app #view-review .review-top-bar.review-top-bar-minimal,
        body.mobile-app #view-review .review-top-bar.review-top-bar-minimal {
            padding-top: 26px !important;
        }
        /* Lock the page to vertical scrolling only, chip bar handles
           its own horizontal scroll for overflow tabs. Without this
           the entire #view-review can scroll horizontally if any inner
           element overflows the viewport (e.g. the wide chip pill row). */
        #view-review {
            overflow-x: hidden !important;
        }
        #view-review #reviewSession,
        #view-review .review-card-area,
        #view-review #reviewContent,
        #view-review .new-tab-shell {
            max-width: 100% !important;
            overflow-x: hidden !important;
        }
        /* MOBILE ONLY:
             • .review-landing fills the list view so the bottom
               doesn't show empty white when there are few sets.
             • #reviewSession deliberately does NOT get min-height:100%
              , that was the source of the "humorously massive white
               bar at the bottom" once the user clicked into a set:
               session container forced itself to full-viewport
               height even when the panel content was short, leaving
               300+ px of empty white below the form. Letting it size
               to content removes the slab; .study-view's
               overflow-y:auto handles scrolling when content exceeds
               viewport.
           Desktop keeps its original layout, these rules are
           explicitly scoped to mobile widths to avoid touching the
           desktop session/landing flex behavior. */
        @media (max-width: 768px) {
            #view-review > .review-landing {
                display: flex;
                flex-direction: column;
                min-height: 100%;
            }
            #view-review > #reviewSession {
                display: flex;
                flex-direction: column;
                /* deliberately NO min-height, let it shrink to content */
            }
        }