.theme-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 38px;width:38px;height:38px;padding:8px;border:0;border-radius:8px;background:transparent;color:var(--text);cursor:pointer;vertical-align:middle}
.theme-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-motion-icon{display:block;width:26px;height:26px;background:currentColor;mask-image:url('/static/icons/theme-sun-moon.png');mask-size:650px 26px;mask-position:calc(var(--theme-frame,0) * -26px) 0;mask-repeat:no-repeat;-webkit-mask-image:url('/static/icons/theme-sun-moon.png');-webkit-mask-size:650px 26px;-webkit-mask-position:calc(var(--theme-frame,0) * -26px) 0;-webkit-mask-repeat:no-repeat}
.theme-toggle:hover{background:var(--matrix-selection);color:var(--primary-2)}
.theme-toggle:focus-visible{outline:2px solid var(--primary-2);outline-offset:2px}
/* Match the main header's icon hit areas and optical spacing around text. */
body .topbar-right { gap:8.5px; }
body .topbar-right #btn-notif {
  box-sizing:border-box; width:38px; height:38px; flex:0 0 38px;
  padding:6px; margin-right:-3px; border:0; border-radius:8px; background:transparent;
  color:var(--text); transition:none;
}
/* The bell fills its viewBox; the sun/moon bitmap has internal whitespace. */
body .topbar-right #btn-notif .notif-bell-icon { width:20px; height:20px; transform:scale(1.1); }
/* Enlarge only the artwork, leaving header positions and hit areas unchanged. */
body #theme-main .theme-motion-icon {
  transform:scale(1.144);
  filter:none;
}
html[data-theme=dark] #theme-main .theme-motion-icon { transform:scale(1.2012); }
/* Apply weight outside the bitmap mask, so the extra strokes are not clipped. */
body #theme-main .theme-motion-shell {
  display:block; width:26px; height:26px; flex:0 0 26px;
  filter:drop-shadow(.1px 0 0 currentColor) drop-shadow(-.1px 0 0 currentColor)
         drop-shadow(0 .1px 0 currentColor) drop-shadow(0 -.1px 0 currentColor);
}
body .topbar .topbar-right #btn-feedback { padding-inline:6px; border:0; }
body .topbar .topbar-right #btn-profile { margin-left:6px; }
body .topbar-right #btn-notif:hover:not(:disabled) {
  background:var(--control-hover); color:var(--control-selected-text);
}
body .topbar-right #btn-notif:focus-visible { outline:2px solid var(--primary-2); outline-offset:2px; }
.theme-toggle { box-sizing:border-box; padding:6px; }
.theme-motion-icon {
  flex:0 0 26px;
  /* Slight optical correction for the thin animated source, not the hit area. */
  transform:scale(1.04);
  filter:drop-shadow(.15px 0 0 currentColor) drop-shadow(-.15px 0 0 currentColor);
}
.theme-filter-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
:root[data-theme=dark]{color-scheme:dark;--bg:#11141b;--card:#22242b;--text:#edf2fc;--muted:#a0adc2;--border:#3b4250;--primary:#adcbf5;--primary-2:#80aaff;--matrix-selection:#233b60;--matrix-border:#5876a0;--matrix-selection-text:#bdd6ff;--danger:#ff8787;--shadow:0 2px 12px #0005}
:root[data-theme=dark]{--theme-surface:#22242b;--theme-ink:#edf2fc;--theme-muted:#a0adc2}
html[data-theme=dark] body{background:#11141b;color:var(--text)}
html[data-theme=dark] .modal-body{background:#22242b;color:var(--text)}
html[data-theme=dark] #view-auth{background:#11141b}
html[data-theme=dark] :is(.topbar,.card,.modal-content,.modal-box,.modal-panel,.dropdown-menu,.msel-panel,.msel-menu,.annot-toolbar,.exam-dock,.teacher-grading-dock,[class$="-menu"],[class$="-panel"],[class$="-popover"],[class$="-dropdown"]){background-color:var(--card);color:var(--text);border-color:var(--border)}
html[data-theme=dark] :is(input,select,textarea,.btn,.msel-btn,[class$="-trigger"]){background-color:#292e39;color:var(--text);border-color:var(--border)}
html[data-theme=dark] :is(input,textarea)::placeholder{color:#a0adc2}
/* Preserve semantic action/link colours instead of overriding every button. */
html[data-theme=dark] .btn.primary{background:#285bd5;color:#fff;border-color:#285bd5}
html[data-theme=dark] .btn.danger{color:#ff8787}
html[data-theme=dark] :is(th,thead,.org-card,.collection-card){background-color:#22242b;color:var(--text);border-color:var(--border)}
html[data-theme=dark] :is(td,tr,hr){border-color:var(--border)}
html[data-theme=dark] :is(.btn,.msel-btn,.main-tab,[class$="-trigger"]):hover:not(:disabled):not([aria-disabled=true]){background-color:var(--control-hover);color:#edf2fc}
html[data-theme=dark] :is(.main-tab.active,.selected,.msel-option.selected){background-color:#233b60;color:#bdd6ff}
/* Writing surfaces match the filtered white endpoint. Never filter a parent of ink. */
html[data-theme=dark] :is(.page,.exam-images,.annot-wrap,.annot-region,.part-block,.part-answer-zone,.saq-left,.saq-right,.saq-left-images,.teacher-grading-content,.practice-part-group,[class*="preview"],[class*="image-viewport"],#view-parts){background-color:#11141b;color:var(--text)}
html[data-theme=dark] :is(img[src*="/api/images/"],img.annot-img,img.answer-line-slice-image,.exam-images img,.saq-left-images img,.part-block img,.option-images img,.practice-part-group img){filter:url(#ada-night-image)}
html[data-theme=dark] canvas.annot-canvas{filter:none}
html[data-theme=dark] :is(.annot-wrap,.annot-region,.part-answer-zone,.saq-left-images,.exam-images){background-color:#11141b!important}
@media print{html[data-theme=dark] img{filter:none!important}.theme-toggle{display:none!important}}

/* Shared tokens reach high-specificity management, exam and floating controls. */
:root[data-theme=dark] {
  --control-neutral:#292e39;
  --control-hover:#435775;
  --control-selected:#233b60;
  --control-selected-text:#bdd6ff;
  --table-surface:#1b2029;
}
html[data-theme=dark] #q-table [data-col] {
  --column-heading:hsl(var(--column-hue,210),20%,22%);
  --column-body:hsl(var(--column-hue,210),16%,14%);
}
html[data-theme=dark] #q-table th { border-bottom-color:var(--border); }
html[data-theme=dark] #q-table tbody tr.selected > td { background:var(--control-selected); }
html[data-theme=dark] #q-table tbody tr:hover > td { background:var(--control-hover); }
html[data-theme=dark] .collection-tabs { background:#292e39; }
html[data-theme=dark] .collection-tabs::before { background:var(--control-selected); }
html[data-theme=dark] .collection-tabs button { color:var(--muted); }
html[data-theme=dark] .collection-tabs button[aria-selected=true] { color:var(--control-selected-text); }
html[data-theme=dark] #collection-card-deck .collection-item.active { background:var(--control-selected); }
/* Transparent letterboxing lets the card show through without image-filter inversion. */
html[data-theme=dark] .collection-item img,
html[data-theme=dark] #collection-card-deck .collection-item img { background:transparent; }
/* The image filter also transforms its CSS background/border: white maps to #11141b. */
html[data-theme=dark] #tests-question-list .thumb { background:#fff; border-color:#fff; }
html[data-theme=dark] :is(.practice-topline,.collection-thumb,.practice-answer-dock) { background:var(--card); }
/* Keep the collection reading surface continuous, including header and side padding. */
html[data-theme=dark] #page-favorites :is(.favorite-practice-card,#practice-body,.practice-topline,.practice-question-scroll) { background-color:var(--bg); }
html[data-theme=dark] :is(.collection-item-source,.collection-item-meta) { color:var(--muted); }
/* Only the monochrome icon bitmap changes; coloured pen-tip overlays/swatches do not. */
html[data-theme=dark] .notebook-icon img { filter:invert(1); }
html[data-theme=dark] .annot-toolbar > .annot-settings-button { box-shadow:0 -4px 6px var(--card); }
html[data-theme=dark] .annot-toolbar .annot-color.selected::after { background:#fff; }
html[data-theme=dark] #exam-nav .nav-box { background:var(--control-neutral); color:var(--text); }
html[data-theme=dark] #exam-nav .nav-box.current { background:var(--control-selected); color:var(--control-selected-text); }
html[data-theme=dark] #exam-nav .nav-box:is(.answered,.review-correct) { background:#163c2e; color:#91e3b2; }
html[data-theme=dark] #exam-nav .nav-box.review-wrong { background:#4a252d; color:#ffb0b8; }
html[data-theme=dark] #exam-nav .nav-box.review-saq { background:#44381f; color:#f5d48e; }
html[data-theme=dark] :is(.response-option[aria-pressed=true],.cascade-item.selected,.notif-item.clickable:hover,.matrix-assignment:hover,.collection-select-menu button[aria-selected=true],.collection-select-menu button:hover,.auth-role input:checked + span) { background:var(--control-selected); color:var(--control-selected-text); }
html[data-theme=dark] :is(.result-grade-badge,.result-grade-boundary.current,.explanation-feedback .btn[aria-pressed=true]) { background:var(--control-selected); color:var(--control-selected-text); }
html[data-theme=dark] :is(.detail-preview-dock,.saq-overview-marks,.annot-lasso-menu,.annot-lasso-menu::after,#q-content-loading) { background:var(--card); }
html[data-theme=dark] :is(.org-sort.active,.org-sort:hover,.org-filter-label:hover,.org-filter-label.active) { background:var(--control-selected); color:var(--control-selected-text); }
html[data-theme=dark] .status-ok { color:#91e3b2; }
/* This background is inside the image filter: white maps to the canvas colour. */
html[data-theme=dark] .collection-item img { background:#fff; }
/* Cool midnight palette, only in dark appearance. Keep column identity visible. */
html[data-theme=dark] #q-table [data-col] { --column-heading:hsl(var(--night-hue,220) 30% 25%); --column-body:hsl(var(--night-hue,220) 24% 16%); }
html[data-theme=dark] #q-table [data-col=favorite] { --night-hue:250; }
html[data-theme=dark] #q-table [data-col=image] { --night-hue:205; }
html[data-theme=dark] #q-table :is([data-col=year_session],[data-col=paper]) { --night-hue:220; }
html[data-theme=dark] #q-table [data-col=chapter] { --night-hue:275; }
html[data-theme=dark] #q-table [data-col=topic] { --night-hue:185; }
html[data-theme=dark] #q-table [data-col=difficulty] { --night-hue:155; }
html[data-theme=dark] #q-table :is([data-col=note],[data-col=remark]) { --night-hue:315; }
/* Alternate the two requested slate families in rendered column order. */
html[data-theme=dark] #q-table tr > :nth-child(odd) { --column-heading:#2d3952; --column-body:#202734; }
html[data-theme=dark] #q-table tr > :nth-child(even) { --column-heading:#2f4553; --column-body:#202b33; }
html[data-theme=dark] :is(.main-tab,#q-table .header-filter-btn,#q-table .header-sort-btn,.gradebook-group-table th,.teacher-gradebook-tab) { color:#f3f6ff; }
html[data-theme=dark] #q-table .header-filter-btn:is(:disabled,.prerequisite-disabled) { color:var(--muted); }
html[data-theme=dark] :is(.teacher-gradebook-tab.active,.tests-list li.active,.gradebook-sort-button.active,.grading-status-ai_only) { background:var(--control-selected); color:#f3f6ff; }
html[data-theme=dark] .teacher-gradebook-tab:hover { background:var(--control-hover); }
html[data-theme=dark] :is(.grading-status-manual,.grading-status-ai_human,.badge-assigned.published) { background:#193e30; color:#a3e9bb; border-color:#44735b; }
html[data-theme=dark] .grading-status-pending { background:#42351f; color:#f4d691; }
html[data-theme=dark] .badge-assigned:not(.published) { background:hsl(var(--assignment-hue) 28% 22%); color:#edf2fc; border-color:hsl(var(--assignment-hue) 25% 45%); }
html[data-theme=dark] .teacher-overview-question { background-image:linear-gradient(#11141bb3,#11141bb3); color:#fff!important; border-color:var(--border)!important; }
html[data-theme=dark] .gradebook-group-table :is(th,td) { border-bottom:1px solid #495363; }
html[data-theme=dark] .gradebook-group-table tbody tr:nth-child(even) { background:#282d36; }
html[data-theme=dark] .gradebook-group-table tbody tr:hover { background:#2b3c53; }
html[data-theme=dark] .tests-list li { border-color:transparent; }
/* Personal labels stay legible on both table rows and detail surfaces. */
html[data-theme=dark] .personal-tag-chip { color:#bcd8ff; background:#263950; }

/* Main-shell colour trial: reverse the two neutral surfaces, not reading canvases. */
html[data-theme=dark] #view-main { background-color:#22242b; }
html[data-theme=dark] #view-main > .topbar { background-color:#11141b; }
html[data-theme=dark] #view-main > .page:not(#page-exam):not(#page-teacher-grading) {
  --card:#11141b;
  --theme-surface:#11141b;
  background-color:#22242b;
}
/* Nested dialogs retain their established surface hierarchy. */
html[data-theme=dark] #view-main .modal { --card:#22242b; --theme-surface:#22242b; }
/* Layout wrappers must not paint square corners behind rounded content islands. */
html[data-theme=dark] :is(#tests-preview-col,#splitter-tests-preview,#splitter-tests-list) { background-color:transparent; }
html[data-theme=dark] #page-tests .tests-layout { background-color:transparent; }
html[data-theme=dark] #splitter-tests-list { background-color:#22242b; }
/* Daytime chart-label halos are distracting on the dark canvas. */
html[data-theme=dark] .teacher-grade-trend [data-point-label] { stroke:none; }
html[data-theme=dark] .teacher-grade-trend [data-point-label=class] { fill:#80aaff; }
html[data-theme=dark] .teacher-grade-trend [data-point-label=student] { fill:#ffad70; }
html[data-theme=dark] .table-card { background-color:transparent; }
html[data-theme=dark] :is(.modal-content,.modal-box,.modal-panel) > .modal-body {
  border-bottom-left-radius:inherit; border-bottom-right-radius:inherit;
}

/* Shared header actions, in both appearances. Do not affect drawing tools. */
body :is(.exam-topbar,.practice-topline,.detail-footer-state) :is(.favorite-star,.theme-toggle) {
  box-sizing:border-box; flex:0 0 38px; width:38px; min-width:38px;
  height:38px; min-height:38px; padding:6px; top:0;
  display:inline-flex; align-items:center; justify-content:center; border-radius:8px;
}
body :is(.exam-topbar,.practice-topline,.detail-footer-state) .favorite-star::before {
  width:22px; height:22px; flex:0 0 22px;
}
body :is(.exam-topbar,.practice-topline,.detail-footer-state,.teacher-gradebook-head) :is(button.btn,.favorite-star,.theme-toggle):hover:not(:disabled),
body .theme-toggle:hover:not(:disabled) {
  background:var(--control-hover)!important; color:var(--control-selected-text)!important;
  border-color:transparent!important; transform:none!important;
}
body :is(.exam-topbar,.practice-topline,.detail-footer-state) .favorite-star.active:hover:not(:disabled) { color:#dcae38!important; }
body :is(.exam-topbar,.practice-topline,.detail-footer-state,.teacher-gradebook-head) :is(button.btn,.favorite-star,.theme-toggle):focus-visible {
  outline:2px solid var(--primary-2); outline-offset:2px;
}

html[data-theme=dark] :is(.teacher-grading-answer-column,.teacher-grading-answer-page,.teacher-grading-answer-top-buffer,.teacher-grading-answer-bottom-buffer,.teacher-ai-feedback) { background:#11141b; }
/* Match nested answer blocks and image padding to the writing surface, without
   changing controls, image filters, annotation layers, or light appearance. */
html[data-theme=dark] .teacher-grading-answer-column { --theme-surface:#11141b; }
html[data-theme=dark] .teacher-ai-feedback { color:#edf2fc; border-color:#495363; }
html[data-theme=dark] .teacher-ai-feedback-title { color:#edf2fc; }
html[data-theme=dark] .teacher-ai-feedback .ai-point-awarded { color:#92dfb4; }
html[data-theme=dark] .teacher-ai-feedback .ai-point-missed { color:#f3a0a8; }
html[data-theme=dark] .teacher-lesson-ai-summary li[data-has-graded=true] { color:hsl(var(--lesson-rate-hue) 58% 74%)!important; }
html[data-theme=dark] .teacher-lesson-ai-summary li[data-rate-band="0"][data-has-graded=true] { color:#f3a0a8!important; }
html[data-theme=dark] .teacher-lesson-ai-summary li[data-rate-band="100"][data-has-graded=true] { color:#92dfb4!important; }
html[data-theme=dark] .teacher-lesson-ai-summary .lesson-ai-point-ratio { background:transparent; }
/* Neutral actions share a visible dark hover, including legacy ID-scoped rules.
   Semantic actions, answer states and drawing palette colours keep their colours. */
html[data-theme=dark] :is(.btn:not(.primary):not(.danger):not(.orange):not(.success):not(.review-correct):not(.review-wrong):not(.exam-opt-btn),.msel-btn,.main-tab,.header-filter-btn,.sort-toggle,.collection-select-trigger,.favorite-control-icon,.paper-close,.theme-toggle):hover:not(:disabled):not([aria-disabled=true]) {
  background-color:var(--control-hover)!important; color:#edf2fc!important;
}
html[data-theme=dark] :is(#view-feedback,#view-share,#view-reroll,#view-remove):hover:not(:disabled)::after { background:var(--control-hover); }
html[data-theme=dark] #q-table .col-check input[type=checkbox],
html[data-theme=dark] .detail-footer-select input[type=checkbox] { border-color:#edf2fc; }
html[data-theme=dark] #q-table .col-check input[type=checkbox]::before,
html[data-theme=dark] .detail-footer-select input[type=checkbox]::before { background:#edf2fc; }
html[data-theme=dark] #q-table .col-check input[type=checkbox]:is(:checked,:indeterminate),
html[data-theme=dark] .detail-footer-select input[type=checkbox]:is(:checked,:indeterminate) { background:#285bd5; }
/* Keep native wheel/touch scrolling; only hide its visual track. */
body .annot-toolbar { scrollbar-width:none; -ms-overflow-style:none; }
body .annot-toolbar::-webkit-scrollbar { display:none; width:0; height:0; }
body .annot-toolbar .annot-color { width:24px; height:24px; min-height:24px; flex-shrink:0; margin:6px 3px; }
body .annot-toolbar .annot-color.selected::after { mask-size:20px; }