/* ARIA student space: pure black and white, matching the approved demo.
   Every component rule starts with :root[data-theme] so it outranks the automatic
   dark-mode rules that aria-ui.js generates (those start with html[data-theme="dark"]). */

:root {
  --ag-bg: #ffffff; --ag-bg-tint-1: transparent; --ag-bg-tint-2: transparent;
  --ag-glass: #ffffff; --ag-glass-strong: #ffffff; --ag-glass-solid: #ffffff; --ag-glass-edge: #e7e7e7;
  --ag-fill: #f5f5f5; --ag-fill-strong: #ececec; --ag-hairline: #e7e7e7; --ag-hairline-strong: #d2d2d2;
  --ag-text: #000000; --ag-text-2: #262626; --ag-text-3: #6f6f6f; --ag-text-inverse: #ffffff;
  --ag-accent: #000000; --ag-accent-hover: #262626; --ag-accent-bright: #000000; --ag-accent-soft: #f5f5f5;
  --ag-shadow: none; --ag-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.10); --ag-blur: none;
  --ag-font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ag-font-display: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono-serif: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --mono-code: 'Geist Mono', ui-monospace, Consolas, monospace;
  --mono-soft: #f5f5f5; --mono-soft-2: #ececec; --mono-inv: #000000; --mono-on-inv: #ffffff;
  --mono-ease: cubic-bezier(0.32, 0.72, 0, 1); /* the iOS settle, matching --ag-ease */
}
html[data-theme="dark"] {
  --ag-bg: #000000; --ag-glass: #000000; --ag-glass-strong: #0d0d0d; --ag-glass-solid: #0d0d0d; --ag-glass-edge: #1c1c1c;
  --ag-fill: #0d0d0d; --ag-fill-strong: #171717; --ag-hairline: #1c1c1c; --ag-hairline-strong: #2e2e2e;
  --ag-text: #ffffff; --ag-text-2: #dcdcdc; --ag-text-3: #8c8c8c; --ag-text-inverse: #000000;
  --ag-accent: #ffffff; --ag-accent-hover: #dcdcdc; --ag-accent-bright: #ffffff; --ag-accent-soft: #0d0d0d;
  --ag-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.6);
  --mono-soft: #0d0d0d; --mono-soft-2: #171717; --mono-inv: #ffffff; --mono-on-inv: #000000;
}

:root[data-theme] body { background: var(--ag-bg) !important; color: var(--ag-text) !important; font-family: var(--ag-font) !important; -webkit-font-smoothing: antialiased; }
:root[data-theme] body::before, :root[data-theme] body::after { display: none !important; }
:root[data-theme] .material-symbols-outlined { font-variation-settings: 'wght' 350, 'FILL' 0; }
:root[data-theme] .mono-fill { font-variation-settings: 'wght' 350, 'FILL' 1; }

/* Flat surfaces */
:root[data-theme] .ag-card, :root[data-theme] .ag-glass, :root[data-theme] .ag-sheet { background: var(--ag-bg) !important; border: 1px solid var(--ag-hairline) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:root[data-theme] .ag-sheet { border-color: var(--ag-hairline-strong) !important; box-shadow: var(--ag-shadow-lg) !important; border-radius: 18px !important; }
:root[data-theme] .ag-card-interactive { transition: border-color .2s ease, transform .25s var(--mono-ease) !important; }
:root[data-theme] .ag-card-interactive:hover { border-color: var(--ag-text) !important; transform: translateY(-2px); }

/* Buttons */
:root[data-theme] .ag-btn { border-radius: 999px !important; box-shadow: none !important; font-weight: 600 !important; }
:root[data-theme] .ag-btn-primary { background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; border: 1px solid var(--mono-inv) !important; }
:root[data-theme] .ag-btn-secondary { background: transparent !important; color: var(--ag-text) !important; border: 1px solid var(--ag-hairline-strong) !important; }
:root[data-theme] .ag-btn-secondary:hover { border-color: var(--ag-text) !important; }
:root[data-theme] .ag-badge { background: transparent !important; border: 1px solid var(--ag-hairline-strong) !important; color: var(--ag-text) !important; font-family: var(--mono-code) !important; font-weight: 500 !important; font-size: 11.5px !important; }

/* Sidebar: rounded, floating, scrolls on short screens */
:root[data-theme] #sidebar {
  display: none; flex-direction: column; gap: 12px;
  width: 268px !important; height: calc(100vh - 24px) !important; height: calc(100dvh - 24px) !important;
  margin: 12px 0 12px 12px !important; padding: 20px 14px 14px !important;
  background: var(--mono-soft) !important; border: 1px solid var(--ag-hairline) !important; border-radius: 28px !important;
  box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow: hidden !important;
}
@media (min-width: 768px) { :root[data-theme] #sidebar { display: flex !important; } }
:root[data-theme] #sidebar > .space-y-6 { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; scrollbar-color: var(--ag-hairline-strong) transparent; }
:root[data-theme] #sidebar > .space-y-6 > * + * { margin-top: 10px !important; }
:root[data-theme] #sidebar > .pt-3 { flex: none; margin: 0 !important; padding-top: 12px !important; border-top: 1px solid var(--ag-hairline) !important; }
:root[data-theme] #sidebar .dash-brand { font: 700 22px/1 var(--ag-font) !important; letter-spacing: -.02em; }
:root[data-theme] #sidebar .dash-muted { font-size: 13px !important; color: var(--ag-text-3) !important; }
:root[data-theme] #sidebar nav { display: flex; flex-direction: column; gap: 2px; }
:root[data-theme] .side-group { margin: 0 !important; padding: 16px 12px 6px !important; font: 500 11px var(--mono-code) !important; letter-spacing: .12em !important; color: var(--ag-text-3) !important; }
:root[data-theme] .side-link { display: flex !important; align-items: center; gap: 12px; width: 100%; min-height: 42px !important; margin: 0 !important; padding: 0 12px !important; border: 0 !important; border-radius: 14px !important; background: transparent !important; color: var(--ag-text-2) !important; font: 500 14.5px var(--ag-font) !important; text-decoration: none; transition: background-color .2s, color .2s; }
:root[data-theme] .side-link:hover { background: var(--mono-soft-2) !important; color: var(--ag-text) !important; }
:root[data-theme] .side-link .material-symbols-outlined { font-size: 20px !important; color: inherit !important; }
:root[data-theme] .side-link.is-active { background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; }
:root[data-theme] .side-link.is-active .material-symbols-outlined { font-variation-settings: 'wght' 350, 'FILL' 1; }
:root[data-theme] .aria-admin-link { display: flex !important; align-items: center; gap: 10px; margin-top: 10px !important; padding: 9px 12px !important; border: 1px dashed var(--ag-hairline-strong) !important; border-radius: 12px !important; background: none !important; color: var(--ag-text-3) !important; font: 500 13px var(--ag-font) !important; text-decoration: none; transition: color .2s, border-color .2s; }
:root[data-theme] .aria-admin-link:hover { color: var(--ag-text) !important; border-color: var(--ag-text) !important; }
:root[data-theme] .aria-admin-link .material-symbols-outlined { font-size: 18px; }
:root[data-theme] .aria-admin-tag { margin-left: auto; font: 500 10px var(--mono-code); letter-spacing: .08em; text-transform: uppercase; }
:root[data-theme] #sidebar .dash-avatar { width: 34px !important; height: 34px !important; background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; }
:root[data-theme] #sidebar .dash-avatar .material-symbols-outlined { font-size: 18px; }
:root[data-theme] .dash-icon-btn { color: var(--ag-text-2) !important; background: transparent !important; border-radius: 999px !important; }
:root[data-theme] .dash-icon-btn:hover { background: var(--mono-soft-2) !important; color: var(--ag-text) !important; }

/* Top bar */
:root[data-theme] .dash-header, :root[data-theme] .chat-header, :root[data-theme] .tp-bar, :root[data-theme] #hub-bar { background: var(--ag-bg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom: 1px solid var(--ag-hairline) !important; box-shadow: none !important; }
:root[data-theme] .dash-header { min-height: 66px !important; }
:root[data-theme] .dash-search { height: 42px !important; background: var(--ag-bg) !important; border: 1px solid var(--ag-hairline-strong) !important; border-radius: 999px !important; box-shadow: none !important; transition: border-color .2s; }
:root[data-theme] .dash-search:focus-within { border-color: var(--ag-text) !important; }
:root[data-theme] .dash-search input, :root[data-theme] .dash-search input:focus { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important; color: var(--ag-text) !important; font: 14.5px var(--ag-font) !important; -webkit-appearance: none; appearance: none; }
:root[data-theme] .dash-search input::-webkit-search-cancel-button { display: none; }
:root[data-theme] .dash-pill { height: 38px !important; min-height: 38px !important; padding: 0 14px !important; gap: 7px !important; background: var(--ag-bg) !important; border: 1px solid var(--ag-hairline-strong) !important; border-radius: 999px !important; color: var(--ag-text) !important; font: 500 13.5px var(--ag-font) !important; box-shadow: none !important; transition: border-color .2s; }
:root[data-theme] .dash-pill:hover { border-color: var(--ag-text) !important; }
:root[data-theme] .dash-pill .material-symbols-outlined { font-size: 19px !important; }
:root[data-theme] #header-upgrade-pro-btn { height: 38px !important; min-height: 38px !important; padding: 0 16px !important; background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; border-color: var(--mono-inv) !important; font-size: 13.5px !important; }
:root[data-theme] .mono-theme-btn { width: 38px !important; min-width: 38px !important; padding: 0 !important; justify-content: center; }
:root[data-theme] .mono-theme-light { display: none; }
html[data-theme="dark"] .mono-theme-btn .mono-theme-light { display: inline-block; }
html[data-theme="dark"] .mono-theme-btn .mono-theme-dark { display: none; }
:root[data-theme] .dash-menu-item:hover { background: var(--mono-soft) !important; }

/* Autofilled fields keep the page colours */
:root[data-theme] input:-webkit-autofill, :root[data-theme] input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ag-text) !important; -webkit-box-shadow: 0 0 0 1000px var(--ag-bg) inset !important; transition: background-color 9999s ease 0s; }

