/* Midnight blue glass, electric accents, and bright readable controls. */
:root[data-theme="light"] { color-scheme: light; }

.header-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.theme-toggle { flex: 0 0 auto; min-height: 44px; white-space: nowrap; margin: 0; }
.theme-toggle[hidden] { display: none; }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: inline-block; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }

@media (max-width: 1120px) {
    .theme-label { display: none; }
    .theme-toggle { width: 44px; padding: 10px; }
}
@media (max-width: 1000px) {
    .main-nav { order: 3; }
}
@media (max-width: 600px) {
    .header-tools .school-year { display: none; }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --forest: #f0f7ff;
    --forest-deep: #ffffff;
    --olive: #abd8ff;
    --dark: #eaf3ff;
    --gold: #ffd469;
    --sunlight: #befbe8;
    --bg: #081426;
    --glass: rgba(14, 35, 61, .92);
    --line: rgba(138, 193, 245, .22);
    --muted: #b5c9df;
    --error: #ffafa9;
    --accent-violet: #ae8bff;
    --accent-pink: #ff80c9;
    --accent-cyan: #74e8ff;
    --accent-lime: #dcff94;
    --accent-orange: #ffb287;
    --shadow: 0 16px 42px -23px rgba(0, 9, 27, .75), 0 1px 0 rgba(211, 235, 255, .08) inset;
}

