:root { --primary: #2563eb; --secondary: #0ea5e9; --dark: #0f172a; --light: #f8fafc; }
body { font-family: 'Inter', system-ui, sans-serif; background-color: #f8fafc; color: #1e293b; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

/* HERO WEATHER BOX */
.weather-hero { position: relative; overflow: hidden; transition: background 1.5s ease; border-radius: 2.5rem; color: white; min-height: 420px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.25); }
.bg-sunny { background: linear-gradient(160deg, #00b4db 0%, #0083b0 100%); }
.bg-night { background: linear-gradient(160deg, #0f2027 0%, #203a43 50%, #2c5364 100%); }
.bg-cloudy { background: linear-gradient(160deg, #4b6cb7 0%, #182848 100%); }
.bg-rainy { background: linear-gradient(160deg, #373b44 0%, #4286f4 100%); }
.bg-snowy { background: linear-gradient(160deg, #83a4d4 0%, #b6fbff 100%); }
.bg-sunset { background: linear-gradient(160deg, #ff512f 0%, #dd2476 100%); }

/* Glass & UI */
.glass-panel { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 1rem; }
.glass-dark { background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; }
.tab-active { background-color: #eff6ff; color: #1d4ed8; border-bottom: 2px solid #1d4ed8; }
.tab-inactive { color: #64748b; border-bottom: 2px solid transparent; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Animations */
.sun-rays { position: absolute; top: -100px; right: -100px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%); animation: rotate 20s linear infinite; pointer-events: none; }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.rain { position: absolute; width: 1px; height: 60px; background: rgba(255, 255, 255, 0.4); animation: rainfall 0.7s linear infinite; }
@keyframes rainfall { 0% { transform: translateY(-100px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(500px); opacity: 0; } }
.snow { position: absolute; width: 6px; height: 6px; background: white; border-radius: 50%; opacity: 0.8; animation: snowfall 3s linear infinite; }
@keyframes snowfall { 0% { transform: translateY(-10px) translateX(0); opacity: 0; } 100% { transform: translateY(500px) translateX(20px); opacity: 0; } }
.cloud-anim { position: absolute; top: 20%; left: -20%; opacity: 0.4; animation: drift 40s linear infinite; filter: blur(5px); }
@keyframes drift { 0% { transform: translateX(0); } 100% { transform: translateX(150%); } }
.star { position: absolute; background: white; border-radius: 50%; animation: twinkle 3s infinite ease-in-out; }
@keyframes twinkle { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } }

/* Map & Forecast */
.weather-card { background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); transition: transform 0.2s; border: 1px solid #f1f5f9; }
.weather-card:hover { transform: translateY(-2px); border-color: #3b82f6; }
#map { min-height: 250px; z-index: 1; } /* Ensure map has height */