/* ──────────────────────────────────────────────────────────────────────────
   Vice Neon (.vn) — етап 3b: картка транспорту (docs/redesign/prototype/VehicleB.dc.html).
   .itemp/.ip-*/.vp-*/.car-* (views/vehicle.erb; .itemp/.ip-* спільні з views/item.erb) — за тим самим
   рішенням, що й каталог (.fc-*): рескін глобальний під .vn, /items/:id отримає той самий вигляд
   одразу. Косметика лише — кольори/шрифти/радіуси/тінь, без display/position/grid — 3D-перегляд,
   галерея, світчер швидкості, коментарі (public/js/vehicle.js, model-viewer.js, _community.erb)
   лишаються на своїй логіці.
   ────────────────────────────────────────────────────────────────────────── */

html.vn:not([data-section="admin"]) .itemp { font-family: var(--vn-font-body), sans-serif; color: var(--vn-text); }
html.vn:not([data-section="admin"]) .ip-crumbs, html.vn:not([data-section="admin"]) .ip-crumbs ol { color: var(--vn-muted-2); font-size: 13px; }
html.vn:not([data-section="admin"]) .ip-crumbs a { color: var(--vn-muted-2); }
html.vn:not([data-section="admin"]) .ip-crumbs a:hover { color: var(--vn-text); }
html.vn:not([data-section="admin"]) .ip-crumbs b[aria-current] { color: var(--vn-text); }
html.vn:not([data-section="admin"]) .ip-back {
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: var(--vn-text);
}
html.vn:not([data-section="admin"]) .item-alert { border-radius: var(--vn-radius-field); background: rgba(255, 90, 122, .1); border: 1px solid rgba(255, 90, 122, .35); color: var(--vn-text); }

/* ─── Заголовок ───────────────────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .vp-head h1, html.vn:not([data-section="admin"]) #car-title {
  font-family: var(--vn-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.03em;
}
html.vn:not([data-section="admin"]) .ip-mt {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--vn-radius-pill);
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); color: var(--vn-text); text-decoration: none;
}
html.vn:not([data-section="admin"]) .ip-mt small { color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .ip-mt b { font-family: var(--vn-font-mono); }
html.vn:not([data-section="admin"]) .vp-ql { border-radius: var(--vn-radius-pill); font-weight: 800; }
html.vn:not([data-section="admin"]) .vp-ql--limited { background: var(--vn-yellow); color: var(--vn-ink); }
html.vn:not([data-section="admin"]) .vp-ql--junk { background: var(--vn-muted); color: var(--vn-ink); }
html.vn:not([data-section="admin"]) .vp-ql--rare { background: var(--vn-purple); color: var(--vn-ink); }
html.vn:not([data-section="admin"]) .vp-ql--legendary { background: var(--vn-orange); color: var(--vn-ink); }

/* ─── Кнопки / іконки (спільні .btn/.icon-btn) ───────────────────────────── */
html.vn:not([data-section="admin"]) .btn {
  border-radius: var(--vn-radius-pill); font-family: var(--vn-font-body); font-weight: 800;
}
html.vn:not([data-section="admin"]) .btn--primary { background: var(--vn-grad-brand); color: var(--vn-ink); border: 0; }
html.vn:not([data-section="admin"]) .btn:not(.btn--primary):not(.btn--edit) { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); color: var(--vn-text); }
html.vn:not([data-section="admin"]) .icon-btn {
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: var(--vn-text);
}
html.vn:not([data-section="admin"]) .icon-btn:hover { background: rgba(255, 255, 255, .08); }
html.vn:not([data-section="admin"]) .ip-mono { font-family: var(--vn-font-mono); }

