: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); }
/* Верхняя строка: сохранённые поиски / избранное / вход (пока заглушки). */
.topnav { display: inline-flex; align-items: center; gap: 20px; margin-right: auto; margin-left: 2px; }
.topnav-link { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 0; cursor: pointer;
  color: var(--ink); font: 700 13px var(--font); padding: 6px 2px; transition: color .15s; }
.topnav-link:hover { color: var(--band-yellow-ink); }
.topnav-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* Счётчик: сколько сохранено / в избранном. Прячется, если пусто или не авторизован. */
.topnav-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; background: var(--band-yellow); color: var(--on-accent); font: 800 11px/1 var(--font); }
.topnav-count[hidden] { display: none; }
/* Красная точка без цифры: сигнал «внутри есть что-то новое». Сколько именно и где —
   человек увидит внутри, на самой машине или на самом поиске. */
.topnav-new { display: inline-block; 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; }
.topnav-new[hidden] { display: none; }
@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); }
}
@media (prefers-reduced-motion: reduce) { .topnav-new { animation: none; } }
.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: 16px; }
.user-tariff { display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 112px; padding: 2px 10px 2px 0; border: 0; border-right: 1px solid rgba(var(--tint-rgb),.16);
  background: transparent; color: inherit; line-height: 1.15; text-align: center; cursor: pointer; }
.user-tariff .ut-head { color: var(--soft-ink); font: 600 10px var(--font); white-space: nowrap; }
.user-tariff .ut-plan { color: var(--ink); font: 800 12px var(--font); white-space: nowrap; }
.user-tariff:hover .ut-head { color: var(--muted); }
.user-tariff:hover .ut-plan { color: var(--band-yellow-ink); }
/* Имя — кнопка: открывает профиль со способами входа. Под именем — активный вход. */
.user-name { 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 { 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-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: 6px 9px; border-radius: 7px; cursor: pointer; }
.lang button.is-active { color: var(--on-accent); background: var(--amber); }

/* Баннер акции: три строки, цикл 9 секунд. Ширина фиксированная — иначе строки разной
   длины дёргали бы рамку на каждой смене состояния. */
.promo-banner { position: absolute; z-index: 12; top: calc(var(--topbar-h) + 8px);
  right: clamp(178px, 13.5vw, 246px); width: 208px; padding: 10px 14px 11px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: rgba(var(--veil-rgb),0.72); border: 1px solid rgba(var(--amber-rgb),.42);
  border-radius: 12px; cursor: pointer; overflow: hidden; text-align: center;
  backdrop-filter: blur(3px); transition: border-color .2s, transform .2s; }
/* Без этого атрибут hidden не работает: любой display в правилах выше его перебивает,
   и баннер показывался бы даже тем, кто код уже применил. */
.promo-banner[hidden] { display: none; }
.promo-banner:hover { border-color: var(--amber); transform: translateY(-1px); }
.promo-banner .pb-l1 { font: 600 11.5px var(--font); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); animation: pbL1 9s ease-in-out infinite; }
.promo-banner .pb-code { font: 900 27px/1.05 var(--font); letter-spacing: .06em; color: var(--amber-ink);
  animation: pbCode 9s ease-in-out infinite; }
.promo-banner .pb-l3 { font: 600 11.5px var(--font); color: var(--ink);
  animation: pbL3 9s ease-in-out infinite; }
/* Блик по рамке — то, что ловится боковым зрением, не мешая читать. */
.pb-glow { position: absolute; inset: 0; pointer-events: none; border-radius: 12px;
  background: linear-gradient(105deg, transparent 38%, rgba(var(--amber-rgb),.16) 50%, transparent 62%);
  transform: translateX(-120%); animation: pbGlow 9s ease-in-out infinite; }
@keyframes pbL1   { 0%,6%{opacity:0;transform:translateY(4px)} 12%,100%{opacity:1;transform:none} }
@keyframes pbCode { 0%,14%{opacity:0;transform:translateY(6px)} 22%,60%{opacity:1;transform:none}
                    68%{opacity:1;transform:scale(1.06)} 76%,100%{opacity:1;transform:none} }
