/* =============================================================================
   Carleeta · Claims Intelligence — Light Design System
   Tokens match the web BRAND.md (source of truth): light, premium, electric-blue
   accent (#2563EB) only — no cyan/teal — on a cool-50 canvas, Satoshi typeface.
   Colour = meaning:  electric blue = accent / LIVE scan / AI detection ·
   risk green/amber/red = verdict (repair / caution / total-loss / fraud).
   Plain CSS, no build. Consumed by app.js + all views.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* — Surfaces (BRAND.md: cool-50 bg, white cards) — */
  --canvas:        #F8FAFC;   /* cool-50 — app background */
  --surface:       #FFFFFF;   /* elevated cards */
  --surface-inset: #F3F4F6;   /* cool-100 — inputs, wells, image backdrops */
  --surface-cool:  #E5E7EB;   /* cool-200 — disabled / cool fills */

  /* — Ink / text (charcoal scale) — */
  --ink:        #0F1720;   /* charcoal-900 — primary text */
  --ink-soft:   #1E293B;   /* charcoal-800 */
  --text:       #0F1720;
  --text-2:     #64748B;   /* charcoal-500 — secondary / muted */
  --text-muted: #64748B;
  --text-faint: #94A3B8;   /* charcoal-400 — tertiary */
  --hairline:   #E5E7EB;   /* charcoal-200 — dividers, card borders */
  --hairline-2: #CBD5E1;   /* charcoal-300 — slightly stronger hairline */

  /* — Primary action = ELECTRIC BLUE (BRAND.md: the single accent) — */
  --action:        #2563EB;   /* electric-600 */
  --action-hover:  #1D4FD8;   /* electric-700 */
  --on-action:     #FFFFFF;

  /* — Live / scan accent → electric blue (brand: no cyan/teal; var name kept) — */
  --teal:        #2563EB;   /* electric-600 */
  --teal-bright: #3B6CF6;   /* electric-500 */
  --teal-soft:   rgba(37,99,235,.10);   /* electric-50-ish */
  --teal-line:   rgba(37,99,235,.22);

  /* — AI / detection → electric blue (brand accent; var name kept) — */
  --spark:       #3B6CF6;   /* electric-500, marginally brighter for detections */
  --spark-soft:  rgba(37,99,235,.10);
  --spark-line:  rgba(37,99,235,.26);

  /* — Verdict / status (BRAND.md risk colours) — */
  --green:       #10B981;  --green-soft:  rgba(16,185,129,.12);  --green-line:  rgba(16,185,129,.26);
  --amber:       #F59E0B;  --amber-soft:  rgba(245,158,11,.14);  --amber-line:  rgba(245,158,11,.30);
  --red:         #EF4444;  --red-soft:    rgba(239,68,68,.12);   --red-line:    rgba(239,68,68,.26);
  --red-deep:    #DC2626;  --red-deep-soft: rgba(220,38,38,.14);

  /* — Number plate — */
  --plate-yellow: #F4C20D;
  --plate-ink:    #111418;

  /* — Shadows (BRAND.md shadow-card / shadow-elev) — */
  --shadow:      0 1px 2px rgba(15,23,32,.04), 0 8px 24px -12px rgba(15,23,32,.08);
  --shadow-lg:   0 4px 12px -2px rgba(15,23,32,.06), 0 16px 40px -16px rgba(15,23,32,.12);
  --shadow-hero: 0 8px 24px -8px rgba(15,23,32,.10), 0 28px 60px -24px rgba(15,23,32,.18);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.6);

  /* — Radii (BRAND.md scale: card lg 16, ctrl md 12, hero xl 24) — */
  --r-hero:  24px;
  --r-card:  16px;
  --r-ctrl:  12px;
  --r-tight: 8px;
  --r-pill:  999px;

  /* — Type (BRAND.md: Satoshi only, via Fontshare CDN in index.html) — */
  --font: "Satoshi", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --num:  "Satoshi", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* — Layout — */
  --sidebar-w: 256px;
  --topbar-h:  68px;
  --maxw:      1320px;

  /* — Motion — */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------------------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--canvas);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
