/* ==========================================================================
   The Scholar's Ascent Portal — Mathematical Vision reskin
   --------------------------------------------------------------------------
   Loaded after css/styles.css. This maps the existing portal DOM/classes onto
   the dark studio token system without renaming hooks or changing behavior.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,500;1,600&family=Space+Grotesk:wght@600;700&display=swap');

:root {
    /* Self-contained studio tokens keep this source portable between the
       standalone Assessment Center and the drijezie.com portal mirror. */
    --paper: #0A0E1F;
    --surface: #10162D;
    --surface-2: #161D3A;
    --ink: #EEF1FA;
    --ink-2: #C3CBE3;
    --muted: #8A94B8;
    --accent: #8B87F4;
    --accent-bright: #A8A6FF;
    --gold: #E3B65C;
    --c-alg1: #6EA8FF;
    --c-geo: #4FD8B0;
    --c-calc: #FF7BA9;
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-heading: 'Space Grotesk', 'Outfit', system-ui, sans-serif;
    --font-body: 'Outfit', system-ui, sans-serif;
    --portal-glass: rgba(24, 31, 62, 0.70);
    --portal-glass-strong: rgba(16, 22, 45, 0.88);
    --portal-input: rgba(7, 11, 24, 0.82);
    --portal-line: rgba(167, 166, 255, 0.14);
    --portal-line-strong: rgba(167, 166, 255, 0.30);
    --portal-focus: #A8A6FF;
    --portal-danger: #FF9B9B;
    --bg-deep-space: var(--paper);
    --glass-bg: var(--portal-glass);
    --glass-border: var(--portal-line);
    --glass-shadow: 0 18px 48px rgba(3, 5, 12, 0.60), 0 0 42px rgba(139, 135, 244, 0.10);
    --cyan-glow: var(--c-alg1);
    --purple-glow: var(--accent);
    --accent-gradient: linear-gradient(135deg, var(--accent), var(--c-alg1));
    --primary-gradient: linear-gradient(135deg, var(--accent), var(--c-alg1));
    --accent-pink: var(--c-calc);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted: var(--muted);
    --font-size-sm: 0.875rem;
}

html,
body {
    background-color: var(--paper) !important;
}

body {
    color: var(--ink-2);
    font-family: var(--font-body);
    background-image:
        radial-gradient(1100px 620px at 12% -6%, rgba(107, 86, 217, 0.16), transparent 60%),
        radial-gradient(900px 560px at 88% 4%, rgba(46, 92, 214, 0.13), transparent 60%),
        radial-gradient(720px 480px at 50% 108%, rgba(139, 135, 244, 0.09), transparent 62%),
        repeating-linear-gradient(to right, rgba(167, 166, 255, 0.045) 0, rgba(167, 166, 255, 0.045) 1px, transparent 1px, transparent 34px),
        repeating-linear-gradient(to bottom, rgba(167, 166, 255, 0.045) 0, rgba(167, 166, 255, 0.045) 1px, transparent 1px, transparent 34px) !important;
    background-attachment: fixed;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 45%, rgba(227, 182, 92, 0.045) 45.2% 45.6%, transparent 46%),
        radial-gradient(circle at 75% 22%, rgba(227, 182, 92, 0.10), transparent 18rem);
}

body > * {
    position: relative;
    z-index: 1;
}

/* /chapter-assessments/ supplies the site navigation and footer around this
   iframe. Do not show the portal's standalone footer or fixed release strip
   inside that shell; keeping one owner removes the misleading double-footer
   landmark without changing the direct /portal/ experience. */
html.portal-embedded .footer,
html.portal-embedded #portal-version-footer,
html.portal-embedded #footer-root {
    display: none !important;
}

