/* ============================================================================
   GTWatch — "Tachometer" (Mercedes-AMG GT fork of SiennaWatch)
   Signature: odometer-style mono readouts with a Green Hell magno glow —
   the GT R's Nürburgring color. Same dashboard-light semantics.
   ========================================================================== */

:root, [data-theme="dark"] {           /* night cluster */
  --bg: #0B0C09;
  --bg-glow: radial-gradient(1100px 520px at 82% -12%, #1c2410 0%, rgba(11,12,9,0) 60%);
  --surface: #13150e;
  --surface-2: #1a1d13;
  --hairline: #2b2f20;
  --hairline-bright: #3d4230;
  --text: #F0F2E9;
  --muted: #9aa18a;
  --faint: #676e55;
  --accent: #B4D435;          /* Green Hell magno — the signature */
  --accent-ink: #151802;
  --accent-dim: rgba(180,212,53,.13);
  --accent-glow: 0 0 18px rgba(180,212,53,.30);
  --eco: #3fd6b0;             /* CPO / good deal */
  --eco-dim: rgba(63,214,176,.14);
  --amber: #fbb03b;           /* price-drop warning light */
  --amber-dim: rgba(251,176,59,.15);
  --alert: #fb6b6b;           /* salvage alert light */
  --alert-dim: rgba(251,107,107,.15);
  --awd: #6aa6ff;
  --awd-dim: rgba(106,166,255,.15);
  --gold: #f2c65a;             /* target trims (Platinum/Limited) */
  --amg-gold: #C9A24B;         /* AMG motorsport gold — the contrast frame */
  --gold-dim: rgba(242,198,90,.16);
  --shadow: 0 10px 34px rgba(0,0,0,.45);
  --readout-shadow: 0 0 20px rgba(180,212,53,.22);
  color-scheme: dark;
}

/* ── DAY: SILVER ARROW — brushed aluminium ────────────────────────────────────
   1934: the W25 came in a kilo overweight, so Mercedes scraped the white paint
   down to bare aluminium to make the limit — and won. The Silberpfeile were
   born. Bare metal has been Mercedes' racing skin ever since, and it is the
   only light mode with the aggression this car deserves.

   It also closes the material logic: night = CARBON (woven), day = ALLOY
   (milled). Both are what the chassis is actually made of.

   Metal is the opposite of satin: it takes a hard specular, holds a directional
   brush grain, and its highlights are TIGHT, not diffuse. Green Hell on raw
   alloy is the AMG paddock. */
[data-theme="light"] {
  --bg: #DFE3E6;
  --bg-glow: radial-gradient(1200px 640px at 76% -18%, #f4f6f7 0%, rgba(223,227,230,0) 64%);
  --surface: #EDF0F2;
  --surface-2: #E3E7EA;
  --hairline: #C6CCD1;
  --hairline-bright: #A9B1B8;
  --text: #14181B;
  --muted: #566068;
  --faint: #838D95;
  --accent: #4C6B12;           /* Green Hell, struck into alloy */
  --accent-ink: #ffffff;
  --accent-dim: rgba(76,107,18,.13);
  --accent-glow: 0 0 0 rgba(0,0,0,0);
  --eco: #0b8c6e;
  --eco-dim: rgba(11,140,110,.10);
  --amber: #a06508;
  --amber-dim: rgba(160,101,8,.10);
  --alert: #bf3428;
  --alert-dim: rgba(191,52,40,.10);
  --awd: #2a66d6;
  --awd-dim: rgba(42,102,214,.10);
  --gold: #8f6a1a;
  --gold-dim: rgba(143,106,26,.12);
  /* machined edges: a crisp bright lip on top, a dark contact line beneath —
     how a milled alloy panel actually sits */
  --shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 3px rgba(20,30,38,.10), 0 12px 32px rgba(20,30,38,.13);
  --readout-shadow: 0 0 0 rgba(0,0,0,0);
  /* the brush: fine directional grain, the tell of turned aluminium */
  /* finer than it looks: real turned alloy is a sub-pixel grain, not stripes.
     Kept low-contrast so it reads as a surface, never as a pattern. */
  --brush: repeating-linear-gradient(
      92deg,
      rgba(255,255,255,.40) 0px, rgba(255,255,255,.40) 1px,
      rgba(146,158,168,.055) 1px, rgba(146,158,168,.055) 2px);
  color-scheme: light;
}
[data-theme="light"] body::before { background: var(--bg-glow); }

/* every panel is a milled alloy plate: brush grain + a hard raking specular */
[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .filters,
[data-theme="light"] .stat,
[data-theme="light"] .trim-card,
[data-theme="light"] .callout,
[data-theme="light"] .modal-card,
[data-theme="light"] .gauge {
  background-color: var(--surface);
  background-image:
    linear-gradient(157deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.10) 38%, rgba(178,188,196,.10) 70%, rgba(255,255,255,.42) 100%),
    var(--brush);
  border-color: #C9CFD4;
  box-shadow: var(--shadow);
}
[data-theme="light"] .card:hover {
  border-color: #9fb35f;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 5px rgba(20,30,38,.12), 0 18px 44px rgba(76,107,18,.20);
}
/* the cluster: a single machined faceplate the gauges are cut into */
[data-theme="light"] .cluster { background: #CBD1D6; }
[data-theme="light"] button.gauge:hover { background-color: #F4F7F8; }
[data-theme="light"] .topbar {
  background-color: rgba(237,240,242,.92);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0) 70%),
    var(--brush);
  border-bottom: 1px solid #C3C9CE;
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 6px 20px rgba(20,30,38,.10);
}
/* mono readouts get engraved into the metal */
[data-theme="light"] .readout,
[data-theme="light"] .card .price,
[data-theme="light"] .detail-price {
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}

/* ── Topbar ───────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(11px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 11px max(16px, env(safe-area-inset-left));
  /* CARBON FIBRE cabin trim: 2x2 twill (two opposing 45s, half-cell offset)
     under a clear-coat, with a Green Hell sheen washing in from the left. */
  background-color: color-mix(in srgb, var(--surface) 92%, transparent);
  background-image:
    linear-gradient(100deg, rgba(180,212,53,.06), transparent 45%),
    linear-gradient(45deg, rgba(255,255,255,.035) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.035) 75%),
    linear-gradient(45deg, rgba(0,0,0,.34) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.34) 75%);
  background-size: 100% 100%, 7px 7px, 7px 7px;
  background-position: 0 0, 0 0, 3.5px 3.5px;
  backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--hairline));
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--text); margin-right: auto; }

