/* ==========================================================================
   Zero Gravity App Light Theme
   Central override layer for the logged-in app only. Landing page stays separate.
   Change the light palette here first when the whole app theme needs tuning.
   ========================================================================== */

html[data-theme="light"] {
  --bg-primary: #F6F8FC;
  --bg-secondary: #EEF2F7;
  --bg-card: #FFFFFF;
  --bg-card2: #F8FAFC;
  --text-primary: #111827;
  --text-secondary: #5B667A;
  --text-muted: #8A94A6;
  --border: #DDE3EC;
  --border-soft: #E8EDF5;
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(17, 24, 39, 0.08);
  --glass-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  --bg-gradient: linear-gradient(135deg, #F6F8FC 0%, #EEF2F7 100%);
  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  --primary-dim: rgba(37, 99, 235, 0.10);
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 18% -8%, rgba(37, 99, 235, 0.10), transparent 28rem),
    radial-gradient(circle at 92% 6%, rgba(14, 165, 233, 0.08), transparent 24rem),
    #F6F8FC !important;
  color: #111827 !important;
}

html[data-theme="light"] .app-wrapper,
html[data-theme="light"] .zg-app-layout,
html[data-theme="light"] .dashboard-container,
html[data-theme="light"] .dashboard-main,
html[data-theme="light"] .page-shell,
html[data-theme="light"] .main-content,
html[data-theme="light"] .content-area {
  background: transparent !important;
  color: #111827 !important;
}

html[data-theme="light"] .sn-drawer,
html[data-theme="light"] .sn-drawer-container,
html[data-theme="light"] .bottom-nav,
html[data-theme="light"] .top-bar,
html[data-theme="light"] .glass-header {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: #DDE3EC !important;
  color: #111827 !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .card,
html[data-theme="light"] .dashboard-card,
html[data-theme="light"] .subject-card,
html[data-theme="light"] .chapter-card,
html[data-theme="light"] .setup-group,
html[data-theme="light"] .activity-card,
html[data-theme="light"] .progress-card,
html[data-theme="light"] .profile-card,
html[data-theme="light"] .settings-card,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .mastery-tile,
html[data-theme="light"] .goal-center,
html[data-theme="light"] .pulse-section,
html[data-theme="light"] .resume-frame,
html[data-theme="light"] .welcome-hub,
html[data-theme="light"] .action-card,
html[data-theme="light"] .resume-row,
html[data-theme="light"] .dashboard-empty-state,
html[data-theme="light"] .bookmark-card,
html[data-theme="light"] .question-card,
html[data-theme="light"] .note-card,
html[data-theme="light"] .content-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(17, 24, 39, 0.12) !important;
  color: #111827 !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 12px 26px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .mastery-tile:hover,
html[data-theme="light"] .action-card:hover,
html[data-theme="light"] .resume-row:hover,
html[data-theme="light"] .goal-center:hover,
html[data-theme="light"] .subject-card:hover,
html[data-theme="light"] .chapter-card:hover {
  background: #FFFFFF !important;
  border-color: color-mix(in srgb, var(--accent) 34%, #DDE3EC) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 16px 32px rgba(15, 23, 42, 0.10) !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] .section-title,
html[data-theme="light"] .activity-name,
html[data-theme="light"] .sn-drawer-title {
  color: #111827 !important;
}

html[data-theme="light"] p,
html[data-theme="light"] .activity-status,
html[data-theme="light"] .text-muted,
html[data-theme="light"] .sn-drawer-subtitle,
html[data-theme="light"] .profile-subtitle,
html[data-theme="light"] .dashboard-kicker,
html[data-theme="light"] .mastery-subtitle,
html[data-theme="light"] .mastery-stat-label {
  color: #5B667A !important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: #FFFFFF !important;
  color: #111827 !important;
  border-color: #DDE3EC !important;
}

html[data-theme="light"] .mission-card,
html[data-theme="light"] .hero-card,
html[data-theme="light"] .chapter-hero {
  color: #FFFFFF !important;
}

html[data-theme="light"] .mission-card h1,
html[data-theme="light"] .mission-card h2,
html[data-theme="light"] .mission-card h3,
html[data-theme="light"] .mission-card p,
html[data-theme="light"] .mission-card span,
html[data-theme="light"] .hero-card h1,
html[data-theme="light"] .hero-card h2,
html[data-theme="light"] .hero-card p,
html[data-theme="light"] .chapter-hero h1,
html[data-theme="light"] .chapter-hero h2,
html[data-theme="light"] .chapter-hero p {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Dashboard and reusable study cards */
html[data-theme="light"] .goal-center {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)) !important;
}

html[data-theme="light"] .goal-center::before {
  opacity: 0.22 !important;
  filter: blur(30px) !important;
}

html[data-theme="light"] .goal-ring-stack {
  filter: none !important;
}

html[data-theme="light"] .goal-ring-bg {
  stroke: #E5EAF3 !important;
}

html[data-theme="light"] #masteryDot {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 35%, transparent)) !important;
}

html[data-theme="light"] .goal-lbl-inner span,
html[data-theme="light"] #masteryPctTxt {
  color: #111827 !important;
}

html[data-theme="light"] .mastery-stat-pill {
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .pulse-bar {
  background: #EDF2F8 !important;
  border-color: #DDE3EC !important;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .pulse-bar.is-empty {
  background: repeating-linear-gradient(
    180deg,
    rgba(148, 163, 184, 0.16) 0 6px,
    rgba(148, 163, 184, 0.08) 6px 12px
  ) !important;
}

html[data-theme="light"] .resume-progress-bar,
html[data-theme="light"] .mastery-progress-track {
  background: #E8EEF6 !important;
}

html[data-theme="light"] .mission-card {
  box-shadow: 0 14px 30px rgba(30, 64, 175, 0.16) !important;
}

html[data-theme="light"] .quick-actions-grid .action-card .icon {
  color: #334155 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .quick-actions-grid .action-card .icon svg {
  stroke: currentColor !important;
  filter: none !important;
}

html[data-theme="light"] .quick-actions-grid .action-card:hover .icon {
  color: var(--accent) !important;
}

@media (max-width: 600px) {
  html[data-theme="light"] .horizontal-mastery {
    padding: 6px 10px 14px 10px !important;
    gap: 14px !important;
  }

  html[data-theme="light"] .mastery-tile {
    flex-basis: 150px !important;
    min-height: 132px !important;
    padding: 14px !important;
  }
}

/* ZG neutral hero cards - temporary launch theme */
html[data-theme="light"] .subjects-hero,
html[data-theme="light"] .chapters-hero,
html[data-theme="light"] .chapter-hero,
html[data-theme="light"] .video-hero,
html[data-theme="light"] .lab-hero,
html[data-theme="light"] .podcast-hero,
html[data-theme="light"] .solved-hero,
html[data-theme="light"] .result-hero,
html[data-theme="light"] .hero-card,
html[data-theme="light"] .hero-section,
html[data-theme="light"] .card.hero {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)) !important;
  border: 1px solid rgba(17, 24, 39, 0.12) !important;
  color: #111827 !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 12px 26px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .subjects-hero::after,
html[data-theme="light"] .chapters-hero::after,
html[data-theme="light"] .chapter-hero::after,
html[data-theme="light"] .video-hero::after,
html[data-theme="light"] .lab-hero::before,
html[data-theme="light"] .hero-card::after {
  display: none !important;
  opacity: 0 !important;
}

html[data-theme="light"] .subjects-hero h1,
html[data-theme="light"] .subjects-hero .heading-1,
html[data-theme="light"] .chapters-hero h1,
html[data-theme="light"] .chapter-hero h1,
html[data-theme="light"] .chapter-hero h2,
html[data-theme="light"] .video-hero h1,
html[data-theme="light"] .video-hero h2,
html[data-theme="light"] .lab-hero h1,
html[data-theme="light"] .podcast-hero-title,
html[data-theme="light"] .solved-hero .hero-title,
html[data-theme="light"] .result-hero h1,
html[data-theme="light"] .hero-card h1,
html[data-theme="light"] .hero-card h2,
html[data-theme="light"] .card.hero h1 {
  color: #111827 !important;
}

