/* =========================================================================
   Carbase base stylesheet. Served from /static so browsers cache it across
   pages (it was previously inlined into every HTML response). Bump the ?v=
   query in base.html <link> by touching this file — main.py derives the
   version from its mtime.
   ========================================================================= */

/* Inter, self-hosted (offline). One variable woff2 per subset covers 400–700. */
@font-face {
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/static/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/static/fonts/inter-greek.woff2") format("woff2");
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
:root {
  /* neutral data tool: zinc surfaces, one emerald accent (matches the design ref) */
  --bg:#fafafa; --surface:#ffffff; --surface-2:#f4f4f5; --surface-3:#efeff1;
  --line:rgba(0,0,0,.07); --line-strong:rgba(0,0,0,.13);
  --txt:#18181b; --muted:#71717a; --faint:#a1a1aa;
  --ink:#18181b; --ink-hover:#27272a; --on-ink:#fafafa;
  --accent:#047857; --accent-soft:#ecfdf5; --accent-line:#a7f3d0;
  --good:#047857; --good-soft:#ecfdf5; --good-line:#a7f3d0;
  --warn:#b45309; --warn-soft:#fffbeb; --warn-line:#fde68a;
  --bad:#be123c; --bad-soft:#fff1f2; --bad-line:#fecdd3;
  --radius:10px; --radius-sm:6px; --radius-xl:14px;
  --maxw:1280px;
  --header-h:56px; --ctl-h:34px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow-card:0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --ring:0 0 0 2px rgba(4,120,87,.30);
}
* { box-sizing:border-box; }
/* The UA's [hidden]{display:none} loses to any author display:flex/grid on the
   same element — which kept "hidden" UI visible (compare tray, Saved-0 badge,
   saved-searches strip, Clear-all button). Enforce it. */
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; color:var(--txt); background:var(--bg);
  font:13.5px/1.5 "Inter",ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"cv11","ss01","ss03";
  min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* column flex so the footer sits at the viewport bottom on short pages */
  display:flex; flex-direction:column;
}
::selection { background:#bbf7d0; color:#064e3b; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { letter-spacing:-.01em; }
h3 { font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  font-weight:700; margin:0 0 12px; }
svg.ic { width:1em; height:1em; stroke:currentColor; fill:none;
  stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;
  vertical-align:-.14em; flex:0 0 auto; }

/* ---- header (brand+nav left, admin pill right, centered max-width) ---- */
header {
  position:sticky; top:0; z-index:30;
  height:var(--header-h);
  background:rgba(250,250,250,.85);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.hinner { max-width:var(--maxw); margin:0 auto; height:100%; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; }
.hleft { display:flex; align-items:center; gap:30px; min-width:0; }
.hright { display:flex; align-items:center; gap:12px; }
.brand { display:inline-flex; align-items:center; font-weight:600;
  font-size:14px; color:var(--txt); letter-spacing:.04em; text-transform:uppercase; }
.brand:hover { text-decoration:none; }
.topnav { display:flex; gap:24px; align-items:center; }
.navlink { display:inline-flex; align-items:center; font-size:13.5px; font-weight:500;
  color:var(--muted); letter-spacing:-.01em; }
.navlink:hover { color:var(--txt); text-decoration:none; }
.navlink.on { color:var(--txt); font-weight:600; }
.adminpill { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px;
  border-radius:var(--radius-sm); background:rgba(24,24,27,.05); color:var(--txt);
  font-size:13px; font-weight:500; }
.adminpill:hover { background:rgba(24,24,27,.10); text-decoration:none; }
.adminpill.on { background:rgba(24,24,27,.10); }
.adminpill .dot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex:0 0 auto; }

/* ---- footer ---- */
.site-footer { border-top:1px solid var(--line); margin-top:40px; }
.finner { max-width:var(--maxw); margin:0 auto; padding:40px 24px;
  display:flex; flex-direction:column; gap:18px; align-items:center; justify-content:space-between; }
@media (min-width:768px){ .finner { flex-direction:row; } }
.fnote { margin:0; font-size:12px; color:var(--faint); max-width:60ch; }
.flinks { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 24px; }
.flinks a { font-size:12px; font-weight:500; color:var(--muted); }
.flinks a:hover { color:var(--txt); }

/* segmented control — mutually-exclusive view/scope toggle (≤5 options) */
.seg { display:inline-flex; align-self:center; background:var(--surface-3);
  border:1px solid var(--line); border-radius:var(--radius); padding:3px; gap:2px; }
.seg button, .seg a { display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:none; color:var(--muted); cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:500; padding:5px 12px; border-radius:var(--radius-sm);
  transition:background .12s,color .12s,box-shadow .12s; }
.seg button:hover, .seg a:hover { color:var(--txt); text-decoration:none; }
.seg button.on, .seg a.on { background:var(--surface); color:var(--txt); font-weight:600; box-shadow:var(--shadow-sm); }

.wrap { padding:48px 24px; max-width:var(--maxw); margin:0 auto; width:100%; flex:1 0 auto; }
@media (max-width:640px){ .wrap { padding:24px 16px; } }

/* ---- surfaces ---- */
.panel { background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; margin-bottom:16px;
  box-shadow:var(--shadow-sm); }

/* ---- collapsible filter panel (native <details>, no JS) ----
   Open by default on desktop; the summary row doubles as a header with a
   live count of active filters and a chevron that rotates when open. */
.fpanel { padding:0; overflow:hidden; }
.fpanel > summary { list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.fpanel > summary::-webkit-details-marker { display:none; }
.fpanel > summary:hover { color:var(--txt); }
.fpanel > summary .chev { transition:transform .15s; color:var(--faint); margin-left:auto; }
.fpanel[open] > summary .chev { transform:rotate(180deg); }
.fpanel > summary .fcount { font-size:11px; font-weight:700; color:var(--accent);
  background:var(--accent-soft); border-radius:999px; padding:1px 8px; letter-spacing:0; }
.fpanel .fbody { padding:4px 16px 16px; border-top:1px solid var(--line); }

/* grouped filter grid: each .fgroup is a labeled cluster of related fields */
.fgrid { display:grid; gap:14px 18px; align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.fgroup { display:flex; flex-direction:column; gap:6px; min-width:0; }
.fgroup.span2 { grid-column:span 2; }
.fgroup > .gt { font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--faint); }

/* active-filter summary: removable chips reflecting the applied query */
.activef { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.fchip { display:inline-flex; align-items:center; gap:6px; padding:3px 6px 3px 10px;
  border:1px solid var(--line-strong); border-radius:999px; background:var(--surface);
  font-size:12px; color:var(--txt); white-space:nowrap; }
.fchip .k { color:var(--faint); }
.fchip a.rm { display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; color:var(--faint); background:var(--surface-3); }
.fchip a.rm:hover { color:var(--on-ink); background:var(--bad); text-decoration:none; }

.muted { color:var(--muted); }
.faint { color:var(--faint); }
.num { font-variant-numeric:tabular-nums; }
.miss { color:var(--faint); }
.implausible { color:var(--warn); }
.implausible-tag { display:inline-flex; align-items:center; gap:3px;
  color:var(--warn); font-size:11px; }

/* ---- tags ---- */
.tag { display:inline-flex; align-items:center; gap:4px;
  padding:1px 7px; border-radius:var(--radius-sm); font-size:11px; font-weight:600;
  border:1px solid var(--line); color:var(--muted); background:var(--surface-2);
  text-transform:capitalize; white-space:nowrap; }
.tag.dealer  { color:var(--good); border-color:var(--good-line); background:var(--good-soft); }
.tag.private { color:var(--muted); border-color:var(--line-strong); background:var(--surface-3); }
.tag.unknown { color:var(--faint); }
.tag.inactive{ color:var(--bad); border-color:var(--bad-line); background:var(--bad-soft); }
/* stale = listed long ago (often lingering / overpriced) */
.stale { color:var(--bad); font-weight:600; }

/* ---- form controls ----
   One control height (var --ctl-h) keeps inputs, selects and the min/max
   range fields perfectly aligned on a single row. */
input, select {
  width:100%; height:var(--ctl-h); background:var(--surface); color:var(--txt);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:0 10px; font:inherit; font-size:13px;
  transition:border-color .1s, box-shadow .1s, background .1s;
}
input:hover, select:hover { border-color:var(--muted); }
input:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:var(--ring); }
input::placeholder { color:var(--faint); }
select { appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; padding-right:30px; }
label { display:block; font-size:10.5px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--faint); margin-bottom:5px; }

/* ---- range field: two inputs sharing one bordered shell with a center rule.
   Reads as a single "from–to" control instead of two loose boxes. ---- */
.range { display:flex; align-items:stretch; height:var(--ctl-h);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--surface); overflow:hidden; transition:border-color .1s, box-shadow .1s; }
.range:hover { border-color:var(--muted); }
.range:focus-within { border-color:var(--accent); box-shadow:var(--ring); }
.range input { height:auto; border:none; border-radius:0; box-shadow:none;
  text-align:center; padding:0 8px; min-width:0; flex:1; background:transparent; }
