@import"https://fonts.googleapis.com/css2?family=Inter+Display:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap";body{margin:0;font-family:Inter Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{min-height:100vh;position:relative;transition:all .5s cubic-bezier(.4,0,.2,1)}.app.light-mode{color:#2c3e50}.app.dark-mode{color:#fff}.container{position:relative;z-index:10;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;max-width:1200px;margin:0 auto}.error-message{display:flex;align-items:center;gap:.75rem;background:#fffffff2;color:#e74c3c;padding:1rem 1.5rem;border-radius:15px;margin-bottom:2rem;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 8px 32px #0000001a;border:1px solid rgba(255,255,255,.2);max-width:500px;width:100%}.dark-mode .error-message{background:#ffffff1a;color:#ff6b6b;border-color:#ffffff1a}.error-message svg{flex-shrink:0}.welcome-message{text-align:center;background:#fffffff2;border-radius:25px;padding:3rem 2rem;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 10px 30px #0000001a;border:1px solid rgba(255,255,255,.2);max-width:500px;width:100%}.dark-mode .welcome-message{background:#ffffff1a;border-color:#ffffff1a}.welcome-icon{margin-bottom:1.5rem;color:#667eea}.dark-mode .welcome-icon{color:#ff9a44}.welcome-message h2{font-family:Poppins,sans-serif;font-weight:600;font-size:1.5rem;margin-bottom:1rem;color:#2c3e50}.dark-mode .welcome-message h2{color:#fff}.welcome-message p{color:#7f8c8d;line-height:1.6}.dark-mode .welcome-message p{color:#ffffffb3}@media (max-width: 768px){.container{padding:1rem .5rem}.error-message{padding:.875rem 1.25rem;margin-bottom:1.5rem;border-radius:12px}.welcome-message{padding:2rem 1.5rem;border-radius:20px}.welcome-message h2{font-size:1.3rem}}@media (max-width: 480px){.container{padding:.5rem}.error-message{padding:.75rem 1rem;font-size:.9rem}.welcome-message{padding:1.5rem 1rem}.welcome-message h2{font-size:1.2rem}.welcome-icon svg{width:48px;height:48px}}.background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;transition:all 1.5s cubic-bezier(.4,0,.2,1);overflow:hidden}.background.default.day{background:linear-gradient(135deg,#667eea,#764ba2)}.background.default.night{background:linear-gradient(135deg,#0f1b3a,#1a237e)}.background.sunny.day{background:linear-gradient(135deg,#ff9a44,#ffbf5e 20%,#87ceeb 70%,#1e90ff)}.background.sunny.night{background:linear-gradient(135deg,#0c2461,#1e3799,#4a69bd 80%,#6a89cc)}.background.cloudy.day{background:linear-gradient(135deg,#bdc3c7,#95a5a6,#7f8c8d)}.background.cloudy.night{background:linear-gradient(135deg,#2c3e50,#34495e 60%,#4a627a)}.background.rainy.day{background:linear-gradient(135deg,#636e72,#2d3436 60%,#1e272e)}.background.rainy.night{background:linear-gradient(135deg,#2d3436,#1e272e 60%,#0c0c0c)}.background.stormy{background:linear-gradient(135deg,#0c2461,#1e3799 30%,#0a3d62 70%,#082e4d)}.background.snowy.day{background:linear-gradient(135deg,#74b9ff,#0984e3 40%,#1e6fa8)}.background.snowy.night{background:linear-gradient(135deg,#2d3436,#3c6382,#4a7ba7)}.background.foggy.day{background:linear-gradient(135deg,#dfe6e9,#b2bec3,#95a5a6)}.background.foggy.night{background:linear-gradient(135deg,#636e72,#2d3436 60%,#1e272e)}.sun-container{position:absolute;top:80px;right:100px;animation:sunFloat 8s ease-in-out infinite;z-index:2}.sun-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;background:radial-gradient(circle at 30% 30%,#ff0,#ffeb3b 20%,#ff9800 50%,#ff5722);border-radius:50%;box-shadow:0 0 60px #ff9800,0 0 100px #ff9800cc,0 0 140px #ff572299;z-index:3}.sun-corona{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:160px;height:160px;background:radial-gradient(circle,rgba(255,235,59,.4) 0%,rgba(255,152,0,.3) 30%,rgba(255,87,34,.2) 60%,transparent 80%);border-radius:50%;animation:pulseCorona 4s ease-in-out infinite;z-index:2}.sun-rays{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:240px;height:240px;z-index:1}.sun-ray{position:absolute;top:50%;left:50%;width:4px;height:120px;background:linear-gradient(to bottom,transparent 0%,#ffeb3b 30%,#ff9800 70%,transparent 100%);transform-origin:0 0;transform:translate(-50%,-50%) rotate(calc(var(--i) * 30deg)) translateY(-60px);opacity:.6;animation:rotateRay 20s linear infinite,rayPulse 3s ease-in-out infinite;animation-delay:calc(var(--i) * -.5s)}.sun-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;height:300px;background:radial-gradient(circle,rgba(255,235,59,.2) 0%,rgba(255,152,0,.15) 30%,rgba(255,87,34,.1) 50%,transparent 70%);border-radius:50%;filter:blur(10px);z-index:1}.stars{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.star{position:absolute;background:#fff;border-radius:50%;width:var(--size);height:var(--size);left:var(--x);top:var(--y);opacity:var(--opacity);animation:twinkle var(--duration) ease-in-out var(--delay) infinite,starFloat 120s linear infinite}.moon{position:absolute;top:100px;right:120px;width:70px;height:70px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:50%;box-shadow:0 0 40px #f8f9facc,0 0 80px #f8f9fa66;animation:moonFloat 12s ease-in-out infinite;z-index:2}.moon-crater{position:absolute;background:#dee2e6;border-radius:50%}.moon-crater.crater-1{width:12px;height:12px;top:15px;left:20px}.moon-crater.crater-2{width:8px;height:8px;top:35px;left:10px}.moon-crater.crater-3{width:6px;height:6px;top:25px;right:15px}.moon-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140px;height:140px;background:radial-gradient(circle,rgba(248,249,250,.3) 0%,rgba(233,236,239,.2) 30%,transparent 70%);border-radius:50%;filter:blur(15px);z-index:1}.cloud-layer{position:absolute;width:100%;height:100%;pointer-events:none}.high-clouds .cloud{position:absolute;top:var(--y-pos);left:var(--x-start);transform:scale(var(--scale));opacity:var(--opacity);animation:moveClouds var(--speed) linear infinite;animation-delay:var(--delay);filter:blur(2px)}.high-cloud .cloud-clump-1,.high-cloud .cloud-clump-2,.high-cloud .cloud-clump-3{position:absolute;background:#ffffffe6;border-radius:50%;filter:blur(3px)}.high-cloud .cloud-clump-1{width:80px;height:25px;top:10px;left:20px}.high-cloud .cloud-clump-2{width:60px;height:20px;top:0;left:60px}.high-cloud .cloud-clump-3{width:70px;height:22px;top:15px;left:40px}.medium-clouds .cloud{position:absolute;top:var(--y-pos);left:var(--x-start);transform:scale(var(--scale));opacity:var(--opacity);animation:moveClouds var(--speed) linear infinite;animation-delay:var(--delay);filter:blur(1px)}.medium-cloud .cloud-clump-1,.medium-cloud .cloud-clump-2,.medium-cloud .cloud-clump-3,.medium-cloud .cloud-clump-4{position:absolute;background:#fffffff2;border-radius:50%;box-shadow:0 2px 10px #0000001a}.medium-cloud .cloud-clump-1{width:100px;height:40px;top:20px;left:10px;z-index:3}.medium-cloud .cloud-clump-2{width:80px;height:35px;top:10px;left:70px;z-index:2}.medium-cloud .cloud-clump-3{width:90px;height:38px;top:25px;left:40px;z-index:4}.medium-cloud .cloud-clump-4{width:70px;height:32px;top:15px;left:100px;z-index:1}.low-clouds .cloud{position:absolute;top:var(--y-pos);left:var(--x-start);transform:scale(var(--scale));opacity:var(--opacity);animation:moveClouds var(--speed) linear infinite;animation-delay:var(--delay);filter:blur(.5px)}.low-cloud .cloud-clump-1,.low-cloud .cloud-clump-2,.low-cloud .cloud-clump-3,.low-cloud .cloud-clump-4,.low-cloud .cloud-clump-5{position:absolute;background:#fffffffa;border-radius:50%;box-shadow:0 4px 15px #0000001a,inset 0 -2px 5px #0000000d}.low-cloud .cloud-clump-1{width:120px;height:60px;top:30px;left:20px;z-index:5}.low-cloud .cloud-clump-2{width:100px;height:55px;top:15px;left:80px;z-index:4}.low-cloud .cloud-clump-3{width:110px;height:58px;top:35px;left:50px;z-index:6}.low-cloud .cloud-clump-4{width:90px;height:50px;top:20px;left:120px;z-index:3}.low-cloud .cloud-clump-5{width:80px;height:45px;top:40px;left:100px;z-index:7}.storm-clouds .cloud{position:absolute;top:var(--y-pos);left:var(--x-start);transform:scale(var(--scale));opacity:var(--opacity);animation:moveStormClouds var(--speed) linear infinite;animation-delay:var(--delay);filter:blur(1px) brightness(.7)}.storm-cloud .cloud-clump-1,.storm-cloud .cloud-clump-2,.storm-cloud .cloud-clump-3,.storm-cloud .cloud-clump-4,.storm-cloud .cloud-clump-5,.storm-cloud .cloud-clump-6{position:absolute;background:#646478e6;border-radius:50%;box-shadow:0 4px 20px #0000004d,inset 0 -3px 8px #0003}.storm-cloud .cloud-clump-1{width:150px;height:70px;top:40px;left:30px;z-index:6}.storm-cloud .cloud-clump-2{width:130px;height:65px;top:25px;left:100px;z-index:5}.storm-cloud .cloud-clump-3{width:140px;height:68px;top:45px;left:60px;z-index:7}.storm-cloud .cloud-clump-4{width:120px;height:62px;top:30px;left:140px;z-index:4}.storm-cloud .cloud-clump-5{width:110px;height:58px;top:50px;left:120px;z-index:8}.storm-cloud .cloud-clump-6{width:100px;height:55px;top:35px;left:170px;z-index:3}@keyframes moveClouds{0%{transform:translate(calc(var(--x-start) - 50vw)) scale(var(--scale)) translateY(0);opacity:0}10%{opacity:var(--opacity)}50%{transform:translate(calc(var(--x-start))) scale(var(--scale)) translateY(-5px)}90%{opacity:var(--opacity)}to{transform:translate(calc(var(--x-start) + 50vw)) scale(var(--scale)) translateY(0);opacity:0}}@keyframes moveStormClouds{0%{transform:translate(calc(var(--x-start) - 50vw)) scale(var(--scale)) translateY(0);opacity:0}15%{opacity:var(--opacity);transform:translate(calc(var(--x-start) - 40vw)) scale(calc(var(--scale) * 1.1)) translateY(-10px)}50%{transform:translate(calc(var(--x-start))) scale(var(--scale)) translateY(-5px);opacity:calc(var(--opacity) * 1.2)}85%{opacity:var(--opacity);transform:translate(calc(var(--x-start) + 40vw)) scale(calc(var(--scale) * .9)) translateY(-3px)}to{transform:translate(calc(var(--x-start) + 50vw)) scale(var(--scale)) translateY(0);opacity:0}}@keyframes moveCloudsFromCenter{0%{transform:translate(-50%) scale(.8) translateY(0);opacity:0}20%{transform:translate(calc(-50% + var(--x-start) * .5)) scale(var(--scale)) translateY(-5px);opacity:var(--opacity)}80%{transform:translate(calc(-50% + var(--x-start))) scale(var(--scale)) translateY(-3px);opacity:var(--opacity)}to{transform:translate(calc(-50% + var(--x-start) * 1.5)) scale(.8) translateY(0);opacity:0}}@keyframes expandCloudsFromCenter{0%{transform:translate(-50%) translateY(-50%) scale(.1) rotate(0);opacity:0}20%{transform:translate(calc(-50% + var(--x-start) * .3)) translateY(calc(-50% + var(--y-pos))) scale(calc(var(--scale) * .5)) rotate(5deg);opacity:var(--opacity)}50%{transform:translate(calc(-50% + var(--x-start) * .6)) translateY(calc(-50% + var(--y-pos))) scale(var(--scale)) rotate(0);opacity:calc(var(--opacity) * 1.1)}80%{transform:translate(calc(-50% + var(--x-start) * .9)) translateY(calc(-50% + var(--y-pos))) scale(calc(var(--scale) * .7)) rotate(-5deg);opacity:var(--opacity)}to{transform:translate(calc(-50% + var(--x-start) * 1.2)) translateY(calc(-50% + var(--y-pos))) scale(.3) rotate(0);opacity:0}}.background.cloudy.day{background:linear-gradient(135deg,#87ceeb,#98c8e6,#a9c4e1 60%,#bac0dc)}.background.cloudy.night{background:linear-gradient(135deg,#2c3e50,#34495e 40%,#4a627a,#5c7c9a)}.background.rainy.day .cloud,.background.stormy .cloud{filter:brightness(.8) blur(1px)}.background.foggy .cloud{filter:blur(3px) opacity(.6)}@media (max-width: 768px){.high-clouds .cloud{transform:scale(calc(var(--scale) * .7))}.medium-clouds .cloud{transform:scale(calc(var(--scale) * .8))}.low-clouds .cloud{transform:scale(calc(var(--scale) * .9))}.storm-clouds .cloud{transform:scale(calc(var(--scale) * .85))}.cloud-clump-1,.cloud-clump-2,.cloud-clump-3,.cloud-clump-4,.cloud-clump-5,.cloud-clump-6{transform:scale(.8)}}@media (max-width: 480px){.high-clouds .cloud{animation-duration:calc(var(--speed) * .6)}.medium-clouds .cloud{animation-duration:calc(var(--speed) * .7)}.low-clouds .cloud{animation-duration:calc(var(--speed) * .8)}.storm-clouds .cloud{animation-duration:calc(var(--speed) * .7)}.high-clouds .cloud:nth-child(n+5),.medium-clouds .cloud:nth-child(n+4),.low-clouds .cloud:nth-child(n+3){display:none}}.rain-container{position:absolute;width:100%;height:100%;z-index:2}.rain-drop{position:absolute;width:2px;height:var(--length);background:linear-gradient(to bottom,transparent 0%,rgba(255,255,255,.8) 30%,rgba(255,255,255,.6) 70%,transparent 100%);top:-30px;left:var(--x);animation:rainFall var(--duration) linear infinite;animation-delay:var(--delay);transform:translateY(-100%)}.storm-drop{width:3px;background:linear-gradient(to bottom,transparent 0%,rgba(255,255,255,.9) 20%,rgba(255,255,255,.7) 60%,transparent 100%)}.lightning-container{position:absolute;width:100%;height:100%;z-index:3}.lightning{position:absolute;width:4px;height:0;background:linear-gradient(to bottom,#fff,#ffeb3b 30%,#fff);top:0;left:var(--x);opacity:0;animation:lightningFlash 20s linear infinite;animation-delay:var(--delay);filter:blur(1px);transform:skew(10deg)}.snow-container{position:absolute;width:100%;height:100%;z-index:2}.snowflake{position:absolute;background:#fff;border-radius:50%;width:var(--size);height:var(--size);top:-10px;left:var(--x);animation:snowFall var(--duration) linear infinite,snowSway var(--speed) ease-in-out infinite;animation-delay:var(--delay);filter:blur(.5px);opacity:.9;box-shadow:0 0 5px #ffffff80}.fog-container{position:absolute;width:100%;height:100%;z-index:3}.fog-layer{position:absolute;width:200%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 20%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.4) 80%,transparent 100%);animation:fogMove 40s linear infinite;filter:blur(10px)}.fog-1{top:20%;animation-delay:0s}.fog-2{top:50%;animation-delay:-20s;opacity:.7}.fog-3{top:80%;animation-delay:-10s;opacity:.5}@keyframes sunFloat{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(-15px) rotate(2deg)}66%{transform:translateY(-8px) rotate(-1deg)}}@keyframes pulseCorona{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.1);opacity:.8}}@keyframes rotateRay{0%{transform:translate(-50%,-50%) rotate(calc(var(--i) * 30deg)) translateY(-60px)}to{transform:translate(-50%,-50%) rotate(calc(var(--i) * 30deg + 360deg)) translateY(-60px)}}@keyframes rayPulse{0%,to{opacity:.4;transform:translate(-50%,-50%) rotate(calc(var(--i) * 30deg)) translateY(-60px) scale(1)}50%{opacity:.8;transform:translate(-50%,-50%) rotate(calc(var(--i) * 30deg)) translateY(-60px) scale(1.1)}}@keyframes twinkle{0%,to{opacity:calc(var(--opacity) * .3);transform:scale(1)}50%{opacity:var(--opacity);transform:scale(1.2)}}@keyframes starFloat{0%{transform:translate(0) translateY(0)}to{transform:translate(-100px) translateY(50px)}}@keyframes moonFloat{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-20px) rotate(3deg)}75%{transform:translateY(-10px) rotate(-2deg)}}@keyframes moveClouds{0%{transform:translate(-200px)}to{transform:translate(calc(100vw + 400px))}}@keyframes rainFall{0%{transform:translateY(-100%) rotate(15deg);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(100vh) rotate(15deg);opacity:0}}@keyframes lightningFlash{0%,98%{height:0;opacity:0}99%{height:300px;opacity:1}to{height:0;opacity:0}}@keyframes snowFall{0%{transform:translateY(-100%) translate(0) rotate(0);opacity:.9}to{transform:translateY(100vh) translate(100px) rotate(360deg);opacity:0}}@keyframes snowSway{0%,to{transform:translate(0)}50%{transform:translate(30px)}}@keyframes fogMove{0%{transform:translate(-50%)}to{transform:translate(0)}}@media (max-width: 768px){.sun-container{top:60px;right:60px;transform:scale(.8)}.moon{top:80px;right:80px;transform:scale(.8)}.sun-core{width:60px;height:60px}.sun-corona{width:120px;height:120px}.sun-rays{width:180px;height:180px}.sun-ray{height:90px;transform:translate(-50%,-50%) rotate(calc(var(--i) * 30deg)) translateY(-45px)}.cloud{animation-duration:calc(var(--speed) * .7)}}@media (max-width: 480px){.sun-container{top:40px;right:40px;transform:scale(.6)}.moon{top:60px;right:60px;transform:scale(.6)}.rain-drop{width:1px}.storm-drop{width:2px}.snowflake{filter:blur(.3px)}}.weather-card{background:#fffffff2;border-radius:28px;padding:2.5rem;box-shadow:0 20px 60px #0000001a,0 8px 32px #00000014;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);border:1px solid rgba(255,255,255,.2);width:100%;max-width:680px;margin-bottom:2.5rem;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.weather-card:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent)}.dark-mode .weather-card{background:#ffffff1f;border-color:#ffffff26;color:#fff}.weather-card.night{background:#ffffff1a;border-color:#ffffff26;color:#fff}.dark-mode .weather-card.night{background:#ffffff14;border-color:#ffffff1a}.weather-card:hover{transform:translateY(-8px);box-shadow:0 30px 80px #00000026,0 12px 40px #0000001a}.weather-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:1px solid rgba(0,0,0,.08)}.dark-mode .weather-header,.weather-card.night .weather-header{border-bottom-color:#ffffff26}.location-info{flex:1}.location-main{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.location-icon{color:#667eea;opacity:.8}.dark-mode .location-icon,.weather-card.night .location-icon{color:#ff9a44}.location{font-family:Poppins,sans-serif;font-weight:700;font-size:1.75rem;line-height:1.2;color:#2c3e50;margin:0}.dark-mode .location,.weather-card.night .location{color:#fff}.date-time{display:flex;flex-direction:column;gap:.25rem}.date{font-family:Inter Display,sans-serif;font-size:1rem;font-weight:500;color:#7f8c8d}.time{font-family:Inter Display,sans-serif;font-size:.9rem;color:#95a5a6;font-weight:400}.dark-mode .date,.dark-mode .time,.weather-card.night .date,.weather-card.night .time{color:#ffffffb3}.weather-condition{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem}.weather-icon{width:100px;height:100px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.15));transition:transform .3s ease}.weather-icon:hover{transform:scale(1.1) rotate(5deg)}.description{font-family:Poppins,sans-serif;font-weight:600;font-size:1.1rem;color:#2c3e50;text-transform:capitalize;background:#667eea1a;padding:.5rem 1rem;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dark-mode .description,.weather-card.night .description{color:#fff;background:#ff9a4426}.weather-main{margin-bottom:2.5rem}.temperature-section{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}.temperature-primary{flex:1}.temperature{font-family:Poppins,sans-serif;font-size:5rem;font-weight:300;line-height:1;margin-bottom:.5rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 4px 20px rgba(102,126,234,.3)}.dark-mode .temperature,.weather-card.night .temperature{background:linear-gradient(135deg,#ff9a44,#ffbf5e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 4px 20px rgba(255,154,68,.3)}.feels-like{font-family:Inter Display,sans-serif;color:#7f8c8d;font-size:1.1rem;font-weight:500}.dark-mode .feels-like,.weather-card.night .feels-like{color:#ffffffb3}.temperature-range{display:flex;flex-direction:column;gap:.75rem;min-width:140px}.temp-high,.temp-low{display:flex;align-items:center;gap:.5rem;font-family:Inter Display,sans-serif;font-size:.95rem;font-weight:500;padding:.5rem .75rem;border-radius:12px;background:#fff9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dark-mode .temp-high,.dark-mode .temp-low,.weather-card.night .temp-high,.weather-card.night .temp-low{background:#ffffff1a;color:#ffffffe6}.temp-high{color:#e74c3c}.temp-low{color:#3498db}.sun-times{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2.5rem;padding:1.5rem;background:#ffffff80;border-radius:20px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.dark-mode .sun-times,.weather-card.night .sun-times{background:#ffffff14}.sun-time{display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:16px;transition:all .3s ease}.sun-time:hover{background:#ffffff4d;transform:translateY(-2px)}.dark-mode .sun-time:hover,.weather-card.night .sun-time:hover{background:#ffffff26}.sun-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;color:#fff;flex-shrink:0}.dark-mode .sun-icon,.weather-card.night .sun-icon{background:linear-gradient(135deg,#ff9a44,#ffbf5e)}.sun-info{display:flex;flex-direction:column;gap:.25rem}.sun-label{font-family:Inter Display,sans-serif;font-size:.85rem;font-weight:600;color:#7f8c8d;text-transform:uppercase;letter-spacing:.5px}.dark-mode .sun-label,.weather-card.night .sun-label{color:#fff9}.sun-value{font-family:Poppins,sans-serif;font-size:1.1rem;font-weight:600;color:#2c3e50}.dark-mode .sun-value,.weather-card.night .sun-value{color:#fff}.weather-details{margin-top:1rem}.details-title{font-family:Poppins,sans-serif;font-weight:600;font-size:1.3rem;color:#2c3e50;margin-bottom:1.5rem;text-align:center}.dark-mode .details-title,.weather-card.night .details-title{color:#fff}.details-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}.detail-item{display:flex;align-items:center;gap:1.25rem;padding:1.5rem;background:#fff9;border-radius:20px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.3);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.detail-item:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent)}.dark-mode .detail-item,.weather-card.night .detail-item{background:#ffffff14;border-color:#ffffff26}.detail-item:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 12px 30px #00000026,0 4px 15px #0000001a;background:#fffc}.dark-mode .detail-item:hover,.weather-card.night .detail-item:hover{background:#ffffff26;box-shadow:0 12px 30px #0000004d,0 4px 15px #0003}.detail-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;color:#fff;flex-shrink:0;transition:all .3s ease}.detail-item:hover .detail-icon{transform:scale(1.1) rotate(5deg)}.dark-mode .detail-icon,.weather-card.night .detail-icon{background:linear-gradient(135deg,#ff9a44,#ffbf5e)}.detail-info{display:flex;flex-direction:column;gap:.5rem;flex:1}.detail-label{font-family:Inter Display,sans-serif;font-size:.85rem;font-weight:600;color:#7f8c8d;text-transform:uppercase;letter-spacing:.5px}.dark-mode .detail-label,.weather-card.night .detail-label{color:#ffffffb3}.detail-value{font-family:Poppins,sans-serif;font-weight:600;font-size:1.2rem;color:#2c3e50;line-height:1.2}.dark-mode .detail-value,.weather-card.night .detail-value{color:#fff}.wind-direction{font-size:.9rem;opacity:.8;font-weight:500}@media (max-width: 768px){.weather-card{padding:2rem 1.5rem;border-radius:24px;margin-bottom:2rem}.weather-header{flex-direction:column;align-items:center;text-align:center;gap:1.5rem;margin-bottom:2rem}.location-main{justify-content:center}.temperature-section{flex-direction:column;align-items:center;text-align:center;gap:1.5rem}.temperature{font-size:4rem}.temperature-range{flex-direction:row;justify-content:center;min-width:auto}.sun-times{grid-template-columns:1fr;gap:1rem;padding:1.25rem}.details-grid{grid-template-columns:1fr;gap:1rem}.detail-item{padding:1.25rem}.weather-icon{width:80px;height:80px}}@media (max-width: 480px){.weather-card{padding:1.5rem;border-radius:20px}.location{font-size:1.5rem}.temperature{font-size:3.5rem}.temperature-range{flex-direction:column;align-items:center}.detail-item{padding:1rem;gap:1rem}.detail-icon{width:48px;height:48px}.detail-icon svg{width:20px;height:20px}.detail-value{font-size:1.1rem}.weather-icon{width:70px;height:70px}}.forecast{width:100%;max-width:500px}.forecast-title{font-family:Poppins,sans-serif;font-weight:600;font-size:1.3rem;margin-bottom:1rem;text-align:center;color:#ff9a44}.dark-mode .forecast-title{color:#fff}.forecast-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.forecast-card{background:#fffffff2;border-radius:28px;padding:1.5rem;box-shadow:0 20px 60px #0000001a,0 8px 32px #00000014;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);border:1px solid rgba(255,255,255,.2);text-align:center;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.dark-mode .forecast-card{background:#ffffff1a;color:#fff}.forecast-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px #00000026}.forecast-day{font-family:Poppins,sans-serif;font-weight:600;font-size:.9rem;margin-bottom:.5rem;color:#2c3e50}.dark-mode .forecast-day{color:#fff}.forecast-icon{width:50px;height:50px;margin:.5rem auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.forecast-temp{font-family:Poppins,sans-serif;font-weight:600;font-size:1.1rem;margin-bottom:.25rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.dark-mode .forecast-temp{background:linear-gradient(135deg,#ff9a44,#ffbf5e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.forecast-desc{font-family:Inter Display,sans-serif;font-size:.75rem;color:#7f8c8d;text-transform:capitalize}.dark-mode .forecast-desc{color:#ffffffb3}@media (max-width: 768px){.forecast-cards{grid-template-columns:1fr;gap:.75rem}.forecast-title{font-size:1.3rem}.forecast-card{padding:.75rem}}@media (max-width: 480px){.forecast-title{font-size:1.1rem}.forecast-card{padding:.5rem}.forecast-icon{width:40px;height:40px}.forecast-temp{font-size:1rem}}.search-form{width:100%;max-width:500px;margin-bottom:2rem}.search-container{display:flex;align-items:center;background:#fffffff2;border-radius:25px;padding:.5rem;box-shadow:0 8px 32px #0000001a,inset 0 1px #fff3;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);transition:all .3s ease}.dark-mode .search-container{background:#ffffff1a;border-color:#ffffff1a}.search-container:focus-within{transform:translateY(-2px);box-shadow:0 12px 40px #00000026,inset 0 1px #fff3}.search-icon{padding:0 .75rem;color:#7f8c8d;display:flex;align-items:center}.dark-mode .search-icon{color:#ffffffb3}.search-input{flex:1;border:none;background:transparent;padding:.75rem .5rem;font-size:1rem;outline:none;font-family:Inter Display,sans-serif;color:#2c3e50}.dark-mode .search-input{color:#fff}.search-input::placeholder{color:#95a5a6}.dark-mode .search-input::placeholder{color:#ffffff80}.search-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50%;width:45px;height:45px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;color:#fff}.search-button:hover:not(:disabled){transform:scale(1.05) rotate(5deg);box-shadow:0 5px 15px #667eea66}.search-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.loading-spinner{width:20px;height:20px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.search-form{max-width:100%;margin-bottom:1.5rem}.search-container{border-radius:20px}.search-button{width:40px;height:40px}}@media (max-width: 480px){.search-input{font-size:.9rem;padding:.6rem .4rem}.search-icon{padding:0 .5rem}.search-icon svg{width:18px;height:18px}.search-button svg{width:18px;height:18px}}.header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding:1rem 0}.logo{display:flex;align-items:center;gap:.75rem;font-family:Poppins,sans-serif;font-weight:700;font-size:1.75rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.dark-mode .logo{background:linear-gradient(135deg,#ff9a44,#ffbf5e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.logo svg{width:32px;height:32px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}svg{fill:#fafafa}.dark-mode .logo svg{background:linear-gradient(135deg,#ff9a44,#ffbf5e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-controls{display:flex;align-items:center;gap:1rem}.unit-toggle{background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:25px;padding:.5rem 1rem;font-family:Poppins,sans-serif;font-weight:600;font-size:.9rem;color:#2c3e50;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dark-mode .unit-toggle{background:#ffffff0d;border-color:#ffffff1a;color:#fff}.unit-toggle:hover{transform:scale(1.05);background:#fff3}.theme-toggle{background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dark-mode .theme-toggle{background:#ffffff0d;border-color:#ffffff1a}.theme-toggle:hover{transform:scale(1.1) rotate(15deg);background:#fff3}.theme-toggle svg{width:20px;height:20px}@media (max-width: 768px){.header{margin-bottom:1.5rem;padding:.5rem 0}.logo{font-size:1.4rem}.logo svg{width:28px;height:28px}.theme-toggle{width:45px;height:45px}.unit-toggle{padding:.4rem .8rem;font-size:.8rem}}@media (max-width: 480px){.logo{font-size:1.2rem;gap:.5rem}.logo svg{width:24px;height:24px}.header-controls{gap:.75rem}.theme-toggle{width:40px;height:40px}.theme-toggle svg{width:18px;height:18px}}