/* Premium UI layer. Scoped away from .mock-test-view so test mode remains unchanged.
 *
 * The palette below is the portal's (portal.css), re-expressed under this file's
 * variable names so the whole product reads as one app instead of two. Every
 * value here has a counterpart there:
 *
 *   --app-bg → --bg      --surface-solid → --surface   --surface-raised → --surface-2
 *   --text-main → --text --text-muted → --muted        --brand → --brand
 *
 * --brand-2 was a teal (#37d7b2) that competed with the blue as a second brand.
 * It is the portal's green now, which means "good" rather than "also important".
 */
:root {
    --app-bg: #0c0f15;
    --app-bg-soft: #10141c;
    --surface: rgba(21, 26, 34, 0.88);
    --surface-solid: #151a22;
    --surface-raised: #1c222c;
    --text-main: #eef2f8;
    --text-muted: #939eaf;
    --line: #262e3a;
    --brand: #7ba6ff;
    --brand-2: #4cc38a;
    --brand-soft: rgba(123, 166, 255, 0.14);
    --success: #4cc38a;
    --warning: #f0b429;
    --danger: #f2776b;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 44px rgba(0, 0, 0, 0.4);
    --radius: 20px;
    --radius-sm: 14px;
}

html.theme-light {
    color-scheme: light;
    --app-bg: #f6f8fc;
    --app-bg-soft: #eef2fa;
    --surface: rgba(255, 255, 255, 0.94);
    --surface-solid: #ffffff;
    --surface-raised: #f3f6fb;
    --text-main: #131a2a;
    --text-muted: #6b7688;
    --line: #e2e8f2;
    --brand: #2f6df6;
    --brand-2: #12a06a;
    --brand-soft: rgba(47, 109, 246, 0.10);
    --success: #12a06a;
    --warning: #e08600;
    --danger: #de3b2f;
    --shadow-sm: 0 1px 2px rgba(19, 26, 42, 0.05), 0 4px 14px rgba(19, 26, 42, 0.045);
    --shadow-md: 0 2px 6px rgba(19, 26, 42, 0.05), 0 14px 40px rgba(19, 26, 42, 0.07);
}

html.theme-dark,
body.theme-dark {
    color-scheme: dark;
    --app-bg: #0c0f15;
    --app-bg-soft: #10141c;
    --surface: rgba(21, 26, 34, 0.88);
    --surface-solid: #151a22;
    --surface-raised: #1c222c;
    --text-main: #eef2f8;
    --text-muted: #939eaf;
    --line: #262e3a;
    --brand: #7ba6ff;
    --brand-2: #4cc38a;
    --brand-soft: rgba(123, 166, 255, 0.14);
    --success: #4cc38a;
    --warning: #f0b429;
    --danger: #f2776b;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 44px rgba(0, 0, 0, 0.4);
}

/* Seating Arrangement Solution Diagrams - Adaptive Dark/Light Mode */
html.theme-dark .seating-diagram-img,
body.theme-dark .seating-diagram-img {
    filter: invert(1) brightness(1.2);
}
html.theme-light .seating-diagram-img,
body.theme-light .seating-diagram-img {
    filter: none;
}

/* Same two wash gradients the portal paints, at the same corners. */
body {
    background:
        radial-gradient(1100px 520px at 84% -12%, rgba(123, 166, 255, 0.10), transparent 65%),
        radial-gradient(760px 420px at -8% 4%, rgba(76, 195, 138, 0.06), transparent 62%),
        var(--app-bg);
    background-attachment: fixed;
    color: var(--text-main);
}

html.theme-light body {
    background:
        radial-gradient(1100px 520px at 84% -12%, rgba(47, 109, 246, 0.09), transparent 65%),
        radial-gradient(760px 420px at -8% 4%, rgba(18, 160, 106, 0.07), transparent 62%),
        var(--app-bg);
    background-attachment: fixed;
}

body:not(.test-taking-mode) .content-area,
body:not(.test-taking-mode) .scroll-content {
    background: transparent;
}

.app-container {
    background: transparent;
}

/* Matches the portal's top bar: a translucent band that the content scrolls
   under, with no hard shadow line under it. */
.main-header {
    height: 64px;
    padding: 0 20px;
    background: color-mix(in srgb, var(--app-bg) 86%, transparent);
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    backdrop-filter: blur(16px);
}

.header-left h1 {
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Rounded squares, not circles — same shape and hover as .ak-icon-btn in the
   portal. Circles read as a different product the moment you cross over. */
.hamburger-btn,
.fullscreen-btn,
.back-header-btn,
.home-header-btn,
.theme-toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--surface-solid);
    border: 1px solid var(--line);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.16s ease, color 0.16s ease, transform 0.14s ease;
}

.hamburger-btn:hover,
.fullscreen-btn:hover,
.back-header-btn:hover,
.home-header-btn:hover,
.theme-toggle-btn:hover {
    border-color: var(--brand);
    color: var(--brand);
    transform: translateY(-1px);
}

/* ── Profile chip (sidebar header) ───────────────────────────────────────
   The portal's .ak-profile-chip, in the rail: avatar, name, target exam, and
   a chevron. It is a link to profile.html — the same page the portal opens —
   rather than a button raising a read-only copy of it inside the app. */
.sidebar-header {
    padding: 12px;
}

.user-profile-compact {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease;
}

a.user-profile-compact:hover {
    border-color: var(--brand);
    transform: translateY(-1px);
}

