/* Digital SAT Mastery Pro - Global Styles */

:root {
  --nav-height: 56px;
  --solver-footer-height: 64px;
  --page-max-width: 1200px;
  --page-padding: clamp(16px, 3vw, 32px);
  --control-min-size: 44px;
  --radius-card: 20px;
  --sat-safe-top: env(safe-area-inset-top, 0px);
  --sat-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sat-safe-left: env(safe-area-inset-left, 0px);
  --sat-safe-right: env(safe-area-inset-right, 0px);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  max-width: 100%;
}

body {
  max-width: 100vw !important;
  width: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  position: relative;
}

#main-content {
  max-width: 100vw !important;
  width: 100%;
  margin-bottom: 0 !important;
}

html, body, button, input, select, textarea {
  font-family: var(--org-font-family, "Inter", "Plus Jakarta Sans", "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

kbd, samp {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

table, th, td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.tabular-nums,
[class*="tabular-nums"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

pre, pre code, code.code-block {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

@layer utilities {
  .perspective-1000 {
    perspective: 1200px;
    -webkit-perspective: 1200px;
  }
  .transform-style-3d {
    transform-style: preserve-3d;
  }
  .backface-hidden {
    backface-visibility: hidden;
  }
  .rotate-y-180 {
    transform: rotateY(180deg);
  }
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Custom Scrollbars in Light Mode */
html.light ::-webkit-scrollbar-track {
  background: #f1f5f9;
}
html.light ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
html.light ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Hide scrollbar utility for horizontally scrollable bars */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 3D Flip Card Effect for Flashcards (GPU-Accelerated 60fps) */
.perspective-1000 {
  perspective: 1200px !important;
  -webkit-perspective: 1200px !important;
}
.transform-style-3d {
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
}
.backface-hidden {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
.flashcard-inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  will-change: transform;
}
.flashcard-inner.is-flipped,
.flashcard-inner.flipped {
  transform: rotateY(180deg) !important;
  -webkit-transform: rotateY(180deg) !important;
}
.flashcard-front,
.flashcard-back {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
.flashcard-front {
  transform: translate3d(0, 0, 0) !important;
}
.flashcard-back {
  transform: rotateY(180deg) translate3d(0, 0, 0) !important;
  -webkit-transform: rotateY(180deg) translate3d(0, 0, 0) !important;
}

/* Match Game Animations */
@keyframes cardShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.animate-shake {
  animation: cardShake 0.4s ease-in-out;
}

@keyframes matchPop {
  0% { transform: scale(0.95); }
  50% { transform: scale(1.06); box-shadow: 0 0 25px rgba(16, 185, 129, 0.6); }
  100% { transform: scale(1); }
}
.animate-match-success {
  animation: matchPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes comboFloat {
  0% { transform: translateY(10px) scale(0.8); opacity: 0; }
  25% { transform: translateY(-2px) scale(1.15); opacity: 1; }
  75% { transform: translateY(-8px) scale(1.05); opacity: 1; }
  100% { transform: translateY(-16px) scale(0.9); opacity: 0; }
}
.animate-combo-float {
  animation: comboFloat 1.2s ease-out forwards;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); }
  50% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.7); }
}
.animate-pulse-glow {
  animation: pulseGlow 1.5s infinite;
}

/* Options Strikethrough & Elimination Mode */
.strikethrough-option {
  position: relative;
  opacity: 0.45 !important;
  filter: grayscale(0.5);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-style: dashed !important;
  border-color: rgba(244, 63, 94, 0.4) !important;
}

.strikethrough-option .option-text {
  text-decoration: line-through 2px #f43f5e !important;
  text-decoration-thickness: 2px !important;
  color: #94a3b8 !important;
}

html.light .strikethrough-option {
  opacity: 0.45 !important;
  border-color: #fecdd3 !important;
  background-color: rgba(255, 241, 242, 0.7) !important;
}

html.light .strikethrough-option .option-text {
  text-decoration: line-through 2px #ef4444 !important;
  color: #64748b !important;
}

html.light .strikethrough-option .w-7.h-7,
html.light .strikethrough-option .w-8.h-8 {
  opacity: 0.7;
  border-color: #fca5a5 !important;
  color: #ef4444 !important;
  background-color: #fff1f2 !important;
}

/* Cross-Out Active Mode on Options Container */
#options-container.cross-out-active .option-item {
  cursor: crosshair;
}
#options-container.cross-out-active .option-item:hover {
  border-color: rgba(244, 63, 94, 0.6);
}

/* SAT Pro Highlighting Styles */
mark.sat-hl {
  border-radius: 3px;
  padding: 1px 3px;
  margin: 0 1px;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Dark Mode Highlights */
html.dark mark.sat-hl-yellow,
mark.sat-hl-yellow {
  background: rgba(250, 204, 21, 0.4) !important;
  color: #fef08a !important;
  border-bottom: 2px solid #eab308 !important;
}
html.dark mark.sat-hl-yellow:hover,
mark.sat-hl-yellow:hover {
  background: rgba(250, 204, 21, 0.6) !important;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.5);
}

html.dark mark.sat-hl-blue,
mark.sat-hl-blue {
  background: rgba(56, 189, 248, 0.4) !important;
  color: #bae6fd !important;
  border-bottom: 2px solid #0284c7 !important;
}
html.dark mark.sat-hl-blue:hover,
mark.sat-hl-blue:hover {
  background: rgba(56, 189, 248, 0.6) !important;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
}

html.dark mark.sat-hl-green,
mark.sat-hl-green {
  background: rgba(52, 211, 153, 0.4) !important;
  color: #a7f3d0 !important;
  border-bottom: 2px solid #059669 !important;
}
html.dark mark.sat-hl-green:hover,
mark.sat-hl-green:hover {
  background: rgba(52, 211, 153, 0.6) !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

html.dark mark.sat-hl-pink,
mark.sat-hl-pink {
  background: rgba(244, 114, 182, 0.4) !important;
  color: #fbcfe8 !important;
  border-bottom: 2px solid #db2777 !important;
}
html.dark mark.sat-hl-pink:hover,
mark.sat-hl-pink:hover {
  background: rgba(244, 114, 182, 0.6) !important;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.5);
}

html.dark mark.sat-hl-underline,
mark.sat-hl-underline,
u,
.passage-body u,
#question-prompt-box u,
.print-prompt-text u {
  background: transparent !important;
  color: inherit !important;
  text-decoration: underline 2.5px solid #38bdf8 !important;
  text-underline-offset: 4px !important;
  font-weight: 600 !important;
  border-bottom: none !important;
}
html.dark mark.sat-hl-underline:hover,
mark.sat-hl-underline:hover,
.passage-body u:hover {
  text-decoration: underline 2.5px solid #60a5fa !important;
  background: rgba(56, 189, 248, 0.15) !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}

html.light u,
html.light .passage-body u,
html.light #question-prompt-box u {
  text-decoration: underline 2.5px solid #0284c7 !important;
  text-underline-offset: 4px !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* Light Mode Highlights - Crisp dark text on bright highlighter background */
html.light mark.sat-hl-yellow {
  background-color: #fef08a !important;
  color: #0f172a !important;
  border-bottom: 2px solid #ca8a04 !important;
  box-shadow: none !important;
}
html.light mark.sat-hl-yellow:hover {
  background-color: #fde047 !important;
}

html.light mark.sat-hl-blue {
  background-color: #bae6fd !important;
  color: #0f172a !important;
  border-bottom: 2px solid #0284c7 !important;
  box-shadow: none !important;
}
html.light mark.sat-hl-blue:hover {
  background-color: #7dd3fc !important;
}

html.light mark.sat-hl-green {
  background-color: #bbf7d0 !important;
  color: #0f172a !important;
  border-bottom: 2px solid #16a34a !important;
  box-shadow: none !important;
}
html.light mark.sat-hl-green:hover {
  background-color: #86efac !important;
}

html.light mark.sat-hl-pink {
  background-color: #fbcfe8 !important;
  color: #0f172a !important;
  border-bottom: 2px solid #db2777 !important;
  box-shadow: none !important;
}
html.light mark.sat-hl-pink:hover {
  background-color: #f9a8d4 !important;
}

html.light mark.sat-hl-underline {
  background-color: transparent !important;
  color: #0f172a !important;
  text-decoration: underline 2px solid #0284c7 !important;
  text-underline-offset: 3px !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
html.light mark.sat-hl-underline:hover {
  text-decoration: underline 2.5px solid #0369a1 !important;
  background-color: rgba(2, 132, 199, 0.12) !important;
}

/* Highlighting in Passages (Legacy support) */
.sat-highlight-yellow, .passage-highlight-yellow {
  background-color: rgba(250, 204, 21, 0.38) !important;
  color: #fef08a !important;
  border-bottom: 2px solid #eab308 !important;
  border-radius: 3px;
  padding: 1px 3px;
}
.sat-highlight-green, .passage-highlight-green {
  background-color: rgba(52, 211, 153, 0.38) !important;
  color: #a7f3d0 !important;
  border-bottom: 2px solid #059669 !important;
  border-radius: 3px;
  padding: 1px 3px;
}
html.light .sat-highlight-yellow,
html.light .passage-highlight-yellow {
  background-color: #fef08a !important;
  color: #0f172a !important;
  border-bottom: 2px solid #ca8a04 !important;
}
html.light .sat-highlight-green,
html.light .passage-highlight-green {
  background-color: #bbf7d0 !important;
  color: #0f172a !important;
  border-bottom: 2px solid #16a34a !important;
}

/* Split Divider */
.split-divider-handle {
  width: 6px;
  cursor: col-resize;
  background: #1e293b;
  transition: background 0.2s;
}
.split-divider-handle:hover {
  background: #0070f3;
}
html.light .split-divider-handle {
  background: #e2e8f0;
}
html.light .split-divider-handle:hover {
  background: var(--org-primary, #2563eb);
}

/* Bluebook Exam 100% Fixed Fullscreen Lock */
#view-question-solver:not(.hidden) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  min-height: 100svh !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  z-index: 45 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background-color: #020617 !important;
}

#view-question-solver.hidden,
#view-question-solver.hidden > header,
#view-question-solver.hidden > footer,
#view-question-solver.hidden footer,
#view-question-solver.hidden * {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#view-question-solver:not(.hidden) > header {
  flex-shrink: 0 !important;
  height: 44px !important;
  width: 100% !important;
}

#view-question-solver:not(.hidden) .exam-split-workspace {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  display: flex !important;
  width: 100% !important;
}

#view-question-solver:not(.hidden) > footer {
  flex-shrink: 0 !important;
  height: 56px !important;
  width: 100% !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
}

