:root {
  color-scheme: light;
  --bg-a: #e9f7ff;
  --bg-b: #fff7e6;
  --bg-c: #f7efff;
  --glass: rgba(255, 255, 255, 0.54);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --glass-soft: rgba(255, 255, 255, 0.38);
  --ink: #172124;
  --muted: rgba(23, 33, 36, 0.62);
  --line: rgba(255, 255, 255, 0.72);
  --line-dark: rgba(23, 33, 36, 0.1);
  --teal: #08777f;
  --blue: #2f7df6;
  --rose: #d94f78;
  --amber: #f0b23b;
  --shadow: 0 24px 70px rgba(41, 58, 72, 0.18);
  --inner: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(255, 255, 255, 0.24);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(135deg, var(--bg-a) 0%, var(--bg-c) 46%, var(--bg-b) 100%);
  color: var(--ink);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    linear-gradient(115deg, rgba(47, 125, 246, 0.15), transparent 35%),
    linear-gradient(250deg, rgba(217, 79, 120, 0.13), transparent 42%),
    linear-gradient(0deg, rgba(8, 119, 127, 0.1), transparent 55%);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:disabled {
  cursor: progress;
  opacity: 0.7;
}

.app-shell {
  width: min(100%, 620px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 14px max(22px, env(safe-area-inset-bottom));
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 2px 16px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(30px, 7vw, 42px);
  line-height: 1;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

h2 {
  margin-bottom: 0;
  font-size: 18px;
  letter-spacing: 0;
}

.icon-button,
.tabs,
.quick-search,
.hero-forecast,
.analysis-box,
.station-card,
.chart-card,
.source-card,
.around-card,
.hour-card,
.metric {
  border: 1px solid var(--line);
  background: var(--glass);
  box-shadow: var(--shadow), var(--inner);
  backdrop-filter: blur(28px) saturate(1.45);
  -webkit-backdrop-filter: blur(28px) saturate(1.45);
}

.icon-button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  color: var(--teal);
}

.icon-button span {
  font-size: 24px;
  line-height: 1;
}

.storm-button span {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  color: #fff;
  font-size: 25px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.18) 30%, transparent 48%),
    conic-gradient(from 30deg, rgba(80, 215, 255, 0.95), rgba(74, 117, 225, 0.78), rgba(178, 132, 255, 0.85), rgba(255, 255, 255, 0.68), rgba(80, 215, 255, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 0 18px rgba(122, 202, 255, 0.4);
  text-shadow: 0 1px 8px rgba(6, 32, 74, 0.35);
}

.storm-button span::before,
.storm-button span::after {
  display: none;
}

.storm-button span::before {
  inset: 5px;
  border: 2px solid var(--blue);
  border-left-color: transparent;
  transform: rotate(-30deg);
}

.storm-button span::after {
  left: 9px;
  top: 9px;
  width: 5px;
  height: 5px;
  background: var(--rose);
  box-shadow: 8px -7px 0 -2px var(--teal), -7px 8px 0 -2px var(--amber);
}

.tabs {
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.56);
  overflow: hidden;
}

.tab {
  min-width: 0;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.tab.active {
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(41, 58, 72, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.panel {
  display: none;
  padding-top: 16px;
}

.panel.active {
  display: block;
}

.quick-search {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 24px;
}

.api-status-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.42fr);
  align-items: stretch;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.32);
  color: rgba(18, 42, 65, 0.78);
  font-size: 12px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.api-status-main,
.api-status-actions {
  display: grid;
  gap: 7px;
}

.api-status-main {
  align-content: center;
}

.api-status-actions {
  align-content: center;
}

.api-status-strip span {
  min-width: 0;
}

.api-update-time {
  padding-top: 2px;
  color: rgba(18, 42, 65, 0.68);
}

.api-status-strip b {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.api-status-strip b.ok {
  color: #126b49;
}

.api-status-strip b.warn {
  color: #8a5500;
}

.api-status-strip b.bad {
  color: #9c1d34;
}

.mini-action-button {
  min-height: 34px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.mini-action-button:disabled {
  opacity: 0.58;
}

@media (max-width: 520px) {
  .api-status-strip {
    grid-template-columns: 1fr;
  }
}

.wu-meta-line {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(18, 42, 65, 0.66);
}

.hero-forecast {
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(8, 119, 127, 0.88), rgba(47, 125, 246, 0.55)),
    rgba(255, 255, 255, 0.32);
  color: #fff;
}

.hero-mainline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
}

.weather-shift {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.weather-badge {
  display: grid;
  place-items: center;
  min-width: 64px;
}

.weather-badge span,
.weather-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.44) 34%, transparent 58%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(219, 236, 255, 0.76));
  box-shadow:
    0 12px 28px rgba(16, 38, 66, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -10px 22px rgba(47, 125, 246, 0.1);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.weather-badge.predicted span,
.weather-badge.predicted .weather-icon {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.42) 34%, transparent 58%),
    conic-gradient(from 210deg, rgba(90, 216, 255, 0.72), rgba(179, 135, 255, 0.72), rgba(255, 210, 112, 0.58), rgba(90, 216, 255, 0.72));
  box-shadow: 0 0 28px rgba(154, 194, 255, 0.64), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.weather-icon.rain,
.weather-icon.drizzle,
.weather-icon.thunder,
.weather-icon.snow {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.36) 34%, transparent 58%),
    linear-gradient(145deg, rgba(205, 232, 255, 0.98), rgba(95, 157, 246, 0.86));
}

.weather-icon.clear,
.weather-icon.partly {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.34) 34%, transparent 58%),
    linear-gradient(145deg, rgba(255, 242, 176, 0.96), rgba(98, 188, 255, 0.72));
}

.weather-icon.cloudy {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.38) 34%, transparent 58%),
    linear-gradient(145deg, rgba(230, 241, 255, 0.98), rgba(164, 193, 231, 0.74));
}

.weather-icon.wind {
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.42) 36%, transparent 60%),
    linear-gradient(145deg, rgba(211, 246, 247, 0.95), rgba(8, 119, 127, 0.42));
}

.weather-icon.hot {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.34) 34%, transparent 58%),
    linear-gradient(145deg, rgba(255, 238, 177, 0.96), rgba(240, 178, 59, 0.82));
}

.weather-icon.cold {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.36) 34%, transparent 58%),
    linear-gradient(145deg, rgba(232, 249, 255, 0.98), rgba(145, 207, 255, 0.8));
}

.weather-badge small,
.weather-arrow small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.weather-badge em {
  max-width: 92px;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
}

.weather-arrow {
  display: grid;
  place-items: center;
  color: #fff;
}

.weather-arrow b {
  font-size: 30px;
  line-height: 1;
}

.label {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 800;
}

#mainTemp {
  display: block;
  font-size: 78px;
  line-height: 0.88;
  letter-spacing: 0;
}

#mainSummary {
  margin-bottom: 0;
  font-size: 17px;
  line-height: 1.45;
}

.weather-evidence {
  min-height: 40px;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.96);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.current-condition {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.94);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.35;
}

.confidence {
  display: grid;
  grid-template-columns: 88px 1fr 44px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

meter {
  width: 100%;
}

.source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.source-card {
  min-height: 124px;
  padding: 14px;
  border-radius: 22px;
  background: var(--glass-strong);
}

.source-card small {
  color: var(--muted);
  font-weight: 800;
}

.source-card strong {
  display: block;
  margin: 12px 0 5px;
  font-size: 28px;
}

.source-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.analysis-box,
.station-card,
.chart-card {
  margin-top: 12px;
  padding: 16px;
  border-radius: 24px;
}

.ai-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.86);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.42)),
    var(--glass);
  box-shadow:
    0 24px 70px rgba(41, 58, 72, 0.16),
    0 0 48px rgba(93, 135, 255, 0.2),
    0 0 74px rgba(220, 125, 255, 0.13),
    var(--inner);
}