/* UCM home badge — the family crest. Every tracker wears it, and it's the way
   back to the hub. Quiet by default; the parent brand shouldn't shout inside
   its own child. */
.ucm-home {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 6px 10px 6px 7px; margin-right: 12px;
  border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--surface-2); color: var(--muted);
  text-decoration: none; transition: .15s;
}
.ucm-home svg { width: 20px; height: 20px; display: block; }
.ucm-home-label {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.ucm-home:hover { color: var(--text); border-color: var(--hairline-bright); }
.ucm-home:active { transform: scale(.95); }
@media (max-width: 560px) { .ucm-home-label { display: none; } .ucm-home { padding: 6px; margin-right: 8px; } }
.mark { width: 34px; height: 34px; flex: 0 0 auto; filter: drop-shadow(var(--accent-glow)); }
.wordmark { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 1px; line-height: 1; }
.w2 { justify-self: start; }
.w1 { font-weight: 700; font-size: 18px; letter-spacing: .01em; }
.w2 { font-weight: 700; font-size: 18px; letter-spacing: .01em; color: var(--accent); }
.tagline { grid-column: 1 / -1; margin-top: 3px; color: var(--muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }

.topbar-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text);
  width: 40px; height: 40px; border-radius: 11px; font-size: 17px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: .15s;
}
.icon-btn:hover { border-color: var(--hairline-bright); color: var(--accent); }
.icon-btn:active { transform: scale(.93); }
.btn {
  background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text);
  padding: 9px 15px; border-radius: 11px; font-size: 14px; font-weight: 600; cursor: pointer;
  min-height: 40px; transition: .15s; font-family: inherit;
}
.btn:hover { border-color: var(--hairline-bright); }
.btn:active { transform: scale(.97); }
.btn.ghost { background: transparent; }
.btn.primary {
  background: var(--accent); border-color: transparent; color: var(--accent-ink);
  box-shadow: var(--accent-glow);
}
.btn.primary:hover { filter: brightness(1.08); }
.btn .fx { display: inline-block; }

/* ── Signature: instrument-cluster gauge strip ────────────────────────────── */
.cluster {
  position: relative;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 1px; background: var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow-x: auto; scrollbar-width: none;
}
.cluster::-webkit-scrollbar { display: none; }
.gauge {
  /* same twill, dialled way down — texture you feel more than see */
  background-color: var(--surface);
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.022) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.022) 75%),
    linear-gradient(45deg, rgba(0,0,0,.22) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.22) 75%);
  background-size: 7px 7px, 7px 7px;
  background-position: 0 0, 3.5px 3.5px;
  padding: 14px max(16px, env(safe-area-inset-left)) 18px;
  display: flex; flex-direction: column; gap: 4px; min-width: 150px;
  position: relative;
}
/* TAPPABLE gauges (salvage / private-party / unicorn) vs the static readouts.
   Three cues, all quiet: a filter-chevron in the corner, an underline that
   lights on the gauge's own semantic colour, and a press response. Static
   gauges (Active/Avg/Days/Deals) get none of these — the difference is the
   point. */
button.gauge {
  border: none; font: inherit; text-align: left; cursor: pointer;
  transition: background .15s ease;
  overflow: hidden;
}
button.gauge:hover { background: var(--surface-2); }
button.gauge:active { background: var(--surface-2); }
button.gauge:active .readout { transform: scale(.96); }
button.gauge .readout { display: inline-block; transition: transform .1s ease; }

/* corner glyph: "tap to filter" */
button.gauge::after {
  content: "⌕";
  position: absolute; top: 9px; right: 10px;
  font-size: 13px; line-height: 1; color: var(--faint);
  opacity: .5; transition: opacity .18s ease, color .18s ease, transform .18s ease;
}
button.gauge:hover::after { opacity: 1; color: var(--accent); transform: scale(1.12); }

/* underline: dim until the gauge is lit, then it burns in its own colour */
button.gauge::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: currentColor; opacity: .18;
  transition: opacity .2s ease, box-shadow .2s ease;
}
button.gauge:hover::before { opacity: .5; }
.gauge-deals   { color: var(--eco); }
.gauge-salvage { color: var(--alert); }
.gauge-private { color: var(--gold); }
.gauge-unicorn { color: #c77dff; }
.gauge-pulse   { color: var(--eco); }
#g-pulse { display: inline-flex; gap: 10px; align-items: baseline; font-size: 26px; }
#g-pulse .pulse-up { color: var(--eco); }
#g-pulse .pulse-dn { color: var(--alert); }
.gauge-pulse.lit::before { opacity: 1; box-shadow: 0 0 12px currentColor; }
.gauge-pulse.lit .g-label { color: var(--eco); }
/* colour above is only for the underline/chevron — text stays normal */
button.gauge .g-label, button.gauge .readout, button.gauge .g-sub { color: var(--faint); }
button.gauge .readout { color: var(--text); }
button.gauge .g-sub { color: var(--muted); }
button.gauge.lit::before { opacity: 1; box-shadow: 0 0 12px currentColor; }

.g-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .13em; color: var(--faint); font-weight: 600; }
.readout {
  font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.01em;
  color: var(--text); text-shadow: var(--readout-shadow);
}
.readout.accent { color: var(--accent); }
.readout.eco { color: var(--eco); }
.g-sub { font-size: 11px; color: var(--muted); }
/* scroll affordance: right-edge fade + chevron, gone once scrolled to end
   (cluster-wrap gets .at-end from JS; hidden entirely when nothing overflows) */
