:root {
  /* ── Палитра разложена по полкам: имя говорит РОЛЬ, а не цвет. Это подготовка к светлой
     теме — включить её будет означать «дать этим же именам другие значения».
       фон и поверхности  — меняются вместе с темой;
       текст              — меняется вместе с темой;
       --tint-rgb         — полупрозрачные линии и подсветки поверх фона, меняются с темой;
       поверх медиа       — подложки и подписи НА фотографиях: остаются как есть в любой
                            теме, иначе подпись утонет в снимке;
       тени               — всегда чёрные, у светлой темы меняется только сила;
       акценты            — янтарь и цвета выгоды, одинаковы в обеих темах.
     Оттенки НЕ схлопаны: близкие #d7dbe3 и #e8ebf1 остались разными токенами — сверка
     показала, что схлопывание меняет вид страницы. ── */

  /* фон и поверхности */
  --bg: #000; --bg-rgb: 0,0,0;
  --surface: #14171d; --surface-2: #0c0e12; --surface-3: #0d0f13;
  --surface-deep-rgb: 5,7,10;
  --panel: rgba(12,14,18,0.86);
  --panel-solid: #0c0f14;      /* непрозрачная панель поверх затемнения */
  --card-top: #2b303b;         /* верхний угол градиента карточки */
  --panel-full: #06080b;       /* карточка, развёрнутая во весь экран (телефон) */
  --veil-rgb: 10,12,16;        /* полупрозрачная плашка */
  --veil-2-rgb: 7,9,12;        /* нижняя панель «сохранить поиск» на телефоне */
  --table-head: #12141a;       /* шапка и левый столбец таблицы сравнения */
  --scroll: #000;
  --soft: #636362;             /* заливка выпадающего списка и овала «Сохранить поиск» */
  --on-soft: var(--surface);   /* текст на этой заливке */
  /* Подсветка и пунктир ПОВЕРХ этой заливки. Не равны цвету текста: рамка всегда была
     чисто-чёрной, а текст почти-чёрным — оттенки разные, сводить их нельзя. */
  --soft-tint-rgb: 0,0,0;

  /* текст */
  --ink: #eef2fb; --ink-1: #e8ebf1; --ink-2: #d7dbe3; --ink-3: #c7ccd6;
  --muted: #9aa2b1; --faint: #6b7280;
  --soft-ink: #636362;         /* подписи цветом выпадашки: тариф, почта, дата в списке */
  --ink-strong: #fff; --ink-strong-rgb: 255,255,255;
  --on-accent: #0a0a0a; --on-accent-rgb: 0,0,0;   /* текст на янтарной кнопке */
  /* Единственное место (крестик закрытия), где текст на янтаре чисто-чёрный, а не
     почти-чёрный. Сохранено как есть ради точного совпадения с прежним видом; свести
     к --on-accent можно отдельной осознанной правкой. */
  --on-accent-pure: #000;

  /* линии и подсветки поверх фона */
  --tint-rgb: 255,255,255;
  --line: rgba(var(--tint-rgb),0.10);

  /* поверх фотографий — темой не управляется */
  --scrim: #000; --scrim-rgb: 0,0,0;
  --on-media: #fff; --on-media-rgb: 255,255,255;
  --on-color: #fff;      /* белый текст и плашки на цветной заливке */
  --media-bg: #06080b;   /* поле вокруг снимка на весь экран */
  --backdrop-rgb: 3,5,8; /* затемнение под модальным окном — тёмное в любой теме */
  --on-band: #0e1013;    /* текст на жёлтой и зелёной ленте выгоды */

  /* тени и затемнение под окнами */
  --shadow-solid: #000; --shadow-rgb: 0,0,0;
  --dim: rgba(var(--shadow-rgb),0.45);

  /* акценты и состояния */
  --amber: #faa805; --amber-rgb: 250,168,5;
  --band-yellow: #fcdb05; --band-yellow-rgb: 252,219,5;
  --band-green: #39ed02; --band-red: #f70202;
  --on-accent-soft: #15181d;   /* второй оттенок текста на янтаре */
  --on-amber: #14171d;         /* текст на янтарной кнопке: «Войти», «Открыть», «Применить» */
  --ok-green: #1f7a37; --ok-green-soft: #bdf3ad;
  --alert-red: #e5352b; --alert-red-soft: #ffb3ab;
  --err-bg: #7a1f1f;           /* плашка ошибки: тёмно-красная в любой теме */
  --google-ink: #202124;       /* фирменный серый Google на его кнопке входа */

  /* Акцент как ТЕКСТ — отдельная роль от акцента как заливки. На тёмном фоне это один
     и тот же цвет, поэтому здесь они связаны. Но яркий жёлтый на белом нечитаем, так что
     в светлой теме текстовые темнеют, а заливки (кнопки, ленты) остаются прежними. */
  --amber-ink: var(--amber);
  --band-yellow-ink: var(--band-yellow);
  --green-ink: var(--band-green);
  --red-ink: var(--band-red);
  --ok-ink: var(--ok-green-soft);
  --alert-ink: var(--alert-red-soft);
  --warn-ink: #f2df8f;   /* текст на жёлтой плашке-подсказке: свой оттенок, не сама лента */

  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --topbar-h: 48px;
  /* color-scheme здесь намеренно НЕ объявлен. Он управляет системными полосами прокрутки
     и полями ввода; объявить «dark» — значит изменить их вид в тёмной теме, а она обязана
     остаться прежней. Захотим тёмные системные элементы — это отдельная осознанная правка. */
}

/* ── Светлая тема ───────────────────────────────────────────────────────────────────
   Включается атрибутом data-theme="light" на <html>; ставит его /theme-boot.js до
   отрисовки страницы, поэтому выбранная тема не моргает при загрузке. Без атрибута и
   без JS сайт остаётся тёмным — это по-прежнему вид по умолчанию.

   Переопределяются ТОЛЬКО полки, зависящие от темы. Намеренно не трогаются: подложки и
   подписи на фотографиях (снимок светлее не станет — подпись обязана остаться светлой),
   ленты выгоды, янтарные кнопки, тёмно-красная плашка ошибки и фирменный серый Google.
   ── */
:root[data-theme="light"] {
  color-scheme: light;

  /* фон и поверхности */
  --bg: #f2f4f8; --bg-rgb: 242,244,248;
  --surface: #fff; --surface-2: #e9edf3; --surface-3: #eef1f6;
  --surface-deep-rgb: 226,231,238;
  --panel: rgba(255,255,255,0.93);
  --panel-solid: #fff;
  --card-top: #e6ebf2;
  --panel-full: #fff;
  --veil-rgb: 255,255,255; --veil-2-rgb: 255,255,255;
  --table-head: #eef1f6;
  --scroll: #c7ced9;
  --soft: #e6eaf0;             /* выпадашка светлеет вместе с темой... */
  --on-soft: #111520; --soft-tint-rgb: 17,21,32;   /* ...а текст и пунктир на ней темнеют */

  /* текст */
  --ink: #111520; --ink-1: #1a1f2a; --ink-2: #252b37; --ink-3: #333a48;
  --muted: #5a6373; --faint: #5f6774;   /* было #7d8593 — 3.28:1, мелкий текст не читался */
  --soft-ink: #5f6774;
  --ink-strong: #05070c; --ink-strong-rgb: 5,7,12;

  /* линии темнеют вместе с фоном — весь набор хайрлайнов переворачивается отсюда */
  --tint-rgb: 16,22,34;

  /* Тени на светлом фоне не могут быть чёрными — вокруг панелей пойдут грязные ореолы.
     Смягчаем цвет, силу (прозрачность) правила задают сами. Затемнение под окнами при
     этом остаётся настоящим тёмным, иначе модальное окно потеряет глубину. */
  --shadow-solid: #5a6478; --shadow-rgb: 88,100,124;
  --dim: rgba(var(--scrim-rgb),0.38);

  /* акцент как текст — темнее, чтобы читался на белом */
  --amber-ink: #8f5d00;        /* было #9a6400 — 4.42:1, чуть не дотягивало */
  --band-yellow-ink: #7d6200;
  --green-ink: #157f2a;
  --red-ink: #c11414;
  --ok-ink: #14682a;
  --alert-ink: #a5261d;
  --warn-ink: #7d6200;
}

/* Первый экран — фотография во весь рост, шапка и кнопки лежат прямо на ней. В тёмной теме
   снимок лишь слегка притемнён; в светлой он уходит под молочную вуаль, иначе тёмный текст
   на тёмном снимке пропадёт. Фотография при этом остаётся видна — она просто отступает на
   задний план, как и положено фону. */
:root[data-theme="light"] .hero::after {
  background: linear-gradient(to bottom,
    rgba(var(--bg-rgb),0.88) 0%, rgba(var(--bg-rgb),0.90) 74%, var(--bg) 100%);
}

/* Текст, лежащий НА фотографии: подпись карточки в выдаче и цена на снимке в окне.
   Фотография от смены темы светлее не стала, значит и текст на ней обязан остаться светлым.
   Здесь текстовым полкам возвращаются тёмнотемные значения. Появится ещё один блок поверх
   снимка — дописать его селектор сюда, а не красить цвета руками в правиле.

   Цена на снимке и цена в правой панели окна — ОДИН класс .lm-price. Разводит их именно эта
   обёртка: цвет приходит из неё, поэтому на фото янтарь яркий, а в панели остаётся тёмным.

   Тени тоже возвращаются чёрными: читаемость цены на снимке держится не на подложке, а на
   свечении позади цифр. Мягкая серая тень светлой темы (она нужна, чтобы вокруг панелей не
   было грязных ореолов) это свечение стирает, и цифры пропадают на светлом капоте. */
:root[data-theme="light"] .card__cap,
:root[data-theme="light"] .lm-photo-price,
:root[data-theme="light"] .social {
  --ink: #eef2fb; --ink-1: #e8ebf1; --ink-2: #d7dbe3; --ink-3: #c7ccd6;
  --muted: #9aa2b1; --faint: #6b7280;
  --ink-strong: #fff; --ink-strong-rgb: 255,255,255;
  --tint-rgb: 255,255,255;
  --shadow-solid: #000; --shadow-rgb: 0,0,0;
  --soft-ink: #636362;
  --amber-ink: var(--amber);
  --band-yellow-ink: var(--band-yellow);
  --green-ink: var(--band-green);
  --red-ink: var(--band-red);
  --ok-ink: var(--ok-green-soft);
  --alert-ink: var(--alert-red-soft);
  --warn-ink: #f2df8f;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); }

.hero { position: relative; height: 100vh; overflow: hidden; background: var(--bg); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 74%, var(--bg) 100%), var(--dim); }

.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 85; height: var(--topbar-h); background: var(--bg);
  border-bottom: 1px solid rgba(var(--amber-rgb),0.65); box-shadow: 0 1px 10px rgba(var(--amber-rgb),0.22);
  display: flex; align-items: center; justify-content: flex-end; padding: 0 clamp(12px,3vw,28px); }
@keyframes newPulse {
  0%   { box-shadow: 0 0 0 0 rgba(229, 53, 43, .6); }
  70%  { box-shadow: 0 0 0 7px rgba(229, 53, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 53, 43, 0); }
}
.btn-auth { background: var(--amber); color: var(--on-amber); border: 0; border-radius: 8px; padding: 7px 15px;
  font: 800 13px var(--font); cursor: pointer; }
.btn-auth:hover { filter: brightness(1.06); }
.btn-auth[hidden], .user-box[hidden] { display: none; }
.user-box { display: inline-flex; align-items: center; gap: 10px; margin-right: 10px; }
/* Имя — кнопка: открывает профиль со способами входа. Под именем — активный вход. */
.user-name { position: relative; background: transparent; border: 0; padding: 0; cursor: pointer; text-align: right;
  display: inline-flex; flex-direction: column; align-items: flex-end; max-width: 220px; line-height: 1.15; }
.user-name .un-name-row { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; max-width: 100%; }
.user-name .un-name { color: var(--band-yellow-ink); font: 800 13px var(--font); max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-name .un-sub { color: var(--soft-ink); font: 600 10.5px var(--font); max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-name:hover .un-name { text-decoration: underline; }
.user-notification-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--alert-red); box-shadow: 0 0 0 0 rgba(229, 53, 43, .65); animation: newPulse 1.8s ease-out infinite; }
.user-notification-dot[hidden] { display: none; }
.header-garage { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px;
  border: 1px solid transparent; border-radius: 8px; padding: 2px; background: transparent; cursor: pointer; }
.header-garage:hover { border-color: rgba(var(--amber-rgb),.45); background: rgba(var(--amber-rgb),.08); }
.header-garage:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.header-garage img { display: block; width: 30px; height: 30px; object-fit: contain; }
.header-garage-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; }
.user-name[hidden], .btn-logout[hidden] { display: none; }
.btn-logout { background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--muted);
  font: 700 12px var(--font); padding: 6px 11px; cursor: pointer; }
.btn-logout:hover { color: var(--ink); border-color: var(--muted); }

/* Переключатель темы: показывает то, ВО ЧТО переключит. В тёмной теме — солнце, в светлой
   — луна. Одна кнопка вместо пары, чтобы не отнимать место у языка на телефоне. */
/* Отступ справа: у .topbar нет общего gap, поэтому вплотную к языку кнопка читалась как
   часть переключателя RU/KZ. Слева её отделяет margin у .user-box (16px), справа берём
   чуть меньше — чтобы кнопка не «прилипла» к «Выйти». */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px;
  margin-right: 12px;
  padding: 0; background: transparent; border: 1px solid transparent; border-radius: 7px; cursor: pointer; color: var(--ink-2); }
.theme-toggle:hover { color: var(--band-yellow-ink); border-color: rgba(var(--amber-rgb),.45); }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.theme-toggle .th-moon { display: none; }
:root[data-theme="light"] .theme-toggle .th-moon { display: block; }
:root[data-theme="light"] .theme-toggle .th-sun { display: none; }

.lang { display: inline-flex; gap: 4px; }
.lang button { font: 700 13px/1 var(--font); color: var(--ink-2); background: transparent; border: 1px solid transparent; padding: 8px 9px 4px; border-radius: 7px; cursor: pointer; }
.lang button.is-active { color: var(--on-accent); background: var(--amber); }

.counter { position: absolute; z-index: 11; top: calc(var(--topbar-h) + 10px); right: clamp(12px,3vw,28px); text-align: right; line-height: 1.05; }

/* Соцсети — зеркало счётчика в левом углу: те же отступы от шапки и от края, чтобы первый
   экран остался уравновешенным. Значки лежат НА фотографии, поэтому цвет берут из «поверх
   медиа» и светлеют вместе с ней, а не с темой. */
.social { position: absolute; z-index: 11; top: calc(var(--topbar-h) + 10px); left: clamp(12px,3vw,28px);
  display: inline-flex; align-items: center; gap: 25px; }
/* Значки фирменные, со своим кругом внутри картинки. Своей подложки не даём — круг в круге
   читался бы как обводка. Янтарное кольцо рисуем тенью, а не рамкой: тень не входит в
   размер элемента, поэтому значки остаются ровно 34px и ряд не разъезжается.
   Вторая тень, тёмная и мягкая, нужна чтобы чёрный кружок ТикТока не пропадал на тёмном
   участке фотографии. */
.social a { display: block; width: 34px; height: 34px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--amber), 0 2px 8px rgba(var(--scrim-rgb),0.5);
  transition: transform .16s ease, box-shadow .16s ease; }
.social a:hover { transform: translateY(-2px) scale(1.06);
  box-shadow: 0 0 0 2px var(--amber), 0 0 14px 3px rgba(var(--amber-rgb),0.45),
              0 6px 14px rgba(var(--scrim-rgb),0.55); }
.social a img { display: block; width: 34px; height: 34px; }
.counter__num { font-weight: 800; font-size: 26px; color: var(--amber-ink); letter-spacing: .01em; }
.counter__label { font-size: 12px; color: var(--ink); white-space: nowrap; margin-top: 2px; }

.about-service-link { position: absolute; z-index: 18; right: clamp(12px, 2.2vw, 28px); bottom: 42px;
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 7px 12px;
  border: 1px solid rgba(var(--amber-rgb),.48); border-radius: 8px; background: rgba(var(--surface-deep-rgb),.82);
  color: var(--ink); font: 700 12px/1 var(--font); text-decoration: none; backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb),.34); transition: border-color .16s, color .16s, transform .16s; }
.about-service-link:hover { color: var(--band-yellow-ink); border-color: var(--amber); transform: translateY(-1px); }
.about-service-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }

/* Нижние ссылки главного экрана: лента слева, «О сервисе» справа. */
.hero-bottom-links { display: contents; }

/* Сайт одностраничный: второй экран (склад) убран, hero занимает ровно 100vh. */
html, body { height: 100%; overflow: hidden; }

/* Desktop is a 1920px canvas. desktop-scale.js shrinks the whole canvas
   proportionally from 1920px down to 1440px, then keeps the 75% scale so the
   browser provides horizontal scrolling. Touch devices never receive this class. */
html.desktop-scale-active { overflow: hidden; }
html.desktop-scale-active.desktop-scroll-x { overflow-x: auto; }
html.desktop-scale-active.desktop-scroll-y { overflow-y: auto; }
html.desktop-scale-active body {
  width: 1920px;
  min-width: 1920px;
  height: 960px;
  min-height: 960px;
  overflow: visible;
  zoom: var(--desktop-scale);
}
html.desktop-scale-active .hero,
html.desktop-scale-active .topbar,
html.desktop-scale-active .deck {
  width: 1920px;
  min-width: 1920px;
}
html.desktop-scale-active .hero,
html.desktop-scale-active .deck {
  height: 960px;
  min-height: 960px;
}
html.desktop-scale-active .topbar,
html.desktop-scale-active .deck { right: auto; }
html.desktop-scale-active .deck { bottom: auto; }
/* Original width on a 1920px screen: no responsive narrowing of the search or cards. */
html.desktop-scale-active .search-wrap { width: 1480px; }

/* Кнопка «Найти авто» — только на телефоне: сворачивает весь блок поиска.
   Полная мобильная вёрстка — в конце стилей (после базовых правил), иначе media-запрос
   проигрывает по порядку источника. */
.msearch { display: none; }

/* Логотип над поиском. Плашка «S» — как на фавиконе: ЧЁРНЫЙ фон, янтарная буква.
   Размеры увеличены на 30% относительно первой версии. */
.logo { position: absolute; z-index: 10; left: 50%; top: calc(var(--topbar-h) + 34px); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 16px; text-decoration: none; user-select: none; white-space: nowrap; }
.logo-mark { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px;
  overflow: hidden; background: var(--on-accent); color: var(--amber-ink); font: 900 39px/1 var(--font);
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb),0.55), 0 0 0 2px rgba(var(--amber-rgb),0.3); }
.logo-mark img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.20); }
.logo-mark > picture { display: block; width: 100%; height: 100%; }
/* Лёгкая пульсация свечения — ТОЛЬКО у плашки «A» (текст «Autorama» не трогаем).
   Скоуп по .logo, чтобы такая же плашка в окне входа не мигала. */
.logo .logo-mark { animation: logoGlow 3.4s ease-in-out infinite; }
@keyframes logoGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(var(--amber-rgb),0.25)); }
  50%      { filter: drop-shadow(0 0 14px rgba(var(--amber-rgb),0.65)) drop-shadow(0 0 26px rgba(var(--amber-rgb),0.3)); }
}
.logo-1 { color: var(--amber-ink); font: 900 44px/1 var(--font); letter-spacing: .01em; }
.logo-2 { color: var(--on-accent); background: var(--amber); font: 900 44px/1 var(--font); letter-spacing: .01em;
  padding: 7px 16px 9px; border-radius: 13px; margin-left: -8px; box-shadow: 0 8px 24px rgba(var(--amber-rgb),0.3); }
.home-title { position: absolute; z-index: 10; left: 50%; top: calc(var(--topbar-h) + 96px);
  transform: translateX(-50%); margin: 0; color: var(--ink); font: 700 14px/1.2 var(--font);
  letter-spacing: .035em; text-align: center; text-shadow: 0 2px 10px rgba(var(--shadow-rgb),0.75); white-space: nowrap; }

.vehicle-search-mode { position: absolute; z-index: 11; top: calc(var(--topbar-h) + 90px);
  left: max(1.5vw, calc(50% - 740px)); display: flex; align-items: center; gap: 22px; }
.vehicle-search-mode__button { padding: 3px 0 5px; border: 0; border-bottom: 1px solid transparent;
  color: var(--ink-2); background: transparent; font: 700 14px/1 var(--font); cursor: pointer;
  transition: color .16s ease, border-color .16s ease; }
.vehicle-search-mode__button:hover { color: var(--ink); }
.vehicle-search-mode__button.is-active { color: var(--amber-ink); border-bottom-color: currentColor; }

.search-wrap { position: absolute; z-index: 9; left: 50%; top: calc(var(--topbar-h) + 118px); transform: translateX(-50%);
  width: min(1480px,97vw); display: flex; flex-direction: column; gap: 14px; }
.search-bar { position: relative; z-index: 3; width: 100%; display: flex; align-items: stretch; background: var(--panel); border: 2px solid var(--amber);
  border-radius: 14px; box-shadow: 0 20px 60px rgba(var(--shadow-rgb),0.55); backdrop-filter: blur(6px); line-height: 1.3; }

/* Витрина карточек: живёт на верхнем фоне; обложки — в скролл-контейнере, пагинация ПОД ними. */
.cards-wrap { position: absolute; left: 0; right: 0; z-index: 0; overflow: hidden; display: flex; flex-direction: column; }
.cards-scroll { position: relative; flex: 0 0 auto; overflow: hidden; }   /* высота = ровно 3 ряда (ставит JS) */
.cards-wrap.scroll .cards-scroll { overflow-y: auto; overflow-x: hidden; }
/* Карточки продолжают прокручиваться, но без видимой полосы справа. */
.cards-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.cards-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Мозаика: квадратные обложки вплотную, без зазоров. */
.cards-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; align-content: start; perspective: 1200px; }
.card { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--card-top) 0%, var(--surface) 100%); transform-style: preserve-3d; backface-visibility: hidden; cursor: pointer; }
.card__cover { aspect-ratio: 1 / 1; position: relative; display: flex; align-items: center; justify-content: center; }
.card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__cover .ph { color: rgba(var(--ink-strong-rgb),0.14); }
.card__cover .ph svg { width: 40px; height: 40px; }
.card__new, .lm-new-vehicle { display: inline-flex; align-items: center; justify-content: center;
  color: var(--amber-ink); background: rgba(var(--scrim-rgb),0.76); border: 1px solid var(--amber);
  border-radius: 999px; padding: 4px 8px; font: 800 11px/1 var(--font); letter-spacing: .01em; }
.card__new { position: absolute; top: 7px; left: 7px; z-index: 4; pointer-events: none;
  backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(var(--shadow-rgb),.28); }
.lm-new-vehicle { flex: 0 0 auto; padding: 8px 16px; border-width: 2px; font-size: 22px; }
/* Цена/название — оверлеем на обложке (плашка снизу), чтобы фото клеились без пустот. */
.card__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 8px 6px;
  background: linear-gradient(to top, rgba(var(--scrim-rgb),0.88), rgba(var(--scrim-rgb),0.5) 55%, transparent); }
