:root{--primary-color: #4a90e2;--secondary-color: #50e3c2;--background-color: #f7f9fc;--text-color: #2d3748;--dark-color: #2b6cb0;--light-color: #ffffff;--success-color: #38b2ac;--warning-color: #ff9f43;--danger-color: #f56565;--box-shadow: 0 15px 40px rgba(0, 0, 0, .1);--glass-bg: rgba(255, 255, 255, .2);--glass-bg-dark: rgba(45, 55, 72, .2);--neon-color: #50e3c2;--neon-shadow: 0 0 10px var(--neon-color), 0 0 20px var(--neon-color), 0 0 30px var(--neon-color);--transition: all .4s ease-in-out}body{font-family:Roboto,sans-serif;min-height:100vh;margin:0;padding:0;transition:background .8s ease;overflow-x:hidden;position:relative;z-index:1}.clear{background:linear-gradient(to bottom,#87ceeb,#e0f7fa 60%,#fff8e1);transition:background 1.5s ease-in-out}.cloudy{background:linear-gradient(to bottom,#b0c4de,#cfd8dc 60%,#eceff1);transition:background 1.5s ease-in-out}.rainy{background:linear-gradient(to bottom,#4682b4,#546e7a 60%,#37474f);transition:background 1.5s ease-in-out;color:#e0e0e0}.night{background:linear-gradient(to bottom,#0f2027,#203a43 60%,#2c5364);transition:background 1.5s ease-in-out;color:#e0e0e0}.snow{background:linear-gradient(to bottom,#e0f7fa,#b3e5fc 60%,#81d4fa);transition:background 1.5s ease-in-out}.thunderstorm{background:linear-gradient(to bottom,#1a237e,#283593 60%,#3949ab);transition:background 1.5s ease-in-out;color:#e0e0e0}.drizzle{background:linear-gradient(to bottom,#546e7a,#78909c 60%,#90a4ae);transition:background 1.5s ease-in-out;color:#e0e0e0}.mist{background:linear-gradient(to bottom,#cfd8dc,#b0bec5 60%,#90a4ae);transition:background 1.5s ease-in-out}.weather-app{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);transition:var(--transition);position:relative;z-index:2}.weather-info-card,.hourly-item,.forecast-day,.detail-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.1);transition:var(--transition)}.weather-info-card:hover,.hourly-item:hover,.forecast-day:hover,.detail-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px #0000001a}footer{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-top:2px solid var(--neon-color);box-shadow:0 -6px 30px #0003,0 0 20px #50e3c24d;position:relative;z-index:2;overflow:hidden;transition:var(--transition)}footer a{color:var(--neon-color);text-decoration:none;position:relative;font-weight:600;text-shadow:0 0 5px rgba(80,227,194,.5);transition:var(--transition)}footer a:hover{color:#a5f3eb;text-shadow:0 0 15px var(--neon-color),0 0 25px var(--neon-color)}body.bg-dark .weather-app,body.bg-dark .weather-info-card,body.bg-dark .hourly-item,body.bg-dark .forecast-day,body.bg-dark .detail-card{background:var(--glass-bg-dark);border:1px solid rgba(74,85,104,.1);color:#e2e8f0}body.bg-dark footer{background:linear-gradient(135deg,var(--glass-bg-dark),rgba(45,55,72,.3));border-top:2px solid var(--neon-color);color:#a0aec0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.fade-in{animation:fadeIn .6s ease-out}.fade-in-up{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.weather-app{padding:1.5rem!important}.weather-icon{width:100px!important;height:100px!important}.display-1{font-size:3.5rem}}@media (max-width: 576px){.weather-icon{width:80px!important;height:80px!important}.display-1{font-size:2.5rem}}