/* Bluebook Translucent Line Reader Reading Guide */
#sat-line-reader-overlay {
  pointer-events: none;
  z-index: 30;
  user-select: none;
  -webkit-user-select: none;
}

#sat-line-reader-bar {
  pointer-events: auto;
  position: relative;
  border-top: 2px solid #0284c7;
  border-bottom: 2px solid #0284c7;
  background: rgba(14, 165, 233, 0.12);
  box-shadow: 0 0 25px rgba(14, 165, 233, 0.25), inset 0 0 12px rgba(14, 165, 233, 0.08);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

html.dark #sat-line-reader-bar {
  border-top: 2px solid #38bdf8;
  border-bottom: 2px solid #38bdf8;
  background: rgba(56, 189, 248, 0.14);
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.3), inset 0 0 15px rgba(56, 189, 248, 0.1);
}

html.light #sat-line-reader-bar {
  border-top: 2px solid #0284c7;
  border-bottom: 2px solid #0284c7;
  background: rgba(2, 132, 199, 0.1);
  box-shadow: 0 0 20px rgba(2, 132, 199, 0.2), inset 0 0 10px rgba(2, 132, 199, 0.06);
}

/* Line Reader Height Variants */
#sat-line-reader-bar.line-reader-1l {
  height: 38px;
}

#sat-line-reader-bar.line-reader-2l {
  height: 66px;
}

#sat-line-reader-bar.line-reader-3l {
  height: 96px;
}

/* Line Reader Controls Grip */
#line-reader-drag-grip {
  cursor: ns-resize;
}

html.light #line-reader-drag-grip {
  background-color: rgba(248, 250, 252, 0.9) !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

html.light #sat-line-reader-bar > div:last-child {
  background-color: rgba(248, 250, 252, 0.95) !important;
  border-color: #cbd5e1 !important;
}

/* Header Active Badges for Scratchpad & Line Reader */
#btn-header-scratchpad.is-active {
  background-color: rgba(245, 158, 11, 0.2) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
  color: #fbbf24 !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3) !important;
}

#btn-header-line-reader.is-active {
  background-color: rgba(16, 185, 129, 0.2) !important;
  border-color: rgba(16, 185, 129, 0.6) !important;
  color: #34d399 !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3) !important;
}

html.light #btn-header-scratchpad.is-active {
  background-color: #fef3c7 !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
}

html.light #btn-header-line-reader.is-active {
  background-color: #d1fae5 !important;
  border-color: #10b981 !important;
  color: #047857 !important;
}


/* SỔ TAY LỖI SAI LIGHT MODE */
html.light #view-error_log .bg-slate-900,
html.light #view-error_log .bg-slate-950,
html.light #solver-mistake-box {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}
html.light #view-error_log .bg-slate-950\/60,
html.light #view-error_log .bg-slate-950\/70 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
html.light #view-error_log input,
html.light #view-error_log select,
html.light #view-error_log textarea,
html.light #solver-note-input {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html.light #error-bottleneck-card {
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%) !important;
  border-color: #bfdbfe !important;
}


/* AI WALKTHROUGH, HINT LADDER & QUESTION REMIX LIGHT MODE */
html.light #solver-walkthrough-panel {
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%) !important;
  border-color: #fde68a !important;
}
html.light #solver-hint-ladder-panel {
  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%) !important;
  border-color: #bae6fd !important;
}
html.light #solver-walkthrough-panel [class*="bg-slate-950"],
html.light #solver-walkthrough-panel .bg-slate-900\/90,
html.light #solver-hint-ladder-panel [class*="bg-slate-950"],
html.light #solver-hint-ladder-panel .bg-slate-900\/90 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}
html.light #solver-walkthrough-panel .text-white,
html.light #solver-hint-ladder-panel .text-white {
  color: #0f172a !important;
}
html.light #solver-walkthrough-panel .text-slate-300,
html.light #solver-hint-ladder-panel .text-slate-300 {
  color: #334155 !important;
}
html.light #solver-hint-ladder-panel .text-sky-200,
html.light #solver-hint-ladder-panel .text-sky-300 {
  color: #0369a1 !important;
}
html.light #solver-hint-ladder-panel .bg-sky-950\/30 {
  background-color: #f0f9ff !important;
  border-color: #bae6fd !important;
}
html.light #modal-question-remix .bg-slate-950,
html.light #modal-question-remix .bg-slate-900 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}
html.light #modal-question-remix .text-white {
  color: #0f172a !important;
}
html.light #modal-question-remix .text-slate-200,
html.light #modal-question-remix .text-slate-300 {
  color: #334155 !important;
}


/* =========================================================================
   17. PRO MEMBERSHIP & CHALLENGE QUESTIONS MODE STYLING
   ========================================================================= */

/* Pro Glow & Shimmer Effects */
.pro-badge-glow {
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.4), inset 0 0 8px rgba(254, 240, 138, 0.2);
  animation: vipBadgePulse 2.8s ease-in-out infinite;
}

.pro-glow-card {
  position: relative;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.22), inset 0 0 15px rgba(245, 158, 11, 0.05);
  border-color: rgba(245, 158, 11, 0.7) !important;
  animation: proCardGlow 3.5s ease-in-out infinite alternate;
}

@keyframes proCardGlow {
  0% {
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.2), inset 0 0 10px rgba(245, 158, 11, 0.03);
    border-color: rgba(245, 158, 11, 0.6);
  }
  100% {
    box-shadow: 0 0 35px rgba(245, 158, 11, 0.42), 0 0 15px rgba(251, 191, 36, 0.25), inset 0 0 15px rgba(245, 158, 11, 0.08);
    border-color: rgba(251, 191, 36, 0.95);
  }
}

@keyframes vipBadgePulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
    border-color: rgba(251, 191, 36, 0.6);
  }
  50% {
    box-shadow: 0 0 22px rgba(245, 158, 11, 0.65), 0 0 8px rgba(254, 240, 138, 0.4);
    border-color: rgba(251, 191, 36, 0.95);
  }
}

@keyframes goldShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gold-shimmer-btn {
  background-size: 200% 200% !important;
  animation: goldShimmer 4s ease infinite !important;
}

/* 300+ Challenge Questions Fiery Visuals */
.challenge-fire-border {
  position: relative;
  box-shadow: 0 0 30px rgba(244, 63, 94, 0.18), inset 0 0 15px rgba(244, 63, 94, 0.05);
}