.ai-card::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 18%, rgba(92, 142, 255, 0.34), transparent 28%),
    radial-gradient(circle at 82% 24%, rgba(225, 122, 255, 0.28), transparent 30%),
    radial-gradient(circle at 48% 100%, rgba(117, 230, 211, 0.2), transparent 34%),
    linear-gradient(120deg, rgba(47, 125, 246, 0.12), transparent 38%);
  animation: aiGlow 7s ease-in-out infinite alternate;
}

.ai-card > * {
  position: relative;
}

.ai-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.ai-heading small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
}

.ai-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 999px;
  background: conic-gradient(from 180deg, #4d8dff, #d86bff, #75e6d3, #ffd36e, #4d8dff);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 0 30px rgba(111, 149, 255, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

@keyframes aiGlow {
  from {
    opacity: 0.72;
    transform: translate3d(-1%, -1%, 0) scale(1);
  }
  to {
    opacity: 1;
    transform: translate3d(1%, 1%, 0) scale(1.02);
  }
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.section-heading span {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.54);
  color: var(--teal);
  font-size: 12px;
  font-weight: 850;
}

.analysis-box p {
  margin-bottom: 0;
  color: rgba(23, 33, 36, 0.72);
  line-height: 1.52;
}

.station-analysis {
  border-color: rgba(255, 255, 255, 0.92);
}

#stationAiText {
  display: grid;
  gap: 10px;
}

.station-ai-forecast {
  display: block;
  padding: 14px 15px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(8, 119, 127, 0.16), rgba(47, 125, 246, 0.14)),
    rgba(255, 255, 255, 0.58);
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.28;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 12px 30px rgba(47, 125, 246, 0.1);
}

.station-ai-outlook,
.station-ai-details,
.station-ai-cloud {
  display: block;
  color: rgba(23, 33, 36, 0.68);
}

.station-ai-outlook {
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.5);
  color: rgba(8, 119, 127, 0.92);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
}

.station-ai-cloud {
  padding-top: 2px;
  color: rgba(8, 119, 127, 0.86);
  font-weight: 760;
}

.station-ai-probability {
  justify-self: start;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.hazard-card {
  margin-top: 12px;
}

.sources-drawer {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--glass);
  box-shadow: var(--shadow), var(--inner);
  backdrop-filter: blur(28px) saturate(1.45);
  -webkit-backdrop-filter: blur(28px) saturate(1.45);
  overflow: hidden;
}

.sources-drawer summary {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.sources-drawer summary::-webkit-details-marker {
  display: none;
}

.sources-drawer summary::after {
  content: "⌄";
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--teal);
  transition: transform 0.18s ease;
}

.sources-drawer[open] summary::after {
  transform: rotate(180deg);
}

.sources-drawer summary b {
  margin-left: auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--teal);
  font-size: 12px;
}

.sources-drawer .source-grid {
  padding: 0 12px 12px;
}

.radar-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.radar-map-card,
.radar-ai-card {
  min-height: 0;
  aspect-ratio: 1;
  overflow: hidden;
}

.radar-map-card {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 12px;
}

.radar-ai-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  padding: 13px;
}

.radar-ai-card .ai-heading {
  gap: 8px;
}

.radar-ai-card .ai-mark {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.radar-ai-card h2 {
  font-size: 15px;
}

.radar-ai-card small,
.compact-heading span {
  font-size: 11px;
}

#radarAiText {
  display: grid;
  align-content: start;
  gap: 7px;
  margin: 0;
  color: rgba(23, 33, 36, 0.72);
  font-size: 13px;
  line-height: 1.32;
}

#radarAiText b {
  display: block;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(47, 125, 246, 0.14), rgba(255, 255, 255, 0.55));
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
}

.hazard-list {
  display: grid;
  gap: 9px;
}

.hazard-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
}

.hazard-item b {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--teal);
  font-size: 24px;
  line-height: 1;
}

.hazard-item strong,
.hazard-item small {
  display: block;
}

.hazard-item strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.hazard-item small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.hazard-item.high {
  background: linear-gradient(135deg, rgba(217, 79, 120, 0.18), rgba(255, 255, 255, 0.62));
}

.hazard-item.high b {
  color: var(--rose);
}

.hazard-item.watch {
  background: linear-gradient(135deg, rgba(240, 178, 59, 0.2), rgba(255, 255, 255, 0.62));
}

.hazard-item.watch b {
  color: #b87500;
}

.hazard-item.calm {
  background: linear-gradient(135deg, rgba(8, 119, 127, 0.12), rgba(255, 255, 255, 0.62));
}

.forecast-chart-card {
  overflow: hidden;
}

.forecast-chart-card canvas {
  margin-top: 4px;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart-legend i {
  width: 18px;
  height: 4px;
  border-radius: 999px;
}

.around-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.future-overview-card {
  margin-bottom: 12px;
}

.future-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.future-day {
  display: grid;
  gap: 6px;
  min-height: 154px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.38);
  color: #ffffff;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 12px 26px rgba(11, 65, 135, 0.1);
}

.future-day-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.future-alerts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 32px;
}

.future-alerts span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
}

.future-alerts .high {
  background: linear-gradient(135deg, rgba(217, 79, 120, 0.9), rgba(240, 178, 59, 0.76));
}

.future-alerts .watch {
  background: linear-gradient(135deg, rgba(240, 178, 59, 0.88), rgba(47, 125, 246, 0.52));
}

.future-day.active {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(77, 153, 232, 0.32));
  color: #082b5c;
}

.station-card-demo {
  border-color: rgba(255, 204, 120, 0.74);
}

.station-card-demo .station-note {
  background: rgba(255, 231, 168, 0.24);
}

.future-day small,
.future-day span {
  font-size: 12px;
  font-weight: 850;
}

.future-day b {
  font-size: 34px;
  line-height: 1;
}

.future-day strong {
  font-size: 20px;
  line-height: 1.15;
}

.future-hourly-card {
  overflow: hidden;
}

.future-hourly-ai {
  margin: 10px 0 4px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.45;
  text-shadow: 0 1px 12px rgba(8, 32, 76, 0.28);
}

.future-hourly {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.future-hour {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.42);
  color: #09234c;
}

.future-hour.peak {
  background: linear-gradient(145deg, rgba(255, 228, 143, 0.62), rgba(112, 184, 255, 0.36));
}

.future-hour small,
.future-hour span {
  font-size: 11px;
  font-weight: 850;
}

.future-hour b {
  font-size: 23px;
  line-height: 1;
}

.future-hour strong {
  font-size: 18px;
}

.around-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.58);
}

.around-card-head {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 10px;
}

.station-index {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(8, 119, 127, 0.2), rgba(47, 125, 246, 0.2)),
    rgba(255, 255, 255, 0.7);
  color: var(--teal);
  font-size: 13px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.around-card.wet {
  background:
    linear-gradient(135deg, rgba(47, 125, 246, 0.18), rgba(255, 255, 255, 0.62)),
    rgba(255, 255, 255, 0.58);
}

.around-card.watch {
  background:
    linear-gradient(135deg, rgba(240, 178, 59, 0.18), rgba(255, 255, 255, 0.62)),
    rgba(255, 255, 255, 0.58);
}

.around-card strong {
  display: block;
  font-size: 17px;
}

.around-card small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.around-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.geo-map {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(230, 240, 246, 0.75), rgba(255, 255, 255, 0.66));
  isolation: isolate;
  touch-action: none;
  cursor: grab;
  contain: layout paint;
}

.geo-map:active {
  cursor: grabbing;
}

.geo-map .map-controls button {
  touch-action: manipulation;
}

.radar-map {
  height: 100%;
  min-height: 0;
  border-radius: 18px;
}

.around-geo-map {
  aspect-ratio: 16 / 10;
}

.hurricane-hero {
  margin-bottom: 12px;
}

.hurricane-coverage-note {
  margin: 12px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.hurricane-live-overview,
.hurricane-report-stream {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: var(--inner);
}

.hurricane-basin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
}

.hurricane-basin-card {
  display: grid;
  gap: 4px;
  min-height: 90px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 16px;
  color: #fff;
  background: rgba(55, 122, 207, 0.24);
}