:root[data-theme="dark"] body::before {
    background:
        radial-gradient(ellipse at 3% 0%, rgba(36, 92, 255, .24), transparent 44%),
        radial-gradient(ellipse at 93% 20%, rgba(255, 79, 183, .14), transparent 40%),
        radial-gradient(ellipse at 70% 90%, rgba(48, 209, 246, .12), transparent 45%),
        linear-gradient(135deg, #0a2144, #0a1c35 58%, #081426);
}
:root[data-theme="dark"] ::selection { background: #2368c6; color: #fff; }
:root[data-theme="dark"] :focus-visible { outline-color: var(--accent-cyan); }

/* The logo keeps its original white canvas; the surrounding chrome is glass. */
:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .auth-layout .site-header {
    background: rgba(10, 26, 48, .92);
    border-bottom-color: var(--line);
}
:root[data-theme="dark"] .brand-mark { border-color: rgba(149, 200, 255, .26); }
:root[data-theme="dark"] .brand-school,
:root[data-theme="dark"] .school-year,
:root[data-theme="dark"] .site-footer { color: var(--muted); }
:root[data-theme="dark"] .brand-dot { color: var(--accent-pink); }
:root[data-theme="dark"] .school-year span,
:root[data-theme="dark"] .footer-separator { color: #82a4cb; }
:root[data-theme="dark"] .main-nav > a { color: #c3dcf5; }
:root[data-theme="dark"] .main-nav > a:hover { color: #ffffff; background: rgba(66, 156, 255, .15); }
:root[data-theme="dark"] .main-nav > a[aria-current="page"] {
    color: #eef8ff;
    background: linear-gradient(115deg, #174b9e, #136b9e);
    box-shadow: 0 1px 0 rgba(204, 236, 255, .17) inset;
}
:root[data-theme="dark"] .main-nav .signout-button { color: #cce8ff; border-color: #3d6b9a; }
:root[data-theme="dark"] .main-nav .signout-button:hover { background: #1c416b; color: #ffffff; }
:root[data-theme="dark"] .skip { background: #183f76; }

:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .page-eyebrow,
:root[data-theme="dark"] .section-kicker { color: #9dcfff; }
:root[data-theme="dark"] .file-name,
:root[data-theme="dark"] .step-list strong,
:root[data-theme="dark"] .empty-state h2,
:root[data-theme="dark"] .empty-state h3 { color: #deefff; }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .action-card,
:root[data-theme="dark"] .tile,
:root[data-theme="dark"] .leaderboard-panel,
:root[data-theme="dark"] .stat-strip,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .auth-shell { border-color: var(--line); }
:root[data-theme="dark"] a.action-card:hover { border-color: #6abaff; box-shadow: 0 17px 36px -23px rgba(37, 137, 255, .4); }
:root[data-theme="dark"] .hero-panel,
:root[data-theme="dark"] .page-hero {
    background: linear-gradient(118deg, #071f53 0%, #1246aa 42%, #096fbb 76%, #0d96aa 100%);
    border-color: rgba(117, 192, 255, .38);
    box-shadow: 0 24px 48px -25px rgba(16, 110, 245, .45), 0 1px 0 rgba(206, 238, 255, .15) inset;
}
:root[data-theme="dark"] .stat-label,
:root[data-theme="dark"] .step-list li { color: #bcd2e9; }
:root[data-theme="dark"] .card-icon,
:root[data-theme="dark"] .action-icon,
:root[data-theme="dark"] .step-number,
:root[data-theme="dark"] .empty-icon { background: #153d67; border-color: #2d6598; color: #b1dcff; }
:root[data-theme="dark"] .dashboard-side :is(.card-icon, .action-icon) { background: #143e52; border-color: #246b81; color: var(--accent-cyan); }
:root[data-theme="dark"] .next-step { background: #182f4d; border-color: #365c86; }
:root[data-theme="dark"] .next-step p { color: #bfd8f2; }
:root[data-theme="dark"] .next-step .card-icon { background: #55234d; border-color: #8f407b; color: var(--accent-pink); }
:root[data-theme="dark"] :where(.stat-item:nth-child(4n + 1)) .stat-value { color: #c4a8ff; }
:root[data-theme="dark"] :where(.stat-item:nth-child(4n + 2)) .stat-value { color: var(--accent-pink); }
:root[data-theme="dark"] :where(.stat-item:nth-child(4n + 3)) .stat-value { color: var(--accent-cyan); }
:root[data-theme="dark"] :where(.stat-item:nth-child(4n)) .stat-value { color: var(--accent-lime); }

/* Bright actions use dark ink; glowing edges never replace readable labels. */
:root[data-theme="dark"] button,
:root[data-theme="dark"] .button {
    background: linear-gradient(115deg, #77bdff, #74e8ff);
    border-color: #88d8ff;
    color: #082741;
    box-shadow: 0 5px 20px -9px rgba(43, 160, 255, .5);
}
:root[data-theme="dark"] button:hover,
:root[data-theme="dark"] .button:hover { background: linear-gradient(115deg, #a0d4ff, #a5f1ff); border-color: #b2e9ff; color: #082741; }
:root[data-theme="dark"] .secondary { background: rgba(74, 158, 255, .1); border-color: #5788ba; color: #d1eaff; box-shadow: none; }
:root[data-theme="dark"] .secondary:hover { background: #1c426c; border-color: #7ebcf6; color: #ffffff; }
:root[data-theme="dark"] .danger { background: #a63f55; border-color: #d9687d; color: #fff7f8; }
:root[data-theme="dark"] .danger:hover { background: #be4e65; border-color: #f28a9b; color: #fff; }
:root[data-theme="dark"] .hero-panel .button,
:root[data-theme="dark"] .page-hero .button { background: linear-gradient(110deg, #80ecff, #d9ff9c); border-color: #a5efdf; color: #17263b; }
:root[data-theme="dark"] .hero-panel .button:hover,
:root[data-theme="dark"] .page-hero .button:hover { background: linear-gradient(110deg, #adf4ff, #e9ffbf); border-color: #c7f5eb; }
:root[data-theme="dark"] .hero-panel .button.secondary,
:root[data-theme="dark"] .page-hero .button.secondary { background: rgba(255, 255, 255, .06); color: #ffffff; border-color: rgba(204, 236, 255, .45); }
:root[data-theme="dark"] .hero-panel .button.secondary:hover,
:root[data-theme="dark"] .page-hero .button.secondary:hover { background: rgba(255, 255, 255, .12); }

:root[data-theme="dark"] label,
:root[data-theme="dark"] legend { color: #d5eaff; }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    color: #edf6ff;
    background: rgba(9, 24, 44, .88);
    border-color: #49709a;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .13) inset;
}
:root[data-theme="dark"] input:hover,
:root[data-theme="dark"] select:hover,
:root[data-theme="dark"] textarea:hover { border-color: #74acdf; }
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus { background: #102c4c; border-color: #79c5ff; outline-color: rgba(83, 179, 255, .24); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #93b0d1; }
:root[data-theme="dark"] select option { color: #edf6ff; background: #112c4a; }
:root[data-theme="dark"] input[type="checkbox"],
:root[data-theme="dark"] input[type="radio"] { accent-color: #79c5ff; }
:root[data-theme="dark"] input[type="file"] { background: #102944; }
:root[data-theme="dark"] input[type="file"]::file-selector-button { background: #1c426c; border-color: #507aab; color: #d9edff; }
:root[data-theme="dark"] input:autofill { caret-color: #edf6ff; }
:root[data-theme="dark"] input.input-validation-error { border-color: #fa9ca4; }
:root[data-theme="dark"] .notice { background: #153554; border-color: #3f77a8; color: #cae6ff; }
:root[data-theme="dark"] .validation-summary-errors { border-color: #a65f72; background: #462031; }
:root[data-theme="dark"] .badge,
:root[data-theme="dark"] .status-pill { background: #173b61; border-color: #3b72a5; color: #cceaff; }
:root[data-theme="dark"] .badge.warning,
:root[data-theme="dark"] .status-pill.warning { background: #47351d; border-color: #997330; color: #ffdd96; }
:root[data-theme="dark"] .status-pill.success { background: #173d3d; border-color: #33756d; color: #aaf1dd; }
:root[data-theme="dark"] .status-pill.neutral { background: #20354c; border-color: #4e6a87; color: #bbcede; }
:root[data-theme="dark"] .status-pill.error { background: #472335; border-color: #9e536b; color: #ffb3bf; }

:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .table-scroll { border-color: var(--line); }
:root[data-theme="dark"] th { background: rgba(74, 161, 255, .12); color: #b4d6f7; }
:root[data-theme="dark"] td,
:root[data-theme="dark"] th { border-bottom-color: var(--line); }
:root[data-theme="dark"] td { color: #c3d7eb; }
:root[data-theme="dark"] td:first-child,
:root[data-theme="dark"] .leaderboard-table tbody th,
:root[data-theme="dark"] .leaderboard-person strong { color: #e5f2ff; }
:root[data-theme="dark"] tbody tr:hover { background: rgba(79, 172, 255, .08); }
:root[data-theme="dark"] summary { color: #bfe0ff; }
:root[data-theme="dark"] summary::marker { color: #8dbbeb; }
:root[data-theme="dark"] pre { background: #0c223d; border-color: #335d8d; color: #cae4ff; }
:root[data-theme="dark"] progress { accent-color: #79c5ff; }
:root[data-theme="dark"] progress::-webkit-progress-bar { background: #244769; }
:root[data-theme="dark"] progress::-webkit-progress-value { background: #79c5ff; }

:root[data-theme="dark"] .test-header { border-color: #3e73a4; background: rgba(10, 29, 53, .96); box-shadow: 0 10px 22px -20px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .timer { background: linear-gradient(110deg, #aeebff, #a8d0ff); border-color: #addbff; color: #102d4a; box-shadow: none; }
:root[data-theme="dark"] .timer small,
:root[data-theme="dark"] .timer .muted { color: #355b7b; }
:root[data-theme="dark"] .option { background: rgba(11, 29, 51, .8); border-color: #49709a; color: #e7f4ff; }
:root[data-theme="dark"] .option:hover { background: #153d64; border-color: #589bda; }
:root[data-theme="dark"] .option:has(input:checked) { background: #154a85; border-color: #79c5ff; box-shadow: 0 0 0 1px #79c5ff; }
:root[data-theme="dark"] .selection-hint,
:root[data-theme="dark"] .save-status { color: #9fd4ff; }
:root[data-theme="dark"] .access-code { background: #103d70; border-color: #4b9be2; color: #d9f1ff; }
:root[data-theme="dark"] .correct { border-left-color: #8deccf; }
:root[data-theme="dark"] .incorrect { border-left-color: #ff9baf; }
:root[data-theme="dark"] .score-panel .stat-strip { background: #163859; border-color: #4575a4; }
:root[data-theme="dark"] .result-summary { background: #163859; border-color: #4575a4; }
:root[data-theme="dark"] .review-question.result-correct { background: #112f29; border-color: #397f65; border-inline-start-color: #69d7a5; }
:root[data-theme="dark"] .review-question.result-incorrect { background: #3c202b; border-color: #995164; border-inline-start-color: #ff95a2; }
:root[data-theme="dark"] .review-question.result-correct .review-result-label { color: #b6f2d3; }
:root[data-theme="dark"] .review-question.result-incorrect .review-result-label { color: #ffd2d8; }
:root[data-theme="dark"] .review-answer-result.result-correct { background: #163d30; border-color: #498b70; }
:root[data-theme="dark"] .review-answer-result.result-incorrect { background: #4a2532; border-color: #a76172; }

:root[data-theme="dark"] .leaderboard-row { background: rgba(66, 150, 255, .08); }
:root[data-theme="dark"] .leaderboard-row.is-you,
:root[data-theme="dark"] .leaderboard-table tr.is-you { background: #164779; border-color: #6bb9fa; }
:root[data-theme="dark"] .leaderboard-avatar { background: #204873; color: #c3e4ff; }
:root[data-theme="dark"] .rank-badge { background: #203d5d; color: #c4e3ff; }
:root[data-theme="dark"] .rank-badge.rank-1 { background: #4b3818; color: #ffdf8a; }
:root[data-theme="dark"] .rank-badge.rank-2 { background: #263d54; color: #96e9ff; }
:root[data-theme="dark"] .rank-badge.rank-3 { background: #4a2944; color: #ffadd4; }
:root[data-theme="dark"] .class-tabs a { color: #b8dbfb; }
:root[data-theme="dark"] .class-tabs a:hover { background: #173b61; }
:root[data-theme="dark"] .class-tabs a.is-active,
:root[data-theme="dark"] .class-tabs a[aria-current="page"] { background: #155a99; border-color: #69b8f4; color: #e8f6ff; }

:root[data-theme="dark"] .login-logo { padding: 7px; background: #fff; }
:root[data-theme="dark"] .auth-aside { background: linear-gradient(118deg, #071f53 0%, #1246aa 42%, #096fbb 76%, #0d96aa 100%); }
:root[data-theme="dark"] .auth-aside .eyebrow { color: #b7e1ff; }
:root[data-theme="dark"] .auth-aside .step-list li { color: #d2eaff; border-bottom-color: rgba(202, 234, 255, .22); }
:root[data-theme="dark"] .auth-aside .step-list strong { color: #f2fbff; }
:root[data-theme="dark"] .auth-aside .step-number { background: rgba(112, 198, 255, .17); border-color: rgba(181, 227, 255, .35); color: #dcf4ff; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root[data-theme="dark"] .site-header { background: #0c223d; }
    :root[data-theme="dark"] .card,
    :root[data-theme="dark"] .action-card,
    :root[data-theme="dark"] .tile,
    :root[data-theme="dark"] .leaderboard-panel,
    :root[data-theme="dark"] .stat-strip,
    :root[data-theme="dark"] .stat-card,
    :root[data-theme="dark"] .auth-shell { background: #102944; }
}

@media (prefers-contrast: more) {
    :root[data-theme="dark"] { --muted: #e0efff; --line: #9bc6ef; --glass: #102944; }
    :root[data-theme="dark"] .main-nav > a,
    :root[data-theme="dark"] .stat-label,
    :root[data-theme="dark"] .leaderboard-meta { color: #e5f2ff; }
}

/* Reports use ink-friendly colors even when the viewer chose night mode. */
@media print {
    .theme-toggle { display: none; }
    :root[data-theme="dark"] {
        color-scheme: light;
        --forest: #111;
        --forest-deep: #111;
        --olive: #222;
        --dark: #111;
        --muted: #444;
        --line: #bbb;
        --error: #111;
    }
    :root[data-theme="dark"] body,
    :root[data-theme="dark"] .card,
    :root[data-theme="dark"] .action-card,
    :root[data-theme="dark"] .tile,
    :root[data-theme="dark"] .leaderboard-panel,
    :root[data-theme="dark"] .stat-strip,
    :root[data-theme="dark"] .stat-card,
    :root[data-theme="dark"] .hero-panel,
    :root[data-theme="dark"] .page-hero,
    :root[data-theme="dark"] .next-step,
    :root[data-theme="dark"] .test-header,
    :root[data-theme="dark"] .timer,
    :root[data-theme="dark"] pre { color: #111; background: #fff; border-color: #bbb; box-shadow: none; }
    :root[data-theme="dark"] .site-main :is(h1, h2, h3, p, small, span, label, legend, summary, a, td, th, strong) { color: #111; }
    :root[data-theme="dark"] .site-main :is(input, select, textarea, .option, .access-code, .badge, .status-pill, .rank-badge, .leaderboard-avatar, .leaderboard-row, .score-panel .stat-strip),
    :root[data-theme="dark"] .site-main .leaderboard-table tr.is-you { color: #111; background: #fff; border-color: #bbb; }
}