html[data-theme="light"] .subjects-hero p,
html[data-theme="light"] .subjects-hero-subtitle,
html[data-theme="light"] .chapters-hero p,
html[data-theme="light"] .chapter-hero p,
html[data-theme="light"] .chapter-hero .hero-subject,
html[data-theme="light"] .video-hero p,
html[data-theme="light"] .video-hero .hero-bottom,
html[data-theme="light"] .lab-hero-sub,
html[data-theme="light"] .podcast-hero-subtitle,
html[data-theme="light"] .solved-hero .hero-subtitle,
html[data-theme="light"] .result-hero p,
html[data-theme="light"] .hero-card p,
html[data-theme="light"] .card.hero p {
  color: #5B667A !important;
}

html[data-theme="light"] .hero-icon-svg,
html[data-theme="light"] .lab-hero-badge,
html[data-theme="light"] .podcast-hero-progress-ring {
  background: rgba(37, 99, 235, 0.10) !important;
  border: 1px solid rgba(37, 99, 235, 0.18) !important;
  color: #2563EB !important;
  box-shadow: none !important;
}

html[data-theme="light"] .hero-icon-svg svg,
html[data-theme="light"] .lab-hero svg {
  stroke: currentColor !important;
}

html[data-theme="light"] .hero-metric-pill,
html[data-theme="light"] .hero-stats .stat-card,
html[data-theme="light"] .chapter-hero .stat-card,
html[data-theme="light"] .video-hero .hero-pill {
  background: #F1F5F9 !important;
  border: 1px solid #DDE3EC !important;
  color: #334155 !important;
  box-shadow: none !important;
}

/* ZG chapter hero stat neutral fix */
html[data-theme="light"] .chapter-hero .stat-crumb {
  background: #F1F5F9 !important;
  border: 1px solid #DDE3EC !important;
  color: #334155 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .chapter-hero .stat-crumb span {
  color: #111827 !important;
}

html[data-theme="light"] .chapter-hero .stat-crumb label {
  color: #5B667A !important;
}

/* ZG profile light leftovers */
html[data-theme="light"] .profile-page .section-label,
html[data-theme="light"] .profile-page .section-kicker,
html[data-theme="light"] .profile-page .profile-section-title,
html[data-theme="light"] .profile-page .eyebrow,
html[data-theme="light"] .profile-page .learning-label,
html[data-theme="light"] .menu-section-label {
  color: #5B667A !important;
}

html[data-theme="light"] .profile-page .edit-btn,
html[data-theme="light"] .profile-page .profile-edit-btn,
html[data-theme="light"] .profile-page button.edit,
html[data-theme="light"] .profile-page [data-action="edit-profile"],
html[data-theme="light"] .edit-pill-btn {
  background: #F1F5F9 !important;
  border: 1px solid #DDE3EC !important;
  color: #111827 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .profile-page .back-btn,
html[data-theme="light"] .profile-page .nav-back,
html[data-theme="light"] .profile-page .icon-button,
html[data-theme="light"] .top-header .back-btn {
  background: #FFFFFF !important;
  border-color: #DDE3EC !important;
  color: #334155 !important;
}

html[data-theme="light"] .profile-page .profile-hero,
html[data-theme="light"] .profile-page .profile-card,
html[data-theme="light"] .profile-card.glass-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)) !important;
}

html[data-theme="light"] .profile-page .profile-list,
html[data-theme="light"] .profile-page .settings-list,
html[data-theme="light"] .profile-page .learning-list,
html[data-theme="light"] .menu-card.glass-card,
html[data-theme="light"] .stats-row.glass-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(17, 24, 39, 0.12) !important;
}

html[data-theme="light"] .profile-page .profile-row,
html[data-theme="light"] .profile-page .settings-row,
html[data-theme="light"] .profile-page .learning-row,
html[data-theme="light"] .menu-item {
  color: #111827 !important;
  border-color: #E8EDF5 !important;
}

html[data-theme="light"] .profile-page .profile-row small,
html[data-theme="light"] .profile-page .settings-row small,
html[data-theme="light"] .profile-page .learning-row small,
html[data-theme="light"] .menu-subtitle,
html[data-theme="light"] .profile-meta,
html[data-theme="light"] .stat-label {
  color: #5B667A !important;
}

html[data-theme="light"] .menu-title,
html[data-theme="light"] .profile-name {
  color: #111827 !important;
}

html[data-theme="light"] .menu-arrow,
html[data-theme="light"] .menu-arrow svg {
  color: #94A3B8 !important;
  stroke: currentColor !important;
}

/* ZG light drawer active state */
html[data-theme="light"] .sn-drawer-link.active,
html[data-theme="light"] .sn-drawer a.active,
html[data-theme="light"] .sidebar .active {
  background:
    linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(37, 99, 235, 0.08)) !important;
  border-color: rgba(79, 70, 229, 0.24) !important;
  color: #111827 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .sn-drawer-link.active svg,
html[data-theme="light"] .sn-drawer-link.active .sn-drawer-icon,
html[data-theme="light"] .sn-drawer a.active svg {
  color: #4F46E5 !important;
  stroke: currentColor !important;
}

html[data-theme="light"] .sn-drawer-link,
html[data-theme="light"] .sn-drawer a:not(.active) {
  color: #4B5567 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .sn-drawer-link svg,
html[data-theme="light"] .sn-drawer-link .sn-drawer-icon,
html[data-theme="light"] .sn-drawer a:not(.active) svg {
  color: #64748B !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

html[data-theme="light"] .sn-drawer-link:hover,
html[data-theme="light"] .sn-drawer a:not(.active):hover {
  color: #111827 !important;
  background: rgba(79, 70, 229, 0.07) !important;
}

/* ZG MCQ quiz light theme polish */
html[data-theme="light"] .mcq-container,
html[data-theme="light"] .quiz-interface {
  color: #111827 !important;
}

html[data-theme="light"] .quiz-info .question-num,
html[data-theme="light"] .question-num {
  color: #5B667A !important;
}

html[data-theme="light"] .progress-bar-container {
  background: #E8EEF6 !important;
}

html[data-theme="light"] .question-text {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(17, 24, 39, 0.12) !important;
  color: #111827 !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 12px 26px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .question-text em,
html[data-theme="light"] .question-text i {
  color: inherit !important;
}

html[data-theme="light"] .option-item {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(17, 24, 39, 0.12) !important;
  color: #111827 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .option-item:hover {
  background: rgba(37, 99, 235, 0.07) !important;
  border-color: rgba(37, 99, 235, 0.32) !important;
}

html[data-theme="light"] .option-item > div:first-child {
  background: #F1F5F9 !important;
  color: #334155 !important;
}

html[data-theme="light"] .opt-text,
html[data-theme="light"] .option-text,
html[data-theme="light"] .option-item em,
html[data-theme="light"] .option-item i {
  color: #111827 !important;
}

html[data-theme="light"] .option-item.selected {
  background: rgba(37, 99, 235, 0.09) !important;
  border-color: rgba(37, 99, 235, 0.52) !important;
}

html[data-theme="light"] .option-item.correct {
  background: rgba(16, 185, 129, 0.10) !important;
  border-color: rgba(16, 185, 129, 0.58) !important;
}

html[data-theme="light"] .option-item.correct > div:first-child {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #047857 !important;
}

html[data-theme="light"] .option-item.wrong {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.55) !important;
}

html[data-theme="light"] .option-item.wrong > div:first-child {
  background: rgba(245, 158, 11, 0.17) !important;
  color: #92400E !important;
}

html[data-theme="light"] #mcq-bookmark-btn,
html[data-theme="light"] #zg-flag-trigger,
html[data-theme="light"] .btn-skip-q {
  background: #FFFFFF !important;
  border: 1px solid #DDE3EC !important;
  color: #334155 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] #mcq-bookmark-btn.bookmarked {
  background: rgba(37, 99, 235, 0.10) !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
  color: #2563EB !important;
}

html[data-theme="light"] .btn-skip-q:hover,
html[data-theme="light"] #mcq-bookmark-btn:hover,
html[data-theme="light"] #zg-flag-trigger:hover {
  background: #F8FAFC !important;
  border-color: rgba(37, 99, 235, 0.30) !important;
  color: #1D4ED8 !important;
}

html[data-theme="light"] .btn-next-q {
  background: linear-gradient(135deg, #4F46E5, #2563EB) !important;
  color: #FFFFFF !important;
  border: 0 !important;
}

html[data-theme="light"] .expl-card,
html[data-theme="light"] .explanation-box,
html[data-theme="light"] #feedbackArea .card {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(17, 24, 39, 0.12) !important;
  color: #111827 !important;
}

html[data-theme="light"] .quiz-notice-card {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(17, 24, 39, 0.12) !important;
  color: #111827 !important;
}

html[data-theme="light"] .quiz-notice-message,
html[data-theme="light"] .quiz-notice-kicker {
  color: #5B667A !important;
}

/* ZG MCQ report light theme polish */
html[data-theme="light"] .result-container {
  color: #111827 !important;
}

html[data-theme="light"] .share-card-container,
html[data-theme="light"] .review-card,
html[data-theme="light"] .review-item,
html[data-theme="light"] .analysis-card,
html[data-theme="light"] .result-card,
html[data-theme="light"] .summary-card,
html[data-theme="light"] .paywall-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(17, 24, 39, 0.12) !important;
  color: #111827 !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 12px 26px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .section-title,
html[data-theme="light"] .review-title,
html[data-theme="light"] .paywall-title {
  color: #111827 !important;
}

html[data-theme="light"] .paywall-msg,
html[data-theme="light"] .review-meta,
html[data-theme="light"] .review-subtitle {
  color: #5B667A !important;
}

html[data-theme="light"] .filter-chip,
html[data-theme="light"] .matrix-cell,
html[data-theme="light"] .question-map-cell {
  background: #F1F5F9 !important;
  border: 1px solid #DDE3EC !important;
  color: #334155 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .filter-chip.active,
html[data-theme="light"] .matrix-cell.active {
  background: rgba(79, 70, 229, 0.12) !important;
  border-color: rgba(79, 70, 229, 0.28) !important;
  color: #4F46E5 !important;
}

html[data-theme="light"] .chip-mistakes,
html[data-theme="light"] .matrix-cell.wrong,
html[data-theme="light"] .question-map-cell.wrong {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.30) !important;
  color: #92400E !important;
}

html[data-theme="light"] .matrix-cell.correct,
html[data-theme="light"] .question-map-cell.correct {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.30) !important;
  color: #047857 !important;
}

