:root{--grad-a:#1565d8;--grad-b:#0891b2;--surface:#ffffff1a;--surface-hov:#ffffff2e;--border:#ffffff2e;--shadow:0 8px 48px #00000038;--t1:#fff;--t2:#ffffff9e;--t3:#ffffff59;--accent:#60c8ff;--ring-track:#ffffff1f}[data-theme=light]{--grad-a:#dbeafe;--grad-b:#bfdbfe;--surface:#ffffff8c;--surface-hov:#ffffffc7;--border:#648cdc2e;--shadow:0 8px 40px #3c64c824;--t1:#1e3a5f;--t2:#1e3a5f9e;--t3:#1e3a5f59;--accent:#2563eb;--ring-track:#1e3a5f1a}.theme-night{--grad-a:#0a1628;--grad-b:#16243e}.theme-rain{--grad-a:#2c4a68;--grad-b:#4a6d8a}.theme-storm{--grad-a:#151c35;--grad-b:#2a3060}.theme-fog{--grad-a:#5a6878;--grad-b:#8a9baa}.theme-snow{--grad-a:#3a5878;--grad-b:#7aaac8}[data-theme=light].theme-rain{--grad-a:#c8dced;--grad-b:#dbedf8}[data-theme=light].theme-night{--grad-a:#b8c8e0;--grad-b:#9aaac8}[data-theme=light].theme-storm{--grad-a:#b8bed8;--grad-b:#a0abcc}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{color:var(--t1);justify-content:center;align-items:flex-start;min-height:100vh;font-family:Outfit,sans-serif;transition:color .4s;display:flex;overflow-x:hidden}#weather-bg{z-index:0;background:linear-gradient(145deg, var(--grad-a), var(--grad-b));transition:background 1s;position:fixed;inset:0;overflow:hidden}.bg-gradient-overlay{background:radial-gradient(at 70% 20%,#ffffff0f 0%,#0000 60%);position:absolute;inset:0}#particles-container{pointer-events:none;position:absolute;inset:0}.rain-drop{background:linear-gradient(#0000,#c8e6ffa6);border-radius:2px;width:1.5px;height:22px;animation:linear infinite rain-fall;position:absolute;top:-20px}@keyframes rain-fall{to{transform:translateY(105vh)translate(10px)}}.snow-flake{background:#ffffffd9;border-radius:50%;animation:linear infinite snow-fall;position:absolute;top:-10px}@keyframes snow-fall{0%{transform:translateY(0)translate(0)rotate(0)}50%{transform:translateY(50vh)translate(20px)rotate(180deg)}to{transform:translateY(105vh)translate(-10px)rotate(360deg)}}.star{background:#fff;border-radius:50%;animation:ease-in-out infinite twinkle;position:absolute}@keyframes twinkle{0%,to{opacity:.15}50%{opacity:1}}.lightning{opacity:0;background:#a0b0ff;animation:8s infinite flash;position:absolute;inset:0}@keyframes flash{0%,96%,to{opacity:0}97%{opacity:.12}98%{opacity:0}99%{opacity:.08}}.sun-glow{background:radial-gradient(circle,#ffdc502e 0%,#0000 70%);border-radius:50%;width:60vw;height:60vw;animation:5s ease-in-out infinite glow-pulse;position:absolute;top:-15%;right:-10%}@keyframes glow-pulse{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.app-container{z-index:1;flex-direction:column;gap:1.4rem;width:100%;max-width:1100px;margin:2rem auto;padding:0 1.4rem 3rem;display:flex;position:relative}.glass{background:var(--surface);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:24px;transition:background .4s,border .4s,box-shadow .4s}.glass:hover{background:var(--surface-hov)}.anim-card{opacity:0;animation:.5s cubic-bezier(.22,.68,0,1.2) forwards card-in;animation-delay:calc(var(--i,0) * 90ms + .2s);transform:translateY(24px)}@keyframes card-in{to{opacity:1;transform:translateY(0)}}header{z-index:200;align-items:center;gap:.9rem;padding-top:.3rem;display:flex;position:sticky;top:0}.search-wrapper{flex:1;max-width:540px;position:relative}.glass-search{border-radius:50px;align-items:center;gap:.7rem;padding:.75rem 1.1rem;transition:background .3s,box-shadow .3s;display:flex}.glass-search:focus-within{background:var(--surface-hov)}.glass-search svg{width:18px;height:18px;color:var(--t2);flex-shrink:0}.search-icon{color:var(--t2)}#search-input{color:var(--t1);background:0 0;border:none;outline:none;flex:1;font-family:Outfit,sans-serif;font-size:1rem}#search-input::placeholder{color:var(--t2)}#location-btn{background:var(--surface-hov);border:1px solid var(--border);cursor:pointer;width:34px;height:34px;color:var(--t1);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:transform .2s,background .2s;display:flex}#location-btn:hover{transform:scale(1.1)}.autocomplete-list{background:var(--surface);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--border);box-shadow:var(--shadow);z-index:300;border-radius:16px;list-style:none;position:absolute;top:calc(100% + 8px);left:0;right:0;overflow:hidden}.autocomplete-list li{cursor:pointer;border-bottom:1px solid var(--border);color:var(--t1);align-items:center;gap:.6rem;padding:.8rem 1.2rem;font-size:.95rem;transition:background .15s;display:flex}.autocomplete-list li:last-child{border-bottom:none}.autocomplete-list li:hover{background:var(--surface-hov)}.autocomplete-list li svg{width:16px;height:16px;color:var(--t2);flex-shrink:0}.autocomplete-list li .auto-country{color:var(--t2);margin-left:auto;font-size:.8rem}#theme-toggle{background:var(--surface);border:1px solid var(--border);cursor:pointer;width:44px;height:44px;color:var(--t1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:transform .3s,background .3s;display:flex}#theme-toggle:hover{background:var(--surface-hov);transform:scale(1.1)rotate(18deg)}#theme-toggle svg{width:20px;height:20px}.section-label{letter-spacing:1.6px;text-transform:uppercase;color:var(--t2);align-items:center;gap:.4rem;margin-bottom:1.2rem;font-size:.68rem;font-weight:700;display:flex}.section-label svg{width:13px;height:13px}.weather-content{grid-template-rows:auto auto;grid-template-columns:1fr 290px;gap:1.4rem;display:grid}.weather-content>*{min-width:0}.hero-card{grid-area:1/1/2/2;justify-content:space-between;align-items:center;gap:1rem;min-height:240px;padding:2.4rem 2.6rem 2rem;display:flex;position:relative;overflow:hidden}.hero-card:before{content:"";pointer-events:none;border-radius:inherit;background:radial-gradient(at 85% 15%,#ffffff17 0%,#0000 60%);position:absolute;inset:0}.hero-body{flex-direction:column;gap:.22rem;display:flex}.hero-city-row{align-items:flex-start;gap:.5rem;margin-bottom:.15rem;display:flex}.hero-city-row svg{width:18px;height:18px;color:var(--t2);flex-shrink:0;margin-top:.4rem}.hero-city-row h1{letter-spacing:-.5px;color:var(--t1);font-size:2rem;font-weight:700;line-height:1.1}.hero-city-row p{color:var(--t2);font-size:.82rem}.hero-date{color:var(--t2);margin-bottom:.5rem;font-size:.88rem}.hero-temp-block{align-items:flex-start;gap:.15rem;line-height:1;display:flex}.hero-temp{letter-spacing:-4px;color:var(--t1);font-size:6.5rem;font-weight:800;line-height:1}.hero-unit{color:var(--t2);margin-top:1.2rem;font-size:2rem;font-weight:300}.hero-desc{color:var(--t2);text-transform:capitalize;margin-top:.3rem;font-size:1.15rem;font-weight:400}.hero-hilo{color:var(--t2);margin-top:.1rem;font-size:.9rem;font-weight:500}.hero-pills{flex-wrap:wrap;gap:.6rem;margin-top:1rem;display:flex}.hero-pill{border:1px solid var(--border);color:var(--t1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff1f;border-radius:50px;align-items:center;gap:.3rem;padding:.35rem .75rem;font-size:.8rem;font-weight:500;display:flex}.hero-pill svg{width:13px;height:13px}.hero-icon-wrap{filter:drop-shadow(0 0 30px #ffffff38);flex-shrink:0;justify-content:center;align-items:center;width:140px;height:140px;display:flex}.hero-icon-wrap svg{stroke-width:1.1px;width:110px;height:110px}.sidebar{flex-direction:column;grid-area:1/2/3/3;padding:1.8rem;display:flex}.daily-list{flex-direction:column;flex:1;list-style:none;display:flex}.daily-item{border-bottom:1px solid var(--border);cursor:default;border-radius:10px;align-items:center;gap:.5rem;padding:.8rem .4rem;transition:background .2s,padding .2s;display:flex}.daily-item:last-child{border-bottom:none}.daily-item:hover{background:var(--surface-hov);padding-left:.7rem;padding-right:.7rem}.daily-item .d-day{color:var(--t1);flex:1;font-size:.92rem;font-weight:500}.daily-item svg{stroke-width:1.6px;flex-shrink:0;width:21px;height:21px}.daily-item .d-rain{color:var(--accent);min-width:28px;font-size:.68rem;font-weight:600}.daily-item .d-temps{justify-content:flex-end;gap:.45rem;min-width:66px;font-size:.9rem;font-weight:600;display:flex}.daily-item .d-hi{color:var(--t1)}.daily-item .d-lo{color:var(--t3)}.sun-row{border-top:1px solid var(--border);align-items:center;gap:.5rem;margin-top:1.2rem;padding-top:1rem;display:flex}.sun-item{flex:1;align-items:center;gap:.5rem;display:flex}.sun-item svg{color:#ffa94d;flex-shrink:0;width:20px;height:20px}.sun-lbl{letter-spacing:1px;text-transform:uppercase;color:var(--t3);font-size:.65rem;font-weight:700;display:block}.sun-val{color:var(--t1);font-size:1rem;font-weight:600;display:block}.sun-divider{background:var(--border);flex-shrink:0;width:1px;height:36px}.hourly-card{grid-area:2/1/3/2;padding:1.6rem 1.8rem 1.4rem}.hourly-scroll{scrollbar-width:thin;scrollbar-color:var(--border) transparent;gap:.5rem;padding-bottom:4px;display:flex;overflow-x:auto}.hourly-scroll::-webkit-scrollbar{height:3px}.hourly-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}.hourly-item{cursor:default;border-radius:16px;flex-direction:column;align-items:center;gap:.55rem;min-width:60px;padding:.8rem .35rem;transition:background .2s;display:flex}.hourly-item:hover{background:var(--surface-hov)}.hourly-item.now{background:var(--surface-hov);border:1px solid var(--border)}.hourly-item .h-time{letter-spacing:.5px;color:var(--t2);font-size:.72rem;font-weight:700}.hourly-item svg{stroke-width:1.6px;width:24px;height:24px}.hourly-item .h-temp{color:var(--t1);font-size:.92rem;font-weight:700}.hourly-item .h-rain{color:var(--accent);font-size:.65rem;font-weight:600}.sparkline{width:100%;height:60px;margin-top:.5rem;display:block;overflow:visible}.metrics-bento{grid-column:1/3;grid-template-columns:repeat(3,1fr);gap:1.2rem;display:grid}.mc{cursor:default;flex-direction:column;gap:.45rem;padding:1.5rem 1.6rem;transition:transform .25s;display:flex;position:relative;overflow:hidden}.mc:hover{transform:translateY(-4px)}.mc:after{content:"";pointer-events:none;background:#ffffff0a;border-radius:50%;width:80px;height:80px;position:absolute;top:-20px;right:-20px}.mc-label{letter-spacing:1.2px;text-transform:uppercase;color:var(--t2);align-items:center;gap:.4rem;font-size:.68rem;font-weight:700;display:flex}.mc-label svg{stroke-width:2px;width:13px;height:13px}.mc-val{letter-spacing:-1px;color:var(--t1);font-size:2.3rem;font-weight:700;line-height:1.1}.mc-unit{color:var(--t2);letter-spacing:0;font-size:.95rem;font-weight:400}.mc-sub{color:var(--t2);font-size:.78rem}.ring-wrap{justify-content:center;align-items:center;margin:.3rem 0;display:flex;position:relative}.ring-svg{width:80px;height:80px}.ring-track{fill:none;stroke:var(--ring-track);stroke-width:8px}.ring-fill{fill:none;stroke:var(--accent);stroke-width:8px;stroke-linecap:round;transform-origin:50%;transition:stroke-dashoffset .8s;transform:rotate(-90deg)}.ring-label{color:var(--t1);white-space:nowrap;font-size:1.05rem;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.arc-wrap{justify-content:center;align-items:flex-end;margin:.2rem 0;display:flex;position:relative}.arc-svg{width:100px;height:55px;overflow:visible}.arc-track{stroke:var(--ring-track)}.arc-fill{stroke:url(#uv-grad);stroke-linecap:round;transition:stroke-dashoffset .8s}.arc-center{text-align:center;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.arc-val{color:var(--t1);font-size:1.6rem;font-weight:700}.compass-wrap{justify-content:center;margin:.2rem 0;display:flex}.compass-svg{width:80px;height:80px}.compass-ring{fill:var(--ring-track);stroke:var(--border);stroke-width:1px}.compass-dir{fill:var(--t2);font-family:Outfit,sans-serif;font-size:8px;font-weight:700}.needle-n{fill:#ef4444}.needle-s{fill:var(--t3)}.compass-center{fill:var(--t1)}#compass-needle{transition:transform .8s cubic-bezier(.22,.68,0,1.2)}.vis-bar-wrap{background:var(--ring-track);border-radius:99px;height:5px;margin-top:.3rem;overflow:hidden}.vis-bar{background:var(--accent);border-radius:99px;height:100%;transition:width .7s}.dashboard{position:relative}.loading-state{flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:360px;display:flex}.spinner{border:3px solid var(--border);border-top-color:var(--t1);border-radius:50%;width:48px;height:48px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-box{text-align:center;color:var(--t1);background:#ef44441f;border:1px solid #ef44444d;border-radius:16px;padding:1.5rem 2rem;font-weight:500}.hidden{display:none!important}@media (width<=860px){.weather-content{grid-template-columns:1fr}.sidebar{grid-area:auto/1/auto/2}.metrics-bento{grid-column:1/2;grid-template-columns:repeat(2,1fr)}}@media (width<=520px){.app-container{gap:1rem;margin:1rem auto;padding:0 .9rem 2rem}.hero-card{flex-direction:column;align-items:flex-start;gap:1.2rem;min-height:auto;padding:1.6rem 1.4rem}.hero-icon-wrap{width:80px;height:80px;position:absolute;top:1.4rem;right:1.4rem}.hero-icon-wrap svg{width:64px;height:64px}.hero-body{padding-right:75px}.hero-temp{font-size:4.8rem}.metrics-bento{grid-template-columns:repeat(2,1fr);gap:.8rem}.mc-val{font-size:2rem}header{flex-direction:column;align-items:stretch;gap:1rem}.header-actions{flex-wrap:nowrap;justify-content:center;gap:.6rem}.hdr-btn{width:40px;height:40px}}.fav-btn{border:1px solid var(--border);cursor:pointer;width:40px;height:40px;color:var(--t2);z-index:10;background:#ffffff1a;border-radius:50%;justify-content:center;align-items:center;transition:all .3s;display:flex;position:absolute;top:1.5rem;right:1.5rem}.fav-btn:hover{background:#fff3;transform:scale(1.1)}.fav-btn.active{color:#facc15}.fav-btn.active svg{fill:#facc15}.header-actions{align-items:center;gap:.5rem;display:flex}.hdr-btn{background:var(--surface);border:1px solid var(--border);cursor:pointer;width:44px;height:44px;color:var(--t1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:50%;justify-content:center;align-items:center;transition:all .3s;display:flex}.hdr-btn:hover{background:var(--surface-hov);transform:scale(1.1)}.unit-btn{font-size:1rem;font-weight:700}.favs-dropdown{z-index:300;transform-origin:100% 0;width:280px;padding:1rem;animation:.3s cubic-bezier(.175,.885,.32,1.275) drop-in;position:absolute;top:70px;right:1.5rem}.favs-title{color:var(--t2);text-transform:uppercase;align-items:center;gap:.4rem;margin-bottom:.8rem;font-size:.85rem;font-weight:700;display:flex}#favs-list{flex-direction:column;gap:.4rem;list-style:none;display:flex}.fav-item{cursor:pointer;background:#ffffff0d;border-radius:10px;justify-content:space-between;align-items:center;padding:.6rem .8rem;transition:background .2s;display:flex}.fav-item:hover{background:#ffffff26}.fav-item-name{font-size:.95rem;font-weight:600}.fav-item-del{color:var(--t3);cursor:pointer;background:0 0;border:none;padding:.2rem}.fav-item-del:hover{color:#ef4444}.favs-empty{color:var(--t3);text-align:center;padding:1rem 0;font-size:.85rem}@keyframes drop-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.skeleton-grid{grid-template-columns:1fr 290px;gap:1.4rem;display:grid}.sk-card{background:var(--surface);border-radius:24px;position:relative;overflow:hidden}.sk-card:after{content:"";background:linear-gradient(90deg,#0000,#ffffff14,#0000);animation:1.5s infinite shimmer;position:absolute;inset:0;transform:translate(-100%)}@keyframes shimmer{to{transform:translate(100%)}}.sk-hero{grid-column:1/2;height:240px}.sk-sidebar{grid-area:1/2/4/3;height:600px}.sk-hourly{grid-column:1/2;height:180px}.sk-metric{height:150px}.weekly-chart-wrap{border-top:1px solid var(--border);margin-top:1.5rem;padding-top:1rem}.weekly-chart{width:100%;height:70px;margin-top:.5rem;overflow:visible}.wk-dot{fill:var(--accent);stroke:var(--surface);stroke-width:2px}.wk-lbl{fill:var(--t1);text-anchor:middle;font-family:Outfit,sans-serif;font-size:10px;font-weight:600}.moon-display{justify-content:center;margin:.5rem 0;display:flex}.moon-emoji{filter:drop-shadow(0 0 15px #ffffff4d);font-size:3rem}.aqi-bar-wrap{background:var(--ring-track);border-radius:99px;height:6px;margin-top:.3rem;overflow:hidden}.aqi-bar{background:linear-gradient(90deg,#4ade80,#facc15,#fb923c,#ef4444,#a855f7);border-radius:99px;width:0%;height:100%;transition:width 1s}.alert-banner{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;z-index:1000;background:#ef4444e6;border-radius:50px;align-items:center;gap:.8rem;padding:.8rem 1.5rem;animation:.4s cubic-bezier(.175,.885,.32,1.275) slide-down;display:flex;position:fixed;top:1rem;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #ef44444d}.alert-banner button{color:#fff;cursor:pointer;opacity:.8;background:0 0;border:none;align-items:center;display:flex}.alert-banner button:hover{opacity:1}.toast{background:var(--t1);color:#000;z-index:1000;box-shadow:var(--shadow);border-radius:50px;padding:.8rem 1.5rem;font-weight:600;animation:.3s cubic-bezier(.175,.885,.32,1.275) slide-up;position:fixed;bottom:2rem;left:50%;transform:translate(-50%)}@keyframes slide-down{0%{transform:translate(-50%,-150%)}to{transform:translate(-50%)}}@keyframes slide-up{0%{transform:translate(-50%,150%)}to{transform:translate(-50%)}}.map-section{grid-column:1/3;padding:1.5rem}.map-container{z-index:1;border-radius:16px;width:100%;height:300px;overflow:hidden}.modal-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:2000;background:#00000080;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-panel{background:var(--surface);border-radius:24px;width:100%;max-width:800px;max-height:90vh;padding:2rem;overflow-y:auto}.modal-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.modal-header h2{align-items:center;gap:.5rem;font-size:1.5rem;display:flex}.modal-close{width:36px;height:36px;color:var(--t1);cursor:pointer;background:#ffffff1a;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.modal-close:hover{background:#fff3}.compare-search-row{gap:.5rem;margin-bottom:2rem;display:flex}.compare-search-row input{border:1px solid var(--border);color:var(--t1);background:#0003;border-radius:50px;flex:1;padding:.8rem 1.2rem;font-family:Outfit}.compare-search-row button{background:var(--t1);color:#000;cursor:pointer;border:none;border-radius:50px;padding:0 1.5rem;font-weight:600}.compare-grid{grid-template-columns:1fr 1fr;gap:1.5rem;display:grid}.compare-hint{text-align:center;color:var(--t2);grid-column:1/3;padding:3rem 0}.compare-card{text-align:center;background:#0003;border-radius:20px;padding:1.5rem}.compare-card h3{margin-bottom:.5rem;font-size:1.8rem}.compare-card .c-temp{margin:1rem 0;font-size:4rem;font-weight:800;line-height:1}.compare-card .c-desc{color:var(--t2);margin-bottom:1.5rem;font-size:1.1rem}.c-metrics{text-align:left;flex-direction:column;gap:.8rem;display:flex}.c-metric{border-bottom:1px solid var(--border);justify-content:space-between;padding-bottom:.5rem;display:flex}.c-metric:last-child{border:none}@media (width<=860px){.skeleton-grid{grid-template-columns:1fr}.sk-sidebar{grid-area:auto/1/auto/2;height:300px}.compare-grid{grid-template-columns:1fr}.header-actions{flex-wrap:nowrap;justify-content:flex-end}}