/* ========================================================================
   DIGITAL TWIN VERSE - THEME VARIABLES (LIGHT & DARK)
======================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root, html[data-theme="light"] {
  --dtv-bg-base: #FAFAFA;
  --dtv-bg-raised: #FFFFFF;
  --dtv-bg-overlay: rgba(255, 255, 255, 0.85);
  
  --dtv-border-subtle: rgba(15, 23, 42, 0.04);
  --dtv-border-default: rgba(15, 23, 42, 0.08);
  --dtv-border-strong: rgba(15, 23, 42, 0.15);

  --dtv-text-primary: #09090b;
  --dtv-text-secondary: #52525b;
  --dtv-text-tertiary: #a1a1aa;

  --dtv-orange-300: #FDBA74;
  --dtv-orange-400: #FB923C;
  --dtv-orange-500: #F97316;
  --dtv-orange-600: #EA580C;
  /* Glowing Orange Shadow for primary actions */
  --dtv-shadow-glow-orange: 0 0 0 1px rgba(249, 115, 22, 0.15), 0 8px 16px rgba(249, 115, 22, 0.15);

  /* Fonts */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Legacy variable overrides mapping */
  --bg: #FAFAFA;
  --bg2: #FFFFFF;
  --card: #FFFFFF;
  --wh: #09090b;
  --wh2: #52525b;
  --mu: #52525b;
}

html[data-theme="dark"] {
  --dtv-bg-base: #09090b;
  --dtv-bg-raised: #18181b;
  --dtv-bg-overlay: rgba(9, 9, 11, 0.85);
  
  --dtv-border-subtle: rgba(255, 255, 255, 0.04);
  --dtv-border-default: rgba(255, 255, 255, 0.1);
  --dtv-border-strong: rgba(255, 255, 255, 0.2);

  --dtv-text-primary: #FAFAFA;
  --dtv-text-secondary: #a1a1aa;
  --dtv-text-tertiary: #52525b;

  --dtv-orange-300: #F97316;
  --dtv-orange-400: #EA580C;
  --dtv-orange-500: #C2410C;
  --dtv-orange-600: #9A3412;
  --dtv-orange-glow: rgba(234, 88, 12, 0.15);

  /* Legacy variable overrides mapping */
  --bg: #09090b;
  --bg2: #18181b;
  --card: #18181b;
  --wh: #FAFAFA;
  --wh2: #a1a1aa;
  --mu: #a1a1aa;
  --border: rgba(255, 255, 255, 0.1);
  
  --body-bg: #09090b;
  --body-after-bg: #18181b;
  --nav-bg: rgba(9, 9, 11, 0.95);
}

/* ========================================================================
   GLOBAL THEME & BACKGROUNDS
======================================================================== */
/* Base: font + text color (theme-aware, always applied) */
body, html {
    color: var(--dtv-text-primary) !important;
    font-family: var(--font-body);
}

/* Light theme: white body with subtle dot grid */
html[data-theme="light"] body,
html[data-theme="light"] {
    background-color: var(--dtv-bg-base) !important;
    background-image: linear-gradient(var(--dtv-border-subtle) 1px, transparent 1px),
                      linear-gradient(90deg, var(--dtv-border-subtle) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
    background-attachment: fixed !important;
}

/* Default (no theme set = dark): dark body */
html:not([data-theme]) body,
html:not([data-theme]) {
    background-color: var(--dtv-bg-base) !important;
    background-image: none !important;
}

/* Dark theme: dark body, no grid to avoid invisible grid on dark */
html[data-theme="dark"] body,
html[data-theme="dark"] {
    background-color: #09090b !important;
    background-image: none !important;
    color: var(--dtv-text-primary) !important;
}

/* Midnight theme */
html[data-theme="midnight"] body,
html[data-theme="midnight"] {
    background-color: var(--dtv-bg-base) !important;
    background-image: none !important;
    color: var(--dtv-text-primary) !important;
}

/* Navy, Slate, Forest, Crimson, Magenta — all dark variants */
html[data-theme="navy"] body, html[data-theme="navy"],
html[data-theme="slate"] body, html[data-theme="slate"],
html[data-theme="forest"] body, html[data-theme="forest"],
html[data-theme="crimson"] body, html[data-theme="crimson"],
html[data-theme="magenta"] body, html[data-theme="magenta"] {
    background-color: var(--dtv-bg-base) !important;
    background-image: none !important;
}

/* ════════════════════════════════════════════════════════════
   THE SPLASH SCREEN FIX (Root Level Preloader Override)
════════════════════════════════════════════════════════════ */
#splash-screen {
    background: var(--dtv-bg-raised) !important;
}
.splash-logo {
    color: var(--dtv-text-primary) !important;
}
.splash-text em {
    color: var(--dtv-orange-500) !important;
}
.splash-loader {
    background: rgba(15, 23, 42, 0.05) !important;
}
.splash-loader-bar {
    background: var(--dtv-orange-500) !important;
    
}
.splash-logo-mark {
    background: linear-gradient(135deg, var(--dtv-orange-400), var(--dtv-orange-600)) !important;
    
    color: #FFFFFF !important;
}

/* ========================================================================
   TYPOGRAPHY
======================================================================== */
h1, h2, h3, h4, h5, h6, .display-text, .hero-h {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--dtv-text-primary) !important;
}

p, span, small, label {
    color: inherit;
}

/* Modal and Overlays (True Frosted Glass) */
.student-onboard-ov, .modal-overlay, .auth-shell, .wa-redirect-ov {
    background: var(--dtv-bg-overlay) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.modal-content, .mod-wrap, .auth-card {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid var(--dtv-border-default) !important;
    border-radius: 20px !important;
    color: var(--dtv-text-primary) !important;
    backdrop-filter: blur(20px) !important;
}

.student-onboard-box h3, .mod-wrap h2, .mod-wrap h3 {
    color: var(--dtv-text-primary) !important;
    font-weight: 700;
}

.student-onboard-box p, .so-note, .mod-wrap p, .auth-card p {
    color: var(--dtv-text-secondary) !important;
}

/* Modal Buttons */
.so-btn {
    background: var(--dtv-bg-raised) !important;
    color: var(--dtv-text-primary) !important;
    border: 1px solid var(--dtv-border-default) !important;
    
    transition: all 0.2s ease !important;
    font-weight: 600 !important;
}
.so-btn:hover {
    background: var(--dtv-bg-base) !important;
    border-color: var(--dtv-orange-400) !important;
    color: var(--dtv-orange-600) !important;
    transform: translateY(-1px) !important;
    
}

/* Remove blobs in LIGHT theme only to keep it clean */
html[data-theme="light"] .blobs .b {
    display: none !important;
}

/* Hero Section Refinements */
.hero-sec, .sec, .main-wrap, .hero-shell {
    background: transparent !important;
}
.hero-sub {
    color: var(--dtv-text-secondary) !important;
    font-size: 1.15rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}
.dtv-badge {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid var(--dtv-border-default) !important;
    color: var(--dtv-orange-600) !important;
    
    border-radius: 99px !important;
}
.dtv-badge span {
    color: var(--dtv-text-primary) !important;
}
.dtv-badge .bdot {
    background: var(--dtv-orange-500) !important;
}

/* Pathway Nodes in Hero */
.dtv-path-line {
    background: var(--dtv-border-default) !important;
}
.dtv-path-node {
    background: var(--dtv-orange-500) !important;
    
    border: 2px solid var(--dtv-bg-raised) !important;
}

/* Navigation - Floating White Glass */
.nav-modern, .navbar {
    background: var(--dtv-bg-overlay) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid var(--dtv-border-default) !important;
    
}
/* Show theme switcher */
#theme-switcher {
    display: flex !important;
    align-items: center;
}
.logo-modern h1, .logo-modern em, .nav-logo {
    color: var(--dtv-text-primary) !important;
    font-weight: 800 !important;
}
.logo-sub {
    color: var(--dtv-text-tertiary) !important;
}
.nav-link {
    color: var(--dtv-text-secondary) !important;
    font-weight: 500;
    transition: color 0.2s ease, background 0.2s ease;
    border-radius: 8px;
}
.nav-link:hover, .nav-link.active {
    color: var(--dtv-text-primary) !important;
    background: var(--dtv-border-subtle) !important;
}