.cluster-wrap { position: relative; }
.cluster-fade {
  position: absolute; top: 0; bottom: 1px; right: 0; width: 64px;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 8px; pointer-events: none;
  color: var(--faint); font-size: 22px; font-weight: 600; line-height: 1;
  background: linear-gradient(90deg, transparent, var(--bg) 78%);
  opacity: 1; transition: opacity .25s ease;
}
.cluster-wrap.at-end .cluster-fade, .cluster-wrap.no-overflow .cluster-fade { opacity: 0; }
/* the chevron actively glows + nudges toward the hidden gauges */
.cluster-fade .chev {
  color: var(--accent);
  animation: chevGlow 2.2s ease-in-out infinite;
}
@keyframes chevGlow {
  0%, 100% { opacity: .55; text-shadow: 0 0 0 rgba(0,0,0,0); transform: translateX(0); }
  50%      { opacity: 1;   text-shadow: 0 0 9px var(--accent), 0 0 20px var(--accent-dim); transform: translateX(3px); }
}

/* speedometer-scale ticks along the cluster baseline */
.cluster-ticks {
  position: absolute; left: 0; right: 0; bottom: 0; height: 6px; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, var(--hairline-bright) 0 1px, transparent 1px 14px);
  opacity: .5;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: 6px; padding: 12px max(16px, env(safe-area-inset-left));
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  max-width: 1200px; margin: 0 auto;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; background: transparent; border: 1px solid transparent; color: var(--muted);
  padding: 8px 17px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: .15s;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--accent-dim); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }

main { padding: 4px max(16px, env(safe-area-inset-left)) 26px max(16px, env(safe-area-inset-right)); max-width: 1200px; margin: 0 auto; }
.view { display: none; }
.view.active { display: block; animation: viewIn .22s ease both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.accent-text, .accent { color: var(--accent); }

/* ── Filters ──────────────────────────────────────────────────────────────── */
.filters {
  padding: 15px; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 16px; box-shadow: var(--shadow); margin: 8px 0 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.filters-primary { display: grid; grid-template-columns: 1fr 1fr auto; gap: 11px; align-items: end; }
.filters-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 11px; align-items: end; }
.filters-more[hidden] { display: none; }   /* class rule would otherwise beat [hidden] */
.filters-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  align-self: end; min-height: 42px; padding: 9px 14px; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--hairline); color: var(--muted);
  border-radius: 10px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; transition: .12s;
}
.filters-toggle:hover { border-color: var(--hairline-bright); color: var(--text); }
.ft-caret { font-size: 10px; transition: transform .2s ease; }
.filters-toggle[aria-expanded="true"] .ft-caret { transform: rotate(180deg); }
.filters-toggle[aria-expanded="true"] { color: var(--text); border-color: var(--hairline-bright); }
.ft-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px var(--accent); }
.ft-dot[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); font-weight: 600; }
select, input {
  background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text);
  border-radius: 10px; padding: 10px 11px; font-size: 16px; /* 16px = no iOS zoom */ width: 100%;
  appearance: none; -webkit-appearance: none; font-family: inherit; transition: .12s;
}
select:focus, input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); align-self: end; padding-bottom: 8px; }
.check input { width: auto; accent-color: var(--accent); }
.inline-select { max-width: 200px; font-size: 14px; }
/* quick-filter chips — one-tap versions of the common narrows */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.chip {
  background: var(--surface); border: 1px solid var(--hairline); color: var(--muted);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: .14s; min-height: 34px;
}
.chip:hover { border-color: var(--hairline-bright); color: var(--text); }
.chip.active {
  background: var(--accent-dim); color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.chip-uni.active {
  color: #0a0e15; border-color: transparent;
  background: linear-gradient(100deg, #B4D435, #6aa6ff, #c77dff, #f5c451, #B4D435);
  background-size: 220% 100%; animation: uniShimmer 3s linear infinite;
}
.chip:active { transform: scale(.95); }

.result-meta { color: var(--muted); font-size: 13px; margin: 2px 2px 14px; letter-spacing: .01em; }
.result-meta span { color: var(--accent); font-weight: 700; font-family: "JetBrains Mono", monospace; }

/* ── Listing cards ────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 15px; }
.card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow); cursor: pointer;
  display: flex; flex-direction: column; position: relative;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  animation: cardIn .4s cubic-bezier(.2,.7,.3,1) both;
}
.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, var(--hairline));
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }
.card:nth-child(1){animation-delay:.02s}.card:nth-child(2){animation-delay:.04s}
.card:nth-child(3){animation-delay:.06s}.card:nth-child(4){animation-delay:.08s}
.card:nth-child(5){animation-delay:.10s}.card:nth-child(6){animation-delay:.12s}
.card:nth-child(7){animation-delay:.14s}.card:nth-child(8){animation-delay:.16s}
.card:nth-child(9){animation-delay:.18s}.card:nth-child(n+10){animation-delay:.2s}
/* cards past the first screenful stream in on scroll — no entrance animation
   for them (48+ simultaneous compositor layers is what killed iOS Safari) */
.card:nth-child(n+25) { animation: none; }
.cards-sentinel { grid-column: 1 / -1; height: 1px; }

.photo-wrap { position: relative; aspect-ratio: 16/10; background: var(--surface-2); overflow: hidden; }
.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* photos fade in when loaded instead of popping (placeholder 🚐 shows through) */
img.photo { opacity: 0; transition: opacity .4s ease; }
img.photo.loaded { opacity: 1; }
.photo.ph { display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 34px; background: var(--surface-2); }
.photo-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--surface) 78%, transparent) 100%); pointer-events: none; }
.card-badges-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 6px; }