.range input:hover, .range input:focus { border:none; box-shadow:none; }
.range .sep { flex:0 0 auto; align-self:center; color:var(--line-strong);
  width:1px; height:60%; background:var(--line-strong); }

/* ---- buttons ---- */
.btn { display:inline-flex; align-items:center; gap:6px; justify-content:center;
  height:var(--ctl-h); background:var(--ink); color:var(--on-ink); border:1px solid var(--ink);
  padding:0 14px; border-radius:var(--radius-sm); cursor:pointer; white-space:nowrap;
  font:inherit; font-size:13px; font-weight:600;
  transition:background .12s,border-color .12s,color .12s,box-shadow .12s; }
.btn:hover { background:var(--ink-hover); border-color:var(--ink-hover); text-decoration:none; }
.btn:active { transform:translateY(.5px); }
.btn:focus-visible { outline:none; box-shadow:var(--ring); }
.btn.ghost { background:var(--surface); color:var(--txt); border:1px solid var(--line-strong); }
.btn.ghost:hover { background:var(--surface-2); border-color:var(--muted); color:var(--txt); }
.btn.sm { height:30px; padding:0 11px; font-size:12.5px; }
.btn.icon { width:var(--ctl-h); padding:0; }            /* square icon-only button */
.btn.icon.sm { width:30px; }
.filter-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ---- favourites (localStorage) ---- */
.fav-count { display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 5px; margin-left:3px; border-radius:999px;
  background:var(--accent); color:var(--on-ink); font-size:10.5px; font-weight:700;
  letter-spacing:0; line-height:1; }
