:root {
            --font-ui: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
            --bg: #f7f7f8;
            --surface: #ffffff;
            --surface-soft: #f1f2f4;
            --surface-hover: #e8eaed;
            --pdf-bg: #ffffff;
            --topical-reader-bar: #ffffff;
            --text: #1f2328;
            --muted: #6b7280;
            --border: #d9dde3;
            --accent: #3766b4;
            --accent-hover: #203b68;
            --assistant: #ffffff;
            --user: #3766b4;
            --user-text: #ffffff;
            --danger: #c2410c;
            --scrollbar-track: #eef0f2;
            --scrollbar-thumb: #b7bdc5;
            --scrollbar-thumb-hover: #929aa5;
        }

        /* Atlas visual language: quiet surfaces, outlined cards, and focused blue accents. */
        .workspace,
        .syllabus-workspace {
            --page-accent: #3766b4;
            background: var(--bg);
        }

        [data-theme="dark"] .workspace,
        [data-theme="dark"] .syllabus-workspace {
            --page-accent: #7890ff;
        }

        /* Keep syllabus actions on the same Atlas blue scale as the other workspaces. */
        .syllabus-workspace {
            --accent: #3766b4;
            --accent-hover: #203b68;
            --user: #3766b4;
        }

        [data-theme="dark"] .syllabus-workspace {
            --accent: #7890ff;
            --accent-hover: #9aaaff;
            --user: #7890ff;
        }

        .pdf-panel,
        .chat-panel,
        .syllabus-browser,
        .syllabus-page {
            background: var(--surface);
        }

        .pdf-toolbar,
        .pdf-frame-wrap,
        .conversation,
        .syllabus-page {
            border-color: var(--border);
        }

        .paper-picker,
        .prompt-card,
        .paper-picker-item,
        .paper-selection-item,
        .notebook-chat-box,
        .syllabus-title-card,
        .syllabus-stat-card {
            border-radius: 10px;
            box-shadow: none;
        }

        .paper-picker,
        .prompt-card,
        .notebook-chat-box,
        .syllabus-title-card,
        .syllabus-stat-card {
            background: var(--surface);
        }

        .paper-picker-trigger:hover,
        .paper-picker-trigger[aria-expanded="true"],
        .paper-picker-item:hover,
        .paper-picker-item.active,
        .paper-selection-item:hover,
        .prompt-card:hover,
        .notebook-subject-change:hover,
        .syllabus-topic:hover,
        .syllabus-topic.active {
            border-color: var(--page-accent);
        }

        .paper-picker-item:hover,
        .paper-picker-item.active,
        .paper-selection-item:hover,
        .prompt-card:hover,
        .syllabus-topic:hover,
        .syllabus-topic.active {
            background: color-mix(in srgb, var(--page-accent) 5%, var(--surface));
        }

        .paper-period-heading::before,
        .paper-period-heading::after {
            background: var(--border);
        }

        .toolbar-button.accent,
        .send-button,
        .notebook-send,
        .topic-chip.accent {
            border-color: var(--page-accent);
            background: var(--page-accent);
        }

        .toolbar-button.accent:hover,
        .send-button:hover,
        .notebook-send:hover {
            background: color-mix(in srgb, var(--page-accent) 82%, #000000);
        }

        .composer {
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--surface);
        }

        .message.user,
        .notebook-message.user {
            background: var(--page-accent);
        }

        .syllabus-topic.active {
            color: var(--text);
        }

        .syllabus-page-tab:hover,
        .syllabus-page-tab.active {
            border-color: var(--page-accent);
            color: var(--text);
            background: color-mix(in srgb, var(--page-accent) 7%, var(--surface));
        }

        /* Compact syllabus navigation and reading sheet for narrow screens. */
        @media (max-width: 820px) {
            .syllabus-workspace {
                display: block;
                overflow: visible;
            }

            .syllabus-browser {
                position: sticky;
                z-index: 4;
                top: 0;
                gap: 8px;
                padding: 10px 12px 8px;
                border-right: 0;
                border-bottom: 1px solid var(--border);
            }

            .syllabus-controls { gap: 8px; }
            .syllabus-browser .notebook-brand { display: none; }
            .syllabus-page-switcher { gap: 4px; }
            .syllabus-page-tab { min-height: 32px; padding: 0 10px; }
            .notebook-subject-wrap { gap: 6px; }
            .notebook-subject-context { min-height: 34px; }
            .syllabus-control-label { font-size: 10px; }
            .syllabus-topic-search { min-height: 34px; }

            .syllabus-list {
                display: flex;
                gap: 6px;
                max-height: none;
                overflow-x: auto;
                overflow-y: hidden;
                padding: 0 0 2px;
                scroll-snap-type: x proximity;
            }

            .syllabus-topic-index-item {
                flex: 0 0 158px;
                min-height: 52px;
                padding: 7px 8px;
                border-left: 0;
                border-bottom: 2px solid transparent;
                scroll-snap-align: start;
            }

            .syllabus-topic-index-item:hover,
            .syllabus-topic-index-item.active {
                border-bottom-color: var(--accent);
                background: color-mix(in srgb, var(--accent) 6%, transparent);
            }

            .syllabus-topic-index-item strong {
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

            .syllabus-page { padding: 0; }
            .syllabus-dashboard-header { display: none; }
            .syllabus-page .conversation-inner { padding: 12px 16px 44px; }
            .syllabus-topic-section { padding: 26px 0 28px; }
            .syllabus-topic-section:first-child { padding-top: 8px; }

            .syllabus-topic-section .syllabus-topic-header {
                align-items: flex-start;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 10px;
                margin-bottom: 14px;
                padding: 0 0 9px;
            }

            .syllabus-topic-section .syllabus-topic-header > div { min-width: 0; flex: 1 1 190px; }
            .syllabus-topic-section .syllabus-topic-header h1 { font-size: clamp(20px, 6vw, 25px); }
            .syllabus-topic-section .syllabus-topical-action { width: auto; min-height: 34px; padding: 0 10px; }
            .syllabus-topic-section .syllabus-outline-heading { margin-bottom: 4px; }
            .syllabus-topic-section .syllabus-subtopic-row summary { min-height: 42px; padding: 7px 0; }
            .syllabus-topic-section .syllabus-subtopic-number { min-width: 36px; min-height: 28px; }
            .syllabus-topic-section .syllabus-subtopic-detail { padding: 0 0 12px 36px; }
            .syllabus-topic-section .syllabus-subtopic-detail ol { font-size: 12px; line-height: 1.45; }
            .syllabus-topic-section .syllabus-topic-chat { width: 100%; margin-top: 16px; padding-top: 12px; }
            .syllabus-topic-section .syllabus-topic-chat .notebook-messages { max-height: 180px; }
            .syllabus-topic-section .syllabus-prompt-actions { gap: 5px; }
            .syllabus-topic-section .syllabus-prompt-actions button { min-height: 28px; padding: 0 8px; font-size: 10px; }
        }

        @media (max-width: 460px) {
            .syllabus-browser { padding-inline: 10px; }
            .syllabus-page-switcher { width: 100%; }
            .syllabus-page-tab { flex: 1; }
            .notebook-subject-context { align-items: center; }
            .notebook-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            .syllabus-topic-index-item { flex-basis: 140px; }
            .syllabus-page .conversation-inner { padding: 10px 12px 36px; }
            .syllabus-topic-section { padding: 22px 0 24px; }
            .syllabus-topic-section .syllabus-subtopic-detail { padding-left: 0; }
            .syllabus-topic-section .syllabus-subtopic-detail ol { padding-left: 20px; }
            .syllabus-topic-section .notebook-input-row { gap: 6px; }
        }

        [data-theme="dark"] {
            --bg: #050505;
            --surface: #0b0b0b;
            --surface-soft: #141414;
            --surface-hover: #1d1d1d;
            --pdf-bg: #050505;
            --topical-reader-bar: #000000;
            --text: #ececec;
            --muted: #a6a6a6;
            --border: #242424;
            --accent: #7890ff;
            --accent-hover: #9aaaff;
            --assistant: #0b0b0b;
            --user: #7890ff;
            --user-text: #ffffff;
            --danger: #fb923c;
            --scrollbar-track: #0f0f0f;
            --scrollbar-thumb: #4a4a4a;
            --scrollbar-thumb-hover: #666666;
        }

        * { box-sizing: border-box; }
        * {
            scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
            scrollbar-width: thin;
        }

        *::-webkit-scrollbar { width: 10px; height: 10px; }
        *::-webkit-scrollbar-track { background: var(--scrollbar-track); }
        *::-webkit-scrollbar-thumb {
            border: 2px solid var(--scrollbar-track);
            border-radius: 10px;
            background: var(--scrollbar-thumb);
        }
        *::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

        [hidden] { display: none !important; }

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

        body {
            margin: 0;
            height: 100vh;
            overflow: hidden;
            background: var(--bg);
            color: var(--text);
            font-family: var(--font-ui);
        }

        button, input, select, textarea { font: inherit; }
        button { border: 0; cursor: pointer; }

        .app-shell {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            height: 100vh;
        }

        .header-atlas-brand {
            position: absolute;
            left: 50%;
            display: block;
            width: 180px;
            transform: translateX(-50%);
            line-height: 0;
        }

        .header-atlas-logo {
            display: block;
            width: 100%;
            height: auto;
        }

        .header-atlas-brand:focus-visible {
            outline: 2px solid #4b61ff;
            outline-offset: 4px;
            border-radius: 4px;
        }

        .atlas-logo {
            display: block;
            width: min(100%, 220px);
            height: auto;
        }

        .atlas-logo__badge,
        .atlas-logo__star { fill: #4b61ff; }

        .atlas-logo__arrow { fill: #ffffff; }

        .atlas-logo__wordmark {
            fill: var(--text);
            font-family: var(--font-ui);
            font-size: 90px;
            font-weight: 600;
            letter-spacing: -2.7px;
        }

        .header-atlas-logo .atlas-logo__badge,
        .header-atlas-logo .atlas-logo__star { fill: #111111; }

        .header-atlas-logo .atlas-logo__arrow { fill: #ffffff; }
        .header-atlas-logo .atlas-logo__wordmark { fill: #111111; font-weight: 600; }

        [data-theme="dark"] .header-atlas-logo .atlas-logo__badge,
        [data-theme="dark"] .header-atlas-logo .atlas-logo__star { fill: #ffffff; }

        [data-theme="dark"] .header-atlas-logo .atlas-logo__arrow { fill: #111111; }
        [data-theme="dark"] .header-atlas-logo .atlas-logo__wordmark { fill: #ffffff; }

        .icon {
            width: 18px;
            height: 18px;
            flex: 0 0 auto;
            stroke: currentColor;
            stroke-width: 2;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .theme-button,
        .toolbar-button,
        .send-button,
        .prompt-card {
            border-radius: 8px;
            color: var(--text);
            background: transparent;
        }

        .theme-button {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            min-height: 40px;
            padding: 9px 10px;
            text-align: left;
        }

        .theme-button:hover,
        .toolbar-button:hover,
        .prompt-card:hover {
            background: var(--surface-hover);
        }

        .main {
            position: relative;
            display: grid;
            grid-template-rows: auto minmax(0, 1fr);
            min-width: 0;
            height: 100vh;
            background: var(--bg);
        }

        .topbar {
            display: none;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            min-height: 46px;
            padding: 4px 10px;
            border-bottom: 1px solid var(--border);
            background: color-mix(in srgb, var(--bg) 92%, var(--surface));
        }

        .nav-support-controls { display: none !important; }

        .topbar-left {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }

        .topbar-actions {
            position: relative;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .topbar-stats {
            display: inline-flex;
            align-items: stretch;
            height: 40px;
            box-sizing: border-box;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: var(--surface);
        }

        .topbar-stats > button {
            height: 38px;
            min-height: 38px;
            padding-inline: 6px;
            box-sizing: border-box;
            border: 0;
            border-radius: 0;
            background: transparent;
            line-height: 1;
        }

        .topbar-stats > button + button { border-left: 1px solid var(--border); }

        .topbar-search-button {
            display: inline-flex;
            flex: 0 1 260px;
            align-items: center;
            gap: 9px;
            min-height: 34px;
            margin: 0 auto 0 10px;
            padding: 0 11px;
            border: 1px solid var(--border);
            border-radius: 18px;
            color: var(--muted);
            background: var(--surface);
            font: inherit;
            font-size: 12px;
            text-align: left;
        }

        .topbar-brand {
            display: inline-flex;
            flex: 0 0 auto;
            align-items: center;
            margin-left: -8px;
            width: 220px;
            min-width: 0;
            min-height: 34px;
            transform: translateX(-6px);
            overflow: hidden;
            padding: 0;
            border: 0;
            border-radius: 8px;
            background: transparent;
        }

        .topbar-brand:hover,
        .topbar-brand:focus-visible { background: transparent; }

        .topbar-brand-logo {
            display: block;
            width: 210px;
            max-width: 210px;
            height: auto;
        }

        .topbar-brand-logo .atlas-logo__wordmark {
            font-size: 78px;
            letter-spacing: -2.3px;
        }

        .topbar .sidebar-toggle-button {
            display: grid !important;
            flex: 0 0 32px;
            width: 32px;
            min-width: 32px;
            height: 32px;
            min-height: 32px;
            margin-left: 0;
            padding: 0;
            place-items: center;
            border: 0;
            color: var(--muted);
            background: transparent;
        }

        body:not(.dashboard-sidebar-collapsed) .topbar .sidebar-toggle-button {
            transform: translateX(-50px);
        }

        .topbar .page-title { display: none; }

        @media (max-width: 820px) {
            .topbar .sidebar-toggle-button { display: none !important; }
            .topbar-brand { width: 136px; }
            .topbar-brand-logo { width: 128px; max-width: 128px; height: auto; }
            .topbar-search-button { flex: 1 1 auto; min-width: 0; }
        }

        .topbar-search-button:hover,
        .topbar-search-button:focus-visible {
            border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
            color: var(--text);
            background: var(--surface-soft);
        }

        .topbar-search-button .icon {
            width: 16px;
            height: 16px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-width: 1.8;
        }

        .global-search:not([hidden]) {
            position: fixed;
            z-index: 100;
            inset: 0;
            display: grid;
            place-items: start center;
            padding: 56px 20px 24px;
        }

        .global-search-backdrop {
            position: absolute;
            inset: 0;
            border: 0;
            background: rgba(24, 29, 40, .48);
        }

        .global-search-dialog {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-rows: auto auto minmax(0, 1fr);
            width: min(100%, 560px);
            height: min(640px, calc(100vh - 80px));
            max-height: min(640px, calc(100vh - 80px));
            min-height: 0;
            padding: 10px;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 16px;
            background: var(--surface);
            box-shadow: 0 8px 8px rgba(28, 36, 54, .16);
        }

        .global-search-input-row {
            display: flex;
            align-items: center;
            gap: 9px;
            min-height: 40px;
            padding: 0 10px;
            border: 1px solid var(--border);
            border-radius: 9px;
            background: var(--surface-soft);
        }

        .global-search-input-row > .icon {
            flex: 0 0 auto;
            width: 17px;
            height: 17px;
            fill: none;
            stroke: var(--muted);
            stroke-linecap: round;
            stroke-width: 1.8;
        }

        .global-search-input-row input {
            min-width: 0;
            flex: 1;
            height: 36px;
            padding: 0;
            border: 0;
            outline: 0;
            color: var(--text);
            background: transparent;
            font: inherit;
            font-size: 14px;
        }

        .global-search-close {
            display: grid;
            flex: 0 0 auto;
            width: 28px;
            height: 28px;
            padding: 0;
            place-items: center;
            border: 0;
            border-radius: 7px;
            color: var(--muted);
            background: transparent;
        }

        .global-search-close:hover,
        .global-search-close:focus-visible { color: var(--text); background: var(--surface); }
        .global-search-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }

        .global-search-filters {
            display: flex;
            gap: 7px;
            padding: 10px 0 8px;
        }

        .global-search-filters button {
            min-height: 29px;
            padding: 5px 10px;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--muted);
            background: var(--surface);
            font: inherit;
            font-size: 11px;
            font-weight: 600;
        }

        .global-search-filters button:hover,
        .global-search-filters button:focus-visible,
        .global-search-filters button.is-active {
            border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
            color: var(--accent);
            background: color-mix(in srgb, var(--accent) 9%, var(--surface));
        }

        .global-search-results {
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: 2px 0;
        }

        .global-search-result {
            display: flex;
            align-items: center;
            width: 100%;
            gap: 10px;
            min-height: 52px;
            padding: 7px 8px;
            border: 0;
            border-radius: 9px;
            color: var(--text);
            background: transparent;
            text-align: left;
        }

        .global-search-result:hover,
        .global-search-result:focus-visible { background: var(--surface-soft); }

        .global-search-result-icon {
            display: grid;
            flex: 0 0 31px;
            width: 31px;
            height: 31px;
            place-items: center;
            border-radius: 8px;
            color: var(--muted);
            background: var(--surface-soft);
        }

        .global-search-result-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
        .global-search-result-icon--page { color: #3f6fc4; background: #e8f0ff; }
        .global-search-result-icon--topic { color: #8b59b5; background: #f3eaff; }
        .global-search-result-icon--paper { color: #b8791f; background: #fff1d7; }
        .global-search-result-copy { display: grid; min-width: 0; gap: 2px; }
        .global-search-result-copy strong { overflow: hidden; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
        .global-search-result-copy small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
        .global-search-result-type { margin-left: auto; color: var(--muted); font-size: 10px; text-transform: capitalize; }

        .global-search-empty {
            display: grid;
            gap: 4px;
            padding: 28px 10px;
            color: var(--muted);
            text-align: center;
        }

        .global-search-empty strong { color: var(--text); font-size: 13px; font-weight: 650; }
        .global-search-empty span { font-size: 11px; }

        .topbar-energy-status {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            min-height: 34px;
            padding: 0 10px;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: #b13be6;
            background: var(--surface);
            font-size: 13px;
            line-height: 1;
            white-space: nowrap;
        }

        .topbar-streak {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 34px;
            padding: 0 10px;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: #ff8a00;
            background: var(--surface);
            cursor: pointer;
            white-space: nowrap;
        }

        .topbar-streak:hover,
        .topbar-streak:focus-visible { border-color: color-mix(in srgb, #ff8a00 48%, var(--border)); background: color-mix(in srgb, #ff8a00 9%, var(--surface)); }
        .topbar-streak__icon { width: 21px; height: 21px; fill: currentColor; }
        .topbar-streak__copy { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12px; line-height: 1; }
        .topbar-streak__copy strong { font-size: 15px; font-weight: 650; }

        .topbar-xp {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            min-height: 34px;
            box-sizing: border-box;
            padding: 0 10px;
            border: 1px solid #378f69;
            border-radius: 999px;
            color: #35b77c;
            background: transparent;
            cursor: pointer;
            white-space: nowrap;
        }
        .topbar-xp:hover,
        .topbar-xp:focus-visible { border-color: #54c997; background: color-mix(in srgb, #35b77c 9%, var(--surface)); }
        .topbar-xp__icon { width: 21px; height: 21px; fill: currentColor; }
        .topbar-xp__copy { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12px; line-height: 1; }
        .topbar-xp__copy strong { display: inline-block; font-size: 15px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
        .topbar-xp__copy strong > span { display: inline-block; font: inherit; line-height: inherit; vertical-align: baseline; }
        .topbar-xp__copy > span { color: var(--muted); font-size: 10px; line-height: 1; }

        .topbar-energy-status:hover,
        .topbar-energy-status:focus-visible,
        .topbar-energy-status[aria-expanded="true"] {
            border-color: color-mix(in srgb, #b13be6 42%, var(--border));
            background: color-mix(in srgb, #b13be6 7%, var(--surface));
        }

        .topbar-stats > .topbar-streak,
        .topbar-stats > .topbar-xp,
        .topbar-stats > .topbar-energy-status { border-radius: 0; border-color: transparent; }
        .topbar-stats > .topbar-streak:hover,
        .topbar-stats > .topbar-streak:focus-visible { border-color: transparent; }
        .topbar-stats > .topbar-xp:hover,
        .topbar-stats > .topbar-xp:focus-visible { border-color: transparent; }
        .topbar-stats > .topbar-energy-status:hover,
        .topbar-stats > .topbar-energy-status:focus-visible,
        .topbar-stats > .topbar-energy-status[aria-expanded="true"] { border-color: transparent; }

        .energy-popover {
            position: absolute;
            z-index: 20;
            top: calc(100% + 8px);
            right: 0;
            width: min(276px, calc(100vw - 24px));
        }

        .energy-popover__panel {
            position: relative;
            overflow: hidden;
            padding: 7px;
            border: 1px solid var(--border);
            border-radius: 18px;
            background: var(--surface);
            box-shadow: 0 14px 34px rgba(28, 36, 54, 0.18);
        }

        .energy-popover__close {
            position: absolute;
            z-index: 1;
            top: 12px;
            right: 12px;
            display: grid;
            width: 28px;
            height: 28px;
            padding: 0;
            place-items: center;
            border: 1px solid color-mix(in srgb, #b13be6 26%, transparent);
            border-radius: 8px;
            color: #8b259d;
            background: rgba(255, 255, 255, 0.52);
        }

        .energy-popover__close svg {
            width: 15px;
            height: 15px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-width: 2;
        }

        .energy-popover__hero {
            padding: 12px 12px 11px;
            border-radius: 13px;
            background: linear-gradient(135deg, #fae7ff, #f0ddff);
        }

        .energy-popover__icon {
            display: grid;
            width: 58px;
            height: 58px;
            margin: 0 auto 7px;
            place-items: center;
            border-radius: 50%;
            color: #b13be6;
            background: rgba(255, 255, 255, 0.56);
        }

        .energy-popover__icon svg {
            width: 35px;
            height: 35px;
            fill: currentColor;
        }

        .energy-popover__recharge {
            display: flex;
            justify-content: center;
            gap: 8px;
            color: #b13be6;
            font-size: 12px;
        }

        .energy-popover__recharge strong { font-weight: 750; }

        .energy-popover__meter-heading {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            margin-top: 13px;
            color: #b13be6;
            font-size: 12px;
            font-weight: 650;
        }

        .energy-popover__meter-heading em {
            color: color-mix(in srgb, #b13be6 72%, #ffffff);
            font-style: normal;
            font-weight: 600;
        }

        .energy-popover__meter {
            display: grid;
            grid-template-columns: repeat(20, minmax(0, 1fr));
            gap: 3px;
            margin-top: 7px;
        }

        .energy-popover__meter i {
            display: block;
            height: 10px;
            border-radius: 3px;
            background: #c026d3;
        }

        .energy-popover__meter i.is-empty { background: rgba(192, 38, 211, 0.18); }

        .energy-popover__details-toggle {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            width: 100%;
            min-height: 30px;
            margin-top: 7px;
            padding: 5px 9px;
            border: 1px solid var(--text);
            border-radius: 13px;
            color: var(--text);
            background: var(--surface);
            font-size: 11px;
            text-align: left;
        }

        .energy-popover__details-toggle svg {
            width: 14px;
            height: 14px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1.8;
            transition: transform 140ms ease;
        }

        .energy-popover__details-toggle[aria-expanded="false"] svg { transform: rotate(180deg); }

        .energy-cost-list {
            display: grid;
            gap: 5px;
            padding: 7px 8px 4px;
            color: var(--muted);
            font-size: 11px;
        }

        .energy-cost-list > div {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 10px;
        }

        .energy-cost-list strong {
            flex: 0 0 auto;
            color: #c026d3;
            font-weight: 700;
        }

        .energy-popover__upgrade {
            width: 100%;
            min-height: 32px;
            margin-top: 5px;
            border-radius: 8px;
            color: #ffffff;
            background: #c026d3;
            font-size: 12px;
            font-weight: 700;
        }

        .energy-popover__upgrade:hover,
        .energy-popover__upgrade:focus-visible { background: #a91fbb; }

        .topbar-energy-status__icon {
            width: 21px;
            height: 21px;
            fill: currentColor;
        }

        .topbar-stats > button + button { border-left: 1px solid var(--border) !important; }
        .topbar-stats svg { display: block; flex: 0 0 auto; }
        .topbar-stats strong { line-height: 1; }

        .account-trigger {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            height: 40px;
            min-height: 40px;
            padding: 0 14px;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--text);
            background: var(--surface);
        }

        .account-trigger:hover { background: var(--surface-hover); }
        .account-trigger.signed-in { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
        .account-trigger:disabled { cursor: not-allowed; opacity: 0.58; }
        .account-trigger .icon { width: 17px; height: 17px; }

        body.modal-open { overflow: hidden; }

        .account-layer {
            position: fixed;
            z-index: 100;
            inset: 0;
            display: grid;
            place-items: center;
            padding: 20px;
        }

        .account-layer[hidden],
        .energy-popover[hidden] { display: none !important; }

        .account-backdrop {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background: rgba(8, 11, 18, 0.62);
        }

        .auth-dialog,
        .account-dialog {
            position: relative;
            z-index: 1;
            width: min(100%, 840px);
            max-height: min(760px, calc(100vh - 40px));
            overflow: auto;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--surface);
            background-color: var(--surface);
            opacity: 1;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
        }

        .auth-dialog {
            display: grid;
            grid-template-columns: minmax(260px, 0.85fr) minmax(340px, 1.15fr);
        }

        .auth-brand-panel {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 28px;
            min-height: 570px;
            padding: 42px 36px;
            color: #f4f5f7;
            background: #171c28;
        }

        .auth-brand-mark {
            width: 78px;
            height: 78px;
            fill: #4b61ff;
        }

        .auth-brand-arrow { fill: #ffffff; }

        .auth-brand-panel strong {
            display: block;
            margin-bottom: 10px;
            font-size: 28px;
            font-weight: 650;
        }

        .auth-brand-panel p {
            margin: 0;
            color: #c8ccd5;
            font-size: 15px;
            line-height: 1.55;
        }

        .auth-brand-panel ul {
            display: grid;
            gap: 12px;
            margin: 0;
            padding: 0;
            color: #d8dbe2;
            font-size: 13px;
            line-height: 1.45;
            list-style: none;
        }

        .auth-brand-panel li {
            position: relative;
            padding-left: 20px;
        }

        .auth-brand-panel li::before {
            position: absolute;
            left: 0;
            top: 0.55em;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #7b8bff;
            content: "";
        }

        .auth-form-panel {
            position: relative;
            padding: 54px 48px 38px;
        }

        .account-close {
            display: grid;
            place-items: center;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            color: var(--muted);
            background: transparent;
        }

        .account-close:hover { color: var(--text); background: var(--surface-soft); }
        .account-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
        .auth-form-panel > .account-close { position: absolute; top: 16px; right: 16px; }

        .auth-heading h2,
        .account-dialog-header h2 {
            margin: 0;
            color: var(--text);
            font-size: 26px;
            font-weight: 650;
            letter-spacing: -0.02em;
        }

        .auth-heading p {
            margin: 8px 0 26px;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.5;
        }

        .auth-google,
        .auth-submit,
        .account-secondary-action,
        .account-danger-action {
            min-height: 42px;
            border-radius: 8px;
            font-weight: 600;
        }

        .auth-google {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            border: 1px solid var(--border);
            color: var(--text);
            background: var(--surface);
        }

        .auth-google:hover,
        .account-secondary-action:hover { background: var(--surface-hover); }
        .auth-google svg { width: 20px; height: 20px; }
        .auth-google svg path:nth-child(1) { fill: #4285f4; }
        .auth-google svg path:nth-child(2) { fill: #34a853; }
        .auth-google svg path:nth-child(3) { fill: #fbbc05; }
        .auth-google svg path:nth-child(4) { fill: #ea4335; }

        .auth-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 22px 0;
            color: var(--muted);
            font-size: 12px;
        }

        .auth-divider::before,
        .auth-divider::after {
            flex: 1;
            height: 1px;
            background: var(--border);
            content: "";
        }

        .auth-form { display: grid; gap: 15px; }

        .auth-form label {
            display: grid;
            gap: 7px;
            color: var(--text);
            font-size: 13px;
            font-weight: 600;
        }

        .auth-form input {
            width: 100%;
            min-height: 44px;
            padding: 9px 11px;
            border: 1px solid var(--border);
            border-radius: 8px;
            outline: none;
            color: var(--text);
            background: var(--bg);
        }

        .auth-form input:focus {
            border-color: #4b61ff;
            box-shadow: 0 0 0 3px color-mix(in srgb, #4b61ff 18%, transparent);
        }

        .auth-submit {
            margin-top: 3px;
            color: #ffffff;
            background: #4b61ff;
        }

        .auth-submit:hover { background: #3f52df; }
        .auth-google:disabled,
        .auth-submit:disabled,
        .account-secondary-action:disabled,
        .account-danger-action:disabled { cursor: wait; opacity: 0.68; }

        .auth-text-action {
            display: block;
            margin: 15px auto 0;
            padding: 2px 4px;
            color: #4b61ff;
            background: transparent;
            font-size: 13px;
        }

        .account-inline-status {
            min-height: 20px;
            margin: 14px 0 0;
            color: var(--accent);
            font-size: 13px;
            line-height: 1.45;
        }

        .account-inline-status.error { color: var(--danger); }

        .auth-privacy-note {
            margin: 14px 0 0;
            color: var(--muted);
            font-size: 11px;
            line-height: 1.45;
        }

        .account-dialog {
            width: min(100%, 650px);
            padding: 28px;
        }

        .account-dialog-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 20px;
            padding-bottom: 22px;
            border-bottom: 1px solid var(--border);
        }

        .account-dialog-header p {
            margin: 0 0 4px;
            color: var(--muted);
            font-size: 13px;
        }

        .account-identity {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 12px;
            padding: 22px 0;
        }

        .account-avatar {
            display: grid;
            place-items: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            color: #ffffff;
            background: #4b61ff;
        }

        .account-avatar {
            overflow: hidden;
            padding: 0;
            background: #f5e9dc;
        }

        .account-avatar .avatar-art { width: 100%; height: 100%; }

        .account-trigger-avatar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            overflow: hidden;
            border-radius: 50%;
            background: #f5e9dc;
        }

        .account-trigger-avatar .avatar-art { width: 100%; height: 100%; }
        .account-identity strong,
        .account-identity span { display: block; }
        .account-identity strong { font-size: 15px; font-weight: 650; }
        .account-identity > div:nth-child(2) span { margin-top: 3px; color: var(--muted); font-size: 13px; }

        .account-verification {
            padding: 5px 8px;
            border-radius: 999px;
            color: #08785f;
            background: color-mix(in srgb, var(--accent) 14%, var(--surface));
            font-size: 11px;
            font-weight: 600;
        }

        .account-verification.warning {
            color: var(--danger);
            background: color-mix(in srgb, var(--danger) 12%, var(--surface));
        }

        .account-progress-summary {
            display: grid;
            grid-template-columns: 170px minmax(0, 1fr);
            gap: 18px;
            padding: 20px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--surface-soft);
        }

        .account-progress-summary span { display: block; color: var(--muted); font-size: 12px; }
        .account-progress-summary strong { display: block; margin-top: 3px; font-size: 34px; font-weight: 650; }
        .account-progress-summary p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

        .account-streak-card {
            margin-top: 12px;
            padding: 18px 20px;
            border: 1px solid color-mix(in srgb, #ff8a00 30%, var(--border));
            border-radius: 10px;
            background: color-mix(in srgb, #ff8a00 8%, var(--surface-soft));
        }
        .account-streak-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
        .account-streak-card__heading p { margin: 0 0 4px; color: var(--muted); font-size: 12px; }
        .account-streak-card__heading h3 { margin: 0; font-size: 17px; font-weight: 650; }
        .account-streak-card__icon { width: 24px; height: 24px; fill: #ff8a00; }
        .account-streak-card__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
        .account-streak-card__stats > div { min-width: 0; padding: 10px; border: 1px solid color-mix(in srgb, #ff8a00 20%, var(--border)); border-radius: 8px; background: var(--surface); }
        .account-streak-card__stats strong, .account-streak-card__stats span { display: block; }
        .account-streak-card__stats strong { font-size: 18px; font-weight: 650; }
        .account-streak-card__stats span { margin-top: 3px; color: var(--muted); font-size: 11px; }
        .account-streak-card > p { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
        .topbar-streak__icon .streak-flame-core,
        .account-streak-card__icon .streak-flame-core { fill: #ffbd18; }

        .account-xp-card {
            margin-top: 12px;
            padding: 18px 20px;
            border: 1px solid color-mix(in srgb, #35b77c 28%, var(--border));
            border-radius: 10px;
            background: color-mix(in srgb, #35b77c 7%, var(--surface-soft));
        }
        .account-xp-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
        .account-xp-card__heading p { margin: 0 0 4px; color: var(--muted); font-size: 12px; }
        .account-xp-card__heading h3 { margin: 0; font-size: 17px; font-weight: 650; }
        .account-xp-card__heading > strong { color: #35b77c; font-size: 18px; font-weight: 650; white-space: nowrap; }
        .account-xp-card__heading > strong span { font-size: 24px; }
        .account-xp-card__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
        .account-xp-card__stats > div { min-width: 0; padding: 10px; border: 1px solid color-mix(in srgb, #35b77c 18%, var(--border)); border-radius: 8px; background: var(--surface); }
        .account-xp-card__stats strong, .account-xp-card__stats span { display: block; }
        .account-xp-card__stats strong { font-size: 17px; font-weight: 650; }
        .account-xp-card__stats span { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.25; }
        .account-xp-card > p { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

        .account-section {
            padding: 20px 0;
            border-bottom: 1px solid var(--border);
        }

        .account-section h3 { margin: 0; font-size: 15px; font-weight: 650; }
        .account-section > p { margin: 6px 0 12px; color: var(--muted); font-size: 13px; }
        .account-privacy-section ul { display: grid; gap: 7px; margin: 10px 0 0; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.45; }

        .account-section-heading {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
        }

        .account-section-heading p {
            margin: 6px 0 0;
            color: var(--muted);
            font-size: 13px;
        }

        .account-plan-badge {
            flex: 0 0 auto;
            padding: 5px 9px;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--text);
            background: var(--surface-soft);
            font-size: 11px;
            font-weight: 650;
        }

        .account-plan-badge.paid {
            border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
            color: #08785f;
            background: color-mix(in srgb, var(--accent) 12%, var(--surface));
        }

        .account-quota-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            margin-top: 14px;
        }

        .account-quota-grid > div {
            min-width: 0;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface-soft);
        }

        .account-quota-grid span {
            display: block;
            color: var(--muted);
            font-size: 11px;
            line-height: 1.3;
        }

        .account-quota-grid strong {
            display: block;
            margin-top: 5px;
            font-size: 16px;
            font-weight: 650;
        }

        .account-quota-reset {
            margin: 9px 0 0 !important;
            font-size: 11px !important;
        }

        .account-secondary-action,
        .account-danger-action {
            padding: 9px 13px;
            border: 1px solid var(--border);
            color: var(--text);
            background: var(--surface);
        }

        .account-danger-action {
            border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
            color: var(--danger);
        }

        .account-danger-action:hover { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }

        .account-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding-top: 18px;
        }

        .account-actions .account-danger-action { margin-left: auto; }

        .avatar-builder-section { padding-top: 20px; }

        .avatar-save-status {
            flex: 0 0 auto;
            padding: 5px 9px;
            border: 1px solid color-mix(in srgb, #08785f 24%, var(--border));
            border-radius: 999px;
            color: #08785f;
            background: color-mix(in srgb, #08785f 8%, var(--surface));
            font-size: 11px;
            font-weight: 600;
        }

        .avatar-save-status.is-saving {
            border-color: var(--border);
            color: var(--muted);
            background: var(--surface-soft);
        }

        .avatar-builder {
            display: grid;
            grid-template-columns: 205px minmax(0, 1fr);
            gap: 20px;
            margin-top: 16px;
        }

        .avatar-preview-card {
            display: flex;
            position: sticky;
            top: 16px;
            align-self: start;
            min-height: 274px;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: color-mix(in srgb, #f5e9dc 72%, var(--surface));
        }

        .avatar-preview {
            display: grid;
            place-items: end center;
            width: 100%;
            min-height: 218px;
            padding: 12px 9px 0;
            background: radial-gradient(circle at 50% 18%, #fff7ef 0, #f5e9dc 50%, #ead3c2 100%);
        }

        .avatar-preview .avatar-art { display: block; width: min(194px, 100%); height: auto; aspect-ratio: 12 / 13; }

        .avatar-preview-caption {
            display: grid;
            width: 100%;
            gap: 3px;
            padding: 12px 14px 14px;
            border-top: 1px solid color-mix(in srgb, #8f6c5a 18%, transparent);
            background: color-mix(in srgb, #fffaf5 66%, var(--surface));
        }

        .avatar-preview-caption strong { color: #49342d; font-size: 13px; font-weight: 600; }
        .avatar-preview-caption span { color: #80665a; font-size: 11px; line-height: 1.35; }

        .avatar-controls {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-content: start;
            gap: 16px 14px;
        }

        .avatar-control-group { min-width: 0; }
        .avatar-control-group--wide { grid-column: 1 / -1; }
        .avatar-control-group h4 {
            margin: 0 0 8px;
            color: var(--muted);
            font-size: 11px;
            font-weight: 600;
        }

        .avatar-option-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .avatar-option-grid:not(.avatar-option-grid--swatches) {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
        }

        .avatar-option {
            display: inline-flex;
            min-width: 72px;
            min-height: 38px;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 5px 7px;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            background: var(--surface);
            font-size: 11px;
            line-height: 1.1;
            text-align: center;
        }

        .avatar-option:hover { background: var(--surface-hover); }
        .avatar-option[aria-checked="true"] {
            border-color: var(--accent);
            background: color-mix(in srgb, var(--accent) 9%, var(--surface));
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
        }

        .avatar-option--visual { flex-direction: column; min-width: 0; min-height: 86px; }
        .avatar-option-art { display: block; flex-shrink: 0; width: 52px; height: 57px; }
        .avatar-option--visual > span { max-width: 76px; }
        .avatar-option-grid--swatches { gap: 9px; }
        .avatar-option--swatch {
            width: 30px;
            min-width: 30px;
            height: 30px;
            min-height: 30px;
            padding: 0;
            border-radius: 50%;
        }

        .avatar-option--swatch span {
            width: 20px;
            height: 20px;
            border: 1px solid rgba(255, 255, 255, 0.36);
            border-radius: 50%;
        }

        .avatar-option--swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

        .sidebar-toggle-button {
            display: none !important;
            width: 40px;
            justify-content: center;
            padding: 0;
        }

        .page-title { min-width: 0; }
        .page-title strong { display: block; font-size: 13px; }
        .page-title span {
            display: block;
            overflow: hidden;
            color: var(--muted);
            font-size: 11px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .theme-button {
            width: auto;
            min-height: 32px;
            border: 1px solid var(--border);
            background: var(--surface);
        }

        .theme-star-button {
            display: grid;
            place-items: center;
            width: 40px;
            min-width: 40px;
            height: 40px;
            min-height: 40px;
            padding: 0;
            border-radius: 999px;
        }

        .theme-star-icon {
            width: 24px;
            height: 24px;
            fill: #f4b400;
            transition: fill 160ms ease, transform 160ms ease;
        }

        .theme-star-button:hover .theme-star-icon { transform: rotate(8deg) scale(1.05); }
        [data-theme="dark"] .theme-star-icon { fill: #7890ff; }

        .global-home-button {
            display: grid;
            place-items: center;
            width: 32px;
            min-width: 32px;
            min-height: 32px;
            padding: 0;
        }

        .study-timer {
            display: grid;
            min-width: 96px;
            padding: 2px 8px;
            border-left: 1px solid var(--border);
        }

        .study-timer span,
        .study-timer strong {
            display: block;
            line-height: 1.15;
        }

        .study-timer span {
            color: var(--muted);
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .study-timer strong {
            margin-top: 2px;
            font-size: 13px;
        }

        .workspace {
            position: relative;
            display: grid;
            grid-template-columns: minmax(380px, var(--paper-pane-size, 55%)) minmax(360px, 1fr);
            min-height: 0;
        }

        .mobile-paper-switcher {
            display: none;
        }

        .mobile-syllabus-switcher {
            display: none;
        }

        .workspace-resizer {
            position: absolute;
            z-index: 4;
            top: 0;
            bottom: 0;
            left: calc(var(--paper-pane-size, 55%) - 5px);
            display: grid;
            place-items: center;
            width: 10px;
            cursor: col-resize;
            touch-action: none;
        }

        .workspace-resizer span {
            width: 2px;
            height: 100%;
            background: transparent;
            transition: background 140ms ease;
        }

        .workspace-resizer:hover span,
        .workspace-resizer:focus-visible span,
        .workspace-resizer.dragging span {
            background: var(--accent);
        }

        .home-workspace {
            min-height: 0;
            overflow-y: auto;
            padding: 28px 32px 36px;
            background: var(--bg);
        }

        .subject-landing {
            display: grid;
            min-height: 0;
            overflow-y: auto;
            padding: clamp(36px, 8vh, 86px) 28px 48px;
            background: var(--surface);
        }

        .subject-landing-inner {
            display: grid;
            grid-template-columns: minmax(0, 0.95fr) minmax(380px, 1fr);
            gap: clamp(54px, 8vw, 116px);
            align-items: center;
            width: min(100%, 1080px);
            margin: auto;
        }

        .subject-landing-intro {
            align-self: stretch;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-width: 0;
        }

        .subject-landing-copy {
            max-width: 440px;
        }

        .subject-landing-copy p {
            margin: 18px 0 0;
            color: var(--muted);
            font-size: 15px;
            line-height: 1.55;
        }

        .subject-landing-copy h1 {
            margin: 0;
            max-width: 430px;
            font-size: clamp(38px, 4.4vw, 58px);
            font-weight: 700;
            letter-spacing: -0.045em;
            line-height: 1.02;
        }

        .atlas-character {
            width: min(100%, 500px);
            margin-top: 20px;
        }

        .atlas-character svg {
            display: block;
            width: 100%;
            height: auto;
            overflow: visible;
        }

        .atlas-study-line {
            fill: none;
            stroke: var(--study-color);
            stroke-width: 7;
            stroke-linecap: butt;
        }

        .atlas-study-line-tip {
            fill: var(--study-color);
        }

        .atlas-study-alignment-guide {
            stroke: transparent;
            stroke-width: 1;
            pointer-events: none;
        }

        .atlas-study-label {
            fill: var(--study-color);
            stroke: var(--study-color);
            stroke-width: 0.5;
            paint-order: stroke fill;
            font-family: var(--font-ui);
            font-size: 17px;
            font-weight: 700;
        }

        .atlas-character__badge { fill: #203b68; }
        .atlas-character__arrow {
            fill: #ffffff;
            stroke: #ffffff;
            stroke-width: 4;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .atlas-character__eyes circle { fill: #ffffff; }
        .atlas-character__eyes .atlas-character__pupil { fill: #17181c; }
        .atlas-character__star { fill: #f4b400; }

        .subject-choice-panel {
            width: 100%;
            max-width: 500px;
        }

        .subject-choice-panel h2 {
            margin: 0;
            font-size: 16px;
            font-weight: 700;
        }

        .subject-choice-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 12px;
        }

        .subject-manager-open,
        .subject-manager-close {
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            width: 34px;
            height: 34px;
            border: 1px solid var(--border);
            border-radius: 50%;
            color: var(--text);
            background: var(--surface);
        }

        .subject-manager-open:hover,
        .subject-manager-close:hover { background: var(--surface-soft); }

        .subject-manager-open svg,
        .subject-manager-close svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
        }

        .subject-manager {
            position: fixed;
            z-index: 60;
            inset: 0;
            display: grid;
            place-items: center;
            padding: 20px;
        }

        .subject-manager[hidden] { display: none; }

        .subject-manager-backdrop {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.55);
        }

        .subject-manager-dialog {
            position: relative;
            z-index: 1;
            width: min(100%, 480px);
            max-height: min(640px, calc(100vh - 40px));
            overflow-y: auto;
            padding: 22px;
            border: 1px solid var(--border);
            border-radius: 12px;
            color: var(--text);
            background: var(--surface);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
        }

        .subject-manager-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 18px;
        }

        .subject-manager-header h2 {
            margin: 0;
            font-size: 15px;
        }

        .subject-manager-header p {
            margin: 5px 0 0;
            color: var(--muted);
            font-size: 13px;
        }

        .subject-manager-list {
            display: grid;
            gap: 8px;
        }

        .subject-manager-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            min-height: 64px;
            padding: 12px 14px;
            border: 1px solid var(--border);
            border-radius: 8px;
        }

        .subject-manager-copy {
            min-width: 0;
            margin-right: auto;
        }

        .subject-level-options {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
        }

        .subject-level-button {
            display: grid;
            place-items: center;
            width: 28px;
            height: 28px;
            padding: 0;
            border: 1px solid var(--border);
            border-radius: 50%;
            color: #4b61ff;
            background: color-mix(in srgb, #4b61ff 10%, var(--surface));
            font-size: 8px;
            font-weight: 700;
            line-height: 1;
        }

        .subject-level-button:hover,
        .subject-level-button:focus-visible {
            border-color: #4b61ff;
            color: var(--text);
        }

        .subject-level-button.active {
            border-color: #4b61ff;
            color: #ffffff;
            background: #4b61ff;
        }

        [data-theme="dark"] .subject-level-button {
            color: #7889ff;
            background: color-mix(in srgb, #7889ff 12%, var(--surface));
        }

        [data-theme="dark"] .subject-level-button:hover,
        [data-theme="dark"] .subject-level-button:focus-visible,
        [data-theme="dark"] .subject-level-button.active {
            border-color: #7889ff;
        }

        [data-theme="dark"] .subject-level-button.active {
            color: #ffffff;
            background: #7889ff;
        }

        .subject-manager-row strong,
        .subject-manager-row span { display: block; }

        .subject-manager-row strong { font-size: 14px; }
        .subject-manager-row span { margin-top: 3px; color: var(--muted); font-size: 12px; }

        .subject-manager-toggle {
            min-width: 76px;
            padding: 8px 12px;
            border-radius: 7px;
            color: #ffffff;
            background: #4b61ff;
            font-size: 12px;
            font-weight: 700;
        }

        .subject-manager-toggle.remove {
            color: var(--text);
            background: var(--surface-soft);
        }

        .subject-list-empty {
            margin: 0;
            padding: 20px;
            border: 1px dashed var(--border);
            border-radius: 8px;
            color: var(--muted);
            background: var(--surface);
            font-size: 13px;
            line-height: 1.5;
        }

        .subject-landing .subject-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
            padding: 0;
        }

        .subject-choice {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            width: 100%;
            min-height: 78px;
            padding: 16px 18px;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            background: var(--surface);
            box-shadow: 0 2px 0 color-mix(in srgb, var(--border) 75%, transparent);
            text-align: left;
            transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
        }

        .subject-choice:hover {
            border-color: #8f9cff;
            background: color-mix(in srgb, #4b61ff 4%, var(--surface));
            transform: translateY(-1px);
        }

        .subject-choice.active {
            border-color: color-mix(in srgb, #4b61ff 65%, var(--border));
        }

        .subject-choice.coming-soon {
            cursor: default;
            opacity: 0.72;
        }

        .subject-choice.coming-soon:hover {
            border-color: var(--border);
            background: var(--surface);
            transform: none;
        }

        .subject-choice-status {
            flex: 0 0 auto;
            padding: 5px 8px;
            border-radius: 999px;
            color: var(--muted);
            background: var(--surface-soft);
            font-size: 11px;
            font-weight: 700;
        }

        .subject-choice:focus-visible {
            outline: 2px solid #4b61ff;
            outline-offset: 2px;
        }

        .subject-choice-copy,
        .subject-choice-copy strong,
        .subject-choice-copy span {
            display: block;
        }

        .subject-choice-copy strong {
            margin-bottom: 4px;
            font-size: 20px;
            font-weight: 700;
        }

        .subject-level-home {
            margin-left: 5px;
            color: #d44343;
            font-family: var(--font-ui);
            font-size: 14px;
            font-style: italic;
            font-weight: 400;
        }

        .subject-choice-copy span {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.35;
        }

        .subject-choice > svg {
            flex: 0 0 auto;
            width: 20px;
            height: 20px;
            fill: none;
            stroke: #4b61ff;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .dashboard-workspace {
            --dashboard-accent: #4b61ff;
            position: relative;
            min-height: 0;
            overflow-y: auto;
            padding: 66px 32px 40px;
            background: var(--bg);
        }

        [data-theme="dark"] .dashboard-workspace { --dashboard-accent: #7889ff; }

        .settings-page {
            min-width: 0;
            overflow: auto;
            padding: clamp(28px, 5vw, 72px) clamp(18px, 5vw, 64px);
            background: var(--bg);
        }

        .find-question-page {
            min-width: 0;
            overflow: auto;
            padding: clamp(48px, 10vw, 120px) clamp(18px, 6vw, 72px);
            border: 1px solid #d7dbe2;
            border-radius: 16px;
            background: #ffffff;
        }

        [data-theme="dark"] .find-question-page {
            border-color: var(--border);
            background: var(--surface);
        }

        .find-question-page__inner {
            width: min(100%, 720px);
            margin: 0 auto;
        }

        .find-question-page h1 {
            margin: 0;
            color: var(--text);
            font-size: clamp(28px, 4vw, 42px);
            line-height: 1.1;
        }

        .find-question-page__copy {
            margin: 10px 0 24px;
            color: var(--muted);
            font-size: 14px;
        }

        .find-question-form {
            width: 100%;
            margin: 0;
        }

        .find-question-composer-mount {
            width: 100%;
            min-height: 48px;
        }

        .find-question-form .composer { width: min(calc(100% - 52px), 680px); margin: 0 auto; }

        .find-question-form #sendButton {
            display: grid;
            place-items: center;
            position: static;
            width: 36px;
            height: 36px;
            min-height: 36px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface-soft) !important;
            clip-path: none;
            filter: none;
            grid-column: 2;
            grid-row: 1;
            align-self: center;
        }

        .find-question-form #sendButton:hover,
        .find-question-form #sendButton:focus-visible {
            border-color: var(--accent);
            background: var(--surface-hover) !important;
        }

        .find-question-status {
            min-height: 20px;
            margin: 14px 2px;
            color: var(--muted);
            font-size: 12px;
        }

        .find-question-status.is-error { color: #b42318; }

        .find-question-results { display: grid; gap: 8px; }

        .find-question-result {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            width: 100%;
            padding: 14px 16px;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            background: var(--surface);
            text-align: left;
        }

        .find-question-result:hover,
        .find-question-result:focus-visible {
            border-color: var(--accent);
            background: var(--surface-hover);
        }

        .find-question-result__body {
            display: grid;
            gap: 4px;
            min-width: 0;
        }

        .find-question-result__body strong {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
        }

        .find-question-result__body span,
        .find-question-result__body small {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.35;
        }

        .find-question-result > .icon {
            width: 18px;
            height: 18px;
            flex: 0 0 auto;
            fill: none;
            stroke: var(--accent);
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1.8;
        }

        @media (max-width: 520px) {
            .find-question-page { padding: 36px 18px; }
            .find-question-form .composer { width: calc(100% - 52px); }
        }

        .settings-page__inner {
            width: min(100%, 760px);
            margin: 0 auto;
        }

        .settings-page__header {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 28px;
        }

        .settings-page__header p,
        .settings-card__copy p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
        }

        .settings-page__header h1 {
            margin: 2px 0 0;
            color: var(--text);
            font-size: clamp(28px, 4vw, 40px);
            line-height: 1.1;
        }

        .settings-page__back {
            display: grid;
            width: 40px;
            height: 40px;
            flex: 0 0 auto;
            place-items: center;
            border: 1px solid var(--border);
            border-radius: 12px;
            color: var(--text);
            background: var(--surface);
        }

        .settings-page__back:hover { background: var(--surface-hover); }
        .settings-page__back .icon { width: 18px; height: 18px; }

        .settings-card {
            padding: 22px;
            border: 1px solid var(--border);
            border-radius: 16px;
            background: var(--surface);
        }

        .settings-card__copy h2 {
            margin: 0 0 5px;
            color: var(--text);
            font-size: 17px;
        }

        .settings-toggle-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            margin-top: 22px;
            padding-top: 20px;
            border-top: 1px solid var(--border);
            color: var(--text);
            cursor: pointer;
        }

        .settings-toggle-row span {
            display: grid;
            gap: 4px;
        }

        .settings-toggle-row strong { font-size: 14px; }
        .settings-toggle-row small { color: var(--muted); font-size: 12px; line-height: 1.45; }

        .settings-toggle-row input {
            width: 42px;
            height: 24px;
            flex: 0 0 auto;
            accent-color: var(--accent);
        }

        .account-page {
            min-width: 0;
            overflow: auto;
            padding: clamp(24px, 4vw, 56px) clamp(18px, 5vw, 64px) 64px;
            background: var(--bg);
        }

        .account-page__inner {
            width: min(100%, 1080px);
            margin: 0 auto;
        }

        .account-page__header {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 16px;
            padding-bottom: 28px;
            border-bottom: 1px solid var(--border);
        }

        .account-page__back {
            display: grid;
            width: 40px;
            height: 40px;
            place-items: center;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            background: var(--surface);
        }

        .account-page__back:hover,
        .account-nav__item:hover,
        .account-action-list button:hover,
        .account-control-row button:hover { background: var(--surface-hover); }
        .account-page__back .icon { width: 18px; height: 18px; }

        .account-page__heading p,
        .account-kicker {
            margin: 0 0 5px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 600;
        }

        .account-page__heading h1 {
            margin: 0;
            color: var(--text);
            font-size: clamp(28px, 4vw, 40px);
            font-weight: 650;
            letter-spacing: -0.035em;
            line-height: 1.08;
        }

        .account-page__heading > span { color: var(--muted); font-size: 13px; }

        .account-page__identity {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px;
            min-width: 260px;
        }

        .account-layout {
            display: grid;
            grid-template-columns: 190px minmax(0, 1fr);
            gap: 36px;
            align-items: start;
            padding-top: 30px;
        }

        .account-nav {
            position: sticky;
            top: 20px;
            display: grid;
            gap: 10px;
        }

        .account-nav__item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 200px;
            min-width: 200px;
            min-height: 42px;
            gap: 9px;
            padding: 8px 14px;
            border: 0;
            border-radius: 22px;
            color: var(--text);
            background: color-mix(in srgb, var(--surface) 92%, var(--surface-soft));
            filter: drop-shadow(0 2px 3px rgb(15 23 42 / 16%));
            font: inherit;
            text-align: left;
            transition: background 160ms ease, transform 160ms ease;
        }

        .account-nav__item:hover,
        .account-nav__item:focus-visible,
        .account-nav__item.is-active { border-color: transparent; background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%); transform: translateY(-1px); }
        .account-nav__item svg,
        .account-action-list button > svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
        .account-nav__folder-icon { transform: none; animation: none; }
        .account-nav__folder-back { fill: #80b0e8; stroke: #5a86bb; }
        .account-nav__folder-front { fill: #b6d5f4; stroke: #5a86bb; }
        .account-nav__item .account-nav__xp-icon { color: #35b77c; fill: #35b77c; stroke: none; }
        .account-nav__item .account-nav__energy-icon { color: #b13be6; fill: #b13be6; stroke: none; }
        .account-nav__item .account-nav__atlas-icon { fill: #3e74b7; stroke: none; }
        .account-nav__atlas-icon path:last-child { fill: var(--surface); }
        .account-nav__avatar { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 50%; background: var(--surface-soft); }
        .account-nav__avatar .avatar-art { width: 36px; height: 36px; max-width: none; }
        .account-nav__item > span:last-child { margin: 0; color: inherit; font-family: var(--font-ui); font-size: 11px; font-weight: 600; line-height: normal; text-align: left; }
        .account-content { min-width: 0; }
        .account-panel { display: grid; gap: 18px; }
        .account-panel__heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
        .account-panel__heading h2 { margin: 0; color: var(--text); font-size: 25px; font-weight: 650; letter-spacing: -0.025em; }
        .account-panel__hint { color: var(--muted); font-size: 12px; }

        .account-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
        .account-metrics > div { display: grid; align-content: space-between; gap: 12px; min-height: 132px; padding: 17px; border-right: 1px solid var(--border); }
        .account-metrics > div:last-child { border-right: 0; }
        .account-metrics span, .account-metrics small { color: var(--muted); font-size: 12px; line-height: 1.35; }
        .account-metrics strong { color: var(--text); font-size: 28px; font-weight: 650; letter-spacing: -0.035em; }

        .account-action-list { display: grid; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
        .account-action-list button { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--border); color: var(--text); background: var(--surface); font: inherit; text-align: left; }
        .account-action-list button:last-child { border-bottom: 0; }
        .account-action-list button span { display: grid; gap: 4px; }
        .account-action-list button strong, .account-control-row strong { font-size: 13px; font-weight: 650; }
        .account-action-list button small, .account-control-row small { color: var(--muted); font-size: 12px; line-height: 1.4; }

        .account-card { padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
        .account-card__heading h3 { margin: 0; color: var(--text); font-size: 16px; font-weight: 650; }
        .account-card__heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
        .account-section-heading__actions { display: flex; align-items: center; gap: 9px; }
        .account-text-action { padding: 5px 0; border: 0; color: var(--accent); background: transparent; font: inherit; font-size: 12px; font-weight: 650; }
        .account-text-action:hover { color: var(--accent-hover); }

        .account-profile-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-top: 18px; }
        .account-profile-form label, .account-inline-form label { display: grid; gap: 6px; color: var(--text); font-size: 12px; font-weight: 600; }
        .account-profile-form input, .account-inline-form input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; outline: 0; color: var(--text); background: var(--bg); font: inherit; font-size: 13px; }
        .account-profile-form input:focus, .account-inline-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
        .account-readonly-field { display: grid; gap: 4px; min-height: 42px; padding: 2px 0; color: var(--text); font-size: 13px; }
        .account-readonly-field > span, .account-readonly-field small { color: var(--muted); font-size: 12px; }
        .account-primary-action { min-height: 42px; padding: 9px 14px; border: 0; border-radius: 8px; color: #fff; background: var(--accent); font: inherit; font-size: 13px; font-weight: 650; }
        .account-primary-action:hover { background: var(--accent-hover); }
        .account-control-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border); }
        .account-control-row > span { display: grid; gap: 4px; min-width: 0; }
        .account-control-row--static { justify-content: flex-start; }
        .account-secondary-action, .account-danger-action { flex: 0 0 auto; min-height: 40px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--surface); font: inherit; font-size: 12px; font-weight: 650; }
        .account-secondary-action:hover { background: var(--surface-hover); }
        .account-inline-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 12px; padding-top: 18px; margin-top: 16px; border-top: 1px solid var(--border); }
        .account-inline-form > p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 11px; }
        .account-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 0; border-top: 1px solid var(--border); color: var(--text); cursor: pointer; }
        .account-toggle-row:first-of-type { margin-top: 16px; }
        .account-toggle-row > span { display: grid; gap: 4px; min-width: 0; }
        .account-toggle-row strong { font-size: 13px; font-weight: 650; }
        .account-toggle-row small { color: var(--muted); font-size: 12px; line-height: 1.4; }
        .account-toggle-row input { width: 42px; height: 24px; flex: 0 0 auto; accent-color: var(--accent); }
        .account-preferences-note { min-height: 17px; margin: 2px 0 0; color: var(--muted); font-size: 11px; }
        .account-preferences-note.is-saving { color: var(--accent); }
        .account-device-section { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
        .account-device-section h3 { margin: 0; color: var(--text); font-size: 15px; font-weight: 650; }
        .account-device-section p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
        .account-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); background: color-mix(in srgb, var(--danger) 4%, var(--surface)); }
        .account-danger-zone h3 { margin: 0; color: var(--text); font-size: 15px; font-weight: 650; }
        .account-danger-zone p:not(.account-kicker) { max-width: 620px; margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
        .account-danger-action { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); color: var(--danger); }
        .account-danger-action:hover { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
        .account-privacy-section ul { display: grid; gap: 8px; margin: 16px 0; padding-left: 19px; color: var(--muted); font-size: 13px; line-height: 1.5; }
        .account-page__status { min-height: 20px; margin-top: 20px; }

        /* Atlas settings: the six supplied reference screens share one quiet, compact shell. */
        .account-page:has(.atlas-settings-shell) { padding: 28px 48px 64px; background: var(--surface); }
        .account-page:has(.atlas-settings-shell) .account-page__header { display: none; }
        .account-page:has(.atlas-settings-shell) .account-page__inner { width: min(100%, 940px); margin: 0 auto; }
        .atlas-settings-shell { display: grid; grid-template-columns: 154px minmax(0, 1fr); gap: 28px; align-items: start; }
        .atlas-settings-sidebar { position: sticky; top: 20px; padding-top: 7px; }
        .atlas-settings-sidebar h1 { margin: 0 0 17px; color: var(--text); font-size: 22px; font-weight: 650; letter-spacing: -0.03em; }
        .atlas-settings-search { display: flex; align-items: center; gap: 6px; min-height: 25px; padding: 0 9px; border-radius: 9px; color: var(--muted); background: var(--surface-soft); }
        .atlas-settings-search svg { width: 12px; height: 12px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
        .atlas-settings-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font: inherit; font-size: 10px; }
        .atlas-settings-search input::placeholder { color: var(--muted); opacity: .8; }
        .atlas-settings-nav { display: grid; gap: 2px; margin-top: 9px; }
        .atlas-settings-nav button { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 24px; padding: 4px 8px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font: inherit; font-size: 10px; font-weight: 500; text-align: left; }
        .atlas-settings-nav button:hover, .atlas-settings-nav button:focus-visible, .atlas-settings-nav button.is-active { color: var(--text); background: var(--surface-soft); outline: 0; }
        .atlas-settings-nav svg { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
        .atlas-settings-content { min-width: 0; padding-top: 9px; }
        .atlas-settings-panel { display: grid; gap: 30px; }
        .atlas-settings-heading h2, .atlas-settings-section h2, .atlas-settings-section h3, .atlas-how-it-works h3 { margin: 0; color: var(--text); font-size: 14px; font-weight: 650; letter-spacing: -0.02em; }
        .atlas-settings-heading p, .atlas-settings-section p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
        .atlas-settings-heading--split { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
        .atlas-settings-heading--split > span { color: var(--muted); font-size: 10px; }
        .atlas-settings-section { min-width: 0; }
        .atlas-settings-section__heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
        .atlas-outline-button, .atlas-danger-button, .atlas-primary-button, .atlas-upgrade-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 29px; padding: 6px 12px; border-radius: 9px; font: inherit; font-size: 10px; font-weight: 600; }
        .atlas-outline-button { border: 1px solid var(--border); color: var(--text); background: var(--surface); }
        .atlas-outline-button:hover { background: var(--surface-soft); }
        .atlas-outline-button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
        .atlas-danger-button { border: 0; color: #d04a4a; background: #fff0f0; }
        .atlas-danger-button:hover { background: #ffe3e3; }
        .atlas-primary-button { border: 0; color: #fff; background: #62b3df; }
        .atlas-primary-button:hover { background: #4ba3d2; }
        .atlas-text-button, .atlas-inline-link { padding: 0; border: 0; color: var(--muted); background: transparent; font: inherit; font-size: 10px; }
        .atlas-text-button:hover, .atlas-inline-link:hover { color: var(--text); text-decoration: underline; }
        .atlas-profile-card { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
        .atlas-profile-card__masthead { position: relative; height: 64px; background: var(--surface-soft); }
        .atlas-avatar-edit { position: absolute; top: 10px; right: 11px; display: grid; width: 22px; height: 22px; place-items: center; border: 0; border-radius: 6px; color: var(--text); background: transparent; }
        .atlas-avatar-edit:hover { background: rgb(0 0 0 / 5%); }
        .atlas-avatar-edit svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
        .atlas-profile-card__body { display: grid; grid-template-columns: 138px minmax(0, 1fr) minmax(280px, 1.35fr); gap: 14px; padding: 0 15px 17px; }
        .atlas-profile-avatar { position: relative; z-index: 1; width: 72px; height: 72px; margin-top: -36px; overflow: hidden; border: 3px solid var(--surface); border-radius: 50%; background: #d7f8e4; }
        .atlas-profile-avatar .avatar-art { width: 100%; height: 100%; }
        .atlas-profile-details { display: grid; align-content: start; gap: 4px; padding-top: 17px; }
        .atlas-profile-details strong { color: var(--text); font-size: 15px; font-weight: 650; }
        .atlas-profile-details span { color: var(--muted); font-size: 10px; }
        .atlas-profile-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding-top: 17px; }
        .atlas-profile-stats > div { min-height: 54px; padding: 9px 10px; border-radius: 9px; background: var(--surface-soft); }
        .atlas-profile-stats span { display: block; color: var(--muted); font-size: 9px; }
        .atlas-profile-stats strong { display: block; overflow: hidden; margin-top: 7px; color: var(--text); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
        .atlas-subject-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
        .atlas-subject-chips span { padding: 5px 9px; border-radius: 999px; color: var(--muted); background: var(--surface-soft); font-size: 10px; }
        .atlas-settings-billing { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 27px; border-top: 1px solid var(--border); }
        .atlas-theme-options { display: flex; gap: 20px; margin-top: 14px; }
        .atlas-theme-options button { display: grid; gap: 6px; padding: 0; border: 0; color: var(--muted); background: transparent; font: inherit; font-size: 10px; text-align: center; }
        .atlas-theme-preview { position: relative; display: grid; width: 94px; height: 63px; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; color: #101010; background: #fff; font-size: 17px; }
        .atlas-theme-options button.is-active .atlas-theme-preview { border-color: #222; box-shadow: inset 0 0 0 1px #222; }
        .atlas-theme-options button.is-active .atlas-theme-preview::after { content: ''; position: absolute; right: 7px; bottom: 7px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #111; }
        .atlas-theme-preview i { position: absolute; right: 0; bottom: 0; width: 38%; height: 48%; background: #111; }
        .atlas-theme-preview--dark { color: #fff; background: #101010; }
        .atlas-theme-preview--dark i { background: #fff; }
        .atlas-theme-preview--system { display: grid; grid-template-columns: 1fr 1fr; place-items: stretch; font-size: 15px; }
        .atlas-theme-preview--system b, .atlas-theme-preview--system i { display: grid; position: static; width: auto; height: auto; place-items: center; font-style: normal; font-weight: 500; }
        .atlas-theme-preview--system i { color: #fff; background: #111; }
        .atlas-personality-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 10px; max-width: 420px; }
        .atlas-personality-options button { min-height: 29px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--surface); font: inherit; font-size: 10px; text-align: left; }
        .atlas-personality-options button.is-active { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
        .atlas-settings-section textarea { display: block; width: 100%; min-height: 84px; margin-top: 10px; padding: 10px; resize: vertical; border: 0; border-radius: 6px; outline: 0; color: var(--text); background: var(--surface-soft); font: inherit; font-size: 10px; line-height: 1.5; }
        .atlas-settings-section textarea:focus { box-shadow: inset 0 0 0 1px #62b3df; }
        .atlas-form-footer { display: flex; align-items: center; justify-content: end; gap: 12px; margin-top: 7px; }
        .atlas-form-footer > span { margin-right: auto; color: var(--muted); font-size: 9px; }
        .atlas-memory-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
        .atlas-memory-heading input { width: 29px; height: 16px; flex: 0 0 auto; margin: 0; accent-color: #159dde; }
        .atlas-memory-row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 28px; margin-top: 14px; padding: 6px 9px; border: 0; border-radius: 6px; color: var(--text); background: var(--surface-soft); font: inherit; font-size: 10px; text-align: left; }
        .atlas-memory-row svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
        .atlas-memory-manager { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 20px; }
        .atlas-memory-manager[hidden] { display: none !important; }
        .atlas-memory-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgb(8 11 18 / 58%); }
        .atlas-memory-dialog { position: relative; z-index: 1; display: grid; gap: 18px; width: min(100%, 500px); max-height: min(660px, calc(100vh - 40px)); overflow: auto; padding: 22px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--surface); box-shadow: 0 8px 24px rgb(0 0 0 / 16%); }
        .atlas-memory-dialog__header, .atlas-memory-dialog__footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
        .atlas-memory-dialog__header h2 { margin: 0; color: var(--text); font-size: 17px; font-weight: 650; }
        .atlas-memory-dialog__header p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
        .atlas-memory-close { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 7px; color: var(--muted); background: transparent; }
        .atlas-memory-close:hover { color: var(--text); background: var(--surface-soft); }
        .atlas-memory-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
        .atlas-memory-list { display: grid; gap: 8px; min-height: 44px; }
        .atlas-memory-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; }
        .atlas-memory-item__copy { display: grid; gap: 3px; min-width: 0; margin-right: auto; }
        .atlas-memory-item__copy span { color: var(--text); font-size: 10px; line-height: 1.45; }
        .atlas-memory-item__copy small { color: var(--muted); font-size: 9px; }
        .atlas-memory-item__remove { padding: 0; border: 0; color: var(--muted); background: transparent; font: inherit; font-size: 9px; }
        .atlas-memory-item__remove:hover { color: var(--text); text-decoration: underline; }
        .atlas-memory-empty { display: grid; min-height: 70px; margin: 0; place-items: center; border: 1px dashed var(--border); border-radius: 8px; color: var(--muted); font-size: 10px; text-align: center; }
        .atlas-memory-form { display: grid; gap: 7px; padding-top: 3px; }
        .atlas-memory-form > label { color: var(--text); font-size: 10px; font-weight: 600; }
        .atlas-memory-form > div { display: flex; gap: 8px; }
        .atlas-memory-form input { min-width: 0; flex: 1; min-height: 29px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; outline: 0; color: var(--text); background: var(--surface); font: inherit; font-size: 10px; }
        .atlas-memory-form input:focus { border-color: #62b3df; box-shadow: 0 0 0 2px rgb(98 179 223 / 16%); }
        .atlas-memory-form input:disabled { cursor: not-allowed; opacity: .6; }
        .atlas-memory-dialog__footer { align-items: center; padding-top: 2px; border-top: 1px solid var(--border); }
        .atlas-memory-dialog__footer > span { min-height: 14px; color: var(--muted); font-size: 9px; }
        .atlas-memory-dialog__footer .atlas-danger-button:disabled { cursor: not-allowed; opacity: .5; }
        .atlas-compact-section { padding-bottom: 1px; }
        .atlas-compact-section .atlas-outline-button { margin-top: 9px; }
        .atlas-session-list { overflow: hidden; margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; }
        .atlas-session-list article { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
        .atlas-session-list article:last-child { border-bottom: 0; }
        .atlas-session-list article > svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: var(--muted); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
        .atlas-session-list article > div { display: grid; gap: 2px; min-width: 0; }
        .atlas-session-list strong { color: var(--text); font-size: 10px; font-weight: 600; }
        .atlas-session-list strong span { margin-left: 4px; padding: 1px 4px; border-radius: 4px; color: #3996c8; background: #e8f6fd; font-size: 8px; font-weight: 500; }
        .atlas-session-list small { color: var(--muted); font-size: 9px; }
        .atlas-session-list .atlas-text-button { margin-left: auto; }
        .atlas-empty-row { display: grid; min-height: 44px; margin-top: 10px; place-items: center; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-size: 10px; }
        .atlas-guardian-empty { display: grid; justify-items: center; min-height: 146px; padding: 26px; border: 1px dashed var(--border); border-radius: 8px; text-align: center; }
        .atlas-guardian-empty > svg { width: 29px; height: 29px; margin-bottom: 8px; fill: #aeb2b6; stroke: #aeb2b6; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.3; }
        .atlas-guardian-empty strong { color: var(--text); font-size: 11px; font-weight: 650; }
        .atlas-guardian-empty p { max-width: 290px; margin: 5px 0 10px; color: var(--muted); font-size: 9px; line-height: 1.4; }
        .atlas-upgrade-button { border: 0; color: #fff; background: #8b3de6; }
        .atlas-how-it-works { max-width: 610px; margin: 30px auto 0; text-align: center; }
        .atlas-how-it-works > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 16px; }
        .atlas-how-it-works article { display: grid; justify-items: center; align-content: start; }
        .atlas-how-icon { display: block; width: 44px; height: 44px; margin: 0 0 8px; object-fit: contain; }
        .atlas-how-it-works strong { color: var(--text); font-size: 10px; font-weight: 650; }
        .atlas-how-it-works p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
        .atlas-xp-chart { display: grid; height: 80px; margin-top: 10px; place-items: center; border-radius: 10px; color: var(--muted); background: var(--surface-soft); font-size: 11px; }
        .atlas-xp-heatmap { position: relative; display: flex; gap: 14px; width: min(100%, 560px); margin-top: 10px; padding: 8px 8px 17px; overflow: hidden; border-radius: 9px; background: var(--surface-soft); }
        .atlas-xp-heatmap__month { display: grid; flex: 0 0 50px; gap: 5px; }
        .atlas-xp-heatmap__month > span { color: var(--muted); font-size: 8px; line-height: 1; }
        .atlas-xp-heatmap__month > div { display: grid; grid-template-columns: repeat(4, 8px); grid-template-rows: repeat(7, 8px); grid-auto-flow: column; gap: 3px; }
        .atlas-xp-heatmap i { width: 8px; height: 8px; border-radius: 2px; background: #e5e7e9; }
        .atlas-xp-heatmap i.is-active { background: #a982ff; }
        .atlas-xp-heatmap__scrollbar { position: absolute; right: 17px; bottom: 6px; left: 17px; height: 6px; border-radius: 999px; background: #e1e3e5; }
        .atlas-xp-heatmap__scrollbar i { display: block; width: 78%; height: 100%; border-radius: inherit; background: #90959a; }
        .atlas-xp-legend { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 7px; color: var(--muted); font-size: 9px; }
        .atlas-xp-legend > span:last-child { display: flex; align-items: center; gap: 3px; }
        .atlas-xp-legend i { width: 8px; height: 8px; border-radius: 2px; background: #e5e7e9; }
        .atlas-xp-legend i:nth-of-type(2) { background: #d7c7ff; }.atlas-xp-legend i:nth-of-type(3) { background: #b99bff; }.atlas-xp-legend i:nth-of-type(4) { background: #9868e8; }
        .atlas-settings-status { min-height: 16px; margin: 0; color: var(--muted); font-size: 10px; }

        @media (max-width: 760px) {
            .atlas-settings-shell { grid-template-columns: 1fr; gap: 20px; }
            .atlas-settings-sidebar { position: static; padding: 0; }
            .atlas-settings-nav { display: flex; overflow-x: auto; gap: 4px; }
            .atlas-settings-nav button { width: auto; flex: 0 0 auto; white-space: nowrap; }
            .atlas-profile-card__body { grid-template-columns: 92px minmax(0, 1fr); }
            .atlas-profile-stats { grid-column: 1 / -1; }
        }

        @media (max-width: 520px) {
            .account-page:has(.atlas-settings-shell) { padding: 20px 14px 42px; }
            .atlas-profile-card__body { grid-template-columns: 1fr; }
            .atlas-profile-avatar { margin-top: -38px; }
            .atlas-profile-details { padding-top: 0; }
            .atlas-profile-stats { grid-column: auto; }
            .atlas-settings-section__heading, .atlas-settings-billing { align-items: start; flex-direction: column; }
            .atlas-how-it-works > div { grid-template-columns: 1fr; gap: 18px; }
            .atlas-theme-options { gap: 8px; }.atlas-theme-preview { width: 78px; }
        }

        .avatar-editor { min-width: 0; }
        .avatar-category-tabs, .avatar-filter-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
        .avatar-category-tabs { padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-soft); }
        .avatar-category-tabs button, .avatar-filter-tabs button { min-height: 34px; padding: 7px 10px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font: inherit; font-size: 12px; }
        .avatar-category-tabs button.is-active, .avatar-filter-tabs button.is-active { color: var(--text); background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
        .avatar-category-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; padding-top: 18px; }
        .avatar-category-panel .avatar-control-group--wide { grid-column: 1 / -1; }
        .avatar-filter-tabs { margin: -1px 0 10px; }
        .avatar-filter-tabs button { min-height: 30px; padding: 5px 8px; }
        .avatar-preview-card { position: sticky; top: 20px; }

        .dashboard-inner {
            position: relative;
            z-index: 1;
            width: min(100%, 1180px);
            margin: 0 auto;
            padding: 28px;
            border: 1px solid #d7dbe2;
            border-radius: 16px;
            background: rgb(255 255 255 / 84%);
            backdrop-filter: blur(2px);
            --text: #1f2328;
            --muted: #6b7280;
            --border: #d7dbe2;
            --surface: #ffffff;
            --surface-soft: #f4f6f8;
        }

        .dashboard-header {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 20px;
            padding-top: 16px;
            margin-bottom: 20px;
        }

        .dashboard-header p {
            margin: 0 0 5px;
            color: var(--muted);
            font-size: 12px;
        }

        .dashboard-subject-meta {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 8px;
        }

        .dashboard-subject-meta p {
            margin-bottom: 5px;
        }

        .dashboard-header h1 {
            margin: 0;
            font-size: clamp(25px, 3vw, 36px);
            line-height: 1.1;
        }

        .dashboard-title-row {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 9px;
        }

        .dashboard-level {
            color: #d44343;
            font-family: var(--font-ui);
            font-size: 20px;
            font-style: italic;
            font-weight: 400;
            line-height: 1;
        }

        .dashboard-subject-button {
            min-height: 38px;
            padding: 8px 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            background: var(--surface);
            font-weight: 700;
        }

        .dashboard-subject-button:hover {
            border-color: color-mix(in srgb, var(--dashboard-accent) 65%, var(--border));
            background: color-mix(in srgb, var(--dashboard-accent) 5%, var(--surface));
        }

        .dashboard-columns {
            display: grid;
            grid-template-columns: minmax(274px, 0.72fr) minmax(0, 1.5fr);
            grid-template-areas:
                "folders progress"
                "actions progress"
                "tracker progress";
            grid-template-rows: auto auto minmax(130px, 1fr);
            align-items: stretch;
            gap: 16px 24px;
            margin-bottom: 16px;
        }

        .dashboard-columns > .dashboard-tools,
        .dashboard-columns > .dashboard-grid {
            display: contents;
        }

        .dashboard-columns .folder-cluster { grid-area: folders; }
        .dashboard-columns .action-cluster { grid-area: actions; }
        .dashboard-columns .progress-card { grid-area: progress; min-width: 0; }
        .dashboard-columns .study-card { grid-area: tracker; min-width: 0; }
        .dashboard-columns .progress-card { align-self: start; }

        .dashboard-tools {
            display: contents;
        }

        .dashboard-tool-cluster { min-width: 0; }

        .dashboard-tool-heading {
            margin: 0 0 8px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 700;
            line-height: 1;
        }

        .folder-group {
            display: flex;
            align-items: end;
            flex: 0 0 auto;
            gap: 14px;
            width: min(100%, 274px);
        }

        .action-group {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            align-items: stretch;
            width: min(100%, 274px);
            min-width: 0;
        }

        .dashboard-columns .action-group {
            grid-template-columns: 1fr;
        }

        .dashboard-tool {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            min-height: 92px;
            padding: 13px 14px;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            background: var(--surface);
            box-shadow: 0 2px 0 color-mix(in srgb, var(--border) 75%, transparent);
            text-align: left;
            transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
        }

        .dashboard-tool:hover {
            border-color: color-mix(in srgb, var(--dashboard-accent) 65%, var(--border));
            background: color-mix(in srgb, var(--dashboard-accent) 5%, var(--surface));
            transform: translateY(-1px);
        }

        .dashboard-tool.is-active {
            border-color: color-mix(in srgb, var(--dashboard-accent) 65%, var(--border));
            background: color-mix(in srgb, var(--dashboard-accent) 5%, var(--surface));
        }

        .dashboard-tool strong,
        .dashboard-tool span { display: block; }
        .dashboard-tool > span {
            flex: 1 1 auto;
            min-width: 0;
            margin-top: 0;
            color: inherit;
        }
        .dashboard-tool strong { margin: 0; color: var(--text); font-size: 15px; }
        .dashboard-tool span { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.4; }

        .dashboard-tool > svg {
            flex: 0 0 auto;
            width: 20px;
            height: 20px;
            fill: none;
            stroke: var(--dashboard-accent);
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .action-tool {
            position: relative;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
            width: 100%;
            min-width: 0;
            min-height: 34px;
            padding: 4px 8px;
            border: 0;
            border-radius: 6px;
            box-shadow: none;
            background: transparent;
            overflow: visible;
        }

        .action-tool:hover {
            border-color: transparent;
            background: color-mix(in srgb, #d44343 6%, transparent);
        }

        .action-tool::before {
            display: none;
        }

        #homeOpenPracticeButton { --action-color: #D96D72; }
        #homeOpenSyllabusButton { --action-color: #3766B4; }
        #homeNewChatButton { --action-color: #203B68; }

        .action-group { align-items: flex-start; }

        .dashboard-workspace .action-folder-tool {
            width: 130px !important;
            min-width: 130px;
            min-height: 122px;
            flex: 0 0 122px;
            padding: 4px 0;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            background: transparent;
            overflow: visible;
        }

        .dashboard-workspace .action-folder-tool:hover,
        .dashboard-workspace .action-folder-tool:focus-visible {
            border-color: transparent;
            background: transparent;
            box-shadow: none;
        }

        .dashboard-workspace .action-folder-tool .folder-tool__visual { width: 130px; }

        .dashboard-workspace .action-folder-tool .folder-tool-label {
            width: 130px;
            max-width: 130px;
            text-align: center;
        }

        .dashboard-workspace .action-group {
            grid-template-columns: repeat(2, minmax(0, 130px));
            column-gap: 14px;
            row-gap: 12px;
            align-items: start;
        }

        .dashboard-tools .action-shelf-row {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 130px));
            gap: 12px 14px;
            align-items: start;
        }

        .atlas-review-button {
            display: grid;
            grid-column: 1 / -1;
            width: 274px;
            margin-top: 4px;
            padding: 0;
            border: 0;
            border-radius: 12px;
            color: var(--text);
            background: transparent;
            font: inherit;
            text-align: left;
            cursor: pointer;
        }

        .atlas-review-button__headline {
            display: flex;
            min-height: 48px;
            align-items: center;
            gap: 10px;
            padding: 0 14px;
            border-radius: 24px;
            background: var(--surface-soft);
            box-shadow: 0 3px 8px rgb(15 23 42 / 12%);
            font-weight: 600;
        }

        .atlas-review-button__headline svg {
            width: 23px;
            height: 23px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1.8;
        }

        .atlas-review-button__details {
            display: grid;
            gap: 9px;
            margin: 12px 0 0 20px;
            padding: 2px 0 2px 14px;
            border-left: 3px solid var(--border);
            color: var(--muted);
            font-size: 12px;
            line-height: 1.25;
        }

        .atlas-review-button__details span::before {
            content: '';
            display: inline-block;
            width: 6px;
            height: 6px;
            margin: 0 8px 1px 0;
            border-radius: 50%;
            background: #6f7b98;
        }

        .atlas-review-button:hover .atlas-review-button__headline,
        .atlas-review-button:focus-visible .atlas-review-button__headline {
            outline: 0;
            background: color-mix(in srgb, var(--surface-soft) 78%, #9fb3dc);
            transform: translateY(-1px);
        }

        .dashboard-columns > .atlas-launcher--quick-chat {
            width: 200px;
            min-width: 200px;
            align-self: start;
            margin: -10px auto 0;
        }

        .atlas-launcher__items {
            --atlas-menu-tone: color-mix(in srgb, var(--muted) 62%, var(--surface));
            display: grid;
            gap: 6px;
            margin: 4px 0 0 20px;
            padding: 3px 0 3px 8px;
            border-left: 3px solid #b8bbc1;
        }

        [data-theme="dark"] .atlas-launcher__items {
            border-left-color: #1f2328;
        }

        .atlas-launcher__items button {
            min-height: 18px;
        }

        .atlas-launcher__items button {
            width: max-content;
            max-width: 100%;
            padding: 0;
            border: 0;
            border-radius: 6px;
            color: var(--atlas-menu-tone);
            background: transparent;
            font: inherit;
            font-family: var(--font-ui);
            font-size: 16px;
            font-weight: 500;
            line-height: 1.3;
            text-align: left;
            cursor: pointer;
            transition: color 180ms ease, transform 180ms ease;
        }

        .atlas-launcher__items button:hover,
        .atlas-launcher__items button:focus-visible {
            outline: 0;
            color: var(--text);
            text-decoration: none;
            transform: translateY(-1px);
        }

        .atlas-launcher__items button.is-active {
            outline: 0;
            color: var(--text);
            text-decoration: none;
        }

        .action-tool > span { margin-top: 0; }

        .action-tool__icon {
            display: block !important;
            flex: 0 0 16px !important;
            width: 16px;
            height: 16px;
            margin: 0 !important;
            border-radius: 50%;
            background: #111111;
        }

        .action-tool__copy {
            flex: 1 1 auto !important;
            min-width: 0;
            margin-top: 0 !important;
            color: inherit !important;
        }

        .action-tool__copy strong {
            display: block;
            margin: 0;
            color: #111111;
            font-family: var(--font-ui);
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: 1;
        }

        [data-theme="dark"] .action-tool__icon {
            background: #F3F4F6;
        }

        [data-theme="dark"] .action-tool__copy strong {
            color: #F3F4F6;
        }

        /* React Bits Folder (JS + CSS), adapted for the static dashboard.
           The folders open on hover/focus only; the surrounding buttons retain
           the dashboard's existing direct-navigation click handlers. */
        .folder-tool {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 9px;
            flex: 0 0 130px;
            width: 130px;
            min-width: 130px;
            min-height: 100px;
            padding: 8px 8px 4px;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            background: transparent;
            overflow: visible;
            text-align: center;
        }

        .folder-tool > span,
        .folder-tool .folder,
        .folder-tool .folder span {
            margin-top: 0;
            color: inherit;
            font-size: inherit;
            line-height: normal;
        }

        .folder-tool:hover,
        .folder-tool:focus-visible {
            border-color: transparent;
            background: transparent;
            box-shadow: none;
            transform: translateY(-1px);
        }

        .folder-tool__visual {
            display: grid;
            flex: 0 0 90px;
            width: 100%;
            min-height: 90px;
            place-items: center;
            overflow: visible;
        }

        .folder-tool-label {
            display: block !important;
            flex: 0 0 auto !important;
            margin: 0 !important;
            color: #111111 !important;
            font-family: var(--font-ui);
            font-size: 20px !important;
            font-style: normal;
            font-weight: 400;
            line-height: 1;
            max-width: none;
            text-align: center;
            white-space: nowrap;
        }

        [data-theme="dark"] .folder-tool-label {
            color: #F3F4F6 !important;
        }

        .folder {
            position: relative;
            width: 130px;
            height: 90px;
            cursor: pointer;
            filter: drop-shadow(0 2px 3px rgb(15 23 42 / 16%));
            transform-origin: center bottom;
            transition: all 0.2s ease-in;
        }

        /* Quick chat is a regular control below the folder shelf. Keywords stays
           in the left slot of the lower shelf row. */
        .dashboard-tools .action-shelf-row--lower #homeKeywordsButton {
            grid-column: 1;
            grid-row: 1;
        }

        .dashboard-columns > .dashboard-home-button,
        .dashboard-columns > .quick-chat-button {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 200px;
            min-width: 200px;
            min-height: 42px;
            align-self: center;
            margin: 0 auto;
            gap: 9px;
            padding: 8px 14px;
            border: 0;
            border-radius: 22px;
            color: var(--text);
            background: var(--surface-soft);
            filter: drop-shadow(0 2px 3px rgb(15 23 42 / 16%));
            text-align: left;
        }

        .dashboard-columns > .dashboard-home-button:hover,
        .dashboard-columns > .dashboard-home-button:focus-visible,
        .dashboard-columns > .quick-chat-button:hover,
        .dashboard-columns > .quick-chat-button:focus-visible {
            border-color: transparent;
            background: color-mix(in srgb, var(--surface-soft) 82%, var(--border));
            transform: translateY(-1px);
        }

        .dashboard-columns > .dashboard-home-button.is-active,
        .dashboard-columns > .quick-chat-button.is-active {
            border-color: transparent;
            background: color-mix(in srgb, var(--surface-soft) 82%, var(--border));
        }

        .dashboard-home-button-icon,
        .quick-chat-button-icon {
            display: grid !important;
            flex: 0 0 22px !important;
            width: 22px;
            height: 22px;
            margin: 0 !important;
            place-items: center;
            color: #777b80;
        }

        .dashboard-home-button-icon svg,
        .quick-chat-button-icon svg {
            width: 22px;
            height: 22px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1.8;
        }

        .dashboard-home-button-label,
        .quick-chat-button-label {
            display: block !important;
            width: auto !important;
            max-width: none !important;
            margin: 0 !important;
            color: var(--text) !important;
            font-family: var(--font-ui) !important;
            font-size: 15px !important;
            font-weight: 700 !important;
            line-height: 1.2 !important;
        }

        .folder__back {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 0 10px 10px 10px;
            background: var(--folder-back-color);
        }

        .folder__back::after {
            position: absolute;
            z-index: 0;
            bottom: 98%;
            left: 0;
            width: 30px;
            height: 10px;
            border-radius: 5px 5px 0 0;
            background: var(--folder-back-color);
            content: '';
        }

        .folder__back .paper {
            position: absolute;
            z-index: 2;
            bottom: 10%;
            left: 50%;
            width: 70%;
            height: 80%;
            border-radius: 10px;
            background: var(--paper-1);
            transform: translate(-50%, 10%);
            transition: all 0.3s ease-in-out;
        }

        .folder__back .paper:nth-child(2) {
            width: 80%;
            height: 70%;
            background: var(--paper-2);
        }

        .folder__back .paper:nth-child(3) {
            width: 90%;
            height: 60%;
            background: var(--paper-3);
        }

        .folder__back .folder__front {
            position: absolute;
            inset: 0;
            z-index: 3;
            width: 100%;
            height: 100%;
            border-radius: 5px 10px 10px 10px;
            background: var(--folder-color);
            transform-origin: bottom;
            transition: all 0.3s ease-in-out;
        }

        .folder__back .folder__front.right {
            z-index: 4;
        }

        .folder-stamp {
            position: absolute;
            z-index: 6;
            top: 7px;
            right: 8px;
            display: block;
            font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
            font-size: 26px;
            line-height: 1;
            text-shadow:
                -1px -1px 0 #ffffff,
                1px -1px 0 #ffffff,
                -1px 1px 0 #ffffff,
                1px 1px 0 #ffffff,
                0 1px 2px rgb(15 23 42 / 22%);
            pointer-events: none;
        }

        .folder__front-label {
            display: none;
            position: absolute;
            top: 14px;
            right: 14px;
            left: auto;
            z-index: 5;
            display: grid;
            place-items: center;
            width: max-content;
            max-width: calc(100% - 28px);
            height: auto;
            padding: 0;
            color: #ffffff !important;
            font-size: 11px;
            font-weight: 700;
            font-style: normal;
            line-height: 1.05;
            text-align: right;
            white-space: normal;
            transform: none !important;
            transform-origin: right center;
            transition: transform 0.3s ease-in-out;
            pointer-events: none;
        }

        .folder-tool:hover:not(:focus) .folder {
            transform: translateY(-8px);
        }

        .folder-tool:hover:not(:focus) .folder .paper {
            transform: translate(-50%, 0%);
        }

        .folder-tool:hover:not(:focus) .folder .folder__front {
            transform: skew(15deg) scaleY(0.6);
        }

        .folder-tool:hover:not(:focus) .folder .folder__front.right {
            transform: skew(-15deg) scaleY(0.6);
        }

        .folder-tool:hover:not(:focus) .folder__front-label {
            transform: translateY(18px) scaleY(0.6) !important;
        }

        .folder-tool:focus-visible .folder__back {
            outline: 2px solid var(--dashboard-accent);
            outline-offset: 4px;
        }

        @media (max-width: 960px) {
            .folder-tool {
                min-height: 100px;
            }
        }

        .dashboard-grid {
            display: contents;
        }

        .progress-card,
        .study-card {
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
        }

        .progress-card,
        .study-card {
            display: flex;
            flex-direction: column;
            padding: 20px;
        }

        .progress-card { container-type: inline-size; }

        .study-card {
            position: relative;
            overflow: hidden;
        }

        .study-card > h2,
        .study-card > p { max-width: 62%; }

        .study-card-mascot {
            position: absolute;
            top: 12px;
            right: 10px;
            width: 112px;
            height: 96px;
            overflow: visible;
        }

        .study-card-mascot__badge { fill: #203b68; }
        [data-theme="dark"] .study-card-mascot__badge { fill: #2e4d7d; }

        .study-card-mascot__arrow {
            fill: #ffffff;
            transform-box: fill-box;
            transform-origin: center;
            animation: tracker-arrow-turn 8s steps(8, end) infinite;
        }

        @keyframes tracker-arrow-turn {
            to { transform: rotate(360deg); }
        }

        .progress-card {
            overflow: hidden;
            padding: 0;
            border-radius: 14px;
        }

        .progress-card-windowbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 34px;
            padding: 7px 12px 7px 16px;
            color: #ffffff;
            background: color-mix(in srgb, var(--dashboard-accent) 78%, var(--dashboard-navy));
        }

        .progress-card-windowbar h2 {
            margin: 0;
            color: inherit;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0;
            line-height: 1.2;
        }

        .progress-card-window-tools {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .progress-card-window-tools i {
            display: block;
            width: 6px;
            height: 6px;
            border: 1px solid rgb(255 255 255 / 72%);
            border-radius: 50%;
        }

        .progress-card-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 24px;
            padding: 13px 18px 12px;
            border-bottom: 1px solid var(--border);
        }

        .progress-card-title { min-width: 0; }
        .progress-card-header .progress-card-title p { margin: 0; }

        .progress-card-eyebrow {
            display: block;
            margin-bottom: 7px;
            color: var(--dashboard-accent);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.08em;
            line-height: 1;
            text-transform: uppercase;
        }

        .progress-card h2,
        .study-card h2 {
            margin: 0;
            color: var(--text);
            font-size: 19px;
            font-weight: 600;
            letter-spacing: -0.02em;
        }

        .progress-card p,
        .study-card p {
            margin: 6px 0 0;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.4;
        }

        .progress-card-score {
            flex: 0 0 auto;
            min-width: 124px;
            padding: 11px 13px 10px;
            border: 1px solid color-mix(in srgb, var(--dashboard-accent) 25%, var(--border));
            border-radius: 10px;
            background: color-mix(in srgb, var(--dashboard-accent) 7%, var(--surface));
            text-align: right;
        }

        .progress-card-score-label {
            display: block;
            color: var(--muted);
            font-size: 10px;
            font-weight: 600;
            line-height: 1.2;
        }

        .paper-progress-summary {
            display: block;
            margin-top: 4px;
            color: var(--dashboard-accent);
            font-size: 20px;
            font-weight: 700;
            letter-spacing: -0.03em;
            line-height: 1;
            white-space: nowrap;
        }

        .progress-card-guide {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 36px;
            padding: 8px 22px;
            border-bottom: 1px solid var(--border);
            color: var(--muted);
            background: color-mix(in srgb, var(--dashboard-accent) 3%, var(--surface));
            font-size: 11px;
        }

        .progress-card-guide-key {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: var(--text);
            font-weight: 600;
        }

        .progress-card-guide-key i {
            display: inline-block;
            width: 9px;
            height: 9px;
            border-radius: 3px;
            background: var(--dashboard-accent);
        }

        .paper-progress-chart {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 14px 18px 18px;
        }

        .paper-year-group {
            display: block;
            min-width: 0;
            overflow: visible;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }

        .paper-year-header {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            min-height: 0;
            padding: 0 2px 5px;
            border: 0;
            background: transparent;
        }

        .paper-year-header strong {
            color: var(--dashboard-navy);
            font-size: 15px;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1;
        }

        .paper-year-header span {
            color: var(--muted);
            font-size: 10px;
            line-height: 1.25;
        }

        .paper-year-months {
            min-width: 0;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: color-mix(in srgb, var(--dashboard-accent) 2%, var(--surface));
        }

        .paper-month-row {
            display: grid;
            grid-template-columns: 100px minmax(0, 1fr);
            gap: 10px;
            align-items: center;
            min-height: 38px;
            padding: 4px 10px;
        }

        .paper-month-row + .paper-month-row { border-top: 1px solid var(--border); }

        .paper-month-label {
            color: var(--text);
            font-size: 11px;
            font-weight: 600;
        }

        .paper-series-cells { display: flex; flex-wrap: wrap; gap: 6px; }

        .paper-progress-cell {
            display: inline-grid;
            min-width: 34px;
            width: 34px;
            height: 30px;
            place-items: center;
            padding: 0;
            border: 1px solid color-mix(in srgb, var(--dashboard-accent) 28%, var(--border));
            border-radius: 6px;
            color: var(--dashboard-accent);
            background: color-mix(in srgb, var(--dashboard-accent) 7%, var(--surface));
            font-size: 12px;
            font-style: normal;
            font-weight: 700;
            transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
        }

        .paper-progress-cell:hover,
        .paper-progress-cell:focus-visible {
            border-color: var(--dashboard-accent);
            background: color-mix(in srgb, var(--dashboard-accent) 15%, var(--surface));
            transform: translateY(-1px);
        }

        .paper-progress-cell.done {
            border-color: var(--dashboard-accent);
            color: #ffffff;
            background: var(--dashboard-accent);
        }

        .paper-progress-cell.placeholder { cursor: default; opacity: 0.56; }

        .paper-progress-empty {
            grid-column: 1 / -1;
            padding: 20px 0;
            color: var(--muted);
            font-size: 13px;
        }

        [data-theme="dark"] .paper-year-header strong { color: #f0eee7; }

        @media (max-width: 760px) {
            .progress-card-header { gap: 16px; padding: 18px; }
            .progress-card-guide { padding-inline: 18px; }
            .paper-progress-chart { padding: 14px 18px 18px; }
        }

        @media (max-width: 560px) {
            .progress-card-header { flex-direction: column; }
            .progress-card-score { width: 100%; text-align: left; }
            .paper-progress-chart { gap: 10px; padding-inline: 14px; }
            .paper-month-row { grid-template-columns: 86px minmax(0, 1fr); }
        }

        /* One quiet square per uploaded question. */
        .syllabus-topic-section .syllabus-subtopic-entry {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(168px, 300px);
            column-gap: 18px;
            padding: 8px 0 12px 46px;
        }

        .syllabus-topic-section .syllabus-subtopic-row {
            grid-column: 1;
            min-width: 0;
        }

        .syllabus-topic-section .syllabus-subtopic-row summary {
            padding: 2px 0 8px;
        }

        .syllabus-topic-section .syllabus-subtopic-detail { padding-left: 52px; }

        .syllabus-topic-section .syllabus-subtopic-check {
            position: absolute;
            top: 11px;
            left: 0;
            z-index: 1;
            width: 32px;
            min-height: 32px;
            border-color: #85c9a4;
            color: #23855c;
            background: #effaf3;
        }

        .syllabus-topic-section .syllabus-subtopic-check:hover {
            border-color: #23855c;
            color: #176b48;
            background: #e3f6ea;
        }

        .syllabus-topic-section .syllabus-subtopic-check.checked {
            border-color: #23855c;
            color: white;
            background: #2f9b68;
        }

        .syllabus-subtopic-actions,
        .syllabus-subtopic-questions { display: none; }

        .syllabus-question-trail {
            grid-column: 2;
            grid-row: 1;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            justify-content: flex-end;
            gap: 7px;
            padding-top: 2px;
        }

        .syllabus-question-block {
            position: relative;
            display: grid;
            width: 32px;
            height: 32px;
            place-items: center;
            border: 1px solid #c9ccff;
            border-radius: 7px;
            color: #5360b5;
            background: #f1f2ff;
            font-family: inherit;
            font-size: 10px;
            font-weight: 700;
            line-height: 1;
        }

        .syllabus-question-block:hover {
            border-color: var(--accent);
            color: var(--accent);
            background: #e8eaff;
        }

        .syllabus-question-block.needs-work {
            border-color: #e9c38a;
            color: #9b6a25;
            background: #fff3df;
        }

        .syllabus-question-block.passed {
            border-color: #8fcba9;
            color: #277a55;
            background: #e9f7ee;
        }

        .syllabus-question-flag {
            position: absolute;
            top: -15px;
            left: 15px;
            width: 2px;
            height: 17px;
            background: #2f8f62;
        }

        .syllabus-question-flag::after {
            position: absolute;
            top: 0;
            left: 2px;
            width: 9px;
            height: 6px;
            background: #83c99f;
            content: '';
        }

        .syllabus-question-empty {
            color: var(--muted);
            font-size: 12px;
            line-height: 32px;
        }

        @media (max-width: 760px) {
            .syllabus-topic-section .syllabus-subtopic-entry {
                grid-template-columns: minmax(0, 1fr);
                row-gap: 8px;
            }

            .syllabus-question-trail {
                grid-column: 1;
                grid-row: 2;
                justify-content: flex-start;
                padding-left: 52px;
            }
        }

        /* History card final overrides (kept after the dashboard skin rules). */
        .dashboard-columns .history-card {
            width: min(100%, var(--folder-row-width));
            min-height: 0;
            padding: 14px;
            gap: 0;
            overflow: hidden;
        }

        .history-card-header,
        .history-current,
        .history-list-heading,
        .history-entry { display: flex; align-items: center; }
        .history-card-header { justify-content: space-between; gap: 10px; margin-bottom: 10px; }
        .history-card-kicker { display: block; margin-bottom: 2px; color: var(--muted); font-size: 10px; line-height: 1; }
        .history-card h2 { color: var(--text); font-size: 18px; line-height: 1.1; }
        .history-card-today { color: var(--muted); font-size: 10px; white-space: nowrap; }
        .history-current { gap: 9px; min-width: 0; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--dashboard-accent) 22%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--dashboard-accent) 7%, var(--surface)); }
        .history-current-icon, .history-entry-icon { display: inline-grid; flex: 0 0 auto; place-items: center; color: var(--dashboard-accent); }
        .history-current-icon { width: 25px; height: 25px; border-radius: 7px; background: color-mix(in srgb, var(--dashboard-accent) 16%, var(--surface)); }
        .history-current-icon .icon { width: 15px; height: 15px; }
        .history-current-copy, .history-entry-copy { min-width: 0; }
        .history-current-copy { display: grid; gap: 2px; }
        .history-current-copy strong { color: var(--text); font-size: 12px; font-weight: 600; }
        .history-current-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
        .history-current > time { margin-left: auto; color: var(--text); font-size: 15px; font-weight: 700; }
        .history-list-heading { justify-content: space-between; margin: 13px 0 5px; color: var(--muted); font-size: 10px; font-weight: 600; }
        .history-sample-notice { color: #a76b00; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
        .history-list { display: grid; gap: 1px; min-width: 0; }
        .history-entry { gap: 7px; min-width: 0; padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent); }
        .history-entry-dot { display: inline-grid; flex: 0 0 15px; width: 15px; height: 15px; place-items: center; border-radius: 50%; }
        .history-entry-dot--done { background: #e1b52e; color: #ffffff; }
        .history-entry-dot--done .icon { width: 10px; height: 10px; }
        .history-entry-dot--sample { border: 1px solid #b8bcc2; background: transparent; }
        .history-entry-icon { width: 19px; height: 19px; color: var(--muted); }
        .history-entry-icon .icon { width: 16px; height: 16px; }
        .history-entry-copy { display: grid; gap: 1px; }
        .history-entry-copy strong { overflow: hidden; color: var(--text); font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
        .history-entry-copy small, .history-entry-copy em { overflow: hidden; color: var(--muted); font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
        .history-entry-copy em { color: color-mix(in srgb, var(--dashboard-accent) 75%, var(--muted)); }
[data-theme="dark"] .history-sample-notice { color: #f0c45b; }

/* Legacy history layout overrides retained for shared dashboard spacing. */
.dashboard-columns .history-card {
    grid-template-columns: max-content minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
}
.dashboard-columns .history-card .history-card-header {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
}
.dashboard-columns .history-card .history-list-heading {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 0 5px !important;
}
.dashboard-columns .history-card .history-carousel-mount {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 440px;
    max-width: 100%;
    min-width: 0;
}
@media (max-width: 620px) {
    .dashboard-columns .history-card {
        display: flex !important;
        width: min(100%, var(--folder-row-width)) !important;
        flex-direction: column;
    }
    .dashboard-columns .history-card .history-carousel-mount {
        width: 100%;
    }
}

        /* Group study history by day while keeping the compact desktop layout. */
        @media (min-width: 621px) {
            .dashboard-columns .history-card {
                width: min(100%, 760px) !important;
                grid-template-columns: 250px minmax(0, 1fr) !important;
                grid-template-rows: auto minmax(0, 1fr) !important;
                align-items: stretch;
                column-gap: 16px;
                row-gap: 7px;
                padding: 12px 14px;
            }

            .history-card-header {
                grid-column: 1;
                grid-row: 1;
                min-width: 0;
                align-self: auto;
                align-items: baseline !important;
                flex-direction: row !important;
                margin: 0;
                padding: 0 !important;
            }

            .history-current {
                grid-column: 1;
                grid-row: 2;
                align-self: stretch;
                width: 100%;
            }

            .history-list-heading {
                grid-column: 2;
                grid-row: 1;
                align-self: end;
                margin: 0 0 1px;
            }

            .history-list {
                grid-column: 2;
                grid-row: 2;
                display: flex !important;
                align-items: stretch;
                gap: 8px;
                min-width: 0;
                overflow-x: auto;
                overflow-y: hidden;
                padding-bottom: 2px;
                scrollbar-width: thin;
            }
        }

        .history-day {
            display: flex;
            flex: 0 0 214px;
            min-width: 214px;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
            border-radius: 8px;
            background: color-mix(in srgb, var(--surface) 90%, var(--surface-soft));
        }

        .history-day > header {
            display: flex;
            align-items: center;
            min-height: 29px;
            padding: 6px 9px;
            border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
            background: color-mix(in srgb, var(--dashboard-accent) 8%, var(--surface-soft));
        }

        .history-day > header strong {
            color: var(--text);
            font-size: 11px;
            font-weight: 700;
        }

        .history-day-items { display: grid; min-width: 0; }

        .history-day-item {
            display: flex;
            align-items: center;
            gap: 7px;
            min-width: 0;
            padding: 7px 9px;
        }

        .history-day-item + .history-day-item { border-top: 1px solid color-mix(in srgb, var(--border) 62%, transparent); }
        .history-day-item-icon { display: inline-grid; flex: 0 0 16px; width: 16px; height: 16px; place-items: center; color: var(--muted); }
        .history-day-item-icon .icon { width: 14px; height: 14px; }
        .history-day-item > span:last-child { display: grid; min-width: 0; gap: 1px; }
        .history-day-item strong { overflow: hidden; color: var(--text); font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
        .history-day-item small { color: var(--muted); font-size: 9px; line-height: 1.2; }
        .history-day--sample { border-style: dashed; }
        .history-day--sample > header { background: color-mix(in srgb, var(--dashboard-accent) 13%, var(--surface-soft)); }

        @media (max-width: 620px) {
            .dashboard-columns .history-card {
                width: min(100%, var(--folder-row-width)) !important;
                display: flex !important;
                flex-direction: column;
                gap: 0;
            }

            .history-list {
                display: flex !important;
                gap: 8px;
                overflow-x: auto;
                overflow-y: hidden;
                padding-bottom: 2px;
            }

            .history-day { flex-basis: 214px; }
        }

        /* Carousel-style history shelf: day boxes snap horizontally without changing the dashboard language. */
        .dashboard-columns .history-card {
            grid-template-columns: minmax(0, 1fr) !important;
            grid-template-rows: auto auto auto !important;
            row-gap: 7px;
            overflow: hidden;
        }

        .history-card-header { grid-column: 1 !important; grid-row: 1 !important; }
        .history-list-heading { grid-column: 1 !important; grid-row: 2 !important; margin: 0 !important; }
        .history-carousel {
            position: relative;
            grid-column: 1;
            grid-row: 3;
            min-width: 0;
            padding: 0 26px 18px;
        }

        .history-list {
            display: flex !important;
            gap: 8px;
            min-width: 0;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 1px 0 3px;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            scrollbar-width: thin;
            scrollbar-color: color-mix(in srgb, var(--dashboard-accent) 45%, var(--border)) transparent;
            touch-action: pan-x;
        }

        .history-day {
            flex: 0 0 min(214px, calc(100% - 8px));
            scroll-snap-align: start;
        }

        .history-carousel-button {
            position: absolute;
            z-index: 2;
            top: 50%;
            display: grid;
            width: 24px;
            height: 24px;
            padding: 0;
            place-items: center;
            border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
            border-radius: 50%;
            color: var(--muted);
            background: color-mix(in srgb, var(--surface) 92%, var(--surface-soft));
            box-shadow: 0 1px 3px color-mix(in srgb, #000 14%, transparent);
            cursor: pointer;
            transform: translateY(-50%);
        }

        .history-carousel-button:hover:not(:disabled) {
            color: var(--dashboard-accent);
            border-color: color-mix(in srgb, var(--dashboard-accent) 42%, var(--border));
        }

        .history-carousel-button:disabled { cursor: default; opacity: .35; }
        .history-carousel-button .icon { width: 14px; height: 14px; }
        .history-carousel-button--previous { left: 0; }
        .history-carousel-button--next { right: 0; }

        .history-carousel-indicators {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            display: flex;
            justify-content: center;
            gap: 5px;
        }

        .history-carousel-indicator {
            width: 6px;
            height: 6px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: color-mix(in srgb, var(--muted) 30%, transparent);
            cursor: pointer;
        }

        .history-carousel-indicator.active {
            background: var(--dashboard-accent);
            transform: scale(1.2);
        }

        .history-carousel-indicator:focus-visible,
        .history-carousel-button:focus-visible {
            outline: 2px solid color-mix(in srgb, var(--dashboard-accent) 70%, transparent);
            outline-offset: 2px;
        }

        @media (max-width: 620px) {
            .history-carousel { padding-right: 24px; padding-left: 24px; }
            .history-day { flex-basis: min(214px, calc(100% - 4px)); }
        }

        /* Keep the progress window level with the two-column folder launcher. */
        .dashboard-columns {
            grid-template-areas:
                "folders progress"
                "actions progress"
                "history history";
            grid-template-rows: auto auto auto;
        }

        .dashboard-inner .progress-card { height: auto; min-height: 0; align-self: stretch; }

        .dashboard-columns .history-card {
            grid-area: history;
            width: 100%;
            display: grid;
            grid-template-columns: max-content minmax(210px, 250px) minmax(0, 1fr);
            align-items: start;
            column-gap: 14px;
            row-gap: 0;
        }

        .history-card-header { grid-column: 1; grid-row: 1 / span 2; align-items: flex-start; flex-direction: column; margin: 0; padding-top: 2px; }
        .history-current { grid-column: 2; grid-row: 1 / span 2; width: 100%; }
        .history-list-heading { grid-column: 3; grid-row: 1; margin: 0 0 5px; }
        .history-list { grid-column: 3; grid-row: 2; display: flex; min-width: 0; gap: 8px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--dashboard-accent) 45%, var(--border)) transparent; }
        .history-list .history-entry { flex: 1 0 190px; min-width: 190px; padding: 8px 9px; border: 1px solid color-mix(in srgb, var(--border) 82%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--surface) 82%, var(--surface-soft)); }

        @media (max-width: 620px) {
            .dashboard-columns { grid-template-areas: "folders" "actions" "progress" "history"; grid-template-rows: auto auto auto auto; }
            .dashboard-columns .history-card { display: flex; width: min(100%, var(--folder-row-width)); flex-direction: column; gap: 0; }
            .history-card-header, .history-current, .history-list-heading, .history-list { grid-column: auto; grid-row: auto; }
            .history-card-header { flex-direction: row; margin-bottom: 10px; }
            .history-list { display: grid; overflow: visible; }
            .history-list .history-entry { min-width: 0; }
        }

        /* Keep the progress window level with the two-column folder launcher. */
        .dashboard-columns {
            grid-template-areas:
                "folders progress"
                "actions progress"
                "history history";
            grid-template-rows: auto auto auto;
        }

        .dashboard-inner .progress-card {
            height: auto;
            min-height: 0;
            align-self: stretch;
        }

        .dashboard-columns .history-card {
            grid-area: history;
            width: 100%;
            display: grid;
            grid-template-columns: max-content minmax(210px, 250px) minmax(0, 1fr);
            align-items: start;
            column-gap: 14px;
            row-gap: 0;
        }

        .history-card-header {
            grid-column: 1;
            grid-row: 1 / span 2;
            align-items: center;
            flex-direction: column;
            margin: 0;
            padding-top: 2px;
        }

        .history-current {
            grid-column: 2;
            grid-row: 1 / span 2;
            width: 100%;
        }

        .history-list-heading {
            grid-column: 3;
            grid-row: 1;
            margin: 0 0 5px;
        }

        .history-list {
            grid-column: 3;
            grid-row: 2;
            display: flex;
            min-width: 0;
            gap: 8px;
            overflow-x: auto;
            scrollbar-width: thin;
            scrollbar-color: color-mix(in srgb, var(--dashboard-accent) 45%, var(--border)) transparent;
        }

        .history-list .history-entry {
            flex: 1 0 190px;
            min-width: 190px;
            padding: 8px 9px;
            border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
            border-radius: 8px;
            background: color-mix(in srgb, var(--surface) 82%, var(--surface-soft));
        }

        @media (max-width: 620px) {
            .dashboard-columns {
                grid-template-areas:
                    "folders"
                    "actions"
                    "progress"
                    "history";
                grid-template-rows: auto auto auto auto;
            }

            .dashboard-columns .history-card {
                display: flex;
                width: min(100%, var(--folder-row-width));
                flex-direction: column;
                gap: 0;
            }

            .history-card-header,
            .history-current,
            .history-list-heading,
            .history-list { grid-column: auto; grid-row: auto; }
            .history-card-header { flex-direction: row; margin-bottom: 10px; }
            .history-list { display: grid; overflow: visible; }
            .history-list .history-entry { min-width: 0; }
        }

        /* Compact activity history: a small, useful feed instead of a decorative timer card. */
        .dashboard-columns .history-card {
            width: min(100%, var(--folder-row-width));
            min-height: 0;
            padding: 14px;
            gap: 0;
            overflow: hidden;
            border-color: var(--border);
            background: var(--surface);
        }

        .history-card-header,
        .history-current,
        .history-list-heading,
        .history-entry {
            display: flex;
            align-items: center;
        }

        .history-card-header {
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 10px;
        }

        .history-card-kicker {
            display: block;
            margin-bottom: 2px;
            color: var(--muted);
            font-size: 10px;
            line-height: 1;
        }

        .history-card h2 {
            color: var(--text);
            font-size: 18px;
            line-height: 1.1;
        }

        .history-card-today {
            color: var(--muted);
            font-size: 10px;
            white-space: nowrap;
        }

        .history-current {
            gap: 9px;
            min-width: 0;
            padding: 9px 10px;
            border: 1px solid color-mix(in srgb, var(--dashboard-accent) 22%, var(--border));
            border-radius: 8px;
            background: color-mix(in srgb, var(--dashboard-accent) 7%, var(--surface));
        }

        .history-current-icon,
        .history-entry-icon {
            display: inline-grid;
            flex: 0 0 auto;
            place-items: center;
            color: var(--dashboard-accent);
        }

        .history-current-icon {
            width: 25px;
            height: 25px;
            border-radius: 7px;
            background: color-mix(in srgb, var(--dashboard-accent) 16%, var(--surface));
        }

        .history-current-icon .icon { width: 15px; height: 15px; }
        .history-current-copy,
        .history-entry-copy { min-width: 0; }
        .history-current-copy { display: grid; gap: 2px; }
        .history-current-copy strong { color: var(--text); font-size: 12px; font-weight: 600; }
        .history-current-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
        .history-current time,
        .history-current > time { margin-left: auto; color: var(--text); font-size: 15px; font-weight: 700; }

        .history-list-heading {
            justify-content: space-between;
            margin: 13px 0 5px;
            color: var(--muted);
            font-size: 10px;
            font-weight: 600;
        }

        .history-sample-notice {
            color: #a76b00;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .history-list { display: grid; gap: 1px; min-width: 0; }

        .history-entry {
            gap: 7px;
            min-width: 0;
            padding: 7px 0;
            border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
        }

        .history-entry-dot {
            display: inline-grid;
            flex: 0 0 15px;
            width: 15px;
            height: 15px;
            place-items: center;
            border-radius: 50%;
        }

        .history-entry-dot--done { background: #e1b52e; color: #ffffff; }
        .history-entry-dot--done .icon { width: 10px; height: 10px; }
        .history-entry-dot--sample { border: 1px solid #b8bcc2; background: transparent; }
        .history-entry-icon { width: 19px; height: 19px; color: var(--muted); }
        .history-entry-icon .icon { width: 16px; height: 16px; }
        .history-entry-copy { display: grid; gap: 1px; }
        .history-entry-copy strong { overflow: hidden; color: var(--text); font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
        .history-entry-copy small,
        .history-entry-copy em { overflow: hidden; color: var(--muted); font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
        .history-entry-copy em { color: color-mix(in srgb, var(--dashboard-accent) 75%, var(--muted)); }
        .history-entry--sample .history-entry-copy strong { color: color-mix(in srgb, var(--text) 78%, var(--muted)); }

        [data-theme="dark"] .history-sample-notice { color: #f0c45b; }

/* Final compact history layout. */
.dashboard-columns .history-card .history-carousel-mount {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 440px !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
@media (min-width: 621px) {
    .dashboard-columns .history-card {
        grid-template-columns: max-content minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
    }
    .dashboard-columns .history-card .history-card-header {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
    }
    .dashboard-columns .history-card .history-list-heading {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
}
@media (max-width: 620px) {
    .dashboard-columns .history-card .history-carousel-mount { width: 100% !important; }
}

@media (max-width: 620px) {
    .dashboard-columns .history-card { width: min(100%, var(--folder-row-width)); }
}

/* Home is a destination from the subject dashboard. The mascot/subject picker
   remains the separate first-run landing state above. */
.app-home-panel {
    min-height: 0;
    overflow-y: auto;
    padding: 34px 32px 48px;
    background: var(--bg);
}

.app-home-inner {
    display: grid;
    gap: 24px;
    width: min(100%, 1120px);
    margin: 0 auto;
}

.app-home-header,
.app-home-section-header,
.app-home-card-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.app-home-header {
    align-items: center;
    padding: 8px 0 4px;
}

.app-home-eyebrow {
    margin: 0 0 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.app-home-header h1,
.app-home-section-header h2,
.app-home-card-header h2 {
    margin: 0;
    color: var(--text);
}

.app-home-header h1 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.08;
}

.app-home-section-header h2,
.app-home-card-header h2 {
    font-size: 18px;
    line-height: 1.2;
}

.app-home-subtitle {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.app-home-secondary-button,
.app-home-link-button,
.app-home-card-action {
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    background: var(--surface);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

.app-home-secondary-button {
    padding: 9px 13px;
    white-space: nowrap;
}

.app-home-link-button {
    padding: 4px 0;
    border-color: transparent;
    color: var(--accent);
    background: transparent;
}

.app-home-card-action {
    padding: 7px 11px;
    color: var(--accent);
}

.app-home-secondary-button:hover,
.app-home-card-action:hover,
.app-home-link-button:hover,
.app-home-secondary-button:focus-visible,
.app-home-card-action:focus-visible,
.app-home-link-button:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: var(--surface-soft);
}

.app-home-section,
.app-home-card {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.app-home-subject-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.app-home-subject-card {
    display: grid;
    gap: 18px;
    min-height: 132px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    background: var(--bg);
    text-align: left;
}

.app-home-subject-card:hover,
.app-home-subject-card:focus-visible,
.app-home-subject-card.active {
    border-color: var(--accent);
    background: var(--surface-soft);
}

.app-home-subject-card.coming-soon {
    cursor: not-allowed;
    opacity: 0.58;
}

.app-home-subject-card-topline,
.app-home-subject-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.app-home-subject-card-topline strong {
    font-size: 15px;
}

.app-home-subject-level,
.app-home-subject-meta,
.app-home-subject-action,
.app-home-plan-summary span,
.app-home-continue-row > div span,
.app-home-progress-grid span {
    color: var(--muted);
    font-size: 12px;
}

.app-home-subject-meta {
    align-self: end;
}

.app-home-subject-action {
    justify-content: flex-start;
    color: var(--accent);
    font-weight: 600;
}

.app-home-subject-action svg,
.app-home-card-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.app-home-empty {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.app-home-content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.app-home-progress-card {
    grid-column: 1 / -1;
}

.app-home-status {
    padding: 5px 8px;
    border-radius: 999px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    font-size: 11px;
    font-weight: 600;
}

.app-home-continue-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-top: 20px;
}

.app-home-card-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 30px;
    border-radius: 8px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.app-home-continue-row > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.app-home-continue-row > div strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.app-home-plan-summary {
    display: grid;
    gap: 7px;
    margin-top: 20px;
}

.app-home-plan-summary strong {
    font-size: 14px;
}

.app-home-progress-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.app-home-progress-grid div {
    display: grid;
    gap: 5px;
    padding: 13px;
    border-radius: 8px;
    background: var(--surface-soft);
}

.app-home-progress-grid strong {
    color: var(--text);
    font-size: 22px;
    font-weight: 600;
}

@media (max-width: 820px) {
    .app-home-panel { padding: 24px 16px 36px; }
    .app-home-header { align-items: flex-start; flex-direction: column; }
    .app-home-subject-grid,
    .app-home-content-grid { grid-template-columns: 1fr; }
    .app-home-progress-card { grid-column: auto; }
}

@media (max-width: 520px) {
    .app-home-section-header { align-items: flex-start; flex-direction: column; gap: 10px; }
    .app-home-progress-grid { grid-template-columns: 1fr; }
    .app-home-continue-row { grid-template-columns: 34px minmax(0, 1fr); }
    .app-home-card-action { grid-column: 2; justify-self: start; }
}

/* Keep the Home pane in the same visual family as the dashboard sidebar. */
.app-home-panel {
    padding: 24px 28px 36px;
    background: var(--surface);
}

.app-home-inner {
    gap: 18px;
    width: min(100%, 1180px);
}

.app-home-header {
    align-items: center;
    padding: 4px 0 2px;
}

.app-home-eyebrow {
    margin-bottom: 3px;
    font-size: 11px;
}

.app-home-header h1 {
    font-family: var(--font-ui);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 400;
    letter-spacing: -0.02em;
}

.app-home-subtitle {
    margin-top: 5px;
    font-size: 13px;
}

.app-home-secondary-button,
.app-home-card-action {
    border: 0;
    border-radius: 22px;
    background: var(--surface-soft);
    filter: drop-shadow(0 2px 3px rgb(15 23 42 / 12%));
}

.app-home-secondary-button:hover,
.app-home-card-action:hover,
.app-home-secondary-button:focus-visible,
.app-home-card-action:focus-visible {
    border-color: transparent;
    background: color-mix(in srgb, var(--surface-soft) 82%, var(--border));
    transform: translateY(-1px);
}

.app-home-link-button {
    border: 0;
    border-radius: 22px;
    color: var(--muted);
    background: var(--surface-soft);
    padding: 8px 12px;
}

.app-home-link-button:hover,
.app-home-link-button:focus-visible {
    border-color: transparent;
    color: var(--text);
    background: color-mix(in srgb, var(--surface-soft) 82%, var(--border));
}

.app-home-section,
.app-home-card {
    padding: 16px;
    border: 0;
    border-radius: 16px;
    background: var(--surface-soft);
}

.app-home-section-header,
.app-home-card-header {
    align-items: center;
}

.app-home-section-header h2,
.app-home-card-header h2 {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 400;
}

.app-home-subject-grid {
    gap: 10px;
    margin-top: 12px;
}

.app-home-subject-card {
    min-height: 112px;
    gap: 12px;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: none;
}

.app-home-subject-card:hover,
.app-home-subject-card:focus-visible,
.app-home-subject-card.active {
    border: 0;
    background: color-mix(in srgb, var(--surface) 82%, var(--border));
    transform: translateY(-1px);
}

.app-home-subject-card-topline strong,
.app-home-continue-row > div strong,
.app-home-plan-summary strong {
    font-weight: 700;
}

.app-home-subject-action {
    color: var(--muted);
    font-size: 11px;
}

.app-home-subject-action svg { width: 16px; height: 16px; }

.app-home-status {
    color: var(--muted);
    background: var(--surface);
}

.app-home-continue-row {
    margin-top: 14px;
}

.app-home-card-icon {
    color: var(--muted);
    background: var(--surface);
}

.app-home-plan-summary {
    margin-top: 14px;
}

.app-home-progress-grid {
    gap: 10px;
    margin-top: 14px;
}

.app-home-progress-grid div {
    padding: 12px;
    border-radius: 12px;
    background: var(--surface);
}

.app-home-progress-grid strong {
    font-family: var(--font-ui);
    font-size: 22px;
    font-weight: 400;
}

@media (max-width: 820px) {
    .app-home-panel { padding: 20px 16px 30px; }
}

.app-home-paper-progress-card {
    width: 100%;
    min-height: 210px;
    border: 1px solid #d2d3d5;
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
    isolation: isolate;
}

[data-theme="dark"] .app-home-paper-progress-card {
    border-color: #4b4d52;
    background: #2b2d31;
}

.app-home-paper-progress-card .paper-progress-chart {
    min-height: 168px;
}

/* The Home progress block is a portrait card, matching the sidebar widget. */
.app-home-inner {
    width: 100%;
    margin: 0;
}

.app-home-paper-progress-card {
    width: min(100%, 260px);
    margin-left: auto;
    height: 360px;
    min-height: 0;
}

.app-home-paper-progress-card .paper-progress-chart {
    height: calc(100% - 42px);
    min-height: 0;
}

.app-home-paper-progress-card .paper-progress-page {
    grid-template-columns: 1fr;
}

.app-home-paper-progress-card .paper-progress-track {
    min-height: 0;
}

.app-home-paper-progress-card .paper-progress-page {
    min-height: 0;
}

        /* Atlas design system: restrained palette, shared rhythm, and clear hierarchy. */
        .dashboard-workspace {
            --dashboard-accent: #3766B4;
            --dashboard-navy: #203B68;
            --dashboard-purple: #BE70DC;
            --folder-row-width: 274px;
            padding: 66px 32px 40px;
        }

        [data-theme="dark"] .dashboard-workspace {
            --dashboard-accent: #7890FF;
            --dashboard-navy: #203B68;
            --dashboard-purple: #BE70DC;
        }

        [data-theme="dark"] .dashboard-inner {
            background: rgb(18 22 31 / 88%);
            --text: #f3f5f8;
            --muted: #aeb7c8;
            --border: #34415a;
            --surface: #151a26;
            --surface-soft: #222b3b;
        }

        .dashboard-header {
            position: relative;
            padding-top: 42px;
            margin-bottom: 28px;
        }

        body:has(#dashboardWorkspace:not([hidden])) .topbar { display: none !important; }

        .dashboard-header-actions {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            flex-wrap: wrap;
        }

        .dashboard-subject-selector {
            position: relative;
            width: min(100%, 280px);
        }

        .dashboard-subject-trigger {
            display: flex;
            align-items: center;
            width: 100%;
            min-height: 44px;
            transform: translateY(-6px);
            gap: 10px;
            padding: 8px 12px;
            border: 0;
            border-radius: 22px;
            color: var(--text);
            background: var(--surface-soft);
            box-shadow: none;
            font: inherit;
            font-size: 15px;
            font-weight: 700;
            text-align: left;
        }

        .dashboard-subject-trigger:hover,
        .dashboard-subject-trigger[aria-expanded="true"] {
            background: color-mix(in srgb, var(--surface-soft) 82%, var(--border));
        }

        .dashboard-subject-trigger:focus-visible {
            outline: 2px solid color-mix(in srgb, var(--dashboard-accent) 70%, transparent);
            outline-offset: 2px;
        }

        .dashboard-subject-trigger-icon {
            display: inline-flex;
            flex: 0 0 auto;
            align-items: center;
            justify-content: center;
            color: #777b80;
        }

        .dashboard-subject-trigger-icon svg {
            width: 22px;
            height: 22px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1.8;
        }

        .dashboard-subject-selector-label {
            min-width: 0;
            overflow: hidden;
            flex: 1 1 auto;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .dashboard-subject-plan {
            flex: 0 0 auto;
            margin-left: auto;
            padding: 5px 9px;
            border-radius: 8px;
            color: #ffffff;
            background: #737577;
            font-size: 11px;
            font-weight: 700;
            line-height: 1;
        }

        .dashboard-subject-menu {
            position: fixed;
            z-index: 60;
            inset: 0;
            display: grid;
            place-items: center;
            padding: 24px;
        }

        .dashboard-subject-menu[hidden] { display: none; }

        .dashboard-subject-menu-backdrop {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
            background: rgb(15 23 42 / 46%);
        }

        .dashboard-subject-menu-panel {
            position: relative;
            z-index: 1;
            display: flex;
            width: min(680px, 100%);
            max-height: min(720px, calc(100vh - 48px));
            flex-direction: column;
            padding: 24px;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 12px;
            color: var(--text);
            background: var(--surface);
            box-shadow: 0 4px 8px rgb(15 23 42 / 18%);
        }

        .dashboard-subject-menu-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 20px;
        }

        .dashboard-subject-menu-header h2 {
            margin: 0;
            font-size: 20px;
            font-weight: 700;
        }

        .dashboard-subject-menu-header p {
            margin: 5px 0 0;
            color: var(--muted);
            font-size: 13px;
        }

        .dashboard-subject-menu-close {
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            width: 34px;
            height: 34px;
            border: 1px solid var(--border);
            border-radius: 50%;
            color: var(--text);
            background: var(--surface);
        }

        .dashboard-subject-menu-close:hover {
            background: var(--surface-soft);
        }

        .dashboard-subject-menu-close svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-width: 2;
        }

        .dashboard-subject-menu-options {
            display: grid;
            gap: 8px;
            min-height: 0;
            overflow-y: auto;
            padding: 2px 4px 2px 0;
        }

        .dashboard-subject-option {
            display: flex;
            align-items: center;
            width: 100%;
            min-height: 58px;
            gap: 12px;
            padding: 9px 12px;
            border: 1px solid transparent;
            border-radius: 8px;
            color: var(--text);
            background: transparent;
            font: inherit;
            text-align: left;
        }

        .dashboard-subject-option:hover,
        .dashboard-subject-option.active {
            border-color: var(--border);
            background: var(--surface-soft);
        }

        .dashboard-subject-option.unavailable {
            opacity: 0.5;
        }

        .dashboard-subject-option-main {
            display: flex;
            align-items: center;
            min-width: 0;
            flex: 1 1 auto;
            padding: 2px 0;
            border: 0;
            color: inherit;
            background: transparent;
            font: inherit;
            text-align: left;
        }

        .dashboard-subject-option-main:disabled {
            cursor: not-allowed;
        }

        .dashboard-subject-option-copy {
            min-width: 0;
            display: grid;
            flex: 1 1 auto;
            gap: 2px;
        }

        .dashboard-subject-option-copy strong {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .dashboard-subject-option-copy span,
        .dashboard-subject-option-level {
            color: var(--muted);
            font-size: 11px;
        }

        .dashboard-subject-option-level {
            flex: 0 0 auto;
            font-weight: 700;
        }

        .dashboard-subject-level-options {
            display: flex;
            flex: 0 0 auto;
            gap: 2px;
            padding: 0;
            background: transparent;
        }

        .dashboard-subject-level-button {
            min-height: 24px;
            padding: 3px 4px;
            border: 0;
            border-radius: 999px;
            color: var(--muted);
            background: color-mix(in srgb, #3766b4 9%, var(--surface));
            font: inherit;
            font-size: 9px;
            font-weight: 700;
        }

        .dashboard-subject-level-button:hover {
            color: #3766b4;
            background: color-mix(in srgb, #3766b4 16%, var(--surface));
        }

        .dashboard-subject-level-button.active {
            color: #ffffff;
            background: #3766b4;
        }

        .dashboard-subject-level-button:focus-visible {
            outline: 2px solid color-mix(in srgb, var(--dashboard-accent) 70%, transparent);
            outline-offset: -1px;
        }

        .dashboard-header-actions .global-home-button,
        .dashboard-header-actions .account-trigger,
        .dashboard-header-actions .dashboard-settings-button {
            flex: 0 0 32px;
            width: 32px;
            min-width: 32px;
            height: 32px;
            min-height: 32px;
            padding: 0;
            border: 0;
            border-radius: 6px;
            background: transparent;
            box-shadow: none;
        }

        .dashboard-header-actions .global-home-button { color: #d44343; }
        .dashboard-header-actions .account-trigger { color: #f4b400; }
        .dashboard-header-actions .dashboard-settings-button { color: #2c8c88; }

        .dashboard-header-actions button:not(.dashboard-subject-trigger):hover,
        .dashboard-header-actions button:not(.dashboard-subject-trigger):focus-visible {
            border-color: transparent;
            color: #8b93a1;
            background: transparent;
            box-shadow: none;
        }

        .dashboard-header p {
            margin-bottom: 6px;
            font-size: 11px;
            font-weight: 600;
        }

        .dashboard-header h1 {
            font-size: clamp(28px, 3vw, 38px);
            font-weight: 700;
            letter-spacing: -0.03em;
        }

        .dashboard-title-row {
            position: static;
            gap: 12px;
        }

        .dashboard-level {
            position: static;
            z-index: auto;
            color: #d44343 !important;
            font-size: 16px;
            font-style: italic;
        }

        .dashboard-subject-button {
            min-height: 36px;
            border-color: color-mix(in srgb, var(--dashboard-accent) 24%, var(--border));
            border-radius: 8px;
            background: var(--surface);
            font-size: 12px;
        }

        .dashboard-subject-button:hover {
            border-color: var(--dashboard-accent);
            background: color-mix(in srgb, var(--dashboard-accent) 7%, var(--surface));
        }

        .dashboard-columns {
            gap: 20px 28px;
            margin-bottom: 24px;
        }

        .folder-group {
            gap: 14px;
            width: min(100%, var(--folder-row-width));
        }

        .folder-tool {
            min-height: 122px;
            padding: 4px 0;
            gap: 8px;
        }

        .folder-tool-label {
            color: var(--text) !important;
            font-family: var(--font-ui) !important;
            font-size: 13px !important;
            font-style: normal !important;
            font-weight: 600 !important;
            letter-spacing: 0;
        }

        .action-group { gap: 8px; }

        .action-tool {
            min-height: 52px;
            padding: 9px 12px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--surface);
            box-shadow: none;
        }

        .action-tool:hover {
            border-color: color-mix(in srgb, var(--action-color) 56%, var(--border));
            background: color-mix(in srgb, var(--action-color) 7%, var(--surface));
        }

        #homeOpenPracticeButton { --action-color: #D96D72; }
        #homeOpenSyllabusButton { --action-color: #3766B4; }
        #homeNewChatButton { --action-color: #203B68; }

        .action-tool__icon {
            width: 28px;
            height: 28px;
            flex-basis: 28px !important;
            border-radius: 8px;
            background: var(--action-color);
        }

        [data-theme="dark"] .action-tool__icon { background: color-mix(in srgb, var(--action-color) 78%, #ffffff); }

        .action-tool__copy strong {
            color: var(--text) !important;
            font-family: var(--font-ui);
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 1.2;
        }

        .progress-card,
        .study-card {
            border-radius: 12px;
            background: var(--surface);
            box-shadow: none;
        }

        .progress-card {
            padding: 0;
            border-radius: 14px;
            overflow: hidden;
            position: relative;
            margin-top: 0;
            transform: none;
            border-color: #d7dbe2;
            background: #ffffff;
            --text: #1f2328;
            --muted: #6b7280;
            --border: #d7dbe2;
            --surface: #ffffff;
            --surface-soft: #f4f6f8;
            height: fit-content;
            box-shadow: 0 2px 0 color-mix(in srgb, var(--border) 75%, transparent);
        }

        .study-card { padding: 22px; }

        [data-theme="dark"] .dashboard-inner .progress-card,
        [data-theme="dark"] .dashboard-inner .study-card {
            border-color: #34415a;
            background: #151a26;
            --text: #f3f5f8;
            --muted: #aeb7c8;
            --border: #34415a;
            --surface: #151a26;
            --surface-soft: #222b3b;
        }

        .dashboard-inner .progress-card {
            border-color: #dedbd3;
            background: #fffdf8;
            --progress-note-surface: #fffdf8;
            --progress-note-line: #e3dfd2;
            --progress-year-slab: #e4e5e7;
            --text: #2b2d31;
            --muted: #73736f;
            --border: #dedbd3;
            --surface: #fffdf8;
            --surface-soft: #f5f3ed;
        }

        [data-theme="dark"] .dashboard-inner .progress-card {
            border-color: #45474c;
            background: #2b2d31;
            --progress-note-surface: #383a3f;
            --progress-note-line: #4b4e55;
            --progress-year-slab: #45474c;
            --text: #f3f1ea;
            --muted: #b4b3ad;
            --border: #45474c;
            --surface: #2b2d31;
            --surface-soft: #34363b;
        }

        .dashboard-columns .study-card {
            width: min(100%, var(--folder-row-width));
            justify-self: start;
        }

        .progress-card h2 { font-size: 19px; }
        .study-card h2 { font-size: 16px; }
        .progress-card .progress-card-windowbar h2 { font-size: 14px; color: #ffffff; }

        .progress-card .progress-card-windowbar {
            color: #2b2d31;
            background: #ffd21f;
        }

        [data-theme="dark"] .progress-card .progress-card-windowbar {
            color: #1e232b;
        }

        [data-theme="dark"] .progress-card .progress-card-windowbar h2 {
            color: #1e232b;
        }

        .progress-card .paper-year-header strong {
            color: var(--dashboard-navy);
        }

        .progress-card .paper-progress-chart {
            position: relative;
            gap: 14px;
            padding-left: 32px;
        }

        .progress-card .paper-progress-chart::before {
            position: absolute;
            top: 17px;
            bottom: 17px;
            left: 18px;
            width: 2px;
            background: color-mix(in srgb, var(--dashboard-navy) 28%, var(--border));
            content: "";
        }

        .progress-card .paper-year-group {
            position: relative;
        }

        .progress-card .paper-year-group::before {
            position: absolute;
            top: 8px;
            left: -18px;
            width: 9px;
            height: 9px;
            border: 2px solid var(--surface);
            border-radius: 50%;
            background: var(--dashboard-navy);
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--dashboard-navy) 38%, var(--border));
            content: "";
        }

        .progress-card .paper-year-group:nth-child(even) {
            margin-left: 9px;
        }

        .progress-card .paper-year-months {
            border: 0;
            border-radius: 0;
            background:
                linear-gradient(90deg, transparent 0 22px, color-mix(in srgb, var(--progress-note-line) 82%, transparent) 22px 23px, transparent 23px),
                repeating-linear-gradient(to bottom, transparent 0 37px, var(--progress-note-line) 37px 38px),
                var(--progress-note-surface);
            box-shadow: none;
        }

        .progress-card .paper-year-header strong,
        .progress-card .paper-year-header span,
        .progress-card .paper-month-label,
        .progress-card .paper-progress-cell {
            font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
        }

        .progress-card .paper-year-header strong {
            font-size: 16px;
            font-weight: 600;
            transform: rotate(-0.8deg);
            transform-origin: left center;
        }

        .progress-card .paper-year-header span {
            font-size: 11px;
            transform: rotate(0.5deg);
        }

        .progress-card .paper-month-label {
            font-size: 12px;
            font-weight: 400;
        }

        .progress-card .paper-progress-cell {
            min-width: 38px;
            width: 38px;
            height: 28px;
            border: 0;
            border-bottom: 2px solid color-mix(in srgb, var(--dashboard-accent) 42%, var(--border));
            border-radius: 0;
            color: var(--dashboard-accent);
            background: transparent;
            font-size: 12px;
            font-weight: 500;
        }

        .progress-card .paper-progress-cell:hover,
        .progress-card .paper-progress-cell:focus-visible {
            border-bottom-color: var(--dashboard-accent);
            background: color-mix(in srgb, var(--dashboard-accent) 18%, var(--progress-note-surface));
        }

        .progress-card .paper-progress-cell.done {
            border-bottom-color: var(--dashboard-accent);
            color: #ffffff;
            background: var(--dashboard-accent);
        }

        [data-theme="dark"] .progress-card .paper-progress-cell.done {
            color: #ffffff;
        }

        .progress-card-score {
            min-width: 0;
            padding: 0;
            border: 0;
            background: transparent;
            text-align: right;
        }

        .progress-card-score-label {
            display: block;
            color: var(--muted);
            font-size: 10px;
            font-weight: 600;
            line-height: 1.2;
        }

        .paper-progress-summary {
            display: block;
            margin-top: 3px;
            color: var(--progress-note-accent);
            font-size: 18px;
            font-weight: 700;
            letter-spacing: -0.03em;
            line-height: 1;
            white-space: nowrap;
        }

        .paper-year-group { border-radius: 0; }
        .paper-year-header { background: transparent; }
        .paper-progress-cell { font-style: normal; }

        /* Notes-app body: plain system text, table-like dividers, and quiet callouts. */
        .progress-card .paper-progress-chart {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            padding: 14px 18px 18px;
        }

        .progress-card .paper-progress-chart::before,
        .progress-card .paper-year-group::before {
            display: none;
        }

        .progress-card .paper-year-group,
        .progress-card .paper-year-group:nth-child(even) {
            margin-left: 0;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 2px;
            background: var(--progress-note-surface);
        }

        .progress-card .paper-year-header {
            padding: 9px 11px 8px;
            border-bottom: 1px solid var(--border);
            background: color-mix(in srgb, var(--dashboard-accent) 4%, var(--progress-note-surface));
        }

        .progress-card .paper-year-header strong,
        .progress-card .paper-year-header span,
        .progress-card .paper-month-label,
        .progress-card .paper-progress-cell {
            font-family: var(--font-ui);
            transform: none;
        }

        .progress-card .paper-year-header strong {
            color: var(--text);
            font-size: 16px;
            font-weight: 600;
            letter-spacing: -0.02em;
        }

        .progress-card .paper-year-header span {
            color: var(--muted);
            font-size: 10px;
        }

        .progress-card .paper-year-months {
            border: 0;
            border-radius: 0;
            background: var(--progress-note-surface);
            box-shadow: none;
        }

        .progress-card .paper-month-row {
            grid-template-columns: minmax(78px, 0.7fr) minmax(0, 1fr);
            min-height: 52px;
            padding: 8px 12px;
        }

        .progress-card .paper-month-label {
            color: var(--text);
            font-size: 15px;
            font-weight: 500;
        }

        .progress-card .paper-progress-cell {
            min-width: 34px;
            width: 34px;
            height: 28px;
            border: 1px solid color-mix(in srgb, var(--dashboard-accent) 30%, var(--border));
            border-radius: 6px;
            color: var(--dashboard-accent);
            background: color-mix(in srgb, var(--dashboard-accent) 7%, var(--progress-note-surface));
            font-size: 11px;
            font-weight: 600;
        }

        .progress-card .paper-progress-cell:hover,
        .progress-card .paper-progress-cell:focus-visible {
            border-color: var(--dashboard-accent);
            background: color-mix(in srgb, var(--dashboard-accent) 14%, var(--progress-note-surface));
        }

        .progress-card .paper-progress-cell.done {
            border-color: var(--dashboard-accent);
            color: #ffffff;
            background: var(--dashboard-accent);
        }

        .progress-card .paper-progress-cell {
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            min-width: 0;
            width: auto;
            height: 30px;
            padding: 0;
            border: 0;
            border-radius: 0;
            color: var(--text);
            background: transparent;
            font-size: 12px;
            font-weight: 400;
            transform: none;
        }

        .progress-card .paper-progress-cell:hover,
        .progress-card .paper-progress-cell:focus-visible {
            border: 0;
            background: transparent;
            transform: none;
        }

        .progress-card .paper-progress-check {
            display: inline-grid;
            flex: 0 0 28px;
            width: 28px;
            height: 28px;
            place-items: center;
            border: 2px solid #c8c9cb;
            border-radius: 50%;
            background: transparent;
        }

        .progress-card .paper-progress-check::after {
            width: 10px;
            height: 6px;
            border-bottom: 3px solid #ffffff;
            border-left: 3px solid #ffffff;
            content: "";
            opacity: 0;
            transform: translateY(-1px) rotate(-45deg);
        }

        .progress-card .paper-progress-cell.done .paper-progress-check {
            border-color: #e1b52e;
            background: #e1b52e;
        }

        .progress-card .paper-progress-cell.done .paper-progress-check::after {
            opacity: 1;
        }

        .progress-card .paper-progress-code {
            color: var(--text);
            font-family: var(--font-ui);
            font-size: 15px;
            font-weight: 500;
        }

        /* Notes-style table rows with a muted year monolith at the left. */
        .progress-card .paper-year-group,
        .progress-card .paper-year-group:nth-child(even) {
            display: grid;
            grid-template-columns: 92px minmax(0, 1fr);
            align-items: stretch;
            overflow: hidden;
            border-color: #d2d4d7;
            border-radius: 2px;
            background: var(--progress-note-surface);
        }

        [data-theme="dark"] .progress-card .paper-year-group,
        [data-theme="dark"] .progress-card .paper-year-group:nth-child(even) {
            border-color: #50535a;
        }

        .progress-card .paper-year-header {
            grid-column: 1;
            grid-row: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 10px;
            min-height: 100%;
            padding: 14px 10px;
            border: 0;
            border-right: 1px solid #d2d4d7;
            background: var(--progress-year-slab);
        }

        [data-theme="dark"] .progress-card .paper-year-header {
            border-right-color: #50535a;
        }

        .progress-card .paper-year-header strong {
            color: #2f3338;
            font-size: 22px;
            font-weight: 600;
            letter-spacing: -0.03em;
        }

        [data-theme="dark"] .progress-card .paper-year-header strong {
            color: #f1f0eb;
        }

        .progress-card .paper-year-header span {
            display: inline-block;
            padding: 4px 7px;
            border-radius: 7px;
            color: #62656a;
            background: #d8d9dc;
            font-size: 10px;
            line-height: 1.25;
        }

        [data-theme="dark"] .progress-card .paper-year-header span {
            color: #c1c3c7;
            background: #55585e;
        }

        .progress-card .paper-year-months {
            grid-column: 2;
            grid-row: 1;
            min-width: 0;
            background: var(--progress-note-surface);
        }

        .progress-card .paper-month-row {
            grid-template-columns: minmax(78px, 0.72fr) minmax(0, 1fr);
            min-height: 52px;
            padding: 8px 12px;
        }

        @media (max-width: 560px) {
            .progress-card .paper-progress-chart { grid-template-columns: 1fr; }
            .progress-card .paper-year-group,
            .progress-card .paper-year-group:nth-child(even) { grid-template-columns: 78px minmax(0, 1fr); }
        }

        /* Reference-matched Notes table: one flat ruled grid, no dashboard slabs. */
        .progress-card .progress-card-windowbar { display: none; }

        .dashboard-inner .progress-card {
            border-color: #d2d3d5;
            border-radius: 4px;
            background: #ffffff;
        }

        [data-theme="dark"] .dashboard-inner .progress-card {
            border-color: #4b4d52;
            background: #2b2d31;
        }

        .progress-card .progress-card-header {
            align-items: flex-start;
            padding: 18px 18px 14px;
            border-bottom: 1px solid #d2d3d5;
        }

        [data-theme="dark"] .progress-card .progress-card-header {
            border-bottom-color: #4b4d52;
        }

        .progress-card .progress-card-title p {
            margin: 5px 0 0;
            font-size: 12px;
        }

        .progress-card .paper-progress-chart {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0;
            padding: 0;
            border-top: 0;
        }

        .progress-card .paper-progress-chart::before,
        .progress-card .paper-year-group::before {
            display: none;
        }

        .progress-card .paper-year-group,
        .progress-card .paper-year-group:nth-child(even) {
            display: block;
            margin: 0;
            overflow: hidden;
            border: 0;
            border-right: 1px solid #d2d3d5;
            border-bottom: 1px solid #d2d3d5;
            border-radius: 0;
            background: #ffffff;
        }

        .progress-card .paper-year-group:nth-child(even) { border-right: 0; }

        [data-theme="dark"] .progress-card .paper-year-group,
        [data-theme="dark"] .progress-card .paper-year-group:nth-child(even) {
            border-color: #4b4d52;
            background: #2b2d31;
        }

        .progress-card .paper-year-header {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 0;
            padding: 13px 15px 10px;
            border: 0;
            border-bottom: 1px solid #d2d3d5;
            background: #ffffff;
        }

        [data-theme="dark"] .progress-card .paper-year-header {
            border-bottom-color: #4b4d52;
            background: #2b2d31;
        }

        .progress-card .paper-year-header strong {
            color: #3b3d40;
            font-size: 21px;
            font-weight: 500;
            letter-spacing: -0.03em;
        }

        [data-theme="dark"] .progress-card .paper-year-header strong { color: #f2f1ed; }

        .progress-card .paper-year-header span {
            padding: 3px 6px;
            border-radius: 6px;
            color: #66686c;
            background: #e5e5e6;
            font-size: 10px;
            font-weight: 400;
        }

        [data-theme="dark"] .progress-card .paper-year-header span {
            color: #c6c7ca;
            background: #45474c;
        }

        .progress-card .paper-year-months {
            border: 0;
            border-radius: 0;
            background: #ffffff;
        }

        [data-theme="dark"] .progress-card .paper-year-months { background: #2b2d31; }

        .progress-card .paper-month-row {
            grid-template-columns: minmax(100px, 0.9fr) minmax(0, 1fr);
            min-height: 50px;
            padding: 7px 15px;
        }

        .progress-card .paper-month-row + .paper-month-row {
            border-top: 1px solid #e1e1e2;
        }

        [data-theme="dark"] .progress-card .paper-month-row + .paper-month-row {
            border-top-color: #424449;
        }

        .progress-card .paper-month-label {
            color: #3f4144;
            font-size: 14px;
            font-weight: 400;
        }

        [data-theme="dark"] .progress-card .paper-month-label { color: #ebe9e3; }

        .progress-card .paper-progress-cell {
            gap: 9px;
            height: 32px;
        }

        .progress-card .paper-progress-check {
            flex-basis: 15px;
            width: 15px;
            height: 15px;
            border-width: 1.5px;
        }

        .progress-card .paper-progress-check::after {
            width: 6px;
            height: 3px;
            border-bottom-width: 2px;
            border-left-width: 2px;
        }

        .progress-card .paper-progress-code {
            color: #3f4144;
            font-size: 14px;
            font-weight: 400;
        }

        [data-theme="dark"] .progress-card .paper-progress-code { color: #ebe9e3; }

        @media (max-width: 560px) {
            .progress-card .paper-progress-chart { grid-template-columns: 1fr; }
            .progress-card .paper-year-group,
            .progress-card .paper-year-group:nth-child(even) { border-right: 0; }
        }

        /* Year chart layout from the supplied Notes reference. */
        .progress-card .progress-card-windowbar {
            display: flex;
            min-height: 42px;
            padding: 10px 14px 10px 16px;
            color: #1e232b;
            background: #ffd21f;
            border-radius: 0;
        }

        .dashboard-inner .progress-card {
            border-radius: 14px;
            overflow: hidden;
            isolation: isolate;
        }

        .progress-card .progress-card-windowbar h2 {
            color: #1e232b;
            font-size: 14px;
            font-weight: 600;
        }

        .progress-card .paper-progress-chart {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
            padding: 16px 18px 18px;
        }

        .progress-card .paper-year-group,
        .progress-card .paper-year-group:nth-child(even) {
            display: block;
            margin: 0;
            overflow: hidden;
            border: 1px solid #d2d3d5;
            border-radius: 12px;
            background: #ffffff;
        }

        [data-theme="dark"] .progress-card .paper-year-group,
        [data-theme="dark"] .progress-card .paper-year-group:nth-child(even) {
            border-color: #4b4d52;
            background: #2b2d31;
        }

        .progress-card .paper-year-header {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            min-height: 0;
            margin-bottom: 0;
            padding: 12px 16px;
            border: 0;
            border-radius: 11px 11px 0 0;
            background: #e5e5e6;
        }

        [data-theme="dark"] .progress-card .paper-year-header {
            background: #45474c;
        }

        .progress-card .paper-year-header strong {
            color: #3e4043;
            font-size: 22px;
            font-weight: 400;
            letter-spacing: 0;
        }

        [data-theme="dark"] .progress-card .paper-year-header strong { color: #f0eee8; }
        .progress-card .paper-year-header span { display: none; }

        .progress-card .paper-year-months {
            overflow: hidden;
            border: 0;
            border-radius: 0 0 11px 11px;
            background: #ffffff;
        }

        [data-theme="dark"] .progress-card .paper-year-months {
            border-color: #4b4d52;
            background: #2b2d31;
        }

        .progress-card .paper-month-row {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            min-height: 54px;
            padding: 7px 16px;
        }

        .progress-card .paper-month-label {
            font-size: 17px;
            font-weight: 400;
        }

        .progress-card .paper-progress-code { font-size: 17px; }

        .progress-card .paper-month-row + .paper-month-row {
            border-top: 1px solid #d2d3d5;
        }

        [data-theme="dark"] .progress-card .paper-month-row + .paper-month-row {
            border-top-color: #4b4d52;
        }

        /* Separate year strip and chart panel, as shown in the reference. */
        .progress-card .paper-year-group,
        .progress-card .paper-year-group:nth-child(even) {
            display: flex;
            flex-direction: column;
            gap: 10px;
            overflow: visible;
            border: 0;
            border-radius: 0;
            background: transparent;
        }

        .progress-card .paper-year-header {
            flex: 0 0 auto;
            margin: 0;
            padding: 11px 16px;
            border: 0;
            border-radius: 14px;
            background: #e5e5e6;
        }

        [data-theme="dark"] .progress-card .paper-year-header { background: #45474c; }

        .progress-card .paper-year-months {
            flex: 0 0 auto;
            overflow: hidden;
            border: 1px solid #d2d3d5;
            border-radius: 0;
            background: #ffffff;
        }

        [data-theme="dark"] .progress-card .paper-year-months {
            border-color: #4b4d52;
            background: #2b2d31;
        }

        .progress-card .paper-year-header strong { font-size: 18px; }
        .progress-card .paper-month-label { font-size: 13px; }
        .progress-card .paper-progress-code { font-size: 13px; }

        @media (max-width: 560px) {
            .progress-card .paper-progress-chart { grid-template-columns: 1fr; }
        }

        /* Fixed-height, scrollbar-free infinite table loop. */
        .dashboard-inner .progress-card {
            height: 460px;
            min-height: 460px;
        }

        .progress-card .paper-progress-chart {
            display: block;
            height: calc(100% - 42px);
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: 16px 18px 18px;
            scrollbar-width: none;
        }

        .progress-card .paper-progress-chart::-webkit-scrollbar { display: none; }

        .progress-card .paper-progress-track {
            display: flex;
            flex-direction: column;
            gap: 14px;
            min-height: 100%;
            animation: none;
        }

        .progress-card .paper-progress-page {
            display: grid;
            flex: 0 0 auto;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
            width: 100%;
            min-height: 100%;
            align-content: start;
        }

        @media (max-width: 560px) {
            .dashboard-inner .progress-card {
                height: 520px;
                min-height: 520px;
            }

            .progress-card .paper-progress-page { grid-template-columns: 1fr; }
        }

        @media (max-width: 620px) {
            .dashboard-workspace { padding: 64px 16px 28px; }
            .dashboard-inner { padding: 20px 16px; border-radius: 12px; }
            .dashboard-header { align-items: flex-start; flex-direction: column; gap: 14px; }
            .dashboard-subject-button { align-self: flex-start; }
            .folder-group { width: min(100%, var(--folder-row-width)); }
            .dashboard-columns .study-card { width: min(100%, var(--folder-row-width)); }
        }

        .study-value {
            display: block;
            margin-top: auto;
            color: var(--text);
            font-size: 44px;
            font-weight: 800;
            line-height: 0.95;
            letter-spacing: 0;
        }

        .study-bar { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: 24px; }
        .study-bar span { height: 7px; border-radius: 2px; background: var(--surface-soft); }
        .study-bar span.active { background: var(--dashboard-accent); }

        @media (max-width: 900px) {
            .dashboard-columns {
                grid-template-columns: minmax(274px, 0.72fr) minmax(0, 1.3fr);
                gap: 16px 20px;
            }

            .dashboard-tools {
                grid-template-columns: auto minmax(0, 1fr);
                gap: 20px;
            }

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

        @media (max-width: 620px) {
            .dashboard-columns {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "folders"
                    "actions"
                    "tracker"
                    "progress";
            }

            .action-group { grid-template-columns: 1fr; }
            .folder-group { justify-content: flex-start; }
        }

        .home-inner {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 280px;
            gap: 18px;
            width: min(100%, 1120px);
            margin: 0 auto;
        }

        .home-hero {
            grid-column: 1 / -1;
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 20px;
            padding: 6px 0 2px;
        }

        .home-date {
            margin: 0 0 4px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 650;
        }

        .home-hero h1 {
            margin: 0;
            color: var(--text);
            font-size: clamp(26px, 3vw, 38px);
            line-height: 1.08;
            letter-spacing: 0;
        }

        .home-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .subject-section {
            grid-column: 1 / -1;
        }

        .subject-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            padding: 0 12px 12px;
        }

        .subject-card {
            min-height: 92px;
            padding: 13px;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            background: var(--bg);
            text-align: left;
        }

        .subject-card:hover,
        .subject-card.active {
            background: var(--surface-soft);
        }

        .subject-card.active {
            border-color: var(--accent);
        }

        .subject-card strong,
        .subject-card span {
            display: block;
        }

        .subject-card strong {
            margin-bottom: 6px;
            font-size: 14px;
        }

        .subject-card span {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.35;
        }

        .subject-landing .subject-grid {
            display: block;
            padding: 0;
        }

        .subject-table-card {
            overflow: hidden;
            border: 1px solid #e7ebf1;
            border-radius: 14px;
            background: #ffffff;
            box-shadow: 0 8px 24px rgba(31, 41, 55, 0.045);
        }

        .subject-table-header,
        .subject-table-row {
            display: grid;
            grid-template-columns: minmax(170px, 1.3fr) minmax(84px, 0.58fr) minmax(104px, 0.72fr) minmax(150px, 1fr) minmax(150px, 1fr);
            gap: 18px;
            align-items: center;
            min-width: 760px;
        }

        .subject-table-header {
            padding: 13px 20px;
            border-bottom: 1px solid #e7ebf1;
            color: #8a94a6;
            background: #fbfcfe;
            font-size: 11px;
            font-weight: 750;
            letter-spacing: 0.045em;
            text-transform: uppercase;
        }

        .subject-table-scroll {
            overflow-x: auto;
        }

        .subject-table-row {
            width: 100%;
            padding: 16px 20px;
            border: 0;
            border-bottom: 1px solid #edf0f4;
            color: #1d2939;
            background: #ffffff;
            text-align: left;
        }

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

        .subject-table-row:hover,
        .subject-table-row.active {
            background: #f8fbff;
        }

        .subject-table-row.active { box-shadow: inset 3px 0 0 #7092be; }

        .subject-table-name {
            font-size: 14px;
            font-weight: 750;
        }

        .subject-table-value {
            color: #667085;
            font-size: 13px;
        }

        .subject-progress {
            display: grid;
            grid-template-columns: minmax(72px, 1fr) auto;
            gap: 8px;
            align-items: center;
        }

        .subject-progress-track {
            height: 6px;
            overflow: hidden;
            border-radius: 99px;
            background: #edf1f5;
        }

        .subject-progress-fill {
            display: block;
            width: var(--progress, 0%);
            height: 100%;
            border-radius: inherit;
            background: #7092be;
        }

        .subject-progress-count {
            color: #667085;
            font-size: 12px;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

        [data-theme="dark"] .subject-table-card {
            border-color: #262626;
            background: #0b0b0b;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
        }

        [data-theme="dark"] .subject-table-header {
            border-bottom-color: #262626;
            color: #8f8f8f;
            background: #101010;
        }

        [data-theme="dark"] .subject-table-row {
            border-bottom-color: #202020;
            color: #ececec;
            background: #0b0b0b;
        }

        [data-theme="dark"] .subject-table-row:hover,
        [data-theme="dark"] .subject-table-row.active {
            background: #151515;
        }

        [data-theme="dark"] .subject-table-value,
        [data-theme="dark"] .subject-progress-count {
            color: #a6a6a6;
        }

        [data-theme="dark"] .subject-progress-track { background: #252525; }

        @media (max-width: 820px) {
            .header-atlas-brand { width: 132px; }

            .subject-landing {
                padding: 36px 20px 44px;
            }

            .subject-landing-inner {
                grid-template-columns: 1fr;
                gap: 34px;
                width: min(100%, 560px);
            }

            .subject-landing-copy {
                max-width: 500px;
            }

            .subject-landing-copy h1 {
                font-size: clamp(36px, 9vw, 50px);
            }

            .atlas-character {
                width: min(100%, 440px);
                margin: 12px auto 0;
            }

            .subject-choice-panel {
                max-width: none;
            }

            .subject-table-card { border-radius: 10px; }
            .subject-table-header,
            .subject-table-row { min-width: 700px; }
        }

        .home-card {
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
        }

        .home-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 14px 16px 10px;
        }

        .home-card-header h2 {
            margin: 0;
            color: var(--text);
            font-size: 15px;
        }

        .home-card-header a,
        .home-link-button {
            color: var(--accent);
            background: transparent;
            font-size: 12px;
            font-weight: 750;
            text-decoration: none;
        }

        .workspace-list {
            display: grid;
            padding: 0 10px 10px;
        }

        .workspace-row {
            display: grid;
            grid-template-columns: 34px minmax(0, 1fr) auto auto auto 28px;
            gap: 12px;
            align-items: center;
            min-height: 54px;
            padding: 8px 6px;
            border-top: 1px solid var(--border);
            color: var(--text);
            background: transparent;
            text-align: left;
            cursor: pointer;
        }

        .workspace-row:hover {
            background: var(--surface-hover);
        }

        .workspace-row:first-child { border-top: 0; }

        .workspace-icon {
            display: grid;
            place-items: center;
            width: 30px;
            height: 30px;
            border-radius: 8px;
            color: white;
            background: var(--accent);
            font-weight: 800;
        }

        .workspace-icon.yellow { background: #f59e0b; }
        .workspace-icon.blue { background: #3b82f6; }
        .workspace-icon.pink { background: #ec4899; }

        .workspace-copy {
            min-width: 0;
        }

        .workspace-copy strong,
        .workspace-copy span {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .workspace-copy strong {
            font-size: 13px;
        }

        .workspace-copy span,
        .workspace-meta {
            color: var(--muted);
            font-size: 11px;
        }

        .workspace-meta {
            min-width: 58px;
            text-align: right;
        }

        .home-menu-dot {
            color: var(--muted);
            background: transparent;
            font-weight: 800;
        }

        .home-side {
            display: grid;
            gap: 14px;
            align-content: start;
        }

        .upgrade-card {
            padding: 16px;
            border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
            background: color-mix(in srgb, var(--accent) 8%, var(--surface));
        }

        .upgrade-card strong {
            display: block;
            margin-bottom: 6px;
        }

        .upgrade-card p {
            margin: 0 0 12px;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.45;
        }

        .resource-list,
        .learn-list {
            display: grid;
            gap: 6px;
            padding: 0 12px 12px;
        }

        .resource-item,
        .learn-item {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 38px;
            padding: 8px;
            border-radius: 8px;
            color: var(--text);
            background: transparent;
            text-align: left;
        }

        .resource-item:hover,
        .learn-item:hover {
            background: var(--surface-hover);
        }

        .learn-item {
            align-items: flex-start;
        }

        .learn-thumb {
            display: grid;
            place-items: center;
            width: 34px;
            height: 34px;
            flex: 0 0 auto;
            border-radius: 8px;
            color: var(--accent);
            background: var(--surface-soft);
            font-weight: 800;
        }

        .learn-copy strong,
        .learn-copy span {
            display: block;
        }

        .learn-copy strong {
            font-size: 12px;
        }

        .learn-copy span {
            margin-top: 2px;
            color: var(--muted);
            font-size: 11px;
            line-height: 1.35;
        }

        .api-grid {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
        }

        .api-card {
            min-height: 122px;
            padding: 14px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
            text-align: left;
        }

        .api-card .icon-box {
            display: grid;
            place-items: center;
            width: 34px;
            height: 34px;
            margin-bottom: 12px;
            border-radius: 8px;
            color: var(--accent);
            background: var(--surface-soft);
        }

        .api-card strong {
            display: block;
            margin-bottom: 5px;
            font-size: 13px;
        }

        .api-card span {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.4;
        }

        .syllabus-workspace {
            display: grid;
            grid-template-columns: 248px minmax(0, 1fr);
            gap: 0;
            min-height: 0;
            height: 100%;
            background: var(--bg);
            color: var(--text);
            font-family: var(--font-ui);
        }

        .syllabus-browser {
            display: flex;
            flex-direction: column;
            min-width: 0;
            min-height: 0;
            gap: 16px;
            padding: 16px 14px;
            border-right: 1px solid var(--border);
            background: var(--surface);
        }

        .syllabus-controls {
            display: grid;
            gap: 10px;
            padding: 0;
        }

        .syllabus-list {
            display: grid;
            align-content: start;
            gap: 10px;
            min-height: 0;
            margin-top: 0;
            overflow-y: auto;
            padding: 0 2px 0 0;
            border: 0;
            border-radius: 0;
            background: transparent;
        }

        .syllabus-list:empty { display: none; }

        .syllabus-section-label {
            display: none;
        }

        .syllabus-topic {
            display: grid;
            gap: 4px;
            width: 100%;
            min-height: auto;
            padding: 11px 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--muted);
            background: var(--bg);
            text-align: left;
            box-shadow: none;
        }

        .syllabus-topic:hover,
        .syllabus-topic.active {
            border-color: var(--border);
            background: var(--surface-soft);
            color: var(--text);
            box-shadow: none;
        }

        .syllabus-topic strong {
            font-size: 14px;
            font-weight: 700;
            line-height: 1.25;
        }

        .syllabus-topic span {
            display: none;
        }

        .syllabus-dashboard-header {
            display: none;
            grid-template-columns: minmax(0, 1fr) repeat(4, minmax(96px, 120px));
            gap: 10px;
            align-items: stretch;
            margin-bottom: 14px;
        }

        .syllabus-title-card,
        .syllabus-stat-card {
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
            box-shadow: none;
        }

        .syllabus-title-card {
            padding: 18px 20px;
        }

        .syllabus-title-card h1 {
            margin: 0;
            color: var(--text);
            font-size: clamp(22px, 2.2vw, 30px);
            line-height: 1.1;
        }

        .syllabus-title-card p {
            margin: 7px 0 0;
            color: var(--muted);
            font-size: 13px;
        }

        .syllabus-stat-card {
            display: grid;
            gap: 5px;
            padding: 15px 16px;
        }

        .syllabus-stat-card span {
            color: var(--muted);
            font-size: 12px;
            font-weight: 650;
        }

        .syllabus-stat-card strong {
            color: var(--text);
            font-size: 20px;
            line-height: 1;
        }

        .syllabus-stat-card em {
            justify-self: start;
            padding: 3px 7px;
            border-radius: 999px;
            color: #16a34a;
            background: #dcfce7;
            font-size: 11px;
            font-style: normal;
            font-weight: 750;
        }

        .syllabus-stat-card:nth-child(3) em {
            color: #4f46e5;
            background: #e0e7ff;
        }

        .syllabus-stat-card:nth-child(4) em {
            color: #db2777;
            background: #fce7f3;
        }

        .syllabus-stat-card:nth-child(5) em {
            color: #0f766e;
            background: #ccfbf1;
        }

        .notebook-brand,
        .notebook-subject,
        .notebook-select {
            width: 100%;
            min-height: 42px;
            padding: 9px 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            background: var(--bg);
            box-shadow: none;
            font-size: 14px;
            font-weight: 700;
        }

        .notebook-brand {
            display: none;
            align-items: center;
            min-height: 44px;
            color: var(--text);
            background: var(--surface-soft);
            font-size: 15px;
            letter-spacing: 0;
        }

        .notebook-subject-wrap {
            display: grid;
            gap: 8px;
        }

        .syllabus-control-label {
            color: var(--muted);
            font-size: 11px;
            font-weight: 700;
        }

        .notebook-subject-context {
            display: flex;
            gap: 8px;
        }

        .notebook-subject-context .notebook-subject {
            flex: 1;
            display: flex;
            align-items: center;
            min-height: 40px;
            background: var(--surface);
        }

        .notebook-subject-change {
            min-width: 64px;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--accent);
            background: var(--surface-soft);
            font-size: 12px;
            font-weight: 700;
        }

        .notebook-subject-change:hover {
            background: var(--surface-hover);
        }

        .syllabus-page-switcher {
            display: none;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .syllabus-page-tab {
            min-height: 38px;
            padding: 0 10px;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--muted);
            background: var(--bg);
            font-size: 13px;
            font-weight: 750;
        }

        .syllabus-page-tab:hover,
        .syllabus-page-tab.active {
            color: var(--text);
            background: var(--surface-soft);
        }

        .notebook-select {
            appearance: auto;
            cursor: pointer;
            min-height: 44px;
            font-size: 13px;
            font-weight: 600;
        }

        .syllabus-topic-search {
            min-height: 38px;
            padding: 8px 10px;
            font-size: 12px;
        }

        .syllabus-topic-summary-card {
            display: grid;
            gap: 5px;
            padding: 14px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
            box-shadow: 0 2px 0 color-mix(in srgb, var(--border) 75%, transparent);
        }

        .syllabus-topic-summary-card > span {
            color: var(--muted);
            font-size: 11px;
            font-weight: 700;
        }

        .syllabus-topic-summary-card strong {
            color: var(--text);
            font-size: 14px;
            font-weight: 700;
            line-height: 1.35;
        }

        .syllabus-topic-summary-card p {
            margin: 0;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.4;
        }

        .syllabus-page {
            min-width: 0;
            min-height: 0;
            overflow-y: auto;
            padding: 22px clamp(18px, 3vw, 38px) 32px;
        }

        .syllabus-page .syllabus-conversation {
            height: 100%;
            overflow: visible;
            padding: 0;
        }

        .syllabus-page .conversation-inner {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 14px;
            width: 100%;
            margin: 0;
        }

        .syllabus-card {
            width: 100%;
            margin: 0;
        }

        .syllabus-topic-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 12px;
            padding: 0 0 12px;
            border-bottom: 1px solid var(--border);
        }

        .syllabus-topic-header p,
        .syllabus-topic-header span {
            display: block;
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.45;
        }

        .syllabus-topic-header p {
            margin-bottom: 6px;
            font-size: 12px;
            font-weight: 700;
        }

        .syllabus-topic-header h1 {
            margin: 0 0 7px;
            color: var(--text);
            font-size: clamp(23px, 2.8vw, 32px);
            font-weight: 700;
            line-height: 1.12;
        }

        .syllabus-topical-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex: 0 0 auto;
            min-height: 40px;
            padding: 0 13px;
            border: 1px solid var(--accent);
            border-radius: 8px;
            color: var(--accent);
            background: color-mix(in srgb, var(--accent) 6%, var(--surface));
            font-size: 12px;
            font-weight: 700;
        }

        .syllabus-topical-action:hover,
        .syllabus-topical-action:focus-visible {
            background: color-mix(in srgb, var(--accent) 12%, var(--surface));
        }

        .syllabus-topical-action .icon,
        .syllabus-subtopic-practice .icon {
            width: 15px;
            height: 15px;
        }

        .syllabus-topic-layout {
            display: grid;
            grid-template-columns: minmax(340px, 1.2fr) minmax(310px, 0.8fr);
            gap: 12px;
            align-items: start;
        }

        .syllabus-outline,
        .syllabus-topic-chat {
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
            box-shadow: 0 2px 0 color-mix(in srgb, var(--border) 75%, transparent);
        }

        .syllabus-outline {
            padding: 16px;
        }

        .syllabus-outline-heading {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
        }

        .syllabus-outline-heading h2,
        .syllabus-chat-heading h2 {
            margin: 0;
            color: var(--text);
            font-size: 15px;
            font-weight: 700;
        }

        .syllabus-outline-heading p,
        .syllabus-chat-heading p {
            margin: 4px 0 0;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.4;
        }

        .syllabus-subtopic-list {
            display: grid;
            gap: 7px;
        }

        .syllabus-subtopic-row {
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--bg);
        }

        .syllabus-subtopic-row summary {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px;
            min-height: 56px;
            padding: 10px;
            cursor: pointer;
            list-style: none;
        }

        .syllabus-subtopic-row summary::-webkit-details-marker { display: none; }
        .syllabus-subtopic-row summary:hover { background: var(--surface-hover); }

        .syllabus-subtopic-number {
            display: grid;
            place-items: center;
            min-width: 38px;
            min-height: 32px;
            border-radius: 6px;
            color: var(--accent);
            background: color-mix(in srgb, var(--accent) 10%, var(--surface));
            font-size: 11px;
            font-weight: 700;
        }

        .syllabus-subtopic-copy strong,
        .syllabus-subtopic-copy small {
            display: block;
        }

        .syllabus-subtopic-copy strong {
            color: var(--text);
            font-size: 13px;
            font-weight: 700;
            line-height: 1.3;
        }

        .syllabus-subtopic-copy small {
            margin-top: 3px;
            color: var(--muted);
            font-size: 11px;
        }

        .syllabus-subtopic-chevron {
            width: 16px;
            height: 16px;
            color: var(--muted);
            transition: transform 150ms ease;
        }

        .syllabus-subtopic-row[open] .syllabus-subtopic-chevron { transform: rotate(90deg); }

        .syllabus-subtopic-detail {
            padding: 2px 14px 14px 58px;
            border-top: 1px solid var(--border);
        }

        .syllabus-subtopic-detail ol {
            display: grid;
            gap: 7px;
            margin: 12px 0;
            padding-left: 17px;
            color: var(--text);
            font-size: 12px;
            line-height: 1.45;
        }

        .syllabus-subtopic-detail li { padding-left: 1px; }

        .knowledge-module-collection {
            display: grid;
            gap: 10px;
            margin-top: 16px;
        }

        .knowledge-module-collection-heading {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 12px;
        }

        .knowledge-module-collection-heading h3 {
            margin: 0;
            color: var(--text);
            font-size: 12px;
            font-weight: 750;
        }

        .knowledge-module-collection-heading p {
            margin: 3px 0 0;
            color: var(--muted);
            font-size: 11px;
            line-height: 1.4;
        }

        .knowledge-module-collection-heading > span {
            flex: 0 0 auto;
            color: var(--muted);
            font-size: 10px;
        }

        .knowledge-module-collection.is-syllabus > summary {
            cursor: pointer;
            list-style: none;
        }

        .knowledge-module-collection.is-syllabus > summary::-webkit-details-marker {
            display: none;
        }

        .knowledge-module-collection.is-syllabus > summary:hover {
            color: var(--text);
        }

        .knowledge-module-disclosure-chevron {
            font-size: 18px !important;
            line-height: 1;
            transition: transform 150ms ease;
        }

        .knowledge-module-collection.is-syllabus[open] .knowledge-module-disclosure-chevron {
            transform: rotate(90deg);
        }

        .knowledge-module-list {
            display: grid;
            gap: 8px;
        }

        .knowledge-module {
            display: grid;
            gap: 9px;
            padding: 11px;
            border: 1px solid var(--border);
            border-radius: 9px;
            background: var(--surface-soft);
        }

        .knowledge-module-header span {
            color: var(--accent);
            font-size: 10px;
            font-weight: 700;
        }

        .knowledge-module-header h4 {
            margin: 2px 0 0;
            color: var(--text);
            font-size: 12px;
            font-weight: 700;
            line-height: 1.35;
        }

        .knowledge-module-section {
            display: grid;
            gap: 6px;
            padding-top: 8px;
            border-top: 1px solid var(--border);
        }

        .knowledge-module-section h5 {
            margin: 0;
            color: var(--muted);
            font-size: 10px;
            font-weight: 700;
            line-height: 1.35;
        }

        .knowledge-module-notes {
            display: grid;
            gap: 5px;
            color: var(--text);
            font-size: 11px;
            line-height: 1.5;
        }

        .knowledge-module-note p {
            margin: 0;
            color: inherit;
            font-size: inherit;
            line-height: inherit;
        }

        .knowledge-module-note.is-bullet {
            position: relative;
            padding-left: 12px;
        }

        .knowledge-module-note.is-bullet::before {
            position: absolute;
            margin-left: -11px;
            color: var(--accent);
            content: "•";
        }

        .knowledge-module-formula {
            overflow-x: auto;
            padding: 7px 8px;
            border-radius: 6px;
            color: var(--text);
            background: var(--surface);
            font-size: 12px;
            text-align: center;
        }

        .knowledge-exam-definition {
            margin: 8px 0;
            padding: 10px 12px;
            border-left: 3px solid var(--accent);
            border-radius: 7px;
            background: color-mix(in srgb, var(--accent) 8%, var(--surface));
        }

        .knowledge-exam-definition-answer {
            border-left-color: #2c9b68;
            background: color-mix(in srgb, #2c9b68 8%, var(--surface));
        }

        .knowledge-exam-definition-label {
            display: block;
            margin-bottom: 4px;
            color: var(--muted);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .knowledge-module-media {
            margin: 2px 0;
            text-align: center;
        }

        .knowledge-module-media img {
            display: inline-block;
            max-width: 100%;
            height: auto;
            max-height: 220px;
            object-fit: contain;
            border-radius: 5px;
        }

        .syllabus-subtopic-practice {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 0;
            border: 0;
            color: var(--accent);
            background: transparent;
            font-size: 12px;
            font-weight: 700;
        }

        .syllabus-subtopic-practice:hover { text-decoration: underline; }

        .notebook-chat-box.syllabus-topic-chat {
            min-height: 0;
            padding: 16px;
        }

        .syllabus-chat-heading {
            margin-bottom: 12px;
        }

        .syllabus-prompt-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: 0 0 14px;
        }

        .syllabus-prompt-actions button {
            min-height: 30px;
            padding: 0 9px;
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--muted);
            background: var(--bg);
            font-size: 11px;
            font-weight: 700;
        }

        .syllabus-prompt-actions button:hover,
        .syllabus-prompt-actions button:focus-visible {
            border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
            color: var(--accent);
            background: color-mix(in srgb, var(--accent) 6%, var(--surface));
        }

        .syllabus-topic-chat .notebook-messages {
            min-height: 130px;
            max-height: 260px;
        }

        /* Continuous syllabus-sheet layout */
        .syllabus-workspace { grid-template-columns: 236px minmax(0, 1fr); }

        .syllabus-browser {
            gap: 12px;
            padding: 16px 12px;
        }

        .syllabus-list {
            display: grid;
            gap: 2px;
            max-height: none;
            overflow-y: auto;
            padding: 4px 0 16px;
        }

        .syllabus-topic-index-item {
            display: grid;
            gap: 3px;
            width: 100%;
            padding: 9px 10px;
            border: 0;
            border-left: 2px solid transparent;
            border-radius: 0;
            color: var(--muted);
            background: transparent;
            text-align: left;
        }

        .syllabus-topic-index-item:hover,
        .syllabus-topic-index-item.active {
            border-left-color: var(--accent);
            color: var(--text);
            background: color-mix(in srgb, var(--accent) 6%, transparent);
        }

        .syllabus-topic-index-item span {
            color: var(--accent);
            font-size: 10px;
            font-weight: 700;
        }

        .syllabus-topic-index-item strong {
            display: block;
            color: var(--text);
            font-size: 15px;
            font-weight: 700;
            line-height: 1.35;
        }

        .syllabus-topic-index-empty {
            margin: 6px 10px;
            color: var(--muted);
            font-size: 12px;
        }

        @media (min-width: 1121px) {
            .syllabus-list { position: relative; }

            .syllabus-topic-scroll-indicator {
                position: absolute;
                z-index: 0;
                top: 0;
                right: 0;
                left: 0;
                border-left: 3px solid var(--accent);
                border-radius: 4px;
                background: color-mix(in srgb, var(--accent) 18%, var(--surface));
                opacity: 0;
                pointer-events: none;
                transition: transform 100ms linear, height 100ms linear, opacity 140ms ease;
            }

            .syllabus-topic-scroll-indicator.visible { opacity: 1; }

            .syllabus-topic-index-item {
                position: relative;
                z-index: 1;
            }

            .syllabus-topic-index-item.active {
                border-left-color: transparent;
                background: transparent;
            }
        }

        .syllabus-page {
            overflow-y: auto;
            padding: 0;
            background: var(--bg);
        }

        .syllabus-page .syllabus-conversation {
            height: auto;
            min-height: 100%;
        }

        .syllabus-page .conversation-inner {
            display: block;
            width: min(100%, 1100px);
            min-height: 100%;
            margin: 0 auto;
            padding: 18px clamp(22px, 5vw, 70px) 72px;
            background-color: var(--surface);
            background-image: repeating-linear-gradient(
                to bottom,
                transparent 0,
                transparent 31px,
                rgba(128, 90, 213, 0.09) 32px
            );
            background-attachment: local;
        }

        [data-theme="dark"] .syllabus-page .conversation-inner {
            background-image: repeating-linear-gradient(
                to bottom,
                transparent 0,
                transparent 31px,
                rgba(175, 145, 255, 0.055) 32px
            );
        }

        .syllabus-topic-section {
            scroll-margin-top: 18px;
            padding: 34px 0 38px;
            border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
        }

        .syllabus-topic-section:first-child { padding-top: 12px; }
        .syllabus-topic-section:last-child { border-bottom: 0; }

        .syllabus-topic-section .syllabus-topic-header {
            margin-bottom: 20px;
            padding: 0 0 10px;
            border-bottom: 1px solid var(--border);
        }

        .syllabus-topic-section .syllabus-topic-header h1 {
            font-size: clamp(22px, 2.6vw, 30px);
        }

        .syllabus-topic-section .syllabus-topic-layout {
            display: block;
        }

        .syllabus-topic-section .syllabus-outline {
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }

        .syllabus-topic-section .syllabus-outline-heading { margin-bottom: 8px; }

        .syllabus-topic-section .syllabus-subtopic-list {
            gap: 0;
        }

        .syllabus-topic-section .syllabus-subtopic-row {
            overflow: visible;
            border: 0;
            border-bottom: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
            border-radius: 0;
            background: transparent;
        }

        .syllabus-topic-section .syllabus-subtopic-row summary {
            min-height: 48px;
            padding: 10px 0;
            cursor: default;
        }

        .syllabus-topic-section .syllabus-subtopic-row summary:hover { background: transparent; }
        .syllabus-topic-section .syllabus-subtopic-chevron { display: none; }

        .syllabus-topic-section .syllabus-subtopic-number {
            min-width: 42px;
            min-height: 30px;
            border-radius: 4px;
            background: color-mix(in srgb, var(--accent) 8%, transparent);
        }

        .syllabus-topic-section .syllabus-subtopic-detail {
            padding: 0 0 16px 52px;
            border-top: 0;
        }

        .syllabus-topic-section .syllabus-subtopic-detail ol {
            gap: 5px;
            margin: 1px 0 10px;
            font-size: 13px;
            line-height: 1.5;
        }

        .syllabus-topic-section .syllabus-subtopic-entry {
            position: relative;
            border-bottom: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
        }

        .syllabus-topic-section .syllabus-subtopic-row { border-bottom: 0; }

        .syllabus-topic-section .syllabus-subtopic-row summary {
            padding-right: 150px;
        }

        .syllabus-subtopic-actions {
            position: absolute;
            top: 7px;
            right: 0;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .syllabus-subtopic-check,
        .syllabus-subtopic-questions {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 34px;
            border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
            border-radius: 7px;
            font-family: inherit;
            font-weight: 700;
            transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
        }

        .syllabus-subtopic-check {
            width: 34px;
            padding: 0;
            color: var(--muted);
            background: color-mix(in srgb, var(--accent) 4%, var(--surface));
        }

        .syllabus-subtopic-check .icon { width: 18px; height: 18px; }

        .syllabus-subtopic-check:hover {
            border-color: var(--accent);
            color: var(--accent);
            background: color-mix(in srgb, var(--accent) 9%, var(--surface));
        }

        .syllabus-subtopic-check.checked {
            border-color: var(--accent);
            color: white;
            background: var(--accent);
        }

        .syllabus-subtopic-questions {
            gap: 4px;
            padding: 0 9px 0 10px;
            color: var(--accent);
            background: color-mix(in srgb, var(--accent) 7%, var(--surface));
            font-size: 12px;
        }

        .syllabus-subtopic-questions .icon { width: 15px; height: 15px; }

        .syllabus-subtopic-questions:hover {
            border-color: var(--accent);
            background: color-mix(in srgb, var(--accent) 13%, var(--surface));
        }

        .syllabus-topic-section .syllabus-topic-chat {
            width: min(100%, 680px);
            min-height: 0;
            margin-top: 20px;
            padding: 14px 0 0;
            border: 0;
            border-top: 1px solid var(--border);
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }

        .syllabus-topic-section .syllabus-topic-chat .notebook-messages {
            min-height: 0;
            max-height: 220px;
            padding-bottom: 12px;
        }

        .syllabus-topic-section .syllabus-prompt-actions { margin-bottom: 10px; }

        @media (max-width: 820px) {
            .syllabus-workspace { grid-template-columns: 1fr; }
            .syllabus-browser { border-right: 0; border-bottom: 1px solid var(--border); }
            .syllabus-list { max-height: 180px; }
            .syllabus-page .conversation-inner { padding: 16px 18px 48px; }
            .syllabus-topic-section { padding: 28px 0 32px; }
            .syllabus-topic-section .syllabus-subtopic-detail { padding-left: 36px; }
            .syllabus-topic-section .syllabus-subtopic-row summary { padding-right: 150px; }
        }

        @media (max-width: 980px) {
            .syllabus-topic-layout {
                grid-template-columns: 1fr;
            }

            .notebook-chat-box.syllabus-topic-chat { min-height: 0; }
        }

        @media (max-width: 620px) {
            .syllabus-topic-header {
                align-items: stretch;
                flex-direction: column;
                padding: 16px;
            }

            .syllabus-topical-action {
                width: 100%;
            }

            .syllabus-outline,
            .notebook-chat-box.syllabus-topic-chat {
                padding: 14px;
            }

            .syllabus-subtopic-detail {
                padding-left: 14px;
            }
        }

        .syllabus-card h2 {
            margin: 0 0 10px;
            color: var(--text);
            font-family: var(--font-ui);
            font-size: 16px;
            font-weight: 780;
            line-height: 1.2;
        }

        .topic-meta-row {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: -2px 0 12px;
        }

        .topic-chip {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            padding: 0 9px;
            border-radius: 999px;
            color: var(--muted);
            background: var(--surface-soft);
            font-size: 11px;
            font-weight: 750;
        }

        .topic-chip.accent {
            color: white;
            background: var(--accent);
        }

        .syllabus-practice-links {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: -2px 0 12px;
        }

        .syllabus-practice-link {
            min-height: 28px;
            padding: 4px 9px;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--muted);
            background: var(--bg);
            font-size: 11px;
            font-weight: 700;
        }

        .syllabus-practice-link:hover,
        .syllabus-practice-link.primary {
            color: var(--text);
            border-color: var(--accent);
            background: var(--surface-soft);
        }

        .syllabus-practice-link.primary {
            color: var(--accent);
        }

        .notebook-chat-box {
            display: flex;
            flex-direction: column;
            min-height: 210px;
            padding: 16px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
            box-shadow: none;
        }

        .syllabus-card:nth-child(2n) .notebook-chat-box {
            box-shadow: none;
        }

        .syllabus-card:nth-child(3n) .notebook-chat-box {
            box-shadow: none;
        }

        .notebook-messages {
            display: grid;
            gap: 12px;
            flex: 1;
            min-height: 128px;
            overflow-y: auto;
            padding: 2px 2px 14px;
        }

        .notebook-message {
            max-width: 94%;
            color: var(--text);
            font-size: 13px;
            line-height: 1.55;
            font-weight: 500;
        }

        .notebook-message p { margin: 0 0 9px; }
        .notebook-message p:last-child { margin-bottom: 0; }

        .notebook-message.user {
            justify-self: end;
            padding: 8px 10px;
            border: 0;
            border-radius: 8px;
            color: var(--user-text);
            background: var(--user);
            box-shadow: none;
        }

        .notebook-input-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 40px;
            gap: 8px;
            align-items: center;
            margin-top: auto;
            padding-top: 8px;
        }

        .notebook-input {
            min-height: 40px;
            padding: 9px 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            background: var(--bg);
            outline: 0;
            font-size: 13px;
            line-height: 1.35;
        }

        .notebook-input:empty::before {
            color: var(--muted);
            content: attr(data-placeholder);
            pointer-events: none;
        }

        .notebook-send {
            display: grid;
            place-items: center;
            width: 40px;
            height: 40px;
            border: 0;
            border-radius: 8px;
            color: #ffffff;
            background: var(--accent);
            box-shadow: none;
        }

        .notebook-send:hover {
            background: var(--accent-hover);
            box-shadow: none;
        }

        .syllabus-chat > .composer-wrap {
            display: none;
        }

        .workspace.chat-collapsed {
            grid-template-columns: minmax(0, 1fr);
        }

        .workspace.chat-collapsed .pdf-panel {
            border-right: 0;
        }

        .workspace.chat-collapsed .chat-panel {
            display: none;
        }

        .workspace.chat-only {
            grid-template-columns: minmax(0, 1fr);
        }

        .workspace.chat-only .pdf-panel,
        .workspace.chat-only .workspace-resizer {
            display: none;
        }

        .workspace.chat-only .chat-panel {
            grid-column: 1;
        }

        .pdf-panel,
        .chat-panel {
            display: flex;
            flex-direction: column;
            min-width: 0;
            min-height: 0;
        }

        .pdf-panel {
            position: relative;
            border-right: 1px solid var(--border);
            background: var(--surface);
        }

        .pdf-toolbar {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 6px;
            padding: 6px;
            border-bottom: 1px solid var(--border);
        }

        .practice-toolbar {
            display: none;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 12px;
            border-bottom: 1px solid var(--border);
            background: var(--surface-soft);
        }

        .workspace.practice-workspace .practice-toolbar {
            display: flex;
        }

        .workspace.practice-workspace .workspace-resizer {
            display: none;
        }

        .workspace.practice-workspace .pdf-panel,
        .workspace.practice-workspace .chat-panel {
            background: var(--surface);
        }

        .workspace.practice-workspace .pdf-toolbar,
        .workspace.practice-workspace .practice-toolbar {
            border-bottom-color: var(--border);
            background: var(--surface);
        }

        .practice-toolbar-copy {
            display: grid;
            gap: 2px;
            min-width: 0;
            color: var(--text);
            font-size: 13px;
        }

        .practice-toolbar-copy span {
            color: var(--muted);
            font-size: 12px;
        }

        .practice-toolbar-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .pdf-selects {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 170px;
            gap: 8px;
            min-width: 0;
        }

        .paper-picker-trigger {
            display: grid;
            min-width: 0;
            padding: 4px 10px;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            background: var(--bg);
            text-align: left;
        }

        .paper-picker-trigger span {
            color: var(--muted);
            font-size: 11px;
            line-height: 1.1;
        }

        .paper-picker-trigger strong {
            overflow: hidden;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.35;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .paper-picker-trigger:hover,
        .paper-picker-trigger[aria-expanded="true"] {
            border-color: var(--accent);
        }

        .paper-picker {
            position: absolute;
            z-index: 12;
            top: 45px;
            left: 8px;
            right: 8px;
            display: grid;
            gap: 12px;
            max-width: 680px;
            padding: 16px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--surface);
            box-shadow: 0 6px 8px rgba(15, 23, 42, 0.12);
        }

        .paper-picker[hidden] { display: none; }

        .paper-picker-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .paper-picker-header span,
        .paper-picker-item small,
        .paper-picker-empty {
            color: var(--muted);
            font-size: 12px;
        }

        .paper-picker-header h2 {
            margin: 2px 0 0;
            font-size: 16px;
            font-weight: 600;
        }

        .paper-picker-search { width: 100%; }

        .paper-period-heading {
            display: flex;
            grid-column: 1 / -1;
            align-items: center;
            gap: 9px;
            margin: 7px 0 1px;
            color: var(--muted);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.02em;
        }

        .paper-period-heading::before,
        .paper-period-heading::after {
            flex: 1;
            height: 1px;
            background: var(--border);
            content: '';
        }

        .paper-period-heading span {
            white-space: nowrap;
        }

        .paper-picker-list {
            display: grid;
            gap: 6px;
            max-height: min(48vh, 420px);
            overflow: auto;
        }

        .paper-picker-item {
            display: grid;
            grid-template-columns: 22px minmax(0, 1fr) 36px auto;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            background: var(--surface-soft);
            text-align: left;
        }

        .paper-picker-item > span { display: grid; gap: 2px; min-width: 0; }
        .paper-picker-item strong { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
        .paper-picker-item em { color: var(--muted); font-size: 12px; font-style: normal; }
        .paper-picker-item:hover,
        .paper-picker-item.active { border-color: var(--accent); background: var(--surface); }
        .paper-picker-item.active em { color: var(--accent); }
        .paper-picker-empty { margin: 4px 0; }

        .field {
            min-width: 0;
            height: 32px;
            padding: 0 10px;
            color: var(--text);
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            outline: 0;
        }

        .page-controls {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .page-input {
            width: 56px;
            text-align: center;
        }

        .toolbar-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 32px;
            padding: 0 9px;
            border: 1px solid var(--border);
            background: var(--surface-soft);
            white-space: nowrap;
        }

        .toolbar-button.accent {
            color: white;
            border-color: var(--accent);
            background: var(--accent);
        }

        .toolbar-button.accent:hover { background: var(--accent-hover); }
        .toolbar-button:disabled { cursor: not-allowed; opacity: 0.55; }

        .practice-action { display: none; }

        .workspace.practice-workspace .practice-action { display: inline-flex; }

        .workspace.practice-workspace #askPageButton { display: none; }

        .workspace.practice-workspace #openPdfButton,
        .workspace.practice-workspace #clearPracticePageButton {
            width: 32px;
            padding: 0;
            font-size: 0;
        }

        .workspace.practice-workspace #openPdfButton .icon,
        .workspace.practice-workspace #clearPracticePageButton .icon { margin: 0; }

        .pdf-frame-wrap {
            position: relative;
            flex: 1;
            min-height: 0;
            background: var(--pdf-bg);
        }

        .paper-answer-booklet,
        .topical-answer-booklet {
            overflow: auto;
            max-width: 960px;
            margin: 0 auto;
            padding: 24px;
            color: #1d2433;
            background: #f5f6f8;
        }

        .paper-answer-booklet {
            height: 100%;
        }

        .workspace:not(.paper-one-practice) .paper-answer-booklet {
            display: none;
        }

        .topical-answer-booklet {
            max-width: 360px;
            margin-top: 12px;
            padding: 0;
            border: 0;
            background: transparent;
        }

        .answer-booklet-header,
        .answer-booklet-footer,
        .answer-booklet-question-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .answer-booklet-header {
            padding: 0 0 18px;
            border-bottom: 1px solid #d7dbe3;
        }

        .answer-booklet-header span {
            display: block;
            color: #657084;
            font-size: 12px;
        }

        .answer-booklet-header h2 {
            margin: 3px 0 0;
            font-size: 20px;
            font-weight: 650;
        }

        .answer-booklet-header strong,
        .answer-booklet-question-heading > span {
            color: #203a72;
            font-size: 13px;
            font-weight: 650;
        }

        .answer-booklet-sheet {
            overflow: hidden;
            margin-top: 0;
            border: 1px solid #c6cedc;
            border-radius: 6px;
            background: #ffffff;
        }

        .answer-booklet-panel-header {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            padding: 7px 10px;
            border-bottom: 1px solid var(--border);
            background: color-mix(in srgb, var(--accent) 3%, var(--surface));
        }

        .answer-booklet-panel-title {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .answer-booklet-panel-title strong {
            display: grid;
            min-height: 19px;
            place-items: center;
            padding: 0 5px;
            border-radius: 4px;
            color: var(--text);
            background: color-mix(in srgb, var(--accent) 10%, var(--surface-soft));
            font-size: 12px;
            font-weight: 650;
            white-space: nowrap;
        }

        .answer-booklet-panel-title span {
            display: grid;
            min-width: 34px;
            min-height: 19px;
            place-items: center;
            padding: 0 5px;
            border-radius: 4px;
            color: var(--muted);
            background: color-mix(in srgb, var(--accent) 10%, var(--surface-soft));
            font-size: 10px;
            font-weight: 600;
            white-space: nowrap;
        }

        .answer-booklet-check-all {
            min-height: 27px;
            padding: 5px 10px;
            border: 1px solid var(--border);
            border-radius: 7px;
            color: var(--muted);
            background: var(--surface);
            font-size: 11px;
            font-weight: 600;
        }

        .answer-booklet-check-all:disabled {
            cursor: default;
            opacity: .7;
        }

        .answer-booklet-collapse-toggle {
            display: none;
        }

        .answer-booklet-question {
            display: grid;
            grid-template-columns: minmax(92px, 1fr) repeat(4, minmax(42px, 0.45fr));
            align-items: center;
        }

        .answer-booklet-question { min-height: 42px; border-bottom: 1px solid #dce1ea; }
        .answer-booklet-question:last-child { border-bottom: 0; }
        .answer-booklet-question-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
        .answer-booklet-question-heading strong { font-size: 14px; font-weight: 650; }
        .answer-booklet-question-heading > span { font-size: 11px; }

        .answer-booklet-options {
            display: contents;
        }

        .answer-booklet-choice {
            display: grid;
            grid-template-rows: 14px 8px;
            justify-items: center;
            align-content: center;
            gap: 2px;
            justify-self: center;
            width: 31px;
            height: 29px;
            padding: 0;
            border: 0;
            border-radius: 0;
            color: #293143;
            background: transparent;
            font-size: 12px;
            font-weight: 650;
            line-height: 1;
        }

        .answer-booklet-choice i { width: 19px; height: 6px; border: 1px solid #96a2b4; border-radius: 1px; }
        .answer-booklet-choice:hover i,
        .answer-booklet-choice:focus-visible i { border-color: #4c67b8; background: #edf1ff; }
        .answer-booklet-choice.selected i { border-color: #314d99; background: #5570be; }
        .answer-booklet-choice.correct i { border-color: #3d8a5f; background: #67a77b; }
        .answer-booklet-choice.incorrect i { border-color: #b95151; background: #cd7373; }
        .answer-booklet-choice span { font-weight: 650; }

        .answer-booklet-question--topical {
            grid-template-columns: minmax(50px, 0.8fr) repeat(4, minmax(32px, 0.5fr)) 34px;
            padding-right: 7px;
        }

        .answer-booklet-footer {
            margin-top: 18px;
            padding-top: 16px;
            border-top: 1px solid #d7dbe3;
            color: #657084;
            font-size: 12px;
        }

        .answer-booklet-check {
            min-height: 34px;
            padding: 7px 12px;
            border-radius: 7px;
            color: #ffffff;
            background: #314d99;
            font-size: 12px;
            font-weight: 650;
        }

        .answer-booklet-check:hover,
        .answer-booklet-check:focus-visible { background: #263e80; }
        .answer-booklet-check:disabled { cursor: not-allowed; opacity: 0.45; }
        .answer-booklet-check--arrow { display: grid; grid-column: 6; justify-self: center; width: 29px; min-height: 29px; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 7px; color: var(--muted); background: var(--surface); }
        .answer-booklet-check--arrow:hover,
        .answer-booklet-check--arrow:focus-visible { color: var(--text); background: var(--surface-soft); }
        .answer-booklet-check--arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
        .answer-booklet-loading { padding: 24px; color: var(--muted); }

        .workspace.paper-one-practice .pdf-toolbar #askPageButton,
        .workspace.paper-one-practice .pdf-toolbar #openPdfButton,
        .workspace.paper-one-practice .pdf-toolbar .page-controls,
        .workspace.paper-one-practice .practice-input-mode,
        .topical-question-view.paper-one-question .topical-answer-section { display: none; }

        .paper-one-view-switcher {
            display: inline-flex;
            gap: 2px;
            padding: 2px;
            border: 1px solid var(--border);
            border-radius: 7px;
            background: var(--surface-soft);
        }

        .paper-one-view-switcher button {
            min-height: 28px;
            padding: 5px 9px;
            border: 0;
            border-radius: 5px;
            color: var(--muted);
            background: transparent;
            font-size: 12px;
            font-weight: 600;
        }

        .paper-one-view-switcher button.active {
            color: var(--text);
            background: var(--surface);
            box-shadow: 0 1px 2px rgba(23, 31, 45, .12);
        }

        @media (max-width: 700px) {
            .paper-answer-booklet { padding: 14px; }
            .answer-booklet-question { grid-template-columns: minmax(70px, 1fr) repeat(4, 38px); }
            .answer-booklet-question--topical { grid-template-columns: minmax(44px, 1fr) repeat(4, 33px) 32px; }
            .answer-booklet-question-heading { padding-left: 10px; padding-right: 8px; }
            .answer-booklet-footer { align-items: flex-start; flex-direction: column; }
        }

        .pdf-stage {
            display: block;
            width: 100%;
            height: 100%;
            overflow: auto;
            padding: 18px 14px 28px;
            background: var(--pdf-bg);
            scroll-behavior: smooth;
            scrollbar-gutter: stable;
        }

        .pdf-page-stack,
        .topical-pdf-page-stack {
            display: flex;
            width: 100%;
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }

        .pdf-page-stack[hidden],
        .topical-pdf-page-stack[hidden] {
            display: none;
        }

        .pdf-page-shell,
        .topical-pdf-page-shell {
            position: relative;
            max-width: 100%;
            flex: 0 0 auto;
            overflow: visible;
            background: #fff;
        }

        .pdf-page-shell:not(.rendered),
        .topical-pdf-page-shell:not(.rendered) {
            border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
        }

        .pdf-page-placeholder {
            position: absolute;
            top: 18px;
            left: 50%;
            z-index: 1;
            color: #7b818a;
            font-size: 12px;
            transform: translateX(-50%);
        }

        .pdf-canvas {
            display: block;
            width: 100%;
            max-width: 100%;
            height: auto;
            background: #fff;
            box-shadow: none;
        }

        [data-theme="dark"] body.invert-pdfs-on-dark-mode { --pdf-bg: #111111; }

        [data-theme="dark"] body.invert-pdfs-on-dark-mode :is(.pdf-page-shell, .topical-pdf-page-shell) {
            background: var(--pdf-bg);
        }

        [data-theme="dark"] body.invert-pdfs-on-dark-mode :is(.pdf-canvas, .topical-pdf-canvas) {
            filter: invert(1);
            mix-blend-mode: screen;
        }

        .pdf-text-layer {
            position: absolute;
            inset: 0;
            z-index: 2;
            overflow: hidden;
            line-height: 1;
            text-align: initial;
            text-size-adjust: none;
            transform-origin: 0 0;
            user-select: text;
        }

        .pdf-text-layer :is(span, br) {
            position: absolute;
            color: transparent;
            cursor: text;
            white-space: pre;
            transform-origin: 0 0;
        }

        .pdf-text-layer ::selection {
            background: Highlight;
        }

        .practice-layer {
            position: absolute;
            inset: 0;
            display: none;
            z-index: 3;
            pointer-events: none;
        }

        .workspace.practice-workspace .practice-layer {
            display: block;
            pointer-events: auto;
            cursor: text;
        }

        .practice-input-mode {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            padding: 3px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface-soft);
        }

        .practice-input-mode button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 30px;
            padding: 5px 9px;
            border: 0;
            border-radius: 6px;
            color: var(--muted);
            background: transparent;
            font-size: 12px;
            font-weight: 600;
        }

        .practice-input-mode button.active {
            color: var(--text);
            background: var(--surface);
            box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 12%, transparent);
        }

        .topical-input-mode {
            flex: 0 0 auto;
        }

        .workspace.practice-workspace .practice-layer.pen-active { cursor: crosshair; }
        .practice-layer.pen-active.eraser-active { cursor: cell; }

        .practice-ink-canvas {
            position: absolute;
            inset: 0;
            z-index: 2;
            display: block;
            pointer-events: none;
        }

        .practice-ink-feedback {
            position: absolute;
            z-index: 8;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            min-height: 22px;
            max-width: min(250px, 70%);
            padding: 3px 6px;
            border: 1px solid currentColor;
            border-radius: 4px;
            background: #ffffff;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
            font-family: "Courier New", monospace;
            font-size: 10px;
            line-height: 1.2;
            text-align: left;
        }

        .practice-ink-feedback.correct { color: #20864a; }
        .practice-ink-feedback.partial { color: #ad7500; }
        .practice-ink-feedback.incorrect { color: #cf3030; }
        .practice-ink-feedback small { display: block; flex-basis: 100%; margin-top: 3px; font-family: var(--font-ui); font-size: 11px; line-height: 1.35; }

        .practice-note {
            --answer-accent: #4b61ff;
            --answer-accent-soft: #f2f3ff;
            --answer-border: #cfd4ff;
            --answer-ink: #203b68;
            position: absolute;
            z-index: 4;
            min-width: 160px;
            box-sizing: border-box;
            min-height: 36px;
            overflow: visible;
            border: 1px solid transparent;
            border-radius: 8px;
            background: transparent;
            box-shadow: none;
            color: var(--answer-ink);
            cursor: text;
        }

        .practice-note:not(.has-content),
        .practice-note:focus-within {
            border-color: var(--answer-accent);
            background: rgba(255, 255, 255, 0.94);
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
        }

        .practice-note-writing-row {
            display: flex;
            box-sizing: border-box;
            align-items: center;
            min-height: 36px;
            padding: 4px 8px;
        }

        .practice-note-math-toggle,
        .practice-note-delete,
        .practice-note-drag {
            display: grid;
            place-items: center;
            width: 32px;
            height: 32px;
            min-height: 32px;
            padding: 0;
            border: 1px solid var(--answer-border);
            border-radius: 8px;
            color: var(--answer-ink);
            background: #ffffff;
            font-family: var(--font-ui);
            font-size: 18px;
            line-height: 1;
        }

        .practice-note-math-toggle:hover,
        .practice-note-math-toggle.active {
            color: #ffffff;
            border-color: var(--answer-accent);
            background: var(--answer-accent);
        }

        .practice-note-math-toggle {
            position: absolute;
            top: 2px;
            right: calc(100% + 8px);
        }

        .practice-note.has-content:not(:focus-within) .practice-note-math-toggle {
            display: none;
        }

        .practice-note-delete,
        .practice-note-drag {
            position: absolute;
            top: -10px;
            display: none;
            width: 20px;
            height: 20px;
            min-height: 20px;
            border: 1px solid var(--answer-border);
            border-radius: 50%;
            color: var(--answer-ink);
            background: #ffffff;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
            font-family: inherit;
            font-size: 12px;
        }

        .practice-note-delete { right: -10px; }
        .practice-note-drag { display: none !important; }

        .practice-note:focus-within .practice-note-delete,
        .practice-note:focus-within .practice-note-drag {
            display: grid;
        }

        .practice-note-delete:hover {
            color: #ffffff;
            border-color: var(--danger);
            background: var(--danger);
        }

        .practice-grade-sticker {
            position: absolute;
            z-index: 9;
            right: -8px;
            bottom: -12px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            min-height: 22px;
            padding: 2px 5px;
            border: 1px solid currentColor;
            border-radius: 2px;
            background: #ffffff;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
            font-family: "Courier New", monospace;
            font-size: 10px;
            line-height: 1;
        }

        .practice-grade-sticker strong { font-weight: 700; }
        .practice-grade-sticker.correct { color: #20864a; }
        .practice-grade-sticker.partial { color: #ad7500; }
        .practice-grade-sticker.incorrect { color: #cf3030; }

        .practice-grade-detail {
            position: absolute;
            z-index: 10;
            right: 0;
            bottom: calc(100% + 8px);
            display: grid;
            gap: 4px;
            width: min(260px, 80vw);
            padding: 8px 9px;
            border: 1px solid currentColor;
            border-radius: 4px;
            background: #ffffff;
            box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14);
            font-size: 11px;
            line-height: 1.35;
        }

        .practice-grade-detail.correct { color: #176b39; }
        .practice-grade-detail.partial { color: #865900; }
        .practice-grade-detail.incorrect { color: #a72323; }
        .practice-grade-detail[hidden] { display: none; }

        .practice-note-body {
            min-width: 0;
            min-height: 30px;
            flex: 1;
            padding: 0;
            outline: 0;
            font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
            font-size: 17px;
            font-weight: 400;
            line-height: 1.45;
            white-space: pre-wrap;
        }

        .practice-note-body .math-token {
            font-family: "Cambria Math", Cambria, serif;
        }

        .practice-note-body .practice-inline-math-host {
            display: inline-block;
            vertical-align: middle;
        }

        .practice-note-body .practice-inline-math-field {
            font-family: "Cambria Math", Cambria, serif;
            font-size: 19px;
            color: #172033;
            background: #ffffff;
            margin-inline: 2px;
            --caret-color: var(--answer-accent);
            --selection-background-color: color-mix(in srgb, var(--answer-accent) 28%, transparent);
            --contains-highlight-background-color: color-mix(in srgb, var(--answer-accent) 14%, transparent);
            --placeholder-color: var(--answer-accent);
            --placeholder-opacity: 0.8;
        }

        .practice-note-body:empty::before {
            color: #7b818a;
            content: attr(data-placeholder);
            pointer-events: none;
        }

        .practice-math-strip {
            position: absolute;
            z-index: 8;
            bottom: calc(100% + 8px);
            left: 0;
            display: none;
            gap: 12px;
            width: min(660px, calc(100vw - 24px));
            padding: 12px 12px 9px;
            border: 1px solid var(--answer-border);
            border-radius: 10px;
            color: var(--answer-ink);
            background: #ffffff;
            box-shadow: 0 4px 8px rgba(32, 59, 104, 0.16);
            overflow-x: auto;
            overflow-y: hidden;
            overscroll-behavior-x: contain;
            scrollbar-color: var(--answer-accent) #e7eaf1;
            scrollbar-width: thin;
            scroll-snap-type: x proximity;
        }

        .practice-note.math-open .practice-math-strip {
            display: flex;
            align-items: stretch;
        }

        .practice-math-group {
            flex: 0 0 252px;
            display: grid;
            grid-template-rows: auto 1fr;
            gap: 8px;
            align-content: start;
            padding-right: 12px;
            border-right: 1px solid #e6e8ef;
            scroll-snap-align: start;
        }

        .practice-math-group:last-child {
            padding-right: 0;
            border-right: 0;
        }

        .practice-math-group.is-suggested .practice-math-group-label,
        .practice-math-group.is-recent .practice-math-group-label,
        .math-palette-group.is-recent .math-palette-group-label {
            color: var(--answer-accent);
        }

        .practice-math-group.is-suggested {
            background: color-mix(in srgb, var(--answer-accent) 6%, #ffffff);
            border-radius: 8px;
            padding: 8px 12px 8px 8px;
        }

        .practice-math-group-label {
            margin: 0;
            color: #50596b;
            font-family: var(--font-ui);
            font-size: 11px;
            font-weight: 700;
            line-height: 1;
            letter-spacing: 0.02em;
        }

        .practice-math-button-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(48px, 1fr));
            gap: 5px;
            align-content: start;
        }

        .math-recent-empty {
            grid-column: 1 / -1;
            margin: 2px 0 0;
            color: #78808e;
            font-family: var(--font-ui);
            font-size: 11px;
            font-weight: 400;
            line-height: 1.35;
        }

        .practice-math-button {
            display: grid;
            place-items: center;
            min-width: 34px;
            min-height: 32px;
            padding: 0 6px;
            border: 1px solid #e0e2ec;
            border-radius: 7px;
            color: var(--answer-ink);
            background: #f4f4f6;
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
        }

        .practice-math-button:hover {
            border-color: var(--answer-accent);
            color: #ffffff;
            background: var(--answer-accent);
        }

        .practice-math-strip::-webkit-scrollbar,
        .math-palette::-webkit-scrollbar {
            height: 9px;
        }

        .practice-math-strip::-webkit-scrollbar-track,
        .math-palette::-webkit-scrollbar-track {
            border-radius: 999px;
            background: #e7eaf1;
        }

        .practice-math-strip::-webkit-scrollbar-thumb,
        .math-palette::-webkit-scrollbar-thumb {
            border: 2px solid #e7eaf1;
            border-radius: 999px;
            background: var(--answer-accent);
        }

        .practice-note-math-toggle:focus-visible,
        .practice-note-delete:focus-visible,
        .practice-grade-sticker:focus-visible,
        .practice-math-button:focus-visible {
            outline: 2px solid color-mix(in srgb, var(--answer-accent) 55%, transparent);
            outline-offset: 2px;
        }

        .empty-pdf {
            display: grid;
            place-items: center;
            height: 100%;
            padding: 24px;
            color: var(--muted);
            text-align: center;
            background: var(--bg);
        }

        .paper-selection-stage {
            display: grid;
            align-content: start;
            gap: 14px;
            height: 100%;
            max-width: 760px;
            margin: 0 auto;
            padding: 30px;
            overflow: auto;
            scroll-padding-top: 30px;
        }

        .paper-selection-stage[hidden] { display: none; }

        .paper-selection-heading span {
            color: var(--muted);
            font-size: 12px;
        }

        .paper-selection-heading h2 {
            margin: 3px 0 4px;
            color: var(--text);
            font-size: 20px;
            font-weight: 600;
        }

        .paper-selection-heading p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
        }

        .paper-selection-search { width: 100%; }

        .paper-selection-list {
            display: grid;
            gap: 8px;
        }

        .paper-selection-item {
            display: grid;
            grid-template-columns: 28px minmax(0, 1fr) 36px auto;
            align-items: center;
            gap: 12px;
            width: 100%;
            padding: 14px;
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text);
            background: var(--surface);
            text-align: left;
        }

        .paper-selection-item > span { display: grid; gap: 3px; min-width: 0; }
        .paper-selection-item strong { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
        .paper-selection-item small,
        .paper-selection-item em { color: var(--muted); font-size: 12px; font-style: normal; }
        .paper-selection-item:hover { border-color: var(--accent); background: var(--surface-soft); }

        .selector-progress-cell {
            --dashboard-accent: #4b61ff;
            display: grid;
            place-items: center;
            min-width: 34px;
            width: 34px;
            height: 30px;
            padding: 0;
            cursor: pointer;
            font-size: 10px;
            border-color: #4b61ff;
            color: #4b61ff;
            background: var(--surface-soft);
        }

        [data-theme="dark"] .selector-progress-cell {
            --dashboard-accent: #7889ff;
            border-color: #7889ff;
            color: #7889ff;
            background: var(--surface-soft);
        }

        .selector-progress-cell:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        .pdf-loading {
            align-self: center;
            justify-self: center;
            color: #d1d5db;
            font-size: 13px;
        }

        .chat-panel {
            position: relative;
            background: var(--bg);
        }

        .conversation {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 22px 16px 92px;
        }

        .conversation-inner {
            display: flex;
            flex-direction: column;
            gap: 18px;
            width: min(100%, 900px);
            margin: 0 auto;
        }

        .welcome {
            display: grid;
            gap: 14px;
            margin: 6vh auto 12px;
            text-align: center;
        }

        .welcome h1 {
            margin: 0;
            font-size: clamp(26px, 4vw, 38px);
            line-height: 1.08;
            letter-spacing: 0;
        }

        .welcome p {
            max-width: 520px;
            margin: 0 auto;
            color: var(--muted);
            line-height: 1.55;
        }

        .prompt-cards {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            max-width: 620px;
            margin: 10px auto 0;
        }

        .prompt-card {
            min-height: 74px;
            padding: 14px;
            border: 1px solid var(--border);
            background: var(--surface);
            text-align: left;
        }

        .prompt-card strong {
            display: block;
            margin-bottom: 4px;
            font-size: 14px;
        }

        .prompt-card span {
            color: var(--muted);
            font-size: 13px;
            line-height: 1.35;
        }

        .message-row {
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }

        .message-row.user {
            justify-content: flex-end;
            gap: 8px;
        }

        .avatar {
            display: grid;
            place-items: center;
            width: 30px;
            height: 30px;
            margin-top: 3px;
            border-radius: 8px;
            background: var(--surface-soft);
            color: var(--text);
            font-size: 13px;
            font-weight: 750;
        }

        .message-row .assistant-avatar {
            flex: 0 0 30px;
            overflow: hidden;
            padding: 0;
            border: 0;
            outline: 0;
            background: transparent;
        }

        .message-row .assistant-avatar img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
            border: 0;
            outline: 0;
        }

        .message-row.user .avatar {
            display: grid;
            flex: 0 0 30px;
            width: 30px;
            height: 30px;
            margin-top: 3px;
            overflow: hidden;
            border: 1px solid #383838;
            border-radius: 50%;
            background: #242424;
        }

        [data-theme="light"] .message-row.user .avatar {
            border-color: #dfe3e8;
            background: #f3f4f6;
        }

        .message-row.user .user-avatar .avatar-art {
            display: block;
            width: 100%;
            height: 100%;
        }

        .message {
            max-width: min(82%, 620px);
            padding: 13px 16px;
            border-radius: 8px;
            line-height: 1.58;
            overflow-wrap: anywhere;
        }

        .message.assistant {
            max-width: 100%;
            padding: 4px 0 8px;
            border: 0;
            border-radius: 0;
            background: transparent;
        }

        .chat-thinking {
            min-height: 30px;
        }

        .typesafe-testing-notice {
            display: inline-flex;
            margin-top: 10px;
            padding: 4px 8px;
            border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
            border-radius: 999px;
            color: var(--accent);
            background: color-mix(in srgb, var(--accent) 8%, transparent);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .02em;
        }

        .typesafe-testing-notice.is-not-used {
            border-color: color-mix(in srgb, var(--muted-text, #6b7280) 32%, transparent);
            color: var(--muted-text, #6b7280);
            background: color-mix(in srgb, var(--muted-text, #6b7280) 8%, transparent);
        }

        .chat-thinking-state {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            min-height: 30px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 600;
        }

        .chat-thinking-indicator {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            width: 21px;
        }

        .chat-thinking-indicator i {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: currentColor;
            animation: chat-thinking-pulse 1.1s ease-in-out infinite;
        }

        .chat-thinking-indicator i:nth-child(2) { animation-delay: 120ms; }
        .chat-thinking-indicator i:nth-child(3) { animation-delay: 240ms; }

        @keyframes chat-thinking-pulse {
            0%, 60%, 100% { opacity: 0.32; transform: translateY(0); }
            30% { opacity: 1; transform: translateY(-2px); }
        }

        @media (prefers-reduced-motion: reduce) {
            .chat-thinking-indicator i { animation: none; opacity: 0.65; }
        }

        .chat-syllabus-source {
            display: inline-flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 5px 8px;
            max-width: 100%;
            margin: 8px 0;
            padding: 7px 9px;
            border-left: 3px solid var(--accent);
            border-radius: 5px;
            background: color-mix(in srgb, var(--accent) 7%, var(--surface));
            color: var(--text);
            vertical-align: middle;
        }

        .chat-syllabus-source-kicker {
            color: var(--accent);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        .chat-syllabus-source-title {
            font-size: 12px;
            font-weight: 700;
        }

        .chat-syllabus-source-point {
            flex-basis: 100%;
            color: var(--muted);
            font-size: 11px;
            line-height: 1.4;
        }

        .chat-syllabus-source-covered-label {
            flex-basis: 100%;
            margin-top: 2px;
            color: var(--muted);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .chat-syllabus-source-covered {
            flex-basis: 100%;
            margin: 0 0 0 16px;
            padding: 0;
            color: var(--text);
            font-size: 11px;
            line-height: 1.4;
        }

        .chat-syllabus-source-covered li + li {
            margin-top: 3px;
        }

        .chat-syllabus-inline-point {
            display: block;
            margin: 14px 0;
            color: #f97316;
            font-size: inherit;
            font-weight: 700;
            line-height: inherit;
        }

        .chat-syllabus-inline-point-label {
            display: block;
            margin-bottom: 3px;
            color: inherit;
            font-size: 0.72em;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        .chat-syllabus-inline-point-text {
            display: block;
            font-size: inherit;
            font-weight: inherit;
        }

        [data-theme="dark"] .chat-syllabus-inline-point {
            color: #ff9b45;
        }

        .message.user {
            padding: 6px 12px;
            border: 1px solid #e1e4e8;
            border-radius: 18px;
            color: #1f2328;
            background: #f4f5f7;
        }

        [data-theme="dark"] .message.user {
            border-color: #383838;
            color: #ffffff;
            background: #242424;
        }

        .message p { margin: 0 0 10px; }
        .message p:last-child { margin-bottom: 0; }
        .message ul, .message ol { margin: 8px 0 8px 22px; padding: 0; }

        .message-section-heading {
            margin: 16px 0 7px;
            padding-top: 12px;
            border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
            color: var(--text);
            font-size: 0.94em;
            font-weight: 700;
            line-height: 1.3;
        }

        .message-section-heading-exam {
            padding: 8px 10px;
            border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border));
            border-left: 3px solid var(--accent);
            border-radius: 7px;
            background: color-mix(in srgb, var(--accent) 8%, var(--surface));
        }

        .message-section-heading:first-child {
            margin-top: 0;
            padding-top: 0;
            border-top: 0;
        }

        .message-equation {
            display: block;
            overflow-x: auto;
            margin: 10px 0;
            padding: 7px 10px;
            border: 0;
            border-radius: 7px;
            color: var(--text);
            background: #f1f2f4;
            text-align: center;
        }

        .message-equation mjx-container[display="true"] {
            margin: 0 !important;
        }

        .message-equation mjx-container {
            max-width: 100%;
            font-size: 0.82em;
        }

        .message code {
            padding: 2px 5px;
            border-radius: 5px;
            background: var(--surface-soft);
            font-family: "Cascadia Code", Consolas, monospace;
            font-size: 0.92em;
        }

        .message.user code { background: rgba(255, 255, 255, 0.18); }

        .message pre {
            overflow-x: auto;
            padding: 12px;
            border-radius: 8px;
            background: var(--surface-soft);
        }

        .chat-knowledge-diagrams {
            display: grid;
            gap: 8px;
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px solid var(--border);
        }

        .chat-knowledge-diagrams-heading {
            color: var(--muted);
            font-size: 10px;
            font-weight: 700;
        }

        .chat-knowledge-diagrams-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 8px;
        }

        .chat-knowledge-inline-media {
            width: min(100%, 520px);
            margin: 11px 0;
            padding: 8px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface-soft);
        }

        .chat-knowledge-inline-media img {
            display: block;
            width: 100%;
            max-height: 300px;
            object-fit: contain;
            border-radius: 5px;
            background: var(--surface);
        }

        .chat-knowledge-inline-media figcaption {
            margin-top: 6px;
            color: var(--muted);
            font-size: 10px;
            line-height: 1.35;
        }

        .chat-knowledge-inline-media figcaption strong,
        .chat-knowledge-inline-media figcaption span {
            display: block;
        }

        .chat-knowledge-inline-media figcaption strong {
            margin-bottom: 2px;
            color: var(--text);
        }

        .chat-knowledge-diagram {
            margin: 0;
            padding: 7px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface-soft);
        }

        .chat-knowledge-diagram img {
            display: block;
            width: 100%;
            max-height: 220px;
            object-fit: contain;
            border-radius: 4px;
            background: var(--surface);
        }

        .chat-knowledge-diagram figcaption {
            margin-top: 5px;
            color: var(--muted);
            font-size: 10px;
            line-height: 1.35;
        }

        .chat-knowledge-exam-definitions {
            display: grid;
            gap: 8px;
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px solid var(--border);
        }

        .chat-knowledge-exam-definitions-heading {
            color: var(--muted);
            font-size: 10px;
            font-weight: 700;
        }

        .chat-knowledge-exam-definitions-list {
            display: grid;
            gap: 7px;
        }

        .chat-knowledge-definition-table {
            display: grid;
            width: min(100%, 680px);
            margin: 12px 0;
            overflow: hidden;
            border: 1px solid color-mix(in srgb, var(--text) 42%, var(--border));
            border-radius: 8px;
            background: var(--surface);
            font-size: 12px;
            line-height: 1.45;
        }

        .chat-knowledge-definition-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 54px;
        }

        .chat-knowledge-definition-row + .chat-knowledge-definition-row {
            border-top: 1px solid color-mix(in srgb, var(--text) 34%, var(--border));
        }

        .chat-knowledge-definition-row > div {
            min-width: 0;
            padding: 7px 9px;
        }

        .chat-knowledge-definition-row > div:last-child {
            display: grid;
            place-items: center end;
            border-left: 1px solid color-mix(in srgb, var(--text) 34%, var(--border));
            font-weight: 600;
            white-space: nowrap;
        }

        .chat-knowledge-definition-header {
            background: var(--surface-soft);
            font-weight: 600;
        }

        .chat-knowledge-definition-header > div:last-child {
            place-items: center;
        }

        .chat-knowledge-definition-table p {
            margin: 0;
        }

        .chat-knowledge-example-questions {
            display: grid;
            gap: 4px;
            width: 100%;
            min-width: 0;
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px solid var(--border);
        }

        .chat-knowledge-example-questions-header {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            padding: 0 8px 3px;
        }

        .chat-knowledge-example-questions-heading {
            color: var(--text);
            font-size: 12px;
            font-weight: 600;
        }

        .chat-knowledge-example-questions-method {
            color: var(--muted);
            font-size: 10px;
            line-height: 1.35;
            text-align: right;
        }

        .chat-knowledge-example-questions-list {
            display: grid;
            gap: 0;
            min-width: 0;
            max-height: 360px;
            overflow-y: auto;
            scrollbar-width: thin;
        }

        .chat-knowledge-example-question {
            display: grid;
            grid-template-columns: 20px minmax(0, 1fr) 16px;
            align-items: center;
            gap: 11px;
            min-height: 48px;
            width: 100%;
            min-width: 0;
            padding: 5px 8px;
            border: 0;
            border-radius: 8px;
            color: var(--text);
            background: transparent;
            text-decoration: none;
            box-sizing: border-box;
        }

        .chat-knowledge-example-question:hover,
        .chat-knowledge-example-question:focus-visible {
            color: var(--text);
            background: color-mix(in srgb, var(--surface-hover) 72%, transparent);
        }

        .chat-knowledge-example-question:focus-visible {
            outline: 2px solid color-mix(in srgb, var(--accent) 56%, transparent);
            outline-offset: -2px;
        }

        .chat-knowledge-example-question-marker {
            width: 17px;
            height: 17px;
            border: 2px solid color-mix(in srgb, var(--muted) 24%, var(--surface));
            border-radius: 50%;
            box-sizing: border-box;
        }

        .chat-knowledge-example-question-copy {
            display: grid;
            gap: 3px;
            min-width: 0;
        }

        .chat-knowledge-example-question-copy strong {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.35;
        }

        .chat-knowledge-example-question-copy small {
            overflow: hidden;
            color: var(--muted);
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 11px;
            line-height: 1.35;
        }

        .chat-knowledge-example-question .icon {
            width: 14px;
            height: 14px;
            color: var(--muted);
        }

        @media (max-width: 520px) {
            .chat-knowledge-example-questions-header {
                align-items: flex-start;
                flex-direction: column;
                gap: 2px;
            }

            .chat-knowledge-example-questions-method { text-align: left; }
            .chat-knowledge-example-question { grid-template-columns: 18px minmax(0, 1fr) 14px; gap: 9px; padding-inline: 6px; }
            .chat-knowledge-example-questions-list { max-height: 42vh; }
        }

        .composer-wrap {
            padding: 12px 16px 18px;
            border-top: 1px solid var(--border);
            background: var(--bg);
        }

        .composer {
            position: relative;
            display: flex;
            align-items: flex-end;
            gap: 10px;
            width: min(100%, 760px);
            margin: 0 auto;
            padding: 10px 10px 10px 14px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
        }

        .composer-tool-button {
            display: grid;
            place-items: center;
            width: 42px;
            height: 42px;
            flex: 0 0 auto;
            color: var(--text);
            background: var(--surface-soft);
            border-radius: 8px;
            font-size: 18px;
            font-weight: 700;
            line-height: 1;
        }

        .composer-tool-button:hover {
            background: var(--surface-hover);
        }

        .math-palette {
            position: absolute;
            left: 10px;
            bottom: calc(100% + 8px);
            z-index: 12;
            display: flex;
            align-items: stretch;
            gap: 12px;
            width: min(660px, calc(100vw - 32px));
            padding: 12px 12px 9px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
            overflow-x: auto;
            overflow-y: hidden;
            overscroll-behavior-x: contain;
            scrollbar-color: var(--answer-accent) #e7eaf1;
            scrollbar-width: thin;
            scroll-snap-type: x proximity;
        }

        .math-palette-group {
            flex: 0 0 252px;
            display: grid;
            grid-template-rows: auto 1fr;
            gap: 8px;
            align-content: start;
            padding-right: 12px;
            border-right: 1px solid var(--border);
            scroll-snap-align: start;
        }

        .math-palette-group:last-child {
            padding-right: 0;
            border-right: 0;
        }

        .math-palette-group-label {
            margin: 0;
            color: var(--text-soft);
            font-size: 11px;
            font-weight: 700;
            line-height: 1;
            letter-spacing: 0.02em;
        }

        .math-palette-button-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(48px, 1fr));
            gap: 5px;
            align-content: start;
        }

        .math-option {
            display: grid;
            place-items: center;
            min-height: 34px;
            padding: 0 6px;
            color: var(--text);
            background: var(--surface-soft);
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 14px;
            font-weight: 650;
            white-space: nowrap;
        }

        .math-option:hover {
            background: var(--surface-hover);
        }

        .composer input[type="hidden"] { display: none; }

        .composer-input-wrap {
            display: grid;
            gap: 6px;
            flex: 1;
            min-width: 0;
        }

        .math-editor {
            display: block;
            width: 100%;
            min-height: 42px;
            max-height: 150px;
            overflow-y: auto;
            padding: 9px 2px;
            color: var(--text);
            background: transparent;
            border: 0;
            outline: 0;
            line-height: 1.5;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
        }

        .math-editor:empty::before {
            color: var(--muted);
            content: attr(data-placeholder);
            pointer-events: none;
        }

        .inline-math-field {
            display: inline-block;
            min-width: 34px;
            min-height: 30px;
            margin: 0 2px;
            padding: 1px 3px;
            color: var(--text);
            background: var(--surface-soft);
            border: 0;
            border-radius: 4px;
            outline: 0;
            vertical-align: middle;
            --caret-color: var(--accent);
            --selection-background-color: color-mix(in srgb, var(--accent) 22%, transparent);
            --contains-highlight-background-color: color-mix(in srgb, var(--accent) 10%, transparent);
        }

        .inline-math-field:focus-within {
            background: var(--surface-soft);
        }

        .inline-math-field::part(menu-toggle),
        .inline-math-field::part(virtual-keyboard-toggle) {
            display: none;
        }

        .inline-math-field:not(:defined) {
            display: none;
        }

        .math-token {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin: 0;
            vertical-align: middle;
        }

        .math-slot {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 24px;
            min-height: 24px;
            padding: 2px 4px;
            color: var(--text);
            border: 1px solid color-mix(in srgb, var(--muted) 56%, transparent);
            border-radius: 4px;
            background: color-mix(in srgb, var(--surface-soft) 64%, transparent);
            outline: 0;
            vertical-align: middle;
            white-space: normal;
        }

        .math-slot:focus {
            border-color: var(--accent);
            background: color-mix(in srgb, var(--accent) 8%, var(--surface-soft));
        }

        .fraction-token {
            display: inline-grid;
            grid-template-rows: auto 1px auto;
            align-items: center;
            justify-items: center;
            gap: 2px;
        }

        .fraction-line {
            width: 100%;
            min-width: 36px;
            height: 1px;
            background: currentColor;
        }

        .integral-token {
            align-items: center;
        }

        .integral-limits {
            display: inline-grid;
            gap: 3px;
            align-items: center;
        }

        .integral-symbol {
            font-size: 40px;
            line-height: 1;
        }

        .power-token {
            align-items: flex-start;
        }

        .power-token .math-slot[data-slot="exponent"] {
            min-width: 18px;
            min-height: 18px;
            padding: 1px 3px;
            font-size: 0.76em;
        }

        .root-symbol {
            font-size: 28px;
            line-height: 1;
        }

        .plain-math-token {
            padding: 0;
            font-weight: 650;
        }

        .send-button {
            display: grid;
            place-items: center;
            width: 42px;
            height: 42px;
            color: white;
            background: var(--accent);
        }

        .send-button:hover { background: var(--accent-hover); }
        .send-button:disabled { cursor: not-allowed; opacity: 0.55; }

        .status-line {
            width: min(100%, 760px);
            margin: 8px auto 0;
            color: var(--muted);
            font-size: 12px;
            text-align: center;
        }

        .status-line.warning { color: var(--danger); }

        .topical-workspace {
            position: relative;
            isolation: isolate;
            display: grid;
            grid-template-columns: minmax(348px, 390px) minmax(0, 1fr);
            grid-template-rows: auto minmax(0, 1fr);
            min-height: 0;
            overflow: hidden;
            background: var(--bg);
        }

        #topicalWorkspace[hidden] {
            display: none !important;
        }

        .topical-workspace > * {
            position: relative;
            z-index: 1;
        }

        .topical-aurora-header {
            position: relative;
            grid-column: 1 / -1;
            grid-row: 1;
            z-index: 1 !important;
            display: grid;
            align-content: end;
            gap: 6px;
            min-height: 174px;
            padding: 18px clamp(24px, 6vw, 72px) 16px;
            box-sizing: border-box;
            overflow: visible;
            isolation: isolate;
            background: transparent;
        }

        .topical-aurora-header > :not(.topical-storm-background) {
            z-index: 10;
        }

        .topical-aurora-header:has(.topical-level-menu:not([hidden])),
        .topical-aurora-header:has(.topical-breadcrumbs__menu:not([hidden])) {
            z-index: 5 !important;
        }

        .topical-storm-background {
            position: absolute;
            z-index: 0;
            inset: 0 0 -56px;
            overflow: hidden;
            isolation: isolate;
            pointer-events: none;
            background:
                linear-gradient(to bottom, transparent 0%, transparent 38%, rgba(255, 255, 255, .04) 48%, rgba(255, 255, 255, .24) 66%, rgba(255, 255, 255, .58) 84%, var(--surface) 100%),
                radial-gradient(70% 125% at 4% -18%, rgba(255, 255, 255, .5) 0%, transparent 66%),
                radial-gradient(42% 100% at 88% 6%, rgba(168, 236, 255, .5) 0%, transparent 70%),
                radial-gradient(36% 86% at 58% -22%, rgba(226, 202, 255, .3) 0%, transparent 68%),
                linear-gradient(112deg, #78cfa5 0%, #a2dfb9 42%, #4bae78 72%, #26734e 100%);
            filter: none;
            opacity: 1;
            transform: none;
            -webkit-mask-image: none;
            mask-image: none;
        }

        .topical-storm-background > span {
            position: absolute;
            pointer-events: none;
        }

        .topical-storm-wash,
        .topical-storm-ribbon,
        .topical-storm-contour,
        .topical-storm-lightning { display: none; }

        .topical-storm-grain {
            z-index: 4;
            inset: 0 0 -56px;
            display: block;
            opacity: .5;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='4' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
            background-size: 96px 96px;
            mix-blend-mode: overlay;
            -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, .82) 76%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, .82) 76%, transparent 100%);
        }

        .topical-storm-veil {
            z-index: 5;
            inset: 0;
            background: transparent;
        }

        [data-theme="dark"] .topical-storm-background {
            background:
                linear-gradient(to bottom, transparent 0%, transparent 38%, rgba(5, 8, 16, .04) 48%, rgba(5, 8, 16, .2) 66%, rgba(5, 8, 16, .48) 84%, var(--surface) 100%),
                radial-gradient(70% 125% at 4% -18%, rgba(147, 255, 197, .24) 0%, transparent 66%),
                radial-gradient(42% 100% at 88% 6%, rgba(83, 191, 255, .22) 0%, transparent 70%),
                linear-gradient(112deg, #123f2c 0%, #1c5c3d 42%, #278455 72%, #103622 100%);
        }

        [data-theme="dark"] .topical-storm-veil {
            background: linear-gradient(to bottom, transparent 0%, rgba(3, 5, 10, .18) 46%, rgba(3, 5, 10, .52) 100%);
        }

        .topical-breadcrumbs {
            position: relative;
            width: min(100%, 830px);
            margin-inline: auto;
            color: color-mix(in srgb, var(--text) 62%, var(--muted));
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 0.005em;
            line-height: 1.25;
        }

        #topicalBreadcrumbPath {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }

        .topical-breadcrumbs__separator {
            color: color-mix(in srgb, var(--text) 42%, transparent);
            font-size: 15px;
            line-height: 1;
        }

        .topical-breadcrumbs__ellipsis {
            min-width: 24px;
            padding: 2px 4px;
            border: 0;
            border-radius: 5px;
            color: color-mix(in srgb, var(--text) 64%, var(--muted));
            background: transparent;
            font: inherit;
            font-weight: 650;
            line-height: 1.1;
        }

        .topical-breadcrumbs__ellipsis:hover,
        .topical-breadcrumbs__ellipsis[aria-expanded="true"] {
            color: var(--text);
            background: color-mix(in srgb, var(--surface) 72%, transparent);
        }

        .topical-breadcrumbs__menu {
            position: absolute;
            z-index: 8;
            top: calc(100% + 10px);
            left: 100px;
            display: grid;
            gap: 2px;
            width: max-content;
            min-width: 150px;
            max-width: min(260px, calc(100vw - 32px));
            padding: 5px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--surface);
            box-shadow: 0 10px 24px rgba(28, 36, 54, 0.13), 0 1px 3px rgba(28, 36, 54, 0.08);
        }

        .topical-breadcrumbs__menu-item {
            display: block;
            overflow: hidden;
            padding: 6px 7px;
            border-radius: 6px;
            color: color-mix(in srgb, var(--text) 54%, var(--muted));
            font-size: 12px;
            line-height: 1.3;
            text-decoration: none;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .topical-breadcrumbs__menu-item:first-child { color: color-mix(in srgb, var(--text) 54%, var(--muted)); }

        .topical-breadcrumbs__menu-item:hover,
        .topical-breadcrumbs__menu-item:focus-visible {
            color: var(--text);
            background: var(--surface-soft);
        }

        .topical-breadcrumbs__link {
            color: inherit;
            text-decoration: none;
        }

        .topical-breadcrumbs__link:hover,
        .topical-breadcrumbs__link:focus-visible {
            color: var(--text);
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .topical-breadcrumbs__link--current,
        .topical-breadcrumbs__link--current strong,
        .topical-breadcrumbs strong {
            color: var(--text);
            font-weight: 650;
        }

        .topical-aurora-header h1 {
            margin: 0;
            width: min(100%, 880px);
            margin-inline: auto;
            color: var(--text);
            font-size: clamp(28px, 2.5vw, 35px);
            font-weight: 600;
            letter-spacing: -0.055em;
            line-height: 1;
        }

        .topical-aurora-title-row {
            display: flex;
            align-items: baseline;
            justify-content: flex-start;
            gap: 12px;
            width: min(100%, 830px);
            margin-inline: auto;
            flex-wrap: wrap;
        }

        .topical-aurora-title-row h1 {
            flex: 0 1 auto;
            width: auto;
            margin: 0;
        }

        .topical-level-picker {
            position: relative;
            z-index: 30;
            flex: 0 0 auto;
        }

        .topical-level-trigger {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-height: 32px;
            padding: 0;
            border: 0;
            color: color-mix(in srgb, var(--text) 55%, var(--muted));
            background: transparent;
            font: inherit;
            font-size: clamp(20px, 2.2vw, 28px);
            font-weight: 400;
            letter-spacing: -0.045em;
            line-height: 1;
        }

        .topical-level-trigger:hover,
        .topical-level-trigger:focus-visible,
        .topical-level-trigger[aria-expanded="true"] {
            color: var(--text);
        }

        .topical-level-trigger .icon {
            width: .72em;
            height: .72em;
            color: var(--muted);
            stroke-width: 2.4;
        }

        .topical-level-menu {
            position: absolute;
            z-index: 20;
            top: calc(100% + 8px);
            right: 0;
            display: grid;
            gap: 3px;
            min-width: 94px;
            padding: 6px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--surface);
            box-shadow: 0 8px 20px rgba(28, 36, 54, .12);
        }

        .topical-level-menu button {
            padding: 7px 9px;
            border: 0;
            border-radius: 7px;
            color: var(--muted);
            background: transparent;
            font: inherit;
            font-size: 12px;
            text-align: left;
        }

        .topical-level-menu button:hover,
        .topical-level-menu button:focus-visible,
        .topical-level-menu button.active {
            color: var(--text);
            background: var(--surface-soft);
        }

        .topical-workspace > .topical-topic-stage {
            grid-column: 1 / -1;
            grid-row: 2;
        }

        .topical-workspace > .topical-browser {
            grid-column: 1;
            grid-row: 2;
        }

        .topical-workspace > .topical-detail {
            grid-column: 2;
            grid-row: 2;
        }

        .topical-workspace.topic-selection-open {
            display: block;
            overflow-y: auto;
            background: var(--surface);
        }

        .topical-topic-stage {
            min-height: 100%;
            padding: 16px 24px 40px;
        }

        .topical-topic-stage-inner {
            display: grid;
            gap: 12px;
            width: min(100%, 830px);
            margin: 0 auto;
        }

        .topical-topic-stage-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 20px;
        }

        .topical-topic-stage-header span {
            color: var(--muted);
            font-size: 12px;
        }

        .topical-topic-stage-header h1 {
            margin: 3px 0 5px;
            font-size: 24px;
            line-height: 1.2;
        }

        .topical-topic-stage-header p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.5;
        }

        .topical-topic-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 36px;
            padding: 8px 11px;
            border: 1px solid color-mix(in srgb, #2f67bd 34%, var(--border));
            border-radius: 8px;
            color: #2f67bd;
            background: color-mix(in srgb, #4d88e8 15%, var(--surface));
        }

        .topical-topic-info__copy {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-width: 0;
            font-size: 12px;
            font-weight: 600;
        }

        .topical-topic-info__copy .icon { width: 15px; height: 15px; flex: 0 0 auto; }
        .topical-topic-info .topical-topic-summary { flex: 0 0 auto; color: var(--muted); }

        .topical-topic-search { width: 100%; }

        .topical-all-questions-button {
            justify-self: start;
            min-height: 34px;
            padding: 7px 10px;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--accent);
            background: var(--surface);
            font-size: 12px;
            font-weight: 600;
        }

        .topical-all-questions-button:hover { background: var(--surface-hover); }

        .topical-topic-summary {
            color: var(--muted);
            font-size: 12px;
        }

        .topical-topic-list {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0;
        }

        .topical-topic-group { border-bottom: 0; }

        .topical-topic-item {
            display: grid;
            grid-template-columns: 22px minmax(0, 1fr) 16px;
            gap: 11px;
            align-items: center;
            min-height: 42px;
            width: 100%;
            padding: 4px 8px;
            border: 0;
            border-radius: 8px;
            color: var(--text);
            background: transparent;
            text-align: left;
        }

        .topical-topic-item:hover {
            background: color-mix(in srgb, var(--surface-hover) 72%, transparent);
        }

        .topical-topic-group.is-expanded .topical-topic-chevron {
            transform: rotate(-90deg);
        }

        .topical-topic-icon {
            width: 18px;
            height: 18px;
            border: 2px solid color-mix(in srgb, var(--muted) 24%, var(--surface));
            border-radius: 50%;
            color: transparent;
            background: transparent;
        }

        .topical-topic-icon .icon { display: none; }
        .topical-topic-copy { min-width: 0; }
        .topical-topic-copy strong,
        .topical-topic-copy small { display: inline; }
        .topical-topic-copy strong { font-size: 14px; line-height: 1.3; }
        .topical-topic-copy small { margin-left: 7px; color: var(--muted); font-size: 11px; }
        .topical-topic-chevron {
            width: 14px;
            height: 14px;
            color: var(--muted);
            transition: transform 180ms ease-out;
        }

        .topical-inline-subtopics {
            padding: 0 8px 10px 36px;
            background: transparent;
            overflow: hidden;
            animation: topical-topic-dropdown-in 260ms cubic-bezier(.22, .61, .36, 1) both;
        }

        .topical-topic-group.is-collapsing .topical-inline-subtopics {
            animation: topical-topic-dropdown-out 220ms cubic-bezier(.4, 0, .6, 1) both;
        }

        @keyframes topical-topic-dropdown-in {
            from {
                max-height: 0;
                padding-bottom: 0;
                transform: translateY(-6px);
            }
            to {
                max-height: 640px;
                padding-bottom: 10px;
                transform: translateY(0);
            }
        }

        @keyframes topical-topic-dropdown-out {
            from {
                max-height: 640px;
                padding-bottom: 10px;
                transform: translateY(0);
            }
            to {
                max-height: 0;
                padding-bottom: 0;
                transform: translateY(-6px);
            }
        }

        .topical-inline-subtopic:nth-child(2) { animation-delay: 12ms; }
        .topical-inline-subtopic:nth-child(3) { animation-delay: 24ms; }
        .topical-inline-subtopic:nth-child(4) { animation-delay: 36ms; }

        @keyframes topical-subtopic-row-in {
            from {
                transform: translateY(-4px);
            }
            to {
                transform: translateY(0);
            }
        }

        .topical-inline-subtopic {
            display: grid;
            grid-template-columns: 20px minmax(0, 1fr);
            gap: 8px;
            align-items: center;
            width: 100%;
            min-height: 30px;
            padding: 4px 8px;
            border: 0;
            border-radius: 8px;
            color: var(--text);
            background: transparent;
            text-align: left;
            font-size: 13px;
            animation: topical-subtopic-row-in 110ms ease-out both;
        }

        .topical-inline-subtopic__copy {
            display: inline-flex;
            align-items: baseline;
            min-width: 0;
            gap: 6px;
        }

        .topical-inline-subtopic:hover,
        .topical-inline-subtopic:focus-visible {
            color: var(--text);
            background: var(--surface-soft);
        }
        .topical-inline-subtopic__marker {
            width: 16px;
            height: 16px;
            border: 2px solid color-mix(in srgb, var(--muted) 24%, var(--surface));
            border-radius: 50%;
        }

        .topical-inline-subtopic small {
            color: var(--muted);
            font-size: 10px;
            white-space: nowrap;
        }

        .topical-inline-subtopics__empty {
            padding: 8px 0 5px;
            color: var(--muted);
            font-size: 11px;
        }

        .topical-topic-loading-list {
            display: grid;
            gap: 2px;
        }

        .paper-selection-loading-list {
            display: grid;
            gap: 2px;
        }

        .topical-topic-loading-row,
        .paper-selection-loading-row {
            display: grid;
            grid-template-columns: 18px minmax(0, 1fr) 16px;
            gap: 11px;
            align-items: center;
            min-height: 42px;
            padding: 4px 8px;
            border-radius: 8px;
            background: var(--surface-hover);
        }

        .topical-topic-loading-icon,
        .paper-selection-loading-icon {
            width: 15px;
            height: 15px;
            border: 2px solid color-mix(in srgb, var(--muted) 24%, var(--surface));
            border-radius: 50%;
        }

        .topical-topic-loading-copy,
        .paper-selection-loading-copy {
            width: min(34%, 200px);
            height: 8px;
            border-radius: 4px;
            background: color-mix(in srgb, var(--muted) 18%, var(--surface-hover));
        }

        .topical-topic-loading-chevron,
        .paper-selection-loading-chevron {
            width: 7px;
            height: 7px;
            border-right: 1.5px solid color-mix(in srgb, var(--muted) 62%, var(--surface-hover));
            border-top: 1.5px solid color-mix(in srgb, var(--muted) 62%, var(--surface-hover));
            transform: rotate(45deg);
        }

        .topical-browser {
            display: flex;
            flex-direction: column;
            min-height: 0;
            padding: 20px 18px 0;
            border-right: 1px solid var(--border);
            background: var(--surface);
        }

        .topical-browser-header,
        .topical-view-header,
        .topical-answer-heading,
        .topical-answer-actions,
        .topical-pdf-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .topical-browser-header {
            align-items: flex-start;
            padding: 1px 1px 0;
        }
        .topical-browser-header span,
        .topical-view-header > div > span {
            color: var(--muted);
            font-size: 12px;
        }

        .topical-browser-header h1 {
            margin: 4px 0 0;
            color: var(--text);
            font-size: 20px;
            font-weight: 650;
            letter-spacing: -0.025em;
            line-height: 1.2;
        }

        .topical-change-subject,
        .topical-secondary-button,
        .topical-list-empty button {
            min-height: 34px;
            padding: 7px 10px;
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text);
            background: var(--surface-soft);
            font-weight: 600;
        }

        .topical-change-subject:hover,
        .topical-secondary-button:hover,
        .topical-list-empty button:hover { background: var(--surface-hover); }

        .topical-filters {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 8px;
            margin-top: 17px;
        }

        .topical-filters label { min-width: 0; }
        .topical-filters label > span {
            display: block;
            margin: 0 0 5px 2px;
            color: var(--muted);
            font-size: 11px;
            font-weight: 600;
        }

        .topical-filters .field {
            width: 100%;
            min-width: 0;
            border-radius: 14px;
            background: var(--surface-soft);
        }

        .topical-result-summary {
            padding: 13px 2px 10px;
            color: var(--muted);
            font-size: 11px;
            font-weight: 550;
        }

        .topical-question-list {
            min-height: 0;
            margin: 0;
            padding: 6px 4px 10px;
            overflow-y: auto;
            border: 0;
            border-radius: 0;
            background: transparent;
        }

        .topical-question-item {
            display: grid;
            grid-template-columns: 34px minmax(0, 1fr) 16px;
            gap: 10px;
            align-items: center;
            width: 100%;
            min-height: 72px;
            margin: 6px 0;
            padding: 12px;
            border: 1px solid transparent;
            border-radius: 10px;
            color: var(--text);
            background: var(--surface);
            text-align: left;
        }

        .topical-question-item:hover { background: var(--surface-soft); }
        .topical-question-item.active {
            border-color: var(--border);
            background: var(--surface-soft);
        }
        .topical-question-item.active .topical-question-number {
            color: var(--muted);
            background: var(--surface-soft);
        }
        .topical-question-item > .icon { color: var(--muted); }

        .topical-question-number {
            display: grid;
            place-items: center;
            width: 32px;
            height: 32px;
            border-radius: 9px;
            color: var(--muted);
            background: var(--surface-soft);
            font-size: 12px;
            font-weight: 700;
        }

        .topical-question-copy { min-width: 0; }
        .topical-question-copy strong,
        .topical-question-copy span,
        .topical-question-copy small {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .topical-question-copy strong { font-size: 13px; font-weight: 600; }
        .topical-question-copy span { margin-top: 4px; color: var(--muted); font-size: 11px; }
        .topical-list-empty {
            display: grid;
            justify-items: start;
            gap: 7px;
            padding: 22px 18px;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.45;
        }

        .topical-list-empty strong { color: var(--text); font-size: 13px; }
        .topical-list-empty button { margin-top: 4px; }

        @media (min-width: 821px) {
            .topical-aurora-header .topical-breadcrumbs__menu {
                top: calc(100% + 112px);
            }

            .topical-workspace > .topical-browser {
                margin: 18px 0 10px 12px;
                padding: 18px 14px 0;
                border: 1px solid var(--border);
                border-radius: 16px;
                box-shadow: 0 1px 4px rgba(28, 36, 54, 0.04);
                overflow: hidden;
            }

            .topical-workspace > .topical-detail:not([hidden]) {
                margin-top: 9px;
            }
        }

        .topical-list-skeleton {
            height: 86px;
            border-bottom: 1px solid var(--border);
            background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-hover) 80%, transparent), transparent);
            background-size: 220% 100%;
            animation: topical-loading 1.4s ease-in-out infinite;
        }

        @keyframes topical-loading {
            from { background-position: 100% 0; }
            to { background-position: -100% 0; }
        }

        .topical-detail {
            min-height: 0;
            overflow-y: auto;
            overflow-anchor: none;
            padding: 24px clamp(18px, 4vw, 46px) 40px;
        }

        .topical-empty {
            display: grid;
            place-items: center;
            align-content: center;
            min-height: 100%;
            color: var(--muted);
            text-align: center;
        }

        .topical-empty .icon {
            width: 42px;
            height: 42px;
            margin-bottom: 14px;
            color: var(--accent);
        }

        .topical-empty h2 { margin: 0; color: var(--text); font-size: 20px; }
        .topical-empty p { max-width: 390px; margin: 8px 0 0; font-size: 13px; line-height: 1.5; }

        .topical-question-view { width: min(100%, 920px); margin: 0 auto; }
        .topical-view-header { align-items: flex-start; margin-bottom: 14px; }
        .topical-view-header h2 { margin: 3px 0 0; font-size: 23px; }
        .topical-view-header p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

        .topical-document-switcher {
            display: flex;
            flex: 0 0 auto;
            gap: 2px;
            padding: 3px;
            border-radius: 8px;
            background: var(--surface-soft);
        }

        .topical-document-switcher button {
            min-height: 34px;
            padding: 7px 11px;
            border-radius: 6px;
            color: var(--muted);
            background: transparent;
            font-size: 12px;
            font-weight: 600;
        }

        .topical-document-switcher button.active {
            color: var(--text);
            background: var(--surface);
            box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 10%, transparent);
        }

        .topical-pdf-toolbar {
            justify-content: flex-end;
            min-height: 44px;
            padding: 5px 8px;
            border: 1px solid var(--border);
            border-bottom: 0;
            border-radius: 8px 8px 0 0;
            background: var(--surface);
        }

        .topical-pdf-toolbar span { min-width: 92px; color: var(--muted); font-size: 12px; text-align: center; }
        .topical-pdf-toolbar .toolbar-button { width: 32px; height: 32px; padding: 7px; }
        .topical-pdf-toolbar .toolbar-button:disabled { cursor: default; opacity: 0.38; }

        .topical-pdf-stage {
            display: block;
            min-height: 420px;
            padding: 16px;
            overflow-x: auto;
            overflow-y: hidden;
            border: 1px solid var(--border);
            border-radius: 0 0 8px 8px;
            background: var(--surface-soft);
            overscroll-behavior-x: contain;
            scrollbar-gutter: stable;
        }

        /* Topical PDFs use the same vertical document flow as the main PDF
           viewer, with the page indicator following the visible page. */
        .topical-pdf-page-stack {
            width: 100%;
            min-width: 100%;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            scroll-snap-type: y proximity;
        }

        .topical-pdf-page-shell {
            max-width: 100%;
            scroll-snap-align: start;
        }

        .topical-pdf-canvas {
            display: block;
            width: auto;
            max-width: none;
            background: white;
            box-shadow: 0 1px 4px color-mix(in srgb, #000 16%, transparent);
        }

        .topical-pdf-page-shell .pdf-text-layer {
            user-select: text;
        }

        .pdf-page-shell.pen-mode .pdf-text-layer,
        .topical-pdf-page-shell.pen-mode .pdf-text-layer {
            pointer-events: none;
            user-select: none;
        }

        .topical-pdf-page-shell.pen-mode .topical-practice-layer {
            display: block;
            pointer-events: auto;
            cursor: crosshair;
        }

        .topical-pdf-page-shell.pen-mode .topical-practice-layer.eraser-active {
            cursor: cell;
        }

        .topical-pdf-page-shell[hidden] { display: none; }

        .topical-practice-layer {
            display: block;
            pointer-events: none;
            cursor: text;
        }

        .topical-practice-layer .practice-note {
            pointer-events: auto;
        }

        .topical-practice-layer.annotation-layer-disabled {
            display: none;
            pointer-events: none;
        }

        .topical-pdf-error {
            width: min(100%, 430px);
            box-sizing: border-box;
            padding: clamp(48px, 10vh, 96px) 20px 32px;
            color: var(--text);
            text-align: center;
        }

        .topical-pdf-stage:has(.topical-pdf-error:not([hidden])) {
            display: grid;
            flex: 1 1 auto;
            min-height: 0;
            place-items: start center;
            overflow: hidden;
        }

        .topical-detail:has(.topical-pdf-error:not([hidden])) {
            display: flex;
            flex-direction: column;
        }

        .topical-detail:has(.topical-pdf-error:not([hidden])) .topical-question-view {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            min-height: 0;
        }

        .topical-pdf-error__content {
            display: grid;
            justify-items: center;
            gap: 18px;
            width: 100%;
        }

        .topical-pdf-error__mascot {
            display: block;
            width: clamp(170px, 24vw, 230px);
            height: auto;
            max-height: 260px;
            object-fit: contain;
        }

        .topical-pdf-error__copy {
            display: grid;
            gap: 8px;
        }

        .topical-pdf-error__copy strong {
            color: var(--text);
            font-size: 18px;
            font-weight: 600;
            line-height: 1.3;
        }

        .topical-pdf-error__copy p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.6;
        }

        .topical-answer-section {
            margin-top: 16px;
            padding: 18px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
        }

        .topical-answer-heading {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
        }

        .topical-answer-heading h3 { margin: 0; font-size: 16px; }
        .topical-answer-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
        .topical-answer-heading > span { color: var(--muted); font-size: 11px; }

        .topical-answer-actions { justify-content: flex-end; margin-top: 14px; }

        .topical-check-button {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 38px;
            padding: 8px 13px;
            border-radius: 8px;
            color: white;
            background: var(--accent);
            font-weight: 700;
        }

        .topical-check-button:hover { background: var(--accent-hover); }
        .topical-check-button:disabled { cursor: wait; opacity: 0.62; }

        .topical-feedback {
            margin-top: 14px;
            padding: 14px;
            border-left: 3px solid var(--accent);
            border-radius: 0 8px 8px 0;
            color: var(--text);
            background: var(--surface-soft);
            font-size: 13px;
            line-height: 1.55;
        }

        .topical-feedback.warning { border-left-color: var(--danger); color: var(--danger); }
        .topical-feedback p:first-child { margin-top: 0; }
        .topical-feedback p:last-child { margin-bottom: 0; }

        @media (max-width: 1120px) {
            .home-inner {
                grid-template-columns: 1fr;
            }

            .home-side {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

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

            .workspace {
                grid-template-columns: 1fr;
                grid-template-rows: auto minmax(0, 1fr);
            }

            .workspace-resizer {
                display: none;
            }

            .workspace.chat-collapsed {
                grid-template-rows: auto minmax(0, 1fr);
            }

            .mobile-paper-switcher {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                grid-column: 1;
                grid-row: 1;
                gap: 2px;
                padding: 4px;
                border-bottom: 1px solid var(--border);
                background: var(--surface-soft);
            }

            .mobile-paper-switcher button {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 7px;
                min-height: 38px;
                padding: 7px 12px;
                border: 0;
                border-radius: 7px;
                color: var(--muted);
                background: transparent;
                font-size: 13px;
                font-weight: 600;
            }

            .mobile-paper-switcher button.active {
                color: var(--text);
                background: var(--surface);
            }

            .mobile-paper-switcher .icon {
                width: 17px;
                height: 17px;
            }

            .mobile-syllabus-switcher {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                grid-column: 1 / -1;
                gap: 2px;
                padding: 4px;
                border-bottom: 1px solid var(--border);
                background: var(--surface-soft);
            }

            .mobile-syllabus-switcher button {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 7px;
                min-height: 38px;
                padding: 7px 12px;
                border: 0;
                border-radius: 7px;
                color: var(--muted);
                background: transparent;
                font-size: 13px;
                font-weight: 600;
            }

            .mobile-syllabus-switcher button.active {
                color: var(--text);
                background: var(--surface);
            }

            .mobile-syllabus-switcher .icon {
                width: 17px;
                height: 17px;
            }

            .syllabus-workspace {
                grid-template-columns: 1fr;
                grid-template-rows: auto minmax(0, 1fr);
            }

            .syllabus-workspace > .syllabus-browser,
            .syllabus-workspace > .syllabus-page {
                grid-column: 1;
                grid-row: 2;
            }

            .syllabus-browser {
                border-right: 0;
                border-bottom: 1px solid var(--border);
            }

            .syllabus-list {
                display: flex;
                gap: 6px;
                max-height: none;
                overflow-x: auto;
                overflow-y: hidden;
                padding: 6px 0 2px;
                scroll-snap-type: x proximity;
            }

            .syllabus-topic-index-item {
                flex: 0 0 164px;
                scroll-snap-align: start;
            }

            .syllabus-workspace.syllabus-topics-view .syllabus-list {
                display: grid;
                grid-template-columns: 1fr;
                gap: 2px;
                max-height: calc(100dvh - 190px);
                overflow-x: hidden;
                overflow-y: auto;
                padding: 4px 0 12px;
                scroll-snap-type: none;
            }

            .syllabus-workspace.syllabus-topics-view .syllabus-topic-index-item {
                width: 100%;
                min-height: 52px;
                padding: 12px;
                border-bottom: 0;
                border-left: 2px solid transparent;
            }

            .syllabus-workspace.syllabus-topics-view .syllabus-topic-index-item strong {
                font-size: 16px;
                line-height: 1.3;
            }

            .syllabus-workspace.syllabus-topics-view .syllabus-topic-index-item:hover,
            .syllabus-workspace.syllabus-topics-view .syllabus-topic-index-item.active {
                border-bottom-color: transparent;
                border-left-color: var(--accent);
            }

            .syllabus-workspace:not(.syllabus-topics-view) .syllabus-browser {
                display: none;
            }

            .syllabus-workspace.syllabus-topics-view .syllabus-page {
                display: none;
            }

            #chatToggle {
                display: none !important;
            }

            .workspace > .pdf-panel,
            .workspace > .chat-panel {
                grid-column: 1;
                grid-row: 2;
            }

            .workspace:not(.chat-collapsed) .pdf-panel {
                display: none;
            }

            .workspace:not(.chat-collapsed) .chat-panel {
                display: flex;
            }

            .workspace.chat-collapsed .pdf-panel {
                display: flex;
            }

            .pdf-panel {
                border-right: 0;
                border-bottom: 0;
            }

            .workspace.chat-collapsed .pdf-panel {
                border-bottom: 0;
            }

            .topical-workspace { grid-template-columns: 348px minmax(0, 1fr); }

            .syllabus-workspace {
                grid-template-columns: 240px minmax(0, 1fr);
                grid-template-rows: none;
                overflow-y: hidden;
            }

            .syllabus-browser {
                gap: 14px;
                padding: 12px;
            }

            .syllabus-controls {
                gap: 12px;
            }

            .syllabus-list {
                max-height: none;
            }

            .syllabus-page {
                padding: 14px 16px 22px;
            }

            .syllabus-card {
                margin-left: 0;
            }

            .syllabus-dashboard-header {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .syllabus-title-card {
                grid-column: 1 / -1;
            }

            .syllabus-page .conversation-inner {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 720px) {
            .auth-dialog {
                display: block;
                width: min(100%, 460px);
            }
            .auth-brand-panel { display: none; }
            .auth-form-panel { padding: 58px 30px 34px; }
        }

        @media (max-width: 520px) {
            .account-layer { padding: 0; }
            .auth-dialog,
            .account-dialog {
                width: 100%;
                max-height: 100vh;
                min-height: 100vh;
                border: 0;
                border-radius: 0;
            }
            .auth-dialog { display: block; }
            .auth-form-panel { padding: 66px 22px 30px; }
            .account-dialog { padding: 22px 18px; }
            .account-progress-summary { grid-template-columns: 1fr; }
            .account-quota-grid { grid-template-columns: 1fr; }
            .account-identity { grid-template-columns: auto minmax(0, 1fr); }
            .account-verification { grid-column: 2; justify-self: start; }
            .account-actions { flex-direction: column; }
            .account-actions .account-danger-action { margin-left: 0; }

            .avatar-builder { grid-template-columns: 1fr; gap: 16px; }
            .avatar-preview-card { position: static; min-height: 224px; }
            .avatar-preview { min-height: 168px; }
            .avatar-preview .avatar-art { width: min(152px, 100%); height: auto; }
            .avatar-controls { gap: 14px 10px; }
            .avatar-option--visual { min-width: 76px; }

            .home-workspace {
                padding: 18px 14px 28px;
            }

            .home-hero {
                align-items: start;
                flex-direction: column;
            }

            .home-actions {
                justify-content: flex-start;
            }

            .workspace-row {
                grid-template-columns: 34px minmax(0, 1fr) 28px;
            }

            .workspace-meta {
                display: none;
            }

            .topical-browser-header,
            .topical-view-header,
            .topical-topic-stage-header { flex-direction: column; }

            .topical-topic-info { align-items: flex-start; flex-direction: column; gap: 3px; }
            .topical-topic-list { grid-template-columns: 1fr; }
            .topical-document-switcher { width: 100%; }
            .topical-document-switcher button { flex: 1; }
            .topical-detail { padding: 18px 12px 30px; }
            .topical-pdf-stage { min-height: 320px; padding: 8px; }
            .topical-answer-section { padding: 14px; }

            .home-side,
            .api-grid,
            .subject-grid {
                grid-template-columns: 1fr;
            }

            .syllabus-workspace {
                grid-template-columns: 1fr;
                grid-template-rows: auto minmax(0, 1fr);
                gap: 0;
                overflow-y: auto;
            }

            .syllabus-dashboard-header {
                grid-template-columns: 1fr;
            }

            .syllabus-browser {
                gap: 16px;
                padding: 12px;
            }

            .syllabus-controls {
                gap: 12px;
            }

            .syllabus-list {
                max-height: 150px;
            }

            .syllabus-page {
                padding: 14px 16px 22px;
            }

            .syllabus-card {
                margin-left: 0;
            }
        }

        @media (max-width: 680px) {
            .study-timer { display: none; }
            .account-trigger span { display: none; }
            .account-trigger { width: 38px; padding: 0; }
            .topbar-energy-status { min-height: 32px; padding-inline: 8px; }
            .energy-popover { right: -4px; }
        }

        @media (max-width: 820px) {
            .topical-workspace {
                grid-template-columns: 1fr;
                grid-template-rows: auto minmax(260px, 42vh) minmax(0, 1fr);
                overflow-y: auto;
            }

            .topical-aurora-header {
                grid-column: 1;
                grid-row: 1;
                min-height: 148px;
                padding: 18px 18px 14px;
            }

            .topical-workspace > .topical-topic-stage {
                grid-column: 1;
                grid-row: 2 / span 2;
            }

            .topical-workspace > .topical-browser {
                grid-column: 1;
                grid-row: 2;
            }

            .topical-workspace > .topical-detail {
                grid-column: 1;
                grid-row: 3;
            }

            .topical-workspace.topic-selection-open { display: block; }

            .topical-browser {
                border-right: 0;
                border-bottom: 1px solid var(--border);
            }

            .topical-detail { overflow-y: auto; }

            .syllabus-workspace {
                grid-template-columns: 1fr;
                grid-template-rows: auto minmax(0, 1fr);
                gap: 0;
                overflow-y: auto;
            }

            .notebook-brand,
            .notebook-select {
                min-height: 42px;
                padding: 8px 12px;
            }

            .syllabus-list {
                max-height: 160px;
                padding: 14px 12px 18px;
            }

            .syllabus-topic {
                padding: 8px;
            }

            .notebook-chat-box {
                padding: 18px 18px 12px;
            }

            .syllabus-card h2 {
                font-size: 16px;
            }

            .app-shell { grid-template-columns: 1fr; }

            .sidebar-toggle-button { display: none !important; }
            .prompt-cards { grid-template-columns: 1fr; }
            .message { max-width: 90%; }

            .pdf-toolbar,
            .pdf-selects {
                grid-template-columns: 1fr;
            }

            .practice-toolbar {
                align-items: stretch;
                flex-direction: column;
            }

            .practice-toolbar-actions {
                justify-content: flex-start;
            }

            .page-controls {
                flex-wrap: wrap;
            }
        }

        /* Keep workspace screens visually aligned with the subject home. */
        .workspace,
        .syllabus-workspace {
            --page-accent: #3766b4;
            background: var(--bg);
        }

        [data-theme="dark"] .workspace,
        [data-theme="dark"] .syllabus-workspace {
            --page-accent: #7890ff;
        }

        .pdf-panel,
        .chat-panel,
        .syllabus-browser,
        .syllabus-page {
            background: var(--surface);
        }

        .paper-picker,
        .prompt-card,
        .paper-picker-item,
        .paper-selection-item,
        .notebook-chat-box,
        .syllabus-title-card,
        .syllabus-stat-card {
            border-radius: 10px;
            box-shadow: none;
        }

        .paper-picker,
        .prompt-card,
        .notebook-chat-box,
        .syllabus-title-card,
        .syllabus-stat-card {
            background: var(--surface);
        }

        .paper-picker-trigger:hover,
        .paper-picker-trigger[aria-expanded="true"],
        .paper-picker-item:hover,
        .paper-picker-item.active,
        .paper-selection-item:hover,
        .prompt-card:hover,
        .notebook-subject-change:hover,
        .syllabus-topic:hover,
        .syllabus-topic.active {
            border-color: var(--page-accent);
        }

        .paper-picker-item:hover,
        .paper-picker-item.active,
        .paper-selection-item:hover,
        .prompt-card:hover,
        .syllabus-topic:hover,
        .syllabus-topic.active {
            background: color-mix(in srgb, var(--page-accent) 5%, var(--surface));
        }

        .toolbar-button.accent,
        .send-button,
        .notebook-send,
        .topic-chip.accent {
            border-color: var(--page-accent);
            background: var(--page-accent);
        }

        .toolbar-button.accent:hover,
        .send-button:hover,
        .notebook-send:hover {
            background: color-mix(in srgb, var(--page-accent) 82%, #000000);
        }

        .composer {
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--surface);
        }

        .notebook-message.user {
            background: var(--page-accent);
        }

        .syllabus-page-tab:hover,
        .syllabus-page-tab.active {
            border-color: var(--page-accent);
            color: var(--text);
            background: color-mix(in srgb, var(--page-accent) 7%, var(--surface));
        }

        .syllabus-topic-nav-toggle { display: none; }

        @media (min-width: 1121px) {
            .syllabus-browser { position: relative; }

            .syllabus-topic-nav-toggle {
                position: absolute;
                z-index: 4;
                top: 11px;
                right: -18px;
                display: grid;
                width: 36px;
                height: 36px;
                place-items: center;
                border: 1px solid var(--border);
                border-radius: 7px;
                color: var(--accent);
                background: var(--surface);
            }

            .syllabus-topic-nav-toggle:hover {
                border-color: var(--accent);
                background: color-mix(in srgb, var(--accent) 7%, var(--surface));
            }

            .syllabus-topic-nav-toggle .icon { transition: transform 160ms ease; }

            .syllabus-workspace.topic-nav-collapsed {
                grid-template-columns: 44px minmax(0, 1fr);
            }

            .syllabus-workspace.topic-nav-collapsed .syllabus-browser {
                padding: 0;
                overflow: visible;
            }

            .syllabus-workspace.topic-nav-collapsed .syllabus-controls,
            .syllabus-workspace.topic-nav-collapsed .syllabus-list {
                display: none;
            }

            .syllabus-workspace.topic-nav-collapsed .syllabus-topic-nav-toggle {
                top: 10px;
                right: 4px;
            }

            .syllabus-workspace.topic-nav-collapsed .syllabus-topic-nav-toggle .icon {
                transform: rotate(180deg);
            }
        }

        @media (max-width: 460px) {
            .syllabus-topic-section .syllabus-subtopic-row summary {
                padding-right: 0;
                padding-bottom: 48px;
            }

            .syllabus-topic-section .syllabus-subtopic-detail { padding-left: 36px; }

            .syllabus-subtopic-actions {
                top: auto;
                right: auto;
                bottom: 8px;
                left: 36px;
            }
        }

        /* Final syllabus question-trail overrides. */
        .syllabus-topic-section .syllabus-subtopic-entry {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(168px, 300px);
            column-gap: 18px;
            padding: 8px 0 12px 46px;
        }

        .syllabus-topic-section .syllabus-subtopic-row {
            grid-column: 1;
            min-width: 0;
        }

        .syllabus-topic-section .syllabus-subtopic-row summary { padding: 2px 0 8px; }
        .syllabus-topic-section .syllabus-subtopic-detail { padding-left: 52px; }

        .syllabus-topic-section .syllabus-subtopic-check {
            position: absolute;
            top: 11px;
            left: 0;
            z-index: 1;
            width: 32px;
            min-height: 32px;
            border-color: #85c9a4;
            color: #23855c;
            background: #effaf3;
        }

        .syllabus-topic-section .syllabus-subtopic-check:hover {
            border-color: #23855c;
            color: #176b48;
            background: #e3f6ea;
        }

        .syllabus-topic-section .syllabus-subtopic-check.checked {
            border-color: #23855c;
            color: white;
            background: #2f9b68;
        }

        .syllabus-subtopic-actions,
        .syllabus-subtopic-questions { display: none; }

        .syllabus-question-trail {
            grid-column: 2;
            grid-row: 1;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            justify-content: flex-end;
            gap: 7px;
            padding-top: 2px;
        }

        .syllabus-question-block {
            position: relative;
            display: grid;
            width: 32px;
            height: 32px;
            place-items: center;
            border: 1px solid #c9ccff;
            border-radius: 7px;
            color: #5360b5;
            background: #f1f2ff;
            font-family: inherit;
            font-size: 10px;
            font-weight: 700;
            line-height: 1;
        }

        .syllabus-question-block:hover {
            border-color: var(--accent);
            color: var(--accent);
            background: #e8eaff;
        }

        .syllabus-question-block.needs-work {
            border-color: #e9c38a;
            color: #9b6a25;
            background: #fff3df;
        }

        .syllabus-question-block.passed {
            border-color: #8fcba9;
            color: #277a55;
            background: #e9f7ee;
        }

        .syllabus-question-flag {
            position: absolute;
            top: -15px;
            left: 15px;
            width: 2px;
            height: 17px;
            background: #2f8f62;
        }

        .syllabus-question-flag::after {
            position: absolute;
            top: 0;
            left: 2px;
            width: 9px;
            height: 6px;
            background: #83c99f;
            content: '';
        }

        .syllabus-question-empty {
            color: var(--muted);
            font-size: 12px;
            line-height: 32px;
        }

        @media (max-width: 760px) {
            .syllabus-topic-section .syllabus-subtopic-entry {
                grid-template-columns: minmax(0, 1fr);
                row-gap: 8px;
            }

            .syllabus-topic-section .syllabus-subtopic-row summary { padding: 2px 0 8px; }

            .syllabus-question-trail {
                grid-column: 1;
                grid-row: 2;
                justify-content: flex-start;
                padding-left: 52px;
            }
        }

        /* History card final overrides. */
        /* Final dashboard arrangement: compact progress window + horizontal history. */
        /* Keep the title, current session, and activity feed visually separated. */
        @media (min-width: 621px) {
            .dashboard-columns .history-card {
                grid-template-columns: 90px 240px minmax(0, 1fr);
                align-items: center;
                padding: 12px 14px;
            }

            .history-card-header {
                min-width: 90px;
                align-self: stretch;
                justify-content: center;
                padding-top: 0;
            }

            .history-card-today { margin-top: 5px; }
            .history-current { align-self: center; }
            .history-list-heading { align-self: end; }
            .history-list { align-self: stretch; align-items: center; }
        }

        @media (min-width: 621px) {
            .dashboard-columns {
                grid-template-rows: 128px 256px auto !important;
            }

            .dashboard-inner .progress-card {
                height: 400px !important;
                min-height: 400px !important;
            }
        }

        .dashboard-columns .history-card { display: grid !important; }
        .history-list { display: flex !important; }
        .history-card-header { align-items: flex-start !important; }
        .dashboard-columns {
            grid-template-areas: "folders progress" "actions progress" "history history";
            grid-template-rows: auto auto auto;
        }
        .dashboard-inner .progress-card { height: auto; min-height: 0; align-self: stretch; }
        .dashboard-columns .history-card {
            grid-area: history;
            width: 100% !important;
            display: grid;
            grid-template-columns: max-content minmax(210px, 250px) minmax(0, 1fr);
            align-items: start;
            column-gap: 14px;
            row-gap: 0;
        }
        .history-card-header { grid-column: 1; grid-row: 1 / span 2; align-items: flex-start; flex-direction: column; margin: 0; padding-top: 2px; }
        .history-current { grid-column: 2; grid-row: 1 / span 2; width: 100%; }
        .history-list-heading { grid-column: 3; grid-row: 1; margin: 0 0 5px; }
        .history-list { grid-column: 3; grid-row: 2; display: flex; min-width: 0; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
        .history-list .history-entry { flex: 1 0 190px; min-width: 190px; padding: 8px 9px; border: 1px solid color-mix(in srgb, var(--border) 82%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--surface) 82%, var(--surface-soft)); }
        @media (max-width: 620px) {
            .dashboard-columns { grid-template-areas: "folders" "actions" "progress" "history"; grid-template-rows: auto auto auto auto; }
            .dashboard-columns .history-card { display: flex !important; width: min(100%, var(--folder-row-width)) !important; flex-direction: column; gap: 0; }
            .history-card-header, .history-current, .history-list-heading, .history-list { grid-column: auto; grid-row: auto; }
            .history-card-header { flex-direction: row; margin-bottom: 10px; }
            .history-list { display: grid !important; overflow: visible; }
            .history-list .history-entry { min-width: 0; }
        }
        .dashboard-columns .history-card { width: min(100%, var(--folder-row-width)); min-height: 0; padding: 14px; gap: 0; overflow: hidden; }
        .history-card-header, .history-current, .history-list-heading, .history-entry { display: flex; align-items: center; }
        .history-card-header { justify-content: space-between; gap: 10px; margin-bottom: 10px; }
        .history-card-kicker { display: block; margin-bottom: 2px; color: var(--muted); font-size: 10px; line-height: 1; }
        .history-card h2 { color: var(--text); font-size: 18px; line-height: 1.1; }
        .history-card-today { color: var(--muted); font-size: 10px; white-space: nowrap; }
        .history-current { gap: 9px; min-width: 0; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--dashboard-accent) 22%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--dashboard-accent) 7%, var(--surface)); }
        .history-current-icon, .history-entry-icon { display: inline-grid; flex: 0 0 auto; place-items: center; color: var(--dashboard-accent); }
        .history-current-icon { width: 25px; height: 25px; border-radius: 7px; background: color-mix(in srgb, var(--dashboard-accent) 16%, var(--surface)); }
        .history-current-icon .icon { width: 15px; height: 15px; }
        .history-current-copy, .history-entry-copy { min-width: 0; }
        .history-current-copy { display: grid; gap: 2px; }
        .history-current-copy strong { color: var(--text); font-size: 12px; font-weight: 600; }
        .history-current-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
        .history-current > time { margin-left: auto; color: var(--text); font-size: 15px; font-weight: 700; }
        .history-list-heading { justify-content: space-between; margin: 13px 0 5px; color: var(--muted); font-size: 10px; font-weight: 600; }
        .history-sample-notice { color: #a76b00; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
        .history-list { display: grid; gap: 1px; min-width: 0; }
        .history-entry { gap: 7px; min-width: 0; padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent); }
        .history-entry-dot { display: inline-grid; flex: 0 0 15px; width: 15px; height: 15px; place-items: center; border-radius: 50%; }
        .history-entry-dot--done { background: #e1b52e; color: #ffffff; }
        .history-entry-dot--done .icon { width: 10px; height: 10px; }
        .history-entry-dot--sample { border: 1px solid #b8bcc2; background: transparent; }
        .history-entry-icon { width: 19px; height: 19px; color: var(--muted); }
        .history-entry-icon .icon { width: 16px; height: 16px; }
        .history-entry-copy { display: grid; gap: 1px; }
        .history-entry-copy strong { overflow: hidden; color: var(--text); font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
        .history-entry-copy small, .history-entry-copy em { overflow: hidden; color: var(--muted); font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
        .history-entry-copy em { color: color-mix(in srgb, var(--dashboard-accent) 75%, var(--muted)); }
        [data-theme="dark"] .history-sample-notice { color: #f0c45b; }

        /* Compact horizontal history shelf. */
        @media (min-width: 621px) {
            .dashboard-columns .history-card {
                grid-template-columns: max-content minmax(0, 1fr) !important;
                grid-template-rows: auto auto !important;
            }
            .dashboard-columns .history-card .history-card-header {
                grid-column: 1 !important;
                grid-row: 1 / span 2 !important;
            }
            .dashboard-columns .history-card .history-list-heading {
                grid-column: 2 !important;
                grid-row: 1 !important;
            }
        }
        /* The history shelf stands on its own instead of filling a large card. */
        .dashboard-columns .history-card {
            width: 460px !important;
            max-width: 100% !important;
            min-height: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            overflow: visible !important;
            display: block !important;
        }
        .dashboard-columns .history-card .history-shelf-mount { width: 460px !important; max-width: 100% !important; }

        .history-shelf {
            --history-panel: #fbfaf6;
            --history-ink: #25262b;
            --history-muted: #74777e;
            --history-line: #e2dfd7;
            width: 460px;
            max-width: 100%;
            background: var(--history-panel);
            color: var(--history-ink);
            border: 0;
            border-radius: 24px;
            filter: drop-shadow(0 2px 3px rgb(15 23 42 / 16%));
            overflow: hidden;
        }
        .history-shelf-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 18px 8px;
            border-bottom: 1px solid var(--history-line);
        }
        .history-shelf-title {
            font-size: 14px;
            font-weight: 700;
        }
        .history-shelf-track {
            display: flex;
            gap: 0;
            min-height: 0;
            overflow-x: auto;
            scrollbar-width: none;
            scroll-snap-type: x mandatory;
        }
        .history-shelf-track::-webkit-scrollbar { display: none; }
        .history-shelf-card {
            position: relative;
            display: block;
            flex: 0 0 auto;
            width: max-content;
            min-width: 280px;
            height: 120px;
            padding: 8px 18px 10px;
            border: 0;
            border-right: 1px solid var(--history-line);
            border-radius: 0;
            background: transparent;
            color: inherit;
            scroll-snap-align: start;
        }
        .history-shelf-card:last-child { border-right: 0; }
        .history-shelf-date {
            margin: 0 0 2px;
            font-family: Georgia, "Times New Roman", serif;
            font-size: 23px;
            font-weight: 700;
            letter-spacing: -0.03em;
        }
        .history-shelf-entries {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            align-content: flex-start;
            width: max-content;
            height: 72px;
            column-gap: 22px;
            overflow: hidden;
        }
        .history-shelf-line {
            display: grid;
            width: max-content;
            height: 24px;
            flex: 0 0 24px;
            grid-template-columns: max-content max-content;
            gap: 10px;
            padding: 3px 0;
            border-top: 1px solid color-mix(in srgb, var(--history-line) 78%, transparent);
            font-size: 12px;
        }
        .history-shelf-line:first-child,
        .history-shelf-line:nth-child(3n + 1) {
            border-top: 0;
            padding-top: 3px;
        }
        .history-shelf-line-name {
            overflow: hidden;
            font-weight: 600;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .history-shelf-line-value {
            color: #565a61;
            white-space: nowrap;
        }
        .history-shelf-line--sample .history-shelf-line-name,
        .history-shelf-line--sample .history-shelf-line-value {
            color: #8a8d92;
        }
        [data-theme="dark"] .history-shelf {
            --history-panel: #26282d;
            --history-ink: #f3f4f6;
            --history-muted: #a7acb5;
            --history-line: #454951;
        }
        [data-theme="dark"] .history-shelf-line-value { color: #c7cbd2; }
        .progress-card {
            box-shadow: none !important;
            filter: drop-shadow(0 2px 3px rgb(15 23 42 / 10%));
        }

        @media (max-width: 620px) {
            .dashboard-columns .history-card .history-shelf-mount { width: 100% !important; }
            .history-shelf { width: 100%; }
        }

        /* Compact dashboard sidebar: launchers, progress, then history. */
        @media (min-width: 760px) {
            .dashboard-workspace {
                height: 100%;
                min-height: 0;
                padding: 0;
                overflow: hidden;
                overflow-anchor: none;
            }

            .dashboard-inner {
                width: 228px;
                height: 100%;
                min-height: 0;
                margin: 0;
                padding: 4px 14px 14px;
                overflow-x: hidden;
                overflow-y: auto;
                overflow-anchor: none;
                border-left: 0;
                border-radius: 0 14px 14px 0;
                backdrop-filter: none;
                scrollbar-width: none;
            }

            .dashboard-inner::-webkit-scrollbar { display: none; }

            /* Keep the subject selector attached to the fixed logo chrome while
               the dashboard title and launcher content scroll beneath it. */
            .dashboard-inner {
                display: flex;
                flex-direction: column;
            }

            .dashboard-header,
            .dashboard-header-actions {
                display: contents;
            }

            .dashboard-subject-selector {
                position: sticky;
                z-index: 6;
                top: 0;
                order: -1;
                width: 100%;
                flex: 0 0 auto;
                padding-bottom: 0;
                isolation: isolate;
                background: linear-gradient(
                    to bottom,
                    var(--dashboard-join-surface, var(--surface)) 0%,
                    var(--dashboard-join-surface, var(--surface)) 50%,
                    transparent 50%,
                    transparent 100%
                );
            }

            .dashboard-subject-selector::before {
                content: "";
                position: absolute;
                z-index: 0;
                top: -100vh;
                right: -14px;
                bottom: 50%;
                left: -14px;
                pointer-events: none;
                background: var(--dashboard-join-surface, var(--surface));
            }

            .dashboard-subject-selector::after {
                content: "";
                position: absolute;
                z-index: 0;
                inset: 50% -14px -12px;
                pointer-events: none;
                background: color-mix(in srgb, var(--dashboard-join-surface, var(--surface)) 84%, transparent);
                -webkit-mask-image: linear-gradient(
                    to bottom,
                    #000 0%,
                    #000 30%,
                    rgb(0 0 0 / 86%) 42%,
                    rgb(0 0 0 / 52%) 72%,
                    transparent 100%
                );
                mask-image: linear-gradient(
                    to bottom,
                    #000 0%,
                    #000 30%,
                    rgb(0 0 0 / 86%) 42%,
                    rgb(0 0 0 / 52%) 72%,
                    transparent 100%
                );
                /* Keep the sticky chrome opaque without blurring dashboard copy
                   as it scrolls beneath the selector. */
                -webkit-backdrop-filter: none;
                backdrop-filter: none;
            }

            .dashboard-subject-trigger {
                position: relative;
                z-index: 1;
            }

            .dashboard-header > :first-child {
                order: 0;
                flex: 0 0 auto;
                width: max-content;
                max-width: 100%;
                margin-top: 4px;
                margin-bottom: 14px;
            }

            .dashboard-title-row {
                width: max-content;
                max-width: 100%;
            }

            .dashboard-subject-meta {
                width: 100%;
                max-width: 100%;
            }

            .dashboard-columns { order: 1; }

            .dashboard-header {
                align-items: flex-start;
                flex-direction: column-reverse;
                gap: 8px;
                margin-bottom: 14px;
                padding-top: 0;
            }

            .dashboard-header p {
                margin-bottom: 3px;
                font-size: 9px;
            }

            .dashboard-subject-meta {
                gap: 6px;
            }

            .dashboard-header > :first-child {
                width: 100%;
                min-width: 0;
            }

            .dashboard-title-row {
                min-width: 0;
                display: grid;
                gap: 4px;
            }

            .dashboard-title-row h1 {
                min-width: 0;
                overflow-wrap: anywhere;
                white-space: normal;
                font-size: 18px;
                letter-spacing: -0.04em;
            }

            .dashboard-level {
                width: max-content;
                font-size: 13px;
            }
            .dashboard-header-actions {
                position: static;
                width: 100%;
                align-self: flex-start;
                gap: 0;
            }
            .dashboard-header-actions > button:not(.dashboard-subject-trigger),
            .dashboard-header-actions .theme-button,
            .dashboard-header-actions .account-trigger {
                width: 24px;
                min-width: 24px;
                height: 24px;
                min-height: 24px;
                padding: 3px;
            }

            .dashboard-header-actions > .global-home-button,
            .dashboard-header-actions > .account-trigger,
            .dashboard-header-actions > .dashboard-settings-button {
                display: none;
            }

            .dashboard-subject-selector {
                width: 100%;
            }

            .dashboard-columns {
                display: flex !important;
                width: 100%;
                min-width: 0;
                flex-direction: column;
                align-items: stretch;
                gap: 14px;
            }

            .dashboard-tools {
                display: flex !important;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                overflow: visible;
            }

            .dashboard-tools .folder-cluster,
            .dashboard-tools .action-cluster {
                width: 100%;
            }

            .dashboard-tools .folder-cluster {
                padding: 0;
            }

            .folder-group,
            .dashboard-workspace .action-group {
                width: 200px;
                grid-template-columns: repeat(2, 84px);
                column-gap: 14px;
                row-gap: 8px;
            }

            .dashboard-tools .folder-group,
            .dashboard-tools .action-group {
                width: 100%;
                margin: 0;
            }

            .dashboard-tools .folder-group {
                display: grid;
                justify-content: center;
            }

            .dashboard-tools .action-group {
                display: flex;
                flex-direction: column;
                gap: 0;
            }

            .dashboard-tools .action-shelf-row {
                display: grid;
                grid-template-columns: repeat(2, 84px);
                justify-content: center;
                column-gap: 14px;
                width: 100%;
            }

            .dashboard-tools .action-shelf-row + .action-shelf-row {
                margin-top: 8px;
            }

            .folder-tool,
            .dashboard-workspace .action-folder-tool {
                width: 84px !important;
                min-width: 84px;
                min-height: 81px;
                flex: 0 0 81px;
                gap: 6px;
                padding: 5px 3px 2px;
            }

            .folder-tool__visual,
            .dashboard-workspace .action-folder-tool .folder-tool__visual {
                width: 84px;
                height: 64px;
                min-height: 64px;
                flex: 0 0 64px !important;
            }

            .react-folder-mount {
                width: 84px;
                height: 64px;
            }

            .folder__back::after {
                width: 21px;
                height: 7px;
            }

            .folder-tool .folder-stamp {
                top: 5px;
                right: 6px;
                font-size: 20px;
                line-height: 1;
            }

            .folder-tool-label,
            .dashboard-workspace .action-folder-tool .folder-tool-label {
                width: 84px;
                max-width: 84px;
                font-size: 11px !important;
                line-height: 1.1;
            }

            .dashboard-grid { display: contents; }

            .dashboard-inner .progress-card {
                order: 2;
                width: 200px;
                height: 185px !important;
                min-height: 185px !important;
                align-self: flex-start;
                border-radius: 10px;
            }

            .progress-card .progress-card-windowbar {
                min-height: 34px;
                padding: 8px 11px;
            }

            .progress-card .progress-card-windowbar h2 { font-size: 12px; }

            .progress-card .paper-progress-chart {
                height: calc(100% - 34px);
                padding: 10px;
            }

            .progress-card .paper-progress-track,
            .progress-card .paper-progress-page { gap: 10px; }

            .progress-card .paper-progress-page {
                grid-template-columns: minmax(0, 1fr);
            }

            .progress-card .paper-year-group,
            .progress-card .paper-year-group:nth-child(even) { gap: 6px; }

            .progress-card .paper-year-header {
                padding: 6px 10px;
                border-radius: 10px;
            }

            .progress-card .paper-year-header strong { font-size: 14px; }
            .progress-card .paper-month-row {
                grid-template-columns: 62px minmax(0, 1fr);
                column-gap: 4px;
                min-height: 36px;
                padding: 5px 10px;
            }
            .progress-card .paper-series-cells {
                justify-content: flex-start;
                gap: 4px;
            }
            .progress-card .paper-month-label,
            .progress-card .paper-progress-code { font-size: 11px; }

            .dashboard-columns .history-card {
                order: 3;
                width: 200px !important;
                max-width: 200px !important;
                align-self: flex-start;
            }

            .dashboard-columns .history-card .history-shelf-mount,
            .history-shelf {
                width: 200px !important;
                max-width: 200px !important;
            }

            .history-shelf {
                height: 170px;
                border-radius: 12px;
                overflow: hidden;
            }

            .history-shelf-header { padding: 8px 12px 6px; }
            .history-shelf-title { font-size: 12px; }
            .history-shelf-track {
                display: flex;
                height: calc(100% - 31px);
                flex-direction: column;
                gap: 0;
                overflow-x: hidden;
                overflow-y: auto;
                overscroll-behavior: contain;
                scroll-snap-type: y proximity;
                scrollbar-width: none;
            }
            .history-shelf-track::-webkit-scrollbar { display: none; }
            .history-shelf-card {
                width: 100%;
                min-width: 0;
                height: auto;
                min-height: auto;
                flex: 0 0 auto;
                padding: 6px 12px 8px;
                border-right: 0;
                border-bottom: 1px solid var(--history-line);
                scroll-snap-align: start;
            }
            .history-shelf-card:last-child { border-bottom: 0; }
            .history-shelf-date { font-size: 17px; }
            .history-shelf-entries {
                display: flex;
                width: 100%;
                height: auto;
                flex-direction: column;
                flex-wrap: nowrap;
                column-gap: 0;
                overflow: visible;
            }
            .history-shelf-line {
                width: 100%;
                height: 22px;
                flex-basis: 22px;
                grid-template-columns: minmax(0, 1fr) max-content;
                gap: 8px;
                font-size: 10px;
            }
            .history-shelf-line:nth-child(3n + 1) {
                border-top: 1px solid color-mix(in srgb, var(--history-line) 78%, transparent);
            }
            .history-shelf-line:first-child { border-top: 0; }

            /* Keep the dashboard launcher visible while its existing workspace opens beside it. */
            .dashboard-workspace.has-active-pane {
                position: absolute;
                z-index: 3;
                inset: 0 auto 0 0;
                width: 228px;
            }

            .main > .dashboard-workspace.has-active-pane ~ .workspace:not([hidden]),
            .main > .dashboard-workspace.has-active-pane ~ .find-question-page:not([hidden]),
            .main > .dashboard-workspace.has-active-pane ~ .topical-workspace:not([hidden]),
            .main > .dashboard-workspace.has-active-pane ~ .syllabus-workspace:not([hidden]),
            .main > .dashboard-workspace.has-active-pane ~ .review-workspace:not([hidden]),
            .main > .dashboard-workspace.has-active-pane ~ .app-home-panel:not([hidden]),
            .main > .dashboard-workspace.has-active-pane ~ .account-page:not([hidden]) {
                position: absolute;
                z-index: 2;
                inset: 0 0 0 228px;
                width: auto;
                height: 100%;
                min-height: 0;
            }

            .main > .dashboard-workspace.has-active-pane ~ .review-workspace:not([hidden]) {
                z-index: 4;
            }
        }

        /* Dashboard top bar: keep the existing controls above the sidebar and workspace. */
        @media (min-width: 760px) {
            .topbar {
                height: 50px;
                min-height: 50px;
                box-sizing: border-box;
                z-index: 4;
            }

            body:has(#dashboardWorkspace:not([hidden])) .topbar {
                display: flex !important;
            }

            .dashboard-workspace {
                height: calc(100vh - 50px);
                min-height: calc(100vh - 50px);
            }

            .dashboard-workspace.has-active-pane {
                top: 50px;
                bottom: 0;
                height: auto;
            }

            .main > .dashboard-workspace.has-active-pane ~ .workspace:not([hidden]),
            .main > .dashboard-workspace.has-active-pane ~ .find-question-page:not([hidden]),
            .main > .dashboard-workspace.has-active-pane ~ .topical-workspace:not([hidden]),
            .main > .dashboard-workspace.has-active-pane ~ .syllabus-workspace:not([hidden]),
            .main > .dashboard-workspace.has-active-pane ~ .review-workspace:not([hidden]),
            .main > .dashboard-workspace.has-active-pane ~ .app-home-panel:not([hidden]),
            .main > .dashboard-workspace.has-active-pane ~ .account-page:not([hidden]) {
                inset: 50px 0 0 228px;
                height: auto;
            }

            /* Join the dashboard sidebar to the topbar instead of drawing two stacked edges. */
            body:has(#dashboardWorkspace:not([hidden])) {
                --dashboard-join-surface: var(--surface);
                --dashboard-sidebar-width: 228px;
                --dashboard-chrome-radius: 18px;
            }

            body:has(#dashboardWorkspace:not([hidden])) .topbar {
                border-bottom: 0;
                background: var(--dashboard-join-surface);
            }

            [data-theme="dark"] body:has(#dashboardWorkspace:not([hidden])) {
                --dashboard-join-surface: rgb(18 22 31 / 88%);
            }

            /* Treat the topbar and dashboard sidebar as one desktop chrome frame. */
            body:has(#dashboardWorkspace:not([hidden])) .main {
                display: grid;
                grid-template-columns: var(--dashboard-sidebar-width) minmax(0, 1fr);
                grid-template-rows: 50px minmax(0, 1fr);
                overflow: hidden;
                background: var(--dashboard-join-surface);
                transition: grid-template-columns 220ms cubic-bezier(.2, .8, .2, 1);
            }

            body:has(#dashboardWorkspace:not([hidden])) .topbar-left,
            body:has(#dashboardWorkspace:not([hidden])) .topbar-brand,
            body:has(#dashboardWorkspace:not([hidden])) .topbar-brand-logo,
            body:has(#dashboardWorkspace:not([hidden])) .topbar .sidebar-toggle-button,
            body:has(#dashboardWorkspace:not([hidden])) .topbar-search-button {
                transition: width 220ms cubic-bezier(.2, .8, .2, 1),
                    min-width 220ms cubic-bezier(.2, .8, .2, 1),
                    margin-left 220ms cubic-bezier(.2, .8, .2, 1),
                    gap 220ms cubic-bezier(.2, .8, .2, 1),
                    opacity 160ms ease;
            }

            body:has(#dashboardWorkspace:not([hidden])) .topbar-brand {
                width: 220px;
            }

            body:has(#dashboardWorkspace:not([hidden])) .topbar-brand-logo {
                width: 210px;
                max-width: 210px;
                height: auto;
            }

            body:has(#dashboardWorkspace:not([hidden])) .topbar-search-button {
                margin-left: -30px;
            }

            body.dashboard-sidebar-collapsed:has(#dashboardWorkspace:not([hidden])) {
                --dashboard-sidebar-width: 8px;
            }

            body.dashboard-sidebar-collapsed:has(#dashboardWorkspace:not([hidden])) .topbar-left {
                gap: 0;
            }

            body.dashboard-sidebar-collapsed:has(#dashboardWorkspace:not([hidden])) .topbar-brand {
                width: 0;
                opacity: 0;
                pointer-events: none;
            }

            body.dashboard-sidebar-collapsed:has(#dashboardWorkspace:not([hidden])) .topbar-brand-logo {
                width: 0;
            }

            body.dashboard-sidebar-collapsed:has(#dashboardWorkspace:not([hidden])) .topbar-search-button {
                margin-left: 6px;
            }

            body.dashboard-sidebar-collapsed:has(#dashboardWorkspace:not([hidden])) .main > #dashboardWorkspace {
                display: block;
                overflow: hidden;
            }

            /* The dashboard landing state has no active workspace element, so give the
               empty right-hand stage the same continuous rounded frame. */
            body:has(#dashboardWorkspace:not([hidden])):not(:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden]))) .main::after {
                content: "";
                position: absolute;
                z-index: 1;
                inset: 50px 0 0 var(--dashboard-sidebar-width);
                box-sizing: border-box;
                border-top: 3px solid var(--border);
                border-left: 3px solid var(--border);
                border-top-left-radius: var(--dashboard-chrome-radius);
                background: var(--surface);
                pointer-events: none;
                transition: left 220ms cubic-bezier(.2, .8, .2, 1);
            }

            body:has(#dashboardWorkspace:not([hidden])) .main > .topbar {
                grid-column: 1 / -1;
                grid-row: 1;
                border-bottom: 0;
            }

            body:has(#dashboardWorkspace:not([hidden])) .main > #dashboardWorkspace {
                position: relative;
                inset: auto;
                grid-column: 1;
                grid-row: 1;
                width: auto;
                height: auto;
                min-height: 0;
                border-right: 0;
                border-radius: 0;
                background: var(--dashboard-join-surface);
                z-index: 3;
            }

            body:has(#dashboardWorkspace:not([hidden])) .main > #dashboardWorkspace .dashboard-inner {
                width: 100%;
                height: 100%;
                border: 0;
                border-radius: 0;
                background: transparent;
            }

            body:has(#dashboardWorkspace:not([hidden])) .main > .workspace:not([hidden]),
            body:has(#dashboardWorkspace:not([hidden])) .main > .topical-workspace:not([hidden]):not(:has(#topicalQuestionView:not([hidden]))),
            body:has(#dashboardWorkspace:not([hidden])) .main > .syllabus-workspace:not([hidden]),
            body:has(#dashboardWorkspace:not([hidden])) .main > .review-workspace:not([hidden]),
            body:has(#dashboardWorkspace:not([hidden])) .main > #practiceStudioWorkspace:not([hidden]),
            body:has(#dashboardWorkspace:not([hidden])) .main > .find-question-page:not([hidden]),
            body:has(#dashboardWorkspace:not([hidden])) .main > .app-home-panel:not([hidden]),
            body:has(#dashboardWorkspace:not([hidden])) .main > .account-page:not([hidden]) {
                position: relative;
                inset: auto;
                grid-column: 2;
                grid-row: 1;
                width: auto;
                height: auto;
                min-height: 0;
                z-index: 2;
                border: 0;
                border-radius: var(--dashboard-chrome-radius);
                background: var(--surface);
                overflow: hidden;
            }

            body:has(#dashboardWorkspace:not([hidden])) .main > .app-home-panel:not([hidden]) {
                overflow-y: auto;
            }

            body:has(#dashboardWorkspace:not([hidden])) .main > #practiceStudioWorkspace:not([hidden]) {
                overflow-y: auto;
            }

            body:has(#dashboardWorkspace:not([hidden])) .main > .topical-workspace.topic-selection-open:not([hidden]) {
                overflow-x: hidden;
                overflow-y: auto;
            }
        }

        /* Let the topical page itself carry vertical motion so the aurora and
           breadcrumb header move away with the question content. The PDF stage
           retains its topical-only horizontal paging behavior. */
        .topical-question-nav.paper-reader-question-nav-hidden {
            display: none;
        }

        .topical-workspace.paper-reader-mode .topical-pdf-toolbar {
            display: none;
        }

        /* Practice keeps the focused paper reader, but retains the writing
           controls needed for submitting a complete test. */
        .topical-workspace.practice-reader-mode .topical-pdf-toolbar {
            display: flex;
        }

        .topical-workspace:not([hidden]) {
            overflow-x: hidden;
            overflow-y: auto !important;
        }

        .topical-workspace:not([hidden]) > .topical-detail {
            min-height: auto;
            overflow: visible;
        }

        @media (min-width: 821px) {
            .topical-workspace:not([hidden]) {
                grid-template-rows: auto auto;
            }
        }

        @media (max-width: 820px) {
            .topical-workspace:not([hidden]) {
                grid-template-rows: auto auto auto;
            }
        }

        /* Compact topical question chrome inspired by the reference control bar. */
        .topical-question-view .topical-view-header {
            align-items: center;
            min-height: 58px;
            margin-bottom: 12px;
            padding: 10px 12px 10px 16px;
            border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
            border-radius: 18px;
            background: color-mix(in srgb, var(--surface) 96%, transparent);
            box-shadow: 0 2px 8px rgba(28, 36, 54, 0.035);
        }

        .topical-question-view .topical-view-header > div:first-child {
            min-width: 0;
        }

        .topical-question-view .topical-view-header > div:first-child > span {
            display: block;
            overflow: hidden;
            color: var(--muted);
            font-size: 10px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .topical-question-view .topical-view-header h2 {
            margin: 2px 0 0;
            color: var(--text);
            font-size: 16px;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.2;
        }

        .topical-question-view .topical-view-header p {
            display: -webkit-box;
            overflow: hidden;
            margin: 4px 0 0;
            font-size: 10px;
            line-height: 1.35;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .topical-question-view .topical-document-switcher {
            flex: 0 0 auto;
            gap: 3px;
            padding: 3px;
            border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
            border-radius: 999px;
            background: var(--surface-soft);
        }

        .topical-question-view .topical-document-switcher button {
            min-height: 30px;
            padding: 6px 11px;
            border-radius: 999px;
            color: var(--muted);
            background: transparent;
            font-size: 11px;
            font-weight: 650;
        }

        .topical-question-view .topical-document-switcher button.active {
            color: var(--text);
            background: var(--surface);
            box-shadow: 0 1px 3px rgba(28, 36, 54, 0.1);
        }

        .topical-question-view .topical-document-switcher button[data-topical-pdf-type="markScheme"].active {
            color: #1685c5;
            background: #e1f3ff;
            box-shadow: none;
        }

        .topical-question-view .topical-pdf-toolbar {
            justify-content: flex-end;
            min-height: 0;
            gap: 8px;
            margin: 0 0 8px;
            padding: 0;
            border: 0;
            background: transparent;
        }

        .topical-question-view .topical-pdf-toolbar span {
            min-width: auto;
            padding: 7px 11px;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--muted);
            background: var(--surface);
            font-size: 10px;
            font-weight: 600;
        }

        .topical-question-view .topical-pdf-toolbar .toolbar-button {
            display: grid;
            width: 34px;
            height: 34px;
            padding: 8px;
            place-items: center;
            border: 1px solid var(--border);
            border-radius: 50%;
            color: var(--muted);
            background: var(--surface);
        }

        .topical-question-view .topical-pdf-toolbar .toolbar-button:hover:not(:disabled),
        .topical-question-view .topical-pdf-toolbar .toolbar-button:focus-visible {
            color: var(--text);
            border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
            background: var(--surface-soft);
        }

        @media (max-width: 820px) {
            .topical-question-view .topical-view-header {
                align-items: stretch;
                flex-direction: column;
                min-height: 0;
                padding: 10px 14px;
            }

            .topical-question-view .topical-document-switcher {
                width: 100%;
            }

            .topical-question-view .topical-document-switcher button {
                flex: 1;
            }
        }

        /* Join the question header, page controls, and topical PDF into one
           quiet viewer frame. */
        .topical-question-view .topical-view-header {
            position: relative;
            z-index: 4;
            align-items: center;
            min-height: 52px;
            margin-bottom: 0;
            padding-top: 8px;
            padding-bottom: 8px;
            border-bottom: 0;
            border-radius: 18px 18px 0 0;
        }

        .topical-view-primary {
            position: relative;
            min-width: 0;
        }

        .topical-view-title-row {
            display: flex;
            align-items: center;
            gap: 5px;
        }


        .topical-meta-button {
            display: grid;
            width: 24px;
            height: 22px;
            margin-top: 0;
            padding: 0;
            place-items: center;
            border: 0;
            border-radius: 7px;
            color: var(--muted);
            background: transparent;
        }

        .topical-meta-button:hover,
        .topical-meta-button:focus-visible,
        .topical-meta-button[aria-expanded="true"] {
            color: var(--text);
            background: var(--surface-soft);
        }

        .topical-meta-button .icon {
            width: 17px;
            height: 17px;
            fill: currentColor;
            stroke: none;
        }

        .topical-meta-popover {
            position: absolute;
            z-index: 12;
            top: calc(100% + 8px);
            left: 0;
            width: min(320px, calc(100vw - 48px));
            padding: 12px 14px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--surface);
            box-shadow: 0 12px 28px rgba(28, 36, 54, 0.16), 0 2px 6px rgba(28, 36, 54, 0.08);
        }

        .topical-meta-popover p {
            display: block !important;
            overflow: visible !important;
            margin: 0 !important;
            color: var(--muted);
            font-size: 12px !important;
            line-height: 1.5 !important;
            -webkit-line-clamp: unset !important;
        }

        .topical-question-view .topical-pdf-toolbar {
            margin: 0;
            padding: 6px 10px;
            border: 1px solid var(--border);
            border-top: 0;
            border-bottom: 0;
            border-radius: 0;
            background: var(--surface);
        }

        .topical-question-view .topical-pdf-stage {
            border-top: 0;
            border-radius: 0 0 18px 18px;
        }

        .topical-view-actions {
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            gap: 8px;
        }

        .topical-question-view .topical-header-check-button {
            min-height: 30px;
            padding: 6px 11px;
            border-radius: 999px;
            font-size: 11px;
            white-space: nowrap;
        }

        .topical-question-view .topical-header-check-button .icon {
            width: 14px;
            height: 14px;
        }

        /* Keep answer status and feedback functional without the former card. */
        .topical-question-view .topical-answer-section {
            margin-top: 14px;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
        }

        .topical-question-view .topical-answer-heading h3 {
            font-size: 13px;
        }

        .topical-question-view .topical-answer-heading p {
            font-size: 11px;
        }

        .topical-question-view .topical-answer-actions {
            justify-content: flex-start;
            margin-top: 8px;
        }

        @media (max-width: 820px) {
            .topical-view-actions {
                width: 100%;
                align-items: stretch;
                flex-direction: column;
            }

            .topical-question-view .topical-header-check-button {
                width: 100%;
                justify-content: center;
            }
        }

        /* Keep page navigation on the same compact header line. */
        .topical-view-actions .topical-pdf-toolbar {
            display: flex;
            min-height: 0;
            gap: 5px;
            margin: 0;
            padding: 0;
            border: 0;
            background: transparent;
        }

        .topical-view-actions .topical-pdf-toolbar span {
            min-width: auto;
            padding: 6px 8px;
            font-size: 10px;
        }

        .topical-view-actions .topical-pdf-toolbar .toolbar-button {
            width: 30px;
            height: 30px;
            padding: 7px;
        }

        .topical-question-view .topical-pdf-stage {
            border-top: 1px solid var(--border);
        }

        @media (max-width: 820px) {
            .topical-view-actions .topical-pdf-toolbar {
                width: 100%;
                justify-content: flex-end;
            }
        }

        /* Softer rectangular controls; navigation arrows remain circular. */
        .topical-question-view .topical-header-check-button,
        .topical-question-view .topical-document-switcher,
        .topical-question-view .topical-document-switcher button,
        .topical-view-actions .topical-pdf-toolbar span {
            border-radius: 11px;
        }

        /* Selected-subtopic reader: compact exam chrome with a real PDF stage. */
        @media (min-width: 821px) {
            .topical-workspace:not(.topic-selection-open) {
                grid-template-rows: 58px minmax(0, 1fr);
                background: var(--pdf-bg);
            }

            .topical-workspace:not(.topic-selection-open) .topical-aurora-header {
                min-height: 58px;
                height: 58px;
                padding: 0 18px;
                align-content: center;
                border-bottom: 1px solid var(--border);
                background: var(--surface);
            }

            .topical-workspace:not(.topic-selection-open) .topical-storm-background {
                display: none;
            }

            .topical-workspace:not(.topic-selection-open) .topical-breadcrumbs {
                z-index: 2;
                width: auto;
                margin: 0;
                color: var(--muted);
                font-size: 11px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-breadcrumbs__separator {
                font-size: 13px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-aurora-title-row {
                position: absolute;
                inset: 0;
                z-index: 1;
                align-items: center;
                justify-content: center;
                width: auto;
                pointer-events: none;
            }

            .topical-workspace:not(.topic-selection-open) .topical-aurora-title-row h1 {
                color: var(--text);
                font-size: 13px;
                font-weight: 600;
                letter-spacing: -0.01em;
            }

            .topical-workspace:not(.topic-selection-open) .topical-level-picker {
                position: absolute;
                right: 18px;
                pointer-events: auto;
            }

            .topical-workspace:not(.topic-selection-open) .topical-level-trigger {
                min-height: 30px;
                padding: 0 8px;
                border: 1px solid var(--border);
                border-radius: 7px;
                color: var(--muted);
                font-size: 11px;
                letter-spacing: 0;
            }

            .topical-workspace:not(.topic-selection-open) > .topical-browser {
                margin: 0;
                padding: 0;
                border: 0;
                border-right: 1px solid var(--border);
                border-radius: 0;
                box-shadow: none;
                background: var(--surface);
            }

            .topical-workspace:not(.topic-selection-open) .topical-browser-header {
                min-height: 67px;
                padding: 15px 16px 11px;
                border-bottom: 1px solid var(--border);
            }

            .topical-workspace:not(.topic-selection-open) .topical-browser-header h1 {
                margin-top: 3px;
                font-size: 16px;
                font-weight: 600;
            }

            .topical-workspace:not(.topic-selection-open) .topical-browser-header span {
                font-size: 10px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-change-subject {
                min-height: 30px;
                padding: 5px 8px;
                border-radius: 7px;
                background: transparent;
                font-size: 11px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-filters {
                margin: 0;
                padding: 12px 12px 0;
            }

            .topical-workspace:not(.topic-selection-open) .topical-filters label > span {
                margin-bottom: 5px;
                font-size: 10px;
                font-weight: 600;
            }

            .topical-workspace:not(.topic-selection-open) .topical-filters .field {
                height: 31px;
                border-radius: 7px;
                background: var(--bg);
            }

            .topical-workspace:not(.topic-selection-open) .topical-result-summary {
                padding: 11px 14px 7px;
                font-size: 10px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-question-list {
                padding: 2px 8px 12px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-question-item {
                grid-template-columns: 34px minmax(0, 1fr) 13px;
                min-height: 65px;
                margin: 3px 0;
                padding: 10px 9px;
                border-radius: 7px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-question-item.active {
                border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
                background: color-mix(in srgb, var(--accent) 7%, var(--surface));
                box-shadow: inset 3px 0 0 var(--accent);
            }

            .topical-workspace:not(.topic-selection-open) .topical-question-number {
                width: 30px;
                height: 30px;
                border-radius: 7px;
                font-size: 11px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-question-copy strong {
                font-size: 12px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-question-copy span {
                margin-top: 3px;
                font-size: 10px;
            }

            .topical-workspace:not(.topic-selection-open) > .topical-detail {
                margin: 0;
                padding: 0;
                background: var(--pdf-bg);
            }
        }

        .topical-workspace:not(.topic-selection-open) .topical-question-view {
            display: flex;
            width: 100%;
            min-height: 100%;
            margin: 0;
            flex-direction: column;
        }

        .topical-workspace:not(.topic-selection-open) .topical-question-view .topical-view-header {
            flex: 0 0 auto;
            min-height: 58px;
            padding: 10px 16px;
            border: 0;
            border-bottom: 1px solid var(--border);
            border-radius: 0;
            background: var(--topical-reader-bar);
        }

        .topical-workspace:not(.topic-selection-open) #topicalViewPaper {
            display: block;
            overflow: hidden;
            max-width: min(36vw, 360px);
            color: var(--muted);
            font-size: 10px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .topical-workspace:not(.topic-selection-open) .topical-question-view .topical-view-header h2 {
            margin-top: 2px;
            font-size: 15px;
            font-weight: 600;
        }

        .topical-workspace:not(.topic-selection-open) .topical-view-actions {
            gap: 6px;
        }

        .topical-workspace:not(.topic-selection-open) .topical-header-check-button {
            min-height: 30px;
            padding: 5px 9px;
            border-radius: 7px;
            font-size: 11px;
        }

        .topical-workspace:not(.topic-selection-open) .topical-document-switcher {
            padding: 2px;
            border-radius: 7px;
            background: var(--surface-soft);
        }

        .topical-workspace:not(.topic-selection-open) .topical-document-switcher button {
            min-height: 30px;
            padding: 5px 9px;
            border-radius: 6px;
            font-size: 11px;
        }

        .topical-workspace:not(.topic-selection-open) .topical-document-switcher button.active {
            box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 10%, transparent);
        }

        .topical-workspace:not(.topic-selection-open) .topical-view-actions .topical-pdf-toolbar {
            gap: 4px;
            padding: 0;
            border: 0;
            background: transparent;
        }

        .topical-workspace:not(.topic-selection-open) .topical-view-actions .topical-pdf-toolbar span {
            min-width: 82px;
            padding: 6px 7px;
            border: 1px solid var(--border);
            border-radius: 7px;
            background: var(--surface);
            font-size: 10px;
        }

        .topical-workspace:not(.topic-selection-open) .topical-view-actions .topical-pdf-toolbar .toolbar-button {
            width: 30px;
            height: 30px;
            padding: 6px;
            border-radius: 7px;
            background: var(--surface);
        }

        .topical-workspace:not(.topic-selection-open) .topical-pdf-stage {
            flex: 1 1 auto;
            min-height: 0;
            padding: 20px 22px 28px;
            overflow: auto;
            border: 0;
            border-radius: 0;
            background: var(--pdf-bg);
        }

        .topical-workspace:not(.topic-selection-open) .topical-pdf-page-stack {
            display: flex;
            width: 100%;
            min-width: 100%;
            min-height: 100%;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 20px;
        }

        .topical-workspace:not(.topic-selection-open) .topical-pdf-page-shell {
            border-color: color-mix(in srgb, var(--border) 86%, transparent);
            box-shadow: 0 1px 3px rgba(23, 31, 45, 0.12);
            margin-inline: auto;
        }

        .topical-workspace:not(.topic-selection-open) .topical-pdf-canvas {
            box-shadow: none;
            margin-inline: auto;
        }

        .topical-workspace:not(.topic-selection-open) .topical-pdf-stage {
            overflow-x: hidden;
            overflow-y: auto;
        }

        .topical-workspace:not(.topic-selection-open) .topical-answer-section {
            flex: 0 0 auto;
            margin: 0;
            padding: 8px 16px;
            border: 0;
            border-top: 1px solid var(--border);
            border-radius: 0;
            background: var(--surface);
        }

        .topical-workspace:not(.topic-selection-open) .topical-answer-heading {
            align-items: center;
        }

        .topical-workspace:not(.topic-selection-open) .topical-answer-heading h3 {
            font-size: 12px;
            font-weight: 600;
        }

        .topical-workspace:not(.topic-selection-open) .topical-answer-heading p {
            margin-top: 2px;
            font-size: 10px;
        }

        .topical-workspace:not(.topic-selection-open) .topical-answer-actions {
            margin-top: 0;
        }

        .topical-workspace:not(.topic-selection-open) .topical-secondary-button {
            min-height: 28px;
            padding: 5px 8px;
            border-radius: 7px;
            font-size: 10px;
        }

        @media (max-width: 820px) {
            .topical-workspace:not(.topic-selection-open) {
                grid-template-rows: 58px minmax(270px, 46vh) minmax(430px, 1fr);
            }

            .topical-workspace:not(.topic-selection-open) .topical-aurora-header {
                min-height: 58px;
                height: 58px;
                padding: 0 12px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-breadcrumbs {
                max-width: calc(100% - 118px);
                margin: 0;
                font-size: 10px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-aurora-title-row {
                display: none;
            }

            .topical-workspace:not(.topic-selection-open) .topical-level-picker {
                right: 12px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-browser {
                min-height: 0;
                padding: 0;
                border-right: 0;
                border-bottom: 1px solid var(--border);
            }

            .topical-workspace:not(.topic-selection-open) .topical-browser-header {
                min-height: 58px;
                padding: 12px 14px 8px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-question-list {
                max-height: none;
            }

            .topical-workspace:not(.topic-selection-open) .topical-detail {
                min-height: 0;
            }

            .topical-workspace:not(.topic-selection-open) .topical-question-view .topical-view-header {
                align-items: stretch;
                padding: 10px 12px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-view-actions {
                width: 100%;
                flex-wrap: wrap;
            }

            .topical-workspace:not(.topic-selection-open) .topical-document-switcher {
                flex: 1 1 180px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-document-switcher button {
                flex: 1;
            }

            .topical-workspace:not(.topic-selection-open) .topical-pdf-stage {
                padding: 12px 10px 18px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-pdf-page-stack {
                justify-content: flex-start;
            }

            .topical-workspace:not(.topic-selection-open) .topical-answer-section {
                padding: 8px 12px;
            }
        }

        /* Keep the question bank close to the compact reference rail. */
        @media (min-width: 821px) {
            .topical-workspace:not(.topic-selection-open) {
                grid-template-columns: 292px minmax(0, 1fr);
            }

            .topical-workspace:not(.topic-selection-open) .topical-browser-header {
                min-height: 58px;
                padding: 12px 13px 9px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-browser-header h1 {
                max-width: 190px;
                font-size: 14px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-filters {
                padding: 9px 10px 0;
            }

            .topical-workspace:not(.topic-selection-open) .topical-result-summary {
                padding: 8px 12px 5px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-question-list {
                padding: 1px 7px 9px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-question-item {
                grid-template-columns: 26px minmax(0, 1fr) 10px;
                gap: 7px;
                min-height: 50px;
                margin: 2px 0;
                padding: 7px 7px;
                border-radius: 7px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-question-number {
                width: 24px;
                height: 24px;
                border-radius: 6px;
                font-size: 10px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-question-copy strong {
                font-size: 11px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-question-copy span {
                margin-top: 2px;
                font-size: 9px;
            }

            .topical-workspace:not(.topic-selection-open) .topical-question-item > .icon {
                width: 12px;
                height: 12px;
            }
        }

        /* Question-bank trigger and popover: keep the reader full width until
           the user explicitly asks to browse questions. */
        .topical-workspace:not(.topic-selection-open) {
            grid-template-columns: minmax(0, 1fr);
        }

        .topical-workspace:not(.topic-selection-open) > .topical-detail {
            grid-column: 1 / -1;
        }

        .topical-workspace:not(.topic-selection-open) > .topical-browser {
            display: none;
        }

        .topical-question-picker-trigger {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            min-height: 30px;
            padding: 5px 9px;
            border: 1px solid #17191d;
            border-radius: 7px;
            color: #fff;
            background: #17191d;
            font-size: 11px;
            font-weight: 600;
            white-space: nowrap;
        }

        .topical-question-picker-trigger:hover,
        .topical-question-picker-trigger:focus-visible,
        .topical-question-picker-trigger[aria-expanded="true"] {
            background: #2b2f36;
        }

        .topical-question-picker-trigger:disabled {
            cursor: default;
            opacity: .48;
        }

        .topical-question-picker-trigger .icon {
            width: 13px;
            height: 13px;
        }

        /* Paper and practice readers already have a fixed paper context; the
           topical question-bank counter is only useful in topical mode. */
        .topical-workspace.paper-reader-mode .topical-question-picker-trigger,
        .topical-workspace.practice-reader-mode .topical-question-picker-trigger {
            display: none !important;
        }

        /* These reader modes use continuous PDF scrolling, so page controls
           and a destructive clear action add no useful chrome. */
        .workspace.practice-workspace #clearPracticePageButton,
        .topical-workspace #topicalClearPracticeButton,
        .topical-workspace.paper-reader-mode .topical-pdf-toolbar,
        .topical-workspace.practice-reader-mode .topical-pdf-toolbar {
            display: none !important;
        }

        .topical-workspace:not(.topic-selection-open) > .topical-browser.is-open {
            position: fixed;
            z-index: 1000;
            top: var(--topical-browser-top, 58px);
            left: var(--topical-browser-left, 14px);
            display: flex;
            width: min(292px, calc(100% - 28px));
            max-height: var(--topical-browser-max-height, min(520px, calc(100vh - 72px)));
            padding: 0;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: var(--surface);
            box-shadow: 0 4px 8px rgba(28, 36, 54, .14);
        }

        .topical-browser.is-open .topical-browser-header {
            flex: 0 0 auto;
            align-items: center;
            min-height: 48px;
            padding: 10px 11px 8px;
            border-bottom: 1px solid var(--border);
        }

        .topical-browser.is-open .topical-browser-header h1 {
            margin-top: 2px;
            font-size: 13px;
            font-weight: 600;
        }

        .topical-browser.is-open .topical-browser-header span {
            font-size: 9px;
        }

        .topical-browser.is-open .topical-change-subject {
            min-height: 26px;
            padding: 4px 7px;
            border-radius: 6px;
            font-size: 10px;
        }

        .topical-browser.is-open .topical-filters {
            flex: 0 0 auto;
            margin-top: 0;
            padding: 9px 10px 0;
        }

        .topical-browser.is-open .topical-filters label > span {
            display: none;
        }

        .topical-browser.is-open .topical-filters .field {
            height: 29px;
            border-radius: 6px;
            font-size: 11px;
        }

        .topical-browser.is-open .topical-result-summary {
            flex: 0 0 auto;
            padding: 8px 11px 5px;
            font-size: 9px;
        }

        .topical-browser.is-open .topical-question-list {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            align-content: start;
            gap: 6px;
            min-height: 0;
            padding: 4px 11px 13px;
            overflow-y: auto;
        }

        .topical-browser.is-open .topical-question-item {
            display: grid;
            width: auto;
            min-height: 32px;
            margin: 0;
            padding: 0;
            place-items: center;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--surface-soft);
        }

        .topical-browser.is-open .topical-question-item:hover {
            border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
            background: color-mix(in srgb, var(--accent) 9%, var(--surface));
        }

        .topical-browser.is-open .topical-question-item.active {
            border-color: #17191d;
            color: #fff;
            background: #17191d;
            box-shadow: none;
        }

        .topical-browser.is-open .topical-question-number {
            width: auto;
            height: auto;
            color: inherit;
            background: transparent;
            font-size: 10px;
            font-weight: 600;
        }

        .topical-browser.is-open .topical-question-number-prefix {
            display: none;
        }

        .topical-browser.is-open .topical-question-copy,
        .topical-browser.is-open .topical-question-item > .icon {
            display: none;
        }

        .topical-workspace.topical-question-browser-open {
            z-index: 4 !important;
        }

        @media (max-width: 820px) {
            .topical-workspace:not(.topic-selection-open) {
                grid-template-rows: 58px minmax(0, 1fr);
            }

            .topical-workspace:not(.topic-selection-open) > .topical-browser,
            .topical-workspace:not(.topic-selection-open) > .topical-detail {
                grid-column: 1;
                grid-row: 2;
            }

            .topical-workspace:not(.topic-selection-open) > .topical-browser.is-open {
                width: min(292px, calc(100% - 24px));
            }

            .topical-workspace:not(.topic-selection-open) .topical-question-view .topical-view-header {
                min-height: 58px;
            }
        }

        /* The reader does not need the separate topical navigation layer. */
        .topical-workspace:not(.topic-selection-open) {
            grid-template-rows: minmax(0, 1fr);
        }

        .topical-workspace:not(.topic-selection-open) > .topical-aurora-header {
            display: none;
        }

        .topical-workspace:not(.topic-selection-open) > .topical-detail {
            grid-row: 1;
        }

        @media (max-width: 820px) {
            .topical-workspace:not(.topic-selection-open) > .topical-browser,
            .topical-workspace:not(.topic-selection-open) > .topical-detail {
                grid-row: 1;
            }

        }

        /* Reference-style question bank: compact legend, status grid, and
           the centered question counter dock. */
        .topical-workspace:not(.topic-selection-open) > .topical-browser.is-open {
            width: 288px;
            height: min(420px, var(--topical-browser-max-height, 420px));
            max-height: var(--topical-browser-max-height, 420px);
            border-color: #dfe1e5;
            border-radius: 10px;
            box-shadow: 0 2px 7px rgba(30, 34, 42, .14);
        }

        .topical-browser.is-open .topical-browser-header {
            display: grid;
            grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
            gap: 7px;
            min-height: 51px;
            padding: 0 11px 0 12px;
            border-bottom: 1px solid #e5e6e9;
        }

        .topical-browser.is-open .topical-browser-title h1 {
            margin: 0;
            color: #24262a;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0;
        }

        .topical-question-legend {
            display: grid;
            grid-template-columns: repeat(2, max-content);
            align-items: center;
            justify-content: end;
            column-gap: 8px;
            row-gap: 4px;
            padding: 0;
            color: #37393d;
            font-size: 9px;
            line-height: 1;
        }

        .topical-browser.is-open .topical-legend-item--retry {
            grid-column: 1 / -1;
        }

        .topical-legend-item {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap;
        }

        .topical-status-icon {
            width: 13px;
            height: 13px;
            flex: 0 0 auto;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1.8;
        }

        .topical-status-icon--correct { color: #178a4d; fill: #178a4d; }
        .topical-status-icon--correct path { color: #fff; stroke: #fff; }
        .topical-status-icon--incorrect { color: #e9383d; fill: #e9383d; }
        .topical-status-icon--incorrect path { color: #fff; stroke: #fff; }
        .topical-status-icon--review { color: #69b9e8; fill: #69b9e8; stroke: #69b9e8; }
        .topical-status-icon--retry { color: #7b3fe0; fill: #7b3fe0; stroke: #7b3fe0; }

        .topical-explanation-status-icon {
            width: 13px;
            height: 13px;
            flex: 0 0 auto;
            fill: none;
            stroke: #168fc8;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 2;
        }

        .topical-browser.is-open .topical-question-list {
            flex: 1 1 auto;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 8px;
            padding: 7px 12px 13px;
            overflow-y: auto;
            scrollbar-color: #8e9095 transparent;
            scrollbar-width: auto;
        }

        .topical-browser.is-open .topical-question-list::-webkit-scrollbar {
            width: 8px;
        }

        .topical-browser.is-open .topical-question-list::-webkit-scrollbar-track {
            background: transparent;
        }

        .topical-browser.is-open .topical-question-list::-webkit-scrollbar-thumb {
            border: 2px solid transparent;
            border-radius: 8px;
            background: #8e9095;
            background-clip: padding-box;
        }

        .topical-browser.is-open .topical-question-item {
            position: relative;
            width: auto;
            min-width: 0;
            min-height: 34px;
            height: 34px;
            border-color: transparent;
            border-radius: 6px;
            box-shadow: none;
            font-size: 10px;
        }

        .topical-browser.is-open .topical-question-item.has-explanation {
            border-color: transparent;
            box-shadow: none;
        }

        .topical-browser.is-open .topical-question-explanation-grid-icon {
            display: none;
        }

        .topical-legend-item--explanation {
            display: none !important;
        }

        .topical-browser.is-open .topical-question-item--correct {
            color: #178a4d;
            background: #d8f7e5;
        }

        .topical-browser.is-open .topical-question-item--incorrect {
            color: #e9383d;
            background: #ffe0e3;
        }

        .topical-browser.is-open .topical-question-item--review {
            color: #d98000;
            background: #fff0bd;
        }

        .topical-browser.is-open .topical-question-item--retry {
            color: #7b3fe0;
            background: #ece0ff;
        }

        .topical-browser.is-open .topical-question-item.active.topical-question-item--correct {
            color: #178a4d;
            background: #d8f7e5;
        }

        .topical-browser.is-open .topical-question-item.active.topical-question-item--incorrect {
            color: #e9383d;
            background: #ffe0e3;
        }

        .topical-browser.is-open .topical-question-item.active.topical-question-item--review {
            color: #d98000;
            background: #fff0bd;
        }

        .topical-browser.is-open .topical-question-item.active.topical-question-item--retry {
            color: #7b3fe0;
            background: #ece0ff;
        }

        .topical-browser.is-open .topical-question-item.active {
            border-color: #17191d;
            box-shadow: 0 0 0 1px #17191d;
        }

        .topical-browser.is-open .topical-question-number {
            font-size: 10px;
            font-weight: 600;
        }

        .topical-question-lock {
            position: absolute;
            top: -4px;
            right: -3px;
            width: 11px;
            height: 11px;
            color: #85878b;
            fill: #85878b;
            stroke: #85878b;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1.2;
        }

        .topical-question-picker-dock {
            position: fixed;
            z-index: 1001;
            display: block;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            pointer-events: none;
        }

        .topical-workspace.topic-selection-open > .topical-question-picker-dock {
            display: none;
        }

        .topical-question-picker-trigger {
            pointer-events: auto;
            min-width: 87px;
            min-height: 27px;
            padding: 4px 9px;
            border: 1px solid #17191d;
            border-radius: 8px;
            color: #fff;
            background: #17191d;
            box-shadow: 0 1px 2px rgba(23, 25, 29, .22);
            font-size: 11px;
            font-weight: 600;
        }

        .topical-question-picker-trigger:hover,
        .topical-question-picker-trigger:focus-visible,
        .topical-question-picker-trigger[aria-expanded="true"] {
            color: #fff;
            background: #17191d;
        }

        .topical-question-picker-trigger .icon {
            width: 11px;
            height: 11px;
        }

        .topical-view-header > .topical-question-picker-dock {
            position: static;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex: 0 0 auto;
            transform: none;
            pointer-events: auto;
        }

        .topical-reader-home-button {
            display: grid;
            width: 27px;
            height: 27px;
            padding: 0;
            place-items: center;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--muted);
            background: var(--surface);
        }

        .topical-reader-home-button:hover,
        .topical-reader-home-button:focus-visible {
            color: var(--text);
            border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
            background: var(--surface-soft);
        }

        .topical-reader-home-button .icon {
            width: 14px;
            height: 14px;
        }

        @media (max-width: 820px) {
            .topical-workspace:not(.topic-selection-open) > .topical-browser.is-open {
                width: min(288px, calc(100vw - 24px));
            }

            .topical-question-picker-dock {
                bottom: 8px;
            }
        }

        /* Full-screen topical reader: remove surrounding app chrome while a
           question is open, then restore it when the selector route returns. */
        .app-shell.topical-reader-mode {
            grid-template-columns: minmax(0, 1fr);
        }

        .app-shell.topical-reader-mode .topbar,
        .app-shell.topical-reader-mode .dashboard-workspace {
            display: none !important;
        }

        .app-shell.topical-reader-mode .main {
            grid-template-rows: minmax(0, 1fr);
        }

        /* Route-state fallback keeps reader mode reliable during direct loads. */
        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topbar,
        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .dashboard-workspace {
            display: none !important;
        }

        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .main {
            grid-template-columns: minmax(0, 1fr) !important;
            grid-template-rows: minmax(0, 1fr);
        }

        .app-shell.topical-reader-mode .main > .topical-workspace:not([hidden]),
        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .main > .topical-workspace:not([hidden]) {
            grid-column: 1 / -1 !important;
            grid-row: 1 !important;
            position: relative;
            inset: auto;
            width: 100%;
            height: 100%;
            min-height: 0;
        }

        .topical-workspace.topical-question-open {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: minmax(0, 1fr);
            overflow: hidden !important;
        }

        .topical-workspace.topical-question-open > .topical-aurora-header,
        .topical-workspace.topical-question-open > .topical-browser:not(.is-open) {
            display: none !important;
        }

        .topical-workspace.topical-question-open > .topical-detail {
            grid-column: 1 / -1;
            grid-row: 1;
            height: 100%;
            min-height: 0;
            padding: 0;
            overflow: hidden;
        }

        .topical-workspace.topical-question-open .topical-question-view {
            width: 100%;
            height: 100%;
            min-height: 0;
            margin: 0;
        }

        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-workspace {
            display: grid;
            grid-template-columns: minmax(0, 1fr) !important;
            grid-template-rows: minmax(0, 1fr) !important;
            position: relative !important;
            inset: 0 !important;
            width: 100% !important;
            height: 100% !important;
            overflow: hidden !important;
        }

        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-workspace > .topical-aurora-header,
        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-workspace > .topical-browser:not(.is-open),
        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) #topicalQuestionBrowser:not(.is-open) {
            display: none !important;
        }

        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) #topicalQuestionBrowser:not(.is-open) {
            width: 0 !important;
            min-width: 0 !important;
        }

        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-workspace > .topical-detail {
            grid-column: 1 / -1;
            grid-row: 1;
            width: 100% !important;
            height: 100%;
            min-height: 0;
            padding: 0;
            overflow: hidden;
        }

        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-question-view .topical-answer-section {
            display: none !important;
        }

        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-question-view .topical-view-header {
            justify-content: flex-start;
        }

        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-question-view .topical-view-primary {
            min-width: 0;
            flex: 0 1 auto;
        }

        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-question-view .topical-view-actions {
            margin-left: auto;
        }

        .topical-assistant-trigger {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-height: 30px;
            padding: 5px 9px;
            border: 1px solid var(--border);
            border-radius: 7px;
            color: var(--muted);
            background: var(--surface);
            font-size: 11px;
            font-weight: 600;
            white-space: nowrap;
        }

        .topical-assistant-trigger:hover,
        .topical-assistant-trigger:focus-visible,
        .topical-assistant-trigger[aria-expanded="true"] {
            color: var(--text);
            border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
            background: color-mix(in srgb, var(--accent) 8%, var(--surface));
        }

        .topical-assistant-trigger .icon {
            width: 14px;
            height: 14px;
        }

        .topical-assistant-panel {
            position: fixed;
            z-index: 1200;
            inset: 0 0 0 auto;
            display: flex;
            width: min(440px, 100vw);
            flex-direction: column;
            border-left: 1px solid var(--border);
            color: var(--text);
            background: var(--surface);
            box-shadow: none;
            overflow-x: hidden;
        }

        .topical-assistant-resizer {
            position: absolute;
            z-index: 3;
            top: 0;
            bottom: 0;
            left: -5px;
            display: grid;
            width: 10px;
            place-items: center;
            cursor: col-resize;
            touch-action: none;
        }

        .topical-assistant-resizer span {
            width: 2px;
            height: 42px;
            border-radius: 999px;
            background: transparent;
            transition: background 140ms ease, height 140ms ease;
        }

        .topical-assistant-resizer:hover span,
        .topical-assistant-resizer:focus-visible span,
        .topical-assistant-resizer.dragging span {
            height: 64px;
            background: var(--accent);
        }

        body.topical-assistant-resizing,
        body.topical-assistant-resizing * {
            cursor: col-resize !important;
            user-select: none !important;
        }

        @media (max-width: 820px) {
            .topical-assistant-resizer { display: none; }
        }

        /* Open study tools beside the reader instead of covering the PDF. */
        .topical-workspace.topical-assistant-open,
        .app-shell:has(#topicalAssistantPanel:not([hidden])) .topical-workspace {
            grid-template-columns: minmax(0, 1fr) var(--topical-assistant-width, 420px) !important;
        }

        .topical-workspace.topical-assistant-open > .topical-detail,
        .app-shell:has(#topicalAssistantPanel:not([hidden])) .topical-workspace > .topical-detail {
            grid-column: 1 !important;
            grid-row: 1 !important;
            width: 100% !important;
        }

        .topical-workspace.topical-assistant-open > .topical-assistant-panel,
        .app-shell:has(#topicalAssistantPanel:not([hidden])) .topical-workspace > .topical-assistant-panel {
            position: relative;
            inset: auto;
            grid-column: 2;
            grid-row: 1;
            width: auto;
            height: 100%;
            min-width: 0;
            min-height: 0;
            overflow: hidden;
            border-left: 1px solid var(--border);
            box-shadow: none;
        }

        .topical-assistant-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 58px;
            padding: 10px 14px;
            border-bottom: 1px solid var(--border);
        }

        .topical-assistant-header span {
            color: var(--muted);
            font-size: 10px;
        }

        .topical-assistant-header h2 {
            margin: 3px 0 0;
            font-size: 15px;
            font-weight: 650;
        }

        .topical-assistant-close {
            display: grid;
            width: 28px;
            height: 28px;
            place-items: center;
            border-radius: 6px;
            color: var(--muted);
            background: transparent;
        }

        .topical-assistant-close:hover,
        .topical-assistant-close:focus-visible {
            color: var(--text);
            background: var(--surface-soft);
        }

        .topical-assistant-close .icon {
            width: 15px;
            height: 15px;
        }

        .topical-assistant-tabs {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 3px;
            min-height: 36px;
            margin: 8px 10px;
            padding: 3px;
            border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
            border-radius: 10px;
            background: var(--surface-soft);
        }

        .topical-assistant-tabs button {
            min-height: 30px;
            padding: 6px 10px;
            border: 0;
            border-radius: 7px;
            color: var(--muted);
            background: transparent;
            font-size: 11px;
            font-weight: 650;
            white-space: nowrap;
        }

        .topical-assistant-tabs button:focus-visible { outline: 0; }

        .topical-assistant-tabs button:hover:not(.active) {
            color: var(--muted);
            background: transparent;
            box-shadow: none;
        }

        .topical-assistant-tabs button.active {
            color: var(--text);
            background: var(--surface);
            box-shadow: 0 1px 3px rgba(28, 36, 54, 0.1);
        }

        .topical-assistant-tab-icon {
            width: 13px;
            height: 13px;
            margin-right: 5px;
            vertical-align: -2px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1.8;
        }

        .topical-assistant-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            padding: 18px 18px 34px;
        }

        #topicalAssistantAskPanel:not([hidden]) {
            display: flex;
            flex-direction: column;
        }

        .topical-assistant-ask-heading { order: 0; }
        .topical-assistant-ask-copy { order: 1; }
        .paper-reader-quick-chat-mount { display: none; }
        .topical-assistant-composer { order: 2; }
        .topical-assistant-status { order: 3; }
        #topicalAssistantAskResponse { order: 4; }

        .topical-assistant-tab-panel h3 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
        }

        .topical-assistant-tab-panel > p {
            margin: 7px 0 14px;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.5;
        }

        .topical-assistant-input {
            display: block;
            width: 100%;
            min-height: 92px;
            padding: 10px;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            background: var(--bg);
            font-size: 12px;
            line-height: 1.45;
            resize: vertical;
        }

        .topical-assistant-input:focus {
            outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
            outline-offset: 1px;
            border-color: var(--accent);
        }

        .topical-assistant-submit {
            min-height: 34px;
            margin-top: 10px;
            padding: 7px 12px;
            border-radius: 7px;
            color: #fff;
            background: var(--accent);
            font-size: 11px;
            font-weight: 650;
        }

        .topical-assistant-submit:hover,
        .topical-assistant-submit:focus-visible {
            background: var(--accent-hover);
        }

        .topical-assistant-submit svg {
            width: 15px;
            height: 15px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1.8;
        }

        .topical-assistant-status {
            min-height: 18px;
            margin: 8px 0 0 !important;
            color: var(--muted);
            font-size: 11px !important;
        }

        .topical-workspace.topical-question-open .topical-assistant-body {
            display: flex;
            flex-direction: column;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: 0;
        }

        .topical-workspace.topical-question-open #topicalAssistantExplanationPanel:not([hidden]) {
            flex: 0 0 auto;
            min-height: 0;
        }

        .topical-workspace.topical-question-open #topicalAssistantAskPanel:not([hidden]) {
            flex: 1;
            min-height: 0;
        }

        .topical-workspace.topical-question-open .topical-assistant-ask-heading,
        .topical-workspace.topical-question-open .topical-assistant-ask-copy,
        .topical-workspace.topical-question-open #topicalAssistantAskResponse,
        .topical-workspace.topical-question-open .topical-assistant-composer,
        .topical-workspace.topical-question-open .topical-assistant-status {
            display: none;
        }

        .topical-workspace.topical-question-open .paper-reader-quick-chat-mount:not([hidden]) {
            position: relative;
            display: flex;
            flex: 1;
            flex-direction: column;
            min-width: 0;
            min-height: 0;
            overflow: hidden;
            background: #ffffff;
            color: #1f2328;
        }

        /* The reader rail uses the same chat markup as the full workspace. Keep
           its conversation white and pin its composer to the rail's bottom edge. */
        .topical-workspace.topical-question-open .paper-reader-quick-chat-mount .conversation {
            min-height: 0;
            padding: 18px 14px 92px;
            background: #ffffff;
        }

        .topical-workspace.topical-question-open .paper-reader-quick-chat-mount .conversation-inner {
            min-height: 100%;
            background: #ffffff;
        }

        .topical-workspace.topical-question-open .paper-reader-quick-chat-mount .composer-wrap {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 3;
            padding: 8px 14px 12px;
            border-top: 1px solid #e1e4e8;
            background: #ffffff;
        }

        .topical-workspace.topical-question-open .paper-reader-quick-chat-mount .composer {
            width: 100%;
            background: #ffffff;
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
        }

        .topical-workspace.topical-question-open .paper-reader-quick-chat-mount .message-row.user .user-avatar {
            flex: 0 0 30px;
            width: 30px;
            height: 30px;
        }

        .topical-workspace.topical-question-open .paper-reader-quick-chat-mount .message-row.user .user-avatar .avatar-art {
            display: block;
            width: 100%;
            height: 100%;
        }

        .topical-assistant-section-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        /* Keep explanation content visibly separated from the panel walls. */
        .topical-assistant-tab-panel[data-topical-assistant-panel="explanation"] {
            padding-inline: 14px;
        }

        .topical-assistant-heading-actions {
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .topical-assistant-knowledge-toggle {
            padding: 0;
            border: 0;
            color: var(--accent);
            background: transparent;
            font-size: 11px;
            font-weight: 650;
        }

        .topical-assistant-knowledge-toggle:hover,
        .topical-assistant-knowledge-toggle:focus-visible {
            text-decoration: underline;
        }

        .knowledge-module-collection.is-topical {
            margin: 14px 0 4px;
            padding: 10px;
            border: 1px solid var(--border);
            border-radius: 9px;
            background: var(--surface-soft);
        }

        .knowledge-module-collection.is-topical .knowledge-module {
            background: var(--surface);
        }

        .topical-assistant-report {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: var(--muted);
            background: transparent;
            font-size: 11px;
        }

        .topical-assistant-report .icon {
            width: 14px;
            height: 14px;
        }

        .topical-assistant-empty-state {
            display: grid;
            gap: 7px;
            margin-top: 16px;
            padding: 14px;
            border: 1px solid var(--border);
            border-radius: 9px;
            background: var(--surface-soft);
        }

        .topical-assistant-empty-state strong {
            font-size: 12px;
            font-weight: 650;
        }

        .topical-assistant-empty-state span {
            color: var(--muted);
            font-size: 11px;
            line-height: 1.5;
        }

        .topical-explanation-detail {
            display: grid;
            min-width: 0;
            max-width: 100%;
            gap: 10px;
        }

        .topical-explanation-detail p,
        .topical-explanation-part-answer p {
            margin: 0;
            color: var(--text);
            font-size: 13px;
            line-height: 1.45;
            white-space: pre-wrap;
        }

        .topical-explanation-part-answer {
            display: grid;
            min-width: 0;
            max-width: 100%;
            gap: 9px;
        }

        .topical-explanation-part-answer > ul {
            position: relative;
            display: grid;
            gap: 18px;
            margin: 0;
            padding: 2px 0 2px 30px;
            list-style: none;
        }

        .topical-explanation-part-answer > ul::before {
            position: absolute;
            top: 9px;
            bottom: 9px;
            left: 7px;
            width: 2px;
            border-radius: 2px;
            content: "";
            background: #a8d8f7;
        }

        .topical-explanation-part-answer > ul > li {
            position: relative;
            display: block;
            min-width: 0;
            padding: 0;
            color: var(--text);
            font-size: 13px;
            line-height: 1.45;
        }

        .topical-explanation-part-answer > ul > li::before {
            position: absolute;
            z-index: 1;
            top: 4px;
            left: -30px;
            box-sizing: border-box;
            width: 14px;
            height: 14px;
            border: 3px solid var(--surface);
            border-radius: 50%;
            content: "";
            background: #a8d8f7;
            box-shadow: 0 0 0 1px color-mix(in srgb, #a8d8f7 55%, transparent);
        }

        .topical-explanation-parts {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
            gap: 0;
            margin: 18px 0 20px;
            padding: 4px;
            border: 0;
            border-radius: 10px;
            background: var(--surface-soft);
        }

        .topical-explanation-part {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            margin: 0;
            padding: 8px 5px;
            border: 0;
            border-bottom: 0;
            border-radius: 7px;
            color: var(--muted);
            background: transparent;
            font-size: 11px;
            line-height: 1.25;
            text-align: center;
        }

        .topical-explanation-part strong {
            color: inherit;
            font-size: 10px;
            font-weight: 500;
        }

        .topical-explanation-part:hover,
        .topical-explanation-part:focus-visible,
        .topical-explanation-part.active {
            border-bottom-color: transparent;
            background: var(--surface);
            box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent);
            color: var(--text);
        }

        .topical-explanation-lock {
            display: grid;
            gap: 14px;
            margin-top: 16px;
            padding: 18px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--surface-soft);
        }

        .topical-explanation-lock__preview {
            display: grid;
            gap: 8px;
            width: min(100%, 280px);
            min-height: 104px;
            justify-self: center;
            box-sizing: border-box;
            padding: 16px;
            border-radius: 8px;
            opacity: 0.62;
            filter: blur(5px);
            pointer-events: none;
            user-select: none;
            background: color-mix(in srgb, var(--surface) 78%, var(--bg));
        }

        .topical-explanation-lock__preview span {
            display: block;
            height: 10px;
            border-radius: 999px;
            background: color-mix(in srgb, var(--muted) 34%, transparent);
        }

        .topical-explanation-lock__preview span:nth-child(2) { width: 84%; }
        .topical-explanation-lock__preview span:nth-child(3) { width: 93%; }
        .topical-explanation-lock__preview span:nth-child(4) { width: 69%; }

        .topical-explanation-lock__content {
            display: grid;
            gap: 7px;
        }

        .topical-explanation-lock__content strong { font-size: 13px; font-weight: 650; }

        .topical-explanation-lock__content p {
            margin: 0;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.45;
        }

        .topical-explanation-lock__action {
            justify-self: start;
            min-height: 32px;
            padding: 7px 11px;
            border: 1px solid color-mix(in srgb, var(--accent) 54%, var(--border));
            border-radius: 8px;
            color: #ffffff;
            background: var(--accent);
            font-size: 12px;
            font-weight: 650;
        }

        .topical-explanation-lock__action:hover,
        .topical-explanation-lock__action:focus-visible { filter: brightness(0.96); }

        .topical-explanation-lock__action:disabled { cursor: wait; opacity: 0.7; }

        .topical-explanation-detail > ol {
            display: grid;
            position: relative;
            gap: 22px;
            margin: 18px 0 0;
            padding: 0;
            border-left: 0;
            list-style: none;
            counter-reset: mark-scheme-point;
        }

        .topical-explanation-detail > ol::before {
            position: absolute;
            top: 78px;
            bottom: 0;
            left: 7px;
            width: 1px;
            content: "";
            background: var(--border);
        }

        .topical-explanation-detail > ol > li {
            position: relative;
            display: grid;
            min-width: 0;
            max-width: 100%;
            gap: 9px;
            padding: 0 0 0 24px;
            border-bottom: 0;
            color: var(--text);
            font-size: 13px;
            line-height: 1.45;
            counter-increment: mark-scheme-point;
        }

        .topical-explanation-detail > ol > li:last-child {
            padding-bottom: 0;
        }

        .topical-explanation-detail > ol > li::before {
            display: none;
        }

        .topical-explanation-detail > ol > li > strong {
            display: grid;
            grid-template-columns: 23px minmax(0, 1fr);
            align-items: flex-start;
            gap: 10px;
            margin-left: -36px;
            /* Align the green mark number with the blue step marker and reserve
               the remaining width for long equations. */
            padding-left: 16px;
            min-width: 0;
            min-height: 48px;
            padding-top: 11px;
            padding-right: 13px;
            padding-bottom: 11px;
            border-radius: 10px;
            color: var(--text);
            background: color-mix(in srgb, #1aa45e 18%, var(--surface));
            font-size: 12px;
            font-weight: 600;
            line-height: 1.4;
        }

        .topical-mark-scheme-content {
            display: block;
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .topical-explanation-detail > ol > li > strong::before {
            display: grid;
            width: 23px;
            height: 23px;
            flex: 0 0 auto;
            place-items: center;
            border-radius: 50%;
            color: #ffffff;
            content: counter(mark-scheme-point);
            background: #1aa45e;
            font-size: 12px;
            font-weight: 600;
        }

        .topical-explanation-formula {
            display: block;
            min-width: 0;
            max-width: 100%;
        }

        .topical-explanation-formula-inline {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            column-gap: 6px;
        }

        .topical-explanation-formula-math {
            display: block;
            min-width: 0;
            max-width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
        }

        .topical-explanation-formula-alternatives-shell {
            overflow-x: hidden;
        }

        .topical-explanation-formula-alternatives {
            display: flex;
            min-width: 0;
            max-width: 100%;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.35em;
        }

        .topical-explanation-formula-alternatives-long {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 2px;
        }

        .topical-explanation-formula-alternatives-long .topical-explanation-formula-connector {
            justify-self: center;
            margin: 0;
        }

        .topical-explanation-formula-alternative {
            display: inline-block;
            min-width: 0;
            max-width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
        }

        .topical-explanation-formula-line,
        .topical-explanation-formula-connector {
            min-width: 0;
        }

        .topical-explanation-formula-connector {
            color: color-mix(in srgb, #57c98b 72%, var(--text));
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.05em;
        }

        .topical-explanation-formula mjx-container {
            max-width: 100%;
            margin: 0 !important;
            font-size: 0.92em;
        }

        /* MathJax's intrinsic width must not become the width of the whole
           explanation pane. Long equations remain readable in a local
           scroll box while surrounding prose keeps the card's width. */
        .topical-explanation-step,
        .topical-explanation-step p,
        .topical-explanation-step ul,
        .topical-explanation-step ol,
        .topical-explanation-values,
        .topical-explanation-part-answer {
            min-width: 0;
            max-width: 100%;
        }

        .topical-explanation-step mjx-container,
        .topical-explanation-part-answer mjx-container,
        .topical-explanation-values mjx-container {
            display: inline-block;
            max-width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            vertical-align: middle;
        }

        .topical-explanation-step mjx-container[display="true"],
        .topical-explanation-part-answer mjx-container[display="true"],
        .topical-explanation-values mjx-container[display="true"] {
            display: block;
            width: 100%;
            box-sizing: border-box;
            margin: 4px 0 !important;
        }

        .topical-explanation-mark-label {
            display: inline;
            margin-left: 4px;
        }

        .topical-explanation-mark-label-below {
            display: block;
            margin-top: 2px;
            margin-left: 0;
        }

        .topical-explanation-selectable-points {
            display: block;
        }

        .topical-explanation-selectable-heading {
            display: block;
            margin-bottom: 3px;
        }

        .topical-explanation-selectable-points ul {
            display: grid;
            gap: 2px;
            margin: 0;
            padding-left: 17px;
        }

        .topical-explanation-selectable-points li {
            position: static;
            display: list-item;
            gap: 0;
            min-height: 0;
            padding: 0;
            counter-increment: none;
            font-size: inherit;
            line-height: 1.32;
        }

        .topical-explanation-math {
            display: inline-block;
            max-width: 100%;
            vertical-align: baseline;
        }

        .topical-explanation-values dt {
            overflow-wrap: anywhere;
        }

        .topical-explanation-values .topical-explanation-math mjx-container {
            margin: 0 !important;
            font-size: 0.94em;
        }

        .topical-explanation-unit {
            white-space: normal;
        }

        .topical-explanation-values {
            margin: 16px 0 18px;
            padding: 13px 14px;
            border: 1px solid color-mix(in srgb, #27b5ef 32%, var(--border));
            border-radius: 10px;
            background: color-mix(in srgb, #27b5ef 10%, var(--surface));
        }

        .topical-explanation-values-heading {
            margin-bottom: 9px;
            color: color-mix(in srgb, #27b5ef 78%, var(--text));
            font-size: 12px;
            font-weight: 600;
        }

        .topical-explanation-values dl {
            display: grid;
            gap: 9px;
            margin: 0;
        }

        .topical-explanation-values dl > div {
            display: grid;
            gap: 2px;
        }

        .topical-explanation-values dt {
            color: var(--text);
            font-size: 12px;
            font-weight: 600;
            line-height: 1.35;
        }

        .topical-explanation-values dd,
        .topical-explanation-values small {
            margin: 0;
            color: var(--muted);
            font-size: 11px;
            line-height: 1.4;
        }

        .topical-explanation-values small { color: color-mix(in srgb, #27b5ef 70%, var(--text)); }

        .topical-explanation-step {
            position: relative;
            display: grid;
            gap: 7px;
        }

        .topical-explanation-step::before {
            position: absolute;
            z-index: 1;
            top: 1px;
            left: -23px;
            width: 13px;
            height: 13px;
            border: 3px solid color-mix(in srgb, #27b5ef 24%, var(--surface));
            border-radius: 50%;
            content: "";
            background: #27b5ef;
        }

        .topical-mark-explanation::before {
            display: none;
        }

        .topical-explanation-step p,
        .topical-explanation-step ul,
        .topical-explanation-step ol {
            margin: 0;
            color: var(--text);
            font-size: 13px;
            line-height: 1.45;
        }

        .topical-explanation-step ul,
        .topical-explanation-step ol {
            padding-left: 20px;
        }

        .topical-mark-explanation ul {
            display: grid;
            gap: 5px;
            padding-left: 18px;
        }

        .topical-mark-explanation p {
            margin: 0;
        }

        .topical-explanation-step small { color: var(--muted); font-size: 11px; line-height: 1.4; }

        .topical-explanation-answer {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            border: 1px solid color-mix(in srgb, #27b57d 28%, var(--border));
            border-radius: 10px;
            background: color-mix(in srgb, #27b57d 8%, var(--surface-soft));
            color: var(--text);
            font-size: 12px;
        }

        .topical-explanation-answer strong { font-weight: 650; }
        .topical-explanation-answer__label {
            display: inline-grid;
            place-items: center;
            min-width: 23px;
            height: 23px;
            border-radius: 7px;
            background: #27b57d;
            color: white;
            font-weight: 700;
        }

        .topical-explanation-timeline {
            display: grid;
            gap: 0;
            margin: 4px 0 0;
            padding: 0;
            list-style: none;
        }

        .topical-explanation-timeline__item {
            position: relative;
            display: grid;
            grid-template-columns: 26px minmax(0, 1fr);
            gap: 10px;
            padding-bottom: 16px;
        }

        .topical-explanation-timeline__item:not(:last-child)::before {
            content: "";
            position: absolute;
            left: 12px;
            top: 27px;
            bottom: 0;
            width: 1px;
            background: color-mix(in srgb, var(--accent) 34%, var(--border));
        }

        .topical-explanation-timeline__marker {
            z-index: 1;
            display: grid;
            place-items: center;
            width: 25px;
            height: 25px;
            border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
            border-radius: 50%;
            background: var(--surface);
            color: var(--accent);
            font-size: 11px;
            font-weight: 700;
        }

        .topical-explanation-timeline__content {
            display: grid;
            gap: 6px;
            min-width: 0;
        }

        .topical-explanation-timeline__content h4 {
            margin: 3px 0 0;
            color: var(--text);
            font-size: 12px;
            font-weight: 700;
        }

        .topical-explanation-evidence {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            align-items: baseline;
            color: var(--muted);
            font-size: 11px;
            line-height: 1.4;
        }

        .topical-explanation-evidence strong {
            color: var(--text);
            font-weight: 650;
        }

        .topical-explanation-evidence span {
            padding: 3px 6px;
            border-radius: 5px;
            background: color-mix(in srgb, var(--accent) 8%, var(--surface-soft));
        }

        .topical-explanation-conclusion {
            margin: 0;
            color: var(--text);
            font-size: 12px;
            line-height: 1.45;
        }

        .topical-examiner-insight {
            display: grid;
            box-sizing: border-box;
            width: calc(100% - 24px);
            gap: 6px;
            margin: 20px auto 0;
            padding: 11px 12px;
            border: 2px solid color-mix(in srgb, #a970d8 28%, var(--border));
            border-radius: 10px;
            background: color-mix(in srgb, #a970d8 10%, var(--surface));
        }

        .topical-examiner-insight > div {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            color: color-mix(in srgb, #a970d8 76%, var(--text));
            font-size: 12px;
        }

        .topical-examiner-insight .icon {
            width: 14px;
            height: 14px;
        }

        .topical-examiner-insight p {
            margin: 0;
            color: var(--text);
            font-size: 12px;
            line-height: 1.45;
        }

        .topical-assistant-panel mjx-container {
            max-width: 100%;
            margin: 0 .08em;
            font-size: 1em;
        }

        .topical-assistant-panel mjx-container[display="true"] {
            display: block;
            margin: 10px 0;
            overflow: hidden;
        }

        .topical-explanation-highlight {
            position: absolute;
            z-index: 1;
            right: 1.5%;
            left: 1.5%;
            border-top: 1px dotted color-mix(in srgb, var(--accent) 72%, #fff);
            border-right: 1px solid color-mix(in srgb, var(--accent) 72%, #fff);
            border-bottom: 1px dotted color-mix(in srgb, var(--accent) 72%, #fff);
            border-left: 1px solid color-mix(in srgb, var(--accent) 72%, #fff);
            border-radius: 4px;
            background: transparent;
            box-shadow: none;
            pointer-events: none;
        }

        .topical-assistant-info-list {
            display: grid;
            gap: 0;
            margin: 16px 0 0;
        }

        .topical-assistant-info-list > div {
            display: grid;
            grid-template-columns: 84px minmax(0, 1fr);
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid var(--border);
        }

        .topical-assistant-info-list dt {
            color: var(--muted);
            font-size: 11px;
        }

        .topical-assistant-info-list dd {
            min-width: 0;
            margin: 0;
            color: var(--text);
            font-size: 11px;
            line-height: 1.4;
            overflow-wrap: anywhere;
        }

        @media (max-width: 620px) {
            .topical-workspace.topical-assistant-open,
            .app-shell:has(#topicalAssistantPanel:not([hidden])) .topical-workspace {
                grid-template-columns: minmax(0, 1fr) !important;
                grid-template-rows: minmax(0, 1fr) minmax(320px, 48vh) !important;
            }

            .topical-workspace.topical-assistant-open > .topical-assistant-panel,
            .app-shell:has(#topicalAssistantPanel:not([hidden])) .topical-workspace > .topical-assistant-panel {
                grid-column: 1;
                grid-row: 2;
                width: 100%;
                height: auto;
                border-top: 1px solid var(--border);
                border-left: 0;
            }

            .topical-assistant-panel {
                width: min(360px, 100vw);
            }

            .topical-question-view .topical-view-actions {
                flex-wrap: wrap;
            }
        }

        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) #topicalViewPaper {
            display: none !important;
        }

        /* Reader surfaces run edge-to-edge; selector surfaces keep their
           rounded treatment outside this state. */
        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) #topicalWorkspace,
        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) #topicalDetail,
        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) #topicalQuestionView,
        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) #topicalQuestionView > .topical-view-header,
        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) #topicalQuestionView > .topical-pdf-stage,
        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-pdf-page-shell {
            border-radius: 0 !important;
            border: 0 !important;
            outline: 0 !important;
            box-shadow: none !important;
        }

        /* The PDF viewer sets each page's exact rendered width inline. Keep
           that fixed-size page centred inside the full-width topical reader. */
        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-pdf-page-stack {
            display: flex !important;
            align-items: center !important;
        }

        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-pdf-page-shell {
            align-self: center !important;
            margin-inline: auto !important;
        }

        /* Keep the Paper 1 answer row clear of the reader's lower edge. */
        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-workspace:not(.practice-reader-mode) .topical-answer-booklet:not([hidden]) {
            position: fixed;
            z-index: 1002;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            overflow: visible;
        }

        /* In practice mode the multi-question answer sheet is a companion
           rail, so it never obscures the paper itself. */
        @media (min-width: 821px) {
            .topical-workspace.practice-reader-mode .topical-question-view {
                display: grid;
                grid-template-columns: minmax(0, 304px) minmax(0, 1fr);
                grid-template-rows: auto minmax(0, 1fr);
            }

            .topical-workspace.practice-reader-mode .topical-question-view:has(.topical-answer-booklet.is-collapsed) {
                grid-template-columns: 32px minmax(0, 1fr);
            }

            .topical-workspace.practice-reader-mode .topical-question-view > .topical-view-header {
                grid-column: 1 / -1;
                grid-row: 1;
            }

            .topical-workspace.practice-reader-mode .topical-pdf-stage {
                grid-column: 2;
                grid-row: 2;
                min-width: 0;
                min-height: 0;
            }

            .topical-workspace.practice-reader-mode .topical-answer-booklet:not([hidden]) {
                position: static;
                z-index: auto;
                grid-column: 1;
                grid-row: 2;
                align-self: start;
                box-sizing: border-box;
                width: calc(100% - 16px);
                max-width: 288px;
                height: auto;
                max-height: calc(100vh - 92px);
                margin: 8px;
                padding: 4px 6px;
                overflow: auto;
                border: 0;
                border-radius: 8px;
                background: var(--surface-soft);
                transform: none;
            }

            .topical-workspace.practice-reader-mode .topical-answer-booklet .answer-booklet-sheet {
                border: 0;
                border-radius: 0;
            }

            .topical-workspace.practice-reader-mode .answer-booklet-panel-header {
                grid-template-columns: minmax(0, 1fr) auto auto;
                gap: 6px;
            }

            .topical-workspace.practice-reader-mode .answer-booklet-check-all {
                margin-right: 2px;
            }

            .topical-workspace.practice-reader-mode .answer-booklet-collapse-toggle {
                display: grid;
                width: 26px;
                min-height: 27px;
                place-items: center;
                padding: 0;
                border: 1px solid var(--border);
                border-radius: 6px;
                color: var(--muted);
                background: var(--surface);
            }

            .topical-workspace.practice-reader-mode .answer-booklet-collapse-toggle:hover,
            .topical-workspace.practice-reader-mode .answer-booklet-collapse-toggle:focus-visible {
                color: var(--text);
                background: var(--surface-soft);
            }

            .topical-workspace.practice-reader-mode .answer-booklet-collapse-toggle .icon {
                width: 15px;
                height: 15px;
            }

            .topical-workspace.practice-reader-mode .topical-answer-booklet.is-collapsed {
                width: 28px;
                max-width: 28px;
                height: 32px;
                max-height: 32px;
                margin: 8px 0 8px 4px;
                padding: 0;
                overflow: hidden;
            }

            .topical-workspace.practice-reader-mode .topical-answer-booklet.is-collapsed .answer-booklet-panel-header {
                display: grid;
                height: 100%;
                padding: 0;
                border: 0;
                background: transparent;
            }

            .topical-workspace.practice-reader-mode .topical-answer-booklet.is-collapsed .answer-booklet-panel-title,
            .topical-workspace.practice-reader-mode .topical-answer-booklet.is-collapsed .answer-booklet-check-all,
            .topical-workspace.practice-reader-mode .topical-answer-booklet.is-collapsed .answer-booklet-sheet {
                display: none;
            }

            .topical-workspace.practice-reader-mode .topical-answer-booklet.is-collapsed .answer-booklet-collapse-toggle {
                width: 28px;
                height: 32px;
                min-height: 32px;
                border: 0;
                border-radius: 0;
            }

            .topical-workspace.practice-reader-mode .topical-answer-booklet.is-collapsed .answer-booklet-collapse-toggle .icon {
                transform: rotate(180deg);
            }

            .topical-workspace.practice-reader-mode .topical-question-view:not(:has(.topical-answer-booklet:not([hidden]))) .topical-pdf-stage {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 820px) {
            .topical-workspace.practice-reader-mode .topical-answer-booklet:not([hidden]) {
                position: static;
                z-index: auto;
                width: auto;
                max-width: none;
                max-height: 36vh;
                margin: 0;
                padding: 12px;
                overflow: auto;
                border-top: 1px solid var(--border);
                background: var(--surface-soft);
                transform: none;
            }
        }

        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-question-nav {
            position: fixed;
            z-index: 1002;
            right: 20px;
            bottom: 10px;
            display: flex;
            gap: 6px;
        }

        .topical-question-nav button {
            display: grid;
            width: 30px;
            height: 30px;
            place-items: center;
            padding: 6px;
            border: 1px solid var(--border);
            border-radius: 7px;
            color: var(--muted);
            background: var(--surface);
        }

        .topical-question-nav button:hover:not(:disabled),
        .topical-question-nav button:focus-visible:not(:disabled) {
            color: var(--text);
            border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
        }

        .topical-question-nav button:disabled {
            cursor: default;
            opacity: .38;
        }

        .topical-question-nav .icon {
            width: 16px;
            height: 16px;
        }

        /* Match the Topicals selector surface before a paper is opened. */
        .workspace.paper-selection-open {
            display: block;
            overflow-y: auto;
            background: var(--surface);
        }

        .workspace.paper-selection-open .mobile-paper-switcher,
        .workspace.paper-selection-open .pdf-toolbar,
        .workspace.paper-selection-open .paper-picker,
        .workspace.paper-selection-open .practice-toolbar,
        .workspace.paper-selection-open .workspace-resizer,
        .workspace.paper-selection-open .chat-panel {
            display: none !important;
        }

        .workspace.paper-selection-open .pdf-panel {
            display: block;
            height: 100%;
            min-height: 100%;
            border-right: 0;
            background: var(--surface);
        }

        .workspace.paper-selection-open .pdf-frame-wrap {
            display: block;
            height: auto;
            min-height: 100%;
            overflow: visible;
            background: var(--surface);
        }

        .workspace.paper-selection-open .paper-selection-stage {
            display: block;
            position: relative;
            height: auto;
            min-height: 100%;
            max-width: none;
            margin: 0;
            padding: 0 24px 40px;
            overflow: visible;
            isolation: isolate;
            background: var(--surface);
        }

        .paper-selection-aurora-header {
            position: relative;
            display: grid;
            align-content: end;
            gap: 6px;
            min-height: 174px;
            margin: 0 -24px;
            padding: 18px clamp(24px, 6vw, 72px) 16px;
            box-sizing: border-box;
            overflow: visible;
            isolation: isolate;
            background: transparent;
        }

        .paper-selection-aurora-header > :not(.topical-storm-background) {
            position: relative;
            z-index: 10;
        }

        .paper-selection-aurora-header .topical-breadcrumbs,
        .paper-selection-aurora-header .topical-aurora-title-row {
            width: min(100%, 830px);
            margin-inline: auto;
        }

        .paper-selection-aurora-header .topical-aurora-title-row h1 {
            flex: 0 1 auto;
            width: auto;
            margin: 0;
        }

        .paper-selection-aurora-header h1 {
            color: var(--text);
            font-size: clamp(28px, 2.5vw, 35px);
            font-weight: 600;
            letter-spacing: -0.055em;
            line-height: 1;
        }

        /* Keep the paper library, practice library, and Atlas auroras distinct
           while sharing the same fade treatment and structure. */
        .workspace:not(.practice-workspace) .paper-selection-storm-background {
            background:
                linear-gradient(to bottom, transparent 0%, transparent 38%, rgba(255, 255, 255, .04) 48%, rgba(255, 255, 255, .24) 66%, rgba(255, 255, 255, .58) 84%, var(--surface) 100%),
                radial-gradient(70% 125% at 4% -18%, rgba(255, 255, 255, .5) 0%, transparent 66%),
                radial-gradient(42% 100% at 88% 6%, rgba(154, 226, 255, .48) 0%, transparent 70%),
                linear-gradient(112deg, #8fc8f5 0%, #acd9fa 42%, #5d9ee8 72%, #306fc5 100%);
        }

        .workspace.practice-workspace .paper-selection-storm-background {
            background:
                linear-gradient(to bottom, transparent 0%, transparent 38%, rgba(255, 255, 255, .04) 48%, rgba(255, 255, 255, .24) 66%, rgba(255, 255, 255, .58) 84%, var(--surface) 100%),
                radial-gradient(70% 125% at 4% -18%, rgba(255, 240, 240, .46) 0%, transparent 66%),
                radial-gradient(42% 100% at 88% 6%, rgba(255, 175, 177, .34) 0%, transparent 70%),
                linear-gradient(112deg, #efa8a4 0%, #f6c1bc 42%, #d98c8e 72%, #c66d73 100%);
        }

        .atlas-questions-workspace .topical-storm-background {
            background:
                linear-gradient(to bottom, transparent 0%, transparent 38%, rgba(255, 255, 255, .04) 48%, rgba(255, 255, 255, .24) 66%, rgba(255, 255, 255, .58) 84%, var(--surface) 100%),
                radial-gradient(72% 132% at 2% -24%, rgba(255, 255, 255, .56) 0%, transparent 67%),
                radial-gradient(44% 106% at 88% 8%, rgba(152, 222, 255, .53) 0%, transparent 70%),
                radial-gradient(34% 90% at 56% -26%, rgba(255, 205, 250, .36) 0%, transparent 68%),
                linear-gradient(112deg, #b7a5f4 0%, #c9bdf7 42%, #907be4 72%, #6552bd 100%);
        }

        [data-theme="dark"] .workspace:not(.practice-workspace) .paper-selection-storm-background {
            background:
                linear-gradient(to bottom, transparent 0%, transparent 38%, rgba(5, 8, 16, .04) 48%, rgba(5, 8, 16, .2) 66%, rgba(5, 8, 16, .48) 84%, var(--surface) 100%),
                radial-gradient(70% 125% at 4% -18%, rgba(113, 208, 255, .24) 0%, transparent 66%),
                radial-gradient(42% 100% at 88% 6%, rgba(88, 138, 255, .2) 0%, transparent 70%),
                linear-gradient(112deg, #183b63 0%, #1d4e82 42%, #2b70b4 72%, #132f59 100%);
        }

        [data-theme="dark"] .workspace.practice-workspace .paper-selection-storm-background {
            background:
                linear-gradient(to bottom, transparent 0%, transparent 38%, rgba(5, 8, 16, .04) 48%, rgba(5, 8, 16, .2) 66%, rgba(5, 8, 16, .48) 84%, var(--surface) 100%),
                radial-gradient(70% 125% at 4% -18%, rgba(255, 175, 177, .2) 0%, transparent 66%),
                radial-gradient(42% 100% at 88% 6%, rgba(214, 108, 119, .22) 0%, transparent 70%),
                linear-gradient(112deg, #5b3037 0%, #714149 42%, #934f5d 72%, #4a2730 100%);
        }

        [data-theme="dark"] .atlas-questions-workspace .topical-storm-background {
            background:
                linear-gradient(to bottom, transparent 0%, transparent 38%, rgba(5, 8, 16, .04) 48%, rgba(5, 8, 16, .2) 66%, rgba(5, 8, 16, .48) 84%, var(--surface) 100%),
                radial-gradient(72% 132% at 2% -24%, rgba(200, 177, 255, .32) 0%, transparent 67%),
                radial-gradient(44% 106% at 88% 8%, rgba(107, 190, 255, .26) 0%, transparent 70%),
                radial-gradient(34% 90% at 56% -26%, rgba(241, 137, 255, .18) 0%, transparent 68%),
                linear-gradient(112deg, #30255f 0%, #3b2c76 42%, #51409a 72%, #281d54 100%);
        }

        .paper-selection-stage-inner {
            display: grid;
            gap: 12px;
            width: min(100%, 830px);
            margin: 0 auto;
            padding-top: 0;
        }

        .paper-selection-info {
            margin: 0;
        }

        #paperSelectionBreadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .paper-selection-search {
            width: 100%;
        }

        .paper-selection-list {
            display: grid;
            gap: 0;
        }

        .paper-picker-list {
            gap: 0;
        }

        .paper-picker-item,
        .paper-selection-item {
            grid-template-columns: 22px minmax(0, 1fr) 16px;
            gap: 11px;
            align-items: center;
            min-height: 46px;
            width: 100%;
            padding: 4px 8px;
            border: 0;
            border-radius: 8px;
            color: var(--text);
            background: transparent;
            text-align: left;
        }

        .paper-picker-item > .paper-list-copy,
        .paper-selection-item > .topical-topic-copy {
            display: grid;
            gap: 2px;
            min-width: 0;
        }

        .paper-picker-item strong,
        .paper-selection-item strong {
            overflow: hidden;
            font-size: 14px;
            font-weight: 600;
            line-height: 1.3;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .paper-picker-item small,
        .paper-selection-item small {
            overflow: hidden;
            color: var(--muted);
            font-size: 11px;
            line-height: 1.35;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .paper-picker-item:hover,
        .paper-picker-item.active,
        .paper-selection-item:hover {
            border-color: transparent;
            background: color-mix(in srgb, var(--surface-hover) 72%, transparent);
        }

        .paper-list-marker {
            display: inline-grid;
            width: 18px;
            height: 18px;
            place-items: center;
            border: 2px solid color-mix(in srgb, var(--muted) 24%, var(--surface));
            border-radius: 50%;
            background: transparent;
            box-sizing: border-box;
            cursor: pointer;
        }

        .paper-list-marker::after {
            width: 7px;
            height: 4px;
            border-bottom: 2px solid var(--surface);
            border-left: 2px solid var(--surface);
            content: '';
            opacity: 0;
            transform: translateY(-1px) rotate(-45deg);
        }

        .paper-list-marker.done {
            border-color: var(--accent);
            background: var(--accent);
        }

        .paper-list-marker.done::after { opacity: 1; }

        .paper-list-marker:focus-visible {
            outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent);
            outline-offset: 2px;
        }

        .paper-selection-progress {
            display: inline-flex;
            min-width: 0;
            width: auto;
            height: auto;
            margin: 0;
            padding: 0;
            border: 0;
            color: inherit;
            background: transparent;
            font-size: inherit;
            vertical-align: baseline;
        }

        .paper-selection-progress.done {
            color: var(--accent);
        }

        .paper-selection-list .paper-period-heading {
            padding: 14px 8px 5px;
            border-bottom: 1px solid var(--border);
            color: var(--muted);
            font-size: 11px;
            font-weight: 600;
        }

        .paper-selection-load-error {
            display: grid;
            justify-items: start;
            gap: 7px;
            padding: 22px 8px;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.45;
        }

        .paper-selection-load-error strong {
            color: var(--text);
            font-size: 13px;
        }

        .paper-selection-load-error button {
            margin-top: 4px;
            padding: 7px 10px;
            border: 1px solid var(--border);
            border-radius: 7px;
            color: var(--text);
            background: var(--surface);
        }

        .paper-selection-load-error button:hover,
        .paper-selection-load-error button:focus-visible {
            border-color: var(--accent);
            background: var(--surface-hover);
        }

        @media (max-width: 820px) {
            .workspace.paper-selection-open .pdf-panel {
                height: auto;
                min-height: 100%;
            }

            .workspace.paper-selection-open .paper-selection-stage {
                padding: 0 16px 28px;
            }

            .paper-selection-aurora-header {
                min-height: 148px;
                margin: 0 -16px;
                padding: 18px 18px 14px;
            }

            .paper-selection-stage-inner {
                width: 100%;
            }

            .paper-selection-item {
                grid-template-columns: 20px minmax(0, 1fr) 16px;
                gap: 8px;
            }
        }

        /* Calm, assistant-first chat landing. */
        .conversation-inner {
            min-height: 100%;
        }

        .welcome {
            align-content: center;
            justify-items: center;
            gap: 12px;
            width: min(100%, 680px);
            min-height: 100%;
            margin: auto;
            padding: 24px 0 12px;
        }

        .welcome-assistant-mark {
            display: grid;
            place-items: center;
            width: 120px;
            height: 120px;
            margin-bottom: 18px;
        }

        .welcome-assistant-mark svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }

        .welcome-quick-chat-mascot {
            display: none;
            width: 100%;
            height: 100%;
            object-fit: contain;
            border: 0;
            outline: 0;
        }

        .chat-panel[data-chat-context="quick"] .welcome-assistant-mark svg {
            display: none;
        }

        .chat-panel[data-chat-context="quick"] .welcome-assistant-mark .welcome-quick-chat-mascot {
            display: block;
        }

        .welcome-atlas-mascot__badge {
            fill: #203b68;
        }

        .welcome-atlas-mascot__arrow {
            fill: #ffffff;
            stroke: #ffffff;
            stroke-width: 4;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .welcome-atlas-mascot__eyes circle {
            fill: #ffffff;
        }

        .welcome-atlas-mascot__eyes .welcome-atlas-mascot__pupil {
            fill: #17181c;
        }

        .welcome-heading {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 7px;
            color: var(--muted);
            font-size: 20px;
        }

        .welcome h1 {
            color: var(--text);
            font-size: 22px;
            line-height: 1.2;
        }

        .welcome p {
            line-height: 1.5;
        }

        .prompt-cards {
            grid-template-columns: minmax(0, 1fr);
            gap: 8px;
            width: min(100%, 720px);
            max-width: none;
            margin: 28px auto 0;
        }

        .prompt-card {
            display: grid;
            grid-template-columns: 24px minmax(0, 1fr) 18px;
            align-items: center;
            gap: 14px;
            box-sizing: border-box;
            width: 100%;
            min-height: 40px;
            padding: 7px 10px;
            border: 0;
            border-radius: 8px;
            background: transparent;
        }

        .prompt-card:hover,
        .prompt-card:focus-visible {
            background: color-mix(in srgb, var(--text) 4%, transparent);
        }

        .prompt-card__icon,
        .prompt-card__chevron {
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .prompt-card__icon {
            width: 22px;
            height: 22px;
            color: var(--muted);
        }

        .prompt-card__chevron {
            width: 17px;
            height: 17px;
            color: var(--muted);
        }

        .prompt-card__copy {
            min-width: 0;
        }

        .prompt-card strong {
            margin-bottom: 2px;
        }

        .chat-panel[data-chat-context="quick"] .prompt-card:nth-child(4) {
            display: none;
        }

        .chat-panel[data-chat-context="quick"] .prompt-card__copy > span {
            display: none;
        }

        .chat-panel[data-chat-context="quick"] .welcome {
            align-content: start;
            padding-top: clamp(72px, 11vh, 104px);
        }

        .chat-panel[data-chat-context="quick"] .welcome > p {
            display: none;
        }

        .chat-panel[data-chat-context="paper"] .welcome-heading > span,
        .chat-panel[data-chat-context="paper"] .welcome-usage {
            display: none;
        }

        .welcome-usage {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            min-height: 24px;
            margin-top: 5px;
            color: var(--muted);
            font-size: 12px;
        }

        .welcome-usage svg {
            width: 14px;
            height: 14px;
            fill: color-mix(in srgb, var(--page-accent) 76%, #9d4edd);
            stroke: none;
        }

        .welcome-usage strong {
            color: var(--text);
            font-weight: 650;
        }

        .composer-wrap {
            position: absolute;
            z-index: 8;
            right: 0;
            bottom: 0;
            left: 0;
            box-sizing: border-box;
            padding: 8px 16px 12px;
            border-top: 0;
            background: transparent;
        }

        .chat-panel[data-chat-context="quick"] .composer-wrap {
            background: transparent;
        }

        .composer {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 8px;
            box-sizing: border-box;
            width: min(calc(100% - 100px), 680px);
            min-height: 48px;
            padding: 5px 6px 5px 12px;
            border-radius: 12px;
            border-color: color-mix(in srgb, var(--border) 72%, transparent);
             background: color-mix(in srgb, var(--surface) 76%, transparent);
             -webkit-backdrop-filter: blur(14px);
             backdrop-filter: blur(14px);
        }

        .composer-input-wrap {
            position: relative;
            grid-column: 1;
            grid-row: 1;
        }

        .math-editor {
            min-height: 34px;
            max-height: 82px;
            padding: 5px 2px;
            overflow-y: auto;
        }

        .composer.is-expanded {
            position: relative;
            z-index: 9;
            width: min(calc(100% - 100px), 680px);
            height: 50vh;
            min-height: 280px;
            margin: 0 auto;
            padding: 5px 6px 5px 12px;
            align-items: stretch;
            box-shadow: none;
            transform: none;
        }

        .composer.is-expanded .composer-input-wrap {
            height: 100%;
        }

        .composer.is-expanded .math-editor {
            box-sizing: border-box;
            height: 100%;
            max-height: none;
            padding: 7px 4px;
        }

        .composer-tool-button {
            position: absolute;
            top: 4px;
            right: calc(100% + 8px);
            width: 40px;
            height: 40px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--surface-soft);
        }

        .composer-tool-button svg {
            width: 19px;
            height: 19px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .send-button {
            grid-column: 2;
            grid-row: 1;
            align-self: start;
            width: 36px;
            height: 36px;
            border-radius: 16px;
            background: var(--surface-soft) !important;
            clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
            filter: drop-shadow(0 0 1px var(--border));
        }

        .send-button .icon { fill: var(--text); stroke: none; transform: rotate(45deg); }

        .chat-panel #sendButton {
            position: absolute;
            top: 4px;
            right: auto;
            left: calc(100% + 8px);
            display: grid;
            place-items: center;
            width: 40px;
            height: 40px;
            grid-column: auto;
            grid-row: auto;
            align-self: auto;
        }

        .composer-expand-button {
            position: absolute;
            top: -42px;
            right: 0;
            display: grid;
            place-items: center;
            width: 34px;
            height: 34px;
            border: 0;
            border-radius: 0;
            color: var(--muted);
            background: transparent;
            box-shadow: none;
        }

        .composer-expand-button[hidden] {
            display: none;
        }

        .composer-expand-button:hover,
        .composer-expand-button:focus-visible {
            color: var(--text);
            background: transparent;
        }

        .composer-expand-button svg {
            grid-column: 1;
            grid-row: 1;
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .composer-collapse-icon { display: none; }
        .composer.is-expanded .composer-expand-icon { display: none; }
        .composer.is-expanded .composer-collapse-icon { display: block; }

        .status-line {
            width: min(100%, 680px);
        }

        .chat-panel[data-chat-context="quick"] .status-line:not(.warning) {
            display: none;
        }

@media (max-width: 620px) {
            .workspace.chat-only .mobile-paper-switcher {
                display: none;
            }

            .conversation {
                padding: 12px 14px 76px;
            }

            .welcome {
                align-content: start;
                padding-top: clamp(28px, 8vh, 64px);
            }

            .chat-panel[data-chat-context="quick"] .welcome {
                padding-top: 44px;
            }

            .welcome-assistant-mark {
                width: 96px;
                height: 96px;
                margin-bottom: 10px;
            }

            .welcome-heading {
                font-size: 18px;
            }

            .welcome h1 {
                font-size: 20px;
            }

            .welcome p {
                font-size: 13px;
            }

            .prompt-cards {
                gap: 4px;
                width: calc(100% - 16px);
                margin-top: 16px;
            }

            .prompt-card {
                gap: 10px;
                min-height: 48px;
            }

            .prompt-card__copy > span {
                display: none;
            }

            .composer-wrap {
                box-sizing: border-box;
                width: 100%;
                padding: 6px 10px 8px;
            }

            .composer {
                width: calc(100% - 100px);
                margin: 0 auto;
                padding: 5px 6px 5px 12px;
                border-radius: 12px;
            }

            .composer.is-expanded {
                height: 50vh;
                min-height: 240px;
                padding: 5px 6px 5px 12px;
            }

            .status-line {
                margin-top: 6px;
                font-size: 10px;
            }
        }

        .keywords-workspace {
            min-height: 0;
            overflow-y: auto;
            padding: 34px 32px 48px;
            background: var(--bg);
        }

        .keywords-inner {
            width: min(100%, 1120px);
            margin: 0 auto;
        }

        .keywords-header {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 18px;
        }

        .keywords-kicker {
            margin: 0 0 5px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 600;
        }

        .keywords-header h1 {
            margin: 0;
            color: var(--text);
            font-size: clamp(28px, 4vw, 42px);
            line-height: 1.08;
        }

        .keywords-summary {
            margin: 8px 0 0;
            color: var(--muted);
            font-size: 14px;
        }

        .keywords-search input,
        .keyword-version-select {
            min-height: 38px;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            background: var(--surface);
            font: inherit;
            font-size: 13px;
        }

        .keywords-search input {
            width: min(280px, 34vw);
            padding: 8px 11px;
        }

        .keywords-search input:focus,
        .keyword-version-select:focus {
            outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
            outline-offset: 1px;
        }

        .keywords-status {
            min-height: 20px;
            margin-bottom: 10px;
            color: var(--muted);
            font-size: 12px;
        }

        .keywords-status.is-error { color: var(--danger); }

        .keywords-list {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            align-items: start;
            gap: 12px;
        }

        .keyword-card {
            min-width: 0;
            border-bottom: 1px solid var(--border);
            background: var(--surface);
        }

        .keyword-card-header {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 16px;
        }

        .keyword-card-icon {
            display: none;
            flex: 0 0 32px;
            place-items: center;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            color: var(--accent);
            background: color-mix(in srgb, var(--accent) 10%, var(--surface));
        }

        .keyword-card-icon svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1.7;
        }

        .keyword-card h2 {
            margin: 0;
            color: var(--text);
            font-size: 17px;
            font-weight: 600;
            line-height: 1.2;
        }

        .keyword-card-header p {
            margin: 4px 0 0;
            color: var(--muted);
            font-size: 12px;
        }

        .keyword-occurrences { border-top: 1px solid var(--border); }

        .keyword-occurrence {
            padding: 12px 16px;
        }

        .keyword-occurrence + .keyword-occurrence { border-top: 1px solid var(--border); }

        .keyword-occurrence summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            color: var(--text);
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            list-style-position: outside;
        }

        .keyword-version-count {
            flex: 0 0 auto;
            color: var(--muted);
            font-size: 11px;
            font-weight: 500;
        }

        .keyword-occurrence-body { padding: 12px 0 2px; }

        .definition-latest {
            padding: 0 16px 14px;
        }

        .definition-latest-label {
            margin-bottom: 8px;
            color: var(--muted);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: .02em;
            text-transform: uppercase;
        }

        .definition-latest .keyword-occurrence {
            padding: 0;
        }

        .definition-history {
            border-top: 1px solid var(--border);
        }

        .definition-history > summary {
            padding: 12px 16px;
            color: var(--accent);
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            list-style-position: inside;
        }

        .definition-history > summary span {
            color: var(--muted);
            font-weight: 500;
        }

        .definition-history-list {
            border-top: 1px solid var(--border);
        }

        .keyword-question-text {
            margin: 0 0 10px;
            color: var(--text);
            font-size: 14px;
            line-height: 1.5;
            white-space: pre-wrap;
        }

        .keyword-question-link {
            display: inline-block;
            margin-bottom: 12px;
            color: var(--accent);
            font-size: 12px;
            font-weight: 600;
            text-decoration: none;
        }

        .keyword-question-link:hover { text-decoration: underline; }

        .keyword-version-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(140px, 52%);
            align-items: center;
            gap: 10px;
            color: var(--muted);
            font-size: 12px;
        }

        .keyword-version-select {
            width: 100%;
            padding: 7px 9px;
        }

        .keyword-answer {
            margin-top: 10px;
            color: var(--text);
        }

        .keyword-entry-kind { margin-bottom: 8px; color: var(--muted); font-size: 12px; }
        .keyword-mark-scheme { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.5; }
        .keyword-mark-scheme th, .keyword-mark-scheme td { border: 1px solid var(--border); padding: 8px 10px; vertical-align: top; text-align: left; overflow-wrap: anywhere; }
        .keyword-mark-scheme th { font-weight: 600; }
        .keyword-mark-scheme .keyword-mark-column { width: 64px; }
        .keyword-mark-scheme th:last-child, .keyword-mark-scheme td:last-child { text-align: center; white-space: nowrap; }
        .keyword-mark-scheme p, .keyword-question-text p { margin: 0; }
        .keyword-mark-guidance { margin-top: 8px; font-size: 13px; }
        .keyword-mark-guidance summary { cursor: pointer; color: var(--muted); }
        .keyword-mark-guidance > div { padding-top: 6px; }
        .keyword-answer + .keyword-question-link, [data-keyword-answer-host] + .keyword-question-link { margin-top: 10px; }

        .keyword-answer-heading {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 7px;
            color: var(--text);
            font-size: 11px;
            font-weight: 600;
        }

        .keyword-answer-heading span {
            color: var(--muted);
            font-weight: 500;
            text-align: right;
        }

        .keyword-answer ul {
            display: grid;
            gap: 5px;
            margin: 0;
            padding-left: 17px;
            font-size: 12px;
            line-height: 1.45;
        }

        .keyword-answer li small {
            display: block;
            color: var(--muted);
            font-size: 11px;
        }

        .keyword-answer-empty,
        .keywords-empty {
            color: var(--muted);
            font-size: 13px;
        }

        .keywords-empty {
            display: grid;
            justify-items: start;
            gap: 8px;
            grid-column: 1 / -1;
            padding: 28px;
            border: 1px dashed var(--border);
            border-radius: 10px;
            background: var(--surface);
        }

        .keywords-empty strong { color: var(--text); }

        .keywords-empty button {
            padding: 8px 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            background: var(--surface);
            font: inherit;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
        }

        @media (max-width: 700px) {
            .keywords-workspace { padding: 24px 16px 36px; }
            .keywords-header { align-items: flex-start; flex-direction: column; }
            .keywords-search,
            .keywords-search input { width: 100%; }
            .keyword-version-row { grid-template-columns: 1fr; }
        }

        @media (max-width: 820px) {
            .account-page { padding: 22px 16px 42px; }
            .account-page__header { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
            .account-page__identity { grid-column: 1 / -1; min-width: 0; padding-top: 12px; }
            .account-layout { grid-template-columns: 1fr; gap: 22px; padding-top: 20px; }
            .account-nav { position: sticky; z-index: 2; top: 0; display: flex; overflow-x: auto; gap: 5px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
            .account-nav__item { width: auto; min-width: 0; flex: 0 0 auto; white-space: nowrap; }
            .account-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .account-metrics > div:nth-child(2) { border-right: 0; }
            .account-metrics > div:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
            .account-profile-form, .account-inline-form { grid-template-columns: 1fr; align-items: stretch; }
            .account-device-section, .account-control-row, .account-danger-zone { align-items: flex-start; flex-direction: column; }
            .account-control-row button, .account-device-section button, .account-danger-zone button, .account-profile-form button, .account-inline-form button { width: 100%; }
            .avatar-builder { grid-template-columns: 1fr; gap: 16px; }
            .avatar-preview-card { position: static; min-height: 224px; }
            .avatar-preview { min-height: 168px; }
            .avatar-preview .avatar-art { width: min(152px, 100%); height: auto; }
            .avatar-category-panel { grid-template-columns: 1fr; }
            .avatar-category-panel .avatar-control-group--wide { grid-column: auto; }
        }

        @media (max-width: 520px) {
            .account-page__heading h1 { font-size: 30px; }
            .account-panel__heading { align-items: flex-start; flex-direction: column; gap: 5px; }
            .account-section-heading__actions { align-items: flex-end; flex-direction: column; gap: 4px; }
            .account-metrics strong { font-size: 24px; }
            .account-card { padding: 16px; }
        }

        /* Keep explanation tools in the reader rail. The focused-reader rules
           above intentionally collapse the paper to one column, but the study
           tools are a companion panel and must remain in the same reader grid. */
        @media (min-width: 821px) {
            .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-workspace.topical-assistant-open,
            .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-workspace:has(#topicalAssistantPanel:not([hidden])) {
                grid-template-columns: minmax(0, 1fr) var(--topical-assistant-width, 420px) !important;
                grid-template-rows: minmax(0, 1fr) !important;
            }

            .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-workspace.topical-assistant-open > .topical-detail,
            .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-workspace:has(#topicalAssistantPanel:not([hidden])) > .topical-detail {
                grid-column: 1 !important;
                grid-row: 1 !important;
                width: auto !important;
                min-width: 0 !important;
            }

            .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-workspace.topical-assistant-open > .topical-assistant-panel,
            .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-workspace:has(#topicalAssistantPanel:not([hidden])) > .topical-assistant-panel {
                position: relative !important;
                inset: auto !important;
                grid-column: 2 !important;
                grid-row: 1 !important;
                width: auto !important;
                height: 100% !important;
                min-width: 0;
                min-height: 0;
                overflow: hidden;
                border-left: 1px solid var(--border);
                box-shadow: none;
            }

            /* The rail header shares the reader header's 58px rhythm. */
            .topical-assistant-tabs {
                min-height: 36px;
            }

            .topical-assistant-tabs button {
                min-height: 30px;
                padding: 6px 10px;
            }
        }

        .topical-explanation-conclusion,
        .topical-examiner-insight__copy {
            min-width: 0;
        }

        .topical-examiner-insight__copy > p {
            margin: 0;
        }

        .topical-explanation-conclusion {
            margin: 0;
            color: var(--text);
            font-size: 12px;
            line-height: 1.45;
        }

        .topical-examiner-insight__copy {
            color: var(--text);
            font-size: 12px;
            line-height: 1.45;
        }

        /* Keep long explanations from reflowing when the scrollbar appears. */
        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-assistant-body {
            overflow-y: overlay;
            scrollbar-gutter: auto;
            scrollbar-width: thin;
        }

        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-assistant-body::-webkit-scrollbar {
            width: 8px;
            background: transparent !important;
        }

        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-assistant-body::-webkit-scrollbar-track {
            background: transparent !important;
            border: 0;
        }

        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-assistant-body::-webkit-scrollbar-button {
            display: none;
            width: 0;
            height: 0;
        }

        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-assistant-body::-webkit-scrollbar-thumb {
            border: 2px solid transparent;
            border-radius: 8px;
            background: color-mix(in srgb, var(--muted) 42%, transparent);
            background-clip: padding-box;
        }

        /* Let the question reader's vertical scrollbar run beside its header.
           The header stays pinned while the PDF and its controls scroll below it. */
        @media (min-width: 821px) {
            .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) #topicalDetail {
                overflow-x: hidden !important;
                overflow-y: auto !important;
            }

            .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) #topicalQuestionView {
                height: auto !important;
                min-height: 100%;
            }

            .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) #topicalQuestionView > .topical-view-header {
                position: sticky;
                top: 0;
                z-index: 4;
            }

            .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) #topicalQuestionView > .topical-pdf-stage {
                flex: 0 0 auto;
                height: auto;
                min-height: 0;
                overflow-y: visible !important;
            }
        }

        /* Keep the pill and the light divider; remove only the visible resize rail and redundant reader arrows. */
        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-assistant-panel {
            border-left: 4px solid #dce2e7 !important;
            box-shadow: -1px 0 0 rgba(255, 255, 255, 0.86);
        }

        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-assistant-resizer span {
            display: none;
        }

        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-view-actions .topical-pdf-toolbar,
        .app-shell:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden])) .topical-question-nav {
            display: none !important;
        }

        .walkthrough {
            width: min(100%, 640px); box-sizing: border-box; gap: 16px; margin: 0 auto; padding: 0 18px 24px;
        }
        .walkthrough-methods { display: grid; gap: 7px; }
        .walkthrough-methods > p {
            margin: 0; color: var(--muted); font-size: 10px; font-weight: 650;
            letter-spacing: .04em; text-transform: uppercase;
        }
        .walkthrough-methods > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
        .walkthrough-methods button, .walkthrough-controls button {
            min-height: 34px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
            color: var(--text); background: var(--surface); font-size: 11px; font-weight: 650;
        }
        .walkthrough-methods button.active {
            border-color: color-mix(in srgb, #a8d8f7 75%, var(--border));
            background: color-mix(in srgb, #a8d8f7 24%, var(--surface));
        }
        .walkthrough-method-title { margin: 2px 0 -2px; font-size: 13px; font-weight: 700; }
        .walkthrough-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
        .walkthrough > .walkthrough-steps { gap: 0; margin: 0; padding: 0; }
        .walkthrough > .walkthrough-steps::before { display: none; }
        /* Center the body independently of the markers, and override the
           mark-scheme list's inherited left padding. */
        .walkthrough > .walkthrough-steps > .walkthrough-step {
            position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
            gap: 0; padding: 0 0 18px;
        }
        .walkthrough > .walkthrough-steps > .walkthrough-step:last-child { padding-bottom: 0; }
        .walkthrough-step:not(:last-child)::before {
            position: absolute; top: 12px; bottom: 0; left: -20px; width: 1px; content: ""; background: #e1e3e6;
        }
        .walkthrough-step__rail {
            position: absolute; top: 0; left: -26px; width: 14px;
            z-index: 1; display: flex; justify-content: center; padding-top: 5px;
        }
        .walkthrough-step__rail > span {
            display: block; width: 9px; height: 9px; box-sizing: border-box; overflow: hidden;
            border: 2px solid var(--surface); border-radius: 50%; color: transparent; background: #777b80;
            font-size: 0; box-shadow: 0 0 0 1px var(--surface);
        }
        .walkthrough > .walkthrough-steps > .walkthrough-step.is-single { padding-bottom: 0; }
        .walkthrough-step.is-single .walkthrough-step__rail { display: none; }
        .walkthrough-step__body {
            display: grid; min-width: 0; gap: 10px; margin-right: 0;
        }
        .walkthrough-step__body > header {
            display: flex; min-height: 20px; align-items: center; justify-content: space-between; gap: 8px;
        }
        .walkthrough-step__body h4 { margin: 0; font-size: 12px; font-weight: 600; }
        .walkthrough-mark-awards { display: grid; gap: 7px; margin-top: 2px; }
        .walkthrough-mark-reference { display: grid; gap: 8px; }
        .walkthrough-mark-reference > h4 { margin: 0; color: var(--muted); font-size: 12px; font-weight: 600; }
        .walkthrough-mark-award {
            display: flex; align-items: center; gap: 12px; padding: 8px;
            border: 2px solid var(--border);
            border-radius: 8px; background: color-mix(in srgb, var(--text) 4%, var(--surface));
        }
        .walkthrough-mark-award__answer {
            flex: 1; min-width: 0; color: var(--text); font-size: 11px; line-height: 1.45;
        }
        .walkthrough-mark-award__credit {
            display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end;
            align-items: baseline; gap: 4px 8px; max-width: 90px;
            color: var(--muted); font-size: 10px; font-weight: 500;
        }
        .walkthrough-step__explanation, .walkthrough-step__explanation p {
            margin: 0; color: var(--text); font-size: 12px; line-height: 1.5;
        }
        .walkthrough-answer-focus {
            margin: 0; padding: 8px 10px; border-left: 3px solid var(--answer-focus-tone);
            border-radius: 0 7px 7px 0; color: var(--answer-focus-tone);
            background: color-mix(in srgb, var(--answer-focus-tone) 7%, var(--surface));
            font-size: 12px; font-weight: 600; line-height: 1.5;
        }
        .walkthrough-answer-focus p { margin: 0; }
        .walkthrough-source {
            width: fit-content; max-width: 100%; box-sizing: border-box; margin: 0; padding: 7px 10px;
            border: 0; border-radius: 7px; color: var(--muted); background: var(--surface-soft);
            font-size: 11px; line-height: 1.45;
        }
        .walkthrough-source mark { padding: 1px 2px; color: inherit; background: color-mix(in srgb, #a8d8f7 58%, transparent); }
        .walkthrough-equation-stage {
            position: relative; isolation: isolate; min-width: 0; padding: 6px 8px 12px;
        }
        .walkthrough-equations { position: relative; z-index: 2; display: grid; gap: 18px; }
        .walkthrough-equation-stage.has-links .walkthrough-equations {
            gap: var(--equation-link-gap, 46px);
        }
        .walkthrough-equation-row { display: grid; gap: 6px; }
        .walkthrough-equation {
            min-width: 0; overflow-x: auto; overflow-y: hidden; color: var(--text); text-align: center;
            scrollbar-width: thin;
        }
        .walkthrough-equation mjx-container { margin: 2px 0 !important; font-size: 112% !important; }
        .walkthrough-equation-block--orange { color: #168fd0; }
        .walkthrough-equation-block--blue { color: #168fd0; }
        .walkthrough-equation-block--green { color: #18a55b; }
        .walkthrough-equation-block--purple { color: #7c5ce0; }
        .walkthrough-equation-block--rose { color: #d84f7d; }
        .walkthrough-equation-block--teal { color: #0d9488; }
        .walkthrough-equation-block--indigo { color: #4f64d8; }
        .walkthrough-equation-block--crimson { color: #c03d5a; }
        .walkthrough-equation-block--brown { color: #9a5b35; }
        .walkthrough-equation-block--cyan { color: #0891b2; }
        .walkthrough-equation-block--magenta { color: #b63aa5; }
        .walkthrough-equation-block--navy { color: #31558f; }
        .walkthrough-equation-block--coral { color: #d6654f; }
        .walkthrough-equation-block--neutral { color: inherit; }
        .walkthrough-equation-block--boxed {
            padding: 1px 3px; border: 1px solid #69cf9a; border-radius: 3px; background: #edf9f2;
        }
        .walkthrough-equation mjx-merror { display: none !important; }
        .walkthrough-equation-connectors {
            position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
        }
        .walkthrough-equation-connector-label {
            position: absolute; z-index: 4; padding: 1px 4px; transform: translate(-50%, -100%);
            background: var(--surface); font-size: 9px; font-weight: 600; line-height: 1.25;
            text-align: center; white-space: nowrap; pointer-events: none;
        }
        .walkthrough-equation-connector-label[data-label-side="right"] { transform: translate(0, -50%); }
        .walkthrough-equation-connector-label[data-label-side="left"] { transform: translate(-100%, -50%); }
        .walkthrough-equation-connector-label--orange { color: #168fd0; }
        .walkthrough-equation-connector-label--blue { color: #168fd0; }
        .walkthrough-equation-connector-label--green { color: #18a55b; }
        .walkthrough-equation-connector-label--purple { color: #7c5ce0; }
        .walkthrough-equation-connector-label--rose { color: #d84f7d; }
        .walkthrough-equation-connector-label--teal { color: #0d9488; }
        .walkthrough-equation-connector-label--indigo { color: #4f64d8; }
        .walkthrough-equation-connector-label--crimson { color: #c03d5a; }
        .walkthrough-equation-connector-label--brown { color: #9a5b35; }
        .walkthrough-equation-connector-label--cyan { color: #0891b2; }
        .walkthrough-equation-connector-label--magenta { color: #b63aa5; }
        .walkthrough-equation-connector-label--navy { color: #31558f; }
        .walkthrough-equation-connector-label--coral { color: #d6654f; }
        .walkthrough-options { display: grid; gap: 12px; }
        .walkthrough-options__eliminations { display: grid; gap: 12px; }
        .walkthrough-option-group { display: grid; gap: 5px; }
        .walkthrough-option {
            position: relative; display: grid; min-height: 42px; box-sizing: border-box;
            grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 10px;
            border: 1px solid #ff7b83; border-radius: 8px; background: color-mix(in srgb, #ff7b83 6%, var(--surface));
            color: #ff5d67;
        }
        .walkthrough-option::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid #ff7b83; }
        .walkthrough-option > span {
            z-index: 1; display: grid; width: 22px; height: 22px; place-items: center;
            border: 1px solid #ff5d67; border-radius: 50%; background: var(--surface); font-size: 10px; font-weight: 600;
        }
        .walkthrough-option > div { z-index: 1; min-width: 0; color: var(--muted); font-size: 11px; }
        .walkthrough-option--correct {
            border-color: #3fc489; background: color-mix(in srgb, #20ad72 7%, var(--surface)); color: #20ad72;
        }
        .walkthrough-option--correct::after { display: none; }
        .walkthrough-option--correct > span { border-color: #20ad72; color: #fff; background: #20ad72; }
        .walkthrough-option--correct > div { color: var(--text); }
        .walkthrough-option-reason { margin: 0 4px 0 34px; color: var(--muted); font-size: 11px; line-height: 1.45; }
        .walkthrough-option-reason > strong, .walkthrough-option-reason > span, .walkthrough-option-reason > span > p { display: inline; margin: 0; }
        .walkthrough-option-reason > strong { margin-right: 4px; color: var(--text); }
        .walkthrough-options__introduction, .walkthrough-options__conclusion { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
        .walkthrough-exam-answer {
            display: grid; gap: 5px; padding: 10px 11px;
            border: 1px solid color-mix(in srgb, #20ad72 18%, var(--border)); border-radius: 8px;
            background: color-mix(in srgb, #20ad72 5%, var(--surface)); font-size: 11px; line-height: 1.45;
        }
        .walkthrough-exam-answer strong { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
        .walkthrough-controls { display: flex; align-items: center; gap: 8px; padding-left: 38px; }
        .walkthrough-controls .walkthrough-primary { border-color: #168dc3; color: #fff; background: #168dc3; }
        .walkthrough-complete { margin-right: auto; color: #20ad72; font-size: 10px; font-style: italic; }
        .walkthrough-insight {
            display: grid; width: calc(100% - 24px); box-sizing: border-box; gap: 5px; margin: 4px auto 0;
            padding: 11px 12px; border: 2px solid color-mix(in srgb, #8d63c7 28%, var(--border));
            border-radius: 10px; background: color-mix(in srgb, #8d63c7 8%, var(--surface)); font-size: 11px; line-height: 1.45;
        }
        .walkthrough-insight strong { color: #7651a8; font-size: 11px; }
        .walkthrough-graph { display: grid; min-width: 0; gap: 6px; margin: 4px 0 0; padding: 0; border: 0; background: transparent; }
        .walkthrough-graph__canvas { position: relative; display: grid; min-width: 0; min-height: 260px; height: clamp(260px, 35vw, 340px); overflow: hidden; background: #fff; }
        .walkthrough-graph__status { place-self: center; color: var(--muted); font-size: 10px; }
        .walkthrough-graph__errors { color: #b33b38; font-size: 11px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
        .walkthrough-graph__errors[hidden] { display: none; }
        .walkthrough-graph__controls { display: flex; align-items: center; gap: 5px; }
        .walkthrough-graph__controls > button, .walkthrough-graph__settings > summary {
            min-height: 27px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 6px;
            background: var(--surface); color: var(--text); font: inherit; font-size: 10px; line-height: 1.2; cursor: pointer;
        }
        .walkthrough-graph__controls > button[data-graph-action="zoom-in"],
        .walkthrough-graph__controls > button[data-graph-action="zoom-out"] { min-width: 27px; padding: 3px; font-size: 13px; }
        .walkthrough-graph__controls button:hover, .walkthrough-graph__settings > summary:hover { background: color-mix(in srgb, var(--surface) 86%, var(--text)); }
        .walkthrough-graph__settings { position: relative; }
        .walkthrough-graph__settings > summary { display: flex; align-items: center; list-style: none; }
        .walkthrough-graph__settings > summary::-webkit-details-marker { display: none; }
        .walkthrough-graph__settings-panel {
            position: absolute; z-index: 5; bottom: calc(100% + 5px); left: 0; display: grid; gap: 7px;
            min-width: 110px; padding: 9px; border: 1px solid var(--border); border-radius: 6px;
            background: var(--surface); color: var(--text); font-size: 10px; box-shadow: 0 2px 8px #0002;
        }
        .walkthrough-graph__settings-panel label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
        .walkthrough-graph__settings-panel input { margin: 0; accent-color: #168dc3; }

/* Keep selector controls above the header gradient extending into the body. */
.paper-selection-stage-inner, .topical-topic-stage-inner { position: relative; z-index: 2; }

/* Shared selector order: filters, information, search, results. */
.paper-selection-stage-inner { padding-top: 20px; }
.topical-workspace.topic-selection-open > .topical-topic-stage { padding-top: 20px; }
.topical-topic-stage-inner > .atlas-filter-bar { margin-top: 0; }

/* Reference-inspired blue sidebar, with the existing Atlas folder navigation. */
.dashboard-sidebar-brand, .dashboard-sidebar-footer { display: none; }
.sidebar-nav-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 0px) {
    body:has(#dashboardWorkspace:not([hidden])),
    [data-theme="dark"] body:has(#dashboardWorkspace:not([hidden])) {
        --dashboard-join-surface: #135073;
        --dashboard-sidebar-width: 198px;
        --dashboard-chrome-radius: 12px;
    }
    /* The dashboard stays in the DOM during reading; its frame is only for dashboard pages. */
    body:has(#dashboardWorkspace:not([hidden])) .app-shell:not(.topical-reader-mode):not(:has(.topical-workspace:not([hidden]) #topicalQuestionView:not([hidden]))) .main {
        grid-template-columns: var(--dashboard-sidebar-width) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        box-sizing: border-box;
        padding: 8px 8px 8px 0;
        background: #135073;
    }
    body:has(#dashboardWorkspace:not([hidden])) .main > .topbar { display: none !important; }
    body:has(#dashboardWorkspace:not([hidden])) .main > #dashboardWorkspace {
        position: relative;
        inset: auto;
        grid-column: 1;
        grid-row: 1;
        width: auto;
        height: 100%;
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: #135073;
    }
    body:has(#dashboardWorkspace:not([hidden])) .main > #dashboardWorkspace .dashboard-inner {
        --text: #F3F7FA;
        --muted: #7196AB;
        --border: #2B6387;
        --surface: #135073;
        --surface-soft: #174F73;
        --dashboard-accent: #7196AB;
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-sizing: border-box;
        padding: 10px 10px 6px;
        backdrop-filter: none;
        gap: 6px;
        background: #135073;
        overflow: hidden;
    }
    body:has(#dashboardWorkspace:not([hidden])) .main::after {
        inset: 8px 8px 8px var(--dashboard-sidebar-width) !important;
        border: 0 !important;
        border-radius: 12px;
    }
    /* All dashboard pages share one content cell, including separately styled Notes. */
    body:has(#dashboardWorkspace:not([hidden])) .app-shell:not(.notes-editor-mode):not(.topical-reader-mode) .main > section:not(#dashboardWorkspace):not(.global-search):not([hidden]) {
        grid-column: 2;
        grid-row: 1 !important;
        position: relative;
        inset: auto;
        width: auto;
        height: 100%;
        min-height: 0;
        border: 0;
        border-radius: 12px;
    }
    #dashboardWorkspace .dashboard-sidebar-brand {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between;
        gap: 4px;
        min-height: 32px;
        order: -2;
    }
    #dashboardWorkspace .dashboard-header,
    #dashboardWorkspace .dashboard-header-actions { display: contents; }
    #dashboardSidebarBrand #globalHomeButton { width: 150px; min-width: 0; padding: 0; margin: 0; transform: none; }
    #dashboardSidebarBrand #globalHomeButton .topbar-brand-logo { width: 150px; max-width: 100%; height: auto; }
    #dashboardWorkspace .atlas-logo__wordmark { fill: #F3F7FA; }
    #dashboardWorkspace .topbar-search-button {
        flex: 0 0 26px;
        width: 26px;
        min-width: 26px;
        height: 28px;
        padding: 5px;
        margin: 0;
        border: 0;
        border-radius: 8px;
        color: #7196AB;
        background: transparent;
    }
    #dashboardWorkspace .topbar-search-button span { display: none; }
    #dashboardWorkspace .topbar-search-button:hover { background: #174F73; color: #FFFFFF; }
    #dashboardWorkspace .dashboard-subject-selector { position: relative; top: auto; order: -1; flex: 0 0 auto; width: 100%; padding: 0; }
    #dashboardWorkspace .dashboard-subject-selector::before,
    #dashboardWorkspace .dashboard-subject-selector::after { display: none; }
    #dashboardWorkspace .dashboard-subject-trigger {
        transform: none;
        min-height: 32px;
        padding: 5px 9px;
        border-radius: 14px;
        color: #F3F7FA;
        background: #174F73;
        font-size: 12px;
        font-weight: 600;
    }
    #dashboardWorkspace .dashboard-subject-trigger:hover,
    #dashboardWorkspace .dashboard-subject-trigger[aria-expanded="true"] { background: #245F85; }
    #dashboardWorkspace .dashboard-subject-plan { padding: 3px 7px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 6px; background: rgb(255 255 255 / 9%); color: #BBCDD9; font-size: 10px; font-weight: 600; line-height: 14px; }
    #dashboardWorkspace .dashboard-subject-menu {
        --text: #1f2328;
        --muted: #6b7280;
        --surface: #ffffff;
        --surface-soft: #f4f6f8;
        --border: #d7dbe2;
        --dashboard-accent: #03426A;
    }
    #dashboardWorkspace .dashboard-columns {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        /* Include the sidebar gutters in the scroll area so opening folders
           can extend beyond their resting columns without being clipped. */
        width: calc(100% + 20px);
        margin-inline: -10px;
        padding-inline: 8px;
        padding-top: 8px;
        padding-bottom: 34px;
        box-sizing: border-box;
        min-width: 0;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: none;
        gap: 4px;
    }
    #dashboardWorkspace .dashboard-tools { display: flex !important; flex-direction: column; align-items: stretch; gap: 1px; margin-bottom: 0; }
    #dashboardWorkspace .dashboard-tool-cluster { width: 100%; padding: 0; }
    #dashboardWorkspace .folder-group { display: flex; flex-direction: column; gap: 1px; width: 100%; margin: 0; }
    #dashboardWorkspace .action-group { display: flex; flex-direction: column; width: 100%; margin: 0; gap: 0; }
    #dashboardWorkspace .action-shelf-row { display: flex; flex-direction: column; gap: 1px; width: 100%; margin: 0; }
    #dashboardWorkspace .folder-tool { width: 100% !important; min-width: 0; flex-direction: row; justify-content: flex-start; text-align: left; transform: none; filter: none; }
    #dashboardWorkspace #homeKeywordsButton { grid-column: auto; grid-row: auto; }
    #dashboardWorkspace .folder-tool__visual { position: relative; width: 20px; height: 24px; min-height: 24px; flex: 0 0 20px !important; overflow: visible; }
    #dashboardWorkspace .react-folder-mount { position: absolute; left: 50%; top: calc(50% - 3px); width: 75px; height: 53px; min-height: 53px; transform: translate(-50%, -50%) scale(.32); transform-origin: center; }
    #dashboardWorkspace .folder-tool-label { width: auto; max-width: none; color: inherit !important; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; text-align: left; }
    #dashboardWorkspace .dashboard-home-button,
    #dashboardWorkspace .quick-chat-button {
        width: 100%;
        min-width: 0;
        min-height: 30px;
        height: 30px;
        box-sizing: border-box;
        margin: 0;
        padding: 6px 9px;
        border-radius: 10px;
        color: #7196AB;
        background: transparent;
        filter: none;
        transform: none;
    }
    #dashboardWorkspace .dashboard-home-button:hover,
    #dashboardWorkspace .dashboard-home-button:focus-visible,
    #dashboardWorkspace .quick-chat-button:hover,
    #dashboardWorkspace .quick-chat-button:focus-visible { background: #174F73; transform: none; }
    #dashboardWorkspace .dashboard-home-button.is-active,
    #dashboardWorkspace .quick-chat-button.is-active { background: #245F85; color: #FFFFFF; }
    #dashboardWorkspace .dashboard-home-button-label,
    #dashboardWorkspace .quick-chat-button-label { color: inherit !important; font-size: 13px !important; font-weight: 600 !important; }
    #dashboardWorkspace .dashboard-home-button-icon,
    #dashboardWorkspace .quick-chat-button-icon { color: #79a8c0; flex-basis: 18px !important; width: 18px; }
    #dashboardWorkspace .dashboard-home-button.is-active .dashboard-home-button-icon,
    #dashboardWorkspace .quick-chat-button.is-active .quick-chat-button-icon { color: #FFFFFF; }
    #dashboardWorkspace .dashboard-home-button-icon svg,
    #dashboardWorkspace .quick-chat-button-icon svg { width: 17px; height: 17px; }
    #dashboardWorkspace .atlas-launcher__items { --atlas-menu-tone: #7196AB; border: 0; margin: 0; padding: 0; gap: 4px; }
    #dashboardWorkspace .atlas-launcher__items button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 30px; padding: 6px 9px; border-radius: 10px; font-size: 13px; font-weight: 600; }
    #dashboardWorkspace .sidebar-nav-icon { width: 17px; height: 17px; flex: 0 0 18px; color: #79a8c0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    #dashboardWorkspace .atlas-launcher__items button.is-active .sidebar-nav-icon { color: #FFFFFF; }
    #dashboardWorkspace .atlas-launcher__items button:hover,
    #dashboardWorkspace .atlas-launcher__items button:focus-visible,
    #dashboardWorkspace .atlas-launcher__items button.is-active { background: #174F73; color: #FFFFFF; transform: none; }
    #dashboardWorkspace .dashboard-sidebar-footer {
        display: block;
        position: absolute;
        bottom: 6px;
        left: 10px;
        right: 10px;
        z-index: 2;
        order: 2;
        flex: 0 0 auto;
        margin-top: 0;
        padding-top: 0;
    }
    #dashboardWorkspace .topbar-actions {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        align-items: center;
        width: 100%;
        gap: 6px;
        padding: 2px 6px;
        box-sizing: border-box;
        border: 0;
        border-radius: 999px;
        background: #296582;
        position: relative;
    }
    #dashboardWorkspace .topbar-actions::before {
        content: none;
    }
    #dashboardWorkspace .topbar-stats { grid-column: 1 / -1; width: 100%; justify-content: space-around; border: 0; background: #174F73; color: #F3F7FA; }
    #dashboardWorkspace .topbar-stats > button { min-width: 0; padding: 6px; color: #F3F7FA; background: transparent; }
    #dashboardWorkspace .topbar-stats > button + button { border-left-color: #2B6387 !important; }
    #dashboardWorkspace .topbar-stats > button:hover,
    #dashboardWorkspace .topbar-stats > button:focus-visible,
    #dashboardWorkspace .topbar-stats > button[aria-expanded="true"] { background: #174F73; }
    #dashboardWorkspace .topbar-xp__copy > span { color: #7196AB; }
    #dashboardWorkspace .topbar-streak__icon { color: #ffc974; }
    #dashboardWorkspace .topbar-xp__icon { color: #a8ddc2; }
    #dashboardWorkspace .topbar-energy-status__icon { color: #dbcaed; }
    #dashboardWorkspace .account-trigger { grid-column: 1; grid-row: 1; justify-content: center; width: 24px; height: 24px; min-height: 24px; min-width: 0; padding: 0; border: 0; border-radius: 50%; color: #F3F7FA; background: transparent; box-shadow: none; font-size: 12px; }
    #dashboardWorkspace .account-trigger-avatar { display: inline-flex; width: 24px; height: 24px; flex: 0 0 24px; }
    #dashboardWorkspace #accountButtonLabel { display: none; }
    #dashboardWorkspace .theme-star-button { display: none; }
    #dashboardWorkspace .theme-star-icon { color: #7196AB; fill: currentColor; }
    #dashboardWorkspace .account-trigger:hover,
    #dashboardWorkspace .theme-star-button:hover { background: #174F73; }
    /* Sidebar proportions at standard browser zoom. */
    #dashboardWorkspace .dashboard-columns { gap: 1px; }
    #dashboardWorkspace .dashboard-columns > .atlas-launcher--quick-chat,
    #dashboardWorkspace .atlas-launcher__items { display: contents; margin: 0; min-width: 0; }
    #dashboardWorkspace :is(.dashboard-home-button, .quick-chat-button, .sidebar-nav-button, .folder-tool),
    #dashboardWorkspace .atlas-launcher__items button {
        display: flex;
        align-items: center;
        flex: 0 0 30px;
        width: 100%;
        height: 30px;
        min-height: 30px;
        padding: 5px 8px;
        margin: 0;
        gap: 10px;
        box-sizing: border-box;
        border: 0;
        border-radius: 12px;
        color: #BBCDD9;
        background: transparent;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }
    #dashboardWorkspace :is(.dashboard-home-button-label, .quick-chat-button-label) {
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 20px !important;
    }
    #dashboardWorkspace :is(.dashboard-home-button-icon, .quick-chat-button-icon, .sidebar-nav-icon) {
        flex: 0 0 20px !important;
        width: 20px;
        height: 20px;
        color: #7196AB;
    }
    #dashboardWorkspace :is(.dashboard-home-button-icon, .quick-chat-button-icon) svg { width: 20px; height: 20px; }
    #dashboardWorkspace svg.sidebar-nav-solid { fill: currentColor; stroke: none; }
    #dashboardWorkspace .dashboard-home-button.is-active { background: transparent; color: #BBCDD9; }
    #dashboardWorkspace .dashboard-home-button.is-active .dashboard-home-button-icon { color: #7196AB; }
    #dashboardWorkspace .quick-chat-button.is-active,
    #dashboardWorkspace .atlas-launcher__items button.is-active { background: rgb(255 255 255 / 16%); color: #FFFFFF; }
    #dashboardWorkspace :is(.dashboard-home-button, .quick-chat-button, .sidebar-nav-button, .folder-tool):hover,
    #dashboardWorkspace .atlas-launcher__items button:hover { background: rgb(255 255 255 / 9%); color: #FFFFFF; }
    #dashboardWorkspace .folder-tool.is-active { background: rgb(255 255 255 / 16%); color: #FFFFFF; }
    #dashboardWorkspace .topbar-stats { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 20px; border-radius: 0; background: transparent; gap: 2px; overflow: visible; }
    #dashboardWorkspace .topbar-stats > button {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 20px;
        min-height: 20px;
        padding: 2px;
        border-radius: 6px;
        gap: 3px;
        color: #F3F7FA;
        background: transparent;
    }
    #dashboardWorkspace .topbar-stats > button + button { border: 0 !important; }
    #dashboardWorkspace .topbar-stats svg { width: 18px; height: 18px; fill: currentColor; stroke: none; color: #7196AB; }
    #dashboardWorkspace .topbar-xp__icon path + path,
    #dashboardWorkspace .topbar-streak__icon .streak-flame-core { display: none; }
    #dashboardWorkspace .topbar-stats .topbar-streak__icon { color: #ff9f43; }
    #dashboardWorkspace .topbar-stats .topbar-xp__icon { color: #65d99a; }
    #dashboardWorkspace .topbar-stats .topbar-energy-status__icon { color: #bb8aff; }
    #dashboardWorkspace .topbar-stats strong { color: #FFFFFF; font-size: 12px; font-weight: 500; }
    #dashboardWorkspace .topbar-xp__copy { display: flex; align-items: baseline; gap: 2px; }
    #dashboardWorkspace .topbar-xp__copy > span { color: #7196AB; font-size: 9px; }
    #dashboardWorkspace .topbar-streak__icon .streak-flame-core { fill: #03426A; }
    body:has(#dashboardWorkspace:not([hidden])) #energyPopover {
        position: fixed;
        top: auto;
        bottom: 24px;
        left: calc(var(--dashboard-sidebar-width) + 6px);
        right: auto;
        width: min(276px, calc(100vw - var(--dashboard-sidebar-width) - 22px));
        z-index: 30;
    }
}

#dashboardWorkspace .sidebar-section-label {
    flex: 0 0 auto;
    margin: 6px 0 2px;
    padding: 0 8px;
    color: #91AFC2;
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: normal;
    text-transform: uppercase;
}
#dashboardWorkspace .sidebar-nav-button.is-active { color: #FFFFFF; background: rgb(255 255 255 / 16%); }
#dashboardWorkspace .sidebar-nav-button.is-active .sidebar-nav-icon { color: #FFFFFF; }

/* Each illustrated icon has its own moving parts. */
#dashboardWorkspace svg.sidebar-nav-art { fill: none; stroke: none; overflow: visible; }
#dashboardWorkspace .dashboard-columns :is(svg.sidebar-nav-art, .folder-tool__visual) {
    filter: none;
    opacity: 1;
    color: #7196AB;
}
#dashboardWorkspace .sidebar-nav-art :is([fill], [stroke]) {
    transition: fill 180ms ease, stroke 180ms ease;
}
@media (prefers-reduced-motion: reduce) {
    #dashboardWorkspace .sidebar-nav-art :is([fill], [stroke]) { transition: none; }
}
#dashboardWorkspace .sidebar-nav-art :is(.icon-home, .icon-bookmark-ribbon, .icon-calendar-page, .icon-book-left, .icon-book-page, .icon-search-glint) {
    transition: transform 320ms cubic-bezier(.22, .61, .36, 1), fill 180ms ease, stroke 180ms ease, opacity 250ms ease;
}
#dashboardWorkspace .icon-home { transform-origin: 12px 13px; }
#dashboardWorkspace .icon-book-left,
#dashboardWorkspace .icon-book-page { transform-box: view-box; transform-origin: 12px 13px; }
#dashboardWorkspace .icon-bookmark-ribbon { transform-origin: 12px 2px; }
#dashboardWorkspace .icon-robot-eyes { transform-origin: 12px 12px; }
#dashboardWorkspace .icon-chart-bar { transform-origin: center 21px; }
@media (prefers-reduced-motion: no-preference) {
    #dashboardWorkspace .dashboard-columns button:is(:hover, :focus-visible) .icon-home {
        transform: scale(1.08);
    }
    #dashboardWorkspace .dashboard-columns button:is(:hover, :focus-visible) .icon-chart-bar {
        animation: sidebar-chart-grow 650ms cubic-bezier(.2, .8, .3, 1) both;
    }
    #dashboardWorkspace .dashboard-columns button:is(:hover, :focus-visible) .icon-chart-bar--two { animation-delay: 100ms; }
    #dashboardWorkspace .dashboard-columns button:is(:hover, :focus-visible) .icon-chart-bar--three { animation-delay: 200ms; }
    #dashboardWorkspace .dashboard-columns button:is(:hover, :focus-visible) .icon-bookmark-ribbon {
        transform: translateY(-1px);
    }
    #dashboardWorkspace .dashboard-columns button:is(:hover, :focus-visible) .icon-syllabus-line {
        stroke-dasharray: 1;
        animation: sidebar-document-write 360ms ease-out both;
    }
    #dashboardWorkspace .dashboard-columns button:is(:hover, :focus-visible) .icon-syllabus-line--two { animation-delay: 70ms; }
    #dashboardWorkspace .dashboard-columns button:is(:hover, :focus-visible) .icon-syllabus-line--three { animation-delay: 140ms; }
    #dashboardWorkspace .dashboard-columns button:is(:hover, :focus-visible) .icon-calendar-page {
        animation: sidebar-calendar-lift 550ms cubic-bezier(.22, .61, .36, 1) both;
    }
    #dashboardWorkspace .dashboard-columns button:is(:hover, :focus-visible) .icon-book-left {
        transform: none;
    }
    #dashboardWorkspace .dashboard-columns button:is(:hover, :focus-visible) .icon-book-page {
        animation: sidebar-book-page-turn 650ms cubic-bezier(.22, .61, .36, 1) both;
    }
    #dashboardWorkspace .dashboard-columns button:is(:hover, :focus-visible) .icon-robot-eyes {
        animation: sidebar-robot-blink 800ms ease;
    }
    #dashboardWorkspace .dashboard-columns button:is(:hover, :focus-visible) .icon-search-glint {
        transform: translate(2px, 1px);
        opacity: .65;
    }
    #dashboardWorkspace .folder-tool:is(:hover, :focus-visible) .folder {
        transform: translateY(-8px);
    }
    #dashboardWorkspace .folder-tool:is(:hover, :focus-visible) .folder .paper {
        transform: translate(-50%);
    }
    #dashboardWorkspace .folder-tool:is(:hover, :focus-visible) .folder__front {
        transform: skew(15deg) scaleY(.6);
    }
    #dashboardWorkspace .folder-tool:is(:hover, :focus-visible) .folder__front.right {
        transform: skew(-15deg) scaleY(.6);
    }
}
@keyframes sidebar-book-page-turn {
    0%, 100% { transform: scaleX(1); }
    45% { transform: scaleX(.35); }
}
@keyframes sidebar-document-write {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}
@keyframes sidebar-calendar-lift {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}
@keyframes sidebar-chart-grow {
    0%, 100% { transform: translateY(0); }
    45% { transform: translateY(-2px); }
}
@keyframes sidebar-robot-blink {
    0%, 25%, 55%, 100% { transform: scaleY(1); }
    35%, 45% { transform: scaleY(.12); }
}

/* The light sidebar uses one muted palette for all its controls. */
#dashboardWorkspace .dashboard-subject-trigger { color: #EEF5FA; background: #174F73; }
#dashboardWorkspace .dashboard-subject-plan { color: #BBCDD9; background: #0C3653; border-color: #2B6387; }
#dashboardWorkspace .topbar-actions { color: #BBCDD9; background: #174F73; border: 1px solid #2B6387; }
#dashboardWorkspace .topbar-stats > button { color: #BBCDD9; }
#dashboardWorkspace .topbar-stats > button:hover,
#dashboardWorkspace .account-trigger:hover { color: #FFFFFF; background: #245F85; }
#dashboardWorkspace .topbar-xp__copy > span { color: #91AFC2; }
#dashboardWorkspace #dashboardSidebarFooter .topbar-stats .topbar-streak__icon { color: #ff9f43; }
#dashboardWorkspace #dashboardSidebarFooter .topbar-stats .topbar-xp__icon { color: #39b77c; }
#dashboardWorkspace #dashboardSidebarFooter .topbar-stats .topbar-energy-status__icon { color: #a56ce3; }
#dashboardWorkspace .topbar-search-button { color: #7196AB; }
#dashboardWorkspace .topbar-search-button:hover { color: #FFFFFF; background: #174F73; }
#dashboardWorkspace .dashboard-columns button:focus-visible { outline: 2px solid #7196AB; outline-offset: -2px; }

/* Larger controls and artwork, with the existing text sizes. */
body:has(#dashboardWorkspace:not([hidden])) .main > #dashboardWorkspace .dashboard-inner { padding-top: 0; }
#dashboardWorkspace .dashboard-sidebar-brand {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 3px;
    padding-left: 6px;
    min-height: 34px;
    gap: 6px;
}
#dashboardSidebarBrand { position: relative; justify-content: space-between !important; }
#dashboardSidebarBrand #globalHomeButton {
    position: relative;
    width: auto;
    min-width: 0;
    margin: 0;
    transform: none;
    justify-content: flex-start;
}
#dashboardSidebarBrand #globalHomeButton .topbar-brand-logo { width: auto; max-width: none; }
#dashboardSidebarBrand #globalHomeButton .prep-atlas-brand { width: auto; }
.topbar-brand-logo.prep-atlas-brand,
#dashboardSidebarBrand #globalHomeButton .prep-atlas-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    color: var(--text);
}
#dashboardSidebarBrand #globalHomeButton .prep-atlas-brand { color: #F3F7FA; }
.prep-atlas-brand__mascot-frame {
    display: block;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 8px;
    background: #135073;
}
.prep-atlas-brand__mascot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.16);
}
.prep-atlas-brand__name {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
#dashboardWorkspace .topbar-search-button {
    position: relative;
    top: auto;
    right: auto;
    margin-left: auto;
    flex-basis: 24px;
    width: 24px;
    min-width: 24px;
    height: 28px;
    padding: 4px;
    transform: none;
}
#dashboardWorkspace .topbar-search-button svg { width: 18px; height: 18px; }
#dashboardWorkspace .dashboard-subject-trigger { min-height: 38px; padding: 8px 10px; }
#dashboardWorkspace .dashboard-subject-plan { padding: 4px 8px; }
#dashboardWorkspace :is(.dashboard-home-button, .quick-chat-button, .sidebar-nav-button, .folder-tool),
#dashboardWorkspace .atlas-launcher__items button { flex-basis: 34px; height: 34px; min-height: 34px; padding: 5px 8px; gap: 8px; }
#dashboardWorkspace :is(.dashboard-home-button-icon, .quick-chat-button-icon, .sidebar-nav-icon) { flex-basis: 24px !important; width: 24px; height: 24px; }
#dashboardWorkspace :is(.dashboard-home-button-icon, .quick-chat-button-icon) svg { width: 24px; height: 24px; }
#dashboardWorkspace .folder-tool__visual { width: 24px; height: 24px; flex-basis: 24px !important; }
#dashboardWorkspace .react-folder-mount { transform: translate(-50%, -50%) scale(.384); }
#dashboardWorkspace .topbar-actions { grid-template-columns: 28px minmax(0, 1fr); padding: 4px 8px; }
#dashboardWorkspace .account-trigger { width: 28px; height: 28px; min-height: 28px; }
#dashboardWorkspace .account-trigger-avatar { width: 28px; height: 28px; flex-basis: 28px; }
#dashboardWorkspace #dashboardSidebarFooter .topbar-stats svg { width: 20px; height: 20px; }
#dashboardWorkspace :is(.dashboard-home-button, .quick-chat-button, .sidebar-nav-button, .folder-tool),
#dashboardWorkspace .atlas-launcher__items button {
    flex-basis: 28px;
    height: 28px;
    min-height: 28px;
}
#dashboardWorkspace .sidebar-section-label { margin: 8px 0 2px; }
#dashboardWorkspace .dashboard-subject-trigger {
    min-height: 38px;
    padding: 4px 8px;
    gap: 8px;
    border-radius: 14px;
    background: #2B6683;
}
#dashboardWorkspace .dashboard-subject-trigger:hover,
#dashboardWorkspace .dashboard-subject-trigger[aria-expanded="true"] { background: #2B6683; }
#dashboardWorkspace .dashboard-subject-selector-label {
    padding: 0;
    border-radius: 0;
    background: transparent;
}
#dashboardWorkspace .dashboard-subject-plan {
    margin: 0;
    padding: 3px 7px;
    border: 1px solid #A8D8CD;
    border-radius: 6px;
    color: #194D47;
    background: #A8D8CD;
    font-size: 10px;
}