.card-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 9px; }
.card .price { font-size: 23px; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.card .title { font-weight: 600; font-size: 14.5px; color: var(--text); }
.card .specs { display: flex; flex-wrap: wrap; gap: 7px 14px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--hairline); padding-top: 10px; }
.card .spec { display: inline-flex; align-items: baseline; gap: 5px; }
.card .spec .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); font-weight: 600; }
.card .spec b { color: var(--text); font-weight: 500; font-size: 12.5px; }
.card .dealer { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Badges (dashboard-light semantics) ───────────────────────────────────── */
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 7px;
  border: 1px solid transparent; letter-spacing: .03em; text-transform: uppercase;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: inline-flex; align-items: center; gap: 4px;
}
.b-cpo { color: var(--eco); background: var(--eco-dim); border-color: color-mix(in srgb, var(--eco) 35%, transparent); }
.b-awd { color: var(--awd); background: var(--awd-dim); border-color: color-mix(in srgb, var(--awd) 35%, transparent); }
.b-drop { color: var(--amber); background: var(--amber-dim); border-color: color-mix(in srgb, var(--amber) 35%, transparent); font-family: "JetBrains Mono", monospace; }
.b-new { color: var(--accent); background: var(--accent-dim); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.b-salvage { color: var(--alert); background: var(--alert-dim); border-color: color-mix(in srgb, var(--alert) 35%, transparent); }
.b-deal { color: var(--accent-ink); background: var(--eco); border-color: transparent; }
/* eBay-sourced listing + private-party seller */
.b-ebay { color: var(--awd); background: var(--awd-dim); border-color: color-mix(in srgb, var(--awd) 35%, transparent); }
.b-private { color: var(--gold); background: var(--gold-dim); border-color: color-mix(in srgb, var(--gold) 35%, transparent); }

/* ── Target trims, great deals, price warning, unicorn ────────────────────── */
.b-want { color: #1a1206; background: linear-gradient(180deg, #ffdd80, var(--gold)); border-color: transparent; }
[data-theme="light"] .b-want { color: #fff; background: var(--gold); }
.b-great { color: #1a1206; background: linear-gradient(180deg, #ffe08a, #f0b429); border-color: transparent; box-shadow: 0 0 10px rgba(240,193,75,.4); }
[data-theme="light"] .b-great { color: #fff; background: #c98a10; }
.b-warn { color: var(--amber); background: var(--amber-dim); border-color: color-mix(in srgb, var(--amber) 35%, transparent); font-family: "JetBrains Mono", monospace; }

/* target-trim card: gold left-edge + tinted border */
.card.want { border-color: color-mix(in srgb, var(--gold) 50%, var(--hairline)); box-shadow: var(--shadow), inset 3px 0 0 var(--gold); }

/* THE unicorn: animated iridescent chrome border + glow (the one bold thing) */
@property --uni-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.card.unicorn {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from var(--uni-ang), #B4D435, #3fd6b0, #6aa6ff, #c77dff, #f5c451, #B4D435) border-box;
  box-shadow: 0 0 26px rgba(140,170,255,.28), var(--shadow);
  animation: cardIn .4s cubic-bezier(.2,.7,.3,1) both, uniSpin 6s linear infinite;
}
@keyframes uniSpin { to { --uni-ang: 360deg; } }
.b-unicorn {
  color: #0a0e15; border: none; font-weight: 800; letter-spacing: .04em;
  background: linear-gradient(100deg, #B4D435, #6aa6ff, #c77dff, #f5c451, #B4D435);
  background-size: 220% 100%; animation: uniShimmer 3s linear infinite;
  box-shadow: 0 0 12px rgba(150,120,255,.5);
}
@keyframes uniShimmer { to { background-position: 220% 0; } }

/* unicorn gauge lights up when count > 0 */
.gauge-unicorn.lit .readout { color: #c77dff; text-shadow: 0 0 16px rgba(199,125,255,.55); }
.gauge-unicorn.lit .g-label { color: #c77dff; }

/* private-party gauge lights gold when count > 0 */
.gauge-private.lit .readout { color: var(--gold); text-shadow: 0 0 14px rgba(242,198,90,.45); }
.gauge-private.lit .g-label { color: var(--gold); }

/* deals gauge lights eco-green when there are below-market cars */
.gauge-deals.lit .readout { color: var(--eco); text-shadow: 0 0 14px var(--eco-dim); }
.gauge-deals.lit .g-label { color: var(--eco); }

/* salvage gauge lights alert-red when lots exist */
.gauge-salvage.lit .readout { color: var(--alert); text-shadow: 0 0 14px rgba(251,107,107,.4); }
.gauge-salvage.lit .g-label { color: var(--alert); }

/* unicorn alert banner (only shown when one exists) */
.unicorn-banner {
  display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left;
  max-width: 1200px; margin: 12px auto 2px;
  width: calc(100% - 2 * max(16px, env(safe-area-inset-left)));
  padding: 12px 16px; border: none; border-radius: 14px; color: #0a0e15;
  background: linear-gradient(100deg, #B4D435, #6aa6ff, #c77dff, #f5c451, #B4D435);
  background-size: 220% 100%; animation: uniShimmer 5s linear infinite;
  box-shadow: 0 8px 24px rgba(150,120,255,.35); font-family: inherit;
}
.unicorn-banner:active { transform: scale(.995); }
.ub-mark { font-size: 22px; }
.ub-text { flex: 1; font-size: 14px; font-weight: 600; }
.ub-text b { font-weight: 800; }
.ub-go { font-weight: 800; font-size: 18px; }

.uni-chip { background: var(--accent-dim); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; margin-left: 8px; }

/* ── Trims tab ────────────────────────────────────────────────────────────── */
.callout { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); }
.callout h3 { margin: 0 0 6px; font-size: 15px; }
.callout p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.callout.gold { border-left: 3px solid var(--gold); }
.callout.good { border-left: 3px solid var(--eco); }
.callout.warn { border-left: 3px solid var(--amber); }
.recall-list { display: flex; flex-direction: column; }
.recall-row { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.recall-row:last-child { border-bottom: none; }
.recall-yr { font-family: "JetBrains Mono", monospace; font-weight: 700; color: var(--amber);
             min-width: 92px; font-size: 13px; flex: 0 0 auto; }
.recall-comp { font-weight: 600; font-size: 13.5px; }
.recall-what { font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.recall-act { font-size: 12.5px; color: var(--accent); margin-top: 4px; }
@media (max-width: 720px) { .recall-row { flex-direction: column; gap: 4px; } }
.callout.uni { border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, #B4D435, #c77dff, #f5c451) border-box; }
.trim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; margin: 14px 0 15px; }
.trim-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.trim-card.target { border-color: color-mix(in srgb, var(--gold) 55%, var(--hairline)); box-shadow: var(--shadow), inset 3px 0 0 var(--gold); }
.trim-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.trim-name { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.trim-tag { font-size: 12px; color: var(--muted); }
.trim-msrp { display: flex; gap: 18px; }
.trim-msrp .k { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.trim-msrp b { font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 700; }
.trim-meta { font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--hairline); padding-top: 9px; }
.trim-adds { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.trim-adds li { font-size: 13px; color: var(--muted); }
.year-list { display: flex; flex-direction: column; }
.year-row { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.year-row:last-child { border-bottom: none; }
.year-y { font-family: "JetBrains Mono", monospace; font-weight: 700; color: var(--accent); min-width: 84px; }
.year-n { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.tips { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.tips li { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.trim-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 4px 2px 8px; }
.linkbtn { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }

/* ── Panels / analytics ───────────────────────────────────────────────────── */
.panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); margin-bottom: 15px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.panel-head h2 { font-size: 16px; }
.hint { color: var(--faint); font-size: 12px; }
.panel-note { background: var(--surface); border: 1px solid var(--hairline); border-left: 3px solid var(--accent); border-radius: 12px; padding: 13px 15px; color: var(--muted); font-size: 13px; margin-bottom: 15px; line-height: 1.5; }
.note-key { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--accent-ink); background: var(--eco); padding: 2px 7px; border-radius: 6px; margin-right: 6px; vertical-align: middle; }
.readonly-note { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 13px 15px; color: var(--muted); font-size: 13px; margin-bottom: 15px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 15px; }
.stat { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: .7; }
.stat .n { font-size: 25px; font-weight: 700; letter-spacing: -.01em; }
.stat .l { color: var(--muted); font-size: 11.5px; margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }
.mini-list { display: flex; flex-direction: column; }
.mini-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 4px; border-bottom: 1px solid var(--hairline); cursor: pointer; font-size: 14px; transition: .12s; }
.mini-row:hover { color: var(--accent); padding-left: 8px; }
.mini-row:last-child { border-bottom: none; }
.mini-row .drop-amt { color: var(--amber); font-weight: 700; }

/* ── Exit prices panel ────────────────────────────────────────────────────── */
.sold-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: start; }
.sold-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sold-table th { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); font-weight: 600; text-align: left; padding: 0 8px 8px 0; }
.sold-table td { padding: 8px 8px 8px 0; border-top: 1px solid var(--hairline); }
.sold-table .num { text-align: right; font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }
.exit-amt { color: var(--eco); font-weight: 700; font-family: "JetBrains Mono", monospace; }
@media (max-width: 720px) { .sold-grid { grid-template-columns: 1fr; } }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(4,7,12,.66); display: none; align-items: center; justify-content: center; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); backdrop-filter: blur(3px); animation: fadeIn .18s ease; }
.modal:not([hidden]) { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 18px; width: 100%; max-width: 620px; max-height: 88vh; max-height: 88dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px; position: relative; box-shadow: var(--shadow); }
.modal-card.small { max-width: 410px; }
.modal-close { position: absolute; top: 14px; right: 14px; z-index: 3; background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--hairline); color: var(--text); width: 34px; height: 34px; border-radius: 10px; cursor: pointer; font-size: 15px; }
.modal-close:hover { border-color: var(--hairline-bright); }
/* detail hero — the car itself, full-bleed at the top of the sheet */
.detail-hero {
  position: relative; margin: -24px -24px 18px; aspect-ratio: 16 / 9;
  overflow: hidden; background: var(--surface-2);
  border-radius: 17px 17px 0 0; border-bottom: 1px solid var(--hairline);
}
.detail-hero img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity .4s ease;
}
.detail-hero img.loaded { opacity: 1; }
.detail-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--surface) 82%, transparent) 100%);
}
.detail-hero figcaption { position: absolute; left: 14px; right: 14px; bottom: 12px; margin: 0; z-index: 1; }

.detail-head { display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; margin-right: 34px; }
.detail-price { font-size: 30px; font-weight: 700; color: var(--accent); text-shadow: var(--readout-shadow); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; margin: 18px 0; font-size: 14px; }
.detail-grid div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--hairline); padding: 7px 0; }
.detail-grid .k { color: var(--muted); }
.detail-grid .v { color: var(--text); text-align: right; }
.spark-wrap { margin: 8px 0 4px; padding: 12px; background: var(--surface-2); border-radius: 12px; border: 1px solid var(--hairline); }
.spark-wrap .sub { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 8px; }
.spark-wrap .sub b { color: var(--text); }
.row-end { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; align-items: center; }

