:root {
  --bg: #081015;
  --panel: #141d27;
  --panel-2: #192330;
  --text: #f4f7fb;
  --muted: #a9b7c7;
  --line: rgba(255, 255, 255, 0.1);
  --cyan: #3ed7df;
  --cyan-2: #6ae8f0;
  --accent: #ffca44;
  --weather-bg: #08282f;
  --weather-line: rgba(112, 219, 229, 0.55);
  --air-bg: #1a2431;
  --warning-blue: #162e4c;
  --traffic-bg: #4a311a;
  --quake-bg: #542031;
  --mup-bg: #1d2950;
  --burgundy: #532229;
  --olive: #67541d;
  --navy: #23346b;
  --power: #ff6a57;
  --water: #52b7ff;
  --quake-top: #a8db0a;
  --quake-bottom: #1c2531;
  --shadow: 0 24px 44px rgba(0, 0, 0, 0.35);
  --radius: 24px;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  -webkit-text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

body {
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  background:
    radial-gradient(circle at top, rgba(67, 211, 220, 0.06), transparent 28%),
    linear-gradient(180deg, #0a1016 0%, #081015 45%, #060b10 100%);
}

.app-shell {
  min-height: 100vh;
}

.splash-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #0a1115;
  z-index: 20;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.splash-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-core {
  display: grid;
  justify-items: center;
  gap: 18px;
}

.splash-shield {
  width: 132px;
  height: 132px;
  object-fit: contain;
}

.splash-title {
  font-size: 26px;
  font-weight: 700;
}

.splash-copy {
  color: var(--muted);
  text-align: center;
}

.splash-bar {
  width: min(260px, 72vw);
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.splash-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), #50e3b2);
  transition: width 0.25s ease;
}

.phone-app {
  width: min(100%, 430px);
  margin: 0 auto;
  padding: 18px 16px 28px;
}

.app-header h1 {
  margin: 12px 0 0;
  text-align: center;
  font-size: 34px;
}

.app-header p {
  margin: 8px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.header-mark,
.section-title,
.card-kicker,
.mini-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #86c6ff;
}

.theme-card,
.current-card,
.section-block,
.municipality-card {
  margin-top: 16px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.install-banner {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(108, 221, 223, 0.4);
  background: linear-gradient(180deg, rgba(18, 42, 53, 0.96), rgba(14, 29, 37, 0.96));
  box-shadow: var(--shadow);
}

.install-banner.is-hidden {
  display: none;
}

.install-banner-copy {
  display: grid;
  gap: 6px;
}

.install-banner-copy strong {
  font-size: 16px;
}

.install-banner-copy span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.install-banner-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.install-banner-button {
  flex: 1;
}

.section-block h2,
.section-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
}

.theme-toggle,
.button-row {
  display: flex;
  gap: 10px;
}

.theme-pill,
.outline-action,
.fill-action {
  min-height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(214, 210, 234, 0.5);
  background: #1b2430;
  color: var(--cyan);
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
}

.theme-pill {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
}

.theme-pill.is-active {
  background: rgba(200, 178, 255, 0.28);
}

.theme-icon {
  font-size: 18px;
}

.theme-sun {
  color: #fff4c2;
}

.theme-moon {
  color: #ffd34d;
}

.weather-card {
  background: var(--weather-bg);
  border-color: var(--weather-line);
}

.air-card {
  background: var(--air-bg);
  border-color: rgba(164, 216, 255, 0.35);
}

.notification-card {
  background: linear-gradient(180deg, rgba(15, 42, 54, 0.98), rgba(12, 28, 38, 0.98));
  border-color: rgba(110, 223, 230, 0.4);
  transition: background 180ms ease, border-color 180ms ease, padding 180ms ease, box-shadow 180ms ease;
}

.notification-card .button-row {
  margin-top: 12px;
}

.notification-card.is-pending {
  border-color: rgba(110, 223, 230, 0.55);
  box-shadow: 0 16px 36px rgba(3, 16, 23, 0.34);
}

.notification-card.is-compact {
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(16, 35, 43, 0.92), rgba(12, 24, 31, 0.92));
  border-color: rgba(92, 171, 175, 0.32);
}