h1 { font-size: 30px; line-height: 1.12; }
h2 { font-size: 21px; line-height: 1.2; }
h3 { font-size: 16px; }
p  { margin: 0; }
a  { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { display: block; max-width: 100%; }

/* tabular/lining numerals for plates, money, VINs, scores, mileage */
.num, .money, .mono, .tnum,
.kpi-value, .plate, .gauge-center, .conf-val, .stat-num {
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-feature-settings: "tnum" 1, "lnum" 1;
          font-feature-settings: "tnum" 1, "lnum" 1;
}
.mono { font-family: var(--num); letter-spacing: .01em; }

::selection { background: var(--spark-soft); }

/* scrollbar — quiet */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #D4D8DE; border-radius: 999px; border: 3px solid var(--canvas); }
::-webkit-scrollbar-thumb:hover { background: #C2C7CF; }

/* ---------------------------------------------------------------------------
   3. APP SHELL
   ------------------------------------------------------------------------- */
#app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* — Sidebar — */
#sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  padding: 22px 16px 18px;
  gap: 4px;
  z-index: 20;
}

.brand {
  display: flex;
  align-items: center;
  padding: 4px 8px 18px;
  margin-bottom: 6px;
}
.brand-lockup { width: 150px; height: auto; }
/* fallback mark + text (when lockup unavailable) */
.brand-mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--ink); color: #fff;
  display: grid; place-items: center; flex: none;
}
.brand-mark svg { width: 22px; height: 22px; }
.brand-text { display: flex; flex-direction: column; margin-left: 11px; line-height: 1.1; }
.brand-name { font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: -.02em; }
.brand-product { font-size: 11px; color: var(--text-2); margin-top: 2px; }

.nav-group { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.nav-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint); padding: 8px 12px 4px;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  border-radius: var(--r-tight);
  color: var(--text-2);
  font-size: 13.5px; font-weight: 550;
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
  position: relative;
}
.nav-item:hover { background: var(--surface-inset); color: var(--ink); }
.nav-item.active { background: var(--ink); color: #fff; }
.nav-item.active .nav-ico { color: #fff; }
.nav-ico { width: 19px; height: 19px; flex: none; color: var(--text-faint); transition: color .16s var(--ease); }
.nav-item:hover .nav-ico { color: var(--ink); }
.nav-item span { flex: 1; }
.nav-badge {
  font-size: 11px; font-weight: 650;
  background: var(--surface-cool); color: var(--text-2);
  border-radius: 999px; padding: 1px 8px; min-width: 22px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.nav-item.active .nav-badge { background: rgba(255,255,255,.18); color: #fff; }
.nav-item.nav-live .nav-ico { color: var(--teal); }
.nav-item.nav-live.active .nav-ico { color: #fff; }
.nav-badge.live { background: var(--teal-soft); color: var(--teal); }
.nav-badge.danger { background: var(--red-soft); color: var(--red); }

.sidebar-foot { margin-top: auto; padding-top: 14px; }

/* Live promo card in sidebar foot */
.live-promo {
  border: 1px solid var(--teal-line);
  background: linear-gradient(160deg, var(--teal-soft), rgba(37,99,235,.02));
  border-radius: var(--r-ctrl);
  padding: 14px;
}
.live-promo .lp-top { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--teal); }
.live-promo .lp-val { font-size: 22px; font-weight: 700; color: var(--ink); margin: 8px 0 2px;
  font-variant-numeric: tabular-nums; }
.live-promo .lp-sub { font-size: 11.5px; color: var(--text-2); line-height: 1.45; }
.live-promo .lp-btn { margin-top: 11px; width: 100%; }

/* — Main column — */
#main { display: flex; flex-direction: column; min-width: 0; }

/* — Topbar — */
#topbar {
  position: sticky; top: 0; z-index: 15;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 28px;
  background: rgba(241,242,244,.82);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.topbar-search {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 0 14px; height: 40px;
  width: 380px; max-width: 42vw;
  box-shadow: var(--shadow);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.topbar-search:focus-within { border-color: var(--spark-line); box-shadow: 0 0 0 4px var(--spark-soft); }
.topbar-search svg { width: 17px; height: 17px; color: var(--text-faint); flex: none; }
.topbar-search input {
  border: 0; outline: 0; background: transparent; flex: 1;
  font-family: inherit; font-size: 13.5px; color: var(--ink);
}
.topbar-search input::placeholder { color: var(--text-faint); }
.topbar-search kbd {
  font-family: var(--num); font-size: 11px; color: var(--text-2);
  background: var(--surface-inset); border: 1px solid var(--hairline);
  border-radius: 6px; padding: 2px 6px;
}
.topbar-spacer { flex: 1; }

.env-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  color: var(--amber);
  background: var(--amber-soft);
  border: 1px solid var(--amber-line);
  border-radius: var(--r-pill); padding: 5px 11px;
}
.env-chip .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--amber); }

.topbar-icon-btn {
  position: relative; width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--hairline);
  color: var(--text-2); cursor: pointer;
  box-shadow: var(--shadow);
  transition: color .16s var(--ease), transform .16s var(--ease);
}
.topbar-icon-btn:hover { color: var(--ink); transform: translateY(-1px); }
.topbar-icon-btn svg { width: 18px; height: 18px; }
.topbar-icon-btn .badge-dot {
  position: absolute; top: 9px; right: 10px; width: 7px; height: 7px;
  border-radius: 999px; background: var(--red); border: 2px solid var(--surface);
}

.topbar-user { display: flex; align-items: center; gap: 10px; padding-left: 4px; }
.avatar {
  width: 38px; height: 38px; border-radius: 999px; flex: none;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  font-weight: 650; font-size: 13px; letter-spacing: .02em;
  box-shadow: var(--shadow);
}
.topbar-user .who { line-height: 1.2; }
.topbar-user .nm { font-size: 13px; font-weight: 600; color: var(--ink); }
.topbar-user .rl { font-size: 11px; color: var(--text-2); }

/* — Content — */
#content {
  flex: 1;
  padding: 28px;
  overflow-x: hidden;
}

