html{ scroll-behavior:smooth; }
:root{
  --bg:#0B0D0C;
  --panel:#050505;
  --panel2:#050505;
  --text:#D7FFE7;
  --muted:#5EBE93;
  --neon:#14F195;
  --neon2:#0FD884;
  --danger:#FF4DA6;
  --line: rgba(255,255,255,0.035);
  --card-border: rgba(255,255,255,0.10);
  --card-top: rgba(20,241,149,0.55);
  --shadow: 0 12px 40px rgba(0,0,0,.55);
  --radius: 18px;
  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
/* smooth scroll via JS */
body{
  margin:0;
  color:var(--text);
  font-family:var(--sans);
  /* Under everything: uniform neutral base (no grid). */
  background: linear-gradient(180deg, #0B0D0C, var(--bg));
  overflow-x:hidden;
}

/* With sticky header, keep anchors visible after scroll. */
#dashboard, #photo, #forecast, #rv, #blitz, #gfs, #extremes, #astro{ scroll-margin-top: 88px; }

.top{
  position:fixed; top:0; left:0; right:0;
  z-index:1000;
  display:flex; gap:16px;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(8,17,12,.88), rgba(8,17,12,.28));
  border-bottom:1px solid rgba(15,42,27,.62);
}
.warnBanner{
  background:#1a0f0f;
  border-bottom:1px solid rgba(255,77,77,0.25);
  padding:6px 12px;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.4;
}
.warnBanner:not([hidden]){ display:block; }
.warnBanner__inner{
  display:flex;
  align-items:flex-start;
  gap:8px;
  max-width:900px;
  margin:0 auto;
}
.warnBanner__items{ flex:1; }
.warnBanner__item{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:2px 0;
}
.warnBanner__level{
  display:inline-block;
  font-weight:700;
  font-size:11px;
  padding:1px 6px;
  border-radius:4px;
  letter-spacing:.06em;
}
.warnBanner__level--1{ background:#b8860b; color:#000; }
.warnBanner__level--2{ background:#e67e22; color:#000; }
.warnBanner__level--3{ background:#e74c3c; color:#fff; }
.warnBanner__phenomenon{ color:#ff9999; }
.warnBanner__time{ color:rgba(215,255,231,0.5); font-size:11px; }
.warnBanner__close{
  background:none;
  border:none;
  color:rgba(215,255,231,0.4);
  cursor:pointer;
  font-size:16px;
  line-height:1;
  padding:2px 4px;
  flex-shrink:0;
}
.warnBanner__close:hover{ color:#fff; }
.alertBanner{
  background:linear-gradient(90deg, rgba(255,77,77,0.12), rgba(255,77,77,0.04));
  border-bottom:1px solid rgba(255,77,77,0.2);
  padding:4px 12px;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.4;
}
.alertBanner:not([hidden]){ display:block; }
.alertBanner__inner{
  display:flex;
  align-items:flex-start;
  gap:8px;
  max-width:900px;
  margin:0 auto;
}
.alertBanner__items{ flex:1; display:flex; gap:10px; flex-wrap:wrap; }
.alertBanner__item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:4px;
  white-space:nowrap;
}
.alertBanner__item--warning{
  background:rgba(255,183,77,0.15);
  color:#ffb74d;
}
.alertBanner__item--danger{
  background:rgba(255,77,77,0.15);
  color:#ff7777;
  animation:alertPulse 2s ease-in-out infinite;
}
.alertBanner__item--info{
  background:rgba(100,181,246,0.15);
  color:#64b5f6;
}
.alertBanner__icon{ font-size:14px; }
.alertBanner__close{
  background:none;
  border:none;
  color:rgba(215,255,231,0.4);
  cursor:pointer;
  font-size:16px;
  line-height:1;
  padding:2px 4px;
  flex-shrink:0;
}
.alertBanner__close:hover{ color:#fff; }
@keyframes alertPulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.5; }
}
body{ padding-top:74px; }

.nav{
  display:none;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.nav__link{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
}
.nav__link:hover{
  color: var(--text);
  border-color: rgba(20,241,149,0.28);
}

.nav__link[aria-current="true"]{
  color: var(--text);
  border-color: rgba(20,241,149,0.40);
  box-shadow: 0 0 18px rgba(20,241,149,0.12);
}

.hamburger{
  display:flex; flex-direction:column; gap:4px;
  background:none; border:none; cursor:pointer;
  padding:6px;
  font-family:var(--mono);
  font-size:9px;
  color:var(--muted);
  letter-spacing:.08em;
  align-items:center;
}
.hamburger span{
  display:block;
  width:22px; height:2px;
  background:var(--text);
  border-radius:2px;
  transition:transform .2s, opacity .2s;
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* Mobile nav dropdown */
.nav--open{
  position:fixed; top:58px; right:0; width:260px;
  background:rgba(8,17,12,.96);
  display:flex; flex-direction:column; gap:8px;
  padding:20px 18px;
  z-index:1002;
  backdrop-filter:blur(14px);
  border-left:1px solid rgba(20,241,149,0.12);
  border-radius:18px 0 0 18px;
  box-shadow: -4px 20px 30px rgba(0,0,0,.6);
}
.nav--open{ align-items:flex-start; }
.nav--open .nav__link{ font-size:13px; padding:10px 12px; }
.navBackdrop{
  display:none;
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.25);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  z-index:999;
}
.navBackdrop--show{ display:block !important; }

.brand{ display:flex; align-items:center; gap:10px; }
.brand__logo{ height:32px; width:auto; }
.brand__titles{ display:flex; flex-direction:column; }
.brand__title{
  font-family:var(--mono);
  letter-spacing:.12em;
  font-weight:700;
  font-size:18px;
  text-transform:uppercase;
  margin:0;
}
.brand__sub{ color:var(--muted); font-size:12px; }

.controls{ display:flex; gap:10px; align-items:center; }
select, button{
  font-family:var(--mono);
  background:
    linear-gradient(180deg, rgba(20,241,149, 0.10) 0%, rgba(0,0,0,0) 26%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    #050505;
  background-size:
    100% 100%,
    22px 22px,
    22px 22px,
    100% 100%;
  color: var(--text);
  border: 1px solid var(--card-border);
  border-top: 1px solid var(--card-top);
  border-radius: 12px;
  padding:10px 12px;
  outline:none;
}
button{
  cursor:pointer;
  box-shadow:
    0 0 10px rgba(20,241,149,0.03),
    inset 0 1px 0 rgba(255,255,255,0.10);
  transition: box-shadow .15s ease, transform .08s ease;
}
button:hover{ box-shadow: 0 0 0 2px rgba(20,241,149,.08); }
button:active{ transform: translateY(1px); }

.layout{
  width:min(1150px, 92vw);
  margin: 18px auto 40px;
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}

.panel{
  background:
    linear-gradient(180deg, rgba(20,241,149, 0.10) 0%, rgba(0,0,0,0) 26%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    #050505;
  background-size:
    100% 100%,
    22px 22px,
    22px 22px,
    100% 100%;
  border: 1px solid var(--card-border);
  border-top: 1px solid var(--card-top);
  border-radius: var(--radius);
  box-shadow:
    0 0 10px rgba(20,241,149,0.03),
    inset 0 1px 0 rgba(255,255,255,0.10);
  padding:14px 14px 10px;
  position:relative;
  overflow:hidden;
}
.panel:before{
  content:"";
  position:absolute; inset:-2px;
  background: conic-gradient(from 220deg, rgba(20,241,149,.14), transparent 34%, rgba(15,216,132,.10), transparent 74%);
  filter: blur(18px);
  opacity:.45;
  pointer-events:none;
}

.panel__title{
  font-family:var(--mono);
  letter-spacing:.18em;
  font-size:15px;
  font-weight:700;
  padding:0 0 8px;
  text-transform:uppercase;
  color:var(--neon);
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
}

.panel__titleText{
  min-width: 0;
  white-space: nowrap;
}
.panel__titleSep{
  color: rgba(215,255,231,0.55);
}

/* Pair titles: allow text to shrink so icons stay visible. */
.panel__title--pair{ gap:10px; }

.panel__tip{
  position:absolute;
  top:14px;
  right:14px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(215,255,231,0.08);
  color:rgba(215,255,231,0.2);
  font-size:11px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:help;
  z-index:9999;
  transition:.15s;
  line-height:1;
}
.panel__tip:hover{
  background:rgba(215,255,231,0.16);
  color:rgba(215,255,231,0.5);
}

/* (font size handled by clamp above) */

/* Safari + Chart.js: keep a stable layout height for canvases to avoid growth on repeated updates. */
.panel canvas{
  height: 190px !important;
  display:block;
}
.charts3{ display:grid; grid-template-columns:1fr; gap:12px; }
.charts3__col{
  padding:10px 12px 10px;
  border-radius:16px;
  border:1px solid var(--card-border);
  border-top:1px solid var(--card-top);
  background:rgba(0,0,0,.18);
  min-width:0;
}
.charts3__col canvas{ height:190px !important; max-width:100% !important; display:block; }

@media (min-width: 900px){
  .charts3{ grid-template-columns:1fr 1fr 1fr; }
}

.hero{ padding:16px; }
.hero__row{
  position:relative;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}

.kpi--photo{ grid-column: auto; }

.hero__bar{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:8px;
  flex-wrap:wrap;
}
.kpiStorm{
  font:11px/1.4 "Roboto Mono",monospace;
  padding:4px 10px;
  border-radius:6px;
  background:var(--bg2);
  white-space:nowrap;
}
.kpiStorm--low{ color:var(--green); }
.kpiStorm--elevated{ color:var(--yellow); }
.kpiStorm--high{ color:var(--red); }
.kpiWarn{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.kpiWarn__tag{
  font:11px/1.4 "Roboto Mono",monospace;
  padding:4px 10px;
  border-radius:6px;
  background:var(--bg2);
  white-space:nowrap;
  color:var(--red);
  display:none;
}
.kpiWarn__tag--on{ display:inline-block; }
.pressTrend{ margin-left:4px;font-size:13px; }
.windDir{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:8px;
  font-size:14px;
  line-height:1;
}
.windDir__arrow{
  display:inline-block;
  font-size:20px;
  transition:transform .4s ease;
  line-height:1;
  color:var(--fg);
}
.windDir__text{
  font-family:var(--mono);
  font-size:13px;
  color:var(--muted);
}
.kpi{
  position:relative;
  padding:10px 12px 10px;
  border-radius: 16px;
  border:1px solid var(--card-border);
  border-top: 1px solid rgba(20,241,149,0.35);
  background: rgba(0,0,0,.18);
  min-height: 118px;
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
}
.kpi__label{
  font-family:var(--mono);
  color:var(--muted);
  font-size:20px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  display:flex;
  gap:8px;
  align-items:center;
  white-space: nowrap;
}
.ico{ flex-shrink:0; }
.kpi__label__short{ display:none; }
@media (max-width: 899px){
  .kpi__label{ font-size:13px; }
  .kpi__label__full{ display:none; }
  .kpi__label__short{ display:inline; }
  .ico{ width:18px; height:18px; }
  .windDir{ font-size:11px; margin-left:4px; }
  .windDir__arrow{ font-size:15px; }
  .windDir__text{ font-size:10px; }
}

.kpi__value{
  margin-top:0;
  font-family:var(--mono);
  font-size:54px;
  font-weight:700;
  letter-spacing:.01em;
  line-height: 1;
  text-align: center;
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.unit{ font-size:18px; color:var(--muted); margin-left:8px; }
.kpi__trend{
  font-size:15px;
  font-weight:800;
  letter-spacing:.06em;
  text-align:center;
  padding:6px 0 2px;
  white-space:nowrap;
  min-height: 24px;
}
.kpi__trend.trend--low{ color:#14F195; }
.kpi__trend.trend--mid{ color:#FBBF24; }
.kpi__trend.trend--high{ color:#EF4444; }

.kpi__tip{
  position:absolute;
  bottom:6px;
  right:8px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(215,255,231,0.10);
  color:rgba(215,255,231,0.25);
  font-family:var(--mono);
  font-size:14px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:help;
  z-index:1;
  transition:.15s;
}
.kpi__tip:hover{
  background:rgba(215,255,231,0.18);
  color:rgba(215,255,231,0.55);
}
.kpi__tip::after{
  display:none;
}

.tipFloat{
  position:fixed;
  z-index:99999;
  pointer-events:none;
  opacity:0;
  transition:opacity .12s;
  background:rgba(5,5,5,0.94);
  color:rgba(215,255,231,0.85);
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:normal;
  max-width:260px;
  padding:8px 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.2);
  text-align:left;
  line-height:1.5;
}
.tipFloat.is-visible{ opacity:1; }

.kpi--photo{
  min-height: 118px;
}
.kpi__photoThumb{
  flex: 1;
  position:relative;
  border-radius: 10px;
  overflow:hidden;
  cursor:pointer;
  min-height: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.3);
}
.kpi__photoThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.kpi__photoOverlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.45);
  color: rgba(215,255,231,.9);
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:0;
  transition: opacity .2s;
  pointer-events:none;
}
.kpi__photoThumb:hover .kpi__photoOverlay{
  opacity:1;
}
.photo--dashboard .photo__frame{
  min-height: 92px;
}
.photo--dashboard .photo__hint{
  font-size: 11px;
}

.meta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  padding:8px 0 0;
}
.pill{
  font-family:var(--mono);
  font-size:13px;
  color:var(--muted);
  letter-spacing:.08em;
}
.pill.warn{ color:#EF4444; }

.ico{
  width: 24px;
  height: 24px;
  display:inline-block;
  opacity: .9;
  filter: drop-shadow(0 0 8px rgba(20,241,149,0.15));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.ico[data-ico="temp"]{
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%2314F195%22 d=%22M14 14.76V5a2 2 0 0 0-4 0v9.76a3 3 0 1 0 4 0ZM12 22a5 5 0 0 1-3-9V5a3 3 0 0 1 6 0v8a5 5 0 0 1-3 9Z%22/%3E%3C/svg%3E');
}
.ico[data-ico="hum"]{
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%233B82F6%22 d=%22M12 2s7 7.1 7 12a7 7 0 0 1-14 0c0-4.9 7-12 7-12Zm0 18a5 5 0 0 0 5-5c0-2.7-3-7-5-9.3C10 8 7 12.3 7 15a5 5 0 0 0 5 5Z%22/%3E%3C/svg%3E');
}
.ico[data-ico="press"]{
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23FBBF24%22 d=%22M12 4a8 8 0 1 0 8 8 8 8 0 0 0-8-8Zm0 18a10 10 0 1 1 10-10 10 10 0 0 1-10 10Zm5-10a1 1 0 0 1-.55.9l-4 2a1 1 0 0 1-1.45-.9V8a1 1 0 0 1 2 0v4.38l3.55-1.78A1 1 0 0 1 17 12Z%22/%3E%3C/svg%3E');
}
.ico[data-ico="wind"]{
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%2322D3EE%22 d=%22M3 10h10a2 2 0 1 0-2-2h2a4 4 0 1 1-4 4H3v-2Zm0 6h13a2 2 0 1 1-2 2h2a4 4 0 1 0-4-4H3v2Zm0-10h7a2 2 0 1 1-2 2h2a4 4 0 1 0-4-4H3v2Z%22/%3E%3C/svg%3E');
}
.ico[data-ico="cam"]{
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%2314F195%22 d=%22M9 4 7.17 6H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-3.17L15 4H9Zm3 14a5 5 0 1 1 5-5 5 5 0 0 1-5 5Zm0-2.2A2.8 2.8 0 1 0 9.2 13 2.8 2.8 0 0 0 12 15.8Z%22/%3E%3C/svg%3E');
}
.ico[data-ico="comfort"]{
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%2314F195%22 d=%22M16.5 5.5a2 2 0 0 0-2 2v4.8A5 5 0 1 0 18.5 19a5 5 0 0 0 0-8.7v-4.8a2 2 0 0 0-2-2Zm0 2h.5v3.3a.5.5 0 0 1-.25.43l-.25.13V7.5Zm-5 0a2 2 0 0 0-2 2v2.8A5 5 0 1 0 13.5 17a5 5 0 0 0 0-6.7V7.5a2 2 0 0 0-2-2Zm0 2h.5v2.3a.5.5 0 0 1-.25.43l-.25.13V9.5Z%22/%3E%3C/svg%3E');
}
.ico[data-ico="forecast"]{
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%2314F195%22 d=%22M6 19h13v2H6v-2Zm-3-3h19v2H3v-2Zm2.2-5.6a6 6 0 0 1 11.7-2.1A4.7 4.7 0 1 1 18 17H7.2A4.2 4.2 0 0 1 5.2 10.4Z%22/%3E%3C/svg%3E');
}
.ico[data-ico="dew"]{
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%2322D3EE%22 d=%22M12 2s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11Zm0 17a4 4 0 0 0 4-4c0-2-3-6.5-4-8-1 1.5-4 6-4 8a4 4 0 0 0 4 4Z%22/%3E%3C/svg%3E');
}
.forecast{ display:grid; gap:12px; min-width:0; max-width:100%; overflow:hidden; box-sizing:border-box; }
.forecast__now{
  display:flex;
  gap:14px;
  align-items:stretch;
  flex-wrap:wrap;
  min-width:0;
}
.forecast__kpi{
  flex: 0 0 auto;
  min-width: 220px;
  max-width:100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  border-top: 1px solid rgba(20,241,149,0.35);
  background: rgba(0,0,0,.14);
}
.forecast__label{
  font-family: var(--mono);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.forecast__value{
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 34px;
}
.forecast__sub{
  margin-top: 4px;
  color: rgba(215,255,231,0.78);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  display:flex;
  gap:10px;
  align-items:center;
}
.forecast__mini{
  flex: 1;
  min-width: 240px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:8px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,.10);
}
.forecast__miniItem{
  font-family: var(--mono);
  font-size: 18px;
  color: var(--muted);
  white-space:nowrap;
}
.forecast__kpi{
  flex: 0 0 auto;
  min-width: 220px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  border-top: 1px solid rgba(20,241,149,0.35);
  background: rgba(0,0,0,.14);
}
.forecast__label{
  font-family: var(--mono);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.forecast__value{
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 34px;
}
.forecast__sub{
  margin-top: 4px;
  color: rgba(215,255,231,0.78);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  display:flex;
  gap:10px;
  align-items:center;
}

.wmo{
  width: 34px;
  height: 34px;
  display:inline-block;
  opacity: 0.95;
  filter: drop-shadow(0 0 10px rgba(20,241,149,0.10));
  background: rgba(160,170,180,0.95);
  border-radius: 6px;
}
.wmo[data-kind="clear"]{ background: rgba(251,191,36,0.96); }
.wmo[data-kind="partly"]{ background: rgba(200,205,210,0.96); }
.wmo[data-kind="cloud"]{ background: rgba(170,175,180,0.96); }
.wmo[data-kind="fog"]{ background: rgba(160,165,170,0.96); }
.wmo[data-kind="rain"]{ background: rgba(59,130,246,0.96); }
.wmo[data-kind="snow"]{ background: rgba(147,197,253,0.96); }
.wmo[data-kind="storm"]{ background: rgba(239,68,68,0.96); }
.wmo[data-kind="clear"]{
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 18a6 6 0 1 1 6-6 6 6 0 0 1-6 6Zm0-14h1v3h-1V4Zm0 13h1v3h-1v-3ZM4 11h3v1H4v-1Zm13 0h3v1h-3v-1ZM6.2 6.2l2.1 2.1-.7.7L5.5 6.9l.7-.7Zm10.2 10.2 2.1 2.1-.7.7-2.1-2.1.7-.7ZM17.8 6.2l.7.7-2.1 2.1-.7-.7 2.1-2.1ZM7.6 16.4l.7.7-2.1 2.1-.7-.7 2.1-2.1Z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 18a6 6 0 1 1 6-6 6 6 0 0 1-6 6Zm0-14h1v3h-1V4Zm0 13h1v3h-1v-3ZM4 11h3v1H4v-1Zm13 0h3v1h-3v-1ZM6.2 6.2l2.1 2.1-.7.7L5.5 6.9l.7-.7Zm10.2 10.2 2.1 2.1-.7.7-2.1-2.1.7-.7ZM17.8 6.2l.7.7-2.1 2.1-.7-.7 2.1-2.1ZM7.6 16.4l.7.7-2.1 2.1-.7-.7 2.1-2.1Z"/></svg>') center/contain no-repeat;
}
.wmo[data-kind="partly"], .wmo[data-kind="cloud"]{
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 18a5 5 0 0 1-.4-10A6 6 0 0 1 18 9.2 4 4 0 0 1 17 18H7Z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 18a5 5 0 0 1-.4-10A6 6 0 0 1 18 9.2 4 4 0 0 1 17 18H7Z"/></svg>') center/contain no-repeat;
}
.wmo[data-kind="rain"]{
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 15a5 5 0 0 1-.4-10A6 6 0 0 1 18 6.2 4 4 0 0 1 17 15H7Zm2.5 2.2 1 .6-2 3.4-1-.6 2-3.4Zm5 0 1 .6-2 3.4-1-.6 2-3.4Zm-2.5 0 1 .6-2 3.4-1-.6 2-3.4Z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 15a5 5 0 0 1-.4-10A6 6 0 0 1 18 6.2 4 4 0 0 1 17 15H7Zm2.5 2.2 1 .6-2 3.4-1-.6 2-3.4Zm5 0 1 .6-2 3.4-1-.6 2-3.4Zm-2.5 0 1 .6-2 3.4-1-.6 2-3.4Z"/></svg>') center/contain no-repeat;
}
.wmo[data-kind="snow"]{
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 15a5 5 0 0 1-.4-10A6 6 0 0 1 18 6.2 4 4 0 0 1 17 15H7Zm2 3 1-1 1 1-1 1-1-1Zm6 0 1-1 1 1-1 1-1-1Zm-3-1 1-1 1 1-1 1-1-1Z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 15a5 5 0 0 1-.4-10A6 6 0 0 1 18 6.2 4 4 0 0 1 17 15H7Zm2 3 1-1 1 1-1 1-1-1Zm6 0 1-1 1 1-1 1-1-1Zm-3-1 1-1 1 1-1 1-1-1Z"/></svg>') center/contain no-repeat;
}
.wmo[data-kind="storm"]{
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 15a5 5 0 0 1-.4-10A6 6 0 0 1 18 6.2 4 4 0 0 1 17 15H7Zm5 0-2 4h2l-1 4 4-6h-2l2-2h-3Z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 15a5 5 0 0 1-.4-10A6 6 0 0 1 18 6.2 4 4 0 0 1 17 15H7Zm5 0-2 4h2l-1 4 4-6h-2l2-2h-3Z"/></svg>') center/contain no-repeat;
}
.wmo[data-kind="fog"]{
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M6 10a6 6 0 0 1 11.7-2.1A4.7 4.7 0 1 1 18 17H7.2A4.2 4.2 0 0 1 6 10Zm-3 9h18v2H3v-2Zm2-3h14v2H5v-2Z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M6 10a6 6 0 0 1 11.7-2.1A4.7 4.7 0 1 1 18 17H7.2A4.2 4.2 0 0 1 6 10Zm-3 9h18v2H3v-2Zm2-3h14v2H5v-2Z"/></svg>') center/contain no-repeat;
}
.forecast__mini{
  flex: 1;
  min-width: 240px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:8px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,.10);
}

.photo--compact .photo__frame{ min-height: 150px; }
.photo--compact .photo__actions{ margin-top: 8px; }
.forecast__miniItem{
  font-family: var(--mono);
  font-size: 18px;
  color: var(--muted);
}

.aq{
  color: var(--text);
  font-weight: 700;
}
.aq.is-warn{ color: #FBBF24; }
.aq.is-danger{ color: #EF4444; }
.aq__lim{ color: rgba(215,255,231,0.55); }
.aq__unit{ color: rgba(215,255,231,0.55); }

.ext{
  display:grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.ext__row{
  display:grid;
  grid-template-columns: 180px 300px 300px 250px;
  align-items:center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,.10);
}
.ext__name{
  font-family: var(--mono);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  display:flex;
  align-items:center;
  gap: 6px;
  justify-self:start;
}
.ext__ico{ width: 18px; height: 18px; }
.ext__vals{
  display:contents;
  font-family: var(--mono);
  color: var(--muted);
}
.ext__val{
  display:contents;
}
.calV{
  display:flex;
  align-items:center;
  gap:4px;
  padding:2px 10px 2px 8px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.08);
  border-top:1px solid rgba(20,241,149,0.35);
  background:rgba(0,0,0,0.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
  position:relative;
  height:30px;
}
.sev{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  padding:2px 10px 2px 8px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.08);
  border-top:1px solid rgba(20,241,149,0.35);
  background:rgba(0,0,0,0.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
  font-family:var(--mono);
  height:30px;
}
.zone--low{ border-top-color:rgba(59,130,246,0.45); box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 0 16px rgba(59,130,246,0.12); }
.zone--mid{ border-top-color:rgba(20,241,149,0.45); box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 0 16px rgba(20,241,149,0.12); }
.zone--high{ border-top-color:rgba(239,68,68,0.45); box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 0 16px rgba(239,68,68,0.12); }
.sev__head{ display:none; }
.sev__pct{
  font-size:14px;
  font-weight:900;
  color:var(--text);
  line-height:1;
  white-space:nowrap;
}
.sev__unit{
  font-size:11px;
  font-weight:700;
  color:rgba(215,255,231,0.55);
  margin-left:1px;
}
.sev__bar{
  width:32px;
  height:4px;
  border-radius:4px;
  background:rgba(255,255,255,0.06);
  overflow:hidden;
  flex-shrink:0;
}
.sev__bar__fill{
  height:100%;
  border-radius:3px;
  transition:width 0.4s;
}
.zone--low .sev__bar__fill{ background:#3B82F6; }
.zone--mid .sev__bar__fill{ background:#14F195; }
.zone--high .sev__bar__fill{ background:#EF4444; }
.sev__label{
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.zone--low .sev__label{ color:#3B82F6; }
.zone--mid .sev__label{ color:#14F195; }
.zone--high .sev__label{ color:#EF4444; }
.ext__newTag{
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
  color:#14F195;
  background:rgba(20,241,149,0.15);
  padding:1px 6px;
  border-radius:999px;
  margin-left:4px;
  animation:extPulse 2s ease-in-out infinite;
}
@keyframes extPulse{ 0%,100%{opacity:1} 50%{opacity:0.4} }
.ext__summary{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 8px;
  padding:4px 10px;
  margin-bottom:6px;
  border-radius:8px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  color:rgba(215,255,231,0.6);
  letter-spacing:.06em;
}
.ext__summary__dot{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  margin-right:2px;
}
.ext__summary__sep{
  display:inline-block;
  width:1px;
  height:8px;
  background:rgba(255,255,255,0.08);
}

.calV{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 10px 2px 8px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.08);
  border-top:1px solid rgba(20,241,149,0.35);
  background:rgba(0,0,0,0.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
  position:relative;
  text-align:left;
  height:30px;
}
.calV:before, .calV:after{ display:none; }
.calV--min{
  border-top-color: rgba(59,130,246,0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 24px rgba(59,130,246,0.35);
}
.calV--max{
  border-top-color: rgba(239,68,68,0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 24px rgba(239,68,68,0.25);
}
.calV__top{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:0;
  background:none;
  border:none;
  font-size:0;
}
.calV__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  border-radius:4px;
  border:none;
  background:none;
  color:inherit;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}
.calV--max .calV__badge{ color:rgba(255,255,255,0.90); }
.calV__meta{ display:none; }
.calV__val{
  padding:0;
  color:var(--text);
  font-size:15px;
  font-weight:900;
  white-space:nowrap;
}
.calV__foot{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:0;
  margin-left:auto;
}
.calV__dot{
  width:6px;
  height:6px;
  border-radius:50%;
  flex-shrink:0;
}
.calV__dot.dot--today{ background:#14F195; box-shadow:0 0 4px rgba(20,241,149,0.5); }
.calV__dot.dot--yesterday{ background:#FBBF24; box-shadow:0 0 4px rgba(251,191,36,0.4); }
.calV__dot.dot--old{ background:rgba(215,255,231,0.2); }
.calV__time{
  color:rgba(215,255,231,0.85);
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  white-space:nowrap;
}
.calV__date{ display:none; }

.cal{
  width: 92px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-top: 1px solid rgba(20,241,149,0.35);
  background: rgba(0,0,0,0.18);
  overflow:hidden;
  text-align:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.cal__top{
  padding: 6px 6px 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(215,255,231,0.75);
  background: linear-gradient(180deg, rgba(20,241,149,0.10), rgba(0,0,0,0));
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cal__day{
  padding: 8px 6px 2px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--text);
  line-height: 1;
}
.cal__time{
  padding: 0 6px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  color: rgba(215,255,231,0.80);
}
.cal--empty{ display:flex; align-items:center; justify-content:center; height: 64px; color: rgba(215,255,231,0.40); }

@media (max-width: 899px){
  .ext__row{ grid-template-columns:1fr; }
}
@media (min-width: 900px){
}
.forecast__charts{
  display:grid;
  grid-template-columns: minmax(0,1fr);
  gap: 12px;
  overflow:hidden;
}
.forecast__chart{
  padding:10px 12px 10px;
  border-radius:16px;
  border:1px solid var(--card-border);
  border-top:1px solid var(--card-top);
  background:rgba(0,0,0,.18);
  min-width:0;
  overflow:hidden;
}
.forecast__chartTitle{
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 2px 2px 10px;
  display:flex;
  gap: 8px;
  align-items:center;
}
.forecast__chartTitle .ico{ width: 18px; height: 18px; }
.forecast__chart canvas{
  width:100% !important;
  max-width:100% !important;
  display:block;
}
.forecast__days{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px; margin-top:16px;
  overflow:hidden;
}
.forecast__day{
  background:var(--card); border-radius:14px; padding:10px;
  border:1px solid var(--line); position:relative;
}
.forecast__day--today{ border-color:rgba(20,241,149,0.35); }
.forecast__dayTitle{ font-family:var(--mono); color:var(--text); font-size:24px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; gap:12px; }
.forecast__dayRow{ margin-top:14px; font-family:var(--mono); color:var(--muted); font-size:18px; display:flex; justify-content:space-between; }
.forecast__meta{ color:var(--muted); font-size:12px; font-family:var(--mono); }

@media (max-width: 899px){
  .forecast__now{ flex-direction:column; }
  .forecast__kpi{ min-width:0; }
  .forecast__mini{ min-width:0; font-size:14px; }
  .forecast__miniItem{ font-size:14px; }
  .forecast__dayTitle{ font-size:14px; }
  .forecast__dayRow{ font-size:12px; }
  .forecast__ext{ overflow:hidden; }
}

@media (min-width: 900px){
  .forecast__charts{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .forecast__days{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Extended forecast 8-14 days */
.fcExtGrid{ display:grid; grid-template-columns:repeat(8,1fr); gap:6px; margin-top:12px; }
.fcExtDay{
  background:var(--card); border-radius:12px; padding:14px 12px;
  border:1px solid rgba(20,241,149,0.25); text-align:center; font-family:var(--mono); font-size:15px;
}
.fcExtDay__name{ color:var(--text); font-size:16px; font-weight:600; }
.fcExtDay__date{ color:var(--muted); font-size:14px; margin-bottom:6px; }
.fcExtDay .wmo{ width:34px; height:34px; margin:6px auto; border-radius:6px; }
.fcExtDay__temp{ margin:6px 0; }
.fcExtDay__max{ color:#14F195; }
.fcExtDay__min{ color:rgba(215,255,231,0.4); }
.fcExtDay__precip{ color:rgba(59,130,246,0.7); font-size:15px; }
.fcExtDay__wind{ color:rgba(56,189,248,0.6); font-size:15px; }

@media (max-width: 899px){
  .fcExtGrid{ grid-template-columns:repeat(4,1fr); gap:2px; }
  .fcExtDay{ font-size:15px; padding:14px 2px; }
  .fcExtDay__name{ font-size:15px; }
  .fcExtDay__date{ font-size:12px; margin-bottom:0; }
  .fcExtDay .wmo{ width:12px; height:12px; margin:0 auto; border-radius:6px; }
  .fcExtDay__temp{ margin:0; }
  .fcExtDay__precip{ font-size:12px; margin:0; }
  .fcExtDay__wind{ font-size:12px; margin:0; }
}

.photo{ display:grid; gap:12px; }
.photo__frame{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.10);
  border-top: 1px solid rgba(20,241,149,0.35);
  box-shadow: 0 0 25px rgba(20,241,149,0.10);
  background: #0F1211;
  min-height: 220px;
}
.photo__frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:none;
}
.photo__frame.has img{ display:block; }
.photo__hint{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  pointer-events:none;
}

.mediaRow{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 900px){
  .mediaRow{ grid-template-columns: 1fr 1fr 1fr; }
}

.rv{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.rv__frame{
  width: 100%;
  height: 360px;
  border: 0;
  border-radius: 16px;
  display:block;
  outline: 1px solid rgba(255,255,255,0.08);
  background: #0F1211;
}

.rvMap{
  width: 100%;
  height: 360px;
  border-radius: 16px;
  overflow: hidden;
  outline: 1px solid rgba(255,255,255,0.08);
  background: #0F1211;
}

.rvCtl{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.rvBtn{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
}
.rvStamp{
  font-family: var(--mono);
  color: rgba(215,255,231,0.75);
  font-size: 12px;
  letter-spacing: .06em;
}

.rvRange{
  flex: 1;
  min-width: 180px;
  height: 28px;
}
.rvRange{ accent-color: var(--neon); }

/* Make Leaflet blend with our dark theme. */
.rvMap .leaflet-control-attribution{ display:none; }
.rvMap .leaflet-control-zoom a{
  background: rgba(0,0,0,0.55);
  color: var(--text);
  border-color: rgba(255,255,255,0.10);
}
.rvMap .leaflet-bar{ box-shadow:none; border-radius: 10px; overflow:hidden; }
.rvMap .leaflet-container{ background: #0F1211; }

.gfs{
  display:grid;
  gap: 10px;
}
.gfsTag__sw{
  width: 12px;
  height: 12px;
  display:inline-block;
  border-radius: 4px;
  background: rgba(215,255,231,0.90);
}
.gfsTag__sw[data-gfs-sw="temp"]{ background: #14F195; }
.gfsTag__sw[data-gfs-sw="hum"]{ background: #3B82F6; }
.gfsTag__sw[data-gfs-sw="rain"]{ background: rgba(59,130,246,0.55); }
.gfsTag__sw[data-gfs-sw="wind"]{ background: #EF4444; }
.gfsTag__sw[data-gfs-sw="sun"]{ background: #FBBF24; }
.gfsTag__sw[data-gfs-sw="press"]{ background: #FBBF24; }

.gfsTag__icon{
  width: 16px;
  height: 16px;
  display:inline-block;
  opacity: .95;
  filter: drop-shadow(0 0 8px rgba(20,241,149,0.10));
}
.gfsTag__icon[data-gfs-icon="temp"]{
  background: radial-gradient(circle at 50% 35%, rgba(20,241,149,0.95), rgba(20,241,149,0.55));
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M14 14.76V5a2 2 0 0 0-4 0v9.76a3 3 0 1 0 4 0ZM12 22a5 5 0 0 1-3-9V5a3 3 0 0 1 6 0v8a5 5 0 0 1-3 9Z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M14 14.76V5a2 2 0 0 0-4 0v9.76a3 3 0 1 0 4 0ZM12 22a5 5 0 0 1-3-9V5a3 3 0 0 1 6 0v8a5 5 0 0 1-3 9Z"/></svg>') center / contain no-repeat;
}
.gfsTag__icon[data-gfs-icon="hum"]{
  background: radial-gradient(circle at 50% 35%, rgba(59,130,246,0.95), rgba(59,130,246,0.55));
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2s7 7.1 7 12a7 7 0 0 1-14 0c0-4.9 7-12 7-12Zm0 18a5 5 0 0 0 5-5c0-2.7-3-7-5-9.3C10 8 7 12.3 7 15a5 5 0 0 0 5 5Z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2s7 7.1 7 12a7 7 0 0 1-14 0c0-4.9 7-12 7-12Zm0 18a5 5 0 0 0 5-5c0-2.7-3-7-5-9.3C10 8 7 12.3 7 15a5 5 0 0 0 5 5Z"/></svg>') center / contain no-repeat;
}
.gfsTag__icon[data-gfs-icon="wind"]{
  background: radial-gradient(circle at 50% 35%, rgba(34,211,238,0.95), rgba(167,139,250,0.55));
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M3 10h10a2 2 0 1 0-2-2h2a4 4 0 1 1-4 4H3v-2Zm0 6h13a2 2 0 1 1-2 2h2a4 4 0 1 0-4-4H3v2Zm0-10h7a2 2 0 1 1-2 2h2a4 4 0 1 0-4-4H3v2Z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M3 10h10a2 2 0 1 0-2-2h2a4 4 0 1 1-4 4H3v-2Zm0 6h13a2 2 0 1 1-2 2h2a4 4 0 1 0-4-4H3v2Zm0-10h7a2 2 0 1 1-2 2h2a4 4 0 1 0-4-4H3v2Z"/></svg>') center / contain no-repeat;
}
.gfsTag__icon[data-gfs-icon="rain"]{
  background: radial-gradient(circle at 50% 35%, rgba(59,130,246,0.95), rgba(59,130,246,0.35));
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M6 19h13v2H6v-2Zm-3-3h19v2H3v-2Zm2.2-5.6a6 6 0 0 1 11.7-2.1A4.7 4.7 0 1 1 18 17H7.2A4.2 4.2 0 0 1 5.2 10.4Z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M6 19h13v2H6v-2Zm-3-3h19v2H3v-2Zm2.2-5.6a6 6 0 0 1 11.7-2.1A4.7 4.7 0 1 1 18 17H7.2A4.2 4.2 0 0 1 5.2 10.4Z"/></svg>') center / contain no-repeat;
}
.gfsTag__icon[data-gfs-icon="sun"]{
  background: radial-gradient(circle at 50% 35%, rgba(251,191,36,0.95), rgba(251,191,36,0.45));
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M6 19h13v2H6v-2Zm-3-3h19v2H3v-2Zm2.2-5.6a6 6 0 0 1 11.7-2.1A4.7 4.7 0 1 1 18 17H7.2A4.2 4.2 0 0 1 5.2 10.4Z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M6 19h13v2H6v-2Zm-3-3h19v2H3v-2Zm2.2-5.6a6 6 0 0 1 11.7-2.1A4.7 4.7 0 1 1 18 17H7.2A4.2 4.2 0 0 1 5.2 10.4Z"/></svg>') center / contain no-repeat;
}
.gfsTag__icon[data-gfs-icon="press"]{
  background: radial-gradient(circle at 50% 35%, rgba(251,191,36,0.95), rgba(251,191,36,0.55));
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 4a8 8 0 1 0 8 8 8 8 0 0 0-8-8Zm0 18a10 10 0 1 1 10-10 10 10 0 0 1-10 10Zm5-10a1 1 0 0 1-.55.9l-4 2a1 1 0 0 1-1.45-.9V8a1 1 0 0 1 2 0v4.38l3.55-1.78A1 1 0 0 1 17 12Z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 4a8 8 0 1 0 8 8 8 8 0 0 0-8-8Zm0 18a10 10 0 1 1 10-10 10 10 0 0 1-10 10Zm5-10a1 1 0 0 1-.55.9l-4 2a1 1 0 0 1-1.45-.9V8a1 1 0 0 1 2 0v4.38l3.55-1.78A1 1 0 0 1 17 12Z"/></svg>') center / contain no-repeat;
}

#gfs .gfs__chart{
  height: 320px;
  display:flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 16px;
  outline: 1px solid rgba(255,255,255,0.08);
  background: #0F1211;
}

.gfsChartTitle{
  position: relative;
  z-index: 2;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 10px 6px;
  margin-bottom: 10px;
  border-radius: 14px;
  outline: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.20);
}
.gfsMiniTag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(215,255,231,0.90);
  white-space: nowrap;
}

@media (max-width: 820px){
  .gfsChartTitle{ gap: 10px; }
  .gfsMiniTag{ font-size: 12px; }
}
.gfsMiniTag .gfsTag__sw{ width: 10px; height: 10px; border-radius: 4px; }
.gfsMiniTag .gfsTag__icon{ width: 14px; height: 14px; }

/* Let Chart.js size the canvas from its parent to avoid CSS scaling artifacts. */
#gfs .gfs__chart > canvas{
  flex: 1;
  height: auto !important;
  position: relative;
  z-index: 1;
  outline: 0;
  border-radius: 12px;
}

#gfs .gfs__chart > canvas{
  /* Override global .panel canvas styling for this block. */
  background: transparent !important;
}

/* In GFS we style the wrapper instead of the canvas to avoid “double frames”. */
#gfs .gfs__chart > canvas{
  background: transparent;
}

@media (max-width: 700px){
  #gfs .gfs__chart{ height: 260px; }
}
.rv__meta{
  margin-top: 10px;
  font-family: var(--mono);
  color: var(--muted);
  font-size: 13px;
}
.media{
  padding: 12px;
}
/* (images replaced with iframes) */
.media__wrap{
  position: relative;
}
.media__frame{
  width: 100%;
  height: 220px;
  border: 0;
  border-radius: 16px;
  display:block;
  outline: 1px solid rgba(255,255,255,0.08);
  background: #0F1211;
  pointer-events: none;
}
#meteoxRain .media__frame, #meteoxSat .media__frame{
  height: 380px;
}
.mediaRow__pair{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  grid-column: 1 / -1;
}
@media (min-width: 900px){
  .mediaRow__pair{ grid-template-columns: 1fr 1fr; }
}

.radMap{
  width: 100%;
  height: 220px;
  border-radius: 16px;
  overflow:hidden;
  outline: 1px solid rgba(255,255,255,0.08);
  background: #0F1211;
}

@media (min-width: 900px){
  .radMap{ height: 360px; }
}
.radLegend{
  background:rgba(10,12,11,0.85);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;
  padding:8px 12px;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.6;
  color:#D7FFE7;
  backdrop-filter:blur(4px);
}
.radLegend__title{
  font-weight:700;
  font-size:12px;
  margin-bottom:3px;
}
.radLegend__row{
  display:flex;
  align-items:center;
  gap:6px;
}
.radLegend__dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.3);
  flex-shrink:0;
}

.blitz2{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.blitz2__head{
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(215,255,231,0.85);
  margin: 4px 4px 10px;
}
.blitz2__col{
  position:relative;
}
.blitz2__col .panel__tip{
  top:-2px;
  right:4px;
}
.blitzImg{
  object-fit: cover;
}

@media (min-width: 900px){
  .blitz2{ grid-template-columns: 1fr 1fr; }
  .blitz2 .media__frame{ height: 360px; }
}

.media__overlay{
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: rgba(215,255,231,0.0);
  font-family: var(--mono);
  letter-spacing: .10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.media__overlay:hover{
  background: rgba(0,0,0,0.25);
  color: rgba(215,255,231,0.85);
}

/* Modal */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 100;
}
.modal.is-open{ display:block; }
.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(10px);
  animation: modalFade .18s ease-out;
}
.modal__panel{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(0.98);
  width: min(1100px, 94vw);
  height: min(760px, 86vh);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  border-top: 1px solid rgba(20,241,149,0.22);
  background: rgba(5,5,5,0.92);
  box-shadow: 0 0 14px rgba(20,241,149,0.03);
  overflow: hidden;
  animation: modalPop .22s cubic-bezier(.2,.9,.25,1);
}
.modal__close{
  position:absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}
.modal__body{
  position:absolute;
  inset: 0;
  padding: 44px 12px 12px;
}
.modal__body img,
.modal__body iframe{
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 18px;
  display:block;
  background: #0F1211;
}

@keyframes modalFade{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes modalPop{
  from{ transform: translate(-50%,-50%) scale(0.94); opacity:0; }
  to{ transform: translate(-50%,-50%) scale(1); opacity:1; }
}

@media (min-width: 1100px){
  .hero__row{ grid-template-columns: repeat(5, minmax(0,1fr)); }
}

.astro{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:800px){ .astro{ grid-template-columns:1fr 1fr; } }
.astro__card{
  background:rgba(255,255,255,0.02);
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.06);
  padding:14px 14px 10px;
}
.astro__head{
  font-family:var(--mono);
  font-size:16px;
  font-weight:700;
  color:rgba(215,255,231,0.9);
  letter-spacing:.08em;
  margin-bottom:10px;
}
.astro__row{
  display:flex;
  justify-content:space-between;
  padding:3px 0;
  font-family:var(--mono);
  font-size:14px;
  color:rgba(215,255,231,0.6);
  gap:10px;
}
.astro__row__val{ color:rgba(215,255,231,0.85); text-align:right; white-space:nowrap; }
.astro__sub{
  font-family:var(--mono);
  font-size:13px;
  color:rgba(215,255,231,0.25);
  margin-top:8px;
}
.astro__moon{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.astro__moon__emoji{ font-size:36px; }
.astro__moon__name{ font-family:var(--mono); font-size:18px; font-weight:700; color:rgba(215,255,231,0.9); }
.astro__moon__pct{ font-family:var(--mono); font-size:14px; color:rgba(215,255,231,0.5); }
.astroChartWrap{ margin-top:16px; }
.astroChartWrap__title{
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  color:rgba(215,255,231,0.7);
  margin-bottom:8px;
}
.astroChartWrap canvas{ height:220px !important; max-width:100% !important; display:block; }

.glossary{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap:14px;
}
.glossary__item{
  background:var(--bg2);
  border-radius:10px;
  padding:14px 16px;
}
.glossary__img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:6px;
  margin-bottom:10px;
  background:var(--bg);
}
.glossary__term{
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  color:var(--fg);
  margin-bottom:6px;
}
.glossary__desc{
  font-size:13px;
  line-height:1.6;
  color:rgba(215,255,231,0.7);
}
.glossary__desc strong{
  color:rgba(215,255,231,0.85);
}

.footer{
  border-top:1px solid var(--line);
  margin-top:40px;
  padding:30px 16px 20px;
}
.footer__inner{ max-width:900px; margin:0 auto; }
.footer__disclaimer{
  font-size:12px;
  line-height:1.6;
  color:rgba(215,255,231,0.45);
  margin-bottom:20px;
}
.footer__disclaimer strong{ color:rgba(215,255,231,0.6); }
.footer__credits{
  font-size:11px;
  color:rgba(215,255,231,0.3);
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
}
.footer__copy{ color:rgba(215,255,231,0.25); white-space:nowrap; }
.footer__sources{ white-space:nowrap; }
.footer__status{
  color:#14F195; font-size:11px; text-decoration:none; white-space:nowrap; margin-left:auto;
}
.footer__status:hover{ text-decoration:underline; }

/* Space Weather */
#spaceweather{ scroll-margin-top:88px; }
.sw{ display:grid; grid-template-columns:1fr; gap:10px; }
.sw__chart{
  padding:10px 12px 10px;
  border-radius:16px;
  border:1px solid var(--card-border);
  border-top:1px solid var(--card-top);
  background:rgba(0,0,0,.18);
  min-width:0;
}
.sw__chartTitle{
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  color:var(--text);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:2px 2px 10px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.swTag{
  display:inline-block;
  width:10px; height:10px;
  border-radius:3px;
  flex-shrink:0;
}
.swScale{
  font-size:10px;
  font-weight:400;
  color:rgba(215,255,231,0.40);
  letter-spacing:.04em;
  text-transform:none;
}
.sw__chart canvas{
  max-width: 100%;
  max-height: 200px;
}
.auroraImg, .sdoImg{
  object-fit: contain;
  background: #0a0c0b;
}
.sw__images{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.sw__images .media__frame{
  height: 438px;
}
@media (min-width: 900px){
  .sw__images{ grid-template-columns: 1fr 1fr; }
}
.panel__meta{
  margin-top: 10px;
  font-family: var(--mono);
  color: var(--muted);
  font-size: 13px;
}
.swMeta{
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
  padding:4px 2px;
}
@media (min-width:900px){
  .sw{ grid-template-columns:1fr 1fr; }
}
.wzCol{
  height: 320px;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 16px;
  outline: 1px solid rgba(255,255,255,0.08);
  background: #0F1211;
}
.wzCol > canvas{
  flex: 1;
  height: auto !important;
  position: relative;
  z-index: 1;
  outline: 0;
  border-radius: 12px;
  background: transparent !important;
}
.wzChartTitle{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: #D7FFE7;
  padding-bottom: 4px;
}
.wzLegendBox {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 10px 6px;
  margin-bottom: 10px;
  border-radius: 14px;
  outline: 1px solid rgba(20,241,149,0.25);
  background: rgba(0,0,0,0.30);
  width: auto;
}
.wzLegendBox .gfsMiniTag {
  font-size: 12px;
}
.wzTag{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wzMeta{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  padding-top: 4px;
}