:root{--font-family:"Outfit", system-ui, -apple-system, sans-serif;--bg-gradient:linear-gradient(135deg, #1e3a8a, #4c1d95, #312e81, #0f172a);--glass-bg:#ffffff1a;--glass-bg-hover:#fff3;--glass-border:#ffffff4d;--glass-shadow:0 12px 40px 0 #0006;--glass-blur:blur(20px);--glass-radius:24px;--dropdown-bg:#0f172af2;--text-primary:#fff;--text-secondary:#fffc;--accent-blue:#3b82f6;--accent-amber:#f59e0b}[data-theme=clear-day]{--bg-gradient:url(/weather-app/images/bg_sunny.png);--text-primary:#fff;--text-secondary:#ffffffe6;--glass-bg:#0003;--glass-bg-hover:#00000059;--glass-border:#fff3;--dropdown-bg:#000000d9;--glass-shadow:0 12px 40px 0 #0006}[data-theme=cloudy]{--bg-gradient:url(/weather-app/images/bg_cloudy.png);--text-primary:#fff;--text-secondary:#ffffffd9;--glass-bg:#0000004d;--glass-bg-hover:#00000073;--glass-border:#fff3;--dropdown-bg:#0f172ad9;--glass-shadow:0 12px 40px 0 #00000080}[data-theme=rain]{--bg-gradient:url(/weather-app/images/bg_rain.png);--dropdown-bg:#475569f2;--text-primary:#fff;--text-secondary:#fffc}[data-theme=thunderstorm]{--bg-gradient:url(/weather-app/images/bg_thunder.png);--dropdown-bg:#0f172af2;--text-primary:#fff;--text-secondary:#fffc}[data-theme=snow]{--bg-gradient:url(/weather-app/images/bg_snow.png);--dropdown-bg:#020617f2;--text-primary:#fff;--text-secondary:#ffffffd9;--glass-bg:#0003;--glass-bg-hover:#00000059}[data-theme=night]{--bg-gradient:url(/weather-app/images/bg_night.png);--dropdown-bg:#020617f2;--text-primary:#fff;--text-secondary:#ffffffb3}*{box-sizing:border-box;margin:0;padding:0}html{font-size:12px}body{font-family:var(--font-family);background-image:var(--bg-gradient);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0f172a;background-position:50%;background-repeat:no-repeat;background-size:110% 110%;background-attachment:fixed;min-height:100vh;transition:background-image 1s,color .5s;animation:40s ease-in-out infinite alternate gradientShift;overflow-x:hidden}@keyframes gradientShift{0%{background-position:0 0}to{background-position:100% 100%}}#root{flex-direction:column;min-height:100vh;display:flex}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:var(--glass-radius);transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}.glass-panel:after{content:"";background:linear-gradient(120deg,#0000,#ffffff4d,#0000);width:50%;height:100%;transition:all .6s;position:absolute;top:0;left:-200%;transform:skew(-20deg)}.glass-panel:hover:after{left:200%}.glass-panel:hover{background:var(--glass-bg-hover);transform:translateY(-4px)scale(1.02);box-shadow:0 20px 40px #0003}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}@keyframes fadeInSlideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%{transform:translateY(0)}50%{text-shadow:0 20px 30px #fff9;transform:translateY(-15px)}to{transform:translateY(0)}}.animate-fade-in{animation:.8s cubic-bezier(.16,1,.3,1) forwards fadeInSlideUp}.animate-float{animation:5s ease-in-out infinite float}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff80}.stagger-1{opacity:0;animation-delay:.1s}.stagger-2{opacity:0;animation-delay:.2s}.stagger-3{opacity:0;animation-delay:.3s}.stagger-4{opacity:0;animation-delay:.4s}input:focus{outline:none}.app-container{width:100%;max-width:1400px;margin:0 auto;padding:2rem}header{z-index:50;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;display:flex;position:relative}.brand{align-items:center;gap:.5rem;display:flex}.brand h1{letter-spacing:-.02em;font-size:1.5rem;font-weight:700}.search-container{width:100%;max-width:400px;position:relative}.search-input{border-radius:var(--glass-radius);background:var(--glass-bg);border:1px solid var(--glass-border);width:100%;color:var(--text-primary);font-family:var(--font-family);padding:.8rem 1rem .8rem 2.5rem;font-size:1rem;transition:all .3s}.search-input::placeholder{color:var(--text-secondary)}.search-input:focus{background:var(--glass-bg-hover);box-shadow:0 0 0 2px var(--accent-blue)}.search-icon{color:var(--text-secondary);position:absolute;top:50%;left:.8rem;transform:translateY(-50%)}.search-results{background:var(--dropdown-bg);-webkit-backdrop-filter:blur(24px);border:1px solid var(--glass-border);z-index:10;border-radius:12px;width:100%;margin-top:.5rem;list-style:none;position:absolute;top:100%;left:0;overflow:hidden}.search-item{cursor:pointer;align-items:center;gap:.5rem;padding:.8rem 1rem;transition:background .2s;display:flex}.search-item:hover{background:var(--glass-bg-hover)}.search-item .city{font-weight:600}.search-item .country{color:var(--text-secondary);font-size:.85rem}.dashboard{grid-template-columns:minmax(0,1fr) 30rem;gap:2rem;display:grid}@media (width<=900px){.dashboard{grid-template-columns:minmax(0,1fr)}}.main-left{flex-direction:column;gap:2rem;min-width:0;display:flex}.sidebar-right{flex-direction:column;gap:2rem;display:flex}.current-weather{background:var(--glass-bg-hover);border-radius:32px;justify-content:space-between;align-items:center;padding:4rem 3rem;display:flex;position:relative;overflow:hidden;box-shadow:0 16px 40px #00000026}.current-info{z-index:2}.location-name{letter-spacing:-.02em;margin-bottom:.5rem;font-size:3rem;font-weight:700}.date-time{color:var(--text-secondary);margin-bottom:2rem;font-size:1.1rem}.temperature{letter-spacing:-.04em;text-shadow:0 12px 32px #00000026;margin-bottom:1rem;font-size:7.5rem;font-weight:700;line-height:1}.condition{align-items:center;gap:.5rem;font-size:1.25rem;display:flex}.current-icon-lg{color:currentColor;text-shadow:0 0 40px #ffffff80;transform:scale(1.3)}.details-grid{grid-template-columns:repeat(2,1fr);gap:1.4rem;display:grid}.detail-card{border-radius:20px;flex-direction:column;gap:.6rem;padding:1.5rem 1.6rem;display:flex}.progress-bar-container{background:#ffffff26;border-radius:10px;width:100%;height:6px;margin-top:auto;overflow:hidden;box-shadow:inset 0 1px 3px #0003}.progress-bar-fill{border-radius:10px;height:100%;transition:width 1s cubic-bezier(.16,1,.3,1)}.daily-temp-bar-container{background:#ffffff26;border-radius:10px;width:90px;height:6px;margin:0 1rem;position:relative;box-shadow:inset 0 1px 3px #0003}.daily-temp-bar{background:linear-gradient(90deg,#38bdf8,#f59e0b);border-radius:10px;height:100%;position:absolute}.detail-header{color:var(--text-secondary);text-shadow:0 1px 2px #0006;align-items:center;gap:.5rem;font-size:.95rem;font-weight:600;display:flex}.detail-value{text-shadow:0 2px 4px #00000080;font-size:1.6rem;font-weight:700;line-height:1.2}.detail-desc{color:var(--text-secondary);text-shadow:0 1px 2px #0006;font-size:.85rem;font-weight:500;line-height:1.3}.section-title{align-items:center;gap:.5rem;margin-bottom:1rem;font-size:1.25rem;font-weight:600;display:flex}.hourly-container{scrollbar-width:thin;gap:1rem;padding-bottom:.5rem;display:flex;overflow-x:auto}.hourly-item{border-radius:16px;flex-direction:column;align-items:center;gap:.8rem;min-width:80px;padding:1rem .5rem;transition:transform .2s;display:flex}.hourly-item:hover{transform:translateY(-5px)}.hourly-time{color:var(--text-secondary);font-size:.9rem}.hourly-temp{font-size:1.1rem;font-weight:600}.daily-forecast{padding:1.5rem}.daily-list{flex-direction:column;gap:1rem;display:flex}.daily-item{border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;padding-bottom:1rem;display:flex}.daily-item:last-child{border-bottom:none;padding-bottom:0}.daily-day{flex:1;font-weight:500}.daily-icon{flex:1;justify-content:center;display:flex}.daily-temp{flex:1;justify-content:flex-end;gap:.5rem;display:flex}.temp-max{font-weight:600}.temp-min{color:var(--text-secondary)}.loading-container{flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:100vh;display:flex}.spinner{border:3px solid #ffffff4d;border-top-color:var(--text-primary);border-radius:50%;width:40px;height:40px;animation:1s ease-in-out infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=600px){.app-container{padding:1rem}header{flex-direction:column;align-items:stretch;gap:1rem}.brand{justify-content:center}.search-container{max-width:100%}.current-weather{text-align:center;flex-direction:column-reverse;gap:2rem;padding:2.5rem 1.5rem}.condition{justify-content:center}.details-grid{grid-template-columns:1fr}.temperature{font-size:5rem}.location-name{font-size:2.2rem}.current-icon-lg{margin-bottom:-1rem;transform:scale(1)}}