/* ==========================================================================
   fixes.css — Targeted accessibility/UX fixes (F6).
   File này ĐƯỢC PHÉP dùng !important để thắng utility Tailwind inline.
   Nguyên tắc: selector tối thiểu, KHÔNG đổi dark theme mặc định.
   ========================================================================== */

: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;
}

.safe-modal,
.safe-area-padding {
  padding-top: max(12px, env(safe-area-inset-top)) !important;
  padding-right: max(12px, env(safe-area-inset-right)) !important;
  padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  padding-left: max(12px, env(safe-area-inset-left)) !important;
}

/* ---------- a. Mobile <= 480px: exam solver / quick keypad ---------- */
@media (max-width: 480px) {

  /* Tooltip/hint nổi trong exam solver không đè lên header "BÀN PHÍM SỐ"
     (header "Bàn phím số nhanh (Quick Keypad)" là con đầu của khối chứa
     #grid-in-keypad). Nâng header lên trên lớp float của hint/tooltip. */
  .space-y-2.pt-1:has(> #grid-in-keypad) > div:first-child {
    position: relative !important;
    z-index: 30 !important;
  }

  /* Card keypad tự giữ stacking riêng, không bị overlay sauce đè nút */
  #grid-in-keypad {
    position: relative !important;
    z-index: 20 !important;
    /* padding trái/phải tối thiểu 8px cho card keypad (nút không chạm mép) */
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
  }

  /* Badge đếm ký tự grid-in ("0/5 ký tự") — nằm 1 hàng, không wrap dọc */
  #grid-in-char-counter {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Phase 2 Task 3: Mobile Desmos & Scratchpad Responsiveness (< 480px) */
  #floating-desmos-window,
  #floating-scratchpad-window {
    min-width: 0 !important;
  }

  #floating-desmos-window:not(.hidden),
  #floating-scratchpad-window:not(.hidden) {
    width: 100vw !important;
    max-width: 100% !important;
    min-width: 0 !important;
    left: 0 !important;
    top: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    resize: none !important;
  }

  #floating-scratchpad-window.is-minimized:not(.hidden),
  #floating-desmos-window.is-minimized:not(.hidden) {
    height: 44px !important;
    min-height: 44px !important;
    top: auto !important;
    bottom: 0 !important;
  }
}
/* ---------- b. Navbar ~1440px: user chip truncate đúng kiểu ---------- */
@media (max-width: 1440px) {
  #btn-user-auth {
    max-width: 200px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  #btn-user-auth #user-display-name {
    max-width: 110px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }
}

/* ---------- c. Light mode (html.light): contrast nút AI / check-answer ---------- */
/* Chỉ áp khi .light — dark mặc định KHÔNG đụng. */
html.light #btn-check-answer.is-checked {
  background-image: none !important;
  background-color: #f0fdf4 !important;
  border: 1.5px solid #16a34a !important;
  color: #166534 !important;
  box-shadow: 0 1px 3px rgba(22, 163, 74, 0.15) !important;
}
html.light #btn-check-answer.is-checked * {
  color: #166534 !important;
}
html.light #btn-check-answer.is-empty,
html.light #btn-check-answer.is-unanswered {
  background-image: none !important;
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
html.light #btn-check-answer.is-empty:hover,
html.light #btn-check-answer.is-unanswered:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}
html.light #btn-check-answer.is-empty *,
html.light #btn-check-answer.is-unanswered * {
  color: #475569 !important;
}
html.light #btn-check-answer.is-ready,
html.light #btn-check-answer:not(.is-checked):not(.is-empty):not(.is-unanswered) {
  background-image: linear-gradient(to right, var(--org-primary-600, #2563eb), var(--org-primary-700, #1d4ed8)) !important;
  border: 1px solid var(--org-primary-700, #1d4ed8) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}
html.light #btn-check-answer.is-ready *,
html.light #btn-check-answer:not(.is-checked):not(.is-empty):not(.is-unanswered) * {
  color: #ffffff !important;
}
html.light #btn-header-remix {
  background-image: linear-gradient(to right, #7c3aed, #4f46e5) !important;
  color: #ffffff !important;
}
html.light #btn-header-walkthrough {
  background-color: #ffffff !important;
  border-color: #d97706 !important;
  color: #92400e !important;
}
html.light #btn-quick-remix {
  background-image: none !important;
  background-color: #f5f3ff !important;
  border-color: #8b5cf6 !important;
  color: #6d28d9 !important;
}
html.light #btn-quick-walkthrough {
  background-color: #fffbeb !important;
  border-color: #f59e0b !important;
  color: #92400e !important;
}

/* ---------- e. Mobile: footer exam fixed không che keypad / badge không wrap dọc ---------- */
@media (max-width: 767px) {
  /* Pane nội dung (passage + answer) cần chừa khoảng cho footer fixed h-14 (56px) + safe-area
     để Option D, hàng keypad đầu tiên (7/8/9) và submit buttons không bị footer đè khi cuộn tới đáy */
  #view-question-solver main > div > div > div:last-child,
  #view-question-solver .overflow-y-auto:not(#left-pane):not(#right-pane) {
    padding-bottom: 64px !important;
  }
  #left-pane,
  #right-pane,
  #view-question-solver #right-pane {
    padding-bottom: 96px !important;
  }
  #view-question-solver #left-pane {
    padding-bottom: 90px !important;
  }
  /* Badge trạng thái "Đã Kiểm Tra (Xem giải thích...)" trong footer: 1 hàng */
  #check-answer-box,
  #check-answer-box * {
    white-space: nowrap !important;
  }
  #btn-check-answer {
    max-width: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #btn-check-answer-text {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
  }

  /* Fix #view-question-solver > header: adjust center timer max-width and right button spacing */
  #view-question-solver > header {
    padding-left: 6px !important;
    padding-right: 6px !important;
    gap: 4px !important;
  }
  #view-question-solver > header > div:first-child {
    max-width: 28vw !important;
    min-width: 0 !important;
    gap: 3px !important;
  }
  #q-section-badge {
    max-width: 70px !important;
    font-size: 9px !important;
    padding: 1.5px 4px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #solver-mode-badge {
    padding: 1.5px 5px !important;
    font-size: 9px !important;
  }
  #view-question-solver > header > div:nth-child(2),
  #view-question-solver > header .absolute.left-1\/2 {
    max-width: 34vw !important;
  }
  #exam-timer-container {
    padding: 2px 6px !important;
    gap: 4px !important;
    max-width: 100% !important;
  }
  #exam-timer-display {
    font-size: 10.5px !important;
    letter-spacing: normal !important;
  }
  #btn-timer-toggle {
    font-size: 9px !important;
    padding: 1px 3px !important;
  }
  #view-question-solver > header > div:last-child {
    gap: 3px !important;
    flex-shrink: 0 !important;
  }
  #view-question-solver > header > div:last-child > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #view-question-solver > header button {
    min-height: 44px !important;
    min-width: 44px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #btn-session-finish {
    min-height: 44px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ---------- d. Modal auth & all modals trên màn nhỏ: vừa màn, cuộn nội dung ---------- */
@media (max-width: 600px) {
  [id^="modal-"] > div,
  [role="dialog"] > div,
  [role="alertdialog"] > div,
  .modal-glass-container,
  #modal-auth > div {
    max-height: 94vh !important;
    max-height: 94dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ---------- f. Light mode: badge tier đủ tương phản (WCAG >= 4.5:1) ----------
   Badge amber/purple 25-30% trên nền trắng cho ratio ~1:1 (tàng hình).
   data-tier do updateUserUI gán; dark mode KHÔNG đụng. */
html.light #nav-pro-badge[data-tier="pro"],
html.light #prof-tier-badge[data-tier="pro"] {
  background-image: none !important;
  background-color: #fde68a !important;
  color: #78350f !important;
  border-color: #b45309 !important;
}
html.light #nav-pro-badge[data-tier="plus"],
html.light #prof-tier-badge[data-tier="plus"] {
  background-image: none !important;
  background-color: #ede9fe !important;
  color: #4c1d95 !important;
  border-color: #7c3aed !important;
}
html.light #nav-pro-badge[data-tier="free"] {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #475569 !important;
}
/* Streak chip: 8.5px quá nhỏ để đọc — nâng lên 10px (giữ nguyên style khác) */
#user-streak-badge {
  font-size: 10px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* ---------- g. Reduced motion: tôn trọng prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- h. Focus-visible: vòng focus rõ ràng cho keyboard user ---------- */
*:focus-visible,
:focus-visible {
  outline: 2px solid #38bdf8 !important;
  outline-offset: 2px !important;
}

/* Ensure focus:outline-none classes do not strip visual focus indicators for keyboard users */
.focus\:outline-none:focus-visible,
[class*="focus:outline-none"]:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="option"]:focus-visible {
  outline: 2px solid #38bdf8 !important;
  outline-offset: 2px !important;
}

/* ---------- i. Touch target mobile: nav-btn >= 44px, gap >= 8px ---------- */
@media (max-width: 1023.98px) {
  .nav-btn,
  a.nav-btn,
  #global-navbar .nav-btn,
  #global-navbar a.nav-btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* ---------- k. Mobile: profile hero wrap (hết tràn ngang 375px) ---------- */
@media (max-width: 640px) {
  #view-profile .flex.items-center.gap-5 {
    flex-wrap: wrap !important;
  }
  #view-profile .flex.items-center.gap-2\.5 {
    flex-wrap: wrap !important;
  }
  #prof-tier-badge {
    white-space: nowrap !important;
  }
  /* Mục tiêu/chuỗi học dòng meta: cho xuống hàng thay vì tràn */
  #view-profile .flex.items-center.gap-3 {
    flex-wrap: wrap !important;
  }
}

/* ---------- l. Mobile nav panel: item touch target >= 44px ---------- */
#mobile-nav-panel .mnav-item {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
}

/* ---------- m. Mobile < 640px: header gọn vừa 375px (hết tràn ngang) ---------- */
@media (max-width: 640px) {
  /* Badge PRO ẩn khỏi header mobile (vẫn có ở profile + landing + pro modal) */
  #nav-pro-badge {
    display: none !important;
  }
  /* AI Coach: icon-only (nút gradient xanh trong header) */
  header .bg-gradient-to-r.from-blue-600.to-indigo-600 span {
    display: none !important;
  }
  header .bg-gradient-to-r.from-blue-600.to-indigo-600 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #user-streak-badge {
    display: none !important;
  }
  /* Nút user: avatar-only (tên vẫn có ở profile + auth modal) */
  #btn-user-auth #user-display-name {
    display: none !important;
  }
}

/* ---------- n. Light mode: tương phản KHU VỰC THI (#view-question-solver) ----------
   base.css:403 (.text-white:not(...)) có specificity cao hơn rule bảo vệ ở base.css:408
   → nút nền xanh đặc bị ép chữ tối #0f172a (3.45:1). Ép lại chữ trắng bằng id-specificity. */
html.light #view-question-solver button.bg-blue-600,
html.light #view-question-solver button.bg-blue-500,
html.light #view-question-solver button.bg-indigo-600,
html.light #view-question-solver button.bg-indigo-500,
html.light #view-question-solver button.bg-emerald-600,
html.light #view-question-solver button.bg-emerald-500,
html.light #view-question-solver button.bg-rose-600,
html.light #view-question-solver button.bg-rose-500,
html.light #view-question-solver button.bg-purple-600,
html.light #view-question-solver button.bg-cyan-600,
html.light #view-question-solver button[class*="bg-gradient-"]:not(#btn-passage-logic-map):not([class*="from-amber"]):not([class*="from-yellow"]):not([class*="/15"]) {
  color: #ffffff !important;
}

html.light #view-question-solver button.bg-blue-600 *,
html.light #view-question-solver button.bg-blue-500 *,
html.light #view-question-solver button.bg-indigo-600 *,
html.light #view-question-solver button.bg-indigo-500 *,
html.light #view-question-solver button.bg-emerald-600 *,
html.light #view-question-solver button.bg-emerald-500 *,
html.light #view-question-solver button.bg-rose-600 *,
html.light #view-question-solver button.bg-rose-500 *,
html.light #view-question-solver button.bg-purple-600 *,
html.light #view-question-solver button.bg-cyan-600 *,
html.light #view-question-solver button[class*="bg-gradient-"]:not(#btn-passage-logic-map):not([class*="from-amber"]):not([class*="from-yellow"]):not([class*="/15"]) * {
  color: #ffffff !important;
}

/* Nút "Tạo Câu Song Sinh (Remix)" quick-action: text-white bên trong div.text-white
   nằm trên nền #f5f3ff (1.1:1) → dùng gradient tím same nút Remix ở header */
html.light #btn-quick-remix {
  background-image: linear-gradient(to right, #7c3aed, #4f46e5) !important;
  background-color: transparent !important;
  border-color: #6d28d9 !important;
  color: #ffffff !important;
}

/* Placeholder ô nhập grid-in: #9ca3af (2.54:1) → #64748b (4.76:1) */
html.light #view-question-solver input::placeholder,
html.light #view-question-solver textarea::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

/* Badge mã đề (SAT-20, chữ 9.5px): #64748b (4.34:1) → #475569 (~7:1) */
html.light #q-code-badge {
  color: #475569 !important;
}

/* Pill trạng thái grid-in (\"Đang chờ\"): #64748b trên nền xám nhạt 4.34:1 → đậm hơn */
html.light #grid-in-status-badge {
  color: #475569 !important;
  border-color: #94a3b8 !important;
}

/* ---------- o. Light mode: BÀN PHÍM SỐ (#grid-in-keypad) ----------
   Keypad buttons #ffffff with #0f172a text, border #cbd5e1 */
html.light #grid-in-keypad .keypad-btn {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
html.light #grid-in-keypad .keypad-btn:hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}
html.light #grid-in-keypad .keypad-btn:active {
  background-color: #e2e8f0 !important;
}
html.light #grid-in-keypad .keypad-op-btn {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
html.light #grid-in-keypad .keypad-clear-btn {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #dc2626 !important;
}
html.light #grid-in-keypad .keypad-clear-btn:hover {
  background-color: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}
html.light #grid-in-keypad .keypad-backspace-btn {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #d97706 !important;
}
html.light #grid-in-keypad .keypad-backspace-btn:hover {
  background-color: #fefce8 !important;
  border-color: #fde047 !important;
  color: #b45309 !important;
}
html.light #grid-in-keypad #btn-grid-in-keypad-submit,
html.light #grid-in-keypad .keypad-submit-btn {
  background-color: #2563eb !important;
  border: 1px solid #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
}
html.light #grid-in-keypad #btn-grid-in-keypad-submit:hover,
html.light #grid-in-keypad .keypad-submit-btn:hover {
  background-color: #1d4ed8 !important;
}

/* ---------- p. Light mode TOÀN DIỆN (sweep 12 view): tương phản WCAG ----------
   A) Badge tier: rule base.css "button[gradient] *" ép span trắng (1.25:1) → inherit theo tier */
html.light #nav-pro-badge[data-tier] *,
html.light #prof-tier-badge[data-tier] * {
  color: inherit !important;
}

/* B) Avatar user navbar: chữ trắng trên nền #eff6ff (1.09:1) → xanh đậm trên tint xanh */
html.light #user-avatar-badge {
  color: #1d4ed8 !important;
  background-color: #dbeafe !important;
  border-color: #93c5fd !important;
}

/* C) CTA amber gradient giữ nền, chữ nâu đậm (trắng = 2.15:1) */
html.light button.from-amber-500,
html.light button.from-amber-500 * {
  color: #451a03 !important;
}

/* D) WALKTHROUGH PANEL: remap toàn bộ pastel-on-light → cặp màu đạt 4.5:1 */
html.light #solver-walkthrough-panel .text-amber-300,
html.light #solver-walkthrough-panel .text-amber-400 {
  color: #92400e !important;
}
html.light #solver-walkthrough-panel .bg-amber-500\/20 {
  background-color: #fef3c7 !important;
  border-color: #fcd34d !important;
}
html.light #solver-walkthrough-panel .text-blue-200,
html.light #solver-walkthrough-panel .text-blue-300 {
  color: #1e40af !important;
}
html.light #solver-walkthrough-panel .text-blue-400 {
  color: #1d4ed8 !important;
}
html.light #solver-walkthrough-panel .bg-blue-950\/30 {
  background-color: #eff6ff !important;
  border-color: #bfdbfe !important;
}
html.light #solver-walkthrough-panel .bg-blue-600\/30 {
  background-color: #dbeafe !important;
  color: #1e40af !important;
}
html.light #solver-walkthrough-panel .text-purple-200,
html.light #solver-walkthrough-panel .text-purple-300,
html.light #solver-walkthrough-panel .text-purple-400 {
  color: #6d28d9 !important;
}
html.light #solver-walkthrough-panel .bg-purple-950\/30 {
  background-color: #f5f3ff !important;
  border-color: #ddd6fe !important;
}
html.light #solver-walkthrough-panel .bg-purple-600\/30 {
  background-color: #ede9fe !important;
  color: #6d28d9 !important;
}
html.light #solver-walkthrough-panel .text-rose-200,
html.light #solver-walkthrough-panel .text-rose-400 {
  color: #be123c !important;
}
html.light #solver-walkthrough-panel .bg-rose-950\/30 {
  background-color: #fff1f2 !important;
  border-color: #fecdd3 !important;
}
html.light #solver-walkthrough-panel .text-emerald-200,
html.light #solver-walkthrough-panel .text-emerald-300,
html.light #solver-walkthrough-panel .text-emerald-400 {
  color: #047857 !important;
}
html.light #solver-walkthrough-panel .bg-emerald-950\/30 {
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}
html.light #solver-walkthrough-panel .bg-emerald-600\/30,
html.light #solver-walkthrough-panel .bg-emerald-500\/20 {
  background-color: #d1fae5 !important;
  color: #047857 !important;
  border-color: #6ee7b7 !important;
}
/* Nút mở bước amber-gradient: trắng trên #d97706 = 2.9:1 → trừ nền xuống amber-700/800 */
html.light #solver-walkthrough-panel button.from-amber-600 {
  background-image: linear-gradient(to right, #b45309, #c2410c) !important;
}
/* Nút bước-3 emerald-gradient: trắng trên #059669 = 3.0:1 → emerald-800 */
html.light #solver-walkthrough-panel button.from-emerald-600 {
  background-image: linear-gradient(to right, #065f46, #115e59) !important;
}

/* E) PROFILE MEMBERSHIP CARD (nền gradient tối + pastel → chuyển light) */
html.light #view-profile .bg-gradient-to-br.from-slate-900 {
  background-image: linear-gradient(135deg, #fffbeb 0%, #ffffff 60%, #fef3c7 100%) !important;
  border-color: #fde68a !important;
}
html.light #view-profile .bg-slate-950\/80 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}
html.light #view-profile .text-rose-400 {
  color: #be123c !important;
}
html.light #view-profile .text-indigo-300 {
  color: #4338ca !important;
}
html.light #view-profile .text-purple-300 {
  color: #6d28d9 !important;
}
html.light #view-profile .text-amber-300 {
  color: #92400e !important;
}
html.light #view-profile .text-amber-400 {
  color: #92400e !important;
}
html.light #view-profile .text-emerald-400 {
  color: #047857 !important;
}

