/* ═══════════════════════════════════════════════════════════════════
   LIGHT THEME — Ocean Breeze
   5-Color Palette:
     1. #0EA5E9 — Sky Blue   (primary actions, links)
     2. #6366F1 — Indigo     (headers, active states)
     3. #8B5CF6 — Violet     (gradients, accents)
     4. #F43F5E — Rose       (alerts, highlights)
     5. #14B8A6 — Teal       (success, positive)
   Activates when body does NOT have .dark-mode class
   ═══════════════════════════════════════════════════════════════════ */

body:not(.dark-mode) {
    /* Base colors — warm white */
    --bg-cosmic: #f8f9fc;
    --bg-cosmic-secondary: #f1f3f8;
    --bg-cosmic-tertiary: #e8ecf4;

    /* Glassmorphism — light variant */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-bg-hover: rgba(255, 255, 255, 0.88);
    --glass-bg-solid: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(99, 102, 241, 0.1);
    --glass-border-hover: rgba(99, 102, 241, 0.25);
    --glass-border-focus: rgba(14, 165, 233, 0.5);

    /* Accents — Ocean Breeze 5-color */
    --neon-cyan: #0EA5E9;
    --neon-purple: #6366F1;
    --neon-magenta: #F43F5E;
    --neon-gradient: linear-gradient(135deg, #0EA5E9, #6366F1, #8B5CF6);
    --neon-gradient-reverse: linear-gradient(135deg, #8B5CF6, #6366F1, #0EA5E9);
    --neon-cyan-glow: rgba(14, 165, 233, 0.12);
    --neon-purple-glow: rgba(99, 102, 241, 0.1);
    --neon-magenta-glow: rgba(244, 63, 94, 0.08);

    /* Text */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;

    /* Accent (gold legacy compat) — use Teal for positive */
    --gold: #0EA5E9;
    --gold-glow: rgba(14, 165, 233, 0.12);
    --gold-dark: #6366F1;
    --purple-glow: rgba(139, 92, 246, 0.06);

    /* Shadows */
    --card-shadow: 0 4px 20px rgba(99, 102, 241, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    --card-shadow-hover: 0 12px 40px rgba(99, 102, 241, 0.12), 0 0 20px rgba(14, 165, 233, 0.06);
    --glow-cyan: 0 0 15px rgba(14, 165, 233, 0.12), 0 0 30px rgba(14, 165, 233, 0.04);
    --glow-purple: 0 0 15px rgba(99, 102, 241, 0.12), 0 0 30px rgba(139, 92, 246, 0.04);
}

/* --- Body & App Container --- */
body:not(.dark-mode) {
    background: #f8f9fc;
    color: #1e293b;
}

body:not(.dark-mode) .vedic-chart-app {
    background: #f8f9fc;
    background-image:
        radial-gradient(ellipse at 15% 45%, rgba(14, 165, 233, 0.05) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 25%, rgba(99, 102, 241, 0.04) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 85%, rgba(139, 92, 246, 0.03) 0%, transparent 50%);
    color: #1e293b;
}

/* --- Scrollbar --- */
body:not(.dark-mode) ::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.2);
}
body:not(.dark-mode) ::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.35);
}

/* --- Selection --- */
body:not(.dark-mode) ::selection {
    background: rgba(14, 165, 233, 0.2);
    color: #1e293b;
}

/* --- Header --- */
body:not(.dark-mode) .vedic-header {
    background: rgba(248, 249, 252, 0.88);
    border-bottom: 1px solid rgba(99, 102, 241, 0.08);
}

body:not(.dark-mode) .vedic-brand-badge {
    color: #6366F1;
    border-color: rgba(99, 102, 241, 0.25);
    background: rgba(99, 102, 241, 0.06);
}

body:not(.dark-mode) .vedic-header h1 {
    background: linear-gradient(135deg, #0EA5E9, #6366F1, #8B5CF6);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Cards --- */
body:not(.dark-mode) .vedic-card {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(99, 102, 241, 0.08);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.06);
}
body:not(.dark-mode) .vedic-card::before {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(99, 102, 241, 0.04), rgba(139, 92, 246, 0.04), transparent);
}
body:not(.dark-mode) .vedic-card:hover {
    border-color: rgba(14, 165, 233, 0.18);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.1);
}