.user-profile-compact .avatar-circle {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 0;
    font-size: 0.82rem;
    overflow: hidden;
}

.user-profile-compact .avatar-circle img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.user-info-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.user-info-text strong {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-info-text small {
    font-size: 0.73rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.back-header-btn {
    width: auto;
    border-radius: 999px;
    padding: 0 14px;
    font-weight: 600;
    gap: 6px;
}

.home-header-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    margin-left: 6px;
    font-size: 1.05rem;
}

#back-btn[style*="display: none"] + #home-btn,
#back-btn[style*="display:none"] + #home-btn,
#back-btn[style*="display: NONE"] + #home-btn {
    display: none !important;
}

.home-header-btn:hover {
    background: var(--surface-hover, rgba(255, 255, 255, 0.08));
    border-color: #03dac6;
    color: #03dac6;
    transform: translateY(-1px);
}

.theme-toggle-btn {
    cursor: pointer;
}

.scroll-content {
    width: min(1420px, 100%);
    margin: 0 auto;
    padding: 24px;
}

.sidebar {
    width: 340px;
    background: color-mix(in srgb, var(--surface-solid) 92%, transparent);
    border-right: 1px solid var(--line);
    box-shadow: 16px 0 48px rgba(16, 24, 40, 0.16);
    backdrop-filter: blur(22px);
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border-bottom: 1px solid var(--line);
    padding: 14px 16px;
}

.sidebar-header .user-profile-compact {
    flex: 1;
    min-width: 0;
}

.avatar-circle {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff;
    border: none;
    box-shadow: 0 12px 28px rgba(11, 87, 208, 0.28);
}

.user-info-text h3,
.dev-info {
    color: var(--text-main);
}

/* ── Back to Portal ──────────────────────────────────────
   The only route out of a subject app and back to the root portal. It sits in
   the header row beside the profile chip: still the first thing in view, but
   it no longer eats a card's worth of the subject list below it. */
.portal-exit-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.95rem;
    cursor: pointer;
    font-family: inherit;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .14s ease;
}

.portal-exit-btn:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.portal-exit-btn:active {
    transform: scale(0.94);
}

.sets-scroll-area {
    padding: 6px 16px 16px;
}

.section-title {
    color: var(--text-muted);
    margin: 12px 6px;
    font-weight: 800;
}

/* The portal's .ak-nav-item: no card, no border, no shadow — a flat row that
   only draws a surface on hover. Fifteen bordered, shadowed cards stacked down
   a rail is what made this sidebar feel heavy next to the portal's. */
.set-btn {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 11px 13px;
    margin-bottom: 3px;
    box-shadow: none;
    font-size: 0.9rem;
    font-weight: 550;
    transition: background 0.16s ease, color 0.16s ease;
}

.set-btn:hover {
    background: var(--surface-raised);
    border-color: transparent;
    color: var(--text-main);
}

.set-btn.active,
.set-btn[aria-expanded="true"] {
    background: var(--brand-soft);
    color: var(--brand);
    font-weight: 650;
}

.section-title {
    font-size: 0.67rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.submenu {
    padding-left: 0;
}

.submenu.open {
    max-height: 70vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 8px;
    margin: 0 0 12px;
}

.sub-btn {
    border-left: 0;
    border-radius: 10px;
    color: var(--text-muted);
    padding: 11px 12px;
}

.sub-btn:hover {
    color: var(--brand);
    background: var(--brand-soft);
}

/* The portal's .ak-sidebar-foot, down to the arrow: one tappable card that
   opens the developer page. */
.sidebar-footer {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 12px;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-top: 1px solid var(--line);
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease;
}

a.sidebar-footer:hover {
    border-color: var(--brand);
    transform: translateY(-1px);
}

.sidebar-footer .footer-profile-pic {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    margin-left: 0;
    border-radius: 11px;
    border: 0;
}

.sidebar-footer .footer-left-content {
    flex: 1;
    min-width: 0;
    gap: 1px;
}

.sidebar-footer .dev-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
}

.sidebar-footer .dev-info {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
}

.sidebar-footer .dev-go {
    margin-left: auto;
    font-size: 0.76rem;
    color: var(--text-muted);
}

body:not(.test-taking-mode) .dash-hero,
body:not(.test-taking-mode) .glass-panel,
body:not(.test-taking-mode) .dash-card,
body:not(.test-taking-mode) .big-btn,
body:not(.test-taking-mode) .test-menu,
body:not(.test-taking-mode) .custom-builder,
body:not(.test-taking-mode) .chapter-card-container,
body:not(.test-taking-mode) .note-card,
body:not(.test-taking-mode) .test-question-card,
body:not(.test-taking-mode) .smart-revision-home-card {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text-main);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(16px);
}

/* The portal's .ak-hero. The greeting used to run up to 3.2rem, which on a
   desktop made "Good afternoon, Akshay" a 210px-tall band before a single
   subject or stat was on screen. It is a greeting, not a headline. */
.dash-hero.hero-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    margin-bottom: 20px;
    padding: 22px 26px;
    border-radius: 26px;
    background:
        linear-gradient(135deg, rgba(123, 166, 255, 0.10), transparent 55%),
        var(--surface-solid);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

body.theme-light .dash-hero.hero-panel,
html.theme-light body .dash-hero.hero-panel {
    background:
        linear-gradient(135deg, rgba(47, 109, 246, 0.10), transparent 55%),
        var(--surface-solid);
}