html[data-theme="light"] .share-btn,
html[data-theme="light"] .cert-share-btn,
html[data-theme="light"] .action-bar button,
html[data-theme="light"] .action-bar a {
  border: 1px solid rgba(17, 24, 39, 0.12) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .share-btn-download,
html[data-theme="light"] .share-btn-whatsapp,
html[data-theme="light"] .share-btn-instagram,
html[data-theme="light"] .cert-btn-download,
html[data-theme="light"] .cert-btn-whatsapp {
  color: #FFFFFF !important;
}

html[data-theme="light"] .cert-outer,
html[data-theme="light"] .cert-inner {
  background: #FFFFFF !important;
  color: #111827 !important;
}

/* ZG MCQ explanation light visibility */
html[data-theme="light"] .expl-card {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(17, 24, 39, 0.12) !important;
  border-left: 3px solid #4F46E5 !important;
  color: #111827 !important;
}

html[data-theme="light"] .expl-body-label {
  color: #2563EB !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .expl-text,
html[data-theme="light"] .expl-text *,
html[data-theme="light"] .expl-card p,
html[data-theme="light"] .expl-card span,
html[data-theme="light"] .expl-card div,
html[data-theme="light"] .expl-card li {
  color: #334155 !important;
}

html[data-theme="light"] .expl-text strong,
html[data-theme="light"] .expl-card strong,
html[data-theme="light"] .expl-card b {
  color: #111827 !important;
}

html[data-theme="light"] #explVerdict,
html[data-theme="light"] #explVerdict * {
  color: #92400E !important;
}

html[data-theme="light"] .expl-card a {
  color: #2563EB !important;
}

/* ZG MCQ report modal and share-area fix */
html[data-theme="light"] .quiz-notice-overlay {
  background: rgba(15, 23, 42, 0.48) !important;
  backdrop-filter: blur(10px) !important;
}

html[data-theme="light"] .quiz-notice-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(17, 24, 39, 0.12) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22) !important;
}

html[data-theme="light"] .quiz-notice-title {
  color: #111827 !important;
}

html[data-theme="light"] .quiz-notice-kicker {
  color: #64748B !important;
}

html[data-theme="light"] .quiz-notice-message {
  color: #475569 !important;
}

html[data-theme="light"] .quiz-notice-secondary {
  background: #F1F5F9 !important;
  border: 1px solid #DDE3EC !important;
  color: #334155 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .quiz-notice-secondary:hover {
  background: #E8EEF6 !important;
  color: #111827 !important;
}

html[data-theme="light"] .quiz-notice-primary {
  background: linear-gradient(135deg, #4F46E5, #2563EB) !important;
  color: #FFFFFF !important;
  border: 0 !important;
}

html[data-theme="light"] .share-section {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 32px !important;
}

html[data-theme="light"] .share-card-container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 18px !important;
}

html[data-theme="light"] .share-card {
  width: min(100%, 360px) !important;
  margin: 0 auto !important;
}

html[data-theme="light"] .share-btn-row {
  width: min(100%, 420px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html[data-theme="light"] .share-btn {
  min-height: 44px !important;
  border-radius: 14px !important;
  font-size: 0.82rem !important;
  white-space: nowrap !important;
}

html[data-theme="light"] .share-btn-download {
  background: #FFFFFF !important;
  color: #334155 !important;
  border: 1px solid #DDE3EC !important;
}

html[data-theme="light"] .share-btn-whatsapp {
  background: #22C55E !important;
  color: #FFFFFF !important;
  border-color: rgba(34, 197, 94, 0.20) !important;
}

html[data-theme="light"] .share-btn-instagram {
  color: #FFFFFF !important;
}

@media (max-width: 520px) {
  html[data-theme="light"] .result-container {
    padding: 16px 12px 90px !important;
  }

  html[data-theme="light"] .share-card {
    width: min(100%, 330px) !important;
  }

  html[data-theme="light"] .share-btn-row {
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  html[data-theme="light"] .share-btn {
    width: 100% !important;
  }
}

/* ZG flashcard flow light polish */
html[data-theme="light"] .flashcard,
html[data-theme="light"] .flashcard-face,
html[data-theme="light"] .card-stack-wrap {
  color: #111827 !important;
}

html[data-theme="light"] .flashcard-face {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)) !important;
  border: 1px solid rgba(17, 24, 39, 0.12) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 18px 42px rgba(15, 23, 42, 0.10) !important;
}

html[data-theme="light"] .flashcard h2,
html[data-theme="light"] #cardQuestion,
html[data-theme="light"] #cardAnswer {
  color: #111827 !important;
}

html[data-theme="light"] .card-number,
html[data-theme="light"] .tap-hint,
html[data-theme="light"] .session-info {
  color: #5B667A !important;
}

html[data-theme="light"] .victory-footer {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(17, 24, 39, 0.10) !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10) !important;
  margin-bottom: 16px !important;
}

html[data-theme="light"] .action-btn.btn-forgot {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.28) !important;
  color: #92400E !important;
}

html[data-theme="light"] .action-btn.btn-knew {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.28) !important;
  color: #047857 !important;
}

html[data-theme="light"] .action-btn .btn-count {
  background: rgba(255, 255, 255, 0.70) !important;
  color: inherit !important;
}

html[data-theme="light"] .nav-arrow {
  background: #F1F5F9 !important;
  border: 1px solid #DDE3EC !important;
  color: #334155 !important;
}

html[data-theme="light"] .nav-arrow:hover {
  background: #E8EEF6 !important;
  color: #111827 !important;
}

html[data-theme="light"] .world-class-box,
html[data-theme="light"] #hintContent {
  background: #F8FAFC !important;
  border: 1px solid #DDE3EC !important;
  color: #334155 !important;
}

html[data-theme="light"] .box-label {
  color: #4F46E5 !important;
}

@media (max-width: 720px) {
  html[data-theme="light"] #studyMode {
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  html[data-theme="light"] .victory-footer {
    position: sticky !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    z-index: 20 !important;
    margin: 10px 10px 0 !important;
  }

  html[data-theme="light"] .action-btn.btn-forgot,
  html[data-theme="light"] .action-btn.btn-knew {
    min-height: 48px !important;
  }
}

/* ZG light button area black-band fixes */
html[data-theme="light"] .arena-wizard,
html[data-theme="light"] #setupMode,
html[data-theme="light"] .setup-mode,
html[data-theme="light"] .study-area,
html[data-theme="light"] .quiz-interface,
html[data-theme="light"] .quiz-nav,
html[data-theme="light"] #examPill,
html[data-theme="light"] #feedbackArea {
  background: transparent !important;
}

