:root{color-scheme:dark;--bg:#03070c;--panel:rgba(9,22,37,.88);--line:rgba(123,190,236,.19);--line2:rgba(112,209,255,.46);--text:#edf8ff;--muted:#8ba7bb;--cyan:#68d6ff;--green:#68f4a3;--amber:#ffc85a;--shadow:0 20px 60px rgba(0,0,0,.34)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(rgba(99,174,224,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(99,174,224,.035) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent 88%)}
.sky{position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 15% -10%,rgba(29,106,168,.48),transparent 35%),radial-gradient(circle at 88% 5%,rgba(0,98,158,.27),transparent 31%),radial-gradient(circle at 60% 90%,rgba(8,63,104,.26),transparent 32%),linear-gradient(160deg,#050b13 0%,#07111d 42%,#03070c 100%)}.sky:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 38%,rgba(0,0,0,.35) 100%)}a{color:inherit}.app{width:min(1500px,calc(100% - 34px));margin:auto}
.topbar{min-height:118px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:18px}.brand-mark{width:57px;height:57px;border:1px solid var(--line2);border-radius:15px;display:grid;place-items:center;font-weight:900;letter-spacing:-.06em;font-size:1.15rem;background:linear-gradient(145deg,rgba(104,214,255,.17),rgba(62,140,255,.05));box-shadow:inset 0 0 25px rgba(104,214,255,.08),0 0 30px rgba(45,162,223,.08)}.eyebrow,.kicker,.section-title>div>span{color:var(--cyan);font-size:.69rem;font-weight:800;letter-spacing:.18em}.brand h1{margin:5px 0 0;font-size:clamp(1.5rem,3vw,2.5rem);letter-spacing:-.045em}.top-status{display:flex;align-items:center;gap:19px}.status-chip{padding:9px 12px;border:1px solid var(--line);border-radius:999px;font-size:.7rem;font-weight:900;letter-spacing:.13em;color:var(--muted)}.status-chip.live{color:var(--green);border-color:rgba(104,244,163,.25)}.status-chip span{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;background:var(--green);box-shadow:0 0 13px var(--green)}.clock-wrap{padding-left:18px;border-left:1px solid var(--line);text-align:right}.clock-wrap strong{display:block;font-size:1.35rem;letter-spacing:.04em}.clock-wrap small{display:block;margin-top:2px;color:var(--muted);font-size:.72rem}
.quickbar{display:flex;gap:8px;overflow:auto;padding:15px 0 21px;scrollbar-width:none}.quickbar::-webkit-scrollbar{display:none}.quickbar a{text-decoration:none;white-space:nowrap;padding:9px 13px;border:1px solid var(--line);border-radius:9px;color:var(--muted);background:rgba(255,255,255,.018);font-size:.74rem;font-weight:700;transition:.18s ease}.quickbar a:hover{color:var(--text);border-color:var(--line2);background:rgba(104,214,255,.07)}
.panel{border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.025),transparent 45%),var(--panel);box-shadow:var(--shadow);backdrop-filter:blur(14px)}.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr) 340px;gap:15px}.satellite-panel,.radar-launch-panel,.ops-panel{min-width:0;border-radius:17px;overflow:hidden}.panel-title{min-height:76px;padding:17px 19px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line)}.panel-title.compact{min-height:68px}.panel-title h2{margin:5px 0 0;font-size:1.05rem}.kicker{display:flex;align-items:center;gap:8px}.kicker.amber{color:var(--amber)}.panel-action{flex:none;text-decoration:none;color:var(--cyan);font-size:.72rem;font-weight:800;padding:8px 10px;border:1px solid var(--line);border-radius:8px}.panel-action:hover{border-color:var(--line2)}.amber-link{color:var(--amber)}
.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 11px var(--green);animation:pulse 1.8s infinite}.pulse.blue{background:var(--cyan);box-shadow:0 0 11px var(--cyan)}.amber-pulse{background:var(--amber);box-shadow:0 0 11px var(--amber)}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.38}}
.media-link{position:relative;display:block;overflow:hidden;background:#02060b}.media-link img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover;transition:transform .45s ease}.media-link:hover img{transform:scale(1.025)}.media-overlay{position:absolute;left:0;right:0;bottom:0;padding:38px 18px 15px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;background:linear-gradient(transparent,rgba(0,6,13,.88))}.media-overlay span{color:#b4c9d7;font-size:.74rem}.media-overlay strong{font-size:.72rem;color:white}
.radar-launch{display:grid;grid-template-rows:minmax(290px,1fr) auto;height:calc(100% - 76px);text-decoration:none;background:radial-gradient(circle at 50% 40%,rgba(32,92,126,.22),transparent 55%)}.radar-scope{position:relative;min-height:310px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(180deg,rgba(4,18,28,.94),rgba(2,10,17,.98))}.ring{position:absolute;border:1px solid rgba(104,214,255,.15);border-radius:50%}.r1{width:65%;aspect-ratio:1}.r2{width:45%;aspect-ratio:1}.r3{width:25%;aspect-ratio:1}.radar-scope:before,.radar-scope:after{content:"";position:absolute;background:rgba(104,214,255,.09)}.radar-scope:before{width:1px;height:80%}.radar-scope:after{height:1px;width:80%}.sweep{position:absolute;width:32%;height:43%;left:50%;top:7%;transform-origin:bottom left;background:linear-gradient(105deg,rgba(104,244,163,.19),transparent 75%);clip-path:polygon(0 100%,100% 0,100% 100%);animation:sweep 5s linear infinite}@keyframes sweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.radar-center{z-index:2;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);background:#07121c;color:var(--cyan);font-weight:900;font-size:.75rem;box-shadow:0 0 28px rgba(104,214,255,.17)}.radar-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:#62e991;box-shadow:0 0 15px #62e991}.d1{left:30%;top:35%}.d2{left:67%;top:58%;background:#ffca5a;box-shadow:0 0 15px #ffca5a}.d3{left:58%;top:27%;width:6px;height:6px}.radar-copy{padding:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:5px}.radar-copy span,.radar-copy small{color:var(--muted);font-size:.72rem}.radar-copy strong{font-size:.92rem;color:var(--cyan)}
.ops-panel{padding-bottom:11px}.ops-list{padding:0 11px}.ops-list a{min-height:69px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px;border-bottom:1px solid var(--line);text-decoration:none;transition:.16s ease}.ops-list a:last-child{border-bottom:0}.ops-list a:hover{background:rgba(104,214,255,.055)}.ops-icon{font-size:1.15rem;text-align:center}.ops-list strong,.ops-list small{display:block}.ops-list strong{font-size:.82rem}.ops-list small{margin-top:4px;color:var(--muted);font-size:.67rem}.ops-list b{color:var(--cyan)}
.section-block{margin-top:31px;scroll-margin-top:16px}.section-title{min-height:66px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:0 2px 13px;border-bottom:1px solid var(--line);margin-bottom:15px}.section-title h2{margin:4px 0 0;font-size:1.65rem;letter-spacing:-.035em}.section-title>a,.section-actions a,.section-actions button{color:var(--cyan);text-decoration:none;font-size:.75rem;font-weight:800}.section-actions{display:flex;align-items:center;gap:9px}.section-actions button{font-family:inherit;cursor:pointer;padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:transparent}.section-actions button:hover{border-color:var(--line2)}
.weatherstar-shell{border-radius:18px;overflow:hidden;background:#020407}.tv-frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}.tv-frame iframe{width:100%;height:100%;border:0;display:block}.tv-led{position:absolute;z-index:2;right:13px;top:13px;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 13px var(--green);pointer-events:none}.weatherstar-footer{display:flex;justify-content:space-between;gap:18px;padding:11px 15px;color:var(--muted);font-size:.7rem;border-top:1px solid var(--line)}.weatherstar-footer span:first-child{color:#b8cad7}
.tropical-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);gap:15px}.tropical-image-panel{border-radius:17px;overflow:hidden}.tropical-image-panel .media-link img{aspect-ratio:16/9;object-fit:contain;background:#050b11}.tool-stack{display:grid;gap:12px}.tool-card{min-height:150px;border-radius:15px;padding:19px;display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:14px;align-items:center;text-decoration:none;transition:.18s ease}.tool-card:hover,.threat-card:hover{transform:translateY(-3px);border-color:var(--line2)}.tool-icon{font-size:2rem;text-align:center}.tool-card small{display:block;color:var(--cyan);font-size:.62rem;font-weight:900;letter-spacing:.14em}.tool-card strong{display:block;margin-top:4px;font-size:1rem}.tool-card p{margin:6px 0 0;color:var(--muted);font-size:.74rem;line-height:1.45}.tool-card>b{color:var(--cyan)}
.threat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.threat-card{position:relative;min-height:220px;border-radius:15px;padding:20px;text-decoration:none;overflow:hidden;transition:.18s ease}.threat-number{position:absolute;right:15px;top:12px;color:rgba(104,214,255,.14);font-size:2.2rem;font-weight:900}.threat-icon{display:block;font-size:1.9rem;margin-bottom:21px}.threat-card small{display:block;color:var(--cyan);font-size:.6rem;font-weight:900;letter-spacing:.14em}.threat-card strong{display:block;margin-top:6px;font-size:1.03rem}.threat-card p{margin:8px 0 16px;color:var(--muted);font-size:.76rem;line-height:1.45}.threat-card b{font-size:.67rem;color:var(--cyan)}
.ticker{margin-top:28px;border-radius:11px;display:flex;overflow:hidden}.ticker-label{flex:none;padding:12px 15px;border-right:1px solid var(--line);color:var(--cyan);font-size:.65rem;font-weight:900;letter-spacing:.12em;white-space:nowrap}.ticker-window{overflow:hidden;flex:1}.ticker-track{width:max-content;display:flex;gap:24px;padding:12px 25px;color:var(--muted);font-size:.69rem;animation:ticker 38s linear infinite}@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
footer{display:flex;justify-content:space-between;gap:25px;margin-top:22px;padding:24px 2px 36px;border-top:1px solid var(--line);color:#688399;font-size:.67rem}footer span:first-child{color:#9ab0c1;font-weight:800}
@media(max-width:1180px){.hero-grid{grid-template-columns:1fr 1fr}.ops-panel{grid-column:1/-1}.ops-list{display:grid;grid-template-columns:repeat(2,1fr)}.ops-list a{border-right:1px solid var(--line)}.threat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.app{width:min(100% - 20px,1500px)}.topbar{min-height:98px}.top-status .status-chip{display:none}.hero-grid,.tropical-grid{grid-template-columns:1fr}.ops-panel{grid-column:auto}.ops-list{grid-template-columns:1fr}.ops-list a{border-right:0}.weatherstar-footer,.section-title{align-items:flex-start;flex-direction:column}.section-actions{width:100%;justify-content:space-between}}
@media(max-width:560px){.brand-mark{display:none}.eyebrow{font-size:.57rem}.brand h1{font-size:1.35rem}.clock-wrap{padding-left:9px}.clock-wrap strong{font-size:1rem}.clock-wrap small{font-size:.6rem}.threat-grid{grid-template-columns:1fr}.panel-title{min-height:69px;padding:14px}.media-overlay{align-items:flex-start;flex-direction:column}.radar-scope{min-height:260px}.ticker-label{display:none}footer{flex-direction:column}}


/* v3.1: real KHDC radar imagery */
.radar-panel {
  min-width: 0;
  border-radius: 17px;
  overflow: hidden;
}

.radar-media-link {
  height: calc(100% - 76px);
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #02060b;
}

.radar-media-link img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  aspect-ratio: auto;
  object-fit: contain;
  background: #02060b;
}

@media (max-width: 820px) {
  .radar-media-link,
  .radar-media-link img {
    min-height: 360px;
  }
}


/* v3.2: keep the working WeatherStar player compact and centered */
.weatherstar-shell {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}


/* v3.3: live KMSY conditions + 5-day NWS forecast */
.conditions-grid {
  display: grid;
  grid-template-columns: minmax(330px, .82fr) minmax(0, 1.18fr);
  gap: 15px;
}

.current-conditions-card,
.forecast-panel {
  border-radius: 17px;
  overflow: hidden;
}

.current-main {
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 22px;
  align-items: center;
}

.weather-source {
  color: var(--cyan);
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.current-main h3,
.forecast-heading h3 {
  margin: 6px 0 0;
  font-size: 1.05rem;
}

.current-temp-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 17px;
}

.current-weather-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(104,214,255,.055);
  font-size: 2rem;
}