.eyebrow {
    display: inline-block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.dash-hero.hero-panel h2 {
    margin: 0 0 6px;
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    line-height: 1.18;
    letter-spacing: -0.035em;
    font-weight: 700;
    color: var(--text-main) !important;
}

.dash-hero.hero-panel p {
    color: var(--text-muted);
    font-size: 0.9rem;
    max-width: 52ch;
    margin: 0;
}

/* The portal's .ak-pill row, subject-scoped. Same shape and tones so the two
   heroes read as the same component. */
.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    font-size: 0.74rem;
    font-weight: 650;
    color: var(--text-main);
    white-space: nowrap;
}

.hero-pill i {
    font-size: 0.72rem;
    opacity: 0.9;
}

.hero-pill.is-good {
    background: color-mix(in srgb, var(--success) 14%, transparent);
    border-color: transparent;
    color: var(--success);
}

.hero-pill.is-warn {
    background: color-mix(in srgb, var(--warning) 15%, transparent);
    border-color: transparent;
    color: var(--warning);
}

.hero-pill.is-brand {
    background: var(--brand-soft);
    border-color: transparent;
    color: var(--brand);
}

.exam-card {
    min-width: 220px;
    display: grid;
    /* Same compact two-row card as the portal's (see .exam-card there): the
       exam name and the action share the top line, the countdown runs along the
       bottom one. */
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px 12px;
    align-content: center;
    min-width: 212px;
    padding: 13px 15px;
    border-radius: 16px;
    /* Dark in both themes, because exam-countdown.css paints its digits
       light-on-dark and is shared by both screens. */
    background: linear-gradient(150deg, #1a2233, #0c111c 72%) !important;
    color: #fff !important;
    border: 0;
    flex-shrink: 0;
    box-shadow: 0 14px 32px rgba(12, 17, 28, 0.3);
}

body.theme-light .exam-card,
html.theme-light body .exam-card {
    background: linear-gradient(150deg, #1a2233, #0c111c 72%) !important;
}

.exam-card>span {
    grid-column: 1;
    color: rgba(255, 255, 255, 0.62) !important;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exam-card strong {
    grid-column: 1 / -1;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff !important;
    display: block;
    min-width: 0;
}

/* The exam date, where the button used to sit — keeps the card at two rows. */
.exam-card small {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 0.7rem;
    font-weight: 650;
    white-space: nowrap;
}

.exam-card small:empty {
    display: none;
}

/* Edit: top-right corner, after the date pill. Opens ../profile.html#exam. */
.exam-card {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.exam-card .exam-card-edit {
    grid-column: 3;
    grid-row: 1;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 0.72rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.exam-card .exam-card-edit:hover,
.exam-card .exam-card-edit:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    color: #fff !important;
}

/* ── AI setup prompt ─────────────────────────────────────────────────
   AkshAiSetup.promptHtml() in aiGateway.js: shown by the AI Teacher, the
   Ask-AI drawer and the full-test mentor when no API key is saved. Inherits
   the surrounding text colour so it sits in dark and light surfaces alike. */
.aksh-ai-setup {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px 14px;
    align-items: start;
    margin: 6px 0;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(123, 166, 255, 0.28);
    background: var(--brand-soft, rgba(123, 166, 255, 0.12));
    color: inherit;
    font-family: Inter, system-ui, sans-serif;
    text-align: left;
    max-width: 520px;
}

.aksh-ai-setup-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--brand, #7ba6ff);
    color: #fff;
    font-size: 0.85rem;
}

.aksh-ai-setup-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.aksh-ai-setup-copy strong {
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.3;
}

.aksh-ai-setup-copy span {
    font-size: 0.83rem;
    line-height: 1.5;
    opacity: 0.75;
}

.aksh-ai-setup-btn {
    grid-column: 2;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--brand, #7ba6ff);
    color: #fff !important;
    font-size: 0.83rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.aksh-ai-setup-btn:hover,
.aksh-ai-setup-btn:focus-visible {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.aksh-ai-setup-btn i {
    font-size: 0.72rem;
}

/* ── Subject loading overlay ─────────────────────────────────────────
   Shown by showSubjectLoadingOverlay() only while a subject's data downloads.
   Deliberately plain: the page blurs behind, a title, one thin moving line. */
#subject-switch-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(9, 11, 16, 0.72);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
    font-family: Inter, system-ui, sans-serif;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

#subject-switch-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.22s ease;
}

#subject-switch-overlay .sso-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(280px, 100%);
    transform: translateY(4px);
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

#subject-switch-overlay.is-visible .sso-panel {
    transform: none;
}

#subject-switch-overlay .sso-eyebrow {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

#subject-switch-overlay .sso-title {
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: #f3f5f9;
}

#subject-switch-overlay .sso-track {
    position: relative;
    display: block;
    height: 2px;
    margin: 6px 0 4px;
    border-radius: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

#subject-switch-overlay .sso-bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 38%;
    border-radius: inherit;
    background: var(--brand, #7ba6ff);
    animation: sso-slide 1.25s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

#subject-switch-overlay .sso-note {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.46);
}

body.theme-light #subject-switch-overlay,
html.theme-light body #subject-switch-overlay {
    background: rgba(246, 247, 250, 0.78);
}

body.theme-light #subject-switch-overlay .sso-eyebrow,
html.theme-light body #subject-switch-overlay .sso-eyebrow {
    color: rgba(17, 21, 28, 0.5);
}

