/* Edugates-ClipSAT Science Labs - Master Design System */
@import url('https://fonts.googleapis.com/css2?family=Cabinet+Grotesk:wght@700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&family=Outfit:wght@500;600;700;800&display=swap');

:root {
  /* Core Color Palette */
  --bg-dark: #070a12;
  --bg-card: rgba(15, 23, 42, 0.75);
  --bg-card-hover: rgba(30, 41, 59, 0.85);
  --bg-surface: #0f172a;
  --bg-surface-elevated: #1e293b;
  --border-color: rgba(255, 255, 255, 0.08);
  --border-color-glow: rgba(56, 189, 248, 0.3);

  /* Typography */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Subject Accent Colors */
  --chem-primary: #06b6d4;
  --chem-gradient: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%);
  --chem-glow: rgba(6, 182, 212, 0.25);

  --bio-primary: #10b981;
  --bio-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --bio-glow: rgba(16, 185, 129, 0.25);

  --phys-primary: #6366f1;
  --phys-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  --phys-glow: rgba(99, 102, 241, 0.25);

  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  /* Mobile Safe Area Insets (iOS Safari Notch/Dynamic Island & Home Indicator) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Dimensions & Spacing */
  --nav-height: 84px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --touch-target: 44px;
}

/* SMARTBOARD CLASSROOM & LOW-POWER PROCESSOR PERFORMANCE OPTIMIZATION (60 FPS TURBO PROFILE) */
[data-mode="smartboard"],
body.mode-smartboard,
html.mode-smartboard,
.fast-smartboard-mode {
  --nav-height: 96px;
  --touch-target: 64px;
  font-size: 19px;
  scroll-behavior: auto !important; /* Immediate 1:1 touch response without software animation lag */
  -webkit-overflow-scrolling: touch;
}

/* TABLET ERGONOMICS & TOUCH PROFILE (iPads, Android Galaxy Tabs, Surface Pro) */
[data-mode="tablet"],
body.mode-tablet,
html.mode-tablet {
  --nav-height: 88px;
  --touch-target: 48px;
  font-size: 16px;
  -webkit-overflow-scrolling: touch;
}

[data-mode="tablet"] .modules-grid,
body.mode-tablet .modules-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

[data-mode="tablet"] .module-card-banner,
body.mode-tablet .module-card-banner {
  height: 155px;
}

[data-mode="tablet"] .lesson-row-card,
body.mode-tablet .lesson-row-card {
  min-height: 48px;
  padding: 8px 12px;
}

[data-mode="tablet"] .btn,
body.mode-tablet .btn,
[data-mode="tablet"] .nav-action-btn,
body.mode-tablet .nav-action-btn {
  min-height: 44px;
}

/* MOBILE PHONE ERGONOMICS & HARDWARE PROFILE (iPhones, Android Galaxy, Google Pixel) */
* {
  -webkit-tap-highlight-color: transparent;
}
button, a, input, select, textarea, [role="button"], [role="tab"] {
  touch-action: manipulation;
}

[data-mode="mobile"],
body.mode-mobile,
html.mode-mobile {
  --nav-height: 60px;
  --touch-target: 44px;
  font-size: 15px;
  -webkit-overflow-scrolling: touch;
}

[data-mode="mobile"] .modules-grid,
body.mode-mobile .modules-grid {
  grid-template-columns: 1fr !important;
  gap: 14px;
}

[data-mode="mobile"] .module-card-banner,
body.mode-mobile .module-card-banner {
  height: 135px;
}

[data-mode="mobile"] .lesson-row-card,
body.mode-mobile .lesson-row-card {
  min-height: 44px;
  padding: 8px 12px;
}

[data-mode="mobile"] .btn,
body.mode-mobile .btn,
[data-mode="mobile"] .nav-action-btn,
body.mode-mobile .nav-action-btn {
  min-height: 44px;
}

/* 1. Eliminate 100% of GPU fill-rate bottlenecks: Remove all backdrop-filters across the entire DOM */
[data-mode="smartboard"] *,
body.mode-smartboard *,
html.mode-smartboard *,
.fast-smartboard-mode * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 2. Eliminate 4K atmospheric glow blobs & heavy blur filters to free GPU memory */
[data-mode="smartboard"] .bg-glow-container,
body.mode-smartboard .bg-glow-container,
html.mode-smartboard .bg-glow-container,
.fast-smartboard-mode .bg-glow-container,
[data-mode="smartboard"] .bg-glow-blob,
body.mode-smartboard .bg-glow-blob,
.fast-smartboard-mode .bg-glow-blob {
  display: none !important;
  filter: none !important;
}

/* 3. Solid, high-contrast, performant opaque surfaces for smooth 4K compositing */
/* Dark Mode Smartboard Surfaces (Default) */
:root:not([data-theme="day"])[data-mode="smartboard"] .app-navbar,
:root:not([data-theme="day"]).mode-smartboard .app-navbar,
:root:not([data-theme="day"]).fast-smartboard-mode .app-navbar,
:root:not([data-theme="day"]) body.mode-smartboard .app-navbar,
:root:not([data-theme="day"]) body.fast-smartboard-mode .app-navbar,
:root:not([data-theme="day"]) [data-mode="smartboard"] .app-navbar,
:root:not([data-theme="day"]) .fast-smartboard-mode .app-navbar {
  background: #070a12 !important;
  color: #f8fafc !important;
}

:root:not([data-theme="day"])[data-mode="smartboard"] .hero-banner,
:root:not([data-theme="day"]).mode-smartboard .hero-banner,
:root:not([data-theme="day"]).fast-smartboard-mode .hero-banner,
:root:not([data-theme="day"]) body.mode-smartboard .hero-banner,
:root:not([data-theme="day"]) body.fast-smartboard-mode .hero-banner,
:root:not([data-theme="day"]) [data-mode="smartboard"] .hero-banner,
:root:not([data-theme="day"]) .fast-smartboard-mode .hero-banner,
:root:not([data-theme="day"])[data-mode="smartboard"] .smartboard-pen-bar,
:root:not([data-theme="day"]).mode-smartboard .smartboard-pen-bar,
:root:not([data-theme="day"]).fast-smartboard-mode .smartboard-pen-bar,
:root:not([data-theme="day"]) body.mode-smartboard .smartboard-pen-bar,
:root:not([data-theme="day"]) body.fast-smartboard-mode .smartboard-pen-bar,
:root:not([data-theme="day"]) [data-mode="smartboard"] .smartboard-pen-bar,
:root:not([data-theme="day"]) .fast-smartboard-mode .smartboard-pen-bar,
:root:not([data-theme="day"])[data-mode="smartboard"] .module-card,
:root:not([data-theme="day"]).mode-smartboard .module-card,
:root:not([data-theme="day"]).fast-smartboard-mode .module-card,
:root:not([data-theme="day"]) body.mode-smartboard .module-card,
:root:not([data-theme="day"]) body.fast-smartboard-mode .module-card,
:root:not([data-theme="day"]) [data-mode="smartboard"] .module-card,
:root:not([data-theme="day"]) .fast-smartboard-mode .module-card,
:root:not([data-theme="day"])[data-mode="smartboard"] .lesson-card-full,
:root:not([data-theme="day"]).mode-smartboard .lesson-card-full,
:root:not([data-theme="day"]).fast-smartboard-mode .lesson-card-full,
:root:not([data-theme="day"]) body.mode-smartboard .lesson-card-full,
:root:not([data-theme="day"]) body.fast-smartboard-mode .lesson-card-full,
:root:not([data-theme="day"]) [data-mode="smartboard"] .lesson-card-full,
:root:not([data-theme="day"]) .fast-smartboard-mode .lesson-card-full,
:root:not([data-theme="day"])[data-mode="smartboard"] .modal-content-shell,
:root:not([data-theme="day"]).mode-smartboard .modal-content-shell,
:root:not([data-theme="day"]).fast-smartboard-mode .modal-content-shell,
:root:not([data-theme="day"]) body.mode-smartboard .modal-content-shell,
:root:not([data-theme="day"]) body.fast-smartboard-mode .modal-content-shell,
:root:not([data-theme="day"]) [data-mode="smartboard"] .modal-content-shell,
:root:not([data-theme="day"]) .fast-smartboard-mode .modal-content-shell,
:root:not([data-theme="day"])[data-mode="smartboard"] .nav-dropdown-menu,
:root:not([data-theme="day"]).mode-smartboard .nav-dropdown-menu,
:root:not([data-theme="day"]).fast-smartboard-mode .nav-dropdown-menu,
:root:not([data-theme="day"]) body.mode-smartboard .nav-dropdown-menu,
:root:not([data-theme="day"]) body.fast-smartboard-mode .nav-dropdown-menu,
:root:not([data-theme="day"]) [data-mode="smartboard"] .nav-dropdown-menu,
:root:not([data-theme="day"]) .fast-smartboard-mode .nav-dropdown-menu,
:root:not([data-theme="day"])[data-mode="smartboard"] .calculator-modal,
:root:not([data-theme="day"]).mode-smartboard .calculator-modal,
:root:not([data-theme="day"]).fast-smartboard-mode .calculator-modal,
:root:not([data-theme="day"]) body.mode-smartboard .calculator-modal,
:root:not([data-theme="day"]) body.fast-smartboard-mode .calculator-modal,
:root:not([data-theme="day"]) [data-mode="smartboard"] .calculator-modal,
:root:not([data-theme="day"]) .fast-smartboard-mode .calculator-modal,
:root:not([data-theme="day"])[data-mode="smartboard"] .quiz-modal,
:root:not([data-theme="day"]).mode-smartboard .quiz-modal,
:root:not([data-theme="day"]).fast-smartboard-mode .quiz-modal,
:root:not([data-theme="day"]) body.mode-smartboard .quiz-modal,
:root:not([data-theme="day"]) body.fast-smartboard-mode .quiz-modal,
:root:not([data-theme="day"]) [data-mode="smartboard"] .quiz-modal,
:root:not([data-theme="day"]) .fast-smartboard-mode .quiz-modal,
:root:not([data-theme="day"])[data-mode="smartboard"] .interactive-shell,
:root:not([data-theme="day"]).mode-smartboard .interactive-shell,
:root:not([data-theme="day"]).fast-smartboard-mode .interactive-shell,
:root:not([data-theme="day"]) body.mode-smartboard .interactive-shell,
:root:not([data-theme="day"]) body.fast-smartboard-mode .interactive-shell,
:root:not([data-theme="day"]) [data-mode="smartboard"] .interactive-shell,
:root:not([data-theme="day"]) .fast-smartboard-mode .interactive-shell,
:root:not([data-theme="day"])[data-mode="smartboard"] .sb-timer-widget,
:root:not([data-theme="day"]).mode-smartboard .sb-timer-widget,
:root:not([data-theme="day"]).fast-smartboard-mode .sb-timer-widget,
:root:not([data-theme="day"]) body.mode-smartboard .sb-timer-widget,
:root:not([data-theme="day"]) body.fast-smartboard-mode .sb-timer-widget,
:root:not([data-theme="day"]) [data-mode="smartboard"] .sb-timer-widget,
:root:not([data-theme="day"]) .fast-smartboard-mode .sb-timer-widget,
:root:not([data-theme="day"])[data-mode="smartboard"] .sb-curtain-handle,
:root:not([data-theme="day"]).mode-smartboard .sb-curtain-handle,
:root:not([data-theme="day"]).fast-smartboard-mode .sb-curtain-handle,
:root:not([data-theme="day"]) body.mode-smartboard .sb-curtain-handle,
:root:not([data-theme="day"]) body.fast-smartboard-mode .sb-curtain-handle,
:root:not([data-theme="day"]) [data-mode="smartboard"] .sb-curtain-handle,
:root:not([data-theme="day"]) .fast-smartboard-mode .sb-curtain-handle,
:root:not([data-theme="day"])[data-mode="smartboard"] .sb-spotlight-hud,
:root:not([data-theme="day"]).mode-smartboard .sb-spotlight-hud,
:root:not([data-theme="day"]).fast-smartboard-mode .sb-spotlight-hud,
:root:not([data-theme="day"]) body.mode-smartboard .sb-spotlight-hud,
:root:not([data-theme="day"]) body.fast-smartboard-mode .sb-spotlight-hud,
:root:not([data-theme="day"]) [data-mode="smartboard"] .sb-spotlight-hud,
:root:not([data-theme="day"]) .fast-smartboard-mode .sb-spotlight-hud {
  background: #0f172a !important;
  color: #f8fafc !important;
}

:root:not([data-theme="day"])[data-mode="smartboard"] .modal-backdrop,
:root:not([data-theme="day"]).mode-smartboard .modal-backdrop,
:root:not([data-theme="day"]).fast-smartboard-mode .modal-backdrop,
:root:not([data-theme="day"]) body.mode-smartboard .modal-backdrop,
:root:not([data-theme="day"]) body.fast-smartboard-mode .modal-backdrop,
:root:not([data-theme="day"]) [data-mode="smartboard"] .modal-backdrop,
:root:not([data-theme="day"]) .fast-smartboard-mode .modal-backdrop {
  background: rgba(0, 0, 0, 0.78) !important;
}

/* Day Mode Smartboard Surfaces (Opaque White & Slate, Zero-Blur, High-Contrast WCAG AAA >= 7:1) */
html[data-theme="day"][data-mode="smartboard"] .app-navbar,
html[data-theme="day"].mode-smartboard .app-navbar,
html[data-theme="day"].fast-smartboard-mode .app-navbar,
html[data-theme="day"] body.mode-smartboard .app-navbar,
html[data-theme="day"] body.fast-smartboard-mode .app-navbar,
[data-theme="day"][data-mode="smartboard"] .app-navbar,
[data-theme="day"].mode-smartboard .app-navbar,
[data-theme="day"].fast-smartboard-mode .app-navbar,
[data-theme="day"] body.mode-smartboard .app-navbar,
body.mode-smartboard[data-theme="day"] .app-navbar,
[data-theme="day"] .fast-smartboard-mode .app-navbar,
[data-theme="day"] .app-navbar {
  background: #ffffff !important;
  border-bottom: 2px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="day"][data-mode="smartboard"] .hero-banner,
html[data-theme="day"].mode-smartboard .hero-banner,
html[data-theme="day"].fast-smartboard-mode .hero-banner,
html[data-theme="day"] body.mode-smartboard .hero-banner,
html[data-theme="day"] body.fast-smartboard-mode .hero-banner,
[data-theme="day"][data-mode="smartboard"] .hero-banner,
[data-theme="day"].mode-smartboard .hero-banner,
[data-theme="day"].fast-smartboard-mode .hero-banner,
[data-theme="day"] body.mode-smartboard .hero-banner,
body.mode-smartboard[data-theme="day"] .hero-banner,
[data-theme="day"] .fast-smartboard-mode .hero-banner,
html[data-theme="day"][data-mode="smartboard"] .smartboard-pen-bar,
html[data-theme="day"].mode-smartboard .smartboard-pen-bar,
html[data-theme="day"].fast-smartboard-mode .smartboard-pen-bar,
html[data-theme="day"] body.mode-smartboard .smartboard-pen-bar,
html[data-theme="day"] body.fast-smartboard-mode .smartboard-pen-bar,
[data-theme="day"][data-mode="smartboard"] .smartboard-pen-bar,
[data-theme="day"].mode-smartboard .smartboard-pen-bar,
[data-theme="day"].fast-smartboard-mode .smartboard-pen-bar,
[data-theme="day"] body.mode-smartboard .smartboard-pen-bar,
[data-theme="day"] .fast-smartboard-mode .smartboard-pen-bar,
html[data-theme="day"][data-mode="smartboard"] .module-card,
html[data-theme="day"].mode-smartboard .module-card,
html[data-theme="day"].fast-smartboard-mode .module-card,
html[data-theme="day"] body.mode-smartboard .module-card,
html[data-theme="day"] body.fast-smartboard-mode .module-card,
[data-theme="day"][data-mode="smartboard"] .module-card,
[data-theme="day"].mode-smartboard .module-card,
[data-theme="day"].fast-smartboard-mode .module-card,
[data-theme="day"] body.mode-smartboard .module-card,
body.mode-smartboard[data-theme="day"] .module-card,
[data-theme="day"] .fast-smartboard-mode .module-card,
html[data-theme="day"][data-mode="smartboard"] .lesson-card-full,
html[data-theme="day"].mode-smartboard .lesson-card-full,
html[data-theme="day"].fast-smartboard-mode .lesson-card-full,
html[data-theme="day"] body.mode-smartboard .lesson-card-full,
html[data-theme="day"] body.fast-smartboard-mode .lesson-card-full,
[data-theme="day"][data-mode="smartboard"] .lesson-card-full,
[data-theme="day"].mode-smartboard .lesson-card-full,
[data-theme="day"].fast-smartboard-mode .lesson-card-full,
[data-theme="day"] body.mode-smartboard .lesson-card-full,
body.mode-smartboard[data-theme="day"] .lesson-card-full,
[data-theme="day"] .fast-smartboard-mode .lesson-card-full,
html[data-theme="day"][data-mode="smartboard"] .modal-content-shell,
html[data-theme="day"].mode-smartboard .modal-content-shell,
html[data-theme="day"].fast-smartboard-mode .modal-content-shell,
html[data-theme="day"] body.mode-smartboard .modal-content-shell,
html[data-theme="day"] body.fast-smartboard-mode .modal-content-shell,
[data-theme="day"][data-mode="smartboard"] .modal-content-shell,
[data-theme="day"].mode-smartboard .modal-content-shell,
[data-theme="day"].fast-smartboard-mode .modal-content-shell,
[data-theme="day"] body.mode-smartboard .modal-content-shell,
body.mode-smartboard[data-theme="day"] .modal-content-shell,
[data-theme="day"] .fast-smartboard-mode .modal-content-shell,
html[data-theme="day"][data-mode="smartboard"] .nav-dropdown-menu,
html[data-theme="day"].mode-smartboard .nav-dropdown-menu,
html[data-theme="day"].fast-smartboard-mode .nav-dropdown-menu,
html[data-theme="day"] body.mode-smartboard .nav-dropdown-menu,
html[data-theme="day"] body.fast-smartboard-mode .nav-dropdown-menu,
[data-theme="day"][data-mode="smartboard"] .nav-dropdown-menu,
[data-theme="day"].mode-smartboard .nav-dropdown-menu,
[data-theme="day"].fast-smartboard-mode .nav-dropdown-menu,
[data-theme="day"] body.mode-smartboard .nav-dropdown-menu,
body.mode-smartboard[data-theme="day"] .nav-dropdown-menu,
[data-theme="day"] .fast-smartboard-mode .nav-dropdown-menu,
html[data-theme="day"][data-mode="smartboard"] .calculator-modal,
html[data-theme="day"].mode-smartboard .calculator-modal,
html[data-theme="day"].fast-smartboard-mode .calculator-modal,
html[data-theme="day"] body.mode-smartboard .calculator-modal,
html[data-theme="day"] body.fast-smartboard-mode .calculator-modal,
[data-theme="day"][data-mode="smartboard"] .calculator-modal,
[data-theme="day"].mode-smartboard .calculator-modal,
[data-theme="day"].fast-smartboard-mode .calculator-modal,
[data-theme="day"] body.mode-smartboard .calculator-modal,
[data-theme="day"] .fast-smartboard-mode .calculator-modal,
html[data-theme="day"][data-mode="smartboard"] .quiz-modal,
html[data-theme="day"].mode-smartboard .quiz-modal,
html[data-theme="day"].fast-smartboard-mode .quiz-modal,
html[data-theme="day"] body.mode-smartboard .quiz-modal,
html[data-theme="day"] body.fast-smartboard-mode .quiz-modal,
[data-theme="day"][data-mode="smartboard"] .quiz-modal,
[data-theme="day"].mode-smartboard .quiz-modal,
[data-theme="day"].fast-smartboard-mode .quiz-modal,
[data-theme="day"] body.mode-smartboard .quiz-modal,
[data-theme="day"] .fast-smartboard-mode .quiz-modal,
html[data-theme="day"][data-mode="smartboard"] .interactive-shell,
html[data-theme="day"].mode-smartboard .interactive-shell,
html[data-theme="day"].fast-smartboard-mode .interactive-shell,
html[data-theme="day"] body.mode-smartboard .interactive-shell,
html[data-theme="day"] body.fast-smartboard-mode .interactive-shell,
[data-theme="day"][data-mode="smartboard"] .interactive-shell,
[data-theme="day"].mode-smartboard .interactive-shell,
[data-theme="day"].fast-smartboard-mode .interactive-shell,
[data-theme="day"] body.mode-smartboard .interactive-shell,
[data-theme="day"] .fast-smartboard-mode .interactive-shell,
html[data-theme="day"][data-mode="smartboard"] .sb-timer-widget,
html[data-theme="day"].mode-smartboard .sb-timer-widget,
html[data-theme="day"].fast-smartboard-mode .sb-timer-widget,
html[data-theme="day"] body.mode-smartboard .sb-timer-widget,
html[data-theme="day"] body.fast-smartboard-mode .sb-timer-widget,
[data-theme="day"][data-mode="smartboard"] .sb-timer-widget,
[data-theme="day"].mode-smartboard .sb-timer-widget,
[data-theme="day"].fast-smartboard-mode .sb-timer-widget,
[data-theme="day"] body.mode-smartboard .sb-timer-widget,
[data-theme="day"] .fast-smartboard-mode .sb-timer-widget,
html[data-theme="day"][data-mode="smartboard"] .sb-curtain-handle,
html[data-theme="day"].mode-smartboard .sb-curtain-handle,
html[data-theme="day"].fast-smartboard-mode .sb-curtain-handle,
html[data-theme="day"] body.mode-smartboard .sb-curtain-handle,
html[data-theme="day"] body.fast-smartboard-mode .sb-curtain-handle,
[data-theme="day"][data-mode="smartboard"] .sb-curtain-handle,
[data-theme="day"].mode-smartboard .sb-curtain-handle,
[data-theme="day"].fast-smartboard-mode .sb-curtain-handle,
[data-theme="day"] body.mode-smartboard .sb-curtain-handle,
[data-theme="day"] .fast-smartboard-mode .sb-curtain-handle,
html[data-theme="day"][data-mode="smartboard"] .sb-spotlight-hud,
html[data-theme="day"].mode-smartboard .sb-spotlight-hud,
html[data-theme="day"].fast-smartboard-mode .sb-spotlight-hud,
html[data-theme="day"] body.mode-smartboard .sb-spotlight-hud,
html[data-theme="day"] body.fast-smartboard-mode .sb-spotlight-hud,
[data-theme="day"][data-mode="smartboard"] .sb-spotlight-hud,
[data-theme="day"].mode-smartboard .sb-spotlight-hud,
[data-theme="day"].fast-smartboard-mode .sb-spotlight-hud,
[data-theme="day"] body.mode-smartboard .sb-spotlight-hud,
[data-theme="day"] .fast-smartboard-mode .sb-spotlight-hud {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="day"] .hero-banner h1,
[data-theme="day"] .hero-banner h2,
[data-theme="day"] .hero-banner p,
[data-theme="day"] .hero-title,
[data-theme="day"] .hero-desc,
[data-theme="day"] .module-card h2,
[data-theme="day"] .module-card h3,
[data-theme="day"] .module-card p,
[data-theme="day"] .module-card-title,
[data-theme="day"] .lesson-card-full h3,
[data-theme="day"] .lesson-card-full p {
  color: #0f172a !important;
}

[data-theme="day"] .hero-banner .hero-subtitle,
[data-theme="day"] .module-card .module-phenomenon,
[data-theme="day"] .module-card-unit,
[data-theme="day"] .module-lesson-count {
  color: #334155 !important;
}

[data-theme="day"] .btn-secondary,
[data-theme="day"][data-mode="smartboard"] .btn-secondary,
[data-theme="day"] body.mode-smartboard .btn-secondary,
[data-theme="day"] .fast-smartboard-mode .btn-secondary {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="day"][data-mode="smartboard"] .modal-backdrop,
[data-theme="day"] body.mode-smartboard .modal-backdrop,
[data-theme="day"] .fast-smartboard-mode .modal-backdrop {
  background: rgba(15, 23, 42, 0.55) !important;
}

/* 4. GPU Overdraw Elimination: Low-spread, crisp box-shadows */
[data-mode="smartboard"] .module-card,
body.mode-smartboard .module-card,
.fast-smartboard-mode .module-card,
[data-mode="smartboard"] .lesson-card-full,
body.mode-smartboard .lesson-card-full,
.fast-smartboard-mode .lesson-card-full,
[data-mode="smartboard"] .hero-banner,
body.mode-smartboard .hero-banner,
.fast-smartboard-mode .hero-banner,
[data-mode="smartboard"] .nav-dropdown-menu,
body.mode-smartboard .nav-dropdown-menu,
.fast-smartboard-mode .nav-dropdown-menu,
[data-mode="smartboard"] .btn,
body.mode-smartboard .btn,
.fast-smartboard-mode .btn,
[data-mode="smartboard"] .lab-nav-btn,
body.mode-smartboard .lab-nav-btn,
.fast-smartboard-mode .lab-nav-btn,
[data-mode="smartboard"] .smartboard-pen-bar,
body.mode-smartboard .smartboard-pen-bar,
.fast-smartboard-mode .smartboard-pen-bar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

/* 5. Virtualized DOM rendering: Skip layout & paint for off-screen cards */
[data-mode="smartboard"] .module-card,
body.mode-smartboard .module-card,
.fast-smartboard-mode .module-card,
[data-mode="smartboard"] .lesson-card-full,
body.mode-smartboard .lesson-card-full,
.fast-smartboard-mode .lesson-card-full,
[data-mode="smartboard"] .lesson-row-card,
body.mode-smartboard .lesson-row-card,
.fast-smartboard-mode .lesson-row-card {
  content-visibility: auto;
  contain-intrinsic-size: 0 320px;
  transform: translateZ(0);
}

/* 6. Zero-delay touch responsiveness & remove stuck touch hover translations */
[data-mode="smartboard"] button,
body.mode-smartboard button,
.fast-smartboard-mode button,
[data-mode="smartboard"] a,
body.mode-smartboard a,
.fast-smartboard-mode a,
[data-mode="smartboard"] .btn,
body.mode-smartboard .btn,
.fast-smartboard-mode .btn,
[data-mode="smartboard"] .nav-tab,
body.mode-smartboard .nav-tab,
.fast-smartboard-mode .nav-tab,
[data-mode="smartboard"] .lesson-row-card,
body.mode-smartboard .lesson-row-card,
.fast-smartboard-mode .lesson-row-card,
[data-mode="smartboard"] .unit-filter-chip,
body.mode-smartboard .unit-filter-chip,
.fast-smartboard-mode .unit-filter-chip,
[data-mode="smartboard"] .lab-nav-btn,
body.mode-smartboard .lab-nav-btn,
.fast-smartboard-mode .lab-nav-btn {
  touch-action: manipulation;
}

[data-mode="smartboard"] .module-card:hover,
body.mode-smartboard .module-card:hover,
.fast-smartboard-mode .module-card:hover,
[data-mode="smartboard"] .lesson-card-full:hover,
body.mode-smartboard .lesson-card-full:hover,
.fast-smartboard-mode .lesson-card-full:hover,
[data-mode="smartboard"] .btn:hover,
body.mode-smartboard .btn:hover,
.fast-smartboard-mode .btn:hover,
[data-mode="smartboard"] .lab-nav-btn:hover,
body.mode-smartboard .lab-nav-btn:hover,
.fast-smartboard-mode .lab-nav-btn:hover {
  transform: none !important;
}

/* 7. Snappy, low-CPU UI transitions */
[data-mode="smartboard"] *,
body.mode-smartboard *,
html.mode-smartboard *,
.fast-smartboard-mode * {
  transition-duration: 0.06s !important;
}

[data-mode="smartboard"] .brand-logo-box,
body.mode-smartboard .brand-logo-box {
  width: 70px;
  height: 70px;
}

[data-mode="smartboard"] .brand-text h1,
body.mode-smartboard .brand-text h1 {
  font-size: 1.65rem;
}

[data-mode="smartboard"] .btn,
body.mode-smartboard .btn {
  min-height: 58px;
  padding: 14px 28px;
  font-size: 1.15rem;
}

[data-mode="smartboard"] .nav-tab,
body.mode-smartboard .nav-tab {
  padding: 16px 24px;
  font-size: 1.2rem;
}

[data-mode="smartboard"] .module-card,
body.mode-smartboard .module-card {
  padding: 24px;
  font-size: 1.1rem;
}

[data-mode="smartboard"] .unit-filter-chip,
body.mode-smartboard .unit-filter-chip,
.fast-smartboard-mode .unit-filter-chip {
  min-height: 52px;
  padding: 12px 20px;
  font-size: 1.05rem;
}

[data-mode="smartboard"] .view-mode-btn,
body.mode-smartboard .view-mode-btn,
.fast-smartboard-mode .view-mode-btn {
  min-height: 52px;
  padding: 12px 22px;
  font-size: 1.05rem;
}

[data-mode="smartboard"] .search-input,
body.mode-smartboard .search-input,
.fast-smartboard-mode .search-input {
  min-height: 58px;
  font-size: 1.15rem;
  padding-left: 52px;
}

[data-mode="smartboard"] .lab-nav-btn,
body.mode-smartboard .lab-nav-btn,
.fast-smartboard-mode .lab-nav-btn {
  min-height: 56px;
  padding: 12px 20px;
  font-size: 1.05rem;
}

[data-mode="smartboard"] select,
body.mode-smartboard select,
.fast-smartboard-mode select {
  min-height: 54px;
  font-size: 1.1rem;
  padding: 10px 16px;
}

[data-mode="smartboard"] input[type="range"],
body.mode-smartboard input[type="range"],
.fast-smartboard-mode input[type="range"],
[data-mode="smartboard"] .range-slider,
body.mode-smartboard .range-slider,
.fast-smartboard-mode .range-slider,
[data-mode="smartboard"] .custom-slider,
body.mode-smartboard .custom-slider,
.fast-smartboard-mode .custom-slider {
  height: 14px;
  cursor: pointer;
}

[data-mode="smartboard"] input[type="range"]::-webkit-slider-thumb,
body.mode-smartboard input[type="range"]::-webkit-slider-thumb,
.fast-smartboard-mode input[type="range"]::-webkit-slider-thumb,
[data-mode="smartboard"] .range-slider::-webkit-slider-thumb,
body.mode-smartboard .range-slider::-webkit-slider-thumb,
.fast-smartboard-mode .range-slider::-webkit-slider-thumb,
[data-mode="smartboard"] .custom-slider::-webkit-slider-thumb,
body.mode-smartboard .custom-slider::-webkit-slider-thumb,
.fast-smartboard-mode .custom-slider::-webkit-slider-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
}

[data-mode="smartboard"] input[type="range"]::-moz-range-thumb,
body.mode-smartboard input[type="range"]::-moz-range-thumb,
.fast-smartboard-mode input[type="range"]::-moz-range-thumb,
[data-mode="smartboard"] .range-slider::-moz-range-thumb,
body.mode-smartboard .range-slider::-moz-range-thumb,
.fast-smartboard-mode .range-slider::-moz-range-thumb,
[data-mode="smartboard"] .custom-slider::-moz-range-thumb,
body.mode-smartboard .custom-slider::-moz-range-thumb,
.fast-smartboard-mode .custom-slider::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
}

[data-mode="smartboard"] .btn-sim-action,
body.mode-smartboard .btn-sim-action,
.fast-smartboard-mode .btn-sim-action {
  min-height: 52px;
  padding: 12px 20px;
  font-size: 1.05rem;
}

/* Reset & Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  min-height: 100%;
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Accessibility: Skip to Main Content Link */
.skip-link {
  position: absolute;
  top: -120px;
  left: 16px;
  background: #0284c7;
  color: #ffffff !important;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: var(--radius-sm, 8px);
  z-index: 999999;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6), 0 0 12px rgba(56, 189, 248, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: top 0.2s ease-in-out;
}
.skip-link:focus {
  top: 16px;
  outline: 3px solid #38bdf8;
  outline-offset: 3px;
}

/* Accessibility: Main Content Viewport Focus Anchor */
#main-content-view {
  outline: none;
}
#main-content-view:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: -2px;
}

/* Accessibility: Semantic Link Styling for Cards & Navigation */
.module-title-link,
.lesson-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.module-title-link:hover,
.lesson-title-link:hover {
  color: #38bdf8;
  text-decoration: underline;
}
.module-explore-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #38bdf8;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.2s ease;
}
.module-explore-link:hover {
  color: #7dd3fc;
  text-decoration: underline;
  transform: translateX(3px);
}
a.lesson-row-card {
  text-decoration: none;
  color: inherit;
}

/* User Accessibility: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Background Atmospheric Glow */
.bg-glow-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bg-glow-blob {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.15;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.blob-1 { top: -150px; left: -100px; background: #06b6d4; }
.blob-2 { top: 30%; right: -150px; background: #10b981; }
.blob-3 { bottom: -150px; left: 30%; background: #6366f1; }

/* Layout Shell */
#app-root {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Navbar */
.app-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background: rgba(7, 10, 18, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  gap: 16px;
  transition: all 0.3s ease;
}
.app-navbar::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 5%, rgba(6, 182, 212, 0.45) 25%, rgba(16, 185, 129, 0.45) 55%, rgba(99, 102, 241, 0.45) 80%, transparent 98%);
  pointer-events: none;
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.brand-logo-box {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 12px;
  background: #ffffff;
  padding: 3px;
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.25);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
}
[data-theme="day"] .brand-logo-box {
  background: #ffffff;
  border-color: rgba(2, 132, 199, 0.35);
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.15);
}
.brand-section:hover .brand-logo-box {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 8px 26px rgba(6, 182, 212, 0.5);
  border-color: rgba(56, 189, 248, 0.7);
}
.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 9px;
  display: block;
}
.brand-logo-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.5));
  animation: pulse-spin 20s linear infinite;
}
@keyframes pulse-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.brand-text h1 {
  font-family: var(--font-heading);
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1.15;
  margin: 0;
}
.brand-title-prefix {
  color: #f8fafc;
  font-weight: 800;
  transition: color 0.2s ease;
}
[data-theme="day"] .brand-title-prefix {
  color: #0f172a;
}
.brand-text h1 span.logo-highlight {
  background: linear-gradient(135deg, #38bdf8 0%, #10b981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-weight: 800;
}
[data-theme="day"] .brand-text h1 span.logo-highlight {
  background: linear-gradient(135deg, #0284c7 0%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-tagline {
  font-size: 0.74rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  margin-top: 3px;
}
[data-theme="day"] .brand-tagline {
  color: #475569;
}

/* =========================================================================
   SUBJECT NAVIGATION DROPDOWN MENU
   Ultra-sleek, responsive dropdown replacing horizontal tab bar
   ========================================================================= */

.app-nav-container,
.app-nav-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  position: relative;
  min-width: 0;
}

.nav-dropdown-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1020;
}

/* Trigger Button - Subject Name Only */
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 12px 3px 6px;
  min-height: 34px;
  height: 34px;
  background: rgba(15, 23, 42, 0.75);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-full);
  color: var(--text-main);
  font-family: var(--font-heading);
  cursor: pointer;
  user-select: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  outline: none;
}

.nav-dropdown-trigger:hover {
  background: rgba(26, 38, 66, 0.85);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

.nav-dropdown-trigger:focus-visible {
  border-color: var(--chem-primary);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.3);
}

.nav-dropdown-wrapper.open .nav-dropdown-trigger {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

/* Trigger Inner Elements */
.nav-dropdown-trigger-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.08);
}
.nav-dropdown-trigger-icon svg {
  width: 14px;
  height: 14px;
}

.nav-dropdown-current-title {
  font-size: 0.90rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1;
}

.nav-dropdown-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
  margin-left: 2px;
}
.nav-dropdown-chevron svg {
  width: 14px;
  height: 14px;
}
.nav-dropdown-wrapper.open .nav-dropdown-chevron {
  transform: rotate(180deg);
  color: var(--text-main);
}

/* Trigger Subject Theme Accents */
.nav-dropdown-trigger.tab-chem {
  border-color: rgba(6, 182, 212, 0.45);
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.2);
}
.nav-dropdown-trigger.tab-chem:hover,
.nav-dropdown-wrapper.open .nav-dropdown-trigger.tab-chem {
  border-color: var(--chem-primary);
  box-shadow: 0 0 20px var(--chem-glow);
}
.nav-dropdown-trigger.tab-chem .nav-dropdown-trigger-icon {
  color: var(--chem-primary);
  background: rgba(6, 182, 212, 0.15);
}
.nav-dropdown-trigger.tab-chem .nav-dropdown-current-title {
  color: var(--chem-primary);
}
.nav-dropdown-trigger.tab-chem .nav-dropdown-current-badge {
  background: rgba(6, 182, 212, 0.2);
  color: var(--chem-primary);
  border-color: rgba(6, 182, 212, 0.4);
}

.nav-dropdown-trigger.tab-bio {
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.2);
}
.nav-dropdown-trigger.tab-bio:hover,
.nav-dropdown-wrapper.open .nav-dropdown-trigger.tab-bio {
  border-color: var(--bio-primary);
  box-shadow: 0 0 20px var(--bio-glow);
}
.nav-dropdown-trigger.tab-bio .nav-dropdown-trigger-icon {
  color: var(--bio-primary);
  background: rgba(16, 185, 129, 0.15);
}
.nav-dropdown-trigger.tab-bio .nav-dropdown-current-title {
  color: var(--bio-primary);
}
.nav-dropdown-trigger.tab-bio .nav-dropdown-current-badge {
  background: rgba(16, 185, 129, 0.2);
  color: var(--bio-primary);
  border-color: rgba(16, 185, 129, 0.4);
}

.nav-dropdown-trigger.tab-phys {
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);
}
.nav-dropdown-trigger.tab-phys:hover,
.nav-dropdown-wrapper.open .nav-dropdown-trigger.tab-phys {
  border-color: var(--phys-primary);
  box-shadow: 0 0 20px var(--phys-glow);
}
.nav-dropdown-trigger.tab-phys .nav-dropdown-trigger-icon {
  color: var(--phys-primary);
  background: rgba(99, 102, 241, 0.15);
}
.nav-dropdown-trigger.tab-phys .nav-dropdown-current-title {
  color: var(--phys-primary);
}
.nav-dropdown-trigger.tab-phys .nav-dropdown-current-badge {
  background: rgba(99, 102, 241, 0.2);
  color: var(--phys-primary);
  border-color: rgba(99, 102, 241, 0.4);
}