.notification-card.is-compact .headline-copy {
  margin-top: 6px;
  font-size: 16px;
}

.notification-card.is-compact .body-copy,
.notification-card.is-compact .source-copy,
.notification-card.is-compact .load-state {
  margin-top: 6px;
  font-size: 12px;
}

.notification-card.is-compact .button-row {
  margin-top: 8px;
}

.current-grid {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.weather-copy {
  flex: 1;
}

.date-copy {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.summary-copy {
  margin-top: 8px;
  font-size: 18px;
}

.time-copy {
  font-size: 34px;
  font-weight: 700;
  align-self: center;
}

.headline-copy {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 700;
}

.meta-copy,
.body-copy,
.source-copy,
.section-note {
  margin-top: 10px;
  color: var(--text);
  font-size: 14px;
}

.source-copy {
  color: #d8dde6;
  font-size: 13px;
}

#rhmzSummary,
#trafficSummary {
  white-space: pre-line;
}

.load-state {
  margin-top: 10px;
  color: var(--cyan-2);
  font-size: 13px;
  min-height: 18px;
}

.stack-grid {
  display: grid;
  gap: 14px;
}

.address-stack {
  margin-top: 16px;
  gap: 18px;
}

.warning-stack {
  gap: 18px;
}

.alert-card,
.address-card,
.address-warning {
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.address-card,
.address-warning {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.weather-alert {
  background: var(--warning-blue);
}

.traffic-alert {
  background: var(--traffic-bg);
}

.quake-alert {
  background: var(--quake-bg);
}

.mup-alert {
  background: var(--mup-bg);
}

.alert-card h3,
.address-card h3,
.address-warning h3 {
  margin: 10px 0 8px;
  font-size: 24px;
}

.status-line {
  color: #88c9ff;
  font-size: 14px;
  font-weight: 700;
}

.button-row {
  margin-top: 12px;
}

.button-row.two > *,
.button-row.three > * {
  flex: 1;
}

.outline-action,
.fill-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
}

.outline-action.full {
  width: 100%;
  margin-top: 12px;
}

.fill-action {
  border: 0;
  color: #061118;
  font-weight: 700;
}

.fill-action.muted {
  background: #275950;
  color: #eef7f7;
}

.fill-action.primary {
  background: linear-gradient(135deg, #55d9dc, #42c7c9);
}

.fill-action.warning {
  background: #ffc645;
}

.quake-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.quake-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  align-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.quake-tile .mag,
.quake-tile .place {
  background: var(--quake-accent, var(--quake-top));
  color: #ffffff;
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-weight: 700;
}

.quake-tile .mag {
  font-size: 24px;
  justify-content: center;
}

.quake-tile .place {
  font-size: 16px;
  justify-content: flex-start;
  text-transform: uppercase;
  min-width: 0;
  line-height: 1.1;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.quake-tile .when,
.quake-tile .dist {
  background: var(--quake-bottom);
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 13px;
}

.quake-tile:hover,
.quake-tile:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
  outline: 0;
}

.quake-tile.is-empty {
  grid-template-columns: 1fr;
  background: rgba(28, 37, 49, 0.72);
  min-height: 112px;
  padding: 14px;
  border-style: dashed;
}

.quake-tile.is-empty .place {
  background: transparent;
  min-height: auto;
  padding: 0;
  text-transform: none;
  font-size: 14px;
  color: #e7edf6;
}

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

  .quake-tile .place {
    font-size: 14px;
  }
}

.quake-state {
  margin-top: 10px;
  color: #d7e6f6;
}

.quake-modal[hidden] {
  display: none;
}

.quake-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
}

.quake-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 13, 0.72);
  backdrop-filter: blur(4px);
}