/* Home: greeting and ask box */
:root[data-theme] .dash-inner { max-width: 1180px !important; gap: 0 !important; padding: 22px 16px 120px !important; }
@media (min-width: 1024px) { :root[data-theme] .dash-inner { padding: 20px 32px 72px !important; } }
:root[data-theme] .dash-inner > section + section { margin-top: 44px; }
:root[data-theme] .mono-hero { display: block !important; padding: 8px 0 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; }
:root[data-theme] .mono-eyebrow { margin: 0; font: 500 11px var(--mono-code); letter-spacing: .12em; text-transform: uppercase; color: var(--ag-text-3); }
:root[data-theme] .mono-greet { margin: 12px 0 10px !important; font: 400 clamp(44px, 9vw, 76px)/.95 var(--mono-serif) !important; letter-spacing: -.015em !important; color: var(--ag-text) !important; text-wrap: balance; }
:root[data-theme] .mono-greet em { font-style: italic; }
:root[data-theme] .mono-greet .user-first-name { text-transform: capitalize; }
:root[data-theme] .mono-lede { margin: 0; max-width: 52ch; font-size: 16px; line-height: 1.5; color: var(--ag-text-3); }
:root[data-theme] .mono-ask { display: flex; align-items: center; gap: 6px; margin-top: 24px; padding: 6px 6px 6px 18px; border: 1px solid var(--ag-hairline-strong); border-radius: 999px; background: var(--ag-bg) !important; box-shadow: none !important; transition: border-color .2s; }
:root[data-theme] .mono-ask:focus-within { border-color: var(--ag-text); }
:root[data-theme] .mono-ask > .material-symbols-outlined { color: var(--ag-text-3); font-size: 20px; }
:root[data-theme] .mono-ask input, :root[data-theme] .mono-ask input:focus, :root[data-theme] .mono-ask input:hover { flex: 1; min-width: 0; height: 44px; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; font: 16px var(--ag-font) !important; color: var(--ag-text) !important; }
:root[data-theme] .mono-ask input::placeholder { color: var(--ag-text-3) !important; }
:root[data-theme] .mono-ask-chip { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--ag-hairline) !important; background: var(--mono-soft) !important; color: var(--ag-text) !important; display: grid; place-items: center; cursor: pointer; }
:root[data-theme] .mono-send { width: 44px; height: 44px; flex: none; border-radius: 50% !important; border: 0 !important; display: grid; place-items: center; background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; cursor: pointer; transition: transform .15s; }
:root[data-theme] .mono-send:active { transform: scale(.92); }

/* Section headings */
:root[data-theme] .dash-section-head { margin-bottom: 16px !important; align-items: flex-end !important; }
:root[data-theme] .dash-section-head h2, :root[data-theme] .dash-section-head h3 { display: flex; align-items: center; margin: 0; font: 400 38px/1 var(--mono-serif) !important; letter-spacing: 0 !important; color: var(--ag-text) !important; }
:root[data-theme] .dash-section-head h2 > .material-symbols-outlined, :root[data-theme] .dash-section-head h3 > .material-symbols-outlined, :root[data-theme] .dash-section-head > .material-symbols-outlined, :root[data-theme] .dash-section-head .dash-row > .material-symbols-outlined:first-child { display: none !important; }
:root[data-theme] #clear-all-courses-btn { height: 36px; padding: 0 12px !important; border: 0 !important; border-radius: 999px !important; background: none !important; color: var(--ag-text-3) !important; font: 500 13.5px var(--ag-font) !important; }
:root[data-theme] #clear-all-courses-btn:hover { color: var(--ag-text) !important; background: var(--mono-soft) !important; }
:root[data-theme] #clear-all-courses-btn .material-symbols-outlined { display: none; }

/* My courses */
:root[data-theme] .dash-courses { display: grid !important; gap: 12px !important; grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 640px) { :root[data-theme] .dash-courses { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
:root[data-theme] .mono-course { display: flex !important; flex-direction: column; gap: 4px !important; padding: 20px !important; border: 1px solid var(--ag-hairline) !important; border-radius: 24px !important; background: var(--ag-bg) !important; box-shadow: none !important; cursor: pointer; transition: border-color .2s, transform .25s var(--mono-ease); }
:root[data-theme] .mono-course:hover { border-color: var(--ag-text) !important; transform: translateY(-2px); }
:root[data-theme] .mono-course-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
:root[data-theme] .mono-course-board { font: 500 11.5px/1.5 var(--mono-code); letter-spacing: .08em; text-transform: uppercase; color: var(--ag-text-3); }
:root[data-theme] .mono-course-board b { color: var(--ag-text); font-weight: 500; }
:root[data-theme] .mono-course-x { width: 30px; height: 30px; flex: none; margin: -6px -6px 0 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ag-text-3); cursor: pointer; opacity: .6; transition: opacity .2s, background-color .2s, color .2s; }
:root[data-theme] .mono-course:hover .mono-course-x { opacity: 1; }
:root[data-theme] .mono-course-x:hover { background: var(--mono-soft); color: var(--ag-text); }
:root[data-theme] .mono-course-x .material-symbols-outlined { font-size: 18px; }
:root[data-theme] .mono-course .dash-course-name { margin: 6px 0 0 !important; font: 400 32px/1.05 var(--mono-serif) !important; letter-spacing: 0 !important; color: var(--ag-text) !important; }
:root[data-theme] .mono-strip { display: flex; gap: 2px; height: 12px; margin: 14px 0 10px; }
:root[data-theme] .mono-strip i { flex: 1; border-radius: 2px; background: var(--ag-hairline-strong); transition: background-color .3s; }
:root[data-theme] .mono-strip i.done { background: var(--ag-text); }
:root[data-theme] .mono-course-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ag-text-3); }
:root[data-theme] .mono-course-meta b { color: var(--ag-text); font-weight: 600; font-variant-numeric: tabular-nums; }
:root[data-theme] .mono-course .dash-course-foot { margin-top: 10px !important; padding-top: 10px !important; border-top: 1px solid var(--ag-hairline) !important; }
:root[data-theme] .dash-link-btn { color: var(--ag-text) !important; background: transparent !important; }
:root[data-theme] .dash-link-btn:hover { background: var(--mono-soft) !important; }
:root[data-theme] #add-course-card, :root[data-theme] .dash-add-card { grid-column: 1 / -1; border: 1px dashed var(--ag-hairline-strong) !important; border-radius: 24px !important; background: none !important; box-shadow: none !important; }
:root[data-theme] #add-course-card:hover, :root[data-theme] .dash-add-card:hover { border-color: var(--ag-text) !important; }
:root[data-theme] .dash-add-inner { flex-direction: row !important; justify-content: flex-start !important; min-height: 0 !important; padding: 16px 20px !important; gap: 14px !important; text-align: left !important; }
:root[data-theme] .dash-empty { border: 1px dashed var(--ag-hairline-strong) !important; border-radius: 24px !important; background: none !important; }
:root[data-theme] .dash-empty h3, :root[data-theme] .dash-empty h4 { font: 400 30px var(--mono-serif) !important; }
:root[data-theme] .ag-skeleton { background: var(--mono-soft) !important; }

/* Study tools */
:root[data-theme] .dash-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
@media (min-width: 640px) { :root[data-theme] .dash-actions { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 1180px) { :root[data-theme] .dash-actions { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } }
:root[data-theme] .dash-action { min-height: 0 !important; gap: 16px !important; padding: 16px !important; border-radius: 20px !important; justify-content: flex-start !important; }
:root[data-theme] .dash-action-icon { width: 40px !important; height: 40px !important; border-radius: 12px !important; background: var(--mono-soft-2) !important; color: var(--ag-text) !important; }
:root[data-theme] .dash-action-icon .material-symbols-outlined { font-size: 20px !important; color: inherit !important; }
:root[data-theme] .dash-action-title { font-size: 14.5px !important; font-weight: 600 !important; color: var(--ag-text) !important; }
:root[data-theme] .dash-action-sub { font-size: 12.5px !important; color: var(--ag-text-3) !important; }

/* Study coach */
:root[data-theme] .dash-coach { gap: 20px !important; padding: 22px !important; background: var(--mono-soft) !important; border: 1px solid var(--ag-hairline) !important; border-radius: 28px !important; }
:root[data-theme] .dash-coach-head { padding-bottom: 20px !important; border-bottom: 1px solid var(--ag-hairline) !important; }
:root[data-theme] .dash-coach-head > .dash-row > .dash-action-icon { display: none !important; }
:root[data-theme] .dash-coach-title { font: 600 16px var(--ag-font) !important; letter-spacing: 0 !important; }
:root[data-theme] .dash-grade { padding: 0 !important; background: none !important; border: 0 !important; }
:root[data-theme] .dash-grade-label { font: 500 11px var(--mono-code) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--ag-text-3) !important; }
:root[data-theme] .dash-grade-value { font: 400 56px/1 var(--mono-serif) !important; color: var(--ag-text) !important; }
:root[data-theme] .dash-panel { background: var(--ag-bg) !important; border: 1px solid var(--ag-hairline) !important; border-radius: 20px !important; box-shadow: none !important; }
:root[data-theme] .dash-panel h4 { font: 600 15px var(--ag-font) !important; color: var(--ag-text) !important; }
:root[data-theme] .dash-bar { background: var(--ag-hairline-strong) !important; border-radius: 8px 8px 3px 3px !important; box-shadow: none !important; }
:root[data-theme] .dash-bar-col:last-child .dash-bar { background: var(--ag-text) !important; }
:root[data-theme] .dash-bar-day { font: 11px var(--mono-code) !important; color: var(--ag-text-3) !important; }
:root[data-theme] .dash-mastery-row:hover { background: var(--mono-soft) !important; }
:root[data-theme] .dash-mastery .dash-progress, :root[data-theme] .dash-progress { height: 6px !important; border-radius: 3px !important; background: var(--ag-hairline) !important; }
:root[data-theme] .dash-progress-fill { background: var(--ag-text) !important; border-radius: 3px !important; }
:root[data-theme] .dash-advice { font: 400 21px/1.3 var(--mono-serif) !important; color: var(--ag-text) !important; }