/* F) Placeholder toàn app: #9ca3af (2.54:1) → #64748b (4.76:1 trên trắng) */
html.light input::placeholder,
html.light textarea::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

/* G) Username phụ: #64748b trên #f5f3ff = 4.34:1 → đậm hơn */
html.light #prof-username {
  color: #475569 !important;
}

/* Nhãn phụ trên nền amber tint của membership card: 4.27:1 → đậm hơn */
html.light #view-profile .text-slate-400 {
  color: #475569 !important;
}

/* Walkthrough subtitle trên nền amber-tint: cứng hoá thêm */
html.light #solver-walkthrough-panel .text-slate-400 {
  color: #475569 !important;
}

/* ---------- q. Dark mode: 2 lỗi thật từ sweep ----------
   Badge PRO amber-300 trên gradient amber-500/25 = 4.06:1 → sáng chữ lên amber-100 (4.95:1) */
html.dark #nav-pro-badge,
html.dark #prof-tier-badge {
  color: #fef3c7 !important;
}
html.dark #nav-pro-badge *,
html.dark #prof-tier-badge * {
  color: inherit !important;
}
/* Separator "•" slate-600 trên slate-950 = 2.36:1 → slate-400 */
html.dark #view-profile .text-slate-600 {
  color: #94a3b8 !important;
}

/* ---------- r. Walkthrough unlock buttons: trắng trên amber-600/emerald-600 gradient
   chỉ đạt 3.56/3.77:1 ở CẢ 2 mode → trừ gradient xuống 700/800 (giữ nguyên hình thức gradient) */
html.dark #solver-walkthrough-panel button.from-amber-600,
html.light #solver-walkthrough-panel button.from-amber-600 {
  background-image: linear-gradient(to right, #b45309, #c2410c) !important;
}
html.dark #solver-walkthrough-panel button.from-emerald-600,
html.light #solver-walkthrough-panel button.from-emerald-600 {
  background-image: linear-gradient(to right, #065f46, #115e59) !important;
}
html.dark #solver-walkthrough-panel button.from-amber-600 *,
html.dark #solver-walkthrough-panel button.from-emerald-600 * {
  color: #ffffff !important;
}
/* Separator "|" trong đồng hồ thi: slate-600 trên slate-950 = 2.66:1 */
html.dark #exam-timer-container .text-slate-600 {
  color: #94a3b8 !important;
}

/* ==========================================================================
   GLOBAL NAVBAR MODERN 56PX SPACIOUS CAPSULE & MOBILE DRAWER STYLES
   ========================================================================== */

#global-navbar {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  z-index: 50 !important;
  height: calc(56px + env(safe-area-inset-top, 0px)) !important;
  min-height: 56px !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  transform: none !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: visible !important;
}

#global-navbar nav,
#desktop-main-nav {
  overflow: visible !important;
}

/* Ensure desktop main navbar is always visible on screens >= 1024px (desktops & laptops) */
@media (min-width: 1024px) {
  #global-navbar nav,
  #desktop-main-nav {
    display: flex !important;
  }
}
@media (max-width: 1023.98px) {
  #global-navbar nav,
  #desktop-main-nav {
    display: none !important;
  }
}

#global-navbar nav,
.segmented-controller {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  background-color: rgba(2, 6, 23, 0.85);
  border-radius: 9999px;
  border: 1px solid rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html.light #global-navbar nav,
html.light .segmented-controller {
  background-color: rgba(241, 245, 249, 0.95);
  border-color: rgba(203, 213, 225, 0.8);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Responsive display utility enforcement */
@media (min-width: 640px) {
  .sm\:inline { display: inline !important; }
  .sm\:inline-block { display: inline-block !important; }
  .sm\:flex { display: flex !important; }
  .sm\:block { display: block !important; }
}
@media (min-width: 768px) {
  .md\:inline { display: inline !important; }
  .md\:inline-block { display: inline-block !important; }
  .md\:flex { display: flex !important; }
  .md\:block { display: block !important; }
}
@media (min-width: 1024px) {
  .lg\:inline { display: inline !important; }
  .lg\:inline-block { display: inline-block !important; }
  .lg\:flex { display: flex !important; }
  .lg\:block { display: block !important; }
}

#global-navbar .nav-btn {
  white-space: nowrap !important;
  border-radius: 9999px !important;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
  line-height: 1.25 !important;
}

#global-navbar .nav-btn:hover {
  transform: translate3d(0, -0.5px, 0) !important;
}

#global-navbar .nav-btn:active {
  transform: translate3d(0, 0, 0) !important;
}

#global-navbar .nav-btn.is-active,
#global-navbar .nav-btn.bg-blue-600 {
  background-color: var(--org-primary-600, #2563eb) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 8px rgba(var(--org-primary-rgb, 37, 99, 235), 0.4) !important;
}

#global-navbar .nav-btn.is-active i,
#global-navbar .nav-btn.bg-blue-600 i,
#global-navbar .nav-btn.is-active span,
#global-navbar .nav-btn.bg-blue-600 span {
  color: #ffffff !important;
}

#global-navbar .nav-btn.is-active:hover,
#global-navbar .nav-btn.bg-blue-600:hover {
  background-color: var(--org-primary-hover, var(--org-primary-700, #1d4ed8)) !important;
  color: #ffffff !important;
}

/* Light Theme Navbar Overrides */
html.light #global-navbar {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

html.light #global-navbar nav {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !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.is-active,
html.light #global-navbar .nav-btn.bg-blue-600 {
  background-color: var(--org-primary-600, #2563eb) !important;
  color: #ffffff !important;
}

/* Light Theme Mobile Drawer */
html.light #mobile-nav-panel {
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-color: #e2e8f0 !important;
}

html.light .mnav-item {
  color: #334155 !important;
}

html.light .mnav-item:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.light .mnav-item.is-active {
  background-color: rgba(var(--org-primary-50-rgb, 239, 246, 255), 0.7) !important;
  color: var(--org-primary-700, #1d4ed8) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   ENHANCED UX AUDIT POLISH: HERO, LAUNCH TILES, ACTIVE RESUME & MOBILE BAR
   ========================================================================== */

/* 1. Mobile Bottom Quickbar Permanently Hidden (zero lingering margins/paddings) */
#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;
}

/* 2. Master Launch Tiles Hover Smooth Lift & Glow */
.dash-tile {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

.dash-tile:hover {
  transform: translate3d(0, -3px, 0) !important;
}

/* 3. Active Session Resume Banner Distinct Solid High-Contrast Styling */
#landing-active-session-banner,
#global-active-session-banner {
  background-color: #0d1527 !important;
  background-image: none !important;
  border: 2px solid #2563eb !important;
  box-shadow: 0 0 25px rgba(59, 130, 246, 0.25), 0 10px 30px -5px rgba(0, 0, 0, 0.5) !important;
  animation: none !important;
}

#landing-active-session-banner #landing-active-session-title,
#global-active-session-banner h3 {
  color: #ffffff !important;
}

#landing-active-session-banner #landing-active-session-qcount,
#global-active-session-banner p {
  color: #cbd5e1 !important;
}

#landing-active-session-banner #landing-active-session-time {
  color: #fcd34d !important;
}

.test-suite-card.has-active-session,
.test-suite-card-active {
  border: 2px solid #22d3ee !important;
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.25), 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

.test-card-active-banner {
  background-color: rgba(8, 51, 68, 0.5) !important;
  border: 1.5px solid rgba(6, 182, 212, 0.8) !important;
}

html[data-org="sat-drills"] #landing-active-session-banner,
html.org-sat-drills #landing-active-session-banner,
body.org-sat-drills #landing-active-session-banner {
  border-color: #dc2626 !important;
}

/* 4. Navbar Active Indicator Pill Glow */
#global-navbar .nav-btn.bg-blue-600 {
  box-shadow: 0 2px 10px rgba(var(--org-primary-rgb, 37, 99, 235), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* 5. Goal Countdown Widget Progress Ring Animation */
#dash-daily-ring-circle {
  transition: stroke-dashoffset 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 6. Quick Drill & All Modals Smooth Hardware-Accelerated Scale-in Animation */
[id^="modal-"]:not(.hidden) > div,
[role="dialog"]:not(.hidden) > div,
.modal-glass-container {
  animation: modalScaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

@keyframes modalScaleIn {
  from {
    opacity: 0;
    transform: scale3d(0.95, 0.95, 1) translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
}

/* 7. Light Theme Compatibility for Quick Drill & Active Resume Banner */
html.light #landing-active-session-banner,
html.light #global-active-session-banner {
  background: #eff6ff !important;
  background-image: none !important;
  border: 2px solid #2563eb !important;
  box-shadow: 0 8px 25px -4px rgba(37, 99, 235, 0.15) !important;
}

html.light #landing-active-session-banner #landing-active-session-title,
html.light #landing-active-session-banner h2,
html.light #landing-active-session-banner h3,
html.light #global-active-session-banner h3,
html.light #global-active-session-banner b {
  color: #0f172a !important;
}

html.light #landing-active-session-banner #landing-active-session-qcount,
html.light #landing-active-session-banner #landing-active-session-qcount *,
html.light #landing-active-session-banner #landing-active-session-sub,
html.light #global-active-session-banner p {
  color: #334155 !important;
}

html.light #landing-active-session-banner #landing-active-session-time {
  color: #b45309 !important;
}

html.light #landing-active-session-banner #landing-active-session-pct {
  background-color: #e0f2fe !important;
  border-color: #7dd3fc !important;
  color: #0369a1 !important;
}

html.light #landing-active-session-banner .bg-slate-950,
html.light #global-active-session-banner .bg-slate-950 {
  background-color: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}

html.light #landing-active-session-banner button[onclick*="resumeActiveLandingSession"],
html.light #global-active-session-banner button[onclick*="resumeTestSuiteSession"] {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

html.light .test-suite-card.has-active-session,
html.light .test-suite-card-active {
  background-color: #ffffff !important;
  border: 2px solid #06b6d4 !important;
  box-shadow: 0 10px 25px -5px rgba(6, 182, 212, 0.2) !important;
}

html.light .test-card-active-banner {
  background-color: #ecfeff !important;
  border: 1.5px solid #06b6d4 !important;
}

html.light .test-card-active-banner span,
html.light .test-card-active-banner div {
  color: #083344 !important;
}

html.light .test-card-active-banner b {
  color: #0f172a !important;
}

html.light .test-card-active-banner .bg-slate-950,
html.light .test-card-active-banner .bg-slate-950\/80 {
  background-color: #cffafe !important;
  border-color: #a5f3fc !important;
  color: #0891b2 !important;
}

html.light .test-card-active-banner button {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

html.light #modal-quick-drill > div {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

html.light #modal-quick-drill .text-white {
  color: #0f172a !important;
}

html.light #modal-quick-drill .bg-slate-950\/60 {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

/* ==========================================================================
   ENTERPRISE CROSS-DEVICE RESPONSIVENESS & TOUCH ERGONOMICS (PILLAR 1 - 6)
   ========================================================================== */

/* Disable default mobile tap highlight gray box across elements */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}

/* 1. iOS Safe Area Inset Support & Dynamic Mobile Viewports */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  max-width: 100vw !important;
}

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

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

/* Admin Cockpit: keep mobile controls contained while preserving table scrolling. */
#view-admin,
#view-admin > *,
#view-admin .flex,
#view-admin .grid {
  min-width: 0;
}

#view-admin input,
#view-admin select,
#view-admin textarea {
  max-width: 100%;
  min-width: 0;
}

#view-admin .overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

#view-admin table {
  white-space: nowrap;
}

@media (max-width: 767px) {
  #view-admin #adm-scope-selector-wrap,
  #view-admin #adm-scope-org-filter,
  #view-admin #adm-btn-quick-export,
  #view-admin #adm-btn-quick-vacuum,
  #view-admin #adm-btn-quick-cache {
    max-width: 100%;
  }

  #view-admin #adm-scope-selector-wrap {
    width: 100%;
  }

  #left-pane,
  #right-pane {
    padding-bottom: 96px !important;
  }

  #view-admin #adm-scope-org-filter {
    flex: 1;
  }

  #view-admin button {
    min-height: 40px;
  }

  #view-admin .grid-cols-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  #view-admin .min-w-\[240px\],
  #view-admin .min-w-\[280px\],
  #view-admin .min-w-\[300px\] {
    min-width: 0;
  }
}

#global-navbar {
  padding-top: env(safe-area-inset-top, 0px) !important;
  height: calc(56px + env(safe-area-inset-top, 0px)) !important;
  min-height: calc(56px + env(safe-area-inset-top, 0px)) !important;
}

#mobile-nav-panel {
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)) !important;
}

@supports (padding: max(0px)) {
  #view-question-solver > header {
    padding-top: max(0px, env(safe-area-inset-top)) !important;
  }
  #view-question-solver > footer {
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #view-question-solver .exam-split-workspace {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* 2. Tactile Option Cards & Haptic Press Feel */
.option-item {
  transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease !important;
  touch-action: manipulation;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}
.option-item:active {
  transform: scale3d(0.985, 0.985, 1) !important;
}
.option-item:hover {
  transform: translate3d(0, -1px, 0) !important;
}

/* 3. Mobile (<768px) Touch Targets & Keypad Optimization */
@media (max-width: 767px) {
  /* Ensure minimum 44px touch targets on mobile for all interactive buttons */
  .keypad-btn {
    min-height: 48px !important;
    font-size: 1.125rem !important;
  }
  .option-item {
    min-height: 52px !important;
    padding: 10px 10px 10px 14px !important;
    gap: 6px !important;
  }
  .option-main-content {
    min-width: 0 !important;
    padding-right: 6px !important;
  }
  .option-action-group {
    flex-shrink: 0 !important;
    margin-left: auto !important;
    padding-left: 8px !important;
    border-left: 1px solid rgba(148, 163, 184, 0.25) !important;
  }
  .btn-crossout-option {
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 6px !important;
    touch-action: manipulation;
  }

  /* Stacking and padding adjustments: 96px padding-bottom protects from 56px+34px footer */
  #left-pane, #right-pane,
  #view-question-solver #left-pane,
  #view-question-solver #right-pane {
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 14px !important;
    padding-bottom: 96px !important;
  }

  /* Dynamic KaTeX formula overflow prevention */
  .katex-display {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 0 !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Mobile Tab Switcher Sticky Visibility */
  #solver-mobile-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 25 !important;
  }
  /* Bottom navigation buttons compact sizing & 44px touch targets */
  #view-question-solver footer {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  #view-question-solver footer button {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #bottom-q-counter {
    max-width: 105px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
  }

  /* Check Answer Box: natural flex item on mobile, NEVER absolute overlay */
  #check-answer-box {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    max-width: none !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    z-index: 10 !important;
  }
  #btn-check-answer {
    max-width: none !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 11px !important;
  }
  .mobile-pane-hidden {
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: 0 !important;
    pointer-events: none !important;
  }
}

/* 4. Small Mobile (<380px) Ultra-Compact Tuning */
@media (max-width: 380px) {
  #q-section-badge {
    max-width: 80px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 8.5px !important;
  }
  #exam-timer-display {
    font-size: 11px !important;
  }
  #exam-timer-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  #btn-check-answer-text {
    font-size: 10.5px !important;
  }
  #bottom-q-counter {
    max-width: 78px !important;
    font-size: 10px !important;
  }
  #btn-prev-q, #btn-next-q {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 11px !important;
  }
  .keypad-btn {
    min-height: 44px !important;
    font-size: 1rem !important;
  }
}

/* 5. Tablet & Desktop (>=768px) Split Workspace Perfection */
@media (min-width: 768px) {
  .exam-split-workspace {
    display: flex !important;
    flex-direction: row !important;
  }
  /* College Board Bluebook Split Workspace: 50/50 split on Reading & Writing, 100% width on Math */
  #left-pane:not(.hidden) {
    display: block !important;
    min-width: 25% !important;
    max-width: 75% !important;
  }
  #left-pane.hidden {
    display: none !important;
    width: 0% !important;
  }
  #left-pane:not(.hidden) ~ #right-pane {
    display: flex !important;
    min-width: 25% !important;
    max-width: 75% !important;
  }
  #left-pane.hidden ~ #right-pane,
  #right-pane.w-full {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #left-pane.hidden ~ #split-drag-handle {
    display: none !important;
  }
  #solver-mobile-tabs {
    display: none !important;
  }
}

/* College Board Bluebook: Fixed Footer with Centered Check Answer Button (Active Exam Only) */
#view-question-solver:not(.hidden) footer,
#view-question-solver:not(.hidden) > footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 40 !important;
}

#view-question-solver.hidden,
#view-question-solver.hidden *,
#view-question-solver.hidden footer,
#view-question-solver.hidden > footer,
#view-question-solver.hidden #solver-ai-quick-strip,
#view-question-solver.hidden #check-answer-box {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#check-answer-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

@media (min-width: 768px) {
  #check-answer-box {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 20 !important;
  }
}

/* College Board Bluebook: Clean Interface (Permanently hide passage toolbar, analytics button & quick strip) */
#passage-toolbar, #btn-passage-analytics, #solver-ai-quick-strip {
  display: none !important;
}

/* Layout containment on exam workspace panes to prevent layout thrashing across question navigation */
#left-pane,
#right-pane {
  contain: layout;
}

/* Tablet Ergonomics: Enlarge touch target hit area for draggable split divider */
#split-drag-handle {
  touch-action: none;
}
#split-drag-handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -14px;
  right: -14px;
  z-index: 15;
}

/* Light mode high-contrast & accessibility protections */
html.light #btn-timer-toggle {
  color: #475569 !important;
}
html.light #btn-timer-toggle:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}
html.light #solver-mode-badge {
  background-color: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #a7f3d0 !important;
}
html.light #q-code-badge {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}
html.light #btn-grid-in-clear-mini {
  background-color: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
}
html.light #btn-grid-in-clear-mini:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* 6. High-DPI & Ultrawide (>1440px) Ergonomics */
@media (min-width: 1440px) {
  #left-pane > div,
  #right-pane > div {
    max-width: 720px !important;
  }
}