.nav-dropdown-trigger.tab-labs {
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.2);
}
.nav-dropdown-trigger.tab-labs:hover,
.nav-dropdown-wrapper.open .nav-dropdown-trigger.tab-labs {
  border-color: #38bdf8;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
}
.nav-dropdown-trigger.tab-labs .nav-dropdown-trigger-icon {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
}
.nav-dropdown-trigger.tab-labs .nav-dropdown-current-title {
  color: #38bdf8;
}
.nav-dropdown-trigger.tab-labs .nav-dropdown-current-badge {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.4);
}

.nav-dropdown-trigger.tab-quiz {
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2);
}
.nav-dropdown-trigger.tab-quiz:hover,
.nav-dropdown-wrapper.open .nav-dropdown-trigger.tab-quiz {
  border-color: var(--accent-amber);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.35);
}
.nav-dropdown-trigger.tab-quiz .nav-dropdown-trigger-icon {
  color: var(--accent-amber);
  background: rgba(245, 158, 11, 0.15);
}
.nav-dropdown-trigger.tab-quiz .nav-dropdown-current-title {
  color: var(--accent-amber);
}
.nav-dropdown-trigger.tab-quiz .nav-dropdown-current-badge {
  background: rgba(245, 158, 11, 0.2);
  color: var(--accent-amber);
  border-color: rgba(245, 158, 11, 0.4);
}

.nav-dropdown-trigger.tab-flashcards {
  border-color: rgba(236, 72, 153, 0.45);
  box-shadow: 0 4px 16px rgba(236, 72, 153, 0.2);
}
.nav-dropdown-trigger.tab-flashcards:hover,
.nav-dropdown-wrapper.open .nav-dropdown-trigger.tab-flashcards {
  border-color: #ec4899;
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.35);
}
.nav-dropdown-trigger.tab-flashcards .nav-dropdown-trigger-icon {
  color: #ec4899;
  background: rgba(236, 72, 153, 0.15);
}
.nav-dropdown-trigger.tab-flashcards .nav-dropdown-current-title {
  color: #ec4899;
}
.nav-dropdown-trigger.tab-flashcards .nav-dropdown-current-badge {
  background: rgba(236, 72, 153, 0.2);
  color: #ec4899;
  border-color: rgba(236, 72, 153, 0.4);
}

/* Dropdown Menu Panel */
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: 340px;
  max-width: calc(100vw - 32px);
  background: rgba(11, 17, 32, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              visibility 0.2s;
  z-index: 1050;
}

.nav-dropdown-wrapper.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 6px;
}
.nav-dropdown-header-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.nav-dropdown-header-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.nav-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  min-height: 52px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text-muted);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  user-select: none;
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
  transform: translateX(3px);
  border-color: rgba(255, 255, 255, 0.1);
}

.nav-item-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.nav-item-icon-box svg {
  width: 20px;
  height: 20px;
}

.nav-item-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.nav-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.nav-item-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.nav-item-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.nav-item-tagline {
  font-size: 0.76rem;
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.nav-item-check svg {
  width: 18px;
  height: 18px;
}

/* Subject Specific Colors in Dropdown */
.nav-dropdown-item.tab-chem .nav-item-icon-box { color: var(--chem-primary); }
.nav-dropdown-item.tab-bio .nav-item-icon-box { color: var(--bio-primary); }
.nav-dropdown-item.tab-phys .nav-item-icon-box { color: var(--phys-primary); }
.nav-dropdown-item.tab-labs .nav-item-icon-box { color: #38bdf8; }
.nav-dropdown-item.tab-quiz .nav-item-icon-box { color: var(--accent-amber); }
.nav-dropdown-item.tab-flashcards .nav-item-icon-box { color: #ec4899; }

/* Active Item Highlighting */
.nav-dropdown-item.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}
.nav-dropdown-item.active .nav-item-check {
  color: var(--chem-primary);
}

.nav-dropdown-item.tab-chem.active {
  background: rgba(6, 182, 212, 0.12);
  border-color: rgba(6, 182, 212, 0.4);
}
.nav-dropdown-item.tab-chem.active .nav-item-title { color: var(--chem-primary); }
.nav-dropdown-item.tab-chem.active .nav-item-badge {
  background: rgba(6, 182, 212, 0.2);
  color: var(--chem-primary);
  border-color: rgba(6, 182, 212, 0.4);
}
.nav-dropdown-item.tab-chem.active .nav-item-check { color: var(--chem-primary); }

.nav-dropdown-item.tab-bio.active {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.4);
}
.nav-dropdown-item.tab-bio.active .nav-item-title { color: var(--bio-primary); }
.nav-dropdown-item.tab-bio.active .nav-item-badge {
  background: rgba(16, 185, 129, 0.2);
  color: var(--bio-primary);
  border-color: rgba(16, 185, 129, 0.4);
}
.nav-dropdown-item.tab-bio.active .nav-item-check { color: var(--bio-primary); }

.nav-dropdown-item.tab-phys.active {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.4);
}
.nav-dropdown-item.tab-phys.active .nav-item-title { color: var(--phys-primary); }
.nav-dropdown-item.tab-phys.active .nav-item-badge {
  background: rgba(99, 102, 241, 0.2);
  color: var(--phys-primary);
  border-color: rgba(99, 102, 241, 0.4);
}
.nav-dropdown-item.tab-phys.active .nav-item-check { color: var(--phys-primary); }

.nav-dropdown-item.tab-labs.active {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.4);
}
.nav-dropdown-item.tab-labs.active .nav-item-title { color: #38bdf8; }
.nav-dropdown-item.tab-labs.active .nav-item-badge {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.4);
}
.nav-dropdown-item.tab-labs.active .nav-item-check { color: #38bdf8; }

.nav-dropdown-item.tab-quiz.active {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.4);
}
.nav-dropdown-item.tab-quiz.active .nav-item-title { color: var(--accent-amber); }
.nav-dropdown-item.tab-quiz.active .nav-item-badge {
  background: rgba(245, 158, 11, 0.2);
  color: var(--accent-amber);
  border-color: rgba(245, 158, 11, 0.4);
}
.nav-dropdown-item.tab-quiz.active .nav-item-check { color: var(--accent-amber); }

.nav-dropdown-item.tab-flashcards.active {
  background: rgba(236, 72, 153, 0.12);
  border-color: rgba(236, 72, 153, 0.4);
}
.nav-dropdown-item.tab-flashcards.active .nav-item-title { color: #ec4899; }
.nav-dropdown-item.tab-flashcards.active .nav-item-badge {
  background: rgba(236, 72, 153, 0.2);
  color: #ec4899;
  border-color: rgba(236, 72, 153, 0.4);
}
.nav-dropdown-item.tab-flashcards.active .nav-item-check { color: #ec4899; }

/* Dropdown Footer Actions (Teacher Implementation Guide & Staff PPTX) */
.nav-dropdown-footer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-dropdown-guide-action {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(99, 102, 241, 0.12));
  border: 1px solid rgba(6, 182, 212, 0.3);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-dropdown-guide-action:hover,
.btn-dropdown-guide-action:focus-visible {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.22), rgba(99, 102, 241, 0.22));
  border-color: rgba(6, 182, 212, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2);
}

.btn-dropdown-guide-action:active {
  transform: translateY(0);
}

.guide-action-icon {
  font-size: 1.1rem;
}

.guide-action-label {
  letter-spacing: 0.02em;
}

[data-theme="day"] .nav-dropdown-footer {
  border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="day"] .btn-dropdown-guide-action {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.1), rgba(79, 70, 229, 0.08));
  border-color: rgba(2, 132, 199, 0.3);
  color: #0f172a;
}

[data-theme="day"] .btn-dropdown-guide-action:hover,
[data-theme="day"] .btn-dropdown-guide-action:focus-visible {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.18), rgba(79, 70, 229, 0.16));
  border-color: rgba(2, 132, 199, 0.5);
}

/* Responsive Segmented Subject Switcher Bar */
.nav-subject-tabs {
  display: none;
  align-items: center;
  gap: 3px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  list-style: none;
  margin: 0;
}

[data-theme="day"] .nav-subject-tabs {
  background: rgba(241, 245, 249, 0.92);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

@media (min-width: 960px) {
  .nav-subject-tabs {
    display: inline-flex;
  }
  .nav-dropdown-wrapper {
    display: none;
  }
}

/* Desktop Subjects Dropdown */
.nav-subjects-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-subjects-dropdown-btn {
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  outline: none;
}

.nav-subjects-dropdown-btn .tab-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.nav-subjects-dropdown-btn .tab-pill-icon svg {
  width: 16px;
  height: 16px;
}

.nav-subjects-dropdown-btn .tab-pill-chevron {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.75;
}

.nav-subjects-dropdown-btn .tab-pill-chevron svg {
  width: 12px;
  height: 12px;
}

.nav-subjects-dropdown.open .nav-subjects-dropdown-btn .tab-pill-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-subjects-dropdown.open .nav-subjects-dropdown-btn:not(.active) {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-main);
  border-color: rgba(255, 255, 255, 0.16);
}

[data-theme="day"] .nav-subjects-dropdown.open .nav-subjects-dropdown-btn:not(.active) {
  background: rgba(0, 0, 0, 0.08);
  color: #0f172a;
  border-color: rgba(0, 0, 0, 0.12);
}

.subjects-active-sep {
  opacity: 0.45;
  margin: 0 1px;
}

.subjects-active-name {
  font-weight: 700;
}

@media (min-width: 960px) and (max-width: 1180px) {
  .nav-subjects-dropdown-btn .subjects-active-sep,
  .nav-subjects-dropdown-btn .subjects-label {
    display: none !important;
  }
}

.nav-subjects-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 330px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 85px);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 1100;
}

.nav-subjects-dropdown.open .nav-subjects-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .nav-subjects-dropdown:hover .nav-subjects-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .nav-subjects-dropdown:hover .nav-subjects-dropdown-btn .tab-pill-chevron {
    transform: rotate(180deg);
    opacity: 1;
  }
}

.nav-subject-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1.2;
}

.nav-subject-tab-pill:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="day"] .nav-subject-tab-pill {
  color: #475569;
}

[data-theme="day"] .nav-subject-tab-pill:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #0f172a;
}

.nav-subject-tab-pill.active {
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.nav-subject-tab-pill.tab-chem.active {
  background: var(--chem-primary);
  border-color: rgba(6, 182, 212, 0.6);
  box-shadow: 0 0 16px var(--chem-glow);
}
.nav-subject-tab-pill.tab-bio.active {
  background: var(--bio-primary);
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 0 16px var(--bio-glow);
}
.nav-subject-tab-pill.tab-phys.active {
  background: var(--phys-primary);
  border-color: rgba(99, 102, 241, 0.6);
  box-shadow: 0 0 16px var(--phys-glow);
}
.nav-subject-tab-pill.tab-labs.active {
  background: #0284c7;
  border-color: rgba(2, 132, 199, 0.6);
  box-shadow: 0 0 16px rgba(2, 132, 199, 0.35);
}
.nav-subject-tab-pill.tab-quiz.active {
  background: #d97706;
  border-color: rgba(217, 119, 6, 0.6);
  box-shadow: 0 0 16px rgba(217, 119, 6, 0.35);
}
.nav-subject-tab-pill.tab-flashcards.active {
  background: #db2777;
  border-color: rgba(219, 39, 119, 0.6);
  box-shadow: 0 0 16px rgba(219, 39, 119, 0.35);
}

.nav-tab-badge {
  font-size: 0.68rem;
  padding: 1px 5px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.22);
  font-family: var(--font-mono);
  font-weight: 700;
}

[data-theme="day"] .nav-subject-tab-pill:not(.active) .nav-tab-badge {
  background: rgba(0, 0, 0, 0.08);
  color: #64748b;
}

.nav-btn-lab-mode {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  font-weight: 700;
  text-decoration: none;
}
.nav-btn-lab-mode:hover {
  background: rgba(56, 189, 248, 0.22) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);
}

/* Empty Search / Filter State */
.empty-search-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  background: var(--bg-card);
  border: 1.5px dashed var(--border-color);
  border-radius: var(--radius-lg);
  margin: 12px 0 32px;
  animation: fadeIn 0.25s ease-out;
}
.empty-search-icon {
  font-size: 38px;
  margin-bottom: 12px;
  opacity: 0.85;
}
.empty-search-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 8px;
}
.empty-search-desc {
  font-size: 0.90rem;
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 0 18px;
  line-height: 1.5;
}
.btn-clear-search {
  cursor: pointer;
  background: var(--chem-gradient);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.3);
}
.btn-clear-search:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(6, 182, 212, 0.45);
}

/* Legacy Fallback Classes for Nav */
.nav-center-tabs {
  display: flex;
  background: rgba(15, 23, 42, 0.6);
  padding: 4px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  max-width: 100%;
}
.nav-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

/* Nav Actions */
.nav-right-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Nav Action Buttons (Mastery, Focus) - Sleek Compact Size */
.nav-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: var(--radius-full, 9999px);
  min-height: 30px;
  height: 30px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.nav-action-btn .nav-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  line-height: 1;
}

.nav-action-btn .nav-btn-icon svg {
  width: 13px;
  height: 13px;
}

.device-mode-toggle {
  display: flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full, 9999px);
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
  min-height: 30px;
  height: 30px;
}
.device-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 3px 8px;
  border-radius: var(--radius-full, 9999px);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  white-space: nowrap;
  line-height: 1.2;
}
.device-btn .device-btn-short {
  display: none;
}
.device-btn .device-btn-full {
  display: inline;
}
.device-btn:hover {
  color: var(--text-muted);
}
.device-btn.active {
  background: #38bdf8;
  color: #04111d;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

.icon-action-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: rgba(15, 23, 42, 0.6);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.icon-action-btn:hover {
  background: var(--bg-surface-elevated);
  color: var(--text-main);
  border-color: rgba(255, 255, 255, 0.2);
}
.icon-action-btn.active {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border-color: #38bdf8;
}
.icon-action-btn svg {
  width: 18px;
  height: 18px;
}

/* Main Content Container */
.app-main {
  flex: 1;
  padding: 24px 32px 64px;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
}

/* Hero Section */
.hero-banner {
  position: relative;
  padding: 38px 42px;
  border-radius: var(--radius-lg);
  background-color: #0c1222;
  background-image: 
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.16) 0%, transparent 60%),
    radial-gradient(rgba(255, 255, 255, 0.08) 1.2px, transparent 1.2px),
    linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.72) 100%);
  background-size: 100% 100%, 28px 28px, 100% 100%;
  border: 1px solid var(--border-color);
  border-top: 1.5px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  margin-bottom: 32px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.hero-banner::before {
  content: '';
  position: absolute;
  top: 14px;
  right: 18px;
  width: 24px;
  height: 24px;
  border-top: 2px solid rgba(56, 189, 248, 0.45);
  border-right: 2px solid rgba(56, 189, 248, 0.45);
  pointer-events: none;
}
.hero-banner::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 480px;
  height: 100%;
  background: radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.hero-platform-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  font-size: 0.8rem;
  font-weight: 600;
  color: #38bdf8;
  margin-bottom: 8px;
  width: fit-content;
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.15);
}
[data-theme="day"] .hero-platform-label {
  background: rgba(2, 132, 199, 0.08);
  border-color: rgba(2, 132, 199, 0.25);
  color: #0284c7;
}
.hero-platform-brand {
  font-weight: 800;
  letter-spacing: -0.01em;
}
.hero-platform-sep {
  opacity: 0.5;
}
.hero-platform-curriculum {
  color: var(--text-muted);
  font-weight: 500;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: rgba(56, 189, 248, 0.1);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.15);
}
.hero-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 12px;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, #ffffff 25%, #e2e8f0 65%, #93c5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
[data-theme="day"] .hero-title {
  background: linear-gradient(135deg, #0f172a 20%, #1e293b 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.hero-desc {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 820px;
  line-height: 1.6;
  margin-bottom: 24px;
}
.hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.metric-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  border-top: 1.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}
.metric-pill:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 16px rgba(56, 189, 248, 0.18);
}
.metric-num {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 700;
  color: #38bdf8;
}
.metric-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.2;
}

/* Filter & Search Bar */
.filter-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}
.search-box-wrapper {
  position: relative;
  flex: 1;
  min-width: 280px;
  max-width: 480px;
}
.search-icon-inside {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-dim);
  pointer-events: none;
}
.search-input {
  width: 100%;
  height: 46px;
  padding: 0 76px 0 46px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: all 0.2s ease;
}
.search-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.25);
}
.search-kbd-hint {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.14));
  padding: 3px 8px;
  border-radius: 6px;
  pointer-events: none;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s ease;
}
[data-theme="day"] .search-kbd-hint {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #64748b;
}
.empty-journey-guide {
  color: #38bdf8;
  font-weight: 600;
  font-size: 0.86rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
[data-theme="day"] .empty-journey-guide {
  color: #0284c7;
}
.unit-filters-scroll {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  overflow-x: visible;
  padding: 4px 0 6px;
}
.unit-filter-chip {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  user-select: none;
}
.unit-filter-chip:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
}
.unit-filter-chip.active {
  background: #1e293b;
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.4);
}

@media (max-width: 768px) {
  .unit-filter-chip {
    white-space: normal;
    text-align: center;
    padding: 6px 12px;
    font-size: 0.82rem;
  }
}

/* Modules Grid */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.module-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 2.5px solid var(--card-accent, #38bdf8);
  border-radius: var(--radius-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.module-card:focus-visible {
  outline: 3px solid var(--card-accent, #38bdf8);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.25), 0 16px 36px -4px rgba(0, 0, 0, 0.4);
  transform: translateY(-4px);
}
.module-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 100%);
  pointer-events: none;
}
.module-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--card-accent, #38bdf8);
  opacity: 0.8;
  transition: width 0.3s ease;
}
.module-card:hover {
  transform: translateY(-5px);
  background: var(--bg-card-hover);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6), 0 0 22px -4px var(--card-accent, rgba(56, 189, 248, 0.25));
}
.module-card:hover::before {
  width: 6px;
}

.module-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.module-code-badge {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  color: var(--card-accent, #38bdf8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.module-unit-tag {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-weight: 600;
}
.module-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-main);
  margin-top: 4px;
}
.module-phenomenon {
  font-size: 0.92rem;
  color: #f1f5f9;
  line-height: 1.55;
  display: block;
}
.module-lessons-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
}
.lesson-pill {
  font-size: 0.82rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.lesson-pill:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
}
.lesson-pill::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--card-accent, #38bdf8);
  box-shadow: 0 0 8px var(--card-accent, #38bdf8);
  flex-shrink: 0;
}
.module-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
}
.lab-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #38bdf8;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
  transition: all 0.2s ease;
}
.lab-indicator:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.5);
  color: #7dd3fc;
  transform: translateY(-1px);
}
.lab-indicator svg {
  width: 16px;
  height: 16px;
}
[data-theme="day"] .lab-indicator {
  color: #0369a1;
  background: #f0f9ff;
  border-color: #bae6fd;
}
[data-theme="day"] .lab-indicator:hover {
  background: #e0f2fe;
  color: #0284c7;
  border-color: #7dd3fc;
}
.view-module-arrow {
  color: var(--text-dim);
  transition: transform 0.2s ease, color 0.2s ease;
}
.module-card:hover .view-module-arrow {
  transform: translateX(4px);
  color: var(--text-main);
}

/* Modal Viewers & Workbench Panels - Universal Edge-to-Edge Full Browser Screen (Never in a Dialog Box) */
.modal-overlay,
.modal-overlay.modal-fullscreen,
.modal-overlay.is-fullscreen-lesson,
#module-modal-overlay,
[data-mode="smartboard"] .modal-overlay,
body.mode-smartboard .modal-overlay,
.fast-smartboard-mode .modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  background: var(--bg-surface, #070b15) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden !important;
  z-index: 200060 !important;
}

.modal-content-shell,
.modal-content-shell.is-fullscreen,
#module-modal-overlay .modal-content-shell,
[data-mode="smartboard"] .modal-content-shell,
body.mode-smartboard .modal-content-shell,
.fast-smartboard-mode .modal-content-shell {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 100vh !important;
  border-radius: 0 !important;
  border: none !important;
  border-top: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  animation: none !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--bg-surface, #0f172a) !important;
  overflow: hidden !important;
}

/* Exception: Progress Tracker student mastery report floats as a centered dialog */
#progress-modal-overlay {
  align-items: center !important;
  justify-content: center !important;
  background: rgba(7, 11, 21, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  padding: 20px !important;
}
#progress-modal-overlay .modal-content-shell {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 820px !important;
  min-width: 320px !important;
  height: auto !important;
  max-height: 90vh !important;
  min-height: auto !important;
  border-radius: var(--radius-lg, 16px) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-xl, 0 20px 50px rgba(0, 0, 0, 0.5)) !important;
}

.modal-content-shell .modal-header,
.modal-content-shell.is-fullscreen .modal-header,
#module-modal-overlay .modal-header,
[data-mode="smartboard"] .modal-content-shell .modal-header,
body.mode-smartboard .modal-content-shell .modal-header,
.fast-smartboard-mode .modal-content-shell .modal-header {
  padding: 10px 24px !important;
  border-radius: 0 !important;
  border-bottom: 1.5px solid var(--border-color, rgba(255, 255, 255, 0.12)) !important;
  background: rgba(15, 23, 42, 0.97) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.modal-content-shell .modal-tabs-header,
.modal-content-shell.is-fullscreen .modal-tabs-header,
#module-modal-overlay .modal-tabs-header,
[data-mode="smartboard"] .modal-content-shell .modal-tabs-header,
body.mode-smartboard .modal-content-shell .modal-tabs-header,
.fast-smartboard-mode .modal-content-shell .modal-tabs-header {
  padding: 0 24px !important;
  flex-shrink: 0 !important;
  background: rgba(10, 16, 30, 0.92) !important;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.modal-content-shell .modal-body,
.modal-content-shell.is-fullscreen .modal-body,
#module-modal-overlay .modal-body,
[data-mode="smartboard"] .modal-content-shell .modal-body,
body.mode-smartboard .modal-content-shell .modal-body,
.fast-smartboard-mode .modal-content-shell .modal-body {
  flex: 1 1 auto !important;
  max-height: none !important;
  height: calc(100vh - 110px) !important;
  padding: 16px 24px 28px 24px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.modal-content-shell.is-fullscreen #tab-lesson-sim-container,
[data-mode="smartboard"] .modal-content-shell #tab-lesson-sim-container,
body.mode-smartboard .modal-content-shell #tab-lesson-sim-container,
.fast-smartboard-mode .modal-content-shell #tab-lesson-sim-container {
  min-height: calc(100vh - 180px) !important;
  width: 100% !important;
}

/* Day Mode High-Contrast Fullscreen & Modal Overrides */
html[data-theme="day"] .modal-overlay,
[data-theme="day"] .modal-overlay,
[data-theme="day"] .modal-overlay.modal-fullscreen,
[data-theme="day"] .modal-overlay.is-fullscreen-lesson,
[data-theme="day"][data-mode="smartboard"] .modal-overlay,
[data-theme="day"].mode-smartboard .modal-overlay,
[data-theme="day"].fast-smartboard-mode .modal-overlay,
body.mode-smartboard[data-theme="day"] .modal-overlay,
[data-theme="day"] body.mode-smartboard .modal-overlay {
  background: #ffffff !important;
}

html[data-theme="day"] .modal-content-shell,
[data-theme="day"] .modal-content-shell,
[data-theme="day"] .modal-content-shell.is-fullscreen,
[data-theme="day"][data-mode="smartboard"] .modal-content-shell,
[data-theme="day"].mode-smartboard .modal-content-shell,
[data-theme="day"].fast-smartboard-mode .modal-content-shell,
body.mode-smartboard[data-theme="day"] .modal-content-shell,
[data-theme="day"] body.mode-smartboard .modal-content-shell {
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="day"] .modal-header,
[data-theme="day"] .modal-header,
[data-theme="day"] .modal-content-shell .modal-header,
[data-theme="day"] .modal-content-shell.is-fullscreen .modal-header,
[data-theme="day"][data-mode="smartboard"] .modal-content-shell .modal-header,
[data-theme="day"].mode-smartboard .modal-content-shell .modal-header,
[data-theme="day"].fast-smartboard-mode .modal-content-shell .modal-header,
body.mode-smartboard[data-theme="day"] .modal-content-shell .modal-header,
[data-theme="day"] body.mode-smartboard .modal-content-shell .modal-header,
[data-theme="day"] .fast-smartboard-mode .modal-content-shell .modal-header {
  background: #ffffff !important;
  border-bottom: 2px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="day"] .modal-tabs-header,
[data-theme="day"] .modal-tabs-header,
[data-theme="day"] .modal-content-shell .modal-tabs-header,
[data-theme="day"] .modal-content-shell.is-fullscreen .modal-tabs-header,
[data-theme="day"][data-mode="smartboard"] .modal-content-shell .modal-tabs-header,
[data-theme="day"].mode-smartboard .modal-content-shell .modal-tabs-header,
[data-theme="day"].fast-smartboard-mode .modal-content-shell .modal-tabs-header,
body.mode-smartboard[data-theme="day"] .modal-content-shell .modal-tabs-header,
[data-theme="day"] body.mode-smartboard .modal-content-shell .modal-tabs-header,
[data-theme="day"] .fast-smartboard-mode .modal-content-shell .modal-tabs-header {
  background: #f8fafc !important;
  border-bottom: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="day"] .modal-content-shell .modal-body,
[data-theme="day"] .modal-content-shell.is-fullscreen .modal-body,
[data-theme="day"][data-mode="smartboard"] .modal-content-shell .modal-body,
[data-theme="day"].mode-smartboard .modal-content-shell .modal-body,
[data-theme="day"].fast-smartboard-mode .modal-content-shell .modal-body {
  background: #ffffff !important;
  color: #0f172a !important;
}

[data-theme="day"] .modal-header h2,
[data-theme="day"] .modal-header h3,
[data-theme="day"] .modal-header p,
[data-theme="day"] .modal-header .modal-title,
[data-theme="day"] .modal-header .lesson-breadcrumb {
  color: #0f172a !important;
}

[data-theme="day"] .modal-tab-btn {
  color: #475569 !important;
}
[data-theme="day"] .modal-tab-btn:hover {
  color: #0f172a !important;
}
[data-theme="day"] .modal-tab-btn.active {
  color: #0284c7 !important;
  border-bottom: 2px solid #0284c7 !important;
}

.modal-header {
  padding: 10px 24px;
  background: rgba(15, 23, 42, 0.97);
  border-bottom: 1.5px solid var(--border-color, rgba(255, 255, 255, 0.12));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
}
.modal-header-titles {
  display: flex;
  flex-direction: column;
}
.modal-category-badge {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: #38bdf8;
}
.modal-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
}
.modal-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
}

/* Modal Skip Navigation Link */
.modal-skip-link {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 200099;
  background: #0284c7;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}
.modal-skip-link:focus {
  transform: translateY(0);
  outline: 2px solid #38bdf8;
}

/* Modal Header Actions Group */
.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-header-action {
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.btn-header-annotate {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}
.btn-header-fullscreen,
.btn-header-share,
.btn-header-lesson-plan {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}
.btn-header-back {
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  cursor: pointer;
}
.btn-header-back .back-label-short {
  display: none;
}

/* Accessible Mobile Chapter Overflow Menu */
.modal-overflow-wrap {
  position: relative;
  display: none;
}
.btn-header-overflow {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-header-overflow:hover,
.btn-header-overflow[aria-expanded="true"] {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
}
.modal-overflow-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 200100;
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 4px;
}
.modal-overflow-menu[hidden] {
  display: none !important;
}
.overflow-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  min-height: 44px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-main, #f1f5f9);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.overflow-menu-item:hover,
.overflow-menu-item:focus {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  outline: none;
}
[data-theme="day"] .modal-overflow-menu {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}
[data-theme="day"] .overflow-menu-item {
  color: #1e293b;
}
[data-theme="day"] .overflow-menu-item:hover,
[data-theme="day"] .overflow-menu-item:focus {
  background: rgba(2, 132, 199, 0.1);
  color: #0284c7;
}

/* Classroom Presenter Tip Cheatsheet Button & Last Opened Badge */
.btn-shortcuts-cheatsheet {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.btn-shortcuts-cheatsheet:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
}
.last-opened-time {
  font-size: 0.76rem;
  color: #38bdf8;
  font-weight: 600;
  margin-left: 6px;
}
[data-theme="day"] .last-opened-time {
  color: #0284c7;
}

.modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 24px 28px 24px;
  box-sizing: border-box;
  width: 100%;
}

/* Module Detail Tabs */
.modal-tabs-header {
  display: flex;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  padding: 0 24px;
  background: rgba(10, 16, 30, 0.92);
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
}
.modal-tab-btn {
  padding: 14px 20px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}
.modal-tab-btn:hover {
  color: var(--text-main);
}
.modal-tab-btn.active {
  color: #38bdf8;
}
.modal-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 12px;
  right: 12px;
  height: 2.5px;
  border-radius: 9999px;
  background: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.8);
}

/* Virtual Lab Sandbox */
.lab-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.lab-canvas-area {
  position: relative;
  width: 100%;
  background: #090d16;
  border: 1px solid var(--border-color);
  border-top: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.7), 0 10px 30px rgba(0, 0, 0, 0.4);
}
.lab-canvas-area::before {
  content: '+';
  position: absolute;
  top: 10px;
  left: 14px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.25);
  pointer-events: none;
  z-index: 6;
}
.lab-canvas-area::after {
  content: '+';
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.25);
  pointer-events: none;
  z-index: 6;
}
.lab-canvas-area canvas {
  display: block;
  width: 100%;
  height: 480px;
  touch-action: none;
}
.lab-controls-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  background: rgba(15, 23, 42, 0.7);
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}
.control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.control-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
}
.control-val {
  font-family: var(--font-mono);
  color: #38bdf8;
}
.custom-slider {
  width: 100%;
  accent-color: #38bdf8;
  cursor: pointer;
}
.lab-action-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
  grid-column: 1 / -1;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:active {
  transform: scale(0.97) !important;
}
.btn-primary {
  background-image: 
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(6, 182, 212, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-secondary {
  background: var(--bg-surface-elevated);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.btn-secondary.active {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #ffffff;
  border-color: rgba(165, 180, 252, 0.6);
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font-weight: 700;
}
.btn-accent {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Virtual Laboratories Suite Navigation Pills & 4K Badges */
.lab-nav-pills-container {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.lab-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 10px;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-elevated);
  color: var(--text-main);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.lab-nav-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.lab-nav-btn.btn-primary {
  background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 18px rgba(6, 182, 212, 0.45);
}

.lab-nav-btn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.6);
}

.lab-btn-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 2px 6px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  overflow: hidden;
}

.lab-btn-icon-wrapper svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lab-nav-btn:hover .lab-btn-icon-wrapper {
  transform: scale(1.08);
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

.lab-nav-btn:hover .lab-btn-icon-wrapper svg {
  transform: scale(1.06);
}

.lab-nav-btn.btn-primary .lab-btn-icon-wrapper {
  background: rgba(12, 74, 110, 0.65);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.3);
}

.lab-btn-title {
  display: inline-block;
  line-height: 1.25;
}

/* Day Mode / Light Theme Adaptations for 4K Lab Navigation */
[data-theme="day"] .lab-nav-btn {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #1e293b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="day"] .lab-nav-btn:hover {
  background: #f8fafc;
  border-color: #38bdf8;
  box-shadow: 0 6px 16px rgba(56, 189, 248, 0.18);
}

[data-theme="day"] .lab-nav-btn.btn-primary {
  background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.35);
}

[data-theme="day"] .lab-btn-icon-wrapper {
  background: #f1f5f9;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 1px 3px rgba(0, 0, 0, 0.08);
}

[data-theme="day"] .lab-nav-btn.btn-primary .lab-btn-icon-wrapper {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Virtual Laboratories Classified Navigation (Che/Phy/Bio & A-Z Sorted) */
.lab-nav-header-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.lab-filter-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lab-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(30, 41, 59, 0.6);
  color: var(--text-muted);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.lab-filter-pill:hover {
  background: rgba(51, 65, 85, 0.8);
  color: var(--text-main);
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-1px);
}

.lab-filter-pill.active {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
}

.lab-filter-pill[data-subject-filter="chem"].active {
  background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.4);
}

.lab-filter-pill[data-subject-filter="phys"].active {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}

.lab-filter-pill[data-subject-filter="bio"].active {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.lab-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 9999px;
  font-size: 0.76rem;
  font-family: var(--font-mono);
  font-weight: 800;
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.lab-sort-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px dashed rgba(56, 189, 248, 0.35);
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: 0.02em;
}

.lab-classified-sections {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.lab-subject-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  transition: all 0.3s ease;
}

.lab-subject-group.lab-group-chem {
  border-left: 4px solid #06b6d4;
}

.lab-subject-group.lab-group-phys {
  border-left: 4px solid #6366f1;
}

.lab-subject-group.lab-group-bio {
  border-left: 4px solid #10b981;
}

.lab-subject-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.lab-subject-info {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.lab-subject-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.lab-subject-badge.badge-chem {
  background: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
  border: 1px solid rgba(6, 182, 212, 0.4);
}

.lab-subject-badge.badge-phys {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.4);
}

.lab-subject-badge.badge-bio {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.badge-dot {
  opacity: 0.4;
}

.badge-count {
  font-size: 0.76rem;
  opacity: 0.9;
}

.lab-subject-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.lab-alphabetical-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 800;
  color: #94a3b8;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Day theme adjustments for classified lab navigation */
[data-theme="day"] .lab-nav-header-controls {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

[data-theme="day"] .lab-filter-pill {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

[data-theme="day"] .lab-filter-pill:hover {
  background: #e2e8f0;
  color: #0f172a;
}

[data-theme="day"] .lab-subject-group {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="day"] .lab-subject-header {
  border-bottom-color: #e2e8f0;
}

/* Universal Touch Screen Pinch-to-Zoom Controller HUD */
.touch-zoom-hud {
  position: fixed;
  bottom: 24px;
  right: 84px; /* Positioned left of .sb-toolbar-toggle (width 48px at right: 24px) with a clean 12px gap */
  z-index: 200080;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  transition: bottom 0.28s cubic-bezier(0.16, 1, 0.3, 1), right 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Elevate HUD when smartboard toolbar is docked or floating */
body.sb-docked-active .touch-zoom-hud,
body:has(.smartboard-pen-bar.sb-is-docked.visible:not(.sb-hidden)) .touch-zoom-hud {
  bottom: 72px;
}

body.sb-toolbar-open .touch-zoom-hud,
body:has(#smartboard-pen-bar.visible:not(.sb-minimized):not(.sb-is-docked)) .touch-zoom-hud {
  bottom: 88px;
}

body.sb-docked-active .sb-toolbar-toggle {
  bottom: 72px;
}

.touch-zoom-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 0 16px rgba(56, 189, 248, 0.2);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.touch-zoom-hud.is-active-zoom .touch-zoom-pill {
  border-color: #38bdf8;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.7), 0 0 22px rgba(56, 189, 248, 0.45);
}

.touch-zoom-hud.is-shrunk .touch-zoom-pill {
  border-color: #f59e0b;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.7), 0 0 22px rgba(245, 158, 11, 0.45);
}

.touch-zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  cursor: pointer;
  transition: all 0.2s ease;
}

.touch-zoom-btn:hover {
  background: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  transform: scale(1.08);
}

.touch-zoom-btn:active {
  transform: scale(0.94);
}

.touch-zoom-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.4);
  color: #e2e8f0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 68px;
  justify-content: center;
}

.touch-zoom-badge:hover {
  background: rgba(56, 189, 248, 0.18);
  border-color: #38bdf8;
  color: #38bdf8;
}

/* Dedicated Reset & Center Button (Always visible and quick to activate) */
.touch-zoom-btn-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto;
  padding: 6px 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-family: var(--font-heading, "Inter", sans-serif);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.touch-zoom-btn-reset:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  color: #38bdf8;
  transform: scale(1.05);
}

.touch-zoom-btn-reset:active {
  transform: scale(0.95);
}

/* When view is panned or scaled, reset button illuminates to guide user back to 100% center */
.touch-zoom-btn-reset.is-deviated,
.touch-zoom-hud.is-active-zoom .touch-zoom-btn-reset {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  box-shadow: 0 2px 12px rgba(14, 165, 233, 0.5), 0 0 10px rgba(56, 189, 248, 0.35);
}

/* Dedicated Hide / Dismiss Button */
.touch-zoom-btn-hide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 2px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.touch-zoom-btn-hide:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.45);
  color: #f87171;
  transform: scale(1.1);
}

.touch-zoom-btn-hide:active {
  transform: scale(0.92);
}

/* Compact Collapsed Restore Trigger Pill */
.touch-zoom-restore-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 0 16px rgba(56, 189, 248, 0.2);
  color: #cbd5e1;
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-select: none;
}

.touch-zoom-restore-pill:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: #38bdf8;
  color: #38bdf8;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 14px 28px -4px rgba(0, 0, 0, 0.7), 0 0 22px rgba(56, 189, 248, 0.4);
}

.touch-zoom-restore-pill:active {
  transform: scale(0.95);
}

.touch-zoom-restore-pill.is-deviated {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.5) 0%, rgba(14, 165, 233, 0.4) 100%);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.5);
}

.touch-zoom-preset-hide-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 7px 10px;
  margin-top: 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted, #94a3b8);
  font-family: var(--font-heading, "Inter", sans-serif);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.touch-zoom-preset-hide-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.touch-zoom-popover {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(15, 23, 42, 0.96);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7);
  width: 230px;
}

.touch-zoom-popover-title {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  margin-bottom: 2px;
}

.touch-zoom-preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.touch-zoom-preset-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.touch-zoom-preset-opt:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
}

.touch-zoom-preset-opt.preset-center-opt {
  border-color: rgba(56, 189, 248, 0.45);
  background: rgba(56, 189, 248, 0.14);
  color: #38bdf8;
  font-weight: 800;
}

.preset-tag {
  font-size: 0.65rem;
  color: #94a3b8;
  font-family: var(--font-heading);
}

.preset-tag-center {
  background: rgba(14, 165, 233, 0.25) !important;
  color: #38bdf8 !important;
  padding: 1px 5px;
  border-radius: 4px;
}

.touch-zoom-preset-center-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-family: var(--font-heading, "Inter", sans-serif);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
}

