/*
 * Тема по умолчанию. Всё оформление модуля настраивается токенами --vf-* —
 * клиент меняет их у себя, не трогая остальное. Ни одного !important:
 * стили скошены под .vf-module и ни с кем не воюют.
 */
.vf-module {
  --vf-surface: #ffffff;
  --vf-bg: #eef3f6;
  --vf-border: #c9d6dd;
  --vf-text: #173b4c;
  --vf-muted: #71838c;
  --vf-accent: #06415d;
  --vf-accent-contrast: #ffffff;
  --vf-accent-soft: #eaf1f5;
  --vf-link: #0878a6;
  --vf-danger: #b3261e;
  --vf-marker: #23a45f;             /* позиции деталей на схеме */
  --vf-marker-bright: rgba(84, 255, 84, .36); /* заливка маркеров на схеме */
  --vf-marker-soft: rgba(35, 164, 95, .14);
  --vf-marker-strong: rgba(35, 164, 95, .30);
  --vf-marker-link: #d99a06;        /* переходы «см. рис.» в другую группу */
  --vf-marker-link-soft: rgba(217, 154, 6, .16);
  --vf-marker-link-strong: rgba(217, 154, 6, .34);
  --vf-marker-sel: #c2352c;         /* отмеченные галочкой позиции на схеме */
  --vf-marker-sel-soft: rgba(194, 53, 44, .32);
  --vf-marker-sel-strong: rgba(194, 53, 44, .48);
  --vf-radius: 8px;
  --vf-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  font-family: var(--vf-font);
  color: var(--vf-text);
  box-sizing: border-box;
}

.vf-module *,
.vf-module *::before,
.vf-module *::after { box-sizing: inherit; }

/* Атрибут hidden должен побеждать любые display-правила классов ниже
 * (.vf-crumbs, .vf-row задают flex и без этого перекрывали бы его). */
.vf-module [hidden] { display: none; }

/* Вкладки */
.vf-tabs {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius);
  background: var(--vf-accent-soft);
}
.vf-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 4px;
  border: 0;
  border-radius: calc(var(--vf-radius) - 2px);
  background: transparent;
  color: var(--vf-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .12s, color .12s;
}
.vf-tab:hover { background: rgba(255, 255, 255, .72); color: var(--vf-accent); }
.vf-tab_active { background: var(--vf-accent); color: var(--vf-accent-contrast); }

/* Формы */
.vf-form { display: none; margin-top: 14px; }
.vf-form_active { display: block; }

.vf-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius);
  background: var(--vf-surface);
  overflow: hidden;
}
.vf-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 13px;
  border: 0;
  background: transparent;
  color: var(--vf-text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  outline: none;
}
.vf-input::placeholder { color: var(--vf-muted); font-weight: 500; letter-spacing: 0; text-transform: none; }
.vf-input:disabled { opacity: .5; }

.vf-button {
  flex: 0 0 auto;
  min-width: 92px;
  padding: 0 16px;
  border: 0;
  border-left: 1px solid var(--vf-border);
  background: var(--vf-accent);
  color: var(--vf-accent-contrast);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.vf-button:disabled { opacity: .6; cursor: default; }

.vf-hint { margin: 7px 0 0; color: var(--vf-muted); font-size: 11px; font-weight: 600; line-height: 1.4; }
.vf-error { min-height: 15px; margin: 6px 0 0; color: var(--vf-danger); font-size: 11px; font-weight: 700; line-height: 1.35; }
.vf-note { margin: 8px 0 0; color: var(--vf-muted); font-size: 12px; line-height: 1.45; }
.vf-link { color: var(--vf-link); font-size: 12px; font-weight: 700; }

/* Примеры */
.vf-examples {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
  color: var(--vf-muted);
  font-size: 11px;
  font-weight: 600;
}
.vf-example {
  padding: 0;
  border: 0;
  border-bottom: 1px dashed currentColor;
  background: transparent;
  color: var(--vf-link);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}

/* Скелетоны загрузки: блоки настоящих размеров, контент не прыгает */
.vf-skel { position: relative; overflow: hidden; border-radius: 6px; background: #e8eef2; }
.vf-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); animation: vf-shimmer 1.1s infinite; }
@keyframes vf-shimmer { to { transform: translateX(100%); } }
.vf-skel_title { width: 34%; height: 24px; }
.vf-skel_caption { width: 22%; height: 12px; margin-top: 9px; }
.vf-skel_line { width: 58%; height: 13px; margin-top: 9px; }
.vf-skel_tab { flex: 1 1 0; height: 34px; }
.vf-skel-rows { display: grid; gap: 7px; margin-top: 10px; padding-left: 8px; }
.vf-skel_row { height: 34px; }
.vf-skel_input { height: 48px; border-radius: 10px; }
.vf-skel_card { height: 262px; }
.vf-skel_h2 { width: 40%; height: 24px; margin: 2px 0 10px; }
.vf-skel_scheme { height: 720px; border-radius: 0; }
.vf-skel_trow { height: 46px; margin-bottom: 7px; }
.vf-skel_selsteps { height: 42px; margin-bottom: 12px; }
.vf-skel_brand { height: 92px; border-radius: 4px; }
.vf-selector__grid .vf-skel_brand + .vf-skel_brand { margin: 0; }
.vf-skel_input.vf-skel_input { margin-bottom: 12px; }
@media (max-width: 960px) {
  .vf-skel_scheme { height: 40vh; }
}

/* Тестовые VIN: список марок с примерами, как в v1 */
.vf-testvins__toggle { margin-top: 8px; padding: 0; border: 0; border-bottom: 1px dashed currentColor; background: transparent; color: var(--vf-link); cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; }
.vf-testvins { margin-top: 9px; padding: 10px; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface); max-height: 320px; overflow: auto; }
.vf-testvins__title { margin-bottom: 8px; color: var(--vf-text); font-size: 12.5px; font-weight: 800; }
.vf-testvins__grid { display: grid; gap: 2px; }
.vf-testvins__item { display: grid; gap: 1px; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; font: inherit; text-align: left; }
.vf-testvins__item:hover { background: var(--vf-accent-soft); }
.vf-testvins__brand { color: var(--vf-text); font-size: 12px; font-weight: 800; }
.vf-testvins__vin { color: var(--vf-link); font-family: Consolas, "Liberation Mono", monospace; font-size: 11px; font-weight: 700; }