/* Cards (Features, Dashboard, Steps) */
.feat-card, .dash-card, .glass-panel, .info-card, .step-card, .career-card, .tool-card,
html .feat-card, html .dash-card, html .glass-panel {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid var(--dtv-border-default) !important;
    color: var(--dtv-text-primary) !important;
    border-radius: 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.feat-card:hover, .dash-card:hover, .tool-card:hover {
    transform: translateY(-4px) !important;
    
    border-color: var(--dtv-border-strong) !important;
}
.feat-card h3, .dash-card h3, .info-card h3, .tool-card h3 {
    color: var(--dtv-text-primary) !important;
}
.feat-card p, .dash-card p, .info-card p, .tool-card p, .tool-desc {
    color: var(--dtv-text-secondary) !important;
}
/* Override weird original 3D bevels */
.feat-card, .dash-card, .glass-panel, .info-card, .step-card, .mc, .sp-card, .career-card, .faq-item {
    border-top: 1px solid var(--dtv-border-default) !important;
    border-bottom: 1px solid var(--dtv-border-default) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Inputs */
.fi, .ci, input, textarea, select {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid var(--dtv-border-default) !important;
    color: var(--dtv-text-primary) !important;
    border-radius: 10px !important;
    
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.fi:focus, .ci:focus, input:focus, textarea:focus, select:focus {
    border-color: var(--dtv-orange-500) !important;
    
    outline: none !important;
}

/* Buttons */
.btn-primary, .btn-brand, .tool-btn, .hero-btns .btn-out:first-child {
    background: linear-gradient(135deg, var(--dtv-orange-500), var(--dtv-orange-600)) !important;
    color: #FFFFFF !important;
    border: none !important;
    
    font-weight: 600 !important;
    
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}
.btn-primary:hover, .btn-brand:hover, .tool-btn:hover, .hero-btns .btn-out:first-child:hover {
    transform: translateY(-2px) !important;
    
    background: linear-gradient(135deg, var(--dtv-orange-400), var(--dtv-orange-500)) !important;
}

.btn-secondary, .btn-out {
    background: var(--dtv-bg-raised) !important;
    color: var(--dtv-text-primary) !important;
    border: 1px solid var(--dtv-border-default) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
.btn-secondary:hover, .btn-out:hover {
    background: var(--dtv-bg-overlay) !important;
    color: var(--dtv-text-primary) !important;
}

/* Interactive Elements */
.streak-bar, .progress-fill, .mini-bar span, html .streak-bar {
    background: var(--dtv-orange-500) !important;
}
.seg-btn {
    color: var(--dtv-text-secondary) !important;
}
.seg-btn.active {
    background: var(--dtv-orange-500) !important;
    color: #FFFFFF !important;
    
}

/* Icons */
.dtv-icon {
    color: var(--dtv-orange-500) !important;
}

/* Footer */
.footer-modern, .footer, footer {
    background: var(--dtv-bg-raised) !important;
    border-top: 1px solid var(--dtv-border-default) !important;
    color: var(--dtv-text-secondary) !important;
}
.footer-link, .footer-legal-link, .foot-link {
    color: var(--dtv-text-secondary) !important;
}
.footer-link:hover, .footer-legal-link:hover, .foot-link:hover {
    color: var(--dtv-text-primary) !important;
}

/* Universal Text Highlights */
html[data-theme="light"] .text-brand, 
html[data-theme="light"] .text-glow, 
html[data-theme="light"] .amb, 
html[data-theme="light"] .serif {
    color: var(--dtv-orange-600) !important;
}
html:not([data-theme="light"]) .text-brand, 
html:not([data-theme="light"]) .text-glow, 
html:not([data-theme="light"]) .amb, 
html:not([data-theme="light"]) .serif {
    color: var(--dtv-orange-400) !important;
}

/* Remove 3D Card Hover Rotations which look weird in light theme */
.feat-card:hover, .dash-card:hover {
    transform: translateY(-5px) scale(1.02) !important;
}

/* ========================================================================
   READABILITY BUG FIXES (FORCING DARK TEXT ON LIGHT BACKGROUNDS)
======================================================================== */
html .mob, html .mob a, html .mob .btn-reset,
html .mob-signin, html .mob-signup {
    color: var(--dtv-text-primary) !important;
    background-color: transparent !important;
}
html .mob {
    background-color: var(--dtv-bg-raised) !important;
}
html .chat-panel, html .cp-name, html .cp-st, 
html .cp-msgs, html .ai-msg, html .agent-chip {
    color: var(--dtv-text-primary) !important;
}
html .chat-panel {
    background: var(--dtv-bg-raised) !important; 
    border: 1px solid var(--dtv-border-default) !important;
    
}
html .ai-msg {
    background: var(--dtv-bg-base) !important; 
    color: var(--dtv-text-primary) !important;
    border: 1px solid var(--dtv-border-default) !important;
}
html .us-msg {
    background: linear-gradient(135deg, var(--dtv-orange-500), var(--dtv-orange-600)) !important; 
    color: #FFFFFF !important;
}
html #rzp-payment-modal .mod-wrap, html #proof-upload-form label, 
html .checkbox-group span, html #rzp-payment-modal p {
    color: var(--dtv-text-primary) !important;
}
html #rzp-payment-modal .mod-wrap {
    background: var(--dtv-bg-raised) !important;
}
html .toast {
    background: var(--dtv-bg-raised) !important;
    color: var(--dtv-text-primary) !important;
    border: 1px solid var(--dtv-border-default) !important;
    
}
html .tool-btn {
    color: #FFFFFF !important;
}

/* ========================================================================
   SPECIFIC COMPONENT BUG FIXES (Dashboard, Explorer, Hover States)
======================================================================== */

/* Dashboard & Explorer Fixes */
html #student-dashboard, 
html .dash-box, 
html .dash-card,
html .career-card, 
html .sp-card {
    background: var(--dtv-bg-raised) !important;
    color: var(--dtv-text-primary) !important;
    border: 1px solid var(--dtv-border-default) !important;
    
}

/* Ensure text inside these cards is black */
html .dash-card *, 
html .dash-box *, 
html .career-card *, 
html .sp-card * {
    color: var(--dtv-text-primary) !important;
}

/* Fix Comprehensive Learning Ecosystem hover state */
html .feat-card:hover, 
html .ecosystem-card:hover,
html .dash-card:hover,
html .career-card:hover {
    background: var(--dtv-bg-raised) !important; /* Force it to stay white, not black */
    transform: translateY(-5px) !important;
    
}

/* Top Nav Dropdown */
html .dropdown-menu, 
html .nav-dropdown .dropdown-menu,
html .account-panel {
    background: var(--dtv-bg-raised) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--dtv-border-default) !important;
}
html .dropdown-menu a, 
html .nav-dropdown .dropdown-menu a {
    color: var(--dtv-text-secondary) !important;
}
html .account-panel .acc-item {
    color: var(--dtv-text-secondary);
}
html .dropdown-menu a:hover, 
html .nav-dropdown .dropdown-menu a:hover,
html .account-panel .acc-item:hover {
    color: var(--dtv-orange-400) !important;
    background: rgba(249, 115, 22, 0.08) !important;
}

/* Ensure the Founder Link is perfectly readable */
html .dtv-badge a {
    color: var(--dtv-orange-600) !important;
    
}

/* Ensure 3D Vanta Canvas works perfectly in the Hero Section */
#hero {
    position: relative !important;
    background: transparent !important;
}
#hero > .hero-shell, #hero > .blobs {
    position: relative;
    z-index: 2; /* Put text above the 3D canvas */
}