.touch-zoom-preset-center-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.6);
}

.touch-zoom-hint {
  font-size: 0.7rem;
  color: #64748b;
  line-height: 1.35;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 6px;
}

/* Day theme adjustments for Touch Zoom HUD */
[data-theme="day"] .touch-zoom-pill {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
}

[data-theme="day"] .touch-zoom-btn {
  background: #f1f5f9;
  color: #1e293b;
}

[data-theme="day"] .touch-zoom-btn:hover {
  background: #e2e8f0;
  color: #0284c7;
}

[data-theme="day"] .touch-zoom-badge {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

[data-theme="day"] .touch-zoom-btn-reset {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

[data-theme="day"] .touch-zoom-btn-reset.is-deviated {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  color: #ffffff;
}

[data-theme="day"] .touch-zoom-popover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

[data-theme="day"] .touch-zoom-preset-opt {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #0f172a;
}

[data-theme="day"] .touch-zoom-btn-hide {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #64748b;
}

[data-theme="day"] .touch-zoom-btn-hide:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #ef4444;
}

[data-theme="day"] .touch-zoom-restore-pill {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
}

[data-theme="day"] .touch-zoom-restore-pill:hover {
  background: #f8fafc;
  border-color: #0284c7;
  color: #0284c7;
}

[data-theme="day"] .touch-zoom-restore-pill.is-deviated {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  color: #ffffff;
}

[data-theme="day"] .touch-zoom-preset-hide-btn {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #64748b;
}

[data-theme="day"] .touch-zoom-preset-hide-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #ef4444;
}

/* Smartboard Annotation Overlay Canvas */
#smartboard-draw-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200070 !important;
  touch-action: none !important;
}
#smartboard-draw-canvas.drawing-active {
  pointer-events: auto;
  cursor: crosshair;
  z-index: 200080 !important;
  touch-action: none !important;
}

/* Floating Smartboard Pen Bar - Collapsible / Auto-Hide */
.smartboard-pen-bar {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200100 !important;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid rgba(56, 189, 248, 0.4);
  border-radius: var(--radius-full, 9999px);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Pen Bar Visible State */
.smartboard-pen-bar.visible,
body.mode-smartboard .smartboard-pen-bar:not(.sb-hidden),
.fast-smartboard-mode .smartboard-pen-bar:not(.sb-hidden) {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Explicitly Dismissed / Hidden Toolbar */
.smartboard-pen-bar.sb-hidden,
.smartboard-pen-bar.sb-modal-docked {
  transform: translateY(140%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Smartboard Docked State & Push Behavior */
.smartboard-pen-bar.sb-is-docked {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100vw !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-top: 2px solid rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.6) !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  transform: translateY(0) !important;
  background: rgba(15, 23, 42, 0.97) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  z-index: 200100 !important;
}

[data-theme="day"] .smartboard-pen-bar.sb-is-docked {
  background: rgba(255, 255, 255, 0.97) !important;
  border-top-color: rgba(2, 132, 199, 0.4) !important;
  box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.12) !important;
}

/* Push page content so the docked toolbar never overlaps or obscures content */
body.sb-docked-active #app-root,
body.sb-docked-active main,
body.sb-docked-active .app-main-content {
  padding-bottom: 76px !important;
  transition: padding-bottom 0.25s ease;
}

/* Push modal content so chapter modal footers and lessons are never obscured */
body.sb-docked-active .module-modal,
body.sb-docked-active .module-modal-container {
  padding-bottom: 76px !important;
}

body.sb-docked-active .module-modal-content {
  margin-bottom: 76px !important;
  max-height: calc(100vh - 120px) !important;
}

body.modal-open .sb-toolbar-toggle {
  opacity: 0.9 !important;
  pointer-events: auto !important;
}

/* Floating Smartboard Toggle Button */
.sb-toolbar-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200100 !important;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 14px rgba(14, 165, 233, 0.4);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background 0.2s ease;
}
.sb-toolbar-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(14, 165, 233, 0.6);
}
.sb-toolbar-toggle:active {
  transform: scale(0.95);
}
.sb-toolbar-toggle.active {
  background: linear-gradient(135deg, #059669, #10b981);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 14px rgba(16, 185, 129, 0.4);
}

/* Floating Dragging State */
.smartboard-pen-bar.is-dragging {
  cursor: grabbing !important;
  transition: none !important;
  opacity: 0.95;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), 0 0 24px rgba(56, 189, 248, 0.35) !important;
}

/* Smartboard Measurement Tools: Calibrated Science Ruler & 180° Protractor */
.sb-ruler-widget,
.sb-protractor-widget {
  position: fixed !important;
  z-index: 200090 !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.smartboard-pen-bar.is-dragging * {
  cursor: grabbing !important;
}

/* Dedicated Drag Handles */
.sb-drag-handle {
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px 4px 2px;
  color: var(--text-muted, #94a3b8);
  touch-action: none;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}
.sb-drag-handle:hover {
  color: #38bdf8;
  background: rgba(255, 255, 255, 0.06);
}

/* Minimized Floating Bubble */
.smartboard-pen-bar.sb-minimized {
  padding: 6px 12px 6px 8px;
  border-radius: var(--radius-full, 9999px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 16px rgba(56, 189, 248, 0.25);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.smartboard-pen-bar.sb-minimized:hover {
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6), 0 0 24px rgba(56, 189, 248, 0.4);
  border-color: rgba(56, 189, 248, 0.7);
  transform: scale(1.04);
}
.sb-mini-content {
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.sb-mini-drag-grip {
  cursor: grab;
  display: flex;
  align-items: center;
  padding: 2px 4px;
  color: var(--text-muted, #94a3b8);
  transition: color 0.15s ease;
}
.sb-mini-drag-grip:hover {
  color: #38bdf8;
}
.sb-mini-icon-wrapper {
  position: relative;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.sb-mini-color-dot {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(15, 23, 42, 0.95);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}
.sb-mini-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: 0.02em;
  padding-right: 2px;
}
.sb-mini-expand-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-muted, #94a3b8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}
.sb-mini-expand-btn:hover {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
  transform: scale(1.1);
}

/* Smartboard Color Dots */
.sb-colors-container {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
}
.sb-color-btn {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  padding: 0;
  outline: none;
  position: relative;
}
.sb-color-btn:hover {
  transform: scale(1.18);
}
.sb-color-btn.active {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.95), 0 0 0 4px #ffffff, 0 0 10px rgba(255, 255, 255, 0.4);
}

/* Floating Stroke Resizer Popover */
.sb-size-popover {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.15);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1002;
  animation: popoverFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.sb-size-popover::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 7px;
  border-style: solid;
  border-color: rgba(15, 23, 42, 0.96) transparent transparent transparent;
}
.sb-size-popover.popover-below {
  bottom: auto;
  top: calc(100% + 14px);
  animation: popoverFadeInDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.sb-size-popover.popover-below::after {
  top: auto;
  bottom: 100%;
  border-color: transparent transparent rgba(15, 23, 42, 0.96) transparent;
}
@keyframes popoverFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes popoverFadeInDown {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.sb-size-preview-box {
  width: 100%;
  height: 48px;
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sb-size-presets {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.sb-preset-btn {
  flex: 1;
  padding: 4px 0;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}
.sb-preset-btn:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: #ffffff;
}
.sb-preset-btn.active {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

/* Specific Active Styling for Highlighter Tool */
#sb-tool-highlighter.active {
  background: rgba(250, 204, 21, 0.2);
  border-color: #facc15;
  color: #facc15;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.45);
}

@media (max-width: 680px) {
  .smartboard-pen-bar {
    bottom: 12px;
    right: 10px;
    left: 10px;
    padding: 6px 10px;
    max-width: calc(100vw - 20px);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    transform: translateY(140%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .smartboard-pen-bar.visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .sb-toolbar-toggle {
    bottom: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
  }
  .touch-zoom-hud {
    bottom: 72px; /* Positioned safely above .sb-toolbar-toggle to avoid collision */
    right: 16px;
  }
  body.sb-docked-active .touch-zoom-hud {
    bottom: 124px;
  }
  body.sb-toolbar-open .touch-zoom-hud,
  body:has(#smartboard-pen-bar.visible:not(.sb-minimized):not(.sb-is-docked)) .touch-zoom-hud {
    bottom: 136px;
  }
  .touch-zoom-pill {
    padding: 3px 5px;
    gap: 3px;
  }
  .touch-zoom-btn {
    width: 32px;
    height: 32px;
  }
  .touch-zoom-badge {
    padding: 5px 8px;
    min-width: 58px;
    font-size: 0.76rem;
  }
  .touch-zoom-btn-reset {
    padding: 5px 9px;
    font-size: 0.72rem;
  }
  .smartboard-pen-bar::-webkit-scrollbar {
    display: none;
  }
  .smartboard-pen-bar .icon-action-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
  .sb-color-btn {
    width: 18px;
    height: 18px;
    min-width: 18px;
  }
  .sb-size-popover {
    position: fixed;
    bottom: 74px;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
  }

  /* Mobile Chapter Chrome Header (<768px) */
  .modal-header {
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .modal-header-titles {
    flex: 1 1 100%;
    min-width: 0;
  }
  .modal-header-titles .modal-title {
    font-size: 1.1rem;
    line-height: 1.25;
    word-break: break-word;
  }
  .modal-header-actions {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .btn-header-action {
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
  }
  .btn-header-action .btn-action-label {
    display: none; /* Collapse text labels into compact icon buttons on mobile */
  }
  .btn-header-back .back-label-long {
    display: none;
  }
  .btn-header-back .back-label-short {
    display: inline;
  }
}

@media (max-width: 600px) {
  .modal-overflow-wrap {
    display: inline-block;
  }
  .modal-header-actions .btn-header-annotate,
  .modal-header-actions .btn-header-lesson-plan,
  .modal-header-actions .btn-header-fullscreen {
    display: none !important;
  }
  .modal-header-actions {
    overflow-x: visible;
  }
}

@media (max-width: 480px) {
  .touch-zoom-hud {
    bottom: 68px;
    right: 12px;
  }
  .touch-zoom-btn-reset .touch-zoom-reset-txt {
    display: none;
  }
  .touch-zoom-btn-reset {
    width: 32px;
    height: 32px;
    padding: 0;
  }
}

/* ==========================================================================
   Teacher Presentation Suite: Timer, Curtain & Spotlight Tools
   ========================================================================== */

/* Divider in Smartboard Toolbar */
.sb-tools-divider {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 2px;
  flex-shrink: 0;
}

/* Tool Button Active States */
#sb-tool-timer.active {
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: #f59e0b !important;
  color: #f59e0b !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.45) !important;
}

#sb-tool-curtain.active {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: #10b981 !important;
  color: #10b981 !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.45) !important;
}

#sb-tool-spotlight.active {
  background: rgba(56, 189, 248, 0.2) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45) !important;
}

/* Classroom Countdown Timer & Stopwatch Widget */
.sb-timer-widget {
  position: fixed;
  z-index: 200095 !important;
  width: 320px;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(56, 189, 248, 0.4);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(56, 189, 248, 0.2);
  padding: 14px 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  display: none;
  flex-direction: column;
  gap: 12px;
  animation: popoverFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-timer-widget.is-dragging {
  cursor: grabbing !important;
  transition: none !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(56, 189, 248, 0.35) !important;
}

.sb-timer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: grab;
  padding: 2px 2px 6px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sb-timer-title-box {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f8fafc;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}

.sb-timer-btn-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted, #94a3b8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.15s ease;
  padding: 0;
}
.sb-timer-btn-icon:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #ffffff;
}

/* Tabs */
.sb-timer-tabs {
  display: flex;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 3px;
  gap: 4px;
}
.sb-timer-tab {
  flex: 1;
  padding: 6px 0;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  transition: all 0.15s ease;
}
.sb-timer-tab.active {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
}

/* Digital Time Readout */
.sb-timer-display-box {
  background: rgba(2, 6, 23, 0.7);
  border: 1.5px solid rgba(56, 189, 248, 0.25);
  border-radius: 14px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.sb-timer-display {
  font-family: var(--font-mono, monospace);
  font-size: 2.7rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.05em;
  line-height: 1;
  text-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
}

.sb-timer-sub-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* Alarm Pulse Animation */
@keyframes timerAlarmPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); border-color: #ef4444; }
  50% { transform: scale(1.03); box-shadow: 0 0 25px 8px rgba(239, 68, 68, 0.5); border-color: #f59e0b; }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); border-color: #ef4444; }
}

.sb-timer-widget.sb-timer-alarm .sb-timer-display-box {
  animation: timerAlarmPulse 0.8s infinite ease-in-out;
  background: rgba(239, 68, 68, 0.15);
}
.sb-timer-widget.sb-timer-alarm .sb-timer-display {
  color: #ef4444;
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.7);
}

/* Presets & Controls */
.sb-timer-presets {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.sb-timer-preset {
  padding: 6px 0;
  font-size: 0.74rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}
.sb-timer-preset:hover {
  background: rgba(56, 189, 248, 0.15);
  color: #ffffff;
  border-color: rgba(56, 189, 248, 0.35);
}
.sb-timer-preset.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.sb-timer-adjust-row {
  display: flex;
  gap: 6px;
}
.sb-timer-adj-btn {
  flex: 1;
  padding: 6px 0;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sb-timer-adj-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.sb-timer-ctrls {
  display: flex;
  gap: 8px;
}
.sb-timer-main-btn {
  flex: 1.4;
  height: 42px;
  font-size: 0.95rem;
  font-weight: 800;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.sb-timer-main-btn.btn-start {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}
.sb-timer-main-btn.btn-start:hover {
  background: #059669;
  transform: translateY(-1px);
}
.sb-timer-main-btn.btn-pause {
  background: #f59e0b;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}
.sb-timer-sec-btn {
  flex: 1;
  height: 42px;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f1f5f9;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sb-timer-sec-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}
.sb-timer-sec-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Stopwatch Splits */
.sb-stopwatch-laps {
  max-height: 120px;
  overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
}
.sb-lap-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
}

/* Screen Reveal Curtain (Window Blind / Shade Tool) */
.sb-curtain-overlay {
  position: fixed;
  inset: 0;
  z-index: 200095 !important;
  pointer-events: none;
}

.sb-curtain-shade {
  position: absolute;
  background: #080c17;
  pointer-events: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85);
  transition: opacity 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.sb-curtain-handle {
  position: absolute;
  background: rgba(15, 23, 42, 0.98);
  border: 2px solid #38bdf8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 14px rgba(56, 189, 248, 0.3);
  touch-action: none;
  cursor: grab;
  z-index: 10;
}
.sb-curtain-handle.is-dragging {
  cursor: grabbing !important;
  background: #0284c7;
  border-color: #ffffff;
}

.sb-curtain-handle-horizontal {
  left: 0;
  right: 0;
  height: 44px;
}
.sb-curtain-handle-vertical {
  top: 0;
  bottom: 0;
  width: 44px;
  flex-direction: column;
}

.sb-curtain-info {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f8fafc;
  font-size: 0.85rem;
  font-weight: 700;
}
.sb-curtain-pct-badge {
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  padding: 2px 8px;
  border-radius: 6px;
}

.sb-curtain-grip-ridges {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #94a3b8);
}
.sb-curtain-ridge {
  width: 3px;
  height: 18px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
}

.sb-curtain-btn {
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.sb-curtain-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
}
.sb-curtain-close-btn {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}
.sb-curtain-close-btn:hover {
  background: #ef4444;
  color: #ffffff;
}

/* Spotlight Focus Mode */
.sb-spotlight-overlay {
  position: fixed;
  inset: 0;
  z-index: 200095 !important;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.sb-spotlight-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.sb-spotlight-hud {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.94);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  border-radius: var(--radius-full, 9999px);
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(56, 189, 248, 0.2);
  z-index: 10;
  user-select: none;
}
.sb-spotlight-title {
  color: #38bdf8;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.sb-spotlight-presets {
  display: flex;
  gap: 4px;
}
.sb-spotlight-preset {
  padding: 4px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  transition: all 0.15s ease;
}
.sb-spotlight-preset:hover {
  background: rgba(56, 189, 248, 0.15);
  color: #ffffff;
}
.sb-spotlight-preset.active {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
}
.sb-spotlight-exit-btn {
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 9999px;
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sb-spotlight-exit-btn:hover {
  background: #ef4444;
  color: #ffffff;
}

/* Quiz & Exam Generator Styles */
.quiz-generator-view {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.quiz-config-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.quiz-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 20px;
}
.select-input, .number-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
}
.select-input:focus, .number-input:focus {
  border-color: #38bdf8;
}

/* Question Cards */
.question-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 20px;
}
.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.q-badge {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
}
.q-text {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 20px;
}
.q-options-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.q-option-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  text-align: left;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.q-option-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
.q-option-btn.selected {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
}
.q-option-btn.correct {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.2) !important;
}
.q-option-btn.incorrect {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.2) !important;
}
.q-option-letter {
  font-family: var(--font-mono);
  font-weight: 700;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.explanation-box {
  margin-top: 18px;
  padding: 18px;
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, 0.8);
  border-left: 4px solid #38bdf8;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Quiz Generator Scope Checklist & Subject Cards */
.subject-choice-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.subject-choice-card.active {
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
}
.module-header-toggle:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}
.lesson-checkbox-label:hover {
  background: rgba(255, 255, 255, 0.05);
}
.btn-scope-action:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #ffffff;
}

/* =========================================================================
   PRINT VIEW HIGH-CONTRAST MASTER STYLESHEET (WCAG AAA SOLID BLACK)
   ========================================================================= */
@media print {
  /* Hide application navigation, interactive controls, toolbars, and buttons */
  .app-navbar,
  .smartboard-pen-bar,
  .quiz-config-card,
  .btn-print,
  .nav-tab-btn,
  .nav-dropdown-wrapper,
  .bg-glow-container,
  #btn-exit-print,
  .print-actions-bar,
  .no-print,
  .btn:not(.q-option-btn),
  button:not(.q-option-btn),
  .device-mode-toggle,
  .theme-toggle-btn,
  .interactive-sim-viewport,
  .modal-action-bar,
  .sim-control-panel {
    display: none !important;
  }

  /* Force pure white paper and solid crisp black text universally */
  html,
  body {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  #app-root,
  .app-main {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Universal text and box shadows removed for clean print output */
  *,
  *::before,
  *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }

  /* Printable Standard Exam Sheet Container */
  .print-test-container {
    display: block !important;
    background: #ffffff !important;
    color: #000000 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    border: none !important;
  }

  .print-test-container * {
    color: #000000 !important;
  }

  /* Exam Sheet Header */
  .print-header {
    border-bottom: 2px solid #000000 !important;
    padding-bottom: 14px !important;
    margin-bottom: 24px !important;
  }

  .print-header h1,
  .print-header div,
  .print-header span {
    color: #000000 !important;
  }

  /* Question Cards in Exam Sheet */
  .print-q-card {
    page-break-inside: avoid !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #cbd5e1 !important;
    padding-bottom: 16px !important;
    background: #ffffff !important;
    color: #000000 !important;
  }

  .print-q-card * {
    color: #000000 !important;
  }

  /* Teacher Answer Key & Solution Boxes */
  .teacher-solution-card,
  .print-test-container div[style*="background: #f8fafc"],
  .print-test-container div[style*="background:#f8fafc"] {
    background: #ffffff !important;
    border: 1px solid #94a3b8 !important;
    page-break-inside: avoid !important;
    color: #000000 !important;
  }

  .teacher-solution-card *,
  .print-test-container div[style*="background: #f8fafc"] * {
    color: #000000 !important;
  }

  /* Interactive Screen Quiz Cards (Fallback when printed directly from Practice/Timed mode) */
  .question-card {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #000000 !important;
    page-break-inside: avoid !important;
    margin-bottom: 20px !important;
  }

  .question-header {
    border-bottom: 1px solid #e2e8f0 !important;
  }

  .q-badge {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #000000 !important;
  }

  .q-text,
  .q-text * {
    color: #000000 !important;
  }

  .q-option-btn {
    display: flex !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #000000 !important;
    cursor: default !important;
  }

  .q-option-btn * {
    color: #000000 !important;
  }

  .q-option-letter {
    background: #f1f5f9 !important;
    border: 1px solid #94a3b8 !important;
    color: #000000 !important;
  }

  .explanation-box {
    background: #f8fafc !important;
    border: 1px solid #94a3b8 !important;
    border-left: 4px solid #0284c7 !important;
    color: #000000 !important;
  }

  .explanation-box * {
    color: #000000 !important;
  }

  .print-cer-box {
    background: #fafafa !important;
    border: 1.5px solid #000000 !important;
    color: #000000 !important;
    page-break-inside: avoid !important;
  }

  .print-cer-box * {
    color: #000000 !important;
  }

  /* Mathematical Typesetting & KaTeX in Print: 100% Solid Pure Black & Proportional Sizing */
  .katex,
  .katex *,
  .math-rendered,
  .math-rendered *,
  .math-katex-wrapper,
  .math-katex-wrapper *,
  .math-num-lit,
  .math-text,
  .math-delim,
  .math-op,
  .math-func,
  .math-sup,
  .math-sub,
  .math-root-index,
  .math-italic,
  .math-emf,
  .math-arrow-line,
  .math-arrow-label,
  .math-vec-arrow,
  .math-num,
  .math-denom,
  .math-sqrt-stem {
    color: #000000 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #000000 !important;
  }

  .math-rendered,
  .math-katex-wrapper,
  .katex,
  .katex-display,
  .math-block-wrapper,
  .math-display {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .katex-display,
  .math-display {
    margin: 6px 0 !important;
  }

  .math-num {
    border-bottom: 1.5px solid #000000 !important;
  }

  .math-sqrt-stem {
    border-top: 1.5px solid #000000 !important;
  }

  .math-radical-svg,
  .math-radical-svg path {
    stroke: #000000 !important;
    color: #000000 !important;
  }

  .math-accent-bar {
    text-decoration-color: #000000 !important;
  }

  /* Printable STEM Examination Math Rules */
  .print-test-container .print-q-card > div:first-child .katex,
  .print-test-container .print-q-card > div:first-child .math-rendered,
  .print-test-container .print-q-card > div:first-child .math-katex-wrapper {
    font-size: 1.02em !important;
    font-weight: 600 !important;
  }

  .print-test-container .print-q-card .math-block-wrapper,
  .print-test-container .print-q-card .math-display,
  .print-test-container .print-q-card .katex-display {
    margin: 6px 0 !important;
    padding: 2px 0 !important;
    font-size: 1.05rem !important;
    color: #000000 !important;
    text-align: center !important;
  }

  .print-test-container .print-q-card div[style*="grid-template-columns"] span .katex,
  .print-test-container .print-q-card div[style*="grid-template-columns"] span .math-rendered,
  .print-test-container .print-q-card div[style*="grid-template-columns"] span .math-katex-wrapper {
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
  }

  .print-test-container .print-q-card div[style*="grid-template-columns"] .math-display,
  .print-test-container .print-q-card div[style*="grid-template-columns"] .katex-display {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.95rem !important;
  }

  .print-test-container .teacher-solution-card .katex,
  .print-test-container .teacher-solution-card .math-rendered,
  .print-test-container .teacher-solution-card .math-katex-wrapper {
    font-size: 0.92rem !important;
    color: #000000 !important;
  }

  .print-test-container .teacher-solution-card .math-block-wrapper,
  .print-test-container .teacher-solution-card .math-display,
  .print-test-container .teacher-solution-card .katex-display {
    margin: 4px 0 !important;
    padding: 2px 0 !important;
    font-size: 0.95rem !important;
    color: #000000 !important;
  }

  /* OMR Scantron Bubble Sheet in Print Mode */
  .print-bubble-sheet {
    page-break-before: always !important;
    break-before: page !important;
    background: #ffffff !important;
    border: 2px solid #000000 !important;
  }

  .print-bubble-sheet.standalone-sheet,
  .print-solution-key.standalone-sheet {
    page-break-before: auto !important;
    break-before: auto !important;
    margin-top: 0 !important;
  }

  .omr-sections-grid {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .omr-section-card {
    border: 1.5px solid #000000 !important;
    border-radius: 4px !important;
    padding: 8px 10px !important;
    background: #ffffff !important;
    width: fit-content !important;
    max-width: 145px !important;
    min-width: 135px !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    text-align: left !important;
    margin: 0 !important;
  }

  .omr-q-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    margin-bottom: 5px !important;
    margin-right: auto !important;
    font-family: var(--font-mono), monospace !important;
    font-size: 0.84rem !important;
    width: fit-content !important;
    text-align: left !important;
  }

  .omr-q-num {
    font-weight: 800 !important;
    min-width: 24px !important;
    text-align: left !important;
    color: #000000 !important;
    margin-right: 2px !important;
  }

  .omr-bubbles-group {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .omr-bubble {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 17px !important;
    height: 17px !important;
    border-radius: 50% !important;
    border: 1.5px solid #000000 !important;
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    color: #000000 !important;
    background: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .print-two-col {
    column-count: 2 !important;
    column-gap: 32px !important;
    column-rule: 1px solid #cbd5e1 !important;
  }

  .print-two-col .print-q-card {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
}

/* OMR Bubble & Paper-Saver Preview Rules (Screen Mode) */
.omr-sections-grid {
  display: flex;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-left: 0;
  margin-right: auto;
}

.omr-section-card {
  border: 1.5px solid #000000;
  border-radius: 4px;
  padding: 8px 10px;
  background: #ffffff;
  width: fit-content;
  max-width: 145px;
  min-width: 135px;
  text-align: left;
  margin: 0;
}

.omr-q-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  margin-bottom: 5px;
  margin-right: auto;
  font-family: var(--font-mono), monospace;
  font-size: 0.84rem;
  width: fit-content;
  text-align: left;
}

.omr-q-num {
  font-weight: 800;
  min-width: 24px;
  text-align: left;
  color: #000000;
  margin-right: 2px;
}

.omr-bubbles-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  margin-left: 0;
  margin-right: auto;
}

.omr-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid #000000;
  font-size: 0.66rem;
  font-weight: 800;
  color: #000000;
  background: #ffffff;
}

.print-two-col {
  column-count: 2;
  column-gap: 32px;
  column-rule: 1px solid #e2e8f0;
}

.print-two-col .print-q-card {
  break-inside: avoid;
  page-break-inside: avoid;
}


/* =========================================================================
   UNIVERSAL RESPONSIVE NAVBAR ADAPTATIONS ACROSS ALL VIEWS
   ========================================================================= */

/* Tier 1: Laptops and Desktops with Display Scaling (1180px - 1420px) */
@media (max-width: 1420px) {
  .tagline-extra {
    display: none !important;
  }
  .device-btn .device-btn-full {
    display: none;
  }
  .device-btn .device-btn-short {
    display: inline;
  }
  .nav-action-btn {
    padding: 3px 8px;
    font-size: 0.75rem;
    gap: 4px;
  }
  .app-navbar {
    padding: 0 16px;
    gap: 10px;
  }
}

/* Tier 2: Compact Laptops & Large Tablets (980px - 1179px) */
@media (max-width: 1180px) {
  .brand-text .brand-tagline {
    display: none !important;
  }
  .nav-dropdown-trigger {
    padding: 3px 10px 3px 6px;
    min-height: 32px;
    height: 32px;
    gap: 6px;
  }
  .nav-dropdown-current-title {
    font-size: 0.86rem;
  }
  .app-navbar {
    padding: 0 14px;
    gap: 8px;
  }
  .device-btn {
    padding: 3px 6px;
    font-size: 0.72rem;
  }
}

/* Tier 3: Tablets in Portrait & Mid-size Devices (768px - 979px) */
@media (max-width: 980px) {
  .app-navbar {
    padding: 0 12px;
    height: 68px;
    min-height: 68px;
    gap: 8px;
  }
  .brand-logo-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .brand-text h1 {
    font-size: 1.08rem;
  }
  .brand-text .brand-tagline {
    display: none !important;
  }
  .nav-action-btn .nav-btn-label {
    display: none;
  }
  .nav-action-btn {
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .theme-toggle-text {
    display: none;
  }
  .theme-toggle-btn {
    padding: 4px 8px;
  }
  .device-btn {
    padding: 4px 6px;
    font-size: 0.72rem;
  }
  .nav-dropdown-menu {
    width: 310px;
  }

  .app-main {
    padding: 16px;
  }
  .hero-banner {
    padding: 24px;
  }
  .hero-title {
    font-size: 1.8rem;
  }
  .modules-grid {
    grid-template-columns: 1fr;
  }
  .lab-controls-panel {
    grid-template-columns: 1fr;
  }
  [class*="-layout"],
  .harmonic-layout,
  .punnett-layout,
  .gas-layout,
  .titration-layout,
  .microscope-layout,
  .periodic-layout,
  .ptable-layout,
  .vsepr-layout,
  .respiration-layout,
  .magnetism-layout,
  .equilibrium-layout,
  .calorimetry-layout,
  .rot-layout,
  .gel-layout,
  .cond-layout,
  .collig-layout,
  .eco-layout,
  .enzyme-layout,
  .fluids-layout,
  .optics-layout,
  .decay-layout,
  .org-layout,
  .electrochem-layout,
  .photoelectric-layout,
  .photo-layout,
  .wave-layout,
  .beer-layout,
  .neuro-layout,
  .circuits-layout,
  .orbital-layout,
  .arduino-grid-split {
    grid-template-columns: 1fr !important;
  }
}

/* Tier 4: Small Tablets & Large Phones (600px - 767px) */
@media (max-width: 768px) {
  .brand-title-prefix {
    display: none;
  }
  .device-mode-toggle {
    display: none !important;
  }
  .app-navbar {
    padding: 0 12px;
    gap: 8px;
    height: 66px;
    min-height: 66px;
  }
  .nav-dropdown-wrapper {
    position: relative;
  }
  .nav-dropdown-menu {
    width: 290px;
  }
}

/* Tier 5: Mobile Phones (< 600px) */
@media (max-width: 600px) {
  /* Prevent horizontal slipping/scrolling */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  /* Safe Area Aware Top Navigation */
  .app-navbar {
    height: auto;
    min-height: 58px;
    padding: max(8px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px));
    flex-wrap: wrap;
    gap: 8px 10px;
  }
  .brand-section {
    gap: 8px;
    flex: 1 1 auto;
    max-width: none;
  }
  .brand-logo-box {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }
  .brand-text h1 {
    font-size: 0.94rem;
    line-height: 1.2;
    white-space: normal;
  }
  .brand-title-prefix {
    display: none;
  }
  .nav-right-controls {
    flex: 0 0 auto;
    gap: 6px;
  }
  .nav-action-btn {
    min-height: 38px;
    padding: 4px 10px;
    font-size: 0.74rem;
  }
  .icon-action-btn {
    width: 38px;
    height: 38px;
  }
  .device-mode-toggle {
    display: none !important;
  }
  .app-nav-container,
  .app-nav-center {
    order: 3;
    width: 100%;
    margin-top: 2px;
  }
  .nav-dropdown-wrapper {
    width: 100%;
    position: static;
  }
  .nav-dropdown-trigger {
    width: 100%;
    justify-content: space-between;
    min-height: 44px;
    padding: 6px 14px 6px 12px;
  }
  .nav-dropdown-menu {
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    top: calc(100% + 4px);
    transform: translateY(-8px);
  }
  .nav-dropdown-wrapper.open .nav-dropdown-menu {
    transform: translateY(0);
  }

  /* Safe Area Aware Main Viewport */
  .app-main {
    padding: 16px max(12px, env(safe-area-inset-left, 0px)) max(28px, calc(16px + env(safe-area-inset-bottom, 0px))) max(12px, env(safe-area-inset-right, 0px)) !important;
  }

  /* Hero Banner & Curriculum Metrics (2x2 Balanced Grid) */
  .hero-banner {
    padding: 18px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 20px !important;
  }
  .hero-title {
    font-size: clamp(1.3rem, 5.2vw, 1.65rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }
  .hero-desc {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }
  .hero-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .metric-pill {
    padding: 8px 12px !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
  }
  .metric-num {
    font-size: 1.15rem !important;
  }
  .metric-label {
    font-size: 0.74rem !important;
  }

  /* Search Bar & Unit Filters Touch Strip */
  .filter-search-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }
  .search-box-wrapper {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .search-input {
    height: 44px !important;
    padding: 0 42px 0 40px !important;
    font-size: 0.92rem !important;
  }
  .search-kbd-hint {
    display: none !important;
  }
  .unit-filters-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 4px 2px 8px !important;
    gap: 8px !important;
  }
  .unit-filters-scroll::-webkit-scrollbar {
    display: none !important;
  }
  .unit-filter-chip {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-height: 38px !important;
    padding: 8px 14px !important;
    font-size: 0.82rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Modules Grid - Seamless Single Column Mobile Feed */
  .modules-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .module-card {
    border-radius: 12px !important;
  }
  .module-card-banner {
    height: 135px !important;
  }
  .module-card-body {
    padding: 14px 16px !important;
  }
  .lesson-row-card {
    min-height: 44px !important;
    padding: 8px 10px !important;
  }

  /* Lesson Viewer Modal & Mobile Tabs Strip */
  .modal-content-shell,
  #module-modal-overlay .modal-content-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100% !important;
    max-height: 100dvh !important;
  }
  .modal-header {
    padding: max(8px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px)) !important;
    gap: 8px !important;
  }
  .modal-title {
    font-size: clamp(1rem, 3.8vw, 1.2rem) !important;
    line-height: 1.25 !important;
  }
  .modal-close-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .modal-tabs-header {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0 10px !important;
  }
  .modal-tabs-header::-webkit-scrollbar {
    display: none !important;
  }
  .modal-tab-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-height: 44px !important;
    padding: 11px 13px !important;
    font-size: 0.85rem !important;
  }
  .modal-body {
    padding: 12px 12px max(16px, calc(16px + env(safe-area-inset-bottom, 0px))) 12px !important;
  }

  /* Virtual Lab Workbench Scaling on Mobile */
  .lab-container {
    gap: 12px !important;
  }
  .lab-canvas-area canvas {
    height: min(320px, 48vh) !important;
    max-height: 48vh !important;
  }
  .lab-controls-panel {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    gap: 12px !important;
  }
  .custom-slider,
  .range-slider {
    min-height: 38px !important;
  }
  .range-slider::-webkit-slider-thumb {
    width: 28px !important;
    height: 28px !important;
  }

  /* Interactive Split Simulations */
  .interactive-split-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .sim-canvas-box {
    min-height: 220px !important;
  }
  .sim-canvas-box canvas {
    height: min(240px, 42vh) !important;
  }
  .interactive-lesson-pills-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .modal-lesson-select {
    min-height: 44px !important;
  }

  /* Quiz Generator & Practice Studio */
  .quiz-config-card {
    padding: 16px 14px !important;
    border-radius: 14px !important;
  }
  .quiz-config-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 14px !important;
  }
  .question-card {
    padding: 14px 12px !important;
    border-radius: 12px !important;
  }
  .q-text {
    font-size: 0.98rem !important;
    line-height: 1.45 !important;
    margin-bottom: 14px !important;
  }
  .q-options-grid {
    gap: 8px !important;
  }
  .q-option-btn {
    min-height: 48px !important;
    padding: 10px 14px !important;
    font-size: 0.92rem !important;
    gap: 10px !important;
  }
  .q-option-letter {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    flex-shrink: 0 !important;
  }

  /* Question Bank, Custom Question & Diagram Picker Sheets */
  .custom-modal-overlay {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  .custom-modal-shell,
  .diag-picker-modal-shell,
  .custom-q-modal,
  .master-bank-modal,
  .lp-modal-shell,
  .lms-share-modal-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100% !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .custom-modal-header {
    padding: max(12px, env(safe-area-inset-top, 0px)) 14px 12px 14px !important;
  }
  .custom-modal-body {
    padding: 14px 12px !important;
  }
  .custom-modal-footer {
    padding: 12px 14px max(14px, calc(10px + env(safe-area-inset-bottom, 0px))) 14px !important;
  }
  .diag-picker-search-bar {
    padding: 10px 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .diag-picker-search-input {
    min-width: 0 !important;
    width: 100% !important;
    height: 42px !important;
    font-size: 0.9rem !important;
  }
  #diag-picker-track-filters {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
    gap: 6px !important;
    scrollbar-width: none !important;
  }
  #diag-picker-track-filters::-webkit-scrollbar {
    display: none !important;
  }
  .btn-diag-filter {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-height: 36px !important;
  }
  .diag-picker-grid {
    grid-template-columns: 1fr !important;
    padding: 12px 10px !important;
    gap: 12px !important;
  }
  .diag-picker-card {
    min-height: 280px !important;
  }
  .diag-picker-preview-box {
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
  }
  .cq-option-row {
    padding: 10px 12px !important;
    min-height: 48px !important;
  }
  .cq-option-row input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
    accent-color: #10b981 !important;
    flex-shrink: 0 !important;
  }
  .cq-option-input {
    min-height: 40px !important;
    font-size: 0.95rem !important;
  }

  /* Flashcards 3D Interactive Layout */
  .flashcard-inner {
    height: min(440px, 62vh) !important;
  }
  .flashcard-face {
    padding: 16px 14px !important;
    border-radius: 14px !important;
  }

  /* Floating Toolbars & Controls Safe Insets */
  .touch-zoom-hud {
    bottom: max(16px, calc(68px + env(safe-area-inset-bottom, 0px))) !important;
    right: max(12px, calc(12px + env(safe-area-inset-right, 0px))) !important;
  }
  .sb-toolbar-toggle {
    bottom: max(16px, calc(16px + env(safe-area-inset-bottom, 0px))) !important;
    right: max(14px, calc(14px + env(safe-area-inset-right, 0px))) !important;
  }
  .btn-focus-mode-exit {
    top: max(12px, calc(12px + env(safe-area-inset-top, 0px))) !important;
    right: max(12px, calc(12px + env(safe-area-inset-right, 0px))) !important;
    min-height: 44px !important;
    padding: 8px 14px !important;
  }

  /* Prevent iOS Safari Viewport Auto-Zoom on Form Inputs */
  input, select, textarea,
  .search-input,
  .diag-picker-search-input,
  .cq-input,
  .cq-option-input,
  .modal-lesson-select {
    font-size: 16px !important;
  }

  /* KaTeX Math Equations Horizontal Scroll Guard */
  .katex-display {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 0 !important;
  }
  .katex {
    max-width: 100% !important;
  }

  /* Question Data Tables Responsive Mobile Wrapper */
  .q-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    margin: 10px 0 !important;
    border-radius: 8px !important;
  }
  .q-data-table {
    min-width: 280px !important;
    font-size: 0.85rem !important;
  }
  .q-data-table th, .q-data-table td {
    padding: 8px 10px !important;
  }

  /* Question Visual Models & Diagrams Mobile Fit */
  .q-diagram-container {
    padding: 8px 6px !important;
    margin: 10px 0 !important;
    border-radius: 8px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .q-diagram-caption {
    font-size: 0.82rem !important;
    margin-bottom: 6px !important;
    line-height: 1.35 !important;
  }
  .q-diagram-svg svg {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px !important;
  }
  .q-diagram-image {
    max-height: 220px !important;
  }

  /* Scientific Pocket Calculator Mobile Bottom Sheet */
  .calculator-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 85vh !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.7) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  .calculator-modal.minimized {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 9999px !important;
  }

  /* Lab Report Dossier Modal Mobile Sheet */
  .lab-report-modal-overlay {
    padding: 0 !important;
  }
  .lab-report-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100% !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .lab-report-toolbar {
    padding: max(10px, env(safe-area-inset-top, 0px)) 12px 10px !important;
  }
  .lab-report-body {
    padding: 12px !important;
  }
  .lab-report-sheet {
    padding: 14px 12px !important;
    border-radius: 6px !important;
  }

  /* Live Assessment Header & Question Picker Mobile Bar */
  .exam-header-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 10px !important;
  }
  .picker-header-bar {
    padding: 10px 12px !important;
  }
  .picker-stats-pill {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 0.8rem !important;
    width: 100% !important;
  }

  /* ==========================================================================
     Comprehensive Mobile Optimization & Touch Ergonomics
     ========================================================================== */

  /* 1. Virtual Laboratory Header & Swipeable Action Strip */
  .lab-header-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  .lab-header-bar > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .lab-header-bar > div:first-child span {
    font-size: 0.88rem !important;
    line-height: 1.25 !important;
  }
  .lab-header-bar > div:last-child {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .lab-header-bar > div:last-child::-webkit-scrollbar {
    display: none !important;
  }
  .lab-header-bar .btn,
  .lab-header-bar button {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-height: 40px !important;
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
  }
  .lab-view-switcher {
    flex-shrink: 0 !important;
  }
  .lab-view-switcher .btn {
    min-height: 36px !important;
    padding: 5px 10px !important;
    font-size: 0.78rem !important;
  }

  /* 2. Virtual Lab Canvas & Overlays Responsive Layout */
  .lab-canvas-area {
    height: auto !important;
    min-height: 280px !important;
  }
  .lab-canvas-area canvas {
    width: 100% !important;
    height: min(340px, 48vh) !important;
    max-height: 48vh !important;
  }
  .lab-canvas-area [style*="top: 14px; left: 16px; right: 16px"] {
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
  }
  .lab-canvas-area [style*="top: 14px; left: 16px; right: 16px"] > div {
    padding: 4px 8px !important;
    border-radius: 8px !important;
  }
  .lab-canvas-area [style*="font-size: 1.25rem"] {
    font-size: 1rem !important;
  }
  .lab-canvas-area [style*="bottom: 12px; left: 16px"] {
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
    font-size: 0.68rem !important;
    padding: 3px 8px !important;
  }
  [id*="-photo-overlay"] [style*="grid-template-columns: repeat(3, 1fr)"],
  [id*="-photo-overlay"] [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
  }

  /* 3. Lab Controls Sub-Grids & Touch Sliders */
  .lab-controls-panel [style*="grid-template-columns: 1fr 1fr"],
  .lab-controls-panel [style*="grid-template-columns: 1fr 1fr 1fr"],
  .lab-controls-panel [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .lab-controls-panel input[type="range"] {
    min-height: 44px !important;
    padding: 8px 0 !important;
  }

  /* 4. Classified 46-Lab Catalog Navigation on Mobile */
  .lab-nav-header-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .lab-filter-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
    width: 100% !important;
    gap: 6px !important;
  }
  .lab-filter-pills::-webkit-scrollbar {
    display: none !important;
  }
  .lab-filter-pill {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-height: 40px !important;
    padding: 6px 12px !important;
    font-size: 0.82rem !important;
  }
  .lab-sort-badge {
    align-self: flex-start !important;
    font-size: 0.72rem !important;
    padding: 4px 10px !important;
  }
  .lab-subject-group {
    padding: 14px 12px !important;
    border-radius: 14px !important;
  }
  .lab-subject-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .lab-nav-pills-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
  .lab-nav-btn {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
    padding: 6px 14px 6px 8px !important;
    font-size: 0.85rem !important;
    justify-content: flex-start !important;
  }
  .lab-btn-icon-wrapper {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  /* 5. Post-Lab Checkpoints Touch Optimization */
  .lab-checkpoint-section {
    padding: 16px 12px !important;
    border-radius: 12px !important;
    margin-top: 18px !important;
  }
  .lab-checkpoint-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .lab-checkpoint-title {
    font-size: 1rem !important;
  }
  .lab-checkpoint-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .lab-question-card {
    padding: 14px 12px !important;
  }
  .lab-option-btn {
    min-height: 48px !important;
    padding: 10px 12px !important;
    font-size: 0.88rem !important;
  }

  /* 6. Teacher Implementation Guide Sheet on Mobile */
  .teacher-guide-modal-overlay {
    padding: 0 !important;
  }
  .teacher-guide-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .tg-modal-header {
    padding: max(12px, env(safe-area-inset-top, 0px)) 14px 12px !important;
  }
  .tg-downloads-banner {
    padding: 12px 14px !important;
  }
  .tg-downloads-banner > div {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .tg-downloads-banner .btn-tg-download {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    min-height: 44px !important;
  }
  .tg-modal-nav {
    padding: 6px 8px 0 !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .tg-modal-nav::-webkit-scrollbar {
    display: none !important;
  }
  .tg-tab-btn {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
    min-height: 40px !important;
  }
  .tg-modal-body {
    padding: 14px 12px max(16px, calc(16px + env(safe-area-inset-bottom, 0px))) !important;
  }

  /* 7. Home Portal Switcher & Action Banners on Mobile */
  .view-mode-toggle-group {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .view-mode-btn {
    justify-content: center !important;
    padding: 8px 6px !important;
    font-size: 0.78rem !important;
    min-height: 38px !important;
  }
  .hero-quick-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .hero-quick-actions .btn-quick-hero {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    min-height: 44px !important;
  }
  .continue-learning-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .continue-learning-actions .btn-continue-lab,
  .continue-learning-actions .btn-continue-resume {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    min-height: 44px !important;
  }
  .presenter-tip-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }

  /* 8. Lab Report Dossier Tables on Mobile */
  .lab-report-sheet table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
  .lab-report-sheet [style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* 9. Safety Protocol & SDS Cards on Mobile */
  .safety-grid,
  .sds-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .sds-search-bar {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* 10. Footer Extra Links Mobile Wrap */
  .footer-extra-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 10px !important;
    font-size: 0.8rem !important;
  }
  .footer-extra-links a {
    padding: 4px 6px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ==========================================================================
   Flashcards 3D Interactive & Educational Layout Styles
   ========================================================================== */
.flashcard-scene {
  perspective: 1400px;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  user-select: none;
}

.flashcard-inner {
  position: relative;
  width: 100%;
  height: 480px;
  text-align: center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg, 20px);
}

@media (max-width: 768px) {
  .flashcard-inner {
    height: 520px;
  }
}

@media (max-width: 480px) {
  .flashcard-inner {
    height: 540px;
  }
}

.flashcard-inner.is-flipped {
  transform: rotateY(180deg);
}

.flashcard-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-lg, 20px);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 28px;
  background: linear-gradient(145deg, rgba(22, 30, 48, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.25);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

@media (max-width: 480px) {
  .flashcard-face {
    padding: 18px 18px;
  }
}

.flashcard-front {
  background: linear-gradient(145deg, rgba(22, 30, 48, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
}

.flashcard-back {
  transform: rotateY(180deg);
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.98) 0%, rgba(18, 28, 44, 0.98) 100%);
  border-color: rgba(16, 185, 129, 0.35);
}

.flashcard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.flashcard-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  font-size: 0.82rem;
  color: var(--text-dim);
}

.flashcard-front-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px 10px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.flashcard-back-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 10px 0;
  padding: 6px 8px 12px 0;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.4) rgba(15, 23, 42, 0.4);
}

.flashcard-back-body::-webkit-scrollbar {
  width: 6px;
}
.flashcard-back-body::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.4);
  border-radius: 4px;
}
.flashcard-back-body::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.35);
  border-radius: 4px;
}
.flashcard-back-body::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.6);
}