body.theme-light #subject-switch-overlay .sso-title,
html.theme-light body #subject-switch-overlay .sso-title {
    color: #11151c;
}

body.theme-light #subject-switch-overlay .sso-track,
html.theme-light body #subject-switch-overlay .sso-track {
    background: rgba(17, 21, 28, 0.08);
}

body.theme-light #subject-switch-overlay .sso-note,
html.theme-light body #subject-switch-overlay .sso-note {
    color: rgba(17, 21, 28, 0.5);
}

@keyframes sso-slide {
    from { transform: translateX(-100%); }
    to { transform: translateX(265%); }
}

@media (prefers-reduced-motion: reduce) {
    #subject-switch-overlay .sso-bar {
        width: 100%;
        animation: sso-pulse 1.6s ease-in-out infinite;
    }

    @keyframes sso-pulse {
        0%, 100% { opacity: 0.35; }
        50% { opacity: 1; }
    }
}

/* ── Hero exam card, desktop ──────────────────────────────────
   The card was sized for the portal hero, where it sits alone; next to the
   study hero's greeting and stat pills it read as an afterthought. Scoped to
   .dash-hero so the portal's own copy keeps its dimensions, and to the desktop
   side of exam-countdown.css's 900px break so the phone layout stays compact.
   Four classes deep on the countdown parts to outrank exam-countdown.css. */
@media (min-width: 901px) {
    .dash-hero .exam-card {
        min-width: 268px;
        gap: 9px 14px;
        padding: 18px 22px;
        border-radius: 20px;
    }

    .dash-hero .exam-card>span {
        font-size: 0.76rem;
    }

    .dash-hero .exam-card small {
        padding: 5px 12px;
        font-size: 0.76rem;
    }

    .dash-hero .exam-card .exam-countdown {
        gap: 6px 12px;
    }

    .dash-hero .exam-card .exam-countdown.is-flat {
        font-size: 1.4rem;
    }

    .dash-hero .exam-card .exam-countdown .ec-num {
        font-size: 2.3rem;
    }

    .dash-hero .exam-card .exam-countdown .ec-word {
        font-size: 0.75rem;
    }

    .dash-hero .exam-card .exam-countdown .ec-clock {
        gap: 6px;
        padding: 6px 12px 6px 10px;
        font-size: 0.78rem;
    }
}

.hero-text h2,
.hero-text h2 span,
.theory-content h2,
.theory-content h3 {
    color: var(--text-main) !important;
}

#greet-user span,
.big-text,
.stat-value,
.timer-box {
    color: var(--brand) !important;
}

.stats-grid,
.action-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

/* Portal .ak-kpi proportions: shorter, quieter, and hovering the way the
   destination cards on the portal home do. */
.stat-card {
    grid-column: span 4;
    min-height: 108px;
    border-radius: var(--radius-sm);
    text-align: left;
    position: relative;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
    box-shadow: var(--shadow-md);
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.stat-value {
    letter-spacing: -0.03em;
}

.icon-box {
    opacity: 0.9;
}

.big-btn {
    grid-column: span 6;
    min-height: 136px;
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.big-btn:hover,
.tm-card:hover,
.ct-card:hover,
.chapter-card-container:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
}

.big-btn i {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand);
}

.big-btn h4,
.tm-card h4,
.smart-revision-home-card h3 {
    color: var(--text-main) !important;
    margin-bottom: 6px;
}

.big-btn p,
.tm-card p,
.smart-revision-home-card p,
.hero-text p {
    color: var(--text-muted) !important;
}

/* The counts inside a card's subtitle ("Vault: 47 Questions", "VIP Vault: 0
   Qs") are the one live number on the card, so they take the full-contrast
   colour while their label stays muted. */
.big-btn p span {
    color: var(--text-main) !important;
    font-weight: 700;
}

.smart-revision-home-card,
.ai-teacher-card {
    grid-column: span 12 !important;
    border-radius: var(--radius);
}

.ai-teacher-card {
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 16%, var(--surface-solid)), color-mix(in srgb, var(--brand-2) 14%, var(--surface-solid))) !important;
    box-shadow: var(--shadow-md);
}

.ai-teacher-icon {
    background: var(--brand);
    color: #fff !important;
}

/* ── AI tag ───────────────────────────────────────────────────────────────
   Marks a feature as model-powered. Gradient + shimmer so it reads as the
   "special" thing on the card without another competing accent colour. */

.ai-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 9px 2px 8px;
    border-radius: 999px;
    vertical-align: middle;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    line-height: 1.6;
    color: #fff;
    background: linear-gradient(110deg, var(--brand) 0%, var(--brand-2) 55%, var(--brand) 100%);
    background-size: 220% 100%;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 40%, transparent);
    animation: ai-tag-shimmer 3.6s linear infinite;
    white-space: nowrap;
}

.ai-tag i {
    font-size: 0.6rem;
}

@keyframes ai-tag-shimmer {
    to { background-position: -220% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-tag {
        animation: none;
    }
}

.test-menu {
    border-radius: 22px;
    padding: 22px;
}

.test-menu h3,
#custom-practice-view > h3,
#cp-title,
#ct-title {
    color: var(--text-main) !important;
    font-size: 1.35rem;
    letter-spacing: 0;
}

.tm-card {
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin: 12px 0;
    padding: 22px;
    box-shadow: var(--shadow-sm);
}

