/*
 * Dark Theme Styles - Job Tests Portal 2026
 * Modern dark-first design with elegant aesthetics
 * UPDATED: Softer dark mode with better text visibility
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES (Theme Variables)
   ========================================================================== */

:root {
  /* Light Theme (default) */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-card: #ffffff;
  --bg-sidebar: #f8fafc;
  --bg-header: rgba(255, 255, 255, 0.9);
  
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  
  --border-color: #e2e8f0;
  --border-light: #f1f5f9;
  --shadow-color: rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] {
  /* Dark Theme - Softer, more readable */
  --bg-primary: #13131f;
  --bg-secondary: #1a1a2e;
  --bg-tertiary: #1f1f35;
  --bg-card: #1e1e32;
  --bg-sidebar: #16162a;
  --bg-header: rgba(19, 19, 31, 0.9);
  
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-light: #64748b;
  
  --border-color: rgba(255, 255, 255, 0.1);
  --border-light: rgba(255, 255, 255, 0.05);
  --shadow-color: rgba(0, 0, 0, 0.4);

  /* Icon Buttons - high contrast in dark mode */
  --icon-btn-bg: rgba(255, 255, 255, 0.08);
  --icon-btn-border: rgba(255, 255, 255, 0.3);
  --icon-btn-color: #ffffff;
  --icon-btn-hover-bg: rgba(255, 255, 255, 0.18);
  --icon-btn-hover-border: rgba(96, 165, 250, 0.6);
  --icon-btn-hover-color: #93c5fd;
}

/* ==========================================================================
   GLOBAL DARK STYLES
   ========================================================================== */

