/* =====================================================================
   Miles Hub — details page (/offer/:type/:id), seat map (.sm-*), 3D viewer (.v3d-*), upgrades (.up-*).
   Every colour comes from base.css tokens, so light and dark themes both work.
   ===================================================================== */

/* ---------- page frame ---------- */
.details { padding-bottom: 2rem; }
.dt-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 1rem 0 .9rem; }
.dt-crumbs .sep { opacity: .55; }
.dt-crumbs .cur { color: var(--text); font-weight: 600; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-sk-gallery { height: 240px; border-radius: var(--radius); margin-bottom: 1.2rem; }
.dt-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 1.25rem; }
.dt-main { min-width: 0; }
.dt-aside { min-width: 0; }
@media (min-width: 960px) {
  .dt-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 1.75rem; }
  .dt-aside { position: sticky; top: calc(var(--header-h) + 1rem); align-self: start; }
  .dt-sk-gallery { height: 380px; }
}
@media (min-width: 1180px) { .dt-layout { grid-template-columns: minmax(0, 1fr) 380px; } }

/* ---------- gallery ---------- */
.dt-gallery { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.dt-hero { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: linear-gradient(135deg, var(--sky-1), var(--sky-2)); aspect-ratio: 16 / 9; cursor: zoom-in; box-shadow: var(--shadow); isolation: isolate; }
.dt-hero img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), opacity .3s; }
.dt-hero:hover img { transform: scale(1.04); }
.dt-hero.swap img { opacity: .6; }
.dt-hero-ph { position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in srgb, var(--sky-3) 55%, transparent); z-index: -1; }
.dt-hero.broken img { display: none; } .dt-hero.broken .dt-hero-ph { z-index: 0; }
.dt-gallery.empty-media .dt-hero-ph { position: relative; aspect-ratio: 16 / 7; border-radius: var(--radius); background: linear-gradient(135deg, var(--sky-1), var(--sky-2)); z-index: 0; }
.dt-expand { position: absolute; right: .7rem; bottom: .7rem; z-index: 2; display: inline-flex; align-items: center; gap: .35rem; border: 1px solid color-mix(in srgb, #fff 30%, transparent); background: rgba(10, 16, 32, .55); color: #fff; font-weight: 600; font-size: .82rem; padding: .4rem .7rem; border-radius: 999px; cursor: pointer; backdrop-filter: blur(6px); transition: background .2s, transform .15s; }
.dt-expand:hover { background: rgba(10, 16, 32, .78); transform: translateY(-1px); }
.dt-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); gap: .6rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.dt-thumb { position: relative; border: 2px solid transparent; padding: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); aspect-ratio: 4 / 3; cursor: pointer; transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.dt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dt-thumb:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.dt-thumb:hover img { transform: scale(1.08); }
.dt-thumb.active { border-color: var(--primary); }
.dt-thumb.broken img { visibility: hidden; }
.dt-thumb .dt-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 16, 32, .5); color: #fff; font-weight: 800; font-size: 1.1rem; }
@media (min-width: 760px) {
  .dt-gallery { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
  .dt-gallery.single { grid-template-columns: 1fr; }
  .dt-hero { aspect-ratio: 16 / 8; }
  .dt-thumbs { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; grid-auto-rows: 1fr; overflow: visible; }
  .dt-thumb { aspect-ratio: auto; min-height: 0; }
}

/* ---------- lightbox ---------- */
.dt-lightbox { position: fixed; inset: 0; z-index: 130; background: rgba(6, 10, 22, .92); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: 1rem; opacity: 0; transition: opacity .25s; touch-action: pan-y; }
.dt-lightbox.show { opacity: 1; }
.dt-lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; min-width: 0; }
.dt-lb-fig img { max-width: 100%; max-height: 82vh; border-radius: 12px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); transition: opacity .25s; object-fit: contain; animation: pop .25s var(--ease); }
.dt-lb-fig img.loading { opacity: .4; }
.dt-lb-cap { color: #cfd8ee; font-size: .85rem; text-align: center; }
.dt-lb-nav, .dt-lb-close { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: #fff; width: 44px; height: 44px; }
.dt-lb-nav:hover, .dt-lb-close:hover { background: rgba(255,255,255,.22); color: #fff; }
.dt-lb-close { position: absolute; top: 1rem; right: 1rem; }
@media (max-width: 560px) { .dt-lightbox { grid-template-columns: 1fr; } .dt-lb-nav { position: absolute; bottom: 1.2rem; } .dt-lb-nav.prev { left: 1.2rem; } .dt-lb-nav.next { right: 1.2rem; } }

/* ---------- header ---------- */
.dt-head { display: grid; gap: .8rem; margin-bottom: 1rem; }
.dt-head-main { display: flex; gap: .9rem; align-items: flex-start; min-width: 0; }
.dt-logo { box-shadow: var(--shadow); }
.dt-head-txt { min-width: 0; }
.dt-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.dt-sub { margin: .25rem 0 0; font-size: .95rem; }
.dt-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin-top: .5rem; }
.dt-rating .count { margin-left: .1rem; }
.dt-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.dt-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
@media (min-width: 640px) {
  .dt-head { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .dt-tags { grid-column: 1 / -1; }
  .dt-title { font-size: 1.75rem; }
}

/* ---------- price panel ---------- */
.dt-price-panel { padding: 1.2rem 1.25rem; display: grid; gap: .55rem; }
.dt-price .after { font-size: 2.1rem; }
.dt-unit { margin-top: -.2rem; }
.dt-total { padding: .5rem .7rem; border-radius: var(--radius-xs); background: var(--surface-2); font-size: .95rem; }
.dt-book { margin-top: .35rem; }
.dt-price-note { display: flex; gap: .35rem; align-items: flex-start; margin: .2rem 0 .3rem; }
.dt-pf-h { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--border); font-size: .9rem; }
.dt-platforms { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.dt-pf a, .dt-pf-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none !important; transition: transform .15s var(--ease), box-shadow .2s, border-color .2s, background .2s; }
.dt-pf a:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: var(--surface-2); }
.dt-pf.best a, .dt-pf.best .dt-pf-row { border-color: color-mix(in srgb, var(--ok) 55%, var(--border)); background: color-mix(in srgb, var(--ok-bg) 60%, var(--surface)); }
.dt-pf-name { font-weight: 600; font-size: .92rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-width: 0; }
.dt-pf-price { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dt-pf-price b { font-size: 1rem; }
.dt-pf-go { color: var(--muted); display: inline-flex; }
.dt-pf a:hover .dt-pf-go { color: var(--primary); }

/* mobile sticky bar */
.dt-mobile-bar { display: none; }
@media (max-width: 959px) {
  .dt-mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--border); box-shadow: 0 -10px 30px -18px rgba(0,0,0,.4); }
  .dt-mb-price { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
  .has-mobile-bar { padding-bottom: 84px; }
}

/* ---------- tabs & panels ---------- */
.dt-tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-bottom: 1.1rem; position: sticky; top: var(--header-h); z-index: 5; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); }
.dt-tabs::-webkit-scrollbar { display: none; }
.dt-tabs .tab-btn { white-space: nowrap; flex: none; }
.dt-tab-count { font-size: .68rem; font-weight: 800; background: var(--surface-2); color: var(--muted); padding: .05rem .4rem; border-radius: 999px; }
.tab-btn.active .dt-tab-count { background: var(--primary-soft); color: var(--primary); }
@media (max-width: 980px) { .dt-tabs { position: static; backdrop-filter: none; } }
.dt-panel { animation: fadeUp .3s var(--ease); min-height: 120px; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dt-h { display: flex; align-items: center; gap: .45rem; font-size: 1rem; margin-bottom: .75rem; }
.dt-h .icon { color: var(--primary); }
.dt-overview { display: grid; gap: 1.1rem; }

/* good to know */
.dt-gtk { background: linear-gradient(135deg, color-mix(in srgb, var(--primary-soft) 70%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); }
.dt-gtk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: .7rem .9rem; }
.dt-gtk-list li { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem .6rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 70%, transparent); transition: transform .2s var(--ease), box-shadow .2s; }
.dt-gtk-list li:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.dt-gtk-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); flex: none; }
.dt-gtk-label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.dt-gtk-value { display: block; font-weight: 600; font-size: .92rem; }
.dt-gtk-note { display: block; }
@media (min-width: 620px) { .dt-gtk-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .dt-gtk-list { grid-template-columns: 1fr 1fr 1fr; } }
.dt-emoji { font-size: 1.05rem; line-height: 1; }

