/* Learn Mode */
html.light #learn-question-box,
html.light #learn-result-box {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.06) !important;
}
html.light #learn-word {
  color: #0f172a !important;
}
html.light #learn-context {
  color: #475569 !important;
}
html.light #learn-options-container button {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}
html.light #learn-options-container button:hover {
  background-color: #f8fafc !important;
  border-color: #3b82f6 !important;
  color: #0f172a !important;
}
html.light #learn-options-container button span.w-6.h-6 {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}
html.light #learn-options-container button.border-emerald-500 {
  background-color: #ecfdf5 !important;
  border-color: #059669 !important;
  color: #065f46 !important;
}
html.light #learn-options-container button.border-rose-500 {
  background-color: #fff1f2 !important;
  border-color: #e11d48 !important;
  color: #9f1239 !important;
}

/* Match Game Cards */
html.light #match-game-grid button {
  background: #ffffff !important;
  background-image: none !important;
  border: 2px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
html.light #match-game-grid button:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.15) !important;
  background-color: #f0f9ff !important;
}
html.light #match-game-grid button.matched-card {
  background-color: #ecfdf5 !important;
  border-color: #10b981 !important;
  color: #065f46 !important;
}
html.light #match-game-timer {
  color: #0f172a !important;
}
html.light #match-leaderboard-list > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}

/* Vocab Explorer */
html.light #vocab-explorer-list > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.05) !important;
}
html.light #vocab-explorer-list h3 {
  color: #0f172a !important;
}
html.light #vocab-explorer-list p {
  color: #334155 !important;
}

/* Vocab Roots & Cloze in Light Mode */
html.light #vocab-roots-list > div,
html.light #cloze-question-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.05) !important;
}
html.light #cloze-options-container button {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
}
html.light #cloze-options-container button:hover {
  background-color: #f8fafc !important;
  border-color: #3b82f6 !important;
  color: #0f172a !important;
}

/* 7. PERSONAL PROFILE STUDIO (#view-profile) IN LIGHT MODE */
html.light #view-profile > div:first-child,
html.light #view-profile .bg-gradient-to-r.from-blue-950 {
  background: linear-gradient(135deg, rgba(var(--org-primary-50-rgb, 239, 246, 255), 0.5) 0%, #ffffff 50%, rgba(var(--org-accent-50-rgb, 245, 243, 255), 0.5) 100%) !important;
  border-color: rgba(var(--org-primary-rgb, 37, 99, 235), 0.25) !important;
  box-shadow: 0 10px 35px -5px rgba(var(--org-primary-rgb, 37, 99, 235), 0.08) !important;
}
html.light #prof-avatar {
  --tw-ring-color: #ffffff !important;
  box-shadow: 0 10px 25px -3px rgba(var(--org-primary-rgb, 37, 99, 235), 0.25) !important;
}
html.light #prof-display-name {
  color: #0f172a !important;
}
html.light #prof-username {
  color: #64748b !important;
}
html.light #prof-streak {
  color: #b45309 !important; /* amber-700 */
}
html.light #prof-target {
  color: var(--org-primary-600, #1d4ed8) !important;
}
html.light #view-profile button[onclick="openAuthModal()"] {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}
html.light #view-profile button[onclick="handleLogout()"] {
  background-color: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #be123c !important;
}

/* Profile 4 Quick Metrics Cards */
html.light #view-profile .grid.grid-cols-2.sm\:grid-cols-4 > div,
html.light #view-profile .bg-slate-900.p-5 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.05) !important;
}
html.light #prof-total-est,
html.light #prof-total-ans {
  color: #0f172a !important;
}
html.light #prof-rw-est,
html.light #prof-math-est {
  color: var(--org-primary-600, #1d4ed8) !important;
}
html.light #prof-total-cor,
html.light #prof-acc {
  color: #047857 !important;
}
html.light #prof-total-wrong {
  color: #be123c !important;
}
html.light #prof-vocab-mastered {
  color: #7e22ce !important;
}

/* Profile Settings Box */
html.light #view-profile .bg-slate-900.p-6 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.05) !important;
}
html.light #view-profile label.text-slate-300,
html.light #view-profile label {
  color: #1e293b !important;
}
html.light #profile-target-slider-label {
  color: var(--org-primary-600, #1d4ed8) !important;
}

/* Profile SAT Goal Studio Card in Light Mode */
html.light #sat-goal-studio-card {
  background: linear-gradient(135deg, rgba(var(--org-primary-50-rgb, 239, 246, 255), 0.6) 0%, #ffffff 50%, rgba(var(--org-accent-50-rgb, 245, 243, 255), 0.6) 100%) !important;
  border-color: rgba(var(--org-primary-rgb, 37, 99, 235), 0.25) !important;
  box-shadow: 0 10px 35px -5px rgba(var(--org-primary-rgb, 37, 99, 235), 0.08) !important;
}
html.light #sat-goal-studio-card .bg-slate-950\/90,
html.light #sat-goal-studio-card .bg-slate-900 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}
html.light #sat-goal-studio-card [class*="from-slate-900"] {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
html.light #sat-goal-studio-card h3,
html.light #sat-goal-studio-card h4,
html.light #prof-countdown-days,
html.light #prof-daily-answered-text {
  color: #0f172a !important;
}
html.light #prof-countdown-hours {
  color: #b45309 !important;
}
html.light #prof-countdown-mins {
  color: #0369a1 !important;
}
html.light #prof-countdown-secs {
  color: #047857 !important;
}

/* 8. LANDING, TEST SUITES, TAXONOMY & DRILLS */
html.light #view-landing .bg-gradient-to-r.from-blue-950,
html.light #view-landing .relative.overflow-hidden.rounded-3xl.bg-gradient-to-r,
html.light #view-explorer .relative.overflow-hidden.rounded-3xl.bg-gradient-to-r {
  background: linear-gradient(135deg, rgba(var(--org-primary-50-rgb, 239, 246, 255), 0.6) 0%, #ffffff 50%, rgba(var(--org-accent-50-rgb, 245, 243, 255), 0.6) 100%) !important;
  border-color: rgba(var(--org-primary-rgb, 37, 99, 235), 0.25) !important;
  box-shadow: 0 10px 35px -5px rgba(var(--org-primary-rgb, 37, 99, 235), 0.08) !important;
}

html.light #test-suites-container > div,
html.light .test-suite-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.06) !important;
}

html.light .tax-filter-btn.bg-slate-900,
html.light .diff-sec-btn.bg-slate-900 {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

html.light #view-taxonomy_drills [id^="domain-cards-container"] > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.05) !important;
}

html.light #view-taxonomy_drills [id$="-skills-list"] > div {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html.light #view-difficulty_drills .bg-gradient-to-br.from-indigo-950\/40 {
  background: linear-gradient(135deg, #eef2ff 0%, #ffffff 50%, #faf5ff 100%) !important;
  border-color: #c7d2fe !important;
}

/* 9. QUESTION EXPLORER, DESMOS, GRAMMAR, ERROR LOG & ANALYTICS */
html.light #explorer-questions-list > div,
html.light #desmos-questions-list > div,
html.light #grammar-questions-list > div,
html.light #error-questions-list > div,
html.light #domain-performance-bars > div,
html.light #domain-performance-bars,
html.light .question-card-item {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.05) !important;
}

html.light #view-analytics .bg-gradient-to-br.from-blue-900\/40 {
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%) !important;
  border-color: #bfdbfe !important;
}

/* 10. MODALS & DRAWERS IN LIGHT MODE */
html.light #modal-question-grid > div,
html.light #modal-shortcuts-guide > div,
html.light #modal-reference > div,
html.light #modal-exam-complete > div,
html.light #modal-session-report > div,
html.light #modal-auth > div,
html.light #modal-adaptive-routing > div,
html.light #modal-question-remix > div,
html.light #modal-original-image > div,
html.light #modal-session-config > div,
html.light #modal-quick-drill > div,
html.light #modal-passage-vocab > div,
html.light #modal-passage-analytics > div,
html.light #modal-cram-answers > div,
html.light [id^="modal-adm-"] > div,
html.light [id^="modal-teacher-"] > div,
html.light [id^="modal-student-"] > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.15) !important;
  color: #0f172a !important;
}