/* ── Watchlist form ───────────────────────────────────────────────────────── */
.watch-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 11px; }
.watch-form button { grid-column: 1 / -1; }

/* ── Status bar ───────────────────────────────────────────────────────────── */
.statusbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; gap: 18px; align-items: center; overflow-x: auto; white-space: nowrap;
  padding: 9px max(16px, env(safe-area-inset-left)) calc(9px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--hairline); font-size: 12px; color: var(--muted); scrollbar-width: none;
}
.statusbar::-webkit-scrollbar { display: none; }
.statusbar b { color: var(--text); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; box-shadow: 0 0 8px currentColor; }
.dot.ok { background: var(--eco); color: var(--eco); } .dot.warn { background: var(--amber); color: var(--amber); } .dot.err { background: var(--alert); color: var(--alert); }

/* ── write-only visibility (hidden in public read-only view) ──────────────── */
body:not(.can-write) .write-only { display: none !important; }
body.can-write .read-only-note { display: none !important; }

/* ── Keyboard focus (desktop quality floor) ───────────────────────────────── */
button:focus-visible, a:focus-visible, .card:focus-visible, .tab:focus-visible,
.chip:focus-visible, .icon-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
select:focus-visible, input:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim);
}

/* ── Touch feedback (snappier on iOS) ─────────────────────────────────────── */
button, a, .tab, .card, select, input, label.check { touch-action: manipulation; }
.card:active { transform: scale(.985); transition: transform .06s ease; }
.tab:active, .filters-toggle:active, .icon-btn:active, .btn:active { transform: scale(.95); }
.mini-row:active, .trim-card:active { opacity: .82; }

