/* /vin и /{locale}/vin/{VIN} — РЕДИЗАЙН 10.2026 (скил vinpasi-design, WP-E).

   Грузится после app.css, vin_page.css (файл main, его не правим) и design_base.css; на
   странице с карточками выдачи — ещё после board.css. Все правила под обёрткой `.vin2`, поэтому
   `_us_block.html` (общий с /check) и `_vin_links.html` (общий с /ceny) меняются только здесь.

   Задача страницы: человек вставляет VIN и видит, что о машине известно. Отсюда порядок на
   экране, когда номер принят (`.is-res`): форма → запись американских торгов → эта машина в
   объявлениях → что заложено в номер → объяснение номера. В документе порядок как в main,
   экран переставляет flex `order`.

   ФАКТ / ИЗ VIN / НЕИЗВЕСТНО различаются видом, без новых слов (data-design.md):
     запись торгов — строки «подпись — значение», значение жирное: это записанный факт;
     расшифровка номера — плитки «подпись над значением», значение обычным весом, у заголовка
       тихий значок «проверено» Solar verified-check: это то, что завод заложил в номер;
     «ещё не проверялся» / «ничего не нашли» — штриховка `--hatch`, та же, что у молчащей
       проверки на карточке, плюс значок вопроса: отсутствие записи не значит чистую машину.
   Оценки страховщика (стоимость машины, ремонта) отличить нечем — у строк нет класса, запрос
   оркестратору (класс на `li` в `_us_block.html`).

   Цвет только у смысла: зелёный — 17 знаков набраны и контрольная цифра схемы, красный —
   ошибка ввода, «стоп» и откат одометра. Кнопки чернильные. */

:root {
  /* Моноширинный — так номер набран везде на сайте (крошки, карточка, поле). Токена нет. */
  --vin2-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --vin2-gap: 32px;
}

/* ---------------------------------------------------------------- каркас */
.vin2 { max-width: none; display: flex; flex-direction: column; }
.vin2 > * { min-width: 0; }
/* Низ страницы: `.wrap` (72px) и отступ подвала (56px) давали под последней строкой полосу
   около 130px (r1, оба судьи на 1440). */
@media (min-width: 1024px) { .vin2 { margin-bottom: -40px; } }
/* Ответ по номеру выше объяснения: человек пришёл с номером, ответ и есть вопрос. */
.vin2-hub.is-res > .vin-hero { order: 0; }
.vin2-hub.is-res > .vin-carpage { order: 1; }
/* Запись торгов США — первой после формы, затем эта машина в объявлениях, затем расшифровка
   номера (решение оркестратора 11.10 по r1–r4: «запись первой» просили 5 чтений судей из 7).
   Без записи блок — одна строка «не проверялся», и порядок тот же: ответ «были ли торги» первым. */
.vin2-hub.is-res > .vin2-us { order: 2; }
.vin2-hub.is-res > .vin2-also { order: 3; }
.vin2-hub.is-res > .decode { order: 4; }
.vin2-hub.is-res > .block:not(.decode):not(.vin2-also) { order: 5; }

/* Разделы: волосяная линия и ровный шаг, без карточек вокруг разделов. */
.vin2 .block, .vin2 > .vin2-us {
  border-top: 1px solid var(--line); margin: var(--vin2-gap) 0 0; padding: 26px 0 0;
}
@media (min-width: 1024px) {
  /* Шапка раздела полосой: заголовок слева, вводная справа; содержимое — во всю ширину.
     Узкие вводные и оговорки одна под другой давали в main столбы пустоты справа (x≈700–1250). */
  .vin2 .block { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px; align-items: start; }
  .vin2 .block > * { grid-column: 1 / -1; }
  .vin2 .block > h2 { grid-column: 1; }
  .vin2 .block > h2 + .lead, .vin2 .block > h2 + .why, .vin2 .block > h2 + .vl-lead { grid-column: 2; margin-top: 2px; }
}
.vin2 .block h2, .vin2 .rblock > h2, .vin2 .rblock > h3 {
  margin: 0 0 6px; font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em;
  text-transform: none; color: var(--ink);
}
.vin2 .block > .lead { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-dim); max-width: 68ch; }
.vin2 .why { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-dim); max-width: 84ch; }
/* Ссылки в тексте — чернила с тихим подчёркиванием, как на главной; синий старого сайта ушёл. */
.vin2 .vin2-try a, .vin2 .vc-more a, .vin2 .rpath a, .vin2 .vin-board a, .vin2 .vl-more a {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: 500;
}
.vin2 .vin2-try a:hover, .vin2 .vc-more a:hover, .vin2 .rpath a:hover, .vin2 .vl-more a:hover { text-decoration-color: var(--ink); }
/* Номер лота — ссылка на первоисточник; Нино (r1) не узнала в нём ссылку: подчёркивание темнее. */
.vin2 .rpath a { text-decoration-color: var(--ink-faint); text-decoration-thickness: 1.5px; }
/* Цель касания ссылки лота ~44px без роста строки: поле сверху и снизу, съеденное отрицательным. */
.vin2 .rpath a { display: inline-block; padding: 10px 0; margin: -10px 0; }

/* ---------------------------------------------------------------- инструмент */
.vin2 .vin-hero { margin: 22px 0 0; gap: 24px; }
.vin2 .vin-hero > div { min-width: 0; }
.vin2 .vin-hero h1 { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.vin2 .vin2-title > .lead { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-dim); max-width: 60ch; }
/* Ошибка ввода — вплотную к полю, НАД ним: под полем на телефоне стоит кнопка, и в r1/r2 ошибка
   оказывалась отделена от поля кнопкой (main: под справкой). Между полем и кнопкой не поставить:
   форме понадобился бы display: contents, а за её коробкой следит плавающая панель. */