/* Question Grid Modal Buttons */
html.light #grid-buttons-container button {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}
html.light #grid-buttons-container button.bg-slate-700 {
  background-color: #334155 !important;
  border-color: #1e293b !important;
  color: #ffffff !important;
}
html.light #grid-buttons-container button.bg-amber-500\/20 {
  background-color: #fef9c3 !important;
  border-color: #f59e0b !important;
  color: #a16207 !important;
}
html.light #grid-buttons-container button.bg-blue-600 {
  background-color: var(--org-primary-600, #2563eb) !important;
  border-color: var(--org-primary-700, #1d4ed8) !important;
  color: #ffffff !important;
}

/* Modals footer buttons in Light Mode */
html.light [id^="modal-"] button.bg-slate-800,
html.light [id^="modal-"] button.bg-slate-900,
html.light [id^="modal-"] button.bg-slate-950 {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}
html.light [id^="modal-"] button.bg-slate-800:hover,
html.light [id^="modal-"] button.bg-slate-900:hover,
html.light [id^="modal-"] button.bg-slate-950:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Shortcuts Modal KBD */
html.light #modal-shortcuts-guide .bg-slate-950 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
html.light kbd {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 2px 0 #cbd5e1 !important;
}

/* Floating Desmos Window */
html.light #floating-desmos-window {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
}
html.light #desmos-drag-header {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Floating AI Tutor Coach Window */
html.light #ai-tutor-drawer {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 15px 40px -5px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
html.light #ai-tutor-drag-header {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
html.light #ai-tutor-drag-header .text-white {
  color: #0f172a !important;
}
html.light #ai-tutor-quick-prompts {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
html.light #ai-tutor-quick-prompts button {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
}
html.light #ai-tutor-quick-prompts button:hover {
  background-color: #f1f5f9 !important;
}
html.light #ai-tutor-input-bar {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
html.light #ai-chat-messages {
  background-color: #ffffff !important;
}
html.light .ai-msg-content {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}
html.light .ai-msg-content pre {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html.light .ai-msg-content code {
  background-color: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html.light .ai-msg-content table th {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
html.light .ai-msg-content table td {
  background-color: #ffffff !important;
  color: #334155 !important;
  border-color: #e2e8f0 !important;
}
html.light .ai-msg-content table tr:nth-child(even) td {
  background-color: #f8fafc !important;
}
html.light .ai-msg-content blockquote {
  border-left-color: #3b82f6 !important;
  color: #475569 !important;
  background-color: #f8fafc !important;
}

/* Form Controls & Inputs */
html.light input[type="text"],
html.light input[type="email"],
html.light input[type="password"],
html.light textarea,
html.light select {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html.light input[type="text"]:focus,
html.light input[type="email"]:focus,
html.light input[type="password"]:focus,
html.light textarea:focus,
html.light select:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

/* Color Badges */
html.light .bg-indigo-500\/20,
html.light .bg-indigo-500\/10,
html.light [class*="bg-indigo-500\/"] {
  background-color: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #4338ca !important;
}
html.light .text-indigo-300,
html.light .text-indigo-400,
html.light [class*="text-indigo-300"],
html.light [class*="text-indigo-400"] {
  color: #4f46e5 !important;
}

html.light .bg-emerald-500\/20,
html.light .bg-emerald-500\/10,
html.light [class*="bg-emerald-500\/"] {
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #059669 !important;
}
html.light .text-emerald-300,
html.light .text-emerald-400,
html.light [class*="text-emerald-300"],
html.light [class*="text-emerald-400"] {
  color: #059669 !important;
}

html.light .bg-rose-500\/20,
html.light .bg-rose-500\/10,
html.light [class*="bg-rose-500\/"] {
  background-color: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #e11d48 !important;
}
html.light .text-rose-300,
html.light .text-rose-400,
html.light [class*="text-rose-300"],
html.light [class*="text-rose-400"] {
  color: #e11d48 !important;
}

html.light .bg-amber-500\/20,
html.light .bg-amber-500\/10,
html.light [class*="bg-amber-500\/"] {
  background-color: #fefce8 !important;
  border-color: #fef08a !important;
  color: #d97706 !important;
}
html.light .text-amber-300,
html.light .text-amber-400,
html.light [class*="text-amber-300"],
html.light [class*="text-amber-400"] {
  color: #d97706 !important;
}

html.light .bg-cyan-500\/20,
html.light .bg-cyan-500\/10,
html.light [class*="bg-cyan-500\/"] {
  background-color: #ecfeff !important;
  border-color: #a5f3fc !important;
  color: #0891b2 !important;
}
html.light .text-cyan-300,
html.light .text-cyan-400,
html.light [class*="text-cyan-300"],
html.light [class*="text-cyan-400"] {
  color: #0891b2 !important;
}

html.light .bg-purple-500\/20,
html.light .bg-purple-500\/10,
html.light [class*="bg-purple-500\/"] {
  background-color: #faf5ff !important;
  border-color: #e9d5ff !important;
  color: #7c3aed !important;
}
html.light .text-purple-300,
html.light .text-purple-400,
html.light [class*="text-purple-300"],
html.light [class*="text-purple-400"] {
  color: #7c3aed !important;
}

/* Tables in Light Mode */
html.light table {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}
html.light th {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border-color: #cbd5e1 !important;
}
html.light td {
  color: #334155 !important;
  border-color: #e2e8f0 !important;
}
html.light tr:hover td {
  background: #f8fafc !important;
}

/* Code & KaTeX in Light Mode */
html.light code {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}
html.light .katex {
  color: #0f172a;
}

/* Maintain bright white/colored text for KaTeX inside dark/blue selected buttons and emerald correct badges */
html.light .bg-blue-600 .katex,
html.light .bg-blue-600 .katex *,
html.light .bg-blue-500 .katex,
html.light .bg-blue-500 .katex *,
html.light .bg-indigo-600 .katex,
html.light .bg-indigo-600 .katex *,
html.light .bg-emerald-600 .katex,
html.light .bg-emerald-600 .katex *,
html.light .bg-rose-600 .katex,
html.light .bg-rose-600 .katex *,
html.light button.bg-blue-600 .katex,
html.light button.bg-blue-600 .katex *,
html.light .btn-primary .katex,
html.light .btn-primary .katex * {
  color: #ffffff !important;
}

/* KaTeX inside selected options */
html.light .option-item.is-selected .katex,
html.light .option-item.is-selected .katex *,
html.light .option-item.option-selected .katex,
html.light .option-item.option-selected .katex *,
html.light .option-item[aria-checked="true"]:not(.is-correct):not(.is-incorrect) .katex,
html.light .option-item[aria-checked="true"]:not(.is-correct):not(.is-incorrect) .katex * {
  color: #1e40af !important;
}
html.light .option-item.is-selected.bg-blue-600 .katex,
html.light .option-item.is-selected.bg-blue-600 .katex *,
html.light .option-item.is-selected .bg-blue-600 .katex,
html.light .option-item.is-selected .bg-blue-600 .katex *,
html.light .option-item.is-selected .option-bubble .katex,
html.light .option-item.is-selected .option-bubble .katex * {
  color: #ffffff !important;
}

/* KaTeX inside emerald correct badges and options */
html.light .option-item.is-correct .katex,
html.light .option-item.is-correct .katex *,
html.light .option-item.option-correct .katex,
html.light .option-item.option-correct .katex *,
html.light .option-item.bg-emerald-950\/40 .katex,
html.light .option-item.bg-emerald-950\/40 .katex * {
  color: #166534 !important;
}
html.light .option-badge-correct .katex,
html.light .option-badge-correct .katex *,
html.light .bg-emerald-500\/20 .katex,
html.light .bg-emerald-500\/20 .katex *,
html.light .bg-emerald-500\/10 .katex,
html.light .bg-emerald-500\/10 .katex *,
html.light .text-emerald-300 .katex,
html.light .text-emerald-300 .katex *,
html.light .text-emerald-400 .katex,
html.light .text-emerald-400 .katex *,
html.light [class*="text-emerald-"] .katex,
html.light [class*="text-emerald-"] .katex * {
  color: #047857 !important;
}
html.light .bg-emerald-600 .katex,
html.light .bg-emerald-600 .katex *,
html.light .badge-emerald .katex,
html.light .badge-emerald .katex *,
html.light [class*="bg-emerald-600"] .katex,
html.light [class*="bg-emerald-600"] .katex * {
  color: #ffffff !important;
}

/* Responsive KaTeX wrappers across all views */
.katex-display-wrapper,
.katex-display {
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0.25rem 0.125rem !important;
  margin: 0.5rem 0 !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.katex-inline-wrapper {
  display: inline-block !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  vertical-align: -0.15em !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  line-height: normal !important;
}

.katex-inline-wrapper::-webkit-scrollbar {
  display: none !important;
}

/* Highlighter Floating Toolbar in Light Mode */
html.light #passage-highlight-toolbar {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

html.light #passage-highlight-toolbar .h-5.w-px {
  background-color: #e2e8f0 !important;
}

html.light #passage-highlight-toolbar button[onclick="clearSelectedHighlight()"] {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}
html.light #passage-highlight-toolbar button[onclick="clearSelectedHighlight()"]:hover {
  background-color: #fee2e2 !important;
  color: #b91c1c !important;
  border-color: #fca5a5 !important;
}

/* Selection Color in Light & Dark Mode */
html.light ::selection {
  background: #bae6fd !important;
  color: #0c4a6e !important;
}
html.dark ::selection {
  background: rgba(56, 189, 248, 0.35) !important;
  color: #f0f9ff !important;
}

/* ==========================================================================
   LIGHT MODE CONTRAST & ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

/* Blue Badges & Text in Light Mode (WCAG AAA >= 7:1) */
html.light .bg-blue-500\/20,
html.light .bg-blue-500\/10,
html.light .bg-blue-600\/20,
html.light .bg-blue-600\/10,
html.light [class*="bg-blue-500\/"],
html.light [class*="bg-blue-600\/"] {
  background-color: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
}

html.light .text-blue-300,
html.light .text-blue-400,
html.light [class*="text-blue-300"],
html.light [class*="text-blue-400"] {
  color: #2563eb !important;
}

/* Protected White Text on Saturated Action Buttons & Avatars */
html.light button.bg-blue-600, html.light button.bg-blue-600 *,
html.light button.bg-indigo-600, html.light button.bg-indigo-600 *,
html.light button.bg-emerald-600, html.light button.bg-emerald-600 *,
html.light button.bg-rose-600, html.light button.bg-rose-600 *,
html.light button.bg-purple-600, html.light button.bg-purple-600 *,
html.light #prof-avatar {
  color: #ffffff !important;
}

/* Exam Solver Option States in Light Mode */
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.04) !important;
}