html[data-theme="light"] .start-mission-btn,
html[data-theme="light"] .btn-primary.start-mission-btn {
  background: linear-gradient(135deg, #4F46E5, #2563EB) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.20) !important;
}

html[data-theme="light"] .start-mission-btn:disabled,
html[data-theme="light"] .btn-primary.start-mission-btn:disabled {
  background: #DDE3EC !important;
  color: #8A94A6 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .btn-skip-q {
  background: #FFFFFF !important;
  border: 1px solid #DDE3EC !important;
  color: #334155 !important;
}

html[data-theme="light"] .quiz-nav::before,
html[data-theme="light"] .quiz-nav::after,
html[data-theme="light"] #setupMode::before,
html[data-theme="light"] #setupMode::after,
html[data-theme="light"] .arena-wizard::before,
html[data-theme="light"] .arena-wizard::after {
  display: none !important;
  opacity: 0 !important;
}

/* ZG flashcard setup and session control contrast */
html[data-theme="light"] .selection-wizard .setup-group,
html[data-theme="light"] .selection-wizard .setup-section,
html[data-theme="light"] .selection-wizard .subject-indicator {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(17, 24, 39, 0.12) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 14px 34px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .selection-wizard .setup-group:has(#selectedChaptersList) {
  background:
    radial-gradient(circle at 10% 0%, rgba(79, 70, 229, 0.07), transparent 36%),
    #FFFFFF !important;
}

html[data-theme="light"] .selection-wizard .group-label,
html[data-theme="light"] .selection-wizard .setup-label {
  color: #7A8496 !important;
}

html[data-theme="light"] .selection-wizard .chapter-chip {
  background: #F8FAFC !important;
  border: 1px solid rgba(79, 70, 229, 0.34) !important;
  color: #111827 !important;
}

html[data-theme="light"] .selection-wizard .remove-chip {
  background: #EEF2F7 !important;
  color: #334155 !important;
}

html[data-theme="light"] .selection-wizard .add-chapter-btn {
  background: #FFFFFF !important;
  border: 1px solid #DDE3EC !important;
  color: #64748B !important;
}

html[data-theme="light"] .selection-wizard .add-chapter-btn:hover {
  background: rgba(79, 70, 229, 0.08) !important;
  border-color: rgba(79, 70, 229, 0.25) !important;
  color: #4F46E5 !important;
}

html[data-theme="light"] .selection-wizard .segment-control {
  background: #F1F5F9 !important;
  border: 1px solid #DDE3EC !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  padding: 4px !important;
}

html[data-theme="light"] .selection-wizard .segment-item {
  background: transparent !important;
  color: #526071 !important;
  border: 0 !important;
}

html[data-theme="light"] .selection-wizard .segment-item.active {
  background: linear-gradient(135deg, #4F46E5, #2563EB) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18) !important;
}

html[data-theme="light"] .syllabus-tab.active,
html[data-theme="light"] .seg-btn.active,
html[data-theme="light"] .segment-item.active,
html[data-theme="light"] .chip.active,
html[data-theme="light"] .filter-chip.active,
html[data-theme="light"] .filter-tab.active,
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .notes-action.primary {
  color: #FFFFFF !important;
}

html[data-theme="light"] .syllabus-tab.active *,
html[data-theme="light"] .seg-btn.active *,
html[data-theme="light"] .segment-item.active *,
html[data-theme="light"] .chip.active *,
html[data-theme="light"] .filter-chip.active *,
html[data-theme="light"] .filter-tab.active *,
html[data-theme="light"] .btn-primary *,
html[data-theme="light"] .notes-action.primary * {
  color: #FFFFFF !important;
  stroke: currentColor !important;
}

html[data-theme="light"] .selection-wizard .subject-btn-row button {
  background: #FFFFFF !important;
  border: 1px solid #DDE3EC !important;
  color: #111827 !important;
}

html[data-theme="light"] .selection-wizard .subject-btn-row button:hover,
html[data-theme="light"] .selection-wizard .subject-btn-row button.active {
  background: rgba(79, 70, 229, 0.09) !important;
  border-color: rgba(79, 70, 229, 0.30) !important;
  color: #4F46E5 !important;
}

html[data-theme="light"] .selection-wizard .subject-indicator {
  color: #111827 !important;
}

html[data-theme="light"] .selection-wizard .change-subject-btn {
  background: #F8FAFC !important;
  border: 1px solid #DDE3EC !important;
  color: #64748B !important;
}

html[data-theme="light"] .selection-wizard .change-subject-btn:hover {
  background: rgba(79, 70, 229, 0.08) !important;
  color: #4F46E5 !important;
}

html[data-theme="light"] #hintWrapper button {
  min-height: 44px !important;
  border-radius: 14px !important;
  background: #FEF3C7 !important;
  border: 1px solid rgba(217, 119, 6, 0.38) !important;
  color: #92400E !important;
  box-shadow: 0 8px 18px rgba(217, 119, 6, 0.10) !important;
}

html[data-theme="light"] #hintWrapper button:hover {
  background: #FDE68A !important;
  color: #78350F !important;
}

html[data-theme="light"] .action-btn.btn-forgot {
  background: #FFEDD5 !important;
  border-color: rgba(217, 119, 6, 0.42) !important;
  color: #9A3412 !important;
  box-shadow: 0 8px 18px rgba(217, 119, 6, 0.10) !important;
}

html[data-theme="light"] .action-btn.btn-knew {
  background: #D1FAE5 !important;
  border-color: rgba(5, 150, 105, 0.38) !important;
  color: #047857 !important;
  box-shadow: 0 8px 18px rgba(5, 150, 105, 0.09) !important;
}

html[data-theme="light"] #zg-card-flag-btn,
html[data-theme="light"] #zg-card-bm-btn {
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  justify-content: center !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid #DDE3EC !important;
  color: #334155 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] #zg-card-flag-btn:hover {
  background: #FFF7ED !important;
  border-color: rgba(245, 158, 11, 0.34) !important;
  color: #B45309 !important;
}

html[data-theme="light"] #zg-card-bm-btn:hover,
html[data-theme="light"] #zg-card-bm-btn.bookmarked {
  background: rgba(37, 99, 235, 0.10) !important;
  border-color: rgba(37, 99, 235, 0.30) !important;
  color: #2563EB !important;
}

html[data-theme="light"] #zg-card-flag-btn svg,
html[data-theme="light"] #zg-card-bm-btn svg {
  width: 18px !important;
  height: 18px !important;
}

@media (max-width: 720px) {
  html[data-theme="light"] #zg-card-flag-btn,
  html[data-theme="light"] #zg-card-bm-btn {
    top: 14px !important;
    width: 42px !important;
    height: 42px !important;
  }

  html[data-theme="light"] #zg-card-flag-btn {
    right: 18px !important;
  }

  html[data-theme="light"] #zg-card-bm-btn {
    left: 18px !important;
  }
}

/* ZG profile bottom-nav light visibility */
html[data-theme="light"] .bottom-nav {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid #DDE3EC !important;
  box-shadow: 0 -8px 22px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .bottom-nav .nav-item {
  color: #607089 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .bottom-nav .nav-item svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

html[data-theme="light"] .bottom-nav .nav-item span {
  color: currentColor !important;
}

html[data-theme="light"] .bottom-nav .nav-item.active {
  color: #0EA5E9 !important;
}

/* ZG dashboard mission neutral + mobile gap compact */
html[data-theme="light"] .mission-card {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(17, 24, 39, 0.12) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 12px 26px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .mission-card::before {
  display: none !important;
}

html[data-theme="light"] .mission-card h1,
html[data-theme="light"] .mission-card h2,
html[data-theme="light"] .mission-card h3,
html[data-theme="light"] .mission-card p,
html[data-theme="light"] .mission-card span {
  color: #111827 !important;
}

html[data-theme="light"] .mission-card .continue-learning-label,
html[data-theme="light"] .mission-card .section-label {
  color: #7A8496 !important;
}

html[data-theme="light"] #continueCard .progress-track {
  background: #E8EEF6 !important;
}

html[data-theme="light"] #continueCard .progress-fill {
  background: var(--accent) !important;
}

html[data-theme="light"] #missionRingFill {
  stroke: var(--accent) !important;
  filter: none !important;
}

html[data-theme="light"] #continueCard .ring-bg {
  stroke: #DDE3EC !important;
}

@media (max-width: 700px) {
  html[data-theme="light"] .dashboard-main {
    gap: 14px !important;
  }

  html[data-theme="light"] #masteryHubSection {
    margin-bottom: 0 !important;
  }

  html[data-theme="light"] .horizontal-mastery {
    padding-bottom: 4px !important;
    margin-bottom: 0 !important;
  }

  html[data-theme="light"] .mission-center {
    gap: 12px !important;
    margin-top: 0 !important;
  }
}