/* Persistent modelled-data disclaimer — slim bar under every view.
   Caption-size charcoal-500 on the cool-50 canvas, with a hairline top border. */
#demo-disclaimer {
  flex: none;
  padding: 11px 28px;
  background: var(--canvas);
  border-top: 1px solid var(--hairline);
  color: var(--text-2);
  font-size: 11.5px;
  line-height: 1.4;
  letter-spacing: .01em;
  text-align: center;
}

.page { max-width: var(--maxw); margin: 0 auto; }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 22px;
}
.page-head-actions { display: flex; align-items: center; gap: 10px; }
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 7px;
}
.page-head .sub { color: var(--text-2); font-size: 14px; margin-top: 7px; max-width: 64ch; }

/* ---------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   ------------------------------------------------------------------------- */
.grid { display: grid; gap: 18px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 10px; }
.gap-3 { gap: 14px; }
.fill { flex: 1; }
.muted { color: var(--text-2); }
.mt-2 { margin-top: 10px; } .mt-3 { margin-top: 14px; } .mt-4 { margin-top: 20px; }
.mb-3 { margin-bottom: 14px; }

@media (max-width: 1100px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   5. CARD
   ------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.card-pad { padding: 22px; }
.card-hd {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--hairline);
}
.card-hd-ico {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: var(--surface-inset); color: var(--text-2);
}
.card-hd-ico svg { width: 19px; height: 19px; }
.card-hd h3 { font-size: 15px; }
.card-hd .hd-sub { font-size: 12px; color: var(--text-2); margin-top: 1px; }
.card-title-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint);
}
.display { font-weight: 700; letter-spacing: -.025em; color: var(--ink); }