/* ── Skeleton loaders (perceived speed while data loads) ──────────────────── */
.skel-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.skel-photo { aspect-ratio: 16 / 10; }
.skel-line { height: 12px; border-radius: 6px; margin: 12px 14px; }
.skel-line.lg { height: 20px; width: 45%; }
.skel-line.sm { width: 70%; }
.skel-photo, .skel-line { background: linear-gradient(100deg, var(--surface-2) 28%, var(--hairline) 50%, var(--surface-2) 72%); background-size: 220% 100%; animation: skelShimmer 1.3s linear infinite; }
@keyframes skelShimmer { to { background-position: -220% 0; } }

/* ── Pull-to-refresh ──────────────────────────────────────────────────────── */
.ptr {
  position: fixed; top: env(safe-area-inset-top); left: 0; right: 0; z-index: 24;
  display: flex; align-items: center; justify-content: center; height: 0; overflow: hidden;
  color: var(--accent); font-size: 13px; font-weight: 600; pointer-events: none;
}
.ptr.snap { transition: height .2s ease; }
.ptr-spin { width: 18px; height: 18px; border: 2px solid var(--accent-dim); border-top-color: var(--accent); border-radius: 50%; margin-right: 9px; }
.ptr.spinning .ptr-spin { animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Swipe-to-dismiss modal ───────────────────────────────────────────────── */
.modal-card { will-change: transform; transition: transform .22s ease; }
.modal-card.dragging { transition: none; }
.swipe-grab { display: none; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .tagline { display: none; }
  .grid2 { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .filters-more { grid-template-columns: 1fr 1fr; }
  .gauge { min-width: 132px; }
  .readout { font-size: 25px; }

  /* chips: one thumb-swipeable row, edge-to-edge */
  .chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * max(16px, env(safe-area-inset-left)));
    margin-right: calc(-1 * max(16px, env(safe-area-inset-right)));
    padding: 0 max(16px, env(safe-area-inset-left)) 2px;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }

  /* Bottom tab bar — TRANSPARENT CARBON FIBRE, AMG interior trim.
     Two diagonal gradients at opposing 45s, offset by half a cell, make a real
     2x2 twill weave; the semi-transparent base + backdrop blur let the page
     glow through the fibres, and a Green Hell sheen washes the top-left. */
  .tabs {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 25;
    margin: 0; max-width: none; gap: 0; justify-content: space-around; overflow: visible;
    background-color: rgba(11,13,9,.90);
    background-image:
      linear-gradient(135deg, rgba(180,212,53,.07), transparent 42%),
      linear-gradient(45deg, rgba(255,255,255,.045) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.045) 75%),
      linear-gradient(45deg, rgba(0,0,0,.42) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.42) 75%);
    background-size: 100% 100%, 7px 7px, 7px 7px;
    background-position: 0 0, 0 0, 3.5px 3.5px;   /* half-cell offset = the weave */
    backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border-top: 1px solid rgba(180,212,53,.20);
    box-shadow: 0 -12px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);
    padding: 6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));
    transform: translateZ(0);  /* own compositor layer: stays pinned while Safari's toolbar collapses */
  }
  /* clear-coat: the gloss lacquer sitting over the weave */
  .tabs::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(130% 90% at 25% -35%, rgba(255,255,255,.08), transparent 62%);
  }
  /* lit tab: Green Hell glow + filament bar along the top edge */
  .tabs .tab.active { color: var(--accent); text-shadow: 0 0 12px var(--accent-dim); }
  .tabs .tab.active::after {
    content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
    width: 26px; height: 2px; border-radius: 2px;
    background: var(--accent); box-shadow: 0 0 10px var(--accent), 0 0 22px var(--accent-dim);
  }
  .tabs .tab { position: relative; }
  /* the deck is dark lacquer in BOTH themes, so pin its text light — otherwise
     light-theme's dark muted text would vanish into the black. */
  .tabs .tab { color: #97a3b5; }
  .tabs .tab:hover { color: #e9eff7; }
  /* Silver Arrow daylight: the deck is a brushed-alloy plate */
  [data-theme="light"] .tabs {
    background-color: rgba(233,237,240,.96);
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 62%),
      var(--brush);
    border-top: 1px solid #BFC6CC;
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -8px 26px rgba(20,30,38,.12);
  }
  [data-theme="light"] .tabs::before { background: none; }
  [data-theme="light"] .tabs .tab { color: #626C74; }
  [data-theme="light"] .tabs .tab:hover { color: #14181B; }
  [data-theme="light"] .tabs .tab.active { color: var(--accent); }
  .tabs .tab::before { filter: none; }
  .statusbar { transform: translateZ(0); }
  /* iOS keyboard: fixed elements anchor to the LAYOUT viewport, so with the
     keyboard up the bars float mid-screen. Hide them while a field is focused
     (body.kb-open set by app.js); they return on blur. */
  body.kb-open .tabs, body.kb-open .statusbar { display: none; }
  body.kb-open { padding-bottom: 0; }
  .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    border: none; background: none; border-radius: 12px; padding: 6px 2px; font-size: 10px; min-height: 48px;
  }
  .tab::before { content: attr(data-icon); font-size: 20px; line-height: 1; filter: grayscale(.2); }
  .tab.active { background: none; color: var(--accent); }
  .tab.active::before { filter: none; }

  /* status strip sits just above the tab bar */
  .statusbar { bottom: calc(60px + env(safe-area-inset-bottom)); font-size: 11px; gap: 12px; padding-bottom: 8px; }
  body { padding-bottom: calc(60px + 42px + env(safe-area-inset-bottom)); }

  /* keep the collapsed filter reachable while scrolling */
  .filters { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 18; }

  /* auto-hide chrome: scroll down slides topbar + filter bar away, scroll up
     restores (body.chrome-hidden set by initAutoHideChrome) */
  .topbar, .filters { transition: transform .28s ease; }
  body.chrome-hidden .topbar { transform: translateY(-110%); }
  body.chrome-hidden .filters {
    transform: translateY(calc(-100% - 60px - env(safe-area-inset-top)));
    pointer-events: none;
  }

  /* iOS sheet-style grab handle on the detail modal */
  .swipe-grab { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--hairline-bright); margin: 0 auto 12px; }
  .modal { align-items: flex-end; padding: 0; }
  .modal-card { max-width: 100%; border-radius: 20px 20px 0 0; max-height: 92vh; max-height: 92dvh; padding-top: 14px; }
  /* keep the sheet grab-handle visible above the hero; inset iOS-card style */
  .detail-hero { margin: 2px 0 16px; border-radius: 14px; border: 1px solid var(--hairline); }
}
@media (max-width: 430px) {
  .filters-primary { grid-template-columns: 1fr 1fr; }
  .filters-toggle { grid-column: 1 / -1; }
}

