/* MathFilm Studio Pro — educational calm studio
   Scope: home, billing, create game, create lesson.
   Soft radii, friendly trust-blue, light create rail (not candy / not brick). */

:root {
  --blue: #2f6bff;
  --blue-2: #5b8cff;
  --blue-light: #7aa4ff;
  --blue-soft: #e8f1ff;
  --blue-ink: #16325c;
  --orange: #ff7a3d;
  --orange-2: #ff9a5c;
  --orange-soft: #ffe4d4;
  --blue-gradient: linear-gradient(165deg, #5b8cff 0%, #2f6bff 48%, #ff7a3d 120%);
  --blue-gradient-soft: linear-gradient(155deg, #7aa4ff 0%, #3d7aff 48%, #2f6bff 100%);
  --blue-gradient-banner: linear-gradient(90deg, #1e3a5f 0%, #2f6bff 48%, #ff7a3d 100%);
  --blue-gradient-btn: linear-gradient(135deg, #2f6bff 0%, #3d7aff 48%, #ff7a3d 100%);
  --navy: #0f2942;
  --navy-mid: #1a3a5c;
  --text: #1a2b42;
  --muted: #5a7194;
  --line: #d0dced;
  --line-soft: #e8f1ff;
  --bg: #ffffff;
  --panel: rgba(255, 255, 255, 0.55);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 10px 28px rgba(15, 41, 66, 0.08);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 14px 36px rgba(15, 41, 66, 0.12);
  --card-radius: 14px;
  --card-radius-sm: 10px;
  --button-radius: 12px;
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-display: "Outfit", "Manrope", "Segoe UI", system-ui, sans-serif;
  --teal: #0d9488;
  --teal-dark: #0f766e;
  --teal-soft: #ecfdf8;
  --line-accent: #c7dbf8;
  --line-hover: #5b8cff;
  --border-strong: #2f6bff;
  --edu-rail-bg: rgba(255, 255, 255, 0.34);
  --edu-rail-border: rgba(47, 107, 255, 0.14);
  --edu-zone-bg: rgba(255, 255, 255, 0.32);
  --edu-zone-focus: #fff8f3;
  --edu-surface: #ffffff;
  --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-feature-border: rgba(47, 107, 255, 0.14);
  --edu-feature-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 10px 28px rgba(15, 41, 66, 0.06);
  --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);
}

html, body {
  font-family: var(--font-body);
  background: var(--edu-surface, #d4e4f8);
  color: var(--text);
  letter-spacing: -0.01em;
}

.quiz-create-page,
.lesson-create-page,
.exercise-create-page,
.lesson-plan-create-page {
  background: transparent !important;
}

@media (prefers-reduced-transparency: reduce) {
  .quiz-create-page .config-rail,
  .lesson-create-page .config-rail,
  .exercise-create-page .config-rail,
  .lesson-plan-create-page .config-rail,
  .quiz-workspace {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #fff !important;
  }

  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-workspace {
    background: #141f33 !important;
  }
}

.quiz-create-page .artboard-wrap,
.lesson-create-page .artboard-wrap,
.exercise-create-page .artboard-wrap,
.lesson-plan-create-page .artboard-wrap,
.quiz-create-page .artboard,
.lesson-create-page .artboard,
.exercise-create-page .artboard,
.lesson-plan-create-page .artboard,
.quiz-create-page .layout,
.lesson-create-page .layout,
.exercise-create-page .layout,
.lesson-plan-create-page .layout {
  position: relative;
  z-index: 1;
  background: transparent;
}

.user-shell .artboard-wrap,
.artboard-wrap {
  background: transparent !important;
}

.quiz-create-page .viewport,
.lesson-create-page .viewport,
.exercise-create-page .viewport,
.lesson-plan-create-page .viewport {
  overflow: hidden !important;
  height: 100vh;
  height: 100dvh;
}

/* Shorter canvas — leave blue gutter below workspace frames */
.quiz-create-page {
  --artboard-h: 920px;
}

.quiz-create-page .quiz-create-main {
  min-height: calc(var(--artboard-h) - 140px);
  height: calc(var(--artboard-h) - 140px);
}

/* —— Shell chrome —— */
.user-shell .topbar,
body.shell-topbar-pinned > .topbar,
body.user-shell > .topbar {
  background: #fff !important;
  border-bottom: 1px solid #e8edf3 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.user-shell .brand,
.brand {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 600;
}

.user-shell .brand strong,
.brand strong {
  font-weight: 700;
}

.user-shell .brand-mark,
.brand-mark {
  border-radius: 7px;
  background: var(--blue-gradient);
  box-shadow: 0 4px 12px rgba(47, 107, 255, 0.22), 0 2px 8px rgba(255, 122, 61, 0.12);
  font-weight: 700;
}

.user-shell .menu > a,
.user-shell .menu .nav-drop-trigger {
  font-weight: 500;
  letter-spacing: -0.015em;
  border-bottom-width: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.user-shell .account,
.account {
  border-radius: 6px;
  border-color: #d8e4f2;
  box-shadow: none;
  background: #fff;
}

.user-shell .avatar,
.avatar {
  border-radius: 6px;
  box-shadow: none;
  background: var(--blue);
  font-weight: 700;
}

.user-shell .shell-budget {
  border-radius: 6px;
  border-color: #e2e8f0;
  background: #fff;
  color: var(--navy);
  box-shadow: none;
  font-weight: 600;
}

.user-shell .shell-budget:hover {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue);
}

.user-shell .shell-budget svg {
  color: var(--blue);
}

.user-shell .account-menu {
  border-radius: var(--radius-md);
  border-color: #d8e4f2;
  box-shadow: var(--shadow-2);
}

.user-shell .account-menu-item {
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.user-shell .account-menu-item:hover {
  background: var(--blue-soft);
}

.user-shell .nav-drop-menu {
  border-radius: var(--radius-md) !important;
  border-color: #d8e4f2 !important;
  box-shadow: var(--shadow-2) !important;
}

.user-shell .nav-drop-item {
  border-radius: var(--radius-sm) !important;
}

/* —— Home: dashboard strip —— */
.main {
  background: transparent !important;
}

.main-row-top {
  border-radius: var(--radius-lg) !important;
  background: var(--blue-gradient-soft) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 14px 30px rgba(37, 99, 235, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Soften playful deco without removing markup / motion */
.dashboard-bg .deco-cloud,
.dashboard-bg .deco-star {
  opacity: 0.12 !important;
  filter: none !important;
}

.dashboard-bg .deco-star {
  color: rgba(255, 255, 255, 0.45) !important;
}

.dashboard-bg .deco-tool,
.dashboard-bg .deco-geometry {
  opacity: 0.1 !important;
}

.hero-card {
  border-radius: var(--radius-md) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 10px 28px rgba(15, 41, 66, 0.1) !important;
}

.hero-title {
  letter-spacing: -0.03em !important;
  font-weight: 700 !important;
}

.hero-badge {
  border-radius: var(--radius-sm) !important;
}

.hero-badge .badge-icon {
  border-radius: var(--radius-xs) !important;
}

.stat-card {
  border-radius: var(--radius-md) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset, 0 8px 20px rgba(15, 41, 66, 0.08) !important;
  border-width: 1px !important;
  background: rgba(255, 255, 255, 0.52) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.stat-card .icon {
  border-radius: var(--radius-sm) !important;
}

.stat-progress-bar,
.stat-progress-bar .bar-fill,
.stat-bar-chart span {
  border-radius: 1px !important;
}

/* Unify colorful stat accents toward blue family (still readable) */
.stat-pink { color: #1d4ed8 !important; }
.stat-green { color: #0f766e !important; }
.stat-purple { color: #1e40af !important; }
.stat-card.stat-pink .icon { background: #eff6ff !important; color: #1d4ed8 !important; }
.stat-card.stat-green .icon { background: #f0fdfa !important; color: #0f766e !important; }
.stat-card.stat-purple .icon { background: #eff6ff !important; color: #1e40af !important; }
.stat-card.stat-pink { border-color: rgba(29, 78, 216, 0.35) !important; }
.stat-card.stat-green { border-color: rgba(15, 118, 110, 0.35) !important; }
.stat-card.stat-purple { border-color: rgba(30, 64, 175, 0.35) !important; }

.library-card,
.rail-card {
  border-radius: var(--radius-lg) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: var(--shadow) !important;
  background: rgba(255, 255, 255, 0.52) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.overview-stat,
.balance-side-card {
  border-radius: var(--radius-md) !important;
  background: var(--blue-gradient) !important;
  box-shadow: 0 8px 20px rgba(15, 41, 66, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.overview-stat-icon,
.balance-side-icon {
  border-radius: var(--radius-sm) !important;
}

.overview-stat strong,
.balance-side-value {
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
}

.overview-stat--total strong {
  color: #fff !important;
  text-shadow: none !important;
}

.overview-stat--fav strong {
  color: #bfdbfe !important;
  text-shadow: none !important;
}

.overview-stat--month strong {
  color: #e2e8f0 !important;
  text-shadow: none !important;
}

.mascot-deco-card {
  border-radius: var(--radius-md) !important;
  border-color: #d8e4f4 !important;
  box-shadow: var(--shadow) !important;
}

.tabs button,
.library-toolbar .tabs button {
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
}

.library-view-toggle {
  border-radius: var(--radius-sm) !important;
}

.library-view-toggle button {
  border-radius: calc(var(--radius-sm) - 1px) !important;
}

.tabs button.is-active {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  box-shadow: none !important;
}

.lesson-list-container,
.lesson-detail-card,
.chat-box,
.progress-card {
  border-radius: var(--radius-md) !important;
}

.lesson-list-row {
  border-radius: 0 !important;
}

button.btn-primary,
.btn-primary {
  border-radius: var(--button-radius) !important;
  background: var(--blue-gradient-btn) !important;
  background-image: var(--blue-gradient-btn) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 0 #244fc4,
    0 3px 0 #1a3c98,
    0 10px 22px rgba(47, 107, 255, 0.28),
    0 6px 14px rgba(255, 122, 61, 0.16) !important;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, transform 0.15s ease;
}

button.btn-primary:hover,
.btn-primary:hover {
  background: linear-gradient(135deg, #3a74ff 0%, #4a82ff 48%, #ff6a2a 100%) !important;
  background-image: linear-gradient(135deg, #3a74ff 0%, #4a82ff 48%, #ff6a2a 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 1px 0 #2854cc,
    0 4px 0 #1c3ea4,
    0 14px 28px rgba(47, 107, 255, 0.32),
    0 8px 18px rgba(255, 122, 61, 0.2) !important;
}

/* Create pages — rail as bordered feature panel on edu backdrop */
.quiz-create-page .config-rail,
.lesson-create-page .config-rail,
.exercise-create-page .config-rail,
.lesson-plan-create-page .config-rail {
  border-radius: var(--radius-lg) !important;
  background: var(--edu-rail-bg) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--edu-feature-shadow) !important;
  color: var(--navy) !important;
  border: 1px solid var(--edu-rail-border) !important;
}

.quiz-create-page .config-rail::before,
.lesson-create-page .config-rail::before,
.exercise-create-page .config-rail::before,
.lesson-plan-create-page .config-rail::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.5) 0%, transparent 42%),
    linear-gradient(90deg, rgba(47, 107, 255, 0.08), transparent 45%),
    linear-gradient(225deg, rgba(255, 122, 61, 0.07), transparent 40%) !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

/* System type scale (title / body / meta) */
.user-shell,
.quiz-create-page,
.lesson-create-page,
.exercise-create-page,
.lesson-plan-create-page,
.billing-page,
.curriculum-create-page,
.auth-body {
  --type-title: 24px;
  --type-body: 20px;
  --type-meta: 18px;
  --fs-body: var(--type-body);
  --fs-sm: var(--type-body);
  --fs-xs: var(--type-meta);
  --fs-nav: var(--type-body);
  font-size: var(--type-body);
}

.quiz-create-page .config-rail h2,
.lesson-create-page .config-rail h2,
.quiz-create-page .quiz-rail-head h2,
.lesson-create-page .quiz-rail-head h2,
.exercise-create-page .exercise-form-head h1,
.lesson-plan-create-page .exercise-form-head h1,
.quiz-create-page .quiz-workspace-title,
.lesson-create-page .quiz-workspace-title {
  font-size: var(--type-title) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.quiz-create-page .quiz-rail-step-body strong,
.lesson-create-page .quiz-rail-step-body strong,
.quiz-create-page .rail-step-ready-label,
.lesson-create-page .rail-step-ready-label,
.quiz-create-page .model-picker-trigger,
.lesson-create-page .model-picker-trigger,
.quiz-create-page .model-option strong,
.lesson-create-page .model-option strong,
.quiz-create-page .rail-btn-primary,
.lesson-create-page .rail-btn-primary,
.quiz-create-page .config-rail .btn-open,
.lesson-create-page .config-rail .btn-open,
.exercise-create-page .exercise-field,
.exercise-create-page .exercise-field textarea,
.exercise-create-page .exercise-field input,
.exercise-create-page .exercise-field select {
  font-size: var(--type-body) !important;
  line-height: 1.35 !important;
}

.quiz-create-page .quiz-rail-step-body > span:last-child,
.lesson-create-page .quiz-rail-step-body > span:last-child,
.quiz-create-page .model-option span,
.lesson-create-page .model-option span,
.quiz-create-page .model-picker-budget-hint,
.lesson-create-page .model-picker-budget-hint,
.exercise-create-page .exercise-form-head p,
.lesson-plan-create-page .exercise-form-head p,
.exercise-create-page .exercise-type-switch legend,
.exercise-create-page .exercise-diff-block legend,
.exercise-create-page .exercise-mcq-block legend,
.exercise-create-page .exercise-toggle legend {
  font-size: var(--type-meta) !important;
  line-height: 1.35 !important;
}

.quiz-create-page .model-picker-menu.is-floating,
.lesson-create-page .model-picker-menu.is-floating,
.exercise-create-page .model-picker-menu.is-floating,
.lesson-plan-create-page .model-picker-menu.is-floating {
  right: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.quiz-create-page .model-picker-trigger,
.lesson-create-page .model-picker-trigger {
  height: auto !important;
  min-height: 44px !important;
  max-height: none !important;
  padding: 10px 12px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid rgba(47, 107, 255, 0.22) !important;
  background: #fff !important;
  color: var(--navy) !important;
  box-shadow: var(--edu-input-elev-shadow) !important;
  font-size: var(--type-body) !important;
  white-space: normal !important;
  overflow: visible !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

html[data-theme="dark"] .quiz-create-page .model-picker-trigger,
html[data-theme="dark"] .lesson-create-page .model-picker-trigger {
  background: linear-gradient(180deg, rgba(52, 74, 112, 0.98), rgba(28, 44, 72, 1)) !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 12px rgba(0, 0, 0, 0.25) !important;
}

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

.quiz-create-page .config-rail .lead,
.lesson-create-page .config-rail .lead,
.quiz-create-page .config-block > span,
.quiz-create-page .config-block > label > span:first-child {
  color: var(--muted) !important;
}

.quiz-create-page .quiz-rail-step,
.lesson-create-page .quiz-rail-step {
  border-radius: var(--radius-md) !important;
  color: var(--navy) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background 0.2s ease, color 0.2s ease;
}

.quiz-create-page .quiz-rail-step:hover,
.lesson-create-page .quiz-rail-step:hover {
  background: rgba(37, 99, 235, 0.05) !important;
}

.quiz-create-page .quiz-rail-step.is-active:not(.is-done),
.quiz-create-page .quiz-rail-step.is-current:not(.is-done),
.lesson-create-page .quiz-rail-step.is-active:not(.is-done),
.lesson-create-page .quiz-rail-step.is-current:not(.is-done),
.lesson-create-page .rail-step-ready.is-current:not(.is-done) {
  background: rgba(37, 99, 235, 0.07) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.quiz-create-page .quiz-rail-step-num,
.lesson-create-page .quiz-rail-step-num {
  border-radius: 999px !important;
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
}

.quiz-create-page .quiz-rail-step.is-active:not(.is-done) .quiz-rail-step-num,
.quiz-create-page .quiz-rail-step.is-current:not(.is-done) .quiz-rail-step-num,
.lesson-create-page .quiz-rail-step.is-active:not(.is-done) .quiz-rail-step-num,
.lesson-create-page .quiz-rail-step.is-current:not(.is-done) .quiz-rail-step-num,
.lesson-create-page .rail-step-ready.is-current:not(.is-done) .quiz-rail-step-num {
  background: var(--blue) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.28) !important;
}

.quiz-create-page .quiz-rail-step.is-done .quiz-rail-step-num,
.lesson-create-page .quiz-rail-step.is-done .quiz-rail-step-num,
.quiz-create-page .rail-step-ready.is-done .quiz-rail-step-num,
.lesson-create-page .rail-step-ready.is-done .quiz-rail-step-num,
.quiz-create-page .quiz-rail-step.is-done.is-active .quiz-rail-step-num,
.lesson-create-page .quiz-rail-step.is-done.is-active .quiz-rail-step-num,
.quiz-create-page .quiz-rail-step.is-done.is-current .quiz-rail-step-num,
.lesson-create-page .quiz-rail-step.is-done.is-current .quiz-rail-step-num,
.quiz-create-page .rail-step-ready.is-done.is-current .quiz-rail-step-num,
.lesson-create-page .rail-step-ready.is-done.is-current .quiz-rail-step-num {
  background: #16a34a !important;
  color: #fff !important;
  box-shadow: none !important;
}

.quiz-create-page .quiz-rail-step.is-done,
.lesson-create-page .quiz-rail-step.is-done,
.quiz-create-page .rail-step-ready.is-done,
.lesson-create-page .rail-step-ready.is-done {
  border-color: transparent !important;
  background: rgba(22, 163, 74, 0.06) !important;
}

.quiz-create-page .quiz-rail-step-body strong,
.lesson-create-page .quiz-rail-step-body strong {
  color: var(--navy) !important;
}

.quiz-create-page .quiz-rail-step-body span,
.lesson-create-page .quiz-rail-step-body span {
  color: var(--muted) !important;
}

.quiz-create-page .rail-step-ready,
.lesson-create-page .quiz-stepper .rail-step-ready {
  border-radius: var(--radius-md) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--navy) !important;
  box-shadow: none !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  margin-top: 0 !important;
  font-size: inherit !important;
}

.quiz-create-page .rail-step-ready .quiz-rail-step-num,
.lesson-create-page .rail-step-ready .quiz-rail-step-num {
  width: 26px !important;
  height: 26px !important;
  flex-shrink: 0 !important;
}

.quiz-create-page .rail-step-ready-label,
.lesson-create-page .rail-step-ready-label {
  font-size: var(--type-body) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--navy) !important;
}

.quiz-create-page .rail-step-ready.is-disabled,
.lesson-create-page .quiz-stepper .rail-step-ready.is-disabled {
  opacity: 0.62;
}

.quiz-create-page .config-rail .btn-open,
.quiz-create-page .config-rail .rail-btn-primary,
.quiz-create-page .config-rail .rail-actions button.rail-btn-primary,
.quiz-create-page .config-rail .rail-actions .btn-open,
.lesson-create-page .config-rail .btn-open,
.lesson-create-page .config-rail .rail-btn-primary,
.lesson-create-page .config-rail .rail-actions button.rail-btn-primary,
.lesson-create-page .config-rail .rail-actions .btn-open {
  background: var(--blue-gradient-btn) !important;
  background-image: var(--blue-gradient-btn) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 0 #244fc4,
    0 3px 0 #1a3c98,
    0 10px 22px rgba(47, 107, 255, 0.26) !important;
  border-radius: var(--button-radius) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  font-weight: 600 !important;
}

.quiz-create-page .config-rail .btn-open:hover:not(:disabled),
.quiz-create-page .config-rail .rail-btn-primary:hover:not(:disabled),
.lesson-create-page .config-rail .btn-open:hover:not(:disabled),
.lesson-create-page .config-rail .rail-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #3a74ff 0%, #4a82ff 48%, #ff6a2a 100%) !important;
  color: #fff !important;
}

.quiz-create-page .config-rail .btn-open.is-disabled,
.quiz-create-page .config-rail .btn-open:disabled,
.lesson-create-page .config-rail .btn-open.is-disabled,
.lesson-create-page .config-rail .btn-open:disabled {
  background: #e8eef7 !important;
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  box-shadow: none !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,
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;
}

.quiz-create-page .config-rail .rail-narration-btn,
.quiz-create-page .config-rail .rail-cancel-btn,
.quiz-create-page .config-rail .rail-share-btn,
.lesson-create-page .config-rail .rail-narration-btn,
.lesson-create-page .config-rail .rail-cancel-btn,
.lesson-create-page .config-rail .rail-share-btn {
  border-radius: var(--button-radius) !important;
  border: 1px solid rgba(47, 107, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: #0f2942 !important;
  -webkit-text-fill-color: #0f2942;
  box-shadow: none !important;
}

.quiz-create-page .config-rail .rail-narration-btn:hover:not(:disabled),
.lesson-create-page .config-rail .rail-narration-btn:hover:not(:disabled) {
  border-color: #93c5fd !important;
  background: var(--blue-soft) !important;
  color: var(--blue) !important;
}

.quiz-create-page .model-picker-caret,
.lesson-create-page .model-picker-caret {
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0 !important;
  margin-top: 4px !important;
}

.quiz-create-page .model-picker-menu,
.lesson-create-page .model-picker-menu {
  border-radius: var(--radius-md) !important;
  border-color: #d5e4f7 !important;
  box-shadow: var(--shadow-2) !important;
}

.btn-ghost,
.model-picker-trigger {
  border-radius: var(--button-radius) !important;
}

input,
select,
textarea {
  border-radius: var(--radius-sm) !important;
}

/* —— Billing —— */
.billing-page {
  background: transparent;
}

.billing-head-copy h1 {
  letter-spacing: -0.04em !important;
  font-weight: 700 !important;
}

.billing-history-btn,
.billing-amount-card,
.billing-confirm-card,
.billing-orders,
.billing-plan-detail,
.billing-info-notice,
.billing-amount-input-wrap,
.qr-card,
.qr-transfer,
.qr-payment-code {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow) !important;
}

.billing-balance-card {
  border-radius: var(--radius-lg) !important;
  background: var(--blue-gradient-soft) !important;
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.billing-balance-icon {
  border-radius: var(--radius-sm) !important;
}

.billing-quick-btn {
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  background: #fff !important;
}

.billing-quick-btn.is-active {
  background: var(--blue-soft) !important;
  border-color: var(--blue) !important;
  color: var(--blue) !important;
}

.billing-topup-btn {
  border-radius: var(--button-radius) !important;
  background: var(--blue) !important;
  background-image: none !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22) !important;
  font-weight: 600 !important;
}

.billing-topup-btn:hover:not(:disabled) {
  background: #1d4ed8 !important;
}

.billing-topup-countdown {
  border-radius: var(--radius-sm) !important;
}

.qr-close,
.qr-copy-btn {
  border-radius: var(--radius-sm) !important;
}

/* —— Create workspace: soft feature shell on edu backdrop —— */
.rail-progress-card,
.quiz-workspace-col,
.question-card,
.q-card,
.q-problem-panel,
.game-brief-editor,
.config-block select,
.config-block textarea,
.theme-current-card,
.model-picker-menu,
.score-settings-strip,
.score-settings-inline {
  border-radius: var(--radius-md) !important;
}

.quiz-workspace {
  border: 1px solid var(--edu-feature-border) !important;
  background: var(--edu-rail-bg) !important;
  backdrop-filter: blur(20px) saturate(1.12);
  -webkit-backdrop-filter: blur(20px) saturate(1.12);
  box-shadow: var(--edu-feature-shadow) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}

html[data-theme="dark"] .quiz-workspace,
html[data-theme="dark"] .quiz-create-page .quiz-workspace,
html[data-theme="dark"] .lesson-create-page .quiz-workspace,
html[data-theme="dark"] body.quiz-create-page .quiz-workspace {
  background: rgba(20, 34, 58, 0.94) !important;
  border-color: rgba(147, 197, 253, 0.22) !important;
}

.quiz-workspace-toolbar {
  background: transparent !important;
  border-bottom: 1px solid var(--edu-feature-border, rgba(21, 42, 69, 0.07)) !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.quiz-workspace-title {
  letter-spacing: -0.02em;
  font-weight: 700 !important;
  color: var(--navy) !important;
}

/* Feature boxes — soft gradient inside airy shells */
.lesson-create-page .lesson-ws-zone,
.exercise-create-page .exercise-form-card,
.lesson-plan-create-page .exercise-form-card,
.quiz-create-page .q-card,
.quiz-create-page .q-problem-panel,
.quiz-create-page .q-illus-panel,
.quiz-create-page .q-interaction-controls,
.quiz-create-page .q-interaction-panel-side,
.quiz-create-page .qc-card {
  background: var(--edu-feature-box-grad) !important;
  border: 1px solid var(--edu-feature-border) !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;
}

.quiz-create-page .game-brief-editor {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.lesson-create-page .lesson-workspace-panel,
.exercise-create-page .quiz-workspace-panel.lesson-workspace-panel {
  background: transparent !important;
}

.folder-tab,
.question-folder-tabs .folder-tab {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
}

.progress-track {
  border-radius: 999px !important;
  overflow: hidden;
}

.progress-fill {
  border-radius: 999px !important;
}

.rail-share-btn,
.rail-narration-btn,
.rail-cancel-btn,
.rail-actions .btn-open {
  border-radius: var(--button-radius) !important;
}

.account-panel-card {
  border-radius: var(--radius-lg) !important;
  border-color: #d8e4f2 !important;
}

.account-panel-head {
  background: #f8fafc !important;
}

.account-panel-close,
.account-field input {
  border-radius: var(--radius-sm) !important;
}

.user-shell button:active:not(:disabled),
.billing-topup-btn:active:not(:disabled),
.rail-btn-primary:active:not(:disabled),
.billing-quick-btn:active {
  transform: scale(0.985);
}

@media (prefers-reduced-motion: reduce) {
  .user-shell button:active:not(:disabled),
  .billing-topup-btn:active:not(:disabled),
  .rail-btn-primary:active:not(:disabled),
  .billing-quick-btn:active {
    transform: none;
  }
}

/* —— Dark mode: beat light !important create/shell surfaces —— */
html[data-theme="dark"] {
  --edu-rail-bg: rgba(20, 34, 58, 0.9);
  --edu-rail-border: rgba(147, 197, 253, 0.2);
  --edu-zone-bg: rgba(20, 34, 58, 0.96);
  --edu-zone-focus: #1a2840;
  --edu-feature-border: rgba(147, 197, 253, 0.16);
  --edu-feature-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.32);
  --panel: #141f33;
  --bg: #0b1526;
  --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);
}

html[data-theme="dark"] .user-shell .topbar,
html[data-theme="dark"] body.shell-topbar-pinned > .topbar,
html[data-theme="dark"] body.user-shell > .topbar {
  background:
    radial-gradient(ellipse 70% 160% at 6% 50%, rgba(255, 122, 61, 0.22), transparent 58%),
    radial-gradient(ellipse 55% 180% at 88% 40%, rgba(91, 157, 255, 0.28), transparent 55%),
    radial-gradient(ellipse 40% 120% at 50% 120%, rgba(47, 107, 255, 0.12), transparent 60%),
    linear-gradient(105deg, #0a1424 0%, #121f36 38%, #162848 68%, #0e1a2e 100%) !important;
  border-bottom: 1px solid rgba(91, 157, 255, 0.28) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .user-shell .brand strong,
html[data-theme="dark"] body.shell-topbar-pinned > .topbar .brand strong,
html[data-theme="dark"] body.user-shell > .topbar .brand strong {
  color: #f2f7ff !important;
}

html[data-theme="dark"] .user-shell .account,
html[data-theme="dark"] .user-shell .shell-budget,
html[data-theme="dark"] body.shell-topbar-pinned > .topbar .account,
html[data-theme="dark"] body.shell-topbar-pinned > .topbar .shell-budget {
  background: linear-gradient(165deg, rgba(30, 48, 78, 0.95), rgba(18, 32, 54, 0.92)) !important;
  border-color: rgba(91, 157, 255, 0.3) !important;
  color: #e8eef8 !important;
}

html[data-theme="dark"] .user-shell .shell-budget:hover,
html[data-theme="dark"] body.shell-topbar-pinned > .topbar .shell-budget:hover {
  border-color: rgba(255, 122, 61, 0.55) !important;
  color: #ffb088 !important;
  background: linear-gradient(165deg, rgba(40, 58, 90, 0.98), rgba(24, 40, 66, 0.95)) !important;
}

html[data-theme="dark"] .user-shell .account .phone,
html[data-theme="dark"] body.shell-topbar-pinned > .topbar .account .phone {
  color: #d5e2f5 !important;
}

html[data-theme="dark"] .user-shell .menu > a,
html[data-theme="dark"] .user-shell .nav-drop-trigger,
html[data-theme="dark"] body.shell-topbar-pinned > .topbar .menu > a,
html[data-theme="dark"] body.shell-topbar-pinned > .topbar .nav-drop-trigger,
html[data-theme="dark"] body.user-shell > .topbar .menu > a,
html[data-theme="dark"] body.user-shell > .topbar .nav-drop-trigger {
  color: #c9d8ef !important;
}

html[data-theme="dark"] .user-shell .menu > a.is-active,
html[data-theme="dark"] .user-shell .nav-drop-trigger.is-active,
html[data-theme="dark"] .user-shell .nav-drop.is-active > .nav-drop-trigger,
html[data-theme="dark"] body.shell-topbar-pinned > .topbar .menu > a.is-active,
html[data-theme="dark"] body.user-shell > .topbar .menu > a.is-active {
  color: #ffffff !important;
  border-bottom-color: #ff7a3d !important;
}

html[data-theme="dark"] .user-shell .menu > a:hover,
html[data-theme="dark"] .user-shell .nav-drop-trigger:hover,
html[data-theme="dark"] body.shell-topbar-pinned > .topbar .menu > a:hover,
html[data-theme="dark"] body.shell-topbar-pinned > .topbar .nav-drop-trigger:hover {
  color: #ffffff !important;
  border-bottom-color: rgba(91, 157, 255, 0.75) !important;
}

html[data-theme="dark"] .user-shell .nav-drop-menu {
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(255, 122, 61, 0.14), transparent 55%),
    linear-gradient(180deg, #15233a 0%, #101b2e 100%) !important;
  border-color: rgba(91, 157, 255, 0.28) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .user-shell .nav-drop-item {
  color: #e2ebf8 !important;
}

html[data-theme="dark"] .user-shell .nav-drop-item:hover,
html[data-theme="dark"] .user-shell .nav-drop-item.is-active {
  background: linear-gradient(90deg, rgba(255, 122, 61, 0.16), rgba(91, 157, 255, 0.18)) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .user-shell .nav-drop-num {
  color: #9eb0cc !important;
}

html[data-theme="dark"] .user-shell .nav-drop-item.is-active .nav-drop-num,
html[data-theme="dark"] .user-shell .nav-drop-item:hover .nav-drop-num {
  color: #ffb088 !important;
}

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 {
  background: var(--edu-rail-bg) !important;
  border-color: var(--edu-rail-border) !important;
  color: var(--navy) !important;
  box-shadow: var(--edu-feature-shadow) !important;
}

html[data-theme="dark"] .quiz-workspace {
  background: rgba(20, 34, 58, 0.9) !important;
  border-color: var(--edu-feature-border) !important;
  box-shadow: var(--edu-feature-shadow) !important;
}

html[data-theme="dark"] .quiz-create-page .quiz-workspace,
html[data-theme="dark"] .lesson-create-page .quiz-workspace {
  background: rgba(20, 34, 58, 0.9) !important;
}

html[data-theme="dark"] .quiz-workspace-toolbar {
  background: rgba(12, 22, 40, 0.55) !important;
  border-bottom-color: #2a3f5f !important;
}

html[data-theme="dark"] .lesson-create-page .lesson-ws-zone,
html[data-theme="dark"] .exercise-create-page .exercise-form-card,
html[data-theme="dark"] .lesson-plan-create-page .exercise-form-card,
html[data-theme="dark"] .quiz-create-page .q-card,
html[data-theme="dark"] .quiz-create-page .q-problem-panel,
html[data-theme="dark"] .quiz-create-page .q-illus-panel,
html[data-theme="dark"] .quiz-create-page .q-interaction-controls,
html[data-theme="dark"] .quiz-create-page .q-interaction-panel-side,
html[data-theme="dark"] .quiz-create-page .qc-card {
  background: var(--edu-zone-bg) !important;
  border-color: var(--edu-feature-border) !important;
  box-shadow: var(--edu-feature-shadow) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .quiz-create-page .model-picker-trigger,
html[data-theme="dark"] .lesson-create-page .model-picker-trigger,
html[data-theme="dark"] .quiz-create-page .model-picker-menu,
html[data-theme="dark"] .lesson-create-page .model-picker-menu {
  background: #141f33 !important;
  border-color: #2a3f5f !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .model-option:hover,
html[data-theme="dark"] .model-option.is-selected {
  background: #1a2840 !important;
}

html[data-theme="dark"] .lesson-ws-text,
html[data-theme="dark"] .exercise-field textarea,
html[data-theme="dark"] .exercise-field input,
html[data-theme="dark"] .exercise-field select,
html[data-theme="dark"] .lesson-illus-alt-label input {
  background: #0f1a2e !important;
  border-color: #2a3f5f !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .exercise-create-page .exercise-type-switch,
html[data-theme="dark"] .exercise-create-page .exercise-diff-block,
html[data-theme="dark"] .exercise-create-page .exercise-mcq-block,
html[data-theme="dark"] .exercise-create-page .exercise-toggle,
html[data-theme="dark"] .lesson-segment {
  background: #0f1a2e !important;
  border-color: transparent !important;
}

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"] .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 {
  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 .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"] .quiz-create-page .btn-ghost:hover:not(:disabled),
html[data-theme="dark"] .lesson-create-page .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"] .quiz-create-page .quiz-rail-step.is-active:not(.is-done),
html[data-theme="dark"] .quiz-create-page .quiz-rail-step.is-current:not(.is-done),
html[data-theme="dark"] .lesson-create-page .quiz-rail-step.is-active:not(.is-done),
html[data-theme="dark"] .lesson-create-page .quiz-rail-step.is-current:not(.is-done),
html[data-theme="dark"] .lesson-create-page .rail-step-ready.is-current:not(.is-done) {
  background: rgba(91, 157, 255, 0.14) !important;
}

html[data-theme="dark"] .account-panel-card {
  background: #141f33 !important;
  border-color: #2a3f5f !important;
}

html[data-theme="dark"] .account-panel-head {
  background: #1a2840 !important;
}

html[data-theme="dark"] .library-card,
html[data-theme="dark"] .rail-card,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .stat-card {
  background: #141f33 !important;
  border-color: #2a3f5f !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .billing-amount-card,
html[data-theme="dark"] .billing-confirm-card,
html[data-theme="dark"] .billing-orders,
html[data-theme="dark"] .billing-history-btn,
html[data-theme="dark"] .billing-plan-detail {
  background: #141f33 !important;
  border-color: #2a3f5f !important;
}

html[data-theme="dark"] .quiz-create-page .rail-step-ready-label,
html[data-theme="dark"] .lesson-create-page .rail-step-ready-label,
html[data-theme="dark"] .quiz-create-page .quiz-workspace-title,
html[data-theme="dark"] .lesson-create-page .quiz-workspace-title {
  color: #e8f0ff !important;
}

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),
html[data-theme="dark"] .quiz-create-page #btn-upload-word,
html[data-theme="dark"] .lesson-create-page #btn-upload-word {
  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;
}