html.light .option-item:hover {
  border-color: #93c5fd !important;
  background-color: #f8fafc !important;
  box-shadow: 0 4px 12px rgba(147, 197, 253, 0.15) !important;
}

html.light .option-item[class*="from-blue-950"],
html.light .option-item.bg-blue-600\/20,
html.light .option-item[class*="border-blue-500"],
html.light .option-item[class*="bg-blue-600"] {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 16px rgba(37, 99, 235, 0.22), 0 2px 8px rgba(37, 99, 235, 0.1) !important;
  color: #0f172a !important;
}

html.light .option-item.bg-emerald-950\/40,
html.light .option-item.bg-emerald-500\/20,
html.light .option-item[class*="border-emerald-500"],
html.light .option-item[class*="bg-emerald-500"] {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
  border-color: #059669 !important;
  box-shadow: 0 0 16px rgba(5, 150, 105, 0.22) !important;
  color: #064e3b !important;
}

html.light .option-item.bg-rose-950\/40,
html.light .option-item.bg-rose-500\/20,
html.light .option-item[class*="border-rose-500"],
html.light .option-item[class*="bg-rose-500"] {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important;
  border-color: #e11d48 !important;
  box-shadow: 0 0 16px rgba(225, 29, 72, 0.22) !important;
  color: #881337 !important;
}

/* User Message bubble in AI Coach Window */
html.light #ai-chat-messages .bg-blue-600,
html.light #ai-chat-messages .bg-blue-600 * {
  color: #ffffff !important;
}

/* Modals & Dropdowns in Light Mode */
html.light #dropdown-header-tools,
html.light #dropdown-solver-ai-tools,
html.light .nav-dropdown-popover {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

html.light #dropdown-header-tools button,
html.light #dropdown-solver-ai-tools button,
html.light .nav-dropdown-popover button {
  color: #334155 !important;
}

html.light #dropdown-header-tools button:hover,
html.light #dropdown-solver-ai-tools button:hover,
html.light .nav-dropdown-popover button:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.light #modal-adaptive-routing > div,
html.light #modal-question-remix > div,
html.light #modal-adaptive-result > div,
html.light #modal-session-report > div,
html.light #modal-shortcuts-guide > div,
html.light #modal-session-config > div,
html.light #modal-quick-drill > div,
html.light #modal-passage-analytics > div,
html.light #modal-cram-answers > div,
html.light #modal-student-onboarding > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

html.light #modal-adaptive-routing .text-white,
html.light #modal-adaptive-result .text-white,
html.light #modal-session-report .text-white,
html.light #modal-shortcuts-guide .text-white,
html.light #modal-session-config .text-white,
html.light #modal-quick-drill .text-white,
html.light #modal-passage-analytics .text-white,
html.light #modal-cram-answers .text-white,
html.light #modal-student-onboarding .text-white {
  color: #0f172a !important;
}

/* Teal, Sky, Violet Palette Tokens in Light Mode */
html.light .bg-teal-500\/20,
html.light .bg-teal-500\/10 {
  background-color: #f0fdfa !important;
  border-color: #99f6e4 !important;
  color: #0f766e !important;
}
html.light .text-teal-300,
html.light .text-teal-400 {
  color: #0d9488 !important;
}

html.light .bg-sky-500\/20,
html.light .bg-sky-500\/10 {
  background-color: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0284c7 !important;
}
html.light .text-sky-300,
html.light .text-sky-400 {
  color: #0284c7 !important;
}

html.light .bg-violet-500\/20,
html.light .bg-violet-500\/10 {
  background-color: #f5f3ff !important;
  border-color: #ddd6fe !important;
  color: #7c3aed !important;
}
html.light .text-violet-300,
html.light .text-violet-400 {
  color: #7c3aed !important;
}

/* Tabs in Light Mode */
html.light .suite-filter-tab-btn.bg-slate-800,
html.light .vocab-sub-tab.bg-slate-800,
html.light .cal-tab-btn.text-slate-400,
html.light .lifecycle-tab-btn.bg-slate-800,
html.light .lifecycle-tab-btn:not(.bg-rose-600):not(.bg-emerald-600):not(.bg-indigo-600):not(.bg-amber-500),
html.light .suite-filter-tab-btn:not(.bg-blue-600):not(.bg-purple-600):not(.bg-emerald-600):not(.bg-cyan-600) {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

html.light .suite-filter-tab-btn.bg-slate-800:hover,
html.light .vocab-sub-tab.bg-slate-800:hover,
html.light .cal-tab-btn.text-slate-400:hover,
html.light .lifecycle-tab-btn.bg-slate-800:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light #tab-range-today,
html.light #tab-range-yesterday,
html.light #tab-range-7days,
html.light #tab-range-all {
  color: #475569 !important;
}
html.light #tab-range-today.bg-blue-600,
html.light #tab-range-yesterday.bg-blue-600,
html.light #tab-range-7days.bg-blue-600,
html.light #tab-range-all.bg-blue-600 {
  background-color: var(--org-primary-600, #2563eb) !important;
  color: #ffffff !important;
}

