/* study-core.css -- Global variables, reset, layout, sidebar, typography, topbar, hero, sets, modals, detail layout, method nav, mastery pills, card nav */

        /* ── Coherence-check modal ──
           Small "Got it" popup that warns the user when their notebook
           contains unrelated topics. Lives at root z-index so it sits
           above the study chrome. JS in public/js/study/study-coherence.js
           builds the markup. James 2026-05-12. */
        .coherence-modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 9000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(15, 12, 8, 0.32);
            backdrop-filter: blur(2px);
            animation: coherenceFadeIn 200ms ease-out;
        }
        .coherence-modal-overlay.coherence-modal-closing {
            animation: coherenceFadeOut 160ms ease-in forwards;
        }
        @keyframes coherenceFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes coherenceFadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }
        .coherence-modal-card {
            width: 100%;
            max-width: 380px;
            padding: 28px 28px 22px;
            border-radius: 18px;
            background: #ffffff;
            box-shadow: 0 24px 60px rgba(15, 12, 8, 0.22), 0 2px 6px rgba(15, 12, 8, 0.08);
            text-align: center;
            transform: translateY(0);
            animation: coherencePop 220ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
        }
        @keyframes coherencePop {
            from { transform: translateY(8px) scale(0.96); opacity: 0; }
            to { transform: translateY(0) scale(1); opacity: 1; }
        }
        .coherence-modal-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            margin: 0 auto 14px;
            border-radius: 50%;
            background: #fce5cf;
            color: #a85025;
        }
        .coherence-modal-icon i,
        .coherence-modal-icon svg {
            width: 24px;
            height: 24px;
        }
        .coherence-modal-title {
            font-size: 17px;
            font-weight: 700;
            color: #2c1e18;
            margin-bottom: 8px;
            letter-spacing: -0.01em;
        }
        .coherence-modal-body {
            font-size: 14px;
            line-height: 1.55;
            color: #5a463a;
            margin-bottom: 20px;
        }
        .coherence-modal-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 140px;
            padding: 11px 22px;
            border: 0;
            border-radius: 10px;
            background: #a85025;
            color: #ffffff;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.01em;
            cursor: pointer;
            transition: background 160ms ease, transform 80ms ease;
        }
        .coherence-modal-btn:hover {
            background: #8a4118;
        }
        .coherence-modal-btn:active {
            transform: scale(0.98);
        }

        /* ── First real set hint coach marks ──
           Two-step popover that fires once per browser when the user opens
           their first real (non-demo) study set. JS in
           public/js/study/study-firstset-hint.js builds the markup.
           James 2026-05-12. */
        .fsh-card {
            width: min(320px, calc(100vw - 32px));
            padding: 18px 20px 16px;
            border-radius: 14px;
            background: #ffffff;
            box-shadow: 0 18px 44px rgba(15, 12, 8, 0.24), 0 2px 6px rgba(15, 12, 8, 0.08);
            font-family: inherit;
        }
        .fsh-title {
            font-size: 15px;
            font-weight: 700;
            color: #2c1e18;
            margin-bottom: 6px;
            letter-spacing: -0.01em;
        }
        .fsh-body {
            font-size: 13px;
            line-height: 1.55;
            color: #5a463a;
            margin-bottom: 14px;
        }
        .fsh-body strong {
            color: #a85025;
            font-weight: 700;
        }
        .fsh-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .fsh-step {
            font-size: 11px;
            font-weight: 600;
            color: #8e786a;
            letter-spacing: 0.04em;
        }
        .fsh-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 76px;
            padding: 8px 16px;
            border: 0;
            border-radius: 8px;
            background: #a85025;
            color: #ffffff;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            transition: background 160ms ease, transform 80ms ease;
        }
        .fsh-btn:hover {
            background: #8a4118;
        }
        .fsh-btn:active {
            transform: scale(0.97);
        }

        @font-face { font-family: 'Ramillas'; src: url('/fonts/ramillas-medium.ttf?v=3') format('truetype'); font-display: swap; }
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        /* Demo set badge, shown on any sample/demo content so logged-in
           users know what's real vs a preview. Defined globally so the
           pill renders for logged-in-with-0-sets users, not just guests. */
        .demo-tag {
            display: inline-flex;
            align-items: center;
            padding: 1px 8px;
            border-radius: 20px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .3px;
            background: linear-gradient(135deg, rgba(193,114,78,.15), rgba(193,114,78,.08));
            color: #C1724E;
            border: 1px solid rgba(193,114,78,.2);
            vertical-align: middle;
        }

        /* Editorial headline font */
        .study-page h1, .study-page h2, .review-title, .detail-title, .module-title,
        .sets-header h2, .review-landing-section-title {
            font-family: 'Manrope', 'Inter', sans-serif;
            letter-spacing: -0.01em;
        }

        :root {
            --study-bg: #0a0a0a;
            --study-bg-secondary: #141414;
            --study-bg-tertiary: rgba(255,255,255,0.05);
            --study-bg-card: #1a1a1a;
            --study-text: #e5e5e5;
            --study-text-secondary: rgba(255,255,255,0.7);
            --study-text-tertiary: rgba(255,255,255,0.4);
            --study-accent: #3b82f6;
            --study-accent-hover: #2563eb;
            --study-accent-dim: rgba(59,130,246,0.15);
            --study-border: rgba(255,255,255,0.08);
            --study-border-light: rgba(255,255,255,0.15);
            --study-radius: 12px;
            --study-green: #22c55e;
            --study-red: #ef4444;
            --study-blue: #3b82f6;
            --safe-bottom: env(safe-area-inset-bottom, 0px);
            /* James: "make the nav bar bigger". Bumped from 260 -> 300px. */
            /* James 2026-05-14: the 300px base applies only to wide desktop
               (≥ 1908 CSS px) so it matches the bumped value James asked for.
               Laptop range (1024-1907) gets 260px via the body.khio-laptop-scale
               override below, matches the Life dashboard sidebar's 260px from
               premium.css so the two products line up side-by-side on laptop. */
            --sidebar-w: 300px;
            --sidebar-bg: #060606;
            --right-sidebar-w: 480px;
            --study-hero-start: #3d3d3d;
            --study-hero-mid: #5a4a3a;
            --study-hero-end: #c4703a;
        }

        /* Laptop sidebar, 260px to match Life dashboard
           (premium.css --sidebar-width: 260px). khio-laptop-scale is set
           for desktop machines at viewport 1024-1907 (mutually exclusive
           with khio-desktop-wide), so this hits every laptop width without
           leaking onto wide desktop. The earlier @media (1024-1535) rule
           in study-themes.css now duplicates this, kept for backward
           compat, harmless because both resolve to the same value. */
        body.khio-laptop-scale {
            --sidebar-w: 260px;
        }

        /* Laptop sidebar internals, match Life dashboard density.
           James 2026-05-14 via Chrome MCP: even though both sidebars were
           260px wide, Study's nav items rendered at ~44px tall (10px pad +
           15px font) while Life rendered at ~35.5px tall (8px pad + 13px
           font). The width matched but the internal weight didn't, so
           Study still looked "noticeably larger" side-by-side. This rule
           tightens Study's laptop nav-link padding / typography / icon
           sizes to bring them inline with Life. Wide-desktop is untouched
           (keeps the roomier 44px / 15px layout). */
        body.khio-laptop-scale .study-sidebar .sidebar-brand-wrap {
            padding: 16px 16px 14px !important;
        }
        body.khio-laptop-scale .study-sidebar .sidebar-brand-text {
            font-size: 17px !important;
        }
        body.khio-laptop-scale .study-sidebar #navHome .nav-link,
        body.khio-laptop-scale .study-sidebar .sidebar-mwd-footer-link,
        body.khio-laptop-scale .study-sidebar .sidebar-mwd-logout {
            padding: 8px 12px !important;
            gap: 10px !important;
            font-size: 14px !important;
            border-radius: 10px !important;
        }
        /* All nav-link labels in the sidebar use the same 13px / 500 as the
           button itself, without this override, #navKhioAI labels fall
           through to the base `.nav-link-label { font-size: 15px }` at
           study-core.css:504 and read visibly bigger than #navHome.
           James 2026-05-14: scope widened from body.khio-laptop-scale to
           body.khio-desktop (the umbrella covering laptop-scale AND
           desktop-wide) so wide-desktop sidebars match too. Previously
           only laptop had the override; wide-desktop fell through to the
           15px base and #navKhioAI rendered visibly bigger than #navHome. */
        /* James 2026-05-14 (3rd pass): bumped from 13/500 to 14/600.
           "Perfect they're now the same, but a bit too small, make them
           a bit bold and a bit bigger". Modest bump (1px size + one weight
           notch). Life dashboard premium.css is bumped to match in the
           same commit so the three sidebars stay unified. */
        body.khio-desktop .study-sidebar #navHome .nav-link-label,
        body.khio-desktop .study-sidebar #navKhioAI .nav-link-label {
            font-size: 14px !important;
            font-weight: 600 !important;
        }
        /* James 2026-05-14 (4th pass): James reports Study tabs measure
           ~45px tall while Khio AI tabs measure ~33px in his browser.
           My instrumentation says both are 34px on laptop, so the gap is
           likely on wide-desktop where my earlier overrides were laptop-
           scoped only. This block FORCES identical box dimensions on
           both #navHome and #navKhioAI rows across the entire khio-desktop
           umbrella (laptop AND wide-desktop). After this, the two rows
           cannot differ in size regardless of which @media-scoped rule
           fires elsewhere. */
        body.khio-desktop .study-sidebar #navHome .nav-link,
        body.khio-desktop .study-sidebar #navKhioAI .nav-link {
            font-size: 14px !important;
            padding: 8px 12px !important;
            gap: 10px !important;
            /* James 2026-05-14: bumped from min-height:0 → 45px to give the
               nav rows more breathing room. Bigger touch/click target +
               more "premium" feel. Content stays centered via flex
               (align-items:center inherited from base .nav-link). */
            min-height: 45px !important;
            box-sizing: border-box !important;
            align-items: center !important;
            line-height: normal !important;
            border-radius: 10px !important;
        }
        body.khio-desktop .study-sidebar #navHome .nav-link i,
        body.khio-desktop .study-sidebar #navHome .nav-link svg,
        body.khio-desktop .study-sidebar #navKhioAI .nav-link i,
        body.khio-desktop .study-sidebar #navKhioAI .nav-link svg {
            width: 18px !important;
            height: 18px !important;
            min-width: 18px !important;
            min-height: 18px !important;
            flex-shrink: 0 !important;
        }
        body.khio-laptop-scale .study-sidebar .sidebar-mwd-avatar {
            width: 36px !important;
            height: 36px !important;
        }

        /* Global color scheme → study variable bridge */
        body[data-scheme] {
            --study-bg: var(--bg-base) !important; --study-bg-secondary: var(--bg-card, var(--bg-raised)) !important;
            --study-bg-tertiary: var(--bg-elevated) !important; --study-bg-card: var(--bg-card, var(--bg-raised)) !important;
            --study-text: var(--text-primary) !important; --study-text-secondary: var(--text-secondary) !important;
            --study-text-tertiary: var(--text-tertiary) !important;
            --study-accent: #c17a4e !important; --study-accent-hover: #924a28 !important;
            --study-accent-dim: rgba(193, 122, 78, 0.12) !important;
            --study-accent-text: #fff !important;
            --accent-amber: #c17a4e !important; --accent-orange: #924a28 !important;
            --glow-amber: rgba(193, 122, 78, 0.12) !important; --glow-orange: rgba(146, 74, 40, 0.12) !important;
            --study-border: var(--border-subtle) !important; --study-border-light: var(--border-default) !important;
        }
        body[data-scheme="light"] {
            --accent-amber: #c17a4e !important; --accent-orange: #924a28 !important;
            --glow-amber: rgba(193, 122, 78, 0.12) !important; --glow-orange: rgba(146, 74, 40, 0.12) !important;
        }
        /* Light mode white cards handled by --bg-card from shared-nav.js (applies to ALL light themes) */
        /* Fix accent-colored buttons: amber accent needs dark text, not white */
        body[data-scheme] .klm-send-btn,
        body[data-scheme] .klm-quiz-submit,
        body[data-scheme] .klm-research-import,
        body[data-scheme] .klm-prompt-ok,
        body[data-scheme] .over-limit-btn-primary,
        body[data-scheme] .suggest-cards-btn.suggest-yes,
        body[data-scheme] .exam-start-btn,
        body[data-scheme] .exam-submit-btn,
        body[data-scheme] .exam-results-btn.primary,
        body[data-scheme] .exam-areas-btn,
        body[data-scheme] .sg-task-submit,
        body[data-scheme] .sg-task-complete-btn,
        body[data-scheme] .sg2-lesson-action.is-primary,
        body[data-scheme] .sg2-module-recommended,
        body[data-scheme] .wt-submit,
        body[data-scheme] .fib-check,
        body[data-scheme] .hero-filter-btn.active,
        body[data-scheme] .btn-accent,
        body[data-scheme] .review-set-action.primary,
        body[data-scheme] #askAiFloat,
        body[data-scheme] #klmCreateDoneBtn,
        body[data-scheme] #klmCreateImportResearch,
        body[data-scheme] .btn-wizard,
        body[data-scheme] .review-create-generate,
        body[data-scheme] .learn-submit-btn,
        body[data-scheme] .learn-config-start,
        body[data-scheme] .review-mode-tab.active,
        body[data-scheme] .sg2-focus-btn-primary,
        body[data-scheme] .module-footer-btn-primary { color: #fff !important; }
        /* Noise texture overlay for all accent buttons */
        .sg-task-submit, .sg-task-complete-btn, .sg2-lesson-action.is-primary,
        .wt-submit, .fib-check, .hero-filter-btn.active, .exam-start-btn,
        .exam-submit-btn, .sg2-module-recommended, .review-set-action.primary { position: relative; overflow: hidden; isolation: isolate; }
        .sg-task-submit::after, .sg-task-complete-btn::after, .sg2-lesson-action.is-primary::after,
        .wt-submit::after, .fib-check::after, .hero-filter-btn.active::after, .exam-start-btn::after,
        .exam-submit-btn::after, .sg2-module-recommended::after, .review-set-action.primary::after {
            content: ''; position: absolute; inset: 0; background: url('/images/noise.png') repeat;
            background-size: 128px 128px; border-radius: inherit; pointer-events: none; z-index: 1;
            mix-blend-mode: overlay; opacity: 0.6;
        }
        /* Mono theme: hide noise texture on white accent buttons */
        body[data-theme="dark"] .sg-task-submit::after, body[data-theme="dark"] .sg-task-complete-btn::after,
        body[data-theme="dark"] .sg2-lesson-action.is-primary::after, body[data-theme="dark"] .wt-submit::after,
        body[data-theme="dark"] .fib-check::after, body[data-theme="dark"] .hero-filter-btn.active::after,
        body[data-theme="dark"] .exam-start-btn::after, body[data-theme="dark"] .exam-submit-btn::after,
        body[data-theme="dark"] .sg2-module-recommended::after, body[data-theme="dark"] .review-set-action.primary::after,
        body[data-theme="dark"] .btn-create::after, body[data-theme="dark"] .sidebar-footer .user-card::after,
        body[data-theme="dark"] .rc-topic-badge::after, body[data-theme="dark"] .audio-generate-btn::after {
            display: none;
        }
        /* Brown gradient for all accent buttons */
        body[data-scheme] .btn-accent,
        body[data-scheme] .btn.btn-accent,
        body[data-scheme] .hero-filter-btn.active,
        body[data-scheme] .review-mode-tab.active {
            background: linear-gradient(135deg, #c17a4e, #924a28) !important;
            color: #fff !important;
        }
        /* Action card + set card icon circles → neutral gray */
        body[data-scheme] .action-icon-circle,
        body[data-scheme] .review-set-badge {
            background: rgba(107, 114, 128, 0.1) !important;
            color: #7a7a7a !important;
        }
        body[data-scheme] .action-icon-circle i,
        body[data-scheme] .review-set-badge i {
            color: #7a7a7a !important;
        }
        body[data-scheme="light"] .action-icon-circle,
        body[data-scheme="light"] .review-set-badge {
            background: #fafafa !important;
            color: #6b6b6b !important;
        }
        body[data-scheme="light"] .action-icon-circle i,
        body[data-scheme="light"] .review-set-badge i {
            color: #6b6b6b !important;
        }
        body[data-scheme] .study-sidebar { --sidebar-bg: var(--bg-raised); background: var(--sidebar-bg) !important; border-right: none !important; }
        body[data-scheme="github"] .study-sidebar { background: var(--bg-raised) !important; }
        body[data-scheme] .study-main,
        body[data-scheme] .study-layout { background: var(--bg-base) !important; color: var(--text-primary) !important; }
        /* Mobile nav, liquid glass bar is styled in study-themes.css.
           Only reset the border-top here; let .mobile-nav-inner keep its own
           background and let .mobile-nav-btn-inner handle colors per theme. */
        body[data-scheme] .mobile-nav-inner { border-top: none !important; }
        /* Override shared-nav.js global input/textarea/select glass backgrounds */
        body[data-scheme] .study-layout input,
        body[data-scheme] .study-layout textarea,
        body[data-scheme] .study-layout select,
        body[data-scheme] .study-sidebar input,
        body[data-scheme] .study-sidebar textarea,
        body[data-scheme] .study-sidebar select { background: transparent !important; }

        html, body { height: 100%; min-height: 100vh; overflow: hidden; font-family: 'Inter', -apple-system, sans-serif; background: #faf7f3 !important; }
        /* Theme-aware backgrounds for safe area coverage */
        html[data-theme="dark"], html[data-theme="dark"] body { background: #111111 !important; }

        /* Hide shared site sidebar/nav, study has its own */
        #khio-sidebar, .khio-sidebar, #khio-mobile-nav, #khio-mobile-nav>.khio-hamburger, .khio-hamburger, #khio-pwa-tabbar, #khioHamburger, .mobile-nav-toggle { display: none !important; visibility: hidden !important; }
        .app-layout { display: block !important; }
        /* Hide mobile nav when inside a study set (keep visible on settings) */
        body.in-detail .mobile-nav { display: none !important; visibility: hidden !important; }
        body.in-settings .study-main { padding-bottom: 0 !important; }
        body.in-settings #view-settings { padding-bottom: 0 !important; }
        body.in-detail .study-main { padding-bottom: 0 !important; }

        :root {
            --khio-laptop-ui-scale: 1;
            --khio-laptop-ui-inverse: 1;
        }
        /* Laptop-scale transform, applied to every study view so the
           CSS layout always lands at the 1908×882 target James called
           "perfect sizing" 2026-05-14. The layout is sized 100vw ×
           inverse CSS wide and then visually scaled down to fit the
           physical viewport. At his 1272 CSS viewport this produces
           scale 0.667 and a 1908 CSS-wide layout. */
        /* Correction: Sets/Review keep the native compact breakpoint;
           only Co-Writer gets the scaled layout via .deeptutor-active. */
        body.khio-laptop-scale .study-layout.deeptutor-active {
            overflow: hidden;
            background: var(--study-bg);
        }
        .study-layout { display: flex; height: 100vh; height: 100dvh; background: var(--study-bg); color: var(--study-text); }
        /* Keep Khio AI chrome native-sized on laptop; Co-Writer documents scale inside .dt2-doc-shell. */
        body.khio-laptop-scale .study-layout.deeptutor-active {
            position: relative;
            top: auto;
            left: auto;
            width: 100vw;
            height: 100vh;
            height: 100dvh;
            transform: none;
            transform-origin: initial;
            overflow: hidden;
        }
        body.khio-laptop-scale .study-layout.deeptutor-active .study-main {
            height: 100% !important;
        }
        /* Prevent any duplicate sidebar on study page */
        .study-layout .khio-sidebar, .study-layout #khio-sidebar { display: none !important; }
        .study-layout .study-sidebar ~ .study-sidebar { display: none !important; }

        .study-main {
            flex: 1; display: flex; flex-direction: column; position: relative;
            height: 100vh; height: 100dvh; min-width: 0; background: var(--study-bg); color: var(--study-text);
        }
        /* Global background (reuses Focus bg) */
        .study-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; background-repeat: no-repeat; display: none; }
        .study-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
        .study-bg-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,0.45); pointer-events: none; display: none; }
        .study-bg-active .study-bg, .study-bg-active .study-bg-overlay { display: block; }
        .study-bg-active .study-main { background: transparent; }
        .study-bg-active .study-view { position: relative; z-index: 2; }
        .study-bg-active .study-sidebar { background: rgba(6,6,6,0.82) !important; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
        /* Glass cards when bg is active (dark) */
        .study-bg-active .set-card,
        .study-bg-active .grade-tab-content,
        .study-bg-active .detail-topbar,
        .study-bg-active .sb-widget,
        .study-bg-active .action-card,
        .study-bg-active .grade-tabs,
        .study-bg-active .grade-card { background: rgba(20,20,20,0.55) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: rgba(255,255,255,0.1) !important; }
        .study-bg-active .humanizer-split { background: rgba(20,20,20,0.55) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: rgba(255,255,255,0.1) !important; }
        .study-bg-active .humanizer-panel { background: transparent !important; border-color: rgba(255,255,255,0.08) !important; backdrop-filter: none; }
        .study-bg-active .hero-section { background: rgba(20,20,20,0.5) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 20px; }
        .study-bg-active .dashboard-main,
        .study-bg-active .dashboard-layout { background: transparent !important; }
        .study-bg-active .sets-section { background: transparent !important; }
        .study-bg-active .humanizer-textarea,
        .study-bg-active .humanizer-output,
        .study-bg-active .humanizer-toolbar,
        .study-bg-active .humanizer-result-toolbar { background: rgba(10,10,10,0.45) !important; border-color: rgba(255,255,255,0.08) !important; }
        .study-bg-active .focus-timer-card { background: rgba(20,20,20,0.5) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: rgba(255,255,255,0.1) !important; }
        .study-bg-active .klm-topbar { background: rgba(10,10,10,0.6) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: rgba(255,255,255,0.08) !important; }
        /* Glass, light theme overrides */
        [data-theme="light"].study-bg-active .study-sidebar { background: rgba(235,237,241,0.82) !important; }
        [data-theme="light"].study-bg-active .set-card,
        [data-theme="light"].study-bg-active .grade-tab-content,
        [data-theme="light"].study-bg-active .humanizer-split,
        [data-theme="light"].study-bg-active .sb-widget,
        [data-theme="light"].study-bg-active .action-card,
        [data-theme="light"].study-bg-active .grade-tabs,
        [data-theme="light"].study-bg-active .grade-card,
        [data-theme="light"].study-bg-active .hero-section { background: rgba(255,255,255,0.6) !important; }
        [data-theme="light"].study-bg-active .humanizer-panel { background: transparent !important; }

        /* ── Study Sidebar ── */
        .study-sidebar {
            width: var(--sidebar-w); background: var(--sidebar-bg, #060606); border-right: none;
            display: flex; flex-direction: column; flex-shrink: 0; z-index: 50;
            transition: width 0.2s ease;
        }
        .sidebar-brand-wrap { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 28px 20px 28px; border-bottom: 1px solid var(--study-border, rgba(255,255,255,0.06)); margin-bottom: 8px; }
        .sidebar-brand { padding: 0; display: flex; align-items: flex-start; gap: 10px; }
        .sidebar-back-link { display: flex; align-items: center; gap: 5px; padding: 0 16px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--study-text-tertiary); text-decoration: none; transition: color .15s; }
        .sidebar-back-link:hover { color: var(--study-text-secondary); }
        .sidebar-back-link i { width: 11px; height: 11px; }
        .sidebar-brand-text-wrap { display: flex; flex-direction: column; line-height: 1.15; }
        .sidebar-brand-text { font-size: 20px; font-weight: 400; color: var(--study-accent); font-family: 'Ramillas', 'Playfair Display', Georgia, serif; }
        .sidebar-brand-sub { font-size: 9px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--study-text-tertiary); margin-top: 4px; }
        /* min-height:0 is the classic flex-overflow fix, without it the
           flex child has an implicit min-height:auto and refuses to
           shrink below content height, pushing bottom nav items behind
           .sidebar-footer on shorter viewports. overflow-y:auto lets
           the nav scroll internally so every method-nav item (incl.
           Flashcards + Multiple Choice at the bottom of the list) is
           reachable, and driver.js's scrollIntoView can bring them
           into view during the detail first-time tour. */
        .sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 14px 4px; }
        .sidebar-nav-group { display: flex; flex-direction: column; gap: 4px; }
        .nav-link {
            display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 10px;
            color: var(--study-text-secondary); font-size: 15px; font-weight: 600; cursor: pointer;
            transition: all 0.15s; text-decoration: none; border: none; border-left: 3px solid transparent; background: none; font-family: inherit; width: 100%; text-align: left;
        }
        .nav-link-label { font-size: 15px; }
        .nav-link:hover { background: var(--study-bg-tertiary); color: var(--study-text); }
        .nav-link.active { background: var(--study-accent-dim, rgba(255,255,255,0.06)); color: var(--study-accent); border-left-color: var(--study-accent); font-weight: 700; }
        .nav-link i { width: 20px; height: 20px; flex-shrink: 0; }
        .material-symbols-outlined { font-family: 'Material Symbols Outlined' !important; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'liga'; }
        .nav-mat-icon { font-size: 22px !important; flex-shrink: 0; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
        .nav-link.active .nav-mat-icon { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
        .nav-link-back { color: var(--study-text-tertiary); font-size: 13px; margin-bottom: 8px; padding: 8px 12px; }
        .nav-link-back:hover { color: var(--study-text); }
        .sidebar-divider { height: 1px; background: var(--study-border); margin: 8px 12px; }
        .sidebar-footer { padding: 16px 12px; border-top: 1px solid var(--study-border); display: flex; flex-direction: column; gap: 8px; }
        /* ── Khio Premium upsell card (sidebar-footer, above the user card) ──
           Hidden by default; renderStudyUsageBar() shows it for non-premium,
           non-guest users. Full-width neutral panel with crown accent to match
           the dashboard mock. */
        .sidebar-premium-card {
            display: flex; flex-direction: column; gap: 6px;
            padding: 14px 14px 12px;
            border-radius: 14px;
            background: var(--study-bg-secondary);
            border: 1px solid var(--study-border);
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
            margin-bottom: 2px;
        }
        .sidebar-premium-card-head { display: flex; align-items: center; gap: 8px; }
        .sidebar-premium-card-icon {
            width: 22px; height: 22px; color: var(--study-accent);
            display: inline-flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .sidebar-premium-card-icon i { width: 18px; height: 18px; }
        .sidebar-premium-card-title {
            font-size: 14px; font-weight: 800; color: var(--study-text); letter-spacing: -0.01em;
        }
        .sidebar-premium-card-desc {
            font-size: 12.5px; line-height: 1.4; color: var(--study-text-secondary); margin: 0;
        }
        .sidebar-premium-card-cta {
            align-self: stretch;
            margin-top: 4px;
            padding: 8px 12px;
            border-radius: 10px;
            background: color-mix(in srgb, var(--study-accent) 12%, transparent);
            color: var(--study-accent);
            font-family: inherit; font-size: 13px; font-weight: 700;
            border: none; cursor: pointer;
            transition: background 0.15s ease;
        }
        .sidebar-premium-card-cta:hover {
            background: color-mix(in srgb, var(--study-accent) 22%, transparent);
        }
        /* Hide the upsell card entirely when the sidebar is collapsed ,
           no room for it, and the user card itself also condenses to
           icon-only. */
        .study-layout.sidebar-collapsed .sidebar-premium-card { display: none !important; }
        .sidebar-footer .user-card { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; 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)); border: none; text-decoration: none; color: var(--bg-base, #fff); cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.12); position: relative; overflow: hidden; isolation: isolate; }
        .sidebar-footer .user-card::after { content: ''; position: absolute; inset: 0; background: url('/images/noise.png') repeat; background-size: 128px 128px; border-radius: inherit; pointer-events: none; z-index: 1; mix-blend-mode: overlay; opacity: 0.6; }
        .sidebar-footer .user-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.18); filter: brightness(1.04); }
        .sidebar-footer .user-name { flex: 1; font-size: 0.8125rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; }
        .sidebar-footer .sidebar-footer-back-card { justify-content: center; gap: 8px; font-weight: 700; }
        .sidebar-footer .sidebar-footer-back-card i { width: 15px; height: 15px; color: var(--study-text-secondary); }
        .sidebar-footer .user-badge { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: transparent; color: inherit; opacity: 0.85; }
        .sidebar-footer .user-badge i { width: 15px; height: 15px; }
        .study-layout:not(.detail-active) .sidebar-footer .user-card { justify-content: space-between; padding: 12px 16px; }
        .study-layout:not(.detail-active) .sidebar-footer .user-name { flex: 0 1 auto; }
        .sidebar-footer-row { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
        .sidebar-footer-row .study-token-track { flex: 1; height: 4px; border-radius: 2px; background: var(--study-border); overflow: hidden; }
        .sidebar-footer-row .study-token-fill { height: 100%; border-radius: 2px; background: var(--study-accent); transition: width 0.3s; }
        .sidebar-footer-row .study-token-label { font-size: 0.6875rem; font-weight: 600; color: var(--study-text-tertiary); white-space: nowrap; }
        .sidebar-footer-gear { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--study-text-tertiary); cursor: pointer; transition: all 0.15s; flex-shrink: 0; }
        .sidebar-footer-gear:hover { color: var(--study-text); background: var(--study-bg-tertiary); }
        .sidebar-footer-gear i { width: 14px; height: 14px; }

        /* ── Sidebar Widgets (Streak + Exams) ── */
        .sidebar-widgets {
            padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 10px;
            border-top: 1px solid var(--study-border);
        }
        .sb-widget {
            background: var(--study-bg-tertiary);
            border: 1.5px solid var(--study-border); border-left: 4px solid var(--study-accent);
            border-radius: 10px; padding: 12px; position: relative; overflow: hidden;
            box-shadow: 3px 3px 0 var(--study-accent-dim, rgba(0,0,0,0.3));
            transition: all 0.15s;
        }
        .sb-widget:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(232,133,58,0.2); }
        .sb-widget::before {
            content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0;
            display: none;
        }
        .sb-widget-title {
            font-size: 9px; font-weight: 800; text-transform: uppercase;
            letter-spacing: .08em; color: var(--study-text-tertiary); margin-bottom: 10px;
            display: flex; align-items: center; gap: 5px;
        }
        .sb-widget-title i { width: 12px; height: 12px; opacity: 0.7; }
        .sb-streak-row {
            display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
        }
        .sb-streak-fire { font-size: 24px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(232,133,58,0.4)); }
        .sb-streak-count {
            font-size: 22px; font-weight: 900; color: var(--study-accent); line-height: 1; cursor: pointer;
            text-shadow: 0 0 20px rgba(232,133,58,0.3);
        }
        .sb-streak-label { font-size: 10px; font-weight: 600; color: var(--study-text-tertiary); margin-top: 2px; }
        .sb-streak-days { display: flex; gap: 3px; justify-content: space-between; }
        .sb-streak-day {
            flex: 1; height: 24px; border-radius: 5px;
            display: flex; align-items: center; justify-content: center;
            font-size: 8px; font-weight: 700; color: var(--study-text-tertiary);
            background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
            transition: all .2s;
        }
        .sb-streak-day.active {
            background: linear-gradient(135deg, var(--study-accent), #d4752e);
            color: #000; border-color: var(--study-accent);
            box-shadow: 0 2px 8px rgba(232,133,58,0.3);
            font-weight: 800;
        }
        .sb-streak-day.today {
            border-color: var(--study-accent); color: var(--study-accent);
            background: var(--study-accent-dim, rgba(232,133,58,0.08));
        }
        .sb-exam-list { display: flex; flex-direction: column; gap: 6px; }
        .sb-exam-item {
            display: flex; align-items: center; gap: 8px; padding: 7px 8px;
            border-radius: 8px; background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.04);
            transition: all .15s;
        }
        .sb-exam-item:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
        .sb-exam-badge {
            width: 32px; height: 32px; border-radius: 7px;
            background: linear-gradient(135deg, var(--study-accent-dim), var(--study-accent-dim, rgba(232,133,58,0.08)));
            color: var(--study-accent);
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            font-weight: 800; flex-shrink: 0; font-size: 12px; line-height: 1;
            border: 1px solid var(--study-accent-dim, rgba(232,133,58,0.15));
        }
        .sb-exam-badge .month { font-size: 7px; text-transform: uppercase; letter-spacing: .04em; opacity: 0.8; }
        .sb-exam-info { flex: 1; min-width: 0; }
        .sb-exam-name { font-size: 11px; font-weight: 700; color: var(--study-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .sb-exam-meta { font-size: 9px; color: var(--study-text-tertiary); margin-top: 1px; }
        .sb-exam-countdown { font-size: 9px; font-weight: 800; color: var(--study-accent); white-space: nowrap; }
        .sb-exam-countdown.urgent { color: var(--study-red); animation: pulse-urgent 2s ease-in-out infinite; }
        @keyframes pulse-urgent { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
        .sb-exam-add {
            width: 100%; padding: 6px; border-radius: 7px; margin-top: 6px;
            border: 1px dashed rgba(255,255,255,0.1); background: transparent;
            color: var(--study-text-tertiary); font-size: 10px; font-weight: 600;
            cursor: pointer; font-family: inherit;
            display: flex; align-items: center; justify-content: center; gap: 4px;
            transition: all .2s;
        }
        .sb-exam-add:hover {
            border-color: var(--study-accent); color: var(--study-accent);
            background: rgba(232,133,58,0.05);
        }
        .sb-exam-add i { width: 12px; height: 12px; }
        .sb-exam-empty {
            text-align: center; padding: 8px 0; font-size: 10px;
            color: var(--study-text-tertiary); font-style: italic;
        }
        .sidebar-username { font-size: 13px; color: var(--study-text-secondary); }

        /* ── Detail Topbar (shown only in set detail) ── */
        .detail-topbar {
            display: none; align-items: center; justify-content: space-between;
            height: 48px; padding: 0 16px; background: var(--study-bg); border-bottom: 1px solid var(--study-border); flex-shrink: 0;
        }
        .detail-topbar.visible { display: flex; }
        .detail-topbar-left { display: flex; align-items: center; gap: 10px; }
        .detail-topbar-title-wrap { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
        .detail-topbar-title { font-size: 14px; font-weight: 600; }
        .detail-topbar-title-wrap .detail-topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .detail-title-rename {
            border: none;
            background: none;
            color: var(--study-text-tertiary);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            margin-left: 2px;
            cursor: pointer;
            transition: color .15s;
            flex-shrink: 0;
            line-height: 1;
            border-radius: 0;
        }
        .detail-title-rename:hover { color: var(--study-text-secondary); }
        .detail-title-rename i { width: 10px; height: 10px; }
        .detail-topbar-right { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--study-text-tertiary); }
        .detail-topbar-right button { background: none; border: none; color: var(--study-text-secondary); cursor: pointer; font-size: 12px; font-family: inherit; display: flex; align-items: center; gap: 4px; }
        .detail-topbar-right button:hover { color: var(--study-text); }
        .detail-topbar-right button i { width: 14px; height: 14px; }
        .detail-add-method-btn {
            height: 30px;
            border-radius: 999px;
            border: 1px solid var(--study-border) !important;
            background: var(--study-bg-secondary) !important;
            color: var(--study-text-secondary) !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 0 10px;
            font-size: 12px;
            font-weight: 700;
            font-family: inherit;
            cursor: pointer;
            transition: all .15s;
        }
        .detail-add-method-btn i { width: 12px; height: 12px; }
        .detail-add-method-btn:hover {
            background: var(--study-bg-tertiary) !important;
            color: var(--study-text) !important;
        }
        /* Hide the "+ Add" method button + Pomodoro timer when on the Notes tab.
           Notes is a reading/writing surface, the add-another-method affordance
           and the timer chrome compete with the actual content. James, 2026-05-03:
           "Add + Timer need to be removed from the Notes tab." */
        .study-layout.notes-active .detail-add-method-btn,
        .study-layout.notes-active #studyTimer { display: none !important; }
        /* Faint "+ Add practice" button shown under the Practice heading when the
           user picked Notes-only (or any combination with no practice tools).
           Opens the same Add Method menu the topbar uses. James, 2026-05-04. */
        .method-nav-empty-add {
            display: flex;
            align-items: center;
            gap: 8px;
            width: calc(100% - 8px);
            margin: 4px 4px 0;
            padding: 10px 12px;
            border: 1px dashed var(--study-border, rgba(0, 0, 0, 0.12));
            border-radius: 10px;
            background: transparent;
            color: var(--study-text-tertiary, rgba(0, 0, 0, 0.45));
            font-size: 12px;
            font-weight: 500;
            font-family: inherit;
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.15s, border-color 0.15s, color 0.15s, background 0.15s;
        }
        .method-nav-empty-add:hover {
            opacity: 1;
            border-color: var(--study-accent, #c17a4e);
            color: var(--study-accent, #c17a4e);
            background: var(--study-accent-dim, rgba(193, 122, 78, 0.08));
        }
        .method-nav-empty-add i { width: 14px; height: 14px; flex-shrink: 0; }
        /* Collapsed sidebar: show only the + icon, drop the label. */
        .study-layout.detail-active.sidebar-collapsed .method-nav-empty-add {
            justify-content: center;
            padding: 10px 0;
        }
        .study-layout.detail-active.sidebar-collapsed .method-nav-empty-add span { display: none; }
        .detail-method-menu {
            position: fixed;
            z-index: 10020;
            min-width: 220px;
        }
        .detail-method-menu-heading {
            font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
            color: var(--study-text-tertiary); padding: 6px 14px 2px; pointer-events: none;
        }
        .detail-method-menu-remove { color: #ef4444 !important; }
        .detail-method-menu-remove:hover { background: rgba(239,68,68,0.08) !important; }
        .detail-ai-btn {
            height: 30px;
            border-radius: 999px;
            border: 1px solid var(--study-border);
            background: var(--study-bg-secondary);
            color: var(--study-text-secondary);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 0 11px;
            font-size: 12px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all .15s;
        }
        .detail-ai-btn:hover { color: var(--study-text); background: var(--study-bg-tertiary); }
        .detail-ai-btn i { width: 13px; height: 13px; }

        /* ── Views ── */
        .study-view { display: none; flex: 1; overflow-y: auto; overflow-x: hidden; }
        .study-view.active { display: flex; flex-direction: column; }
        #view-detail { overflow: hidden; }

        /* Post-generation entrance, a staggered fade-up that runs once when a
           freshly generated set opens into Module 1. Feels like the content
           is rising into place rather than snapping in cold. JS adds
           `.study-postgen-enter` to #view-detail and strips it after ~1.1s. */
        @keyframes studyPostgenEnter {
            0%   { opacity: 0; transform: translateY(14px) scale(0.985); }
            60%  { opacity: 1; }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes studyPostgenEnterFade {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        #view-detail.study-postgen-enter .detail-main,
        #view-detail.study-postgen-enter .detail-right {
            animation: studyPostgenEnter 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        #view-detail.study-postgen-enter .detail-main  { animation-delay: 80ms; }
        #view-detail.study-postgen-enter .detail-right { animation-delay: 180ms; }
        #view-detail.study-postgen-enter #detailMethods,
        #view-detail.study-postgen-enter #detailTopbar {
            animation: studyPostgenEnterFade 600ms cubic-bezier(0.16, 1, 0.3, 1) 40ms both;
        }
        @media (prefers-reduced-motion: reduce) {
            #view-detail.study-postgen-enter .detail-main,
            #view-detail.study-postgen-enter .detail-right,
            #view-detail.study-postgen-enter #detailMethods,
            #view-detail.study-postgen-enter #detailTopbar {
                animation: none !important;
            }
        }

        /* ── Hero Section ──
           Trimmed vertical padding (was 48/28, now 24/18) and hero-head
           bottom margin (was 28, now 16) so 'Your Recent Sets' actually
           fits above the fold on typical laptop viewports. Users were
           having to scroll to see their demo set. */
        .hero-section {
            text-align: left;
            padding: 24px 40px 18px;
            max-width: 1700px;
            width: 100%;
            margin: 0 auto;
        }
        .hero-head {
            width: 100%;
            margin: 0 0 16px;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 22px;
        }
        .hero-head-left { min-width: 0; }
        .hero-title { font-family: 'Ramillas', 'Playfair Display', Georgia, serif; font-size: 64px; font-weight: 400; margin: 0 0 12px; line-height: 1.05; letter-spacing: -0.01em; }
        .hero-sub { font-size: 17px; color: var(--study-text-secondary); margin: 8px 0 0; line-height: 1.4; }
        .hero-filter-btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px;
            border-radius: 999px; border: 1px solid var(--study-border); background: var(--study-bg-card, var(--bg-card, #fff));
            color: var(--study-text-secondary); font-size: 16px; font-weight: 600; cursor: pointer;
            font-family: inherit; transition: all 0.2s; height: 51px; box-sizing: border-box;
        }
        .hero-filter-btn:hover { border-color: var(--study-accent); color: var(--study-text); }
        .hero-filter-btn.active {
            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-color: transparent; box-shadow: 0 2px 8px var(--study-accent-dim, rgba(120,58,34,0.2));
        }
        .hero-filter-dropdown {
            position: absolute; top: 100%; right: 0; margin-top: 8px; width: 220px;
            background: var(--study-bg-card, var(--bg-card, #fff)); border: 1px solid var(--study-border); border-radius: 14px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.1); padding: 8px; z-index: 100;
        }
        .hero-filter-dropdown-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--study-text-tertiary); padding: 6px 10px 4px; }
        .hero-filter-dropdown button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: none; background: none; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--study-text-secondary); cursor: pointer; font-family: inherit; }
        .hero-filter-dropdown button:hover { background: var(--study-bg-tertiary); color: var(--study-text); }
        .hero-filter-dropdown button i { width: 15px; height: 15px; }
        .hero-filter-search { width: 100%; padding: 8px 10px; border: 1px solid var(--study-border); border-radius: 8px; font-size: 13px; font-family: inherit; background: var(--study-bg-secondary); color: var(--study-text); outline: none; }
        .hero-filter-search:focus { border-color: var(--study-accent); }
        .hero-search-wrap {
            width: auto;
            min-width: auto;
            max-width: none;
            margin: 0;
            align-self: center;
        }
        .action-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
            width: 100%;
            max-width: none;
            margin: 0;
            position: relative;
        }
        /* James 2026-05-18: minimize toggle for Sets / Review quick-action
           cards. Lives inline next to the Recent / Filter buttons as a
           compact icon-only square (chevron arrow). Click toggles
           .collapsed on .action-cards and persists via
           localStorage.khioActionCardsCollapsed. */
        body.khio-desktop .hero-filter-btn.hero-filter-btn-minimize,
        .hero-filter-btn.hero-filter-btn-minimize {
            padding: 13px !important;
            width: auto !important;
            min-width: 0 !important;
            line-height: 1 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        body.khio-desktop .hero-filter-btn.hero-filter-btn-minimize i {
            width: 16px !important;
            height: 16px !important;
        }
        .action-cards-toggle {
            position: absolute;
            top: -10px;
            right: -10px;
            z-index: 5;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--study-bg-card, #fff);
            border: 1px solid var(--study-border);
            color: var(--study-text-tertiary);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
            box-shadow: 0 2px 6px rgba(0,0,0,0.06);
            padding: 0;
            font-family: inherit;
        }
        .action-cards-toggle:hover {
            color: var(--study-accent);
            border-color: var(--study-accent);
            background: var(--study-accent-dim, rgba(193,122,78,0.08));
            transform: scale(1.05);
        }
        .action-cards-toggle i { width: 14px; height: 14px; }

        /* Collapsed state, quick actions become a compact horizontal
           pill row. Each pill is icon + label, no description text.
           Click handlers from the original cards still fire so behavior
           is unchanged.
           NOTE: needs ID specificity (#view-sets / #view-review) to
           beat the existing #view-sets .action-cards !important rule
           in study-themes.css:442 + the body.khio-desktop card-size
           overrides in study-themes.css:3954-3972. ID > class always,
           regardless of class count. */
        body.khio-desktop #view-sets .action-cards.collapsed.collapsed,
        body.khio-desktop #view-review .action-cards.collapsed.collapsed,
        #view-sets .action-cards.collapsed.collapsed,
        #view-review .action-cards.collapsed.collapsed {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 8px !important;
            grid-template-columns: none !important;
            margin-bottom: 18px;
            align-items: center !important;
            justify-content: flex-start !important;
            max-width: none !important;
        }
        body.khio-desktop #view-sets .action-cards.collapsed.collapsed .action-card,
        body.khio-desktop #view-review .action-cards.collapsed.collapsed .action-card,
        #view-sets .action-cards.collapsed.collapsed .action-card,
        #view-review .action-cards.collapsed.collapsed .action-card {
            /* James 2026-05-18 v3: pills now fully fill the available
               row width. Dropped the 320px max-width cap that was
               leaving empty space on the right and bumped padding +
               icon + label so each pill feels like a proper button. */
            flex: 1 1 0 !important;
            width: auto !important;
            min-width: 220px !important;
            max-width: none !important;
            height: auto !important;
            min-height: 0 !important;
            aspect-ratio: unset !important;
            padding: 20px 28px 20px 24px !important;
            border-radius: 999px !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 14px !important;
            box-shadow: none !important;
            text-align: left !important;
        }
        body.khio-desktop #view-sets .action-cards.collapsed.collapsed .action-card:hover,
        body.khio-desktop #view-review .action-cards.collapsed.collapsed .action-card:hover {
            transform: none !important;
            border-color: var(--study-accent) !important;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
        }
        body.khio-desktop #view-sets .action-cards.collapsed.collapsed .action-card .action-icon-circle,
        body.khio-desktop #view-review .action-cards.collapsed.collapsed .action-card .action-icon-circle {
            width: 40px !important;
            height: 40px !important;
            border-radius: 50% !important;
            margin: 0 !important;
            flex-shrink: 0 !important;
        }
        body.khio-desktop #view-sets .action-cards.collapsed.collapsed .action-card .action-icon-circle i,
        body.khio-desktop #view-review .action-cards.collapsed.collapsed .action-card .action-icon-circle i {
            width: 19px !important;
            height: 19px !important;
        }
        body.khio-desktop #view-sets .action-cards.collapsed.collapsed .action-card > i,
        body.khio-desktop #view-review .action-cards.collapsed.collapsed .action-card > i {
            width: 20px !important;
            height: 20px !important;
            margin: 0 !important;
        }
        body.khio-desktop #view-sets .action-cards.collapsed.collapsed .action-card .action-label,
        body.khio-desktop #view-review .action-cards.collapsed.collapsed .action-card .action-label {
            font-size: 16px !important;
            font-weight: 600 !important;
            margin: 0 !important;
            letter-spacing: 0 !important;
        }
        body.khio-desktop #view-sets .action-cards.collapsed.collapsed .action-card .action-sub,
        body.khio-desktop #view-review .action-cards.collapsed.collapsed .action-card .action-sub {
            display: none !important;
        }
        /* Hide the bottom-right arrow ::after pseudo from study-themes.css
           when the card is in pill (collapsed) form, otherwise it floats
           over the pill as a misaligned black circle. James 2026-05-18. */
        body.khio-desktop #view-sets .action-cards.collapsed.collapsed .action-card::after,
        body.khio-desktop #view-review .action-cards.collapsed.collapsed .action-card::after,
        #view-sets .action-cards.collapsed.collapsed .action-card::after,
        #view-review .action-cards.collapsed.collapsed .action-card::after {
            display: none !important;
        }
        body.khio-desktop #view-sets .action-cards.collapsed.collapsed .action-cards-toggle,
        body.khio-desktop #view-review .action-cards.collapsed.collapsed .action-cards-toggle {
            position: static !important;
            top: auto !important;
            right: auto !important;
            margin-left: auto;
            box-shadow: none;
            order: 99;
        }
        /* Also hide the card-size tuner button when collapsed (it's the
           little gear that lets desktop users resize the cards), it
           makes no sense in pill mode. */
        #view-sets .action-cards.collapsed ~ .action-cards-tuner-wrap,
        #view-review .action-cards.collapsed ~ .action-cards-tuner-wrap {
            display: none !important;
        }
        .action-card {
            position: relative;
            width: 100%;
            max-width: none;
            min-width: 0;
            padding: 24px 20px 22px;
            background: var(--study-bg-card, var(--bg-card, #fff));
            border: 1px solid var(--study-border); border-radius: 20px; cursor: pointer; text-align: center; transition: all 0.2s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
            display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
            overflow: hidden;
            min-height: 170px;
        }
        .action-card:hover { border-color: var(--study-accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
        /* Icon tile: rounded with tinted bg, centered at top of card. Default
           sizing kept tight so mobile doesn't get the bumped desktop look ,
           desktop variant lives in the @media (min-width: 761px) block below. */
        .action-icon-circle {
            width: 50px; height: 50px; border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 16px;
        }
        .action-icon-circle i { width: 22px; height: 22px; stroke-width: 1.9; }
        .action-card > i { width: 30px; height: 30px; color: var(--study-text-tertiary); stroke-width: 1.5; margin: 0 auto 14px; display: block; }
        .action-label { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: var(--study-text); }
        .action-sub { font-size: 13px; color: var(--study-text-secondary); line-height: 1.4; max-width: 100%; }

        /* ── Action card desktop sizing.
           James 2026-05-13: was previously two-tiered (big >1700, compact
           ≤1700) but James's monitor is ~1850 wide and STILL felt
           oversized. Consolidated to ONE compact desktop sizing for all
           ≥761 widths, every desktop now sees the same tight cards that
           leave room for Recent Sets above the fold.
           Hero title also brought down from 64 → 44 by default. */
        @media (min-width: 761px) {
            .hero-title { font-size: 44px; margin-bottom: 6px; }
            .hero-sub { font-size: 16px; }
            .hero-head { margin-bottom: 14px; }
            .hero-section { padding: 18px 32px 12px; }
            .action-card {
                padding: 20px 18px 18px;
                border-radius: 18px;
                min-height: 150px;
            }
            .action-icon-circle {
                width: 46px; height: 46px; border-radius: 13px;
                margin: 0 auto 12px;
            }
            .action-icon-circle i { width: 22px; height: 22px; }
            .action-card > i { width: 28px; height: 28px; margin: 0 auto 12px; }
            .action-label { font-size: 15px; margin-bottom: 4px; }
            .action-sub { font-size: 12.5px; line-height: 1.35; }
        }
        /* Cramped laptops (≤ 1366 width, e.g. older 15.6" PC laptops).
           Action sub-text was overflowing the right-edge arrow button.
           One more pass of tightening to keep cards visually clean.
           James 2026-05-13. */
        @media (min-width: 761px) and (max-width: 1366px) {
            .action-card {
                padding: 14px 14px 14px !important;
                min-height: 120px !important;
            }
            .action-icon-circle {
                width: 38px !important; height: 38px !important; border-radius: 11px !important;
                margin: 0 auto 8px !important;
            }
            .action-icon-circle i { width: 18px !important; height: 18px !important; }
            .action-label { font-size: 14px !important; margin-bottom: 3px !important; }
            .action-sub { font-size: 11.5px !important; line-height: 1.3 !important; }
            .hero-title { font-size: 36px !important; }
            .hero-sub { font-size: 14px !important; }
            .hero-section { padding: 14px 24px 10px !important; }
        }

        /* ── Sets Section ── */
        .sets-section { max-width: 1700px; margin: 0 auto; padding: 0 44px 40px; width: 100%; }
        .sets-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: nowrap; margin-bottom: 8px; }
        .sets-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
        .view-toggle-group { display: flex; background: var(--study-bg-tertiary); border-radius: 8px; overflow: hidden; }
        .view-toggle { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--study-text-tertiary); cursor: pointer; transition: all 0.15s; }
        .view-toggle.active { background: var(--study-bg-secondary); color: var(--study-text); }
        .view-toggle i { width: 15px; height: 15px; }
        .sets-section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
        .sets-heading { font-size: 34px; font-weight: 900; color: var(--study-text); margin: 0; letter-spacing: -0.02em; }
        .sets-header-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
        .sets-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
        .sets-search-wrap { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--study-bg-card, var(--bg-card, #fff)); border: 1px solid var(--study-border); border-radius: 16px; margin-bottom: 18px; transition: border-color 0.2s; }
        .sets-search-wrap:focus-within { border-color: var(--study-accent); }
        .sets-search-wrap i { width: 18px; height: 18px; color: var(--study-text-tertiary); flex-shrink: 0; }
        .sets-search-wrap input { flex: 1; border: none; background: transparent; color: var(--study-text); font-size: 16px; font-family: inherit; outline: none; }
        .sets-search-wrap input::placeholder { color: var(--study-text-tertiary); }
        .sets-search-box{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--study-bg-secondary);border:1px solid var(--study-border);border-radius:12px;flex:1 1 620px;min-width:320px;max-width:620px;transition:border-color .2s}
        .sets-search-box-compact{flex:0 0 250px;min-width:220px;max-width:280px;padding:7px 10px;border-radius:10px}
        .hero-search-wrap .sets-search-box {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            flex: 0 0 auto;
            padding: 12px 16px;
            border-radius: 10px;
        }
        .sets-search-box:focus-within{border-color:var(--study-accent)}
        .sets-search-box i{width:15px;height:15px;color:var(--study-text-tertiary);flex-shrink:0}
        .sets-search-input{flex:1;border:none;background:transparent;color:var(--study-text);font-size:.875rem;font-family:inherit;outline:none;-webkit-appearance:none}
        .sets-search-input::placeholder{color:var(--study-text-tertiary)}
        .sets-search-input::selection{background:var(--study-accent);color:#fff;-webkit-text-fill-color:#fff}
        .sets-search-input::-webkit-search-decoration,.sets-search-input::-webkit-search-cancel-button{display:none}
        .sets-search-input:-webkit-autofill,.sets-search-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 50px var(--study-bg-secondary) inset;-webkit-text-fill-color:var(--study-text)}
        /* ── Storage Usage Bar ── */
        .study-usage-bar { display: flex; align-items: center; gap: 14px; padding: 8px 0; margin-bottom: 6px; }
        .study-usage-info { display: flex; gap: 16px; font-size: 12px; color: var(--study-text-tertiary); white-space: nowrap; }
        .study-usage-track { flex: 1; height: 4px; background: var(--study-bg-tertiary); border-radius: 4px; overflow: hidden; max-width: 200px; }
        .study-usage-fill { height: 100%; background: var(--study-accent); border-radius: 4px; transition: width 0.4s ease; }
        .study-usage-fill.warn { background: #f59e0b; }
        .study-usage-fill.critical { background: #ef4444; }
        /* Desktop-only: darker text + thicker track (mobile has its own overrides). */
        @media (min-width: 761px) {
            .study-usage-info { color: var(--study-text-secondary); }
            .study-usage-track { height: 10px; border-radius: 999px; }
            .study-usage-fill { border-radius: 999px; }
        }

        /* ── Over-Limit Modal ── */
        .over-limit-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
        .over-limit-card { background: var(--study-bg-secondary); border: 1px solid var(--study-border); border-radius: 16px; padding: 32px; max-width: 420px; width: 90%; text-align: center; }
        .over-limit-icon { margin-bottom: 16px; }
        .over-limit-icon i { width: 48px; height: 48px; color: #ef4444; }
        .over-limit-card h2 { font-size: 20px; font-weight: 700; color: var(--study-text); margin: 0 0 8px; }
        .over-limit-card p { font-size: 14px; color: var(--study-text-secondary); margin: 0 0 20px; line-height: 1.5; }
        .over-limit-stats { display: flex; justify-content: center; gap: 24px; margin-bottom: 24px; font-size: 13px; color: var(--study-text-tertiary); }
        .over-limit-stat-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
        .over-limit-stat-val { font-size: 22px; font-weight: 700; color: var(--study-text); }
        .over-limit-stat-val.over { color: #ef4444; }
        .over-limit-actions { display: flex; gap: 10px; justify-content: center; }
        .over-limit-btn-secondary { padding: 10px 24px; background: transparent; border: 1px solid var(--study-border); border-radius: 10px; color: var(--study-text); font-size: 14px; font-weight: 600; cursor: pointer; }
        .over-limit-btn-primary { padding: 10px 24px; background: var(--study-accent); border: none; border-radius: 10px; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }

        .sets-grid { display: flex; flex-direction: column; gap: 8px; }
        .sets-grid.grid-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }

        /* ── Set Card (List View) ── */
        .set-card {
            display: flex; align-items: center; gap: 24px; padding: 26px 32px;
            background: var(--study-bg-secondary); border: 1px solid var(--study-border); border-radius: var(--study-radius);
            cursor: pointer; transition: all 0.2s; position: relative;
        }
        .set-card:hover { border-color: var(--study-border-light); }
        .set-card-left { flex: 1; min-width: 0; }
        .set-card-title { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
        .set-card-progress { display: flex; align-items: center; gap: 12px; }
        .set-card-pct { font-size: 15px; color: var(--study-text-tertiary); min-width: 36px; }
        .mastery-bar { height: 4px; background: var(--study-bg-tertiary); border-radius: 2px; overflow: hidden; display: flex; flex: 1; max-width: 180px; }
        .mastery-bar .seg { height: 100%; transition: width 0.3s; }
        .mastery-bar .seg-mastered { background: var(--study-green); }
        .mastery-bar .seg-familiar { background: var(--study-blue); }
        .mastery-bar .seg-learning { background: var(--study-accent); }
        .set-card-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-left: 16px; flex-shrink: 0; }
        .mastery-badge { padding: 5px 12px; border-radius: 7px; font-size: 12px; font-weight: 600; white-space: nowrap; }
        .set-card-methods { display: flex; gap: 4px; flex-shrink: 0; width: 240px; justify-content: flex-end; }
        .method-icon-sm { width: 28px; height: 28px; border-radius: 50%; background: var(--study-bg-tertiary); display: flex; align-items: center; justify-content: center; }
        .method-icon-sm i { width: 13px; height: 13px; color: var(--study-text-secondary); }
        .set-card-more { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--study-text-tertiary); cursor: pointer; border-radius: 6px; flex-shrink: 0; position: relative; }
        .set-card-more:hover { background: var(--study-bg-tertiary); color: var(--study-text); }
        .set-card-dropdown { position: fixed; background: var(--study-bg-card); border: 1px solid var(--study-border-light); border-radius: 8px; min-width: 150px; z-index: 9999; box-shadow: 0 8px 24px rgba(0,0,0,0.4); overflow: hidden; }
        .set-card-dropdown button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; background: none; border: none; color: var(--study-text); font-size: 13px; cursor: pointer; font-family: inherit; }
        .set-card-dropdown button:hover { background: var(--study-bg-tertiary); }
        .set-card-dropdown button.danger { color: var(--study-red); }
        .set-card-dropdown button i { width: 16px; height: 16px; }
        .set-rename-input { width: 100%; padding: 8px 12px; background: var(--study-bg-secondary); border: 1px solid var(--study-accent); border-radius: 6px; color: var(--study-text); font-size: 14px; font-family: inherit; outline: none; }

        /* ── Set Card (Grid View) ── */
        .sets-grid.grid-view .set-card { flex-direction: column; align-items: stretch; padding: 18px; }
        .sets-grid.grid-view .set-card-badges { margin-left: 0; margin-top: 8px; }
        .sets-grid.grid-view .set-card-methods { margin-left: 0; margin-top: 10px; }

        .sets-empty { text-align: center; padding: 60px 20px; }
        .sets-empty h3 { font-size: 18px; margin-bottom: 8px; }
        .sets-empty p { font-size: 14px; color: var(--study-text-secondary); max-width: 360px; margin: 0 auto 20px; line-height: 1.5; }
        .btn-create { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--study-accent) 85%, #fff) 0%, var(--study-accent) 50%, color-mix(in srgb, var(--study-accent) 85%, #000) 100%); color: #fff; font-weight: 700; font-size: 13px; border: none; border-radius: 10px; cursor: pointer; transition: all 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.18); text-shadow: 0 1px 1px rgba(0,0,0,0.1); position: relative; overflow: hidden; isolation: isolate; }
        .btn-create::after { content: ''; position: absolute; inset: 0; background: url('/images/noise.png') repeat; background-size: 128px 128px; border-radius: inherit; pointer-events: none; z-index: 1; mix-blend-mode: overlay; opacity: 0.6; }
        .btn-create:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.15), 0 6px 16px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.22); }

        /* ── Confirm Dialog ── */
        .confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(10px);z-index:10000;display:none;align-items:center;justify-content:center;padding:20px}
        .confirm-overlay.visible{display:flex}
        .confirm-dialog{background:var(--study-bg-secondary);border:1px solid var(--study-border-light);border-radius:18px;width:100%;max-width:360px;padding:28px 24px 22px;display:flex;flex-direction:column;gap:14px;animation:confirmPop .18s cubic-bezier(.34,1.56,.64,1)}
        @keyframes confirmPop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
        .confirm-icon-wrap{width:48px;height:48px;border-radius:14px;background:rgba(239,68,68,.12);display:flex;align-items:center;justify-content:center;margin:0 auto 2px}
        .confirm-icon-wrap i{width:24px;height:24px;color:var(--study-red)}
        .confirm-title{font-size:16px;font-weight:700;text-align:center;color:var(--study-text)}
        .confirm-msg{font-size:13px;color:var(--study-text-secondary);text-align:center;line-height:1.55}
        .confirm-btns{display:flex;gap:10px;margin-top:6px}
        .confirm-cancel{flex:1;padding:10px;border-radius:10px;border:1px solid var(--study-border-light);background:transparent;color:var(--study-text);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}
        .confirm-cancel:hover{background:var(--study-bg-tertiary)}
        .confirm-ok{flex:1;padding:10px;border-radius:10px;border:none;background:var(--study-red);color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s}
        .confirm-ok:hover{background:#dc2626}

        /* ── Error popup (premium refresh, accent gradient border, soft glow, themed icon) ── */
        #errorOverlay{background:rgba(6,8,14,.72)}
        #errorOverlay .confirm-dialog{
            position:relative;max-width:420px;padding:34px 30px 24px;border-radius:22px;
            background:var(--study-bg-secondary);
            border:1px solid color-mix(in srgb, var(--study-accent, #c17a4e) 22%, var(--study-border-light));
            box-shadow:
                0 0 0 1px rgba(255,255,255,.02) inset,
                0 1px 0 rgba(255,255,255,.05) inset,
                0 24px 60px -18px color-mix(in srgb, var(--study-accent, #c17a4e) 30%, transparent),
                0 36px 90px -20px rgba(0,0,0,.55);
        }
        /* Thin accent hairline across the top of the dialog */
        #errorOverlay .confirm-dialog::before{
            content:'';position:absolute;top:0;left:16%;right:16%;height:1px;
            background:linear-gradient(90deg,
                transparent,
                color-mix(in srgb, var(--study-accent, #c17a4e) 60%, transparent),
                transparent);
            pointer-events:none;
        }
        #errorOverlay .confirm-icon-wrap{
            width:56px;height:56px;border-radius:16px;margin:0 auto 4px;
            background:linear-gradient(135deg,
                color-mix(in srgb, var(--study-accent, #c17a4e) 22%, transparent),
                color-mix(in srgb, var(--study-accent, #c17a4e) 8%, transparent));
            border:1px solid color-mix(in srgb, var(--study-accent, #c17a4e) 28%, transparent);
            box-shadow:0 8px 24px -8px color-mix(in srgb, var(--study-accent, #c17a4e) 40%, transparent);
        }
        #errorOverlay .confirm-icon-wrap i{width:26px;height:26px;color:var(--study-accent, #c17a4e)}
        #errorOverlay .confirm-title{font-size:19px;font-weight:800;letter-spacing:-.01em;margin-top:2px}
        #errorOverlay .confirm-msg{font-size:14px;line-height:1.6;padding:0 4px}
        #errorOverlay #errorTip{
            margin-top:4px;padding:12px 14px;border-radius:12px;
            background:color-mix(in srgb, var(--study-accent, #c17a4e) 6%, transparent);
            border:1px solid color-mix(in srgb, var(--study-accent, #c17a4e) 16%, transparent);
            color:var(--study-text-secondary) !important;font-size:12.5px !important;
            line-height:1.55 !important;text-align:center !important;margin-top:6px !important;
        }
        #errorOverlay .confirm-cancel{
            flex:1;padding:12px 14px;border-radius:12px;border:none;
            background:linear-gradient(180deg,
                color-mix(in srgb, var(--study-accent, #c17a4e) 95%, #fff) 0%,
                var(--study-accent, #c17a4e) 55%,
                color-mix(in srgb, var(--study-accent, #c17a4e) 85%, #000) 100%);
            color:#fff;font-size:14px;font-weight:700;letter-spacing:.01em;
            box-shadow:
                0 1px 0 rgba(255,255,255,.18) inset,
                0 6px 16px -6px color-mix(in srgb, var(--study-accent, #c17a4e) 50%, transparent),
                0 2px 4px rgba(0,0,0,.12);
            transition:filter .15s, transform .15s, box-shadow .15s;
        }
        #errorOverlay .confirm-cancel:hover{
            background:linear-gradient(180deg,
                color-mix(in srgb, var(--study-accent, #c17a4e) 95%, #fff) 0%,
                var(--study-accent, #c17a4e) 55%,
                color-mix(in srgb, var(--study-accent, #c17a4e) 85%, #000) 100%);
            filter:brightness(1.06);transform:translateY(-1px);
            box-shadow:
                0 1px 0 rgba(255,255,255,.22) inset,
                0 10px 22px -6px color-mix(in srgb, var(--study-accent, #c17a4e) 55%, transparent),
                0 3px 6px rgba(0,0,0,.14);
        }
        #errorOverlay .confirm-cancel:active{transform:translateY(0);filter:brightness(.98)}

        /* ── Input Modal ── */
        .input-modal-field {
            width: 100%; padding: 12px 14px; border-radius: 10px;
            border: 1px solid var(--study-border); background: var(--study-bg-secondary);
            color: var(--study-text); font-size: 15px; font-family: inherit;
            margin: 12px 0 16px; outline: none; box-sizing: border-box;
            transition: border-color 0.15s;
        }
        .input-modal-field:focus { border-color: var(--study-accent); }
        #inputOk { background: var(--study-accent) !important; }
        #inputOk:hover { filter: brightness(1.08); }

        /* ── Create Wizard Modal ── */
        .modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(6px); z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; color: var(--study-text); }
        .modal-overlay.visible { display: flex; }
        .modal { background: var(--study-bg-secondary); border: 1px solid color-mix(in srgb, var(--study-border) 85%, transparent); border-radius: 24px; width: 100%; max-width: 640px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; color: var(--study-text); box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25); }
        .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 18px; border-bottom: 1px solid color-mix(in srgb, var(--study-border) 75%, transparent); flex-shrink: 0; }
        .modal-header h3 { font-size: 22px; font-weight: 800; }
        .modal-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; transition: all 0.15s; }
        .modal-close:hover { background: var(--study-bg-tertiary); border-color: var(--study-border); }
        .modal-body { padding: 24px; overflow-y: auto; scrollbar-width: none; }
        .modal-body::-webkit-scrollbar { display: none; }
        .wizard-step { display: none; flex-direction: column; gap: 16px; }
        .wizard-step.active { display: flex; }
        .wizard-step h4 { font-size: 18px; font-weight: 700; text-align: center; }
        .wizard-step .subtitle { font-size: 13px; color: var(--study-text-secondary); text-align: center; margin-top: -8px; }

        /* Dropzone */
        .dropzone {
            border: 2px dashed color-mix(in srgb, var(--study-border) 80%, transparent); border-radius: 18px; padding: 44px 24px;
            text-align: center; cursor: pointer; transition: all 0.2s; position: relative;
        }
        .dropzone:hover, .dropzone.dragover { border-color: var(--study-accent); background: var(--study-accent-dim); }
        .dropzone i { width: 40px; height: 40px; color: var(--study-text-tertiary); margin-bottom: 12px; }
        .dropzone-title { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
        .dropzone-sub { font-size: 12px; color: var(--study-text-tertiary); }
        .dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
        .file-list { display: flex; flex-direction: column; gap: 6px; }
        .file-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--study-bg-tertiary); border-radius: 8px; font-size: 13px; }
        .file-item i { width: 14px; height: 14px; flex-shrink: 0; }
        .file-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .file-item-size { color: var(--study-text-tertiary); font-size: 11px; }
        .file-item-remove { background: none; border: none; color: var(--study-text-tertiary); cursor: pointer; padding: 2px; }
        .file-item-remove:hover { color: var(--study-red); }
        .divider-or { display: flex; align-items: center; gap: 12px; color: var(--study-text-tertiary); font-size: 12px; }
        .divider-or::before, .divider-or::after { content: ''; flex: 1; height: 1px; background: var(--study-border); }
        .url-input-wrap { display: flex; align-items: center; gap: 10px; background: transparent; border: 1.5px solid var(--study-border); border-radius: 14px; padding: 0 14px; overflow: hidden; transition: border-color 0.15s; }
        .url-input-wrap:focus-within { border-color: var(--study-accent); }
        .url-input-wrap i { width: 16px; height: 16px; color: var(--study-text-tertiary); flex-shrink: 0; }
        .url-input-wrap input { flex: 1; background: transparent !important; border: none; color: var(--study-text); font-size: 14px; padding: 10px 0; outline: none; font-family: inherit; }
        .paste-area { background: var(--study-bg) !important; border: 1px solid var(--study-border); border-radius: 10px; color: var(--study-text); font-family: inherit; font-size: 14px; padding: 12px 14px; outline: none; resize: vertical; min-height: 100px; width: 100%; transition: border-color 0.2s; }
        .paste-area:focus { border-color: var(--study-accent); }
        .char-counter { font-size: 11px; color: var(--study-text-tertiary); text-align: right; margin-top: -8px; }

        /* Method Cards */
        .methods-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .method-card {
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
            padding: 20px 12px; background: var(--study-bg); border: 2px solid var(--study-border);
            border-radius: 12px; cursor: pointer; transition: all 0.15s; position: relative; min-height: 100px;
        }
        .method-card:hover { border-color: var(--study-border-light); }
        .method-card.selected { border-color: var(--study-accent); background: var(--study-accent-dim); }
        .method-card i { width: 24px; height: 24px; color: var(--study-text-secondary); }
        .method-card.selected i { color: var(--study-accent); }
        .method-card-label { font-size: 13px; font-weight: 500; }
        /* "Recommended" badge under Notes + Course in the wizard's main grid.
           James 2026-05-12, signals defaults to first-time users without
           burying the affordance. Always rendered; only takes up space on
           cards that actually have it. */
        .method-card-rec {
            display: inline-flex; align-items: center;
            font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
            text-transform: uppercase;
            padding: 2px 8px; border-radius: 999px;
            background: color-mix(in srgb, var(--study-accent) 14%, transparent);
            color: var(--study-accent);
            margin-top: 2px;
        }
        .method-card .coming-soon { position: absolute; top: 6px; right: 6px; font-size: 9px; padding: 2px 6px; background: var(--study-bg-tertiary); border-radius: 4px; color: var(--study-text-tertiary); font-weight: 600; text-transform: uppercase; }
        /* "Show 6 more options" expander, promoted from dashed-grey utility
           pill to a proper accent-tinted call-to-action so first-time users
           actually notice it. James 2026-05-12 reported the previous version
           was too easy to miss. */
        .wiz-methods-more-btn {
            display: flex; align-items: center; justify-content: center; gap: 8px;
            width: 100%; margin-top: 16px; padding: 14px 18px;
            background: color-mix(in srgb, var(--study-accent) 8%, transparent);
            border: 1.5px solid color-mix(in srgb, var(--study-accent) 28%, transparent);
            border-radius: 12px; cursor: pointer;
            color: var(--study-accent); font-size: 14px; font-weight: 700; font-family: inherit;
            letter-spacing: -0.005em;
            transition: all .15s ease;
        }
        .wiz-methods-more-btn:hover {
            background: color-mix(in srgb, var(--study-accent) 14%, transparent);
            border-color: var(--study-accent);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px color-mix(in srgb, var(--study-accent) 18%, transparent);
        }
        .wiz-methods-more-btn .wiz-methods-more-spark { width: 16px; height: 16px; }
        .wiz-methods-more-btn .wiz-methods-more-chev { width: 18px; height: 18px; transition: transform .2s; }
        .wiz-methods-more-btn.open .wiz-methods-more-chev { transform: rotate(180deg); }
        #wizMethodsMore { grid-template-columns: 1fr 1fr; gap: 10px; }

        .btn-wizard { width: 100%; padding: 14px; 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); font-weight: 800; font-size: 14px; border: none; border-radius: 14px; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 3px 3px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2); text-transform: uppercase; letter-spacing: 0.04em; }
        .btn-wizard: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); }
        .btn-wizard:disabled { opacity: 0.5; cursor: not-allowed; }
        .btn-wizard .spinner { width: 16px; height: 16px; border: 2px solid rgba(0,0,0,0.2); border-top-color: #000; border-radius: 50%; -webkit-animation: spin 0.6s linear infinite; animation: spin 0.6s linear infinite; }
        @-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ═══ Modern Khio Loader, dual counter-rotating arcs ═══
           Use <div class="khio-loader"></div> anywhere you need a polished
           loading state. Inherits color from parent or override with CSS var.
           Variants: .sm (32px), .lg (64px)  */
        .khio-loader {
            width: 48px; height: 48px; display: inline-block;
            position: relative; color: var(--study-accent);
            margin: 0 auto 14px;
        }
        .khio-loader::before, .khio-loader::after {
            content: ''; position: absolute; inset: 0;
            border-radius: 50%; border: 2.75px solid transparent;
        }
        .khio-loader::before {
            border-top-color: currentColor;
            border-right-color: currentColor;
            -webkit-animation: khio-loader-spin 0.85s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
            animation: khio-loader-spin 0.85s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
        }
        .khio-loader::after {
            inset: 7px;
            border-bottom-color: currentColor;
            border-left-color: currentColor;
            opacity: 0.45;
            -webkit-animation: khio-loader-spin-rev 1.25s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
            animation: khio-loader-spin-rev 1.25s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
        }
        .khio-loader.sm { width: 32px; height: 32px; }
        .khio-loader.sm::before, .khio-loader.sm::after { border-width: 2.25px; }
        .khio-loader.sm::after { inset: 5px; }
        .khio-loader.lg { width: 64px; height: 64px; }
        .khio-loader.lg::before, .khio-loader.lg::after { border-width: 3.5px; }
        .khio-loader.lg::after { inset: 9px; }
        @-webkit-keyframes khio-loader-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
        @keyframes khio-loader-spin { to { transform: rotate(360deg); } }
        @-webkit-keyframes khio-loader-spin-rev { to { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } }
        @keyframes khio-loader-spin-rev { to { transform: rotate(-360deg); } }

        /* Inline message companion, sits next to a .khio-loader */
        .khio-loader-msg {
            text-align: center;
            color: var(--study-text-secondary);
            font-size: 13px;
            margin-top: 2px;
            -webkit-animation: khio-loader-fade 2.2s ease-in-out infinite;
            animation: khio-loader-fade 2.2s ease-in-out infinite;
        }
        @-webkit-keyframes khio-loader-fade { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
        @keyframes khio-loader-fade { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

        .wizard-loading { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 20px; }
        .wizard-loading .big-spinner {
            width: 56px; height: 56px; display: inline-block; position: relative;
            color: var(--study-accent); margin: 0 auto;
        }
        .wizard-loading .big-spinner::before, .wizard-loading .big-spinner::after {
            content: ''; position: absolute; inset: 0; border-radius: 50%;
            border: 3px solid transparent;
        }
        .wizard-loading .big-spinner::before {
            border-top-color: currentColor; border-right-color: currentColor;
            -webkit-animation: khio-loader-spin 0.85s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
            animation: khio-loader-spin 0.85s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
        }
        .wizard-loading .big-spinner::after {
            inset: 8px; border-bottom-color: currentColor; border-left-color: currentColor;
            opacity: 0.45;
            -webkit-animation: khio-loader-spin-rev 1.25s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
            animation: khio-loader-spin-rev 1.25s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
        }
        .gen-progress-wrap { width: 100%; max-width: 320px; display: flex; align-items: center; gap: 12px; }
        .gen-progress-bar {
            flex: 1; height: 10px; background: var(--study-bg-tertiary);
            border-radius: 6px; overflow: hidden; position: relative;
        }
        .gen-progress-fill {
            height: 100%; width: 0%; border-radius: 6px;
            background: linear-gradient(90deg,
                color-mix(in srgb, var(--study-accent) 80%, #fff),
                var(--study-accent),
                color-mix(in srgb, var(--study-accent) 80%, #fff));
            background-size: 200% 100%;
            transition: width 0.6s cubic-bezier(0.33, 1, 0.68, 1);
            position: relative;
            -webkit-animation: khio-progress-shimmer 2.2s linear infinite;
            animation: khio-progress-shimmer 2.2s linear infinite;
        }
        .gen-progress-fill::after {
            content: ''; position: absolute; inset: 0; border-radius: inherit;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
            -webkit-animation: khio-progress-sweep 1.6s linear infinite;
            animation: khio-progress-sweep 1.6s linear infinite;
        }
        @-webkit-keyframes khio-progress-shimmer { to { background-position: -200% 0; } }
        @keyframes khio-progress-shimmer { to { background-position: -200% 0; } }
        @-webkit-keyframes khio-progress-sweep {
            0% { transform: translateX(-100%); } 100% { transform: translateX(100%); }
        }
        @keyframes khio-progress-sweep {
            0% { transform: translateX(-100%); } 100% { transform: translateX(100%); }
        }
        .gen-progress-pct {
            font-size: 14px; font-weight: 700; color: var(--study-accent);
            min-width: 36px; font-variant-numeric: tabular-nums;
            transition: color 0.3s ease;
        }
        .wizard-loading h4 {
            -webkit-animation: khio-loader-fade 2.2s ease-in-out infinite;
            animation: khio-loader-fade 2.2s ease-in-out infinite;
        }

        /* ═══ Global polish: smoother transitions throughout ═══ */
        .set-card, .review-set-row, .method-card, .action-card, .mobile-method-tab {
            transition: transform 0.18s cubic-bezier(0.33, 1, 0.68, 1),
                        box-shadow 0.18s cubic-bezier(0.33, 1, 0.68, 1),
                        background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
        }
        .set-card:hover, .review-set-row:hover { transform: translateY(-2px); }
        .set-card:active, .review-set-row:active, .method-card:active, .action-card:active { transform: translateY(0) scale(0.985); }
        .method-card.selected { -webkit-animation: khio-pop 0.22s ease-out; animation: khio-pop 0.22s ease-out; }
        @-webkit-keyframes khio-pop { 0% { transform: scale(0.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
        @keyframes khio-pop { 0% { transform: scale(0.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

        /* Fade-in when a view becomes active */
        .study-view.active { -webkit-animation: khio-view-in 0.28s cubic-bezier(0.33, 1, 0.68, 1); animation: khio-view-in 0.28s cubic-bezier(0.33, 1, 0.68, 1); }
        @-webkit-keyframes khio-view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes khio-view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

        /* Settings view gets a right-to-left slide like the hamburger drawer */
        #view-settings.active {
            -webkit-animation: khio-settings-slide 0.34s cubic-bezier(.2,.9,.3,1);
            animation: khio-settings-slide 0.34s cubic-bezier(.2,.9,.3,1);
        }
        @-webkit-keyframes khio-settings-slide {
            from { opacity: 0.35; transform: translateX(100%); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes khio-settings-slide {
            from { opacity: 0.35; transform: translateX(100%); }
            to { opacity: 1; transform: translateX(0); }
        }

        /* ── Profile (pfp) button polish ── */
        .mobile-collection-profile {
            transition: transform 0.18s cubic-bezier(0.33, 1, 0.68, 1), filter 0.18s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .mobile-collection-profile:hover { transform: translateY(-1px); filter: brightness(1.05); }
        .mobile-collection-profile:active {
            transform: scale(0.88);
            transition-duration: 0.09s;
        }
        .mobile-collection-profile .mobile-collection-avatar,
        .mobile-collection-profile .mobile-collection-avatar-image {
            transition: transform 0.22s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.22s ease;
        }
        .mobile-collection-profile:active .mobile-collection-avatar,
        .mobile-collection-profile:active .mobile-collection-avatar-image {
            transform: scale(0.94);
        }
        /* subtle idle breathing so the avatar feels alive */
        .mobile-collection-profile .mobile-collection-avatar-image {
            -webkit-animation: khio-avatar-breathe 5.2s ease-in-out infinite;
            animation: khio-avatar-breathe 5.2s ease-in-out infinite;
        }
        @-webkit-keyframes khio-avatar-breathe {
            0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
            50% { box-shadow: 0 0 0 3px rgba(255,255,255,0.08); }
        }
        @keyframes khio-avatar-breathe {
            0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
            50% { box-shadow: 0 0 0 3px rgba(255,255,255,0.08); }
        }

        /* ── Hamburger (mobile view switcher) polish ── */
        .mobile-view-switcher {
            transition: transform 0.18s cubic-bezier(0.33, 1, 0.68, 1), background 0.18s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .mobile-view-switcher:active {
            transform: scale(0.92);
            transition-duration: 0.08s;
        }
        .mobile-view-switcher i,
        .mobile-view-switcher svg {
            transition: transform 0.32s cubic-bezier(0.33, 1, 0.68, 1);
        }
        .mobile-view-switcher:active i,
        .mobile-view-switcher:active svg {
            transform: rotate(90deg) scale(1.06);
        }

        /* Respect reduced motion preferences */
        @media (prefers-reduced-motion: reduce) {
            .khio-loader::before, .khio-loader::after,
            .wizard-loading .big-spinner::before, .wizard-loading .big-spinner::after,
            .gen-progress-fill, .gen-progress-fill::after,
            .khio-loader-msg, .wizard-loading h4, .study-view.active, .method-card.selected,
            .mobile-collection-profile .mobile-collection-avatar-image {
                animation: none !important;
                -webkit-animation: none !important;
            }
        }

        /* ── Set Detail Layout ── */
        .detail-layout { flex: 1; display: flex; overflow: hidden; align-items: stretch; min-height: 0; height: 100%; position: relative; padding: 8px 8px 8px 0; gap: 8px; background: var(--study-bg-tertiary, rgba(0,0,0,0.15)); }

        /* Method nav items (rendered inside study-sidebar in detail view) */
        .method-nav {
            display: flex; align-items: center; gap: 11px; padding: 9px 12px; font-size: 13px; font-weight: 500;
            color: var(--study-text-secondary); cursor: pointer; transition: all 0.15s ease; border-radius: 10px;
            border: none; background: none; width: 100%; text-align: left; font-family: inherit; margin-bottom: 2px;
        }
        .method-nav:hover { background: var(--study-bg-tertiary); color: var(--study-text); }
        /* Active state is a soft-tinted pill using the study accent, mirrors the
           mock's "Final Exam" highlight. Opacity stays subtle so it reads as a
           selected row, not a CTA button. */
        .method-nav.active {
            color: var(--study-accent);
            background: color-mix(in srgb, var(--study-accent) 12%, transparent);
            font-weight: 600;
        }
        .method-nav i { width: 17px; height: 17px; flex-shrink: 0; stroke-width: 1.8; }
        .method-nav-sep { display: flex; align-items: center; gap: 6px; padding: 8px 10px 3px; }
        .method-nav-sep::before, .method-nav-sep::after { content: ''; flex: 1; height: 1px; background: var(--study-border); opacity: .6; }
        .method-nav-sep span { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--study-text-muted); white-space: nowrap; }
        /* Section labels (MODULES / STUDY TOOLS / PRACTICE) */
        .method-nav-group-label {
            padding: 16px 12px 6px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--study-text-muted);
        }
        .method-nav-group-sep { margin-top: 4px; padding-top: 16px; border-top: none; }

        /* ── Set-title header at the top of the detail sidebar ──
           Small clickable card with a subject-matched icon + the set title.
           Provides orientation ("what am I studying") and a secondary exit
           back to the sets list on click. */
        .sidebar-detail-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 10px;
            margin: 4px 0 4px;
            border-radius: 12px;
            cursor: pointer;
            transition: background 0.15s ease;
        }
        .sidebar-detail-header:hover { background: var(--study-bg-tertiary); }
        .sidebar-detail-header-icon {
            width: 34px;
            height: 34px;
            border-radius: 9px;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: color-mix(in srgb, var(--study-accent) 14%, transparent);
            color: var(--study-accent);
        }
        .sidebar-detail-header-icon i { width: 17px; height: 17px; stroke-width: 2; }
        .sidebar-detail-header-title {
            flex: 1;
            min-width: 0;
            font-size: 14px;
            font-weight: 800;
            line-height: 1.2;
            color: var(--study-text);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            letter-spacing: -0.01em;
        }
        /* Subject-tone variants, each set's header icon gets a slightly
           different hue pulled from the same palette as the KLM picker cards
           so they feel like a family. Falls back to accent rust otherwise. */
        .sidebar-detail-header[data-tone="rose"]   .sidebar-detail-header-icon { background: rgba(144,71,44,.14);  color: #90472c; }
        .sidebar-detail-header[data-tone="teal"]   .sidebar-detail-header-icon { background: rgba(42,157,143,.14); color: #2a9d8f; }
        .sidebar-detail-header[data-tone="stone"]  .sidebar-detail-header-icon { background: rgba(107,112,92,.14); color: #6b705c; }
        .sidebar-detail-header[data-tone="sky"]    .sidebar-detail-header-icon { background: rgba(61,90,128,.14);  color: #3d5a80; }
        .sidebar-detail-header[data-tone="violet"] .sidebar-detail-header-icon { background: rgba(131,56,236,.14); color: #8338ec; }
        .sidebar-detail-header[data-tone="mint"]   .sidebar-detail-header-icon { background: rgba(88,129,87,.14);  color: #588157; }
        .sidebar-detail-header[data-tone="amber"]  .sidebar-detail-header-icon { background: rgba(188,108,37,.14); color: #bc6c25; }
        .sidebar-detail-header[data-tone="lemon"]  .sidebar-detail-header-icon { background: rgba(114,9,183,.14);  color: #7209b7; }

        /* Hide the header entirely when the sidebar is collapsed, only the
           section headings + nav buttons need to stay visible in compact mode. */
        .study-layout.sidebar-collapsed .sidebar-detail-header { display: none; }

        /* Main Content */
        .detail-main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: transparent; border-radius: 14px; border: none; }
        .detail-main.mode-reading { overflow: hidden; }
        .detail-main-inner { max-width: none; margin: 0; padding: 22px 24px 28px; width: 100%; flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; }
        .detail-main-inner.mode-reading { padding: 10px 8px 18px 14px; display: flex; flex-direction: column; height: 100%; min-height: 0; }
        .detail-main-inner.mode-reading #quillEditorShell {
            height: 100%;
            min-height: 0;
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
            border: 1px solid var(--study-border);
            border-radius: 16px;
            overflow: hidden;
            background: var(--study-bg-secondary);
            padding: 10px;
        }
        .detail-main-inner.mode-reading #quillEditorShell > .ql-toolbar.ql-snow {
            margin: 0;
            border: 1px solid var(--study-border-light) !important;
            border-radius: 14px !important;
            background: var(--study-bg-tertiary) !important;
            padding: 10px 12px;
            box-shadow: none !important;
            position: static !important;
            top: auto !important;
        }
        .detail-main-inner.mode-reading #quillEditorShell > .ql-toolbar.ql-snow .ql-formats {
            margin-right: 12px;
            padding-right: 12px;
            border-right: 1px solid var(--study-border);
        }
        .detail-main-inner.mode-reading #quillEditorShell > .ql-toolbar.ql-snow .ql-formats:last-child {
            margin-right: 0;
            padding-right: 0;
            border-right: none;
        }
        .detail-main-inner.mode-reading #quillEditorShell > .ql-container.ql-snow {
            border: 1px solid var(--study-border) !important;
            border-radius: 14px;
            flex: 1;
            min-height: 0;
            font-size: 16px !important;
            background: var(--study-bg-secondary);
            margin-top: 0;
            overflow: hidden;
        }
        .detail-main-inner.mode-reading #quillEditorShell .ql-editor {
            padding: 26px 34px !important;
            color: var(--study-text) !important;
        }
        .detail-main-inner.mode-reading #quillEditorShell .ql-editor.ql-blank::before {
            color: var(--study-text-tertiary) !important;
        }

        /* Mastery Pills */
        .mastery-pills-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
        .mastery-pills-row .mastery-pills { margin-bottom: 0; }
        .mastery-compact { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
        .mastery-bar-wrap { display: flex; height: 6px; border-radius: 4px; overflow: hidden; background: var(--study-bg-tertiary); width: 100%; max-width: 400px; }
        .mastery-bar-seg { height: 100%; transition: width 0.4s ease; }
        .mastery-seg-unfamiliar { background: #ef4444; }
        .mastery-seg-learning { background: #f59e0b; }
        .mastery-seg-familiar { background: #3b82f6; }
        .mastery-seg-mastered { background: #22c55e; }
        .mastery-stats { display: flex; gap: 12px; flex-wrap: wrap; }
        .mastery-stat { font-size: 11px; font-weight: 600; color: var(--study-text-tertiary); display: flex; align-items: center; gap: 4px; }
        .mastery-stat::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
        .mastery-stat-due::before { background: #f97316; }
        .mastery-stat-unfamiliar::before { background: #ef4444; }
        .mastery-stat-learning::before { background: #f59e0b; }
        .mastery-stat-familiar::before { background: #3b82f6; }
        .mastery-stat-mastered::before { background: #22c55e; }
        .mastery-scope-chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
        .mastery-scope-chips .sg-scope-chip {
            padding: 5px 12px; border-radius: 10px; font-size: 11px; font-weight: 800;
            text-transform: uppercase; letter-spacing: 0.04em;
            border: 1.5px solid var(--study-border); background: var(--study-bg-secondary);
            color: var(--study-text-secondary); cursor: pointer;
            box-shadow: 2px 2px 0 rgba(0,0,0,0.06); transition: all 0.15s;
        }
        .mastery-scope-chips .sg-scope-chip:hover {
            transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
            border-color: var(--study-accent);
        }
        .mastery-scope-chips .sg-scope-chip.active {
            border-color: var(--study-accent); color: var(--study-accent);
            background: color-mix(in srgb, var(--study-accent) 12%, transparent);
            box-shadow: 2px 2px 0 rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.2);
        }
        .mastery-scope-chips .sg-scope-chip-create {
            border-style: dashed; color: var(--study-text-secondary);
        }
        .mastery-scope-chips .sg-scope-chip-create:hover {
            border-color: var(--study-accent); color: var(--study-accent);
        }
        .mastery-pills { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
        .mastery-pill {
            padding: 5px 12px; border-radius: 10px; font-size: 11px; font-weight: 800;
            cursor: pointer; transition: all 0.15s; border: 1.5px solid transparent;
            text-transform: uppercase; letter-spacing: 0.04em;
            box-shadow: 2px 2px 0 rgba(0,0,0,0.06);
        }
        .mastery-pill:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(0,0,0,0.1); }
        .mastery-pill-unfamiliar { background: rgba(239,68,68,0.1); color: var(--study-red); border-color: rgba(239,68,68,0.2); }
        .mastery-pill-learning { background: color-mix(in srgb, var(--study-accent) 10%, transparent); color: var(--study-accent); border-color: color-mix(in srgb, var(--study-accent) 25%, transparent); }
        .mastery-pill-familiar { background: rgba(59,130,246,0.1); color: var(--study-blue); border-color: rgba(59,130,246,0.2); }
        .mastery-pill-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) 25%, transparent); }
        .mastery-pill.active { border-color: currentColor; box-shadow: 2px 2px 0 rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.2); }

        /* Bottom Nav (for card-based methods) */
        .card-nav { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 20px 0; margin-top: auto; }
        .card-nav button {
            width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--study-border);
            background: var(--study-bg-secondary); color: var(--study-text-secondary);
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            transition: all 0.15s; box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
        }
        .card-nav button:hover { border-color: var(--study-accent); color: var(--study-accent); transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--study-accent-dim, rgba(232,133,58,0.15)); }
        .card-nav button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(0,0,0,0.1); }
        .card-nav button:disabled { opacity: 0.3; cursor: not-allowed; transform: none; box-shadow: none; }
        .card-nav button i { width: 18px; height: 18px; }
        .card-nav-counter { font-size: 15px; font-weight: 800; color: var(--study-text-secondary); min-width: 60px; text-align: center; letter-spacing: 0.02em; }
        .skip-row { text-align: center; padding: 4px 0 8px; }
        .skip-link {
            background: none; border: 1.5px solid var(--study-border); color: var(--study-text-tertiary);
            font-size: 12px; cursor: pointer; font-family: inherit; font-weight: 600;
            padding: 6px 16px; border-radius: 10px; transition: all 0.15s;
            box-shadow: 2px 2px 0 rgba(0,0,0,0.06); text-decoration: none;
        }
        .skip-link:hover { border-color: var(--study-text-secondary); color: var(--study-text-muted); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(0,0,0,0.1); }
        .mastered-link {
            background: none; border: 1.5px solid color-mix(in srgb, var(--study-green) 35%, transparent);
            color: color-mix(in srgb, var(--study-green) 72%, var(--study-text));
            font-size: 12px; cursor: pointer; font-family: inherit; font-weight: 700;
            padding: 6px 16px; border-radius: 10px; transition: all 0.15s;
            display: inline-flex; align-items: center; gap: 5px;
            box-shadow: 2px 2px 0 rgba(34,197,94,0.1); text-transform: uppercase; letter-spacing: 0.03em;
        }
        .mastered-link:hover { background: color-mix(in srgb, var(--study-green) 8%, transparent); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(34,197,94,0.15); }


/* --- Resize handle, right sidebar, right chat, image lightbox, suggest cards --- */

        /* Resize Handle */
        .sidebar-resize-handle {
            width: 6px; cursor: col-resize; background: transparent; flex-shrink: 0;
            position: relative; z-index: 10; margin: 0 0 8px;
            height: calc(100% - 8px);
            opacity: 1;
            transition: background 0.15s, width 0.32s cubic-bezier(.4,0,.2,1), margin 0.32s cubic-bezier(.4,0,.2,1), opacity 0.24s ease;
        }
        .sidebar-resize-handle:hover, .sidebar-resize-handle.dragging {
            background: var(--study-accent);
        }
        .sidebar-resize-handle::after {
            content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 2px; height: 32px; border-radius: 2px; background: var(--study-border);
        }
        .sidebar-resize-handle:hover::after, .sidebar-resize-handle.dragging::after {
            background: var(--study-accent);
        }

        /* Right Sidebar */
        .detail-right {
            width: var(--right-sidebar-w); min-width: 320px; max-width: 56vw;
            margin: 0;
            height: 100%;
            background: var(--study-bg-secondary); border: 1px solid var(--study-border);
            border-radius: 14px;
            display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; min-height: 0;
            opacity: 1;
            transition: width 0.32s cubic-bezier(.4,0,.2,1), margin 0.32s cubic-bezier(.4,0,.2,1), opacity 0.24s ease, border-color 0.24s ease;
        }
        .detail-layout.sidebar-hidden .detail-right {
            width: 0 !important;
            min-width: 0;
            margin-right: 0;
            border-color: transparent;
            opacity: 0;
            pointer-events: none;
        }
        .detail-layout.sidebar-hidden .sidebar-resize-handle {
            width: 0;
            margin: 0 0 8px;
            opacity: 0;
            pointer-events: none;
        }
        .detail-layout.sidebar-hidden .sidebar-resize-handle::after { opacity: 0; }
        .right-sidebar-reopen {
            position: absolute;
            bottom: 20px;
            right: 18px;
            z-index: 25;
            height: 34px;
            padding: 0 12px;
            border-radius: 999px;
            border: 1px solid var(--study-border);
            background: color-mix(in srgb, var(--study-bg-secondary) 86%, #fff 14%);
            color: var(--study-text-secondary);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            opacity: 0;
            transform: translateX(20px);
            pointer-events: none;
            transition: opacity 0.22s ease, transform 0.32s cubic-bezier(.4,0,.2,1), color 0.15s, background 0.15s;
            box-shadow: 0 10px 28px rgba(0,0,0,0.14);
        }
        .right-sidebar-reopen i { width: 13px; height: 13px; }
        .right-sidebar-reopen:hover {
            color: var(--study-text);
            background: var(--study-bg-secondary);
        }
        .detail-layout.sidebar-hidden .right-sidebar-reopen {
            opacity: 1;
            transform: translateX(0);
            pointer-events: auto;
        }
        .right-tabs { display: none; border-bottom: 1px solid var(--study-border); background: color-mix(in srgb, var(--study-bg-secondary) 82%, transparent); position: relative; }
        .right-tab { flex: 1; padding: 10px; font-size: 11px; font-weight: 700; text-align: center; color: var(--study-text-tertiary); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; text-transform: uppercase; letter-spacing: .04em; }
        .right-tab-close { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--study-text-tertiary); cursor: pointer; padding: 4px; border-radius: 6px; display: flex; align-items: center; transition: all .15s; }
        .right-tab-close:hover { color: var(--study-text); background: rgba(255,255,255,.06); }
        .right-tab:hover { color: var(--study-text-secondary); }
        .right-tab.active { color: var(--study-accent); border-bottom-color: var(--study-accent); }
        .right-panel { flex: 1; display: none; flex-direction: column; overflow: hidden; }
        .right-panel.active { display: flex; }

        /* Right Chat */
        .right-chat-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.right-chat-head {
    display: flex; align-items: center; justify-content: flex-start;
    padding: 12px 12px 8px; border-bottom: none;
}
        .right-chat-head-btn {
            height: 30px; border-radius: 8px; border: 1px solid var(--study-border);
            background: transparent; color: var(--study-text-secondary); cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center; gap: 5px;
            font-size: 12px; font-weight: 600; font-family: inherit; padding: 0 10px;
            transition: all .15s;
        }
        .right-chat-head-btn { width: 30px; padding: 0; }
        .right-chat-head-btn:hover {
            color: var(--study-text);
            background: var(--study-bg-tertiary);
        }
        .right-chat-head-btn i { width: 14px; height: 14px; }
.right-chat-messages {
    flex: 1; overflow-y: auto; padding: 14px;
    display: flex; flex-direction: column; gap: 14px; align-items: center;
}
        .right-chat-empty {
            margin: auto 0;
            text-align: center;
            padding: 34px 24px 10px;
        }
        .right-chat-empty-visual { display: flex; justify-content: center; margin: 0 auto 18px; }
        .right-chat-empty-illustration { width: min(240px, 92%); filter: drop-shadow(0 16px 28px rgba(15, 23, 42, 0.06)); }
        .right-chat-empty-title {
            font-size: clamp(30px, 2.3vw, 44px);
            font-weight: 800;
            letter-spacing: -0.02em;
            margin-bottom: 10px;
            line-height: 1.1;
        }
        .right-chat-empty-sub {
            font-size: 14px;
            color: var(--study-text-secondary);
            line-height: 1.55;
        }
        .right-chat-reset { text-align: center; padding: 2px 12px 6px; }
        .right-chat-reset a {
            font-size: 11px;
            color: var(--study-text-tertiary);
            cursor: pointer;
            text-decoration: underline;
        }
        .right-chat-input-wrap {
            padding: 12px 14px 14px;
            background: transparent;
        }
        /* Real bordered input pill. Old comment "No bubble, input sits
           flush with the panel" was a design that the user couldn't tell
           where the text box was (no visible target for typing).
           Restored as a proper rounded container with a focus ring.
           James 2026-05-12. */
        .right-chat-input {
            border: 1px solid var(--study-border);
            background: var(--study-bg);
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            gap: 0;
            padding: 10px 12px 10px;
            transition: border-color 160ms ease, box-shadow 160ms ease;
        }
        .right-chat-input:focus-within {
            border-color: var(--study-accent);
            box-shadow: 0 0 0 3px var(--study-accent-dim);
        }
        .right-chat-input textarea {
            width: 100%;
            background: transparent;
            border: none;
            color: var(--study-text);
            font-family: inherit;
            font-size: 14px;
            /* Generous horizontal padding so the first letters of the first
               word aren't clipped by the rounded container edge. 10px gives
               the textarea enough breathing room that a prefilled
               "Explain this:..." string still starts cleanly inside the box. */
            padding: 6px 12px;
            margin: 0;
            box-sizing: border-box;
            outline: none;
            resize: none;
            min-height: 52px;
            max-height: 150px;
            line-height: 1.5;
        }
        .right-chat-input-bottom { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
        .right-chat-mic {
            width: 26px; height: 26px; border-radius: 6px;
            border: none;
            background: transparent;
            color: var(--study-text-tertiary);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: all .15s; flex-shrink: 0;
        }
        .right-chat-mic:hover { color: var(--study-text); background: var(--study-bg-tertiary); }
        .right-chat-mic.recording { color: var(--study-red); animation: pulse-mic 1.5s infinite; }
        @keyframes pulse-mic { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
        .right-chat-input-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
        .right-chat-attach {
            width: 26px; height: 26px; border-radius: 6px;
            border: none;
            background: transparent;
            color: var(--study-text-tertiary);
            display: flex; align-items: center; justify-content: center;
            cursor: default;
        }
        .right-chat-send {
            width: 28px; height: 28px; border-radius: 8px;
            border: none; background: var(--study-accent); color: #000;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            transition: transform .15s, filter .15s;
        }
        .right-chat-send:hover { transform: translateY(-1px); filter: brightness(1.05); }
        .right-chat-send i { width: 12px; height: 12px; }
        .right-chat-attach i, .right-chat-mic i { width: 16px; height: 16px; }
.rchat-msg { font-size: 14px; line-height: 1.68; padding: 14px 16px; border-radius: 16px; max-width: 94%; word-break: break-word; }
.rchat-msg.user { background: var(--study-accent-dim); align-self: flex-end; border-bottom-right-radius: 4px; max-width: min(82%, 520px); margin-left: auto; }
.rchat-msg.ai {
    background: color-mix(in srgb, var(--study-bg) 94%, #f6efe7 6%);
    border: 1px solid color-mix(in srgb, var(--study-border) 78%, var(--study-accent) 22%);
    align-self: center;
    border-bottom-left-radius: 8px;
    width: min(94%, 640px);
    box-shadow: 0 10px 28px rgba(75, 85, 99, 0.07);
}
        .rchat-msg p { margin: 0 0 6px; } .rchat-msg p:last-child { margin: 0; }
        .rchat-msg.ai p { margin: 0 0 12px; }
        .rchat-suggest-cards { padding: 10px 14px; margin: 6px 0; border-radius: 12px; background: var(--study-bg); border: 1px solid var(--study-accent); border-style: dashed; width: min(94%, 640px); align-self: center; }
        .suggest-cards-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--study-border); background: var(--study-card); color: var(--study-text); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s; }
        .suggest-cards-btn.suggest-yes { background: var(--study-accent); color: #fff; border-color: var(--study-accent); }
        .suggest-cards-btn.suggest-yes:hover { opacity: .85; }
        .suggest-cards-btn.suggest-no:hover { background: var(--study-hover); }
        /* Image lightbox */
        .img-lightbox { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10000; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; cursor: zoom-out; backdrop-filter: blur(4px); }
        .img-lightbox img { max-width: 95vw; max-height: 92vh; object-fit: contain; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.5); touch-action: pinch-zoom; }
        .img-lightbox-close { position: fixed; top: 14px; right: 14px; z-index: 10001; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.15); border: none; color: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .img-lightbox-close:hover { background: rgba(255,255,255,.3); }
        .rchat-msg img, .notes-view img, .klm-msg-body img { cursor: zoom-in; border-radius: 8px; transition: opacity .15s; max-width: 100%; }
        .rchat-msg img:hover, .notes-view img:hover, .klm-msg-body img:hover { opacity: .85; }
        .rchat-msg.ai p:last-child { margin-bottom: 0; }
        .rchat-msg.ai h1, .rchat-msg.ai h2, .rchat-msg.ai h3, .rchat-msg.ai h4 { margin: 14px 0 8px; line-height: 1.3; }
        .rchat-msg.ai ul, .rchat-msg.ai ol { margin: 8px 0 12px 20px; padding: 0; }
        .rchat-msg.ai li { margin: 4px 0; }
.rchat-msg.ai br { display: block; margin: 4px 0; content: ''; }
.rchat-msg strong { font-weight: 600; }
.rchat-msg code { background: var(--study-bg-tertiary); padding: 1px 4px; border-radius: 3px; font-size: 0.88em; }
.rchat-msg.ai table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 14px;
    font-size: 13px;
    line-height: 1.55;
    table-layout: fixed;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--study-border) 82%, var(--study-accent) 18%);
    background: rgba(255,255,255,0.72);
}
.rchat-msg.ai thead tr {
    background: color-mix(in srgb, var(--study-accent) 10%, #ffffff 90%);
}
.rchat-msg.ai th,
.rchat-msg.ai td {
    padding: 10px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--study-border) 86%, transparent);
    text-align: left;
    vertical-align: top;
    word-break: break-word;
}
.rchat-msg.ai th {
    font-size: 12px;
    font-weight: 800;
    color: var(--study-text-secondary);
    letter-spacing: 0.02em;
}
.rchat-msg.ai tbody tr:last-child td {
    border-bottom: none;
}
.rchat-msg.ai blockquote {
    margin: 12px 0;
    padding: 10px 14px;
    border-left: 3px solid var(--study-accent);
    background: color-mix(in srgb, var(--study-accent) 7%, #ffffff 93%);
    border-radius: 0 12px 12px 0;
    color: var(--study-text-secondary);
}
.rchat-msg.ai hr {
    border: none;
    border-top: 1px solid color-mix(in srgb, var(--study-border) 80%, transparent);
    margin: 16px 0;
}
        .right-chat-panel.is-empty .right-chat-messages {
            flex: 0 0 auto;
            overflow: visible;
            margin-top: auto;
            padding: 12px 18px 8px;
        }
        .right-chat-panel.is-empty .right-chat-reset { display: none; }
        .right-chat-panel.is-empty .right-chat-input-wrap {
            padding: 0 18px 0;
            margin-bottom: auto;
            border-top: none;
        }
        #btnToggleRight { display: none !important; }


/* --- Chat view standalone, inputbar --- */

        /* ── Chat View (standalone) ── */
        .chat-wrap { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
        .chat-wrap::-webkit-scrollbar { width: 6px; }
        .chat-wrap::-webkit-scrollbar-thumb { background: var(--study-border); border-radius: 3px; }
        .chat-messages { max-width: 800px; margin: 0 auto; padding: 24px 16px; display: flex; flex-direction: column; gap: 24px; }
        .chat-welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 20px; gap: 16px; flex: 1; }
        .chat-welcome-icon { width: 64px; height: 64px; background: var(--study-accent); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 28px; color: #000; }
        .chat-welcome h2 { font-size: 24px; font-weight: 700; }
        .chat-welcome p { font-size: 15px; color: var(--study-text-secondary); max-width: 440px; line-height: 1.6; }
        .suggestion-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; max-width: 560px; }
        .suggestion-chip { padding: 8px 16px; background: var(--study-bg-secondary); border: 1px solid var(--study-border); border-radius: 20px; color: var(--study-text-secondary); font-size: 13px; cursor: pointer; transition: all 0.15s; }
        .suggestion-chip:hover { border-color: var(--study-accent); color: var(--study-text); }
        .msg-row { display: flex; gap: 12px; align-items: flex-start; animation: msgIn 0.25s ease; }
        @keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }
        .msg-row.user { flex-direction: row-reverse; }
        .msg-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
        .msg-avatar.ai { background: var(--study-accent); color: #000; }
        .msg-avatar.user { background: var(--study-bg-tertiary); color: var(--study-text); }
        .msg-content { max-width: calc(100% - 60px); min-width: 0; }
        .msg-bubble { padding: 12px 16px; border-radius: var(--study-radius); font-size: 14.5px; line-height: 1.65; word-break: break-word; }
        .msg-row.ai .msg-bubble { background: var(--study-bg-secondary); border: 1px solid var(--study-border); border-top-left-radius: 4px; }
        .msg-row.user .msg-bubble { background: rgba(232,133,58,0.18); border-top-right-radius: 4px; }
        .msg-bubble p { margin: 0 0 10px; } .msg-bubble p:last-child { margin: 0; }
        .msg-bubble h1,.msg-bubble h2,.msg-bubble h3 { margin: 16px 0 8px; font-weight: 600; }
        .msg-bubble ul,.msg-bubble ol { margin: 8px 0; padding-left: 20px; }
        .msg-bubble li { margin-bottom: 4px; }
        .msg-bubble code { font-family: 'SF Mono','Fira Code', monospace; font-size: 0.88em; background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 4px; }
        .msg-bubble pre { margin: 10px 0; border-radius: 8px; overflow-x: auto; background: #0d1117 !important; border: 1px solid var(--study-border); }
        .msg-bubble pre code { display: block; padding: 14px 16px; background: transparent !important; font-size: 13px; line-height: 1.5; }
        .msg-bubble blockquote { border-left: 3px solid var(--study-accent); padding: 4px 12px; margin: 10px 0; color: var(--study-text-secondary); background: rgba(232,133,58,0.05); border-radius: 0 6px 6px 0; }
        .msg-bubble table { border-collapse: collapse; margin: 10px 0; width: 100%; font-size: 13.5px; }
        .msg-bubble th,.msg-bubble td { border: 1px solid var(--study-border); padding: 8px 12px; text-align: left; }
        .msg-bubble th { background: var(--study-bg-tertiary); font-weight: 600; }
        .msg-bubble a { color: var(--study-accent); text-decoration: underline; }
        .msg-bubble strong { font-weight: 600; }
        .typing-indicator { display: none; gap: 12px; align-items: center; }
        .typing-indicator.active { display: flex; }
        .typing-indicator-flame { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; }
        .typing-indicator-text { font-size: 13px; color: var(--study-text-secondary); }

        .inputbar { flex-shrink: 0; background: var(--study-bg); border-top: 1px solid var(--study-border); padding: 12px 16px; padding-bottom: calc(12px + var(--safe-bottom)); display: none; }
        .inputbar.visible { display: block; }
        .inputbar-inner { max-width: 800px; margin: 0 auto; display: flex; align-items: flex-end; gap: 10px; background: var(--study-bg-secondary); border: 1px solid var(--study-border); border-radius: 16px; padding: 8px 8px 8px 16px; transition: border-color 0.2s; }
        .inputbar-inner:focus-within { border-color: var(--study-accent); }
        .input-textarea { flex: 1; background: transparent; border: none; color: var(--study-text); font-family: inherit; font-size: 14.5px; line-height: 1.5; resize: none; outline: none; max-height: calc(1.5em * 4 + 8px); padding: 6px 0; overflow-y: auto; }
        .input-textarea::placeholder { color: var(--study-text-tertiary); }
        .send-btn { width: 36px; height: 36px; border-radius: 10px; border: none; background: var(--study-accent); color: #000; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all 0.15s; opacity: 0.4; pointer-events: none; }
        .send-btn.active { opacity: 1; pointer-events: auto; }
        .send-btn.active:hover { background: var(--study-accent-hover); }
        .send-btn i { width: 18px; height: 18px; }
        .chat-pro-btn { height: 28px; padding: 0 10px; border-radius: 8px; border: 1.5px solid var(--study-border-light); background: transparent; color: var(--study-text-tertiary); font-size: 11px; font-weight: 700; letter-spacing: .03em; cursor: pointer; flex-shrink: 0; transition: all .2s; white-space: nowrap; font-family: inherit; margin-bottom: 4px; }
        .chat-pro-btn:hover { border-color: var(--study-accent); color: var(--study-accent); }
        .chat-pro-btn.active { border-color: var(--study-accent); background: var(--study-accent); color: #000; }


/* --- UX polish: collapsible sidebar, folders toolbar --- */
        /* ===== UX polish: sentence case + collapsible sidebar + folders ===== */
        :root { --sidebar-w-collapsed: 80px; }
        .study-sidebar .sidebar-brand-text,
        .study-sidebar .nav-link,
        .study-sidebar .method-nav,
        .study-sidebar .method-nav-group-label,
        .hero-title,
        .hero-sub,
        .action-label,
        .sets-header h2,
        .set-card-title,
        .token-badge,
        .mobile-nav-btn {
            text-transform: none !important;
            letter-spacing: normal !important;
        }
        .sidebar-brand-wrap {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            padding: 20px 16px 16px;
            min-height: 46px;
        }
        .sidebar-brand {
            padding: 0;
            min-width: 0;
            flex: 0 1 auto;
        }
        .sidebar-collapse-btn {
            width: 28px !important;
            height: 28px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 7px !important;
            border: none !important;
            background: transparent !important;
            color: var(--study-text-tertiary) !important;
            cursor: pointer;
            transition: all .15s !important;
            flex-shrink: 0;
            position: static !important;
            margin-left: 0;
            transform: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            left: auto !important;
            top: auto !important;
            border-left: none !important;
        }
        .sidebar-collapse-btn:hover {
            color: var(--study-text) !important;
            background: var(--study-bg-tertiary) !important;
        }
        .sidebar-collapse-btn i { width: 14px; height: 14px; }
        .nav-link-label, .method-nav-label { min-width: 0; }
        .study-layout.sidebar-collapsed .study-sidebar { width: var(--sidebar-w-collapsed); }
        .study-layout.sidebar-collapsed .sidebar-brand { justify-content: center; flex: 0 0 auto; }
        .study-layout.sidebar-collapsed .sidebar-brand-text-wrap,
        .study-layout.sidebar-collapsed .sidebar-brand-text,
        .study-layout.sidebar-collapsed .sidebar-brand-sub,
        .study-layout.sidebar-collapsed .nav-link-label,
        .study-layout.sidebar-collapsed .method-nav-label,
        .study-layout.sidebar-collapsed .method-nav-group-label,
        .study-layout.sidebar-collapsed .sidebar-username,
        .study-layout.sidebar-collapsed .token-badge,
        .study-layout.sidebar-collapsed .sidebar-footer .user-name,
        .study-layout.sidebar-collapsed .sidebar-footer-row {
            display: none !important;
        }
        .study-layout.sidebar-collapsed .sidebar-brand-wrap { flex-direction: column; justify-content: center; align-items: center; padding: 10px 8px 8px; min-height: 78px; }
        .study-layout.sidebar-collapsed .sidebar-collapse-btn { margin-left: 0; margin-top: 6px; }
        .study-layout.sidebar-collapsed .sidebar-nav {
            padding: 8px 10px;
        }
        .study-layout.sidebar-collapsed .nav-link,
        .study-layout.sidebar-collapsed .method-nav {
            justify-content: center;
            padding: 10px 8px;
            gap: 0;
        }
        .study-layout.sidebar-collapsed .method-nav-group-label { margin: 0; padding: 0; }
        .study-layout.sidebar-collapsed .sidebar-widgets { display: none; }
        .study-layout.sidebar-collapsed .sidebar-footer {
            align-items: center;
            padding: 10px 8px;
        }
        .study-layout.sidebar-collapsed .sidebar-footer-row {
            justify-content: center;
            width: 100%;
        }
        .study-layout.sidebar-collapsed .sidebar-user {
            justify-content: center;
            width: 100%;
            padding: 6px;
        }
        .study-layout.sidebar-collapsed .sidebar-avatar { margin: 0; }

        .folders-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            margin: 4px 0 14px;
            flex-wrap: nowrap;
        }
        .folders-toggle-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border: 1px solid var(--study-border);
            border-radius: 8px;
            background: var(--study-bg-secondary);
            color: var(--study-text-secondary);
            cursor: pointer;
            transition: all .15s;
            flex-shrink: 0;
        }
        .folders-toggle-btn:hover { color: var(--study-text); border-color: var(--study-border-light); background: var(--study-bg-tertiary); }
        .folders-toggle-btn i { width: 14px; height: 14px; }
        .folders-toggle-btn .toggle-arrow { transition: transform .2s ease; }
        .folders-toolbar.collapsed .folders-toggle-btn .toggle-arrow { transform: rotate(-90deg); }
        .folder-chips {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            min-height: 34px;
            flex: 1;
            overflow: hidden;
            transition: max-height .25s ease, opacity .2s ease, min-height .25s ease;
        }
        .folders-toolbar.collapsed .folder-chips {
            max-height: 0;
            min-height: 0;
            opacity: 0;
            pointer-events: none;
            margin: 0;
        }
        .folders-toolbar.collapsed .folder-create-btn {
            max-height: 0;
            opacity: 0;
            pointer-events: none;
            overflow: hidden;
        }
        .folders-toolbar .folder-create-btn { margin-left: auto; transition: max-height .25s ease, opacity .2s ease; }
        .folder-chip {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            border: none;
            border-radius: 999px;
            background: var(--study-bg-tertiary);
            color: var(--study-text-secondary);
            padding: 6px 14px;
            font-size: 12px;
            font-weight: 700;
            font-family: inherit;
            cursor: pointer;
            transition: all .15s;
        }
        .folder-chip i { width: 12px; height: 12px; }
        .folder-chip:hover {
            color: var(--study-text);
            background: var(--study-bg-secondary);
        }
        .folder-chip.active {
            color: var(--study-accent);
            background: var(--study-accent-dim);
            font-weight: 800;
        }
        .folder-chip-delete {
            display: none; margin-left: 2px; font-size: 14px; line-height: 1; opacity: 0.4;
            cursor: pointer; font-weight: 400;
        }
        .folder-chip.extra:hover .folder-chip-delete { display: inline; }
        .folder-chip-delete:hover { opacity: 1; color: var(--study-red, #ef4444); }
        .folder-chip.extra { padding-right: 12px; }
        .folder-chip-count {
            font-size: 11px;
            color: var(--study-text-tertiary);
            margin-left: 2px;
        }
        .folder-create-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: none;
            border-radius: 999px;
            background: var(--study-bg-tertiary);
            color: var(--study-text);
            padding: 8px 18px;
            font-size: 13px;
            font-weight: 700;
            font-family: inherit;
            cursor: pointer;
            transition: all .15s;
            white-space: nowrap;
        }
        .folder-create-btn i { width: 14px; height: 14px; }
        .folder-create-btn:hover {
            color: var(--study-text);
            border-color: var(--study-border-light);
            background: var(--study-bg-tertiary);
        }
        .set-card-folder {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 11px;
            color: var(--study-text-tertiary);
            margin: -1px 0 6px;
            max-width: 220px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .set-card-folder i { width: 12px; height: 12px; flex-shrink: 0; }
        [data-theme="light"] .folders-toggle-btn,
        [data-theme="light"] .folder-chip,
        [data-theme="light"] .folder-create-btn {
            background: #ffffff;
            color: #475569;
        }
        [data-theme="light"] .folder-chip.extra { border-color: #d9e1ea; background: #ffffff; }
        [data-theme="light"] .folder-chip.active {
            background: rgba(115,131,150,0.16);
            color: #334155;
        }
        [data-theme="light"] .folder-chip.extra.active { border-color: #94a3b8; }
        [data-theme="light"] .folder-create-btn:hover,
        [data-theme="light"] .folder-chip:hover {
            border-color: #b9c4d1;
            color: #1f2937;
        }
        @media (max-width: 768px) {
            .sets-header { flex-wrap: wrap; align-items: flex-start; gap: 10px; }
            .sets-header-left { width: 100%; }
            .sets-search-wrap { gap: 8px; }
            .sets-search-box { flex: 1; max-width: 100%; min-width: 0; }
            .sets-search-box-compact { max-width: 100%; }
            .hero-head { flex-wrap: wrap; margin-bottom: 16px; }
            .hero-sub { font-size: 14px; }
            .hero-search-wrap { width: 100%; max-width: 100%; min-width: 0; }
            .folders-toolbar { margin-bottom: 10px; flex-wrap: wrap; }
            .folder-chip { font-size: 11px; padding: 6px 9px; }
            .folder-create-btn { width: auto; min-width: 96px; justify-content: center; }
        }


/* --- Study timer, highlight Ask AI --- */
        /* ===== STUDY TIMER ===== */
        .study-timer{display:flex;align-items:center;gap:4px;margin-right:4px}
        .timer-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;border:1px solid var(--study-border);background:var(--study-card);color:var(--study-text);font-size:.8rem;font-weight:600;font-family:inherit;cursor:pointer;transition:all .2s;min-width:82px}
        .timer-btn.running{border-color:var(--study-accent);color:var(--study-accent)}
        .timer-btn.break{border-color:#22c55e;color:#22c55e}
        .timer-reset{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;border:1px solid var(--study-border);background:var(--study-card);color:var(--study-text-muted);cursor:pointer;transition:all .2s}
        .timer-reset:hover{color:var(--study-text)}

        /* ===== HIGHLIGHT ASK AI ===== */
        #askAiFloat{position:fixed;z-index:9999;background:var(--study-accent);color:#fff;border:none;border-radius:8px;padding:6px 12px;font-size:.75rem;font-weight:700;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.25);display:none;align-items:center;gap:5px;font-family:inherit;white-space:nowrap}

/* --- Suggested chat questions --- */
        /* ===== SUGGESTED CHAT QUESTIONS ===== */
        .rchat-suggestions{display:flex;flex-direction:column;gap:5px;margin:6px 0 10px}
        .rchat-suggestion-chip{text-align:left;padding:7px 12px;border-radius:10px;border:1px solid var(--study-border);background:var(--study-card);color:var(--study-text);font-size:.75rem;cursor:pointer;font-family:inherit;transition:all .2s;line-height:1.4}
        .rchat-suggestion-chip:hover{border-color:var(--study-accent);color:var(--study-accent);background:color-mix(in srgb,var(--study-accent) 6%,transparent)}

/* --- Dashboard layout, streak widget, exam dates widget, quick stats --- */
        /* ═══════════════════════════════════════════════════════════
           NEW FEATURES: Dashboard Sidebar, Study Modes, Audio Recap, Exam Dates
           ═══════════════════════════════════════════════════════════ */

        /* ── Dashboard Layout (2-column with right sidebar) ──
           Bumped from 1400 → 1700 on desktop so the action-cards row +
           recent-sets list breathe across the full width on wide
           monitors instead of leaving ~470px of dead gutter on each
           side. .hero-section and .sets-section's own max-widths get
           bumped to match below. */
        .dashboard-layout {
            display: flex; gap: 0; max-width: 1700px; margin: 0 auto; width: 100%;
        }
        .dashboard-main { flex: 1; min-width: 0; }
        /* dashboard-sidebar removed, widgets moved to left sidebar */
        .dash-widget {
            background: var(--study-bg-secondary); border: 2px solid var(--study-border);
            border-radius: var(--study-radius); padding: 14px;
            box-shadow: 2px 2px 0 var(--study-accent-dim);
        }
        .dash-widget-title {
            font-size: 10px; font-weight: 800; text-transform: uppercase;
            letter-spacing: .06em; color: var(--study-text-tertiary); margin-bottom: 10px;
            display: flex; align-items: center; gap: 5px;
        }
        .dash-widget-title i { width: 12px; height: 12px; }

        /* Streak Widget */
        .streak-display {
            display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
        }
        .streak-fire {
            font-size: 28px; line-height: 1;
        }
        .streak-info { flex: 1; }
        .streak-count {
            font-size: 22px; font-weight: 900; color: var(--study-text); line-height: 1;
        }
        .streak-label {
            font-size: 11px; font-weight: 600; color: var(--study-text-tertiary); margin-top: 2px;
        }
        .streak-days {
            display: flex; gap: 3px; margin-top: 8px;
        }
        .streak-day {
            width: 26px; height: 26px; border-radius: 5px;
            display: flex; align-items: center; justify-content: center;
            font-size: 8px; font-weight: 700; color: var(--study-text-tertiary);
            background: var(--study-bg-tertiary); border: 1px solid var(--study-border);
        }
        .streak-day.active {
            background: var(--study-accent); color: #000; border-color: var(--study-accent);
        }
        .streak-day.today {
            border-color: var(--study-accent); color: var(--study-accent);
        }

        /* Exam Dates Widget */
        .exam-list { display: flex; flex-direction: column; gap: 8px; }
        .exam-item {
            display: flex; align-items: center; gap: 8px; padding: 8px 10px;
            border-radius: 7px; background: var(--study-bg-tertiary); cursor: default;
        }
        .exam-date-badge {
            width: 36px; height: 36px; border-radius: 7px;
            background: var(--study-accent-dim); color: var(--study-accent);
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            font-weight: 800; flex-shrink: 0; border: 1px solid rgba(232,133,58,0.2);
        }
        .exam-date-month { font-size: 8px; text-transform: uppercase; letter-spacing: .05em; line-height: 1; }
        .exam-date-day { font-size: 14px; line-height: 1; margin-top: 1px; }
        .exam-item-info { flex: 1; min-width: 0; }
        .exam-item-name {
            font-size: 12px; font-weight: 700; color: var(--study-text);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .exam-item-course {
            font-size: 10px; color: var(--study-text-tertiary); margin-top: 1px;
        }
        .exam-item-countdown {
            font-size: 10px; font-weight: 700; color: var(--study-accent);
            white-space: nowrap;
        }
        .exam-item-countdown.urgent { color: var(--study-red); }
        .exam-empty {
            text-align: center; padding: 10px 0; font-size: 12px;
            color: var(--study-text-tertiary);
        }
        .exam-add-btn {
            width: 100%; padding: 8px; border-radius: 8px;
            border: 1.5px dashed var(--study-border); background: transparent;
            color: var(--study-text-tertiary); font-size: 12px; font-weight: 600;
            cursor: pointer; font-family: inherit; transition: all .15s;
            display: flex; align-items: center; justify-content: center; gap: 4px;
        }
        .exam-add-btn:hover { border-color: var(--study-accent); color: var(--study-accent); }
        .exam-add-btn i { width: 14px; height: 14px; }

        /* Quick Stats Widget */
        .quick-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .quick-stat {
            padding: 12px; border-radius: 8px; background: var(--study-bg-tertiary);
            text-align: center;
        }
        .quick-stat-val {
            font-size: 22px; font-weight: 900; color: var(--study-text); line-height: 1;
        }
        .quick-stat-label {
            font-size: 10px; font-weight: 600; color: var(--study-text-tertiary);
            margin-top: 4px; text-transform: uppercase; letter-spacing: .04em;
        }

        /* ── Study Mode Toggle ── */



/* --- Detail Shell Refresh --- */
        /* ===== Detail Shell Refresh ===== */
        .study-layout.detail-active {
            background: #eef2f6;
        }
        .study-layout.detail-active .detail-topbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 60;
            background: #f2f4f6;
            border-bottom: 1px solid transparent;
            box-shadow: none;
            height: 60px;
            padding: 0 20px 0 24px;
        }
        .study-layout.detail-active .detail-topbar-title {
            font-family: 'Inika', 'Georgia', 'Times New Roman', serif;
            font-size: clamp(1.45rem, 1.1rem + 0.45vw, 1.95rem);
            font-weight: 700;
            letter-spacing: -0.02em;
            text-transform: none !important;
            color: #25303b;
        }
        .detail-topbar-title-button {
            border: none;
            background: transparent;
            padding: 0;
            margin: 0;
            cursor: pointer;
            text-align: left;
            font-family: inherit;
            color: inherit;
        }
        .study-layout.detail-active .detail-topbar-right {
            color: #5f6b78;
        }
        .study-layout.detail-active .study-sidebar {
            /* padding-top was 60px, legacy spacer for the old detail-topbar
               (now removed). That was the 'big white gap at top' the user
               kept calling out. Gone. */
            padding-top: 0;
            height: 100vh;
            box-sizing: border-box;
            /* 286 -> 360 on 2026-05-12: modules list needs wider rows so
               long titles ("Evolution of Health Care and the Nursing
               Process") render on 2 lines without truncating mid-word.
               Matches the reference course-list mockup. */
            width: 360px;
            min-width: 360px;
            max-width: 360px;
            border-right: none !important;
        }
        /* Khio AI takes over the sidebar's nav area: the main #navHome
           (Study Sets / Review / Khio LM / Khio AI) hides, and #navKhioAI
           (back link + section nav) takes its place. The brand at the top
           and Settings/Logout at the bottom stay visible. James, 2026-05-04. */
        .study-layout.deeptutor-active #navHome { display: none !important; }
        .study-layout.deeptutor-active #navKhioAI { display: flex !important; }
        .study-layout.deeptutor-active #view-deeptutor { width: 100% !important; }
        /* khio-ai-nav-on: applied when the user enters the Khio LM picker
           via Khio AI → Notebooks. Keeps the Khio AI sidebar (Conversations
           / Notebooks / Co-Writer / History) visible over view-solve so the
           nav doesn't snap back to the Study sidebar mid-flow. Same display
           rules as deeptutor-active but does NOT force #view-deeptutor to
           100% (that view is hidden, view-solve is the visible canvas).
           James 2026-05-12. */
        .study-layout.khio-ai-nav-on #navHome { display: none !important; }
        .study-layout.khio-ai-nav-on #navKhioAI { display: flex !important; }
        .study-layout.detail-active .study-main {
            /* Keep 16px so the floating ADD/chat/timer pills (abs-positioned
               at top:14 right:20 of study-main) don't hug the viewport edge.
               James 2026-05-06: bg back to white, earlier #eef2f6 was an
               attempt to hide the floating-pill clearance strip, but James
               preferred clean white throughout. */
            padding-top: 16px;
            min-height: 100vh;
            box-sizing: border-box;
            background: #ffffff;
        }
        .study-layout.detail-active .detail-layout {
            padding: 0;
            gap: 0;
            background: #ffffff;
        }
        .study-layout.detail-active .study-sidebar {
            background: #e4e7ec;
            border-right: 1px solid #d6dae1;
            box-shadow: none;
        }
        .study-layout.detail-active .sidebar-brand-wrap {
            display: none;
        }
        .study-layout.detail-active .sidebar-nav {
            padding-top: 10px;
        }
        .study-layout.detail-active #navDetail {
            display: flex;
            flex-direction: column;
            min-height: 0;
            height: 100%;
        }
        .study-layout.detail-active #detailMethods {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 6px 10px 12px;
            display: flex;
            flex-direction: column;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .study-layout.detail-active #detailMethods::-webkit-scrollbar { width: 0; height: 0; }
        .study-layout.detail-active .detail-group-heading {
            padding: 14px 14px 8px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.12em;
            color: #7a8496;
            text-transform: uppercase;
        }
        .study-layout.detail-active .detail-group-heading-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        .study-layout.detail-active .detail-group-heading-text {
            min-width: 0;
        }
        .study-layout.detail-active .detail-section-collapse {
            width: 26px;
            height: 26px;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: #707a86;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            transition: background 0.15s, color 0.15s;
        }
        .study-layout.detail-active .detail-section-collapse:hover {
            background: #dfe5eb;
            color: #37414c;
        }
        .study-layout.detail-active .module-nav-group-inline {
            padding: 0 2px 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
/* Detail (study set) view gets a wider sidebar so the modules list
   doesn't truncate titles mid-word. James 2026-05-12, bumped from
   300 → 360 to match the reference design. */
.study-layout.detail-active {
    --sidebar-w: 360px;
}

/* ── Modules sidebar, connected list with one elevated active card ──
   James 2026-05-12 v2: redesigned per James's reference. Inactive items
   are thin rows connected by 1px hairlines (no per-row card border / no
   shadow). Hover gives a subtle peach tint. The ACTIVE row breaks out as
   its own elevated card: peach background, 3px accent left bar, soft
   amber shadow. List flows top→bottom inside the existing modules
   scroll group. */
.study-layout.detail-active .module-nav-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 0 12px;
}
/* Connected chart shape, left vertical border runs straight top→bottom,
   no right border, all corners square. Dividers between rows are inset
   ::after pseudo-elements (not border-bottom) so they stop before the
   left and right edges, that's how we kill rounding without leaving
   harsh L-junctions at the corners. James 2026-05-12 v7. */
.study-layout.detail-active .module-nav-item {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 22px !important;
    align-items: center;
    justify-content: flex-start;
    gap: 14px !important;
    /* Taller rows so there's a noticeable vertical gap between badges
       and the inset hairlines have real breathing room, squares look
       cleaner with more whitespace around them. */
    min-height: 90px !important;
    padding: 18px 14px !important;
    border: 0 !important;
    border-left: 1px solid #e9e3dd !important;
    border-radius: 0 !important;
    background: transparent;
    color: #2c1e18;
    text-align: left;
    box-shadow: none;
    transition: background 160ms ease, box-shadow 160ms ease;
}
/* Inset horizontal divider between rows. Sits at the BOTTOM of each
   row, indented 14px on each side so it doesn't touch the chart edges. */
.study-layout.detail-active .module-nav-item::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 1px;
    background: #e9e3dd;
    pointer-events: none;
}
.study-layout.detail-active .module-nav-group .module-nav-item:last-child::after {
    content: none;
}
.study-layout.detail-active .module-nav-item:hover {
    /* Whisper-soft hover, barely there cream tint and a faint accent hint
       on the left bar. James 2026-05-12 v9. */
    background: #fdfbf7 !important;
    box-shadow: inset 3px 0 0 rgba(168, 80, 37, 0.18);
}
.study-layout.detail-active .module-nav-item:hover .module-nav-num {
    background: #ead9cc !important;
    color: #5a3a2b !important;
}
.study-layout.detail-active .module-nav-item:hover .module-nav-kicker,
.study-layout.detail-active .module-nav-item:hover .module-nav-check {
    color: #8a4528;
}
/* Active row stays attached IN the connected chart. Same shape as the
   other rows but with the left border thickened from 1px gray to 3px
   accent orange + a peach background fill. James 2026-05-12 v7. */
.study-layout.detail-active .module-nav-item.active,
.study-layout.detail-active .module-nav-item[data-module-state="active"] {
    background: #f7efe9 !important;
    border: 0 !important;
    border-left: 3px solid #a85025 !important;
    border-radius: 0 !important;
    box-shadow: none;
    margin: 0;
    padding-left: 12px;
}
.study-layout.detail-active .module-nav-num {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: #2c1e18 !important;
    text-align: center;
    /* Square badges, no rounding. James 2026-05-12 v8. */
    border-radius: 0 !important;
    background: #eeddd2 !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
}
.study-layout.detail-active .module-nav-item.active .module-nav-num,
.study-layout.detail-active .module-nav-item[data-module-state="active"] .module-nav-num {
    background: #efe3da;
    color: #7f3818;
}
.study-layout.detail-active .module-nav-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}
.study-layout.detail-active .module-nav-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8e847c;
    line-height: 1;
}
.study-layout.detail-active .module-nav-title {
    display: block;
    width: 100%;
    margin: 0;
    flex: 0 0 auto;
    white-space: normal;
    line-height: 1.22;
    font-size: 14px;
    font-weight: 750;
    color: #1f1b18;
    text-align: left;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.study-layout.detail-active .module-nav-check {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #7f7770;
}
.study-layout.detail-active .module-nav-check i,
.study-layout.detail-active .module-nav-check svg {
    width: 18px;
    height: 18px;
}
.study-layout.detail-active .module-nav-item[data-module-state="active"] .module-nav-kicker,
.study-layout.detail-active .module-nav-item.active .module-nav-kicker,
.study-layout.detail-active .module-nav-item[data-module-state="active"] .module-nav-check,
.study-layout.detail-active .module-nav-item.active .module-nav-check {
    color: #a85025;
}
.study-layout.detail-active .module-nav-item[data-module-state="completed"] .module-nav-kicker,
.study-layout.detail-active .module-nav-item.completed .module-nav-check {
    color: #059669;
}
        .study-layout.detail-active #navDetail .method-nav {
            border-radius: 14px;
            padding: 11px 14px;
            margin-bottom: 2px;
            gap: 12px;
            color: #545f72;
            font-weight: 500;
            font-size: 14px;
            border: none;
            box-shadow: none;
            transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
        }
        .study-layout.detail-active #navDetail .method-nav i {
            width: 18px;
            height: 18px;
            color: inherit;
            flex-shrink: 0;
        }
        .study-layout.detail-active #navDetail .method-nav:hover {
            background: rgba(255, 255, 255, 0.6);
            color: #191c1e;
        }
        .study-layout.detail-active #navDetail .method-nav.active {
            background: #ffffff;
            color: #ef4444;
            font-weight: 700;
            box-shadow: 0 1px 2px rgba(25, 28, 30, 0.06),
                        0 0 0 1px rgba(239, 68, 68, 0.08);
        }
        .study-layout.detail-active #navDetail .method-nav.active i {
            color: #ef4444;
        }
        /* Slightly darker sidebar when detail view is active so the nav
           stands out from the main content, and white active pills pop
           against the background. */
        .study-layout.detail-active .study-sidebar {
            /* Warm cream sidebar bg for the academic-modules look ,
               cool gray (#e4e7ec) replaced 2026-05-12 per James's spec.
               Border-right uses a warm taupe so it blends with the cream
               instead of the previous cool blue-gray. */
            background: #fbfaf8 !important;
            border-right: 1px solid #ece4d8;
        }
        .study-layout.detail-active .detail-main {
            position: relative;
            z-index: 1;
            background: var(--bg-base);
            border: none;
            border-radius: 0;
            box-shadow: none;
        }
        .study-layout.detail-active .detail-right {
            position: fixed;
            top: 78px;
            right: 18px;
            bottom: 18px;
            width: min(390px, 34vw);
            min-width: 340px;
            max-width: 420px;
            height: auto;
            z-index: 55;
            margin: 0;
            border-radius: 20px;
            box-shadow: 0 22px 50px rgba(61, 73, 89, 0.18);
            background: var(--bg-raised);
            border-color: var(--border-default);
        }
        .study-layout.detail-active .detail-layout.sidebar-hidden .detail-right {
            width: min(390px, 34vw) !important;
            min-width: 340px;
            transform: translateX(calc(100% + 24px));
            opacity: 0;
            pointer-events: none;
        }
        .study-layout.detail-active .sidebar-resize-handle,
        .study-layout.detail-active .right-sidebar-reopen {
            display: none !important;
        }
        .study-layout.detail-active #topbarChatToggle {
            display: inline-flex !important;
        }
        .detail-sidebar-bottom {
            padding: 14px 10px 10px;
            border-top: none;
        }
        .detail-sidebar-back {
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 14px;
            border: 1px solid transparent;
            border-radius: 16px;
            background: var(--bg-elevated);
            color: var(--text-primary);
            font-size: 13px;
            font-weight: 700;
            font-family: inherit;
            cursor: pointer;
            transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
        }
        .detail-sidebar-back:hover {
            transform: translateY(-1px);
            box-shadow: 0 12px 26px rgba(99, 115, 129, 0.08);
            background: var(--bg-raised);
        }
        .detail-sidebar-back i {
            width: 14px;
            height: 14px;
        }
        [data-theme="light"] .study-layout.detail-active .detail-main-inner.mode-reading #quillEditorShell {
            background: var(--bg-base, #ffffff);
            border-color: var(--border-subtle, #d7dee7);
        }
        [data-theme="light"] .study-layout.detail-active .detail-main-inner.mode-reading #quillEditorShell > .ql-toolbar.ql-snow {
            background: var(--bg-raised, #f8fafc) !important;
            border-color: var(--border-subtle, #d7dee7) !important;
        }
        [data-theme="light"] .study-layout.detail-active .detail-main-inner.mode-reading #quillEditorShell > .ql-container.ql-snow {
            background: var(--bg-base, #ffffff);
            border-color: var(--border-subtle, #d7dee7) !important;
        }
        /* strong color handled by var(--study-text) globally */
        .study-layout.detail-active.sidebar-collapsed .study-sidebar {
            width: var(--sidebar-w-collapsed);
            min-width: var(--sidebar-w-collapsed);
            max-width: var(--sidebar-w-collapsed);
        }
        /* Collapsed sidebar header: stack the >> button on top of a small
           "MODULES" label, both centered. James 2026-05-12 v10. */
        .study-layout.detail-active.sidebar-collapsed .detail-group-heading-row {
            display: flex !important;
            flex-direction: column !important;
            justify-content: center;
            align-items: center !important;
            padding: 8px 0 6px !important;
            gap: 8px;
        }
        .study-layout.detail-active.sidebar-collapsed .detail-group-heading-text {
            display: block !important;
            /* Tightened so "MODULES" fits the 80px rail. Letter-spacing was
               making the label overflow when paired with the chevron icon.
               James 2026-05-12. */
            font-size: 9px !important;
            font-weight: 800 !important;
            letter-spacing: 0.08em !important;
            text-transform: uppercase;
            color: #6b5d52 !important;
            text-align: center;
            line-height: 1.1;
            white-space: nowrap;
        }
        /* The inline chevron next to "Modules" is redundant in collapsed
           mode (the user already has the >> sidebar toggle right below it)
           and was making the heading overflow. Hide it when condensed. */
        .study-layout.detail-active.sidebar-collapsed .detail-group-heading-text i,
        .study-layout.detail-active.sidebar-collapsed .detail-group-heading-text svg {
            display: none !important;
        }
        .study-layout.detail-active.sidebar-collapsed .detail-group-heading.detail-group-heading-row {
            justify-content: center !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        .study-layout.detail-active.sidebar-collapsed .detail-section-collapse {
            background: var(--bg-elevated);
        }
        .study-layout.detail-active.sidebar-collapsed #detailMethods {
            padding: 4px 0 12px !important;
            display: flex !important;
            flex-direction: column;
            align-items: center !important;
        }
        .study-layout.detail-active.sidebar-collapsed .module-nav-group-inline {
            width: 100%;
            display: flex !important;
            flex-direction: column;
            align-items: center !important;
            gap: 10px !important;
            padding: 4px 0 10px !important;
        }
        /* When the user collapses the modules section (via the "Modules >"
           toggle), the badge list must stay hidden whether the sidebar is
           expanded OR condensed. Selector below intentionally repeats the
           full .study-layout.detail-active.sidebar-collapsed chain so it
           beats that block's (0,3,0) specificity, without the first
           selector, the sidebar-collapsed display:flex !important rule
           wins and the badges reappear. James 2026-05-12 v2. */
        .study-layout.detail-active.sidebar-collapsed .module-nav-group-inline.is-section-collapsed,
        .study-layout.detail-active .module-nav-group-inline.is-section-collapsed,
        .module-nav-group-inline.is-section-collapsed {
            display: none !important;
        }
        /* Collapsed sidebar: soft peach rounded tiles, centered. The active
           tile gets the same peach fill plus an orange left bar pinned to
           it via ::before. No borders, no chevron, no white cards.
           James 2026-05-12 v11. */
        .study-layout.detail-active.sidebar-collapsed .module-nav-item {
            position: relative;
            width: 46px !important;
            min-height: 44px !important;
            padding: 0 !important;
            display: flex !important;
            grid-template-columns: 1fr !important;
            justify-content: center !important;
            align-items: center !important;
            gap: 0 !important;
            border: 0 !important;
            border-radius: 14px !important;
            background: #f7efe7 !important;
            box-shadow: none !important;
            margin: 0 auto !important;
            transition: background 160ms ease;
        }
        .study-layout.detail-active.sidebar-collapsed .module-nav-item::after {
            content: none !important;
        }
        .study-layout.detail-active.sidebar-collapsed .module-nav-item:hover {
            background: #efe2d4 !important;
            box-shadow: none !important;
        }
        .study-layout.detail-active.sidebar-collapsed .module-nav-item.active {
            background: #ecd9c8 !important;
            border: 0 !important;
            border-radius: 14px !important;
            box-shadow: none !important;
            padding: 0 !important;
        }
        /* Orange left bar pinned to the active tile (replaces the chevron). */
        .study-layout.detail-active.sidebar-collapsed .module-nav-item.active::before {
            content: '';
            position: absolute;
            left: -8px;
            top: 5px;
            bottom: 5px;
            width: 3px;
            border-radius: 2px;
            background: #a85025;
            pointer-events: none;
        }
        .study-layout.detail-active.sidebar-collapsed .module-nav-body,
        .study-layout.detail-active.sidebar-collapsed .module-nav-check {
            display: none !important;
        }
        .study-layout.detail-active.sidebar-collapsed .module-nav-title {
            display: none;
        }
        /* Badge becomes pure text once it's inside a card, no background fill. */
        .study-layout.detail-active.sidebar-collapsed .module-nav-num {
            min-width: 0 !important;
            width: auto !important;
            height: auto !important;
            padding: 0 !important;
            font-size: 13px !important;
            font-weight: 800 !important;
            line-height: 1 !important;
            border-radius: 0 !important;
            background: transparent !important;
            color: #2c1e18 !important;
            letter-spacing: -0.01em;
        }
        .study-layout.detail-active.sidebar-collapsed .module-nav-item.active .module-nav-num {
            background: transparent !important;
            color: #7f3818 !important;
        }
        .study-layout.detail-active.sidebar-collapsed #navDetail .method-nav {
            position: relative;
            width: 46px !important;
            min-height: 44px !important;
            padding: 8px 0 !important;
            justify-content: center;
            border-radius: 0 !important;
            margin: 0 auto !important;
        }
        /* Hairline divider between each bottom icon (notes/library/brain/
           checklist) so they read as a related stack. */
        .study-layout.detail-active.sidebar-collapsed #navDetail .method-nav::after {
            content: '';
            position: absolute;
            left: 8px;
            right: 8px;
            bottom: 0;
            height: 1px;
            background: #e9e3dd;
            pointer-events: none;
        }
        .study-layout.detail-active.sidebar-collapsed #navDetail .method-nav:last-child::after {
            content: none;
        }
        .study-layout.detail-active.sidebar-collapsed .detail-sidebar-bottom {
            padding: 12px 6px 10px;
        }
        .study-layout.detail-active.sidebar-collapsed .detail-sidebar-back {
            width: 44px;
            min-width: 44px;
            height: 44px;
            padding: 0;
            border-radius: 14px;
            gap: 0;
            justify-content: center;
        }
        .study-layout.detail-active.sidebar-collapsed .detail-sidebar-back-label {
            display: none;
        }
        .study-layout.course-active .module-hero {
            grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
        }
        .study-layout.course-active .module-hero-art {
            width: min(100%, 470px);
            max-width: 470px;
            aspect-ratio: 1.55 / 1;
            max-height: 304px;
        }
        .study-layout.course-active .module-hero-img {
            object-position: center;
        }
        @media (max-width: 1180px) {
            .study-layout.course-active .module-hero {
                grid-template-columns: 1fr;
            }
            .study-layout.course-active .module-hero-art {
                width: min(100%, 380px);
                max-width: 380px;
                aspect-ratio: 1.35 / 1;
                max-height: 282px;
                justify-self: start;
            }
        }
        @media (max-width: 768px) {
            .study-layout.detail-active .detail-topbar {
                height: 56px;
                padding: 0 14px;
            }
            .study-layout.detail-active .detail-topbar-title {
                font-size: 1.15rem;
            }
            .study-layout.detail-active .study-sidebar {
                background: var(--bg-raised);
            }
            .study-layout.detail-active .detail-right {
                display: none !important;
            }
            .study-layout.detail-active #topbarChatToggle {
                display: none !important;
            }
            .detail-sidebar-bottom {
                padding: 10px 8px 8px;
            }
        }

        /* Small icon pill on each set card, user-requested #f2e3cd */
        .review-set-badge {
            background: #f2e3cd !important;
        }

        /* ──────────────────────────────────────────────────────────────
           Detail sidebar refresh, belt-and-suspenders overrides.
           These mirror the spec used elsewhere in study.css / study-themes.css
           (body[data-scheme] .study-layout.detail-active ...) so they beat
           the earlier theme rules that reset color + background and stripped
           the uppercase treatment off the section labels. Loaded last, so
           specificity + source order both work in our favor.
           ────────────────────────────────────────────────────────────── */

        /* ── Sidebar flow ──
           Previous versions either (a) pinned the footer to the viewport
           bottom creating a huge empty gap, (b) split the slack via
           auto-margins creating three floating-island gaps, or (c) squished
           everything to the top and looked cramped. This version just
           pulls the title to the top (no padding above it), gives sections
           generous but consistent breathing room, and lets the footer
           sit at the bottom via the normal flex:1 push on the nav. */
        body[data-scheme] .study-layout.detail-active .sidebar-nav {
            flex: 1 !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }
        body[data-scheme] .study-layout.detail-active #navDetail,
        body[data-scheme] .study-layout.detail-active #detailMethods {
            display: block !important;
            height: auto !important;
        }
        /* No auto-margins → sections stack with their normal heading padding. */
        body[data-scheme] .study-layout.detail-active #detailMethods .method-nav-group-sep {
            margin-top: 0 !important;
        }

        /* Nav items readable, not cramped. */
        body[data-scheme] .study-layout.detail-active #navDetail .method-nav {
            padding: 10px 12px !important;
            margin-bottom: 2px !important;
        }

        /* Section labels: MODULES / STUDY TOOLS / PRACTICE, bold uppercase */
        body[data-scheme] .study-layout.detail-active .detail-group-heading,
        body[data-scheme] .study-layout.detail-active .method-nav-group-label {
            padding: 20px 14px 10px !important;
            font-size: 12px !important;
            font-weight: 800 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.14em !important;
            color: color-mix(in srgb, var(--study-accent) 72%, var(--study-text-tertiary)) !important;
        }
        body[data-scheme] .study-layout.detail-active .detail-group-heading-text {
            text-transform: uppercase !important;
            letter-spacing: inherit !important;
            font-weight: inherit !important;
        }

        /* Active method pill, soft rust tint + left orange accent bar
           (matches the reference mock's tab-indicator treatment) */
        body[data-scheme] .study-layout.detail-active #navDetail .method-nav.active,
        body[data-scheme] .study-layout.detail-active.sidebar-collapsed #navDetail .method-nav.active {
            position: relative !important;
            background: color-mix(in srgb, var(--study-accent) 12%, transparent) !important;
            color: var(--study-accent) !important;
            border-color: transparent !important;
            box-shadow: none !important;
            font-weight: 700 !important;
        }
        body[data-scheme] .study-layout.detail-active #navDetail .method-nav.active::before {
            content: '';
            position: absolute;
            left: -8px;
            top: 6px;
            bottom: 6px;
            width: 4px;
            border-radius: 0 3px 3px 0;
            background: var(--study-accent);
        }
        body[data-scheme] .study-layout.detail-active #navDetail .method-nav.active i {
            color: var(--study-accent) !important;
        }

        /* Method nav rows, bigger, bolder, more breathing room.
           Scoped with :not(.sidebar-collapsed) so the horizontal padding
           doesn't overflow the 44px square when the rail is collapsed. */
        body[data-scheme] .study-layout.detail-active:not(.sidebar-collapsed) #navDetail .method-nav {
            padding: 11px 14px !important;
            gap: 14px !important;
            font-size: 14px !important;
            font-weight: 600 !important;
            border-radius: 10px !important;
            margin-bottom: 2px !important;
        }
        body[data-scheme] .study-layout.detail-active:not(.sidebar-collapsed) #navDetail .method-nav i {
            width: 19px !important;
            height: 19px !important;
            stroke-width: 1.7 !important;
        }

        /* When the sidebar is collapsed (icon-only rail), override the
           sizes explicitly, bigger icons, centered, square button.
           Higher specificity than the expanded rules above since we add
           .sidebar-collapsed on top of the same base. */
        body[data-scheme] .study-layout.detail-active.sidebar-collapsed #navDetail .method-nav {
            padding: 0 !important;
            gap: 0 !important;
            width: 44px !important;
            height: 44px !important;
            min-height: 44px !important;
            justify-content: center !important;
            border-radius: 12px !important;
            margin: 0 auto 4px !important;
        }
        body[data-scheme] .study-layout.detail-active.sidebar-collapsed #navDetail .method-nav i,
        body[data-scheme] .study-layout.detail-active.sidebar-collapsed .module-nav-check i,
        body[data-scheme] .study-layout.detail-active.sidebar-collapsed .detail-section-collapse i {
            width: 22px !important;
            height: 22px !important;
            stroke-width: 1.8 !important;
        }
        body[data-scheme] .study-layout.detail-active.sidebar-collapsed .sidebar-footer .sidebar-footer-back-card i,
        body[data-scheme] .study-layout.detail-active.sidebar-collapsed .sidebar-footer .sidebar-footer-back-card .user-badge i,
        body[data-scheme] .study-layout.detail-active.sidebar-collapsed .sidebar-footer-gear i {
            width: 22px !important;
            height: 22px !important;
            stroke-width: 1.9 !important;
        }

        /* Also hide the set-title header in the collapsed rail, no room
           for bold title text, and the first letters were peeking through
           (my earlier hide rule lost the specificity war). */
        body[data-scheme] .study-layout.detail-active.sidebar-collapsed .sidebar-detail-header {
            display: none !important;
        }

        /* Set-title header: non-interactive, flush to top of sidebar.
           Icon tile + bold title, matching the reference mock. */
        body[data-scheme] .study-layout.detail-active .sidebar-detail-header {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            padding: 22px 14px 18px !important;
            margin: 0 !important;
            border-radius: 0 !important;
            cursor: default !important;
            pointer-events: none !important;
        }
        body[data-scheme] .study-layout.detail-active .sidebar-detail-header:hover {
            background: transparent !important;
        }
        /* Icon tile hidden, user wants a title-only header. */
        body[data-scheme] .study-layout.detail-active .sidebar-detail-header-icon {
            display: none !important;
        }
        body[data-scheme] .study-layout.detail-active .sidebar-detail-header-title {
            color: var(--study-text) !important;
            font-size: 15.5px !important;
            font-weight: 800 !important;
            letter-spacing: -0.01em !important;
            text-transform: none !important;
            line-height: 1.2 !important;
            flex: 1 !important;
            min-width: 0 !important;
        }

        /* Defensive: when NOT in detail view, detail-topbar must be fully
           out of the way. Some earlier layout rules set position:fixed
           which can leave a styled-but-empty 60px bar showing if
           display:none doesn't stick for any reason. Belt-and-suspenders. */
        body[data-scheme] .study-layout:not(.detail-active) .detail-topbar {
            display: none !important;
            position: static !important;
            height: 0 !important;
            padding: 0 !important;
            border: none !important;
        }
        /* Also give the sets view breathing room at the bottom of its
           scroll area so cards aren't flush against the viewport edge. */
        body[data-scheme] .study-layout:not(.detail-active) #view-sets {
            padding-bottom: 48px !important;
        }

        /* ── Detail topbar REMOVED entirely ──
           The old topbar bar (with its 'Last updated today' text + 48px
           height + border-bottom) is fully hidden in detail view. The
           three action pills (ADD / chat / timer) are re-homed as a
           floating toolbar in the top-right corner of the content area
           via .detail-topbar-right styling below. */
        body[data-scheme] .study-layout.detail-active .detail-topbar {
            background: transparent !important;
            border-bottom: none !important;
            height: auto !important;
            padding: 0 !important;
            position: absolute !important;
            top: 14px !important;
            right: 20px !important;
            left: auto !important;
            width: auto !important;
            z-index: 30 !important;
            pointer-events: none; /* let children opt back in */
        }
        body[data-scheme] .study-layout.detail-active .detail-topbar-title-wrap,
        body[data-scheme] .study-layout.detail-active .detail-topbar-left,
        body[data-scheme] .study-layout.detail-active .btn-mobile-back,
        body[data-scheme] .study-layout.detail-active .detail-meta-desktop {
            display: none !important;
        }
        body[data-scheme] .study-layout.detail-active .detail-topbar-right {
            display: flex !important;
            gap: 10px !important;
            padding: 0 !important;
            pointer-events: auto;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }
        /* Floating action pills, ADD / chat / timer as white chips with a
           clear shadow so they feel like a floating toolbar, not inline text. */
        body[data-scheme] .study-layout.detail-active .detail-topbar-right > button,
        body[data-scheme] .study-layout.detail-active #topbarChatToggle,
        body[data-scheme] .study-layout.detail-active .detail-add-method-btn,
        body[data-scheme] .study-layout.detail-active .study-timer .timer-btn {
            background: #ffffff !important;
            border: 1px solid rgba(0,0,0,0.06) !important;
            color: var(--study-accent) !important;
            height: 38px !important;
            min-width: 38px !important;
            padding: 0 14px !important;
            border-radius: 999px !important;
            font-weight: 700 !important;
            font-size: 13px !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04) !important;
            transition: transform 0.15s ease, box-shadow 0.15s ease !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 6px !important;
        }
        body[data-scheme] .study-layout.detail-active .detail-topbar-right > button:hover,
        body[data-scheme] .study-layout.detail-active #topbarChatToggle:hover,
        body[data-scheme] .study-layout.detail-active .detail-add-method-btn:hover,
        body[data-scheme] .study-layout.detail-active .study-timer .timer-btn:hover {
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 14px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.05) !important;
            background: #ffffff !important;
        }
        body[data-scheme] .study-layout.detail-active .detail-topbar-right > button i,
        body[data-scheme] .study-layout.detail-active #topbarChatToggle i,
        body[data-scheme] .study-layout.detail-active .detail-add-method-btn i,
        body[data-scheme] .study-layout.detail-active .study-timer .timer-btn i {
            width: 16px !important;
            height: 16px !important;
            color: var(--study-accent) !important;
        }
        /* study-timer wrapper, we don't want it to look like a second pill
           around the button, just let the timer-btn be the pill itself. */
        body[data-scheme] .study-layout.detail-active .study-timer {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
            gap: 6px !important;
        }

        /* ── Hide the floating toolbar on the module / course view ──
           The course view is a long reading surface; the ADD / chat / timer
           pills are irrelevant there and clutter the hero. They reappear
           automatically on any non-module method (notes, flashcards, quiz,
           study guide, adaptive practice, etc.). */
        body[data-scheme] .study-layout.detail-active[data-method="tutor_lesson"] .detail-topbar,
        body[data-scheme] .study-layout.detail-active[data-method="content"] .detail-topbar {
            display: none !important;
        }

        /* ── Sidebar surface: pure white (no cream tint in light themes) ── */
        body[data-scheme] .study-layout.detail-active .study-sidebar {
            background: #ffffff !important;
        }
        [data-theme="dark"] body[data-scheme] .study-layout.detail-active .study-sidebar {
            background: var(--bg-card, #1a1a1a) !important;
        }

        /* ── Sidebar footer (Back to dashboard + AI usage + gear) ──
           Pinned at the bottom via the flex:1 on sidebar-nav above.
           No divider line; modest bottom padding so it doesn't sit flush
           against the viewport edge. */
        body[data-scheme] .study-layout.detail-active .sidebar-footer {
            border-top: none !important;
            padding: 12px 14px 20px !important;
            gap: 12px !important;
            flex: 0 0 auto !important;
        }
        body[data-scheme] .study-layout.detail-active .sidebar-footer .sidebar-footer-back-card {
            height: 48px !important;
            padding: 0 18px !important;
            gap: 10px !important;
            border-radius: 14px !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            justify-content: center !important;
            box-shadow: 0 6px 18px color-mix(in srgb, var(--study-accent) 32%, transparent),
                        0 2px 6px rgba(0, 0, 0, 0.08) !important;
        }
        body[data-scheme] .study-layout.detail-active .sidebar-footer .sidebar-footer-back-card:hover {
            transform: translateY(-1px) !important;
            box-shadow: 0 8px 22px color-mix(in srgb, var(--study-accent) 40%, transparent),
                        0 3px 8px rgba(0, 0, 0, 0.1) !important;
        }
        body[data-scheme] .study-layout.detail-active .sidebar-footer .sidebar-footer-back-card .user-badge i,
        body[data-scheme] .study-layout.detail-active .sidebar-footer .sidebar-footer-back-card i {
            color: #ffffff !important;
            opacity: 1 !important;
            width: 16px !important;
            height: 16px !important;
        }
        body[data-scheme] .study-layout.detail-active .sidebar-footer .sidebar-footer-back-card .user-name {
            color: #ffffff !important;
            flex: 0 0 auto !important;
        }
        /* AI usage bar, roomier, clearly-tinted, rests on its own row */
        body[data-scheme] .study-layout.detail-active .sidebar-footer-row {
            padding: 0 4px !important;
            gap: 10px !important;
        }
        body[data-scheme] .study-layout.detail-active .sidebar-footer-row .study-token-track {
            background: color-mix(in srgb, var(--study-accent) 14%, #fff) !important;
            height: 8px !important;
            border-radius: 999px !important;
        }
        body[data-scheme] .study-layout.detail-active .sidebar-footer-row .study-token-fill {
            background: linear-gradient(90deg,
                color-mix(in srgb, var(--study-accent) 88%, #fff 12%),
                var(--study-accent)) !important;
            border-radius: 999px !important;
        }
        body[data-scheme] .study-layout.detail-active .sidebar-footer-row .study-token-label {
            font-size: 11px !important;
            font-weight: 600 !important;
            color: var(--study-text-tertiary) !important;
        }
        body[data-scheme] .study-layout.detail-active .sidebar-footer-gear {
            width: 32px !important;
            height: 32px !important;
            border-radius: 10px !important;
        }
        body[data-scheme] .study-layout.detail-active .sidebar-footer-gear i {
            width: 16px !important;
            height: 16px !important;
        }

        /* ════════════════════════════════════════════════════════════
           SIDEBAR, MOBILE-DRAWER STYLING (DESKTOP)
           ────────────────────────────────────────────────────────────
           James asked for the desktop sidebar to match the mobile
           drawer's aesthetic (avatar+name+plan at top, clean nav with
           a divider before Settings, logout + KHIO STUDY brand at the
           bottom). This block restyles the redesigned sidebar HTML
           (#studySidebar.sidebar-mwd-styled) to that look. The legacy
           .sidebar-brand-wrap / .user-card / .sidebar-footer-row
           markup is hidden via inline styles in study.html so existing
           JS hooks that target #sidebarAvatar / #tokenFill / etc.
           don't break.
           ════════════════════════════════════════════════════════════ */
        .sidebar-mwd-styled .sidebar-mwd-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 22px 16px 18px;
            border-bottom: 1px solid color-mix(in srgb, var(--study-border, rgba(0,0,0,0.08)) 60%, transparent);
            margin-bottom: 8px;
        }
        .sidebar-mwd-styled .sidebar-mwd-profile {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 12px;
            background: transparent;
            border: none;
            padding: 4px 6px;
            border-radius: 12px;
            cursor: pointer;
            text-align: left;
            min-width: 0;
            font-family: inherit;
            transition: background 0.15s ease;
        }
        .sidebar-mwd-styled .sidebar-mwd-profile:hover {
            background: color-mix(in srgb, var(--study-text, #000) 5%, transparent);
        }
        .sidebar-mwd-styled .sidebar-mwd-avatar {
            position: relative;
            width: 44px; height: 44px;
            border-radius: 14px;
            overflow: hidden;
            flex-shrink: 0;
            background: linear-gradient(135deg,
                color-mix(in srgb, var(--study-accent, #c17a4e) 70%, #e8853a) 0%,
                var(--study-accent, #c17a4e) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 4px 12px rgba(0,0,0,0.12);
        }
        .sidebar-mwd-styled .sidebar-mwd-avatar-initial {
            color: #fff;
            font-size: 18px;
            font-weight: 800;
            letter-spacing: -0.01em;
            text-transform: uppercase;
        }
        .sidebar-mwd-styled .sidebar-mwd-avatar-img {
            width: 100%; height: 100%;
            object-fit: cover;
        }
        .sidebar-mwd-styled .sidebar-mwd-status-dot {
            position: absolute;
            bottom: -2px; right: -2px;
            width: 12px; height: 12px;
            border-radius: 50%;
            background: #22c55e;
            border: 2.5px solid var(--bg-raised, #fff);
            box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
        }
        .sidebar-mwd-styled .sidebar-mwd-meta {
            min-width: 0; flex: 1;
            display: flex; flex-direction: column; gap: 2px;
        }
        .sidebar-mwd-styled .sidebar-mwd-name {
            font-size: 15px;
            font-weight: 800;
            letter-spacing: -0.015em;
            color: var(--study-text, #0f172a);
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .sidebar-mwd-styled .sidebar-mwd-plan {
            font-size: 12px;
            font-weight: 600;
            color: var(--study-text-tertiary, rgba(0,0,0,0.5));
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .sidebar-mwd-styled .sidebar-mwd-header .sidebar-collapse-btn {
            margin-left: auto;
            flex-shrink: 0;
        }
        /* Hide the profile chip + the entire header divider when the user
           clicks into a study set, they're already inside their own
           workspace at that point and don't need a "this is you" reminder
           occupying sidebar real estate. The collapse button stays
           accessible elsewhere. */
        body.in-detail .sidebar-mwd-styled .sidebar-mwd-header,
        .study-layout.detail-active .sidebar-mwd-styled .sidebar-mwd-header {
            display: none !important;
        }

        /* "Back to Dashboard" button, lives in the sidebar footer in
           detail view (replaces Settings + Logout there). Hidden by
           default; the body.in-detail rules below toggle visibility.
           The hide rule uses .sidebar-mwd-back.sidebar-mwd-back-footer
           (chained classes) so it beats the base .sidebar-mwd-back
           `display: flex` rule defined further down, without that
           specificity bump the button leaked onto the dashboard. */
        .sidebar-mwd-styled .sidebar-mwd-back.sidebar-mwd-back-footer { display: none !important; }
        body.in-detail .sidebar-mwd-styled .sidebar-mwd-back.sidebar-mwd-back-footer,
        .study-layout.detail-active .sidebar-mwd-styled .sidebar-mwd-back.sidebar-mwd-back-footer {
            display: flex !important;
            margin: 0 !important;
            width: 100% !important;
        }
        /* Deep-Tutor back button, same chained-class hide so the base
           .sidebar-mwd-back display:flex doesn't leak it onto other
           views. Only shown when .study-layout.deeptutor-active is set
           by JS. James 2026-05-05. */
        .sidebar-mwd-styled .sidebar-mwd-back.sidebar-mwd-back-deeptutor { display: none !important; }
        .study-layout.deeptutor-active .sidebar-mwd-styled .sidebar-mwd-back.sidebar-mwd-back-deeptutor,
        .study-layout.khio-ai-nav-on .sidebar-mwd-styled .sidebar-mwd-back.sidebar-mwd-back-deeptutor {
            display: flex !important;
            margin: 0 0 8px 0 !important;
            width: 100% !important;
        }
        /* In detail view: hide the regular footer items (Settings link,
           Logout) so the only thing left in the footer is the back
           button + the KHIO STUDY brand. */
        body.in-detail .sidebar-mwd-styled .sidebar-mwd-footer-link,
        body.in-detail .sidebar-mwd-styled .sidebar-mwd-logout,
        .study-layout.detail-active .sidebar-mwd-styled .sidebar-mwd-footer-link,
        .study-layout.detail-active .sidebar-mwd-styled .sidebar-mwd-logout {
            display: none !important;
        }

        /* Base styling for the back button (used by both the in-nav and
           in-footer variants). */
        .sidebar-mwd-styled .sidebar-mwd-back {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            margin: 0 4px 12px;
            background: transparent;
            border: 1px solid color-mix(in srgb, var(--study-border, rgba(0,0,0,0.08)) 70%, transparent);
            border-radius: 12px;
            color: var(--study-text-secondary, rgba(0,0,0,0.65));
            font-family: inherit;
            font-size: 13.5px;
            font-weight: 600;
            cursor: pointer;
            text-align: left;
            width: calc(100% - 8px);
            transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
        }
        .sidebar-mwd-styled .sidebar-mwd-back:hover {
            background: color-mix(in srgb, var(--study-accent, #c17a4e) 6%, transparent);
            color: var(--study-accent, #c17a4e);
            border-color: color-mix(in srgb, var(--study-accent, #c17a4e) 35%, transparent);
        }
        .sidebar-mwd-styled .sidebar-mwd-back i {
            width: 16px; height: 16px;
            flex-shrink: 0;
            stroke-width: 2;
        }
        /* Collapsed sidebar: hide label, keep arrow centered */
        .study-layout.sidebar-collapsed .sidebar-mwd-styled .sidebar-mwd-back span,
        .sidebar-mwd-styled.sidebar-collapsed .sidebar-mwd-back span {
            display: none !important;
        }
        .study-layout.sidebar-collapsed .sidebar-mwd-styled .sidebar-mwd-back,
        .sidebar-mwd-styled.sidebar-collapsed .sidebar-mwd-back {
            justify-content: center;
            padding: 10px;
        }

        /* Nav items: cleaner spacing, lucide icons */
        .sidebar-mwd-styled .sidebar-nav { padding: 4px 12px 4px; }
        .sidebar-mwd-styled #navHome { display: flex; flex-direction: column; gap: 2px; }
        /* James 2026-05-18: the Khio AI rail (#navKhioAI) gets the same
           polished nav-link styling as the Khio Study outer nav (#navHome)
          , soft white-card active state with the subtle drop shadow,
           4%-opacity hover wash. Before this, #navKhioAI fell back to the
           bare .nav-link rules and the active item didn't have the clean
           "selected card" look the Khio AI rail used to ship with. */
        .sidebar-mwd-styled #navHome .nav-link,
        .sidebar-mwd-styled #navKhioAI .nav-link {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 11px 14px;
            border-radius: 12px;
            background: transparent;
            border: none;
            color: var(--study-text-secondary, rgba(0,0,0,0.65));
            font-family: inherit;
            font-size: 14.5px;
            /* James 2026-05-14: weight 600 → 500 to match the Life dashboard
               sidebar (premium.css uses Inter 500 for .khio-sidebar .nav-item).
               Same size (13px on laptop) was reading visibly heavier in Study
               than in Life until this dropped. Active state still differentiates
               via background + accent color, not weight. */
            font-weight: 500;
            cursor: pointer;
            width: 100%;
            text-align: left;
            transition: background 0.12s ease, color 0.12s ease;
        }
        .sidebar-mwd-styled #navHome .nav-link i,
        .sidebar-mwd-styled #navKhioAI .nav-link i {
            width: 18px; height: 18px;
            flex-shrink: 0;
            stroke-width: 2;
            color: currentColor;
            opacity: 0.85;
        }
        .sidebar-mwd-styled #navHome .nav-link:hover,
        .sidebar-mwd-styled #navKhioAI .nav-link:hover {
            background: color-mix(in srgb, var(--study-text, #000) 4%, transparent);
            color: var(--study-text, #0f172a);
        }
        .sidebar-mwd-styled #navHome .nav-link.active,
        .sidebar-mwd-styled #navKhioAI .nav-link.active {
            background: var(--bg-card, #fff);
            color: var(--study-accent, #c17a4e);
            box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 0 rgba(0,0,0,0.04);
        }
        .sidebar-mwd-styled #navHome .nav-link.active i,
        .sidebar-mwd-styled #navKhioAI .nav-link.active i {
            opacity: 1;
        }
        .sidebar-mwd-styled .sidebar-mwd-divider {
            height: 1px;
            background: color-mix(in srgb, var(--study-border, rgba(0,0,0,0.08)) 70%, transparent);
            margin: 8px 6px;
        }

        /* Footer: settings link + logout button + KHIO STUDY brand.
           Keep the legacy .sidebar-footer border-top (it's the prominent
           divider line James wants between the main nav and the
           Settings/Logout group). Kill the empty #sidebarWidgets's own
           border-top so we don't double up. */
        .sidebar-mwd-styled .sidebar-footer {
            padding: 12px 14px 16px;
            gap: 4px;
            display: flex;
            flex-direction: column;
        }
        .sidebar-mwd-styled #sidebarWidgets { border-top: none !important; }
        .sidebar-mwd-styled .sidebar-mwd-divider--footer { margin: 4px 6px 6px; }
        .sidebar-mwd-styled .sidebar-mwd-footer-link {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 11px 14px;
            border-radius: 12px;
            background: transparent;
            border: none;
            color: var(--study-text-secondary, rgba(0,0,0,0.65));
            font-family: inherit;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            text-align: left;
            transition: background 0.12s ease, color 0.12s ease;
        }
        .sidebar-mwd-styled .sidebar-mwd-footer-link:hover {
            background: color-mix(in srgb, var(--study-text, #000) 4%, transparent);
            color: var(--study-text, #0f172a);
        }
        .sidebar-mwd-styled .sidebar-mwd-footer-link i {
            width: 18px; height: 18px;
            flex-shrink: 0;
            stroke-width: 2;
            opacity: 0.85;
        }
        .sidebar-mwd-styled .sidebar-mwd-logout {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 11px 14px;
            border-radius: 12px;
            background: transparent;
            border: none;
            color: var(--study-text-secondary, rgba(0,0,0,0.6));
            font-family: inherit;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            text-align: left;
            transition: background 0.12s ease, color 0.12s ease;
        }
        .sidebar-mwd-styled .sidebar-mwd-logout:hover {
            background: color-mix(in srgb, #ef4444 8%, transparent);
            color: #ef4444;
        }
        .sidebar-mwd-styled .sidebar-mwd-logout i {
            width: 18px; height: 18px;
            flex-shrink: 0;
            stroke-width: 2;
        }
        .sidebar-mwd-styled .sidebar-mwd-brand {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px 0;
        }
        .sidebar-mwd-styled .sidebar-mwd-brand-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: var(--study-accent, #c17a4e);
            flex-shrink: 0;
            box-shadow: 0 0 8px color-mix(in srgb, var(--study-accent, #c17a4e) 50%, transparent);
        }
        .sidebar-mwd-styled .sidebar-mwd-brand-name {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.12em;
            color: var(--study-accent, #c17a4e);
            text-transform: uppercase;
        }

        /* Force-hide the legacy user-card / token-bar footer in the
           redesigned sidebar. They live in the DOM only so existing JS
           hooks (#sidebarAvatar, #sidebarUsername, #tokenFill) keep
           writing without errors. updateSidebarFooterCard sets inline
           display='' on these every time it runs, so we need !important
           to keep them hidden. */
        .sidebar-mwd-styled .user-card,
        .sidebar-mwd-styled #sidebarFooterCard,
        .sidebar-mwd-styled .sidebar-footer-row {
            display: none !important;
        }

        /* When the sidebar is collapsed: hide profile meta + brand text +
           every footer-button label (Settings, Logout, Back to Dashboard).
           Earlier this rule only hid Logout's text, which left "Settings"
           wrapping awkwardly next to the gear icon at 72px width. Brand
           dot is also hidden so the bottom doesn't render a stray dot
           floating in empty space. */
        .sidebar-mwd-styled.sidebar-collapsed .sidebar-mwd-meta,
        .study-layout.sidebar-collapsed .sidebar-mwd-styled .sidebar-mwd-meta,
        .sidebar-mwd-styled.sidebar-collapsed .sidebar-mwd-brand,
        .study-layout.sidebar-collapsed .sidebar-mwd-styled .sidebar-mwd-brand,
        .sidebar-mwd-styled.sidebar-collapsed .sidebar-mwd-brand-name,
        .study-layout.sidebar-collapsed .sidebar-mwd-styled .sidebar-mwd-brand-name,
        .sidebar-mwd-styled.sidebar-collapsed .sidebar-mwd-logout span,
        .study-layout.sidebar-collapsed .sidebar-mwd-styled .sidebar-mwd-logout span,
        .sidebar-mwd-styled.sidebar-collapsed .sidebar-mwd-footer-link span,
        .study-layout.sidebar-collapsed .sidebar-mwd-styled .sidebar-mwd-footer-link span,
        .sidebar-mwd-styled.sidebar-collapsed .sidebar-mwd-back-footer span,
        .study-layout.sidebar-collapsed .sidebar-mwd-styled .sidebar-mwd-back-footer span,
        .sidebar-mwd-styled.sidebar-collapsed #navHome .nav-link .nav-link-label,
        .study-layout.sidebar-collapsed .sidebar-mwd-styled #navHome .nav-link .nav-link-label {
            display: none !important;
        }
        /* Center the icon in each collapsed footer button. Default styling
           has display:flex + gap:12px + padding:11px 14px + text-align:left,
           which left the icon hugging the left edge with empty space to
           the right after the label was hidden. Override to centered
           square buttons. */
        .sidebar-mwd-styled.sidebar-collapsed .sidebar-mwd-footer-link,
        .study-layout.sidebar-collapsed .sidebar-mwd-styled .sidebar-mwd-footer-link,
        .sidebar-mwd-styled.sidebar-collapsed .sidebar-mwd-logout,
        .study-layout.sidebar-collapsed .sidebar-mwd-styled .sidebar-mwd-logout,
        .sidebar-mwd-styled.sidebar-collapsed .sidebar-mwd-back-footer,
        .study-layout.sidebar-collapsed .sidebar-mwd-styled .sidebar-mwd-back-footer {
            justify-content: center !important;
            gap: 0 !important;
            padding: 11px 0 !important;
            text-align: center !important;
        }

        /* Header (avatar chip + collapse hamburger). At full width these
           sit side-by-side; at 72px collapsed they don't fit (44 + 10 +
           28 = 82px needed, only ~40px available after padding) and
           overlap. James, 2026-05-02: "the hamburger menu gets
           collapsed ontop of the pfp and the pfp isn't centered."
           Switch the header to a vertical stack when collapsed: avatar
           on top, hamburger below, both centered. */
        .sidebar-mwd-styled.sidebar-collapsed .sidebar-mwd-header,
        .study-layout.sidebar-collapsed .sidebar-mwd-styled .sidebar-mwd-header {
            flex-direction: column !important;
            align-items: center !important;
            gap: 10px !important;
            /* Symmetric horizontal padding (was 16px 8px 14px) so the avatar and
               collapse arrow line up dead-center against the full sidebar width.
               Previous 8px L/R padding offset content within the 64px collapsed
               sidebar, visual misalignment vs the nav links below. 2026-05-03. */
            padding: 16px 0 14px !important;
        }
        .sidebar-mwd-styled.sidebar-collapsed .sidebar-mwd-profile,
        .study-layout.sidebar-collapsed .sidebar-mwd-styled .sidebar-mwd-profile {
            flex: 0 0 auto !important;
            justify-content: center !important;
            gap: 0 !important;
            padding: 0 !important;
        }
        .sidebar-mwd-styled.sidebar-collapsed .sidebar-mwd-header .sidebar-collapse-btn,
        .study-layout.sidebar-collapsed .sidebar-mwd-styled .sidebar-mwd-header .sidebar-collapse-btn {
            margin-left: 0 !important;
            margin-top: 0 !important;
        }