/* Markdown Tables & Rich Content Dark Styling */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.85rem;
  background: rgba(15, 23, 42, 0.7);
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid #334155;
}
th {
  background: rgba(30, 41, 59, 0.9);
  color: #93c5fd;
  font-weight: 700;
  text-align: center;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid #475569;
}
td {
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid #334155;
  color: #e2e8f0;
  text-align: center;
}
tr:last-child td {
  border-bottom: none;
}
tr:hover td {
  background: rgba(51, 65, 85, 0.4);
}

/* ==========================================================================
   LIGHT MODE COMPLETE THEME SYSTEM (Digital SAT Official Clean White)
   ========================================================================== */
html.light,
html.light body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html.light .dash-bg-grid {
  background-color: #f8fafc !important;
}

/* 1. Global Reset of Dark Surface & Border Utilities */
html.light .bg-slate-950,
html.light [class*="bg-slate-950"] {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html.light .bg-slate-900,
html.light [class*="bg-slate-900"] {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

html.light .bg-slate-850,
html.light [class*="bg-slate-850"],
html.light .bg-slate-800,
html.light [class*="bg-slate-800"],
html.light .bg-slate-950\/60,
html.light .bg-slate-950\/70,
html.light .bg-slate-950\/80,
html.light .bg-slate-950\/90 {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.light div.bg-slate-700,
html.light div[class*="bg-slate-700"],
html.light span.bg-slate-700:not(.bg-blue-600 *):not(#grid-buttons-container *) {
  background-color: #e2e8f0 !important;
  color: #1e293b !important;
}

html.light .bg-black,
html.light [class*="bg-black/"] {
  background-color: rgba(15, 23, 42, 0.45) !important;
}

html.light .dash-hero-mesh {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, rgba(var(--org-primary-rgb, 37, 99, 235), 0.08) 100%) !important;
  border-color: rgba(var(--org-primary-rgb, 37, 99, 235), 0.25) !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06) !important;
}

html.light .dash-tile {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.04) !important;
}