.flashcard-formula-box {
  max-width: 100%;
  overflow-x: auto;
  background: rgba(10, 15, 28, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 12px 0;
  text-align: center;
  scrollbar-width: thin;
}

.flashcard-formula-box::-webkit-scrollbar {
  height: 4px;
}
.flashcard-formula-box::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.3);
  border-radius: 2px;
}

/* Filter controls card & inputs */
.flashcard-filter-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 20px);
  padding: 20px 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fc-select-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 180px;
}

.fc-select-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.fc-custom-select {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  padding: 9px 14px;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: all 0.2s ease;
  width: 100%;
  cursor: pointer;
}

.fc-custom-select:hover {
  border-color: rgba(56, 189, 248, 0.4);
}

.fc-custom-select:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

.fc-search-input {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  padding: 9px 14px;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: all 0.2s ease;
  width: 100%;
}

.fc-search-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

.fc-search-input::placeholder {
  color: var(--text-dim);
}


/* Leitner Spaced Repetition Progress Ribbon */
.leitner-ribbon-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 20px);
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.leitner-ribbon-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.leitner-progress-track {
  display: flex;
  height: 10px;
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.leitner-track-segment {
  height: 100%;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.leitner-track-segment.seg-box1 {
  background: linear-gradient(90deg, #f43f5e 0%, #fb7185 100%);
}

.leitner-track-segment.seg-box2 {
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.leitner-track-segment.seg-box3 {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.leitner-legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.leitner-legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.leitner-legend-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border-color: rgba(255, 255, 255, 0.2);
}

.leitner-legend-pill.active {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #38bdf8;
}

.leitner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.leitner-dot.dot-red {
  background: #f43f5e;
  box-shadow: 0 0 6px #f43f5e;
}

.leitner-dot.dot-amber {
  background: #f59e0b;
  box-shadow: 0 0 6px #f59e0b;
}

.leitner-dot.dot-green {
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

/* Leitner Card Status Badges */
.leitner-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.leitner-status-badge.box1 {
  background: rgba(244, 63, 94, 0.15);
  border: 1px solid rgba(244, 63, 94, 0.35);
  color: #fb7185;
}

.leitner-status-badge.box2 {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.leitner-status-badge.box3 {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}

/* Leitner Spaced Repetition Action Bar */
.leitner-action-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(20, 27, 45, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 14px);
  padding: 12px 18px;
  gap: 14px;
  flex-wrap: wrap;
}

.leitner-action-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
}

.leitner-action-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.leitner-box-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
}

.leitner-box-btn.btn-box1 {
  border-color: rgba(244, 63, 94, 0.35);
  background: rgba(244, 63, 94, 0.1);
  color: #fda4af;
}

.leitner-box-btn.btn-box1:hover,
.leitner-box-btn.btn-box1.is-active {
  border-color: #f43f5e;
  background: #e11d48;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.45);
}

.leitner-box-btn.btn-box1:hover .leitner-dot,
.leitner-box-btn.btn-box1.is-active .leitner-dot {
  background: #ffffff;
  box-shadow: 0 0 6px #ffffff;
}

.leitner-box-btn.btn-box1:hover .leitner-kbd,
.leitner-box-btn.btn-box1.is-active .leitner-kbd {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.leitner-box-btn.btn-box2 {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.1);
  color: #fde68a;
}

.leitner-box-btn.btn-box2:hover,
.leitner-box-btn.btn-box2.is-active {
  border-color: #f59e0b;
  background: #b45309;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.45);
}

.leitner-box-btn.btn-box2:hover .leitner-dot,
.leitner-box-btn.btn-box2.is-active .leitner-dot {
  background: #ffffff;
  box-shadow: 0 0 6px #ffffff;
}

.leitner-box-btn.btn-box2:hover .leitner-kbd,
.leitner-box-btn.btn-box2.is-active .leitner-kbd {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.leitner-box-btn.btn-box3 {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.1);
  color: #a7f3d0;
}

.leitner-box-btn.btn-box3:hover,
.leitner-box-btn.btn-box3.is-active {
  border-color: #10b981;
  background: #047857;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.45);
}

.leitner-box-btn.btn-box3:hover .leitner-dot,
.leitner-box-btn.btn-box3.is-active .leitner-dot {
  background: #ffffff;
  box-shadow: 0 0 6px #ffffff;
}

.leitner-box-btn.btn-box3:hover .leitner-kbd,
.leitner-box-btn.btn-box3.is-active .leitner-kbd {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.leitner-kbd {
  display: inline-block;
  font-family: monospace;
  font-size: 0.68rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1.2;
}

/* Audio Speech Pronunciation Buttons & Pulse */
.fc-speech-btn,
.btn-speech-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fc-speech-btn:hover,
.btn-speech-trigger:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  transform: translateY(-1px);
}

.fc-speech-btn.is-speaking,
.btn-speech-trigger.is-speaking {
  background: rgba(236, 72, 153, 0.22) !important;
  border-color: #ec4899 !important;
  color: #f472b6 !important;
  animation: speechPulse 1.2s infinite ease-in-out;
}

@keyframes speechPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.45);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(236, 72, 153, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(236, 72, 153, 0);
  }
}

/* Reverse Challenge Mode Toggle Active Styling */
.active-reverse {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.25) !important;
}

/* Card Reticle Sci-Fi HUD Corner Embellishments */
.fc-reticle {
  position: absolute;
  font-family: monospace;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1;
  color: rgba(56, 189, 248, 0.28);
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

.fc-reticle-tl { top: 8px; left: 10px; }
.fc-reticle-tr { top: 8px; right: 10px; }
.fc-reticle-bl { bottom: 8px; left: 10px; }
.fc-reticle-br { bottom: 8px; right: 10px; }

/* Day Theme Overrides — High-Contrast Flashcard System (WCAG AAA) */
[data-theme="day"] .leitner-ribbon-card,
[data-theme="day"] .leitner-action-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="day"] .leitner-action-title {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* Day Mode: Leitner Box Action Buttons */
/* Day Mode: Leitner Box Action Buttons */
[data-theme="day"] .leitner-box-btn,
:root[data-theme="day"] .leitner-box-btn,
html[data-theme="day"] .leitner-box-btn,
body[data-theme="day"] .leitner-box-btn {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1e293b;
  font-weight: 700;
}

/* Day Mode: Box 1 (Needs Practice) - Inactive */
[data-theme="day"] .leitner-box-btn.btn-box1,
:root[data-theme="day"] .leitner-box-btn.btn-box1,
html[data-theme="day"] .leitner-box-btn.btn-box1,
body[data-theme="day"] .leitner-box-btn.btn-box1 {
  background: #fff1f2 !important;
  border: 1.5px solid #f43f5e !important;
  color: #881337 !important;
  font-weight: 700 !important;
}

[data-theme="day"] .leitner-box-btn.btn-box1 .leitner-dot,
:root[data-theme="day"] .leitner-box-btn.btn-box1 .leitner-dot,
html[data-theme="day"] .leitner-box-btn.btn-box1 .leitner-dot,
body[data-theme="day"] .leitner-box-btn.btn-box1 .leitner-dot {
  background: #e11d48 !important;
  box-shadow: 0 0 6px rgba(225, 29, 72, 0.45) !important;
}

[data-theme="day"] .leitner-box-btn.btn-box1 .leitner-kbd,
:root[data-theme="day"] .leitner-box-btn.btn-box1 .leitner-kbd,
html[data-theme="day"] .leitner-box-btn.btn-box1 .leitner-kbd,
body[data-theme="day"] .leitner-box-btn.btn-box1 .leitner-kbd {
  background: #ffe4e6 !important;
  border: 1px solid #fecdd3 !important;
  color: #881337 !important;
  font-weight: 800 !important;
}

/* Day Mode: Box 1 (Needs Practice) - Active / Hover */
[data-theme="day"] .leitner-box-btn.btn-box1:hover,
[data-theme="day"] .leitner-box-btn.btn-box1.is-active,
:root[data-theme="day"] .leitner-box-btn.btn-box1:hover,
:root[data-theme="day"] .leitner-box-btn.btn-box1.is-active,
html[data-theme="day"] .leitner-box-btn.btn-box1:hover,
html[data-theme="day"] .leitner-box-btn.btn-box1.is-active,
body[data-theme="day"] .leitner-box-btn.btn-box1:hover,
body[data-theme="day"] .leitner-box-btn.btn-box1.is-active {
  background: #e11d48 !important;
  border-color: #be123c !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35) !important;
}

[data-theme="day"] .leitner-box-btn.btn-box1:hover .leitner-dot,
[data-theme="day"] .leitner-box-btn.btn-box1.is-active .leitner-dot,
:root[data-theme="day"] .leitner-box-btn.btn-box1.is-active .leitner-dot,
html[data-theme="day"] .leitner-box-btn.btn-box1.is-active .leitner-dot,
body[data-theme="day"] .leitner-box-btn.btn-box1.is-active .leitner-dot {
  background: #ffffff !important;
  box-shadow: 0 0 6px #ffffff !important;
}

[data-theme="day"] .leitner-box-btn.btn-box1:hover .leitner-kbd,
[data-theme="day"] .leitner-box-btn.btn-box1.is-active .leitner-kbd,
:root[data-theme="day"] .leitner-box-btn.btn-box1.is-active .leitner-kbd,
html[data-theme="day"] .leitner-box-btn.btn-box1.is-active .leitner-kbd,
body[data-theme="day"] .leitner-box-btn.btn-box1.is-active .leitner-kbd {
  background: rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* Day Mode: Box 2 (Reviewing) - Inactive */
[data-theme="day"] .leitner-box-btn.btn-box2,
:root[data-theme="day"] .leitner-box-btn.btn-box2,
html[data-theme="day"] .leitner-box-btn.btn-box2,
body[data-theme="day"] .leitner-box-btn.btn-box2 {
  background: #fffbeb !important;
  border: 1.5px solid #f59e0b !important;
  color: #78350f !important;
  font-weight: 700 !important;
}

[data-theme="day"] .leitner-box-btn.btn-box2 .leitner-dot,
:root[data-theme="day"] .leitner-box-btn.btn-box2 .leitner-dot,
html[data-theme="day"] .leitner-box-btn.btn-box2 .leitner-dot,
body[data-theme="day"] .leitner-box-btn.btn-box2 .leitner-dot {
  background: #d97706 !important;
  box-shadow: 0 0 6px rgba(217, 119, 6, 0.45) !important;
}

[data-theme="day"] .leitner-box-btn.btn-box2 .leitner-kbd,
:root[data-theme="day"] .leitner-box-btn.btn-box2 .leitner-kbd,
html[data-theme="day"] .leitner-box-btn.btn-box2 .leitner-kbd,
body[data-theme="day"] .leitner-box-btn.btn-box2 .leitner-kbd {
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  color: #78350f !important;
  font-weight: 800 !important;
}

/* Day Mode: Box 2 (Reviewing) - Active / Hover */
[data-theme="day"] .leitner-box-btn.btn-box2:hover,
[data-theme="day"] .leitner-box-btn.btn-box2.is-active,
:root[data-theme="day"] .leitner-box-btn.btn-box2:hover,
:root[data-theme="day"] .leitner-box-btn.btn-box2.is-active,
html[data-theme="day"] .leitner-box-btn.btn-box2:hover,
html[data-theme="day"] .leitner-box-btn.btn-box2.is-active,
body[data-theme="day"] .leitner-box-btn.btn-box2:hover,
body[data-theme="day"] .leitner-box-btn.btn-box2.is-active {
  background: #b45309 !important;
  border-color: #92400e !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(180, 83, 9, 0.35) !important;
}

[data-theme="day"] .leitner-box-btn.btn-box2:hover .leitner-dot,
[data-theme="day"] .leitner-box-btn.btn-box2.is-active .leitner-dot,
:root[data-theme="day"] .leitner-box-btn.btn-box2.is-active .leitner-dot,
html[data-theme="day"] .leitner-box-btn.btn-box2.is-active .leitner-dot,
body[data-theme="day"] .leitner-box-btn.btn-box2.is-active .leitner-dot {
  background: #ffffff !important;
  box-shadow: 0 0 6px #ffffff !important;
}

[data-theme="day"] .leitner-box-btn.btn-box2:hover .leitner-kbd,
[data-theme="day"] .leitner-box-btn.btn-box2.is-active .leitner-kbd,
:root[data-theme="day"] .leitner-box-btn.btn-box2.is-active .leitner-kbd,
html[data-theme="day"] .leitner-box-btn.btn-box2.is-active .leitner-kbd,
body[data-theme="day"] .leitner-box-btn.btn-box2.is-active .leitner-kbd {
  background: rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* Day Mode: Box 3 (Mastered) - Inactive */
[data-theme="day"] .leitner-box-btn.btn-box3,
:root[data-theme="day"] .leitner-box-btn.btn-box3,
html[data-theme="day"] .leitner-box-btn.btn-box3,
body[data-theme="day"] .leitner-box-btn.btn-box3 {
  background: #ecfdf5 !important;
  border: 1.5px solid #10b981 !important;
  color: #064e3b !important;
  font-weight: 700 !important;
}

[data-theme="day"] .leitner-box-btn.btn-box3 .leitner-dot,
:root[data-theme="day"] .leitner-box-btn.btn-box3 .leitner-dot,
html[data-theme="day"] .leitner-box-btn.btn-box3 .leitner-dot,
body[data-theme="day"] .leitner-box-btn.btn-box3 .leitner-dot {
  background: #059669 !important;
  box-shadow: 0 0 6px rgba(5, 150, 105, 0.45) !important;
}

[data-theme="day"] .leitner-box-btn.btn-box3 .leitner-kbd,
:root[data-theme="day"] .leitner-box-btn.btn-box3 .leitner-kbd,
html[data-theme="day"] .leitner-box-btn.btn-box3 .leitner-kbd,
body[data-theme="day"] .leitner-box-btn.btn-box3 .leitner-kbd {
  background: #d1fae5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #064e3b !important;
  font-weight: 800 !important;
}

/* Day Mode: Box 3 (Mastered) - Active / Hover */
[data-theme="day"] .leitner-box-btn.btn-box3:hover,
[data-theme="day"] .leitner-box-btn.btn-box3.is-active,
:root[data-theme="day"] .leitner-box-btn.btn-box3:hover,
:root[data-theme="day"] .leitner-box-btn.btn-box3.is-active,
html[data-theme="day"] .leitner-box-btn.btn-box3:hover,
html[data-theme="day"] .leitner-box-btn.btn-box3.is-active,
body[data-theme="day"] .leitner-box-btn.btn-box3:hover,
body[data-theme="day"] .leitner-box-btn.btn-box3.is-active {
  background: #047857 !important;
  border-color: #065f46 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(4, 120, 87, 0.35) !important;
}

[data-theme="day"] .leitner-box-btn.btn-box3:hover .leitner-dot,
[data-theme="day"] .leitner-box-btn.btn-box3.is-active .leitner-dot,
:root[data-theme="day"] .leitner-box-btn.btn-box3.is-active .leitner-dot,
html[data-theme="day"] .leitner-box-btn.btn-box3.is-active .leitner-dot,
body[data-theme="day"] .leitner-box-btn.btn-box3.is-active .leitner-dot {
  background: #ffffff !important;
  box-shadow: 0 0 6px #ffffff !important;
}

[data-theme="day"] .leitner-box-btn.btn-box3:hover .leitner-kbd,
[data-theme="day"] .leitner-box-btn.btn-box3.is-active .leitner-kbd,
:root[data-theme="day"] .leitner-box-btn.btn-box3.is-active .leitner-kbd,
html[data-theme="day"] .leitner-box-btn.btn-box3.is-active .leitner-kbd,
body[data-theme="day"] .leitner-box-btn.btn-box3.is-active .leitner-kbd {
  background: rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* Day Mode: Leitner Status Badges on Flashcards */
[data-theme="day"] .leitner-status-badge.box1,
:root[data-theme="day"] .leitner-status-badge.box1,
html[data-theme="day"] .leitner-status-badge.box1,
body[data-theme="day"] .leitner-status-badge.box1 {
  background: #fff1f2 !important;
  border: 1.5px solid #f43f5e !important;
  color: #881337 !important;
  font-weight: 700 !important;
}

[data-theme="day"] .leitner-status-badge.box2,
:root[data-theme="day"] .leitner-status-badge.box2,
html[data-theme="day"] .leitner-status-badge.box2,
body[data-theme="day"] .leitner-status-badge.box2 {
  background: #fffbeb !important;
  border: 1.5px solid #f59e0b !important;
  color: #78350f !important;
  font-weight: 700 !important;
}

[data-theme="day"] .leitner-status-badge.box3,
:root[data-theme="day"] .leitner-status-badge.box3,
html[data-theme="day"] .leitner-status-badge.box3,
body[data-theme="day"] .leitner-status-badge.box3 {
  background: #ecfdf5 !important;
  border: 1.5px solid #10b981 !important;
  color: #064e3b !important;
  font-weight: 700 !important;
}

/* Day Mode: Leitner Legend Pills & Progress Ribbon */
[data-theme="day"] .leitner-progress-track {
  background: #e2e8f0 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="day"] .leitner-legend-pill {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 600 !important;
}

[data-theme="day"] .leitner-legend-pill:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

[data-theme="day"] .leitner-legend-pill[data-filter-box="BOX1"] {
  background: #fff1f2 !important;
  border-color: #f43f5e !important;
  color: #881337 !important;
}

[data-theme="day"] .leitner-legend-pill[data-filter-box="BOX2"] {
  background: #fffbeb !important;
  border-color: #f59e0b !important;
  color: #78350f !important;
}

[data-theme="day"] .leitner-legend-pill[data-filter-box="BOX3"] {
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
  color: #064e3b !important;
}

[data-theme="day"] .leitner-legend-pill.active,
[data-theme="day"] .leitner-legend-pill[data-filter-box="BOX1"].active {
  background: #e11d48 !important;
  border-color: #be123c !important;
  color: #ffffff !important;
}

[data-theme="day"] .leitner-legend-pill[data-filter-box="BOX2"].active {
  background: #b45309 !important;
  border-color: #92400e !important;
  color: #ffffff !important;
}

[data-theme="day"] .leitner-legend-pill[data-filter-box="BOX3"].active {
  background: #047857 !important;
  border-color: #065f46 !important;
  color: #ffffff !important;
}

[data-theme="day"] .leitner-legend-pill.active .leitner-dot {
  background: #ffffff !important;
  box-shadow: 0 0 6px #ffffff !important;
}

[data-theme="day"] .leitner-kbd {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}

[data-theme="day"] .fc-reticle {
  color: rgba(14, 165, 233, 0.25);
}

/* Day Mode: Flashcard Content Elements */
[data-theme="day"] .flashcard-back-title {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #0f172a !important;
  color: #0f172a !important;
}

[data-theme="day"] .flashcard-focus-tag {
  color: #0284c7 !important;
  font-weight: 700 !important;
}

[data-theme="day"] .flashcard-exp-title {
  color: #0284c7 !important;
}

[data-theme="day"] .flashcard-exp-box {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="day"] .flashcard-revealed-badge {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #065f46 !important;
}

[data-theme="day"] .flashcard-topic-pill-reverse {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}

[data-theme="day"] .flashcard-hint-text {
  color: #334155 !important;
}

/* Fallback: System Light Scheme Support when theme is default or not explicitly night */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="night"]) .leitner-action-card {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
  }
  :root:not([data-theme="night"]) .leitner-action-title {
    color: #0f172a !important;
    font-weight: 700 !important;
  }
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box1 {
    background: #fff1f2 !important;
    border: 1.5px solid #f43f5e !important;
    color: #881337 !important;
    font-weight: 700 !important;
  }
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box1 .leitner-dot {
    background: #e11d48 !important;
    box-shadow: 0 0 6px rgba(225, 29, 72, 0.45) !important;
  }
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box1 .leitner-kbd {
    background: #ffe4e6 !important;
    border: 1px solid #fecdd3 !important;
    color: #881337 !important;
    font-weight: 800 !important;
  }
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box1:hover,
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box1.is-active {
    background: #e11d48 !important;
    border-color: #be123c !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35) !important;
  }
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box1:hover .leitner-dot,
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box1.is-active .leitner-dot {
    background: #ffffff !important;
    box-shadow: 0 0 6px #ffffff !important;
  }
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box1:hover .leitner-kbd,
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box1.is-active .leitner-kbd {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
  }

  :root:not([data-theme="night"]) .leitner-box-btn.btn-box2 {
    background: #fffbeb !important;
    border: 1.5px solid #f59e0b !important;
    color: #78350f !important;
    font-weight: 700 !important;
  }
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box2 .leitner-dot {
    background: #d97706 !important;
    box-shadow: 0 0 6px rgba(217, 119, 6, 0.45) !important;
  }
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box2 .leitner-kbd {
    background: #fef3c7 !important;
    border: 1px solid #fde68a !important;
    color: #78350f !important;
    font-weight: 800 !important;
  }
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box2:hover,
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box2.is-active {
    background: #b45309 !important;
    border-color: #92400e !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(180, 83, 9, 0.35) !important;
  }
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box2:hover .leitner-dot,
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box2.is-active .leitner-dot {
    background: #ffffff !important;
    box-shadow: 0 0 6px #ffffff !important;
  }
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box2:hover .leitner-kbd,
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box2.is-active .leitner-kbd {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
  }

  :root:not([data-theme="night"]) .leitner-box-btn.btn-box3 {
    background: #ecfdf5 !important;
    border: 1.5px solid #10b981 !important;
    color: #064e3b !important;
    font-weight: 700 !important;
  }
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box3 .leitner-dot {
    background: #059669 !important;
    box-shadow: 0 0 6px rgba(5, 150, 105, 0.45) !important;
  }
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box3 .leitner-kbd {
    background: #d1fae5 !important;
    border: 1px solid #a7f3d0 !important;
    color: #064e3b !important;
    font-weight: 800 !important;
  }
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box3:hover,
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box3.is-active {
    background: #047857 !important;
    border-color: #065f46 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(4, 120, 87, 0.35) !important;
  }
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box3:hover .leitner-dot,
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box3.is-active .leitner-dot {
    background: #ffffff !important;
    box-shadow: 0 0 6px #ffffff !important;
  }
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box3:hover .leitner-kbd,
  :root:not([data-theme="night"]) .leitner-box-btn.btn-box3.is-active .leitner-kbd {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
  }
}

/* Fast Smartboard Mode (no blur, pure performance) */
[data-mode="smartboard"] .leitner-ribbon-card,
[data-mode="smartboard"] .leitner-action-card,
[data-mode="smartboard"] .flashcard-filter-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #0f172a !important;
}

/* Smartboard Presenter Styles */
.presenter-container {
  background: radial-gradient(circle at 50% 20%, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.98) 100%);
  color: #f8fafc;
}
.presenter-q-num {
  color: #f8fafc;
}
.presenter-q-prompt {
  color: #ffffff;
}
.presenter-opt-tile {
  cursor: pointer;
  user-select: none;
  color: #f8fafc;
}
.presenter-opt-tile:hover {
  border-color: #38bdf8 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}
.presenter-opt-letter {
  color: var(--text-muted);
}
.presenter-opt-text {
  color: #ffffff;
}
.presenter-poll-track {
  background: rgba(255, 255, 255, 0.08);
}
.presenter-explanation-box {
  background: rgba(16, 185, 129, 0.12);
  border-left: 5px solid #10b981;
  color: #f1f5f9;
}
.presenter-explanation-text {
  color: #f1f5f9;
}
[data-mode="smartboard"] .presenter-opt-tile {
  padding: 26px 30px;
}
[data-mode="smartboard"] .presenter-container {
  padding: 44px;
}

/* Periodic Table Grid Base Styles */
.ptable-grid {
  background: #070a14;
  border: 1.5px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.8);
}
.ptable-cell {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ptable-cell.selected {
  background: rgba(56, 189, 248, 0.2);
  box-shadow: 0 0 12px var(--trend-color, #38bdf8);
}
.ptable-cell-z {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim, #94a3b8);
}
.ptable-cell-s {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: #ffffff;
}
.ptable-cell-m {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-dim, #94a3b8);
}

/* Virtual Laboratories Suite Hub & Controls Base Styles */
.labs-suite-hero {
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
}
.labs-suite-badge {
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.27);
  background: rgba(168, 85, 247, 0.08);
}
.lab-header-bar {
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}
.lab-view-switcher {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.lab-checkbox-label {
  color: #cbd5e1;
}
.sim-telemetry-card {
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid var(--border-color);
}
.sim-sub-card {
  background: rgba(10, 15, 28, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
}
.microscope-slide-title {
  color: #ffffff;
}

/* ==========================================================================
   Mathematical & Scientific LaTeX Typesetting Styles (Publication-Grade)
   ========================================================================== */

.math-rendered,
.math-katex-wrapper {
  font-family: "STIX Two Text", "Latin Modern Math", "Cambria Math", "KaTeX_Math", "DejaVu Math TeX Gyre", "Times New Roman", serif;
  letter-spacing: 0.015em;
  color: #f8fafc;
  display: inline-flex;
  align-items: baseline;
  vertical-align: middle;
  line-height: 1.35;
}

.math-inline {
  font-size: 1.08em;
  padding: 0 2px;
}

.badge .math-rendered,
.badge .math-katex-wrapper,
.badge .katex {
  color: inherit !important;
  font-size: 1em !important;
  vertical-align: baseline;
  line-height: inherit;
}

.badge .math-rendered *,
.badge .math-katex-wrapper *,
.badge .katex * {
  color: inherit !important;
}

.math-display {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.35rem;
  text-align: center;
  margin: 12px 0;
  color: #ffffff;
  padding: 8px 14px;
  overflow-x: auto;
  overflow-y: hidden;
}

.math-block-wrapper {
  margin: 14px 0;
  display: flex;
  justify-content: center;
  overflow-x: auto;
  padding: 6px;
}

/* Printable STEM Examination Math Rules (Screen Preview & Print Pre-flight) */
.print-test-container .math-rendered,
.print-test-container .math-katex-wrapper,
.print-test-container .katex {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-size: 1em !important;
  line-height: 1.3 !important;
}

.print-test-container .math-num-lit,
.print-test-container .math-text,
.print-test-container .math-delim,
.print-test-container .math-op,
.print-test-container .math-func,
.print-test-container .math-sup,
.print-test-container .math-sub,
.print-test-container .math-italic,
.print-test-container .math-num,
.print-test-container .math-denom {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

.print-test-container .math-num {
  border-bottom: 1.5px solid #000000 !important;
}

.print-test-container .math-sqrt-stem {
  border-top: 1.5px solid #000000 !important;
}

.print-test-container .math-radical-svg,
.print-test-container .math-radical-svg path {
  stroke: #000000 !important;
  color: #000000 !important;
}

.print-test-container .print-q-card > div:first-child .katex,
.print-test-container .print-q-card > div:first-child .math-rendered,
.print-test-container .print-q-card > div:first-child .math-katex-wrapper {
  font-size: 1.02em !important;
  font-weight: 600 !important;
}

.print-test-container .print-q-card .math-block-wrapper,
.print-test-container .print-q-card .math-display,
.print-test-container .print-q-card .katex-display {
  margin: 6px 0 !important;
  padding: 2px 0 !important;
  font-size: 1.05rem !important;
  color: #000000 !important;
  text-align: center !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}

.print-test-container .print-q-card div[style*="grid-template-columns"] span .katex,
.print-test-container .print-q-card div[style*="grid-template-columns"] span .math-rendered,
.print-test-container .print-q-card div[style*="grid-template-columns"] span .math-katex-wrapper {
  font-size: 0.95rem !important;
  line-height: 1.25 !important;
}

.print-test-container .print-q-card div[style*="grid-template-columns"] .math-display,
.print-test-container .print-q-card div[style*="grid-template-columns"] .katex-display {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
}

.print-test-container .teacher-solution-card .katex,
.print-test-container .teacher-solution-card .math-rendered,
.print-test-container .teacher-solution-card .math-katex-wrapper {
  font-size: 0.92rem !important;
  color: #000000 !important;
}

.print-test-container .teacher-solution-card .math-block-wrapper,
.print-test-container .teacher-solution-card .math-display,
.print-test-container .teacher-solution-card .katex-display {
  margin: 4px 0 !important;
  padding: 2px 0 !important;
  font-size: 0.95rem !important;
  color: #000000 !important;
}

/* Upright tabular numbers */
.math-num-lit {
  font-style: normal !important;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #ffffff;
}

/* Mathematical & chemical relation operators with clean spacing */
.math-op {
  font-style: normal !important;
  margin: 0 0.28em;
  color: #38bdf8;
  font-weight: 500;
  display: inline-block;
  vertical-align: middle;
}

/* Delimiters (parentheses, brackets) */
.math-delim {
  font-style: normal !important;
  padding: 0 0.06em;
  color: #cbd5e1;
}

/* Normal non-italicized scientific text inside formulas */
.math-text {
  font-family: var(--font-body);
  font-style: normal !important;
  font-weight: 500;
  color: #f1f5f9;
  padding: 0 2px;
}

.math-italic {
  font-style: italic;
  padding: 0 2px;
}

/* Functions like sin, cos, log, ln */
.math-func {
  font-family: var(--font-body);
  font-style: normal !important;
  font-weight: 700;
  color: #c084fc;
  margin: 0 0.18em;
}

/* Standard stacked fraction with centered math axis */
.math-fraction {
  display: inline-flex;
  flex-direction: column;
  vertical-align: -0.6em;
  text-align: center;
  padding: 0 0.25em;
  margin: 0 0.15em;
  font-size: 0.95em;
}

.math-num {
  border-bottom: 1.8px solid rgba(255, 255, 255, 0.75);
  padding-bottom: 2px;
  line-height: 1.15;
  display: block;
}

.math-denom {
  padding-top: 2px;
  line-height: 1.15;
  display: block;
}

/* Subscript & Superscript Column Stacking */
.math-subsup {
  display: inline-flex;
  flex-direction: column-reverse;
  vertical-align: -0.32em;
  font-size: 0.72em;
  line-height: 1;
  margin-left: 0.08em;
  margin-right: 0.14em;
  text-align: left;
}

.math-subsup .math-sup {
  margin-bottom: 0.22em;
  font-style: normal;
  display: block;
}

.math-subsup .math-sub {
  font-style: normal;
  display: block;
}

/* Standalone Superscripts & Subscripts */
.math-sup,
sup.math-sup {
  font-size: 0.72em;
  vertical-align: 0.45em;
  line-height: 0;
  font-style: normal;
}

.math-sub,
sub.math-sub {
  font-size: 0.72em;
  vertical-align: -0.25em;
  line-height: 0;
  font-style: normal;
}

/* Connected Radical & Vinculum for Square Roots */
.math-sqrt {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
  margin: 0 0.18em;
}

.math-radical-symbol {
  display: inline-flex;
  align-items: stretch;
  width: 0.65em;
  flex-shrink: 0;
}

.math-radical-svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
}

.math-sqrt-stem {
  border-top: 1.8px solid currentColor;
  padding: 2px 4px 1px 3px;
  display: inline-flex;
  align-items: center;
}

.math-root-index {
  font-size: 0.65em;
  vertical-align: top;
  margin-right: -2px;
  font-style: normal;
}

/* Vector Arrow Accent */
.math-accent-vec {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  position: relative;
}

.math-vec-arrow {
  font-size: 0.75em;
  line-height: 0.6;
  color: #38bdf8;
  display: block;
}

.math-vec-arrow .math-op {
  margin: 0 !important;
  color: inherit !important;
}

.math-accent-bar {
  text-decoration: overline;
}

/* Electromotive Force (EMF) Script */
.math-emf {
  font-family: "Apple Chancery", "Bickham Script Pro", "STIX Two Math", cursive, serif;
  font-size: 1.25em;
  color: #38bdf8;
  font-style: italic;
  padding-right: 2px;
}

/* Labeled Chemical Reaction Arrows */
.math-arrow-labeled {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  margin: 0 0.35em;
}

.math-arrow-label {
  font-size: 0.72em;
  color: #c084fc;
  line-height: 1;
  margin-bottom: 1px;
  font-family: var(--font-body);
}

.math-arrow-line {
  font-size: 1.25em;
  line-height: 0.8;
  color: #38bdf8;
}

/* KaTeX Overrides for Premium Dark Mode */
.katex {
  font-size: 1.15em !important;
  color: #f1f5f9;
}

.katex-display {
  margin: 14px 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 0;
}

.katex .mord, .katex .mbin, .katex .mrel {
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.15);
}

/* Formula Card Component */
.formula-card {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  text-align: center;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 90px;
}

.formula-card:hover {
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}


/* =========================================================================
   DEEP-DIVE MODULE VIEWER MODAL COMPONENTS (BASE / NIGHT MODE)
   ========================================================================= */

.modal-inquiry-box {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--border-color);
  padding: 20px;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.modal-inquiry-prompt {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.5;
  font-style: italic;
}

.modal-section-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-main);
}

