:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #eef2f0;
  color: #17312e;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { min-width: 320px; overflow: hidden; }
button, input, select { font: inherit; }
button, summary, select, input[type="range"], input[type="checkbox"] { touch-action: manipulation; }
button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #5ccfbe80; outline-offset: 2px; }

.app-shell { height: 100dvh; min-height: 620px; overflow: hidden; background: #eef2f0; }
.topbar { position: relative; z-index: 1000; height: 68px; display: grid; grid-template-columns: auto minmax(280px, 620px) auto; align-items: center; gap: 24px; padding: 0 20px; background: #132a2e; color: #f7fbfa; border-bottom: 1px solid #29454a; }
.brand { min-width: 0; display: flex; align-items: center; gap: 10px; font-size: 1.08rem; font-weight: 780; letter-spacing: -.02em; }
.brand-mark { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px 10px 10px 3px; background: #67dbc9; color: #132a2e; }
.snapshot-tag { padding: 4px 7px; border: 1px solid #4c6c6f; border-radius: 5px; color: #9ad7ce; font-size: .7rem; font-weight: 850; letter-spacing: .065em; }
.snapshot-status { display: flex; align-items: center; gap: 9px; color: #d3e2df; text-align: right; }
.snapshot-status > span:last-child { display: grid; gap: 1px; }
.snapshot-status strong { font-size: .78rem; }
.snapshot-status small { color: #91a8a9; font-size: .72rem; }
.status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #67dbc9; box-shadow: 0 0 0 4px #67dbc926; }
.location-search { min-width: 0; position: relative; height: 42px; display: grid; grid-template-columns: auto minmax(120px, 1fr) auto; align-items: center; gap: 8px; padding: 0 5px 0 11px; border: 1px solid #3c575b; border-radius: 10px; background: #203b3f; }
.location-search label { color: #b4c8c7; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.location-search input { min-width: 0; height: 38px; padding: 0; border: 0; outline: 0; background: transparent; color: #fff; font-size: .9rem; }
.location-search input::placeholder { color: #9bb0b1; }
.location-search input[aria-invalid="true"] { color: #ffd4cf; }
.location-search button { height: 32px; min-width: 48px; padding: 0 12px; border: 0; border-radius: 7px; background: #67dbc9; color: #132a2e; font-size: .78rem; font-weight: 850; cursor: pointer; }
.location-search button:hover { background: #83e5d6; }
.location-status { position: absolute; z-index: 1500; top: 47px; right: 0; left: 0; min-height: 36px; padding: 10px 12px; border: 1px solid #b8d2cd; border-radius: 8px; background: #f7fffd; box-shadow: 0 12px 28px #07181735; color: #2d504a; font-size: .75rem; line-height: 1.35; }
.location-status.error { border-color: #e5b2aa; background: #fff7f5; color: #8b342a; }
.location-status[hidden] { display: none; }

.workspace { height: calc(100dvh - 68px); display: grid; grid-template-columns: 390px minmax(0, 1fr); }
.sidebar { min-width: 0; min-height: 0; z-index: 500; display: flex; flex-direction: column; overflow: hidden; background: #f7f9f8; border-right: 1px solid #cfd8d5; box-shadow: 8px 0 30px #17312d0a; }
.intro { padding: 20px 20px 12px; }
.eyebrow { margin: 0 0 5px; color: #62736f; font-size: .8rem; font-weight: 750; }
.intro h1 { margin: 0; max-width: 330px; font-size: 1.38rem; line-height: 1.16; letter-spacing: -.035em; }
.snapshot-note { margin: 9px 0 0; color: #687975; font-size: .78rem; line-height: 1.45; }
.controls { display: grid; gap: 10px; padding: 0 20px 14px; border-bottom: 1px solid #dce4e1; }
.search-field { display: grid; gap: 5px; color: #566864; font-size: .8rem; font-weight: 760; }
.search-field input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #cedbd7; border-radius: 9px; background: #fff; color: #18332f; font-size: .875rem; }
.filter-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.select-field { min-width: 0; display: grid; gap: 4px; color: #61716e; font-size: .72rem; font-weight: 750; }
.select-field select { width: 100%; height: 38px; padding: 0 7px; border: 1px solid #d1dcda; border-radius: 8px; background: #fff; color: #2a433f; font-size: .76rem; }
.network-picker { position: relative; align-self: end; }
.network-picker summary { height: 38px; display: flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid #d1dcda; border-radius: 8px; background: #fff; color: #2a433f; font-size: .76rem; font-weight: 750; cursor: pointer; list-style: none; }
.network-picker summary::-webkit-details-marker { display: none; }
.network-picker summary span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.network-picker summary b { min-width: 21px; height: 21px; display: grid; place-items: center; padding: 0 5px; border-radius: 11px; background: #e1f1ee; color: #08746b; font-size: .68rem; }
.network-menu { position: absolute; z-index: 1400; top: 44px; left: 0; width: 250px; overflow: hidden; padding: 7px; border: 1px solid #ccd8d5; border-radius: 11px; background: #fff; box-shadow: 0 16px 40px #122b2730; }
.network-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding-bottom: 6px; border-bottom: 1px solid #e2e8e6; }
.network-actions button { min-height: 32px; border: 0; border-radius: 7px; background: #eaf5f2; color: #08746b; font-size: .73rem; font-weight: 800; cursor: pointer; }
.network-options { max-height: 248px; overflow-y: auto; padding-top: 5px; scrollbar-width: thin; }
.network-options label { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 5px 7px; border-radius: 7px; color: #344a46; font-size: .78rem; cursor: pointer; }
.network-options label:hover { background: #edf5f3; }
.network-options input, .check-filter input { accent-color: #078d82; }
.price-filter { display: grid; gap: 7px; padding: 10px 11px 8px; border: 1px solid #d4dfdc; border-radius: 9px; background: #fff; }
.price-filter > div:first-child { display: flex; justify-content: space-between; gap: 12px; }
.price-filter label { color: #3e5551; font-size: .82rem; font-weight: 780; }
.price-filter output { color: #08746b; font-size: .78rem; font-weight: 850; }
.price-filter input { width: 100%; accent-color: #078d82; }
.price-scale { display: flex; justify-content: space-between; color: #798783; font-size: .72rem; }
.check-filter { display: flex; align-items: center; gap: 9px; min-height: 45px; padding: 7px 10px; border: 1px solid #84c8bd; border-radius: 9px; background: #f0f9f7; cursor: pointer; }
.check-filter input { width: 17px; height: 17px; flex: 0 0 auto; }
.check-filter span { display: grid; gap: 1px; }
.check-filter b { color: #29443f; font-size: .82rem; }
.check-filter small { color: #687a76; font-size: .72rem; line-height: 1.25; }
.reset-button { height: 35px; border: 1px solid #d1dcda; border-radius: 8px; background: #fff; color: #536661; font-size: .78rem; font-weight: 780; cursor: pointer; }
.reset-button:hover { background: #edf4f2; }

.station-list { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 24px; scrollbar-color: #a8b8b4 transparent; scrollbar-width: thin; }
.station-card { width: 100%; min-height: 116px; position: relative; display: grid; grid-template-columns: 1fr 76px; gap: 10px; padding: 15px 14px 14px 19px; border: 0; border-bottom: 1px solid #e0e6e3; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.station-card:hover, .station-card.active { background: #fff; }
.station-card.active { box-shadow: inset 4px 0 #078d82; }
.station-main { min-width: 0; display: flex; flex-direction: column; }
.station-network { margin-bottom: 4px; color: #6a7975; font-size: .68rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.station-name { overflow: hidden; color: #1f3834; font-size: .93rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.station-city { margin-top: 4px; overflow: hidden; color: #75837f; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.station-meta { margin-top: 11px; color: #63736f; font-size: .7rem; }
.station-price { align-self: center; display: grid; text-align: right; }
.station-price strong { color: #08746b; font-size: 1.25rem; letter-spacing: -.04em; }
.station-price small { color: #7b8985; font-size: .68rem; }
.list-note, .empty-state { padding: 24px 20px; color: #6b7a76; text-align: center; font-size: .8rem; line-height: 1.5; }

.map-wrap { min-width: 0; position: relative; overflow: hidden; background: #e5ebe8; }
.map { width: 100%; height: 100%; background: #e5ebe8; }
.leaflet-tile-pane { filter: saturate(.72) contrast(.93); }
.leaflet-control-attribution { font-size: .6rem !important; }
.map-badge { position: absolute; z-index: 600; top: 15px; left: 16px; display: flex; align-items: center; gap: 7px; min-height: 35px; padding: 0 11px; border: 1px solid #d2dcda; border-radius: 9px; background: #fffffff2; box-shadow: 0 5px 18px #17312d18; color: #3b514d; font-size: .75rem; font-weight: 780; }
.map-badge span { color: #078d82; }
.locate-button { position: absolute; z-index: 600; top: 15px; right: 15px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #ced9d6; border-radius: 9px; background: #fff; box-shadow: 0 5px 18px #17312d18; color: #0b746c; font-size: 1.4rem; cursor: pointer; }
.price-marker-wrap, .cluster-marker-wrap { background: transparent; border: 0; }
.price-marker { min-width: 72px; height: 35px; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 0 8px; border: 1px solid #cbd7d3; border-left: 4px solid var(--marker-color, #647a76); border-radius: 9px 9px 9px 2px; background: #fff; box-shadow: 0 4px 12px #1b302b2b; color: #17322e; white-space: nowrap; }
.price-marker.with-next { min-width: 94px; height: 48px; flex-direction: column; gap: 2px; padding: 5px 8px 4px; }
.price-marker.wide { height: 47px; flex-direction: column; gap: 1px; }
.price-marker.wide.with-next { min-width: 100px; height: 61px; gap: 2px; }
.price-marker .marker-network { max-width: 92px; overflow: hidden; color: #5e706c; font-size: .56rem; font-weight: 900; letter-spacing: .05em; text-overflow: ellipsis; text-transform: uppercase; }
.price-marker .marker-line { display: flex; align-items: baseline; gap: 2px; }
.price-marker b { font-size: .85rem; }
.price-marker .marker-next { color: #7a8985; font-size: .63rem; font-weight: 650; line-height: 1.08; text-align: center; }
.price-marker.with-next .marker-next { font-size: .48rem; font-weight: 750; }
.price-marker.h0 { --marker-color: #d34c45; }.price-marker.h1 { --marker-color: #078d82; }.price-marker.h2 { --marker-color: #2679a8; }.price-marker.h3 { --marker-color: #6958b5; }.price-marker.h4 { --marker-color: #4f874e; }.price-marker.h5 { --marker-color: #9a5a15; }
.cluster-marker { width: 54px; height: 54px; display: grid; place-content: center; border: 3px solid #fff; border-radius: 50%; background: #34585b; box-shadow: 0 5px 16px #1a343645; color: #fff; text-align: center; line-height: 1; }
.cluster-marker b { font-size: .9rem; }.cluster-marker small { margin-top: 3px; font-size: .55rem; font-weight: 750; text-transform: uppercase; }
.detail-card { position: absolute; z-index: 650; right: 18px; bottom: 20px; width: min(390px, calc(100% - 36px)); max-height: calc(100% - 88px); overflow-y: auto; padding: 20px; border: 1px solid #d2dcda; border-radius: 16px 16px 16px 4px; background: #fffffff8; box-shadow: 0 20px 55px #10282238; backdrop-filter: blur(12px); }
.detail-card[hidden] { display: none; }
.detail-close { position: absolute; top: 12px; right: 12px; width: 31px; height: 31px; display: grid; place-items: center; border: 0; border-radius: 8px; background: #edf2f0; color: #314945; font-size: 1.25rem; cursor: pointer; }
.detail-network { margin: 0; padding-right: 36px; color: #08786f; font-size: .7rem; font-weight: 900; letter-spacing: .055em; text-transform: uppercase; }
.detail-card h2 { margin: 10px 0 4px; font-size: 1.28rem; line-height: 1.18; letter-spacing: -.03em; }
.detail-address { margin: 0; color: #72817d; font-size: .8rem; line-height: 1.4; }
.detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0; overflow: hidden; border: 1px solid #dde5e2; border-radius: 10px; }
.detail-stats span { min-width: 0; display: grid; gap: 2px; padding: 10px 8px; border-right: 1px solid #dde5e2; text-align: center; }
.detail-stats span:last-child { border-right: 0; }.detail-stats b { font-size: .78rem; }.detail-stats small { color: #7a8884; font-size: .66rem; }
.detail-card h3 { margin: 0 0 6px; font-size: .86rem; }
.detail-rates { display: grid; }
.rate-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid #e5eae8; color: #5e706c; font-size: .76rem; }
.rate-row b { color: #17322e; white-space: nowrap; }
.no-price { padding: 10px; border-radius: 8px; background: #eef3f1; color: #667672; font-size: .77rem; }
.detail-source { margin: 11px 0; color: #72807d; font-size: .7rem; line-height: 1.4; }
.provider-link { display: inline-flex; min-height: 34px; align-items: center; padding: 0 10px; border: 1px solid #cad9d5; border-radius: 8px; background: #fff; color: #08746b; font-size: .75rem; font-weight: 800; text-decoration: none; }
.load-error { position: absolute; z-index: 700; inset: 0; display: grid; place-content: center; gap: 5px; background: #e7eeeb; color: #52645f; text-align: center; }.load-error[hidden] { display: none; }.load-error strong { color: #223c37; font-size: 1rem; }
.noscript { position: fixed; z-index: 9999; inset: 0; display: grid; place-items: center; padding: 24px; background: #132a2e; color: #fff; text-align: center; }

@media (max-width: 760px) {
  body { overflow: auto; }
  .app-shell { min-height: 760px; overflow: visible; }
  .topbar { display: none; }
  .workspace { height: auto; min-height: 100dvh; display: flex; flex-direction: column; }
  .map-wrap { order: -1; height: 52dvh; min-height: 390px; }
  .sidebar { height: 700px; min-height: 560px; border-right: 0; border-top: 1px solid #cad5d2; }
  .intro { padding-top: 17px; }
  .filter-grid { grid-template-columns: minmax(0, 1fr); }.network-picker { grid-column: auto; }.network-menu { width: min(310px, calc(100vw - 40px)); }
  .detail-card { right: 10px; bottom: 10px; width: calc(100% - 20px); max-height: 68%; padding: 17px; }
  .map-badge { top: 10px; left: 10px; max-width: calc(100% - 65px); }.locate-button { top: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}