.divider { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* ---------------------------------------------------------------------------
   6. KPI TILES
   ------------------------------------------------------------------------- */
.kpi {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
  display: flex; flex-direction: column;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kpi-ico {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: var(--surface-inset); color: var(--text-2);
}
.kpi-ico svg { width: 20px; height: 20px; }
.kpi-label { font-size: 12.5px; color: var(--text-2); font-weight: 550; }
.kpi-value { font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -.025em; line-height: 1.05; margin: 2px 0; }
.kpi-foot { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.kpi-sub { font-size: 12px; color: var(--text-faint); }
.kpi-trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 650;
  padding: 2px 7px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.kpi-trend svg { width: 12px; height: 12px; }
.kpi-trend.up   { color: var(--green); background: var(--green-soft); }
.kpi-trend.down { color: var(--red);   background: var(--red-soft); }
.kpi-trend.flat { color: var(--text-2); background: var(--surface-inset); }
/* tone accents on the icon chip */
.kpi.tone-live .kpi-ico    { background: var(--teal-soft);  color: var(--teal); }
.kpi.tone-info .kpi-ico,
.kpi.tone-spark .kpi-ico   { background: var(--spark-soft); color: var(--spark); }
.kpi.tone-repair .kpi-ico  { background: var(--green-soft); color: var(--green); }
.kpi.tone-caution .kpi-ico { background: var(--amber-soft); color: var(--amber); }
.kpi.tone-total .kpi-ico   { background: var(--red-soft);   color: var(--red); }

/* ---------------------------------------------------------------------------
   7. BADGES (light pills) — colour = meaning
   ------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .005em;
  padding: 4px 10px; border-radius: var(--r-pill);
  white-space: nowrap; line-height: 1.3;
  border: 1px solid transparent;
}
.badge .bdot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.badge svg { width: 13px; height: 13px; }

.badge.neutral    { color: var(--text-2); background: var(--surface-inset); border-color: var(--hairline); }
.badge.repair     { color: var(--green); background: var(--green-soft); border-color: var(--green-line); }
.badge.caution    { color: var(--amber); background: var(--amber-soft); border-color: var(--amber-line); }
.badge.total      { color: var(--red);   background: var(--red-soft);   border-color: var(--red-line); }
.badge.total-deep { color: #fff; background: var(--red-deep); border-color: var(--red-deep); }
.badge.fraud      { color: var(--red-deep); background: var(--red-deep-soft); border-color: var(--red-line); }
.badge.spark      { color: var(--spark); background: var(--spark-soft); border-color: var(--spark-line); }
.badge.live       { color: var(--teal);  background: var(--teal-soft);  border-color: var(--teal-line); }

/* live badge with pulsing dot */
.badge.live .live-dot { background: var(--teal); }

/* severity chips for damage areas */
.dmg-sev-chip {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.dmg-sev-chip.light    { color: var(--green); background: var(--green-soft); }
.dmg-sev-chip.moderate { color: var(--amber); background: var(--amber-soft); }
.dmg-sev-chip.heavy    { color: var(--red);   background: var(--red-soft); }
.dmg-sev-chip.severe   { color: #fff;          background: var(--red-deep); }

/* ---------------------------------------------------------------------------
   8. UK NUMBER PLATE
   ------------------------------------------------------------------------- */
.plate {
  display: inline-flex; align-items: center;
  background: var(--plate-yellow);
  color: var(--plate-ink);
  font-weight: 800; font-size: 14px; letter-spacing: .06em;
  padding: 4px 11px 4px 9px;
  border-radius: 6px;
  border: 1px solid #D7A906;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(14,17,22,.12);
  position: relative;
  font-family: var(--num);
  white-space: nowrap;
}
.plate::before {
  content: "GB";
  display: inline-flex; align-items: center; justify-content: center;
  align-self: stretch;
  background: #1B3FB0; color: #fff;
  font-size: 8px; font-weight: 700; letter-spacing: .02em;
  padding: 0 4px; margin: -4px 9px -4px -9px;
  border-radius: 5px 0 0 5px;
}
.plate.sm { font-size: 12px; padding: 3px 8px 3px 7px; }
.plate.sm::before { font-size: 7px; margin: -3px 7px -3px -7px; }
.plate.lg { font-size: 18px; padding: 6px 14px 6px 11px; }
.plate.lg::before { font-size: 9px; margin: -6px 11px -6px -11px; }

/* ---------------------------------------------------------------------------
   9. DATA TABLE
   ------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.data {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13px;
}
table.data thead th {
  text-align: left; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-faint);
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
table.data tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--hairline);
  color: var(--text); vertical-align: middle;
}
table.data tbody tr { transition: background .14s var(--ease), box-shadow .14s var(--ease); cursor: pointer; }
table.data tbody tr:hover td { background: var(--surface-inset); }
table.data tbody tr:hover {
  box-shadow: var(--shadow);
  transform: translateZ(0);
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.t-vehicle { display: flex; align-items: center; gap: 11px; }
.t-thumb {
  width: 58px; height: 40px; flex: none;
  border-radius: 9px; background: var(--surface-inset);
  border: 1px solid var(--hairline);
  display: grid; place-items: center; overflow: hidden;
}
.t-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.t-name { font-weight: 600; color: var(--ink); }
.t-meta { font-size: 11.5px; color: var(--text-2); }
.t-ref { font-family: var(--num); font-size: 12px; color: var(--text-2); white-space: nowrap; }

/* ratio meter inline in table */
.ratio-cell { display: flex; align-items: center; gap: 9px; min-width: 120px; }
.ratio-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-cool); overflow: hidden; }
.ratio-bar > span { display: block; height: 100%; border-radius: 999px; }
.ratio-bar > span.repair  { background: var(--green); }
.ratio-bar > span.caution { background: var(--amber); }
.ratio-bar > span.total   { background: var(--red); }
.ratio-val { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12.5px; min-width: 38px; text-align: right; }

/* ---------------------------------------------------------------------------
   10. BUTTONS
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 0 16px; height: 40px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .14s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--action); color: var(--on-action); box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--action-hover); box-shadow: var(--shadow-lg); }

.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--hairline); box-shadow: var(--shadow); }
.btn-ghost:hover { background: var(--surface-inset); border-color: var(--hairline-2); }

.btn-live { background: var(--teal); color: #fff; box-shadow: 0 8px 24px rgba(37,99,235,.22); }
.btn-live:hover { background: var(--teal-bright); }

.btn-danger { background: var(--red); color: #fff; box-shadow: 0 8px 24px rgba(220,38,38,.20); }
.btn-danger:hover { background: var(--red-deep); }

.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.btn-sm svg { width: 15px; height: 15px; }
.btn-block { width: 100%; }

.back-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 550; color: var(--text-2);
  cursor: pointer; margin-bottom: 16px;
  transition: color .14s var(--ease), gap .14s var(--ease);
}
.back-link:hover { color: var(--ink); gap: 9px; }
.back-link svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------------------
   11. LIVE-DOT (pulsing) + live wordmark
   ------------------------------------------------------------------------- */
.live-dot {
  width: 8px; height: 8px; border-radius: 999px; flex: none;
  background: var(--teal);
  position: relative;
}
.live-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 999px;
  border: 2px solid var(--teal);
  animation: live-pulse 1.6s var(--ease-out) infinite;
}
@keyframes live-pulse {
  0%   { transform: scale(.6); opacity: .85; }
  100% { transform: scale(2.1); opacity: 0; }
}
.live-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--teal);
  background: var(--teal-soft); border: 1px solid var(--teal-line);
  padding: 5px 11px; border-radius: var(--r-pill);
}

/* ---------------------------------------------------------------------------
   12. LIVE SCAN — device / scan stage frame
   ------------------------------------------------------------------------- */