@keyframes pbL3   { 0%,26%{opacity:0} 34%,100%{opacity:1} }
@keyframes pbGlow { 0%,55%{transform:translateX(-120%)} 85%,100%{transform:translateX(120%)} }
/* Наведение останавливает цикл: иначе надпись меняется под курсором в момент клика. */
.promo-banner:hover .pb-l1, .promo-banner:hover .pb-code,
.promo-banner:hover .pb-l3, .promo-banner:hover .pb-glow { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .promo-banner .pb-l1, .promo-banner .pb-code, .promo-banner .pb-l3, .pb-glow { animation: none; opacity: 1; transform: none; }
}
/* Узкий экран: логотип и счётчик сходятся, места баннеру не остаётся. */
@media (max-width: 1180px) { .promo-banner { display: none; } }
.counter { position: absolute; z-index: 11; top: calc(var(--topbar-h) + 10px); right: clamp(12px,3vw,28px); text-align: right; line-height: 1.05; }

/* Соцсети — зеркало счётчика в левом углу: те же отступы от шапки и от края, чтобы первый
   экран остался уравновешенным. Значки лежат НА фотографии, поэтому цвет берут из «поверх
   медиа» и светлеют вместе с ней, а не с темой.

   Пробовали перенести их к счётчику — не встало. На той строке живёт ещё плашка промокода,
   а её видят все, кроме уже применивших код. Втроём — счётчик 139px, ряд значков 152px,
   плашка 208px плюс зазоры — они помещаются только от ~1560px ширины экрана; на ноутбуке
   1366 или 1440 места нет, а левее плашку не сдвинуть, там логотип. Раскладка «то справа,
   то слева» хуже одного постоянного места: значок ищут глазами там, где видели прошлый раз. */
.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; }

/* Нижние ссылки геро: «Популярные модели» (слева) ↔ «О сервисе» (справа) — по углам экрана.
   На десктопе wrapper прозрачен (display:contents), кнопки позиционируются абсолютно, как раньше. */
.hero-bottom-links { display: contents; }
.popular-link { position: absolute; z-index: 18; left: 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; cursor: pointer;
  backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(var(--shadow-rgb),.34);
  transition: border-color .16s, color .16s, transform .16s; }
.popular-link:hover { color: var(--band-yellow-ink); border-color: var(--amber); transform: translateY(-1px); }
.popular-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }

.popular-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(var(--backdrop-rgb),.72); backdrop-filter: blur(4px);
  overscroll-behavior: contain; }
.popular-overlay[hidden] { display: none; }
/* Панель не скроллится: шапка (заголовок+крестик) фиксирована, прокручивается только список. */
.popular-panel { position: relative; width: min(920px, 96vw); max-height: 86vh; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--panel-solid); border: 1px solid rgba(var(--amber-rgb),.30); border-radius: 14px;
  padding: 22px 22px 22px; box-shadow: 0 24px 70px rgba(var(--shadow-rgb),.5); }
.popular-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
  border: 1px solid rgba(var(--tint-rgb),.16); border-radius: 8px; background: rgba(var(--tint-rgb),.05);
  color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer; z-index: 2; }
.popular-title { font: 800 20px/1.2 var(--font); color: var(--ink); flex: 0 0 auto; padding-right: 44px; }
.popular-sub { margin: 6px 0 14px; font: 500 13px/1.4 var(--font); color: var(--muted, #9aa4b2); flex: 0 0 auto; }
.popular-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px 22px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 6px 6px 0; }
/* Тонкий скролл в стиле сайта: золотой ползунок на тёмном. */
.popular-body { scrollbar-width: thin; scrollbar-color: rgba(var(--amber-rgb),.55) rgba(var(--tint-rgb),.05); }
.popular-body::-webkit-scrollbar { width: 10px; }
.popular-body::-webkit-scrollbar-track { background: rgba(var(--tint-rgb),.04); border-radius: 8px; }
.popular-body::-webkit-scrollbar-thumb { background: rgba(var(--amber-rgb),.45); border-radius: 8px;
  border: 2px solid transparent; background-clip: padding-box; }
.popular-body::-webkit-scrollbar-thumb:hover { background: rgba(var(--amber-rgb),.75); background-clip: padding-box; }
.pop-brand h3 { margin: 0 0 8px; font: 800 14px/1.2 var(--font); color: var(--band-yellow, #ffb02e);
  border-bottom: 1px solid rgba(var(--tint-rgb),.08); padding-bottom: 6px; }
.pop-brand a { display: block; padding: 4px 0; font: 500 13px/1.35 var(--font); color: var(--ink);
  text-decoration: none; }
.pop-brand a:hover { color: var(--band-yellow, #ffb02e); text-decoration: underline; }

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

/* Кнопка «Найти авто» — только на телефоне: сворачивает весь блок поиска.
   Полная мобильная вёрстка — в конце стилей (после базовых правил), иначе 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); }
/* Лёгкая пульсация свечения — ТОЛЬКО у плашки «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); }

.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 { flex: 0 0 auto; overflow: hidden; }   /* высота = ровно 3 ряда (ставит JS) */
.cards-wrap.scroll .cards-scroll { overflow-y: auto; overflow-x: hidden; }
.cards-scroll::-webkit-scrollbar { width: 9px; }
.cards-scroll::-webkit-scrollbar-track { background: transparent; }
.cards-scroll::-webkit-scrollbar-thumb { background: rgba(var(--amber-rgb),0.5); border-radius: 5px; }
/* Мозаика: квадратные обложки вплотную, без зазоров. */
.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__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); }
/* Звезда «в избранное» на обложке списка (правый верхний угол, небольшая) */
.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: 6px; left: 5px; z-index: 3; font: 800 11px var(--font); 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). Прежний вращающийся конус
   давал разный бег на разных кнопках: оборот за одно время, но угол ≠ доля периметра,
   поэтому на широкой кнопке искра неслась и хвост растягивался, на маленьком чипе ползла.
   Теперь штрих идёт ПО ПЕРИМЕТРУ: период у всех общий (2.4с), длина хвоста — доля
   периметра, фаза привязана к общим часам. В любую секунду искра у всех кнопок в одном
   и том же месте своего контура — визуально бег одинаковый. */
.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 2.4s 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; }