/* ── Motion off ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ── family footer: quiet attribution + a way home ────────────────────────── */
.ucm-foot { display: flex; justify-content: center; padding: 30px 16px 12px; }
.ucm-foot a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--faint); font-size: 12px; text-decoration: none;
  padding: 8px 14px; border-radius: 999px; border: 1px solid transparent;
  transition: .15s;
}
.ucm-foot a:hover { color: var(--muted); border-color: var(--hairline); background: var(--surface); }
.ucm-foot svg { width: 17px; height: 17px; }
.ucm-foot b { font-weight: 600; color: var(--muted); }


/* ── AMG GOLD TRIM — the contrast frame ───────────────────────────────────────
   Green Hell is the action colour; gold is the pinstripe. A hairline gold rule
   separates the cabin sections and frames the instrument cluster, exactly like
   AMG's Edition-1 / motorsport accent striping. Restrained on purpose — a
   pinstripe, not a paint job. */
.topbar { border-bottom-color: transparent; box-shadow: 0 1px 0 var(--amg-gold), 0 6px 22px rgba(0,0,0,.35); }
/* the instrument binnacle's brightwork: a solid gold rail top + bottom */
.cluster { border-top: 2px solid var(--amg-gold);
           border-bottom: 2px solid var(--amg-gold);
           box-shadow: inset 0 1px 0 color-mix(in srgb, var(--amg-gold) 40%, transparent); }
/* a gold seam runs down the gaps between gauges */
.cluster { gap: 1px; background: color-mix(in srgb, var(--amg-gold) 30%, var(--hairline)); }
/* the UCM home badge + brand mark get a gold hairline so the crest reads as trim */
.ucm-home { border-color: color-mix(in srgb, var(--amg-gold) 45%, var(--hairline)); }
.ucm-home:hover { border-color: var(--amg-gold); color: var(--amg-gold); }
/* wordmark divider tick in gold */
.tagline { border-top: 1px solid color-mix(in srgb, var(--amg-gold) 40%, transparent); padding-top: 4px; display: inline-block; }
/* active tab filament: keep green, but its glow picks up a warm gold edge */
.tabs .tab.active::after { box-shadow: 0 0 10px var(--accent), 0 0 20px color-mix(in srgb, var(--amg-gold) 60%, transparent); }
/* filter/deal chips get a gold hairline when idle so the row has warmth */
.chip { border-color: color-mix(in srgb, var(--amg-gold) 22%, var(--hairline)); }
/* the fetch button — the one loud control — gets a gold ring */
.btn.primary { box-shadow: var(--accent-glow), 0 0 0 1px color-mix(in srgb, var(--amg-gold) 55%, transparent); }


/* ── Salvage -> retail spread panel ───────────────────────────────────────── */
.spread-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.spread-legend .s-salv { color: var(--alert); } .spread-legend .s-retail { color: var(--eco); }
.spread-list { display: flex; flex-direction: column; gap: 16px; }
.spread-row { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; align-items: center; }
.spread-trim { font-weight: 600; font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
.spread-bar { position: relative; height: 8px; border-radius: 5px; grid-column: 2;
  background: linear-gradient(90deg, color-mix(in srgb, var(--alert) 30%, transparent), color-mix(in srgb, var(--eco) 30%, transparent)); }
.spread-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px;
  background: var(--alert); opacity: .55; }