/* 7. KaTeX & Math Equations Beautiful Horizontal Scrolling */
.katex-display > .katex {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* 8. 3D Flashcards SRS Responsive Perspective on Mobile */
@media (max-width: 640px) {
  .flashcard-container {
    min-height: 320px !important;
  }
  .flashcard-card {
    min-height: 320px !important;
  }
}

/* 3D Flashcard Face Stacking & Zero Z-Fighting (GPU-Accelerated 60fps) */
.perspective-1000 {
  perspective: 1200px !important;
  -webkit-perspective: 1200px !important;
}
.flashcard-inner,
.flashcard-card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.flashcard-front,
.flashcard-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#view-flashcards .flashcard-back,
#srs-card-container .flashcard-back,
.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;
}
#view-flashcards .flashcard-front,
#srs-card-container .flashcard-front,
.flashcard-front {
  transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
#view-flashcards .flashcard-inner.is-flipped,
#view-flashcards .flashcard-inner.flipped,
#srs-card-inner.is-flipped,
#srs-card-inner.flipped,
.flashcard-inner.is-flipped,
.flashcard-inner.flipped,
.flashcard-card.is-flipped,
.flashcard-card.flipped {
  transform: rotateY(180deg) !important;
  -webkit-transform: rotateY(180deg) !important;
}

/* ==========================================================================
   PERFORMANCE ACCELERATION: FLAT COLORS, ZERO BACKDROP-BLUR & 60-120FPS RENDERING
   ========================================================================== */

/* 1. Eliminate costly blur on non-surface / content elements to protect scrolling performance */
p, span, a, input, select, textarea, table, tbody, tr, td, th, i, svg, ul, li {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Ensure smooth hardware accelerated scrolling */
html, body {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Disable heavy filter blurs and drop-shadows that trigger repaint lag */
.auth-glow-orb-primary,
.auth-glow-orb-accent,
[class*="blur-"],
[class*="drop-shadow-"],
[style*="filter: blur"],
[style*="filter:drop-shadow"],
[style*="filter: drop-shadow"] {
  filter: none !important;
}

/* 2. Flat Modern Surface Palette (Linear / Bluebook Minimalist Dark UI) */
.dash-bg-grid,
body,
html {
  background-image: none !important;
}

html:not(.light) body,
html.dark body,
html:not(.light) .dash-bg-grid,
html.dark .dash-bg-grid {
  background-color: var(--org-dark-bg, #090d16) !important;
}

/* ==========================================================================
   APPLE iOS 2026 / visionOS LIQUID GLASS ARCHITECTURE
   High-performance GPU-composited frosted glass with 60-120fps scrolling
   ========================================================================== */

/* 1. Global Liquid Environment Canvas */
html:not(.light) body,
html.dark body {
  background-color: #060913 !important;
  background-image: radial-gradient(circle at 50% 0%, #131d38 0%, #060913 75%) !important;
  background-repeat: no-repeat;
  background-size: 100% 100vh;
}

/* 2. Hardware-Accelerated Floating Liquid Glass Navbar (Dark Mode) */
html:not(.light) #global-navbar,
html.dark #global-navbar {
  background-color: rgba(11, 15, 28, 0.78) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.45) !important;
  transform: translateZ(0);
}

html:not(.light) #global-navbar nav,
html.dark #global-navbar nav {
  background-color: rgba(17, 24, 39, 0.75) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
}

/* 2b. Floating Liquid Glass Navbar (Light Mode) */
html.light #global-navbar {
  background-color: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
  transform: translateZ(0);
}

html.light #global-navbar nav {
  background-color: rgba(248, 250, 252, 0.85) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.9) !important;
}

/* 3. Liquid Glass Cards & Bento Tiles (Dark Mode) */
html:not(.light) .dash-tile,
html.dark .dash-tile,
html:not(.light) .dash-subcard,
html.dark .dash-subcard,
html:not(.light) .card,
html.dark .card,
html:not(.light) .sub-card,
html.dark .sub-card,
html:not(.light) #landing-action-unified-card,
html.dark #landing-action-unified-card,
html:not(.light) #dash-error-notebook-hub,
html.dark #dash-error-notebook-hub,
html:not(.light) #dash-goal-countdown-widget,
html.dark #dash-goal-countdown-widget {
  background-color: rgba(15, 23, 42, 0.78) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 10px 30px -5px rgba(0, 0, 0, 0.45) !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}

html:not(.light) .dash-tile:hover,
html.dark .dash-tile:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), 0 16px 36px -8px rgba(0, 0, 0, 0.6) !important;
}

/* 3b. Liquid Glass Cards & Bento Tiles (Light Mode) */
html.light .dash-tile,
html.light .dash-subcard,
html.light .card,
html.light .sub-card,
html.light #landing-action-unified-card,
html.light #dash-error-notebook-hub,
html.light #dash-goal-countdown-widget {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.95), 0 8px 24px -4px rgba(0, 0, 0, 0.05) !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 4. Liquid Glass Popovers, Dropdowns & Mobile Panel */
.nav-popover-panel {
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 50 !important;
}

.nav-popover-panel:not(.hidden) {
  display: block !important;
}

@media (min-width: 1024px) {
  .nav-dropdown-group:hover .nav-popover-panel {
    display: block !important;
  }
  .nav-dropdown-group:hover > button:not(.bg-blue-600) {
    background-color: rgba(30, 41, 59, 0.8) !important;
    color: #ffffff !important;
  }
  .nav-dropdown-group:hover > button.bg-blue-600 {
    background-color: var(--org-primary-hover, #1d4ed8) !important;
  }
  .nav-dropdown-group:hover .fa-chevron-down,
  button[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg) !important;
  }
}

.nav-popover-item {
  transition: all 0.15s ease-in-out !important;
}
.nav-popover-item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  transform: translateX(2px) !important;
}
.nav-popover-item.is-active {
  background-color: rgba(37, 99, 235, 0.22) !important;
  color: #60a5fa !important;
  font-weight: 700 !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
}
.nav-popover-item.is-active i {
  color: #60a5fa !important;
}
html.light .nav-popover-item:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}
html.light .nav-popover-item.is-active {
  background-color: #eff6ff !important;
  color: #2563eb !important;
  font-weight: 700 !important;
  border: 1px solid rgba(37, 99, 235, 0.3) !important;
}
html.light .nav-popover-item.is-active i {
  color: #2563eb !important;
}

html:not(.light) .nav-popover,
html.dark .nav-popover,
html:not(.light) .nav-popover-panel,
html.dark .nav-popover-panel,
html:not(.light) #nav-drills-popover,
html.dark #nav-drills-popover,
html:not(.light) #nav-knowledge-popover,
html.dark #nav-knowledge-popover,
html:not(.light) #nav-progress-popover,
html.dark #nav-progress-popover,
html:not(.light) #nav-role-popover,
html.dark #nav-role-popover,
html:not(.light) #drill-mistakes-dropdown,
html.dark #drill-mistakes-dropdown,
html:not(.light) #mobile-nav-panel,
html.dark #mobile-nav-panel {
  background-color: rgba(13, 19, 36, 0.95) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 20px 40px -10px rgba(0, 0, 0, 0.7) !important;
  transform: translateZ(0);
}

html.light .nav-popover-panel,
html.light #nav-drills-popover,
html.light #nav-knowledge-popover,
html.light #nav-progress-popover,
html.light #nav-role-popover,
html.light #drill-mistakes-dropdown,
html.light #mobile-nav-panel {
  background-color: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.95), 0 16px 36px -8px rgba(0, 0, 0, 0.08) !important;
  transform: translateZ(0);
}

/* 5. Liquid Glass Modals (Dark & Light) */
html:not(.light) [id^="modal-"] > div,
html.dark [id^="modal-"] > div,
html:not(.light) [role="dialog"] > div,
html.dark [role="dialog"] > div,
html:not(.light) .modal-glass-container,
html.dark .modal-glass-container {
  background-color: rgba(13, 19, 36, 0.9) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.12), 0 25px 50px -12px rgba(0, 0, 0, 0.8) !important;
  transform: translateZ(0);
}

html.light [id^="modal-"] > div,
html.light [role="dialog"] > div,
html.light .modal-glass-container {
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.95), 0 25px 50px -12px rgba(0, 0, 0, 0.12) !important;
  transform: translateZ(0);
}

/* 6. Solver Workspace Header & Footer (Dark Mode) */
html:not(.light) #view-question-solver > header,
html.dark #view-question-solver > header {
  background-color: #0b0f1c !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html:not(.light) #view-question-solver:not(.hidden) > footer,
html.dark #view-question-solver:not(.hidden) > footer,
html:not(.light) #view-question-solver:not(.hidden) footer,
html.dark #view-question-solver:not(.hidden) footer {
  background-color: #0b0f1c !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 7. Option Items in Question Solver */
html:not(.light) .option-item,
html.dark .option-item {
  background-color: #0f172a !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  will-change: auto;
}

/* Modal overlay backgrounds: ethereal optical dim */
[id^="modal-"].fixed,
[role="dialog"].fixed,
.bg-black\/70,
.bg-black\/80,
.bg-black\/85,
.bg-black\/90 {
  background-color: rgba(5, 8, 17, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* 3. Utility class for snappy, lightweight popover menus */
.nav-popover {
  background-color: #0f172a !important;
  border: 1px solid #1e293b !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition-delay: 0ms !important;
  transition-duration: 100ms !important;
}

/* 4. Strictly controlled will-change: only promote transforms where strictly needed */
.option-item,
.dash-tile,
.keypad-btn,
.nav-btn {
  will-change: transform;
}

.keypad-btn {
  touch-action: manipulation;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  transition: transform 0.1s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.12s ease, border-color 0.12s ease !important;
}
.keypad-btn:active {
  transform: scale3d(0.92, 0.92, 1) !important;
}

/* Theme consistent button classes */
.btn-theme-primary {
  background-color: var(--org-primary-600, var(--org-primary, #2563eb)) !important;
  color: #ffffff !important;
  transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.btn-theme-primary:hover {
  background-color: var(--org-primary-hover, var(--org-primary-700, #1d4ed8)) !important;
  filter: none !important;
  box-shadow: 0 2px 8px rgba(var(--org-primary-rgb, 37, 99, 235), 0.35) !important;
}
.btn-theme-primary:active {
  transform: scale3d(0.98, 0.98, 1) !important;
}

/* Eliminate distracting bouncing, pulsing and sweeping animations */
.animate-ping,
.animate-pulse,
.flame-glow-pulse,
.btn-shimmer::after {
  animation: none !important;
  opacity: 1 !important;
}

/* Ensure consistent paddings for dashboard cards without overriding compact utility classes */
#dash-error-notebook-hub,
#dash-goal-countdown-widget {
  padding: 1.25rem !important;
}
@media (max-width: 640px) {
  #dash-error-notebook-hub,
  #dash-goal-countdown-widget {
    padding: 1rem !important;
  }
}

/* Light Theme Flat Colors */
html.light body,
html.light .dash-bg-grid {
  background-color: #f8fafc !important;
}

html.light .dash-tile,
html.light .dash-hero-mesh,
html.light .dash-subcard,
html.light .card,
html.light .sub-card {
  background-image: none !important;
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.light #global-navbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

/* ==========================================================================
   VOCABULARY COGNITIVE SUITE LIGHT MODE COLOR HARMONIZATION
   ========================================================================== */
html.light #view-flashcards {
  color: #0f172a !important;
}

html.light #view-flashcards .bg-slate-900,
html.light #view-flashcards .bg-slate-900\/90,
html.light #view-flashcards .bg-slate-900\/60 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.light #view-flashcards .bg-slate-950,
html.light #view-flashcards .bg-slate-950\/70,
html.light #view-flashcards .bg-slate-950\/80,
html.light #view-flashcards .bg-slate-950\/90 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light #view-flashcards .vocab-sub-tab.bg-slate-800 {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #334155 !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;
}

html.light #flashcard-inner .flashcard-front {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1) !important;
}

html.light #flashcard-inner .flashcard-back {
  background-color: #ffffff !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 10px 30px -10px rgba(37, 99, 235, 0.15) !important;
}

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

html.light #flashcard-ipa {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #6d28d9 !important;
}

html.light #flashcard-meaning-vi {
  color: #047857 !important;
}

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

html.light .match-card {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

html.light .leitner-pipe-node {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html.light #global-navbar nav {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

html.light #global-navbar .nav-btn {
  color: #334155 !important;
  font-weight: 600 !important;
}

html.light #global-navbar .nav-btn:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light #global-navbar .nav-btn.is-active,
html.light #global-navbar .nav-btn.bg-blue-600 {
  background-color: var(--org-primary-600, #2563eb) !important;
  border-color: var(--org-primary-600, #2563eb) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;
}

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

html.light #btn-theme-toggle {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #d97706 !important;
}
html.light #btn-theme-toggle:hover {
  background-color: #e2e8f0 !important;
}

html.light #btn-user-auth {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
html.light #btn-user-auth:hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}

html.light #user-avatar-badge {
  background-color: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #1e40af !important;
}

html.light #btn-mobile-menu {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
html.light #btn-mobile-menu:hover {
  background-color: #e2e8f0 !important;
}

html.light #site-org-name {
  color: #0f172a !important;
}

html.light [id^="modal-"] > div,
html.light [role="dialog"] > div,
html.light .modal-glass-container,
html.light #dropdown-header-tools {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15) !important;
}

html.light #dropdown-header-tools button {
  color: #1e293b !important;
}

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

html.light #dropdown-header-tools kbd,
html.light #dropdown-header-tools .text-slate-400,
html.light #dropdown-header-tools .text-slate-500 {
  color: #64748b !important;
}

html.light #dropdown-header-tools .border-slate-800,
html.light #dropdown-header-tools .bg-slate-800,
html.light #dropdown-header-tools .h-px {
  background-color: #e2e8f0 !important;
}

html.light .nav-popover,
html.light #nav-drills-popover,
html.light #nav-progress-popover,
html.light #dropdown-solver-ai-tools,
html.light #drill-mistakes-dropdown,
html.light #sat-vocab-hover-popover,
html.light #annotation-note-popover {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Light Mode Popover Menu Items Contrast */
html.light #nav-drills-popover button,
html.light #nav-progress-popover button,
html.light #dropdown-header-tools button,
html.light #dropdown-solver-ai-tools button,
html.light #drill-mistakes-dropdown button {
  color: #1e293b !important;
}

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

html.light #nav-drills-popover button .text-slate-400,
html.light #nav-progress-popover button .text-slate-400,
html.light #dropdown-solver-ai-tools button .text-slate-400 {
  color: #64748b !important;
}

html.light #nav-progress-popover .border-slate-800,
html.light #nav-drills-popover .border-slate-800 {
  border-color: #e2e8f0 !important;
}

