:root {
  --sky-top: #99ddf3;
  --sky-mid: #dff7ff;
  --sky-bottom: #f8fff2;
  --blue: #0f87bd;
  --blue-dark: #12324a;
  --blue-soft: #e7f7ff;
  --green: #8bd96d;
  --green-soft: #efffe8;
  --yellow: #ffd56a;
  --orange: #ffb347;
  --red: #e84d4d;
  --text: #183247;
  --muted: #5f788a;
  --card: rgba(255, 255, 255, 0.9);
  --card-solid: #ffffff;
  --shadow: 0 14px 35px rgba(35, 107, 139, 0.18);
  --shadow-soft: 0 8px 20px rgba(35, 107, 139, 0.12);
  --radius-lg: 30px;
  --radius-md: 24px;
  --radius-sm: 18px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #dff7ff;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background:
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 45%, var(--sky-bottom) 100%);
}

button,
select,
textarea {
  font-family: inherit;
}

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

.app-shell {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 96px;
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 88% 8%, #fff2a8 0 46px, transparent 47px),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-bottom) 100%);
}

.app-shell::before {
  content: "";
  position: fixed;
  left: 50%;
  bottom: 72px;
  width: min(430px, 100%);
  height: 145px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 16% 100%, #93d873 0 43%, transparent 44%),
    radial-gradient(ellipse at 72% 100%, #79cb68 0 45%, transparent 46%),
    radial-gradient(ellipse at 44% 105%, #b6e98a 0 38%, transparent 39%);
  pointer-events: none;
  z-index: 0;
}

.app-header,
.app-content,
.bottom-nav {
  position: relative;
  z-index: 1;
}

.app-header {
  padding: 20px 18px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

h1 {
  margin: 0;
  color: #06314f;
  font-size: 27px;
  line-height: 1.05;
}

.header-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-soft);
  font-size: 30px;
}

.app-content {
  padding: 10px 14px 0;
}

.screen {
  display: none;
  animation: fadeIn 0.22s ease;
}

.screen.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-card,
.section-card,
.quick-card,
.forecast-row,
.more-list button {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.hero-card {
  min-height: 155px;
  padding: 22px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.location-label {
  margin: 0 0 6px;
  color: var(--blue);
  font-weight: 900;
  font-size: 18px;
}

.hero-card h2 {
  margin: 0;
  font-size: 25px;
  line-height: 1.1;
}

.hero-text {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.weather-mini-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.weather-mini-row span {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(231, 247, 255, 0.9);
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 900;
}

.temp-badge {
  min-width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 26px;
  background: linear-gradient(145deg, #ffffff, #fff6ca);
  border: 1px solid rgba(255, 213, 106, 0.75);
}

.temp-badge span {
  color: var(--blue-dark);
  font-size: 29px;
  font-weight: 900;
}

.temp-badge small {
  margin-top: -17px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}

.quick-card {
  min-height: 120px;
  padding: 17px;
  border-radius: 24px;
  text-align: left;
  cursor: pointer;
  color: #111;
}

.quick-card:active,
.nav-item:active,
.location-btn:active,
.submit-report:active,
.more-list button:active {
  transform: scale(0.98);
}

.quick-card span {
  display: block;
  font-size: 30px;
}

.quick-card strong {
  display: block;
  margin-top: 10px;
  font-size: 17px;
}

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

.quick-card.featured {
  background: linear-gradient(145deg, #ffffff, var(--green-soft));
  border: 1px solid rgba(116, 201, 97, 0.45);
}

.section-card {
  margin-top: 16px;
  padding: 18px;
  border-radius: 26px;
}

.section-title-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 9px;
}

.section-card h3,
.forecast-row span {
  margin: 0;
  font-size: 19px;
  color: var(--blue-dark);
}

.section-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.48;
}

.pill {
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.pill.calm {
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.pill.live {
  background: var(--green-soft);
  color: #347934;
}

.map-placeholder {
  height: 175px;
  margin-top: 14px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
  background:
    linear-gradient(45deg, rgba(24, 142, 196, 0.13) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(98, 195, 112, 0.17) 25%, transparent 25%),
    linear-gradient(135deg, #dff7ff, #efffe8);
  background-size: 42px 42px;
}

.map-placeholder.taller {
  height: 245px;
}

.map-placeholder p {
  max-width: 245px;
  color: rgba(24, 50, 71, 0.72);
  font-weight: 900;
}

.map-pin {
  position: absolute;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(24, 50, 71, 0.2);
  font-size: 20px;
}

.pin-one {
  top: 28px;
  left: 54px;
}

.pin-two {
  top: 90px;
  right: 54px;
}

.pin-three {
  bottom: 28px;
  left: 138px;
}

.page-title {
  padding: 6px 4px 2px;
}

.page-title h2 {
  margin: 0;
  color: #06314f;
  font-size: 32px;
  line-height: 1;
}

.page-title p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.4;
}

.county-select {
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(15, 135, 189, 0.25);
  border-radius: 18px;
  background: #ffffff;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}

.forecast-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.forecast-row {
  border-radius: 22px;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
}

.forecast-row strong {
  color: var(--blue);
  font-size: 25px;
}

.forecast-row small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.report-action-card {
  text-align: center;
}

.location-btn,
.submit-report {
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 14px 16px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
}

.location-btn {
  color: var(--blue-dark);
  background: var(--blue-soft);
}

.report-action-card p {
  margin-top: 12px;
}

.checkbox-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(231, 247, 255, 0.7);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.checkbox-grid input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

textarea {
  width: 100%;
  min-height: 92px;
  margin-top: 14px;
  padding: 14px;
  resize: vertical;
  border: 1px solid rgba(15, 135, 189, 0.22);
  border-radius: 18px;
  background: #ffffff;
  color: var(--text);
  font-size: 14px;
  outline: none;
}

textarea:focus,
.county-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(15, 135, 189, 0.12);
}

.submit-report {
  margin-top: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  box-shadow: 0 10px 20px rgba(15, 135, 189, 0.25);
}

.radar-box {
  min-height: 330px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 24px;
  padding: 24px;
  background:
    radial-gradient(circle at 25% 25%, rgba(15, 135, 189, 0.2), transparent 28%),
    radial-gradient(circle at 75% 60%, rgba(98, 195, 112, 0.24), transparent 30%),
    linear-gradient(135deg, #dff7ff, #efffe8);
}

.radar-box span {
  font-size: 54px;
}

.radar-box h3 {
  margin: 10px 0 0;
}

.radar-box p {
  margin-top: 8px;
}

.alert-warning {
  border-left: 6px solid var(--orange);
}

.more-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.more-list button {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  padding: 17px;
  text-align: left;
  color: var(--blue-dark);
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 14px;
  width: min(410px, calc(100% - 24px));
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  padding: 9px 8px;
  border-radius: 27px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 36px rgba(24, 50, 71, 0.24);
  backdrop-filter: blur(14px);
}

.nav-item {
  width: 20%;
  border: none;
  border-radius: 20px;
  padding: 7px 0;
  background: transparent;
  color: #6d8798;
  cursor: pointer;
}

.nav-item span {
  display: block;
  font-size: 22px;
}

.nav-item small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 900;
}

.nav-item.active {
  color: var(--blue-dark);
  background: var(--blue-soft);
}

@media (min-width: 700px) {
  body {
    display: grid;
    place-items: start center;
  }

  .app-shell {
    margin-top: 18px;
    margin-bottom: 18px;
    min-height: calc(100vh - 36px);
    border-radius: 34px;
    box-shadow: 0 24px 60px rgba(24, 50, 71, 0.24);
  }

  .app-shell::before {
    bottom: 90px;
  }

  .bottom-nav {
    bottom: 30px;
  }
}/* Version 0.2 - Report feed + toast */

.report-feed {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.report-card {
  padding: 14px;
  border-radius: 18px;
  background: rgba(231, 247, 255, 0.78);
  border: 1px solid rgba(15, 135, 189, 0.16);
}

.report-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.report-card strong {
  color: var(--blue-dark);
  font-size: 15px;
}

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

.report-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.report-tag {
  padding: 6px 9px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 900;
}

.report-note {
  margin-top: 9px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 102px;
  width: min(390px, calc(100% - 32px));
  transform: translateX(-50%) translateY(20px);
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(18, 50, 74, 0.96);
  color: #ffffff;
  box-shadow: 0 14px 35px rgba(24, 50, 71, 0.28);
  font-size: 14px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s ease;
  z-index: 20;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.empty-feed {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}/* Version 0.2.1 - cleaner report map */

.map-placeholder.has-reports p {
  display: none;
}

.map-pin {
  z-index: 2;
}
/* Version 0.3.1 - Reports page polish */

.report-map-large {
  height: 315px !important;
  min-height: 315px;
}

.map-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 14px;
}

.map-toolbar span {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(231, 247, 255, 0.95);
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.submit-report {
  margin-bottom: 8px;
}

.report-helper-text {
  margin-bottom: 0 !important;
}

.map-card {
  margin-bottom: 18px;
}

#reportFeedSection {
  margin-bottom: 20px;
}

.upgraded-report-grid label {
  cursor: pointer;
}

.upgraded-report-grid label:active {
  transform: scale(0.98);
}
/* Version 0.4 - Real interactive report map */

.real-report-map {
  width: 100%;
  height: 340px;
  min-height: 340px;
  margin-top: 0;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(15, 135, 189, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  background: #dff7ff;
}

.leaflet-container {
  font-family: Arial, Helvetica, sans-serif;
}

.weather-report-marker {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #ffffff;
  box-shadow: 0 10px 24px rgba(24, 50, 71, 0.35);
  font-size: 22px;
}

.weather-report-marker.user-marker {
  width: 50px;
  height: 50px;
  font-size: 25px;
  box-shadow: 0 14px 30px rgba(24, 50, 71, 0.42);
}

.leaflet-popup-content-wrapper {
  border-radius: 16px;
}

.leaflet-popup-content {
  color: var(--blue-dark);
  font-weight: 800;
  line-height: 1.35;
}

.leaflet-control-attribution {
  font-size: 9px;
}/* Version 0.4.1 - Force real map visibility */

#reportMap.real-report-map,
.real-report-map {
  display: block !important;
  width: 100% !important;
  height: 340px !important;
  min-height: 340px !important;
  margin-top: 14px;
  border-radius: 24px;
  overflow: hidden;
  background: #dff7ff;
  border: 1px solid rgba(15, 135, 189, 0.16);
}

#reportMap .leaflet-container,
.leaflet-container {
  width: 100% !important;
  height: 100% !important;
}/* Version 0.4.2 - Expandable full screen reports map */

.map-expand-btn {
  border: none;
  border-radius: 999px;
  padding: 8px 11px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 135, 189, 0.22);
}

.map-expand-btn:active {
  transform: scale(0.97);
}

body.map-is-expanded {
  overflow: hidden;
}

body.map-is-expanded .bottom-nav {
  display: none;
}

.map-card.map-expanded {
  position: fixed;
  inset: 10px;
  z-index: 9999;
  margin: 0 !important;
  padding: 18px;
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
}

.map-card.map-expanded .section-title-row {
  margin-bottom: 10px;
}

.map-card.map-expanded .map-toolbar {
  margin-bottom: 12px;
}

.map-card.map-expanded .real-report-map {
  flex: 1;
  height: auto !important;
  min-height: 0 !important;
  margin-top: 0;
  border-radius: 22px;
}

.map-card.map-expanded .map-expand-btn {
  background: linear-gradient(135deg, #12324a, #0b2235);
}

.map-card.map-expanded .pill.live {
  background: #e7f7ff;
  color: var(--blue-dark);
}/* Force show expand map button */

.map-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

.map-expand-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  padding: 8px 11px;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 135, 189, 0.22);
}/* Version 0.4.3 - Report expiration + filters */

.report-filter {
  border: none;
  border-radius: 999px;
  padding: 8px 10px;
  background: rgba(231, 247, 255, 0.95);
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.report-filter.active {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 135, 189, 0.22);
}

.impact-filter {
  background: #fff3db;
  color: #8a5200;
}

.report-expire-text {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.report-card.is-hidden {
  display: none;
}
/* Version 0.5 - Forecast tab upgrade */

.forecast-hero-card {
  background: linear-gradient(145deg, #ffffff, #e8f8ff);
  border: 1px solid rgba(15, 135, 189, 0.18);
}

.forecast-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: #e7f7ff;
  font-size: 30px;
  margin-bottom: 12px;
  box-shadow: 0 10px 22px rgba(15, 135, 189, 0.14);
}

.forecast-hero-card h3 {
  font-size: 22px;
  margin-bottom: 8px;
}

.selected-forecast-card {
  background: linear-gradient(145deg, #ffffff, #f5fbff);
}

.forecast-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.forecast-metric-grid div {
  padding: 13px 10px;
  border-radius: 18px;
  background: rgba(231, 247, 255, 0.78);
  text-align: center;
}

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

.forecast-metric-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--blue-dark);
  font-size: 22px;
}

.forecast-time-grid {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.forecast-time-card {
  padding: 17px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: var(--shadow);
}

.forecast-time-card span {
  font-size: 28px;
}

.forecast-time-card h3 {
  margin: 8px 0 6px;
  color: var(--blue-dark);
  font-size: 18px;
}

.forecast-time-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 14px;
}

.region-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.region-card {
  width: 100%;
  border: none;
  border-radius: 18px;
  padding: 14px;
  background: rgba(231, 247, 255, 0.78);
  text-align: left;
  cursor: pointer;
}

.region-card strong {
  display: block;
  color: var(--blue-dark);
  font-size: 15px;
}

.region-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.35;
}

.region-card:active {
  transform: scale(0.98);
}

.forecast-note-card {
  margin-bottom: 18px;
}

@media (min-width: 390px) {
  .forecast-time-grid {
    grid-template-columns: 1fr;
  }
}
/* Version 0.6 - WordPress blog feed */

.blog-preview-card {
  background: linear-gradient(145deg, #ffffff, #f7fdff);
}

.blog-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.blog-list.compact {
  gap: 10px;
}

.blog-post-card {
  display: block;
  padding: 14px;
  border-radius: 18px;
  background: rgba(231, 247, 255, 0.78);
  border: 1px solid rgba(15, 135, 189, 0.14);
  color: var(--blue-dark);
  text-decoration: none;
  transition: 0.18s ease;
}

.blog-post-card:active {
  transform: scale(0.98);
}

.blog-post-card strong {
  display: block;
  font-size: 15px;
  line-height: 1.25;
}

.blog-post-card small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.blog-post-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.read-post-pill {
  display: inline-flex;
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 900;
}
/* Version 0.6.1 - Cleaner blog cards */

.blog-list {
  display: grid !important;
  gap: 12px !important;
  margin-top: 12px !important;
}

.blog-post-card {
  display: block !important;
  padding: 14px 15px !important;
  border-radius: 18px !important;
  background: rgba(231, 247, 255, 0.82) !important;
  border: 1px solid rgba(15, 135, 189, 0.14) !important;
  color: var(--blue-dark) !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(35, 107, 139, 0.08);
}

.blog-post-card strong {
  display: block !important;
  color: var(--blue-dark) !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
}

.blog-post-card small {
  display: block !important;
  margin-top: 7px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

.blog-post-card p {
  margin: 9px 0 0 !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.blog-post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.read-post-pill {
  display: inline-flex !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: var(--blue-dark) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

.blog-source-pill {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.blog-list.compact .blog-post-card p {
  display: none !important;
}

.blog-list.compact .blog-post-card:not(:first-child) {
  display: none !important;
}
/* Version 0.7 - Premium UI Polish */

:root {
  --premium-glass: rgba(255, 255, 255, 0.82);
  --premium-border: rgba(255, 255, 255, 0.72);
  --premium-shadow: 0 18px 45px rgba(21, 91, 123, 0.18);
  --premium-shadow-strong: 0 22px 55px rgba(21, 91, 123, 0.24);
  --premium-blue-gradient: linear-gradient(135deg, #1398d1, #0b4564);
  --premium-green-gradient: linear-gradient(135deg, #eaffdf, #ffffff);
}

/* Smoother app rendering */
* {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 255, 255, 0.75), transparent 36%),
    linear-gradient(180deg, #9adff5 0%, #dff8ff 45%, #f8fff2 100%);
}

/* Premium app container */
.app-shell {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 242, 168, 0.95) 0 48px, transparent 49px),
    radial-gradient(circle at 12% 16%, rgba(255, 255, 255, 0.55), transparent 88px),
    linear-gradient(180deg, #9bdff5 0%, #dff8ff 42%, #f8fff2 100%);
}

/* Better top header */
.app-header {
  padding-top: 24px;
  padding-bottom: 14px;
}

.app-header::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -2px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.7),
    transparent
  );
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.92;
}

h1 {
  font-size: 29px;
  letter-spacing: -0.04em;
}

.header-icon {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(231, 247, 255, 0.72));
  box-shadow: 0 14px 32px rgba(21, 91, 123, 0.18);
}

.header-icon::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  pointer-events: none;
}

/* Smooth screen changes */
.screen {
  animation: premiumScreenIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes premiumScreenIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Premium cards */
.hero-card,
.section-card,
.quick-card,
.forecast-time-card,
.forecast-row,
.more-list button {
  background: var(--premium-glass);
  border: 1px solid var(--premium-border);
  box-shadow: var(--premium-shadow);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

.hero-card {
  min-height: 168px;
  border-radius: 34px;
  position: relative;
  overflow: hidden;
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 213, 106, 0.23), transparent 92px),
    radial-gradient(circle at 8% 100%, rgba(139, 217, 109, 0.16), transparent 110px);
  pointer-events: none;
}

.hero-card > * {
  position: relative;
  z-index: 1;
}

.hero-card h2 {
  letter-spacing: -0.04em;
}

.temp-badge {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.85),
    0 12px 24px rgba(255, 190, 72, 0.18);
}

/* Better quick cards */
.quick-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  transition:
    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.quick-card::after {
  content: "";
  position: absolute;
  right: -26px;
  top: -26px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(231, 247, 255, 0.75);
  pointer-events: none;
}

.quick-card span,
.quick-card strong,
.quick-card small {
  position: relative;
  z-index: 1;
}

.quick-card:hover {
  box-shadow: var(--premium-shadow-strong);
}

.quick-card:active {
  transform: scale(0.965);
}

.quick-card.featured {
  background:
    radial-gradient(circle at 85% 15%, rgba(139, 217, 109, 0.28), transparent 70px),
    linear-gradient(145deg, #ffffff, #eaffdf);
}

/* Section cards */
.section-card {
  border-radius: 30px;
}

.section-title-row h3,
.section-card h3,
.page-title h2 {
  letter-spacing: -0.035em;
}

.page-title h2 {
  font-size: 34px;
}

.page-title p {
  max-width: 330px;
}

/* Pills */
.pill {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.pill.live {
  background: linear-gradient(135deg, #efffe8, #dcffd2);
}

.pill.calm {
  background: linear-gradient(135deg, #e7f7ff, #f5fcff);
}

/* Better form feel */
.county-select,
textarea {
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.location-btn,
.submit-report,
.map-expand-btn {
  transition:
    transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.16s ease,
    filter 0.16s ease;
}

.location-btn:active,
.submit-report:active,
.map-expand-btn:active {
  transform: scale(0.965);
}

.submit-report {
  background: var(--premium-blue-gradient);
  box-shadow: 0 14px 26px rgba(15, 92, 132, 0.24);
}

.submit-report:hover {
  filter: brightness(1.03);
}

/* Report checkboxes */
.upgraded-report-grid label {
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(231, 247, 255, 0.82));
}

.upgraded-report-grid label:has(input:checked) {
  background:
    radial-gradient(circle at 92% 12%, rgba(19, 152, 209, 0.15), transparent 52px),
    linear-gradient(145deg, #ffffff, #e7f7ff);
}

/* Map polish */
.real-report-map {
  border-radius: 26px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.65),
    0 14px 30px rgba(21, 91, 123, 0.13);
}

.leaflet-control-zoom a {
  border-radius: 10px !important;
  margin: 3px;
  border: none !important;
  color: var(--blue-dark) !important;
  font-weight: 900;
}

.leaflet-control-zoom {
  border: none !important;
  box-shadow: 0 10px 22px rgba(24, 50, 71, 0.18) !important;
}

.weather-report-marker {
  transition: transform 0.18s ease;
}

.weather-report-marker:hover {
  transform: scale(1.08);
}

/* Blog cards */
.blog-post-card {
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 92% 10%, rgba(19, 152, 209, 0.12), transparent 62px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(231, 247, 255, 0.84)) !important;
}

.blog-post-card strong {
  letter-spacing: -0.025em;
}

.read-post-pill {
  background: var(--premium-blue-gradient) !important;
  color: #ffffff !important;
}

/* Forecast polish */
.forecast-metric-grid div,
.region-card,
.forecast-time-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(231, 247, 255, 0.82));
}

.region-card {
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.region-card:active {
  transform: scale(0.965);
}

/* Bottom nav premium */
.bottom-nav {
  padding: 10px 9px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    0 18px 42px rgba(24, 50, 71, 0.23),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.nav-item {
  transition:
    transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.16s ease,
    color 0.16s ease;
}

.nav-item span {
  font-size: 23px;
}

.nav-item.active {
  color: #ffffff;
  background: var(--premium-blue-gradient);
  box-shadow: 0 10px 22px rgba(15, 92, 132, 0.22);
}

.nav-item.active small {
  color: #ffffff;
}

.nav-item:active {
  transform: scale(0.94);
}

/* Fullscreen map polish */
.map-card.map-expanded {
  border-radius: 32px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.map-card.map-expanded .real-report-map {
  border-radius: 26px;
}

/* Toast polish */
.toast {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 36, 55, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* Version 0.7.1 - Premium header and animated background */

.background-decor {
  position: fixed;
  inset: 0;
  width: min(430px, 100%);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.sun-glow {
  position: absolute;
  top: 38px;
  right: 26px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 224, 122, 0.72) 0%, rgba(255, 224, 122, 0.28) 42%, transparent 72%);
  filter: blur(1px);
  animation: sunFloat 7s ease-in-out infinite;
}

.soft-cloud {
  position: absolute;
  display: block;
  width: 92px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow:
    22px -12px 0 rgba(255, 255, 255, 0.36),
    46px 0 0 rgba(255, 255, 255, 0.32);
  filter: blur(0.2px);
}

.cloud-one {
  top: 118px;
  left: -40px;
  animation: cloudDriftOne 18s linear infinite;
}

.cloud-two {
  top: 238px;
  right: -72px;
  transform: scale(0.75);
  animation: cloudDriftTwo 24s linear infinite;
}

.cloud-three {
  top: 420px;
  left: -90px;
  transform: scale(0.62);
  opacity: 0.72;
  animation: cloudDriftThree 28s linear infinite;
}

@keyframes sunFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(8px) scale(1.04);
  }
}

@keyframes cloudDriftOne {
  from {
    transform: translateX(-20px);
  }

  to {
    transform: translateX(560px);
  }
}

@keyframes cloudDriftTwo {
  from {
    transform: translateX(40px) scale(0.75);
  }

  to {
    transform: translateX(-560px) scale(0.75);
  }
}

@keyframes cloudDriftThree {
  from {
    transform: translateX(-30px) scale(0.62);
  }

  to {
    transform: translateX(570px) scale(0.62);
  }
}

.premium-header {
  padding: 22px 16px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  width: 58px;
  height: 58px;
  min-width: 58px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 213, 106, 0.45), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(231, 247, 255, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow:
    0 16px 34px rgba(21, 91, 123, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  overflow: hidden;
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 17px;
  border: 1px solid rgba(255, 255, 255, 0.72);
}

.brand-sun {
  position: absolute;
  top: 7px;
  right: 7px;
  font-size: 24px;
  filter: drop-shadow(0 4px 8px rgba(255, 183, 62, 0.25));
}

.brand-cloud {
  position: absolute;
  left: 8px;
  bottom: 7px;
  font-size: 29px;
  filter: drop-shadow(0 5px 10px rgba(21, 91, 123, 0.14));
}

.brand-text {
  min-width: 0;
}

.brand-text .eyebrow {
  margin: 0 0 5px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.brand-text h1 {
  margin: 0;
  display: grid;
  gap: 0;
  font-size: 27px;
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.brand-text h1 span:first-child {
  color: #07334f;
}

.brand-text h1 span:last-child {
  background: linear-gradient(135deg, #1398d1, #0b4564);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.header-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 999px;
  padding: 9px 11px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 900;
  box-shadow:
    0 12px 26px rgba(21, 91, 123, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.18);
  animation: livePulse 1.8s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(0.72);
    opacity: 0.72;
  }
}

.app-content,
.app-header,
.bottom-nav {
  position: relative;
  z-index: 2;
}

@media (max-width: 370px) {
  .brand-text h1 {
    font-size: 24px;
  }

  .brand-text .eyebrow {
    font-size: 9.5px;
  }

  .header-status-pill {
    padding: 8px 9px;
    font-size: 11px;
  }
}
/* Version 0.7.2 - Liquid Glass UI */

:root {
  --liquid-glass-bg: rgba(255, 255, 255, 0.54);
  --liquid-glass-bg-strong: rgba(255, 255, 255, 0.68);
  --liquid-glass-border: rgba(255, 255, 255, 0.82);
  --liquid-glass-shadow: 0 22px 55px rgba(18, 78, 112, 0.18);
  --liquid-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(255, 255, 255, 0.28);
}

/* App background: soft liquid sky */
body {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.9), transparent 26%),
    radial-gradient(circle at 86% 8%, rgba(255, 223, 116, 0.5), transparent 22%),
    radial-gradient(circle at 20% 72%, rgba(116, 215, 255, 0.35), transparent 30%),
    linear-gradient(180deg, #8fdaf4 0%, #dff8ff 48%, #f9fff1 100%) !important;
}

.app-shell {
  background:
    radial-gradient(circle at 82% 6%, rgba(255, 226, 119, 0.48), transparent 18%),
    radial-gradient(circle at 12% 22%, rgba(255, 255, 255, 0.62), transparent 24%),
    radial-gradient(circle at 70% 78%, rgba(126, 219, 255, 0.2), transparent 28%),
    linear-gradient(180deg, rgba(145, 222, 247, 0.92), rgba(241, 255, 244, 0.94)) !important;
}

/* Main liquid glass surfaces */
.hero-card,
.section-card,
.quick-card,
.selected-forecast-card,
.forecast-time-card,
.forecast-row,
.region-card,
.blog-post-card,
.more-list button,
.bottom-nav,
.header-status-pill,
.brand-mark {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.74),
      rgba(255, 255, 255, 0.38)
    ) !important;
  border: 1px solid var(--liquid-glass-border) !important;
  box-shadow:
    var(--liquid-glass-shadow),
    var(--liquid-inner-glow) !important;
  backdrop-filter: blur(24px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.35) !important;
}

/* Glass highlight */
.hero-card::after,
.section-card::after,
.quick-card::after,
.selected-forecast-card::after,
.forecast-time-card::after,
.region-card::after,
.blog-post-card::after,
.more-list button::after,
.bottom-nav::after,
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(255, 255, 255, 0.18) 34%,
      rgba(255, 255, 255, 0.04) 60%,
      rgba(255, 255, 255, 0.32) 100%
    );
  pointer-events: none;
  z-index: 0;
}

/* Liquid color bloom inside cards */
.hero-card::before,
.section-card::before,
.quick-card::before,
.selected-forecast-card::before,
.forecast-time-card::before,
.region-card::before,
.blog-post-card::before {
  content: "";
  position: absolute;
  width: 145px;
  height: 145px;
  right: -58px;
  top: -58px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(116, 215, 255, 0.28), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

/* Keep content above glass effects */
.hero-card > *,
.section-card > *,
.quick-card > *,
.selected-forecast-card > *,
.forecast-time-card > *,
.region-card > *,
.blog-post-card > *,
.more-list button > *,
.bottom-nav > *,
.brand-mark > * {
  position: relative;
  z-index: 1;
}

/* Premium rounded shape language */
.hero-card {
  border-radius: 36px !important;
}

.section-card,
.selected-forecast-card {
  border-radius: 32px !important;
}

.quick-card,
.forecast-time-card,
.region-card,
.blog-post-card {
  border-radius: 26px !important;
}

/* Header: more glassy and app-like */
.premium-header {
  padding-top: 24px;
}

.brand-mark {
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 70% 28%, rgba(255, 219, 111, 0.58), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.34)) !important;
}

.brand-text .eyebrow {
  color: rgba(7, 51, 79, 0.68);
}

.brand-text h1 span:first-child {
  color: rgba(7, 51, 79, 0.92);
}

.brand-text h1 span:last-child {
  background: linear-gradient(135deg, #087eb4, #07334f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Live pill liquid look */
.header-status-pill {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.38)) !important;
  box-shadow:
    0 15px 32px rgba(18, 78, 112, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

/* Buttons feel like real app controls */
.location-btn,
.submit-report,
.map-expand-btn,
.read-post-pill,
.report-filter,
.county-select,
.alert-county-select,
textarea {
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

.submit-report,
.read-post-pill,
.nav-item.active {
  background:
    linear-gradient(135deg, rgba(19, 152, 209, 0.95), rgba(7, 51, 79, 0.95)) !important;
  box-shadow:
    0 14px 30px rgba(7, 51, 79, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

/* Bottom nav: floating glass dock */
.bottom-nav {
  border-radius: 34px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)) !important;
  box-shadow:
    0 24px 55px rgba(18, 78, 112, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.nav-item {
  border-radius: 24px;
}

.nav-item.active {
  border-radius: 24px;
}

/* Liquid movement, lightweight */
.quick-card,
.section-card,
.hero-card,
.blog-post-card,
.region-card,
.forecast-time-card,
.more-list button {
  transition:
    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.quick-card:active,
.blog-post-card:active,
.region-card:active,
.more-list button:active {
  transform: scale(0.965) translateY(1px);
}

.hero-card:active,
.section-card:active {
  transform: scale(0.992);
}

/* Glassy report/map area */
.real-report-map {
  border: 1px solid rgba(255, 255, 255, 0.76) !important;
  box-shadow:
    0 18px 42px rgba(18, 78, 112, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

/* Inputs and filters */
.county-select,
.alert-county-select,
textarea,
.report-filter {
  background: rgba(255, 255, 255, 0.58) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(18, 78, 112, 0.08) !important;
}

.report-filter.active {
  background:
    linear-gradient(135deg, rgba(19, 152, 209, 0.92), rgba(7, 51, 79, 0.92)) !important;
  color: #ffffff !important;
}

/* Slightly cleaner text contrast on glass */
.page-title p,
.hero-card p,
.section-card p,
.blog-post-card p,
small,
.empty-feed {
  color: rgba(45, 84, 103, 0.76) !important;
}

/* Performance-friendly motion */
.screen {
  will-change: transform, opacity;
}

.quick-card,
.nav-item,
.blog-post-card,
.region-card,
.more-list button {
  will-change: transform;
}

/* Fallback if glass blur is not supported */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .hero-card,
  .section-card,
  .quick-card,
  .selected-forecast-card,
  .forecast-time-card,
  .forecast-row,
  .region-card,
  .blog-post-card,
  .more-list button,
  .bottom-nav,
  .header-status-pill,
  .brand-mark {
    background: rgba(255, 255, 255, 0.9) !important;
  }
}
/* Version 0.7.3 - User Appearance Settings */

.appearance-settings-card {
  display: grid;
  gap: 14px;
}

.settings-row,
.settings-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 22px rgba(18, 78, 112, 0.08);
}

.settings-row span,
.settings-toggle-row span {
  display: grid;
  gap: 3px;
}

.settings-row strong,
.settings-toggle-row strong {
  color: var(--blue-dark);
  font-size: 14px;
}

.settings-row small,
.settings-toggle-row small {
  color: rgba(45, 84, 103, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.settings-select {
  min-width: 128px;
  border: none;
  border-radius: 999px;
  padding: 10px 12px;
  color: var(--blue-dark);
  font-weight: 900;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 18px rgba(18, 78, 112, 0.1);
}

.settings-toggle-row input {
  width: 22px;
  height: 22px;
  accent-color: #1398d1;
}

.settings-note {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 800;
}

/* Soft Glass Mode */
body.ui-soft-glass .hero-card,
body.ui-soft-glass .section-card,
body.ui-soft-glass .quick-card,
body.ui-soft-glass .selected-forecast-card,
body.ui-soft-glass .forecast-time-card,
body.ui-soft-glass .forecast-row,
body.ui-soft-glass .region-card,
body.ui-soft-glass .blog-post-card,
body.ui-soft-glass .more-list button,
body.ui-soft-glass .bottom-nav,
body.ui-soft-glass .header-status-pill,
body.ui-soft-glass .brand-mark {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(14px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.12) !important;
  box-shadow: 0 14px 32px rgba(18, 78, 112, 0.13) !important;
}

body.ui-soft-glass .background-decor {
  opacity: 0.72;
}

/* Classic Mode */
body.ui-classic {
  background: linear-gradient(180deg, #bfeeff, #f8fff2) !important;
}

body.ui-classic .app-shell {
  background: linear-gradient(180deg, #bfeeff, #f8fff2) !important;
}

body.ui-classic .hero-card,
body.ui-classic .section-card,
body.ui-classic .quick-card,
body.ui-classic .selected-forecast-card,
body.ui-classic .forecast-time-card,
body.ui-classic .forecast-row,
body.ui-classic .region-card,
body.ui-classic .blog-post-card,
body.ui-classic .more-list button,
body.ui-classic .bottom-nav,
body.ui-classic .header-status-pill,
body.ui-classic .brand-mark {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(15, 135, 189, 0.12) !important;
  box-shadow: 0 10px 24px rgba(18, 78, 112, 0.1) !important;
}

body.ui-classic .background-decor {
  opacity: 0.3;
}

/* High Contrast Mode */
body.ui-high-contrast {
  background: #eaf8ff !important;
}

body.ui-high-contrast .app-shell {
  background: #eaf8ff !important;
}

body.ui-high-contrast .hero-card,
body.ui-high-contrast .section-card,
body.ui-high-contrast .quick-card,
body.ui-high-contrast .selected-forecast-card,
body.ui-high-contrast .forecast-time-card,
body.ui-high-contrast .forecast-row,
body.ui-high-contrast .region-card,
body.ui-high-contrast .blog-post-card,
body.ui-high-contrast .more-list button,
body.ui-high-contrast .bottom-nav,
body.ui-high-contrast .header-status-pill,
body.ui-high-contrast .brand-mark {
  background: #ffffff !important;
  color: #05283f !important;
  border: 2px solid rgba(5, 40, 63, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 8px 18px rgba(5, 40, 63, 0.12) !important;
}

body.ui-high-contrast .background-decor {
  display: none;
}

body.ui-high-contrast p,
body.ui-high-contrast small,
body.ui-high-contrast .empty-feed {
  color: #24465a !important;
}

/* Reduce Motion Setting */
body.reduce-app-motion *,
body.reduce-app-motion *::before,
body.reduce-app-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

body.reduce-app-motion .soft-cloud,
body.reduce-app-motion .sun-glow {
  animation: none !important;
}
/* Version 0.7.4 - Settings gear and modal */

#more {
  position: relative;
}

.settings-gear-btn {
  position: absolute;
  top: 4px;
  right: 2px;
  z-index: 8;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.38));
  box-shadow:
    0 15px 32px rgba(18, 78, 112, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  color: var(--blue-dark);
  font-size: 21px;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.settings-gear-btn:active {
  transform: scale(0.94) rotate(12deg);
}

.settings-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(5, 40, 63, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.settings-modal-backdrop.open {
  display: flex;
  animation: settingsFadeIn 0.18s ease;
}

@keyframes settingsFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.settings-modal {
  width: min(360px, 100%);
  max-height: 82vh;
  overflow-y: auto;
  padding: 20px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 90% 8%, rgba(255, 226, 119, 0.24), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.48));
  border: 1px solid rgba(255, 255, 255, 0.84);
  box-shadow:
    0 28px 80px rgba(5, 40, 63, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(28px) saturate(1.35);
  -webkit-backdrop-filter: blur(28px) saturate(1.35);
  animation: settingsPopIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes settingsPopIn {
  from {
    transform: translateY(12px) scale(0.96);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.settings-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

.settings-modal-header h3 {
  margin: 0;
  color: var(--blue-dark);
  font-size: 25px;
  letter-spacing: -0.04em;
}

.settings-close-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--blue-dark);
  font-size: 18px;
  font-weight: 900;
  box-shadow:
    0 10px 22px rgba(18, 78, 112, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.settings-modal-intro {
  margin: 0 0 16px;
  color: rgba(45, 84, 103, 0.78);
  font-size: 14px;
  line-height: 1.45;
}

.settings-modal .settings-row,
.settings-modal .settings-toggle-row {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.settings-modal .settings-row {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 15px;
}

.settings-modal .settings-toggle-row {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 15px;
}

.settings-modal .settings-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.settings-modal .settings-note {
  margin-top: 4px !important;
}

body.settings-modal-open {
  overflow: hidden;
}
/* Version 0.7.5 - Advanced settings, dark mode, and page scrolling */

/* Better page scrolling */
html,
body {
  min-height: 100%;
}

body {
  overflow-y: auto;
}

.app-shell {
  min-height: 100dvh;
  height: auto;
}

.app-content {
  padding-bottom: calc(118px + env(safe-area-inset-bottom));
}

.screen {
  padding-bottom: 18px;
}

/* Dark Mode */
body.app-dark-mode {
  background:
    radial-gradient(circle at 20% 10%, rgba(75, 140, 190, 0.28), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(255, 207, 96, 0.18), transparent 22%),
    linear-gradient(180deg, #071a28 0%, #0b2638 48%, #092015 100%) !important;
  color: #eef9ff;
}

body.app-dark-mode .app-shell {
  background:
    radial-gradient(circle at 84% 8%, rgba(255, 207, 96, 0.16), transparent 20%),
    radial-gradient(circle at 14% 24%, rgba(78, 177, 232, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(7, 26, 40, 0.96), rgba(9, 32, 21, 0.96)) !important;
}

body.app-dark-mode .background-decor {
  opacity: 0.34;
}

body.app-dark-mode .hero-card,
body.app-dark-mode .section-card,
body.app-dark-mode .quick-card,
body.app-dark-mode .selected-forecast-card,
body.app-dark-mode .forecast-time-card,
body.app-dark-mode .forecast-row,
body.app-dark-mode .region-card,
body.app-dark-mode .blog-post-card,
body.app-dark-mode .more-list button,
body.app-dark-mode .bottom-nav,
body.app-dark-mode .header-status-pill,
body.app-dark-mode .brand-mark,
body.app-dark-mode .settings-modal {
  background:
    linear-gradient(
      145deg,
      rgba(18, 50, 69, 0.72),
      rgba(9, 31, 44, 0.48)
    ) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #eef9ff !important;
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

body.app-dark-mode h1,
body.app-dark-mode h2,
body.app-dark-mode h3,
body.app-dark-mode strong,
body.app-dark-mode .brand-text h1 span:first-child,
body.app-dark-mode .settings-modal-header h3 {
  color: #f5fbff !important;
}

body.app-dark-mode .brand-text h1 span:last-child {
  background: linear-gradient(135deg, #78d8ff, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

body.app-dark-mode p,
body.app-dark-mode small,
body.app-dark-mode .page-title p,
body.app-dark-mode .hero-card p,
body.app-dark-mode .section-card p,
body.app-dark-mode .blog-post-card p,
body.app-dark-mode .empty-feed,
body.app-dark-mode .settings-modal-intro,
body.app-dark-mode .settings-note {
  color: rgba(226, 244, 255, 0.76) !important;
}

body.app-dark-mode .settings-row,
body.app-dark-mode .settings-toggle-row,
body.app-dark-mode .settings-select,
body.app-dark-mode .county-select,
body.app-dark-mode textarea,
body.app-dark-mode .report-filter {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #f5fbff !important;
}

body.app-dark-mode .settings-select option {
  color: #05283f;
}

body.app-dark-mode .nav-item {
  color: rgba(226, 244, 255, 0.72);
}

body.app-dark-mode .nav-item small {
  color: rgba(226, 244, 255, 0.72);
}

body.app-dark-mode .nav-item.active,
body.app-dark-mode .submit-report,
body.app-dark-mode .read-post-pill,
body.app-dark-mode .report-filter.active {
  background: linear-gradient(135deg, #1398d1, #08283c) !important;
  color: #ffffff !important;
}

body.app-dark-mode .settings-close-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

/* Text size setting */
body.text-large {
  font-size: 17px;
}

body.text-large p,
body.text-large small,
body.text-large .blog-post-card p,
body.text-large .settings-modal-intro {
  font-size: 15px !important;
}

body.text-large .nav-item small {
  font-size: 11px !important;
}

body.text-large .blog-post-card strong,
body.text-large .settings-row strong,
body.text-large .settings-toggle-row strong {
  font-size: 16px !important;
}

/* Compact cards setting */
body.compact-cards .section-card,
body.compact-cards .quick-card,
body.compact-cards .blog-post-card,
body.compact-cards .forecast-time-card,
body.compact-cards .region-card {
  padding: 12px !important;
}

body.compact-cards .hero-card {
  min-height: 138px !important;
  padding: 18px !important;
}

body.compact-cards .quick-grid,
body.compact-cards .blog-list,
body.compact-cards .forecast-time-grid,
body.compact-cards .region-list {
  gap: 9px !important;
}

body.compact-cards .blog-post-card p {
  display: none !important;
}

body.compact-cards .section-card {
  border-radius: 24px !important;
}
/* Version 0.7.5.1 - Better Night Glass Dark Mode */

body.app-dark-mode {
  background:
    radial-gradient(circle at 18% 8%, rgba(96, 184, 255, 0.18), transparent 28%),
    radial-gradient(circle at 88% 10%, rgba(255, 217, 122, 0.12), transparent 20%),
    radial-gradient(circle at 50% 90%, rgba(88, 196, 140, 0.08), transparent 34%),
    linear-gradient(180deg, #061824 0%, #082436 48%, #071d2a 100%) !important;
  color: #f3fbff !important;
}

body.app-dark-mode .app-shell {
  background:
    radial-gradient(circle at 84% 7%, rgba(255, 220, 128, 0.11), transparent 22%),
    radial-gradient(circle at 16% 22%, rgba(91, 188, 255, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(6, 24, 36, 0.98), rgba(7, 29, 42, 0.98)) !important;
}

body.app-dark-mode .background-decor {
  opacity: 0.22;
}

body.app-dark-mode .sun-glow {
  background:
    radial-gradient(circle, rgba(255, 219, 126, 0.24) 0%, rgba(255, 219, 126, 0.1) 42%, transparent 72%);
}

body.app-dark-mode .soft-cloud {
  background: rgba(157, 213, 255, 0.16);
  box-shadow:
    22px -12px 0 rgba(157, 213, 255, 0.11),
    46px 0 0 rgba(157, 213, 255, 0.09);
}

/* Dark cards should feel like glass, not inverted white cards */
body.app-dark-mode .hero-card,
body.app-dark-mode .section-card,
body.app-dark-mode .quick-card,
body.app-dark-mode .selected-forecast-card,
body.app-dark-mode .forecast-time-card,
body.app-dark-mode .forecast-row,
body.app-dark-mode .region-card,
body.app-dark-mode .blog-post-card,
body.app-dark-mode .more-list button,
body.app-dark-mode .bottom-nav,
body.app-dark-mode .header-status-pill,
body.app-dark-mode .brand-mark,
body.app-dark-mode .settings-modal {
  background:
    linear-gradient(
      145deg,
      rgba(23, 59, 82, 0.74),
      rgba(8, 29, 43, 0.58)
    ) !important;
  border: 1px solid rgba(142, 218, 255, 0.16) !important;
  color: #f3fbff !important;
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(24px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.15) !important;
}

/* Tone down bright liquid highlights in dark mode */
body.app-dark-mode .hero-card::after,
body.app-dark-mode .section-card::after,
body.app-dark-mode .quick-card::after,
body.app-dark-mode .selected-forecast-card::after,
body.app-dark-mode .forecast-time-card::after,
body.app-dark-mode .region-card::after,
body.app-dark-mode .blog-post-card::after,
body.app-dark-mode .more-list button::after,
body.app-dark-mode .bottom-nav::after,
body.app-dark-mode .brand-mark::after {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.04) 42%,
      rgba(120, 216, 255, 0.08) 100%
    ) !important;
}

body.app-dark-mode .hero-card::before,
body.app-dark-mode .section-card::before,
body.app-dark-mode .quick-card::before,
body.app-dark-mode .selected-forecast-card::before,
body.app-dark-mode .forecast-time-card::before,
body.app-dark-mode .region-card::before,
body.app-dark-mode .blog-post-card::before {
  background:
    radial-gradient(circle, rgba(85, 190, 255, 0.12), transparent 68%) !important;
}

/* Text */
body.app-dark-mode h1,
body.app-dark-mode h2,
body.app-dark-mode h3,
body.app-dark-mode strong,
body.app-dark-mode .page-title h2,
body.app-dark-mode .brand-text h1 span:first-child,
body.app-dark-mode .settings-modal-header h3 {
  color: #f6fcff !important;
}

body.app-dark-mode .brand-text h1 span:last-child {
  background: linear-gradient(135deg, #7fdbff, #dff7ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

body.app-dark-mode p,
body.app-dark-mode small,
body.app-dark-mode .page-title p,
body.app-dark-mode .hero-card p,
body.app-dark-mode .section-card p,
body.app-dark-mode .blog-post-card p,
body.app-dark-mode .empty-feed,
body.app-dark-mode .settings-modal-intro,
body.app-dark-mode .settings-note,
body.app-dark-mode .eyebrow {
  color: rgba(222, 244, 255, 0.74) !important;
}

/* Inputs and settings */
body.app-dark-mode .settings-row,
body.app-dark-mode .settings-toggle-row,
body.app-dark-mode .settings-select,
body.app-dark-mode .county-select,
body.app-dark-mode .alert-county-select,
body.app-dark-mode textarea,
body.app-dark-mode .report-filter {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(142, 218, 255, 0.15) !important;
  color: #f6fcff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 18px rgba(0, 0, 0, 0.16) !important;
}

body.app-dark-mode .settings-select option,
body.app-dark-mode .county-select option,
body.app-dark-mode .alert-county-select option {
  color: #082436;
  background: #ffffff;
}

/* Buttons */
body.app-dark-mode .submit-report,
body.app-dark-mode .read-post-pill,
body.app-dark-mode .report-filter.active,
body.app-dark-mode .nav-item.active {
  background: linear-gradient(135deg, #159bd5, #0a4c70) !important;
  color: #ffffff !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

body.app-dark-mode .settings-close-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f6fcff !important;
  border: 1px solid rgba(142, 218, 255, 0.15);
}

body.app-dark-mode .settings-modal-backdrop {
  background: rgba(0, 9, 16, 0.54) !important;
}

/* Bottom nav */
body.app-dark-mode .bottom-nav {
  background:
    linear-gradient(
      145deg,
      rgba(19, 50, 72, 0.86),
      rgba(7, 25, 38, 0.74)
    ) !important;
}

body.app-dark-mode .nav-item {
  color: rgba(222, 244, 255, 0.72) !important;
}

body.app-dark-mode .nav-item small {
  color: rgba(222, 244, 255, 0.72) !important;
}

body.app-dark-mode .nav-item.active small {
  color: #ffffff !important;
}

/* Pills */
body.app-dark-mode .pill,
body.app-dark-mode .pill.live,
body.app-dark-mode .pill.calm {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #dff7ff !important;
  border: 1px solid rgba(142, 218, 255, 0.16);
}

/* Forecast metric cards */
body.app-dark-mode .forecast-metric-grid div {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(142, 218, 255, 0.14) !important;
}

/* Map stays readable */
body.app-dark-mode .real-report-map {
  border-color: rgba(142, 218, 255, 0.18) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
  /* Version 0.7.6.7 - Emergency Reports scroll/feed fix */

/* Let the report popup itself scroll like a real mobile sheet */
.report-sheet-backdrop.open {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 18px 14px calc(90px + env(safe-area-inset-bottom)) !important;
  background: rgba(0, 9, 16, 0.62) !important;
}

.report-sheet {
  width: min(430px, 100%) !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
  margin: 20px auto 40px !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.report-sheet-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
  border-radius: 24px !important;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.72),
      rgba(255, 255, 255, 0.34)
    ) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

body.app-dark-mode .report-sheet-header {
  background:
    linear-gradient(
      145deg,
      rgba(23, 59, 82, 0.92),
      rgba(8, 29, 43, 0.82)
    ) !important;
}

#reportSheetContent {
  display: block !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 0 30px !important;
  box-sizing: border-box !important;
}

/* Keep form hidden everywhere unless popup is open */
body:not(.report-sheet-open) #reportFormCard,
body:not(.report-sheet-open) .report-form-card,
body:not(.report-sheet-open) .section-card:has(.submit-report) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* But show form inside the popup when open */
body.report-sheet-open #reportSheetContent #reportFormCard,
body.report-sheet-open #reportSheetContent .report-form-card,
body.report-sheet-open #reportSheetContent .section-card:has(.submit-report) {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Compact the report options so the submit button is reachable */
body.report-sheet-open #reportSheetContent .upgraded-report-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

body.report-sheet-open #reportSheetContent .upgraded-report-grid label {
  min-height: 40px !important;
  padding: 8px 10px !important;
  border-radius: 15px !important;
  font-size: 12.5px !important;
}

body.report-sheet-open #reportSheetContent textarea {
  min-height: 72px !important;
  max-height: 95px !important;
}

body.report-sheet-open #reportSheetContent .submit-report {
  margin-bottom: 40px !important;
}

/* Force map and feed to show only on the Reports tab */
html body #reports.screen.active .map-card,
html body #reports.screen.active .section-card:has(#reportMap),
html body #reports.screen.active #reportMap,
html body #reports.screen.active .section-card:has(#submittedReports),
html body #reports.screen.active .submitted-reports-card,
html body #reports.screen.active .reports-feed-card,
html body #reports.screen.active #submittedReports {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Keep report/map/feed off Home and More */
html body #home #reportMap,
html body #home .map-card,
html body #home #submittedReports,
html body #home .reports-feed-card,
html body #home .submitted-reports-card,
html body #more #reportMap,
html body #more .map-card,
html body #more #submittedReports,
html body #more .reports-feed-card,
html body #more .submitted-reports-card {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 365px) {
  body.report-sheet-open #reportSheetContent .upgraded-report-grid {
    grid-template-columns: 1fr !important;
  }
}/* Version 0.7.6.8 - Clean Reports reset */

/* Kill the broken old popup system */
#reportSheet,
.report-sheet-backdrop,
.report-sheet {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.report-sheet-open {
  overflow-y: auto !important;
}

/* Reports clean layout */
.clean-report-panel {
  margin: 14px 0 16px;
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.38));
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow:
    0 18px 42px rgba(18, 78, 112, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  overflow: hidden;
}

.clean-report-panel summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
}

.clean-report-panel summary::-webkit-details-marker {
  display: none;
}

.clean-report-panel summary div {
  display: grid;
  gap: 3px;
}

.clean-report-panel summary strong {
  color: var(--blue-dark);
  font-size: 15px;
}

.clean-report-panel summary small {
  color: rgba(45, 84, 103, 0.74);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.clean-report-panel summary span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 11px 14px;
  background: linear-gradient(135deg, #1398d1, #07334f);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  box-shadow:
    0 14px 28px rgba(7, 51, 79, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.clean-report-panel[open] summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.clean-report-panel #reportFormCard {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  padding: 16px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.clean-report-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.clean-report-info-card {
  padding: 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.62);
}

.clean-report-info-card span {
  display: block;
  margin-bottom: 5px;
}

.clean-report-info-card strong {
  display: block;
  color: var(--blue-dark);
  font-size: 13px;
}

.clean-report-info-card small {
  display: block;
  margin-top: 3px;
  color: rgba(45, 84, 103, 0.72);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 800;
}

.clean-report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 14px 0 10px;
}

.clean-report-header h3 {
  margin: 0;
}

.choose-all-reports {
  border: none;
  border-radius: 999px;
  padding: 8px 11px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 900;
}

.clean-report-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.clean-report-grid label {
  min-height: 42px !important;
  padding: 9px 10px !important;
  border-radius: 16px !important;
  font-size: 12.5px !important;
}

.clean-report-panel textarea {
  width: 100%;
  min-height: 82px;
  margin-top: 12px;
  box-sizing: border-box;
}

.clean-report-panel .submit-report {
  margin-top: 12px;
}

.report-demo-note {
  margin: 10px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.4;
}

.clean-map-card,
.clean-feed-card {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Force map and feed to appear on Reports */
#reports.screen.active #reportMap,
#reports.screen.active .map-card,
#reports.screen.active #submittedReports,
#reports.screen.active .reports-feed-card,
#reports.screen.active .submitted-reports-card {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Keep Reports stuff off Home/More */
#home #reportMap,
#home .map-card,
#home #submittedReports,
#home .reports-feed-card,
#home .submitted-reports-card,
#more #reportMap,
#more .map-card,
#more #submittedReports,
#more .reports-feed-card,
#more .submitted-reports-card {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Dark mode clean reports */
body.app-dark-mode .clean-report-panel,
body.app-dark-mode .clean-report-info-card {
  background:
    linear-gradient(
      145deg,
      rgba(23, 59, 82, 0.74),
      rgba(8, 29, 43, 0.58)
    ) !important;
  border-color: rgba(142, 218, 255, 0.16) !important;
}

body.app-dark-mode .clean-report-panel summary strong,
body.app-dark-mode .clean-report-info-card strong,
body.app-dark-mode .clean-report-header h3 {
  color: #f6fcff !important;
}

body.app-dark-mode .clean-report-panel summary small,
body.app-dark-mode .clean-report-info-card small,
body.app-dark-mode .report-demo-note {
  color: rgba(222, 244, 255, 0.72) !important;
}

@media (max-width: 365px) {
  .clean-report-info-grid,
  .clean-report-grid {
    grid-template-columns: 1fr !important;
  }

  .clean-report-panel summary {
    align-items: flex-start;
    flex-direction: column;
  }
}/* Version 0.7.6.9 - Fix clean report panel opening */

/* Old popup cleanup rules were hiding the new clean report form.
   This forces the clean Reports form to show when the panel is opened. */

html body #reports .clean-report-panel[open] #reportFormCard,
html body #reports .clean-report-panel[open] .report-form-card,
html body #reports .clean-report-panel[open] .clean-report-grid,
html body #reports .clean-report-panel[open] .upgraded-report-grid,
html body #reports .clean-report-panel[open] .submit-report,
html body #reports .clean-report-panel[open] #reportDetails {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Keep the weather type grid as a grid when open */
html body #reports .clean-report-panel[open] .clean-report-grid,
html body #reports .clean-report-panel[open] .upgraded-report-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}

/* Hide only when the clean panel is closed */
html body #reports .clean-report-panel:not([open]) #reportFormCard {
  display: none !important;
}

/* Make the blue summary button feel clickable */
.clean-report-panel summary span {
  cursor: pointer;
}

/* Small animation when the report panel opens */
.clean-report-panel[open] #reportFormCard {
  animation: cleanReportOpen 0.22s ease;
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Version 0.7.7.1 - Hide duplicate old Submitted Reports card */

#reports .submitted-reports-card:not(.clean-feed-card),
#reports .reports-feed-card:not(.clean-feed-card),
#reports .section-card:has(.report-feed):not(.clean-feed-card) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Keep the new clean Submitted Reports card visible */
#reports .clean-feed-card,
#reports .clean-feed-card #submittedReports,
#reports .clean-feed-card .report-feed {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* Version 0.8.1 - Install App card */

.install-app-card {
  display: grid;
  gap: 14px;
}

.install-app-preview {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 22px rgba(18, 78, 112, 0.08);
}

.install-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 213, 106, 0.45), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(231, 247, 255, 0.78));
  box-shadow:
    0 12px 26px rgba(21, 91, 123, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  font-size: 26px;
}

.install-app-preview strong {
  display: block;
  color: var(--blue-dark);
  font-size: 15px;
}

.install-app-preview small {
  display: block;
  margin-top: 3px;
  color: rgba(45, 84, 103, 0.74);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.install-app-btn {
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #1398d1, #07334f);
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  box-shadow:
    0 14px 30px rgba(7, 51, 79, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
  cursor: pointer;
}

.install-app-btn:active {
  transform: scale(0.97);
}

.install-app-btn:disabled {
  opacity: 0.68;
  cursor: not-allowed;
}

.install-app-status {
  margin: 0 !important;
  color: rgba(45, 84, 103, 0.76);
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.45;
}

/* Dark mode install card */
body.app-dark-mode .install-app-preview {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(142, 218, 255, 0.15) !important;
}

body.app-dark-mode .install-app-preview strong {
  color: #f6fcff !important;
}

body.app-dark-mode .install-app-preview small,
body.app-dark-mode .install-app-status {
  color: rgba(222, 244, 255, 0.72) !important;
}

body.app-dark-mode .install-icon {
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 213, 106, 0.22), transparent 42%),
    linear-gradient(145deg, rgba(23, 59, 82, 0.86), rgba(8, 29, 43, 0.7)) !important;
}
/* Version 0.9 - Alerts tab upgrade */

.alerts-status-card {
  overflow: hidden;
}

.alerts-status-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.alerts-status-top h3 {
  margin: 4px 0 6px;
  color: var(--blue-dark);
  font-size: 23px;
  letter-spacing: -0.04em;
}

.alerts-status-top p {
  margin: 0;
}

.alert-status-icon {
  width: 62px;
  height: 62px;
  min-width: 62px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 213, 106, 0.5), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(231, 247, 255, 0.64));
  box-shadow:
    0 14px 30px rgba(21, 91, 123, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  font-size: 30px;
}

.alert-status-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.alert-meta-pill {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  color: rgba(45, 84, 103, 0.82);
  font-size: 12px;
  font-weight: 900;
}

.alerts-filter-card {
  display: grid;
  gap: 12px;
}

.alert-county-select {
  width: 100%;
  border: none;
  border-radius: 20px;
  padding: 13px 14px;
  color: var(--blue-dark);
  font-weight: 900;
  background: rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 10px 22px rgba(18, 78, 112, 0.08);
}

.alert-refresh-btn {
  border: none;
  border-radius: 999px;
  padding: 13px 15px;
  background: linear-gradient(135deg, #1398d1, #07334f);
  color: #ffffff;
  font-weight: 900;
  box-shadow:
    0 14px 30px rgba(7, 51, 79, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  cursor: pointer;
}

.alert-refresh-btn:active {
  transform: scale(0.97);
}

.alerts-list {
  display: grid;
  gap: 13px;
  margin: 16px 0;
}

.alert-card {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.38));
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow:
    0 18px 42px rgba(18, 78, 112, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}

.alert-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 6px;
  border-radius: 999px;
}

.alert-card.warning::before {
  background: #ef4444;
}

.alert-card.watch::before {
  background: #facc15;
}

.alert-card.advisory::before {
  background: #a855f7;
}

.alert-card.statement::before {
  background: #38bdf8;
}

.alert-card.none::before {
  background: #4ade80;
}

.alert-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.alert-type-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.alert-type-badge.warning {
  background: rgba(239, 68, 68, 0.14);
  color: #991b1b;
}

.alert-type-badge.watch {
  background: rgba(250, 204, 21, 0.22);
  color: #854d0e;
}

.alert-type-badge.advisory {
  background: rgba(168, 85, 247, 0.15);
  color: #6b21a8;
}

.alert-type-badge.statement {
  background: rgba(56, 189, 248, 0.18);
  color: #075985;
}

.alert-type-badge.none {
  background: rgba(74, 222, 128, 0.18);
  color: #166534;
}

.alert-card-header small {
  color: rgba(45, 84, 103, 0.72);
  font-size: 12px;
  font-weight: 900;
}

.alert-card h3 {
  margin: 0 0 7px;
  color: var(--blue-dark);
  font-size: 19px;
  letter-spacing: -0.03em;
}

.alert-card p {
  margin: 0;
  color: rgba(45, 84, 103, 0.78);
  line-height: 1.45;
}

.alert-card-meta {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.alert-card-meta span {
  color: rgba(45, 84, 103, 0.82);
  font-size: 12px;
  font-weight: 850;
}

.alert-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 13px;
}

.alert-action-btn {
  border: none;
  border-radius: 999px;
  padding: 9px 11px;
  background: rgba(255, 255, 255, 0.66);
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.alert-preferences-card {
  display: grid;
  gap: 13px;
}

.alert-pref-list {
  display: grid;
  gap: 10px;
}

.alert-pref-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 22px rgba(18, 78, 112, 0.08);
}

.alert-pref-row span {
  display: grid;
  gap: 3px;
}

.alert-pref-row strong {
  color: var(--blue-dark);
  font-size: 14px;
}

.alert-pref-row small {
  color: rgba(45, 84, 103, 0.72);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.alert-pref-toggle {
  width: 22px;
  height: 22px;
  accent-color: #1398d1;
}

.alert-pref-note {
  margin: 0 !important;
  color: rgba(45, 84, 103, 0.76);
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.45;
}

.nws-coming-card {
  margin-bottom: 20px;
}

/* Dark mode alerts */
body.app-dark-mode .alerts-status-top h3,
body.app-dark-mode .alert-card h3,
body.app-dark-mode .alert-pref-row strong {
  color: #f6fcff !important;
}

body.app-dark-mode .alert-card,
body.app-dark-mode .alert-pref-row,
body.app-dark-mode .alert-meta-pill {
  background:
    linear-gradient(
      145deg,
      rgba(23, 59, 82, 0.74),
      rgba(8, 29, 43, 0.58)
    ) !important;
  border-color: rgba(142, 218, 255, 0.16) !important;
}

body.app-dark-mode .alert-card p,
body.app-dark-mode .alert-card-meta span,
body.app-dark-mode .alert-card-header small,
body.app-dark-mode .alert-pref-row small,
body.app-dark-mode .alert-pref-note,
body.app-dark-mode .alert-meta-pill {
  color: rgba(222, 244, 255, 0.72) !important;
}

body.app-dark-mode .alert-county-select {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(142, 218, 255, 0.15) !important;
  color: #f6fcff !important;
}

body.app-dark-mode .alert-county-select option {
  background: #ffffff;
  color: #082436;
}

body.app-dark-mode .alert-action-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f6fcff !important;
}
/* Version 0.9.1 - Alerts safety polish and default county */

.default-alert-county-card {
  display: grid;
  gap: 12px;
}

.alert-safety-card,
.alert-education-card {
  display: grid;
  gap: 14px;
}

.alert-safety-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.alert-safety-item {
  position: relative;
  overflow: hidden;
  min-height: 128px;
  padding: 14px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 22px rgba(18, 78, 112, 0.08);
}

.alert-safety-item::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -34px;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  opacity: 0.22;
}

.alert-safety-item.danger::after {
  background: #ef4444;
}

.alert-safety-item.warning::after {
  background: #f97316;
}

.alert-safety-item.flood::after {
  background: #38bdf8;
}

.alert-safety-item.winter::after {
  background: #a5f3fc;
}

.alert-safety-item span {
  display: block;
  margin-bottom: 8px;
  font-size: 25px;
}

.alert-safety-item strong {
  display: block;
  color: var(--blue-dark);
  font-size: 14px;
  line-height: 1.2;
}

.alert-safety-item small {
  display: block;
  margin-top: 6px;
  color: rgba(45, 84, 103, 0.74);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.alert-meaning-list {
  display: grid;
  gap: 10px;
}

.alert-meaning-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 22px rgba(18, 78, 112, 0.08);
}

.alert-dot {
  width: 14px;
  height: 14px;
  min-width: 14px;
  border-radius: 999px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.46);
}

.watch-dot {
  background: #facc15;
}

.warning-dot {
  background: #ef4444;
}

.advisory-dot {
  background: #a855f7;
}

.statement-dot {
  background: #38bdf8;
}

.alert-meaning-row strong {
  display: block;
  color: var(--blue-dark);
  font-size: 14px;
}

.alert-meaning-row small {
  display: block;
  margin-top: 3px;
  color: rgba(45, 84, 103, 0.74);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

/* Dark mode alerts polish */
body.app-dark-mode .alert-safety-item,
body.app-dark-mode .alert-meaning-row {
  background:
    linear-gradient(
      145deg,
      rgba(23, 59, 82, 0.74),
      rgba(8, 29, 43, 0.58)
    ) !important;
  border-color: rgba(142, 218, 255, 0.16) !important;
}

body.app-dark-mode .alert-safety-item strong,
body.app-dark-mode .alert-meaning-row strong {
  color: #f6fcff !important;
}

body.app-dark-mode .alert-safety-item small,
body.app-dark-mode .alert-meaning-row small {
  color: rgba(222, 244, 255, 0.72) !important;
}

body.app-dark-mode .alert-dot {
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08);
}

@media (max-width: 365px) {
  .alert-safety-grid {
    grid-template-columns: 1fr;
  }
}
/* Version 1.0 - Live NWS alerts connection */

.live-alert-source {
  display: inline-flex;
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.54);
  color: rgba(45, 84, 103, 0.78);
  font-size: 12px;
  font-weight: 900;
}

.alert-card.live-nws-alert {
  animation: liveAlertIn 0.22s ease;
}

@keyframes liveAlertIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.alert-live-details {
  display: none;
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.62);
}

.alert-card.details-open .alert-live-details {
  display: block;
}

.alert-live-details strong {
  display: block;
  margin-bottom: 5px;
  color: var(--blue-dark);
  font-size: 13px;
}

.alert-live-details p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
}

.alert-loading-card {
  padding: 16px;
  border-radius: 28px;
}

body.app-dark-mode .live-alert-source,
body.app-dark-mode .alert-live-details {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(142, 218, 255, 0.15) !important;
  color: rgba(222, 244, 255, 0.74) !important;
}

body.app-dark-mode .alert-live-details strong {
  color: #f6fcff !important;
}
/* Version 1.1 - Home live alert status */

.home-live-alert-card {
  display: grid;
  gap: 14px;
}

.home-alert-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.home-alert-copy {
  display: grid;
  gap: 5px;
}

.home-alert-copy .eyebrow {
  margin: 0;
}

.home-alert-copy h3 {
  margin: 0;
  color: var(--blue-dark);
  font-size: 22px;
  letter-spacing: -0.04em;
}

.home-alert-copy p {
  margin: 0;
  color: rgba(45, 84, 103, 0.76);
  line-height: 1.45;
}

.home-alert-icon {
  width: 62px;
  height: 62px;
  min-width: 62px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 213, 106, 0.5), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(231, 247, 255, 0.64));
  box-shadow:
    0 14px 30px rgba(21, 91, 123, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  font-size: 30px;
}

.home-alert-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-alert-pill {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.54);
  color: rgba(45, 84, 103, 0.78);
  font-size: 12px;
  font-weight: 900;
}

.home-alert-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.home-alert-btn {
  border: none;
  border-radius: 999px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.home-alert-btn.primary {
  background: linear-gradient(135deg, #1398d1, #07334f);
  color: #ffffff;
  box-shadow:
    0 14px 30px rgba(7, 51, 79, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.home-alert-btn.secondary {
  background: rgba(255, 255, 255, 0.62);
  color: var(--blue-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(18, 78, 112, 0.08);
}

.home-alert-btn:active {
  transform: scale(0.97);
}

.home-live-alert-card.alert-clear .home-alert-icon {
  background:
    radial-gradient(circle at 70% 25%, rgba(74, 222, 128, 0.38), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(231, 247, 255, 0.64));
}

.home-live-alert-card.alert-active .home-alert-icon {
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 213, 106, 0.5), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 244, 214, 0.68));
}

.home-live-alert-card.alert-warning .home-alert-icon {
  background:
    radial-gradient(circle at 70% 25%, rgba(239, 68, 68, 0.3), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 226, 226, 0.68));
}

body.app-dark-mode .home-alert-copy h3 {
  color: #f6fcff !important;
}

body.app-dark-mode .home-alert-copy p,
body.app-dark-mode .home-alert-pill {
  color: rgba(222, 244, 255, 0.72) !important;
}

body.app-dark-mode .home-alert-pill,
body.app-dark-mode .home-alert-btn.secondary {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #f6fcff !important;
  border: 1px solid rgba(142, 218, 255, 0.15);
}

@media (max-width: 365px) {
  .home-alert-main {
    align-items: flex-start;
  }

  .home-alert-actions {
    grid-template-columns: 1fr;
  }
}
/* Version 1.2 - Radar tab upgrade */

.radar-hero-card,
.radar-preview-card,
.radar-region-card,
.radar-layers-card {
  display: grid;
  gap: 14px;
}

.radar-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.radar-hero-top h3 {
  margin: 4px 0 6px;
  color: var(--blue-dark);
  font-size: 24px;
  letter-spacing: -0.04em;
}

.radar-hero-top p {
  margin: 0;
  line-height: 1.45;
}

.radar-hero-icon {
  width: 64px;
  height: 64px;
  min-width: 64px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background:
    radial-gradient(circle at 70% 25%, rgba(116, 215, 255, 0.42), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(231, 247, 255, 0.64));
  box-shadow:
    0 14px 30px rgba(21, 91, 123, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  font-size: 30px;
}

.radar-action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.radar-primary-btn,
.radar-secondary-btn {
  border: none;
  border-radius: 999px;
  padding: 13px 15px;
  font-weight: 900;
  cursor: pointer;
}

.radar-primary-btn {
  background: linear-gradient(135deg, #1398d1, #07334f);
  color: #ffffff;
  box-shadow:
    0 14px 30px rgba(7, 51, 79, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.radar-secondary-btn {
  background: rgba(255, 255, 255, 0.62);
  color: var(--blue-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(18, 78, 112, 0.08);
}

.radar-primary-btn:active,
.radar-secondary-btn:active,
.radar-region-btn:active {
  transform: scale(0.97);
}

.radar-preview-window {
  position: relative;
  height: 255px;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 50%, rgba(19, 152, 209, 0.18), transparent 18%),
    linear-gradient(145deg, rgba(5, 40, 63, 0.9), rgba(8, 65, 91, 0.84));
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 18px 42px rgba(18, 78, 112, 0.18);
}

.radar-preview-window::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 24px;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.72;
}

.radar-sweep {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220px;
  height: 220px;
  transform-origin: 0 0;
  background:
    conic-gradient(
      from 0deg,
      rgba(74, 222, 128, 0.42),
      rgba(56, 189, 248, 0.12),
      transparent 44deg
    );
  clip-path: polygon(0 0, 100% 0, 0 100%);
  animation: radarSweepSpin 3.8s linear infinite;
  opacity: 0.75;
}

@keyframes radarSweepSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.radar-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  border: 1px solid rgba(167, 233, 255, 0.26);
  transform: translate(-50%, -50%);
}

.ring-one {
  width: 78px;
  height: 78px;
}

.ring-two {
  width: 145px;
  height: 145px;
}

.ring-three {
  width: 210px;
  height: 210px;
}

.radar-md-shape {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 82px;
  height: 48px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) rotate(-8deg);
  border-radius: 18px 28px 20px 26px;
  background: rgba(255, 255, 255, 0.86);
  color: #07334f;
  font-weight: 1000;
  letter-spacing: -0.06em;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.radar-cell {
  position: absolute;
  border-radius: 999px;
  filter: blur(0.3px);
  opacity: 0.9;
}

.radar-cell-one {
  width: 54px;
  height: 36px;
  left: 36px;
  top: 62px;
  background: rgba(74, 222, 128, 0.72);
}

.radar-cell-two {
  width: 78px;
  height: 42px;
  right: 44px;
  top: 96px;
  background: rgba(250, 204, 21, 0.66);
}

.radar-cell-three {
  width: 48px;
  height: 35px;
  left: 94px;
  bottom: 54px;
  background: rgba(56, 189, 248, 0.7);
}

.radar-preview-note,
.radar-layer-note {
  margin: 0 !important;
  color: rgba(45, 84, 103, 0.76);
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.45;
}

.radar-region-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.radar-region-btn {
  border: none;
  border-radius: 18px;
  min-height: 46px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--blue-dark);
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(18, 78, 112, 0.08);
  cursor: pointer;
}

.radar-region-btn.active {
  background: linear-gradient(135deg, #1398d1, #07334f);
  color: #ffffff;
}

.radar-layer-list {
  display: grid;
  gap: 10px;
}

.radar-layer-list label {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.68);
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 900;
}

.radar-layer-list input {
  width: 20px;
  height: 20px;
  accent-color: #1398d1;
}

/* Dark mode radar */
body.app-dark-mode .radar-hero-top h3,
body.app-dark-mode .radar-region-btn,
body.app-dark-mode .radar-layer-list label {
  color: #f6fcff !important;
}

body.app-dark-mode .radar-secondary-btn,
body.app-dark-mode .radar-region-btn,
body.app-dark-mode .radar-layer-list label {
  background: rgba(255, 255, 255, 0.09) !important;
  border: 1px solid rgba(142, 218, 255, 0.15);
}

body.app-dark-mode .radar-preview-note,
body.app-dark-mode .radar-layer-note {
  color: rgba(222, 244, 255, 0.72) !important;
}

body.app-dark-mode .radar-region-btn.active {
  background: linear-gradient(135deg, #1398d1, #07334f) !important;
}

body.app-dark-mode .radar-preview-window {
  background:
    radial-gradient(circle at 50% 50%, rgba(19, 152, 209, 0.18), transparent 18%),
    linear-gradient(145deg, rgba(3, 17, 27, 0.92), rgba(7, 33, 48, 0.88)) !important;
}

@media (max-width: 365px) {
  .radar-region-grid {
    grid-template-columns: 1fr;
  }
}
/* Version 1.3 - Final app polish and launch info */

.app-info-card,
.launch-checklist-card {
  display: grid;
  gap: 14px;
}

.app-version-badge {
  display: inline-flex;
  width: fit-content;
  padding: 8px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1398d1, #07334f);
  color: #ffffff;
  font-size: 12px;
  font-weight: 1000;
  box-shadow:
    0 12px 24px rgba(7, 51, 79, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.app-info-list {
  display: grid;
  gap: 10px;
}

.app-info-row,
.launch-check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 22px rgba(18, 78, 112, 0.08);
}

.app-info-row span,
.launch-check-row span {
  font-size: 20px;
  line-height: 1;
}

.app-info-row div,
.launch-check-row div {
  display: grid;
  gap: 3px;
}

.app-info-row strong,
.launch-check-row strong {
  color: var(--blue-dark);
  font-size: 14px;
}

.app-info-row small,
.launch-check-row small {
  color: rgba(45, 84, 103, 0.74);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.launch-check-list {
  display: grid;
  gap: 10px;
}

.launch-check-row.good span {
  color: #16a34a;
}

.launch-check-row.warn span {
  color: #f59e0b;
}

.launch-check-row.bad span {
  color: #ef4444;
}

.app-disclaimer {
  margin: 0 !important;
  padding: 13px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.62);
  color: rgba(45, 84, 103, 0.78) !important;
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.45;
}

.launch-refresh-btn {
  border: none;
  border-radius: 999px;
  padding: 13px 15px;
  background: linear-gradient(135deg, #1398d1, #07334f);
  color: #ffffff;
  font-weight: 900;
  box-shadow:
    0 14px 30px rgba(7, 51, 79, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  cursor: pointer;
}

.launch-refresh-btn:active {
  transform: scale(0.97);
}

/* Final scrolling safety */
.app-content {
  overflow: visible;
}

.screen.active {
  min-height: auto;
  padding-bottom: calc(130px + env(safe-area-inset-bottom));
}

/* Better mobile tap feel */
button,
.quick-card,
.region-card,
.blog-post-card,
.alert-card,
.radar-region-btn {
  -webkit-tap-highlight-color: transparent;
}

/* Dark mode final polish */
body.app-dark-mode .app-info-row,
body.app-dark-mode .launch-check-row,
body.app-dark-mode .app-disclaimer {
  background:
    linear-gradient(
      145deg,
      rgba(23, 59, 82, 0.74),
      rgba(8, 29, 43, 0.58)
    ) !important;
  border-color: rgba(142, 218, 255, 0.16) !important;
}

body.app-dark-mode .app-info-row strong,
body.app-dark-mode .launch-check-row strong {
  color: #f6fcff !important;
}

body.app-dark-mode .app-info-row small,
body.app-dark-mode .launch-check-row small,
body.app-dark-mode .app-disclaimer {
  color: rgba(222, 244, 255, 0.72) !important;
}
/* Version 1.4 - Live NWS forecast data */

.live-forecast-card {
  display: grid;
  gap: 14px;
}

.live-forecast-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.live-forecast-top h3 {
  margin: 4px 0 6px;
  color: var(--blue-dark);
  font-size: 24px;
  letter-spacing: -0.04em;
}

.live-forecast-top p {
  margin: 0;
  line-height: 1.45;
}

.live-forecast-icon {
  width: 64px;
  height: 64px;
  min-width: 64px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 213, 106, 0.5), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(231, 247, 255, 0.64));
  box-shadow:
    0 14px 30px rgba(21, 91, 123, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  font-size: 30px;
}

.live-forecast-controls {
  display: grid;
  gap: 10px;
}

.live-forecast-select {
  width: 100%;
  border: none;
  border-radius: 20px;
  padding: 13px 14px;
  color: var(--blue-dark);
  font-weight: 900;
  background: rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 10px 22px rgba(18, 78, 112, 0.08);
}

.live-forecast-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.live-forecast-btn {
  border: none;
  border-radius: 999px;
  padding: 13px 15px;
  font-weight: 900;
  cursor: pointer;
}

.live-forecast-btn.primary {
  background: linear-gradient(135deg, #1398d1, #07334f);
  color: #ffffff;
  box-shadow:
    0 14px 30px rgba(7, 51, 79, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.live-forecast-btn.secondary {
  background: rgba(255, 255, 255, 0.62);
  color: var(--blue-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(18, 78, 112, 0.08);
}

.live-forecast-btn:active {
  transform: scale(0.97);
}

.live-forecast-status {
  margin: 0 !important;
  color: rgba(45, 84, 103, 0.76);
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.45;
}

.live-forecast-current {
  padding: 16px;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.36));
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 12px 28px rgba(18, 78, 112, 0.1);
}

.live-forecast-current h4 {
  margin: 0 0 7px;
  color: var(--blue-dark);
  font-size: 20px;
  letter-spacing: -0.03em;
}

.live-forecast-current p {
  margin: 0;
  color: rgba(45, 84, 103, 0.78);
  line-height: 1.45;
}

.live-forecast-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.live-forecast-pill {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.54);
  color: rgba(45, 84, 103, 0.8);
  font-size: 12px;
  font-weight: 900;
}

.live-forecast-periods {
  display: grid;
  gap: 10px;
}

.live-period-card {
  display: grid;
  gap: 5px;
  padding: 13px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 22px rgba(18, 78, 112, 0.08);
}

.live-period-card strong {
  color: var(--blue-dark);
  font-size: 14px;
}

.live-period-card small {
  color: rgba(45, 84, 103, 0.74);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.live-forecast-disclaimer {
  margin: 0 !important;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.62);
  color: rgba(45, 84, 103, 0.76) !important;
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.45;
}

/* Dark mode live forecast */
body.app-dark-mode .live-forecast-top h3,
body.app-dark-mode .live-forecast-current h4,
body.app-dark-mode .live-period-card strong {
  color: #f6fcff !important;
}

body.app-dark-mode .live-forecast-select,
body.app-dark-mode .live-forecast-btn.secondary,
body.app-dark-mode .live-forecast-current,
body.app-dark-mode .live-period-card,
body.app-dark-mode .live-forecast-pill,
body.app-dark-mode .live-forecast-disclaimer {
  background:
    linear-gradient(
      145deg,
      rgba(23, 59, 82, 0.74),
      rgba(8, 29, 43, 0.58)
    ) !important;
  border-color: rgba(142, 218, 255, 0.16) !important;
  color: #f6fcff !important;
}

body.app-dark-mode .live-forecast-status,
body.app-dark-mode .live-forecast-current p,
body.app-dark-mode .live-period-card small,
body.app-dark-mode .live-forecast-pill,
body.app-dark-mode .live-forecast-disclaimer {
  color: rgba(222, 244, 255, 0.72) !important;
}

body.app-dark-mode .live-forecast-select option {
  background: #ffffff;
  color: #082436;
}

@media (max-width: 365px) {
  .live-forecast-actions {
    grid-template-columns: 1fr;
  }
}
/* Version 1.5 - Home live forecast preview */

.home-forecast-card {
  display: grid;
  gap: 14px;
}

.home-forecast-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.home-forecast-copy {
  display: grid;
  gap: 5px;
}

.home-forecast-copy .eyebrow {
  margin: 0;
}

.home-forecast-copy h3 {
  margin: 0;
  color: var(--blue-dark);
  font-size: 22px;
  letter-spacing: -0.04em;
}

.home-forecast-copy p {
  margin: 0;
  color: rgba(45, 84, 103, 0.76);
  line-height: 1.45;
}

.home-forecast-icon {
  width: 62px;
  height: 62px;
  min-width: 62px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 213, 106, 0.5), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(231, 247, 255, 0.64));
  box-shadow:
    0 14px 30px rgba(21, 91, 123, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  font-size: 30px;
}

.home-forecast-controls {
  display: grid;
  gap: 10px;
}

.home-forecast-select {
  width: 100%;
  border: none;
  border-radius: 20px;
  padding: 13px 14px;
  color: var(--blue-dark);
  font-weight: 900;
  background: rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 10px 22px rgba(18, 78, 112, 0.08);
}

.home-forecast-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.home-forecast-btn {
  border: none;
  border-radius: 999px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.home-forecast-btn.primary {
  background: linear-gradient(135deg, #1398d1, #07334f);
  color: #ffffff;
  box-shadow:
    0 14px 30px rgba(7, 51, 79, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.home-forecast-btn.secondary {
  background: rgba(255, 255, 255, 0.62);
  color: var(--blue-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(18, 78, 112, 0.08);
}

.home-forecast-btn:active {
  transform: scale(0.97);
}

.home-forecast-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-forecast-pill {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.54);
  color: rgba(45, 84, 103, 0.8);
  font-size: 12px;
  font-weight: 900;
}

.home-forecast-next {
  display: grid;
  gap: 9px;
}

.home-forecast-mini {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 22px rgba(18, 78, 112, 0.08);
}

.home-forecast-mini strong {
  color: var(--blue-dark);
  font-size: 14px;
}

.home-forecast-mini small {
  color: rgba(45, 84, 103, 0.74);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.home-forecast-status {
  margin: 0 !important;
  color: rgba(45, 84, 103, 0.76);
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.45;
}

/* Dark mode home forecast */
body.app-dark-mode .home-forecast-copy h3,
body.app-dark-mode .home-forecast-mini strong {
  color: #f6fcff !important;
}

body.app-dark-mode .home-forecast-copy p,
body.app-dark-mode .home-forecast-status,
body.app-dark-mode .home-forecast-pill,
body.app-dark-mode .home-forecast-mini small {
  color: rgba(222, 244, 255, 0.72) !important;
}

body.app-dark-mode .home-forecast-select,
body.app-dark-mode .home-forecast-btn.secondary,
body.app-dark-mode .home-forecast-pill,
body.app-dark-mode .home-forecast-mini {
  background:
    linear-gradient(
      145deg,
      rgba(23, 59, 82, 0.74),
      rgba(8, 29, 43, 0.58)
    ) !important;
  border-color: rgba(142, 218, 255, 0.16) !important;
  color: #f6fcff !important;
}

body.app-dark-mode .home-forecast-select option {
  background: #ffffff;
  color: #082436;
}

@media (max-width: 365px) {
  .home-forecast-main {
    align-items: flex-start;
  }

  .home-forecast-actions {
    grid-template-columns: 1fr;
  }
}
/* Version 1.6 - Reports center polish and saved local feed */

.reports-status-card,
.report-tips-card {
  display: grid;
  gap: 14px;
}

.reports-status-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.reports-status-copy {
  display: grid;
  gap: 5px;
}

.reports-status-copy .eyebrow {
  margin: 0;
}

.reports-status-copy h3 {
  margin: 0;
  color: var(--blue-dark);
  font-size: 22px;
  letter-spacing: -0.04em;
}

.reports-status-copy p {
  margin: 0;
  color: rgba(45, 84, 103, 0.76);
  line-height: 1.45;
}

.reports-status-icon {
  width: 62px;
  height: 62px;
  min-width: 62px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background:
    radial-gradient(circle at 70% 25%, rgba(116, 215, 255, 0.42), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(231, 247, 255, 0.64));
  box-shadow:
    0 14px 30px rgba(21, 91, 123, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  font-size: 30px;
}

.reports-status-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reports-status-pill {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.54);
  color: rgba(45, 84, 103, 0.8);
  font-size: 12px;
  font-weight: 900;
}

.reports-status-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.reports-status-btn {
  border: none;
  border-radius: 999px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.reports-status-btn.primary {
  background: linear-gradient(135deg, #1398d1, #07334f);
  color: #ffffff;
  box-shadow:
    0 14px 30px rgba(7, 51, 79, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.reports-status-btn.secondary {
  background: rgba(255, 255, 255, 0.62);
  color: var(--blue-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(18, 78, 112, 0.08);
}

.reports-status-btn.danger {
  grid-column: 1 / -1;
  background: rgba(239, 68, 68, 0.12);
  color: #991b1b;
  border: 1px solid rgba(239, 68, 68, 0.18);
}

.reports-status-btn:active {
  transform: scale(0.97);
}

.report-tips-list {
  display: grid;
  gap: 10px;
}

.report-tip-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 22px rgba(18, 78, 112, 0.08);
}

.report-tip-row span {
  font-size: 20px;
  line-height: 1;
}

.report-tip-row div {
  display: grid;
  gap: 3px;
}

.report-tip-row strong {
  color: var(--blue-dark);
  font-size: 14px;
}

.report-tip-row small {
  color: rgba(45, 84, 103, 0.74);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.reports-saved-note {
  margin: 0 !important;
  color: rgba(45, 84, 103, 0.76);
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.45;
}

/* Dark mode reports polish */
body.app-dark-mode .reports-status-copy h3,
body.app-dark-mode .report-tip-row strong {
  color: #f6fcff !important;
}

body.app-dark-mode .reports-status-copy p,
body.app-dark-mode .reports-status-pill,
body.app-dark-mode .report-tip-row small,
body.app-dark-mode .reports-saved-note {
  color: rgba(222, 244, 255, 0.72) !important;
}

body.app-dark-mode .reports-status-pill,
body.app-dark-mode .reports-status-btn.secondary,
body.app-dark-mode .report-tip-row {
  background:
    linear-gradient(
      145deg,
      rgba(23, 59, 82, 0.74),
      rgba(8, 29, 43, 0.58)
    ) !important;
  border-color: rgba(142, 218, 255, 0.16) !important;
  color: #f6fcff !important;
}

body.app-dark-mode .reports-status-btn.danger {
  background: rgba(239, 68, 68, 0.16) !important;
  color: #fecaca !important;
  border-color: rgba(239, 68, 68, 0.22) !important;
}

@media (max-width: 365px) {
  .reports-status-main {
    align-items: flex-start;
  }

  .reports-status-actions {
    grid-template-columns: 1fr;
  }

  .reports-status-btn.danger {
    grid-column: auto;
  }
}
/* Version 1.7 - Share app and feedback center */

.share-app-card {
  display: grid;
  gap: 14px;
}

.share-app-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.share-app-copy {
  display: grid;
  gap: 5px;
}

.share-app-copy .eyebrow {
  margin: 0;
}

.share-app-copy h3 {
  margin: 0;
  color: var(--blue-dark);
  font-size: 22px;
  letter-spacing: -0.04em;
}

.share-app-copy p {
  margin: 0;
  color: rgba(45, 84, 103, 0.76);
  line-height: 1.45;
}

.share-app-icon {
  width: 62px;
  height: 62px;
  min-width: 62px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 213, 106, 0.5), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(231, 247, 255, 0.64));
  box-shadow:
    0 14px 30px rgba(21, 91, 123, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  font-size: 30px;
}

.share-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.share-action-btn {
  border: none;
  border-radius: 999px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.share-action-btn.primary {
  background: linear-gradient(135deg, #1398d1, #07334f);
  color: #ffffff;
  box-shadow:
    0 14px 30px rgba(7, 51, 79, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.share-action-btn.secondary {
  background: rgba(255, 255, 255, 0.62);
  color: var(--blue-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(18, 78, 112, 0.08);
}

.share-action-btn:active {
  transform: scale(0.97);
}

.share-support-list {
  display: grid;
  gap: 10px;
}

.share-support-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 22px rgba(18, 78, 112, 0.08);
}

.share-support-row span {
  font-size: 20px;
  line-height: 1;
}

.share-support-row div {
  display: grid;
  gap: 3px;
}

.share-support-row strong {
  color: var(--blue-dark);
  font-size: 14px;
}

.share-support-row small {
  color: rgba(45, 84, 103, 0.74);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.share-app-note {
  margin: 0 !important;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.62);
  color: rgba(45, 84, 103, 0.76) !important;
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.45;
}

/* Dark mode share center */
body.app-dark-mode .share-app-copy h3,
body.app-dark-mode .share-support-row strong {
  color: #f6fcff !important;
}

body.app-dark-mode .share-app-copy p,
body.app-dark-mode .share-support-row small,
body.app-dark-mode .share-app-note {
  color: rgba(222, 244, 255, 0.72) !important;
}

body.app-dark-mode .share-action-btn.secondary,
body.app-dark-mode .share-support-row,
body.app-dark-mode .share-app-note {
  background:
    linear-gradient(
      145deg,
      rgba(23, 59, 82, 0.74),
      rgba(8, 29, 43, 0.58)
    ) !important;
  border-color: rgba(142, 218, 255, 0.16) !important;
  color: #f6fcff !important;
}

@media (max-width: 365px) {
  .share-app-hero {
    align-items: flex-start;
  }

  .share-action-grid {
    grid-template-columns: 1fr;
  }
}
/* Version 1.8 - Live hourly forecast timeline */

.hourly-forecast-card {
  display: grid;
  gap: 14px;
}

.hourly-forecast-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.hourly-forecast-copy {
  display: grid;
  gap: 5px;
}

.hourly-forecast-copy .eyebrow {
  margin: 0;
}

.hourly-forecast-copy h3 {
  margin: 0;
  color: var(--blue-dark);
  font-size: 22px;
  letter-spacing: -0.04em;
}

.hourly-forecast-copy p {
  margin: 0;
  color: rgba(45, 84, 103, 0.76);
  line-height: 1.45;
}

.hourly-forecast-icon {
  width: 62px;
  height: 62px;
  min-width: 62px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 213, 106, 0.5), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(231, 247, 255, 0.64));
  box-shadow:
    0 14px 30px rgba(21, 91, 123, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  font-size: 30px;
}

.hourly-forecast-controls {
  display: grid;
  gap: 10px;
}

.hourly-forecast-select {
  width: 100%;
  border: none;
  border-radius: 20px;
  padding: 13px 14px;
  color: var(--blue-dark);
  font-weight: 900;
  background: rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 10px 22px rgba(18, 78, 112, 0.08);
}

.hourly-refresh-btn {
  border: none;
  border-radius: 999px;
  padding: 13px 15px;
  background: linear-gradient(135deg, #1398d1, #07334f);
  color: #ffffff;
  font-weight: 900;
  box-shadow:
    0 14px 30px rgba(7, 51, 79, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  cursor: pointer;
}

.hourly-refresh-btn:active {
  transform: scale(0.97);
}

.hourly-forecast-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.hourly-forecast-strip::-webkit-scrollbar {
  height: 6px;
}

.hourly-forecast-strip::-webkit-scrollbar-thumb {
  background: rgba(19, 152, 209, 0.28);
  border-radius: 999px;
}

.hourly-card {
  min-width: 138px;
  scroll-snap-align: start;
  display: grid;
  gap: 7px;
  padding: 13px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 22px rgba(18, 78, 112, 0.08);
}

.hourly-card .hourly-time {
  color: rgba(45, 84, 103, 0.78);
  font-size: 12px;
  font-weight: 900;
}

.hourly-card .hourly-icon {
  font-size: 25px;
}

.hourly-card strong {
  color: var(--blue-dark);
  font-size: 22px;
  letter-spacing: -0.04em;
}

.hourly-card small {
  color: rgba(45, 84, 103, 0.74);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.hourly-forecast-status {
  margin: 0 !important;
  color: rgba(45, 84, 103, 0.76);
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.45;
}

/* Dark mode hourly forecast */
body.app-dark-mode .hourly-forecast-copy h3,
body.app-dark-mode .hourly-card strong {
  color: #f6fcff !important;
}

body.app-dark-mode .hourly-forecast-copy p,
body.app-dark-mode .hourly-card .hourly-time,
body.app-dark-mode .hourly-card small,
body.app-dark-mode .hourly-forecast-status {
  color: rgba(222, 244, 255, 0.72) !important;
}

body.app-dark-mode .hourly-forecast-select,
body.app-dark-mode .hourly-card {
  background:
    linear-gradient(
      145deg,
      rgba(23, 59, 82, 0.74),
      rgba(8, 29, 43, 0.58)
    ) !important;
  border-color: rgba(142, 218, 255, 0.16) !important;
  color: #f6fcff !important;
}

body.app-dark-mode .hourly-forecast-select option {
  background: #ffffff;
  color: #082436;
}
/* Version 1.9 - Live current conditions */

.current-conditions-card {
  display: grid;
  gap: 14px;
}

.current-conditions-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.current-conditions-copy {
  display: grid;
  gap: 5px;
}

.current-conditions-copy .eyebrow {
  margin: 0;
}

.current-conditions-copy h3 {
  margin: 0;
  color: var(--blue-dark);
  font-size: 22px;
  letter-spacing: -0.04em;
}

.current-conditions-copy p {
  margin: 0;
  color: rgba(45, 84, 103, 0.76);
  line-height: 1.45;
}

.current-conditions-icon {
  width: 62px;
  height: 62px;
  min-width: 62px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 213, 106, 0.5), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(231, 247, 255, 0.64));
  box-shadow:
    0 14px 30px rgba(21, 91, 123, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  font-size: 30px;
}

.current-conditions-controls {
  display: grid;
  gap: 10px;
}

.current-conditions-select {
  width: 100%;
  border: none;
  border-radius: 20px;
  padding: 13px 14px;
  color: var(--blue-dark);
  font-weight: 900;
  background: rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 10px 22px rgba(18, 78, 112, 0.08);
}

.current-conditions-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.current-conditions-btn {
  border: none;
  border-radius: 999px;
  padding: 13px 15px;
  font-weight: 900;
  cursor: pointer;
}

.current-conditions-btn.primary {
  background: linear-gradient(135deg, #1398d1, #07334f);
  color: #ffffff;
  box-shadow:
    0 14px 30px rgba(7, 51, 79, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.current-conditions-btn.secondary {
  background: rgba(255, 255, 255, 0.62);
  color: var(--blue-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(18, 78, 112, 0.08);
}

.current-conditions-btn:active {
  transform: scale(0.97);
}

.current-conditions-main {
  padding: 16px;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.36));
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 12px 28px rgba(18, 78, 112, 0.1);
}

.current-conditions-temp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.current-conditions-temp {
  color: var(--blue-dark);
  font-size: 46px;
  font-weight: 1000;
  letter-spacing: -0.08em;
  line-height: 1;
}

.current-conditions-label {
  display: grid;
  gap: 4px;
  text-align: right;
}

.current-conditions-label strong {
  color: var(--blue-dark);
  font-size: 15px;
}

.current-conditions-label small {
  color: rgba(45, 84, 103, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.current-conditions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.current-condition-mini {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.68);
}

.current-condition-mini span {
  color: rgba(45, 84, 103, 0.72);
  font-size: 12px;
  font-weight: 900;
}

.current-condition-mini strong {
  color: var(--blue-dark);
  font-size: 15px;
}

.current-conditions-status {
  margin: 0 !important;
  color: rgba(45, 84, 103, 0.76);
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.45;
}

/* Dark mode current conditions */
body.app-dark-mode .current-conditions-copy h3,
body.app-dark-mode .current-conditions-temp,
body.app-dark-mode .current-conditions-label strong,
body.app-dark-mode .current-condition-mini strong {
  color: #f6fcff !important;
}

body.app-dark-mode .current-conditions-copy p,
body.app-dark-mode .current-conditions-label small,
body.app-dark-mode .current-condition-mini span,
body.app-dark-mode .current-conditions-status {
  color: rgba(222, 244, 255, 0.72) !important;
}

body.app-dark-mode .current-conditions-select,
body.app-dark-mode .current-conditions-btn.secondary,
body.app-dark-mode .current-conditions-main,
body.app-dark-mode .current-condition-mini {
  background:
    linear-gradient(
      145deg,
      rgba(23, 59, 82, 0.74),
      rgba(8, 29, 43, 0.58)
    ) !important;
  border-color: rgba(142, 218, 255, 0.16) !important;
  color: #f6fcff !important;
}

body.app-dark-mode .current-conditions-select option {
  background: #ffffff;
  color: #082436;
}

@media (max-width: 365px) {
  .current-conditions-top {
    align-items: flex-start;
  }

  .current-conditions-actions,
  .current-conditions-grid {
    grid-template-columns: 1fr;
  }

  .current-conditions-temp-row {
    align-items: flex-start;
  }
}
/* Version 2.0.1 - Reduce extra bottom spacing above bottom navigation */

.screen.active {
  padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
}

.app-content {
  padding-bottom: 0 !important;
}

@media (min-width: 700px) {
  .screen.active {
    padding-bottom: 92px !important;
  }
}

@media (max-width: 430px) {
  .screen.active {
    padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  }
}
/* Version 2.1.6 - Safe home layout cleanup */

/* Remove empty More Home panel/chip */
#homeMorePanel,
#homeDashboardNav [data-home-panel="homeMorePanel"] {
  display: none !important;
}

/* Keep home spacing clean */
#home .section-card {
  margin-bottom: 14px;
}

/* Make the Home forecast card compact by default */
#homeLiveForecastCard.home-forecast-safe-compact:not(.expanded) .home-forecast-controls,
#homeLiveForecastCard.home-forecast-safe-compact:not(.expanded) .home-forecast-next,
#homeLiveForecastCard.home-forecast-safe-compact:not(.expanded) .home-forecast-status {
  display: none !important;
}

#homeLiveForecastCard.home-forecast-safe-compact:not(.expanded) .home-forecast-copy p:not(.eyebrow) {
  display: -webkit-box;
  max-height: 44px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.home-safe-expand-btn {
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 12px 14px;
  margin-top: 4px;
  background: linear-gradient(135deg, #1398d1, #07334f);
  color: #ffffff;
  font-size: 13px;
  font-weight: 950;
  box-shadow:
    0 14px 30px rgba(7, 51, 79, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  cursor: pointer;
}

.home-safe-expand-btn:active {
  transform: scale(0.97);
}

/* Make sure buttons remain clickable */
#home button,
#home .quick-card,
#home .home-dashboard-chip {
  pointer-events: auto !important;
}

/* Dark mode */
body.app-dark-mode .home-safe-expand-btn {
  background: linear-gradient(135deg, #1398d1, #07334f) !important;
  color: #ffffff !important;
}
/* Version 2.1.7 - More tab interactive cards */

#more .more-interactive-card {
  cursor: pointer;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#more .more-interactive-card:active {
  transform: scale(0.98);
}

.more-card-chevron {
  margin-left: auto;
  width: 30px;
  height: 30px;
  min-width: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--blue-dark);
  font-weight: 1000;
  transition: transform 0.18s ease;
}

.more-interactive-card.is-open .more-card-chevron {
  transform: rotate(180deg);
}

.more-info-panel {
  display: none;
  gap: 13px;
  margin: -6px 0 15px;
  padding: 15px;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.34));
  border: 1px solid rgba(255, 255, 255, 0.74);
  box-shadow:
    0 16px 34px rgba(18, 78, 112, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}

.more-info-panel.open {
  display: grid;
}

.more-info-panel h3 {
  margin: 0;
  color: var(--blue-dark);
  font-size: 18px;
  letter-spacing: -0.03em;
}

.more-info-panel p {
  margin: 0;
  color: rgba(45, 84, 103, 0.76);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

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

.more-info-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.62);
}

.more-info-row span {
  font-size: 18px;
  line-height: 1;
}

.more-info-row div {
  display: grid;
  gap: 3px;
}

.more-info-row strong {
  color: var(--blue-dark);
  font-size: 13px;
}

.more-info-row small {
  color: rgba(45, 84, 103, 0.72);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.more-info-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.more-info-btn {
  border: none;
  border-radius: 999px;
  padding: 12px 13px;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.more-info-btn.primary {
  background: linear-gradient(135deg, #1398d1, #07334f);
  color: #ffffff;
  box-shadow:
    0 14px 30px rgba(7, 51, 79, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.more-info-btn.secondary {
  background: rgba(255, 255, 255, 0.62);
  color: var(--blue-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(18, 78, 112, 0.08);
}

.more-info-btn.full {
  grid-column: 1 / -1;
}

.more-info-btn:active {
  transform: scale(0.97);
}

/* Dark mode More interactive cards */
body.app-dark-mode .more-card-chevron,
body.app-dark-mode .more-info-panel,
body.app-dark-mode .more-info-row,
body.app-dark-mode .more-info-btn.secondary {
  background:
    linear-gradient(
      145deg,
      rgba(23, 59, 82, 0.74),
      rgba(8, 29, 43, 0.58)
    ) !important;
  border-color: rgba(142, 218, 255, 0.16) !important;
  color: #f6fcff !important;
}

body.app-dark-mode .more-info-panel h3,
body.app-dark-mode .more-info-row strong {
  color: #f6fcff !important;
}

body.app-dark-mode .more-info-panel p,
body.app-dark-mode .more-info-row small {
  color: rgba(222, 244, 255, 0.72) !important;
}

@media (max-width: 365px) {
  .more-info-actions {
    grid-template-columns: 1fr;
  }

  .more-info-btn.full {
    grid-column: auto;
  }
}
/* Version 2.1.8 - Contact and feedback button */

.feedback-contact-card {
  display: grid;
  gap: 14px;
}

.feedback-contact-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.feedback-contact-copy {
  display: grid;
  gap: 5px;
}

.feedback-contact-copy .eyebrow {
  margin: 0;
}

.feedback-contact-copy h3 {
  margin: 0;
  color: var(--blue-dark);
  font-size: 22px;
  letter-spacing: -0.04em;
}

.feedback-contact-copy p {
  margin: 0;
  color: rgba(45, 84, 103, 0.76);
  line-height: 1.45;
}

.feedback-contact-icon {
  width: 62px;
  height: 62px;
  min-width: 62px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 213, 106, 0.5), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(231, 247, 255, 0.64));
  box-shadow:
    0 14px 30px rgba(21, 91, 123, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  font-size: 30px;
}

.feedback-contact-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.feedback-contact-btn {
  border: none;
  border-radius: 999px;
  padding: 12px 13px;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.feedback-contact-btn.primary {
  background: linear-gradient(135deg, #1398d1, #07334f);
  color: #ffffff;
  box-shadow:
    0 14px 30px rgba(7, 51, 79, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.feedback-contact-btn.secondary {
  background: rgba(255, 255, 255, 0.62);
  color: var(--blue-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(18, 78, 112, 0.08);
}

.feedback-contact-btn.full {
  grid-column: 1 / -1;
}

.feedback-contact-btn:active {
  transform: scale(0.97);
}

.feedback-contact-note {
  margin: 0 !important;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.62);
  color: rgba(45, 84, 103, 0.76) !important;
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.45;
}

/* Dark mode contact card */
body.app-dark-mode .feedback-contact-copy h3 {
  color: #f6fcff !important;
}

body.app-dark-mode .feedback-contact-copy p,
body.app-dark-mode .feedback-contact-note {
  color: rgba(222, 244, 255, 0.72) !important;
}

body.app-dark-mode .feedback-contact-btn.secondary,
body.app-dark-mode .feedback-contact-note {
  background:
    linear-gradient(
      145deg,
      rgba(23, 59, 82, 0.74),
      rgba(8, 29, 43, 0.58)
    ) !important;
  border-color: rgba(142, 218, 255, 0.16) !important;
  color: #f6fcff !important;
}

@media (max-width: 365px) {
  .feedback-contact-actions {
    grid-template-columns: 1fr;
  }

  .feedback-contact-btn.full {
    grid-column: auto;
  }
}
/* Version 2.2 - Live app launch polish */

.beta-launch-card {
  display: grid;
  gap: 14px;
}

.beta-launch-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.beta-launch-copy {
  display: grid;
  gap: 5px;
}

.beta-launch-copy .eyebrow {
  margin: 0;
}

.beta-launch-copy h3 {
  margin: 0;
  color: var(--blue-dark);
  font-size: 22px;
  letter-spacing: -0.04em;
}

.beta-launch-copy p {
  margin: 0;
  color: rgba(45, 84, 103, 0.76);
  line-height: 1.45;
}

.beta-launch-icon {
  width: 62px;
  height: 62px;
  min-width: 62px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 213, 106, 0.5), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(231, 247, 255, 0.64));
  box-shadow:
    0 14px 30px rgba(21, 91, 123, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  font-size: 30px;
}

.beta-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.beta-status-pill {
  display: grid;
  gap: 3px;
  padding: 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 22px rgba(18, 78, 112, 0.08);
}

.beta-status-pill span {
  color: rgba(45, 84, 103, 0.72);
  font-size: 12px;
  font-weight: 900;
}

.beta-status-pill strong {
  color: var(--blue-dark);
  font-size: 14px;
}

.beta-launch-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.beta-launch-btn {
  border: none;
  border-radius: 999px;
  padding: 12px 13px;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.beta-launch-btn.primary {
  background: linear-gradient(135deg, #1398d1, #07334f);
  color: #ffffff;
  box-shadow:
    0 14px 30px rgba(7, 51, 79, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.beta-launch-btn.secondary {
  background: rgba(255, 255, 255, 0.62);
  color: var(--blue-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(18, 78, 112, 0.08);
}

.beta-launch-btn.danger {
  grid-column: 1 / -1;
  background: rgba(239, 68, 68, 0.12);
  color: #991b1b;
  border: 1px solid rgba(239, 68, 68, 0.18);
}

.beta-launch-btn:active {
  transform: scale(0.97);
}

.beta-launch-note {
  margin: 0 !important;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.62);
  color: rgba(45, 84, 103, 0.76) !important;
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.45;
}

/* Dark mode launch polish */
body.app-dark-mode .beta-launch-copy h3,
body.app-dark-mode .beta-status-pill strong {
  color: #f6fcff !important;
}

body.app-dark-mode .beta-launch-copy p,
body.app-dark-mode .beta-status-pill span,
body.app-dark-mode .beta-launch-note {
  color: rgba(222, 244, 255, 0.72) !important;
}

body.app-dark-mode .beta-status-pill,
body.app-dark-mode .beta-launch-btn.secondary,
body.app-dark-mode .beta-launch-note {
  background:
    linear-gradient(
      145deg,
      rgba(23, 59, 82, 0.74),
      rgba(8, 29, 43, 0.58)
    ) !important;
  border-color: rgba(142, 218, 255, 0.16) !important;
  color: #f6fcff !important;
}

body.app-dark-mode .beta-launch-btn.danger {
  background: rgba(239, 68, 68, 0.16) !important;
  color: #fecaca !important;
  border-color: rgba(239, 68, 68, 0.22) !important;
}

@media (max-width: 365px) {
  .beta-status-grid,
  .beta-launch-actions {
    grid-template-columns: 1fr;
  }

  .beta-launch-btn.danger {
    grid-column: auto;
  }
}
/* Version 2.3 - Home current conditions snapshot */

.home-current-card {
  display: grid;
  gap: 13px;
}

.home-current-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.home-current-copy {
  display: grid;
  gap: 5px;
}

.home-current-copy .eyebrow {
  margin: 0;
}

.home-current-copy h3 {
  margin: 0;
  color: var(--blue-dark);
  font-size: 22px;
  letter-spacing: -0.04em;
}

.home-current-copy p {
  margin: 0;
  color: rgba(45, 84, 103, 0.76);
  line-height: 1.45;
}

.home-current-icon {
  width: 62px;
  height: 62px;
  min-width: 62px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 213, 106, 0.5), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(231, 247, 255, 0.64));
  box-shadow:
    0 14px 30px rgba(21, 91, 123, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  font-size: 30px;
}

.home-current-temp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 22px rgba(18, 78, 112, 0.08);
}

.home-current-temp {
  color: var(--blue-dark);
  font-size: 42px;
  font-weight: 1000;
  letter-spacing: -0.08em;
  line-height: 1;
}

.home-current-details {
  display: grid;
  gap: 4px;
  text-align: right;
}

.home-current-details strong {
  color: var(--blue-dark);
  font-size: 14px;
}

.home-current-details small {
  color: rgba(45, 84, 103, 0.72);
  font-size: 12px;
  font-weight: 850;
}

.home-current-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-current-pill {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.54);
  color: rgba(45, 84, 103, 0.8);
  font-size: 12px;
  font-weight: 900;
}

.home-current-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.home-current-btn {
  border: none;
  border-radius: 999px;
  padding: 12px 13px;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.home-current-btn.primary {
  background: linear-gradient(135deg, #1398d1, #07334f);
  color: #ffffff;
  box-shadow:
    0 14px 30px rgba(7, 51, 79, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.home-current-btn.secondary {
  background: rgba(255, 255, 255, 0.62);
  color: var(--blue-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(18, 78, 112, 0.08);
}

.home-current-btn:active {
  transform: scale(0.97);
}

.home-current-status {
  margin: 0 !important;
  color: rgba(45, 84, 103, 0.76);
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.45;
}

/* Dark mode home current conditions */
body.app-dark-mode .home-current-copy h3,
body.app-dark-mode .home-current-temp,
body.app-dark-mode .home-current-details strong {
  color: #f6fcff !important;
}

body.app-dark-mode .home-current-copy p,
body.app-dark-mode .home-current-details small,
body.app-dark-mode .home-current-pill,
body.app-dark-mode .home-current-status {
  color: rgba(222, 244, 255, 0.72) !important;
}

body.app-dark-mode .home-current-temp-row,
body.app-dark-mode .home-current-pill,
body.app-dark-mode .home-current-btn.secondary {
  background:
    linear-gradient(
      145deg,
      rgba(23, 59, 82, 0.74),
      rgba(8, 29, 43, 0.58)
    ) !important;
  border-color: rgba(142, 218, 255, 0.16) !important;
  color: #f6fcff !important;
}

@media (max-width: 365px) {
  .home-current-main,
  .home-current-temp-row {
    align-items: flex-start;
  }

  .home-current-actions {
    grid-template-columns: 1fr;
  }
}
/* Version 2.3.1 - Remove duplicate hero forecast content */

#heroLiveForecastStrip {
  display: none !important;
}

#home .hero-live-forecast-strip {
  display: none !important;
}
/* Version 2.3.2 - Home duplicate alert cleanup */

/* Hide old placeholder Active Alerts card on Home */
#home .section-card.home-old-alert-placeholder {
  display: none !important;
}

/* Clean up old demo hero weather badge if detected */
#home .hero-demo-cleaned {
  font-size: 14px !important;
  letter-spacing: 0 !important;
}

#home .hero-demo-cleaned small,
#home .hero-demo-cleaned span {
  font-size: 12px !important;
}
/* Version 2.3.3 - Clean hero demo weather and current conditions fallback */

#home .hero-demo-weather-hidden {
  display: none !important;
}

#home .hero-live-badge-clean {
  display: grid;
  place-items: center;
  min-width: 82px;
  min-height: 82px;
  padding: 12px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 213, 106, 0.42), transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(231, 247, 255, 0.62));
  border: 1px solid rgba(255, 213, 106, 0.54);
  box-shadow:
    0 16px 32px rgba(7, 51, 79, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  text-align: center;
}

#home .hero-live-badge-clean strong {
  color: var(--blue-dark);
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: -0.04em;
}

#home .hero-live-badge-clean small {
  color: rgba(45, 84, 103, 0.74);
  font-size: 12px;
  font-weight: 950;
}

#home .hero-clean-note {
  display: inline-flex;
  width: fit-content;
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.54);
  color: rgba(45, 84, 103, 0.8);
  font-size: 12px;
  font-weight: 950;
}

#home .home-current-card.current-partial-data .home-current-temp {
  font-size: 34px;
  letter-spacing: -0.04em;
}

#home .home-current-card.current-partial-data .home-current-status {
  background: rgba(255, 255, 255, 0.44);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 18px;
  padding: 11px;
}

body.app-dark-mode #home .hero-live-badge-clean,
body.app-dark-mode #home .hero-clean-note,
body.app-dark-mode #home .home-current-card.current-partial-data .home-current-status {
  background:
    linear-gradient(
      145deg,
      rgba(23, 59, 82, 0.74),
      rgba(8, 29, 43, 0.58)
    ) !important;
  border-color: rgba(142, 218, 255, 0.16) !important;
}

body.app-dark-mode #home .hero-live-badge-clean strong {
  color: #f6fcff !important;
}

body.app-dark-mode #home .hero-live-badge-clean small,
body.app-dark-mode #home .hero-clean-note {
  color: rgba(222, 244, 255, 0.72) !important;
}
/* Version 2.3.4 - Force clean Home hero demo badge */

#home .force-hide-hero-demo {
  display: none !important;
}

#home .force-clean-hero-badge {
  display: grid !important;
  place-items: center;
  min-width: 82px;
  min-height: 82px;
  padding: 12px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 213, 106, 0.42), transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(231, 247, 255, 0.62));
  border: 1px solid rgba(255, 213, 106, 0.54);
  box-shadow:
    0 16px 32px rgba(7, 51, 79, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  text-align: center;
}

#home .force-clean-hero-badge strong {
  color: var(--blue-dark);
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: -0.04em;
}

#home .force-clean-hero-badge small {
  color: rgba(45, 84, 103, 0.74);
  font-size: 12px;
  font-weight: 950;
}

#home .home-current-card.current-no-temp .home-current-temp {
  font-size: 22px !important;
  letter-spacing: -0.03em !important;
}

body.app-dark-mode #home .force-clean-hero-badge {
  background:
    linear-gradient(
      145deg,
      rgba(23, 59, 82, 0.74),
      rgba(8, 29, 43, 0.58)
    ) !important;
  border-color: rgba(142, 218, 255, 0.16) !important;
}

body.app-dark-mode #home .force-clean-hero-badge strong {
  color: #f6fcff !important;
}

body.app-dark-mode #home .force-clean-hero-badge small {
  color: rgba(222, 244, 255, 0.72) !important;
}
/* Version 2.3.5 - Force remove fake Home demo weather */

#home .force-demo-hide-v235 {
  display: none !important;
}

.hero-replacement-badge-v235 {
  display: grid !important;
  place-items: center;
  min-width: 82px;
  min-height: 82px;
  padding: 12px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 70% 25%, rgba(255, 213, 106, 0.42), transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(231, 247, 255, 0.62));
  border: 1px solid rgba(255, 213, 106, 0.54);
  box-shadow:
    0 16px 32px rgba(7, 51, 79, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  text-align: center;
}

.hero-replacement-badge-v235 strong {
  color: var(--blue-dark);
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: -0.04em;
}

.hero-replacement-badge-v235 small {
  color: rgba(45, 84, 103, 0.74);
  font-size: 12px;
  font-weight: 950;
}

body.app-dark-mode .hero-replacement-badge-v235 {
  background:
    linear-gradient(
      145deg,
      rgba(23, 59, 82, 0.74),
      rgba(8, 29, 43, 0.58)
    ) !important;
  border-color: rgba(142, 218, 255, 0.16) !important;
}

body.app-dark-mode .hero-replacement-badge-v235 strong {
  color: #f6fcff !important;
}

body.app-dark-mode .hero-replacement-badge-v235 small {
  color: rgba(222, 244, 255, 0.72) !important;
}
/* Version 2.3.6 - Clickable logo home button */

.mdwa-logo-home-button {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 20;
}

.mdwa-logo-home-button:active {
  transform: scale(0.98);
}

.mdwa-logo-home-button::after {
  content: "Home";
  position: absolute;
  left: 4px;
  top: calc(100% + 6px);
  opacity: 0;
  pointer-events: none;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--blue-dark);
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(18, 78, 112, 0.1);
  transition: opacity 0.15s ease;
}

.mdwa-logo-home-button:hover::after,
.mdwa-logo-home-button:focus-visible::after {
  opacity: 1;
}

body.app-dark-mode .mdwa-logo-home-button::after {
  background: rgba(8, 29, 43, 0.86);
  color: #f6fcff;
}
/* =========================================================
   MDWA 2.3.7 - Card Layering Fix
   Keeps background hills/clouds behind cards
   ========================================================= */

.app,
.app-shell,
.phone-shell,
.screen,
.page,
main {
  position: relative;
}

.section-card,
.glass-card,
.forecast-card,
.alert-card,
.report-card,
.card,
.tile,
.quick-card {
  position: relative;
  z-index: 5;
}

.hero,
.app-hero,
.home-hero,
.brand-hero {
  position: relative;
  z-index: 6;
}

.hill,
.hills,
.background-hill,
.background-hills,
.landscape,
.grass,
.bg-hill,
.bg-hills,
.decorative-hill,
.decorative-hills,
.weather-background,
.screen-background,
.app-background {
  pointer-events: none;
  z-index: 0 !important;
}

.screen::before,
.screen::after,
.page::before,
.page::after,
.app::before,
.app::after,
.app-shell::before,
.app-shell::after,
.phone-shell::before,
.phone-shell::after {
  pointer-events: none;
} 
/* =========================================================
   MDWA Mobile App Bottom Navigation Fix
   Keeps in-app nav pinned to bottom of phone screen
   ========================================================= */

.mdwa-bottom-nav,
.bottom-nav,
.mobile-nav,
.app-nav,
.tab-bar,
.nav-tabs,
.footer-nav,
nav[aria-label="Primary"],
nav[aria-label="Main"] {
  position: fixed !important;
  left: 50% !important;
  bottom: env(safe-area-inset-bottom, 0px) !important;
  transform: translateX(-50%) !important;
  width: min(100%, 430px) !important;
  z-index: 9999 !important;
  margin: 0 !important;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

body {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}

.app,
.app-shell,
.phone-shell,
.screen,
.page,
main {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}