/* --- Form Controls --- */
body:not(.dark-mode) .form-control {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(99, 102, 241, 0.12);
    color: #1e293b;
}
body:not(.dark-mode) .form-control:focus {
    border-color: #0EA5E9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12), 0 0 15px rgba(14, 165, 233, 0.06);
    background: #fff;
}
body:not(.dark-mode) .form-control::placeholder {
    color: #94a3b8;
}

/* --- Primary Buttons --- */
body:not(.dark-mode) .btn-detect {
    background: rgba(14, 165, 233, 0.06);
    border-color: rgba(14, 165, 233, 0.2);
    color: #0EA5E9;
}
body:not(.dark-mode) .btn-detect:hover {
    background: rgba(14, 165, 233, 0.12);
    border-color: #0EA5E9;
}
body:not(.dark-mode) .btn-submit {
    background: linear-gradient(135deg, #0EA5E9, #6366F1);
    color: #fff;
}
body:not(.dark-mode) .btn-submit:hover {
    box-shadow: 0 8px 30px rgba(14, 165, 233, 0.3), 0 0 40px rgba(99, 102, 241, 0.12);
}

/* --- Demo Button --- */
body:not(.dark-mode) .btn-demo {
    background: rgba(139, 92, 246, 0.04) !important;
    border-color: rgba(139, 92, 246, 0.2) !important;
    color: #8B5CF6 !important;
}

/* --- Chart Section --- */
body:not(.dark-mode) .chart-section-header {
    background: rgba(14, 165, 233, 0.04);
    border-bottom-color: rgba(99, 102, 241, 0.08);
}
body:not(.dark-mode) .chart-section-title {
    color: #6366F1;
}
body:not(.dark-mode) .btn-toggle-chart {
    background: rgba(14, 165, 233, 0.06);
    color: #0EA5E9;
    border-color: rgba(14, 165, 233, 0.2);
}

/* --- Tab Navigation --- */
body:not(.dark-mode) .vedic-tab-nav {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(99, 102, 241, 0.06);
}
body:not(.dark-mode) .vedic-tab-btn {
    background: rgba(99, 102, 241, 0.03);
    border-color: rgba(99, 102, 241, 0.08);
    color: #64748b;
}
body:not(.dark-mode) .vedic-tab-btn:hover {
    background: rgba(14, 165, 233, 0.06);
    color: #0EA5E9;
    border-color: rgba(14, 165, 233, 0.18);
}
body:not(.dark-mode) .vedic-tab-btn.active {
    background: linear-gradient(135deg, #0EA5E9, #6366F1) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3) !important;
}

/* --- Tables --- */
body:not(.dark-mode) .vedic-table thead th {
    background: rgba(99, 102, 241, 0.05);
    color: #6366F1;
    border-bottom-color: rgba(99, 102, 241, 0.12);
}
body:not(.dark-mode) .vedic-table tbody tr {
    border-bottom-color: rgba(99, 102, 241, 0.04);
}
body:not(.dark-mode) .vedic-table tbody tr:hover {
    background: rgba(14, 165, 233, 0.03);
}

/* --- Export Bar --- */
body:not(.dark-mode) .btn-export {
    background: rgba(99, 102, 241, 0.04);
    border-color: rgba(99, 102, 241, 0.1);
    color: #64748b;
}
body:not(.dark-mode) .btn-export:hover {
    background: rgba(14, 165, 233, 0.08);
    color: #0EA5E9;
    border-color: rgba(14, 165, 233, 0.2);
}

/* --- TTS Bar --- */
body:not(.dark-mode) .gtts-bar {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(99, 102, 241, 0.1) !important;
}
body:not(.dark-mode) .gtts-play-btn {
    background: linear-gradient(135deg, #0EA5E9, #6366F1) !important;
    color: #fff !important;
}
body:not(.dark-mode) .gtts-lang-btn,
body:not(.dark-mode) .gtts-voice-btn {
    background: rgba(99, 102, 241, 0.04) !important;
    color: #64748b !important;
    border-color: rgba(99, 102, 241, 0.1) !important;
}
body:not(.dark-mode) .gtts-lang-btn.active,
body:not(.dark-mode) .gtts-voice-btn.active {
    background: linear-gradient(135deg, #6366F1, #8B5CF6) !important;
    color: #fff !important;
}
body:not(.dark-mode) .gtts-translate-btn {
    background: linear-gradient(135deg, #14B8A6, #0EA5E9) !important;
    color: #fff !important;
}

/* --- Login Overlay --- */
body:not(.dark-mode) #login-overlay {
    background: linear-gradient(135deg, #f0f4ff 0%, #f8f9fc 50%, #eef2ff 100%) !important;
}
body:not(.dark-mode) .login-card {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(99, 102, 241, 0.1) !important;
    box-shadow: 0 20px 60px rgba(99, 102, 241, 0.1) !important;
}
body:not(.dark-mode) .login-card h2 {
    color: #1e293b !important;
}
body:not(.dark-mode) .auth-tab {
    background: rgba(99, 102, 241, 0.04) !important;
    color: #64748b !important;
}
body:not(.dark-mode) .auth-tab.active {
    background: linear-gradient(135deg, #0EA5E9, #6366F1) !important;
    color: #fff !important;
}
body:not(.dark-mode) .login-input {
    background: rgba(99, 102, 241, 0.03) !important;
    border-color: rgba(99, 102, 241, 0.12) !important;
    color: #1e293b !important;
}
body:not(.dark-mode) .login-submit {
    background: linear-gradient(135deg, #0EA5E9, #6366F1) !important;
}

/* --- Feature Banner --- */
body:not(.dark-mode) .vedic-feature-banner {
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(99, 102, 241, 0.1) !important;
}
body:not(.dark-mode) .feature-badge {
    background: linear-gradient(135deg, #0EA5E9, #6366F1) !important;
}
body:not(.dark-mode) .vedic-feature-banner h2 {
    color: #1e293b !important;
}

/* --- Admin Bar --- */
body:not(.dark-mode) .admin-bar {
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(99, 102, 241, 0.08) !important;
}
body:not(.dark-mode) .admin-bar button {
    color: #64748b !important;
}
body:not(.dark-mode) .admin-bar button:hover {
    background: rgba(14, 165, 233, 0.06) !important;
    color: #0EA5E9 !important;
}

/* --- Theme Toggle --- */
body:not(.dark-mode) .theme-toggle {
    background: rgba(14, 165, 233, 0.06) !important;
    color: #0EA5E9 !important;
    border-color: rgba(14, 165, 233, 0.15) !important;
}

/* --- Yoga Cards --- */
body:not(.dark-mode) .yoga-card {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(99, 102, 241, 0.08) !important;
}

/* --- Dasha Section --- */
body:not(.dark-mode) .dasha-maha-card {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(99, 102, 241, 0.08) !important;
}
body:not(.dark-mode) .dasha-current-card {
    background: rgba(255, 255, 255, 0.72) !important;
}
body:not(.dark-mode) .sub-timeline-item {
    background: rgba(255, 255, 255, 0.55) !important;
    border-color: rgba(99, 102, 241, 0.06) !important;
}

/* --- Copy Button --- */
body:not(.dark-mode) .admin-tab-copy-btn {
    background: rgba(99, 102, 241, 0.04) !important;
    color: #64748b !important;
    border-color: rgba(99, 102, 241, 0.1) !important;
}

/* --- Drishti --- */
body:not(.dark-mode) .drishti-planet-btn {
    background: rgba(99, 102, 241, 0.04) !important;
    border-color: rgba(99, 102, 241, 0.1) !important;
    color: #64748b !important;
}
body:not(.dark-mode) .drishti-planet-btn.active {
    background: linear-gradient(135deg, #6366F1, #8B5CF6) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25) !important;
}
body:not(.dark-mode) .rasi-sign-btn {
    background: rgba(99, 102, 241, 0.03) !important;
    border-color: rgba(99, 102, 241, 0.08) !important;
    color: #64748b !important;
}

/* --- KP Buttons --- */
body:not(.dark-mode) .kp-planet-btn,
body:not(.dark-mode) .kp-house-btn {
    background: rgba(99, 102, 241, 0.04) !important;
    border-color: rgba(99, 102, 241, 0.1) !important;
    color: #64748b !important;
}
body:not(.dark-mode) .kp-planet-btn.kp-active,
body:not(.dark-mode) .kp-house-btn.kp-active {
    background: linear-gradient(135deg, #6366F1, #8B5CF6) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25) !important;
}

/* --- Medical Filter Buttons --- */
body:not(.dark-mode) .med-filter-btn {
    background: rgba(20, 184, 166, 0.04) !important;
    color: #64748b !important;
    border-color: rgba(20, 184, 166, 0.12) !important;
}
body:not(.dark-mode) .med-filter-btn.active {
    background: linear-gradient(135deg, #14B8A6, #0EA5E9) !important;
    color: #fff !important;
}

/* --- Vastu Filter --- */
body:not(.dark-mode) .vastu-filter-btn {
    background: rgba(99, 102, 241, 0.04) !important;
    color: #64748b;
    border-color: rgba(99, 102, 241, 0.1);
}
body:not(.dark-mode) .vastu-filter-active {
    background: linear-gradient(135deg, #0EA5E9, #6366F1) !important;
    color: #fff !important;
}

/* --- Remedy Tabs --- */
body:not(.dark-mode) .remedy-filter-btn {
    background: rgba(139, 92, 246, 0.04) !important;
    color: #64748b !important;
}
body:not(.dark-mode) .remedy-filter-btn.active {
    background: linear-gradient(135deg, #8B5CF6, #6366F1) !important;
    color: #fff !important;
}

/* --- Ashtakavarga --- */
body:not(.dark-mode) .av-hero-card,
body:not(.dark-mode) .av-dash-section {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(99, 102, 241, 0.08) !important;
}
body:not(.dark-mode) .av-ps-card {
    background: rgba(255, 255, 255, 0.65) !important;
}
body:not(.dark-mode) .av-bar-track {
    background: rgba(99, 102, 241, 0.04) !important;
}
body:not(.dark-mode) .av-red-tab {
    background: rgba(99, 102, 241, 0.04) !important;
    color: #64748b !important;
    border-color: rgba(99, 102, 241, 0.1) !important;
}
body:not(.dark-mode) .av-red-tab.active {
    background: linear-gradient(135deg, #0EA5E9, #6366F1) !important;
    color: #fff !important;
}
body:not(.dark-mode) .av-interp-card {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(99, 102, 241, 0.08) !important;
}
body:not(.dark-mode) .av-interp-head {
    background: rgba(99, 102, 241, 0.03) !important;
}

/* --- Karma / Past Life --- */
body:not(.dark-mode) .karma-axis-visual {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%);
}
body:not(.dark-mode) .karma-section {
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(99, 102, 241, 0.08) !important;
}
body:not(.dark-mode) .karma-stat-card {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(99, 102, 241, 0.08) !important;
}
body:not(.dark-mode) .karma-section-header {
    color: #6366F1 !important;
    border-bottom-color: rgba(99, 102, 241, 0.1) !important;
}

/* --- Vastu Section --- */
body:not(.dark-mode) .vastu-section {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(14, 165, 233, 0.12) !important;
}
body:not(.dark-mode) .vastu-element-card,
body:not(.dark-mode) .vastu-zone-card,
body:not(.dark-mode) .vastu-remedy-planet-card,
body:not(.dark-mode) .vastu-timing-card,
body:not(.dark-mode) .vastu-tip-card,
body:not(.dark-mode) .vastu-budget-card {
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(99, 102, 241, 0.06) !important;
}

/* --- Medical Section --- */
body:not(.dark-mode) .med-section {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(20, 184, 166, 0.12) !important;
}

/* --- Footer --- */
body:not(.dark-mode) .vedic-footer {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
}

/* --- Transit Calendar --- */
body:not(.dark-mode) .tc-nav-btn {
    background: rgba(99, 102, 241, 0.04) !important;
    color: #64748b !important;
    border-color: rgba(99, 102, 241, 0.1) !important;
}
body:not(.dark-mode) .tc-today-active-btn {
    background: linear-gradient(135deg, #0EA5E9, #6366F1) !important;
    color: #fff !important;
}
body:not(.dark-mode) .tc-filter-btn {
    background: rgba(99, 102, 241, 0.04) !important;
    color: #64748b !important;
}
body:not(.dark-mode) .tc-filter-btn.active {
    background: linear-gradient(135deg, #0EA5E9, #6366F1) !important;
    color: #fff !important;
}

/* --- AI Chat Panel --- */
body:not(.dark-mode) .ai-panel,
body:not(.dark-mode) #ai-chat-panel {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(99, 102, 241, 0.12) !important;
}
body:not(.dark-mode) .ai-fab {
    background: linear-gradient(135deg, #0EA5E9, #6366F1) !important;
}
body:not(.dark-mode) .ai-toolbar-tab {
    background: rgba(99, 102, 241, 0.04) !important;
    color: #64748b !important;
}
body:not(.dark-mode) .ai-toolbar-tab.active {
    background: linear-gradient(135deg, #6366F1, #8B5CF6) !important;
    color: #fff !important;
}
body:not(.dark-mode) #ai-chat-fab {
    background: linear-gradient(135deg, #0EA5E9, #6366F1) !important;
}

/* --- Nakshatra Card --- */
body:not(.dark-mode) .nak-card {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(99, 102, 241, 0.08) !important;
}

/* --- Risk Reward --- */
body:not(.dark-mode) .risk-card {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(99, 102, 241, 0.08) !important;
}

/* --- Sade Sati --- */
body:not(.dark-mode) .sade-sati-card {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(244, 63, 94, 0.08) !important;
}

/* --- BNN Wealth --- */
body:not(.dark-mode) .bnn-card,
body:not(.dark-mode) .bnn-section {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(99, 102, 241, 0.08) !important;
}

/* --- Indu Lagna Card --- */
body:not(.dark-mode) .av-indu-card {
    background: linear-gradient(135deg, rgba(14,165,233,0.06), rgba(99,102,241,0.04)) !important;
    border-color: rgba(14,165,233,0.18) !important;
}

/* --- Life Panel --- */
body:not(.dark-mode) .av-life-panel {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(99, 102, 241, 0.08) !important;
}
body:not(.dark-mode) .av-life-bar-track,
body:not(.dark-mode) .av-pinda-bar-track {
    background: rgba(99, 102, 241, 0.06) !important;
}

/* --- House Cards --- */
body:not(.dark-mode) .av-hc-strong {
    background: rgba(20, 184, 166, 0.08) !important;
    border-color: rgba(20, 184, 166, 0.2) !important;
}
body:not(.dark-mode) .av-hc-ok {
    background: rgba(14, 165, 233, 0.06) !important;
    border-color: rgba(14, 165, 233, 0.15) !important;
}
body:not(.dark-mode) .av-hc-weak {
    background: rgba(244, 63, 94, 0.06) !important;
    border-color: rgba(244, 63, 94, 0.15) !important;
}

/* --- Dasha Cards in Ashtakavarga --- */
body:not(.dark-mode) .av-dasha-card {
    background: rgba(255, 255, 255, 0.72) !important;
}
body:not(.dark-mode) .av-transit-card {
    background: rgba(255, 255, 255, 0.65) !important;
}

/* --- Findings --- */
body:not(.dark-mode) .av-findings {
    background: linear-gradient(135deg, rgba(14,165,233,0.05), rgba(99,102,241,0.03)) !important;
}
body:not(.dark-mode) .av-finding-item {
    background: rgba(255, 255, 255, 0.65) !important;
}

/* --- Pinda Cards --- */
body:not(.dark-mode) .av-pinda-card {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(99, 102, 241, 0.08) !important;
}

/* --- Timing Summary --- */
body:not(.dark-mode) .av-timing-summary {
    background: rgba(255, 255, 255, 0.65) !important;
}

/* --- Karma Controllers --- */
body:not(.dark-mode) .karma-ctrl-card {
    border-color: rgba(99, 102, 241, 0.08) !important;
}
body:not(.dark-mode) .karma-ctrl-body {
    background: rgba(255, 255, 255, 0.72);
}
body:not(.dark-mode) .karma-kd-card,
body:not(.dark-mode) .karma-store-item,
body:not(.dark-mode) .karma-sum-item,
body:not(.dark-mode) .karma-retro-card {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(99, 102, 241, 0.08) !important;
}
body:not(.dark-mode) .karma-trinal-house {
    background: #fff !important;
    border-color: rgba(99, 102, 241, 0.1) !important;
}

/* --- Muhurat / Rashifal --- */
body:not(.dark-mode) .muhurat-card {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(99, 102, 241, 0.08) !important;
}

/* --- Milan --- */
body:not(.dark-mode) .milan-card {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(99, 102, 241, 0.08) !important;
}

/* --- Saved Charts Modal --- */
body:not(.dark-mode) .saved-charts-panel {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(99, 102, 241, 0.12) !important;
}

/* --- Transit Nav --- */
body:not(.dark-mode) .transit-nav-btn {
    background: rgba(99, 102, 241, 0.04) !important;
    color: #64748b !important;
    border-color: rgba(99, 102, 241, 0.1) !important;
}
body:not(.dark-mode) .transit-today-btn {
    background: linear-gradient(135deg, #0EA5E9, #6366F1) !important;
    color: #fff !important;
}

/* --- Rashifal Nav --- */
body:not(.dark-mode) .rr-nav-arrow {
    background: rgba(99, 102, 241, 0.04) !important;
    color: #64748b !important;
}

/* --- Heatmap --- */
body:not(.dark-mode) .av-heatmap th {
    color: #64748b;
}

/* --- Accordion Toggle --- */
body:not(.dark-mode) .tab-accordion-toggle {
    background: rgba(255, 255, 255, 0.65) !important;
    color: #6366F1 !important;
    border-color: rgba(99, 102, 241, 0.12) !important;
}

/* --- Section Headers use Palette --- */
body:not(.dark-mode) .av-section-header h4 {
    color: #0EA5E9 !important;
}
body:not(.dark-mode) .vastu-section-title {
    color: #6366F1 !important;
}
body:not(.dark-mode) .med-section-title {
    color: #14B8A6 !important;
}

/* --- Dasha toggle all btn --- */
body:not(.dark-mode) .dasha-toggle-all-btn {
    background: rgba(14, 165, 233, 0.06) !important;
    color: #0EA5E9 !important;
    border-color: rgba(14, 165, 233, 0.2) !important;
}

/* --- Map Picker --- */
body:not(.dark-mode) .map-picker-title {
    color: #6366F1 !important;
}

/* --- Status Colors mapped to palette --- */
body:not(.dark-mode) .av-hero-total .av-hero-val { color: #0EA5E9 !important; }
body:not(.dark-mode) .av-hero-strong .av-hero-val { color: #14B8A6 !important; }
body:not(.dark-mode) .av-hero-weak .av-hero-val { color: #F43F5E !important; }
body:not(.dark-mode) .av-hero-vittaya .av-hero-val { color: #6366F1 !important; }
body:not(.dark-mode) .av-hero-indu .av-hero-val { color: #8B5CF6 !important; }

/* --- AI Chat Light Theme Overrides --- */
body:not(.dark-mode) {
    --ai-bg-deep: #f8f9fc;
    --ai-bg-glass: rgba(255, 255, 255, 0.88);
    --ai-bg-glass-dense: rgba(255, 255, 255, 0.94);
    --ai-bg-card: rgba(255, 255, 255, 0.72);
    --ai-bg-elevated: rgba(255, 255, 255, 0.82);
    --ai-border-glass: rgba(99, 102, 241, 0.08);
    --ai-border-glow: rgba(14, 165, 233, 0.2);
    --ai-accent-cyan: #0EA5E9;
    --ai-accent-purple: #6366F1;
    --ai-accent-magenta: #F43F5E;
    --ai-gradient-accent: linear-gradient(135deg, #0EA5E9, #6366F1, #8B5CF6);
    --ai-gradient-accent-h: linear-gradient(90deg, #0EA5E9, #6366F1, #8B5CF6);
    --ai-gradient-subtle: linear-gradient(135deg, rgba(14,165,233,0.08), rgba(99,102,241,0.08), rgba(139,92,246,0.06));
    --ai-text-primary: #1e293b;
    --ai-text-secondary: #64748b;
    --ai-text-muted: #94a3b8;
    --ai-shadow-glow-cyan: 0 0 15px rgba(14, 165, 233, 0.15);
    --ai-shadow-glow-purple: 0 0 15px rgba(99, 102, 241, 0.15);
    --ai-shadow-glow-magenta: 0 0 15px rgba(244, 63, 94, 0.12);
    --ai-shadow-panel: 0 8px 40px rgba(99, 102, 241, 0.08), 0 0 40px rgba(14, 165, 233, 0.04);
}

body:not(.dark-mode) #ai-chat-panel {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(99, 102, 241, 0.12) !important;
    box-shadow: 0 8px 40px rgba(99, 102, 241, 0.08) !important;
}
body:not(.dark-mode) .ai-chat-messages {
    background: rgba(248, 249, 252, 0.5) !important;
}
body:not(.dark-mode) .ai-msg-user {
    background: linear-gradient(135deg, #0EA5E9, #6366F1) !important;
    color: #fff !important;
}
body:not(.dark-mode) .ai-msg-bot {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(99, 102, 241, 0.08) !important;
    color: #1e293b !important;
}
body:not(.dark-mode) .ai-chat-input-area {
    background: rgba(255, 255, 255, 0.92) !important;
    border-top-color: rgba(99, 102, 241, 0.08) !important;
}
body:not(.dark-mode) .ai-chat-input-area textarea,
body:not(.dark-mode) .ai-chat-input-area input {
    background: rgba(99, 102, 241, 0.03) !important;
    color: #1e293b !important;
    border-color: rgba(99, 102, 241, 0.1) !important;
}
body:not(.dark-mode) .ai-highlight-btn {
    background: rgba(99, 102, 241, 0.04) !important;
    color: #64748b !important;
    border-color: rgba(99, 102, 241, 0.1) !important;
}
body:not(.dark-mode) .ai-lang-btn,
body:not(.dark-mode) .ai-voice-btn {
    background: rgba(99, 102, 241, 0.04) !important;
    color: #64748b !important;
}
body:not(.dark-mode) .ai-lang-btn.active,
body:not(.dark-mode) .ai-voice-btn.active {
    background: linear-gradient(135deg, #6366F1, #8B5CF6) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   BIRTH CHART (KUNDALI) — Ocean Breeze Colors (no black/gray)
   Same format, just swap blacks/grays → deep indigo/blue
   ═══════════════════════════════════════════════════════════════ */

/* Chart wrapper — light green */
body:not(.dark-mode) .svg-chart-wrapper {
    background: rgba(187, 247, 208, 0.5) !important;
    border-color: rgba(34, 197, 94, 0.25) !important;
    box-shadow: 0 4px 24px rgba(34, 197, 94, 0.1) !important;
}

/* House fills — light green tinted */
body:not(.dark-mode) .svg-house {
    fill: rgba(187, 247, 208, 0.6) !important;
    stroke: rgba(34, 197, 94, 0.3) !important;
}
body:not(.dark-mode) .svg-house:hover {
    fill: rgba(229, 231, 235, 0.6) !important;
    stroke: #9ca3af !important;
}
body:not(.dark-mode) .svg-house.active {
    fill: rgba(209, 213, 219, 0.5) !important;
    stroke: #9ca3af !important;
}

/* Border and diagonal lines — green */
body:not(.dark-mode) .svg-border-line {
    stroke: rgba(34, 197, 94, 0.4) !important;
}
body:not(.dark-mode) .svg-diagonal-line {
    stroke: rgba(34, 197, 94, 0.15) !important;
}

/* SVG background rect */
body:not(.dark-mode) #kundli-svg rect {
    fill: rgba(240, 253, 244, 0.9) !important;
    stroke: rgba(34, 197, 94, 0.2) !important;
}
body:not(.dark-mode) #kundli-svg line,
body:not(.dark-mode) #kundli-svg path {
    stroke: rgba(34, 197, 94, 0.3) !important;
}

/* Rashi numbers — dark green */
body:not(.dark-mode) .svg-rashi-text {
    fill: #16a34a !important;
}

/* Planet text — dark for readability */
body:not(.dark-mode) .svg-planets-text {
    fill: #1e293b !important;
}

/* Divisional charts (Navamsa, Dashamsha) */
body:not(.dark-mode) #navamsa-svg rect,
body:not(.dark-mode) #dashamsha-svg rect {
    fill: rgba(240, 253, 244, 0.9) !important;
    stroke: rgba(34, 197, 94, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════════
   END LIGHT THEME — Ocean Breeze
   ═══════════════════════════════════════════════════════════════ */