/* ============================================
   MENORAH ACADEMY — DARK MODE
   Activated by the `dark` class on <html>.
   Keeps the existing light theme as default.
   ============================================ */

/* ---------- Tokens ---------- */
html.dark {
  --ink:          #000000;
  --ink-warm:     #1a0806;
  --ink-soft:     #210907;
  --ox-deep:      #2e0d0b;
  --ox-card:      #35100d;
  --paper:        #f5efec;
  --paper-muted:  rgba(245, 239, 236, 0.74);
  --paper-faint:  rgba(245, 239, 236, 0.5);
  --clay:         #c47b6a;
  --red:          #812822;
  --red-bright:   #c47b6a;
  --hairline:     1px solid rgba(245, 239, 236, 0.12);

  /* Shared.css LMS tokens -> dark equivalents */
  --bg-main:      #160705;
  --bg-light:     #240b09;
  --bg-dark:      #1b0806;
  --text-primary: #f5efec;
  --text-secondary: rgba(245, 239, 236, 0.72);
  --text-dark:    #ffffff;
  --accent:       #c47b6a;
  --border:       rgba(245, 239, 236, 0.12);
  --card-bg:      #2e0d0b;
  --sidebar-bg:   #140604;
  --sidebar-text: rgba(245, 239, 236, 0.95);
  --sidebar-hover: rgba(196, 123, 106, 0.14);
  --sidebar-active: rgba(196, 123, 106, 0.24);
  --sidebar-active-border: #c47b6a;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.6);

  /* Public/auth page tokens (yellow -> dark) */
  background: var(--ink-warm);
  color: var(--paper);
}