.spread-mark { position: absolute; top: -3px; width: 3px; height: 14px; border-radius: 2px;
  background: var(--text); transform: translateX(-1px); }
.spread-nums { grid-column: 2; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; }
.spread-nums .s-salv { color: var(--alert); font-weight: 700; }
.spread-nums .s-arrow { color: var(--faint); font-size: 11px; }
.spread-nums .s-retail { color: var(--eco); font-weight: 700; }
.spread-nums .s-gap { margin-left: auto; color: var(--text); font-weight: 700; }
.spread-nums .hint { font-family: inherit; }
@media (max-width: 560px) { .spread-row { grid-template-columns: 1fr; } .spread-bar, .spread-nums { grid-column: 1; } }


/* ── Location tab: Tron radar + buying-route clusters ─────────────────────── */
.loc-head { margin: 4px 2px 14px; }
.loc-head h2 { font-size: 17px; }
/* ZIP override — measure the radar from any location */
.zip-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 2px 16px; }
.zip-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); }
.zip-input { width: 108px; padding: 8px 11px; font: inherit; font-size: 15px;
  letter-spacing: .12em; color: var(--text); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 9px; outline: none;
  transition: border-color .15s, box-shadow .15s; }
.zip-input::placeholder { letter-spacing: .04em; color: var(--faint); }
.zip-input:focus { border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(120,120,120,.18)); }
.zip-go { padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; color: var(--accent-ink, #05121a); background: var(--accent);
  border: 1px solid var(--accent); border-radius: 9px;
  transition: filter .15s, transform .05s; }
.zip-go:hover { filter: brightness(1.08); }
.zip-go:active { transform: translateY(1px); }
.zip-reset { padding: 8px 12px; font: inherit; font-size: 13px; cursor: pointer;
  color: var(--muted); background: transparent; border: 1px solid var(--hairline);
  border-radius: 9px; }
.zip-reset:hover { color: var(--text); border-color: var(--hairline-bright, var(--hairline)); }
.radar-wrap { display: flex; justify-content: center; margin-bottom: 18px; }
#radar { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.radar-svg { width: min(88vw, 340px); height: auto; }
.radar-face { fill: rgba(34,224,255,.03); stroke: var(--hairline); stroke-width: 1; }
.radar-ring { fill: none; stroke: color-mix(in srgb, var(--accent) 30%, transparent); stroke-width: 1; stroke-dasharray: 2 4; }
.radar-ring-lbl { fill: var(--faint); font-size: 8px; text-anchor: middle; font-family: "JetBrains Mono", monospace; }
.radar-cross { stroke: color-mix(in srgb, var(--accent) 14%, transparent); stroke-width: 1; }
.radar-home { fill: var(--accent); filter: drop-shadow(0 0 5px var(--accent)); }
.radar-home-lbl { fill: var(--accent); font-size: 7px; text-anchor: middle; letter-spacing: .1em; font-weight: 700; }
.radar-sweep { transform-origin: 50% 50%; animation: sweep 4s linear infinite; }
.radar-sweep path { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
@keyframes sweep { to { transform: rotate(360deg); } }
.radar-dot { cursor: pointer; transition: r .1s; }
.radar-dot.d-retail { fill: var(--accent); }
.radar-dot.d-salv { fill: var(--amber); }
.radar-dot.d-flip { fill: #fff; stroke: var(--accent); stroke-width: 1.5; filter: drop-shadow(0 0 4px var(--accent)); animation: dotPulse 1.6s ease-in-out infinite; }
.radar-dot.approx { opacity: .55; }
.radar-dot:hover { r: 5.5; }
@keyframes dotPulse { 50% { r: 5.5; } }
.radar-legend { display: flex; gap: 14px; font-size: 11px; flex-wrap: wrap; justify-content: center; }
.radar-legend .d-retail { color: var(--accent); } .radar-legend .d-salv { color: var(--amber); } .radar-legend .d-flip { color: var(--text); }
.loc-list { display: flex; flex-direction: column; }
.loc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 8px; border-bottom: 1px solid var(--hairline); cursor: pointer; transition: .12s; }
.loc-row:last-child { border-bottom: none; }
.loc-row:hover { background: var(--surface-2); padding-left: 12px; }
.loc-row.cheapest { background: color-mix(in srgb, var(--eco) 8%, transparent); border-radius: 10px; }
.loc-metro { font-weight: 600; font-size: 14px; }
.cheap-tag { color: var(--eco); font-size: 11px; font-weight: 700; }
.loc-nums { display: flex; align-items: center; gap: 14px; font-family: "JetBrains Mono", monospace; font-size: 13px; }
.loc-med { color: var(--accent); font-weight: 700; }
.loc-dist { color: var(--muted); }
.loc-band { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; letter-spacing: .03em; }
.loc-band.day { color: var(--eco); background: var(--eco-dim); }
.loc-band.on { color: var(--amber); background: var(--amber-dim); }
.loc-band.haul { color: var(--faint); background: var(--surface-2); }

/* recently-new / recently-gone chips + delisted badge (pulse feature) */
.chip-new.active { background: var(--eco-dim); color: var(--eco); border-color: color-mix(in srgb, var(--eco) 45%, transparent); }
.chip-gone.active { background: var(--alert-dim); color: var(--alert); border-color: color-mix(in srgb, var(--alert) 45%, transparent); }
.b-gone { color: var(--alert); background: var(--alert-dim); border-color: color-mix(in srgb, var(--alert) 35%, transparent); font-family: "JetBrains Mono", monospace; }