.hurricane-basin-card strong {
  font-size: 14px;
}

.hurricane-basin-card small {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 800;
}

.hurricane-basin-card span {
  margin-top: auto;
  color: rgba(255, 255, 255, 0.94);
  font-size: 12px;
  font-weight: 900;
}

.hurricane-basin-card.calm {
  background: rgba(34, 153, 123, 0.18);
}

.hurricane-basin-card.attention {
  background: rgba(236, 133, 51, 0.25);
}

.hurricane-maps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}

.hurricane-map-card {
  padding: 12px;
  overflow: hidden;
}

.hurricane-map-card img {
  display: block;
  width: 100%;
  min-height: 210px;
  object-fit: contain;
  border: 1px solid rgba(23, 33, 36, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.48);
}

.hurricane-feed {
  display: grid;
  gap: 10px;
}

.hurricane-global-sources {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: var(--inner);
}

.hurricane-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.hurricane-sources-note {
  margin: 0;
  padding: 11px 13px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.11);
  font-size: 13px;
  font-weight: 780;
  line-height: 1.42;
}

.hurricane-source-card {
  display: grid;
  gap: 6px;
  min-height: 118px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 18px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(145deg, rgba(81, 150, 224, 0.44), rgba(74, 110, 184, 0.32));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

.hurricane-source-card strong {
  font-size: 16px;
}

.hurricane-source-card small,
.hurricane-source-card span {
  color: rgba(255, 255, 255, 0.84);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.35;
}

.hurricane-item {
  position: relative;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--glass);
  box-shadow: var(--shadow), var(--inner);
  backdrop-filter: blur(28px) saturate(1.45);
  -webkit-backdrop-filter: blur(28px) saturate(1.45);
}

.hurricane-item-tag {
  display: inline-flex;
  margin: 0 0 8px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #fff;
  background: rgba(245, 138, 45, 0.5);
  font-size: 11px;
  font-weight: 900;
}

.hurricane-item-tag.calm {
  background: rgba(26, 153, 113, 0.48);
}

.hurricane-item strong,
.hurricane-item small,
.hurricane-item p {
  display: block;
}

.hurricane-item strong {
  margin-bottom: 6px;
  font-size: 15px;
}

.hurricane-item small {
  margin-bottom: 8px;
  color: var(--muted);
  font-weight: 800;
}

.hurricane-item p {
  margin-bottom: 0;
  color: rgba(23, 33, 36, 0.74);
  font-size: 14px;
  line-height: 1.4;
}

.map-tile,
.map-tiles,
.radar-cells,
.map-vignette,
.map-markers {
  position: absolute;
  inset: 0;
}

.map-tile {
  max-width: none;
  user-select: none;
}

.radar-tile {
  opacity: 0.64;
  mix-blend-mode: multiply;
}

.radar-cells {
  z-index: 2;
  pointer-events: none;
}

.radar-cell {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 999px;
  filter: blur(0.3px);
  opacity: 0.78;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 28px currentColor;
  max-width: 118px;
  max-height: 118px;
}

.radar-cell i {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--teal);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  transform: scale(0.94);
}

.radar-cell.backup {
  opacity: 0.5;
  border-style: dashed;
  transform: translate(-50%, -50%) scale(0.88);
}

.radar-cell.primary {
  opacity: 0.88;
  box-shadow: 0 0 36px currentColor, 0 0 18px rgba(255, 255, 255, 0.55) inset;
}

.map-vignette {
  pointer-events: none;
  z-index: 3;
  box-shadow: inset 0 0 42px rgba(255, 255, 255, 0.78), inset 0 -28px 42px rgba(8, 119, 127, 0.08);
}

.map-markers {
  z-index: 4;
}

.map-marker {
  position: absolute;
  display: grid;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(8, 119, 127, 0.92);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 20px rgba(23, 33, 36, 0.18);
}

.map-marker small {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  min-width: max-content;
  max-width: 92px;
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--teal);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  transform: translateX(-50%);
  box-shadow: 0 8px 16px rgba(23, 33, 36, 0.12);
}

.map-marker.home small {
  display: none;
}

.map-marker.home {
  min-width: 34px;
  height: 34px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.95), transparent 30%),
    linear-gradient(135deg, var(--teal), var(--blue));
}

.map-marker.rain {
  background: var(--blue);
}

.map-marker.watch {
  background: var(--amber);
}

.map-marker-arrow {
  position: absolute;
  top: -12px;
  width: 2px;
  height: 12px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: 50% 26px;
}

.map-attribution {
  position: absolute;
  right: 8px;
  bottom: 7px;
  z-index: 6;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(23, 33, 36, 0.54);
  font-size: 10px;
  font-weight: 800;
  max-width: min(86%, 280px);
  white-space: normal;
  text-align: right;
}

.map-controls {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 6;
  display: grid;
  gap: 6px;
}

.map-controls button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(23, 33, 36, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.around-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.around-values span {
  display: grid;
  min-height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.54);
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.legend-temp {
  background: var(--teal);
}

.legend-rain {
  background: var(--blue);
}

.station-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.station-note {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric {
  min-height: 86px;
  padding: 12px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.48);
}

.metric span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.metric strong {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

.station-charts {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.mini-chart-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.54);
  box-shadow: var(--shadow), var(--inner);
  backdrop-filter: blur(28px) saturate(1.45);
  -webkit-backdrop-filter: blur(28px) saturate(1.45);
}

.wu-chart {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.64);
}

.mini-chart-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.mini-chart-title strong {
  font-size: 15px;
}

.mini-chart-title span {
  color: var(--teal);
  font-size: 13px;
  font-weight: 850;
}

.settings-form {
  display: grid;
  gap: 12px;
}