/* Premium tactile card interactions */
.dash-tile {
  background-color: var(--org-card-bg, #0f172a) !important;
  border: 1px solid #1e293b !important;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
.dash-tile:hover {
  border-color: #334155 !important;
}

/* Sub-card flat surfaces */
.dash-subcard {
  background-color: var(--org-card-bg, #0f172a) !important;
  border: 1px solid #1a2234 !important;
  border-radius: 0.875rem !important;
}

/* ==========================================================================
   TABULAR NUMBERS, CLEAN TYPOGRAPHY & STRICT MONOSPACE FOR CODE BLOCKS
   ========================================================================== */

/* 1. All tabular data, scores, timers, percentages, counters, and statistics */
table,
th,
td,
tr,
thead,
tbody,
tfoot,
.tabular-nums,
[class*="tabular-nums"],
[id*="timer"],
[class*="timer"],
[id*="score"],
[class*="score"],
[id*="counter"],
[class*="counter"],
[id*="count-"],
[id*="-count"],
[id*="stat-"],
[class*="stat-"],
[id*="kpi-"],
[id*="kpi"],
[id*="accuracy"],
[id*="-acc"],
[class*="accuracy"],
[id*="pct"],
[id*="progress-text"],
[id*="streak"],
[id*="pace"],
[id*="metric"],
#exam-timer-container,
#exam-timer-display,
#rush-live-timer,
#rush-live-score,
#rush-final-score,
#rush-final-accuracy,
#checkout-countdown-timer,
#match-game-timer,
#q-pace-badge,
#bottom-q-counter,
#grid-in-char-counter,
#grid-in-preview-value,
#grid-in-input,
#scratchpad-counter,
#scratchpad-target-badge,
#cfg-time-preview,
#qdrill-estimate-badge,
#cram-total-badge,
#complete-answered-count,
#complete-unanswered-count,
#complete-flagged-count,
#complete-score-est,
#complete-accuracy-val,
#ad-trans-score,
#ad-trans-acc,
#ad-res-scaled-score,
#ad-res-m1-score,
#ad-res-m2-score,
#report-stat-score,
#report-stat-accuracy,
#report-stat-pace,
#report-xp-badge,
#report-streak-badge,
#report-mistakes-count,
#pa-metric-word-count,
#pa-metric-read-time,
#pa-metric-lexile,
#pa-metric-lexile-range,
#pa-metric-vocab-count,
#passage-lexile-badge-pill,
#passage-word-count-badge,
#passage-font-size-label,
#daily-report-timestamp,
#session-report-printable-timestamp,
#daily-xp-progress-text,
#prof-total-est,
#prof-total-ans,
#prof-acc,
#prof-vocab-mastered,
#prof-saved-count,
#prof-countdown-days,
#prof-countdown-hours,
#prof-countdown-mins,
#prof-countdown-secs,
#prof-daily-goal-val,
#prof-daily-pct,
#prof-weekly-goal-val,
#prof-total-xp,
#prof-badges-count,
#profile-target-slider-label,
#tax-stat-total-q,
#tax-stat-rw-q,
#tax-stat-math-q,
#tax-stat-acc,
#error-stat-total,
#error-stat-active,
#error-stat-resolved,
#error-stat-rate,
#saved-stat-total,
#saved-stat-math,
#saved-stat-rw,
#saved-stat-solved,
#raw-conv-total-score,
#raw-conv-rw-sub,
#raw-conv-math-sub,
#daily-kpi-score,
#daily-kpi-time,
#daily-kpi-accuracy,
#daily-kpi-vocab,
#adm-kpi-users-total,
#adm-kpi-questions-total,
#adm-kpi-sessions-total,
#adm-kpi-incidents-total,
#adm-risk-kpi-critical,
#adm-risk-kpi-bot,
#adm-risk-kpi-tab,
#adm-risk-kpi-leak,
.pill-badge,
kbd,
samp {
  font-family: var(--org-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}

/* 2. Fallback protection: ensure no rogue .font-mono applies monospace to UI, timers, badges, questions or numbers */
.font-mono:not(pre):not(pre code):not(code.code-block),
[class*="font-mono"]:not(pre):not(pre code):not(code.code-block) {
  font-family: var(--org-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}

/* 3. Code snippets strictly retain monospace inside <pre><code> */
pre,
pre code,
pre code *,
code.code-block,
.code-block {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-feature-settings: normal !important;
}

/* Modern clean scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #030712;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* ---------- s. Passage Font Scaling (A- / A+) Override ----------
   Ensure hardcoded Tailwind text-[15px] classes do not override the parent inline fontSize */
#passage-container, #passage-container .passage-body, #passage-container p {
  font-size: inherit !important;
}

/* ==========================================================================
   t. SAT DRILLS WHITE-LABEL & ACCESSIBILITY SYSTEM
   1. Primary Brand: Vibrant Crimson Red #dc2626 (Red-600), Hover #b91c1c (Red-700)
   2. Surfaces: Deep Slate #090d16, Card Surface #0f172a (Zero Muddy Overlays)
   3. Buttons & Active Pills: Pure #dc2626 with Crisp White #ffffff (WCAG AA)
   4. Accent Borders & Rings: Pure #dc2626
   ========================================================================== */

html[data-org="sat-drills"],
html.org-sat-drills,
body.org-sat-drills {
  --org-primary: #dc2626 !important;
  --org-primary-hover: #b91c1c !important;
  --org-primary-rgb: 220, 38, 38 !important;
  --org-primary-hover-rgb: 185, 28, 28 !important;
  --org-primary-50-rgb: 254, 242, 242 !important;
  --org-primary-100-rgb: 254, 226, 226 !important;
  --org-primary-200-rgb: 254, 202, 202 !important;
  --org-primary-300-rgb: 252, 165, 165 !important;
  --org-primary-400-rgb: 248, 113, 113 !important;
  --org-primary-500-rgb: 239, 68, 68 !important;
  --org-primary-600-rgb: 220, 38, 38 !important;
  --org-primary-700-rgb: 185, 28, 28 !important;
  --org-primary-800-rgb: 153, 27, 27 !important;
  --org-primary-900-rgb: 127, 29, 29 !important;
  --org-primary-950-rgb: 69, 10, 10 !important;
  --org-primary-600: #dc2626 !important;
  --org-primary-700: #b91c1c !important;
  --org-dark-bg: #090d16 !important;
  --org-dark-bg-rgb: 9, 13, 22 !important;
  --org-card-bg: #0f172a !important;
  --org-card-bg-rgb: 15, 23, 42 !important;
}

/* SAT Drills Global Surfaces (Dark Mode): Deep Slate #090d16 & Liquid Glass Tiles */
html:not(.light)[data-org="sat-drills"] body,
html:not(.light).org-sat-drills body,
html.dark[data-org="sat-drills"] body,
html.dark.org-sat-drills body,
html:not(.light)[data-org="sat-drills"] .dash-bg-grid,
html:not(.light).org-sat-drills .dash-bg-grid {
  background-color: #090d16 !important;
  background-image: none !important;
}

html:not(.light)[data-org="sat-drills"] .dash-tile,
html:not(.light).org-sat-drills .dash-tile,
html:not(.light)[data-org="sat-drills"] .dash-hero-mesh,
html:not(.light).org-sat-drills .dash-hero-mesh,
html:not(.light)[data-org="sat-drills"] .dash-subcard,
html:not(.light).org-sat-drills .dash-subcard,
html:not(.light)[data-org="sat-drills"] .card,
html:not(.light).org-sat-drills .card,
html:not(.light)[data-org="sat-drills"] .sub-card,
html:not(.light).org-sat-drills .sub-card,
html:not(.light)[data-org="sat-drills"] #landing-action-unified-card,
html:not(.light).org-sat-drills #landing-action-unified-card,
html:not(.light)[data-org="sat-drills"] #dash-goal-countdown-widget,
html:not(.light).org-sat-drills #dash-goal-countdown-widget,
html:not(.light)[data-org="sat-drills"] #dash-error-notebook-hub,
html:not(.light).org-sat-drills #dash-error-notebook-hub,
html:not(.light)[data-org="sat-drills"] .dash-tile-blue,
html:not(.light).org-sat-drills .dash-tile-blue,
html:not(.light)[data-org="sat-drills"] .dash-tile-purple,
html:not(.light).org-sat-drills .dash-tile-purple,
html:not(.light)[data-org="sat-drills"] .dash-tile-rose,
html:not(.light).org-sat-drills .dash-tile-rose,
html:not(.light)[data-org="sat-drills"] .dash-tile-amber,
html:not(.light).org-sat-drills .dash-tile-amber,
html:not(.light)[data-org="sat-drills"] .dash-tile-cyan,
html:not(.light).org-sat-drills .dash-tile-cyan,
html:not(.light)[data-org="sat-drills"] .dash-tile-emerald,
html:not(.light).org-sat-drills .dash-tile-emerald {
  background-color: rgba(15, 23, 42, 0.8) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 8px 25px -4px rgba(0, 0, 0, 0.4) !important;
  transform: translateZ(0);
}

/* ==========================================================================
   SAT DRILLS LIGHT MODE SUITE: PRISTINE CONTRAST & LIQUID FROSTED SURFACES
   Fixes black-on-black dashboard text and missing white-label surfaces
   ========================================================================== */
html.light[data-org="sat-drills"],
html.light.org-sat-drills,
html.light[data-org="sat-drills"] body,
html.light.org-sat-drills body,
html.light[data-org="sat-drills"] #view-landing,
html.light.org-sat-drills #view-landing,
html.light[data-org="sat-drills"] .dash-bg-grid,
html.light.org-sat-drills .dash-bg-grid {
  background-color: #f8fafc !important;
  background-image: none !important;
  color: #0f172a !important;
}

html.light[data-org="sat-drills"] .dash-tile,
html.light.org-sat-drills .dash-tile,
html.light[data-org="sat-drills"] .dash-hero-mesh,
html.light.org-sat-drills .dash-hero-mesh,
html.light[data-org="sat-drills"] .dash-subcard,
html.light.org-sat-drills .dash-subcard,
html.light[data-org="sat-drills"] .card,
html.light.org-sat-drills .card,
html.light[data-org="sat-drills"] .sub-card,
html.light.org-sat-drills .sub-card,
html.light[data-org="sat-drills"] .bento-card,
html.light.org-sat-drills .bento-card,
html.light[data-org="sat-drills"] #landing-action-unified-card,
html.light.org-sat-drills #landing-action-unified-card,
html.light[data-org="sat-drills"] #dash-ai-next-action,
html.light.org-sat-drills #dash-ai-next-action,
html.light[data-org="sat-drills"] #dash-goal-countdown-widget,
html.light.org-sat-drills #dash-goal-countdown-widget,
html.light[data-org="sat-drills"] #dash-error-notebook-hub,
html.light.org-sat-drills #dash-error-notebook-hub,
html.light[data-org="sat-drills"] .dash-tile-blue,
html.light.org-sat-drills .dash-tile-blue,
html.light[data-org="sat-drills"] .dash-tile-purple,
html.light.org-sat-drills .dash-tile-purple,
html.light[data-org="sat-drills"] .dash-tile-rose,
html.light.org-sat-drills .dash-tile-rose,
html.light[data-org="sat-drills"] .dash-tile-amber,
html.light.org-sat-drills .dash-tile-amber,
html.light[data-org="sat-drills"] .dash-tile-cyan,
html.light.org-sat-drills .dash-tile-cyan,
html.light[data-org="sat-drills"] .dash-tile-emerald,
html.light.org-sat-drills .dash-tile-emerald {
  background-color: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(254, 202, 202, 0.6) !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.95), 0 8px 24px -4px rgba(220, 38, 38, 0.05) !important;
  transform: translateZ(0);
}

html.light[data-org="sat-drills"] #dash-user-name,
html.light.org-sat-drills #dash-user-name {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: none !important;
}

html.light[data-org="sat-drills"] h1,
html.light[data-org="sat-drills"] h2,
html.light[data-org="sat-drills"] h3,
html.light[data-org="sat-drills"] h4,
html.light.org-sat-drills h1,
html.light.org-sat-drills h2,
html.light.org-sat-drills h3,
html.light.org-sat-drills h4 {
  color: #0f172a !important;
}

html.light[data-org="sat-drills"] p,
html.light.org-sat-drills p {
  color: #334155 !important;
}

html.light[data-org="sat-drills"] .text-slate-400,
html.light.org-sat-drills .text-slate-400 {
  color: #64748b !important;
}

html.light[data-org="sat-drills"] .text-slate-300,
html.light.org-sat-drills .text-slate-300 {
  color: #475569 !important;
}

html.light[data-org="sat-drills"] .text-slate-200,
html.light.org-sat-drills .text-slate-200 {
  color: #1e293b !important;
}

/* SAT Drills Hero Active Session in Light Mode */
html.light[data-org="sat-drills"] #landing-active-session-banner,
html.light.org-sat-drills #landing-active-session-banner {
  background-color: #fff5f5 !important;
  border-color: #f87171 !important;
  box-shadow: 0 4px 15px -3px rgba(220, 38, 38, 0.1) !important;
}

html.light[data-org="sat-drills"] #landing-active-session-banner h3,
html.light.org-sat-drills #landing-active-session-banner h3 {
  color: #991b1b !important;
}

/* SAT Drills Secondary / Sub-tiles Light Mode */
html.light[data-org="sat-drills"] .bg-slate-950,
html.light.org-sat-drills .bg-slate-950,
html.light[data-org="sat-drills"] .bg-slate-900:not(.btn-theme-primary):not(button.bg-blue-600),
html.light.org-sat-drills .bg-slate-900:not(.btn-theme-primary):not(button.bg-blue-600) {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light[data-org="sat-drills"] select,
html.light.org-sat-drills select,
html.light[data-org="sat-drills"] input,
html.light.org-sat-drills input {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* SAT Drills Buttons & Active Navigation Pills: Pure Crimson Red #dc2626 */
html[data-org="sat-drills"] #global-navbar .nav-btn.is-active,
html[data-org="sat-drills"] #global-navbar .nav-btn.bg-blue-600,
html.org-sat-drills #global-navbar .nav-btn.is-active,
html.org-sat-drills #global-navbar .nav-btn.bg-blue-600,
html[data-org="sat-drills"] .nav-btn.is-active,
html.org-sat-drills .nav-btn.is-active,
html[data-org="sat-drills"] .nav-btn.bg-blue-600,
html.org-sat-drills .nav-btn.bg-blue-600,
html[data-org="sat-drills"] .btn-theme-primary,
html.org-sat-drills .btn-theme-primary,
html[data-org="sat-drills"] .btn-primary-theme,
html.org-sat-drills .btn-primary-theme,
html[data-org="sat-drills"] button.bg-blue-600,
html.org-sat-drills button.bg-blue-600,
html[data-org="sat-drills"] a.bg-blue-600,
html.org-sat-drills a.bg-blue-600,
html[data-org="sat-drills"] #btn-check-answer,
html.org-sat-drills #btn-check-answer,
html[data-org="sat-drills"] #btn-login-submit,
html.org-sat-drills #btn-login-submit,
html[data-org="sat-drills"] #btn-reg-submit,
html.org-sat-drills #btn-reg-submit,
html[data-org="sat-drills"] #btn-drill-filtered-mistakes,
html.org-sat-drills #btn-drill-filtered-mistakes,
html[data-org="sat-drills"] #btn-rush-time-60,
html.org-sat-drills #btn-rush-time-60,
html[data-org="sat-drills"] #btn-rush-sec-all,
html.org-sat-drills #btn-rush-sec-all,
html[data-org="sat-drills"] #btn-billing-monthly,
html.org-sat-drills #btn-billing-monthly,
html[data-org="sat-drills"] #tax-filter-all,
html.org-sat-drills #tax-filter-all,
html[data-org="sat-drills"] #diff-sec-all,
html.org-sat-drills #diff-sec-all,
html[data-org="sat-drills"] #tab-range-today,
html.org-sat-drills #tab-range-today,
html[data-org="sat-drills"] #vocab-tab-btn-srs,
html.org-sat-drills #vocab-tab-btn-srs,
html[data-org="sat-drills"] #adm-btn-tab-overview,
html.org-sat-drills #adm-btn-tab-overview,
html[data-org="sat-drills"] .btn-shimmer,
html.org-sat-drills .btn-shimmer,
html[data-org="sat-drills"] #modal-auth #auth-tab-login.bg-blue-600,
html.org-sat-drills #modal-auth #auth-tab-login.bg-blue-600,
html[data-org="sat-drills"] #modal-auth #auth-tab-register.bg-blue-600,
html.org-sat-drills #modal-auth #auth-tab-register.bg-blue-600,
html[data-org="sat-drills"] #modal-auth .auth-tab-btn.bg-blue-600,
html.org-sat-drills #modal-auth .auth-tab-btn.bg-blue-600,
html[data-org="sat-drills"] #modal-auth .auth-tab-btn.is-active,
html.org-sat-drills #modal-auth .auth-tab-btn.is-active {
  background-color: #dc2626 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #b91c1c !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4) !important;
}

html[data-org="sat-drills"] #global-navbar .nav-btn.is-active *,
html[data-org="sat-drills"] #global-navbar .nav-btn.bg-blue-600 *,
html.org-sat-drills #global-navbar .nav-btn.is-active *,
html.org-sat-drills #global-navbar .nav-btn.bg-blue-600 *,
html[data-org="sat-drills"] .nav-btn.is-active *,
html.org-sat-drills .nav-btn.is-active *,
html[data-org="sat-drills"] .btn-theme-primary *,
html.org-sat-drills .btn-theme-primary *,
html[data-org="sat-drills"] .btn-primary-theme *,
html.org-sat-drills .btn-primary-theme *,
html[data-org="sat-drills"] button.bg-blue-600 *,
html.org-sat-drills button.bg-blue-600 *,
html[data-org="sat-drills"] #btn-check-answer *,
html.org-sat-drills #btn-check-answer * {
  color: #ffffff !important;
}

/* SAT Drills Hover States: Crimson Red-700 #b91c1c (WCAG AA compliant: 6.47:1) */
html[data-org="sat-drills"] #global-navbar .nav-btn.is-active:hover,
html[data-org="sat-drills"] #global-navbar .nav-btn.bg-blue-600:hover,
html.org-sat-drills #global-navbar .nav-btn.is-active:hover,
html.org-sat-drills #global-navbar .nav-btn.bg-blue-600:hover,
html[data-org="sat-drills"] .nav-btn.is-active:hover,
html.org-sat-drills .nav-btn.is-active:hover,
html[data-org="sat-drills"] .nav-btn.bg-blue-600:hover,
html.org-sat-drills .nav-btn.bg-blue-600:hover,
html[data-org="sat-drills"] .btn-theme-primary:hover,
html.org-sat-drills .btn-theme-primary:hover,
html[data-org="sat-drills"] .btn-primary-theme:hover,
html.org-sat-drills .btn-primary-theme:hover,
html[data-org="sat-drills"] button.bg-blue-600:hover,
html.org-sat-drills button.bg-blue-600:hover,
html[data-org="sat-drills"] a.bg-blue-600:hover,
html.org-sat-drills a.bg-blue-600:hover,
html[data-org="sat-drills"] #btn-check-answer:hover,
html.org-sat-drills #btn-check-answer:hover,
html[data-org="sat-drills"] #btn-login-submit:hover,
html.org-sat-drills #btn-login-submit:hover,
html[data-org="sat-drills"] #btn-reg-submit:hover,
html.org-sat-drills #btn-reg-submit:hover,
html[data-org="sat-drills"] #btn-drill-filtered-mistakes:hover,
html.org-sat-drills #btn-drill-filtered-mistakes:hover,
html[data-org="sat-drills"] .btn-shimmer:hover,
html.org-sat-drills .btn-shimmer:hover {
  background-color: #b91c1c !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #991b1b !important;
  filter: none !important;
  box-shadow: 0 4px 12px rgba(185, 28, 28, 0.45) !important;
}

/* SAT Drills Accent Borders & Focus Visible: Pure Crimson Red #dc2626 */
html[data-org="sat-drills"] .border-org-primary,
html.org-sat-drills .border-org-primary,
html[data-org="sat-drills"] .border-blue-600,
html.org-sat-drills .border-blue-600,
html[data-org="sat-drills"] .border-blue-500,
html.org-sat-drills .border-blue-500 {
  border-color: #dc2626 !important;
}

html[data-org="sat-drills"] :focus-visible,
html.org-sat-drills :focus-visible {
  outline: 2px solid #dc2626 !important;
  outline-offset: 2px !important;
}

/* SAT Drills Navigation Drawer Active State */
html[data-org="sat-drills"] .mnav-item.is-active,
html.org-sat-drills .mnav-item.is-active {
  background-color: rgba(220, 38, 38, 0.18) !important;
  color: #f87171 !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   EXAM SOLVER & QUESTION INTERFACE LIGHT MODE HIGH-CONTRAST AUDIT (WCAG AA)
   ========================================================================== */

/* Dynamic Graph Cards & Figures in Light Mode */
html.light .sat-graph-card,
html.light .math-question-figure {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.06) !important;
  color: #0f172a !important;
}

html.light .sat-graph-card text,
html.light .sat-graph-card tspan {
  fill: #0f172a !important;
}

html.light .sat-graph-card text[fill="#94a3b8"],
html.light .sat-graph-card text[fill="#64748b"],
html.light .sat-graph-card text[fill="#f8fafc"] {
  fill: #334155 !important;
}

html.light .sat-graph-card line[stroke="rgba(51, 65, 85, 0.35)"],
html.light .sat-graph-card line[stroke="#64748b"],
html.light .sat-graph-card line[stroke="#94a3b8"] {
  stroke: #cbd5e1 !important;
}

/* 1. Solver Header & Elements */
html.light #view-question-solver {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html.light #view-question-solver > header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* Header badges high contrast */
html.light #solver-org-badge {
  background-color: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #93c5fd !important;
}

html.light #q-section-badge {
  background-color: #eff6ff !important;
  color: #1e40af !important;
  border: 1px solid #bfdbfe !important;
  font-weight: 700 !important;
}

html.light #q-code-badge {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

html.light #q-diff-badge,
html.light #q-diff-badge[data-difficulty="medium"] {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fcd34d !important;
}
html.light #q-diff-badge[data-difficulty="easy"] {
  background-color: #d1fae5 !important;
  color: #065f46 !important;
  border: 1px solid #6ee7b7 !important;
}
html.light #q-diff-badge[data-difficulty="hard"] {
  background-color: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #fca5a5 !important;
}

html.light #solver-mode-badge {
  background-color: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #6ee7b7 !important;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.15) !important;
}

/* Header buttons in light mode */
html.light #view-question-solver header button:not(#solver-mode-badge):not(#btn-session-finish):not(.bg-rose-600):not(.bg-gradient-to-r) {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}
html.light #view-question-solver header button:not(#solver-mode-badge):not(#btn-session-finish):not(.bg-rose-600):not(.bg-gradient-to-r):hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* Submit button (Nộp Bài) in light mode - keep crisp vibrant rose background & white text */
html.light #btn-session-finish,
html.light #view-question-solver header button#btn-session-finish,
html.light button.bg-rose-600#btn-session-finish {
  background-color: #e11d48 !important; /* rose-600 */
  border-color: #be123c !important;
  color: #ffffff !important;
}
html.light #btn-session-finish:hover,
html.light #view-question-solver header button#btn-session-finish:hover {
  background-color: #f43f5e !important; /* rose-500 */
  border-color: #e11d48 !important;
  color: #ffffff !important;
}
html.light #btn-session-finish *,
html.light #view-question-solver header button#btn-session-finish * {
  color: #ffffff !important;
}

/* AI Tools dropdown button in header */
html.light #btn-solver-ai-dropdown {
  background-color: #f5f3ff !important;
  border-color: #c4b5fd !important;
  color: #6d28d9 !important;
}
html.light #btn-solver-ai-dropdown:hover {
  background-color: #ede9fe !important;
  color: #5b21b6 !important;
}