.current-temp-row strong {
  font-size: clamp(3rem, 6vw, 5.2rem);
  line-height: .9;
  letter-spacing: -.07em;
}

.current-description {
  margin-top: 11px;
  color: #c2d6e3;
  font-size: .88rem;
}

.current-metrics {
  display: grid;
  gap: 9px;
}

.current-metrics div {
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,.018);
}

.current-metrics span,
.current-metrics strong {
  display: block;
}

.current-metrics span {
  color: var(--muted);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.current-metrics strong {
  margin-top: 4px;
  font-size: .91rem;
}

.current-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .68rem;
}

.forecast-heading {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}

.forecast-refresh-note {
  color: var(--muted);
  font-size: .68rem;
}

.forecast-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 255px;
}

.forecast-day {
  padding: 18px 12px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.forecast-day:last-child {
  border-right: 0;
}

.forecast-day .day-name {
  color: var(--cyan);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.forecast-icon {
  margin: 18px 0 10px;
  font-size: 2.15rem;
}

.forecast-temps {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 9px;
}

.forecast-high {
  font-size: 1.45rem;
  font-weight: 900;
}

.forecast-low {
  color: var(--muted);
  font-size: .88rem;
  font-weight: 800;
}

.forecast-condition {
  min-height: 36px;
  color: #c1d3df;
  font-size: .7rem;
  line-height: 1.35;
}

.forecast-rain {
  margin-top: auto;
  padding-top: 12px;
  color: var(--muted);
  font-size: .67rem;
}

.forecast-rain strong {
  color: var(--cyan);
}

.forecast-loading,
.weather-api-error {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  padding: 28px;
  color: var(--muted);
  text-align: center;
  font-size: .78rem;
}

.weather-api-error strong {
  display: block;
  margin-bottom: 5px;
  color: var(--text);
}

@media (max-width: 1000px) {
  .conditions-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .current-main {
    grid-template-columns: 1fr;
  }

  .current-metrics {
    grid-template-columns: repeat(3, 1fr);
  }

  .forecast-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .forecast-day {
    border-bottom: 1px solid var(--line);
  }

  .forecast-day:nth-child(2n) {
    border-right: 0;
  }

  .forecast-day:last-child {
    grid-column: 1 / -1;
  }

  .current-footer,
  .forecast-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 460px) {
  .current-metrics {
    grid-template-columns: 1fr;
  }
}

/* Space between Current Conditions and satellite/radar */
.local-conditions-block {
  margin-bottom: 28px;
}