html, body {
            margin: 0; padding: 0;
            width: 100%; min-height: 100vh;
            background-color: #030712;
            touch-action: manipulation;
        }
        html { overflow-x: hidden; }

        body {
            font-family: 'Space Grotesk', 'Noto Sans Telugu', 'Noto Sans Devanagari', sans-serif;
            background: radial-gradient(ellipse at top, #0f172a 0%, #030712 70%, #000000 100%);
            display: flex; flex-direction: column;
            align-items: center; justify-content: flex-start;
            box-sizing: border-box;
            color: #f8fafc;
        }

        body::before {
            content: ""; position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: -1; pointer-events: none;
            background-image: 
                radial-gradient(1px 1px at 20px 30px, #ffffff 100%, transparent),
                radial-gradient(1.5px 1.5px at 100px 150px, #7dd3fc 100%, transparent),
                radial-gradient(2px 2px at 250px 350px, #fef08a 100%, transparent),
                radial-gradient(1px 1px at 400px 100px, #ffffff 100%, transparent),
                radial-gradient(2.5px 2.5px at 550px 480px, #a855f7 100%, transparent),
                radial-gradient(1.5px 1.5px at 700px 200px, #38bdf8 100%, transparent);
            background-size: 650px 650px; 
            opacity: 0.65;
            animation: starTwinkle 8s ease-in-out infinite alternate;
        }

        @keyframes starTwinkle {
            0% { opacity: 0.4; transform: scale(0.99); }
            100% { opacity: 0.8; transform: scale(1.01); }
        }
        
        .chart-viewport-container {
            width: 100%; max-width: 820px; aspect-ratio: 1.15 / 1;
            display: flex; align-items: center; justify-content: center;
            padding: 4px; box-sizing: border-box; margin-top: -4px;
        }
        /* On phones let the wheel run edge to edge instead of inside card padding — matches dashboard.html */
        @media (max-width: 640px) {
            .chart-viewport-container {
                width: 100vw;
                margin-left: calc(50% - 50vw);
                margin-right: calc(50% - 50vw);
                max-width: none;
            }
        }

        #chart {
            width: 100%; height: 100%;
            user-select: none;
            -webkit-user-select: none; overflow: visible; 
        }

        .interactive-planet { cursor: pointer; -webkit-tap-highlight-color: transparent; }
        .interactive-planet:hover { filter: brightness(1.4) drop-shadow(0 0 8px #38bdf8); }

        @keyframes sun-shimmer {
            0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.88; }
            50% { transform: scale(1.12) rotate(15deg); opacity: 1; filter: drop-shadow(0 0 15px #ffffff); }
        }
        .sun-ray-matrix { animation: sun-shimmer 4s ease-in-out infinite; transform-origin: 0px 0px; }

        @keyframes intense-white-glow {
            0%, 100% { filter: drop-shadow(0 0 8px #ffffff) drop-shadow(0 0 20px #fff7ed) opacity(0.95); }
            50% { filter: drop-shadow(0 0 16px #ffffff) drop-shadow(0 0 35px #ffedd5) opacity(1); }
        }
        .glow-sun-white { animation: intense-white-glow 2s ease-in-out infinite; }
        
        @keyframes rahu-pulse {
            0%, 100% { filter: drop-shadow(0 0 4px #ff0055); }
            50% { filter: drop-shadow(0 0 14px #ff0055); }
        }
        .glow-rahu { animation: rahu-pulse 3s ease-in-out infinite; }

        @keyframes spin-earth { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .rotating-earth { animation: spin-earth 30s linear infinite; }

        .neon-text-cyan { color: #e0f7fa; text-shadow: 0 0 6px #06b6d4, 0 0 14px #06b6d4; }
        .neon-text-amber { color: #fffdeb; text-shadow: 0 0 6px #fbbf24, 0 0 14px #fbbf24; }
        .neon-text-emerald { color: #ecfdf5; text-shadow: 0 0 6px #34d399, 0 0 14px #10b981; }

        .hud-text { font-size: 12px; font-weight: 800; fill: #ffffff; font-family: inherit; }
        @media (max-width: 768px) { .hud-text { font-size: 14px; } }
        .aspect-laser { opacity: 0.95; stroke-width: 3; stroke-linecap: round; pointer-events: none; }

        .av-badge rect { fill: #c2410c; rx: 8px; ry: 8px; }
        .av-badge text { fill: #ffffff; font-size: 10px; font-weight: 900; text-anchor: middle; dominant-baseline: central; }
        .outer-house-num { font-size: 12px; fill: #a5f3fc; font-weight: 900; }

        .glass-panel {
            background: rgba(15, 23, 42, 0.75);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(56, 189, 248, 0.25);
            box-shadow: 0 0 25px rgba(14, 165, 233, 0.15);
        }

        /* ══ LIGHT THEME ══════════════════════════════════════════════════ */
        body.light {
            background: linear-gradient(155deg, #e9e4d6 0%, #ddd5c2 60%, #d0c8b0 100%);
            background-color: #ddd5c2; color: #22180a;
        }
        body.light::before { display: none; }

        body.light .glass-panel {
            background: #f4ede0; border: 1px solid #6b5232;
            box-shadow: 0 2px 5px rgba(20,12,0,.38), 0 16px 36px rgba(20,12,0,.28);
        }

        /* ALL text colour classes ---------------------------------------- */
        body.light .text-slate-100, body.light .text-slate-200,
        body.light .text-white      { color: #22180a !important; }
        body.light .text-slate-300  { color: #3e2e18 !important; }
        body.light .text-slate-400  { color: #5a4228 !important; }
        body.light .text-slate-500, body.light .text-slate-600 { color: #7a6040 !important; }
        body.light .text-slate-950  { color: #22180a !important; }

        body.light .text-sky-200, body.light .text-sky-300,
        body.light .text-sky-400    { color: #0d4f70 !important; }
        body.light .text-cyan-300, body.light .text-cyan-400 { color: #085566 !important; }
        body.light .text-amber-200, body.light .text-amber-300 { color: #7a3f04 !important; }
        body.light .text-emerald-200, body.light .text-emerald-300,
        body.light .text-emerald-400{ color: #134f32 !important; }
        body.light .text-violet-200, body.light .text-violet-300 { color: #4a1d96 !important; }
        body.light .text-rose-200, body.light .text-rose-300,
        body.light .text-rose-400   { color: #8b0a34 !important; }
        body.light .text-pink-300   { color: #861244 !important; }

        /* Neon headings → dark ink */
        body.light .neon-text-cyan    { color: #085566 !important; text-shadow: 0 2px 4px rgba(0,0,0,.40); }
        body.light .neon-text-amber   { color: #7a3f04 !important; text-shadow: 0 2px 4px rgba(0,0,0,.35); }
        body.light .neon-text-emerald { color: #134f32 !important; text-shadow: 0 2px 4px rgba(0,0,0,.35); }

        /* Inputs */
        body.light input, body.light select {
            background: #fffcf4 !important; border-color: #6b5232 !important; color: #22180a !important;
        }
        body.light input::placeholder { color: #9a8060 !important; }

        /* Backgrounds */
        body.light .bg-slate-900\/40, body.light .bg-slate-900\/60,
        body.light .bg-slate-900\/80, body.light .bg-slate-900\/90,
        body.light .bg-slate-900,
        body.light .bg-slate-950\/60, body.light .bg-slate-950\/80,
        body.light .bg-slate-950\/90, body.light .bg-slate-950,
        body.light .bg-slate-800, body.light .bg-slate-800\/80  { background: #ede4d0 !important; }
        body.light .bg-rose-950\/40, body.light .bg-rose-950\/80 { background: #f5dada !important; }
        body.light .bg-emerald-950\/80, body.light .bg-emerald-500\/20 { background: #d8eddf !important; }
        body.light .bg-violet-950\/40, body.light .bg-violet-500\/20 { background: #e8daf5 !important; }

        /* ── YOGA cards: JS builds the class strings, so we target them here.
             Dark backgrounds → light tinted equivalents with dark text. ── */
        body.light .bg-amber-950\/40   { background: #fdf2d8 !important; }
        body.light .bg-sky-950\/40     { background: #daeef8 !important; }
        body.light .bg-violet-950\/40  { background: #ece4f5 !important; }
        body.light .bg-rose-950\/40    { background: #f9e0e4 !important; }
        body.light .bg-amber-500\/20   { background: #fcebc8 !important; }
        body.light .bg-sky-500\/20     { background: #d0eaf8 !important; }

        /* Yoga card text — the card has e.g. text-amber-200 which is already
           overridden above, so this is covered by the text-* rules above. */

        /* ── DIGNITY/RETROGRADE badges: dark badge bgs → legible tints. ── */
        body.light .bg-amber-950\/80   { background: #fce8b0 !important; }
        body.light .bg-rose-950\/80    { background: #fcd8dc !important; }
        body.light .bg-sky-950\/80     { background: #cce8f8 !important; }

        /* Borders */
        body.light .border-slate-700\/80, body.light .border-slate-700,
        body.light .border-slate-800, body.light .border-slate-800\/80  { border-color: #8a6a40 !important; }
        body.light .border-sky-500\/50, body.light .border-sky-500\/40,
        body.light .border-sky-400   { border-color: #6b5232 !important; }
        body.light .border-rose-500\/40   { border-color: #b07070 !important; }
        body.light .border-emerald-500\/40{ border-color: #70a880 !important; }
        body.light .border-violet-500\/50 { border-color: #9070c0 !important; }
        body.light .border-amber-500\/40, body.light .border-amber-500\/50 { border-color: #c09030 !important; }

        /* Tables */
        body.light table  { color: #22180a !important; }
        body.light thead  { background: #ede4d0 !important; }
        body.light th     { color: #3e2e18 !important; border-color: #b8a880 !important; background: #ede4d0 !important; }
        body.light td     { border-color: #c8bc98 !important; }
        body.light tr:hover { background: #e8dfc8 !important; }

        /* HUD text (planet labels inside SVG) */
        body.light .hud-text { fill: #22180a !important; }
        body.light .outer-house-num { fill: #0d4f70 !important; }

        /* Theme toggle */
        .theme-toggle {
            width: 38px; height: 38px; border-radius: 10px;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 17px; cursor: pointer; transition: .15s;
            background: rgba(2,6,23,.6); border: 1px solid rgba(6,182,212,.4); color: #7dd3fc;
        }
        .theme-toggle:hover { border-color: #38bdf8; }
        body.light .theme-toggle { background: #f4ede0; border-color: #6b5232; color: #085566; }

        /* ══ Consistency polish (matches index.html) ═══════════════════════ */
        .feature-card { transition: transform .25s, border-color .25s, box-shadow .25s; }
        .feature-card:hover { transform: translateY(-4px); }
        @media (prefers-reduced-motion: reduce) {
            .feature-card, .feature-card:hover { transition: none; transform: none; }
        }
        a:focus-visible, button:focus-visible, input:focus-visible,
        select:focus-visible, [tabindex]:focus-visible {
            outline: 2px solid #38bdf8; outline-offset: 2px;
        }
        .info-panel {
            background: rgba(15, 23, 42, 0.55);
            border: 1px solid rgba(56, 189, 248, 0.25);
            border-radius: 1rem;
        }
        body.light .info-panel { background: #f4ede0; border-color: #6b5232; }