/* ZG saved library light polish */
html[data-theme="light"] .saved-hero-copy {
  color: #5B667A !important;
}

html[data-theme="light"] .count-badge {
  background: rgba(79, 70, 229, 0.10) !important;
  border: 1px solid rgba(79, 70, 229, 0.24) !important;
  color: #4F46E5 !important;
}

html[data-theme="light"] .saved-stat {
  background: #F8FAFC !important;
  border: 1px solid #DDE3EC !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

html[data-theme="light"] .saved-stat strong {
  color: #111827 !important;
}

html[data-theme="light"] .saved-stat span {
  color: #64748B !important;
}

html[data-theme="light"] .filter-tabs {
  background: transparent !important;
}

html[data-theme="light"] .filter-tab {
  background: #FFFFFF !important;
  border: 1px solid #DDE3EC !important;
  color: #64748B !important;
  opacity: 1 !important;
}

html[data-theme="light"] .filter-tab.active {
  background: linear-gradient(135deg, #4F46E5, #2563EB) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18) !important;
}

html[data-theme="light"] .bk-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(17, 24, 39, 0.12) !important;
  border-left: 3px solid var(--accent) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 12px 26px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .bk-card:hover {
  border-color: rgba(37, 99, 235, 0.22) !important;
  border-left-color: var(--accent) !important;
}

html[data-theme="light"] .bk-badge {
  border: 1px solid rgba(17, 24, 39, 0.08) !important;
  background: #F1F5F9 !important;
  color: #334155 !important;
}

html[data-theme="light"] .bk-mcq {
  background: rgba(37, 99, 235, 0.10) !important;
  color: #2563EB !important;
}

html[data-theme="light"] .bk-flashcard {
  background: rgba(79, 70, 229, 0.10) !important;
  color: #4F46E5 !important;
}

html[data-theme="light"] .bk-solved {
  background: rgba(16, 185, 129, 0.10) !important;
  color: #047857 !important;
}

html[data-theme="light"] .bk-notes {
  background: rgba(14, 165, 233, 0.10) !important;
  color: #0369A1 !important;
}

html[data-theme="light"] .bk-meta,
html[data-theme="light"] .bk-time {
  color: #8A94A6 !important;
}

html[data-theme="light"] .bk-question {
  color: #111827 !important;
}

html[data-theme="light"] .bk-actions {
  border-top-color: #E8EDF5 !important;
}

html[data-theme="light"] .btn-practice {
  background: linear-gradient(135deg, #4F46E5, #2563EB) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}

html[data-theme="light"] .btn-remove {
  background: #F8FAFC !important;
  border: 1px solid #DDE3EC !important;
  color: #64748B !important;
}

html[data-theme="light"] .btn-remove:hover {
  background: #FFF7ED !important;
  border-color: rgba(245, 158, 11, 0.30) !important;
  color: #B45309 !important;
}

html[data-theme="light"] .saved-empty {
  background: #FFFFFF !important;
  border: 1px solid rgba(17, 24, 39, 0.12) !important;
  color: #111827 !important;
}

/* ZG saved library mobile overflow fix */
@media (max-width: 820px) {
  html[data-theme="light"] .container {
    overflow-x: hidden !important;
  }

  html[data-theme="light"] #bookmarksList {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  html[data-theme="light"] .filter-tabs {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    min-height: 62px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
  }

  html[data-theme="light"] .filter-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    color: #64748B !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html[data-theme="light"] .filter-tab.active {
    color: #FFFFFF !important;
  }

  html[data-theme="light"] .bk-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 166px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }

  html[data-theme="light"] .bk-top,
  html[data-theme="light"] .bk-meta,
  html[data-theme="light"] .bk-question {
    min-width: 0 !important;
  }

  html[data-theme="light"] .bk-meta {
    max-width: 100% !important;
  }

  html[data-theme="light"] .bk-question {
    display: block !important;
    margin-bottom: 14px !important;
    overflow: visible !important;
    color: #111827 !important;
    line-height: 1.55 !important;
    max-height: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
  }

  html[data-theme="light"] .bk-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 12px !important;
  }

  html[data-theme="light"] .btn-practice,
  html[data-theme="light"] .btn-remove {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  html[data-theme="light"] .btn-remove {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 420px) {
  html[data-theme="light"] .bk-actions {
    grid-template-columns: 1fr !important;
  }

  html[data-theme="light"] .btn-practice,
  html[data-theme="light"] .btn-remove {
    width: 100% !important;
  }
}

/* ZG mistake book light polish */
html[data-theme="light"] .mistake-hero-copy {
  color: #5B667A !important;
}

html[data-theme="light"] .en-count-badge {
  background: #FFF7ED !important;
  border: 1px solid rgba(245, 158, 11, 0.30) !important;
  color: #D97706 !important;
}

html[data-theme="light"] .mistake-stat {
  background: #F8FAFC !important;
  border: 1px solid #DDE3EC !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

html[data-theme="light"] .mistake-stat strong {
  color: #111827 !important;
}

html[data-theme="light"] .mistake-stat span {
  color: #64748B !important;
}

html[data-theme="light"] .en-filters {
  border-color: #E8EDF5 !important;
}

html[data-theme="light"] .filter-tab {
  background: #FFFFFF !important;
  border: 1px solid #DDE3EC !important;
  color: #64748B !important;
  opacity: 1 !important;
}

html[data-theme="light"] .filter-tab.active {
  background: linear-gradient(135deg, #4F46E5, #2563EB) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18) !important;
}

html[data-theme="light"] .error-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(17, 24, 39, 0.12) !important;
  border-left: 3px solid #F59E0B !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 12px 26px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .error-card.resolved {
  border-left-color: #10B981 !important;
  opacity: 0.86 !important;
}

html[data-theme="light"] .source-badge {
  background: rgba(37, 99, 235, 0.10) !important;
  border: 1px solid rgba(37, 99, 235, 0.16) !important;
  color: #2563EB !important;
}

html[data-theme="light"] .error-meta-text,
html[data-theme="light"] .error-time {
  color: #8A94A6 !important;
}

html[data-theme="light"] .error-question {
  color: #111827 !important;
}

html[data-theme="light"] .wrong-answer,
html[data-theme="light"] .correct-answer,
html[data-theme="light"] .flashcard-answer,
html[data-theme="light"] .explanation-text {
  background: #F8FAFC !important;
  border: 1px solid #DDE3EC !important;
  color: #334155 !important;
}

html[data-theme="light"] .wrong-answer {
  background: #FFF7ED !important;
  border-color: rgba(245, 158, 11, 0.30) !important;
}

html[data-theme="light"] .correct-answer,
html[data-theme="light"] .flashcard-answer {
  background: #ECFDF5 !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
}

html[data-theme="light"] .ans-label-wrong {
  color: #B45309 !important;
}

html[data-theme="light"] .ans-label-correct {
  color: #047857 !important;
}

html[data-theme="light"] .ans-text {
  color: #334155 !important;
}

html[data-theme="light"] .explanation-toggle,
html[data-theme="light"] .btn-resolved,
html[data-theme="light"] .btn-retry {
  border-radius: 14px !important;
  font-weight: 850 !important;
}

html[data-theme="light"] .explanation-toggle,
html[data-theme="light"] .btn-retry {
  background: #F8FAFC !important;
  border: 1px solid #DDE3EC !important;
  color: #334155 !important;
}

html[data-theme="light"] .btn-resolved {
  background: linear-gradient(135deg, #4F46E5, #2563EB) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}

html[data-theme="light"] .bottom-nav .nav-item svg {
  width: 23px !important;
  height: 23px !important;
}

/* ZG dark neutral hero cards + dashboard mobile gap */
html[data-theme="dark"] .subjects-hero,
html[data-theme="dark"] .chapters-hero,
html[data-theme="dark"] .chapter-hero,
html[data-theme="dark"] .video-hero,
html[data-theme="dark"] .lab-hero,
html[data-theme="dark"] .podcast-hero,
html[data-theme="dark"] .solved-hero,
html[data-theme="dark"] .result-hero,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .hero-section,
html[data-theme="dark"] .card.hero,
html[data-theme="dark"] .mission-card {
  background: var(--bg-card) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="dark"] .subjects-hero::before,
html[data-theme="dark"] .subjects-hero::after,
html[data-theme="dark"] .chapters-hero::before,
html[data-theme="dark"] .chapters-hero::after,
html[data-theme="dark"] .chapter-hero::before,
html[data-theme="dark"] .chapter-hero::after,
html[data-theme="dark"] .video-hero::before,
html[data-theme="dark"] .video-hero::after,
html[data-theme="dark"] .lab-hero::before,
html[data-theme="dark"] .lab-hero::after,
html[data-theme="dark"] .hero-card::before,
html[data-theme="dark"] .hero-card::after,
html[data-theme="dark"] .mission-card::before,
html[data-theme="dark"] .mission-card::after {
  display: none !important;
  opacity: 0 !important;
}

html[data-theme="dark"] .subjects-hero h1,
html[data-theme="dark"] .subjects-hero .heading-1,
html[data-theme="dark"] .chapters-hero h1,
html[data-theme="dark"] .chapter-hero h1,
html[data-theme="dark"] .chapter-hero h2,
html[data-theme="dark"] .video-hero h1,
html[data-theme="dark"] .video-hero h2,
html[data-theme="dark"] .lab-hero h1,
html[data-theme="dark"] .podcast-hero-title,
html[data-theme="dark"] .solved-hero .hero-title,
html[data-theme="dark"] .result-hero h1,
html[data-theme="dark"] .hero-card h1,
html[data-theme="dark"] .hero-card h2,
html[data-theme="dark"] .card.hero h1,
html[data-theme="dark"] .mission-card h1,
html[data-theme="dark"] .mission-card h2,
html[data-theme="dark"] .mission-card h3 {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .subjects-hero p,
html[data-theme="dark"] .subjects-hero-subtitle,
html[data-theme="dark"] .chapters-hero p,
html[data-theme="dark"] .chapter-hero p,
html[data-theme="dark"] .chapter-hero .hero-subject,
html[data-theme="dark"] .video-hero p,
html[data-theme="dark"] .video-hero .hero-bottom,
html[data-theme="dark"] .lab-hero-sub,
html[data-theme="dark"] .podcast-hero-subtitle,
html[data-theme="dark"] .solved-hero .hero-subtitle,
html[data-theme="dark"] .result-hero p,
html[data-theme="dark"] .hero-card p,
html[data-theme="dark"] .card.hero p,
html[data-theme="dark"] .mission-card p,
html[data-theme="dark"] .mission-card span {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] #continueTitle,
html[data-theme="dark"] #missionPct {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] #continueSub {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] .mission-card .mission-info > div:first-child {
  color: var(--text-muted) !important;
}

html[data-theme="dark"] #continueCard .mission-info > div[style*="height: 8px"] {
  background: var(--bg-secondary) !important;
}

html[data-theme="dark"] #continueProgress {
  background: var(--accent) !important;
}

html[data-theme="dark"] #missionRingFill {
  stroke: var(--accent) !important;
  filter: none !important;
}

html[data-theme="dark"] .hero-icon-svg,
html[data-theme="dark"] .lab-hero-badge,
html[data-theme="dark"] .podcast-hero-progress-ring {
  background: var(--bg-card2) !important;
  border: 1px solid var(--border) !important;
  color: var(--accent) !important;
}

html[data-theme="dark"] .hero-metric-pill,
html[data-theme="dark"] .hero-stats .stat-card,
html[data-theme="dark"] .chapter-hero .stat-card,
html[data-theme="dark"] .video-hero .hero-pill,
html[data-theme="dark"] .chapter-hero .stat-crumb {
  background: var(--bg-card2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}

@media (max-width: 700px) {
  html[data-theme="dark"] .dashboard-main {
    gap: 14px !important;
  }

  html[data-theme="dark"] #masteryHubSection {
    margin-bottom: 0 !important;
  }

  html[data-theme="dark"] .horizontal-mastery {
    padding-bottom: 4px !important;
    margin-bottom: 0 !important;
  }

  html[data-theme="dark"] .mission-center {
    gap: 12px !important;
    margin-top: 0 !important;
  }
}

/* ZG dashboard compact gap tablet-mobile */
@media (max-width: 820px) {
  html[data-theme="light"] .dashboard-main,
  html[data-theme="dark"] .dashboard-main {
    gap: 14px !important;
  }

  html[data-theme="light"] #masteryHubSection,
  html[data-theme="dark"] #masteryHubSection {
    margin-bottom: 0 !important;
  }

  html[data-theme="light"] .horizontal-mastery,
  html[data-theme="dark"] .horizontal-mastery {
    padding-bottom: 4px !important;
    margin-bottom: 0 !important;
  }

  html[data-theme="light"] .mission-center,
  html[data-theme="dark"] .mission-center {
    gap: 12px !important;
    margin-top: 0 !important;
  }
}



/* ZG final light override for practice/solved pages loaded after solved.css */
html[data-theme="light"] .question-card .question-text,
html[data-theme="light"] .question-card .question-text p,
html[data-theme="light"] .question-card .question-text div,
html[data-theme="light"] .question-card .question-text span {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

html[data-theme="light"] .question-card .solution-box {
    background: #f8fafc !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    color: #111827 !important;
}

html[data-theme="light"] .question-card .solution-box em,
html[data-theme="light"] .question-card .solution-box i {
    color: #64748b !important;
    opacity: 1 !important;
}


/* ZG practice/solved answer box final visibility */
html[data-theme="light"] .question-card .solution-box {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 18px 20px !important;
    background: #f8fafc !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
}

html[data-theme="light"] .question-card .solution-content-wrapper,
html[data-theme="light"] .question-card .steps-list,
html[data-theme="light"] .question-card .step-item,
html[data-theme="light"] .question-card .step-content,
html[data-theme="light"] .question-card .direct-answer-glass,
html[data-theme="light"] .question-card .direct-answer-text {
    width: 100% !important;
    max-width: none !important;
    color: #111827 !important;
}

html[data-theme="light"] .question-card .solution-box span[style*="font-style: italic"],
html[data-theme="light"] .question-card .solution-box span[style*="rgba(255, 255, 255"],
html[data-theme="light"] .question-card .solution-box span[style*="color: rgba(255"],
html[data-theme="light"] .question-card .solution-box [style*="font-style: italic"] {
    color: #111827 !important;
    opacity: 1 !important;
}

@media (max-width: 768px) {
    html[data-theme="light"] .question-content {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    html[data-theme="light"] .question-card .solution-box {
        width: calc(100% + 36px) !important;
        margin-left: -18px !important;
        margin-right: -18px !important;
        padding: 14px 18px 18px !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 0 18px 18px !important;
    }

    html[data-theme="light"] .question-card .solution-box span[style*="font-style: italic"] {
        display: inline;
        margin-left: 4px !important;
    }
}

/* ZG app-wide mobile hero/header compact pass */
@media (max-width: 700px) {
  html[data-theme="light"] .subjects-hero,
  html[data-theme="dark"] .subjects-hero,
  html[data-theme="light"] .chapters-hero,
  html[data-theme="dark"] .chapters-hero,
  html[data-theme="light"] .chapter-hero,
  html[data-theme="dark"] .chapter-hero,
  html[data-theme="light"] .video-hero,
  html[data-theme="dark"] .video-hero,
  html[data-theme="light"] .podcast-hero,
  html[data-theme="dark"] .podcast-hero,
  html[data-theme="light"] .solved-hero,
  html[data-theme="dark"] .solved-hero,
  html[data-theme="light"] .result-hero,
  html[data-theme="dark"] .result-hero,
  html[data-theme="light"] .hero-card,
  html[data-theme="dark"] .hero-card,
  html[data-theme="light"] .hero-section,
  html[data-theme="dark"] .hero-section,
  html[data-theme="light"] .card.hero,
  html[data-theme="dark"] .card.hero {
    min-height: auto !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    margin-bottom: 10px !important;
    gap: 10px !important;
  }

  html[data-theme="light"] .subjects-hero,
  html[data-theme="dark"] .subjects-hero,
  html[data-theme="light"] .chapters-hero,
  html[data-theme="dark"] .chapters-hero {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  html[data-theme="light"] .subjects-hero h1,
  html[data-theme="dark"] .subjects-hero h1,
  html[data-theme="light"] .subjects-hero .heading-1,
  html[data-theme="dark"] .subjects-hero .heading-1,
  html[data-theme="light"] .chapters-hero h1,
  html[data-theme="dark"] .chapters-hero h1,
  html[data-theme="light"] .chapter-hero h1,
  html[data-theme="dark"] .chapter-hero h1,
  html[data-theme="light"] .chapter-title,
  html[data-theme="dark"] .chapter-title,
  html[data-theme="light"] .video-hero h1,
  html[data-theme="dark"] .video-hero h1,
  html[data-theme="light"] .podcast-hero-title,
  html[data-theme="dark"] .podcast-hero-title,
  html[data-theme="light"] .solved-hero .hero-title,
  html[data-theme="dark"] .solved-hero .hero-title,
  html[data-theme="light"] .result-hero h1,
  html[data-theme="dark"] .result-hero h1,
  html[data-theme="light"] .hero-card h1,
  html[data-theme="dark"] .hero-card h1,
  html[data-theme="light"] .hero-card h2,
  html[data-theme="dark"] .hero-card h2,
  html[data-theme="light"] .card.hero h1,
  html[data-theme="dark"] .card.hero h1 {
    font-size: clamp(1.15rem, 6vw, 1.45rem) !important;
    line-height: 1.08 !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    letter-spacing: 0 !important;
  }

  html[data-theme="light"] .subjects-hero p,
  html[data-theme="dark"] .subjects-hero p,
  html[data-theme="light"] .subjects-hero-subtitle,
  html[data-theme="dark"] .subjects-hero-subtitle,
  html[data-theme="light"] .chapters-hero p,
  html[data-theme="dark"] .chapters-hero p,
  html[data-theme="light"] .chapter-hero p,
  html[data-theme="dark"] .chapter-hero p,
  html[data-theme="light"] .chapter-hero .hero-subject,
  html[data-theme="dark"] .chapter-hero .hero-subject,
  html[data-theme="light"] .video-hero p,
  html[data-theme="dark"] .video-hero p,
  html[data-theme="light"] .video-hero .hero-bottom,
  html[data-theme="dark"] .video-hero .hero-bottom,
  html[data-theme="light"] .podcast-hero-subtitle,
  html[data-theme="dark"] .podcast-hero-subtitle,
  html[data-theme="light"] .solved-hero .hero-subtitle,
  html[data-theme="dark"] .solved-hero .hero-subtitle,
  html[data-theme="light"] .result-hero p,
  html[data-theme="dark"] .result-hero p,
  html[data-theme="light"] .hero-card p,
  html[data-theme="dark"] .hero-card p,
  html[data-theme="light"] .card.hero p,
  html[data-theme="dark"] .card.hero p {
    margin-top: 4px !important;
    font-size: 0.78rem !important;
    line-height: 1.32 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  html[data-theme="light"] .hero-icon-svg,
  html[data-theme="dark"] .hero-icon-svg,
  html[data-theme="light"] .podcast-hero-progress-ring,
  html[data-theme="dark"] .podcast-hero-progress-ring,
  html[data-theme="light"] #subjectHeroIcon,
  html[data-theme="dark"] #subjectHeroIcon {
    display: none !important;
  }

  html[data-theme="light"] .hero-metrics,
  html[data-theme="dark"] .hero-metrics,
  html[data-theme="light"] .hero-stats,
  html[data-theme="dark"] .hero-stats,
  html[data-theme="light"] .chapter-hero .hero-stats,
  html[data-theme="dark"] .chapter-hero .hero-stats {
    margin-top: 8px !important;
    gap: 6px !important;
  }

  html[data-theme="light"] .hero-metric-pill,
  html[data-theme="dark"] .hero-metric-pill,
  html[data-theme="light"] .hero-stats .stat-card,
  html[data-theme="dark"] .hero-stats .stat-card,
  html[data-theme="light"] .chapter-hero .stat-card,
  html[data-theme="dark"] .chapter-hero .stat-card,
  html[data-theme="light"] .chapter-hero .stat-crumb,
  html[data-theme="dark"] .chapter-hero .stat-crumb,
  html[data-theme="light"] .video-hero .hero-pill,
  html[data-theme="dark"] .video-hero .hero-pill {
    min-height: 38px !important;
    padding: 6px 8px !important;
    border-radius: 12px !important;
  }

  html[data-theme="light"] .chapter-hero .stat-crumb span,
  html[data-theme="dark"] .chapter-hero .stat-crumb span {
    font-size: 0.9rem !important;
  }

  html[data-theme="light"] .chapter-hero .stat-crumb label,
  html[data-theme="dark"] .chapter-hero .stat-crumb label {
    margin-top: 3px !important;
    font-size: 0.48rem !important;
    letter-spacing: 0.03em !important;
  }
}

/* ZG Smart Notes light theme final contrast */
html[data-theme="light"] .sn-page,
html[data-theme="light"] .notes-shell,
html[data-theme="light"] .notes-content {
  background: transparent !important;
  color: #111827 !important;
}

html[data-theme="light"] .notes-header,
html[data-theme="light"] .topic-strip {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: #DDE3EC !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07) !important;
}

html[data-theme="light"] .notes-icon-btn,
html[data-theme="light"] .topic-step-label,
html[data-theme="light"] .topic-chip {
  background: #FFFFFF !important;
  border-color: #DDE3EC !important;
  color: #526071 !important;
}

html[data-theme="light"] .topic-chip.active {
  background: rgba(79, 70, 229, 0.10) !important;
  border-color: rgba(79, 70, 229, 0.35) !important;
  color: #4F46E5 !important;
}

html[data-theme="light"] .notes-topic-heading,
html[data-theme="light"] .sn-block-definition,
html[data-theme="light"] .sn-block-formula,
html[data-theme="light"] .sn-block-example,
html[data-theme="light"] .sn-block-you-try,
html[data-theme="light"] .sn-inline-callout,
html[data-theme="light"] .sn-tabs-container,
html[data-theme="light"] .sn-toggle-container {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(17, 24, 39, 0.12) !important;
  color: #111827 !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .sn-block-body,
html[data-theme="light"] .sn-block-body p,
html[data-theme="light"] .sn-block-body li,
html[data-theme="light"] .sn-explanation,
html[data-theme="light"] .sn-q-prompt,
html[data-theme="light"] .sn-q-answer-inner {
  color: #334155 !important;
}

html[data-theme="light"] .sn-block-body em,
html[data-theme="light"] .sn-block-body i,
html[data-theme="light"] .question-text em,
html[data-theme="light"] .question-text i,
html[data-theme="light"] .option-item em,
html[data-theme="light"] .option-item i {
  color: #111827 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .notes-bottom {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: #DDE3EC !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] .notes-action:not(.primary) {
  background: #F8FAFC !important;
  border-color: #DDE3EC !important;
  color: #334155 !important;
}

/* ZG dashboard mission card premium shell */
html[data-theme="dark"] #continueCard.mission-card,
html[data-theme="light"] #continueCard.mission-card {
  position: relative !important;
  isolation: isolate !important;
  min-height: 194px !important;
  padding: 34px 38px !important;
  border-radius: 28px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  overflow: hidden !important;
  transform: translateZ(0) !important;
}

html[data-theme="dark"] #continueCard.mission-card {
  background:
    radial-gradient(circle at 82% 20%, rgba(34, 211, 238, 0.15), transparent 18rem),
    radial-gradient(circle at 10% 12%, rgba(79, 70, 229, 0.34), transparent 20rem),
    linear-gradient(135deg, rgba(20, 22, 29, 0.98), rgba(10, 11, 15, 0.98)) !important;
  border-color: rgba(129, 140, 248, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 70px rgba(0, 0, 0, 0.34),
    0 0 42px rgba(79, 70, 229, 0.12) !important;
}

html[data-theme="light"] #continueCard.mission-card {
  background:
    radial-gradient(circle at 82% 22%, rgba(14, 165, 233, 0.13), transparent 18rem),
    radial-gradient(circle at 12% 8%, rgba(79, 70, 229, 0.11), transparent 20rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.97)) !important;
  border-color: rgba(79, 70, 229, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 18px 42px rgba(15, 23, 42, 0.10) !important;
}

html[data-theme="dark"] #continueCard.mission-card::before,
html[data-theme="light"] #continueCard.mission-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 14px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 22px !important;
  background:
    linear-gradient(90deg, currentColor 1px, transparent 1px),
    linear-gradient(180deg, currentColor 1px, transparent 1px) !important;
  background-size: 36px 36px !important;
  color: rgba(129, 140, 248, 0.08) !important;
  mask-image: radial-gradient(circle at 78% 48%, black 0 18%, transparent 70%) !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

html[data-theme="dark"] #continueCard.mission-card::after,
html[data-theme="light"] #continueCard.mission-card::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: 42px !important;
  top: 38px !important;
  width: 210px !important;
  height: 210px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(129, 140, 248, 0.12) !important;
  box-shadow: none !important;
  opacity: 0.42 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

html[data-theme="light"] #continueCard.mission-card::before {
  color: rgba(79, 70, 229, 0.065) !important;
}

html[data-theme="light"] #continueCard.mission-card::after {
  border-color: rgba(79, 70, 229, 0.12) !important;
  box-shadow: inset 0 0 34px rgba(79, 70, 229, 0.05) !important;
}

html[data-theme="dark"] #continueCard .mission-kicker,
html[data-theme="light"] #continueCard .mission-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin-bottom: 12px !important;
  color: #6D5DFF !important;
  letter-spacing: 0.14em !important;
}