.scan-stage {
  position: relative;
  border-radius: var(--r-hero);
  background:
    radial-gradient(120% 90% at 50% 0%, #FBFCFD 0%, var(--surface-inset) 60%, #EDEFF3 100%);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg), var(--shadow-inset);
  overflow: hidden;
  aspect-ratio: 16 / 11;
}
.scan-stage.tall { aspect-ratio: 3 / 4; }
.scan-stage-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 7% 9%;
  z-index: 1;
  filter: drop-shadow(0 22px 30px rgba(14,17,22,.18));
}

/* top status bar inside the stage */
.scan-hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(241,242,244,.9), rgba(241,242,244,0));
}
.scan-hud-r { display: flex; align-items: center; gap: 8px; }
.scan-rec {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: var(--teal); background: rgba(255,255,255,.85);
  border: 1px solid var(--teal-line);
  padding: 5px 10px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.scan-rec .rec-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--red);
  animation: rec-blink 1.2s steps(2, jump-none) infinite; }
@keyframes rec-blink { 50% { opacity: .25; } }
.scan-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 650;
  background: rgba(255,255,255,.85); border: 1px solid var(--hairline);
  color: var(--text); padding: 5px 10px; border-radius: 999px;
  backdrop-filter: blur(6px); font-variant-numeric: tabular-nums;
}
.scan-chip svg { width: 13px; height: 13px; color: var(--text-2); }