/* Fix Preloader Flash */
.preloader {
    background-color: var(--dtv-bg-base) !important;
}
.loader {
    border-color: var(--dtv-orange-300) transparent var(--dtv-orange-500) transparent !important;
}

/* ========================================================================
   FIXING HARDCODED BLACK SECTIONS (.surf, .surf2)
======================================================================== */
html .surf, html .surf2, html section[class*="surf"] {
    background: var(--dtv-bg-raised) !important;
    background-color: var(--dtv-bg-raised) !important;
    backdrop-filter: none !important;
}
/* Ensure the body actually stays white regardless of anything else */
body {
    background: var(--dtv-bg-base) !important;
    background-color: var(--dtv-bg-base) !important;
}


/* ========================================================================
   ADDITIONAL LIGHT THEME FIXES FOR SPECIFIC SECTIONS (DASHBOARD, EXPLORER)
======================================================================== */
/* AI Section */
html .ai-preview, html .dtv-agent-node {
    background: var(--dtv-bg-raised) !important;
    border-color: var(--dtv-border-default) !important;
    color: var(--dtv-text-primary) !important;
}

/* Analyzer Card (Upload Your Achievements) */
html #analyzer-promo, html #ai-section {
    background: var(--dtv-bg-raised) !important;
}
html .analyzer-card {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid var(--dtv-border-default) !important;
    
}
html .analyzer-card * {
    color: var(--dtv-text-primary) !important;
}
html .analyzer-card strong {
    color: var(--dtv-orange-600) !important; /* Emphasize metrics */
}
html .glass-tag {
    color: var(--dtv-text-primary) !important;
    background: rgba(15, 23, 42, 0.05) !important;
    border-color: var(--dtv-border-default) !important;
}

/* Dashboard Controls (Search & Filters) */
html .search-input, html #filter-salary, html #filter-remote {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid var(--dtv-border-strong) !important;
    color: var(--dtv-text-primary) !important;
}
html .search-input::placeholder {
    color: var(--dtv-text-secondary) !important;
}
html .dash-controls, html .career-explorer-head {
    background: transparent !important;
}

/* Dashboard Shell & Panels */
html .dashboard-shell, html .dashboard-panel {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid var(--dtv-border-default) !important;
    color: var(--dtv-text-primary) !important;
}
html .dashboard-shell::before {
    display: none !important;
}
html .dash-toggle {
    background: var(--dtv-orange-500) !important;
    color: #FFFFFF !important;
    border-color: var(--dtv-orange-600) !important;
}
html .dash-toggle-text, html .dash-toggle-icon {
    color: #FFFFFF !important;
}
html .dash-toggle:hover {
    background: var(--dtv-orange-600) !important;
}
html .student-switch, html .seg-group {
    background: var(--dtv-bg-raised) !important;
}

/* Fix text in specific elements */
html .dash-hint, html .dash-ov-l {
    color: var(--dtv-text-secondary) !important;
}
html .dash-ov-n {
    color: var(--dtv-text-primary) !important;
}
html .dash-overall {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid var(--dtv-border-default) !important;
}
html .dash-ov-bar label span {
    color: var(--dtv-text-primary) !important;
}
html .ov-bar-track {
    background: rgba(15, 23, 42, 0.1) !important;
}

/* Inline Styles Overrides just in case */
html [style*="background: rgba(255,255,255,0.03)"],
html [style*="background: rgba(255, 255, 255, 0.03)"] {
    background: var(--dtv-bg-raised) !important;
    border-color: var(--dtv-border-default) !important;
    color: var(--dtv-text-primary) !important;
}
html [style*="background:var(--surf2,#101f35)"] {
    background: var(--dtv-bg-raised) !important;
}


/* ========================================================================
   ADDITIONAL LIGHT THEME FIXES: JOURNEY, BLOGS, WHY DTV, REVIEWS
======================================================================== */
/* Force all sections to have a white background, removing any dark gradients */
html section#road, 
html section#latest-blogs, 
html section#why-dtv, 
html section#rev,
html section#mkt,
html section#stories,
html section#prob,
html section#how,
html section#features {
    background: var(--dtv-bg-base) !important;
    background-color: var(--dtv-bg-base) !important;
    background-image: none !important;
}

/* Ensure text inside these sections is dark */
html section#road *, 
html section#latest-blogs *, 
html section#why-dtv *, 
html section#rev * {
    color: var(--dtv-text-primary);
}
/* Ensure labels and descriptions stay muted */
html section#road .lbl, html section#road .desc,
html section#latest-blogs .lbl, html section#latest-blogs .desc,
html section#why-dtv .lbl, html section#why-dtv .desc,
html section#rev .lbl, html section#rev .desc {
    color: var(--dtv-text-secondary) !important;
}

