:root {
  color-scheme: light;
  /* Палітра з @vybiro/design-tokens: VINTO — інструмент VYBIRO, а не окремий сайт. */
  --bg: #f6f5f9;
  --surface: #ffffff;
  --surface-soft: #f8f6fa;
  --surface-sunk: #f1eef5;
  --text: #0b0e15;
  --muted: #6f6877;
  --border: #e2dde7;
  --accent: #7c3aed;
  --accent-strong: #6d28d9;
  --accent-soft: rgb(124 58 237 / 10%);
  --green: #008a72;
  --danger: #b4232f;
  --shadow: 0 18px 48px rgb(36 26 53 / 10%);
  --radius: 18px;
  --radius-sm: 12px;
  --page-max: min(1760px, calc(100vw - 40px));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0e15;
  --surface: #11151e;
  --surface-soft: #171c27;
  --surface-sunk: #0e121a;
  --text: #f8fafc;
  --muted: #98a2b3;
  --border: #262e3d;
  --accent: #8b5cf6;
  --accent-strong: #a78bfa;
  --accent-soft: rgb(139 92 246 / 14%);
  --green: #2dd4bf;
  --danger: #fb7185;
  --shadow: 0 22px 60px rgb(0 0 0 / 40%);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Один контур на весь набір: іконки мають читатися як система, а не як набір картинок. */
.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * Сцена сторінки.
 *
 * Авто в неоні лежить тлом усієї сторінки, а не картки: воно задає настрій і не
 * заважає читати. Зображення стиснуте у WebP до двадцяти кілобайт — на такому тлі
 * повнорозмірний PNG на мегабайт коштував би дорожче за всі дані, які інструмент
 * віддає за запит.
 *
 * Тло не тягнеться вгору: угорі текст, і картинка під ним лише зашумила б заголовок.
 */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}
.page::before {
  background-image: url("assets/scene/hero-car.webp");
  background-position: center bottom;
  background-repeat: no-repeat;
  /* `cover`, а не фіксована ширина: сцена має бути тлом на всю ширину екрана. Із
     заданою шириною було видно прямокутні краї картинки — вона читалася як вставлений
     малюнок, а не як тло сторінки. */
  background-size: cover;
  content: "";
  height: min(78vh, 900px);
  inset: auto 0 0;
  /* Радіальна маска розчиняє сцену з усіх боків. Лінійна гасила лише верх і низ, а з
     боків кадр обривався різко по краю екрана. */
  mask-image: radial-gradient(125% 95% at 50% 96%, #000 38%, transparent 76%);
  opacity: .62;
  pointer-events: none;
  position: fixed;
  z-index: 0;
}
:root:not([data-theme="dark"]) .page::before { opacity: .14; }
.page > * { position: relative; z-index: 1; }

/* -------------------------------------------------------------------- шапка */

.app-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--page-max);
  padding: 16px 0;
  width: 100%;
}
.logo { align-items: center; display: inline-flex; gap: 10px; }
.logo__mark { height: 36px; width: 36px; }
.logo__text { display: grid; line-height: 1; }
.logo__text strong { font-size: 1.06rem; font-weight: 800; letter-spacing: .1em; }
.logo__text small { color: var(--muted); font-size: .6rem; font-weight: 700; letter-spacing: .18em; margin-top: 5px; }

.theme-toggle {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}
.theme-toggle:hover { color: var(--text); }

main {
  flex: 1;
  margin: 0 auto;
  max-width: var(--page-max);
  padding-bottom: 28px;
  width: 100%;
}

/* ---------------------------------------------------------------- стартовий */

.hero { padding: 26px 0 20px; text-align: center; }
.hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -.03em; line-height: 1.1; margin: 0 0 8px; }
.hero p { color: var(--muted); font-size: .95rem; line-height: 1.5; margin: 0 auto; max-width: 56ch; }
.hero[hidden] { display: none; }

/*
 * Робоча картка — одна на все.
 *
 * Пошук і відповідь живуть в одній картці, розділені лініями, а не лежать окремими
 * плитками. Це не лише про вигляд: розмитий шильдик має належати чомусь одному. Поки
 * карток було дві, він або обривався на межі пошуку, або дублювався у відповіді —
 * саме це й виглядало неохайно.
 *
 * Обрізання винесене в окремий шар: сама картка нічого не ріже, інакше випадайки зі
 * списком моделей обривалися б по її межі.
 */