.quake-modal-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 420px);
  max-height: 86vh;
  overflow: auto;
  border-radius: 24px;
  background: #13202d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.42);
}

.quake-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(7, 13, 18, 0.4);
  color: #ffffff;
  font-size: 15px;
  cursor: pointer;
}

.quake-modal-header {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 20px 20px 16px;
  background: var(--quake-accent, var(--quake-top));
  color: #ffffff;
}

.quake-modal-mag {
  min-width: 78px;
  min-height: 78px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  font-size: 30px;
  font-weight: 800;
}

.quake-modal-title-wrap {
  display: grid;
  gap: 4px;
}

.quake-modal-title-wrap strong {
  font-size: 19px;
}

.quake-modal-title-wrap span {
  font-size: 13px;
  opacity: 0.92;
}

.quake-modal-body {
  display: grid;
  gap: 10px;
  padding: 18px 20px 20px;
}

.quake-detail-row {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.quake-detail-row span {
  font-size: 12px;
  color: #9ac7d5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.quake-detail-row strong {
  font-size: 15px;
  color: #f6fbff;
}

.about-modal[hidden] {
  display: none;
}

.about-modal {
  position: fixed;
  inset: 0;
  z-index: 32;
}

.about-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 13, 0.72);
  backdrop-filter: blur(4px);
}

.about-modal-card {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: auto;
  max-width: 430px;
  max-height: min(70vh, 560px);
  overflow: auto;
  margin: 0 auto;
  border-radius: 26px 26px 22px 22px;
  background: #13202d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.42);
}

.about-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(7, 13, 18, 0.4);
  color: #ffffff;
  font-size: 15px;
  cursor: pointer;
}

.about-modal-header {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 22px 20px 16px;
  background: linear-gradient(180deg, rgba(61, 212, 222, 0.32), rgba(25, 46, 58, 0.92));
  color: #ffffff;
}

.about-modal-badge {
  min-width: 62px;
  min-height: 62px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  font-size: 26px;
  font-weight: 800;
}

.about-modal-title-wrap {
  display: grid;
  gap: 4px;
}

.about-modal-title-wrap strong {
  font-size: 22px;
}

.about-modal-title-wrap span {
  font-size: 13px;
  opacity: 0.92;
}

.about-modal-body {
  display: grid;
  gap: 10px;
  padding: 18px 20px 20px;
}

.about-row {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.about-row span {
  font-size: 12px;
  color: #9ac7d5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.about-row strong {
  font-size: 15px;
  line-height: 1.45;
  color: #f6fbff;
}

.legend-row {
  display: flex;
  gap: 16px;
  margin-top: 6px;
}

.legend-power {
  color: var(--power);
  font-weight: 700;
}

.legend-water {
  color: var(--water);
  font-weight: 700;
}

.address-one {
  background: var(--burgundy);
}

.address-two {
  background: var(--olive);
}

.address-three,
.address-warning.address-three {
  background: var(--navy);
}

.address-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.clear-link {
  border: 0;
  background: transparent;
  color: var(--cyan);
  font-size: 16px;
  font-weight: 700;
}

.address-field {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.08);
}

.address-field span {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
}

.address-field strong {
  display: block;
  font-size: 18px;
}

.ios-select,
.ios-input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(7, 12, 16, 0.22);
  color: var(--text);
  font: inherit;
  padding: 10px 12px;
}

.street-suggestions {
  display: none;
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(5, 10, 14, 0.96);
}

.street-suggestions.is-open {
  display: block;
}

.street-suggestion {
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
}

.street-suggestion:first-child {
  border-top: 0;
}

.field-state {
  margin-top: 12px;
  color: var(--cyan-2);
  font-size: 13px;
  min-height: 18px;
}

.address-meta {
  color: #f5c5c8;
  margin-bottom: 14px;
  min-height: 18px;
}

.day-line {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.day-line:first-of-type {
  border-top: 0;
}

.day-line.active.power span {
  color: var(--power);
}

.day-line.active.water span {
  color: var(--water);
}

.utility-entry {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.16);
  font-size: 14px;
  line-height: 1.45;
}

