/* MathFilm — Outfit/Manrope + orange-blue smoke backdrop + glass panels
   Loaded on all user HTML pages. Visual only; does not change layout structure.
   Depth via borders/shadows (no rotate/tilt on non-home pages). */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap");

:root {
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-display: "Outfit", "Manrope", "Segoe UI", system-ui, sans-serif;
  --font: "Manrope", "Segoe UI", system-ui, sans-serif;
  --edu-surface: #d4e4f8;
  --orange: #ff7a3d;
  --orange-2: #ff9a5c;
  --orange-soft: #ffe4d4;
  --blue: #2f6bff;
  --blue-2: #5b8cff;
  --glass: rgba(255, 255, 255, 0.52);
  --glass-shell: rgba(255, 255, 255, 0.34);
  --glass-strong: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-edge: rgba(47, 107, 255, 0.14);
  --edu-feature-box-grad: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 255, 0.92) 52%, rgba(236, 244, 255, 0.78) 100%);
  --edu-input-elev-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 0 rgba(222, 233, 248, 0.98),
    0 2px 0 rgba(208, 222, 242, 0.62),
    0 3px 6px rgba(15, 41, 66, 0.05),
    0 8px 20px rgba(15, 41, 66, 0.08);
  --focus-ring: rgba(255, 122, 61, 0.2);

  /* System type scale — max 3 sizes everywhere */
  --type-title: 24px;
  --type-body: 20px;
  --type-meta: 18px;

  /* Legacy aliases → 3 sizes */
  --fs-title: var(--type-title);
  --fs-nav: var(--type-body);
  --fs-body: var(--type-body);
  --fs-sm: var(--type-body);
  --fs-xs: var(--type-meta);
  --fs-table: var(--type-body);
  --fs-table-head: var(--type-meta);
  --fs-stat-label: var(--type-meta);
  --fs-stat-note: var(--type-meta);
}

html, body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
  line-height: 1.55;
  background-color: var(--edu-surface);
}

/* —— Title 24px —— */
h1, h2, h3, h4,
.hero-title,
.quiz-workspace-title,
.quiz-rail-head h2,
.config-rail h2,
.exercise-form-head h1,
.billing-head-copy h1,
.page-title,
.library-card > h2,
.auth-hero-title,
.auth-card h2,
.auth-logo {
  font-family: var(--font-display);
  font-size: var(--type-title) !important;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: balance;
}