/* Phase Cards in "From Concept to Global Impact" */
html .road-grid, html .road-card {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid var(--dtv-border-default) !important;
    color: var(--dtv-text-primary) !important;
}
html .road-card.active, html .road-card[style*="background"] {
    background: rgba(249, 115, 22, 0.05) !important;
    border: 1px solid var(--dtv-orange-500) !important;
}

/* Feature/Why DTV Cards */
html .ecosystem-card, html .feat-card, html .sp-card {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid var(--dtv-border-default) !important;
    
}

/* Review Cards / Testimonials */
html .mc, html .testimonial-card, html .review-card {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid var(--dtv-border-default) !important;
    
}
html .mc *, html .testimonial-card *, html .review-card * {
    color: var(--dtv-text-primary) !important;
}
html .mc span, html .testimonial-card span, html .review-card p {
    color: var(--dtv-text-secondary) !important;
}

/* Share Your Experience Form */
html .share-box, html .review-form-box, html .feedback-box {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid var(--dtv-border-default) !important;
}
html .share-box *, html .review-form-box *, html .feedback-box * {
    color: var(--dtv-text-primary) !important;
}
html .share-box input, html .share-box textarea,
html .review-form-box input, html .review-form-box textarea,
html .feedback-box input, html .feedback-box textarea {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid var(--dtv-border-strong) !important;
    color: var(--dtv-text-primary) !important;
}

/* ========================================================================
   REACT AUTH APP LIGHT THEME FORCES (login.html, signup.html)
======================================================================== */
/* Force main container */
html #root > div.bg-\[\#101415\] {
    background-color: var(--dtv-bg-base) !important;
    background-image: none !important;
    color: var(--dtv-text-primary) !important;
}

/* Override black shader canvas */
html #shader-canvas {
    background-color: transparent !important;
    opacity: 0.15 !important;
}

/* Force text colors from white to dark */
html #root .text-white {
    color: var(--dtv-text-primary) !important;
}
html #root .text-\[\#cbc3d7\] {
    color: var(--dtv-text-secondary) !important;
}

/* Login/Signup Glass Card */
html #login-card, html .glass-card {
    background-color: var(--dtv-bg-raised) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    
}

/* Inputs inside React app */
html #root input.bg-black\/60 {
    background-color: var(--dtv-bg-raised) !important;
    color: var(--dtv-text-primary) !important;
    border-color: rgba(15, 23, 42, 0.15) !important;
}
html #root input.bg-black\/60::placeholder {
    color: #94a3b8 !important;
}

/* Informational Text Box */
html #root p.bg-black\/40 {
    background-color: rgba(15, 23, 42, 0.04) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    color: var(--dtv-text-secondary) !important;
}

/* ========================================================================
   PREMIUM PRICING MODAL LIGHT THEME FIX
======================================================================== */
html .wa-redirect-box {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    
}

html .wa-redirect-box h2, html .wa-redirect-box h3 {
    color: var(--dtv-text-primary) !important;
}

html .wa-redirect-box p, html .wa-redirect-box .desc {
    color: var(--dtv-text-secondary) !important;
}

html .pricing-card {
    background: var(--dtv-bg-base) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: var(--dtv-text-primary) !important;
}

html .pricing-card:hover {
    background: var(--dtv-bg-raised) !important;
    border-color: var(--dtv-orange-500) !important;
    
}

/* Ensure the pricing amounts are dark */
html .pricing-card div, html .pricing-card li, html .pricing-card span {
    color: var(--dtv-text-primary) !important;
}

/* Except the Starter/Value badges and /mo text which should be lighter */
html .pricing-card div[style*="font-size: 0.75rem"], html .pricing-card span[style*="font-size: 1rem"] {
    color: var(--dtv-text-secondary) !important;
    background: rgba(15, 23, 42, 0.05) !important; /* For the badge */
}

/* Close Button on Modal */
html .wa-redirect-box button[onclick="closePricingPage()"] {
    background: rgba(15, 23, 42, 0.05) !important;
    color: var(--dtv-text-primary) !important;
}
html .wa-redirect-box button[onclick="closePricingPage()"]:hover {
    background: rgba(15, 23, 42, 0.1) !important;
}

/* ========================================================================
   BLOG & RESOURCES LIGHT THEME FIX
======================================================================== */
/* Blog Page Background and Text */
html body.blog-page, html .blog-container, html .blog-layout, html .blog-hero {
    background: var(--dtv-bg-base) !important;
}

html .blog-content {
    color: var(--dtv-text-secondary) !important;
}

html .blog-content h1, html .blog-content h2, html .blog-content h3, html .blog-content h4, html .blog-content h5, html .blog-content h6 {
    color: var(--dtv-text-primary) !important;
}

html .blog-content strong, html .blog-content b {
    color: var(--dtv-text-primary) !important;
}

html .blog-meta {
    color: #71717a !important;
}

html .blog-card, html .story-card {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    color: var(--dtv-text-secondary) !important;
}

html .blog-card:hover, html .story-card:hover {
    
    border-color: rgba(15, 23, 42, 0.15) !important;
}

html .blog-card-content, html .story-card-content {
    color: var(--dtv-text-secondary) !important;
}

html .blog-card-title, html .blog-card h3 {
    color: var(--dtv-text-primary) !important;
}

html .blog-sidebar {
    background: var(--dtv-bg-base) !important;
}
/* Soft Orange styling for Welcome Box */
.student-onboard-box {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid var(--dtv-border-default) !important;
}
html[data-theme="light"] .student-onboard-box {
    background: #FFF7ED !important;
    border: 1px solid #FFEDD5 !important;
}

/* ========================================================================
   PROBLEM PAGES LIGHT THEME FIX (/problem/*)
======================================================================== */
html body[style*="background-color: #0b0f19"],
html body:has(.prob-page-header) {
    background-color: var(--dtv-bg-base) !important;
    color: var(--dtv-text-primary) !important;
}
html .prob-page-header {
    background: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}