.workspace {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 0 auto;
  max-width: 980px;
  position: relative;
  transition: max-width .3s ease;
}
.workspace.is-wide { max-width: none; }
.workspace > * { position: relative; z-index: 1; }
/* Пошук вище за відповідь: панель довідки розкривається поверх результату, а не під ним. */
.workspace > .finder { z-index: 3; }
.workspace__backdrop {
  border-radius: inherit;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

/*
 * Емблема марки як тло всієї картки.
 *
 * Вона велика й лежить праворуч, а краї розчиняє радіальна маска — знак не обривається
 * об межу картки, як це було з прямокутним обрізанням. Розмиття мінімальне: марка має
 * лишатися впізнаваною, приглушує її прозорість.
 */
.workspace__glow {
  /* Величезний і розмитий: емблема — тло всієї картки, а не ще одна іконка. */
  filter: blur(10px) saturate(1.15);
  height: auto;
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 40%, transparent 78%);
  opacity: .16;
  position: absolute;
  right: -14%;
  top: 50%;
  transform: translateY(-50%);
  user-select: none;
  -webkit-user-drag: none;
  width: min(1500px, 80%);
}
:root[data-theme="dark"] .workspace__glow { opacity: .24; }

.finder { padding: 18px 20px 20px; }
.finder__bar { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 16px; }
.finder__bar .switch { margin-bottom: 0; }

/* Довідка: знак питання біля пошуку й панель з умовами під ним. */
.help { position: relative; }
.help__button {
  align-items: center;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: .95rem;
  font-weight: 800;
  height: 32px;
  justify-content: center;
  width: 32px;
}
.help__button:hover, .help__button[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.help__panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: .8rem;
  line-height: 1.45;
  padding: 12px 14px;
  position: absolute;
  right: 0;
  top: 40px;
  width: min(440px, calc(100vw - 48px));
  z-index: 20;
}
.help__panel[hidden] { display: none; }
.help__panel h3 { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .06em; margin: 0 0 6px; text-transform: uppercase; }
.help__panel h3 + ul { margin-bottom: 12px; }
.help__panel ul { margin: 0; padding-left: 18px; }
.help__panel li { margin: 3px 0; }
.help__panel .certainty { margin: 0 2px 0 0; vertical-align: middle; }

/*
 * Широкий екран: поле VIN не має тягнутися на весь екран. Пошук займає ліву колонку,
 * шапка відповіді (шильдик, назва, результат визначення) стає праворуч від нього,
 * а решта секцій іде під ними на всю ширину.
 */
.result-hero:empty, .result-head:empty { display: none; }
.workspace.is-wide {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(380px, 560px) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
}
.workspace.is-wide > .finder { grid-column: 1; grid-row: 1; }
/* Каталог зі стрічкою марок займає всю картку і не залежить від ширини поля VIN. */
.workspace.is-wide > .finder.is-catalog { grid-column: 1 / -1; }
.workspace.is-wide > .result-head { grid-column: 1; grid-row: 2; }
.workspace.is-wide > .result-hero { grid-column: 2; grid-row: 1 / 3; }
.workspace.is-wide > .result { grid-column: 1 / -1; grid-row: 3; }
/* Шильдик і назва під полем VIN: шильдик великий, назва одним рядком (розмір добирає скрипт). */
.result-head .sheet__head { align-items: flex-start; border-top: 0; flex-direction: column; gap: 14px; padding: 4px 20px 20px; }
.result-head .sheet__badge { height: 200px; width: 200px; border-radius: 34px; padding: 18px; }
.result-head .sheet__title { width: 100%; }
.result-head .sheet__title strong { font-size: 2.6rem; white-space: nowrap; }
.result-hero .sheet__side { padding: 18px 20px 14px 0; }

/* Невелика оцінка результату під таблицею: питання й дві кнопки. */
.feedback { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 20px 14px 0; }
.feedback__question, .feedback__thanks { color: var(--muted); font-size: .8rem; }
.feedback__button {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 650;
  padding: 5px 14px;
}
.feedback__button:hover { border-color: var(--accent); color: var(--accent); }
.feedback__button[disabled] { cursor: default; opacity: .5; }
@media (max-width: 960px) { .feedback { padding: 0 16px 14px; } }

.switch {
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: 999px;
  display: inline-flex;
  gap: 2px;
  margin-bottom: 16px;
  padding: 3px;
}
.switch__option {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-size: .88rem;
  font-weight: 650;
  padding: 8px 20px;
  transition: background .18s ease, color .18s ease;
}
.switch__option:hover { color: var(--text); }
.switch__option.is-active { background: var(--accent); color: #fff; }

.panel[hidden] { display: none; }

.vin-form { display: flex; gap: 10px; }
.vin-input { flex: 1; position: relative; }
.vin-input input {
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 1.02rem;
  letter-spacing: .12em;
  padding: 13px 74px 13px 15px;
  text-transform: uppercase;
  width: 100%;
}
.vin-input input:focus { border-color: var(--accent); outline: none; }
#vin-counter {
  color: var(--muted);
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  position: absolute;
  right: 14px;
  top: 50%;
  translate: 0 -50%;
}