/* Ask ARIA chat */
:root[data-theme] #chat-view { background: var(--ag-bg) !important; }
:root[data-theme] .chat-title { font: 400 30px/1 var(--mono-serif) !important; letter-spacing: 0 !important; color: var(--ag-text) !important; }
:root[data-theme] .chat-icon-btn, :root[data-theme] .chat-tool-btn { background: transparent !important; color: var(--ag-text) !important; border-radius: 999px !important; box-shadow: none !important; }
:root[data-theme] .chat-icon-btn:hover, :root[data-theme] .chat-tool-btn:hover { background: var(--mono-soft) !important; }
:root[data-theme] .chat-welcome h2, :root[data-theme] .chat-welcome h1 { font: 400 clamp(40px, 8vw, 56px)/1 var(--mono-serif) !important; letter-spacing: 0 !important; color: var(--ag-text) !important; }
:root[data-theme] .chat-chip { background: var(--mono-soft) !important; border: 1px solid var(--ag-hairline) !important; color: var(--ag-text-2) !important; font: 14px var(--ag-font) !important; }
:root[data-theme] .chat-chip:hover { border-color: var(--ag-text) !important; color: var(--ag-text) !important; }
:root[data-theme] .chat-user { background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; border: 0 !important; border-radius: 22px 22px 6px 22px !important; font-size: 15.5px !important; }
:root[data-theme] .chat-user img { border-radius: 14px; }
:root[data-theme] .chat-aria-name { font: 500 12px var(--mono-code) !important; letter-spacing: .06em; color: var(--ag-text-3) !important; }
:root[data-theme] .chat-markdown { font-size: 16px !important; line-height: 1.65 !important; color: var(--ag-text-2) !important; }
:root[data-theme] .chat-markdown h1, :root[data-theme] .chat-markdown h2, :root[data-theme] .chat-markdown h3, :root[data-theme] .chat-markdown h4 { font-family: var(--mono-serif) !important; font-weight: 400 !important; letter-spacing: 0 !important; color: var(--ag-text) !important; line-height: 1.12 !important; }
:root[data-theme] .chat-markdown h1 { font-size: 34px !important; }
:root[data-theme] .chat-markdown h2 { font-size: 30px !important; }
:root[data-theme] .chat-markdown h3 { font-size: 25px !important; }
:root[data-theme] .chat-markdown h4 { font-size: 21px !important; }
:root[data-theme] .chat-markdown strong { color: var(--ag-text) !important; }
:root[data-theme] .chat-markdown a { color: var(--ag-text) !important; text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme] .chat-markdown code { font-family: var(--mono-code) !important; background: var(--mono-soft) !important; border: 1px solid var(--ag-hairline) !important; color: var(--ag-text) !important; border-radius: 6px !important; }
:root[data-theme] .chat-markdown pre { font-family: var(--mono-code) !important; background: var(--mono-soft) !important; border: 1px solid var(--ag-hairline) !important; border-radius: 14px !important; color: var(--ag-text) !important; }
:root[data-theme] .chat-markdown pre code { border: 0 !important; background: none !important; }
:root[data-theme] .chat-markdown blockquote { margin-left: 0 !important; padding: 14px 16px !important; border: 1px solid var(--ag-hairline-strong) !important; border-radius: 16px !important; background: none !important; color: var(--ag-text) !important; }
:root[data-theme] .chat-markdown table { border: 1px solid var(--ag-hairline) !important; border-radius: 14px; border-collapse: separate !important; border-spacing: 0; overflow: hidden; }
:root[data-theme] .chat-markdown th { font: 500 10.5px var(--mono-code) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--ag-text-3) !important; background: none !important; }
:root[data-theme] .chat-markdown th, :root[data-theme] .chat-markdown td { border-color: var(--ag-hairline) !important; }
:root[data-theme] .chat-card { background: var(--ag-bg) !important; border: 1px solid var(--ag-hairline) !important; border-radius: 18px !important; }
:root[data-theme] .chat-error { background: var(--mono-soft) !important; border: 1px solid var(--ag-hairline-strong) !important; color: var(--ag-text) !important; border-radius: 16px !important; }
:root[data-theme] .chat-dock { background: var(--ag-bg) !important; }
:root[data-theme] .chat-dock-inner > div:has(textarea), :root[data-theme] .chat-composer { background: var(--ag-bg) !important; border: 1px solid var(--ag-hairline-strong) !important; border-radius: 26px !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:root[data-theme] .chat-dock-inner > div:has(textarea):focus-within, :root[data-theme] .chat-composer:focus-within { border-color: var(--ag-text) !important; }
:root[data-theme] .chat-dock textarea, :root[data-theme] .chat-dock textarea:focus { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important; color: var(--ag-text) !important; font: 16px/1.45 var(--ag-font) !important; }
:root[data-theme] .chat-dock textarea::placeholder { color: var(--ag-text-3) !important; }
:root[data-theme] .chat-send { background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; box-shadow: none !important; border-radius: 50% !important; }
:root[data-theme] .chat-model-btn { background: var(--mono-soft) !important; border: 1px solid var(--ag-hairline) !important; border-radius: 999px !important; color: var(--ag-text) !important; box-shadow: none !important; }
:root[data-theme] .chat-model-option:hover, :root[data-theme] .chat-model-option.is-selected { background: var(--mono-soft) !important; }
:root[data-theme] .chat-note { color: var(--ag-text-3) !important; }
:root[data-theme] .chat-history { background: var(--ag-bg) !important; border-color: var(--ag-hairline) !important; }
:root[data-theme] .chat-history-item:hover { background: var(--mono-soft) !important; }
:root[data-theme] .chat-offline { background: var(--ag-bg) !important; border: 1px solid var(--ag-hairline) !important; border-radius: 18px !important; }
:root[data-theme] .chat-voice { background: var(--ag-bg) !important; }

/* Phone tab bar */
:root[data-theme] .ag-tabbar { background: var(--ag-bg) !important; border-top: 1px solid var(--ag-hairline) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:root[data-theme] #floating-chat-pill { display: none !important; }

/* Library and Exam Studio titles */
:root[data-theme] .ag-large-title, :root[data-theme] .ag-title-1, :root[data-theme] h1.ag-headline { font-family: var(--mono-serif) !important; font-weight: 400 !important; letter-spacing: 0 !important; }
:root[data-theme] .ag-footnote { color: var(--ag-text-3) !important; }
:root[data-theme] .es-nav-link.is-active, :root[data-theme] .es-nav-link[aria-current="page"] { background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; }

@media (prefers-reduced-motion: reduce) { :root[data-theme] .ag-card-interactive:hover, :root[data-theme] .mono-course:hover { transform: none; } }

/* Collapsed sidebar keeps working */
:root[data-theme] #sidebar.sidebar-collapsed { width: 84px !important; padding-left: 12px !important; padding-right: 12px !important; }
:root[data-theme] #sidebar.sidebar-collapsed .side-link { justify-content: center; padding: 0 !important; }
:root[data-theme] #sidebar.sidebar-collapsed .side-group, :root[data-theme] #sidebar.sidebar-collapsed .aria-admin-label, :root[data-theme] #sidebar.sidebar-collapsed .aria-admin-tag { display: none !important; }

/* ── Ask ARIA, matched to the demo ─────────────────────────── */
:root[data-theme] .chat-header { min-height: 72px !important; padding: 12px 16px !important; }
:root[data-theme] .chat-title { gap: 5px; }
:root[data-theme] .chat-title strong { font: 400 30px/1 var(--mono-serif) !important; color: var(--ag-text) !important; }
:root[data-theme] .chat-title span { font: 12px/1.3 var(--mono-code) !important; color: var(--ag-text-3) !important; max-width: 52vw; }
:root[data-theme] .chat-header .dash-icon-btn { width: 38px !important; height: 38px !important; border: 1px solid var(--ag-hairline-strong) !important; border-radius: 50% !important; color: var(--ag-text) !important; }
:root[data-theme] .chat-header .dash-icon-btn:hover { border-color: var(--ag-text) !important; background: transparent !important; }
:root[data-theme] .mono-seg { display: inline-flex; padding: 3px; border: 1px solid var(--ag-hairline-strong); border-radius: 999px; margin-right: 4px; }
:root[data-theme] .mono-seg button { height: 30px; padding: 0 11px; border: 0; border-radius: 999px; background: none; color: var(--ag-text-3); font: 500 12px var(--mono-code); cursor: pointer; transition: background-color .2s, color .2s; }
:root[data-theme] .mono-seg button[aria-pressed="true"] { background: var(--mono-inv); color: var(--mono-on-inv); }
:root[data-theme] .chat-column { padding: 26px 16px 28px !important; }
:root[data-theme] .chat-thread { display: flex; flex-direction: column; gap: 30px !important; }
:root[data-theme] .chat-welcome { align-items: flex-start !important; text-align: left !important; padding-top: 32px; }
:root[data-theme] .chat-welcome p { color: var(--ag-text-3) !important; font-size: 16px !important; }
:root[data-theme] .chat-welcome .chat-chips { justify-content: flex-start !important; }
:root[data-theme] .chat-aria-head { gap: 10px !important; }
:root[data-theme] .chat-aria-name { text-transform: uppercase; }
:root[data-theme] .chat-composer { padding: 8px !important; }
:root[data-theme] .chat-composer textarea { padding: 10px 12px !important; min-height: 48px; }
:root[data-theme] .chat-controls-left { display: flex; align-items: center; gap: 4px; }
:root[data-theme] .chat-tool-btn { width: 38px !important; height: 38px !important; }
:root[data-theme] .chat-model-btn { height: 36px !important; padding: 0 10px 0 12px !important; font: 500 13px var(--ag-font) !important; }
:root[data-theme] .chat-model-menu { left: 0 !important; right: auto !important; bottom: calc(100% + 8px) !important; }
:root[data-theme] .chat-model-option .dash-action-icon { width: 34px !important; height: 34px !important; border-radius: 10px !important; }
:root[data-theme] .chat-model-option .opt-title { color: var(--ag-text) !important; font-weight: 500 !important; }
:root[data-theme] .chat-model-option .opt-sub { color: var(--ag-text-3) !important; }
:root[data-theme] .chat-send { width: 44px !important; height: 44px !important; }
:root[data-theme] .mono-ctx { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 28px; margin: 2px 0 0 4px; padding: 0 4px 0 10px; border-radius: 999px; background: var(--mono-soft); font: 12px var(--mono-code); color: var(--ag-text-2); }
:root[data-theme] .mono-ctx[hidden] { display: none; }
:root[data-theme] .mono-ctx .material-symbols-outlined { font-size: 16px; }
:root[data-theme] #chat-ctx-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme] .mono-ctx button { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ag-text-3); cursor: pointer; }
:root[data-theme] .mono-ctx button:hover { background: var(--mono-soft-2); color: var(--ag-text); }
:root[data-theme] .chat-disclaimer { margin-top: 8px !important; color: var(--ag-text-3) !important; }
@media (max-width: 640px) { :root[data-theme] .chat-title strong { font-size: 26px !important; } :root[data-theme] .mono-seg button { padding: 0 9px; } }

/* ── Library ───────────────────────────────────────────────── */
:root[data-theme] .lib-header { gap: 16px !important; padding: 20px 16px 14px !important; background: var(--ag-bg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom: 1px solid var(--ag-hairline) !important; box-shadow: none !important; }
@media (min-width: 1024px) { :root[data-theme] .lib-header { padding: 24px 32px 16px !important; } }
:root[data-theme] .lib-title { font: 400 clamp(44px, 8vw, 64px)/.95 var(--mono-serif) !important; letter-spacing: -.01em !important; color: var(--ag-text) !important; }
:root[data-theme] .lib-sub { margin-top: 8px !important; font-size: 15px !important; color: var(--ag-text-3) !important; }
:root[data-theme] .lib-search { height: 44px !important; border-radius: 999px !important; background: var(--ag-bg) !important; border: 1px solid var(--ag-hairline-strong) !important; box-shadow: none !important; padding: 0 16px !important; }
:root[data-theme] .lib-search:focus-within { border-color: var(--ag-text) !important; box-shadow: none !important; }
:root[data-theme] .lib-search input, :root[data-theme] .lib-search input:focus { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important; color: var(--ag-text) !important; font: 15px var(--ag-font) !important; }
:root[data-theme] .tab-pill { min-height: 38px !important; padding: 0 6px 0 14px !important; border: 1px solid var(--ag-hairline-strong) !important; border-radius: 999px !important; background: var(--ag-bg) !important; color: var(--ag-text-2) !important; font: 500 13.5px var(--ag-font) !important; box-shadow: none !important; }
:root[data-theme] .tab-pill:hover { border-color: var(--ag-text) !important; color: var(--ag-text) !important; }
:root[data-theme] .tab-pill .lib-count { min-width: 24px; padding: 2px 7px !important; border-radius: 999px !important; background: var(--mono-soft-2) !important; color: var(--ag-text-2) !important; font: 500 11.5px var(--mono-code) !important; }
:root[data-theme] .tab-pill.active { background: var(--mono-inv) !important; border-color: var(--mono-inv) !important; color: var(--mono-on-inv) !important; }
:root[data-theme] .tab-pill.active .lib-count { background: transparent !important; color: var(--mono-on-inv) !important; opacity: .7; }
:root[data-theme] .lib-main { background: var(--ag-bg) !important; }
:root[data-theme] .lib-inner { max-width: 1180px !important; gap: 44px !important; padding: 28px 16px 140px !important; }
@media (min-width: 1024px) { :root[data-theme] .lib-inner { padding: 32px 32px 72px !important; } }
:root[data-theme] .lib-section-head { margin-bottom: 16px !important; }
:root[data-theme] .lib-section-head h3 { font: 400 38px/1 var(--mono-serif) !important; letter-spacing: 0 !important; color: var(--ag-text) !important; }
:root[data-theme] .lib-section-head h3 .material-symbols-outlined { display: none !important; }
:root[data-theme] .lib-grid:not(.hidden) { gap: 12px !important; }
:root[data-theme] .lib-card, :root[data-theme] .lib-skel-card { gap: 10px !important; padding: 20px !important; border: 1px solid var(--ag-hairline) !important; border-radius: 24px !important; background: var(--ag-bg) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: border-color .2s, transform .25s var(--mono-ease) !important; }
:root[data-theme] .lib-card:hover { border-color: var(--ag-text) !important; box-shadow: none !important; transform: translateY(-2px); }
:root[data-theme] .lib-type { padding: 0 !important; background: none !important; border: 0 !important; font: 500 11px var(--mono-code) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--ag-text-3) !important; }
:root[data-theme] .lib-type .material-symbols-outlined { display: none; }
:root[data-theme] .lib-date { font: 12px var(--mono-code) !important; color: var(--ag-text-3) !important; }
:root[data-theme] .lib-card h4 { font: 400 26px/1.1 var(--mono-serif) !important; color: var(--ag-text) !important; }
:root[data-theme] .lib-card p { font-size: 14.5px !important; color: var(--ag-text-3) !important; }
:root[data-theme] .lib-card-foot { border-top: 1px solid var(--ag-hairline) !important; color: var(--ag-text) !important; font-weight: 500; font-size: 13.5px; }
:root[data-theme] .lib-empty:not(.hidden) { border: 1px dashed var(--ag-hairline-strong) !important; border-radius: 20px !important; background: none !important; box-shadow: none !important; }
:root[data-theme] .lib-empty p { color: var(--ag-text-3) !important; }
:root[data-theme] .lib-hero-empty:not(.hidden) { border: 1px dashed var(--ag-hairline-strong) !important; background: none !important; box-shadow: none !important; }
:root[data-theme] .lib-hero-empty h3 { font: 400 36px/1.05 var(--mono-serif) !important; color: var(--ag-text) !important; }
:root[data-theme] .lib-hero-empty p { color: var(--ag-text-3) !important; }
:root[data-theme] .lib-sheet { background: var(--ag-bg) !important; border: 1px solid var(--ag-hairline-strong) !important; border-radius: 28px !important; box-shadow: var(--ag-shadow-lg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:root[data-theme] .lib-sheet-head { border-bottom: 1px solid var(--ag-hairline) !important; }
:root[data-theme] .lib-sheet-head h3 { font: 400 30px/1.1 var(--mono-serif) !important; color: var(--ag-text) !important; }
:root[data-theme] .lib-sheet-icon { background: var(--mono-soft-2) !important; color: var(--ag-text) !important; }
:root[data-theme] .lib-sheet-body { color: var(--ag-text-2) !important; }
:root[data-theme] .lib-sheet-body h1, :root[data-theme] .lib-sheet-body h2, :root[data-theme] .lib-sheet-body h3 { font-family: var(--mono-serif) !important; font-weight: 400 !important; color: var(--ag-text) !important; letter-spacing: 0 !important; }
:root[data-theme] .lib-doc-label { font: 500 10.5px var(--mono-code) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--ag-text-3) !important; }
:root[data-theme] .lib-doc-block { background: var(--mono-soft) !important; border: 1px solid var(--ag-hairline) !important; border-radius: 16px !important; }
:root[data-theme] .ag-backdrop { background: rgba(0, 0, 0, .45) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* ── Exam Studio ───────────────────────────────────────────── */
:root[data-theme] .es-body, :root[data-theme] .es-content, :root[data-theme] .es-main { background: var(--ag-bg) !important; }
:root[data-theme] .ag-header { background: var(--ag-bg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom: 1px solid var(--ag-hairline) !important; box-shadow: none !important; }
:root[data-theme] .es-header-titles .ag-title { font: 400 34px/1 var(--mono-serif) !important; letter-spacing: 0 !important; color: var(--ag-text) !important; }
:root[data-theme] .es-header-titles .ag-footnote { margin-top: 4px; font: 12px var(--mono-code) !important; color: var(--ag-text-3) !important; }
:root[data-theme] .es-back { border: 1px solid var(--ag-hairline-strong) !important; border-radius: 999px !important; height: 38px; padding: 0 14px 0 8px !important; color: var(--ag-text) !important; background: transparent !important; }
:root[data-theme] .es-back:hover { border-color: var(--ag-text) !important; }
:root[data-theme] .ag-headline { font: 400 28px/1.1 var(--mono-serif) !important; letter-spacing: 0 !important; color: var(--ag-text) !important; }
:root[data-theme] .ag-title { font-family: var(--mono-serif) !important; font-weight: 400 !important; letter-spacing: 0 !important; color: var(--ag-text) !important; }
:root[data-theme] .ag-subhead { color: var(--ag-text-3) !important; }
:root[data-theme] .ag-label, :root[data-theme] .ag-section-label { font: 500 11px var(--mono-code) !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--ag-text-3) !important; }
:root[data-theme] .es-form-panel .ag-card, :root[data-theme] .es-paper-panel .ag-card { border-radius: 24px !important; padding: 20px !important; }
:root[data-theme] .ag-select, :root[data-theme] .ag-input { height: 46px; border: 1px solid var(--ag-hairline-strong) !important; border-radius: 14px !important; background-color: var(--ag-bg) !important; color: var(--ag-text) !important; box-shadow: none !important; font: 15px var(--ag-font) !important; }
:root[data-theme] .ag-select:focus, :root[data-theme] .ag-input:focus { border-color: var(--ag-text) !important; outline: none !important; box-shadow: none !important; }
:root[data-theme] .ag-select option { background: var(--ag-bg); color: var(--ag-text); }
:root[data-theme] .ag-list { border: 1px solid var(--ag-hairline) !important; border-radius: 20px !important; background: var(--ag-bg) !important; overflow: hidden; }
:root[data-theme] .ag-list-row { border-color: var(--ag-hairline) !important; background: transparent !important; }
:root[data-theme] .es-row-icon { background: var(--mono-soft-2) !important; color: var(--ag-text) !important; border-radius: 12px !important; }
:root[data-theme] .es-row-title { color: var(--ag-text) !important; }
:root[data-theme] .es-icon-accent { color: var(--ag-text) !important; }
:root[data-theme] .es-switch { background: var(--ag-hairline-strong) !important; }
:root[data-theme] .es-switch::after { background: #ffffff !important; box-shadow: none !important; }
:root[data-theme] .es-switch-input:checked + .es-switch { background: var(--mono-inv) !important; }
:root[data-theme] .es-switch-input:checked + .es-switch::after { background: var(--mono-on-inv) !important; }
:root[data-theme] .es-switch-input:focus-visible + .es-switch { outline: 2px solid var(--ag-text) !important; }
:root[data-theme] .es-status { border: 1px solid var(--ag-hairline-strong) !important; background: var(--mono-soft) !important; color: var(--ag-text) !important; border-radius: 16px !important; }
:root[data-theme] .es-divider { background: var(--ag-hairline) !important; }
:root[data-theme] #es-paper-title { font-size: 30px !important; }

/* Exam Studio sidebar, same look as the student sidebar */
:root[data-theme] .es-side-head .ag-headline { font: 700 22px/1 var(--ag-font) !important; letter-spacing: -.02em !important; }
:root[data-theme] .es-side-head .ag-footnote { font-size: 13px !important; color: var(--ag-text-3) !important; }
:root[data-theme] .es-side-nav { gap: 2px !important; }
:root[data-theme] .es-nav-link { min-height: 42px !important; padding: 0 12px !important; border-radius: 14px !important; color: var(--ag-text-2) !important; font: 500 14.5px var(--ag-font) !important; background: transparent !important; }
:root[data-theme] .es-nav-link:hover { background: var(--mono-soft-2) !important; color: var(--ag-text) !important; }
:root[data-theme] .es-nav-link .material-symbols-outlined { font-size: 20px !important; }
:root[data-theme] .es-nav-link.is-current { background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; }
:root[data-theme] .es-nav-link.is-current .material-symbols-outlined { font-variation-settings: 'wght' 350, 'FILL' 1; }
:root[data-theme] #sidebar > .es-side-foot { flex: none; margin: 0 !important; padding-top: 12px !important; border-top: 1px solid var(--ag-hairline) !important; }
:root[data-theme] .es-avatar { width: 34px !important; height: 34px !important; background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; border-radius: 50% !important; }
:root[data-theme] .es-icon-btn { border-radius: 999px !important; color: var(--ag-text-2) !important; }

/* ---- Educator portal ---- */
:root[data-theme] .edu-shell, :root[data-theme] .edu-main { background: var(--ag-bg) !important; }
:root[data-theme] .edu-side { background: var(--mono-soft) !important; border: 1px solid var(--ag-hairline) !important; border-radius: 28px !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:root[data-theme] .edu-brand { font: 700 22px/1 var(--ag-font) !important; letter-spacing: -.02em; }
:root[data-theme] .edu-link { min-height: 42px !important; border-radius: 14px !important; color: var(--ag-text-2) !important; font: 500 14.5px var(--ag-font) !important; }
:root[data-theme] .edu-link:hover { background: var(--mono-soft-2) !important; color: var(--ag-text) !important; }
:root[data-theme] .edu-link.is-active, :root[data-theme] .edu-link[aria-current="page"] { background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; }
:root[data-theme] .edu-top { background: var(--ag-bg) !important; border-bottom: 1px solid var(--ag-hairline) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:root[data-theme] .edu-hero h1, :root[data-theme] .edu-hero h2 { font-family: var(--mono-serif) !important; font-weight: 400 !important; font-size: clamp(42px, 7vw, 64px) !important; letter-spacing: -.01em !important; line-height: 1 !important; }
:root[data-theme] .edu-section-head h2, :root[data-theme] .edu-section-head h3 { font: 400 34px/1 var(--mono-serif) !important; letter-spacing: 0 !important; }
:root[data-theme] .edu-class, :root[data-theme] .edu-stat, :root[data-theme] .edu-tool, :root[data-theme] .edu-card { border: 1px solid var(--ag-hairline) !important; border-radius: 24px !important; background: var(--ag-bg) !important; box-shadow: none !important; }
:root[data-theme] .edu-class:hover, :root[data-theme] .edu-tool:hover { border-color: var(--ag-text) !important; }
:root[data-theme] .edu-class-icon, :root[data-theme] .edu-tool-icon { background: var(--mono-soft-2) !important; color: var(--ag-text) !important; border-radius: 12px !important; }
:root[data-theme] .edu-code { font-family: var(--mono-code) !important; letter-spacing: .12em; }
:root[data-theme] .edu-avatar { background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; }
:root[data-theme] .edu-tab { border-radius: 999px !important; color: var(--ag-text-3) !important; font: 500 14px var(--ag-font) !important; }
:root[data-theme] .edu-tab.is-active, :root[data-theme] .edu-tab[aria-selected="true"] { background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; }
:root[data-theme] .edu-table th { font: 500 10.5px var(--mono-code) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--ag-text-3) !important; }
:root[data-theme] .edu-table td, :root[data-theme] .edu-table th { border-color: var(--ag-hairline) !important; }
:root[data-theme] .edu-mark-input { border: 1px solid var(--ag-hairline-strong) !important; border-radius: 12px !important; background: var(--ag-bg) !important; color: var(--ag-text) !important; font-family: var(--mono-code) !important; }
:root[data-theme] .edu-sheet, :root[data-theme] .edu-modal, :root[data-theme] .edu-drawer { background: var(--ag-bg) !important; border: 1px solid var(--ag-hairline-strong) !important; border-radius: 28px !important; box-shadow: var(--ag-shadow-lg) !important; }
:root[data-theme] .edu-sheet-head h3 { font: 400 30px/1.1 var(--mono-serif) !important; }
:root[data-theme] .edu-empty, :root[data-theme] .edu-note { border: 1px dashed var(--ag-hairline-strong) !important; border-radius: 20px !important; background: none !important; color: var(--ag-text-3) !important; }

/* ---- Settings ---- */
:root[data-theme] .set-page { background: var(--ag-bg) !important; }
:root[data-theme] .set-bar { background: var(--ag-bg) !important; border-bottom: 1px solid var(--ag-hairline) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:root[data-theme] .set-bar-title { font: 600 16px var(--ag-font) !important; }
:root[data-theme] .set-title, :root[data-theme] .set-h { font-family: var(--mono-serif) !important; font-weight: 400 !important; letter-spacing: 0 !important; font-size: clamp(40px, 7vw, 60px) !important; line-height: 1 !important; }
:root[data-theme] .set-card, :root[data-theme] .set-list, :root[data-theme] .set-rows { border: 1px solid var(--ag-hairline) !important; border-radius: 24px !important; background: var(--ag-bg) !important; box-shadow: none !important; }
:root[data-theme] .set-row, :root[data-theme] .set-list-row { border-color: var(--ag-hairline) !important; background: transparent !important; }
:root[data-theme] .set-row:hover, :root[data-theme] .set-list-row:hover { background: var(--mono-soft) !important; }
:root[data-theme] .set-label, :root[data-theme] .set-field-label { font: 500 11px var(--mono-code) !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--ag-text-3) !important; }
:root[data-theme] .set-row-value, :root[data-theme] .set-note { color: var(--ag-text-3) !important; }
:root[data-theme] .set-icon { background: var(--mono-soft-2) !important; color: var(--ag-text) !important; border-radius: 12px !important; }
:root[data-theme] .set-avatar { background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; }
:root[data-theme] .set-seg { border: 1px solid var(--ag-hairline-strong) !important; border-radius: 999px !important; background: transparent !important; }
:root[data-theme] .set-seg button.is-active, :root[data-theme] .set-seg button[aria-checked="true"], :root[data-theme] .set-seg [data-theme-choice].is-active { background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; border-radius: 999px !important; }
:root[data-theme] .set-pill, :root[data-theme] .set-tag { border: 1px solid var(--ag-hairline-strong) !important; border-radius: 999px !important; background: transparent !important; color: var(--ag-text) !important; font-family: var(--mono-code) !important; font-size: 12px !important; }
:root[data-theme] .set-cta { background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; border-color: var(--mono-inv) !important; border-radius: 999px !important; }
:root[data-theme] .set-danger { color: var(--ag-text) !important; border: 1px solid var(--ag-text) !important; background: transparent !important; }
:root[data-theme] .set-toast { background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; border-radius: 999px !important; }
:root[data-theme] .set-form input, :root[data-theme] .set-form select { border: 1px solid var(--ag-hairline-strong) !important; border-radius: 14px !important; background: var(--ag-bg) !important; color: var(--ag-text) !important; }
:root[data-theme] .set-form input:focus, :root[data-theme] .set-form select:focus { border-color: var(--ag-text) !important; outline: none !important; box-shadow: none !important; }

/* ---- Study rooms ---- */
:root[data-theme] .sr-app, :root[data-theme] .sr-main, :root[data-theme] .sr-lobby, :root[data-theme] .sr-roomview { background: var(--ag-bg) !important; }
:root[data-theme] .sr-top { background: var(--ag-bg) !important; border-bottom: 1px solid var(--ag-hairline) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:root[data-theme] .sr-top-title strong { font: 400 28px/1 var(--mono-serif) !important; }
:root[data-theme] .sr-top-title small { font: 12px var(--mono-code) !important; color: var(--ag-text-3) !important; }
:root[data-theme] .sr-hero h1, :root[data-theme] .sr-hero h2 { font-family: var(--mono-serif) !important; font-weight: 400 !important; font-size: clamp(44px, 8vw, 68px) !important; line-height: .98 !important; letter-spacing: -.01em !important; }
:root[data-theme] .sr-card, :root[data-theme] .sr-tile, :root[data-theme] .sr-board, :root[data-theme] .sr-side, :root[data-theme] .sr-stage { border: 1px solid var(--ag-hairline) !important; border-radius: 24px !important; background: var(--ag-bg) !important; box-shadow: none !important; }
:root[data-theme] .sr-tile { background: var(--mono-soft) !important; }
:root[data-theme] .sr-big-code, :root[data-theme] .sr-code { font-family: var(--mono-code) !important; letter-spacing: .18em !important; color: var(--ag-text) !important; }
:root[data-theme] .sr-input, :root[data-theme] .sr-form input { border: 1px solid var(--ag-hairline-strong) !important; border-radius: 999px !important; background: var(--ag-bg) !important; color: var(--ag-text) !important; }
:root[data-theme] .sr-input:focus, :root[data-theme] .sr-form input:focus { border-color: var(--ag-text) !important; outline: none !important; box-shadow: none !important; }
:root[data-theme] .sr-ctl, :root[data-theme] .sr-tool, :root[data-theme] .sr-ai-btn { border: 1px solid var(--ag-hairline-strong) !important; border-radius: 999px !important; background: var(--ag-bg) !important; color: var(--ag-text) !important; box-shadow: none !important; }
:root[data-theme] .sr-ctl:hover, :root[data-theme] .sr-tool:hover { border-color: var(--ag-text) !important; }
:root[data-theme] .sr-ctl.is-on, :root[data-theme] .sr-tool.is-on, :root[data-theme] .sr-chip.is-active { background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; border-color: var(--mono-inv) !important; }
:root[data-theme] .sr-send { background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; border-radius: 50% !important; }
:root[data-theme] .sr-bubble, :root[data-theme] .sr-msg-body { background: var(--mono-soft) !important; color: var(--ag-text) !important; border-radius: 22px !important; }
:root[data-theme] .sr-msg.is-me .sr-bubble, :root[data-theme] .sr-msg.is-me .sr-msg-body { background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; }
:root[data-theme] .sr-sys, :root[data-theme] .sr-hint, :root[data-theme] .sr-who { color: var(--ag-text-3) !important; }
:root[data-theme] .sr-av, :root[data-theme] .sr-face { background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; }
:root[data-theme] .sr-live { border: 1px solid var(--ag-hairline-strong) !important; background: transparent !important; color: var(--ag-text) !important; font-family: var(--mono-code) !important; }
:root[data-theme] .sr-toast { background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; border-radius: 999px !important; }
:root[data-theme] .sr-mention-pop { background: var(--ag-bg) !important; border: 1px solid var(--ag-hairline-strong) !important; border-radius: 18px !important; box-shadow: var(--ag-shadow-lg) !important; }

/* ── In-chat testing ───────────────────────────────────────── */
:root[data-theme] .aq-right { display: flex; justify-content: flex-end; }
:root[data-theme] .aq-you { max-width: 85%; padding: 11px 16px; border-radius: 20px 20px 6px 20px; background: var(--mono-inv); color: var(--mono-on-inv); font-size: 15.5px; }
:root[data-theme] .aq-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font: 11.5px var(--mono-code); letter-spacing: .06em; text-transform: uppercase; color: var(--ag-text-3); }
:root[data-theme] .aq-spark { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--mono-inv); color: var(--mono-on-inv); display: grid; place-items: center; }
:root[data-theme] .aq-spark svg { width: 14px; height: 14px; }
:root[data-theme] .aq-say { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ag-text-2); }
:root[data-theme] .aq-say b { color: var(--ag-text); }
:root[data-theme] .aq-dim { color: var(--ag-text-3); }
:root[data-theme] .aq-opened { display: flex; align-items: center; justify-content: center; gap: 9px; width: max-content; max-width: 100%; margin: 0 auto; padding: 7px 14px 7px 7px; border: 1px solid var(--ag-hairline); border-radius: 999px; background: var(--mono-soft); font: 12px var(--mono-code); color: var(--ag-text-3); }
:root[data-theme] .aq-tap { padding: 4px 10px; border-radius: 999px; background: var(--mono-inv); color: var(--mono-on-inv); font-weight: 500; }
:root[data-theme] .aq-qr { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
:root[data-theme] .aq-qr button { padding: 9px 15px; border: 1px solid var(--ag-hairline-strong); border-radius: 999px; background: var(--ag-bg); color: var(--ag-text); font: 500 14px var(--ag-font); cursor: pointer; transition: background-color .2s, border-color .2s, transform .15s; }
:root[data-theme] .aq-qr button:hover { border-color: var(--ag-text); }
:root[data-theme] .aq-qr button:active { transform: scale(.97); }
:root[data-theme] .aq-qr button.is-on { background: var(--mono-inv); color: var(--mono-on-inv); border-color: var(--mono-inv); }
:root[data-theme] .aq-card { border: 1px solid var(--ag-hairline); border-radius: 26px; background: var(--ag-bg); overflow: hidden; }
:root[data-theme] .aq-bar { position: relative; height: 3px; background: var(--ag-hairline); }
:root[data-theme] .aq-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--ag-text); transition: width .5s var(--mono-ease); }
:root[data-theme] .aq-in { padding: 20px; }
:root[data-theme] .aq-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 12px var(--mono-code); color: var(--ag-text-3); }
:root[data-theme] .aq-topic { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme] .aq-q { margin: 14px 0 18px; font: 400 clamp(23px, 4.6vw, 30px)/1.22 var(--mono-serif); color: var(--ag-text); }
:root[data-theme] .aq-opts { display: grid; gap: 9px; }
:root[data-theme] .aq-opt { display: flex; align-items: center; gap: 13px; width: 100%; padding: 14px 15px; border: 1.5px solid var(--ag-hairline); border-radius: 18px; background: var(--ag-bg); color: var(--ag-text); text-align: left; font-size: 15.5px; line-height: 1.4; cursor: pointer; transition: border-color .18s, background-color .18s, transform .15s var(--mono-ease), opacity .25s; }
:root[data-theme] .aq-opt:hover:not(:disabled) { border-color: var(--ag-text); }
:root[data-theme] .aq-opt:disabled { cursor: default; }
:root[data-theme] .aq-n { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--mono-soft-2); font: 500 13px var(--mono-code); }
:root[data-theme] .aq-t { flex: 1; }
:root[data-theme] .aq-mark { width: 22px; height: 22px; flex: none; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .3s var(--mono-ease); }
:root[data-theme] .aq-cross { display: none; }
:root[data-theme] .aq-opt.is-sel { border-color: var(--ag-text); background: var(--mono-soft); }
:root[data-theme] .aq-opt.is-sel .aq-n { background: var(--mono-inv); color: var(--mono-on-inv); }
:root[data-theme] .aq-opt.is-right { border-color: var(--ag-text); background: var(--mono-soft); }
:root[data-theme] .aq-opt.is-right .aq-n { background: var(--mono-inv); color: var(--mono-on-inv); }
:root[data-theme] .aq-opt.is-right .aq-tick { opacity: 1; transform: none; }
:root[data-theme] .aq-opt.is-wrong { border-color: #c0392b; background: rgba(192,57,43,.07); color: #c0392b; }
:root[data-theme] .aq-opt.is-wrong .aq-n { background: #c0392b; color: #fff; }
:root[data-theme] .aq-opt.is-wrong .aq-tick { display: none; }
:root[data-theme] .aq-opt.is-wrong .aq-cross { display: block; opacity: 1; transform: none; }
:root[data-theme] .aq-opt.is-dim { opacity: .45; }
html[data-theme="dark"] .aq-opt.is-wrong { border-color: #ff6b57; color: #ff6b57; background: rgba(255,107,87,.10); }
html[data-theme="dark"] .aq-opt.is-wrong .aq-n { background: #ff6b57; color: #000; }
:root[data-theme] .aq-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--ag-hairline); }
:root[data-theme] .aq-marks { display: flex; align-items: center; gap: 9px; font: 500 13px var(--ag-font); color: var(--ag-text-3); }
:root[data-theme] .aq-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ag-hairline-strong); }
:root[data-theme] .aq-go { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px; border: 1.5px solid var(--ag-text); border-radius: 999px; background: var(--ag-bg); color: var(--ag-text); font: 600 14.5px var(--ag-font); cursor: pointer; transition: background-color .2s, color .2s; }
:root[data-theme] .aq-go:disabled { opacity: .35; cursor: default; border-color: var(--ag-hairline-strong); }
:root[data-theme] .aq-go:not(:disabled):hover { background: var(--mono-inv); color: var(--mono-on-inv); }
:root[data-theme] .aq-go.is-primary { background: var(--mono-inv); color: var(--mono-on-inv); }
:root[data-theme] .aq-why { padding: 0 20px 18px; }
:root[data-theme] .aq-why p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ag-text-2); }
:root[data-theme] .aq-ref { display: block; margin-top: 8px; font: 11.5px var(--mono-code); letter-spacing: .06em; text-transform: uppercase; color: var(--ag-text-3); }
:root[data-theme] .aq-verdict { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--ag-hairline); background: var(--mono-soft); }
:root[data-theme] .aq-verdict.is-bad { background: rgba(192,57,43,.07); color: #c0392b; }
html[data-theme="dark"] .aq-verdict.is-bad { background: rgba(255,107,87,.10); color: #ff6b57; }
:root[data-theme] .aq-v { font: 600 15px var(--ag-font); }
:root[data-theme] .aq-verdict .aq-go { border-color: currentColor; color: inherit; }
:root[data-theme] .aq-score { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
:root[data-theme] .aq-score b { font: 400 84px/.85 var(--mono-serif); }
:root[data-theme] .aq-of { font: 400 26px var(--mono-serif); color: var(--ag-text-3); }
:root[data-theme] .aq-grade { margin-left: auto; text-align: right; }
:root[data-theme] .aq-grade span { display: block; font: 11.5px var(--mono-code); letter-spacing: .1em; text-transform: uppercase; color: var(--ag-text-3); }
:root[data-theme] .aq-grade b { font-size: 44px; }
:root[data-theme] .aq-review { margin-top: 20px; border-top: 1px solid var(--ag-hairline); }
:root[data-theme] .aq-rev { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ag-hairline); font-size: 14.5px; }
:root[data-theme] .aq-b { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--ag-hairline-strong); font: 500 12px var(--mono-code); }
:root[data-theme] .aq-rev.is-ok .aq-b { background: var(--mono-inv); color: var(--mono-on-inv); border-color: var(--mono-inv); }
:root[data-theme] .aq-rev.is-no .aq-b { border-color: #c0392b; color: #c0392b; }
:root[data-theme] .aq-txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme] .aq-tag { font: 11.5px var(--mono-code); color: var(--ag-text-3); white-space: nowrap; }
:root[data-theme] .aq-acts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
:root[data-theme] .aq-acts .aq-go { height: 44px; }
body.aq-running .chat-dock .chat-composer { opacity: .45; pointer-events: none; }

/* ARIA handing the student straight into a tool */
:root[data-theme] .chat-tool-cta { margin-top: 14px; }
:root[data-theme] .chat-tool-cta .aq-go { height: 44px; }


/* ── Model menu: compact, the size of a real menu ───────────── */
:root[data-theme] .chat-model-menu { position: absolute; left: 0 !important; right: auto !important; bottom: calc(100% + 8px) !important; z-index: 60; width: 244px; max-width: calc(100vw - 24px); padding: 6px; border: 1px solid var(--ag-hairline-strong); border-radius: 16px; background: var(--ag-bg); box-shadow: 0 10px 30px rgba(0,0,0,.13); }
html[data-theme="dark"] .chat-model-menu { box-shadow: 0 10px 30px rgba(0,0,0,.55); }
:root[data-theme] .chat-model-menu.hidden { display: none; }
:root[data-theme] .cm-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ag-text); text-align: left; cursor: pointer; transition: background-color .15s; }
:root[data-theme] .cm-row:hover { background: var(--mono-soft); }
:root[data-theme] .cm-mark { width: 18px; height: 18px; flex: none; display: grid; place-items: center; color: var(--ag-text-3); }
:root[data-theme] .cm-mark svg { width: 15px; height: 15px; }
:root[data-theme] .cm-row.is-selected .cm-mark { color: var(--ag-text); }
:root[data-theme] .cm-body { flex: 1; min-width: 0; }
:root[data-theme] .cm-name { display: flex; align-items: center; gap: 6px; font: 500 13.5px var(--ag-font); color: var(--ag-text); line-height: 1.25; }
:root[data-theme] .cm-sub { display: block; font-size: 11.5px; line-height: 1.3; color: var(--ag-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme] .cm-tag { padding: 1px 5px; border: 1px solid var(--ag-hairline-strong); border-radius: 999px; font: 9.5px var(--mono-code); letter-spacing: .06em; text-transform: uppercase; color: var(--ag-text-3); }
:root[data-theme] .cm-tick { flex: none; width: 15px; height: 15px; color: var(--ag-text); opacity: 0; transition: opacity .15s; }
:root[data-theme] .cm-row.is-selected .cm-tick { opacity: 1; }

/* effort: one tight row */
:root[data-theme] .cm-effort { margin-top: 5px; padding: 8px 8px 7px; border-top: 1px solid var(--ag-hairline); }
:root[data-theme] .cm-eff-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
:root[data-theme] .cm-label, :root[data-theme] .cm-label-flush { margin: 0; font: 10px var(--mono-code); letter-spacing: .1em; text-transform: uppercase; color: var(--ag-text-3); }
:root[data-theme] .cm-eff-name { font: 500 11.5px var(--ag-font); color: var(--ag-text); }
:root[data-theme] .cm-track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); height: 28px; margin-top: 6px; padding: 3px; border-radius: 999px; background: var(--mono-soft-2); }
:root[data-theme] .cm-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 999px; background: var(--mono-inv); transform: translateX(var(--cm-x, 100%)); transition: transform .3s var(--mono-ease); }
:root[data-theme] .cm-effort[data-effort="low"] .cm-thumb { --cm-x: 0%; }
:root[data-theme] .cm-effort[data-effort="medium"] .cm-thumb { --cm-x: 100%; }
:root[data-theme] .cm-effort[data-effort="high"] .cm-thumb { --cm-x: 200%; }
:root[data-theme] .cm-stop { position: relative; z-index: 1; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--ag-text-3); font: 500 11.5px var(--ag-font); cursor: pointer; transition: color .22s; }
:root[data-theme] .cm-stop[aria-checked="true"] { color: var(--mono-on-inv); }
:root[data-theme] .cm-stop:not([aria-checked="true"]):hover { color: var(--ag-text); }
:root[data-theme] .cm-dot { display: none; }
@media (prefers-reduced-motion: reduce) { :root[data-theme] .cm-thumb, :root[data-theme] .cm-stop { transition: none; } }

