/* Opt-in management surfaces only: never recolor question/ink canvases. */
.member-settings-dialog .btn:not(.primary) { border:0; background:var(--control-neutral); color:var(--text); box-shadow:none; }
.member-settings-dialog .btn.danger { color:var(--danger,#dc2626); }
.member-settings-dialog .btn:not(.primary):hover:not(:disabled) { background:var(--control-hover); color:var(--control-selected-text); }
.member-settings-dialog .btn.danger:hover:not(:disabled) { color:var(--danger,#dc2626); }
.member-settings-dialog .btn:focus-visible { outline:2px solid var(--primary-2); outline-offset:2px; }
:root {
  --control-neutral: #f1f3f5;
  --control-hover: #e2ecfc;
  --control-selected: #dbeafe;
  --control-selected-text: #1d4ed8;
}
/* MyTests bottom actions only; palette actions retain their gradient layer. */
#export-modal .export-modal-body { width:min(760px,94vw); padding:24px; box-sizing:border-box; }
#export-modal .edit-title { margin:0 0 20px; }
#export-modal .export-options-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
#export-modal .export-options-grid label { min-width:0; gap:8px; }
#export-modal .export-check { min-height:32px; margin:0; }
#export-modal-error:empty { display:none; }
#export-modal .export-modal-actions { margin-top:20px; padding:12px 0 0; bottom:0; gap:8px; }
#export-modal .tests-preview-card { padding:0; min-height:0; border:0; box-shadow:none; gap:10px; }
#export-modal .tests-preview-card .preview-placeholder { padding:0; margin:0; }
#export-modal .tests-preview-card iframe { margin-top:0; box-sizing:border-box; }
#export-modal #tests-preview-error:empty { display:none; }
#export-modal #export-modal-submit { min-width:112px; }
#export-modal :is(select,.btn) { min-height:44px; border-radius:8px; box-sizing:border-box; border-color:transparent; }
#export-modal :is(select,.btn:not(.primary)) { background-color:var(--control-neutral); color:var(--text); }
#export-modal select {
  appearance:none; padding:0 36px 0 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%238196b4' stroke-width='1.6'/%3E%3C/svg%3E");
  background-position:right 14px center; background-repeat:no-repeat;
}
#export-modal :is(select,.btn:not(.primary)):is(:hover,:focus-visible):not(:disabled) { background-color:var(--control-hover); color:var(--control-selected-text); }
#export-modal select:has(option:checked:is([value=after_each],[value=at_end],[value=docx])) { background-color:var(--control-selected); color:var(--control-selected-text); }
#export-modal :is(select,.btn):focus-visible { outline:2px solid var(--primary-2); outline-offset:2px; }
@media(max-width:600px) {
  #export-modal .export-modal-body { padding:18px; }
  #export-modal .export-options-grid { grid-template-columns:minmax(0,1fr); }
}
#page-tests .tests-actions .btn {
  height:40px; box-sizing:border-box; border-color:transparent; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
}
#page-tests .tests-actions .btn:not(.primary):not(.test-gradebook) {
  background:var(--control-neutral); color:var(--text);
}
#page-tests .tests-actions .btn:not(.primary):not(.test-gradebook):is(:hover,:focus-visible,[aria-expanded=true]):not(:disabled):not([aria-disabled=true]) {
  background:var(--control-hover); color:var(--control-selected-text);
}
#page-tests .tests-actions .btn.danger,
html[data-theme=dark] #page-tests .tests-actions .btn.danger:hover { color:var(--danger)!important; }
#page-tests .tests-actions .btn:focus-visible { outline:2px solid var(--primary-2); outline-offset:2px; }
#page-tests .tests-actions .btn:disabled { opacity:.55; cursor:not-allowed; }
:where(#page-admin, #page-organisation, .org-modal, .org-filter-popup) {
  --management-control-height: 40px;
}
.org-class-detail .org-modal { --management-control-height: 44px; }
:is(#page-admin, #page-organisation, .org-modal, .org-filter-popup) :is(.btn, select:not([multiple])) {
  box-sizing: border-box;
  min-height: var(--management-control-height);
  height: var(--management-control-height);
  border-radius: 8px;
  padding-block: 0;
  vertical-align: middle;
}
:is(#page-admin, #page-organisation, .org-modal, .org-filter-popup) .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
:is(#page-admin, #page-organisation, .org-modal, .org-filter-popup) :where(.btn:not(.primary):not(.orange):not(.link), select:not([multiple])) {
  border-color: transparent;
  background-color: var(--control-neutral);
}
:is(#page-admin, #page-organisation, .org-modal, .org-filter-popup) select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  cursor: pointer;
}
:is(#page-admin, #page-organisation, .org-modal, .org-filter-popup) :is(.btn:not(.primary):not(.orange):not(.link), select:not([multiple])):where(:hover, :active, :focus-visible, [aria-expanded="true"]):not(:disabled) {
  background-color: var(--control-hover);
  border-color: transparent;
  color: var(--control-hover-text, var(--control-selected-text));
}
:is(#page-admin, #page-organisation, .org-modal, .org-filter-popup) select:not([multiple]):has(option:checked:not([value=""]):not([value="all"])) {
  background-color: var(--control-selected);
  color: var(--control-selected-text);
}
:is(#page-admin, #page-organisation, .org-modal, .org-filter-popup) .btn.danger,
:is(#page-admin, #page-organisation, .org-modal, .org-filter-popup) .btn.danger:hover {
  --control-hover-text: #b91c1c;
  color: var(--danger);
}
:is(#page-admin, #page-organisation, .org-modal, .org-filter-popup) :is(.btn, select, .org-sort, .org-filter-label):focus-visible {
  outline: 2px solid var(--primary-2);
  outline-offset: 2px;
}
:is(#page-admin, #page-organisation, .org-modal, .org-filter-popup) :is(.btn, select, .org-sort):disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
/* Page controls and sorting remain lightweight; selected sorting stays blue. */
:is(#page-admin, #page-organisation, .org-modal, .org-filter-popup) :is(.org-pages .btn, .admin-users-pagination .btn, .org-sort) {
  border-color: transparent;
  background-color: transparent;
}
:is(#page-admin, #page-organisation, .org-modal, .org-filter-popup) :is(.org-sort, .org-filter-label):is(:hover, :active, :focus-visible):not(:disabled) {
  background-color: var(--control-hover);
  color: var(--control-selected-text);
}
:is(#page-admin, #page-organisation, .org-modal, .org-filter-popup) :is(.org-sort.active, .org-filter-label.active) {
  background-color: var(--control-selected);
  color: var(--control-selected-text);
}
.org-sort, .org-filter-label { border-radius: 6px; }
.org-toolbar { align-items: center; }
.org-actions { flex-wrap: wrap; }
:is(#page-admin, #page-organisation, .org-modal) :is(.org-toolbar, .ai-provider-fields, .error-report-controls) input:not([type="checkbox"]):not([type="radio"]),
.org-modal label > input:not([type="checkbox"]):not([type="radio"]),
#page-admin .admin-users-search {
  box-sizing: border-box;
  min-height: var(--management-control-height);
  height: var(--management-control-height);
}
#page-admin .ai-provider-fields :is(label, input, select) { min-width: 0; width: 100%; }
#page-admin .ai-provider-qwen .ai-provider-fields {
  grid-template-columns: minmax(200px, 1.4fr) repeat(2, minmax(160px, 1fr)) repeat(2, minmax(100px, .6fr));
}
@media (max-width: 1100px) {
  #page-admin .ai-provider-qwen .ai-provider-fields { grid-template-columns: 1fr; }
}
/* Exam navigation: color-only migration. Preserve border widths, padding,
   font metrics and dimensions exactly, including range-number buttons. */
#exam-back, #exam-nav .nav-box {
  border-color: transparent;
  background-color: var(--control-neutral);
}
#exam-back:is(:hover, :active):not(:disabled),
#exam-nav .nav-box:is(:hover, :active):not(:disabled) {
  border-color: transparent;
  background-color: var(--control-hover);
  color: var(--control-selected-text);
}
#exam-nav .nav-box.answered,
#exam-nav .nav-box.review-correct { background-color: #dcfce7; color: #15803d; }
#exam-nav .nav-box.review-wrong { background-color: #fee2e2; color: var(--danger); }
#exam-nav .nav-box.review-saq { background-color: #fef3c7; color: #92400e; }
#exam-nav .nav-box:is(.answered, .review-correct):is(:hover, :active):not(:disabled) { background-color: #dcfce7; color: #15803d; }
#exam-nav .nav-box.review-wrong:is(:hover, :active):not(:disabled) { background-color: #fee2e2; color: var(--danger); }
#exam-nav .nav-box.review-saq:is(:hover, :active):not(:disabled) { background-color: #fef3c7; color: #92400e; }
#exam-nav .nav-box.current {
  outline: 2px solid var(--primary-2);
  box-shadow: none;
}
#exam-nav .nav-box.current:not(.answered):not(.review-correct):not(.review-wrong):not(.review-saq) {
  background-color: var(--control-selected);
  color: var(--control-selected-text);
}
#exam-back:focus-visible, #exam-nav .nav-box:focus-visible {
  outline: 2px solid var(--primary-2);
  outline-offset: 2px;
}