html.light #tab-btn-vi {
  color: var(--org-primary-600, #2563eb) !important;
}
html.light #tab-btn-en {
  color: #475569 !important;
}
html.light #tab-btn-en:hover {
  color: #0f172a !important;
}
html.light #tab-btn-eli5 {
  color: #b45309 !important;
}

/* Mobile Responsive Adjustments (< 768px) */
@media (max-width: 767px) {
  #view-question-solver .exam-split-workspace {
    flex-direction: column !important;
    overflow-y: auto !important;
  }
  #view-question-solver #left-pane {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid #334155 !important;
    padding: 1rem !important;
  }
  #view-question-solver #right-pane {
    width: 100% !important;
    padding: 1rem !important;
  }
  #split-drag-handle {
    display: none !important;
  }
}

/* ==========================================================================
   BLUEBOOK FLOATING SCRATCHPAD / NOTEPAD & LINE READER STYLES
   ========================================================================== */

/* Floating Scratchpad Window */
#floating-scratchpad-window {
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

#floating-scratchpad-window.is-minimized {
  height: 44px !important;
  min-height: 44px !important;
  resize: none !important;
}

#floating-scratchpad-window.is-minimized #scratchpad-window-body {
  display: none !important;
}

#scratchpad-textarea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-feature-settings: "tnum" 1;
  tab-size: 2;
  line-height: 1.6;
}

/* Light Theme Overrides for Scratchpad */
html.light #floating-scratchpad-window {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

html.light #scratchpad-drag-header {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light #scratchpad-drag-header .text-white {
  color: #0f172a !important;
}

html.light #scratchpad-window-body {
  background-color: #ffffff !important;
}

html.light #scratchpad-window-body > div.p-2 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html.light #scratchpad-textarea {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.light #scratchpad-textarea:focus {
  background-color: #ffffff !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important;
}

html.light #scratchpad-window-body > div.h-7 {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}

/* ==========================================================================
   UNIVERSAL GLASSMORPHISM & NEON GLOW DESIGN SYSTEM
   Synchronized across all components, modals, floating windows and views
   ========================================================================== */

/* Universal Glassmorphism Panel Base (60fps GPU Acceleration & High-Fidelity Blur) */
.glass-panel,
.bento-card,
.dash-tile,
#view-test_suites > div.grid > div,
#view-explorer > div > div.bg-slate-900,
#view-explorer .explorer-q-card,
#view-masterclass .bg-slate-900,
#view-flashcards .bg-slate-900:not(.flashcard-back):not(.flashcard-front):not(.flashcard-card),
#view-error_log .bg-slate-900,
#view-analytics .bg-slate-900,
#view-daily-report .bg-slate-900,
#view-taxonomy_drills .bg-slate-900,
#view-challenge_drills .bg-slate-900,
#view-profile .bg-slate-900,
#view-admin .bg-slate-900,
#view-teacher .bg-slate-900,
#view-org_admin .bg-slate-900,
#view-subscription .bg-slate-900,
#view-student_class .bg-slate-900,
#floating-desmos-window,
#floating-scratchpad-window,
#floating-ai-tutor-drawer,
.modal-glass-container {
  background: var(--org-card-bg, #0f172a) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.6) !important;
  transform: none;
  will-change: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Glass Card Interactive Lift & Subtle Rim Glow on Hover (60fps) */
#view-test_suites > div.grid > div:hover,
#view-explorer .explorer-q-card:hover,
#view-masterclass .bg-slate-900:hover,
#view-flashcards .bg-slate-900:not(.flashcard-back):not(.flashcard-front):not(.flashcard-card):hover,
#view-error_log .bg-slate-900:hover,
#view-taxonomy_drills .bg-slate-900:hover,
#view-challenge_drills .bg-slate-900:hover {
  border-color: rgba(var(--org-primary-rgb, 37, 99, 235), 0.5) !important;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.8), 0 0 20px rgba(var(--org-primary-rgb, 37, 99, 235), 0.15) !important;
}

/* Modals High-Precision Frosted Glass Backing */
#modal-auth > div,
#modal-original-image > div,
#modal-adaptive-routing > div,
#modal-exam-summary > div,
#modal-pro-membership > div,
#modal-shortcuts-guide > div,
#modal-question-remix > div,
#modal-passage-vocab > div,
#modal-eli5-explanation > div,
#modal-socratic-hints > div,
#modal-user-profile-edit > div {
  background: #0d1324 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(var(--org-primary-rgb, 37, 99, 235), 0.3) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8) !important;
  transform: none;
  will-change: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Inner Glass Sub-containers */
