/* БензинСтатус — лёгкая типографическая тема. Цвет — только у статусов. */
:root {
--ink: #16181d; --ink-2: #4b505a; --ink-3: #8a8f99; --line: #e6e8ec; --bg: #ffffff; --bg-2: #f6f7f9;
--ok: #1f8a4c; --ok-bg: #e7f6ec; --limit: #b46a00; --limit-bg: #fff3df; --none: #c62828; --none-bg: #fde8e8;
--unk: #6b7280; --unk-bg: #eef0f3; --queue: #8a6d00; --queue-bg: #fff8d6; --exp: #2f5fa8; --exp-bg: #e6eefb;
--accent: #16181d; --radius: 10px; --maxw: 1080px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* тёмная тема: по системной схеме (если не выбрана светлая) или по явному выбору в шапке */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #eef0f3; --ink-2: #b7bcc6; --ink-3: #7e8593; --line: #2a2e36; --bg: #14161a; --bg-2: #1c1f25;
--ok-bg: #123421; --limit-bg: #3a2a08; --none-bg: #401616; --unk-bg: #262a31; --queue-bg: #3a3208; --exp-bg: #16274a;
--ok: #4fc57f; --limit: #f0a53a; --none: #ef6b6b; --queue: #e2c34a; --exp: #7ea7ea; color-scheme: dark; } }
:root[data-theme="dark"] { --ink: #eef0f3; --ink-2: #b7bcc6; --ink-3: #7e8593; --line: #2a2e36; --bg: #14161a; --bg-2: #1c1f25;
--ok-bg: #123421; --limit-bg: #3a2a08; --none-bg: #401616; --unk-bg: #262a31; --queue-bg: #3a3208; --exp-bg: #16274a;
--ok: #4fc57f; --limit: #f0a53a; --none: #ef6b6b; --queue: #e2c34a; --exp: #7ea7ea; color-scheme: dark; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.5; font-size: 16px; }
a { color: inherit; text-decoration-color: var(--ink-3); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
.muted { color: var(--ink-3); }
.small { font-size: 14px; }
h1 { font-size: clamp(24px, 4.5vw, 34px); line-height: 1.2; letter-spacing: -0.01em; margin: 18px 0 8px; }
h2 { font-size: 20px; margin: 32px 0 10px; }
h3 { font-size: 16px; margin: 20px 0 6px; }
.lead { font-size: 17px; color: var(--ink-2); margin: 0 0 14px; }
.top { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 20; }
.top__row { display: flex; align-items: center; gap: 14px; height: 58px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; line-height: 1; color: var(--ink); }
.logo__mark { height: 44px; width: 44px; display: block; }
.logo__text { display: flex; flex-direction: column; gap: 4px; }
.logo__name { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.logo__name b { color: var(--ok, #1fa84a); font-weight: 800; }
.logo__tag { font-size: 12px; color: var(--ink-3); font-weight: 400; letter-spacing: 0; }
.search { flex: 1; max-width: 340px; position: relative; }
.search input { width: 100%; border: 1px solid var(--line); background: var(--bg-2); border-radius: 8px; padding: 8px 12px; font: inherit; color: inherit; }
.search__list { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; margin-top: 4px; z-index: 30; display: none; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.search__list a { display: block; padding: 8px 10px; text-decoration: none; }
.search__list a:hover { background: var(--bg-2); }
.top__nav { display: flex; align-items: center; gap: 18px; margin-left: auto; font-size: 15px; }
.top__nav a { text-decoration: none; color: var(--ink-2); }
.top__nav a:hover, .top__nav a.on { color: var(--ink); }
.top__nav a.on { font-weight: 600; }
.theme { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); cursor: pointer; position: relative; padding: 0; color: var(--ink-2); }
.theme i { position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; background: currentColor; transition: opacity .15s; }
.theme__sun { -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; }
.theme__moon { -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; opacity: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme__sun { opacity: 0; } :root:not([data-theme="light"]) .theme__moon { opacity: 1; } }
:root[data-theme="dark"] .theme__sun { opacity: 0; } :root[data-theme="dark"] .theme__moon { opacity: 1; }
.burger { display: none; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); cursor: pointer; margin-left: auto; position: relative; padding: 0; }
.burger span, .burger span::before, .burger span::after { content: ""; position: absolute; left: 10px; right: 10px; height: 2px; background: var(--ink); border-radius: 1px; }
.burger span { top: 18px; } .burger span::before { left: 0; right: 0; top: -6px; } .burger span::after { left: 0; right: 0; top: 6px; }
@media (max-width: 760px) {
.top__row { gap: 10px; }
.logo__mark { height: 36px; width: 36px; } .logo__name { font-size: 20px; } .logo__tag { display: none; }
.search { max-width: none; }
.burger { display: block; }
.top__nav { display: none; position: absolute; left: 0; right: 0; top: 58px; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(0,0,0,.12); padding: 6px 0; }
.top__nav.open { display: flex; }
.top__nav a, .top__nav .muted { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.top__nav .theme { margin: 10px 16px; width: auto; height: 40px; }
.top__nav .theme::after { content: "Тема"; position: absolute; left: 44px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 15px; color: var(--ink); }
.top__nav .theme i { margin: 0 0 0 12px; top: 0; bottom: 0; }
}
.foot { border-top: 1px solid var(--line); margin-top: 56px; padding: 22px 0 40px; font-size: 14px; }
.foot__row { display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; }
.foot__links { display: flex; gap: 16px; flex-wrap: wrap; }
/* сводка по видам топлива */
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0; }
.sum { text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--bg); }
.sum__fuel { font-size: 13px; color: var(--ink-3); }
.sum__main { font-size: 26px; font-weight: 650; line-height: 1.1; margin: 4px 0; letter-spacing: -0.02em; }
.sum__main small { font-size: 14px; font-weight: 400; color: var(--ink-3); }
.sum__bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--unk-bg); margin: 6px 0 4px; }
.sum__bar i { display: block; height: 100%; }
.sum__note { font-size: 12px; color: var(--ink-3); }
.updated { font-size: 14px; color: var(--ink-2); margin: 4px 0 12px; }
.updated b { font-weight: 600; }
/* чипы статусов */
.st { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.st--ok { color: var(--ok); background: var(--ok-bg); }
.st--limit { color: var(--limit); background: var(--limit-bg); }
.st--queue { color: var(--queue); background: var(--queue-bg); }
.st--none { color: var(--none); background: var(--none-bg); }
.st--expected { color: var(--exp); background: var(--exp-bg); }
.st--unknown { color: var(--unk); background: var(--unk-bg); font-weight: 400; }
.st__t { font-weight: 400; opacity: .8; }
.st__c { font-size: 11px; opacity: .8; }
.st__d { font-size: 11px; font-weight: 600; }
[data-tip] { cursor: help; }
/* подсказка живёт в body (app.js), чтобы её не резали overflow таблицы и попапа карты */
.tipbox { position: fixed; z-index: 50; max-width: 260px; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--bg); font-size: 12px; line-height: 1.35; font-weight: 400; white-space: pre-line; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.tipbox::after { content: ''; position: absolute; left: var(--ax, 50%); bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
.tipbox--below::after { bottom: auto; top: -5px; border-top: 0; border-bottom: 5px solid var(--ink); }
/* таблица АЗС */
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { text-align: left; font-weight: 500; color: var(--ink-3); font-size: 13px; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl .addr { color: var(--ink-2); font-size: 14px; }
.tbl .closed { color: var(--none); font-size: 13px; }
.cell-fuels { display: flex; flex-wrap: wrap; gap: 6px; }
.fs { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.price { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 720px) {
.tbl thead { display: none; }
.tbl tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tbl td { display: block; border: 0; padding: 2px 0; }
}
/* фильтры-ссылки */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 14px; text-decoration: none; background: var(--bg); }
.chip--on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip small { color: var(--ink-3); }
.chip--toggle { border-style: dashed; } /* переключатель, а не ещё одна страница */
.chip--toggle.chip--on { border-style: solid; background: var(--ok); border-color: var(--ok); color: #fff; }
.btn { display: inline-block; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); border-radius: 8px; padding: 9px 16px; font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--sm { padding: 5px 10px; font-size: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } .st-side { order: -1; } } /* на телефоне карта и соседи выше истории */
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.cols { columns: 3 200px; column-gap: 24px; }
.cols li { break-inside: avoid; }
.note { background: var(--bg-2); border-radius: var(--radius); padding: 12px 14px; font-size: 14px; color: var(--ink-2); }
.faq h3 { margin-top: 16px; }
.faq p { margin: 4px 0; color: var(--ink-2); }
.crumbs { font-size: 13px; color: var(--ink-3); margin-top: 14px; }
.crumbs a { color: var(--ink-3); }
.map { height: 380px; border-radius: var(--radius); border: 1px solid var(--line); margin: 12px 0; background: var(--bg-2); }
.map:empty::before { content: "Загрузка карты…"; display: block; padding: 20px; color: var(--ink-3); }
.map--off:empty::before { content: "Карта не загрузилась — попробуйте обновить страницу"; }
.hidden { display: none; }
.trend { display: flex; gap: 4px; align-items: flex-end; height: 48px; }
.trend i { flex: 1; background: var(--ok); opacity: .7; border-radius: 2px 2px 0 0; min-height: 2px; }
.form label { display: block; margin: 10px 0 4px; font-weight: 500; }
.form select, .form input[type=number], .form textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: inherit; width: 100%; max-width: 360px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 520px; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg label { margin: 0; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 400; }
.seg input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.alert { background: var(--none-bg); color: var(--none); padding: 10px 12px; border-radius: 8px; margin: 10px 0; }
.ok-box { background: var(--ok-bg); color: var(--ok); padding: 10px 12px; border-radius: 8px; margin: 10px 0; }
.warn-box { background: var(--limit-bg); color: var(--limit); padding: 10px 12px; border-radius: 8px; margin: 10px 0; }
.warn-box a { color: inherit; }
.closed--maybe { color: var(--limit); }
.hist { font-size: 14px; }
.hist td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); }
.stats { display: flex; gap: 24px; flex-wrap: wrap; margin: 14px 0; }
.stats b { font-size: 22px; display: block; letter-spacing: -0.02em; }
.stats span { font-size: 13px; color: var(--ink-3); }
/* аватар сети: фирменный цвет + первая буква; без имени — значок колонки */
.av { --c: #8a8f99; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px;
background: var(--c); color: #fff; font-weight: 700; font-size: 13px; line-height: 1; flex: 0 0 auto; vertical-align: middle;
box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.av--pump::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; }
.av--lg { width: 44px; height: 44px; border-radius: 12px; font-size: 20px; }
.av--sm { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; }
.cell-st { display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; align-items: start; }
.cell-st .av { grid-row: 1 / span 3; margin-top: 2px; }
.cell-st > a { grid-column: 2; }
.cell-st .addr, .cell-st .closed { grid-column: 2; }
/* карта: пины с буквой сети и кольцом статуса, кластеры, легенда */
.map { height: 440px; overflow: hidden; }
.maplibregl-map { font-family: inherit; background: var(--bg-2); }
.mk { --b: #8a8f99; --s: var(--unk); position: relative; width: 34px; height: 34px; cursor: pointer; }
.mk::before { content: ""; position: absolute; inset: 0; background: var(--b); border: 3px solid var(--s); border-radius: 50% 50% 50% 0;
transform: rotate(-45deg); box-shadow: 0 3px 8px rgba(0,0,0,.28); }
.mk span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700;
font-size: 12px; line-height: 1; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
.mk--pump span::before { content: ""; width: 13px; height: 13px; background: #fff; -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; }
.mk--ok { --s: var(--ok); } .mk--limit { --s: var(--limit); } .mk--queue { --s: var(--queue); }
.mk--none { --s: var(--none); } .mk--expected { --s: var(--exp); }
.mk--none::after { content: "×"; position: absolute; right: -4px; top: -6px; width: 15px; height: 15px; border-radius: 50%; background: var(--none);
color: #fff; font-size: 11px; font-weight: 700; line-height: 15px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.mk--limit::after { content: "!"; position: absolute; right: -4px; top: -6px; width: 15px; height: 15px; border-radius: 50%; background: var(--limit);
color: #fff; font-size: 11px; font-weight: 700; line-height: 15px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.mk:hover::before { transform: rotate(-45deg) scale(1.12); }
/* закрытая или «возможно, не работает»: пин полупрозрачный и обесцвеченный, ниже остальных.
Прозрачность через filter: MapLibre пишет маркеру inline opacity, свой opacity не сработает */
.mk--off { filter: grayscale(1) opacity(.45); }
.mk--off:hover { filter: grayscale(1) opacity(.85); }
.map-wrap .maplibregl-marker.is-pin.mk--off { z-index: 0; }
.cl { position: relative; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.25); background: var(--unk); cursor: pointer; }
.cl i { position: relative; font-style: normal; }
.cl span { --ok-share: 0; position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 13px; color: var(--ink); background: conic-gradient(var(--ok) calc(var(--ok-share) * 1%), var(--none) 0); }
.cl span::before { content: ""; position: absolute; width: 30px; height: 30px; border-radius: 50%; background: var(--bg); }
.cl--unk span { background: var(--unk); }
.map-wrap .maplibregl-popup-content { border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.18); background: var(--bg); color: var(--ink); padding: 12px 14px; font-size: 14px; line-height: 1.4; }
.map-wrap .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--bg); } .map-wrap .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--bg); }
.map-wrap .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--bg); } .map-wrap .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--bg); }
.map-wrap .maplibregl-popup-close-button { color: var(--ink-3); font-size: 18px; padding: 2px 8px; background: transparent; }
.map-wrap .maplibregl-popup-close-button:hover { background: var(--bg-2); }
/* .mk и .cl задают position: relative ради своих ::before/::after, а app.css грузится после CSS MapLibre —
без этого правила маркеры выстраиваются в поток и уезжают вниз на высоту всех предыдущих */
.map-wrap .maplibregl-marker { position: absolute; }
.map-wrap .maplibregl-popup { z-index: 5; } /* попап выше пинов и кластеров, иначе соседний пин ложится на него */
.map-wrap .maplibregl-marker.is-cluster { z-index: 2; } .map-wrap .maplibregl-marker.is-pin { z-index: 1; } .map-wrap .maplibregl-marker.is-pin:hover { z-index: 3; }
.pp { display: grid; grid-template-columns: 44px 1fr; column-gap: 10px; }
.pp .av { grid-row: 1 / span 2; }
.pp b { font-size: 15px; } .pp .addr { color: var(--ink-2); font-size: 13px; }
.pp .pp-st { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.pp .pp-more { grid-column: 1 / -1; margin-top: 8px; font-weight: 500; }
/* легенда — сразу под картой, в потоке, а не в углу и не в конце страницы */
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 16px; font-size: 13px; color: var(--ink-2); align-items: center; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.legend .legend__t { color: var(--ink-3); }
.maplibregl-ctrl-attrib { font-size: 10px; background: color-mix(in srgb, var(--bg) 80%, transparent) !important; color: var(--ink-3) !important; }
.maplibregl-ctrl-attrib a { color: var(--ink-3) !important; }
.maplibregl-ctrl-group { background: var(--bg) !important; box-shadow: 0 1px 4px rgba(0,0,0,.2) !important; }
.maplibregl-ctrl-group button + button { border-top-color: var(--line) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); } }
:root[data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
.map-wrap { position: relative; }
/* элементы карты не должны всплывать над шапкой при прокрутке */
.map-wrap { position: relative; isolation: isolate; z-index: 1; }
/* соседние АЗС со статусами */
.near { list-style: none; padding: 0; margin: 0 0 16px; }
.near-i { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.near-i .av { margin-top: 2px; }
.near-st { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.near-st .st { font-size: 12px; padding: 1px 7px; }
/* главная: карта России, таблица регионов, спарклайны */
.map--home { height: 460px; }
.map--home:empty::before { content: "Загрузка карты…"; display: block; padding: 20px; color: var(--ink-3); }
.pp-city b { font-size: 15px; } .pp-city .pp-st { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tbl-wrap { overflow-x: auto; }
.tbl--regions td.num, .tbl--regions th:not(:first-child) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl--regions td, .tbl--regions th { padding: 8px 10px; }
@media (max-width: 720px) { .tbl--regions thead { display: table-header-group; } .tbl--regions tr { display: table-row; padding: 0; } .tbl--regions td { display: table-cell; padding: 8px 6px; border-bottom: 1px solid var(--line); } }
.share { font-weight: 600; } .share--ok { color: var(--ok); } .share--limit { color: var(--limit); } .share--none { color: var(--none); }
.delta { font-size: 12px; font-weight: 500; } .delta--up { color: var(--ok); } .delta--down { color: var(--none); }
.delta--up::before { content: "▲"; font-size: 9px; margin-right: 1px; } .delta--down::before { content: "▼"; font-size: 9px; margin-right: 1px; }
.sparks { display: flex; flex-wrap: wrap; gap: 16px; margin: 8px 0 16px; }
.spark { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); color: var(--ink-2); }
.spark-h { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; color: var(--ink); }
.spark-svg { display: block; color: var(--ok); }
.st-head { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; margin: 8px 0 4px; }
.st-head h1 { margin: 0; } .st-sub { margin: 4px 0 0; }
.brands { list-style: none; padding: 0; margin: 8px 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; }
.brands li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
@media (max-width: 720px) { .map--home { height: 360px; } .map { height: 360px; } }
/* логотип сети вместо буквы: белая подложка, чтобы фирменные цвета не спорили с темой */
.av--img { background: #fff; padding: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.av--img img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 3px; }
.mk span img { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; background: #fff; padding: 1px; display: block; }
.pp .av--img { width: 44px; height: 44px; }
.brands--big { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 16px; }
.brands--big li { gap: 12px; padding: 6px 0; line-height: 1.3; }
/* очередь: строка под адресом АЗС и бейдж на пине */
.queue { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 13px; color: var(--queue); }
.queue--big { font-weight: 600; }
.st__q { font-size: 11px; margin-left: 2px; }
.mk--q::after { content: "⏳"; position: absolute; left: -8px; top: -8px; width: 19px; height: 19px; border-radius: 50%; background: #fff3c4;
font-size: 12px; line-height: 19px; text-align: center; box-shadow: 0 0 0 1.5px var(--bg); }
.pp .queue { display: block; margin: 4px 0 0; }
.rphoto { display: inline-block; margin: 4px 0 0 8px; vertical-align: middle; }
.rphoto img { width: 120px; height: 90px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
/* попап-список: несколько АЗС на одном месте, которые не разнести зумом */
.pp-list { display: flex; flex-direction: column; max-height: 320px; overflow: auto; margin: -4px -6px; }
.pp-row { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 6px; border-radius: 8px; color: inherit; text-decoration: none; }
.pp-row:hover { background: var(--bg-2); }
.pp-row + .pp-row { border-top: 1px solid var(--line); border-radius: 0; }
.pp-row b { font-size: 14px; display: block; } .pp-row .addr { display: block; color: var(--ink-2); font-size: 12px; }
.pp-row .pp-st { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
/* история на странице АЗС: подзаголовок вида топлива и отрезки времени */
.hist-f { font-size: 15px; margin: 14px 0 4px; }
.hist-t { white-space: nowrap; }
@media (max-width: 720px) { .hist-t { white-space: normal; } }
/* сводки властей и сетей: без ссылок, первая фраза текстом */
.news li { margin: 6px 0; } .news b { font-weight: 600; } .news__b { color: var(--ink-2); }