.challenge-fire-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 1.5rem;
  padding: 1px;
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.6), rgba(236, 72, 153, 0.3), rgba(245, 158, 11, 0.5));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* =========================================================================
   LIGHT MODE: PRO MODAL & CHALLENGE QUESTIONS STUDIO
   ========================================================================= */

/* Pro Modal Light Theme */
html.light #modal-pro-upgrade .bg-slate-900 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light #modal-pro-upgrade .bg-slate-950,
html.light #modal-pro-upgrade .bg-slate-950\/90 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html.light #modal-pro-upgrade h2,
html.light #modal-pro-upgrade h3 {
  color: #0f172a !important;
}

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

html.light #modal-pro-upgrade .text-slate-300,
html.light #modal-pro-upgrade .text-slate-200 {
  color: #334155 !important;
}

html.light #modal-pro-upgrade .border-slate-800 {
  border-color: #e2e8f0 !important;
}

html.light #tier-card-free {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

html.light #tier-card-plus {
  background: linear-gradient(180deg, #faf5ff 0%, #ffffff 100%) !important;
  border-color: #c084fc !important;
}

html.light #tier-card-pro {
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%) !important;
  border-color: #f59e0b !important;
}

/* Challenge Questions Studio Light Theme */
html.light #view-challenge_drills .bg-slate-900,
html.light #view-challenge_drills .bg-slate-950 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light #view-challenge_drills h1,
html.light #view-challenge_drills h2,
html.light #view-challenge_drills h3,
html.light #view-challenge_drills h4,
html.light #view-challenge_drills .text-white {
  color: #0f172a !important;
}

html.light #view-challenge_drills .text-slate-300,
html.light #view-challenge_drills .text-slate-200 {
  color: #334155 !important;
}

html.light #view-challenge_drills .border-slate-800 {
  border-color: #e2e8f0 !important;
}

html.light #view-challenge_drills input,
html.light #view-challenge_drills select {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.light #view-challenge_drills .challenge-sec-btn:not(.bg-rose-600),
html.light #view-challenge_drills .challenge-status-btn:not(.bg-rose-600) {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

html.light #view-challenge_drills .challenge-mode-btn:not(.border-rose-500\/60) {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html.light #challenge-questions-list > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html.light #challenge-questions-list > div:hover {
  background-color: #fff1f2 !important;
  border-color: #f43f5e !important;
}

html.light #challenge-questions-list p {
  color: #334155 !important;
}

/* Landing Challenge Hero in Light Mode */
html.light .challenge-fire-border {
  background: linear-gradient(135deg, #fff1f2 0%, #ffffff 50%, #fff7ed 100%) !important;
  border-color: #fecdd3 !important;
  box-shadow: 0 10px 30px rgba(244, 63, 94, 0.08) !important;
}

html.light .challenge-fire-border h2 {
  color: #0f172a !important;
}

html.light .challenge-fire-border p {
  color: #334155 !important;
}

html.light .challenge-fire-border .bg-slate-950\/85 {
  background-color: #ffffff !important;
  border-color: #fecdd3 !important;
}

html.light .challenge-fire-border .bg-slate-900 {
  background-color: #f8fafc !important;
}

html.light .challenge-fire-border .text-white {
  color: #0f172a !important;
}

/* Global Toast in Light Mode */
html.light #global-toast-notification {
  background-color: #ffffff !important;
  border-color: #f59e0b !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
}

html.light #global-toast-notification .text-white {
  color: #0f172a !important;
}

html.light #global-toast-notification .text-slate-300 {
  color: #475569 !important;
}

/* ==========================================================================
   AI CHAT CONTAINER & MESSAGE BUBBLE OVERFLOW PREVENTION (THE CLARA COACH)
   ========================================================================== */
#ai-tutor-drawer {
  min-width: 320px;
  max-width: 96vw;
  max-height: 90vh;
}

@media (min-width: 768px) {
  #ai-tutor-drawer {
    right: 20px;
    top: 60px;
    left: auto;
    bottom: auto;
    width: 480px;
    height: 580px;
    min-width: 320px;
    min-height: 280px;
    max-width: 96vw;
    max-height: 90vh;
    border-radius: 1.5rem;
    z-index: 50;
    resize: both;
  }
}

@media (max-width: 767.98px) {
  #ai-tutor-drawer {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    border-radius: 0px !important;
    border: none !important;
    box-shadow: none !important;
    resize: none !important;
    z-index: 99999 !important;
  }

  #ai-tutor-drag-header {
    height: calc(56px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(56px + env(safe-area-inset-top, 0px)) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-left: 1rem !important;
    padding-right: 0.75rem !important;
    cursor: default !important;
  }

  #ai-tutor-drag-header button[onclick*="closeAITutorDrawer"],
  #ai-tutor-drag-header button[onclick*="toggleAITutorDrawer"] {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #ai-chat-messages {
    padding: 1rem !important;
    gap: 1rem !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  }

  #ai-tutor-input-bar {
    padding-top: 0.75rem !important;
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
    padding-bottom: max(0.85rem, calc(0.5rem + env(safe-area-inset-bottom, 0px))) !important;
  }

  #ai-chat-input {
    font-size: 16px !important;
  }
}

#ai-tutor-drag-header {
  min-width: 0 !important;
  width: 100% !important;
}

#ai-tutor-window-body {
  min-width: 0 !important;
  width: 100% !important;
}

#ai-tutor-quick-prompts {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#ai-tutor-quick-prompts::-webkit-scrollbar {
  display: none !important;
}

#ai-tutor-quick-prompts button {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

#ai-chat-messages {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important;
}