html.light .dash-tile-blue,
html.light .dash-tile-gold,
html.light .dash-tile-purple,
html.light .dash-tile-emerald {
  background: #ffffff !important;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.04) !important;
}

html.light .border-slate-800,
html.light [class*="border-slate-800"],
html.light .border-slate-700,
html.light [class*="border-slate-700"],
html.light .border-slate-900,
html.light [class*="border-slate-900"] {
  border-color: #e2e8f0 !important;
}

/* 2. Global Typography & Headings in Light Mode (High Contrast WCAG AAA) */
html.light .text-slate-50,
html.light [class*="text-slate-50"],
html.light .text-slate-100,
html.light .text-slate-200,
html.light .text-slate-300,
html.light [class*="text-slate-100"],
html.light [class*="text-slate-200"],
html.light [class*="text-slate-300"] {
  color: #1e293b !important;
}

html.light .text-slate-400,
html.light .text-slate-500,
html.light [class*="text-slate-400"],
html.light [class*="text-slate-500"] {
  color: #475569 !important;
}

/* Light Mode Pastel / Light-Tint Text Remapping (Accessible WCAG AAA >= 7:1) */
html.light .text-rose-100,
html.light .text-rose-200,
html.light [class*="text-rose-100"],
html.light [class*="text-rose-200"] {
  color: #be123c !important;
}

html.light .text-emerald-100,
html.light .text-emerald-200,
html.light [class*="text-emerald-100"],
html.light [class*="text-emerald-200"] {
  color: #047857 !important;
}

html.light .text-amber-100,
html.light .text-amber-200,
html.light [class*="text-amber-100"],
html.light [class*="text-amber-200"] {
  color: #92400e !important;
}