/* ── Frosted surfaces (iOS and other capable phones) ─────────
   Glass is an enhancement, never a requirement: it applies only when the
   device can afford it (html.has-glass, set in student.html) and the browser
   supports backdrop-filter. Everything below degrades to the solid surfaces
   above, which is what a budget Android and Reduce Transparency both get. */
:root { --glass-fx: saturate(180%) blur(22px); --glass-veil: rgba(255,255,255,.70); --glass-edge-hi: inset 0 1px 0 rgba(255,255,255,.55); }
html[data-theme="dark"] { --glass-veil: rgba(0,0,0,.52); --glass-edge-hi: inset 0 1px 0 rgba(255,255,255,.07); }

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root[data-theme].has-glass .chat-model-menu,
  :root[data-theme].has-glass .ag-sheet,
  :root[data-theme].has-glass .pop-sheet,
  :root[data-theme].has-glass .chat-composer {
    background: var(--glass-veil);
    -webkit-backdrop-filter: var(--glass-fx);
    backdrop-filter: var(--glass-fx);
    box-shadow: var(--glass-edge-hi), 0 12px 34px rgba(0,0,0,.14);
  }
  html[data-theme="dark"].has-glass .chat-model-menu,
  html[data-theme="dark"].has-glass .ag-sheet,
  html[data-theme="dark"].has-glass .pop-sheet,
  html[data-theme="dark"].has-glass .chat-composer {
    box-shadow: var(--glass-edge-hi), 0 12px 34px rgba(0,0,0,.6);
  }
  /* the veil behind a sheet, so the page reads as depth rather than a grey wash */
  :root[data-theme].has-glass .ag-backdrop {
    background: rgba(0,0,0,.22);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
  }
  html[data-theme="dark"].has-glass .ag-backdrop { background: rgba(0,0,0,.45); }
}