#ai-chat-messages > div {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.ai-msg-content {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  word-wrap: break-word !important;
  max-width: 85% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.ai-msg-content p {
  margin: 0.35rem 0 !important;
  line-height: 1.6 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.ai-msg-content p:first-child {
  margin-top: 0 !important;
}

.ai-msg-content p:last-child {
  margin-bottom: 0 !important;
}

.ai-msg-content h1,
.ai-msg-content h2,
.ai-msg-content h3,
.ai-msg-content h4,
.ai-msg-content h5,
.ai-msg-content h6 {
  font-weight: 700 !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0.35rem !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.ai-msg-content h1 { font-size: 1.15rem !important; color: #60a5fa !important; }
.ai-msg-content h2 { font-size: 1.05rem !important; color: #93c5fd !important; }
.ai-msg-content h3 { font-size: 0.95rem !important; color: #cbd5e1 !important; }
.ai-msg-content h4 { font-size: 0.88rem !important; }
html.light .ai-msg-content h1 { color: #1d4ed8 !important; }
html.light .ai-msg-content h2 { color: #1e40af !important; }
html.light .ai-msg-content h3 { color: #0f172a !important; }

.ai-msg-content pre {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  background: rgba(15, 23, 42, 0.95) !important;
  padding: 0.65rem !important;
  border-radius: 0.5rem !important;
  border: 1px solid #334155 !important;
  white-space: pre-wrap !important;
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
  margin: 0.5rem 0 !important;
}

.ai-msg-content code {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  font-size: 0.85em !important;
}

.ai-msg-content .table-responsive-wrapper,
.table-responsive-wrapper {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin: 0.6rem 0 !important;
  scrollbar-width: thin !important;
}

.ai-msg-content table,
.table-responsive-wrapper table {
  display: table !important;
  width: 100% !important;
  min-width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}

.ai-msg-content th,
.ai-msg-content td {
  padding: 0.4rem 0.6rem !important;
  font-size: 0.8rem !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* Universal Responsive Display & Inline Math Wrappers Across All Views */
.katex-display-wrapper,
.katex-display,
.ai-msg-content .katex-display-wrapper,
.ai-msg-content .katex-display,
.passage-body .katex-display,
#solution-panel .katex-display,
#solver-walkthrough-panel .katex-display,
#solver-hint-ladder-panel .katex-display,
#modal-question-remix .katex-display {
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 4px 2px !important;
  margin: 0.5rem 0 !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.katex-inline-wrapper,
.ai-msg-content .katex-inline-wrapper,
.passage-body .katex-inline-wrapper,
#solution-panel .katex-inline-wrapper,
#solver-walkthrough-panel .katex-inline-wrapper,
#solver-hint-ladder-panel .katex-inline-wrapper,
#modal-question-remix .katex-inline-wrapper {
  display: inline-block !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  vertical-align: baseline !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  line-height: normal !important;
}

.ai-msg-content .katex,
.passage-body .katex,
#solution-panel .katex,
#solver-walkthrough-panel .katex,
#solver-hint-ladder-panel .katex,
#modal-question-remix .katex {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  vertical-align: baseline !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.katex::-webkit-scrollbar,
.katex-inline-wrapper::-webkit-scrollbar,
.ai-msg-content .katex::-webkit-scrollbar,
.ai-msg-content .katex-inline-wrapper::-webkit-scrollbar {
  display: none !important;
}

/* High contrast math formulas for Walkthrough & Socratic Hint Panels */
#solver-walkthrough-panel .katex,
#solver-walkthrough-panel .katex-html,
#solver-hint-ladder-panel .katex,
#solver-hint-ladder-panel .katex-html {
  color: #f8fafc !important;
  font-weight: 500;
}
html.light #solver-walkthrough-panel .katex,
html.light #solver-walkthrough-panel .katex-html,
html.light #solver-hint-ladder-panel .katex,
html.light #solver-hint-ladder-panel .katex-html {
  color: #0f172a !important;
  font-weight: 600;
}

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

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

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

.ai-msg-content .katex-html {
  max-width: 100% !important;
  vertical-align: middle !important;
}

.ai-msg-content ul,
.ai-msg-content ol {
  padding-left: 1.25rem !important;
  margin: 0.4rem 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.ai-msg-content li {
  margin-bottom: 0.25rem !important;
  line-height: 1.55 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.ai-msg-content blockquote {
  border-left: 3px solid #6366f1 !important;
  padding-left: 0.65rem !important;
  margin: 0.5rem 0 !important;
  color: #94a3b8 !important;
  font-style: italic !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

#ai-tutor-input-bar {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#ai-chat-input {
  min-width: 0 !important;
  width: 100% !important;
  flex: 1 1 auto !important;
}

/* ==========================================================================
   QUESTION RUSH ARENA & MASTERCLASS ANIMATIONS & LIGHT MODE
   ========================================================================== */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.animate-shake {
  animation: shake 0.25s ease-in-out;
}

/* Question Rush in Dark Mode */
#view-rush .rush-opt-item {
  background-color: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(51, 65, 85, 0.8) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.15s ease-out !important;
}

#view-rush .rush-opt-item:hover {
  background-color: rgba(30, 41, 59, 0.95) !important;
  border-color: rgba(96, 165, 250, 0.8) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25) !important;
}

#view-rush .rush-opt-item.is-selected {
  background-color: rgba(37, 99, 235, 0.25) !important;
  border-color: #60a5fa !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.4) !important;
}

#view-rush .rush-opt-item.bg-emerald-600\/30,
#view-rush .rush-opt-item.is-correct {
  background-color: rgba(5, 150, 105, 0.35) !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.45) !important;
}

#view-rush .rush-opt-item.bg-rose-600\/30,
#view-rush .rush-opt-item.is-wrong {
  background-color: rgba(225, 29, 72, 0.35) !important;
  border-color: #f43f5e !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.45) !important;
}

/* Question Rush in Light Mode */
html.light #view-rush,
html.light #view-rush .bg-slate-900,
html.light #view-rush .bg-slate-950,
html.light #view-rush .bg-slate-950\/90,
html.light #view-rush .bg-slate-950\/80,
html.light #view-rush .bg-slate-950\/60 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light #view-rush h2,
html.light #view-rush h3,
html.light #view-rush .text-white {
  color: #0f172a !important;
}

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

html.light #view-rush .text-slate-400,
html.light #view-rush .text-slate-500 {
  color: #64748b !important;
}

html.light #view-rush .rush-opt-item {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html.light #view-rush .rush-opt-item:hover {
  background-color: #eff6ff !important;
  border-color: #3b82f6 !important;
  color: #1d4ed8 !important;
}

html.light #view-rush .rush-opt-item .rush-opt-badge,
html.light #view-rush .rush-opt-item span.w-6.h-6 {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

html.light #view-rush .rush-opt-item:hover .rush-opt-badge,
html.light #view-rush .rush-opt-item:hover span.w-6.h-6 {
  background-color: #2563eb !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}