/* Answer choices carry selection, navigation actions do not. */
#exam-dock :is(.btn, .exam-opt-btn) { border-color: transparent; border-radius: 8px; }
#exam-dock :is(.response-option, .legacy-options .btn, .choice-part-option) { background: var(--control-neutral); color: var(--text); }
#exam-dock :is(#exam-prev, #exam-next, .response-clear) { background: transparent; }
#exam-dock :is(.btn, .exam-opt-btn):hover:not(:disabled) { background: var(--control-hover); color: var(--control-selected-text); }
#exam-dock #exam-dock-options :is(.response-option[aria-pressed="true"], .legacy-options .btn.selected, .choice-part-option.selected) {
  background: #bfdbfe; color: var(--control-selected-text);
}
#exam-dock :is(#exam-prev, #exam-next):hover:not(:disabled) { border-color: var(--primary-2); }
#exam-dock :is(.btn, .exam-opt-btn):focus-visible { outline: 2px solid var(--primary-2); outline-offset: 2px; }

/* Shared grading/lesson dock and standalone practice: preserve ink and score colors. */
:is(#teacher-grading-dock, .practice-answer-dock) { padding-block: 8.8px; }
#teacher-grading-dock .teacher-marker-control { height: 37.4px; }
:is(#teacher-grading-dock, .practice-answer-dock) :is(.btn, select, input[type="color"]) {
  box-sizing: border-box; height: 37.4px; min-height: 37.4px; border-radius: 8px;
  border-color: transparent;
}
:is(#teacher-grading-dock, .practice-answer-dock) .btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding-block: 0; flex-shrink: 0;
}
#teacher-grading-dock :is(.teacher-grading-student-toggle, #teacher-grading-ai, select, input[type="color"]) {
  background-color: var(--control-neutral); color: var(--text);
}
#teacher-grading-dock select {
  appearance: none; -webkit-appearance: none; padding: 0 28px 0 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