button,
input,
select,
textarea {
    font-family: var(--font-body);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.rte-editor:focus-visible,
.answer-option:focus-within {
    outline: 3px solid var(--portal-focus) !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(168, 166, 255, 0.18) !important;
}

.main-container {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    box-sizing: border-box;
}

/* The portal may be loaded directly, without the site's shared stylesheet.
   Keep the injected site navigation from letting its full-size source logo
   create a horizontal scrollbar on small screens. */
.site-header .header-logo {
    max-width: calc(100vw - 2rem) !important;
}

.site-header .header-logo > img {
    width: min(120px, 28vw) !important;
    max-width: min(120px, 28vw) !important;
    height: auto !important;
}

/* The Digital Syllabus uses the scoped Architect component vocabulary. Keep
   that feature dark when it activates its .architect-theme wrapper. */
.architect-theme {
    --arch-bg: var(--paper);
    --arch-surface: var(--surface);
    --arch-surface-2: var(--surface-2);
    --arch-line: var(--portal-line);
    --arch-line-strong: var(--portal-line-strong);
    --arch-ink: var(--ink);
    --arch-ink-soft: var(--ink-2);
    --arch-ink-muted: var(--muted);
    --arch-accent: var(--accent-bright);
    --arch-accent-700: var(--accent);
    --arch-accent-50: rgba(139, 135, 244, 0.14);
    --arch-ok: #9AF2D8;
    --arch-ok-bg: rgba(79, 216, 176, 0.16);
    --arch-warn: #F0CE8A;
    --arch-warn-bg: rgba(227, 182, 92, 0.16);
    --arch-err: #FFC3C3;
    --arch-err-bg: rgba(255, 155, 155, 0.16);
    --arch-shadow: var(--glass-shadow);
    color: var(--ink-2);
}

.hero-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.hero-logo {
    background: rgba(139, 135, 244, 0.13) !important;
    border: 1px solid var(--portal-line);
    box-shadow: 0 0 36px rgba(139, 135, 244, 0.18);
}

.hero-title {
    font-family: var(--font-display) !important;
    color: var(--ink) !important;
    background: none !important;
    -webkit-text-fill-color: var(--ink) !important;
    letter-spacing: 0;
    text-shadow: 0 0 34px rgba(139, 135, 244, 0.18);
}

.hero-subtitle,
.mission-control-header p,
.footer,
.footer p {
    color: var(--ink-2) !important;
}

.divider-line {
    background: linear-gradient(90deg, transparent, var(--gold), transparent) !important;
}

.divider-dot {
    background: var(--gold) !important;
    box-shadow: 0 0 18px rgba(227, 182, 92, 0.45);
}

.login-card,
.quiz-interface,
.results-card,
.user-info-bar,
.progress-card,
.submission-card,
.a11y-panel,
.quiz-card,
.my-submissions-section,
#student-view-donow > div,
#student-view-retake > div > div,
#activity-chooser > div,
#hidden-grades-panel > div,
#scratchpad-panel,
#scratchpad-feature-modal > div,
#theme-picker-modal > div {
    background: var(--portal-glass) !important;
    color: var(--ink-2) !important;
    border: 1px solid var(--portal-line) !important;
    box-shadow: var(--glass-shadow) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Post-login information architecture: keep the five daily actions prominent
   and place the nine lower-frequency tools behind one compact disclosure. The
   established card gradients remain inline and unchanged; these rules address
   hierarchy, contrast, and responsive density only. */
.activity-chooser-prompt {
    color: var(--ink-2);
    font-size: 0.84rem;
    margin: 0 0 1.5rem;
}

.activity-primary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
}

.activity-primary-card--featured {
    grid-column: 1 / -1;
}

.activity-primary-card > div:last-child {
    min-width: 0;
}

.activity-card-title {
    color: #FFFFFF !important;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
}

.activity-card-subtitle {
    color: #DCE4F6 !important;
    font-size: 0.78rem;
    line-height: 1.4;
    margin-top: 0.2rem;
}

.learning-toolkit {
    margin-top: 1rem;
    border: 1px solid var(--portal-line-strong);
    border-radius: 1rem;
    background: rgba(9, 14, 31, 0.58);
    overflow: hidden;
    text-align: left;
}

.learning-toolkit > summary {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 4.25rem;
    padding: 0.8rem 1rem;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.learning-toolkit > summary::-webkit-details-marker {
    display: none;
}

.learning-toolkit > summary:focus-visible {
    outline: 3px solid var(--portal-focus);
    outline-offset: -3px;
}

.learning-toolkit-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: 0.75rem;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--accent), var(--c-alg1));
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.30);
}

.learning-toolkit-summary-copy {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 0.1rem;
}

.learning-toolkit-summary-copy strong {
    color: #FFFFFF;
    font-size: 0.96rem;
}

