:root {
  --bg: #08090b;
  --bg-2: #0c0d10;
  --surface: rgba(18, 19, 23, .92);
  --surface-solid: #121317;
  --surface-2: #17191e;
  --surface-3: #1d2026;
  --text: #f5f6f8;
  --muted: #9298a3;
  --muted-2: #666c76;
  --line: rgba(255,255,255,.075);
  --line-strong: rgba(255,255,255,.14);
  --accent: #e42b37;
  --accent-2: #ff4350;
  --accent-dark: #a9131f;
  --accent-soft: rgba(228,43,55,.12);
  --accent-soft-2: rgba(228,43,55,.2);
  --green: #4fd7a0;
  --amber: #ffc86e;
  --danger: #ff6d76;
  --shadow: 0 24px 70px rgba(0,0,0,.42);
  --shadow-soft: 0 12px 34px rgba(0,0,0,.25);
  --radius: 24px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
html { scroll-behavior: smooth; }
body {
  overflow-x: hidden;
  background:
    radial-gradient(850px 430px at 95% -10%, rgba(228,43,55,.15), transparent 58%),
    radial-gradient(650px 420px at -18% 25%, rgba(120,20,30,.08), transparent 63%),
    linear-gradient(180deg, #08090b 0%, #090a0d 55%, #07080a 100%);
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: rgba(228,43,55,.35); }
::-webkit-scrollbar { width: 0; height: 0; }

.boot-screen {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center; align-content: center; gap: 12px;
  background: #08090b;
  transition: opacity .42s ease, visibility .42s ease;
}
.boot-screen.is-done { opacity: 0; visibility: hidden; }
.boot-logo, .brand-mark {
  display: grid; place-items: center;
  background: linear-gradient(145deg, #ff4551, #df2532 58%, #9f101b);
  color: white; font-weight: 900; letter-spacing: -.06em;
  box-shadow: 0 12px 38px rgba(228,43,55,.28), inset 0 1px rgba(255,255,255,.18);
}
.boot-logo { width: 70px; height: 70px; border-radius: 23px; font-size: 25px; animation: bootPulse 1.9s ease-in-out infinite; }
.boot-wordmark { font-size: 23px; font-weight: 850; letter-spacing: -.04em; }
.boot-loader { width: 92px; height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); margin-top: 8px; }
.boot-loader span { display: block; height: 100%; width: 42%; background: linear-gradient(90deg, transparent, var(--accent-2), transparent); animation: bootSlide 1s ease-in-out infinite; }
@keyframes bootPulse { 50% { transform: translateY(-4px) scale(1.025); filter: brightness(1.08); } }
@keyframes bootSlide { from { transform: translateX(-130%); } to { transform: translateX(340%); } }

.app { min-height: 100dvh; max-width: 900px; margin: 0 auto; padding-bottom: calc(90px + var(--safe-bottom)); }
.app-header {
  position: sticky; top: 0; z-index: 120;
  height: calc(70px + var(--safe-top));
  padding: calc(11px + var(--safe-top)) 18px 10px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, rgba(8,9,11,.97) 58%, rgba(8,9,11,.80) 78%, transparent);
  backdrop-filter: blur(18px) saturate(130%);
}
.brand-lockup { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 39px; height: 39px; border-radius: 13px; font-size: 13px; }
.brand-name { font-weight: 860; letter-spacing: -.04em; font-size: 16px; line-height: 1.05; }
.brand-caption { color: var(--muted); font-size: 11px; margin-top: 4px; }
.round-button {
  width: 40px; height: 40px; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(255,255,255,.04); color: #d9dce2; font-size: 18px;
  display: grid; place-items: center; transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.round-button:hover { border-color: rgba(228,43,55,.26); background: rgba(228,43,55,.06); }
.round-button:active { transform: scale(.94); }

.page-root { padding: 0 16px 24px; }
.page { animation: pageIn .38s cubic-bezier(.18,.84,.22,1) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

::view-transition-old(root) { animation: .18s ease both viewFadeOut; }
::view-transition-new(root) { animation: .28s cubic-bezier(.18,.84,.22,1) both viewFadeIn; }
@keyframes viewFadeOut { to { opacity: .72; transform: scale(.997); } }
@keyframes viewFadeIn { from { opacity: 0; transform: translateY(5px) scale(.998); } }
.eyebrow { color: #ff727c; text-transform: uppercase; letter-spacing: .15em; font-size: 9px; font-weight: 900; }

.hero {
  position: relative; overflow: hidden;
  min-height: 270px; padding: 29px 22px 21px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    radial-gradient(520px 260px at 82% -15%, rgba(228,43,55,.28), transparent 62%),
    linear-gradient(145deg, #18191e 0%, #111216 57%, #0d0e11 100%);
  box-shadow: var(--shadow-soft);
}
.hero::before {
  content: ""; position: absolute; width: 290px; height: 290px; right: -132px; bottom: -150px;
  border: 1px solid rgba(255,255,255,.075); border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255,255,255,.014), 0 0 0 58px rgba(255,255,255,.01);
}
.hero-glow { position:absolute; width:160px; height:160px; right:18%; top:-110px; background:rgba(228,43,55,.18); filter:blur(48px); border-radius:50%; pointer-events:none; }
.hero h1 { position:relative; margin: 12px 0 11px; max-width: 600px; font-size: clamp(34px, 9vw, 52px); line-height: .98; letter-spacing: -.06em; }
.hero h1 span { color: #c4c7cd; font-weight: 730; }
.hero p { position:relative; margin: 0; max-width: 500px; color: #9ea4af; font-size: 13px; line-height: 1.5; }
.ai-search {
  position: relative; z-index: 2; margin-top: 23px; display: flex; gap: 8px; align-items: center;
  padding: 6px 6px 6px 13px; border-radius: 18px; border: 1px solid rgba(255,255,255,.09);
  background: rgba(5,6,8,.62); backdrop-filter: blur(10px); transition: border-color .2s ease, box-shadow .2s ease;
}
.ai-search:focus-within { border-color: rgba(228,43,55,.38); box-shadow: 0 0 0 4px rgba(228,43,55,.07); }
.search-spark { color: var(--accent-2); font-size: 13px; }
.ai-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 12px; }
.ai-search input::placeholder { color: #6f747e; }
.ai-search button { width: 41px; height: 41px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(145deg, var(--accent-2), var(--accent)); box-shadow: 0 8px 22px rgba(228,43,55,.23); font-size:17px; transition:transform .18s ease; }
.ai-search button:active { transform:scale(.94); }

.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.quick-card {
  position: relative; overflow: hidden; min-height: 108px; padding: 15px; text-align: left;
  border: 1px solid var(--line); border-radius: 21px; background: rgba(18,19,23,.86);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, background .22s ease;
}
.quick-card:hover { border-color: rgba(228,43,55,.20); background: rgba(21,22,27,.92); }
.quick-card:active { transform: scale(.975); }
.quick-card .quick-icon { width:31px; height:31px; display:grid; place-items:center; border-radius:10px; background:var(--accent-soft); color:#ff6974; font-size:16px; margin-bottom:15px; }
.quick-card strong { display: block; font-size: 13px; }
.quick-card small { display: block; color: var(--muted); margin-top: 4px; font-size: 10px; line-height:1.35; }
.quick-card::after { content: ""; position: absolute; width: 76px; height: 76px; border-radius: 50%; right: -30px; top: -33px; background: rgba(228,43,55,.08); filter: blur(7px); }

.section { margin-top: 27px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 0 3px 12px; }
.section-head h2 { margin: 0; font-size: 19px; letter-spacing: -.035em; }
.section-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.text-button { border: 0; background: transparent; color: #ff6873; font-weight: 800; font-size: 11px; padding: 6px 0; }

.vehicle-grid { display: grid; gap: 12px; }
.vehicle-card {
  overflow: hidden; border-radius: 24px; border: 1px solid var(--line); background: rgba(18,19,23,.90);
  box-shadow: 0 12px 34px rgba(0,0,0,.17); transform: translateZ(0);
  transition: transform .26s cubic-bezier(.2,.8,.2,1), border-color .26s ease, box-shadow .26s ease;
}
.vehicle-card:hover { border-color: rgba(228,43,55,.18); box-shadow:0 16px 40px rgba(0,0,0,.25); }
.vehicle-card:active { transform: scale(.988); }
.vehicle-media { position: relative; aspect-ratio: 16/10.2; overflow: hidden; background: #111216; }
.vehicle-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.18,.8,.2,1); }
.vehicle-card:hover .vehicle-media img { transform: scale(1.025); }
.vehicle-media::after { content: ""; position: absolute; inset: 52% 0 0; background: linear-gradient(transparent, rgba(5,6,8,.54)); pointer-events: none; }
.vehicle-media-label { position:absolute; z-index:2; left:11px; bottom:10px; padding:7px 9px; border-radius:10px; background:rgba(8,9,11,.7); backdrop-filter:blur(10px); color:#d9dde4; font-size:9px; font-weight:800; border:1px solid rgba(255,255,255,.08); }
.media-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); font-size: 11px; background: linear-gradient(135deg, #16181d, #0e0f12); }
.favorite-button { position: absolute; z-index: 3; right: 11px; top: 11px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: rgba(7,8,10,.58); backdrop-filter: blur(10px); color: white; font-size: 18px; transition:.2s ease; }
.favorite-button.is-favorite, .detail-toolbar .is-favorite { color:#ff5965; border-color:rgba(228,43,55,.35); background:rgba(60,12,17,.56); }
 .recent-rail {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:min(78vw, 310px);
  gap:10px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  margin:0 -16px;
  padding:0 16px 5px;
}
.recent-rail .vehicle-card { scroll-snap-align:start; }
.recent-section { animation:sectionRise .45s cubic-bezier(.18,.84,.22,1) both; }
@keyframes sectionRise { from { opacity:0; transform:translateY(8px); } }

.vehicle-copy { padding: 14px 14px 15px; }
.vehicle-title { margin: 0; font-size: 15px; letter-spacing: -.03em; }
.vehicle-trim { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.35; min-height:13px; }
.spec-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.spec-chip { padding: 7px 8px; border-radius: 10px; background: #17191e; border: 1px solid var(--line); color: #c4c8cf; font-size: 9px; }

.skeleton { position:relative; min-height: 238px; border-radius:24px; overflow:hidden; background:#121317; border:1px solid var(--line); }
.skeleton span, .skeleton::after { content:""; position:absolute; inset:0; background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.045) 48%, transparent 62%); transform:translateX(-100%); animation:shimmer 1.35s infinite; }
@keyframes shimmer { to { transform:translateX(100%); } }

.empty-state { padding: 42px 20px; border: 1px dashed var(--line-strong); border-radius: 24px; text-align: center; background: rgba(255,255,255,.018); }
.empty-icon { width: 46px; height: 46px; margin: 0 auto 13px; border-radius: 15px; display: grid; place-items: center; background: var(--accent-soft); color: #ff6670; font-size: 20px; }
.empty-state h3 { margin: 0; font-size: 15px; }
.empty-state p { margin: 7px auto 0; max-width: 300px; color: var(--muted); font-size: 10px; line-height: 1.5; }

/* Catalog */
.catalog-page { padding-bottom: 10px; }
.catalog-title { padding: 8px 2px 16px; }
.catalog-title h1 { margin: 5px 0 7px; font-size: 30px; line-height:1.02; letter-spacing: -.055em; }
.catalog-title p { margin:0; max-width:530px; color:var(--muted); font-size:11px; line-height:1.5; }
.catalog-search-wrap { position:relative; z-index:60; }
.catalog-search-box { height:54px; display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:18px; padding:0 10px 0 14px; background:#121317; box-shadow:0 10px 28px rgba(0,0,0,.18); transition:border-color .2s ease, box-shadow .2s ease; }
.catalog-search-box:focus-within { border-color:rgba(228,43,55,.42); box-shadow:0 0 0 4px rgba(228,43,55,.065), 0 12px 30px rgba(0,0,0,.23); }
.catalog-search-box > span { color:#ff6671; font-size:18px; }
.catalog-search-box input { flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:12px; }
.catalog-search-box input::placeholder { color:#6c717a; }
.catalog-search-box button { width:32px; height:32px; border:0; border-radius:10px; background:#1b1d22; color:#8f949e; font-size:16px; }
.catalog-suggestions { position:absolute; left:0; right:0; top:60px; max-height:min(390px,48vh); overflow:auto; border:1px solid var(--line-strong); border-radius:18px; background:rgba(15,16,19,.98); backdrop-filter:blur(20px); box-shadow:var(--shadow); padding:6px; animation:dropIn .18s ease both; }
@keyframes dropIn { from { opacity:0; transform:translateY(-4px) scale(.99); } }
.catalog-suggestion { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; border:0; background:transparent; padding:11px 10px; border-radius:12px; text-align:left; transition:background .15s ease; }
.catalog-suggestion:hover, .catalog-suggestion:active { background:rgba(228,43,55,.08); }
.catalog-suggestion-main { min-width:0; display:flex; flex-direction:column; gap:3px; }
.catalog-suggestion-main strong { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.catalog-suggestion-main small { color:var(--muted); font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.catalog-suggestion-type { flex:0 0 auto; padding:5px 7px; border-radius:8px; background:#1b1d22; color:#8f949d; font-size:8px; }
.suggestion-loading { display:flex; align-items:center; gap:8px; padding:15px 12px; color:var(--muted); font-size:10px; }
.active-filter-row { display:flex; gap:7px; overflow:auto; margin:10px -16px 0; padding:0 16px 2px; }
.active-filter-chip { flex:0 0 auto; height:34px; border:1px solid rgba(228,43,55,.22); border-radius:11px; background:rgba(228,43,55,.075); color:#e9c4c7; padding:0 10px; font-size:9px; font-weight:720; }
.active-filter-chip span { color:#ff6670; margin-left:4px; font-size:12px; }
.catalog-toolbar { display:grid; grid-template-columns:auto 1fr; gap:8px; margin-top:12px; }
.filter-open-button, .catalog-run-button { min-height:48px; border-radius:15px; font-size:11px; font-weight:800; }
.filter-open-button { display:flex; align-items:center; gap:7px; border:1px solid var(--line); background:#14161a; padding:0 13px; }
.filter-open-icon { color:#ff5d68; font-size:16px; }
.filter-open-button b { display:grid; place-items:center; min-width:20px; height:20px; border-radius:7px; background:var(--accent); color:white; font-size:8px; }
.catalog-run-button { border:0; background:linear-gradient(145deg,var(--accent-2),var(--accent)); box-shadow:0 10px 26px rgba(228,43,55,.2); }
.catalog-run-button:disabled { opacity:.65; }
.catalog-empty-hint { margin-top:28px; min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1px dashed var(--line); border-radius:24px; background:rgba(255,255,255,.012); }
.catalog-empty-orb { width:46px; height:46px; display:grid; place-items:center; border-radius:15px; background:var(--accent-soft); color:#ff6570; font-size:20px; margin-bottom:12px; }
.catalog-empty-hint strong { font-size:13px; }
.catalog-empty-hint span { margin-top:5px; color:var(--muted); font-size:9px; }
.catalog-results { scroll-margin-top:82px; }
.result-toolbar { display:flex; justify-content:space-between; align-items:flex-end; gap:10px; margin:0 2px 11px; }
.result-toolbar strong { font-size:13px; }
.result-toolbar span { color:var(--muted); font-size:9px; }
.pagination { display:flex; align-items:center; justify-content:center; gap:9px; margin-top:16px; }
.pagination button { width:43px; height:43px; border-radius:14px; border:1px solid var(--line); background:#15171b; }
.pagination button:disabled { opacity:.32; }
.page-dot { min-width:70px; text-align:center; color:var(--muted); font-size:10px; }

.filter-backdrop { position:fixed; inset:0; z-index:700; background:rgba(0,0,0,.58); backdrop-filter:blur(5px); animation:fadeIn .22s ease both; }
.filter-sheet { position:fixed; z-index:710; left:50%; bottom:0; transform:translateX(-50%); width:min(900px,100%); max-height:88dvh; min-height:0; overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--line-strong); border-bottom:0; border-radius:28px 28px 0 0; background:#0f1013; box-shadow:0 -25px 70px rgba(0,0,0,.48); animation:sheetIn .34s cubic-bezier(.18,.88,.25,1) both; }
@keyframes fadeIn { from { opacity:0; } }
@keyframes sheetIn { from { transform:translate(-50%,24px); opacity:.5; } }
.filter-sheet.is-closing { animation:sheetOut .18s ease both; }
.filter-backdrop.is-closing { animation:fadeOut .18s ease both; }
@keyframes sheetOut { to { transform:translate(-50%,18px); opacity:0; } }
@keyframes fadeOut { to { opacity:0; } }
body.filter-open { overscroll-behavior:none; }
.sheet-handle { flex:0 0 auto; width:42px; height:4px; margin:9px auto 2px; border-radius:99px; background:#33363d; }
.sheet-head { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 16px 12px; border-bottom:1px solid var(--line); }
.sheet-head h2 { margin:3px 0 0; font-size:22px; letter-spacing:-.04em; }
.sheet-close { width:38px; height:38px; border:1px solid var(--line); border-radius:13px; background:#17191e; color:#aaaeb7; font-size:20px; }
.filter-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; overflow-anchor:none; scrollbar-gutter:stable; -webkit-overflow-scrolling:touch; padding:3px 16px 18px; }
.filter-section { padding:16px 0; border-bottom:1px solid var(--line); }
.filter-section:last-child { border-bottom:0; }
.filter-section h3 { margin:0 0 9px; font-size:12px; letter-spacing:-.02em; }
.filter-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }
.filter-section-head h3 { margin:0; }
.filter-section-head span { max-width:55%; color:#d3a7aa; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.input, .select { width:100%; height:45px; border:1px solid var(--line); border-radius:13px; background:#15171b; outline:0; padding:0 12px; color:#e8e9ed; font-size:10px; transition:border-color .2s ease, box-shadow .2s ease; }
.input:focus, .select:focus { border-color:rgba(228,43,55,.38); box-shadow:0 0 0 3px rgba(228,43,55,.06); }
.search-mini { margin-bottom:8px; }
.choice-grid { display:flex; flex-wrap:wrap; gap:6px; max-height:154px; overflow:auto; align-content:flex-start; }
.choice-chip { display:inline-flex; align-items:center; gap:6px; min-height:34px; max-width:100%; border:1px solid var(--line); border-radius:11px; background:#15171b; color:#c3c7ce; padding:0 9px; font-size:9px; transition:.17s ease; }
.choice-chip span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.choice-chip small { color:#717781; font-size:8px; }
.choice-chip.is-selected { border-color:rgba(228,43,55,.48); background:rgba(228,43,55,.12); color:white; }
.choice-empty { color:var(--muted); font-size:9px; padding:8px 0; }
.fuel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.fuel-button { min-height:39px; border:1px solid var(--line); border-radius:12px; background:#15171b; color:#aeb3bc; font-size:9px; transition:.17s ease; }
.fuel-button.is-selected { border-color:rgba(228,43,55,.5); background:rgba(228,43,55,.13); color:#fff; }
.sheet-actions { flex:0 0 auto; display:grid; grid-template-columns:.72fr 1.28fr; gap:8px; padding:10px 16px calc(12px + var(--safe-bottom)); border-top:1px solid var(--line); background:rgba(15,16,19,.97); }
.filter-apply-button { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-left:18px; padding-right:12px; transition:opacity .2s ease, transform .2s ease, filter .2s ease; }
.filter-apply-button:disabled { opacity:.48; cursor:not-allowed; }
.filter-apply-button.is-loading { pointer-events:none; }
.filter-result-count { min-width:42px; height:28px; padding:0 9px; display:grid; place-items:center; border-radius:10px; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.13); color:#fff; font-size:10px; font-weight:850; font-variant-numeric:tabular-nums; transition:transform .18s ease, background .18s ease, opacity .18s ease; }
.filter-result-count.is-zero { background:rgba(0,0,0,.16); color:#f2a2a8; }
.filter-count-spinner { width:13px; height:13px; border:2px solid rgba(255,255,255,.28); border-top-color:#fff; border-radius:50%; animation:spin .65s linear infinite; }
.primary-button, .secondary-button { min-height:47px; border-radius:14px; font-size:10px; font-weight:820; }
.primary-button { border:0; background:linear-gradient(145deg,var(--accent-2),var(--accent)); box-shadow:0 9px 24px rgba(228,43,55,.18); }
.secondary-button { border:1px solid var(--line); background:#17191e; color:#c7cad0; }

/* Bottom navigation */
.bottom-nav {
  position: fixed; z-index: 500; left: 50%; transform: translateX(-50%); bottom: 0;
  width: min(900px, 100%); height: calc(72px + var(--safe-bottom)); padding: 7px 8px var(--safe-bottom);
  display: grid; grid-template-columns: repeat(4,1fr); align-items: stretch;
  border-top: 1px solid rgba(255,255,255,.055); background: rgba(9,10,12,.91); backdrop-filter: blur(24px) saturate(130%);
}
.nav-item { position: relative; min-width:0; border: 0; border-radius:14px; background: transparent; color: #6c717b; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 8px; font-weight: 750; transition: color .2s ease, background .2s ease, transform .2s ease; }
.nav-item.is-active { color: #f2f3f5; background:linear-gradient(180deg,rgba(228,43,55,.08),transparent); }
.nav-item:active { transform:scale(.96); }
.nav-icon { width:24px; height:24px; display:grid; place-items:center; font-size: 19px; line-height: 1; transition:transform .2s ease,color .2s ease; }
.nav-ai-icon { font-size:15px; }
.nav-item.is-active .nav-icon { color:#ff5a65; transform:translateY(-1px); }

/* Chat */
.chat-page {
  height: calc(100dvh - 70px - 72px - var(--safe-top) - var(--safe-bottom));
  min-height: 460px; display:flex; flex-direction:column; overflow:hidden;
  padding-top:3px;
}
.chat-topbar { flex:0 0 auto; display:flex; align-items:end; justify-content:space-between; gap:12px; padding:5px 2px 10px; }
.chat-topbar h1 { margin:3px 0 0; font-size:25px; letter-spacing:-.05em; }
.ai-status { display:flex; align-items:center; gap:6px; color:#8f959e; font-size:8px; padding-bottom:4px; }
.ai-status i { width:6px; height:6px; border-radius:50%; background:#4fd7a0; box-shadow:0 0 0 4px rgba(79,215,160,.08); }
.chat-filter-summary {
  flex:0 0 auto;
  margin:0 0 9px;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(19,20,24,.94),rgba(13,14,17,.94));
  box-shadow:0 10px 26px rgba(0,0,0,.15);
  transition:border-color .22s ease, background .22s ease;
}
.chat-filter-summary.has-filters { border-color:rgba(228,43,55,.18); background:linear-gradient(145deg,rgba(31,16,20,.78),rgba(15,16,19,.96) 60%); }
.chat-filter-summary.is-refreshing { animation:filterSummaryRefresh .28s cubic-bezier(.18,.84,.22,1) both; }
@keyframes filterSummaryRefresh { from { opacity:.55; transform:translateY(-3px); } }
.chat-filter-summary-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.chat-filter-summary-head span { color:#f1f2f4; font-size:9px; font-weight:830; letter-spacing:.01em; }
.chat-filter-summary-head small { color:#747a84; font-size:7.5px; }
.chat-filter-chips { display:flex; gap:6px; overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:1px; }
.chat-filter-chip {
  flex:0 0 auto;
  max-width:220px;
  min-height:29px;
  display:flex;
  align-items:center;
  padding:0 9px;
  border-radius:9px;
  border:1px solid rgba(228,43,55,.23);
  background:rgba(228,43,55,.085);
  color:#efc3c6;
  font-size:8px;
  font-weight:760;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-filter-empty { color:#777d87; font-size:8px; line-height:1.4; }
.chat-log { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:10px; padding:7px 1px 15px; scroll-behavior:smooth; }
.chat-message { max-width:min(88%,620px); animation:bubbleIn .28s cubic-bezier(.18,.84,.22,1) both; }
.chat-message.user { align-self:flex-end; }
.chat-message.assistant { align-self:flex-start; }
@keyframes bubbleIn { from { opacity:0; transform:translateY(8px) scale(.988); } }
.chat-bubble { padding:11px 12px; border-radius:17px; font-size:11px; line-height:1.48; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-message.user .chat-bubble { background:linear-gradient(145deg,#f03b47,#c9202c); color:white; border-bottom-right-radius:5px; box-shadow:0 8px 20px rgba(176,22,31,.18); }
.chat-message.assistant .chat-bubble { background:#15171b; border:1px solid var(--line); border-bottom-left-radius:5px; color:#d9dce1; }
.chat-actions { display:flex; flex-direction:column; gap:9px; margin-top:7px; max-width:100%; transform-origin:top left; }
.chat-actions.is-swapping { opacity:.46; filter:blur(.15px); transition:opacity .16s ease; pointer-events:none; }
.chat-actions.is-entering { animation:actionSwapIn .24s cubic-bezier(.18,.84,.22,1) both; }
@keyframes actionSwapIn { from { opacity:0; transform:translateY(4px); } }
.chat-action-line { display:flex; flex-wrap:wrap; gap:6px; width:100%; }
.chat-action { flex:0 1 auto; min-height:34px; max-width:100%; padding:7px 10px; border-radius:10px; border:1px solid rgba(228,43,55,.2); background:rgba(228,43,55,.075); color:#efb7bb; font-size:8.5px; font-weight:760; line-height:1.2; white-space:normal; text-align:center; transition:.16s ease; }
.chat-action:hover:not(:disabled), .chat-action:active:not(:disabled) { background:rgba(228,43,55,.14); border-color:rgba(228,43,55,.36); color:white; }
.chat-action.is-stale, .chat-action:disabled { opacity:.34; pointer-events:none; }
.chat-gallery-wrap { position:relative; width:min(360px,80vw); margin-bottom:6px; border-radius:17px; overflow:hidden; border:1px solid var(--line); background:#111216; }
.chat-gallery { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; }
.chat-gallery img { flex:0 0 100%; width:100%; aspect-ratio:16/10; object-fit:cover; scroll-snap-align:center; }
.chat-gallery-count { position:absolute; right:8px; bottom:8px; padding:5px 7px; border-radius:8px; background:rgba(6,7,9,.66); backdrop-filter:blur(8px); font-size:8px; }
.chat-gallery-hint { position:absolute; left:8px; bottom:8px; padding:5px 7px; border-radius:8px; background:rgba(6,7,9,.55); backdrop-filter:blur(8px); color:#b7bbc3; font-size:7px; }

.chat-message.has-vehicle-cards { width:min(94vw,920px); max-width:min(94vw,920px); }
.chat-message.has-vehicle-cards .chat-bubble { width:fit-content; max-width:min(86vw,520px); }
.chat-message.is-content-swapping { transition:opacity .16s ease, transform .16s ease; }

.chat-vehicle-carousel {
  position:relative;
  width:min(86vw,760px);
  margin-top:8px;
  padding:10px 10px 12px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(155deg,#15171b,#0e0f12 72%);
  box-shadow:0 14px 36px rgba(0,0,0,.26);
  overflow:hidden;
  transition:opacity .18s ease, transform .18s ease, filter .18s ease;
}
.chat-vehicle-carousel.is-swapping { opacity:.52; transform:translateY(2px); filter:saturate(.8); pointer-events:none; }
.chat-vehicle-carousel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:1px 2px 8px; }
.chat-vehicle-carousel-head span { color:#9298a2; font-size:8px; font-weight:760; text-transform:uppercase; letter-spacing:.08em; }
.chat-vehicle-rail {
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  padding:0 2px 2px;
}
.chat-vehicle-rail::-webkit-scrollbar { display:none; }
.chat-vehicle-card {
  appearance:none;
  flex:0 0 min(84%,310px);
  scroll-snap-align:start;
  overflow:hidden;
  padding:0;
  border:1px solid rgba(255,255,255,.085);
  border-radius:17px;
  background:#111216;
  color:inherit;
  text-align:left;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  transition:transform .22s cubic-bezier(.18,.84,.22,1), border-color .22s ease, box-shadow .22s ease;
}
.chat-vehicle-card:hover { transform:translateY(-2px); border-color:rgba(228,43,55,.28); box-shadow:0 16px 30px rgba(0,0,0,.26); }
.chat-vehicle-card:active { transform:scale(.99); }
.chat-vehicle-photo { position:relative; aspect-ratio:16/10; overflow:hidden; background:#0d0e11; }
.chat-vehicle-photo img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.18,.84,.22,1); }
.chat-vehicle-card:hover .chat-vehicle-photo img { transform:scale(1.025); }
.chat-vehicle-photo::after { content:""; position:absolute; inset:auto 0 0; height:42%; background:linear-gradient(transparent,rgba(5,6,8,.72)); pointer-events:none; }
.chat-vehicle-photo-empty { width:100%; height:100%; display:grid; place-items:center; background:radial-gradient(circle at 70% 20%,rgba(228,43,55,.18),transparent 36%),linear-gradient(145deg,#17191e,#0d0e11); }
.chat-vehicle-photo-empty span { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:linear-gradient(145deg,var(--accent-2),var(--accent)); color:#fff; font-weight:900; font-size:12px; }
.chat-vehicle-status { position:absolute; z-index:2; left:9px; bottom:8px; padding:5px 7px; border-radius:999px; background:rgba(8,9,11,.72); backdrop-filter:blur(8px); color:#e8eaee; font-size:7px; }
.chat-vehicle-card-body { padding:11px 11px 12px; }
.chat-vehicle-card-kicker { margin-bottom:3px; color:#e04a54; font-size:7px; font-weight:820; text-transform:uppercase; letter-spacing:.08em; }
.chat-vehicle-card h3 { margin:0; color:#f4f5f6; font-size:13px; line-height:1.18; letter-spacing:-.025em; }
.chat-vehicle-card p { margin:4px 0 0; color:#aeb3bb; font-size:9px; line-height:1.35; }
.chat-vehicle-meta { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.chat-vehicle-meta span { padding:5px 7px; border-radius:8px; border:1px solid rgba(255,255,255,.07); background:#17191d; color:#c6cad0; font-size:7.5px; }
.chat-vehicle-open { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding-top:9px; border-top:1px solid rgba(255,255,255,.065); color:#f0b4b8; font-size:8px; font-weight:800; }
.chat-vehicle-open span { font-size:11px; }
.chat-vehicle-nav { position:absolute; z-index:3; top:50%; width:34px; height:34px; margin-top:-2px; border:1px solid rgba(255,255,255,.1); border-radius:50%; background:rgba(10,11,14,.84); backdrop-filter:blur(10px); color:#fff; font-size:18px; line-height:1; box-shadow:0 8px 20px rgba(0,0,0,.28); transition:.18s ease; }
.chat-vehicle-nav:hover { background:#1b1d22; border-color:rgba(228,43,55,.3); }
.chat-vehicle-nav.prev { left:4px; }
.chat-vehicle-nav.next { right:4px; }
.chat-vehicle-swipe-hint { padding-top:7px; color:#5f6570; font-size:7px; text-align:center; }
.chat-vehicle-page-nav { display:flex; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.055); }
.chat-vehicle-page-button { flex:1 1 0; min-height:38px; display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 12px; border:1px solid rgba(228,43,55,.22); border-radius:12px; background:linear-gradient(145deg,rgba(228,43,55,.12),rgba(228,43,55,.055)); color:#f0b9bd; font-size:8px; font-weight:800; letter-spacing:.01em; transition:transform .18s cubic-bezier(.18,.84,.22,1), background .18s ease, border-color .18s ease, color .18s ease; }
.chat-vehicle-page-button:hover:not(:disabled) { background:rgba(228,43,55,.16); border-color:rgba(228,43,55,.38); color:#fff; transform:translateY(-1px); }
.chat-vehicle-page-button:active:not(:disabled) { transform:scale(.99); }
.chat-vehicle-page-button:disabled { opacity:.35; pointer-events:none; }
.chat-vehicle-page-arrow { display:grid; place-items:center; width:21px; height:21px; border-radius:7px; background:rgba(228,43,55,.14); color:#ff6670; font-size:11px; line-height:1; }
.typing-message { min-height:38px; }
.typing { display:flex; gap:4px; align-items:center; width:fit-content; padding:11px 13px; border:1px solid var(--line); background:#15171b; border-radius:17px 17px 17px 5px; }
.typing i { width:5px; height:5px; border-radius:50%; background:#8c919a; animation:typing 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay:.14s; } .typing i:nth-child(3) { animation-delay:.28s; }
@keyframes typing { 50% { transform:translateY(-3px); opacity:.42; } }
.chat-composer-wrap { flex:0 0 auto; padding:8px 0 2px; background:linear-gradient(0deg,#08090b 72%,rgba(8,9,11,.9) 88%,transparent); }
.chat-composer { display:flex; align-items:flex-end; gap:7px; border:1px solid var(--line); border-radius:17px; background:#14161a; padding:5px; box-shadow:0 12px 28px rgba(0,0,0,.28); transition:border-color .2s ease, box-shadow .2s ease; }
.chat-composer:focus-within { border-color:rgba(228,43,55,.34); box-shadow:0 0 0 3px rgba(228,43,55,.055),0 12px 28px rgba(0,0,0,.28); }
.chat-composer textarea { flex:1; min-height:38px; max-height:110px; resize:none; border:0; outline:0; background:transparent; padding:9px 7px; font-size:11px; line-height:1.4; }
.chat-composer textarea::placeholder { color:#686e77; }
.send-button { flex:0 0 40px; width:40px; height:40px; border-radius:13px; border:0; background:linear-gradient(145deg,var(--accent-2),var(--accent)); color:white; font-size:15px; box-shadow:0 8px 20px rgba(228,43,55,.2); transition:transform .17s ease,opacity .17s ease; }
.send-button:active { transform:scale(.94); }
.send-button:disabled { opacity:.45; }
.composer-hint { text-align:center; color:#545a63; font-size:7px; padding-top:5px; }

/* Vehicle detail */
.vehicle-view {
  position:fixed;
  inset:0;
  z-index:1200;
  overflow-y:auto;
  scroll-behavior:smooth;
  background:
    radial-gradient(720px 340px at 95% -5%, rgba(228,43,55,.10), transparent 62%),
    var(--bg);
  animation:detailIn .42s cubic-bezier(.16,.84,.25,1) both;
}
.vehicle-view.is-closing { animation:detailOut .24s ease both; }
@keyframes detailIn { from { opacity:0; transform:translateY(22px) scale(.991); } }
@keyframes detailOut { to { opacity:0; transform:translateY(15px) scale(.994); } }

.detail-shell {
  max-width:900px;
  min-height:100dvh;
  margin:0 auto;
  padding-bottom:calc(36px + var(--safe-bottom));
  background:#090a0d;
  box-shadow:0 0 70px rgba(0,0,0,.22);
}
.detail-loading { padding-top:90px; }
.detail-error { padding:80px 16px; }
.detail-error .secondary-button { width:100%; margin-top:12px; }

.detail-hero {
  position:relative;
  overflow:hidden;
  min-height:280px;
  background:#111216;
}
.detail-hero-shade {
  position:absolute;
  inset:auto 0 0;
  height:38%;
  pointer-events:none;
  background:linear-gradient(transparent,rgba(7,8,10,.54));
}
.detail-toolbar {
  position:absolute;
  z-index:20;
  left:0;
  right:0;
  top:0;
  padding:calc(12px + var(--safe-top)) 14px 12px;
  display:flex;
  justify-content:space-between;
  pointer-events:none;
}
.detail-toolbar button {
  pointer-events:auto;
  width:43px;
  height:43px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(7,8,10,.58);
  backdrop-filter:blur(14px) saturate(130%);
  color:white;
  font-size:19px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.detail-toolbar button:active { transform:scale(.94); }

.detail-gallery {
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  background:#111216;
}
.detail-gallery img,
.detail-gallery .media-placeholder {
  flex:0 0 100%;
  width:100%;
  aspect-ratio:1.08/1;
  max-height:70vh;
  object-fit:cover;
  scroll-snap-align:center;
}
.gallery-count {
  position:absolute;
  z-index:11;
  right:15px;
  bottom:16px;
  padding:7px 10px;
  border-radius:9px;
  background:rgba(6,7,9,.68);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08);
  font-size:8px;
  font-weight:760;
}
.gallery-progress {
  position:absolute;
  z-index:11;
  left:50%;
  bottom:19px;
  transform:translateX(-50%);
  display:flex;
  gap:4px;
}
.gallery-progress i {
  width:13px;
  height:3px;
  border-radius:99px;
  background:rgba(255,255,255,.28);
  transition:width .2s ease, background .2s ease;
}
.gallery-progress i.is-active { width:24px; background:#fff; }
.detail-status {
  position:absolute;
  z-index:11;
  left:15px;
  bottom:14px;
  min-height:28px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 9px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(7,8,10,.66);
  backdrop-filter:blur(10px);
  color:#dfe2e7;
  font-size:8px;
  font-weight:760;
}
.detail-status i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px rgba(79,215,160,.08);
}

.detail-body {
  position:relative;
  margin-top:-22px;
  border-radius:28px 28px 0 0;
  background:
    radial-gradient(440px 240px at 100% 0%, rgba(228,43,55,.055), transparent 70%),
    #090a0d;
  padding:26px 16px 0;
}
.detail-animate { animation:detailBlockIn .48s cubic-bezier(.18,.84,.22,1) both; }
.detail-animate:nth-of-type(2) { animation-delay:.04s; }
.detail-animate:nth-of-type(3) { animation-delay:.08s; }
@keyframes detailBlockIn { from { opacity:0; transform:translateY(10px); } }

.detail-kicker {
  color:#ff6671;
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.detail-title {
  margin:7px 0 0;
  max-width:760px;
  font-size:clamp(28px,7vw,43px);
  line-height:1;
  letter-spacing:-.058em;
}
.detail-sub {
  margin:8px 0 0;
  color:#b1b5bd;
  font-size:11px;
  line-height:1.45;
}
.detail-description {
  margin:7px 0 0;
  max-width:620px;
  color:#777d87;
  font-size:9px;
  line-height:1.5;
}

.detail-metrics {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:20px;
}
.detail-metric {
  min-height:72px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(145deg,#15171b,#111216);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  transition:transform .2s ease, border-color .2s ease;
}
.detail-metric:hover { border-color:rgba(228,43,55,.16); transform:translateY(-1px); }
.detail-metric-icon {
  flex:0 0 31px;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(228,43,55,.09);
  color:#ff6d77;
  font-size:13px;
}
.detail-metric div { min-width:0; }
.detail-metric small { display:block; color:#6f7580; font-size:7.5px; }
.detail-metric strong {
  display:block;
  margin-top:3px;
  color:#f1f2f4;
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.detail-section { margin-top:28px; }
.detail-section-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:10px; }
.detail-section-head span,
.detail-section-label {
  display:block;
  margin-bottom:3px;
  color:#ff6671;
  font-size:7.5px;
  font-weight:880;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.detail-section h3,
.calculation-heading h3 {
  margin:0;
  font-size:16px;
  letter-spacing:-.035em;
}
.spec-list {
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(145deg,#131519,#101115);
}
.spec-item {
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:13px 14px;
  border-bottom:1px solid var(--line);
  font-size:10px;
}
.spec-item:last-child { border:0; }
.spec-item span:first-child { color:#787e88; }
.spec-item span:last-child { text-align:right; font-weight:760; color:#e7e9ed; }

.calculation-card {
  position:relative;
  overflow:hidden;
  padding:16px;
  border:1px solid rgba(228,43,55,.16);
  border-radius:22px;
  background:
    radial-gradient(280px 150px at 100% 0%, rgba(228,43,55,.11), transparent 70%),
    linear-gradient(145deg,#151316,#101115 64%);
  box-shadow:0 16px 42px rgba(0,0,0,.18);
}
.calculation-heading {
  display:flex;
  align-items:flex-start;
  gap:11px;
}
.calc-icon {
  flex:0 0 37px;
  width:37px;
  height:37px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(228,43,55,.12);
  border:1px solid rgba(228,43,55,.16);
  color:#ff6873;
  font-size:15px;
  font-weight:900;
}
.calculation-heading p {
  margin:5px 0 13px;
  max-width:520px;
  color:#7f858f;
  font-size:8.5px;
  line-height:1.5;
}
.calc-modes {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
}
.calc-mode {
  min-height:68px;
  padding:10px 9px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#131519;
  text-align:left;
  color:#8f959f;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.calc-mode:active { transform:scale(.98); }
.calc-mode:disabled { opacity:.55; }
.calc-mode strong { display:block; color:#f1f2f4; font-size:10px; margin-bottom:4px; }
.calc-mode span { font-size:8px; line-height:1.25; }
.calc-mode.is-selected {
  border-color:rgba(228,43,55,.48);
  background:rgba(228,43,55,.105);
  box-shadow:inset 0 0 0 1px rgba(228,43,55,.035),0 8px 24px rgba(143,14,24,.08);
}

#calcOutput { min-height:54px; }
#calcOutput.is-updating { animation:calcOutputIn .28s cubic-bezier(.18,.84,.22,1) both; }
@keyframes calcOutputIn { from { opacity:.5; transform:translateY(4px); } }

.calc-placeholder {
  margin-top:10px;
  min-height:54px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  padding:12px 13px;
  border-radius:14px;
  border:1px dashed var(--line);
  color:#9da2ab;
  font-size:9px;
  text-align:center;
}
.calc-placeholder small { color:#656b75; font-size:7.5px; }

.calc-loading {
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#111216;
}
.calc-loading div { display:flex; flex-direction:column; gap:3px; }
.calc-loading strong { font-size:10px; }
.calc-loading small { color:var(--muted); font-size:8px; }

.calc-result {
  margin-top:10px;
  border-radius:19px;
  border:1px solid var(--line);
  background:#111216;
  overflow:hidden;
  animation:reveal .32s cubic-bezier(.18,.84,.22,1) both;
}
@keyframes reveal { from { opacity:0; transform:translateY(7px) scale(.992); } }
.final-total {
  position:relative;
  padding:21px 16px;
  background:linear-gradient(145deg,#211215,#111216 67%);
  border-color:rgba(228,43,55,.24);
}
.final-total-glow {
  position:absolute;
  width:150px;
  height:150px;
  right:-55px;
  top:-72px;
  background:rgba(228,43,55,.17);
  filter:blur(28px);
  border-radius:50%;
  pointer-events:none;
}
.final-total small { position:relative; display:block; color:#c9969a; font-size:9px; }
.final-total strong {
  position:relative;
  display:block;
  margin-top:5px;
  font-size:34px;
  letter-spacing:-.058em;
}
.final-total span { position:relative; display:block; margin-top:5px; color:var(--muted); font-size:8px; }
.calc-error {
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:5px;
  border-color:rgba(255,109,118,.2);
}
.calc-error small { color:#ff8a92; font-size:9px; }
.calc-error span { color:var(--muted); font-size:9px; }

.favorites-head { margin-bottom:16px; }
.toast-host { position:fixed; z-index:3100; left:50%; bottom:calc(88px + var(--safe-bottom)); transform:translateX(-50%); width:min(90%,460px); pointer-events:none; display:grid; gap:8px; }
.toast { opacity:0; transform:translateY(8px); padding:11px 13px; border:1px solid var(--line-strong); border-radius:13px; background:rgba(19,21,25,.96); backdrop-filter:blur(14px); box-shadow:var(--shadow); font-size:10px; transition:.22s ease; }
.toast.is-visible { opacity:1; transform:none; }
.toast.error { border-color:rgba(255,109,118,.25); color:#ffc1c5; }
.loading-inline { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:10px; padding:12px 0; }
.spinner { width:14px; height:14px; flex:0 0 14px; border:2px solid rgba(255,255,255,.11); border-top-color:#ff5b66; border-radius:50%; animation:spin .75s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

@media (min-width: 600px) {
  .page-root { padding-left:22px; padding-right:22px; }
  .vehicle-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero { padding:36px; }
  .quick-grid { grid-template-columns:repeat(3,1fr); }
  .detail-gallery img, .detail-gallery .media-placeholder { aspect-ratio:16/10; }
  .detail-body { padding-left:28px; padding-right:28px; }
  .detail-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .recent-rail { margin-left:-22px; margin-right:-22px; padding-left:22px; padding-right:22px; grid-auto-columns:min(45vw,340px); }
  .chat-page { height:calc(100dvh - 70px - 72px - var(--safe-top) - var(--safe-bottom)); }
  .chat-message { max-width:72%; }
  .chat-message.has-vehicle-cards { width:min(82vw,920px); max-width:min(82vw,920px); }
  .chat-vehicle-card { flex-basis:min(42%,320px); }
}

@media (min-width: 900px) {
  .filter-sheet { top:18px; bottom:18px; max-height:none; border-radius:28px; border-bottom:1px solid var(--line-strong); }
  .sheet-actions { border-radius:0 0 28px 28px; }
}

@media (max-width: 390px) {
  .chat-vehicle-carousel { width:88vw; padding-left:8px; padding-right:8px; }
  .chat-vehicle-card { flex-basis:88%; }
  .chat-vehicle-nav { display:none; }
  .hero { padding-left:18px; padding-right:18px; }
  .catalog-toolbar { grid-template-columns:1fr; }
  .filter-open-button { justify-content:center; }
  .fuel-grid { grid-template-columns:repeat(2,1fr); }
  .calc-modes { grid-template-columns:1fr; }
  .composer-hint { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}


/* ==========================================================================
   Final polish / performance layer — v1.5.0
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(.16,.84,.24,1);
  --ease-spring: cubic-bezier(.2,.88,.24,1.08);
  --glass: rgba(13,14,17,.88);
}

html { overscroll-behavior-y: none; }
body {
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
button, [role="button"] { touch-action:manipulation; user-select:none; }
button:disabled { cursor:default; }
input, textarea, select { caret-color:var(--accent-2); }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline:2px solid rgba(255,77,89,.72);
  outline-offset:2px;
}

.app-header {
  border-bottom:1px solid rgba(255,255,255,.028);
  transform:translateZ(0);
}
.brand-mark, .boot-logo { transform:translateZ(0); }
.page-root { min-height:calc(100dvh - 70px - 90px); }
.supports-view-transition .page { animation:none; }

/* Avoid expensive painting for long catalogues while preserving layout. */
.vehicle-grid > .vehicle-card {
  content-visibility:auto;
  contain-intrinsic-size:390px;
  contain:layout paint style;
}
.vehicle-card, .quick-card, .chat-vehicle-card, .detail-metric {
  backface-visibility:hidden;
}
.vehicle-media img, .chat-vehicle-photo img, .detail-gallery img {
  backface-visibility:hidden;
  transform:translateZ(0);
}

/* Slightly more premium surfaces without increasing blur cost. */
.hero {
  box-shadow:0 18px 52px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.025);
}
.quick-card, .vehicle-card {
  box-shadow:0 10px 30px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.018);
}
.quick-card::before, .vehicle-card::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.vehicle-card { position:relative; }

#homeCars { transition:opacity .18s ease, transform .18s var(--ease-out); }
#homeCars.is-refreshing { opacity:.72; transform:translateY(2px); }

.active-filter-row, .chat-filter-chips, .recent-rail, .chat-vehicle-rail, .chat-gallery, .detail-gallery {
  scrollbar-width:none;
}
.recent-rail, .chat-vehicle-rail, .chat-gallery, .detail-gallery {
  scroll-snap-stop:always;
  -webkit-overflow-scrolling:touch;
}
.chat-vehicle-rail { touch-action:pan-x pan-y; }
.detail-gallery, .chat-gallery { touch-action:pan-x pinch-zoom; }

.bottom-nav {
  box-shadow:0 -16px 42px rgba(0,0,0,.16);
  transform:translate3d(-50%,0,0);
}
.nav-item::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:4px;
  width:18px;
  height:2px;
  border-radius:99px;
  background:var(--accent-2);
  opacity:0;
  transform:translateX(-50%) scaleX(.4);
  transition:opacity .2s ease, transform .25s var(--ease-out);
}
.nav-item.is-active::after { opacity:.9; transform:translateX(-50%) scaleX(1); }

.filter-sheet, .vehicle-view { will-change:opacity, transform; }
.filter-sheet { transform:translate3d(-50%,0,0); }
.sheet-actions { box-shadow:0 -14px 32px rgba(0,0,0,.18); }
.filter-result-count { font-variant-numeric:tabular-nums; }
.choice-chip, .fuel-button, .chat-action, .chat-vehicle-page-button, .calc-mode {
  transform:translateZ(0);
}

.chat-log {
  overflow-anchor:none;
  scroll-padding-bottom:18px;
  scrollbar-width:none;
}
.chat-composer-wrap { position:relative; z-index:5; }
.chat-composer {
  box-shadow:0 12px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.018);
}
.chat-message { transform:translateZ(0); }
.chat-vehicle-carousel {
  box-shadow:0 14px 38px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.018);
}
.chat-vehicle-card { contain:layout paint style; }
.chat-vehicle-card-body { min-height:146px; display:flex; flex-direction:column; }
.chat-vehicle-open { margin-top:auto; }

.vehicle-view { overscroll-behavior:contain; }
.detail-shell { transform:translateZ(0); }
.detail-gallery { scroll-behavior:smooth; }
.detail-toolbar { padding-top:max(12px,var(--safe-top)); }
.detail-body { box-shadow:0 -18px 42px rgba(0,0,0,.22); }
.calculation-card { box-shadow:0 18px 52px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.018); }

/* Hover effects only where a real hover device exists, preventing sticky mobile hover states. */
@media (hover:none) {
  .vehicle-card:hover, .quick-card:hover, .chat-vehicle-card:hover, .detail-metric:hover,
  .chat-vehicle-page-button:hover:not(:disabled), .round-button:hover {
    transform:none;
  }
  .vehicle-card:hover .vehicle-media img, .chat-vehicle-card:hover .chat-vehicle-photo img { transform:translateZ(0); }
}

@media (max-width: 600px) {
  /* Backdrop blur on many moving elements is expensive in Telegram WebView. */
  .vehicle-media-label, .favorite-button, .chat-vehicle-status, .detail-status,
  .chat-gallery-count, .chat-gallery-hint, .chat-vehicle-nav {
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(8,9,11,.88);
  }
  .app-header { backdrop-filter:blur(12px) saturate(115%); -webkit-backdrop-filter:blur(12px) saturate(115%); }
  .bottom-nav { backdrop-filter:blur(16px) saturate(115%); -webkit-backdrop-filter:blur(16px) saturate(115%); }
  .vehicle-grid > .vehicle-card { contain-intrinsic-size:340px; }
}

@media (prefers-reduced-motion: reduce) {
  .filter-sheet, .vehicle-view { will-change:auto; }
}