/* ===========================================================================
   Заправки Онлайн — приборная панель, а не дашборд.
   Токены названы по миру продукта: навес АЗС, асфальт, сигнальные лампы.
   Светлая тема — значение по умолчанию, тёмная включается data-theme="dark".
   =========================================================================== */

:root {
  /* поверхности: дневной свет над навесом */
  --canopy: #f4f6fa;          /* фон страницы */
  --panel: #ffffff;           /* карточки, шапка */
  --panel-2: #edf1f7;         /* вложенные элементы, невыбранные чипы */
  --panel-3: #e3e9f1;         /* нажатое состояние */
  --hairline: rgba(18, 28, 46, .10);
  --hairline-2: rgba(18, 28, 46, .16);

  /* асфальт: четыре уровня текста */
  --ink: #121a28;
  --ink-2: #46505f;
  --ink-3: #6c7789;
  --ink-4: #98a2b3;

  /* сигнальные лампы приборки */
  --sig-ok: #16a34a;
  --sig-queue: #ea580c;
  --sig-low: #ca8a04;
  --sig-empty: #dc2626;
  --sig-idle: #9aa6b6;
  --sig-ink: #ffffff;         /* текст на сигнальном фоне */

  --map-bg: #f8f4f0;

  /* свет: в светлой теме подъём даёт тень, в тёмной — граница */
  --lift: 0 0 0 1px rgba(18, 28, 46, .06), 0 1px 2px -1px rgba(18, 28, 46, .10), 0 4px 12px -4px rgba(18, 28, 46, .10);
  --lift-2: 0 0 0 1px rgba(18, 28, 46, .07), 0 2px 6px -2px rgba(18, 28, 46, .12), 0 12px 32px -8px rgba(18, 28, 46, .18);
  --ring: 0 0 0 3px rgba(22, 163, 74, .22);

  /* ритм: база 4px */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.23, 1, .32, 1);
}

:root[data-theme="dark"] {
  --canopy: #080b11;          /* ночной асфальт */
  --panel: #0e141d;
  --panel-2: #161d28;
  --panel-3: #1d2634;
  --hairline: rgba(255, 255, 255, .07);
  --hairline-2: rgba(255, 255, 255, .13);

  --ink: #eef2f8;
  --ink-2: #b3bccb;
  --ink-3: #8b96a8;
  --ink-4: #647082;

  --sig-ok: #30d56b;          /* светящийся зелёный, как табло АЗС ночью */
  --sig-queue: #ff8a2b;       /* натриевый фонарь */
  --sig-low: #ffc400;         /* лампа резерва на приборке */
  --sig-empty: #ff4d5a;       /* стоп-сигнал */
  --sig-idle: #5c6878;
  --sig-ink: #06150c;

  --map-bg: #1b1f24;

  /* на тёмном тени не читаются — подъём даёт только контур */
  --lift: 0 0 0 1px rgba(255, 255, 255, .08);
  --lift-2: 0 0 0 1px rgba(255, 255, 255, .10), 0 16px 40px -12px rgba(0, 0, 0, .7);
  --ring: 0 0 0 3px rgba(48, 213, 107, .26);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--canopy);
  color: var(--ink);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body { display: flex; flex-direction: column; overflow: hidden; }

button { font: inherit; cursor: pointer; }
h1, h2 { margin: 0; letter-spacing: -.015em; text-wrap: balance; }

/* ============================================================ шапка */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--hairline);
}

.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }

.brand-badge {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--sig-ok);
  color: var(--sig-ink);
}
.brand-badge svg { width: 18px; height: 18px; }

.wordmark {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.wordmark b { color: var(--ink); font-weight: 600; }

.top-right { display: flex; align-items: center; gap: 8px; }

/* живой индикатор свежести — сигнатура дышащей приборки */
.pulse {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pulse-dot {
  width: 7px; height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--sig-ok);
  box-shadow: 0 0 0 0 currentColor;
  color: var(--sig-ok);
  animation: breathe 2.4s var(--ease) infinite;
}

@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sig-ok) 45%, transparent); }
  50%      { box-shadow: 0 0 0 5px transparent; }
}

.pulse-dot.idle { background: var(--sig-idle); animation: none; box-shadow: none; }

/* точка «вы здесь» — единственный синий на всём экране, поэтому не спорит со статусами */
.me-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #2f7de1;
  border: 2.5px solid var(--panel);
  box-shadow: 0 0 0 1px rgba(47, 125, 225, .5), 0 2px 8px rgba(47, 125, 225, .45);
}