html[data-theme="dark"] #continueCard .mission-kicker {
  color: #8EA2FF !important;
}

html[data-theme="dark"] #continueCard .mission-kicker::before,
html[data-theme="light"] #continueCard .mission-kicker::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #4F46E5, #22D3EE) !important;
  box-shadow: 0 0 14px rgba(79, 70, 229, 0.52) !important;
}

html[data-theme="dark"] #continueTitle,
html[data-theme="light"] #continueTitle {
  max-width: 720px !important;
  font-size: clamp(1.8rem, 2.7vw, 2.6rem) !important;
  font-weight: 950 !important;
  letter-spacing: -0.05em !important;
  line-height: 0.98 !important;
}

html[data-theme="light"] #continueTitle,
html[data-theme="light"] #missionPct {
  color: #111827 !important;
}

html[data-theme="dark"] #continueTitle,
html[data-theme="dark"] #missionPct {
  color: #FFFFFF !important;
}

html[data-theme="dark"] #continueSub,
html[data-theme="light"] #continueSub {
  max-width: 560px !important;
  margin-top: 12px !important;
  font-size: 0.92rem !important;
  line-height: 1.42 !important;
}

html[data-theme="dark"] #continueSub {
  color: rgba(226, 232, 240, 0.72) !important;
}

html[data-theme="light"] #continueSub {
  color: #5B667A !important;
}