/* pending-report count on the Admin tab — amber, to read as "needs attention" */
.report-badge { display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 5px; border-radius:999px;
  background:var(--warn); color:var(--on-ink); font-size:10.5px; font-weight:700;
  letter-spacing:0; line-height:1; }
/* a star button is "off" (outline) until saved, then filled amber */
.fav-btn .ic { transition:fill .12s, color .12s; }
.fav-btn.saved { color:#a16207; border-color:var(--warn-line); background:var(--warn-soft); }
.fav-btn.saved .ic { fill:#f4b740; color:#a16207; }
/* compact star toggle used inside listing rows/cards */
.favtoggle { display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); background:var(--surface); color:var(--faint);
  cursor:pointer; transition:color .12s, border-color .12s, background .12s; }
.favtoggle:hover { color:#a16207; border-color:var(--muted); }
.favtoggle.saved { color:#a16207; border-color:var(--warn-line); background:var(--warn-soft); }
.favtoggle.saved .ic { fill:#f4b740; }

/* ---- shared toolbar (count + controls in one band above a data view) ---- */
.toolbar { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center;
  justify-content:space-between; margin-bottom:12px; }
.toolbar .tgroup { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.toolbar .tsep { width:1px; align-self:stretch; background:var(--line); margin:2px 2px; }
.toolbar .lbl { display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); font-weight:600; }

.count { font-size:18px; font-weight:700; letter-spacing:-.01em; }

/* =========================================================================
   Tablets (641–900px). The desktop header (brand + 6 tabs + admin pill with
   24–30px gaps) overflows this band — tighten the gaps so nothing clips.
   ========================================================================= */
@media (min-width:641px) and (max-width:900px) {
  .hinner { padding:0 16px; gap:12px; }
  .hleft { gap:16px; }
  .topnav { gap:13px; }
  .navlink { font-size:13px; }
}

/* =========================================================================
   Mobile (≤640px). Everything above is the desktop baseline; this block is
   the only place phone-specific overrides live. Goals: header never clips,
   tap targets ≥40px, no iOS focus-zoom, dense data tables scroll instead of
   blowing out the page width.
   ========================================================================= */
@media (max-width:640px) {
  /* Header reflows to two rows: brand + admin pill on the first, then the
     full nav as a 3-column grid — every tab visible, thumb-sized targets.
     display:contents lifts brand + nav out of .hleft so they wrap as direct
     rows of .hinner. Two rows are too tall to pin, so it scrolls away. */
  header { position:static; height:auto; }
  .hinner { flex-wrap:wrap; height:auto; padding:10px 14px; gap:10px 12px; }
  .hleft { display:contents; }
  .brand { font-size:15px; }
  .topnav { order:3; width:100%; gap:6px;
    display:grid; grid-template-columns:repeat(3,1fr); }
  .navlink { justify-content:center; margin:0; padding:9px 6px; white-space:nowrap;
    border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface);
    font-size:13px; }
  .navlink.on { background:rgba(24,24,27,.06); border-color:var(--line-strong); }

  .wrap { padding:14px 12px; }

  /* Bigger touch targets — 34px is fine for a mouse, tight for a thumb. */
  input, select, .range, .btn { height:40px; }
  input, select { font-size:16px; }          /* ≥16px stops iOS auto-zoom on focus */
  .btn { padding:0 16px; }
  .btn.sm, .chip { height:34px; }
  .seg button, .seg a { padding:8px 12px; }
  .fchip { padding:5px 8px 5px 12px; font-size:13px; }
  .fchip a.rm { width:22px; height:22px; }   /* the × was a 16px miss-target */
  .pager2 a, .pager2 span.pg { height:40px; min-width:40px; }

  /* Filter grid: one comfortable column; span2 stops meaning anything. */
  .fgrid { grid-template-columns:1fr; }
  .fgroup.span2 { grid-column:auto; }
  .filter-actions .btn { flex:1; }           /* full-width Apply / Reset */

  /* Dense analytics tables (deals/trends/market/insights) live in a .panel
     or a .card2. Let the container scroll its own overflow sideways with
     momentum so a wide table never squeezes into colliding columns or forces
     the page past the viewport. (The listings table is not in either — it
     reflows into cards instead.) */
  .panel:has(table), .card2:has(table) { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .panel table, .card2 table { min-width:max-content; }
  /* at max-content width the .ltable columns touch (cells have no horizontal
     padding — desktop relies on width:100% stretching them apart) */
  .panel table th + th, .panel table td + td,
  .card2 table th + th, .card2 table td + td { padding-left:14px; }
  .tablewrap { -webkit-overflow-scrolling:touch; }

  /* Grouped-card photo: a full-width 1:1 square ate a whole phone screen per
     card — 4:3 keeps the photo prominent while doubling scan density. */
  .gcard-img .cimg.sq { aspect-ratio:4/3; }

  /* Inline-SVG charts: squeezed below ~560px the viewBox scale turns the axis
     text into ~5px specks. Keep a legible width and swipe sideways instead —
     same treatment the data tables get. */
  .chart, .chartwrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .chart svg, .chartwrap svg { min-width:560px; }
}

/* =========================================================================
   LOVABLE COMPONENT LAYER
   Shared vocabulary for the redesigned pages: soft white cards on a zinc-50
   page, ring-style borders, generous type scale. Reused by every page so the
   page templates stay mostly markup.
   ========================================================================= */

/* card = the Lovable `rounded-xl bg-white ring-1 ring-black/5` surface */
.card2 { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm); }
.card2.pad { padding:24px; }
.card2.pad-sm { padding:20px; }
.card2.hov { transition:box-shadow .15s, border-color .15s; }
.card2.hov:hover { box-shadow:var(--shadow-card); }
.card2.clip { overflow:hidden; }

/* page header block: big title + lede */
.pagehead { margin-bottom:40px; }
.pagehead h1 { font-size:34px; line-height:1.15; font-weight:600; letter-spacing:-.02em;
  color:var(--txt); margin:0 0 8px; text-wrap:balance; }
.pagehead p { margin:0; font-size:15px; color:var(--muted); max-width:62ch; text-wrap:pretty; }
@media (max-width:640px){
  .pagehead { margin-bottom:28px; }
  .pagehead h1 { font-size:26px; }
}

/* section header: title left, sub/controls right, hairline under */
.sechead { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:12px; padding-bottom:16px; margin-bottom:24px; border-bottom:1px solid var(--line); }
.sechead h2 { font-size:18px; font-weight:600; letter-spacing:-.01em; margin:0; }
.sechead .sub { font-size:12px; color:var(--muted); }
.sechead.tight { margin-bottom:16px; padding-bottom:12px; }
.sechead.tight h2 { font-size:15px; }

/* a plain panel title used inside .card2 */
.ptitle { font-size:15px; font-weight:600; letter-spacing:-.01em; margin:0 0 16px; }

/* KPI rows (home right rail): label left, value right, hairline rows */
.kpirows { display:flex; flex-direction:column; }
.kpirow { display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; border-bottom:1px solid var(--line); }
.kpirow .k { font-size:13px; color:var(--muted); }
.kpirow .v { font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; }
.kpirow .v .d { margin-left:5px; }
.up { color:var(--good); } .down { color:var(--bad); } .flat2 { color:var(--faint); }

/* KPI stat cards (analytics): label / big number / hint */
.statgrid { display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-bottom:40px; }
.stat2 .lbl { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); }
.stat2 .val { font-size:30px; font-weight:600; letter-spacing:-.02em; margin-top:8px;
  font-variant-numeric:tabular-nums; color:var(--txt); }
.stat2 .hint { font-size:12px; color:var(--muted); margin-top:4px; }

/* card grid for listings/favourites/mispricing (minmax(0,·): see .grid2) */
.cardgrid { display:grid; gap:24px; grid-template-columns:minmax(0,1fr); }
@media (min-width:768px){ .cardgrid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .cardgrid { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ---- listing card (Lovable) ---- */
.lcard { display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm);
  overflow:hidden; transition:box-shadow .15s; }
.lcard:hover { box-shadow:var(--shadow-card); }
.lcard.inactive { opacity:.62; }
.lcard .lc-body { display:flex; flex-direction:column; flex:1; padding:20px; }
.lc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
.lc-title { font-weight:500; letter-spacing:-.01em; color:var(--txt); font-size:14.5px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lc-title:hover { text-decoration:underline; }
.lc-title .vt { color:var(--muted); }
.lc-meta { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:12px; font-weight:500;
  color:var(--muted); margin-bottom:16px; }
.lc-foot { margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between;
  gap:8px; padding-top:16px; border-top:1px solid var(--line); }
.lc-price { font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--txt);
  font-variant-numeric:tabular-nums; }
.lc-price.noprice { font-size:13px; font-weight:500; color:var(--muted); }
.lc-vmargin { font-size:11px; font-weight:600; margin-top:2px; }
.lc-vmargin.under { color:var(--good); } .lc-vmargin.over { color:var(--bad); }

/* deal/price-drop signal pills shown on cards (only when real) */
.lc-signals { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; margin-top:-2px; }
.sig { display:inline-flex; align-items:center; gap:3px; border-radius:999px; padding:2px 8px;
  font-size:11px; font-weight:600; line-height:1.3; }
.sig .ic { width:11px; height:11px; }
.sig.good { background:var(--good-soft); color:var(--good); border:1px solid var(--good-line); }
.sig.bad  { background:var(--bad-soft); color:var(--bad); border:1px solid var(--bad-line); }
.sig.drop { background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line); }
.lc-right { display:flex; flex-direction:column; align-items:flex-end; gap:5px; text-align:right; }
.lc-ago { font-size:11px; color:var(--faint); }

/* car image frame: real photo, fixed aspect, rounded, badge overlay */
.cimg { position:relative; display:block; background:var(--surface-2); overflow:hidden;
  outline:1px solid var(--line); outline-offset:-1px; }
.cimg.r43 { aspect-ratio:4/3; }
.cimg.r169 { aspect-ratio:16/9; }
.cimg.sq { aspect-ratio:1/1; }
.cimg.top { border-top-left-radius:var(--radius-xl); border-top-right-radius:var(--radius-xl); }
.cimg.rnd { border-radius:12px; }
.cimg.rndlg { border-radius:var(--radius); }
.cimg img { width:100%; height:100%; object-fit:cover; display:block; }
.cimg .ph { width:100%; height:100%; display:grid; place-items:center; color:var(--faint); }
.cimg .ph svg { width:34px; height:34px; }
.cimg .nph { position:absolute; right:8px; bottom:8px; display:inline-flex; align-items:center; gap:4px;
  background:rgba(255,255,255,.85); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  border-radius:999px; padding:2px 8px; font-size:10px; font-weight:500; color:var(--muted); }

/* source badge / pill links (chips that link to the source) */
.srcpill { display:inline-flex; align-items:center; gap:6px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:12px; font-weight:500;
  color:var(--txt); white-space:nowrap; }
.srcpill:hover { background:var(--surface-3); text-decoration:none; }
.srcpill .mut { color:var(--muted); }
.srcpill .ic { width:12px; height:12px; color:var(--faint); }
.srcpill.inactive { opacity:.5; }
.srctag { display:inline-flex; align-items:center; border-radius:999px; background:var(--surface-3);
  padding:2px 8px; font-size:10px; font-weight:500; color:var(--muted); border:1px solid var(--line); }

/* dupe badge (square, dark) */
.dupbadge { display:inline-flex; align-items:center; gap:4px; border-radius:var(--radius-sm);
  background:var(--ink); color:var(--on-ink); padding:2px 8px;
  font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }

/* ---- value-verdict box (grouped card sidebar + detail sidebar) ---- */
.verdictbox { border-radius:var(--radius); background:rgba(244,244,245,.6);
  border:1px solid var(--line); padding:24px; }
.verdictbox .vlabel { font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--faint); margin-bottom:16px; }
.verdictbox .vscore { display:flex; align-items:flex-end; gap:4px; margin-bottom:8px; }
.verdictbox .vscore .n { font-size:30px; font-weight:600; line-height:1; letter-spacing:-.02em; }
.verdictbox .vscore .n.under { color:var(--good); }
.verdictbox .vscore .n.over  { color:var(--bad); }
.verdictbox .vscore .n.fair  { color:#3f3f46; }
.verdictbox .vscore .o { font-size:13px; font-weight:500; color:var(--muted); }
.verdictbox .vtext { font-size:13.5px; line-height:1.55; color:#3f3f46; margin-bottom:16px; }
.verdictbox.big .vscore .n { font-size:48px; }
.minibars { display:flex; align-items:flex-end; gap:4px; height:48px; }
.minibars span { flex:1; border-radius:2px; background:var(--surface-3); }
.minibars span.on { background:#10b981; }

/* peer-stat rows under the detail verdict */
.peerrows { border-top:1px solid var(--line); padding-top:16px; display:flex; flex-direction:column; gap:8px; }
.peerrow { display:flex; align-items:center; justify-content:space-between; font-size:13px; }
.peerrow .k { color:var(--muted); } .peerrow .v { font-weight:500; font-variant-numeric:tabular-nums; }

/* ---- ranked list (deals/trends/insights) ---- */
.ranklist { display:flex; flex-direction:column; gap:8px; }
.rankrow { display:flex; align-items:center; gap:12px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:12px; }
.rankrow .rn { width:24px; flex:0 0 auto; text-align:center; font-family:ui-monospace,monospace;
  font-size:13px; font-weight:600; color:var(--faint); font-variant-numeric:tabular-nums; }
.rankrow .rmain { min-width:0; flex:1; }
.rankrow .rmain a { display:block; font-size:13.5px; font-weight:500; color:var(--txt);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rankrow .rmain a:hover { text-decoration:underline; }
.rankrow .rsub { font-size:11px; color:var(--muted); margin-top:1px; }
.rankrow .rright { text-align:right; flex:0 0 auto; }
.rankrow .rprice { font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.rankrow .rtag { font-size:11px; font-weight:600; margin-top:1px; }
.rtag.under { color:var(--good); } .rtag.over { color:var(--bad); } .rtag.score { color:var(--good); }

/* list with hairline dividers (price drops, stale, depreciation) */
.divlist { display:flex; flex-direction:column; }
.divrow { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--line); }
.divrow:last-child { border-bottom:none; }
.divrow .dmain a { font-size:13.5px; font-weight:500; color:var(--txt); }
.divrow .dmain a:hover { text-decoration:underline; }
.divrow .dsub { font-size:11px; color:var(--muted); margin-top:1px; }
.divrow .dright { text-align:right; }
.divrow .dprice { font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.divrow .dnote { font-size:11px; font-weight:600; margin-top:1px; }

/* clean data tables inside cards (Lovable thin style) */
.ltable { width:100%; font-size:13px; border-collapse:collapse; }
.ltable thead th { text-align:left; padding:8px 0; font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; color:var(--faint); border-bottom:1px solid var(--line); }
.ltable thead th.r { text-align:right; }
.ltable tbody td { padding:10px 0; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.ltable tbody tr:last-child td { border-bottom:none; }
.ltable td.r { text-align:right; }
.ltable td.name { font-weight:500; color:var(--txt); }

/* liquidity / status pills */
.lpill { display:inline-flex; align-items:center; border-radius:999px; padding:2px 8px;
  font-size:10px; font-weight:600; }
.lpill.hi { background:var(--good-soft); color:var(--good); }
.lpill.med { background:var(--warn-soft); color:var(--warn); }
.lpill.lo { background:var(--bad-soft); color:var(--bad); }

/* chips (brand filters, presets, toggles) — Lovable pill style */
.chiprow { display:flex; flex-wrap:wrap; gap:8px; }
.pchip { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 12px;
  font-size:12px; font-weight:500; border:1px solid var(--line-strong); background:var(--surface);
  color:#3f3f46; white-space:nowrap; transition:background .12s; }
.pchip:hover { background:var(--surface-2); text-decoration:none; }
.pchip.on { background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.pchip.preset { background:var(--good-soft); color:var(--good); border-color:var(--good-line); }

/* control button group (Filters / Group / Sort) — Lovable rounded-md style */
.ctlrow { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ctl { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px;
  border-radius:var(--radius-sm); font-size:13px; font-weight:500; background:var(--surface-3);
  color:var(--txt); border:1px solid var(--line); cursor:pointer; white-space:nowrap; }
.ctl:hover { background:var(--surface-2); text-decoration:none; }
.ctl.dark { background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.ctl.dark:hover { background:var(--ink-hover); }
.ctl.on { background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.ctl select { height:auto; width:auto; border:none; background:transparent; padding:0; font:inherit;
  font-size:13px; font-weight:500; color:inherit; cursor:pointer; box-shadow:none; }
.ctl select:focus { box-shadow:none; }
.ctl .ic { width:14px; height:14px; color:var(--faint); }
.ctl.dark .ic { color:rgba(255,255,255,.7); }

/* spec grid (detail page): label over value, columns */
.specgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px 16px; }
@media (min-width:768px){ .specgrid.c4 { grid-template-columns:repeat(4,1fr); } }
.speccell .l { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
.speccell .v { font-size:13.5px; font-weight:500; color:#27272a; margin-top:2px; }

/* grouped card top-right action cluster (compare + save) */
.gcard-actions { position:absolute; top:16px; right:16px; z-index:3; display:flex; gap:6px; }

/* grouped card responsive layout: stacked on mobile, row on md+ */
.gcard-img { display:block; width:100%; flex:0 0 auto; }
.gcard-side { width:100%; }
@media (min-width:768px){
  .gcard-flex { flex-direction:row !important; gap:32px !important; }
  .gcard-img { width:224px; }
  .gcard-side { width:256px; flex:0 0 auto; }
}

/* mini grouped-stat (grouped card center) */
.gstats { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
@media (min-width:768px){ .gstats.c4 { grid-template-columns:repeat(4,1fr); } }
.gstat .l { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); margin-bottom:4px; }
.gstat .v { font-size:18px; font-weight:500; color:var(--txt); }

/* button (Lovable rounded-md, dark primary / soft secondary / colored) */
.b2 { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px;
  padding:0 14px; border-radius:var(--radius-sm); font-size:13px; font-weight:500; cursor:pointer;
  border:1px solid transparent; white-space:nowrap; }
.b2.dark { background:var(--ink); color:var(--on-ink); }
.b2.dark:hover { background:var(--ink-hover); text-decoration:none; }
.b2.soft { background:var(--surface-2); color:#3f3f46; border-color:var(--line); }
.b2.soft:hover { background:var(--surface-3); text-decoration:none; }
.b2.warn { background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); }
.b2.warn:hover { filter:brightness(.97); text-decoration:none; }
.b2.bad { background:var(--bad-soft); color:var(--bad); border-color:var(--bad-line); }
.b2.bad:hover { filter:brightness(.98); text-decoration:none; }
.b2.good { background:var(--good-soft); color:var(--good); border-color:var(--good-line); }
.b2.fav-on { background:var(--warn-soft); color:#a16207; border-color:var(--warn-line); }
.b2 .ic { width:15px; height:15px; }
.b2.sm { height:32px; padding:0 12px; font-size:12px; }
.b2.block { width:100%; }
.b2.grow { flex:1; }

/* alert card (mispricing) */
.alertcard { display:block; border-radius:var(--radius); border:1px solid var(--good-line);
  background:rgba(236,253,245,.45); padding:16px; transition:background .12s; }
.alertcard:hover { background:var(--good-soft); text-decoration:none; }
.alertcard .atag { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color:var(--good); margin-bottom:4px; }
.alertcard .acar { font-size:13.5px; font-weight:500; color:var(--txt); }
.alertcard .asub { font-size:11px; color:var(--muted); margin-top:2px; }
.alertcard .afoot { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.alertcard .aprice { font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--txt); }
.alertcard .asave { font-size:11px; color:var(--good); }

/* empty state */
.emptybox { border-radius:var(--radius-xl); border:1px dashed var(--line-strong); background:var(--surface);
  padding:64px 20px; text-align:center; color:var(--muted); font-size:13px; }

/* pagination (Lovable centered numbers) */
.pager2 { display:flex; align-items:center; justify-content:center; gap:4px; margin-top:40px; }
.pager2 a, .pager2 span.pg { display:inline-flex; align-items:center; justify-content:center;
  height:32px; min-width:32px; padding:0 12px; border-radius:var(--radius-sm); font-size:13px;
  font-weight:500; color:var(--muted); }
.pager2 a:hover { background:var(--surface-3); text-decoration:none; }
.pager2 span.pg.on { background:var(--ink); color:var(--on-ink); }
.pager2 .dis { opacity:.4; pointer-events:none; }

/* generic 2-up / responsive grids for analytics panels.
   minmax(0,1fr), not 1fr: a bare 1fr track's min-width is the content's
   min-content, so one wide child (chart svg, nowrap rank row) silently
   stretches the track past the viewport on phones. */
.grid2 { display:grid; gap:24px; grid-template-columns:minmax(0,1fr); }
@media (min-width:1024px){ .grid2 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.gap-stack > * + * { margin-top:40px; }

/* inline-SVG chart frame */
.chart { width:100%; }
.chart svg { width:100%; height:auto; display:block; }
.clegend { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:12px; font-size:12px; color:var(--muted); }
.clegend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px; }

/* saved-search strip */
.savedstrip { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:20px; }
.savedstrip .lbl { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:600; }
.savedchip { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 6px 4px 12px;
  font-size:12px; font-weight:500; border:1px solid var(--line-strong); background:var(--surface); color:#3f3f46; }
.savedchip:hover { background:var(--surface-2); text-decoration:none; }
.savedchip .x { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  border-radius:50%; color:var(--faint); background:var(--surface-3); cursor:pointer; }
.savedchip .x:hover { color:var(--on-ink); background:var(--bad); }

/* compare button on cards (icon-only on compact cards/table; labeled on grouped) */
.cmpbtn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:28px; width:28px; padding:0;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface);
  color:var(--muted); cursor:pointer; flex:0 0 auto; font:inherit; font-size:12px; font-weight:500; }
.cmpbtn:hover { color:var(--accent); border-color:var(--muted); background:var(--surface-2); }
.cmpbtn.on { background:var(--accent); color:var(--on-ink); border-color:var(--accent); }
.cmpbtn .ic { width:14px; height:14px; }
.cmpbtn.wide { width:auto; padding:0 11px; }
.cmpbtn .cmplabel::after { content:"Compare"; }
.cmpbtn.on .cmplabel::after { content:"Added"; }

/* floating compare tray */
.cmp-tray { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:40;
  display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line-strong);
  border-radius:999px; box-shadow:0 6px 24px rgba(0,0,0,.12); padding:8px 8px 8px 18px;
  max-width:calc(100vw - 24px); }
.cmp-tray .cmp-lbl { font-size:13px; color:var(--txt); display:inline-flex; align-items:center; gap:7px;
  white-space:nowrap; }
.cmp-tray .cmp-lbl .ic { width:15px; height:15px; color:var(--accent); }