html .prob-brand {
    color: var(--dtv-text-primary) !important;
}
html .prob-back-btn {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid var(--dtv-border-default) !important;
    color: var(--dtv-text-secondary) !important;
}
html .prob-back-btn:hover {
    background: var(--dtv-bg-base) !important;
    color: var(--dtv-text-primary) !important;
}
html .prob-title {
    color: var(--dtv-text-primary) !important;
}
html .prob-title span {
    color: var(--dtv-orange-500) !important;
}
html .prob-lead {
    background: var(--dtv-bg-raised) !important;
    border-color: var(--dtv-orange-500) !important;
    color: var(--dtv-text-secondary) !important;
    border: 1px solid var(--dtv-border-default) !important;
    border-left: 4px solid var(--dtv-orange-500) !important;
}
html .stat-box, html .prob-content-card {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid var(--dtv-border-default) !important;
    
}
html .stat-num {
    color: var(--dtv-orange-500) !important;
}
html .stat-label, html .prob-section-title, html .prob-content-card h3 {
    color: var(--dtv-text-primary) !important;
}
html .stat-sub, html .prob-content-card p {
    color: var(--dtv-text-secondary) !important;
}
html .news-card {
    background: rgba(249, 115, 22, 0.04) !important;
    border: 1px solid rgba(249, 115, 22, 0.15) !important;
}
html .news-meta {
    color: var(--dtv-orange-500) !important;
}
html .news-title {
    color: var(--dtv-text-primary) !important;
}
html .news-text {
    color: var(--dtv-text-secondary) !important;
}
html .solution-box {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid var(--dtv-border-default) !important;
    
}
html .solution-box h2 {
    color: var(--dtv-text-primary) !important;
}
html .solution-box ul {
    color: var(--dtv-text-secondary) !important;
}
html .btn-primary-dtv {
    background: var(--dtv-orange-500) !important;
    color: #FFFFFF !important;
    
}
html .btn-secondary-dtv {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid var(--dtv-border-default) !important;
    color: var(--dtv-text-primary) !important;
}
html .btn-secondary-dtv:hover {
    background: var(--dtv-bg-base) !important;
}
html .ai-drawer-overlay {
    background: var(--dtv-bg-overlay) !important;
}
html .ai-drawer-box {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid var(--dtv-border-default) !important;
    
}
html .ai-drawer-header {
    border-bottom: 1px solid var(--dtv-border-default) !important;
}
html .ai-drawer-header h3 {
    color: var(--dtv-text-primary) !important;
}
html .ai-drawer-header p {
    color: var(--dtv-text-secondary) !important;
}
html .close-drawer {
    color: var(--dtv-text-primary) !important;
}
html .ai-drawer-body {
    background: var(--dtv-bg-base) !important;
}
html .ai-drawer-footer {
    border-top: 1px solid var(--dtv-border-default) !important;
    background: var(--dtv-bg-raised) !important;
}
html .ai-drawer-footer input {
    background: var(--dtv-bg-base) !important;
    border: 1px solid var(--dtv-border-default) !important;
    color: var(--dtv-text-primary) !important;
}
html .ai-drawer-footer button {
    background: var(--dtv-orange-500) !important;
    color: #FFFFFF !important;
}
html .msg-ai {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid var(--dtv-border-default) !important;
    color: var(--dtv-text-primary) !important;
}
html .msg-user {
    background: var(--dtv-orange-500) !important;
    color: #FFFFFF !important;
}