/* ─── Галерея ─────────────────────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .car-gallery__main { background: linear-gradient(160deg, #221A3A, #120F1C); border-radius: var(--vn-radius-card); color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .car-gallery__count {
  background: rgba(11, 10, 18, .75); color: var(--vn-text); border-radius: var(--vn-radius-pill); font-family: var(--vn-font-mono);
}
html.vn:not([data-section="admin"]) .car-gallery__full, html.vn:not([data-section="admin"]) .car-gallery__nav {
  background: rgba(11, 10, 18, .72); color: var(--vn-text); border-radius: 50%; border: 0;
}
html.vn:not([data-section="admin"]) .car-gallery__thumb { border-radius: 12px; border: 2px solid transparent; }
html.vn:not([data-section="admin"]) .car-gallery__thumb[aria-selected="true"] { border-color: var(--vn-pink); }
html.vn:not([data-section="admin"]) .car-gallery__thumb-3d-ic { color: var(--vn-cyan); }
html.vn:not([data-section="admin"]) .vs-caption { color: var(--vn-muted); font-size: 13px; }

/* ─── Картки блоків (.ip-card) ────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .ip-card {
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--vn-radius-card); color: var(--vn-text);
}
html.vn:not([data-section="admin"]) .ip-c-h h2 { font-family: var(--vn-font-display); font-weight: 800; text-transform: uppercase; font-size: 15px; letter-spacing: -.01em; }
html.vn:not([data-section="admin"]) .ip-c-h { border-bottom-color: rgba(255, 255, 255, .08); }
html.vn:not([data-section="admin"]) .vp-q { border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .vp-qtip { color: var(--vn-muted); background: rgba(255, 255, 255, .04); border-radius: var(--vn-radius-field); }

/* ─── Швидкість ───────────────────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .vp-sp {
  border-radius: var(--vn-radius-field); border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); color: var(--vn-muted);
}
html.vn:not([data-section="admin"]) .vp-sp.is-on, html.vn:not([data-section="admin"]) .vp-sp--static {
  border-color: var(--vn-pink); background: rgba(255, 79, 163, .14); color: var(--vn-text);
}
html.vn:not([data-section="admin"]) .vp-sp--main .vp-sp__v { color: var(--vn-pink-soft); font-family: var(--vn-font-mono); font-weight: 900; }
html.vn:not([data-section="admin"]) .vp-sp__v { font-family: var(--vn-font-mono); font-weight: 800; }
html.vn:not([data-section="admin"]) .vp-sbar { background: rgba(255, 255, 255, .08); border-radius: 6px; }
html.vn:not([data-section="admin"]) .vp-sbar span { background: linear-gradient(90deg, var(--vn-pink), var(--vn-orange)); border-radius: 6px; }
html.vn:not([data-section="admin"]) .vp-snote { color: var(--vn-muted); }

/* ─── Характеристики ──────────────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .vp-spec dt { color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .vp-spec dd { color: var(--vn-text); font-weight: 700; }

/* ─── Джерело/сертифікат, кейси, магазин ─────────────────────────────────── */
html.vn:not([data-section="admin"]) .vp-from, html.vn:not([data-section="admin"]) .vp-case {
  border-radius: var(--vn-radius-field); background: rgba(255, 255, 255, .03); color: var(--vn-text); text-decoration: none;
}
html.vn:not([data-section="admin"]) .vp-from:hover, html.vn:not([data-section="admin"]) .vp-case:hover { background: rgba(255, 255, 255, .06); }
html.vn:not([data-section="admin"]) .vp-more { color: var(--vn-cyan); font-weight: 800; text-decoration: none; }
html.vn:not([data-section="admin"]) .vp-cnt { background: var(--vn-pink); color: var(--vn-ink); border-radius: var(--vn-radius-pill); font-family: var(--vn-font-mono); }
html.vn:not([data-section="admin"]) .vp-shop__t { color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .vp-shop__t a { color: var(--vn-cyan); }

/* ─── Властивості/файли ───────────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .ip-props li span { color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .ip-props__val { color: var(--vn-text); }
html.vn:not([data-section="admin"]) .car-file, html.vn:not([data-section="admin"]) .car-file--missing {
  border-radius: var(--vn-radius-field); background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); color: var(--vn-text);
}
html.vn:not([data-section="admin"]) .car-file:hover { background: rgba(255, 255, 255, .06); }
html.vn:not([data-section="admin"]) .car-file__ext { background: rgba(46, 230, 214, .16); color: var(--vn-cyan); border-radius: 6px; font-family: var(--vn-font-mono); }
html.vn:not([data-section="admin"]) .car-file__sub { color: var(--vn-muted); }

/* ─── Схожі за швидкістю ──────────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .vp-sim-note, html.vn:not([data-section="admin"]) .vp-sim-few { color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .vp-si {
  border-radius: var(--vn-radius-field); background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); color: var(--vn-text); text-decoration: none;
}
html.vn:not([data-section="admin"]) .vp-si:hover { background: rgba(255, 255, 255, .06); }
html.vn:not([data-section="admin"]) .vp-si__sv b { font-family: var(--vn-font-mono); }
html.vn:not([data-section="admin"]) .vp-si__sv .is-up { color: var(--vn-cyan); }
html.vn:not([data-section="admin"]) .vp-si__sv .is-down { color: var(--vn-red); }
html.vn:not([data-section="admin"]) .vp-si__sv .is-same { color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .vp-incase { color: var(--vn-yellow); }

/* ─── Тост і лайтбокс фото ────────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .ip-toast {
  background: var(--vn-ink); border: 1px solid rgba(255, 79, 163, .5); color: var(--vn-text); border-radius: var(--vn-radius-pill);
  box-shadow: 0 0 40px rgba(255, 79, 163, .35); font-weight: 700;
}
html.vn:not([data-section="admin"]) .vlightbox-overlay { background: rgba(6, 5, 12, .92); }
html.vn:not([data-section="admin"]) .vlightbox__close, html.vn:not([data-section="admin"]) .vlightbox__nav {
  background: rgba(255, 255, 255, .08); color: var(--vn-text); border-radius: 50%;
}
html.vn:not([data-section="admin"]) .vlightbox__caption { color: var(--vn-muted); }

/* ─── QR-модалка (vp-qr-modal, public/js/vehicle-share-vn.js) ───────────── */
html.vn:not([data-section="admin"]) .vp-qr-modal { position: fixed; inset: 0; z-index: 90; }
html.vn:not([data-section="admin"]) .vp-qr-modal[hidden] { display: none; }
html.vn:not([data-section="admin"]) .vp-qr-modal__bg { position: absolute; inset: 0; background: rgba(6, 5, 12, .7); backdrop-filter: blur(6px); }
html.vn:not([data-section="admin"]) .vp-qr-modal__box {
  position: relative; z-index: 1; margin: 14vh auto 0; width: min(300px, calc(100% - 40px)); padding: 24px;
  border-radius: 24px; background: #17121F; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 40px 100px rgba(0, 0, 0, .7);
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; color: var(--vn-text);
  font-family: var(--vn-font-body), sans-serif; animation: bPop .2s var(--vn-ease) both;
}
html.vn:not([data-section="admin"]) .vp-qr-modal__box p { margin: 0; color: var(--vn-muted); font-size: 13.5px; }
html.vn:not([data-section="admin"]) .vp-qr-modal__box canvas { border-radius: 14px; background: #fff; padding: 10px; }
html.vn:not([data-section="admin"]) .vp-qr-modal__x {
  position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .08); color: var(--vn-text); display: grid; place-items: center;
}