:root{
  --bg:#06101d;--bg2:#091827;--card:rgba(12,28,45,.72);--card-solid:#0c1c2d;--card-hover:rgba(17,39,61,.88);
  --text:#f5f9ff;--muted:#93a8bd;--line:rgba(255,255,255,.09);--line-strong:rgba(255,255,255,.15);
  --cyan:#63dcff;--blue:#5f8dff;--violet:#9876ff;--green:#59e1b3;--yellow:#ffd76a;--orange:#ff9d61;--red:#ff667d;
  --shadow:0 24px 80px rgba(0,0,0,.28);--radius:28px;--radius-sm:19px;--shell:min(1500px,calc(100% - 40px));
}
html[data-theme="light"]{--bg:#edf4fa;--bg2:#f7fbff;--card:rgba(255,255,255,.78);--card-solid:#fff;--card-hover:#fff;--text:#122131;--muted:#667b8e;--line:rgba(20,44,65,.09);--line-strong:rgba(20,44,65,.16);--shadow:0 24px 70px rgba(33,67,98,.13)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 55%,var(--bg) 100%);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh;line-height:1.45;overflow-x:hidden}
button,input{font:inherit}.shell{width:var(--shell);margin:0 auto}.ambient{position:fixed;pointer-events:none;filter:blur(80px);opacity:.19;z-index:-1;border-radius:50%}.ambient-a{width:520px;height:520px;background:#1b9dff;top:-180px;left:-120px}.ambient-b{width:620px;height:620px;background:#7b41ff;right:-220px;top:300px}
.topbar{position:sticky;top:0;z-index:1000;background:rgba(6,16,29,.72);border-bottom:1px solid var(--line);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}html[data-theme="light"] .topbar{background:rgba(237,244,250,.76)}.topbar-inner{height:86px;display:grid;grid-template-columns:auto minmax(280px,650px) auto;gap:28px;align-items:center}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}.brand-mark{width:45px;height:45px;position:relative;display:block}.brand-sun{position:absolute;width:22px;height:22px;right:2px;top:3px;border-radius:50%;background:var(--yellow);box-shadow:0 0 30px rgba(255,215,106,.35)}.brand-cloud{position:absolute;width:34px;height:17px;left:2px;bottom:6px;border-radius:14px;background:linear-gradient(135deg,var(--cyan),var(--blue));box-shadow:0 0 24px rgba(99,220,255,.22)}.brand-cloud:before{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:inherit;left:6px;top:-8px}.brand-text{display:flex;flex-direction:column;line-height:1.05}.brand-text strong{font-size:20px;letter-spacing:-.5px}.brand-text small{font-size:10px;color:var(--muted);margin-top:5px;text-transform:uppercase;letter-spacing:.12em}
.search-wrap{position:relative}.search-box{height:50px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.045);display:flex;align-items:center;padding:0 8px 0 17px;transition:.2s}.search-box:focus-within{border-color:rgba(99,220,255,.55);box-shadow:0 0 0 4px rgba(99,220,255,.08);background:rgba(255,255,255,.065)}.search-icon{font-size:24px;color:var(--muted);transform:rotate(-20deg);margin-right:10px}.search-box input{border:0;outline:0;background:transparent;color:var(--text);width:100%;font-size:15px}.search-box input::placeholder{color:var(--muted)}.search-results{position:absolute;left:0;right:0;top:58px;background:var(--card-solid);border:1px solid var(--line);border-radius:20px;padding:8px;box-shadow:var(--shadow);max-height:390px;overflow:auto}.search-result{width:100%;border:0;background:transparent;color:var(--text);display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;text-align:left;cursor:pointer}.search-result:hover{background:rgba(99,220,255,.08)}.search-result-icon{width:34px;height:34px;border-radius:11px;background:rgba(99,220,255,.1);display:grid;place-items:center}.search-result strong{display:block;font-size:14px}.search-result small{color:var(--muted)}.search-result .country-code{font-size:11px;color:var(--muted);border:1px solid var(--line);padding:3px 6px;border-radius:7px}
.top-actions{display:flex;gap:9px;align-items:center}.icon-btn,.pill-btn,.ghost-btn{border:1px solid var(--line);background:rgba(255,255,255,.045);color:var(--text);cursor:pointer;transition:.2s}.icon-btn:hover,.pill-btn:hover,.ghost-btn:hover{background:rgba(255,255,255,.09);border-color:var(--line-strong)}.icon-btn{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:19px}.pill-btn{height:44px;padding:0 14px;border-radius:14px;display:flex;gap:7px;align-items:center}.pill-btn span{color:var(--cyan);font-weight:800}.pill-btn b{font-size:12px}.ghost-btn{width:40px;height:40px;border-radius:13px;font-size:22px}
.main-shell{padding:24px 0 60px}.status-line{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px;margin:2px 0 14px}.pulse-dot,.live-dot{display:inline-block;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(89,225,179,.55);animation:pulse 2s infinite}.pulse-dot{width:8px;height:8px}.live-dot{width:7px;height:7px;margin-right:4px}@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(89,225,179,0)}100%{box-shadow:0 0 0 0 rgba(89,225,179,0)}}
.card{background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018)),var(--card);border:1px solid var(--line);box-shadow:0 16px 60px rgba(0,0,0,.12);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}html[data-theme="light"] .card{background:rgba(255,255,255,.82)}.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(430px,.85fr);gap:18px}.hero-card{border-radius:var(--radius);padding:28px 30px;min-height:385px;position:relative;overflow:hidden}.hero-card:after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;right:-120px;top:-180px;background:radial-gradient(circle,rgba(99,220,255,.2),transparent 65%);pointer-events:none}.hero-head{display:flex;align-items:flex-start;justify-content:space-between}.eyebrow,.section-kicker{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}.hero-head h1{font-size:34px;line-height:1;margin:9px 0 8px;letter-spacing:-1.3px}.hero-head p{margin:0;color:var(--muted);font-size:13px}.current-weather{display:grid;grid-template-columns:126px minmax(200px,1fr) minmax(180px,.75fr);align-items:center;gap:24px;margin-top:30px}.weather-glyph{font-size:88px;line-height:1;filter:drop-shadow(0 8px 24px rgba(99,220,255,.22));text-align:center}.temperature{font-size:76px;font-weight:760;letter-spacing:-5px;line-height:.92}.temperature sup{font-size:24px;letter-spacing:0;vertical-align:top;margin-left:4px;color:var(--muted);font-weight:500}.condition{font-size:18px;font-weight:700;margin-top:12px}.feels{color:var(--muted);font-size:13px;margin-top:4px}.feels strong{color:var(--text)}.hero-side{display:grid;gap:10px}.hero-stat{border-left:1px solid var(--line);padding:5px 0 5px 17px}.hero-stat span{display:block;color:var(--muted);font-size:11px}.hero-stat strong{display:block;margin-top:3px;font-size:15px}.hero-footer{margin-top:28px;padding-top:19px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}.hero-footer>div:first-child,.hero-footer>div:last-child{display:flex;flex-direction:column}.hero-footer span{font-size:10px;color:var(--muted)}.hero-footer strong{font-size:13px}.sun-track{height:4px;border-radius:999px;background:var(--line);position:relative}.sun-track span{display:block;height:100%;width:30%;background:linear-gradient(90deg,var(--yellow),var(--orange));border-radius:inherit}.sun-track i{position:absolute;top:50%;left:30%;transform:translate(-50%,-50%);font-size:14px;color:var(--yellow);font-style:normal;text-shadow:0 0 14px rgba(255,215,106,.8)}
.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.metric-card{border-radius:22px;padding:18px;display:flex;align-items:center;gap:14px;min-height:116px}.metric-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(99,220,255,.09);font-size:20px}.metric-card span{display:block;font-size:11px;color:var(--muted)}.metric-card strong{display:block;font-size:19px;margin:2px 0}.metric-card small{display:block;font-size:10px;color:var(--muted)}
.section-block{margin-top:28px}.section-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:13px}.section-title-row h2{margin:4px 0 0;font-size:22px;letter-spacing:-.6px}.section-title-row.compact{align-items:flex-start;margin-bottom:20px}.segmented{display:flex;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:13px;padding:3px}.seg{border:0;background:transparent;color:var(--muted);padding:7px 11px;border-radius:10px;font-size:11px;font-weight:700;cursor:pointer}.seg.active{background:rgba(99,220,255,.12);color:var(--cyan)}.data-badge{font-size:10px;color:var(--muted);border:1px solid var(--line);padding:6px 9px;border-radius:999px}
.hourly-strip{border-radius:24px;padding:8px;display:flex;overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x proximity}.hour-card{min-width:105px;padding:15px 10px;text-align:center;border-radius:18px;scroll-snap-align:start;transition:.2s}.hour-card:hover,.hour-card.is-now{background:rgba(99,220,255,.08)}.hour-time{font-size:11px;color:var(--muted)}.hour-icon{font-size:28px;margin:10px 0 7px}.hour-temp{font-weight:800;font-size:17px}.hour-rain{font-size:10px;color:var(--cyan);margin-top:5px}.hour-wind{font-size:9px;color:var(--muted);margin-top:3px}
.radar-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.55fr);gap:16px}.radar-main{border-radius:var(--radius);overflow:hidden}.radar-header{padding:22px 23px 0;margin-bottom:14px;align-items:center}.radar-actions{display:flex;gap:8px}.radar-play{color:var(--cyan)}.radar-map{height:520px;background:#07111c}.leaflet-container{font:inherit}.leaflet-control-zoom a{background:var(--card-solid)!important;color:var(--text)!important;border-color:var(--line)!important}.leaflet-control-attribution{background:rgba(5,15,25,.72)!important;color:#b4c1cf!important}.leaflet-control-attribution a{color:#8fdfff!important}.radar-controls{padding:16px 22px 20px;display:grid;grid-template-columns:130px 1fr 150px;align-items:center;gap:15px}.radar-time{display:flex;flex-direction:column}.radar-time strong{font-size:14px}.radar-time span{font-size:10px;color:var(--muted)}.radar-controls input{accent-color:var(--cyan);width:100%}.radar-legend{display:flex;gap:7px;align-items:center;font-size:9px;color:var(--muted)}.radar-legend i{height:7px;flex:1;border-radius:99px;background:linear-gradient(90deg,#5c79ff,#50d2ff,#5ce39d,#f5db5e,#ff865d,#f34d72)}
.insight-column{display:grid;gap:16px}.insight-card{border-radius:24px;padding:23px}.insight-card h3{font-size:20px;margin:8px 0 7px;letter-spacing:-.4px}.insight-card p{font-size:12px;color:var(--muted);margin:0}.rain-bars{height:100px;display:flex;align-items:flex-end;gap:6px;margin-top:20px}.rain-bar{flex:1;min-width:8px;background:linear-gradient(180deg,var(--cyan),rgba(99,220,255,.17));border-radius:7px 7px 2px 2px;position:relative}.rain-bar span{position:absolute;bottom:-19px;left:50%;transform:translateX(-50%);font-size:8px;color:var(--muted)}.mini-list{margin-top:14px}.mini-list>div{display:flex;justify-content:space-between;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}.mini-list>div:last-child{border-bottom:0}.mini-list span{color:var(--muted);font-size:11px}.mini-list strong{font-size:12px}
.daily-grid{display:grid;grid-template-columns:repeat(8,minmax(120px,1fr));gap:10px}.day-card{border-radius:20px;padding:16px 13px;min-height:180px}.day-card.today{border-color:rgba(99,220,255,.4);box-shadow:inset 0 0 0 1px rgba(99,220,255,.08)}.day-name{font-size:11px;color:var(--muted)}.day-date{font-size:9px;color:var(--muted);opacity:.8}.day-icon{font-size:30px;margin:13px 0 8px}.day-temps{display:flex;gap:7px;align-items:baseline}.day-temps strong{font-size:18px}.day-temps span{color:var(--muted);font-size:12px}.day-detail{margin-top:10px;font-size:9px;color:var(--muted);display:flex;justify-content:space-between;gap:5px}.day-rain{color:var(--cyan)}
.chart-card{border-radius:24px;padding:20px;height:340px}.chart-card canvas{max-height:295px}.air-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}.air-card,.pollen-card{border-radius:var(--radius);padding:24px}.aqi-badge{min-width:54px;height:30px;border-radius:999px;background:rgba(89,225,179,.12);color:var(--green);display:grid;place-items:center;font-size:10px;font-weight:800}.aqi-main{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:20px}.aqi-main>div{display:flex;flex-direction:column}.aqi-main strong{font-size:58px;line-height:1;letter-spacing:-3px}.aqi-main span{color:var(--muted);font-size:10px}.aqi-main p{color:var(--muted);font-size:12px;margin:0}.pollutant-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:22px}.pollutant-grid>div{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:15px;padding:11px}.pollutant-grid span,.pollutant-grid small{display:block;color:var(--muted);font-size:9px}.pollutant-grid strong{font-size:15px}.pollen-list{display:grid;gap:10px}.pollen-row{display:grid;grid-template-columns:90px 1fr 60px;align-items:center;gap:10px}.pollen-row span{font-size:11px}.pollen-track{height:7px;background:var(--line);border-radius:99px;overflow:hidden}.pollen-track i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--yellow),var(--orange));border-radius:inherit}.pollen-row strong{text-align:right;font-size:11px;color:var(--muted)}
.details-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.detail-card{border-radius:24px;padding:22px}.detail-card h3{margin:6px 0 16px;font-size:18px}.detail-list>div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}.detail-list>div:last-child{border-bottom:0}.detail-list span{font-size:11px;color:var(--muted)}.detail-list strong{font-size:12px}.wind-compass-wrap{display:flex;align-items:center;gap:15px;margin:8px 0 12px}.wind-compass{width:76px;height:76px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle,rgba(99,220,255,.07),transparent 60%)}.wind-compass:before,.wind-compass:after{content:"";position:absolute;background:var(--line)}.wind-compass:before{width:1px;height:100%}.wind-compass:after{height:1px;width:100%}.wind-compass span{font-size:27px;color:var(--cyan);position:relative;z-index:1;transition:transform .4s}.wind-compass-wrap>div:last-child{display:flex;flex-direction:column}.wind-compass-wrap small{color:var(--muted);margin-top:3px}.source-card{border-radius:var(--radius);padding:25px}.source-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}.source-grid>div{padding:14px;border:1px solid var(--line);border-radius:16px}.source-grid strong{display:block;font-size:11px}.source-grid span{display:block;font-size:9px;color:var(--muted);margin-top:3px}.source-note{color:var(--muted);font-size:10px;margin:15px 0 0}
.alerts-panel{margin-bottom:16px;border:1px solid rgba(255,102,125,.26);background:rgba(255,102,125,.06);border-radius:20px;padding:16px}.alerts-list{display:grid;gap:8px;margin-top:8px}.alert-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}.alert-level{width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 20px rgba(255,157,97,.45)}.alert-item strong{font-size:12px}.alert-item p{font-size:10px;color:var(--muted);margin:2px 0 0}.alert-item a{color:var(--cyan);font-size:10px;text-decoration:none}.footer{border-top:1px solid var(--line);padding:24px 0 38px;color:var(--muted);font-size:11px}.footer-inner{display:flex;justify-content:space-between;gap:20px}.footer strong{color:var(--text)}.footer-links{display:flex;gap:16px}.footer a{color:var(--muted);text-decoration:none}.footer a:hover{color:var(--cyan)}
.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:var(--card-solid);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:10px 14px;box-shadow:var(--shadow);z-index:2000;font-size:12px;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.loading-overlay{position:fixed;inset:0;background:rgba(4,12,21,.7);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;z-index:5000;transition:.25s}.loading-overlay.hidden{opacity:0;pointer-events:none}.loader-ring{width:38px;height:38px;border:3px solid rgba(255,255,255,.12);border-top-color:var(--cyan);border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-overlay span{font-size:11px;color:#b9ccda}
@media(max-width:1250px){.hero-grid{grid-template-columns:1fr}.metrics-grid{grid-template-columns:repeat(3,1fr)}.radar-layout{grid-template-columns:1fr}.insight-column{grid-template-columns:1fr 1fr}.daily-grid{grid-template-columns:repeat(4,1fr)}.source-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){:root{--shell:min(100% - 24px,1500px);--radius:22px}.topbar-inner{height:auto;min-height:76px;grid-template-columns:1fr auto;gap:12px;padding:12px 0}.brand-text small{display:none}.search-wrap{order:3;grid-column:1/-1}.top-actions .pill-btn b{display:none}.hero-card{padding:22px}.current-weather{grid-template-columns:90px 1fr}.weather-glyph{font-size:64px}.temperature{font-size:58px}.hero-side{grid-column:1/-1;grid-template-columns:repeat(3,1fr);margin-top:2px}.hero-stat{border-left:0;border-top:1px solid var(--line);padding:10px 0 0}.metrics-grid{grid-template-columns:repeat(2,1fr)}.radar-map{height:430px}.radar-controls{grid-template-columns:95px 1fr}.radar-legend{display:none}.air-grid,.details-grid{grid-template-columns:1fr}.daily-grid{grid-template-columns:repeat(3,1fr)}.chart-tabs{overflow:auto;max-width:55vw}.footer-inner{flex-direction:column}.source-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.main-shell{padding-top:14px}.hero-head h1{font-size:28px}.current-weather{gap:10px}.weather-glyph{font-size:56px}.temperature{font-size:50px}.metrics-grid{grid-template-columns:1fr 1fr;gap:8px}.metric-card{padding:13px;min-height:103px;gap:9px}.metric-icon{width:34px;height:34px}.metric-card strong{font-size:16px}.metric-card small{font-size:8px}.hour-card{min-width:92px}.section-title-row{align-items:flex-start}.section-title-row h2{font-size:19px}.segmented{flex-shrink:0}.daily-grid{grid-template-columns:repeat(2,1fr)}.insight-column{grid-template-columns:1fr}.radar-map{height:360px}.radar-controls{padding:12px 15px;grid-template-columns:78px 1fr;gap:8px}.pollutant-grid{grid-template-columns:1fr 1fr}.aqi-main{grid-template-columns:95px 1fr}.aqi-main strong{font-size:48px}.source-grid{grid-template-columns:1fr}.search-box input{font-size:13px}.brand-mark{width:38px;height:38px}.brand-text strong{font-size:18px}.top-actions{gap:5px}.icon-btn{width:40px;height:40px}.pill-btn{height:40px;padding:0 10px}.hero-footer{grid-template-columns:auto 1fr auto}.alerts-panel{padding:13px}.alert-item{grid-template-columns:auto 1fr}.alert-item a{grid-column:2}}