/* Someone who has asked their phone for less transparency gets solid surfaces. */
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme].has-glass .chat-model-menu,
  :root[data-theme].has-glass .ag-sheet,
  :root[data-theme].has-glass .pop-sheet,
  :root[data-theme].has-glass .chat-composer,
  :root[data-theme].has-glass .ag-backdrop {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--ag-bg);
  }
  :root[data-theme].has-glass .ag-backdrop { background: rgba(0,0,0,.5); }
}

/* Phone feel: no grey flash on tap, no rubber-banding the page behind a sheet,
   and text that does not get resized when the phone is turned sideways. */
:root[data-theme] { -webkit-text-size-adjust: 100%; }
:root[data-theme] button, :root[data-theme] a, :root[data-theme] .cm-row, :root[data-theme] .cm-stop { -webkit-tap-highlight-color: transparent; }
:root[data-theme] .ag-sheet, :root[data-theme] .pop-sheet { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ── Flashcard deck ────────────────────────────────────────── */
:root[data-theme] .am-card { border: 1px solid var(--ag-hairline); border-radius: 26px; background: var(--ag-bg); overflow: hidden; perspective: 1400px; }
:root[data-theme] .am-flip { display: grid; transform-style: preserve-3d; transition: transform .55s var(--mono-ease); }
:root[data-theme] .am-face { grid-area: 1 / 1; padding: 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; }
:root[data-theme] .am-back { transform: rotateY(180deg); }
:root[data-theme] .am-card.is-turned .am-flip { transform: rotateY(180deg); }
:root[data-theme] .am-card.is-done { opacity: .5; transition: opacity .4s; }
:root[data-theme] .am-q { margin: 16px 0 18px; font: 400 clamp(21px, 4.4vw, 27px)/1.25 var(--mono-serif); color: var(--ag-text); }
:root[data-theme] .am-a { margin: 14px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--ag-text); }
:root[data-theme] .am-trap { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--mono-soft); font-size: 14.5px; line-height: 1.5; color: var(--ag-text-2); }
:root[data-theme] .am-trap b { color: var(--ag-text); }
:root[data-theme] .am-hint-btn { align-self: flex-start; padding: 0; border: 0; background: none; font: 500 14px var(--ag-font); color: var(--ag-text-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
:root[data-theme] .am-hint { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ag-text-2); }
:root[data-theme] .am-turn { margin-top: auto; padding-top: 18px; align-self: stretch; border: 0; background: none; font: 500 14px var(--mono-code); letter-spacing: .04em; text-transform: uppercase; color: var(--ag-text-3); cursor: pointer; text-align: left; transition: color .2s; }
:root[data-theme] .am-turn:hover { color: var(--ag-text); }
:root[data-theme] .am-judge { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 20px; }
:root[data-theme] .am-judge button { padding: 14px 15px; border-radius: 16px; border: 1.5px solid var(--ag-hairline-strong); background: var(--ag-bg); color: var(--ag-text); font: 500 15px var(--ag-font); cursor: pointer; transition: background-color .2s, border-color .2s, transform .15s var(--mono-ease); }
:root[data-theme] .am-judge button:active { transform: scale(.97); }
:root[data-theme] .am-got { background: var(--mono-inv) !important; color: var(--mono-on-inv) !important; border-color: var(--mono-inv) !important; }
:root[data-theme] .am-again:hover { border-color: var(--ag-text); }
:root[data-theme] .am-done { padding: 22px 20px; border: 1px solid var(--ag-hairline); border-radius: 26px; background: var(--ag-bg); }
:root[data-theme] .am-done-n { margin: 0 0 4px; font: 400 clamp(30px, 7vw, 40px)/1.05 var(--mono-serif); color: var(--ag-text); }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .am-flip { transition: none; }
}