.app-info-card {
  display: grid;
  gap: 11px;
  margin-bottom: 12px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(112, 174, 242, 0.2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.app-info-heading,
.app-info-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.app-info-heading > div {
  display: grid;
  gap: 2px;
}

.app-info-heading small,
.app-info-grid span,
.app-info-card p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 800;
}

.app-info-heading strong {
  color: #fff;
  font-size: 21px;
}

.app-info-grid b {
  color: #fff;
}

.app-info-card p {
  margin: 0;
  line-height: 1.4;
}

.app-mode-badge {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 999px;
  background: rgba(24, 102, 188, 0.24);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.weather-icon,
.future-hour b,
.future-day-top b,
.home-hour b,
.tab-icon {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-variant-emoji: emoji;
}

.pws-update-settings,
.api-update-settings {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.weather-usage-grid {
  display: grid;
  gap: 8px;
}

.usage-card {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.32);
}

.usage-card.warn {
  border-color: rgba(255, 189, 89, 0.74);
  background: rgba(255, 244, 216, 0.48);
}

.usage-card small,
.source-meta {
  color: rgba(32, 55, 78, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.usage-card strong {
  color: #12395d;
  font-size: 14px;
}

.usage-card span {
  color: rgba(32, 55, 78, 0.78);
  font-size: 12px;
}

.settings-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: var(--inner);
}

.settings-tab {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  font-weight: 900;
  text-shadow: 0 1px 10px rgba(9, 35, 76, 0.32);
}

.settings-tab.active {
  background: rgba(255, 255, 255, 0.66);
  color: #113f78;
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 24px rgba(22, 77, 145, 0.16);
}

.keys-panel {
  display: none;
  gap: 12px;
}

#settingsPanel.show-keys .settings-form {
  display: none;
}

#settingsPanel.show-keys .keys-panel {
  display: grid;
}

.key-grid {
  display: grid;
  gap: 10px;
}

.key-card {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.44);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.key-card small {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 1px 8px rgba(6, 26, 57, 0.26);
}

.key-card strong {
  color: #082b5c;
  font-size: 15px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.key-card span {
  justify-self: start;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.key-card.configured span {
  background: rgba(42, 190, 148, 0.76);
}

.key-card.missing span {
  background: rgba(213, 70, 110, 0.68);
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

input {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 15px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 28px rgba(41, 58, 72, 0.08);
  color: var(--ink);
  font-size: 16px;
  outline: none;
}

input:focus {
  border-color: rgba(47, 125, 246, 0.72);
  box-shadow: 0 0 0 4px rgba(47, 125, 246, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.primary-button,
.secondary-button {
  min-height: 50px;
  border-radius: 999px;
  font-weight: 850;
  padding: 0 16px;
}

.primary-button {
  border: 0;
  background: linear-gradient(135deg, var(--teal), var(--blue));
  color: #fff;
  box-shadow: 0 14px 32px rgba(47, 125, 246, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.secondary-button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.58);
  color: var(--teal);
  box-shadow: var(--inner);
}

.settings-message {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.48);
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
}

.muted-card {
  background: rgba(255, 255, 255, 0.42);
}

@media (max-width: 760px) {
  .app-shell {
    padding-inline: 12px;
  }

  .radar-pair {
    grid-template-columns: 1fr;
  }

  .radar-map-card,
  .radar-ai-card {
    aspect-ratio: auto;
    overflow: hidden;
  }

  .radar-map-card {
    min-height: 340px;
  }

  .radar-map {
    min-height: 238px;
    height: 100%;
  }

  .radar-ai-card {
    min-height: 0;
    max-width: 100%;
  }

  .radar-ai-card .section-heading {
    align-items: flex-start;
  }

  .radar-ai-card .section-heading span {
    max-width: 104px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #radarAiText {
    font-size: 14px;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  #radarAiText b {
    font-size: 15px;
    overflow-wrap: anywhere;
  }

  .around-geo-map {
    aspect-ratio: 1 / 0.72;
    min-height: 260px;
  }

  .around-map-card {
    overflow: hidden;
  }

  .map-marker {
    min-width: 26px;
    height: 26px;
    font-size: 11px;
  }

  .map-marker.home {
    min-width: 30px;
    height: 30px;
  }

  .map-controls {
    right: 7px;
    top: 7px;
  }

  .map-controls button {
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }

  .map-attribution {
    font-size: 9px;
    max-width: 78%;
    overflow-wrap: anywhere;
  }

  .radar-cell {
    max-width: 86px;
    max-height: 86px;
  }

  .radar-cell i {
    width: 18px;
    height: 18px;
    font-size: 9px;
  }
}

@media (max-width: 390px) {
  .source-grid,
  .station-metrics,
  .two-column,
  .quick-search {
    grid-template-columns: 1fr;
  }

  #mainTemp {
    font-size: 64px;
  }

  .section-heading {
    align-items: flex-start;
  }

  .hero-mainline {
    grid-template-columns: 1fr;
  }

  .weather-shift {
    justify-self: start;
  }
}

@media (min-width: 860px) {
  .app-shell {
    width: min(100%, 760px);
  }

  .hurricane-maps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .source-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

/* Visual experiment: glossy sky glass shell. Logic and DOM contracts stay unchanged. */
:root {
  --bg-a: #0f63a8;
  --bg-b: #8bb9f5;
  --bg-c: #f0d8ff;
  --glass: rgba(181, 216, 255, 0.2);
  --glass-strong: rgba(231, 244, 255, 0.36);
  --glass-soft: rgba(255, 255, 255, 0.18);
  --ink: #07162f;
  --muted: rgba(231, 244, 255, 0.74);
  --line: rgba(255, 255, 255, 0.66);
  --line-dark: rgba(255, 255, 255, 0.22);
  --teal: #55d7ff;
  --blue: #0e74dd;
  --rose: #d98bff;
  --amber: #ffe17a;
  --shadow: 0 28px 74px rgba(4, 32, 78, 0.34);
  --inner:
    inset 0 2px 2px rgba(255, 255, 255, 0.72),
    inset 0 -2px 6px rgba(255, 255, 255, 0.18),
    inset 0 -22px 48px rgba(22, 93, 174, 0.16);
}

html {
  background: #0d4f94;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 88% 2%, rgba(255, 255, 255, 0.9) 0 46px, rgba(255, 255, 255, 0.22) 47px 72px, transparent 74px),
    radial-gradient(circle at 92% 35%, rgba(255, 245, 213, 0.92) 0 32px, rgba(255, 214, 141, 0.52) 34px 80px, transparent 120px),
    radial-gradient(circle at 78% 18%, rgba(255, 218, 250, 0.88), transparent 32%),
    radial-gradient(circle at 12% 20%, rgba(57, 161, 255, 0.86), transparent 34%),
    linear-gradient(132deg, #1269ad 0%, #5f9ee2 42%, #d9c2ff 100%);
  color: #f7fbff;
}

body::before {
  z-index: -2;
  background:
    radial-gradient(ellipse at 23% 58%, rgba(255, 255, 255, 0.24), transparent 28%),
    radial-gradient(ellipse at 42% 65%, rgba(255, 255, 255, 0.18), transparent 24%),
    radial-gradient(ellipse at 68% 56%, rgba(255, 255, 255, 0.2), transparent 26%),
    linear-gradient(180deg, rgba(6, 49, 102, 0.02), rgba(7, 22, 47, 0.26));
  filter: saturate(1.1);
}

body::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 58%, rgba(255, 255, 255, 0.22) 59%, transparent 72%),
    radial-gradient(circle at 78% 58%, rgba(255, 255, 255, 0.38) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 47%, rgba(255, 255, 255, 0.46) 0 3px, transparent 4px),
    radial-gradient(circle at 86% 66%, rgba(255, 255, 255, 0.32) 0 4px, transparent 5px);
  opacity: 0.86;
}

.app-shell {
  width: min(100%, 690px);
  padding: max(18px, env(safe-area-inset-top)) 18px max(30px, env(safe-area-inset-bottom));
}

.topbar {
  align-items: flex-start;
  padding: 0 2px 20px;
}

.topbar > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.eyebrow {
  margin-bottom: 4px;
  color: rgba(88, 207, 255, 0.92);
  font-size: 18px;
  font-weight: 950;
  text-shadow: 0 2px 16px rgba(2, 48, 92, 0.28);
}

h1 {
  color: #fff;
  max-width: 100%;
  font-size: clamp(38px, 7vw, 64px);
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow:
    0 2px 2px rgba(255, 255, 255, 0.28),
    0 16px 38px rgba(6, 39, 91, 0.34);
}

.topbar-actions {
  padding-top: 8px;
}

.icon-button {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.9), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(176, 214, 255, 0.14));
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 18px 42px rgba(12, 56, 116, 0.28),
    var(--inner);
}

.tabs {
  gap: 8px;
  min-height: 78px;
  margin-bottom: 22px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 36px;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.24), rgba(222, 205, 255, 0.22)),
    rgba(97, 159, 229, 0.22);
  box-shadow:
    0 20px 58px rgba(5, 44, 103, 0.26),
    var(--inner);
}

@media (max-width: 620px) {
  .tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-radius: 32px;
  }
}

.tab {
  min-height: 56px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(14px, 3.6vw, 24px);
  font-weight: 820;
  text-shadow: 0 2px 10px rgba(5, 42, 96, 0.26);
}

.tab.active {
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.42) 48%, rgba(179, 219, 255, 0.58));
  color: #153e68;
  box-shadow:
    0 16px 36px rgba(13, 79, 148, 0.26),
    inset 0 2px 2px rgba(255, 255, 255, 0.96),
    inset 0 -18px 28px rgba(27, 109, 206, 0.12);
  text-shadow: none;
}

.icon-button,
.tabs,
.quick-search,
.hero-forecast,
.analysis-box,
.station-card,
.chart-card,
.source-card,
.around-card,
.hour-card,
.metric,
.sources-drawer,
.mini-chart-card,
.hurricane-item {
  border-color: rgba(255, 255, 255, 0.62);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(210, 230, 255, 0.14)),
    rgba(150, 199, 255, 0.18);
  box-shadow:
    0 26px 72px rgba(4, 39, 93, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    var(--inner);
  backdrop-filter: blur(30px) saturate(1.55);
  -webkit-backdrop-filter: blur(30px) saturate(1.55);
}