.vin2 .vin2-tool { display: flex; flex-direction: column; min-width: 0; margin: 16px 0 0; }
.vin2 .vin2-tool > .warn { order: 0; }
.vin2 .vin2-tool > .vin-form { order: 1; }
.vin2 .vin2-tool > .vin-note { order: 2; }
@media (min-width: 1024px) {
  /* Без доски справа: заголовок и форма одной полосой. Узкая форма под заголовком оставляла
     справа пустоту 400×460 (main: колонка доски держалась и без доски). С доской — как main. */
  .vin2 .vin-hero:not(:has(> .vin-board)) { grid-template-columns: minmax(0, 1fr); }
  .vin2 .vin-hero:not(:has(> .vin-board)) > div {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px; align-items: start;
  }
  .vin2 .vin-hero:not(:has(> .vin-board)) .vin2-tool { margin: 0; }
  .vin2 .vin-hero h1 { font-size: 30px; }
}

.vin2 .vin-form { margin: 0; gap: 8px; max-width: 760px; }
.vin2 .vin-form input {
  min-height: 54px; padding: 0 76px 0 16px;
  border: 1.5px solid var(--ink); border-radius: var(--r-sm);
  font-family: var(--vin2-mono); font-size: 18px; font-weight: 500; letter-spacing: .08em;
  color: var(--ink); background: var(--bg);
}
.vin2 .vin-form input::placeholder { color: var(--ink-faint); opacity: .7; }
.vin2 .vin-form input:focus-visible { outline: 3px solid color-mix(in srgb, var(--ink) 18%, transparent); outline-offset: 1px; }
.vin2 .vin-count { right: 14px; font-size: 12px; font-weight: 600; color: var(--ink-faint); }
.vin2 .vin-count.is-full { color: var(--ok); }
.vin2 .vin-form button {
  min-height: 54px; padding: 0 24px; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 600; background: var(--ink); color: #fff;
}
.vin2 .vin-form button:hover { filter: none; background: #000; }
.vin2 .vin-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-dim); max-width: 76ch; }
.vin2 .vin-hero .warn {
  margin: 0 0 10px; padding: 10px 12px; max-width: 760px; box-sizing: border-box;
  border: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; box-shadow: inset 3px 0 0 var(--fail);
  background: color-mix(in srgb, var(--fail) 7%, var(--bg));
  color: var(--fail); font-size: 14px; font-weight: 500; line-height: 1.45;
}
.vin2 .vin-hero:has(.warn) .vin-form input { border-color: var(--fail); }

/* Доска справа от формы (main: свод `check_stats`). Локально свод пуст — вид не снят. */
.vin2 .vin-board { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 16px; }
.vin2 .vin-board .k, .vin2 .vin-src .k {
  font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-dim);
}
.vin2 .vin-board .big { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.vin2 .vin-board .sub { font-size: 13px; }
.vin2 .vin-share { height: 8px; border-radius: 999px; background: var(--hatch); }
.vin2 .vin-share-note { font-size: 12px; }
.vin2 .vin-facts b { font-size: 16px; font-weight: 600; }
.vin2 .vin-facts span { font-size: 12.5px; }

/* Выход на страницу машины — второе действие после ответа: контурная кнопка, не ссылка-строка. */
.vin2 .vin-carpage { margin: 16px 0 0; }
.vin2 .vin-carpage a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg);
  color: var(--ink); font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.vin2 .vin-carpage a:hover { border-color: var(--ink); background: var(--panel); text-decoration: none; }
/* Когда номер разобран и у машины есть своя страница, следующий шаг — она: кнопка чернильная,
   а «Расшифровать» (номер уже разобран) — контуром. r1, Нино: контурную кнопку почти пропустила,
   а самой заметной оставалась «Расшифровать». В плавающей панели то же: после ответа «Расшифровать»
   там — возврат к полю, не главное действие. */