/* A card holding a paper the student walked out of mid-test. The paused paper
   is marked on the card that launches it rather than on a Resume card of its
   own, so this has to read as "your test is in here" at a glance — see
   PausedPaper in practiceAndTestRuntime.js. */
.tm-card.is-paused {
    border-color: var(--brand-2);
    background: color-mix(in srgb, var(--brand-2) 9%, var(--surface-raised));
}

.tm-card.is-paused h4 i {
    color: var(--brand-2);
}

.practice-top-bar,
.practice-controls,
.ct-controls,
.ct-advanced-toggle,
.advanced-panel,
#cp-chapters-box,
#ct-chapters-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
}

.practice-top-bar,
.ct-controls,
.adv-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
}

.practice-top-bar input,
.ct-controls input,
.adv-row input,
.ct-row input,
.ai-chat-input {
    background: var(--surface-solid);
    color: var(--text-main);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
}

.cb-btn,
.premium-btn,
.ai-send-btn {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 18px;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--brand) 24%, transparent);
}

.ct-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}

.practice-subject-wrap {
    min-width: 0;
}

.ct-card {
    background: var(--surface-raised);
    color: var(--text-main);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    min-height: 88px;
    box-shadow: var(--shadow-sm);
}

.star-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 10px;
    margin-top: 8px;
    display: flex;
    justify-content: center;
    gap: 4px;
}

.star {
    color: color-mix(in srgb, var(--text-muted) 38%, transparent);
    cursor: pointer;
}

.star.active {
    color: #fbbc04;
}

.ct-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.ct-list .ct-item,
.saved-chapter-item {
    background: var(--surface-raised) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow-sm);
}

.ct-item.selected {
    background: var(--brand-soft) !important;
    color: var(--brand) !important;
    border-color: color-mix(in srgb, var(--brand) 50%, var(--line)) !important;
}

#quiz-view:not(.mock-test-view) {
    max-width: 980px;
    margin: 0 auto;
}

#quiz-view .test-question-card {
    border-radius: 22px;
    padding: 22px;
    margin-bottom: 18px;
}

#quiz-view .question-text {
    color: var(--text-main);
    font-size: 1.04rem;
}

.test-option {
    width: 100%;
    margin: 8px 0;
    padding: 14px 16px;
    background: var(--surface-raised);
    color: var(--text-main);
    border: 1px solid var(--line);
    border-radius: 14px;
    text-align: left;
    box-shadow: none;
}

.test-option:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.test-option.correct,
.test-option.opt-correct {
    border-color: var(--success);
    background: color-mix(in srgb, var(--success) 16%, var(--surface-raised));
}

.test-option.incorrect,
.test-option.opt-incorrect {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 14%, var(--surface-raised));
}

.practice-action-pill,
.ai-panel,
.exp-box,
.fact-box,
.trick-box,
.hint-box {
    background: var(--surface-raised) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
}

body:not(.test-taking-mode) .question-grid-panel {
    right: -340px;
    width: min(320px, 88vw);
    background: var(--surface-solid);
    color: var(--text-main);
    border-left: 1px solid var(--line);
    box-shadow: -18px 0 46px rgba(0, 0, 0, 0.24);
    transition: transform .24s ease;
    transform: translateX(100%);
}

body:not(.test-taking-mode) .question-grid-panel.open {
    right: 0;
    transform: translateX(0);
}

body:not(.test-taking-mode) .grid-header,
body:not(.test-taking-mode) .grid-footer {
    background: var(--surface);
    border-color: var(--line);
    color: var(--text-main);
}

body:not(.test-taking-mode) .grid-header button {
    color: var(--text-main) !important;
}

body:not(.test-taking-mode) .grid-container {
    gap: 10px;
    padding: 16px;
}

body:not(.test-taking-mode) .grid-item {
    background: var(--surface-raised);
    color: var(--text-main);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-weight: 700;
}

/* =========================================
   🎯 PRACTICE TAKING MODE SPLIT LAYOUT
   ========================================= */
body.practice-taking-mode #sidebar,
body.practice-taking-mode .sidebar {
    display: none !important;
    transform: translateX(-100%) !important;
}

/* Common Question Palette Inner Scroll */
.question-grid-panel .grid-container {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px !important;
    padding: 15px !important;
    align-content: start !important;
}

.question-grid-panel .grid-header,
.question-grid-panel .grid-footer {
    flex-shrink: 0 !important;
}

/* 💻 TABLET & DESKTOP (Fix Palette to Right, Sit below 64px Header) */
@media (min-width: 769px) {
    body.practice-taking-mode .question-grid-panel {
        position: fixed !important;
        top: 64px !important;
        right: 0 !important;
        width: 320px !important;
        height: calc(100vh - 64px) !important;
        height: calc(100dvh - 64px) !important;
        transform: translateX(0) !important;
        z-index: 100 !important;
        display: flex !important;
        flex-direction: column !important;
        border-left: 1px solid var(--line) !important;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.35) !important;
        background: var(--surface-solid, #1e1e1e) !important;
        margin: 0 !important;
    }

    body.practice-taking-mode .question-grid-panel .grid-header button {
        display: none !important;
    }

    body.practice-taking-mode #grid-toggle-btn {
        display: none !important;
    }

    body.practice-taking-mode .scroll-content {
        margin-left: 0 !important;
        margin-right: 320px !important;
        width: calc(100% - 320px) !important;
        max-width: none !important;
        box-sizing: border-box !important;
        padding: 20px 24px !important;
    }

    body.practice-taking-mode #quiz-view {
        width: 100% !important;
        max-width: 1000px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    body.practice-taking-mode #quiz-view .test-question-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.practice-taking-mode .grid-overlay-back {
        display: none !important;
    }
}