html.light .text-yellow-100,
html.light .text-yellow-200,
html.light .text-yellow-300,
html.light [class*="text-yellow-100"],
html.light [class*="text-yellow-200"],
html.light [class*="text-yellow-300"] {
  color: #854d0e !important;
}

html.light .text-blue-100,
html.light .text-blue-200,
html.light [class*="text-blue-100"],
html.light [class*="text-blue-200"] {
  color: #1d4ed8 !important;
}

html.light .text-sky-100,
html.light .text-sky-200,
html.light [class*="text-sky-100"],
html.light [class*="text-sky-200"] {
  color: #0369a1 !important;
}

html.light .text-indigo-100,
html.light .text-indigo-200,
html.light [class*="text-indigo-100"],
html.light [class*="text-indigo-200"] {
  color: #4338ca !important;
}

html.light .text-cyan-100,
html.light .text-cyan-200,
html.light [class*="text-cyan-100"],
html.light [class*="text-cyan-200"] {
  color: #0e7490 !important;
}

html.light .text-teal-100,
html.light .text-teal-200,
html.light [class*="text-teal-100"],
html.light [class*="text-teal-200"] {
  color: #0f766e !important;
}

html.light .text-purple-100,
html.light .text-purple-200,
html.light [class*="text-purple-100"],
html.light [class*="text-purple-200"] {
  color: #6d28d9 !important;
}

html.light .text-violet-100,
html.light .text-violet-200,
html.light .text-violet-300,
html.light [class*="text-violet-100"],
html.light [class*="text-violet-200"],
html.light [class*="text-violet-300"] {
  color: #6d28d9 !important;
}

html.light .text-pink-100,
html.light .text-pink-200,
html.light .text-pink-300,
html.light [class*="text-pink-100"],
html.light [class*="text-pink-200"],
html.light [class*="text-pink-300"] {
  color: #be185d !important;
}

html.light .text-orange-100,
html.light .text-orange-200,
html.light .text-orange-300,
html.light [class*="text-orange-100"],
html.light [class*="text-orange-200"],
html.light [class*="text-orange-300"] {
  color: #c2410c !important;
}

html.light h1:not(.text-transparent),
html.light h2:not(.text-transparent),
html.light h3:not(.text-transparent),
html.light h4:not(.text-transparent),
html.light h5:not(.text-transparent),
html.light h6:not(.text-transparent) {
  color: #0f172a !important;
}

html.light p,
html.light p.text-slate-400,
html.light p.text-slate-500,
html.light p[class*="text-slate-400"],
html.light p[class*="text-slate-500"],
html.light p[class*="text-slate-300"],
html.light p[class*="text-slate-200"] {
  color: #334155 !important;
}

html.light label,
html.light label[class*="text-slate-"],
html.light .form-label {
  color: #1e293b !important;
}

/* 3. Saturated Avatars, Logos & Fixed UI Badges Text Color */
html.light #prof-avatar,
html.light #prof-avatar *,
html.light .roster-avatar,
html.light .roster-avatar *,
html.light #site-logo,
html.light #site-logo *,
html.light #auth-modal-logo-badge,
html.light #auth-modal-logo-badge *,
html.light #grid-buttons-container button.bg-slate-700,
html.light #grid-buttons-container button.bg-blue-600 {
  color: #ffffff !important;
}

/* General .text-white turns to #0f172a on light/neutral surfaces */
/* Remove the lagging 42-clause :not() selector with clean light text styling */
html.light .text-white {
  color: #0f172a !important;
}