/* Перенос значения на другую вкладку */
.vf-handoff {
  margin: 9px 0 0;
  padding: 9px 11px;
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius);
  background: var(--vf-bg);
}
.vf-handoff__text { margin: 0; color: var(--vf-muted); font-size: 11px; font-weight: 700; line-height: 1.4; }
.vf-handoff__row { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 0; }
.vf-handoff__button {
  padding: 5px 10px;
  border: 1px solid var(--vf-border);
  border-radius: calc(var(--vf-radius) - 2px);
  background: var(--vf-surface);
  color: var(--vf-accent);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}
.vf-handoff__button:hover { border-color: var(--vf-link); background: var(--vf-link); color: var(--vf-accent-contrast); }

/* Результаты */
.vf-results { margin-top: 16px; }
.vf-status { margin: 0; color: var(--vf-muted); font-size: 13px; }
.vf-found { margin: 0 0 10px; font-size: 13px; font-weight: 800; }
.vf-cards { display: grid; gap: 8px; }

/* Кнопка догрузки схем: сервер отдаёт выдачу окнами, остальное по нажатию. */
.vf-more {
  margin: 10px auto 0;
  display: block;
  padding: 9px 18px;
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius);
  background: var(--vf-surface);
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.vf-more:hover:not(:disabled) { border-color: var(--vf-accent, #888); }
.vf-more:disabled { opacity: .6; cursor: default; }
.vf-card {
  display: block;
  padding: 11px 13px;
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius);
  background: var(--vf-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color .12s, box-shadow .12s;
}
.vf-card:hover { border-color: var(--vf-link); box-shadow: 0 4px 14px rgba(18, 57, 76, .08); }
.vf-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vf-card__title { font-size: 14px; font-weight: 800; }
.vf-badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--vf-accent-soft);
  color: var(--vf-accent);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.vf-card__meta { margin: 6px 0 0; color: var(--vf-muted); font-size: 12px; }
.vf-card_click { cursor: pointer; }
.vf-card__legacy { display: inline-block; margin-top: 7px; color: var(--vf-muted); font-size: 11px; font-weight: 700; text-decoration: underline dashed; }
.vf-card__legacy:hover { color: var(--vf-link); }

/* Хлебные крошки */
.vf-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 4px; font-size: 12px; }
.vf-crumbs__link { padding: 0; border: 0; background: transparent; color: var(--vf-link); cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; }
.vf-crumbs__link:hover { text-decoration: underline; }
.vf-crumbs__here { color: var(--vf-text); font-weight: 800; }
.vf-crumbs__sep { color: var(--vf-muted); }

.vf-page { margin-top: 12px; }

/* Карточка машины */
.vf-vehicle__head { padding: 12px 14px; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface); }
.vf-vehicle__title { font-size: 16px; font-weight: 800; }
.vf-equip { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.vf-equip__item { padding: 3px 8px; border-radius: 99px; background: var(--vf-accent-soft); color: var(--vf-accent); font-size: 10.5px; font-weight: 700; }
.vf-equip__more { margin-top: 8px; }
.vf-equip__more > summary { color: var(--vf-muted); cursor: pointer; font-size: 11px; font-weight: 700; }
.vf-vehicle__head .vf-link { display: inline-block; margin-top: 9px; }

/* Меню быстрого отбора */
.vf-quick { margin-top: 10px; padding: 9px 11px; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface); }
.vf-quick__groups { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.vf-quick__title { margin-right: 4px; color: var(--vf-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.vf-quick__group { padding: 5px 11px; border: 1px solid var(--vf-border); border-radius: 99px; background: var(--vf-accent-soft); color: var(--vf-accent); cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 800; }
.vf-quick__group:hover { border-color: var(--vf-link); }
.vf-quick__group_open { background: var(--vf-accent); color: var(--vf-accent-contrast); border-color: var(--vf-accent); }
.vf-quick__panel { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--vf-border); }
.vf-quick__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.vf-quick__chip { padding: 4px 10px; border: 1px solid var(--vf-border); border-radius: 99px; background: var(--vf-surface); color: var(--vf-text); cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600; }
.vf-quick__chip:hover { border-color: var(--vf-link); color: var(--vf-accent); }
.vf-quick__chip_active { background: var(--vf-accent); border-color: var(--vf-accent); color: var(--vf-accent-contrast); font-weight: 800; }

/* Карточка машины: меню разделов слева, предпросмотр подразделов справа */
.vf-vehgrid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
.vf-nav { position: sticky; top: 12px; display: grid; gap: 6px; }
.vf-nav__branch { border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface); overflow: hidden; }
.vf-nav__summary { padding: 10px 13px; cursor: pointer; font-size: 13px; font-weight: 800; list-style-position: inside; }
.vf-nav__summary:hover { color: var(--vf-link); }
.vf-nav__children { display: grid; gap: 2px; padding: 2px 8px 8px; }
.vf-nav__leaf { padding: 8px 11px; border: 0; border-radius: calc(var(--vf-radius) - 2px); background: transparent; color: var(--vf-text); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; }
.vf-nav__leaf:hover { background: var(--vf-accent-soft); color: var(--vf-accent); }
.vf-nav__leaf_active { background: var(--vf-accent); color: var(--vf-accent-contrast); font-weight: 800; }
.vf-nav__leaf_active:hover { background: var(--vf-accent); color: var(--vf-accent-contrast); }
.vf-pane { min-height: 220px; }
@media (max-width: 960px) {
  .vf-vehgrid { grid-template-columns: minmax(0, 1fr); }
  .vf-nav { position: static; }
}

/* Дерево разделов */
.vf-tree { margin-top: 12px; display: grid; gap: 6px; }
.vf-tree__branch { border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface); overflow: hidden; }
.vf-tree__summary { padding: 10px 13px; cursor: pointer; font-size: 13px; font-weight: 800; list-style-position: inside; }
.vf-tree__summary:hover { color: var(--vf-link); }
.vf-tree__children { display: grid; gap: 2px; padding: 2px 8px 8px; }
.vf-tree__leaf { padding: 8px 11px; border: 0; border-radius: calc(var(--vf-radius) - 2px); background: transparent; color: var(--vf-text); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; }
.vf-tree__leaf:hover { background: var(--vf-accent-soft); color: var(--vf-accent); }
.vf-tree__dead { margin: 0; padding: 8px 11px; color: var(--vf-muted); font-size: 12.5px; }