.modal-big-idea-text {
  font-size: 1.02rem;
  line-height: 1.6;
  color: #e2e8f0;
  font-weight: 500;
}

.modal-section-subtitle {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.modal-objectives-list {
  margin-left: 20px;
  color: #cbd5e1;
  font-size: 0.92rem;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
}

.modal-objectives-list li {
  line-height: 1.45;
}

.modal-theory-core {
  background: rgba(15, 23, 42, 0.75);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.modal-theory-core h3 {
  color: var(--text-main);
}
.modal-theory-core-body {
  line-height: 1.7;
  font-size: 0.98rem;
  color: #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-theory-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 18px;
}

.modal-worked-example {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 12px;
  padding: 20px;
}
.worked-example-prob {
  font-size: 0.95rem;
  color: var(--text-main);
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.5;
}
.worked-example-given {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: #94a3b8;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.35);
  padding: 8px 14px;
  border-radius: 8px;
}
.worked-example-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9rem;
  color: #cbd5e1;
  margin-bottom: 14px;
  line-height: 1.6;
}
.worked-example-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 10px 16px;
  border-radius: 8px;
}
.worked-example-result-label {
  font-weight: 700;
  color: var(--text-main);
  font-size: 0.9rem;
}
.worked-example-result-val {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 800;
  color: #38bdf8;
}

.modal-ngss-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
}

.modal-sandbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border-color);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  flex-wrap: wrap;
  gap: 10px;
}

/* =========================================================================
   LESSON-SPECIFIC INTERACTIVE WORKBENCHES & SIMULATORS
   ========================================================================= */

.lesson-interactive-card {
  background: rgba(13, 19, 33, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

.lesson-interactive-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #818cf8, #ec4899);
  opacity: 0.85;
}

.interactive-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.interactive-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
}

.interactive-lesson-badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.25);
  padding: 3px 8px;
  border-radius: 4px;
}

.interactive-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
}

.interactive-formula-badge {
  background: rgba(15, 23, 42, 0.95);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  padding: 7px 16px;
  border-radius: 8px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 12px rgba(56, 189, 248, 0.15);
  display: flex;
  align-items: center;
  max-width: 100%;
  overflow-x: auto;
}

.interactive-formula-badge .katex,
.interactive-formula-badge .katex *,
.interactive-formula-badge .math-rendered,
.interactive-formula-badge .math-rendered *,
#inquiry-math .katex,
#inquiry-math .katex *,
#inquiry-math .math-rendered,
#inquiry-math .math-rendered * {
  color: #38bdf8 !important;
  -webkit-text-fill-color: #38bdf8 !important;
}

.interactive-inquiry-box {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 4px solid #38bdf8;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  color: #f1f5f9;
  line-height: 1.55;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.interactive-inquiry-box .inquiry-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1;
}

.interactive-inquiry-box strong {
  color: #38bdf8;
  font-weight: 800;
  margin-right: 4px;
}

.interactive-inquiry-box .inquiry-text {
  color: #f1f5f9;
  font-weight: 500;
}

.interactive-sim-viewport {
  width: 100%;
}

/* Split Simulation Grid */
.interactive-split-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.4fr) minmax(260px, 1fr);
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 860px) {
  .interactive-split-grid {
    grid-template-columns: 1fr;
  }
}

.sim-canvas-box {
  background: #080c16;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}

.sim-canvas-box canvas {
  display: block;
  width: 100%;
  height: 260px;
  image-rendering: auto;
}

.sim-controls-panel {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}

/* Telemetry Pills */
.sim-readout-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.88rem;
}

.sim-readout-pill .readout-label {
  color: var(--text-dim);
  font-weight: 600;
}

.sim-readout-pill .readout-val {
  font-family: var(--font-mono);
  font-weight: 700;
  color: #ffffff;
}

/* Telemetry Box & Data Strip for Live Calculations & Formulas */
.sim-telemetry-box,
.sim-data-strip,
.sim-formula-box,
.sim-controls-panel > div:not(.sim-readout-pill):not(.control-slider-group) {
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  color: #f8fafc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  line-height: 1.45;
}

.sim-telemetry-box strong,
.sim-data-strip strong,
.sim-formula-box strong,
.sim-controls-panel > div:not(.sim-readout-pill):not(.control-slider-group) strong {
  color: #ffffff;
  font-weight: 700;
}

/* Slider Groups */
.control-slider-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.control-slider-group .slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.control-slider-group .slider-header strong {
  font-family: var(--font-mono);
  color: #38bdf8;
  font-weight: 700;
}

.range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #1e293b;
  outline: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #38bdf8;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
  border: 2px solid #ffffff;
  transition: transform 0.15s ease, background 0.15s ease;
}

.range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  background: #60a5fa;
}

.range-slider::-webkit-slider-thumb:active {
  transform: scale(1.25);
  background: #93c5fd;
}

/* Action Buttons */
.btn-sim-action {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.btn-sim-action:hover {
  background: rgba(56, 189, 248, 0.28);
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}

.btn-sim-action.active {
  background: #38bdf8;
  color: #070a12;
  border-color: #38bdf8;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.5);
}

/* Lesson Navigator Bar */
.interactive-lesson-pills-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid var(--border-color);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  overflow: visible;
}

.pills-bar-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.modal-lesson-select {
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  background-color: rgba(15, 23, 42, 0.95);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  color: #f8fafc;
  padding: 8px 14px;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  width: 100%;
  transition: all 0.2s ease;
}

.modal-lesson-select:hover {
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

.modal-lesson-select:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3);
}

.btn-lesson-step {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: 6px;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-lesson-step:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-lesson-step:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.lesson-pill-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.lesson-pill-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.lesson-pill-btn.active {
  background: #38bdf8;
  color: #070a12;
  border-color: #38bdf8;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

.lesson-flashcard-btn {
  background: rgba(236, 72, 153, 0.12) !important;
  border: 1px solid rgba(236, 72, 153, 0.4) !important;
  color: #f472b6 !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

.lesson-flashcard-btn:hover {
  background: rgba(236, 72, 153, 0.25) !important;
  border-color: #ec4899 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3) !important;
}

/* Lesson Card Item Hover in Overview */
.lesson-card-item:hover {
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   DAY / NIGHT MODE SYSTEM - HIGH READABILITY & EYE COMFORT
   ========================================================================== */

/* Smooth Transition for Theme Changing */
html, body, .app-navbar, .hero-banner, .module-card, .lesson-row-card, .search-input, .unit-filter-chip, .lesson-card-full, .module-modal, .interactive-sim-viewport, .lesson-interactive-card {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Day Mode (Light) Overrides */
[data-theme="day"] {
  --bg-dark: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #f1f5f9;
  --border-color: #cbd5e1;
  --border-color-glow: rgba(2, 132, 199, 0.3);
  --card-accent: #0284c7;

  /* Deeply saturated, crisp text for effortless reading (WCAG AAA compliant: 16.5:1 ratio) */
  --text-main: #0f172a;
  --text-muted: #1e293b;
  --text-dim: #334155;

  /* Subject Accent Colors Optimized for High Contrast on Light Backgrounds */
  --chem-primary: #0284c7;
  --chem-gradient: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  --chem-glow: rgba(2, 132, 199, 0.18);

  --bio-primary: #059669;
  --bio-gradient: linear-gradient(135deg, #059669 0%, #047857 100%);
  --bio-glow: rgba(5, 150, 105, 0.18);

  --phys-primary: #4338ca;
  --phys-gradient: linear-gradient(135deg, #4338ca 0%, #3730a3 100%);
  --phys-glow: rgba(67, 56, 202, 0.18);
}

/* Day Mode Component Adjustments */
[data-theme="day"] .bg-glow-container {
  opacity: 0.15;
}

[data-theme="day"] .app-navbar {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05);
}



[data-theme="day"] .brand-tagline {
  color: #475569;
}

/* Day Mode Subject Dropdown */
[data-theme="day"] .nav-dropdown-trigger {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}
[data-theme="day"] .nav-dropdown-trigger:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}
[data-theme="day"] .nav-dropdown-current-label {
  color: #64748b;
}
[data-theme="day"] .nav-dropdown-chevron {
  color: #64748b;
}
[data-theme="day"] .nav-dropdown-menu {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.05);
}
[data-theme="day"] .nav-dropdown-header {
  border-bottom: 1px solid #f1f5f9;
}
[data-theme="day"] .nav-dropdown-header-title {
  color: #64748b;
}
[data-theme="day"] .nav-dropdown-header-count {
  background: #f1f5f9;
  color: #475569;
}
[data-theme="day"] .nav-dropdown-item {
  color: #475569;
}
[data-theme="day"] .nav-dropdown-item:hover,
[data-theme="day"] .nav-dropdown-item:focus-visible {
  background: #f8fafc;
  color: #0f172a;
  border-color: #e2e8f0;
}
[data-theme="day"] .nav-item-icon-box {
  background: #f1f5f9;
  border-color: #e2e8f0;
}
[data-theme="day"] .nav-item-title {
  color: #0f172a;
}
[data-theme="day"] .nav-item-badge {
  background: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
}
[data-theme="day"] .nav-item-tagline {
  color: #64748b;
}
[data-theme="day"] .nav-dropdown-item.tab-chem.active {
  background: #f0fdfa;
  border-color: #99f6e4;
}
[data-theme="day"] .nav-dropdown-item.tab-bio.active {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
[data-theme="day"] .nav-dropdown-item.tab-phys.active {
  background: #eef2ff;
  border-color: #c7d2fe;
}
[data-theme="day"] .nav-dropdown-item.tab-labs.active {
  background: #f0f9ff;
  border-color: #bae6fd;
}
[data-theme="day"] .nav-dropdown-item.tab-quiz.active {
  background: #fffbeb;
  border-color: #fde68a;
}
[data-theme="day"] .nav-dropdown-item.tab-flashcards.active {
  background: #fdf2f8;
  border-color: #fbcfe8;
}

[data-theme="day"] .nav-center-tabs {
  background: #f1f5f9;
  border-color: #e2e8f0;
}
[data-theme="day"] .nav-tab-btn {
  color: #475569;
}
[data-theme="day"] .nav-tab-btn:hover {
  color: #0f172a;
  background: #ffffff;
}
[data-theme="day"] .nav-tab-btn.active {
  background: #ffffff;
  color: #0f172a;
}

[data-theme="day"] .hero-banner {
  background-color: #ffffff;
  background-image: 
    radial-gradient(circle at top right, rgba(2, 132, 199, 0.08) 0%, transparent 60%),
    radial-gradient(rgba(15, 23, 42, 0.04) 1.2px, transparent 1.2px),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  background-size: 100% 100%, 28px 28px, 100% 100%;
  border: 1px solid #e2e8f0;
  border-top: 2px solid #38bdf8;
  box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.08), inset 0 1px 0 #ffffff;
}

[data-theme="day"] .hero-banner::before {
  border-top-color: rgba(2, 132, 199, 0.45);
  border-right-color: rgba(2, 132, 199, 0.45);
}

[data-theme="day"] .hero-banner::after {
  background: radial-gradient(circle at 80% 20%, rgba(2, 132, 199, 0.08) 0%, transparent 70%);
}

[data-theme="day"] .hero-title {
  color: #0f172a;
}

[data-theme="day"] .hero-desc {
  color: #334155;
}

[data-theme="day"] .metric-pill {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

[data-theme="day"] .metric-label {
  color: #475569;
}

[data-theme="day"] .search-input {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

[data-theme="day"] .search-input:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

[data-theme="day"] .unit-filter-chip {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #475569;
}

[data-theme="day"] .unit-filter-chip:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

[data-theme="day"] .unit-filter-chip.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

[data-theme="day"] .device-mode-toggle {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

[data-theme="day"] .device-btn {
  color: #64748b;
}

[data-theme="day"] .device-btn:hover {
  color: #0f172a;
}

[data-theme="day"] .device-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

[data-theme="day"] .nav-action-btn {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="day"] .nav-action-btn:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0284c7 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1) !important;
}

/* Day / Night Toggle Switch Widget */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 2px 10px;
  min-height: 30px;
  height: 30px;
  cursor: pointer;
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  transition: all 0.25s ease;
  user-select: none;
}

[data-theme="day"] .theme-toggle-btn {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
  color: #0f172a;
}

.theme-toggle-btn:hover {
  background: var(--bg-surface-elevated);
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="day"] .theme-toggle-btn:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.theme-toggle-track {
  width: 36px;
  height: 20px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  position: relative;
  display: flex;
  align-items: center;
  transition: all 0.25s ease;
}

[data-theme="day"] .theme-toggle-track {
  background: #fef3c7;
  border-color: #fde68a;
}

.theme-toggle-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #38bdf8;
  position: absolute;
  left: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="day"] .theme-toggle-thumb {
  transform: translateX(16px);
  background: #f59e0b;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.4);
}

.theme-toggle-thumb .icon-sun {
  display: none;
}
.theme-toggle-thumb .icon-moon {
  display: block;
}

[data-theme="day"] .theme-toggle-thumb .icon-sun {
  display: block;
}
[data-theme="day"] .theme-toggle-thumb .icon-moon {
  display: none;
}

.theme-toggle-text {
  letter-spacing: 0.02em;
}

/* ==========================================================================
   ENHANCED MODULE CARDS WITH TEXTBOOK PICTURE BANNERS & LESSON PICTURES
   ========================================================================== */

.module-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.2);
}

[data-theme="day"] .module-card {
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}

.module-card:hover {
  transform: translateY(-4px);
  background: var(--bg-card-hover);
  border-color: var(--card-accent, #38bdf8);
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.35);
}

[data-theme="day"] .module-card:hover {
  box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
  border-color: var(--card-accent, #0284c7);
}

/* Textbook Chapter Opener Photo Banner with Rich Thematic Backdrops */
.module-card-banner,
.lesson-card-banner {
  position: relative;
  width: 100%;
  height: 145px;
  overflow: hidden;
  background: radial-gradient(circle at 75% 25%, rgba(56, 189, 248, 0.18) 0%, transparent 60%),
              linear-gradient(135deg, #091222 0%, #0f172a 60%, #081d33 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="day"] .module-card-banner,
[data-theme="day"] .lesson-card-banner {
  background: radial-gradient(circle at 75% 25%, rgba(2, 132, 199, 0.18) 0%, transparent 60%),
              linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 55%, #e0f2fe 100%);
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.08);
}

/* Shimmer Skeleton during Image Loading */
.module-banner-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.95) 0%,
    rgba(30, 41, 59, 0.98) 20%,
    rgba(56, 189, 248, 0.25) 45%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(56, 189, 248, 0.25) 55%,
    rgba(30, 41, 59, 0.98) 80%,
    rgba(15, 23, 42, 0.95) 100%
  );
  background-size: 250% 100%;
  animation: bannerSkeletonShimmer 1.6s infinite ease-in-out;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.module-card-banner:not(.is-loading) .module-banner-skeleton,
.lesson-card-banner:not(.is-loading) .module-banner-skeleton,
.module-card-banner:has(.loaded) .module-banner-skeleton,
.lesson-card-banner:has(.loaded) .module-banner-skeleton {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

@keyframes bannerSkeletonShimmer {
  0% { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}

[data-theme="day"] .module-banner-skeleton {
  background: linear-gradient(
    90deg,
    rgba(226, 232, 240, 0.92) 0%,
    rgba(203, 213, 225, 0.95) 20%,
    rgba(186, 230, 253, 0.55) 45%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(186, 230, 253, 0.55) 55%,
    rgba(203, 213, 225, 0.95) 80%,
    rgba(226, 232, 240, 0.92) 100%
  );
  background-size: 250% 100%;
}

/* Curriculum Skeleton Grid */
.curriculum-skeleton-wrap {
  animation: fadeIn 0.15s ease-out;
  padding-bottom: 40px;
}
.skeleton-line {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="day"] .skeleton-line {
  background: rgba(0, 0, 0, 0.08);
}
.skeleton-metrics .skeleton-pill {
  min-height: 58px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 8px);
}
[data-theme="day"] .skeleton-metrics .skeleton-pill {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.skeleton-card {
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="day"] .skeleton-card {
  border-color: rgba(0, 0, 0, 0.08);
}

.module-banner-fallback-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  color: var(--card-accent, #38bdf8);
  opacity: 0.35;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1;
}

[data-theme="day"] .module-banner-fallback-icon {
  opacity: 0.3;
  color: var(--card-accent, #0284c7);
}

.module-banner-fallback-icon svg {
  width: 100%;
  height: 100%;
}

/* Enhanced Scientific Fallback Pattern Card */
.has-fallback-pattern {
  background: radial-gradient(circle at 50% 40%, rgba(14, 165, 233, 0.18) 0%, rgba(15, 23, 42, 0.98) 100%),
              repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 10px, transparent 10px, transparent 20px) !important;
}

[data-theme="day"] .has-fallback-pattern {
  background: radial-gradient(circle at 50% 40%, rgba(2, 132, 199, 0.14) 0%, #f8fafc 100%),
              repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.02) 0px, rgba(0, 0, 0, 0.02) 10px, transparent 10px, transparent 20px) !important;
}

.has-fallback-pattern .module-banner-fallback-icon {
  opacity: 0.65;
  transform: translate(-50%, -50%) scale(1.15);
  filter: drop-shadow(0 4px 14px rgba(14, 165, 233, 0.45));
}

.module-banner-img,
.lesson-banner-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  display: block;
}

.module-banner-img.loaded,
.lesson-banner-img.loaded,
.module-card-banner:not(.is-loading) .module-banner-img,
.lesson-card-banner:not(.is-loading) .lesson-banner-img {
  opacity: 1;
}

.module-card:hover .module-banner-img,
.lesson-card-full:hover .lesson-banner-img {
  transform: scale(1.06);
}

.module-banner-overlay,
.lesson-banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(7, 10, 18, 0) 65%, rgba(7, 10, 18, 0.45) 100%);
  pointer-events: none;
}

[data-theme="day"] .module-banner-overlay,
[data-theme="day"] .lesson-banner-overlay {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0.35) 100%);
}

.module-card-header-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.module-code-badge {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: rgba(15, 23, 42, 0.85);
  color: var(--card-accent, #38bdf8);
  border: 1px solid var(--border-color);
  letter-spacing: 0.03em;
}

[data-theme="day"] .module-code-badge {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0284c7;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.module-unit-tag {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: 4px;
}

[data-theme="day"] .module-unit-tag {
  background: #f8fafc;
  color: #475569;
  border-color: #e2e8f0;
}

/* Card Body Content */
.module-card-content {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  gap: 16px;
}

.module-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-main);
}

.module-phenomenon {
  display: block !important;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3.5px solid var(--card-accent, #38bdf8);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  font-style: normal;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.phenomenon-label {
  display: block;
  font-style: normal;
  font-weight: 800;
  color: var(--card-accent, #38bdf8);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.phenomenon-text,
.module-phenomenon p,
.module-phenomenon {
  font-size: 0.92rem;
  color: #f1f5f9;
  line-height: 1.55;
  font-style: normal;
  font-weight: 500;
}

[data-theme="day"] .module-phenomenon {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-left: 3.5px solid var(--card-accent, #0284c7) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="day"] .phenomenon-label {
  color: var(--card-accent, #0284c7) !important;
  font-weight: 800 !important;
}

[data-theme="day"] .phenomenon-text,
[data-theme="day"] .module-phenomenon p {
  color: #0f172a !important;
  font-weight: 500 !important;
}

/* Lessons Container with Small Pictures */
.module-lessons-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.module-lessons-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.module-lessons-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Lesson Row Card */
.lesson-row-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  cursor: pointer;
  content-visibility: auto;
  contain-intrinsic-size: auto 65px;
}

[data-theme="day"] .lesson-row-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.lesson-row-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--card-accent, #38bdf8);
  transform: translateX(4px);
}

[data-theme="day"] .lesson-row-card:hover {
  background: #f0f9ff;
  border-color: var(--card-accent, #0284c7);
}

.lesson-row-pic {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="day"] .lesson-row-pic {
  background: #f1f5f9;
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.lesson-row-icon {
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.lesson-row-card:hover .lesson-row-pic {
  transform: scale(1.06);
  border-color: var(--card-accent, #38bdf8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

[data-theme="day"] .lesson-row-card:hover .lesson-row-pic {
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15);
}

.lesson-row-text {
  flex: 1;
  min-width: 0;
}

.lesson-row-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--card-accent, #38bdf8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  margin-bottom: 2px;
}

.lesson-row-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  white-space: normal;
}

.lesson-row-action {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}

.lesson-row-card:hover .lesson-row-action {
  opacity: 1;
}

.interactive-tag-mini {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.12);
  color: var(--card-accent, #38bdf8);
}

.play-arrow {
  font-size: 0.75rem;
  color: var(--card-accent, #38bdf8);
}

/* Module Card Footer */
.module-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 0.82rem;
}

.lab-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
}

.lab-indicator svg {
  width: 15px;
  height: 15px;
  color: var(--card-accent, #38bdf8);
}

.view-module-arrow {
  color: var(--card-accent, #38bdf8);
  font-weight: 600;
  transition: transform 0.2s ease;
}

.module-card:hover .view-module-arrow {
  transform: translateX(4px);
}

/* View Mode Selector Tabs */
.view-mode-toggle-group {
  display: flex;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 2px;
}

[data-theme="day"] .view-mode-toggle-group {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.view-mode-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.view-mode-btn:hover {
  color: var(--text-main);
}

.view-mode-btn.active {
  background: var(--bg-surface-elevated);
  color: var(--text-main);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="day"] .view-mode-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

/* Standalone Lesson Card Grid */
.lessons-full-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.lesson-card-full {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 2.5px solid var(--card-accent, #38bdf8);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.25);
}

.lesson-card-full:focus-visible {
  outline: 3px solid var(--card-accent, #38bdf8);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.25), 0 18px 38px -6px rgba(0, 0, 0, 0.55);
  transform: translateY(-5px);
}

[data-theme="day"] .lesson-card-full {
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.06);
}

.lesson-card-full:hover {
  transform: translateY(-5px);
  border-color: var(--card-accent, #38bdf8);
  box-shadow: 0 18px 38px -6px rgba(0, 0, 0, 0.55), 0 0 18px -4px var(--card-accent, rgba(56, 189, 248, 0.25));
}

[data-theme="day"] .lesson-card-full:hover {
  box-shadow: 0 14px 32px -4px rgba(15, 23, 42, 0.12);
}

.lesson-card-banner {
  position: relative;
  width: 100%;
  height: 115px;
  overflow: hidden;
  background: var(--bg-surface-elevated);
}

.lesson-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lesson-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 10, 18, 0) 65%, rgba(7, 10, 18, 0.45) 100%);
  pointer-events: none;
}

[data-theme="day"] .lesson-banner-overlay {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0.35) 100%);
}

.lesson-card-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.lesson-card-mcode {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(15, 23, 42, 0.75);
  color: var(--card-accent, #38bdf8);
  border: 1px solid var(--border-color);
  padding: 2px 8px;
  border-radius: 4px;
}

[data-theme="day"] .lesson-card-mcode {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #0284c7;
}

.lesson-card-lbadge {
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--card-accent, #38bdf8);
  color: #070a12;
  padding: 2px 8px;
  border-radius: 4px;
}

.lesson-card-pic-circle {
  position: absolute;
  bottom: -16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 3;
}

[data-theme="day"] .lesson-card-pic-circle {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}

.lesson-card-body {
  padding: 20px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  gap: 12px;
}

.lesson-card-chapter {
  font-size: 0.76rem;
  color: var(--text-dim);
  font-weight: 600;
}

.lesson-card-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.35;
}

.lesson-card-formula {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
  overflow-x: auto;
}

.lesson-card-formula .katex,
.lesson-card-formula .katex * {
  color: #38bdf8 !important;
  -webkit-text-fill-color: #38bdf8 !important;
}

[data-theme="day"] .lesson-card-formula {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
}

[data-theme="day"] .lesson-card-formula .katex,
[data-theme="day"] .lesson-card-formula .katex * {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

.lesson-card-inquiry {
  font-size: 0.88rem;
  color: #f1f5f9;
  line-height: 1.5;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3.5px solid var(--card-accent, #38bdf8);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-weight: 500;
}

.lesson-card-inquiry strong {
  color: var(--card-accent, #38bdf8);
  font-weight: 800;
  margin-right: 4px;
}

[data-theme="day"] .lesson-card-inquiry {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-left: 3.5px solid var(--card-accent, #0284c7) !important;
  color: #0f172a !important;
}

[data-theme="day"] .lesson-card-inquiry strong {
  color: var(--card-accent, #0284c7) !important;
  font-weight: 800 !important;
}

.btn-launch-lesson-sim {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--card-accent, #38bdf8);
  background: rgba(56, 189, 248, 0.12);
  color: var(--card-accent, #38bdf8);
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-launch-lesson-sim:hover {
  background: var(--card-accent, #38bdf8);
  color: #070a12;
  box-shadow: 0 4px 14px var(--chem-glow);
}

/* =========================================================================
   MODAL & SUBCOMPONENT HIGH-CONTRAST OVERRIDES FOR DAY MODE (WCAG AAA)
   ========================================================================= */

[data-theme="day"] .modal-content-shell,
[data-theme="day"] .module-modal {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 65px rgba(15, 23, 42, 0.22) !important;
}

[data-theme="day"] .modal-header,
[data-theme="day"] .module-modal-header {
  background: #f8fafc !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}

[data-theme="day"] .modal-title,
[data-theme="day"] .module-modal-title {
  color: #0f172a !important;
  text-shadow: none !important;
}

[data-theme="day"] .modal-category-badge {
  filter: contrast(1.2);
}

[data-theme="day"] .modal-close-btn {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
}

[data-theme="day"] .modal-close-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="day"] .modal-tabs-header {
  background: #f1f5f9 !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}

[data-theme="day"] .modal-tab-btn {
  color: #475569 !important;
}

[data-theme="day"] .modal-tab-btn:hover {
  color: #0f172a !important;
  background: #ffffff !important;
}

[data-theme="day"] .modal-tab-btn.active {
  background: #ffffff !important;
  color: #0284c7 !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="day"] .modal-tab-btn.active::after {
  background: #0284c7 !important;
  box-shadow: 0 0 8px rgba(2, 132, 199, 0.4) !important;
}

/* Modal Inner Content Cards in Day Mode */
[data-theme="day"] .modal-inquiry-box {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}
[data-theme="day"] .modal-inquiry-prompt {
  color: #0f172a !important;
}

[data-theme="day"] .modal-section-title {
  color: #0f172a !important;
}

[data-theme="day"] .modal-big-idea-text {
  color: #1e293b !important;
  font-weight: 500 !important;
}

[data-theme="day"] .modal-section-subtitle {
  color: #475569 !important;
}

[data-theme="day"] .modal-objectives-list {
  color: #1e293b !important;
}

[data-theme="day"] .modal-objectives-list li {
  color: #1e293b !important;
}

[data-theme="day"] .modal-theory-core {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}
[data-theme="day"] .modal-theory-core h3 {
  color: #0f172a !important;
}
[data-theme="day"] .modal-theory-core-body {
  color: #334155 !important;
}

[data-theme="day"] .modal-theory-card {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  color: #334155 !important;
}
[data-theme="day"] .modal-theory-card ul {
  color: #334155 !important;
}

[data-theme="day"] .modal-worked-example {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border: 1.5px solid #38bdf8 !important;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.08) !important;
}
[data-theme="day"] .worked-example-prob {
  color: #0f172a !important;
}
[data-theme="day"] .worked-example-given {
  background: #ffffff !important;
  border: 1px solid #bae6fd !important;
  color: #0f172a !important;
}
[data-theme="day"] .worked-example-steps {
  color: #1e293b !important;
}
[data-theme="day"] .worked-example-result {
  background: #ffffff !important;
  border: 1.5px solid #0284c7 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12) !important;
}
[data-theme="day"] .worked-example-result-label {
  color: #0f172a !important;
}
[data-theme="day"] .worked-example-result-val {
  color: #0284c7 !important;
}

[data-theme="day"] .modal-ngss-card {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03) !important;
}
[data-theme="day"] .modal-ngss-card p {
  color: #334155 !important;
}

[data-theme="day"] .modal-sandbox-bar {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
}

[data-theme="day"] .formula-card {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
[data-theme="day"] .formula-card:hover {
  background: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 10px 25px -4px rgba(2, 132, 199, 0.16) !important;
}

/* KaTeX & Standalone Math High-Contrast Overrides */
[data-theme="day"] .katex,
[data-theme="day"] .katex * {
  color: #0f172a !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #0f172a !important;
}
[data-theme="day"] .katex .mopen,
[data-theme="day"] .katex .mclose,
[data-theme="day"] .katex .mpunct {
  color: #334155 !important;
}
[data-theme="day"] .math-rendered,
[data-theme="day"] .math-rendered *,
[data-theme="day"] .math-katex-wrapper,
[data-theme="day"] .math-katex-wrapper *,
[data-theme="day"] .math-num-lit,
[data-theme="day"] .math-text,
[data-theme="day"] .math-sup,
[data-theme="day"] .math-sub,
[data-theme="day"] .math-root-index,
[data-theme="day"] .math-italic {
  color: #0f172a !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #0f172a !important;
}
[data-theme="day"] .math-delim {
  color: #475569 !important;
}
[data-theme="day"] .math-op {
  color: #0284c7 !important;
}
[data-theme="day"] .math-func {
  color: #6d28d9 !important;
}
[data-theme="day"] .math-num {
  border-bottom-color: #0f172a !important;
}
[data-theme="day"] .math-sqrt-stem {
  border-top-color: #0f172a !important;
}
[data-theme="day"] .math-radical-svg {
  stroke: #0f172a !important;
}
[data-theme="day"] .math-arrow-line {
  color: #0284c7 !important;
}
[data-theme="day"] .math-arrow-label {
  color: #6d28d9 !important;
}
[data-theme="day"] .math-emf {
  color: #0284c7 !important;
}

[data-theme="day"] .lesson-interactive-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

[data-theme="day"] .interactive-title {
  color: #0f172a !important;
}

[data-theme="day"] .interactive-formula-badge {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="day"] .interactive-formula-badge .katex,
[data-theme="day"] .interactive-formula-badge .katex *,
[data-theme="day"] .interactive-formula-badge .math-rendered,
[data-theme="day"] .interactive-formula-badge .math-rendered * {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-weight: 600 !important;
}

[data-theme="day"] .interactive-inquiry-box {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-left: 4px solid #0284c7 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
  color: #0f172a !important;
}

[data-theme="day"] .interactive-inquiry-box strong {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

[data-theme="day"] .interactive-inquiry-box .inquiry-text {
  color: #0f172a !important;
  font-weight: 500 !important;
}

[data-theme="day"] .interactive-sim-viewport {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-theme="day"] .interactive-sim-viewport canvas {
  border-color: #e2e8f0;
}

[data-theme="day"] .sim-controls-panel {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="day"] .sim-readout-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="day"] .sim-readout-val {
  color: #0f172a !important;
}

/* Comprehensive Telemetry Pills in Day Mode across all 74 lesson interactives */
[data-theme="day"] .sim-readout-pill {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05) !important;
  color: #0f172a !important;
}

[data-theme="day"] .sim-readout-pill .readout-label {
  color: #334155 !important;
  font-weight: 700 !important;
}

[data-theme="day"] .sim-readout-pill .readout-val {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

/* Color-coded variants of sim-readout-pill in Day Mode */
[data-theme="day"] .sim-readout-pill[style*="color: #38bdf8"],
[data-theme="day"] .sim-readout-pill[style*="color:#38bdf8"],
[data-theme="day"] .sim-readout-pill[style*="color: #06b6d4"] {
  background: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0284c7 !important;
  font-weight: 700 !important;
}

[data-theme="day"] .sim-readout-pill[style*="color: #34d399"],
[data-theme="day"] .sim-readout-pill[style*="color:#34d399"],
[data-theme="day"] .sim-readout-pill[style*="color: #10b981"] {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
  font-weight: 700 !important;
}

[data-theme="day"] .sim-readout-pill[style*="color: #f87171"],
[data-theme="day"] .sim-readout-pill[style*="color:#f87171"],
[data-theme="day"] .sim-readout-pill[style*="color: #ef4444"] {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #b91c1c !important;
  font-weight: 700 !important;
}

[data-theme="day"] .sim-readout-pill[style*="color: #fbbf24"],
[data-theme="day"] .sim-readout-pill[style*="color:#fbbf24"],
[data-theme="day"] .sim-readout-pill[style*="color: #f59e0b"] {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #b45309 !important;
  font-weight: 700 !important;
}

[data-theme="day"] .sim-readout-pill[style*="color: #c084fc"],
[data-theme="day"] .sim-readout-pill[style*="color: #a855f7"] {
  background: #faf5ff !important;
  border-color: #e9d5ff !important;
  color: #7e22ce !important;
  font-weight: 700 !important;
}

/* Telemetry Boxes, Live Calculation Strips & Formula Readouts in Day Mode */
[data-theme="day"] .sim-telemetry-box,
[data-theme="day"] div.sim-telemetry-box,
[data-theme="day"] [id$="-osmosis-desc"],
[data-theme="day"] [id$="-denature-box"],
[data-theme="day"] [id$="-stage-desc"],
[data-theme="day"] .sim-data-strip,
[data-theme="day"] .sim-formula-box,
[data-theme="day"] .sim-controls-panel .sim-telemetry-box,
[data-theme="day"] .interactive-split-grid .sim-telemetry-box,
[data-theme="day"] .sim-controls-panel .sim-data-strip,
[data-theme="day"] .sim-controls-panel .sim-formula-box,
[data-theme="day"] .sim-controls-panel > div:not(.sim-readout-pill):not(.control-slider-group) {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="day"] .sim-telemetry-box *,
[data-theme="day"] .sim-data-strip *,
[data-theme="day"] .sim-formula-box *,
[data-theme="day"] .sim-controls-panel > div:not(.sim-readout-pill):not(.control-slider-group) *:not([style*="color:"]):not(.btn-sim-action) {
  color: #0f172a !important;
}

[data-theme="day"] .sim-telemetry-box strong,
[data-theme="day"] .sim-data-strip strong,
[data-theme="day"] .sim-formula-box strong,
[data-theme="day"] .sim-controls-panel > div:not(.sim-readout-pill):not(.control-slider-group) strong {
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* Direct Telemetry ID Selectors in Day Mode (Values & Outputs) */
[data-theme="day"] .sim-telemetry-box [id$="-val"],
[data-theme="day"] .sim-telemetry-box [id$="-disp"],
[data-theme="day"] .sim-telemetry-box [id$="-txt"],
[data-theme="day"] .sim-telemetry-box [id$="-desc"],
[data-theme="day"] .sim-telemetry-box [id$="-status"],
[data-theme="day"] .sim-controls-panel [id$="-val"],
[data-theme="day"] .sim-controls-panel [id$="-disp"] {
  color: #0284c7 !important;
  font-weight: 700 !important;
}

[data-theme="day"] .sim-telemetry-box [style*="color: #38bdf8"],
[data-theme="day"] .sim-telemetry-box [style*="color:#38bdf8"],
[data-theme="day"] .sim-telemetry-box [style*="color: #06b6d4"],
[data-theme="day"] .sim-telemetry-box [style*="color:#06b6d4"],
[data-theme="day"] .sim-controls-panel [style*="color: #38bdf8"],
[data-theme="day"] .sim-controls-panel [style*="color:#38bdf8"],
[data-theme="day"] .sim-controls-panel [style*="color: #06b6d4"],
[data-theme="day"] .sim-controls-panel [style*="color:#06b6d4"],
[data-theme="day"] .sim-controls-panel [style*="color: #3b82f6"] {
  color: #0284c7 !important;
}

[data-theme="day"] .sim-telemetry-box [style*="color: #34d399"],
[data-theme="day"] .sim-telemetry-box [style*="color:#34d399"],
[data-theme="day"] .sim-telemetry-box [style*="color: #10b981"],
[data-theme="day"] .sim-telemetry-box [style*="color:#10b981"],
[data-theme="day"] .sim-telemetry-box [style*="color: #047857"],
[data-theme="day"] .sim-telemetry-box [style*="color:#047857"],
[data-theme="day"] .sim-controls-panel [style*="color: #34d399"],
[data-theme="day"] .sim-controls-panel [style*="color:#34d399"],
[data-theme="day"] .sim-controls-panel [style*="color: #10b981"],
[data-theme="day"] .sim-controls-panel [style*="color:#10b981"],
[data-theme="day"] .sim-controls-panel [style*="color: #047857"],
[data-theme="day"] .sim-controls-panel [style*="color:#047857"] {
  color: #047857 !important;
}

[data-theme="day"] .sim-telemetry-box [style*="color: #f87171"],
[data-theme="day"] .sim-telemetry-box [style*="color:#f87171"],
[data-theme="day"] .sim-telemetry-box [style*="color: #ef4444"],
[data-theme="day"] .sim-telemetry-box [style*="color:#ef4444"],
[data-theme="day"] .sim-controls-panel [style*="color: #f87171"],
[data-theme="day"] .sim-controls-panel [style*="color:#f87171"],
[data-theme="day"] .sim-controls-panel [style*="color: #ef4444"],
[data-theme="day"] .sim-controls-panel [style*="color:#ef4444"] {
  color: #b91c1c !important;
}

[data-theme="day"] .sim-telemetry-box [style*="color: #fbbf24"],
[data-theme="day"] .sim-telemetry-box [style*="color:#fbbf24"],
[data-theme="day"] .sim-telemetry-box [style*="color: #f59e0b"],
[data-theme="day"] .sim-telemetry-box [style*="color:#f59e0b"],
[data-theme="day"] .sim-telemetry-box [style*="color: #b45309"],
[data-theme="day"] .sim-telemetry-box [style*="color:#b45309"],
[data-theme="day"] .sim-controls-panel [style*="color: #fbbf24"],
[data-theme="day"] .sim-controls-panel [style*="color:#fbbf24"],
[data-theme="day"] .sim-controls-panel [style*="color: #f59e0b"],
[data-theme="day"] .sim-controls-panel [style*="color:#f59e0b"],
[data-theme="day"] .sim-controls-panel [style*="color: #b45309"],
[data-theme="day"] .sim-controls-panel [style*="color:#b45309"] {
  color: #b45309 !important;
}

[data-theme="day"] .sim-telemetry-box [style*="color: #cbd5e1"],
[data-theme="day"] .sim-telemetry-box [style*="color:#cbd5e1"],
[data-theme="day"] .sim-controls-panel [style*="color: #cbd5e1"],
[data-theme="day"] .sim-controls-panel [style*="color:#cbd5e1"] {
  color: #334155 !important;
}

[data-theme="day"] .control-slider-group .slider-header {
  color: #334155 !important;
  font-weight: 700 !important;
}

[data-theme="day"] .control-slider-group .slider-header strong {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

[data-theme="day"] .range-slider {
  background: #cbd5e1 !important;
}

[data-theme="day"] .range-slider::-webkit-slider-thumb {
  background: #0284c7 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.4) !important;
}

[data-theme="day"] .sim-controls-panel select {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

[data-theme="day"] .flashcard-face {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="day"] .flashcard-front,
[data-theme="day"] .flashcard-back {
  background: #ffffff !important;
}

[data-theme="day"] .flashcard-header,
[data-theme="day"] .flashcard-footer {
  border-color: #e2e8f0 !important;
}

[data-theme="day"] .flashcard-front-title,
[data-theme="day"] .flashcard-back-title {
  color: #0f172a !important;
}

[data-theme="day"] .flashcard-objectives-box {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}

[data-theme="day"] .quiz-config-card,
[data-theme="day"] .quiz-exam-card,
[data-theme="day"] .quiz-question-card,
[data-theme="day"] .question-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="day"] .question-header {
  border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="day"] .q-badge {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="day"] .quiz-question-text,
[data-theme="day"] .q-text,
[data-theme="day"] .q-text * {
  color: #0f172a !important;
}

[data-theme="day"] .quiz-option-item,
[data-theme="day"] .q-option-btn {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

[data-theme="day"] .quiz-option-item:hover,
[data-theme="day"] .q-option-btn:hover {
  background: #f0f9ff !important;
  border-color: #0284c7 !important;
  color: #0369a1 !important;
}

[data-theme="day"] .q-option-btn.selected {
  border-color: #0284c7 !important;
  background: #e0f2fe !important;
  color: #0369a1 !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25) !important;
}

[data-theme="day"] .q-option-btn.correct {
  border-color: #059669 !important;
  background: #dcfce7 !important;
  color: #14532d !important;
}

[data-theme="day"] .q-option-btn.incorrect {
  border-color: #dc2626 !important;
  background: #fee2e2 !important;
  color: #7f1d1d !important;
}

[data-theme="day"] .q-option-letter {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="day"] .explanation-box {
  background: #f0fdf4 !important;
  border: 1.5px solid #86efac !important;
  border-left: 4px solid #059669 !important;
  color: #0f172a !important;
}

[data-theme="day"] .explanation-box * {
  color: #0f172a !important;
}

[data-theme="day"] .print-actions-bar {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

/* =========================================================================
   DAY MODE (LIGHT THEME) HIGH-CONTRAST SYSTEM (WCAG AAA 7:1+ COMPLIANT)
   ========================================================================= */

/* 1. Module Viewer: Lesson Navigator Pills Bar (Image 1) */
[data-theme="day"] .interactive-lesson-pills-bar {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="day"] .pills-bar-label {
  color: #0f172a !important;
  font-weight: 800 !important;
}

[data-theme="day"] .modal-lesson-select {
  background: #ffffff !important;
  border: 1.5px solid #0284c7 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="day"] .modal-lesson-select:hover {
  border-color: #0369a1 !important;
  box-shadow: 0 0 8px rgba(2, 132, 199, 0.25) !important;
}

[data-theme="day"] .modal-lesson-select:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25) !important;
}

[data-theme="day"] .btn-lesson-step {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="day"] .btn-lesson-step:hover:not(:disabled) {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

[data-theme="day"] .btn-lesson-step:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

[data-theme="day"] .lesson-pill-btn {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  color: #1e293b !important;
  font-weight: 600 !important;
}

[data-theme="day"] .lesson-pill-btn:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

[data-theme="day"] .lesson-pill-btn.active {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important;
}

[data-theme="day"] .lesson-flashcard-btn,
[data-theme="day"] #btn-modal-open-flashcard {
  background: #ffffff !important;
  border: 1.5px solid #ec4899 !important;
  color: #db2777 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(219, 39, 119, 0.12) !important;
}

[data-theme="day"] .lesson-flashcard-btn:hover,
[data-theme="day"] #btn-modal-open-flashcard:hover {
  background: #fdf2f8 !important;
  color: #be185d !important;
  border-color: #db2777 !important;
}

[data-theme="day"] .btn-sim-action {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-weight: 600 !important;
}

[data-theme="day"] .btn-sim-action:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

[data-theme="day"] .btn-sim-action.active {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
}

/* 2. Smartboard Floating Pen Bar (Image 3) */
[data-theme="day"] .smartboard-pen-bar {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.16) !important;
}

[data-theme="day"] .smartboard-pen-bar .icon-action-btn,
[data-theme="day"] .icon-action-btn {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
}

[data-theme="day"] .smartboard-pen-bar .icon-action-btn:hover,
[data-theme="day"] .icon-action-btn:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

[data-theme="day"] .smartboard-pen-bar .icon-action-btn.active,
[data-theme="day"] .icon-action-btn.active {
  background: #e0f2fe !important;
  border-color: #0284c7 !important;
  color: #0369a1 !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25) !important;
}

[data-theme="day"] .sb-color-btn.active {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0f172a, 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  outline: none !important;
}

[data-theme="day"] #sb-tool-highlighter.active {
  background: #fef9c3 !important;
  border-color: #ca8a04 !important;
  color: #854d0e !important;
  box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.25) !important;
}

[data-theme="day"] .sb-drag-handle,
[data-theme="day"] .sb-mini-drag-grip {
  color: #64748b;
}
[data-theme="day"] .sb-drag-handle:hover,
[data-theme="day"] .sb-mini-drag-grip:hover {
  color: #0284c7;
  background: #e2e8f0;
}

[data-theme="day"] .smartboard-pen-bar.sb-minimized {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15) !important;
}

[data-theme="day"] .sb-mini-icon-wrapper {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

[data-theme="day"] .sb-mini-color-dot {
  border: 2px solid #ffffff;
}

[data-theme="day"] .sb-mini-label {
  color: #0f172a;
}

[data-theme="day"] .sb-mini-expand-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

[data-theme="day"] .sb-mini-expand-btn:hover {
  background: #e0f2fe;
  border-color: #0284c7;
  color: #0369a1;
}

[data-theme="day"] .sb-size-popover {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18) !important;
}

[data-theme="day"] .sb-size-popover::after {
  border-color: #ffffff transparent transparent transparent !important;
}

[data-theme="day"] .sb-size-popover.popover-below::after {
  border-color: transparent transparent #ffffff transparent !important;
}

[data-theme="day"] .sb-size-preview-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="day"] .sb-preset-btn {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="day"] .sb-preset-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="day"] .sb-preset-btn.active {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

/* Day Theme Overrides for Smartboard Presentation Suite */
[data-theme="day"] .sb-tools-divider {
  background: #cbd5e1;
}

[data-theme="day"] .sb-timer-widget {
  background: #ffffff !important;
  border: 2px solid #cbd5e1 !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16), 0 0 20px rgba(2, 132, 199, 0.15) !important;
}

[data-theme="day"] .sb-timer-title-box {
  color: #0f172a;
}

[data-theme="day"] .sb-timer-header {
  border-bottom-color: #e2e8f0;
}

[data-theme="day"] .sb-timer-btn-icon {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}
[data-theme="day"] .sb-timer-btn-icon:hover {
  background: #e0f2fe;
  color: #0284c7;
}

[data-theme="day"] .sb-timer-tabs {
  background: #f1f5f9;
}
[data-theme="day"] .sb-timer-tab {
  color: #64748b;
}
[data-theme="day"] .sb-timer-tab.active {
  background: #0284c7;
  color: #ffffff;
}

[data-theme="day"] .sb-timer-display-box {
  background: #f8fafc;
  border-color: #cbd5e1;
}
[data-theme="day"] .sb-timer-display {
  color: #0284c7;
  text-shadow: none;
}

[data-theme="day"] .sb-timer-preset,
[data-theme="day"] .sb-timer-adj-btn,
[data-theme="day"] .sb-timer-sec-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}

[data-theme="day"] .sb-timer-preset.active {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
}

[data-theme="day"] .sb-curtain-handle {
  background: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
[data-theme="day"] .sb-curtain-info {
  color: #0f172a;
}
[data-theme="day"] .sb-curtain-pct-badge {
  background: #e0f2fe;
  border-color: #bae6fd;
  color: #0284c7;
}
[data-theme="day"] .sb-curtain-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}

[data-theme="day"] .sb-spotlight-hud {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
[data-theme="day"] .sb-spotlight-preset {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}
[data-theme="day"] .sb-spotlight-preset.active {
  background: #0284c7;
  color: #ffffff;
}

/* 3. Interactive Virtual Lab Controls & Sliders (Image 4) */
[data-theme="day"] .lab-controls-panel {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
  color: #0f172a !important;
}

[data-theme="day"] .control-label,
[data-theme="day"] .control-label span:first-child {
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="day"] .control-val {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

[data-theme="day"] .lab-controls-panel label {
  color: #0f172a !important;
  font-weight: 600 !important;
}

[data-theme="day"] .lab-controls-panel div[style*="color: var(--text-dim)"],
[data-theme="day"] .lab-controls-panel div[style*="color:var(--text-dim)"] {
  color: #475569 !important;
  font-weight: 600 !important;
}

[data-theme="day"] .lab-controls-panel div[style*="color: var(--text-dim)"] span,
[data-theme="day"] .lab-controls-panel div[style*="color:var(--text-dim)"] span {
  color: #475569 !important;
  font-weight: 600 !important;
}

[data-theme="day"] .lab-controls-panel .select-input {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="day"] .lab-controls-panel .custom-slider {
  background: #e2e8f0 !important;
}

[data-theme="day"] .lab-action-buttons {
  border-top-color: #e2e8f0 !important;
}

[data-theme="day"] #btn-opt-45 {
  background: #f0fdf4 !important;
  border: 1.5px solid #10b981 !important;
  color: #15803d !important;
  font-weight: 700 !important;
}

[data-theme="day"] #btn-opt-comp {
  background: #fffbeb !important;
  border: 1.5px solid #f59e0b !important;
  color: #b45309 !important;
  font-weight: 700 !important;
}

/* 4. Simulation Canvas Floating Overlays: Formula Bar & Telemetry Dashboard (Image 4) */
[data-theme="day"] .sim-floating-formula-bar {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15) !important;
  color: #0f172a !important;
}

[data-theme="day"] .sim-floating-formula-bar span {
  color: #0f172a !important;
}

[data-theme="day"] .sim-floating-formula-bar span[style*="color: #94a3b8"],
[data-theme="day"] .sim-floating-formula-bar span[style*="color:#94a3b8"] {
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="day"] .sim-floating-formula-bar .math-rendered,
[data-theme="day"] .sim-floating-formula-bar .math-rendered *,
[data-theme="day"] .sim-floating-formula-bar .katex,
[data-theme="day"] .sim-floating-formula-bar .katex * {
  color: #0f172a !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #0f172a !important;
}

[data-theme="day"] .sim-telemetry-dashboard {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15) !important;
  color: #0f172a !important;
}

[data-theme="day"] .sim-telemetry-dashboard div div:first-child {
  color: #475569 !important;
  font-weight: 700 !important;
}

[data-theme="day"] .sim-telemetry-dashboard > div {
  border-right-color: #e2e8f0 !important;
}

/* 5. Chemistry Periodic Table Virtual Lab (Image 2) */
[data-theme="day"] .ptable-heatmap-bar {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="day"] .ptable-heatmap-title {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

[data-theme="day"] .ptable-heatmap-hint {
  color: #334155 !important;
  font-weight: 600 !important;
}

[data-theme="day"] .ptable-inspector-card,
[data-theme="day"] #element-inspector {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
  color: #0f172a !important;
}

[data-theme="day"] #elem-symbol {
  color: #0f172a !important;
  text-shadow: none !important;
}

[data-theme="day"] #elem-name {
  color: #0f172a !important;
}

[data-theme="day"] #elem-mass {
  color: #475569 !important;
}

[data-theme="day"] #element-inspector span[style*="color: var(--text-muted)"],
[data-theme="day"] #element-inspector span[style*="color:var(--text-muted)"] {
  color: #334155 !important;
  font-weight: 600 !important;
}

[data-theme="day"] .ptable-gallery-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="day"] .ptable-flame-card {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
}

[data-theme="day"] .ptable-flame-card span {
  color: #475569 !important;
  font-weight: 600 !important;
}

[data-theme="day"] #flame-desc {
  color: #0f172a !important;
  font-weight: 600 !important;
}

