/* Midnight Blue — panel appearance only. Geometry, typography and content stay
   in styles.css/mobile-ui.css. Every dark rule is screen-only and panel-scoped. */
.mk-theme-toggle svg { width: 18px; height: 18px; flex: none; }
.mk-theme-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.mk-theme-status { position: fixed; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.mk-theme-nav { margin-top: 8px; }
.mk-theme-topbar { flex: none; }
@media (max-width: 820px) { .student-shell .mk-theme-topbar { display: none; } }
@media print { .mk-theme-toggle, .mk-theme-status { display: none !important; } }

/* The incoming theme expands from the pressed switch in either direction.
   Snapshot animation leaves live questions, focus and drawing canvases intact. */
@media screen and (prefers-reduced-motion: no-preference) {
  html[data-panel-transition="reveal"]::view-transition-old(root),
  html[data-panel-transition="reveal"]::view-transition-new(root) {
    mix-blend-mode: normal;
    animation: none;
  }
  html[data-panel-transition="reveal"]::view-transition-old(root) { z-index: 1; }
  html[data-panel-transition="reveal"]::view-transition-new(root) {
    z-index: 2;
    animation: mk-theme-reveal 620ms cubic-bezier(.22, 1, .36, 1) both;
  }
  html[data-panel-transition="reveal"]::view-transition-group(root) { animation-duration: 620ms; }
  html[data-panel-transition="reveal"]::view-transition-image-pair(root) { isolation: isolate; }
  @keyframes mk-theme-reveal {
    from { clip-path: circle(0px at var(--mk-theme-x) var(--mk-theme-y)); }
    to { clip-path: circle(var(--mk-theme-radius) at var(--mk-theme-x) var(--mk-theme-y)); }
  }
}

@media screen {
  html[data-panel-theme="dark"][data-panel-active] {
    color-scheme: dark;
    --bg: #10151e;
    --panel: #181f2b;
    --card: #181f2b;
    --panel-soft: #141c27;
    --ink: #e9edf4;
    --muted: #9ba9bf;
    --line: #2a3444;
    --orange: #ffa364;
    --orange-dark: #ffc28f;
    --orange-soft: #37291f;
    --teal: #66d7bd;
    --teal-soft: #16342f;
    --green: #83d1a5;
    --green-soft: #20382d;
    --blue: #86aaff;
    --blue-soft: #202f49;
    --purple: #b8a1f4;
    --purple-soft: #302a45;
    --red: #ff929d;
    --red-soft: #3c2631;
    --yellow: #e9c77a;
    --yellow-soft: #383222;
    --pink: #eea4cb;
    --pink-soft: #3b2939;
    --shadow: 0 12px 32px rgba(3, 8, 17, .2);
    --q-ink: #e4e9f2;
    --rb-navy: #a1b7d4;
    --rb-navy-soft: #202c3e;
    --rb-paper: #141c27;
    --rb-border: #2a3444;
    --sdash-pink: #eea4cb;
    --sdash-green: #83d1a5;
    --sdash-indigo: #a5aff4;
    --sdash-slate: #9db1cb;
    --sdash-navy: #86aaff;
    --night-sidebar: #131a24;
    --night-raised: #1e2735;
    --night-line-soft: #232e3d;
    --night-orange-line: #68442c;
    --night-teal-line: #315d55;
    --night-green-line: #365c46;
    --night-blue-line: #3d527b;
    --night-purple-line: #564875;
    --night-red-line: #72434e;
    --night-yellow-line: #6a5933;
    --night-pink-line: #69455e;
    --night-focus: rgba(255, 163, 100, .22);
    --night-on-accent: #241a13;
    /* Dark label for the other light fills (teal, blue, purple, red…): ≥ 8:1. */
    --night-on-fill: #0f1520;
    /* Form-field outline: 3:1 against panel and page (WCAG 1.4.11). --line stays
       for dividers, which should recede. */
    --night-control-line: #647089;
    /* Exam kinds on the student dashboard (donut, bars, legend): eleven
       categories spread over the whole hue wheel with alternating lightness.
       Validated on --panel: every mark ≥ 4.5:1, worst pair ΔE(OKLab) ≈ 13
       normal / 7 under protan-deutan; the pastel tokens gave 0 (official =
       bank), 3.5 (strategic/plan) and 4.2 (smart/shared). Labels and counts
       stay in ink, so identity never rests on color alone. */
    --sdash-kind-smart: #9070f5;
    --sdash-kind-strategic: #09b89b;
    --sdash-kind-official: #599de7;
    --sdash-kind-hall: #b48f06;
    --sdash-kind-bank: #4bcefe;
    --sdash-kind-monthly: #d455b1;
    --sdash-kind-plan: #1ce492;
    --sdash-kind-konkur: #f85c6b;
    --sdash-kind-assigned: #ee9759;
    --sdash-kind-shared: #cbc91b;
    --sdash-kind-personal: #cfd8e5;
    background: var(--bg);
  }

  /* Chrome: quieter than the cards, with a warm active destination. */
  html[data-panel-theme="dark"][data-panel-active] body {
    --mk-ground: var(--bg); --mk-paper: var(--panel); --mk-line: var(--line); --mk-accent: var(--orange);
    background: var(--bg); color: var(--ink);
  }
  html[data-panel-theme="dark"][data-panel-active] .draw-pen-img { filter: brightness(0) invert(.8); }
  html[data-panel-theme="dark"][data-panel-active] .sidebar {
    background: rgba(19, 26, 36, .97); border-color: var(--night-line-soft);
    box-shadow: -8px 0 30px rgba(3, 8, 17, .08);
  }
  html[data-panel-theme="dark"][data-panel-active] .topbar {
    background: rgba(16, 21, 30, .92); border-color: var(--night-line-soft);
  }
  html[data-panel-theme="dark"][data-panel-active] :is(.nav-item,.nav-label) { color: var(--muted); }
  html[data-panel-theme="dark"][data-panel-active] .nav-item:hover { color: var(--ink); background: var(--night-raised); }
  html[data-panel-theme="dark"][data-panel-active] .nav-item.active {
    color: var(--orange); background: var(--orange-soft);
    box-shadow: inset 0 0 0 1px var(--night-orange-line);
  }
  html[data-panel-theme="dark"][data-panel-active] .nav-item.active::before { background: var(--orange); }
  html[data-panel-theme="dark"][data-panel-active] :is(.brand-copy,.brand-rule) { border-color: var(--line); }
  html[data-panel-theme="dark"][data-panel-active] .sidebar .brand-type { filter: brightness(0) saturate(100%) invert(86%) sepia(31%) saturate(739%) hue-rotate(333deg) brightness(103%) contrast(96%); }
  html[data-panel-theme="dark"][data-panel-active] :is(.profile-card,.topbar-icon,.icon-button,.secondary-button) {
    background: var(--panel); color: var(--ink); border-color: var(--line);
    box-shadow: 0 2px 8px rgba(3, 8, 17, .12);
  }
  html[data-panel-theme="dark"][data-panel-active] :is(.profile-card,.topbar-icon,.icon-button,.secondary-button):hover {
    background: var(--night-raised); border-color: var(--night-orange-line); color: var(--orange);
  }
  html[data-panel-theme="dark"][data-panel-active] :is(.primary-button,.sp-dark-button:not(.subtle)) {
    background: var(--orange); color: var(--night-on-accent);
    border-color: var(--orange); box-shadow: 0 5px 18px rgba(255, 163, 100, .12);
  }
  html[data-panel-theme="dark"][data-panel-active] :is(.primary-button,.sp-dark-button:not(.subtle)):hover { background: #ffb57f; color: #241a13; }
  html[data-panel-theme="dark"][data-panel-active] .shop-price-off { background: var(--orange); color: var(--night-on-accent); }
  html[data-panel-theme="dark"][data-panel-active] .danger-button { background: var(--red-soft); color: var(--red); border-color: var(--night-red-line); }
  html[data-panel-theme="dark"][data-panel-active] .topbar-wallet { color: var(--teal); background: var(--teal-soft); border-color: var(--night-teal-line); }
  html[data-panel-theme="dark"][data-panel-active] .topbar-pcredit { color: var(--orange); background: var(--orange-soft); border-color: var(--night-orange-line); }
  html[data-panel-theme="dark"][data-panel-active] .mk-theme-toggle { color: var(--orange); }

  /* Dashboard: distinct foreground cards, inset rows and calm tinted accents. */
  html[data-panel-theme="dark"][data-panel-active] :is(.panel,.sdash-chart,.sdash-col,.sdash-access,.sdash-perf,.sdash-level) {
    color: var(--ink); background: var(--panel); border-color: var(--line); box-shadow: var(--shadow);
  }
  html[data-panel-theme="dark"][data-panel-active] .sdash-access.ok {
    background: linear-gradient(110deg, #1b2b35, #19262d 65%, #1b2530); border-color: #34474b;
  }
  html[data-panel-theme="dark"][data-panel-active] :is(.sdash-row,.sdash-mini,.sdash-quota-row) { background: var(--panel-soft); border-color: var(--line); }
  html[data-panel-theme="dark"][data-panel-active] .sdash-ring-track { stroke: var(--night-raised); }
  html[data-panel-theme="dark"][data-panel-active] :is(.sdash-ring-core b,.sdash-chart h3) { color: var(--ink); }
  html[data-panel-theme="dark"][data-panel-active] .sp-command-card {
    --sp-night: #1b2933; --sp-night-soft: #202e38; --sp-orange: #ffa364; --sp-lime: #83d1a5;
    background: linear-gradient(115deg, #1b2b35, #19262d); border-color: #34474b; color: var(--ink);
  }
  html[data-panel-theme="dark"][data-panel-active] :is(.sp-command-card h2,.sp-command-card h3,.sp-command-card strong) { color: var(--ink); }

  /* Reading surfaces stay slightly darker than their surrounding question card. */
  html[data-panel-theme="dark"][data-panel-active] :is(.sq-item,.question-card,.detail-card,.qv-card) { background: var(--panel); border-color: var(--line); }
  html[data-panel-theme="dark"][data-panel-active] :is(.sq-item .sq-sheet,.er-question.detail-card,.sqf-question,.sqf-side) {
    background: var(--panel-soft); border-color: var(--night-line-soft); color: var(--q-ink);
  }
  html[data-panel-theme="dark"][data-panel-active] :is(.sq-rail,.sbank-side,.exam-filter-side) { background: var(--panel); border-color: var(--line); }
  html[data-panel-theme="dark"][data-panel-active] :is(.sq-ans-opt,.er-opt) { background: var(--panel); border-color: var(--line); color: var(--q-ink); }
  html[data-panel-theme="dark"][data-panel-active] :is(.sq-ans-opt,.er-opt):hover:not(:disabled) { background: var(--night-raised); border-color: var(--night-orange-line); }
  html[data-panel-theme="dark"][data-panel-active] :is(.sq-ans-no,.er-opt-no) { background: var(--night-raised); color: var(--muted); }
  html[data-panel-theme="dark"][data-panel-active] .sq-ans-opt.picked { background: var(--blue-soft); border-color: var(--blue); }
  html[data-panel-theme="dark"][data-panel-active] .sq-ans-opt.picked:not(.is-correct) { background: var(--red-soft); border-color: var(--night-red-line); }
  html[data-panel-theme="dark"][data-panel-active] :is(.sq-ans-opt.is-correct,.er-opt.correct) { background: var(--teal-soft); border-color: var(--teal); }
  html[data-panel-theme="dark"][data-panel-active] .sq-ans-opt.is-correct .sq-ans-no { background: var(--teal); color: #102a24; }
  html[data-panel-theme="dark"][data-panel-active] .er-opt.selected { background: var(--blue-soft); border-color: var(--blue); }
  html[data-panel-theme="dark"][data-panel-active] :is(.sq-reveal-panel,.sq-explain) { background: var(--teal-soft); border-color: var(--night-teal-line); }
  html[data-panel-theme="dark"][data-panel-active] :is(.exam-runner,.sqf-root,.print-studio) { background: var(--bg); color: var(--ink); }
  html[data-panel-theme="dark"][data-panel-active] :is(.er-head,.er-footer,.er-side,.pstudio-topbar,.pstudio-side) { background: var(--panel); border-color: var(--line); }

  /* Native controls and shared popovers keep all of their original behavior. */
  html[data-panel-theme="dark"][data-panel-active] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea,.rte-area) {
    background-color: var(--panel-soft); color: var(--ink); caret-color: var(--orange);
  }
  /* :not(:focus) leaves every component's own focus border in charge. */
  html[data-panel-theme="dark"][data-panel-active] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea,.rte-area):not(:focus) {
    border-color: var(--night-control-line);
  }
  /* Search boxes and labels that draw the field edge around a borderless input. */
  html[data-panel-theme="dark"][data-panel-active] :is([class*="search"],label):has(> :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),select,textarea)):not(:focus-within) {
    border-color: var(--night-control-line);
  }
  /* Disabled fields recede on purpose; inactive controls are exempt from 1.4.11. */
  html[data-panel-theme="dark"][data-panel-active] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea):disabled {
    border-color: var(--line); color: var(--muted);
  }
  html[data-panel-theme="dark"][data-panel-active] :is(input,textarea)::placeholder { color: #8190a6; opacity: 1; }
  html[data-panel-theme="dark"][data-panel-active] :is(input,textarea,select,.rte-area):focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--night-focus); }
  html[data-panel-theme="dark"][data-panel-active] :is(input[type="radio"],input[type="checkbox"],input[type="range"]) { accent-color: var(--orange); }
  html[data-panel-theme="dark"][data-panel-active] input:autofill { box-shadow: 0 0 0 1000px var(--night-raised) inset; -webkit-text-fill-color: var(--ink); }
  html[data-panel-theme="dark"][data-panel-active] :is(.mk-select-popover,.mk-select-list,.modal,.admin-terms-dialog,.popover,.dropdown-menu,.rte-toolbar) {
    background: var(--panel); color: var(--ink); border-color: var(--line); box-shadow: 0 20px 64px rgba(3, 8, 17, .4);
  }
  html[data-panel-theme="dark"][data-panel-active] :is(.modal-header,.modal-footer) { border-color: var(--line); background: var(--panel); }
  html[data-panel-theme="dark"][data-panel-active] :is(.mk-select-option.is-active,.mk-select-option[aria-selected="true"]) { background: var(--orange-soft); color: var(--orange); }
  html[data-panel-theme="dark"][data-panel-active] :is(.modal-backdrop,.sidebar-backdrop,.mk-mobile-backdrop) { background: rgba(4, 9, 18, .72); }
  html[data-panel-theme="dark"][data-panel-active] dialog::backdrop { background: rgba(4, 9, 18, .72); }
  html[data-panel-theme="dark"][data-panel-active] :is(.toast,.qstat-tooltip,.tm-tooltip) { background: var(--night-raised); color: var(--ink); border-color: var(--line); }

  /* Charts: their individual series colors are retained through semantic tokens. */
  html[data-panel-theme="dark"][data-panel-active] :is(.finance-chart-svg,.srep-chart,.qstat-chart,.sp-chart,.sdash) svg text { fill: var(--muted); }
  html[data-panel-theme="dark"][data-panel-active] :is(.finance-chart-svg,.srep-chart,.qstat-chart) .chart-grid { stroke: var(--line); }
  html[data-panel-theme="dark"][data-panel-active] :is(.sq-sk-line,.sq-opt-sk i) {
    background-image: linear-gradient(90deg, #1e2735 25%, #2a3647 37%, #1e2735 63%);
  }
  html[data-panel-theme="dark"][data-panel-active] ::selection { background: #43566d; color: #fff; }

  /* Mobile sheets/tab bar use the same palette, without moving any control. */
  html[data-panel-theme="dark"][data-panel-active] :is(.m-tabbar,.mk-filter-sheet,.mk-filter-trigger,.mk-filter-done,.mk-modal-sheet) {
    background: rgba(24, 31, 43, .98); border-color: var(--line); color: var(--ink);
  }
  html[data-panel-theme="dark"][data-panel-active] .m-tab { color: var(--muted); }
  html[data-panel-theme="dark"][data-panel-active] .m-tab.active { color: var(--orange); }
  html[data-panel-theme="dark"][data-panel-active] .m-tab.active svg { background: var(--orange-soft); }


  /* BEGIN authored question colors
     The editor stores inline ink as hex/rgb declarations. Match declaration
     boundaries so a background-color never masquerades as foreground ink.
     Known palette colors follow the theme; authored backgrounds and unknown
     custom inks remain light canvases. Stored HTML is never rewritten. */
  html[data-panel-theme="dark"][data-panel-active] {
    --night-rte-teal: var(--teal);
    --night-rte-green: var(--green);
    --night-rte-blue: var(--blue);
    --night-rte-purple: var(--purple);
    --night-rte-red: var(--red);
    --night-rte-amber: var(--yellow);
    --night-rte-gray: var(--muted);
    --night-rte-default: var(--q-ink);
    --night-rte-black: var(--q-ink);
  }
  :where(html[data-panel-theme="dark"][data-panel-active] :is(.sq-rich-text,.sq-ans-opt > span:not(.sq-ans-no),.er-opt > span,.rte-area,.qai-render,.qai-option > div,.qv-opts > span,.draw-question-options > div,.fml-out)) :is(
    [style^="color:#0f6f63" i],
    [style*=";color:#0f6f63" i],
    [style*="; color:#0f6f63" i],
    [style^="color: #0f6f63" i],
    [style*=";color: #0f6f63" i],
    [style*="; color: #0f6f63" i],
    [style^="color:rgb(15, 111, 99)" i],
    [style*=";color:rgb(15, 111, 99)" i],
    [style*="; color:rgb(15, 111, 99)" i],
    [style^="color: rgb(15, 111, 99)" i],
    [style*=";color: rgb(15, 111, 99)" i],
    [style*="; color: rgb(15, 111, 99)" i],
    [style^="color:rgb(15,111,99)" i],
    [style*=";color:rgb(15,111,99)" i],
    [style*="; color:rgb(15,111,99)" i],
    [style^="color: rgb(15,111,99)" i],
    [style*=";color: rgb(15,111,99)" i],
    [style*="; color: rgb(15,111,99)" i]
  ):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { color: var(--night-rte-teal) !important; }
  :where(html[data-panel-theme="dark"][data-panel-active] :is(.sq-rich-text,.sq-ans-opt > span:not(.sq-ans-no),.er-opt > span,.rte-area,.qai-render,.qai-option > div,.qv-opts > span,.draw-question-options > div,.fml-out)) :is(
    [style^="color:#2f7d3a" i],
    [style*=";color:#2f7d3a" i],
    [style*="; color:#2f7d3a" i],
    [style^="color: #2f7d3a" i],
    [style*=";color: #2f7d3a" i],
    [style*="; color: #2f7d3a" i],
    [style^="color:rgb(47, 125, 58)" i],
    [style*=";color:rgb(47, 125, 58)" i],
    [style*="; color:rgb(47, 125, 58)" i],
    [style^="color: rgb(47, 125, 58)" i],
    [style*=";color: rgb(47, 125, 58)" i],
    [style*="; color: rgb(47, 125, 58)" i],
    [style^="color:rgb(47,125,58)" i],
    [style*=";color:rgb(47,125,58)" i],
    [style*="; color:rgb(47,125,58)" i],
    [style^="color: rgb(47,125,58)" i],
    [style*=";color: rgb(47,125,58)" i],
    [style*="; color: rgb(47,125,58)" i]
  ):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { color: var(--night-rte-green) !important; }
  :where(html[data-panel-theme="dark"][data-panel-active] :is(.sq-rich-text,.sq-ans-opt > span:not(.sq-ans-no),.er-opt > span,.rte-area,.qai-render,.qai-option > div,.qv-opts > span,.draw-question-options > div,.fml-out)) :is(
    [style^="color:#1f5fa8" i],
    [style*=";color:#1f5fa8" i],
    [style*="; color:#1f5fa8" i],
    [style^="color: #1f5fa8" i],
    [style*=";color: #1f5fa8" i],
    [style*="; color: #1f5fa8" i],
    [style^="color:rgb(31, 95, 168)" i],
    [style*=";color:rgb(31, 95, 168)" i],
    [style*="; color:rgb(31, 95, 168)" i],
    [style^="color: rgb(31, 95, 168)" i],
    [style*=";color: rgb(31, 95, 168)" i],
    [style*="; color: rgb(31, 95, 168)" i],
    [style^="color:rgb(31,95,168)" i],
    [style*=";color:rgb(31,95,168)" i],
    [style*="; color:rgb(31,95,168)" i],
    [style^="color: rgb(31,95,168)" i],
    [style*=";color: rgb(31,95,168)" i],
    [style*="; color: rgb(31,95,168)" i]
  ):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { color: var(--night-rte-blue) !important; }
  :where(html[data-panel-theme="dark"][data-panel-active] :is(.sq-rich-text,.sq-ans-opt > span:not(.sq-ans-no),.er-opt > span,.rte-area,.qai-render,.qai-option > div,.qv-opts > span,.draw-question-options > div,.fml-out)) :is(
    [style^="color:#5b3fa0" i],
    [style*=";color:#5b3fa0" i],
    [style*="; color:#5b3fa0" i],
    [style^="color: #5b3fa0" i],
    [style*=";color: #5b3fa0" i],
    [style*="; color: #5b3fa0" i],
    [style^="color:rgb(91, 63, 160)" i],
    [style*=";color:rgb(91, 63, 160)" i],
    [style*="; color:rgb(91, 63, 160)" i],
    [style^="color: rgb(91, 63, 160)" i],
    [style*=";color: rgb(91, 63, 160)" i],
    [style*="; color: rgb(91, 63, 160)" i],
    [style^="color:rgb(91,63,160)" i],
    [style*=";color:rgb(91,63,160)" i],
    [style*="; color:rgb(91,63,160)" i],
    [style^="color: rgb(91,63,160)" i],
    [style*=";color: rgb(91,63,160)" i],
    [style*="; color: rgb(91,63,160)" i]
  ):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { color: var(--night-rte-purple) !important; }
  :where(html[data-panel-theme="dark"][data-panel-active] :is(.sq-rich-text,.sq-ans-opt > span:not(.sq-ans-no),.er-opt > span,.rte-area,.qai-render,.qai-option > div,.qv-opts > span,.draw-question-options > div,.fml-out)) :is(
    [style^="color:#b03a35" i],
    [style*=";color:#b03a35" i],
    [style*="; color:#b03a35" i],
    [style^="color: #b03a35" i],
    [style*=";color: #b03a35" i],
    [style*="; color: #b03a35" i],
    [style^="color:rgb(176, 58, 53)" i],
    [style*=";color:rgb(176, 58, 53)" i],
    [style*="; color:rgb(176, 58, 53)" i],
    [style^="color: rgb(176, 58, 53)" i],
    [style*=";color: rgb(176, 58, 53)" i],
    [style*="; color: rgb(176, 58, 53)" i],
    [style^="color:rgb(176,58,53)" i],
    [style*=";color:rgb(176,58,53)" i],
    [style*="; color:rgb(176,58,53)" i],
    [style^="color: rgb(176,58,53)" i],
    [style*=";color: rgb(176,58,53)" i],
    [style*="; color: rgb(176,58,53)" i]
  ):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { color: var(--night-rte-red) !important; }
  :where(html[data-panel-theme="dark"][data-panel-active] :is(.sq-rich-text,.sq-ans-opt > span:not(.sq-ans-no),.er-opt > span,.rte-area,.qai-render,.qai-option > div,.qv-opts > span,.draw-question-options > div,.fml-out)) :is(
    [style^="color:#9a6a12" i],
    [style*=";color:#9a6a12" i],
    [style*="; color:#9a6a12" i],
    [style^="color: #9a6a12" i],
    [style*=";color: #9a6a12" i],
    [style*="; color: #9a6a12" i],
    [style^="color:rgb(154, 106, 18)" i],
    [style*=";color:rgb(154, 106, 18)" i],
    [style*="; color:rgb(154, 106, 18)" i],
    [style^="color: rgb(154, 106, 18)" i],
    [style*=";color: rgb(154, 106, 18)" i],
    [style*="; color: rgb(154, 106, 18)" i],
    [style^="color:rgb(154,106,18)" i],
    [style*=";color:rgb(154,106,18)" i],
    [style*="; color:rgb(154,106,18)" i],
    [style^="color: rgb(154,106,18)" i],
    [style*=";color: rgb(154,106,18)" i],
    [style*="; color: rgb(154,106,18)" i]
  ):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { color: var(--night-rte-amber) !important; }
  :where(html[data-panel-theme="dark"][data-panel-active] :is(.sq-rich-text,.sq-ans-opt > span:not(.sq-ans-no),.er-opt > span,.rte-area,.qai-render,.qai-option > div,.qv-opts > span,.draw-question-options > div,.fml-out)) :is(
    [style^="color:#4a5560" i],
    [style*=";color:#4a5560" i],
    [style*="; color:#4a5560" i],
    [style^="color: #4a5560" i],
    [style*=";color: #4a5560" i],
    [style*="; color: #4a5560" i],
    [style^="color:rgb(74, 85, 96)" i],
    [style*=";color:rgb(74, 85, 96)" i],
    [style*="; color:rgb(74, 85, 96)" i],
    [style^="color: rgb(74, 85, 96)" i],
    [style*=";color: rgb(74, 85, 96)" i],
    [style*="; color: rgb(74, 85, 96)" i],
    [style^="color:rgb(74,85,96)" i],
    [style*=";color:rgb(74,85,96)" i],
    [style*="; color:rgb(74,85,96)" i],
    [style^="color: rgb(74,85,96)" i],
    [style*=";color: rgb(74,85,96)" i],
    [style*="; color: rgb(74,85,96)" i]
  ):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { color: var(--night-rte-gray) !important; }
  :where(html[data-panel-theme="dark"][data-panel-active] :is(.sq-rich-text,.sq-ans-opt > span:not(.sq-ans-no),.er-opt > span,.rte-area,.qai-render,.qai-option > div,.qv-opts > span,.draw-question-options > div,.fml-out)) :is(
    [style^="color:#232323" i],
    [style*=";color:#232323" i],
    [style*="; color:#232323" i],
    [style^="color: #232323" i],
    [style*=";color: #232323" i],
    [style*="; color: #232323" i],
    [style^="color:rgb(35, 35, 35)" i],
    [style*=";color:rgb(35, 35, 35)" i],
    [style*="; color:rgb(35, 35, 35)" i],
    [style^="color: rgb(35, 35, 35)" i],
    [style*=";color: rgb(35, 35, 35)" i],
    [style*="; color: rgb(35, 35, 35)" i],
    [style^="color:rgb(35,35,35)" i],
    [style*=";color:rgb(35,35,35)" i],
    [style*="; color:rgb(35,35,35)" i],
    [style^="color: rgb(35,35,35)" i],
    [style*=";color: rgb(35,35,35)" i],
    [style*="; color: rgb(35,35,35)" i]
  ):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { color: var(--night-rte-default) !important; }
  :where(html[data-panel-theme="dark"][data-panel-active] :is(.sq-rich-text,.sq-ans-opt > span:not(.sq-ans-no),.er-opt > span,.rte-area,.qai-render,.qai-option > div,.qv-opts > span,.draw-question-options > div,.fml-out)) :is(
    [style^="color:#000000" i],
    [style*=";color:#000000" i],
    [style*="; color:#000000" i],
    [style^="color: #000000" i],
    [style*=";color: #000000" i],
    [style*="; color: #000000" i],
    [style^="color:rgb(0, 0, 0)" i],
    [style*=";color:rgb(0, 0, 0)" i],
    [style*="; color:rgb(0, 0, 0)" i],
    [style^="color: rgb(0, 0, 0)" i],
    [style*=";color: rgb(0, 0, 0)" i],
    [style*="; color: rgb(0, 0, 0)" i],
    [style^="color:rgb(0,0,0)" i],
    [style*=";color:rgb(0,0,0)" i],
    [style*="; color:rgb(0,0,0)" i],
    [style^="color: rgb(0,0,0)" i],
    [style*=";color: rgb(0,0,0)" i],
    [style*="; color: rgb(0,0,0)" i],
    [style^="color:#000" i],
    [style*=";color:#000" i],
    [style*="; color:#000" i],
    [style^="color: #000" i],
    [style*=";color: #000" i],
    [style*="; color: #000" i],
    [style^="color:black" i],
    [style*=";color:black" i],
    [style*="; color:black" i],
    [style^="color: black" i],
    [style*=";color: black" i],
    [style*="; color: black" i]
  ):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { color: var(--night-rte-black) !important; }

  /* A custom fill can be white while the inherited question ink is light.
     Restore the original palette together, including nested semantic tables.
     Explicit author foreground/background declarations still win. */
  :where(html[data-panel-theme="dark"][data-panel-active] :is(.sq-rich-text,.sq-ans-opt > span:not(.sq-ans-no),.er-opt > span,.rte-area,.qai-render,.qai-option > div,.qv-opts > span,.draw-question-options > div,.fml-out)) :is([style^="background-color:" i],[style*=";background-color:" i],[style*="; background-color:" i]):not([style*="transparent" i]):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  :where(html[data-panel-theme="dark"][data-panel-active] :is(.sq-rich-text,.sq-ans-opt > span:not(.sq-ans-no),.er-opt > span,.rte-area,.qai-render,.qai-option > div,.qv-opts > span,.draw-question-options > div,.fml-out)) :is(.mktable[style*="--mk-custom-table-"],.mkbox[style*="--mk-custom-box-"]):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  :where(html[data-panel-theme="dark"][data-panel-active] :is(.sq-rich-text,.sq-ans-opt > span:not(.sq-ans-no),.er-opt > span,.rte-area,.qai-render,.qai-option > div,.qv-opts > span,.draw-question-options > div,.fml-out)) :is([style^="color:" i],[style*=";color:" i],[style*="; color:" i]):not(:is(
    [style^="color:#0f6f63" i],
    [style*=";color:#0f6f63" i],
    [style*="; color:#0f6f63" i],
    [style^="color: #0f6f63" i],
    [style*=";color: #0f6f63" i],
    [style*="; color: #0f6f63" i],
    [style^="color:rgb(15, 111, 99)" i],
    [style*=";color:rgb(15, 111, 99)" i],
    [style*="; color:rgb(15, 111, 99)" i],
    [style^="color: rgb(15, 111, 99)" i],
    [style*=";color: rgb(15, 111, 99)" i],
    [style*="; color: rgb(15, 111, 99)" i],
    [style^="color:rgb(15,111,99)" i],
    [style*=";color:rgb(15,111,99)" i],
    [style*="; color:rgb(15,111,99)" i],
    [style^="color: rgb(15,111,99)" i],
    [style*=";color: rgb(15,111,99)" i],
    [style*="; color: rgb(15,111,99)" i],
    [style^="color:#2f7d3a" i],
    [style*=";color:#2f7d3a" i],
    [style*="; color:#2f7d3a" i],
    [style^="color: #2f7d3a" i],
    [style*=";color: #2f7d3a" i],
    [style*="; color: #2f7d3a" i],
    [style^="color:rgb(47, 125, 58)" i],
    [style*=";color:rgb(47, 125, 58)" i],
    [style*="; color:rgb(47, 125, 58)" i],
    [style^="color: rgb(47, 125, 58)" i],
    [style*=";color: rgb(47, 125, 58)" i],
    [style*="; color: rgb(47, 125, 58)" i],
    [style^="color:rgb(47,125,58)" i],
    [style*=";color:rgb(47,125,58)" i],
    [style*="; color:rgb(47,125,58)" i],
    [style^="color: rgb(47,125,58)" i],
    [style*=";color: rgb(47,125,58)" i],
    [style*="; color: rgb(47,125,58)" i],
    [style^="color:#1f5fa8" i],
    [style*=";color:#1f5fa8" i],
    [style*="; color:#1f5fa8" i],
    [style^="color: #1f5fa8" i],
    [style*=";color: #1f5fa8" i],
    [style*="; color: #1f5fa8" i],
    [style^="color:rgb(31, 95, 168)" i],
    [style*=";color:rgb(31, 95, 168)" i],
    [style*="; color:rgb(31, 95, 168)" i],
    [style^="color: rgb(31, 95, 168)" i],
    [style*=";color: rgb(31, 95, 168)" i],
    [style*="; color: rgb(31, 95, 168)" i],
    [style^="color:rgb(31,95,168)" i],
    [style*=";color:rgb(31,95,168)" i],
    [style*="; color:rgb(31,95,168)" i],
    [style^="color: rgb(31,95,168)" i],
    [style*=";color: rgb(31,95,168)" i],
    [style*="; color: rgb(31,95,168)" i],
    [style^="color:#5b3fa0" i],
    [style*=";color:#5b3fa0" i],
    [style*="; color:#5b3fa0" i],
    [style^="color: #5b3fa0" i],
    [style*=";color: #5b3fa0" i],
    [style*="; color: #5b3fa0" i],
    [style^="color:rgb(91, 63, 160)" i],
    [style*=";color:rgb(91, 63, 160)" i],
    [style*="; color:rgb(91, 63, 160)" i],
    [style^="color: rgb(91, 63, 160)" i],
    [style*=";color: rgb(91, 63, 160)" i],
    [style*="; color: rgb(91, 63, 160)" i],
    [style^="color:rgb(91,63,160)" i],
    [style*=";color:rgb(91,63,160)" i],
    [style*="; color:rgb(91,63,160)" i],
    [style^="color: rgb(91,63,160)" i],
    [style*=";color: rgb(91,63,160)" i],
    [style*="; color: rgb(91,63,160)" i],
    [style^="color:#b03a35" i],
    [style*=";color:#b03a35" i],
    [style*="; color:#b03a35" i],
    [style^="color: #b03a35" i],
    [style*=";color: #b03a35" i],
    [style*="; color: #b03a35" i],
    [style^="color:rgb(176, 58, 53)" i],
    [style*=";color:rgb(176, 58, 53)" i],
    [style*="; color:rgb(176, 58, 53)" i],
    [style^="color: rgb(176, 58, 53)" i],
    [style*=";color: rgb(176, 58, 53)" i],
    [style*="; color: rgb(176, 58, 53)" i],
    [style^="color:rgb(176,58,53)" i],
    [style*=";color:rgb(176,58,53)" i],
    [style*="; color:rgb(176,58,53)" i],
    [style^="color: rgb(176,58,53)" i],
    [style*=";color: rgb(176,58,53)" i],
    [style*="; color: rgb(176,58,53)" i],
    [style^="color:#9a6a12" i],
    [style*=";color:#9a6a12" i],
    [style*="; color:#9a6a12" i],
    [style^="color: #9a6a12" i],
    [style*=";color: #9a6a12" i],
    [style*="; color: #9a6a12" i],
    [style^="color:rgb(154, 106, 18)" i],
    [style*=";color:rgb(154, 106, 18)" i],
    [style*="; color:rgb(154, 106, 18)" i],
    [style^="color: rgb(154, 106, 18)" i],
    [style*=";color: rgb(154, 106, 18)" i],
    [style*="; color: rgb(154, 106, 18)" i],
    [style^="color:rgb(154,106,18)" i],
    [style*=";color:rgb(154,106,18)" i],
    [style*="; color:rgb(154,106,18)" i],
    [style^="color: rgb(154,106,18)" i],
    [style*=";color: rgb(154,106,18)" i],
    [style*="; color: rgb(154,106,18)" i],
    [style^="color:#4a5560" i],
    [style*=";color:#4a5560" i],
    [style*="; color:#4a5560" i],
    [style^="color: #4a5560" i],
    [style*=";color: #4a5560" i],
    [style*="; color: #4a5560" i],
    [style^="color:rgb(74, 85, 96)" i],
    [style*=";color:rgb(74, 85, 96)" i],
    [style*="; color:rgb(74, 85, 96)" i],
    [style^="color: rgb(74, 85, 96)" i],
    [style*=";color: rgb(74, 85, 96)" i],
    [style*="; color: rgb(74, 85, 96)" i],
    [style^="color:rgb(74,85,96)" i],
    [style*=";color:rgb(74,85,96)" i],
    [style*="; color:rgb(74,85,96)" i],
    [style^="color: rgb(74,85,96)" i],
    [style*=";color: rgb(74,85,96)" i],
    [style*="; color: rgb(74,85,96)" i],
    [style^="color:#232323" i],
    [style*=";color:#232323" i],
    [style*="; color:#232323" i],
    [style^="color: #232323" i],
    [style*=";color: #232323" i],
    [style*="; color: #232323" i],
    [style^="color:rgb(35, 35, 35)" i],
    [style*=";color:rgb(35, 35, 35)" i],
    [style*="; color:rgb(35, 35, 35)" i],
    [style^="color: rgb(35, 35, 35)" i],
    [style*=";color: rgb(35, 35, 35)" i],
    [style*="; color: rgb(35, 35, 35)" i],
    [style^="color:rgb(35,35,35)" i],
    [style*=";color:rgb(35,35,35)" i],
    [style*="; color:rgb(35,35,35)" i],
    [style^="color: rgb(35,35,35)" i],
    [style*=";color: rgb(35,35,35)" i],
    [style*="; color: rgb(35,35,35)" i],
    [style^="color:#000000" i],
    [style*=";color:#000000" i],
    [style*="; color:#000000" i],
    [style^="color: #000000" i],
    [style*=";color: #000000" i],
    [style*="; color: #000000" i],
    [style^="color:rgb(0, 0, 0)" i],
    [style*=";color:rgb(0, 0, 0)" i],
    [style*="; color:rgb(0, 0, 0)" i],
    [style^="color: rgb(0, 0, 0)" i],
    [style*=";color: rgb(0, 0, 0)" i],
    [style*="; color: rgb(0, 0, 0)" i],
    [style^="color:rgb(0,0,0)" i],
    [style*=";color:rgb(0,0,0)" i],
    [style*="; color:rgb(0,0,0)" i],
    [style^="color: rgb(0,0,0)" i],
    [style*=";color: rgb(0,0,0)" i],
    [style*="; color: rgb(0,0,0)" i],
    [style^="color:#000" i],
    [style*=";color:#000" i],
    [style*="; color:#000" i],
    [style^="color: #000" i],
    [style*=";color: #000" i],
    [style*="; color: #000" i],
    [style^="color:black" i],
    [style*=";color:black" i],
    [style*="; color:black" i],
    [style^="color: black" i],
    [style*=";color: black" i],
    [style*="; color: black" i],
    [style^="color:inherit" i],
    [style*=";color:inherit" i],
    [style*="; color:inherit" i],
    [style^="color: inherit" i],
    [style*=";color: inherit" i],
    [style*="; color: inherit" i],
    [style^="color:currentColor" i],
    [style*=";color:currentColor" i],
    [style*="; color:currentColor" i],
    [style^="color: currentColor" i],
    [style*=";color: currentColor" i],
    [style*="; color: currentColor" i],
    [style^="color:initial" i],
    [style*=";color:initial" i],
    [style*="; color:initial" i],
    [style^="color: initial" i],
    [style*=";color: initial" i],
    [style*="; color: initial" i],
    [style^="color:unset" i],
    [style*=";color:unset" i],
    [style*="; color:unset" i],
    [style^="color: unset" i],
    [style*=";color: unset" i],
    [style*="; color: unset" i],
    [style^="color:transparent" i],
    [style*=";color:transparent" i],
    [style*="; color:transparent" i],
    [style^="color: transparent" i],
    [style*=";color: transparent" i],
    [style*="; color: transparent" i],
    [style^="color:white" i],
    [style*=";color:white" i],
    [style*="; color:white" i],
    [style^="color: white" i],
    [style*=";color: white" i],
    [style*="; color: white" i],
    [style^="color:#fff" i],
    [style*=";color:#fff" i],
    [style*="; color:#fff" i],
    [style^="color: #fff" i],
    [style*=";color: #fff" i],
    [style*="; color: #fff" i],
    [style^="color:#ffffff" i],
    [style*=";color:#ffffff" i],
    [style*="; color:#ffffff" i],
    [style^="color: #ffffff" i],
    [style*=";color: #ffffff" i],
    [style*="; color: #ffffff" i],
    [style^="color:rgb(255, 255, 255)" i],
    [style*=";color:rgb(255, 255, 255)" i],
    [style*="; color:rgb(255, 255, 255)" i],
    [style^="color: rgb(255, 255, 255)" i],
    [style*=";color: rgb(255, 255, 255)" i],
    [style*="; color: rgb(255, 255, 255)" i],
    [style^="color:rgb(255,255,255)" i],
    [style*=";color:rgb(255,255,255)" i],
    [style*="; color:rgb(255,255,255)" i],
    [style^="color: rgb(255,255,255)" i],
    [style*=";color: rgb(255,255,255)" i],
    [style*="; color: rgb(255,255,255)" i]
  )):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) {
    color-scheme: light;
    --bg: #f7f6f2; --panel: #fff; --card: #fff; --panel-soft: #fbfaf7;
    --ink: #25231f; --muted: #827e75; --line: #ebe8e0; --q-ink: #000;
    --orange: #ff6b18; --orange-soft: #fff0e7; --teal: #1aa392; --teal-soft: #e9f8f5;
    --green: #2f7d3a; --green-soft: #eaf6ec; --blue: #4676e8; --blue-soft: #edf3ff;
    --purple: #8664d8; --purple-soft: #f2edff; --red: #de5a5a; --red-soft: #fff0f0;
    --yellow: #d9a52b; --yellow-soft: #fff8df;
    --mk-teal-line: #2f9b8c; --mk-teal-head: #d7ece8; --mk-teal-fill: #e9f5f3; --mk-teal-ink: #0f6f63;
    --mk-green-line: #4a9d57; --mk-green-head: #d8eddc; --mk-green-fill: #eaf6ec; --mk-green-ink: #2f7d3a;
    --mk-blue-line: #3c7fc9; --mk-blue-head: #d7e6f6; --mk-blue-fill: #eaf1fa; --mk-blue-ink: #1f5fa8;
    --mk-purple-line: #7c5fc4; --mk-purple-head: #e3dcf6; --mk-purple-fill: #f1edfb; --mk-purple-ink: #5b3fa0;
    --mk-red-line: #d0635c; --mk-red-head: #f8dedb; --mk-red-fill: #fdeeec; --mk-red-ink: #b03a35;
    --mk-amber-line: #d2a03c; --mk-amber-head: #f8ead0; --mk-amber-fill: #fdf5e3; --mk-amber-ink: #9a6a12;
    --mk-gray-line: #8b97a3; --mk-gray-head: #e3e7eb; --mk-gray-fill: #f1f3f5; --mk-gray-ink: #4a5560;
    --night-rte-teal: #0f6f63;
    --night-rte-green: #2f7d3a;
    --night-rte-blue: #1f5fa8;
    --night-rte-purple: #5b3fa0;
    --night-rte-red: #b03a35;
    --night-rte-amber: #9a6a12;
    --night-rte-gray: #4a5560;
    --night-rte-default: #232323;
    --night-rte-black: #000000;
    background-color: var(--night-rte-custom-canvas, #fff); color: #000;
  }
  /* Explicit canvases also protect light custom ink on dark authored fills. */
  :where(html[data-panel-theme="dark"][data-panel-active] :is(.sq-rich-text,.sq-ans-opt > span:not(.sq-ans-no),.er-opt > span,.rte-area,.qai-render,.qai-option > div,.qv-opts > span,.draw-question-options > div,.fml-out)) :is([style^="background-color:" i],[style*=";background-color:" i],[style*="; background-color:" i]):not([style*="transparent" i]):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  :where(html[data-panel-theme="dark"][data-panel-active] :is(.sq-rich-text,.sq-ans-opt > span:not(.sq-ans-no),.er-opt > span,.rte-area,.qai-render,.qai-option > div,.qv-opts > span,.draw-question-options > div,.fml-out)) :is(.mktable[style*="--mk-custom-table-"],.mkbox[style*="--mk-custom-box-"]):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { --night-rte-custom-canvas: transparent; background-color: #fff; }
  :where(html[data-panel-theme="dark"][data-panel-active] :is(.sq-rich-text,.sq-ans-opt > span:not(.sq-ans-no),.er-opt > span,.rte-area,.qai-render,.qai-option > div,.qv-opts > span,.draw-question-options > div,.fml-out)) .mkbox[style*="--mk-custom-box-"]:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background-color: var(--mk-custom-box-fill, #fff); }
  /* END authored question colors */
  /* Paper, the drawing sheet and original scientific illustrations stay light:
     pen strokes are saved as literal colors, so black ink needs white paper.
     Do not invert images, recolor SVG path data, or alter any stored question. */
  html[data-panel-theme="dark"][data-panel-active] :is(.pstudio-page,.pstudio-measure,.print-preview,.mkfig,.draw-stage) {
    color-scheme: light;
    --bg: #f7f6f2; --panel: #fff; --card: #fff; --panel-soft: #fbfaf7;
    --ink: #25231f; --muted: #827e75; --line: #ebe8e0; --q-ink: #000;
    --orange: #ff6b18; --orange-soft: #fff0e7; --teal: #1aa392; --teal-soft: #e9f8f5;
    --blue: #4676e8; --blue-soft: #edf3ff; --purple: #8664d8; --purple-soft: #f2edff;
    --red: #de5a5a; --red-soft: #fff0f0; --yellow: #d9a52b; --yellow-soft: #fff8df;
    --rb-navy: #26384a; --rb-navy-soft: #edf1f4; --rb-paper: #fbfaf7; --rb-border: #e7e1d7;
    --mk-teal-line: #2f9b8c; --mk-teal-head: #d7ece8; --mk-teal-fill: #e9f5f3; --mk-teal-ink: #0f6f63;
    --mk-green-line: #4a9d57; --mk-green-head: #d8eddc; --mk-green-fill: #eaf6ec; --mk-green-ink: #2f7d3a;
    --mk-blue-line: #3c7fc9; --mk-blue-head: #d7e6f6; --mk-blue-fill: #eaf1fa; --mk-blue-ink: #1f5fa8;
    --mk-purple-line: #7c5fc4; --mk-purple-head: #e3dcf6; --mk-purple-fill: #f1edfb; --mk-purple-ink: #5b3fa0;
    --mk-red-line: #d0635c; --mk-red-head: #f8dedb; --mk-red-fill: #fdeeec; --mk-red-ink: #b03a35;
    --mk-amber-line: #d2a03c; --mk-amber-head: #f8ead0; --mk-amber-fill: #fdf5e3; --mk-amber-ink: #9a6a12;
    --mk-gray-line: #8b97a3; --mk-gray-head: #e3e7eb; --mk-gray-fill: #f1f3f5; --mk-gray-ink: #4a5560;
    background-color: #fff; color: #000;
  }
  html[data-panel-theme="dark"][data-panel-active] :is(.sq-content-image img,.rte-area img,.draw-question-image) { background-color: #fff; }
}

/* Activity calendar: preserve the six data levels instead of merging their
   colors into general surface tokens. Daily cells, weekly pixels and the legend
   deliberately share the same scale. */
@media screen {
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-card {
    --heat-empty: #303640;
    --heat-level-1: #124e7c;
    --heat-level-2: #0866a8;
    --heat-level-3: #057fda;
    --heat-level-4: #0e96f5;
    --heat-level-5: #43afff;
    --heat-level-6: #85cbff;
    background: var(--panel);
    border-color: var(--line);
  }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-card > header strong { color: var(--ink); }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-card :is(header small,.sp-heatmap-months span) { color: #a9b5c7; }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-toggle { background: #121a25; }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-toggle button { color: #a9b5c7; background: transparent; }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-toggle button:hover { color: #e9f4ff; background: #24384c; }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-toggle button[aria-pressed="true"] {
    color: #d8eeff; background: #17456d; box-shadow: inset 0 0 0 1px #2a6898;
  }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-scroll { scrollbar-color: #40536b transparent; }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-card :is(.sp-heat-cell,.sp-heat-week-pixel,footer i) {
    background: var(--heat-empty); border-radius: 3px;
  }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-card :is(.sp-heat-cell,.sp-heat-week-pixel,footer i)[data-level="1"] { background: var(--heat-level-1); }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-card :is(.sp-heat-cell,.sp-heat-week-pixel,footer i)[data-level="2"] { background: var(--heat-level-2); }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-card :is(.sp-heat-cell,.sp-heat-week-pixel,footer i)[data-level="3"] { background: var(--heat-level-3); }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-card :is(.sp-heat-cell,.sp-heat-week-pixel,footer i)[data-level="4"] { background: var(--heat-level-4); }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-card :is(.sp-heat-cell,.sp-heat-week-pixel,footer i)[data-level="5"] { background: var(--heat-level-5); }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-card :is(.sp-heat-cell,.sp-heat-week-pixel,footer i)[data-level="6"] { background: var(--heat-level-6); }
  html[data-panel-theme="dark"][data-panel-active] .sp-heat-week-button { background: transparent; }
  html[data-panel-theme="dark"][data-panel-active] .sp-heat-cell:is(:hover,:focus-visible,.active) {
    box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px #85cbff;
  }
  html[data-panel-theme="dark"][data-panel-active] .sp-heat-week-button:is(:hover,:focus-visible,.active) .sp-heat-week-pixel:not(.outside) {
    box-shadow: 0 0 0 1px #b1ddff;
  }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-card :is(.sp-heatmap-toggle button,.sp-heat-week-button,.sp-heat-cell,.sp-heatmap-scroll,.ap-admin-heat-select select):focus-visible {
    outline: 2px solid #85cbff; outline-offset: 3px;
  }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-card > footer { color: #a9b5c7; }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-tip {
    color: #e9edf4; background: #202c3c; border-color: #40536b;
    box-shadow: 0 10px 28px rgba(3, 8, 17, .4);
  }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-tip > strong { color: #85cbff; }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-tip > div { border-top-color: #40536b; }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-tip > div > span { color: #b9c6d9; }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-tip :is(.correct,.reviewed) i { background: #66d7bd; }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-tip .wrong i { background: #ff929d; }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-tip .blank i { background: #e9c77a; }
  html[data-panel-theme="dark"][data-panel-active] .sp-heatmap-tip .pending i { background: #a9b5c7; }
  html[data-panel-theme="dark"][data-panel-active] .ap-admin-heat-tip .created i { background: #ffa364; }
  html[data-panel-theme="dark"][data-panel-active] :is(.ap-admin-heat-select,.ap-heat-empty) { color: #a9b5c7; }
  html[data-panel-theme="dark"][data-panel-active] .ap-admin-heat-select select {
    color: var(--ink); background: #121a25; border-color: #40536b;
  }
}

/* Original source artwork is designed for a light canvas. Keep its own colors
   and dimensions; generated fallback icons continue using the midnight theme. */
@media screen {
  html[data-panel-theme="dark"][data-panel-active] :is(
    .src-icon,.detail-source-icon,.sq-src-icon,.src-node-icon,.stx-logo,
    .mn-lv-logo-box,.lesson-source-logo,.lesson-source-chip-logo,
    .pl-logo-src,.prj-src-logo,.mi-exam-logo
  ):not(.src-icon-fallback):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) {
    color-scheme: light;
    --ink: #25231f;
    --muted: #827e75;
    background: #fff;
    color: #25231f;
    border-color: #dce3ed;
  }
  html[data-panel-theme="dark"][data-panel-active] :is(.src-icon,.src-node-icon,.stx-logo):not(.src-icon-fallback):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) {
    border-radius: 4px;
  }

  /* Frame the existing image-only content container, never the image pixels.
     Padding leaves every original corner visible. Adjacent answer/lesson
     slices stay flush, and their intrinsic ratio/lazy metadata stay intact.
     Drawing canvases retain their exact image coordinates and dimensions. */
  html[data-panel-theme="dark"][data-panel-active] :is(
    .sq-body,.qv-body,.preview-question,.sq-reveal-block > div,.qv-panel-body
  ):has(> img.sq-content-image):not(:has(> :not(img.sq-content-image))):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage-shell,.draw-stage-shell *,.draw-stage,.draw-stage *,.draw-question-card,.draw-question-card *)) {
    padding: 3px;
    border-radius: 6px;
    background: #fff;
  }

  /* The vertical answer renderer already provides ample inner space. Restore
     the paper behind its adjoining slices without changing that geometry. */
  html[data-panel-theme="dark"][data-panel-active] .sq-explanation-columns:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage-shell,.draw-stage-shell *,.draw-stage,.draw-stage *,.draw-question-card,.draw-question-card *)) {
    background: #fff;
    border-color: #dce3ed;
    border-radius: 6px;
  }
}

/* BEGIN panel contrast refinement — solid actions, answer states and data marks. */

/* Solid orange controls need dark ink; their neighboring soft-orange surfaces
   retain orange ink. These exact states already use the solid accent in the
   original stylesheets. Variant/disabled surfaces are deliberately excluded. */
@media screen {
  html[data-panel-theme="dark"][data-panel-active] :is(
    .page-buttons button.active,
    .wizard-step.active:not(.done) .step-num,
    .tp-tree .wt-badge,
    .arc-preset.on,
    .sb-page.on,
    .qset-card-action.primary,
    .draw-answer-opt.on,
    .year-cell.on,
    .audit-chip.on,
    .audit-cal-cell.selected:not(.inrange),
    .exam-hub-tab.on,
    .exam-tab.on,
    .exam-builder-step span,
    .emf-sel,
    .er-finish,
    .er-qno-num,
    .exam-step.on:not(.done) .exam-step-num,
    .ep-chip.on,
    .er-bk-step.current,
    .ew-bk-index,
    .exam-attempt-index,
    .rr-tabs button.on,
    .rr-shared-name em,
    .qt-chip.on,
    .eb-join,
    .tp-cell.on,
    .pro-question-row > b,
    .pro-aud-chip.on,
    .hall-join-button:not(:disabled),
    .mn-card:hover .mn-card-open,
    .mn-pager button.on,
    .pl-rm-today,
    .pl-adm-months:not(.searching) .pl-adm-month.on,
    .qw-card-action:hover,
    .tb-badge,
    .sup-row-dot:not(.ghost),
    .sup-pager-num.on,
    .sdash-alert.orange .sdash-alert-badge,
    .ax-primary,
    .ax-rate-btn.on,
    .axm-tab.on,
    .brw-chip.on,
    .shop-cart-count,
    .shop-grant-product.on .shop-grant-check,
    .sse-avatar,
    .rb-card-new:hover .rb-card-new-mark,
    .rb-lesson-more:hover,
    .rb-bk-index,
    .rb-board-tab.on:not(:disabled),
    .rb-mini.go:not(.ghost),
    .rb-level-pill.on:not(.ad):not(.rnd),
    .invite-role.on,
    .orgm-chip.pick.on,
    .orgm-form-section > header > span,
    .pr-qno,
    .edu-seg button.on,
    .spx-steps span.on:not(.done) b,
    .scp-step-no,
    .scp-copy:not(.ghost):not(.light)
  ):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) {
    color: var(--night-on-accent);
  }

  /* Pagination can render outside the monthly --primary token scope. */
  html[data-panel-theme="dark"][data-panel-active] .mn-pager button.on:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) {
    background: var(--orange); border-color: var(--orange); color: var(--night-on-accent);
  }

  /* Literal legacy hover colors otherwise map to a dark surface. Keep the
     filled action bright in both its resting and hovered states. */
  html[data-panel-theme="dark"][data-panel-active] :is(.qset-card-action.primary,.er-finish,.eb-join,.rb-mini.go:not(.ghost)):hover:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) {
    background: var(--orange-dark);
    color: var(--night-on-accent);
  }

  /* These filled controls mix a literal orange with --orange. Adapt both
     gradient stops together so dark ink stays legible across the whole face. */
  html[data-panel-theme="dark"][data-panel-active] :is(.exam-filter-side .emf-sel,.mn-ex-node .eb-join,.mn-lesson-tab.on,.mn-pick-action:not(.on)):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) {
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    color: var(--night-on-accent);
  }

  /* Explicit child ink must follow the parent, including selected-tab counts
     and role-picker icons; currentColor SVG strokes then inherit naturally. */
  html[data-panel-theme="dark"][data-panel-active] :is(.pl-adm-months:not(.searching) .pl-adm-month.on small,.pl-adm-months:not(.searching) .pl-adm-month.on i,.axm-tab.on span,.invite-role.on span,.mn-lesson-tab.on b):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) {
    color: var(--night-on-accent);
  }
  html[data-panel-theme="dark"][data-panel-active] .invite-role.on:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *))::after {
    background-color: var(--night-on-accent);
  }
  html[data-panel-theme="dark"][data-panel-active] .pl-rm-today-dot:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) {
    background-color: var(--night-on-accent);
  }
  html[data-panel-theme="dark"][data-panel-active] :is(.rrft-row.on:not(.implied) .rrft-check,.ax-tp-check.on:not(.some),.prjt-pick input:checked + .prjt-box):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *))::after {
    border-color: var(--night-on-accent);
  }
}