/* Профиль: способы входа в этот аккаунт */
.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(440px, 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 { max-height: calc(88vh - 44px); overflow-y: auto; padding-right: 20px;
  scrollbar-width: thin; scrollbar-color: rgba(var(--amber-rgb),0.5) transparent; }
.acct-scroll::-webkit-scrollbar { width: 9px; }
.acct-scroll::-webkit-scrollbar-track { background: transparent; }
.acct-scroll::-webkit-scrollbar-thumb { background: rgba(var(--amber-rgb),0.5); border-radius: 5px; }
/* Крестик — в правом верхнем углу НАД рамкой (кружок на границе панели). */
.acct-close { position: absolute; top: -15px; right: -15px; z-index: 2; width: 34px; height: 34px;
  border-radius: 50%; background: var(--panel); border: 2px solid var(--amber); color: var(--ink);
  font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(var(--shadow-rgb),.5); }
.acct-close:hover { color: var(--amber-ink); }
/* ── Личный кабинет: секции ── */
.cab-sec { margin-top: 18px; }
.cab-h { color: var(--faint, var(--faint)); font: 800 11px var(--font); letter-spacing: .09em;
  text-transform: uppercase; margin-bottom: 9px; }
.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; gap: 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(1400px, 96vw); background: var(--panel);
  border: 2px solid var(--amber); border-radius: 16px; padding: 24px; box-shadow: 0 30px 80px rgba(var(--shadow-rgb),.7); text-align: center; }
.city-title { color: var(--ink); font: 800 24px var(--font); }
.city-sub { color: var(--muted); font: 600 14px var(--font); margin-top: 6px; }
.city-search { width: 100%; margin: 16px 0 6px; padding: 13px 16px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2, var(--surface-3)); color: var(--ink); font: 600 16px 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)); gap: 12px; margin: 12px 0 6px;
  grid-auto-rows: max-content; height: 288px; 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: rgba(var(--tint-rgb),.06); border: 1px solid var(--line); border-radius: 999px;
  padding: 14px 8px; font: 700 23px var(--font); color: var(--ink); cursor: pointer; transition: .14s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.city-chip:hover { border-color: var(--amber); color: var(--amber-ink); }
.city-chip.near { border-color: var(--amber); color: var(--amber-ink); box-shadow: 0 0 0 2px rgba(var(--amber-rgb),.25); }
.city-empty { grid-column: 1 / -1; color: var(--muted); font: 600 15px var(--font); padding: 16px; }
/* «Пропустить» — выделена, но приглушена: заметно отличается от серых плиток, не кричит как «Поиск». */
.city-skip { margin-top: 16px; padding: 12px 40px; background: rgba(var(--tint-rgb),.05);
  border: 1px solid var(--amber-line, rgba(var(--amber-rgb),.42)); border-radius: 10px; color: var(--muted);
  font: 800 15px var(--font); cursor: pointer; transition: .14s; }