html.light button.bg-blue-600, html.light button.bg-blue-600 *,
html.light a.bg-blue-600, html.light a.bg-blue-600 *,
html.light button.bg-indigo-600, html.light button.bg-indigo-600 *,
html.light a.bg-indigo-600, html.light a.bg-indigo-600 *,
html.light button.bg-emerald-600, html.light button.bg-emerald-600 *,
html.light a.bg-emerald-600, html.light a.bg-emerald-600 *,
html.light button.bg-rose-600, html.light button.bg-rose-600 *,
html.light a.bg-rose-600, html.light a.bg-rose-600 *,
html.light button.bg-purple-600, html.light button.bg-purple-600 *,
html.light a.bg-purple-600, html.light a.bg-purple-600 *,
html.light .btn-theme-primary, html.light .btn-theme-primary *,
html.light button[class*="bg-gradient-"]:not([class*="from-amber"]):not([class*="from-yellow"]):not([class*="text-slate-950"]):not([class*="/10"]):not([class*="/15"]):not([class*="/20"]):not(#btn-passage-logic-map),
html.light button[class*="bg-gradient-"]:not([class*="from-amber"]):not([class*="from-yellow"]):not([class*="text-slate-950"]):not([class*="/10"]):not([class*="/15"]):not([class*="/20"]):not(#btn-passage-logic-map) *,
html.light a[class*="bg-gradient-"]:not([class*="from-amber"]):not([class*="from-yellow"]):not([class*="text-slate-950"]):not([class*="/10"]):not([class*="/15"]):not([class*="/20"]),
html.light a[class*="bg-gradient-"]:not([class*="from-amber"]):not([class*="from-yellow"]):not([class*="text-slate-950"]):not([class*="/10"]):not([class*="/15"]):not([class*="/20"]) *,
html.light .badge-solid, html.light .badge-solid * {
  color: #ffffff !important;
}

html.light #btn-passage-logic-map,
html.light #btn-passage-logic-map * {
  color: #92400e !important;
}

/* Light mode selected option text must ALWAYS be dark high-contrast slate/navy, NEVER white */
html.light .option-item.is-selected,
html.light .option-item.is-selected *,
html.light .option-item.option-selected,
html.light .option-item.option-selected *,
html.light .option-item[aria-checked="true"]:not(.is-correct):not(.is-incorrect),
html.light .option-item[aria-checked="true"]:not(.is-correct):not(.is-incorrect) * {
  color: #0f172a !important;
}
html.light .option-item.is-selected .option-text,
html.light .option-item.is-selected .option-text *,
html.light .option-item.option-selected .option-text,
html.light .option-item.option-selected .option-text * {
  color: #1e3a8a !important; /* Deep contrast navy */
  font-weight: 600 !important;
}
html.light .option-item.is-selected .option-bubble,
html.light .option-item.is-selected .option-bubble *,
html.light .option-item.option-selected .option-bubble,
html.light .option-item.option-selected .option-bubble *,
html.light .option-item[aria-checked="true"]:not(.is-correct):not(.is-incorrect) .option-bubble,
html.light .option-item[aria-checked="true"]:not(.is-correct):not(.is-incorrect) .option-bubble * {
  color: #ffffff !important;
  background-color: #2563eb !important;
}

html.light .nav-btn.bg-blue-600,
html.light .nav-btn.bg-blue-600 *,
html.light .nav-btn.is-active,
html.light .nav-btn.is-active * {
  color: #ffffff !important;
}

/* High-contrast dark slate text on bright amber buttons & badges */
html.light .bg-amber-500,
html.light .bg-amber-500 *,
html.light .bg-cyan-500.text-slate-950,
html.light .bg-cyan-500.text-slate-950 * {
  color: #0f172a !important;
}

/* Neutral Button Light Mode States */
html.light button.bg-slate-700:not(#grid-buttons-container button),
html.light button.bg-slate-700:not(#grid-buttons-container button) *,
html.light button.bg-slate-800, html.light button.bg-slate-800 *,
html.light button.bg-slate-850, html.light button.bg-slate-850 *,
html.light button.bg-slate-900, html.light button.bg-slate-900 *,
html.light button.bg-slate-950, html.light button.bg-slate-950 *,
html.light button[class*="bg-slate-800"], html.light button[class*="bg-slate-800"] *,
html.light button[class*="bg-slate-900"], html.light button[class*="bg-slate-900"] *,
html.light button[class*="bg-slate-950"], html.light button[class*="bg-slate-950"] *,
html.light a.bg-slate-800, html.light a.bg-slate-800 *,
html.light a.bg-slate-700, html.light a.bg-slate-700 *,
html.light a[class*="bg-slate-800"], html.light a[class*="bg-slate-800"] * {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

html.light button.bg-slate-700:not(#grid-buttons-container button):hover,
html.light button.bg-slate-700:not(#grid-buttons-container button):hover *,
html.light button.bg-slate-800:hover, html.light button.bg-slate-800:hover *,
html.light button.bg-slate-850:hover, html.light button.bg-slate-850:hover *,
html.light button.bg-slate-900:hover, html.light button.bg-slate-900:hover *,
html.light button.bg-slate-950:hover, html.light button.bg-slate-950:hover *,
html.light button[class*="bg-slate-800"]:hover, html.light button[class*="bg-slate-800"]:hover *,
html.light button[class*="bg-slate-900"]:hover, html.light button[class*="bg-slate-900"]:hover *,
html.light button[class*="bg-slate-950"]:hover, html.light button[class*="bg-slate-950"]:hover *,
html.light a.bg-slate-800:hover, html.light a.bg-slate-800:hover *,
html.light a.bg-slate-700:hover, html.light a.bg-slate-700:hover *,
html.light a[class*="bg-slate-800"]:hover, html.light a[class*="bg-slate-800"]:hover * {
  background-color: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* Fix hover states so icons and text never turn white on light backgrounds */
html.light .hover\:text-white:hover:not(.bg-blue-600):not(.bg-indigo-600):not(.bg-rose-600):not(.bg-emerald-600):not(.bg-purple-600):not(.btn-primary):not(.btn-theme-primary):not([class*="from-blue"]):not([class*="from-purple"]):not([class*="from-emerald"]):not([class*="from-rose"]),
html.light [class*="hover:text-white"]:hover:not(.bg-blue-600):not(.bg-indigo-600):not(.bg-rose-600):not(.bg-emerald-600):not(.bg-purple-600):not(.btn-primary):not(.btn-theme-primary):not([class*="from-blue"]):not([class*="from-purple"]):not([class*="from-emerald"]):not([class*="from-rose"]),
html.light .hover\:text-white:hover:not(.bg-blue-600):not(.bg-indigo-600):not(.bg-rose-600):not(.bg-emerald-600):not(.bg-purple-600):not(.btn-primary):not(.btn-theme-primary):not([class*="from-blue"]):not([class*="from-purple"]):not([class*="from-emerald"]):not([class*="from-rose"]) *,
html.light [class*="hover:text-white"]:hover:not(.bg-blue-600):not(.bg-indigo-600):not(.bg-rose-600):not(.bg-emerald-600):not(.bg-purple-600):not(.btn-primary):not(.btn-theme-primary):not([class*="from-blue"]):not([class*="from-purple"]):not([class*="from-emerald"]):not([class*="from-rose"]) *,
html.light [class*="hover:text-slate-100"]:hover,
html.light [class*="hover:text-slate-100"]:hover *,
html.light [class*="hover:text-slate-200"]:hover,
html.light [class*="hover:text-slate-200"]:hover *,
html.light [class*="hover:text-slate-300"]:hover,
html.light [class*="hover:text-slate-300"]:hover * {
  color: #0f172a !important;
}

html.light .hover\:bg-slate-700:hover,
html.light .hover\:bg-slate-800:hover,
html.light [class*="hover:bg-slate-700"]:hover,
html.light [class*="hover:bg-slate-800"]:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* 4. Form Controls & Inputs (White background, Slate-300 border, Slate-900 text) */
html.light input:not([type="checkbox"]):not([type="radio"]),
html.light select,
html.light textarea {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.light input:not([type="checkbox"]):not([type="radio"]):focus,
html.light select:focus,
html.light textarea:focus {
  background-color: #ffffff !important;
  border-color: var(--org-primary, #2563eb) !important;
  color: #0f172a !important;
  box-shadow: 0 0 0 3px rgba(var(--org-primary-rgb, 37, 99, 235), 0.15) !important;
}

html.light select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
  color: #94a3b8 !important;
}

/* 5. Modals Container in Light Mode */
html.light [id^="modal-"] > div {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

html.light [id^="modal-"] h1,
html.light [id^="modal-"] h2,
html.light [id^="modal-"] h3,
html.light [id^="modal-"] h4 {
  color: #0f172a !important;
}

html.light [id^="modal-"] p {
  color: #334155 !important;
}

/* 4. Global Navbar */
html.light #global-navbar {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}
html.light #global-navbar nav {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}
html.light #global-navbar .nav-btn {
  color: #475569 !important;
}
html.light #global-navbar .nav-btn:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}
html.light #global-navbar .nav-btn.bg-blue-600 {
  background-color: var(--org-primary-600, #2563eb) !important;
  color: #ffffff !important;
}
html.light #btn-user-auth,
html.light #btn-theme-toggle {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* 5. Exam Solver Fullscreen Workspace */
html.light #view-question-solver {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}
html.light #view-question-solver > header {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
html.light #view-question-solver > footer {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.04) !important;
}
html.light #left-pane {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}
html.light #right-pane {
  background-color: #f8fafc !important;
  color: #1e293b !important;
}
html.light #passage-container,
html.light .passage-body {
  color: #1e293b !important;
}
html.light #question-prompt-box {
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* Option Items A, B, C, D */
html.light .option-item {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}
html.light .option-item:hover {
  border-color: #93c5fd !important;
  background-color: #f8fafc !important;
}
html.light .option-item .option-text {
  color: #1e293b !important;
}
html.light .option-item .w-7.h-7,
html.light .option-item .w-8.h-8 {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}
html.light .option-item .w-7.h-7.bg-blue-600,
html.light .option-item .w-8.h-8.bg-blue-600 {
  background-color: var(--org-primary-600, #2563eb) !important;
  border-color: var(--org-primary-700, #1d4ed8) !important;
  color: #ffffff !important;
}
html.light .option-item .w-7.h-7.bg-emerald-600,
html.light .option-item .w-8.h-8.bg-emerald-600 {
  background-color: #059669 !important;
  border-color: #047857 !important;
  color: #ffffff !important;
}
html.light .option-item .w-7.h-7.bg-rose-600,
html.light .option-item .w-8.h-8.bg-rose-600 {
  background-color: #e11d48 !important;
  border-color: #be123c !important;
  color: #ffffff !important;
}

/* Exam Timer & Badges */
html.light #exam-timer-container {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}
html.light #exam-timer-display {
  color: #0f172a !important;
}
html.light #q-section-badge {
  background-color: rgba(var(--org-primary-rgb, 37, 99, 235), 0.12) !important;
  color: var(--org-primary-700, #1d4ed8) !important;
  border-color: rgba(var(--org-primary-rgb, 37, 99, 235), 0.3) !important;
}
html.light #q-code-badge {
  background-color: #f1f5f9 !important;
  color: #64748b !important;
}
html.light #view-question-solver header button:not(.bg-gradient-to-r):not(#btn-session-finish):not(.bg-rose-600) {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}
html.light #view-question-solver header button:not(.bg-gradient-to-r):not(#btn-session-finish):not(.bg-rose-600):hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}
html.light #view-question-solver footer button#btn-prev-q,
html.light #view-question-solver footer button[onclick="openQuestionGridModal()"] {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}
html.light #bottom-q-counter {
  color: #1e293b !important;
}

/* Solution Panel */
html.light #solution-panel {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.08) !important;
}
html.light #explanation-content-vi,
html.light #explanation-content-en {
  color: #334155 !important;
}
html.light #desmos-shortcut-card {
  background-color: #ecfeff !important;
  border-color: #a5f3fc !important;
  color: #155e75 !important;
}
html.light #desmos-shortcut-text {
  background-color: #ffffff !important;
  border-color: #cffafe !important;
  color: #0e7490 !important;
}

/* 6. FLASHCARD VOCABULARY SUITE (#view-flashcards) IN LIGHT MODE */
html.light #view-flashcards {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html.light #view-flashcards .vocab-sub-tab.bg-slate-800 {
  background-color: transparent !important;
  color: #475569 !important;
}