html.light #view-rush .rush-time-btn.bg-slate-900,
html.light #view-rush .rush-sec-btn.bg-slate-900 {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}
html.light #view-rush .rush-time-btn.bg-slate-900:hover,
html.light #view-rush .rush-sec-btn.bg-slate-900:hover {
  background-color: #eff6ff !important;
  border-color: #3b82f6 !important;
  color: #1d4ed8 !important;
}

html.light #view-rush .rush-surge-step {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}

html.light #view-rush #rush-tab-btn-overview,
html.light #view-rush #rush-tab-btn-mistakes {
  background-color: #ffffff !important;
  color: #1e293b !important;
}

/* SAT Masterclass in Light Mode */
html.light #view-masterclass .bg-slate-900 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html.light #view-masterclass .text-white:not(button):not(button *):not(a):not(a *):not(.btn-primary):not(.btn-primary *) {
  color: #0f172a !important;
}

html.light #view-masterclass button.bg-purple-600,
html.light #view-masterclass button.bg-purple-600 *,
html.light #view-masterclass button.bg-purple-500,
html.light #view-masterclass button.bg-purple-500 *,
html.light #view-masterclass button.bg-indigo-600,
html.light #view-masterclass button.bg-indigo-600 *,
html.light #view-masterclass button.bg-indigo-500,
html.light #view-masterclass button.bg-indigo-500 *,
html.light #view-masterclass button.bg-cyan-600,
html.light #view-masterclass button.bg-cyan-600 *,
html.light #view-masterclass button.bg-emerald-600,
html.light #view-masterclass button.bg-emerald-600 * {
  color: #ffffff !important;
}

html.light #view-masterclass .text-slate-300 {
  color: #334155 !important;
}

/* ==========================================================================
   AI STREAMING & DIAGNOSTIC CARD STYLING
   ========================================================================== */
.ai-stream-cursor {
  display: inline-block;
  width: 5px;
  height: 14px;
  background-color: #60a5fa;
  margin-left: 2px;
  border-radius: 2px;
  vertical-align: middle;
  animation: streamBlink 0.8s infinite;
}

@keyframes streamBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.1; }
}

#ai-tutor-quick-prompts {
  mask-image: linear-gradient(to right, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 92%, transparent 100%);
}

/* Light Mode for AI Clinical Diagnosis */
html.light #ai-diagnosis-card {
  background-image: linear-gradient(to bottom right, #f0fdf4, #ffffff, #eff6ff) !important;
  border-color: #cbd5e1 !important;
}

html.light #ai-diagnosis-card .bg-slate-950\/80,
html.light #ai-diagnosis-card .bg-slate-950\/90 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html.light #ai-diagnosis-card .text-white {
  color: #0f172a !important;
}

html.light #ai-diagnosis-card .text-slate-200,
html.light #ai-diagnosis-card .text-slate-300 {
  color: #334155 !important;
}

/* ==========================================================================
   MATH FORMULAS & DESMOS MASTERY ULTRA-POLISH STYLING
   ========================================================================== */
#view-math-formulas [id^="formula-card-"] {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
}

#view-math-formulas [id^="formula-card-"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
}

/* Light Theme for Math Formulas View */
html.light #view-math-formulas,
html.light #view-math-formulas > div:first-child,
html.light #view-math-formulas [id^="formula-card-"],
html.light #view-math-formulas .bg-gradient-to-br:not(button):not(button *) {
  background-image: none !important;
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light #view-math-formulas .bg-slate-900,
html.light #view-math-formulas .bg-slate-900\/90,
html.light #view-math-formulas .bg-slate-900\/95 {
  background-image: none !important;
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

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

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

html.light #view-math-formulas .text-slate-200,
html.light #view-math-formulas .text-slate-300 {
  color: #334155 !important;
}

html.light #view-math-formulas .text-slate-400 {
  color: #64748b !important;
}

/* ELI5 Real-Life Metaphor Box in Light Mode */
html.light #view-math-formulas [class*="from-amber-950"] {
  background-image: none !important;
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
}
html.light #view-math-formulas [class*="from-amber-950"] .text-amber-300 {
  color: #b45309 !important;
}
html.light #view-math-formulas [class*="from-amber-950"] p {
  color: #92400e !important;
}

/* Desmos Syntax & KaTeX in Light Mode */
html.light #view-math-formulas .font-mono.text-amber-300 {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}
html.light #view-math-formulas .font-mono.text-cyan-300,
html.light #view-math-formulas .text-cyan-300 {
  color: #0e7490 !important;
}
html.light #view-math-formulas .text-cyan-400 {
  color: #0284c7 !important;
}

/* Trap Alert in Light Mode */
html.light #view-math-formulas .bg-rose-950\/30 {
  background-color: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #991b1b !important;
}
html.light #view-math-formulas .bg-rose-950\/30 b {
  color: #b91c1c !important;
}

/* Interactive Calculators Hub in Light Mode */
html.light #math-live-calculators-hub {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
}
html.light #math-live-calculators-hub h2 {
  color: #0f172a !important;
}
html.light #math-live-calculators-hub input,
html.light #math-live-calculators-hub select {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
html.light #math-formula-search-input {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* Keep action buttons with solid gradients white text */
html.light #view-math-formulas button[class*="from-cyan"] *,
html.light #view-math-formulas button[class*="bg-cyan-600"] * {
  color: #ffffff !important;
}

/* ==========================================================================
   DAILY STUDY REPORT ULTRA-LUXURY GLASSMORPHISM & KPI POLISH
   ========================================================================== */
#daily-report-printable {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

#daily-report-printable .grid > div {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#daily-report-printable .grid > div:hover {
  transform: translateY(-1.5px);
}

/* Light Theme for Daily Report View */
html.light #view-daily-report .bg-slate-900,
html.light #view-daily-report .bg-slate-900\/90,
html.light #view-daily-report .bg-slate-900\/95,
html.light #daily-report-printable {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08) !important;
}

html.light #daily-report-printable .bg-slate-950,
html.light #daily-report-printable .bg-slate-950\/70,
html.light #daily-report-printable .bg-slate-950\/80,
html.light #daily-report-printable .bg-slate-950\/90 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html.light #daily-report-printable .text-white {
  color: #0f172a !important;
}

html.light #daily-report-printable .text-slate-200,
html.light #daily-report-printable .text-slate-300 {
  color: #334155 !important;
}