/* 2. Timer Container */
html.light #exam-timer-container {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  color: #0f172a !important;
}
html.light #exam-timer-container:hover {
  border-color: #94a3b8 !important;
}
html.light #exam-timer-display {
  color: #0f172a !important;
  font-weight: 900 !important;
}
html.light #exam-timer-sep {
  color: #94a3b8 !important;
}
html.light #btn-timer-toggle {
  color: #475569 !important;
}
html.light #btn-timer-toggle:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* 3. Passage Pane */
html.light #left-pane {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-right: 1px solid #e2e8f0 !important;
  font-family: var(--org-font-family, 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html.light #left-pane * {
  color: #0f172a;
}
html.light #passage-container,
html.light .passage-body {
  color: #0f172a !important;
}
html.light #passage-container p,
html.light .passage-body p {
  color: #0f172a !important;
  line-height: 1.75 !important;
}
html.light #split-drag-handle {
  background-color: #e2e8f0 !important;
}
html.light #split-drag-handle:hover {
  background-color: #2563eb !important;
}
html.light #split-drag-handle div {
  background-color: #94a3b8 !important;
}

/* 4. Question Pane */
html.light #right-pane {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  font-family: var(--org-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
}
html.light #question-prompt-box {
  color: #0f172a !important;
  font-weight: 600 !important;
  line-height: 1.65 !important;
}
html.light #question-prompt-box * {
  color: #0f172a;
}
html.light #solver-ai-quick-strip {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* 5. Option Items (.option-item) Specific Light Mode Overrides */
/* Unselected (default) */
html.light .option-item,
html.light .option-item.is-unselected,
html.light .option-item.option-unselected {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}
html.light .option-item .option-text,
html.light .option-item.is-unselected .option-text,
html.light .option-item.option-unselected .option-text {
  color: #0f172a !important;
}
html.light .option-item .option-bubble,
html.light .option-item .w-7.h-7,
html.light .option-item .w-8.h-8 {
  background-color: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
}

/* Hover */
html.light .option-item:hover,
html.light .option-item.is-unselected:hover,
html.light .option-item.option-unselected:hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}
html.light .option-item:hover .option-bubble,
html.light .option-item:hover .w-7.h-7,
html.light .option-item:hover .w-8.h-8 {
  background-color: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* Selected */
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: #1e3a8a !important;
}
html.light .option-item.is-selected,
html.light .option-item.option-selected,
html.light .option-item[aria-checked="true"]:not(.is-correct):not(.is-incorrect) {
  background: #eff6ff !important;
  border: 2px solid #2563eb !important;
  box-shadow: 0 0 0 1px #2563eb, 0 4px 12px rgba(37, 99, 235, 0.12) !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 *,
html.light .option-item[aria-checked="true"]:not(.is-correct):not(.is-incorrect) .option-text,
html.light .option-item[aria-checked="true"]:not(.is-correct):not(.is-incorrect) .option-text * {
  color: #1e3a8a !important;
  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 *,
html.light .option-item[aria-checked="true"]:not(.is-correct):not(.is-incorrect) .w-7.h-7,
html.light .option-item[aria-checked="true"]:not(.is-correct):not(.is-incorrect) .w-8.h-8 {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;
}

/* Strikethrough */
html.light .option-item.strikethrough-option {
  opacity: 0.55 !important;
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  border-style: dashed !important;
}
html.light .option-item.strikethrough-option .option-text {
  text-decoration: line-through 2px #94a3b8 !important;
  color: #94a3b8 !important;
}
html.light .option-item.strikethrough-option .option-bubble,
html.light .option-item.strikethrough-option .w-7.h-7,
html.light .option-item.strikethrough-option .w-8.h-8 {
  opacity: 0.6 !important;
  border-color: #94a3b8 !important;
  color: #94a3b8 !important;
  background-color: #f1f5f9 !important;
}

/* Correct (review mode / checked answer) */
html.light .option-item.is-correct,
html.light .option-item.option-correct,
html.light .option-item.bg-emerald-950\/40 {
  background: #f0fdf4 !important;
  border: 2px solid #16a34a !important;
  color: #166534 !important;
  box-shadow: 0 0 0 1px #16a34a, 0 4px 12px rgba(22, 163, 74, 0.12) !important;
}
html.light .option-item.is-correct .option-text,
html.light .option-item.option-correct .option-text,
html.light .option-item.bg-emerald-950\/40 .option-text {
  color: #166534 !important;
  font-weight: 600 !important;
}
html.light .option-item.is-correct .option-bubble,
html.light .option-item.option-correct .option-bubble,
html.light .option-item.bg-emerald-950\/40 .option-bubble,
html.light .option-item.bg-emerald-950\/40 .w-7.h-7,
html.light .option-item.bg-emerald-950\/40 .w-8.h-8 {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
  color: #ffffff !important;
}
html.light .option-badge-correct {
  background-color: #dcfce7 !important;
  border-color: #86efac !important;
  color: #166534 !important;
}

/* Incorrect (review mode / checked answer) */
html.light .option-item.is-incorrect,
html.light .option-item.option-incorrect,
html.light .option-item.bg-rose-950\/40 {
  background: #fef2f2 !important;
  border: 2px solid #dc2626 !important;
  color: #991b1b !important;
  box-shadow: 0 0 0 1px #dc2626, 0 4px 12px rgba(220, 38, 38, 0.12) !important;
}
html.light .option-item.is-incorrect .option-text,
html.light .option-item.option-incorrect .option-text,
html.light .option-item.bg-rose-950\/40 .option-text {
  color: #991b1b !important;
  font-weight: 600 !important;
}
html.light .option-item.is-incorrect .option-bubble,
html.light .option-item.option-incorrect .option-bubble,
html.light .option-item.bg-rose-950\/40 .option-bubble,
html.light .option-item.bg-rose-950\/40 .w-7.h-7,
html.light .option-item.bg-rose-950\/40 .w-8.h-8 {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}
html.light .option-badge-incorrect {
  background-color: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
}

/* Muted options after checking */
html.light .option-item.is-muted,
html.light .option-item.option-muted {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  opacity: 0.55 !important;
}
html.light .option-item.is-muted .option-text,
html.light .option-item.option-muted .option-text {
  color: #64748b !important;
}

/* 6. Student-Produced Response (SPR / Math grid-in) */
html.light #grid-in-container {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}
html.light #grid-in-input {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html.light #grid-in-input:focus {
  border-color: #2563eb !important;
}
html.light #grid-in-char-counter {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}
html.light #grid-in-preview-banner {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
html.light #grid-in-preview-label {
  color: #64748b !important;
}
html.light #grid-in-preview-value {
  color: #0f172a !important;
}
html.light #grid-in-status-badge {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}
html.light #grid-in-rules-box {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}
html.light #grid-in-rules-box .text-slate-400 {
  color: #475569 !important;
}

/* 7. Footer Bar (Active Exam Only) */
html.light #view-question-solver:not(.hidden) > footer,
html.light #view-question-solver:not(.hidden) footer {
  background-color: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05) !important;
}
html.light #view-question-solver footer button#btn-prev-q,
html.light #view-question-solver footer button[onclick="openQuestionGridModal()"] {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
html.light #view-question-solver footer button#btn-prev-q:hover,
html.light #view-question-solver footer button[onclick="openQuestionGridModal()"]:hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}
html.light #bottom-q-counter {
  color: #0f172a !important;
  font-weight: 700 !important;
}
html.light #q-pace-badge {
  background-color: #ecfdf5 !important;
  color: #065f46 !important;
  border-color: #a7f3d0 !important;
}

/* Solution Panel in light mode */
html.light #solution-panel {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}
html.light #solver-mistake-box {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
html.light .solver-tag-btn {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}
html.light .solver-tag-btn:hover {
  background-color: #f1f5f9 !important;
}
html.light #solver-note-input {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* ==========================================================================
   DEDICATED EXAM RESULT VIEW LIGHT MODE HARMONIZATION
   ========================================================================== */
html.light #view-exam-result {
  color: #0f172a !important;
}

html.light #view-exam-result .bg-slate-900 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.05) !important;
}

html.light #view-exam-result .bg-slate-950,
html.light #view-exam-result .bg-slate-950\/70,
html.light #view-exam-result .bg-slate-950\/80,
html.light #view-exam-result .bg-slate-950\/90 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light #view-exam-result .text-white {
  color: #0f172a !important;
}

html.light #view-exam-result .text-slate-200,
html.light #view-exam-result .text-slate-300 {
  color: #1e293b !important;
}

html.light #view-exam-result .text-slate-400 {
  color: #475569 !important;
}

html.light #view-exam-result button.bg-slate-800 {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

html.light #view-exam-result button.bg-slate-800:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* ==========================================================================
   GLOBAL MOBILE AUDIT & TOUCH ERGONOMICS POLISH (< 1024PX)
   1. Root viewport & dynamic safe-area insets
   2. Zero horizontal wobble (overflow-x: hidden on body & #main-content)
   3. Minimum 44px thumb-friendly touch targets across all interactive controls
   4. Strict 16px font-size anti-zoom rules on inputs/selects/textareas
   5. Elimination of phantom margins/paddings from legacy mobile bars
   ========================================================================== */

html {
  max-width: 100vw !important;
}

body {
  max-width: 100vw !important;
  width: 100% !important;
  min-height: 100svh;
  min-height: 100dvh;
}

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

@media (max-width: 1023.98px) {
  /* Prevent any horizontal wobble or scrolling on mobile while preserving sticky positioning */
  html,
  body,
  #main-content {
    max-width: 100vw !important;
  }

  /* Clear legacy mobile bar padding/margins completely */
  #main-content {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Universal minimum 44px touch targets on mobile (<1024px) */
  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,
  .suite-filter-tab-btn,
  .cal-tab-btn,
  .lifecycle-tab-btn,
  .solver-tag-btn,
  .keypad-btn,
  .auth-tab-btn,
  .auth-input-field,
  .btn-theme-primary,
  .btn-primary-theme,
  .org-btn-primary,
  #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;
  }

  /* Navigation & action links alignment */
  a.nav-btn,
  a.btn,
  a[role="button"],
  .mnav-item {
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Strict anti-zoom font-size (>= 16px) on iOS / Android mobile */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea,
  .auth-input-field,
  #grid-in-input,
  #solver-note-input,
  #ai-chat-input,
  #scratchpad-textarea {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  /* Safe-area padding at viewport bottom for mobile devices */
  #mobile-nav-panel {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Keypad thumb ergonomics */
  .keypad-btn {
    min-height: 48px !important;
  }
}

/* Email Notification Toggle Switch Styles */
.email-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.email-toggle-track {
  width: 44px;
  height: 24px;
  background-color: #1e293b;
  border-radius: 9999px;
  position: relative;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  border: 1px solid #334155;
  cursor: pointer;
}
.email-toggle-thumb {
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  border-radius: 9999px;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.email-toggle-input:checked + .email-toggle-track {
  background-color: #2563eb !important;
  border-color: #3b82f6 !important;
}
.email-toggle-input:checked + .email-toggle-track .email-toggle-thumb {
  transform: translateX(20px) !important;
}
.email-toggle-input:focus-visible + .email-toggle-track {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
html.light .email-toggle-track {
  background-color: #cbd5e1;
  border-color: #94a3b8;
}
html.light .email-toggle-input:checked + .email-toggle-track {
  background-color: #2563eb !important;
  border-color: #1d4ed8 !important;
}

/* AI Tutor Mobile Fullscreen Modal Overrides */
@media (max-width: 767.98px) {
  #ai-tutor-drawer,
  html:not(.light) #ai-tutor-drawer,
  html.dark #ai-tutor-drawer {
    border-radius: 0px !important;
    border: none !important;
    box-shadow: none !important;
  }
}

/* ==========================================================================
   MASTER LIGHT MODE COMPREHENSIVE CONTRAST & ACCESSIBILITY ENFORCEMENT
   1. All Views, Panels, Cards, Modals default to Dark Slate (#0f172a / #1e293b)
   2. All .text-white / text-slate-100/200/300 on light surfaces resolve to Dark Slate
   3. All Tables (thead, tbody, tr, th, td) render crisp dark typography & light hover
   4. All Inputs, Selects, Textareas render dark slate text with white backgrounds
   5. Math Expressions (KaTeX) render dark slate except inside solid colored buttons
   6. ONLY Solid Filled Action Buttons & Solid Badges retain crisp white text
   ========================================================================== */

/* 1. All Views, Surfaces & Containers */
html.light,
html.light body,
html.light #view-landing,
html.light #view-test_suites,
html.light #view-taxonomy_drills,
html.light #view-difficulty_drills,
html.light #view-challenge_drills,
html.light #view-question-solver,
html.light #view-exam-result,
html.light #view-flashcards,
html.light #view-explorer,
html.light #view-error_log,
html.light #view-daily-report,
html.light #view-analytics,
html.light #view-student_class,
html.light #view-teacher,
html.light #view-org_admin,
html.light #view-admin,
html.light #view-subscription,
html.light #view-profile,
html.light #view-rush,
html.light #view-masterclass,
html.light #view-math-formulas,
html.light [id^="view-"] {
  color: #0f172a !important;
  background-color: #f8fafc !important;
}

/* 2. All Cards, Panels, Tiles, Drawers, Boxes */
html.light .card,
html.light .sub-card,
html.light .dash-tile,
html.light .dash-hero-mesh,
html.light .dash-subcard,
html.light .bento-card,
html.light .glass-panel,
html.light .explorer-q-card,
html.light .question-card-item,
html.light .test-suite-card,
html.light .adm-cockpit-card,
html.light .adm-stat-card,
html.light .adm-table-wrap,
html.light .pricing-card,
html.light [class*="bg-slate-900"],
html.light [class*="bg-slate-950"] {
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

html.light .card h1, html.light .card h2, html.light .card h3, html.light .card h4, html.light .card h5, html.light .card h6,
html.light .sub-card h1, html.light .sub-card h2, html.light .sub-card h3, html.light .sub-card h4,
html.light .dash-tile h1, html.light .dash-tile h2, html.light .dash-tile h3, html.light .dash-tile h4,
html.light [id^="view-"] h1:not(.text-transparent),
html.light [id^="view-"] h2:not(.text-transparent),
html.light [id^="view-"] h3:not(.text-transparent),
html.light [id^="view-"] h4:not(.text-transparent),
html.light [id^="view-"] h5:not(.text-transparent),
html.light [id^="view-"] h6:not(.text-transparent) {
  color: #0f172a !important;
}

/* 3. Global Resolution of White / Pale Text on Light Mode Surfaces */
html.light .text-white:not(button.bg-blue-600):not(button.bg-blue-600 *):not(button.bg-blue-500):not(button.bg-blue-500 *):not(button.bg-indigo-600):not(button.bg-indigo-600 *):not(button.bg-indigo-500):not(button.bg-indigo-500 *):not(button.bg-emerald-600):not(button.bg-emerald-600 *):not(button.bg-rose-600):not(button.bg-rose-600 *):not(button.bg-purple-600):not(button.bg-purple-600 *):not(a.bg-blue-600):not(a.bg-blue-600 *):not(a.bg-indigo-600):not(a.bg-indigo-600 *):not(a.bg-emerald-600):not(a.bg-emerald-600 *):not(a.bg-rose-600):not(a.bg-rose-600 *):not(a.bg-purple-600):not(a.bg-purple-600 *):not(.btn-theme-primary):not(.btn-theme-primary *):not(.btn-primary):not(.btn-primary *):not(.badge-solid):not(.badge-solid *):not(.nav-btn.is-active):not(.nav-btn.is-active *):not(.nav-btn.bg-blue-600):not(.nav-btn.bg-blue-600 *):not(.vocab-sub-tab.bg-blue-600):not(.vocab-sub-tab.bg-blue-600 *):not(.auth-tab-btn.is-active):not(.auth-tab-btn.is-active *):not(.auth-tab-btn.bg-blue-600):not(.auth-tab-btn.bg-blue-600 *):not(#btn-check-answer.is-ready):not(#btn-check-answer.is-ready *):not(#btn-header-remix):not(#btn-header-remix *):not(#btn-quick-remix):not(#btn-quick-remix *):not(#grid-in-keypad-submit):not(#grid-in-keypad-submit *):not(.keypad-submit-btn):not(.keypad-submit-btn *):not(.option-bubble):not(.option-bubble *):not(#grid-buttons-container button.bg-blue-600):not(#grid-buttons-container button.bg-blue-600 *):not(#grid-buttons-container button.bg-slate-700):not(#grid-buttons-container button.bg-slate-700 *):not(#site-logo):not(#site-logo *):not(#auth-modal-logo-badge):not(#auth-modal-logo-badge *):not(.security-shield-btn):not(.security-shield-btn *):not(#ai-chat-messages .bg-blue-600):not(#ai-chat-messages .bg-blue-600 *),
html.light [class*="text-white"]:not(button.bg-blue-600):not(button.bg-blue-600 *):not(button.bg-blue-500):not(button.bg-blue-500 *):not(button.bg-indigo-600):not(button.bg-indigo-600 *):not(button.bg-indigo-500):not(button.bg-indigo-500 *):not(button.bg-emerald-600):not(button.bg-emerald-600 *):not(button.bg-rose-600):not(button.bg-rose-600 *):not(button.bg-purple-600):not(button.bg-purple-600 *):not(a.bg-blue-600):not(a.bg-blue-600 *):not(a.bg-indigo-600):not(a.bg-indigo-600 *):not(a.bg-emerald-600):not(a.bg-emerald-600 *):not(a.bg-rose-600):not(a.bg-rose-600 *):not(a.bg-purple-600):not(a.bg-purple-600 *):not(.btn-theme-primary):not(.btn-theme-primary *):not(.btn-primary):not(.btn-primary *):not(.badge-solid):not(.badge-solid *):not(.nav-btn.is-active):not(.nav-btn.is-active *):not(.nav-btn.bg-blue-600):not(.nav-btn.bg-blue-600 *):not(.vocab-sub-tab.bg-blue-600):not(.vocab-sub-tab.bg-blue-600 *):not(.auth-tab-btn.is-active):not(.auth-tab-btn.is-active *):not(.auth-tab-btn.bg-blue-600):not(.auth-tab-btn.bg-blue-600 *):not(#btn-check-answer.is-ready):not(#btn-check-answer.is-ready *):not(#btn-header-remix):not(#btn-header-remix *):not(#btn-quick-remix):not(#btn-quick-remix *):not(#grid-in-keypad-submit):not(#grid-in-keypad-submit *):not(.keypad-submit-btn):not(.keypad-submit-btn *):not(.option-bubble):not(.option-bubble *):not(#grid-buttons-container button.bg-blue-600):not(#grid-buttons-container button.bg-blue-600 *):not(#grid-buttons-container button.bg-slate-700):not(#grid-buttons-container button.bg-slate-700 *):not(#site-logo):not(#site-logo *):not(#auth-modal-logo-badge):not(#auth-modal-logo-badge *):not(.security-shield-btn):not(.security-shield-btn *):not(#ai-chat-messages .bg-blue-600):not(#ai-chat-messages .bg-blue-600 *) {
  color: #0f172a !important;
}

html.light [class*="text-slate-50"],
html.light [class*="text-slate-100"],
html.light [class*="text-slate-200"],
html.light [class*="text-slate-300"] {
  color: #1e293b !important;
}

/* Analytics and vocabulary are dense data views: keep their surfaces neutral in light mode. */
html.light #view-analytics [class*="bg-purple-"],
html.light #view-analytics [class*="bg-indigo-"],
html.light #view-analytics [class*="bg-violet-"] {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
}
html.light #view-analytics [class*="text-purple-"],
html.light #view-analytics [class*="text-indigo-"],
html.light #view-analytics [class*="text-violet-"] {
  color: #1e40af !important;
}
html.light #view-analytics svg text {
  fill: #334155 !important;
}
html.light #view-analytics svg path[stroke="#a855f7"] {
  stroke: #2563eb !important;
}

