/* Shared public-site palette matching the administration template. */
:root {
  --bg: #040c24;
  --bg-strong: #0a1734;
  --panel: #0a1734;
  --panel-soft: #0e1f45;
  --line: #1b3163;
  --text: #e9efff;
  --muted: #93a6d1;
  --cyan: #7ea5ff;
  --blue: #3a74ff;
  --yellow: #f5b301;
  --surface-inset: #0e1f45;
  --surface-frost: #0a1734ee;
  --body-background: #040c24;
  --shadow: 0 1px 2px #0006, 0 10px 30px #0005;
  --radius: 16px;
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
}
:root.light {
  --bg: #eef2f9;
  --bg-strong: #fff;
  --panel: #fff;
  --panel-soft: #f3f6fc;
  --line: #d6dfef;
  --text: #0b1a3a;
  --muted: #52648a;
  --cyan: #1447d4;
  --blue: #1447d4;
  --surface-inset: #f3f6fc;
  --surface-frost: #fffffff0;
  --body-background: #eef2f9;
  --shadow: 0 1px 2px #0b1a3a0f, 0 10px 30px #0b1a3a12;
}
.auth-story {
  background: linear-gradient(180deg, #020a24, #031a55 58%, #06308f);
  border-radius: 0;
}
.auth-story h2 em {
  color: #f5b301;
}
.auth-shell {
  border-radius: 0;
}
.button {
  border-radius: 12px;
}
.auth-card {
  box-shadow: none;
}
.brand-mark {
  background: #1447d4;
  color: #f5b301;
}
.auth-brand h1 span,
.brand > span:last-child {
  color: #f5b301;
}
.topbar {
  border-color: var(--line);
}
.dashboard-panel,
.weather-card,
.news-card,
.alert-card {
  border-radius: 16px;
}
.auth-story-art {
  filter: none;
}
.auth-story .story-core {
  background: #1447d4;
  border-color: #f5b301;
  color: #f5b301;
}

/* A quieter weather workspace: clear hierarchy, consistent surfaces, real state. */
:root { --bg: #0c1925; --bg-strong: #102130; --panel: #122635; --panel-soft: #1a3243; --line: #2a4152; --text: #edf5f7; --muted: #a6bac7; --cyan: #85d1d9; --blue: #238b9a; --surface-inset: #10212f; --surface-frost: #122635; --body-background: #0c1925; --shadow: 0 8px 28px #0002; }
:root.light { --bg: #f1f5f5; --panel: #fff; --panel-soft: #e8f0f1; --line: #cfdddf; --text: #183343; --muted: #536d7b; --cyan: #116c7c; --blue: #126f80; --surface-inset: #f5f8f8; --surface-frost: #fff; --body-background: #f1f5f5; }
body { background: var(--body-background); }
.topbar, .bottom-nav { background: var(--bg); box-shadow: none; border-color: var(--line); }
.brand-mark { background: #1c6e7c; border-color: #4495a3; color: #ecf6f5; box-shadow: none; }
.brand > span:last-child { color: var(--cyan); }
.desktop-nav a[aria-current="page"] { background: var(--panel-soft); box-shadow: none; border-color: var(--line); }
.button { background: #217d8b; border-color: #3994a1; box-shadow: none; font-weight: 700; }
.button:hover { background: #258a99; box-shadow: none; }.button.secondary:hover { background: var(--panel-soft); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 2000; padding: 14px; border-radius: 8px; background: var(--panel); color: var(--text); }.skip-link:focus { top: 12px; }
.home-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 38px; }
.home-heading h1 { font-size: clamp(28px, 3.2vw, 43px); letter-spacing: -.055em; margin: 12px 0 0; line-height: 1.15; font-weight: 600; }
.home-heading > a { width: auto; flex-shrink: 0; font-size: 13px; }
.eyebrow { font-size: 10px; letter-spacing: .14em; color: var(--cyan); }
.weather-home-page .app-shell { max-width: 1380px; padding-top: 36px; }
.weather-home-page .location-row { margin-bottom: 22px; padding-bottom: 20px; }
.weather-home-page .home-layout { grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: 24px; }
.weather-home-page .weather-hero { background: linear-gradient(120deg, #17465e, #113145); border: 1px solid #3a6377; min-height: 340px; border-radius: 20px; padding: 28px 32px; box-shadow: none; color: #edf5f7; }
.weather-home-page .weather-hero::before { width: 310px; height: 310px; right: -65px; top: 60px; border-color: #acd6e014; }.weather-home-page .weather-hero::after { width: 220px; height: 220px; right: -20px; top: 104px; border-color: #acd6e014; }
.weather-home-page .weather-icon { position: absolute; right: 13%; top: 100px; font-size: 84px; margin: 0; filter: none; color: #e6d8a5; }
.weather-home-page .temperature { margin-top: 36px; font-size: clamp(70px, 7.5vw, 102px); font-weight: 400; }
.weather-home-page .condition { font-size: 22px; margin: 4px 0 10px; max-width: 75%; }
.weather-home-page .weather-hero .muted, .weather-home-page .updated-at { color: #bed4df; font-size: 13px; }
.weather-home-page .weather-hero .data-source { color: #b1dce7; font-size: 11px; text-decoration: underline; }
.forecast-status { color: #cee6ed; border: 1px solid #acd6e035; background: #ffffff08; border-radius: 20px; padding: 6px 10px; font-size: 10px; }
.weather-home-page .metric { border-radius: 12px; padding: 18px; box-shadow: none; }.weather-home-page .metric strong { margin-top: 8px; font-weight: 600; }
.weather-home-page .warning-panel { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--muted); border-radius: 20px; padding: 28px; min-height: 0; box-shadow: none; }
.weather-home-page .warning-panel .eyebrow { color: var(--muted); }
.weather-home-page .warning-panel .risk-icon { color: var(--text); border: 1px solid var(--line); background: var(--panel-soft); margin: 30px 0 22px; border-radius: 14px; box-shadow: none; font-size: 24px; width: 48px; height: 48px; clip-path: none; padding-top: 0; }
.weather-home-page .warning-panel h2 { font-size: clamp(22px, 2.2vw, 29px); line-height: 1.25; }
.weather-home-page .warning-panel p { font-size: 13px; }.weather-home-page .warning-panel .feed-summary { font-size: 11px; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--line); margin-bottom: 22px; }
.weather-home-page .warning-panel[data-severity="CRITICAL"] { border-top-color: #e77584; }.weather-home-page .warning-panel[data-severity="HIGH"] { border-top-color: #e8a361; }.weather-home-page .warning-panel[data-severity="MODERATE"] { border-top-color: #dec26e; }.weather-home-page .warning-panel[data-severity="LOW"] { border-top-color: #7bc8a8; }
.home-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; margin-top: 32px; }
.home-shortcuts a { display: grid; gap: 12px; padding: 24px 0; border-top: 1px solid var(--line); }.home-shortcuts strong { font-size: 15px; font-weight: 600; }.home-shortcuts a > span:last-child { color: var(--muted); font-size: 12px; line-height: 1.5; }.shortcut-index { font-size: 10px; color: var(--cyan); letter-spacing: .12em; }.home-shortcuts a:hover strong { color: var(--cyan); }
dialog.modal { width: 100%; max-width: none; height: 100%; max-height: none; border: 0; margin: 0; color: var(--text); }dialog.modal:not([open]) { display: none; }dialog.modal::backdrop { background: #0008; }
@media (max-width: 720px) {
  .home-heading { align-items: start; margin-bottom: 28px; flex-direction: column; gap: 18px; }.home-heading h1 { max-width: 300px; font-size: 32px; }.home-heading > a { padding: 11px 14px; }
  .weather-home-page .home-layout { grid-template-columns: minmax(0,1fr); gap: 18px; }.weather-home-page .weather-hero { padding: 24px; min-height: 325px; }.weather-home-page .weather-icon { font-size: 64px; right: 10%; top: 112px; }.weather-home-page .condition { max-width: 100%; font-size: 20px; }.weather-home-page .metric { padding: 14px 10px; }
  .home-shortcuts { grid-template-columns: 1fr; gap: 0; margin-top: 20px; }.weather-home-page .warning-panel { padding: 24px; }.forecast-status { font-size: 9px; padding: 5px 7px; }.weather-home-page .hero-kicker .eyebrow { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

@media (min-width: 721px) and (max-width: 1050px) {
  .desktop-nav { display: none; }
  .bottom-nav { display: grid; }
  .weather-map-page .map-workspace { height: calc(100dvh - 152px - env(safe-area-inset-bottom)); }
}

/* Public interface inspired by the supplied mobile screens. */
:root {
  --bg: #071225; --bg-strong: #091426; --panel: #16243a;
  --panel-soft: #1c2d49; --line: #30405a; --text: #f5f7ff;
  --muted: #9aa8bf; --cyan: #62a8ff; --blue: #2164f5;
  --yellow: #ffbd00; --surface-inset: #101e32;
  --surface-frost: #17253a; --body-background: #081427;
  --shadow: 0 12px 32px #0003;
}
:root.light {
  --bg: #edf3fc; --bg-strong: #f7faff; --panel: #fff;
  --panel-soft: #e5eefc; --line: #c9d6e9; --text: #14223a;
  --muted: #53647f; --cyan: #1359c6; --blue: #2164e8;
  --surface-inset: #f0f5fc; --surface-frost: #fff;
  --body-background: #edf3fc;
}
.topbar, .bottom-nav { background: var(--bg-strong); border-color: var(--line); }
.brand-mark { background: #195ef0; color: #ffbd00; border-color: #3277ff; }
.brand > span:last-child { color: #ffbd00; }
.desktop-nav a[aria-current="page"] { background: #175ef4; color: #fff; border-color: #175ef4; }
.button { background: linear-gradient(110deg,#155df2,#3280ff); border-color: #3679ff; border-radius: 16px; color: white; }
.button:hover { background: #155df2; }
.button.secondary { color: var(--cyan); border-color: #2755a1; background: #0c2755; }
:root.light .button.secondary { background: #edf4ff; color: #1754bd; }
.eyebrow, .section-label { color: var(--muted); letter-spacing: .09em; }
.weather-home-page .weather-hero {
  background: linear-gradient(165deg,#102b63,#0d1d3e 72%,#102039);
  border: 1px solid #263d64; color: #f8faff;
}
.weather-home-page .weather-icon { color: #ffbd00; }
.weather-home-page .temperature small { vertical-align: baseline; }
.weather-home-page .metric, .weather-home-page .warning-panel,
.profile-summary, .settings-panel, .content-card { background: var(--panel); border-color: var(--line); }
.weather-home-page .metric strong { font-size: 18px; }
.weather-home-page .warning-panel { text-align: left; }
.weather-home-page .warning-panel .risk-icon { color: #ffbd00; }
.auth-page { background: radial-gradient(ellipse at top,#102b60,#071225 62%); }
.auth-story { background: linear-gradient(165deg,#102c66,#09172e); border-radius: 24px; }
.auth-card { background: #1a273b; border: 1px solid #36445b; border-radius: 18px; }
.auth-brand .brand-mark { display: none; }
.auth-brand h1 { font-size: 34px; font-weight: 900; letter-spacing: -.05em; text-transform: uppercase; }
.auth-brand p { color: #9aa8bf; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
.role-switch a { border-radius: 24px; background: #121f32; }
.role-switch a.active { background: #102c60; border-color: #205cca; color: #70b0ff; }
.tabs { background: #29374a; border: 0; border-radius: 20px; padding: 4px; }
.tabs a { border: 0; border-radius: 16px; }
.tabs a.active { background: #1b61f5; border: 0; box-shadow: 0 5px 18px #0a50e66b; }
.auth-card .field input, .auth-card .field select { background: #29364a; border: 1px solid #46546a; border-radius: 20px; color: #fff; }
.auth-card .field label { color: #aebbd0; font-size: 11px; letter-spacing: .04em; }
.guest-link { border: 1px solid #34435b; border-radius: 18px; padding: 12px; background: #152237; }
.alert-card { border: 1px solid #48546a; box-shadow: none; }
.alert-card[data-severity="CRITICAL"] { background: #251b34; border-color: #743049; }
.alert-card[data-severity="HIGH"] { background: #29212d; border-color: #70452e; }
.alert-card[data-severity="MODERATE"] { background: #222a2c; border-color: #6c5b27; }
.alert-summary strong { border-radius: 50%; }
.recommendations { border-radius: 16px; }
.confirmed-location { border-radius: 18px; }
.report-link { margin-top: 22px; }
.report-note { font-size: 12px; text-align: center; }
.profile-page .profile-summary, .profile-page .settings-panel { border-radius: 18px; }
.profile-page .profile-summary { background: #213451; }
.avatar { background: linear-gradient(145deg,#3679ff,#4337e3); border-radius: 18px; }
.bottom-nav a.active, .bottom-nav a:hover:not(.disabled) { background: transparent; color: #ffbd00; }
.bottom-nav .nav-icon { width: 20px; height: 20px; }
.bottom-nav span { font-size: 11px; }
@media (max-width: 720px) {
  body { background: linear-gradient(180deg,#0e2249 0,#09162c 420px,#071225 100%); }
  :root.light body { background: var(--body-background); }
  .topbar { min-height: 60px; }
  .app-shell { padding: 24px 20px 105px; }
  .weather-home-page .app-shell { padding-top: 20px; }
  .weather-home-page .home-heading { display: none; }
  .weather-home-page .location-row { margin-bottom: 10px; padding-bottom: 10px; }
  .weather-home-page .location-context .eyebrow { display: none; }
  .weather-home-page .home-layout { gap: 20px; }
  .weather-home-page .weather-hero { min-height: 0; padding: 20px 12px; text-align: center; border: 0; background: transparent; }
  .weather-home-page .weather-hero::before, .weather-home-page .weather-hero::after { display: none; }
  .weather-home-page .weather-icon { position: static; font-size: 48px; line-height: 1.1; }
  .weather-home-page .temperature { margin: 12px 0; font-size: 76px; font-weight: 700; }
  .weather-home-page .condition { font-size: 18px; margin: 5px 0; }
  .weather-home-page .hero-kicker { margin-bottom: 10px; }
  .weather-home-page .weather-grid { margin-top: 8px; border-radius: 18px; background: var(--panel); }
  .weather-home-page .metric { padding: 16px 8px; }
  .weather-home-page .metric strong { font-size: 14px; }
  .weather-home-page .warning-panel { padding: 20px; }
  .weather-home-page .warning-panel .risk-icon { margin: 18px 0; }
  .home-shortcuts { gap: 10px; }
  .home-shortcuts a { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
  .bottom-nav { min-height: calc(66px + env(safe-area-inset-bottom)); box-shadow: none; }
  .bottom-nav a { min-height: 66px; padding: 8px 4px; }
  .auth-page { padding: 45px 20px 28px; }
  .auth-card { padding: 22px; }
  .auth-brand { margin-bottom: 30px; }
  .page-heading h1 { font-size: 24px; }
  .alert-card:hover { transform: none; }
}