:root {
  color-scheme: light;
  scroll-behavior: smooth;
  --ink: #102d20;
  --muted: #607368;
  --panel: #f8fffa;
  --panel-strong: #ffffff;
  --line: #cfe3d5;
  --green: #2f9e44;
  --yellow: #f2b705;
  --red: #cf142b;
  --accent: #228b22;
  --accent-secondary: #00a36c;
  --accent-deep: #176b17;
  --accent-soft: #dff4e4;
  --shadow: #0d6b301f;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e6f7ec;
  --muted: #a5b9ad;
  --panel: #10261a;
  --panel-strong: #142d20;
  --line: #315542;
  --accent: #35a853;
  --accent-secondary: #58d39c;
  --accent-deep: #83e09f;
  --accent-soft: #193e29;
  --shadow: #00000052;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: #f4fff7;
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, sans-serif;
}
:root[data-theme="dark"] body { background: #08150e; }
main { position: relative; max-width: 960px; margin: auto; padding: 56px 24px 80px; }
header, .section-heading, .status, footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
h1 { margin: 8px 0; color: var(--accent-deep); font-size: clamp(34px, 5.4vw, 58px); letter-spacing: -.055em; line-height: .95; white-space: nowrap; }
h2 { margin: 4px 0; font-size: 25px; color: var(--ink); }
p { color: var(--muted); margin: 0; }
.eyebrow, .label { color: var(--accent-secondary); font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.theme-toggle { font-family: system-ui, -apple-system, sans-serif; font-size: 11px; font-weight: 800; line-height: 1.3; }
.hero-title { display: flex; align-items: center; gap: 18px; }
.hero-title p, .traffic-map-heading p, .roads-heading p { font-size: 13px; white-space: nowrap; }
.traffic-logo { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 15px; filter: drop-shadow(0 12px 22px var(--shadow)); }
.header-tools { display: grid; justify-items: center; gap: 10px; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 138px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-strong); color: var(--ink); box-shadow: 0 10px 24px var(--shadow); }
.theme-icon { font-size: 16px; line-height: 1; }
:root[data-theme="dark"] .panel, :root[data-theme="dark"] .weather-widget, :root[data-theme="dark"] .site-footer { border-color: var(--line); }
:root[data-theme="dark"] .weather-widget { background: #10261aeb; }
:root[data-theme="dark"] .secondary, :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] .reading { background: var(--panel-strong); color: var(--ink); }
:root[data-theme="dark"] .report-section { background: #0d2116cc; }
:root[data-theme="dark"] .reading.bad, :root[data-theme="dark"] .reading.avoid { background: #35171b; }
:root[data-theme="dark"] #traffic-map .base-map-tiles { filter: brightness(.72) contrast(1.08) saturate(1.35); }
.panel {
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid #ffffffd9;
  border-radius: 18px;
  padding: 24px;
  margin-top: 28px;
  box-shadow: 0 20px 60px var(--shadow);
  backdrop-filter: blur(14px);
}
.status strong { display: block; margin-top: 3px; }
.status-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
button {
  border: 0;
  border-radius: 10px;
  padding: 12px 17px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px #228b2230;
}
button:hover { filter: brightness(1.05); }
button:disabled { opacity: .5; cursor: not-allowed; }
.secondary {
  background: #fff;
  color: var(--accent-deep);
  border: 1px solid var(--line);
  box-shadow: none;
}
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
label { color: var(--muted); font-size: 12px; font-weight: 800; }
input {
  display: block;
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
input:focus { outline: 2px solid #00a36c33; border-color: #00a36c88; }
footer { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
#save-status { color: var(--muted); }
.report { display: grid; gap: 16px; margin-top: 12px; }
.report-section {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  background: #ffffff73;
}
.report-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.report-section-heading h3 { margin: 0; color: var(--accent-deep); font-size: 18px; }
.report-section-heading span { color: var(--muted); font-size: 12px; font-weight: 800; }
.report-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.reading {
  border: 1px solid var(--line);
  border-left: 4px solid #e8b6bd;
  border-radius: 12px;
  padding: 16px;
  background: #ffffffd9;
}
.reading.good { border-left-color: var(--green); }
.reading.warning { border-left-color: var(--yellow); }
.reading.bad, .reading.avoid { border-left-color: var(--red); background: #fff7f8; }
.reading.unknown { border-left-color: var(--muted); }
.reading strong { display: block; }
.reading span { color: var(--muted); }
.reading em { display: block; margin-top: 9px; color: var(--ink); font-style: normal; font-weight: 750; }
.toggle { display: flex; align-items: center; gap: 8px; }
.toggle input { width: auto; margin: 0; accent-color: var(--accent); }
.scan-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 5px; color: var(--muted); font-size: 12px; }
.scan-stats b { color: var(--accent-deep); }
.traffic-map-panel { overflow: hidden; }
.traffic-map-heading { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 14px; }
.traffic-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 18px; color: var(--muted); font-size: 12px; font-weight: 850; white-space: nowrap; }
.traffic-legend span { display: inline-flex; align-items: center; gap: 9px; }
.traffic-legend i { width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; }
.legend-flowing { background: #35a853; }
.legend-moderate { background: #f3b61f; }
.legend-heavy { background: #d93025; }
.traffic-legend .legend-flowing { box-shadow: 0 0 0 3px #35a85335, 0 0 13px #35a853cc; }
.traffic-legend .legend-moderate { box-shadow: 0 0 0 3px #f3b61f35, 0 0 13px #f3b61fcc; }
.traffic-legend .legend-heavy { box-shadow: 0 0 0 3px #d9302535, 0 0 13px #d93025cc; }
#traffic-map { height: 470px; width: 100%; border: 1px solid var(--line); border-radius: 14px; background: #dfe9e3; z-index: 0; }
#traffic-map .base-map-tiles { filter: saturate(1.18) contrast(1.03); }
#traffic-map .traffic-flow-line { filter: drop-shadow(0 0 3px #ffffffcc); }
.traffic-map-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.traffic-map-meta:has(#traffic-map-status[hidden]) { justify-content: flex-end; }
.traffic-map-meta b { color: var(--accent-deep); }
.leaflet-control-attribution { font-size: 10px; }
.site-footer { display: block; margin-top: 36px; padding: 30px 32px 32px; border: 1px solid #1f4935; border-radius: 18px; background: #092117; color: #f1fff6; box-shadow: 0 20px 60px var(--shadow); }
.footer-directory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 34px; }
.footer-directory section { display: grid; align-content: start; gap: 7px; }
.footer-directory h2 { margin: 0 0 5px; color: #fff; font-size: 15px; }
.footer-directory a { width: fit-content; color: #b9d5c5; font-size: 12px; font-weight: 700; text-decoration: none; }
.footer-directory a:hover { color: #75e0a6; text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme="dark"] .site-footer { border-color: #315542; background: #07140c; }
@media(max-width:700px) {
  main { padding: 32px 16px; }
  header { align-items: flex-start; }
  .grid, .report-grid { grid-template-columns: 1fr 1fr; }
  header, .status { flex-wrap: wrap; }
  .hero-title { align-items: flex-start; }
  h1 { font-size: clamp(27px, 7.2vw, 42px); }
  .hero-title { gap: 12px; }
  .hero-title p, .traffic-map-heading p { font-size: 11px; }
  .traffic-logo { width: 48px; height: 48px; }
  .header-tools { width: 100%; }
  .traffic-map-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .traffic-legend { justify-content: flex-start; }
  #traffic-map { height: 400px; }
}
@media(max-width:850px) { .footer-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width:450px) { .site-footer { padding: 24px 20px; } .footer-directory { gap: 24px 16px; } .footer-directory a { overflow-wrap: anywhere; line-height: 1.4; } }
@media(max-width:450px) { h1 { font-size: 24px; } .hero-title p { font-size: 9px; } .header-tools { grid-template-columns: 1fr; justify-items: stretch; } .theme-toggle { width: 100%; } }
@media(max-width:450px) { .grid, .report-grid { grid-template-columns: 1fr; } }
@media(max-width:450px) { .status-actions, .status-actions button { width: 100%; } }