html.light #daily-report-printable .text-slate-400 {
  color: #64748b !important;
}

/* High contrast numbers in light theme */
html.light #daily-kpi-score,
html.light #daily-kpi-time,
html.light #daily-kpi-accuracy,
html.light #daily-kpi-vocab {
  color: #0f172a !important;
}

/* =========================================================================
   VIBRANT LUXURY DASHBOARD STYLING & GAUGE RING ANIMATIONS
   ========================================================================= */
.dash-bg-grid {
  background-color: #030712;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 0);
  background-size: 28px 28px;
}

.dash-hero-mesh {
  background: radial-gradient(circle at 85% 15%, rgba(var(--org-primary-rgb, 59, 130, 246), 0.28) 0%, transparent 50%),
              radial-gradient(circle at 15% 85%, rgba(var(--org-accent-rgb, 99, 102, 241), 0.22) 0%, transparent 50%),
              radial-gradient(circle at 50% 50%, rgba(var(--org-primary-rgb, 14, 165, 233), 0.12) 0%, transparent 60%),
              linear-gradient(135deg, rgba(var(--org-dark-bg-rgb, 7, 12, 24), 0.98) 0%, rgba(var(--org-card-bg-rgb, 12, 20, 38), 0.95) 50%, rgba(var(--org-dark-bg-rgb, 9, 14, 29), 0.98) 100%);
  border: 1px solid rgba(var(--org-primary-rgb, 59, 130, 246), 0.35);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 50px rgba(var(--org-primary-rgb, 59, 130, 246), 0.16);
}

.dash-tile {
  position: relative;
  background: linear-gradient(145deg, rgba(var(--org-card-bg-rgb, 15, 23, 42), 0.94) 0%, rgba(var(--org-dark-bg-rgb, 10, 15, 29), 0.90) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translate3d(0, 0, 0);
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.dash-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  pointer-events: none;
}

.dash-tile:hover {
  transform: translate3d(0, -3px, 0) scale(1.01);
  border-color: rgba(var(--org-primary-rgb, 255, 255, 255), 0.35);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85), 0 0 35px rgba(var(--org-primary-rgb, 59, 130, 246), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.dash-tile-blue:hover {
  border-color: rgba(var(--org-primary-rgb, 59, 130, 246), 0.65);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85), 0 0 40px rgba(var(--org-primary-rgb, 37, 99, 235), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.dash-tile-rose:hover {
  border-color: rgba(244, 63, 94, 0.65);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85), 0 0 40px rgba(225, 29, 72, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.dash-tile-amber:hover {
  border-color: rgba(245, 158, 11, 0.65);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85), 0 0 40px rgba(217, 119, 6, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.dash-tile-purple:hover {
  border-color: rgba(168, 85, 247, 0.65);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85), 0 0 40px rgba(147, 51, 234, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.dash-tile-cyan:hover {
  border-color: rgba(6, 182, 212, 0.65);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85), 0 0 40px rgba(8, 145, 178, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.dash-tile-emerald:hover {
  border-color: rgba(16, 185, 129, 0.65);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85), 0 0 40px rgba(5, 150, 105, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Flame Pulse Animation */
@keyframes flameGlowPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.5)); }
  50% { transform: scale(1.12); filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.95)); }
}

.flame-glow-pulse {
  display: inline-block;
  animation: flameGlowPulse 2s ease-in-out infinite;
}

/* Shimmer Highlight Sweep on Hero Buttons */
@keyframes shimmerGlow {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-20deg) translateX(-150%);
  animation: shimmerGlow 4s ease-in-out infinite;
}

/* Circular Gauge Animation */
.gauge-svg circle.gauge-progress {
  transition: stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  stroke-dasharray: 264;
  stroke-dashoffset: 20;
}

/* Mini Chip Hover Interaction */
.chip-hover-glow {
  transition: all 0.2s ease;
}
.chip-hover-glow:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Light Mode Overrides for Vibrant Dashboard */
html.light .dash-bg-grid {
  background-color: #f8fafc !important;
  background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 0) !important;
}

html.light .dash-hero-mesh {
  background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.08) !important;
}

html.light .dash-tile {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important;
}

html.light .dash-tile:hover {
  border-color: #94a3b8 !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1) !important;
}
.bento-card {
  position: relative;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(10, 15, 29, 0.7) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.bento-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  pointer-events: none;
}

.bento-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
}

.bento-card-blue:hover {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 20px 40px -15px rgba(37, 99, 235, 0.3);
}

.bento-card-rose:hover {
  border-color: rgba(244, 63, 94, 0.5);
  box-shadow: 0 20px 40px -15px rgba(225, 29, 72, 0.3);
}

.bento-card-amber:hover {
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 20px 40px -15px rgba(217, 119, 6, 0.3);
}

.bento-card-cyan:hover {
  border-color: rgba(6, 182, 212, 0.5);
  box-shadow: 0 20px 40px -15px rgba(8, 145, 178, 0.3);
}

.bento-card-purple:hover {
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 20px 40px -15px rgba(147, 51, 234, 0.3);
}

.bento-card-emerald:hover {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 20px 40px -15px rgba(5, 150, 105, 0.3);
}

/* Light Theme Overrides for Bento Dashboard */
html.light .bento-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%) !important;
  border-color: rgba(203, 213, 225, 0.8) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05) !important;
}

html.light .bento-card:hover {
  border-color: #94a3b8 !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1) !important;
}

html.light .bento-card .text-white {
  color: #0f172a !important;
}

html.light .bento-card .text-slate-300,
html.light .bento-card .text-slate-400 {
  color: #475569 !important;
}