/* ========================================================================
   MOBILE PERFORMANCE OVERRIDES
======================================================================== */
@media (max-width: 768px) {
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ========================================================================
   GLOBAL CARD TEXT CONTRAST FIX
======================================================================== */
.feat-card p, .feat-card span,
.dash-card p, .dash-card span,
.glass-panel p, .glass-panel span,
.info-card p, .info-card span,
.step-card p, .step-card span,
.mc p, .mc span,
.sp-card p, .sp-card span,
.career-card p, .career-card span,
.faq-item p, .faq-item span,
.pc p, .pc span,
.fc p, .fc span,
.rvc p, .rvc span {
    color: var(--dtv-text-secondary) !important;
}

.feat-card h2, .feat-card h3, .feat-card h4,
.dash-card h2, .dash-card h3, .dash-card h4,
.glass-panel h2, .glass-panel h3, .glass-panel h4,
.info-card h2, .info-card h3, .info-card h4,
.step-card h2, .step-card h3, .step-card h4,
.mc h2, .mc h3, .mc h4,
.sp-card h2, .sp-card h3, .sp-card h4,
.career-card h2, .career-card h3, .career-card h4,
.faq-item h2, .faq-item h3, .faq-item h4,
.pc h2, .pc h3, .pc h4,
.fc h2, .fc h3, .fc h4,
.rvc h2, .rvc h3, .rvc h4 {
    color: var(--dtv-text-primary) !important;
}

/* ========================================================================
   MODAL & CHAT OVERFLOW FIXES
======================================================================== */
.ov {
  align-items: flex-start !important;
  padding: 2rem 1rem !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.mod-wrap, .mod {
  margin: auto !important;
  max-height: none !important;
}
@media (max-width: 450px) {
  .mod-wrap, .mod {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
  }
}

/* ========================================================================
   ACCESSIBILITY & FOCUS VISIBILITY
======================================================================== */
:focus-visible {
  outline: 2px solid var(--dtv-orange-500) !important;
  outline-offset: 2px !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--dtv-orange-500) !important;
}

/* ========================================================================
   SURGICAL MOBILE-ONLY FIXES (320px - 430px)
   NO LAYOUT BREAKAGE (Nav stays Row, Logo shrinks)
======================================================================== */
@media screen and (max-width: 430px) {
    /* Prevent Horizontal Scroll */
    html, body {
        overflow-x: hidden !important;
        width: 100vw !important;
    }
    
    /* Navigation & Logo */
    .nav-modern {
        padding: 8px 12px !important;
    }
    .logo-modern img {
        width: 32px !important;
        height: 32px !important;
    }
    .logo-text-modern h1 {
        font-size: 1.1rem !important;
        white-space: nowrap !important;
    }
    .logo-text-modern .logo-sub {
        font-size: 0.7rem !important;
    }

    /* Hero Section Sizing */
    .hero-h {
        font-size: 2rem !important;
        line-height: 1.25 !important;
    }
    .hero-sub {
        font-size: 1rem !important;
        padding: 0 5px !important;
    }

    /* Cards & Modals padding reduction */
    .card, .profile-card, .story-card, .mod-wrap {
        padding: 1.2rem !important;
    }

    /* Input accessibility */
    input, select, textarea {
        font-size: 16px !important;
        min-height: 44px !important;
    }
}

/* ========================================================================
   STAR RATING SYSTEM (.sb)
======================================================================== */
.star-r {
    display: flex;
    gap: 6px;
    align-items: center;
}
.sb {
    background: transparent;
    border: none;
    font-size: 2.2rem;
    color: var(--dtv-border-strong);
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    padding: 0;
    line-height: 1;
}
.sb:hover {
    transform: scale(1.15);
}
.sb.lit {
    color: var(--dtv-orange-500);
    text-shadow: 0 0 12px var(--dtv-orange-glow);
}
.sb.hover-lit {
    color: var(--dtv-orange-400);
}

/* ========================================================================
   PREMIUM CARD (Redesigning the flip cards)
======================================================================== */
.PremiumCard {
    background: var(--dtv-bg-raised) !important;
    border: 1px solid var(--dtv-border-default) !important;
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    color: var(--dtv-text-primary);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.PremiumCard::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.05), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.PremiumCard:hover {
    transform: translateY(-5px);
    border-color: var(--dtv-border-strong) !important;
}
.PremiumCard:hover::before {
    opacity: 1;
}
.PremiumCard .icon-wrap {
    font-size: 2.5rem;
    color: var(--dtv-orange-500);
    margin-bottom: 1rem;
}
.PremiumCard h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.PremiumCard p {
    color: var(--dtv-text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ========================================================================
   ORBITAL LAYOUT
======================================================================== */
.orbital-container {
    position: relative;
    width: 600px;
    height: 600px;
    margin: 4rem auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.orbital-center {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--dtv-bg-raised);
    border: 2px solid var(--dtv-border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    position: relative;
}
.orbital-center img {
    width: 80px;
    border-radius: 12px;
}
/* A subtle glowing pulse around the center */
.orbital-center::after {
    content: '';
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    background: var(--dtv-orange-glow);
    z-index: -1;
    animation: orbitalPulse 3s infinite alternate;
}
@keyframes orbitalPulse {
    0% { transform: scale(0.95); opacity: 0.5; }
    100% { transform: scale(1.1); opacity: 1; }
}

.orbital-track {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px dashed var(--dtv-border-default);
    border-radius: 50%;
    animation: orbitalSpin 60s linear infinite;
}
.orbital-container:hover .orbital-track {
    animation-play-state: paused;
}
.orbital-item {
    position: absolute;
    width: 240px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin-left: -120px;
    margin-top: -100px;
}
/* Counter rotation to keep items upright */
.orbital-item > div {
    animation: orbitalSpinReverse 60s linear infinite;
    height: 100%;
}
.orbital-container:hover .orbital-item > div {
    animation-play-state: paused;
}
@keyframes orbitalSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes orbitalSpinReverse {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

@media (max-width: 1024px) {
    .orbital-container {
        width: 100%;
        height: auto;
        border-radius: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin: 2rem 0;
    }
    .orbital-center, .orbital-track {
        display: none;
    }
    .orbital-item {
        position: static;
        width: 100%;
        height: auto;
        margin: 0;
    }
    .orbital-item > div {
        animation: none !important;
    }
}

/* ========================================================================
   DARK THEME COMPREHENSIVE OVERRIDE
   Fixes all hardcoded light-mode values so dark themes work properly
   Uses explicit selectors for maximum browser compatibility
======================================================================== */

/* --- Overlay Backdrops --- */
html[data-theme="dark"] .student-onboard-ov,
html[data-theme="midnight"] .student-onboard-ov,
html[data-theme="navy"] .student-onboard-ov,
html[data-theme="slate"] .student-onboard-ov,
html[data-theme="forest"] .student-onboard-ov,
html[data-theme="crimson"] .student-onboard-ov,
html[data-theme="magenta"] .student-onboard-ov,
html[data-theme="dark"] .modal-overlay,
html[data-theme="midnight"] .modal-overlay,
html[data-theme="navy"] .modal-overlay,
html[data-theme="slate"] .modal-overlay,
html[data-theme="forest"] .modal-overlay,
html[data-theme="crimson"] .modal-overlay,
html[data-theme="magenta"] .modal-overlay,
html[data-theme="dark"] .auth-shell,
html[data-theme="midnight"] .auth-shell,
html[data-theme="navy"] .auth-shell,
html[data-theme="slate"] .auth-shell,
html[data-theme="forest"] .auth-shell,
html[data-theme="crimson"] .auth-shell,
html[data-theme="magenta"] .auth-shell,
html[data-theme="dark"] .wa-redirect-ov,
html[data-theme="midnight"] .wa-redirect-ov,
html[data-theme="navy"] .wa-redirect-ov,
html[data-theme="slate"] .wa-redirect-ov,
html[data-theme="forest"] .wa-redirect-ov,
html[data-theme="crimson"] .wa-redirect-ov,
html[data-theme="magenta"] .wa-redirect-ov {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* --- Nav Dropdown & Account Panel --- */
html[data-theme="dark"] .dropdown-menu,
html[data-theme="midnight"] .dropdown-menu,
html[data-theme="navy"] .dropdown-menu,
html[data-theme="slate"] .dropdown-menu,
html[data-theme="forest"] .dropdown-menu,
html[data-theme="crimson"] .dropdown-menu,
html[data-theme="magenta"] .dropdown-menu,
html[data-theme="dark"] .nav-dropdown .dropdown-menu,
html[data-theme="midnight"] .nav-dropdown .dropdown-menu,
html[data-theme="dark"] .account-panel,
html[data-theme="midnight"] .account-panel,
html[data-theme="navy"] .account-panel,
html[data-theme="slate"] .account-panel,
html[data-theme="forest"] .account-panel,
html[data-theme="crimson"] .account-panel,
html[data-theme="magenta"] .account-panel {
    background: var(--dtv-bg-raised) !important;
    border-color: var(--dtv-border-default) !important;
}
html[data-theme="dark"] .dropdown-menu a,
html[data-theme="midnight"] .dropdown-menu a,
html[data-theme="navy"] .dropdown-menu a,
html[data-theme="slate"] .dropdown-menu a,
html[data-theme="dark"] .account-panel .acc-item,
html[data-theme="midnight"] .account-panel .acc-item,
html[data-theme="navy"] .account-panel .acc-item,
html[data-theme="slate"] .account-panel .acc-item {
    color: var(--dtv-text-secondary) !important;
}

/* --- Hero Section --- */
html[data-theme="dark"] .hero-h,
html[data-theme="midnight"] .hero-h,
html[data-theme="navy"] .hero-h,
html[data-theme="slate"] .hero-h,
html[data-theme="forest"] .hero-h,
html[data-theme="crimson"] .hero-h,
html[data-theme="magenta"] .hero-h,
html[data-theme="dark"] .hero-copy h1,
html[data-theme="midnight"] .hero-copy h1,
html[data-theme="dark"] .hero-copy h2,
html[data-theme="midnight"] .hero-copy h2 {
    color: var(--dtv-text-primary) !important;
}
html[data-theme="dark"] .hero-sub,
html[data-theme="midnight"] .hero-sub,
html[data-theme="navy"] .hero-sub,
html[data-theme="slate"] .hero-sub,
html[data-theme="forest"] .hero-sub,
html[data-theme="crimson"] .hero-sub,
html[data-theme="magenta"] .hero-sub {
    color: var(--dtv-text-secondary) !important;
}
html[data-theme="dark"] .dtv-badge,
html[data-theme="midnight"] .dtv-badge,
html[data-theme="navy"] .dtv-badge,
html[data-theme="slate"] .dtv-badge,
html[data-theme="forest"] .dtv-badge,
html[data-theme="crimson"] .dtv-badge,
html[data-theme="magenta"] .dtv-badge {
    background: var(--dtv-bg-raised) !important;
    border-color: var(--dtv-border-default) !important;
}
html[data-theme="dark"] .dtv-badge span,
html[data-theme="midnight"] .dtv-badge span,
html[data-theme="navy"] .dtv-badge span,
html[data-theme="slate"] .dtv-badge span {
    color: var(--dtv-text-primary) !important;
}
html[data-theme="dark"] .hstats,
html[data-theme="midnight"] .hstats,
html[data-theme="navy"] .hstats,
html[data-theme="slate"] .hstats {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--dtv-border-default) !important;
}
html[data-theme="dark"] .hstat-n,
html[data-theme="midnight"] .hstat-n,
html[data-theme="navy"] .hstat-n,
html[data-theme="slate"] .hstat-n {
    color: var(--dtv-text-primary) !important;
}
html[data-theme="dark"] .hstat-l,
html[data-theme="midnight"] .hstat-l,
html[data-theme="navy"] .hstat-l,
html[data-theme="slate"] .hstat-l {
    color: var(--dtv-text-secondary) !important;
}

/* --- Ticker --- */
html[data-theme="dark"] .ticker,
html[data-theme="midnight"] .ticker,
html[data-theme="navy"] .ticker,
html[data-theme="slate"] .ticker {
    background: var(--dtv-bg-raised) !important;
    border-color: var(--dtv-border-default) !important;
}
html[data-theme="dark"] .ti,
html[data-theme="midnight"] .ti,
html[data-theme="navy"] .ti,
html[data-theme="slate"] .ti {
    color: var(--dtv-text-secondary) !important;
}

/* --- Glass tags & chips --- */
html[data-theme="dark"] .glass-tag,
html[data-theme="midnight"] .glass-tag,
html[data-theme="navy"] .glass-tag,
html[data-theme="slate"] .glass-tag,
html[data-theme="dark"] .chip,
html[data-theme="midnight"] .chip,
html[data-theme="dark"] .tag,
html[data-theme="midnight"] .tag {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--dtv-border-default) !important;
    color: var(--dtv-text-secondary) !important;
}

/* --- Progress Bars --- */
html[data-theme="dark"] .ov-bar-track,
html[data-theme="midnight"] .ov-bar-track,
html[data-theme="navy"] .ov-bar-track,
html[data-theme="slate"] .ov-bar-track,
html[data-theme="dark"] .bar-track,
html[data-theme="midnight"] .bar-track,
html[data-theme="dark"] .progress-track,
html[data-theme="midnight"] .progress-track {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* --- Login page iframe --- */
html[data-theme="dark"] #page-auth,
html[data-theme="midnight"] #page-auth,
html[data-theme="navy"] #page-auth,
html[data-theme="slate"] #page-auth {
    background-color: var(--dtv-bg-base) !important;
}

/* --- Problem page header --- */
html[data-theme="dark"] .prob-page-header,
html[data-theme="midnight"] .prob-page-header,
html[data-theme="navy"] .prob-page-header,
html[data-theme="slate"] .prob-page-header {
    background: rgba(0, 0, 0, 0.85) !important;
    border-bottom-color: var(--dtv-border-default) !important;
}

/* --- AI Drawer --- */
html[data-theme="dark"] .ai-drawer-overlay,
html[data-theme="midnight"] .ai-drawer-overlay,
html[data-theme="navy"] .ai-drawer-overlay,
html[data-theme="slate"] .ai-drawer-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] .ai-drawer-box,
html[data-theme="midnight"] .ai-drawer-box,
html[data-theme="navy"] .ai-drawer-box,
html[data-theme="slate"] .ai-drawer-box {
    background: var(--dtv-bg-raised) !important;
    border-color: var(--dtv-border-default) !important;
}

/* --- Cards (universal dark) --- */
html[data-theme="dark"] .feat-card,
html[data-theme="midnight"] .feat-card,
html[data-theme="navy"] .feat-card,
html[data-theme="slate"] .feat-card,
html[data-theme="forest"] .feat-card,
html[data-theme="crimson"] .feat-card,
html[data-theme="magenta"] .feat-card,
html[data-theme="dark"] .dash-card,
html[data-theme="midnight"] .dash-card,
html[data-theme="dark"] .glass-panel,
html[data-theme="midnight"] .glass-panel,
html[data-theme="dark"] .info-card,
html[data-theme="midnight"] .info-card,
html[data-theme="dark"] .step-card,
html[data-theme="midnight"] .step-card,
html[data-theme="dark"] .career-card,
html[data-theme="midnight"] .career-card,
html[data-theme="dark"] .tool-card,
html[data-theme="midnight"] .tool-card,
html[data-theme="dark"] .sp-card,
html[data-theme="midnight"] .sp-card,
html[data-theme="dark"] .analyzer-card,
html[data-theme="midnight"] .analyzer-card,
html[data-theme="dark"] .road-card,
html[data-theme="midnight"] .road-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="midnight"] .pricing-card {
    background: var(--dtv-bg-raised) !important;
    border-color: var(--dtv-border-default) !important;
    color: var(--dtv-text-primary) !important;
}
html[data-theme="dark"] .feat-card h3,
html[data-theme="midnight"] .feat-card h3,
html[data-theme="dark"] .dash-card h3,
html[data-theme="midnight"] .dash-card h3,
html[data-theme="dark"] .info-card h3,
html[data-theme="midnight"] .info-card h3,
html[data-theme="dark"] .tool-card h3,
html[data-theme="midnight"] .tool-card h3,
html[data-theme="dark"] .career-card h3,
html[data-theme="midnight"] .career-card h3 {
    color: var(--dtv-text-primary) !important;
}
html[data-theme="dark"] .feat-card p,
html[data-theme="midnight"] .feat-card p,
html[data-theme="dark"] .dash-card p,
html[data-theme="midnight"] .dash-card p,
html[data-theme="dark"] .info-card p,
html[data-theme="midnight"] .info-card p,
html[data-theme="dark"] .tool-card p,
html[data-theme="midnight"] .tool-card p,
html[data-theme="dark"] .career-card p,
html[data-theme="midnight"] .career-card p {
    color: var(--dtv-text-secondary) !important;
}

/* --- Reviews / Testimonials --- */
html[data-theme="dark"] .mc,
html[data-theme="midnight"] .mc,
html[data-theme="navy"] .mc,
html[data-theme="slate"] .mc,
html[data-theme="dark"] .testimonial-card,
html[data-theme="midnight"] .testimonial-card,
html[data-theme="dark"] .review-card,
html[data-theme="midnight"] .review-card {
    background: var(--dtv-bg-raised) !important;
    border-color: var(--dtv-border-default) !important;
}
html[data-theme="dark"] .mc *,
html[data-theme="midnight"] .mc *,
html[data-theme="dark"] .testimonial-card *,
html[data-theme="midnight"] .testimonial-card *,
html[data-theme="dark"] .review-card *,
html[data-theme="midnight"] .review-card * {
    color: var(--dtv-text-primary) !important;
}
html[data-theme="dark"] .mc p,
html[data-theme="midnight"] .mc p,
html[data-theme="dark"] .testimonial-card p,
html[data-theme="midnight"] .testimonial-card p,
html[data-theme="dark"] .review-card p,
html[data-theme="midnight"] .review-card p {
    color: var(--dtv-text-secondary) !important;
}

/* --- FAQ Items --- */
html[data-theme="dark"] .faq-item,
html[data-theme="midnight"] .faq-item,
html[data-theme="navy"] .faq-item,
html[data-theme="slate"] .faq-item {
    background: var(--dtv-bg-raised) !important;
    border-color: var(--dtv-border-default) !important;
}
html[data-theme="dark"] .faq-item *,
html[data-theme="midnight"] .faq-item *,
html[data-theme="navy"] .faq-item *,
html[data-theme="slate"] .faq-item * {
    color: var(--dtv-text-primary) !important;
}
html[data-theme="dark"] .faq-item p,
html[data-theme="midnight"] .faq-item p,
html[data-theme="dark"] .faq-ans,
html[data-theme="midnight"] .faq-ans {
    color: var(--dtv-text-secondary) !important;
}

/* --- Pricing Cards --- */
html[data-theme="dark"] .pricing-card div,
html[data-theme="midnight"] .pricing-card div,
html[data-theme="dark"] .pricing-card li,
html[data-theme="midnight"] .pricing-card li,
html[data-theme="dark"] .pricing-card span,
html[data-theme="midnight"] .pricing-card span {
    color: var(--dtv-text-primary) !important;
}
html[data-theme="dark"] .pricing-card:hover,
html[data-theme="midnight"] .pricing-card:hover {
    border-color: var(--dtv-orange-500) !important;
}

/* --- Modal Inputs --- */
html[data-theme="dark"] input,
html[data-theme="midnight"] input,
html[data-theme="navy"] input,
html[data-theme="slate"] input,
html[data-theme="dark"] textarea,
html[data-theme="midnight"] textarea,
html[data-theme="dark"] select,
html[data-theme="midnight"] select {
    background: var(--dtv-bg-overlay) !important;
    color: var(--dtv-text-primary) !important;
    border-color: var(--dtv-border-default) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="midnight"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="midnight"] textarea::placeholder {
    color: var(--dtv-text-tertiary) !important;
}

/* --- Footer --- */
html[data-theme="dark"] .footer-modern,
html[data-theme="midnight"] .footer-modern,
html[data-theme="navy"] .footer-modern,
html[data-theme="slate"] .footer-modern,
html[data-theme="dark"] .footer,
html[data-theme="midnight"] .footer,
html[data-theme="dark"] footer,
html[data-theme="midnight"] footer {
    background: var(--dtv-bg-raised) !important;
    border-top-color: var(--dtv-border-default) !important;
}
html[data-theme="dark"] .footer-link,
html[data-theme="midnight"] .footer-link,
html[data-theme="dark"] .footer-legal-link,
html[data-theme="midnight"] .footer-legal-link,
html[data-theme="dark"] .foot-link,
html[data-theme="midnight"] .foot-link {
    color: var(--dtv-text-secondary) !important;
}

/* --- Mobile Nav --- */
html[data-theme="dark"] .mob,
html[data-theme="midnight"] .mob,
html[data-theme="navy"] .mob,
html[data-theme="slate"] .mob {
    background: var(--dtv-bg-raised) !important;
    border-top-color: var(--dtv-border-default) !important;
}
html[data-theme="dark"] .mob a,
html[data-theme="midnight"] .mob a,
html[data-theme="dark"] .mob button,
html[data-theme="midnight"] .mob button,
html[data-theme="dark"] .mob .btn-reset,
html[data-theme="midnight"] .mob .btn-reset {
    color: var(--dtv-text-primary) !important;
}

/* --- Blog Cards --- */
html[data-theme="dark"] .blog-card,
html[data-theme="midnight"] .blog-card,
html[data-theme="navy"] .blog-card,
html[data-theme="slate"] .blog-card,
html[data-theme="dark"] .story-card,
html[data-theme="midnight"] .story-card,
html[data-theme="navy"] .story-card,
html[data-theme="slate"] .story-card {
    background: var(--dtv-bg-raised) !important;
    border-color: var(--dtv-border-default) !important;
}
html[data-theme="dark"] .blog-card-title,
html[data-theme="midnight"] .blog-card-title,
html[data-theme="dark"] .blog-card h3,
html[data-theme="midnight"] .blog-card h3 {
    color: var(--dtv-text-primary) !important;
}
html[data-theme="dark"] .blog-card-content,
html[data-theme="midnight"] .blog-card-content,
html[data-theme="dark"] .blog-meta,
html[data-theme="midnight"] .blog-meta {
    color: var(--dtv-text-secondary) !important;
}

/* --- Chat Panel --- */
html[data-theme="dark"] .chat-panel,
html[data-theme="midnight"] .chat-panel,
html[data-theme="navy"] .chat-panel,
html[data-theme="slate"] .chat-panel {
    background: var(--dtv-bg-raised) !important;
    border-color: var(--dtv-border-default) !important;
}
html[data-theme="dark"] .cp-name,
html[data-theme="midnight"] .cp-name,
html[data-theme="dark"] .cp-st,
html[data-theme="midnight"] .cp-st,
html[data-theme="dark"] .ai-msg,
html[data-theme="midnight"] .ai-msg {
    color: var(--dtv-text-primary) !important;
}
html[data-theme="dark"] .ai-msg,
html[data-theme="midnight"] .ai-msg {
    background: var(--dtv-bg-overlay) !important;
    border-color: var(--dtv-border-default) !important;
}

/* --- Orbital / Premium Cards --- */
html[data-theme="dark"] .PremiumCard,
html[data-theme="midnight"] .PremiumCard,
html[data-theme="navy"] .PremiumCard,
html[data-theme="slate"] .PremiumCard {
    background: var(--dtv-bg-raised) !important;
    border-color: var(--dtv-border-default) !important;
    color: var(--dtv-text-primary) !important;
}
html[data-theme="dark"] .PremiumCard p,
html[data-theme="midnight"] .PremiumCard p,
html[data-theme="navy"] .PremiumCard p,
html[data-theme="slate"] .PremiumCard p {
    color: var(--dtv-text-secondary) !important;
}

/* --- Section backgrounds for dark themes --- */
html[data-theme="dark"] section#road,
html[data-theme="midnight"] section#road,
html[data-theme="navy"] section#road,
html[data-theme="slate"] section#road,
html[data-theme="dark"] section#latest-blogs,
html[data-theme="midnight"] section#latest-blogs,
html[data-theme="dark"] section#why-dtv,
html[data-theme="midnight"] section#why-dtv,
html[data-theme="dark"] section#rev,
html[data-theme="midnight"] section#rev,
html[data-theme="dark"] section#mkt,
html[data-theme="midnight"] section#mkt,
html[data-theme="dark"] section#stories,
html[data-theme="midnight"] section#stories,
html[data-theme="dark"] section#prob,
html[data-theme="midnight"] section#prob,
html[data-theme="dark"] section#how,
html[data-theme="midnight"] section#how,
html[data-theme="dark"] section#features,
html[data-theme="midnight"] section#features {
    background: var(--dtv-bg-base) !important;
    background-image: none !important;
}