@media screen and (max-width: 760px) {
  html[data-panel-theme="dark"][data-panel-active] .mn-card-open:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) {
    color: var(--night-on-accent);
  }
}

/* Answer states: fill means the chosen option; an outline marks the key.
   A choice without a revealed key stays neutral blue, including offline work. */
@media screen {
  html[data-panel-theme="dark"][data-panel-active] .rr-qrow.correct:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { box-shadow: inset -3px 0 #66d7bd; }
  html[data-panel-theme="dark"][data-panel-active] .rr-qrow.wrong:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { box-shadow: inset -3px 0 #ff929d; }
  html[data-panel-theme="dark"][data-panel-active] .rr-qrow.blank:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { box-shadow: inset -3px 0 #e9c77a; }
  html[data-panel-theme="dark"][data-panel-active] .sq-item.ans-correct:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { border-inline-start-color: #66d7bd; }
  html[data-panel-theme="dark"][data-panel-active] .sq-item.ans-wrong:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { border-inline-start-color: #ff929d; }
  html[data-panel-theme="dark"][data-panel-active] .sq-item.ans-dunno:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { border-inline-start-color: #e9c77a; }
  html[data-panel-theme="dark"][data-panel-active] .sq-item.ans-pending:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { border-inline-start-color: #86aaff; }
  html[data-panel-theme="dark"][data-panel-active] .rr-qopts i.key:not(.picked):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-sheet-question > i.key:not(.picked):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-sheet-cell i.key:not(.picked):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: #193c36; border-color: #66d7bd; color: #8ce8d2; box-shadow: inset 0 0 0 1px #66d7bd; opacity: 1; }
  html[data-panel-theme="dark"][data-panel-active] .rr-qopts i.picked:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-sheet-question > i.picked:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-sheet-cell i.picked:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: #86aaff; border-color: #86aaff; color: #142238; box-shadow: none; opacity: 1; }
  html[data-panel-theme="dark"][data-panel-active] .rr-qrow.correct .rr-qopts i.picked:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-qopts i.key.picked:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-sheet-question.correct > i.picked:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-sheet-cell.correct i.picked:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: #66d7bd; border-color: #66d7bd; color: #102a24; box-shadow: none; }
  html[data-panel-theme="dark"][data-panel-active] .rr-qrow.wrong .rr-qopts i.picked:not(.key):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-sheet-question.wrong > i.picked:not(.key):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-sheet-cell.wrong i.picked:not(.key):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: #ff929d; border-color: #ff929d; color: #35151d; box-shadow: none; }
  html[data-panel-theme="dark"][data-panel-active] .rr-sheet-question.blank > b:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-qrow.blank > span:first-child b:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { color: #e9c77a; }
  html[data-panel-theme="dark"][data-panel-active] .sq-ans-opt.picked:not(.is-correct):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: #22334f; border-color: #86aaff; box-shadow: inset 0 0 0 1px #86aaff; }
  html[data-panel-theme="dark"][data-panel-active] .sq-ans-opt.picked:not(.is-correct) .sq-ans-no:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: #86aaff; color: #142238; }
  html[data-panel-theme="dark"][data-panel-active] .sq-ans-opt.is-correct:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .sq-ans-opt.is-correct:hover:not(:disabled):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: #193c36; border-color: #66d7bd; box-shadow: inset 0 0 0 1px #66d7bd; }
  html[data-panel-theme="dark"][data-panel-active] .sq-ans-opt.is-correct .sq-ans-no:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: #66d7bd; color: #102a24; }
  html[data-panel-theme="dark"][data-panel-active] .sq-answer-options:has(> .sq-ans-opt.is-correct) > .sq-ans-opt.picked:not(.is-correct):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: #462631; border-color: #ff929d; box-shadow: inset 0 0 0 1px #ff929d; }
  html[data-panel-theme="dark"][data-panel-active] .sq-answer-options:has(> .sq-ans-opt.is-correct) > .sq-ans-opt.picked:not(.is-correct) .sq-ans-no:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: #ff929d; color: #35151d; }
  html[data-panel-theme="dark"][data-panel-active] .sq-item.ans-pending .sq-answer-options > .sq-ans-opt.picked:not(.is-correct):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .sq-item.ans-pending .sq-answer-options > .sq-ans-opt.picked.is-correct:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: #22334f; border-color: #86aaff; box-shadow: inset 0 0 0 1px #86aaff; }
  html[data-panel-theme="dark"][data-panel-active] .sq-item.ans-pending .sq-answer-options > .sq-ans-opt.picked:not(.is-correct) .sq-ans-no:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .sq-item.ans-pending .sq-answer-options > .sq-ans-opt.picked.is-correct .sq-ans-no:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: #86aaff; color: #142238; }
  html[data-panel-theme="dark"][data-panel-active] .er-opt.on:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .er-opt.on:hover:not(:disabled):where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: #22334f; border-color: #86aaff; box-shadow: inset 0 0 0 1px #86aaff; }
  html[data-panel-theme="dark"][data-panel-active] .er-opt.on b:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: #86aaff; border-color: #86aaff; color: #142238; }
  html[data-panel-theme="dark"][data-panel-active] .sq-result.correct:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-status.correct:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-sheet-legend .correct:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-legend .ok:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: #193c36; color: #8ce8d2; box-shadow: inset 0 0 0 1px #4ea78f; }
  html[data-panel-theme="dark"][data-panel-active] .sq-result.wrong:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-status.wrong:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-sheet-legend .wrong:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-legend .bad:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: #462631; color: #ffb2bb; box-shadow: inset 0 0 0 1px #c77280; }
  html[data-panel-theme="dark"][data-panel-active] .sq-result.dunno:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-status.blank:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-sheet-legend .blank:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-legend .blank:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: #393020; color: #f0cf85; box-shadow: inset 0 0 0 1px #aa8c4c; }
  html[data-panel-theme="dark"][data-panel-active] .sq-result.pending:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: #22334f; color: #aac6ff; box-shadow: inset 0 0 0 1px #7393d9; }
  html[data-panel-theme="dark"][data-panel-active] .rr-sheet-legend .key:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: transparent; color: #8ce8d2; box-shadow: inset 0 0 0 1px #66d7bd; }
}

/* Data marks use foreground colors, not the muted fills used behind text.
   Only known panel charts are targeted; question figures and print surfaces stay intact. */
@media screen {
  html[data-panel-theme="dark"][data-panel-active] .rr-time-bar.correct > i:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: linear-gradient(180deg, var(--teal), #2bb698); }
  html[data-panel-theme="dark"][data-panel-active] .rr-time-bar.wrong > i:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: linear-gradient(180deg, var(--red), #ed7083); }
  html[data-panel-theme="dark"][data-panel-active] .rr-time-bar.blank > i:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: linear-gradient(180deg, var(--yellow), #d5a343); }
  html[data-panel-theme="dark"][data-panel-active] .rr-chart-switches i.correct:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-time-legend .correct i:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-diff-gauge > footer .ok > i:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: var(--teal); }
  html[data-panel-theme="dark"][data-panel-active] .rr-area-chart .rr-edge.correct:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { stroke: var(--teal); }
  html[data-panel-theme="dark"][data-panel-active] .rr-tl-cursor circle.correct:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { fill: var(--teal); }
  html[data-panel-theme="dark"][data-panel-active] .rr-tl-row.correct small:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *))::before { background: var(--teal); }
  html[data-panel-theme="dark"][data-panel-active] .rr-chart-switches i.wrong:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-time-legend .wrong i:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-diff-gauge > footer .bad > i:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: var(--red); }
  html[data-panel-theme="dark"][data-panel-active] .rr-area-chart .rr-edge.wrong:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { stroke: var(--red); }
  html[data-panel-theme="dark"][data-panel-active] .rr-tl-cursor circle.wrong:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { fill: var(--red); }
  html[data-panel-theme="dark"][data-panel-active] .rr-tl-row.wrong small:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *))::before { background: var(--red); }
  html[data-panel-theme="dark"][data-panel-active] .rr-chart-switches i.blank:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-time-legend .blank i:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .rr-diff-gauge > footer .blank > i:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: var(--yellow); }
  html[data-panel-theme="dark"][data-panel-active] .rr-area-chart .rr-edge.blank:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { stroke: var(--yellow); }
  html[data-panel-theme="dark"][data-panel-active] .rr-tl-cursor circle.blank:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { fill: var(--yellow); }
  html[data-panel-theme="dark"][data-panel-active] .rr-tl-row.blank small:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *))::before { background: var(--yellow); }
  html[data-panel-theme="dark"][data-panel-active] .rr-chart-switches i.seen:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: #8bb8ee; }
  html[data-panel-theme="dark"][data-panel-active] .rr-area-chart .rr-edge.seen:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { stroke: #8bb8ee; }
  html[data-panel-theme="dark"][data-panel-active] .rr-tl-cursor circle.seen:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { fill: #8bb8ee; }
  html[data-panel-theme="dark"][data-panel-active] .rr-tl-row.seen small:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *))::before { background: #8bb8ee; }
  html[data-panel-theme="dark"][data-panel-active] .rr-chart-switches i.answered:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: var(--orange); }
  html[data-panel-theme="dark"][data-panel-active] .rr-area-chart .rr-edge.answered:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { stroke: var(--orange); }
  html[data-panel-theme="dark"][data-panel-active] .rr-tl-cursor circle.answered:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { fill: var(--orange); }
  html[data-panel-theme="dark"][data-panel-active] .rr-tl-row.answered small:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *))::before { background: var(--orange); }
  html[data-panel-theme="dark"][data-panel-active] .rr-area-chart .rr-area.seen:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { fill: rgba(139, 184, 238, .1); }
  html[data-panel-theme="dark"][data-panel-active] .rr-tl-cursor circle:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .sp-bell-user circle:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .sp-bell-cursor circle:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { stroke: var(--panel); }
  html[data-panel-theme="dark"][data-panel-active] .sp-bell-cursor circle:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { fill: #8bb8ee; }
  html[data-panel-theme="dark"][data-panel-active] .sp-bell-cursor line:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { stroke: #8bb8ee; }
  html[data-panel-theme="dark"][data-panel-active] .sp-bell-caption .below i:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: var(--teal); }
  html[data-panel-theme="dark"][data-panel-active] .sp-bell-caption .equal i:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: var(--orange); }
  html[data-panel-theme="dark"][data-panel-active] .sp-bell-caption .above i:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { background: var(--yellow); }
  html[data-panel-theme="dark"][data-panel-active] .sp-bell-area.below:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { fill: rgba(102, 215, 189, .3); }
  html[data-panel-theme="dark"][data-panel-active] .sp-bell-area.above:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { fill: rgba(233, 199, 122, .28); }
  html[data-panel-theme="dark"][data-panel-active] .sp-bell-line:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { stroke: #8ba5c2; }
  html[data-panel-theme="dark"][data-panel-active] .sp-bell-user text:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { fill: var(--orange); stroke: none; stroke-width: 0; }
  html[data-panel-theme="dark"][data-panel-active] .tm-radar-stage:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)),
  html[data-panel-theme="dark"][data-panel-active] .tm-radar-footer:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { --tm-blue: #8bb8ee; --tm-red: var(--red); }
  html[data-panel-theme="dark"][data-panel-active] .tm-radar-tick:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { stroke: var(--panel); }
  html[data-panel-theme="dark"][data-panel-active] .tm-radar-dot:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { stroke: var(--panel); }
  html[data-panel-theme="dark"][data-panel-active] .tm-radar-legend i:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { border-color: var(--panel); }
  /* Grid lines recede behind the data; original chart geometry is unchanged. */
  html[data-panel-theme="dark"][data-panel-active] :is(.rr-area-chart,.rr-line-chart) .grid:where(:not(.pstudio-page,.pstudio-page *,.pstudio-measure,.pstudio-measure *,.print-preview,.print-preview *,.mkfig,.mkfig *,.draw-stage,.draw-stage *)) { stroke: var(--line); }

}