html.light .bento-card .bg-slate-950,
html.light .bento-card .bg-slate-950\/80,
html.light .bento-card .bg-slate-950\/70 {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

/* ================= SAT READING PASSAGE LEXILE & COMPLEXITY VISUALIZER ================= */

/* Subtle Purple Dotted Underline for Academic SAT Vocabulary */
.sat-vocab-word {
  border-bottom: 2px dotted #c084fc;
  text-decoration: none;
  cursor: help;
  padding: 0 1.5px;
  border-radius: 2px;
  transition: all 0.15s ease-in-out;
  color: inherit;
}

.sat-vocab-word:hover,
.sat-vocab-word:focus {
  background-color: rgba(168, 85, 247, 0.18);
  border-bottom: 2px solid #a855f7;
  color: #f3e8ff;
  outline: none;
}

html.light .sat-vocab-word {
  border-bottom: 2px dotted #9333ea;
  color: #0f172a;
}

html.light .sat-vocab-word:hover,
html.light .sat-vocab-word:focus {
  background-color: rgba(147, 51, 234, 0.12);
  border-bottom: 2px solid #7e22ce;
  color: #581c87;
}

/* Instant Definition Hover Popover */
#sat-vocab-hover-popover {
  animation: satPopFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes satPopFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Light Theme Overrides for Passage Analytics & Vocab Popover */
html.light #modal-passage-analytics .bg-gradient-to-br {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

html.light #modal-passage-analytics .bg-slate-950\/70,
html.light #modal-passage-analytics .bg-slate-950\/80,
html.light #modal-passage-analytics .bg-slate-900\/80,
html.light #modal-passage-analytics .bg-slate-900\/60,
html.light #modal-passage-analytics .bg-slate-900 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

html.light #modal-passage-analytics h3,
html.light #modal-passage-analytics .text-white {
  color: #0f172a !important;
}

html.light #sat-vocab-hover-popover {
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-color: #c084fc !important;
  color: #1e293b !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

html.light #sat-vocab-hover-popover .text-white {
  color: #0f172a !important;
}

html.light #sat-vocab-hover-popover .text-slate-300 {
  color: #334155 !important;
}

html.light #sat-vocab-hover-popover .text-slate-400 {
  color: #64748b !important;
}

html.light #sat-vocab-hover-popover .bg-slate-800 {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

html.light #passage-toolbar {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html.light #btn-passage-analytics {
  background: linear-gradient(to right, rgba(224, 231, 255, 0.8), rgba(243, 232, 255, 0.8)) !important;
  border-color: #c7d2fe !important;
  color: #3730a3 !important;
}

html.light #passage-word-count-badge {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

/* ==========================================================================
   PRINTABLE MISTAKE CHEAT SHEET & REVIEW SUITE STYLES
   ========================================================================== */

/* Light Mode Preview Styling inside Cheat Sheet Modal */
.printable-light-mode {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

.printable-light-mode .print-heading {
  color: #0f172a !important;
}

.printable-light-mode .print-subheading {
  color: #64748b !important;
}

.printable-light-mode .print-text-main {
  color: #0f172a !important;
}

.printable-light-mode .print-text-muted {
  color: #64748b !important;
}

.printable-light-mode .print-text-accent {
  color: #4f46e5 !important;
}

.printable-light-mode .print-text-success {
  color: #16a34a !important;
}

.printable-light-mode .print-doc-header {
  border-bottom-color: #4f46e5 !important;
}

.printable-light-mode .print-stat-box {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.printable-light-mode .mistake-print-card {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
  color: #0f172a !important;
}

.printable-light-mode .print-card-header {
  border-bottom-color: #e2e8f0 !important;
}

.printable-light-mode .print-text-code {
  color: #334155 !important;
}

.printable-light-mode .print-passage-box {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}

.printable-light-mode .print-prompt-text {
  color: #0f172a !important;
}

.printable-light-mode .print-opt-neutral {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

.printable-light-mode .print-opt-correct {
  background-color: #f0fdf4 !important;
  border-color: #86efac !important;
  color: #14532d !important;
}

.printable-light-mode .print-opt-mistake {
  background-color: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #7f1d1d !important;
}

.printable-light-mode .print-trap-box {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
}

.printable-light-mode .print-trap-heading {
  color: #92400e !important;
}

.printable-light-mode .print-trap-body {
  color: #78350f !important;
}

.printable-light-mode .print-notes-box {
  background-color: #f5f3ff !important;
  border-color: #ddd6fe !important;
}

.printable-light-mode .print-notes-heading {
  color: #5b21b6 !important;
}

.printable-light-mode .print-note-item {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}

.printable-light-mode .print-explanation-box {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.printable-light-mode .print-exp-header {
  border-bottom-color: #e2e8f0 !important;
  color: #0f172a !important;
}

.printable-light-mode .print-exp-body {
  color: #1e293b !important;
}

.printable-light-mode .print-card-footer {
  border-top-color: #e2e8f0 !important;
}

.printable-light-mode .print-doc-footer {
  border-top-color: #e2e8f0 !important;
}

/* ==========================================================================
   GLOBAL PRINT STYLESHEET (@media print for Mistake Cheat Sheet & Reports)
   ========================================================================== */
@media print {
  @page {
    size: A4 portrait;
    margin: 10mm 8mm;
  }

  body.allow-print {
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 10pt !important;
    line-height: 1.4 !important;
  }

  body.allow-print .no-print,
  body.allow-print #sidebar,
  body.allow-print #top-navbar,
  body.allow-print .nav-container,
  body.allow-print header,
  body.allow-print nav,
  body.allow-print #theme-toggle-btn,
  body.allow-print #sat-line-reader-overlay {
    display: none !important;
    visibility: hidden !important;
  }

  body.allow-print #modal-mistake-printable-sheet {
    position: static !important;
    inset: auto !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
    z-index: 1 !important;
  }

  body.allow-print #modal-mistake-printable-sheet > div {
    max-height: none !important;
    height: auto !important;
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    overflow: visible !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body.allow-print #print-sheet-scroll-container {
    background: #ffffff !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.allow-print #mistake-cheat-sheet-content {
    background: #ffffff !important;
    color: #0f172a !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body.allow-print .mistake-print-card {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    color: #0f172a !important;
    margin-bottom: 14pt !important;
    padding: 12pt !important;
    border-radius: 8pt !important;
  }

  body.allow-print .print-heading {
    color: #0f172a !important;
  }

  body.allow-print .print-subheading {
    color: #475569 !important;
  }

  body.allow-print .print-text-main {
    color: #0f172a !important;
  }

  body.allow-print .print-text-muted {
    color: #64748b !important;
  }

  body.allow-print .print-passage-box {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
  }

  body.allow-print .print-prompt-text {
    color: #0f172a !important;
    font-weight: bold !important;
  }

  body.allow-print .print-opt-neutral {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
  }

  body.allow-print .print-opt-correct {
    background-color: #f0fdf4 !important;
    border: 1.5px solid #22c55e !important;
    color: #14532d !important;
    font-weight: bold !important;
  }

  body.allow-print .print-opt-mistake {
    background-color: #fef2f2 !important;
    border: 1.5px solid #ef4444 !important;
    color: #7f1d1d !important;
  }

  body.allow-print .print-trap-box {
    background-color: #fffbeb !important;
    border: 1px solid #fde68a !important;
    color: #78350f !important;
  }

  body.allow-print .print-notes-box {
    background-color: #f5f3ff !important;
    border: 1px solid #ddd6fe !important;
    color: #4c1d95 !important;
  }

  body.allow-print .print-note-item {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
  }

  body.allow-print .print-explanation-box {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
  }

  body.allow-print .print-qr-container svg {
    width: 68px !important;
    height: 68px !important;
  }

  body.allow-print .katex {
    font-size: 1.05em !important;
    line-height: 1.2 !important;
  }

  body.allow-print .katex-display-wrapper {
    margin: 4pt 0 !important;
  }
}

/* =========================================================================
   DIGITAL SAT COGNITIVE VOCABULARY SUITE & 3D FLASHCARD UX ENHANCEMENTS
   ========================================================================= */

/* 1. Sound Wave Equalizer Audio Animation */
@keyframes soundWaveBar1 { 0%, 100% { height: 4px; } 50% { height: 14px; } }
@keyframes soundWaveBar2 { 0%, 100% { height: 12px; } 50% { height: 5px; } }
@keyframes soundWaveBar3 { 0%, 100% { height: 5px; } 50% { height: 15px; } }
@keyframes soundWaveBar4 { 0%, 100% { height: 13px; } 50% { height: 4px; } }

.sound-wave-container {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 16px;
  vertical-align: middle;
}
.sound-wave-bar {
  display: inline-block;
  width: 2.5px;
  height: 4px;
  background-color: currentColor;
  border-radius: 9999px;
  opacity: 0.85;
  transition: height 0.15s ease;
}
.is-speaking .sound-wave-bar:nth-child(1) { animation: soundWaveBar1 0.65s ease-in-out infinite; }
.is-speaking .sound-wave-bar:nth-child(2) { animation: soundWaveBar2 0.7s ease-in-out infinite 0.1s; }
.is-speaking .sound-wave-bar:nth-child(3) { animation: soundWaveBar3 0.55s ease-in-out infinite 0.2s; }
.is-speaking .sound-wave-bar:nth-child(4) { animation: soundWaveBar4 0.65s ease-in-out infinite 0.15s; }

/* 2. Speed Match Particle Burst Effect */
@keyframes matchParticlePop {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx, 30px), var(--ty, -40px)) scale(0);
    opacity: 0;
  }
}
.match-particle-burst {
  position: fixed;
  pointer-events: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 99999;
  box-shadow: 0 0 10px currentColor;
  animation: matchParticlePop 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 3. Greek & Latin Root Tree Visualizer Connectors */
.root-tree-stem-line {
  position: relative;
  width: 3px;
  height: 28px;
  background: linear-gradient(to bottom, rgba(16, 185, 129, 0.9), rgba(16, 185, 129, 0.3));
  margin: 0 auto;
}
.root-tree-stem-dot {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.8);
}
.root-tree-junction-bar {
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(16, 185, 129, 0.5) 20%, rgba(16, 185, 129, 0.5) 80%, transparent);
  margin-bottom: 1.5rem;
}
.root-branch-card {
  position: relative;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}