html.light #view-flashcards .vocab-sub-tab.bg-slate-800:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light #view-flashcards .vocab-sub-tab.bg-blue-600 {
  background-color: var(--org-primary-600, #2563eb) !important;
  color: #ffffff !important;
}

/* Flashcard 3D Card Front Face */
html.light .flashcard-card .flashcard-front {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  background-image: none !important;
  border: 2px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.08) !important;
}

html.light .flashcard-card:hover .flashcard-front {
  border-color: rgba(var(--org-primary-rgb, 37, 99, 235), 0.4) !important;
}

html.light #flashcard-word,
html.light #srs-card-word {
  color: #0f172a !important;
}

html.light #flashcard-ipa,
html.light #srs-card-ipa {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #4338ca !important;
}

html.light .flashcard-front button[onclick*="speakWord"],
html.light .flashcard-front button.audio-speak-btn {
  background-color: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

html.light .flashcard-front button[onclick*="speakWord"]:hover,
html.light .flashcard-front button.audio-speak-btn:hover {
  background-color: var(--org-primary-600, #2563eb) !important;
  color: #ffffff !important;
}

/* Flashcard 3D Card Back Face */
html.light .flashcard-card .flashcard-back {
  background: linear-gradient(145deg, rgba(var(--org-primary-50-rgb, 239, 246, 255), 0.4) 0%, #ffffff 50%, rgba(var(--org-primary-50-rgb, 239, 246, 255), 0.3) 100%) !important;
  background-image: none !important;
  border: 2px solid rgba(var(--org-primary-rgb, 37, 99, 235), 0.35) !important;
  color: #0f172a !important;
  box-shadow: 0 12px 32px -4px rgba(var(--org-primary-rgb, 37, 99, 235), 0.08) !important;
}

html.light #flashcard-meaning-vi,
html.light #srs-card-meaning-vi {
  color: #047857 !important; /* emerald-700 */
}

html.light #flashcard-meaning-en,
html.light #srs-card-meaning-en {
  color: #475569 !important;
}

html.light #flashcard-synonyms span {
  background-color: rgba(var(--org-primary-50-rgb, 239, 246, 255), 0.7) !important;
  color: var(--org-primary-700, #1d4ed8) !important;
  border: 1px solid rgba(var(--org-primary-rgb, 37, 99, 235), 0.3) !important;
}

html.light .flashcard-back .bg-slate-950\/90,
html.light #srs-card-context {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

html.light .flashcard-back .bg-slate-950\/90 b {
  color: var(--org-primary-700, #1d4ed8) !important;
}

html.light .flashcard-back .text-amber-300,
html.light #srs-card-mnemonic-row {
  background-color: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #92400e !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
}

html.light #srs-card-etymology-box {
  background-color: #faf5ff !important;
  border-color: #e9d5ff !important;
  color: #581c87 !important;
}