#teacher-grading-dock input[type="color"] { width: 34px; padding: 4px; }
.practice-answer-dock :is(#practice-prev, #practice-next) { background: transparent; }
.practice-answer-dock #practice-answer-area .btn:not(.review-correct):not(.review-wrong) {
  background: var(--control-neutral); color: var(--text);
}
.practice-answer-dock #practice-answer-area .btn:not(.review-correct):not(.review-wrong):hover:not(:disabled) {
  background: var(--control-hover); color: var(--control-selected-text);
}
.practice-answer-dock #practice-answer-area .btn.selected:not(.review-correct):not(.review-wrong) {
  background: #bfdbfe; color: var(--control-selected-text);
}
.practice-answer-dock :is(#practice-prev, #practice-next):hover:not(:disabled) {
  background: var(--control-hover); color: #2563eb; border-color: var(--primary-2);
}
#teacher-grading-dock :is(#teacher-grading-prev, #teacher-grading-next) { background: transparent; }
#teacher-grading-dock :is(.teacher-grading-student-toggle, #teacher-grading-ai, #teacher-grading-prev, #teacher-grading-next, select):is(:hover, :active, [aria-expanded="true"]):not(:disabled) {
  background-color: var(--control-hover); color: #2563eb;
}
#teacher-grading-dock :is(#teacher-grading-prev, #teacher-grading-next):hover:not(:disabled) { border-color: var(--primary-2); }
:is(#teacher-grading-dock, .practice-answer-dock) :is(.btn, select, input[type="color"]):focus-visible {
  outline: 2px solid var(--primary-2); outline-offset: 2px;
}
/* Assignment captions are intentionally retained. Match the existing 38px inputs. */
:is(#assign-modal, #assign-edit-modal) :is(select:not([multiple]), .msel-btn, .btn) {
  height: 38px; min-height: 38px; border-radius: 8px; border-color: transparent;
}
:is(#assign-modal, #assign-edit-modal) :is(select:not([multiple]), .msel-btn, .btn:not(.primary)) {
  background-color: var(--control-neutral); color: var(--text);
}
:is(#assign-modal, #assign-edit-modal) select:not([multiple]) {
  appearance: none; -webkit-appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
}
:is(#assign-modal, #assign-edit-modal) :is(select, .msel-btn, .btn:not(.primary)):hover:not(:disabled) {
  background-color: var(--control-hover); color: var(--control-selected-text);
}
:is(#assign-modal, #assign-edit-modal) .msel-btn[aria-expanded="true"]:not(:disabled) { background-color: var(--control-hover); color: var(--control-selected-text); }
:is(#assign-modal, #assign-edit-modal) :is(select:has(option:checked:not([value=""])), .msel-btn.active):not(:disabled) {
  background-color: var(--control-selected); color: var(--control-selected-text);
}
:is(#assign-modal, #assign-edit-modal) :is(select, .msel-btn, .btn):focus-visible { outline: 2px solid var(--primary-2); outline-offset: 2px; }
:is(#assign-modal, #assign-edit-modal) select:disabled { background-color: var(--control-neutral); color: var(--muted); opacity: .6; }
:is(#assign-modal, #assign-edit-modal) .timer-stepper-controls button {
  width: 38px; height: 38px; border-color: transparent; background: transparent;
}
:is(#assign-modal, #assign-edit-modal) .timer-stepper-controls button:hover:not(:disabled) { background: var(--control-hover); color: var(--control-selected-text); }

/* Native-inspired solid toolbar. No translucency or backdrop effects. */
.annot-toolbar { --annot-control-size: 44px; box-sizing: border-box; width: calc((var(--annot-control-size) + 12px) * .85); gap: 2px; padding: 8px 1px; border-radius: 15px; background: var(--theme-surface, #fff); backdrop-filter: none; max-height: calc(100dvh - 8px); }
.annot-toolbar.annot-compact { --annot-control-size: 36px; }
.annot-toolbar > * { max-height: 48px; }
.annot-toolbar :is(.annot-tool, .annot-size, .annot-clear, .annot-settings-button) {
  box-sizing: border-box; width: 100%; height: var(--annot-control-size); min-height: var(--annot-control-size);
  display: flex; align-items: center; justify-content: center; padding: 4px;
  border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--theme-ink, #202124); cursor: pointer;
}
.annot-toolbar :is(.annot-tool, .annot-size, .annot-clear, .annot-settings-button):hover:not(:disabled) { background: var(--control-hover); border-color: transparent; }
.annot-toolbar .annot-tool.selected { background: var(--control-selected); outline: none; border-color: transparent; }
.annot-toolbar .annot-size.selected { background: transparent; border-color: transparent; outline: none; }
.annot-toolbar :is(.annot-tool, .annot-settings-button) svg { width: 30px; height: 30px; }
.annot-toolbar .annot-tool svg[viewBox="0 0 24 24"] { stroke-width: 1.25; }
.annot-toolbar .annot-color { position: relative; width: 30px; height: 30px; min-height: 30px; margin: 3px 0; border: 1px solid rgba(15,23,42,.16); }
.annot-toolbar .annot-color.selected { outline: 3px solid var(--primary-2); outline-offset: 1px; }
.annot-toolbar .annot-color.selected::after { content: ''; position: absolute; inset: 0; background: var(--theme-surface, white); mask: url('/static/icons/notebook/check.png') center / 26px no-repeat; filter: drop-shadow(0 1px 1px #475569); }
.annot-toolbar > .annot-settings-button { position: sticky; bottom: -8px; background: var(--theme-surface, #fff); box-shadow: 0 -4px 6px #fff; z-index: 1; }
.annot-toolbar .annot-custom-hidden { display: none !important; }
.annot-toolbar button:focus-visible { outline: 2px solid var(--primary-2); outline-offset: -2px; }
.notebook-icon { position: relative; display: inline-block; width: 30px; height: 30px; flex: 0 0 30px; line-height: 0; }
.notebook-icon img { display: block; width: 30px; height: 30px; object-fit: contain; }
.notebook-icon-tip { position: absolute; inset: 0; mask-size: contain; mask-repeat: no-repeat; mask-position: center; }
.toolbar-color-symbol { display: inline-block; width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(#ef4444, #f59e0b, #22c55e, #2563eb, #a78bfa, #ef4444); }
.toolbar-settings { width: min(400px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-sizing: border-box; padding: 0; border: 1px solid var(--border); border-radius: 16px; color: var(--text); background: var(--theme-surface, #fff); overflow: hidden; }
.toolbar-settings[open] { display: flex; flex-direction: column; }
.toolbar-settings::backdrop { background: rgba(15,23,42,.28); }
.toolbar-settings-header, .toolbar-settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; flex-shrink: 0; }
.toolbar-settings-header { border-bottom: 1px solid var(--border); }
.toolbar-settings-actions { border-top: 1px solid var(--border); }
.toolbar-settings h2 { margin: 0; font-size: 20px; }
.toolbar-settings h3 { font-size: 14px; margin: 16px 0 6px; color: var(--muted); font-weight: 600; }
.toolbar-settings p { color: var(--muted); font-size: 13px; }
.toolbar-settings-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 0 16px 8px; }
.toolbar-settings-hint { margin: 10px 0; line-height: 1.5; }
.toolbar-settings [data-tool-group] { min-height: 52px; border-radius: 10px; background: var(--theme-surface, #f8f9fa); padding: 4px; }
.toolbar-settings-row { display: flex; gap: 12px; align-items: center; min-height: 48px; border-radius: 8px; }
.toolbar-settings-row.dragging { pointer-events: none; opacity: .4; background: var(--control-selected); }
.toolbar-settings-glyph { position: relative; display: flex; flex: 1; align-items: center; height: 44px; }
.toolbar-history-pair { gap: 8px; }
.toolbar-settings-glyph small { position: absolute; left: 27px; bottom: 3px; font-size: 10px; color: var(--muted); }
.toolbar-settings :is(.toolbar-icon-button, .toolbar-drag-handle) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; font: inherit; }
.toolbar-settings .toolbar-drag-handle { width: 44px; padding: 0; touch-action: none; cursor: grab; }
.toolbar-drag-handle svg { width: 30px; height: 30px; fill: #64748b; }
.toolbar-settings :is(.toolbar-icon-button, .toolbar-drag-handle):hover:not(:disabled) { background: var(--control-hover); color: var(--control-selected-text); }
.toolbar-settings :is(button, input):focus-visible { outline: 2px solid var(--primary-2); outline-offset: 1px; }
.toolbar-settings button:disabled { opacity: .3; cursor: default; }
.toolbar-settings :is(.toolbar-settings-header, .toolbar-settings-actions) .toolbar-icon-button { color: var(--control-selected-text); background: var(--control-neutral); }
.toolbar-settings-count { display: flex; gap: 4px; align-items: center; margin-top: 14px; }
.toolbar-settings-count h3 { flex: 1; margin: 0; }
.toolbar-settings-count [data-count] { min-width: 24px; text-align: center; font-variant-numeric: tabular-nums; }
.toolbar-settings-colors { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 2px; }
.toolbar-color-picker { display: block; width: 34px; height: 34px; margin: 5px; border-radius: 50%; position: relative; box-shadow: inset 0 0 0 1px rgba(15,23,42,.12); }
.toolbar-color-picker:focus-within { outline: 2px solid var(--primary-2); outline-offset: 2px; }
.toolbar-settings-colors input { position: absolute; inset: -5px; width: 44px; height: 44px; opacity: 0; cursor: pointer; padding: 0; }
.toolbar-option { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; font-size: 14px; line-height: 1.4; }
.toolbar-option input { appearance: none; flex: 0 0 44px; width: 44px; height: 28px; margin: 8px 0; border: 0; border-radius: 14px; background: #cbd5e1; cursor: pointer; position: relative; }
.toolbar-option input::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--theme-surface, #fff); box-shadow: 0 1px 2px #94a3b8; }
.toolbar-option input:checked { background: var(--primary-2); }
.toolbar-option input:checked::after { left: 19px; }
.toolbar-settings [role="status"]:empty { margin: 0; }