.button {
  align-items: center;
  background: var(--accent);
  border: 0;
  border-radius: var(--radius-sm);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-weight: 650;
  gap: 8px;
  padding: 13px 26px;
  white-space: nowrap;
}
.button:hover { background: var(--accent-strong); }
.button[disabled] { cursor: progress; opacity: .7; }
.button__label { line-height: 1; }
.spinner { display: none; }
.button.is-busy .spinner {
  animation: spin .7s linear infinite;
  border: 2px solid rgb(255 255 255 / 40%);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  height: 13px;
  width: 13px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hint { color: var(--muted); font-size: .78rem; margin: 10px 0 0; }
.error { color: var(--danger); font-size: .82rem; margin: 10px 0 0; }

/*
 * Карусель марок у стилі coverflow.
 *
 * Навантаження тут не на сервер, а на браузер, і саме тому метод обраний такий:
 * гортання — нативний скрол із прилипанням, а глибина, масштаб і підсвітка — чистий
 * CSS від однієї змінної `--d` (відстань плитки до центру, від 0 до 1). JavaScript на
 * кожному кадрі лише читає `scrollLeft` і виставляє цю змінну; позиції плиток
 * пораховані один раз і закешовані, тож у кадрі немає жодного вимірювання розмітки.
 *
 * Сервер у гортанні не бере участі взагалі: усі 48 марок приходять одним запитом,
 * а бейджі — статичні файли, які браузер кешує.
 */
/*
 * Вікно каруселі.
 *
 * Стрічка обмежена по ширині й розчиняється до країв: плитки не обриваються різко об
 * межу картки, а тануть — так вони й розташовані в референсі. Маска тут дешевша за
 * градієнтні накладки поверх: браузер робить її на етапі композиції й не малює зайвих
 * шарів над кожною плиткою.
 */
/* Рівно шість плиток по 178 px кроку плюс краї активної: стрічка по центру картки. */
.carousel-shell { margin: 0 auto; max-width: 1124px; position: relative; }
.carousel-shell[hidden] { display: none; }

.carousel {
  display: flex;
  gap: 0;
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  overflow-x: auto;
  padding: 30px 0 28px;
  perspective: 1200px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel::before,
.carousel::after { content: ""; flex: none; width: calc(50% - 115px); }
.carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.carousel.is-dragging .bubble { pointer-events: none; }

/*
 * Прогресія від центру.
 *
 * `--d` — відстань плитки до центру в кроках стрічки, і вона **не обрізана одиницею**.
 * Саме в цьому була помилка попередньої версії: щойно значення впиралося в межу, усі
 * плитки далі першого сусіда ставали однакові, і стрічка виглядала пласким рядом.
 *
 * Тепер кожен наступний крок зменшує, віддаляє й притлумлює плитку далі за попередній,
 * а найдальші ще й трохи розмиваються — глибина читається з першого погляду. Розмиття
 * навмисно невелике й вмикається лише за межею `0.6`: більший радіус коштує дорого,
 * а на близьких сусідах він лише псує різкість емблеми.
 */
.bubble {
  --d: 1;
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 10px;
  margin-inline: -26px;
  padding: 0;
  scroll-snap-align: center;
  filter: blur(clamp(0px, calc((var(--d) - 0.6) * 1.1px), 3px));
  transform: perspective(1100px) rotateY(calc(min(var(--d), 3) * -15deg * var(--side, 1)))
    scale(calc(1 - var(--d) * 0.14)) translateZ(calc(var(--d) * -60px));
  transition: transform .2s ease-out, opacity .2s ease-out, filter .2s ease-out;
  width: 230px;
}

/*
 * Бічні шильдики — без карток: сама емблема й підпис.
 *
 * Рамка навколо кожної плитки перетворювала стрічку на сітку однакових коробок і
 * забирала в емблем усю виразність. Тепер оправа зʼявляється лише в тієї плитки, що
 * стоїть у центрі, — вона й позначає вибір.
 */
.bubble__frame {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 26px;
  display: flex;
  height: 190px;
  justify-content: center;
  padding: 8px;
  position: relative;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, padding .2s ease;
  width: 190px;
}
.bubble img { height: 100%; object-fit: contain; width: 100%; }
.bubble span { font-size: 1rem; font-weight: 650; text-align: center; }
.bubble small { color: var(--muted); font-size: .8rem; }

/* Центральна плитка ще й трохи більша за натуральну величину — вона головна. */
.bubble.is-active {
  color: var(--text);
  filter: none;
  transform: perspective(1100px) scale(1.08);
  z-index: 10;
}
.bubble.is-active .bubble__frame {
  background: var(--surface-soft);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 20px 50px rgb(124 58 237 / 32%);
  padding: 14px;
}
.bubble.is-active span { font-size: 1.18rem; font-weight: 700; }
.bubble.is-active small { color: var(--accent); }

.carousel-nav {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: center;
  padding-top: 4px;
}
.carousel-arrow {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  height: 38px;
  justify-content: center;
  transition: border-color .18s ease, color .18s ease;
  width: 38px;
}
.carousel-arrow:hover { border-color: var(--accent); color: var(--accent); }
.carousel-arrow[disabled] { cursor: default; opacity: .4; }
.carousel-track {
  background: var(--border);
  border-radius: 999px;
  flex: 1;
  height: 4px;
  max-width: 420px;
  overflow: hidden;
}
.carousel-thumb {
  background: linear-gradient(90deg, var(--accent), #22d3ee);
  border-radius: 999px;
  display: block;
  height: 100%;
  transition: transform .12s linear;
  transform-origin: left;
}

/* Обране авто: великий шильдик і поруч кроки вибору. */
.picked { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.picked[hidden] { display: none; }
.picked__badge {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex: none;
  height: 96px;
  justify-content: center;
  padding: 12px;
  width: 96px;
}
.picked__badge img { height: 100%; object-fit: contain; width: 100%; }
.picked__text { display: grid; gap: 4px; }
.picked__text strong { font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.1; }
.picked__crumbs { color: var(--muted); display: flex; flex-wrap: wrap; font-size: .85rem; gap: 8px; }
.picked__crumbs b { color: var(--text); font-weight: 650; }
.picked__reset {
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 650;
  padding: 0;
}
.picked__reset:hover { text-decoration: underline; }

.steps { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.steps:empty, .steps[hidden] { display: none; }
.step { display: grid; gap: 6px; position: relative; }
.step > label { color: var(--muted); font-size: .76rem; font-weight: 650; }

/*
 * Власна випадайка замість системної.
 *
 * Нативний `select` малює операційна система, і в темній темі він приходить білим
 * прямокутником з чужими шрифтами — на весь екран, поверх усього. Свій список коштує
 * сотні рядків, але він однаковий у всіх темах і браузерах, а в довгих переліках
 * (у Infiniti тридцять сім моделей) ще й дає пошук.
 */
.picker { position: relative; }
.picker__button {
  align-items: center;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  display: flex;
  font-size: .92rem;
  gap: 10px;
  justify-content: space-between;
  padding: 12px 14px;
  text-align: left;
  transition: border-color .15s ease;
  width: 100%;
}
.picker__button:hover { border-color: var(--accent); }
.picker__button[aria-expanded="true"] { border-color: var(--accent); }
.picker__button.is-empty { color: var(--muted); }
.picker__button .icon { color: var(--muted); height: 16px; width: 16px; }

.picker__panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  display: grid;
  left: 0;
  max-height: 340px;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
}
.picker__panel[hidden] { display: none; }
/* Якщо знизу місця немає, панель відкривається вгору: інакше вона впиралася б у край
   вікна й половина списку лишалася б за екраном. */
.picker__panel.is-up { bottom: calc(100% + 6px); top: auto; }
.picker__search {
  background: var(--surface-sunk);
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: .88rem;
  padding: 11px 14px;
  width: 100%;
}
.picker__search:focus { outline: none; }
.picker__list { max-height: 288px; overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.picker__list::-webkit-scrollbar { width: 8px; }
.picker__list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.picker__option {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  display: block;
  font-size: .9rem;
  padding: 9px 11px;
  text-align: left;
  width: 100%;
}
.picker__option:hover,
.picker__option.is-highlighted { background: var(--accent-soft); color: var(--accent); }
.picker__option.is-selected { font-weight: 700; }
.picker__option small { color: var(--muted); display: block; font-size: .76rem; font-weight: 400; margin-top: 2px; }
.picker__empty { color: var(--muted); font-size: .86rem; padding: 14px; text-align: center; }

/* ---------------------------------------------------------------- результат */

.result { display: grid; gap: 12px; margin-top: 14px; }
.result:empty { margin: 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}

/*
 * Відповідь — продовження тієї самої картки.
 *
 * Ані власної рамки, ані тіні: від пошуку її відділяє лінія, і разом вони читаються
 * як один аркуш, а не як стос плиток.
 */
.result { display: block; margin: 0; }
.result:empty { display: none; }
.sheet { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }

.sheet__head {
  align-items: center;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 20px;
}
/*
 * Шапка на два боки: ліворуч шильдик із назвою і чипами, праворуч — результат
 * визначення. Ліва колонка не ширша за 380 px, решту забирає результат.
 */
.sheet__hero {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 0 8px;
  /* `minmax(0, 1fr)`, а не `1fr`: інакше вкладена сітка фактів задає мінімальну ширину
     колонки, і на телефоні картка виїжджає за екран. */
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
}
.sheet, .result { max-width: 100%; min-width: 0; }
.sheet__hero .sheet__head { align-items: flex-start; border-top: 0; flex-direction: column; gap: 12px; }
.sheet__side { min-width: 0; padding: 14px 20px 14px 0; }
.sheet__side .card__title { margin-bottom: 6px; }
.sheet__badge {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: 0 12px 32px rgb(20 12 40 / 18%);
  display: flex;
  flex: none;
  height: 160px;
  justify-content: center;
  padding: 14px;
  width: 160px;
}
.sheet__badge img { height: 100%; object-fit: contain; width: 100%; -webkit-user-drag: none; }
.sheet__title { display: grid; gap: 4px; margin-right: auto; min-width: 0; }
.sheet__title strong { font-size: 2.4rem; letter-spacing: -.025em; line-height: 1.05; }
.sheet__title span { color: var(--muted); font-size: 1.05rem; }

/* Секції всередині картки: роздільник замість власної рамки й тіні. */
.sheet__section { border-top: 1px solid var(--border); padding: 12px 20px 14px; }
.sheet__section:last-child { padding-bottom: 18px; }

/*
 * Захист від копіювання.
 *
 * Це стримування, а не шифр: текст відповіді не виділяється, картинки не тягнуться,
 * скопійований фрагмент отримує підпис джерела, а внизу картки стоїть рядок © VYBIRO.
 * Повторюваний напис поверх результату прибрано на прохання власника — він заважав читати.
 */
.result {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}
.result img { -webkit-user-drag: none; }
.sheet__back { border-top: 1px solid var(--border); padding: 10px 20px 0; }
.sheet__back .choice .icon { transform: rotate(90deg); }
.sheet__credit {
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .72rem;
  padding: 10px 20px 14px;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: .7rem;
  font-weight: 650;
  gap: 5px;
  padding: 4px 10px;
}
.chip .icon { height: 14px; width: 14px; }
.chip.is-accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

.card__title {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: .72rem;
  font-weight: 700;
  gap: 7px;
  letter-spacing: .07em;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.card__title .icon { height: 15px; width: 15px; }

.grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

.group {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.group__head { align-items: center; color: var(--muted); display: flex; gap: 7px; margin-bottom: 6px; }
.group__head .icon { color: var(--accent); }
.group__head span { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.facts { display: grid; gap: 4px; margin: 0; }
.facts > div { display: flex; font-size: .82rem; gap: 10px; justify-content: space-between; line-height: 1.3; }
.facts dt { color: var(--muted); }
.facts dd { font-weight: 650; margin: 0; text-align: right; }
/*
 * Переліки на всю ширину картки пакуються в колонки фіксованої ширини зліва направо.
 *
 * На широкому екрані підпис ліворуч і значення праворуч розʼїжджалися на пів метра —
 * рядок не читався. Тепер кожен рядок не ширший за 340 px, значення стоїть поруч із
 * підписом, а колонок стільки, скільки влазить; порожнє місце праворуч лишається
 * емблемі марки.
 */
.sheet__section > .group .facts,
.sheet__side .group .facts {
  column-gap: 28px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 340px));
  justify-content: start;
}
.sheet__section > .group .facts > div,
.sheet__side .group .facts > div { border-bottom: 1px dashed var(--border); padding-bottom: 3px; }

/*
 * Одна позиція обслуговування — одна картка, скільки б варіантів вона не мала.
 *
 * Раніше пʼять допусків моторної оливи давали пʼять окремих карток із однаковим
 * підписом, і сторінка перетворювалася на стіну повторів. Тепер назва й іконка стоять
 * раз, а варіанти йдуть під ними.
 */
.options { display: grid; gap: 8px; }
.option { border-top: 1px dashed var(--border); padding-top: 8px; }
.option:first-child { border-top: 0; padding-top: 0; }
.option__scope { color: var(--text); font-size: .82rem; font-weight: 700; line-height: 1.3; }
.option__value { display: flex; font-size: .9rem; font-weight: 650; gap: 10px; justify-content: space-between; line-height: 1.35; }
.option__interval { color: var(--green); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.option__note { color: var(--muted); font-size: .78rem; line-height: 1.4; margin-top: 2px; }

/*
 * Позиція з багатьма варіантами розкладається на всю ширину.
 *
 * У Volkswagen до одного двигуна йде вісім коробок, і у вузькій колонці вони
 * витягувалися стовпцем на два екрани, поки сусідні картки лишалися порожніми. Тепер
 * така позиція займає весь рядок, а її варіанти самі шикуються в стільки колонок,
 * скільки влазить — і назва коробки стоїть першою, бо саме за нею людина знаходить свою.
 */
.group--wide { grid-column: 1 / -1; }
.group--wide .options {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
}
.group--wide .option {
  border-left: 2px solid var(--border);
  border-top: 0;
  padding: 2px 0 2px 10px;
}
.group--wide .option:first-child { padding-top: 2px; }

.notice {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.4;
  margin: 8px 0 0;
  padding: 7px 10px;
}
.sheet > .notice { border-radius: 0; border-width: 0 0 0 3px; margin: 0; padding: 8px 20px; }

.choices { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.choice {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font-size: .82rem;
  gap: 6px;
  padding: 7px 14px;
}
.choice:hover { border-color: var(--accent); color: var(--accent); }
.choice .icon { height: 15px; width: 15px; }

footer {
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.5;
  margin: 0 auto;
  max-width: var(--page-max);
  padding: 14px 0 20px;
  width: 100%;
}
footer p { margin: 3px 0; }

.certainty { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 8px; font-size: .66rem; white-space: nowrap; }
.certainty__dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 0 2px color-mix(in srgb, var(--lamp) 20%, transparent); }
.certainty--exact { --lamp: #22a65a; }
.certainty--uncertain { --lamp: #dfa900; }
.certainty--missing { --lamp: #e34c4c; }
.certainty__label { color: var(--muted); }
.certainty:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* Планшет: одна колонка; шильдик і назва поруч у рядок, таблиця під ними. */
@media (max-width: 960px) {
  .workspace.is-wide { display: block; }
  .sheet__hero, .result-hero .sheet__hero { grid-template-columns: minmax(0, 1fr); }
  .result-hero .sheet__hero { border-top: 1px solid var(--border); }
  .result-head .sheet__head { align-items: center; border-top: 1px solid var(--border); flex-direction: row; flex-wrap: wrap; gap: 16px; padding: 16px 20px; }
  .result-head .sheet__badge { height: 132px; width: 132px; border-radius: 24px; padding: 12px; }
  .result-head .sheet__title { flex: 1; min-width: 200px; width: auto; }
  .result-head .sheet__title strong { font-size: 2rem; }
  .result-hero .sheet__side, .sheet__side { border-top: 1px solid var(--border); padding: 12px 16px 14px; }
}

@media (max-width: 720px) {
  :root { --page-max: calc(100vw - 24px); }
  .vin-form { flex-wrap: wrap; }
  .button { justify-content: center; width: 100%; }
  .vehicle__badge { height: 76px; width: 76px; }
  .vehicle__title strong { font-size: 1.34rem; }
  .picked__badge { height: 76px; width: 76px; }
  .sheet__hero .sheet__head, .result-head .sheet__head { flex-direction: row; flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
  .sheet__badge, .result-head .sheet__badge { height: 96px; width: 96px; border-radius: 20px; padding: 10px; }
  .sheet__title strong, .result-head .sheet__title strong { font-size: 1.5rem; }
  .result-head .sheet__title { min-width: 0; }
  .sheet__section { padding: 12px 16px 14px; }
  .sheet > .notice { padding: 8px 16px; }
  .sheet__credit { padding: 10px 16px 14px; }
  .facts > div { flex-wrap: wrap; }
  .facts dd { text-align: left; }
  .workspace__glow { width: 110%; right: -30%; opacity: .12; }
}

/* ------------------------------------------------------------- коди OBD-II */
.vin-input--dtc input { letter-spacing: .06em; padding-right: 15px; }
.sheet__badge--dtc { flex-direction: column; gap: 4px; text-align: center; }
.dtc-badge__code {
  color: var(--accent);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
}
.result-head .sheet__badge--dtc .dtc-badge__code { font-size: 3rem; }
.dtc-badge__sub { color: var(--muted); font-size: .8rem; }
.dtc-badge__label { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dtc-block + .dtc-block { margin-top: 10px; }
.dtc-block__title {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: .7rem;
  font-weight: 700;
  gap: 8px;
  letter-spacing: .04em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.dtc-text { font-size: .9rem; line-height: 1.45; margin: 0; }
.dtc-text--en { opacity: .85; }
.dtc-list { display: grid; font-size: .88rem; gap: 4px; line-height: 1.4; margin: 0; padding-left: 18px; }
.dtc-grid { display: grid; gap: 14px 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.dtc-grid .dtc-block + .dtc-block { margin-top: 0; }
.dtc-related { display: flex; flex-wrap: wrap; gap: 6px; }
.dtc-related .choice { font-size: .8rem; gap: 8px; padding: 5px 12px; }
.dtc-related .choice b { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; }
.dtc-related .choice small { color: var(--muted); font-size: .74rem; }
.dtc-related .choice:hover small { color: inherit; }
.sheet__head--dtc .sheet__title { min-width: 0; width: 100%; }
.sheet__head--dtc .sheet__title strong { font-size: 1.9rem; line-height: 1.1; overflow-wrap: anywhere; white-space: normal; }
.result-head .sheet__head--dtc .sheet__title strong { font-size: 2.1rem; white-space: normal; }
.sheet__head--dtc .sheet__title span { overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .sheet__head--dtc .sheet__title strong,
  .result-head .sheet__head--dtc .sheet__title strong { font-size: 1.4rem; }
}
/* Шильдик коду на вузьких екранах: код меншим шрифтом, підпис категорії ховається. */
@media (max-width: 960px) {
  .result-head .sheet__badge--dtc .dtc-badge__code { font-size: 2rem; }
}
@media (max-width: 720px) {
  .sheet__badge--dtc, .result-head .sheet__badge--dtc { height: 96px; width: 120px; padding: 8px; }
  .dtc-badge__code, .result-head .sheet__badge--dtc .dtc-badge__code { font-size: 1.45rem; }
  .dtc-badge__label { display: none; }
  .dtc-badge__sub { font-size: .7rem; }
}
.switch__option { white-space: nowrap; }
@media (max-width: 720px) { .switch__option { padding: 8px 12px; } }
.dtc-makes { display: grid; gap: 6px; margin: 0; }
.dtc-makes > div { display: grid; gap: 2px 14px; grid-template-columns: 130px minmax(0, 1fr); font-size: .86rem; line-height: 1.35; }
.dtc-makes dt { color: var(--muted); font-weight: 650; }
.dtc-makes dd { display: grid; gap: 1px; margin: 0; }
.dtc-makes dd small { color: var(--muted); font-size: .78rem; }
@media (max-width: 720px) { .dtc-makes > div { grid-template-columns: 1fr; } }
/* Серйозність коду: кольоровий рядок, без окремої картки. */
.dtc-severity { align-items: center; display: flex; flex-wrap: wrap; font-size: .92rem; gap: 8px; margin: 0 0 8px; }
.dtc-severity b { border-radius: 999px; font-size: .78rem; font-weight: 750; letter-spacing: .03em; padding: 3px 10px; text-transform: uppercase; }
.dtc-severity--critical b { background: rgb(220 38 38 / 16%); color: #dc2626; }
.dtc-severity--high b { background: rgb(234 88 12 / 16%); color: #ea580c; }
.dtc-severity--medium b { background: rgb(202 138 4 / 16%); color: #b45309; }
.dtc-severity--low b { background: rgb(22 163 74 / 16%); color: #16a34a; }
/* Тло для коду OBD-II: замість емблеми марки — сам код, так само велетенський і розмитий. */
.workspace__glow-text {
  color: var(--accent);
  filter: blur(14px);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: min(36vw, 520px);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 40%, transparent 80%);
  opacity: .12;
  pointer-events: none;
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  user-select: none;
  white-space: nowrap;
}
.workspace__glow-text[hidden] { display: none; }
:root[data-theme="dark"] .workspace__glow-text { opacity: .16; }
@media (max-width: 960px) { .workspace__glow-text { font-size: 48vw; right: -20%; opacity: .08; } }
.result-hero .sheet__side--severity { padding-top: 0; }
.result-hero .sheet__side--severity .card__title { margin-bottom: 8px; }
.sheet__side .group--severity { margin-top: 10px; }
.sheet__side .group--severity .dtc-severity { margin-bottom: 6px; }
/* Серйозність — головний вердикт праворуч: більший шрифт, щоб його помічали одразу. */
.sheet__side .group--severity { padding: 14px 16px 16px; }
.sheet__side .group--severity .group__head span { font-size: .8rem; }
.sheet__side .group--severity .dtc-severity { font-size: 1.25rem; font-weight: 700; gap: 12px; margin: 4px 0 12px; }
.sheet__side .group--severity .dtc-severity b { font-size: 1rem; padding: 6px 16px; }
.sheet__side .group--severity .dtc-block__title { font-size: .8rem; margin-bottom: 6px; }
.sheet__side .group--severity .dtc-text { font-size: 1.05rem; line-height: 1.5; }
.sheet__side .group--severity .dtc-block + .dtc-block { margin-top: 14px; }
@media (max-width: 720px) {
  .sheet__side .group--severity .dtc-severity { font-size: 1.1rem; }
  .sheet__side .group--severity .dtc-text { font-size: .95rem; }
}

/* «Сподобався результат?» — спливаюче вікно після пошуку, з хрестиком. */
.feedback-toast {
  align-items: center;
  animation: feedback-in .3s ease;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  bottom: 20px;
  box-shadow: 0 16px 40px rgb(20 12 40 / 28%);
  display: flex;
  gap: 10px;
  left: 50%;
  max-width: calc(100vw - 32px);
  padding: 12px 44px 12px 16px;
  position: fixed;
  transform: translateX(-50%);
  z-index: 60;
}
.feedback-toast .feedback { padding: 0; }
.feedback-toast__close {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 6px;
  position: absolute;
  right: 8px;
  top: 8px;
}
.feedback-toast__close:hover { color: var(--text); }
@keyframes feedback-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* На телефоні вікно голосу — один рядок на всю ширину знизу. */
@media (max-width: 720px) {
  .feedback-toast { border-radius: 14px; bottom: 12px; padding: 10px 40px 10px 14px; width: calc(100vw - 24px); }
  .feedback-toast .feedback { flex-wrap: nowrap; }
  .feedback-toast .feedback__question { white-space: nowrap; }
}

/* ------------------------------------------------------ шапка порталу VYBIRO */
.app-header { gap: 18px; }
.brand { align-items: center; color: var(--text); display: inline-flex; flex: 0 0 auto; gap: 7px; line-height: 0; text-decoration: none; }
.brand__mark { height: 34px; overflow: visible; width: 37px; }
.brand__wordmark { height: auto; overflow: visible; width: 98px; }
.logo--page { border-left: 1px solid var(--border); margin-right: auto; padding-left: 16px; }
.app-nav { align-items: center; display: flex; gap: 20px; }
.app-nav a { color: var(--text); font-size: .9rem; font-weight: 650; text-decoration: none; transition: color .18s ease; }
.app-nav a:hover { color: var(--accent); }
.app-nav__account {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
}
@media (max-width: 720px) {
  .app-header { flex-wrap: wrap; gap: 10px 14px; padding: 12px 0; }
  .brand__wordmark { width: 84px; }
  .logo--page { border: 0; margin: 0; padding: 0; }
  .logo--page .logo__text small { display: none; }
  .app-nav { gap: 12px; margin-left: auto; }
  .app-nav__secondary { display: none; }
  .app-nav a { font-size: .84rem; }
}
/* Сторінка «тимчасово вимкнено»: той самий герой, лише з кнопками назад на портал. */
.hero--disabled { padding: 56px 0 40px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
a.button { text-decoration: none; }
.button--ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.button--ghost:hover { border-color: var(--accent); color: var(--accent); }

/*
 * Сторінки марок і моделей, які віддає сервер.
 *
 * Ці блоки, на відміну від картки коду, лишаються на екрані: сценарій їх не замінює, бо
 * замінювати нема чим — каталог відкривається натисканням, а не сам собою. Тому вигляд у
 * них має бути закінчений, а не «поки що так».
 */
.catalog-static, .dtc-static {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px 22px;
}
.catalog-static h2, .dtc-static h2 { font-size: 1.15rem; margin: 0 0 10px; }
.catalog-static h3, .dtc-static h3 { font-size: .95rem; margin: 18px 0 8px; }
.catalog-static p, .dtc-static p { margin: 0 0 10px; }
.catalog-static table { border-collapse: collapse; width: 100%; }
.catalog-static th { color: var(--muted); font-weight: 600; padding: 6px 12px 6px 0; text-align: left; vertical-align: top; }
.catalog-static td { padding: 6px 0; vertical-align: top; }
.catalog-static__service thead th { color: var(--text); }
.catalog-static tbody tr + tr th, .catalog-static tbody tr + tr td { border-top: 1px solid var(--border); }
/* Перелік моделей — колонки, бо в марки їх буває сімдесят, і стовпчик на екран не влазить. */
.catalog-static__models { columns: 2; column-gap: 26px; list-style: none; margin: 0 0 14px; padding: 0; }
.catalog-static__models li { break-inside: avoid; padding: 3px 0; }
.catalog-static__models span { color: var(--muted); font-size: .82rem; }
.catalog-static__note { color: var(--muted); font-size: .85rem; }
/*
 * Посилання в цих блоках лишалися синіми з підкресленням — тобто такими, якими їх малює
 * браузер, коли до них ніхто не дійшов. Поруч із рештою сторінки це читається як
 * недороблений шматок, а не як частина сайту.
 */
.catalog-static a { color: var(--accent); text-decoration: none; }
.catalog-static a:hover { text-decoration: underline; }
.catalog-static__models a { color: var(--text); }
.catalog-static__models a:hover { color: var(--accent); }
.dtc-static ul { margin: 0 0 10px; padding-left: 18px; }
@media (max-width: 720px) {
  .catalog-static, .dtc-static { padding: 16px; }
  .catalog-static__models { columns: 1; }
}

/*
 * Перелік марок на головній.
 *
 * Стоїть під інструментом, а не над ним: людина, яка прийшла з VIN у руках, не має
 * спотикатися об каталог. Але він має бути на сторінці — і для тих, хто VIN не знає, і
 * для пошуковика, якому інакше нема звідки дійти до тисячі трьохсот сторінок моделей.
 */
.brand-index { margin: 34px 0 0; }
.brand-index:empty { display: none; }
.brand-index h2 { font-size: 1.05rem; margin: 0 0 6px; }
.brand-index > p { color: var(--muted); font-size: .88rem; margin: 0 0 14px; }
.brand-index__list {
  display: grid;
  gap: 6px 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.brand-index__list a { color: var(--text); text-decoration: none; }
.brand-index__list a:hover { color: var(--accent); text-decoration: underline; }