/* facts */
.dt-facts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .7rem; }
.dt-fact { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem .9rem; transition: transform .2s var(--ease), box-shadow .2s; }
.dt-fact:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.dt-fact-ic { color: var(--primary); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--primary-soft); flex: none; }
.dt-fact .label { font-size: .7rem; }
.dt-fact-value { font-weight: 700; font-size: .95rem; margin-top: .1rem; overflow-wrap: anywhere; }

/* itinerary timeline */
.dt-leg + .dt-leg { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
.dt-leg-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.dt-tl { list-style: none; margin: 0; padding: 0 0 0 .2rem; position: relative; }
.dt-tl li { position: relative; display: flex; gap: .9rem; align-items: flex-start; padding-left: 1.4rem; }
.dt-tl-dot { position: absolute; left: 0; top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--primary); box-sizing: border-box; }
.dt-tl-dot.stop { border-color: var(--accent); top: .35rem; }
.dt-tl-seg, .dt-tl-lay { padding-top: .25rem; padding-bottom: .25rem; }
.dt-tl-seg .dt-tl-line { position: absolute; left: 5px; top: 0; bottom: 0; border-left: 2px dashed color-mix(in srgb, var(--primary) 50%, var(--border)); }
.dt-tl-stop::before, .dt-tl-lay::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; border-left: 2px solid color-mix(in srgb, var(--primary) 50%, var(--border)); }
.dt-tl-stop.start::before { top: .6rem; } .dt-tl-stop.end::before { bottom: auto; height: .6rem; }
.dt-tl-dur { font-size: .82rem; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border-radius: 999px; background: var(--surface-2); margin: .3rem 0; }
.dt-tl-time { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.dt-tl-time b { font-size: 1.2rem; letter-spacing: -.01em; }
.dt-tl-code { font-weight: 700; color: var(--primary); margin-left: .2rem; }
.dt-plus { font-size: .65rem; color: var(--accent); font-weight: 800; margin-left: .1rem; }
.dt-layover { font-size: .75rem; cursor: default; background: var(--accent-soft); color: var(--accent); border-color: transparent; display: inline-flex; align-items: center; gap: .25rem; margin-left: .35rem; vertical-align: middle; }
.dt-chips { margin-top: .9rem; }
.dt-chips .chip { cursor: default; display: inline-flex; align-items: center; gap: .3rem; }
.dt-chips .chip:hover { border-color: var(--border); color: var(--muted); }

/* hotel / car blocks */
.dt-stay-grid { display: grid; grid-template-columns: 1fr; gap: .6rem 1rem; }
@media (min-width: 620px) { .dt-stay-grid { grid-template-columns: 1fr 1fr; } }
.dt-kv { display: grid; gap: .1rem; }
.dt-kv-k { text-transform: uppercase; letter-spacing: .05em; font-size: .7rem; font-weight: 700; }
.dt-kv-v { font-weight: 600; }
.dt-pd { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; }
.dt-pd-col { display: grid; gap: .25rem; justify-items: start; }
.dt-pd-arrow { display: grid; justify-items: center; color: var(--primary); }
@media (max-width: 520px) { .dt-pd { grid-template-columns: 1fr; } .dt-pd-arrow { transform: rotate(90deg); } }

/* why this price */
.dt-why .ok { color: var(--ok); }
.dt-bars { display: grid; gap: .45rem; margin-top: .4rem; }
.dt-bar { display: grid; grid-template-columns: minmax(110px, 160px) 1fr auto; align-items: center; gap: .6rem; font-size: .85rem; }
.dt-bar-name { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-bar-track { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.dt-bar-track span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--muted), color-mix(in srgb, var(--muted) 70%, transparent)); transition: width .6s var(--ease); }
.dt-bar.best .dt-bar-track span { background: linear-gradient(90deg, var(--ok), #4fd38a); }
.dt-bar-val { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.dt-bar.best .dt-bar-val { color: var(--ok); }
@media (max-width: 520px) { .dt-bar { grid-template-columns: 1fr auto; } .dt-bar-track { grid-column: 1 / -1; } }
.dt-hl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.dt-hl-list li { display: flex; gap: .5rem; align-items: flex-start; }
.dt-hl-list .icon { color: var(--ok); flex: none; margin-top: .2rem; }

/* reviews */
.dt-reviews { display: grid; gap: 1rem; }
.dt-agg { display: flex; gap: 1rem; align-items: center; }
.dt-agg-score { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--primary); }
.dt-agg-score .muted { font-size: 1rem; font-weight: 600; }
.dt-agg-label { font-weight: 700; font-size: 1.05rem; }
.dt-agg-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: .4rem; max-width: 320px; }
.dt-agg-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-2)); border-radius: 999px; }
.dt-cloud-tags { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; }
.dt-cloud-tag { padding: .25rem .7rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: .8rem; transition: transform .2s, background .2s, color .2s; cursor: default; }
.dt-cloud-tag:hover { transform: translateY(-2px); background: var(--primary-soft); color: var(--primary); }
.dt-cloud-tag.l2 { font-size: .9rem; } .dt-cloud-tag.l3 { font-size: 1rem; color: var(--text); } .dt-cloud-tag.l4 { font-size: 1.1rem; color: var(--primary); background: var(--primary-soft); }
.dt-rv-list { display: grid; gap: .8rem; }
.dt-review { padding: 1rem 1.1rem; display: grid; gap: .6rem; }
.dt-review:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.dt-rv-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; }
.dt-rv-pf { display: grid; }
.dt-rv-score { display: flex; align-items: center; gap: .5rem; }
.dt-rv-score b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.dt-rv-bar { width: 90px; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.dt-rv-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--primary-2)); }
.dt-rv-quote { margin: 0; font-size: .98rem; line-height: 1.5; padding-left: .8rem; border-left: 3px solid var(--primary-soft); }
@media (max-width: 480px) { .dt-rv-head { grid-template-columns: auto 1fr; } .dt-rv-score { grid-column: 1 / -1; } .dt-rv-bar { flex: 1; } }