body.dark-theme {
  background-color: var(--bg-primary, #13131f);
  color: var(--text-primary, #f1f5f9);
}

html[data-theme="dark"] body,
body.dark-theme {
  background-color: var(--bg-primary, #13131f);
  color: var(--text-primary, #f1f5f9);
}

/* 
 * Aggressive overrides for elements with inline styles
 * These catch elements with inline background:white styles
 */
html[data-theme="dark"] div[style*="background: white"],
html[data-theme="dark"] div[style*="background:white"],
html[data-theme="dark"] div[style*="background:#fff"],
html[data-theme="dark"] div[style*="background: #fff"],
html[data-theme="dark"] div[style*="background: #ffffff"],
html[data-theme="dark"] section[style*="background: white"],
html[data-theme="dark"] section[style*="background:white"],
html[data-theme="dark"] div[style*="background: #f9fafb"],
html[data-theme="dark"] div[style*="background: #f8fafc"],
html[data-theme="dark"] div[style*="background:#f9fafb"],
html[data-theme="dark"] div[style*="background:#f8fafc"] {
  background: var(--bg-card, #1e1e32) !important;
  border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
}

/* Light gradient backgrounds */
html[data-theme="dark"] div[style*="linear-gradient"][style*="#f0f9ff"],
html[data-theme="dark"] div[style*="linear-gradient"][style*="#e0f2fe"],
html[data-theme="dark"] div[style*="linear-gradient"][style*="#fef3c7"],
html[data-theme="dark"] div[style*="linear-gradient"][style*="#fde68a"],
html[data-theme="dark"] div[style*="linear-gradient"][style*="#F0F9FF"],
html[data-theme="dark"] div[style*="linear-gradient"][style*="#dcfce7"],
html[data-theme="dark"] div[style*="linear-gradient"][style*="#f0fdf4"],
html[data-theme="dark"] section[style*="linear-gradient"][style*="#f0f9ff"],
html[data-theme="dark"] section[style*="linear-gradient"][style*="#e0f2fe"] {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Spans with light backgrounds */
html[data-theme="dark"] span[style*="background: white"],
html[data-theme="dark"] span[style*="background:white"],
html[data-theme="dark"] span[style*="background: #f0f9ff"],
html[data-theme="dark"] span[style*="background:#f0f9ff"] {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
}

/* Override common text colors */
html[data-theme="dark"] [style*="color: #1e293b"],
html[data-theme="dark"] [style*="color:#1e293b"],
html[data-theme="dark"] [style*="color: #0f4c81"],
html[data-theme="dark"] [style*="color:#0f4c81"] {
  color: #fafafa !important;
}

html[data-theme="dark"] [style*="color: #374151"],
html[data-theme="dark"] [style*="color:#374151"],
html[data-theme="dark"] [style*="color: #4b5563"],
html[data-theme="dark"] [style*="color:#4b5563"] {
  color: #e4e4e7 !important;
}

html[data-theme="dark"] [style*="color: #6b7280"],
html[data-theme="dark"] [style*="color:#6b7280"],
html[data-theme="dark"] [style*="color: #64748b"],
html[data-theme="dark"] [style*="color:#64748b"],
html[data-theme="dark"] [style*="color: #9ca3af"],
html[data-theme="dark"] [style*="color:#9ca3af"] {
  color: #a1a1aa !important;
}

/* ==========================================================================
   WHITE BACKGROUND ELEMENTS - Ensure dark text for visibility
   These catch elements that have white/light backgrounds and need dark text
   ========================================================================== */

/* Buttons and links with white backgrounds must have dark text */
html[data-theme="dark"] a[style*="background: white"],
html[data-theme="dark"] a[style*="background:white"],
html[data-theme="dark"] a[style*="background:#fff"],
html[data-theme="dark"] a[style*="background: #fff"],
html[data-theme="dark"] button[style*="background: white"],
html[data-theme="dark"] button[style*="background:white"],
html[data-theme="dark"] button[style*="background:#fff"],
html[data-theme="dark"] button[style*="background: #fff"] {
  color: #1e293b !important;
}

/* Cards and containers that keep white background need dark text */
html[data-theme="dark"] .card-white,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] [class*="white-bg"] {
  color: #1e293b;
}

html[data-theme="dark"] .card-white *,
html[data-theme="dark"] .bg-white *,
html[data-theme="dark"] [class*="white-bg"] * {
  color: inherit;
}

/* ==========================================================================
   PROFESSION/CAREER CARDS - About Page
   ========================================================================== */

/* ==========================================================================
   GLOBAL CLASS-BASED DARK MODE OVERRIDES
   Catches common class patterns used in many templates with hardcoded white backgrounds.
   These must use !important to override inline <style> blocks.
   ========================================================================== */

/* Cards and containers with white backgrounds */
html[data-theme="dark"] .intro-card,
html[data-theme="dark"] .question-card,
html[data-theme="dark"] .module-card,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .test-card,
html[data-theme="dark"] .results-card,
html[data-theme="dark"] .task-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .skill-card,
html[data-theme="dark"] .exercise-card,
html[data-theme="dark"] .skill-intro-card,
html[data-theme="dark"] .question-review-card,
html[data-theme="dark"] .cta-box,
html[data-theme="dark"] .purchase-box {
  background: var(--bg-card, #1e1e32) !important;
  border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
  color: var(--text-primary, #f1f5f9) !important;
}

/* Review and feedback sections */
html[data-theme="dark"] .questions-review,
html[data-theme="dark"] .category-breakdown,
html[data-theme="dark"] .results-header,
html[data-theme="dark"] .progress-header {
  background: var(--bg-card, #1e1e32) !important;
  border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
  color: var(--text-primary, #f1f5f9) !important;
}

/* Question-related elements */
html[data-theme="dark"] .question-option {
  background: var(--bg-card, #1e1e32) !important;
  border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .question-right-panel,
html[data-theme="dark"] .submit-section {
  background: var(--bg-secondary, #1a1a2e) !important;
  border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .question-dot {
  background: var(--bg-tertiary, #1f1f35) !important;
  border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
  color: var(--text-secondary, #cbd5e1) !important;
}

/* Modal content */
html[data-theme="dark"] .modal-content {
  background: var(--bg-card, #1e1e32) !important;
  border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
  color: var(--text-primary, #f1f5f9) !important;
}

/* Form elements in dark mode */
html[data-theme="dark"] .count-option {
  background: var(--bg-tertiary, #1f1f35) !important;
  border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
  color: var(--text-primary, #f1f5f9) !important;
}

/* Navigation buttons */
html[data-theme="dark"] .nav-btn {
  background: var(--bg-card, #1e1e32) !important;
  border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .nav-btn:hover {
  background: var(--bg-tertiary, #1f1f35) !important;
}

/* Tool and action buttons */
html[data-theme="dark"] .tool-btn {
  background: var(--bg-card, #1e1e32) !important;
  border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .tool-btn:hover {
  background: var(--bg-tertiary, #1f1f35) !important;
}

/* Secondary buttons across all pages */
html[data-theme="dark"] .btn-secondary {
  background: transparent !important;
  color: #a5b4fc !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
}

html[data-theme="dark"] .btn-secondary:hover {
  background: rgba(99, 102, 241, 0.12) !important;
  color: #c7d2fe !important;
}

/* Modules sections */
html[data-theme="dark"] .modules-section {
  background: var(--bg-secondary, #1a1a2e) !important;
  border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
}

/* Ensure headings inside dark cards are visible */
html[data-theme="dark"] .intro-card h2,
html[data-theme="dark"] .intro-card h3,
html[data-theme="dark"] .section-card h2,
html[data-theme="dark"] .section-card h3,
html[data-theme="dark"] .results-card h2,
html[data-theme="dark"] .results-card h3,
html[data-theme="dark"] .module-card h3 {
  color: #e2e8f0 !important;
}

/* Ensure paragraphs inside dark cards are readable */
html[data-theme="dark"] .intro-card p,
html[data-theme="dark"] .section-card p,
html[data-theme="dark"] .results-card p,
html[data-theme="dark"] .module-card p {
  color: #cbd5e1 !important;
}

/* ==========================================================================
   END GLOBAL CLASS-BASED DARK MODE OVERRIDES
   ========================================================================== */

html[data-theme="dark"] .profession-card {
  background: var(--bg-card, #1e1e32);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .profession-card:hover {
  border-color: #10b981;
  box-shadow: 0 12px 40px rgba(16, 185, 129, 0.15);
}

html[data-theme="dark"] .profession-card h3 {
  color: var(--text-primary, #f1f5f9);
}

html[data-theme="dark"] .profession-card p {
  color: var(--text-secondary, #cbd5e1);
}

html[data-theme="dark"] .profession-image-wrapper {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%);
}

html[data-theme="dark"] .professions-section {
  background: var(--bg-secondary, #1a1a2e);
}

/* ==========================================================================
   JOURNEY STEPS - Your Path to Success Cards
   ========================================================================== */

html[data-theme="dark"] a.journey-step-compact {
  background: var(--bg-card, #1e1e32);
}

html[data-theme="dark"] a.journey-step-compact h4 {
  color: var(--text-primary, #f1f5f9);
}

html[data-theme="dark"] a.journey-step-compact p {
  color: var(--text-secondary, #cbd5e1);
}

/* Color variants in dark mode - slightly adjust opacity for better visibility */
html[data-theme="dark"] a.journey-step-compact[data-color="indigo"] .step-icon-compact { background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(129, 140, 248, 0.15)); }
html[data-theme="dark"] a.journey-step-compact[data-color="purple"] .step-icon-compact { background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(167, 139, 250, 0.15)); }
html[data-theme="dark"] a.journey-step-compact[data-color="blue"] .step-icon-compact { background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(96, 165, 250, 0.15)); }
html[data-theme="dark"] a.journey-step-compact[data-color="teal"] .step-icon-compact { background: linear-gradient(135deg, rgba(20, 184, 166, 0.25), rgba(45, 212, 191, 0.15)); }
html[data-theme="dark"] a.journey-step-compact[data-color="orange"] .step-icon-compact { background: linear-gradient(135deg, rgba(249, 115, 22, 0.25), rgba(251, 146, 60, 0.15)); }
html[data-theme="dark"] a.journey-step-compact[data-color="pink"] .step-icon-compact { background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(244, 114, 182, 0.15)); }
html[data-theme="dark"] a.journey-step-compact[data-color="cyan"] .step-icon-compact { background: linear-gradient(135deg, rgba(6, 182, 212, 0.25), rgba(34, 211, 238, 0.15)); }

html[data-theme="dark"] a.journey-step-compact.success .step-icon-compact {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

/* ==========================================================================
   ABOUT PAGE - Complete Dark Mode Overhaul
   ========================================================================== */

/* --- Hero Section --- */
html[data-theme="dark"] section.about-infographic-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0c1426 100%) !important;
  border: none !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .about-infographic-hero::before {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
}

html[data-theme="dark"] .infographic-badge {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
}

html[data-theme="dark"] .infographic-title {
  color: #ffffff;
}

html[data-theme="dark"] .infographic-subtitle {
  color: #cbd5e1;
}

html[data-theme="dark"] .infographic-cta.primary {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
}

html[data-theme="dark"] .infographic-cta.secondary {
  background: rgba(255, 255, 255, 0.05);
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.4);
}

html[data-theme="dark"] .infographic-cta.secondary:hover {
  background: rgba(99, 102, 241, 0.15);
  color: #c7d2fe;
  border-color: rgba(99, 102, 241, 0.6);
}

html[data-theme="dark"] .infographic-image {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .infographic-glow {
  background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
}

/* --- Mission Section --- */
html[data-theme="dark"] .about-mission {
  background: linear-gradient(180deg, #0f172a 0%, #1a1a2e 100%);
}

html[data-theme="dark"] .mission-badge {
  background: rgba(99, 102, 241, 0.12);
  color: #a5b4fc;
}

html[data-theme="dark"] .mission-title {
  color: #f1f5f9;
}

html[data-theme="dark"] .mission-text {
  color: #94a3b8;
}

/* --- Professions Section (supplement existing rules) --- */
html[data-theme="dark"] .professions-section .section-subtitle {
  color: #94a3b8;
}

html[data-theme="dark"] .profession-image-wrapper img {
  filter: brightness(0.9) contrast(1.1);
}

/* --- Journey Section --- */
html[data-theme="dark"] .about-journey-section {
  background: linear-gradient(180deg, #1a1a2e 0%, #0f172a 100%);
}

html[data-theme="dark"] .about-journey-section .section-subtitle {
  color: #94a3b8;
}

/* --- Features Section --- */
html[data-theme="dark"] .features-section {
  background: linear-gradient(180deg, #0f172a 0%, #1a1a2e 100%);
}

html[data-theme="dark"] .features-section .section-subtitle {
  color: #94a3b8;
}

html[data-theme="dark"] .feature-card {
  background: #1e1e32 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .feature-card:hover {
  border-color: rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15);
}

html[data-theme="dark"] .feature-card h3 {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .feature-card p {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .feature-link {
  color: #a5b4fc;
}

html[data-theme="dark"] .feature-link:hover {
  color: #c7d2fe;
}

/* --- Industries Section --- */
html[data-theme="dark"] .industries-section {
  background: #1a1a2e;
}

html[data-theme="dark"] .industries-section .section-subtitle {
  color: #94a3b8;
}

html[data-theme="dark"] .industry-card {
  background: #1e1e32;
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .industry-card:hover {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 12px 40px rgba(99, 102, 241, 0.12);
}

html[data-theme="dark"] .industry-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
  color: #a5b4fc;
}

html[data-theme="dark"] .industry-card h3 {
  color: #f1f5f9;
}

html[data-theme="dark"] .industry-card p {
  color: #94a3b8;
}

/* --- Stats Section (keeps gradient but darker) --- */
html[data-theme="dark"] .stats-section {
  background: linear-gradient(135deg, #1e3a5f 0%, #312e81 100%);
}

/* --- Why Section --- */
html[data-theme="dark"] .why-section {
  background: linear-gradient(180deg, #1a1a2e 0%, #0f172a 100%);
}

html[data-theme="dark"] .why-section .section-subtitle {
  color: #94a3b8;
}

html[data-theme="dark"] .why-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
  color: #a5b4fc;
}

html[data-theme="dark"] .why-card h3 {
  color: #f1f5f9;
}

html[data-theme="dark"] .why-card p {
  color: #94a3b8;
}

html[data-theme="dark"] .research-references {
  background: #1e1e32;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .research-references h4 {
  color: #f1f5f9;
}

html[data-theme="dark"] .references-links a {
  background: rgba(255, 255, 255, 0.05);
  color: #a5b4fc;
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .references-links a:hover {
  background: rgba(99, 102, 241, 0.15);
  color: #c7d2fe;
  border-color: rgba(99, 102, 241, 0.4);
}

/* --- CTA Section --- */
html[data-theme="dark"] .about-cta-section {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}

html[data-theme="dark"] .cta-content h2 {
  color: #ffffff;
}

html[data-theme="dark"] .cta-content p {
  color: #94a3b8;
}

html[data-theme="dark"] .cta-primary {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
}

html[data-theme="dark"] .cta-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.4);
}

html[data-theme="dark"] .cta-secondary:hover {
  background: rgba(99, 102, 241, 0.15);
  color: #c7d2fe;
  border-color: rgba(99, 102, 241, 0.6);
}

/* --- Section titles fallback for about page --- */
html[data-theme="dark"] .section-subtitle {
  color: #94a3b8;
}

/* ==========================================================================
   FORM ELEMENTS - Dark Mode
   ========================================================================== */

html[data-theme="dark"] select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] textarea {
  background: var(--bg-tertiary, #1f1f35) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] select:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus {
  border-color: #3b82f6 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

html[data-theme="dark"] select option {
  background: var(--bg-tertiary, #1f1f35) !important;
  color: var(--text-primary, #f1f5f9) !important;
}

/* Dropdown select styling */
html[data-theme="dark"] select[style*="background: white"],
html[data-theme="dark"] select[style*="background:white"],
html[data-theme="dark"] select[style*="padding"] {
  background: var(--bg-tertiary, #1f1f35) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Duration form styling for Grid Challenge and similar */
.duration-form-styled {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.duration-form-styled label {
  font-weight: 600;
}

html[data-theme="dark"] .duration-form-styled label {
  color: #e4e4e7;
}

.duration-select-styled {
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  min-width: 160px;
}

html[data-theme="dark"] .duration-select-styled {
  background: var(--bg-tertiary, #1f1f35);
  color: var(--text-primary, #f1f5f9);
  border: 2px solid rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .duration-select-styled:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

html[data-theme="light"] .duration-select-styled {
  background: white;
  color: #374151;
  border: 2px solid #e5e7eb;
}

html[data-theme="light"] .duration-select-styled:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ==========================================================================
   HEADER STYLES
   ========================================================================== */

.main-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg-header, rgba(19, 19, 31, 0.92));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}

html[data-theme="light"] .main-header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #e2e8f0;
}

.header-container {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  gap: 1rem;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.logo-link:hover {
  transform: translateY(-1px);
}

.logo-img {
  height: 2.5rem;
  width: auto;
  object-fit: contain;
}

.logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Icon Buttons */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(96, 165, 250, 0.6);
  color: #93c5fd;
  transform: translateY(-1px);
}

/* Theme Toggle — show moon in dark mode (click = switch to light), show sun in light mode.
   Use !important so these rules win over the .hidden utility when it is applied to the wrong
   icon for the current theme. */
#theme-toggle .sun-icon { display: none !important; }
#theme-toggle .moon-icon { display: block !important; }
html[data-theme="light"] #theme-toggle .sun-icon { display: block !important; }
html[data-theme="light"] #theme-toggle .moon-icon { display: none !important; }
#theme-toggle .sun-icon,
#theme-toggle .moon-icon { color: currentColor; }

/* Primary Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, #1d4ed8, #4338ca);
  color: white;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #1e40af, #3730a3);
  box-shadow: 0 6px 20px rgba(29, 78, 216, 0.38);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

/* User Menu */
.user-menu-wrapper {
  position: relative;
}

.user-avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border: none;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-avatar-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 180px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

.user-menu-wrapper:hover .user-dropdown,
.user-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: #a1a1aa;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary, #f1f5f9);
}

/* Search */
.search-wrapper {
  position: relative;
}

.search-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 360px;
  background: var(--bg-card, #1e1e32);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 10px 40px var(--shadow-color, rgba(0, 0, 0, 0.4));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

.search-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.search-dropdown input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: var(--text-primary, #f1f5f9);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.search-dropdown input:focus {
  border-color: #3b82f6;
}

.search-dropdown input::placeholder {
  color: var(--text-muted, #94a3b8);
}

.search-results {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0 0;
  max-height: 300px;
  overflow-y: auto;
}

.search-results li a {
  display: block;
  padding: 0.625rem 0.75rem;
  color: #a1a1aa;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.search-results li a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary, #f1f5f9);
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.app-layout {
  display: flex;
  min-height: calc(100vh - 64px);
}

.app-layout.no-sidebar {
  display: block;
}

/* ==========================================================================
   SIDEBAR STYLES
   ========================================================================== */

.sidebar {
  width: 280px;
  min-width: 280px;
  background: var(--bg-sidebar, #16162a);
  border-right: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  display: flex;
  flex-direction: column;
  height: calc(100vh - 64px);
  position: sticky;
  top: 64px;
  overflow: hidden;
}

html[data-theme="light"] .sidebar {
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
}

.sidebar::-webkit-scrollbar {
  width: 4px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.sidebar-header {
  padding: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem;
  background: transparent;
  border: none;
  color: #a1a1aa;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fafafa;
}

.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0 !important; /* Critical for flexbox scrolling */
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Firefox scrollbar styling - using @supports for compatibility */
@supports (scrollbar-width: thin) {
  .sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  }
}

.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Navigation Sections */
.nav-section {
  border-radius: 10px;
  overflow: visible; /* Changed from hidden to allow scrolling */
  flex-shrink: 0; /* Prevent sections from shrinking */
}

.nav-section-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  color: var(--text-secondary, #cbd5e1);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.nav-section-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary, #f1f5f9);
}

.nav-section-toggle.active {
  background: rgba(59, 130, 246, 0.15);
  color: var(--text-primary, #f1f5f9);
}

html[data-theme="light"] .nav-section-toggle {
  color: #475569;
}

html[data-theme="light"] .nav-section-toggle:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #1e293b;
}

html[data-theme="light"] .nav-section-toggle.active {
  background: rgba(59, 130, 246, 0.1);
  color: #1e293b;
}

.nav-icon {
  font-size: 1.125rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.nav-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-section-toggle .chevron {
  color: var(--text-muted, #94a3b8);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.nav-section-toggle.active .chevron,
.nav-section-toggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

/* Section Content */
.nav-section-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.nav-section-content.open {
  max-height: 5000px; /* Large enough to accommodate all items including employer guides */
  overflow: hidden;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem 0.5rem 3rem;
  color: var(--text-muted, #94a3b8);
  text-decoration: none;
  font-size: 0.8125rem;
  border-radius: 6px;
  transition: all 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary, #f1f5f9);
}

.nav-link.active {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

html[data-theme="light"] .nav-link {
  color: #64748b;
}

html[data-theme="light"] .nav-link:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #1e293b;
}

html[data-theme="light"] .nav-link.active {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

/* View All Link - Special Styling */
.nav-link-all {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.06) 100%);
  border-left: 3px solid #10b981;
  padding-left: calc(3rem - 3px);
  font-weight: 600;
  color: #10b981 !important;
  margin-bottom: 0.5rem;
}

.nav-link-all:hover {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.1) 100%);
  color: #34d399 !important;
}

/* Subsection Label (e.g., "English" under Language Tests) */
.nav-subsection-label {
  display: block;
  padding: 0.625rem 1rem 0.375rem 2rem;
  color: var(--text-secondary, #cbd5e1);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
}

/* Indented Nav Links (items under subsection) */
.nav-link-indented {
  padding-left: 3.5rem;
}

/* Coming Soon Nav Links (placeholders) */
.nav-link-coming-soon {
  opacity: 0.5;
  pointer-events: none;
  position: relative;
}

.nav-link-coming-soon::after {
  content: "Soon";
  font-size: 0.6rem;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  margin-left: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Light mode overrides for subsection labels */
html[data-theme="light"] .nav-subsection-label {
  color: #6b7280;
}

/* Nested accordion for Employer Guides */
.nav-nested {
  margin: 0;
}
.nav-nested-toggle {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: none;
  background-color: transparent;
  border: 0;
  border-width: 0;
  border-style: none;
  border-color: transparent;
  outline: 0;
  box-shadow: none;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.4rem 1rem 0.4rem 1.75rem;
  color: var(--text-muted, #94a3b8);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  border-radius: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-nested-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
}
.nav-nested-toggle.active {
  color: var(--accent, #60a5fa);
}
.nav-nested-toggle-l2 {
  padding-left: 2.5rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-muted, #94a3b8);
}
.nav-nested-toggle-l2:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary, #e2e8f0);
}
.nav-nested-toggle-l2.active {
  color: var(--accent, #60a5fa);
}
.chevron-sm {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  color: var(--text-muted, #64748b);
  transition: transform 0.2s ease;
}
.nav-nested-toggle.active .chevron-sm {
  transform: rotate(90deg);
}
.nav-nested-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}
.nav-nested-content.open {
  max-height: 1000px;
}
.nav-link-company {
  display: block;
  padding: 0.3rem 1rem 0.3rem 4.2rem;
  color: var(--text-muted, #94a3b8);
  font-size: 0.8125rem;
  text-decoration: none;
  border-radius: 0;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-link-company:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary, #e2e8f0);
}
.nav-link-company.active {
  color: #f1f5f9;
  background: rgba(59, 130, 246, 0.1);
}

/* Light theme overrides for nested nav */
html[data-theme="light"] .nav-nested-toggle {
  color: #64748b;
}
html[data-theme="light"] .nav-nested-toggle:hover {
  background: rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .nav-nested-toggle.active {
  color: #2563eb;
}
html[data-theme="light"] .nav-nested-toggle-l2 {
  color: #64748b;
}
html[data-theme="light"] .nav-nested-toggle-l2:hover {
  background: rgba(0, 0, 0, 0.03);
  color: #334155;
}
html[data-theme="light"] .nav-link-company {
  color: #64748b;
}
html[data-theme="light"] .nav-link-company:hover {
  background: rgba(0, 0, 0, 0.03);
  color: #1e293b;
}
html[data-theme="light"] .nav-link-company.active {
  background: rgba(37, 99, 235, 0.06);
  color: #1e293b;
}

/* Logo badge styles (for landing page / hero) */
.eg-logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
  letter-spacing: -0.02em;
}
.eg-logo-badge.eg-logo-sm {
  width: 18px;
  height: 18px;
  font-size: 0.55rem;
  border-radius: 4px;
}
.eg-logo-badge.eg-logo-md {
  width: 22px;
  height: 22px;
  font-size: 0.6rem;
  border-radius: 5px;
}
.eg-logo-badge.eg-logo-lg {
  width: 36px;
  height: 36px;
  font-size: 0.85rem;
  border-radius: 8px;
}

/* Sidebar Section Divider */
.nav-divider {
  height: 1px;
  margin: 0.5rem 1rem;
  background: var(--border-color, rgba(255, 255, 255, 0.08));
}

html[data-theme="light"] .nav-divider {
  background: #e5e7eb;
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 1rem;
  border-top: 2px solid #3b82f6;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.05), rgba(59, 130, 246, 0.1));
  flex-shrink: 0;
}

.sidebar-cta {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
  border: none;
  border-radius: 12px;
  text-decoration: none;
  color: #ffffff;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sidebar-cta:hover {
  background: linear-gradient(135deg, #1e40af 0%, #5b21b6 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35), 0 4px 8px rgba(0, 0, 0, 0.15);
}

.cta-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.cta-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.cta-text strong {
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.cta-text small {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.75rem;
  font-weight: 400;
}

/* Dark mode overrides for sidebar footer */
html[data-theme="dark"] .sidebar-footer {
  border-top-color: rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, transparent, rgba(59, 130, 246, 0.05));
}

html[data-theme="dark"] .sidebar-cta {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .sidebar-cta:hover {
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4), 0 4px 8px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */

.main-content {
  flex: 1;
  min-width: 0;
  padding: 2rem;
  background: var(--bg-primary, #13131f);
}

html[data-theme="light"] .main-content {
  background: #f8fafc;
}

.app-layout.no-sidebar .main-content {
  max-width: 1760px;
  margin: 0 auto;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.main-footer {
  background: var(--bg-sidebar, #16162a);
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  padding: 3rem 0 1.5rem;
}

html[data-theme="light"] .main-footer {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.footer-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
}

.footer-brand {
  max-width: 280px;
}

.footer-logo {
  height: 2.5rem;
  margin-bottom: 1rem;
}

.footer-brand p {
  color: var(--text-muted, #94a3b8);
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.footer-column h4 {
  color: var(--text-primary, #f1f5f9);
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-column a {
  display: block;
  color: var(--text-muted, #94a3b8);
  text-decoration: none;
  font-size: 0.875rem;
  padding: 0.375rem 0;
  transition: color 0.15s ease;
}

.footer-column a:hover {
  color: var(--text-primary, #f1f5f9);
}

html[data-theme="light"] .footer-column h4 {
  color: #1e293b;
}

html[data-theme="light"] .footer-column a {
  color: #64748b;
}

html[data-theme="light"] .footer-column a:hover {
  color: #1e293b;
}

.footer-bottom {
  max-width: 1400px;
  margin: 2rem auto 0;
  padding: 1.5rem 2rem 0;
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  text-align: center;
}

.footer-bottom p {
  color: var(--text-light, #64748b);
  font-size: 0.8125rem;
  margin: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  .sidebar {
    position: fixed;
    left: -280px;
    top: 64px;
    height: calc(100vh - 64px);
    z-index: 999;
    transition: left 0.3s ease;
  }
  
  .sidebar.open {
    left: 0;
  }
  
  .main-content {
    padding: 1.5rem;
  }
  
  .footer-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .header-container {
    padding: 0.5rem 1rem;
  }
  
  .logo-text {
    display: none;
  }
  
  .main-content {
    padding: 1rem;
  }
  
  .footer-links {
    grid-template-columns: 1fr;
  }
  
  .search-dropdown {
    width: calc(100vw - 2rem);
    right: -4rem;
  }
}

/* ==========================================================================
   LIGHT THEME OVERRIDES
   ========================================================================== */

/* ==========================================================================
   CONTENT CARDS - DARK MODE (Default)
   Using html[data-theme="dark"] for maximum specificity over inline styles
   ========================================================================== */

/* Generic intro/info cards - All pattern variations */
html[data-theme="dark"] .intro-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .test-card-details,
html[data-theme="dark"] .category-section,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .lesson-card,
html[data-theme="dark"] .course-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .quiz-card,
html[data-theme="dark"] .result-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .price-card,
html[data-theme="dark"] .module-card,
html[data-theme="dark"] .bundle-card,
html[data-theme="dark"] .info-section,
html[data-theme="dark"] .intro-section,
html[data-theme="dark"] [class*="-intro"],
html[data-theme="dark"] [class*="-info"] {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #e4e4e7 !important;
}

/* Card headings - high specificity */
html[data-theme="dark"] .intro-card h2,
html[data-theme="dark"] .intro-card h3,
html[data-theme="dark"] .info-card h2,
html[data-theme="dark"] .info-card h3,
html[data-theme="dark"] .content-card h2,
html[data-theme="dark"] .content-card h3,
html[data-theme="dark"] .section-card h2,
html[data-theme="dark"] .section-card h3,
html[data-theme="dark"] .category-section h2,
html[data-theme="dark"] .lesson-card h2,
html[data-theme="dark"] .lesson-card h3,
html[data-theme="dark"] [class*="-intro"] h2,
html[data-theme="dark"] [class*="-intro"] h3,
html[data-theme="dark"] [class*="-info"] h2,
html[data-theme="dark"] [class*="-info"] h3 {
  color: #fafafa !important;
}

/* Card paragraphs and text */
html[data-theme="dark"] .intro-card p,
html[data-theme="dark"] .info-card p,
html[data-theme="dark"] .content-card p,
html[data-theme="dark"] .section-card p,
html[data-theme="dark"] .category-section p,
html[data-theme="dark"] .lesson-card p,
html[data-theme="dark"] [class*="-intro"] p,
html[data-theme="dark"] [class*="-info"] p,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .description {
  color: #a1a1aa !important;
}

/* Stat items */
html[data-theme="dark"] .stat-item,
html[data-theme="dark"] .test-stats .stat-item,
html[data-theme="dark"] .hero-stat,
html[data-theme="dark"] .stat-box {
  background: rgba(59, 130, 246, 0.1) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

html[data-theme="dark"] .stat-value,
html[data-theme="dark"] .stat-number {
  color: #60a5fa !important;
}

html[data-theme="dark"] .stat-label {
  color: #a1a1aa !important;
}

/* Homepage Test Cards - Modern Design */
html[data-theme="dark"] .test-card-modern {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .test-card-modern:hover {
  border-color: rgba(5, 150, 105, 0.4) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .test-card-image {
  background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%) !important;
}

html[data-theme="dark"] .test-card-body h3 {
  color: #fafafa !important;
}

html[data-theme="dark"] .test-card-body p {
  color: #a1a1aa !important;
}

html[data-theme="dark"] .test-card-cta {
  color: #059669 !important;
}

/* Category items */
html[data-theme="dark"] .category-item,
html[data-theme="dark"] .category-card,
html[data-theme="dark"] .topic-item {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .category-item:hover,
html[data-theme="dark"] .category-card:hover,
html[data-theme="dark"] .topic-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

html[data-theme="dark"] .category-name,
html[data-theme="dark"] .category-title,
html[data-theme="dark"] .topic-name {
  color: #fafafa !important;
}

html[data-theme="dark"] .category-questions,
html[data-theme="dark"] .category-count,
html[data-theme="dark"] .topic-count {
  color: #71717a !important;
}

/* Start/Action sections */
html[data-theme="dark"] .start-section,
html[data-theme="dark"] .action-section {
  background: rgba(59, 130, 246, 0.05) !important;
  border: 1px solid rgba(59, 130, 246, 0.15) !important;
}

html[data-theme="dark"] .start-section h3,
html[data-theme="dark"] .action-section h3 {
  color: #fafafa !important;
}

html[data-theme="dark"] .start-section p,
html[data-theme="dark"] .action-section p {
  color: #a1a1aa !important;
}

/* Question option buttons */
html[data-theme="dark"] .question-option {
  background: #1a1a1a !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  color: #a1a1aa !important;
}

html[data-theme="dark"] .question-option:hover {
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}

html[data-theme="dark"] .question-option.selected {
  background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%) !important;
  border-color: transparent !important;
  color: white !important;
}

/* Progress indicators */
html[data-theme="dark"] .seen-progress,
html[data-theme="dark"] .progress-section,
html[data-theme="dark"] .progress-bar-container {
  background: rgba(59, 130, 246, 0.1) !important;
}

html[data-theme="dark"] .seen-progress-bar,
html[data-theme="dark"] .progress-bar-bg {
  background: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .seen-progress-text,
html[data-theme="dark"] .progress-text {
  color: #a1a1aa !important;
}

/* Guest/Info notices */
html[data-theme="dark"] .guest-notice,
html[data-theme="dark"] .info-notice,
html[data-theme="dark"] .notice-box,
html[data-theme="dark"] .alert-info {
  background: rgba(59, 130, 246, 0.1) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  color: #a1a1aa !important;
}

/* Test/Quiz containers */
html[data-theme="dark"] .test-container,
html[data-theme="dark"] .quiz-container,
html[data-theme="dark"] .question-container,
html[data-theme="dark"] .assessment-container {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Answer options */
html[data-theme="dark"] .answer-option,
html[data-theme="dark"] .choice-option,
html[data-theme="dark"] .option-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 2px solid rgba(255, 255, 255, 0.08) !important;
  color: #e4e4e7 !important;
}

html[data-theme="dark"] .answer-option:hover,
html[data-theme="dark"] .choice-option:hover,
html[data-theme="dark"] .option-card:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

html[data-theme="dark"] .answer-option.selected,
html[data-theme="dark"] .choice-option.selected,
html[data-theme="dark"] .option-card.selected {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: #3b82f6 !important;
}

html[data-theme="dark"] .answer-option.correct,
html[data-theme="dark"] .choice-option.correct {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: #22c55e !important;
}

html[data-theme="dark"] .answer-option.incorrect,
html[data-theme="dark"] .choice-option.incorrect {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: #ef4444 !important;
}

/* Results cards */
html[data-theme="dark"] .result-card,
html[data-theme="dark"] .results-container,
html[data-theme="dark"] .score-card {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .result-card h2,
html[data-theme="dark"] .result-card h3,
html[data-theme="dark"] .score-title {
  color: #fafafa !important;
}

html[data-theme="dark"] .score-value,
html[data-theme="dark"] .result-score {
  color: #60a5fa !important;
}

/* Tables */
html[data-theme="dark"] table {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] th {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fafafa !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] td {
  color: #e4e4e7 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] tr:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Lists in content */
html[data-theme="dark"] .intro-card ul li,
html[data-theme="dark"] .info-card ul li,
html[data-theme="dark"] .content-card ul li,
html[data-theme="dark"] [class*="-intro"] ul li,
html[data-theme="dark"] [class*="-info"] ul li {
  color: #a1a1aa !important;
}

/* Code blocks */
html[data-theme="dark"] pre, 
html[data-theme="dark"] code {
  background: #0f0f0f !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #e4e4e7 !important;
}

/* Form inputs in content */
html[data-theme="dark"] .intro-card input,
html[data-theme="dark"] .intro-card select,
html[data-theme="dark"] .intro-card textarea,
html[data-theme="dark"] .info-card input,
html[data-theme="dark"] .content-card input,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] [class*="-intro"] input,
html[data-theme="dark"] [class*="-intro"] select {
  background: #0f0f0f !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fafafa !important;
}

html[data-theme="dark"] .intro-card input:focus,
html[data-theme="dark"] .info-card input:focus,
html[data-theme="dark"] .content-card input:focus,
html[data-theme="dark"] .form-control:focus {
  border-color: #3b82f6 !important;
  outline: none !important;
}

/* Labels */
html[data-theme="dark"] .form-label,
html[data-theme="dark"] label {
  color: #e4e4e7 !important;
}

/* Tabs */
html[data-theme="dark"] .tab-button,
html[data-theme="dark"] .tab-item {
  background: transparent !important;
  color: #a1a1aa !important;
  border: none !important;
}

html[data-theme="dark"] .tab-button:hover,
html[data-theme="dark"] .tab-item:hover {
  color: #fafafa !important;
}

html[data-theme="dark"] .tab-button.active,
html[data-theme="dark"] .tab-item.active {
  color: #60a5fa !important;
  border-bottom: 2px solid #3b82f6 !important;
}

/* Accordions */
html[data-theme="dark"] .accordion-header,
html[data-theme="dark"] .accordion-button {
  background: rgba(255, 255, 255, 0.03) !important;
  color: #fafafa !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .accordion-content,
html[data-theme="dark"] .accordion-body {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top: none !important;
  color: #e4e4e7 !important;
}

/* Modals */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-dialog,
html[data-theme="dark"] .popup-content {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e4e4e7 !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .modal-title {
  color: #fafafa !important;
}

/* Tooltips */
html[data-theme="dark"] .tooltip {
  background: #1a1a1a !important;
  color: #fafafa !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Badges */
html[data-theme="dark"] .badge,
html[data-theme="dark"] .tag {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
}

/* Breadcrumbs */
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .breadcrumb-item {
  color: #71717a !important;
}

html[data-theme="dark"] .breadcrumb a {
  color: #60a5fa !important;
}

/* Pagination */
html[data-theme="dark"] .pagination-btn,
html[data-theme="dark"] .page-link {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #a1a1aa !important;
}

html[data-theme="dark"] .pagination-btn:hover,
html[data-theme="dark"] .page-link:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #60a5fa !important;
}

html[data-theme="dark"] .pagination-btn.active,
html[data-theme="dark"] .page-item.active .page-link {
  background: #3b82f6 !important;
  color: white !important;
}

/* Alerts */
html[data-theme="dark"] .alert {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .alert-success {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

html[data-theme="dark"] .alert-warning {
  background: rgba(234, 179, 8, 0.15) !important;
  color: #fbbf24 !important;
  border-color: rgba(234, 179, 8, 0.3) !important;
}

html[data-theme="dark"] .alert-danger,
html[data-theme="dark"] .alert-error {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

/* Hero sections with page-specific gradient text */
html[data-theme="dark"] h1[class*="gradient"],
html[data-theme="dark"] .gradient-text {
  -webkit-text-fill-color: transparent !important;
}

/* Lesson/Course specific */
html[data-theme="dark"] .lesson-content,
html[data-theme="dark"] .course-content,
html[data-theme="dark"] .chapter-content {
  background: #1a1a1a !important;
  color: #e4e4e7 !important;
}

html[data-theme="dark"] .lesson-title,
html[data-theme="dark"] .course-title,
html[data-theme="dark"] .chapter-title {
  color: #fafafa !important;
}

/* Simulator specific */
html[data-theme="dark"] .simulator-card,
html[data-theme="dark"] .sim-option {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .simulator-card:hover,
html[data-theme="dark"] .sim-option:hover {
  border-color: rgba(59, 130, 246, 0.3) !important;
}

/* Professional Certs */
html[data-theme="dark"] .cert-card,
html[data-theme="dark"] .certification-item {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Bundle builder */
html[data-theme="dark"] .bundle-summary,
html[data-theme="dark"] .cart-summary {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Interview prep */
html[data-theme="dark"] .interview-card,
html[data-theme="dark"] .question-card {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #e4e4e7 !important;
}

/* Resume/Cover letter builder */
html[data-theme="dark"] .builder-section,
html[data-theme="dark"] .preview-section {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Generic dividers */
html[data-theme="dark"] hr {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Placeholder text */
html[data-theme="dark"] ::placeholder {
  color: #52525b !important;
}

/* Selection */
html[data-theme="dark"] ::selection {
  background: rgba(59, 130, 246, 0.3) !important;
  color: #fafafa !important;
}

/* Scrollbar for content areas */
html[data-theme="dark"] .intro-card::-webkit-scrollbar,
html[data-theme="dark"] .content-card::-webkit-scrollbar {
  width: 6px;
}

html[data-theme="dark"] .intro-card::-webkit-scrollbar-track,
html[data-theme="dark"] .content-card::-webkit-scrollbar-track {
  background: transparent;
}

html[data-theme="dark"] .intro-card::-webkit-scrollbar-thumb,
html[data-theme="dark"] .content-card::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

/* ==========================================================================
   LIGHT THEME - CONTENT CARDS
   ========================================================================== */

html[data-theme="light"] .intro-card,
html[data-theme="light"] .info-card,
html[data-theme="light"] .content-card,
html[data-theme="light"] .test-card-details,
html[data-theme="light"] .category-section,
html[data-theme="light"] .section-card,
html[data-theme="light"] .lesson-card,
html[data-theme="light"] .course-card,
html[data-theme="light"] .feature-card,
html[data-theme="light"] .quiz-card,
html[data-theme="light"] .result-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .price-card,
html[data-theme="light"] .module-card,
html[data-theme="light"] .bundle-card,
html[data-theme="light"] .info-section,
html[data-theme="light"] .intro-section,
html[data-theme="light"] .aerospace-intro,
html[data-theme="light"] .automotive-intro,
html[data-theme="light"] .chemical-intro,
html[data-theme="light"] .commercial-intro,
html[data-theme="light"] .driving-intro,
html[data-theme="light"] .electrical-intro,
html[data-theme="light"] .courses-intro,
html[data-theme="light"] .sql-intro,
html[data-theme="light"] .careers-intro,
html[data-theme="light"] .marine-intro,
html[data-theme="light"] .mechanical-intro,
html[data-theme="light"] .petroleum-intro,
html[data-theme="light"] .finance-intro,
html[data-theme="light"] .data-analysis-intro,
html[data-theme="light"] .it-security-intro,
html[data-theme="light"] .sales-intro,
html[data-theme="light"] .trial-intro,
html[data-theme="light"] .boating-intro,
html[data-theme="light"] .insurance-intro,
html[data-theme="light"] .forklift-intro,
html[data-theme="light"] .science-intro,
html[data-theme="light"] .mindgrid-intro,
html[data-theme="light"] .motorcyclist-intro,
html[data-theme="light"] .pilot-intro,
html[data-theme="light"] .section-intro,
html[data-theme="light"] .exercise-intro,
html[data-theme="light"] .quiz-intro,
html[data-theme="light"] .lab-intro,
html[data-theme="light"] .exam-intro,
html[data-theme="light"] .calculator-intro,
html[data-theme="light"] .listening-intro {
  background: white !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #1e293b !important;
}

html[data-theme="light"] .intro-card h2,
html[data-theme="light"] .intro-card h3,
html[data-theme="light"] .info-card h2,
html[data-theme="light"] .info-card h3,
html[data-theme="light"] .content-card h2,
html[data-theme="light"] .content-card h3,
html[data-theme="light"] .intro-section h2,
html[data-theme="light"] .intro-section h3,
html[data-theme="light"] .info-section h2,
html[data-theme="light"] .info-section h3 {
  color: #1e293b !important;
}

html[data-theme="light"] .intro-card p,
html[data-theme="light"] .info-card p,
html[data-theme="light"] .content-card p,
html[data-theme="light"] .intro-section p,
html[data-theme="light"] .info-section p,
html[data-theme="light"] .subtitle,
html[data-theme="light"] .description {
  color: #475569 !important;
}

html[data-theme="light"] .stat-item,
html[data-theme="light"] .test-stats .stat-item {
  background: rgba(37, 99, 235, 0.08) !important;
  border: 1px solid rgba(37, 99, 235, 0.15) !important;
}

html[data-theme="light"] .stat-value,
html[data-theme="light"] .stat-number {
  color: #2563eb !important;
}

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

html[data-theme="light"] .category-item,
html[data-theme="light"] .category-card,
html[data-theme="light"] .topic-item {
  background: rgba(239, 246, 255, 0.5) !important;
  border: 1px solid rgba(37, 99, 235, 0.15) !important;
}

html[data-theme="light"] .category-name,
html[data-theme="light"] .category-title {
  color: #1e293b !important;
}

html[data-theme="light"] .category-questions,
html[data-theme="light"] .category-count {
  color: #64748b !important;
}

html[data-theme="light"] .start-section,
html[data-theme="light"] .action-section {
  background: rgba(37, 99, 235, 0.05) !important;
  border: 1px solid rgba(37, 99, 235, 0.15) !important;
}

html[data-theme="light"] .start-section h3,
html[data-theme="light"] .action-section h3 {
  color: #1e293b !important;
}

html[data-theme="light"] .start-section p,
html[data-theme="light"] .action-section p {
  color: #64748b !important;
}

html[data-theme="light"] .question-option {
  background: white !important;
  border: 2px solid #e2e8f0 !important;
  color: #64748b !important;
}

html[data-theme="light"] .question-option:hover {
  border-color: #2563eb !important;
  color: #2563eb !important;
}

html[data-theme="light"] .seen-progress,
html[data-theme="light"] .progress-section {
  background: rgba(37, 99, 235, 0.08) !important;
}

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

html[data-theme="light"] .seen-progress-text,
html[data-theme="light"] .progress-text {
  color: #64748b !important;
}

html[data-theme="light"] .guest-notice,
html[data-theme="light"] .info-notice {
  background: rgba(37, 99, 235, 0.08) !important;
  border: 1px solid rgba(37, 99, 235, 0.15) !important;
  color: #64748b !important;
}

html[data-theme="light"] .test-container,
html[data-theme="light"] .quiz-container,
html[data-theme="light"] .question-container {
  background: white !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .answer-option,
html[data-theme="light"] .choice-option,
html[data-theme="light"] .option-card {
  background: white !important;
  border: 2px solid #e2e8f0 !important;
  color: #1e293b !important;
}

html[data-theme="light"] .answer-option:hover,
html[data-theme="light"] .choice-option:hover {
  background: rgba(37, 99, 235, 0.05) !important;
  border-color: #2563eb !important;
}

html[data-theme="light"] .result-card,
html[data-theme="light"] .results-container,
html[data-theme="light"] .score-card {
  background: white !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .result-card h2,
html[data-theme="light"] .result-card h3 {
  color: #1e293b !important;
}

html[data-theme="light"] .score-value,
html[data-theme="light"] .result-score {
  color: #2563eb !important;
}

html[data-theme="light"] table {
  background: white !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] th {
  background: #f8fafc !important;
  color: #1e293b !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="light"] td {
  color: #475569 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] tr:hover {
  background: #f8fafc !important;
}

html[data-theme="light"] .intro-card ul li,
html[data-theme="light"] .info-card ul li,
html[data-theme="light"] .content-card ul li {
  color: #475569 !important;
}

html[data-theme="light"] pre,
html[data-theme="light"] code {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #1e293b !important;
}

html[data-theme="light"] .intro-card input,
html[data-theme="light"] .info-card input,
html[data-theme="light"] .content-card input,
html[data-theme="light"] .form-control {
  background: white !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}

html[data-theme="light"] .form-label,
html[data-theme="light"] label {
  color: #1e293b !important;
}

html[data-theme="light"] .tab-button,
html[data-theme="light"] .tab-item {
  color: #64748b !important;
}

html[data-theme="light"] .tab-button:hover,
html[data-theme="light"] .tab-item:hover {
  color: #1e293b !important;
}

html[data-theme="light"] .tab-button.active,
html[data-theme="light"] .tab-item.active {
  color: #2563eb !important;
}

html[data-theme="light"] .accordion-header,
html[data-theme="light"] .accordion-button {
  background: #f8fafc !important;
  color: #1e293b !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .accordion-content,
html[data-theme="light"] .accordion-body {
  background: white !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #475569 !important;
}

html[data-theme="light"] .modal-content,
html[data-theme="light"] .modal-dialog,
html[data-theme="light"] .popup-content {
  background: white !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #1e293b !important;
}

html[data-theme="light"] .modal-header,
html[data-theme="light"] .modal-footer {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .modal-title {
  color: #1e293b !important;
}

html[data-theme="light"] .tooltip {
  background: #1e293b !important;
  color: white !important;
}

html[data-theme="light"] .badge,
html[data-theme="light"] .tag {
  background: rgba(37, 99, 235, 0.1) !important;
  color: #2563eb !important;
}

html[data-theme="light"] .breadcrumb,
html[data-theme="light"] .breadcrumb-item {
  color: #64748b !important;
}

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

html[data-theme="light"] .pagination-btn,
html[data-theme="light"] .page-link {
  background: white !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

html[data-theme="light"] .pagination-btn:hover,
html[data-theme="light"] .page-link:hover {
  background: #f8fafc !important;
  color: #2563eb !important;
}

html[data-theme="light"] .alert-success {
  background: rgba(34, 197, 94, 0.1) !important;
  color: #16a34a !important;
  border-color: rgba(34, 197, 94, 0.2) !important;
}

html[data-theme="light"] .alert-warning {
  background: rgba(234, 179, 8, 0.1) !important;
  color: #ca8a04 !important;
  border-color: rgba(234, 179, 8, 0.2) !important;
}

html[data-theme="light"] .alert-danger,
html[data-theme="light"] .alert-error {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #dc2626 !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}

html[data-theme="light"] .lesson-content,
html[data-theme="light"] .course-content {
  background: white !important;
  color: #1e293b !important;
}

html[data-theme="light"] .lesson-title,
html[data-theme="light"] .course-title {
  color: #1e293b !important;
}

html[data-theme="light"] .simulator-card,
html[data-theme="light"] .sim-option {
  background: white !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .cert-card,
html[data-theme="light"] .certification-item {
  background: white !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .bundle-summary,
html[data-theme="light"] .cart-summary {
  background: white !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .interview-card,
html[data-theme="light"] .question-card {
  background: white !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #1e293b !important;
}

html[data-theme="light"] .builder-section,
html[data-theme="light"] .preview-section {
  background: white !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] hr {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] ::placeholder {
  color: #94a3b8 !important;
}

html[data-theme="light"] ::selection {
  background: rgba(37, 99, 235, 0.2) !important;
  color: #1e293b !important;
}

html[data-theme="light"] .main-header {
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .logo-text {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .icon-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: #52525b;
}

html[data-theme="light"] .icon-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #18181b;
}

html[data-theme="light"] .sidebar {
  background: #fafafa;
  border-right-color: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .sidebar-toggle {
  color: #52525b;
}

html[data-theme="light"] .sidebar-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #18181b;
}

html[data-theme="light"] .nav-section-toggle {
  color: #52525b;
}

html[data-theme="light"] .nav-section-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #18181b;
}

/* ==========================================================================
   SIDEBAR COLLAPSE / SHOW-HIDE TOGGLE
   ========================================================================== */

.sidebar {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-right-color 0.3s ease;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1rem 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  flex-shrink: 0;
}

.sidebar-header-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary, #94a3b8);
  opacity: 0.85;
}

.sidebar-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary, #cbd5e1);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.sidebar-collapse-btn:hover {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.45);
  color: #ffffff;
  transform: translateX(-1px);
}

.sidebar-collapse-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
}

html[data-theme="light"] .sidebar-collapse-btn {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #475569;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

html[data-theme="light"] .sidebar-collapse-btn:hover {
  background: #eef2ff;
  border-color: #6366f1;
  color: #4338ca;
}

/* Floating reopen pill — shown only when sidebar is collapsed */
.sidebar-reopen-btn {
  position: fixed;
  top: 84px;
  left: 16px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem 0.55rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(99, 102, 241, 0.35);
  background: linear-gradient(135deg, rgba(67, 56, 202, 0.98), rgba(29, 78, 216, 0.98));
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(79, 70, 229, 0.5), 0 2px 4px rgba(15, 23, 42, 0.25);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-12px) scale(0.96);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, background 0.25s ease;
}

.sidebar-reopen-btn:hover {
  background: linear-gradient(135deg, rgba(55, 48, 163, 1), rgba(30, 64, 175, 1));
  box-shadow: 0 14px 32px -10px rgba(79, 70, 229, 0.65), 0 4px 8px rgba(15, 23, 42, 0.3);
  transform: translateX(0) scale(1.02);
}

html[data-theme="dark"] .sidebar-reopen-btn,
html[data-theme="dark"] .sidebar-reopen-btn .sidebar-reopen-label,
html[data-theme="dark"] .sidebar-reopen-btn svg {
  color: #ffffff;
}

html[data-theme="dark"] a.journey-step-compact {
  background: var(--bg-card);
}

html[data-theme="dark"] a.journey-step-compact .step-num {
  background: rgba(15, 23, 42, 0.9) !important;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .stats-section .stat-label {
  color: #cbd5e1 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .hero-image-wrapper .category-badge {
  background: rgba(15, 23, 42, 0.82) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .faq-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-default) !important;
}

html[data-theme="dark"] .faq-question {
  background: var(--bg-card) !important;
  color: #e2e8f0 !important;
}

html[data-theme="dark"] .faq-question:hover {
  background: var(--bg-tertiary) !important;
}

html[data-theme="dark"] .faq-icon {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .faq-answer p {
  color: #cbd5e1 !important;
}

.sidebar-reopen-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.35), 0 10px 24px -8px rgba(79, 70, 229, 0.5);
}

html[data-theme="light"] .sidebar-reopen-btn {
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  color: #4338ca;
  border-color: #c7d2fe;
  box-shadow: 0 10px 24px -8px rgba(79, 70, 229, 0.25), 0 2px 4px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .sidebar-reopen-btn:hover {
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  color: #3730a3;
  border-color: #a5b4fc;
}

/* Light mode: ensure label + icon inherit the dark indigo color, not white */
html[data-theme="light"] .sidebar-reopen-btn .sidebar-reopen-label,
html[data-theme="light"] .sidebar-reopen-btn svg {
  color: inherit;
  stroke: currentColor;
}

html[data-theme="light"] .sidebar-reopen-btn:hover .sidebar-reopen-label,
html[data-theme="light"] .sidebar-reopen-btn:hover svg {
  color: inherit;
}

/* Collapsed state — slide sidebar off-canvas, reveal the reopen pill */
.app-layout.sidebar-collapsed .sidebar {
  width: 0;
  min-width: 0;
  transform: translateX(-100%);
  border-right-color: transparent;
  pointer-events: none;
}

.app-layout.sidebar-collapsed .sidebar-reopen-btn {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.app-layout.sidebar-collapsed .main-content {
  max-width: 1760px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .sidebar-reopen-btn { top: 76px; left: 12px; }
}


html[data-theme="light"] .sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* Light theme scrollbar for Firefox - using @supports for compatibility */
@supports (scrollbar-color: auto) {
  html[data-theme="light"] .sidebar-nav {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  }
}

html[data-theme="light"] .nav-section-toggle.active {
  background: rgba(37, 99, 235, 0.1);
  color: #18181b;
}

html[data-theme="light"] .nav-link {
  color: #71717a;
}

html[data-theme="light"] .nav-link:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #18181b;
}

html[data-theme="light"] .nav-link.active {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}

/* Light theme View All link */
html[data-theme="light"] .nav-link-all {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.06) 100%);
  border-left: 3px solid #059669;
  color: #059669 !important;
}

html[data-theme="light"] .nav-link-all:hover {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.1) 100%);
  color: #047857 !important;
}

html[data-theme="light"] .sidebar-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background: linear-gradient(180deg, transparent, rgba(59, 130, 246, 0.05));
}

html[data-theme="light"] .main-content {
  background: #ffffff;
}

html[data-theme="light"] .main-footer {
  background: #fafafa;
  border-top-color: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .footer-column h4 {
  color: #18181b;
}

html[data-theme="light"] .footer-bottom {
  border-top-color: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .user-dropdown,
html[data-theme="light"] .search-dropdown {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .dropdown-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .search-dropdown input {
  background: #f5f5f5;
  border-color: rgba(0, 0, 0, 0.1);
  color: #18181b;
}

html[data-theme="light"] .search-dropdown input::placeholder {
  color: #a1a1aa;
}

html[data-theme="light"] body,
body:not(.dark-theme) {
  background-color: #ffffff;
  color: #18181b;
}

/* ==========================================================================
   HOMEPAGE JOURNEY SECTION - Dark/Light Theme
   ========================================================================== */

/* Journey Section Container - MUST CENTER CONTENT */
.journey-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.journey-section .journey-header {
  text-align: center !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.journey-section .journey-header h2 {
  text-align: center !important;
  width: 100% !important;
}

.journey-section .journey-header p {
  text-align: center !important;
}

.journey-section .journey-grid {
  width: 100% !important;
  max-width: 1000px !important;
}

html[data-theme="dark"] .journey-section {
  background: #0f0f0f !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="light"] .journey-section {
  background: #f9fafb !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* Journey Header - Must be centered */
.journey-header {
  text-align: center !important;
  margin-bottom: 2rem !important;
}

.journey-header .section-badge {
  display: inline-block !important;
  margin-bottom: 0.5rem !important;
}

html[data-theme="dark"] .journey-header h2,
html[data-theme="dark"] .journey-section h2 {
  color: #fafafa !important;
  text-align: center !important;
}

html[data-theme="dark"] .journey-header p {
  color: #a1a1aa !important;
  text-align: center !important;
}

html[data-theme="light"] .journey-header h2,
html[data-theme="light"] .journey-section h2 {
  color: #111827 !important;
  text-align: center !important;
}

html[data-theme="light"] .journey-header p {
  color: #6b7280 !important;
  text-align: center !important;
}

/* Journey Cards */
html[data-theme="dark"] .journey-card,
html[data-theme="dark"] .journey-step {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .journey-card:hover,
html[data-theme="dark"] .journey-step:hover {
  border-color: rgba(16, 185, 129, 0.3) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="light"] .journey-card,
html[data-theme="light"] .journey-step {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .journey-card:hover,
html[data-theme="light"] .journey-step:hover {
  border-color: rgba(5, 150, 105, 0.2) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* Journey Card Numbers */
html[data-theme="dark"] .journey-card-number,
html[data-theme="dark"] .journey-number,
html[data-theme="dark"] .step-number {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: white !important;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.4) !important;
}

html[data-theme="light"] .journey-card-number,
html[data-theme="light"] .journey-number,
html[data-theme="light"] .step-number {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: white !important;
  box-shadow: 0 3px 10px rgba(5, 150, 105, 0.3) !important;
}

/* Journey Card Icons */
html[data-theme="dark"] .journey-card-icon,
html[data-theme="dark"] .step-icon {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.08) 100%) !important;
  color: #34d399 !important;
}

html[data-theme="dark"] .journey-card-icon.accent-purple {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.08) 100%) !important;
  color: #a78bfa !important;
}

html[data-theme="dark"] .journey-card-icon.accent-blue {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.08) 100%) !important;
  color: #60a5fa !important;
}

html[data-theme="dark"] .journey-card-icon.accent-gold {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(251, 191, 36, 0.08) 100%) !important;
  color: #fbbf24 !important;
}

html[data-theme="light"] .journey-card-icon,
html[data-theme="light"] .step-icon {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
  color: #059669 !important;
}

html[data-theme="light"] .journey-card-icon.accent-purple {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important;
  color: #7c3aed !important;
}

html[data-theme="light"] .journey-card-icon.accent-blue {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  color: #2563eb !important;
}

html[data-theme="light"] .journey-card-icon.accent-gold {
  background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%) !important;
  color: #d97706 !important;
}

/* Journey Card Content */
html[data-theme="dark"] .journey-card h3,
html[data-theme="dark"] .journey-content h3,
html[data-theme="dark"] .step-title {
  color: #fafafa !important;
}

html[data-theme="dark"] .journey-card p,
html[data-theme="dark"] .journey-content p,
html[data-theme="dark"] .step-description {
  color: #a1a1aa !important;
}

html[data-theme="light"] .journey-card h3,
html[data-theme="light"] .journey-content h3,
html[data-theme="light"] .step-title {
  color: #1f2937 !important;
}

html[data-theme="light"] .journey-card p,
html[data-theme="light"] .journey-content p,
html[data-theme="light"] .step-description {
  color: #6b7280 !important;
}

/* Journey CTA Button */
html[data-theme="dark"] .journey-btn,
html[data-theme="light"] .journey-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: white !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3) !important;
}

html[data-theme="dark"] .journey-btn:hover,
html[data-theme="light"] .journey-btn:hover {
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4) !important;
}

/* Journey Note */
html[data-theme="dark"] .journey-note {
  color: #71717a !important;
}

html[data-theme="light"] .journey-note {
  color: #9ca3af !important;
}
/* ==========================================================================
   GLOBAL FIX: Light Background Elements Need Dark Text in Dark Mode
   ========================================================================== */

/* 
 * When elements intentionally keep light/white backgrounds in dark mode,
 * ensure their text is dark for visibility.
 */

/* Common button patterns that might have white backgrounds */
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-white,
html[data-theme="dark"] .btn-outline-light,
html[data-theme="dark"] .button-white,
html[data-theme="dark"] .white-button {
  color: #1e293b !important;
}

/* Settings/Account link patterns */
html[data-theme="dark"] .settings-link,
html[data-theme="dark"] .account-action,
html[data-theme="dark"] .profile-action-link {
  background: var(--bg-tertiary, #1f1f35);
  color: var(--text-primary, #f1f5f9);
}

/* Ensure all navigation links in sidebars/menus are visible */
html[data-theme="dark"] .sidebar a,
html[data-theme="dark"] .menu-link,
html[data-theme="dark"] .dropdown-link {
  color: var(--text-secondary, #cbd5e1);
}

html[data-theme="dark"] .sidebar a:hover,
html[data-theme="dark"] .menu-link:hover,
html[data-theme="dark"] .dropdown-link:hover {
  color: var(--text-primary, #f1f5f9);
}

/* Cards that should have proper contrast */
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .action-card,
html[data-theme="dark"] .stat-card {
  background: var(--bg-card, #1e1e32);
  color: var(--text-primary, #f1f5f9);
}

html[data-theme="dark"] .info-card h3,
html[data-theme="dark"] .info-card h4,
html[data-theme="dark"] .action-card h3,
html[data-theme="dark"] .action-card h4,
html[data-theme="dark"] .stat-card h3,
html[data-theme="dark"] .stat-card h4 {
  color: var(--text-primary, #f1f5f9);
}

html[data-theme="dark"] .info-card p,
html[data-theme="dark"] .action-card p,
html[data-theme="dark"] .stat-card p {
  color: var(--text-secondary, #cbd5e1);
}

/* ==========================================================================
   CTA SECTION - Protect gradient background in all themes
   The trial page CTA has a dark gradient with white text that must
   be preserved in both light and dark modes.
   ========================================================================== */
html[data-theme="light"] .cta-section {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  color: white !important;
  border: none !important;
}

html[data-theme="light"] .cta-section h2 {
  color: white !important;
}

html[data-theme="light"] .cta-section p {
  color: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="light"] .cta-section .cta-button-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
}

html[data-theme="light"] .cta-section .cta-button-secondary {
  background: white !important;
  color: #1e293b !important;
}

html[data-theme="dark"] .cta-section {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .cta-section h2 {
  color: white !important;
}

html[data-theme="dark"] .cta-section p {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ==========================================================================
   PLANBOT PAGE - Dark Mode Support
   ========================================================================== */
html[data-theme="dark"] .planbot-page {
  background: linear-gradient(135deg, #13131f 0%, #1a1a2e 50%, #1f1f35 100%) !important;
}

html[data-theme="dark"] .planbot-main {
  background: var(--bg-card, #1e1e32) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .progress-container {
  background: var(--bg-secondary, #1a1a2e) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .progress-steps::before {
  background: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .step-circle {
  background: var(--bg-tertiary, #1f1f35) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #94a3b8 !important;
}

html[data-theme="dark"] .progress-step.active .step-circle {
  border-color: #7c3aed !important;
  color: #7c3aed !important;
  background: var(--bg-tertiary, #1f1f35) !important;
}

html[data-theme="dark"] .progress-step.completed .step-circle {
  background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
  border-color: #7c3aed !important;
  color: white !important;
}

html[data-theme="dark"] .step-label {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .progress-step.active .step-label {
  color: #a78bfa !important;
}

html[data-theme="dark"] .progress-step.completed .step-label {
  color: #818cf8 !important;
}

html[data-theme="dark"] .form-container {
  background: var(--bg-card, #1e1e32) !important;
}

html[data-theme="dark"] .step-title {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .step-description {
  color: var(--text-secondary, #cbd5e1) !important;
}

html[data-theme="dark"] .form-label {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .form-select {
  background: var(--bg-tertiary, #1f1f35) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] .form-select:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2) !important;
}

html[data-theme="dark"] .form-select option {
  background: var(--bg-tertiary, #1f1f35) !important;
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .option-card {
  background: var(--bg-tertiary, #1f1f35) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .option-card:hover {
  border-color: #a78bfa !important;
  background: rgba(124, 58, 237, 0.08) !important;
}

html[data-theme="dark"] .option-card.selected {
  border-color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.15) !important;
}

html[data-theme="dark"] .option-card-title {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .option-card.selected .option-card-title {
  color: #c4b5fd !important;
}

html[data-theme="dark"] .option-card-desc {
  color: var(--text-secondary, #cbd5e1) !important;
}

html[data-theme="dark"] .option-card.selected .option-card-desc {
  color: #a78bfa !important;
}

html[data-theme="dark"] .chip {
  background: var(--bg-tertiary, #1f1f35) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--text-secondary, #cbd5e1) !important;
}

html[data-theme="dark"] .chip:hover {
  border-color: #a78bfa !important;
  background: rgba(124, 58, 237, 0.08) !important;
}

html[data-theme="dark"] .chip.selected {
  border-color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.15) !important;
  color: #c4b5fd !important;
}

html[data-theme="dark"] .sub-options-panel {
  background: linear-gradient(135deg, var(--bg-secondary, #1a1a2e) 0%, var(--bg-tertiary, #1f1f35) 100%) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .sub-options-title {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .sub-chip {
  background: var(--bg-card, #1e1e32) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--text-secondary, #cbd5e1) !important;
}

html[data-theme="dark"] .sub-chip:hover {
  border-color: #a78bfa !important;
}

html[data-theme="dark"] .sub-chip.selected {
  border-color: #7c3aed !important;
  color: #c4b5fd !important;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3) !important;
}

html[data-theme="dark"] .form-textarea {
  background: var(--bg-tertiary, #1f1f35) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] .form-textarea:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2) !important;
}

html[data-theme="dark"] .wizard-nav {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .btn-secondary {
  background: var(--bg-tertiary, #1f1f35) !important;
  color: var(--text-secondary, #cbd5e1) !important;
}

html[data-theme="dark"] .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .recommendations-panel,
html[data-theme="dark"] .summary-panel,
html[data-theme="dark"] .chat-panel {
  background: var(--bg-card, #1e1e32) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .panel-header {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%) !important;
  border-bottom-color: rgba(16, 185, 129, 0.2) !important;
}

html[data-theme="dark"] .panel-header h3 {
  color: #34d399 !important;
}

html[data-theme="dark"] .recommendation-item {
  background: var(--bg-tertiary, #1f1f35) !important;
}

html[data-theme="dark"] .recommendation-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ==========================================================================
   RESULTS PAGES - Dark Mode
   Covers: IT Security, Mechanical, Aerospace, Electrical, Chemical, 
   Automotive, Marine, Petroleum, Finance, Supply Chain, Data Analysis,
   Sales, Science, and all other test result pages using shared classes.
   ========================================================================== */

/* Main results container */
html[data-theme="dark"] .results-container {
  background: transparent !important;
  color: #f1f5f9 !important;
}

/* Results header */
html[data-theme="dark"] .results-header p {
  color: #94a3b8 !important;
}

/* Category breakdown card */
html[data-theme="dark"] .category-breakdown {
  background: #1e1e32 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .category-breakdown h2 {
  color: #f1f5f9 !important;
}

/* Category items */
html[data-theme="dark"] .category-item {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .category-name {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .category-score {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .category-bar {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Questions review card */
html[data-theme="dark"] .questions-review {
  background: #1e1e32 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .questions-review h2 {
  color: #f1f5f9 !important;
}

/* Individual question review items */
html[data-theme="dark"] .question-review-item {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

html[data-theme="dark"] .question-review-item.correct {
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}

html[data-theme="dark"] .question-review-item.incorrect {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}

html[data-theme="dark"] .question-number {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .question-text-review {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .answer-info {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .answer-info strong {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .answer-info p {
  color: #94a3b8 !important;
}

/* AI Explanation */
html[data-theme="dark"] .ai-explanation {
  background: rgba(124, 58, 237, 0.12) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(124, 58, 237, 0.2) !important;
}

html[data-theme="dark"] .ai-explanation strong {
  color: #a78bfa !important;
}

html[data-theme="dark"] .ai-explanation-text {
  color: #cbd5e1 !important;
}

/* Get explanation button */
html[data-theme="dark"] .get-explanation-btn {
  color: #a78bfa !important;
  background: rgba(124, 58, 237, 0.15) !important;
  border-color: rgba(124, 58, 237, 0.3) !important;
}

html[data-theme="dark"] .get-explanation-btn:hover {
  background: rgba(124, 58, 237, 0.25) !important;
  border-color: rgba(124, 58, 237, 0.4) !important;
}

/* Score overview (gradient section is already visible, but ensure inner text) */
html[data-theme="dark"] .score-overview {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Loading state */
html[data-theme="dark"] .loading-results {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .loading-results p {
  color: #94a3b8 !important;
}

/* Back button */
html[data-theme="dark"] .btn-back {
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3) !important;
}

/* Performance insights cards (used in some results pages) */
html[data-theme="dark"] .insights-card,
html[data-theme="dark"] .performance-card,
html[data-theme="dark"] .recommendation-card {
  background: #1e1e32 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .insights-card h2,
html[data-theme="dark"] .insights-card h3,
html[data-theme="dark"] .performance-card h2,
html[data-theme="dark"] .performance-card h3 {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .insights-card p,
html[data-theme="dark"] .performance-card p {
  color: #cbd5e1 !important;
}

/* Results stats/summary sections */
html[data-theme="dark"] .results-summary,
html[data-theme="dark"] .results-stats {
  background: #1e1e32 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .stat-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .stat-card h3,
html[data-theme="dark"] .stat-label {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .stat-value {
  color: #f1f5f9 !important;
}

/* Question options in review */
html[data-theme="dark"] .option-item,
html[data-theme="dark"] .review-option {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .option-item.selected,
html[data-theme="dark"] .review-option.selected {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
}

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

html[data-theme="dark"] .option-item.incorrect,
html[data-theme="dark"] .review-option.incorrect {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}

/* Detailed results sections */
html[data-theme="dark"] .detail-section {
  background: #1e1e32 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .detail-section h2,
html[data-theme="dark"] .detail-section h3 {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .detail-section p {
  color: #cbd5e1 !important;
}

/* Progress bars in results */
html[data-theme="dark"] .progress-bar-bg,
html[data-theme="dark"] .progress-track {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Topic/section score items */
html[data-theme="dark"] .topic-score-item,
html[data-theme="dark"] .section-score-item {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .topic-name,
html[data-theme="dark"] .section-name {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .topic-score,
html[data-theme="dark"] .section-score {
  color: #94a3b8 !important;
}

/* Category score cards (mechanical, etc.) */
html[data-theme="dark"] .category-score-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .category-score-card:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] .category-score-card.active {
  background: rgba(5, 150, 105, 0.12) !important;
  border-color: rgba(5, 150, 105, 0.4) !important;
}

html[data-theme="dark"] .category-score-name {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .category-score-text {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .category-score-bar {
  background: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .category-icon-box {
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

/* Review section (mechanical results, etc.) */
html[data-theme="dark"] .review-section {
  background: #1e1e32 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .review-section h2 {
  color: #f1f5f9 !important;
}

/* Filter buttons */
html[data-theme="dark"] .filter-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
}

html[data-theme="dark"] .filter-btn:hover {
  border-color: rgba(5, 150, 105, 0.5) !important;
  color: #34d399 !important;
}

html[data-theme="dark"] .filter-btn.active {
  background: #059669 !important;
  border-color: #059669 !important;
  color: white !important;
}

/* Question review cards */
html[data-theme="dark"] .question-review-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .question-review-card.correct {
  border-left-color: #10b981 !important;
}

html[data-theme="dark"] .question-review-card.incorrect {
  border-left-color: #ef4444 !important;
}

html[data-theme="dark"] .question-number-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .question-category-badge {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .question-review-text {
  color: #e2e8f0 !important;
}

/* Result badges */
html[data-theme="dark"] .result-badge.correct {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
}

html[data-theme="dark"] .result-badge.incorrect {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
}

/* Answer comparison items */
html[data-theme="dark"] .answer-item.user-answer {
  background: rgba(99, 102, 241, 0.15) !important;
  color: #a5b4fc !important;
}

html[data-theme="dark"] .answer-item.user-answer.wrong {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
}

html[data-theme="dark"] .answer-item.correct-answer {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
}

/* Explanation box */
html[data-theme="dark"] .explanation-box {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .explanation-text {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .explanation-header span {
  color: #34d399 !important;
}

html[data-theme="dark"] .loading-explanation {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .loading-explanation .spinner {
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-top-color: #34d399 !important;
}

html[data-theme="dark"] .recommendation-text h4 {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .recommendation-text p {
  color: var(--text-secondary, #cbd5e1) !important;
}

html[data-theme="dark"] .recommendation-empty {
  color: var(--text-muted, #94a3b8) !important;
}

html[data-theme="dark"] .summary-panel h3 {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .summary-item {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* ==========================================================================
   RESULTS PAGES - Additional Dark Mode (Finance, Sales, Supply Chain, etc.)
   Covers section-card, question-review (collapsible), review-options patterns
   ========================================================================== */

/* Results header with white background */
html[data-theme="dark"] .results-header {
  background: #1e1e32 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Score circle inner white background */
html[data-theme="dark"] .score-circle::before {
  background: #1e1e32 !important;
}

html[data-theme="dark"] .score-label {
  color: #94a3b8 !important;
}

/* Section cards (finance, supply chain, etc.) */
html[data-theme="dark"] .section-card {
  background: #1e1e32 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .section-title {
  color: #f1f5f9 !important;
}

/* Collapsible question review items */
html[data-theme="dark"] .question-review {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .question-review-header {
  background: rgba(255, 255, 255, 0.03) !important;
}

html[data-theme="dark"] .question-review-header:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .question-review.correct .question-review-header {
  border-left-color: #22c55e !important;
}

html[data-theme="dark"] .question-review.incorrect .question-review-header {
  border-left-color: #ef4444 !important;
}

html[data-theme="dark"] .question-preview {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .question-toggle {
  color: #64748b !important;
}

html[data-theme="dark"] .question-review-content {
  background: transparent !important;
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .review-question-text {
  color: #e2e8f0 !important;
}

/* Review options in finance-style results */
html[data-theme="dark"] .review-option {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .review-option.user-answer {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

html[data-theme="dark"] .review-option.correct-answer {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

html[data-theme="dark"] .review-option.both {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

html[data-theme="dark"] .option-indicator {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .option-indicator.correct {
  color: #34d399 !important;
}

html[data-theme="dark"] .option-indicator.incorrect {
  color: #f87171 !important;
}

/* Explanation box in finance-style */
html[data-theme="dark"] .explanation-box {
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
}

html[data-theme="dark"] .explanation-title {
  color: #34d399 !important;
}

html[data-theme="dark"] .explanation-loading {
  color: #94a3b8 !important;
}

/* Action buttons */
html[data-theme="dark"] .action-btn.secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #94a3b8 !important;
}

html[data-theme="dark"] .action-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f1f5f9 !important;
}

/* Stat rows and icons */
html[data-theme="dark"] .stat-row {
  color: #e2e8f0 !important;
}

/* Performance badges in dark mode keep their own background colors */

/* Generic white-background cards in results pages */
html[data-theme="dark"] .results-card,
html[data-theme="dark"] .score-card,
html[data-theme="dark"] .summary-card {
  background: #1e1e32 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .results-card h2,
html[data-theme="dark"] .results-card h3,
html[data-theme="dark"] .summary-card h2,
html[data-theme="dark"] .summary-card h3 {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .results-card p,
html[data-theme="dark"] .summary-card p {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .summary-label {
  color: var(--text-muted, #94a3b8) !important;
}

html[data-theme="dark"] .summary-value {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .summary-value.empty {
  color: var(--text-muted, #94a3b8) !important;
}

html[data-theme="dark"] .chat-header {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15) 0%, rgba(99, 102, 241, 0.1) 100%) !important;
  border-bottom-color: rgba(124, 58, 237, 0.2) !important;
}

html[data-theme="dark"] .chat-header:hover {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(99, 102, 241, 0.15) 100%) !important;
}

html[data-theme="dark"] .chat-header h3 {
  color: #a78bfa !important;
}

html[data-theme="dark"] .chat-toggle {
  background: rgba(124, 58, 237, 0.2) !important;
  color: #a78bfa !important;
}

html[data-theme="dark"] .voice-hint {
  color: var(--text-muted, #94a3b8) !important;
}

html[data-theme="dark"] .chat-messages {
  background: var(--bg-tertiary, #1f1f35) !important;
}

html[data-theme="dark"] .recommendation-icon.cognitive { background: rgba(59, 130, 246, 0.2) !important; }
html[data-theme="dark"] .recommendation-icon.cert { background: rgba(251, 191, 36, 0.2) !important; }
html[data-theme="dark"] .recommendation-icon.language { background: rgba(16, 185, 129, 0.2) !important; }
html[data-theme="dark"] .recommendation-icon.tool { background: rgba(139, 92, 246, 0.2) !important; }
html[data-theme="dark"] .recommendation-icon.license { background: rgba(236, 72, 153, 0.2) !important; }
html[data-theme="dark"] .recommendation-icon.technical { background: rgba(249, 115, 22, 0.2) !important; }

/* =====================================================
   COURSES PAGE - Dark Mode
   ===================================================== */
html[data-theme="dark"] .courses-intro h2 {
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .courses-intro p {
  color: #a1a1aa !important;
}
html[data-theme="dark"] .course-card {
  background: #1e1e2e !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .course-card-image {
  background: linear-gradient(135deg, #1a2332 0%, #162028 100%) !important;
}
html[data-theme="dark"] .course-card-title {
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .course-card-description {
  color: #a1a1aa !important;
}
html[data-theme="dark"] .course-card-meta,
html[data-theme="dark"] .course-meta-item {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .course-progress-label {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .course-progress-bar {
  background: #2a2a3a !important;
}
html[data-theme="dark"] .course-card-footer {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .course-level {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .course-level-dot {
  background: #3a3a4a !important;
}
html[data-theme="dark"] .course-level-dot.filled {
  background: #10b981 !important;
}
html[data-theme="dark"] .course-card-badge.badge-new {
  color: #1e293b !important;
}
html[data-theme="dark"] .course-related-tests {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .related-tests-label {
  color: #71717a !important;
}
html[data-theme="dark"] .related-test-link {
  color: #60a5fa !important;
  background: rgba(59, 130, 246, 0.15) !important;
}
html[data-theme="dark"] .courses-hero {
  background: linear-gradient(135deg, #1a2332 0%, #2a1a3a 100%) !important;
}

/* =====================================================
   PURCHASE BOX - Dark Mode (used across multiple pages)
   ===================================================== */
html[data-theme="dark"] .purchase-box {
  background: #1e1e2e !important;
  border-color: rgba(124, 58, 237, 0.3) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
}
html[data-theme="dark"] .purchase-box h3 {
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .purchase-box .price-original {
  color: #71717a !important;
}
html[data-theme="dark"] .purchase-box .price-current {
  color: #a78bfa !important;
}
html[data-theme="dark"] .purchase-box ul li,
html[data-theme="dark"] .purchase-box .feature-list li {
  color: #d4d4d8 !important;
}

/* =====================================================
   GMAT-GRE PAGE - Dark Mode (inline style overrides)
   ===================================================== */
html[data-theme="dark"] .test-selection-grid .test-card {
  background: #1e1e2e !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="dark"] .test-selection-grid .test-card h3 {
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .test-selection-grid .test-card p {
  color: #a1a1aa !important;
}
html[data-theme="dark"] .test-selection-grid .test-card li {
  color: #d4d4d8 !important;
}

/* =====================================================
   ADVICE RESULTS PAGE - Dark Mode
   ===================================================== */
html[data-theme="dark"] .plan-results-container {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .overview-card {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(14, 165, 233, 0.05) 100%) !important;
  border-left-color: #0ea5e9 !important;
}

html[data-theme="dark"] .overview-card h3 {
  color: #38bdf8 !important;
}

html[data-theme="dark"] .overview-card p {
  color: var(--text-primary, #e2e8f0) !important;
}

html[data-theme="dark"] .section-card {
  background: var(--bg-card, #1e1e32) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .section-header h3 {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .training-stat {
  background: var(--bg-tertiary, #1f1f35) !important;
}

html[data-theme="dark"] .training-stat-label {
  color: var(--text-muted, #94a3b8) !important;
}

html[data-theme="dark"] .training-stat-value {
  color: #a78bfa !important;
}

html[data-theme="dark"] .monthly-goals {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(109, 40, 217, 0.08) 100%) !important;
}

html[data-theme="dark"] .monthly-goals h4 {
  color: #a78bfa !important;
}

html[data-theme="dark"] .goal-item {
  background: var(--bg-card, #1e1e32) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] .goal-month {
  color: #a78bfa !important;
}

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

/* Test Recommendation Cards */
html[data-theme="dark"] .section-card .test-card {
  background: var(--bg-tertiary, #1f1f35) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .section-card .test-card:hover {
  border-color: rgba(124, 58, 237, 0.4) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .test-name {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .test-detail-label {
  color: var(--text-muted, #94a3b8) !important;
}

html[data-theme="dark"] .test-detail-value {
  color: var(--text-primary, #e2e8f0) !important;
}

html[data-theme="dark"] .test-rationale {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--text-secondary, #cbd5e1) !important;
}

/* Period / Pricing Cards */
html[data-theme="dark"] .period-card {
  background: var(--bg-tertiary, #1f1f35) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .period-card:hover {
  border-color: rgba(124, 58, 237, 0.4) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .period-card.recommended {
  border-color: #7c3aed !important;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3) !important;
}

html[data-theme="dark"] .period-duration {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .period-price {
  color: #a78bfa !important;
}

html[data-theme="dark"] .period-features li {
  color: var(--text-secondary, #cbd5e1) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Bundle Section */
html[data-theme="dark"] .bundle-section {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.05) 100%) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

html[data-theme="dark"] .bundle-title {
  color: #34d399 !important;
}

html[data-theme="dark"] .bundle-section p {
  color: #6ee7b7 !important;
}

html[data-theme="dark"] .bundle-section span[style*="background: white"] {
  background: var(--bg-tertiary, #1f1f35) !important;
  color: #6ee7b7 !important;
}

/* Tips */
html[data-theme="dark"] .tip-item {
  background: var(--bg-tertiary, #1f1f35) !important;
}

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

/* Saved Plans */
html[data-theme="dark"] .saved-plans-section {
  background: var(--bg-card, #1e1e32) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .saved-plans-header h3 {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .saved-plan-item {
  background: var(--bg-tertiary, #1f1f35) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Personality Insight */
html[data-theme="dark"] .section-card[style*="fef3c7"] {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.08) 100%) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

/* Priority badges keep their colors in dark mode */
html[data-theme="dark"] .priority-high {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%) !important;
}

html[data-theme="dark"] .priority-medium {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.15) 0%, rgba(217, 119, 6, 0.1) 100%) !important;
}

html[data-theme="dark"] .priority-low {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.15) 0%, rgba(22, 163, 74, 0.1) 100%) !important;
}

/* Profile Tags */
html[data-theme="dark"] .profile-tag {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* Save Modal */
html[data-theme="dark"] .save-modal-content {
  background: var(--bg-card, #1e1e32) !important;
  color: var(--text-primary, #f1f5f9) !important;
}

/* =====================================================
   INTERVIEW PRACTICE DEMO — Dark Mode
   ===================================================== */
html[data-theme="dark"] .ip-page {
  background: linear-gradient(135deg, #13131f 0%, #1a1a2e 50%, #1f1f35 100%) !important;
}

html[data-theme="dark"] .ip-card {
  background: var(--bg-card, #1e1e32) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .ip-step-title {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .ip-step-sub {
  color: var(--text-muted, #94a3b8) !important;
}

html[data-theme="dark"] .ip-role {
  background: var(--bg-tertiary, #1f1f35) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .ip-role:hover {
  border-color: rgba(124, 58, 237, 0.4) !important;
  background: rgba(124, 58, 237, 0.08) !important;
}

html[data-theme="dark"] .ip-role.selected {
  border-color: #7c3aed !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(79, 70, 229, 0.1)) !important;
}

html[data-theme="dark"] .ip-role-name {
  color: var(--text-primary, #e2e8f0) !important;
}

html[data-theme="dark"] .ip-role.selected .ip-role-name {
  color: #c4b5fd !important;
}

html[data-theme="dark"] .ip-type {
  background: var(--bg-tertiary, #1f1f35) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .ip-type:hover {
  border-color: rgba(124, 58, 237, 0.4) !important;
  background: rgba(124, 58, 237, 0.08) !important;
}

html[data-theme="dark"] .ip-type.selected {
  border-color: #7c3aed !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(79, 70, 229, 0.1)) !important;
}

html[data-theme="dark"] .ip-type-name {
  color: var(--text-primary, #e2e8f0) !important;
}

html[data-theme="dark"] .ip-type.selected .ip-type-name { color: #c4b5fd !important; }

html[data-theme="dark"] .ip-type-desc {
  color: var(--text-muted, #94a3b8) !important;
}

html[data-theme="dark"] .ip-type.selected .ip-type-desc { color: #a78bfa !important; }

html[data-theme="dark"] .ip-textarea,
html[data-theme="dark"] .ip-answer-input {
  background: var(--bg-tertiary, #1f1f35) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .ip-textarea:focus,
html[data-theme="dark"] .ip-answer-input:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15) !important;
}

html[data-theme="dark"] .ip-question-box {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(79, 70, 229, 0.08)) !important;
  border-left-color: #7c3aed !important;
}

html[data-theme="dark"] .ip-question-text {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .ip-btn-back {
  background: var(--bg-tertiary, #1f1f35) !important;
  color: var(--text-secondary, #cbd5e1) !important;
}

html[data-theme="dark"] .ip-btn-back:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .ip-nav {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .ip-char-count {
  color: var(--text-muted, #94a3b8) !important;
}

/* ==========================================================================
   LIGHT MODE OVERRIDES
   Catches dark-theme-hardcoded colors that become invisible in light mode.
   These target inline styles and <style> blocks that use dark backgrounds
   and light text colors without CSS variables.
   ========================================================================== */

/* --- Light text on light backgrounds (invisible white text fix) --- */
:root:not([data-theme="dark"]) [style*="color: #f8fafc"],
:root:not([data-theme="dark"]) [style*="color:#f8fafc"],
:root:not([data-theme="dark"]) [style*="color: #f1f5f9"],
:root:not([data-theme="dark"]) [style*="color:#f1f5f9"] {
  color: #1e293b !important;
}

:root:not([data-theme="dark"]) [style*="color: #e2e8f0"],
:root:not([data-theme="dark"]) [style*="color:#e2e8f0"],
:root:not([data-theme="dark"]) [style*="color: #cbd5e1"],
:root:not([data-theme="dark"]) [style*="color:#cbd5e1"] {
  color: #334155 !important;
}

:root:not([data-theme="dark"]) [style*="color: #94a3b8"],
:root:not([data-theme="dark"]) [style*="color:#94a3b8"] {
  color: #64748b !important;
}

/* --- Dark backgrounds that look jarring in light mode --- */
:root:not([data-theme="dark"]) [style*="background: #1e293b"],
:root:not([data-theme="dark"]) [style*="background:#1e293b"],
:root:not([data-theme="dark"]) [style*="background: #0f172a"],
:root:not([data-theme="dark"]) [style*="background:#0f172a"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

:root:not([data-theme="dark"]) [style*="background: #334155"],
:root:not([data-theme="dark"]) [style*="background:#334155"] {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

/* --- Dark borders in light mode --- */
:root:not([data-theme="dark"]) [style*="border-color: #334155"],
:root:not([data-theme="dark"]) [style*="border-color:#334155"],
:root:not([data-theme="dark"]) [style*="border: 1px solid #334155"],
:root:not([data-theme="dark"]) [style*="border:1px solid #334155"] {
  border-color: #e2e8f0 !important;
}

:root:not([data-theme="dark"]) [style*="border-bottom: 1px solid #334155"] {
  border-bottom-color: #e2e8f0 !important;
}

html[data-theme="dark"] .ip-voice-toggle {
  background: var(--bg-tertiary, #1f1f35) !important;
  color: var(--text-secondary, #cbd5e1) !important;
}

html[data-theme="dark"] .ip-loading-text {
  color: var(--text-muted, #94a3b8) !important;
}

html[data-theme="dark"] .ip-spinner {
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-top-color: #7c3aed !important;
}

html[data-theme="dark"] .ip-score-ring .track {
  stroke: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .ip-score-of {
  color: var(--text-muted, #94a3b8) !important;
}

html[data-theme="dark"] .ip-score-item-label {
  color: var(--text-secondary, #cbd5e1) !important;
}

html[data-theme="dark"] .ip-score-bar {
  background: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .ip-fb-section {
  background: var(--bg-tertiary, #1f1f35) !important;
}

html[data-theme="dark"] .ip-fb-text {
  color: var(--text-secondary, #cbd5e1) !important;
}

html[data-theme="dark"] .ip-improved-answer {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(5, 150, 105, 0.05)) !important;
  border-left-color: #10b981 !important;
}

html[data-theme="dark"] .ip-improved-answer .ip-fb-text {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .ip-how-item {
  background: var(--bg-card, #1e1e32) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] .ip-how-label {
  color: var(--text-secondary, #cbd5e1) !important;
}

html[data-theme="dark"] .ip-step-dot {
  background: rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] .ip-step-dot.active {
  background: #7c3aed !important;
}

html[data-theme="dark"] .ip-step-dot.done {
  background: #10b981 !important;
}

html[data-theme="dark"] .ip-skip-link {
  color: var(--text-muted, #94a3b8) !important;
}

/* ==========================================================================
   COMPREHENSIVE DARK MODE CATCH-ALL OVERRIDES
   Fixes white backgrounds and invisible text across ALL pages
   Added: 2026-05-05
   ========================================================================== */

/* --- UNIVERSAL CLASS-BASED BACKGROUND OVERRIDES --- */

/* Common card/container classes used across all test/info/results templates */
html[data-theme="dark"] .test-container,
html[data-theme="dark"] .question-card,
html[data-theme="dark"] .option-label,
html[data-theme="dark"] .option-btn,
html[data-theme="dark"] .progress-area,
html[data-theme="dark"] .review-item,
html[data-theme="dark"] .results-container,
html[data-theme="dark"] .results-card,
html[data-theme="dark"] .result-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .questions-review,
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .start-section,
html[data-theme="dark"] .exam-container,
html[data-theme="dark"] .course-card,
html[data-theme="dark"] .module-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .review-section {
  background: var(--bg-card, #1e1e32) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary, #f1f5f9) !important;
}

/* Progress dots and bar containers */
html[data-theme="dark"] .progress-dots,
html[data-theme="dark"] .progress-bar-container {
  background: var(--bg-tertiary, #1f1f35) !important;
}

/* Light gray backgrounds used extensively */
html[data-theme="dark"] .question-area,
html[data-theme="dark"] .answer-area,
html[data-theme="dark"] .explanation-card,
html[data-theme="dark"] .explanation-box,
html[data-theme="dark"] .score-breakdown,
html[data-theme="dark"] .category-section,
html[data-theme="dark"] .timer-container,
html[data-theme="dark"] .question-navigation,
html[data-theme="dark"] .passage-container,
html[data-theme="dark"] .passage-text,
html[data-theme="dark"] .text-passage {
  background: var(--bg-secondary, #1a1a2e) !important;
  color: var(--text-primary, #f1f5f9) !important;
}

/* --- INLINE STYLE ATTRIBUTE OVERRIDES (broader catch) --- */

/* Catch ALL elements with inline white backgrounds */
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background-color:white"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #ffffff"],
html[data-theme="dark"] [style*="background-color:#ffffff"] {
  background: var(--bg-card, #1e1e32) !important;
  background-color: var(--bg-card, #1e1e32) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Catch light gray inline backgrounds */
html[data-theme="dark"] [style*="background: #f8f9fa"],
html[data-theme="dark"] [style*="background:#f8f9fa"],
html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background: #f0f0f0"],
html[data-theme="dark"] [style*="background:#f0f0f0"],
html[data-theme="dark"] [style*="background: #f1f5f9"],
html[data-theme="dark"] [style*="background:#f1f5f9"],
html[data-theme="dark"] [style*="background: #f3f4f6"],
html[data-theme="dark"] [style*="background:#f3f4f6"],
html[data-theme="dark"] [style*="background: #e2e8f0"],
html[data-theme="dark"] [style*="background:#e2e8f0"],
html[data-theme="dark"] [style*="background: #eff6ff"],
html[data-theme="dark"] [style*="background:#eff6ff"],
html[data-theme="dark"] [style*="background: #f9fafb"],
html[data-theme="dark"] [style*="background:#f9fafb"],
html[data-theme="dark"] [style*="background-color: #f8f9fa"],
html[data-theme="dark"] [style*="background-color:#f8f9fa"],
html[data-theme="dark"] [style*="background-color: #f8fafc"],
html[data-theme="dark"] [style*="background-color:#f8fafc"],
html[data-theme="dark"] [style*="background-color: #f1f5f9"],
html[data-theme="dark"] [style*="background-color:#f1f5f9"],
html[data-theme="dark"] [style*="background-color: #f0f0f0"],
html[data-theme="dark"] [style*="background-color:#f0f0f0"] {
  background: var(--bg-secondary, #1a1a2e) !important;
  background-color: var(--bg-secondary, #1a1a2e) !important;
  color: var(--text-primary, #f1f5f9) !important;
}

/* Light pastel status backgrounds */
html[data-theme="dark"] [style*="background: #f0fdf4"],
html[data-theme="dark"] [style*="background:#f0fdf4"],
html[data-theme="dark"] [style*="background: #dcfce7"],
html[data-theme="dark"] [style*="background:#dcfce7"],
html[data-theme="dark"] [style*="background: #d1fae5"],
html[data-theme="dark"] [style*="background:#d1fae5"] {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #6ee7b7 !important;
}

html[data-theme="dark"] [style*="background: #fef2f2"],
html[data-theme="dark"] [style*="background:#fef2f2"],
html[data-theme="dark"] [style*="background: #fee2e2"],
html[data-theme="dark"] [style*="background:#fee2e2"],
html[data-theme="dark"] [style*="background: #f8d7da"],
html[data-theme="dark"] [style*="background:#f8d7da"] {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #fca5a5 !important;
}

html[data-theme="dark"] [style*="background: #fff3cd"],
html[data-theme="dark"] [style*="background:#fff3cd"],
html[data-theme="dark"] [style*="background: #fef3c7"],
html[data-theme="dark"] [style*="background:#fef3c7"],
html[data-theme="dark"] [style*="background: #fde68a"],
html[data-theme="dark"] [style*="background:#fde68a"] {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #fcd34d !important;
}

html[data-theme="dark"] [style*="background: #eff6ff"],
html[data-theme="dark"] [style*="background: #dbeafe"],
html[data-theme="dark"] [style*="background:#dbeafe"],
html[data-theme="dark"] [style*="background: #e0f2fe"],
html[data-theme="dark"] [style*="background:#e0f2fe"] {
  background: rgba(59, 130, 246, 0.12) !important;
  color: #93c5fd !important;
}

html[data-theme="dark"] [style*="background: #ede9fe"],
html[data-theme="dark"] [style*="background:#ede9fe"],
html[data-theme="dark"] [style*="background: #f5f3ff"],
html[data-theme="dark"] [style*="background:#f5f3ff"] {
  background: rgba(139, 92, 246, 0.12) !important;
  color: #c4b5fd !important;
}

/* --- MISSING DARK TEXT COLOR OVERRIDES (invisible in dark mode) --- */

html[data-theme="dark"] [style*="color: #475569"],
html[data-theme="dark"] [style*="color:#475569"] {
  color: var(--text-secondary, #cbd5e1) !important;
}

html[data-theme="dark"] [style*="color: #334155"],
html[data-theme="dark"] [style*="color:#334155"] {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] [style*="color: #2c3e50"],
html[data-theme="dark"] [style*="color:#2c3e50"] {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] [style*="color: #1a202c"],
html[data-theme="dark"] [style*="color:#1a202c"] {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] [style*="color: #1f2937"],
html[data-theme="dark"] [style*="color:#1f2937"] {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] [style*="color: #111827"],
html[data-theme="dark"] [style*="color:#111827"] {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] [style*="color: #1a1a2e"],
html[data-theme="dark"] [style*="color:#1a1a2e"] {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] [style*="color: #4a5568"],
html[data-theme="dark"] [style*="color:#4a5568"] {
  color: var(--text-secondary, #cbd5e1) !important;
}

html[data-theme="dark"] [style*="color: #2d3748"],
html[data-theme="dark"] [style*="color:#2d3748"] {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] [style*="color: #495057"],
html[data-theme="dark"] [style*="color:#495057"] {
  color: var(--text-secondary, #cbd5e1) !important;
}

html[data-theme="dark"] [style*="color: #155724"],
html[data-theme="dark"] [style*="color:#155724"] {
  color: #6ee7b7 !important;
}

html[data-theme="dark"] [style*="color: #1f2933"],
html[data-theme="dark"] [style*="color:#1f2933"] {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] [style*="color: black"],
html[data-theme="dark"] [style*="color:black"] {
  color: var(--text-primary, #f1f5f9) !important;
}

/* --- CSS CLASS OVERRIDES (from <style> blocks in templates) --- */

/* Test pages - common patterns across aerospace, automotive, marine, chemical, etc. */
html[data-theme="dark"] .test-header,
html[data-theme="dark"] .test-info,
html[data-theme="dark"] .test-summary,
html[data-theme="dark"] .test-instructions {
  background: var(--bg-secondary, #1a1a2e) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Option/answer elements */
html[data-theme="dark"] .option-label,
html[data-theme="dark"] .option-item,
html[data-theme="dark"] .answer-option,
html[data-theme="dark"] .choice-item,
html[data-theme="dark"] .option-text {
  background: var(--bg-tertiary, #1f1f35) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .option-label:hover,
html[data-theme="dark"] .option-item:hover,
html[data-theme="dark"] .answer-option:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

html[data-theme="dark"] .option-label.selected,
html[data-theme="dark"] .option-item.selected,
html[data-theme="dark"] .answer-option.selected {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: #3b82f6 !important;
}

html[data-theme="dark"] .option-label.correct,
html[data-theme="dark"] .option-item.correct {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: #10b981 !important;
}

html[data-theme="dark"] .option-label.incorrect,
html[data-theme="dark"] .option-item.incorrect {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: #ef4444 !important;
}

/* Info/landing pages */
html[data-theme="dark"] .info-section,
html[data-theme="dark"] .feature-section,
html[data-theme="dark"] .pricing-section,
html[data-theme="dark"] .faq-section,
html[data-theme="dark"] .cta-section {
  background: var(--bg-secondary, #1a1a2e) !important;
}

/* Language simulator sections */
html[data-theme="dark"] .simulator-container,
html[data-theme="dark"] .simulator-content,
html[data-theme="dark"] .writing-area,
html[data-theme="dark"] .speaking-area,
html[data-theme="dark"] .reading-passage,
html[data-theme="dark"] .listening-area,
html[data-theme="dark"] .exam-content,
html[data-theme="dark"] .task-card,
html[data-theme="dark"] .response-area {
  background: var(--bg-card, #1e1e32) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Device check pages */
html[data-theme="dark"] .device-check-container,
html[data-theme="dark"] .check-item,
html[data-theme="dark"] .check-card {
  background: var(--bg-card, #1e1e32) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Progress dashboard elements */
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .streak-card,
html[data-theme="dark"] .activity-card,
html[data-theme="dark"] .history-item,
html[data-theme="dark"] .achievement-card {
  background: var(--bg-card, #1e1e32) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Exercise/lesson library */
html[data-theme="dark"] .exercise-card,
html[data-theme="dark"] .lesson-card,
html[data-theme="dark"] .unit-card,
html[data-theme="dark"] .chapter-card {
  background: var(--bg-card, #1e1e32) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Edit profile and form containers */
html[data-theme="dark"] .profile-form,
html[data-theme="dark"] .edit-form,
html[data-theme="dark"] .form-container,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .register-card {
  background: var(--bg-card, #1e1e32) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Cover letter / Resume builder */
html[data-theme="dark"] .builder-container,
html[data-theme="dark"] .builder-panel,
html[data-theme="dark"] .preview-panel,
html[data-theme="dark"] .template-card {
  background: var(--bg-card, #1e1e32) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Bookkeeping/certificate pages */
html[data-theme="dark"] .certificate-container,
html[data-theme="dark"] .lab-container,
html[data-theme="dark"] .lab-card {
  background: var(--bg-card, #1e1e32) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Cognitive/deductive/inductive test pages */
html[data-theme="dark"] .puzzle-card,
html[data-theme="dark"] .grid-container,
html[data-theme="dark"] .pattern-card,
html[data-theme="dark"] .matrix-container,
html[data-theme="dark"] .sequence-card {
  background: var(--bg-card, #1e1e32) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Career pages */
html[data-theme="dark"] .career-card,
html[data-theme="dark"] .career-section,
html[data-theme="dark"] .career-header {
  background: var(--bg-card, #1e1e32) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Advice/results pages */
html[data-theme="dark"] .advice-card,
html[data-theme="dark"] .insight-card,
html[data-theme="dark"] .recommendation-card,
html[data-theme="dark"] .tip-card {
  background: var(--bg-card, #1e1e32) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* PMP/IT cert/professional cert index pages */
html[data-theme="dark"] .cert-card,
html[data-theme="dark"] .domain-card,
html[data-theme="dark"] .practice-card {
  background: var(--bg-card, #1e1e32) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* --- UNIVERSAL TEXT COLOR FIXES (for <style> block content) --- */

/* Headings - ensure visibility in dark mode */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: var(--text-primary, #f1f5f9);
}

/* Body/paragraph text */
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] span,
html[data-theme="dark"] label,
html[data-theme="dark"] td,
html[data-theme="dark"] th {
  color: var(--text-secondary, #cbd5e1);
}

/* Ensure links remain visible — exclude button/CTA elements that define their own colors */
html[data-theme="dark"] a:not(.cta-btn):not(.btn):not([class*="badge"]):not([class*="btn"]):not([class*="cta"]):not([class*="button"]) {
  color: #60a5fa;
}

/* Tables */
html[data-theme="dark"] table {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] th {
  background: var(--bg-tertiary, #1f1f35) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] td {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* --- SUBSCRIBE PAGE SPECIFIC FIXES --- */

/* Ensure plan cards don't show white even without inline dark overrides */
html[data-theme="dark"] .plan-card {
  background: var(--bg-card, #1e1e32) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .plan-card h3 {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .features-list li {
  color: var(--text-secondary, #cbd5e1) !important;
}

html[data-theme="dark"] .bundle-card {
  background: var(--bg-card, #1e1e32) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .bundle-card h4 {
  color: #60a5fa !important;
}

html[data-theme="dark"] .bundle-card .description,
html[data-theme="dark"] .bundle-card .period {
  color: var(--text-muted, #94a3b8) !important;
}

html[data-theme="dark"] .bundle-card .price {
  color: var(--text-primary, #f1f5f9) !important;
}

/* Loyalty section dark gradient */
html[data-theme="dark"] .loyalty-section {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(167, 139, 250, 0.06) 100%) !important;
}

/* Guarantee section */
html[data-theme="dark"] .guarantee-section {
  background: rgba(16, 185, 129, 0.06) !important;
}

html[data-theme="dark"] .guarantee-section h3 {
  color: #34d399 !important;
}

html[data-theme="dark"] .guarantee-section p {
  color: var(--text-secondary, #cbd5e1) !important;
}

/* Disabled button dark styling */
html[data-theme="dark"] .cta-btn:disabled {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #64748b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* --- FORM ELEMENT OVERRIDES --- */
html[data-theme="dark"] form[style*="background: white"],
html[data-theme="dark"] form[style*="background:white"],
html[data-theme="dark"] form[style*="background:#fff"] {
  background: var(--bg-card, #1e1e32) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* --- DECODER PAGE --- */
html[data-theme="dark"] .decoder-container,
html[data-theme="dark"] .decoder-card,
html[data-theme="dark"] .decoder-results {
  background: var(--bg-card, #1e1e32) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* --- MAIN CONTENT AREA --- */
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .page-content,
html[data-theme="dark"] .content-area {
  background: var(--bg-primary, #13131f) !important;
}

/* --- AUTH PAGES (login, register, etc.) --- */
html[data-theme="dark"] .auth-container,
html[data-theme="dark"] .auth-form,
html[data-theme="dark"] .auth-wrapper {
  background: var(--bg-card, #1e1e32) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* --- ALERT / STATUS BOXES --- */
html[data-theme="dark"] .alert,
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-success,
html[data-theme="dark"] .alert-warning,
html[data-theme="dark"] .alert-danger {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .alert-info {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #93c5fd !important;
}

html[data-theme="dark"] .alert-success {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #6ee7b7 !important;
}

html[data-theme="dark"] .alert-warning {
  background: rgba(245, 158, 11, 0.1) !important;
  color: #fcd34d !important;
}

html[data-theme="dark"] .alert-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #fca5a5 !important;
}

/* --- BORDER COLORS --- */
html[data-theme="dark"] [style*="border-color: #e2e8f0"],
html[data-theme="dark"] [style*="border-color:#e2e8f0"],
html[data-theme="dark"] [style*="border: 1px solid #e"],
html[data-theme="dark"] [style*="border: 2px solid #e"] {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* --- MISC SPECIFICS --- */

/* German/language lesson page black text */
html[data-theme="dark"] .lesson-content,
html[data-theme="dark"] .lesson-body,
html[data-theme="dark"] .lesson-text {
  color: var(--text-primary, #f1f5f9) !important;
}

/* Course cards on courses listing page */
html[data-theme="dark"] .course-card {
  background: var(--bg-card, #1e1e32) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .course-card:hover {
  border-color: rgba(59, 130, 246, 0.3) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
}

/* All cognitive tests page */
html[data-theme="dark"] .test-card,
html[data-theme="dark"] .cognitive-card,
html[data-theme="dark"] .assessment-card {
  background: var(--bg-card, #1e1e32) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Spanish/language index pages */
html[data-theme="dark"] .language-card,
html[data-theme="dark"] .exam-card,
html[data-theme="dark"] .level-card {
  background: var(--bg-card, #1e1e32) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* --- STYLE.CSS ELEMENTS WITH HARDCODED WHITE --- */

/* Sidebar navigation */
html[data-theme="dark"] .side-nav {
  background: var(--bg-sidebar, #16162a) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Feature cards (home page, landing pages) */
html[data-theme="dark"] .features .feature,
html[data-theme="dark"] .feature-item {
  background: var(--bg-card, #1e1e32) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Icon button hover in dark mode - high contrast */
html[data-theme="dark"] .icon-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .icon-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #93c5fd !important;
  border-color: rgba(96, 165, 250, 0.6) !important;
}

/* Reward/tier badges */
html[data-theme="dark"] .reward-item,
html[data-theme="dark"] .benefit-item {
  background: var(--bg-card, #1e1e32) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Generic card patterns used in style.css */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .widget {
  background: var(--bg-card, #1e1e32) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Mindgrid / game containers */
html[data-theme="dark"] .game-container,
html[data-theme="dark"] .game-card,
html[data-theme="dark"] .game-board {
  background: var(--bg-card, #1e1e32) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Modal / dialog backgrounds */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dialog-content,
html[data-theme="dark"] .popup-content {
  background: var(--bg-card, #1e1e32) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   PERSONALITY TEST PAGE - Dark Mode
   ========================================================================== */

/* Main test container - override white background */
html[data-theme="dark"] .test-section {
  background: var(--bg-card, #1e1e32) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Title */
html[data-theme="dark"] .test-section h2 {
  color: #60a5fa !important;
}

/* Question counter, timer, prompt text */
html[data-theme="dark"] .test-section .d-flex strong,
html[data-theme="dark"] .test-section #personality-question-counter,
html[data-theme="dark"] .test-section #personality-timer {
  color: var(--text-primary, #f1f5f9) !important;
}

html[data-theme="dark"] .test-section #personality-prompt {
  color: var(--text-secondary, #cbd5e1) !important;
}

/* Statement blocks (created by JS with inline border) */
html[data-theme="dark"] #personality-pair-container > div:first-child > div {
  background: var(--bg-tertiary, #1f1f35) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: var(--text-primary, #f1f5f9) !important;
}

/* Statement heading text (Statement A / Statement B) */
html[data-theme="dark"] #personality-pair-container > div:first-child > div > div:first-child {
  color: #f1f5f9 !important;
}

/* Statement body text */
html[data-theme="dark"] #personality-pair-container > div:first-child > div > div:last-child {
  color: var(--text-secondary, #cbd5e1) !important;
}

/* Skip button container border */
html[data-theme="dark"] #skip-btn-container {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* Personality slider segment text - force dark text on light colored segments */
html[data-theme="dark"] #personality-pair-container > div:nth-child(2) > div:nth-child(2),
html[data-theme="dark"] #personality-pair-container > div:nth-child(2) > div:nth-child(3),
html[data-theme="dark"] #personality-pair-container > div:nth-child(2) > div:nth-child(4),
html[data-theme="dark"] #personality-pair-container > div:nth-child(2) > div:nth-child(5),
html[data-theme="dark"] #personality-pair-container > div:nth-child(2) > div:nth-child(2) > span,
html[data-theme="dark"] #personality-pair-container > div:nth-child(2) > div:nth-child(3) > span,
html[data-theme="dark"] #personality-pair-container > div:nth-child(2) > div:nth-child(4) > span,
html[data-theme="dark"] #personality-pair-container > div:nth-child(2) > div:nth-child(5) > span {
  color: #0f172a !important;
}

/* Personality slider - dark segments need white text on spans too */
html[data-theme="dark"] #personality-pair-container > div:nth-child(2) > div:nth-child(1) > span,
html[data-theme="dark"] #personality-pair-container > div:nth-child(2) > div:nth-child(6) > span {
  color: #ffffff !important;
}

/* Skip button */
html[data-theme="dark"] #skip-btn {
  background: var(--bg-tertiary, #1f1f35) !important;
  color: var(--text-primary, #f1f5f9) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] #skip-btn:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #93c5fd !important;
}

/* Guest trial access box (inline style override) */
html[data-theme="dark"] .test-section div[style*="linear-gradient"][style*="#F0F9FF"] {
  background: rgba(139, 92, 246, 0.08) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
}

html[data-theme="dark"] .test-section div[style*="linear-gradient"][style*="#F0F9FF"] p {
  color: var(--text-secondary, #cbd5e1) !important;
}

html[data-theme="dark"] .test-section div[style*="linear-gradient"][style*="#F0F9FF"] strong {
  color: #a78bfa !important;
}

/* ==========================================================================
   MODULE PAGE DARK MODE CONTRAST FIXES
   Norwegian, PMP, Bookkeeping pages have hardcoded white backgrounds
   that need dark-mode overrides for readability.
   ========================================================================== */

/* Norwegian Page */
html[data-theme="dark"] .norwegian-breadcrumbs {
  background: var(--bg-secondary) !important;
}

html[data-theme="dark"] .norwegian-breadcrumbs-list a {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] .norwegian-breadcrumbs-list .current {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .norwegian-btn-primary {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .norwegian-btn-red {
  color: #ffffff !important;
}

html[data-theme="dark"] .norwegian-module-card {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .norwegian-module-title {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .norwegian-module-desc {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] .norwegian-module-number {
  filter: brightness(1.4) !important;
}

html[data-theme="dark"] .norwegian-module-cta {
  filter: none !important;
}

html[data-theme="dark"] .norwegian-module-cta span {
  color: #ffffff !important;
}

html[data-theme="dark"] .norwegian-quick-card {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] .norwegian-section-title {
  color: var(--text-primary) !important;
}

/* PMP Page */
html[data-theme="dark"] .pmp-btn-white {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .pmp-badge span {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .pmp-pricing-card {
  background: var(--bg-card) !important;
}

html[data-theme="dark"] .pmp-duration-price {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .pmp-trust-icon {
  color: var(--text-secondary) !important;
}

/* Bookkeeping Page */
html[data-theme="dark"] .bk-btn-white {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .bk-badge span {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .bk-stat-value {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .bk-pricing-card {
  background: var(--bg-card) !important;
}

/* Sidebar navigation - boost muted link contrast */
html[data-theme="dark"] .nav-link.nav-link-indented {
  color: var(--text-secondary) !important;
}

/* Catalog page - category pill active state */
html[data-theme="dark"] .category-pill.active {
  color: #ffffff !important;
}

html[data-theme="dark"] .category-pill[data-category="all"].active {
  background-color: var(--accent-primary-active) !important;
  border-color: var(--accent-primary-active) !important;
}

html[data-theme="dark"] .category-pill[data-category="cognitive"].active {
  background-color: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

html[data-theme="dark"] .category-pill[data-category="engineering"].active {
  background-color: #15803d !important;
  border-color: #15803d !important;
}

html[data-theme="dark"] .category-pill[data-category="business"].active {
  background-color: #6d28d9 !important;
  border-color: #6d28d9 !important;
}

html[data-theme="dark"] .category-pill[data-category="science"].active {
  background-color: #0e7490 !important;
  border-color: #0e7490 !important;
}

html[data-theme="dark"] .category-pill[data-category="it-cert"].active {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}

html[data-theme="dark"] .category-pill[data-category="professional"].active {
  background-color: #b45309 !important;
  border-color: #b45309 !important;
}

html[data-theme="dark"] .category-pill[data-category="simulator"].active {
  background-color: #be185d !important;
  border-color: #be185d !important;
}

html[data-theme="dark"] .category-pill[data-category="programming"].active {
  background-color: #0f766e !important;
  border-color: #0f766e !important;
}

html[data-theme="dark"] .category-pill[data-category="career-tools"].active {
  background-color: #4338ca !important;
  border-color: #4338ca !important;
}

html[data-theme="dark"] .module-card__price {
  color: #93c5fd !important;
}

/* Footer contrast fix */
html[data-theme="dark"] .footer-bottom p {
  color: var(--text-muted) !important;
}

[data-theme="light"] .footer-bottom p {
  color: var(--text-muted) !important;
}