.quick-search {
  grid-template-columns: minmax(0, 1fr) minmax(160px, auto);
  gap: 14px;
  margin-bottom: 16px;
  padding: 16px 18px;
  border-radius: 28px;
}

label {
  color: rgba(255, 255, 255, 0.86);
  font-size: 17px;
  font-weight: 760;
}

input {
  min-height: 54px;
  margin-top: 9px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background:
    radial-gradient(circle at 26% 20%, rgba(255, 255, 255, 0.78), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(178, 209, 249, 0.3));
  color: #07162f;
  font-size: 21px;
  font-weight: 900;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.9),
    inset 0 -18px 36px rgba(26, 91, 171, 0.08),
    0 12px 34px rgba(10, 58, 123, 0.18);
}

.primary-button,
.secondary-button {
  min-height: 54px;
  border: 1px solid rgba(188, 226, 255, 0.9);
  border-radius: 999px;
  font-size: 18px;
  font-weight: 950;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.74),
    inset 0 -16px 26px rgba(0, 48, 135, 0.24),
    0 14px 34px rgba(3, 65, 149, 0.38);
}

.primary-button {
  background:
    radial-gradient(circle at 35% 18%, rgba(126, 220, 255, 0.95), transparent 30%),
    linear-gradient(180deg, #1496ff, #0957d5);
  color: #fff;
}

.secondary-button {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.hero-forecast {
  position: relative;
  gap: 22px;
  min-height: 390px;
  padding: 28px 30px 26px;
  overflow: hidden;
  border-radius: 42px;
  background:
    linear-gradient(180deg, rgba(13, 112, 199, 0.1), rgba(3, 51, 108, 0.18)),
    radial-gradient(circle at 78% 66%, rgba(255, 245, 212, 0.9) 0 28px, rgba(255, 216, 145, 0.46) 30px 82px, transparent 130px),
    radial-gradient(ellipse at 30% 72%, rgba(255, 255, 255, 0.34), transparent 30%),
    radial-gradient(ellipse at 20% 80%, rgba(186, 222, 255, 0.34), transparent 28%),
    linear-gradient(145deg, rgba(27, 138, 221, 0.72), rgba(185, 206, 255, 0.46));
}

.hero-forecast::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse at 22% 82%, rgba(255, 255, 255, 0.34), transparent 26%),
    radial-gradient(ellipse at 38% 74%, rgba(255, 255, 255, 0.26), transparent 22%),
    radial-gradient(circle at 92% 36%, rgba(255, 255, 255, 0.62) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 48%, rgba(255, 255, 255, 0.48) 0 4px, transparent 5px);
  opacity: 0.92;
}

.hero-forecast > * {
  position: relative;
}

.hero-mainline {
  grid-template-columns: minmax(0, 0.88fr) minmax(220px, 1fr);
  align-items: center;
}

.label {
  max-width: 210px;
  color: #fff;
  font-size: 20px;
  font-weight: 920;
  line-height: 1.28;
  text-shadow: 0 3px 14px rgba(3, 33, 84, 0.28);
}

#mainTemp {
  margin-top: 16px;
  color: #fff;
  font-size: clamp(82px, 16vw, 118px);
  font-weight: 950;
  line-height: 0.82;
  text-shadow: 0 18px 36px rgba(3, 39, 89, 0.26);
}

.weather-shift {
  justify-self: stretch;
  min-height: 132px;
  gap: 12px;
  padding: 16px;
  border-color: rgba(255, 255, 255, 0.64);
  border-radius: 36px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(192, 220, 255, 0.16)),
    rgba(76, 150, 226, 0.18);
}

.weather-badge span,
.weather-icon {
  width: 70px;
  height: 70px;
  font-size: 34px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 16px 38px rgba(11, 60, 126, 0.28),
    inset 0 2px 2px rgba(255, 255, 255, 0.92),
    inset 0 -18px 28px rgba(34, 105, 194, 0.12);
}

.weather-badge small,
.weather-arrow small {
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  text-shadow: 0 3px 12px rgba(2, 32, 83, 0.36);
}

.weather-badge em {
  max-width: 116px;
  color: #fff;
  font-size: 12px;
  text-shadow: 0 3px 12px rgba(2, 32, 83, 0.34);
}

.weather-arrow b {
  font-size: 52px;
  text-shadow: 0 4px 18px rgba(2, 40, 97, 0.24);
}

#mainSummary {
  max-width: 560px;
  color: #fff;
  font-size: clamp(18px, 3.6vw, 24px);
  font-weight: 680;
  line-height: 1.52;
  text-shadow: 0 3px 14px rgba(2, 35, 83, 0.34);
}

.weather-evidence {
  max-width: 560px;
  min-height: 48px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.current-condition {
  min-height: 50px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.confidence {
  grid-template-columns: 128px 1fr 66px;
  gap: 16px;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

meter {
  height: 18px;
}

meter::-webkit-meter-bar {
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 4px rgba(6, 42, 92, 0.26);
}

meter::-webkit-meter-optimum-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #31b671, #b4ffda);
  box-shadow: 0 0 18px rgba(126, 255, 185, 0.58);
}

.confidence b,
.section-heading span,
.sources-drawer summary b,
.station-ai-probability {
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.radar-pair {
  gap: 22px;
}

.analysis-box,
.station-card,
.chart-card,
.sources-drawer {
  border-radius: 34px;
}

.chart-card,
.analysis-box,
.station-card {
  margin-top: 16px;
  padding: 18px;
}

.section-heading h2 {
  color: #fff;
  font-size: clamp(20px, 3.7vw, 28px);
  line-height: 1.12;
  text-shadow: 0 3px 12px rgba(3, 37, 85, 0.28);
}

.section-heading span {
  padding: 8px 12px;
  font-size: 14px;
}

.analysis-box p,
.source-card p,
.around-card p,
.station-note,
.metric span,
.ai-heading small,
.hurricane-item p {
  color: rgba(255, 255, 255, 0.78);
}

.ai-mark {
  width: 48px;
  height: 48px;
  font-size: 17px;
  box-shadow:
    0 0 28px rgba(103, 218, 255, 0.5),
    0 0 36px rgba(217, 139, 255, 0.32),
    inset 0 2px 2px rgba(255, 255, 255, 0.8);
}

.station-ai-forecast {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 18px;
}

.station-ai-outlook,
.station-ai-details,
.station-ai-cloud {
  color: rgba(255, 255, 255, 0.8);
}

.geo-map {
  border-color: rgba(255, 255, 255, 0.64);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(112, 169, 217, 0.36), rgba(255, 255, 255, 0.16));
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.62),
    0 18px 44px rgba(3, 38, 88, 0.26);
}

.map-vignette {
  box-shadow:
    inset 0 0 46px rgba(255, 255, 255, 0.62),
    inset 0 -36px 54px rgba(10, 69, 135, 0.18);
}

.map-attribution {
  left: 12px;
  right: auto;
  bottom: 10px;
  max-width: min(70%, 220px);
  border-radius: 14px;
  background: rgba(24, 83, 127, 0.3);
  color: #fff;
  font-size: 10px;
  line-height: 1.15;
  text-align: left;
}

.map-controls {
  right: 12px;
  top: 12px;
}

.map-controls button {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 27px;
}

.hazard-card {
  background:
    radial-gradient(circle at 72% 60%, rgba(166, 94, 255, 0.4), transparent 34%),
    radial-gradient(circle at 88% 80%, rgba(255, 255, 255, 0.16), transparent 24%),
    linear-gradient(135deg, rgba(60, 113, 198, 0.28), rgba(131, 83, 199, 0.2));
}

.hazard-item,
.source-card,
.around-card,
.metric,
.mini-chart-card,
.hurricane-item {
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(255, 255, 255, 0.16);
}

.hazard-item strong,
.hazard-item small,
.source-card small,
.source-card strong,
.around-card strong,
.metric strong,
.hurricane-item strong {
  color: #fff;
}

.settings-message,
.station-note,
.sources-drawer summary {
  color: #fff;
}

canvas,
.wu-chart,
.hurricane-map-card img {
  background: rgba(255, 255, 255, 0.2);
}

.radar-ai-card {
  min-width: 0;
}

.radar-ai-card .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.radar-ai-card .ai-heading {
  min-width: 0;
}

.radar-ai-card h2 {
  font-size: clamp(21px, 3.2vw, 27px);
  line-height: 1.05;
}

.radar-ai-card .ai-heading small {
  font-size: 11px;
  line-height: 1.15;
}

.radar-ai-card .section-heading span {
  max-width: 118px;
  font-size: 12px;
  white-space: normal;
  text-align: center;
}

#radarAiText {
  display: grid;
  gap: 10px;
  overflow-wrap: anywhere;
}

