:root{--font-display:"Outfit", sans-serif;--font-body:"Poppins", sans-serif;--white:#fff;--black:#000;--glass-bg:#ffffff1a;--glass-bg2:#ffffff12;--glass-border:#ffffff2e;--glass-shadow:#00000040;--txt-primary:#fffffff7;--txt-secondary:#ffffffa6;--txt-tertiary:#fff6;--accent:#60a5fa;--accent2:#f59e0b;--r-sm:12px;--r-md:20px;--r-lg:28px;--r-xl:40px;--sh-card:0 24px 60px #00000059, 0 4px 16px #0003;--spring:cubic-bezier(.34, 1.56, .64, 1);--ease:cubic-bezier(.4, 0, .2, 1);--bg-default:linear-gradient(160deg, #1e3a5f 0%, #0d1b2a 100%);--bg-clear-day:linear-gradient(160deg, #f97316 0%, #fbbf24 35%, #60a5fa 100%);--bg-clear-night:linear-gradient(160deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);--bg-cloudy:linear-gradient(160deg, #4b5563 0%, #6b7280 50%, #9ca3af 100%);--bg-rain:linear-gradient(160deg, #1e293b 0%, #334155 50%, #475569 100%);--bg-snow:linear-gradient(160deg, #e0e7ff 0%, #c7d2fe 50%, #a5b4fc 100%);--bg-storm:linear-gradient(160deg, #0f172a 0%, #1e1b4b 50%, #1e293b 100%);--bg-mist:linear-gradient(160deg, #374151 0%, #6b7280 50%, #9ca3af 100%)}body.light-mode{--glass-bg:#ffffff38;--glass-border:#ffffff73;--glass-shadow:#0000001f}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--bg-default);min-height:100vh;color:var(--txt-primary);transition:background 1.2s var(--ease);position:relative;overflow-x:hidden}.weather-canvas{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.sun-wrap{opacity:0;width:160px;height:160px;transition:opacity 1s var(--ease);justify-content:center;align-items:center;display:flex;position:absolute;top:6%;right:10%}.sun-core{z-index:2;background:radial-gradient(circle,#fffbeb 30%,#fbbf24 70%,#f97316 100%);border-radius:50%;width:80px;height:80px;animation:3s ease-in-out infinite sun-pulse;position:absolute;box-shadow:0 0 40px 20px #fbbf2499,0 0 80px 40px #f973164d}.sun-glow{background:radial-gradient(circle,#fbbf244d 0%,#0000 70%);border-radius:50%;width:140px;height:140px;animation:3s ease-in-out .5s infinite sun-pulse;position:absolute}.sun-rays{z-index:1;background:conic-gradient(#fbbf2466 0deg,#0000 20deg,#fbbf2466 40deg,#0000 60deg,#fbbf2466 80deg,#0000 100deg,#fbbf2466 120deg,#0000 140deg,#fbbf2466 160deg,#0000 180deg,#fbbf2466 200deg,#0000 220deg,#fbbf2466 240deg,#0000 260deg,#fbbf2466 280deg,#0000 300deg,#fbbf2466 320deg,#0000 340deg,#fbbf2466 360deg);border-radius:50%;width:160px;height:160px;animation:20s linear infinite sun-rotate;position:absolute}@keyframes sun-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}@keyframes sun-rotate{to{transform:rotate(360deg)}}.moon-wrap{opacity:0;width:100px;height:100px;transition:opacity 1s var(--ease);justify-content:center;align-items:center;display:flex;position:absolute;top:8%;right:12%}.moon-body{background:radial-gradient(circle at 35% 35%,#e2e8f0,#94a3b8);border-radius:50%;width:60px;height:60px;animation:6s ease-in-out infinite moon-float;box-shadow:inset -10px -4px #0003,0 0 30px 10px #94a3b859}.moon-glow{background:radial-gradient(circle,#94a3b833 0%,#0000 70%);border-radius:50%;width:100px;height:100px;animation:6s ease-in-out infinite moon-float;position:absolute}@keyframes moon-float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.stars-layer{opacity:0;transition:opacity 1.5s var(--ease);position:absolute;inset:0}.star{animation:twinkle var(--dur,3s) ease-in-out infinite var(--delay,0s);background:#fff;border-radius:50%;position:absolute}@keyframes twinkle{0%,to{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}.clouds-layer{opacity:0;transition:opacity 1s var(--ease);position:absolute;inset:0}.cloud{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffff1f;border-radius:50px;position:absolute}.cloud:before,.cloud:after{content:"";background:#ffffff1f;border-radius:50%;position:absolute}.cloud-1{width:220px;height:55px;animation:28s linear infinite drift-cloud;top:12%;left:-240px}.cloud-1:before{width:100px;height:80px;top:-40px;left:30px}.cloud-1:after{width:70px;height:60px;top:-30px;left:100px}.cloud-2{opacity:.7;width:160px;height:45px;animation:22s linear 6s infinite drift-cloud;top:22%;left:-200px}.cloud-2:before{width:80px;height:65px;top:-32px;left:25px}.cloud-2:after{width:55px;height:48px;top:-24px;left:80px}.cloud-3{opacity:.5;width:280px;height:65px;animation:35s linear 3s infinite drift-cloud;top:8%;left:-320px}.cloud-3:before{width:120px;height:90px;top:-45px;left:40px}.cloud-3:after{width:85px;height:68px;top:-35px;left:130px}.cloud-4{opacity:.6;width:190px;height:50px;animation:30s linear 12s infinite drift-cloud;top:18%;left:-230px}.cloud-4:before{width:88px;height:70px;top:-35px;left:28px}.cloud-4:after{width:62px;height:52px;top:-26px;left:92px}@keyframes drift-cloud{to{transform:translate(calc(100vw + 400px))}}.rain-layer{opacity:0;transition:opacity .8s var(--ease);position:absolute;inset:0}.raindrop{width:2px;animation:fall-rain var(--dur,.8s) linear infinite var(--delay,0s);background:linear-gradient(#0000,#93c5fdcc);border-radius:2px;position:absolute;top:-20px}@keyframes fall-rain{to{transform:translateY(calc(100vh + 40px))}}.glass-overlay{opacity:0;-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px);transition:opacity 1s var(--ease);background:radial-gradient(at 20% 30%,#93c5fd14 0%,#0000 40%),radial-gradient(at 70% 60%,#93c5fd0f 0%,#0000 35%),radial-gradient(at 50% 80%,#93c5fd12 0%,#0000 30%);position:absolute;inset:0}.snow-layer{opacity:0;transition:opacity 1s var(--ease);position:absolute;inset:0}.snowflake{color:#ffffffd9;font-size:var(--sz,14px);animation:fall-snow var(--dur,6s) linear infinite var(--delay,0s);-webkit-user-select:none;user-select:none;position:absolute;top:-20px}@keyframes fall-snow{0%{opacity:1;transform:translateY(-20px)translate(0)rotate(0)}to{transform:translateY(calc(100vh + 30px)) translateX(var(--drift,30px)) rotate(360deg);opacity:.4}}.lightning-wrap{opacity:0;position:absolute;inset:0}.bolt{opacity:0;filter:drop-shadow(0 0 20px #ffff64e6);animation:lightning-flash var(--flash-dur,8s) ease-in-out infinite var(--flash-delay,0s);font-size:3rem;position:absolute}.bolt-1{top:5%;left:20%}.bolt-2{top:10%;right:25%}@keyframes lightning-flash{0%,94%,to{opacity:0}95%{opacity:1;transform:scaleY(1.2)}96%{opacity:0}97%{opacity:.8}98%{opacity:0}}.app{z-index:1;flex-direction:column;gap:20px;max-width:680px;margin:0 auto;padding:24px 20px 80px;display:flex;position:relative}.topbar{animation:slide-down .6s var(--ease) both;justify-content:space-between;align-items:center;display:flex}.logo{align-items:center;gap:8px;display:flex}.logo-mark{color:var(--accent);text-shadow:0 0 14px var(--accent);font-size:1.3rem;animation:3s ease-in-out infinite logo-pulse}@keyframes logo-pulse{0%,to{text-shadow:0 0 14px var(--accent)}50%{text-shadow:0 0 28px var(--accent), 0 0 50px var(--accent)}}.logo-text{font-family:var(--font-display);letter-spacing:.15em;color:var(--txt-primary);font-size:1.4rem;font-weight:900}.topbar-actions{align-items:center;gap:10px;display:flex}.unit-toggle{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:100px;padding:4px;display:flex}.unit-btn{color:var(--txt-secondary);font-family:var(--font-display);cursor:pointer;transition:all .25s var(--ease);letter-spacing:.05em;background:0 0;border:none;border-radius:100px;padding:5px 12px;font-size:.82rem;font-weight:600}.unit-btn.active{color:var(--txt-primary);background:#ffffff2e;box-shadow:0 2px 8px #0003}.unit-btn:not(.active):hover{color:var(--txt-primary)}.icon-btn{background:var(--glass-bg);border:1px solid var(--glass-border);cursor:pointer;width:40px;height:40px;color:var(--txt-secondary);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:all .25s var(--spring);border-radius:50%;justify-content:center;align-items:center;display:flex}.icon-btn:hover{color:var(--txt-primary);background:#ffffff26;transform:rotate(20deg)scale(1.1)}.search-section{animation:fade-up .65s var(--ease) .1s both}.search-container{gap:10px;display:flex}.search-field{background:var(--glass-bg);border:1.5px solid var(--glass-border);border-radius:var(--r-xl);-webkit-backdrop-filter:blur(20px);min-height:56px;transition:border-color .25s var(--ease), box-shadow .25s var(--ease);flex:1;align-items:center;gap:0;padding:0 8px 0 18px;display:flex;box-shadow:0 8px 32px #0003}.search-field:focus-within{border-color:#ffffff73;box-shadow:0 8px 40px #0000004d,0 0 0 3px #ffffff14}.s-icon{color:var(--txt-tertiary);transition:color .2s var(--ease);flex-shrink:0;margin-right:10px}.search-field:focus-within .s-icon{color:var(--txt-secondary)}.s-input{font-family:var(--font-body);color:var(--txt-primary);caret-color:#ffffffb3;background:0 0;border:none;outline:none;flex:1;min-width:0;font-size:.98rem;font-weight:400}.s-input::placeholder{color:var(--txt-tertiary)}.locate-btn{border-radius:var(--r-md);cursor:pointer;width:40px;height:40px;color:var(--txt-secondary);transition:all .25s var(--spring);background:#ffffff14;border:1px solid #ffffff26;flex-shrink:0;justify-content:center;align-items:center;margin-right:2px;display:flex}.locate-btn:hover{color:var(--txt-primary);background:#ffffff29;transform:scale(1.1)}.search-btn{border-radius:var(--r-xl);min-height:56px;font-family:var(--font-display);color:var(--txt-primary);cursor:pointer;letter-spacing:.04em;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:all .25s var(--spring);white-space:nowrap;background:linear-gradient(135deg,#ffffff38 0%,#ffffff1a 100%);border:1.5px solid #ffffff47;align-items:center;gap:8px;padding:0 24px;font-size:.92rem;font-weight:600;display:flex;box-shadow:0 8px 24px #0003,inset 0 1px #fff3}.search-btn:hover{background:#ffffff40;transform:translateY(-2px)scale(1.03);box-shadow:0 12px 32px #0000004d,inset 0 1px #ffffff40}.search-btn:active{transform:scale(.97)}.search-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.error-msg{border-radius:var(--r-md);color:#fca5a5;animation:shake .4s var(--ease);background:#ef444426;border:1px solid #ef44444d;align-items:center;gap:8px;margin-top:12px;padding:11px 18px;font-size:.87rem;display:flex}.loader{animation:fade-in .4s var(--ease);flex-direction:column;align-items:center;gap:20px;padding:64px 0;display:flex}.loader-orb{justify-content:center;align-items:center;width:64px;height:64px;display:flex;position:relative}.lo-ring{animation:spin var(--spd,1s) linear infinite;border:2px solid #0000;border-radius:50%;position:absolute;inset:0}.lo-ring.r1{--spd:1.1s;border-top-color:#fffc}.lo-ring.r2{--spd:.9s;border-top-color:#ffffff80;animation-direction:reverse;inset:10px}.lo-ring.r3{--spd:1.4s;border-top-color:#ffffff4d;inset:20px}.lo-core{background:#fff;border-radius:50%;width:12px;height:12px;animation:1.5s ease-in-out infinite core-pulse;box-shadow:0 0 12px #fffc}@keyframes core-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.4)}}.loader-label{color:var(--txt-secondary);letter-spacing:.06em;text-transform:uppercase;font-size:.88rem}.glass-card{background:var(--glass-bg);border:1.5px solid var(--glass-border);border-radius:var(--r-lg);-webkit-backdrop-filter:blur(24px);box-shadow:var(--sh-card), inset 0 1px 0 #ffffff26;transition:box-shadow .3s var(--ease)}.glass-card:hover{box-shadow:var(--sh-card), inset 0 1px 0 #fff3, 0 0 60px #ffffff0a}.hero-card{animation:card-in .6s var(--spring) both;padding:30px 28px 24px}.hero-card:before{content:"";background:linear-gradient(90deg,#0000,#ffffff80,#0000);border-radius:1px;height:1px;position:absolute;top:0;left:24px;right:24px}.hero-card{position:relative;overflow:hidden}.hero-card:after{content:"";pointer-events:none;background:radial-gradient(at 50% 0,#ffffff0a 0%,#0000 60%);width:200%;height:200%;position:absolute;top:-50%;left:-50%}.hero-top{justify-content:space-between;align-items:flex-start;margin-bottom:12px;display:flex}.hero-left{flex:1}.hero-right{flex-shrink:0}.location-row{color:var(--txt-secondary);align-items:center;gap:6px;margin-bottom:4px;display:flex}.city-name{font-family:var(--font-display);color:var(--txt-primary);letter-spacing:-.01em;font-size:clamp(1.4rem,4vw,1.9rem);font-weight:700}.city-time{font-family:var(--font-display);color:var(--txt-primary);letter-spacing:.05em;margin-bottom:2px;font-size:2rem;font-weight:200;line-height:1}.city-date{color:var(--txt-secondary);font-size:.8rem;font-weight:300}.big-icon{filter:drop-shadow(0 6px 20px #0006);width:90px;height:90px;animation:4s ease-in-out infinite icon-float}@keyframes icon-float{0%,to{transform:translateY(0)rotate(-3deg)scale(1)}50%{transform:translateY(-12px)rotate(3deg)scale(1.05)}}.temp-display{align-items:flex-start;gap:4px;margin:8px 0 4px;display:flex}.temp-num{font-family:var(--font-display);color:var(--txt-primary);letter-spacing:-.04em;font-size:clamp(5rem,16vw,7.5rem);font-weight:900;line-height:.9}.temp-unit{font-family:var(--font-display);color:var(--txt-secondary);letter-spacing:-.02em;margin-top:12px;font-size:2.5rem;font-weight:300}.condition-row{flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:24px;display:flex}.cond-badge{color:var(--txt-primary);text-transform:capitalize;letter-spacing:.02em;background:#ffffff1f;border:1px solid #fff3;border-radius:100px;padding:5px 16px;font-size:.84rem;font-weight:500}.feels-like{color:var(--txt-secondary);font-size:.84rem}.hero-stats{border-radius:var(--r-md);background:#ec7dd40d;border:1px solid #ffffff1a;align-items:center;gap:0;padding:14px 8px;display:flex}.hstat{transition:transform .25s var(--spring);flex-direction:column;flex:1;align-items:center;gap:4px;display:flex}.hstat:hover{transform:translateY(-3px)}.hstat svg{color:var(--txt-tertiary)}.hstat>span:nth-child(2){font-family:var(--font-display);color:var(--txt-primary);font-size:.95rem;font-weight:600}.hstat-lbl{color:var(--txt-tertiary);text-transform:uppercase;letter-spacing:.08em;font-size:.65rem}.hstat-sep{background:#ffffff1f;flex-shrink:0;width:1px;height:32px}.sun-card{animation:card-in .6s var(--spring) .1s both;padding:20px 24px}.sun-card-inner{align-items:center;gap:16px;display:flex}.sun-info{flex-direction:column;flex-shrink:0;align-items:flex-start;gap:2px;display:flex}.sun-info-r{align-items:flex-end}.sun-ico{font-size:1.2rem}.sun-val{font-family:var(--font-display);color:var(--txt-primary);font-size:1.05rem;font-weight:600}.sun-lbl{color:var(--txt-tertiary);text-transform:uppercase;letter-spacing:.07em;font-size:.68rem}.sun-arc-wrap{flex:1;align-items:flex-end;height:56px;display:flex}.sun-arc-svg{width:100%;height:100%}.weather-display{animation:fade-in .4s var(--ease);flex-direction:column;gap:14px;display:flex}.history-section{animation:fade-up .5s var(--ease) both}.history-head{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.history-label{font-family:var(--font-display);color:var(--txt-secondary);letter-spacing:.1em;text-transform:uppercase;align-items:center;gap:8px;font-size:.82rem;font-weight:600;display:flex}.live-dot{background:#4ade80;border-radius:50%;width:7px;height:7px;animation:2s ease-in-out infinite live-pulse;box-shadow:0 0 8px #4ade80}@keyframes live-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.8)}}.clear-btn{border-radius:var(--r-sm);font-family:var(--font-body);color:var(--txt-secondary);cursor:pointer;transition:all .2s var(--ease);background:#ffffff0f;border:1px solid #ffffff1f;padding:5px 14px;font-size:.78rem;font-weight:400}.clear-btn:hover{color:#fca5a5;background:#ef44441f;border-color:#ef444440}.history-chips{flex-wrap:wrap;gap:8px;display:flex}.hist-chip{background:var(--glass-bg2);font-family:var(--font-body);color:var(--txt-secondary);cursor:pointer;transition:all .2s var(--spring);animation:chip-in .3s var(--spring) both;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #ffffff1f;border-radius:100px;align-items:center;gap:6px;padding:8px 16px;font-size:.84rem;font-weight:400;display:flex}.hist-chip:hover{color:var(--txt-primary);background:#ffffff24;border-color:#ffffff40;transform:translateY(-2px);box-shadow:0 4px 16px #0003}.chip-dot{background:var(--txt-tertiary);border-radius:50%;width:4px;height:4px;transition:background .2s}.hist-chip:hover .chip-dot{background:var(--accent)}body.weather-default{background:var(--bg-default)}body.weather-clear-day{background:var(--bg-clear-day)}body.weather-clear-night{background:var(--bg-clear-night)}body.weather-cloudy{background:var(--bg-cloudy)}body.weather-rain{background:var(--bg-rain)}body.weather-snow{background:var(--bg-snow)}body.weather-snow .glass-card{background:#ffffff2e}body.weather-storm{background:var(--bg-storm)}body.weather-mist{background:var(--bg-mist)}@keyframes slide-down{0%{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-up{0%{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes card-in{0%{opacity:0;transform:translateY(30px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes chip-in{0%{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-7px)}40%{transform:translate(7px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}body.light-mode{--txt-primary:#0f172af2;--txt-secondary:#1e293ba6;--txt-tertiary:#1e293b66;--glass-bg:#ffffff59;--glass-bg2:#ffffff40;--glass-border:#ffffff8c;--glass-shadow:#00000014}body.light-mode.weather-snow{--txt-primary:#0f172af2;--txt-secondary:#1e293ba6}@media (width<=520px){.app{gap:14px;padding:18px 14px 60px}.hero-card{padding:22px 18px 18px}.search-container{flex-direction:column}.search-btn{justify-content:center;min-height:50px}.temp-num{font-size:5.5rem}.hero-stats{flex-wrap:wrap}.hstat{min-width:40%;padding:6px 0}.hstat-sep:nth-child(4){display:none}.big-icon{width:72px;height:72px}}