/* Additive display theme. Existing light colors and question/brand pixels stay intact. */
#topbar.sty-display-topbar {
  grid-template-columns: 44px minmax(0, 1fr) auto 44px;
  column-gap: 8px;
}
#topbar.sty-display-topbar #backButton { grid-column: 1; grid-row: 1; }
#topbar.sty-display-topbar #topbarTitle { grid-column: 2; grid-row: 1; }
#topbar.sty-display-topbar #styDisplayToggle { grid-column: 3; grid-row: 1; }
#topbar.sty-display-topbar #profileShortcut { grid-column: 4; grid-row: 1; }
.sty-display-toggle {
  min-width: 76px;
  min-height: 44px;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid #8aafd8;
  border-radius: 12px;
  color: #194477;
  background: #eef5fd;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.sty-display-toggle svg { width: 18px; height: 18px; flex: none; }
.sty-display-toggle:active { background: #dceafa; }
.sty-display-toggle:focus-visible { outline: 3px solid #176fe5; outline-offset: 2px; }
.sty-display-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html[data-sty-display='night'] {
  color-scheme: dark;
  --sty-canvas: #202628;
  --sty-surface: #2a3234;
  --sty-raised: #323c3f;
  --sty-inset: #242d30;
  --sty-brand-surface: #293d50;
  --sty-selected-surface: #293f51;
  --sty-success-surface: #263c32;
  --sty-error-surface: #443034;
  --sty-warning-surface: #43392b;
  --sty-purple-surface: #383443;
  --sty-text: #e5e1d6;
  --sty-muted: #b8beb6;
  --sty-faint: #a9b3ae;
  --sty-accent: #91b4d1;
  --sty-accent-strong: #9fc6e6;
  --sty-on-accent: #1e292f;
  --sty-success: #9ac6a5;
  --sty-on-success: #1f3025;
  --sty-error: #e3a0a0;
  --sty-on-error: #362124;
  --sty-warning: #d9bd89;
  --sty-purple: #c0b0da;
  --sty-control-border: #81908a;
  --sty-divider: #4a5959;
  --sty-focus: #b8d1e2;
  --sty-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  --navy-950: var(--sty-text);
  --navy-900: var(--sty-text);
  --navy-800: var(--sty-accent);
  --blue-600: var(--sty-accent);
  --blue-700: var(--sty-accent);
  --blue-100: var(--sty-selected-surface);
  --sky-500: var(--sty-accent);
  --orange-500: var(--sty-warning);
  --green-600: var(--sty-success);
  --red-600: var(--sty-error);
  --ink: var(--sty-text);
  --muted: var(--sty-muted);
  --line: var(--sty-divider);
  --surface: var(--sty-surface);
  --canvas: var(--sty-canvas);
  --shadow: var(--sty-shadow);
  background: var(--sty-canvas);
}

html[data-sty-display='night'] :is(body, .app-shell) {
  color: var(--sty-text);
  background: var(--sty-canvas);
}
html[data-sty-display='night'] .app-shell {
  box-shadow: 0 0 0 1px var(--sty-divider), 0 18px 70px rgba(0, 0, 0, .18);
}
html[data-sty-display='night'] :is(.topbar, .bottom-nav, .practice-bar, .exam-status) {
  color: var(--sty-text);
  background: var(--sty-surface);
  border-color: var(--sty-divider);
  box-shadow: var(--sty-shadow);
}
html[data-sty-display='night'] .sty-display-toggle {
  color: var(--sty-accent);
  background: var(--sty-inset);
  border-color: var(--sty-control-border);
}
html[data-sty-display='night'] .sty-display-toggle[aria-pressed='true'] {
  color: var(--sty-text);
  background: var(--sty-selected-surface);
  border-color: var(--sty-accent);
}
html[data-sty-display='night'] .sty-display-toggle:active { background: var(--sty-raised); }
html[data-sty-display='night'] :is(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--sty-focus);
  outline-offset: 3px;
}
html[data-sty-display='night'] .practice-count-options input:focus-visible + span {
  outline: 3px solid var(--sty-focus);
  outline-offset: 3px;
}
html[data-sty-display='night'] .skip-link {
  color: var(--sty-on-accent);
  background: var(--sty-accent-strong);
}
html[data-sty-display='night'] :is(a, .text-action) { color: var(--sty-accent); }
html[data-sty-display='night'] :is(.icon-button, .nav-item) { color: var(--sty-muted); }
html[data-sty-display='night'] .topbar .icon-button { color: var(--sty-text); }
html[data-sty-display='night'] :is(.icon-button:active, .nav-item:active) { background: var(--sty-selected-surface); }
html[data-sty-display='night'] .nav-item[aria-current='page'] {
  color: var(--sty-accent-strong);
  background: var(--sty-selected-surface);
}
html[data-sty-display='night'] :is(.desktop-nav-brand, .desktop-nav-note) { border-color: var(--sty-divider); }
html[data-sty-display='night'] .desktop-nav-brand strong { color: var(--sty-text); }
html[data-sty-display='night'] :is(.desktop-nav-brand small, .desktop-nav-note) { color: var(--sty-muted); }

/* Surfaces used by ordinary practice, history papers, mock exams and account dialogs. */
html[data-sty-display='night'] :is(
  .bank-card, .stat-strip, .module-card, .question-card, .option,
  .list-card, .list-row, .wrong-row, .profile-card, .weak-item,
  .training-size-option, .practice-mode-choice, .practice-count-options span,
  .empty, .question-number, .paper-score-list, .paper-score-row,
  .mock-card, .breakdown-list, .mock-review-card, .mock-review-option,
  .learning-card, .learning-tabs button, .scope-tab, .wrong-practice-choice
) {
  color: var(--sty-text);
  background: var(--sty-surface);
  border-color: var(--sty-divider);
  box-shadow: none;
}
html[data-sty-display='night'] :is(
  .scope-tab, .option, .question-number, .training-size-option,
  .practice-mode-choice, .practice-count-options span, .wrong-practice-choice,
  .learning-tabs button, .mock-review-filter
) { border-color: var(--sty-control-border); }
html[data-sty-display='night'] :is(
  .bank-card.common, .bank-quick-card, .bank-quick-memory, .mock-home-card,
  .home-release-announcement, .mock-resume-card, .home-resume-card,
  .practice-resume-status, .memory-start-option, .guest-auth-panel,
  .recommendation-summary, .training-size-option.all, .practice-mode-choice.timed,
  .completion-timing, .learning-entry, .learning-card.official,
  .wrong-practice-choice.recommended
) {
  color: var(--sty-text);
  background: var(--sty-selected-surface);
  border-color: var(--sty-accent);
  box-shadow: none;
}
html[data-sty-display='night'] :is(
  .hero, .history-card, .bank-summary, .entitlement, .analysis-hero,
  .paper-score-hero, .result-hero, .learning-hero, .practice-timer-status
) {
  color: var(--sty-text);
  background: var(--sty-brand-surface);
  box-shadow: var(--sty-shadow);
}
html[data-sty-display='night'] :is(.learning-hero.culture, .learning-entry.culture-entry) {
  color: var(--sty-text);
  background: var(--sty-purple-surface);
  border-color: var(--sty-purple);
}
html[data-sty-display='night'] :is(.hero small, .hero p, .hero-progress,
  .history-card span, .bank-summary span, .entitlement span, .analysis-hero p,
  .paper-score-hero p, .result-hero small, .learning-hero p,
  .practice-timer-status small, .practice-timer-status em,
  .learning-hero > span, .learning-hero > div span) {
  color: var(--sty-muted);
  opacity: 1;
}
html[data-sty-display='night'] :is(.hero-progress strong, .practice-timer-status strong) { color: var(--sty-text); }
html[data-sty-display='night'] .history-count { color: var(--sty-warning); }
html[data-sty-display='night'] :is(.bank-card.common .common-mark, .bank-quick-icon,
  .mock-home-icon, .home-release-icon, .memory-start-icon) {
  color: var(--sty-accent-strong);
  background: var(--sty-brand-surface);
  box-shadow: none;
}
html[data-sty-display='night'] .bank-quick-memory .bank-quick-icon {
  color: var(--sty-success);
  background: var(--sty-success-surface);
}
html[data-sty-display='night'] :is(.mini-progress, .progress-track) { background: var(--sty-divider); }
html[data-sty-display='night'] .module-card { --sty-module: var(--sty-accent); }
html[data-sty-display='night'] .module-card[style*='#159bd7'] { --sty-module: var(--sty-accent-strong); }
html[data-sty-display='night'] .module-card[style*='#7656c9'],
html[data-sty-display='night'] .module-card[style*='#4059ad'] { --sty-module: var(--sty-purple); }
html[data-sty-display='night'] .module-card[style*='#16845b'] { --sty-module: var(--sty-success); }
html[data-sty-display='night'] .module-card[style*='#ec7b25'],
html[data-sty-display='night'] .module-card[style*='#b57a12'] { --sty-module: var(--sty-warning); }
html[data-sty-display='night'] .module-card[style*='#cf3e44'] { --sty-module: var(--sty-error); }
html[data-sty-display='night'] .module-card::before { background: var(--sty-module); }
html[data-sty-display='night'] .mini-progress span { background: var(--sty-module, var(--sty-accent)); }
html[data-sty-display='night'] .progress-track span { background: var(--sty-accent); }

/* Filled controls use dark ink on the softer blue, green and red fills. */
html[data-sty-display='night'] :is(.button-primary, .button-light) {
  color: var(--sty-on-accent);
  background: var(--sty-accent);
  border-color: var(--sty-accent);
}
html[data-sty-display='night'] .button-outline {
  color: var(--sty-accent);
  background: transparent;
  border-color: var(--sty-accent);
}
html[data-sty-display='night'] .button-quiet {
  color: var(--sty-accent);
  background: var(--sty-selected-surface);
  border-color: var(--sty-accent);
}
html[data-sty-display='night'] .button-danger {
  color: var(--sty-error);
  background: var(--sty-error-surface);
  border-color: var(--sty-error);
}
html[data-sty-display='night'] :is(.scope-tab[aria-selected='true'],
  .learning-tabs button[aria-selected='true'], .mock-review-filter.is-active,
  .practice-count-options input:checked + span) {
  color: var(--sty-on-accent);
  background: var(--sty-accent);
  border-color: var(--sty-accent);
}
html[data-sty-display='night'] .wrong-practice-choice strong span {
  color: var(--sty-on-accent);
  background: var(--sty-accent);
}
html[data-sty-display='night'] .button.is-loading { color: transparent; }
html[data-sty-display='night'] .button.is-loading::after { color: var(--sty-on-accent); }
html[data-sty-display='night'] :is(.button-outline, .button-quiet).is-loading::after { color: var(--sty-accent); }
html[data-sty-display='night'] .button-danger.is-loading::after { color: var(--sty-error); }

html[data-sty-display='night'] :is(.tag, .mock-meta span, .mock-sections span, .list-icon) {
  color: var(--sty-accent);
  background: var(--sty-selected-surface);
}
html[data-sty-display='night'] :is(.home-release-announcement small,
  .mock-resume-card span, .home-resume-card span, .breakdown-row b,
  .learning-entry-kicker, .learning-card details small a,
  .practice-resume-status strong, .learning-card-meta span,
  .material-group-status span) { color: var(--sty-accent); }
html[data-sty-display='night'] .culture-entry .learning-entry-kicker { color: var(--sty-purple); }
html[data-sty-display='night'] :is(.chevron, .bank-quick-card .chevron,
  .home-release-announcement > .chevron, .learning-entry > .chevron,
  .paper-score-row .chevron, .learning-card details summary::after,
  .empty svg) { color: var(--sty-faint); }
html[data-sty-display='night'] :is(.list-row-meta time, .wrong-summary,
  .guest-auth-copy span, .learning-card-meta, .learning-card details small,
  .paper-score-copy em, .legal-note, .question-image-status,
  .question-image-hint, .memory-mode-note small) { color: var(--sty-muted); }
html[data-sty-display='night'] .wrong-review-line { color: var(--sty-muted) !important; }

/* Readable material and HTML tables adapt; embedded diagrams keep original pixels. */
html[data-sty-display='night'] .material {
  color: var(--sty-text);
  background: var(--sty-inset);
  border-left-color: var(--sty-accent);
}
html[data-sty-display='night'] .material-group-status {
  color: var(--sty-text);
  background: var(--sty-selected-surface);
  border-color: var(--sty-accent);
}
html[data-sty-display='night'] .material-group-status small { color: var(--sty-muted); }
html[data-sty-display='night'] .material-table-scroll {
  color: var(--sty-text);
  background: var(--sty-surface);
  border-color: var(--sty-control-border);
}
html[data-sty-display='night'] .material-table :is(th, td) { border-color: var(--sty-control-border); }
html[data-sty-display='night'] .material-table th {
  color: var(--sty-text);
  background: var(--sty-brand-surface);
}
html[data-sty-display='night'] .material-table td {
  color: var(--sty-text);
  background: var(--sty-surface);
}
html[data-sty-display='night'] .source-pages { border-color: var(--sty-divider); }
html[data-sty-display='night'] :is(.source-pages summary, .source-page-link) { color: var(--sty-accent); }
html[data-sty-display='night'] :is(.question-image-wrap, .source-page-item) { color: var(--sty-text); }
html[data-sty-display='night'] .question-image { border-color: var(--sty-control-border); }
html[data-sty-display='night'] .image-retry {
  color: var(--sty-accent);
  background: var(--sty-selected-surface);
  border-color: var(--sty-accent);
}
html[data-sty-display='night'] .question-image-status.is-error { color: var(--sty-error); }

html[data-sty-display='night'] :is(.option-key, .mock-review-option span) {
  color: var(--sty-text);
  border-color: var(--sty-control-border);
}
html[data-sty-display='night'] :is(.option.selected, .mock-review-option.selected) {
  color: var(--sty-text);
  background: var(--sty-selected-surface);
  border-color: var(--sty-accent);
}
html[data-sty-display='night'] .option.selected .option-key,
html[data-sty-display='night'] .mock-review-option.selected > span,
html[data-sty-display='night'] .question-number.answered {
  color: var(--sty-on-accent);
  background: var(--sty-accent);
  border-color: var(--sty-accent);
}
html[data-sty-display='night'] :is(.option.correct, .mock-review-option.correct) {
  color: var(--sty-text);
  background: var(--sty-success-surface);
  border-color: var(--sty-success);
}
html[data-sty-display='night'] .option.correct .option-key,
html[data-sty-display='night'] .mock-review-option.correct > span,
html[data-sty-display='night'] .question-number.correct {
  color: var(--sty-on-success);
  background: var(--sty-success);
  border-color: var(--sty-success);
}
html[data-sty-display='night'] :is(.option.wrong, .mock-review-option.wrong) {
  color: var(--sty-text);
  background: var(--sty-error-surface);
  border-color: var(--sty-error);
}
html[data-sty-display='night'] .option.wrong .option-key,
html[data-sty-display='night'] .mock-review-option.wrong > span,
html[data-sty-display='night'] .question-number.wrong {
  color: var(--sty-on-error);
  background: var(--sty-error);
  border-color: var(--sty-error);
}
html[data-sty-display='night'] .question-number.current { outline: 2px solid var(--sty-focus); outline-offset: 2px; }
html[data-sty-display='night'] .answer-panel {
  color: var(--sty-text);
  background: var(--sty-inset);
}
html[data-sty-display='night'] .answer-panel.correct { background: var(--sty-success-surface); }
html[data-sty-display='night'] .answer-panel.wrong { background: var(--sty-error-surface); }
html[data-sty-display='night'] .answer-panel.reference { background: var(--sty-selected-surface); }
html[data-sty-display='night'] :is(.answer-panel p, .mock-review-option p, .learning-card details p) { color: var(--sty-text); }
html[data-sty-display='night'] .answer-panel .answer-key { color: var(--sty-accent-strong); }
html[data-sty-display='night'] .answer-panel.correct .answer-title { color: var(--sty-success); }
html[data-sty-display='night'] .answer-panel.wrong .answer-title { color: var(--sty-error); }

html[data-sty-display='night'] :is(.access-note, .memory-review, .favorite-button.active) {
  color: var(--sty-warning);
  background: var(--sty-warning-surface);
  border-color: var(--sty-warning);
}
html[data-sty-display='night'] :is(.online-badge, .memory-mode-note, .practice-mode-choice.memory) {
  color: var(--sty-success);
  background: var(--sty-success-surface);
  border-color: var(--sty-success);
}
html[data-sty-display='night'] .online-dot { background: var(--sty-success); box-shadow: none; }
html[data-sty-display='night'] .memory-mode-note > span {
  color: var(--sty-on-success);
  background: var(--sty-success);
}
html[data-sty-display='night'] .memory-correct-label {
  color: var(--sty-success);
  background: var(--sty-success-surface);
  border: 1px solid var(--sty-success);
}
html[data-sty-display='night'] .memory-answer { background: var(--sty-selected-surface); }
html[data-sty-display='night'] .memory-answer .answer-title { color: var(--sty-accent-strong); }
html[data-sty-display='night'] :is(.wrong-review-status.level-0, .mock-review-head span.is-wrong) {
  color: var(--sty-error);
  background: var(--sty-error-surface);
}
html[data-sty-display='night'] .wrong-review-status.level-1 {
  color: var(--sty-warning);
  background: var(--sty-warning-surface);
}
html[data-sty-display='night'] :is(.wrong-review-status.level-2, .mock-review-head span.is-reference) {
  color: var(--sty-accent);
  background: var(--sty-selected-surface);
}
html[data-sty-display='night'] :is(.wrong-review-status.level-3, .mock-review-head span.is-correct) {
  color: var(--sty-success);
  background: var(--sty-success-surface);
}
html[data-sty-display='night'] .mock-review-head span.is-unanswered {
  color: var(--sty-muted);
  background: var(--sty-inset);
}
html[data-sty-display='night'] .wrong-summary { background: var(--sty-inset); }
html[data-sty-display='night'] .wrong-remove {
  color: var(--sty-error);
  background: var(--sty-surface);
}
html[data-sty-display='night'] .wrong-remove:active { background: var(--sty-error-surface); }
html[data-sty-display='night'] .exam-timer { color: var(--sty-accent-strong); }
html[data-sty-display='night'] .exam-timer.warning { color: var(--sty-error); }

html[data-sty-display='night'] .field {
  color: var(--sty-text);
  background: var(--sty-inset);
  border-color: var(--sty-control-border);
}
html[data-sty-display='night'] .field::placeholder { color: var(--sty-faint); opacity: 1; }
html[data-sty-display='night'] :is(input[type='checkbox'], input[type='radio']) { accent-color: var(--sty-accent); }
html[data-sty-display='night'] :is(.modal, .modal-head, .modal-body) {
  color: var(--sty-text);
  background: var(--sty-surface);
}
html[data-sty-display='night'] .modal { border: 1px solid var(--sty-control-border); box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
html[data-sty-display='night'] .modal::backdrop { background: rgba(10, 16, 18, .76); }
html[data-sty-display='night'] .modal-question-preview { color: var(--sty-text); background: var(--sty-inset); }
html[data-sty-display='night'] :is(.modal-notice, .fill-error) {
  color: var(--sty-error);
  background: var(--sty-error-surface);
  border-color: var(--sty-error);
}
/* These two validation errors are the only inline text colors in the entry bundle. */
html[data-sty-display='night'] :is(#newPasswordError, #passwordConfirmError) { color: var(--sty-error) !important; }
html[data-sty-display='night'] .toast {
  color: var(--sty-text);
  background: var(--sty-inset);
  border: 1px solid var(--sty-control-border);
}
html[data-sty-display='night'] .learning-card details p { border-color: var(--sty-divider); }

/* Preserve keyboard/pressed feedback on dark surfaces without changing layout. */
html[data-sty-display='night'] :is(.option:active, .memory-option:active,
  .list-row:active, .paper-score-row:active, .wrong-practice-choice:active,
  .training-size-option:active, .memory-start-option:active) { background: var(--sty-raised); }
html[data-sty-display='night'] :is(.option.selected:active, .mock-review-option.selected:active) { background: var(--sty-selected-surface); }
html[data-sty-display='night'] :is(.option.correct:active, .memory-option.correct:active) { background: var(--sty-success-surface); }
html[data-sty-display='night'] .option.wrong:active { background: var(--sty-error-surface); }

@media (hover: hover) {
  .sty-display-toggle:hover { background: #dceafa; border-color: #176fe5; }
  html[data-sty-display='night'] :is(.sty-display-toggle:hover, .icon-button:hover, .nav-item:hover,
    .list-row:hover, .paper-score-row:hover, .practice-mode-choice:hover) { background: var(--sty-raised); }
  html[data-sty-display='night'] :is(.bank-card:hover, .module-card:hover,
    .practice-mode-choice:hover) { border-color: var(--sty-accent); box-shadow: none; }
  html[data-sty-display='night'] .bottom-nav .nav-item:hover { color: var(--sty-muted); }
  html[data-sty-display='night'] .bottom-nav .nav-item[aria-current='page']:hover {
    color: var(--sty-accent-strong);
    background: var(--sty-selected-surface);
  }
}
@media (min-width: 1100px) {
  html[data-sty-display='night'] .bottom-nav { background: var(--sty-inset); }
  html[data-sty-display='night'] .bottom-nav .nav-item[aria-current='page'] { box-shadow: inset 3px 0 0 var(--sty-accent); }
}
@media (max-width: 350px) {
  #topbar.sty-display-topbar { grid-template-columns: 44px minmax(0, 1fr) auto 44px; column-gap: 8px; }
  #topbar.sty-display-topbar .icon-button { width: 44px; height: 44px; }
  .sty-display-toggle { min-width: 72px; padding-left: 6px; padding-right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .sty-display-toggle { transition: none; }
}