.utility-entry.power {
  color: var(--power);
}

.utility-entry.water {
  color: var(--water);
}

.picker-line {
  min-height: 52px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.03);
}

.picker-input {
  margin-bottom: 12px;
}

.overview-panel {
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.overview-summary {
  color: var(--muted);
  font-size: 14px;
}

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

.overview-day {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.overview-day-title {
  display: block;
  color: var(--text);
  font-size: 15px;
}

.overview-item {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.overview-item strong {
  display: block;
  font-size: 16px;
}

.overview-item span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.overview-alert.power strong {
  color: var(--power);
}

.overview-alert.water strong {
  color: var(--water);
}

.install-card strong {
  color: var(--cyan-2);
}

.install-card {
  scroll-margin-top: 18px;
}

.install-steps {
  margin: 12px 0 0;
  padding-left: 20px;
}

.install-steps li + li {
  margin-top: 8px;
}

.app-footer {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.footer-pill {
  flex: 1;
}

.footer-pill-accent {
  border-color: rgba(255, 202, 68, 0.65);
  background: linear-gradient(180deg, rgba(94, 54, 15, 0.95), rgba(56, 31, 8, 0.95));
  color: #ffd36a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.footer-pill-accent:hover,
.footer-pill-accent:focus-visible {
  background: linear-gradient(180deg, rgba(112, 64, 17, 0.98), rgba(66, 36, 9, 0.98));
  color: #ffe08d;
}

[data-theme-choice="light"] body {
  background:
    radial-gradient(circle at top, rgba(86, 180, 214, 0.16), transparent 30%),
    linear-gradient(180deg, #e6eef5 0%, #d9e4ee 52%, #cfdae5 100%);
}

[data-theme-choice="light"] .theme-card,
[data-theme-choice="light"] .current-card,
[data-theme-choice="light"] .section-block,
[data-theme-choice="light"] .municipality-card {
  background: linear-gradient(180deg, rgba(220, 231, 240, 0.99), rgba(208, 220, 231, 0.99));
  color: #13202b;
  border-color: rgba(58, 84, 107, 0.18);
  box-shadow: 0 16px 34px rgba(68, 91, 114, 0.12);
}

[data-theme-choice="light"] .meta-copy,
[data-theme-choice="light"] .body-copy,
[data-theme-choice="light"] .source-copy,
[data-theme-choice="light"] .section-note {
  color: #2b4154;
}

[data-theme-choice="light"] .header-mark,
[data-theme-choice="light"] .section-title,
[data-theme-choice="light"] .card-kicker,
[data-theme-choice="light"] .mini-kicker,
[data-theme-choice="light"] .status-line,
[data-theme-choice="light"] .load-state,
[data-theme-choice="light"] .field-state,
[data-theme-choice="light"] .install-card strong,
[data-theme-choice="light"] .clear-link,
[data-theme-choice="light"] .notification-card .source-copy,
[data-theme-choice="light"] .notification-card .load-state {
  color: #2b6f8d;
}

[data-theme-choice="light"] .outline-action,
[data-theme-choice="light"] .theme-pill {
  background: linear-gradient(180deg, #dde7ef, #d4e0e9);
  border-color: rgba(62, 90, 114, 0.2);
  color: #30556b;
}

[data-theme-choice="light"] .outline-action,
[data-theme-choice="light"] .theme-pill,
[data-theme-choice="light"] .footer-pill {
  color: #30556b;
}

[data-theme-choice="light"] .theme-pill.is-active {
  background: linear-gradient(180deg, #cfe0ec, #c2d5e2);
  border-color: rgba(53, 95, 121, 0.26);
  color: #21465d;
}

[data-theme-choice="light"] .outline-action:hover,
[data-theme-choice="light"] .outline-action:focus-visible,
[data-theme-choice="light"] .theme-pill:hover,
[data-theme-choice="light"] .theme-pill:focus-visible,
[data-theme-choice="light"] .footer-pill:hover,
[data-theme-choice="light"] .footer-pill:focus-visible {
  color: #1f4257;
}

[data-theme-choice="light"] .install-banner {
  background: linear-gradient(180deg, rgba(228, 239, 247, 0.98), rgba(217, 229, 239, 0.98));
  border-color: rgba(71, 114, 145, 0.22);
}

[data-theme-choice="light"] .weather-card {
  background: linear-gradient(180deg, rgba(195, 218, 229, 0.99), rgba(184, 208, 220, 0.99));
  border-color: rgba(88, 145, 171, 0.34);
}

[data-theme-choice="light"] .air-card {
  background: linear-gradient(180deg, rgba(214, 225, 235, 0.99), rgba(203, 215, 227, 0.99));
  border-color: rgba(94, 122, 148, 0.24);
}

[data-theme-choice="light"] .notification-card {
  background: linear-gradient(180deg, rgba(201, 222, 233, 0.99), rgba(190, 212, 224, 0.99));
  border-color: rgba(76, 146, 171, 0.28);
}

[data-theme-choice="light"] .quake-detail-row,
[data-theme-choice="light"] .about-row,
[data-theme-choice="light"] .alert-card,
[data-theme-choice="light"] .warning-pill,
[data-theme-choice="light"] .address-warning,
[data-theme-choice="light"] .address-card,
[data-theme-choice="light"] .overview-card,
[data-theme-choice="light"] .install-card {
  background: linear-gradient(180deg, rgba(218, 228, 238, 0.98), rgba(207, 218, 229, 0.98));
  border-color: rgba(62, 90, 114, 0.16);
}

[data-theme-choice="light"] .ios-input,
[data-theme-choice="light"] .picker-input,
[data-theme-choice="light"] .street-suggestions,
[data-theme-choice="light"] .overview-summary,
[data-theme-choice="light"] .overview-day-group,
[data-theme-choice="light"] .overview-item {
  background: rgba(214, 225, 235, 0.98);
  border-color: rgba(62, 90, 114, 0.18);
  color: #173044;
}

[data-theme-choice="light"] .app-header p,
[data-theme-choice="light"] .install-banner-copy span {
  color: #4b6074;
}

[data-theme-choice="light"] .ios-input::placeholder,
[data-theme-choice="light"] .picker-input::placeholder {
  color: #6a8295;
}

[data-theme-choice="light"] .footer-pill-accent {
  background: linear-gradient(180deg, rgba(255, 231, 172, 0.96), rgba(247, 214, 120, 0.96));
  border-color: rgba(170, 123, 26, 0.5);
  color: #6f4708;
}

@media (prefers-color-scheme: light) {
  [data-theme-choice="system"] body {
    background:
      radial-gradient(circle at top, rgba(86, 180, 214, 0.16), transparent 30%),
      linear-gradient(180deg, #e6eef5 0%, #d9e4ee 52%, #cfdae5 100%);
  }

  [data-theme-choice="system"] .theme-card,
  [data-theme-choice="system"] .current-card,
  [data-theme-choice="system"] .section-block,
  [data-theme-choice="system"] .municipality-card {
    background: linear-gradient(180deg, rgba(220, 231, 240, 0.99), rgba(208, 220, 231, 0.99));
    color: #13202b;
    border-color: rgba(58, 84, 107, 0.18);
    box-shadow: 0 16px 34px rgba(68, 91, 114, 0.12);
  }

  [data-theme-choice="system"] .meta-copy,
  [data-theme-choice="system"] .body-copy,
  [data-theme-choice="system"] .source-copy,
  [data-theme-choice="system"] .section-note {
    color: #2b4154;
  }

  [data-theme-choice="system"] .header-mark,
  [data-theme-choice="system"] .section-title,
  [data-theme-choice="system"] .card-kicker,
  [data-theme-choice="system"] .mini-kicker,
  [data-theme-choice="system"] .status-line,
  [data-theme-choice="system"] .load-state,
  [data-theme-choice="system"] .field-state,
  [data-theme-choice="system"] .install-card strong,
  [data-theme-choice="system"] .clear-link,
  [data-theme-choice="system"] .notification-card .source-copy,
  [data-theme-choice="system"] .notification-card .load-state {
    color: #2b6f8d;
  }

  [data-theme-choice="system"] .outline-action,
  [data-theme-choice="system"] .theme-pill {
    background: linear-gradient(180deg, #dde7ef, #d4e0e9);
    border-color: rgba(62, 90, 114, 0.2);
    color: #30556b;
  }

  [data-theme-choice="system"] .outline-action,
  [data-theme-choice="system"] .theme-pill,
  [data-theme-choice="system"] .footer-pill {
    color: #30556b;
  }

  [data-theme-choice="system"] .theme-pill.is-active {
    background: linear-gradient(180deg, #cfe0ec, #c2d5e2);
    border-color: rgba(53, 95, 121, 0.26);
    color: #21465d;
  }

  [data-theme-choice="system"] .outline-action:hover,
  [data-theme-choice="system"] .outline-action:focus-visible,
  [data-theme-choice="system"] .theme-pill:hover,
  [data-theme-choice="system"] .theme-pill:focus-visible,
  [data-theme-choice="system"] .footer-pill:hover,
  [data-theme-choice="system"] .footer-pill:focus-visible {
    color: #1f4257;
  }

  [data-theme-choice="system"] .install-banner {
    background: linear-gradient(180deg, rgba(228, 239, 247, 0.98), rgba(217, 229, 239, 0.98));
    border-color: rgba(71, 114, 145, 0.22);
  }

  [data-theme-choice="system"] .weather-card {
    background: linear-gradient(180deg, rgba(195, 218, 229, 0.99), rgba(184, 208, 220, 0.99));
    border-color: rgba(88, 145, 171, 0.34);
  }

  [data-theme-choice="system"] .air-card {
    background: linear-gradient(180deg, rgba(214, 225, 235, 0.99), rgba(203, 215, 227, 0.99));
    border-color: rgba(94, 122, 148, 0.24);
  }

  [data-theme-choice="system"] .notification-card {
    background: linear-gradient(180deg, rgba(201, 222, 233, 0.99), rgba(190, 212, 224, 0.99));
    border-color: rgba(76, 146, 171, 0.28);
  }

  [data-theme-choice="system"] .quake-detail-row,
  [data-theme-choice="system"] .about-row,
  [data-theme-choice="system"] .alert-card,
  [data-theme-choice="system"] .warning-pill,
  [data-theme-choice="system"] .address-warning,
  [data-theme-choice="system"] .address-card,
  [data-theme-choice="system"] .overview-card,
  [data-theme-choice="system"] .install-card {
    background: linear-gradient(180deg, rgba(218, 228, 238, 0.98), rgba(207, 218, 229, 0.98));
    border-color: rgba(62, 90, 114, 0.16);
  }

  [data-theme-choice="system"] .ios-input,
  [data-theme-choice="system"] .picker-input,
  [data-theme-choice="system"] .street-suggestions,
  [data-theme-choice="system"] .overview-summary,
  [data-theme-choice="system"] .overview-day-group,
  [data-theme-choice="system"] .overview-item {
    background: rgba(214, 225, 235, 0.98);
    border-color: rgba(62, 90, 114, 0.18);
    color: #173044;
  }

  [data-theme-choice="system"] .app-header p,
  [data-theme-choice="system"] .install-banner-copy span {
    color: #4b6074;
  }

  [data-theme-choice="system"] .ios-input::placeholder,
  [data-theme-choice="system"] .picker-input::placeholder {
    color: #6a8295;
  }
}

@media (min-width: 620px) {
  .phone-app {
    width: min(100%, 520px);
  }
}

@media (max-width: 420px) {
  .install-banner-actions {
    flex-direction: column;
  }
}