:root{--bg:#04101b;--panel:#0a1b2b;--panel2:#0f2940;--line:#1d405b;--text:#f7fbff;--muted:#9eb3c5;--cyan:#20c8ff;--blue:#2f6df6;--red:#ee425b;--orange:#ff8d3d;--yellow:#ffd24c}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#020912;color:var(--text);font-family:"Segoe UI",Arial,sans-serif}.app-shell{height:100vh;display:grid;grid-template-rows:80px 1fr 50px;background:linear-gradient(145deg,#071827,#020912)}
.topbar{display:grid;grid-template-columns:1fr 1.2fr .7fr;align-items:center;padding:0 30px;background:#05111ceb;border-bottom:1px solid #17324a;z-index:20}.brand-lockup{display:flex;align-items:center;gap:13px}.brand-mark{width:50px;height:40px;position:relative}.brand-mark i{position:absolute;display:block;height:7px;transform:skewX(-30deg);background:linear-gradient(90deg,var(--cyan),var(--blue))}.brand-mark i:nth-child(1){width:46px;top:3px}.brand-mark i:nth-child(2){width:34px;top:16px;left:7px}.brand-mark i:nth-child(3){width:22px;top:29px;left:14px}.brand-name{font-weight:800;letter-spacing:2px;font-size:20px}.brand-sub{font-size:9px;letter-spacing:3.2px;color:var(--cyan);margin-top:2px}.location-block{text-align:center}.location-name{font-size:22px;font-weight:650}.updated{font-size:11px;color:var(--muted);margin-top:4px}.clock-block{text-align:right}.clock{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums}.date{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px}
.stage{position:relative;overflow:hidden}.slide{position:absolute;inset:0;opacity:0;transform:translateX(3%);pointer-events:none;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}.slide.active{opacity:1;transform:none;pointer-events:auto}.slide.exit-left{opacity:0;transform:translateX(-3%)}.eyebrow{font-size:13px;letter-spacing:3px;font-weight:800;color:var(--cyan)}
.current-slide{padding:0}.current-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 26% 35%,#174263 0,#0a2438 24%,#05121e 62%,#02080f 100%)}.current-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 0 56%,rgba(4,12,20,.72) 73%,rgba(3,9,15,.94) 100%)}.current-wrap{position:relative;height:100%;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;padding:4vh 5vw}.current-primary{align-self:center}.current-row{display:flex;align-items:flex-end;gap:38px}.mega-temp{font-size:clamp(170px,20vw,300px);line-height:.82;font-weight:180;letter-spacing:-14px;margin-top:22px}.current-copy{padding-bottom:24px;max-width:440px}.condition{font-size:clamp(36px,4vw,62px);font-weight:650;line-height:1.03}.feels{font-size:19px;color:var(--muted);margin-top:13px}.current-details{display:grid;grid-template-columns:1fr 1fr;align-self:center;border-top:1px solid #21445d;border-left:1px solid #21445d}.detail{min-height:118px;padding:21px 23px;border-right:1px solid #21445d;border-bottom:1px solid #21445d;background:rgba(9,27,42,.44)}.detail span{display:block;font-size:10px;letter-spacing:2px;color:var(--muted);margin-bottom:12px}.detail b{font-size:26px;font-weight:650}.detail.highlight{background:linear-gradient(135deg,#0f3b57aa,#0b2133aa);box-shadow:inset 3px 0 0 var(--cyan)}
.screen-head{height:105px;padding:26px 48px 18px;display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid #1a3952;background:linear-gradient(180deg,#0a1c2e,#071522)}.screen-head h1{font-size:42px;line-height:1;margin:7px 0 0}.screen-head small{color:var(--muted);font-size:14px}.forecast-cards{height:calc(100% - 105px);display:grid;grid-template-columns:repeat(7,1fr);background:#06101a}.forecast-card{padding:28px 18px 22px;display:grid;grid-template-rows:auto 1fr auto auto auto;border-right:1px solid #17364e;background:linear-gradient(180deg,#0d2438,#071522)}.forecast-card.today{background:linear-gradient(180deg,#153a55,#092034);box-shadow:inset 0 5px 0 var(--cyan)}.forecast-day{font-size:16px;font-weight:750;letter-spacing:1px}.forecast-glyph{font-size:58px;align-self:center;text-align:center;color:#e9f7ff;text-shadow:0 0 24px #20c8ff44}.forecast-cond{text-align:center;font-size:15px;line-height:1.2;min-height:40px}.temps{display:flex;justify-content:space-between;align-items:flex-end;margin-top:18px}.high{font-size:42px;font-weight:760}.low{font-size:24px;color:var(--muted)}.pop{margin-top:10px;color:var(--cyan);font-size:12px;letter-spacing:.6px}
.radar-slide{background:#06101a}.radar-map{position:absolute;inset:0}.radar-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,9,14,.25),transparent 32%,transparent 68%,rgba(3,9,14,.5)),linear-gradient(90deg,rgba(3,9,14,.65),transparent 35%,transparent)}.radar-hud{position:absolute;z-index:4;top:32px;left:42px;right:42px;display:flex;justify-content:space-between}.radar-title{font-size:42px;font-weight:780;text-shadow:0 2px 18px #000}.radar-status{height:38px;display:flex;align-items:center;gap:9px;padding:0 14px;background:#07131ddd;border:1px solid #2a4c63;font-size:12px}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--yellow)}.status-dot.live{background:#34e27b;box-shadow:0 0 14px #34e27b}.radar-timeline{position:absolute;left:42px;right:42px;bottom:28px;height:5px;background:#ffffff2e;z-index:4}.radar-progress{height:100%;background:var(--cyan);width:0;transition:width .2s linear}
.hourly-strip{height:calc(100% - 105px);display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,1fr);background:#06101a}.hour{padding:19px 21px;border-right:1px solid #19364c;border-bottom:1px solid #19364c;background:linear-gradient(180deg,#0b2032,#081726);display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto auto;align-items:center}.hour .time{font-size:16px;font-weight:750}.hour-glyph{font-size:34px;color:#eaf8ff}.hour .temp{font-size:44px;font-weight:760;align-self:end}.hour-condition{grid-column:1/-1;color:#d8e7f2;font-size:13px;margin-top:2px}.rain{font-size:11px;color:var(--cyan);margin-top:7px}.wind{font-size:11px;color:var(--muted);text-align:right;margin-top:7px}
.alert-slide{background:radial-gradient(circle at 18% 20%,#4a1a20 0,#1b1017 37%,#071019 100%)}.alert-band{height:52px;padding:0 48px;display:flex;align-items:center;background:linear-gradient(90deg,#c92e44,#8d2436);font-weight:800;letter-spacing:2px}.alerts-layout{height:calc(100% - 52px);padding:7vh 5vw;display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}.alert-headline{font-size:clamp(58px,6.7vw,110px);font-weight:820;line-height:.92}.alert-meta{margin-top:26px;color:#ffc0b3;font-size:18px}.alert-detail{font-size:24px;line-height:1.48;padding:34px;border-left:5px solid var(--orange);background:#2b151a88}
.ticker{display:grid;grid-template-columns:175px 1fr 170px;align-items:center;background:#06121d;border-top:1px solid #17344b;z-index:20}.ticker-label{height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#0e6688,#174ea4);font-size:12px;font-weight:800;letter-spacing:1.7px}.ticker-window{overflow:hidden;white-space:nowrap}.ticker-text{display:inline-block;padding-left:100%;animation:ticker 28s linear infinite;font-size:14px;color:#e1edf6}.slide-indicator{height:100%;display:flex;align-items:center;justify-content:center;gap:9px;border-left:1px solid #17344b;font-size:11px;color:var(--muted)}.slide-indicator span{color:#fff;font-weight:800}@keyframes ticker{to{transform:translateX(-100%)}}
.settings-button{position:fixed;right:12px;bottom:60px;width:38px;height:38px;border:1px solid #35536b;background:#071622;color:#c1d3df;opacity:.28;z-index:30;cursor:pointer}.settings-button:hover{opacity:1}.first-run{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 50% 20%,#153b58,#06111b 48%,#02070d);display:grid;place-items:center}.first-run.hidden{display:none}.setup-card{width:min(600px,92vw);padding:44px;background:#081827;border:1px solid #21445c;box-shadow:0 40px 120px #000b;text-align:center}.setup-logo{color:var(--cyan);font-size:13px;letter-spacing:4px;font-weight:800}.setup-card h1{font-size:38px;margin:12px 0 8px}.setup-card p{color:var(--muted);margin:0 0 28px}.setup-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.setup-fields input,.settings-dialog input,.settings-dialog select{width:100%;padding:12px;border:1px solid #2b506a;background:#0b2132;color:#fff;font:inherit}.big{width:100%;padding:13px 18px;margin-top:12px;border:0;color:#fff;font-weight:700;cursor:pointer}.primary{background:#0877a8}.secondary{background:#20394c}.or{display:flex;align-items:center;gap:12px;color:#7690a3;font-size:11px;margin:22px 0}.or:before,.or:after{content:"";height:1px;background:#27465c;flex:1}.setup-message{min-height:22px;color:#ffba8c;font-size:12px;margin-top:12px}
.settings-dialog{width:min(540px,92vw);padding:0;border:1px solid #264760;background:#081522;color:#fff;box-shadow:0 30px 100px #000a}.settings-dialog::backdrop{background:#02070dcc}.settings-head{display:flex;justify-content:space-between;padding:20px 22px;border-bottom:1px solid #24455f}.settings-head strong{display:block;font-size:20px}.settings-head span{display:block;color:var(--muted);font-size:12px;margin-top:4px}.close-btn{border:0;background:transparent;color:#fff;font-size:28px}.settings-dialog label{display:block;padding:13px 22px 0;color:#aac0d1;font-size:12px}.field-row{display:grid;grid-template-columns:1fr 1fr}.check{display:flex!important;gap:10px;align-items:center}.check input{width:auto}.geo-btn{margin:14px 22px 0;width:calc(100% - 44px);padding:10px;background:#123149;border:1px solid #2e5874;color:#fff;cursor:pointer}.settings-actions{display:flex;justify-content:flex-end;gap:8px;padding:22px}.settings-actions button{padding:10px 18px;border:0;color:#fff;cursor:pointer}.empty-state{grid-column:1/-1;display:grid;place-items:center;color:#9fb3c4;font-size:18px}.mapboxgl-ctrl-logo,.mapboxgl-ctrl-attrib{opacity:.38}
@media(max-width:1000px){.topbar{grid-template-columns:1fr 1fr;padding:0 18px}.location-block{display:none}.current-wrap{grid-template-columns:1fr}.current-details{display:none}.forecast-cards{grid-template-columns:repeat(4,1fr)}.forecast-card:nth-child(n+5){display:none}.hourly-strip{grid-template-columns:repeat(4,1fr)}.hour:nth-child(n+9){display:none}.alerts-layout{grid-template-columns:1fr}.alert-detail{display:none}.ticker{grid-template-columns:135px 1fr}.slide-indicator{display:none}}