html[data-theme="dark"] #continueCard .mission-progress-track,
html[data-theme="light"] #continueCard .mission-progress-track {
  width: min(620px, 76%) !important;
  height: 9px !important;
  margin-top: 28px !important;
  overflow: hidden !important;
}

html[data-theme="dark"] #continueCard .mission-progress-track {
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="light"] #continueCard .mission-progress-track {
  background: #E8EEF6 !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="dark"] #continueProgress,
html[data-theme="light"] #continueProgress {
  background: linear-gradient(90deg, #4F46E5, #2563EB, #22D3EE) !important;
  box-shadow: 0 0 20px rgba(79, 70, 229, 0.34) !important;
}

html[data-theme="dark"] #continueCard .mission-ring-wrap,
html[data-theme="light"] #continueCard .mission-ring-wrap {
  position: absolute !important;
  top: 34px !important;
  right: 34px !important;
  width: auto !important;
  height: 40px !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 15px !important;
  border-radius: 999px !important;
  background: rgba(79, 70, 229, 0.12) !important;
  border: 1px solid rgba(129, 140, 248, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 24px rgba(79, 70, 229, 0.10) !important;
}

html[data-theme="light"] #continueCard .mission-ring-wrap {
  background: rgba(79, 70, 229, 0.10) !important;
  border-color: rgba(79, 70, 229, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 10px 22px rgba(79, 70, 229, 0.10) !important;
}