.city-skip:hover { color: var(--amber-ink); border-color: var(--amber); }
.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; }
/* Промокод: кнопки-входы + модалка */
.cab-promo-btn { width: 100%; background: rgba(var(--tint-rgb),.05); color: var(--ink);
  border: 1px solid var(--amber-line, rgba(var(--amber-rgb),.42)); border-radius: 10px; padding: 12px 16px;
  font: 800 14px var(--font); cursor: pointer; transition: .14s; }
.cab-promo-btn:hover { color: var(--amber-ink); border-color: var(--amber); }
/* Промокод в шапке — слева от тарифа. Компактная плашка в стиле верхней панели. */
.top-promo { background: transparent; color: var(--muted); border: 1px solid var(--amber-line, rgba(var(--amber-rgb),.42));
  border-radius: 8px; padding: 7px 12px; font: 800 12px var(--font); white-space: nowrap; cursor: pointer; transition: .14s; }
.top-promo:hover { color: var(--amber-ink); border-color: var(--amber); }
.top-promo-m { display: none; }   /* мобильный «Промо» — показывается только в touch-медиазапросе */
.promo-overlay { position: fixed; inset: 0; z-index: 94; background: rgba(var(--scrim-rgb),0.8); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.promo-overlay[hidden] { display: none; }
.promo-panel { position: relative; width: min(420px, 94vw); background: var(--panel); border: 2px solid var(--amber);
  border-radius: 16px; padding: 26px; box-shadow: 0 30px 80px rgba(var(--shadow-rgb),.7); text-align: center; }
.promo-close { position: absolute; top: -15px; right: -15px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--amber); color: var(--ink); font-size: 15px; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 6px 18px rgba(var(--shadow-rgb),.5); }
.promo-close:hover { color: var(--amber-ink); }
.promo-title { color: var(--ink); font: 800 22px var(--font); }
.promo-sub { color: var(--muted); font: 600 13px var(--font); margin-top: 6px; }
.promo-input { width: 100%; margin: 16px 0 6px; padding: 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2, var(--surface-3)); color: var(--ink); font: 800 22px var(--font); text-align: center;
  letter-spacing: 6px; text-transform: uppercase; box-sizing: border-box; }
.promo-input:focus { outline: none; border-color: var(--amber); }
.promo-note { margin: 8px 0 2px; border-radius: 9px; padding: 10px 12px; font: 700 12.5px var(--font); }
.promo-note.ok { background: var(--ok-green); color: var(--ink-strong); }
.promo-note.err { background: var(--err-bg); color: var(--ink-strong); }
.promo-note[hidden] { display: none; }
.promo-apply { width: 100%; margin-top: 12px; background: var(--amber); color: var(--on-amber); border: 0; border-radius: 10px;
  padding: 13px; font: 800 15px var(--font); cursor: pointer; }
.promo-apply:hover { filter: brightness(1.06); }
.promo-apply:disabled { opacity: .6; cursor: wait; }
.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-txt--green, .card__band-txt--yellow { color: var(--on-band); }
.card__band-txt--red { color: var(--ink-strong); }
html.popular-open, body.popular-open { overflow: hidden; }

.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; }
/* Помеченное на удаление: приглушённый ФОН (#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; }
/* Избранное — сетка мини-карточек */
.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; gap: 6px; }
.lst-newbtn:hover { background: #f4463c; }
.lst-newbtn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--on-color); }
.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-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-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 (hover: none) and (pointer: coarse) { .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-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; }
/* Сверловка / Ступица / Крепёж — столбиком, 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); }
/* #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 (hover: none) and (pointer: coarse) {
  /* 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; }
  /* Данные больше не отдельный скроллер — иначе внутри короткой панели снова тесно.
     Свои боковые поля, т.к. у панели 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; }
}

/* Тумблер расширенных фильтров (без фона). */
.adv-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 0; cursor: pointer; color: var(--ink); font: 700 15px var(--font); padding: 2px 2px; }
.adv-plus { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--amber); color: var(--on-accent); font-size: 20px; font-weight: 800; line-height: 1; transition: transform .18s ease; }
.adv-toggle.is-open .adv-plus { transform: rotate(45deg); }
/* Кнопка «Очистить» — как «Расширенные фильтры» (шрифт/цвет), иконка янтарная и толстая. */
.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: 16px; }
.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; }