#radarAiText b {
  display: block;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(11, 65, 135, 0.22);
  color: #061a39;
  font-size: 14px;
  line-height: 1.25;
  text-shadow: none;
}

#radarAiText span {
  display: block;
  font-size: 13px;
  line-height: 1.35;
}

.source-card-muted strong {
  font-size: 20px;
  line-height: 1.15;
}

.source-state {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 5px rgba(6, 26, 57, 0.3);
  vertical-align: middle;
}

.source-state.cache {
  background: rgba(40, 114, 195, 0.34);
}

.source-state.fresh {
  background: rgba(42, 190, 148, 0.42);
}

.source-state.error {
  background: rgba(213, 70, 110, 0.42);
}

.source-card-read {
  background: linear-gradient(145deg, rgba(67, 204, 173, 0.5), rgba(77, 153, 232, 0.32));
}

.source-card-blocked {
  background: rgba(44, 90, 150, 0.22);
}

.source-card-loading strong,
.source-card-waiting strong {
  color: #113f78;
}

.source-card a {
  color: #fff;
  font-weight: 900;
  margin-right: 10px;
}

@media (max-width: 760px) {
  .app-shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  .quick-search {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .hero-mainline {
    grid-template-columns: 1fr;
  }

  .weather-shift {
    justify-self: stretch;
  }

  .hero-forecast {
    min-height: 400px;
    padding: 24px 22px;
  }
}

@media (max-width: 390px) {
  h1 {
    font-size: 38px;
  }

  .tabs {
    min-height: 66px;
  }

  .tab {
    min-height: 46px;
    font-size: 13px;
  }

  .hero-forecast {
    border-radius: 34px;
  }

  .weather-badge span,
  .weather-icon {
    width: 58px;
    height: 58px;
    font-size: 29px;
  }

  .weather-arrow b {
    font-size: 38px;
  }

  .confidence {
    grid-template-columns: 1fr;
  }
}

body[data-weather-scene="cloudy"] {
  background:
    radial-gradient(ellipse at 28% 22%, rgba(255, 255, 255, 0.62), transparent 26%),
    radial-gradient(ellipse at 72% 28%, rgba(255, 255, 255, 0.48), transparent 30%),
    radial-gradient(circle at 90% 8%, rgba(235, 228, 255, 0.8) 0 52px, rgba(255, 255, 255, 0.2) 54px 86px, transparent 88px),
    linear-gradient(132deg, #2e7fbe 0%, #7baee7 46%, #d9d1ff 100%);
}

body[data-weather-scene="partly"] {
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 248, 213, 0.88) 0 50px, rgba(255, 225, 150, 0.28) 52px 98px, transparent 106px),
    radial-gradient(ellipse at 64% 26%, rgba(255, 255, 255, 0.48), transparent 28%),
    radial-gradient(ellipse at 24% 28%, rgba(255, 255, 255, 0.26), transparent 24%),
    linear-gradient(132deg, #1777bd 0%, #77b4ed 48%, #d9d1ff 100%);
}

body[data-weather-scene="clear-night"],
body[data-weather-scene="partly-night"],
body[data-weather-scene="cloudy-night"],
body[data-weather-scene="rain-night"] {
  background:
    radial-gradient(circle at 86% 10%, rgba(238, 239, 255, 0.92) 0 44px, rgba(180, 198, 255, 0.22) 46px 88px, transparent 92px),
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.86) 0 1px, transparent 2px),
    radial-gradient(circle at 31% 10%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 22%, rgba(255, 255, 255, 0.72) 0 1px, transparent 2px),
    linear-gradient(132deg, #10224f 0%, #214b8a 50%, #796fae 100%);
}

body[data-weather-scene="partly-night"] {
  background:
    radial-gradient(ellipse at 70% 22%, rgba(255, 255, 255, 0.28), transparent 24%),
    radial-gradient(circle at 86% 10%, rgba(238, 239, 255, 0.92) 0 44px, rgba(180, 198, 255, 0.22) 46px 88px, transparent 92px),
    radial-gradient(circle at 20% 14%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2px),
    linear-gradient(132deg, #122a5c 0%, #285b9a 50%, #8c78bb 100%);
}

body[data-weather-scene="cloudy-night"] {
  background:
    radial-gradient(ellipse at 72% 18%, rgba(230, 238, 255, 0.46), transparent 30%),
    radial-gradient(ellipse at 36% 24%, rgba(255, 255, 255, 0.22), transparent 26%),
    radial-gradient(circle at 86% 10%, rgba(238, 239, 255, 0.72) 0 42px, rgba(180, 198, 255, 0.16) 44px 84px, transparent 90px),
    linear-gradient(132deg, #162954 0%, #395b8f 52%, #8277ad 100%);
}

body[data-weather-scene="drizzle"],
body[data-weather-scene="rain"] {
  background:
    repeating-linear-gradient(108deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 18px),
    radial-gradient(ellipse at 22% 18%, rgba(192, 227, 255, 0.42), transparent 28%),
    radial-gradient(ellipse at 76% 20%, rgba(213, 202, 255, 0.42), transparent 34%),
    linear-gradient(138deg, #15548f 0%, #4e86c7 48%, #8d8ccf 100%);
}

body[data-weather-scene="rain"]::after,
body[data-weather-scene="drizzle"]::after {
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px 17px),
    radial-gradient(circle at 82% 58%, rgba(255, 255, 255, 0.38) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 70%, rgba(255, 255, 255, 0.32) 0 4px, transparent 5px);
  opacity: 0.78;
}

body[data-weather-scene="wind"] {
  background:
    linear-gradient(118deg, transparent 0 24%, rgba(255, 255, 255, 0.24) 25%, transparent 44%),
    linear-gradient(128deg, transparent 0 46%, rgba(255, 255, 255, 0.18) 47%, transparent 72%),
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.72) 0 48px, rgba(255, 255, 255, 0.2) 50px 82px, transparent 84px),
    linear-gradient(132deg, #0f6fae 0%, #6db6df 48%, #c4dcff 100%);
}

body[data-weather-scene="cold"] {
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.78), transparent 22%),
    radial-gradient(circle at 84% 12%, rgba(228, 248, 255, 0.74) 0 56px, rgba(255, 255, 255, 0.18) 58px 88px, transparent 90px),
    linear-gradient(132deg, #407fbc 0%, #94cdef 52%, #edf8ff 100%);
}

body[data-weather-scene="hot"] {
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 245, 188, 0.95) 0 54px, rgba(255, 180, 105, 0.42) 56px 110px, transparent 116px),
    radial-gradient(circle at 80% 42%, rgba(255, 211, 127, 0.52), transparent 30%),
    linear-gradient(132deg, #1979bd 0%, #8abef2 42%, #ffd1bb 100%);
}

body[data-weather-scene="loading"] {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.7) 0 48px, rgba(255, 255, 255, 0.18) 50px 82px, transparent 84px),
    linear-gradient(132deg, #1269ad 0%, #5f9ee2 42%, #d9c2ff 100%);
}

body[data-weather-scene="cloudy"] .hero-forecast {
  background:
    radial-gradient(ellipse at 42% 76%, rgba(255, 255, 255, 0.42), transparent 34%),
    radial-gradient(ellipse at 72% 36%, rgba(238, 242, 255, 0.42), transparent 34%),
    linear-gradient(145deg, rgba(63, 144, 211, 0.74), rgba(178, 202, 247, 0.54));
}

