:root {
  --forest: #123f36;
  --forest-2: #0c302a;
  --cream: #f7f4eb;
  --paper: #fffdf7;
  --yellow: #f5c451;
  --orange: #ef7d3f;
  --sewer: #d6362f;
  --pressure: #1683a3;
  --ink: #19302b;
  --muted: #66736f;
  --line: #d9ddd7;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #dce4df; }
button { font: inherit; }
#map { position: fixed; inset: 0; }
.ol-zoom { top: auto; left: 20px; bottom: 165px; }
.ol-zoom button { width: 38px; height: 38px; color: var(--forest); background: rgba(255,253,247,.96); border-radius: 10px !important; margin: 3px; box-shadow: 0 6px 18px rgba(18,63,54,.14); }
.ol-attribution { bottom: 76px; font-size: 10px; }
.topbar {
  position: fixed; z-index: 20; top: 18px; left: 20px; display: flex; align-items: center; gap: 12px;
  min-width: 320px; padding: 11px 12px; color: white; background: rgba(18,63,54,.95);
  border: 1px solid rgba(255,255,255,.16); border-radius: 16px; box-shadow: 0 12px 34px rgba(8,35,30,.23); backdrop-filter: blur(12px);
}
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; background: rgba(255,255,255,.1); border-radius: 12px; }
.brand-mark svg { width: 34px; fill: white; }
.brand-mark path { fill: none; stroke: var(--yellow); stroke-width: 4; stroke-linecap: round; }
.topbar h1 { margin: 1px 0 0; font-family: Georgia, serif; font-size: 21px; font-weight: 600; letter-spacing: -.3px; }
.eyebrow, .result-kicker { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: 1.6px; color: #c9dbd4; }
.icon-button, .panel-close { border: 0; cursor: pointer; }
.icon-button { margin-left: auto; width: 34px; height: 34px; color: white; background: transparent; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; font-family: Georgia, serif; font-weight: 700; }
.guide-card { position: fixed; z-index: 18; top: 105px; left: 20px; display: flex; align-items: center; gap: 12px; width: min(390px, calc(100vw - 40px)); padding: 14px 14px; color: var(--ink); background: rgba(255,253,247,.96); border: 1px solid white; border-radius: 14px; box-shadow: 0 10px 30px rgba(18,63,54,.18); }
.guide-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; color: white; background: var(--orange); border-radius: 50%; font-size: 22px; }
.guide-card strong { display: block; font-size: 14px; }
.guide-card span:not(.guide-icon) { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.guide-card button { margin-left: auto; padding: 4px; border: 0; color: var(--muted); background: transparent; font-size: 22px; cursor: pointer; }
.map-badge { position: fixed; z-index: 12; left: 20px; bottom: 82px; padding: 8px 11px; background: rgba(255,253,247,.94); border-radius: 10px; box-shadow: 0 6px 18px rgba(18,63,54,.12); font-size: 12px; font-weight: 700; }
.map-badge div + div { margin-top: 6px; }
.map-badge span { display: inline-block; width: 25px; height: 5px; margin-right: 7px; vertical-align: middle; border: 1px solid white; border-radius: 9px; }
.map-badge .legend-sewer { background: var(--sewer); box-shadow: 0 0 0 1px rgba(170,35,30,.35); }
.map-badge .legend-pressure { height: 3px; background: var(--pressure); box-shadow: 0 0 0 1px rgba(22,131,163,.3); }
.base-switch { position: fixed; z-index: 14; top: 18px; right: 20px; display: flex; padding: 4px; background: rgba(255,253,247,.96); border: 1px solid white; border-radius: 12px; box-shadow: 0 8px 24px rgba(18,63,54,.16); }
.base-switch button { padding: 8px 12px; color: var(--forest); background: transparent; border: 0; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 800; }
.base-switch button.active { color: white; background: var(--forest); }
.result-panel { position: fixed; z-index: 25; top: 18px; right: 20px; width: 340px; max-height: calc(100vh - 110px); overflow: auto; padding: 24px; background: var(--paper); border: 1px solid rgba(18,63,54,.12); border-radius: 20px; box-shadow: 0 20px 55px rgba(18,63,54,.28); transform: translateX(calc(100% + 40px)); opacity: 0; transition: transform .28s ease, opacity .28s ease; }
.result-panel.open { transform: translateX(0); opacity: 1; }
.panel-close { position: absolute; top: 13px; right: 14px; width: 34px; height: 34px; color: var(--forest); background: #eef1ec; border-radius: 50%; font-size: 22px; }
.result-panel .result-kicker { color: var(--orange); }
.result-panel h2, .modal-card h2 { margin: 5px 34px 18px 0; font-family: Georgia, serif; font-size: 25px; color: var(--forest); }
.primary-result { padding: 18px; color: white; background: var(--forest); border-radius: 16px; }
.primary-result span, .primary-result small { display: block; color: #d4e2dc; font-size: 12px; }
.primary-result strong { display: block; margin: 3px 0 1px; color: var(--yellow); font-family: Georgia, serif; font-size: 38px; line-height: 1; }
.metrics { display: grid; grid-template-columns: 1fr; gap: 0; margin: 18px 0 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.metrics div { padding: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metrics dt { min-height: 30px; color: var(--muted); font-size: 10px; line-height: 1.3; }
.metrics dd { margin: 3px 0 0; color: var(--forest); font-size: 15px; font-weight: 800; }
.warning { margin-top: 14px; padding: 11px 12px; color: #743817; background: #fff0c2; border-left: 4px solid #e49a33; border-radius: 8px; font-size: 12px; line-height: 1.4; }
.alternatives { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.alternatives p { margin: 0 0 8px; color: var(--muted); font-size: 11px; }
.alternatives button { margin: 0 6px 6px 0; padding: 7px 9px; color: var(--forest); background: white; border: 1px solid #b9c6c0; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 11px; }
.alternatives button.active { color: white; background: var(--forest); border-color: var(--forest); }
.modal { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(7,33,29,.42); backdrop-filter: blur(5px); }
.modal[hidden] { display: none; }
.modal-card { position: relative; width: min(510px, 100%); padding: 28px; background: var(--paper); border-radius: 20px; box-shadow: 0 24px 70px rgba(8,35,30,.34); }
.modal-card .result-kicker { color: var(--orange); }
.modal-card p { color: #4d5d58; font-size: 14px; line-height: 1.55; }
.modal-note { padding: 13px; background: #edf3ef; border-radius: 10px; }
.disclaimer { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; min-height: 62px; display: flex; align-items: center; justify-content: center; padding: 12px 9vw; color: #d5e2dc; background: var(--forest-2); border-top: 3px solid var(--yellow); text-align: center; font-size: 11px; line-height: 1.4; }
@media (max-width: 720px) {
  .topbar { top: 10px; left: 10px; right: 10px; min-width: 0; }
  .topbar h1 { font-size: 18px; }
  .guide-card { top: 88px; left: 10px; width: calc(100vw - 20px); }
  .map-badge { left: 10px; bottom: 80px; }
  .base-switch { top: auto; right: 10px; bottom: 80px; }
  .result-panel { top: auto; right: 0; bottom: 0; width: 100%; max-height: 67vh; padding: 22px 18px 80px; border-radius: 22px 22px 0 0; transform: translateY(105%); }
  .result-panel.open { transform: translateY(0); }
  .disclaimer { padding: 9px 14px; font-size: 9px; pointer-events: none; }
  .ol-zoom { left: 10px; bottom: 165px; }
  .ol-attribution { bottom: 63px; }
}