/* ── Revision notes ────────────────────────────────────────── */
:root[data-theme] .am-notes { border: 1px solid var(--ag-hairline); border-radius: 26px; background: var(--ag-bg); padding: 24px 22px; }
:root[data-theme] .am-nh { padding-bottom: 16px; border-bottom: 1px solid var(--ag-hairline); }
:root[data-theme] .am-nk { margin: 0 0 6px; font: 11.5px var(--mono-code); letter-spacing: .08em; text-transform: uppercase; color: var(--ag-text-3); }
:root[data-theme] .am-nt { margin: 0; font: 400 clamp(24px, 5vw, 32px)/1.15 var(--mono-serif); color: var(--ag-text); }
:root[data-theme] .am-ns { margin-top: 24px; }
:root[data-theme] .am-ns h4 { margin: 0 0 10px; font: 600 12px var(--mono-code); letter-spacing: .07em; text-transform: uppercase; color: var(--ag-text-3); }
:root[data-theme] .am-ns ul, :root[data-theme] .am-ns ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
:root[data-theme] .am-ns li { font-size: 16px; line-height: 1.6; color: var(--ag-text-2); }
:root[data-theme] .am-ns li::marker { color: var(--ag-text-3); }
:root[data-theme] .am-nf { margin: 14px 0 0; display: grid; gap: 4px; }
:root[data-theme] .am-nf dt { font: 500 16px var(--mono-code); color: var(--ag-text); padding: 9px 13px; border: 1px solid var(--ag-hairline); border-radius: 12px 12px 0 0; background: var(--mono-soft); }
:root[data-theme] .am-nf dd { margin: 0 0 12px; padding: 9px 13px; border: 1px solid var(--ag-hairline); border-top: 0; border-radius: 0 0 12px 12px; font-size: 14.5px; line-height: 1.5; color: var(--ag-text-2); }
:root[data-theme] .am-nex { padding: 18px; border: 1px solid var(--ag-hairline-strong); border-radius: 18px; }
:root[data-theme] .am-nexq { margin: 0 0 14px; font-size: 16px; line-height: 1.55; color: var(--ag-text); }
:root[data-theme] .am-nintro { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--ag-text); }
:root[data-theme] .am-ns details { margin-top: 6px; }
:root[data-theme] .am-ns summary { cursor: pointer; font-weight: 600; }
:root[data-theme] .am-nexa { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--ag-hairline); font-size: 16px; color: var(--ag-text); }
:root[data-theme] .am-ntrap { padding: 16px 18px; border-radius: 18px; background: var(--mono-soft); }
:root[data-theme] .am-ntrap p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ag-text-2); }
:root[data-theme] .am-nrecap { padding-top: 20px; border-top: 1px solid var(--ag-hairline); }
:root[data-theme] .am-nrecap li { color: var(--ag-text); }