.root-branch-card::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 14px;
  background: rgba(16, 185, 129, 0.35);
  pointer-events: none;
}
.root-branch-card:hover {
  transform: translateY(-4px);
  border-color: rgba(16, 185, 129, 0.6) !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7), 0 0 24px rgba(16, 185, 129, 0.2) !important;
}

/* 4. Leitner 5-Box Pipeline Visuals */
.leitner-pipe-node {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.leitner-pipe-node:hover {
  transform: translateY(-2px);
}
.leitner-mini-progress {
  height: 4px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.leitner-mini-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* 6. Socratic Clue Drawer */
.socratic-clue-drawer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin 0.3s ease;
}
.socratic-clue-drawer.is-open {
  max-height: 250px;
  opacity: 1;
  margin-top: 0.75rem;
}

/* =========================================================================
   ENTERPRISE ADMIN COCKPIT (LINEAR / STRIPE DASHBOARD AESTHETICS)
   ========================================================================= */

/* Executive Card Elevation & Surface Polish */
.adm-cockpit-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.94) 0%, rgba(10, 15, 29, 0.96) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.adm-cockpit-card:hover {
  border-color: rgba(59, 130, 246, 0.35) !important;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.8), 0 0 24px rgba(59, 130, 246, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Touch Target & Typography Scaling Rules (Phase 2 Task 8) */
@media (pointer: coarse), (max-width: 768px) {
  button,
  a,
  input,
  select,
  textarea,
  [role="button"],
  [role="tab"],
  [role="option"],
  [role="radio"],
  .btn,
  .adm-touch-btn,
  .adm-subtab-item,
  .challenge-sec-btn,
  .challenge-status-btn,
  .challenge-mode-btn,
  .rush-opt-item,
  .rush-time-btn,
  .rush-sec-btn,
  .btn-crossout-option {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Typography scaling safeguard */
.ai-msg-content th,
.ai-msg-content td,
.adm-pill {
  font-size: 0.75rem; /* 12px text-xs minimum for adjacent card/body text */
}

/* Linear-style Micro Glow Stat Cards */
.adm-stat-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 70%),
              linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(11, 16, 32, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

.adm-stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* Sleek Sub-Tab Nav Bar & Segmented Controller (Linear Segmented Control) */
.segmented-controller,
.adm-subtab-bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem;
  border-radius: 1.25rem;
  background: rgba(10, 14, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px -8px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.adm-subtab-bar::-webkit-scrollbar {
  display: none;
}

.adm-subtab-item {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: 0.875rem;
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.adm-subtab-item.active {
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.adm-subtab-item:not(.active) {
  color: #94a3b8;
}

.adm-subtab-item:not(.active):hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Touch-Optimized Action Target (>= 44px ergonomics) */
.adm-touch-btn {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.adm-touch-btn:active {
  transform: scale(0.97);
}

/* High-Contrast Readable Status Pills */
.adm-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem; /* 12px (text-xs) minimum size for readability */
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}

.adm-pill-active {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

.adm-pill-pro {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

.adm-pill-plus {
  background: rgba(168, 85, 247, 0.15) !important;
  color: #c084fc !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
}

.adm-pill-free {
  background: rgba(100, 116, 139, 0.18) !important;
  color: #cbd5e1 !important;
  border-color: rgba(100, 116, 139, 0.3) !important;
}

.adm-pill-superadmin {
  background: rgba(244, 63, 94, 0.18) !important;
  color: #fda4af !important;
  border-color: rgba(244, 63, 94, 0.4) !important;
}

.adm-pill-expired,
.adm-pill-archived {
  background: rgba(51, 65, 85, 0.4) !important;
  color: #94a3b8 !important;
  border-color: rgba(71, 85, 105, 0.4) !important;
}

/* Executive Data Tables Refinements */
.adm-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.85);
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.adm-table-wrap::-webkit-scrollbar {
  height: 6px;
}
.adm-table-wrap::-webkit-scrollbar-track {
  background: rgba(10, 15, 30, 0.8);
  border-radius: 4px;
}
.adm-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(71, 85, 105, 0.6);
  border-radius: 4px;
}
.adm-table-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.9);
}

.adm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

.adm-table th {
  padding: 0.875rem 1rem;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  background: rgba(8, 12, 24, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.adm-table td {
  padding: 0.875rem 1rem;
  font-size: 0.8125rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background-color 0.15s ease;
}

.adm-table tbody tr:last-child td {
  border-bottom: none;
}

.adm-table tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.035);
}

/* Light mode overrides for admin portal */
html.light #view-admin .adm-cockpit-card,
html.light #view-admin .adm-stat-card,
html.light #view-admin .adm-table-wrap {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

html.light #view-admin .adm-subtab-bar {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

html.light #view-admin .adm-subtab-item:not(.active) {
  color: #475569 !important;
}

html.light #view-admin .adm-table th {
  background: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
  color: #64748b !important;
}

html.light #view-admin .adm-table td {
  border-bottom-color: #f1f5f9 !important;
}

html.light #view-admin .adm-table tbody tr:hover td {
  background-color: #f8fafc !important;
}