html[data-theme="dark"] #continueCard .mission-ring-wrap::before,
html[data-theme="light"] #continueCard .mission-ring-wrap::before {
  content: none !important;
}

html[data-theme="dark"] #continueCard .mission-ring-bg,
html[data-theme="light"] #continueCard .mission-ring-bg {
  stroke: rgba(148, 163, 184, 0.22) !important;
}

html[data-theme="dark"] #continueCard .mission-ring-wrap svg,
html[data-theme="light"] #continueCard .mission-ring-wrap svg {
  display: none !important;
}

html[data-theme="dark"] #missionRingFill,
html[data-theme="light"] #missionRingFill {
  stroke: #4F46E5 !important;
  filter: drop-shadow(0 0 8px rgba(79, 70, 229, 0.40)) !important;
}

html[data-theme="dark"] #missionPct,
html[data-theme="light"] #missionPct {
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;
  font-size: 0.98rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -0.01em !important;
}

html[data-theme="dark"] #missionPct::after,
html[data-theme="light"] #missionPct::after {
  content: none !important;
}

html[data-theme="dark"] #continueCard:hover,
html[data-theme="light"] #continueCard:hover {
  transform: translateY(-3px) !important;
}

@media (max-width: 700px) {
  html[data-theme="dark"] #continueCard.mission-card,
  html[data-theme="light"] #continueCard.mission-card {
    min-height: 168px !important;
    padding: 26px 24px !important;
    border-radius: 22px !important;
    gap: 14px !important;
  }

  html[data-theme="dark"] #continueCard.mission-card::after,
  html[data-theme="light"] #continueCard.mission-card::after {
    width: 150px !important;
    height: 150px !important;
    right: 12px !important;
    top: 42px !important;
    opacity: 0.28 !important;
  }

  html[data-theme="dark"] #continueTitle,
  html[data-theme="light"] #continueTitle {
    font-size: 1.35rem !important;
    line-height: 1.05 !important;
  }

  html[data-theme="dark"] #continueSub,
  html[data-theme="light"] #continueSub {
    font-size: 0.78rem !important;
    margin-top: 8px !important;
  }

  html[data-theme="dark"] #continueCard .mission-progress-track,
  html[data-theme="light"] #continueCard .mission-progress-track {
    width: calc(100% - 92px) !important;
    margin-top: 18px !important;
  }

  html[data-theme="dark"] #continueCard .mission-ring-wrap,
  html[data-theme="light"] #continueCard .mission-ring-wrap {
    top: auto !important;
    right: 24px !important;
    bottom: 24px !important;
    height: 32px !important;
    padding: 0 12px !important;
  }

  html[data-theme="dark"] #missionPct,
  html[data-theme="light"] #missionPct {
    font-size: 0.84rem !important;
  }
}

/* ZG dashboard launch cards: light-mode readability */
html[data-theme="light"] #continueCard.mission-card {
  background:
    radial-gradient(circle at 82% 22%, rgba(14, 165, 233, 0.13), transparent 18rem),
    radial-gradient(circle at 12% 8%, rgba(79, 70, 229, 0.11), transparent 20rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.97)) !important;
  border-color: rgba(79, 70, 229, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 18px 42px rgba(15, 23, 42, 0.10) !important;
}

html[data-theme="light"] #continueCard .mission-info,
html[data-theme="light"] #continueCard .mission-info * {
  color: #111827 !important;
  text-shadow: none !important;
}

html[data-theme="light"] #continueCard .mission-info > div:first-child {
  color: #4F46E5 !important;
}

html[data-theme="light"] #continueCard #continueSub {
  color: #5B667A !important;
}

html[data-theme="light"] #continueCard #missionPct {
  color: #111827 !important;
}

html[data-theme="light"] #continueCard .mission-info > div:last-child {
  background: #E8EEF6 !important;
}

html[data-theme="light"] #continueCard #continueProgress {
  background: linear-gradient(90deg, #4F46E5, #2563EB) !important;
}

html[data-theme="light"] #continueCard svg circle:first-child {
  stroke: #E5EAF3 !important;
}

html[data-theme="light"] #masteryCard.goal-center,
html[data-theme="light"] .zg-pulse-panel.pulse-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.97)) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 14px 32px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] #masteryCard.goal-center::before,
html[data-theme="light"] .zg-pulse-panel::before {
  opacity: 0.08 !important;
}

html[data-theme="light"] #masteryCard.goal-center::after {
  opacity: 0.45 !important;
  box-shadow: none !important;
}

/* ── Factor Tree (Prime Factorization) – Light Theme Fix ── */
html[data-theme="light"] .sn-factor-table,
html[data-theme="light"] .factor-table {
  background: rgba(255, 255, 255, 0.80) !important;
  color: #111827 !important;
}

html[data-theme="light"] .factor-cell {
  border-bottom-color: #2563EB !important;
}

html[data-theme="light"] .factor-cell.left {
  border-right-color: #2563EB !important;
  color: #15803D !important;   /* green – divisors visible on light bg */
}

html[data-theme="light"] .factor-cell.right {
  color: #111827 !important;   /* dark text – was white, invisible on light bg */
}

html[data-theme="light"] .factor-cell.left.empty {
  color: transparent !important;
}