:root{
  --txt:#eaf6f3; --mute:#7a9e9e; --line:#2d4248;
  --panel:#102d37; --panelline:#2c4a52;
  --mint:#00e08a; --amber:#ffd23f; --red:#ff5466; --blue:#4aa3ff;
  --g0:#4aa3ff; --g1:#00e08a; --g2:#ffd23f; --g3:#ff8a3d; --g4:#ff5466;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--txt);
  background:linear-gradient(#06121a,#0b2832 90%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
#app{max-width:520px;margin:0 auto;padding:
  calc(env(safe-area-inset-top) + 16px) 20px
  calc(env(safe-area-inset-bottom) + 28px);}
.kicker{color:var(--mute);font-size:12px;font-weight:700;letter-spacing:3px}
.titlerow{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
h1{font-size:23px;font-weight:800;letter-spacing:.5px}
#refresh{background:none;border:1px solid var(--panelline);color:var(--mute);
  width:40px;height:40px;border-radius:12px;font-size:20px;cursor:pointer}
#refresh:active{transform:rotate(180deg);transition:transform .3s}
.updated{color:var(--mute);font-size:13px;margin-top:8px}
.tabs{display:flex;gap:8px;margin:14px 0 14px}
.tab{flex:1;background:var(--panel);border:1px solid var(--panelline);
  color:var(--mute);padding:12px;border-radius:14px;font-size:15px;
  font-weight:700;cursor:pointer}
.tab.active{color:#06121a;background:var(--mint);border-color:var(--mint)}
.tabico{height:22px;width:auto;vertical-align:middle;margin-right:6px}
.soonico-img{width:min(85%,300px);height:auto;
  filter:drop-shadow(0 14px 32px rgba(0,224,138,.22))}
.hero{text-align:center;padding:64px 16px 80px}
.hero-ski{width:min(90%,340px);height:auto;
  filter:drop-shadow(0 16px 38px rgba(0,224,138,.24));
  animation:heroIn .5s ease-out both, heroFloat 3s ease-in-out .5s infinite}
.hero-sub{color:var(--mute);font-size:14px;letter-spacing:1px;margin-top:20px}
@keyframes heroIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.fadein{animation:fadeIn .35s ease-out both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.err{color:var(--red);text-align:center;padding:40px 0;line-height:1.5}

.verdict{display:flex;align-items:center;gap:16px;margin:6px 0 18px}
.vbar{width:8px;align-self:stretch;border-radius:4px;min-height:64px}
.vbig{font-size:46px;font-weight:800;line-height:1}
/* left margin = .vbar width (8) + .verdict gap (16) so it lines up under the verdict text */
.headline{font-size:18px;color:var(--txt);margin:-8px 0 22px 24px;opacity:.92}

.stats{display:flex;gap:8px;margin-bottom:22px}
.stat{flex:1;background:var(--panel);border:1px solid var(--panelline);
  border-radius:14px;padding:11px 10px}
.stat .lbl{color:var(--mute);font-size:10px;font-weight:700;letter-spacing:1.5px}
.stat .big{font-size:26px;font-weight:800;margin-top:3px}
.stat .sub{color:var(--mute);font-size:11px;margin-top:1px}
.rainstat .big{color:var(--blue)}

.section{margin-bottom:24px}
.shead{display:flex;align-items:center;gap:8px;color:var(--mute);
  font-size:12px;font-weight:700;letter-spacing:2px;margin-bottom:13px;
  flex-wrap:wrap}
.scond{font-size:18px;font-weight:800;letter-spacing:.5px}
.sdetail{font-size:14px;font-weight:500;color:#aec8c5;letter-spacing:.3px;
  text-transform:none}
.bar{display:flex;gap:6px;margin-bottom:9px}
.seg{flex:1;height:16px;border-radius:8px;opacity:.26}
.seg.on{opacity:1}
.sfoot{font-size:11px;font-weight:700;color:var(--mute);letter-spacing:1.5px;
  margin-top:2px;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.sfoot.live{color:var(--mint)}
.livedot{width:7px;height:7px;border-radius:50%;background:var(--mute);
  animation:stalepulse 3.6s ease-in-out infinite}
.sfoot.live .livedot{background:var(--mint);
  box-shadow:0 0 0 0 var(--mint);animation:livepulse 2.2s ease-in-out infinite}
@keyframes livepulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,255,160,.55)}
  50%{opacity:.55;box-shadow:0 0 0 6px rgba(0,255,160,0)}
}
@keyframes stalepulse{0%,100%{opacity:1}50%{opacity:.45}}

.kv{display:flex;justify-content:space-between;background:var(--panel);
  border:1px solid var(--panelline);border-radius:14px;padding:14px 16px;
  margin-bottom:20px}
.kv .k{color:var(--mute);font-size:12px;font-weight:700;letter-spacing:2px}
.kv .v{font-size:15px;font-weight:600;text-align:right}

.period{display:flex;gap:14px;background:var(--panel);
  border:1px solid var(--panelline);border-radius:16px;
  padding:16px;margin-bottom:12px}
.period .pbar{width:8px;border-radius:4px}
.period .when{color:var(--mute);font-size:12px;font-weight:700;letter-spacing:2px}
.period .desc{font-size:24px;font-weight:800;margin:3px 0}
.period .wind{color:var(--txt);opacity:.85;font-size:14px}
.tip{background:var(--panel);border:1px solid var(--panelline);
  border-radius:14px;padding:14px 16px;font-size:14px;line-height:1.5;
  margin-bottom:20px}

.week{display:flex;gap:8px;margin:2px 0 16px}
.wd{flex:1;text-align:center;background:var(--panel);font:inherit;
  border:1px solid var(--panelline);border-radius:12px;padding:10px 0;
  cursor:pointer;color:var(--txt)}
.wd.sel{border-color:var(--mint);background:#13323d}
.wd .dot{width:10px;height:10px;border-radius:50%;margin:0 auto 7px}
.wd .d{font-size:12px;font-weight:700;color:var(--txt)}
.dhead{display:flex;align-items:center;justify-content:space-between;
  margin:2px 0 14px}
.dh-date{font-size:15px;font-weight:700;color:var(--txt)}
.dh-live{background:var(--mint);color:#06121a;font-size:10px;font-weight:800;
  padding:3px 9px;border-radius:9px;letter-spacing:1px}
.dh-fcast{background:var(--panelline);color:var(--mute);font-size:10px;
  font-weight:800;padding:3px 9px;border-radius:9px;letter-spacing:1px}
.tides{display:flex;gap:8px;flex-wrap:wrap}
.tchip{display:flex;align-items:center;gap:6px;background:var(--panel);
  border:1px solid var(--panelline);border-radius:11px;padding:8px 12px;
  font-size:14px;font-weight:700}
.tchip .ar{font-size:13px;font-weight:800}
.tchip.hi .ar{color:var(--blue)}
.tchip.lo .ar{color:var(--mute)}
.tchip .tm{color:var(--txt)}
.daynav{margin-top:22px;border-top:1px solid var(--panelline);padding-top:16px}
.daynav .week{margin:0}
.soon{text-align:center;padding:70px 16px 90px}
.soon-ico{font-size:46px;opacity:.85}
.soon-h{font-size:24px;font-weight:800;color:var(--mint);
  letter-spacing:1px;margin-top:14px}
.soon-p{color:var(--mute);font-size:14px;line-height:1.5;
  margin-top:10px;max-width:280px;margin-left:auto;margin-right:auto}
footer{color:var(--mute);font-size:11px;text-align:center;margin-top:26px;opacity:.7}

.hbtns{display:flex;gap:8px}
#help-btn{background:none;border:1px solid var(--panelline);color:var(--mute);
  height:40px;padding:0 15px;border-radius:12px;font-size:14px;font-weight:800;
  letter-spacing:.5px;cursor:pointer}
#help-btn:active{transform:scale(.9);transition:transform .15s}

.help[hidden]{display:none}
.help{position:fixed;inset:0;z-index:50;
  background:rgba(3,9,13,.8);
  display:flex;align-items:flex-start;justify-content:center;
  padding:calc(env(safe-area-inset-top) + 16px) 14px
          calc(env(safe-area-inset-bottom) + 16px)}
.help-card{width:100%;max-width:520px;max-height:100%;overflow-y:auto;
  background:linear-gradient(#0b2832,#08202a);
  border:1px solid var(--panelline);border-radius:20px;
  padding:22px 20px 26px}
.help-top{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px}
.help-h{color:var(--mint);font-size:13px;font-weight:800;letter-spacing:3px}
#help-x{background:none;border:1px solid var(--panelline);color:var(--mute);
  width:36px;height:36px;border-radius:11px;font-size:20px;cursor:pointer}
.hgrp{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.hgrp:first-of-type{border-top:0;padding-top:2px}
.hlbl{flex:0 0 86px;color:var(--mute);font-size:11px;font-weight:800;
  letter-spacing:.4px;line-height:1.3;padding-top:3px}
.hbody{flex:1;min-width:0;color:var(--txt);font-size:15px;line-height:1.55}
.hbody b{font-weight:700}
.hbody a{color:var(--mint);text-decoration:none}
.hbody a:hover{text-decoration:underline}
.hsub{color:var(--mute);font-size:13px;line-height:1.45;margin-top:6px}
.hscale{display:flex;border-radius:8px;overflow:hidden}
.hscale span{flex:1;text-align:center;font-size:10px;font-weight:800;
  color:#06121a;padding:7px 2px;letter-spacing:.3px}
.hscale .s0{background:var(--g0)}
.hscale .s1{background:var(--g1)}
.hscale .s2{background:var(--g2)}
.hscale .s3{background:var(--g3)}
.hscale .s4{background:var(--g4)}
.hsrc{font-weight:700}