/* END panel contrast refinement */

/* BEGIN dark-mode audit — first paint, inactive states, data heat and pen swatches. */
@media screen {
  /* panel-theme.js runs before the body is parsed and marks a returning dark
     panel with data-panel-boot, so the loading splash never flashes white. The
     attribute is removed as soon as the splash is gone. */
  html[data-panel-theme="dark"][data-panel-boot] { color-scheme: dark; background: #10151e; }
  html[data-panel-theme="dark"][data-panel-boot] .boot-splash { background: #10151e; }
  html[data-panel-theme="dark"][data-panel-boot] .boot-splash-bar { background: #2a3444; }
  html[data-panel-theme="dark"][data-panel-boot] .boot-splash-bar i { background: #4fbf85; }

  /* Dimmed-but-usable controls: the light-mode opacity left them near 2:1 on dark. */
  html[data-panel-theme="dark"][data-panel-active] .sd-check.is-zero { opacity: .66; }
  html[data-panel-theme="dark"][data-panel-active] .sd-check.is-zero:hover { opacity: .9; }
  html[data-panel-theme="dark"][data-panel-active] .folder-drag-handle { opacity: .66; }
  html[data-panel-theme="dark"][data-panel-active] :is(.folder-drag-handle:hover,.folder-card:hover .folder-drag-handle) { opacity: .9; }
  html[data-panel-theme="dark"][data-panel-active] .pl-rm-item.past .pl-rm-card { opacity: .86; }

  /* Retention heat: keep the scale but cap the fill so its ink stays ≥ 4.5:1. */
  html[data-panel-theme="dark"][data-panel-active] .us-ret td.us-ret-cell:not(.empty) {
    background: color-mix(in srgb, var(--teal) calc(var(--lv, 0%) * .55), var(--panel));
  }

  /* Pen swatches sit on a dark popover: black needs an edge, the chosen one a ring. */
  html[data-panel-theme="dark"][data-panel-active] .draw-color-palette button { box-shadow: inset 0 0 0 1.5px rgba(233, 237, 244, .38); }
  html[data-panel-theme="dark"][data-panel-active] .draw-color-palette button.on {
    box-shadow: inset 0 0 0 1.5px rgba(233, 237, 244, .38), 0 0 0 3px var(--panel), 0 0 0 5px var(--ink);
  }
}
/* END dark-mode audit */