[data-theme="day"] #elem-z {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

[data-theme="day"] #elem-cat-badge {
  font-weight: 800 !important;
  background: #ecfccb !important;
  color: #365314 !important;
  border: 1px solid #a3e635 !important;
}

[data-theme="day"] #elem-ec {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

[data-theme="day"] #elem-en {
  color: #b45309 !important;
  font-weight: 800 !important;
}

[data-theme="day"] #elem-ie {
  color: #047857 !important;
  font-weight: 800 !important;
}

[data-theme="day"] #elem-radius {
  color: #be185d !important;
  font-weight: 800 !important;
}

[data-theme="day"] #spectral-lines-text {
  color: #0284c7 !important;
  font-weight: 700 !important;
}

[data-theme="day"] .specimen-btn {
  background: #f8fafc !important;
}
[data-theme="day"] .specimen-btn[data-sym="Cu"] { border-color: #ea580c !important; color: #c2410c !important; font-weight: 700 !important; }
[data-theme="day"] .specimen-btn[data-sym="Au"] { border-color: #ca8a04 !important; color: #a16207 !important; font-weight: 700 !important; }
[data-theme="day"] .specimen-btn[data-sym="S"] { border-color: #65a30d !important; color: #4d7c0f !important; font-weight: 700 !important; }
[data-theme="day"] .specimen-btn[data-sym="Bi"] { border-color: #0891b2 !important; color: #0e7490 !important; font-weight: 700 !important; }
[data-theme="day"] .specimen-btn[data-sym="Ne"] { border-color: #db2777 !important; color: #be185d !important; font-weight: 700 !important; }

/* 6. Flashcards Engine Day Mode (Image 5) */
[data-theme="day"] .flashcard-hero-banner {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="day"] .flashcard-hero-banner .hero-title {
  color: #0f172a !important;
}

[data-theme="day"] .flashcard-hero-banner .hero-desc {
  color: #334155 !important;
  font-weight: 500 !important;
}

[data-theme="day"] .unit-filter-chip[data-fsub="CHEM"].active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}

[data-theme="day"] .unit-filter-chip[data-fsub="BIO"].active {
  background: #059669 !important;
  color: #ffffff !important;
  border-color: #059669 !important;
}

[data-theme="day"] .unit-filter-chip[data-fsub="PHYS"].active {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4f46e5 !important;
}

[data-theme="day"] .flashcard-filter-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
  color: #0f172a !important;
}

[data-theme="day"] .fc-select-label {
  color: #0f172a !important;
  font-weight: 800 !important;
}

[data-theme="day"] .fc-custom-select {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="day"] .fc-custom-select:hover {
  border-color: #0284c7 !important;
}

[data-theme="day"] .fc-custom-select:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2) !important;
}

[data-theme="day"] .fc-search-input {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="day"] .fc-search-input:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2) !important;
}

[data-theme="day"] .fc-filter-breadcrumb {
  border-top-color: #e2e8f0 !important;
  color: #334155 !important;
}

[data-theme="day"] .fc-filter-label {
  color: #0284c7 !important;
  font-weight: 700 !important;
}

[data-theme="day"] .fc-filter-desc {
  color: #0f172a !important;
  font-weight: 600 !important;
}

[data-theme="day"] .fc-filter-badge {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1px solid #bae6fd !important;
}

[data-theme="day"] .fc-mastered-indicator {
  color: #15803d !important;
  font-weight: 700 !important;
}

[data-theme="day"] .fc-nav-hint {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 600 !important;
}

[data-theme="day"] .flashcard-topic-pill {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-weight: 600 !important;
}

[data-theme="day"] .flashcard-category-tag {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

[data-theme="day"] .flashcard-footer-prompt {
  color: #0284c7 !important;
  font-weight: 700 !important;
}

[data-theme="day"] .flashcard-formula-box {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.03) !important;
}

[data-theme="day"] .flashcard-formula-box .math-rendered,
[data-theme="day"] .flashcard-formula-box .math-rendered *,
[data-theme="day"] .flashcard-formula-box .katex,
[data-theme="day"] .flashcard-formula-box .katex * {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

[data-theme="day"] .flashcard-callout-bigidea {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  border-left: 4px solid #0284c7 !important;
}

[data-theme="day"] .flashcard-callout-phenomenon {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-left: 4px solid #d97706 !important;
}

[data-theme="day"] .flashcard-callout-inquiry {
  background: #f5f3ff !important;
  border: 1px solid #ddd6fe !important;
  border-left: 4px solid #7c3aed !important;
}

/* 7. Smartboard Classroom Presenter Mode in Day Mode */
[data-theme="day"] .presenter-container {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
}

[data-theme="day"] .presenter-q-num {
  color: #0f172a !important;
}

[data-theme="day"] .presenter-q-prompt {
  color: #0f172a !important;
}

[data-theme="day"] .presenter-q-prompt *,
[data-theme="day"] .presenter-q-prompt .katex,
[data-theme="day"] .presenter-q-prompt .katex *,
[data-theme="day"] .presenter-q-prompt .math-rendered,
[data-theme="day"] .presenter-q-prompt .math-rendered * {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

[data-theme="day"] .presenter-opt-tile {
  background: #f8fafc !important;
  border: 2px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="day"] .presenter-opt-tile:hover {
  background: #f0f9ff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.15) !important;
}

[data-theme="day"] .presenter-opt-tile.is-correct {
  background: #dcfce7 !important;
  border-color: #059669 !important;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.15) !important;
}

[data-theme="day"] .presenter-opt-tile.is-correct .presenter-opt-letter {
  background: #059669 !important;
  color: #ffffff !important;
}

[data-theme="day"] .presenter-opt-tile.is-correct .presenter-opt-text {
  color: #14532d !important;
}

[data-theme="day"] .presenter-opt-letter {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="day"] .presenter-opt-text {
  color: #0f172a !important;
}

[data-theme="day"] .presenter-opt-text *,
[data-theme="day"] .presenter-opt-text .katex,
[data-theme="day"] .presenter-opt-text .katex *,
[data-theme="day"] .presenter-opt-text .math-rendered,
[data-theme="day"] .presenter-opt-text .math-rendered * {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

[data-theme="day"] .presenter-poll-track {
  background: #e2e8f0 !important;
}

[data-theme="day"] .presenter-explanation-box {
  background: #f0fdf4 !important;
  border-left: 5px solid #059669 !important;
  color: #0f172a !important;
}

[data-theme="day"] .presenter-explanation-box div:first-child {
  color: #059669 !important;
}

[data-theme="day"] .presenter-explanation-text,
[data-theme="day"] .presenter-explanation-text * {
  color: #0f172a !important;
}

/* 8. Virtual Laboratories Suite Hero & Header Bars in Day Mode */
[data-theme="day"] .labs-suite-hero {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="day"] .labs-suite-hero .hero-title {
  color: #0f172a !important;
}

[data-theme="day"] .labs-suite-hero .hero-desc {
  color: #334155 !important;
  font-weight: 500 !important;
}

[data-theme="day"] .labs-suite-badge {
  background: #f3e8ff !important;
  color: #7e22ce !important;
  border: 1px solid #d8b4fe !important;
  font-weight: 700 !important;
}

[data-theme="day"] .lab-header-bar {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
  color: #0f172a !important;
}

[data-theme="day"] .lab-header-bar span {
  color: #0f172a !important;
}

[data-theme="day"] .lab-header-bar .badge {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1px solid #bae6fd !important;
  font-weight: 700 !important;
}

[data-theme="day"] .lab-view-switcher {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
}

[data-theme="day"] .lab-view-switcher button {
  background: transparent !important;
  color: #475569 !important;
}

[data-theme="day"] .lab-view-switcher button:hover {
  color: #0f172a !important;
}

[data-theme="day"] .lab-view-switcher button.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25) !important;
}

[data-theme="day"] .lab-checkbox-label {
  color: #0f172a !important;
  font-weight: 600 !important;
}

[data-theme="day"] .lab-checkbox-label span {
  color: #0f172a !important;
}

/* 9. Periodic Table Elements Grid & Cells in Day Mode */
[data-theme="day"] .ptable-grid {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="day"] .ptable-cell {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="day"] .ptable-cell:hover {
  background: #f8fafc !important;
  border-color: var(--trend-color, #0284c7) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="day"] .ptable-cell.selected {
  background: #e0f2fe !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 2px #0284c7, 0 4px 12px rgba(2, 132, 199, 0.2) !important;
}

[data-theme="day"] .ptable-cell-z {
  color: #64748b !important;
  font-weight: 700 !important;
}

[data-theme="day"] .ptable-cell-s {
  color: #0f172a !important;
  font-weight: 800 !important;
}

[data-theme="day"] .ptable-cell-m {
  color: #64748b !important;
  font-weight: 600 !important;
}

/* 10. Simulation Telemetry Cards, Sub-Cards, and Formulas in Day Mode */
[data-theme="day"] .sim-telemetry-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
  color: #0f172a !important;
}

[data-theme="day"] .sim-telemetry-card span[style*="color: var(--text-muted)"],
[data-theme="day"] .sim-telemetry-card span[style*="color:var(--text-muted)"] {
  color: #475569 !important;
  font-weight: 600 !important;
}

[data-theme="day"] .sim-sub-card {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

[data-theme="day"] .sim-sub-card span {
  color: #0f172a !important;
}

[data-theme="day"] .sim-sub-card span[style*="color: var(--text-dim)"],
[data-theme="day"] .sim-sub-card span[style*="color:var(--text-dim)"] {
  color: #475569 !important;
  font-weight: 600 !important;
}

[data-theme="day"] .sim-sub-card .katex,
[data-theme="day"] .sim-sub-card .katex *,
[data-theme="day"] .sim-sub-card .math-rendered,
[data-theme="day"] .sim-sub-card .math-rendered * {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

[data-theme="day"] .microscope-slide-title {
  color: #0f172a !important;
  font-weight: 800 !important;
}

[data-theme="day"] .slide-stain-badge {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1px solid #bae6fd !important;
  font-weight: 700 !important;
}

[data-theme="day"] #disp-stage-x,
[data-theme="day"] #disp-stage-y {
  color: #0284c7 !important;
  font-weight: 700 !important;
}

[data-theme="day"] #cell-hud {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1) !important;
  color: #0f172a !important;
}

[data-theme="day"] #cell-hud span[style*="color: #94a3b8"] {
  color: #475569 !important;
  font-weight: 600 !important;
}

[data-theme="day"] #cell-hud #hud-genotype {
  color: #0284c7 !important;
}

[data-theme="day"] #cell-hud #hud-phenotype {
  color: #b45309 !important;
}

/* Classical Presets styling (bio-punnett-square & genetics labs) */
.btn-preset {
  font-size: 0.8rem;
  padding: 6px 14px;
  border-radius: 9999px;
  transition: all 0.2s ease;
  font-weight: 600;
  cursor: pointer;
}
.btn-preset.active {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: #10b981 !important;
  color: #34d399 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.3) !important;
  font-weight: 700 !important;
}

[data-theme="day"] .btn-preset {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
}
[data-theme="day"] .btn-preset:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}
[data-theme="day"] .btn-preset.active {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35) !important;
}

/* =========================================================================
   COMPREHENSIVE SITE-WIDE CONTRAST & READABILITY SYSTEM (WCAG AAA 7:1+)
   ========================================================================= */

/* 1. Genetics & Punnett Square Laboratory */
[data-theme="day"] #readout-genotype,
[data-theme="day"] #stat-chisq,
[data-theme="day"] #disp-trials-count,
[data-theme="day"] #inquiry-math {
  color: #0284c7 !important;
}

[data-theme="day"] .genotype-pill {
  background: #f0f9ff !important;
  border: 1.5px solid #bae6fd !important;
  color: #0284c7 !important;
}

[data-theme="day"] .genotype-pill strong,
[data-theme="day"] .genotype-pill .genotype-count {
  color: #0f172a !important;
  font-weight: 800 !important;
}

[data-theme="day"] .genotype-letters {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

[data-theme="day"] .genotype-separator {
  color: #475569 !important;
}

[data-theme="day"] .pheno-chip-row {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="day"] .pheno-chip-title {
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="day"] .pheno-chip-ratio {
  color: #334155 !important;
  font-weight: 600 !important;
}

[data-theme="day"] .pheno-chip-count,
[data-theme="day"] .hud-count-val,
[data-theme="day"] .pheno-chip-ratio strong {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

[data-theme="day"] #stat-pval {
  color: #047857 !important;
  font-weight: 800 !important;
}

/* 2. Mini-Punnett Lesson Simulation */
[data-theme="day"] .mini-punnett-breakdown {
  color: #0f172a !important;
  font-weight: 800 !important;
}
[data-theme="day"] .mini-punnett-allele-p1 {
  color: #0284c7 !important;
  font-weight: 800 !important;
}
[data-theme="day"] .mini-punnett-allele-p2 {
  color: #db2777 !important;
  font-weight: 800 !important;
}
[data-theme="day"] .mini-punnett-cell {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* 3. Module Overview Tab & Lesson Cards */
[data-theme="day"] .lesson-card-item {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="day"] .lesson-card-item:hover {
  border-color: #0284c7 !important;
  background: #f8fafc !important;
}

[data-theme="day"] .lesson-card-item.active {
  background: #f0f9ff !important;
  border: 2px solid #0284c7 !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.15) !important;
}

[data-theme="day"] .lesson-card-item .btn-select-lesson-interactive {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="day"] .lesson-card-item.active .btn-select-lesson-interactive {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
}

[data-theme="day"] #btn-jump-to-interactive-tab {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
}

[data-theme="day"] #sel-lab-lesson {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

[data-theme="day"] .curriculum-standard-badge {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1px solid #7dd3fc !important;
  font-weight: 800 !important;
}

[data-theme="day"] .param-desc {
  color: #334155 !important;
  font-weight: 600 !important;
}

/* 4. Canvas Floating Badges & HUD Overlays */
[data-theme="day"] .badge[style*="background: rgba(15, 23, 42"],
[data-theme="day"] .badge[style*="background: rgba(15,23,42"],
[data-theme="day"] .badge[style*="background: rgba(10, 15, 30"] {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1) !important;
}

[data-theme="day"] .badge[style*="color: #34d399"],
[data-theme="day"] .badge[style*="color:#34d399"],
[data-theme="day"] #image-nature-badge {
  color: #047857 !important;
  font-weight: 800 !important;
}

[data-theme="day"] .badge[style*="color: #38bdf8"],
[data-theme="day"] .badge[style*="color:#38bdf8"],
[data-theme="day"] #hud-trait-pill {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

[data-theme="day"] .badge[style*="color: #fbbf24"],
[data-theme="day"] .badge[style*="color:#fbbf24"] {
  color: #b45309 !important;
  font-weight: 800 !important;
}

[data-theme="day"] #env-badge,
[data-theme="day"] #mag-badge,
[data-theme="day"] #topo-badge,
[data-theme="day"] #mutation-badge,
[data-theme="day"] #gas-status,
[data-theme="day"] #optics-type-label {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* 5. Telemetry Dashboards Across All Virtual Labs */
[data-theme="day"] .sim-telemetry-dashboard [style*="color: #94a3b8"],
[data-theme="day"] .sim-telemetry-dashboard [style*="color:#94a3b8"],
[data-theme="day"] .sim-telemetry-card [style*="color: #94a3b8"],
[data-theme="day"] .sim-telemetry-card [style*="color:#94a3b8"] {
  color: #475569 !important;
  font-weight: 700 !important;
}

[data-theme="day"] .sim-telemetry-dashboard [style*="color: #38bdf8"],
[data-theme="day"] .sim-telemetry-dashboard [style*="color:#38bdf8"],
[data-theme="day"] .sim-telemetry-card [style*="color: #38bdf8"],
[data-theme="day"] .sim-telemetry-card [style*="color:#38bdf8"],
[data-theme="day"] #val-v,
[data-theme="day"] #val-mag,
[data-theme="day"] #val-range,
[data-theme="day"] #disp-digital-vol,
[data-theme="day"] #disp-digital-pressure,
[data-theme="day"] #na-disp {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

[data-theme="day"] .sim-telemetry-dashboard [style*="color: #10b981"],
[data-theme="day"] .sim-telemetry-dashboard [style*="color:#10b981"],
[data-theme="day"] .sim-telemetry-dashboard [style*="color: #34d399"],
[data-theme="day"] .sim-telemetry-dashboard [style*="color:#34d399"],
[data-theme="day"] .sim-telemetry-card [style*="color: #10b981"],
[data-theme="day"] .sim-telemetry-card [style*="color:#10b981"],
[data-theme="day"] .sim-telemetry-card [style*="color: #34d399"],
[data-theme="day"] .sim-telemetry-card [style*="color:#34d399"],
[data-theme="day"] #val-i,
[data-theme="day"] #val-di,
[data-theme="day"] #val-maxh,
[data-theme="day"] #res-disp,
[data-theme="day"] #disp-digital-ph,
[data-theme="day"] #anal-target-text {
  color: #047857 !important;
  font-weight: 800 !important;
}

[data-theme="day"] .sim-telemetry-dashboard [style*="color: #f59e0b"],
[data-theme="day"] .sim-telemetry-dashboard [style*="color:#f59e0b"],
[data-theme="day"] .sim-telemetry-dashboard [style*="color: #fbbf24"],
[data-theme="day"] .sim-telemetry-dashboard [style*="color:#fbbf24"],
[data-theme="day"] .sim-telemetry-card [style*="color: #f59e0b"],
[data-theme="day"] .sim-telemetry-card [style*="color:#f59e0b"],
[data-theme="day"] .sim-telemetry-card [style*="color: #fbbf24"],
[data-theme="day"] .sim-telemetry-card [style*="color:#fbbf24"],
[data-theme="day"] #val-time,
[data-theme="day"] #val-req,
[data-theme="day"] #val-do,
[data-theme="day"] #val-ke,
[data-theme="day"] #disp-temp-kelvin {
  color: #b45309 !important;
  font-weight: 800 !important;
}

[data-theme="day"] .sim-telemetry-dashboard [style*="color: #ec4899"],
[data-theme="day"] .sim-telemetry-dashboard [style*="color:#ec4899"],
[data-theme="day"] .sim-telemetry-card [style*="color: #ec4899"],
[data-theme="day"] .sim-telemetry-card [style*="color:#ec4899"],
[data-theme="day"] #val-power {
  color: #be185d !important;
  font-weight: 800 !important;
}

[data-theme="day"] .sim-telemetry-dashboard [style*="color: #818cf8"],
[data-theme="day"] .sim-telemetry-dashboard [style*="color:#818cf8"],
[data-theme="day"] .sim-telemetry-card [style*="color: #818cf8"],
[data-theme="day"] .sim-telemetry-card [style*="color:#818cf8"],
[data-theme="day"] #val-f {
  color: #4338ca !important;
  font-weight: 800 !important;
}

/* 6. Hero & Platform Metrics */
[data-theme="day"] .metric-num {
  color: #0284c7 !important;
  font-weight: 800 !important;
}
[data-theme="day"] .metric-num[style*="color: #38bdf8"],
[data-theme="day"] .metric-num[style*="color:#38bdf8"] {
  color: #0284c7 !important;
}
[data-theme="day"] .metric-num[style*="color: #10b981"],
[data-theme="day"] .metric-num[style*="color:#10b981"] {
  color: #059669 !important;
}
[data-theme="day"] .metric-num[style*="color: #f59e0b"],
[data-theme="day"] .metric-num[style*="color:#f59e0b"] {
  color: #b45309 !important;
}
[data-theme="day"] .metric-label {
  color: #334155 !important;
  font-weight: 700 !important;
}

/* 7. Quiz Engine High Contrast */
[data-theme="day"] #scope-status-pill {
  background: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0284c7 !important;
  font-weight: 800 !important;
}

[data-theme="day"] #scope-counter-badge {
  background: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0284c7 !important;
  font-weight: 800 !important;
}

[data-theme="day"] #btn-scope-filtered {
  border-color: #0284c7 !important;
  color: #0284c7 !important;
  background: #ffffff !important;
  font-weight: 700 !important;
}

[data-theme="day"] #summary-ready-count {
  color: #0284c7 !important;
  font-weight: 800 !important;
}

[data-theme="day"] #summary-scope-count {
  color: #047857 !important;
  font-weight: 800 !important;
}

[data-theme="day"] .q-badge {
  background: #f1f5f9 !important;
  color: #0284c7 !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 800 !important;
}

/* 8. Flashcards System */
[data-theme="day"] .flashcard-hero-banner .hero-badge {
  background: #fdf2f8 !important;
  border-color: #fbcfe8 !important;
  color: #be185d !important;
  font-weight: 800 !important;
}

[data-theme="day"] #btn-reset-filters {
  border-color: #dc2626 !important;
  color: #dc2626 !important;
  background: #ffffff !important;
  font-weight: 700 !important;
}

[data-theme="day"] #btn-clear-search {
  color: #475569 !important;
  font-weight: 800 !important;
}

[data-theme="day"] #btn-open-lesson-lab {
  border-color: #0284c7 !important;
  color: #0284c7 !important;
  background: #ffffff !important;
  font-weight: 700 !important;
}

[data-theme="day"] .flashcard-face span[style*="color: #cbd5e1"] {
  color: #334155 !important;
  font-weight: 600 !important;
}

/* ============================================================
   COLLISION-FREE HUD, TELEMETRY & INTERACTIVE LAYOUT SYSTEM
   Prevents objects and text from overlapping across all Virtual
   Labs and Lesson Interactives (Photo vs Sim, Badges vs Dashboards)
   ============================================================ */

.sim-top-hud-bar {
  position: absolute;
  top: 12px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  pointer-events: none;
  z-index: 10;
  box-sizing: border-box;
}

.sim-top-hud-bar > * {
  pointer-events: auto;
}

.sim-hud-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 58%;
}

.sim-hud-badges .badge {
  white-space: nowrap;
  flex-shrink: 0;
}