/* Test Suites (#view-test_suites) Light Mode Styling */
html.light #view-test_suites .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 #view-test_suites .test-suite-card:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.12) !important;
}
html.light #view-test_suites .test-suite-card h3 {
  color: #0f172a !important;
}
html.light #view-test_suites .test-suite-card:hover h3 {
  color: #2563eb !important;
}
html.light #view-test_suites .test-suite-card p {
  color: #475569 !important;
}

/* Explicit color fixes for test suite progress stats & active session banner */
html.light #view-test_suites .test-suite-card .bg-slate-950\/90,
html.light #view-test_suites .test-suite-card .bg-slate-950\/80,
html.light #view-test_suites .test-suite-card .bg-slate-900 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light #view-test_suites .test-suite-card span.text-slate-400,
html.light #view-test_suites .test-suite-card [class*="text-slate-400"] {
  color: #64748b !important;
}

html.light #view-test_suites .test-suite-card span.text-white,
html.light #view-test_suites .test-suite-card .font-bold.text-white {
  color: #0f172a !important;
}

html.light #view-test_suites .test-suite-card b.text-slate-200,
html.light #view-test_suites .test-suite-card [class*="text-slate-200"] {
  color: #0f172a !important;
}

html.light #view-test_suites .test-suite-card .text-blue-300 {
  color: #1d4ed8 !important; /* High-contrast Royal Blue */
}

html.light #view-test_suites .test-suite-card .border-blue-500\/60 {
  background-color: #eff6ff !important;
  border-color: #3b82f6 !important;
}

html.light #view-test_suites .test-suite-card span.border-slate-700,
html.light #view-test_suites .test-suite-card span.bg-slate-800\/80 {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

html.light #view-test_suites .test-suite-card button.group\/btn {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}
html.light #view-test_suites .test-suite-card button.group\/btn:hover {
  background-color: #eff6ff !important;
  border-color: #3b82f6 !important;
}
html.light #view-test_suites .test-suite-card button.group\/btn span.text-slate-200 {
  color: #1e293b !important;
}
html.light #view-test_suites .test-suite-card button.group\/btn:hover span.text-slate-200 {
  color: #1d4ed8 !important;
}
html.light #view-test_suites .test-suite-card button.group\/btn .bg-purple-400 {
  background-color: #9333ea !important;
}
html.light #view-test_suites .test-suite-card button.group\/btn .bg-blue-400 {
  background-color: #2563eb !important;
}
html.light #view-test_suites .test-suite-card button.group\/btn .bg-slate-900 {
  background-color: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}
html.light #view-test_suites .test-suite-card .w-full.h-2.bg-slate-800 {
  background-color: #e2e8f0 !important;
}
html.light #view-test_suites button[onclick*="startOfficialTest"],
html.light #view-test_suites button[onclick*="resumeTestSession"] {
  color: #ffffff !important;
}
html.light #view-test_suites button[onclick*="startOfficialTest"] *,
html.light #view-test_suites button[onclick*="resumeTestSession"] * {
  color: #ffffff !important;
}
html.light #view-test_suites button[onclick*="openOnlyAnswerListMode"] {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}
html.light #view-test_suites button[onclick*="openOnlyAnswerListMode"]:hover {
  background-color: #ecfdf5 !important;
  border-color: #10b981 !important;
  color: #047857 !important;
}
html.light #view-test_suites .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: #334155 !important;
}
html.light #view-test_suites .suite-filter-tab-btn.bg-cyan-600,
html.light #view-test_suites .suite-filter-tab-btn.bg-cyan-600 * {
  color: #ffffff !important;
}
html.light #view-test_suites [class*="bg-black/30"] {
  background-color: #e2e8f0 !important;
  color: #1e293b !important;
}

html.light #view-flashcards .flashcard-front,
html.light #view-flashcards .flashcard-back,
html.light #srs-card-container .flashcard-front,
html.light #srs-card-container .flashcard-back {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
html.light #view-flashcards .flashcard-front .text-white,
html.light #view-flashcards .flashcard-back .text-white {
  color: #0f172a !important;
}

html.light #flashcard-root-box {
  background-color: #f5f3ff !important;
  border-color: #ddd6fe !important;
  color: #5b21b6 !important;
}
html.light #flashcard-root-box b,
html.light #flashcard-root-box span {
  color: #5b21b6 !important;
}

html.light #flashcard-mnemonic-box {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}
html.light #flashcard-mnemonic-box b,
html.light #flashcard-mnemonic-box span {
  color: #92400e !important;
}

html.light #flashcard-trap {
  color: #b45309 !important;
}

html.light #flashcard-context {
  color: #334155 !important;
}

html.light .flashcard-back .bg-slate-950\/90 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}

/* 3D Flashcard Face Stacking & Zero Z-Fighting (GPU-Accelerated 60fps) */
.flashcard-inner,
.flashcard-card {
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform;
}
.flashcard-front {
  transform: rotateY(0deg) translateZ(1px) !important;
  -webkit-transform: rotateY(0deg) translateZ(1px) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
/* 3D Hardware Accelerated Smooth Card Flipping (60-120fps) */
.flashcard-inner,
#srs-card-inner {
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
  transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  will-change: transform;
}

.flashcard-front,
.flashcard-back {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

.flashcard-front {
  transform: rotateY(0deg) translateZ(1px) !important;
  -webkit-transform: rotateY(0deg) translateZ(1px) !important;
}

.flashcard-back {
  transform: rotateY(180deg) translateZ(1px) !important;
  -webkit-transform: rotateY(180deg) translateZ(1px) !important;
}

/* 4. Complete Tables Styling */
html.light table,
html.light table tbody,
html.light table tr,
html.light table td,
html.light .adm-table,
html.light .adm-table td,
html.light .roster-table,
html.light .roster-cell {
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

html.light table thead,
html.light table thead tr,
html.light table th,
html.light .adm-table th,
html.light .roster-table th {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
  border-color: #cbd5e1 !important;
  border-bottom-color: #cbd5e1 !important;
}

html.light table tbody tr:hover,
html.light table tbody tr:hover td,
html.light .adm-table tbody tr:hover td,
html.light .roster-row:hover td,
html.light tr.hover\:bg-slate-800\/40:hover td,
html.light tr[class*="hover:bg-slate"]:hover td {
  background-color: #f8fafc !important;
}

html.light table td .text-white,
html.light table td [class*="text-white"],
html.light table td [class*="text-slate-100"],
html.light table td [class*="text-slate-200"],
html.light table td [class*="text-slate-300"] {
  color: #0f172a !important;
}

/* 5. Inputs, Selects, Textareas */
html.light input:not([type="checkbox"]):not([type="radio"]),
html.light select,
html.light textarea,
html.light input.text-white,
html.light select.text-white,
html.light textarea.text-white {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

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

/* 6. Math Expressions (KaTeX) in Light Mode */
html.light .katex,
html.light .katex-html,
html.light .katex * {
  color: #0f172a !important;
}

/* KaTeX inside solid filled colored buttons or selected option bubbles only */
html.light button.bg-blue-600 .katex, html.light button.bg-blue-600 .katex *,
html.light button.bg-indigo-600 .katex, html.light button.bg-indigo-600 .katex *,
html.light button.bg-emerald-600 .katex, html.light button.bg-emerald-600 .katex *,
html.light button.bg-rose-600 .katex, html.light button.bg-rose-600 .katex *,
html.light button.bg-purple-600 .katex, html.light button.bg-purple-600 .katex *,
html.light .btn-primary .katex, html.light .btn-primary .katex *,
html.light .btn-theme-primary .katex, html.light .btn-theme-primary .katex *,
html.light .option-bubble .katex, html.light .option-bubble .katex *,
html.light .option-item.is-selected.bg-blue-600 .katex, html.light .option-item.is-selected.bg-blue-600 .katex * {
  color: #ffffff !important;
}

/* 7. Modals & Popovers */
html.light [id^="modal-"] > div,
html.light [role="dialog"] > div,
html.light .modal-glass-container {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

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

/* 8. Neutral Count Badges inside Tabs and Buttons */
html.light span[class*="bg-black/"]:not(.bg-blue-600 *):not(.is-active *):not(#landing-active-session-banner *) {
  background-color: #e2e8f0 !important;
  color: #1e293b !important;
}
html.light span[class*="bg-black/"]:not(.bg-blue-600 *):not(.is-active *):not(#landing-active-session-banner *) * {
  color: #1e293b !important;
}

/* 9. Passage Logic Drawer & Toolbar Buttons */
html.light #passage-logic-drawer,
html.light #passage-logic-drawer * {
  color: #0f172a !important;
}
html.light #passage-logic-drawer {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !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 #btn-passage-logic-map,
html.light #btn-passage-logic-map * {
  color: #92400e !important;
  background-color: #fef3c7 !important;
  border-color: #f59e0b !important;
}

/* 10. Explicit Whitelist of Solid Filled Buttons & Solid Badges with White Text */
html.light button.bg-blue-600, html.light button.bg-blue-600 *,
html.light button.bg-blue-500, html.light button.bg-blue-500 *,
html.light button.bg-indigo-600, html.light button.bg-indigo-600 *,
html.light button.bg-indigo-500, html.light button.bg-indigo-500 *,
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 a.bg-blue-600, html.light a.bg-blue-600 *,
html.light a.bg-indigo-600, html.light a.bg-indigo-600 *,
html.light a.bg-emerald-600, html.light a.bg-emerald-600 *,
html.light a.bg-rose-600, html.light a.bg-rose-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 .btn-primary, html.light .btn-primary *,
html.light .badge-solid, html.light .badge-solid *,
html.light .nav-btn.is-active, html.light .nav-btn.is-active *,
html.light .nav-btn.bg-blue-600, html.light .nav-btn.bg-blue-600 *,
html.light .vocab-sub-tab.bg-blue-600, html.light .vocab-sub-tab.bg-blue-600 *,
html.light .auth-tab-btn.is-active, html.light .auth-tab-btn.is-active *,
html.light .auth-tab-btn.bg-blue-600, html.light .auth-tab-btn.bg-blue-600 *,
html.light #btn-check-answer.is-ready, html.light #btn-check-answer.is-ready *,
html.light #btn-header-remix, html.light #btn-header-remix *,
html.light #btn-quick-remix, html.light #btn-quick-remix *,
html.light .keypad-submit-btn, html.light .keypad-submit-btn *,
html.light #grid-in-keypad-submit, html.light #grid-in-keypad-submit *,
html.light .option-item.is-selected .option-bubble, html.light .option-item.is-selected .option-bubble *,
html.light .option-item.is-correct .option-bubble, html.light .option-item.is-correct .option-bubble *,
html.light .option-item.is-incorrect .option-bubble, html.light .option-item.is-incorrect .option-bubble *,
html.light #grid-buttons-container button.bg-blue-600, html.light #grid-buttons-container button.bg-blue-600 *,
html.light #grid-buttons-container button.bg-slate-700, html.light #grid-buttons-container button.bg-slate-700 *,
html.light #site-logo, html.light #site-logo *,
html.light #auth-modal-logo-badge, html.light #auth-modal-logo-badge *,
html.light .security-shield-btn, html.light .security-shield-btn *,
html.light #tab-range-today.bg-blue-600, html.light #tab-range-today.bg-blue-600 *,
html.light #tab-range-yesterday.bg-blue-600, html.light #tab-range-yesterday.bg-blue-600 *,
html.light #tab-range-7days.bg-blue-600, html.light #tab-range-7days.bg-blue-600 *,
html.light #tab-range-all.bg-blue-600, html.light #tab-range-all.bg-blue-600 *,
html.light #ai-chat-messages .bg-blue-600, html.light #ai-chat-messages .bg-blue-600 * {
  color: #ffffff !important;
}

/* ==========================================================================
   LIGHT MODE — ADMIN STATUS PILLS (.adm-pill-*)
   These use dark-mode pastels that have low contrast on white backgrounds.
   Override to WCAG-AA compliant darker values on light mode.
   ========================================================================== */
html.light .adm-pill-active {
  background: rgba(5, 150, 105, 0.12) !important;
  color: #065f46 !important;
  border-color: rgba(5, 150, 105, 0.4) !important;
}
html.light .adm-pill-pro {
  background: rgba(180, 83, 9, 0.10) !important;
  color: #92400e !important;
  border-color: rgba(180, 83, 9, 0.35) !important;
}
html.light .adm-pill-plus {
  background: rgba(124, 58, 237, 0.10) !important;
  color: #5b21b6 !important;
  border-color: rgba(124, 58, 237, 0.35) !important;
}
html.light .adm-pill-free {
  background: rgba(71, 85, 105, 0.10) !important;
  color: #334155 !important;
  border-color: rgba(71, 85, 105, 0.35) !important;
}
html.light .adm-pill-superadmin {
  background: rgba(190, 18, 60, 0.10) !important;
  color: #9f1239 !important;
  border-color: rgba(190, 18, 60, 0.35) !important;
}
html.light .adm-pill-expired,
html.light .adm-pill-archived {
  background: rgba(100, 116, 139, 0.10) !important;
  color: #475569 !important;
  border-color: rgba(100, 116, 139, 0.30) !important;
}

/* ==========================================================================
   LIGHT MODE — QUESTION RUSH RESULT STATES
   is-correct / is-wrong need to maintain readable text on light backgrounds
   ========================================================================== */
html.light #view-rush .rush-opt-item.bg-emerald-600\/30,
html.light #view-rush .rush-opt-item.is-correct {
  background-color: rgba(5, 150, 105, 0.12) !important;
  border-color: #059669 !important;
  color: #064e3b !important;
  box-shadow: 0 0 12px rgba(5, 150, 105, 0.2) !important;
}
html.light #view-rush .rush-opt-item.bg-rose-600\/30,
html.light #view-rush .rush-opt-item.is-wrong {
  background-color: rgba(225, 29, 72, 0.10) !important;
  border-color: #e11d48 !important;
  color: #881337 !important;
  box-shadow: 0 0 12px rgba(225, 29, 72, 0.18) !important;
}
html.light #view-rush .rush-opt-item.is-correct .rush-opt-badge,
html.light #view-rush .rush-opt-item.is-correct span.w-6.h-6 {
  background-color: #059669 !important;
  color: #ffffff !important;
  border-color: #047857 !important;
}
html.light #view-rush .rush-opt-item.is-wrong .rush-opt-badge,
html.light #view-rush .rush-opt-item.is-wrong span.w-6.h-6 {
  background-color: #e11d48 !important;
  color: #ffffff !important;
  border-color: #be123c !important;
}

/* ==========================================================================
   LIGHT MODE — AI MODEL SELECTOR (in AI tutor drawer)
   ========================================================================== */
html.light #ai-tutor-input-bar {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
html.light #ai-model-selector {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}
html.light #ai-model-selector:focus {
  border-color: #3b82f6 !important;
}
html.light #ai-model-badge {
  /* Color is set inline via JS, no override needed */
}

/* ==========================================================================
   LIGHT MODE — ICON COLOR PRESERVATION
   Icons (<i>, <svg>, [data-lucide]) with explicit Tailwind color classes
   must keep their vibrant colors. Without this, they inherit the container's
   #0f172a "near-black" from [id^="view-"] and [class*="bg-slate-900"]
   rules. These use very high specificity to always win.
   ========================================================================== */

/* Cyan icons */
html.light i.text-cyan-300, html.light i.text-cyan-400,
html.light svg.text-cyan-300, html.light svg.text-cyan-400,
html.light [data-lucide].text-cyan-300, html.light [data-lucide].text-cyan-400 {
  color: #0891b2 !important;
}

/* Blue icons */
html.light i.text-blue-300, html.light i.text-blue-400,
html.light svg.text-blue-300, html.light svg.text-blue-400,
html.light [data-lucide].text-blue-300, html.light [data-lucide].text-blue-400 {
  color: #2563eb !important;
}

/* Emerald/green icons */
html.light i.text-emerald-300, html.light i.text-emerald-400,
html.light svg.text-emerald-300, html.light svg.text-emerald-400,
html.light [data-lucide].text-emerald-300, html.light [data-lucide].text-emerald-400 {
  color: #059669 !important;
}

/* Amber/orange icons */
html.light i.text-amber-300, html.light i.text-amber-400,
html.light svg.text-amber-300, html.light svg.text-amber-400,
html.light [data-lucide].text-amber-300, html.light [data-lucide].text-amber-400 {
  color: #d97706 !important;
}

/* Rose/red icons */
html.light i.text-rose-300, html.light i.text-rose-400,
html.light svg.text-rose-300, html.light svg.text-rose-400,
html.light [data-lucide].text-rose-300, html.light [data-lucide].text-rose-400 {
  color: #e11d48 !important;
}

/* Indigo icons */
html.light i.text-indigo-300, html.light i.text-indigo-400,
html.light svg.text-indigo-300, html.light svg.text-indigo-400,
html.light [data-lucide].text-indigo-300, html.light [data-lucide].text-indigo-400 {
  color: #4f46e5 !important;
}

/* Purple icons */
html.light i.text-purple-300, html.light i.text-purple-400,
html.light svg.text-purple-300, html.light svg.text-purple-400,
html.light [data-lucide].text-purple-300, html.light [data-lucide].text-purple-400 {
  color: #7c3aed !important;
}

/* Violet icons */
html.light i.text-violet-300, html.light i.text-violet-400,
html.light svg.text-violet-300, html.light svg.text-violet-400,
html.light [data-lucide].text-violet-300, html.light [data-lucide].text-violet-400 {
  color: #7c3aed !important;
}

/* Teal icons */
html.light i.text-teal-300, html.light i.text-teal-400,
html.light svg.text-teal-300, html.light svg.text-teal-400,
html.light [data-lucide].text-teal-300, html.light [data-lucide].text-teal-400 {
  color: #0d9488 !important;
}

/* Sky icons */
html.light i.text-sky-300, html.light i.text-sky-400,
html.light svg.text-sky-300, html.light svg.text-sky-400,
html.light [data-lucide].text-sky-300, html.light [data-lucide].text-sky-400 {
  color: #0284c7 !important;
}

/* Yellow/warning icons */
html.light i.text-yellow-300, html.light i.text-yellow-400,
html.light svg.text-yellow-300, html.light svg.text-yellow-400,
html.light [data-lucide].text-yellow-300, html.light [data-lucide].text-yellow-400 {
  color: #ca8a04 !important;
}

/* Pink/fuchsia icons */
html.light i.text-pink-300, html.light i.text-pink-400,
html.light svg.text-pink-300, html.light svg.text-pink-400,
html.light [data-lucide].text-pink-300, html.light [data-lucide].text-pink-400 {
  color: #db2777 !important;
}