/* 📱 MOBILE (Slide-in Drawer) */
@media (max-width: 768px) {
    body.practice-taking-mode .question-grid-panel {
        position: fixed !important;
        top: 0 !important;
        right: -340px !important;
        width: min(320px, 85vw) !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 100000 !important;
        display: flex !important;
        flex-direction: column !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.5) !important;
        border-left: 1px solid var(--line) !important;
        background: var(--surface-solid, #1e1e1e) !important;
    }

    body.practice-taking-mode .question-grid-panel.open {
        right: 0 !important;
        transform: translateX(0) !important;
    }

    body.practice-taking-mode .question-grid-panel .grid-header button {
        display: inline-flex !important;
    }

    body.practice-taking-mode #grid-toggle-btn {
        display: flex !important;
    }

    body.practice-taking-mode .scroll-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
    }

    body.practice-taking-mode #quiz-view {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

body:not(.test-taking-mode) .grid-item.active {
    border: 2px solid var(--brand);
    color: var(--brand);
    background: var(--brand-soft);
}

body:not(.test-taking-mode) .grid-item.correct {
    background: color-mix(in srgb, var(--success) 82%, #000);
    border-color: var(--success);
    color: #fff;
}

body:not(.test-taking-mode) .grid-item.wrong {
    background: color-mix(in srgb, var(--danger) 82%, #000);
    border-color: var(--danger);
    color: #fff;
}

body:not(.test-taking-mode) .grid-submit-btn {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff;
    border-radius: 999px;
}

body:not(.test-taking-mode) .quiz-inline-summary {
    background: var(--surface-raised);
    border-color: var(--line);
    color: var(--text-main);
}

body:not(.test-taking-mode) .quiz-stat-row {
    border-color: var(--line);
}

body:not(.test-taking-mode) .quiz-stat-row span:first-child {
    color: var(--text-muted) !important;
}

.saved-chapter-header {
    color: var(--text-main);
}

.saved-chapter-header h4,
.saved-chapter-header strong,
.test-set-card h4 {
    color: var(--text-main) !important;
}

.saved-chapter-header div,
.test-set-card p {
    color: var(--text-muted) !important;
}

.saved-chapter-options {
    gap: 10px;
}

.sc-btn {
    background: var(--surface-solid) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--line) !important;
    font-weight: 800;
}

.sc-btn.sc-practice,
.sc-btn.sc-test {
    color: var(--brand) !important;
    border-color: color-mix(in srgb, var(--brand) 42%, var(--line)) !important;
}

.chapter-header {
    background: var(--surface-raised);
    color: var(--text-main);
    border-bottom: 1px solid var(--line);
}

.chapter-options {
    background: var(--surface);
}

.action-btn,
.tool-btn,
.sc-btn {
    border-radius: 999px;
}

body[data-view="chapter"] #chapter-view > div {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    padding: 0 !important;
}

body[data-view="chapter"] .chapter-card-container {
    margin-bottom: 0;
    overflow: hidden;
    border-radius: var(--radius);
}

body[data-view="chapter"] .chapter-header {
    min-height: 94px;
    padding: 18px !important;
    background: var(--surface-raised) !important;
    border-bottom: 1px solid var(--line) !important;
}

body[data-view="chapter"] .chapter-header h3 {
    color: var(--text-main) !important;
    font-size: 1rem;
    line-height: 1.35;
}

body[data-view="chapter"] .chapter-header span {
    color: var(--text-muted) !important;
}

body[data-view="chapter"] .chapter-options.show {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    height: auto;
    padding: 12px;
}

body[data-view="chapter"] .chapter-options .action-btn {
    flex: none !important;
    background: var(--surface-solid) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--line) !important;
    padding: 11px 10px;
    min-width: 0;
}

body[data-view="chapter"] .chapter-options .action-btn:hover {
    background: var(--brand-soft) !important;
    color: var(--brand) !important;
    border-color: color-mix(in srgb, var(--brand) 45%, var(--line)) !important;
}

body[data-view="chapter"] .arrow-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand) !important;
}

body[data-view="custom-practice"] .select-all-box {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-main);
    font-weight: 700;
}

body[data-view="custom-practice"] input[type="checkbox"] {
    accent-color: var(--brand);
}

html.theme-light body .ai-teacher-card {
    background: linear-gradient(135deg, #eaf2ff, #e8f7f2) !important;
    border-color: rgba(11, 87, 208, 0.12) !important;
}

html.theme-light body .ai-teacher-text h3,
html.theme-light body .ai-teacher-text p {
    color: var(--text-main) !important;
    text-shadow: none !important;
}

html.theme-light body .ai-teacher-arrow {
    color: var(--brand) !important;
}

/* ── Language toggle ─────────────────────────────────────────────────────
   Was a 64x32 skeuomorphic pill: inset shadow, hard-coded #252526 and #444,
   and a teal knob that glowed. Rebuilt as a segmented control on the same
   tokens as everything else in the bar, and sized to match the 40px buttons
   beside it. */
.lang-toggle-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 72px;
    height: 40px;
    padding: 3px;
    margin-right: 0;
    border-radius: 12px;
    background: var(--surface-solid);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.16s ease;
}

.lang-toggle-wrapper:hover {
    border-color: var(--brand);
}