body[data-weather-scene="rain"] .hero-forecast,
body[data-weather-scene="drizzle"] .hero-forecast {
  background:
    repeating-linear-gradient(110deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 18px),
    radial-gradient(ellipse at 30% 72%, rgba(205, 232, 255, 0.34), transparent 34%),
    linear-gradient(145deg, rgba(20, 88, 154, 0.78), rgba(114, 126, 199, 0.58));
}

body[data-weather-scene="wind"] .hero-forecast {
  background:
    linear-gradient(120deg, transparent 0 42%, rgba(255, 255, 255, 0.2) 43%, transparent 66%),
    radial-gradient(ellipse at 26% 72%, rgba(255, 255, 255, 0.3), transparent 32%),
    linear-gradient(145deg, rgba(28, 134, 204, 0.72), rgba(166, 222, 238, 0.5));
}

body[data-weather-scene="cold"] .hero-forecast {
  background:
    radial-gradient(circle at 78% 32%, rgba(255, 255, 255, 0.48), transparent 24%),
    radial-gradient(ellipse at 30% 72%, rgba(242, 251, 255, 0.44), transparent 34%),
    linear-gradient(145deg, rgba(75, 142, 203, 0.72), rgba(211, 239, 255, 0.54));
}

body[data-weather-scene="hot"] .hero-forecast {
  background:
    radial-gradient(circle at 80% 58%, rgba(255, 239, 166, 0.95) 0 32px, rgba(255, 190, 112, 0.42) 34px 98px, transparent 128px),
    radial-gradient(ellipse at 30% 78%, rgba(255, 255, 255, 0.28), transparent 30%),
    linear-gradient(145deg, rgba(38, 145, 220, 0.7), rgba(255, 199, 151, 0.48));
}

body[data-weather-scene="partly"] .hero-forecast {
  background:
    radial-gradient(circle at 78% 56%, rgba(255, 244, 187, 0.8) 0 28px, rgba(255, 208, 120, 0.34) 30px 94px, transparent 122px),
    radial-gradient(ellipse at 42% 74%, rgba(255, 255, 255, 0.34), transparent 30%),
    linear-gradient(145deg, rgba(35, 141, 218, 0.72), rgba(190, 215, 255, 0.5));
}

body[data-weather-scene="clear-night"] .hero-forecast,
body[data-weather-scene="partly-night"] .hero-forecast,
body[data-weather-scene="cloudy-night"] .hero-forecast {
  background:
    radial-gradient(circle at 78% 34%, rgba(237, 238, 255, 0.86) 0 30px, rgba(174, 194, 255, 0.24) 32px 84px, transparent 90px),
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.52) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 36%, rgba(255, 255, 255, 0.46) 0 1px, transparent 2px),
    radial-gradient(ellipse at 28% 78%, rgba(169, 205, 255, 0.24), transparent 34%),
    linear-gradient(145deg, rgba(29, 65, 130, 0.76), rgba(112, 103, 178, 0.54));
}

.quick-search,
.source-card,
.around-card,
.metric,
.mini-chart-card,
.hurricane-item,
.station-note,
.settings-message,
.sources-drawer {
  background:
    linear-gradient(135deg, rgba(42, 119, 189, 0.34), rgba(220, 236, 255, 0.16)),
    rgba(8, 55, 118, 0.18);
}

.analysis-box p,
.source-card p,
.around-card p,
.station-note,
.metric span,
.ai-heading small,
.hurricane-item p,
.settings-message,
.sources-drawer summary {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 10px rgba(0, 29, 73, 0.34);
}

.source-card small,
.around-card small,
.mini-chart-title span,
.hurricane-item small {
  color: rgba(225, 244, 255, 0.78);
  text-shadow: 0 2px 10px rgba(0, 29, 73, 0.32);
}

.source-card strong,
.around-card strong,
.metric strong,
.mini-chart-title strong,
.station-ai-forecast,
.station-ai-outlook,
.station-ai-details,
.station-ai-cloud {
  text-shadow: 0 3px 14px rgba(0, 29, 73, 0.42);
}

.section-heading span,
.confidence b,
.station-ai-probability,
.around-values span {
  background: rgba(21, 78, 145, 0.28);
  color: #fff;
  text-shadow: 0 2px 9px rgba(0, 25, 68, 0.3);
}

/* MeteoAI app shell v41: compact Apple Weather-inspired hierarchy. */
:root {
  --app-blue: #0a84ff;
  --app-indigo: #6d64d8;
  --app-surface: rgba(102, 165, 226, 0.22);
  --app-surface-strong: rgba(229, 243, 255, 0.34);
  --app-border: rgba(255, 255, 255, 0.58);
  --app-text: #f8fbff;
  --app-text-muted: rgba(238, 247, 255, 0.76);
}

.city-search-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin-top: 9px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: rgba(23, 91, 162, 0.24);
  color: var(--app-text);
  font-size: 12px;
  font-weight: 850;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.city-search-toggle span {
  font-size: 15px;
}

.tab-icon {
  display: none;
  font-size: 20px;
  line-height: 1;
}

.home-hourly-card {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--app-border);
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(188, 219, 255, 0.1)),
    var(--app-surface);
  box-shadow:
    0 22px 58px rgba(4, 39, 93, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
}

.home-hourly-strip {
  display: grid;
  grid-auto-columns: minmax(72px, 0.72fr);
  grid-auto-flow: column;
  gap: 10px;
  margin-top: 14px;
  padding: 2px 1px 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
}

.home-hourly-strip::-webkit-scrollbar {
  display: none;
}

.home-hour {
  display: grid;
  min-height: 132px;
  place-items: center;
  gap: 7px;
  padding: 12px 8px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 25px;
  background: rgba(15, 83, 157, 0.2);
  color: var(--app-text);
  scroll-snap-align: start;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.home-hour.current {
  background: rgba(236, 247, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.68);
}

.home-hour small,
.home-hour span {
  color: var(--app-text-muted);
  font-size: 12px;
  font-weight: 800;
}

.home-hour b {
  font-size: 27px;
  line-height: 1;
}

.home-hour strong {
  font-size: 22px;
}

.home-hourly-empty {
  color: var(--app-text-muted);
}

.settings-api-status {
  margin: 0 0 16px;
  border-radius: 26px;
  background: rgba(15, 83, 157, 0.2);
  color: var(--app-text-muted);
}

.settings-api-status .api-update-time,
.settings-api-status b {
  color: var(--app-text);
}

.source-card,
.around-card,
.metric,
.mini-chart-card,
.future-day,
.future-hour,
.hurricane-item,
.hazard-item {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.radar-pair,
.hazard-card,
.sources-drawer,
.forecast-chart-card,
.station-charts,
.hurricane-report-stream {
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(255, 240, 165, 0.96);
  outline-offset: 3px;
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .icon-button,
  .tabs,
  .quick-search,
  .hero-forecast,
  .analysis-box,
  .station-card,
  .chart-card,
  .home-hourly-card,
  .sources-drawer {
    background-color: rgba(38, 102, 172, 0.9);
  }
}

@media (max-width: 620px) {
  html,
  body {
    max-width: 100%;
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
    overflow-x: hidden;
  }

  .app-shell {
    width: 100%;
    max-width: 100vw;
    padding-right: 14px;
    padding-left: 14px;
    overflow-x: clip;
  }

  .topbar {
    position: relative;
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    padding-right: 108px;
    padding-bottom: 14px;
  }

  .topbar-actions {
    position: absolute;
    right: 0;
    top: 0;
    min-width: 102px;
    gap: 6px;
    padding-top: 5px;
  }

  .icon-button {
    width: 48px;
    height: 48px;
  }

  .city-search-toggle {
    display: inline-flex;
  }

  .tabs {
    position: fixed;
    left: 12px !important;
    right: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom));
    top: auto;
    z-index: 30;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-height: 68px;
    margin: 0 auto;
    padding: 7px;
    border-radius: 27px;
    background:
      linear-gradient(135deg, rgba(222, 240, 255, 0.38), rgba(109, 100, 216, 0.2)),
      rgba(9, 58, 121, 0.76);
    box-shadow:
      0 18px 50px rgba(2, 24, 65, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
  }

  .tab {
    display: flex;
    min-height: 54px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 2px;
    overflow: hidden;
    font-size: clamp(8px, 2.35vw, 11px);
    line-height: 1;
  }

  .tab-icon {
    display: block;
  }

  .tab.active {
    border-radius: 20px;
  }

  .quick-search:not(.is-open) {
    display: none;
  }

  .quick-search.is-open {
    grid-template-columns: 1fr;
    margin-bottom: 14px;
    animation: searchReveal 180ms ease-out;
  }

  .hero-forecast {
    min-height: 0;
    gap: 14px;
    padding: 20px 18px;
    border-radius: 34px;
  }

  .hero-mainline {
    gap: 12px;
  }

  #mainTemp {
    margin-top: 8px;
    font-size: clamp(72px, 22vw, 94px);
  }

  .weather-shift {
    min-height: 108px;
    padding: 11px;
  }

  .weather-badge span,
  .weather-icon {
    width: 52px;
    height: 52px;
    font-size: 28px;
  }

  #mainSummary {
    display: -webkit-box;
    margin-bottom: 0;
    overflow: hidden;
    font-size: 17px;
    line-height: 1.38;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .weather-evidence,
  .current-condition {
    display: none;
  }

  .confidence {
    grid-template-columns: 105px 1fr 54px;
    gap: 10px;
    font-size: 13px;
  }

  .home-hourly-card {
    padding: 16px;
    border-radius: 30px;
  }

  .settings-api-status {
    grid-template-columns: 1fr;
  }
}

