:root {
    --ink: #17252b;
    --muted: #6b7b80;
    --paper: #f5f7f4;
    --panel: #ffffff;
    --line: #dfe7e4;
    --teal: #087f75;
    --teal-soft: #dff2ed;
    --orange: #e2652e;
    --blue: #3c75aa;
    --yellow: #e2aa38;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; }
button { font: inherit; }
.app-shell { display: grid; grid-template-columns: minmax(350px, 390px) 1fr; min-height: 100vh; }
.sidebar { display: flex; flex-direction: column; gap: 27px; padding: 30px 28px 24px; background: var(--panel); border-right: 1px solid var(--line); z-index: 2; }
.brand-row { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px 12px 12px 3px; color: white; background: var(--teal); font-family: "Space Grotesk", sans-serif; font-size: 13px; font-weight: 700; transform: rotate(-2deg); }
.eyebrow { margin: 0 0 6px; color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 0; font: 700 19px "Space Grotesk", sans-serif; letter-spacing: -.03em; }
h2 { max-width: 270px; margin-bottom: 10px; font: 600 31px/1.05 "Space Grotesk", sans-serif; letter-spacing: -.055em; }
h3 { margin: 0; font: 600 16px "Space Grotesk", sans-serif; }
.muted { max-width: 300px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.intro-block { padding: 10px 0 2px; }
.route-builder { display: flex; flex-direction: column; gap: 10px; padding: 15px; border: 1px solid var(--line); background: #f8fbf9; }
.builder-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 2px; }
.builder-step { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.route-builder label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.route-builder select { width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 0; outline: none; color: var(--ink); background: white; font-size: 12px; text-transform: none; cursor: pointer; }
.route-builder select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.build-button { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; padding: 11px 13px; border: 0; color: white; background: var(--teal); font-size: 11px; font-weight: 700; cursor: pointer; }
.build-button:hover { background: #066b63; }
.build-button span { font-size: 16px; line-height: 10px; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metric-card { padding: 15px 14px 14px; border: 1px solid var(--line); border-top: 3px solid var(--teal); background: #fbfcfb; }
.metric-card.accent-orange { border-top-color: var(--orange); }
.metric-card.accent-blue { border-top-color: var(--blue); }
.metric-card.accent-yellow { border-top-color: var(--yellow); }
.metric-label, .metric-card small { display: block; color: var(--muted); font-size: 10px; }
.metric-card strong { display: block; margin: 7px 0 2px; font: 600 23px "Space Grotesk", sans-serif; letter-spacing: -.05em; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; padding-top: 4px; }
.icon-button { width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 50%; color: var(--teal); background: white; font-size: 22px; line-height: 25px; cursor: pointer; }
.icon-button:hover { color: white; background: var(--teal); }
.route-list { display: flex; flex-direction: column; gap: 8px; }
.route-card { padding: 13px 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }
.route-card:hover, .route-card.active { border-color: var(--teal); box-shadow: 0 8px 18px rgba(23, 37, 43, .07); transform: translateY(-1px); }
.route-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.route-name { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.route-swatch { width: 8px; height: 8px; border-radius: 50%; }
.route-miles { color: var(--muted); font-size: 11px; }
.route-path { margin: 9px 0 10px 16px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.route-data { display: flex; gap: 17px; margin-left: 16px; color: var(--ink); font-size: 10px; }
.route-data span { color: var(--muted); }
.legend-block { padding-top: 2px; }
.legend-items { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 11px; }
.legend-items span { display: flex; align-items: center; gap: 7px; }
.legend-dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 1px rgba(23,37,43,.18); }
.start-dot { background: var(--teal); }
.hub-dot { background: var(--orange); }
.sidebar-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.status-dot::before { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #53af72; content: ""; }
.map-stage { position: relative; min-height: 100vh; overflow: hidden; background: #dce8e8; }
#map { position: absolute; inset: 0; z-index: 0; }
.leaflet-tile-pane { filter: saturate(.58) sepia(.05) brightness(1.06); }
.map-toolbar { position: absolute; top: 24px; right: 28px; left: 28px; z-index: 500; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.toolbar-title, .toolbar-actions { pointer-events: auto; }
.toolbar-title { display: flex; align-items: center; gap: 9px; padding: 10px 14px; color: var(--ink); background: rgba(255,255,255,.91); box-shadow: 0 6px 18px rgba(23,37,43,.09); font-size: 12px; font-weight: 700; }
.live-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px var(--teal-soft); }
.toolbar-actions { display: flex; gap: 7px; }
.toolbar-button { padding: 10px 14px; border: 0; background: rgba(255,255,255,.91); box-shadow: 0 6px 18px rgba(23,37,43,.09); color: var(--ink); font-size: 11px; cursor: pointer; }
.toolbar-button.primary { color: white; background: var(--teal); }
.toolbar-button:hover { filter: brightness(.97); }
.map-caption { position: absolute; right: 28px; bottom: 22px; left: 28px; z-index: 400; display: flex; justify-content: space-between; color: #52666b; font-size: 10px; pointer-events: none; }
.map-caption strong { color: var(--ink); }
.map-callout { position: absolute; right: 28px; bottom: 57px; z-index: 400; display: flex; flex-direction: column; gap: 4px; width: 210px; padding: 15px; border-left: 3px solid var(--orange); background: rgba(255,255,255,.94); box-shadow: 0 7px 20px rgba(23,37,43,.1); font-size: 11px; }
.map-callout strong { font: 600 17px "Space Grotesk", sans-serif; }
.map-callout span:last-child { color: var(--muted); line-height: 1.45; }
.callout-kicker { color: var(--orange); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.custom-marker { display: grid; place-items: center; width: 25px; height: 25px; border: 3px solid white; border-radius: 50% 50% 50% 2px; color: white; box-shadow: 0 2px 6px rgba(23,37,43,.28); font: 700 11px "Space Grotesk", sans-serif; transform: rotate(-45deg); }
.custom-marker span { transform: rotate(45deg); }
.marker-start { background: var(--teal); }
.marker-hub { background: var(--orange); }
.marker-label { margin-top: 29px; margin-left: -28px; padding: 3px 5px; color: var(--ink); background: rgba(255,255,255,.88); box-shadow: 0 2px 6px rgba(23,37,43,.08); font-size: 10px; white-space: nowrap; }
.marker-label.hidden { display: none; }
.leaflet-control-zoom { border: 0 !important; box-shadow: 0 6px 18px rgba(23,37,43,.1) !important; }
.leaflet-control-zoom a { color: var(--teal) !important; border: 0 !important; }

@media (max-width: 920px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { gap: 22px; }
    .map-stage { min-height: 680px; }
    .map-toolbar { top: 16px; right: 16px; left: 16px; }
}
@media (max-width: 560px) {
    .sidebar { padding: 22px 18px 18px; }
    h2 { font-size: 27px; }
    .map-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
    .toolbar-actions { display: flex; }
    .toolbar-button { flex: 1; }
    .map-caption { right: 15px; bottom: 15px; left: 15px; }
    .map-caption span:last-child { display: none; }
    .map-callout { right: 15px; bottom: 45px; }
}