.sim-telemetry-dashboard {
  flex-shrink: 0;
  pointer-events: auto;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.sim-floating-formula-bar {
  position: absolute;
  bottom: 12px;
  left: 14px;
  right: 14px;
  backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 8px 16px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 0.82rem;
  z-index: 10;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: auto;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Ensure control labels, readouts, and sliders never overlap text */
.control-label {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px 8px !important;
}

.control-val {
  white-space: nowrap !important;
  margin-left: auto;
}

.sim-readout-pill {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px 12px !important;
}

.sim-readout-pill .readout-label {
  word-break: break-word;
}

.sim-readout-pill .readout-val {
  word-break: break-word;
  white-space: normal !important;
  text-align: right;
}

.control-slider-group .slider-header {
  flex-wrap: wrap !important;
  gap: 4px 8px !important;
}

/* Responsive collision prevention for medium and compact viewports */
@media (max-width: 980px) {
  .sim-top-hud-bar {
    top: 8px;
    left: 8px;
    right: 8px;
    gap: 8px;
  }
  .sim-hud-badges {
    max-width: 52%;
    gap: 6px;
  }
  .sim-hud-badges .badge {
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
  }
  .sim-telemetry-dashboard {
    padding: 6px 10px !important;
    gap: 8px !important;
    font-size: 0.78rem !important;
  }
  .sim-telemetry-dashboard div div:first-child {
    font-size: 0.62rem !important;
  }
  .sim-telemetry-dashboard [id^="val-"] {
    font-size: 0.92rem !important;
  }
  .sim-floating-formula-bar {
    bottom: 8px;
    left: 8px;
    right: 8px;
    padding: 6px 12px !important;
    font-size: 0.76rem !important;
    gap: 6px 10px !important;
  }
}

@media (max-width: 768px) {
  .sim-top-hud-bar {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 8px 10px;
    background: rgba(10, 15, 30, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .sim-hud-badges {
    max-width: 100% !important;
  }
  .sim-telemetry-dashboard {
    align-self: stretch;
    width: 100%;
    justify-content: space-between;
  }
  .sim-floating-formula-bar {
    position: relative !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 8px;
    border-radius: 8px;
  }
  .interactive-split-grid {
    grid-template-columns: 1fr !important;
  }
}

[data-theme="day"] .sim-top-hud-bar .badge {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

/* =========================================================================
   TEACHER LESSON PLAN GENERATOR & 2-PAGE A4 PDF EXPORT STYLES
   ========================================================================= */

/* Preview Modal Backdrop */
.lp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200150 !important;
  background: rgba(7, 10, 18, 0.88);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
}

.lp-modal-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* Top Sticky Action Bar */
.lp-toolbar-bar {
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  z-index: 10;
}

.lp-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lp-toolbar-badge {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
}

.lp-toolbar-title {
  font-size: 0.92rem;
  color: #f1f5f9;
}

.lp-toolbar-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.lp-input-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #94a3b8;
}

.lp-mini-input {
  height: 32px;
  padding: 0 10px;
  background: rgba(2, 6, 23, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.lp-mini-input:focus {
  border-color: #38bdf8;
}

.lp-btn-print {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 8px;
  background: #0284c7;
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
}

.lp-btn-print:hover {
  background: #0369a1;
  transform: translateY(-1px);
}

.lp-btn-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.lp-btn-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border-color: #ef4444;
}

/* Scrollable Preview Area */
.lp-preview-viewport {
  flex: 1;
  overflow-y: auto;
  padding: 30px 16px;
  display: flex;
  justify-content: center;
  background: #090d16;
}

.lp-document-wrapper {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
  width: 100%;
  max-width: 212mm;
}

/* Standard A4 Page Dimensions (Screen Simulation) */
.lp-a4-page {
  width: 210mm;
  min-height: 297mm;
  max-height: 297mm;
  height: 297mm;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.2);
  padding: 8mm 11mm;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  border-radius: 3px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 8.5pt;
  line-height: 1.35;
}

/* Header Component */
.lp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #0f172a;
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.lp-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lp-logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 2px solid #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
}

.lp-super-title {
  font-size: 6.8pt;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  line-height: 1;
}

.lp-main-title {
  font-size: 13pt;
  font-weight: 800;
  color: #0f172a;
  margin: 2px 0 0 0;
  line-height: 1.15;
}

.lp-header-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  border: 1.5px solid #0284c7;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 7pt;
  line-height: 1.2;
}

.lp-header-badge strong {
  font-size: 9pt;
  font-weight: 800;
}

/* Metadata Strip */
.lp-meta-strip {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 1.1fr 0.9fr;
  gap: 6px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 5px 8px;
  margin-bottom: 6px;
}

.lp-meta-cell {
  display: flex;
  flex-direction: column;
}

.lp-meta-label {
  font-size: 6.5pt;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.04em;
}

.lp-meta-val {
  font-size: 8pt;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.font-bold {
  font-weight: 700;
}

/* Instructor Ribbon */
.lp-instructor-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  border-bottom: 1px dashed #cbd5e1;
  padding-bottom: 5px;
  margin-bottom: 6px;
  font-size: 7.5pt;
}

.lp-ribbon-item strong {
  color: #475569;
}

.lp-editable-field {
  color: #0f172a;
  font-weight: 600;
}

/* Cards & Containers */
.lp-card {
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: #ffffff;
  padding: 6px 9px;
  margin-bottom: 6px;
  box-sizing: border-box;
}

.lp-sec-title {
  font-size: 7.5pt;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0f172a;
  margin-bottom: 4px;
}

.lp-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}

.lp-grid-2col .lp-card {
  margin-bottom: 0;
}

/* Standards Card */
.lp-standards-card {
  border-left-width: 4px !important;
  background: #f8fafc;
}

.lp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.lp-card-tag {
  font-size: 6.5pt;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
}

.lp-standard-pe-code {
  font-family: var(--font-mono, monospace);
  font-size: 7.5pt;
  font-weight: 800;
  color: #0284c7;
}

.lp-pe-desc {
  font-size: 7.8pt;
  margin: 0 0 5px 0;
  color: #1e293b;
  line-height: 1.3;
}

.lp-3d-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  border-top: 1px solid #e2e8f0;
  padding-top: 4px;
}

.lp-3d-title {
  font-size: 6.8pt;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.lp-3d-col p {
  font-size: 7.2pt;
  margin: 0;
  color: #334155;
  line-height: 1.25;
}

/* Phenomenon & Driving Question */
.lp-phenom-quote {
  font-size: 8pt;
  font-style: italic;
  color: #0f172a;
  line-height: 1.35;
}

.lp-driving-question {
  font-size: 8pt;
  font-weight: 600;
  color: #0284c7;
  line-height: 1.35;
}

/* Objectives List */
.lp-objectives-list {
  margin: 0;
  padding-left: 14px;
  font-size: 7.8pt;
  color: #1e293b;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lp-objectives-list li {
  line-height: 1.3;
}

/* Vocabulary & Math */
.lp-vocab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  font-size: 7.2pt;
}

.lp-vocab-item {
  line-height: 1.25;
}

.lp-vocab-item strong {
  color: #0284c7;
}

.lp-formula-display {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 4px 8px;
  text-align: center;
  min-height: 32px;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  line-height: 1.25;
  word-break: break-word;
  hyphens: auto;
}

/* Dynamic sizing tiers based on formula complexity and length */
.lp-formula-display.lp-formula-standard,
.lp-formula-display.lp-formula-sm {
  font-size: 8.8pt;
}

.lp-formula-display.lp-formula-md {
  font-size: 8.0pt;
}

.lp-formula-display.lp-formula-lg {
  font-size: 7.2pt;
}

.lp-formula-display.lp-formula-xl {
  font-size: 6.6pt;
  padding: 3px 6px;
}

/* Constrain all math wrappers within the formula display */
.lp-formula-display .math-rendered,
.lp-formula-display .math-katex-wrapper {
  font-size: 1em !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  max-width: 100% !important;
  line-height: 1.25 !important;
  color: #0f172a !important;
}

.lp-formula-display .math-display,
.lp-formula-display .katex-display {
  font-size: 1em !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  max-width: 100% !important;
  color: #0f172a !important;
}

.lp-formula-display .katex {
  font-size: 1em !important;
  color: #0f172a !important;
  white-space: normal !important;
  text-align: center !important;
  max-width: 100% !important;
  line-height: 1.25 !important;
}

.lp-formula-display .katex-html {
  white-space: normal !important;
  text-align: center !important;
  max-width: 100% !important;
  display: inline !important;
}

.lp-formula-display .katex .base {
  white-space: normal !important;
  display: inline !important;
}

.lp-formula-display .math-text {
  white-space: normal !important;
  word-break: normal !important;
}

/* Universal math sizing inside Lesson Plan A4 Pages */
.lp-a4-page .katex,
.lp-a4-page .math-rendered,
.lp-a4-page .math-katex-wrapper {
  font-size: 1em !important;
  line-height: 1.25 !important;
  color: #000000 !important;
}

.lp-a4-page .katex-display,
.lp-a4-page .math-display {
  margin: 2px 0 !important;
  padding: 0 !important;
  font-size: 1em !important;
  color: #000000 !important;
}

.lp-formula-meta {
  display: flex;
  justify-content: space-between;
  font-size: 6.5pt;
  color: #64748b;
  margin-top: 3px;
}

/* Preparation & Safety */
.lp-prep-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 8px;
  font-size: 7.2pt;
  line-height: 1.3;
}

.lp-prep-grid p {
  margin: 1px 0 4px 0;
  color: #334155;
}

.lp-safety-warning-box {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 3px solid #dc2626;
  border-radius: 4px;
  padding: 4px 6px;
}

.lp-safety-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 6.8pt;
  font-weight: 800;
  color: #991b1b;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.lp-safety-text {
  font-size: 6.8pt;
  color: #7f1d1d;
  margin: 0 !important;
  line-height: 1.25;
}

/* Page Footer */
.lp-page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #cbd5e1;
  padding-top: 4px;
  margin-top: auto;
  font-size: 6.8pt;
  color: #64748b;
}

.lp-page-num {
  font-weight: 800;
  color: #0f172a;
}

/* PAGE 2 SPECIFIC STYLES */
.lp-page2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px solid #0f172a;
  padding-bottom: 5px;
  margin-bottom: 6px;
}

.lp-mini-tag {
  font-size: 6.8pt;
  font-weight: 800;
  text-transform: uppercase;
  color: #0284c7;
  display: block;
}

.lp-page2-title {
  font-size: 10.5pt;
  font-weight: 800;
  color: #0f172a;
}

.lp-page2-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 7.2pt;
  color: #475569;
}

.lp-page-badge {
  background: #0f172a;
  color: #ffffff;
  font-weight: 700;
  font-size: 6.5pt;
  padding: 2px 6px;
  border-radius: 3px;
}

/* 5E Table */
.lp-5e-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 7.4pt;
  margin-top: 2px;
}

.lp-5e-table th {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 4px 6px;
  text-align: left;
  font-size: 6.8pt;
  text-transform: uppercase;
  color: #475569;
}

.lp-5e-table td {
  border: 1px solid #cbd5e1;
  padding: 4px 6px;
  vertical-align: top;
  line-height: 1.3;
}

.lp-phase-cell {
  text-align: center;
  background: #f8fafc;
}

.lp-phase-badge {
  display: block;
  font-weight: 800;
  color: #0284c7;
  font-size: 8pt;
}

.lp-phase-time {
  display: block;
  font-size: 6.5pt;
  color: #64748b;
  font-weight: 600;
}

.lp-phase-action {
  color: #1e293b;
}

.lp-misconception-callout {
  margin-top: 3px;
  background: #fffbeb;
  border-left: 2.5px solid #d97706;
  padding: 2px 4px;
  font-size: 6.8pt;
  color: #92400e;
}

/* Differentiation */
.lp-diff-text {
  font-size: 7.2pt;
  margin: 0;
  color: #334155;
  line-height: 1.3;
}

/* Assessment & Exit Ticket */
.lp-exit-ticket-box {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 7.6pt;
  line-height: 1.35;
  margin-bottom: 6px;
}

.lp-exit-q strong {
  color: #0284c7;
}

.lp-answer-key-box {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-left: 3px solid #16a34a;
  border-radius: 4px;
  padding: 4px 6px;
}

.lp-key-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 6.8pt;
  font-weight: 800;
  color: #15803d;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.lp-key-text {
  font-size: 7pt;
  color: #166534;
  margin: 0;
  line-height: 1.3;
}

/* Notes & Reflection */
.lp-notes-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.lp-line {
  border-bottom: 1px dotted #cbd5e1;
  height: 1px;
}

/* =========================================================================
   STRICT 2-PAGE A4 PRINT CSS ENFORCEMENT (@media print)
   ========================================================================= */

@media print {
  /* Isolate lesson plan printing */
  body.printing-lesson-plan > *:not(#lesson-plan-modal-overlay) {
    display: none !important;
  }

  body.printing-lesson-plan #lesson-plan-modal-overlay {
    position: static !important;
    inset: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.printing-lesson-plan .lp-modal-shell,
  body.printing-lesson-plan .lp-preview-viewport {
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    display: block !important;
    height: auto !important;
    width: 100% !important;
  }

  body.printing-lesson-plan .lp-toolbar-bar,
  body.printing-lesson-plan .no-print {
    display: none !important;
  }

  @page {
    size: A4 portrait;
    margin: 8mm 10mm;
  }

  body.printing-lesson-plan {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: #000000 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body.printing-lesson-plan .lp-document-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    gap: 0 !important;
  }

  /* Strict Enforcement: Exactly 2 Pages */
  body.printing-lesson-plan .lp-a4-page {
    width: 100% !important;
    height: 280mm !important;
    max-height: 280mm !important;
    min-height: 280mm !important;
    page-break-after: always !important;
    break-after: page !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 2mm 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    color: #000000 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  body.printing-lesson-plan .lp-a4-page:last-child {
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  /* Print contrast for text & badges */
  body.printing-lesson-plan .lp-card,
  body.printing-lesson-plan .lp-meta-strip,
  body.printing-lesson-plan .lp-formula-display,
  body.printing-lesson-plan .lp-exit-ticket-box {
    border-color: #94a3b8 !important;
  }

  body.printing-lesson-plan .lp-formula-display {
    background: #ffffff !important;
  }

  body.printing-lesson-plan .lp-formula-display.lp-formula-standard,
  body.printing-lesson-plan .lp-formula-display.lp-formula-sm {
    font-size: 8.5pt !important;
  }

  body.printing-lesson-plan .lp-formula-display.lp-formula-md {
    font-size: 7.8pt !important;
  }

  body.printing-lesson-plan .lp-formula-display.lp-formula-lg {
    font-size: 7.0pt !important;
  }

  body.printing-lesson-plan .lp-formula-display.lp-formula-xl {
    font-size: 6.4pt !important;
    padding: 2px 4px !important;
  }

  body.printing-lesson-plan .lp-formula-display .katex,
  body.printing-lesson-plan .lp-formula-display .katex *,
  body.printing-lesson-plan .lp-formula-display .math-rendered,
  body.printing-lesson-plan .lp-formula-display .math-rendered * {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
  }

  body.printing-lesson-plan .lp-main-title,
  body.printing-lesson-plan .lp-page2-title,
  body.printing-lesson-plan .lp-sec-title,
  body.printing-lesson-plan .lp-meta-val,
  body.printing-lesson-plan .lp-editable-field {
    color: #000000 !important;
  }

  body.printing-lesson-plan .katex,
  body.printing-lesson-plan .katex * {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
  }
}

/* ==========================================================================
   AmScLab Floating Toast Notification & Share Link System
   ========================================================================== */
.amscilab-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 200250 !important;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: rgba(15, 23, 42, 0.96);
  color: #f8fafc;
  border: 1px solid rgba(56, 189, 248, 0.5);
  border-radius: 12px;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.75), 0 0 20px rgba(56, 189, 248, 0.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.amscilab-toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.amscilab-toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  flex-shrink: 0;
}

.amscilab-toast-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.amscilab-toast-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffffff;
}

.amscilab-toast-detail {
  font-size: 0.76rem;
  color: #94a3b8;
  font-weight: 500;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="day"] .amscilab-toast {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(2, 132, 199, 0.4);
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.2), 0 0 16px rgba(2, 132, 199, 0.15);
}

[data-theme="day"] .amscilab-toast-title {
  color: #0f172a;
}

[data-theme="day"] .amscilab-toast-detail {
  color: #64748b;
}

/* Fast Smartboard Mode overrides */
.fast-smartboard-mode .amscilab-toast {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #0f172a !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}

[data-theme="day"].fast-smartboard-mode .amscilab-toast {
  background: #ffffff !important;
}

/* Share Button Components */
.btn-share-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main, #f8fafc);
  background: var(--bg-surface-elevated, rgba(30, 41, 59, 0.7));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.btn-share-link:hover {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.5);
  color: #38bdf8;
  transform: translateY(-1px);
}

.btn-share-link:active {
  transform: translateY(0);
}

/* ==========================================================================
   Virtual Labs Multi-Trial Telemetry & Exporter Suite
   ========================================================================== */
.lab-telemetry-suite-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  margin-top: 14px;
  background: var(--bg-surface-elevated, rgba(15, 23, 42, 0.92));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-md, 12px);
}

[data-theme="day"] .lab-telemetry-suite-bar {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

.lab-trials-badge-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lab-trial-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  border: 1px solid;
}

.lab-trial-pill.trial-1 {
  background: rgba(6, 182, 212, 0.12);
  border-color: rgba(6, 182, 212, 0.4);
  color: #06b6d4;
}

.lab-trial-pill.trial-2 {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.4);
  color: #f59e0b;
}

.lab-trial-pill.trial-3 {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.4);
  color: #10b981;
}

.lab-export-buttons-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Post-Lab Checkpoint Assessment Card */
.lab-checkpoint-section {
  margin-top: 24px;
  background: var(--bg-surface-elevated, rgba(15, 23, 42, 0.92));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-lg, 16px);
  padding: 22px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

[data-theme="day"] .lab-checkpoint-section {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
  color: #0f172a !important;
}

.lab-checkpoint-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  padding-bottom: 12px;
}

[data-theme="day"] .lab-checkpoint-header {
  border-bottom: 1px solid #cbd5e1 !important;
}

.lab-checkpoint-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading, inherit);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main, #f8fafc);
}

[data-theme="day"] .lab-checkpoint-title {
  color: #0f172a !important;
}

.lab-checkpoint-score-pill {
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

.lab-checkpoint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.lab-question-card {
  background: var(--bg-surface-elevated, rgba(15, 23, 42, 0.9));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

[data-theme="day"] .lab-question-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
}

.lab-question-card.correct {
  border-color: rgba(16, 185, 129, 0.6);
  background: rgba(16, 185, 129, 0.08);
}

[data-theme="day"] .lab-question-card.correct {
  border-color: #10b981 !important;
  background: #f0fdf4 !important;
}

.lab-question-card.incorrect {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.08);
}

[data-theme="day"] .lab-question-card.incorrect {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
}

.lab-question-meta {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

[data-theme="day"] .lab-question-meta {
  color: #475569 !important;
}

.lab-question-text {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main, #f8fafc);
  line-height: 1.5;
}

[data-theme="day"] .lab-question-text {
  color: #0f172a !important;
}

.lab-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lab-option-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.4;
}

.lab-option-btn:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  transform: translateX(2px);
}

[data-theme="day"] .lab-option-btn {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="day"] .lab-option-btn:hover:not(:disabled) {
  background: #f0f9ff !important;
  border-color: #0284c7 !important;
  color: #0369a1 !important;
  transform: translateX(2px);
}

.lab-option-btn.selected-correct {
  background: rgba(16, 185, 129, 0.22) !important;
  border-color: #10b981 !important;
  color: #34d399 !important;
  font-weight: 700;
}

[data-theme="day"] .lab-option-btn.selected-correct {
  background: #dcfce7 !important;
  border-color: #10b981 !important;
  color: #15803d !important;
  font-weight: 700 !important;
}

.lab-option-btn.selected-wrong {
  background: rgba(239, 68, 68, 0.22) !important;
  border-color: #ef4444 !important;
  color: #f87171 !important;
  font-weight: 700;
}

[data-theme="day"] .lab-option-btn.selected-wrong {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
  color: #b91c1c !important;
  font-weight: 700 !important;
}

.lab-option-btn:disabled {
  cursor: default;
}

.lab-option-letter {
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  opacity: 0.9;
}

.lab-explanation-box {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.45;
  margin-top: 6px;
}

.lab-explanation-box.correct {
  background: rgba(16, 185, 129, 0.15);
  color: #a7f3d0;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

[data-theme="day"] .lab-explanation-box.correct {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1.5px solid #86efac !important;
}

.lab-explanation-box.incorrect {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

[data-theme="day"] .lab-explanation-box.incorrect {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1.5px solid #fca5a5 !important;
}

[data-theme="day"] .lab-checkpoint-score-pill {
  background: #e0f2fe !important;
  border: 1.5px solid #0284c7 !important;
  color: #0369a1 !important;
}

/* Printable Lab Report Dossier Modal */
.lab-report-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 200150 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  overflow-y: auto;
}

.lab-report-shell {
  background: #0f172a;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 16px;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9);
}

.lab-report-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: #090d16;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lab-report-body {
  padding: 28px;
  overflow-y: auto;
  color: #f8fafc;
  font-family: var(--font-body, system-ui, sans-serif);
}

.lab-report-sheet {
  background: #ffffff;
  color: #0f172a;
  padding: 32px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.5;
}

@media print {
  body.printing-lab-report > *:not(.lab-report-modal-overlay) {
    display: none !important;
  }
  body.printing-lab-report .lab-report-modal-overlay {
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    display: block !important;
  }
  body.printing-lab-report .lab-report-shell {
    border: none !important;
    box-shadow: none !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  body.printing-lab-report .lab-report-toolbar {
    display: none !important;
  }
  body.printing-lab-report .lab-report-body {
    padding: 0 !important;
  }
  body.printing-lab-report .lab-report-sheet {
    box-shadow: none !important;
    padding: 0 !important;
  }
}

/* =========================================================================
   CURRICULUM SCOPE FILE EXPLORER (Step 2 Assessment Customizer)
   ========================================================================= */

.exam-scope-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

[data-theme="day"] .exam-scope-card {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.scope-counter-badge {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.28);
  padding: 10px 16px;
  border-radius: 8px;
  white-space: nowrap;
  font-weight: 700;
}

[data-theme="day"] .scope-counter-badge {
  color: #0284c7;
  background: #f0f9ff;
  border-color: #bae6fd;
}

.filter-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
}

.filter-chip:hover {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.4);
}

.filter-chip.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
}

[data-theme="day"] .filter-chip {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
}

[data-theme="day"] .filter-chip:hover {
  background: #f0f9ff;
  border-color: #0284c7;
  color: #0284c7;
}

[data-theme="day"] .filter-chip.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}

/* Tree Structure Nodes */
.curriculum-tree-container {
  max-height: 540px;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 6px;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px;
}

.curriculum-tree-container > * {
  flex-shrink: 0 !important;
  min-height: fit-content !important;
}

.curriculum-tree-container::-webkit-scrollbar {
  width: 6px;
}
.curriculum-tree-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
.curriculum-tree-container::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.3);
  border-radius: 4px;
}
[data-theme="day"] .curriculum-tree-container::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

/* Level 1: Unit Node */
.tree-node-unit {
  flex-shrink: 0 !important;
  min-height: fit-content !important;
  height: auto !important;
  background: var(--bg-surface-elevated);
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  overflow: visible;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tree-node-unit.has-selected {
  border-color: rgba(16, 185, 129, 0.5);
}

[data-theme="day"] .tree-node-unit {
  background: #ffffff;
  border-color: #cbd5e1;
}

[data-theme="day"] .tree-node-unit.has-selected {
  border-color: #10b981;
}

.tree-unit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: rgba(0, 0, 0, 0.04);
  cursor: pointer;
  user-select: none;
  border-radius: 9px;
  transition: background 0.15s ease;
}

.tree-unit-header:hover {
  background: rgba(56, 189, 248, 0.08);
}

[data-theme="day"] .tree-unit-header {
  background: #f8fafc;
}

[data-theme="day"] .tree-unit-header:hover {
  background: #f1f5f9;
}

.tree-unit-body {
  flex-shrink: 0 !important;
  min-height: fit-content !important;
  height: auto !important;
  padding: 10px 14px 14px 16px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  display: flex !important;
  flex-direction: column !important;
  gap: 8px;
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
  border-left: 3px solid rgba(56, 189, 248, 0.35);
  margin: 0;
}

.tree-unit-body > * {
  flex-shrink: 0 !important;
  min-height: fit-content !important;
}

[data-theme="day"] .tree-unit-body {
  background: #fafafa;
  border-color: #e2e8f0;
  border-left-color: rgba(2, 132, 199, 0.35);
}

/* Level 2: Chapter / Module Node */
.tree-node-module {
  flex-shrink: 0 !important;
  min-height: fit-content !important;
  height: auto !important;
  position: relative;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: visible;
  transition: all 0.15s ease;
}

.tree-node-module.has-selected {
  border-color: rgba(16, 185, 129, 0.45);
}

[data-theme="day"] .tree-node-module {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-theme="day"] .tree-node-module.has-selected {
  border-color: #34d399;
}

.tree-module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  cursor: pointer;
  user-select: none;
  border-radius: 7px;
  transition: background 0.15s ease;
}

.tree-module-header:hover {
  background: rgba(56, 189, 248, 0.08);
}

[data-theme="day"] .tree-module-header:hover {
  background: #f8fafc;
}

.tree-module-body {
  flex-shrink: 0 !important;
  min-height: fit-content !important;
  height: auto !important;
  padding: 8px 12px 10px 14px;
  border-top: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.12);
  display: flex !important;
  flex-direction: column !important;
  gap: 6px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  border-left: 3px solid rgba(16, 185, 129, 0.4);
  margin: 0;
}

.tree-module-body > * {
  flex-shrink: 0 !important;
  min-height: fit-content !important;
}

[data-theme="day"] .tree-module-body {
  background: #f8fafc;
  border-color: #e2e8f0;
  border-left-color: rgba(16, 185, 129, 0.4);
}

/* Level 3: Lesson Node */
.tree-node-lesson {
  flex-shrink: 0 !important;
  min-height: 38px !important;
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  margin-left: 4px;
  position: relative;
}

.tree-node-lesson:hover {
  background: rgba(56, 189, 248, 0.08);
}

[data-theme="day"] .tree-node-lesson:hover {
  background: #f1f5f9;
}

.tree-node-lesson.is-checked {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
}

[data-theme="day"] .tree-node-lesson.is-checked {
  background: #ecfdf5;
  border-color: #a7f3d0;
}

/* Checkboxes in Tree */
.tree-unit-cb,
.tree-mod-cb,
.tree-lesson-cb {
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: #0284c7;
  flex-shrink: 0;
}

[data-theme="day"] .tree-unit-cb,
[data-theme="day"] .tree-mod-cb,
[data-theme="day"] .tree-lesson-cb {
  accent-color: #0284c7;
}

/* Search Highlights */
mark.search-highlight {
  background: rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 800;
}

[data-theme="day"] mark.search-highlight {
  background: #bae6fd;
  color: #0369a1;
}

/* ==========================================================================
   Scientific Diagram & Visual Model Questions
   ========================================================================== */

/* 1. Interactive Assessment View */
.q-diagram-container {
  margin: 14px 0;
  text-align: center;
  background: #0f172a;
  border-radius: 10px;
  border: 1px solid var(--border-color, #334155);
  padding: 14px;
  overflow-x: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s ease;
}

.q-diagram-container:hover {
  border-color: rgba(56, 189, 248, 0.4);
}

[data-theme="day"] .q-diagram-container {
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.q-diagram-caption {
  font-size: 0.88rem;
  font-weight: 700;
  color: #38bdf8;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

[data-theme="day"] .q-diagram-caption {
  color: #0284c7;
}

.q-diagram-svg {
  display: flex;
  justify-content: center;
  align-items: center;
}

.q-diagram-svg svg {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* Question Diagram Images (Uploaded Pictures & Bank Models) */
.q-diagram-image {
  max-height: 320px;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Question Scientific Data Tables (On-Screen & Printables)
   ========================================================================== */
.q-table-wrapper {
  margin: 14px 0;
  overflow-x: auto;
  border-radius: 12px;
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.q-data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.92rem;
  text-align: left;
  letter-spacing: 0.01em;
}

.q-data-table thead {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.22) 0%, rgba(56, 189, 248, 0.1) 100%);
  border-bottom: 2px solid rgba(56, 189, 248, 0.4);
}

.q-data-table th {
  padding: 10px 16px;
  color: #38bdf8;
  font-weight: 800;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.q-data-table td {
  padding: 9px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-main, #f8fafc);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}

.q-data-table tbody tr:last-child td {
  border-bottom: none;
}

.q-data-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.025);
}

.q-data-table tbody tr:hover {
  background: rgba(56, 189, 248, 0.08);
}

/* Day Mode Question Data Tables */
[data-theme="day"] .q-table-wrapper {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

[data-theme="day"] .q-data-table thead {
  background: #f1f5f9;
  border-bottom: 2px solid #0284c7;
}

[data-theme="day"] .q-data-table th {
  color: #0369a1;
}

[data-theme="day"] .q-data-table td {
  color: #0f172a;
  border-bottom: 1px solid #e2e8f0;
}

[data-theme="day"] .q-data-table tbody tr:nth-child(even) {
  background: #f8fafc;
}

[data-theme="day"] .q-data-table tbody tr:hover {
  background: #e0f2fe;
}

/* Print Mode and Printable Test Sheet Question Data Tables */
.print-test-container .q-table-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 12px 0 !important;
  overflow: visible !important;
}

.print-test-container .q-data-table {
  border: 1.5pt solid #000000 !important;
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 8px 0 !important;
  font-size: 0.95rem !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

.print-test-container .q-data-table thead {
  background: #f1f5f9 !important;
  border-bottom: 2pt solid #000000 !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

.print-test-container .q-data-table th {
  border: 1.5pt solid #000000 !important;
  padding: 8px 12px !important;
  color: #000000 !important;
  font-weight: 900 !important;
  font-size: 0.92rem !important;
  background: #f1f5f9 !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

.print-test-container .q-data-table td {
  border: 1.5pt solid #000000 !important;
  padding: 7px 12px !important;
  color: #000000 !important;
  font-size: 0.92rem !important;
  background: #ffffff !important;
}

.print-test-container .q-data-table tbody tr:nth-child(even) td {
  background: #f8fafc !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

/* 2. Smartboard Presenter View */
.presenter-diagram-container {
  margin: 14px auto 22px auto;
  text-align: center;
  background: rgba(15, 23, 42, 0.85);
  border-radius: 12px;
  border: 1.5px solid var(--border-color, #334155);
  padding: 18px;
  max-width: 820px;
  width: 100%;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

[data-theme="day"] .presenter-diagram-container {
  background: #ffffff;
  border-color: #94a3b8;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.presenter-diagram-caption {
  font-size: 1.15rem;
  font-weight: 800;
  color: #38bdf8;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

[data-theme="day"] .presenter-diagram-caption {
  color: #0369a1;
}

.presenter-diagram-svg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.presenter-diagram-svg svg {
  max-width: 100%;
  max-height: 420px;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* 3. Printable Test Paper View & High-Contrast Photocopier Line-Art */
.print-diagram-container {
  margin: 12px 0 16px 0;
  text-align: center;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px;
  background: #ffffff;
  color: #000000;
  page-break-inside: avoid;
}

.print-diagram-caption {
  font-size: 0.95rem;
  font-weight: 800;
  color: #000000;
  margin-bottom: 8px;
  text-align: center;
}

.print-diagram-svg {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  width: 100%;
}

.print-diagram-svg svg {
  max-width: 560px;
  max-height: 300px;
  width: 100%;
  height: auto;
  background: #ffffff !important;
  color: #000000 !important;
}

/* Photocopier & Laser Printer Strict Line-Art Enforcements */
.print-diagram-svg svg rect:first-child,
.print-diagram-svg svg rect:first-of-type {
  fill: #ffffff !important;
  stroke: #cbd5e1 !important;
  stroke-width: 1px !important;
}

.print-diagram-svg svg text {
  fill: #000000 !important;
  font-weight: 800 !important;
}

@media print {
  .print-diagram-container,
  .q-diagram-container,
  .presenter-diagram-container {
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #000000 !important;
    page-break-inside: avoid !important;
    box-shadow: none !important;
  }
  .print-diagram-caption,
  .q-diagram-caption,
  .presenter-diagram-caption {
    color: #000000 !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
  }
  .print-diagram-svg,
  .q-diagram-svg,
  .presenter-diagram-svg {
    background: #ffffff !important;
    width: 100% !important;
  }
  .print-diagram-svg svg,
  .q-diagram-svg svg,
  .presenter-diagram-svg svg {
    max-width: 560px !important;
    max-height: 300px !important;
    width: 100% !important;
    height: auto !important;
    background: #ffffff !important;
    color: #000000 !important;
  }
  .print-diagram-svg svg rect:first-child,
  .print-diagram-svg svg rect:first-of-type,
  .q-diagram-svg svg rect:first-child,
  .q-diagram-svg svg rect:first-of-type,
  .presenter-diagram-svg svg rect:first-child,
  .presenter-diagram-svg svg rect:first-of-type {
    fill: #ffffff !important;
    stroke: #cbd5e1 !important;
    stroke-width: 1px !important;
  }
  .print-diagram-svg svg text,
  .q-diagram-svg svg text,
  .presenter-diagram-svg svg text {
    fill: #000000 !important;
    font-weight: 800 !important;
  }
  /* Invert/sanitize dark panels on copiers */
  .print-diagram-svg svg [fill="#0f172a"],
  .q-diagram-svg svg [fill="#0f172a"],
  .presenter-diagram-svg svg [fill="#0f172a"],
  .print-diagram-svg svg [fill="#1e293b"],
  .q-diagram-svg svg [fill="#1e293b"],
  .presenter-diagram-svg svg [fill="#1e293b"],
  .print-diagram-svg svg [fill="#334155"],
  .q-diagram-svg svg [fill="#334155"],
  .presenter-diagram-svg svg [fill="#334155"],
  .print-diagram-svg svg [fill="#475569"],
  .q-diagram-svg svg [fill="#475569"],
  .presenter-diagram-svg svg [fill="#475569"] {
    fill: #ffffff !important;
    stroke: #cbd5e1 !important;
  }
  /* Two-column print diagram optimizations */
  .print-two-col .print-diagram-container {
    margin: 8px 0 10px 0 !important;
    padding: 6px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .print-two-col .print-diagram-svg svg {
    max-width: 100% !important;
    max-height: 250px !important;
  }
  .q-table-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 10px 0 !important;
    overflow: visible !important;
  }
  .q-data-table {
    border: 1.5pt solid #000000 !important;
    border-collapse: collapse !important;
    width: 100% !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .q-data-table thead {
    background: #f1f5f9 !important;
    border-bottom: 2pt solid #000000 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .q-data-table th {
    border: 1.5pt solid #000000 !important;
    padding: 8px 12px !important;
    color: #000000 !important;
    font-weight: 900 !important;
    font-size: 0.92rem !important;
    background: #f1f5f9 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .q-data-table td {
    border: 1.5pt solid #000000 !important;
    padding: 7px 12px !important;
    color: #000000 !important;
    font-size: 0.92rem !important;
    background: #ffffff !important;
  }
  .q-data-table tbody tr:nth-child(even) td {
    background: #f8fafc !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .q-diagram-image {
    max-height: 280px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    border: 1px solid #cbd5e1 !important;
  }
}

/* ==========================================================================
   SCIENTIFIC POCKET CALCULATOR & STEM REFERENCE MODAL (COMPLETE REDESIGN)
   Industrial Obsidian & Porcelain Glassmorphism, 3D Tactile Keypad,
   Pro OLED Matrix Display, Quick-Access Constants Ribbon, and Day Theme
   ========================================================================== */
.calculator-modal {
  position: fixed;
  z-index: 200100 !important;
  width: 418px;
  max-width: 96vw;
  background: linear-gradient(165deg, rgba(20, 26, 43, 0.96) 0%, rgba(9, 13, 24, 0.98) 100%);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow: 
    0 30px 90px -15px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 45px -10px rgba(14, 165, 233, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  bottom: 24px;
  right: 24px;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), height 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s ease, opacity 0.2s ease, border-radius 0.2s ease;
  touch-action: none;
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
}

/* Minimized Floating HUD Pill Mode */
.calculator-modal.minimized {
  max-height: 52px;
  width: 320px;
  border-radius: 9999px;
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 20px rgba(14, 165, 233, 0.2);
}

.calculator-modal.minimized .calc-header-tabs,
.calculator-modal.minimized .calc-viewport {
  display: none !important;
}

.calculator-modal.minimized .calc-drag-header {
  padding: 8px 14px;
  border-bottom: none;
}

.calculator-modal.minimized .calc-minimized-hud {
  display: flex !important;
}

/* Drag Header */
.calc-drag-header {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.85) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: grab;
  user-select: none;
  padding: 10px 14px 8px 14px;
  gap: 8px;
}

.calc-drag-header:active {
  cursor: grabbing;
}

.calc-header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.calc-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f8fafc;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
}

.calc-header-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.25), rgba(99, 102, 241, 0.25));
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.calc-header-badge-tag {
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 9999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Minimized HUD (Appears only when minimized) */
.calc-minimized-hud {
  display: none;
  align-items: center;
  gap: 8px;
  flex: 1;
  margin: 0 10px;
}

.calc-min-badge {
  font-size: 0.65rem;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
}

.calc-min-result {
  font-family: var(--font-mono, monospace);
  font-size: 0.95rem;
  font-weight: 700;
  color: #22d3ee;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}

.calc-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.calc-hdr-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.calc-hdr-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.calc-hdr-close:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  color: #ef4444 !important;
}

/* Header Segmented Navigation Tabs */
.calc-header-tabs {
  display: flex;
  background: rgba(15, 23, 42, 0.65);
  padding: 3px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  gap: 3px;
}

.calc-header-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.73rem;
  font-weight: 700;
  padding: 5px 8px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.calc-header-tab:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.05);
}

.calc-header-tab.active {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.25), rgba(99, 102, 241, 0.25));
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.calc-tab-count-badge {
  font-size: 0.62rem;
  background: rgba(56, 189, 248, 0.2);
  color: #7dd3fc;
  padding: 1px 5px;
  border-radius: 9999px;
  font-weight: 800;
}

/* Viewport */
.calc-viewport {
  padding: 0;
  max-height: 600px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* =========================================================================
   PRO VIRTUAL MATRIX OLED SCREEN
   ========================================================================= */
.calc-lcd-screen {
  background: radial-gradient(ellipse at 50% 0%, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.99));
  border: 1.5px solid rgba(56, 189, 248, 0.32);
  border-radius: 16px;
  padding: 10px 14px 8px 14px;
  margin: 12px 14px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 
    inset 0 3px 14px rgba(0, 0, 0, 0.9),
    0 0 25px rgba(14, 165, 233, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

/* Subtle Matrix Glass Scanline Texture */
.calc-lcd-screen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.4), transparent);
  pointer-events: none;
}

.calc-lcd-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: #64748b;
  font-family: var(--font-mono, monospace);
  min-height: 18px;
}

.calc-lcd-status-pills {
  display: flex;
  align-items: center;
  gap: 5px;
}

.calc-badge-mode {
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.28);
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 0.67rem;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.03em;
}

.calc-badge-mode:hover {
  background: rgba(56, 189, 248, 0.3);
  color: #ffffff;
}

.calc-lamp-indicator {
  font-weight: 800;
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  opacity: 0.35;
  transition: all 0.18s ease;
}

.calc-lamp-indicator.active {
  opacity: 1;
}

.calc-lamp-2nd.active {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

.calc-lamp-mem.active {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}

.calc-history-peek {
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
  font-size: 0.74rem;
  font-weight: 500;
}

.calc-lcd-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
}

.calc-expr-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #f8fafc;
  font-family: var(--font-mono, monospace);
  font-size: 1.55rem;
  font-weight: 700;
  text-align: right;
  letter-spacing: 0.03em;
  padding: 0;
  margin: 0;
  text-shadow: 0 0 12px rgba(248, 250, 252, 0.15);
}

.calc-copy-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.calc-copy-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
}

.calc-lcd-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 3px;
}