/* Leitner SRS 4-Rating Buttons in Light Mode */
html.light button[onclick*="submitSRSRating(1)"] {
  background-color: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #9f1239 !important;
}
html.light button[onclick*="submitSRSRating(1)"] * {
  color: #be123c !important;
}
html.light button[onclick*="submitSRSRating(1)"] kbd {
  background-color: #ffe4e6 !important;
  border-color: #fca5a5 !important;
  color: #9f1239 !important;
}

html.light button[onclick*="submitSRSRating(2)"] {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}
html.light button[onclick*="submitSRSRating(2)"] * {
  color: #b45309 !important;
}
html.light button[onclick*="submitSRSRating(2)"] kbd {
  background-color: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}

html.light button[onclick*="submitSRSRating(3)"] {
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #065f46 !important;
}
html.light button[onclick*="submitSRSRating(3)"] * {
  color: #047857 !important;
}
html.light button[onclick*="submitSRSRating(3)"] kbd {
  background-color: #d1fae5 !important;
  border-color: #6ee7b7 !important;
  color: #065f46 !important;
}

html.light button[onclick*="submitSRSRating(4)"] {
  background-color: #faf5ff !important;
  border-color: #e9d5ff !important;
  color: #581c87 !important;
}
html.light button[onclick*="submitSRSRating(4)"] * {
  color: #6d28d9 !important;
}
html.light button[onclick*="submitSRSRating(4)"] kbd {
  background-color: #f3e8ff !important;
  border-color: #d8b4fe !important;
  color: #581c87 !important;
}