.learning-toolkit-summary-copy small {
    color: var(--ink-2);
    font-size: 0.75rem;
}

.learning-toolkit-chevron {
    color: var(--accent-bright);
    font-size: 1.35rem;
    transition: transform 0.2s ease;
}

.learning-toolkit[open] .learning-toolkit-chevron {
    transform: rotate(180deg);
}

.learning-toolkit-panel {
    display: grid;
    gap: 1rem;
    padding: 0.25rem 1rem 1rem;
    border-top: 1px solid var(--portal-line);
}

.learning-toolkit-group h3 {
    margin: 0.9rem 0 0.55rem;
    color: var(--ink-2);
    font-family: var(--font-heading);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.learning-toolkit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.toolkit-tile {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.15rem 0.55rem;
    min-height: 4.4rem;
    padding: 0.75rem;
    border: 1px solid;
    border-radius: 0.85rem;
    color: #FFFFFF;
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.toolkit-tile:hover {
    transform: translateY(-2px);
    border-color: var(--accent-bright) !important;
    box-shadow: 0 8px 24px rgba(3, 5, 12, 0.34);
}

.toolkit-tile > span {
    grid-row: 1 / span 2;
    font-size: 1.35rem;
}

.toolkit-tile > strong {
    color: #FFFFFF;
    font-size: 0.8rem;
    line-height: 1.2;
}

.toolkit-tile > small {
    color: #DCE4F6;
    font-size: 0.66rem;
    line-height: 1.25;
}

@media (max-width: 680px) {
    .activity-chooser-shell {
        padding: 1.25rem 0.9rem !important;
    }

    .activity-primary-grid,
    .learning-toolkit-grid {
        grid-template-columns: 1fr;
    }

    .activity-primary-card--featured {
        grid-column: auto;
    }

    .activity-primary-card {
        padding: 1rem !important;
    }

    .learning-toolkit-panel {
        padding-inline: 0.75rem;
    }
}

.login-card {
    border-radius: 22px;
    padding: clamp(1.5rem, 4vw, 2.75rem);
}

.login-card h2,
.login-step h2,
.results-card h2 {
    font-family: var(--font-display) !important;
    color: var(--ink) !important;
    letter-spacing: 0;
}

.mission-control-header h2,
.submissions-header h2,
.progress-card-title,
.quiz-interface h2#quiz-title,
#activity-greeting {
    font-family: var(--font-heading) !important;
    color: var(--ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    animation: none !important;
}

.login-step-subtitle,
.form-group label,
.a11y-panel-title,
.pq-explanation-header,
.view-details,
.quiz-status.available,
#user-display-name {
    color: var(--accent-bright) !important;
}

input,
select,
textarea,
.form-group input,
.form-group select,
.alias-search-box input,
.written-answer,
.rte-editor.written-answer,
.inline-choice-select,
.mp-written,
#scratchpad-textarea,
#retake-assignment-dropdown,
#retake-other-text,
#retake-reason-select,
#retake-reason-other-text,
#retake-study-time,
#retake-reflection,
#progress-period-filter {
    background: var(--portal-input) !important;
    color: var(--ink) !important;
    border: 1px solid var(--portal-line-strong) !important;
    caret-color: var(--accent-bright);
}

input::placeholder,
textarea::placeholder,
.rte-editor.written-answer:empty::before {
    color: var(--muted) !important;
}

.form-group input:focus,
.form-group select:focus,
.alias-search-box input:focus,
.written-answer:focus,
.rte-editor.written-answer:focus,
textarea:focus,
select:focus {
    background: rgba(7, 11, 24, 0.94) !important;
    border-color: var(--portal-focus) !important;
}

.btn-primary,
.btn-nav.btn-primary,
.btn-submissions,
.period-btn:hover,
.a11y-switch-input:checked + .a11y-switch,
#return-to-home,
#retake-form-submit-btn,
#do-now-submit-btn,
#view-toggle-assessments {
    background: var(--accent) !important;
    color: var(--paper) !important;
    border-color: var(--accent-bright) !important;
    box-shadow: 0 0 24px rgba(139, 135, 244, 0.30) !important;
}

.btn-primary:hover,
.btn-nav.btn-primary:hover,
.btn-submissions:hover,
#retake-form-submit-btn:hover,
#do-now-submit-btn:hover {
    background: var(--accent-bright) !important;
    color: var(--paper) !important;
}