@keyframes searchReveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* MeteoAI v42: wider Apple Weather workspace and clearer desktop hierarchy. */
body[data-weather-scene] {
  --scene-deep: #062d59;
  --scene-mid: #176fb3;
  --scene-light: #79b8ee;
  --scene-accent: rgba(157, 123, 255, 0.46);
  background:
    radial-gradient(circle at 78% 8%, rgba(255, 244, 190, 0.88) 0 38px, rgba(255, 215, 135, 0.2) 40px 110px, transparent 170px),
    radial-gradient(ellipse at 74% 35%, var(--scene-accent), transparent 38%),
    radial-gradient(ellipse at 12% 22%, rgba(53, 185, 255, 0.5), transparent 35%),
    linear-gradient(145deg, var(--scene-deep) 0%, var(--scene-mid) 46%, var(--scene-light) 100%);
  background-attachment: fixed;
}

body[data-weather-scene="clear-night"],
body[data-weather-scene="partly-night"],
body[data-weather-scene="cloudy-night"],
body[data-weather-scene="rain-night"] {
  --scene-deep: #050b22;
  --scene-mid: #172d66;
  --scene-light: #4f5796;
  --scene-accent: rgba(98, 91, 214, 0.42);
}

body[data-weather-scene="rain"],
body[data-weather-scene="drizzle"] {
  --scene-deep: #092943;
  --scene-mid: #315f83;
  --scene-light: #7891ac;
  --scene-accent: rgba(102, 135, 190, 0.42);
}

body[data-weather-scene="cloudy"] {
  --scene-deep: #173852;
  --scene-mid: #547997;
  --scene-light: #a6bbca;
  --scene-accent: rgba(184, 202, 220, 0.4);
}

body[data-weather-scene="hot"] {
  --scene-deep: #0a5591;
  --scene-mid: #dc7e68;
  --scene-light: #ffc493;
  --scene-accent: rgba(255, 154, 105, 0.48);
}

body[data-weather-scene]::before {
  background:
    radial-gradient(ellipse at 15% 75%, rgba(255, 255, 255, 0.12), transparent 27%),
    radial-gradient(ellipse at 78% 68%, rgba(255, 255, 255, 0.1), transparent 25%),
    linear-gradient(180deg, rgba(3, 16, 38, 0.02), rgba(3, 18, 45, 0.34));
}

body[data-weather-scene]::after {
  background:
    linear-gradient(112deg, transparent 0 48%, rgba(255, 255, 255, 0.08) 49%, transparent 68%),
    radial-gradient(circle at 88% 62%, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px);
  opacity: 0.72;
}

.forecast-overview-grid {
  display: grid;
  gap: 18px;
}

@media (min-width: 900px) {
  .app-shell {
    width: min(100%, 1180px);
    padding: 34px 34px 70px;
  }

  .topbar {
    align-items: flex-end;
    padding: 0 4px 22px;
  }

  .topbar > div:first-child {
    display: grid;
    grid-template-columns: auto auto;
    align-items: end;
    column-gap: 18px;
  }

  .eyebrow {
    grid-column: 1 / -1;
    margin-bottom: 4px;
    font-size: 15px;
    letter-spacing: 0.12em;
  }

  h1 {
    max-width: 720px;
    font-size: clamp(58px, 6vw, 82px);
    letter-spacing: -0.055em;
  }

  .city-search-toggle {
    display: inline-flex;
    margin: 0 0 7px;
    background: rgba(7, 55, 116, 0.32);
  }

  .topbar-actions {
    padding-bottom: 8px;
  }

  .tabs {
    top: 14px;
    width: min(100%, 820px);
    min-height: 66px;
    margin: 0 0 24px;
    padding: 7px;
    border-radius: 28px;
  }

  .tab {
    min-height: 50px;
    font-size: 16px;
  }

  .quick-search {
    display: none;
    max-width: 760px;
    margin-bottom: 20px;
    animation: searchReveal 180ms ease-out;
  }

  .quick-search.is-open {
    display: grid;
  }

  .forecast-overview-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.85fr);
    align-items: stretch;
    gap: 22px;
  }

  .hero-forecast {
    min-height: 560px;
    padding: 34px 36px 30px;
    border-radius: 42px;
    background:
      radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.24), transparent 29%),
      linear-gradient(145deg, rgba(30, 151, 238, 0.66), rgba(77, 83, 182, 0.42)),
      rgba(8, 55, 119, 0.26);
  }

  .hero-mainline {
    grid-template-columns: minmax(0, 0.72fr) minmax(300px, 1fr);
    align-items: center;
    gap: 28px;
  }

  #mainTemp {
    font-size: clamp(104px, 10vw, 148px);
    letter-spacing: -0.08em;
  }

  .weather-shift {
    min-height: 154px;
    padding: 20px;
    border-radius: 38px;
  }

  #mainSummary {
    max-width: 760px;
    font-size: clamp(22px, 2.05vw, 30px);
    line-height: 1.38;
  }

  .weather-evidence,
  .current-condition {
    max-width: 760px;
    padding: 13px 16px;
  }

  .home-hourly-card {
    display: flex;
    min-height: 560px;
    flex-direction: column;
    margin: 0;
    padding: 24px;
    border-radius: 42px;
    background:
      linear-gradient(155deg, rgba(255, 255, 255, 0.27), rgba(112, 149, 220, 0.12)),
      rgba(8, 51, 112, 0.28);
  }

  .home-hourly-card .section-heading h2 {
    font-size: 25px;
  }

  .home-hourly-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    align-content: stretch;
    flex: 1;
    gap: 12px;
    overflow: hidden;
  }

  .home-hour {
    min-height: 0;
    padding: 10px;
    border-radius: 25px;
  }

  .home-hour:nth-child(n + 7) {
    display: none;
  }

  .home-hour b {
    font-size: 32px;
  }

  .home-hour strong {
    font-size: 26px;
  }

  .radar-pair {
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr);
    margin-top: 22px;
  }

  .radar-map-card,
  .radar-ai-card {
    min-height: 430px;
  }

  .analysis-box,
  .station-card,
  .chart-card,
  .sources-drawer {
    border-radius: 36px;
  }
}