.iconbtn {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1;
  transition: color .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);
}
.iconbtn:hover { color: var(--ink); border-color: var(--hairline-2); }
.iconbtn:active { transform: scale(.94); }

/* ============================================================ фильтры */

.filters {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--hairline);
}

.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.005em;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);
}
.chip:hover { color: var(--ink); }
.chip:active { transform: scale(.96); }
.chip[aria-selected="true"] {
  background: var(--sig-ok);
  border-color: var(--sig-ok);
  color: var(--sig-ink);
  font-weight: 600;
}

/* переключатель вместо чекбокса: крупнее палец, читается как тумблер */
.switch { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; margin-left: auto; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch .track {
  position: relative;
  width: 38px; height: 22px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--panel-3);
  border: 1px solid var(--hairline);
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.switch .track i {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(18, 28, 46, .25);
  transition: transform .18s var(--ease);
}
.switch input:checked + .track { background: var(--sig-ok); border-color: var(--sig-ok); }
.switch input:checked + .track i { transform: translateX(16px); }
.switch input:focus-visible + .track { box-shadow: var(--ring); }

.switch-label { font-size: 13px; color: var(--ink-2); white-space: nowrap; }

/* ============================================================ каркас */

.shell {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 12px;
  padding: 12px;
}

/* --- сайдбар: 380px говорит «список равноправен карте, а не подпись к ней» */

.sidebar {
  display: none;
  flex: 0 0 clamp(320px, 25vw, 396px);
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
  overflow: hidden;
}

@media (min-width: 1000px) { .sidebar { display: flex; } }

.side-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--hairline);
}
.side-head h2 { font-size: 15px; font-weight: 600; }
.side-count { font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; }

.side-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }

.side-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 10px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: inherit;
  text-align: left;
  transition: background .13s var(--ease);
}
.side-row:hover { background: var(--panel-2); }
.side-row:active { background: var(--panel-3); }
.side-row + .side-row { box-shadow: 0 -1px 0 var(--hairline); }

.side-main { min-width: 0; flex: 1; }
.side-name {
  font-size: 13.5px;
  font-weight: 550;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-meta { font-size: 11.5px; color: var(--ink-4); margin-top: 1px; font-variant-numeric: tabular-nums; }
.side-dist { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.side-empty { padding: 28px 18px; text-align: center; color: var(--ink-4); font-size: 13px; text-wrap: pretty; }

.side-foot {
  margin: 0;
  padding: 10px 16px calc(12px + var(--safe-b));
  border-top: 1px solid var(--hairline);
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-4);
  text-wrap: pretty;
}

/* --- шкала бака: сигнатура. Один глиф статуса на весь продукт. */

.gauge {
  display: inline-flex;
  gap: 2px;
  flex: 0 0 auto;
  padding: 3px;
  border-radius: 5px;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.gauge i {
  width: 4px;
  height: 14px;
  border-radius: 1.5px;
  background: var(--sig-idle);
  opacity: .28;
}
/* Полная — есть, ¾ — очередь, ¼ — заканчивается, одно деление — пусто. */
.gauge.g-yes   i:nth-child(-n+4) { background: var(--sig-ok);    opacity: 1; }
.gauge.g-queue i:nth-child(-n+3) { background: var(--sig-queue); opacity: 1; }
.gauge.g-low   i:nth-child(-n+2) { background: var(--sig-low);   opacity: 1; }
.gauge.g-no    i:nth-child(-n+1) { background: var(--sig-empty); opacity: 1; }

.gauge.g-lg { padding: 4px; border-radius: 7px; }
.gauge.g-lg i { width: 5px; height: 20px; border-radius: 2px; }

/* --- карта в карточке */

.mapcard {
  position: relative;
  flex: 1;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
  overflow: hidden;
  background: var(--map-bg);
}

#map { position: absolute; inset: 0; }

.maplibregl-map { font: inherit; }
.maplibregl-ctrl-attrib {
  background: color-mix(in srgb, var(--panel) 84%, transparent) !important;
  color: var(--ink-4) !important;
  font-size: 10.5px;
  border-radius: 6px 0 0 0;
}
.maplibregl-ctrl-attrib a { color: var(--ink-4) !important; }

/* чип свежести поверх карты */
.map-chip {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  box-shadow: var(--lift);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* плавающие контролы стопкой — большой палец достаёт, карта не перекрыта */
.map-tools {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px;
  border-radius: 13px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  box-shadow: var(--lift);
}

.tool {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-2);
  transition: background .13s var(--ease), color .13s var(--ease), transform .1s var(--ease);
}
.tool svg { width: 20px; height: 20px; }
.tool:hover { background: var(--panel-2); color: var(--ink); }
.tool:active { transform: scale(.93); }
.tool-gap { margin-top: 5px; box-shadow: 0 -3px 0 -2px var(--hairline); }

/* ключ к шкале: показывается один раз внизу карты, прячется когда данных нет */
.map-legend {
  position: absolute;
  left: 12px; bottom: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: calc(100% - 24px);
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  box-shadow: var(--lift);
  font-size: 11.5px;
  color: var(--ink-3);
  overflow-x: auto;
  scrollbar-width: none;
}
.map-legend::-webkit-scrollbar { display: none; }
.lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: 0 0 auto; }
.map-legend .gauge { padding: 2px; border-radius: 4px; }
.map-legend .gauge i { width: 3px; height: 11px; }

.hint {
  position: absolute;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  z-index: 2;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  box-shadow: var(--lift);
  color: var(--ink-3);
  font-size: 12.5px;
  white-space: nowrap;
}

/* ============================================================ карточка АЗС */

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  padding: 20px 18px calc(20px + var(--safe-b));
  background: var(--panel);
  border-top: 1px solid var(--hairline);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--lift-2);
  animation: rise .22s var(--ease);
}

