/* --- 1. AESTHETICS (Put this in style.css) --- */
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700;800&family=Space+Grotesk:wght@300;500;700&display=swap');

        :root {
            --neon-cyan: #00f3ff;
            --neon-purple: #bc13fe;
            --neon-pink: #ff00de;
            --dark-base: #020617;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            margin: 0;
            min-height: 100vh;
            background: var(--dark-base);
            color: white;
            transition: background 1s ease;
            overflow-x: hidden;
        }

        .font-space { font-family: 'Space Grotesk', sans-serif; }

        .glass {
            background: rgba(15, 23, 42, 0.7);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 24px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            position: relative;
        }

        .neon-border::after {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: 24px;
            padding: 1.5px;
            background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple), var(--neon-pink));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0.4;
        }

        .weather-bg {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: -2;
            transition: all 1.5s ease-in-out;
        }

        #animation-layer {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: -1;
            pointer-events: none;
        }

        .state-clear { background: radial-gradient(circle at 10% 10%, #1e1b4b 0%, #020617 100%); }
        .state-clouds { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); }
        .state-rain { background: linear-gradient(180deg, #020617 0%, #172554 100%); }

        .glow-text-cyan { text-shadow: 0 0 15px var(--neon-cyan), 0 0 30px rgba(0, 243, 255, 0.3); }

        .raindrop {
            position: absolute;
            background: linear-gradient(to bottom, transparent, var(--neon-cyan));
            width: 2px;
            height: 50px;
            animation: fall linear infinite;
        }

        @keyframes fall { to { transform: translateY(115vh); } }

        .sun-flare {
            position: absolute;
            top: -10%; left: 70%; width: 600px; height: 600px;
            background: radial-gradient(circle, rgba(255, 0, 222, 0.15) 0%, transparent 70%);
            animation: pulse-sun 8s ease-in-out infinite;
        }

        @keyframes pulse-sun {
            0%, 100% { transform: scale(1); opacity: 0.4; }
            50% { transform: scale(1.2); opacity: 0.7; }
        }

        .search-field {
            background: rgba(15, 23, 42, 0.8);
            border: 1px solid rgba(0, 243, 255, 0.1);
            transition: all 0.4s ease;
        }

        .search-field:focus { border-color: var(--neon-cyan); outline: none; }

        .stat-box {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .spinner {
            border: 4px solid rgba(0, 243, 255, 0.1);
            border-top: 4px solid var(--neon-cyan);
            border-radius: 50%;
            width: 45px; height: 45px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        
        .hourly-container::-webkit-scrollbar { height: 4px; }
        .hourly-container::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); }
        .hourly-container::-webkit-scrollbar-thumb { background: var(--neon-cyan); border-radius: 10px; }

        .animate-pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

        /* Desktop Fixes for Overflow */
        .temp-display {
            font-size: clamp(4rem, 10vw, 10rem);
            line-height: 0.9;
            overflow: visible;
        }

        @media (max-width: 1024px) {
            .temp-display { font-size: clamp(4rem, 15vw, 7rem); }
        }