:root {
  --bg: #f5f7fa;
  --panel: rgba(255,255,255,.96);
  --surface: #ffffff;
  --surface-muted: #eef2f5;
  --line: #dfe5ea;
  --text: #15202b;
  --muted: #6d7882;
  --green: #168a49;
  --green-soft: #e3f5eb;
  --orange: #d96a14;
  --yellow: #a57600;
  --red: #c83e43;
  --shadow: 0 12px 30px rgba(18, 31, 42, .12);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; overscroll-behavior: none; }
body { overflow-x: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.topbar { position: fixed; inset: 0 0 auto; z-index: 1000; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(18px, calc((100vw - 1280px) / 2)); background: rgba(255,255,255,.88); border-bottom: 1px solid rgba(31,47,61,.1); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-size: 17px; letter-spacing: 0; }
.brand strong { font-weight: 800; color: var(--green); }
.brand-mark { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--green); box-shadow: 0 6px 14px rgba(22,138,73,.22); }
.brand-mark::before { content: ""; width: 13px; height: 16px; border: 2px solid #fff; border-radius: 2px; }
.brand-mark::after { content: ""; position: absolute; right: 5px; top: 9px; width: 7px; height: 14px; border: 2px solid #fff; border-left: 0; border-radius: 0 4px 4px 0; }
.brand-mark span { position: absolute; width: 7px; height: 5px; border-radius: 1px; background: var(--green); border: 1px solid #fff; }
.topbar-actions { display: flex; gap: 8px; }
.icon-button, .close-button { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text); font-size: 20px; text-decoration: none; }
.icon-button:hover, .close-button:hover { border-color: var(--green); color: var(--green); }
.favorites-button.has-favorites { border-color: #d4a100; color: #a57600; }
.favorite-badge { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid var(--panel); border-radius: 9px; background: var(--green); color: #fff; font-size: 9px; font-weight: 800; line-height: 1; }
.connection-banner { position: fixed; z-index: 950; top: 68px; left: 0; right: 0; padding: 7px 16px; background: #8a5a00; color: #fff; font-size: 12px; font-weight: 700; text-align: center; }

.app-shell { min-height: 100vh; padding-top: 68px; }
.map-wrap { position: fixed; inset: 68px 0 0 0; }
#map { position: absolute; inset: 0; background: #dce6ec; touch-action: none; overscroll-behavior: none; }
.map-tools { position: absolute; z-index: 500; right: 18px; top: 18px; display: grid; gap: 8px; }
.map-tool { width: 42px; height: 42px; border: 0; border-radius: 12px; background: rgba(255,255,255,.96); color: var(--text); font-size: 22px; box-shadow: var(--shadow); }
.map-tool:disabled { cursor: wait; opacity: .58; }
.map-tool:hover { color: var(--green); }
.map-credit { position: absolute; z-index: 500; right: 8px; bottom: 7px; display: flex; flex-direction: row-reverse; align-items: center; gap: 5px; pointer-events: auto; }
.map-credit-button { flex: 0 0 auto; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.78); color: #42535e; font: italic 700 12px/20px Georgia, "Times New Roman", serif; text-align: center; box-shadow: 0 2px 8px rgba(18,31,42,.12); backdrop-filter: blur(3px); }
.map-credit-button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.map-credit-text { display: none; max-width: min(70vw, 430px); padding: 4px 7px; border-radius: 7px; background: rgba(255,255,255,.84); color: #50606b; font-size: 10px; line-height: 1.2; white-space: nowrap; box-shadow: 0 2px 8px rgba(18,31,42,.1); backdrop-filter: blur(3px); }
.map-credit[data-open="true"] .map-credit-text { display: inline-block; }
@media (hover: hover) { .map-credit:hover .map-credit-text { display: inline-block; } }
.map-credit-text a { color: #263d4a; text-decoration: none; }
.map-credit-text a:hover { text-decoration: underline; }
.leaflet-control-zoom { margin: 18px 0 0 18px !important; border: 0 !important; box-shadow: var(--shadow) !important; }
.leaflet-control-zoom a { width: 42px !important; height: 42px !important; line-height: 42px !important; color: var(--text) !important; border: 0 !important; }
.leaflet-control-zoom a:first-child { border-radius: 12px 12px 0 0 !important; border-bottom: 1px solid var(--line) !important; }
.leaflet-control-zoom a:last-child { border-radius: 0 0 12px 12px !important; }
.marker-pin { width: 31px; height: 31px; border: 3px solid #fff; border-radius: 50% 50% 50% 3px; transform: rotate(-45deg); box-shadow: 0 3px 9px rgba(0,0,0,.25); display: grid; place-items: center; }
.marker-pin::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.marker-pin.yes { background: #1fa35a; }
.marker-pin.queue { background: #ef8a2c; }
.marker-pin.low { background: #d0a10d; }
.marker-pin.no { background: #d65054; }
.marker-pin.unknown { background: #7d8a95; }
.cluster { display: grid; place-items: center; width: 42px; height: 42px; border: 4px solid rgba(255,255,255,.92); border-radius: 50%; background: #193f57; color: #fff; font-weight: 800; box-shadow: 0 5px 14px rgba(18,31,42,.25); }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: transparent !important; }

.control-panel { position: fixed; z-index: 600; left: max(18px, calc((100vw - 1280px) / 2)); bottom: 18px; width: min(520px, calc(100vw - 36px)); max-height: calc(100vh - 104px); overflow: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 19px; border: 1px solid rgba(31,47,61,.1); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(18px); transition: max-height .22s ease, transform .22s ease; }
.control-panel.is-dragging { transition: none; }
.control-panel.is-settling { transition: max-height .22s ease, transform .22s ease; }
.panel-handle { display: none; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.eyebrow { margin: 0 0 4px; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 24px; line-height: 1.1; letter-spacing: 0; }
h2 { margin-bottom: 0; font-size: 22px; line-height: 1.2; }
.location-pill, .sort-button { border: 0; background: transparent; color: var(--green); font-weight: 700; white-space: nowrap; }
.location-pill span, .sort-button span { margin-left: 5px; color: var(--muted); }
.search-row { display: flex; gap: 8px; margin-top: 17px; }
.search-box { display: flex; align-items: center; gap: 8px; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--muted); }
.search-box:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(22,138,73,.1); }
.search-box input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); }
.search-box input::placeholder { color: #9aa4ad; }
.search-row .search-box { flex: 1; }
.primary-action, .submit-button { border: 0; border-radius: 11px; background: var(--green); color: #fff; font-weight: 800; box-shadow: 0 8px 16px rgba(22,138,73,.18); }
.primary-action { padding: 0 14px; white-space: nowrap; }
.primary-action span { font-size: 18px; margin-right: 3px; }
.suggestions { position: absolute; left: 19px; right: 19px; top: 125px; z-index: 5; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.suggestion { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: left; }
.suggestion:hover { background: var(--surface-muted); }
.suggestion small { color: var(--muted); }
.filter-row { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 12px 0 2px; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip, .fuel-chip { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 8px 11px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 700; }
.filter-chip.active, .fuel-chip.active { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.filter-chip i, .dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: currentColor; }
.status-yes { color: var(--green); }.status-queue { color: var(--orange); }.status-low { color: var(--yellow); }.status-no { color: var(--red); }
.filter-label { margin-right: 2px; color: var(--muted); font-size: 12px; font-weight: 700; }
.fuel-row { padding-top: 8px; }
.list-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; padding-bottom: 9px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.list-summary strong { color: var(--text); font-size: 16px; }
.station-list { display: grid; gap: 8px; padding-top: 10px; }
.station-ssr-card { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.station-ssr-card h2 { overflow-wrap: anywhere; font-size: 18px; }
.station-ssr-address { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.station-ssr-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.station-ssr-facts span { min-width: 0; padding: 9px 10px; border-radius: 7px; background: var(--surface-muted); }
.station-ssr-facts small, .station-ssr-facts strong { display: block; overflow-wrap: anywhere; }
.station-ssr-facts small { margin-bottom: 3px; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.station-ssr-facts strong { font-size: 12px; }
.station-ssr-note { margin: 13px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.station-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 30px; gap: 10px; align-items: center; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
.station-card > div { min-width: 0; }
.station-card:hover { border-color: rgba(22,138,73,.5); transform: translateY(-1px); }
.status-dot { width: 11px; height: 11px; border-radius: 50%; }
.status-dot.yes, .dot.yes { background: var(--green); }.status-dot.queue, .dot.queue { background: var(--orange); }.status-dot.low, .dot.low { background: #c69b0d; }.status-dot.no, .dot.no { background: var(--red); }.status-dot.unknown { background: #7d8a95; }
.station-name { overflow: hidden; color: var(--text); font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.station-meta { overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.station-right { text-align: right; white-space: nowrap; }.station-status { font-size: 12px; font-weight: 800; }.station-age { margin-top: 3px; color: var(--muted); font-size: 10px; }
.station-status.yes { color: var(--green); }.station-status.queue { color: var(--orange); }.station-status.low { color: var(--yellow); }.station-status.no { color: var(--red); }.station-status.unknown { color: var(--muted); }
.station-favorite, .detail-icon-button, .favorite-remove { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; }
.station-favorite:hover, .station-favorite.selected, .detail-icon-button:hover, .detail-icon-button.selected, .favorite-remove { color: #a57600; }
.station-favorite:focus-visible, .detail-icon-button:focus-visible, .favorite-remove:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.legal-note { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.empty-state { padding: 24px 8px; color: var(--muted); font-size: 13px; text-align: center; }

.modal { width: min(480px, calc(100vw - 30px)); max-height: min(720px, calc(100vh - 30px)); padding: 19px; border: 0; border-radius: 18px; background: var(--panel); color: var(--text); box-shadow: 0 24px 80px rgba(5,20,29,.3); }
.modal::backdrop { background: rgba(10,22,30,.38); backdrop-filter: blur(4px); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.close-button { flex: 0 0 auto; font-size: 24px; line-height: 1; }
.modal-search { margin-bottom: 10px; }
.city-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; max-height: 420px; overflow: auto; }
.city-option { display: flex; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--text); text-align: left; }.city-option:hover { border-color: var(--green); }.city-option small { color: var(--muted); }
.favorites-list { display: grid; gap: 8px; max-height: min(520px, calc(100vh - 150px)); overflow-y: auto; }
.favorite-card { display: grid; grid-template-columns: minmax(0, 1fr) 38px; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.favorite-open { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 0; background: transparent; color: var(--text); text-align: left; }
.favorite-open > span:last-child { min-width: 0; }
.favorite-open strong, .favorite-open small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.favorite-open strong { font-size: 14px; }
.favorite-open small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.favorite-card:hover { border-color: rgba(22,138,73,.5); }
.station-detail { display: grid; gap: 13px; }.detail-status { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; background: var(--green-soft); color: var(--green); font-weight: 800; }.detail-status.queue { background: #fff0e4; color: var(--orange); }.detail-status.low { background: #fff7d9; color: var(--yellow); }.detail-status.no { background: #fde9e9; color: var(--red); }.detail-status.unknown { background: var(--surface-muted); color: var(--muted); }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }.detail-item { padding: 11px; border-radius: 11px; background: var(--surface-muted); }.detail-item span { display: block; color: var(--muted); font-size: 11px; }.detail-item strong { display: block; margin-top: 3px; font-size: 15px; }
.detail-actions { display: flex; gap: 8px; }.detail-actions button { flex: 1; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-weight: 700; }.detail-actions button.primary { border-color: var(--green); background: var(--green); color: #fff; }
.detail-utility-actions { display: flex; justify-content: flex-end; gap: 5px; padding-top: 2px; border-top: 1px solid var(--line); }
.detail-icon-button { width: 38px; height: 38px; }
.notification-action { width: 100%; min-height: 42px; border: 1px solid var(--green); border-radius: 8px; background: var(--surface); color: var(--green); font-weight: 800; }
.notification-action.active { background: var(--green-soft); }
.notification-action:disabled { cursor: wait; opacity: .6; }
.telegram-action { color: var(--green); font-size: 12px; font-weight: 700; text-align: center; text-decoration: none; }
.field-label { display: grid; gap: 7px; margin: 13px 0; color: var(--muted); font-size: 12px; font-weight: 700; }.field-label input, .field-label select { width: 100%; height: 43px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: var(--surface); color: var(--text); }.field-label input:focus, .field-label select:focus { border-color: var(--green); }
.form-trap { position: fixed; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.report-status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }.report-status { height: 46px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 700; }.report-status.selected { border-color: var(--green); background: var(--green-soft); color: var(--green); }.report-status .dot { margin-right: 3px; }
.fuel-checks { display: flex; flex-wrap: wrap; gap: 7px; }.fuel-checks label { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); font-size: 12px; }.fuel-checks input { accent-color: var(--green); }
.submit-button { width: 100%; height: 46px; margin-top: 8px; }.form-message { min-height: 18px; margin: 10px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.toast { position: fixed; z-index: 3000; left: 50%; bottom: 28px; max-width: calc(100vw - 32px); padding: 11px 14px; border-radius: 999px; background: #15202b; color: #fff; font-size: 13px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: .2s ease; }.toast.show { opacity: 1; transform: translate(-50%,0); }

.offline-page { min-height: 100vh; padding: 24px; display: grid; place-items: center; }
.offline-shell { width: min(460px, 100%); text-align: center; }
.offline-mark { display: grid; margin: 0 auto 22px; }
.offline-shell h1 { margin-bottom: 12px; }
.offline-shell p:not(.eyebrow) { max-width: 390px; margin: 0 auto 24px; color: var(--muted); line-height: 1.6; }
.offline-retry { min-width: 150px; height: 44px; border: 0; border-radius: 10px; background: var(--green); color: #fff; font-weight: 800; }

.license-page { min-height: 100vh; padding: 32px 18px; }.license-shell { width: min(760px, 100%); margin: 0 auto; padding: clamp(24px, 5vw, 52px); border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }.license-shell h1 { margin: 14px 0 26px; }.license-shell h2 { margin: 28px 0 8px; font-size: 18px; }.license-shell p { color: var(--muted); line-height: 1.6; }.license-shell a { color: var(--green); }.license-back { color: var(--green); font-size: 13px; font-weight: 700; text-decoration: none; }

.updates-page { min-height: 100vh; background: var(--surface); }
.updates-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 0 max(18px, calc((100vw - 1040px) / 2)); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(14px); }
.updates-map-link, .update-back { color: var(--green); font-size: 13px; font-weight: 800; text-decoration: none; }
.updates-shell { width: min(920px, calc(100% - 36px)); min-height: calc(100vh - 150px); margin: 0 auto; padding: 52px 0 72px; }
.updates-heading { margin-bottom: 28px; }
.updates-heading h1, .update-article h1 { margin: 0; font-size: 34px; letter-spacing: 0; }
.updates-list { border-top: 1px solid var(--line); }
.update-item { display: grid; gap: 8px; padding: 24px 4px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.update-item:hover strong { color: var(--green); }
.update-item strong { font-size: 21px; }
.update-item > span:last-child { max-width: 720px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.update-meta { color: var(--green); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.update-article { width: min(720px, 100%); }
.update-article .update-meta { margin: 30px 0 8px; }
.update-lead { margin: 18px 0 34px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.update-article section { margin: 34px 0; }
.update-article section h2 { margin-bottom: 12px; font-size: 22px; }
.update-article section p { color: #44515b; font-size: 16px; line-height: 1.75; }
.update-share { min-width: 130px; height: 42px; border: 1px solid var(--green); border-radius: 8px; background: var(--surface); color: var(--green); font-weight: 800; }
.content-ad { min-height: 190px; margin: 38px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.content-ad[hidden] { display: none; }
.content-ad-label, .partner-offer-label { display: block; margin: 0 0 10px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.rsya-slot { min-height: 160px; }
.rsya-placeholder { width: 100%; height: 160px; background: var(--surface-muted); }
.rsya-preview { display: grid; align-content: center; justify-items: center; gap: 6px; min-height: 160px; border: 1px dashed var(--line); background: var(--surface-muted); color: var(--muted); text-align: center; }
.rsya-preview strong { color: var(--text); font-size: 15px; }
.rsya-preview span { font-size: 12px; }
.partner-offer { margin: 42px 0 28px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.partner-offer h2 { margin: 0 0 10px; font-size: 20px; }
.partner-offer > p:not(.partner-offer-label) { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.partner-offer-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border: 0; border-radius: 7px; background: var(--green); color: #fff; font: inherit; font-size: 13px; font-weight: 800; text-decoration: none; cursor: pointer; }
.partner-offer-preview { background: #43515b; }
.partner-offer small { display: block; margin-top: 12px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.updates-footer { width: min(920px, calc(100% - 36px)); margin: 0 auto; padding: 22px 0 30px; border-top: 1px solid var(--line); }
.updates-footer a { color: var(--muted); font-size: 12px; }

.seo-page { min-height: 100vh; background: var(--surface); }
.seo-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 0 max(18px, calc((100vw - 1120px) / 2)); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.95); backdrop-filter: blur(14px); }
.seo-topbar nav { display: flex; align-items: center; gap: 22px; }
.seo-topbar nav a { color: var(--muted); font-size: 13px; font-weight: 750; text-decoration: none; }
.seo-topbar nav a:hover { color: var(--green); }
.seo-shell { width: min(1040px, calc(100% - 36px)); min-height: calc(100vh - 148px); margin: 0 auto; padding: 34px 0 76px; }
.seo-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.seo-breadcrumbs a { color: var(--green); text-decoration: none; }
.seo-heading { max-width: 780px; padding: 52px 0 38px; }
.seo-heading h1 { margin: 8px 0 16px; font-size: 40px; line-height: 1.14; }
.seo-heading > p:last-child { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.seo-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.seo-stats div { min-width: 0; padding: 22px 20px; border-right: 1px solid var(--line); }
.seo-stats div:first-child { padding-left: 0; }
.seo-stats div:last-child { border-right: 0; }
.seo-stats strong, .seo-stats span { display: block; }
.seo-stats strong { margin-bottom: 4px; font-size: 24px; overflow-wrap: anywhere; }
.seo-stats span { color: var(--muted); font-size: 12px; line-height: 1.35; }
.seo-map-action { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 34px 0 50px; padding: 22px 24px; border: 1px solid #b8dfc8; border-radius: 8px; background: var(--green-soft); }
.seo-map-action div { display: grid; gap: 5px; }
.seo-map-action strong { font-size: 16px; }
.seo-map-action span { color: #3f6952; font-size: 13px; line-height: 1.45; }
.seo-map-action a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 7px; background: var(--green); color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; }
.seo-section { margin: 50px 0; }
.seo-section h2 { margin: 0 0 20px; font-size: 24px; }
.seo-copy { max-width: 760px; }
.seo-copy p { margin: 0 0 14px; color: #44515b; font-size: 16px; line-height: 1.72; }
.seo-copy a { color: var(--green); font-weight: 700; }
.seo-location-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.seo-location-grid > a { display: grid; gap: 7px; min-width: 0; padding: 17px 18px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); text-decoration: none; }
.seo-location-grid > a:hover { border-color: rgba(22,138,73,.55); }
.seo-location-grid strong { font-size: 16px; overflow-wrap: anywhere; }
.seo-location-grid span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.seo-link-list, .seo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.seo-link-list a, .seo-chips a { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); font-size: 13px; text-decoration: none; }
.seo-link-list a:hover, .seo-chips a:hover { border-color: var(--green); color: var(--green); }
.seo-link-list span, .seo-chips span { color: var(--muted); font-size: 11px; }
.seo-note { margin: 13px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.seo-station-list { border-top: 1px solid var(--line); }
.seo-station { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 0; padding: 16px 2px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.seo-station:hover strong { color: var(--green); }
.seo-station-main { display: grid; gap: 5px; min-width: 0; }
.seo-station-main strong { font-size: 15px; overflow-wrap: anywhere; }
.seo-station small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.seo-station-meta { flex: 0 0 290px; display: grid; justify-items: end; gap: 6px; min-width: 0; text-align: right; }
.seo-station-meta > span { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; color: var(--muted); font-size: 11px; }
.seo-station-meta i { padding: 3px 6px; border-radius: 4px; background: var(--surface-muted); color: var(--text); font-size: 10px; font-style: normal; }
.seo-article-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.seo-article-links a { display: grid; gap: 8px; padding: 17px 18px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); text-decoration: none; }
.seo-article-links a:hover strong { color: var(--green); }
.seo-article-links strong { font-size: 15px; line-height: 1.35; }
.seo-article-links span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.seo-empty { max-width: 620px; padding: 28px 0; border-top: 1px solid var(--line); }
.seo-empty p { color: var(--muted); line-height: 1.6; }
.seo-empty a { color: var(--green); font-weight: 800; }
.seo-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(1040px, calc(100% - 36px)); margin: 0 auto; padding: 24px 0 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.seo-footer a { color: var(--muted); }

@media (max-width: 760px) {
  .topbar { height: 60px; padding: 0 14px; }
  .brand > span:last-child { display: none; }
  .connection-banner { top: 60px; }
  .app-shell { padding-top: 60px; }
  .map-wrap { inset: 60px 0 0; }
  .control-panel { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: min(70vh, 680px); padding: 15px; border-radius: 17px; }
  .panel-handle { position: relative; display: block; width: 52px; height: 28px; margin: -8px auto 5px; padding: 8px 7px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); touch-action: none; user-select: none; }
  .panel-handle span { display: block; width: 38px; height: 4px; margin: 0 auto; border-radius: 99px; background: #c5ced5; }
  .panel-handle::after { content: "⌃"; position: absolute; top: 8px; right: -12px; color: var(--muted); font-size: 11px; line-height: 1; }
  .panel-handle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
  .control-panel.is-collapsed { max-height: 94px; overflow: hidden; }
  .control-panel.is-collapsed .panel-handle { margin-bottom: 4px; }
  .control-panel.is-collapsed .panel-handle::after { content: "⌄"; }
  h1 { font-size: 21px; }
  .primary-action { padding: 0 11px; }
  .station-card { grid-template-columns: auto minmax(0, 1fr) 30px; gap: 9px; }
  .station-ssr-facts { grid-template-columns: 1fr; }
  .station-right { display: none; }
  .map-tools { top: 13px; right: 12px; }
  .map-credit { top: 112px; right: auto; bottom: auto; left: 12px; flex-direction: row; }
  .map-credit-text { max-width: calc(100vw - 54px); overflow: hidden; text-overflow: ellipsis; }
  .leaflet-control-zoom { margin: 13px 0 0 12px !important; }
  .updates-topbar { min-height: 60px; padding: 0 14px; }
  .updates-topbar .brand > span:last-child { display: inline; }
  .updates-shell { width: calc(100% - 28px); padding: 34px 0 54px; }
  .updates-heading h1, .update-article h1 { font-size: 28px; }
  .update-item { padding: 20px 2px; }
  .update-item strong { font-size: 18px; }
  .update-lead { font-size: 16px; }
  .content-ad { min-height: 170px; margin: 30px 0; }
  .rsya-slot, .rsya-placeholder, .rsya-preview { min-height: 140px; height: 140px; }
  .partner-offer { padding: 18px; }
  .seo-topbar { min-height: 60px; padding: 0 14px; }
  .seo-topbar .brand > span:last-child { display: none; }
  .seo-topbar nav { gap: 14px; }
  .seo-topbar nav a { font-size: 12px; }
  .seo-shell { width: calc(100% - 28px); padding: 24px 0 52px; }
  .seo-heading { padding: 38px 0 28px; }
  .seo-heading h1 { font-size: 30px; }
  .seo-heading > p:last-child { font-size: 15px; }
  .seo-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-stats div { padding: 17px 12px; border-bottom: 1px solid var(--line); }
  .seo-stats div:nth-child(2) { border-right: 0; }
  .seo-stats div:nth-last-child(-n+2) { border-bottom: 0; }
  .seo-stats div:first-child { padding-left: 12px; }
  .seo-stats strong { font-size: 20px; }
  .seo-map-action { align-items: flex-start; flex-direction: column; margin: 26px 0 38px; padding: 18px; }
  .seo-map-action a { width: 100%; justify-content: center; }
  .seo-section { margin: 40px 0; }
  .seo-section h2 { font-size: 21px; }
  .seo-location-grid, .seo-article-links { grid-template-columns: 1fr; }
  .seo-station { align-items: flex-start; flex-direction: column; gap: 10px; }
  .seo-station-meta { flex: none; width: 100%; justify-items: start; text-align: left; }
  .seo-station-meta > span { justify-content: flex-start; }
  .seo-footer { align-items: flex-start; flex-direction: column; width: calc(100% - 28px); }
}

html.dark { --bg: #0c1318; --panel: rgba(17,27,34,.96); --surface: #142129; --surface-muted: #1b2b34; --line: #2a3a44; --text: #ecf4f4; --muted: #9eb0b8; --green-soft: #183b2b; --shadow: 0 15px 36px rgba(0,0,0,.3); }
html.dark .topbar { background: rgba(13,22,28,.9); border-color: rgba(255,255,255,.08); }
html.dark .map-credit-button { background: rgba(11,20,26,.68); color: rgba(255,255,255,.88); box-shadow: 0 2px 9px rgba(0,0,0,.28); }
html.dark .map-credit-text { background: rgba(11,20,26,.76); color: rgba(255,255,255,.72); box-shadow: 0 2px 9px rgba(0,0,0,.24); }
html.dark .map-credit-text a { color: rgba(255,255,255,.92); }
html.dark .detail-status.queue { background: #3b291d; }.dark .detail-status.low { background: #3e351b; }.dark .detail-status.no { background: #3d2325; }
html.dark .updates-topbar { background: rgba(13,22,28,.94); }
html.dark .update-article section p { color: #c2cfd4; }
html.dark .seo-topbar { background: rgba(13,22,28,.94); }
html.dark .seo-copy p { color: #c2cfd4; }

/* Fullscreen map workspace */
:root {
  --panel: rgba(255,255,255,.97);
  --surface-muted: #f3f6f7;
  --line: #dde4e7;
  --text: #172126;
  --muted: #69767d;
  --green: #169653;
  --green-soft: #e9f7ef;
  --shadow: 0 12px 34px rgba(24,42,50,.13);
}

html, body { font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.app-shell { min-height: 100dvh; padding: 0; }
.map-wrap { inset: 0; }
.connection-banner { top: 0; z-index: 1200; }

.control-panel .brand { min-width: 0; font-size: 16px; }
.control-panel .brand-mark { display: block; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 8px; background: none; object-fit: cover; box-shadow: 0 7px 16px rgba(22,150,83,.2); }
.control-panel .brand-mark::before,
.control-panel .brand-mark::after { content: none; }
.panel-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-utility-actions { position: relative; display: flex; align-items: center; gap: 5px; }
.panel-utility-actions .icon-button { width: 36px; height: 36px; border-radius: 8px; font-size: 18px; box-shadow: none; }
.utility-menu[hidden] { display: none; }
.utility-menu { position: absolute; z-index: 30; top: calc(100% + 7px); right: 0; width: 220px; overflow: hidden; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 14px 38px rgba(24,42,50,.17); }
.utility-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: inherit; font-size: 12px; font-weight: 650; text-align: left; text-decoration: none; }
.utility-menu-item:hover { background: var(--surface-muted); color: var(--green); }
.utility-menu-item .ph { flex: 0 0 auto; color: var(--muted); font-size: 17px; }
.utility-menu-item:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.panel-divider { height: 1px; margin: 12px -20px 15px; background: var(--line); }

.map-tools { top: 20px; right: 20px; gap: 10px; }
.map-tool-group { display: grid; overflow: hidden; border: 1px solid rgba(31,47,61,.1); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.map-tool { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); font-size: 20px; box-shadow: none; }
.map-tool:last-child { border-bottom: 0; }
.map-tool:hover,
.map-tool[aria-pressed="true"],
.map-tool-primary { background: var(--green-soft); color: var(--green); }
.map-tool:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--green); outline-offset: -3px; }
.map-tool:disabled { background: var(--surface-muted); }

.map-credit { right: 8px; bottom: 8px; }
.leaflet-control-zoom { display: none !important; }
.fuel-marker { border: 0 !important; background: transparent !important; }
.fuel-marker-icon { position: relative; display: grid; place-items: start center; width: 36px; height: 42px; color: #7d8a95; transform-origin: 50% 90%; transition: transform .16s ease; }
.fuel-marker-icon > .ph-map-pin { font-size: 40px; line-height: 1; text-shadow: 0 3px 5px rgba(24,36,42,.28); }
.fuel-marker-icon > .ph-gas-pump { position: absolute; top: 9px; left: 50%; color: #fff; font-size: 14px; transform: translateX(-50%); }
.fuel-marker-icon.yes { color: #16a15a; }
.fuel-marker-icon.queue { color: #ed8619; }
.fuel-marker-icon.low { color: #c99a06; }
.fuel-marker-icon.no { color: #d4484d; }
.fuel-marker-icon.unknown { color: #50616e; }
.fuel-marker-icon:hover { transform: translateY(-2px); }
html.compact-markers .fuel-marker-icon { transform: scale(.76); }
html.compact-markers .fuel-marker-icon:hover { transform: translateY(-1px) scale(.82); }

.control-panel { top: 24px; bottom: 88px; left: max(24px, calc((100vw - 1440px) / 2 + 24px)); display: flex; flex-direction: column; width: min(440px, calc(100vw - 48px)); max-height: none; padding: 20px; overflow: hidden; border: 1px solid rgba(31,47,61,.1); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.control-panel > :not(.panel-scroll) { flex-shrink: 0; }
.panel-handle { display: none; }
.location-pill { display: inline-flex; align-items: center; align-self: flex-start; gap: 7px; min-height: 34px; margin-top: 9px; padding: 0 3px; border: 0; background: transparent; color: var(--text); font-size: 13px; font-weight: 650; }
.location-pill > .ph-map-pin { color: var(--green); font-size: 17px; }
.location-pill > .ph-caret-down { margin-left: 1px; color: var(--muted); font-size: 12px; }
.location-pill:hover { color: var(--green); }
.city-search-drawer[hidden],
.filter-drawer[hidden] { display: none; }
.city-search-drawer { margin: 3px -20px 0; padding: 8px 20px 13px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.city-search-row { display: flex; align-items: center; gap: 7px; }
.city-search-row .search-box { flex: 1; background: var(--surface); }
.city-search-drawer .city-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; max-height: 220px; margin-top: 8px; }
.city-search-drawer .city-option { padding: 9px 10px; border-radius: 6px; font-size: 12px; }
.panel-heading { align-items: center; }
.panel-heading h1 { font-size: 19px; line-height: 1.25; }
.panel-action-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.secondary-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 700; }
.secondary-action:hover,
.secondary-action.has-active-filters { border-color: var(--green); color: var(--green); }
.secondary-action .ph { font-size: 17px; }
.filter-count { display: grid; place-items: center; min-width: 19px; height: 19px; margin-left: 2px; padding: 0 5px; border-radius: 10px; background: var(--green); color: #fff; font-size: 10px; font-weight: 800; }
.filter-count[hidden] { display: none; }
.panel-action-row .primary-action { min-height: 40px; }
.filter-drawer { margin: 12px -20px 0; padding: 12px 20px 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.filter-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.filter-drawer-header strong { font-size: 13px; }
.filter-drawer-actions { display: flex; align-items: center; gap: 5px; }
.filter-reset { min-height: 30px; padding: 0 7px; border: 0; background: transparent; color: var(--green); font-size: 11px; font-weight: 700; }
.filter-close { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 16px; }
.filter-close:hover { border-color: var(--green); color: var(--green); }
.secondary-action:focus-visible,
.filter-close:focus-visible,
.filter-reset:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.filter-section { margin-top: 10px; }
.filter-section .filter-label { display: block; }
.filter-drawer .filter-row { padding: 6px 0 0; }
.filter-drawer .fuel-row { padding-top: 6px; }
.filter-apply { width: 100%; min-height: 38px; margin-top: 13px; border: 0; border-radius: 8px; background: var(--green); color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 7px 15px rgba(22,150,83,.18); }
.filter-apply:hover { background: #117d45; }
.filter-apply:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.search-row { gap: 8px; margin-top: 13px; }
.search-box { height: 40px; border-radius: 8px; font-size: 13px; }
.search-box > .ph { flex: 0 0 auto; font-size: 17px; }
.primary-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 108px; padding: 0 13px; border-radius: 8px; box-shadow: 0 7px 15px rgba(22,150,83,.18); }
.primary-action .ph { font-size: 17px; }
.primary-action span { margin: 0; font-size: 13px; }
.suggestions { position: relative; top: auto; right: auto; left: auto; z-index: 8; margin-top: 6px; border-radius: 8px; }
.suggestion { border-radius: 6px; }
.filter-row { gap: 7px; padding: 13px 0 1px; }
.filter-chip, .fuel-chip { border-radius: 8px; padding: 7px 11px; font-size: 11px; }
.filter-chip.active, .fuel-chip.active { box-shadow: inset 0 0 0 1px rgba(22,150,83,.1); }
.fuel-row { padding-top: 8px; }
.list-summary { flex: 0 0 auto; margin-top: 14px; padding-bottom: 10px; }
.list-summary strong { font-size: 15px; }
.sort-button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 0 5px 8px; font-size: 11px; }
.sort-button .ph { color: var(--muted); font-size: 11px; }

.panel-scroll { flex: 1 1 auto; min-height: 0; margin-right: -7px; padding-right: 7px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-color: #aeb8bd transparent; scrollbar-width: thin; }
.station-list { display: block; margin-top: 9px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.station-card { grid-template-columns: auto minmax(0, 1fr) 30px; gap: 10px; min-height: 72px; padding: 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.station-card:last-child { border-bottom: 0; }
.station-card:hover { background: var(--surface-muted); transform: none; }
.status-dot { width: 9px; height: 9px; }
.station-main { display: grid; gap: 4px; min-width: 0; }
.station-title-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.station-name { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.station-status-tag { flex: 0 0 auto; max-width: 48%; overflow: hidden; padding: 3px 6px; border-radius: 5px; background: var(--surface-muted); color: var(--muted); font-size: 9px; font-weight: 750; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.station-status-tag.yes { background: #e5f6ec; color: var(--green); }
.station-status-tag.queue { background: #fff0e4; color: var(--orange); }
.station-status-tag.low { background: #fff7d9; color: var(--yellow); }
.station-status-tag.no { background: #fde9e9; color: var(--red); }
.station-address { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.station-fuels { display: flex; align-items: center; gap: 4px; overflow: hidden; color: #435159; font-size: 9px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.station-fuels .ph { flex: 0 0 auto; color: var(--green); font-size: 11px; }
.station-favorite, .detail-icon-button, .favorite-remove { font-size: 18px; }
.legal-note { margin-right: 3px; }

.bottom-nav { position: fixed; z-index: 620; bottom: 18px; left: max(24px, calc((100vw - 1440px) / 2 + 24px)); display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); width: 344px; height: 58px; padding: 6px; border: 1px solid rgba(31,47,61,.1); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.bottom-nav-button { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 650; white-space: nowrap; }
.bottom-nav-button .ph,
.bottom-nav-button .ph-fill { flex: 0 0 auto; font-size: 19px; }
.bottom-nav-button:hover { color: var(--text); }
.bottom-nav-button.active { background: var(--green-soft); color: var(--green); }
.bottom-nav-button:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.bottom-nav .favorite-badge { top: 3px; right: 5px; border-color: var(--panel); }

.modal { border-radius: 8px; }
.close-button { border-radius: 8px; font-size: 20px; }

@media (max-width: 760px) {
  .app-shell { min-height: 100dvh; }
  .map-wrap { inset: 0; }
  .control-panel { top: auto; right: 8px; bottom: 78px; left: 8px; width: auto; height: min(66dvh, 640px); max-height: none; padding: 14px; border-radius: 8px; }
  .panel-handle { position: relative; display: block; flex: 0 0 auto; width: 54px; height: 22px; margin: -8px auto 3px; padding: 7px 8px; border: 0; border-radius: 6px; background: transparent; touch-action: none; user-select: none; }
  .panel-handle span { display: block; width: 36px; height: 4px; margin: 0 auto; border-radius: 4px; background: #c5ced2; }
  .panel-handle::after,
  .control-panel.is-collapsed .panel-handle::after { content: none; }
  .control-panel.is-collapsed { height: 76px; max-height: none; overflow: hidden; }
  .control-panel.is-collapsed { height: 108px; }
  .control-panel.is-collapsed > :not(.panel-handle):not(.panel-brand-row):not(.location-pill) { display: none; }
  .control-panel.is-collapsed .panel-brand-row { margin: 0; }
  .panel-brand-row { min-height: 38px; }
  .control-panel .brand > span:last-child { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .control-panel .brand { font-size: 14px; }
  .control-panel .brand-mark { width: 34px; height: 34px; }
  .panel-utility-actions { gap: 3px; }
  .panel-utility-actions .icon-button { width: 34px; height: 34px; }
  .utility-menu { width: min(220px, calc(100vw - 52px)); }
  .panel-divider { margin-right: -14px; margin-left: -14px; }
  .city-search-drawer,
  .filter-drawer { margin-right: -14px; margin-left: -14px; padding-right: 14px; padding-left: 14px; }
  .city-search-drawer .city-grid { grid-template-columns: 1fr; max-height: 190px; }
  .panel-heading h1 { font-size: 20px; }
  .search-row { margin-top: 12px; }
  .search-box { min-width: 0; }
  .panel-action-row { margin-top: 11px; }
  .primary-action { min-width: 112px; padding: 0 10px; }
  .filter-row { padding-top: 11px; }
  .control-panel.filters-open .filter-drawer { flex: 1 1 auto; min-height: 0; margin-bottom: -14px; overflow-y: auto; }
  .control-panel.filters-open .list-summary,
  .control-panel.filters-open .panel-scroll { display: none; }
  .station-card { grid-template-columns: auto minmax(0, 1fr) 30px; gap: 9px; }
  .station-status-tag { max-width: 52%; }
  .bottom-nav { right: 8px; bottom: 8px; left: 8px; width: auto; height: 62px; border-radius: 8px; }
  .bottom-nav-button { flex-direction: column; gap: 2px; padding: 4px 7px; font-size: 10px; }
  .bottom-nav-button .ph,
  .bottom-nav-button .ph-fill { font-size: 20px; }
  .map-tools { top: 10px; right: 10px; gap: 8px; }
  .map-tool { width: 42px; height: 42px; font-size: 19px; }
  .map-credit { top: 10px; right: auto; bottom: auto; left: 10px; flex-direction: row; }
  .map-credit-text { max-width: calc(100vw - 66px); overflow: hidden; text-overflow: ellipsis; }
  .toast { bottom: 84px; }
}

html.dark .map-tool-group,
html.dark .bottom-nav { border-color: rgba(255,255,255,.08); }
html.dark .map-tool:hover,
html.dark .map-tool[aria-pressed="true"],
html.dark .map-tool-primary { background: var(--green-soft); }
html.dark .station-status-tag { background: var(--surface-muted); color: var(--muted); }
html.dark .station-status-tag.yes { background: #183b2b; color: #73d9a0; }
html.dark .station-status-tag.queue { background: #3b291d; color: #ffb06b; }
html.dark .station-status-tag.low { background: #3e351b; color: #e7c65b; }
html.dark .station-status-tag.no { background: #3d2325; color: #f18b8f; }
html.dark .station-fuels { color: #c2cfd4; }

/* GdeBenz-aligned map shell */
.control-panel {
  top: 16px;
  bottom: 92px;
  left: max(16px, calc((100vw - 1440px) / 2 + 16px));
  width: min(372px, calc(100vw - 32px));
  padding: 0;
  border-color: rgba(18,28,46,.12);
  border-radius: 20px;
  background: rgba(255,255,255,.93);
  color: #121a28;
  font-family: -apple-system, "SF Pro Text", Inter, system-ui, sans-serif;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  backdrop-filter: blur(18px) saturate(1.2);
}
.panel-top { flex: 0 0 auto; padding: 16px 16px 10px; }
.panel-brand-row { gap: 10px; }
.control-panel .brand { flex: 0 1 auto; gap: 11px; min-width: 0; }
.control-panel .brand > span { display: grid; align-content: center; gap: 0; min-width: 0; line-height: 1; }
.control-panel .brand strong { overflow: hidden; color: #121a28; font-size: 22px; font-weight: 800; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; }
.control-panel .brand small { display: none; overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 600; line-height: 10px; text-overflow: ellipsis; white-space: nowrap; }
.control-panel .brand-mark { width: 46px; height: 46px; border-radius: 14px; box-shadow: none; }
.location-pill { flex: 0 0 auto; align-self: auto; width: 132.4px; min-width: 132.4px; min-height: 46px; margin: 0; padding: 0 13px; border: 1px solid rgba(18,28,46,.12); border-radius: 18px; background: #fff; color: #121a28; font-size: 15px; font-weight: 500; box-shadow: inset 0 1px rgba(255,255,255,.6), 0 6px 18px rgba(18,28,46,.08); }
.location-pill .city-button-label { max-width: 88px; margin-left: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.location-pill > .ph-map-pin { flex: 0 0 auto; font-size: 18px; }
.location-pill > .ph-caret-down { flex: 0 0 auto; margin-left: 0; font-size: 15px; }
.data-notice { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 7px; width: 100%; min-height: 31px; margin-top: 9px; padding: 5px 11px; border: 1px solid rgba(18,28,46,.1); border-radius: 12px; background: #fff; color: #5a6678; font-size: 11.5px; font-weight: 400; line-height: 1.25; text-align: left; }
.data-notice span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-notice > .ph:first-child { font-size: 15px; }
.data-notice > .ph:last-child { color: #16a34a; font-size: 16px; }
.quick-actions { display: grid; grid-template-columns: max-content max-content; justify-content: start; gap: 6px; margin-top: 7px; }
.quick-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid rgba(18,28,46,.12); border-radius: 11px; background: rgba(255,255,255,.8); color: #2b3648; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 3px 10px rgba(18,28,46,.07); }
.quick-action:hover { border-color: rgba(22,163,74,.5); color: #16a34a; }
.quick-action > .ph { flex: 0 0 auto; font-size: 16px; }
.quick-status-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #2ddf75; opacity: .5; }
#filterToggleButton { gap: 6px; padding-right: 10px; padding-left: 10px; }
#filterToggleButton.has-active-filters .quick-status-dot { opacity: 1; }
#filterToggleButton .filter-count { display: none; }
#shareButton { width: auto; border-radius: 11px; }
#installButton { width: auto; padding-right: 10px; padding-left: 10px; }
#reportOpenButton { width: auto; min-width: 0; border-color: rgba(22,163,74,.5); background: transparent; color: #0a5e2b; box-shadow: 0 4px 12px rgba(22,163,74,.13), inset 0 1px rgba(255,255,255,.55); }
.route-action { grid-column: 1 / -1; width: 80px; min-width: 80px; margin: 0 0 2px 16px; border-radius: 11px; }
.install-action,
#installButton,
.quick-action-accent { border-radius: 11px; }
.panel-divider { margin: 0; }
.panel-heading { min-height: 67px; padding: 12px 18px 8px 34px; }
.panel-heading h1 { margin: 0; font-size: 15px; font-weight: 600; }
.smart-pick-button { position: fixed; z-index: 620; top: 291px; left: max(208px, calc((100vw - 1440px) / 2 + 208px)); display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 145px; min-height: 34px; padding: 0 13px 0 9px; border: 1.5px solid rgba(22,163,74,.42); border-radius: 999px; background: rgba(22,163,74,.08); color: var(--green); font-size: 13px; font-weight: 700; box-shadow: 0 0 12px rgba(22,163,74,.1); }
.smart-pick-button .ph { font-size: 15px; }
.control-panel.city-search-open ~ .smart-pick-button { display: none; }
.list-summary { display: none; }
.panel-scroll { margin: 0; padding: 0 19px 16px 14px; }
.station-list { display: grid; gap: 12px; margin: 0; overflow: visible; border: 0; background: transparent; }
.station-card { grid-template-columns: 46px minmax(0,1fr) 90px; gap: 13px; min-height: 101px; padding: 13px 14px; border: 1px solid rgba(18,28,46,.1); border-radius: 20px; background: #fff; box-shadow: none; }
.station-card:last-child { border-bottom: 1px solid rgba(18,28,46,.12); }
.station-card:hover { border-color: rgba(22,150,83,.38); background: #fff; box-shadow: 0 8px 22px rgba(18,28,46,.08); }
.station-logo { position: relative; display: grid; place-items: center; width: 46px; height: 46px; align-self: center; overflow: hidden; border: 1px solid #d5dce3; border-radius: 14px; background: #eef2f5; color: #5b6871; font-size: 18px; font-weight: 600; letter-spacing: 0; }
.station-logo-fallback { position: relative; z-index: 0; }
.station-logo-image { position: absolute; z-index: 1; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 5px; object-fit: contain; }
.smart-station-logo { font-weight: 800; letter-spacing: 0; }
.station-logo.logo-lukoil,
.smart-station-logo.logo-lukoil,
.station-logo.logo-teboil,
.smart-station-logo.logo-teboil { background: #fff4f4; color: #d82932; }
.station-logo.logo-rosneft,
.smart-station-logo.logo-rosneft { background: #fff8df; color: #172434; }
.station-logo.logo-gazprom,
.smart-station-logo.logo-gazprom { background: #eef8ff; color: #1688c9; }
.station-logo.logo-tatneft,
.smart-station-logo.logo-tatneft { background: #effaf2; color: #168f51; }
.station-logo.logo-bashneft,
.smart-station-logo.logo-bashneft { background: #fff8df; color: #172434; }
.station-logo.logo-taif,
.smart-station-logo.logo-taif { background: #f7fbef; color: #315d32; }
.station-logo.logo-nnk,
.smart-station-logo.logo-nnk { background: #fff7e8; color: #e45c12; }
.station-logo.logo-neftmagistral,
.smart-station-logo.logo-neftmagistral { background: #fff4f1; color: #d94835; }
.station-logo.logo-irbis,
.smart-station-logo.logo-irbis { background: #eef8ff; color: #14679e; }
.station-logo.logo-tpk,
.smart-station-logo.logo-tpk { background: #eff7ff; color: #186bc0; }
.station-logo.logo-neftehimprom,
.smart-station-logo.logo-neftehimprom { background: #fff1f1; color: #e30016; }
.station-logo.logo-topline,
.smart-station-logo.logo-topline { background: #fffde6; color: #315c1e; }
.station-logo.logo-opti,
.smart-station-logo.logo-opti { background: #edf8ff; color: #0672ba; }
.station-logo.logo-surgutneftegas,
.smart-station-logo.logo-surgutneftegas { background: #eefbfc; color: #087b8d; }
.station-main { align-content: center; gap: 4px; }
.station-status-tag { justify-self: start; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.station-status-tag .status-dot { width: 7px; height: 7px; }
.station-name { font-size: 15px; font-weight: 600; line-height: 20px; }
.station-details { overflow: hidden; color: #59666e; font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.station-side { display: grid; grid-template-columns: minmax(0,1fr) auto; align-content: center; align-items: center; gap: 5px 4px; min-width: 0; text-align: right; }
.station-side strong { font-size: 15px; font-weight: 600; line-height: 20px; white-space: nowrap; }
.station-side small { grid-column: 1 / -1; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; }
.station-side .ph { grid-column: 2; grid-row: 1; color: #a0a9af; font-size: 20px; }
.bottom-nav { bottom: 16px; left: max(16px, calc((100vw - 1440px) / 2 + 16px)); width: 372px; height: 64px; border-radius: 24px; background: rgba(255,255,255,.94); }
.bottom-nav-button { border-radius: 18px; font-weight: 600; }
.bottom-nav-button.active { font-weight: 700; }
.filter-drawer { position: absolute; z-index: 80; inset: 0; margin: 0; padding: 18px 16px 16px; overflow-y: auto; border: 0; border-radius: 20px; background: #fff; }
.filter-drawer-header { justify-content: center; min-height: 28px; }
.filter-drawer-header strong { color: var(--muted); font-size: 12px; font-weight: 500; }
.filter-drawer-actions { display: none; }
.filter-section { margin-top: 14px; }
.filter-drawer-header + .filter-section { margin-top: 6px; }
.filter-section .filter-label { color: #7a858b; font-weight: 500; text-align: center; }
.status-mode-list { display: grid; gap: 9px; margin-top: 10px; }
.filter-chip.status-mode { display: grid; grid-template-columns: 14px minmax(0,1fr) 22px; align-items: center; gap: 9px; width: 100%; min-height: 68px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 15px; background: #fff; color: var(--text); text-align: left; }
.filter-chip.status-mode > span { display: grid; gap: 3px; }
.filter-chip.status-mode strong { font-size: 13px; }
.filter-chip.status-mode small { color: var(--muted); font-size: 10px; font-weight: 500; }
.filter-chip.status-mode > .ph { color: #c8d0d5; font-size: 21px; }
.filter-chip.status-mode.active > .ph { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; font-size: 14px; }
.status-mode-dots { display: block; width: 10px; height: 10px; border-radius: 50%; background: #a8b3bb; }
.status-mode-dots.available { background: linear-gradient(90deg,#20b766 0 50%,#ed8619 50%); }
.status-mode-dots.yes { background: #20b766; }
.filter-drawer .filter-row { flex-wrap: wrap; overflow: visible; gap: 8px; padding-top: 10px; }
.filter-drawer .fuel-chip,
.brand-chip { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font-size: 11px; font-weight: 700; }
.filter-drawer .fuel-chip.active,
.brand-chip.active { border-color: rgba(22,150,83,.55); background: var(--green-soft); color: var(--green); }
.filter-row-break { flex: 0 0 100%; width: 0; height: 0; }
.filter-apply { position: sticky; bottom: 0; min-height: 50px; margin-top: 16px; border: 1px solid #d4dbe1; border-radius: 14px; background: #f1f4f7; color: #435059; box-shadow: none; }
.filter-apply:hover { background: #e9eef1; }
.city-search-drawer { z-index: 90; margin: 8px 0 0; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 14px 36px rgba(18,28,46,.16); }
.fuel-marker-icon { color: #152130; }
.fuel-marker-icon::before { content: ""; position: absolute; z-index: -1; top: 3px; left: 50%; width: 30px; height: 30px; border-radius: 50%; background: rgba(80,97,110,.22); box-shadow: 0 0 12px 6px rgba(80,97,110,.2); transform: translateX(-50%); }
.fuel-marker-icon.yes,
.fuel-marker-icon.queue,
.fuel-marker-icon.low,
.fuel-marker-icon.no,
.fuel-marker-icon.unknown { color: #152130; }
.fuel-marker-icon.yes::before { background: rgba(24,190,103,.34); box-shadow: 0 0 13px 7px rgba(24,190,103,.38); }
.fuel-marker-icon.queue::before { background: rgba(237,134,25,.34); box-shadow: 0 0 13px 7px rgba(237,134,25,.38); }
.fuel-marker-icon.low::before { background: rgba(214,174,20,.34); box-shadow: 0 0 13px 7px rgba(214,174,20,.36); }
.fuel-marker-icon.no::before { background: rgba(226,53,67,.35); box-shadow: 0 0 13px 7px rgba(226,53,67,.42); }
.smart-modal { padding: 0; overflow: hidden; }
.smart-modal-handle { display: none; }
.smart-modal-header { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 16px; background: linear-gradient(110deg,#18b46d,#18a7d7); color: #fff; }
.smart-modal-header > div { display: flex; align-items: center; gap: 9px; font-size: 16px; }
.smart-modal-actions { display: flex; align-items: center; gap: 8px; }
.smart-about { border: 0; border-bottom: 1px dashed rgba(255,255,255,.75); background: transparent; color: #fff; font-size: 10px; font-weight: 700; }
.smart-modal-header .close-button { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.14); color: #fff; }
#smartModalBody { padding: 14px 16px 20px; overflow-y: auto; }
.smart-origin { display: flex; align-items: center; gap: 6px; padding: 11px 12px; border: 1px solid var(--line); border-left: 3px solid #d4b00c; border-radius: 12px; font-size: 11px; }
.smart-origin .ph { color: var(--green); }
.smart-origin span { color: var(--muted); }
.smart-origin button { margin-left: auto; padding: 0; border: 0; background: transparent; color: #21855f; font-size: 10px; font-weight: 750; }
.smart-origin button + button { margin-left: 6px; }
.smart-fuel-options { display: flex; gap: 7px; overflow-x: auto; padding: 12px 0 9px; scrollbar-width: none; }
.smart-fuel-options::-webkit-scrollbar { display: none; }
.smart-fuel-options button { flex: 0 0 auto; min-width: 45px; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font-size: 11px; }
.smart-fuel-options button.active { border-color: rgba(22,150,83,.55); background: var(--green-soft); color: var(--text); }
.smart-mode { display: grid; grid-template-columns: 1fr 1fr; height: 38px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.smart-mode button { border: 0; border-radius: 999px; background: transparent; color: var(--text); font-size: 11px; }
.smart-mode button.active { background: #eef1f3; font-weight: 750; }
.smart-summary { margin: 14px 2px 8px; color: #1aa47a; font-size: 10px; }
.smart-best-card { margin-bottom: 12px; padding: 14px; border: 1px solid rgba(22,150,83,.4); border-radius: 16px; background: #fbfffc; box-shadow: 0 5px 16px rgba(22,150,83,.06); }
.smart-best-note { display: flex; align-items: center; gap: 8px; min-height: 18px; margin-bottom: 9px; }
.smart-best-note b { padding: 4px 8px; border-radius: 999px; background: var(--green); color: #fff; font-size: 8px; text-transform: uppercase; }
.smart-best-note span { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.smart-best-primary { display: grid; grid-template-columns: 48px minmax(0,1fr) 78px; align-items: center; gap: 10px; }
.smart-best-main { display: grid; gap: 4px; min-width: 0; }
.smart-best-main > strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.smart-best-main > span { color: var(--text); font-size: 10px; }
.smart-fuel-badges { display: flex; gap: 5px; }
.smart-fuel-badges small { padding: 3px 6px; border-radius: 5px; background: #eef1f3; color: #67737c; font-size: 8px; font-weight: 750; }
.smart-best-distance { display: grid; justify-items: end; gap: 3px; }
.smart-best-distance strong { font-size: 20px; }
.smart-best-distance small { color: var(--muted); font-size: 8px; text-align: right; }
.smart-best-address { display: flex; align-items: center; gap: 5px; margin-top: 10px; color: var(--muted); font-size: 9px; }
.smart-best-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); color: #21855f; font-size: 9px; font-weight: 700; }
.smart-open-station { width: 100%; min-height: 48px; margin-top: 12px; border: 0; border-radius: 12px; background: linear-gradient(100deg,#169c50,#21c96d); color: #fff; font-size: 12px; font-weight: 800; }
.smart-empty { padding: 26px 16px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); font-size: 11px; text-align: center; }
.smart-station { display: grid; grid-template-columns: 48px minmax(0,1fr) 76px; align-items: center; gap: 10px; width: 100%; padding: 11px 2px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; }
.smart-station.best { margin-bottom: 12px; padding: 14px; border: 1px solid rgba(22,150,83,.38); border-radius: 16px; background: #fbfffc; }
.smart-station-logo { position: relative; display: grid; place-items: center; width: 46px; height: 46px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #eef3f5; color: var(--green); font-size: 20px; }
.smart-station-main { display: grid; gap: 4px; min-width: 0; }
.smart-station-main b { justify-self: start; padding: 3px 7px; border-radius: 999px; background: var(--green); color: #fff; font-size: 8px; text-transform: uppercase; }
.smart-station-main strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.smart-station-main small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.smart-station-main .status-dot { display: inline-block; margin-right: 5px; }
.smart-station-side { display: grid; justify-items: end; gap: 4px; }
.smart-station-side strong { font-size: 13px; }
.smart-station-side small { color: var(--muted); font-size: 8px; }
.smart-station-side .ph { color: #9aa5ab; }
.smart-more-title { margin-top: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 9px; text-transform: uppercase; }

@media (max-width: 760px) {
  .control-panel { top: 0; right: 0; bottom: auto; left: 0; width: 100%; height: 160px; padding: 0; overflow: visible; border: 0; border-radius: 0; background: rgba(255,255,255,.91); box-shadow: 0 10px 28px rgba(18,28,46,.08); backdrop-filter: blur(16px); }
  .control-panel.is-collapsed { height: 160px; overflow: visible; }
  .control-panel.is-collapsed > .panel-top { display: block; }
  .panel-handle { display: none; }
  .panel-top { padding: 10px 14px 17px; }
  .control-panel .brand-mark { width: 44px; height: 44px; border-radius: 13px; }
  .control-panel .brand { gap: 10px; }
  .control-panel .brand > span:last-child { display: grid; align-content: center; }
  .control-panel .brand strong { font-size: 25px; line-height: 25px; }
  .control-panel .brand small { font-size: 9px; line-height: 9px; }
  .location-pill { width: 130.4px; min-width: 130.4px; min-height: 46px; padding: 0 12px; }
  .quick-actions { position: relative; display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 6px; min-height: 86px; overflow-x: auto; margin-right: -14px; padding-right: 14px; padding-bottom: 0; scrollbar-width: none; }
  .quick-actions::-webkit-scrollbar { display: none; }
  .quick-action { flex: 0 0 auto; gap: 4px; min-height: 40px; padding: 0 6px; border-radius: 12px; font-size: 12px; font-weight: 600; }
  .quick-action > .ph { font-size: 15px; }
  #filterToggleButton { width: 74px; gap: 4px; padding-right: 6px; padding-left: 6px; }
  #shareButton { width: 96px; border-radius: 12px; }
  #installButton { width: 80px; padding-right: 6px; padding-left: 6px; }
  #reportOpenButton { width: 100px; min-width: 100px; }
  .route-action { width: 68px; min-width: 68px; }
  #installButton,
  .quick-action-accent { border-radius: 12px; }
  .route-action { position: absolute; bottom: 0; left: 0; order: 5; flex-basis: auto; margin: 0; }
  .control-panel > .panel-divider,
  .control-panel > .panel-heading,
  .control-panel > .list-summary,
  .control-panel > .panel-scroll { display: none; }
  .control-panel.show-list { bottom: 82px; height: calc(100dvh - 82px); overflow: hidden; background: rgba(255,255,255,.97); }
  .control-panel.show-list > .panel-divider { display: block; }
  .control-panel.show-list > .panel-heading { display: flex; }
  .control-panel.show-list > .panel-scroll { display: block; flex: 1 1 auto; min-height: 0; padding: 4px 16px 16px; overflow-y: auto; }
  .panel-heading { min-height: 58px; padding: 10px 18px 8px; }
  .smart-pick-button { top: auto; bottom: 82px; left: 50%; min-width: 166px; min-height: 48px; padding: 0 20px; background: rgba(246,255,250,.94); box-shadow: 0 8px 24px rgba(18,28,46,.15); transform: translateX(-50%); }
  .control-panel.show-list ~ .smart-pick-button { display: none; }
  .station-card { grid-template-columns: 48px minmax(0,1fr) 74px; gap: 10px; min-height: 104px; padding: 12px; }
  .station-logo { width: 48px; height: 48px; }
  .bottom-nav { right: 20px; bottom: 12px; left: 20px; width: auto; height: 60px; padding: 5px; border-color: rgba(18,28,46,.1); border-radius: 30px; }
  .bottom-nav-button { align-self: start; height: 50px; padding: 0; border-radius: 22px; font-size: 13px; }
  .map-tools { top: auto; right: 15px; bottom: 84px; gap: 18px; }
  .map-tool-group { border-radius: 14px; }
  .map-tool-group:first-child { gap: 8px; overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .map-tool-group:first-child .map-tool { border: 1px solid rgba(31,47,61,.1); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
  .map-tool-group:not(:first-child) .map-tool { width: 44px; height: 44px; }
  .map-tool-primary { background: rgba(255,255,255,.92); color: #1b2b35; }
  #resetButton { display: none; }
  .map-tool { width: 46px; height: 46px; }
  .map-credit { top: auto; bottom: 82px; left: 16px; }
  .control-panel.filters-open { z-index: 950; backdrop-filter: none; }
  .control-panel.filters-open::before { content: ""; position: fixed; z-index: 890; inset: 0; background: rgba(21,31,40,.35); backdrop-filter: blur(2px); }
  .filter-drawer { position: fixed; z-index: 900; top: 188px; right: 0; bottom: 0; left: 0; padding: 18px 16px 16px; border-radius: 26px 26px 0 0; }
  .filter-drawer .fuel-row { display: grid; grid-template-columns: repeat(5, max-content); justify-content: start; }
  .filter-drawer .brand-row { display: flex; justify-content: flex-start; }
  .filter-drawer .fuel-row .fuel-chip { min-width: 50px; }
  .city-search-drawer { position: fixed; z-index: 910; top: 64px; right: 12px; left: 12px; margin: 0; }
  .control-panel.city-search-open .data-notice,
  .control-panel.city-search-open .quick-actions { visibility: hidden; pointer-events: none; }
  #stationModal,
  .smart-modal { position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: calc(100dvh - 48px); margin: 0; border-radius: 24px 24px 0 0; }
  .smart-modal { height: calc(100dvh - 48px); }
  .smart-modal-handle { position: absolute; z-index: 2; top: 8px; left: 50%; display: block; width: 38px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.55); transform: translateX(-50%); }
  .smart-modal-header { padding-top: 6px; }
  #smartModalBody { max-height: calc(100dvh - 112px); }
}

html.dark .control-panel,
html.dark .bottom-nav { background: rgba(17,27,34,.96); }
html.dark .location-pill,
html.dark .quick-action,
html.dark .data-notice,
html.dark .station-card,
html.dark .filter-drawer,
html.dark .filter-chip.status-mode,
html.dark .fuel-chip,
html.dark .brand-chip { background: var(--surface); }
html.dark .smart-station.best { background: var(--surface); }

/* Refined panel interactions and wall view */
.data-notice[aria-expanded="true"] { border-color: rgba(205,157,18,.75); box-shadow: 0 0 0 1px rgba(205,157,18,.1); }
.data-notice[aria-expanded="true"] > .ph:last-child { transform: rotate(180deg); }
.data-notice-details { position: relative; z-index: 95; display: grid; gap: 7px; margin-top: 7px; padding: 12px 13px; border: 1px solid rgba(18,28,46,.12); border-radius: 13px; background: #fff; color: #56616d; font-size: 11.5px; line-height: 1.48; box-shadow: 0 12px 28px rgba(18,28,46,.12); }
.data-notice-details[hidden] { display: none; }
.data-notice-details strong { color: #26313e; font-size: 12px; }
.data-notice-details p { margin: 0; }
.notice-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; padding-top: 2px; }
.notice-legend span { display: inline-flex; align-items: center; gap: 5px; color: #3c4855; font-size: 11px; font-weight: 600; }
.notice-legend .status-dot { width: 7px; height: 7px; }
.notice-links { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 2px; }
.notice-links a { color: var(--green); font-size: 11px; font-weight: 600; text-decoration: none; }
.notice-links button { min-height: 28px; padding: 0 10px; border: 1px solid rgba(22,163,74,.28); border-radius: 9px; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 700; }
.control-panel.notice-open .quick-actions { visibility: hidden; pointer-events: none; }
.control-panel.notice-open ~ .smart-pick-button,
.control-panel.filters-open ~ .smart-pick-button { display: none; }

.quick-actions { grid-template-columns: max-content max-content max-content; min-height: 70px; }
.route-action { grid-column: auto; width: 80px; min-width: 80px; margin: 0; }
#shareButton { width: 111px; }
#installButton { width: 95px; }
#filterToggleButton { grid-column: 1; width: 95px; }
#reportOpenButton { grid-column: 2; width: 111px; min-width: 111px; }
.smart-pick-button { top: 221px; min-width: 118px; min-height: 34px; padding: 0 12px 0 9px; }

.station-list { gap: 8px; }
.station-card { grid-template-columns: 40px minmax(0,1fr) 74px; gap: 10px; min-height: 84px; padding: 10px 11px; border-radius: 14px; box-shadow: 0 2px 8px rgba(18,28,46,.035); }
.station-card:hover { box-shadow: 0 6px 18px rgba(18,28,46,.08); }
.station-logo { width: 40px; height: 40px; border-radius: 11px; font-size: 15px; }
.station-main { gap: 2px; }
.station-status-tag { gap: 5px; padding: 0; border-radius: 0; background: transparent !important; font-size: 10.5px; font-weight: 600; line-height: 15px; }
.station-status-tag.yes { color: var(--green); }
.station-status-tag.queue { color: var(--orange); }
.station-status-tag.low { color: #a07b00; }
.station-status-tag.no { color: var(--red); }
.station-status-tag .status-dot { width: 6px; height: 6px; }
.station-name { font-size: 14px; font-weight: 700; line-height: 18px; }
.station-details { font-size: 11px; line-height: 15px; }
.station-side { gap: 2px 3px; }
.station-side strong { font-size: 14px; font-weight: 700; line-height: 18px; }
.station-side small { font-size: 9.5px; line-height: 13px; }
.station-side .ph { font-size: 17px; }

.filter-drawer { padding: 13px 14px 14px; }
.filter-drawer-header { min-height: 24px; }
.filter-drawer-header strong { font-size: 11.5px; }
.filter-section { margin-top: 10px; }
.filter-drawer-header + .filter-section { margin-top: 4px; }
.status-mode-list { gap: 6px; margin-top: 6px; }
.filter-chip.status-mode { grid-template-columns: 12px minmax(0,1fr) 20px; gap: 8px; min-height: 54px; padding: 7px 11px; border-radius: 12px; }
.filter-chip.status-mode strong { font-size: 12px; }
.filter-chip.status-mode small { font-size: 9.5px; line-height: 1.3; }
.filter-drawer .filter-row { gap: 6px; padding-top: 7px; }
.filter-drawer .fuel-chip,
.brand-chip { min-height: 35px; padding: 0 11px; font-size: 10.5px; }
.filter-apply { min-height: 44px; margin-top: 11px; border-radius: 12px; font-size: 12px; }

.share-modal { width: min(380px, calc(100vw - 28px)); padding: 16px; border-radius: 18px; }
.share-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.share-modal-header > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.share-modal-header strong,
.share-modal-header small { display: block; }
.share-modal-header strong { color: var(--text); font-size: 15px; }
.share-modal-header small { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.share-modal-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--green-soft); color: var(--green); font-size: 18px; }
.share-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 16px; }
.share-option { display: grid; justify-items: center; gap: 6px; min-height: 74px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--text); font-size: 11px; font-weight: 650; }
.share-option .ph { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #eef8f2; color: var(--green); font-size: 19px; }
.share-option:hover { border-color: rgba(22,163,74,.45); }
.share-copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; margin-top: 10px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); color: var(--text); }
.share-copy > span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.share-copy > span span { overflow: hidden; color: var(--muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.share-copy strong { color: var(--green); font-size: 10.5px; }
.share-note { margin: 10px 3px 0; color: var(--muted); font-size: 10px; line-height: 1.4; text-align: center; }

.app-shell.wall-view .map-wrap { visibility: hidden; pointer-events: none; }
.app-shell.wall-view .control-panel { z-index: 700; top: 0; right: 0; bottom: 0; left: 0; width: 100%; border: 0; border-radius: 0; background: #f4f7f5; box-shadow: none; backdrop-filter: none; }
.app-shell.wall-view .panel-top { width: min(1180px,100%); margin: 0 auto; padding: 14px 22px 10px; }
.app-shell.wall-view .panel-top .data-notice,
.app-shell.wall-view .panel-top .data-notice-details,
.app-shell.wall-view .panel-top .quick-actions { display: none; }
.app-shell.wall-view .control-panel > .panel-divider { display: block; }
.app-shell.wall-view .panel-heading { display: flex; width: min(1180px,100%); min-height: 48px; margin: 0 auto; padding: 12px 24px 7px; }
.app-shell.wall-view .panel-heading h1 { font-size: 16px; font-weight: 750; }
.app-shell.wall-view .panel-scroll { display: block; flex: 1 1 auto; width: min(1180px,100%); min-height: 0; margin: 0 auto; padding: 0 22px 100px; overflow-y: auto; }
.app-shell.wall-view .station-list { grid-template-columns: repeat(auto-fill,minmax(310px,1fr)); gap: 9px; }
.app-shell.wall-view .station-card { background: #fff; }
.app-shell.wall-view .smart-pick-button { display: none; }
.app-shell.wall-view .bottom-nav { z-index: 760; left: 50%; transform: translateX(-50%); }

html.dark .data-notice-details,
html.dark .share-modal,
html.dark .share-option,
html.dark .share-copy { background: var(--surface); }
html.dark .app-shell.wall-view .control-panel { background: #111b22; }

@media (max-width: 760px) {
  .quick-actions { display: grid; grid-template-columns: 68px 96px 80px; grid-template-rows: 40px 40px; align-items: start; min-height: 86px; overflow: visible; margin-right: 0; padding-right: 0; }
  .route-action { position: static; grid-column: 1; grid-row: 1; width: 68px; min-width: 68px; margin: 0; }
  #shareButton { grid-column: 2; grid-row: 1; width: 96px; }
  #installButton { grid-column: 3; grid-row: 1; width: 80px; }
  #filterToggleButton { grid-column: 1; grid-row: 2; width: 74px; }
  #reportOpenButton { grid-column: 2; grid-row: 2; width: 100px; min-width: 100px; }
  .smart-pick-button { top: auto; bottom: 92px; min-width: 130px; min-height: 44px; padding: 0 16px; }
  .data-notice-details { position: fixed; z-index: 920; top: 101px; right: 14px; left: 14px; margin: 0; padding: 12px 13px; }
  .filter-drawer { top: 188px; padding: 12px 14px 14px; border-radius: 20px 20px 0 0; }
  .filter-drawer .fuel-row { grid-template-columns: repeat(6,max-content); overflow-x: auto; }
  .filter-drawer .fuel-row .fuel-chip { min-width: 43px; }
  .share-modal { position: fixed; inset: auto 0 0; width: 100%; max-width: none; margin: 0; padding: 16px 16px 22px; border-radius: 20px 20px 0 0; }
  .app-shell.wall-view .control-panel { bottom: 82px; height: calc(100dvh - 82px); overflow: hidden; }
  .app-shell.wall-view .panel-top { display: block; width: 100%; padding: 10px 14px 8px; }
  .app-shell.wall-view .panel-heading { display: flex; width: 100%; min-height: 44px; padding: 8px 16px 5px; }
  .app-shell.wall-view .panel-scroll { display: block; width: 100%; padding: 0 14px 86px; }
  .app-shell.wall-view .station-list { grid-template-columns: 1fr; gap: 7px; }
  .app-shell.wall-view .station-card { grid-template-columns: 40px minmax(0,1fr) 70px; min-height: 82px; padding: 9px 10px; }
  .app-shell.wall-view .bottom-nav { right: auto; left: 50%; width: calc(100% - 40px); }
}

/* Source-matched station list and station detail panel */
.station-list { gap: 10px; }
.station-card {
  grid-template-columns: 46px minmax(0, 1fr) 82px;
  gap: 12px;
  min-height: 96px;
  padding: 13px 14px;
  border: 1px solid rgba(18, 28, 46, .1);
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.station-card:hover { border-color: rgba(22, 163, 74, .3); background: #fff; box-shadow: 0 7px 20px rgba(18, 28, 46, .07); transform: none; }
.station-card:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.station-logo { width: 46px; height: 46px; border-radius: 13px; font-size: 17px; }
.station-main { display: grid; align-content: center; gap: 3px; }
.station-status-tag {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  max-width: 100%;
  padding: 5px 11px;
  border-radius: 999px;
  background: #f2f4f5 !important;
  color: #66737d;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
}
.station-status-tag.yes { background: #e5f7ed !important; color: #14864a; }
.station-status-tag.queue { background: #fff0e4 !important; color: #b35d16; }
.station-status-tag.low { background: #fff6d8 !important; color: #907000; }
.station-status-tag.no { background: #fde9eb !important; color: #c92f3b; }
.station-status-tag .status-dot { width: 6px; height: 6px; }
.station-name { font-size: 14px; font-weight: 700; line-height: 19px; }
.station-details { color: #68747d; font-size: 11px; line-height: 15px; }
.station-side { grid-template-columns: minmax(0, 1fr) 15px; gap: 3px 2px; }
.station-side strong { font-size: 14px; font-weight: 700; line-height: 19px; }
.station-side small { font-size: 10px; line-height: 14px; }
.station-side .ph { color: #a3acb3; font-size: 16px; }

#stationModal {
  position: fixed;
  inset: 16px auto auto 400px;
  display: none;
  flex-direction: column;
  width: 360px;
  height: calc(100dvh - 32px);
  max-width: calc(100vw - 416px);
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(18, 28, 46, .1);
  border-radius: 20px;
  background: #fff;
  color: #17212b;
  box-shadow: 0 18px 50px rgba(18, 28, 46, .18);
}
#stationModal[open] { display: flex; }
#stationModal::backdrop { background: transparent; backdrop-filter: none; }
.station-modal-handle { display: none; }
#stationModal .station-modal-header {
  flex: 0 0 auto;
  align-items: center;
  min-height: 92px;
  margin: 0;
  padding: 18px 16px;
  border-bottom: 1px solid rgba(18, 28, 46, .09);
}
.station-modal-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.station-modal-identity > div { min-width: 0; }
.station-modal-logo { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: 44px; height: 44px; overflow: hidden; border: 1px solid #d7dde2; border-radius: 12px; background: #eef2f5; color: #52616c; font-size: 17px; font-weight: 700; }
.station-modal-logo.logo-lukoil,
.station-modal-logo.logo-teboil { background: #fff4f4; color: #d82932; }
.station-modal-logo.logo-rosneft { background: #fff8df; color: #172434; }
.station-modal-logo.logo-gazprom { background: #eef8ff; color: #1688c9; }
.station-modal-logo.logo-tatneft { background: #effaf2; color: #168f51; }
.station-modal-logo.logo-bashneft { background: #fff8df; color: #172434; }
.station-modal-logo.logo-taif { background: #f7fbef; color: #315d32; }
.station-modal-logo.logo-nnk { background: #fff7e8; color: #e45c12; }
.station-modal-logo.logo-neftmagistral { background: #fff4f1; color: #d94835; }
.station-modal-logo.logo-irbis { background: #eef8ff; color: #14679e; }
.station-modal-logo.logo-tpk { background: #eff7ff; color: #186bc0; }
.station-modal-logo.logo-neftehimprom { background: #fff1f1; color: #e30016; }
.station-modal-logo.logo-topline { background: #fffde6; color: #315c1e; }
.station-modal-logo.logo-opti { background: #edf8ff; color: #0672ba; }
.station-modal-logo.logo-surgutneftegas { background: #eefbfc; color: #087b8d; }
#stationModalTitle { overflow: hidden; margin: 0; font-size: 16px; font-weight: 750; line-height: 21px; text-overflow: ellipsis; white-space: nowrap; }
#stationModalMeta { overflow: hidden; margin: 3px 0 0; color: #68747d; font-size: 11px; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; }
.station-modal-header-actions { display: flex; align-items: center; gap: 8px; }
#stationModal .detail-icon-button,
#stationModal .close-button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid #dce1e5; border-radius: 50%; background: #f8fafb; color: #53616b; font-size: 20px; }
#stationModal .detail-icon-button.selected { color: var(--green); }
.station-modal-scroll { flex: 1 1 auto; min-height: 0; padding: 14px 16px 28px; overflow-y: auto; outline: 0; overscroll-behavior: contain; scrollbar-gutter: stable; }
.station-modal-scroll::-webkit-scrollbar { width: 8px; }
.station-modal-scroll::-webkit-scrollbar-thumb { border: 2px solid #fff; border-radius: 999px; background: #7f858a; }
.station-detail { display: grid; gap: 22px; }
.detail-section-label { margin: 0 0 8px; color: #5f6c76; font-size: 11px; line-height: 15px; }
.detail-status-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 11px; align-items: center; min-height: 94px; padding: 16px; border: 1px solid #dfe4e7; border-radius: 18px; background: #fff; }
.detail-status-card.yes { border-color: #bce8cf; background: #f1fbf5; }
.detail-status-card.queue { border-color: #f4d2b8; background: #fff8f2; }
.detail-status-card.low { border-color: #f1df9f; background: #fffbeb; }
.detail-status-card.no { border-color: #f2c4c9; background: #fff3f4; }
.detail-status-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #f0f3f5; color: #64727b; font-size: 24px; }
.detail-status-card.yes .detail-status-icon { background: #dff6e9; color: #16a35b; }
.detail-status-card.queue .detail-status-icon { background: #ffead9; color: #d36b1a; }
.detail-status-card.low .detail-status-icon { background: #fff1b8; color: #9d7a00; }
.detail-status-card.no .detail-status-icon { background: #fbdde0; color: #d1303d; }
.detail-status-copy { min-width: 0; }
.detail-status-copy strong,
.detail-status-copy span { display: block; }
.detail-status-copy strong { color: #17212b; font-size: 19px; font-weight: 800; line-height: 23px; }
.detail-status-card.yes .detail-status-copy strong { color: #13844a; }
.detail-status-card.queue .detail-status-copy strong { color: #b65e18; }
.detail-status-card.low .detail-status-copy strong { color: #8c6d00; }
.detail-status-card.no .detail-status-copy strong { color: #be2935; }
.detail-status-copy span { margin-top: 4px; color: #66737d; font-size: 11px; line-height: 16px; }
.detail-confidence-value { align-self: start; color: #18a95e; font-size: 19px; }
.detail-confidence { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: 7px 9px; align-items: center; margin-top: 2px; color: #66737d; font-size: 10px; }
.detail-confidence > div { height: 6px; overflow: hidden; border-radius: 999px; background: #dfe5e2; }
.detail-confidence > div i { display: block; height: 100%; border-radius: inherit; background: #21b769; }
.detail-current-actions { grid-column: 1 / -1; display: grid; gap: 9px; padding-top: 13px; border-top: 1px solid rgba(18, 28, 46, .09); }
.detail-current-actions > span { color: #56636d; font-size: 12px; }
.detail-current-actions > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.detail-current-actions button { min-height: 48px; padding: 0 10px; border: 1px solid #d8dfe3; border-radius: 12px; background: #f7f9fa; color: #46545f; font-size: 11px; font-weight: 700; }
.detail-current-actions button .ph { margin-right: 4px; font-size: 16px; }
.detail-current-actions .detail-confirm { border-color: #18a95e; background: #18a95e; color: #fff; }
.detail-current-actions .detail-share-status { width: 100%; border-color: rgba(22, 163, 74, .35); background: transparent; color: #168a49; }
.detail-facts-section h3,
.detail-reports-section h3,
.detail-report-section h3 { margin: 0 0 10px; font-size: 21px; font-weight: 800; line-height: 26px; }
.detail-facts { overflow: hidden; border: 1px solid #dfe4e7; border-radius: 16px; background: #fff; }
.detail-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 54px; padding: 10px 13px; }
.detail-facts > div + div { border-top: 1px solid #e7eaec; }
.detail-facts span { color: #6b7780; font-size: 11px; }
.detail-facts strong { max-width: 68%; font-size: 13px; text-align: right; }
.detail-empty { display: grid; justify-items: center; gap: 5px; min-height: 88px; padding: 19px; border: 1px solid #dfe4e7; border-radius: 16px; background: #fff; text-align: center; }
.detail-empty strong { font-size: 14px; }
.detail-empty span { color: #6b7780; font-size: 11px; }
.detail-report-list { overflow: hidden; border: 1px solid #dfe4e7; border-radius: 16px; background: #fff; }
.detail-report-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 58px; padding: 10px 13px; }
.detail-report-row + .detail-report-row { border-top: 1px solid #e7eaec; }
.detail-report-row strong,
.detail-report-row small { display: block; }
.detail-report-row strong { font-size: 12px; }
.detail-report-row small,
.detail-report-row time { color: #6b7780; font-size: 10px; }
.detail-report-section > p { margin: -7px 0 12px; color: #6b7780; font-size: 11px; }
.detail-report-note { display: flex; align-items: flex-start; gap: 10px; min-height: 86px; padding: 13px 12px; border: 1px solid #bfe6d0; border-radius: 14px; background: #f0faf4; }
.detail-report-note > .ph { color: #29b96d; font-size: 21px; }
.detail-report-note span,
.detail-report-note strong,
.detail-report-note small { display: block; }
.detail-report-note strong { font-size: 11px; }
.detail-report-note small { margin-top: 3px; color: #607067; font-size: 9.5px; line-height: 14px; }
.detail-report-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.detail-report-actions button { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 100px; border: 1px solid #dfe4e7; border-radius: 16px; background: #fff; color: #17212b; font-size: 13px; font-weight: 750; }
.detail-report-actions button .ph { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #def8e9; color: #1bb566; font-size: 26px; }
.detail-report-actions button:last-child .ph { background: #fde8ea; color: #d84b57; }
.detail-route,
.detail-share-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 10px 13px; border: 1px solid #dfe4e7; border-radius: 16px; background: #fff; color: #17212b; text-align: left; }
.detail-route > .ph:first-child { display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #e0f7e9; color: #16a35b; font-size: 21px; }
.detail-route > span { flex: 1 1 auto; min-width: 0; }
.detail-route strong,
.detail-route small { display: block; }
.detail-route strong { font-size: 13px; }
.detail-route small { margin-top: 2px; color: #6b7780; font-size: 10px; }
.detail-route > .ph:last-child { color: #9ca5ab; }
.detail-share-row { justify-content: center; min-height: 46px; color: #168a49; font-size: 12px; font-weight: 700; }

html.dark .station-card,
html.dark #stationModal,
html.dark .detail-status-card,
html.dark .detail-facts,
html.dark .detail-empty,
html.dark .detail-report-list,
html.dark .detail-report-actions button,
html.dark .detail-route,
html.dark .detail-share-row { background: var(--surface); color: var(--text); }

@media (max-width: 900px) and (min-width: 761px) {
  #stationModal { right: 16px; left: auto; max-width: calc(100vw - 32px); }
}

@media (max-width: 760px) {
  .app-shell.wall-view .panel-scroll { padding: 0 14px 92px; }
  .app-shell.wall-view .station-list { gap: 9px; }
  .app-shell.wall-view .station-card { grid-template-columns: 46px minmax(0, 1fr) 78px; gap: 11px; min-height: 96px; padding: 12px 13px; border-radius: 18px; }
  .app-shell.wall-view .station-logo { width: 46px; height: 46px; }
  #stationModal {
    inset: 84px 0 0;
    width: 100%;
    height: calc(100dvh - 84px);
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -12px 40px rgba(18, 28, 46, .2);
  }
  #stationModal::backdrop { background: rgba(18, 28, 46, .32); backdrop-filter: blur(2px); }
  .station-modal-handle { position: absolute; z-index: 3; top: 11px; left: 50%; display: block; width: 40px; height: 4px; border-radius: 999px; background: #d1d5d8; transform: translateX(-50%); }
  #stationModal .station-modal-header { min-height: 102px; padding: 28px 16px 14px; }
  .station-modal-identity { gap: 12px; }
  .station-modal-logo { width: 50px; height: 50px; border-radius: 14px; font-size: 18px; }
  #stationModalTitle { font-size: 16px; }
  .station-modal-header-actions { gap: 8px; }
  #stationModal .detail-icon-button,
  #stationModal .close-button { width: 42px; height: 42px; }
  .station-modal-scroll { padding: 14px 16px 34px; }
  .station-detail { gap: 24px; }
  .detail-status-card { padding: 16px; }
  .detail-status-copy strong { font-size: 19px; }
  .detail-facts-section h3,
  .detail-reports-section h3,
  .detail-report-section h3 { font-size: 22px; line-height: 27px; }
}