.lang-toggle-slider {
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    border-radius: 9px;
    background: var(--brand);
    box-shadow: none;
}

.lang-toggle-wrapper[data-lang="hi"] .lang-toggle-slider {
    transform: translateX(100%);
}

.lang-text {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
}

.lang-toggle-wrapper[data-lang="en"] .lang-en,
.lang-toggle-wrapper[data-lang="hi"] .lang-hi {
    color: #fff;
}

html.theme-light .lang-toggle-wrapper[data-lang="en"] .lang-en,
html.theme-light .lang-toggle-wrapper[data-lang="hi"] .lang-hi {
    color: #fff;
}

body.theme-light .lang-toggle-wrapper {
    background: var(--surface-solid);
}

/* Only where there is something to translate. On the dashboard, the vault menus
   and the tracker there is no question text on screen, so the toggle was a
   control that changed nothing visible. body[data-view] is set by
   setPremiumViewState() on every navigation. */
#desktop-lang-toggle {
    display: none;
}

body[data-view="quiz"] #desktop-lang-toggle,
body[data-view="result"] #desktop-lang-toggle,
body[data-view="vault-detail-view"] #desktop-lang-toggle,
body[data-view="vault-detail"] #desktop-lang-toggle,
body[data-view="test"] #desktop-lang-toggle,
body[data-view="test-running"] #desktop-lang-toggle,
body[data-view="running"] #desktop-lang-toggle {
    display: inline-flex;
}

/* Notes are translatable too — but only some of them. Plenty of authored
   chapters ship English alone, and the Formula Lab's cards are always both, so
   renderNotes() decides per chapter and says so with this class. The rule is
   the same one as above: a toggle that changes nothing on screen is worse than
   no toggle. Gated on data-view as well, so a class left behind by the last
   notes screen cannot show it anywhere else. */
body[data-view="notes"].notes-bilingual #desktop-lang-toggle {
    display: inline-flex;
}

@media (min-width: 1024px) {
    body:not(.test-taking-mode) .content-area {
        padding-left: 0;
    }

    .sidebar {
        transform: translateX(0);
        position: sticky;
        height: 100vh;
        height: 100dvh;
    }

    .hamburger-btn {
        display: none;
    }
}

@media (max-width: 900px) {
    .main-header {
        height: 58px;
        padding: 0 12px;
    }

    .scroll-content {
        padding: 12px;
    }

    .dash-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }

    .stats-grid,
    .action-grid {
        grid-template-columns: 1fr;
    }

    .stat-card,
    .big-btn,
    .smart-revision-home-card,
    .ai-teacher-card {
        grid-column: span 1 !important;
    }

    .big-btn {
        min-height: 92px;
        padding: 16px;
        border-radius: 14px;
    }

    .stat-card {
        min-height: 92px;
        border-radius: 14px;
    }

    .stats-grid {
        gap: 12px;
    }

    .action-grid {
        gap: 12px;
    }

    .practice-top-bar,
    .ct-controls,
    .adv-row {
        grid-template-columns: 1fr;
    }

    .ct-grid,
    .ct-list {
        grid-template-columns: 1fr;
    }

    .sidebar {
        width: min(88vw, 360px);
        transform: translateX(-100%);
        position: fixed;
        height: 100%;
    }

    .sidebar.open,
    .sidebar.active {
        transform: translateX(0);
    }

    #quiz-view .test-question-card {
        padding: 16px;
        border-radius: 18px;
    }

    .question-grid-panel {
        top: 58px !important;
        height: calc(100% - 58px) !important;
        border-radius: 18px 0 0 0;
    }
}

@media (max-width: 560px) {
    .header-left {
        gap: 8px;
    }

    .header-left h1 {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fullscreen-btn,
    .theme-toggle-btn {
        width: 36px;
        height: 36px;
    }

    .dash-hero,
    .test-menu,
    .practice-top-bar,
    .practice-controls,
    #cp-chapters-box {
        border-radius: 16px;
    }
}

@media (hover: none), (max-width: 900px) {
    html {
        scroll-behavior: auto;
    }

    body:not(.test-taking-mode) .dash-hero,
    body:not(.test-taking-mode) .glass-panel,
    body:not(.test-taking-mode) .dash-card,
    body:not(.test-taking-mode) .big-btn,
    body:not(.test-taking-mode) .test-menu,
    body:not(.test-taking-mode) .custom-builder,
    body:not(.test-taking-mode) .chapter-card-container,
    body:not(.test-taking-mode) .note-card,
    body:not(.test-taking-mode) .test-question-card,
    body:not(.test-taking-mode) .smart-revision-home-card,
    .sidebar,
    .main-header {
        backdrop-filter: none !important;
    }

    .big-btn:hover,
    .tm-card:hover,
    .ct-card:hover,
    .chapter-card-container:hover,
    .ai-teacher-card:hover {
        transform: none !important;
        box-shadow: var(--shadow-sm) !important;
    }

    .big-btn,
    .tm-card,
    .ct-card,
    .chapter-card-container,
    .test-question-card {
        transition: border-color .16s ease, background-color .16s ease !important;
    }
}

/* Test-mode guardrails: shared classes are restored on test surfaces. */
body.test-taking-mode .main-header {
    height: 50px;
    padding: 0 15px;
    background: #1e1e1e;
    border-bottom: 1px solid #333;
    box-shadow: none;
    backdrop-filter: none;
}

body.test-taking-mode .header-left h1 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
}

