/* Токены — скопированы 1:1 из auto-auctions-work/landing_site/POGNALI_landing_v13_offline.html,
   чтобы каталог визуально не расходился с лендингом. Не выдумываем свою палитру. */
:root{
  --bg:#08080D; --bg-2:#0D0D14; --surface:#14141E; --surface-2:#1B1B27;
  --text:#ECEBF2; --muted:#A0A0AE; --muted-2:#6E6B82;
  --brand:#2B4CE0; --brand-2:#3E6BFF; --lime:#CCFF00; --gold:#C9A24B; --violet:#5A8CFF;
  --ok:#37D18B; --warn:#FFB020;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15); --line-lime:rgba(204,255,0,.14);
  --r:14px; --r-lg:22px; --shadow:0 20px 60px rgba(0,0,0,.5); --wrap:1200px;
  --body:'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --head:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.5;padding-bottom:70px}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
header.top{position:sticky;top:0;z-index:20;background:rgba(8,8,13,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:16px 0}
header.top .row{display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--head);font-weight:800;font-size:20px;letter-spacing:.02em}
.logo b{color:var(--lime)}
.crumbs{color:var(--muted);font-size:13px;margin:20px 0 6px}
.crumbs a:hover{color:var(--lime)}
h1{font-family:var(--head);font-weight:800;font-size:clamp(26px,3.4vw,38px);letter-spacing:-.01em;margin:4px 0 8px}
.sub{color:var(--muted);font-size:15px;margin-bottom:22px}
.disclaimer{font-size:12.5px;color:var(--muted-2);background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:10px 14px;margin:14px 0 26px}

/* ---- каталог: сетка моделей ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin:20px 0 50px}
.mcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;
  transition:.25s var(--ease-out)}
.mcard:hover{transform:translateY(-4px);border-color:var(--line-lime);box-shadow:var(--shadow)}
.mcard .ttl{font-family:var(--head);font-weight:700;font-size:19px}
.mcard .stat{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-top:10px}
.mcard .stat.trims-teaser{display:block;margin-top:4px}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;margin-top:12px}
.badge.observed{background:rgba(55,209,139,.15);color:var(--ok)}
.badge.insufficient{background:rgba(255,176,32,.15);color:var(--warn)}
.pending-note{color:var(--muted-2);font-size:13px;margin-top:24px}

/* ---- hero-фото модели на главной (одно фото, последняя известная генерация) ---- */
.mcard .mcard-hero{position:relative;margin:-20px -20px 14px;padding-top:66%;overflow:hidden;
  border-radius:var(--r-lg) var(--r-lg) 0 0;background:linear-gradient(160deg,#191926,#101018)}
.mcard .mcard-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---- поднос сравнения (compare tray) — общий для index/model/offer/compare ---- */
.compare-tray{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:30;
  display:flex;align-items:center;gap:14px;background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:999px;padding:10px 10px 10px 18px;box-shadow:var(--shadow)}
.compare-tray .ct-count{font-size:13px;font-weight:600;color:var(--text)}
.compare-tray .ct-open{background:var(--brand);color:#fff;font-weight:700;font-size:13px;
  padding:8px 16px;border-radius:999px}
.compare-tray .ct-open:hover{background:var(--brand-2)}
.compare-tray .ct-clear{background:none;border:1px solid var(--line-2);color:var(--muted);
  font-size:12px;padding:7px 12px;border-radius:999px;cursor:pointer;font-family:var(--body)}
.compare-tray .ct-clear:hover{color:var(--lime);border-color:var(--line-lime)}
/* Мобильная — трей компактнее (меньше высота/паддинги), чтобы меньше закрывал контент под собой
   на коротких страницах (position:fixed остаётся поверх при скролле — это by design). */
@media (max-width:480px){
  .compare-tray{padding:6px 6px 6px 12px;gap:8px;bottom:10px}
  .compare-tray .ct-count{font-size:12px}
  .compare-tray .ct-open{padding:6px 12px;font-size:12px}
  .compare-tray .ct-clear{padding:5px 9px;font-size:11px}
}

/* ---- чекбокс «Сравнить» на офферных карточках ---- */
.ccard .ccard-foot{display:flex;align-items:center;justify-content:space-between;padding:0 14px 14px;gap:8px}
.ccard .cmp-check{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap}
.ccard .cmp-check input{accent-color:var(--brand-2)}

/* ---- страница сравнения ---- */
.cmp-scroll{overflow-x:auto}
table.cmp-table{border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);min-width:100%}
table.cmp-table th,table.cmp-table td{padding:12px 16px;text-align:left;font-size:13.5px;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
table.cmp-table thead th{border-bottom:1px solid var(--line-2)}
table.cmp-table tbody th{color:var(--muted);font-weight:600;position:sticky;left:0;background:var(--surface)}
table.cmp-table tr:last-child td, table.cmp-table tr:last-child th{border-bottom:0}
table.cmp-table .cmp-remove{background:none;border:1px solid var(--line-2);color:var(--muted);
  border-radius:999px;width:22px;height:22px;cursor:pointer;margin-right:8px;font-size:11px}
table.cmp-table .cmp-remove:hover{color:var(--lime);border-color:var(--line-lime)}
.cmp-photo{width:140px;height:100px;object-fit:cover;border-radius:8px;display:block}
.cmp-photo.nophoto{display:flex;align-items:center;justify-content:center;background:var(--surface-2);
  color:var(--muted-2);font-size:11px;white-space:normal;text-align:center}

/* ---- карточка модели: аналитика ---- */
.section{margin:34px 0}
.section h2{font-family:var(--head);font-size:20px;margin-bottom:4px}
.section .hint{color:var(--muted);font-size:13px;margin-bottom:14px}
.curve-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.curve-tab{font-family:var(--head);font-weight:600;font-size:13px;color:var(--muted);background:var(--surface);
  border:1px solid var(--line);padding:8px 16px;border-radius:999px;cursor:pointer}
.curve-tab.active{background:var(--brand);border-color:var(--brand);color:#fff}
.year-select{font-family:var(--body);font-size:13px;color:var(--text);background:var(--surface);
  border:1px solid var(--line);padding:7px 12px;border-radius:999px;cursor:pointer;margin-left:auto}
.gen-chips{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
/* .regmonth-chip (год-месяц регистрации) и .filter-chip (проверка/повреждения, задача #1060 п.1-2)
   визуально повторяют .gen-chip 1:1 — разные классы нужны только чтобы JS различал панели кликов,
   не потому что вид должен отличаться. */
.gen-chip,.regmonth-chip,.filter-chip{font-family:var(--head);font-weight:600;font-size:12.5px;color:var(--muted);background:var(--surface);
  border:1px solid var(--line);padding:7px 14px;border-radius:999px;cursor:pointer}
.gen-chip.active,.regmonth-chip.active,.filter-chip.active{background:var(--brand-2);border-color:var(--brand-2);color:#fff}
.seg-note{font-size:12px;color:var(--muted-2);margin:-6px 0 14px}
.seg-note b{color:var(--muted)}
table.bins{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table.bins th,table.bins td{padding:10px 14px;text-align:left;font-size:13.5px;border-bottom:1px solid var(--line)}
table.bins th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
table.bins tr:last-child td{border-bottom:0}
table.bins .n{color:var(--muted-2);font-size:12px}
.insufficient-note{background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r);
  padding:16px;color:var(--muted);font-size:14px}

/* ---- спек-разница: чем машина из Китая отличается от версии для РФ ---- */
table.spec-diff-table td{vertical-align:top}
table.spec-diff-table .note-row td{border-bottom:1px solid var(--line);padding-top:0;padding-bottom:14px;font-size:12.5px}
.spec-badge{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.spec-badge.high{background:rgba(55,209,139,.15);color:var(--ok)}
.spec-badge.medium{background:rgba(255,176,32,.15);color:var(--warn)}
.spec-badge.gap{background:rgba(255,176,32,.15);color:var(--warn)}
.spec-badge.logical_inference{background:rgba(160,160,174,.15);color:var(--muted)}

/* ---- галерея фото модели ---- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.gallery-grid .gph{display:block;position:relative;padding-top:75%;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#191926,#101018)}
.gallery-grid .gph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:.25s var(--ease-out)}
.gallery-grid .gph:hover img{transform:scale(1.05)}

/* ---- таблица комплектаций ---- */
.trims-table td{vertical-align:top}
.trims-table .trim-name{font-weight:600}
.trims-table .trim-name-cn{color:var(--muted-2);font-size:11.5px;margin-top:2px}
.trims-table .msrp{font-weight:700;white-space:nowrap}
.rub-sub{display:block;font-weight:400;color:var(--muted-2);font-size:11.5px;white-space:nowrap}

/* ---- график (медиана по бинам пробега) и тепловая карта (цена × пробег) ---- */
.viz-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media (max-width:760px){.viz-row{grid-template-columns:1fr}}
.viz-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.viz-box h3{font-family:var(--head);font-size:14px;font-weight:600;color:var(--muted);margin-bottom:10px}
.viz-box svg{width:100%;height:auto;overflow:visible}
.viz-box .axis-label{fill:var(--muted-2);font-size:9.5px}
.viz-box .axis-caption{fill:var(--muted);font-size:10.5px;font-weight:600}
.viz-box .grid-line{stroke:var(--line);stroke-width:1}
.viz-box .axis-line{stroke:var(--line-2);stroke-width:1}
.viz-box .trend-line{fill:none;stroke:var(--lime);stroke-width:2}
.viz-box .trend-dot{fill:var(--lime)}
.viz-box .year-line{fill:none;stroke-width:2;opacity:.92}
.viz-box .year-dot{stroke:var(--bg);stroke-width:1}
.viz-box .cell-n{fill:var(--muted);font-size:9px;text-anchor:middle;dominant-baseline:middle}
.viz-box .cell-n.on-bright{fill:var(--bg)}
.scatter-dot-link{cursor:pointer}
.scatter-dot-link .year-dot{transition:r .1s}
.scatter-dot-link:hover .year-dot{r:6}
.scatter-tooltip{position:absolute;z-index:20;width:200px;background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;box-shadow:var(--shadow);
  pointer-events:auto;font-size:12px}
.scatter-tooltip .row{display:flex;justify-content:space-between;gap:8px;padding:3px 0}
.scatter-tooltip .row span:first-child{color:var(--muted)}
.scatter-tooltip .row span:last-child{text-align:right}
.scatter-tooltip-cmp{margin-top:8px;width:100%;background:var(--brand);color:#fff;font-weight:700;
  font-size:12px;padding:7px 10px;border-radius:8px;border:0;cursor:pointer;font-family:var(--body)}
.scatter-tooltip-cmp:hover{background:var(--brand-2)}
.scatter-mobile-card{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);padding:20px}
.scatter-mobile-card-inner{position:relative;width:min(320px,100%);background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:22px 18px 18px;box-shadow:var(--shadow)}
.scatter-mobile-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--surface);color:var(--text);font-size:18px;line-height:1;
  cursor:pointer}
.scatter-mobile-body{margin-top:6px}
.scatter-mobile-body .row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:14px;border-bottom:1px solid var(--line)}
.scatter-mobile-body .row:last-child{border-bottom:0}
.scatter-mobile-body .row span:first-child{color:var(--muted)}
.scatter-mobile-body .row span:last-child{text-align:right}
.scatter-mobile-goto{display:block;text-align:center;margin-top:10px}
.scatter-mobile-cmp{width:100%;margin-top:10px;background:none;border:1px solid var(--line-2);color:var(--text);
  font-weight:600;font-size:13px;padding:9px 10px;border-radius:8px;cursor:pointer;font-family:var(--body)}
.scatter-mobile-cmp:hover{border-color:var(--line-lime);color:var(--lime)}
.year-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.year-legend .year-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted)}
.year-legend .year-chip i{display:inline-block;width:9px;height:9px;border-radius:2px}

/* ---- сортировка — отдельный блок над панелью фильтров (владелец, 2026-07-29): раньше select
   сортировки был свален в один ряд с фильтрами цены/пробега и переключателем вида внутри
   .offers-toolbar, из-за чего терялся среди прочих контролов. ---- */
.sort-block{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.sort-block-title{font-family:var(--head);font-weight:600;font-size:13px;color:var(--muted)}

/* ---- панель фильтр/сортировка/вид над списком предложений (auto.ru-стиль) ---- */
.offers-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}
.range-filter{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:6px 12px}
.range-filter span{font-size:12px;color:var(--muted);white-space:nowrap}
.range-filter input{width:84px;background:none;border:none;color:var(--text);font-family:var(--body);font-size:13px}
.range-filter input:focus{outline:none}
.range-filter input::-webkit-outer-spin-button,.range-filter input::-webkit-inner-spin-button{margin:0}
.filter-reset{font-family:var(--body);font-size:12.5px;color:var(--muted);background:none;
  border:1px solid var(--line-2);border-radius:999px;padding:7px 14px;cursor:pointer}
.filter-reset:hover{color:var(--lime);border-color:var(--line-lime)}
.view-toggle{display:flex;gap:4px;margin-left:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:3px}
.view-btn{font-family:var(--body);font-size:12.5px;color:var(--muted);background:none;border:none;
  border-radius:999px;padding:6px 12px;cursor:pointer}
.view-btn.active{background:var(--brand-2);color:#fff}

/* ---- пагинация списка предложений (auto.ru-стиль) ---- */
.pagination{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:22px}
.page-btn{font-family:var(--body);font-size:13px;color:var(--muted);background:var(--surface);
  border:1px solid var(--line);border-radius:8px;padding:8px 13px;cursor:pointer;min-width:38px}
.page-btn:hover:not(:disabled){border-color:var(--line-lime);color:var(--text)}
.page-btn.active{background:var(--brand-2);border-color:var(--brand-2);color:#fff}
.page-btn:disabled{opacity:.35;cursor:default}
.page-ellipsis{color:var(--muted-2);font-size:13px;padding:0 4px}

/* ---- офферные карточки (переиспользуем .ccard из лендинга) ---- */
.otrack{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.otrack.list-view{display:flex;flex-direction:column;gap:10px}
.otrack.list-view .orow{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:.2s var(--ease-out)}
.otrack.list-view .orow:hover{border-color:var(--line-lime)}
.otrack.list-view .orow-link{display:flex;align-items:center;gap:14px;padding:10px 14px}
.otrack.list-view .orow-cap{width:88px;height:64px;flex:0 0 auto;border-radius:8px;overflow:hidden;
  background:linear-gradient(160deg,#191926,#101018);display:flex;align-items:center;justify-content:center;
  color:var(--muted-2);font-size:10.5px;text-align:center}
.otrack.list-view .orow-cap img{width:100%;height:100%;object-fit:cover;display:block}
.otrack.list-view .orow-main{flex:1 1 auto}
.otrack.list-view .orow-main .price{font-family:var(--head);font-weight:700;font-size:16px}
.otrack.list-view .orow-main .yr{color:var(--muted);font-size:13px;margin-top:2px}
.otrack.list-view .more{color:var(--brand-2);font-size:12px;font-weight:600;white-space:nowrap}
/* Отступ 112px отбивает подвал под текстовую колонку разметки .orow (фото 88px слева + два gap
   по 14px). У карточек .ccard, которые рендерит shared/car_tile.js, фото идёт сверху на всю
   ширину, и текст начинается от штатных 14px — поэтому правило привязано к .orow, иначе подвал
   уезжает вправо на ~98px относительно строк над ним. До ярлыка утильсбора (11.08) в подвале жил
   только прижатый вправо чекбокс «Сравнить», и перекос был не виден. */
.otrack.list-view .orow .ccard-foot{padding:0 14px 12px 112px}

/* ---- разделитель «Проверенные / Остальной рынок Китая» (E8.8, встреча Лёша×Антон 27.07) —
   визуальная группировка ПОВЕРХ единого потока пагинации (не отдельные секции): показывается,
   только когда verif-фильтр = «все» и у модели реально есть офферы обоих типов, см.
   shouldGroupByVerif() в model.html. grid-column:1/-1 растягивает заголовок на всю ширину
   .otrack-грида в режиме «Плитка»; .offers-group-row — тот же смысл строкой таблицы в «Список». */
.offers-group-header{grid-column:1/-1;display:flex;align-items:center;gap:10px;
  font-family:var(--head);font-weight:700;font-size:14px;color:var(--text);margin:6px 0 2px}
.offers-group-header:first-child{margin-top:0}
.offers-group-header::after{content:'';flex:1 1 auto;height:1px;background:var(--line)}
.offers-group-header.verified{color:var(--ok)}
.offers-group-row td{background:var(--bg-2);color:var(--muted);font-family:var(--head);font-weight:700;
  font-size:12px;text-transform:uppercase;letter-spacing:.03em;padding:9px 14px;border-bottom:1px solid var(--line)}
.offers-group-row.verified td{color:var(--ok)}

/* ---- «Список» = сортируемая таблица сравнения (задача #1060 финал, владелец 2026-07-29) —
   переиспользует table.bins/.cmp-scroll (уже объявлен выше для compare.html)/.spec-badge/
   .accident-signal 1:1, своей палитры не вводим. Горизонтальный скролл контейнера на мобильном —
   тот же паттерн, что у .cmp-table/.spec-diff-table, колонки не режем. ---- */
table.bins.offers-table{min-width:100%;width:auto}
.offers-table th,.offers-table td{white-space:nowrap;vertical-align:middle}
.offers-table .th-sort{cursor:pointer;user-select:none}
.offers-table .th-sort:hover{color:var(--text)}
.offers-table .th-arrow{color:var(--brand-2);margin-left:2px}
.offers-table .tbl-photo a{display:flex;align-items:center;justify-content:center;width:56px;height:40px;
  border-radius:6px;overflow:hidden;background:linear-gradient(160deg,#191926,#101018);color:var(--muted-2);
  font-size:9px;text-align:center;line-height:1.2}
.offers-table .tbl-photo img{width:100%;height:100%;object-fit:cover;display:block}
.offers-table .tbl-price a{color:var(--text);font-weight:700}
.offers-table .tbl-cny{display:block;color:var(--muted-2);font-size:11px;font-weight:400;margin-top:1px}
/* Явная подпись города у цены в таблице «Список» (#1483): «под ключ в Уссурийске» / «во
   Владивостоке» / «цена в Китае» — строкой под главной цифрой, тем же приглушённым тоном. */
.offers-table .tbl-price-loc{display:block;color:var(--muted-2);font-size:10.5px;font-weight:400;margin-top:1px}
/* Служебная (debug) метка источника — приглушённый оранжевый --warn, вне фирменной палитры.
   Базовое правило работает везде (таблица сравнения compare.html и пр.); ниже — уточнения. */
.src-debug{color:var(--warn)}
.offers-table .src-debug{color:var(--warn);font-size:11.5px;text-decoration:none}
.offers-table .src-debug:hover{text-decoration:underline}
.offers-table th.th-debug{color:var(--warn)}
/* Источник на карточке оффера показан ВСЕГДА, но помечен как служебная (debug) инфа: приглушённый
   оранжевый --warn, вне фирменной палитры карточки, и без lime-hover обычной .ccard .src. */
.ccard .src.src-debug{color:var(--warn)}
.ccard .src.src-debug:hover{color:var(--warn);text-decoration:underline}
.debug-tag{opacity:.75;font-size:.9em;font-weight:400}
.offers-table .cmp-check{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap}
.offers-table .cmp-check input{accent-color:var(--brand-2)}
.ccard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:.25s var(--ease-out)}
.ccard:hover{transform:translateY(-4px);border-color:var(--line-lime);box-shadow:var(--shadow)}
.ccard .ccard-link{display:block}
.ccard .cap{position:relative;height:150px;background:linear-gradient(160deg,#191926,#101018);overflow:hidden}
.ccard .cap img{width:100%;height:100%;object-fit:cover;display:block}
.ccard .cap.nophoto{display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:12px}
.verify-badge{position:absolute;top:8px;left:8px;background:rgba(0,131,0,.85);color:#fff;font-size:10.5px;
  font-weight:700;padding:3px 8px;border-radius:999px;letter-spacing:.02em}
/* E8.29: шильдик льготного утильсбора — в плитке под бейджем «проверено» (не перекрывает счётчик
   фото справа-снизу), в hero карточки — верхний правый угол */
.pref-badge{position:absolute;top:32px;left:8px;background:rgba(46,160,67,.92);color:#fff;font-size:10.5px;
  font-weight:700;padding:3px 8px;border-radius:999px;letter-spacing:.02em;white-space:nowrap;z-index:2}
.pref-badge.borderline{background:rgba(176,132,0,.92)}
.offer-hero .pref-badge{top:8px;left:auto;right:8px}
/* E8.29: чип-тоггл «Льготный утильсбор» в тулбарах листингов */
.pref-toggle{font-family:var(--body);font-size:13px;font-weight:600;color:var(--text);
  background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:8px 14px;
  cursor:pointer;white-space:nowrap;transition:.15s}
.pref-toggle:hover{border-color:rgba(46,160,67,.7)}
.pref-toggle.active{background:rgba(46,160,67,.92);border-color:rgba(46,160,67,.92);color:#fff}
.lgota-cta{margin:2px 0 10px;font-size:14px}
.lgota-cta a{color:rgb(76,190,100);font-weight:600;text-decoration:none}
.lgota-cta a:hover{text-decoration:underline}
.orow-cap{position:relative}
.ccard .body{padding:14px 14px 4px}
.ccard .yr{color:var(--muted);font-size:13px;margin:2px 0 8px}
.ccard .price{font-family:var(--head);font-weight:700;font-size:18px}
/* Явная подпись города НАД главной ценой карточки (#1483): «Цена под ключ в Уссурийске» /
   «во Владивостоке» / «Цена в Китае». */
.ccard .price-loc{color:var(--muted-2);font-size:11px;margin-bottom:1px}
.ccard .price-sub{color:var(--muted-2);font-size:11.5px;margin-top:2px}
/* Плитка «Прайс-таблица» — Вариант 3 (#1488, model.html): Китай первой строкой, «под ключ»
   второй (главной), сноска-статус про российскую цену. Классы новые, чтобы не задеть другие
   страницы, переиспользующие .ccard (index/лендинг/витрины поставщиков). */
.ccard .tile-title{font-family:var(--head);font-weight:700;font-size:14.5px;margin-bottom:8px}
.ccard .ptable{width:100%;border-collapse:collapse}
.ccard .ptable td{padding:3px 0;vertical-align:baseline}
.ccard .ptable td.pl{color:var(--muted-2);font-size:12px;padding-right:8px;white-space:nowrap}
.ccard .ptable td.pv{text-align:right;font-size:12.5px;color:var(--muted)}
.ccard .ptable tr.prow-main td.pl{color:var(--muted);font-weight:600}
.ccard .ptable tr.prow-main td.pv{font-family:var(--head);font-weight:700;font-size:16.5px;color:var(--text)}
.ccard .ptable .pv-cny{color:var(--muted-2);font-size:11px}
.ccard .ptable .pv-lead{color:var(--lime);font-weight:600;font-size:13px;cursor:pointer;white-space:normal}
.ccard .ptable .pv-lead:hover{text-decoration:underline}
.ccard .pstatus{font-size:11px;margin-top:6px}
.ccard .pstatus.ok{color:var(--ok)}
.ccard .pstatus.warn{color:var(--warn)}
.ccard .pstatus.gray{color:var(--muted-2)}
.ccard .cap .ph-count{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.55);color:#fff;font-size:10.5px;padding:2px 8px;border-radius:999px}
.ccard .more{color:var(--brand-2);font-size:12px;font-weight:600;margin-top:8px}
.ccard .src{display:block;padding:6px 14px 14px;font-size:12px;color:var(--muted-2)}
.ccard .src:hover{color:var(--lime)}

/* ---- страница отдельного предложения ---- */
.offer-back{display:inline-block;margin-bottom:18px;color:var(--muted);font-size:13px}
.offer-back:hover{color:var(--lime)}
/* Компоновка Б (owner 01.08 #1471): инфо (ТТХ/параметры) под галереей, цена — правая колонка.
   На мобиле области складываются в DOM-порядке: галерея → цена → инфо. */
.offer-layout{display:grid;grid-template-columns:1.1fr 1fr;grid-template-areas:"g p" "i p";gap:18px 28px;align-items:start}
.ol-gallery{grid-area:g}.ol-price{grid-area:p}.ol-info{grid-area:i;min-width:0}
@media (max-width:760px){.offer-layout{grid-template-columns:1fr;grid-template-areas:"g" "p" "i"}}
.offer-hero{position:relative;background:linear-gradient(160deg,#191926,#101018);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:var(--muted-2)}
.offer-hero img{width:100%;height:100%;object-fit:cover;display:block}
.offer-price{font-family:var(--head);font-weight:800;font-size:34px;margin-top:4px}
.offer-price-sub{color:var(--muted-2);font-size:13px;margin:4px 0 20px}
.offer-specs{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.offer-specs .row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;padding:11px 16px;font-size:14px;border-bottom:1px solid var(--line)}
.offer-specs .row:last-child{border-bottom:0}
.offer-specs .row span:first-child{color:var(--muted)}
.offer-specs .row span:last-child{text-align:right}
.offer-title-cn{color:var(--muted-2);font-size:12.5px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:10px 14px;margin-bottom:16px}
.offer-trim-match{background:rgba(0,131,0,.1);border:1px solid rgba(0,131,0,.25);border-radius:10px;
  padding:10px 14px;margin-bottom:16px;font-size:13.5px}
.offer-trim-match .trim-name-cn{color:var(--muted-2);font-size:12px}
.trim-row-match{background:rgba(0,131,0,.08)}
.offer-photo-note{font-size:12.5px;color:var(--muted-2);margin-top:10px}
.offer-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.offer-thumb{width:64px;height:48px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;opacity:.6}
.offer-thumb:hover{opacity:1}
.offer-thumb.active{border-color:var(--brand-2);opacity:1}
.accident-signal{display:inline-block;font-size:12px;padding:3px 9px;border-radius:999px;margin-left:8px}
.accident-signal.clean{background:rgba(0,131,0,.16);color:#5fd88a}
.accident-signal.damage{background:rgba(179,38,30,.16);color:#e58a84}
.accident-signal.unknown{background:var(--surface-2);color:var(--muted-2)}
.btn-src{display:inline-block;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;
  padding:9px 18px;font-size:13px;margin-top:4px}
.btn-src:hover{color:var(--lime);border-color:var(--line-lime)}
.btn-cta{display:inline-block;color:#fff;background:var(--brand);border:none;border-radius:999px;
  padding:10px 20px;font-size:13px;font-weight:600;cursor:pointer;transition:.2s var(--ease)}
.btn-cta:hover{background:var(--brand-2)}

/* Раунд 2026-07-27 владелец: числа в заголовке/цене крупнее и жирнее слов-подписей рядом (км,
   название месяца, "Цена в Китае:") — раньше вся строка была одним весом (800), из-за чего
   подписи визуально спорили с цифрами за внимание. */
.title-unit{font-weight:500;color:var(--muted)}
.offer-price .price-label{display:block;font-weight:600;font-size:.42em;color:var(--muted);
  letter-spacing:0;margin-bottom:2px}

/* Кнопка заявки — заметная (не как обычная btn-cta), открывает модалку НА ЭТОЙ странице,
   не уводит на другой сайт (владелец, 2026-07-27). */
.btn-cta-lg{display:inline-block;background:var(--lime);color:#08080D;font-weight:800;font-size:15px;
  padding:14px 28px;border-radius:999px;border:0;cursor:pointer;box-shadow:0 8px 24px rgba(204,255,0,.25);
  transition:.2s var(--ease);font-family:var(--body)}
.btn-cta-lg:hover{background:#e2ff4d;transform:translateY(-1px)}
.lead-modal-overlay{position:fixed;inset:0;background:rgba(5,5,10,.72);z-index:200;display:flex;
  align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto}
.lead-modal{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:26px 24px;max-width:400px;width:100%;box-shadow:var(--shadow);position:relative}
.lead-modal h3{font-family:var(--head);font-size:20px;margin:0 0 4px}
.lead-modal .lead-car{color:var(--muted);font-size:13px;margin-bottom:16px}
.lead-modal .field{width:100%;padding:11px 14px;margin-bottom:10px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:10px;color:var(--text);font-size:14px;
  font-family:var(--body);box-sizing:border-box}
.lead-modal .field:focus{outline:none;border-color:var(--line-lime)}
.lead-modal .chans{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.lead-modal .chan{padding:7px 14px;border-radius:999px;border:1px solid var(--line-2);background:none;
  color:var(--muted);font-size:12.5px;cursor:pointer;font-family:var(--body)}
/* #1989 п.6 (владелец, 11.08): выбранная кнопка способа связи была НЕЧИТАЕМА — лаймовый текст на
   лаймовом фоне. Каскад: color брался отсюда (.lead-modal .chan.sel, специфичность 0-3-0), а
   background — из общего .chan.sel ниже (0-2-0, но идёт ПОЗЖЕ .lead-modal .chan{background:none},
   при равной специфичности выигрывает последний). Задаём тройку целиком, как в общем правиле:
   чёрный текст на лайме. Порядок правил больше ни на что не влияет. */
.lead-modal .chan.sel{background:var(--lime);color:#000;border-color:var(--lime)}
/* #1989 п.7: строка согласия выглядела «в двух колонках таблицы». Причина — display:flex у label:
   его детьми становятся input, анонимный текстовый узел И ссылка «условия», то есть ссылка была
   отдельной flex-колонкой с gap слева. Лечим без правки HTML (он в зоне @па-предложения):
   поток строчный, чекбокс — абсолютом в отступ. */
.lead-modal .consent{display:block;position:relative;padding-left:24px;font-size:12px;line-height:1.45;color:var(--muted);margin:10px 0 14px}
.lead-modal .consent input{position:absolute;left:0;top:2px;margin:0}
.lead-modal .lead-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--surface);color:var(--text);font-size:16px;cursor:pointer;line-height:1}
.lead-modal .lead-submit{width:100%;margin-top:2px}
.lead-thanks{text-align:center;padding:10px 0;font-size:14.5px}

/* #1624: источники (che168/dongchedi/дилер, ссылка на оригинал, номер лота) на проде НЕ раскрываем.
   Публичный дефолт — СКРЫТО везде; наше служебное раскрытие для QA — только при body.pg-src
   (ставится хедером по ?src=1 / ?debug=1 / localStorage.pg_src=1). Правила ниже перекрывают .src-debug выше. */
.src-debug,.th-debug,.pg-src-only{display:none}
body.pg-src .src-debug{display:inline}
body.pg-src .th-debug{display:table-cell}
body.pg-src .pg-src-only{display:block}

/* ---- квиз "Рассчитать стоимость под ключ" на странице модели (model.html) — скопировано 1:1
   из auto-auctions-work/landing_site/index.html (модалка #quiz, строки ~279-299), владелец
   2026-07-29 (задача #1060). Классы .modal/.quiz/.opts/.chans/.field/.consent здесь НЕ вложены
   под .lead-modal (это отдельный, более широкий многошаговый квиз, не короткая форма заявки на
   конкретный лот из offer.html) — новых имён, конфликтующих с .lead-modal .field и т.п., нет. */
.muted{color:var(--muted)}
.ic{width:24px;height:24px;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;font-family:var(--head);
  font-weight:700;font-size:16px;letter-spacing:.01em;padding:16px 30px;border-radius:999px;transition:.25s var(--ease);white-space:nowrap}
.btn .ic{width:20px;height:20px}
.btn-lime{background:var(--lime);color:#000}
.btn-lime:hover{box-shadow:0 0 34px rgba(204,255,0,.32);transform:translateY(-2px)}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{background:var(--brand-2);box-shadow:0 12px 40px rgba(43,76,224,.5);transform:translateY(-2px)}
.modal{position:fixed;inset:0;background:rgba(5,5,8,.75);backdrop-filter:blur(6px);z-index:90;display:none;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.quiz{background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-lg);max-width:560px;width:100%;padding:30px;position:relative}
.quiz .x{position:absolute;right:18px;top:16px;background:0;border:0;color:var(--muted);cursor:pointer}
.quiz h3{font-size:23px}
.qbar{height:5px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin:16px 0 22px}
.qbar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--lime));width:20%;transition:.35s var(--ease)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{border:1.5px solid var(--line-2);border-radius:12px;padding:15px;cursor:pointer;font-weight:500;font-size:15px;transition:.18s;background:var(--surface)}
.opt:hover{border-color:var(--brand-2);background:var(--surface-2)}
.field{width:100%;padding:14px;background:var(--surface);border:1.5px solid var(--line-2);border-radius:12px;color:#fff;font-size:16px;font-family:var(--body);margin-top:10px}
.field:focus{outline:0;border-color:var(--brand-2)}
/* #1989 п.7 — то же лечение для квиза на model.html: ссылка «условия» перестаёт быть отдельной
   flex-колонкой, строка согласия читается как обычный текст с чекбоксом слева. */
.consent{display:block;position:relative;padding-left:26px;font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:16px}
.consent input[type=checkbox]{position:absolute;left:0;top:2px;margin:0}
.consent a{color:var(--lime)}
.qlbl{font-family:var(--head);font-weight:700;font-size:14px;color:var(--muted);margin:18px 0 9px}
.chans{display:flex;flex-wrap:wrap;gap:8px}
.chan{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line-2);border-radius:999px;padding:9px 14px;cursor:pointer;font-weight:600;font-size:14px;background:var(--surface);color:#fff;font-family:var(--body);transition:.15s}
.chan .ic{width:16px;height:16px}
.chan:hover{border-color:var(--brand-2)}
.chan.sel{background:var(--lime);color:#000;border-color:var(--lime)}
.thanks{text-align:center;padding:16px 0}
.thanks .ic{width:64px;height:64px;color:var(--ok);margin:0 auto 12px}

/* Комплектация — раунд 2026-07-27 владелец: на десктопе разворачиваем на всю ширину страницы
   (не в узкой правой колонке рядом с фото), 2 колонки под фото+характеристиками. */
.equip-section{margin-top:32px}
.equip-highlight{max-width:520px}
@media (min-width:761px){.equip-highlight{max-width:none;columns:2;column-gap:28px}
  .equip-highlight .row{break-inside:avoid}}
/* Комплектация: multicol вместо grid (owner 01.08 #1471, вариант Б) — колонки пакуются плотно,
   без пустот парного выравнивания групп; 3 колонки на широком десктопе */
.equip-columns{column-gap:32px}
@media (min-width:761px){.equip-columns{columns:2}}
@media (min-width:1100px){.equip-columns{columns:3}}
.equip-columns .equip-group{break-inside:avoid}

/* Раунд 2026-07-28 (E8.6/E8.7): полноэкранная галерея + лёгкая защита фото (водяной знак,
   запрет drag/правого клика — не архитектурная защита, барьер от случайного сохранения). */
.offer-hero{cursor:zoom-in}
.offer-hero img,.offer-thumb{-webkit-user-drag:none;user-select:none}
.photo-watermark{position:absolute;bottom:10px;right:14px;color:rgba(255,255,255,.55);
  font-family:var(--head);font-weight:700;font-size:12px;letter-spacing:.04em;pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.6)}
.lightbox-overlay{position:fixed;inset:0;background:rgba(5,5,10,.94);z-index:300;
  display:flex;align-items:center;justify-content:center}
.lightbox-overlay img{max-width:92vw;max-height:82vh;object-fit:contain;user-select:none;-webkit-user-drag:none}
.lightbox-close{position:absolute;top:16px;right:20px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:20px;
  line-height:1;cursor:pointer}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
  border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lightbox-prev{left:16px}
.lightbox-next{right:16px}
.lightbox-counter{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.65);font-size:13px}
@media (max-width:600px){.lightbox-nav{width:40px;height:40px;font-size:20px}}

/* ---- «цена относительно рынка» на карточке предложения ---- */
.price-verdict{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;font-size:14.5px}
.price-verdict.above{border-color:rgba(255,176,32,.35);color:var(--text)}
.price-verdict.above b{color:var(--warn)}
.price-verdict.below{border-color:rgba(55,209,139,.35)}
.price-verdict.below b{color:var(--ok)}
.price-verdict.neutral b{color:var(--text)}
.offer-equip-details{margin-top:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px}
.offer-equip-details summary{cursor:pointer;font-size:13px;color:var(--muted);user-select:none}
.equip-group{margin-top:10px}
.equip-group-title{font-weight:700;font-size:13px;margin-bottom:4px}
.equip-group .row{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:13px;border-bottom:1px solid var(--line)}
.equip-group .row:last-child{border-bottom:0}
.equip-group .row span:first-child{color:var(--muted)}

/* ---- фильтр «Комплектация и характеристики» в панели предложений (задача #1060 п.3) —
   переиспользует .offer-equip-details/.equip-columns/.equip-group/.equip-group-title 1:1 для
   визуального единства с блоком комплектации на offer.html; .equip-filter-item — свой ряд
   чекбокс+название вместо read-only .row с двумя колонками. ---- */
.equip-filter{margin:0 0 16px}
.equip-filter .equip-group{margin-top:14px}
.equip-filter-item{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px;color:var(--text);cursor:pointer}
.equip-filter-item input{accent-color:var(--brand-2)}
.equip-trim-row{display:flex;align-items:center;gap:10px;margin:6px 0 4px;font-size:13px;color:var(--muted)}

/* --- закрытые страницы поставщиков (/ksb /avt /ka) — suppliers.js --- */
.ccard .spec-chips{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 10px}
.ccard .spec-chip{font-size:11px;line-height:1;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:4px 7px}
.otrack.list-view .spec-chips{margin:4px 0 0}
.sup-badge{position:absolute;top:8px;left:8px;z-index:2;font:600 11px/1 var(--head,system-ui);color:#fff;padding:4px 8px;border-radius:6px;letter-spacing:.02em}
.sup-badge.sup-kasbeh{background:#1f6feb}
.sup-badge.sup-avtomir{background:#b3261e}
.page-gap{color:var(--muted-2);padding:0 4px;align-self:center}
#filters.offers-toolbar{gap:10px}
#filters .year-select{max-width:220px}

/* --- детальная карточка поставщика soffer.html --- */
.soffer-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start;margin-top:8px}
.soffer-layout .offer-hero{aspect-ratio:4/3;border-radius:14px;overflow:hidden}
@media(max-width:760px){.soffer-layout{grid-template-columns:1fr}}

/* --- разделение сортировки и фильтров + подсветка активных (suppliers.js) --- */
.sup-sort{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
.sup-sort label{font-size:13px;color:var(--muted)}
.sup-filters.offers-toolbar{justify-content:flex-start}
.sup-filters .range-filter{gap:6px}
#filters .year-select.active,#filters .range-filter.active{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime) inset}
#filters .range-filter.active{border-radius:10px}
.filter-reset.big{background:var(--lime);color:#0a0a0f;font-weight:700;border-color:var(--lime)}

/* --- политика показа цен на витрине поставщиков (тема ПА/цены) --- */
.ccard .price.price-need,.ccard .price.price-prelim{font-size:16px}
.ccard .price.price-need{color:var(--lime)}
.price-geo{font-size:.62em;font-weight:600;color:var(--muted-2)}
.pstat{display:inline-block;font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px;vertical-align:middle}
.pstat.firm{background:rgba(43,76,224,.18);color:#9db4ff}
.pstat.est{background:rgba(255,255,255,.06);color:var(--muted)}
.pricing-note{font-size:12px;color:var(--muted-2);margin:0 0 12px}
.offer-price.price-need{color:var(--lime)}
.offer-price.price-prelim .pstat{margin-left:8px}

/* (?)-кнопка построчного расчёта в детализации цены (тест-сайт, owner 01.08 #1459) */
.calc-q{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;padding:0;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.06);color:var(--muted);font:600 11px/1 var(--body,'Inter',sans-serif);cursor:pointer;vertical-align:1px}
.calc-q:hover{color:var(--lime);border-color:var(--lime)}
.calc-trace-box{margin:2px 0 8px;padding:6px 10px;border-left:2px solid var(--line-2);background:rgba(255,255,255,.03)}
.calc-trace-box .row{border:0}
.calc-src{color:var(--muted-2);font-size:11.5px;line-height:1.45;margin:0 0 6px;padding-left:10px}