.vin2-hub.is-res .vin-carpage a { background: var(--ink); border-color: var(--ink); color: #fff; }
.vin2-hub.is-res .vin-carpage a:hover { background: #000; }
/* Контур чернилами 1,5px, а не бледной линией: в r3 Нино прочла бледный контур как «кнопка выключена». */
.vin2-hub.is-res .vin-form button { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.vin2-hub.is-res .vin-form button:hover { background: var(--panel); }

/* ---------------------------------------------------------------- запись торгов (общий макрос) */
.vin2 .rblock { margin: 0; display: flex; flex-direction: column; }
.vin2 .rblock > h2, .vin2 .rblock > h3 { order: 0; }
.vin2 .rblock > .rlead { order: 1; }
/* Строки записи — сразу после строки контекста (её не трогаем: без неё запись читается как
   обвинение продавца), кадры — под строками. В r1 кадры стояли выше, и все трое судей сказали
   одно: на телефоне повреждение, оценка ремонта и документ уходили под сгиб за картинкой.
   Тяжёлое повреждение (`.rheavy`) — вплотную к строкам. Подпись с числом кадров едет с лентой. */
.vin2 .rblock > .rpath { order: 2; }
.vin2 .rblock > .rheavy { order: 3; }
.vin2 .rblock > .rnote:has(+ .ck-lotshots) { order: 4; }
.vin2 .rblock > .ck-lotshots { order: 5; }
.vin2 .rblock > .rnote { order: 6; }
.vin2 .rblock > form { order: 7; }
.vin2 .rblock > .warn { order: 8; }

.vin2 .rblock > .rlead.muted { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink-dim); max-width: 76ch; }
/* НЕИЗВЕСТНО: записи нет (не спрашивали или Америка молчит). Штриховка — грамматика молчащей
   проверки с карточки машины; текст чернилами, чтобы читался на полосах. */
.vin2 .rblock:not(:has(.rpath)) > .rlead {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 0; padding: 12px 14px;
  border-radius: var(--r-sm); background: var(--hatch); color: var(--ink);
  font-size: 14.5px; font-weight: 500; overflow-wrap: anywhere;
}
.vin2 .rblock:not(:has(.rpath)) > .rlead::before {
  content: ""; flex: none; width: 20px; height: 20px; background: var(--ink-dim);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M10.125 8.875C10.125 7.83947 10.9645 7 12 7C13.0355 7 13.875 7.83947 13.875 8.875C13.875 9.56245 13.505 10.1635 12.9534 10.4899C12.478 10.7711 12 11.1977 12 11.75V13'/%3E%3Cpath stroke-linejoin='round' d='M12 16H12.0001'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M10.125 8.875C10.125 7.83947 10.9645 7 12 7C13.0355 7 13.875 7.83947 13.875 8.875C13.875 9.56245 13.505 10.1635 12.9534 10.4899C12.478 10.7711 12 11.1977 12 11.75V13'/%3E%3Cpath stroke-linejoin='round' d='M12 16H12.0001'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.vin2 .rblock > form.vinform { margin: 10px 0 0; }
.vin2 .rblock > form.vinform button {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius);
  background: var(--ink); color: #fff; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.vin2 .rblock > .warn {
  margin: 10px 0 0; padding: 10px 12px; border: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  box-shadow: inset 3px 0 0 var(--fail); background: color-mix(in srgb, var(--fail) 7%, var(--bg));
  color: var(--fail); font-size: 14px;
}

/* Кадры торгов лентой: крупно, листаются пальцем; на телефоне от края до края. */
.vin2 .rblock > .rnote:has(+ .ck-lotshots) {
  margin: 16px 0 8px; font-size: 12.5px; font-weight: 500; color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.vin2 .ck-lotshots {
  gap: 8px; margin: 0 0 18px; padding: 0 0 8px;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.vin2 .ck-lotshots a { border-radius: var(--r-sm); }
.vin2 .ck-lotshots img {
  width: 280px; height: 210px; object-fit: cover;
  border: 0; border-radius: var(--r-sm); background: var(--panel-2);
}
@media (max-width: 1023px) {
  .vin2 .ck-lotshots { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; scroll-padding-left: 16px; }
}
@media (min-width: 1024px) {
  /* Широкий экран — как галерея карточки /check: первый кадр крупно, остальные сеткой под ним,
     колонка кадров слева, запись справа. Лента в 1160px показывала 3,6 кадра и ни одного крупно.
     Десять в ряд: при медиане 11 кадров это один-два ряда, и колонка кадров не длиннее записи
     (r1: семь в ряд давали третий ряд и пустоту 500×240 справа). */
  .vin2 .ck-lotshots {
    display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px;
    margin: 0; padding: 0; overflow: visible; scroll-snap-type: none;
  }
  .vin2 .ck-lotshots a:first-child { grid-column: 1 / -1; }
  .vin2 .ck-lotshots img { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 5px; }
  .vin2 .ck-lotshots a:first-child img { border-radius: var(--r); }
  .vin2 .ck-lotshots a:hover img { filter: brightness(.92); }
}

/* ФАКТ: строки записи — подпись слева тихо, значение справа жирно; цифры табличные. */
.vin2 .rpath { margin: 0; padding: 0; font-variant-numeric: tabular-nums; }
/* Строка — сетка «подпись | значение», пометка под значением в той же колонке: при переносе
   подписи в две строки (ka) пометка не отрывается от значения (r2: зазор ~15px). */
.vin2 .rpath li {
  display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); align-items: start; gap: 0 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.45;
}
.vin2 .rpath li:last-child { border-bottom: 1px solid var(--line); }
.vin2 .rpath .k { grid-column: 1; grid-row: 1 / span 2; align-self: start; min-width: 0; color: var(--ink-dim); }
.vin2 .rpath .v { grid-column: 2; min-width: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.vin2 .rpath .v.mono { font-family: var(--vin2-mono); font-size: 13.5px; font-weight: 500; letter-spacing: .02em; color: var(--ink); }
/* Пометка к значению — отдельной строкой под значением, а не хвостом в той же строке. */
.vin2 .rpath .r { grid-column: 2; margin-top: 1px; font-size: 13px; line-height: 1.35; color: var(--ink-dim); }
.vin2 .rpath .r.down { color: var(--fail); font-weight: 600; }
/* ОЦЕНКА, НЕ ФАКТ: стоимость машины и ремонта — прикидка страховщика из той же американской
   бумаги. Значение обычным весом и вторичным цветом, перед ним знак «≈» (data-design.md: оценка
   числом — через ≈), чтобы разница читалась не только цветом. Знак — оформление, скринридеру
   не читается (альтернативный текст пуст). Класс `is-est` ставит сам макрос `_us_block.html`. */
.vin2 .rpath li.is-est .v { font-weight: 500; color: var(--ink-dim); }
.vin2 .rpath li.is-est .v::before { content: "≈\2009"; content: "≈\2009" / ""; color: var(--ink-faint); }
.vin2 .rheavy { margin: 14px 0 0; }
.vin2 .rblock > .rnote { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); max-width: 96ch; }
.vin2 .rblock > .rnote + .rnote { margin-top: 4px; }
@media (min-width: 1024px) {
  /* Без кадров: шапка полосой (заголовок | вводная или «не проверялся»), строки записи в две
     колонки — одиннадцать пар в одну колонку на 1160px оставляли пустую правую половину. */
  .vin2 .rblock { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px; align-items: start; }
  .vin2 .rblock > * { grid-column: 1 / -1; }
  .vin2 .rblock > h2, .vin2 .rblock > h3 { grid-column: 1; }
  .vin2 .rblock > h2 + .rlead, .vin2 .rblock > h3 + .rlead { grid-column: 2; }
  .vin2 .rblock:not(:has(.rpath)) > .rlead { margin: 0; }
  /* Запись без кадров (r4 UX P1, самый частый вид: кадры у 373 VIN из 1 606): строки ОДНОЙ
     колонкой слева, как и с кадрами, — «Документ» в том же порядке чтения, без зигзага двух
     колонок; справа вводная, тяжёлое повреждение и оговорки. Последняя строка `1fr` забирает
     разницу высот, чтобы справа не было щелей между абзацами. */
  .vin2 .rblock:has(> .rpath):not(:has(> .ck-lotshots)) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto repeat(7, auto) 1fr;
  }
  .vin2 .rblock:has(> .rpath):not(:has(> .ck-lotshots)) > * { grid-column: 2; }
  .vin2 .rblock:has(> .rpath):not(:has(> .ck-lotshots)) > h2,
  .vin2 .rblock:has(> .rpath):not(:has(> .ck-lotshots)) > h3 { grid-column: 1; grid-row: 1; }
  .vin2 .rblock:has(> .rpath):not(:has(> .ck-lotshots)) > .rpath { grid-column: 1; grid-row: 2 / -1; align-self: start; }
  .vin2 .rblock:has(> .rpath):not(:has(> .ck-lotshots)) > .rlead { grid-row: 1 / span 2; }
  /* Подпись строки — до 200px, а не 40%: в широкой колонке «Лот» стоял в 236px
     от значения (r4). */
  .vin2 .rpath li { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }

  /* С кадрами: кадры слева (липкие, пока листается запись), справа заголовок, вводная, строки,
     оговорки. Последняя строка сетки `1fr` забирает разницу высот колонок, чтобы она не
     расползалась щелями между строками справа. Число кадров — плашкой на первом кадре. */
  .vin2 .rblock:has(> .ck-lotshots) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: repeat(8, auto) 1fr;
  }
  .vin2 .rblock:has(> .ck-lotshots) > * { grid-column: 2; }
  .vin2 .rblock:has(> .ck-lotshots) > .ck-lotshots {
    grid-column: 1; grid-row: 1 / -1; align-self: start;
    position: sticky; top: calc(var(--h-top) + 16px);
  }
  .vin2 .rblock:has(> .ck-lotshots) > .rnote:has(+ .ck-lotshots) {
    grid-column: 1; grid-row: 1; z-index: 1; align-self: start; justify-self: start;
    /* Отрицательный низ: плашка лежит на кадре и не растит первую строку сетки, иначе между
       заголовком и вводной справа появлялась щель в высоту плашки. */
    margin: 12px 0 -60px 12px; padding: 4px 10px; border-radius: 999px;
    background: rgba(21, 25, 30, .68); color: #fff; font-size: 12px;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  .vin2 .rblock:has(> .ck-lotshots) > .rpath { display: block; }
}

/* ---------------------------------------------------------------- что заложено в номер */
/* ИЗ VIN: плитки «подпись над значением» — так это не путается со строками записи торгов.
   Значок у заголовка — штрихкод Solar (номер), не галочка: в r2 Нино прочла галочку как «машина
   проверена, всё хорошо», а расшифровка говорит только, что завод заложил в номер. */
.vin2 .decode h2 { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.vin2 .decode:not(:has(.warn)) h2::before {
  content: ""; flex: none; width: 20px; height: 20px; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath d='M12.3169 18.9785L12.3169 4.97852'/%3E%3Cpath d='M5.53906 18.9785L5.53906 4.97852'/%3E%3Cpath d='M15.2222 18.9785L15.2222 4.97852'/%3E%3Cpath d='M22 18.978L22 4.97803'/%3E%3Cpath d='M2.63379 18.9785L2.63379 4.97852'/%3E%3Crect width='.968' height='14.043' x='8.444' y='4.957' rx='.484'/%3E%3Crect width='.968' height='14.043' x='18.127' y='4.935' rx='.484'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath d='M12.3169 18.9785L12.3169 4.97852'/%3E%3Cpath d='M5.53906 18.9785L5.53906 4.97852'/%3E%3Cpath d='M15.2222 18.9785L15.2222 4.97852'/%3E%3Cpath d='M22 18.978L22 4.97803'/%3E%3Cpath d='M2.63379 18.9785L2.63379 4.97852'/%3E%3Crect width='.968' height='14.043' x='8.444' y='4.957' rx='.484'/%3E%3Crect width='.968' height='14.043' x='18.127' y='4.935' rx='.484'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
/* На хабе заголовок раздела — сам номер: моноширинным, как номер набран в поле. */
.vin2-hub .decode h2 { font-family: var(--vin2-mono); font-size: 19px; letter-spacing: .04em; }
.vin2 .decode > .warn {
  margin: 8px 0 0; padding: 10px 12px; border: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  box-shadow: inset 3px 0 0 var(--caution); background: color-mix(in srgb, var(--caution) 7%, var(--bg));
  color: var(--ink); font-size: 13.5px;
}
.vin2 .kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin: 12px 0 0; }
.vin2 .kv > div { display: block; padding: 9px 0 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
.vin2 .kv dt { display: block; margin: 0 0 2px; font-size: 12.5px; line-height: 1.35; color: var(--ink-faint); text-transform: none; }
.vin2 .kv dd { margin: 0; line-height: 1.35; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
@media (min-width: 768px) {
  /* Колонка не шире 240px: значения расшифровки короткие («4», «Sport»), и в четырёх широких
     колонках между ними стояли пустые столбы. На 1160px выходит пять колонок, 15 полей — 3 ряда. */
  .vin2 .kv { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 24px; }
}
@media (min-width: 1024px) {
  /* 7, 8, 11 и 12 полей — четыре колонки (11 в пять давали третий ряд из одной плитки, r4). */
  .vin2 .kv:has(> :nth-child(7):last-child), .vin2 .kv:has(> :nth-child(8):last-child),
  .vin2 .kv:has(> :nth-child(11):last-child), .vin2 .kv:has(> :nth-child(12):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- эта машина в объявлениях */
.vin2 .vin2-also .cards { margin-top: 14px; }
.vin2 .vin2-also h2 + .why { margin-top: 2px; }

/* ---------------------------------------------------------------- схема номера */
.vin2 .vin-scheme { margin: 18px 0 0; gap: 4px; }
.vin2 .vin-grp .pos { font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.vin2 .vin-grp.is-year .pos { color: var(--ink); }
.vin2 .vin-grp.is-check .pos { color: var(--ok); }
.vin2 .vin-cell { font-family: var(--vin2-mono); border-radius: 6px; background: var(--panel-2); color: var(--ink); font-weight: 600; }
.vin2 .vin-cell.plain { background: var(--panel); border: 1px solid var(--line); }
.vin2 .vin-cell.serial { color: var(--ink-dim); background: var(--panel); }
.vin2 .vin-cell.check { background: color-mix(in srgb, var(--ok) 8%, var(--bg)); border: 1.5px solid var(--ok); color: var(--ok); }
.vin2 .vin-cell.year { background: var(--ink); color: #fff; }

.vin2 .vin-legend { gap: 18px 28px; margin: 20px 0 0; }
.vin2 .vin-legend li { border-top: 1px solid var(--line-strong); padding-top: 10px; }
.vin2 .vin-legend li.is-check { border-top-color: var(--ok); }
.vin2 .vin-legend .h b { font-family: var(--vin2-mono); font-size: 14px; letter-spacing: .04em; }
.vin2 .vin-legend .h span { font-size: 12px; color: var(--ink-faint); }
.vin2 .vin-legend .t { font-size: 14px; font-weight: 600; line-height: 1.35; margin: 5px 0 0; color: var(--ink); }
.vin2 .vin-legend p { font-size: 13px; line-height: 1.5; color: var(--ink-dim); margin: 3px 0 0; text-wrap: pretty; }
.vin2 .vin2-try { margin: 12px 0 0; font-size: 14px; }
.vin2 .vin2-try a { font-family: inherit; }
@media (min-width: 1024px) {
  /* Семнадцать клеток во всю ширину колонки: сетка на 17 колонок, группы — подсетки по числу
     своих знаков (3, 5, 1, 1, 1, 6). r1: клетки по 38px занимали 790 из 1160, справа пустота
     384×272. Высота одна у всех; десятый знак выделен заливкой, а не ростом (r1: «G выше»). */
  .vin2 .vin-scheme { display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); column-gap: 6px; align-items: end; }
  .vin2 .vin-grp { display: grid; grid-template-columns: subgrid; grid-template-rows: auto auto; row-gap: 6px; }
  .vin2 .vin-grp:nth-child(1) { grid-column: span 3; }
  .vin2 .vin-grp:nth-child(2) { grid-column: span 5; }
  .vin2 .vin-grp:nth-child(6) { grid-column: span 6; }
  .vin2 .vin-grp .pos { grid-column: 1 / -1; margin: 0; }
  .vin2 .vin-grp .cells { display: contents; }
  .vin2 .vin-cell, .vin2 .vin-cell.serial, .vin2 .vin-cell.year { width: auto; height: 60px; font-size: 26px; }
  .vin2 .vin-cell.serial { font-size: 24px; }
  /* Шесть описаний — 3 × 2 без дыр (было 4 + 2 и пустые полклетки справа). */
  .vin2 .vin-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Пример разбора и ссылка на него — одной полосой: ссылка слева, пояснение справа. */
  .vin2 .vin2-what { grid-auto-flow: row dense; }
  .vin2 .vin2-what > .why { grid-column: 2; margin-top: 20px; }
  .vin2 .vin2-what > .vin2-try { grid-column: 1; margin-top: 20px; }
}

/* ---------------------------------------------------------------- коды года */
.vin2 .vin-years { gap: 6px; margin: 16px 0 0; }
.vin2 .vin-year { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 6px; background: var(--bg); }
.vin2 .vin-year .c { font-family: var(--vin2-mono); font-size: 19px; font-weight: 600; color: var(--ink); }
.vin2 .vin-year .y { font-size: 12.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.vin2 .vin-year.is-on { border: 1.5px solid var(--ink); background: var(--panel); }
/* Пропущенные буквы — просто панель: штриховка на этой странице значит «неизвестно» (r3). */
.vin2 .vin-year.is-none { border: 0; background: var(--panel); }
.vin2 .vin-year.is-none .c { font-family: var(--vin2-mono); font-size: 14px; color: var(--ink-dim); }
.vin2 .vin-year.is-none .y { font-size: 11.5px; color: var(--ink-dim); }
@media (min-width: 641px) and (max-width: 1023px) {
  .vin2 .vin-years { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  /* Семнадцать лет и клетка пропусков — ровно 9 × 2. */
  .vin2 .vin-years { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
  .vin2 .vin-year { padding: 10px 6px; }
}

/* ---------------------------------------------------------------- где стоит номер */
.vin2 .vin-where { gap: 18px 28px; margin: 18px 0 0; }
/* Без рамок вокруг каждого пункта: номер и линейка сверху держат ряд, карточки в разделе лишние. */
.vin2 .vin-where li { border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; padding: 12px 0 0; background: none; }
.vin2 .vin-where .n { width: 26px; height: 26px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vin2 .vin-where .t { font-size: 14px; font-weight: 600; line-height: 1.35; margin: 10px 0 0; color: var(--ink); }
.vin2 .vin-where p { font-size: 13px; line-height: 1.5; color: var(--ink-dim); margin: 4px 0 0; text-wrap: pretty; }
/* Стоп: тот же приём, что у тяжёлого повреждения, — красная линейка слева и заливка. */
.vin2 .vin-stop {
  margin: 18px 0 0; padding: 12px 14px; max-width: none; box-sizing: border-box; border: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0; box-shadow: inset 3px 0 0 var(--fail);
  background: color-mix(in srgb, var(--fail) 6%, var(--bg));
}
.vin2 .vin-stop p { font-size: 14px; line-height: 1.5; color: var(--ink); max-width: 96ch; }
@media (min-width: 1024px) {
  .vin2 .vin-where { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- откуда данные */
.vin2 .vin-src { gap: 20px 40px; }
.vin2 .vin-src p { font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); margin: 6px 0 0; }
@media (min-width: 768px) { .vin2 .vin-src { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* На широком — та же линия 5 : 7, что у шапок разделов выше (r4: делилось по своей середине). */
@media (min-width: 1024px) { .vin2 .vin-src { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* ---------------------------------------------------------------- страница машины: шапка */
.vin2 .crumbs { margin: 16px 0 0; font-size: 13px; color: var(--ink-faint); }
.vin2 .crumbs a { color: var(--ink-dim); }
/* Текущий пункт крошек повторяет H1 строкой ниже: тихо, обычным весом (r1: «VIN трижды»). */
.vin2 .crumbs b { font-weight: 400; color: var(--ink-faint); overflow-wrap: anywhere; }
/* Опознание: имя машины крупно чернилами НАД номером (порядок только на экране, H1 остаётся
   H1) — Нино ищет глазами «что за машина», а моноширинный номер её перебивал. */
.vin2 .vc-head { margin: 6px 0 0; display: flex; flex-direction: column; }
/* Размер — как у H1 хаба (r3 UX P1: имя машины почти равнялось h2 разделов). */
.vin2 .vc-head .car { order: -1; margin: 0 0 4px; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
@media (min-width: 1024px) { .vin2 .vc-head .car { font-size: 36px; } }
.vin2 .vc-head h1 {
  margin: 0; font-family: var(--vin2-mono); font-size: 16px; font-weight: 500;
  line-height: 1.25; letter-spacing: .02em; color: var(--ink-dim); overflow-wrap: anywhere;
}
.vin2 .vc-head h1:only-child { font-size: clamp(21px, 5.6vw, 30px); color: var(--ink); }
/* Вердикт одометра — первый экран: это ответ на вопрос, с которым пришли. Вид по вердикту:
   откат — красная линейка; сошлось — зелёная (это и есть «ОК»); мили в поле километров —
   янтарь; остальное (в т.ч. «пробега в объявлении нет») — нейтральная плашка: в r2 штриховка
   «неизвестно» читалась как «пробега нет», а в предложении твёрдое число из записи. */
.vin2 .vc-lead {
  margin: 16px 0 0; padding: 14px 16px; max-width: 80ch; box-sizing: border-box;
  border: 0; border-radius: var(--r); background: var(--panel);
  font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums;
}
.vin2 .vc-lead.is-back, .vin2 .vc-lead.is-same, .vin2 .vc-lead.is-units { border-radius: 0 var(--r) var(--r) 0; }
.vin2 .vc-lead.is-back { box-shadow: inset 3px 0 0 var(--fail); background: color-mix(in srgb, var(--fail) 7%, var(--bg)); }
.vin2 .vc-lead.is-same { box-shadow: inset 3px 0 0 var(--ok); background: color-mix(in srgb, var(--ok) 6%, var(--bg)); }
.vin2 .vc-lead.is-units { box-shadow: inset 3px 0 0 var(--caution); background: color-mix(in srgb, var(--caution) 7%, var(--bg)); }

.vin2 .vc-status { margin: 10px 0 0; font-size: 14px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  /* СТРАНИЦА МАШИНЫ БЕЗ КАДРОВ (самый частый вид): запись торгов слева одной колонкой — подпись,
     вводная, строки, оговорки, — а «Что заложено в номер» справа плитками в две колонки. Обе
     колонки — факты о машине, высоты близки (r4: строки двумя колонками читались зигзагом, а
     одна запись на 1160px оставляла справа пустоту). С кадрами раскладка прежняя: кадры | запись. */
  .vin2.vin2-car:not(:has(.ck-lotshots)) {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 40px; align-items: start;
  }
  .vin2.vin2-car:not(:has(.ck-lotshots)) > * { grid-column: 1 / -1; }
  .vin2.vin2-car:not(:has(.ck-lotshots)) > .vc-top { grid-row: 1; }
  .vin2.vin2-car:not(:has(.ck-lotshots)) > .vin2-us { grid-column: 1; grid-row: 2; }
  .vin2.vin2-car:not(:has(.ck-lotshots)) > .decode { grid-column: 2; grid-row: 2 / span 2; display: block; }
  /* «Как читать VIN» — под записью слева, а не отдельной строкой под обеими колонками. */
  .vin2.vin2-car:not(:has(.ck-lotshots)) > .vc-more { grid-column: 1; grid-row: 3; }
  .vin2.vin2-car:not(:has(.ck-lotshots)) > .decode .kv { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 8px; }
  .vin2.vin2-car:not(:has(.ck-lotshots)) > .decode .kv > div { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); column-gap: 12px; padding: 9px 0; font-size: 14px; line-height: 1.4; }
  /* Длинная расшифровка (13+ полей) — строки плотнее, чтобы не перерасти запись слева. */
  .vin2.vin2-car:not(:has(.ck-lotshots)) > .decode .kv:has(> div:nth-child(13)) > div { padding: 6px 0; }
  .vin2.vin2-car:not(:has(.ck-lotshots)) > .decode .kv dt { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-dim); }
  .vin2.vin2-car:not(:has(.ck-lotshots)) > .decode .kv dd { line-height: 1.45; }
  .vin2.vin2-car:not(:has(.ck-lotshots)) .rblock:has(> .rpath) { display: flex; flex-direction: column; }
  .vin2.vin2-car:not(:has(.ck-lotshots)) .rblock:has(> .rpath) > .rpath { align-self: stretch; }
  /* То же на хабе, когда запись без кадров и между записью и расшифровкой нет объявлений:
     запись слева, расшифровка справа одной полосой (порядок экрана прежний: форма → запись). */
  .vin2.vin2-hub.is-res:has(.rblock > .rpath):not(:has(.ck-lotshots)):not(:has(> .vin2-also)) {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 40px; align-items: start;
  }
  .vin2.vin2-hub.is-res:has(.rblock > .rpath):not(:has(.ck-lotshots)):not(:has(> .vin2-also)) > * { grid-column: 1 / -1; }
  .vin2.vin2-hub.is-res:has(.rblock > .rpath):not(:has(.ck-lotshots)):not(:has(> .vin2-also)) > .vin2-us { grid-column: 1; }
  .vin2.vin2-hub.is-res:has(.rblock > .rpath):not(:has(.ck-lotshots)):not(:has(> .vin2-also)) > .decode { grid-column: 2; display: block; }
  /* Расшифровка рядом с записью — тем же видом строк «подпись | значение» (r5 UX P1: плитками в две
     колонки она выходила короче записи, справа пустота ~466×185; две таблицы фактов разного
     устройства). Значение обычным весом: это заложено в номер, а не записано на торгах. */
  .vin2.vin2-hub.is-res:has(.rblock > .rpath):not(:has(.ck-lotshots)):not(:has(> .vin2-also)) > .decode .kv { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 8px; }
  .vin2.vin2-hub.is-res:has(.rblock > .rpath):not(:has(.ck-lotshots)):not(:has(> .vin2-also)) > .decode .kv > div { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); column-gap: 12px; padding: 9px 0; font-size: 14px; line-height: 1.45; }
  .vin2.vin2-hub.is-res:has(.rblock > .rpath):not(:has(.ck-lotshots)):not(:has(> .vin2-also)) > .decode .kv dt { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-dim); }
  .vin2.vin2-hub.is-res:has(.rblock > .rpath):not(:has(.ck-lotshots)):not(:has(> .vin2-also)) > .decode .kv dd { line-height: 1.45; }
  .vin2.vin2-hub.is-res:has(.rblock > .rpath):not(:has(.ck-lotshots)):not(:has(> .vin2-also)) > .decode .kv:has(> div:nth-child(13)) > div { padding: 6px 0; }
  .vin2.vin2-hub.is-res:has(.rblock > .rpath):not(:has(.ck-lotshots)):not(:has(> .vin2-also)) .rblock { display: flex; flex-direction: column; }
  .vin2.vin2-hub.is-res:has(.rblock > .rpath):not(:has(.ck-lotshots)):not(:has(> .vin2-also)) .rblock > .rpath { align-self: stretch; }
}
@media (min-width: 1024px) {
  /* Машина слева над кадрами, ответ справа над строками записи — те же колонки 7 : 5, что ниже. */
  .vin2 .vc-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 40px; align-items: end; }
  /* Без кадров колонки 7 : 5 ниже не задают сетку шапки: вердикт встаёт сразу за именем машины и
     забирает остальную ширину (r6: между коротким именем и плашкой пустовало ~256×176). */
  .vin2.vin2-car:not(:has(.ck-lotshots)) .vc-top { grid-template-columns: max-content minmax(0, 1fr); }
  .vin2 .vc-say .vc-lead { margin: 0; max-width: none; }
}
.vin2 .vc-more { margin: var(--vin2-gap) 0 0; font-size: 14.5px; }

/* Соседние машины той же модели (`_vin_links.html`, общий с /ceny — здесь только под `.vin2`). */
.vin2 .vin-links .vl-lead { margin: 0; font-size: 14px; color: var(--ink-dim); }
.vin2 .vin-links ul {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px;
}
.vin2 .vin-links li a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 44px; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none;
}
.vin2 .vin-links li a:hover { border-color: var(--ink); text-decoration: none; }
.vin2 .vin-links .vl-vin { font-family: var(--vin2-mono); font-size: 13.5px; font-weight: 600; }
.vin2 .vin-links .vl-meta { font-size: 12.5px; color: var(--ink-dim); }
.vin2 .vin-links .vl-bad { font-size: 12.5px; color: var(--fail); }
.vin2 .vl-more { margin: 12px 0 0; font-size: 14px; }

/* ---------------------------------------------------------------- телефон */
@media (max-width: 640px) {
  /* ХАБ С ОТВЕТОМ НА ТЕЛЕФОНЕ: запись торгов — на первый экран (r5, Давид: строки начинались у
     нижнего края). Ничего не удаляется: заголовок, вводная и справка мельче и плотнее, справка и
     вводная свёрнуты до строки (line-clamp; полный текст в разметке и на пустом хабе), строки
     записи плотнее. Пустой хаб и ошибка — без изменений. */
  .vin2-hub.is-res .vin-hero { margin-top: 14px; }
  .vin2-hub.is-res .vin-hero h1 { font-size: 22px; }
  .vin2-hub.is-res .vin2-title > .lead { margin-top: 4px; font-size: 13.5px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
  .vin2-hub.is-res .vin2-tool { margin-top: 12px; }
  .vin2-hub.is-res .vin-form button { min-height: 46px; margin-top: 6px; }
  .vin2-hub.is-res .vin-note { margin-top: 6px; font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
  .vin2-hub.is-res .vin-carpage { margin-top: 12px; }
  .vin2-hub.is-res .vin-carpage a { min-height: 46px; }
  .vin2-hub.is-res > .vin2-us { margin-top: 18px; padding-top: 16px; }
  .vin2-hub.is-res .rblock > h3 { font-size: 16.5px; margin-bottom: 4px; }
  .vin2-hub.is-res .rblock:has(> .rpath) > .rlead.muted { font-size: 13px; line-height: 1.4; margin-bottom: 6px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .vin2-hub.is-res .rpath li { padding: 7px 0; line-height: 1.35; }
  .vin2 { --vin2-gap: 24px; }
  .vin2 .block, .vin2 > .vin2-us { padding-top: 22px; }
  .vin2 .vin-hero { margin-top: 18px; }
  .vin2 .vin-hero h1 { font-size: 25px; }
  .vin2 .vin-form button { min-height: 50px; margin-top: 8px; }
  .vin2 .block h2, .vin2 .rblock > h2, .vin2 .rblock > h3 { font-size: 19px; }
  .vin2 .vin-carpage a { display: flex; width: 100%; min-height: 50px; }
  /* Текущий пункт крошек — тот же номер, что строкой ниже под именем машины: на телефоне скрыт
     вместе со своим разделителем (дубль; в разметке и в BreadcrumbList остаётся). */
  .vin2 .crumbs b, .vin2 .crumbs span:has(+ b) { display: none; }
  /* Решающие строки записи — на первый экран: вводная тише и короче по высоте. */
  .vin2 .rblock > .rlead.muted { font-size: 13.5px; line-height: 1.45; margin-bottom: 10px; }
  .vin2 .rpath li { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); }
  .vin2 .ck-lotshots { margin-bottom: 4px; }

  /* Строка номера в схеме: та же логика main (17 клеток по 38px не влезают), новый вид. */
  .vin2 .vin-scheme { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); padding: 12px; }
  .vin2 .vin-cell { background: none; border: 0; font-size: 20px; font-weight: 600; }
  .vin2 .vin-cell.plain { color: var(--ink); border: 0; background: none; }
  .vin2 .vin-cell.serial { color: var(--ink-faint); background: none; font-size: 20px; }
  .vin2 .vin-cell.check { color: var(--ok); background: none; border: 0; }
  .vin2 .vin-cell.year { font-size: 20px; padding: 1px 6px; border-radius: 4px; background: var(--ink); color: #fff; }

  /* Описание позиции — заголовок строкой, пояснение под ним (main сливал их в один абзац). */
  /* Расшифровка плотнее (r3 UX P2): шаг строки плиток ~46px вместо ~58, запись торгов ближе. */
  .vin2 .kv > div { padding: 6px 0 7px; }
  .vin2 .kv dt { font-size: 12px; margin-bottom: 1px; }
  .vin2 .kv dd { line-height: 1.3; }
  .vin2 .vin-legend { margin-top: 10px; }
  .vin2 .vin-legend li { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 0; border-bottom: 1px solid var(--line); }
  /* Заголовок строкой, описание под ним: одним абзацем (r4) повтор начала читался как заикание
     «Контрольная цифра Контрольная цифра» (Нино и UX r4); сам повтор — в строках, не в вёрстке. */
  .vin2 .vin-legend .t { display: block; margin: 0; }
  .vin2 .vin-legend p { display: block; margin: 2px 0 0; }

  .vin2 .vin-year .c { font-size: 18px; }
  .vin2 .vin-years-more {
    min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius);
    font-size: 14px; font-weight: 600;
  }

  .vin2 .vin-where li { grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 0; border-bottom: 1px solid var(--line); }
  .vin2 .vin-where li:last-child { border-bottom: 0; }
  .vin2 .vin-where .t { display: block; margin: 2px 0 0; }
  .vin2 .vin-where p { display: block; margin: 2px 0 0; }
  .vin2 .vin-where .body { font-size: 13px; }

  /* Плавающая панель — слой управления: стекло, одна чернильная кнопка и контур. */
  /* Как плавающая панель посадочных /ceny (seo_v2.css): та же форма, отступ и стекло — одна
     грамматика на сайте; фон плотнее (r1: под панелью просвечивал текст), низ с запасом на
     «чёлку» iPhone. */
  .vin2 .vin-bar {
    left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 8px; gap: 8px;
    border: 1px solid var(--line); border-radius: 16px;
    background: rgba(255, 255, 255, .95); box-shadow: none; border-color: var(--line-strong);
    -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  }
  .vin2 .vin-bar a { min-height: 46px; border-radius: var(--radius); font-size: 14.5px; font-weight: 600; }
  .vin2 .vin-bar a.go { background: var(--ink); color: #fff; }
  .vin2 .vin-bar a.alt { border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); }
  /* r6 P1: на панели всегда одно чернильное действие, вторая кнопка тише (в r3 контур у «Расшифровать» делал обе равными). */
  .vin2-hub.is-res .vin-bar a.alt { border-color: var(--line); color: var(--ink-dim); font-weight: 500; }

  .vin2 .vc-lead { font-size: 15.5px; padding: 12px 14px; }
  .vin2 .vc-head .car { font-size: 27px; }
}
@media (prefers-reduced-transparency: reduce) {
  .vin2 .vin-bar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}