/* ── Marked answers ────────────────────────────────────────── */
:root[data-theme] .am-paper { border: 1px solid var(--ag-hairline); border-radius: 26px; background: var(--ag-bg); overflow: hidden; }
:root[data-theme] .am-pin { padding: 20px; }
:root[data-theme] .am-pq { margin: 14px 0 16px; font: 400 clamp(19px, 3.9vw, 24px)/1.35 var(--mono-serif); color: var(--ag-text); }
:root[data-theme] .am-pq b { font-family: var(--ag-font); font-size: .82em; font-weight: 600; letter-spacing: .02em; }
:root[data-theme] .am-ans { width: 100%; box-sizing: border-box; padding: 14px 15px; border: 1.5px solid var(--ag-hairline-strong); border-radius: 18px; background: var(--ag-bg); color: var(--ag-text); font: 400 16px/1.55 var(--ag-font); resize: vertical; transition: border-color .2s; }
:root[data-theme] .am-ans:focus { outline: none; border-color: var(--ag-text); }
:root[data-theme] .am-ans:disabled { opacity: .6; }
:root[data-theme] .am-submit { width: 100%; margin-top: 12px; padding: 14px; border: 0; border-radius: 16px; background: var(--mono-inv); color: var(--mono-on-inv); font: 500 15.5px var(--ag-font); cursor: pointer; transition: transform .15s var(--mono-ease), opacity .2s; }
:root[data-theme] .am-submit:active { transform: scale(.985); }
:root[data-theme] .am-submit:disabled { opacity: .55; cursor: default; }
:root[data-theme] .am-marked { border: 1px solid var(--ag-hairline); border-radius: 26px; background: var(--ag-bg); padding: 22px 20px; }
:root[data-theme] .am-score { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; }
:root[data-theme] .am-score b { font: 400 clamp(32px, 7vw, 42px)/1 var(--mono-serif); color: var(--ag-text); }
:root[data-theme] .am-score span { font: 14px var(--mono-code); color: var(--ag-text-3); }
:root[data-theme] .am-scheme { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
:root[data-theme] .am-scheme li { display: grid; grid-template-columns: 24px 1fr auto; align-items: start; gap: 10px; padding: 11px 12px; border-radius: 12px; font-size: 15px; line-height: 1.45; }
:root[data-theme] .am-scheme .is-got { background: var(--mono-soft); color: var(--ag-text); }
:root[data-theme] .am-scheme .is-missed { color: var(--ag-text-3); }
:root[data-theme] .am-sm { font: 600 15px var(--mono-code); text-align: center; }
:root[data-theme] .am-scheme .is-missed .am-sm { color: #c0392b; }
html[data-theme="dark"] .am-scheme .is-missed .am-sm { color: #ff6b57; }
:root[data-theme] .am-smk { font: 13px var(--mono-code); color: var(--ag-text-3); padding-top: 1px; }
:root[data-theme] .am-comment { margin: 18px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ag-text-2); }
:root[data-theme] .am-better, :root[data-theme] .am-note { margin: 14px 0 0; padding: 14px 15px; border-radius: 16px; background: var(--mono-soft); font-size: 15px; line-height: 1.55; color: var(--ag-text-2); }
:root[data-theme] .am-better b, :root[data-theme] .am-note b { display: inline-block; margin-bottom: 4px; font: 600 11.5px var(--mono-code); letter-spacing: .07em; text-transform: uppercase; color: var(--ag-text-3); }
:root[data-theme] .am-model { border: 1px solid var(--ag-hairline); border-radius: 20px; padding: 18px; }
:root[data-theme] .am-model h4 { margin: 0 0 10px; font: 600 11.5px var(--mono-code); letter-spacing: .07em; text-transform: uppercase; color: var(--ag-text-3); }
:root[data-theme] .am-model p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ag-text); white-space: pre-wrap; }