/* Brand in topbar stays with shell nav size (16px), not page title scale */
.brand strong {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* —— Body 20px —— */
button,
.btn-primary,
.btn-open,
.btn-ghost,
.rail-btn-primary,
.rail-narration-btn,
.rail-cancel-btn,
.rail-share-btn,
.folder-tab,
.tabs button,
.shell-budget,
.nav-drop-item,
.account,
.model-picker-trigger,
.model-picker-trigger-label,
.model-option strong,
.quiz-rail-step-body strong,
.rail-step-ready-label,
.exercise-field,
.exercise-field textarea,
.exercise-field input,
.exercise-field select,
input,
select,
textarea,
label,
.lesson-ws-text,
.lesson-ws-zone-head > span,
.qc-card h3,
p,
li,
.main,
.library-toolbar,
.tabs {
  font-size: var(--type-body) !important;
  line-height: 1.5;
}

/* —— Meta 18px —— */
.quiz-rail-step-body > span:last-child,
.model-option span,
.model-picker-budget-hint,
.exercise-form-head p,
.exercise-type-switch legend,
.exercise-diff-block legend,
.exercise-mcq-block legend,
.exercise-toggle legend,
.account .phone,
.lead,
.muted,
.hint,
.rail-model-hint,
.rail-progress-detail,
.rail-progress-cost,
.lesson-setting-label,
.lesson-illus-alt-label,
small,
.auth-card p,
.billing-head-copy p,
.stat-card .label,
.overview-stat-label,
.overview-stat-note,
.hero-badge,
.brand-mark {
  font-size: var(--type-meta) !important;
  line-height: 1.45;
}

button,
.btn-primary,
.btn-open,
.btn-ghost,
.rail-btn-primary,
.rail-narration-btn,
.rail-cancel-btn,
.rail-share-btn,
.folder-tab,
.tabs button,
.shell-budget,
.account .phone,
.quiz-workspace-title,
.nav-drop-item,
.menu > a,
.nav-drop-trigger {
  white-space: nowrap;
}

/* Rail steps + model picker need wrapping */
.quiz-rail-step,
.rail-step-ready,
.config-rail .quiz-rail-step,
.config-rail .rail-step-ready,
.model-picker-trigger,
.model-picker-trigger-label {
  white-space: normal !important;
}

.brand,
.brand strong {
  white-space: nowrap;
}

.quiz-rail-step-body,
.rail-step-ready-label {
  min-width: 0;
  overflow: visible;
}

.quiz-rail-step-body strong,
.rail-step-ready-label {
  display: block;
  overflow: visible;
  line-height: 1.25;
}

.quiz-rail-step-body > span:last-child {
  display: block;
  overflow: visible;
  line-height: 1.3;
}

.model-picker-trigger {
  height: auto !important;
  min-height: 44px !important;
  max-height: none !important;
  align-items: flex-start !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  white-space: normal !important;
  overflow: visible !important;
}

.model-picker-trigger-label {
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  line-height: 1.3 !important;
  flex: 1 1 auto;
  min-width: 0;
}

.account .phone,
.shell-budget span {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

input, select, textarea, label, p, li {
  line-height: 1.55;
  overflow-wrap: break-word;
  word-break: normal;
}

textarea,
.lesson-ws-text,
.exercise-field textarea {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* —— Orange / blue pastel smoke backdrop —— */
.viewport,
.user-shell .viewport,
html body .viewport {
  position: relative;
  isolation: isolate;
  background-color: #d4e4f8 !important;
  background-image:
    radial-gradient(ellipse 52% 48% at 12% 10%, rgba(255, 154, 92, 0.34), transparent 58%),
    radial-gradient(ellipse 48% 52% at 88% 18%, rgba(91, 140, 255, 0.38), transparent 55%),
    radial-gradient(ellipse 40% 40% at 70% 88%, rgba(255, 228, 212, 0.55), transparent 60%),
    radial-gradient(ellipse 36% 36% at 20% 80%, rgba(214, 230, 255, 0.7), transparent 58%),
    linear-gradient(145deg, #d4e4f8 0%, #e8eef8 38%, #f3e9e2 72%, #dbe8f7 100%) !important;
  overflow-x: hidden;
}

.viewport::before,
.user-shell .viewport::before {
  content: "";
  position: absolute;
  inset: -30% -35%;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  background-image:
    radial-gradient(ellipse 48% 42% at 16% 28%, rgba(255, 122, 61, 0.5), transparent 70%),
    radial-gradient(ellipse 44% 40% at 78% 20%, rgba(47, 107, 255, 0.46), transparent 68%),
    radial-gradient(ellipse 50% 44% at 55% 82%, rgba(255, 200, 150, 0.42), transparent 72%),
    radial-gradient(ellipse 38% 34% at 24% 76%, rgba(150, 190, 255, 0.4), transparent 66%);
  filter: blur(32px);
  animation: edu-smoke-drift 16s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.viewport::after,
.user-shell .viewport::after {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 22%, rgba(255, 122, 61, 0.42), transparent 26%),
    radial-gradient(circle at 86% 14%, rgba(47, 107, 255, 0.38), transparent 24%),
    radial-gradient(circle at 70% 78%, rgba(255, 154, 92, 0.3), transparent 28%),
    radial-gradient(circle at 24% 82%, rgba(91, 140, 255, 0.34), transparent 22%),
    radial-gradient(circle at 48% 48%, rgba(255, 255, 255, 0.28), transparent 36%);
  filter: blur(36px) saturate(1.1);
  animation: edu-smoke-sway 20s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.viewport > *:not(.topbar),
.user-shell .viewport > *:not(.topbar) {
  position: relative;
  z-index: 1;
}

@keyframes edu-smoke-drift {
  0% { transform: translate3d(-5%, 2%, 0) scale(1) rotate(-3deg); opacity: 0.78; }
  50% { transform: translate3d(6%, -4%, 0) scale(1.12) rotate(2deg); opacity: 1; }
  100% { transform: translate3d(3%, 5%, 0) scale(1.06) rotate(4deg); opacity: 0.88; }
}

@keyframes edu-smoke-sway {
  0% { transform: translate3d(3%, -3%, 0) scale(1.02); opacity: 0.72; }
  50% { transform: translate3d(-6%, 4%, 0) scale(1.16); opacity: 1; }
  100% { transform: translate3d(4%, 2%, 0) scale(1.08); opacity: 0.82; }
}

/* Page surface: no white board over the atmosphere */
.artboard-wrap,
.user-shell .artboard-wrap,
.user-shell .main {
  background: transparent !important;
}

/* Functional create pages fit one viewport — no page scroll */
.quiz-create-page .viewport,
.lesson-create-page .viewport,
.exercise-create-page .viewport,
.lesson-plan-create-page .viewport,
.curriculum-create-page .viewport,
.curriculum-create-page .curriculum-viewport,
body.quiz-create-page .viewport,
body.lesson-create-page .viewport,
body.exercise-create-page .viewport,
body.lesson-plan-create-page .viewport {
  overflow: hidden !important;
  height: 100vh !important;
  height: 100dvh !important;
  overscroll-behavior: none;
}

/* Feature create pages — warm orange canvas */
.quiz-create-page,
.lesson-create-page,
.exercise-create-page,
.lesson-plan-create-page,
.curriculum-create-page,
.theory-create-page {
  background: #fff4ec !important;
}
.quiz-create-page .viewport,
.lesson-create-page .viewport,
.exercise-create-page .viewport,
.lesson-plan-create-page .viewport,
.curriculum-create-page .viewport,
.curriculum-create-page .curriculum-viewport,
body.quiz-create-page .viewport,
body.lesson-create-page .viewport,
body.exercise-create-page .viewport,
body.lesson-plan-create-page .viewport,
body.curriculum-create-page .viewport,
body.curriculum-create-page .curriculum-viewport {
  background-color: #fff4ec !important;
  background-image:
    radial-gradient(ellipse 52% 48% at 12% 10%, rgba(255, 154, 92, 0.42), transparent 58%),
    radial-gradient(ellipse 48% 52% at 88% 18%, rgba(91, 140, 255, 0.2), transparent 55%),
    radial-gradient(ellipse 40% 40% at 70% 88%, rgba(255, 228, 212, 0.58), transparent 60%),
    radial-gradient(ellipse 36% 36% at 20% 80%, rgba(255, 255, 255, 0.52), transparent 58%),
    linear-gradient(145deg, #ffe8d8 0%, #fff4ec 38%, #fff8f3 72%, #e8f1ff 100%) !important;
}

.quiz-create-page .viewport::before,
.lesson-create-page .viewport::before,
.exercise-create-page .viewport::before,
.lesson-plan-create-page .viewport::before,
.curriculum-create-page .viewport::before,
.curriculum-create-page .curriculum-viewport::before,
.quiz-create-page .viewport::after,
.lesson-create-page .viewport::after,
.exercise-create-page .viewport::after,
.lesson-plan-create-page .viewport::after,
.curriculum-create-page .viewport::after,
.curriculum-create-page .curriculum-viewport::after {
  display: block !important;
}

/* Light mode — bias background smoke toward orange (xanh/trắng là accent) */
html:not([data-theme="dark"]) .quiz-create-page .viewport::before,
html:not([data-theme="dark"]) .lesson-create-page .viewport::before,
html:not([data-theme="dark"]) .exercise-create-page .viewport::before,
html:not([data-theme="dark"]) .lesson-plan-create-page .viewport::before,
html:not([data-theme="dark"]) .curriculum-create-page .viewport::before,
html:not([data-theme="dark"]) .curriculum-create-page .curriculum-viewport::before,
html:not([data-theme="dark"]) .theory-create-page .viewport::before {
  background-image:
    radial-gradient(ellipse 48% 42% at 16% 28%, rgba(255, 122, 61, 0.56), transparent 70%),
    radial-gradient(ellipse 44% 40% at 78% 20%, rgba(255, 154, 92, 0.42), transparent 68%),
    radial-gradient(ellipse 50% 44% at 55% 82%, rgba(255, 200, 150, 0.34), transparent 72%),
    radial-gradient(ellipse 38% 34% at 24% 76%, rgba(91, 140, 255, 0.28), transparent 66%);
  opacity: 0.95;
}

html:not([data-theme="dark"]) .quiz-create-page .viewport::after,
html:not([data-theme="dark"]) .lesson-create-page .viewport::after,
html:not([data-theme="dark"]) .exercise-create-page .viewport::after,
html:not([data-theme="dark"]) .lesson-plan-create-page .viewport::after,
html:not([data-theme="dark"]) .curriculum-create-page .viewport::after,
html:not([data-theme="dark"]) .curriculum-create-page .curriculum-viewport::after,
html:not([data-theme="dark"]) .theory-create-page .viewport::after {
  background:
    radial-gradient(circle at 14% 22%, rgba(255, 122, 61, 0.44), transparent 26%),
    radial-gradient(circle at 86% 14%, rgba(255, 154, 92, 0.34), transparent 24%),
    radial-gradient(circle at 70% 78%, rgba(47, 107, 255, 0.22), transparent 28%),
    radial-gradient(circle at 24% 82%, rgba(91, 140, 255, 0.2), transparent 22%),
    radial-gradient(circle at 48% 48%, rgba(255, 255, 255, 0.3), transparent 36%);
  opacity: 0.9;
}

/* Soft motif on create mains — also drifts with the current */
.quiz-create-main,
.main,
.billing-page,
.curriculum-create-page .curriculum-viewport {
  position: relative;
}

.quiz-create-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80'%3E%3Cpath fill='none' stroke='%231d4ed8' stroke-opacity='0.28' stroke-width='1.4' d='M-10 40 C20 10 40 70 70 40 S110 10 140 40'/%3E%3Ccircle cx='24' cy='18' r='1.6' fill='%230f766e' fill-opacity='0.32'/%3E%3Ccircle cx='92' cy='58' r='1.4' fill='%232563eb' fill-opacity='0.3'/%3E%3C/svg%3E");
  background-size: 120px 80px;
  animation: edu-motif-drift 56s linear infinite;
}

.quiz-create-main > * {
  position: relative;
  z-index: 1;
}

@keyframes edu-motif-drift {
  0% { background-position: 0 0; }
  100% { background-position: 120px -80px; }
}

/* Auth keeps its own light surface (theme-exempt) — see auth block below */
.auth-body,
.auth-page {
  position: relative;
  isolation: isolate;
}

.auth-body {
  background-color: #d4e4f8 !important;
  background-image:
    radial-gradient(ellipse 90% 55% at 8% -5%, rgba(255, 122, 61, 0.28), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 5%, rgba(47, 107, 255, 0.3), transparent 52%),
    linear-gradient(145deg, #d4e4f8 0%, #e8eef8 40%, #f3e9e2 100%) !important;
}

.auth-body::before {
  content: "";
  position: fixed;
  inset: -28% -32%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.95;
  background-image:
    radial-gradient(ellipse 48% 42% at 16% 28%, rgba(255, 122, 61, 0.48), transparent 70%),
    radial-gradient(ellipse 44% 40% at 78% 20%, rgba(47, 107, 255, 0.44), transparent 68%),
    radial-gradient(ellipse 50% 44% at 55% 82%, rgba(255, 200, 150, 0.4), transparent 72%);
  filter: blur(30px);
  animation: edu-smoke-drift 18s ease-in-out infinite alternate;
}

.auth-body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 28%, rgba(255, 122, 61, 0.3), transparent 22%),
    radial-gradient(circle at 82% 22%, rgba(47, 107, 255, 0.28), transparent 20%);
  animation: edu-smoke-sway 22s ease-in-out infinite alternate;
}

.auth-page {
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .viewport::before,
  .viewport::after,
  .user-shell .viewport::before,
  .user-shell .viewport::after,
  .quiz-create-main::before,
  .auth-body::before,
  .auth-body::after {
    animation: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .viewport::after,
  .user-shell .viewport::after,
  .auth-body::after {
    filter: none;
    opacity: 0.55;
  }
}

/* —— Dark theme: system-wide user UI (auth exempt) —— */
html[data-theme="dark"] {
  --edu-surface: #0b1526;
  --panel: #141f33;
  --bg: #0b1526;
  --text: #e8eef8;
  --muted: #9eb0cc;
  --navy: #e8f0ff;
  --line: #2a3f5f;
  --line-soft: #243550;
  --glass: rgba(20, 34, 58, 0.72);
  --glass-strong: rgba(20, 34, 58, 0.92);
  --glass-border: rgba(147, 197, 253, 0.22);
  --glass-edge: rgba(147, 197, 253, 0.2);
  --edu-rail-bg: rgba(20, 34, 58, 0.88);
  --edu-rail-border: rgba(147, 197, 253, 0.18);
  --edu-zone-bg: rgba(20, 34, 58, 0.94);
  --edu-zone-focus: #1a2840;
  --edu-feature-border: rgba(147, 197, 253, 0.16);
  --edu-feature-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 12px 28px rgba(0, 0, 0, 0.28);
  color-scheme: dark;
}

html[data-theme="dark"]:not(:has(body.auth-body)) body,
html[data-theme="dark"] body.user-shell {
  background: #0b1526 !important;
  color: var(--text);
}

html[data-theme="dark"] .viewport,
html[data-theme="dark"] .user-shell .viewport {
  background-color: #0b1526 !important;
  background-image:
    radial-gradient(ellipse 50% 45% at 12% 8%, rgba(255, 122, 61, 0.18), transparent 55%),
    radial-gradient(ellipse 48% 50% at 88% 16%, rgba(91, 157, 255, 0.22), transparent 55%),
    linear-gradient(145deg, #0c1628 0%, #0f1d34 52%, #0a1220 100%) !important;
}

html[data-theme="dark"] .viewport::before,
html[data-theme="dark"] .user-shell .viewport::before {
  opacity: 0.85;
  background-image:
    radial-gradient(ellipse 48% 42% at 16% 28%, rgba(255, 122, 61, 0.4), transparent 70%),
    radial-gradient(ellipse 44% 40% at 78% 20%, rgba(91, 157, 255, 0.38), transparent 68%),
    radial-gradient(ellipse 50% 44% at 55% 82%, rgba(255, 154, 92, 0.22), transparent 72%);
  filter: blur(32px);
}

html[data-theme="dark"] .viewport::after,
html[data-theme="dark"] .user-shell .viewport::after {
  background:
    radial-gradient(circle at 14% 22%, rgba(255, 122, 61, 0.32), transparent 26%),
    radial-gradient(circle at 86% 14%, rgba(91, 157, 255, 0.3), transparent 24%),
    radial-gradient(circle at 70% 78%, rgba(255, 154, 92, 0.2), transparent 28%),
    radial-gradient(circle at 24% 82%, rgba(91, 140, 255, 0.26), transparent 22%);
  filter: blur(36px);
}

html[data-theme="dark"] {
  --glass: rgba(20, 34, 58, 0.55);
  --glass-strong: rgba(20, 34, 58, 0.88);
  --glass-border: rgba(147, 197, 253, 0.18);
  --glass-edge: rgba(91, 157, 255, 0.28);
}

/* Auth always stays light, even if html has data-theme=dark */
html[data-theme="dark"] body.auth-body,
body.auth-body {
  background-color: #c5d6ec !important;
  color: #0f1d3d !important;
  color-scheme: light !important;
}

/* Compact pinned shell topbar — beats page type-scale overrides */
:root {
  --shell-topbar-h: 42px;
  --shell-nav-fs: 16px;
}

body.shell-topbar-pinned > .topbar .brand strong,
body.user-shell > .topbar .brand strong,
body.shell-topbar-pinned > .topbar .menu > a,
body.shell-topbar-pinned > .topbar .nav-drop-trigger,
body.user-shell > .topbar .menu > a,
body.user-shell > .topbar .nav-drop-trigger {
  font-size: 16px !important;
  line-height: 1.1 !important;
}

body.shell-topbar-pinned > .topbar .shell-budget,
body.user-shell > .topbar .shell-budget,
body.shell-topbar-pinned > .topbar .account .phone,
body.user-shell > .topbar .account .phone {
  font-size: 14px !important;
}


/* —— Glass surfaces (no tilt) + elevated primary workspaces —— */
.user-shell .library-card,
.user-shell .rail-card,
.user-shell .hero-card,
.user-shell .stat-card,
.user-shell .chat-box,
.user-shell .progress-card,
.user-shell .lesson-list-container,
.user-shell .lesson-detail-card,
.user-shell .mascot-deco-card,
.user-shell .billing-card,
.user-shell .billing-panel,
.user-shell .storage-card,
.user-shell .job-card,
.user-shell .auth-card,
.billing-page .billing-card,
.billing-page .plan-card,
.auth-page .auth-card {
  background: var(--glass) !important;
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  border: 1px solid var(--glass-border) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 10px 28px rgba(15, 41, 66, 0.08) !important;
}

/* Shell frames — airy glass on white (LIGHT only) */
html:not([data-theme="dark"]) .user-shell .config-rail,
html:not([data-theme="dark"]) .user-shell .quiz-workspace,
html:not([data-theme="dark"]) .user-shell .exercise-form,
html:not([data-theme="dark"]) .user-shell .curr-cfg-card,
html:not([data-theme="dark"]) .quiz-create-page .config-rail,
html:not([data-theme="dark"]) .lesson-create-page .config-rail,
html:not([data-theme="dark"]) .exercise-create-page .config-rail,
html:not([data-theme="dark"]) .lesson-plan-create-page .config-rail,
html:not([data-theme="dark"]) .quiz-create-page .quiz-workspace,
html:not([data-theme="dark"]) .lesson-create-page .quiz-workspace,
html:not([data-theme="dark"]) .exercise-create-page .exercise-form,
html:not([data-theme="dark"]) .lesson-plan-create-page .exercise-form,
html:not([data-theme="dark"]) .curriculum-create-page .curr-cfg-card {
  background: var(--glass-shell) !important;
  backdrop-filter: blur(20px) saturate(1.12);
  -webkit-backdrop-filter: blur(20px) saturate(1.12);
  border: 1px solid var(--glass-edge) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 10px 28px rgba(15, 41, 66, 0.06) !important;
}

/* Feature boxes — soft blue-orange gradient (LIGHT only) */
html:not([data-theme="dark"]) .user-shell .input-panel,
html:not([data-theme="dark"]) .user-shell .exercise-form-card,
html:not([data-theme="dark"]) .user-shell .lesson-ws-zone,
html:not([data-theme="dark"]) .user-shell .qc-card,
html:not([data-theme="dark"]) .user-shell .q-card,
html:not([data-theme="dark"]) .user-shell .q-problem-panel,
html:not([data-theme="dark"]) .user-shell .q-illus-panel,
html:not([data-theme="dark"]) .user-shell .q-interaction-controls,
html:not([data-theme="dark"]) .user-shell .q-interaction-panel-side,
html:not([data-theme="dark"]) .user-shell .theme-current-card,
html:not([data-theme="dark"]) .quiz-create-page .q-card,
html:not([data-theme="dark"]) .quiz-create-page .q-problem-panel,
html:not([data-theme="dark"]) .quiz-create-page .q-illus-panel,
html:not([data-theme="dark"]) .quiz-create-page .qc-card,
html:not([data-theme="dark"]) .lesson-create-page .lesson-ws-zone,
html:not([data-theme="dark"]) .exercise-create-page .exercise-form-card,
html:not([data-theme="dark"]) .lesson-plan-create-page .exercise-form-card {
  background: var(--edu-feature-box-grad) !important;
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  border: 1px solid rgba(47, 107, 255, 0.14) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82) inset,
    0 0 0 1px rgba(47, 107, 255, 0.06),
    0 8px 22px rgba(15, 41, 66, 0.07) !important;
}

/* Dark create shells — never use white glass */
html[data-theme="dark"] .user-shell .config-rail,
html[data-theme="dark"] .user-shell .quiz-workspace,
html[data-theme="dark"] .user-shell .input-panel,
html[data-theme="dark"] .user-shell .exercise-form,
html[data-theme="dark"] .user-shell .exercise-form-card,
html[data-theme="dark"] .user-shell .lesson-ws-zone,
html[data-theme="dark"] .user-shell .qc-card,
html[data-theme="dark"] .quiz-create-page .config-rail,
html[data-theme="dark"] .lesson-create-page .config-rail,
html[data-theme="dark"] .exercise-create-page .config-rail,
html[data-theme="dark"] .lesson-plan-create-page .config-rail,
html[data-theme="dark"] .quiz-create-page .quiz-workspace,
html[data-theme="dark"] .lesson-create-page .quiz-workspace,
html[data-theme="dark"] .exercise-create-page .exercise-form,
html[data-theme="dark"] .lesson-plan-create-page .exercise-form,
html[data-theme="dark"] body.quiz-create-page .quiz-workspace,
html[data-theme="dark"] body.user-shell.quiz-create-page .quiz-workspace {
  background: rgba(20, 34, 58, 0.92) !important;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid rgba(147, 197, 253, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.3) !important;
  color: #e8eef8 !important;
}

.user-shell input:not([type="checkbox"]):not([type="radio"]),
.user-shell select,
.user-shell textarea,
.user-shell .model-picker-trigger,
.user-shell .exercise-field textarea,
.user-shell .exercise-field input,
.user-shell .exercise-field select,
.user-shell .lesson-ws-text,
.user-shell .q-field textarea,
.user-shell .q-field input[type="text"],
.user-shell .q-problem-panel .q-text,
.user-shell .q-input-panel textarea.q-text,
.user-shell .q-option-row input[type="text"],
.user-shell .opt-content input[type="text"],
.user-shell .config-block select,
.user-shell .config-block textarea {
  background: #ffffff !important;
  border-color: rgba(47, 107, 255, 0.22) !important;
  box-shadow: var(--edu-input-elev-shadow);
}

.user-shell input:focus,
.user-shell select:focus,
.user-shell textarea:focus,
.user-shell .model-picker-trigger:focus,
.user-shell .model-picker-trigger:focus-visible,
.user-shell .q-field textarea:focus,
.user-shell .q-field input[type="text"]:focus,
.user-shell .q-problem-panel .q-text:focus,
.user-shell .lesson-ws-text:focus {
  border-color: rgba(255, 122, 61, 0.55) !important;
  box-shadow:
    0 0 0 3px var(--focus-ring),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 0 rgba(222, 233, 248, 0.98),
    0 3px 8px rgba(47, 107, 255, 0.1),
    0 10px 24px rgba(15, 41, 66, 0.09) !important;
  outline: none;
}

html[data-theme="dark"] .user-shell input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .user-shell select,
html[data-theme="dark"] .user-shell textarea,
html[data-theme="dark"] .user-shell .model-picker-trigger {
  background: rgba(15, 26, 46, 0.85) !important;
  color: var(--text);
  border-color: rgba(147, 197, 253, 0.22) !important;
}

html[data-theme="dark"] .user-shell .btn-ghost,
html[data-theme="dark"] .user-shell:not(.overview-home) .btn-secondary,
html[data-theme="dark"] .user-shell .rail-cancel-btn,
html[data-theme="dark"] .user-shell .rail-share-btn,
html[data-theme="dark"] .user-shell .rail-narration-btn,
html[data-theme="dark"] .user-shell .billing-quick-btn,
html[data-theme="dark"] .user-shell .billing-history-btn,
html[data-theme="dark"] .user-shell .account-btn-ghost,
html[data-theme="dark"] .user-shell .opt-delete,
html[data-theme="dark"] .user-shell .opt-move-up,
html[data-theme="dark"] .user-shell .opt-move-down,
html[data-theme="dark"] .user-shell .q-add-opt,
html[data-theme="dark"] .user-shell .q-add-match,
html[data-theme="dark"] .user-shell .q-add-order,
html[data-theme="dark"] .user-shell .q-add-classify,
html[data-theme="dark"] .user-shell .match-delete,
html[data-theme="dark"] .user-shell .folder-tab,
html[data-theme="dark"] .user-shell .tabs button:not(.is-active),
html[data-theme="dark"] .quiz-create-page .btn-ghost,
html[data-theme="dark"] .lesson-create-page .btn-ghost,
html[data-theme="dark"] .exercise-create-page .btn-ghost,
html[data-theme="dark"] .lesson-plan-create-page .btn-ghost,
html[data-theme="dark"] .quiz-create-page .config-rail .rail-narration-btn,
html[data-theme="dark"] .quiz-create-page .config-rail .rail-cancel-btn,
html[data-theme="dark"] .quiz-create-page .config-rail .rail-share-btn,
html[data-theme="dark"] .lesson-create-page .config-rail .rail-narration-btn,
html[data-theme="dark"] .lesson-create-page .config-rail .rail-cancel-btn,
html[data-theme="dark"] .lesson-create-page .config-rail .rail-share-btn,
html[data-theme="dark"] .exercise-create-page .config-rail .rail-narration-btn,
html[data-theme="dark"] .exercise-create-page .config-rail .rail-cancel-btn,
html[data-theme="dark"] .exercise-create-page .config-rail .rail-share-btn,
html[data-theme="dark"] .lesson-plan-create-page .config-rail .rail-narration-btn,
html[data-theme="dark"] .lesson-plan-create-page .config-rail .rail-cancel-btn,
html[data-theme="dark"] .lesson-plan-create-page .config-rail .rail-share-btn,
html[data-theme="dark"] .curriculum-create-page .curr-btn:not(.curr-btn--primary):not(.curr-btn--danger),
html[data-theme="dark"] .curriculum-create-page .curr-btn--ghost {
  color: #f0f6ff !important;
  -webkit-text-fill-color: #f0f6ff !important;
  background: linear-gradient(180deg, rgba(42, 62, 98, 0.95), rgba(22, 36, 60, 0.98)) !important;
  border: 1px solid rgba(147, 197, 253, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .user-shell .btn-ghost:hover:not(:disabled),
html[data-theme="dark"] .user-shell:not(.overview-home) .btn-secondary:hover:not(:disabled),
html[data-theme="dark"] .user-shell .rail-narration-btn:hover:not(:disabled),
html[data-theme="dark"] .user-shell .rail-cancel-btn:hover:not(:disabled),
html[data-theme="dark"] .user-shell .rail-share-btn:hover:not(:disabled),
html[data-theme="dark"] .quiz-create-page .config-rail .rail-narration-btn:hover:not(:disabled),
html[data-theme="dark"] .lesson-create-page .config-rail .rail-narration-btn:hover:not(:disabled),
html[data-theme="dark"] .exercise-create-page .config-rail .rail-narration-btn:hover:not(:disabled),
html[data-theme="dark"] .lesson-plan-create-page .config-rail .rail-narration-btn:hover:not(:disabled),
html[data-theme="dark"] .curriculum-create-page .curr-btn--ghost:hover:not(:disabled) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(255, 154, 92, 0.65) !important;
  background: linear-gradient(180deg, rgba(55, 78, 120, 0.98), rgba(30, 48, 78, 1)) !important;
}

html[data-theme="dark"] .user-shell .btn-ghost:disabled,
html[data-theme="dark"] .user-shell .rail-narration-btn:disabled,
html[data-theme="dark"] .user-shell .rail-narration-btn.is-disabled,
html[data-theme="dark"] .quiz-create-page .config-rail .rail-narration-btn:disabled,
html[data-theme="dark"] .quiz-create-page .config-rail .rail-narration-btn.is-disabled,
html[data-theme="dark"] .lesson-create-page .config-rail .rail-narration-btn:disabled,
html[data-theme="dark"] .lesson-create-page .config-rail .rail-narration-btn.is-disabled {
  color: #9eb0cc !important;
  -webkit-text-fill-color: #9eb0cc !important;
  background: rgba(20, 34, 58, 0.75) !important;
  border-color: rgba(147, 197, 253, 0.22) !important;
  opacity: 0.85 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .user-shell .btn-primary,
html[data-theme="dark"] .user-shell .rail-btn-primary,
html[data-theme="dark"] .user-shell .btn-open,
html[data-theme="dark"] .user-shell .account-btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="dark"] .user-shell .page-btn,
html[data-theme="dark"] .user-shell .page-num:not(.is-active),
html[data-theme="dark"] .user-shell .action-btn,
html[data-theme="dark"] .user-shell .all-btn,
html[data-theme="dark"] .user-shell .lesson-detail-close,
html[data-theme="dark"] .user-shell .lesson-tag-edit-btn {
  background: linear-gradient(180deg, rgba(42, 62, 98, 0.95), rgba(22, 36, 60, 0.98)) !important;
  border-color: rgba(147, 197, 253, 0.42) !important;
  color: #f0f6ff !important;
  -webkit-text-fill-color: #f0f6ff !important;
}

html[data-theme="dark"] .quiz-create-page .config-rail .btn-open.is-disabled,
html[data-theme="dark"] .quiz-create-page .config-rail .btn-open:disabled,
html[data-theme="dark"] .lesson-create-page .config-rail .btn-open.is-disabled,
html[data-theme="dark"] .lesson-create-page .config-rail .btn-open:disabled {
  background: rgba(20, 34, 58, 0.75) !important;
  color: #9eb0cc !important;
  -webkit-text-fill-color: #9eb0cc !important;
  box-shadow: none !important;
}

@media (prefers-reduced-transparency: reduce) {
  .user-shell .library-card,
  .user-shell .rail-card,
  .user-shell .hero-card,
  .user-shell .stat-card,
  .user-shell .config-rail,
  .user-shell .quiz-workspace,
  .quiz-create-page .config-rail,
  .lesson-create-page .config-rail,
  .exercise-create-page .config-rail,
  .lesson-plan-create-page .config-rail {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #fff !important;
  }
  html[data-theme="dark"] .user-shell .config-rail,
  html[data-theme="dark"] .user-shell .quiz-workspace,
  html[data-theme="dark"] .user-shell .library-card,
  html[data-theme="dark"] .quiz-create-page .quiz-workspace,
  html[data-theme="dark"] .quiz-create-page .config-rail,
  html[data-theme="dark"] .lesson-create-page .quiz-workspace,
  html[data-theme="dark"] .lesson-create-page .config-rail,
  html[data-theme="dark"] .exercise-create-page .config-rail,
  html[data-theme="dark"] .lesson-plan-create-page .config-rail {
    background: #141f33 !important;
  }
}

/* Kill white glass shell on create workspaces in dark mode
   (beats .quiz-create-page .quiz-workspace { --glass-strong } which stayed white) */
html[data-theme="dark"] .user-shell .quiz-workspace,
html[data-theme="dark"] .user-shell .config-rail,
html[data-theme="dark"] .quiz-create-page .quiz-workspace,
html[data-theme="dark"] .lesson-create-page .quiz-workspace,
html[data-theme="dark"] .exercise-create-page .exercise-form,
html[data-theme="dark"] .exercise-create-page .exercise-form-card,
html[data-theme="dark"] .lesson-plan-create-page .exercise-form,
html[data-theme="dark"] .quiz-create-page .config-rail,
html[data-theme="dark"] .lesson-create-page .config-rail,
html[data-theme="dark"] .exercise-create-page .config-rail,
html[data-theme="dark"] .lesson-plan-create-page .config-rail,
html[data-theme="dark"] .user-shell .lesson-ws-zone,
html[data-theme="dark"] .user-shell .qc-card,
html[data-theme="dark"] .user-shell .input-panel {
  background: rgba(20, 34, 58, 0.9) !important;
  border-color: rgba(147, 197, 253, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.28) !important;
  color: #e8eef8 !important;
}

html[data-theme="dark"] .quiz-create-page .quiz-workspace-toolbar,
html[data-theme="dark"] .user-shell .quiz-workspace-toolbar {
  background: rgba(12, 22, 40, 0.72) !important;
  border-bottom-color: rgba(147, 197, 253, 0.16) !important;
}

html[data-theme="dark"] .quiz-create-page .score-strip-title,
html[data-theme="dark"] .quiz-create-page .score-mode-label.is-active {
  color: #e8f0ff !important;
}

html[data-theme="dark"] .quiz-create-page .score-mode-label {
  color: #9eb0cc !important;
}


/* Dark contrast for glass content labels */
html[data-theme="dark"] .user-shell .lead,
html[data-theme="dark"] .user-shell .muted,
html[data-theme="dark"] .user-shell .hint,
html[data-theme="dark"] .user-shell label,
html[data-theme="dark"] .user-shell .config-block > span,
html[data-theme="dark"] .user-shell .quiz-rail-step-body > span:last-child {
  color: #b7c7de !important;
}

html[data-theme="dark"] .user-shell h1,
html[data-theme="dark"] .user-shell h2,
html[data-theme="dark"] .user-shell h3,
html[data-theme="dark"] .user-shell .quiz-workspace-title,
html[data-theme="dark"] .user-shell .config-rail h2,
html[data-theme="dark"] .user-shell .page-title {
  color: #f0f6ff !important;
}

html[data-theme="dark"] .user-shell .config-rail,
html[data-theme="dark"] .user-shell .quiz-workspace,
html[data-theme="dark"] .user-shell .library-card,
html[data-theme="dark"] .user-shell .qc-card {
  color: #e8eef8;
}

/* ============================================================================
   Dark mode — feature pages: surfaces, buttons, inputs, labels
   Fixes white islands + light text-on-white / dark-on-dark contrast bugs
   ============================================================================ */

html[data-theme="dark"] .user-shell .rail-actions button:not(.rail-btn-primary):not(.btn-open):not([class*="primary"]),
html[data-theme="dark"] .user-shell .rail-upload-stack > button,
html[data-theme="dark"] .user-shell #btn-upload-word,
html[data-theme="dark"] .quiz-create-page .rail-actions button:not(.rail-btn-primary):not(.btn-open),
html[data-theme="dark"] .lesson-create-page .rail-actions button:not(.rail-btn-primary):not(.btn-open),
html[data-theme="dark"] .exercise-create-page .rail-actions button:not(.rail-btn-primary):not(.btn-open),
html[data-theme="dark"] .lesson-plan-create-page .rail-actions button:not(.rail-btn-primary):not(.btn-open) {
  background: linear-gradient(180deg, rgba(42, 62, 98, 0.95), rgba(22, 36, 60, 0.98)) !important;
  border-color: rgba(147, 197, 253, 0.42) !important;
  color: #f0f6ff !important;
  -webkit-text-fill-color: #f0f6ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .user-shell .rail-actions button:not(.rail-btn-primary):not(.btn-open):hover:not(:disabled),
html[data-theme="dark"] .user-shell .rail-upload-stack > button:hover:not(:disabled),
html[data-theme="dark"] .user-shell #btn-upload-word:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(55, 78, 120, 0.98), rgba(30, 48, 78, 1)) !important;
  border-color: rgba(255, 154, 92, 0.65) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="dark"] .user-shell .btn-open.is-disabled,
html[data-theme="dark"] .user-shell .btn-open:disabled,
html[data-theme="dark"] .quiz-create-page .config-rail .btn-open.is-disabled,
html[data-theme="dark"] .quiz-create-page .config-rail .btn-open:disabled,
html[data-theme="dark"] .lesson-create-page .config-rail .btn-open.is-disabled,
html[data-theme="dark"] .lesson-create-page .config-rail .btn-open:disabled,
html[data-theme="dark"] .exercise-create-page .config-rail .btn-open.is-disabled,
html[data-theme="dark"] .exercise-create-page .config-rail .btn-open:disabled,
html[data-theme="dark"] .lesson-plan-create-page .config-rail .btn-open.is-disabled,
html[data-theme="dark"] .lesson-plan-create-page .config-rail .btn-open:disabled {
  background: rgba(26, 40, 64, 0.92) !important;
  border-color: rgba(147, 197, 253, 0.28) !important;
  color: #c5d4ea !important;
  -webkit-text-fill-color: #c5d4ea !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .user-shell .rail-btn-primary,
html[data-theme="dark"] .user-shell .rail-actions button.rail-btn-primary,
html[data-theme="dark"] .user-shell .btn-open:not(:disabled):not(.is-disabled),
html[data-theme="dark"] .user-shell .btn-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Cards / rows that stay #fff in page CSS */
html[data-theme="dark"] .user-shell .q-option-row,
html[data-theme="dark"] .user-shell .q-match-row,
html[data-theme="dark"] .user-shell .q-match-row-media,
html[data-theme="dark"] .user-shell .q-card-head,
html[data-theme="dark"] .user-shell .q-card,
html[data-theme="dark"] .user-shell .q-problem-panel,
html[data-theme="dark"] .user-shell .q-input-panel,
html[data-theme="dark"] .user-shell .q-interaction-controls,
html[data-theme="dark"] .user-shell .q-interaction-panel-side,
html[data-theme="dark"] .user-shell .question-card,
html[data-theme="dark"] .user-shell .qc-card,
html[data-theme="dark"] .user-shell .q-illus-panel,
html[data-theme="dark"] .user-shell .q-illus-frame,
html[data-theme="dark"] .user-shell .progress-card,
html[data-theme="dark"] .user-shell .style-chip,
html[data-theme="dark"] .user-shell .folder-tab:not(.is-active),
html[data-theme="dark"] .user-shell .opt-attach-preview,
html[data-theme="dark"] .user-shell .opt-attach-preview--audio,
html[data-theme="dark"] .user-shell .lesson-ws-zone,
html[data-theme="dark"] .user-shell .exercise-form-card,
html[data-theme="dark"] .user-shell .lesson-segment,
html[data-theme="dark"] .user-shell .exercise-type-switch,
html[data-theme="dark"] .user-shell .exercise-diff-block,
html[data-theme="dark"] .user-shell .exercise-mcq-block,
html[data-theme="dark"] .user-shell .exercise-mcq-row,
html[data-theme="dark"] .user-shell .curr-frame,
html[data-theme="dark"] .user-shell .curr-slide-thumb,
html[data-theme="dark"] .user-shell .curr-feat-card,
html[data-theme="dark"] .user-shell .quiz-folder-body {
  background: rgba(20, 34, 58, 0.92) !important;
  border-color: rgba(147, 197, 253, 0.22) !important;
  color: #e8eef8 !important;
}

html[data-theme="dark"] .user-shell .q-option-row .opt-correct,
html[data-theme="dark"] .user-shell .q-field label,
html[data-theme="dark"] .user-shell .q-illus-alt-label,
html[data-theme="dark"] .user-shell .q-card-title,
html[data-theme="dark"] .user-shell .q-head-points,
html[data-theme="dark"] .user-shell .rail-sample-link,
html[data-theme="dark"] .user-shell .rail-step-ready-label,
html[data-theme="dark"] .user-shell .quiz-workspace-title,
html[data-theme="dark"] .user-shell .empty-state h2,
html[data-theme="dark"] .user-shell .empty-state p,
html[data-theme="dark"] .user-shell .empty-state span,
html[data-theme="dark"] .user-shell .pagination-info,
html[data-theme="dark"] .user-shell .pagination-info span {
  color: #c5d4ea !important;
}

html[data-theme="dark"] .user-shell .q-option-label {
  color: #7eb4ff !important;
}

html[data-theme="dark"] .user-shell .rail-sample-link:hover {
  color: #ffb088 !important;
}

/* Inputs + placeholders */
html[data-theme="dark"] .user-shell input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .user-shell select,
html[data-theme="dark"] .user-shell textarea,
html[data-theme="dark"] .user-shell .q-field textarea,
html[data-theme="dark"] .user-shell .q-field input[type="text"],
html[data-theme="dark"] .user-shell .q-option-row input[type="text"],
html[data-theme="dark"] .user-shell .opt-content input[type="text"],
html[data-theme="dark"] .user-shell .q-illus-alt,
html[data-theme="dark"] .user-shell .lesson-ws-text,
html[data-theme="dark"] .user-shell .model-picker-trigger {
  background: rgba(10, 18, 34, 0.92) !important;
  border-color: rgba(147, 197, 253, 0.28) !important;
  color: #f0f6ff !important;
  -webkit-text-fill-color: #f0f6ff !important;
  caret-color: #f0f6ff;
}

html[data-theme="dark"] .user-shell input::placeholder,
html[data-theme="dark"] .user-shell textarea::placeholder,
html[data-theme="dark"] .user-shell .q-field textarea::placeholder,
html[data-theme="dark"] .user-shell .q-field input::placeholder,
html[data-theme="dark"] .user-shell .q-option-row input::placeholder,
html[data-theme="dark"] .user-shell .opt-content input::placeholder,
html[data-theme="dark"] .user-shell .q-illus-alt::placeholder,
html[data-theme="dark"] .user-shell .lesson-ws-text::placeholder {
  color: #8fa3c0 !important;
  -webkit-text-fill-color: #8fa3c0 !important;
  opacity: 1 !important;
}

/* Attach / secondary controls inside light-turned-dark rows */
html[data-theme="dark"] .user-shell .btn-opt-attach,
html[data-theme="dark"] .user-shell .btn-opt-image,
html[data-theme="dark"] .user-shell .btn-opt-attach--answer,
html[data-theme="dark"] .user-shell .opt-attach-edit,
html[data-theme="dark"] .user-shell .q-card-actions button,
html[data-theme="dark"] .user-shell .style-chip:not(.is-selected),
html[data-theme="dark"] .user-shell .btn-upload-interaction {
  background: linear-gradient(180deg, rgba(42, 62, 98, 0.95), rgba(22, 36, 60, 0.98)) !important;
  border-color: rgba(147, 197, 253, 0.42) !important;
  color: #f0f6ff !important;
  -webkit-text-fill-color: #f0f6ff !important;
}

html[data-theme="dark"] .user-shell .q-badge.ok {
  background: rgba(22, 163, 74, 0.22) !important;
  color: #86efac !important;
}

html[data-theme="dark"] .user-shell .q-badge.warn {
  background: rgba(217, 119, 6, 0.22) !important;
  color: #fcd34d !important;
}

html[data-theme="dark"] .user-shell .q-badge.bad {
  background: rgba(239, 68, 68, 0.22) !important;
  color: #fca5a5 !important;
}

html[data-theme="dark"] .user-shell .quiz-rail-step:hover {
  background: rgba(91, 157, 255, 0.12) !important;
}

html[data-theme="dark"] .user-shell .quiz-rail-step.is-active {
  background: rgba(91, 157, 255, 0.16) !important;
}

html[data-theme="dark"] .user-shell .q-illus-placeholder {
  background: rgba(10, 18, 34, 0.85) !important;
  color: #9eb0cc !important;
  border-color: rgba(147, 197, 253, 0.22) !important;
}

html[data-theme="dark"] .user-shell .model-picker-menu,
html[data-theme="dark"] .user-shell .account-panel-card,
html[data-theme="dark"] .user-shell .qc-modal-card,
html[data-theme="dark"] .user-shell .lesson-detail-panel {
  background: #141f33 !important;
  border-color: #2a3f5f !important;
  color: #e8eef8 !important;
}

html[data-theme="dark"] .user-shell .account-panel-head,
html[data-theme="dark"] .user-shell .quiz-workspace-toolbar,
html[data-theme="dark"] .user-shell .q-card-head {
  background: rgba(15, 26, 46, 0.92) !important;
  border-color: rgba(147, 197, 253, 0.16) !important;
  color: #e8eef8 !important;
}

/* Library / kho bài white surfaces */
html[data-theme="dark"] .user-shell .library-card,
html[data-theme="dark"] .user-shell .lesson-list-container,
html[data-theme="dark"] .user-shell .lesson-list-row,
html[data-theme="dark"] .user-shell .lesson-tag-popover,
html[data-theme="dark"] .user-shell .balance-side-card,
html[data-theme="dark"] .user-shell .stat-card {
  background: rgba(20, 34, 58, 0.94) !important;
  border-color: rgba(147, 197, 253, 0.22) !important;
  color: #e8eef8 !important;
}

html[data-theme="dark"] .user-shell .lesson-list-header {
  background: rgba(15, 26, 46, 0.95) !important;
  color: #c5d4ea !important;
  border-color: rgba(147, 197, 253, 0.16) !important;
}

html[data-theme="dark"] .user-shell .section-head h2,
html[data-theme="dark"] .user-shell .lesson-list-row,
html[data-theme="dark"] .user-shell .lesson-list-row a,
html[data-theme="dark"] .user-shell .col-title {
  color: #e8f0ff !important;
}

html[data-theme="dark"] .user-shell .lesson-list-row:hover {
  background: rgba(42, 62, 98, 0.55) !important;
}

html[data-theme="dark"] .user-shell .tabs button:not(.is-active) {
  background: rgba(20, 34, 58, 0.92) !important;
  color: #e8eef8 !important;
  border-color: rgba(147, 197, 253, 0.35) !important;
}

html[data-theme="dark"] .user-shell .create-btn {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* —— Feature pages: OCR / upload / segment / score (root-cause classes) —— */
html[data-theme="dark"] .user-shell .btn-image-ocr,
html[data-theme="dark"] .user-shell .btn-illus-upload,
html[data-theme="dark"] .user-shell .btn-q-attach,
html[data-theme="dark"] .user-shell .btn-opt-attach,
html[data-theme="dark"] .user-shell .btn-opt-image,
html[data-theme="dark"] .user-shell .btn-opt-attach--answer,
html[data-theme="dark"] .user-shell .btn-upload-interaction,
html[data-theme="dark"] .user-shell .q-card-actions button,
html[data-theme="dark"] .user-shell .q-delete,
html[data-theme="dark"] .user-shell .exercise-seg-btn:not(.is-active),
html[data-theme="dark"] .user-shell .score-mode-btn:not(.is-active) {
  background: linear-gradient(180deg, rgba(52, 74, 112, 0.98), rgba(28, 44, 72, 1)) !important;
  border: 1px solid rgba(147, 197, 253, 0.48) !important;
  color: #f0f6ff !important;
  -webkit-text-fill-color: #f0f6ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="dark"] .user-shell .btn-image-ocr:hover,
html[data-theme="dark"] .user-shell .btn-illus-upload:hover,
html[data-theme="dark"] .user-shell .btn-opt-attach:hover,
html[data-theme="dark"] .user-shell .exercise-seg-btn:not(.is-active):hover {
  background: linear-gradient(180deg, rgba(64, 90, 132, 1), rgba(36, 56, 90, 1)) !important;
  border-color: rgba(255, 154, 92, 0.6) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="dark"] .user-shell .exercise-seg-btn.is-active {
  background: linear-gradient(135deg, #2f6bff 0%, #3d7aff 55%, #ff7a3d 130%) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="dark"] .user-shell .q-delete,
html[data-theme="dark"] .user-shell .q-card-actions button.q-delete {
  border-color: rgba(248, 113, 113, 0.55) !important;
  color: #fecaca !important;
  -webkit-text-fill-color: #fecaca !important;
  background: rgba(127, 29, 29, 0.35) !important;
}

html[data-theme="dark"] .user-shell .lesson-segment {
  background: rgba(10, 18, 34, 0.85) !important;
  border-color: rgba(147, 197, 253, 0.28) !important;
}

html[data-theme="dark"] .user-shell .lesson-segment-opt {
  color: #b7c7de !important;
}

html[data-theme="dark"] .user-shell .lesson-segment-opt:has(input:checked) {
  background: rgba(91, 157, 255, 0.32) !important;
  color: #dbeafe !important;
}

html[data-theme="dark"] .user-shell .lesson-segment-opt--yes:has(input:checked) {
  background: rgba(34, 197, 94, 0.28) !important;
  color: #86efac !important;
}

html[data-theme="dark"] .user-shell .lesson-segment-opt--no:has(input:checked) {
  background: rgba(148, 163, 184, 0.28) !important;
  color: #e2e8f0 !important;
}

html[data-theme="dark"] .user-shell .quiz-workspace-toolbar,
html[data-theme="dark"] .quiz-create-page .quiz-workspace-toolbar {
  background: rgba(15, 26, 46, 0.88) !important;
  border-bottom-color: rgba(147, 197, 253, 0.18) !important;
}

html[data-theme="dark"] .user-shell .score-strip-title,
html[data-theme="dark"] .user-shell .score-mode-label.is-active {
  color: #e8f0ff !important;
}

html[data-theme="dark"] .user-shell .score-mode-label {
  color: #9eb0cc !important;
}

html[data-theme="dark"] .user-shell .score-mode-switch-ui {
  background: #334155 !important;
  border-color: #475569 !important;
}

html[data-theme="dark"] .user-shell .score-mode-switch-ui::after {
  background: #e2e8f0 !important;
}

html[data-theme="dark"] .user-shell .score-mode-switch input:checked + .score-mode-switch-ui {
  background: var(--blue, #5b9dff) !important;
  border-color: var(--blue, #5b9dff) !important;
}

html[data-theme="dark"] .user-shell .q-problem-panel .q-text,
html[data-theme="dark"] .user-shell .q-problem-panel textarea,
html[data-theme="dark"] .user-shell .q-field textarea {
  border-color: rgba(147, 197, 253, 0.28) !important;
  background: rgba(8, 14, 28, 0.95) !important;
  color: #f0f6ff !important;
}

html[data-theme="dark"] .user-shell .folder-tab.is-active {
  background: rgba(42, 62, 98, 0.95) !important;
  color: #f0f6ff !important;
  border-color: rgba(147, 197, 253, 0.4) !important;
}

html[data-theme="dark"] .user-shell .q-answer-type-row > label,
html[data-theme="dark"] .user-shell .lesson-setting-label,
html[data-theme="dark"] .user-shell .exercise-mcq-hint,
html[data-theme="dark"] .user-shell .exercise-form-head p {
  color: #b7c7de !important;
}