/* ChemIQ "Instrument" theme — dark console identity, single deliberate look.
Served as a plain public asset (public/instrument-theme.css, NOT bundled
through Vite's JS/CSS module graph) and toggled on/off as a whole via a
in index.html, whose .disabled
property ThemeProvider (src/context/ThemeContext.jsx) flips for
dark/auto-resolved-to-dark. A blocking inline script in index.html sets
the same disabled state before first paint so there is no flash of the
wrong theme. An earlier version tried to make this file itself
conditional with a CSS @scope() wrapper instead of toggling the whole
stylesheet -- @scope parsed fine and its selector matched
:root[data-theme="dark"] when tested in isolation, but produced no
visible effect at all once actually deployed and loaded from its real
built URL (getComputedStyle on --iv-bg/--iv-accent kept returning empty
despite the attribute being set correctly) -- root cause not fully
pinned down, but disabling the whole stylesheet via a plain is a
much older, simpler, universally-supported browser mechanism with no
comparable failure mode, so this switched to that instead of digging
further into an edge case in something newer. Loading it after every
other page stylesheet still lets its rules win the cascade without
editing those files directly (many are targeted by build-time patch
scripts; this file avoids that coupling entirely) because every rule
here uses !important and CSS importance is decided before specificity
or source order, regardless of a plain 's position in . */
:root {
--iv-bg: #0b1210;
--iv-panel: #101b18;
--iv-panel-raised: #142320;
--iv-line: #1e2a26;
--iv-line-strong: #2c3b36;
--iv-text: #e8f3ef;
--iv-text-dim: #7fa79c;
--iv-text-faint: #4c6d65;
--iv-accent: #2fe6c7;
--iv-accent-dim: #1c9a86;
--iv-amber: #f2b84b;
--iv-red: #ff6b5e;
--iv-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
--iv-sans: -apple-system, "Segoe UI", system-ui, sans-serif;
--iv-fast: 160ms;
--iv-base: 320ms;
--iv-ease: cubic-bezier(.16,.84,.44,1);
}
/* index.css's own final "Modern ChemIQ design system" layer defines a
second, separate token set (--bg/--surface/--ink/--muted/--line/--border/
--teal-*) that a number of page stylesheets (leaderboard-play.css among
them) read directly. Redeclaring it here catches every one of those
consumers in one place instead of hunting each file down individually. */
:root {
--bg: var(--iv-bg);
--surface: var(--iv-panel);
--surface-soft: var(--iv-panel-raised);
--ink: var(--iv-text);
--muted: var(--iv-text-dim);
--line: var(--iv-line);
--border: var(--iv-line);
--border-subtle: var(--iv-line);
--navy: var(--iv-bg);
--navy2: var(--iv-panel);
--teal: var(--iv-accent);
--teal-dark: var(--iv-accent-dim);
--teal-600: var(--iv-accent-dim);
--teal-500: var(--iv-accent);
--teal-400: var(--iv-accent);
}
@keyframes iv-fade-up {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes iv-flicker-in {
0% { opacity: 0; filter: blur(3px); }
55% { opacity: .6; filter: blur(1px); }
70% { opacity: .35; }
100% { opacity: 1; filter: blur(0); }
}
@keyframes iv-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(47,230,199,.5); }
50% { opacity: .55; box-shadow: 0 0 0 4px rgba(47,230,199,0); }
}
@keyframes iv-scan {
from { transform: translateY(-100%); opacity: 0; }
8% { opacity: 1; }
92% { opacity: 1; }
to { transform: translateY(2200%); opacity: 0; }
}
@keyframes iv-sweep-in {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes iv-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
/* ---------------------------------------------------------------- shell */
body {
background: var(--iv-bg);
color-scheme: dark;
}
.app-root {
background: var(--iv-bg) !important;
color: var(--iv-text);
min-height: 100vh;
animation: iv-fade-up var(--iv-base) var(--iv-ease) both;
}
/* index.css sets its own light background directly on .app-main in several
places (base rule, a media query, and a later "modern design system"
rule at 4148 with a light gradient) -- previously only .role-teacher and
.role-assistant_admin had a matching override below, so every other role
(student, admin, assistant) kept the light canvas behind newly-dark
cards: a washed-out grey background with a hard edge against every dark
panel, which is almost certainly what made an earlier dark-mode attempt
"look so bad" before this file was ever wired into the app (see
src/main.jsx). Covering every role here, not just those two. */
.app-main {
background: var(--iv-bg) !important;
color: var(--iv-text);
}
.loading-screen {
background: var(--iv-bg) !important;
color: var(--iv-text) !important;
}
.loading-mark {
animation: iv-pulse 1.8s ease-in-out infinite;
}
/* --------------------------------------------------------------- sidebar */
.sidebar {
background: var(--iv-panel) !important;
border-right: 1px solid var(--iv-line);
color: var(--iv-text);
position: relative;
overflow: hidden;
}
.sidebar::after {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 40%;
background: linear-gradient(180deg, rgba(47,230,199,.55), transparent);
animation: iv-scan 7s linear infinite;
pointer-events: none;
opacity: .35;
}
.sidebar-brand { border-color: var(--iv-line) !important; }
.sidebar-brand strong { color: var(--iv-text) !important; font-family: var(--iv-mono); letter-spacing: .02em; }
.sidebar-brand span { color: var(--iv-text-faint) !important; }
.sidebar-logo {
background: var(--iv-panel-raised) !important;
color: var(--iv-accent) !important;
border: 1px solid var(--iv-line-strong);
}
.sidebar-user {
border-color: var(--iv-line) !important;
animation: iv-fade-up var(--iv-base) var(--iv-ease) both;
animation-delay: 60ms;
}
.sidebar-user small { color: var(--iv-text-faint) !important; font-family: var(--iv-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-user p { color: var(--iv-text) !important; }
.sidebar-nav { position: relative; z-index: 1; }
.sidebar .nav-item {
color: var(--iv-text-dim) !important;
border-radius: 8px;
transition: color var(--iv-fast) var(--iv-ease), background var(--iv-fast) var(--iv-ease), transform var(--iv-fast) var(--iv-ease);
animation: iv-fade-up var(--iv-base) var(--iv-ease) both;
position: relative;
}
.sidebar-nav .nav-item:nth-child(1) { animation-delay: 40ms; }
.sidebar-nav .nav-item:nth-child(2) { animation-delay: 80ms; }
.sidebar-nav .nav-item:nth-child(3) { animation-delay: 120ms; }
.sidebar-nav .nav-item:nth-child(4) { animation-delay: 160ms; }
.sidebar-nav .nav-item:nth-child(5) { animation-delay: 200ms; }
.sidebar-nav .nav-item:nth-child(6) { animation-delay: 240ms; }
.sidebar-nav .nav-item:nth-child(7) { animation-delay: 280ms; }
.sidebar-nav .nav-item:nth-child(8) { animation-delay: 320ms; }
.sidebar-nav .nav-item:nth-child(9) { animation-delay: 360ms; }
.sidebar .nav-item:hover { background: var(--iv-panel-raised) !important; color: var(--iv-text) !important; transform: translateX(2px); }
.sidebar .nav-item.active {
background: var(--iv-panel-raised) !important;
color: var(--iv-accent) !important;
}
.sidebar .nav-item.active::before {
content: "";
position: absolute;
left: -12px; top: 50%;
width: 3px; height: 60%;
transform: translateY(-50%);
background: var(--iv-accent);
border-radius: 0 3px 3px 0;
box-shadow: 0 0 8px var(--iv-accent);
}
.sidebar .nav-item.active .nav-icon { color: var(--iv-accent) !important; animation: iv-pulse 2.4s ease-in-out infinite; }
.sidebar-note {
border-top-color: var(--iv-line) !important;
color: var(--iv-text-faint) !important;
}
.sidebar-note strong { color: var(--iv-text-dim) !important; }
/* ---------------------------------------------------------------- topbar */
.topbar {
background: var(--iv-panel) !important;
border-bottom: 1px solid var(--iv-line) !important;
color: var(--iv-text) !important;
}
.topbar-page-title, .desktop-title { color: var(--iv-text) !important; font-family: var(--iv-mono); }
.mobile-brand { color: var(--iv-text) !important; }
.mobile-brand-mark { color: var(--iv-accent) !important; }
.btn-icon.topbar-menu-button { color: var(--iv-text-dim) !important; }
.btn-icon.topbar-menu-button:hover { color: var(--iv-accent) !important; }
.topbar-profile-button { color: var(--iv-text) !important; }
.topbar-profile-summary { color: var(--iv-text) !important; }
.topbar-profile-menu, .topbar-popover {
background: var(--iv-panel-raised) !important;
border: 1px solid var(--iv-line-strong) !important;
color: var(--iv-text) !important;
animation: iv-fade-up var(--iv-fast) var(--iv-ease) both;
}
.topbar-menu-action { color: var(--iv-text-dim) !important; }
.topbar-menu-action:hover { color: var(--iv-text) !important; background: var(--iv-panel) !important; }
.topbar-menu-action.is-danger { color: var(--iv-red) !important; }
.topbar-menu-action.is-active { color: var(--iv-accent) !important; background: rgba(47,230,199,.12) !important; }
.topbar-theme-button { color: var(--iv-text-dim) !important; }
.topbar-theme-button:hover { color: var(--iv-accent) !important; }
.spinner { border-color: var(--iv-line) !important; border-top-color: var(--iv-accent) !important; }
/* ----------------------------------------------------------- bottom nav */
.mobile-bottom-nav {
background: var(--iv-panel) !important;
border-top: 1px solid var(--iv-line) !important;
}
.mobile-bottom-nav-item { color: var(--iv-text-faint) !important; transition: color var(--iv-fast) var(--iv-ease), transform var(--iv-fast) var(--iv-ease); }
.mobile-bottom-nav-item:active { transform: scale(.92); }
.mobile-bottom-nav-item.active { color: var(--iv-accent) !important; }
.mobile-bottom-nav-indicator {
background: var(--iv-accent) !important;
box-shadow: 0 0 6px var(--iv-accent);
}
/* -------------------------------------------------------------- buttons */
.btn, .btn-dark, .btn-icon, button.btn, .classroom-create-button, .classroom-import-button {
transition: transform var(--iv-fast) var(--iv-ease), box-shadow var(--iv-fast) var(--iv-ease), background var(--iv-fast) var(--iv-ease), border-color var(--iv-fast) var(--iv-ease);
}
.btn {
background: var(--iv-panel-raised) !important;
color: var(--iv-text) !important;
border: 1px solid var(--iv-line-strong) !important;
}
.btn:hover { border-color: var(--iv-accent-dim) !important; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-dark {
background: linear-gradient(135deg, var(--iv-accent-dim), #0e5a4e) !important;
color: #04211b !important;
border: 1px solid var(--iv-accent) !important;
font-weight: 600;
}
.btn-dark:hover { box-shadow: 0 0 0 3px rgba(47,230,199,.18); transform: translateY(-1px); }
.btn-dark:disabled { opacity: .5; box-shadow: none; transform: none; }
.btn-icon { color: var(--iv-text-dim) !important; }
.btn-icon:hover { color: var(--iv-accent) !important; transform: scale(1.06); }
/* --------------------------------------------------------- panels/cards */
.panel, .action-card, .teacher-card, .admin-side-panel, .admin-table-wrap,
.student-empty-card, .student-classroom-folder, .student-classroom-item,
.classroom-folder, .classroom-modal, .admin-summary-card,
.admin-workspace, .assistant-workspace-page, .frame {
background: var(--iv-panel) !important;
border: 1px solid var(--iv-line) !important;
color: var(--iv-text) !important;
box-shadow: none !important;
}
.panel:hover, .action-card:hover, .admin-operation-card:hover, .student-task-card:hover {
border-color: var(--iv-line-strong) !important;
transform: translateY(-2px);
}
h1, h2, h3, .hero h1, .admin-workspace-heading h1, .student-page-heading h1 { color: var(--iv-text) !important; }
p, span, small, label { color: inherit; }
.kicker { color: var(--iv-accent) !important; font-family: var(--iv-mono); letter-spacing: .08em; }
.hero, .workspace-hero,
.role-teacher .hero, .role-assistant .hero, .role-assistant_admin .hero {
background: var(--iv-panel) !important;
border: 1px solid var(--iv-line) !important;
box-shadow: none !important;
}
.hero p, .workspace-hero p,
.role-teacher .hero p, .role-assistant .hero p, .role-assistant_admin .hero p {
color: var(--iv-text-dim) !important;
}
/* ------------------------------------------------------------ admin-* */
.admin-scope-bar {
background: var(--iv-panel-raised) !important;
border: 1px solid var(--iv-line-strong) !important;
backdrop-filter: none !important;
}
.admin-scope-title { color: var(--iv-accent) !important; }
.admin-scope-bar label { background: var(--iv-panel) !important; border-color: var(--iv-line) !important; }
.admin-scope-bar select { color: var(--iv-text) !important; }
.admin-scope-divider { color: var(--iv-text-faint) !important; }
.admin-summary-grid { animation: iv-fade-up var(--iv-base) var(--iv-ease) both; }
.admin-summary-card {
animation: iv-flicker-in 560ms var(--iv-ease) both;
}
.admin-summary-card:nth-child(1) { animation-delay: 40ms; }
.admin-summary-card:nth-child(2) { animation-delay: 100ms; }
.admin-summary-card:nth-child(3) { animation-delay: 160ms; }
.admin-summary-card:nth-child(4) { animation-delay: 220ms; }
.admin-summary-card:nth-child(5) { animation-delay: 280ms; }
.admin-summary-card strong { color: var(--iv-accent) !important; font-family: var(--iv-mono); font-variant-numeric: tabular-nums; }
.admin-summary-card span, .admin-summary-card p { color: var(--iv-text-faint) !important; }
.admin-card-icon { background: var(--iv-panel-raised) !important; color: var(--iv-accent) !important; }
.admin-filter-bar, .assistant-filter-row { animation: iv-fade-up var(--iv-base) var(--iv-ease) both; animation-delay: 80ms; }
.admin-select, .admin-input, .admin-search,
.role-teacher input, .role-teacher select, .role-teacher textarea,
.role-assistant input, .role-assistant select, .role-assistant textarea,
.role-admin input, .role-admin select, .role-admin textarea,
input, select, textarea {
background: var(--iv-panel) !important;
border: 1px solid var(--iv-line-strong) !important;
color: var(--iv-text) !important;
transition: border-color var(--iv-fast) var(--iv-ease), box-shadow var(--iv-fast) var(--iv-ease) !important;
}
input:focus, select:focus, textarea:focus,
.role-teacher input:focus, .role-teacher select:focus, .role-teacher textarea:focus,
.role-assistant input:focus, .role-assistant select:focus, .role-assistant textarea:focus,
.role-admin input:focus, .role-admin select:focus, .role-admin textarea:focus {
border-color: var(--iv-accent) !important;
box-shadow: 0 0 0 3px rgba(47,230,199,.16) !important;
}
::placeholder { color: var(--iv-text-faint) !important; opacity: 1; }
.admin-table-wrap { animation: iv-fade-up var(--iv-base) var(--iv-ease) both; animation-delay: 100ms; }
.admin-table { color: var(--iv-text) !important; }
.admin-table th {
color: var(--iv-text-faint) !important;
font-family: var(--iv-mono);
font-size: 10.5px;
letter-spacing: .06em;
text-transform: uppercase;
border-bottom: 1px solid var(--iv-line-strong) !important;
}
.admin-table td { border-bottom: 1px solid var(--iv-line) !important; }
.admin-table tr { transition: background var(--iv-fast) var(--iv-ease); }
.admin-table tr:hover { background: var(--iv-panel-raised) !important; }
.admin-tab-bar { border-bottom: 1px solid var(--iv-line) !important; }
.admin-tab-button { color: var(--iv-text-faint) !important; transition: color var(--iv-fast) var(--iv-ease); }
.admin-tab-button:hover { color: var(--iv-text) !important; }
.admin-tab-button.is-active {
color: var(--iv-accent) !important;
border-color: var(--iv-accent) !important;
}
.admin-empty-state { color: var(--iv-text-faint) !important; }
.admin-message { background: var(--iv-panel-raised) !important; border: 1px solid var(--iv-line-strong) !important; color: var(--iv-text) !important; }
.admin-message.is-success { border-color: var(--iv-accent-dim) !important; color: var(--iv-accent) !important; }
.admin-message.is-error, .admin-message[class*="danger"] { border-color: var(--iv-red) !important; color: var(--iv-red) !important; }
.admin-status-pill {
font-family: var(--iv-mono);
font-size: 10px;
letter-spacing: .04em;
border: 1px solid var(--iv-line-strong);
background: var(--iv-panel-raised) !important;
color: var(--iv-text-dim) !important;
}
.admin-status-pill.is-good { color: var(--iv-accent) !important; border-color: var(--iv-accent-dim) !important; }
.admin-status-pill.is-good::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--iv-accent); margin-right: 5px; animation: iv-pulse 2s ease-in-out infinite; }
.admin-status-pill.is-warning { color: var(--iv-amber) !important; border-color: #6b5222 !important; }
.admin-status-pill.is-danger { color: var(--iv-red) !important; border-color: #6b2f28 !important; }
/* ----------------------------------------------------------- scrollbar */
* { scrollbar-color: var(--iv-line-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--iv-line-strong); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--iv-text-faint); }
/* ----------------------------------------------------------- utilities */
.loading-screen .auth-box, .app-root [class*="loading"] { color: var(--iv-text); }
/* =====================================================================
PAGE-LOCAL TOKEN OVERRIDES
Several pages define their own local CSS custom properties (scoped to a
page wrapper class, not :root) and build their whole page off them --
redeclaring the same property names on the same selector here, loaded
after the page's own stylesheet, wins the cascade for every rule in that
page that reads var(--token-name), without editing those files directly
(many are targeted by unrelated build-time patch scripts; editing this
file instead has zero anchor-conflict risk by construction). Hardcoded
(non-variable) colors inside these pages are not covered by this pass --
documented follow-up, not silently skipped.
===================================================================== */
/* Student Classroom (student-classroom-google.css) */
.student-classroom-experience {
--classroom-ink: var(--iv-text) !important;
--classroom-muted: var(--iv-text-dim) !important;
--classroom-line: var(--iv-line) !important;
--classroom-teal: var(--iv-accent) !important;
--classroom-teal-dark: var(--iv-accent-dim) !important;
--classroom-mint: var(--iv-panel-raised) !important;
--classroom-sun: var(--iv-amber) !important;
--classroom-lilac: var(--iv-panel-raised) !important;
--classroom-sky: var(--iv-panel-raised) !important;
background: var(--iv-bg) !important;
color: var(--iv-text) !important;
}
.student-classroom-experience .student-classroom-hero,
.student-classroom-folder, .student-classroom-item, .student-empty-card,
.student-task-card {
background: var(--iv-panel) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text) !important;
}
/* Student Classroom "Explorer" shell (student-classroom-google.css) -- a
newer topic-dock + workspace layout added after the section above, whose
own containers (the explorer shell, sticky topic sidebar, workspace panel,
toolbar) were never covered: the individual folder/item cards inside were
already dark via the rule above, but the shell around them stayed on its
original light cream/white background, so the whole page still read as
"not dark" even though its contents technically were. */
.student-classroom-explorer {
background: var(--iv-bg) !important;
box-shadow: none !important;
}
.student-topic-dock {
background: var(--iv-panel) !important;
border-color: var(--iv-line) !important;
box-shadow: none !important;
}
.student-topic-dock-heading { border-bottom-color: var(--iv-line) !important; }
.student-topic-button {
color: var(--iv-text-dim) !important;
}
.student-topic-button:hover {
color: var(--iv-text) !important;
border-color: var(--iv-line-strong) !important;
background: var(--iv-panel-raised) !important;
}
.student-topic-button.is-active {
color: var(--iv-accent) !important;
border-color: var(--iv-accent-dim) !important;
background: rgba(47,230,199,.12) !important;
box-shadow: inset 3px 0 0 var(--iv-accent) !important;
}
.student-topic-button small { color: var(--iv-text-faint) !important; }
.student-topic-icon {
color: var(--iv-amber) !important;
background: rgba(242,184,75,.14) !important;
}
.student-topic-button.is-active .student-topic-icon {
color: #04211b !important;
background: linear-gradient(145deg, var(--iv-accent), var(--iv-accent-dim)) !important;
box-shadow: none !important;
}
.student-classroom-workspace {
background: var(--iv-panel) !important;
border-color: var(--iv-line) !important;
box-shadow: none !important;
}
.student-explorer-toolbar {
background: var(--iv-panel) !important;
border-bottom-color: var(--iv-line) !important;
}
.student-explorer-toolbar .student-breadcrumbs button:hover {
background: var(--iv-panel-raised) !important;
}
.student-explorer-toolbar .student-search-field {
background: var(--iv-panel-raised) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text) !important;
}
.student-classroom-explorer .student-classroom-folder,
.student-classroom-explorer .student-classroom-folder.is-accent-1,
.student-classroom-explorer .student-classroom-folder.is-accent-2,
.student-classroom-explorer .student-classroom-folder.is-accent-3 {
background: var(--iv-panel-raised) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text) !important;
box-shadow: none !important;
}
.student-classroom-folder small { color: var(--iv-text-dim) !important; }
.student-classroom-explorer .student-classroom-item {
background: var(--iv-panel) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text) !important;
box-shadow: none !important;
}
/* "Start here" / topic stage heading -- its h2/p already read
var(--classroom-ink)/var(--classroom-muted), which the token
redeclaration earlier in this file already points at --iv-text/
--iv-text-dim, so the text was already going light while this
background stayed on its original light cream gradient: light text on
a light background, i.e. the exact "ghosted" pattern already documented
elsewhere in this file, just in a different component. */
.student-stage-heading {
background:
radial-gradient(circle at 93% 10%, rgba(242,184,75,.16), transparent 28%),
linear-gradient(135deg, var(--iv-panel-raised), var(--iv-panel)) !important;
border-color: var(--iv-line) !important;
}
.student-stage-back {
background: var(--iv-panel-raised) !important;
border-color: var(--iv-line-strong) !important;
color: var(--iv-accent) !important;
}
.student-stage-count {
background: var(--iv-panel-raised) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text-dim) !important;
box-shadow: none !important;
}
/* Leaderboard (leaderboard-play.css) */
.leaderboard-play-page {
--league-ink: var(--iv-text) !important;
--league-blue: var(--iv-accent) !important;
--league-purple: #9d8bf0 !important;
--league-orange: var(--iv-amber) !important;
--league-yellow: var(--iv-amber) !important;
background: var(--iv-bg) !important;
color: var(--iv-text) !important;
}
/* Attendance (attendance-automation.css) */
.attendance-automation-page {
--attendance-blue: var(--iv-accent) !important;
--attendance-teal: var(--iv-accent-dim) !important;
--attendance-green: var(--iv-accent) !important;
--attendance-ink: var(--iv-text) !important;
background: var(--iv-bg) !important;
color: var(--iv-text) !important;
}
/* Teacher Classroom (teacher-classroom-chemiq.css + teacher-classroom-calm.css,
which is documented as "loaded last on the teacher Classroom page" -- its
.role-teacher-scoped rules outrank this file's bare .sidebar/.app-main by
specificity regardless of load order, so those need matching selectors
here, not just the token overrides. */
.gc-page {
--cq-ink: var(--iv-text) !important;
--cq-ink-2: var(--iv-text) !important;
--cq-teal: var(--iv-accent) !important;
--cq-cyan: var(--iv-accent) !important;
--cq-paper: var(--iv-bg) !important;
--cq-card: var(--iv-panel) !important;
--cq-muted: var(--iv-text-dim) !important;
--cq-line: var(--iv-line) !important;
--cq-amber: var(--iv-amber) !important;
--cq-violet: #9d8bf0 !important;
--cq-coral: var(--iv-red) !important;
color: var(--iv-text) !important;
}
.gc-class-header {
background: var(--iv-panel) !important;
border-color: var(--iv-line) !important;
}
.role-teacher .app-main, .role-assistant_admin .app-main {
background: var(--iv-bg) !important;
}
.role-teacher .sidebar, .role-assistant_admin .sidebar {
background: var(--iv-panel) !important;
}
/* Teacher Classroom add-on stylesheets (teacher-classroom-google.css,
-folder-management.css, -folder-tree.css, -recordings.css, -wow.css) --
unlike teacher-classroom-chemiq.css above, these hardcode hex colors
directly instead of reading the --cq-* tokens, which is why the
Classroom page looked part-dark/part-white: the base page themed
correctly through its tokens, but every feature bolted on afterwards
in a separate file didn't. */
.gc-class-card, .gc-class-header, .gc-tabs, .gc-upcoming-card,
.gc-announce-trigger, .gc-announcement-editor, .gc-check-list,
.gc-stream-post, .gc-create-menu, .gc-search, .gc-gradebook,
.gc-main-fields, .gc-reuse, .gc-field-card,
.cq-manage-folder-button, .cq-folder-modal, .cq-folder-close,
.cq-explorer-shell, .cq-work-row, .cq-recording-link-card, .cq-save-draft {
background: var(--iv-panel) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text) !important;
}
.gc-composer, .cq-folder-order-row, .cq-child-folder-card,
.cq-explorer-empty, .cq-explorer-sidebar, .cq-recording-url,
.cq-recording-remove, .cq-flow-content {
background: var(--iv-panel-raised) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text-dim) !important;
}
.gc-announce-trigger, .cq-folder-close, .cq-recording-remove {
color: var(--iv-text-dim) !important;
}
.cq-tree-button, .cq-tree-main { color: var(--iv-text) !important; }
.gc-composer h1, .gc-composer h2, .gc-composer h3 { color: var(--iv-text) !important; }
/* Teacher AI Copilot (teacher-ai-copilot.css) -- the Assessment/Quiz/Exam
panel. Entirely hardcoded hex, no tokens, so every surface needs its
own override. */
.teacher-ai-panel, .teacher-ai-head, .teacher-ai-modes,
.teacher-ai-message > div, .teacher-ai-prompt,
.teacher-ai-generator-card, .teacher-ai-draft, .teacher-ai-exam-result {
background: var(--iv-panel) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text) !important;
}
.teacher-ai-modes button, .teacher-ai-mode-intro, .teacher-ai-prompt textarea,
.teacher-ai-generator-card textarea, .teacher-ai-generator-card input,
.teacher-ai-generator-card select, .teacher-ai-draft textarea,
.teacher-ai-draft input, .teacher-ai-toggle,
.teacher-ai-question-editor details, .teacher-ai-head > button,
.teacher-ai-draft footer button, .teacher-ai-exam-actions button {
background: var(--iv-panel-raised) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text) !important;
}
.teacher-ai-modes button.is-active {
background: rgba(47,230,199,.14) !important;
border-color: var(--iv-accent-dim) !important;
color: var(--iv-accent) !important;
}
.teacher-ai-draft footer .is-publish, .teacher-ai-exam-actions .is-primary {
background: var(--iv-accent-dim) !important;
border-color: var(--iv-accent) !important;
color: #04211b !important;
}
.teacher-ai-head p, .teacher-ai-mode-intro p, .teacher-ai-exam-result p,
.teacher-ai-thinking, .teacher-ai-modes button small {
color: var(--iv-text-dim) !important;
}
.teacher-ai-source-rule {
background: rgba(47,230,199,.10) !important;
border-left-color: var(--iv-accent) !important;
color: var(--iv-text-dim) !important;
}
.teacher-ai-exam-icon, .teacher-ai-mode-icon, .teacher-ai-orb,
.teacher-ai-question-editor summary > span, .teacher-ai-option-editor label > span,
.teacher-ai-draft > header > strong {
background: rgba(47,230,199,.14) !important;
color: var(--iv-accent) !important;
}
.teacher-ai-alert.is-error {
background: rgba(255,107,94,.14) !important;
border-color: var(--iv-red) !important;
color: var(--iv-red) !important;
}
.teacher-ai-alert.is-success {
background: rgba(47,230,199,.14) !important;
border-color: var(--iv-accent) !important;
color: var(--iv-accent) !important;
}
.teacher-ai-message.is-user > div {
background: var(--iv-accent-dim) !important;
border-color: var(--iv-accent) !important;
color: #04211b !important;
}
/* Assistant Corrections (assistant-classroom-corrections.css, -mobile.css) */
.assistant-coursework-column, .assistant-students-column,
.assistant-coursework-card, .assistant-student-submission-card,
.assistant-metric, .assistant-filter-row select, .assistant-search-field,
.assistant-queue-card, .assistant-grading-panel, .assistant-student-card,
.assistant-grading-grid input, .assistant-grading-grid select,
.assistant-feedback-field textarea {
background: var(--iv-panel) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text) !important;
}
.assistant-selected-work-meta, .assistant-snippets button,
.assistant-approval-message {
background: var(--iv-panel-raised) !important;
color: var(--iv-text-dim) !important;
}
.assistant-coursework-card:hover, .assistant-coursework-card.is-active,
.assistant-student-submission-card:hover, .assistant-student-submission-card.is-active {
background: rgba(47,230,199,.10) !important;
border-color: var(--iv-accent-dim) !important;
}
/* Account page (account-page.css) */
.account-profile-card, .account-section, .account-secondary-button,
.account-input-wrap {
background: var(--iv-panel) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text) !important;
}
.account-security-note {
background: rgba(47,230,199,.10) !important;
color: var(--iv-text-dim) !important;
}
.account-whatsapp-note {
background: var(--iv-panel-raised) !important;
color: var(--iv-text-dim) !important;
}
/* Admin AI usage (admin-ai-usage.css) */
.ai-usage-estimate-note {
background: rgba(47,230,199,.10) !important;
border-color: var(--iv-accent-dim) !important;
color: var(--iv-text-dim) !important;
}
.ai-usage-day-track { background: var(--iv-line-strong) !important; }
.ai-usage-model-row, .ai-usage-plan-row, .ai-usage-recent-row {
background: var(--iv-panel-raised) !important;
border-color: var(--iv-line) !important;
}
.ai-usage-empty strong, .ai-usage-table strong,
.ai-usage-model-row strong, .ai-usage-plan-row strong, .ai-usage-recent-row strong {
color: var(--iv-text) !important;
}
.ai-usage-muted, .ai-usage-day-row > span, .ai-usage-day-row > small,
.ai-usage-summary-card small,
.ai-usage-model-row span, .ai-usage-plan-row span, .ai-usage-recent-row span {
color: var(--iv-text-dim) !important;
}
/* Classroom Google-style tabs (classroom-google-style.css) */
.classroom-google-tabs, .classroom-quick-create button {
background: var(--iv-panel) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text) !important;
}
.classroom-google-tab.is-active { background: var(--iv-panel-raised) !important; color: var(--iv-accent) !important; }
.classroom-google-tab:hover { background: var(--iv-panel-raised) !important; }
/* iPad student surfaces (ipad-student.css) -- @media print rules
deliberately left untouched, printing should always be white paper. */
.student-question-modal, .student-question-modal > header button {
background: var(--iv-panel) !important;
color: var(--iv-text) !important;
}
.student-question-modal > header, .student-question-modal > footer,
.native-assignment-actions, .student-question-options label {
background: var(--iv-panel-raised) !important;
border-color: var(--iv-line) !important;
}
/* Native assignment/quiz runner (native-assignment-runner.css,
google-form-native-quiz.css) -- the actual question-answering screens. */
.native-assignment-modal, .native-assignment-options button,
.native-assignment-state, .native-assignment-result,
.cq-gform-head, .cq-gform-question, .native-quiz-runner {
background: var(--iv-panel) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text) !important;
}
.cq-gform-options label { background: var(--iv-panel-raised) !important; color: var(--iv-text) !important; }
.cq-gform-options label:hover { background: rgba(47,230,199,.10) !important; border-color: var(--iv-accent-dim) !important; }
.native-assignment-state.is-error, .cq-google-form-import.is-error {
background: rgba(255,107,94,.14) !important;
border-color: var(--iv-red) !important;
color: var(--iv-red) !important;
}
/* Source question image (source-question-image.css) -- only the wrapper
frame is retextured. The canvas/PDF surfaces stay white on purpose:
they render actual exam-paper scans, which are white paper. */
.source-question-image { border-color: var(--iv-line) !important; background: var(--iv-panel) !important; }
.source-question-native-wrap { background: var(--iv-panel) !important; }
.source-question-error, .source-question-page-error {
background: rgba(255,107,94,.14) !important;
color: var(--iv-red) !important;
}
/* WhatsApp activation (whatsapp-activation.css, student-whatsapp-activation.css) */
.wa-activation-qr { background: var(--iv-panel-raised) !important; }
.wa-activation-safety-note { background: rgba(242,184,75,.14) !important; color: var(--iv-amber) !important; }
.student-activation-banner-deadline, .student-activation-contact-pill.is-warning {
background: rgba(242,184,75,.14) !important;
color: var(--iv-amber) !important;
}
.student-activation-contact-pill.is-danger {
background: rgba(255,107,94,.14) !important;
color: var(--iv-red) !important;
}
/* AI Chat -- already a dark "Luna" theme (luna-premium.css wins the cascade
over the page's older light rules); align its exact hues to Instrument's
rather than converting it, so it reads as the same console, not a
different dark theme living next to this one. */
.ai-tutor-v2 {
--luna-night: var(--iv-bg) !important;
--luna-panel: var(--iv-panel) !important;
--luna-panel-2: var(--iv-panel-raised) !important;
--luna-line: var(--iv-line) !important;
--luna-mint: var(--iv-accent) !important;
--luna-gold: var(--iv-amber) !important;
--luna-text: var(--iv-text) !important;
--luna-muted: var(--iv-text-dim) !important;
}
/* Login -- page uses inline JS style objects (already retextured to the
Instrument tokens directly), so the only thing a stylesheet still needs
to reach is the ::placeholder pseudo-element, which inline styles can't
target. */
.login-page input::placeholder {
color: var(--iv-text-faint);
opacity: 1;
}
/* Student Experience (student-experience.css) -- covers Today, Classroom,
Tasks, Results, More and Announcements for students. Unlike the pages
above, this file hardcodes hex colors per-selector instead of local
custom properties, so each surface needs its own override rather than
one token redeclaration. */
.student-today-hero, .student-page-heading, .student-panel-card,
.student-metric-card, .student-task-card, .student-classroom-folder,
.student-classroom-item, .student-result-card, .student-more-card,
.student-search-field, .student-result-preview {
background: var(--iv-panel) !important;
border-color: var(--iv-line) !important;
box-shadow: none !important;
}
.student-quiet-state {
background: var(--iv-panel-raised) !important;
border-color: var(--iv-line-strong) !important;
color: var(--iv-text-dim) !important;
}
.student-segmented-control { background: var(--iv-panel-raised) !important; }
.student-segmented-control button.active { background: var(--iv-panel) !important; color: var(--iv-accent) !important; }
.student-today-hero p, .student-page-heading p, .student-task-card p,
.student-more-card p, .student-list-row small, .student-metric-card small,
.student-result-copy p, .student-classroom-folder small, .student-classroom-item small,
.student-task-meta, .student-session-card {
color: var(--iv-text-dim) !important;
}
.student-metric-card strong, .student-session-card strong, .student-result-copy h2 {
color: var(--iv-text) !important;
}
.student-section-title small, .student-text-button, .student-breadcrumbs button,
.student-classroom-icon.is-lesson, .student-task-type {
color: var(--iv-accent) !important;
}
.student-streak-chip { background: rgba(242,184,75,.14) !important; color: var(--iv-amber) !important; }
/* Existing exam picker (existing-exam-picker.css) */
.cq-existing-exam-picker, .cq-exam-library-controls input,
.cq-exam-library-controls select {
background: var(--iv-panel) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text) !important;
}
.cq-existing-exam-picker > header strong { color: var(--iv-text) !important; }
.cq-existing-exam-picker > header small, .cq-exam-library-state {
color: var(--iv-text-dim) !important;
}
.cq-existing-exam-picker > header > span, .cq-exam-library-icon {
background: rgba(47,230,199,.14) !important;
color: var(--iv-accent) !important;
}
.cq-selected-exam {
background: rgba(47,230,199,.10) !important;
border-color: var(--iv-accent-dim) !important;
}
.cq-selected-exam strong { color: var(--iv-text) !important; }
.cq-selected-exam small { color: var(--iv-text-dim) !important; }
.cq-exam-library-state.is-error {
background: rgba(255,107,94,.14) !important;
color: var(--iv-red) !important;
}
/* Immediate Assessment runner (immediate-assessment.css) -- the MCQ
quiz-taking modal. Correct/wrong feedback keeps its green/red meaning,
tinted for legibility on a dark surface instead of pastel-on-white. */
.ai-assessment-modal, .ai-assessment-head, .ai-assessment-actions {
background: var(--iv-panel) !important;
color: var(--iv-text) !important;
}
.ai-assessment-head-actions button, .ai-assessment-head-actions .is-close,
.ai-assessment-options button, .ai-assessment-letter {
background: var(--iv-panel-raised) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text) !important;
}
.ai-assessment-title-row h2, .ai-assessment-question h3 { color: var(--iv-text) !important; }
.ai-assessment-title-row p, .ai-assessment-question-meta small,
.ai-assessment-lock-note, .ai-assessment-state {
color: var(--iv-text-dim) !important;
}
.ai-assessment-title-row > strong {
background: rgba(47,230,199,.14) !important;
color: var(--iv-accent) !important;
}
.ai-assessment-meter { background: var(--iv-line-strong) !important; }
.ai-assessment-options button.is-selected:not(.is-wrong):not(.is-correct) {
background: rgba(47,230,199,.10) !important;
border-color: var(--iv-accent) !important;
}
.ai-assessment-options button.is-correct, .ai-assessment-feedback.is-correct,
.ai-assessment-score {
background: rgba(47,230,199,.14) !important;
border-color: var(--iv-accent) !important;
color: var(--iv-accent) !important;
}
.ai-assessment-options button.is-wrong, .ai-assessment-feedback.is-wrong,
.ai-assessment-alert {
background: rgba(255,107,94,.14) !important;
border-color: var(--iv-red) !important;
color: var(--iv-red) !important;
}
/* Assistant classroom corrections leftovers */
.assistant-selected-work-meta span { background: var(--iv-panel-raised) !important; color: var(--iv-text-dim) !important; }
/* Account page leftovers */
.account-message.is-error {
background: rgba(255,107,94,.14) !important;
color: var(--iv-red) !important;
}
/* Google Form import + native quiz runner (google-form-native-quiz.css) */
.cq-google-form-import, .cq-gform-question, .native-quiz-runner,
.native-quiz-question {
background: var(--iv-panel) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text) !important;
}
.cq-google-form-import.is-error {
background: rgba(255,107,94,.14) !important;
border-color: var(--iv-red) !important;
color: var(--iv-red) !important;
}
.cq-gform-status strong, .cq-gform-head strong, .cq-gform-question-title strong,
.native-quiz-qtitle strong, .native-quiz-submit strong {
color: var(--iv-text) !important;
}
.cq-gform-status small, .cq-gform-head small, .cq-gform-note,
.native-quiz-runner-head small, .native-quiz-qtitle small, .native-quiz-submit small {
color: var(--iv-text-dim) !important;
}
.cq-gform-question-title > span, .native-quiz-qtitle > span {
background: rgba(47,230,199,.14) !important;
color: var(--iv-accent) !important;
}
.cq-gform-ready, .native-quiz-result {
background: rgba(47,230,199,.14) !important;
color: var(--iv-accent) !important;
}
.cq-gform-options label, .native-quiz-options label, .native-quiz-submit {
background: var(--iv-panel-raised) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text) !important;
}
.cq-gform-options label.is-correct, .native-quiz-options label.is-selected {
background: rgba(47,230,199,.14) !important;
border-color: var(--iv-accent) !important;
}
/* WhatsApp activation (whatsapp-activation.css, student-whatsapp-activation.css) */
.wa-activation-card, .wa-activation-steps, .student-activation-banner,
.student-activation-lock-card {
background: var(--iv-panel) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text) !important;
}
.student-activation-banner.is-warning { border-color: var(--iv-amber) !important; }
.student-activation-banner.is-danger { border-color: var(--iv-red) !important; }
.student-activation-banner.is-active { border-color: var(--iv-accent) !important; }
.wa-activation-heading p, .wa-activation-copy, .wa-activation-qr p,
.wa-activation-steps p, .student-activation-banner-copy p,
.student-activation-lock-copy {
color: var(--iv-text-dim) !important;
}
.student-activation-banner-copy strong { color: var(--iv-text) !important; }
.wa-activation-icon, .student-activation-banner-icon,
.student-activation-banner.is-active .student-activation-banner-icon {
background: rgba(47,230,199,.14) !important;
color: var(--iv-accent) !important;
}
.student-activation-banner.is-warning .student-activation-banner-icon {
background: rgba(242,184,75,.14) !important;
color: var(--iv-amber) !important;
}
.student-activation-banner.is-danger .student-activation-banner-icon,
.student-activation-lock-icon, .student-activation-mismatch-icon {
background: rgba(255,107,94,.14) !important;
color: var(--iv-red) !important;
}
.wa-activation-status.is-good, .wa-table-status.is-good,
.student-activation-contact-pill.is-good {
background: rgba(47,230,199,.14) !important;
color: var(--iv-accent) !important;
}
.wa-activation-status.is-warning, .wa-table-status.is-warning,
.student-activation-contact-pill.is-warning {
background: rgba(242,184,75,.14) !important;
color: var(--iv-amber) !important;
}
.wa-activation-status.is-danger, .wa-table-status.is-danger,
.student-activation-contact-pill.is-danger,
.student-activation-mismatch-warning, .student-activation-warning-row {
background: rgba(255,107,94,.14) !important;
color: var(--iv-red) !important;
}
.wa-activation-qr { background: var(--iv-panel-raised) !important; border-color: var(--iv-line) !important; }
/* Student ID badge -- already a translucent tint that works on either
ground; aligned to the shared accent for consistency. */
.student-id-badge {
background: rgba(47,230,199,.10) !important;
border-color: rgba(47,230,199,.24) !important;
color: var(--iv-accent) !important;
}
/* Needs-attention task cards (product-polish.css) -- a higher-specificity
rule (.student-task-section:first-child .student-task-card) forces a
white/orange gradient with !important, beating the flatter
.student-task-card override earlier in this file by specificity even
though both carry !important. This is the exact cause of the "ghosted"
title text reported live: the h1/h2/h3 rule above correctly gives every
heading light text, but this one section's cards were still white,
so the light title text had nothing to contrast against. */
.student-task-section:first-child .student-task-card {
background: var(--iv-panel) !important;
border-color: rgba(242,184,75,.4) !important;
}
/* Leaderboard (leaderboard-play.css) -- the token redeclaration above only
reaches components that read var(--league-*)/var(--muted)/var(--border);
several surfaces hardcode their own hex colors instead and need direct
overrides. The hero and mission-icon gradients used a blue/purple pair
unrelated to any token, which is why they still clashed against the
teal theme everywhere else on the page. */
.leaderboard-game-hero {
background:
radial-gradient(circle at 12% 20%, rgba(47,230,199,.22), transparent 32%),
radial-gradient(circle at 82% 18%, rgba(242,184,75,.16), transparent 28%),
linear-gradient(135deg, var(--iv-bg) 0%, var(--iv-panel-raised) 55%, var(--iv-bg) 100%) !important;
box-shadow: none !important;
}
.leaderboard-player-card {
background: rgba(16,27,24,.6) !important;
border-color: var(--iv-line) !important;
}
.leaderboard-mission-card, .leaderboard-stat-card, .leaderboard-rank-row {
background: var(--iv-panel) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text) !important;
}
.leaderboard-rank-row.is-me {
background: rgba(47,230,199,.08) !important;
border-color: var(--iv-accent) !important;
}
.leaderboard-mission-card::after {
background: linear-gradient(135deg, rgba(47,230,199,.14), rgba(242,184,75,.08)) !important;
}
.leaderboard-mission-icon {
background: linear-gradient(135deg, var(--iv-accent-dim), var(--iv-accent)) !important;
}
.leaderboard-stat-card > span {
background: rgba(47,230,199,.14) !important;
color: var(--iv-accent) !important;
}
.leaderboard-podium-card {
background: var(--iv-panel) !important;
border-color: var(--iv-line) !important;
}
.leaderboard-podium-card.podium-rank-1 {
background: linear-gradient(180deg, var(--iv-panel-raised), var(--iv-panel)) !important;
border-color: var(--iv-amber) !important;
}
.leaderboard-podium-card.podium-rank-2 {
background: var(--iv-panel) !important;
border-color: var(--iv-text-dim) !important;
}
.leaderboard-podium-card.podium-rank-3 {
background: linear-gradient(180deg, var(--iv-panel-raised), var(--iv-panel)) !important;
border-color: #c2410c !important;
}
.leaderboard-podium-score {
background: var(--iv-panel-raised) !important;
color: var(--iv-text) !important;
}
.leaderboard-progress-track { background: var(--iv-line-strong) !important; }
.leaderboard-rank-badges {
background: rgba(242,184,75,.14) !important;
color: var(--iv-amber) !important;
}
/* Student AI Studio (student-ai-studio-final.css) -- the Ask/Quiz/Exam/
Flashcards workspace reachable from the student sidebar's "AI Tutor" tab.
Reported live as "not the same style as the rest of the site": it was
built as its own light purple/blue theme (#111228/#202457/#315b87 hero,
white workspace and cards, #7a79ff/#6e68ee purple accents) and never
retextured when the rest of the app moved to the dark Instrument theme,
so the sidebar/topbar around it are dark but every card inside stayed
white. Bare input/select/textarea are already covered by this file's
global form-field rule above (student-ai-studio-final.css never sets
!important on its own field borders, so the global rule already wins). */
.sai-hero {
background:
radial-gradient(circle at 15% 0, rgba(47,230,199,.16), transparent 40%),
linear-gradient(135deg, var(--iv-panel-raised) 0%, var(--iv-panel) 60%, var(--iv-bg) 100%) !important;
color: var(--iv-text) !important;
box-shadow: none !important;
}
.sai-hero p { color: var(--iv-text-dim) !important; }
.sai-kicker { color: var(--iv-accent) !important; }
.sai-orb {
background: rgba(47,230,199,.14) !important;
color: var(--iv-accent) !important;
}
.sai-mode-grid button {
background: var(--iv-panel) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text) !important;
}
.sai-mode-grid button:hover { border-color: var(--iv-line-strong) !important; }
.sai-mode-grid button.is-active {
background: rgba(47,230,199,.14) !important;
border-color: var(--iv-accent-dim) !important;
color: var(--iv-accent) !important;
}
.sai-mode-grid button small { color: var(--iv-text-dim) !important; }
.sai-mode-grid button.is-active small { color: var(--iv-accent) !important; }
.sai-workspace {
background: var(--iv-panel) !important;
border-color: var(--iv-line) !important;
box-shadow: none !important;
}
.sai-workspace-head span, .sai-output-head span { color: var(--iv-accent) !important; }
.sai-question-card, .sai-review-panel {
background: var(--iv-panel-raised) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text) !important;
}
.sai-question-card header span, .sai-review-panel p { color: var(--iv-text-dim) !important; }
.sai-options button {
background: var(--iv-panel) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text) !important;
}
.sai-options button.is-selected {
background: rgba(47,230,199,.14) !important;
border-color: var(--iv-accent) !important;
}
.sai-message.user {
background: var(--iv-accent-dim) !important;
color: #04211b !important;
}
.sai-message.assistant {
background: var(--iv-panel-raised) !important;
color: var(--iv-text) !important;
}
.sai-empty { color: var(--iv-text-dim) !important; }
.sai-empty h3 { color: var(--iv-text) !important; }
.sai-error {
background: rgba(255,107,94,.14) !important;
color: var(--iv-red) !important;
}
/* Animated Flashcards (animated-flashcards.css) -- already its own bespoke
dark teal deck, not a light-theme mismatch like the rest of Student AI
Studio above, but a DIFFERENT dark theme (#0c1c26/#07131b panels, #5ee0d3
teal, #e9c86f gold) living next to Instrument's. Same treatment as the AI
Chat / Luna section further up: align the exact hues instead of
converting the structure, so it reads as the same console. */
.luna-flashcards {
background:
radial-gradient(circle at 85% 0, rgba(47,230,199,.12), transparent 30%),
linear-gradient(145deg, var(--iv-panel-raised), var(--iv-panel)) !important;
border-color: var(--iv-line-strong) !important;
color: var(--iv-text) !important;
box-shadow: none !important;
}
.luna-flashcards > header { border-bottom-color: var(--iv-line) !important; }
.luna-flashcards > header span { color: var(--iv-accent) !important; }
.luna-flashcards > header strong { color: var(--iv-text) !important; }
.luna-flashcards > header small {
background: var(--iv-panel) !important;
color: var(--iv-text-dim) !important;
}
.luna-flashcard-face { border-color: var(--iv-line-strong) !important; }
.luna-flashcard-front {
background:
radial-gradient(circle at 50% 0, rgba(47,230,199,.14), transparent 42%),
linear-gradient(155deg, var(--iv-panel-raised), var(--iv-panel)) !important;
}
.luna-flashcard-back {
background:
radial-gradient(circle at 15% 15%, rgba(242,184,75,.13), transparent 35%),
linear-gradient(155deg, var(--iv-panel-raised), var(--iv-panel)) !important;
}
.luna-flashcard-face small { color: var(--iv-accent) !important; }
.luna-flashcard-back small { color: var(--iv-amber) !important; }
.luna-flashcard-face strong { color: var(--iv-text) !important; }
.luna-flashcard-face em { color: var(--iv-text-dim) !important; }
.luna-flashcard-glow {
background: var(--iv-accent) !important;
box-shadow: 0 0 25px rgba(47,230,199,.75) !important;
}
.luna-flashcards > footer > button {
background: var(--iv-panel) !important;
border-color: var(--iv-line-strong) !important;
color: var(--iv-text-dim) !important;
}
.luna-flashcards > footer > button:hover {
border-color: var(--iv-accent-dim) !important;
color: var(--iv-accent) !important;
background: rgba(47,230,199,.07) !important;
}
.luna-flashcard-dots span { background: var(--iv-line-strong) !important; }
.luna-flashcard-dots span.is-active { background: var(--iv-accent) !important; }
/* Search box wrapper (index.css's .search-box sets its own white
background on the wrapper div, separate from the input element inside
it, which the global input/select/textarea rule above already covers --
so the wrapper still showed through white, reported live as "search in
competition is white"). Used across several pages (Competition/
leaderboard, admin tables, teacher classroom), not just one. */
.search-box {
background: var(--iv-panel) !important;
border-color: var(--iv-line-strong) !important;
box-shadow: none !important;
}
/* Student AI Studio's topic-picker chips (injected at build time by
scripts/patch-student-topic-picker.mjs into student-ai-studio-final.css
-- the class names below are stable even though the CSS text isn't in
the repo directly). Reported live as "boxes of the topic in AI tutor is
white". */
.sai-topic-picker-label { color: var(--iv-text-dim) !important; }
.sai-topic-group small { color: var(--iv-text-faint) !important; }
.sai-topic-chips button {
background: var(--iv-panel) !important;
border-color: var(--iv-line) !important;
color: var(--iv-text) !important;
}
.sai-topic-chips button:hover { border-color: var(--iv-accent-dim) !important; }
.sai-topic-chips button.is-selected {
background: var(--iv-accent-dim) !important;
border-color: var(--iv-accent) !important;
color: #04211b !important;
}
/* XPBar / ProgressBar / ProgressRow (src/components/XPBar.jsx,
src/components/ProgressBar.jsx, the local ProgressRow in
src/pages/StudentProgressPage.jsx) -- these set colors via inline
style={{}} rather than a stylesheet. An external !important rule still
beats a plain inline style, but only if it has a selector to hang off
of, and these had no className at all, so one was added to each
relevant element for this file to target. Reported live as "progress
cards are so bad in dark theme". */
.xp-bar-card {
background: var(--iv-panel-raised) !important;
}
.xp-bar-card .xp-bar-level { color: var(--iv-text) !important; }
.xp-bar-card .xp-bar-total,
.xp-bar-card .xp-bar-remaining { color: var(--iv-text-dim) !important; }
.progress-track { background: var(--iv-line-strong) !important; }
.progress-row-label { color: var(--iv-text-dim) !important; }