/* ---------- seat map / room / car / coach (.sm-*) ---------- */
.seatmap { display: grid; gap: .8rem; }
.sm-head h3 { font-size: 1.05rem; }
.sm-head p { margin: .15rem 0 0; }
.sm-stage { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem; overflow: auto; box-shadow: var(--shadow); max-height: 70vh; }
.sm-svg { display: block; width: 100%; height: auto; margin: 0 auto; font-family: inherit; }
.sm-plane .sm-svg { max-width: 460px; }
.sm-car .sm-svg { max-width: 360px; }
.sm-room .sm-svg { max-width: 640px; }
.sm-tip { position: absolute; z-index: 3; pointer-events: none; background: var(--text); color: var(--bg); font-size: .78rem; font-weight: 600; padding: .3rem .55rem; border-radius: 7px; white-space: nowrap; box-shadow: var(--shadow); }
.sm-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .82rem; color: var(--muted); }
.sm-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.sm-key { width: 16px; height: 14px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); display: inline-block; }
.sm-note { margin: 0; }
/* svg fills via CSS variables */
.sm-svg text { fill: var(--muted); font-size: 11px; font-weight: 600; }
.sm-svg .sm-caption { fill: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.sm-svg .sm-letter { fill: var(--muted); font-size: 12px; font-weight: 700; }
.sm-svg .sm-rowno { fill: var(--muted); font-size: 10px; }
.sm-svg .sm-item-label { fill: var(--text); font-size: 11px; font-weight: 700; pointer-events: none; }
.sm-svg .sm-item-label.small { font-size: 9px; fill: var(--muted); }
.sm-svg .sm-dim-label { fill: var(--primary); font-size: 11px; font-weight: 700; }
.sm-svg .sm-exit-label { fill: var(--danger); font-size: 8px; font-weight: 800; letter-spacing: .05em; }
.sm-fuselage { fill: var(--surface-2); stroke: var(--border); stroke-width: 2; }
.sm-front path { fill: var(--primary); }
.sm-galley, .sm-key.galley { fill: color-mix(in srgb, var(--warn-bg) 80%, var(--surface)); stroke: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-bg); }
.sm-lav, .sm-key.lav { fill: color-mix(in srgb, var(--sky-1) 85%, var(--surface)); stroke: color-mix(in srgb, var(--sky-3) 45%, transparent); background: var(--sky-1); }
.sm-exit rect { fill: var(--danger); }
.sm-seat { cursor: pointer; outline: none; }
.sm-seat rect:first-of-type { stroke-width: 1.5; transition: fill .15s, transform .15s; }
.sm-seat.economy rect:first-of-type, .sm-key.economy { fill: color-mix(in srgb, var(--primary) 22%, var(--surface)); stroke: color-mix(in srgb, var(--primary) 45%, transparent); background: color-mix(in srgb, var(--primary) 22%, var(--surface)); }
.sm-seat.premium rect:first-of-type, .sm-key.premium { fill: color-mix(in srgb, var(--primary) 38%, var(--surface)); stroke: color-mix(in srgb, var(--primary) 60%, transparent); background: color-mix(in srgb, var(--primary) 38%, var(--surface)); }
.sm-seat.business rect:first-of-type, .sm-key.business { fill: color-mix(in srgb, var(--primary) 58%, var(--surface)); stroke: var(--primary); background: color-mix(in srgb, var(--primary) 58%, var(--surface)); }
.sm-seat.first rect:first-of-type, .sm-key.first { fill: color-mix(in srgb, var(--primary) 78%, var(--surface)); stroke: var(--primary-hover); background: color-mix(in srgb, var(--primary) 78%, var(--surface)); }
.sm-seat.legroom rect:first-of-type, .sm-key.legroom { fill: color-mix(in srgb, var(--ok) 32%, var(--surface)); stroke: var(--ok); background: color-mix(in srgb, var(--ok) 32%, var(--surface)); }
.sm-seat.hl rect:first-of-type, .sm-key.hl { fill: var(--accent); stroke: color-mix(in srgb, var(--accent) 70%, #000); background: var(--accent); }
.sm-seat.car rect:first-of-type, .sm-key.car, .sm-seat.coach rect:first-of-type, .sm-key.coach { fill: color-mix(in srgb, var(--primary) 40%, var(--surface)); stroke: var(--primary); background: color-mix(in srgb, var(--primary) 40%, var(--surface)); }
.sm-seat-back { fill: color-mix(in srgb, var(--text) 25%, transparent); }
.sm-seat:hover rect:first-of-type, .sm-seat.is-hover rect:first-of-type, .sm-seat:focus-visible rect:first-of-type { filter: brightness(1.12); stroke: var(--text); stroke-width: 2; }
.sm-item { cursor: pointer; outline: none; }
.sm-item > rect:first-of-type { stroke-width: 1.5; transition: filter .15s; }
.sm-item:hover > rect:first-of-type, .sm-item.is-hover > rect:first-of-type, .sm-item:focus-visible > rect:first-of-type { filter: brightness(1.08); stroke: var(--text); }
.sm-room-floor { fill: var(--surface-2); stroke: var(--text); stroke-width: 3; }
.sm-grid { stroke: color-mix(in srgb, var(--border) 70%, transparent); stroke-width: 1; }
.sm-bed > rect:first-of-type, .sm-key.bed { fill: color-mix(in srgb, var(--primary) 20%, var(--surface)); stroke: var(--primary); background: color-mix(in srgb, var(--primary) 20%, var(--surface)); }
.sm-pillow { fill: var(--surface); stroke: var(--border); }
.sm-duvet { fill: color-mix(in srgb, var(--primary) 40%, var(--surface)); }
.sm-desk > rect:first-of-type, .sm-nightstand > rect:first-of-type, .sm-wardrobe > rect:first-of-type, .sm-sofa > rect:first-of-type, .sm-chair > rect:first-of-type, .sm-minibar > rect:first-of-type, .sm-tv > rect:first-of-type, .sm-item > rect:first-of-type, .sm-key.furniture { fill: color-mix(in srgb, var(--warn) 22%, var(--surface)); stroke: color-mix(in srgb, var(--warn) 60%, transparent); background: color-mix(in srgb, var(--warn) 22%, var(--surface)); }
.sm-bath > rect:first-of-type, .sm-key.bath { fill: color-mix(in srgb, var(--sky-2) 55%, var(--surface)); stroke: var(--sky-3); background: color-mix(in srgb, var(--sky-2) 55%, var(--surface)); }
.sm-tub, .sm-sink, .sm-wc { fill: var(--surface); stroke: var(--sky-3); stroke-width: 1.5; }
.sm-lamp { fill: var(--accent); } .sm-chair { fill: color-mix(in srgb, var(--warn) 40%, var(--surface)); stroke: color-mix(in srgb, var(--warn) 70%, transparent); }
.sm-seam { stroke: color-mix(in srgb, var(--text) 25%, transparent); stroke-width: 1.5; } .sm-seam-fill { fill: color-mix(in srgb, var(--text) 12%, transparent); }
.sm-screen { fill: var(--text); }
.sm-window, .sm-key.window { fill: var(--sky-2); stroke: var(--sky-3); background: var(--sky-2); }
.sm-window-line { stroke: var(--surface); stroke-width: 2; }
.sm-door, .sm-key.door { fill: color-mix(in srgb, var(--warn) 55%, var(--surface)); stroke: var(--warn); background: color-mix(in srgb, var(--warn) 55%, var(--surface)); }
.sm-door-arc { fill: none; stroke: var(--muted); stroke-dasharray: 4 3; }
.sm-dim line { stroke: var(--primary); stroke-width: 1.5; }
.sm-wheel { fill: var(--text); } .sm-wheel-ring { fill: none; stroke: var(--text); stroke-width: 3; }
.sm-car-body { fill: var(--surface-2); stroke: var(--text); stroke-width: 2.5; }
.sm-glass, .sm-key.glass { fill: color-mix(in srgb, var(--sky-2) 70%, var(--surface)); stroke: var(--sky-3); background: color-mix(in srgb, var(--sky-2) 70%, var(--surface)); }
.sm-light { fill: var(--warn-bg); stroke: var(--warn); }
.sm-boot, .sm-key.boot { fill: color-mix(in srgb, var(--warn) 18%, var(--surface)); stroke: color-mix(in srgb, var(--warn) 50%, transparent); stroke-dasharray: 5 4; background: color-mix(in srgb, var(--warn) 18%, var(--surface)); }
.sm-bag rect { fill: var(--warn); stroke: none; } .sm-bag line { stroke: var(--warn-bg); stroke-width: 1.5; }
.sm-coach-body { fill: var(--surface-2); stroke: var(--text); stroke-width: 2.5; }

/* ---------- 3D viewer (.v3d-*) ---------- */
.v3d { display: grid; gap: .8rem; }
.v3d-stage { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; min-height: 260px; max-height: 70vh; background: radial-gradient(120% 90% at 50% 0%, var(--sky-1), var(--bg-2) 70%); border: 1px solid var(--border); box-shadow: var(--shadow); touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; }
.v3d-stage:active { cursor: grabbing; }
.v3d-stage:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 55%, transparent); }
.v3d-canvas { display: block; width: 100% !important; height: 100% !important; position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.v3d-stage.is-ready .v3d-canvas { opacity: 1; }
.v3d-loading { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .6rem; align-items: center; justify-content: center; color: var(--muted); font-weight: 600; }
.v3d-markers { position: absolute; inset: 0; pointer-events: none; }
.v3d-marker { position: absolute; left: 0; top: 0; pointer-events: auto; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid #fff; background: var(--accent); color: #1a1200; font-weight: 800; font-size: .78rem; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 16px -6px rgba(0,0,0,.6), 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); transition: transform .2s var(--ease), background .2s; animation: v3dPulse 2.2s ease-out infinite; }
.v3d-marker:hover { transform: scale(1.18); }
.v3d-marker.active { background: #fff; color: var(--accent); border-color: var(--accent); transform: scale(1.25); animation: none; }
@keyframes v3dPulse { 0% { box-shadow: 0 6px 16px -6px rgba(0,0,0,.6), 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 70% { box-shadow: 0 6px 16px -6px rgba(0,0,0,.6), 0 0 0 12px transparent; } 100% { box-shadow: 0 6px 16px -6px rgba(0,0,0,.6), 0 0 0 0 transparent; } }
.v3d-toolbar { position: absolute; top: .6rem; right: .6rem; display: flex; gap: .35rem; z-index: 3; }
.v3d-btn { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); color: var(--text); font-weight: 600; font-size: .8rem; padding: .4rem .6rem; border-radius: 999px; cursor: pointer; transition: transform .15s, background .2s, color .2s; }
.v3d-btn:hover { transform: translateY(-1px); background: var(--surface); box-shadow: var(--shadow); }
.v3d-btn.on, .v3d-btn[aria-pressed="true"] { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
@media (max-width: 560px) { .v3d-btn-label { display: none; } .v3d-btn { width: 36px; height: 36px; justify-content: center; padding: 0; } }
.v3d-hint { position: absolute; left: .7rem; bottom: .6rem; z-index: 3; max-width: calc(100% - 1.4rem); font-size: .75rem; font-weight: 600; line-height: 1.3; color: var(--muted); background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(6px); padding: .3rem .6rem; border-radius: 12px; transition: opacity .6s; pointer-events: none; }
.v3d-stage.is-touched .v3d-hint { opacity: 0; }
.v3d-kind { position: absolute; left: .7rem; top: .6rem; z-index: 3; background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(6px); }
.v3d-under { display: grid; gap: .7rem; }
.v3d-chips { gap: .4rem; }
.v3d-chip b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #1a1200; font-size: .7rem; margin-right: .25rem; }
.v3d-chip.active b { background: #fff; color: var(--accent); }
.v3d-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1rem; padding: .9rem 1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); animation: fadeUp .25s var(--ease); }
.v3d-info-body { display: flex; gap: .8rem; align-items: flex-start; min-width: 0; flex: 1 1 280px; }
.v3d-info-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #1a1200; font-weight: 800; flex: none; }
.v3d-info-title { font-size: 1rem; margin-bottom: .15rem; }
.v3d-info-text { margin: 0; }
.v3d-info-nav { display: flex; gap: .4rem; }
.v3d-note, .v3d-nohs { margin: 0; display: flex; gap: .35rem; align-items: center; }
.v3d.is-fullscreen, .v3d.is-fsfallback { background: var(--bg); }
.v3d.is-fullscreen { padding: 1rem; height: 100vh; grid-template-rows: minmax(0, 1fr) auto; }
.v3d.is-fsfallback { position: fixed; inset: 0; z-index: 140; padding: 1rem; overflow: auto; grid-template-rows: minmax(0, 1fr) auto; }
.v3d.is-fullscreen .v3d-stage, .v3d.is-fsfallback .v3d-stage { aspect-ratio: auto; max-height: none; height: 100%; min-height: 50vh; }
.v3d-fallback { display: grid; gap: .8rem; }
.v3d-fallback-head { display: flex; gap: .8rem; align-items: flex-start; color: var(--text); }
.v3d-fallback-head .icon { color: var(--primary); flex: none; margin-top: .1rem; }
.v3d-fallback-list { margin: 0; padding-left: 1.3rem; display: grid; gap: .3rem; font-size: .92rem; }

/* ---------- upgrades (.up-*) ---------- */
.upgrades { display: grid; gap: 1.4rem; }
.up-section { display: grid; gap: .8rem; }
.up-h { display: flex; align-items: center; gap: .45rem; font-size: 1.05rem; }
.up-h .icon { color: var(--primary); }
.up-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; }
.up-card { padding: 1rem 1.05rem; display: grid; gap: .6rem; align-content: start; }
.up-card-head { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; }
.up-label { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.up-to { display: flex; align-items: center; gap: .3rem; margin-top: .15rem; }
.up-price { text-align: right; display: grid; justify-items: end; white-space: nowrap; }
.up-price b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.up-score { display: grid; gap: .3rem; }
.up-score-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.up-score-bar span { display: block; height: 100%; border-radius: 999px; background: var(--muted); transition: width .7s var(--ease); }
.up-card.great .up-score-bar span { background: linear-gradient(90deg, var(--ok), #4fd38a); }
.up-card.fair .up-score-bar span { background: linear-gradient(90deg, var(--warn), #f3b654); }
.up-card.pricey .up-score-bar span { background: linear-gradient(90deg, var(--danger), #ff8075); }
.up-verdict { font-size: .78rem; font-weight: 800; }
.up-verdict.great { color: var(--ok); } .up-verdict.fair { color: var(--warn); } .up-verdict.pricey { color: var(--danger); } .up-verdict.na { color: var(--muted); }
.up-rationale { margin: 0; color: var(--text); }
.up-card-foot { display: flex; justify-content: flex-end; }
.up-note, .up-intro { margin: 0; display: flex; gap: .35rem; align-items: flex-start; }
.up-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: 1rem 1.1rem; color: var(--text); text-decoration: none !important; background: linear-gradient(135deg, var(--primary-soft), var(--surface)); }
.up-cta .icon:first-child { color: var(--accent); }
.up-cta .icon:last-child { color: var(--primary); }
.up-cta b { display: block; }
.up-awards { display: grid; gap: .7rem; }
.up-award { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; padding: .95rem 1.05rem; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.up-award:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.up-award.can { border-color: color-mix(in srgb, var(--ok) 50%, var(--border)); }
.up-award-main { display: flex; gap: .8rem; align-items: flex-start; min-width: 0; }
.up-award-txt { display: grid; gap: .25rem; min-width: 0; }
.up-award-prog { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.up-award-miles b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.up-award-note { margin: .1rem 0 0; }
.up-match { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-weight: 700; font-size: .88rem; padding: .3rem .6rem; border-radius: 999px; }
.up-match.ok { color: var(--ok); background: var(--ok-bg); }
.up-match.short { color: var(--warn); background: var(--warn-bg); }
.up-match.short a { color: var(--warn); text-decoration: underline; margin-left: .2rem; }
.up-match.na { color: var(--muted); background: var(--surface-2); text-decoration: none !important; }
a.up-match.na:hover { color: var(--primary); background: var(--primary-soft); }
.up-award-side { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; }
.up-cpm { display: grid; justify-items: center; line-height: 1; padding: .45rem .7rem; border-radius: var(--radius-sm); background: var(--surface-2); min-width: 64px; }
.up-cpm b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.up-cpm.great { background: var(--ok-bg); color: var(--ok); } .up-cpm.fair { background: var(--warn-bg); color: var(--warn); } .up-cpm.pricey { background: var(--danger-bg); color: var(--danger); }
.up-check { margin-left: auto; }
@media (min-width: 760px) {
  .up-award { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .up-award-side { justify-content: flex-end; max-width: 320px; }
}