/* ── Slide deck preview ────────────────────────────────────── */
:root[data-theme] .am-slides { border: 1px solid var(--ag-hairline); border-radius: 26px; background: var(--ag-bg); padding: 24px 22px; }
:root[data-theme] .am-slide { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 20px 0; border-top: 1px solid var(--ag-hairline); }
:root[data-theme] .am-slide:first-of-type { border-top: 0; }
:root[data-theme] .am-sn { margin: 0; font: 500 12px var(--mono-code); color: var(--ag-text-3); padding-top: 3px; }
:root[data-theme] .am-sbody h4 { margin: 0 0 10px; font: 400 19px/1.3 var(--mono-serif); color: var(--ag-text); }
:root[data-theme] .am-sbody ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
:root[data-theme] .am-sbody li { font-size: 15px; line-height: 1.45; color: var(--ag-text-2); }
:root[data-theme] .am-snotes { margin: 12px 0 0; padding: 12px 14px; border-left: 2px solid var(--ag-hairline-strong); font-size: 14.5px; line-height: 1.6; color: var(--ag-text-3); }

/* ---- Category colour ----------------------------------------------------
   The page stays black and white. Colour appears in one place only: it tells
   you which kind of thing a card is, so the Library reads at a glance without
   anyone having to read the label. Five hues, one per category, each picked to
   hold its contrast on both the white and the black ground. */
:root {
  --c-notes: #2f6f4f; --c-exams: #9a4a2b; --c-cards: #3a5fa8;
  --c-quiz: #6b4a9a; --c-slides: #9a7320;
}
html[data-theme="dark"] {
  --c-notes: #63c08f; --c-exams: #e08a5f; --c-cards: #7ea6f0;
  --c-quiz: #b08ae0; --c-slides: #d9ab4a;
}
:root[data-theme] #notes-grid   .lib-type { color: var(--c-notes) !important; }
:root[data-theme] #exams-grid   .lib-type { color: var(--c-exams) !important; }
:root[data-theme] #cards-grid   .lib-type { color: var(--c-cards) !important; }
:root[data-theme] #quizzes-grid .lib-type { color: var(--c-quiz) !important; }
:root[data-theme] #slides-grid  .lib-type { color: var(--c-slides) !important; }

/* Hovering a card borrows its own category's hue, so the colour stays meaningful
   rather than becoming a second accent. */
:root[data-theme] #notes-grid   .lib-card:hover { border-color: var(--c-notes) !important; }
:root[data-theme] #exams-grid   .lib-card:hover { border-color: var(--c-exams) !important; }
:root[data-theme] #cards-grid   .lib-card:hover { border-color: var(--c-cards) !important; }
:root[data-theme] #quizzes-grid .lib-card:hover { border-color: var(--c-quiz) !important; }
:root[data-theme] #slides-grid  .lib-card:hover { border-color: var(--c-slides) !important; }

/* ---- Score and recall colour --------------------------------------------
   One three-step scale, used for every score ARIA shows and for the two
   judgements on a flashcard. Green means the mark was earned, amber means it
   was half earned, red means it was lost — the same meaning everywhere, so a
   student never has to work out what a colour is doing. */
:root {
  --c-good: #2f7a52; --c-mid: #9a6b14; --c-low: #b23a26;
  --c-good-soft: #eef6f1; --c-mid-soft: #fbf4e6; --c-low-soft: #fbeeeb;
}
html[data-theme="dark"] {
  --c-good: #58c288; --c-mid: #d9a842; --c-low: #f06a53;
  --c-good-soft: #0d1a13; --c-mid-soft: #1a1508; --c-low-soft: #1d0f0c;
}

/* The score itself, on a question and on the finished paper. */
:root[data-theme] .am-score[data-band="good"] b, :root[data-theme] .am-done-n[data-band="good"] { color: var(--c-good) !important; }
:root[data-theme] .am-score[data-band="mid"] b,  :root[data-theme] .am-done-n[data-band="mid"]  { color: var(--c-mid) !important; }
:root[data-theme] .am-score[data-band="low"] b,  :root[data-theme] .am-done-n[data-band="low"]  { color: var(--c-low) !important; }
:root[data-theme] .am-score[data-band="none"] b, :root[data-theme] .am-done-n[data-band="none"] { color: var(--c-low) !important; }

/* A mark-scheme point that was earned should look earned. */
:root[data-theme] .am-scheme .is-got { background: var(--c-good-soft) !important; }
:root[data-theme] .am-scheme .is-got .am-sm { color: var(--c-good) !important; }
:root[data-theme] .am-scheme .is-missed { background: var(--c-low-soft) !important; }
:root[data-theme] .am-scheme .is-missed .am-sm { color: var(--c-low) !important; }

/* The flashcard verdict. "I knew it" is the only filled button on the card, so
   it keeps its weight and gains the meaning. */
:root[data-theme] .am-got { background: var(--c-good) !important; border-color: var(--c-good) !important; color: #ffffff !important; }
:root[data-theme] .am-again { border-color: var(--c-mid) !important; color: var(--c-mid) !important; }
:root[data-theme] .am-again:hover { background: var(--c-mid-soft) !important; border-color: var(--c-mid) !important; }
:root[data-theme] .am-card .aq-bar i { background: var(--c-good) !important; }
:root[data-theme] .am-trap { background: var(--c-mid-soft) !important; }
:root[data-theme] .am-trap b { color: var(--c-mid) !important; }
/* In dark the greens are light, so the filled button takes dark text instead. */
html[data-theme="dark"] .am-got { color: #06140d !important; }

/* ---- ARIA palette -------------------------------------------------------
   The colours every page can draw on. Solid, never glowing or gradient: a hue
   marks what something is (a section, a subject, a tool), and the page around
   it stays black and white so the colour has something to stand out against. */
:root {
  --hue-blue: #0a7cff; --hue-indigo: #5b5bd6; --hue-purple: #9b4fd0;
  --hue-pink: #e0457b; --hue-red: #e5483b; --hue-amber: #e8930c;
  --hue-green: #2fae5b; --hue-teal: #0f9aa8; --hue-slate: #6b7280;
}
html[data-theme="dark"] {
  --hue-blue: #3d95ff; --hue-indigo: #7b7bf0; --hue-purple: #b67ce6;
  --hue-pink: #f0719c; --hue-red: #ff6b5e; --hue-amber: #f5b43a;
  --hue-green: #4cc977; --hue-teal: #3cc2cf; --hue-slate: #8a93a3;
}

/* ---- Subject colour on course cards -------------------------------------
   Each course carries its subject's hue (set as --subj by aria-subjects.js):
   the progress strip fills in it, and hovering outlines the card in it. */
:root[data-theme] .mono-course .dash-course-name { display: flex; align-items: center; gap: 12px; }
:root[data-theme] .mono-course-emoji {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 13px; font-size: 24px; line-height: 1;
  background: color-mix(in srgb, var(--subj, var(--ag-text)) 14%, transparent);
}
:root[data-theme] .mono-course .mono-strip i.done { background: var(--subj, var(--ag-text)) !important; }
:root[data-theme] .mono-course:hover { border-color: var(--subj, var(--ag-text)) !important; }
:root[data-theme] .mono-course .card-progress-pct { color: var(--subj, var(--ag-text)) !important; }

/* Study room: the leave button stays red and pen colours stay visible in every theme */
:root[data-theme] .sr-ctl.sr-leave, .sr-ctl.sr-leave { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; }
:root[data-theme] .sr-ctl.sr-leave:hover { background: #b91c1c !important; border-color: #b91c1c !important; }
:root[data-theme] .sr-tool[data-color][aria-pressed="true"] { border-color: var(--ag-text) !important; box-shadow: 0 0 0 2px var(--ag-text) inset !important; }