/* sweeping reticle */
.scan-reticle { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.scan-reticle .sweep {
  position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(90deg, transparent, var(--spark-soft) 45%, rgba(37,99,235,.28) 50%, var(--spark-soft) 55%, transparent);
  animation: reticle-sweep 3.2s var(--ease) infinite;
  mix-blend-mode: multiply;
  transition: opacity .5s var(--ease);
}
.scan-reticle .scanline {
  position: absolute; left: 5%; right: 5%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--spark), transparent);
  box-shadow: 0 0 12px rgba(37,99,235,.5);
  animation: scanline-move 3.2s var(--ease) infinite;
  transition: opacity .5s var(--ease);
}
@keyframes reticle-sweep { 0% { left: -40%; } 100% { left: 100%; } }
@keyframes scanline-move { 0% { top: 10%; } 50% { top: 90%; } 100% { top: 10%; } }
/* corner brackets */
.scan-bracket { position: absolute; width: 26px; height: 26px; border: 2px solid var(--spark-line); z-index: 5; }
.scan-bracket.tl { top: 16px; left: 16px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.scan-bracket.tr { top: 16px; right: 16px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.scan-bracket.bl { bottom: 16px; left: 16px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.scan-bracket.br { bottom: 16px; right: 16px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }

/* detection boxes over the hero image (x/y are % positions) */
.detect-box {
  position: absolute; z-index: 7;
  width: 64px; height: 52px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--spark);
  border-radius: 7px;
  background: var(--spark-soft);
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
  animation: detect-pop .45s var(--ease-out) both;
}
.detect-box .db-label {
  position: absolute; top: var(--lbl-dy, -10px); left: -2px; transform: translateY(-100%);
  display: inline-flex; align-items: center; gap: 6px; z-index: 2;
  background: var(--surface); border: 1px solid var(--spark-line);
  color: var(--ink); font-size: 10.5px; font-weight: 650;
  padding: 3px 8px; border-radius: 7px; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(14,17,22,.18);
}
.detect-box .db-conf { color: var(--spark); font-variant-numeric: tabular-nums; }
.detect-box.light    { border-color: var(--green); background: var(--green-soft); }
.detect-box.light .db-label    { border-color: var(--green-line); }
.detect-box.light .db-conf     { color: var(--green); }
.detect-box.moderate { border-color: var(--amber); background: var(--amber-soft); }
.detect-box.moderate .db-label { border-color: var(--amber-line); }
.detect-box.moderate .db-conf  { color: var(--amber); }
.detect-box.heavy    { border-color: var(--red); background: var(--red-soft); }
.detect-box.heavy .db-label    { border-color: var(--red-line); }
.detect-box.heavy .db-conf     { color: var(--red); }
.detect-box.severe   { border-color: var(--red-deep); background: var(--red-deep-soft); }
.detect-box.severe .db-label   { border-color: var(--red-line); }
.detect-box.severe .db-conf    { color: var(--red-deep); }
@keyframes detect-pop {
  from { opacity: 0; transform: translate(-50%,-50%) scale(.7); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

/* ---------------------------------------------------------------------------
   13. LIVE SCAN — stage stepper
   ------------------------------------------------------------------------- */
.stage-stepper { display: flex; align-items: stretch; gap: 8px; }
.stage-step {
  flex: 1; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 12px 11px;
  border-radius: var(--r-tight);
  background: var(--surface-inset); border: 1px solid var(--hairline);
  transition: all .2s var(--ease);
}
.stage-step .ss-head { display: flex; align-items: center; justify-content: space-between; }
.stage-step .ss-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.stage-step .ss-cap { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.stage-step .ss-bar { height: 4px; border-radius: 999px; background: var(--surface-cool); overflow: hidden; }
.stage-step .ss-bar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--teal);
  transition: width .5s var(--ease); }
.stage-step .ss-ico {
  width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; flex: none;
  background: var(--surface-cool); color: var(--text-faint);
}
.stage-step .ss-ico svg { width: 13px; height: 13px; }
.stage-step.done   { background: var(--teal-soft); border-color: var(--teal-line); }
.stage-step.done   .ss-label { color: var(--teal); }
.stage-step.done   .ss-ico { background: var(--teal); color: #fff; }
.stage-step.done   .ss-bar > span { width: 100%; }
.stage-step.active { background: var(--surface); border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.stage-step.active .ss-label { color: var(--ink); }
.stage-step.active .ss-ico { background: var(--teal); color: #fff; }
.stage-step.active .ss-bar > span { width: 60%; animation: ss-fill 1.6s var(--ease) infinite alternate; }
@keyframes ss-fill { from { width: 35%; } to { width: 75%; } }

/* ---------------------------------------------------------------------------
   14. LIVE SCAN — streaming transcript
   ------------------------------------------------------------------------- */
.transcript { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.ts-row { display: flex; gap: 11px; align-items: flex-start; animation: ts-in .4s var(--ease-out) both; }
@keyframes ts-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ts-ico {
  width: 30px; height: 30px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
}
.ts-ico svg { width: 16px; height: 16px; }
.ts-body { flex: 1; padding-top: 2px; }
.ts-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.ts-who { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ts-at { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ts-text { font-size: 13.5px; color: var(--text); line-height: 1.5; }

/* AI guidance line */
.ts-row.ai .ts-ico { background: var(--spark-soft); color: var(--spark); }
.ts-row.ai .ts-who { color: var(--spark); }
/* system line */
.ts-row.system .ts-ico { background: var(--surface-inset); color: var(--text-2); }
.ts-row.system .ts-who { color: var(--text-2); }
.ts-row.system .ts-text { color: var(--text-2); }
/* finding (⚠ detected) line — coloured by severity */
.ts-row.finding .ts-body {
  background: var(--surface-inset); border: 1px solid var(--hairline);
  border-radius: var(--r-tight); padding: 9px 12px;
}
.ts-row.finding .ts-who { color: var(--amber); }
.ts-row.finding.light    .ts-ico  { background: var(--green-soft); color: var(--green); }
.ts-row.finding.light    .ts-who  { color: var(--green); }
.ts-row.finding.light    .ts-body { border-color: var(--green-line); }
.ts-row.finding.moderate .ts-ico  { background: var(--amber-soft); color: var(--amber); }
.ts-row.finding.moderate .ts-who  { color: var(--amber); }
.ts-row.finding.moderate .ts-body { border-color: var(--amber-line); }
.ts-row.finding.heavy    .ts-ico  { background: var(--red-soft); color: var(--red); }
.ts-row.finding.heavy    .ts-who  { color: var(--red); }
.ts-row.finding.heavy    .ts-body { border-color: var(--red-line); }
.ts-row.finding.severe   .ts-ico  { background: var(--red-deep); color: #fff; }
.ts-row.finding.severe   .ts-who  { color: var(--red-deep); }
.ts-row.finding.severe   .ts-body { border-color: var(--red-line); }
/* compile line */
.ts-row.compile .ts-ico  { background: var(--ink); color: #fff; }
.ts-row.compile .ts-who  { color: var(--ink); }
.ts-row.compile .ts-body { background: var(--ink); border-radius: var(--r-tight); padding: 10px 13px; }
.ts-row.compile .ts-text { color: #fff; }
.ts-row.compile .ts-at   { color: rgba(255,255,255,.55); }

/* ---------------------------------------------------------------------------
   15. WRITE-OFF GAUGE (semicircle, light)
   ------------------------------------------------------------------------- */
.gauge-wrap { display: flex; flex-direction: column; align-items: center; }
.gauge { position: relative; width: 100%; max-width: 280px; }
.gauge svg { width: 100%; height: auto; display: block; overflow: visible; }
.gauge-track { fill: none; stroke: var(--surface-cool); stroke-linecap: round; }
.gauge-fill  { fill: none; stroke-linecap: round;
  transition: stroke-dashoffset 1s var(--ease), stroke .4s var(--ease); }
.gauge-fill.repair  { stroke: var(--green); }
.gauge-fill.caution { stroke: var(--amber); }
.gauge-fill.total   { stroke: var(--red); }
.gauge-fill.total-deep { stroke: var(--red-deep); }
.gauge-threshold { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 3; opacity: .55; }
.gauge-center {
  position: absolute; left: 0; right: 0; bottom: 6%;
  text-align: center;
}
.gauge-center .g-val { font-size: 40px; font-weight: 700; letter-spacing: -.03em; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums; line-height: 1; }
.gauge-center .g-lbl { font-size: 12px; color: var(--text-2); margin-top: 4px; }
.gauge-scale { display: flex; justify-content: space-between; width: 100%; max-width: 280px;
  font-size: 11px; color: var(--text-faint); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   16. BIRDSEYE DAMAGE MAP — car-zone hotspots
   ------------------------------------------------------------------------- */
.damage-map {
  position: relative;
  background: var(--surface-inset);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 16px;
  overflow: hidden;
  text-align: center;
}
.damage-map-inner { position: relative; display: inline-block; margin: 0 auto; }
.damage-map-img {
  display: block;
  max-height: 460px; width: auto; object-fit: contain;
}
.hotspot {
  position: absolute; transform: translate(-50%, -50%); z-index: 3;
  width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 11px; font-weight: 700; color: #fff;
  border: 2px solid var(--surface);
  box-shadow: var(--shadow);
}
.hotspot::after {
  content: ""; position: absolute; inset: -6px; border-radius: 999px;
  border: 2px solid currentColor; opacity: .5;
  animation: hot-pulse 2s var(--ease-out) infinite;
}
@keyframes hot-pulse { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(1.8); opacity: 0; } }
.hotspot.light    { background: var(--green); }
.hotspot.moderate { background: var(--amber); }
.hotspot.heavy    { background: var(--red); }
.hotspot.severe   { background: var(--red-deep); }
.hotspot:hover .hotspot-tip { opacity: 1; transform: translate(-50%, -8px); pointer-events: auto; }
.hotspot-tip {
  position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, 0);
  opacity: 0; pointer-events: none; transition: all .16s var(--ease);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 8px 11px; box-shadow: var(--shadow-lg);
  width: 184px; z-index: 9; text-align: left;
}
.hotspot-tip .ht-zone { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.hotspot-tip .ht-note { font-size: 11.5px; color: var(--text-2); line-height: 1.4; }

/* ---------------------------------------------------------------------------
   17. ASSESSMENT — damage rows, confidence, flags, line items
   ------------------------------------------------------------------------- */
.dmg-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--hairline); }
.dmg-row:last-child { border-bottom: 0; }
.dmg-zone { width: 4px; align-self: stretch; border-radius: 999px; flex: none; }
.dmg-zone.light { background: var(--green); } .dmg-zone.moderate { background: var(--amber); }
.dmg-zone.heavy { background: var(--red); } .dmg-zone.severe { background: var(--red-deep); }
.dmg-main { flex: 1; }
.dmg-zone-name { font-weight: 600; color: var(--ink); font-size: 13.5px; }
.dmg-note { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.dmg-parts { margin-top: 7px; display: flex; flex-direction: column; gap: 3px; }
.dmg-part { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); }
.dmg-part .pcost { font-variant-numeric: tabular-nums; color: var(--text); }
.dmg-cost { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink); white-space: nowrap; }

.conf { display: flex; align-items: center; gap: 10px; }
.conf-bar { flex: 1; height: 7px; border-radius: 999px; background: var(--surface-cool); overflow: hidden; }
.conf-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--spark);
  transition: width .8s var(--ease); }
.conf-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--spark); font-size: 14px; }

.flag-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.flag-row:last-child { border-bottom: 0; }
.flag-ico { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: var(--surface-inset); color: var(--text-2); }
.flag-ico svg { width: 16px; height: 16px; }
.flag-ico.ok   { background: var(--green-soft); color: var(--green); }
.flag-ico.bad  { background: var(--red-soft); color: var(--red); }
.flag-ico.warn { background: var(--amber-soft); color: var(--amber); }
.flag-main { flex: 1; }
.flag-k { font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
.flag-v { font-size: 13px; color: var(--ink); margin-top: 1px; }

.lineitems { display: flex; flex-direction: column; }
.lineitem { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.lineitem:last-child { border-bottom: 0; }
.lineitem .li-k { color: var(--text-2); font-size: 13px; }
.lineitem .li-v { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.lineitem.total { border-top: 2px solid var(--ink); border-bottom: 0; padding-top: 13px; margin-top: 3px; }
.lineitem.total .li-k { color: var(--ink); font-weight: 650; }
.lineitem.total .li-v { font-size: 18px; }

.money { font-variant-numeric: tabular-nums lining-nums; }

/* mini stats strip */
.mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--hairline);
  border-radius: var(--r-tight); overflow: hidden; }
.mini-stat { background: var(--surface); padding: 13px 14px; }
.mini-stat .stat-num { font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.mini-stat .stat-lbl { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }

/* recommendation banner */
.reco {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px 18px; border-radius: var(--r-ctrl);
  border: 1px solid var(--hairline);
}
.reco .reco-ico { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; }
.reco .reco-ico svg { width: 19px; height: 19px; }
.reco .reco-body { flex: 1; }
.reco .reco-title { font-weight: 700; color: var(--ink); font-size: 14px; }
.reco .reco-text { font-size: 13px; color: var(--text-2); margin-top: 3px; line-height: 1.5; }
.reco.repair  { background: var(--green-soft); border-color: var(--green-line); }
.reco.repair  .reco-ico { background: var(--green); color: #fff; }
.reco.caution { background: var(--amber-soft); border-color: var(--amber-line); }
.reco.caution .reco-ico { background: var(--amber); color: #fff; }
.reco.total   { background: var(--red-soft); border-color: var(--red-line); }
.reco.total   .reco-ico { background: var(--red); color: #fff; }
.reco.fraud   { background: var(--red-deep-soft); border-color: var(--red-line); }
.reco.fraud   .reco-ico { background: var(--red-deep); color: #fff; }

/* rationale list */
.rationale { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rationale li { display: flex; gap: 10px; font-size: 13px; color: var(--text); line-height: 1.5; }
.rationale li::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--text-faint);
  margin-top: 7px; flex: none; }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 16px 26px; }
.timeline li::before {
  content: ""; position: absolute; left: 5px; top: 4px; width: 9px; height: 9px; border-radius: 999px;
  background: var(--surface); border: 2px solid var(--hairline-2); z-index: 1;
}
.timeline li::after {
  content: ""; position: absolute; left: 9px; top: 13px; bottom: -3px; width: 1px; background: var(--hairline);
}
.timeline li:last-child::after { display: none; }
.timeline li.done::before { background: var(--teal); border-color: var(--teal); }
.timeline li.active::before { background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 4px rgba(14,17,22,.08); }
.timeline .tl-time { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.timeline .tl-label { font-size: 13px; color: var(--ink); margin-top: 1px; }

/* hero vehicle card */
.veh-hero {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #FFFFFF, var(--surface-inset) 70%, #EBEDF1);
  border: 1px solid var(--hairline); box-shadow: var(--shadow);
}
.veh-hero img { width: 100%; height: 100%; object-fit: contain; padding: 18px 22px;
  filter: drop-shadow(0 18px 26px rgba(14,17,22,.16)); }

/* ---------------------------------------------------------------------------
   18. CHARTS (inline SVG helpers)
   ------------------------------------------------------------------------- */
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.chart-legend .lg { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); }
.chart-legend .lg .sw { width: 10px; height: 10px; border-radius: 3px; }
.spark-area { fill: var(--spark-soft); }
.spark-line { fill: none; stroke: var(--spark); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.bar-repair { fill: var(--green); } .bar-total { fill: var(--red); } .bar-caution { fill: var(--amber); }
.grid-line { stroke: var(--hairline); stroke-width: 1; }
.axis-label { fill: var(--text-faint); font-size: 10px; }

/* ---------------------------------------------------------------------------
   19. MISC STATES
   ------------------------------------------------------------------------- */
.empty { text-align: center; color: var(--text-2); padding: 48px 20px; }
.empty svg { width: 40px; height: 40px; color: var(--text-faint); margin: 0 auto 12px; }
.pill-filter {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 550; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-pill); padding: 6px 13px; cursor: pointer;
  box-shadow: var(--shadow); transition: all .14s var(--ease);
}
.pill-filter:hover { color: var(--ink); }
.pill-filter.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* car diagram (legacy/side-on schematic, kept light) */
.car-diagram { position: relative; }
.car-outline { fill: var(--surface-inset); stroke: var(--hairline-2); stroke-width: 1.5; }
.car-glass { fill: #fff; stroke: var(--hairline-2); }
.car-panel { transition: fill .2s var(--ease); cursor: pointer; }
.car-panel.light { fill: var(--green-soft); } .car-panel.moderate { fill: var(--amber-soft); }
.car-panel.heavy { fill: var(--red-soft); } .car-panel.severe { fill: var(--red-deep-soft); }
.car-label { font-size: 10px; fill: var(--text-2); }
.car-legend { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   20. PAGE-LOAD STAGGER
   ------------------------------------------------------------------------- */
#content.fade { animation: page-fade .32s var(--ease-out) both; }
@keyframes page-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.stagger > * { animation: stagger-in .42s var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .07s; }
.stagger > *:nth-child(3) { animation-delay: .12s; }
.stagger > *:nth-child(4) { animation-delay: .17s; }
.stagger > *:nth-child(5) { animation-delay: .22s; }
.stagger > *:nth-child(6) { animation-delay: .27s; }
.stagger > *:nth-child(7) { animation-delay: .32s; }
.stagger > *:nth-child(8) { animation-delay: .37s; }
@keyframes stagger-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

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

/* ---------------------------------------------------------------------------
   21. RESPONSIVE SHELL
   ------------------------------------------------------------------------- */
@media (max-width: 920px) {
  #app { grid-template-columns: 1fr; }
  #sidebar { display: none; }
  #content { padding: 18px; }
  .topbar-search { width: 100%; max-width: none; }
}