.period-btn,
.alias-btn,
.pin-key,
.answer-option,
.rte-toolbar,
.btn-back,
.btn-nav,
.quiz-status,
.practice-stat-card,
.practice-q-card,
.pq-full-question,
.pq-written-response,
.pq-explanation-card,
.pq-key-concept,
.survey-question-wrapper,
.survey-transition,
.retake-type-btn,
#view-toggle-wrapper,
#do-now-banner,
#retake-scholar-info,
#question-container,
#question-map-container .question-map-dot,
#donow-today-card > *,
#donow-retakes-list > *,
#donow-history-list > *,
#retake-my-requests-list > *,
#progress-submissions-list > *,
#past-feedback-container > *,
#next-steps-container > *,
#weak-areas-container > * {
    background: rgba(16, 22, 45, 0.72) !important;
    color: var(--ink-2) !important;
    border-color: var(--portal-line) !important;
}

.period-btn:hover,
.alias-btn:hover,
.pin-key:hover,
.answer-option:hover,
.btn-back:hover,
.btn-nav:hover:not(:disabled),
.rte-btn:hover {
    background: rgba(139, 135, 244, 0.14) !important;
    color: var(--ink) !important;
    border-color: var(--portal-line-strong) !important;
}

.answer-option.selected,
.survey-option.selected,
.retake-type-btn.active,
.question-map-dot.current {
    background: rgba(139, 135, 244, 0.22) !important;
    border-color: var(--accent-bright) !important;
    color: var(--ink) !important;
}

.question-text,
.answer-text,
.quiz-name,
.submission-title,
.result-value,
.practice-stat-card .stat-value,
.pq-full-question,
.pq-answer-text,
.weak-area-topic,
.survey-transition-text,
.survey-question-text,
.hot-text-unit,
.katex,
.katex * {
    color: var(--ink) !important;
    -webkit-text-fill-color: currentColor !important;
}

.quiz-date,
.result-label,
.submission-meta,
.loading-submissions,
.error-state,
.pq-question-label,
.pq-question-preview,
.pq-written-response .pq-answer-label,
.pq-written-response .pq-answer-text,
.pq-explanation-text,
.survey-transition-subtext,
.survey-encouragement,
.weak-area-pct,
#progress-filter-summary,
#donow-history-list,
#retake-my-requests-list,
#scratchpad-status,
#scratchpad-count {
    color: var(--ink-2) !important;
}

.quiz-badge,
.quiz-number,
.quiz-student-badge,
.status-badge,
.practice-results-banner {
    background: rgba(139, 135, 244, 0.16) !important;
    color: var(--accent-bright) !important;
    border: 1px solid var(--portal-line-strong) !important;
}

.pin-dot {
    border-color: var(--portal-line-strong) !important;
}

.pin-dot.filled {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 14px rgba(227, 182, 92, 0.42) !important;
}

.pin-dot.error,
.login-error-msg,
.btn-emergency,
.pq-status-icon.incorrect,
.pq-points-badge.incorrect,
.pq-answer-box.student-answer,
.timer-toast-critical,
.timer-toast-expired {
    color: var(--portal-danger) !important;
    border-color: rgba(255, 155, 155, 0.45) !important;
}

.btn-emergency {
    background: rgba(255, 155, 155, 0.16) !important;
}

.pq-status-icon.correct,
.pq-status-icon.excellent,
.pq-points-badge.correct,
.pq-points-badge.excellent,
.pq-answer-box.correct-answer,
.pq-answer-box.student-answer.is-correct,
.status-badge.graded,
.survey-option.selected {
    background: rgba(79, 216, 176, 0.13) !important;
    color: #9AF2D8 !important;
    border-color: rgba(79, 216, 176, 0.42) !important;
}

.pq-answer-box.student-answer,
.pq-points-badge.incorrect,
.pq-status-icon.incorrect {
    background: rgba(255, 155, 155, 0.13) !important;
}

.pq-answer-box.student-answer .pq-answer-label,
.pq-answer-box.student-answer .pq-answer-text {
    color: #FFC3C3 !important;
}