/* Ряд под поиском: слева тумблер фильтров, справа сортировка. */
/* Все инструменты — одной цепочкой под поиском, друг за другом: раньше «Сайты/Активные/
   Новые» уезжали вправо (margin-left:auto) и растягивались фикс-ширинами — визуально
   разбросано. display:contents вливает правую группу в общий ряд. */
.tools-row { position: relative; z-index: 2; display: flex; align-items: center; gap: 26px; }
.tools-right { display: contents; }
.sort-btn { display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 0; cursor: pointer; color: var(--ink); font: 700 15px var(--font); padding: 2px 2px; }
.sort-icon { flex: 0 0 auto; width: 22px; height: 14px;
  background:
    linear-gradient(var(--amber), var(--amber)) 0 0 / 100% 2px no-repeat,
    linear-gradient(var(--amber), var(--amber)) 0 6px / 70% 2px no-repeat,
    linear-gradient(var(--amber), var(--amber)) 0 12px / 42% 2px no-repeat; }
.sort-btn .sc { color: var(--muted); font-size: 11px; }
/* Кнопка по содержимому: в цепочке «друг за другом» фикс-ширина оставляла бы дыры;
   при смене значения соседи сдвигаются — это осознанная цена компактного ряда. */
.tools-right .sort-dd { flex: 0 0 auto; width: auto; }
.sort-btn { width: 100%; }
.sort-dd .dd-val { flex: 1 1 auto; width: auto; min-width: 0; text-align: left; }
.sort-dd .menu { left: auto; right: 0; }
/* Префикс .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; }
/* Кнопка по содержимому (см. sort-dd выше): длинные значения («Активные + Архив 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); }

/* Крестик сброса. */
.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: thin; scrollbar-color: var(--scroll) transparent; }
.menu::-webkit-scrollbar { width: 9px; }
.menu::-webkit-scrollbar-track { background: transparent; }
.menu::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 8px; }
.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); }
.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: 6px; transform: translateX(-50%); white-space: nowrap;
  display: inline-block; padding: 1px 10px; background: var(--on-accent); border-radius: 999px;
  color: var(--amber-ink); font: 800 12px/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; }
.sb-go:hover { filter: brightness(1.06); }