.card__price { display: block; font-weight: 800; font-size: 16px; line-height: 1.15; color: var(--amber-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* Чёрная окантовка — цена читается на любом фоне обложки. */
  -webkit-text-stroke: 0.6px var(--shadow-solid); paint-order: stroke fill; text-shadow: 0 1px 2px rgba(var(--shadow-rgb),0.8); }
.card__sub { display: block; font-size: 10.5px; line-height: 1.2; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.card__city { display: block; font-size: 10.5px; line-height: 1.2; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card:hover { z-index: 1; box-shadow: inset 0 0 0 2px var(--amber); }
/* Увеличенная карточка — отдельный нативный слой, а не transform исходной. Поэтому текст
   остаётся резким и прежнего кегля, а фото перерисовывается браузером в нужном разрешении. */
.card--preview { position: absolute; z-index: 12; overflow: hidden; cursor: pointer; box-shadow: 0 14px 36px rgba(var(--shadow-rgb),.62), inset 0 0 0 2px var(--amber); }
.card--preview .card__band { border-width: 104px 104px 0 0; }
.card--preview .card__band-txt { top: 24px; left: 0; width: 70px; font-size: 22px; line-height: 22px; }
/* Звезда «в избранное» на обложке списка (правый верхний угол, небольшая) */
.card__fav { position: absolute; top: 6px; right: 6px; z-index: 3; width: 30px; height: 30px; border: 0; padding: 0; border-radius: 50%; background: rgba(var(--scrim-rgb),0.45); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s, background .2s, box-shadow .2s; }
.card:hover .card__fav, .card__fav.on { opacity: 1; }
.card__fav svg { width: 20px; height: 20px; fill: transparent; stroke: var(--band-yellow); stroke-width: 2; stroke-linejoin: round; }
/* Включена — жёлтая (цвет углового бейджа), чёрная окантовка-круг + живой эффект:
   хлопок → постоянное вращение вокруг вертикальной оси, пульсирующее свечение и искры. */
.card__fav.on { background: var(--scrim); box-shadow: 0 0 0 2px var(--shadow-solid), 0 0 18px 5px rgba(var(--band-yellow-rgb),0.85); }
.card__fav.on, .lm-star.on, .lst-fav.on { perspective: 320px; }
.card__fav.on svg, .lm-star.on svg, .lst-fav.on svg {
  fill: var(--band-yellow); stroke: var(--band-yellow);
  animation: favPop .45s cubic-bezier(.2,1.6,.4,1),
             favSpin 2.2s linear .45s infinite,
             favGlow 1.3s ease-in-out infinite;
}
@keyframes favPop {
  0%   { transform: scale(.6) rotate(-20deg); }
  45%  { transform: scale(1.6) rotate(8deg); }
  75%  { transform: scale(.92) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes favSpin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@keyframes favGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(var(--band-yellow-rgb),.9)); }
  50%      { filter: drop-shadow(0 0 12px rgba(var(--band-yellow-rgb),1)) drop-shadow(0 0 24px rgba(var(--band-yellow-rgb),.75)); }
}
/* Искры: точки, непрерывно разлетающиеся от звезды по кругу (угол/дальность задаёт JS). */
.fav-spark { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
  border-radius: 50%; background: var(--band-yellow); box-shadow: 0 0 6px 1px rgba(var(--band-yellow-rgb),0.95);
  pointer-events: none; opacity: 0; animation: sparkFly 1.25s linear infinite; }
@keyframes sparkFly {
  0%   { transform: rotate(var(--a)) translateX(4px) scale(1);            opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: rotate(var(--a)) translateX(var(--d, 22px)) scale(.2); opacity: 0; }
}
/* Архивная карточка в выдаче: тот же язык, что у удалённых в избранном (.lst-gone) —
   погашенное фото и косой красный штамп. */
.card.gone img { opacity: .55; filter: grayscale(.45); }
.card__gone { position: absolute; z-index: 3; top: 40%; left: 50%; transform: translate(-50%,-50%) rotate(-7deg);
  padding: 3px 12px; background: rgba(220,20,20,0.5); color: var(--ink-strong); font: 800 13px var(--font); letter-spacing: 1px;
  border: 2px solid rgba(var(--on-media-rgb),0.85); border-radius: 6px; text-transform: uppercase; pointer-events: none; white-space: nowrap; }
/* Угловой бейдж выгоды (треугольник в левом верхнем углу) */
.card__band { position: absolute; top: 0; left: 0; z-index: 2; width: 0; height: 0; border-style: solid; border-width: 52px 52px 0 0; border-color: #2fa84f transparent transparent transparent; pointer-events: none; }
.card__band-txt { position: absolute; top: 12px; left: 0; z-index: 3; width: 35px; font: 800 11px/11px var(--font); text-align: center; color: var(--on-band); pointer-events: none; }
/* Прокрутка результатов поиска — ТОЛЬКО у внутренней ленты (.cards-scroll). Раньше
   overflow включался и здесь, и у ленты: два вложенных скролла рисовали две полосы
   рядом. Внешнему блоку скроллить нечего — пагинация прибита к нижней линии экрана. */
.cards-wrap.scroll { overflow: hidden; }
.pager { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 44px; margin-top: 24px; }
.pager[hidden] { display: none; }
.pager-info { color: var(--ink); font: 700 14px var(--font); text-align: center; background: rgba(var(--bg-rgb),0.6); border: 1px solid rgba(var(--amber-rgb),0.5); border-radius: 20px; padding: 5px 16px; }
/* «Сохранить поиск» — овал цвета выпадашки (var(--soft)); при клике становится янтарным (как «Поиск»). */
.save-wrap { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
.save-search { display: inline-flex; align-items: center; color: var(--ink); font: 800 15px var(--font); cursor: pointer; background: var(--soft); border: 0; padding: 10px 20px; border-radius: 22px; box-shadow: 0 6px 18px rgba(var(--shadow-rgb),0.3); transition: background .18s, color .18s; }
.save-search:hover { filter: brightness(1.08); }
/* Пока поиск не сохранён, по контуру бежит янтарная полоска — зовём нажать. Рисуем
   вращающимся конусным градиентом под маской рамки: обычный border-image на скруглениях
   даёт заметный шов. Как только сохранили (.is-saved) — полоска гаснет, кнопка янтарная. */
.save-search { position: relative; isolation: isolate; }
/* Бегущий контур — общий SVG-бегунок (см. window.__edgeRun). Прежний вращающийся конус
   давал разный бег на разных кнопках: оборот за одно время, но угол ≠ доля периметра,
   поэтому на широкой кнопке искра неслась и хвост растягивался, на маленьком чипе ползла.
   Теперь штрих идёт ПО ПЕРИМЕТРУ: период у всех общий (3.6с), длина хвоста — доля
   периметра, фаза привязана к общим часам. В любую секунду искра у всех кнопок в одном
   и том же месте своего контура — визуально бег одинаковый. */
.edge-run { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px);
  pointer-events: none; overflow: visible; }
.edge-run rect { fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(var(--amber-rgb),.55));
  stroke-dasharray: var(--edge-d) var(--edge-g);
  animation: edgeDash 3.6s linear infinite; }
@keyframes edgeDash { to { stroke-dashoffset: calc(-1 * var(--edge-p)); } }
@media (prefers-reduced-motion: reduce) {
  .edge-run rect { animation: none; stroke-dasharray: none; opacity: .35; }
}
/* Прячем ПРОЗРАЧНОСТЬЮ, не display: скрытая анимация перезапускалась бы при показе и
   фаза уезжала от общих часов. Невидимый бегунок продолжает бежать — фаза всегда общая. */
.save-search.is-saved .edge-run { opacity: 0; }   /* сохранено — звать больше некуда */
.save-search.is-saved { background: var(--amber); color: var(--on-amber); box-shadow: 0 6px 18px rgba(var(--amber-rgb),0.3); }
/* Алерт «Поиск сохранён» — зелёный чип слева от кнопки, выезжает и гаснет. */
/* Вопросик у «Сохранить поиск»: объясняет, зачем вообще сохранять. Подсказка — наш общий
   пузырь (.hint-bubble), отдельного тултипа не заводим. */
.save-help { flex: 0 0 auto; width: 22px; height: 22px; margin-left: 8px; border-radius: 50%;
  border: 1px solid rgba(var(--amber-rgb),.55); background: transparent; color: var(--amber-ink);
  font: 700 13px/1 var(--font); cursor: help; display: inline-flex; align-items: center;
  justify-content: center; transition: background .18s, color .18s; }
.save-help:hover { background: var(--amber); color: var(--on-amber); }
.save-toast { display: inline-flex; align-items: center; gap: 7px; background: rgba(57,237,2,0.14); border: 1px solid rgba(57,237,2,0.55); color: var(--ok-ink); font: 700 13px var(--font); padding: 7px 14px; border-radius: 18px; white-space: nowrap; opacity: 0; transform: translateX(10px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.save-toast.show { opacity: 1; transform: translateX(0); }
.save-toast[hidden] { display: none; }
.save-toast .ic { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--band-green); color: var(--on-accent); font-size: 11px; font-weight: 800; }
.save-toast--rm { background: rgba(247,2,2,0.14); border-color: rgba(247,2,2,0.55); color: var(--alert-ink); }
.save-toast--rm .ic { background: var(--band-red); color: var(--ink-strong); }

/* Плавающий зелёный тост у верхней панели (напр. «избранное — в платном тарифе»). */
.nav-toast { position: fixed; top: 54px; left: 50%; transform: translate(-50%, -8px); z-index: 95;
  background: var(--ok-green); color: var(--ink-strong); font: 700 13px var(--font); padding: 9px 16px; border-radius: 20px;
  box-shadow: 0 12px 34px rgba(var(--shadow-rgb),.5); opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.nav-toast.show { opacity: 1; transform: translate(-50%, 0); }
.nav-toast[hidden] { display: none; }

/* Окно входа (заглушка) */
.auth-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(var(--scrim-rgb),0.75); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .18s ease; }
.auth-overlay[hidden] { display: none; }
.auth-overlay.show { opacity: 1; }
.auth-panel { position: relative; width: min(420px, 92vw); background: var(--panel); border: 2px solid var(--amber);
  border-radius: 16px; box-shadow: 0 30px 80px rgba(var(--shadow-rgb),0.7); backdrop-filter: blur(10px); padding: 26px 24px 22px;
  transform: scale(.96); transition: transform .18s ease; }
.auth-overlay.show .auth-panel { transform: scale(1); }
.auth-close { position: absolute; top: 10px; right: 14px; background: transparent; border: 0; color: var(--muted); font-size: 19px; cursor: pointer; line-height: 1; }
.auth-close:hover { color: var(--ink); }
.auth-head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.auth-head .logo-mark { width: 40px; height: 40px; border-radius: 10px; font-size: 26px; }
.auth-title { font: 800 19px var(--font); color: var(--ink); }
.auth-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.auth-note { margin-top: 13px; text-align: center; font-size: 12.5px; color: var(--band-yellow-ink);
  background: rgba(var(--band-yellow-rgb),0.1); border: 1px solid rgba(var(--band-yellow-rgb),0.35); border-radius: 9px; padding: 9px 10px; }
.auth-note[hidden] { display: none; }
.auth-tg-box { display: flex; justify-content: center; min-height: 44px; align-items: center; }
.telegram-auth-frame { display: block; max-width: 100%; border: 0; background: transparent; }
.auth-google-box { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-top: 10px; min-height: 44px; }
.auth-google-box[hidden] { display: none; }
.google-oauth-btn { min-width: 240px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 7px 18px; border: 1px solid rgba(var(--tint-rgb),.22); border-radius: 21px;
  background: var(--on-color); color: var(--google-ink); font: 700 14px var(--font); cursor: pointer; }
.google-oauth-btn:hover { background: #f3f5f7; border-color: rgba(var(--tint-rgb),.4); }
.google-oauth-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.google-oauth-btn .acct-provider-icon, .google-oauth-btn .acct-provider-icon svg { width: 22px; height: 22px; }
/* «Войти в другой аккаунт» — неяркая ссылка под кнопкой провайдера. */
.auth-alt { background: transparent; border: 0; color: var(--muted); font: 600 12px var(--font);
  cursor: pointer; padding: 2px 4px; }
.auth-alt:hover { color: var(--band-yellow-ink); text-decoration: underline; }

/* Тарифы: компактное окно выбора, пока платёжные кнопки работают как честные заглушки. */
.tariff-overlay { position: fixed; inset: 0; z-index: 91; background: rgba(var(--scrim-rgb),.78); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .18s ease; }
.tariff-overlay[hidden] { display: none; }
.tariff-overlay.show { opacity: 1; }
.tariff-panel { position: relative; width: min(820px, 94vw); max-height: min(720px, 90vh); overflow: auto;
  background: var(--panel); border: 2px solid var(--amber); border-radius: 16px; padding: 24px;
  box-shadow: 0 30px 80px rgba(var(--shadow-rgb),.72); transform: scale(.97); transition: transform .18s ease; }
.tariff-overlay.show .tariff-panel { transform: scale(1); }
.tariff-close { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; color: var(--muted);
  font-size: 18px; line-height: 1; cursor: pointer; }
.tariff-close:hover { color: var(--ink); }
.tariff-title { color: var(--ink); font: 800 20px var(--font); }
.tariff-sub { margin-top: 4px; color: var(--muted); font: 600 12.5px/1.4 var(--font); }
.tariff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.tariff-card { display: flex; min-width: 0; flex-direction: column; padding: 16px; border: 1px solid rgba(var(--tint-rgb),.14);
  border-radius: 8px; background: rgba(var(--tint-rgb),.025); }
.tariff-card.is-current { border-color: var(--band-green); box-shadow: inset 0 0 0 1px rgba(57,237,2,.18); }
.tariff-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tariff-card-name { color: var(--ink); font: 800 16px var(--font); white-space: nowrap; }
.tariff-current { color: var(--green-ink); font: 800 10px var(--font); text-transform: uppercase; }
.tariff-price { margin-top: 9px; color: var(--band-yellow-ink); font: 800 18px var(--font); }
.tariff-price small { color: var(--muted); font: 600 10px var(--font); }
.tariff-features { min-height: 100px; margin: 14px 0 16px; padding: 0; list-style: none; display: grid;
  align-content: start; gap: 8px; }
.tariff-features li { display: flex; align-items: flex-start; gap: 7px; color: var(--ink); font: 600 11.5px/1.35 var(--font); }
.tariff-features li::before { content: "✓"; flex: 0 0 auto; color: var(--green-ink); font-weight: 800; }
.tariff-select { width: 100%; min-height: 36px; margin-top: auto; border: 0; border-radius: 8px; padding: 8px 10px;
  background: var(--amber); color: var(--on-accent-soft); font: 800 12px var(--font); cursor: pointer; }
.tariff-select:hover { filter: brightness(1.06); }
.tariff-select.is-current { background: rgba(57,237,2,.12); border: 1px solid rgba(57,237,2,.42); color: var(--ok-ink); cursor: default; }
.tariff-note { margin-top: 14px; padding: 9px 11px; border: 1px solid rgba(var(--band-yellow-rgb),.35); border-radius: 8px;
  background: rgba(var(--band-yellow-rgb),.09); color: var(--band-yellow-ink); text-align: center; font: 700 12px/1.4 var(--font); }
.tariff-note[hidden] { display: none; }
.pro-promo-overlay { position: fixed; inset: 0; z-index: 93; display: grid; place-items: center; padding: 16px;
  background: rgba(var(--scrim-rgb),.82); backdrop-filter: blur(4px); }
.pro-promo-overlay[hidden] { display: none; }
.pro-promo-dialog { position: relative; width: min(440px, 92vw); box-sizing: border-box; border: 2px solid var(--amber);
  border-radius: 16px; padding: 28px 24px 24px; background: var(--panel); color: var(--ink);
  box-shadow: 0 30px 80px rgba(var(--shadow-rgb),.72); text-align: center; }
.pro-promo-title { padding-right: 20px; color: var(--ink); font: 800 20px/1.35 var(--font); }
.pro-promo-answer { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 24px 0 16px; }
.pro-promo-question { color: var(--band-yellow-ink); font: 800 28px/1 var(--font); }
.pro-promo-answer input { width: 58px; height: 52px; box-sizing: border-box; border: 2px solid var(--amber); border-radius: 9px;
  background: var(--surface); color: var(--ink); text-align: center; font: 800 26px/1 var(--font); outline: none; }
.pro-promo-answer input:focus { box-shadow: 0 0 0 3px rgba(var(--amber-rgb),.2); }
.pro-promo-message { min-height: 20px; margin: 0 0 14px; color: var(--band-yellow-ink); font: 700 13px/1.45 var(--font); }
.pro-promo-message[hidden] { display: none; }
.pro-promo-message.is-success { color: var(--green-ink); }
.pro-promo-submit { min-width: 180px; min-height: 40px; border: 0; border-radius: 8px; padding: 9px 18px;
  background: var(--amber); color: var(--on-amber); font: 800 13px var(--font); cursor: pointer; }
.pro-promo-submit:hover { filter: brightness(1.06); }
.pro-promo-submit:disabled { opacity: .6; cursor: wait; }

/* Профиль: способы входа в этот аккаунт */
.acct-overlay { position: fixed; inset: 0; z-index: 92; background: rgba(var(--scrim-rgb),0.75); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; }
.acct-overlay[hidden] { display: none; }
/* Панель НЕ скроллится сама (overflow видим) — иначе крестик над рамкой обрезался бы. Скролл
   живёт на внутреннем .acct-scroll, крестик снаружи него. */
.acct-panel { position: relative; width: min(880px, 92vw); background: var(--panel); border: 2px solid var(--amber);
  border-radius: 16px; padding: 22px; box-shadow: 0 30px 80px rgba(var(--shadow-rgb),.7); max-height: 88vh; overflow: visible; }
.acct-scroll { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; align-content: start;
  max-height: calc(88vh - 44px); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.acct-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Крестик — такой же, как внутри карточки: без круглой плашки, в углу самой панели. */
.acct-close { position: absolute; top: 12px; right: 14px; z-index: 2; width: auto; height: auto;
  padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--muted);
  font: 300 25px/1 var(--font); cursor: pointer; }
.acct-close:hover { color: var(--amber-ink); }
/* ── Личный кабинет: секции ── */
.cab-sec { margin-top: 18px; }
.acct-title, .cab-sections, .cab-pays-sec, .cab-logins-sec, .acct-note, .acct-logout-all { grid-column: 1 / -1; }
.cab-h { color: var(--faint, var(--faint)); font: 800 11px var(--font); letter-spacing: .09em;
  text-transform: uppercase; margin-bottom: 9px; }
.cab-nav-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
.cab-nav-card--group-gap { margin-top: 26px; }
.cab-nav-card { position: relative; min-height: 58px; display: flex; flex-direction: row; align-items: center;
  justify-content: flex-start; gap: 12px; padding: 12px 14px; overflow: hidden; background: rgba(var(--tint-rgb),.03);
  border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.cab-nav-card:hover { border-color: rgba(var(--amber-rgb),.72); background: var(--amber-soft); transform: translateY(-1px); }
.cab-nav-card svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: var(--amber-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cab-nav-label { min-width: 0; color: var(--ink); font: 800 13px/1.2 var(--font); }
.cab-nav-count { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center;
  width: 22px; min-width: 22px; height: 22px; padding: 2px 0 0; border-radius: 50%; text-align: center; font-variant-numeric: tabular-nums;
  background: var(--band-yellow); color: var(--on-accent); font: 800 11px/1 var(--font); }
.cab-nav-count[hidden] { display: none; }
.cab-nav-new { position: absolute; top: 50%; right: 11px; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--alert-red);
  box-shadow: 0 0 0 0 rgba(229, 53, 43, .65); animation: newPulse 1.8s ease-out infinite; }
.cab-nav-count:not([hidden]) + .cab-nav-new { right: 37px; }
.cab-nav-new[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .cab-nav-new, .user-notification-dot { animation: none; } }
.cab-card { background: rgba(var(--tint-rgb),.03); border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px; }
.cab-tname { color: var(--amber-ink); font: 800 17px var(--font); }
.cab-tsub { color: var(--muted); font: 600 12.5px var(--font); margin-top: 3px; }
.cab-lims { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 11px; }
.cab-lim { color: var(--muted); font: 600 12px var(--font); }
.cab-lim b { display: block; color: var(--ink); font: 800 15px var(--font); }
.cab-upgrade { margin-top: 12px; width: 100%; background: var(--amber); color: var(--on-amber); border: 0;
  border-radius: 9px; padding: 10px 14px; font: 800 13.5px var(--font); cursor: pointer; }
.cab-upgrade:hover { filter: brightness(1.06); }
.cab-pay { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; margin-bottom: 8px; }
.cab-pay:last-child { margin-bottom: 0; }
.cab-pay .amt { color: var(--ink); font: 800 14px var(--font); }
.cab-pay .meta { color: var(--muted); font: 600 11.5px var(--font); margin-top: 2px; }
.cab-receipt { background: var(--amber); color: var(--on-amber); border-radius: 7px; padding: 7px 11px;
  font: 800 12px var(--font); text-decoration: none; white-space: nowrap; }
.cab-receipt:hover { filter: brightness(1.06); }
.cab-receipt.wait { background: transparent; border: 1px solid var(--line); color: var(--muted); cursor: default; }
.cab-empty { color: var(--muted); font: 600 12.5px var(--font); }
.cab-where { color: var(--faint, var(--faint)); font: 600 11.5px var(--font); margin-top: 10px; line-height: 1.4; }
/* ── Выбор города ── */
.city-overlay { position: fixed; inset: 0; z-index: 93; background: rgba(var(--scrim-rgb),0.78); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.city-overlay[hidden] { display: none; }
/* Рамка окна статична (overflow видим): скроллится ТОЛЬКО сетка городов. Ширина панели рассчитана
   на 5 колонок по самому длинному городу (Усть-Каменогорск) без переноса. */
.city-panel { width: min(1000px, 94vw); background: var(--panel);
  border: 1px solid var(--amber); border-radius: 14px; padding: 22px; box-shadow: 0 30px 80px rgba(var(--shadow-rgb),.7); text-align: left; }
.city-title { color: var(--ink); font: 800 18px/1.2 var(--font); }
.city-sub { color: var(--muted); font: 500 12.5px/1.4 var(--font); margin-top: 4px; }
.city-search { width: 100%; margin: 15px 0 4px; padding: 11px 13px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel-2, var(--surface-3)); color: var(--ink); font: 600 13px var(--font); box-sizing: border-box; }
.city-search:focus { outline: none; border-color: var(--amber); }
.city-hint { color: var(--amber-ink); font: 700 13px var(--font); margin: 4px 0 8px; }
/* Ровно 5 колонок равной ширины; высота под 4 ряда, дальше — вертикальный скролл (наш золотой). */
.city-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 8px; row-gap: 2px; margin: 10px 0 4px;
  grid-auto-rows: max-content; height: 178px; overflow-y: auto; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: rgba(var(--amber-rgb),0.5) transparent; }
.city-grid::-webkit-scrollbar { width: 9px; }
.city-grid::-webkit-scrollbar-track { background: transparent; }
.city-grid::-webkit-scrollbar-thumb { background: rgba(var(--amber-rgb),0.5); border-radius: 5px; }
.city-chip { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 10px 8px; font: 600 14px/1.2 var(--font); color: var(--ink); cursor: pointer; text-align: left; transition: .14s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.city-chip:hover { background: var(--amber-soft); border-bottom-color: var(--amber); color: var(--amber-ink); }
.city-chip.near { border-bottom-color: var(--amber); color: var(--amber-ink); }
.city-empty { grid-column: 1 / -1; color: var(--muted); font: 600 13px var(--font); padding: 12px; }
/* «Пропустить» — выделена, но приглушена: заметно отличается от серых плиток, не кричит как «Поиск». */
.city-skip { margin-top: 13px; padding: 4px 0; background: transparent; border: 0; color: var(--muted);
  font: 600 12.5px var(--font); cursor: pointer; transition: .14s; }
.city-skip:hover { color: var(--amber-ink); }
.cab-city-off { display: flex; align-items: center; gap: 8px; margin-top: 10px; cursor: pointer;
  font: 500 12.5px var(--font); color: var(--muted); }
.cab-city-off input { width: 15px; height: 15px; accent-color: var(--amber); cursor: pointer; flex: 0 0 auto; }
.cab-city-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; }
.cab-city-row .val { color: var(--ink); font: 700 14px var(--font); }
.cab-city-row .val.none { color: var(--muted); font-weight: 600; }
.cab-city-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.cab-city-change { background: var(--amber); color: var(--on-amber); border: 0; border-radius: 7px; padding: 7px 13px;
  font: 800 12px var(--font); cursor: pointer; }
.cab-city-change:hover { filter: brightness(1.06); }
.cab-city-remove { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 7px;
  padding: 7px 13px; font: 800 12px var(--font); cursor: pointer; }
.cab-city-remove:hover { color: #ff8a8a; border-color: #7a3030; }
.acct-title { color: var(--ink); font: 800 18px var(--font); }
.acct-sub { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.acct-list { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.acct-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px; }
.acct-provider { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; min-width: 0; }
.acct-provider-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; }
.acct-provider-icon svg { display: block; width: 28px; height: 28px; }
.acct-row .nm { color: var(--ink); font: 700 14px var(--font); }
.acct-on { color: var(--green-ink); font: 700 12.5px var(--font); white-space: nowrap; }
.acct-off { color: var(--muted); font: 600 11.5px var(--font); white-space: nowrap; }
.acct-link-area { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0 8px 4px; }
.acct-link-area[hidden] { display: none; }
.acct-link-btn { background: var(--amber); color: var(--on-amber); border: 0; border-radius: 8px; padding: 7px 13px;
  font: 800 12.5px var(--font); cursor: pointer; white-space: nowrap; }
.acct-link-btn:hover { background: #ffbe33; }
.acct-link-btn:disabled, .acct-logout-all:disabled { opacity: .58; cursor: wait; }
.acct-link-btn--confirm { margin-top: 10px; }

.price-band-text--green { color: var(--green-ink); }
.price-band-text--red { color: var(--red-ink); }
.price-band-text--yellow { color: var(--band-yellow-ink); }
.card__band--green { border-top-color: var(--band-green); }
.card__band--red { border-top-color: var(--band-red); }
.card__band--yellow { border-top-color: var(--band-yellow); }
.card__band--orange { border-top-color: #ff8500; }
.card__band-txt--green, .card__band-txt--yellow { color: var(--on-band); }
.card__band-txt--red { color: var(--ink-strong); }
.fav-spark--0 { --a: 0deg; --d: 18px; animation-delay: 0s; }
.fav-spark--1 { --a: 40deg; --d: 21px; animation-delay: .14s; }
.fav-spark--2 { --a: 80deg; --d: 24px; animation-delay: .28s; }
.fav-spark--3 { --a: 120deg; --d: 19px; animation-delay: .42s; }
.fav-spark--4 { --a: 160deg; --d: 23px; animation-delay: .56s; }
.fav-spark--5 { --a: 200deg; --d: 20px; animation-delay: .69s; }
.fav-spark--6 { --a: 240deg; --d: 25px; animation-delay: .83s; }
.fav-spark--7 { --a: 280deg; --d: 22px; animation-delay: .97s; }
.fav-spark--8 { --a: 320deg; --d: 18px; animation-delay: 1.11s; }
.acct-gbox { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.acct-note { margin-top: 14px; border-radius: 9px; padding: 10px 12px; font: 700 12.5px var(--font); }
.acct-note.ok { background: var(--ok-green); color: var(--ink-strong); }
.acct-note.err { background: var(--err-bg); color: var(--ink-strong); }
/* Вопрос об объединении — не ошибка, а предупреждение: действие необратимое. */
.acct-note.warn { background: rgba(var(--amber-rgb),0.10); border: 1px solid var(--amber); color: var(--ink); }
.acct-merge-h { color: var(--amber-ink); font: 800 13px var(--font); }
.acct-merge-rows { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.acct-merge-row { display: flex; gap: 10px; align-items: baseline; }
.acct-merge-row .k { flex: 0 0 auto; min-width: 132px; color: var(--muted); font: 600 12px var(--font); }
.acct-merge-row .v { color: var(--ink); font: 700 12.5px var(--font); }
.acct-merge-what { margin-top: 10px; color: var(--muted); font: 600 12px var(--font); line-height: 1.45; }
.acct-google-replace { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.acct-google-replace .label { color: var(--muted); font: 600 12px/1.4 var(--font); }
.acct-google-replace .email { color: var(--ink); font: 800 12.5px var(--font); overflow-wrap: anywhere; }
.acct-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.acct-cancel-btn { background: transparent; color: var(--muted); border: 1px solid rgba(var(--tint-rgb),.22);
  border-radius: 8px; padding: 7px 13px; font: 700 12.5px var(--font); cursor: pointer; }
.acct-cancel-btn:hover { color: var(--ink); border-color: var(--muted); }
.acct-logout-all { width: 100%; margin-top: 14px; background: transparent; border: 1px solid rgba(var(--tint-rgb),.18);
  border-radius: 8px; color: var(--muted); padding: 8px 12px; font: 700 12px var(--font); cursor: pointer; }
.acct-logout-all:hover { color: var(--ink-strong); border-color: #c94b4b; }
.acct-reauth-slot { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-top: 10px; }
.acct-note[hidden] { display: none; }
.auth-loading { color: var(--muted); font-size: 13px; }

/* Окно списков: избранное / сохранённые поиски */
.list-overlay { position: fixed; inset: 0; z-index: 78; background: rgba(var(--scrim-rgb),0.75); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .18s ease; }
.list-overlay[hidden] { display: none; }
.list-overlay.show { opacity: 1; }
.list-panel { position: relative; width: min(860px, 94vw); max-height: 82vh; display: flex; flex-direction: column;
  background: var(--panel); border: 2px solid var(--amber); border-radius: 16px; padding: 22px 24px;
  box-shadow: 0 30px 80px rgba(var(--shadow-rgb),0.7); backdrop-filter: blur(10px); }
.list-close { position: absolute; top: 10px; right: 14px; background: transparent; border: 0; color: var(--muted); font-size: 19px; cursor: pointer; }
.list-close:hover { color: var(--ink); }
.list-title { font: 800 19px var(--font); color: var(--ink); margin-bottom: 16px; }
/* Счётчик добавлено/доступно рядом с заголовком; красный — при переборе лимита. */
.lst-count { font: 700 13px var(--font); color: var(--muted); margin-left: 8px; }
.lst-count.over { color: #f7463c; }
/* «Требуют внимания»: сколько избранного сверх лимита ждёт решения (перебор/понижение тарифа). */
.lst-attn { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: rgba(247,70,60,0.16);
  color: #f7463c; font: 800 12px var(--font); white-space: nowrap; }
/* Баннер грейс-периода над списком. */
.lst-grace { background: rgba(247,70,60,0.10); border: 1px solid rgba(247,70,60,0.55); color: #ffb8b1;
  border-radius: 10px; padding: 10px 13px; margin-bottom: 14px; font: 700 12.5px var(--font); line-height: 1.4; }
.tariff-open-selection { margin-left: 8px; border: 1px solid var(--amber); border-radius: 7px; background: var(--amber); color: #111;
  padding: 5px 11px; font: 800 12px var(--font); cursor: pointer; }
.tariff-selection-overlay { position: fixed; inset: 0; z-index: 10050; background: rgba(var(--scrim-rgb),.78); display: grid;
  place-items: center; padding: 16px; }
.tariff-selection-dialog { --tariff-selection-ink: var(--amber); position: relative; width: min(620px, 100%); max-height: min(85vh, 820px); overflow-y: auto;
  background: #181a1d; color: #f5f6f8; border: 1px solid #5a4a25; border-radius: 16px; padding: 24px;
  box-shadow: 0 22px 80px #000a; font: 14px var(--font); scrollbar-width: thin;
  scrollbar-color: var(--amber) #25282d; }
.tariff-selection-dialog::-webkit-scrollbar { width: 9px; }
.tariff-selection-dialog::-webkit-scrollbar-track { border-radius: 999px; background: #25282d; }
.tariff-selection-dialog::-webkit-scrollbar-thumb { min-height: 44px; border: 2px solid #25282d;
  border-radius: 999px; background: var(--amber); }
.tariff-selection-dialog::-webkit-scrollbar-thumb:hover { background: var(--amber-ink); }
.tariff-selection-dialog h2 { margin: 0 30px 12px 0; font: 800 22px var(--font); }
.tariff-selection-dialog p { line-height: 1.5; color: #b8bcc4; }
.tariff-selection-dialog .tariff-selection-deadline { color: var(--tariff-selection-ink); font-weight: 700; }
.tariff-selection-dialog section { margin-top: 18px; }
.tariff-selection-dialog h3 { margin: 0 0 8px; color: var(--tariff-selection-ink); font: 800 15px var(--font); }
.tariff-selection-dialog label { display: flex; gap: 10px; align-items: center; padding: 8px 5px;
  border-bottom: 1px solid #33373d; cursor: pointer; }
.tariff-selection-dialog label span { overflow-wrap: anywhere; }
.tariff-selection-dialog input { width: 17px; height: 17px; accent-color: var(--amber); flex: none; }
.tariff-selection-close { position: absolute; top: 10px; right: 14px; border: 0; background: none; color: #b8bcc4;
  font-size: 28px; cursor: pointer; }
.tariff-selection-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.tariff-selection-actions button { border: 1px solid #484b51; border-radius: 9px; padding: 10px 16px;
  background: #25282d; color: #f5f6f8; font: 800 13px var(--font); cursor: pointer; }
.tariff-selection-actions .tariff-selection-save { background: var(--amber); color: #111; border-color: var(--amber); }
.tariff-selection-actions button:disabled { opacity: .5; cursor: wait; }
.tariff-selection-error { min-height: 1em; color: #ffb8b1 !important; }
/* Помеченное на удаление: приглушённый ФОН (#5) + ВНУТРЕННЯЯ рамка (#6 — outline рисовался
   снаружи и резался по краям панели; inset box-shadow остаётся внутри карточки). */
.lst-card.over-limit { box-shadow: inset 0 0 0 2px rgba(247,70,60,0.75); }
.lst-card.over-limit img { opacity: 0.25; filter: grayscale(0.55); }   /* #4 приглушить сильнее */
.lst-row.over-limit { opacity: 0.72; }
/* #7 Кнопка сверху (слева от ✕): не выбрана — ЯНТАРНАЯ, выбрана (.on) — зелёная. */
.lst-keep { position: absolute; z-index: 3; top: 6px; left: 6px; right: 36px; height: 24px; border: 0;
  border-radius: 7px; background: var(--amber); color: var(--on-amber); font: 800 10.5px var(--font);
  cursor: pointer; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lst-keep:hover { background: #ffb920; }
.lst-keep.on { background: #1f9d46; color: var(--ink-strong); }
.lst-keep.on:hover { background: #24b350; }
/* «будет удалено» — теперь красная плашка В подписи (ниже), не штамп сверху. */
.lst-cut { display: inline-block; background: var(--alert-red); color: var(--ink-strong); font: 800 9.5px var(--font);
  padding: 2px 7px; border-radius: 6px; margin-bottom: 5px; }
.lst-cut.inline { margin: 0 8px 0 0; vertical-align: middle; }
.list-body { overflow-y: auto; scrollbar-width: none; }
.list-body::-webkit-scrollbar { width: 0; display: none; }
.list-empty { color: var(--muted); font-size: 14px; padding: 22px 0; text-align: center; }
/* ── Личный гараж ── */
.list-panel.garage { position: absolute; top: calc(var(--topbar-h) + 20px); bottom: 20px; left: 50%; width: min(1521px, calc(100vw - 36px)); height: auto; max-height: none; box-sizing: border-box; padding: 29px 31px; transform: translateX(-50%); }
.list-panel.garage .list-close { top: 13px; right: 18px; }
.list-panel.garage .list-title { display: flex; align-items: center; justify-content: flex-start; gap: 20px; padding-right: 48px; font-size: 39px; margin-bottom: 21px; }
.list-panel.garage .lst-count { margin-left: 10px; font-size: 19px; }
.list-panel.garage .list-body { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.garage-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 0 0 17px; }
.garage-vehicle-tabs { display: flex; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; align-items: center; gap: 8px; overflow-x: hidden; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: var(--amber) var(--panel-2, var(--surface)); }
.garage-vehicle-tabs.is-overflowing { overflow-x: scroll; padding-bottom: 9px; scrollbar-gutter: stable; }
.garage-vehicle-tabs::-webkit-scrollbar { height: 8px; }
.garage-vehicle-tabs::-webkit-scrollbar-track { border-radius: 999px; background: var(--panel-2, var(--surface)); box-shadow: inset 0 0 0 1px rgba(var(--tint-rgb),.10); }
.garage-vehicle-tabs::-webkit-scrollbar-thumb { min-width: 44px; border: 2px solid var(--panel-2, var(--surface)); border-radius: 999px; background: var(--amber); }
.garage-vehicle-tabs::-webkit-scrollbar-thumb:hover { background: var(--amber-ink); }
.garage-vehicle-tab { min-height: 34px; padding: 7px 13px; font-size: 14.5px; scroll-snap-align: start; scroll-snap-stop: always; }
.list-panel.garage .garage-vehicle-tab.is-selected,
.list-panel.garage .garage-vehicle-tab.is-selected:hover { box-shadow: none; }
.garage-limit { color: var(--muted); font: 700 17.5px var(--font); }
.garage-add { flex: 0 0 auto; border: 0; border-radius: 10px; padding: 12px 18px; background: var(--amber); color: var(--on-amber); font: 800 18px var(--font); cursor: pointer; }
.list-panel.garage .list-title .garage-add { border-radius: 22px; font-size: 15px; }
.garage-add-wrap { position: relative; display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; }
.garage-upgrade-alert { position: absolute; z-index: 8; top: calc(100% + 6px); right: 0; width: max-content; max-width: none; border-radius: 10px; padding: 8px 12px; background: var(--ok-green); color: var(--ink-strong); font: 700 13px/1.35 var(--font); text-align: center; white-space: nowrap; pointer-events: none; box-shadow: 0 10px 28px rgba(var(--shadow-rgb),.42); }
.garage-upgrade-alert[hidden] { display: none; }
.garage-add:hover:not(:disabled) { filter: brightness(1.06); }
.garage-add:disabled { opacity: .46; cursor: default; }
.garage-form label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font: 700 16px var(--font); letter-spacing: .02em; }
.garage-form input { width: 100%; box-sizing: border-box; min-height: 40px; border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; background: var(--panel-2, var(--surface)); color: var(--ink); font: 600 19px var(--font); }
.garage-secondary, .garage-remove { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 9px; padding: 8px 14px; background: transparent; color: var(--muted); font: 800 17.5px var(--font); cursor: pointer; }
.garage-secondary:hover { border-color: var(--amber); color: var(--amber-ink); }
.garage-list { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; gap: 13px; }
.garage-car { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; padding: 17px 18px; background: rgba(var(--tint-rgb),.025); }
.garage-car-comment { margin: 0 0 7px; color: var(--muted); font: 700 15px/1.3 var(--font); overflow-wrap: anywhere; }
.garage-car-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.garage-car-head > div { flex: 1 1 auto; min-width: 0; }
.garage-car-main { display: flex; flex-direction: column; align-items: flex-start; }
.garage-car-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 7px; scrollbar-width: thin; scrollbar-color: var(--amber) var(--panel-2, var(--surface)); }
.garage-car-scroll::-webkit-scrollbar { width: 8px; }
.garage-car-scroll::-webkit-scrollbar-track { border-radius: 999px; background: var(--panel-2, var(--surface)); box-shadow: inset 0 0 0 1px rgba(var(--tint-rgb),.10); }
.garage-car-scroll::-webkit-scrollbar-thumb { min-height: 44px; border: 2px solid var(--panel-2, var(--surface)); border-radius: 999px; background: var(--amber); }
.garage-car-scroll::-webkit-scrollbar-thumb:hover { background: var(--amber-ink); }
.garage-car-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 11px; }
.garage-card-controls { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 10px; margin-left: 14px; }
.garage-plate-shell { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 2px; }
.garage-inline-plate { position: relative; flex: 0 0 168px; width: 168px; height: 36px; overflow: hidden; background: url("/media/garage/kz-plate-template.png?v=20260915-01") center/100% 100% no-repeat; cursor: text; transition: filter .16s ease; }
.garage-inline-plate[hidden] { display: none; }
.garage-inline-plate--kz_old { background-image: url("/media/garage/kz-old-plate-template.png?v=20260916-01"); }
.garage-inline-plate--ru { height: 36px; background-image: url("/media/garage/ru-plate-template.png?v=20260916-01"); }
.garage-inline-plate input { position: absolute; top: 4px; height: 28px; box-sizing: border-box; border: 0; border-radius: 1px; padding: 0; outline: 0; background: transparent; color: #050607; caret-color: #050607; font: 900 19px/28px "Arial Narrow", Arial, sans-serif; letter-spacing: .2px; text-align: center; text-transform: uppercase; }
.garage-inline-plate input::selection { background: rgba(255,174,0,.48); color: #050607; }
.garage-inline-plate input:focus { background: rgba(255,174,0,.09); box-shadow: inset 0 -2px 0 rgba(225,147,0,.78); }
.garage-inline-plate [data-garage-plate-digits] { left: 17%; width: 31%; }
.garage-inline-plate [data-garage-plate-letters] { left: 48%; width: 31%; }
.garage-inline-plate [data-garage-plate-region] { left: 81%; width: 17%; font-size: 17px; }
.garage-inline-plate--kz_old input { top: 2px; height: 32px; font: 700 29px/32px "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif; letter-spacing: -.6px; }
.garage-inline-plate--kz_old [data-garage-plate-prefix] { left: 4%; width: 18%; }
.garage-inline-plate--kz_old [data-garage-plate-digits] { left: 21%; width: 38%; }
.garage-inline-plate--kz_old [data-garage-plate-letters] { left: 59%; width: 37%; }
.garage-inline-plate--kz [data-garage-plate-digits],
.garage-inline-plate--kz [data-garage-plate-letters],
.garage-inline-plate--ru input { top: 4px; height: 29px; padding-top: 3px; font: 700 23px/26px "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif; letter-spacing: -.5px; }
.garage-inline-plate--ru [data-garage-plate-prefix] { left: 7%; width: 13%; }
.garage-inline-plate--kz [data-garage-plate-digits],
.garage-inline-plate--ru [data-garage-plate-digits] { top: 3px; font-size: 29px; letter-spacing: -1px; }
.garage-inline-plate--ru [data-garage-plate-digits] { left: 18%; width: 32%; }
.garage-inline-plate--ru [data-garage-plate-letters] { left: 47%; width: 22%; }
.garage-inline-plate--ru [data-garage-plate-region] { left: 76%; top: 0; width: 21%; height: 23px; padding-top: 2px; font-size: 19px; font-weight: 700; line-height: 21px; letter-spacing: -.7px; }
.garage-plate-switch { flex: 0 0 13px; width: 13px; height: 26px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.garage-plate-switch::after { display: block; width: 0; height: 0; margin: auto; border: 5px solid transparent; border-top-color: var(--amber-ink); transform: translateY(3px); content: ""; }
.garage-plate-switch:hover::after, .garage-plate-switch[aria-expanded="true"]::after { border-top-color: var(--ink); }
.garage-plate-menu { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; width: 188px; border: 1px solid var(--line); border-radius: 9px; padding: 5px; background: var(--panel-2, var(--surface)); box-shadow: 0 10px 24px rgba(var(--shadow-rgb),.36); }
.garage-plate-menu[hidden] { display: none; }
.garage-plate-menu button { display: flex; align-items: center; justify-content: center; width: 100%; border: 0; border-radius: 6px; padding: 5px; background: transparent; cursor: pointer; }
.garage-plate-menu button:hover, .garage-plate-menu button:focus-visible, .garage-plate-menu button[aria-pressed="true"] { background: rgba(var(--amber-rgb),.20); outline: 1px solid var(--amber); }
.garage-plate-menu img { display: block; width: 168px; height: 36px; object-fit: fill; pointer-events: none; }
.garage-plate-menu-preview { position: relative; display: block; flex: 0 0 168px; width: 168px; height: 36px; color: #050607; pointer-events: none; }
.garage-plate-menu-preview > span { position: absolute; display: flex; align-items: center; justify-content: center; height: 28px; top: 4px; font: 800 21px/1 "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif; letter-spacing: -.5px; }
.garage-plate-menu-preview [data-plate-sample-prefix]:empty, .garage-plate-menu-preview [data-plate-sample-region]:empty { display: none; }
.garage-plate-menu-preview--kz [data-plate-sample-digits] { left: 17%; width: 31%; }
.garage-plate-menu-preview--kz [data-plate-sample-letters] { left: 48%; width: 31%; }
.garage-plate-menu-preview--kz [data-plate-sample-region] { left: 81%; width: 17%; font-size: 16px; }
.garage-plate-menu-preview--kz_old [data-plate-sample-prefix] { left: 4%; width: 18%; }
.garage-plate-menu-preview--kz_old [data-plate-sample-digits] { left: 21%; width: 38%; }
.garage-plate-menu-preview--kz_old [data-plate-sample-letters] { left: 59%; width: 37%; }
.garage-plate-menu-preview--ru [data-plate-sample-prefix] { left: 7%; width: 13%; }
.garage-plate-menu-preview--ru [data-plate-sample-digits] { left: 18%; width: 32%; }
.garage-plate-menu-preview--ru [data-plate-sample-letters] { left: 47%; width: 22%; }
.garage-plate-menu-preview--ru [data-plate-sample-region] { left: 76%; top: 2px; width: 21%; height: 21px; font-size: 16px; letter-spacing: -.7px; }
.garage-inline-plate.is-invalid { filter: drop-shadow(0 0 3px rgba(239,68,68,.95)); }
.garage-inline-plate.is-saved { filter: drop-shadow(0 0 3px rgba(34,197,94,.85)); }
.garage-car-title { color: var(--ink); font: 800 21.5px var(--font); }
.garage-car-title-name { color: var(--amber-ink); }
.garage-car-title-year { color: var(--ink); }
.garage-car-edit { display: block; border: 0; padding: 0; background: transparent; text-align: left; cursor: pointer; }
.garage-car-edit:hover { color: var(--amber-ink); text-decoration: underline dotted; text-underline-offset: 4px; }
.garage-car-edit:hover .garage-car-title-name,
.garage-car-edit:hover .garage-car-title-year { color: var(--amber-ink); }
.garage-card-documents { display: grid; justify-items: start; gap: 5px; width: max-content; max-width: 100%; margin-top: 6px; }
.garage-journal-icon { display: inline-block; flex: 0 0 34px; width: 34px; height: 34px; background: url('/media/garage/garage-journal.png?v=20260918-01') center / 36px 36px no-repeat; }
.garage-journal-archive { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 8px 0; border: 1px solid rgba(var(--amber-rgb),.55); border-radius: 9px; padding: 10px 12px; background: rgba(var(--amber-rgb),.09); color: var(--muted); font: 600 14px/1.4 var(--font); }
.garage-journal-archive b { color: var(--ink); }
.garage-journal-archive button, .tariff-selection-item [data-journal-selection-download] { border: 1px solid var(--amber); border-radius: 7px; padding: 6px 10px; background: transparent; color: var(--amber-ink); font: 700 13px var(--font); cursor: pointer; }
.garage-journal-archive button:disabled, .tariff-selection-item [data-journal-selection-download]:disabled { opacity: .55; cursor: wait; }
.tariff-selection-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tariff-selection-item label { flex: 1 1 auto; min-width: 0; }
.tariff-selection-journal-offer { border: 1px solid var(--amber); border-radius: 8px; padding: 10px; color: var(--amber-ink); font: 600 14px/1.4 var(--font); }
.garage-journal-overlay, .garage-journal-warning { position: fixed; z-index: 80; inset: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 16px; background: rgba(var(--scrim-rgb),.78); }
.garage-journal-overlay { align-items: stretch; padding: calc(var(--topbar-h) + 20px) 18px 20px; }
.garage-journal-dialog { width: min(1014px, 100%); min-height: 0; max-height: none; overflow: auto; box-sizing: border-box; border: 1px solid rgba(var(--amber-rgb),.55); border-radius: 14px; padding: 20px; background: var(--panel-2, var(--surface)); color: var(--ink); box-shadow: 0 22px 60px rgba(var(--shadow-rgb),.4); scrollbar-width: thin; scrollbar-color: var(--amber) var(--panel); }
.garage-journal-dialog::-webkit-scrollbar { width: 9px; }
.garage-journal-dialog::-webkit-scrollbar-track { background: var(--panel); }
.garage-journal-dialog::-webkit-scrollbar-thumb { border: 2px solid var(--panel); border-radius: 9px; background: var(--amber); }
.garage-journal-dialog > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.garage-journal-dialog h2 { margin: 0 0 18px; color: var(--ink); font: 800 26px/1.2 var(--font); }
.garage-journal-dialog h3 { margin: 0; color: var(--amber-ink); font: 800 19px var(--font); }
.garage-journal-close { border: 0; background: transparent; color: var(--muted); font: 28px/1 var(--font); cursor: pointer; }
.garage-journal-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.garage-journal-add { border-radius: 22px; font-size: 15px; }
.garage-journal-add[hidden], .garage-journal-form-host[hidden], .garage-journal-created-preview[hidden] { display: none; }
.garage-journal-form { display: grid; gap: 14px; }
.garage-journal-form label { display: grid; gap: 5px; color: var(--muted); font: 700 14px var(--font); }
.garage-journal-date-row { display: grid; grid-template-columns: minmax(0,300px) minmax(0,1fr); align-items: end; gap: 16px; }
.garage-journal-created-preview { display: grid; gap: 5px; padding-bottom: 10px; color: var(--muted); font: 700 14px var(--font); }
.garage-journal-created-preview b { color: var(--ink); font: 700 15px var(--font); }
.garage-journal-form textarea, .garage-journal-form input, .garage-journal-date { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--panel); color: var(--ink); font: 600 15px var(--font); }
.garage-journal-form textarea { min-height: 120px; resize: vertical; line-height: 1.45; }
.garage-journal-form textarea::placeholder { color: var(--muted); }
.garage-journal-date { display: flex; justify-content: space-between; align-items: center; max-width: 300px; color: var(--amber-ink); text-align: left; cursor: pointer; }
.garage-journal-counter { justify-self: end; color: var(--faint); }
.garage-journal-edit-dates { margin: -8px 0 0; color: var(--muted); font: 600 13px/1.4 var(--font); }
.garage-journal-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.garage-journal-number-field { display: flex; }
.garage-journal-number-field input { min-width: 0; border-radius: 8px 0 0 8px; }
.garage-journal-number-field button { flex: 0 0 65px; border: 1px solid var(--line); border-left: 0; border-radius: 0 8px 8px 0; background: rgba(var(--amber-rgb),.12); color: var(--amber-ink); font: 800 15px var(--font); cursor: pointer; }
.garage-journal-upload-control { position: relative; display: inline-flex; align-items: center; align-self: start; min-height: 36px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; background: var(--panel); color: var(--ink); font: 700 14px var(--font); cursor: pointer; }
.garage-journal-upload-control:hover { border-color: var(--amber); color: var(--amber-ink); }
.garage-journal-upload-control input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer; }
.garage-journal-upload-control:focus-within { outline: 2px solid var(--amber); outline-offset: 2px; }
.garage-journal-photo-list, .garage-journal-record-photos { display: flex; flex-wrap: wrap; gap: 9px; }
.garage-journal-photo { position: relative; display: flex; align-items: flex-end; width: 94px; height: 115px; }
.garage-journal-photo img, .garage-journal-record-photos img { width: 94px; height: 94px; border: 1px solid var(--line); border-radius: 7px; object-fit: cover; }
.garage-photo-remove { position: absolute; z-index: 2; top: 0; right: 0; width: 21px; height: 21px; }
.garage-vehicle-photo-remove { top: -7px; }
.garage-vehicle-photos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 9px; min-height: 54px; margin: 8px 0 2px; }
.garage-vehicle-photos.is-saving { opacity: .62; pointer-events: none; }
.garage-vehicle-photo { position: relative; flex: 0 0 94px; width: 94px; height: 82px; padding-top: 12px; box-sizing: border-box; cursor: grab; touch-action: pan-y; user-select: none; }
.garage-vehicle-photo.is-dragging { z-index: 3; opacity: .66; cursor: grabbing; transform: scale(.97); }
.garage-vehicle-photo-open { display: block; width: 94px; height: 70px; border: 0; padding: 0; border-radius: 7px; overflow: hidden; background: var(--panel); cursor: pointer; }
.garage-vehicle-photo-open img { display: block; width: 100%; height: 100%; border: 1px solid var(--line); border-radius: 7px; box-sizing: border-box; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.garage-vehicle-photo-add { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 54px; box-sizing: border-box; color: var(--amber-ink); font: 800 16px var(--font); cursor: pointer; }
.garage-vehicle-photo-add.is-empty { padding: 5px 2px; }
.garage-vehicle-photo-add.is-compact { align-self: flex-end; justify-content: center; width: 50px; height: 70px; }
.garage-vehicle-photo-add:hover { color: var(--ink); }
.garage-vehicle-photo-add .garage-driver-license-add { flex: none; background: var(--amber); color: var(--on-amber); box-shadow: none; }
.garage-vehicle-photo-add:hover .garage-driver-license-add { filter: brightness(1.07); }
.garage-vehicle-photo-add input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.garage-vehicle-photo-add:focus-within { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 7px; }
.garage-photo-viewer { position: absolute; z-index: 120; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 14px; padding: 46px 18px 18px; box-sizing: border-box; background: var(--panel-solid); }
.garage-photo-viewer-dialog { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.garage-photo-viewer img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.garage-photo-viewer-close { z-index: 2; }
.garage-journal-form-actions, .garage-journal-export { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.garage-journal-export { margin-left: auto; }
.garage-journal-export button, .garage-journal-record-head button { border: 1px solid rgba(var(--amber-rgb),.6); border-radius: 7px; padding: 7px 10px; background: transparent; color: var(--amber-ink); font: 700 13px var(--font); cursor: pointer; }
.garage-journal-export button:disabled, .garage-journal-record-head button:disabled { opacity: .5; cursor: wait; }
.garage-journal-error, .garage-journal-error-global { min-height: 1em; margin: 0; color: var(--alert-ink); font: 600 13px var(--font); }
.garage-journal-record { border-top: 1px solid var(--line); padding: 15px 0; }
.garage-journal-record-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--amber-ink); font: 800 17px var(--font); }
.garage-journal-record-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.garage-journal-record-actions .garage-journal-delete { border-color: rgba(247,2,2,.55); color: var(--alert-ink); }
.garage-journal-record-meta, .garage-journal-record-values { display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 8px; color: var(--muted); font: 600 13px/1.4 var(--font); }
.garage-journal-record p { margin: 10px 0; color: var(--ink); font: 600 15px/1.5 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; }
.garage-journal-record-values { color: var(--amber-ink); }
.garage-journal-record-photos { margin-top: 3px; }
.garage-journal-empty { color: var(--muted); font: 600 15px var(--font); }
.garage-journal-warning { z-index: 110; }
.garage-journal-warning > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; width: min(450px, 100%); border: 1px solid var(--amber); border-radius: 11px; padding: 18px; background: var(--panel-2, var(--surface)); }
.garage-journal-warning p { width: 100%; margin: 0 0 6px; color: var(--ink); font: 700 17px/1.4 var(--font); }
.garage-journal-warning button { border: 1px solid var(--amber); border-radius: 7px; padding: 8px 10px; background: transparent; color: var(--amber-ink); font: 700 13px var(--font); cursor: pointer; }
.garage-journal-warning [data-choice="save"] { background: var(--amber); color: var(--on-amber); }
@media (max-width: 620px) { .garage-journal-overlay { padding: calc(var(--topbar-h) + 20px) 10px 20px; } .garage-journal-dialog { padding: 14px; } .garage-journal-dialog h2 { font-size: 21px; } .garage-journal-fields, .garage-journal-date-row { grid-template-columns: 1fr; } }
.garage-all-specs, .garage-fitments-toggle, .garage-lamps-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 48px; width: 48px; height: 38px; border: 0; border-radius: 0; padding: 0; background: transparent; color: var(--amber-ink); cursor: pointer; }
.garage-all-specs:disabled { opacity: .72; cursor: wait; }
.garage-car-sub { color: var(--muted); font: 600 17px/1.35 var(--font); margin-top: 4px; }
.garage-car-engine-volume { color: var(--amber-ink); font-weight: 800; }
.garage-car-sub-sep { color: var(--faint); }
.garage-car-information { display: grid; grid-template-columns: minmax(0, 700px) minmax(180px, 220px); align-items: start; justify-content: start; gap: 32px; }
.garage-car-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; margin-top: 10px; }
.garage-car-answers > div { display: grid; grid-template-columns: minmax(140px, 180px) minmax(0, 1fr); gap: 7px; min-width: 0; }
.garage-car-answers span { color: var(--muted); font: 600 14.5px/1.35 var(--font); }
.garage-car-answers b { overflow-wrap: anywhere; color: var(--ink); font: 700 15.5px/1.35 var(--font); }
.garage-primary { flex: 0 0 auto; color: var(--amber-ink); border: 1px solid rgba(var(--amber-rgb),.5); border-radius: 999px; padding: 4px 8px; font: 800 12px var(--font); }
.garage-tax-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin-top: 10px; box-sizing: border-box; border: 1px solid rgba(var(--amber-rgb),.58); border-radius: 10px; padding: 11px 14px; }
.garage-tax-block span { color: var(--ink); font: 600 15.5px var(--font); }
.garage-tax-block b { width: 100%; color: var(--amber-ink); font: 700 18px var(--font); text-align: center; white-space: nowrap; }
.garage-facts { display: block; margin-top: 16px; }
.garage-reference-content { margin-top: 18px; border-top: 1px solid rgba(var(--amber-rgb),.48); padding-top: 16px; }
.garage-reference-content[hidden] { display: none; }
.garage-reference-content .garage-facts { margin-top: 0; }
.garage-reference-content > .garage-specs-slot .garage-specs { margin-top: 0; border-top: 0; padding-top: 0; }
.garage-facts > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.garage-facts span, .garage-docs { color: var(--muted); font: 600 15.5px var(--font); }
.garage-facts b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font: 700 18px var(--font); }
.garage-facts b.garage-tax { color: var(--amber-ink); }
.garage-facts em { color: var(--faint); font: 600 15.5px var(--font); font-style: normal; }
.garage-reference-panels { min-width: 0; }
.garage-fitments-panel[hidden], .garage-lamps-slot[hidden] { display: none; }
.garage-feature-trigger { position: relative; }
.garage-feature-icon { display: inline-block; flex: 0 0 48px; width: 48px; height: 38px; background: var(--amber); transition: background-color .16s ease;
  -webkit-mask-image: url('/media/garage/garage-sections-v3.png?v=20260914-01'); mask-image: url('/media/garage/garage-sections-v3.png?v=20260914-01');
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 144px 48px; mask-size: 144px 48px; }
.garage-feature-icon--specs { -webkit-mask-position: 0 -5px; mask-position: 0 -5px; }
.garage-feature-icon--tires { -webkit-mask-position: -48px -5px; mask-position: -48px -5px; }
.garage-feature-icon--lamps { -webkit-mask-position: -96px -5px; mask-position: -96px -5px; }
.garage-all-specs[aria-expanded="true"] .garage-feature-icon,
.garage-fitments-toggle[aria-expanded="true"] .garage-feature-icon,
.garage-lamps-toggle[aria-expanded="true"] .garage-feature-icon { background-color: var(--band-green); }
.garage-document-icon { display: inline-block; flex: 0 0 32px; width: 32px; height: 32px; background-image: url('/media/garage/garage-documents.png?v=20260914-01'); background-repeat: no-repeat; background-size: 96px 32px; }
.garage-document-icon--license { background-position: 0 0; }
.garage-document-icon--insurance { background-position: -32px 0; }
.garage-document-icon--inspection { background-position: -64px 0; }
.garage-fitments-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-top: 9px; }
.garage-fitment-column { min-width: 0; }
.garage-fitment-column > span { display: block; margin-bottom: 5px; color: var(--amber-ink); font: 700 15px var(--font); }
.garage-fitment-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; }
.garage-fitment-values b { min-width: 0; overflow: visible; text-overflow: clip; white-space: normal; color: var(--ink); font: 700 16px/1.25 var(--font); }
.garage-fitment-values b .garage-fitment-radius { color: var(--amber-ink); }
.garage-fitment-values em { min-width: 0; color: var(--faint); font-size: 14.5px; }
.garage-fitments-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 2px; }
.garage-fitments-meta > div { display: flex; align-items: baseline; gap: 6px; }
.garage-fitments-meta span { color: var(--ink); font: 600 14.5px var(--font); }
.garage-fitments-meta b { color: var(--amber-ink); font: 800 15px var(--font); }
.garage-lamps-slot { min-width: min(640px, calc(94vw - 96px)); max-width: 900px; }
.garage-lamps-body { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 15px 24px; margin-top: 9px; }
.garage-lamp-group { min-width: 0; }
.garage-lamp-group > span { display: block; margin-bottom: 6px; color: var(--amber-ink); font: 800 15px var(--font); }
.garage-lamp-values { display: grid; gap: 5px; }
.garage-lamp-values > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border-bottom: 1px solid rgba(var(--tint-rgb),.10); padding-bottom: 4px; }
.garage-lamp-values b { min-width: 0; overflow: visible; text-overflow: clip; white-space: normal; color: var(--ink); font: 700 15px/1.3 var(--font); }
.garage-lamp-values em { flex: 0 0 auto; color: var(--amber-ink); font: 800 15px/1.3 var(--font); font-style: normal; }
.garage-lamp-group { min-width: 0; }
.garage-lamp-group > span { display: block; margin-bottom: 5px; color: var(--amber-ink); font: 800 15px var(--font); }
.garage-lamp-values { display: grid; gap: 5px; }
.garage-lamp-values > div { display: flex; align-items: baseline; justify-content: space-between; gap: 11px; border-bottom: 1px solid rgba(var(--tint-rgb),.10); padding-bottom: 4px; }
.garage-lamp-values b { overflow: visible; text-overflow: clip; white-space: normal; color: var(--ink); font: 700 15px/1.3 var(--font); }
.garage-lamp-values em { flex: 0 0 auto; color: var(--amber-ink); font: 800 15px/1.3 var(--font); }
.garage-lamp-position { align-items: flex-start !important; }
.garage-lamp-variants { display: grid; flex: 0 0 auto; gap: 3px; min-width: 155px; }
.garage-lamp-variants > span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.garage-lamp-variants i { color: var(--muted); font: 700 14px/1.3 var(--font); font-style: normal; }
.garage-reference-loading, .garage-reference-empty { margin: 8px 0 0; color: var(--muted); font: 600 14.5px/1.4 var(--font); }
.garage-specs { margin-top: 15px; border-top: 1px solid rgba(var(--tint-rgb),.14); padding-top: 13px; }
.garage-specs-group + .garage-specs-group { margin-top: 15px; }
.garage-specs-group h4 { margin: 0 0 8px; color: var(--amber-ink); font: 800 20px/1.25 var(--font); text-align: center; }
.garage-specs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.garage-spec { display: grid; grid-template-columns: minmax(118px, .8fr) minmax(0, 1.2fr); gap: 10px; min-width: 0; padding: 7px 0; border-bottom: 1px solid rgba(var(--tint-rgb),.10); }
.garage-spec span { color: var(--ink); font: 600 14.5px/1.35 var(--font); }
.garage-spec b { min-width: 0; color: var(--amber-ink); font: 700 15px/1.35 var(--font); overflow-wrap: anywhere; }
.garage-docs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 23px; margin-top: 14px; }
.garage-doc { display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 0; background: transparent; color: var(--muted); font: 600 15.5px var(--font); cursor: pointer; text-align: left; }
.garage-card-documents .garage-doc { gap: 5px; white-space: nowrap; }
.garage-card-documents .garage-document-icon { flex-basis: 34px; width: 34px; height: 34px; background-size: 102px 34px; }
.garage-card-documents .garage-document-icon--insurance { background-position: -34px 0; }
.garage-card-documents .garage-document-icon--inspection { background-position: -68px 0; }
.garage-document-expired-mark { margin: 0 1px; }
.garage-doc b { color: var(--amber-ink); font-weight: 800; }
.garage-doc:hover { color: var(--amber-ink); }
.garage-doc:hover b { color: var(--amber-ink); text-decoration: underline dotted; text-underline-offset: 3px; }
/* The vehicle card is the garage's primary information field: all of its copy is 2px larger. */
.garage-car .garage-car-title { font-size: 23.5px; }
.garage-car .garage-car-sub { font-size: 19px; }
.garage-car .garage-car-answers span { font-size: 16.5px; }
.garage-car .garage-car-answers span { color: var(--amber-ink); }
.garage-car .garage-tax-block span { color: var(--ink); }
.garage-car .garage-card-documents .garage-doc > span { color: var(--ink); }
.garage-car .garage-car-answers b { font-size: 17.5px; }
.garage-car .garage-primary { font-size: 14px; }
.garage-car .garage-facts span,
.garage-car .garage-docs,
.garage-car .garage-facts em,
.garage-car .garage-doc,
.garage-car .garage-tax-block span { font-size: 17.5px; }
.garage-car .garage-facts b,
.garage-car .garage-tax-block b { font-size: 20px; }
.garage-car .garage-fitment-column > span { font-size: 17px; }
.garage-car .garage-fitment-values b { font-size: 18px; }
.garage-car .garage-fitment-values em { font-size: 16.5px; }
.garage-car .garage-fitments-meta span { font-size: 16.5px; }
.garage-car .garage-fitments-meta b { font-size: 17px; }
.garage-car .garage-lamp-group > span,
.garage-car .garage-lamp-values b,
.garage-car .garage-lamp-values em { font-size: 17px; }
.garage-car .garage-lamp-variants i { font-size: 16px; }
.garage-car .garage-reference-loading,
.garage-car .garage-reference-empty { font-size: 16.5px; }
.garage-car .garage-specs-group h4 { font-size: 22px; }
.garage-car .garage-spec span { font-size: 16.5px; }
.garage-car .garage-spec b { font-size: 17px; }
.garage-car .garage-remove { font-size: 19.5px; }
.garage-driver-licenses { margin: 0 0 15px; padding: 0 0 13px; border-bottom: 1px solid rgba(var(--tint-rgb),.14); }
.garage-driver-licenses summary { display: block; width: max-content; max-width: 100%; color: var(--muted); font: 700 16px var(--font); cursor: pointer; list-style: none; }
.garage-driver-summary-line { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.garage-driver-licenses summary::-webkit-details-marker { display: none; }
.garage-driver-licenses summary::marker { content: ""; font-size: 0; }
.garage-driver-licenses summary .garage-fitments-caret { display: inline-block; color: var(--amber-ink); font: 800 19px/1 var(--font); transition: transform .16s ease; }
.garage-driver-licenses[open] summary { color: var(--amber-ink); }
.garage-driver-licenses[open] summary .garage-fitments-caret { transform: rotate(90deg); }
.garage-driver-licenses-summary { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.garage-driver-licenses-summary span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.garage-driver-licenses-summary b { color: var(--muted); font-weight: 700; }
.garage-driver-licenses-summary em { color: var(--amber-ink); font-style: normal; font-weight: 800; }
.garage-driver-licenses-summary i { color: var(--line); font-style: normal; }
.garage-driver-licenses-body { margin-top: 11px; }
.garage-driver-license-shell { display: grid; grid-template-columns: minmax(0, 1fr) 58px; gap: 10px; min-width: 0; }
.garage-driver-license-scroll { min-width: 0; overflow-x: hidden; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--amber) var(--panel-2, var(--surface)); }
.garage-driver-license-scroll.is-overflowing { overflow-x: scroll; padding-bottom: 9px; scrollbar-gutter: stable; }
.garage-driver-license-scroll::-webkit-scrollbar { height: 8px; }
.garage-driver-license-scroll::-webkit-scrollbar-track { border-radius: 999px; background: var(--panel-2, var(--surface)); box-shadow: inset 0 0 0 1px rgba(var(--tint-rgb),.10); }
.garage-driver-license-scroll::-webkit-scrollbar-thumb { min-width: 44px; border: 2px solid var(--panel-2, var(--surface)); border-radius: 999px; background: var(--amber); }
.garage-driver-license-scroll::-webkit-scrollbar-thumb:hover { background: var(--amber-ink); }
.garage-driver-license-track { display: flex; gap: 10px; min-width: 100%; }
.garage-driver-license { display: grid; flex: 0 0 calc((100% - 20px) / 3); gap: 8px; min-width: 0; box-sizing: border-box; padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: rgba(var(--tint-rgb),.035); scroll-snap-align: start; scroll-snap-stop: always; }
.garage-driver-license-add-column { position: relative; min-width: 0; }
.garage-driver-license-add-fixed { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 0; border: 1px solid var(--amber); border-radius: 9px; background: var(--amber); cursor: pointer; }
.garage-driver-license-shell.is-overflowing .garage-driver-license-add-column { margin-bottom: 9px; }
.garage-driver-license-add { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; padding: 0 0 2px; background: var(--on-amber); color: var(--amber-ink); font: 900 27px/1 var(--font); pointer-events: none; }
.garage-driver-license-add-fixed:hover { filter: brightness(1.07); }
.garage-driver-upgrade-alert { top: calc(50% + 27px); right: 0; }
.garage-driver-license > strong { color: var(--ink); font: 800 15px var(--font); }
.garage-driver-license label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font: 700 14px var(--font); }
.garage-driver-license input { box-sizing: border-box; width: 100%; min-width: 0; height: 37px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2, var(--surface)); color: var(--ink); padding: 7px 9px; font: 600 15px var(--font); outline: 0; }
.garage-driver-license input:focus { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(var(--amber-rgb),.12); }
.garage-driver-license .garage-doc { font-size: 14.5px; }
.garage-driver-licenses-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.garage-driver-licenses-save { min-height: 32px; border: 1px solid var(--amber); border-radius: 8px; background: transparent; color: var(--amber-ink); padding: 6px 12px; font: 800 14.5px var(--font); cursor: pointer; }
.garage-expired-documents { margin: 0 0 11px; }
.garage-expired-documents > summary { display: flex; align-items: center; width: max-content; gap: 7px; color: var(--amber-ink); font: 800 16px var(--font); cursor: pointer; list-style: none; }
.garage-expired-documents > summary::-webkit-details-marker { display: none; }
.garage-expired-documents > summary::marker { content: ""; font-size: 0; }
.garage-expired-documents > summary .garage-fitments-caret { display: inline-block; color: var(--amber-ink); font: 800 19px/1 var(--font); transition: transform .16s ease; }
.garage-expired-documents[open] > summary .garage-fitments-caret { transform: rotate(90deg); }
.garage-expired-documents[open] .garage-summary-alert-icon { display: none; }
.garage-summary-alert-icon { margin-left: 2px; }
.garage-expired-icon.garage-summary-alert-icon--upcoming { background: #2388e8; color: var(--on-color); }
.garage-expired-alerts { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-top: 8px; }
.garage-expired-alert { display: inline-flex; align-items: center; width: fit-content; max-width: none; gap: 9px; margin: 0; color: var(--muted); font-size: 14.5px; white-space: nowrap; }
.garage-expired-alert b { color: var(--amber-ink); }
.garage-expired-alert em { color: var(--muted); font-style: normal; }
.garage-expired-icon { position: relative; display: inline-block; align-self: center; box-sizing: border-box; flex: 0 0 20px; width: 20px; height: 20px; padding: 0; border-radius: 50%; background: var(--alert-red); color: var(--ink-strong); font-size: 0; }
.garage-expired-icon::before { content: ""; position: absolute; top: 4px; left: 50%; width: 2px; height: 7px; border-radius: 999px; background: currentColor; transform: translateX(-50%); }
.garage-expired-icon::after { content: ""; position: absolute; top: 13px; left: 50%; width: 2px; height: 2px; border-radius: 50%; background: currentColor; transform: translateX(-50%); }
.garage-upcoming-alert { background: rgba(35,136,232,.10); border-color: rgba(35,136,232,.58); }
.garage-upcoming-alert .garage-expired-icon { background: #2388e8; color: var(--on-color); }
.garage-driver-licenses-save:hover:not(:disabled) { background: rgba(var(--amber-rgb),.1); }
.garage-driver-licenses-save:disabled { opacity: .55; cursor: default; }
.garage-calendar { position: fixed; z-index: 90; width: min(322px, calc(100vw - 24px)); box-sizing: border-box; margin: 0; padding: 12px; border: 1px solid rgba(var(--amber-rgb),.58); border-radius: 10px; background: var(--panel-2, var(--surface)); box-shadow: 0 16px 38px rgba(var(--shadow-rgb),.52); }
.garage-calendar-head { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; margin-bottom: 9px; }
.garage-calendar-head strong { color: var(--ink); font: 800 16px var(--font); text-align: center; }
.garage-calendar-caption { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: .22em; }
.garage-calendar-caption button { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.garage-calendar-caption button:first-of-type { color: var(--amber-ink); }
.garage-calendar-caption button:hover { color: var(--amber-ink); text-decoration: underline dotted; text-underline-offset: 4px; }
.garage-calendar-nav { width: 30px; height: 30px; justify-self: center; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--amber-ink); font: 800 23px/1 var(--font); cursor: pointer; }
.garage-calendar-nav:hover:not(:disabled) { border-color: var(--amber); background: rgba(var(--amber-rgb),.09); }
.garage-calendar-nav:disabled { opacity: .28; cursor: default; }
.garage-calendar-weekdays, .garage-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.garage-calendar-weekdays { margin-bottom: 4px; color: var(--muted); font: 700 12px var(--font); text-align: center; }
.garage-calendar-grid { gap: 3px; }
.garage-calendar-grid > div { min-width: 0; min-height: 32px; }
.garage-calendar-day { width: 100%; height: 32px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink); font: 700 14px var(--font); cursor: pointer; }
.garage-calendar-day:hover:not(:disabled) { border-color: rgba(var(--amber-rgb),.65); background: rgba(var(--amber-rgb),.1); color: var(--amber-ink); }
.garage-calendar-day.is-today { border-color: rgba(var(--amber-rgb),.55); color: var(--amber-ink); }
.garage-calendar-day.is-selected { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.garage-calendar-day:disabled { color: var(--faint); cursor: default; }
.garage-calendar-picker { position: absolute; z-index: 3; top: 47px; left: 11px; right: 11px; display: flex; flex-direction: column; gap: 2px; max-height: 230px; overflow-y: auto; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2, var(--surface)); box-shadow: 0 16px 38px rgba(var(--shadow-rgb),.55); scrollbar-width: thin; scrollbar-color: var(--amber) var(--panel); }
.garage-calendar-picker::-webkit-scrollbar { width: 7px; }
.garage-calendar-picker::-webkit-scrollbar-track { background: var(--panel); border-radius: 999px; }
.garage-calendar-picker::-webkit-scrollbar-thumb { background: var(--amber); border: 2px solid var(--panel); border-radius: 999px; }
.garage-calendar-picker button { flex: 0 0 auto; min-height: 31px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); font: 700 14px var(--font); cursor: pointer; text-align: left; padding: 0 10px; }
.garage-calendar-picker button:hover:not(:disabled) { border-color: rgba(var(--amber-rgb),.65); background: rgba(var(--amber-rgb),.1); color: var(--amber-ink); }
.garage-calendar-picker button.is-selected { border-color: var(--amber); background: var(--amber); color: var(--on-amber); }
.garage-calendar-picker button:disabled { color: var(--faint); cursor: default; }
.garage-calendar-clear { display: block; width: 100%; margin-top: 11px; border: 0; background: transparent; color: var(--muted); font: 700 15px var(--font); cursor: pointer; }
.garage-calendar-clear:hover { color: var(--amber-ink); text-decoration: underline; text-underline-offset: 3px; }
.garage-remove-top { align-self: flex-start; margin-left: auto; white-space: nowrap; }
.garage-remove:hover { color: var(--alert-ink); border-color: rgba(247,2,2,.6); }
.garage-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.garage-form > .garage-form-variant { grid-column: 1 / -1; }
.garage-identity-fields { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.garage-detail-chain { display: contents; }
.garage-detail-label { display: block; }
.garage-label-copy { display: block; }
.garage-required { display: inline; margin-left: 4px; color: var(--alert-red); }
.garage-required-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font: 600 15px/1.4 var(--font); }
.garage-required-note .garage-required { margin: 0 5px 0 0; }
.list-panel.garage.garage-form-open .garage-required-note { position: absolute; left: 31px; bottom: 29px; max-width: calc(100% - 62px); }
.garage-identity-field { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font: 700 16px var(--font); letter-spacing: .02em; }
.garage-form-actions { grid-column: 1 / -1; display: flex; gap: 12px; }
.garage-form-actions { justify-content: flex-end; margin-top: 0; }
.garage-form-footer { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; justify-self: end; width: max-content; max-width: 100%; }
.garage-form-footer .garage-comment-input { width: 100%; min-width: 0; }
.garage-catalog-error { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--alert-ink); font: 700 16px var(--font); }
.garage-dd { position: relative; flex: 0 0 auto; width: 100%; }
.garage-dd .dd-btn { height: 40px; padding: 7px 34px 7px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2, var(--surface)); color: var(--ink); font: 600 19px var(--font); }
.garage-dd .dd-btn.is-disabled { color: var(--muted); background: var(--panel-2, var(--surface)); }
.garage-dd .dd-caret { right: 13px; }
.garage-dd .menu { top: calc(100% + 5px); min-width: 100%; max-width: none; max-height: 325px; }
.menu.garage-menu-portal { position: fixed; z-index: 120; top: auto; box-sizing: border-box; max-width: none; max-height: 325px; }
.garage-menu-portal .menu-item { font-size: 18px; padding: 10px 13px; }
.garage-dd .menu-item { font-size: 18px; padding: 10px 13px; }
.menu.garage-generation-menu .garage-generation-menu-item { display: flex; align-items: center; gap: 18px; min-height: 126px;
  padding: 6px 9px !important; white-space: normal; }
.garage-generation-photo { flex: 0 0 190px; width: 190px; height: 114px; object-fit: cover;
  border-radius: 7px; background: transparent; }
.garage-generation-copy { display: flex; align-items: center; align-self: stretch; min-width: 0; }
.garage-generation-label { display: block; min-width: 0; line-height: 1.28; white-space: normal; }
.list-panel.garage.garage-form-open .list-body {
  overflow-y: hidden;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.list-panel.garage.garage-form-open .list-body::-webkit-scrollbar { width: 0; height: 0; display: none; }
.garage-variant-volume { color: var(--amber-ink); }
.menu-item.is-selected .garage-variant-volume { color: var(--on-amber); }
.garage-empty-state { min-height: 306px; flex: 1 1 auto; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 39px 15%; text-align: center; }
.garage-empty-state .garage-add { padding: 14px 23px; font-size: 19px; }
.garage-empty-state p { max-width: 700px; margin: 0; color: var(--muted); font: 600 19px/1.5 var(--font); }
@media (max-width: 620px) {
  .list-panel.garage { width: calc(100vw - 20px); height: auto; max-height: none; }
  .list-panel.garage .list-title { flex-direction: column; align-items: flex-start; gap: 10px; font-size: clamp(27px, 9vw, 32px); }
  .list-panel.garage .list-title > span { display: block; white-space: nowrap; }
  .list-panel.garage .garage-add-wrap { align-items: flex-start; }
  .list-panel.garage .garage-upgrade-alert { right: auto; left: 0; }
  .list-panel.garage.garage-form-open .list-body { overflow-y: auto; }
  .garage-facts { grid-template-columns: 1fr; gap: 9px; }
  .garage-car-information { grid-template-columns: 1fr; gap: 9px; }
  .garage-fitments-body { grid-template-columns: 1fr; }
  .garage-lamps-body { grid-template-columns: 1fr; }
  .garage-lamps-slot { min-width: min(290px, calc(94vw - 96px)); }
  .garage-specs-grid { grid-template-columns: 1fr; }
  .garage-driver-license-shell { grid-template-columns: minmax(0, 1fr) 50px; gap: 7px; }
  .garage-driver-license { flex-basis: 100%; }
  .garage-form { grid-template-columns: 1fr; }
  .garage-form > label { grid-column: 1 / -1; }
  .menu.garage-generation-menu .garage-generation-menu-item { min-height: 94px; gap: 10px; }
  .garage-generation-photo { flex-basis: 142px; width: 142px; height: 82px; }
  .garage-identity-fields { grid-template-columns: 1fr; }
  .garage-detail-chain { display: contents; }
  .garage-car-answers { grid-template-columns: 1fr; }
  .list-panel.garage.garage-form-open .garage-required-note { position: static; max-width: none; }
}
/* Избранное — сетка мини-карточек */
.lst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 3px; }
.lst-card { position: relative; background: var(--surface); border-radius: 10px; overflow: hidden; cursor: pointer; }
/* Избранное: точка на ТОЙ САМОЙ машине, по которой пришло изменение. */
.lst-card.has-new { box-shadow: 0 0 0 2px var(--alert-red); }
.lst-card .lst-new { position: absolute; z-index: 2; top: 7px; left: 7px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--alert-red); box-shadow: 0 0 0 2px rgba(var(--shadow-rgb),.55); }
/* Сохранённый поиск: не метка, а кнопка — открывает ТОЛЬКО новые машины по этому поиску. */
.lst-newbtn { flex: 0 0 auto; padding: 6px 11px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--alert-red); color: var(--ink-strong); font: 700 12px/1 var(--font); display: inline-flex; align-items: center; justify-content: center; }
.lst-newbtn span { position: relative; top: 1px; }
.lst-newbtn:hover { background: #f4463c; }
.lst-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.lst-card .cap { padding: 7px 8px 9px; }
.lst-card .p { color: var(--amber-ink); font: 800 14px var(--font); }
.lst-card .t { color: var(--ink-1); font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lst-card .c { color: var(--muted); font-size: 10.5px; }
.lst-del { position: absolute; top: 6px; right: 6px; z-index: 2; width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: rgba(var(--scrim-rgb),0.6); color: var(--ink-strong); font-size: 13px; cursor: pointer; line-height: 1; }
.lst-del:hover { background: var(--band-red); }
/* Удалённое объявление в избранном: гасим фото, косой штамп «Удалено» и строка обратного отсчёта. */
.lst-card.gone img { opacity: .5; filter: grayscale(.45); }
.lst-gone { position: absolute; z-index: 2; top: 38%; left: 50%; transform: translate(-50%,-50%) rotate(-7deg);
  padding: 3px 12px; background: rgba(220,20,20,0.5); color: var(--ink-strong); font: 800 13px var(--font); letter-spacing: 1px;
  border: 2px solid rgba(var(--on-media-rgb),0.85); border-radius: 6px; text-transform: uppercase; pointer-events: none; white-space: nowrap; }
.lst-gone-left { color: var(--alert-ink); font-size: 10.5px; margin-top: 3px; }
/* Сохранённые поиски — строки */
.lst-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.lst-row:last-child { border-bottom: 0; }
.lst-row .info { flex: 1 1 auto; min-width: 0; }
.lst-row .name { color: var(--ink); font: 700 14px var(--font); }
.lst-row .meta { color: var(--muted); font-size: 12px; margin-top: 3px; }
/* Служебная строка: когда создан и за какими сайтами следит. */
.lst-row .foot { color: var(--soft-ink); font-size: 11px; margin-top: 3px; }
.lst-recent-search-row { width: 100%; cursor: pointer; border: 0; border-bottom: 1px solid var(--line); border-radius: 9px;
  padding-left: 10px; padding-right: 10px; background: transparent; text-align: left;
  transition: background .15s ease, border-color .15s ease; }
.lst-recent-search-row .info, .lst-recent-search-row .name, .lst-recent-search-row .meta, .lst-recent-search-row .foot { display: block; }
.lst-recent-search-row:hover { background: var(--amber-soft); }
.lst-recent-search-row .name { color: var(--amber-ink); }
.lst-recent-search-row::after { content: "›"; flex: 0 0 auto; color: var(--amber-ink); font: 700 24px/1 var(--font); }
.lst-btn { flex: 0 0 auto; border: 0; border-radius: 8px; padding: 8px 14px; font: 700 13px var(--font); cursor: pointer; }
.lst-open { background: var(--amber); color: var(--on-amber); }
.lst-rm { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.lst-rm:hover { color: var(--alert-ink); border-color: rgba(247,2,2,0.6); }
/* Действия строки — фиксированные столбцы, чтобы кнопки стояли ровно независимо от «новое».
   Пустой слот (.lst-slot) резервирует колонку «новое» — невидимый край. */
.lst-actions { display: grid; grid-template-columns: 66px max-content max-content; gap: 8px; align-items: center; flex: 0 0 auto; }
.lst-actions.has-keep { grid-template-columns: 74px 66px max-content max-content; }
.lst-actions .lst-keep-row, .lst-actions .lst-newbtn { width: 100%; justify-content: center; }
.lst-slot { display: block; }
/* Кнопка «Не удалять / Сохранено» (как в избранном): янтарная → зелёная. На ~30% мельче. */
.lst-keep-row { border: 0; border-radius: 7px; padding: 5px 6px; font: 700 9px var(--font);
  cursor: pointer; background: var(--amber); color: var(--on-amber); text-align: center; }
.lst-keep-row:hover { background: #ffb920; }
.lst-keep-row.on { background: #1f9d46; color: var(--ink-strong); }
.lst-keep-row.on:hover { background: #24b350; }
/* Сохранённые поиски: держим высоту под 10 строк, чтобы окно не «прыгало» при удалении, + пагинация. */
.lst-saved { min-height: 720px; }
.lst-pager { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 14px 0 4px; }
.lst-pager span { color: var(--muted); font: 700 13px var(--font); }
.lst-pg { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink); font-size: 18px; cursor: pointer; line-height: 1; }
.lst-pg:hover:not([disabled]) { border-color: var(--amber); color: var(--amber-ink); }
.lst-pg[disabled] { opacity: .35; cursor: default; }

/* Окно карточки */
/* Слои: список (78) → карточка (82) → вход (90). Карточка ВЫШЕ списка нарочно: открыв
   машину из «Избранного», человек закрывает её и должен вернуться в «Избранное», а не
   на главную. Поэтому список не закрываем — он ждёт под карточкой. */
.lm-overlay { position: fixed; inset: 0; z-index: 82; background: rgba(var(--scrim-rgb),0.72); backdrop-filter: blur(2px); opacity: 0; transition: opacity .2s ease; }
.lm-overlay[hidden] { display: none; }
.lm-overlay.show { opacity: 1; }
/* Не листать фон под окном. На мобиле скроллится html (не только body), поэтому запираем оба. */
html.modal-open, body.modal-open { overflow: hidden; }
.lm-panel { position: fixed; background: var(--panel); border: 2px solid var(--amber); border-radius: 16px; box-shadow: 0 30px 80px rgba(var(--shadow-rgb),0.7); backdrop-filter: blur(10px); display: flex; flex-direction: column; overflow: hidden; padding: 16px 18px; gap: 10px; transform: scale(0.96); transition: transform .2s ease; }
.lm-overlay.show .lm-panel { transform: scale(1); }
.lm-close { position: absolute; top: 8px; right: 12px; z-index: 3; background: transparent; border: 0; color: var(--ink); font-size: 20px; cursor: pointer; line-height: 1; }
.lm-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1 1 auto; }
.lm-loading { margin: auto; color: var(--muted); font: 600 15px var(--font); }
.lm-top { display: flex; gap: 18px; flex: 1 1 auto; min-height: 0; }
.lm-gallery { flex: 0 0 42%; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lm-main { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 10px; overflow: hidden; background: var(--surface-2); cursor: pointer;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; }
/* #6 «Удалено» по центру фото у снятой с продажи карточки */
.lm-removed { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-8deg);
  padding: 8px 34px; background: rgba(220,20,20,0.42); color: var(--ink-strong); font: 800 34px var(--font); letter-spacing: 2px;
  border: 3px solid rgba(var(--on-media-rgb),0.85); border-radius: 10px; text-transform: uppercase; pointer-events: none;
  box-shadow: 0 6px 30px rgba(var(--shadow-rgb),0.5); backdrop-filter: blur(1px); }
.lm-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-photo-nav-hint { position: absolute; top: 50%; z-index: 2; width: 24px; height: 40px;
  transform: translateY(-50%); display: flex; align-items: center; justify-content: center;
  pointer-events: none; border: 0; background: transparent; color: rgba(var(--amber-rgb),0.72);
  font-size: 0; filter: drop-shadow(0 2px 4px rgba(var(--shadow-rgb),0.8)); }
.lm-photo-nav-hint::before { content: ""; width: 22px; height: 22px;
  border-right: 4px solid currentColor; border-bottom: 4px solid currentColor; }
.lm-photo-nav-hint.prev::before { transform: translateX(2px) rotate(135deg); }
.lm-photo-nav-hint.next::before { transform: translateX(-2px) rotate(-45deg); }
.lm-photo-nav-hint.prev { left: 16px; }
.lm-photo-nav-hint.next { right: 16px; }
/* Цена с отклонением от рынка прямо на обложке: видно сразу, не переводя взгляд вправо.
   Отображение — ровно то же, что в карточке: те же классы lm-priceline/lm-price/lm-diff,
   поэтому шрифт, размер и цвета совпадают буквально (жёлтая цена, процент цвета банда).
   Здесь остаются только положение, тень под текстом и исчезновение по наведению.
   При наведении НА САМУ ЦИФРУ она уходит, открывая закрытый угол фотографии; курсор при
   этом остаётся на ней, поэтому мигания нет. В полноэкранном режиме её не будет —
   он рисуется отдельным слоем, а не этим блоком. */
.lm-photo-price { position: absolute; left: 12px; bottom: 12px; z-index: 2;
  flex-wrap: nowrap; white-space: nowrap;
  text-shadow: 0 2px 10px rgba(var(--shadow-rgb),0.95), 0 0 4px rgba(var(--shadow-rgb),0.9);
  transition: opacity .16s ease; }
.lm-photo-price:hover { opacity: 0; }

/* Ярлык «на весь экран» в углу главного фото — им открывается полноэкранный режим. */
.lm-expand { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(var(--scrim-rgb),0.55); border: 1px solid rgba(var(--on-media-rgb),0.25); border-radius: 9px;
  color: var(--ink-strong); padding: 0; transition: background .15s, transform .15s; }
.lm-expand:hover { background: rgba(var(--scrim-rgb),0.8); transform: scale(1.06); }
.lm-expand svg { width: 20px; height: 20px; }
/* Звезда «в избранное» — в той же строке, сразу после «марка модель год» */
.lm-titlewrap { display: flex; align-items: center; gap: 12px; }
.lm-star { position: relative; flex: 0 0 auto; width: 36px; height: 36px; background: transparent; border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.lm-star svg { width: 32px; height: 32px; fill: transparent; stroke: var(--band-yellow); stroke-width: 2; stroke-linejoin: round; }
.lm-star.on { border-radius: 50%; background: var(--scrim); box-shadow: 0 0 0 2px var(--shadow-solid), 0 0 18px 5px rgba(var(--band-yellow-rgb),0.8); }
/* Заметка — только у избранного, рядом со звездой и в её же стиле. Заполненная светится. */
.lm-note-btn { position: relative; flex: 0 0 auto; width: 34px; height: 34px; background: transparent; border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.lm-note-btn svg { width: 26px; height: 26px; fill: none; stroke: var(--band-yellow); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lm-note-btn.on { border-radius: 50%; background: var(--scrim); box-shadow: 0 0 0 2px var(--shadow-solid), 0 0 18px 5px rgba(var(--band-yellow-rgb),0.8); }
.lm-note-wrap { flex: 0 0 auto; }
/* Заметка живёт прямо в карточке (места хватает): есть текст — блок открыт всегда, пусто — блока нет. */
/* Заметка висит в свободном месте справа (под кнопками) и НЕ двигает содержимое карточки. */
.lm-head { position: relative; }
.lm-note-box { position: absolute; right: 0; top: 46px; width: min(46%, 380px); z-index: 3;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px; display: flex; flex-direction: column; gap: 6px; }
/* Замерено: свободное место справа появляется примерно с 1400px (на 1280 запас уже −3px,
   заметка налезала на цену). Уже — возвращаем в поток, чтобы ничего не перекрыть. */
@media (max-width: 1400px) {
  .lm-note-box { position: static; width: auto; margin-top: 8px; }
}
.lm-note-box[hidden] { display: none; }
.lm-note-box textarea { width: 100%; height: 96px; resize: none; background: transparent; color: var(--ink);
  border: 0; padding: 0; font: 400 13.5px/1.45 var(--font); outline: none;
  scrollbar-width: thin; scrollbar-color: rgba(var(--amber-rgb),0.5) transparent; }
.lm-note-box textarea::-webkit-scrollbar { width: 9px; }
.lm-note-box textarea::-webkit-scrollbar-track { background: transparent; }
.lm-note-box textarea::-webkit-scrollbar-thumb { background: rgba(var(--amber-rgb),0.5); border-radius: 8px; }
.lm-note-foot { position: relative; display: flex; align-items: center; gap: 10px; }
.lm-note-count { color: var(--muted); font: 600 11.5px var(--font); }
.lm-note-saved { margin-left: auto; color: var(--green-ink); font: 700 11.5px var(--font); opacity: 0; transition: opacity .2s; }
.lm-note-saved.show { opacity: 1; }
/* «Очистить» — рядом со счётчиком, срабатывает только после подтверждения. */
.lm-note-clear { background: transparent; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); font: 700 11.5px var(--font); text-decoration: underline dotted; text-underline-offset: 2px; }
.lm-note-clear:hover { color: #ff6b6b; }
.lm-note-clear[hidden] { display: none; }
/* Маленькое подтверждение в стиле карточки — над строкой счётчика. */
.lm-note-confirm { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 7;
  background: var(--panel); border: 1px solid var(--amber); border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 14px 34px rgba(var(--shadow-rgb),0.6); display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.lm-note-confirm[hidden] { display: none; }
.lm-note-confirm .q { color: var(--ink); font: 700 12.5px var(--font); }
.lm-note-confirm button { border: 0; border-radius: 7px; padding: 5px 11px; cursor: pointer; font: 700 12px var(--font); }
.lm-note-yes { background: var(--alert-red); color: var(--ink-strong); }
.lm-note-no { background: transparent; color: var(--muted); border: 1px solid var(--line) !important; }
.lm-note-no:hover { color: var(--ink); }
/* Карусель миниатюр листается (свайп/скролл), но полосу прокрутки не показываем. */
.lm-thumbs-wrap { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.lm-thumbs-wrap .lm-thumbs { flex: 1 1 auto; }
.lm-thumbs-nav { flex: 0 0 auto; width: 26px; height: 46px; border: 0; border-radius: 6px; cursor: pointer;
  background: rgba(var(--tint-rgb),0.06); color: var(--ink); font: 700 18px var(--font); line-height: 1;
  display: flex; align-items: center; justify-content: center; }
.lm-thumbs-nav:hover { background: var(--amber-soft); color: var(--amber-ink); }
.lm-thumbs-nav[disabled] { opacity: .25; cursor: default; }
/* На сенсорных стрелки не нужны — полосу листают пальцем. */
@media not all and (hover: hover) and (pointer: fine) { .lm-thumbs-nav { display: none; } }
.lm-thumbs { flex: 0 0 auto; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.lm-thumbs::-webkit-scrollbar { width: 0; height: 0; display: none; }
.lm-thumbs img { flex: 0 0 auto; width: 62px; height: 46px; object-fit: cover; border-radius: 6px; cursor: pointer; opacity: .55; border: 2px solid transparent; }
.lm-thumbs img.on { opacity: 1; border-color: var(--amber); }
.lm-info { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; scrollbar-width: none; -ms-overflow-style: none; }
.lm-info::-webkit-scrollbar { width: 0; height: 0; display: none; }   /* скролл есть, полосы нет */
.lm-title { font: 800 26px var(--font); color: var(--ink); line-height: 1.15; }
.lm-gen { font-size: 15px; color: var(--muted); margin-top: 4px; }
.lm-city { font: 800 26px var(--font); color: var(--amber-ink); line-height: 1.15; margin-top: 2px; }   /* город под маркой/моделью, шрифт как заголовок */
.lm-date { font: 400 15px var(--font); color: var(--ink); }   /* дата объявления — как обычные поля */
.lm-region { font: 400 15px var(--font); color: var(--ink); margin-top: 2px; }   /* область — обычным, как поля */
/* #4 «сколько таких же поступило за неделю» — под заголовком, как подпись средней (только платным) */
.lm-newweek { font: 400 12px var(--font); color: var(--muted); margin-top: 4px; }
.lm-newweek-btn { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.lm-newweek-btn:hover { color: var(--amber-ink); }
/* ── Сравнение (весы): кнопка в карточке (перед звездой) и на обложке (слева от звезды) ── */
.lm-cmp-btn { position: relative; flex: 0 0 auto; width: 34px; height: 34px; background: transparent; border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.lm-cmp-btn svg { width: 27px; height: 27px; fill: none; stroke: var(--band-yellow); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lm-cmp-btn.on { border-radius: 50%; background: var(--scrim); box-shadow: 0 0 0 2px var(--shadow-solid), 0 0 18px 5px rgba(var(--band-yellow-rgb),0.8); }
.card__cmp { position: absolute; top: 6px; right: 40px; z-index: 3; width: 30px; height: 30px; border: 0; padding: 0; border-radius: 50%; background: rgba(var(--scrim-rgb),0.45); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s, background .2s, box-shadow .2s; }
.card:hover .card__cmp, .card__cmp.on { opacity: 1; }
.card__cmp svg { width: 18px; height: 18px; fill: none; stroke: var(--band-yellow); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.card__cmp.on { background: var(--scrim); box-shadow: 0 0 0 2px var(--shadow-solid), 0 0 18px 5px rgba(var(--band-yellow-rgb),0.85); }
/* включённые весы: та же «живая» анимация, что у звезды (вращение+свечение+искры), но без заливки */
.card__cmp.on, .lm-cmp-btn.on, .lst-cmp.on { perspective: 320px; }
.card__cmp.on svg, .lm-cmp-btn.on svg, .lst-cmp.on svg {
  stroke: var(--band-yellow);
  animation: favPop .45s cubic-bezier(.2,1.6,.4,1), favSpin 2.2s linear .45s infinite, favGlow 1.3s ease-in-out infinite;
}
/* Мини-карточка списка: звезда «в избранное» + весы «в сравнение» (просмотренные) */
.lst-fav { position: absolute; z-index: 3; top: 7px; right: 7px; width: 28px; height: 28px; border: 0; padding: 0;
  border-radius: 50%; background: rgba(var(--scrim-rgb),0.5); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lst-fav svg { width: 17px; height: 17px; fill: transparent; stroke: var(--band-yellow); stroke-width: 2; stroke-linejoin: round; }
.lst-fav.on { background: var(--scrim); box-shadow: 0 0 0 2px var(--shadow-solid), 0 0 12px 3px rgba(var(--band-yellow-rgb),0.8); }
/* Заливку задаёт общее правило выше вместе с анимацией (хлопок + вращение + свечение);
   отдельного fill здесь быть не должно — он перебивал её и звезда только перекрашивалась. */
.lst-cmp { position: absolute; z-index: 3; top: 7px; right: 41px; width: 28px; height: 28px; border: 0; padding: 0;
  border-radius: 50%; background: rgba(var(--scrim-rgb),0.5); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lst-cmp svg { width: 17px; height: 17px; fill: none; stroke: var(--band-yellow); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lst-cmp.on { background: var(--scrim); box-shadow: 0 0 0 2px var(--shadow-solid), 0 0 12px 3px rgba(var(--band-yellow-rgb),0.8); }
/* ── Таблица сравнения ── */
.list-panel.wide { width: min(1280px, 97vw); }
.cmp-wrap { overflow-x: auto; scrollbar-width: thin; }
/* table-layout:fixed + перенос — колонки делят ширину поровну и не распираются длинным текстом
   (например поколением), поэтому все 5 авто влезают в панель без горизонтальной прокрутки. */
.cmp-table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.cmp-table th, .cmp-table td { border-bottom: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: middle; font-size: 13.5px; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
.cmp-rowlabel { position: sticky; left: 0; z-index: 2; background: var(--table-head); color: var(--muted); font-weight: 600; width: 132px; }
.cmp-col { width: auto; }
.cmp-carhead { text-align: center; background: var(--table-head); }
.cmp-photo { position: relative; width: 156px; margin: 0 auto 8px; }
.cmp-carhead img { width: 156px; height: 104px; object-fit: cover; border-radius: 8px; display: block; cursor: pointer; }
/* Крестик — янтарный, вверху справа над фото. */
.cmp-del { position: absolute; top: 6px; right: 6px; z-index: 2; width: 26px; height: 26px; display: grid; place-items: center;
  background: rgba(var(--scrim-rgb),0.5); border: 0; border-radius: 50%; color: var(--band-yellow-ink); font: 700 15px var(--font); cursor: pointer; line-height: 1; }
.cmp-del:hover { background: var(--scrim); }
/* Звезда избранного — вверху слева над фото (как на обложке). */
.cmp-fav { position: absolute; top: 6px; left: 6px; z-index: 2; width: 28px; height: 28px; border: 0; padding: 0; border-radius: 50%;
  background: rgba(var(--scrim-rgb),0.45); display: grid; place-items: center; cursor: pointer; }
.cmp-fav svg { width: 18px; height: 18px; fill: transparent; stroke: var(--band-yellow); stroke-width: 2; stroke-linejoin: round; }
.cmp-fav.on { background: var(--scrim); box-shadow: 0 0 0 2px var(--shadow-solid), 0 0 12px 3px rgba(var(--band-yellow-rgb),0.8); }
.cmp-fav.on svg { fill: var(--band-yellow); }
/* Снятая с продажи машина в сравнении: гасим фото и ставим косой штамп — иначе она стоит
   в колонке как живой вариант, и человек всерьёз выбирает из того, что уже продано. */
.cmp-photo.gone img { opacity: .45; filter: grayscale(.5); }
.cmp-gone { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-8deg);
  padding: 3px 12px; background: rgba(220,20,20,0.5); color: var(--ink-strong); font: 800 13px var(--font); letter-spacing: 1px;
  border: 2px solid rgba(var(--on-media-rgb),0.85); border-radius: 6px; text-transform: uppercase; pointer-events: none; white-space: nowrap; }
.cmp-carhead.gone .cmp-carname, .cmp-carhead.gone .cmp-carcity { color: var(--muted); }
.cmp-carname { font: 700 13.5px var(--font); color: var(--ink); text-align: center; }
.cmp-carcity { font: 500 12px var(--font); color: var(--muted); text-align: center; margin-top: 2px; }
.cmp-amber { color: var(--amber-ink); font-weight: 700; }
.cmp-red { color: #ff5a5a; font-weight: 700; }                 /* растаможка/учёт: Нет */
/* Медаль-место сверху по центру (обёртка .cmp-metric = колонка с align:center). Вид «медали»:
   рим-контур (border) + металлический блик (radial-gradient) + объём (inset-тени). */
.cmp-metric { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.cmp-medal { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; font: 800 13px var(--font); line-height: 1; border: 2px solid;
  box-shadow: inset 0 2px 3px rgba(var(--on-media-rgb),0.5), inset 0 -3px 5px rgba(var(--shadow-rgb),0.38), 0 2px 4px rgba(var(--shadow-rgb),0.55); }
.cmp-medal.g1 { background: radial-gradient(circle at 34% 28%, #fff6c0, #f2b807 72%); color: #4a3600; border-color: #a8790a; }   /* золото */
.cmp-medal.g2 { background: radial-gradient(circle at 34% 28%, var(--on-media), #b4bcc7 72%); color: #2e3440; border-color: #838b98; }   /* серебро */
.cmp-medal.g3 { background: radial-gradient(circle at 34% 28%, #ffd6ab, #c07c34 72%); color: #3a230c; border-color: #8a561f; }   /* бронза */
.cmp-medal.gx { background: radial-gradient(circle at 34% 28%, #3d424d, #23272f 72%); color: var(--ink-3); border-color: #4a5059; } /* 4-е+ */
/* Разделитель: заметная линия с равными отступами сверху и снизу. */
.cmp-divider td { padding: 0; border: 0; }
.cmp-divline { height: 2px; background: rgba(var(--amber-rgb),0.6); margin: 16px 0; border-radius: 2px; }
/* Плашка сайта (как «наши» чипы). Кликабельна — ведёт на авто в источнике. */
.cmp-site { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(var(--amber-rgb),0.14);
  border: 1px solid rgba(var(--amber-rgb),0.4); color: var(--band-yellow-ink); font: 700 12px var(--font);
  text-decoration: none; cursor: pointer; }
a.cmp-site:hover { background: rgba(var(--amber-rgb),0.28); border-color: var(--band-yellow); }
/* Мобила: fixed-раскладка втискивала бы 4–5 колонок в ширину экрана и рвала текст по буквам.
   Даём колонкам читаемый min-width и горизонтальный скролл; ярлык слева остаётся sticky. */
@media (max-width: 640px) {
  .cmp-table { table-layout: auto; width: max-content; min-width: 100%; }
  /* overflow-wrap:normal — иначе «Двигатель»/«Поколение» рвутся по букве; так слова
     переносятся только по пробелу («Средняя цена», «Растаможен в РК»). */
  .cmp-rowlabel { width: 104px; min-width: 104px; font-size: 12.5px; padding: 9px 8px; overflow-wrap: normal; }
  .cmp-col, .cmp-carhead { min-width: 148px; }
  .cmp-photo, .cmp-carhead img { width: 128px; }
  .cmp-table th, .cmp-table td { padding: 9px 10px; }
}
.lm-priceline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lm-price { font: 800 30px var(--font); color: var(--amber-ink); line-height: 1.1; }
.lm-diff { font: 800 30px var(--font); line-height: 1.1; }        /* тот же шрифт, что цена; цвет банда */
.lm-dot { color: var(--muted); font-weight: 700; }
/* Аналитика — чип с подложкой цвета банда (читается лучше красного текста) */
.lm-market { display: inline-block; font-size: 14px; margin-top: 10px; padding: 6px 14px; border-radius: 16px; }
.lm-mk-green { background: rgba(57,237,2,0.13); border: 1px solid rgba(57,237,2,0.55); color: var(--ok-ink); }
.lm-mk-yellow { background: rgba(var(--band-yellow-rgb),0.13); border: 1px solid rgba(var(--band-yellow-rgb),0.55); color: var(--warn-ink); }
.lm-mk-orange { background: rgba(255,133,0,.13); border: 1px solid rgba(255,133,0,.55); color: #ff9d2e; }
.lm-mk-red { background: rgba(247,2,2,0.16); border: 1px solid rgba(247,2,2,0.6); color: var(--alert-ink); }
.lm-cmp { text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.lm-cmp:hover { opacity: .8; }
/* Подпись под строкой сравнения — обычным шрифтом, как поля карточки. */
.lm-market-wrap { display: inline-block; }   /* ширина = плашка, чтобы подпись села по центру */
.lm-cmp-note { font: 400 12px var(--font); color: var(--muted); margin-top: 3px; text-align: center; }
.v-vol { font-weight: 800; }   /* объём двигателя жирным */
.lm-summary { font-size: 14px; color: var(--ink-2); }
.lm-actions { display: flex; gap: 10px; margin-top: auto; }
.lm-btn { padding: 10px 16px; border-radius: 10px; font: 700 14px var(--font); cursor: pointer; border: 0; text-decoration: none; display: inline-flex; align-items: center; }
.lm-btn--primary { background: var(--amber); color: var(--on-amber); }
.lm-btn--ghost { background: transparent; border: 1.5px solid var(--muted); color: var(--ink); }
.lm-track.on { border-color: var(--amber); color: var(--amber-ink); }
/* Описание снизу: показываем 3 строки; стрелка (если не влезло) раскрывает со скроллом.
   Один и тот же элемент/шрифт в свёрнутом и раскрытом — без прыжка. */
.lm-bottom { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid rgba(var(--tint-rgb),0.1); padding-top: 10px; }
.lm-fold-head { display: flex; align-items: center; gap: 8px; background: transparent; border: 0; color: var(--ink); font: 700 15px var(--font); cursor: pointer; padding: 0; align-self: flex-start; }
.lm-fold-arrow { color: var(--amber-ink); transition: transform .2s; }
.lm-fold-arrow[hidden] { display: none; }
.lm-fold.open .lm-fold-arrow { transform: rotate(180deg); }
.lm-fold--full .lm-desc { -webkit-line-clamp: unset; display: block; min-height: 0; }   /* моб: полный текст, без сворачивания */
.lm-fold-more { color: var(--amber-ink); font: 700 13px var(--font); cursor: pointer; margin-left: 4px; }   /* веб: развернуть/свернуть */
.lm-fold-more[hidden] { display: none; }
/* Резервируем место ровно под 3 строки, даже если текст короче — чтобы фото не «прыгало» между карточками. */
.lm-desc { font-size: 14px; line-height: 1.5; color: var(--ink-2); white-space: pre-line; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: calc(3 * 1.5 * 14px); }
.lm-fold.open .lm-desc { -webkit-line-clamp: unset; display: block; min-height: 0; max-height: 20vh; overflow-y: auto;
  padding-right: 8px; scrollbar-width: thin; scrollbar-color: rgba(var(--amber-rgb),0.5) transparent; }
.lm-fold.open .lm-desc::-webkit-scrollbar { width: 9px; }
.lm-fold.open .lm-desc::-webkit-scrollbar-track { background: transparent; }
.lm-fold.open .lm-desc::-webkit-scrollbar-thumb { background: rgba(var(--amber-rgb),0.5); border-radius: 5px; }
/* Характеристики — показаны полностью в правой колонке (2 пары в ряд). */
.lm-specs { display: grid; grid-template-columns: auto minmax(0,1fr) auto minmax(0,1fr); gap: 10px 26px; font-size: 15px; align-content: start; }
.lm-specs .k { color: var(--muted); white-space: nowrap; } .lm-specs .v { color: var(--ink); }
.lm-specs .v-amber { color: var(--amber-ink); }               /* город — нашим жёлтым */
.lm-specs .v-red { color: #ff5a5a; font-weight: 700; }     /* «Растаможен/Учёт: Нет» — красным */
/* Блок кредита */
.lm-credit { border-top: 1px solid rgba(var(--tint-rgb),0.1); padding-top: 12px; }
.lm-credit-title { font: 800 28px var(--font); color: var(--amber-ink); }   /* ×2 к характеристикам */
.lm-credit-nd { color: var(--ink); font-size: 15px; margin-left: 10px; }
.lm-credit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; margin-top: 10px; }
.lm-credit-col { display: flex; flex-direction: column; gap: 8px; }
.lm-cr-row { display: flex; gap: 10px; font-size: 15px; }
.lm-cr-row .k { color: var(--muted); white-space: nowrap; } .lm-cr-row .v { color: var(--ink); }
.lm-cr-row .v-amber { color: var(--amber-ink); }              /* суммы платежа/взноса — жёлтым */
.lm-credit-note { margin-top: 12px; color: var(--muted); font-size: 12.5px; font-style: italic; }
/* Строки в раскрывашках «Налог» и «Шины и диски» */
.lm-tw-row { display: flex; gap: 14px; font-size: 14px; padding: 3px 0; }
.lm-tw-row .k { color: var(--muted); white-space: nowrap; min-width: 170px; } .lm-tw-row .v { color: var(--ink); }
.lm-tw-row .v-amber { color: var(--amber-ink); }
.lm-tw-note { margin-top: 8px; color: var(--muted); font-size: 12px; font-style: italic; }
/* Налог: строка на код двигателя — «CODE — 2995 см³ (340 л.с.)» + сумма жёлтым */
.lm-tax-row { display: flex; gap: 16px; align-items: baseline; font-size: 14px; padding: 3px 0; }
.lm-tax-row .k { color: var(--muted); } .lm-tax-row .v-amber { color: var(--amber-ink); font-weight: 800; white-space: nowrap; }
/* Шины и диски: два блока (шины | диски), в каждом значения в 2 колонки — итого 4 */
.lm-tw-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 30px; }
.lm-tw-h { color: var(--amber-ink); font: 700 13px var(--font); margin-bottom: 6px; }
.lm-tw-list { column-count: 2; column-gap: 18px; }
.lm-tw-item { color: var(--ink); font-size: 14px; padding: 2px 0; break-inside: avoid; }
.lm-tw-item .lm-tw-radius { color: var(--amber-ink); font-weight: 700; }
/* Сверловка / Ступица / Крепёж — столбиком, 18px, значения жёлтым */
.lm-tw-extra { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.lm-tw-erow { display: flex; gap: 12px; align-items: baseline; font-size: 18px; font-style: normal; }
.lm-tw-erow .k { color: var(--muted); } .lm-tw-erow .v { color: var(--amber-ink); font-weight: 700; }
/* Раскрывашки: «Шины и диски», «Налог за 2026 год» (заглушки) */
.lm-extras { display: flex; flex-direction: column; }
.lm-foldrow { border-top: 1px solid rgba(var(--tint-rgb),0.1); }
/* Все строки-аккордеоны одной высоты: фиксируем line-height и min-height, чтобы вложенные
   подписи («следим с …») и красная точка не распирали строку — иначе блоки разной высоты. */
.lm-foldrow-head { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: 0; color: var(--ink); font: 700 15px/20px var(--font); cursor: pointer; padding: 11px 0; min-height: 42px; text-align: left; transition: color .15s; }
.lm-foldrow-head:hover { color: var(--amber-ink); }
.lm-tax-head-amounts { color: var(--amber-ink); white-space: nowrap; }
/* #5 «следим с …» рядом с «История изменений» — приглушённым, как подпись средней */
.lm-hist-since { font: 400 12px/20px var(--font); color: var(--muted); margin-left: 2px; }
.lm-foldrow-arrow { margin-left: auto; color: var(--amber-ink); transition: transform .2s; }
.lm-foldrow.open .lm-foldrow-arrow { transform: rotate(180deg); }
.lm-foldrow-body { display: none; padding: 0 0 11px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.lm-foldrow.open .lm-foldrow-body { display: block; }

/* История изменений: кнопка есть всегда, красный кружок — если есть непросмотренное. */
/* relative — чтобы подсказка про тариф вставала ПОД своей строкой, а не вверху карточки. */
.lm-history, .lm-fullhistory, .lm-newweek-wrap { position: relative; }
.lm-newweek-wrap { display: flex; align-items: center; flex-wrap: wrap; }
.lm-hist-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--alert-red); flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(229,53,43,.6); animation: newPulse 1.8s ease-out infinite; }
.lm-hist-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(var(--tint-rgb),0.06); }
.lm-hist-row:last-child { border-bottom: 0; }
.lm-hist-row.unread .lm-hist-title { font-weight: 800; color: var(--ink); }
.lm-hist-kind { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--muted); }
/* #7 цвета событий истории — без повторов */
.lm-hist-kind.price_drop { background: var(--band-green); }   /* подешевел — зелёный */
.lm-hist-kind.price_up { background: var(--band-red); }     /* подорожал — красный */
.lm-hist-kind.photos_added { background: #2aabee; } /* +фото — синий */
.lm-hist-kind.photos_removed { background: #f59e0b; } /* −фото — оранжевый */
.lm-hist-kind.archived { background: var(--muted); }     /* снято — серый */
.lm-hist-kind.reactivated { background: #14b8a6; }  /* снова в продаже — бирюзовый */
.lm-hist-kind.mileage { background: #a78bfa; }      /* пробег — фиолетовый */
.lm-hist-kind.city { background: #ec4899; }         /* город — розовый */
/* чип «−18% → −23%» к рынку в детали строки цены */
/* Чип отклонения к рынку — по 3-цветной шкале витрины (<−7 зелёный, >+7 красный, между жёлтый). Кликабелен. */
.lm-hist-band { font-weight: 700; cursor: help; }
.lm-hist-band.green { color: #7ee563; }
.lm-hist-band.yellow { color: #f5c518; }
.lm-hist-band.red { color: #ff6b6b; }
.lm-hist-text { flex: 1 1 auto; min-width: 0; }
.lm-hist-title { color: var(--ink); font-size: 14px; line-height: 1.35; }
.lm-hist-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.lm-hist-date { flex: 0 0 auto; color: var(--amber-ink); font: 400 15px var(--font); white-space: nowrap; }   /* #3 янтарный, шрифт как у значений полей */
.lm-hist-empty { color: var(--muted); font-size: 14px; padding: 6px 0; }
/* Подсказка для чужой карточки — зелёная, как тост сохранённого поиска. */
.lm-hist-hint { position: absolute; right: 0; top: 100%; z-index: 5; margin-top: -4px;
  background: var(--ok-green); color: var(--ink-strong); border-radius: 8px; padding: 8px 12px;
  font: 700 12.5px var(--font); box-shadow: 0 10px 28px rgba(var(--shadow-rgb),.5); }
.lm-hist-hint[hidden] { display: none; }
/* Строчная подсказка: в той же строке, сразу после текста, который нажали. */
.lm-hint-inline { position: static; display: inline-flex; align-items: center; margin: 0 0 0 10px;
  padding: 4px 10px; font-size: 12px; box-shadow: none; white-space: nowrap; vertical-align: middle; }

/* Полноэкранная галерея внутри окна карточки (крестик .lm-close z-index:3 остаётся сверху). */
.lm-fs { position: absolute; inset: 0; z-index: 2; background: var(--media-bg); border-radius: 16px; display: flex; flex-direction: column; padding: 18px; gap: 12px; }
.lm-fs[hidden] { display: none; }
.lm-fs-main { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; cursor: default; }
.lm-fs-img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: default; user-select: none; }
.lm-fs-thumbs { flex: 0 0 auto; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.lm-fs-thumbs img { width: 84px; height: 60px; object-fit: cover; border-radius: 6px; cursor: pointer; opacity: .5; border: 2px solid transparent; }
.lm-fs-thumbs img.on { opacity: 1; border-color: var(--amber); }

/* Карточка объявления на телефоне. На десктопе это две колонки (фото слева 42%, данные
   справа со своей прокруткой) — раскладка рассчитана на высокую панель. На низком экране
   (особенно лёжа) она сплющивалась, а overflow:hidden обрезал содержимое: получалась
   «плоская» карточка без прокрутки. Ставим в столбик: главное фото целиком сверху, под ним
   все данные, прокрутка — одна, у всего содержимого панели.
   Правила ОБЯЗАНЫ идти после всех .lm-*: специфичность равная, побеждает последний. */
@media not all and (hover: hover) and (pointer: fine) {
  /* overscroll-behavior: contain — прокрутка внутри карточки не «цепляет» страницу за ней
     (в паре с html/body.modal-open{overflow:hidden}). */
  .lm-body { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .lm-top { flex-direction: column; flex: 0 0 auto; min-height: 0; }
  .lm-gallery { flex: 0 0 auto; width: 100%; }
  /* Вариант A: фото на всю ширину со своими пропорциями (без обрезки, без рамки). */
  /* Стабильный портретный кадр: вертикальные фото — основной формат (заполняют),
     прямоугольные вписываются целиком с чёрными полосами сверху/снизу (не прыгают при листании). */
  .lm-main { flex: 0 0 auto; aspect-ratio: 3 / 4; min-height: 0; border-radius: 0; background: var(--bg); }
  .lm-main img { width: 100%; height: 100%; object-fit: contain; }
  .lm-photo-nav-hint::before { width: 11px; height: 11px; border-right-width: 2px; border-bottom-width: 2px; }
  .lm-photo-nav-hint.prev::before { transform: translateX(1px) rotate(135deg); }
  .lm-photo-nav-hint.next::before { transform: translateX(-1px) rotate(-45deg); }
  /* Данные больше не отдельный скроллер — иначе внутри короткой панели снова тесно.
     Свои боковые поля, т.к. у панели padding обнулён (фото — от края до края). */
  .lm-info { flex: 0 0 auto; overflow-y: visible; min-height: 0; padding: 14px 14px 0; }
  /* (3) Внутри карточки — ТОЛЬКО вертикальная прокрутка. Горизонтальную гасим у контейнеров,
     а характеристики (сетка 4-в-ряд) складываем в ОДНУ пару на строку, чтобы не вылезали вбок.
     Карусель фото не задета — у неё свой overflow. */
  .lm-panel, .lm-body, .lm-info, .lm-bottom { overflow-x: hidden; }
  .lm-specs { grid-template-columns: auto minmax(0, 1fr); }
  /* (1) Кредит: всё в один столбик, число — под подписью (в строку не влезает). */
  .lm-credit-cols { grid-template-columns: 1fr; }
  .lm-cr-row { flex-direction: column; gap: 2px; }
  /* (3) Шины и диски — каждый список в один столбик. */
  .lm-tw-list { column-count: 1; }

  /* Вариант A: карточка на весь экран, без жёлтой рамки. Фото от края до края,
     фон — чёрный как у страницы; топбар перекрываем (z-index выше 85). */
  .lm-overlay { z-index: 90; }
  .lm-panel { border: none; border-radius: 0; box-shadow: none; backdrop-filter: none;
    background: var(--panel-full); padding: 0; gap: 0; transform: none; }
  .lm-top, .lm-gallery { gap: 0; }
  .lm-bottom { padding-left: 14px; padding-right: 14px; }
  .lm-thumbs { padding: 8px 14px 0; }
  .lm-fs { border-radius: 0; padding: 0; }
  /* Крестик — в правом НИЖНЕМ углу БЛОКА ФОТО (там, где была иконка ⤢), янтарный, на тёмной
     подложке. JS кладёт его внутрь .lm-main (в карточке) и внутрь .lm-fs (в полноэкранном) —
     оба контейнера position:relative, поэтому absolute встаёт в их правый нижний угол. */
  .lm-close { position: fixed; left: auto; bottom: auto; right: 12px; top: calc(133.333vw - 52px); z-index: 5;
    width: 40px; height: 40px; display: grid; place-items: center;
    background: var(--amber); border-radius: 50%; color: var(--on-accent-pure); font-size: 22px; }
  /* В полноэкранном режиме ✕ живёт внутри фото-области (.lm-fs-main) — позиционируем в её углу. */
  .lm-fs-main .lm-close { position: absolute; top: auto; bottom: 12px; right: 12px; }
  /* Иконку «на весь экран» на мобиле убрали — фото и так открывается тапом. */
  .lm-expand { display: none; }
}

/* Кнопка «Очистить»: янтарная толстая иконка и текст без фона. */
.filters-reset { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0;
  cursor: pointer; color: var(--ink); font: 700 15px var(--font); padding: 2px 2px; margin-left: 0; }
.filters-reset svg { width: 20px; height: 20px; color: var(--amber-ink); stroke-width: 2.8; }
.filters-reset:hover { color: var(--amber-ink); }
/* Панель фильтров. */
.adv-panel { position: relative; z-index: 1; width: 100%; background: var(--panel); border: 2px solid var(--amber); border-radius: 14px; box-shadow: 0 20px 60px rgba(var(--shadow-rgb),0.55); backdrop-filter: blur(6px); padding: 18px; }
.adv-row { display: grid; gap: 14px 20px; }
.adv-row + .adv-row { margin-top: 14px; }
.adv-row--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.adv-row--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Объединённый блок «Растам. / Учёт» — два мини-дропдауна в одной колонке. */
.dual-labels { display: flex; gap: 8px; }
.dual-labels span { flex: 1 1 0; min-width: 0; font-size: 9.5px; color: var(--muted); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dual { display: flex; gap: 8px; }
.dual .dd { flex: 1 1 0; min-width: 0; }
.adv-field { display: flex; flex-direction: column; gap: 4px; }
.adv-field > label { font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.adv-stub { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 30px; border-bottom: 1px solid var(--line); color: var(--muted); font: 600 15px var(--font); cursor: pointer; }
.adv-stub .c { color: var(--muted); font-size: 11px; flex: 0 0 auto; }
.adv-field { position: relative; }

/* Инструменты под поиском: основная строка и постоянный ряд сортировок под ней. */
.tools-row { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.tools-main { display: flex; align-items: center; justify-content: center; gap: 26px; }
.tools-right { display: contents; }
.sort-row { display: flex; align-items: stretch; justify-content: center; gap: 10px; width: 100%; }
.sort-choice { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 9px 10px;
  border: 0; border-radius: 22px; background: var(--soft); color: var(--ink); cursor: pointer;
  font: 800 13px/1.15 var(--font); white-space: nowrap; box-shadow: 0 6px 18px rgba(var(--shadow-rgb),.3);
  transition: background .18s, color .18s, box-shadow .18s; }
.sort-choice--new { width: 120px; }
.sort-choice--price { width: 220px; }
.sort-choice--deal { width: 184px; }
.sort-choice--year { width: 140px; }
.sort-choice--mileage { width: 156px; }
.sort-choice:hover { background: rgba(var(--tint-rgb),.15); }
.sort-choice.is-selected:hover { background: var(--amber); box-shadow: 0 7px 20px rgba(var(--amber-rgb),.38); }
.sort-choice.is-selected { background: var(--amber); color: var(--on-amber); box-shadow: 0 6px 18px rgba(var(--amber-rgb),.3); }
.sort-choice:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
/* Префикс .tools-right обязателен: общий «.dd, .yr { flex:1 1 0 }» при равной
   специфичности побеждал (он ниже по файлу) и растягивал «Сайты» на всю свободную
   ширину — от этого инструменты и казались разбросанными. */
.tools-right .sites-dd { flex: 0 0 auto; width: auto; }
.sites-dd .menu { left: auto; right: 0; }
.sites-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; cursor: pointer; color: var(--ink); font: 700 15px var(--font); padding: 2px 2px; }
.sites-icon { flex: 0 0 auto; display: inline-flex; color: var(--amber-ink); }
.sites-btn .sites-count { color: var(--amber-ink); font-size: 12px; font-weight: 700; }
.sites-btn .sc { color: var(--muted); font-size: 11px; }
.sites-dd .menu { min-width: 190px; }
/* Архив — в стиле соседей по строке: иконка янтарём, текст как у «Сайты»/«Новые». */
.archive-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0;
  cursor: pointer; color: var(--ink); font: 700 15px var(--font); padding: 2px 2px; }
.archive-icon { flex: 0 0 auto; display: inline-flex; color: var(--amber-ink); }
.archive-btn .sc { color: var(--muted); font-size: 11px; }
/* Кнопка по содержимому: длинные значения («Активные + Архив 60
   дней») больше не режутся — контейнер растёт вместе с текстом. */
.tools-right .archive-dd { flex: 0 0 auto; width: auto; }
.archive-btn { width: 100%; }
.archive-dd .dd-val { flex: 1 1 auto; width: auto; min-width: 0; text-align: left; }
.archive-dd .menu { left: auto; right: 0; min-width: 250px; }
[data-dd="adv-engine"] .menu { min-width: 170px; }
/* Города и области живут в одном меню и переключаются на месте, поэтому ширина у него
   ФИКСИРОВАННАЯ. min-width тут не помогает: у .menu стоит width:max-content, и меню тянется
   по содержимому. Города доходят до 36 символов («Кабанбай батыра (Целиноградский р-н)») и
   упираются в потолок 320px, а самая длинная область — 19 («Карагандинская обл.»), около
   200px. Отсюда и прыжок при переключении. Берём ширину городов — она больше. */
[data-dd="city"] .menu { width: 320px; }

/* Объём двигателя (как цена). */
.adv-field .vol-menu, .adv-field .mil-menu, .adv-field .cr-menu, .adv-field .pd-menu { left: 0; min-width: 272px; max-width: 272px; }
/* Недоступное значение: видно, но выбрать нельзя; по тапу — подсказка. */
.menu-item.is-na { opacity: .38; cursor: not-allowed; }
.menu-item.is-na:hover { background: transparent; }
.dd-btn.is-disabled { cursor: not-allowed; }
/* Пузырь-подсказка живёт в body: меню обрезает overflow, внутри него подсказку не видно. */
.hint-bubble {
  position: fixed; z-index: 9999; display: none; max-width: 260px;
  background: var(--bg); color: var(--amber-ink); border: 1px solid var(--amber); border-radius: 8px;
  padding: 7px 9px; font: 500 11px/1.3 var(--font); box-shadow: 0 10px 30px rgba(var(--shadow-rgb),.7);
  pointer-events: none;
}
.hint-bubble.show { display: block; }
.cr-chk { flex: 0 0 auto; width: 14px; height: 14px; margin: 0 2px 0 0; accent-color: var(--amber); cursor: pointer; }
.cr-pair.is-off .pfx, .cr-pair.is-off .vol-in { opacity: .45; }
.cr-pair.is-off .price-caret { opacity: .45; cursor: default; }
.vol-pair .price-caret { align-self: center; }
.vpin { position: relative; flex: 1 1 0; min-width: 0; display: flex; }
.vol-in { flex: 1 1 0; min-width: 0; height: 24px; line-height: 24px; border: 0; background: transparent; color: var(--ink); font: 600 15px var(--font); outline: none; padding: 0 16px 0 0; text-align: center; }
.vol-in::placeholder { color: var(--muted); }
.sb-field { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-right: 1px solid var(--line); }
.sb-field:first-child { border-top-left-radius: 14px; border-bottom-left-radius: 14px; }
.sb-field--price { flex: 1.75 1 0; }
.sb-field label { font-size: 11px; letter-spacing: .02em; color: var(--muted); }

.sb-pair { display: flex; align-items: center; gap: 6px; min-height: 24px; }
.pfx, .yr-pre { color: var(--muted); font-size: 10.5px; flex: 0 0 auto; }
.pin { position: relative; flex: 1 1 0; min-width: 0; display: flex; }
.price-in { flex: 1 1 0; min-width: 0; height: 24px; line-height: 24px; border: 0; background: transparent; color: var(--ink); font: 600 15px var(--font); outline: none; padding: 0 16px 0 0; text-align: center; }
.price-in::placeholder { color: var(--muted); }

.dd, .yr { position: relative; flex: 1 1 0; min-width: 0; }
.dd-btn { width: 100%; height: 24px; display: flex; align-items: center; border: 0; background: transparent; cursor: pointer; padding: 0 18px 0 0; font: 600 15px var(--font); color: var(--ink); }
.dd-btn.is-disabled { color: var(--muted); cursor: default; }
.dd-val { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.dd-caret { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 11px; }
.dd-caret.hide { display: none; }

.yr-btn { width: 100%; height: 24px; border: 0; background: transparent; cursor: pointer; padding: 0 16px 0 0; display: flex; align-items: center; gap: 5px; }
.yr-val { flex: 1 1 0; text-align: center; color: var(--ink); font: 600 15px var(--font); }
.yr-val.empty { color: var(--muted); }

/* Optical baseline: search values sit slightly below their labels on desktop. */
@media (hover: hover) and (pointer: fine) {
  .search-bar > .sb-field .dd-val,
  .search-bar > .sb-field .yr-val,
  .search-bar > .sb-field .price-in { transform: translateY(3px); }
}

/* Крестик сброса. */
.clr { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: none; width: 18px; height: 18px;
  place-items: center; border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0; z-index: 2; }
.clr.show { display: grid; }
.clr:hover { color: var(--amber-ink); }

.menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; min-width: 100%; width: max-content; max-width: 320px;
  max-height: 330px; overflow-y: auto; overflow-x: hidden; background: var(--soft); border-radius: 10px; padding: 5px;
  box-shadow: 0 18px 44px rgba(var(--shadow-rgb),0.55); scrollbar-width: none; -ms-overflow-style: none; }
.menu::-webkit-scrollbar { display: none; width: 0; height: 0; }
.menu-scroll-thumb { position: absolute; top: 0; right: 3px; z-index: 5; width: 5px; min-height: 28px;
  border-radius: 999px; background: var(--scroll); box-shadow: 0 0 0 1px rgba(var(--bg-rgb),.12);
  pointer-events: none; will-change: transform; }
.menu-item { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--on-soft); font: 600 14px/1 var(--font); padding: 9px 11px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-item:hover { background: rgba(var(--bg-rgb),0.18); }
.menu-item.is-selected { background: var(--amber); color: var(--on-amber); }
[data-dd="model"] .menu-item.model-family-parent { font-weight: 850; }
[data-dd="model"] .menu-item.model-family-child { position: relative; padding-left: 31px; }
[data-dd="model"] .menu-item.model-family-child::before { content: ""; position: absolute; left: 15px; top: 50%;
  width: 8px; height: 1px; background: currentColor; opacity: .48; transform: translateY(-50%); }
.dd[data-dd="adv-gen"] .menu { width: 832px; max-width: min(832px, calc(100vw - 24px)); max-height: 414px; }
.generation-menu-item { display: flex; align-items: center; gap: 18px; min-width: 100%; min-height: 202px; padding: 6px 9px; white-space: normal; }
.generation-menu-photo { flex: 0 0 313px; width: 313px; height: 190px; object-fit: cover; border-radius: 7px; background: transparent; }
.generation-menu-copy { display: flex; flex-direction: column; min-width: 0; gap: 8px; }
.generation-menu-label { min-width: 0; line-height: 1.25; }
.generation-menu-price { color: var(--amber-ink); font: 800 15px/1.2 var(--font); white-space: normal; }
.menu-sep { height: 1px; background: var(--bg); margin: 5px 6px; }
/* Переключатель «город/область» в списке городов. Это не значение, а режим, поэтому он
   подчёркнуто не похож на пункт: рамка, стрелки и центр вместо левого края. */
.menu-mode { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  border: 1px dashed rgba(var(--soft-tint-rgb),.45); background: rgba(var(--soft-tint-rgb),.06); color: var(--on-soft);
  font: 700 13px/1 var(--font); padding: 9px 11px; border-radius: 6px; cursor: pointer; }
.menu-mode:hover { background: rgba(var(--bg-rgb),.16); }
.menu-mode .mm-ico { font-size: 12px; opacity: .75; }
.price-caret { flex: 0 0 auto; align-self: center; border: 0; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; padding: 0 0 0 6px; }
.price-menu { left: 14px; min-width: 272px; }
.price-item { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.price-item .pi-l { text-align: right; }
.price-item .pi-r { text-align: left; }
.price-item .pi-d { color: var(--muted); }

/* #2 счётчик «сколько найдём» — ВНУТРИ кнопки, под словом «Поиск»: чёрная плашка, янтарные цифры.
   Абсолютом внизу кнопки, чтобы «Поиск» оставался по центру и не прыгал. */
.sb-count { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 19px;
  padding: 3px 12px 1px; background: var(--on-accent); border-radius: 999px;
  color: var(--amber-ink); font: 800 13px/1 var(--font); pointer-events: none; }
.sb-count.empty { visibility: hidden; }
.sb-go { position: relative; flex: 0 0 auto; border: 0; cursor: pointer; background: var(--amber); color: var(--on-accent); font: 800 17px/1 var(--font);
  letter-spacing: .02em; padding: 0 clamp(20px,2.4vw,34px); border-top-right-radius: 14px; border-bottom-right-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 72px; }
.sb-go:hover { filter: brightness(1.06); }

/* Selected search values use the same green on desktop and touch layouts. */
.dd:has(> .clr.show) > .dd-btn .dd-val,
.yr:has(> .clr.show) > .yr-btn .yr-val,
.price-in:not(:placeholder-shown),
.vol-in:not(:placeholder-shown),
.archive-dd[data-value]:not([data-value=""]) .dd-val,
.sites-dd:has(.sites-count:not(:empty)) .sites-btn > span[data-i18n] { color: var(--green-ink); }

/* Search filter labels use the same amber on desktop and touch layouts. */
.sb-field label,
.dual-labels span,
.adv-field > label { color: var(--amber-ink); }

/* On desktop the value sits a little lower under its label. */
@media (hover: hover) and (pointer: fine) {
  .search-bar > .sb-field { gap: 5px; }
}

@media (max-width: 860px) {
  .search-bar { flex-wrap: wrap; top: calc(var(--topbar-h) + 90px); }
  .sb-field { flex: 1 1 45%; border-bottom: 1px solid var(--line); }
  .sb-go { flex: 1 1 100%; padding: 14px; justify-content: center; border-radius: 0 0 14px 14px; }
}
@media (max-width: 720px) {
  .tariff-panel { width: min(480px, 94vw); padding: 20px 16px; }
  .tariff-grid { grid-template-columns: 1fr; }
  .acct-panel { width: min(440px, 92vw); }
  .acct-scroll { display: block; }
}
@media (max-width: 480px) {
  :root { --topbar-h: 52px; }
  .topbar { height: var(--topbar-h); padding-inline: 8px; gap: 8px; }
  .user-box { min-width: 0; margin-right: 0; gap: 8px; }
  .user-name { max-width: 105px; }
  .user-name .un-name, .user-name .un-sub { max-width: 105px; }
  .btn-logout { padding-inline: 9px; }
  .theme-toggle { margin-right: 0; }
  .cab-nav-grid { gap: 8px; }
  .cab-nav-card { min-height: 56px; padding: 10px; }
  .acct-row { gap: 8px; padding-inline: 10px; }
  .acct-provider { gap: 8px; }
  .acct-off { display: none; }
  .acct-link-btn { padding-inline: 10px; }
  .about-service-link { right: 8px; bottom: 8px; min-height: 32px; padding: 6px 9px; }
}

/* ===== Мобильная вёрстка (телефон/планшет) =====
   Стоит ПОСЛЕДНИМ в стилях: media-запрос не повышает специфичность, поэтому переопределения
   должны идти позже базовых правил по порядку источника. Ловим по типу указателя — у десктопа
   hover + тонкий указатель, значит этот блок на десктопе НЕ применяется НИКОГДА. */
@media not all and (hover: hover) and (pointer: fine) {
  /* Страница в обычном потоке и прокручивается, а не «один экран». */
  /* Один прокручиваемый контекст браузера: overflow:auto на body делал body отдельным
     предком прокрутки и не позволял сортировке прилипать к верхней панели. */
  html, body { height: auto; overflow: visible; }
  /* padding-top на высоту фикс. топбара: иначе логотип/счётчик прячутся под ним. */
  .hero { height: auto; min-height: 100vh; overflow: visible;
    padding-top: var(--topbar-h); padding-bottom: 28px; }
  /* Фон-подложка держим на первый экран, дальше — чёрное поле под карточками.
     z-index уводит её ПОД контент: на мобиле контент статичный (без z-index), и без этого
     fixed-картинка красилась бы поверх кнопок и перехватывала касания. */
  .hero-bg { position: fixed; top: 0; height: 100svh; z-index: -2; }
  .hero::after { position: fixed; top: 0; height: 100svh; z-index: -1; }

  /* ── Верхняя строка: имя, выход, тема и язык ── */
  :root { --topbar-h: 52px; }
  .topbar { display: flex; justify-content: flex-end; gap: 8px; padding: 6px 8px; height: var(--topbar-h); }
  /* Соцсети на телефоне не помещаются рядом с элементами кабинета. */
  .social { display: none; }
  .vehicle-search-mode { display: none; }
  .theme-toggle { margin-right: 0; }
  /* (2) Язык — одна жёлтая иконка (видна только активная), тап меняет по кругу (JS). */
  .lang button { display: none; }
  .lang button.is-active { display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; padding: 8px 10px; font-weight: 800; color: var(--on-accent); background: var(--amber);
    border: 0; border-radius: 9px; }
  .user-box { gap: 8px; margin: 0; }

  /* Абсолютные элементы десктопа возвращаем в поток и центрируем сверху вниз. */
  /* (3) Логотип и «Autorama» — шрифт −35%. (5) Отступы сжаты, чтобы поднять витрину. */
  .logo { position: static; display: flex; transform: none; left: auto; top: auto;
    justify-content: center; gap: 10px; margin: 14px auto 0; }
  .logo-mark { width: 39px; height: 39px; font-size: 25px; border-radius: 11px; }
  .logo-1, .logo-2 { font-size: 29px; }
  .logo-2 { padding: 5px 11px 6px; border-radius: 9px; margin-left: -5px; }
  .home-title { position: static; transform: none; margin: 5px auto 0; font-size: 12px; }
  /* (4) Счётчик активных объявлений — −30%. */
  .counter { position: static; text-align: center; margin: 8px auto 0; }
  .counter__num { font-size: 18px; }
  .counter__label { font-size: 8.5px; }
  .search-wrap { position: static; transform: none; left: auto; top: auto;
    width: 94vw; margin: 12px auto 0; }

  /* Порядок полей поиска: марка/модель · год/город · цена (во всю ширину). */
  .search-bar > :nth-child(1) { order: 1; }   /* марка */
  .search-bar > :nth-child(2) { order: 2; }   /* модель */
  .search-bar > :nth-child(3) { order: 3; }   /* год */
  .search-bar > :nth-child(5) { order: 4; }   /* город */
  .search-bar > :nth-child(4) { order: 5; }   /* цена */
  .search-bar > .sb-go { order: 6; }
  .search-bar > .sb-field--price { flex: 1 1 100%; }

  /* (4) «Поиск» стоит по центру; число — СПРАВА от него (не двигает надпись), без чёрного овала. */
  .sb-count { position: absolute; left: auto; right: 16px; top: 50%; bottom: auto;
    transform: translateY(-50%); padding: 0; background: transparent;
    color: var(--on-accent); font: 800 15px/1.2 var(--font); }
  .sb-count.empty { display: none; }

  /* (5) Панель инструментов и постоянная сетка сортировок. */
  /* Сайты/архив лежат выше основной формы, а меню года/цены — выше раскрытой панели. */
  .tools-row { gap: 10px; z-index: 8; }
  .hero.msearch-open .search-bar { z-index: 7; }
  .tools-main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center;
    width: 100%; gap: 0; }
  .tools-right { display: contents; }
  .filters-reset { margin-left: 0; }
  .tools-main > .filters-reset { justify-self: start; }
  .tools-right .sites-dd { justify-self: center; }
  .tools-right .archive-dd { justify-self: end; }
  .sites-dd .menu { left: 50%; right: auto; transform: translateX(-50%); }
  .sb-field label { font: 600 15px var(--font); letter-spacing: 0; }
  .search-bar .dd-btn, .search-bar .dd-val, .search-bar .yr-val, .search-bar .price-in { font-size: 17px; }
  .filters-reset > span[data-i18n],
  .sites-btn > span[data-i18n] { display: inline; }
  .filters-reset, .sites-btn, .archive-btn { gap: 6px; font-size: 12px; white-space: nowrap; }
  .filters-reset svg { width: 18px; height: 18px; }
  .sites-icon svg { width: 20px; height: 20px; }
  .archive-icon svg { width: 19px; height: 19px; }
  .sort-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* На случайной стартовой витрине сортировки нет — она появляется после запуска поиска. */
  .hero:not(.has-search-results) .search-wrap > .sort-row { display: none; }
  .search-wrap > .sort-row--sticky { position: sticky; top: calc(var(--topbar-h) + 6px); z-index: 2;
    padding: 7px 0; background: rgba(var(--bg-rgb),.93); backdrop-filter: blur(10px);
    box-shadow: 0 8px 18px rgba(var(--shadow-rgb),.32); }
  .sort-choice, .sort-choice--new, .sort-choice--price, .sort-choice--deal, .sort-choice--year, .sort-choice--mileage {
    width: auto; min-height: 34px; padding: 7px 6px; font-size: 11px; white-space: normal; }
  .sort-row .sort-choice--new { grid-column: 1 / -1; justify-self: stretch; width: 100%; }

  /* Цифровая панель цены: два ряда по пять клавиш, закреплена у нижнего края пресетов. */
  /* Меню цены растянуто симметрично: его правый отступ от экрана равен левому. */
  .sb-field--price .price-menu { left: 0; width: 94vw; min-width: 0;
    max-width: 94vw; height: 274px; max-height: 274px; }
  .price-menu.is-switching-side { animation: priceMenuSideSwitch .26s ease-out; }
  .pin.is-price-active .price-in::placeholder { color: transparent; }
  .pin.is-price-active:has(.price-in:placeholder-shown)::after { content: ""; position: absolute;
    left: 50%; top: 4px; width: 2px; height: 16px; border-radius: 2px; background: var(--amber);
    transform: translateX(-50%); pointer-events: none; animation: priceBoundaryCaret .72s steps(1) infinite; }
  @keyframes priceMenuSideSwitch { 0%, 100% { opacity: 1; } 45% { opacity: .32; } }
  @keyframes priceBoundaryCaret { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
  .search-bar [data-dd="city"] .menu { left: calc(-100% - 28px); right: auto; transform: none;
    width: calc(94vw - 28px); max-width: calc(94vw - 28px); }
  .hint-bubble { max-width: calc(100vw - 16px); padding: 10px 14px;
    font: 500 13.2px/1.3 var(--font); border-radius: 12px; }
  .mobile-price-keypad { position: sticky; left: 0; right: 0; bottom: -5px; z-index: 2;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 5px; row-gap: 8px;
    margin: 5px -5px -5px; padding: 8px 6px 7px; background: var(--soft);
    border-top: 1px solid rgba(var(--bg-rgb),.32); }
  .mobile-price-key { min-width: 0; min-height: 38px; padding: 0; border: 1px solid var(--on-accent-pure);
    border-radius: 8px; background: var(--amber); color: var(--on-accent-pure);
    font: 800 18px/1 var(--font); cursor: pointer; }
  .mobile-price-key:active { filter: brightness(.88); }
  .mobile-price-key--action { font-size: 20px; }
  .mobile-price-key--backspace { background: #c75b5b; color: #07090c; font-size: 16px; }
  .mobile-price-key--accept { background: #59a66b; color: #07090c; }

  /* Расш. фильтры в 2 колонки; порядок полей задаёт JS (перестановка в DOM),
     спец-поля (выгоднее/растам-учёт/кредит) — во всю ширину через класс. */
  /* :not([hidden]) — иначе display:flex перебивал атрибут hidden и панель не сворачивалась. */
  .adv-panel:not([hidden]) { display: flex; flex-wrap: wrap; gap: 12px; }
  .adv-row { display: contents; }
  .adv-field { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .adv-field.adv-wide { flex-basis: 100%; }

  /* (2) Меняем местами шрифты: название фильтра — крупным, его значение — мелким. */
  .adv-field label { font: 600 15px var(--font); letter-spacing: 0; }
  .dual-labels span { font: 600 15px var(--font); letter-spacing: 0; }
  .adv-field .dd-btn, .adv-field .vol-in { font-size: 17px; }
  .adv-field .dd-val { font-size: 17px; color: var(--muted); }

  /* Фактическая страховка скорости поверх базовых 3.6 с, даже если браузер неверно
     определил тип указателя в момент создания SVG. */
  .save-search .edge-run rect { animation-duration: 3.6s !important; }

  /* Поколения на телефоне: меню симметрично относительно экрана, фото над подписью.
     94vw — ширина поискового блока, 40px — внутренние поля панели с рамкой. */
  .dd[data-dd="adv-gen"] .menu { left: 0; right: auto; width: calc(94vw - 40px);
    max-width: calc(94vw - 40px); max-height: min(74vh, 490px); padding: 6px; }
  .generation-menu-item { display: flex; flex-direction: column; align-items: stretch; gap: 7px;
    min-height: 0; padding: 6px; }
  .generation-menu-photo { display: block; flex: none; width: 100%; height: auto; aspect-ratio: 16 / 9;
    object-fit: cover; object-position: center; border-radius: 7px; }
  .generation-menu-label { display: block; width: 100%; min-height: 32px; padding: 0 3px 4px;
    font-size: 13px; line-height: 1.25; white-space: normal; }
  .generation-menu-copy { width: 100%; gap: 3px; }
  .generation-menu-price { display: block; width: 100%; padding: 0 3px 4px; font-size: 14px; }

  /* (5) На тач-обложках иконки избранного и весов видны всегда (hover нет). */
  .card__fav, .card__cmp { opacity: 1; }

  /* (4)/(1) «Сохранить поиск» — фиксированная панель ВНИЗУ экрана, всегда видна при выдаче.
     Кнопка по центру; «?» — абсолютом справа, вне центрирования. Панель — ребёнок .pager,
     поэтому на рандом-витрине (pager скрыт) её нет, а при поиске всплывает снизу. */
  .pager { flex-direction: column; height: auto; gap: 12px; padding: 4px 0; }
  .save-wrap { position: fixed; left: 0; right: 0; bottom: 0; top: auto; transform: none; width: 100%;
    justify-content: center; z-index: 45; padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(var(--veil-2-rgb),.97) 62%, rgba(var(--veil-2-rgb),0)); }
  .save-help { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }

  /* (3) Форму поиска и панели сворачиваем за кнопку «Найти авто».
     ВАЖНО: сам .search-wrap НЕ прячем — внутри него лежит .cards-wrap (витрина), иначе она
     исчезнет вместе с ним. Прячем только форму (.search-bar), tools-row и adv-panel. */
  .msearch { display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 94vw; margin: 12px auto 0; padding: 14px; border: 0; border-radius: 14px;
    background: var(--amber); color: var(--on-accent); font: 800 18px var(--font); cursor: pointer;
    box-shadow: 0 12px 32px rgba(var(--shadow-rgb),0.5);
    transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
  /* Открытый поиск обозначаем серой кнопкой; она остаётся активной и по повторному тапу
     сворачивает меню. */
  .hero.msearch-open > .msearch { background: var(--soft); color: var(--ink);
    box-shadow: 0 8px 22px rgba(var(--shadow-rgb),.38); }
  .search-bar, .tools-row { display: none; }
  /* Сбрасываем относительный сдвиг из старого брейкпоинта max-width:860 (top: topbar+90):
     он создавал провал и наложение блоков внутри search-wrap. */
  .search-bar { top: 0; }
  .hero.msearch-open .search-bar { display: flex; }
  .hero.msearch-open .tools-row { display: flex; }
  /* На мобильном «Поиск» вынесен JS из общей рамки и стоит после раскрытой панели фильтров. */
  .search-wrap > .sb-go--mobile { display: none; flex: none; width: 100%; min-height: 48px;
    padding: 14px; border-radius: 14px; box-shadow: 0 8px 22px rgba(var(--amber-rgb),.3); }
  .hero.msearch-open .search-wrap > .sb-go--mobile { display: inline-flex; }
  /* Пока человек набирает фильтры, «Поиск» остаётся под рукой. После запуска класс
     снимается и кнопка возвращается на своё обычное место в форме. */
  .hero.mobile-search-pending.msearch-open .search-wrap > .sb-go--mobile {
    position: fixed; left: 3vw; right: 3vw; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 47; width: 94vw; margin: 0; }
  /* Меню цены привязано к своему полю: симметричные боковые отступы, пять пресетов
     и оба ряда цифровой клавиатуры остаются доступными. */
  .hero.mobile-search-pending .sb-field--price .price-menu {
    position: absolute; top: calc(100% + 10px); bottom: auto;
    left: 0; right: auto; z-index: 48; width: 94vw; max-width: 94vw; }
  .hero.mobile-search-pending .save-wrap { display: none; }
  .hero.mobile-search-pending { min-height: calc(100vh + 220px); min-height: calc(100dvh + 220px); }
  .hero.mobile-search-pending .search-wrap { margin-top: 12px;
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  /* Пока настраиваются фильтры, карточки и нижние ссылки скрыты, но верхушка поиска
     остаётся на странице; после тапа она просто прокручивается выше видимой области. */
  .hero.mobile-search-pending .cards-wrap,
  .hero.mobile-search-pending .hero-bottom-links { display: none; }
  /* Основные и расширенные меню находятся выше отдельного sticky-блока сортировки. */
  .hero.msearch-open .adv-panel { z-index: 3; }
  .hero:not(.msearch-open) .search-wrap > .sort-row { display: none; }
  /* Пока поиск свёрнут — прячем и расширенные фильтры (у них своя кнопка внутри). */
  .hero:not(.msearch-open) .adv-panel { display: none; }

  /* (4) Обложки: 2 в ширину, натуральная высота, прокрутка страницей.
     width:100% обязателен: у статичного flex-контейнера в этом потоке ширина схлопывалась
     в 0 (а с ней сетка и карточки). */
  .cards-wrap { position: static; width: 100%; height: auto !important; overflow: visible; margin-top: 12px; padding-bottom: 76px; }
  .cards-scroll { width: 100%; height: auto !important; overflow: visible; }
  .cards-grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Кнопку «О сервисе» — в поток под карточки (не поверх), по центру. */
  .about-service-link { position: static; display: flex; width: max-content;
    right: auto; bottom: auto; transform: none; margin: 22px auto 6px; }
  /* Внизу главной кнопки в ряд (на мобиле страница скроллится). */
  /* Нижний отступ = высота фикс-панели «Сохранить поиск» (bottom:0). */
  .hero-bottom-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
    margin: 22px auto calc(84px + env(safe-area-inset-bottom, 0px)); }
  .about-service-link { position: static; left: auto; right: auto; bottom: auto;
    transform: none; margin: 0; }

  /* Выбор города. На десктопе сетка 5 в ряд по самому длинному названию; на телефоне те же
     пять колонок сжимались до ширины буквы, и от «Усть-Каменогорска» на плитке оставалось
     «У…». Три колонки — минимум, при котором помещается настоящее название. */
  /* Рамку не трогаем — янтарный кант по кругу и скругления остаются от базового правила.
     Место под три колонки добираем не бортами панели, а полями подложки. */
  .city-overlay { padding: 12px; }
  .city-panel { width: 100%; max-width: 100%;
    padding: 18px 12px calc(18px + env(safe-area-inset-bottom)); }
  .city-title { font-size: 18px; }
  .city-sub { font-size: 12.5px; }
  .city-search { margin: 12px 0 4px; padding: 12px 14px; font-size: 15px; }
  .city-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; height: auto;
    max-height: 52vh; }
  .city-chip { padding: 10px 6px; font-size: 14px; border-radius: 0; }
  /* Пятнадцати плиток (3×5) хватает: это города, где рынок вообще есть. Остальные полторы
     сотни ищутся строкой выше — вываливать их на телефон значило бы дать экран мелкой
     крошки. Прячем ТОЛЬКО дефолтный список: у результатов поиска класса нет, и они
     показываются полностью. */
  .city-grid.is-defaults .city-chip:nth-child(n+16) { display: none; }
}
/* ==== Нижний экран «Лента» ====================================================
   Поднимается слоем ПОВЕРХ главного, а не двигает его. Причина техническая и важная:
   верхняя панель лежит внутри главного экрана и держится на position: fixed, а transform
   у предка отменяет fixed у потомков — панель уехала бы вместе с экраном. Слоем она
   остаётся на месте и работает на обоих экранах.

   Обычная прокрутка сюда не приводит: html и body с overflow: hidden, и попасть можно
   только кнопкой. Прокручивается ТОЛЬКО содержимое нижнего экрана, когда блоков станет
   больше одного. */
.deck { position: fixed; inset: 0; z-index: 40; background: var(--bg);
  transform: translateY(100%); visibility: hidden;
  transition: transform .48s cubic-bezier(.22,.61,.36,1), visibility 0s linear .48s; }
.deck.open { transform: none; visibility: visible; transition-delay: 0s, 0s; }
.deck-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .9; }
/* Вуаль поверх фотографии. Плотность подбиралась глазами: с первой попытки (0.72-0.88 поверх
   приглушённой картинки) склад пропадал совсем и экран читался просто чёрным — а он тут
   ради атмосферы и стоит. Сверху легче, книзу плотнее: заголовок лежит прямо на фоне,
   а карточки внизу и без того на своей подложке. */
.deck::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--scrim-rgb),.34), rgba(var(--scrim-rgb),.62)); }
.deck-inner { position: relative; z-index: 1; height: 100%; overflow-y: auto;
  overscroll-behavior: contain; padding: calc(var(--topbar-h) + 18px) clamp(12px,3vw,28px) 28px; }
.deck-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.deck-up { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 12px;
  border: 1px solid rgba(var(--amber-rgb),.48); border-radius: 8px;
  background: rgba(var(--bg-rgb),.55); color: var(--ink); font: 700 12px/1 var(--font);
  cursor: pointer; transition: border-color .16s, color .16s; }
.deck-up:hover { color: var(--band-yellow-ink); border-color: var(--amber); }
.deck-up svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }

/* Кнопки ленты внизу главной. */
.hero-bottom-left { position: absolute; z-index: 18; left: clamp(12px, 2.2vw, 28px);
  bottom: 42px; display: flex; align-items: center; gap: 10px; }
.hits-link { display: inline-flex; align-items: center; gap: 7px; min-height: 34px;
  padding: 7px 12px; border: 1px solid rgba(var(--amber-rgb),.48); border-radius: 8px;
  background: rgba(var(--surface-deep-rgb),.82); color: var(--ink);
  font: 700 12px/1 var(--font); cursor: pointer; backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb),.34);
  transition: border-color .16s, color .16s, transform .16s; }
.hits-link:hover { color: var(--band-yellow-ink); border-color: var(--amber);
  transform: translateY(-1px); }
.hits-flame { font-size: 14px; line-height: 1; }

/* Кому движение мешает — показываем без поездки. Настройка системная, спрашивать незачем. */
@media (prefers-reduced-motion: reduce) {
  .deck { transition: none; }
}

@media (max-width: 900px) {
  .deck-inner { padding-top: calc(var(--topbar-h) + 12px); }
}

/* Группа растворяется ТОЛЬКО на сенсорных устройствах — тем же условием, каким включается
   вся остальная мобильная раскладка. Сначала я поставил здесь ширину, и узкое окно на
   десктопе разъехалось: правила потока не включались (они по «сенсорности»), а группа уже
   растворилась — обе кнопки улетали в начало страницы, под верхнюю панель. Условие у
   связанных правил должно быть одно, иначе они расходятся ровно в зазоре между ними. */
@media not all and (hover: hover) and (pointer: fine) {
  .hero-bottom-left { position: static; display: contents; }
}

/* Нижний экран в светлой теме. Фотография склада тёмная по смыслу, и менять картинку я не
   хочу — но чёрная вуаль поверх неё сделала бы «светлую» тему тёмной, а это ровно та
   претензия, из-за которой мы переделывали карточки в мобилке.
   Решение то же, что для медиа-островков: фотография остаётся ФАКТУРОЙ (сильно приглушена),
   а вуаль берёт цвет фона темы. Текст и карточки при этом остаются на своих токенах. */
:root[data-theme="light"] .deck-bg { opacity: .14; }
:root[data-theme="light"] .deck::after {
  background: linear-gradient(180deg, rgba(var(--bg-rgb),.86), rgba(var(--bg-rgb),.94)); }
:root[data-theme="light"] .deck-up { background: rgba(255,255,255,.78); }

/* Кнопка «Топ недели» — рядом с «Хитами дня». Ведёт на тот же нижний экран, но сразу
   к недельному блоку: он лежит под хитами, и без этого его бы не нашли. */
.week-link { display: inline-flex; align-items: center; gap: 7px; min-height: 34px;
  padding: 7px 12px; border: 1px solid rgba(var(--amber-rgb),.48); border-radius: 8px;
  background: rgba(var(--surface-deep-rgb),.82); color: var(--ink);
  font: 700 12px/1 var(--font); cursor: pointer; backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb),.34);
  transition: border-color .16s, color .16s, transform .16s; }
.week-link:hover { color: var(--band-yellow-ink); border-color: var(--amber);
  transform: translateY(-1px); }
.week-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Единый крестик веб-интерфейса: тонкие диагонали как у закрытия гаража.
   Размер кнопки и её положение могут отличаться, сам знак всегда одинаков. */
:is(.acct-close, .tariff-close, .auth-close, .list-close, .lm-close,
    .tariff-selection-close, .garage-journal-close,
    .lst-del, .cmp-del, .garage-photo-remove,
    .garage-photo-viewer-close, .clr) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}
:is(.acct-close, .tariff-close, .auth-close, .list-close, .lm-close,
    .tariff-selection-close, .garage-journal-close,
    .lst-del, .cmp-del, .garage-photo-remove,
    .garage-photo-viewer-close, .clr):is(:hover, :focus-visible) {
  color: var(--ink);
}
:is(.acct-close, .tariff-close, .auth-close, .list-close, .lm-close,
    .tariff-selection-close, .garage-journal-close,
    .lst-del, .cmp-del, .garage-photo-remove,
    .garage-photo-viewer-close, .clr)::before,
:is(.acct-close, .tariff-close, .auth-close, .list-close, .lm-close,
    .tariff-selection-close, .garage-journal-close,
    .lst-del, .cmp-del, .garage-photo-remove,
    .garage-photo-viewer-close, .clr)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--cross-length, 16px);
  height: var(--cross-thickness, 1.5px);
  border-radius: 1px;
  background: currentColor;
}
:is(.acct-close, .tariff-close, .auth-close, .list-close, .lm-close,
    .tariff-selection-close, .garage-journal-close,
    .lst-del, .cmp-del, .garage-photo-remove,
    .garage-photo-viewer-close, .clr)::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
:is(.acct-close, .tariff-close, .auth-close, .list-close, .lm-close,
    .tariff-selection-close, .garage-journal-close,
    .lst-del, .cmp-del, .garage-photo-remove,
    .garage-photo-viewer-close, .clr)::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
:is(.acct-close, .tariff-close, .auth-close, .list-close, .lm-close,
    .tariff-selection-close, .garage-journal-close) {
  --cross-length: 28.8px;
  --cross-thickness: 2.7px;
}
:is(.acct-close, .tariff-close, .auth-close, .list-close, .lm-close,
    .tariff-selection-close, .garage-journal-close) { width: 24px; height: 24px; }
.garage-journal-close { position: relative; flex: none; }
.garage-photo-remove { color: var(--amber-ink); }
.garage-photo-remove:is(:hover, :focus-visible) { color: var(--ink); }
.lst-del, .cmp-del { color: var(--ink-strong); }
.lst-del::before, .lst-del::after, .cmp-del::before, .cmp-del::after {
  box-shadow: 0 1px 2px rgba(var(--scrim-rgb), .9);
}

/* На сенсорной мобильной вёрстке видимый знак закрытия вдвое меньше веб-версии.
   Область кнопки не уменьшаем: так крестик остаётся удобной целью для касания. */
@media not all and (hover: hover) and (pointer: fine) {
  :is(.acct-close, .tariff-close, .auth-close, .list-close, .lm-close,
      .tariff-selection-close, .garage-journal-close) {
    --cross-length: 14.4px;
    --cross-thickness: 1.35px;
  }
}