.bg-slate-950\/70,
.bg-slate-950\/80,
.bg-slate-950\/90 {
  background: #070c18 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* Light Theme Universal Glassmorphic Balance (WCAG 2.1 AAA Compliant) */
html.light .glass-panel,
html.light .bento-card,
html.light .dash-tile,
html.light #view-test_suites > div.grid > div,
html.light #view-explorer .explorer-q-card,
html.light #view-masterclass .bg-slate-900,
html.light #view-flashcards .bg-slate-900:not(.flashcard-back):not(.flashcard-front):not(.flashcard-card),
html.light #view-error_log .bg-slate-900,
html.light #view-analytics .bg-slate-900,
html.light #view-daily-report .bg-slate-900,
html.light #view-taxonomy_drills .bg-slate-900,
html.light #view-challenge_drills .bg-slate-900,
html.light #view-profile .bg-slate-900,
html.light #view-admin .bg-slate-900,
html.light #view-teacher .bg-slate-900,
html.light #view-org_admin .bg-slate-900,
html.light #view-subscription .bg-slate-900,
html.light #view-student_class .bg-slate-900 {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.92) 100%) !important;
  border-color: rgba(226, 232, 240, 0.92) !important;
  box-shadow: 0 12px 32px -5px rgba(0, 0, 0, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

html.light .glass-panel:hover,
html.light .bento-card:hover,
html.light .dash-tile:hover,
html.light #view-test_suites > div.grid > div:hover,
html.light #view-explorer .explorer-q-card:hover,
html.light #view-masterclass .bg-slate-900:hover,
html.light #view-flashcards .bg-slate-900:not(.flashcard-back):not(.flashcard-front):not(.flashcard-card):hover,
html.light #view-error_log .bg-slate-900:hover,
html.light #view-taxonomy_drills .bg-slate-900:hover,
html.light #view-challenge_drills .bg-slate-900:hover {
  border-color: rgba(var(--org-primary-rgb, 37, 99, 235), 0.45) !important;
  box-shadow: 0 20px 45px -8px rgba(0, 0, 0, 0.12), 0 0 20px rgba(var(--org-primary-rgb, 37, 99, 235), 0.12), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

html.light .modal-glass-container,
html.light #modal-auth > div,
html.light #modal-original-image > div,
html.light #modal-adaptive-routing > div,
html.light #modal-exam-summary > div,
html.light #modal-pro-membership > div,
html.light #modal-pro-upgrade > div,
html.light #modal-session-config > div,
html.light #modal-quick-drill > div,
html.light #modal-exam-complete > div,
html.light #modal-session-report > div,
html.light #modal-question-grid > div,
html.light #modal-reference > div,
html.light #modal-cram-answers > div,
html.light #modal-shortcuts-guide > div,
html.light #modal-student-onboarding > div {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* ==========================================================================
   ORGANIZATION & WHITE-LABEL THEME TOKENS (--org-primary, --org-accent)
   ========================================================================== */

:root {
  --org-primary: #2563eb;
  --org-accent: #8b5cf6;
  --org-primary-rgb: 37, 99, 235;
  --org-accent-rgb: 139, 92, 246;
}

.bg-org-primary {
  background-color: var(--org-primary, #2563eb) !important;
}
.text-org-primary {
  color: var(--org-primary, #2563eb) !important;
}
.border-org-primary {
  border-color: var(--org-primary, #2563eb) !important;
}
.ring-org-primary {
  --tw-ring-color: var(--org-primary, #2563eb) !important;
}

.bg-org-accent {
  background-color: var(--org-accent, #8b5cf6) !important;
}
.text-org-accent {
  color: var(--org-accent, #8b5cf6) !important;
}
.border-org-accent {
  border-color: var(--org-accent, #8b5cf6) !important;
}

.org-gradient-header {
  background: linear-gradient(135deg, var(--org-primary, #2563eb) 0%, var(--org-accent, #8b5cf6) 100%) !important;
}
.org-gradient-subtle {
  background: linear-gradient(135deg, rgba(var(--org-primary-rgb, 37, 99, 235), 0.12) 0%, rgba(var(--org-accent-rgb, 139, 92, 246), 0.08) 100%) !important;
  border: 1px solid rgba(var(--org-primary-rgb, 37, 99, 235), 0.25) !important;
}
.org-pill-badge {
  background: rgba(var(--org-primary-rgb, 37, 99, 235), 0.15) !important;
  border: 1px solid rgba(var(--org-primary-rgb, 37, 99, 235), 0.35) !important;
  color: var(--org-primary, #60a5fa) !important;
}
.org-btn-primary {
  background-color: var(--org-primary, #2563eb) !important;
  color: #ffffff !important;
  transition: all 0.2s ease;
}
.org-btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 15px rgba(var(--org-primary-rgb, 37, 99, 235), 0.35);
}

/* ==========================================================================
   CLASSROOM ROSTERS & STUDENT MANAGEMENT STYLING
   ========================================================================== */

.roster-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.roster-table th {
  padding: 0.75rem 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  background-color: rgba(15, 23, 42, 0.7);
  border-bottom: 1px solid #334155;
  text-align: left;
}
.roster-row {
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.roster-row:hover {
  background-color: rgba(30, 41, 59, 0.6) !important;
}
.roster-cell {
  padding: 0.85rem 1rem;
  font-size: 0.8rem;
  color: #e2e8f0;
  border-bottom: 1px solid rgba(51, 65, 85, 0.5);
  vertical-align: middle;
}
.roster-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.8rem;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
}
.roster-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 0.5rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: "tnum" 1;
  font-size: 0.75rem;
  font-weight: 700;
}
.roster-progress-track {
  width: 100%;
  height: 0.4rem;
  background-color: #1e293b;
  border-radius: 9999px;
  overflow: hidden;
}
.roster-progress-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.4s ease;
}

/* Light mode for classroom rosters — applied via Tailwind in JS-rendered tables */

/* ==========================================================================
   HEATMAP BADGES & COMPETENCY MASTERY INDICATORS
   ========================================================================== */

.heatmap-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.55rem;
  border-radius: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
  transition: all 0.2s ease;
}
.heatmap-badge:hover {
  transform: scale(1.05);
}

/* Level 1: Weak (<60%) */
.heatmap-badge-weak,
.heatmap-lv1 {
  background-color: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  color: #fca5a5 !important;
}

/* Level 2: Developing (60% - 74%) */
.heatmap-badge-dev,
.heatmap-lv2 {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  color: #fcd34d !important;
}

/* Level 3: Proficient (75% - 89%) */
.heatmap-badge-prof,
.heatmap-lv3 {
  background-color: rgba(59, 130, 246, 0.15) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  color: #93c5fd !important;
}

/* Level 4: Mastered (90% - 100%) */
.heatmap-badge-master,
.heatmap-lv4 {
  background-color: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  color: #6ee7b7 !important;
}

/* Heatmap Grid Cell */
.heatmap-grid-cell {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: "tnum" 1;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}
.heatmap-grid-cell:hover {
  transform: translateY(-2px);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Light mode for heatmaps */
html.light .heatmap-badge-weak,
html.light .heatmap-lv1 {
  background-color: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}
html.light .heatmap-badge-dev,
html.light .heatmap-lv2 {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
  color: #b45309 !important;
}
html.light .heatmap-badge-prof,
html.light .heatmap-lv3 {
  background-color: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
}
html.light .heatmap-badge-master,
html.light .heatmap-lv4 {
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
}
html.light .heatmap-grid-cell {
  background-color: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #0f172a;
}

/* ==========================================================================
   PRICING CARDS & PRO SUBSCRIPTION TIERS
   ========================================================================== */

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  border-radius: 1.25rem;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.95) 0%, rgba(10, 15, 29, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.2);
}
.pricing-card-popular {
  border-color: rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 15px 40px -10px rgba(245, 158, 11, 0.15), 0 0 0 1px rgba(245, 158, 11, 0.3) !important;
}
.pricing-card-popular:hover {
  border-color: #f59e0b !important;
  box-shadow: 0 25px 50px -10px rgba(245, 158, 11, 0.25), 0 0 25px rgba(245, 158, 11, 0.2) !important;
}
.pricing-ribbon {
  position: absolute;
  top: -0.75rem;
  right: 1.25rem;
  padding: 0.2rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #f59e0b 0%, #eab308 100%);
  color: #0f172a;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}
.pricing-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0.75rem 0;
}
.pricing-amount {
  font-size: 2rem;
  font-weight: 900;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: -0.03em;
  color: #ffffff;
}
.pricing-period {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 500;
}
.pricing-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: #cbd5e1;
  line-height: 1.45;
}
.pricing-feature-item.disabled {
  color: #64748b;
  text-decoration: line-through;
  opacity: 0.6;
}

/* Light mode for pricing cards */
html.light .pricing-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08) !important;
}
html.light .pricing-card:hover {
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12) !important;
  border-color: #cbd5e1 !important;
}
html.light .pricing-card-popular {
  border-color: #f59e0b !important;
  background: linear-gradient(145deg, #fffdf5 0%, #ffffff 100%) !important;
  box-shadow: 0 15px 40px -10px rgba(245, 158, 11, 0.15) !important;
}
html.light .pricing-amount {
  color: #0f172a !important;
}
html.light .pricing-feature-item {
  color: #334155 !important;
}
html.light .pricing-feature-item.disabled {
  color: #94a3b8 !important;
}

/* ==========================================================================
   AUTH MODAL LUXURY GLASSMORPHISM & ORGANIZATION BRANDING (#modal-auth)
   ========================================================================== */

/* Glassmorphism Modal Card Container */
#modal-auth .auth-modal-card {
  position: relative;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.94) 0%, rgba(9, 14, 28, 0.96) 100%) !important;
  backdrop-filter: blur(32px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.85),
              0 0 50px -10px rgba(var(--org-primary-rgb, 37, 99, 235), 0.2),
              0 0 35px -5px rgba(var(--org-accent-rgb, 139, 92, 246), 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  border-radius: 1.5rem;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dual-Tone Ambient Glow Orbs */
#modal-auth .auth-glow-orb-primary {
  background-color: var(--org-primary, #2563eb) !important;
  background: radial-gradient(circle, var(--org-primary, #2563eb) 0%, rgba(var(--org-primary-rgb, 37, 99, 235), 0.2) 50%, transparent 70%) !important;
  filter: blur(40px);
  pointer-events: none;
}

#modal-auth .auth-glow-orb-accent {
  background-color: var(--org-accent, #8b5cf6) !important;
  background: radial-gradient(circle, var(--org-accent, #8b5cf6) 0%, rgba(var(--org-accent-rgb, 139, 92, 246), 0.2) 50%, transparent 70%) !important;
  filter: blur(40px);
  pointer-events: none;
}

/* Auth Mode Tabs & Buttons */
#modal-auth .auth-tabs-wrapper {
  background: rgba(4, 8, 20, 0.65) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 1rem;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 10;
}

#modal-auth .auth-tab-btn {
  flex: 1;
  padding: 0.625rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #94a3b8;
  background: transparent;
  border: 1px solid transparent;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#modal-auth .auth-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

#modal-auth .auth-tab-btn.is-active,
#modal-auth .auth-tab-btn.active,
#modal-auth .auth-tab-btn[aria-selected="true"],
#modal-auth .auth-tab-btn.bg-blue-600 {
  background: linear-gradient(135deg, var(--org-primary, #2563eb) 0%, var(--org-accent, #8b5cf6) 100%) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 15px rgba(var(--org-primary-rgb, 37, 99, 235), 0.35) !important;
}

/* Translucent Input Fields & Focus States */
#modal-auth .auth-input-field {
  width: 100%;
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.75rem;
  padding: 0.625rem 1rem;
  color: #ffffff !important;
  font-size: 0.8rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

#modal-auth .auth-input-field::placeholder {
  color: #64748b;
}

#modal-auth .auth-input-field:focus {
  outline: none !important;
  background: rgba(15, 23, 42, 0.9) !important;
  border-color: var(--org-primary, #2563eb) !important;
  box-shadow: 0 0 0 3px rgba(var(--org-primary-rgb, 37, 99, 235), 0.25), 0 4px 12px rgba(var(--org-primary-rgb, 37, 99, 235), 0.15) !important;
}

/* Target Score Range Slider */
#modal-auth .auth-range-slider {
  width: 100%;
  height: 6px;
  background: rgba(30, 41, 59, 0.8);
  border-radius: 9999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  accent-color: var(--org-primary, #2563eb) !important;
  cursor: pointer;
  transition: background 0.2s ease;
}

#modal-auth .auth-range-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 9999px;
  background: rgba(30, 41, 59, 0.8);
}

#modal-auth .auth-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--org-primary, #2563eb) !important;
  border: 2px solid #ffffff;
  box-shadow: 0 0 10px rgba(var(--org-primary-rgb, 37, 99, 235), 0.6), 0 2px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#modal-auth .auth-range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 15px rgba(var(--org-primary-rgb, 37, 99, 235), 0.8), 0 3px 8px rgba(0, 0, 0, 0.4);
}

#modal-auth .auth-range-slider::-moz-range-track {
  height: 6px;
  border-radius: 9999px;
  background: rgba(30, 41, 59, 0.8);
}

#modal-auth .auth-range-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--org-primary, #2563eb) !important;
  border: 2px solid #ffffff;
  box-shadow: 0 0 10px rgba(var(--org-primary-rgb, 37, 99, 235), 0.6), 0 2px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#modal-auth .auth-range-slider::-moz-range-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 15px rgba(var(--org-primary-rgb, 37, 99, 235), 0.8), 0 3px 8px rgba(0, 0, 0, 0.4);
}

/* SAT Target Predictor Tier Badges */
#modal-auth .auth-predictor-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: "tnum" 1;
  transition: all 0.2s ease;
}

#modal-auth .auth-predictor-badge[data-tier="elite"] {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(234, 179, 8, 0.15) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
  color: #fde047 !important;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

#modal-auth .auth-predictor-badge[data-tier="top30"] {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(99, 102, 241, 0.15) 100%) !important;
  border: 1px solid rgba(139, 92, 246, 0.5) !important;
  color: #c4b5fd !important;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

#modal-auth .auth-predictor-badge[data-tier="competitive"] {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(14, 165, 233, 0.15) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.5) !important;
  color: #93c5fd !important;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

#modal-auth .auth-predictor-badge[data-tier="foundation"] {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(20, 184, 166, 0.15) 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.5) !important;
  color: #6ee7b7 !important;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Primary-to-Accent Action Buttons */
#modal-auth #btn-login-submit,
#modal-auth #btn-reg-submit {
  position: relative;
  background: linear-gradient(135deg, var(--org-primary, #2563eb) 0%, var(--org-accent, #8b5cf6) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 10px 25px -5px rgba(var(--org-primary-rgb, 37, 99, 235), 0.4), 0 0 20px rgba(var(--org-accent-rgb, 139, 92, 246), 0.25) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

#modal-auth #btn-login-submit:hover,
#modal-auth #btn-reg-submit:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -5px rgba(var(--org-primary-rgb, 37, 99, 235), 0.5), 0 0 25px rgba(var(--org-accent-rgb, 139, 92, 246), 0.35) !important;
}

#modal-auth #btn-login-submit:active,
#modal-auth #btn-reg-submit:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

/* Light Mode Compatibility */
html.light #modal-auth .auth-modal-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.92) 100%) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.12), 0 0 35px rgba(var(--org-primary-rgb, 37, 99, 235), 0.08) !important;
}

html.light #modal-auth .auth-tabs-wrapper {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

html.light #modal-auth .auth-tab-btn {
  color: #64748b !important;
}

html.light #modal-auth .auth-tab-btn:hover {
  color: #0f172a !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

html.light #modal-auth .auth-tab-btn.is-active,
html.light #modal-auth .auth-tab-btn.active,
html.light #modal-auth .auth-tab-btn[aria-selected="true"],
html.light #modal-auth .auth-tab-btn.bg-blue-600 {
  background: linear-gradient(135deg, var(--org-primary, #2563eb) 0%, var(--org-accent, #8b5cf6) 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 15px rgba(var(--org-primary-rgb, 37, 99, 235), 0.25) !important;
}

html.light #modal-auth .auth-input-field {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.light #modal-auth .auth-input-field::placeholder {
  color: #94a3b8 !important;
}

html.light #modal-auth .auth-input-field:focus {
  background: #ffffff !important;
  border-color: var(--org-primary, #2563eb) !important;
  box-shadow: 0 0 0 3px rgba(var(--org-primary-rgb, 37, 99, 235), 0.15) !important;
}

html.light #modal-auth .auth-range-slider {
  background: #e2e8f0 !important;
}