@keyframes rise { from { transform: translateY(14px); opacity: 0; } }

@media (min-width: 1000px) {
  .sheet {
    left: auto;
    right: 24px;
    bottom: 24px;
    width: 372px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    animation: pop .18s var(--ease);
  }
  .sheet-grip { display: none; }
}

@keyframes pop { from { transform: scale(.96); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sheet { animation: none; }
  .pulse-dot { animation: none; }
}

.sheet-grip {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 4px;
  border-radius: 999px;
  background: var(--hairline-2);
}

.sheet-close {
  position: absolute;
  top: 14px; right: 14px;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--ink-3);
  transition: color .13s var(--ease), transform .1s var(--ease);
}
.sheet-close svg { width: 18px; height: 18px; }
.sheet-close:hover { color: var(--ink); }
.sheet-close:active { transform: scale(.92); }

.sheet-head { display: flex; align-items: flex-start; gap: 12px; margin: 0 40px 14px 0; }

.brand-avatar {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-3);
}

.sheet h2 { font-size: 18px; font-weight: 600; line-height: 1.25; }
.sheet-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-4); }

.sheet-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: var(--r-md);
  background: var(--panel-2);
  border: 1px solid var(--hairline);
}
.st-body { min-width: 0; }
.st-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.st-meta { font-size: 12px; color: var(--ink-4); margin-top: 2px; font-variant-numeric: tabular-nums; }

.sheet-facts { display: grid; gap: 7px; margin: -6px 0 16px; }
.sheet-facts:empty { display: none; }

.fact { display: flex; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.fact b { flex: 0 0 62px; font-weight: 500; color: var(--ink-4); }
.fact a { color: var(--sig-ok); text-decoration: none; }
.fact a:hover { text-decoration: underline; }

.fact-row { display: flex; flex-wrap: wrap; gap: 5px; }
.fact-chip {
  padding: 3px 9px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--panel-2);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-3);
}

.sheet-ask { margin: 0 0 9px; font-size: 12.5px; color: var(--ink-3); }