.pq-answer-box.correct-answer .pq-answer-label,
.pq-answer-box.correct-answer .pq-answer-text,
.pq-answer-box.student-answer.is-correct .pq-answer-label,
.pq-answer-box.student-answer.is-correct .pq-answer-text {
    color: #9AF2D8 !important;
}

.status-badge.pending,
.pq-points-badge.partial,
.pq-status-icon.partial,
.timer-toast-warning,
.quiz-timer.timer-warning {
    background: rgba(227, 182, 92, 0.14) !important;
    color: #F0CE8A !important;
    border-color: rgba(227, 182, 92, 0.42) !important;
}

.quiz-timer {
    background: rgba(7, 11, 24, 0.86) !important;
    color: var(--c-alg1) !important;
    border-color: rgba(110, 168, 255, 0.45) !important;
}

.quiz-timer.timer-critical {
    background: rgba(255, 155, 155, 0.13) !important;
    color: #FFC3C3 !important;
    border-color: rgba(255, 155, 155, 0.52) !important;
}

.progress-bar,
.weak-area-bar,
.pq-meter-bar,
.practice-score-ring .ring-bg {
    background: rgba(7, 11, 24, 0.78) !important;
}

.progress-fill {
    background: linear-gradient(90deg, var(--accent), var(--c-alg1)) !important;
}

.a11y-fab,
#scratchpad-fab {
    background: var(--accent) !important;
    color: var(--paper) !important;
    border: 1px solid var(--accent-bright) !important;
    box-shadow: 0 0 26px rgba(139, 135, 244, 0.34) !important;
}

.a11y-action-btn,
.a11y-panel-close,
.rte-btn {
    background: rgba(7, 11, 24, 0.70) !important;
    color: var(--ink-2) !important;
    border-color: var(--portal-line) !important;
}

.a11y-fab-dot {
    background: var(--gold) !important;
    border-color: var(--paper) !important;
}

.a11y-switch {
    background: rgba(7, 11, 24, 0.80) !important;
    border: 1px solid var(--portal-line-strong);
}

.a11y-switch::after {
    background: var(--ink) !important;
}

.stt-indicator {
    background: var(--portal-glass-strong) !important;
    color: var(--ink) !important;
    border: 1px solid var(--portal-line-strong);
}

.stt-pulse {
    background: var(--c-geo) !important;
}

.footer {
    background: rgba(7, 11, 24, 0.68);
    border-top: 1px solid var(--portal-line);
}

/* Advanced scholar modules mount after the main stylesheet and were authored
   as stand-alone light pages. Keep their original internal layouts, but give
   every module one intentional Fable-dark surface so headers and empty states
   no longer float directly on the portal grid. */
.student-feature-view {
    width: min(100% - 2rem, 960px);
    margin: 0 auto 2rem;
}

.student-feature-view > :first-child {
    box-sizing: border-box;
    background: var(--portal-glass-strong) !important;
    border: 1px solid var(--portal-line-strong) !important;
    border-radius: 20px;
    padding: clamp(20px, 3vw, 32px) !important;
    box-shadow: var(--glass-shadow), 0 18px 48px rgba(2, 6, 23, 0.32);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.student-feature-view :is(.mm-title, .pr-title, .sr-title, .tl-title, .st-title, .gl-title, .cm-title),
.student-feature-view :is(.mm-empty, .pr-empty, .sr-empty, .sr-done, .tl-empty, .gl-empty) h3,
#student-view-explain > .ex-wrap > h2 {
    color: var(--ink) !important;
    -webkit-text-fill-color: currentColor !important;
}

.student-feature-view :is(.mm-sub, .pr-sub, .sr-sub, .tl-sub, .st-sub, .gl-sub, .cm-sub),
.student-feature-view :is(.mm-empty, .pr-empty, .sr-empty, .sr-done, .tl-empty, .gl-empty) p,
#student-view-explain > .ex-wrap > p {
    color: var(--ink-2) !important;
    -webkit-text-fill-color: currentColor !important;
}

.student-feature-view :is(.mm-empty, .pr-empty, .sr-empty, .sr-done, .tl-empty, .gl-empty) {
    background: rgba(7, 11, 24, 0.56) !important;
    border: 1px solid var(--portal-line) !important;
    border-radius: 16px;
    padding: clamp(28px, 5vw, 48px) 20px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

@media (max-width: 680px) {
    .student-feature-view {
        width: calc(100% - 1rem);
        margin-bottom: 1.25rem;
    }

    .student-feature-view > :first-child {
        border-radius: 16px;
        padding: 18px 14px !important;
    }
}

#portal-version-footer {
    background: rgba(7, 11, 24, 0.92) !important;
    color: var(--muted) !important;
    border-color: var(--portal-line) !important;
}