/* Also cover -500 shade icons (some icons use text-*-500) */
html.light i.text-cyan-500, html.light [data-lucide].text-cyan-500 { color: #06b6d4 !important; }
html.light i.text-blue-500, html.light [data-lucide].text-blue-500 { color: #3b82f6 !important; }
html.light i.text-emerald-500, html.light [data-lucide].text-emerald-500 { color: #10b981 !important; }
html.light i.text-amber-500, html.light [data-lucide].text-amber-500 { color: #f59e0b !important; }
html.light i.text-rose-500, html.light [data-lucide].text-rose-500 { color: #f43f5e !important; }
html.light i.text-purple-500, html.light [data-lucide].text-purple-500 { color: #a855f7 !important; }
html.light i.text-indigo-500, html.light [data-lucide].text-indigo-500 { color: #6366f1 !important; }

/* Slate icons (muted but not black) */
html.light i.text-slate-300, html.light [data-lucide].text-slate-300 { color: #94a3b8 !important; }
html.light i.text-slate-400, html.light [data-lucide].text-slate-400 { color: #94a3b8 !important; }
html.light i.text-slate-500, html.light [data-lucide].text-slate-500 { color: #64748b !important; }

/* ==========================================================================
   LIGHT MODE — PARAPHRASE BRIDGE PANEL & CONDENSER BADGES
   ========================================================================== */
html.light .paraphrase-bridge-panel {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}
html.light .paraphrase-bridge-panel p {
  color: #475569 !important;
}
html.light .paraphrase-bridge-panel > div:last-child > div {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}
html.light .paraphrase-bridge-panel > div:last-child > div:hover {
  border-color: #6366f1 !important;
  background: #f1f5f9 !important;
}
html.light .condenser-badge-option {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0284c7 !important;
}
html.light .condenser-badge-option:hover {
  background-color: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0369a1 !important;
}

/* ==========================================================================
   LIGHT MODE — ADMIN BATCH BROADCAST & EMAIL HUB
   ========================================================================== */
html.light #adm-btn-broadcast-digest {
  background: linear-gradient(to right, #059669, #0d9488) !important;
  color: #ffffff !important;
  border-color: #047857 !important;
}
html.light #adm-btn-broadcast-digest:hover {
  background: linear-gradient(to right, #10b981, #14b8a6) !important;
}
html.light #adm-broadcast-status {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}
html.light #adm-broadcast-status .text-emerald-300 {
  color: #065f46 !important;
}
html.light #adm-broadcast-status .text-amber-300 {
  color: #92400e !important;
}
html.light #adm-broadcast-status .text-blue-300 {
  color: #1e40af !important;
}
html.light #adm-broadcast-status .border-slate-800 {
  border-color: #e2e8f0 !important;
}
html.light #adm-broadcast-force {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

/* ==========================================================================
   ACADEMIC MINIMALIST & COGNITIVE COMFORT ENHANCEMENTS
   ========================================================================== */

/* De-clutter: tone down continuous animated pulsing across decorative badge dots */
.animate-pulse:not(.loading-spinner):not([role="progressbar"]):not([id*="loading"]) {
  animation: none !important;
  opacity: 0.9 !important;
}

/* Flashcards 3D: Soothing, eye-friendly academic palette (reduces visual fatigue >30min) */
#view-flashcards .flashcard-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#view-flashcards .flashcard-front,
#view-flashcards .flashcard-back {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

#view-flashcards .flashcard-front:hover,
#view-flashcards .flashcard-back:hover {
  border-color: #475569 !important;
}

html.light #view-flashcards .flashcard-front,
html.light #view-flashcards .flashcard-back {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08) !important;
}

/* Math Formulas: College Board Clean Math Typography & Overflow Protection */
#view-math-formulas .katex {
  font-size: 1.05em !important;
  line-height: 1.5 !important;
  text-rendering: auto !important;
}

#view-math-formulas .katex-display-wrapper {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0.25rem 0.5rem !important;
  margin: 0.25rem 0 !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
}

#view-math-formulas .katex-display {
  margin: 0.25em 0 !important;
  padding: 0.5em 0.85em !important;
  background: rgba(15, 23, 42, 0.7) !important;
  border-radius: 0.75rem !important;
  border: 1px solid rgba(51, 65, 85, 0.5) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
}

#view-math-formulas .katex-inline-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  vertical-align: middle !important;
  scrollbar-width: thin !important;
  padding: 0 0.15rem !important;
}

#view-math-formulas .katex-display-wrapper::-webkit-scrollbar,
#view-math-formulas .katex-display::-webkit-scrollbar,
#view-math-formulas .katex-inline-wrapper::-webkit-scrollbar {
  height: 4px !important;
}

#view-math-formulas .katex-display-wrapper::-webkit-scrollbar-thumb,
#view-math-formulas .katex-display::-webkit-scrollbar-thumb,
#view-math-formulas .katex-inline-wrapper::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.4) !important;
  border-radius: 4px !important;
}

html.light #view-math-formulas .katex-display {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Knowledge Views: Subdued, elegant borders instead of loud neon glows */
#view-math-formulas .border-cyan-500\/30,
#view-masterclass .border-amber-500\/30,
#view-flashcards .border-purple-500\/30 {
  border-color: #334155 !important;
}

html.light #view-math-formulas .border-cyan-500\/30,
html.light #view-masterclass .border-amber-500\/30,
html.light #view-flashcards .border-purple-500\/30 {
  border-color: #e2e8f0 !important;
}

/* Exam Result Remediation Card: Clear focus and academic hierarchy */
#res-remediation-card {
  background: #0f172a !important;
  border-color: #3b82f6 !important;
}

html.light #res-remediation-card {
  background: #f8fafc !important;
  border-color: #93c5fd !important;
  color: #0f172a !important;
}

html.light #res-remediation-card h2,
html.light #res-remediation-card p {
  color: #0f172a !important;
}

/* Landing Page: Exactly ONE Hero Action Card (when active session banner is shown, hide daily plan) */
#view-landing:has(#landing-active-session-banner:not(.hidden)) #dash-ai-next-action {
  display: none !important;
}

html.light #landing-action-unified-card {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.06) !important;
}

html.light #dash-ai-next-action {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html.light #dash-ai-next-action h2 {
  color: #0f172a !important;
}

html.light #dash-ai-next-action p {
  color: #475569 !important;
}

/* Mobile solver: keep both Practice and Exam modes usable on narrow phones. */
@media (max-width: 767px) {
  /* Solver header uses a real three-column layout on phones; no absolute overlap. */
  #view-question-solver > header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 48px !important;
    height: auto !important;
  }

  #view-question-solver > header > div:first-child {
    grid-column: 1 !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #view-question-solver > header > div:nth-child(2),
  #view-question-solver > header .absolute.left-1\/2 {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    transform: none !important;
    max-width: none !important;
    min-width: 0 !important;
    z-index: 1 !important;
  }

  #view-question-solver > header > div:last-child {
    grid-column: 3 !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    overflow: visible !important;
  }

  #solver-org-badge,
  #view-question-solver > header #btn-session-finish span {
    display: none !important;
  }

  #solver-mode-badge {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 6px !important;
    justify-content: center !important;
  }

  #solver-mode-text .hidden {
    display: none !important;
  }

  #q-section-badge {
    max-width: 64px !important;
  }

  #exam-timer-container {
    max-width: max-content !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  #view-question-solver > header > div:last-child > button,
  #view-question-solver > header > div:last-child > .relative > button {
    min-width: 44px !important;
    min-height: 44px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  /* Pace text is supplementary; it must never push the fixed footer upward. */
  #q-pace-badge {
    display: none !important;
  }

  #view-question-solver > footer {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  #view-question-solver > header button {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  #view-question-solver > header #btn-timer-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px 6px !important;
  }

  #check-answer-box,
  #check-answer-box * {
    white-space: normal !important;
  }

  #check-answer-box {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  #btn-check-answer {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #btn-check-answer-text {
    max-width: 15ch !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #solver-mobile-tabs {
    position: relative !important;
    top: auto !important;
    flex-shrink: 0 !important;
  }

  #grid-in-keypad {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 6px !important;
  }

  #grid-in-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #grid-in-input {
    padding-right: 76px !important;
  }

  #grid-in-preview-banner {
    align-items: flex-start !important;
  }

  #grid-in-preview-value {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  #passage-pane-header {
    align-items: stretch !important;
  }

  #btn-passage-condenser {
    min-height: 44px !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  #solver-explanation-tabs,
  #solver-explanation-tabs > div {
    min-width: 0 !important;
  }

  #right-pane .border-b:has(#btn-explain-my-trap) {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 6px !important;
    overflow-x: visible !important;
  }

  #right-pane .border-b:has(#btn-explain-my-trap) > div:first-child {
    display: flex !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
  }

  #btn-explain-my-trap {
    align-self: flex-start !important;
    min-height: 44px !important;
    flex-shrink: 0 !important;
  }
}

@media (max-width: 380px) {
  #view-question-solver > header > div:first-child {
    max-width: 24vw !important;
  }

  #view-question-solver > header > div:nth-child(2),
  #view-question-solver > header .absolute.left-1\/2 {
    max-width: 42vw !important;
  }

  #exam-timer-container {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  #q-section-badge {
    max-width: 54px !important;
  }

  #view-question-solver > header > div:last-child > button,
  #view-question-solver > header > div:last-child > .relative > button {
    min-height: 44px !important;
    min-width: 36px !important;
  }

  #btn-check-answer-text {
    max-width: 10ch !important;
  }

  #btn-prev-q,
  #btn-next-q {
    min-height: 44px !important;
    min-width: 44px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* ==========================================================================
   MINIMALIST FLAT DESIGN SYSTEM — ZERO NOISY GRADIENTS (CLEAN MODERN UI)
   ========================================================================== */
*,
*::before,
*::after {
  --tw-gradient-from: transparent !important;
  --tw-gradient-to: transparent !important;
  --tw-gradient-stops: transparent !important;
}

[class*="bg-gradient-"],
.bg-gradient-to-r,
.bg-gradient-to-br,
.bg-gradient-to-tr,
.bg-gradient-to-b,
.bg-gradient-to-t,
.bg-gradient-to-l,
.bg-gradient-to-bl,
.bg-gradient-to-tl,
.gold-shimmer-btn,
.btn-shimmer,
.animate-shimmer {
  background-image: none !important;
  animation: none !important;
}

/* Card & container flat clean surfaces */
.bg-gradient-to-br,
.bg-gradient-to-b,
[class*="from-slate-900"],
[class*="from-slate-950"],
[class*="from-blue-950"],
[class*="from-indigo-950"],
[class*="from-emerald-950"],
[class*="from-purple-950"],
[class*="from-rose-950"],
[class*="from-amber-950"] {
  background-color: #0f172a !important;
}

/* Primary actions flat solid colors */
[class*="from-blue-600"], [class*="from-blue-500"] {
  background-color: #2563eb !important;
}
[class*="from-blue-600"]:hover, [class*="from-blue-500"]:hover {
  background-color: #1d4ed8 !important;
}

[class*="from-indigo-600"], [class*="from-indigo-500"] {
  background-color: #4f46e5 !important;
}
[class*="from-indigo-600"]:hover, [class*="from-indigo-500"]:hover {
  background-color: #4338ca !important;
}

[class*="from-emerald-600"], [class*="from-emerald-500"], [class*="from-teal-600"] {
  background-color: #059669 !important;
}
[class*="from-emerald-600"]:hover, [class*="from-emerald-500"]:hover {
  background-color: #047857 !important;
}

[class*="from-amber-500"], [class*="from-amber-600"], [class*="from-yellow-500"] {
  background-color: #d97706 !important;
}
[class*="from-amber-500"]:hover, [class*="from-amber-600"]:hover {
  background-color: #b45309 !important;
}

[class*="from-rose-600"], [class*="from-rose-500"] {
  background-color: #e11d48 !important;
}
[class*="from-rose-600"]:hover, [class*="from-rose-500"]:hover {
  background-color: #be123c !important;
}

[class*="from-purple-600"], [class*="from-purple-500"] {
  background-color: #7c3aed !important;
}

/* Subtle badge pill surfaces */
[class*="from-amber-500/20"], [class*="from-amber-500/30"], [class*="from-amber-500/15"] {
  background-color: rgba(245, 158, 11, 0.15) !important;
}
[class*="from-blue-500/20"], [class*="from-blue-500/30"], [class*="from-blue-500/15"] {
  background-color: rgba(59, 130, 246, 0.15) !important;
}
[class*="from-emerald-500/20"], [class*="from-emerald-500/30"], [class*="from-emerald-500/15"] {
  background-color: rgba(16, 185, 129, 0.15) !important;
}

/* Progress bars flat solid styling */
[id*="progress-bar"],
[id*="-progress-bar"],
[class*="progress-bar"],
#error-stat-progress-bar,
#prof-weekly-progress-bar,
#prof-xp-progress-bar,
#daily-xp-progress-bar,
#study-calendar-progress-bar,
#raw-conv-total-bar {
  background-image: none !important;
}

/* Light mode flat clean surfaces */
html.light .bg-gradient-to-br,
html.light .bg-gradient-to-b,
html.light [class*="from-slate-900"],
html.light [class*="from-slate-950"],
html.light [class*="from-blue-950"],
html.light [class*="from-indigo-950"] {
  background-color: #ffffff !important;
}

/* Light mode for AI Cognitive Fingerprint, 7-Day Stepper & Contact Footer */
html.light #dash-cognitive-fingerprint-box {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.05) !important;
}
html.light #dash-cognitive-fingerprint-box h2,
html.light #dash-cognitive-fingerprint-box #dash-cf-headline {
  color: #0f172a !important;
}
html.light #dash-cognitive-fingerprint-box p,
html.light #dash-cognitive-fingerprint-box #dash-cf-insight {
  color: #334155 !important;
}
html.light #dash-cognitive-fingerprint-box .bg-slate-950 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
html.light #dash-cognitive-fingerprint-box button.bg-slate-950,
html.light #dash-cognitive-fingerprint-box button.bg-slate-800 {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}
html.light #dash-cognitive-fingerprint-box button.bg-slate-950:hover,
html.light #dash-cognitive-fingerprint-box button.bg-slate-800:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light #dash-7day-stepper .bg-slate-950 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
html.light #dash-7day-stepper .bg-slate-900 {
  background-color: #e2e8f0 !important;
  color: #475569 !important;
}
html.light #dash-7day-stepper .text-slate-400 {
  color: #475569 !important;
}
html.light #dash-7day-stepper .text-slate-500 {
  color: #64748b !important;
}

html.light #org-contact-footer {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.05) !important;
}
html.light #org-contact-footer #org-footer-name,
html.light #org-contact-footer a#org-footer-hotline {
  color: #0f172a !important;
}
html.light #org-contact-footer p,
html.light #org-contact-footer #org-footer-address {
  color: #334155 !important;
}

/* ==========================================================================
   SEGMENTED CONTROLLER & WIZARD STEPPER LIGHT MODE ACCESSIBILITY GUARDS (F6)
   ========================================================================== */
html.light .segmented-controller {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
}

html.light .segmented-btn:not(.is-active):not([aria-selected="true"]) {
  color: #475569 !important;
  background-color: transparent !important;
}

html.light .segmented-btn:not(.is-active):not([aria-selected="true"]):hover {
  color: #0f172a !important;
  background-color: rgba(226, 232, 240, 0.7) !important;
}

html.light .segmented-btn.is-active,
html.light .segmented-btn[aria-selected="true"] {
  background-color: #2563eb !important;
  color: #ffffff !important;
  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 .wizard-stepper-bar {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

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-step-item:not(.is-active):not(.is-completed),
html.light .wizard-stepper-bar .wiz-step-btn:not(.is-active):not(.is-completed) {
  color: #64748b !important;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS & TOUCH ERGONOMICS MASTER SUITE (360px - 430px)
   ========================================================================== */

/* 1. Universal Smooth Touch Scrolling & Horizontal Overflow Containment */
html, body {
  max-width: 100vw !important;
  width: 100% !important;
  overflow-x: clip !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

#main-content,
[id^="view-"],
.exam-split-workspace,
#view-question-solver main {
  max-width: 100vw !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 2. Horizontal Scrolling Bars (.overflow-x-auto) */
.overflow-x-auto,
[class*="overflow-x-auto"],
.table-responsive-wrapper,
.segmented-controller,
.adm-subtab-bar,
#ai-tutor-quick-prompts,
.katex-display,
.katex-display-wrapper {
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  touch-action: pan-x !important;
  overscroll-behavior-x: contain !important;
}

.overflow-x-auto::-webkit-scrollbar,
[class*="overflow-x-auto"]::-webkit-scrollbar,
.table-responsive-wrapper::-webkit-scrollbar,
.segmented-controller::-webkit-scrollbar,
.adm-subtab-bar::-webkit-scrollbar,
#ai-tutor-quick-prompts::-webkit-scrollbar,
.katex-display::-webkit-scrollbar,
.katex-display-wrapper::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* 3. Universal Modal Height & Safe Scrollable Containers */
[id^="modal-"] > div,
[role="dialog"] > div,
[role="alertdialog"] > div,
.modal-glass-container,
.safe-modal {
  max-height: 94vh !important;
  max-height: 94dvh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  [id^="modal-"] > div,
  [role="dialog"] > div,
  [role="alertdialog"] > div,
  .modal-glass-container {
    max-height: 94vh !important;
    max-height: 94dvh !important;
    max-width: calc(100vw - 16px) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 4. Popover Auto-Adjustment & Small Screen Clipping Prevention */
@media (max-width: 767.98px) {
  .nav-popover,
  .nav-popover-panel,
  [id$="-popover"],
  [id$="-dropdown"],
  #drill-mistakes-dropdown,
  #dropdown-header-tools,
  #dropdown-solver-ai-tools,
  #sat-vocab-hover-popover,
  #annotation-note-popover,
  #notif-panel {
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
  }

  .absolute.right-0[id$="-popover"],
  .absolute.right-0[id$="-dropdown"],
  #notif-panel,
  #dropdown-header-tools,
  #dropdown-solver-ai-tools,
  #drill-mistakes-dropdown {
    right: 0 !important;
    left: auto !important;
    max-width: calc(100vw - 16px) !important;
  }

  .absolute.left-0[id$="-popover"],
  .absolute.left-0[id$="-dropdown"],
  #nav-drills-popover,
  #nav-knowledge-popover,
  #nav-progress-popover {
    left: 0 !important;
    right: auto !important;
    max-width: calc(100vw - 16px) !important;
  }

  #sat-vocab-hover-popover,
  #annotation-note-popover {
    max-width: calc(100vw - 20px) !important;
    left: clamp(10px, var(--popover-left, 10px), calc(100vw - 290px)) !important;
  }
}

/* 5. Minimum 44px Interactive Touch Targets on Mobile (< 1024px) */
@media (pointer: coarse), (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),
  [role="tab"],
  [role="option"],
  [role="radio"],
  .nav-btn,
  .mnav-item,
  .formula-opt-btn,
  .option-card,
  .option-item,
  .tax-filter-btn,
  .diff-sec-btn,
  .vocab-sub-tab,
  .suite-filter-tab-btn,
  .cal-tab-btn,
  .lifecycle-tab-btn,
  .solver-tag-btn,
  .keypad-btn,
  .auth-tab-btn,
  .auth-input-field,
  .btn-theme-primary,
  .btn-primary-theme,
  .org-btn-primary,
  .adm-touch-btn,
  .adm-subtab-item,
  .challenge-sec-btn,
  .challenge-status-btn,
  .challenge-mode-btn,
  .rush-opt-item,
  .rush-time-btn,
  .rush-sec-btn,
  .security-shield-btn,
  #btn-theme-toggle,
  #btn-mobile-menu,
  #btn-notif-bell,
  #btn-user-auth,
  #btn-session-finish,
  #btn-timer-toggle,
  #solver-mode-badge,
  #btn-prev-q,
  #btn-next-q,
  #btn-check-answer,
  #btn-grid-in-rules-toggle,
  #btn-line-reader-mode,
  #btn-line-reader-height,
  #btn-line-reader-close,
  .btn-crossout-option,
  .audio-speak-btn,
  #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 {
    min-height: 44px !important;
    min-width: 44px !important;
  }
}