/* ---------- Base ---------- */
html.dark body {
  background: var(--bg-main) !important;
  color: var(--text-primary) !important;
}
html.dark {
  color-scheme: dark;
}
html.dark ::selection { background: var(--clay); color: #000; }
html.dark ::-webkit-scrollbar-thumb { background: rgba(196,123,106,0.4); }
html.dark ::-webkit-scrollbar-thumb:hover { background: var(--clay); }

/* Body gradients that use light vars (shared.css + live-exam + results) */
html.dark body {
  background:
    radial-gradient(1100px 700px at 50% -10%, rgba(196, 123, 106, 0.10), transparent 60%),
    linear-gradient(180deg, var(--ink), var(--ink-warm) 70%, #120403) !important;
}

/* ---------- Theme toggle floating button ---------- */
.theme-toggle {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(20,6,4,0.9);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.theme-toggle:hover { transform: scale(1.08); }
/* Auth pages: split-screen layout, keep toggle bottom-left */
.theme-toggle.auth-page { right: auto; left: 22px; }
html.dark .theme-toggle {
  background: rgba(32, 16, 11, 0.92);
  border-color: rgba(196,123,106,0.55);
}
/* Crescent SVG icon (rotates into its dark phase when <html> gets .dark) */
.theme-toggle-svg {
  width: 28px;
  height: 28px;
  display: block;
}
.theme-toggle-crescent {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(0deg);
  transition: transform 0.35s ease-in-out;
}
html.dark .theme-toggle-crescent { transform: rotate(-180deg); }

/* ============================================
   SHARED.CSS LMS COMPONENTS
   ============================================ */

/* Hardcoded white surfaces -> dark cards */
html.dark .topbar { background: rgba(20,6,4,0.85); border-bottom-color: rgba(245,239,236,0.12); border-left-color: rgba(245,239,236,0.12); }
html.dark .card,
html.dark .stat-card,
html.dark .lms-card,
html.dark .lms-stat,
html.dark .lms-course-card,
html.dark .lms-course-body,
html.dark .lms-module,
html.dark .lms-panel,
html.dark .lms-widget,
html.dark .lms-table-wrapper,
html.dark .lms-exam-nav,
html.dark .lms-action-btn,
html.dark .modal,
html.dark .toast,
html.dark .admin-table td { background-color: var(--ox-card); }

/* Keep transparent/interactive panel bodies tinted slightly different */
html.dark .lms-module.expanded .lms-module-content,
html.dark .lms-panel-body,
html.dark .lms-exam-q { background-color: transparent; }

/* Cards borders */
html.dark .card,
html.dark .stat-card { border: 1px solid rgba(245,239,236,0.1); }

/* Sidebar toggle pill */
html.dark .sidebar-toggle { background: #2e0d0b; border-color: rgba(245,239,236,0.2); color: var(--clay); }

/* Topbar hardcoded grays */
html.dark .topbar-title { color: var(--paper); }
html.dark .topbar-breadcrumb { color: var(--paper-faint); }
html.dark .topbar-breadcrumb span { color: var(--clay); }
html.dark .topbar-search input { background: #240b09; border-color: rgba(245,239,236,0.14); color: var(--paper); }
html.dark .topbar-search input::placeholder { color: var(--paper-faint); }
html.dark .topbar-search input:focus { border-color: var(--clay); background: #2e0d0b; box-shadow: 0 0 0 3px rgba(196,123,106,0.2); }
html.dark .topbar-divider { background: rgba(245,239,236,0.12); }
html.dark .topbar-btn { color: var(--paper-faint); }
html.dark .topbar-btn:hover { background: rgba(245,239,236,0.08); color: var(--paper); }
html.dark .topbar-btn.active { background: rgba(196,123,106,0.2); color: var(--clay); }
html.dark .topbar-profile:hover { background: rgba(245,239,236,0.08); }
html.dark .topbar-user-name { color: var(--paper); }
html.dark .topbar-user-role { color: var(--paper-faint); }
html.dark .topbar-avatar { background: linear-gradient(135deg, #c47b6a, #812822); color: #000; }

/* Forms */
html.dark .form-input,
html.dark .form-select,
html.dark .form-textarea { background: #1a0806; border-color: rgba(245,239,236,0.16); color: var(--paper); }
html.dark .form-input:focus,
html.dark .form-select:focus,
html.dark .form-textarea:focus { border-color: var(--clay); background: #240b09; box-shadow: 0 0 0 3px rgba(196,123,106,0.2); }
html.dark .form-input::placeholder { color: var(--paper-faint); }
html.dark select.form-select option { background: #1a0806; color: var(--paper); }

/* Buttons */
html.dark .btn-primary { background: var(--clay); color: #1a0806; }
html.dark .btn-primary:hover { background: #d98e7d; }
html.dark .btn-secondary { border-color: rgba(245,239,236,0.25); color: var(--paper); }
html.dark .btn-secondary:hover { background: #240b09; border-color: var(--clay); }
html.dark .btn-ghost { color: var(--paper-muted); }
html.dark .btn-ghost:hover { background: #240b09; color: var(--paper); }

/* Badges (keep status tints but align text) */
html.dark .badge-secondary { background: #240b09; color: var(--paper-muted); border-color: rgba(245,239,236,0.18); }

/* Tables */
html.dark .lms-table th,
html.dark .admin-table th { background: #240b09; color: var(--paper-muted); border-bottom-color: rgba(245,239,236,0.12); }
html.dark .lms-table td { color: var(--paper); border-bottom-color: rgba(245,239,236,0.1); }
html.dark .lms-table tr:hover td { background: rgba(196,123,106,0.08); }
html.dark .admin-table td { color: var(--paper); border-bottom-color: rgba(245,239,236,0.1); }
html.dark .admin-table tr:hover td { background: rgba(196,123,106,0.08); }
html.dark .admin-table .user-avatar-sm { background: #240b09; color: var(--clay); }

/* LMS stats / icons */
html.dark .lms-stat-icon.bg-primary { background: rgba(196,123,106,0.18); color: var(--clay); }
html.dark .lms-module-icon.video { background: rgba(196,123,106,0.18); color: var(--clay); }
html.dark .lms-timeline-icon.video { background: rgba(196,123,106,0.18); color: var(--clay); }
html.dark .lms-badge-primary { background: rgba(196,123,106,0.18); color: var(--clay); }
html.dark .lms-action-btn { background: #2e0d0b; border-color: rgba(245,239,236,0.12); }
html.dark .lms-action-btn:hover { border-color: var(--clay); background: #35100d; }
html.dark .lms-module-header:hover,
html.dark .lms-module-item:hover,
html.dark .lms-icon-btn:hover { background: rgba(196,123,106,0.1); }
html.dark .lms-module-item span { color: var(--paper); }

/* Modals & toasts */
html.dark .modal-close { background: #240b09; color: var(--paper-muted); }
html.dark .modal-close:hover { background: #2e0d0b; color: var(--clay); }

/* Micro borders that used --bg-light as divider */
html.dark .lms-card-footer,
html.dark .lms-course-stats,
html.dark .lms-panel-header,
html.dark .lms-course-stats { border-color: rgba(245,239,236,0.1); }

/* Welcome banner / join */
html.dark .lms-welcome { background: linear-gradient(135deg, #c47b6a 0%, #812822 100%); color: #1a0806; }

/* ============================================
   PUBLIC / AUTH PAGES (split-screen)
   login, register, forgot-password, reset-password, verify
   ============================================ */
html.dark .login-layout { background: var(--ink-warm); }
html.dark .login-form-side { background: #1a0806; box-shadow: -4px 0 24px rgba(0,0,0,0.5); }
html.dark .login-brand::before {
  background: linear-gradient(135deg, rgba(18, 5, 3, 0.85) 0%, rgba(20, 6, 4, 0.55) 100%);
}
html.dark .login-header h1 { color: var(--paper); }
html.dark .form-group label { color: var(--paper); }
html.dark .form-group input { background: #240b09; border-color: rgba(245,239,236,0.16); color: var(--paper); }
html.dark .form-group input::placeholder { color: var(--paper-faint); }
html.dark .form-group input:focus { border-color: var(--clay); background: #2e0d0b; box-shadow: 0 0 0 4px rgba(196,123,106,0.2); }
html.dark .login-header .icon-box,
html.dark .login-footer,
html.dark .signup-link { border-color: rgba(245,239,236,0.12); }
html.dark .btn-primary,
html.dark .verify-btn { background: var(--clay); color: #1a0806; }
html.dark .btn-primary:hover,
html.dark .verify-btn:hover { background: #d98e7d; }
html.dark .btn-secondary { background: #240b09; border-color: rgba(245,239,236,0.25); color: var(--paper); }
html.dark .error-msg { background: rgba(231,76,60,0.14); border-color: rgba(231,76,60,0.35); color: #f2a69c; }
html.dark .success-msg { background: rgba(39,174,96,0.14); border-color: rgba(39,174,96,0.35); color: #8fd6ae; }
html.dark .divider span,
html.dark .login-footer { color: var(--paper-muted); }
html.dark .back-home,
html.dark .signup-link a,
html.dark .login-footer a { color: var(--clay); }
html.dark .back-home:hover,
html.dark .signup-link a:hover,
html.dark .login-footer a:hover { color: #d98e7d; }

/* Register stream options */
html.dark .stream-option { background: #2e0d0b; border-color: rgba(245,239,236,0.14); }
html.dark .stream-option:hover { border-color: var(--clay); }
html.dark .stream-option.selected { border-color: var(--clay); background: rgba(196,123,106,0.18); }
html.dark .stream-option h4 { color: var(--paper); }
html.dark .stream-option p { color: var(--paper-muted); }
html.dark .stream-option i { color: var(--clay); }

/* Forgot / reset */
html.dark .password-strength { background: rgba(245,239,236,0.12); }
html.dark .login-header.success .icon-box { background: rgba(39,174,96,0.2); }
html.dark .login-header.success .icon-box i { color: #8fd6ae; }

/* ============================================
   VERIFY-EMAIL
   ============================================ */
html.dark .verify-container { background: #2e0d0b; box-shadow: 0 4px 24px rgba(0,0,0,0.5); }
html.dark .verify-container h1 { color: var(--paper); }
html.dark .email-display { background: #240b09; color: var(--paper); }
html.dark .code-input { background: #1a0806; border-color: rgba(245,239,236,0.18); color: var(--paper); }
html.dark .code-input:focus { border-color: var(--clay); }
html.dark .resend-link a { color: var(--clay); }
html.dark .message.success { background: rgba(39,174,96,0.16); color: #8fd6ae; }
html.dark .message.error { background: rgba(231,76,60,0.16); color: #f2a69c; }

/* ============================================
   TERMS & PRIVACY (policy pages)
   ============================================ */
html.dark .policy-container { color: var(--paper); }
html.dark .policy-header h1 { color: var(--paper); }
html.dark .policy-section h2 { color: var(--clay); }
html.dark .policy-section p,
html.dark .policy-section li { color: var(--paper-muted); }
html.dark .highlight-box { background: #240b09; border-left-color: var(--clay); }
html.dark .warning-box { background: rgba(243,156,18,0.14); border-left-color: #ffc107; }
html.dark .back-link { color: var(--clay); }
html.dark .contact-box { background: linear-gradient(135deg, #812822 0%, #430d0d 100%); color: #fff; }

/* ============================================
   SUPERADMIN (self-contained)
   ============================================ */
html.dark .card,
html.dark .stat-box,
html.dark .tab-btn { background-color: var(--ox-card); }
html.dark .tab-btn:hover { background-color: #35100d; }
html.dark .modal-content { background: #2e0d0b; }
html.dark .form-group input,
html.dark .form-group select { background: #1a0806; border-color: rgba(245,239,236,0.16); color: var(--paper); }
html.dark tr:hover { background: rgba(196,123,106,0.08) !important; }
html.dark .badge-admin,
html.dark .badge-teacher,
html.dark .badge-student { background: #240b09; color: var(--paper); }
html.dark td { color: var(--paper); }

/* ============================================
   CHAPTER (white self-contained)
   ============================================ */
html.dark nav:not(.sidebar-nav) { background: rgba(20,6,4,0.9) !important; }
html.dark .chapter-header,
html.dark .pdf-item,
html.dark .premium-content { background-color: var(--ox-card); }
html.dark .pdf-icon { color: var(--clay); }

/* ============================================
   VIDEO (yellow self-contained)
   ============================================ */
html.dark nav:not(.sidebar-nav) { background: rgba(20,6,4,0.9) !important; }
html.dark .video-placeholder { background: #1a0806; }
html.dark .video-info { background: var(--ox-card); }

/* ============================================
   LIVE-EXAM  &  LIVE-EXAM-RESULTS
   ============================================ */
html.dark .exam-info-card,
html.dark .join-card,
html.dark .exam-topbar,
html.dark .section-block,
html.dark .question-card,
html.dark .option-letter,
html.dark .nav-btn,
html.dark .sidebar-panel,
html.dark .q-dot,
html.dark .modal-box,
html.dark .score-card,
html.dark .q-nav-dot,
html.dark .action-btn.secondary { background: var(--ox-card); }
html.dark .option-btn:hover,
html.dark .action-btn.secondary:hover { background: #240b09; }
html.dark .option-btn.selected { background: rgba(196,123,106,0.2); }
html.dark .section-block .section-table th,
html.dark .meta-item,
html.dark .countdown-section,
html.dark .rule-num,
html.dark .option-item,
html.dark .explanation-box,
html.dark .section-content,
html.dark .section-table th { background: #240b09; }
html.dark .btn-start:disabled { background: #3a2f2b; color: #9a8f8a; }
html.dark .form-input { background: #1a0806; border-color: rgba(245,239,236,0.16); color: var(--paper); }

/* ============================================
   PDF-EXAM-INSTRUCTIONS (uses --primary/--text naming)
   ============================================ */
html.dark .container { background: var(--ox-card); }
html.dark .container h1,
html.dark .container h2,
html.dark .container h3 { color: var(--paper); }
html.dark .container p,
html.dark .container li { color: var(--paper-muted); }
html.dark td { background: #1a0806; color: var(--paper); }
html.dark .example-box { background: #2e1a0d; }
html.dark .tip-box { background: #0f2416; }
html.dark .warn-box { background: #2a120e; }

/* ============================================
   MISCELLANEOUS LIGHT SURFACES
   ============================================ */
/* Sticky action bars (edit-pdf-exam, create-exam) */
html.dark .sticky-action-bar,
html.dark .sticky-action-bar select { background: rgba(22,7,5,0.9) !important; border-color: rgba(245,239,236,0.14) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important; }

/* Visibility badges (bundles) */
html.dark .visibility-badge.personal { background: #240b09; color: var(--paper-muted); }
html.dark .visibility-badge.universal { background: rgba(196,123,106,0.18); color: var(--clay); }

/* White-card surfaces */
html.dark .admin-table-container,
html.dark .form-card,
html.dark .page-header,
html.dark .bundle-card,
html.dark .empty-state,
html.dark .empty-state-page,
html.dark .content-card,
html.dark .section-card,
html.dark .bundle-accordion,
html.dark .lms-widget,
html.dark .question-action-btn,
html.dark .esslce-option,
html.dark .esslce-option-marker,
html.dark .esslce-flag-btn,
html.dark .esslce-nav-btn.prev,
html.dark .section-link-select select { background: var(--ox-card) !important; color: var(--paper); }

html.dark .section-link-select select { color: var(--paper); border-color: rgba(245,239,236,0.14) !important; }
html.dark .section-link-select select:focus { border-color: var(--clay) !important; }

/* Form inputs keep dark background on focus */
html.dark .form-input:focus,
html.dark .form-select:focus,
html.dark .form-textarea:focus,
html.dark .search-wrapper input:focus,
html.dark .viewer-search-input:focus { background: #240b09 !important; border-color: var(--clay) !important; box-shadow: 0 0 0 3px rgba(196,123,106,0.15) !important; }

html.dark .form-group select,
html.dark .search-wrapper input,
html.dark .viewer-search-input,
html.dark .section-link-select select { background: #240b09 !important; color: var(--paper) !important; border-color: rgba(245,239,236,0.14) !important; }

/* Interactive hover states that inverted */
html.dark .esslce-option:hover,
html.dark .esslce-nav-btn.prev:hover,
html.dark .question-action-btn:hover,
html.dark .lockdown-warning .esslce-start-btn:hover,
html.dark .option-btn:hover,
html.dark .nav-btn:hover,
html.dark .google-btn:hover { background: #35100d !important; }

/* Remaining white-card surfaces across pages */
html.dark .diagnostic-container,
html.dark .onboarding-card,
html.dark .diag-option,
html.dark .diag-option-letter,
html.dark .lms-timeline-item,
html.dark .question-card,
html.dark .question-navigator,
html.dark .review-option-marker,
html.dark .review-section,
html.dark .score-section,
html.dark .exam-info-card,
html.dark .join-card,
html.dark .rules-card,
html.dark .section-block,
html.dark .sidebar-panel,
html.dark .exam-topbar,
html.dark .option-letter,
html.dark .score-card,
html.dark .q-nav-dot,
html.dark .esslce-stat,
html.dark .esslce-grid-btn,
html.dark .draft-card,
html.dark .delete-modal,
html.dark .exam-card,
html.dark .chapter-item,
html.dark .video-card,
html.dark .google-btn,
html.dark .stream-option,
html.dark .format-info pre,
html.dark .page-info-bar,
html.dark .action-btn.secondary { background: var(--ox-card) !important; color: var(--paper); border-color: rgba(245,239,236,0.12) !important; }

/* Onboarding card text on the dark card stays readable (h2/p use hardcoded dark colors) */
html.dark .onboarding-card h2 { color: var(--paper); }
html.dark .onboarding-card p { color: var(--paper-muted); }

/* Exam-results question navigator dots */
html.dark .nav-btn { background: var(--ox-card) !important; color: var(--paper); border-color: rgba(245,239,236,0.12) !important; }
html.dark .nav-btn.active { border-color: var(--clay) !important; color: var(--paper) !important; }
html.dark .nav-btn.active.correct,
html.dark .nav-btn.active.incorrect { background: #3a2a28 !important; color: var(--paper) !important; }

/* Live-exam & question-dot bases */
html.dark .q-dot,
html.dark .legend .dot,
html.dark .esslce-legend-dot.unvisited { background: #3a2a28 !important; border-color: #5a4a48 !important; }

/* Formats/mono blocks */
html.dark .format-info pre { background: #1a0806 !important; color: var(--paper) !important; }

/* ============================================
   PRIMARY ACCENT ELEMENTS (var(--text-primary) fills)
   ============================================ */
/* Primary buttons / accent fills -> warm clay + dark ink text */
html.dark .login-btn,
html.dark .btn,
html.dark .btn-start,
html.dark .verify-btn,
html.dark .esslce-submit-btn,
html.dark .esslce-start-btn,
html.dark .esslce-nav-btn.next,
html.dark .esslce-nav-btn.submit,
html.dark .nav-btn.submit-btn,
html.dark .modal-btn,
html.dark .action-btn.primary,
html.dark .carousel-btn,
html.dark .carousel-dot.active,
html.dark .diag-nav-btn.next,
html.dark .diag-progress-fill,
html.dark .onboarding-card::before,
html.dark .tab-btn.active,
html.dark .badge-super,
html.dark .questions-count,
html.dark .results-score-circle,
html.dark .user-avatar-sm,
html.dark .chapter-icon { background: var(--clay) !important; color: #1a0806 !important; }

/* Logout buttons stay ghost in dark mode */
html.dark .logout-btn { background: transparent !important; color: var(--paper) !important; border-color: rgba(245,239,236,0.25) !important; }

html.dark .login-btn:hover,
html.dark .btn:hover,
html.dark .btn-start:hover,
html.dark .verify-btn:hover,
html.dark .esslce-submit-btn:hover,
html.dark .esslce-nav-btn.next:hover,
html.dark .esslce-nav-btn.submit:hover,
html.dark .modal-btn:hover,
html.dark .action-btn.primary:hover,
html.dark .logout-btn:hover { background: #d98e7d !important; color: #1a0806 !important; }

html.dark .carousel-btn:hover { background: #d98e7d !important; }
html.dark .results-score-circle { border: 3px solid rgba(245,239,236,0.2) !important; }

/* Selected answers -> highlight with clay */
html.dark .esslce-option.selected,
html.dark .diag-option.selected { background: var(--clay) !important; border-color: var(--clay) !important; color: #1a0806 !important; }
html.dark .esslce-option.selected .esslce-option-text,
html.dark .diag-option.selected { color: #1a0806 !important; }
html.dark .esslce-option.selected .esslce-option-marker,
html.dark .option-btn.selected .option-letter,
html.dark .diag-option.selected .diag-option-letter { background: #1a0806 !important; border-color: #1a0806 !important; color: var(--paper); }

/* Exam engine topbar stays deep burgundy, not light */
html.dark .esslce-topbar { background: var(--red) !important; color: var(--paper) !important; }
html.dark .esslce-topbar .esslce-timer,
html.dark .esslce-topbar .toggle-sidebar-btn { background: rgba(255,255,255,0.14) !important; color: var(--paper) !important; }

/* Question-dot navigation states */
html.dark .q-dot.current,
html.dark .legend .dot.current { background: var(--clay) !important; border-color: var(--clay) !important; color: #1a0806 !important; }

/* Legend dots: keep color-coded states visible on dark, dim the "unvisited" */
html.dark .esslce-legend-dot.unvisited { background: #3a2a28 !important; border-color: #5a4a48 !important; }
html.dark .esslce-legend-dot.current { border-color: var(--clay) !important; }

/* Superadmin label pills on dark backgrounds */
html.dark .badge-admin,
html.dark .badge-teacher,
html.dark .badge-student { background: #240b09 !important; color: var(--paper) !important; }

/* ============================================
   HERO / BANNER GRADIENTS
   Kept identical in light and dark modes
   (fixed burgundy, not-theme-flipped tokens)
   ============================================ */
html.dark .welcome-banner,
html.dark .course-hero,
html.dark .bundle-hero,
html.dark .results-header,
html.dark .live-results-header,
html.dark .video-card-thumb { background: linear-gradient(135deg, #98322d 0%, #6b221f 100%) !important; }

/* Glass action buttons inside the dashboard welcome banner (match light mode) */
html.dark .welcome-actions .btn { background: rgba(255,255,255,0.15); color: white; border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(4px); }
html.dark .welcome-actions .btn:hover { background: rgba(255,255,255,0.25); }

/* ---------- Smooth transition on theme switch ---------- */
html.dark body,
html.dark .card,
html.dark .lms-card,
html.dark .lms-stat,
html.dark .lms-course-card,
html.dark .lms-module,
html.dark .lms-panel,
html.dark .lms-widget,
html.dark .lms-table-wrapper,
html.dark .lms-exam-nav,
html.dark .modal,
html.dark .toast,
html.dark .login-form-side,
html.dark .verify-container,
html.dark .policy-container,
html.dark .form-input,
html.dark .topbar {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  html.dark body, html.dark .card, html.dark .lms-card,
  html.dark .lms-stat, html.dark .topbar, html.dark .modal,
  html.dark .form-input, html.dark .login-form-side {
    transition: none !important;
  }
  .theme-toggle { transition: none !important; }
  .theme-toggle-crescent { transition: none !important; }
}

/* ============================================
   BYTE PATH  (Duolingo-style learning map)
   ============================================ */
html.dark .duo-node.locked .duo-node-btn,
html.dark .duo-node.done-future .duo-node-btn { background: #3e2c2a; }

html.dark .duo-node.openable .duo-node-btn { background: #35100d; }

html.dark .duo-node-state-check { border-color: #2e0d0b; }

html.dark .duo-pin.chapter .pin-badge { background: var(--ox-card); }

html.dark .q-option:hover { border-color: var(--duo-blue); background: rgba(28,176,246,.08); }
html.dark .q-option.selected { background: rgba(28,176,246,.14); }
html.dark .q-option.correct { background: rgba(88,204,2,.16); }
html.dark .q-option.wrong { background: rgba(255,75,75,.16); }
html.dark .q-opt-letter { background: #240b09; }

html.dark .lesson-icon-btn { background: #240b09; color: var(--paper-muted); }
html.dark .lesson-icon-btn:hover { background: #2e0d0b; color: var(--paper); }

html.dark .btn-duo:disabled { background: #3a2f2b; color: #9a8f8a; }
html.dark .btn-duo.ghost { border-color: rgba(245,239,236,.18); }
html.dark .btn-duo.ghost:hover { border-color: var(--paper); color: var(--paper); }

html.dark .course-chip.active { background: rgba(28,176,246,.12); }

html.dark .q-explanation { background: rgba(28,176,246,.1); }

html.dark .path-stage::before {
  background:
    radial-gradient(680px 340px at 50% -60px, rgba(28,176,246,.10), transparent 70%),
    radial-gradient(560px 260px at 50% -20px, rgba(196,123,106,.10), transparent 65%);
}

html.dark .xp-shower { color: #8fd6ae; }
html.dark .results-stars i.lit { color: var(--duo-gold); }

/* ============================================
   BYTE CMS  (teacher-byte-cms)
   ============================================ */
html.dark .chapter-card,
html.dark .topic-block,
html.dark .editor-card,
html.dark .quest-pick,
html.dark .question-attach-list { background: var(--ox-card); }

html.dark .byte-row:hover,
html.dark .byte-row.active { background: #35100d; }

html.dark .byte-row .byte-name,
html.dark .chip-year { color: var(--paper); }

html.dark .topic-actions button { background: #240b09; border-color: rgba(245,239,236,.14); color: var(--paper-muted); }

html.dark .add-row-btn { border-color: rgba(245,239,236,.2); color: var(--paper-muted); }
html.dark .add-row-btn:hover { border-color: var(--clay); color: var(--paper); }

html.dark .btn-outline { background: #240b09; border-color: rgba(245,239,236,.2); color: var(--paper); }
html.dark .btn-outline:hover { border-color: var(--clay); color: var(--clay); }

html.dark .quest-pick .qp-exam { background: #240b09; color: var(--paper-muted); }
html.dark .quest-pick .qp-row:hover { background: #2e0d0b; }
html.dark .quest-pick .qp-row .qp-add { border-color: rgba(245,239,236,.25); }

html.dark .question-attach-item:hover { background: #240b09; }
html.dark .question-attach-item.attached { background: rgba(88,204,2,.08); }
html.dark .question-attach-item .qa-idx { background: var(--bg-dark); }

html.dark .ready-pill.empty { background: rgba(239,68,68,.16); color: #f2a69c; }

html.dark .cms-stat,
html.dark .form-select,
html.dark .form-input { background: var(--ox-card); }
html.dark .char-counter { color: var(--paper-faint); }

/* ============================================
   FEATURE FLAGS
   ============================================ */
html.dark .flag-card { background: #2e0d0b; }
html.dark .flag-filters .ff-btn { background: #2e0d0b; border-color: rgba(245,239,236,.14); color: var(--paper-muted); }
html.dark .flag-filters .ff-btn:hover { border-color: var(--clay); color: var(--paper); }
html.dark .flag-filters .ff-btn.active { background: var(--clay); border-color: var(--clay); color: #1a0806; }
html.dark .status-pill.off { background: #240b09; color: var(--paper-muted); }
html.dark .toggle-switch input:checked + .toggle-slider { background: #58cc02; }