html.light #modal-auth .auth-range-slider::-webkit-slider-runnable-track {
  background: #e2e8f0 !important;
}

html.light #modal-auth .auth-range-slider::-moz-range-track {
  background: #e2e8f0 !important;
}

html.light #modal-auth .auth-predictor-badge[data-tier="elite"] {
  background: #fefce8 !important;
  border-color: #fde047 !important;
  color: #854d0e !important;
  box-shadow: none !important;
}

html.light #modal-auth .auth-predictor-badge[data-tier="top30"] {
  background: #f5f3ff !important;
  border-color: #ddd6fe !important;
  color: #6d28d9 !important;
  box-shadow: none !important;
}

html.light #modal-auth .auth-predictor-badge[data-tier="competitive"] {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
  box-shadow: none !important;
}

html.light #modal-auth .auth-predictor-badge[data-tier="foundation"] {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
  box-shadow: none !important;
}

/* ==========================================================================
   AI VOICE TUTOR (TTS AUDIO PLAYER) & SENTENCE TRACKING HIGHLIGHTS
   ========================================================================== */

.tutor-tts-sentence {
  position: relative;
  display: inline;
  transition: background-color 0.2s ease, border-color 0.2s ease, padding 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  border-radius: 4px;
}
.tutor-tts-sentence:hover {
  background-color: rgba(59, 130, 246, 0.12);
}