/* 6. Zero Horizontal Overflow Safeguard for Ultra-Compact Viewports (360px - 430px) */
@media (max-width: 480px) {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  .card,
  .sub-card,
  .dash-tile,
  .dash-hero-mesh,
  .dash-subcard,
  .bento-card,
  .glass-panel,
  #landing-action-unified-card,
  #dash-error-notebook-hub,
  #dash-goal-countdown-widget,
  #dash-cognitive-fingerprint-box,
  .adm-cockpit-card,
  .adm-table-wrap,
  .table-responsive-wrapper {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Prevent rigid min-width definitions from blowing out 360px viewports */
  [class*="min-w-\[2"],
  [class*="min-w-\[3"],
  [class*="min-w-\[4"],
  [class*="min-w-\[5"],
  [class*="min-w-\[6"] {
    max-width: 100% !important;
  }

  #grid-in-keypad {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   FEEDBACK FLOATING ACTION BUTTON & MODAL
   ========================================================================== */

#btn-floating-feedback {
  position: fixed !important;
  right: max(16px, env(safe-area-inset-right, 16px)) !important;
  bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
  z-index: 40 !important;
  user-select: none !important;
  touch-action: manipulation !important;
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.35), 0 8px 10px -6px rgba(37, 99, 235, 0.25) !important;
}

#btn-floating-feedback:hover {
  transform: translateY(-2px) scale(1.03) !important;
}

#btn-floating-feedback:active {
  transform: translateY(0) scale(0.97) !important;
}

/* Hide FAB during active question solver to keep solver screen focused */
#view-question-solver:not(.hidden) ~ #btn-floating-feedback {
  display: none !important;
}

/* Modal styling & animations */
#modal-feedback {
  animation: feedbackModalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes feedbackModalFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(12px);
  }
}

.feedback-star-btn {
  user-select: none !important;
  touch-action: manipulation !important;
  transition: transform 0.15s ease, color 0.15s ease !important;
}

.feedback-star-btn:hover {
  transform: scale(1.25) !important;
}

.feedback-star-btn:active {
  transform: scale(0.9) !important;
}

#feedback-drag-zone {
  transition: all 0.2s ease-in-out !important;
}

/* ---------- Light Mode Overrides for Feedback FAB & Modal ---------- */
html.light #modal-feedback {
  background-color: rgba(15, 23, 42, 0.45) !important;
}

html.light #modal-feedback > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

html.light #modal-feedback h2 {
  color: #0f172a !important;
}

html.light #modal-feedback p {
  color: #64748b !important;
}

html.light #modal-feedback label {
  color: #334155 !important;
}

html.light #feedback-content {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.light #feedback-content::placeholder {
  color: #94a3b8 !important;
}

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

html.light .feedback-cat-btn:not([class*="bg-blue-600"]) {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}

html.light .feedback-cat-btn:not([class*="bg-blue-600"]):hover {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.light #feedback-drag-zone {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

html.light #feedback-drag-zone:hover {
  background-color: #eff6ff !important;
  border-color: #3b82f6 !important;
}

html.light #feedback-image-preview-box {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

html.light #feedback-preview-filename {
  color: #0f172a !important;
}

html.light #feedback-preview-filesize {
  color: #64748b !important;
}

html.light #btn-close-feedback-modal {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}

html.light #btn-close-feedback-modal:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light #feedback-status-banner {
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #065f46 !important;
}

/* ================= CLEAN BLUEBOOK EXAM TOP NAVIGATION BAR ================= */
#solver-org-badge,
#q-code-badge,
#q-diff-badge,
#solver-mode-badge,
#q-pace-badge {
  display: none !important;
}

@media (max-width: 639px) {
  #q-section-badge {
    display: none !important;
  }
}

@media (min-width: 640px) {
  #q-section-badge {
    display: inline-flex !important;
    align-items: center;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* =========================================================================
   BULLETPROOF LIGHT MODE EXAM SOLVER: PASSAGE, OPTIONS & SOLUTION CONTRAST
   ========================================================================= */

/* 1. Passage Pane & Text Contrast */
html.light #view-question-solver #left-pane {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-right-color: #e2e8f0 !important;
}

html.light #view-question-solver #passage-container,
html.light #view-question-solver .passage-body,
html.light #view-question-solver #passage-container p,
html.light #view-question-solver .passage-body p,
html.light #view-question-solver #passage-container div,
html.light #view-question-solver .passage-body div,
html.light #view-question-solver #passage-container span:not([class*="badge"]):not([class*="bg-"]):not([class*="pill"]):not([class*="fluff"]),
html.light #view-question-solver .passage-body span:not([class*="badge"]):not([class*="bg-"]):not([class*="pill"]):not([class*="fluff"]),
html.light #view-question-solver #passage-container li,
html.light #view-question-solver .passage-body li,
html.light #view-question-solver #passage-container strong,
html.light #view-question-solver .passage-body strong,
html.light #view-question-solver #passage-container em,
html.light #view-question-solver .passage-body em {
  color: #0f172a !important;
}

/* 2. KaTeX Mathematics in Light Mode Solver */
html.light #view-question-solver .katex,
html.light #view-question-solver .katex *,
html.light #view-question-solver .katex-html,
html.light #view-question-solver .katex-html *,
html.light #view-question-solver .katex-display-wrapper,
html.light #view-question-solver .katex-inline-wrapper {
  color: #0f172a !important;
}

/* Maintain light text for KaTeX inside filled solid buttons/badges */
html.light #view-question-solver .bg-blue-600 .katex,
html.light #view-question-solver .bg-blue-600 .katex *,
html.light #view-question-solver .bg-rose-600 .katex,
html.light #view-question-solver .bg-rose-600 .katex *,
html.light #view-question-solver .bg-emerald-600 .katex,
html.light #view-question-solver .bg-emerald-600 .katex *,
html.light #view-question-solver .option-bubble .katex,
html.light #view-question-solver .option-bubble .katex * {
  color: #ffffff !important;
}

/* KaTeX inside selected options */
html.light #view-question-solver .option-item.is-selected .katex,
html.light #view-question-solver .option-item.is-selected .katex *,
html.light #view-question-solver .option-item.option-selected .katex,
html.light #view-question-solver .option-item.option-selected .katex * {
  color: #1e40af !important;
}

/* KaTeX inside correct options */
html.light #view-question-solver .option-item.is-correct .katex,
html.light #view-question-solver .option-item.is-correct .katex *,
html.light #view-question-solver .option-item.option-correct .katex,
html.light #view-question-solver .option-item.option-correct .katex * {
  color: #065f46 !important;
}

/* KaTeX inside incorrect options */
html.light #view-question-solver .option-item.is-incorrect .katex,
html.light #view-question-solver .option-item.is-incorrect .katex *,
html.light #view-question-solver .option-item.option-incorrect .katex,
html.light #view-question-solver .option-item.option-incorrect .katex * {
  color: #9f1239 !important;
}

/* 3. Question Prompt & Answer Options Contrast */
html.light #view-question-solver #right-pane {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html.light #view-question-solver #question-prompt-box,
html.light #view-question-solver #question-prompt-box * {
  color: #0f172a !important;
}

/* Default / Unselected Options */
html.light #view-question-solver .option-item:not(.is-selected):not(.is-correct):not(.is-incorrect) {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

html.light #view-question-solver .option-item:not(.is-selected):not(.is-correct):not(.is-incorrect) .option-text,
html.light #view-question-solver .option-item:not(.is-selected):not(.is-correct):not(.is-incorrect) .option-text * {
  color: #0f172a !important;
}

html.light #view-question-solver .option-item:not(.is-selected):not(.is-correct):not(.is-incorrect) .option-bubble {
  background-color: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
}

html.light #view-question-solver .option-item:not(.is-selected):not(.is-correct):not(.is-incorrect):hover {
  background-color: #f8fafc !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08) !important;
}

/* Selected Options */
html.light #view-question-solver .option-item.is-selected,
html.light #view-question-solver .option-item.option-selected {
  background-color: #eff6ff !important;
  border: 2px solid #2563eb !important;
  box-shadow: 0 0 0 1px #2563eb, 0 4px 12px rgba(37, 99, 235, 0.12) !important;
}

html.light #view-question-solver .option-item.is-selected .option-text,
html.light #view-question-solver .option-item.is-selected .option-text *,
html.light #view-question-solver .option-item.option-selected .option-text,
html.light #view-question-solver .option-item.option-selected .option-text * {
  color: #1e40af !important;
  font-weight: 600 !important;
}

html.light #view-question-solver .option-item.is-selected .option-bubble,
html.light #view-question-solver .option-item.option-selected .option-bubble {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

/* Correct Options */
html.light #view-question-solver .option-item.is-correct,
html.light #view-question-solver .option-item.option-correct {
  background-color: #ecfdf5 !important;
  border: 2px solid #059669 !important;
  box-shadow: 0 0 0 1px #059669, 0 4px 12px rgba(16, 185, 129, 0.12) !important;
}

html.light #view-question-solver .option-item.is-correct .option-text,
html.light #view-question-solver .option-item.is-correct .option-text *,
html.light #view-question-solver .option-item.option-correct .option-text,
html.light #view-question-solver .option-item.option-correct .option-text * {
  color: #065f46 !important;
  font-weight: 600 !important;
}

html.light #view-question-solver .option-item.is-correct .option-bubble,
html.light #view-question-solver .option-item.option-correct .option-bubble {
  background-color: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
}

/* Incorrect Options */
html.light #view-question-solver .option-item.is-incorrect,
html.light #view-question-solver .option-item.option-incorrect {
  background-color: #fff1f2 !important;
  border: 2px solid #e11d48 !important;
  box-shadow: 0 0 0 1px #e11d48, 0 4px 12px rgba(225, 29, 72, 0.12) !important;
}

html.light #view-question-solver .option-item.is-incorrect .option-text,
html.light #view-question-solver .option-item.is-incorrect .option-text *,
html.light #view-question-solver .option-item.option-incorrect .option-text,
html.light #view-question-solver .option-item.option-incorrect .option-text * {
  color: #9f1239 !important;
  font-weight: 600 !important;
}

html.light #view-question-solver .option-item.is-incorrect .option-bubble,
html.light #view-question-solver .option-item.option-incorrect .option-bubble {
  background-color: #e11d48 !important;
  border-color: #e11d48 !important;
  color: #ffffff !important;
}

/* 4. Solution Panel & Explanations in Light Mode */
html.light #view-question-solver #solution-panel {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08) !important;
}

html.light #view-question-solver #solution-panel [id^="explanation-content-"],
html.light #view-question-solver #solution-panel [id^="explanation-content-"] * {
  color: #1e293b !important;
}

html.light #view-question-solver #solver-mistake-box {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light #view-question-solver .solver-tag-btn {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

html.light #view-question-solver .solver-tag-btn:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.light #view-question-solver #solver-note-input {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.light #view-question-solver #desmos-shortcut-card {
  background-color: #f0fdfa !important;
  border-color: #99f6e4 !important;
  color: #0f766e !important;
}

html.light #view-question-solver #desmos-shortcut-text {
  background-color: #ffffff !important;
  border-color: #ccfbf1 !important;
  color: #0f766e !important;
}

html.light #view-question-solver #ai-trap-analysis-box {
  background-color: #ffffff !important;
  border-color: #fecdd3 !important;
  color: #0f172a !important;
}

html.light #view-question-solver #ai-trap-explanation,
html.light #view-question-solver #ai-trap-explanation * {
  color: #1e293b !important;
}

/* 5. Passage Tables & Solution Tables in Light Mode */
html.light .passage-body table,
html.light .ai-msg-content table,
html.light #solution-panel table,
html.light .table-responsive-wrapper table {
  border-color: #cbd5e1 !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
}

html.light .table-responsive-wrapper {
  border-color: #cbd5e1 !important;
  background-color: #ffffff !important;
}

html.light .passage-body th,
html.light .ai-msg-content th,
html.light #solution-panel th,
html.light .table-responsive-wrapper th {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  font-weight: 700 !important;
}

html.light .passage-body td,
html.light .ai-msg-content td,
html.light #solution-panel td,
html.light .table-responsive-wrapper td {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html.light .passage-body td *,
html.light .passage-body th *,
html.light .ai-msg-content td *,
html.light #solution-panel td *,
html.light .table-responsive-wrapper td * {
  color: #0f172a !important;
}

html.light .passage-body tr:nth-child(even) td,
html.light .ai-msg-content tr:nth-child(even) td,
html.light #solution-panel tr:nth-child(even) td,
html.light .table-responsive-wrapper tr:nth-child(even) td {
  background-color: #f8fafc !important;
}

/* ==========================================================================
   MOBILE TOUCH TARGET & GESTURE SYSTEM (60FPS HARDENED)
   ========================================================================== */

/* 1. Option Card Touch Targets: Minimum 48px height, touch-manipulation, active spring animation */
.option-item {
  min-height: 48px !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transform: translateZ(0);
  will-change: transform;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.15s ease,
              border-color 0.15s ease,
              box-shadow 0.15s ease !important;
}

.option-item:active {
  transform: scale(0.98) translateZ(0) !important;
  transition-duration: 0.08s !important;
}

/* 2. Cross-out (Scissors) Touch Target: Dedicated 40x40px touch zone, isolated state */
.btn-crossout-option {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  position: relative !important;
  z-index: 10 !important;
  cursor: pointer !important;
  border-radius: 10px !important;
  transform: translateZ(0);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.15s ease,
              color 0.15s ease,
              border-color 0.15s ease,
              box-shadow 0.15s ease !important;
}

.btn-crossout-option:active {
  transform: scale(0.90) translateZ(0) !important;
}

/* Clear Active State for Strikethrough / Eliminated Option */
.option-item.strikethrough-option {
  opacity: 0.45 !important;
  filter: grayscale(0.4) !important;
  border-style: dashed !important;
  border-color: rgba(244, 63, 94, 0.5) !important;
  background-color: rgba(244, 63, 94, 0.04) !important;
}

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

.option-item.strikethrough-option .btn-crossout-option {
  color: #f43f5e !important;
  background-color: rgba(244, 63, 94, 0.18) !important;
  border: 1px solid rgba(244, 63, 94, 0.45) !important;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.25) !important;
}

html.light .option-item.strikethrough-option {
  background-color: rgba(255, 241, 242, 0.75) !important;
  border-color: #fca5a5 !important;
}

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

html.light .option-item.strikethrough-option .btn-crossout-option {
  color: #e11d48 !important;
  background-color: #ffe4e6 !important;
  border: 1px solid #fda4af !important;
}

/* 3. Swipe Gesture Workspace: Vertical Scroll Preservation */
#view-question-solver #left-pane,
#view-question-solver #right-pane,
#view-question-solver .exam-split-workspace,
#view-question-solver main {
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

/* 4. Mobile Input Handling for SPR Grid-In */
#grid-in-container {
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
}

#grid-in-input {
  font-size: 18px !important; /* >= 16px to prevent iOS auto-zoom */
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

#grid-in-keypad {
  touch-action: manipulation !important;
}

#grid-in-keypad .keypad-btn {
  min-height: 48px !important;
  height: 48px !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transform: translateZ(0);
  will-change: transform;
  transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.12s ease,
              border-color 0.12s ease,
              box-shadow 0.12s ease !important;
}

#grid-in-keypad .keypad-btn:active {
  transform: scale(0.96) translateZ(0) !important;
}

@media (max-width: 767px) {
  #grid-in-keypad {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }
  #grid-in-keypad .keypad-btn {
    min-height: 48px !important;
    height: 48px !important;
    font-size: 1.1rem !important;
  }
  #grid-in-container {
    padding: 12px !important;
  }
}

/* ========================================================
   MOBILE QUESTION GRID BOTTOM-SHEET ARCHITECTURE
   ======================================================== */
#modal-question-grid {
  transition: opacity 0.25s ease-out;
}

#modal-question-grid.is-open {
  opacity: 1;
}

#modal-question-grid #question-grid-sheet {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease-out;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
}

#modal-question-grid.is-open #question-grid-sheet {
  transform: translateY(0);
}

@media (max-width: 639px) {
  #modal-question-grid:not(.is-open) #question-grid-sheet {
    transform: translateY(100%);
  }
}

@media (min-width: 640px) {
  #modal-question-grid:not(.is-open) #question-grid-sheet {
    transform: translateY(16px) scale(0.98);
    opacity: 0;
  }
  #modal-question-grid.is-open #question-grid-sheet {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Light Mode Overrides for Question Grid Bottom Sheet */
html.light #modal-question-grid #question-grid-sheet {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.12), 0 20px 40px -5px rgba(0, 0, 0, 0.1) !important;
}

html.light #question-grid-drag-handle div {
  background-color: #cbd5e1 !important;
}

html.light #question-grid-drag-handle div:hover {
  background-color: #94a3b8 !important;
}

html.light #qgrid-warning-banner.bg-amber-500\/15 {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}

html.light #qgrid-warning-banner.bg-emerald-500\/15 {
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #065f46 !important;
}

html.light .qgrid-filter-btn:not(.is-active) {
  color: #475569 !important;
  background-color: transparent !important;
}

html.light .qgrid-filter-btn:not(.is-active):hover {
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
}

html.light [role="tablist"][aria-label="Bộ lọc câu hỏi"] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html.light #grid-buttons-container button.border-amber-500\/90 {
  border-color: #f59e0b !important;
  background-color: #fffbeb !important;
  color: #b45309 !important;
}

html.light #grid-buttons-container button.border-amber-500\/90:hover {
  background-color: #fef3c7 !important;
}

html.light #grid-buttons-container button.ring-emerald-500\/70 {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.4), 0 0 16px rgba(16, 185, 129, 0.35) !important;
  border-color: #059669 !important;
}

html.light #modal-question-grid .bg-slate-950\/50,
html.light #modal-question-grid .bg-slate-950\/60,
html.light #modal-question-grid .bg-slate-950\/70 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* ================= ADMIN CAMPAIGN & GROWTH MODALS ================= */
#modal-adm-campaign-edit:not(.hidden),
#modal-adm-campaign-share:not(.hidden),
#modal-adm-archetype-students:not(.hidden) {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background-color: rgba(5, 8, 17, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

#modal-adm-campaign-edit.hidden,
#modal-adm-campaign-share.hidden,
#modal-adm-archetype-students.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}