body [style*="background:#1e293b"],
body [style*="background: #1e293b"],
body [style*="background:#0f172a"],
body [style*="background: #0f172a"],
body [style*="background:rgba(15,23,42"],
body [style*="background: rgba(15,23,42"],
body [style*="background:rgba(255,255,255"],
body [style*="background: rgba(255,255,255"] {
    background: var(--portal-glass) !important;
}

body [style*="color:#64748b"],
body [style*="color: #64748b"],
body [style*="color:#94a3b8"],
body [style*="color: #94a3b8"],
body [style*="color:#9ca3af"],
body [style*="color: #9ca3af"] {
    color: var(--ink-2) !important;
}

body [style*="color:#e2e8f0"],
body [style*="color: #e2e8f0"],
body [style*="color:#f1f5f9"],
body [style*="color: #f1f5f9"],
body [style*="color:#f8fafc"],
body [style*="color: #f8fafc"],
body [style*="color:#fff"],
body [style*="color: #fff"] {
    color: var(--ink) !important;
}

body.theme-light-text .quiz-option,
body.theme-light-text .quiz-header {
    color: var(--ink) !important;
}

body.theme-has-bg-image::before {
    background: rgba(5, 7, 15, 0.72) !important;
}

body.high-contrast {
    background: #05070F !important;
    color: #FFFFFF !important;
}

body.high-contrast .hero-header,
body.high-contrast .login-card,
body.high-contrast .question-container,
body.high-contrast .quiz-interface,
body.high-contrast .results-card,
body.high-contrast .user-info-bar,
body.high-contrast .assessment-card,
body.high-contrast .quiz-card,
body.high-contrast .progress-card,
body.high-contrast .a11y-panel,
body.high-contrast .answer-option,
body.high-contrast .period-btn,
body.high-contrast .alias-btn,
body.high-contrast .pin-key {
    background: #070B18 !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
}

body.high-contrast input,
body.high-contrast select,
body.high-contrast textarea,
body.high-contrast .written-answer,
body.high-contrast .rte-editor.written-answer {
    background: #05070F !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
}

body.high-contrast button:focus-visible,
body.high-contrast input:focus-visible,
body.high-contrast select:focus-visible,
body.high-contrast textarea:focus-visible,
body.high-contrast .rte-editor:focus-visible {
    outline-color: #F0CE8A !important;
    box-shadow: 0 0 0 6px rgba(240, 206, 138, 0.24) !important;
}

body.high-contrast .btn-primary,
body.high-contrast .btn-nav.btn-primary,
body.high-contrast .btn-submissions,
body.high-contrast .a11y-fab,
body.high-contrast #return-to-home {
    background: #F0CE8A !important;
    color: #05070F !important;
    border-color: #FFFFFF !important;
}

body.high-contrast .answer-option.selected,
body.high-contrast .question-map-dot.current {
    background: #10162D !important;
    color: #F0CE8A !important;
    border-color: #F0CE8A !important;
}

body.high-contrast .pq-status-icon.correct,
body.high-contrast .pq-points-badge.correct,
body.high-contrast .pq-answer-box.correct-answer,
body.high-contrast .pq-answer-box.student-answer.is-correct {
    background: rgba(79, 216, 176, 0.22) !important;
    color: #B7FFE8 !important;
    border-color: #B7FFE8 !important;
}

body.high-contrast .pq-status-icon.incorrect,
body.high-contrast .pq-points-badge.incorrect,
body.high-contrast .pq-answer-box.student-answer:not(.is-correct),
body.high-contrast .login-error-msg {
    background: rgba(255, 155, 155, 0.20) !important;
    color: #FFD4D4 !important;
    border-color: #FFD4D4 !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

@media (max-width: 640px) {
    .login-card,
    .quiz-interface,
    .results-card {
        border-radius: 16px;
    }

    .hero-title {
        font-size: clamp(2.25rem, 12vw, 3.5rem) !important;
    }
}