.tutor-tts-sentence.tts-sentence-active {
  background-color: rgba(59, 130, 246, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1.5px rgba(96, 165, 250, 0.6), 0 2px 8px rgba(37, 99, 235, 0.25);
  border-left: 3px solid #38bdf8 !important;
  padding-left: 5px !important;
  padding-right: 3px !important;
  border-radius: 4px;
}

.tutor-tts-sentence.tts-sentence-active.tts-walkthrough-active {
  background-color: rgba(245, 158, 11, 0.22) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 1.5px rgba(251, 191, 36, 0.6), 0 2px 8px rgba(217, 119, 6, 0.25);
  border-left: 3px solid #f59e0b !important;
  padding-left: 5px !important;
  padding-right: 3px !important;
}

html.light .tutor-tts-sentence.tts-sentence-active {
  background-color: rgba(219, 234, 254, 0.9) !important;
  color: #1e3a8a !important;
  box-shadow: 0 0 0 1.5px rgba(59, 130, 246, 0.6), 0 2px 8px rgba(59, 130, 246, 0.15);
  border-left: 3px solid #2563eb !important;
}

html.light .tutor-tts-sentence.tts-sentence-active.tts-walkthrough-active {
  background-color: rgba(254, 243, 199, 0.95) !important;
  color: #78350f !important;
  box-shadow: 0 0 0 1.5px rgba(245, 158, 11, 0.6), 0 2px 8px rgba(245, 158, 11, 0.15);
  border-left: 3px solid #d97706 !important;
}

/* Audio waveform animated bars */
@keyframes ttsWaveBar {
  0%, 100% { height: 4px; }
  50% { height: 12px; }
}
.tts-wave-bar {
  animation: ttsWaveBar 0.8s ease-in-out infinite;
}

/* ==========================================================================
   MOBILE (<1024PX) COMPONENT ERGONOMICS & SAFE AREA POLISH
   ========================================================================== */
@media (max-width: 1023.98px) {
  /* Ensure all component buttons and interactive items are thumb-friendly (>=44px) */
  #match-game-grid button,
  #learn-options-container button,
  #cloze-options-container button,
  .pricing-card button,
  .pricing-card a,
  .auth-tab-btn,
  .auth-input-field,
  .solver-tag-btn,
  #grid-buttons-container button,
  #view-profile button,
  #modal-auth button,
  #ai-tutor-quick-prompts button,
  #passage-highlight-toolbar button {
    min-height: 44px !important;
  }

  /* Anti-zoom rules on iOS/mobile for all inputs and select fields in components */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea,
  .auth-input-field,
  #solver-note-input {
    font-size: 16px !important;
    min-height: 44px !important;
  }

  /* Zero lingering phantom gaps in component views */
  .dash-tile,
  .glass-panel,
  .pricing-card {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   1-CLICK PASSAGE LOGIC & EVIDENCE MAPPER (LINEAR / APPLE DARK AESTHETIC)
   ========================================================================== */

#passage-logic-drawer {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(10, 15, 30, 0.98) 100%) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(51, 65, 85, 0.85) !important;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

html.light #passage-logic-drawer {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

/* Light mode text contrast overrides inside the logic map drawer */
html.light #passage-logic-drawer h2,
html.light #passage-logic-drawer h3,
html.light #passage-logic-drawer h4 {
  color: #0f172a !important;
}
html.light #passage-logic-drawer p {
  color: #334155 !important;
}
html.light #passage-logic-drawer .text-white {
  color: #0f172a !important;
}
html.light #passage-logic-drawer .text-slate-100,
html.light #passage-logic-drawer .text-slate-200,
html.light #passage-logic-drawer .text-slate-300 {
  color: #1e293b !important;
}
html.light #passage-logic-drawer .text-slate-400,
html.light #passage-logic-drawer .text-slate-500 {
  color: #475569 !important;
}
html.light #passage-logic-drawer .text-amber-300,
html.light #passage-logic-drawer .text-amber-400 {
  color: #92400e !important;
}
html.light #passage-logic-drawer .text-cyan-300,
html.light #passage-logic-drawer .text-cyan-400 {
  color: #0e7490 !important;
}
html.light #passage-logic-drawer .text-emerald-300,
html.light #passage-logic-drawer .text-emerald-400 {
  color: #047857 !important;
}
html.light #passage-logic-drawer .text-rose-300,
html.light #passage-logic-drawer .text-rose-400 {
  color: #be123c !important;
}
html.light #passage-logic-drawer .text-purple-300,
html.light #passage-logic-drawer .text-purple-400 {
  color: #6d28d9 !important;
}
html.light #passage-logic-drawer .evidence-option-card {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
html.light #passage-logic-drawer .evidence-option-card:hover {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}
html.light #passage-logic-drawer .evidence-option-card.is-active-evidence {
  background-color: #fefce8 !important;
  border-color: #f59e0b !important;
}
html.light #passage-logic-drawer .passage-condenser-banner {
  background-color: #fefce8 !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}

/* Real-time Passage Evidence Quote Highlighting */
mark.sat-evidence-hl {
  background: rgba(245, 158, 11, 0.35) !important;
  color: inherit !important;
  border-bottom: 2.5px solid #f59e0b !important;
  border-radius: 4px !important;
  padding: 1px 4px !important;
  font-weight: 600 !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.45) !important;
  outline: 2px solid rgba(245, 158, 11, 0.5) !important;
  outline-offset: 1px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline !important;
}

html.light mark.sat-evidence-hl {
  background: rgba(245, 158, 11, 0.38) !important;
  color: #78350f !important;
  border-bottom-color: #d97706 !important;
  outline-color: rgba(217, 119, 6, 0.6) !important;
}

mark.sat-evidence-hl.evidence-pulse-active {
  animation: satEvidenceFlashPulse 1.2s cubic-bezier(0.16, 1, 0.3, 1) 2;
}

@keyframes satEvidenceFlashPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    transform: scale(1);
  }
}

/* Active Evidence Option Card in Drawer */
.evidence-option-card.is-active-evidence {
  border-color: #f59e0b !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.25), 0 0 0 1.5px rgba(245, 158, 11, 0.8) !important;
  background-color: rgba(30, 27, 20, 0.95) !important;
}

/* 1-Click Passage Condenser & Evidence Highlighter */
.sat-sentence-claim,
.condenser-thesis {
  background-color: rgba(6, 182, 212, 0.2) !important;
  border-bottom: 2px solid #06b6d4 !important;
  color: inherit !important;
}
html.light .sat-sentence-claim,
html.light .condenser-thesis {
  background-color: rgba(6, 182, 212, 0.2) !important;
  border-bottom: 2px solid #0891b2 !important;
  color: #0e7490 !important;
}

.sat-sentence-evidence,
.condenser-evidence {
  background-color: rgba(16, 185, 129, 0.2) !important;
  border-bottom: 2px solid #10b981 !important;
  color: inherit !important;
}
html.light .sat-sentence-evidence,
html.light .condenser-evidence {
  background-color: rgba(16, 185, 129, 0.2) !important;
  border-bottom: 2px solid #059669 !important;
  color: #047857 !important;
}

.sat-sentence-counter,
.condenser-counter {
  background-color: rgba(168, 85, 247, 0.2) !important;
  border-bottom: 2px solid #f97316 !important;
  color: inherit !important;
}
html.light .sat-sentence-counter,
html.light .condenser-counter {
  background-color: rgba(168, 85, 247, 0.18) !important;
  border-bottom: 2px solid #ea580c !important;
  color: #581c87 !important;
}

.sat-sentence-fluff,
.condenser-fluff {
  opacity: 0.4 !important;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.sat-sentence-fluff:hover,
.condenser-fluff:hover {
  opacity: 1.0 !important;
}

.condenser-badge {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 2px 6px !important;
  margin-right: 6px !important;
  border-radius: 4px !important;
  user-select: none !important;
}

.condenser-badge-thesis {
  background: rgba(6, 182, 212, 0.25) !important;
  color: #22d3ee !important;
  border: 1px solid rgba(6, 182, 212, 0.45) !important;
}
html.light .condenser-badge-thesis {
  background: rgba(6, 182, 212, 0.18) !important;
  color: #0891b2 !important;
  border-color: rgba(8, 145, 178, 0.35) !important;
}

.condenser-badge-evidence {
  background: rgba(16, 185, 129, 0.25) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
}
html.light .condenser-badge-evidence {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #059669 !important;
  border-color: rgba(5, 150, 105, 0.35) !important;
}

.condenser-badge-counter {
  background: rgba(168, 85, 247, 0.22) !important;
  color: #fb923c !important;
  border: 1px solid rgba(249, 115, 22, 0.45) !important;
}
html.light .condenser-badge-counter {
  background: rgba(249, 115, 22, 0.15) !important;
  color: #c2410c !important;
  border-color: rgba(194, 65, 12, 0.35) !important;
}

.flashcard-back {
  transform: rotateY(180deg) translate3d(0, 0, 0) !important;
  -webkit-transform: rotateY(180deg) translate3d(0, 0, 0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
.flashcard-front {
  transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* ==========================================================================
   SEGMENTED CONTROLS & STEP WIZARDS (LINEAR / STRIPE DESIGN SYSTEM TOKENS)
   ========================================================================== */

/* Segmented Controller Container */
.segmented-controller {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem; /* gap-1 */
  padding: 0.25rem; /* p-1 */
  background-color: rgba(15, 23, 42, 0.9); /* bg-slate-900/90 */
  border: 1px solid #1e293b; /* border-slate-800 */
  border-radius: 1rem; /* rounded-2xl */
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.25); /* shadow-inner */
  position: relative;
  max-width: 100%;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  user-select: none;
}

/* Individual Tab Button */
.segmented-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem; /* px-4 py-2 */
  border-radius: 0.75rem; /* rounded-xl */
  font-size: 0.75rem; /* text-xs */
  line-height: 1rem;
  font-weight: 700; /* font-bold */
  color: #94a3b8; /* text-slate-400 */
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  white-space: nowrap;
  text-decoration: none;
}

.segmented-btn:hover {
  color: #ffffff; /* hover:text-white */
}

.segmented-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Active Segment Button State */
.segmented-btn.is-active,
.segmented-btn[aria-selected="true"] {
  background-color: #2563eb; /* bg-blue-600 */
  color: #ffffff; /* text-white */
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.25), 0 2px 4px -2px rgba(37, 99, 235, 0.25); /* shadow-md shadow-blue-600/25 */
}

.segmented-btn.is-active:hover,
.segmented-btn[aria-selected="true"]:hover {
  color: #ffffff;
  background-color: #1d4ed8;
}

.segmented-btn:disabled,
.segmented-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Wizard Stepper Bar */
.wizard-stepper-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  background-color: rgba(15, 23, 42, 0.6);
  border: 1px solid #1e293b;
  border-radius: 1rem;
}

