:root{
  --bg:#f4f6f8;--card:#fff;--ink:#0b1320;--muted:#687385;--line:#dde3ea;
  --accent:#1f7a4d;--accent-soft:#e9f7ef;--nv:#1769d2;--nv-soft:#eaf2ff;
  --good:#147a4b;--shadow:0 10px 30px rgba(17,31,48,.08);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink)}
button{font:inherit}
.site-header{max-width:1100px;margin:0 auto;padding:18px 18px 8px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.brand{font-size:31px;font-weight:850;letter-spacing:-1.6px;line-height:1}
.tagline{font-size:13px;color:var(--muted);margin-top:4px}
.freshness{font-size:12px;color:var(--muted);text-align:right}
main{max-width:1100px;margin:0 auto;padding:10px 16px 28px}
.direction-wrap{position:sticky;top:0;z-index:500;padding:8px 0 10px;background:linear-gradient(var(--bg) 80%,rgba(244,246,248,0))}
.segmented{display:grid;grid-template-columns:1fr 1fr;background:#e4e8ed;border-radius:14px;padding:4px}
.dir-btn{min-height:45px;border:0;background:transparent;border-radius:11px;color:#526071;font-weight:750;padding:9px 10px;cursor:pointer}
.dir-btn.active{background:var(--card);color:var(--ink);box-shadow:0 2px 8px rgba(14,27,42,.11)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:12px;margin:6px 0 22px}
.hero-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow);min-width:0}
.hero-card.primary{border-top:4px solid var(--accent);background:#f0faf4}
.hero-card.nv{border-top:4px solid var(--nv);background:#f3f7ff}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:850;color:var(--muted)}
.hero-title{font-size:23px;font-weight:820;letter-spacing:-.5px;margin:5px 0}
.price{font-size:42px;font-weight:880;letter-spacing:-1.8px;line-height:1}
.price .nine{font-size:.45em;vertical-align:top;position:relative;top:.08em;margin-left:1px}
.hero-meta{color:var(--muted);font-size:13px;margin-top:8px;display:flex;flex-wrap:wrap;gap:7px 12px}
.hero-note{margin-top:12px;border-radius:10px;padding:9px 11px;background:var(--accent-soft);font-size:13px;color:#256541;font-weight:650}
.nv .hero-note{background:var(--nv-soft);color:#245b9f}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:20px 2px 9px}
.section-head h2{font-size:18px;margin:0 0 2px;letter-spacing:-.3px}
.section-head p{font-size:12px;color:var(--muted);margin:0}
.map-note{font-size:11px;color:var(--muted);white-space:nowrap}
.map{height:360px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#e9edf1;box-shadow:var(--shadow)}
.map-fallback{padding:20px;color:var(--muted)}
.price-marker{background:transparent;border:0}
.price-marker div{background:var(--card);border:2px solid var(--accent);border-radius:12px;padding:5px 8px;font-size:13px;font-weight:850;box-shadow:0 3px 11px rgba(0,0,0,.18);white-space:nowrap}
.price-marker.nv div{border-color:var(--nv)}
.price-marker.watch div{box-shadow:0 0 0 3px rgba(13,91,215,.18),0 3px 11px rgba(0,0,0,.18)}
.leaflet-popup-content-wrapper{border-radius:14px}
.popup-title{font-weight:800;font-size:15px}
.popup-price{font-weight:850;font-size:22px;margin:3px 0}
.popup-meta{color:#657181;font-size:12px;margin-bottom:8px}
.popup-link{display:inline-block;text-decoration:none;background:#0b1320;color:white;padding:8px 10px;border-radius:9px;font-weight:700}
.quiet-btn{border:1px solid var(--line);background:var(--card);min-height:38px;border-radius:10px;padding:0 11px;color:#465365;font-size:12px;font-weight:700;cursor:pointer}
.station-list{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.station-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:13px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.station-row:last-child{border-bottom:0}
.station-row:focus{outline:3px solid rgba(13,91,215,.25);outline-offset:-3px}
.station-name{font-weight:760;min-width:0}
.station-sub{font-size:11px;color:var(--muted);margin-top:2px}
.station-price{font-weight:850;font-size:18px;white-space:nowrap}
.detour{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}
.watch-pill{display:inline-block;font-size:9px;text-transform:uppercase;letter-spacing:.05em;font-weight:850;background:var(--accent-soft);color:#285b9f;padding:3px 5px;border-radius:5px;margin-left:5px;vertical-align:2px}
.method{margin:18px 0 0;background:#eef2f5;border-radius:14px;padding:14px 15px}
.method strong{font-size:13px}
.method p{font-size:12px;line-height:1.5;color:#586576;margin:4px 0 0}
footer{max-width:1100px;margin:0 auto;padding:0 18px 35px;color:var(--muted);font-size:11px;line-height:1.5}
.build-note{opacity:.7}
@media(max-width:650px){
  .site-header{padding-top:14px}.brand{font-size:28px}.tagline{font-size:12px}
  main{padding-left:12px;padding-right:12px}
  .hero-grid{grid-template-columns:1fr;gap:9px;margin-bottom:16px}
  .hero-card{padding:15px 16px}.hero-card.nv{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center}
  .hero-card.nv .hero-note{grid-column:1/-1}.hero-card.nv .price{font-size:33px}
  .hero-title{font-size:20px}.price{font-size:39px}
  .map{height:315px;border-radius:15px}
  .section-head{margin-top:16px}
  .station-row{grid-template-columns:minmax(0,1fr) auto;gap:7px 10px;padding:12px}
  .detour{grid-column:1/-1;text-align:left;margin-top:-3px}
}
@media(max-width:360px){
  .dir-btn{font-size:13px}.freshness{max-width:120px}
  .hero-card.nv{grid-template-columns:1fr}
  .hero-card.nv .price{font-size:36px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.maplibregl-map{font:inherit}
.maplibregl-ctrl-group{border-radius:10px;overflow:hidden}
.maplibregl-ctrl-attrib{font-size:9px}
.price-marker{background:var(--card);border:2px solid var(--accent);border-radius:12px;padding:5px 8px;font-size:13px;font-weight:850;box-shadow:0 3px 11px rgba(0,0,0,.25);white-space:nowrap;color:var(--ink);cursor:pointer}
.price-marker.nv{border-color:var(--nv)}
.price-marker.watch{box-shadow:0 0 0 3px rgba(31,122,77,.22),0 3px 11px rgba(0,0,0,.25)}
.maplibregl-popup-content{border-radius:14px;padding:13px}
.maplibregl-popup-close-button{font-size:18px;padding:4px 7px}