.report { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
@media (max-width: 400px) { .report { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

.rep {
  min-height: 46px;
  padding: 12px 4px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--panel-2);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.012em;
  transition: background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease), transform .1s var(--ease);
}
.rep:active { transform: scale(.97); }
.rep-yes:hover   { background: var(--sig-ok);    border-color: var(--sig-ok);    color: var(--sig-ink); }
.rep-queue:hover { background: var(--sig-queue); border-color: var(--sig-queue); color: var(--sig-ink); }
.rep-low:hover   { background: var(--sig-low);   border-color: var(--sig-low);   color: var(--sig-ink); }
.rep-no:hover    { background: var(--sig-empty); border-color: var(--sig-empty); color: var(--sig-ink); }
.rep[disabled] { opacity: .45; pointer-events: none; }

.sheet-note { margin: 12px 0 0; font-size: 11px; line-height: 1.45; color: var(--ink-4); text-wrap: pretty; }

/* ============================================================ тост */

.toast {
  position: fixed;
  left: 50%; top: 14px;
  transform: translateX(-50%);
  z-index: 1200;
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  box-shadow: var(--lift-2);
  font-size: 13.5px;
  font-weight: 500;
  animation: drop .2s var(--ease);
}
@keyframes drop { from { transform: translate(-50%, -8px); opacity: 0; } }
.toast.err { color: var(--sig-empty); border-color: color-mix(in srgb, var(--sig-empty) 45%, transparent); }

/* ================================================== посадочные страницы */

body.doc { overflow: auto; display: block; background: var(--canopy); }

.ghost-link {
  padding: 7px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.ghost-link:hover { color: var(--ink); border-color: var(--hairline-2); }

.brand { text-decoration: none; color: inherit; }

.page { max-width: 780px; margin: 0 auto; padding: 28px 18px 40px; }

.crumbs { font-size: 12.5px; color: var(--ink-4); margin-bottom: 14px; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs span { margin: 0 5px; opacity: .6; }
.crumbs b { color: var(--ink-2); font-weight: 500; }

.page h1 { font-size: 28px; font-weight: 640; line-height: 1.15; margin-bottom: 10px; }
.lede { margin: 0 0 20px; font-size: 15px; color: var(--ink-2); text-wrap: pretty; }

.cta {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--r-md);
  background: var(--sig-ok);
  color: var(--sig-ink);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .1s var(--ease), filter .15s var(--ease);
}
.cta:hover { filter: brightness(1.06); }
.cta:active { transform: scale(.97); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
  margin: 26px 0 0;
}

.card {
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--panel);
  box-shadow: var(--lift);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .04em;
}
.card-num { margin-top: 8px; font-size: 22px; font-weight: 640; font-variant-numeric: tabular-nums; }
.card-meta { margin-top: 3px; font-size: 11.5px; color: var(--ink-4); text-wrap: pretty; }

.block { margin-top: 32px; }
.block h2 { font-size: 17px; font-weight: 600; margin-bottom: 12px; }

.rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hairline);
        border-radius: var(--r-md); background: var(--panel); overflow: hidden; }
.rows .row { display: flex; align-items: center; gap: 11px; padding: 11px 14px; }
.rows .row + .row { border-top: 1px solid var(--hairline); }
.row-main { min-width: 0; flex: 1; }
.row-name { display: block; font-size: 14px; font-weight: 550; color: var(--ink); text-decoration: none; }
a.row-name:hover { color: var(--sig-ok); }
.row-meta { display: block; font-size: 12px; color: var(--ink-4); margin-top: 1px; }

.empty { padding: 22px 16px; border: 1px dashed var(--hairline-2); border-radius: var(--r-md);
         color: var(--ink-4); font-size: 13.5px; text-align: center; text-wrap: pretty; }

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-2);
  font-size: 13px;
  text-decoration: none;
}
.chip-link span { color: var(--ink-4); font-size: 11.5px; font-variant-numeric: tabular-nums; }
a.chip-link:hover { border-color: var(--sig-ok); color: var(--ink); }
.chip-link.static { background: var(--panel-2); }

.prose p { font-size: 14px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

.page-foot { max-width: 780px; margin: 0 auto; padding: 20px 18px 40px;
             border-top: 1px solid var(--hairline); }
.page-foot p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-4); text-wrap: pretty; }
.page-foot a { color: var(--ink-3); }

@media (max-width: 560px) {
  .page h1 { font-size: 23px; }
  .page { padding: 20px 14px 32px; }
}

/* ============================================================ мобильное */

@media (max-width: 999px) {
  .shell { padding: 0; gap: 0; }
  .mapcard { border: 0; border-radius: 0; box-shadow: none; }
  .filters { padding: 10px 12px; gap: 10px; }
  .switch-label { display: none; }
  .top { padding: 9px 12px; }
  .map-chip { font-size: 11.5px; padding: 6px 10px; }
}

@media (max-width: 400px) {
  .pulse span { display: none; }
  .pulse { padding: 8px; }
}

/* --- цены -----------------------------------------------------------------
   Цена — не сигнал наличия, поэтому ни один сигнальный цвет здесь не звучит.
   Марка топлива — шильдик на приборке, дельта — служебная подпись без цвета:
   единственный акцент на сайте зарезервирован за зелёным «топливо есть». */

.fuel-tag {
  flex: none;
  min-width: 52px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: var(--panel-2);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  letter-spacing: .01em;
}

.delta {
  flex: none;
  font-size: 11.5px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.src {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-4);
  text-wrap: pretty;
}

.st-price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.st-price b { font-weight: 640; color: var(--ink); }