: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; }
}

/* ==========================================================================
   Light theme / chat stability layer — v1.6.0
   ========================================================================== */
:root {
  --bg: #f5f6f8;
  --bg-2: #eef1f4;
  --surface: rgba(255,255,255,.94);
  --surface-solid: #ffffff;
  --surface-2: #f8f9fb;
  --surface-3: #eef1f5;
  --text: #17191f;
  --muted: #6f7680;
  --muted-2: #989fa9;
  --line: rgba(20,24,32,.085);
  --line-strong: rgba(20,24,32,.145);
  --accent: #dd2734;
  --accent-2: #f33d49;
  --accent-dark: #a9131f;
  --accent-soft: rgba(221,39,52,.085);
  --accent-soft-2: rgba(221,39,52,.14);
  --green: #21a66f;
  --amber: #d4932f;
  --danger: #d93643;
  --shadow: 0 22px 58px rgba(27,34,46,.13);
  --shadow-soft: 0 10px 28px rgba(27,34,46,.085);
  --glass: rgba(255,255,255,.88);
}

html, body { background:var(--bg); color:var(--text); }
html, body, .app { max-width:100%; overflow-x:hidden; }
body {
  background:
    radial-gradient(780px 400px at 100% -8%, rgba(221,39,52,.10), transparent 58%),
    radial-gradient(620px 380px at -16% 24%, rgba(221,39,52,.045), transparent 62%),
    linear-gradient(180deg,#f8f9fb 0%,#f4f6f8 58%,#f2f4f7 100%);
}
::selection { background:rgba(221,39,52,.18); }

.boot-screen { background:#f7f8fa; }
.boot-wordmark { color:#17191f; }
.boot-loader { background:rgba(23,25,31,.08); }

.app-header {
  background:linear-gradient(180deg,rgba(248,249,251,.98) 58%,rgba(248,249,251,.88) 80%,transparent);
  border-bottom:1px solid rgba(20,24,32,.035);
}
.round-button { background:rgba(255,255,255,.80); color:#424852; box-shadow:0 6px 18px rgba(27,34,46,.05); }
.round-button:hover { background:#fff; }

.eyebrow { color:#dc3340; }
.hero {
  background:
    radial-gradient(520px 260px at 82% -15%,rgba(221,39,52,.14),transparent 62%),
    linear-gradient(145deg,#ffffff 0%,#f9fafb 58%,#f2f4f7 100%);
  box-shadow:0 18px 48px rgba(27,34,46,.08), inset 0 1px 0 rgba(255,255,255,.95);
}
.hero::before { border-color:rgba(20,24,32,.06); box-shadow:0 0 0 28px rgba(20,24,32,.012),0 0 0 58px rgba(20,24,32,.008); }
.hero h1 span { color:#777e88; }
.hero p { color:#68707b; }
.ai-search { border-color:var(--line-strong); background:rgba(255,255,255,.88); box-shadow:0 10px 26px rgba(27,34,46,.06); }
.ai-search input::placeholder { color:#9aa1aa; }

.quick-card, .vehicle-card {
  background:#fff;
  box-shadow:0 10px 30px rgba(27,34,46,.075), inset 0 1px 0 rgba(255,255,255,.9);
}
.quick-card:hover { background:#fff; }
.vehicle-card:hover { box-shadow:0 15px 36px rgba(27,34,46,.11); }
.spec-chip { background:#f6f7f9; color:#555d68; }
.skeleton { background:#fff; }
.skeleton span, .skeleton::after { background:linear-gradient(105deg,transparent 35%,rgba(20,24,32,.045) 48%,transparent 62%); }
.empty-state, .catalog-empty-hint { background:rgba(255,255,255,.56); }
.media-placeholder { background:linear-gradient(135deg,#f3f5f7,#e9edf1); }

.catalog-search-box { background:#fff; box-shadow:0 9px 24px rgba(27,34,46,.07); }
.catalog-search-box:focus-within { box-shadow:0 0 0 4px rgba(221,39,52,.055),0 10px 28px rgba(27,34,46,.085); }
.catalog-search-box input::placeholder { color:#9aa1aa; }
.catalog-search-box button, .catalog-suggestion-type { background:#f1f3f6; color:#6f7680; }
.catalog-suggestions { background:rgba(255,255,255,.985); box-shadow:0 20px 55px rgba(27,34,46,.14); }
.active-filter-chip { color:#9d343c; }
.filter-open-button, .pagination button { background:#fff; color:#343942; }

.filter-backdrop { background:rgba(29,34,43,.30); }
.filter-sheet { background:#fff; box-shadow:0 -22px 60px rgba(27,34,46,.18); }
.sheet-handle { background:#d7dbe0; }
.sheet-close { background:#f5f6f8; color:#5f6670; }
.filter-section-head span { color:#a7444c; }
.input, .select, .choice-chip, .fuel-button { background:#f8f9fb; color:#303640; }
.input, .select { color:#242932; }
.choice-chip small { color:#8e959f; }
.choice-chip.is-selected, .fuel-button.is-selected { color:#9c1d28; background:rgba(221,39,52,.09); }
.sheet-actions { background:rgba(255,255,255,.975); box-shadow:0 -12px 30px rgba(27,34,46,.08); }
.secondary-button { background:#f6f7f9; color:#4d545e; }
.filter-result-count { background:rgba(255,255,255,.20); border-color:rgba(255,255,255,.30); color:#fff; }

.bottom-nav {
  border-top:1px solid rgba(20,24,32,.07);
  background:rgba(255,255,255,.92);
  box-shadow:0 -12px 34px rgba(27,34,46,.08);
}
.nav-item { color:#949aa3; }
.nav-item.is-active { color:#20242b; background:linear-gradient(180deg,rgba(221,39,52,.065),transparent); }

/* AI chat: compact header + hard horizontal containment. */
.chat-page {
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  padding-top:0;
}
.chat-topbar {
  min-width:0;
  align-items:center;
  padding:0 2px 5px;
  gap:8px;
}
.chat-topbar .eyebrow { display:none; }
.chat-topbar h1 { margin:0; font-size:20px; line-height:1; letter-spacing:-.045em; }
.ai-status { padding-bottom:0; font-size:7.5px; color:#7d848e; }
.ai-status i { width:5px; height:5px; box-shadow:0 0 0 3px rgba(33,166,111,.08); }

.chat-filter-summary {
  margin:0 0 6px;
  padding:7px 9px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 5px 16px rgba(27,34,46,.045);
}
.chat-filter-summary.has-filters { background:linear-gradient(145deg,rgba(255,245,246,.96),#fff 62%); }
.chat-filter-summary-head { margin-bottom:5px; }
.chat-filter-summary-head span { color:#30353d; font-size:8.5px; }
.chat-filter-summary-head small { color:#8b929c; font-size:7px; }
.chat-filter-summary:not(.has-filters) .chat-filter-summary-head { margin-bottom:0; }
.chat-filter-summary:not(.has-filters) .chat-filter-chips { display:none; }
.chat-filter-chips { max-width:100%; min-width:0; gap:5px; overflow-x:auto; overflow-y:hidden; }
.chat-filter-chip { min-height:26px; padding:0 8px; color:#9f353e; background:rgba(221,39,52,.065); }

.chat-log {
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
  overscroll-behavior-x:none;
  padding:5px 0 13px;
}
.chat-message { min-width:0; max-width:min(88%,620px); }
.chat-message.has-vehicle-cards { width:100%; max-width:100%; min-width:0; }
.chat-message.has-vehicle-cards .chat-bubble { max-width:min(88%,520px); }
.chat-message.assistant .chat-bubble { background:#fff; color:#333941; box-shadow:0 5px 17px rgba(27,34,46,.055); }
.chat-action { background:rgba(221,39,52,.055); color:#9f353e; }
.chat-action:hover:not(:disabled), .chat-action:active:not(:disabled) { color:#8e1d27; background:rgba(221,39,52,.10); }

.chat-gallery-wrap { max-width:100%; background:#edf0f3; }
.chat-vehicle-carousel {
  width:100%;
  max-width:100%;
  min-width:0;
  background:linear-gradient(155deg,#ffffff,#f7f8fa 72%);
  box-shadow:0 10px 28px rgba(27,34,46,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.chat-vehicle-carousel-head span { color:#858c96; }
.chat-vehicle-rail { max-width:100%; min-width:0; overscroll-behavior-x:contain; }
.chat-vehicle-card {
  border-color:rgba(20,24,32,.09);
  background:#fff;
  box-shadow:0 8px 20px rgba(27,34,46,.075);
}
.chat-vehicle-card:hover { box-shadow:0 13px 28px rgba(27,34,46,.11); }
.chat-vehicle-photo { background:#edf0f3; }
.chat-vehicle-photo-empty { background:radial-gradient(circle at 70% 20%,rgba(221,39,52,.10),transparent 36%),linear-gradient(145deg,#f5f6f8,#e9edf1); }
.chat-vehicle-card h3 { color:#20242b; }
.chat-vehicle-card p { color:#6e7580; }
.chat-vehicle-meta span { border-color:rgba(20,24,32,.07); background:#f5f6f8; color:#59616b; }
.chat-vehicle-open { border-top-color:rgba(20,24,32,.07); color:#a42d37; }
.chat-vehicle-page-nav { border-top-color:rgba(20,24,32,.065); }
.chat-vehicle-page-button { color:#9f343d; background:linear-gradient(145deg,rgba(221,39,52,.075),rgba(221,39,52,.035)); }
.chat-vehicle-page-button:hover:not(:disabled) { color:#8d1f29; }
.typing { background:#fff; }
.chat-composer-wrap { background:linear-gradient(0deg,#f5f6f8 72%,rgba(245,246,248,.92) 88%,transparent); }
.chat-composer { background:#fff; box-shadow:0 9px 26px rgba(27,34,46,.09),inset 0 1px 0 rgba(255,255,255,.95); }
.chat-composer:focus-within { box-shadow:0 0 0 3px rgba(221,39,52,.05),0 9px 26px rgba(27,34,46,.10); }
.chat-composer textarea::placeholder { color:#9ca2ab; }
.composer-hint { color:#a0a6af; }

/* Vehicle detail */
.vehicle-view { background:radial-gradient(720px 340px at 95% -5%,rgba(221,39,52,.07),transparent 62%),var(--bg); }
.detail-shell { background:#f7f8fa; box-shadow:0 0 55px rgba(27,34,46,.10); }
.detail-hero, .detail-gallery { background:#edf0f3; }
.detail-body { background:radial-gradient(440px 240px at 100% 0%,rgba(221,39,52,.045),transparent 70%),#f7f8fa; box-shadow:0 -18px 42px rgba(27,34,46,.09); }
.detail-sub { color:#59616c; }
.detail-description { color:#7a818b; }
.detail-metric { background:linear-gradient(145deg,#fff,#f7f8fa); box-shadow:0 7px 20px rgba(27,34,46,.06); }
.detail-metric small { color:#818893; }
.detail-metric strong { color:#252a32; }
.spec-list { background:linear-gradient(145deg,#fff,#f7f8fa); }
.spec-item span:first-child { color:#818892; }
.spec-item span:last-child { color:#2c3139; }
.calculation-card { background:radial-gradient(280px 150px at 100% 0%,rgba(221,39,52,.075),transparent 70%),linear-gradient(145deg,#fff,#f7f8fa 64%); box-shadow:0 14px 38px rgba(27,34,46,.08); }
.calculation-heading p { color:#777e88; }
.calc-mode { background:#f7f8fa; color:#747b85; }
.calc-mode strong { color:#2c3139; }
.calc-loading, .calc-result { background:#fff; }
.final-total { background:linear-gradient(145deg,#fff3f4,#fff 67%); }
.final-total small { color:#a74a52; }

.toast { background:rgba(255,255,255,.97); color:#30363f; box-shadow:0 14px 38px rgba(27,34,46,.13); }
.toast.error { color:#a62d37; }
.spinner { border-color:rgba(20,24,32,.10); border-top-color:#e43a46; }

/* Keep dark translucent controls only when they sit directly on photos. */
.vehicle-media-label, .favorite-button, .detail-toolbar button,
.gallery-count, .detail-status, .chat-gallery-count, .chat-gallery-hint,
.chat-vehicle-status, .chat-vehicle-nav {
  color:#fff;
}

@media (min-width:600px) {
  .chat-message.has-vehicle-cards { width:100%; max-width:100%; }
}

@media (max-width:600px) {
  .chat-page { height:calc(100dvh - 70px - 72px - var(--safe-top) - var(--safe-bottom)); }
  .chat-topbar { padding-top:0; padding-bottom:4px; }
  .chat-filter-summary { padding:6px 8px; margin-bottom:5px; }
  .chat-filter-chip { min-height:25px; }
  .chat-vehicle-carousel { width:100%; max-width:100%; padding-left:8px; padding-right:8px; }
  .chat-message.has-vehicle-cards .chat-bubble { max-width:88%; }
  .app-header { background:rgba(248,249,251,.94); }
  .bottom-nav { background:rgba(255,255,255,.94); }
}

@media (max-width:390px) {
  .chat-vehicle-carousel { width:100%; max-width:100%; }
  .chat-topbar h1 { font-size:19px; }
}


/* ==========================================================================
   v1.7.0 — scroll fixes, refined light surfaces and calculation details
   ========================================================================== */

/* Keep page scrolling deterministic after catalogue/filter interactions. */
html, body {
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:auto;
}
body.filter-open { overscroll-behavior-y:auto; }
.app, .page-root, .page, .catalog-page {
  width:100%;
  max-width:100%;
  min-width:0;
}
.page-root, .page, .catalog-page { touch-action:pan-y; }
.filter-scroll { touch-action:pan-y; }

/* Active catalogue filters wrap instead of creating another gesture surface. */
.active-filter-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  overflow:visible;
  margin:10px 0 0;
  padding:0;
  touch-action:pan-y;
}
.active-filter-chip {
  min-height:34px;
  box-shadow:0 4px 12px rgba(37,45,58,.04);
}

/* Refined home gradients: keep colour away from text and remove pink corner blobs. */
body {
  background:
    radial-gradient(760px 360px at 50% -12%, rgba(97,107,122,.055), transparent 62%),
    linear-gradient(180deg,#fafbfc 0%,#f5f7f9 52%,#f1f4f7 100%);
}
.app-header {
  background:linear-gradient(180deg,rgba(250,251,252,.985) 0%,rgba(250,251,252,.94) 72%,rgba(250,251,252,.78) 100%);
  box-shadow:0 8px 24px rgba(35,43,56,.035);
}
.hero {
  background:
    radial-gradient(460px 260px at 108% 112%, rgba(221,39,52,.105), transparent 64%),
    radial-gradient(320px 180px at -8% -18%, rgba(221,39,52,.035), transparent 70%),
    linear-gradient(145deg,#ffffff 0%,#fbfcfd 58%,#f7f9fb 100%);
  box-shadow:0 20px 54px rgba(35,43,56,.095), inset 0 1px 0 rgba(255,255,255,.98);
}
.hero-glow {
  width:190px;
  height:120px;
  right:-52px;
  top:auto;
  bottom:-58px;
  background:rgba(221,39,52,.10);
  filter:blur(42px);
}
.hero::before {
  width:245px;
  height:245px;
  right:-118px;
  bottom:-136px;
  border-color:rgba(221,39,52,.075);
  box-shadow:0 0 0 30px rgba(221,39,52,.018),0 0 0 62px rgba(35,43,56,.012);
}
.quick-card {
  background:
    radial-gradient(150px 100px at 108% 112%,rgba(221,39,52,.05),transparent 68%),
    #fff;
  box-shadow:0 14px 34px rgba(35,43,56,.095), inset 0 1px 0 rgba(255,255,255,.98);
  border-color:rgba(32,39,50,.075);
}
.quick-card::after { display:none; }
.quick-card:hover {
  background:
    radial-gradient(160px 110px at 108% 112%,rgba(221,39,52,.065),transparent 68%),
    #fff;
  box-shadow:0 18px 42px rgba(35,43,56,.12);
}
.vehicle-card {
  border-color:rgba(32,39,50,.075);
  box-shadow:0 13px 32px rgba(35,43,56,.105), inset 0 1px 0 rgba(255,255,255,.98);
}
.vehicle-card:hover { box-shadow:0 18px 42px rgba(35,43,56,.14); }
.catalog-search-box, .filter-sheet, .chat-filter-summary, .chat-composer,
.detail-metric, .spec-list, .calculation-card, .calc-result {
  box-shadow:0 12px 30px rgba(35,43,56,.08);
}

/* Make the three quick actions look intentional at every width. */
@media (min-width:620px) {
  .quick-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:619px) {
  .quick-grid .quick-card:last-child:nth-child(odd) { grid-column:1 / -1; min-height:94px; }
}

/* Consistent automotive-card photography. */
.vehicle-media, .chat-vehicle-photo { aspect-ratio:4 / 3; }
.vehicle-media img, .chat-vehicle-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.vehicle-media::after, .chat-vehicle-photo::after {
  inset:auto 0 0;
  height:34%;
  background:linear-gradient(transparent,rgba(8,10,13,.44));
}

/* Neutral focus treatment: no red square/ring around text-entry fields. */
.ai-search:focus-within,
.catalog-search-box:focus-within,
.chat-composer:focus-within {
  border-color:rgba(52,61,74,.18);
  box-shadow:0 0 0 3px rgba(52,61,74,.045),0 10px 27px rgba(35,43,56,.075);
}
.input:focus, .select:focus {
  border-color:rgba(52,61,74,.20);
  box-shadow:0 0 0 3px rgba(52,61,74,.045);
}
input, textarea, select { caret-color:#252b34; }

/* Icon geometry: every symbol sits on the optical centre of its cell. */
.quick-icon, .nav-icon, .detail-metric-icon, .calc-icon, .empty-icon,
.search-spark, .filter-open-icon {
  display:inline-grid;
  place-items:center;
  line-height:1;
  text-align:center;
}
.quick-card .quick-icon { display:grid; }
.detail-metric-icon {
  align-self:center;
  justify-self:center;
  padding:0;
}
.calc-icon {
  align-self:flex-start;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1;
  padding-bottom:1px;
}

/* Vehicle-year warning shown before calculation. */
.detail-manager-note {
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:11px;
  padding:11px 12px;
  border:1px solid rgba(184,129,35,.18);
  border-radius:14px;
  background:linear-gradient(145deg,#fffdf8,#fff 72%);
  box-shadow:0 7px 18px rgba(49,45,34,.045);
}
.detail-manager-note-icon {
  flex:0 0 25px;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#fff3d7;
  color:#9a6818;
  font-size:11px;
  font-weight:900;
  line-height:1;
}
.detail-manager-note p {
  margin:1px 0 0;
  color:#71654d;
  font-size:8.5px;
  line-height:1.45;
}

/* Calculation result: estimate first, details only on demand. */
.calculation-card {
  background:
    radial-gradient(270px 170px at 108% 108%,rgba(221,39,52,.075),transparent 68%),
    linear-gradient(145deg,#fff,#fafbfc 72%);
  border-color:rgba(221,39,52,.13);
}
.calc-icon {
  background:rgba(221,39,52,.075);
  border-color:rgba(221,39,52,.12);
  color:#c72834;
}
.final-total {
  background:linear-gradient(145deg,#fff8f8,#fff 62%);
  border-color:rgba(221,39,52,.15);
  padding:20px 16px 15px;
}
.final-total-glow {
  width:170px;
  height:110px;
  right:-60px;
  top:-55px;
  background:rgba(221,39,52,.09);
  filter:blur(34px);
}
.final-total small { color:#9e444b; }
.final-total > span { color:#777f8a; line-height:1.45; max-width:520px; }
.calc-details-toggle {
  position:relative;
  z-index:1;
  width:100%;
  min-height:39px;
  margin-top:13px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid rgba(32,39,50,.085);
  border-radius:12px;
  background:#f7f8fa;
  color:#343a43;
  font-size:8.5px;
  font-weight:800;
  text-align:left;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.calc-details-toggle:active { transform:scale(.992); }
.calc-details-toggle i {
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:8px;
  background:#fff;
  color:#7b828c;
  font-style:normal;
  font-size:13px;
  transition:transform .22s ease;
}
.calc-details-toggle.is-open i { transform:rotate(180deg); }
.calc-details {
  margin-top:10px;
  padding-top:12px;
  border-top:1px solid rgba(32,39,50,.075);
  animation:calcDetailsIn .25s cubic-bezier(.18,.84,.22,1) both;
}
@keyframes calcDetailsIn { from { opacity:0; transform:translateY(-4px); } }
.calc-details-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.calc-details-head strong { font-size:10px; color:#282d35; }
.calc-details-head span { margin:0; max-width:48%; text-align:right; color:#9298a1; font-size:7px; }
.calc-detail-group {
  overflow:hidden;
  margin-top:8px;
  border:1px solid rgba(32,39,50,.07);
  border-radius:13px;
  background:#fff;
}
.calc-detail-group-title {
  padding:8px 11px;
  border-bottom:1px solid rgba(32,39,50,.065);
  background:#f7f8fa;
  color:#8b929b;
  font-size:7px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.calc-detail-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:10px 11px;
  border-bottom:1px solid rgba(32,39,50,.06);
}
.calc-detail-row:last-child { border-bottom:0; }
.calc-detail-row.is-subtotal { background:#fffafb; }
.calc-detail-row.is-optional { background:#fffdf7; }
.calc-detail-copy { min-width:0; }
.calc-detail-copy strong { display:block; color:#373d46; font-size:8.5px; line-height:1.3; }
.calc-detail-copy small { display:block; margin-top:3px; color:#8a919a; font-size:7px; line-height:1.4; }
.calc-detail-row > span {
  margin:0;
  color:#262b33;
  font-size:9px;
  font-weight:850;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.calc-detail-footnote {
  margin:10px 2px 0;
  color:#8a919a;
  font-size:7px;
  line-height:1.48;
}

/* Prevent fixed layers from leaking a stale page-scroll state. */
body:not(.detail-open) { overflow-y:auto; }

@media (max-width:600px) {
  .vehicle-media, .chat-vehicle-photo { aspect-ratio:4 / 3; }
  .calc-details-head { align-items:flex-start; flex-direction:column; gap:3px; }
  .calc-details-head span { max-width:none; text-align:left; }
  .calc-detail-row { gap:8px; }
}


/* ==========================================================================
   v1.8.0 — calculation, gallery and mobile-chat refinements
   ========================================================================== */

/* Text-entry focus: remove the browser/Telegram red rectangular outline. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.ai-search input:focus-visible,
.catalog-search-box input:focus-visible,
.chat-composer textarea:focus-visible,
.input:focus-visible,
.select:focus-visible {
  outline:none !important;
  outline-offset:0 !important;
}
input, textarea, select { -webkit-tap-highlight-color:transparent; }
.ai-search input, .catalog-search-box input, .chat-composer textarea { box-shadow:none !important; }

/* The chat viewport owns vertical scrolling; the composer never scrolls away. */
body.chat-open { overflow:hidden !important; height:100dvh; }
body.chat-open .app { height:100dvh; min-height:100dvh; overflow:hidden; padding-bottom:0 !important; }
body.chat-open .page-root { height:calc(100dvh - 70px - var(--safe-top)); overflow:hidden; padding-bottom:0 !important; }
.chat-page {
  height:calc(100dvh - 70px - 72px - var(--safe-top) - var(--safe-bottom));
  max-height:calc(100dvh - 70px - 72px - var(--safe-top) - var(--safe-bottom));
  overflow:hidden;
}
.chat-log { overscroll-behavior-y:contain; touch-action:pan-y; }
.chat-composer-wrap {
  position:relative;
  bottom:auto;
  z-index:510;
  flex:0 0 auto;
  padding-bottom:max(2px,var(--safe-bottom));
  pointer-events:auto;
  isolation:isolate;
}

.chat-composer,
.chat-composer textarea,
.chat-composer button {
  pointer-events:auto;
}

.chat-composer textarea {
  position:relative;
  z-index:2;
}
.chat-gallery, .chat-vehicle-rail { touch-action:pan-x; }

/* Full vehicle-card photos: never crop the car. */
.vehicle-media, .chat-vehicle-photo {
  background:linear-gradient(145deg,#f3f5f7,#e9edf1);
  cursor:zoom-in;
}
.vehicle-media img, .chat-vehicle-photo img {
  object-fit:contain !important;
  object-position:center !important;
  background:#eef1f4;
}
.vehicle-media::after, .chat-vehicle-photo::after { display:none; }

/* Product detail must start at the physical screen edge, not a centred 900px column. */
#vehicleViewContent { width:100%; min-width:0; }
.detail-shell { width:100%; max-width:none !important; margin:0 !important; }
.vehicle-view { padding:0 !important; }
.detail-gallery img { cursor:zoom-in; object-fit:contain !important; background:#edf0f3; }

/* Calculation warning now belongs to the calculation card. */
.calculation-card .detail-manager-note { margin:2px 0 13px; box-shadow:none; }

/* Optical alignment for the calculation symbol. */
.calc-icon {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  line-height:1 !important;
  transform:none !important;
}

/* Stable chevron without a font glyph that can sit off-centre. */
.calc-details-toggle i {
  position:relative;
  flex:0 0 28px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
}
.calc-details-toggle i::before {
  content:"";
  width:7px;
  height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
  transform-origin:center;
  transition:transform .22s ease;
}
.calc-details-toggle.is-open i { transform:none; }
.calc-details-toggle.is-open i::before { transform:rotate(225deg) translate(-1px,-1px); }

.legal-calc-placeholder {
  margin-top:10px;
  padding:15px;
  border:1px solid rgba(32,39,50,.08);
  border-radius:16px;
  background:#fff;
  box-shadow:0 9px 24px rgba(35,43,56,.06);
}
.legal-calc-copy small { display:block; color:#a7444c; font-size:7.5px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.legal-calc-copy strong { display:block; margin-top:5px; color:#262b33; font-size:14px; }
.legal-calc-copy span { display:block; margin-top:5px; color:#7d848e; font-size:8.5px; line-height:1.5; }
.legal-request-button { width:100%; margin-top:12px; }

/* Fullscreen photo viewer. */
.photo-viewer {
  position:fixed;
  inset:0;
  z-index:4000;
  display:flex;
  flex-direction:column;
  background:rgba(12,14,18,.97);
  opacity:0;
  transition:opacity .18s ease;
  overscroll-behavior:none;
}
.photo-viewer.is-ready { opacity:1; }
.photo-viewer.is-closing { opacity:0; }
.photo-viewer-head {
  position:absolute;
  z-index:4;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:calc(12px + var(--safe-top)) 14px 12px;
  pointer-events:none;
}
.photo-viewer-close, .photo-viewer-count {
  pointer-events:auto;
  min-height:40px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(5,7,10,.68);
  color:#fff;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.photo-viewer-close { width:40px; font-size:24px; line-height:1; }
.photo-viewer-count { display:flex; align-items:center; padding:0 12px; font-size:10px; font-weight:780; }
.photo-viewer-rail {
  flex:1;
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pinch-zoom;
}
.photo-viewer-slide {
  flex:0 0 100%;
  width:100%;
  min-width:100%;
  height:100%;
  display:grid;
  place-items:center;
  scroll-snap-align:center;
  padding:calc(58px + var(--safe-top)) 0 calc(18px + var(--safe-bottom));
}
.photo-viewer-slide img {
  width:100%;
  height:100%;
  max-width:100vw;
  max-height:100%;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}

@media (max-width:600px) {
  .chat-composer-wrap { padding-left:0; padding-right:0; }
  .detail-body { padding-left:16px !important; padding-right:16px !important; }
  .photo-viewer-slide { padding-left:0; padding-right:0; }
}

body.photo-open { overflow:hidden !important; }

/* ========================================================================== 
   v1.9.0 — preview photography, price breakdown and visual alignment
   ========================================================================== */

/* Preview cards are dense again: the photo fills the whole media cell.
   Fullscreen viewing is available only from the vehicle detail page. */
.vehicle-media,
.chat-vehicle-photo {
  cursor:pointer !important;
  background:#edf0f3;
}
.vehicle-media img,
.chat-vehicle-photo img {
  width:100%;
  height:100%;
  object-fit:cover !important;
  object-position:center center !important;
  background:#edf0f3;
}
.vehicle-media::after,
.chat-vehicle-photo::after {
  display:block !important;
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:32%;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(14,18,24,.30));
}

/* Home navigation cards: a subtle premium red tint instead of flat white. */
.quick-card {
  background:
    radial-gradient(190px 120px at 100% 100%,rgba(239,48,62,.085),transparent 70%),
    linear-gradient(145deg,#ffffff 0%,#fbfbfc 62%,#fff6f7 100%) !important;
}
.quick-card:hover {
  background:
    radial-gradient(210px 130px at 100% 100%,rgba(239,48,62,.115),transparent 70%),
    linear-gradient(145deg,#ffffff 0%,#fbfbfc 58%,#fff3f5 100%) !important;
}

/* Metric icons use SVG geometry, so every pictogram is optically centred. */
.detail-metric-icon {
  display:grid !important;
  place-items:center !important;
  flex:0 0 42px;
  width:42px;
  height:42px;
  padding:0 !important;
  line-height:0 !important;
}
.detail-metric-icon svg {
  display:block;
  width:20px;
  height:20px;
  margin:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.quick-icon,
.nav-icon,
.calc-icon,
.empty-icon,
.search-spark,
.filter-open-icon {
  align-items:center !important;
  justify-items:center !important;
  line-height:1 !important;
}

/* Calculation breakdown is a compact numeric table, not explanatory prose. */
.calc-details {
  gap:10px;
}
.calc-details-head {
  padding:0 2px 2px;
  align-items:center;
}
.calc-details-head span {
  max-width:none;
  color:#9aa0a9;
  font-size:7.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.calc-detail-group {
  overflow:hidden;
  border:1px solid rgba(35,43,56,.085);
  border-radius:14px;
  background:#fff;
  box-shadow:0 7px 18px rgba(35,43,56,.045);
}
.calc-detail-group-title {
  margin:0;
  padding:9px 11px;
  border-bottom:1px solid rgba(35,43,56,.075);
  background:#f7f8fa;
  color:#777e88;
  font-size:7.5px;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.calc-detail-row {
  min-height:50px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:10px 11px;
  border-bottom:1px solid rgba(35,43,56,.07);
  background:#fff;
}
.calc-detail-row:last-child { border-bottom:0; }
.calc-detail-row.is-subtotal {
  background:linear-gradient(90deg,#fff8f8,#fff);
}
.calc-detail-row.is-optional {
  background:linear-gradient(90deg,#fffcf2,#fff);
}
.calc-detail-copy strong {
  display:block;
  color:#303640;
  font-size:8.6px;
  line-height:1.35;
}
.calc-detail-copy small {
  display:block;
  margin-top:4px;
  max-width:560px;
  color:#878e98;
  font-size:7.2px;
  line-height:1.45;
}
.calc-detail-row > span {
  color:#20252d;
  font-size:10px;
  font-weight:850;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.calc-detail-footnote { display:none !important; }

@media (max-width:600px) {
  .detail-metric-icon {
    flex-basis:40px;
    width:40px;
    height:40px;
  }
  .detail-metric-icon svg { width:19px; height:19px; }
  .calc-detail-row { gap:9px; padding:10px; }
  .calc-detail-copy strong { font-size:8.2px; }
  .calc-detail-copy small { font-size:6.9px; }
  .calc-detail-row > span { font-size:9.2px; }
}


/* ========================================================================== 
   v1.9.1 — detail viewport edge fix + guaranteed calculation table
   ========================================================================== */
/* Telegram WebView can reserve a few pixels on the right for its own layout
   viewport. Pin the detail layer to the dynamic viewport instead of inheriting
   any centred app width. */
#vehicleView.vehicle-view {
  left:0 !important;
  right:auto !important;
  width:100dvw !important;
  max-width:100dvw !important;
  min-width:100dvw !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
#vehicleViewContent,
#vehicleViewContent > .detail-shell {
  width:100dvw !important;
  max-width:100dvw !important;
  min-width:100dvw !important;
  margin:0 !important;
}
.detail-shell { box-sizing:border-box !important; }

/* The expanded calculation is a real data table. */
.calc-details[hidden] { display:none !important; }
.calc-details:not([hidden]) { display:block !important; }
.calc-detail-group { width:100%; }
.calc-detail-row { width:100%; }
.calc-detail-row > span { text-align:right; }
.calc-detail-row.is-subtotal .calc-detail-copy strong,
.calc-detail-row.is-subtotal > span { font-weight:900; }


/* Telegram Desktop chat input compatibility */
.chat-composer input#chatInput {
  flex:1;
  min-width:0;
  min-height:38px;
  height:38px;
  border:0;
  outline:0;
  background:transparent;
  padding:9px 7px;
  font-size:11px;
  line-height:1.4;
  color:inherit;
  caret-color:#252b34;
  pointer-events:auto;
  position:relative;
  z-index:2;
}
.chat-composer input#chatInput::placeholder {
  color:#9ca2ab;
}


/* ========================================================================== 
   v2.0.0 — Desktop layout, homepage navigation and optional brand logo.
   Mobile layouts <= 899px deliberately retain their current proportions.
   ========================================================================== */

/* Put shiklogo.png next to index.html. If it is absent, the existing ША
   mark remains visible as a fallback. The image never blocks UI loading. */
.brand-mark,
.boot-logo {
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.brand-logo-image {
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  border-radius:inherit;
  background:#fff;
}
/* The homepage now has two shortcuts. Prevent the legacy 3-card layout from
   forcing the last shortcut into a full-width row on small devices. */
.quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:600px) { .quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:620px) { .quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:619px) {
  .quick-grid .quick-card:last-child:nth-child(odd) { grid-column:auto; min-height:108px; }
}

/* Desktop is deliberately a spacious, centred workspace rather than a
   stretched 100%-width mobile view. Fixed elements line up with the content. */
@media (min-width:900px) {
  html, body { overflow-x:clip; }
  .app {
    box-sizing:border-box;
    width:calc(100% - 64px);
    max-width:1480px;
    margin-inline:auto;
    overflow:visible;
    min-height:100dvh;
    padding-bottom:110px;
  }
  .app-header {
    height:86px;
    padding:14px 28px;
    border-bottom:1px solid rgba(30,40,55,.06);
    border-radius:0 0 20px 20px;
  }
  .brand-lockup { gap:15px; }
  .brand-mark { width:49px; height:49px; border-radius:16px; font-size:17px; }
  .brand-name { font-size:21px; letter-spacing:-.04em; }
  .brand-caption { font-size:13px; margin-top:6px; }
  .round-button { width:47px; height:47px; border-radius:15px; font-size:21px; }
  .page-root { width:100%; max-width:100%; min-width:0; padding:22px 28px 80px; }
  .eyebrow { font-size:12px; }
  .hero {
    min-height:376px;
    padding:48px 54px 40px;
    border-radius:36px;
    border-color:rgba(37,45,56,.075);
  }
  .hero h1 {
    margin:19px 0 17px;
    max-width:840px;
    font-size:clamp(48px,4.8vw,72px);
    line-height:1.035;
    letter-spacing:-.062em;
  }
  .hero p { max-width:780px; font-size:17px; line-height:1.6; }
  .ai-search {
    width:min(880px,100%);
    min-height:68px;
    margin-top:30px;
    padding:8px 8px 8px 20px;
    border-radius:21px;
    gap:14px;
  }
  .search-spark { font-size:20px; }
  .ai-search input { font-size:16px; }
  .ai-search button { width:50px; height:50px; flex:0 0 50px; font-size:24px; border-radius:15px; }
  .quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:20px; }
  .quick-card { min-height:170px; padding:25px 27px; border-radius:28px; }
  .quick-card .quick-icon {
    width:48px; height:48px; margin-bottom:19px;
    border-radius:15px; font-size:23px; line-height:1;
  }
  .quick-card strong { font-size:21px; line-height:1.25; }
  .quick-card small { font-size:14px; line-height:1.45; margin-top:6px; }
  .section { margin-top:28px; }
  .section-head { margin-bottom:19px; }
  .section-head h2 { font-size:27px; line-height:1.2; }
  .section-head p { font-size:14px; }
  .text-button { font-size:14px; }
  .vehicle-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
  .vehicle-card { border-radius:27px; }
  .vehicle-copy { padding:19px 19px 21px; }
  .vehicle-title { font-size:19px; line-height:1.25; }
  .vehicle-trim { font-size:13px; line-height:1.45; margin-top:8px; }
  .spec-row { gap:8px; margin-top:16px; }
  .spec-chip { padding:8px 10px; font-size:12px; border-radius:10px; }
  .vehicle-media-label { font-size:11px; padding:8px 11px; }
  .recent-rail {
    margin-inline:0; padding:0 0 8px;
    grid-auto-columns:minmax(300px,calc((100% - 40px)/3)); gap:20px;
  }
  .catalog-title { padding:12px 0 23px; }
  .catalog-title h1 { font-size:42px; line-height:1.1; }
  .catalog-title p { font-size:16px; max-width:750px; }
  .catalog-search-box { height:65px; padding:0 15px 0 20px; border-radius:21px; gap:14px; }
  .catalog-search-box input { font-size:16px; }
  .catalog-search-box > span { font-size:24px; }
  .catalog-search-box button { width:37px; height:37px; font-size:20px; }
  .catalog-suggestions { top:71px; }
  .catalog-suggestion { padding:15px 16px; }
  .catalog-suggestion-main strong { font-size:15px; }
  .catalog-suggestion-main small { font-size:12px; }
  .catalog-suggestion-type { font-size:11px; }
  .active-filter-chip { min-height:39px; height:auto; padding:7px 12px; font-size:12px; }
  .catalog-toolbar { display:flex; grid-template-columns:none; gap:12px; margin-top:17px; }
  .filter-open-button, .catalog-run-button { min-height:56px; border-radius:16px; font-size:14px; }
  .filter-open-button { padding-inline:20px; }
  .catalog-run-button { min-width:270px; padding-inline:30px; }
  .catalog-empty-hint { min-height:280px; }
  .catalog-empty-hint strong { font-size:18px; }
  .catalog-empty-hint span { font-size:13px; }
  .result-toolbar strong { font-size:17px; }
  .result-toolbar span { font-size:12px; }
  .pagination { margin-top:25px; }
  .page-dot { font-size:13px; }
  .bottom-nav {
    width:min(780px,calc(100vw - 80px));
    height:76px;
    bottom:14px;
    padding:8px;
    border:1px solid rgba(37,45,56,.09);
    border-radius:24px;
    box-shadow:0 18px 50px rgba(29,38,51,.13);
    overflow:hidden;
  }
  .nav-item { border-radius:16px; font-size:11px; gap:6px; }
  .nav-icon { width:26px; height:26px; font-size:23px; }
  .nav-ai-icon { font-size:20px; }
  .nav-item.is-active::after { bottom:2px; }
  .toast-host { bottom:112px; }
  /* AI chat: comfortable message widths and a composer that stays aligned
     with the message column, rather than stretching across the screen. */
  body.chat-open .app { height:100dvh; min-height:100dvh; }
  body.chat-open .page-root { height:calc(100dvh - 86px); padding-bottom:0; }
  .chat-page {
    height:calc(100dvh - 86px - 101px - var(--safe-bottom));
    max-height:calc(100dvh - 86px - 101px - var(--safe-bottom));
    min-height:0;
    padding-top:6px;
  }
  .chat-topbar,
  .chat-filter-summary,
  .chat-log,
  .chat-composer-wrap {
    width:100%;
    max-width:1120px;
    min-width:0;
    margin-left:auto;
    margin-right:auto;
  }
  .chat-topbar { padding:8px 4px 17px; }
  .chat-topbar h1 { font-size:34px; }
  .ai-status { font-size:13px; }
  .ai-status i { width:9px; height:9px; }
  .chat-filter-summary { padding:15px 18px; border-radius:18px; margin-bottom:10px; }
  .chat-filter-summary-head span { font-size:13px; }
  .chat-filter-summary-head small { font-size:11px; }
  .chat-filter-chip { min-height:34px; padding-inline:12px; font-size:12px; }
  .chat-filter-empty { font-size:12px; }
  .chat-log {
    padding:14px 6px 22px;
    gap:17px;
    scroll-padding-bottom:24px;
  }
  .chat-message { max-width:min(78%,820px); }
  .chat-message.has-vehicle-cards { max-width:100%; width:100%; }
  .chat-message.has-vehicle-cards .chat-bubble { max-width:min(88%,700px); }
  .chat-bubble { font-size:15px; line-height:1.6; padding:16px 19px; border-radius:20px; }
  .chat-actions { margin-top:11px; gap:11px; }
  .chat-action-line { gap:9px; }
  .chat-action { min-height:42px; padding:11px 15px; font-size:12px; border-radius:12px; }
  .chat-gallery-wrap { width:min(540px,100%); }
  .chat-vehicle-carousel { width:100%; max-width:100%; padding:16px; border-radius:26px; }
  .chat-vehicle-card { flex-basis:min(42%,410px); border-radius:20px; }
  .chat-vehicle-card h3 { font-size:18px; }
  .chat-vehicle-card p { font-size:12px; }
  .chat-vehicle-card-kicker { font-size:10px; }
  .chat-vehicle-card-body { padding:16px; }
  .chat-vehicle-meta span { font-size:11px; padding:7px 9px; }
  .chat-vehicle-open { font-size:12px; }
  .chat-vehicle-page-button { font-size:12px; min-height:48px; }
  .chat-vehicle-swipe-hint { font-size:11px; }
  .chat-composer-wrap { padding-top:11px; padding-bottom:0; }
  .chat-composer { min-height:66px; border-radius:21px; padding:7px; gap:12px; }
  .chat-composer input, .chat-composer textarea { font-size:15px; min-height:48px; padding:12px 14px; }
  .chat-composer input#chatInput { flex:1 1 auto; width:100%; height:48px; font-size:15px; padding:12px 14px; }
  .send-button { width:49px; height:49px; flex-basis:49px; font-size:20px; }
  .composer-hint { font-size:11px; padding-top:7px; }
}

/* Compact laptops: preserve the desktop layout but don't squeeze text or
   clip the chat above the fixed navigation. */
@media (min-width:900px) and (max-width:1120px) {
  .app { width:calc(100% - 32px); }
  .page-root { padding-left:18px; padding-right:18px; }
  .hero { padding:40px; }
  .vehicle-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .chat-message { max-width:86%; }
  .chat-vehicle-card { flex-basis:min(46%,340px); }
}
@media (min-width:900px) and (max-height:680px) {
  .chat-topbar { padding-top:1px; padding-bottom:9px; }
  .chat-filter-summary { margin-bottom:6px; padding:10px 14px; }
  .chat-page { height:calc(100dvh - 86px - 93px); max-height:calc(100dvh - 86px - 93px); }
  .chat-log { padding-top:5px; padding-bottom:10px; }
}
/* Desktop-only controls are deliberately invisible on phones and tablets. */
.desktop-side-brand, .desktop-side-section, .desktop-side-footer, .desktop-header-copy,
.detail-desktop-gallery-controls, .photo-viewer-desktop-controls { display:none; }

/* ===========================================================================
   SHIKAUTO 2.1 — REAL DESKTOP LAYOUT
   Everything in this media query is scoped to >=900px. The mobile CSS
   above is unchanged; selectors here never touch smaller viewports.
   =========================================================================== */
@media (min-width:900px) {
  :root { --desktop-sidebar:250px; --desktop-topbar:82px; }
  html, body { overflow-x:hidden; }
  body {
    background:#f3f5f8;
    background-image:radial-gradient(750px 430px at 92% -160px,rgba(228,43,55,.07),transparent 70%);
  }
  html::-webkit-scrollbar, body::-webkit-scrollbar, .chat-log::-webkit-scrollbar,
  #vehicleView::-webkit-scrollbar, .filter-scroll::-webkit-scrollbar {
    width:8px; height:8px;
  }
  html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb,
  .chat-log::-webkit-scrollbar-thumb, #vehicleView::-webkit-scrollbar-thumb,
  .filter-scroll::-webkit-scrollbar-thumb { background:#d3d9e0; border-radius:20px; }

  /* Desktop shell and anchored content. */
  .app {
    width:100%; max-width:none; min-height:100dvh; height:auto;
    margin:0; padding:0 0 0 var(--desktop-sidebar) !important;
    overflow:visible;
  }
  .app-header {
    position:sticky; z-index:120; left:0; top:0;
    height:var(--desktop-topbar); width:100%; border-radius:0;
    padding:15px clamp(24px,3.1vw,56px);
    background:rgba(248,249,251,.95); backdrop-filter:blur(15px);
    border-bottom:1px solid #e4e7ec; box-shadow:0 3px 14px rgba(34,43,57,.025);
  }
  .app-header .brand-lockup {display:none;}
  .desktop-header-copy {display:flex; flex-direction:column; gap:5px; min-width:0;}
  .desktop-header-overline {color:#969eaa; font-size:10px; font-weight:800; letter-spacing:.14em;}
  #desktopHeaderTitle {font-size:24px; line-height:1.1; letter-spacing:-.036em; color:#1a2029; font-weight:830;}
  .round-button {width:44px; height:44px; border-radius:14px; flex:none; font-size:19px;}
  .page-root {
    box-sizing:border-box; width:100%; max-width:1510px; min-height:0;
    padding:32px clamp(24px,3.1vw,56px) 100px;
    margin:0 auto;
  }
  .page {min-width:0;}

  /* Persistent desktop navigation: no giant phone bottom bar. */
  .bottom-nav {
    position:fixed; z-index:510; inset:0 auto 0 0;
    display:flex; flex-direction:column; align-items:stretch;
    width:var(--desktop-sidebar); height:100dvh; padding:27px 17px 20px;
    margin:0; transform:none; border-radius:0;
    border:0; border-right:1px solid #e5e8ee;
    background:#fff; box-shadow:8px 0 32px rgba(29,39,54,.025);
    backdrop-filter:none; overflow-y:auto;
  }
  .desktop-side-brand {display:flex; gap:12px; align-items:center; padding:0 4px 30px; margin-bottom:27px; border-bottom:1px solid #edf0f3;}
  .desktop-side-brand-mark {
    position:relative; display:grid; place-items:center; flex:0 0 46px;
    width:46px; height:46px; border-radius:14px; overflow:hidden;
    font-size:16px; font-weight:900; color:#fff;
    background:linear-gradient(135deg,#fa4150,#c51225);
  }
  .desktop-side-brand-mark img {position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff;}
  .desktop-side-brand strong {display:block; font-size:17px; letter-spacing:-.04em; color:#191f29;}
  .desktop-side-brand small {display:block; margin-top:4px; font-size:10px; color:#858e9c; white-space:nowrap;}
  .desktop-side-section {display:block; padding:0 14px 12px; font-size:10px; letter-spacing:.14em; font-weight:800; color:#a3aab5;}
  .bottom-nav .nav-item {
    flex:0 0 auto; width:100%; min-height:54px; margin:1px 0;
    display:flex; flex-direction:row; align-items:center; justify-content:flex-start;
    gap:14px; padding:0 15px; border-radius:15px;
    font-size:14px; font-weight:730; color:#6f7885; text-align:left;
    transition:color .18s ease,background .18s ease;
  }
  .bottom-nav .nav-item:hover {background:#f5f6f8;color:#26303c;}
  .bottom-nav .nav-item.is-active {background:#fff0f2;color:#d82538;}
  .bottom-nav .nav-item.is-active::after {
    content:""; position:absolute; left:0; top:11px; bottom:11px;
    width:3px; height:auto; transform:none; background:#ef3346; border-radius:5px;
  }
  .bottom-nav .nav-icon {width:24px; height:24px; flex:0 0 24px; font-size:23px; color:inherit;}
  .bottom-nav .nav-ai-icon {font-size:19px;}
  .bottom-nav .nav-item.is-active .nav-icon {color:inherit; transform:none;}
  .desktop-side-footer {
    margin-top:auto; padding:16px 12px 0; border-top:1px solid #edf0f3;
    display:flex; align-items:center; gap:9px; color:#9ca4b0;
    font-size:11px; line-height:1.4;
  }
  .desktop-side-pulse {width:8px; height:8px; flex:0 0 8px; background:#34c68e; border-radius:50%;}
  .toast-host {bottom:26px; left:calc(var(--desktop-sidebar) + (100vw - var(--desktop-sidebar))/2);}

  /* Homepage — full editorial proportions and EXACTLY two shortcuts. */
  .hero {padding:48px 50px 38px; min-height:320px; border-radius:32px; background:
    radial-gradient(520px 250px at 95% 100%,rgba(228,43,55,.07),transparent 75%),
    linear-gradient(138deg,#fff 0%,#f8f9fb 75%);
    border:1px solid #e8ebf0; box-shadow:0 16px 40px rgba(26,37,52,.045);
  }
  .hero h1 {font-size:clamp(45px,3.8vw,66px); max-width:850px; line-height:1.04; margin:15px 0 15px;}
  .hero h1 span {color:#777f8b;}
  .hero p {font-size:16px; line-height:1.5; max-width:780px;}
  .eyebrow {font-size:11px; letter-spacing:.14em;}
  .ai-search {max-width:820px; min-height:64px; margin-top:27px; padding:7px 7px 7px 19px; gap:12px; border-radius:20px;}
  .ai-search input {font-size:15px; min-height:48px;}
  .search-spark {font-size:17px;}
  .ai-search button {width:49px; height:49px; border-radius:15px; font-size:22px;}
  .quick-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:21px;}
  .quick-card {min-height:152px; padding:23px 27px; border-radius:25px; box-shadow:0 9px 24px rgba(25,38,51,.06);}
  .quick-card .quick-icon {width:43px;height:43px;border-radius:14px;margin-bottom:15px;font-size:22px;}
  .quick-card strong {font-size:20px;}
  .quick-card small {font-size:13px; margin-top:6px;}
  .section {margin-top:40px;}
  .section-head {margin-bottom:17px;}
  .section-head h2 {font-size:25px;}
  .section-head p {font-size:13px;}
  .text-button {font-size:13px;}
  .vehicle-grid {grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;}
  .vehicle-card {border-radius:21px; overflow:hidden; transition:transform .22s ease,box-shadow .22s ease;}
  .vehicle-card:hover {transform:translateY(-3px); box-shadow:0 19px 36px rgba(34,44,60,.10);}
  .vehicle-media {aspect-ratio:16/10.3;}
  .vehicle-copy {padding:19px 19px 21px;}
  .vehicle-title {font-size:18px; line-height:1.3;}
  .vehicle-trim {font-size:13px;}
  .spec-row {gap:7px; margin-top:13px;}
  .spec-chip {font-size:12px; padding:7px 10px;}
  .recent-rail {grid-auto-columns:calc((100% - 40px)/3); gap:20px; margin:0; padding:0 0 10px;}
  .catalog-title h1 {font-size:39px;}
  .catalog-title p {font-size:15px;}
  .catalog-search-box {height:62px;border-radius:18px;}
  .catalog-search-box input {font-size:15px;}
  .catalog-toolbar {gap:14px;}
  .filter-open-button,.catalog-run-button {min-height:52px; font-size:14px; border-radius:15px;}
  .result-toolbar strong {font-size:17px;}
  .active-filter-chip {font-size:12px; padding:8px 12px;}
  .catalog-empty-hint {min-height:230px;}
  .filter-sheet {width:min(1080px,calc(100vw - var(--desktop-sidebar) - 66px)); left:calc(var(--desktop-sidebar) + (100vw - var(--desktop-sidebar))/2);}
  .sheet-head h2 {font-size:27px;}
  .filter-section h3 {font-size:15px;}
  .choice-chip {font-size:12px; padding-inline:12px; min-height:38px;}
  .choice-chip small {font-size:10px;}
  .input,.select {font-size:14px; height:49px;}
  .fuel-button {font-size:12px; min-height:44px;}
  .filter-scroll {padding:12px 24px 26px;}
  .sheet-actions {padding:15px 24px;}
  .primary-button,.secondary-button {min-height:50px;font-size:13px;}

  /* AI chat — a contained desktop app, not mobile bubbles spread across 2K. */
  body.chat-open {overflow:hidden;}
  body.chat-open .app {min-height:100dvh; height:100dvh; overflow:hidden;}
  body.chat-open .page-root {height:calc(100dvh - var(--desktop-topbar)); overflow:hidden; padding-top:20px; padding-bottom:20px;}
  .chat-page {
    width:100%; max-width:1160px; height:100%; max-height:100%; min-height:0;
    display:flex; flex-direction:column; overflow:hidden;
    margin:0 auto; padding:20px 24px 14px;
    border:1px solid #e5e9ee; border-radius:25px;
    background:#fff; box-shadow:0 14px 38px rgba(28,38,54,.045);
  }
  .chat-topbar,.chat-filter-summary,.chat-log,.chat-composer-wrap {width:100%; max-width:100%; margin:0; min-width:0;}
  .chat-topbar {flex:0 0 auto; padding:0 2px 14px;}
  .chat-topbar h1 {font-size:27px; line-height:1.2;}
  .ai-status {font-size:12px; color:#7c8995;}
  .ai-status i {width:8px;height:8px;}
  .chat-filter-summary {flex:0 0 auto; padding:13px 16px; margin-bottom:8px; border-radius:14px; box-shadow:none; background:#fafbfc;}
  .chat-filter-summary-head {margin-bottom:7px;}
  .chat-filter-summary-head span {font-size:12px;}
  .chat-filter-summary-head small {font-size:11px;}
  .chat-filter-chips {gap:7px;}
  .chat-filter-chip {min-height:30px;font-size:11px; padding-inline:11px;}
  .chat-filter-empty {font-size:12px;}
  .chat-log {
    width:100%; min-height:0; flex:1 1 auto; overflow-y:auto; overflow-x:hidden;
    padding:18px 9px 25px; gap:18px;
    overscroll-behavior-y:contain; scroll-behavior:auto;
    scrollbar-width:thin; scrollbar-color:#d6dbe3 transparent;
  }
  .chat-message {max-width:min(78%,740px);}
  .chat-message.user {max-width:min(68%,660px);}
  .chat-message.has-vehicle-cards {width:100%;max-width:100%;}
  .chat-message.has-vehicle-cards .chat-bubble {max-width:720px;}
  .chat-bubble {font-size:15px;line-height:1.65;padding:16px 19px;border-radius:19px;}
  .chat-actions {gap:11px;margin-top:11px;}
  .chat-action-line {gap:8px;}
  .chat-action {min-height:39px;padding:10px 14px;font-size:12px;font-weight:700;border-radius:11px;}
  .chat-vehicle-carousel {width:100%;padding:15px;border-radius:21px;}
  .chat-vehicle-card {flex:0 0 min(43%,365px);border-radius:17px;}
  .chat-vehicle-card h3 {font-size:17px;}
  .chat-vehicle-card p {font-size:12px;}
  .chat-vehicle-card-body {padding:16px;}
  .chat-vehicle-card-kicker {font-size:11px;}
  .chat-vehicle-meta span {font-size:11px; padding:7px 9px;}
  .chat-vehicle-open {font-size:13px;}
  .chat-vehicle-page-button {font-size:12px; min-height:44px;}
  .chat-vehicle-swipe-hint {font-size:11px;}
  .chat-gallery-wrap {max-width:520px;}
  .chat-composer-wrap {flex:0 0 auto; padding:12px 0 0;background:#fff;}
  .chat-composer {width:100%; min-height:62px; border-radius:18px; padding:6px; gap:10px; box-shadow:0 4px 16px rgba(28,40,56,.06);}
  #chatInput.chat-input, .chat-composer input#chatInput {flex:1 1 auto; width:100%; height:46px; min-height:46px; font-size:15px; padding:10px 13px;}
  .send-button {width:47px;height:47px;flex:0 0 47px; font-size:21px;border-radius:13px;}
  .composer-hint {font-size:11px;padding-top:8px;}
  body.chat-open .page-root::after {display:none;}

  /* Vehicle detail — true two-column workspace with a sticky image gallery. */
  #vehicleView.vehicle-view {
    position:fixed; inset:0; display:block; overflow:auto;
    padding:28px 28px 32px !important;
    background:rgba(30,37,49,.58);
    backdrop-filter:blur(9px);
    scroll-behavior:auto;
  }
  #vehicleViewContent {width:100%;height:auto;max-width:1320px;margin:0 auto; overflow:visible;}
  #vehicleViewContent > .detail-shell,
  .detail-shell {
    width:100% !important;max-width:1320px !important;
    margin:0 auto !important; padding:0 0 0 !important;
    min-height:calc(100dvh - 56px); height:auto;
    display:grid; grid-template-columns:minmax(380px,46%) minmax(0,1fr);
    align-items:stretch; overflow:visible;
    border:1px solid rgba(255,255,255,.28); border-radius:26px;
    background:#fff; box-shadow:0 35px 100px rgba(21,29,40,.24);
  }
  .detail-hero {
    position:sticky; top:0; align-self:start; height:calc(100dvh - 56px);
    min-height:520px; overflow:hidden;
    border-radius:25px 0 0 25px; background:#edf0f3;
  }
  .detail-gallery {width:100%;height:100%;background:#edf0f3;}
  .detail-gallery img,.detail-gallery .media-placeholder {
    width:100%;height:100%;max-height:none;aspect-ratio:auto;
    flex:0 0 100%;object-fit:contain !important;
    background:#e9edf2;
  }
  .detail-hero-shade {height:20%;}
  .detail-toolbar {top:0;left:0;right:0;padding:20px;}
  .detail-toolbar button {width:49px;height:49px;font-size:24px;border-radius:15px;}
  .detail-status {bottom:22px;left:22px;font-size:12px;min-height:34px;padding:0 12px;}
  .gallery-count {right:22px;bottom:23px;font-size:12px;padding:8px 12px;}
  .gallery-progress {bottom:35px;}
  .detail-desktop-gallery-controls {
    position:absolute;z-index:14;left:18px;right:18px;top:50%;
    display:flex;justify-content:space-between; transform:translateY(-50%);
    pointer-events:none;
  }
  .detail-desktop-gallery-controls button {
    pointer-events:auto;display:grid;place-items:center;
    width:44px;height:44px;border:1px solid rgba(255,255,255,.4);
    border-radius:50%; background:rgba(18,24,31,.68);
    color:white;font-size:32px;line-height:1;
    box-shadow:0 8px 20px rgba(18,24,31,.15);
    transition:background .16s ease,transform .16s ease;
  }
  .detail-desktop-gallery-controls button:hover {background:#ea3345;transform:scale(1.035);}
  .detail-body {
    margin-top:0; padding:38px 36px 46px; min-width:0;
    border-radius:0 25px 25px 0;
    background:#fff;box-shadow:none;
  }
  .detail-kicker {font-size:11px;}
  .detail-title {font-size:clamp(31px,2.75vw,43px);line-height:1.06;}
  .detail-sub {font-size:15px;line-height:1.5;margin-top:11px;}
  .detail-description {font-size:12px;line-height:1.5;}
  .detail-metrics {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px;}
  .detail-metric {min-height:87px;padding:14px;border-radius:17px;gap:12px;}
  .detail-metric-icon {width:43px;height:43px;flex:0 0 43px;}
  .detail-metric-icon svg {width:24px;height:24px;}
  .detail-metric small {font-size:12px;}
  .detail-metric strong {font-size:15px;margin-top:6px;white-space:normal;overflow:visible;}
  .detail-section {margin-top:31px;}
  .detail-section h3,.calculation-heading h3 {font-size:22px;}
  .detail-section-head span,.detail-section-label {font-size:10px;}
  .spec-list {border-radius:19px;}
  .spec-item {min-height:45px;padding:11px 15px;}
  .spec-item span {font-size:13px;}
  .calculation-card {padding:22px; border-radius:21px;}
  .calculation-heading p {font-size:12px;max-width:none;line-height:1.6;}
  .calc-icon {width:46px;height:46px;flex:0 0 46px;font-size:21px;}
  .calc-modes {grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
  .calc-mode {min-height:89px;border-radius:14px;padding:12px 10px;}
  .calc-mode strong {font-size:13px;}
  .calc-mode span {font-size:11px;}
  .calc-result {border-radius:19px;}
  .final-total {padding:22px;}
  .final-total strong {font-size:45px;}
  .final-total small {font-size:12px;}
  .final-total span {font-size:11px;line-height:1.5;}
  .detail-manager-note p {font-size:12px;line-height:1.6;}
  .detail-manager-note-icon {flex:0 0 36px;width:36px;height:36px;}
  .calc-details-row,.calc-breakdown-row {font-size:13px;}
  #calcOutput {min-height:55px;}

  /* Fullscreen zoom — keyboard / mouse controls and image containment. */
  .photo-viewer-head {top:0;left:0;right:0; padding:23px 32px;}
  .photo-viewer-count {min-height:42px;font-size:13px;padding-inline:16px;}
  .photo-viewer-close {width:44px;min-height:44px;font-size:28px;}
  .photo-viewer-slide {padding:70px 105px 36px;}
  .photo-viewer-slide img {max-width:calc(100vw - 220px);max-height:calc(100dvh - 110px); object-fit:contain;}
  .photo-viewer-desktop-controls {
    display:flex;position:absolute; z-index:6; inset:0 24px;
    justify-content:space-between; align-items:center;
    pointer-events:none;
  }
  .photo-viewer-desktop-controls button {
    pointer-events:auto;width:54px;height:54px;border:1px solid rgba(255,255,255,.2);
    border-radius:50%;background:rgba(255,255,255,.13);color:#fff;
    font-size:37px;box-shadow:0 12px 25px rgba(0,0,0,.15);
    transition:background .18s ease;
  }
  .photo-viewer-desktop-controls button:hover {background:#e93144;}
  .photo-viewer-rail {scrollbar-width:none;}
  .photo-viewer-rail::-webkit-scrollbar {display:none;}
}

/* Notebook/laptop: the sidebar remains compact while content remains readable. */
@media (min-width:900px) and (max-width:1199px) {
  :root {--desktop-sidebar:218px;--desktop-topbar:74px;}
  .bottom-nav {padding:22px 11px 16px;}
  .desktop-side-brand {gap:9px;padding-bottom:21px;}
  .desktop-side-brand-mark {width:41px;height:41px;flex-basis:41px;}
  .desktop-side-brand strong {font-size:15px;}
  .desktop-side-brand small {font-size:9px;}
  .page-root {padding:24px 23px 80px;}
  .app-header {padding-inline:23px;}
  .hero {padding:33px;}
  .hero h1 {font-size:46px;}
  .vehicle-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .chat-page {padding:16px 19px 12px;}
  .chat-message {max-width:85%;}
  .chat-vehicle-card {flex-basis: min(55%,350px);}
  #vehicleView.vehicle-view {padding:16px 18px 22px !important;}
  #vehicleViewContent>.detail-shell,.detail-shell {grid-template-columns:minmax(310px,43%) minmax(0,1fr);min-height:calc(100dvh - 32px);}
  .detail-hero {height:calc(100dvh - 32px); min-height:480px;}
  .detail-body {padding:27px 24px 34px;}
  .detail-metric {gap:7px;padding:10px;}
  .detail-metric strong {font-size:13px;}
  .calc-modes {grid-template-columns:1fr;}
  .calc-mode {min-height:62px;}
}
@media (min-width:900px) and (max-height:660px) {
  .chat-page {padding-top:10px;padding-bottom:8px;}
  .chat-topbar {padding-bottom:8px;}
  .chat-filter-summary {padding:8px 12px;margin-bottom:4px;}
  .chat-log {padding-top:7px;padding-bottom:10px;}
  .chat-composer-wrap {padding-top:6px;}
}

/* Override the legacy full-viewport !important rules that used to stretch
   vehicle details across desktop screens. These are DESKTOP ONLY. */
@media (min-width:900px) {
  #vehicleViewContent {
    width:100% !important;
    min-width:0 !important;
    max-width:1320px !important;
    margin:0 auto !important;
  }
  #vehicleViewContent > .detail-shell {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 auto !important;
  }
}


/* =======================================================================
   DESKTOP v2.2 refinements — ONLY >= 900px, mobile rules are unchanged.
   ======================================================================= */
@media (min-width:900px) {
  /* Each page already has its own header. Keep the refresh button reachable
     without wasting an entire duplicate desktop title bar. */
  .app-header {
    position:fixed !important;
    top:19px !important;
    right:clamp(24px,3.1vw,56px) !important;
    left:auto !important;
    width:auto !important;
    height:auto !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    z-index:480;
  }
  .desktop-header-copy {display:none !important;}
  .app-header .round-button {width:42px;height:42px;border-radius:13px;}
  .page-root {
    max-width:none !important;
    width:100% !important;
    padding:32px clamp(24px,3.1vw,56px) 95px !important;
  }

  /* Brand uses only shiklogo.png: no red plate, glow or outline. */
  .desktop-side-brand-mark {
    background:transparent !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    border-radius:12px;
  }
  .desktop-side-brand-mark img {
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    object-fit:contain !important;
  }

  /* Chat occupies the entire working column to the right of sidebar.
     Message bubbles remain readable while carousels can use the width. */
  body.chat-open .page-root {
    height:100dvh !important;
    padding:15px clamp(16px,2vw,32px) 15px !important;
  }
  .chat-page {
    max-width:none !important;
    width:100% !important;
    margin:0 !important;
    border-radius:20px;
    padding:22px clamp(18px,2.2vw,38px) 15px;
  }
  .chat-log {padding:18px 8px 20px;}
  .chat-message {max-width:min(78%,900px);}
  .chat-message.user {max-width:min(72%,740px);}
  .chat-message.has-vehicle-cards {max-width:100%;width:100%;}
  .chat-message.has-vehicle-cards .chat-bubble {max-width:min(85%,780px);}
  .chat-vehicle-card {flex-basis:clamp(300px,33%,440px);}
  .chat-composer-wrap {padding-top:12px;}

  /* Explicitly override compact mobile calculation rules, which otherwise
     inherit font-scaling from nested strong tags in the vehicle detail. */
  #vehicleView .calc-details {width:100%;min-width:0;margin-top:12px;}
  #vehicleView .calc-details-head {display:flex;align-items:center;gap:12px;margin:0 0 12px;}
  #vehicleView .calc-details-head strong {
    font-size:17px !important;line-height:1.3 !important;letter-spacing:-.015em;
  }
  #vehicleView .calc-details-head span {font-size:11px !important;}
  #vehicleView .calc-detail-group {max-width:100%;margin-top:12px;border-radius:14px;overflow:hidden;}
  #vehicleView .calc-detail-group-title {font-size:11px !important;line-height:1.4 !important;letter-spacing:.08em;padding:12px 16px;}
  #vehicleView .calc-detail-row {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) max-content !important;
    align-items:center !important;
    gap:18px !important;
    min-height:62px !important;
    padding:13px 17px !important;
  }
  #vehicleView .calc-detail-copy {min-width:0;max-width:100%;}
  #vehicleView .calc-detail-copy strong {
    display:block !important;
    font-size:14px !important;
    font-weight:750 !important;
    line-height:1.4 !important;
    letter-spacing:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
  }
  #vehicleView .calc-detail-copy small {
    display:block !important;
    font-size:11px !important;
    font-weight:450 !important;
    line-height:1.5 !important;
    margin-top:4px;
  }
  #vehicleView .calc-detail-row > span {
    font-size:15px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    line-height:1.35 !important;
    font-variant-numeric:tabular-nums;
  }
}
@media (min-width:900px) and (max-width:1199px) {
  body.chat-open .page-root {padding:12px 16px !important;}
  .chat-page {padding:18px 18px 13px;}
  .chat-message {max-width:88%;}
  .chat-vehicle-card {flex-basis:min(52%,365px);}
  #vehicleView .calc-detail-copy strong {font-size:13px !important;}
  #vehicleView .calc-detail-row > span {font-size:14px !important;}
}

/* Desktop chat action lives inside its header; mobile stays unchanged. */
.desktop-chat-controls {display:contents;}
.chat-reset-desktop {display:none;}
@media (min-width:900px) {
  body.chat-open .app-header {display:none !important;}
  .desktop-chat-controls {display:flex;align-items:center;gap:16px;}
  .desktop-chat-controls .ai-status {padding:0;white-space:nowrap;}
  .chat-reset-desktop {
    display:grid;place-items:center;width:39px;height:39px;flex:0 0 39px;
    border:1px solid #e8eaf0;border-radius:12px;
    background:#f8f9fb;color:#747d89;font-size:25px;cursor:pointer;
    transition:background .18s ease,color .18s ease,transform .18s ease;
  }
  .chat-reset-desktop:hover {background:#fff1f3;color:#d62939;transform:rotate(-18deg);}
}


/* =======================================================================
   v2.3 mobile polish — ONLY < 900px. Desktop layout stays unchanged.
   ======================================================================= */
@media (max-width:899px) {
  /* Logo should blend into the light header without a white plate. */
  .brand-mark {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  .brand-logo-image {
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Hide the legacy top-right action button on mobile pages. */
  .app-header .round-button {
    display: none !important;
  }

  /* Give the chat more usable height and width. */
  body.chat-open .page-root {
    height: calc(100dvh - 70px - var(--safe-top)) !important;
    padding: 0 10px 0 !important;
  }
  .chat-page {
    height: calc(100dvh - 70px - 68px - var(--safe-top) - var(--safe-bottom)) !important;
    max-height: calc(100dvh - 70px - 68px - var(--safe-top) - var(--safe-bottom)) !important;
    padding-top: 2px !important;
  }
  .chat-topbar { padding: 2px 2px 8px !important; }
  .chat-topbar h1 { font-size: 22px !important; }
  .chat-filter-summary { margin-bottom: 7px !important; padding: 9px 10px !important; }
  .chat-log { padding: 10px 2px 12px !important; gap: 12px !important; }
  .chat-message { max-width: 92% !important; }
  .chat-message.user { max-width: 84% !important; }
  .chat-composer-wrap {
    padding-top: 6px !important;
    padding-bottom: max(2px, var(--safe-bottom)) !important;
  }
  .chat-composer {
    min-height: 50px !important;
    border-radius: 16px !important;
    padding: 4px !important;
    gap: 6px !important;
  }
  .chat-composer input#chatInput,
  .chat-composer textarea {
    min-height: 34px !important;
    height: 34px !important;
    padding: 7px 9px !important;
    font-size: 13px !important;
  }
  .send-button {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 12px !important;
  }
  .composer-hint {
    display: none !important;
  }

  /* Bottom navigation: better icon centring and cleaner spacing. */
  .bottom-nav {
    height: calc(70px + var(--safe-bottom)) !important;
    padding: 6px 8px calc(4px + var(--safe-bottom)) !important;
  }
  .nav-item {
    justify-content: center !important;
    gap: 4px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
  .nav-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }
  .nav-ai-icon { font-size: 14px !important; }
  .nav-item span:last-child { line-height: 1.1 !important; }

  /* Vehicle detail photo controls: centre icons inside the buttons. */
  .detail-toolbar button,
  .favorite-button,
  .photo-viewer-close,
  .round-button {
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
  .detail-toolbar button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    font-size: 21px !important;
  }

  /* Make the mobile detail viewer breathe a bit more. */
  .detail-body {
    margin-top: -14px !important;
    border-radius: 24px 24px 0 0 !important;
  }
}


/* ====================================================================
   ShikAuto v2.4 — clean header actions, compact AI composer, SVG alignment
   ==================================================================== */
/* Shared geometric icon alignment: no unicode baselines. */
.nav-icon,
.bottom-nav .nav-icon {
  display: grid !important;
  place-items: center !important;
  line-height: 0 !important;
  padding: 0 !important;
}
.nav-icon svg {
  display: block;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  overflow: visible;
}
.nav-ai-icon svg { width: 20px; height: 20px; }
.detail-toolbar button,
.detail-desktop-gallery-controls button,
.photo-viewer-close,
.photo-viewer-desktop-controls button,
.favorite-button,
.chat-reset-desktop,
#headerAction {
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  padding: 0 !important;
}
.ui-control-icon {
  display: block;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  margin: 0 auto;
}
.detail-desktop-gallery-controls .ui-control-icon,
.photo-viewer-desktop-controls .ui-control-icon { width: 24px; height: 24px; }
.favorite-button .ui-control-icon { width: 20px; height: 20px; }
.chat-reset-desktop .ui-control-icon { width: 19px; height: 19px; }

@media (min-width:900px) {
  /* Desktop already has a left navigation. The shared top-right button
     was a redundant floating action on Home, Catalog and Favorites. */
  .app-header { display: none !important; }
  body.chat-open .desktop-chat-controls { display: flex; }
  body.chat-open .chat-reset-desktop { display: grid !important; }

  /* Reduce the oversized desktop input bar without losing its fixed position. */
  .chat-composer-wrap { padding-top: 7px !important; padding-bottom: 0 !important; }
  .chat-composer {
    min-height: 52px !important;
    height: 52px !important;
    padding: 5px !important;
    gap: 8px !important;
    border-radius: 15px !important;
  }
  #chatInput.chat-input,
  .chat-composer input#chatInput {
    height: 39px !important;
    min-height: 39px !important;
    padding: 7px 12px !important;
    font-size: 14px !important;
  }
  .chat-composer .send-button {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 11px !important;
    font-size: 18px !important;
  }
  .composer-hint { display: none !important; }
}

@media (max-width:899px) {
  /* Keep the refresh/reset only on the AI page. */
  .app-header #headerAction { display: none !important; }
  body.chat-open .app-header #headerAction:not([hidden]) {
    display: grid !important;
    place-items: center !important;
  }
  .nav-icon svg { width: 20px; height: 20px; flex-basis: 20px; }
  .nav-ai-icon svg { width: 19px; height: 19px; }
  .detail-toolbar .ui-control-icon { width: 22px; height: 22px; }
  .favorite-button .ui-control-icon { width: 19px; height: 19px; }
}
/* ========================================================================
   ShikAuto v2.5 — guided catalogue. All existing desktop/chat/detail rules kept.
   Responsive: 3 step selectors on desktop; compact native filter sheet on phones.
   ======================================================================== */
.catalog-picker-desktop {display:none;}
.mobile-catalog-picker {display:block; margin-bottom:18px;}
.mobile-catalog-pick,
.mobile-catalog-run {width:100%; min-height:52px; border-radius:16px; font-size:13px; font-weight:780;}
.mobile-catalog-pick {display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 17px; background:#fff; border:1px solid #e2e6ea; color:#262d37; box-shadow:0 5px 17px rgba(34,47,63,.055);}
.mobile-catalog-pick span {color:#ac4450; font-size:12px; font-weight:750;}
.mobile-catalog-run {display:flex; align-items:center; justify-content:center; gap:12px; border:0; margin-top:12px; color:#fff; background:linear-gradient(130deg,#fc3949,#da2336); box-shadow:0 10px 23px rgba(220,36,52,.19);}
.mobile-catalog-run:disabled {opacity:.52;}
.mobile-catalog-run b {padding:5px 9px; border-radius:8px; background:rgba(0,0,0,.15); font-size:11px; font-variant-numeric:tabular-nums;}
.mobile-catalog-picker .active-filter-row {margin:10px 0 4px; padding:0; flex-wrap:wrap; overflow:visible;}
.catalog-results-right {display:flex; align-items:center; justify-content:flex-end; gap:18px; flex-wrap:wrap;}
.catalog-sort-label {display:none;}

@media(min-width:900px) {
  .mobile-catalog-picker {display:none;}
  .catalog-picker-desktop {
    position:relative; isolation:isolate; z-index:35; display:block;
    padding:24px 26px 20px; margin:8px 0 31px;
    border-radius:24px; border:1px solid #e6e9ef;
    background:linear-gradient(155deg,#fff 0%,#fff 70%,#fffafb 100%);
    box-shadow:0 13px 32px rgba(26,37,52,.06);
  }
  .catalog-hierarchy {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
  .catalog-choice {position:relative; min-width:0;}
  .catalog-choice-label {display:block; margin-bottom:9px; font-size:12px; line-height:1.2; font-weight:780; color:#414b58;}
  .catalog-choice-trigger {
    width:100%; min-width:0; height:60px; display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:0 16px; border-radius:15px; border:1px solid #dfe4ea; background:#f8f9fb;
    color:#262f3a; text-align:left; font-size:14px; font-weight:700;
    transition:border-color .17s ease, background .17s ease, box-shadow .17s ease;
  }
  .catalog-choice-trigger span {min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
  .catalog-choice-trigger svg {flex:0 0 17px; color:#939aa5; transition:transform .2s ease;}
  .catalog-choice-trigger:hover:not(:disabled),.catalog-choice-trigger.is-open {border-color:#ed9fa7;background:#fff; box-shadow:0 0 0 3px rgba(229,47,63,.065);}
  .catalog-choice-trigger.is-open svg {transform:rotate(180deg);}
  .catalog-choice.is-disabled .catalog-choice-trigger {color:#abb0b7;background:#f5f6f7; cursor:not-allowed; opacity:.77;}
  .catalog-choice.is-disabled .catalog-choice-label {color:#a8adb5;}
  .catalog-choice:last-child .catalog-choice-menu {right:0; left:auto;}
  .catalog-choice-menu {
    position:absolute; z-index:110; top:calc(100% + 9px); left:0; width:100%; min-width:245px; max-height:352px;
    overflow:hidden; display:flex; flex-direction:column;
    border:1px solid #dfe4ea; border-radius:17px; background:#fff;
    box-shadow:0 20px 46px rgba(29,39,55,.18);
    animation:catalogMenuIn .15s ease-out both;
  }
  @keyframes catalogMenuIn {from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:none}}
  .catalog-dropdown-search {display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid #eef0f3;}
  .catalog-dropdown-search span {font-size:20px;color:#d83245;}
  .catalog-dropdown-search input {flex:1; width:100%;min-width:0;height:33px; border:0; outline:0!important; box-shadow:none!important; background:transparent;color:#202632;font-size:13px;}
  .catalog-dropdown-search input::placeholder {color:#9da4af;}
  .catalog-dropdown-options {overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#e0e3e8 transparent; padding:6px;}
  .catalog-dropdown-options::-webkit-scrollbar {width:5px;}
  .catalog-dropdown-options::-webkit-scrollbar-thumb {border-radius:8px;background:#e0e3e8;}
  .catalog-dropdown-item {display:flex; justify-content:space-between; align-items:center;gap:12px; min-height:42px;width:100%; text-align:left; border:0; border-radius:10px; background:transparent; padding:8px 11px; font-size:13px; font-weight:650; color:#323a45;}
  .catalog-dropdown-item span {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .catalog-dropdown-item small {color:#939aa4; font-size:11px; font-weight:650; white-space:nowrap;}
  .catalog-dropdown-item:hover,.catalog-dropdown-item.is-current {background:#fff0f1;color:#b72b39;}
  .catalog-dropdown-item.clear {color:#bf3a4b;border-bottom:1px solid #f1e9ea;border-radius:0;}
  .catalog-dropdown-empty {padding:20px 12px;text-align:center;color:#87909c;font-size:12px;}

  .catalog-fast-filters {display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding-top:22px; margin-top:19px; border-top:1px solid #edf0f3;}
  .catalog-fast-btn,.catalog-fast-all {min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:0 14px; border:1px solid #e2e6eb; border-radius:12px; background:#f9fafb; color:#4a5360; font-size:12px; font-weight:740; white-space:nowrap;}
  .catalog-fast-btn:hover,.catalog-fast-all:hover {border-color:#edabb1;background:#fff;}
  .catalog-fast-btn.is-selected,.catalog-fast-btn.is-open {color:#b6303f;background:#fff3f4;border-color:#f3c1c5;}
  .catalog-fast-icon {width:17px;height:17px; flex:0 0 17px; display:grid; place-items:center; color:#cc4351;}
  .catalog-fast-icon svg,.catalog-fast-all svg {width:17px;height:17px;display:block;}
  .catalog-mini-chevron {color:#979fa9;font-size:15px; margin-left:1px;}
  .catalog-fast-all {background:#fff;color:#2c333c;}
  .catalog-fast-all svg {color:#da3446;}
  .catalog-fast-all b {width:19px;height:19px; border-radius:6px;display:grid;place-items:center;background:#e02a3d;color:#fff;font-size:10px;}
  .catalog-fast-popover {position:absolute; z-index:105; top:calc(100% - 76px); left:26px; width:min(390px,calc(100% - 52px)); padding:19px; border-radius:17px; background:#fff;border:1px solid #e2e5ec;box-shadow:0 19px 50px rgba(30,39,53,.18);animation:catalogMenuIn .16s ease-out both;}
  .catalog-popover-title {font-size:15px;font-weight:840;color:#262e39;margin-bottom:14px;}
  .catalog-popover-fields {display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .catalog-popover-fields label {display:flex;flex-direction:column;gap:7px;color:#818a96;font-weight:690;font-size:11px;}
  .catalog-popover-fields input {min-width:0;width:100%;height:43px;font-size:13px;background:#f7f8fa;}
  .catalog-popover-done {width:100%;height:40px;margin-top:15px; border:0; border-radius:11px;background:#ec3143;color:white;font-size:12px;font-weight:800;}
  .catalog-popover-fuels {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .catalog-popover-fuel {height:42px;border-radius:10px;border:1px solid #e4e6eb;background:#f8f9fb;font-size:12px;color:#4b5561;}
  .catalog-popover-fuel.selected,.catalog-popover-fuel:hover {border-color:#eea6ae;background:#fff0f2;color:#b92a38;font-weight:750;}
  .catalog-picker-desktop .active-filter-row {margin:16px 0 0; padding:0;overflow:visible;flex-wrap:wrap;gap:7px;}
  .catalog-picker-desktop .active-filter-chip {min-height:32px;height:auto;padding:6px 11px;font-size:11px;background:#fff3f4;border-color:#f4d3d8;}
  .catalog-picker-footer {display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:16px;border-top:1px solid #edf0f3;margin-top:21px;padding-top:19px;}
  .catalog-picker-count {display:flex;align-items:center;gap:9px;color:#626c78;font-size:12px;font-weight:600;}
  .catalog-picker-count b {font-size:14px;color:#202732;font-weight:850;font-variant-numeric:tabular-nums;}
  .catalog-count-dot {width:8px;height:8px;border-radius:50%;background:#42c994;box-shadow:0 0 0 4px rgba(66,201,148,.09);}
  .catalog-picker-footer-actions {display:flex;align-items:center;gap:12px;}
  .catalog-reset-btn {border:0;background:transparent;color:#858c98;font-size:12px;font-weight:750;padding:12px 15px;}
  .catalog-reset-btn:hover {color:#d13242;}
  .catalog-show-btn {height:49px; min-width:230px;display:flex;align-items:center;justify-content:center;gap:13px;border:0;border-radius:13px;background:linear-gradient(110deg,#f53648,#d82338);color:#fff;font-size:13px;font-weight:780;box-shadow:0 9px 23px rgba(218,37,54,.18);transition:transform .17s ease,filter .17s ease;}
  .catalog-show-btn:hover {filter:brightness(1.035);transform:translateY(-1px);}
  .catalog-show-btn:disabled {opacity:.6;cursor:wait;}
  .catalog-show-btn #catalogShowCount {padding:4px 7px;border-radius:8px;background:rgba(0,0,0,.15);font-weight:850;font-size:12px;font-variant-numeric:tabular-nums;}
  .catalog-arrow-icon {font-size:19px; font-weight:400;}
  .catalog-results {position:relative; z-index:1;margin-top:28px;}
  .catalog-results-right {gap:21px;}
  .catalog-sort-label {display:inline-flex;align-items:center;gap:9px;color:#7b848f;font-size:12px;font-weight:660;}
  .catalog-sort-label select {height:38px;max-width:210px;padding:0 32px 0 12px;border:1px solid #e2e6eb;border-radius:10px;background:#fff;color:#3f4653;font-size:12px;font-weight:650;outline:none;}
}

@media(min-width:900px) and (max-width:1100px) {
  .catalog-picker-desktop {padding:20px;}
  .catalog-hierarchy {gap:10px;}
  .catalog-choice-trigger {height:53px;padding:0 11px;font-size:12px;}
  .catalog-fast-btn,.catalog-fast-all {padding:0 11px;font-size:11px;}
  .catalog-picker-footer {gap:10px;}
}
@media(max-width:899px) {
  .catalog-picker-desktop {display:none!important;}
  .catalog-sort-label {display:none!important;}
  .catalog-title {padding-bottom:14px;}
  .catalog-results {margin-top:20px;}
}
@media(prefers-reduced-motion:reduce) {
  .catalog-choice-menu,.catalog-fast-popover {animation:none!important;}
  .catalog-show-btn {transition:none!important;}
}


/* v2.5.1: hide catalog quick-run on phones; filter-sheet apply remains visible. */
@media (max-width:899px) {
  .catalog-page #mobileCatalogRun,
  .catalog-page .mobile-catalog-picker > .mobile-catalog-run {
    display:none !important;
  }
}
/* Exact ID of the button inside the modal filter sheet. */
#applyFilters,
#applyFilters > span,
#applyFilters > b,
#applyFilters #filterResultCount {
  color:#fff !important;
}
#applyFilters {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#applyFilters > span,
#applyFilters > b {line-height:1.15;}
/* The desktop button's arrow is a text glyph, optically centre it. */
.catalog-picker-desktop .catalog-show-btn .catalog-arrow-icon {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:21px;
  height:21px;
  line-height:1 !important;
  font-size:19px;
  transform:translateY(-1px);
}


/* v2.5.2: precision-aligned filter chevrons and real SVH preview prices. */
@media (min-width:900px) {
  .catalog-fast-btn {justify-content:flex-start;}
  .catalog-fast-btn > span:nth-child(2) {min-width:0;}
  .catalog-mini-chevron {
    display:grid !important; place-items:center !important;
    flex:0 0 18px !important; width:18px !important; height:18px !important;
    margin:0 0 0 4px !important; padding:0 !important;
    font-size:0 !important; line-height:0 !important; color:#9099a5;
  }
  .catalog-mini-chevron svg,
  .catalog-choice-trigger > svg {
    display:block !important; width:17px !important; height:17px !important;
    margin:0 !important; transform:translateY(0) !important;
    stroke:currentColor; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round;
  }
  .catalog-fast-btn.is-open .catalog-mini-chevron svg,
  .catalog-choice-trigger.is-open > svg {
    transform:rotate(180deg) !important;
  }
  .catalog-choice-trigger > svg {flex:0 0 17px !important;}
}

.svh-preview {
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:5px 10px; margin-top:13px; padding-top:12px;
  border-top:1px solid rgba(36,47,58,.085);
}
.svh-preview-label {
  color:#787f8b; font-size:10px; line-height:1.4;
  font-weight:590;
}
.svh-preview-value {
  color:#212833; font-size:16px; line-height:1.2;
  letter-spacing:-.025em; font-weight:850;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.svh-preview-value.is-unavailable {font-size:11px; font-weight:650; color:#9299a3; letter-spacing:0;}
.chat-vehicle-card .svh-preview {margin-top:11px;padding-top:10px;}
.chat-vehicle-card .svh-preview-value {font-size:15px;}
.chat-vehicle-card .svh-preview-value.is-unavailable {font-size:11px;}
@media (min-width:900px) {
  .vehicle-card .svh-preview-label {font-size:11px;}
  .vehicle-card .svh-preview-value {font-size:18px;}
}
@media (max-width:599px) {
  .svh-preview {align-items:flex-start; flex-direction:column;gap:4px;}
  .svh-preview-label {font-size:10px;}
  .svh-preview-value {font-size:16px;}
}

@media (min-width: 900px) {

    .desktop-side-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 10px 0 25px;
        text-align: center;
    }

    /* Увеличиваем логотип */
    .desktop-side-brand-mark {
        width: 170px !important;
        height: 65px !important;
        flex: 0 0 auto !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 0 !important;
    }

    .desktop-side-brand-mark img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: transparent !important;
    }

    /* Убираем текст ШикАвто */
    .desktop-side-brand strong {
        display: none !important;
    }

    /* Подпись под логотипом */
    .desktop-side-brand small {
        display: block;
        margin-top: 2px;
        font-size: 12px;
        color: #9299a5;
        font-weight: 500;
        text-align: center;
        white-space: nowrap;
    }
}
/* Логотип в мобильной шапке */
@media (max-width: 899px) {

    .app-header .brand-lockup {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }

    /* Логотип */
    .app-header .brand-mark {
        width: 135px !important;
        height: 36px !important;
        flex: 0 0 36px;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        font-size: 0 !important;
    }

    .app-header .brand-logo-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: transparent !important;
    }

    /* Убираем текст ШикАвто */
    .app-header .brand-name {
        display: none !important;
    }

    /* Подпись под логотипом */
    .app-header .brand-caption {
        margin-top: 0;
        font-size: 10px;
        color: #9299a5;
        text-align: center;
        white-space: nowrap;
    }
}
/* Увеличение логотипа на компьютере */
@media (min-width: 900px) {
    .desktop-side-brand-mark {
        overflow: visible !important;
    }

    .desktop-side-brand-mark img {
        transform: scale(1.3) !important;
        transform-origin: center center;
    }
}

/* Увеличение логотипа на телефоне */
@media (max-width: 899px) {
    .app-header .brand-mark {
        overflow: visible !important;
    }

    .app-header .brand-logo-image {
        transform: scale(1.3) !important;
        transform-origin: center center;
    }
}

/* =============================================================
   ShikAuto catalogue refinement, 2026-10-13
   Layout-only changes. Never override the existing API logic.
   ============================================================= */
/* Current selection labels within the detailed filter sheet. */
.filter-sheet .filter-section-head span {
  font-size: 14px !important;
  font-weight: 760;
  line-height: 1.35;
  color: #c33544;
  max-width: 57%;
}
/* Precisely centered close icon, irrespective of font glyph baseline. */
.filter-sheet .sheet-close {
  display: grid;
  place-items: center;
  padding: 0;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  line-height: 1;
  cursor: pointer;
}
.filter-sheet .sheet-close svg {display:block; width:19px; height:19px;}
/* Enlarged and readable total in the Apply button. */
.filter-sheet .filter-result-count {
  min-width: 50px;
  height: 34px;
  padding-inline: 11px;
  font-size: 17px !important;
  line-height: 1;
  font-weight: 850;
}
.catalog-show-btn #catalogShowCount {
  font-size: 16px !important;
  min-width: 34px;
  min-height: 29px;
  display: inline-grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}
/* Replace native select with branded accessible sort buttons. */
.sort-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 9px;
}
.sort-choice {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  min-height: 43px;
  padding: 11px 15px;
  border: 1px solid #dfe3e9;
  border-radius: 12px;
  background: #f8f9fb;
  color: #454d59;
  font: inherit;
  font-size: 13px;
  line-height: 1.25;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.sort-choice:hover {border-color:#efafb7;background:#fff7f8;}
.sort-choice.is-selected {
  background: #fff0f2;
  border-color: #f06474;
  color: #b72537;
  font-weight: 760;
}
.sort-choice:focus-visible {outline: 3px solid rgba(232,43,62,.25);outline-offset:2px;}
/* Consistently visible fuel choices; no DVS disclosure step. */
#fuelFilterSection .fuel-button {font-size:13px;min-height:45px;padding:9px 7px;}
/* Independent brands, in the sheet and quick catalogue. */
.extra-brand-section,
.extra-brand-desktop {
  border: 1px solid #f0d9dd;
  border-radius: 17px;
  background: linear-gradient(140deg,#fff 0%,#fffafa 100%);
  padding: 13px 16px;
  margin-top: 16px;
}
.extra-brand-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:11px;
  color:#343b46;
  font-size:13px;
}
.extra-brand-title strong {font-weight:800;}
.extra-brand-title button {
  background:#fff2f3;
  color:#bc3949;
  border:1px solid #f3d2d6;
  border-radius:9px;
  min-height:32px;
  padding:5px 11px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.extra-brand-title button:hover {background:#ffe7ea;}
.extra-brand-section .filter-section {padding:12px 0;}
.extra-brand-section .filter-section:last-child {border:0;}
.add-brand-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:41px;
  margin-top:14px;
  padding:10px 16px;
  border:1px dashed #eea1aa;
  border-radius:12px;
  background:#fff6f7;
  color:#bf3343;
  font-size:13px;
  font-weight:780;
  cursor:pointer;
}
.add-brand-button span {font-size:18px;line-height:1;}
.add-brand-button:hover {background:#ffecee;}
.add-brand-button:focus-visible,.extra-brand-title button:focus-visible {outline:3px solid rgba(239,49,68,.28);outline-offset:2px;}
.extra-brand-sheet-list:empty {display:none;}
/* Denser desktop catalog picker without cramped controls. */
@media (min-width:900px) {
  .catalog-picker-desktop {padding:18px 22px 16px; margin-bottom:25px;}
  .catalog-hierarchy {gap:12px;}
  .catalog-choice-label {margin-bottom:7px;}
  .catalog-choice-trigger {height:49px; border-radius:12px; padding:0 13px;}
  .catalog-fast-filters {margin-top:15px; padding-top:15px; gap:9px;}
  .catalog-fast-btn,.catalog-fast-all {min-height:41px;}
  .catalog-picker-footer {margin-top:14px;padding-top:14px;gap:12px;}
  .catalog-picker-desktop .active-filter-row {margin-top:12px;}
  .extra-brand-desktop {padding:14px 16px;}
  .extra-brand-desktop-list:empty {display:none;}
  .add-brand-desktop {min-height:36px; margin-top:12px; font-size:12px; padding:7px 13px;}
  .filter-sheet .filter-section-head span {font-size:15px !important;}
}
@media (max-width:899px) {
  .filter-sheet .filter-section-head span {font-size:13px !important;max-width:60%;}
  .sort-choice-grid {gap:7px;}
  .sort-choice {font-size:12px;padding:10px;min-height:43px;}
  .filter-sheet .filter-result-count {min-width:46px;height:32px;font-size:16px !important;}
  .filter-sheet .filter-apply-button {gap:8px;padding-inline:12px 8px;}
  .extra-brand-section {padding:10px 12px;}
}
@media (max-width:360px) {
  .sort-choice-grid {grid-template-columns:1fr;}
}

.filter-sheet .filter-result-count {
    font-size: 13px !important;
}

.catalog-show-btn #catalogShowCount {
    font-size: 13px !important;
}

@media (min-width: 900px) {

    .bottom-nav {
        padding-top: 14px !important;
    }

    .desktop-side-brand {
        padding: 0 4px 12px !important;
        margin-bottom: 12px !important;
        gap: 0 !important;
    }

    .desktop-side-brand small {
        margin-top: 0 !important;
    }
}

/* =======================================================================
   Detail SVH price — shared calculator preview in the vehicle detail header
   ======================================================================= */
.detail-intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.detail-intro-copy { min-width: 0; }
.detail-svh-price { min-width: 0; }
.detail-svh-price .svh-preview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 7px;
  margin: 0;
  padding: 16px 17px;
  border: 1px solid #f2d9dd;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff5f6, #fffafb);
}
.detail-svh-price .svh-preview-label {
  font-size: 11px;
  font-weight: 650;
  color: #7c737b;
  line-height: 1.4;
}
.detail-svh-price .svh-preview-value {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -.035em;
  color: #da2b3d;
  font-variant-numeric: tabular-nums;
}
.detail-svh-price .svh-preview-value.is-unavailable {
  font-size: 13px;
  color: #858b95;
}
@media (min-width: 900px) {
  .detail-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(162px, 16.5vw, 220px);
    align-items: start;
    gap: 16px;
  }
  .detail-svh-price {
    grid-column: 2;
    grid-row: 1;
  }
}
@media (max-width: 899px) {
  .detail-svh-price .svh-preview {
    padding: 14px 16px;
  }
  .detail-svh-price .svh-preview-value {
    font-size: 22px;
  }
}


/* ==========================================================================
   Detail page: clean black SVH amount, no caption, box, border or background
   (catalogue cards keep their original price styling).
   ========================================================================== */
.detail-intro .detail-svh-price .svh-preview {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.detail-intro .detail-svh-price .svh-preview-label {
  display: none;
}
.detail-intro .detail-svh-price .svh-preview-value {
  display: inline-block;
  color: #17191f;
  font-size: clamp(25px, 2.6vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.detail-intro .detail-svh-price .svh-preview-value.is-unavailable {
  font-size: 13px;
  color: #757d88;
  font-weight: 600;
}
@media (min-width: 900px) {
  .detail-intro .detail-svh-price {
    padding-top: 28px;
    text-align: right;
  }
}
@media (max-width: 899px) {
  .detail-intro .detail-svh-price {
    text-align: left;
    margin-top: 0;
  }
  .detail-intro .detail-svh-price .svh-preview-value {
    font-size: 25px;
  }
}