@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; }
}
@media (max-width: 480px) {
  :root { --topbar-h: 88px; }
  .topbar { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 40px 47px;
    align-items: center; padding-inline: 8px; }
  .topnav { grid-column: 1; grid-row: 1; margin: 0; gap: 10px; }
  .topnav-link { padding: 6px; }
  .topnav-link > span[data-i18n] { display: none; }
  .lang { grid-column: 2; grid-row: 1; justify-self: end; }
  .user-box { grid-column: 1 / -1; grid-row: 2; justify-self: end; min-width: 0; margin-right: 0; gap: 8px; }
  .user-tariff { min-width: 0; max-width: 140px; padding-right: 8px; }
  .user-tariff .ut-head { font-size: 9px; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
  .user-name { max-width: 105px; }
  .user-name .un-name, .user-name .un-sub { max-width: 105px; }
  .btn-logout { padding-inline: 9px; }
  .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 (hover: none) and (pointer: coarse) {
  /* Страница в обычном потоке и прокручивается, а не «один экран». */
  html, body { height: auto; overflow: auto; }
  /* 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; }

  /* ── Верхняя строка: ряд 1 = [иконки] [Промо] [тема] [🌐 язык], ряд 2 = [тариф] [вход] ── */
  :root { --topbar-h: 84px; }
  .topbar { display: grid; grid-template-columns: 1fr auto auto auto; grid-template-rows: auto auto;
    align-items: center; column-gap: 8px; row-gap: 4px; padding: 6px 8px; height: var(--topbar-h); }
  .topnav { grid-column: 1; grid-row: 1; margin: 0; gap: 12px; }
  .topnav-link { padding: 4px; }
  /* (2) Только значки, без подписей. */
  .topnav-link > span[data-i18n] { display: none; }
  /* (1) Промокод — короткое «Промо» слева от языка; десктопный промокод в user-box прячем. */
  .top-promo { display: none; }
  /* Соцсети пока только на большом экране: на телефоне шапка в два ряда и свободного угла
     нет — значки налезли бы на логотип. Место для них ищем отдельно. */
  .social { display: none; }
  .top-promo-m { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center;
    background: transparent; color: var(--amber-ink); border: 1px solid var(--amber);
    border-radius: 8px; padding: 6px 10px; font: 800 12px var(--font); white-space: nowrap; cursor: pointer; }
  /* Тема — между «Промо» и языком. Здесь шапка не ряд, а сетка с явными местами, и без
     своей колонки кнопка уезжала вниз, во второй ряд. Отступ справа снимаем: расстояние
     между элементами задаёт column-gap сетки, десктопные 12px тут были бы лишними. */
  .theme-toggle { grid-column: 3; grid-row: 1; justify-self: end; margin-right: 0; }
  /* (2) Язык — одна жёлтая иконка (видна только активная), тап меняет по кругу (JS). */
  .lang { grid-column: 4; grid-row: 1; justify-self: end; }
  .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 { grid-column: 1 / -1; grid-row: 2; justify-self: end; gap: 8px; margin: 0; }

  /* Баннер акции: на мобиле это строка НАД логотипом, а не блок сбоку — сбоку там места
     нет вовсе. Возвращаем в поток, разворачиваем в ряд и сжимаем шрифты: три надписи
     должны уместиться в одну строку даже на 360px. Правило ниже десктопного @1180px,
     поэтому перебивает его display:none. */
  .promo-banner { display: flex; position: static; top: auto; right: auto;
    flex-direction: row; align-items: baseline; justify-content: center; gap: 7px;
    width: auto; max-width: 94vw; margin: 10px auto 0; padding: 7px 14px 8px;
    border-radius: 10px; }
  .promo-banner .pb-l1 { font-size: 10px; letter-spacing: .1em; }
  .promo-banner .pb-code { font-size: 19px; }
  .promo-banner .pb-l3 { font-size: 10.5px; }
  /* На узких экранах уточнение уходит: код важнее пояснения. */
  @media (max-width: 359px) { .promo-banner .pb-l3 { display: none; } }

  /* Абсолютные элементы десктопа возвращаем в поток и центрируем сверху вниз. */
  /* (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; }
  /* (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 { justify-content: flex-start; gap: 22px; }
  .tools-right { display: contents; }
  .filters-reset { margin-left: 0; }
  .adv-toggle > span[data-i18n],
  .filters-reset > span[data-i18n],
  .sites-btn > span[data-i18n] { display: none; }
  /* Сортировка: ширина под «Выгоднее рынка», длиннее — обрезаем; сама уходит вправо (к краю),
     чтобы не наезжать на «Сайты». */
  .tools-right .sort-dd { flex: 0 0 auto; width: 172px; margin-left: auto; }
  .sort-dd .dd-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Расш. фильтры в 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); color: var(--ink); letter-spacing: 0; }
  .adv-field .dd-btn, .adv-field .vol-in { font-size: 11px; }
  .adv-field .dd-val { font-size: 11px; color: var(--muted); }

  /* (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); }
  .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; }
  /* Пока поиск свёрнут — прячем и расширенные фильтры (у них своя кнопка внутри). */
  .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)); }
  .popular-link, .about-service-link { position: static; left: auto; right: auto; bottom: auto;
    transform: none; margin: 0; }
  /* Полноэкранное окно на телефоне: заголовок всегда сверху, скролл внутри окна, фон не уезжает. */
  .popular-overlay { align-items: flex-start; padding: 0; }
  .popular-panel { width: 100%; max-width: 100%; border: none; border-radius: 0;
    max-height: 100vh; max-height: 100dvh; min-height: 100vh; min-height: 100dvh;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); }
  .popular-body { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 16px; }

  /* Выбор города. На десктопе сетка 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: 20px; }
  .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: 12px 6px; font-size: 14.5px; border-radius: 12px; }
  /* Пятнадцати плиток (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; }
.hero-bottom-left .popular-link { position: static; left: auto; bottom: auto; }
.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; }
.hits-count { min-width: 18px; padding: 1px 5px; border-radius: 6px; background: var(--amber);
  color: var(--on-accent); font: 800 10px/1.6 var(--font); text-align: center; }

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

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

/* Группа растворяется ТОЛЬКО на сенсорных устройствах — тем же условием, каким включается
   вся остальная мобильная раскладка. Сначала я поставил здесь ширину, и узкое окно на
   десктопе разъехалось: правила потока не включались (они по «сенсорности»), а группа уже
   растворилась — обе кнопки улетали в начало страницы, под верхнюю панель. Условие у
   связанных правил должно быть одно, иначе они расходятся ровно в зазоре между ними. */
@media (hover: none) and (pointer: coarse) {
  .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; }