.wizard-stepper-bar::-webkit-scrollbar {
  display: none;
}

/* Step Item in Stepper Bar */
.wizard-step-item,
.wizard-stepper-bar .wizard-step-item,
.wizard-stepper-bar .wiz-step-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b; /* text-slate-500 */
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  user-select: none;
}

.wizard-step-item:hover:not(:disabled),
.wizard-stepper-bar .wizard-step-item:hover:not(:disabled),
.wizard-stepper-bar .wiz-step-btn:hover:not(:disabled) {
  color: #cbd5e1; /* hover:text-slate-300 */
}

/* Circular Number Badges */
.wizard-step-badge,
.wizard-stepper-bar .wizard-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem; /* 24px */
  height: 1.5rem;
  border-radius: 9999px;
  background-color: #1e293b; /* bg-slate-800 */
  color: #94a3b8; /* text-slate-400 */
  font-size: 0.6875rem; /* text-[11px] */
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 1px solid #334155;
  flex-shrink: 0;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Connecting Lines */
.wizard-stepper-line,
.wizard-step-divider,
.wizard-stepper-bar .wizard-stepper-line,
.wizard-stepper-bar .wizard-step-divider {
  flex: 1 1 0%;
  height: 2px;
  min-width: 1.5rem;
  margin: 0 0.5rem;
  background-color: #1e293b; /* bg-slate-800 */
  border-radius: 9999px;
  transition: background-color 200ms ease;
}

/* Active Step */
.wizard-step-item.is-active,
.wizard-stepper-bar .wizard-step-item.is-active,
.wizard-step-item[aria-current="step"] {
  color: #60a5fa; /* text-blue-400 */
  cursor: default;
}

.wizard-step-item.is-active .wizard-step-badge,
.wizard-stepper-bar .wizard-step-item.is-active .wizard-step-badge,
.wizard-step-item[aria-current="step"] .wizard-step-badge {
  background-color: #2563eb; /* bg-blue-600 */
  color: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4);
}

/* Completed Step */
.wizard-step-item.is-completed,
.wizard-stepper-bar .wizard-step-item.is-completed {
  color: #34d399; /* text-emerald-400 */
}

.wizard-step-item.is-completed .wizard-step-badge,
.wizard-stepper-bar .wizard-step-item.is-completed .wizard-step-badge {
  background-color: rgba(16, 185, 129, 0.2);
  color: #6ee7b7; /* emerald-300 */
  border-color: rgba(16, 185, 129, 0.4);
}

.wizard-stepper-line.is-completed,
.wizard-step-divider.is-completed,
.wizard-stepper-bar .wizard-stepper-line.is-completed,
.wizard-stepper-bar .wizard-step-divider.is-completed {
  background-color: #10b981; /* emerald-500 */
}

.wizard-stepper-line.is-active,
.wizard-step-divider.is-active,
.wizard-stepper-bar .wizard-stepper-line.is-active,
.wizard-stepper-bar .wizard-step-divider.is-active {
  background-color: #3b82f6; /* blue-500 */
}

/* ==========================================================================
   LIGHT MODE OVERRIDES FOR SEGMENTED CONTROLLERS & WIZARDS (WCAG CONTRAST)
   ========================================================================== */

html.light .segmented-controller {
  background-color: #f1f5f9 !important; /* bg-slate-100 */
  border-color: #cbd5e1 !important; /* border-slate-300 */
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
}

html.light .segmented-btn {
  color: #475569 !important; /* text-slate-600 - WCAG AA compliant on #f1f5f9 */
}

html.light .segmented-btn:hover {
  color: #0f172a !important; /* hover:text-slate-900 */
  background-color: rgba(255, 255, 255, 0.6) !important;
}

html.light .segmented-btn.is-active,
html.light .segmented-btn[aria-selected="true"] {
  background-color: #2563eb !important; /* bg-blue-600 */
  color: #ffffff !important; /* text-white - 4.56:1 contrast ratio */
  border-color: #2563eb !important;
  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.25), 0 2px 4px -2px rgba(37, 99, 235, 0.25) !important;
}

html.light .segmented-btn.is-active:hover,
html.light .segmented-btn[aria-selected="true"]:hover {
  background-color: #1d4ed8 !important;
  color: #ffffff !important;
}

html.light .wizard-stepper-bar {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

html.light .wizard-step-item,
html.light .wizard-stepper-bar .wizard-step-item,
html.light .wizard-stepper-bar .wiz-step-btn {
  color: #64748b !important; /* text-slate-500 */
}

html.light .wizard-step-item:hover:not(:disabled),
html.light .wizard-stepper-bar .wizard-step-item:hover:not(:disabled),
html.light .wizard-stepper-bar .wiz-step-btn:hover:not(:disabled) {
  color: #0f172a !important; /* text-slate-900 */
}

html.light .wizard-step-badge,
html.light .wizard-stepper-bar .wizard-step-badge {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
}

html.light .wizard-stepper-line,
html.light .wizard-step-divider,
html.light .wizard-stepper-bar .wizard-stepper-line,
html.light .wizard-stepper-bar .wizard-step-divider {
  background-color: #e2e8f0 !important;
}

html.light .wizard-step-item.is-active,
html.light .wizard-stepper-bar .wizard-step-item.is-active,
html.light .wizard-step-item[aria-current="step"] {
  color: #1d4ed8 !important; /* blue-700 for high contrast WCAG AA */
}

html.light .wizard-step-item.is-active .wizard-step-badge,
html.light .wizard-stepper-bar .wizard-step-item.is-active .wizard-step-badge,
html.light .wizard-step-item[aria-current="step"] .wizard-step-badge {
  background-color: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3) !important;
}

html.light .wizard-step-item.is-completed,
html.light .wizard-stepper-bar .wizard-step-item.is-completed {
  color: #047857 !important; /* emerald-700 */
}

html.light .wizard-step-item.is-completed .wizard-step-badge,
html.light .wizard-stepper-bar .wizard-step-item.is-completed .wizard-step-badge {
  background-color: #ecfdf5 !important;
  color: #059669 !important;
  border-color: #a7f3d0 !important;
}

html.light .wizard-stepper-line.is-completed,
html.light .wizard-step-divider.is-completed,
html.light .wizard-stepper-bar .wizard-stepper-line.is-completed,
html.light .wizard-stepper-bar .wizard-step-divider.is-completed {
  background-color: #10b981 !important;
}

html.light .wizard-stepper-line.is-active,
html.light .wizard-step-divider.is-active,
html.light .wizard-stepper-bar .wizard-stepper-line.is-active,
html.light .wizard-stepper-bar .wizard-step-divider.is-active {
  background-color: #2563eb !important;
}