.calc-lcd-meta-info {
  font-size: 0.68rem;
  color: #64748b;
  font-family: var(--font-mono, monospace);
}

.calc-eval-status {
  font-family: var(--font-mono, monospace);
  font-size: 1.15rem;
  font-weight: 800;
  color: #22d3ee;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.35);
  transition: color 0.15s ease;
}

.calc-eval-status.error {
  color: #f87171;
  font-size: 0.95rem;
  text-shadow: 0 0 8px rgba(248, 113, 113, 0.3);
}

/* =========================================================================
   QUICK ACCESS CONSTANTS & MEMORY RIBBON BAR
   ========================================================================= */
.calc-ribbon-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 10px 14px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.calc-ribbon-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.calc-ribbon-divider {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 2px;
  flex-shrink: 0;
}

.calc-ribbon-btn {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s ease;
}

.calc-ribbon-btn:hover {
  background: rgba(14, 165, 233, 0.2);
  border-color: #38bdf8;
  color: #ffffff;
}

.calc-ribbon-btn.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
}

.calc-ribbon-chip {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #7dd3fc;
  font-family: var(--font-mono, monospace);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 2px;
}

.calc-ribbon-chip:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  color: #ffffff;
  transform: translateY(-1px);
}

/* =========================================================================
   3D TACTILE SCIENTIFIC KEYPAD MATRIX
   ========================================================================= */
.calc-keypad-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  padding: 0 14px 14px 14px;
}

.calc-key {
  height: 44px;
  border-radius: 11px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: manipulation;
  transition: all 0.12s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  outline: none;
}

/* Micro-press 3D tactile sink physics */
.calc-key:active {
  transform: translateY(2px) scale(0.98);
}

/* Numeric Keys (7-8-9, 4-5-6, 1-2-3, 0, .) */
.calc-key-num {
  background: linear-gradient(180deg, #243048 0%, #172033 100%);
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 3px 0 #0d1322, 0 4px 10px rgba(0, 0, 0, 0.35);
  font-family: var(--font-mono, monospace);
  font-size: 1.05rem;
}

.calc-key-num:hover {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.calc-key-num:active {
  box-shadow: 0 1px 0 #0d1322;
}

/* Scientific Functions Keys (sin, cos, tan, log, ln, powers, roots) */
.calc-key-fn {
  background: linear-gradient(180deg, rgba(67, 56, 202, 0.22) 0%, rgba(49, 46, 129, 0.28) 100%);
  color: #c7d2fe;
  border: 1px solid rgba(99, 102, 241, 0.28);
  box-shadow: 0 3px 0 rgba(20, 20, 50, 0.6), 0 3px 8px rgba(0, 0, 0, 0.2);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.calc-key-fn:hover {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.38) 0%, rgba(79, 70, 229, 0.42) 100%);
  border-color: #818cf8;
  color: #ffffff;
}

.calc-key-fn:active {
  box-shadow: 0 1px 0 rgba(20, 20, 50, 0.6);
}

.calc-key-fn.active {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #ffffff;
  border-color: #a5b4fc;
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.5);
}

/* Primary Arithmetic Operator Keys (÷, ×, −, +) */
.calc-key-op {
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.25) 0%, rgba(3, 105, 161, 0.32) 100%);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 3px 0 rgba(2, 44, 75, 0.7), 0 3px 10px rgba(0, 0, 0, 0.25);
  font-size: 1.15rem;
  font-weight: 800;
}

.calc-key-op:hover {
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.45) 0%, rgba(2, 132, 199, 0.5) 100%);
  border-color: #38bdf8;
  color: #ffffff;
}

.calc-key-op:active {
  box-shadow: 0 1px 0 rgba(2, 44, 75, 0.7);
}

/* Control Keys (Backspace, 2nd, DEG) */
.calc-key-ctrl {
  background: linear-gradient(180deg, rgba(100, 116, 139, 0.25) 0%, rgba(51, 65, 85, 0.35) 100%);
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 3px 0 rgba(15, 23, 42, 0.6);
  font-size: 0.95rem;
}

.calc-key-ctrl:hover {
  background: rgba(148, 163, 184, 0.4);
  color: #ffffff;
}

/* Clear Keys (AC / C) */
.calc-key-clear {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.22) 0%, rgba(185, 28, 28, 0.28) 100%);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
  box-shadow: 0 3px 0 rgba(69, 10, 10, 0.6);
  font-weight: 800;
  font-size: 0.88rem;
}

.calc-key-clear:hover {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  border-color: #fca5a5;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.5);
}

/* Flagship Radiant Equals Key (=) */
.calc-key-equal {
  background: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 18px rgba(6, 182, 212, 0.45), 0 3px 0 #1d4ed8;
}

.calc-key-equal:hover {
  filter: brightness(1.15);
  box-shadow: 0 6px 24px rgba(6, 182, 212, 0.65), 0 3px 0 #1d4ed8;
}

.calc-key-equal:active {
  box-shadow: 0 1px 0 #1d4ed8;
}

/* =========================================================================
   SUBVIEWS (History Tape, Constants Directory, Formulas Reference)
   ========================================================================= */
.calc-subview {
  padding: 14px;
}

/* History Tape */
#subview-history {
  display: none;
  max-height: 480px;
  overflow-y: auto;
}

#subview-history.active {
  display: block;
}

.calc-history-view-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 12px;
}

.calc-history-view-hdr span {
  font-size: 0.8rem;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.calc-history-item {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.calc-history-item:hover {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
  transform: translateX(2px);
}

/* Constants Directory */
.calc-constants-table-wrapper {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.calc-constants-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.calc-constants-table th,
.calc-constants-table td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.calc-constants-table th {
  background: rgba(15, 23, 42, 0.95);
  color: #94a3b8;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
  z-index: 2;
  font-weight: 800;
}

/* Formulas Reference */
.calc-formula-subnav {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.calc-formula-subnav button.active {
  background: linear-gradient(135deg, #06b6d4, #3b82f6) !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
  font-weight: 800;
}

.calc-formula-cards-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
}

.calc-formula-card {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.15s ease;
}

.calc-formula-card:hover {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(30, 41, 59, 0.8);
}

.calc-formula-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calc-formula-title {
  font-weight: 800;
  font-size: 0.88rem;
  color: #f8fafc;
}

.calc-formula-latex-box {
  background: rgba(15, 23, 42, 0.8);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.96rem;
  color: #38bdf8;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.calc-formula-note {
  font-size: 0.73rem;
  color: #94a3b8;
}

/* =========================================================================
   DAY THEME (LIGHT MODE) PORCELAIN WORKSTATION MASTERPIECE
   ========================================================================= */
[data-theme="day"] .calculator-modal {
  background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 
    0 25px 70px -10px rgba(15, 23, 42, 0.22),
    0 0 0 1px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 #ffffff !important;
}

[data-theme="day"] .calc-drag-header {
  background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%) !important;
  border-bottom-color: #e2e8f0 !important;
}

[data-theme="day"] .calc-header-title {
  color: #0f172a !important;
}

[data-theme="day"] .calc-header-tabs {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}

[data-theme="day"] .calc-header-tab {
  color: #475569 !important;
}

[data-theme="day"] .calc-header-tab:hover {
  background: #ffffff !important;
  color: #0f172a !important;
}

[data-theme="day"] .calc-header-tab.active {
  background: #ffffff !important;
  color: #0284c7 !important;
  border-color: #93c5fd !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="day"] .calc-lcd-screen {
  background: #f8fafc !important;
  border-color: #93c5fd !important;
  box-shadow: 
    inset 0 2px 8px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="day"] .calc-expr-input {
  color: #0f172a !important;
  text-shadow: none !important;
}

[data-theme="day"] .calc-eval-status {
  color: #0284c7 !important;
  text-shadow: none !important;
}

[data-theme="day"] .calc-copy-btn {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="day"] .calc-copy-btn:hover {
  background: #eff6ff !important;
  border-color: #3b82f6 !important;
  color: #2563eb !important;
}

[data-theme="day"] .calc-ribbon-btn {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="day"] .calc-ribbon-btn:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

[data-theme="day"] .calc-ribbon-chip {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: #166534 !important;
}

[data-theme="day"] .calc-ribbon-chip:hover {
  background: #dcfce7 !important;
  border-color: #4ade80 !important;
  color: #14532d !important;
}

[data-theme="day"] .calc-key-num {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 3px 0 #cbd5e1, 0 3px 6px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="day"] .calc-key-num:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
}

[data-theme="day"] .calc-key-num:active {
  box-shadow: 0 1px 0 #cbd5e1 !important;
}

[data-theme="day"] .calc-key-fn {
  background: #eef2ff !important;
  color: #4338ca !important;
  border-color: #c7d2fe !important;
  box-shadow: 0 3px 0 #c7d2fe !important;
}

[data-theme="day"] .calc-key-fn:hover {
  background: #e0e7ff !important;
  border-color: #818cf8 !important;
  color: #312e81 !important;
}

[data-theme="day"] .calc-key-op {
  background: #eff6ff !important;
  color: #0284c7 !important;
  border-color: #bae6fd !important;
  box-shadow: 0 3px 0 #bae6fd !important;
}

[data-theme="day"] .calc-key-op:hover {
  background: #e0f2fe !important;
  border-color: #38bdf8 !important;
  color: #0369a1 !important;
}

[data-theme="day"] .calc-key-ctrl {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 3px 0 #cbd5e1 !important;
}

[data-theme="day"] .calc-key-clear {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border-color: #fecaca !important;
  box-shadow: 0 3px 0 #fecaca !important;
}

[data-theme="day"] .calc-formula-card,
[data-theme="day"] .calc-history-item {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="day"] .calc-formula-title {
  color: #0f172a !important;
}

[data-theme="day"] .calc-formula-latex-box {
  background: #ffffff !important;
  color: #0284c7 !important;
  border-color: #e2e8f0 !important;
}

[data-theme="day"] .calc-constants-table th {
  background: #f1f5f9 !important;
  color: #475569 !important;
}

[data-theme="day"] .calc-constants-table td {
  border-bottom-color: #e2e8f0 !important;
}

/* =========================================================================
   SMARTBOARD & TOUCHSCREEN OPTIMIZATION
   ========================================================================= */
[data-mode="smartboard"] .calculator-modal,
body.mode-smartboard .calculator-modal,
.fast-smartboard-mode .calculator-modal {
  width: 468px !important;
  max-width: 95vw !important;
}

[data-mode="smartboard"] .calc-key,
body.mode-smartboard .calc-key,
.fast-smartboard-mode .calc-key {
  height: 52px !important;
  font-size: 1.05rem !important;
  border-radius: 12px !important;
}

[data-mode="smartboard"] .calc-expr-input,
body.mode-smartboard .calc-expr-input,
.fast-smartboard-mode .calc-expr-input {
  font-size: 1.85rem !important;
}

/* =========================================================================
   LMS Export & Smartboard Assignment Studio Styles
   (Google Classroom, Classera, Canvas, Microsoft Teams)
   ========================================================================= */
.lms-platform-card {
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, border-color, box-shadow;
}

.lms-platform-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.5);
}

.lms-share-btn {
  transition: all 0.18s ease;
}

.lms-share-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

[data-theme="day"] #lms-share-modal > div {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
}

[data-theme="day"] .lms-platform-card {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="day"] #lms-share-url-input {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* Universal LMS Share Modal Overhaul */
.lms-share-modal-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(2, 6, 23, 0.84) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 200180 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: lmsModalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lmsModalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.lms-share-modal-shell {
  background: #0f172a;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
}

#btn-close-lms-modal {
  transition: all 0.18s ease;
  user-select: none;
  -webkit-user-select: none;
}

#btn-close-lms-modal:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  color: #f87171 !important;
  transform: scale(1.08);
}

#btn-close-lms-modal:active {
  transform: scale(0.92);
}

[data-theme="day"] .lms-share-modal-shell {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.2) !important;
}

/* ========================================================
   Continue Learning Progress Strip
======================================================== */
.continue-learning-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.75) 100%);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-left: 4px solid var(--chem-primary, #38bdf8);
  border-radius: var(--radius-md, 12px);
  padding: 14px 22px;
  margin-bottom: 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35), 0 0 15px rgba(56, 189, 248, 0.1);
  animation: fadeIn 0.3s ease;
}

[data-theme="day"] .continue-learning-strip {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.95) 100%);
  border-color: rgba(14, 165, 233, 0.35);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.continue-learning-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.continue-learning-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  flex-shrink: 0;
  animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.continue-learning-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.continue-learning-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.continue-learning-target {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-main, #f8fafc);
}

.continue-learning-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.continue-learning-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
}

.btn-continue-resume {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-continue-resume:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.5);
  color: #ffffff;
}

@media (max-width: 768px) {
  .continue-learning-strip {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
    gap: 12px;
  }
  .continue-learning-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* ========================================================
   Presenter Onboarding Tooltip Banner
======================================================== */
.presenter-tip-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  border-radius: var(--radius-md, 10px);
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(14, 165, 233, 0.3);
  color: var(--text-main, #f8fafc);
  font-size: 0.85rem;
  margin-bottom: 20px;
  animation: fadeIn 0.3s ease;
}

.presenter-tip-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.presenter-tip-dismiss {
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.presenter-tip-dismiss:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-main, #f8fafc);
}

/* ========================================================
   Focus Mode (Classroom Presenter View)
======================================================== */
body.focus-mode .app-navbar {
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}
body.focus-mode .app-navbar:hover {
  transform: translateY(0);
}
body.focus-mode .hero-banner,
body.focus-mode .continue-learning-strip,
body.focus-mode .presenter-tip-banner {
  display: none !important;
}

.btn-focus-mode-exit {
  display: none;
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 10001;
  background: rgba(15, 23, 42, 0.9);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
}

.btn-focus-mode-exit:hover {
  background: rgba(14, 165, 233, 0.2);
  color: #ffffff;
  transform: scale(1.05);
}

body.focus-mode .btn-focus-mode-exit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* =========================================================================
   MAXHUB ANDROID & SMARTBOARD ZERO-LATENCY TURBO ENGINE (ABSOLUTE PRIORITY)
   Guarantees 60 FPS, prevents GPU stalls, and eliminates browser halts/crashes
   ========================================================================= */

/* 1. Eliminate 100% of GPU fill-rate stalls: Kill all backdrop-filters unconditionally */
[data-mode="smartboard"],
[data-mode="smartboard"] *,
[data-mode="smartboard"] *::before,
[data-mode="smartboard"] *::after,
.mode-smartboard,
.mode-smartboard *,
.mode-smartboard *::before,
.mode-smartboard *::after,
.fast-smartboard-mode,
.fast-smartboard-mode *,
.fast-smartboard-mode *::before,
.fast-smartboard-mode *::after,
.is-smartboard,
.is-smartboard *,
.is-smartboard *::before,
.is-smartboard *::after,
.is-android,
.is-android *,
.is-android *::before,
.is-android *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* 2. Completely eliminate heavy 80px blur filter keyframe animations */
[data-mode="smartboard"] .bg-glow-container,
.fast-smartboard-mode .bg-glow-container,
.is-smartboard .bg-glow-container,
.is-android .bg-glow-container,
[data-mode="smartboard"] .bg-glow-blob,
.fast-smartboard-mode .bg-glow-blob,
.is-smartboard .bg-glow-blob,
.is-android .bg-glow-blob {
  display: none !important;
  animation: none !important;
  filter: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 3. Solid, high-contrast, low-overhead opaque surfaces for instant 60 FPS compositing */
[data-mode="smartboard"] .app-navbar,
.fast-smartboard-mode .app-navbar,
.is-smartboard .app-navbar,
.is-android .app-navbar {
  background: #070a12 !important;
}

[data-mode="smartboard"] .smartboard-pen-bar,
.fast-smartboard-mode .smartboard-pen-bar,
[data-mode="smartboard"] .module-card,
.fast-smartboard-mode .module-card,
[data-mode="smartboard"] .lesson-card-full,
.fast-smartboard-mode .lesson-card-full,
[data-mode="smartboard"] .modal-content-shell,
.fast-smartboard-mode .modal-content-shell,
[data-mode="smartboard"] .nav-dropdown-menu,
.fast-smartboard-mode .nav-dropdown-menu,
[data-mode="smartboard"] .calculator-modal,
.fast-smartboard-mode .calculator-modal,
[data-mode="smartboard"] .quiz-modal,
.fast-smartboard-mode .quiz-modal,
[data-mode="smartboard"] .interactive-shell,
.fast-smartboard-mode .interactive-shell,
[data-mode="smartboard"] .lab-header-bar,
.fast-smartboard-mode .lab-header-bar,
[data-mode="smartboard"] .lab-controls-panel,
.fast-smartboard-mode .lab-controls-panel,
[data-mode="smartboard"] .sim-telemetry-dashboard,
.fast-smartboard-mode .sim-telemetry-dashboard,
[data-mode="smartboard"] .sim-floating-formula-bar,
.fast-smartboard-mode .sim-floating-formula-bar,
[data-mode="smartboard"] .btn-focus-mode-exit,
.fast-smartboard-mode .btn-focus-mode-exit {
  background: #0f172a !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}

[data-mode="smartboard"] .modal-backdrop,
.fast-smartboard-mode .modal-backdrop,
.is-smartboard .modal-backdrop {
  background: rgba(0, 0, 0, 0.85) !important;
}

/* 4. Promote all canvases to isolated hardware-accelerated GPU compositing layers */
[data-mode="smartboard"] canvas,
.fast-smartboard-mode canvas,
.is-smartboard canvas,
.is-android canvas,
[data-mode="smartboard"] .lab-canvas-area,
.fast-smartboard-mode .lab-canvas-area {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  contain: layout paint;
}

/* 5. Infrared / Optical High-Frequency Touch Optimization (1:1 Drag Latency) */
[data-mode="smartboard"],
.fast-smartboard-mode,
.is-smartboard,
.is-android {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  scroll-behavior: auto !important;
}

/* ==========================================================================
   TEACHER QUESTION SELECTION STUDIO & PRINT CUSTOMIZATION
   ========================================================================== */
.question-picker-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 0 100px 0;
  color: var(--text-main);
  animation: fadeIn 0.25s ease-out;
}

.picker-header-bar {
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.picker-stats-pill {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border-color);
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-family: var(--font-mono);
}

.picker-stat-badge {
  padding: 3px 10px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.picker-stat-badge.easy {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.picker-stat-badge.med {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.picker-stat-badge.hard {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.picker-stat-badge.diag {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.picker-presets-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.picker-preset-btn {
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.picker-preset-btn:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #38bdf8;
  transform: translateY(-1px);
}

.picker-preset-btn.active {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
}

.picker-filters-row {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.picker-chips-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.picker-filter-chip {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  transition: all 0.15s ease;
}

.picker-filter-chip:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text-main);
}

.picker-filter-chip.active {
  background: rgba(2, 132, 199, 0.15);
  border-color: #0284c7;
  color: #38bdf8;
}

.picker-questions-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.q-picker-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.q-picker-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.q-picker-card.is-selected {
  border-color: #0284c7;
  background: linear-gradient(180deg, rgba(2, 132, 199, 0.07) 0%, var(--bg-card) 100%);
  box-shadow: 0 0 16px rgba(2, 132, 199, 0.2);
}

.q-picker-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.q-picker-left-ctrl {
  display: flex;
  align-items: center;
  gap: 12px;
}

.q-picker-checkbox {
  width: 22px;
  height: 22px;
  cursor: pointer;
  accent-color: #0284c7;
  border-radius: 4px;
}

.q-picker-index-pill {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

.q-picker-card.is-selected .q-picker-index-pill {
  background: #0284c7;
  color: #ffffff;
}

.q-picker-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.q-picker-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
}

.q-picker-badge.diff-easy {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.q-picker-badge.diff-med {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.q-picker-badge.diff-hard {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.q-picker-badge.type-diag {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.q-picker-prompt {
  font-size: 1.02rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--text-main);
}

.q-picker-diagram-box {
  background: #0f172a;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  padding: 12px;
  margin: 6px 0;
  text-align: center;
}

.q-picker-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.q-picker-option-row {
  padding: 10px 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-main);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.q-picker-option-row.is-correct {
  background: rgba(16, 185, 129, 0.12);
  border-color: #10b981;
  color: #10b981;
  font-weight: 700;
}

.q-picker-expl-box {
  background: rgba(0, 0, 0, 0.2);
  border-left: 3px solid #0284c7;
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.picker-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1.5px solid var(--border-color);
  padding: 14px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
}

.btn-exclude-q {
  transition: all 0.15s ease;
}

.btn-exclude-q:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
}

.print-excluded-tray {
  transition: all 0.2s ease;
}

.btn-restore-single-q {
  transition: all 0.15s ease;
}

.btn-restore-single-q:hover {
  background: #22c55e !important;
  color: #ffffff !important;
}

.model-equiv-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Day Mode / High Contrast Overrides */
[data-theme="day"] .q-picker-card.is-selected {
  background: #f0fdf4 !important;
  border-color: #16a34a !important;
}

[data-theme="day"] .picker-stats-pill {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

[data-theme="day"] .picker-bottom-bar {
  background: #ffffff !important;
  border-top-color: #cbd5e1 !important;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="day"] .print-excluded-tray {
  background: #fff1f2 !important;
  border-color: #f87171 !important;
}

[data-theme="day"] .model-equiv-badge {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #a7f3d0 !important;
}

/* ========================================================
   Custom Modals (Custom Questions, Bank Browser, Flashcards)
======================================================== */
.custom-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(2, 6, 23, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 200200 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  animation: customModalFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes customModalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.custom-modal-shell {
  background: #0f172a;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  width: 100%;
  max-height: 92vh;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: customModalScaleIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes customModalScaleIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.cq-math-toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 6px;
}

.btn-math-chip {
  padding: 3px 8px;
  font-size: 0.75rem;
  font-family: var(--font-mono), monospace;
  font-weight: 700;
  border-radius: 5px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  background: rgba(56, 189, 248, 0.1);
  color: #38bdf8;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.btn-math-chip:hover {
  background: rgba(56, 189, 248, 0.22);
  border-color: #38bdf8;
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-math-chip:active {
  transform: scale(0.94);
}

.btn-bank-toggle-add {
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  cursor: pointer;
}

.btn-bank-toggle-add:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
}

.btn-bank-toggle-add:active {
  transform: scale(0.96);
}

.btn-bank-toggle-add.is-in-assessment:hover {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Day Mode / High Contrast Overrides for Custom Modals */
[data-theme="day"] .custom-modal-shell {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 65px rgba(15, 23, 42, 0.2) !important;
}

[data-theme="day"] .custom-modal-header {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="day"] .custom-modal-footer {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="day"] .btn-math-chip {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border-color: #7dd3fc !important;
}

[data-theme="day"] .btn-math-chip:hover {
  background: #bae6fd !important;
  color: #0284c7 !important;
}

/* Teacher Guide & Staff Presentation Modal Animations & Polish */
@keyframes tgModalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.teacher-guide-card {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

.btn-tg-download:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.btn-tg-download:active {
  transform: translateY(0);
}

/* Day Mode Optimizations for Teacher Guide Modal */
[data-theme="day"] .teacher-guide-card {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 25px 70px rgba(15, 23, 42, 0.2) !important;
}

[data-theme="day"] .tg-modal-header {
  background: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
}

[data-theme="day"] .tg-modal-header h2 {
  color: #0f172a !important;
}

[data-theme="day"] .tg-downloads-banner {
  background: linear-gradient(135deg, #e0f2fe, #ede9fe) !important;
  border-bottom-color: #cbd5e1 !important;
}

[data-theme="day"] .tg-modal-nav {
  background: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
}

[data-theme="day"] .tg-tab-pane h3 {
  color: #0f172a !important;
}

[data-theme="day"] .tg-tab-pane > div > div {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* =========================================================================
   Scientific Diagrams Bank & Question Authoring High-Contrast System
   ========================================================================= */

/* Diagram Picker Grid & Layout Architecture */
.diag-picker-modal-shell {
  height: 88vh !important;
  min-height: 560px !important;
  max-height: 94vh !important;
  display: flex !important;
  flex-direction: column !important;
}

.diag-picker-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  grid-auto-rows: minmax(320px, auto) !important;
  align-content: start !important;
  gap: 18px !important;
  padding: 18px 22px !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 250px !important;
  max-height: 100% !important;
}

.diag-picker-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 320px !important;
  height: 100% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
  box-sizing: border-box !important;
  background: var(--bg-card, #1e293b);
  border: 1.5px solid var(--border-color, #334155);
}

.diag-picker-card:hover {
  transform: translateY(-3px) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.3) !important;
}

.diag-picker-preview-box {
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: #ffffff !important;
  padding: 10px !important;
  border-bottom: 1.5px solid var(--border-color, #334155) !important;
  position: relative !important;
}

.diag-picker-preview-box svg {
  width: 100% !important;
  height: 100% !important;
  max-height: 160px !important;
  object-fit: contain !important;
  display: block !important;
  background: #ffffff !important;
}

.diag-picker-card-body {
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 1 0 auto !important;
  justify-content: space-between !important;
}

.diag-picker-search-bar {
  background: rgba(0,0,0,0.12);
  border-bottom: 1.5px solid var(--border-color, #334155);
}

.diag-picker-search-input {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1.5px solid var(--border-color, #334155) !important;
  color: var(--text-main) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.diag-picker-search-input:focus {
  border-color: #38bdf8 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
}

.btn-diag-filter {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1.5px solid var(--border-color, #334155) !important;
  color: var(--text-muted, #94a3b8) !important;
  transition: all 0.15s ease !important;
}

.btn-diag-filter:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.btn-diag-filter.active {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3) !important;
}

.btn-choose-diagram {
  width: 100% !important;
  margin-top: 8px !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  padding: 9px 14px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  background: linear-gradient(135deg, #0284c7, #2563eb) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease !important;
}

.btn-choose-diagram:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.1) !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.45) !important;
}

/* Custom Question Editor High-Contrast Form Controls (Dark Mode Base) */
.cq-textarea {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1.5px solid var(--border-color, #334155) !important;
  color: var(--text-main, #f8fafc) !important;
  font-family: inherit !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.cq-textarea:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
}

.cq-input {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1.5px solid var(--border-color, #334155) !important;
  color: var(--text-main, #f8fafc) !important;
  font-family: inherit !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.cq-input:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
}

.cq-math-toolbar {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1.5px solid var(--border-color, #334155) !important;
}

.cq-diagram-attachment-box {
  background: rgba(15, 23, 42, 0.4) !important;
  border: 1.5px dashed var(--border-color, #334155) !important;
}

.cq-attached-card {
  background: rgba(14, 165, 233, 0.12) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.35) !important;
}

#cq-attached-diag-title {
  color: #38bdf8;
}

.cq-attached-thumb {
  background: #ffffff !important;
  border: 1.5px solid var(--border-color, #cbd5e1) !important;
}

.cq-attached-thumb svg {
  max-height: 140px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
  background: #ffffff !important;
}

.cq-option-row {
  background: rgba(15, 23, 42, 0.5) !important;
  border: 1.5px solid var(--border-color, #334155) !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
}

.cq-option-row:hover {
  border-color: #475569 !important;
  background: rgba(15, 23, 42, 0.7) !important;
}

/* =========================================================================
   Day Mode ([data-theme="day"]) Crisp High-Contrast Overrides
   Eliminates muddy gray boxes, ensures pure white inputs & vivid typography
   ========================================================================= */
[data-theme="day"] .custom-modal-shell {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 25px 70px rgba(15, 23, 42, 0.25) !important;
}

[data-theme="day"] .custom-modal-header {
  background: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
}

[data-theme="day"] .custom-modal-header h3 {
  color: #0f172a !important;
}

[data-theme="day"] .custom-modal-body label {
  color: #1e293b !important;
}

[data-theme="day"] .cq-textarea {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="day"] .cq-textarea::placeholder {
  color: #64748b !important;
}

[data-theme="day"] .cq-textarea:focus {
  background: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), inset 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="day"] .cq-input {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="day"] .cq-input::placeholder {
  color: #64748b !important;
}

[data-theme="day"] .cq-input:focus {
  background: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), inset 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="day"] .cq-math-toolbar {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
}

[data-theme="day"] .cq-math-toolbar span {
  color: #334155 !important;
}

[data-theme="day"] .cq-math-toolbar .btn-math-chip {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="day"] .cq-math-toolbar .btn-math-chip:hover {
  background: #eff6ff !important;
  border-color: #3b82f6 !important;
  color: #1d4ed8 !important;
}

[data-theme="day"] .cq-diagram-attachment-box {
  background: #f8fafc !important;
  border: 1.5px dashed #94a3b8 !important;
}

[data-theme="day"] #btn-cq-open-diag-bank {
  background: #ffffff !important;
  border: 1.5px solid #0284c7 !important;
  color: #0284c7 !important;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.12) !important;
}

[data-theme="day"] #btn-cq-open-diag-bank:hover {
  background: #f0f9ff !important;
  border-color: #0369a1 !important;
  color: #0369a1 !important;
}

[data-theme="day"] #lbl-cq-upload-pic {
  background: #ffffff !important;
  border: 1.5px solid #059669 !important;
  color: #059669 !important;
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.12) !important;
}

[data-theme="day"] #lbl-cq-upload-pic:hover {
  background: #ecfdf5 !important;
  border-color: #047857 !important;
  color: #047857 !important;
}

[data-theme="day"] #btn-cq-apply-url {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="day"] #btn-cq-apply-url:hover {
  background: #e2e8f0 !important;
}

[data-theme="day"] .cq-attached-card {
  background: #f0f9ff !important;
  border: 1.5px solid #7dd3fc !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.08) !important;
}

[data-theme="day"] #cq-attached-diag-title {
  color: #0369a1 !important;
  font-weight: 800 !important;
}

[data-theme="day"] .cq-attached-thumb {
  background: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
}

[data-theme="day"] .cq-option-row {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
}

[data-theme="day"] .cq-option-row:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

[data-theme="day"] .cq-option-input {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="day"] #cq-live-preview {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="day"] .custom-modal-footer {
  background: #f8fafc !important;
  border-top-color: #e2e8f0 !important;
}

[data-theme="day"] #btn-save-cq-bank-only {
  background: #ffffff !important;
  border: 1.5px solid #0284c7 !important;
  color: #0284c7 !important;
}

[data-theme="day"] #btn-save-cq-bank-only:hover {
  background: #f0f9ff !important;
  color: #0369a1 !important;
}

/* Day Mode Optimizations for Scientific Diagrams Bank Modal */
[data-theme="day"] .diag-picker-search-bar {
  background: #f8fafc !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}

[data-theme="day"] .diag-picker-search-input {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="day"] .diag-picker-search-input::placeholder {
  color: #64748b !important;
}

[data-theme="day"] .diag-picker-search-input:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

[data-theme="day"] .btn-diag-filter {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="day"] .btn-diag-filter:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

[data-theme="day"] .btn-diag-filter.active {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3) !important;
}

[data-theme="day"] .diag-picker-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="day"] .diag-picker-card:hover {
  border-color: #2563eb !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.16) !important;
}

[data-theme="day"] .diag-picker-title {
  color: #0f172a !important;
}

[data-theme="day"] .diag-picker-caption {
  color: #475569 !important;
}

/* ==========================================================================
   Microscope & Laboratory Bench 4K Photo Suite & Interactive Hotspots
   ========================================================================== */
.lab-bench-photo-container {
  width: 100%;
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bench-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.bench-photo-frame {
  position: relative;
  width: 100%;
  height: 530px;
  min-height: 480px;
  background: #020617;
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.85);
}

.bench-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hotspot {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.85);
  border: 2px solid #ffffff;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.9), 0 2px 6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  z-index: 10;
  transform: translate(-50%, -50%);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
}

.hotspot::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(56, 189, 248, 0.6);
  animation: pulse-hotspot 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

.hotspot:hover {
  transform: translate(-50%, -50%) scale(1.35);
  background: #38bdf8;
  z-index: 20;
}

.hotspot:hover::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.95);
  color: #f8fafc;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  z-index: 30;
  animation: fadeIn 0.15s ease-out;
}

@keyframes pulse-hotspot {
  0% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.9);
    opacity: 0;
  }
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}

/* ==========================================================================
   EDUGATES INTERNATIONAL SCHOOL SCIENCE LAB - BRAND & PORTAL ENHANCEMENTS
   Modern Deep Blue, White & Vibrant Teal/Cyan Theme • Fully Responsive
   ========================================================================== */

/* Brand & Palette Tokens */
:root {
  --edugates-navy: #0a192f;
  --edugates-deep-blue: #0f172a;
  --edugates-royal: #1e3a8a;
  --edugates-cyan: #0284c7;
  --edugates-cyan-light: #38bdf8;
  --edugates-accent: #0284c7;
  --edugates-white: #ffffff;
  --edugates-teal: #0d9488;
  --edugates-teal-light: #14b8a6;
  --edugates-emerald: #10b981;
  --edugates-amber: #f59e0b;
  --edugates-rose: #f43f5e;
}

/* 1. Persistent Top Navigation Bar (Sticky & Mobile First) */
.app-navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.nav-persistent-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px;
  border-radius: 9999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.nav-menu-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  border: 1px solid transparent;
}

.nav-menu-link:hover {
  color: var(--text-main, #ffffff);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.nav-menu-link.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.9), rgba(3, 105, 161, 0.95));
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.35);
}

.nav-menu-link.tab-bio.active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.95));
  border-color: rgba(52, 211, 153, 0.5);
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35);
}

.nav-menu-link.tab-chem.active {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.9), rgba(8, 145, 178, 0.95));
  border-color: rgba(34, 211, 238, 0.5);
  box-shadow: 0 2px 10px rgba(6, 182, 212, 0.35);
}

.nav-menu-link.tab-phys.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(79, 70, 229, 0.95));
  border-color: rgba(129, 140, 248, 0.5);
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35);
}

.nav-menu-link.tab-safety.active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(13, 148, 136, 0.95));
  border-color: rgba(45, 212, 191, 0.5);
  box-shadow: 0 2px 10px rgba(13, 148, 136, 0.35);
}

.nav-menu-link.tab-labs.active {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.9), rgba(14, 165, 233, 0.95));
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.35);
}

.nav-menu-icon {
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-menu-icon svg {
  width: 15px;
  height: 15px;
}

/* Day Mode Persistent Menu Styles */
[data-theme="day"] .nav-persistent-menu {
  background: rgba(255, 255, 255, 0.85);
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="day"] .nav-menu-link {
  color: #475569;
}

[data-theme="day"] .nav-menu-link:hover {
  color: #0f172a;
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="day"] .nav-menu-link.active {
  color: #ffffff;
}

/* 2. Semantic Application Footer */
.app-footer {
  margin-top: 64px;
  background: linear-gradient(180deg, rgba(10, 25, 47, 0.6) 0%, rgba(7, 10, 18, 0.98) 100%);
  border-top: 1.5px solid rgba(56, 189, 248, 0.2);
  color: #94a3b8;
  padding: 48px 24px 24px;
  position: relative;
  z-index: 10;
}

.app-footer::before {
  content: '';
  position: absolute;
  top: -1.5px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent 5%, #0284c7 30%, #10b981 70%, transparent 95%);
}

.footer-container {
  max-width: 1320px;
  margin: 0 auto;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 40px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.footer-logo-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.footer-subtitle {
  font-size: 0.78rem;
  color: #38bdf8;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.footer-desc {
  font-size: 0.86rem;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 16px;
  max-width: 420px;
}

.footer-compliance-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-compliance-badges .badge {
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}

.footer-heading {
  font-size: 0.95rem;
  font-weight: 800;
  color: #f1f5f9;
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-links li a {
  font-size: 0.84rem;
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.footer-links li a:hover {
  color: #38bdf8;
  transform: translateX(3px);
}

.footer-links li span {
  font-size: 0.84rem;
  color: #94a3b8;
}

.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  color: #64748b;
}

.footer-extra-links {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-extra-links a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-extra-links a:hover {
  color: #38bdf8;
}

/* Day Mode Footer */
[data-theme="day"] .app-footer {
  background: #f1f5f9;
  border-top-color: #cbd5e1;
  color: #475569;
}

[data-theme="day"] .footer-title {
  color: #0f172a;
}

[data-theme="day"] .footer-heading {
  color: #0f172a;
}

[data-theme="day"] .footer-desc {
  color: #475569;
}

[data-theme="day"] .footer-links li a {
  color: #475569;
}

[data-theme="day"] .footer-links li a:hover {
  color: #0284c7;
}

[data-theme="day"] .footer-bottom-bar {
  border-top-color: #e2e8f0;
  color: #64748b;
}

/* 3. Interactive Experiment Cards & Explorer Styles */
.experiment-card:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
}

.experiment-card:hover .exp-card-media img {
  transform: scale(1.05);
}

.equipment-tag {
  transition: background 0.15s ease, border-color 0.15s ease;
}

.equipment-tag:hover {
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  color: #38bdf8 !important;
}

/* 4. Safety Dashboard Styles */
.safety-icon-card {
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.safety-icon-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

.sds-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sds-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* 5. Mobile-First Responsive Breakpoints */
@media (max-width: 1024px) {
  .footer-top-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

@media (max-width: 768px) {
  .nav-persistent-menu {
    overflow-x: auto;
    max-width: calc(100vw - 120px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-persistent-menu::-webkit-scrollbar {
    display: none;
  }
  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .footer-bottom-bar {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .nav-menu-link {
    padding: 5px 10px;
    font-size: 0.78rem;
  }
  .nav-menu-label {
    display: inline;
  }
}