/* ==========================================================================
   VIEW: SUBSCRIPTION STUDIO LIGHT THEME (Executive Linear / Stripe Style)
   ========================================================================== */
html.light #view-subscription {
  background-color: #f8fafc;
  color: #0f172a;
}

html.light #view-subscription .bg-slate-900,
html.light #view-subscription .bg-slate-900\/90,
html.light #view-subscription .bg-slate-900\/80 {
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}

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

html.light #view-subscription .text-slate-300,
html.light #view-subscription .text-slate-400 {
  color: #475569 !important;
}

html.light #view-subscription .bg-slate-950,
html.light #view-subscription .bg-slate-950\/80 {
  background-color: #f1f5f9 !important;
  background-image: none !important;
  border-color: #e2e8f0 !important;
}

/* Clean borders & card contours */
html.light #view-subscription .border-slate-800,
html.light #view-subscription .border-slate-800\/90,
html.light #view-subscription .border-slate-800\/80,
html.light #view-subscription .border-slate-700,
html.light #view-subscription .border-slate-700\/80 {
  border-color: #e2e8f0 !important;
}

html.light #view-subscription .divide-slate-800\/60 > * + * {
  border-color: #e2e8f0 !important;
}

/* Linear/Stripe input elements */
html.light #view-subscription input {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.light #view-subscription input::placeholder {
  color: #94a3b8 !important;
}

/* Preserve high contrast on action & toggle buttons */
html.light #view-subscription button.bg-blue-600,
html.light #view-subscription button.bg-blue-600 *,
html.light #view-subscription button[class*="bg-gradient-"]:not(.gold-shimmer-btn):not([class*="from-amber"]):not([class*="to-yellow"]),
html.light #view-subscription button[class*="bg-gradient-"]:not(.gold-shimmer-btn):not([class*="from-amber"]):not([class*="to-yellow"]) * {
  color: #ffffff !important;
}

html.light #view-subscription .gold-shimmer-btn,
html.light #view-subscription .gold-shimmer-btn *,
html.light #view-subscription [class*="from-amber-500"].text-slate-950,
html.light #view-subscription [class*="from-amber-500"].text-slate-950 * {
  color: #0f172a !important;
}

/* =========================================================================
   LUXURY CYBERPUNK / GLASSMORPHIC ADMIN COCKPIT ENHANCEMENTS
   ========================================================================= */

@keyframes admGradientRotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes admRadarPing {
  0% {
    transform: scale(0.95);
    opacity: 0.9;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1.8);
    opacity: 0;
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    opacity: 0;
  }
}

@keyframes admRadarSweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes admChartGrow {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes admChartPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.4)); }
  50% { filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.8)); }
}

.adm-cockpit-card-cyber,
.adm-cockpit-card {
  position: relative;
  border-radius: 1.5rem !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(10, 15, 29, 0.96) 100%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.adm-cockpit-card-cyber::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 1.5rem;
  padding: 1px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6);
  background-size: 300% 300%;
  animation: admGradientRotate 6s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.adm-cockpit-card-cyber:hover::before {
  opacity: 1;
}

.adm-cockpit-card:hover,
.adm-cockpit-card-cyber:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.85), 0 0 24px rgba(59, 130, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.adm-radar-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background-color: #10b981;
  box-shadow: 0 0 8px #10b981;
}

.adm-radar-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 9999px;
  border: 1.5px solid #10b981;
  animation: admRadarPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
}

.adm-radar-dot-amber {
  background-color: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
}
.adm-radar-dot-amber::after {
  border-color: #f59e0b;
}

.adm-radar-dot-rose {
  background-color: #f43f5e;
  box-shadow: 0 0 8px #f43f5e;
}
.adm-radar-dot-rose::after {
  border-color: #f43f5e;
}

.adm-chart-bar-anim {
  transform-origin: bottom;
  animation: admChartGrow 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.adm-chart-line-anim {
  animation: admChartPulse 3s ease-in-out infinite;
}

/* Light mode luxury cockpit overrides */
html.light .adm-cockpit-card-cyber,
html.light .adm-cockpit-card {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.12) !important;
}

html.light .adm-cockpit-card-cyber::before {
  opacity: 0.6;
  background: linear-gradient(90deg, #2563eb, #7c3aed, #db2777, #2563eb);
}