/* Узлы раздела */
.vf-units__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.vf-unit { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface); cursor: pointer; font: inherit; text-align: left; transition: border-color .12s, box-shadow .12s; }
.vf-unit:hover { border-color: var(--vf-link); box-shadow: 0 4px 14px rgba(18, 57, 76, .08); }
.vf-unit__thumb { display: block; position: relative; overflow: hidden; border-radius: calc(var(--vf-radius) - 2px); background: #fff; }
.vf-unit__thumb img { display: block; width: 100%; height: 190px; object-fit: contain; transition: transform .15s; }
.vf-unit__thumb:hover img { transform: scale(1.04); }
.vf-unit__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; }
.vf-unit__label { min-width: 0; }
.vf-unit:hover .vf-unit__label { text-decoration: underline; }
.vf-unit__arrow { flex: 0 0 auto; color: var(--vf-link); font-size: 15px; line-height: 1; transition: transform .12s; }
.vf-unit:hover .vf-unit__arrow { transform: translateX(3px); }
.vf-unit__zoom { position: absolute; right: 6px; top: 6px; display: inline-flex; padding: 6px; border-radius: 8px; background: rgba(255, 255, 255, .95); border: 1px solid var(--vf-border); color: var(--vf-link); line-height: 0; cursor: zoom-in; box-shadow: 0 1px 5px rgba(18, 57, 76, .15); }
.vf-unit__zoom:hover { background: var(--vf-link); color: #fff; }

/* --- Лупа на схеме в карточке деталей --- */
.vf-scheme__zoom { position: absolute; right: 8px; top: 8px; z-index: 2; display: inline-flex; padding: 7px; border-radius: 8px; background: rgba(255, 255, 255, .92); border: 1px solid var(--vf-border); color: var(--vf-link); line-height: 0; cursor: pointer; }
.vf-scheme__zoom:hover { background: var(--vf-link); color: #fff; }
.vf-scheme__zoom svg { width: 16px; height: 16px; }

/* --- Полноэкранный просмотр схем --- */
.vf-lb { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; background: rgba(13, 24, 33, .88); }
.vf-lb[hidden] { display: none; }
body.vf-lb-open { overflow: hidden; }
.vf-lb__head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: #fff; }
.vf-lb__title { flex: 1; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-lb__counter { font-size: 13px; opacity: .75; }
.vf-lb__stage { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab; display: flex; align-items: center; justify-content: center; }
.vf-lb__stage:active { cursor: grabbing; }
.vf-lb__img { max-width: 92%; max-height: 92%; background: #fff; border-radius: 6px; user-select: none; will-change: transform; }
.vf-lb__foot { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 14px 18px; }
.vf-lb__zoomgroup { display: inline-flex; gap: 8px; }
.vf-lb__btn { position: relative; border: 0; font: inherit; cursor: pointer; padding: 0; }
.vf-lb__btn::before { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: 1; }

/* Стрелки листания — крупные, по бокам схемы */
.vf-lb__btn_prev, .vf-lb__btn_next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(13, 24, 33, .55); border: 2px solid rgba(255, 255, 255, .55); color: #fff;
  transition: background .12s, border-color .12s;
}
.vf-lb__btn_prev { left: 18px; }
.vf-lb__btn_next { right: 18px; }
.vf-lb__btn_prev:hover, .vf-lb__btn_next:hover { background: var(--vf-accent, #12394c); border-color: #fff; }
.vf-lb__btn_prev::before { content: '‹'; font-size: 38px; padding-bottom: 5px; }
.vf-lb__btn_next::before { content: '›'; font-size: 38px; padding-bottom: 5px; }
.vf-lb__btn_prev[hidden], .vf-lb__btn_next[hidden] { display: none; }

/* Зум — крупные светлые кнопки, читаются на тёмном фоне */
.vf-lb__btn_in, .vf-lb__btn_out {
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: #10394c; border: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  transition: background .12s, transform .08s;
}
.vf-lb__btn_in:hover, .vf-lb__btn_out:hover { background: #fff; transform: scale(1.06); }
.vf-lb__btn_in::before { content: '+'; font-size: 28px; }
.vf-lb__btn_out::before { content: '−'; font-size: 28px; }

/* Крестик — крупный, в правом верхнем углу окна */
.vf-lb__btn_close {
  position: absolute; top: 12px; right: 14px; z-index: 4;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(13, 24, 33, .55); border: 2px solid rgba(255, 255, 255, .55); color: #fff;
  transition: background .12s, border-color .12s;
}
.vf-lb__btn_close:hover { background: var(--vf-danger, #b3261e); border-color: #fff; }
.vf-lb__btn_close::before { content: '✕'; font-size: 21px; }

/* Переход в раздел — крупная яркая кнопка */
.vf-lb__action {
  padding: 14px 28px; border-radius: 999px; border: none;
  background: var(--vf-accent, #12394c); color: #fff;
  font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  transition: filter .12s, transform .08s;
}
.vf-lb__action:hover { filter: brightness(1.18); transform: scale(1.03); }
.vf-lb__action[hidden] { display: none; }

.vf-lb__head { padding-right: 70px; }

@media (max-width: 640px) {
  .vf-lb__img { max-width: 100%; max-height: 100%; }
  .vf-lb__foot { gap: 10px; }
  .vf-lb__btn_prev, .vf-lb__btn_next { width: 46px; height: 46px; }
  .vf-lb__btn_prev { left: 8px; }
  .vf-lb__btn_next { right: 8px; }
}

/* Двухколоночный разворот узла: схема слева, детали справа */
.vf-partsgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.vf-partsgrid_single { grid-template-columns: minmax(0, 1fr); }
.vf-partsgrid__scheme { position: sticky; top: 12px; }
.vf-partsgrid_single .vf-partsgrid__scheme { position: static; }
@media (max-width: 960px) {
  .vf-partsgrid { grid-template-columns: minmax(0, 1fr); }
  .vf-partsgrid__scheme { position: static; }
}

/* Схема с маркерами: зелёные — детали, жёлтые — переходы в другую группу */
.vf-scheme { position: relative; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: #fff; overflow: hidden; }
.vf-scheme__img { display: block; width: 100%; height: auto; }
.vf-scheme__overlay { position: absolute; inset: 0; }
.vf-rect { position: absolute; padding: 0; border: 1.5px solid var(--vf-marker); border-radius: 3px; background: var(--vf-marker-bright, rgba(84, 255, 84, .36)); cursor: pointer; }
.vf-rect:hover, .vf-rect_hot { background: var(--vf-marker-strong); box-shadow: 0 0 0 1px var(--vf-marker); }
.vf-rect_link { border-style: dashed; border-color: var(--vf-marker-link); background: var(--vf-marker-link-soft); }
.vf-rect_link:hover { border-style: solid; background: var(--vf-marker-link-strong); box-shadow: 0 0 0 1px var(--vf-marker-link); }

/* Информация о детали */
.vf-th-info, .vf-td-info { width: 34px; text-align: center; }
.vf-info { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--vf-link); cursor: pointer; }
.vf-info:hover { background: var(--vf-accent-soft); color: var(--vf-accent); }
.vf-info_open { background: var(--vf-accent); color: var(--vf-accent-contrast); }
.vf-info_open:hover { background: var(--vf-accent); color: var(--vf-accent-contrast); }
.vf-detailrow td { padding: 8px 12px 10px; background: var(--vf-bg); border-bottom: 1px solid var(--vf-border); }
.vf-detailrow__item { margin: 0 0 4px; font-size: 12px; line-height: 1.45; }
.vf-detailrow__item:last-child { margin-bottom: 0; }
.vf-detailrow__label { display: inline-block; margin-right: 7px; padding: 1px 7px; border-radius: 99px; background: var(--vf-accent-soft); color: var(--vf-accent); font-size: 10.5px; font-weight: 800; text-transform: uppercase; }

/* Таблица деталей */
.vf-table { width: 100%; border-collapse: collapse; background: var(--vf-surface); border: 1px solid var(--vf-border); border-radius: var(--vf-radius); overflow: hidden; font-size: 12.5px; }
.vf-table th { padding: 8px 10px; border-bottom: 1px solid var(--vf-border); background: var(--vf-accent-soft); color: var(--vf-accent); font-size: 11px; font-weight: 800; text-align: left; text-transform: uppercase; }
.vf-table td { padding: 4px 10px; border-bottom: 1px solid var(--vf-bg); vertical-align: middle; }
.vf-trow:hover td { background: var(--vf-accent-soft); }
.vf-trow_flash td { background: rgba(8, 120, 166, .18); }
.vf-td-ref { width: 52px; color: var(--vf-muted); font-weight: 800; }
.vf-td-count { width: 48px; text-align: center; }
.vf-number { padding: 2px 6px; border: 1px dashed var(--vf-border); border-radius: 5px; background: transparent; color: var(--vf-link); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .3px; }
.vf-number:hover { border-color: var(--vf-link); }
.vf-replace { color: var(--vf-muted); font-size: 11.5px; }
.vf-desc { display: block; margin-top: 2px; color: var(--vf-muted); font-size: 11px; }

/* Артикул: бренд и привязка к машине */
.vf-brandrow { margin-bottom: 8px; }
.vf-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius);
  background: var(--vf-surface);
  color: var(--vf-text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}
.vf-lookuprow { margin-top: 8px; }

/* Поиск по каталогу машины */
.vf-vfind { margin: 12px 0; }

/* Результаты поиска по машине и по артикулу */
.vf-vsearch__item { display: flex; gap: 12px; align-items: flex-start; }
.vf-vsearch__thumb { flex: 0 0 96px; overflow: hidden; border: 1px solid var(--vf-bg); border-radius: calc(var(--vf-radius) - 2px); background: #fff; }
.vf-vsearch__thumb img { display: block; width: 100%; height: 72px; object-fit: contain; }
.vf-vsearch__body { flex: 1 1 auto; min-width: 0; display: block; }
.vf-vsearch__parts { display: block; margin-top: 6px; }
.vf-vsearch__part { display: block; color: var(--vf-muted); font-size: 11.5px; line-height: 1.5; }

/* Строка с найденным номером в артикульном режиме */
.vf-trow_match td { background: rgba(8, 120, 166, .08); }
.vf-trow_match td:first-child { box-shadow: inset 3px 0 0 var(--vf-link); }



/* JCB: вход по типу техники вместо плоского списка из тысяч моделей. */
.vf-jcb-selector { display: grid; gap: 14px; }
.vf-jcb-selector__intro {
  padding: 13px 15px;
  border: 1px solid var(--vf-border);
  border-left: 4px solid var(--vf-accent);
  border-radius: var(--vf-radius);
  background: var(--vf-accent-soft);
}
.vf-jcb-selector__intro .vf-selector__step { margin-bottom: 4px; font-size: 16px; }
.vf-jcb-selector__lead { margin: 0; color: var(--vf-muted); font-size: 12.5px; line-height: 1.45; }
.vf-jcb-selector__searchrow { display: flex; align-items: center; gap: 12px; }
.vf-jcb-selector__search { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 10px 13px; text-transform: none; letter-spacing: 0; }
.vf-jcb-selector__counter { flex: 0 0 auto; color: var(--vf-muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.vf-jcb-selector__content { display: grid; gap: 14px; }
.vf-jcb-selector__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius);
  background: var(--vf-surface);
  color: var(--vf-text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}
.vf-jcb-selector__all:hover,
.vf-jcb-selector__all:focus-visible { border-color: var(--vf-link); background: var(--vf-accent-soft); outline: none; }
.vf-jcb-groups { display: grid; gap: 8px; }
.vf-jcb-groups__title { margin: 0; color: var(--vf-text); font-size: 14px; font-weight: 800; }
.vf-jcb-groups__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px; }
.vf-jcb-category {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 104px;
  padding: 13px 14px;
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius);
  background: var(--vf-surface);
  color: var(--vf-text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.vf-jcb-category:hover,
.vf-jcb-category:focus-visible {
  border-color: var(--vf-link);
  box-shadow: 0 4px 14px rgba(18, 57, 76, .09);
  outline: none;
  transform: translateY(-1px);
}
.vf-jcb-category__title { font-size: 13px; font-weight: 800; line-height: 1.25; }
.vf-jcb-category__hint { color: var(--vf-muted); font-size: 11.5px; line-height: 1.35; }
.vf-jcb-category__count { margin-top: auto; color: var(--vf-link); font-size: 11px; font-weight: 800; }
.vf-jcb-models__head { display: flex; align-items: center; gap: 12px; min-height: 30px; }
.vf-jcb-models__back {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-bottom: 1px dashed currentColor;
  background: transparent;
  color: var(--vf-link);
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
}
.vf-jcb-models__title { margin: 0; color: var(--vf-text); font-size: 14px; font-weight: 800; }
.vf-jcb-models {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 7px;
  max-height: 560px;
  padding-right: 4px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.vf-selector__option_jcb {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 9px 11px;
}
.vf-jcb-models__name { color: var(--vf-text); font-size: 12.5px; font-weight: 800; line-height: 1.25; }
.vf-jcb-models__meta { color: var(--vf-muted); font-size: 10.5px; font-weight: 600; }
.vf-jcb-models__more {
  justify-self: center;
  padding: 9px 18px;
  border: 1px solid var(--vf-border);
  border-radius: var(--vf-radius);
  background: var(--vf-surface);
  color: var(--vf-link);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}
.vf-jcb-models__more:hover,
.vf-jcb-models__more:focus-visible { border-color: var(--vf-link); background: var(--vf-accent-soft); outline: none; }

@media (max-width: 720px) {
  .vf-jcb-selector__searchrow { align-items: stretch; flex-direction: column; gap: 6px; }
  .vf-jcb-selector__counter { align-self: flex-end; }
  .vf-jcb-groups__grid,
  .vf-jcb-models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .vf-jcb-groups__grid,
  .vf-jcb-models { grid-template-columns: minmax(0, 1fr); }
  .vf-jcb-models__head { align-items: flex-start; flex-direction: column; gap: 6px; }
}
/* Цены у номера детали */
.vf-price { margin-left: 7px; color: var(--vf-link); font-size: 11px; font-weight: 800; text-decoration: underline dashed; white-space: nowrap; }

/* Мастер подбора без VIN */
.vf-selector__box { margin-top: 4px; }
.vf-selector__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; margin-top: 10px; }
.vf-selector__brand { padding: 9px 10px; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface); color: var(--vf-text); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; text-align: left; }
.vf-selector__brand:hover { border-color: var(--vf-link); color: var(--vf-accent); }
.vf-selector__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.vf-selector__title { font-size: 15px; font-weight: 800; }
.vf-selector__restart { padding: 0; border: 0; border-bottom: 1px dashed currentColor; background: transparent; color: var(--vf-link); cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.vf-selector__regions { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.vf-selector__region { padding: 5px 11px; border: 1px solid var(--vf-border); border-radius: 99px; background: var(--vf-surface); color: var(--vf-muted); cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.vf-selector__region_active { border-color: var(--vf-accent); background: var(--vf-accent); color: var(--vf-accent-contrast); }
.vf-selector__summary { margin: 0 0 8px; color: var(--vf-muted); font-size: 12px; font-weight: 700; }
.vf-selector__step { margin: 0 0 7px; font-size: 13px; font-weight: 800; }
.vf-selector__options { display: grid; gap: 5px; max-height: 380px; overflow-y: auto; }
.vf-selector__option { padding: 8px 11px; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface); color: var(--vf-text); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; text-align: left; }
.vf-selector__option:hover { border-color: var(--vf-link); background: var(--vf-accent-soft); }

/* Уведомление о копировании */
.vf-toast { position: fixed; right: 18px; bottom: 18px; z-index: 50; padding: 9px 14px; border-radius: var(--vf-radius); background: var(--vf-accent); color: var(--vf-accent-contrast); font-size: 12.5px; font-weight: 700; box-shadow: 0 6px 22px rgba(6, 65, 93, .3); }

/* Переход, встроенный в таблицу на свою позицию: жёлтый, чтобы не спутать
 * с деталью */
.vf-trow_ref { cursor: pointer; }
.vf-trow_ref td { background: var(--vf-marker-link-soft); border-bottom: 1px solid var(--vf-marker-link); }
.vf-trow_ref td:first-child { box-shadow: inset 3px 0 0 var(--vf-marker-link); color: #8a6103; }
.vf-trow_ref:hover td { background: var(--vf-marker-link-strong); }
.vf-refsub { display: block; margin-top: 2px; }
.vf-refarrow { color: #8a6103; font-size: 15px; font-weight: 800; }

/* Список переходов «см. рис.» в правой колонке */
.vf-links { margin-top: 12px; }
.vf-links__title { margin: 0 0 7px; font-size: 12px; font-weight: 800; text-transform: uppercase; color: var(--vf-muted); }
.vf-linkitem { display: flex; align-items: flex-start; gap: 9px; width: 100%; margin-bottom: 5px; padding: 7px 10px; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface); cursor: pointer; font: inherit; text-align: left; transition: border-color .12s, box-shadow .12s; }
.vf-linkitem:hover { border-color: var(--vf-marker-link); box-shadow: 0 2px 10px rgba(217, 154, 6, .18); }
.vf-linkitem__badge { flex: 0 0 auto; padding: 2px 8px; border: 1px dashed var(--vf-marker-link); border-radius: 6px; background: var(--vf-marker-link-soft); color: #8a6103; font-size: 11px; font-weight: 800; letter-spacing: .4px; white-space: nowrap; }
.vf-linkitem__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vf-linkitem__name { color: var(--vf-text); font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.vf-linkitem__sub { color: var(--vf-muted); font-size: 11px; line-height: 1.35; }
.vf-rect_link.vf-rect_hot { border-style: solid; background: var(--vf-marker-link-strong); box-shadow: 0 0 0 1px var(--vf-marker-link); }

/* Отмеченные галочкой позиции держатся красным до снятия выбора. Правила
 * стоят после наведения и переходов, поэтому выигрывают порядком, без
 * повышения веса и без !important. */
.vf-rect_sel,
.vf-rect_link.vf-rect_sel { border-style: solid; border-color: var(--vf-marker-sel); background: var(--vf-marker-sel-soft); box-shadow: 0 0 0 1px var(--vf-marker-sel); }
.vf-rect_sel:hover,
.vf-rect_sel.vf-rect_hot,
.vf-rect_link.vf-rect_sel:hover,
.vf-rect_link.vf-rect_sel.vf-rect_hot { background: var(--vf-marker-sel-strong); box-shadow: 0 0 0 2px var(--vf-marker-sel); }

/* ==================================================================
 * Раскладка виджета v1: постоянная панель поиска слева, контент справа.
 * ================================================================== */
.vf-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.vf-main { min-width: 0; }

.vf-side { display: grid; gap: 12px; position: sticky; top: 12px; }
.vf-side__panel { padding: 13px 14px; border: 1px solid var(--vf-border); background: #f6f9fb; }
.vf-side__title { margin: 0 0 9px; color: #10394c; font-size: 19px; font-weight: 900; }
.vf-side__version { margin-top: 7px; color: var(--vf-muted); font-size: 10px; font-weight: 700; text-align: right; letter-spacing: .4px; }
.vf-side__version a { color: var(--vf-muted); text-decoration: none; border-bottom: 1px dotted currentColor; }
.vf-side__version a:hover { color: var(--vf-link); }

/* Вкладки в боковой панели — компактнее общих */
.vf-side .vf-tabs { background: #eef3f7; }
.vf-side .vf-tab { padding: 6px 2px; font-size: 11px; }
.vf-side .vf-form { margin-top: 9px; }
.vf-side .vf-hint { margin-top: 5px; }
.vf-side .vf-error { min-height: 0; margin-top: 4px; }
.vf-side .vf-error:empty { display: none; }
.vf-side .vf-testvins__toggle { margin-top: 5px; }

/* Продолжение боковой колонки на карточке машины: Каталог | Быстрый отбор */
.vf-sidenav { padding: 12px; border: 1px solid var(--vf-border); background: var(--vf-surface); }
.vf-sidetabs { display: flex; gap: 3px; padding: 3px; border-radius: var(--vf-radius); background: #eef3f7; }
.vf-sidetab { flex: 1 1 0; padding: 8px 4px; border: 0; border-radius: calc(var(--vf-radius) - 2px); background: transparent; color: var(--vf-muted); cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; }
.vf-sidetab:hover { background: rgba(255, 255, 255, .8); color: var(--vf-accent); }
.vf-sidetab_active { background: var(--vf-accent); color: var(--vf-accent-contrast); }
.vf-sidenav .vf-nav { position: static; margin-top: 10px; padding-left: 8px; border-left: 3px solid var(--vf-accent); }
.vf-sidenav .vf-nav__branch { border: 0; border-bottom: 1px solid var(--vf-border); border-radius: 0; background: transparent; }
.vf-sidenav .vf-nav__summary { padding: 9px 4px; font-size: 12.5px; font-weight: 700; }
.vf-sidenav .vf-nav__leaf { font-size: 12px; }

/* Быстрый отбор по-старому: фильтр и вертикальный аккордеон */
.vf-qmenu { margin-top: 10px; display: grid; gap: 6px; }
.vf-qmenu__filter { padding: 9px 11px; border: 1px solid var(--vf-border); border-radius: 6px; background: var(--vf-surface); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.vf-qmenu__group { border-bottom: 1px solid var(--vf-border); }
.vf-qmenu__summary { padding: 9px 8px; background: #eaf3f8; color: var(--vf-text); cursor: pointer; font-size: 12.5px; font-weight: 700; list-style-position: inside; }
.vf-qmenu__summary:hover { color: var(--vf-accent); }
.vf-qmenu__items { display: grid; padding: 4px 0 8px; }
.vf-qmenu__item { padding: 6px 12px; border: 0; background: transparent; color: var(--vf-link); cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; text-align: left; }
.vf-qmenu__item:hover { text-decoration: underline; }
.vf-qmenu__item_active { color: var(--vf-accent); font-weight: 800; }

/* Панель машины в стиле v1 */
.vf-vcard { position: relative; padding: 18px 20px; border: 1px solid var(--vf-border); background: var(--vf-surface); }
.vf-vcard__nav { position: absolute; right: 14px; top: 12px; display: flex; align-items: center; gap: 6px; }
.vf-vcard__navbtn { width: 28px; height: 28px; border: 1px solid var(--vf-border); border-radius: 50%; background: var(--vf-surface); color: var(--vf-muted); cursor: pointer; font: inherit; font-size: 13px; line-height: 1; }
.vf-vcard__navbtn:hover { border-color: var(--vf-link); color: var(--vf-link); }
.vf-vcard__title { font-size: 21px; font-weight: 800; color: #10394c; }
.vf-vcard__caption { margin-top: 6px; color: var(--vf-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.vf-vcard .vf-equip { gap: 4px 16px; margin-top: 7px; }
.vf-vcard .vf-equip__item { padding: 0; border-radius: 0; background: transparent; color: var(--vf-text); font-size: 12.5px; font-weight: 500; }
.vf-vcard .vf-equip__key { color: var(--vf-muted); }
.vf-vcard .vf-equip__more { margin-top: 7px; }
.vf-vcard .vf-equip__more > summary { color: var(--vf-link); font-size: 12px; }

/* Правая зона карточки машины */
.vf-vehicle { display: grid; gap: 12px; }
.vf-vehicle .vf-vfind .vf-row { border-radius: 10px; }
/* Поиск по запчасти — обычный текст, не капс номера */
.vf-vfind .vf-input { text-transform: none; letter-spacing: 0; font-weight: 500; }

/* «Выберите каталог»: шаги подбора, поиск марки, сетка логотипов */
.vf-welcome__title { margin: 0 0 12px; color: #10394c; font-size: 23px; font-weight: 900; }
.vf-selsteps { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-left: 4px solid var(--vf-accent); background: #eef6fb; font-size: 12px; }
.vf-selsteps__label { font-weight: 700; color: var(--vf-text); margin-right: 4px; }
.vf-selsteps__step { padding: 4px 10px; border: 1px solid var(--vf-border); background: var(--vf-surface); color: var(--vf-text); font-weight: 700; }
.vf-selsteps__arrow { color: var(--vf-muted); }
.vf-selector__filterrow { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.vf-selector__filter { flex: 1 1 auto; padding: 10px 13px; border: 1px solid var(--vf-border); border-radius: 6px; background: var(--vf-surface); font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.vf-selector__count { flex: 0 0 auto; color: var(--vf-text); font-size: 12px; font-weight: 700; }
.vf-selector__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.vf-selector__brand { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 10px; border: 1px solid var(--vf-border); border-radius: 4px; background: var(--vf-surface); cursor: pointer; font: inherit; transition: border-color .12s, box-shadow .12s; }
.vf-selector__brand:hover { border-color: var(--vf-link); box-shadow: 0 4px 14px rgba(18, 57, 76, .08); }
.vf-selector__brand[hidden] { display: none; }
.vf-selector__logo { width: 46px; height: 46px; object-fit: contain; }
.vf-selector__name { font-size: 11px; font-weight: 700; text-align: center; color: var(--vf-text); }

/* Подписи карточек узлов — синие ссылки, как в v1 */
.vf-unit__name { color: var(--vf-link); }

/* Детальная: оба блока — белые карточки */
.vf-partsgrid__scheme, .vf-partsgrid__list { background: #fff; border: 1px solid var(--vf-border); padding: 12px; }
.vf-partsgrid__scheme .vf-schemebox { background: #fff; }
.vf-scheme-scroll { border: 0; }
.vf-schemebox .vf-zoombar { left: 12px; top: 12px; }
.vf-schemebox .vf-scheme__zoom { right: 12px; top: 12px; }

/* Таблица деталей: белый фон строк, без зебры */
.vf-table { background: #fff; border: 0; }
.vf-table th { background: #fff; color: var(--vf-muted); }
.vf-price { display: inline-block; padding: 3px 12px; border-radius: 4px; background: var(--vf-accent); color: var(--vf-accent-contrast); font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.vf-price:hover { filter: brightness(1.15); }

/* Выдача поиска по машине — широкие карточки v1 */
.vf-vsearch__list { display: grid; gap: 14px; margin-top: 10px; }
.vf-vsearch .vf-found { margin: 10px 0 0; color: #10394c; font-size: 13px; font-weight: 800; }
.vf-vsearch__item { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; padding: 14px; border: 1px solid var(--vf-border); background: var(--vf-surface); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.vf-vsearch__item:hover { border-color: var(--vf-link); box-shadow: 0 4px 14px rgba(18, 57, 76, .08); }
.vf-vsearch__thumb { display: block; border: 1px solid var(--vf-border); background: #fff; }
.vf-vsearch__thumb img { display: block; width: 100%; height: 190px; object-fit: contain; }
.vf-vsearch__body { min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.vf-vsearch__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vf-vsearch__title { color: #10394c; font-size: 15px; font-weight: 800; text-transform: uppercase; }
.vf-vsearch__parts { display: grid; gap: 6px; }
.vf-vsearch__part { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #eef6fb; border-radius: 4px; font-size: 12.5px; }
.vf-vsearch__partname { flex: 1 1 auto; min-width: 0; color: var(--vf-text); }
.vf-vsearch__part .vf-number { flex: 0 0 auto; }
.vf-price_ghost { background: var(--vf-surface); color: var(--vf-accent); border: 1px solid var(--vf-border); }
.vf-price_ghost:hover { border-color: var(--vf-link); color: var(--vf-link); filter: none; }
@media (max-width: 760px) {
  .vf-vsearch__item { grid-template-columns: minmax(0, 1fr); }
}

/* Полноширинная зона детальной карточки: под шапкой, два блока */
.vf-full { margin-top: 14px; }
.vf-full .vf-crumbs { margin-bottom: 4px; }

/* Детальная карточка v1: заголовок, зум-панель, отбор строк */
.vf-parts__title { margin: 2px 0 10px; color: #10394c; font-size: 19px; font-weight: 900; text-transform: uppercase; }
.vf-schemebox { position: relative; }
.vf-zoombar { position: absolute; left: 8px; top: 8px; z-index: 3; display: flex; gap: 4px; }
.vf-zoombar__btn { width: 32px; height: 32px; border: 1px solid var(--vf-border); border-radius: 6px; background: rgba(255, 255, 255, .92); color: var(--vf-text); cursor: pointer; font: inherit; font-size: 17px; font-weight: 700; line-height: 1; box-shadow: 0 1px 6px rgba(18, 57, 76, .14); }
.vf-zoombar__btn:hover { border-color: var(--vf-link); color: var(--vf-link); background: #fff; }
.vf-schemebox .vf-scheme__zoom { position: absolute; right: 8px; top: 8px; z-index: 3; box-shadow: 0 1px 6px rgba(18, 57, 76, .14); }
/* Высота области схемы — как у v1 (part__panzoom: 720px) */
.vf-scheme-scroll { overflow: auto; height: 720px; border: 1px solid var(--vf-border); background: #fff; }
@media (max-width: 960px) {
  .vf-scheme-scroll { height: auto; min-height: 220px; max-height: 70vh; }

  /* Кнопки навигации панели машины — строкой над заголовком,
   * чтобы не перекрывать его на узком экране. */
  .vf-vcard { padding: 12px 14px; }
  .vf-vcard__nav { position: static; margin-bottom: 8px; }
  .vf-vcard__title { font-size: 18px; }

  /* Таблица деталей: служебные колонки уже, номеру — больше места. */
  .vf-td-check, .vf-th-check { width: 24px; }
  .vf-td-ref { width: 40px; font-size: 10.5px; }
  .vf-table td { padding: 4px 6px; }
  .vf-td-count { width: 34px; }
}
.vf-scheme-scroll .vf-scheme { border: 0; width: fit-content; margin: 0 auto; }
.vf-scheme-scroll .vf-scheme__img { max-width: 100%; max-height: 72vh; width: auto; }
.vf-selbar { display: flex; gap: 8px; margin-bottom: 8px; }
.vf-selbar__show, .vf-selbar__clear { padding: 7px 14px; border: 1px solid var(--vf-border); border-radius: 4px; background: var(--vf-surface); color: var(--vf-text); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.vf-selbar__show { display: inline-flex; align-items: center; gap: 7px; }
.vf-selbar__show:disabled, .vf-selbar__clear:disabled { opacity: .45; cursor: default; }
/* Есть выбранные — кнопка загорается ярко-зелёным, в тон выбору строк */
.vf-selbar__show:not(:disabled) { background: var(--vf-marker); border-color: var(--vf-marker); color: #fff; box-shadow: 0 2px 8px rgba(35, 164, 95, .38); }
.vf-selbar__show:not(:disabled):hover { filter: brightness(1.08); }
.vf-selbar__show_on:not(:disabled) { background: var(--vf-accent); border-color: var(--vf-accent); box-shadow: 0 2px 8px rgba(18, 57, 76, .35); }
.vf-selbar__count { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #fff; color: var(--vf-marker); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.vf-selbar__show_on .vf-selbar__count { color: var(--vf-accent); }
.vf-td-check, .vf-th-check { width: 30px; text-align: center; }
.vf-check { width: 15px; height: 15px; accent-color: var(--vf-marker); cursor: pointer; }
.vf-table_selected tbody tr:not(.vf-trow_sel) { display: none; }
/* Выбранные строки — в зелёных тонах маркеров схемы */
.vf-table tbody tr.vf-trow_sel { background: var(--vf-marker-soft); box-shadow: inset 3px 0 0 var(--vf-marker); }
.vf-td-ref_click { cursor: pointer; }
.vf-td-ref_click:hover { color: var(--vf-marker); }
.vf-td-part { min-width: 0; }
.vf-partname { display: block; margin-bottom: 1px; color: #000; font-size: 11px; line-height: 1.3; }
.vf-replace { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.vf-replace__label { color: var(--vf-muted); font-size: 11.5px; font-weight: 700; }
.vf-replace__arrow { color: var(--vf-marker-link); font-size: 14px; font-weight: 800; line-height: 1; }
.vf-price_small { padding: 3px 10px; font-size: 10.5px; }
.vf-td-price { text-align: right; white-space: nowrap; }

@media (max-width: 960px) {
  .vf-layout { grid-template-columns: minmax(0, 1fr); }
  .vf-side { position: static; }
}

/* Карточка «VIN не найден»: расшифровка и запрос по VIN (перенос v1) */
/* Карточка «VIN не найден»: одно заметное предложение отправить запрос,
 * а не две серые строки. Стоит выше выбора марки — человек только что
 * искал по VIN, и ответ должен попадаться на глаза первым. */
.vf-vinreq { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--vf-border); border-left: 4px solid var(--vf-accent); border-radius: var(--vf-radius); background: var(--vf-accent-soft); }
.vf-vinreq__title { margin: 0 0 6px; color: var(--vf-text); font-size: 15px; font-weight: 800; }
.vf-vinreq__decoded { margin: 0 0 12px; color: var(--vf-muted); font-size: 13px; }
.vf-vinreq__link { display: inline-block; padding: 9px 18px; border: 0; border-radius: var(--vf-radius); background: var(--vf-accent); color: var(--vf-accent-contrast); font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; }
.vf-vinreq__link:hover { filter: brightness(1.12); }

/* Кнопка со снимком детали — рядом с ⓘ, тем же размером. */
.vf-photo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 2px;
  padding: 0;
  border: 1px solid var(--vf-border, #c9d6dd);
  border-radius: 6px;
  background: transparent;
  color: var(--vf-muted, #5c6b76);
  cursor: pointer;
}
.vf-photo:hover {
  color: var(--vf-accent, #06415d);
  border-color: var(--vf-accent, #06415d);
}