body.test-taking-mode .hamburger-btn,
body.test-taking-mode .fullscreen-btn,
body.test-taking-mode .back-header-btn {
    width: auto;
    height: auto;
    border-radius: 4px;
    background: none;
    border: none;
    color: #fff;
    box-shadow: none;
}

body.test-taking-mode .back-header-btn {
    background: #333;
    padding: 5px 10px;
}

body.test-taking-mode .theme-toggle-btn {
    display: none;
}

body[data-view="test-menu"] .test-menu,
body[data-view="custom-test"] .test-menu {
    background: #1e1e1e;
    border: 1px solid #333;
    padding: 15px;
    border-radius: 10px;
    box-shadow: none;
    backdrop-filter: none;
}

body[data-view="test-menu"] .test-menu h3,
body[data-view="custom-test"] .test-menu h3,
body[data-view="custom-test"] h3,
body[data-view="custom-test"] #ct-title {
    color: #e0e0e0 !important;
    font-size: revert;
}

body[data-view="test-menu"] .tm-card {
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 10px;
    margin: 8px 0;
    padding: 12px;
    box-shadow: none;
}

body[data-view="test-menu"] .tm-card:hover {
    transform: none;
    box-shadow: none;
    border-color: #03dac6;
}

body[data-view="custom-test"] .ct-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

body[data-view="custom-test"] .ct-card {
    background: #1e1e1e;
    border: 1px solid #333;
    color: #e0e0e0;
    border-radius: 12px;
    padding: 16px;
    min-height: 80px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body[data-view="custom-test"] .ct-card:hover {
    transform: none;
    box-shadow: none;
    border-color: #03dac6;
}

body[data-view="custom-test"] .ct-list {
    display: block;
}

body[data-view="custom-test"] .ct-list .ct-item {
    background: #1e1e1e !important;
    border: 1px solid #333 !important;
    color: #e0e0e0 !important;
    border-radius: 6px !important;
    box-shadow: none;
}

body[data-view="custom-test"] .ct-item.selected {
    background: #03dac6 !important;
    color: #000 !important;
}

body[data-view="custom-test"] .cb-btn {
    width: 100%;
    padding: 10px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    background: #03dac6;
    color: #000;
    box-shadow: none;
}

/* =========================================
   HEADER SUBJECT SWITCHER DROPDOWN (PREMIUM)
   ========================================= */

.subject-switcher-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 1000;
}

.subject-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(3, 218, 198, 0.08);
    border: 1px solid rgba(3, 218, 198, 0.25);
    color: var(--text-main, #f4f7fb);
    padding: 5px 14px;
    border-radius: 12px;
    font-size: 1.12rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    max-width: 340px;
    white-space: nowrap;
}

.subject-switcher-btn:hover {
    background: rgba(3, 218, 198, 0.16);
    border-color: rgba(3, 218, 198, 0.5);
    box-shadow: 0 4px 15px rgba(3, 218, 198, 0.2);
}

.subject-switcher-btn:active {
    transform: translateY(0);
}

.switcher-icon {
    font-size: 1.15rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.switcher-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

.switcher-arrow {
    font-size: 0.75rem;
    color: #03dac6;
    transition: transform 0.3s ease;
    margin-left: 2px;
}

.subject-switcher-btn.open .switcher-arrow {
    transform: rotate(180deg);
}

.subject-switcher-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 270px;
    max-width: 320px;
    max-height: 380px;
    overflow-y: auto;
    background: rgba(18, 22, 30, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(3, 218, 198, 0.3);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(3, 218, 198, 0.1);
    z-index: 9999;
    animation: switcherSlideDown 0.22s cubic-bezier(0, 0, 0.2, 1);
}

@keyframes switcherSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.switcher-menu-header {
    padding: 6px 12px 8px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #03dac6;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.switcher-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--text-main, #e0e0e0);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 3px;
    user-select: none;
}

.switcher-item:hover {
    background: rgba(3, 218, 198, 0.12);
    color: #03dac6;
    padding-left: 15px;
}

.switcher-item.active {
    background: linear-gradient(90deg, rgba(3, 218, 198, 0.25), rgba(3, 218, 198, 0.05));
    border-left: 3px solid #03dac6;
    color: #03dac6;
    font-weight: 700;
}

.switcher-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.switcher-item-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.switcher-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Light Theme Adjustments */
html.theme-light .subject-switcher-menu {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(11, 87, 208, 0.25);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

html.theme-light .switcher-item:hover {
    background: rgba(11, 87, 208, 0.08);
    color: var(--brand, #0b57d0);
}

html.theme-light .switcher-item.active {
    background: rgba(11, 87, 208, 0.12);
    border-left-color: var(--brand, #0b57d0);
    color: var(--brand, #0b57d0);
}

/* Scrollbar for switcher menu */
.subject-switcher-menu::-webkit-scrollbar {
    width: 5px;
}
.subject-switcher-menu::-webkit-scrollbar-track {
    background: transparent;
}
.subject-switcher-menu::-webkit-scrollbar-thumb {
    background: rgba(3, 218, 198, 0.3);
    border-radius: 10px;
}

@media (max-width: 480px) {
    .subject-switcher-btn {
        max-width: 170px;
        padding: 5px 10px;
        font-size: 0.85rem;
    }
    .switcher-name {
        max-width: 90px;
    }
    .subject-switcher-menu {
        min-width: 230px;
        max-width: 260px;
    }
}