/* ============================================================================
   spec-info.css — «Характеристики» инфографикой вместо таблицы (FEATURE_CAR_SPECS_INFO, model/inc/car_specs.php → renderCarSpecsInfographic()).
   Файл общий для desktop и mobile (правится в desktop и копируется). На тёмной «сцене» досье (.cdv-stage) — тёмная палитра.
   ========================================================================== */
.si { --si-ink: var(--premium-ink, #0b1220); --si-sub: var(--premium-ink-soft, #5b6472); --si-line: var(--premium-line, #e4e8ef); --si-card: var(--premium-chip-bg, #f4f6fa);
    --si-ac: var(--premium-accent-a, #1e4fe0); --si-ac2: #7c4dff; --si-price: var(--premium-price, #e23b4f); --si-ok: #16a34a; --si-mid: #f59e0b; --si-low: #ef4444; --si-ico-bg: rgba(30, 79, 224, .1);
    display: grid; gap: 18px; margin: 0 0 6px; font-family: 'Manrope', system-ui, sans-serif; color: var(--si-ink); }
html[data-theme="dark"] .si { --si-ico-bg: rgba(122, 162, 255, .16); --si-ac: #7aa2ff; --si-price: #ff7a8d; }
.cdv-stage .si { --si-ink: #fff; --si-sub: rgba(231, 236, 246, .66); --si-line: rgba(255, 255, 255, .14); --si-card: rgba(255, 255, 255, .06); --si-ac: #7aa2ff; --si-price: #ff7a8d; --si-ico-bg: rgba(122, 162, 255, .18); }
.si *, .si *::before, .si *::after { box-sizing: border-box; }

/* плитки ключевых показателей */
.si-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 10px; }
.si-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 13px 12px; border-radius: 16px; background: var(--si-card); border: 1px solid var(--si-line); transition: transform .2s, border-color .2s; }
.si-tile:hover { transform: scale(1.02); border-color: var(--si-ac); }
.si-tile-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.si-ico { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: var(--si-ico-bg); color: var(--si-ac); font-size: 13px; }
.si-tile-h small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--si-sub); }
.si-tile > b { display: block; font-size: 20px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--si-ink); overflow-wrap: anywhere; }
.si-tile > em { display: block; font-style: normal; font-size: 12px; color: var(--si-sub); }
.si-bar { height: 7px; margin-top: 8px; border-radius: 99px; background: var(--si-line); overflow: hidden; }
.si-bar i { display: block; height: 100%; border-radius: 99px; background: var(--si-ac); transform-origin: left; animation: siGrow 1s cubic-bezier(.2, .8, .2, 1) both; }
.si-bar.ok i { background: var(--si-ok); } .si-bar.mid i { background: var(--si-mid); } .si-bar.low i { background: var(--si-low); }
.si-bar-n { margin-top: 3px; font-size: 11.5px; color: var(--si-sub); }
@keyframes siGrow { from { transform: scaleX(0); } }

/* значки: привод, кузов, цвета, места */
.si-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.si-chip { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px; background: var(--si-card); border: 1px solid var(--si-line); }
.si-chip-i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--si-ico-bg); color: var(--si-ac); font-size: 13px; }
.si-sw { display: block; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(128, 138, 160, .45), 0 1px 3px rgba(0, 0, 0, .25); }
.si-chip small { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--si-sub); }
.si-chip b { display: block; font-size: 14px; font-weight: 700; color: var(--si-ink); }

/* оценка аукциона */
.si-rate { padding: 12px 14px; border-radius: 16px; background: var(--si-card); border: 1px solid var(--si-line); }
.si-rate-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.si-rate-h small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--si-sub); } .si-rate-h b { font-size: 20px; font-weight: 800; }
.si-rate-s { display: flex; flex-wrap: wrap; gap: 4px; }
.si-rate-s span { min-width: 30px; padding: 5px 7px; text-align: center; border-radius: 8px; background: var(--si-line); color: var(--si-sub); font-size: 12px; font-weight: 700; }
.si-rate-s span.is-on { background: var(--si-ac); color: #fff; }
.si-rate em { display: block; margin-top: 6px; font-style: normal; font-size: 12px; color: var(--si-sub); }

/* цена: площадка → курс → под ключ */
.si-price { display: grid; gap: 8px; }
.si-flow { display: flex; align-items: stretch; gap: 8px; }
.si-step { flex: 1 1 0; min-width: 0; padding: 11px 13px; border-radius: 14px; border: 1px dashed var(--si-line); }
.si-step small { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--si-sub); }
.si-step b { display: block; margin-top: 2px; font-size: 15px; font-weight: 800; color: var(--si-ink); } .si-step b small { display: block; margin-top: 1px; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.si-arrow { flex: none; align-self: center; font-size: 11px; color: var(--si-sub); }
html .si .si-total { display: flex; flex-direction: column; justify-content: center; gap: 2px; margin: 0; padding: 12px 15px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #1e4fe0, #7c4dff); box-shadow: 0 14px 28px -16px rgba(60, 80, 220, .8); transition: transform .2s; }
html .si .si-total:hover { transform: scale(1.03); background: linear-gradient(135deg, #1e4fe0, #7c4dff); }
html .si .si-total .k { font-family: 'Manrope', sans-serif; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(255, 255, 255, .8); }
html .si .si-total .v { font-family: 'Unbounded', 'Manrope', sans-serif; font-size: 19px; font-weight: 700; text-align: left; color: #fff; }

/* документы источника (по клику) */
.si-docs { display: flex; flex-wrap: wrap; gap: 8px; }
html .si .si-doc { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border: 1px solid var(--si-line); border-radius: 12px; background: var(--si-card); font-size: 13px; cursor: pointer; transition: transform .2s, border-color .2s; }
html .si .si-doc:hover { transform: scale(1.03); border-color: var(--si-ac); }
.si-doc-i { color: var(--si-ac); }
html .si .si-doc .k { color: var(--si-ink); font-weight: 700; }
html .si .si-doc .v { font-size: 12px; font-weight: 500; color: var(--si-sub); }
html .si .si-doc .spec-open { color: var(--si-ac); }

/* паспорт лота */
.si-pass { padding: 14px 16px 8px; border-radius: 16px; background: var(--si-card); border: 1px solid var(--si-line); }
.si-pass-t { margin: 2px 0 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--si-sub); }
.si-pass-g { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
html .si .si-pass-g .spec-row { padding: 8px 0; font-size: 13.5px; border-bottom: 1px dashed var(--si-line); }
html .si .si-pass-g .spec-row .k { color: var(--si-sub); } html .si .si-pass-g .spec-row .v { color: var(--si-ink); font-weight: 700; }
.si-pass-g .cdv-flag { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; vertical-align: -3px; margin-right: 4px; }

@media (max-width: 900px) {
    .si-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .si-tile > b { font-size: 18px; }
    .si-pass-g { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .si-bar i { animation: none; } .si-tile, html .si .si-total, html .si .si-doc { transition: none; } }