/* Semantic screen palette. Component fallbacks retain the original light
   appearance, including administrator branding. Print/SVG/PDF colors are not
   inverted. Keep the two dark entry points identical for the no-JS fallback. */
@media screen {
  :root { color-scheme: light; }
  :root[data-theme="dark"], :root[data-theme="dark"] body {
    color-scheme: dark;
    --paper: #101827;
    --card: #172334;
    --card-bg: #172334;
    --ink: #e7edf6;
    --muted: #afbed1;
    --accent: #aacdfb;
    --accent-soft: #203754;
    --line: #34475f;
    --danger: #ffadba;
    --danger-soft: #422735;
    --muted-text: #afbed1;
    --ui-text: #e7edf6;
    --ui-muted: #afbed1;
    --ui-surface: #172334;
    --ui-surface-soft: #1c2b3f;
    --ui-border: #526985;
    --ui-accent-fill: #285589;
    --ui-danger-fill: #963247;
    --ui-ink-fill: #1c2f48;
    --surface: #172334;
    --surface-soft: #1c2b3f;
    --border: #34475f;
    --bg: #172334;
    --text: #e7edf6;
    --text-muted: #afbed1;
    --ui-brand-filter: brightness(2.3);
    --ui-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M2 2L8 8L14 2' stroke='%23AACDFB' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ui-info: #aacdfb;
    --ui-info-soft: #20334b;
    --ui-info-border: #537baa;
    --ui-success: #8ce0bb;
    --ui-success-soft: #193b32;
    --ui-success-border: #42876c;
    --ui-warning: #f6cf85;
    --ui-warning-soft: #3b3020;
    --ui-warning-border: #a58243;
    --ui-danger: #ffadba;
    --ui-danger-soft: #422735;
    --ui-danger-border: #ad6275;
    --ui-purple: #d1b9f2;
    --ui-purple-soft: #332945;
    --ui-purple-border: #846bad;
    --ui-glass: rgba(23,35,52,.96);
    --ui-overlay: rgba(23,35,52,.7);
  }
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root:not([data-theme]) body {
    color-scheme: dark;
    --paper: #101827;
    --card: #172334;
    --card-bg: #172334;
    --ink: #e7edf6;
    --muted: #afbed1;
    --accent: #aacdfb;
    --accent-soft: #203754;
    --line: #34475f;
    --danger: #ffadba;
    --danger-soft: #422735;
    --muted-text: #afbed1;
    --ui-text: #e7edf6;
    --ui-muted: #afbed1;
    --ui-surface: #172334;
    --ui-surface-soft: #1c2b3f;
    --ui-border: #526985;
    --ui-accent-fill: #285589;
    --ui-danger-fill: #963247;
    --ui-ink-fill: #1c2f48;
    --surface: #172334;
    --surface-soft: #1c2b3f;
    --border: #34475f;
    --bg: #172334;
    --text: #e7edf6;
    --text-muted: #afbed1;
    --ui-brand-filter: brightness(2.3);
    --ui-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M2 2L8 8L14 2' stroke='%23AACDFB' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ui-info: #aacdfb;
    --ui-info-soft: #20334b;
    --ui-info-border: #537baa;
    --ui-success: #8ce0bb;
    --ui-success-soft: #193b32;
    --ui-success-border: #42876c;
    --ui-warning: #f6cf85;
    --ui-warning-soft: #3b3020;
    --ui-warning-border: #a58243;
    --ui-danger: #ffadba;
    --ui-danger-soft: #422735;
    --ui-danger-border: #ad6275;
    --ui-purple: #d1b9f2;
    --ui-purple-soft: #332945;
    --ui-purple-border: #846bad;
    --ui-glass: rgba(23,35,52,.96);
    --ui-overlay: rgba(23,35,52,.7);
  }
}

/* Native controls follow the page, including Safari's date/time picker. */
select { color-scheme: inherit; }
input, select, textarea { caret-color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--ui-muted, #707989); opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ui-info, var(--accent)); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent-soft); color: var(--ink); }

/* A compact, keyboard-accessible preference menu for guests and all roles. */
.theme-menu[hidden] { display: none; }
.theme-menu > summary { gap: 8px; }
.theme-menu-icon { font-size: 20px; line-height: 1; }
.theme-options { width: 218px; }
.theme-options button {
  display: flex; width: 100%; min-height: 44px; align-items: center;
  justify-content: space-between; padding: 10px 12px;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.theme-options button:hover { background: var(--accent-soft); }
.theme-options button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.theme-options button[aria-pressed="true"]::after { content: "✓"; }
.theme-options button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Formulas use currentColor. Scientific images keep their original palette on
   white paper; never apply a blanket filter to images, canvases or MathJax. */
.problem-image, .problem-related-image img, .problem-image-option img,
.problem-content img, .problem-detail figure img, .problem-image-current img,
.problem-image-preview img, .catalog-problem-image img, .problem-preview-image img {
  background-color: #fff;
}
.vector-editor-page {
  --editor-ink: var(--ui-text, #202b3c);
  --editor-navy: var(--ui-info, #183b63);
  --editor-blue: var(--ui-info, #2c6e91);
  --editor-pale: var(--ui-info-soft, #edf3f9);
}
.vector-save-button { background: var(--ui-accent-fill, #183b63); }
.vector-stage, .vector-canvas, .vector-library-grid svg {
  color-scheme: light;
  background: #fff;
  --editor-ink: #202b3c; --editor-navy: #183b63;
  --editor-blue: #2c6e91; --editor-pale: #edf3f9;
}
.brand-letter { filter: var(--ui-brand-filter, none); }
@media (max-width: 1100px) {
  .theme-options { width: 100%; }
}
@media print {
  :root { color-scheme: light; }
  .theme-menu { display: none; }
}