/* Mastery Buttons */
html.light button[onclick="markFlashcardMastery(false)"] {
  background-color: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #be123c !important;
}
html.light button[onclick="markFlashcardMastery(true)"] {
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
}
html.light button[onclick="prevFlashcard()"] {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

/* ==========================================================================
   ENTERPRISE PERFORMANCE, SPEED & RESPONSIVE DESIGN POLISH
   ========================================================================== */

/* High performance rendering with GPU acceleration support */
.smooth-gpu,
.glass-panel,
.dash-tile,
.bento-card,
.modal-glass-container {
  transform: translate3d(0, 0, 0);
  will-change: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Virtualized performance for long lists (2,500 questions, 992 vocab cards) */
.virtual-content-contain {
  content-visibility: auto;
  contain-intrinsic-size: 1px 180px;
}

/* Safe area insets for modern mobile devices (iPhone notch & home bar) */
.safe-area-pb {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
}
.safe-area-pt {
  padding-top: max(0.75rem, env(safe-area-inset-top, 0px)) !important;
}
.safe-modal,
.safe-area-padding {
  padding-top: max(12px, env(safe-area-inset-top));
  padding-right: max(12px, env(safe-area-inset-right));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  padding-left: max(12px, env(safe-area-inset-left));
}

/* ==========================================================================
   MOBILE BOTTOM QUICKBAR: PERMANENTLY REMOVED TO PREVENT REDUNDANCY
   Navigation is cleanly and exclusively handled by the Top Mobile Drawer.
   ========================================================================== */
#mobile-bottom-quickbar,
#mobile-bottom-quickbar * {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  opacity: 0 !important;
}

#mobile-bottom-quickbar.hidden {
  display: none !important;
}

/* Zero phantom bottom heights or lingering gaps left behind by legacy bottom bars */
@media (max-width: 1023.98px) {
  #main-content {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Touch Targets: minimum 44px on mobile (< 1024px) for all interactive elements */
@media (max-width: 1023.98px) {
  button:not(.no-touch-min), 
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea,
  a.nav-btn,
  a.btn,
  a[role="button"],
  [role="button"]:not(.no-touch-min),
  .nav-btn,
  .mnav-item,
  .formula-opt-btn, 
  .option-card, 
  .option-item,
  .tax-filter-btn,
  .diff-sec-btn,
  .vocab-sub-tab,
  .keypad-btn,
  .solver-tag-btn,
  .auth-tab-btn,
  .auth-input-field,
  .pricing-card button,
  .pricing-card a,
  #solver-mobile-tabs button,
  #global-navbar button,
  #global-navbar a,
  #mobile-nav-panel button,
  #mobile-nav-panel a,
  #passage-highlight-toolbar button,
  #grid-buttons-container button,
  #learn-options-container button,
  #cloze-options-container button,
  .security-shield-btn {
    min-height: 44px !important;
  }

  a.nav-btn,
  a.btn,
  a[role="button"],
  .mnav-item {
    display: inline-flex;
    align-items: center;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea,
  .auth-input-field {
    min-height: 44px !important;
    font-size: 16px !important; /* Strictly prevents iOS Safari auto-zoom */
  }
}

/* Shimmer Skeleton Placeholder for Sub-millisecond Perceived Latency */
.skeleton-shimmer {
  background: linear-gradient(90deg, rgba(30, 41, 59, 0.4) 25%, rgba(51, 65, 85, 0.6) 50%, rgba(30, 41, 59, 0.4) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite ease-in-out;
  border-radius: 0.75rem;
}

html.light .skeleton-shimmer {
  background: linear-gradient(90deg, rgba(241, 245, 249, 0.8) 25%, rgba(226, 232, 240, 0.9) 50%, rgba(241, 245, 249, 0.8) 75%);
  background-size: 200% 100%;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}