/* ===== base.css ===== */
/* ==========================================================================
   BASE RESET

   The Claude Artifact host used to inject a small reset around the page
   (body margin, default font/background, [hidden] handling, safe-area
   padding). Outside that host nothing provides it, so the same rules live
   here — without them the layout loses its safe-area padding and every
   `hidden` attribute in the app stops working.
   ========================================================================== */
:root{
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%;}
body{
  margin:0;padding:0;
  font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:#faf9f5;color:#141413;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
[hidden]:not([hidden="until-found" i]){display:none!important;}
*,*::before,*::after{box-sizing:inherit;}
button,input,select,textarea{font-family:inherit;}
a{text-decoration:none;color:inherit;}

/* ===== styles.css ===== */

:root{
  --bg:#faf9f5;
  --surface:#ffffff;
  --surface-2:#f0f4f0;
  --surface-3:#e8eee9;
  --border:#dde5dd;
  --text:#122019;
  --text-muted:#5a6b60;
  --text-faint:#8a998f;
  --brand:#0e6b3c;
  --brand-dark:#0a4d2b;
  --brand-light:#e6f5ec;
  --brand-ink:#08331d;
  --gold:#a97a25;
  --gold-light:#faf1de;
  --danger:#b3402f;
  --danger-light:#fbe9e6;
  --success:#1e8e5a;
  --shadow-sm:0 1px 2px rgba(18,32,25,.06);
  --shadow-md:0 6px 20px -4px rgba(18,32,25,.14);
  --shadow-lg:0 20px 48px -12px rgba(18,32,25,.28);
  --radius-sm:8px;
  --radius:14px;
  --radius-lg:22px;
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
  --header-h:72px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0c1512;
    --surface:#121f1a;
    --surface-2:#17251f;
    --surface-3:#1e2f27;
    --border:#25392f;
    --text:#eef5f0;
    --text-muted:#a3b8ab;
    --text-faint:#71887a;
    --brand:#3fcf82;
    --brand-dark:#2fa869;
    --brand-light:#173427;
    --brand-ink:#c9f5dc;
    --gold:#e0b563;
    --gold-light:#2c2413;
    --danger:#e2685a;
    --danger-light:#3a201d;
    --success:#3fcf82;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow-md:0 6px 20px -4px rgba(0,0,0,.5);
    --shadow-lg:0 20px 48px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0c1512;
  --surface:#121f1a;
  --surface-2:#17251f;
  --surface-3:#1e2f27;
  --border:#25392f;
  --text:#eef5f0;
  --text-muted:#a3b8ab;
  --text-faint:#71887a;
  --brand:#3fcf82;
  --brand-dark:#2fa869;
  --brand-light:#173427;
  --brand-ink:#c9f5dc;
  --gold:#e0b563;
  --gold-light:#2c2413;
  --danger:#e2685a;
  --danger-light:#3a201d;
  --success:#3fcf82;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 6px 20px -4px rgba(0,0,0,.5);
  --shadow-lg:0 20px 48px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  padding:0;
  min-height:100%;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;text-wrap:balance;margin:0;line-height:1.12;letter-spacing:-0.01em;}
p{margin:0;line-height:1.55;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:15px;}
img{max-width:100%;display:block;}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.container{max-width:1240px;margin:0 auto;padding-inline:20px;}
@media (max-width:720px){.container{padding-inline:16px;}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:11px 22px;font-weight:700;font-size:14.5px;border:1.5px solid transparent;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;white-space:nowrap;}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--brand);color:#fff;}
.btn-primary:hover{background:var(--brand-dark);}
.btn-outline{background:transparent;border-color:var(--border);color:var(--text);}
.btn-outline:hover{border-color:var(--brand);color:var(--brand);}
.btn-ghost{background:var(--surface-2);color:var(--text);}
.btn-ghost:hover{background:var(--surface-3);}
.btn-gold{background:var(--gold);color:#fff;}
.btn-block{width:100%;}
.btn-sm{padding:8px 16px;font-size:13.5px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* ---------- Header ---------- */
#site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb, var(--surface) 92%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
.header-inner{display:flex;align-items:center;gap:20px;height:var(--header-h);}
.brand-mark{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--text);flex-shrink:0;}
.brand-mark .dot{width:11px;height:11px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--brand-light);}
.brand-mark .flag-strip{width:26px;height:16px;border-radius:3px;overflow:hidden;display:inline-flex;flex-shrink:0;box-shadow:0 0 0 1px var(--border);}
.brand-mark .flag-strip i{flex:1;background:var(--brand);}
.brand-mark .flag-strip i:first-child{flex:0 0 30%;background:#fff;}
nav.main-nav{display:flex;align-items:center;gap:2px;flex:1;}
nav.main-nav a{padding:9px 13px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--text-muted);}
nav.main-nav a:hover{background:var(--surface-2);color:var(--text);}
nav.main-nav a.active{background:var(--brand-light);color:var(--brand-dark);}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.icon-btn{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--text);border:none;position:relative;}
.icon-btn:hover{background:var(--surface-3);}
.badge-count{position:absolute;top:-3px;right:-3px;background:var(--brand);color:#fff;font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;}
.avatar-btn{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:none;border-radius:999px;padding:5px 12px 5px 5px;}
.avatar-circle{width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0;}
.mobile-menu-btn{display:none;}
@media (max-width:980px){
  nav.main-nav{display:none;}
  .mobile-menu-btn{display:inline-flex;}
}
/* On phones the header actions row (search + saved + messages + account + menu) is wider
   than the viewport once the brand is beside it, which pushed the whole page into a
   horizontal scroll. Saved cars already have a mobile bottom-nav tab and messages have the
   floating chat button, so those two icons are redundant here at this size. */
@media (max-width:700px){
  .header-actions{gap:6px;}
  .header-actions [data-action="go-saved"],
  .header-actions [data-action="go-messages"]{display:none;}
}

/* ---------- Mobile drawer ---------- */
#mobile-drawer{position:fixed;inset:0;z-index:100;display:none;}
#mobile-drawer.open{display:block;}
#mobile-drawer .scrim{position:absolute;inset:0;background:rgba(10,20,15,.5);}
#mobile-drawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,84vw);background:var(--surface);padding:20px;padding-top:calc(20px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow-lg);}
#mobile-drawer .panel a{padding:13px 10px;border-radius:10px;font-weight:700;color:var(--text);font-size:16px;}
#mobile-drawer .panel a:hover{background:var(--surface-2);}

/* ---------- Hero ---------- */
.hero{position:relative;padding-block:56px 40px;background:
  radial-gradient(1100px 420px at 15% -10%, var(--brand-light), transparent 60%),
  radial-gradient(900px 400px at 100% 0%, var(--gold-light), transparent 55%);
  overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-dark);background:var(--brand-light);border-radius:999px;padding:6px 14px 6px 10px;}
.hero h1{font-size:clamp(32px,4.6vw,54px);margin-top:16px;}
.hero h1 span{color:var(--brand);}
.hero p.lead{margin-top:16px;font-size:17px;color:var(--text-muted);max-width:52ch;}
.hero-stats{display:flex;gap:28px;margin-top:26px;flex-wrap:wrap;}
.hero-stats div b{display:block;font-family:var(--font-display);font-size:24px;}
.hero-stats div span{font-size:12.5px;color:var(--text-muted);}
.hero-visual{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;}
.hero-visual img{width:100%;height:100%;object-fit:cover;}
.hero-visual .tag{position:absolute;left:16px;bottom:16px;background:rgba(10,20,15,.72);color:#fff;padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:700;backdrop-filter:blur(6px);}

/* ---------- Search bar ---------- */
.search-card{margin-top:28px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-md);display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:10px;}
@media (max-width:800px){.search-card{grid-template-columns:1fr 1fr;}}
.field{display:flex;flex-direction:column;gap:4px;}
.field label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);}
.field input,.field select{border:1px solid var(--border);background:var(--surface-2);border-radius:var(--radius-sm);padding:10px 12px;color:var(--text);}
.field input:focus,.field select:focus{outline:2px solid var(--brand);outline-offset:1px;}

/* ---------- Section headers ---------- */
.section{padding-block:44px;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(22px,3vw,30px);}
.section-head p{color:var(--text-muted);margin-top:6px;max-width:60ch;}

/* ---------- Category grid ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;}
.cat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 16px;display:flex;flex-direction:column;gap:10px;transition:border-color .15s,transform .15s;}
.cat-card:hover{border-color:var(--brand);transform:translateY(-2px);}
.cat-card .icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--brand-light);color:var(--brand-dark);}
.cat-card b{font-size:15px;}
.cat-card span{font-size:12.5px;color:var(--text-muted);}

/* ---------- Vehicle cards ---------- */
.veh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;}
.veh-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s;position:relative;}
.veh-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.veh-media{position:relative;aspect-ratio:4/3;background:var(--surface-2);overflow:hidden;}
.veh-media img{width:100%;height:100%;object-fit:cover;}
.veh-media .fav-btn{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(15,25,20,.55);color:#fff;border:none;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.veh-media .fav-btn.is-saved{background:var(--danger);}
.veh-media .chips{position:absolute;left:10px;top:10px;display:flex;gap:6px;flex-wrap:wrap;}
.chip{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:4px 9px;border-radius:999px;background:rgba(15,25,20,.6);color:#fff;backdrop-filter:blur(4px);}
.chip.gold{background:var(--gold);}
.veh-body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:8px;flex:1;}
.veh-body .name{font-family:var(--font-display);font-weight:700;font-size:16.5px;}
.veh-body .meta-row{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:12.5px;color:var(--text-muted);}
.veh-body .meta-row span{display:inline-flex;align-items:center;gap:4px;}
.veh-body .price{font-family:var(--font-mono);font-weight:600;font-size:17px;color:var(--brand-dark);margin-top:2px;}
.veh-body .loc{font-size:12px;color:var(--text-faint);display:flex;align-items:center;gap:5px;margin-top:auto;padding-top:8px;border-top:1px dashed var(--border);}

/* ---------- Footer ---------- */
#site-footer{background:var(--brand-ink,#0a2b1a);background:var(--surface-2);border-top:1px solid var(--border);padding-block:44px 26px;margin-top:40px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h4{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);margin-bottom:14px;}
.footer-grid a,.footer-grid p{display:block;color:var(--text-muted);font-size:14px;margin-bottom:9px;}
.footer-grid a:hover{color:var(--brand);}
.footer-bottom{margin-top:32px;padding-top:20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--text-faint);}
.social-row{display:flex;gap:10px;}
.social-row a{width:34px;height:34px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;}

/* ---------- Breadcrumb ---------- */
.crumb{font-size:13px;color:var(--text-faint);display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:18px;}
.crumb a:hover{color:var(--brand);}

/* ---------- Listings layout ---------- */
.listing-layout{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start;}
@media (max-width:880px){.listing-layout{grid-template-columns:1fr;}}
.filter-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;position:sticky;top:calc(var(--header-h) + 16px);display:flex;flex-direction:column;gap:20px;}
@media (max-width:880px){.filter-panel{position:static;}}
.filter-group b{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);margin-bottom:10px;}
.check-row{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:14px;}
.check-row input{accent-color:var(--brand);width:16px;height:16px;}
.range-row{display:flex;align-items:center;gap:8px;}
.range-row input{width:100%;}
.listing-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.listing-toolbar .count{font-size:14px;color:var(--text-muted);}
.listing-toolbar select{border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-sm);padding:9px 12px;}
.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted);}

/* ---------- Detail page ---------- */
.detail-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:start;}
@media (max-width:980px){.detail-grid{grid-template-columns:1fr;}}
.gallery-main{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/10;background:var(--surface-2);box-shadow:var(--shadow-md);}
.gallery-main img{width:100%;height:100%;object-fit:cover;}
.gallery-thumbs{display:flex;gap:10px;margin-top:10px;overflow-x:auto;padding-bottom:4px;}
.gallery-thumbs .th{flex:0 0 auto;width:88px;height:64px;border-radius:10px;overflow:hidden;border:2px solid transparent;cursor:pointer;background:var(--surface-2);}
.gallery-thumbs .th.active{border-color:var(--brand);}
.gallery-thumbs .th img{width:100%;height:100%;object-fit:cover;}
.detail-title-row{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-top:22px;flex-wrap:wrap;}
.detail-title-row h1{font-size:clamp(24px,3.4vw,34px);}
.quickfacts{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:22px;}
.quickfact{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;}
.quickfact span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);margin-bottom:4px;}
.quickfact b{font-family:var(--font-mono);font-size:15px;}
.tabs{display:flex;gap:4px;margin-top:32px;border-bottom:1px solid var(--border);overflow-x:auto;}
.tab-btn{padding:11px 16px;font-weight:700;font-size:14px;color:var(--text-muted);border-bottom:2px solid transparent;white-space:nowrap;}
.tab-btn.active{color:var(--brand-dark);border-color:var(--brand);}
.spec-table{width:100%;border-collapse:collapse;margin-top:18px;}
.spec-table tr{border-bottom:1px solid var(--border);}
.spec-table td{padding:11px 4px;font-size:14.5px;}
.spec-table td:first-child{color:var(--text-muted);width:44%;}
.spec-table td:last-child{font-weight:700;font-family:var(--font-mono);}
.seller-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;position:sticky;top:calc(var(--header-h) + 16px);}
.seller-card .price-big{font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--brand-dark);}
.seller-row{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border);}
.seller-row .avatar-circle{width:44px;height:44px;font-size:16px;}
.seller-row .name{font-weight:700;}
.seller-row .meta{font-size:12.5px;color:var(--text-muted);}
.verified-tag{display:inline-flex;align-items:center;gap:4px;color:var(--success);font-size:12px;font-weight:700;}
.cta-stack{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.map-card{margin-top:18px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);}
.map-visual{aspect-ratio:16/9;background:
  linear-gradient(135deg, var(--surface-2), var(--surface-3));
  position:relative;display:flex;align-items:center;justify-content:center;}
.map-visual svg{opacity:.5;}
.map-pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);color:var(--danger);}
.map-caption{padding:10px 14px;font-size:13px;color:var(--text-muted);background:var(--surface);}

/* ---------- Modal ---------- */
.modal-scrim{position:fixed;inset:0;background:rgba(8,16,12,.55);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px;}
.modal-scrim[hidden]{display:none;}
.modal-box{background:var(--surface);border-radius:var(--radius-lg);max-width:460px;width:100%;padding:26px;box-shadow:var(--shadow-lg);max-height:88vh;overflow-y:auto;}
.modal-box h3{font-size:20px;margin-bottom:6px;}
.modal-box .sub{color:var(--text-muted);font-size:13.5px;margin-bottom:18px;}
.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.form-row label{font-size:12.5px;font-weight:700;color:var(--text-muted);}
.form-row input,.form-row select,.form-row textarea{border:1px solid var(--border);background:var(--surface-2);border-radius:var(--radius-sm);padding:11px 13px;color:var(--text);width:100%;}
.form-row textarea{resize:vertical;min-height:80px;}
.slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.slot-btn{border:1px solid var(--border);background:var(--surface-2);border-radius:var(--radius-sm);padding:9px 6px;font-size:13px;font-weight:600;text-align:center;}
.slot-btn.active{background:var(--brand);color:#fff;border-color:var(--brand);}
.modal-close{float:right;background:none;border:none;color:var(--text-faint);font-size:20px;line-height:1;}

/* ---------- Auth pages ---------- */
.auth-wrap{max-width:420px;margin:0 auto;padding-block:60px;}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-md);}
.auth-card h1{font-size:26px;}
.demo-box{margin-top:18px;background:var(--brand-light);border:1px dashed var(--brand);border-radius:var(--radius-sm);padding:14px;font-size:13px;color:var(--brand-dark);}
.divider{display:flex;align-items:center;gap:10px;margin:20px 0;color:var(--text-faint);font-size:12.5px;}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border);}

/* ---------- Dashboard ---------- */
.dash-layout{display:grid;grid-template-columns:230px 1fr;gap:28px;align-items:start;}
@media (max-width:880px){.dash-layout{grid-template-columns:1fr;}}
.dash-side{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;position:sticky;top:calc(var(--header-h) + 16px);}
@media (max-width:880px){.dash-side{position:static;}}
.dash-profile{display:flex;align-items:center;gap:10px;padding-bottom:16px;margin-bottom:12px;border-bottom:1px solid var(--border);}
.dash-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-weight:700;font-size:14px;color:var(--text-muted);margin-bottom:2px;}
.dash-nav a:hover{background:var(--surface-2);}
.dash-nav a.active{background:var(--brand-light);color:var(--brand-dark);}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:26px;}
.stat-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
.stat-tile b{display:block;font-family:var(--font-display);font-size:26px;}
.stat-tile span{font-size:12.5px;color:var(--text-muted);}
.list-row{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:10px;}
.list-row img{width:88px;height:64px;object-fit:cover;border-radius:9px;flex-shrink:0;}
.list-row .info{flex:1;min-width:0;}
.list-row .info b{display:block;font-size:15px;}
.list-row .info span{font-size:12.5px;color:var(--text-muted);}
.status-pill{font-size:11px;font-weight:800;text-transform:uppercase;padding:4px 10px;border-radius:999px;}
.status-pill.confirmed{background:var(--brand-light);color:var(--brand-dark);}
.status-pill.pending{background:var(--gold-light);color:var(--gold);}

/* ---------- Toast ---------- */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(0);background:var(--brand-ink,#12201a);background:var(--text);color:var(--bg);padding:12px 20px;border-radius:999px;font-size:13.5px;font-weight:700;box-shadow:var(--shadow-lg);z-index:300;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}

/* ---------- Misc ---------- */
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.tag-pill{font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;background:var(--surface-2);color:var(--text-muted);}
.two-col-page{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
/* Grid items default to min-width:auto, so a wide child (a long line of text, a filter row)
   can stretch its track past the container and force the whole page to scroll sideways.
   Allowing the columns to shrink is what keeps these layouts inside the viewport on phones. */
.two-col-page > *{min-width:0;}
@media (max-width:800px){.two-col-page{grid-template-columns:1fr;}}
.pill-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;}
.pill-scroll button{flex:0 0 auto;padding:9px 16px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-weight:700;font-size:13.5px;color:var(--text-muted);}
.pill-scroll button.active{background:var(--brand);border-color:var(--brand);color:#fff;}
[hidden]{display:none!important;}

/* ==========================================================================
   V2 UPDATE — boot skeleton, nav dropdowns, selectors, search overlay,
   mobile bottom nav, floating chat/AI, cookie banner, animations, and all
   auth/dashboard/content-page additions layered on top of the v1 design system.
   ========================================================================== */

/* ---------- Boot skeleton ---------- */
.boot-skeleton{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;}
.boot-mark{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:800;font-size:26px;color:var(--text);}
.boot-bar{width:180px;height:4px;border-radius:4px;background:var(--surface-3);overflow:hidden;}
.boot-bar div{width:40%;height:100%;background:var(--brand);border-radius:4px;animation:boot-slide 1.1s ease-in-out infinite;}
@keyframes boot-slide{0%{transform:translateX(-100%);}100%{transform:translateX(340%);}}

/* ---------- Nav dropdowns ---------- */
.nav-drop{position:relative;}
.nav-drop-btn{display:inline-flex;align-items:center;gap:5px;padding:9px 13px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--text-muted);background:none;border:none;}
.nav-drop-btn:hover{background:var(--surface-2);color:var(--text);}
.nav-drop-btn svg{transition:transform .15s ease;}
.nav-drop.open .nav-drop-btn svg{transform:rotate(180deg);}
.nav-drop-panel{position:absolute;top:calc(100% + 6px);left:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:8px;min-width:200px;display:flex;flex-direction:column;gap:1px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:60;}
.nav-drop.open .nav-drop-panel{opacity:1;transform:translateY(0);pointer-events:auto;}
.nav-drop-panel a{padding:9px 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--text);}
.nav-drop-panel a:hover{background:var(--surface-2);}
.hide-under-1200{display:inline-flex;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* The nav gained Sell/Dealers/Community dropdowns, so the header needs more room before the
   "Sell Your Car" CTA is worth its width — without this the nav overlapped the search icon.
   The CTA is still reachable from the Sell menu and the mobile bottom bar. */
@media (max-width:1340px){.hide-under-1200{display:none;}}
@media (max-width:1400px){
  nav.main-nav a, .nav-drop-btn{padding:9px 9px;font-size:14px;}
  nav.main-nav{gap:0;}
}
@media (max-width:1080px){
  nav.main-nav a, .nav-drop-btn{padding:8px 7px;font-size:13.5px;}
}
nav.main-nav{min-width:0;}

/* ---------- Header selectors (country/language) ---------- */
.sel-slot{position:relative;}
.sel-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:999px;background:var(--surface-2);border:none;color:var(--text);font-size:13.5px;font-weight:700;}
.sel-btn:hover{background:var(--surface-3);}
.sel-panel{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:10px;width:260px;max-height:340px;overflow-y:auto;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:70;}
.sel-slot.open .sel-panel{opacity:1;transform:translateY(0);pointer-events:auto;}
.sel-panel input{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);margin-bottom:8px;}
.sel-option{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:8px;font-size:14px;font-weight:600;width:100%;text-align:left;background:none;border:none;color:var(--text);}
.sel-option:hover{background:var(--surface-2);}
.sel-option.active{background:var(--brand-light);color:var(--brand-dark);}
@media (max-width:980px){ #country-slot, #lang-slot { display:none; } }

/* ---------- Search overlay ---------- */
.search-overlay{position:fixed;inset:0;z-index:150;background:color-mix(in srgb, var(--bg) 97%, transparent);backdrop-filter:blur(6px);padding-top:80px;}
.search-overlay-inner{max-width:720px;}
#global-search-form{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:14px 20px;box-shadow:var(--shadow-lg);color:var(--text-faint);}
#global-search-input{flex:1;border:none;background:none;font-size:17px;color:var(--text);outline:none;}
#search-suggestions{margin-top:14px;display:flex;flex-direction:column;gap:6px;}
.search-sugg-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;}
.search-sugg-row img{width:52px;height:38px;object-fit:cover;border-radius:6px;}
.search-sugg-row b{font-size:14px;}
.search-sugg-row span{font-size:12.5px;color:var(--text-muted);display:block;}

/* ---------- Sign-in role picker ---------- */
.role-pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;}
@media (max-width:520px){.role-pick-grid{grid-template-columns:1fr;}}
.role-pick-card{border:1.5px solid var(--border);border-radius:var(--radius);padding:20px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;transition:border-color .15s,transform .15s;}
.role-pick-card:hover{border-color:var(--brand);transform:translateY(-2px);}
.role-pick-card .icon{width:46px;height:46px;border-radius:50%;background:var(--brand-light);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;}
.role-pick-card b{font-size:15px;}
.role-pick-card span{font-size:12.5px;color:var(--text-muted);}

/* ---------- Mobile bottom nav ---------- */
#mobile-bottom-nav{display:none;}
@media (max-width:720px){
  #mobile-bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;background:color-mix(in srgb, var(--surface) 96%, transparent);backdrop-filter:blur(10px);border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));justify-content:space-around;}
  body{padding-bottom:62px;}
}
.bn-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border-radius:12px;color:var(--text-faint);font-size:10.5px;font-weight:700;position:relative;}
.bn-item.active{color:var(--brand-dark);}
.bn-item .badge-count{top:-2px;right:2px;}

/* ---------- Drawer additions ---------- */
.drawer-divider{height:1px;background:var(--border);margin:10px 0;}
.drawer-row-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);padding:8px 10px 4px;}
#drawer-account{margin-bottom:6px;}
.drawer-account-card{display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:var(--radius);padding:12px;margin-bottom:8px;}
#drawer-country .sel-option{width:100%;}

/* ---------- Floating chat / AI ---------- */
.fab{position:fixed;bottom:26px;right:22px;width:56px;height:56px;border-radius:50%;background:var(--brand);color:#fff;border:none;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;z-index:120;transition:transform .18s ease;}
.fab:hover{transform:translateY(-3px) scale(1.04);}
.fab-chat{right:90px;background:var(--text);}
@media (max-width:720px){
  .fab{bottom:78px;right:16px;width:50px;height:50px;}
  .fab-chat{right:76px;}
}
.floating-panel{position:fixed;bottom:96px;right:22px;width:min(380px,92vw);max-height:min(600px,74vh);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:130;display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .18s ease,transform .18s ease;}
.floating-panel.open{opacity:1;transform:translateY(0) scale(1);}
@media (max-width:720px){.floating-panel{bottom:0;right:0;left:0;width:100%;max-height:80vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;}}
.fp-head{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--brand);color:#fff;}
.fp-head b{font-family:var(--font-display);font-size:15.5px;}
.fp-head button{background:rgba(255,255,255,.18);border:none;color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.fp-body{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px;}
.fp-foot{border-top:1px solid var(--border);padding:12px;display:flex;gap:8px;}
.fp-foot input{flex:1;border:1px solid var(--border);background:var(--surface-2);border-radius:999px;padding:10px 16px;color:var(--text);}
.fp-foot button{width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.chat-bubble{max-width:82%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;}
.chat-bubble.me{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:4px;}
.chat-bubble.them{align-self:flex-start;background:var(--surface-2);border-bottom-left-radius:4px;}
.ai-quick{display:flex;flex-wrap:wrap;gap:8px;}
.ai-quick button{border:1px solid var(--border);background:var(--surface-2);border-radius:999px;padding:8px 13px;font-size:12.5px;font-weight:700;color:var(--text);}
.ai-quick button:hover{border-color:var(--brand);}
.typing-dots{display:inline-flex;gap:3px;align-self:flex-start;background:var(--surface-2);padding:11px 14px;border-radius:16px;}
.typing-dots span{width:6px;height:6px;border-radius:50%;background:var(--text-faint);animation:typing-bounce 1.1s infinite;}
.typing-dots span:nth-child(2){animation-delay:.15s;}
.typing-dots span:nth-child(3){animation-delay:.3s;}
@keyframes typing-bounce{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-4px);opacity:1;}}

/* ---------- Cookie banner ---------- */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;max-width:640px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:18px;z-index:140;}
.cookie-banner p{font-size:13.5px;color:var(--text-muted);margin-bottom:12px;}
.cookie-banner .row{display:flex;gap:10px;flex-wrap:wrap;}
.cookie-customize{display:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);flex-direction:column;gap:8px;}
.cookie-customize.open{display:flex;}
.cookie-toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;}
.switch{position:relative;width:38px;height:22px;border-radius:999px;background:var(--surface-3);flex-shrink:0;cursor:pointer;}
.switch.on{background:var(--brand);}
.switch i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s ease;}
.switch.on i{transform:translateX(16px);}
.switch.disabled{opacity:.5;cursor:not-allowed;}

/* ---------- Footer v2 ---------- */
.footer-grid-6{grid-template-columns:1.6fr repeat(6,1fr);}
@media (max-width:1240px){.footer-grid-6{grid-template-columns:repeat(4,1fr);}}
@media (max-width:1080px){.footer-grid-6{grid-template-columns:1fr 1fr 1fr;}}
@media (max-width:640px){.footer-grid-6{grid-template-columns:1fr 1fr;}}
.footer-legal-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid var(--border);}
.footer-legal-row a{font-size:13px;color:var(--text-muted);font-weight:700;}
.footer-legal-row a:hover{color:var(--brand);}
.footer-bottom{flex-direction:column;align-items:flex-start;gap:14px;}
.footer-bottom-selectors{display:flex;gap:10px;}

/* ---------- Reveal / scroll animations ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;}
  .reveal.in{opacity:1;transform:translateY(0);}
}
.hover-zoom{overflow:hidden;}
.hover-zoom img{transition:transform .4s ease;}
.hover-zoom:hover img{transform:scale(1.06);}

/* ---------- Skeleton loaders ---------- */
.skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:skel-shimmer 1.4s ease infinite;border-radius:var(--radius-sm);}
@keyframes skel-shimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}
@media (prefers-reduced-motion: reduce){ .skel{animation:none;} }

/* ---------- Trust cards / stats / testimonials / FAQ / insights ---------- */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:880px){.trust-grid{grid-template-columns:1fr;}}
.trust-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;position:relative;overflow:hidden;}
.trust-card .icon{width:48px;height:48px;border-radius:14px;background:var(--brand-light);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.trust-card h3{font-size:18px;margin-bottom:8px;}
.trust-card p{color:var(--text-muted);font-size:14.5px;}

.stats-band{background:var(--brand-dark);color:#fff;border-radius:var(--radius-lg);padding:44px 30px;}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;text-align:center;margin-top:26px;}
.stat-num{font-family:var(--font-mono);font-size:clamp(26px,3.4vw,38px);font-weight:700;}
.stat-lbl{font-size:12.5px;opacity:.8;margin-top:4px;}

.testi-track-wrap{overflow:hidden;}
.testi-track{display:flex;gap:20px;transition:transform .4s ease;}
.testi-card{flex:0 0 calc(33.333% - 14px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;}
@media (max-width:980px){.testi-card{flex:0 0 100%;}}
.testi-card .stars{color:var(--gold);margin-bottom:10px;}
.testi-card .sample-badge{display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:var(--surface-3);color:var(--text-faint);padding:3px 8px;border-radius:999px;margin-bottom:10px;}
.testi-card .who{display:flex;align-items:center;gap:10px;margin-top:14px;}
.testi-nav{display:flex;justify-content:center;gap:10px;margin-top:18px;}
.testi-nav button{width:34px;height:34px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;}

.faq-search{max-width:480px;margin:0 auto 26px;}
.faq-cats{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:22px;}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;overflow:hidden;background:var(--surface);}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 18px;font-weight:700;text-align:left;background:none;border:none;color:var(--text);}
.faq-q svg{transition:transform .2s ease;flex-shrink:0;}
.faq-item.open .faq-q svg{transform:rotate(180deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-item.open .faq-a{max-height:400px;}
.faq-a-inner{padding:0 18px 16px;color:var(--text-muted);font-size:14.5px;line-height:1.6;}

.insight-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;}
.insight-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s;}
.insight-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.insight-media{aspect-ratio:16/10;position:relative;}
.grad-1{background:linear-gradient(135deg,#0e6b3c,#1e8e5a);}
.grad-2{background:linear-gradient(135deg,#0a4d2b,#3fcf82);}
.grad-3{background:linear-gradient(135deg,#a97a25,#e0b563);}
.grad-4{background:linear-gradient(135deg,#122019,#5a6b60);}
.grad-5{background:linear-gradient(135deg,#0a4d2b,#a97a25);}
.insight-media span{position:absolute;left:12px;top:12px;font-size:10.5px;font-weight:800;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--brand-dark);padding:4px 10px;border-radius:999px;}
.insight-body{padding:16px 18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.insight-body h3{font-size:16.5px;}
.insight-body p{font-size:13.5px;color:var(--text-muted);}
.insight-meta{font-size:12px;color:var(--text-faint);margin-top:auto;padding-top:10px;border-top:1px dashed var(--border);}

/* ---------- Multi-step vendor onboarding ---------- */
.step-track{display:flex;align-items:center;gap:6px;margin-bottom:26px;}
.step-dot{width:30px;height:30px;border-radius:50%;background:var(--surface-2);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;color:var(--text-muted);flex-shrink:0;}
.step-dot.active{background:var(--brand);border-color:var(--brand);color:#fff;}
.step-dot.done{background:var(--brand-light);border-color:var(--brand);color:var(--brand-dark);}
.step-line{flex:1;height:2px;background:var(--border);}
.step-line.done{background:var(--brand);}

/* ---------- Split auth layout ---------- */
.split-auth{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - var(--header-h));}
@media (max-width:900px){.split-auth{grid-template-columns:1fr;min-height:auto;}}
.split-visual{position:relative;background:linear-gradient(160deg,var(--brand-dark),var(--brand));color:#fff;padding:48px 44px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;min-height:340px;}
.split-visual.biz{background:linear-gradient(160deg,#1a1a1a,#3a3a3a);}
.split-visual::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 90% 100%, rgba(255,255,255,.12), transparent);}
.split-visual .brand-mark{color:#fff;position:relative;z-index:1;}
.split-visual h1{font-size:clamp(26px,3.4vw,40px);margin-top:30px;position:relative;z-index:1;color:#fff;}
.split-visual p.lead{margin-top:14px;color:rgba(255,255,255,.86);max-width:42ch;position:relative;z-index:1;}
.split-benefits{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:10px;position:relative;z-index:1;padding:0;}
.split-benefits li{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.94);}
.split-benefits li svg{flex-shrink:0;}
.split-form-col{display:flex;align-items:center;justify-content:center;padding:44px 24px;}
.split-form-inner{width:100%;max-width:440px;}
@media (max-width:900px){.split-visual{padding:32px 24px;min-height:200px;}.split-benefits{display:none;}}

.pw-strength{display:flex;gap:4px;margin-top:6px;}
.pw-strength div{height:4px;flex:1;border-radius:2px;background:var(--surface-3);}
.pw-strength div.on0{background:var(--danger);}
.pw-strength div.on1{background:var(--gold);}
.pw-strength div.on2{background:var(--success);}
.pw-strength-label{font-size:11.5px;color:var(--text-faint);margin-top:4px;}
.input-icon-wrap{position:relative;}
.input-icon-wrap input{padding-right:42px!important;}
.input-icon-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-faint);}
.field-error{font-size:12px;color:var(--danger);margin-top:4px;display:none;}
.field-error.show{display:block;}
.form-row input.invalid,.form-row select.invalid{border-color:var(--danger);}
.form-row input.valid,.form-row select.valid{border-color:var(--success);}

.searchable-select{position:relative;}
.ss-input{border:1px solid var(--border);background:var(--surface-2);border-radius:var(--radius-sm);padding:11px 13px;color:var(--text);width:100%;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.ss-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);max-height:260px;overflow-y:auto;z-index:40;display:none;}
.searchable-select.open .ss-panel{display:block;}
.ss-search{padding:8px;border-bottom:1px solid var(--border);}
.ss-search input{width:100%;border:1px solid var(--border);background:var(--surface-2);border-radius:6px;padding:7px 9px;color:var(--text);}
.ss-opt{padding:9px 13px;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:8px;}
.ss-opt:hover{background:var(--surface-2);}

.status-pill.submitted{background:var(--surface-3);color:var(--text-muted);}
.status-pill.review,.status-pill.additional{background:var(--gold-light);color:var(--gold);}
.status-pill.approved{background:var(--brand-light);color:var(--brand-dark);}
.status-pill.rejected,.status-pill.suspended{background:var(--danger-light);color:var(--danger);}

.doc-upload-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px dashed var(--border);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:10px;}
.doc-upload-row span.name{font-weight:700;font-size:13.5px;}
.doc-upload-row span.hint{font-size:12px;color:var(--text-faint);display:block;}
.doc-upload-row.uploaded{border-style:solid;border-color:var(--success);background:var(--brand-light);}

.sell-photo-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
.sell-photo-thumb{width:96px;}
.sell-photo-thumb img{width:96px;height:72px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border);display:block;}
.sell-photo-thumb span{display:block;font-size:11px;color:var(--text-faint);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.chart-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
.bar-chart{display:flex;align-items:flex-end;gap:3px;height:120px;}
.bar-chart .bar{flex:1;background:var(--brand-light);border-radius:3px 3px 0 0;position:relative;}
.bar-chart .bar b{position:absolute;inset:0;background:var(--brand);border-radius:3px 3px 0 0;bottom:0;top:auto;}

.legal-toc{background:var(--surface-2);border-radius:var(--radius);padding:18px 20px;margin-bottom:26px;}
.legal-toc a{display:block;padding:4px 0;font-size:13.5px;color:var(--brand-dark);font-weight:600;}
.legal-sec{padding:20px 0;border-top:1px solid var(--border);}
.legal-sec h2{font-size:19px;margin-bottom:10px;}
.legal-sec p{color:var(--text-muted);margin-bottom:10px;font-size:14.5px;line-height:1.7;}
.legal-review-note{background:var(--gold-light);color:var(--gold);border-radius:var(--radius-sm);padding:12px 16px;font-size:13px;margin-bottom:22px;}

.admin-gate{max-width:380px;margin:80px auto;text-align:center;}

/* ---------------------------- Admin Portal ---------------------------- */
.admin-auth .split-visual.admin-visual{background:linear-gradient(150deg,#0b1f16,#123526 60%,#0e6b3c);}
/* Note: the admin portal deliberately hides the public #site-header (see afterRender() in
   10-events-init.js), so — unlike the rest of the site — these are positioned relative to the
   true viewport top (0), not var(--header-h). */
.admin-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh;background:var(--surface-2);}
@media (max-width:900px){.admin-shell{grid-template-columns:1fr;}}
.admin-sidebar{background:var(--surface);border-right:1px solid var(--border);padding:18px 12px;position:sticky;top:0;height:100vh;overflow-y:auto;}
.admin-sidebar .brand-mini{font-family:var(--font-display);font-weight:800;font-size:16px;padding:8px 10px 16px;display:flex;align-items:center;gap:8px;}
.admin-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);color:var(--text-muted);font-weight:700;font-size:13.5px;margin-bottom:2px;}
.admin-nav a.active{background:var(--brand);color:#fff;}
.admin-nav a:hover:not(.active){background:var(--surface-2);}
.admin-nav .sub{font-size:11.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;padding:14px 12px 4px;font-weight:800;}
.admin-main{padding:0;min-width:0;max-width:100%;overflow-x:hidden;}
.admin-topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:12px 22px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:5;}
.admin-menu-btn{display:none;background:none;border:none;color:var(--text);cursor:pointer;padding:4px;}
/* Always out-of-flow (position:fixed) and hidden at the base level so it never becomes a
   grid item of .admin-shell on desktop — it only actually shows on the mobile breakpoint
   below, when the sidebar becomes an overlay drawer instead of a static column. */
.admin-sidebar-scrim{display:none;position:fixed;inset:0;background:rgba(8,16,12,.5);z-index:105;}
@media (max-width:900px){
  .admin-shell{position:relative;}
  .admin-sidebar{position:fixed;left:0;top:0;bottom:0;width:260px;max-width:82vw;z-index:110;transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow-lg);}
  .admin-sidebar.open{transform:translateX(0);}
  .admin-sidebar-scrim.open{display:block;}
  .admin-menu-btn{display:inline-flex;align-items:center;justify-content:center;}
  .admin-topbar .admin-search{max-width:none;}
  .admin-topbar{padding:12px 14px;gap:10px;}
  .admin-body{padding:16px !important;}
}
.admin-topbar .admin-search{flex:1;max-width:420px;display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:8px 14px;}
.admin-topbar .admin-search input{border:0;background:transparent;flex:1;color:var(--text);font-size:13.5px;}
.admin-topbar-actions{display:flex;align-items:center;gap:12px;margin-left:auto;position:relative;}
.admin-role-badge{font-size:11px;font-weight:800;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--brand-light);color:var(--brand-dark);}
.admin-body{padding:22px 24px 60px;}
.notif-bell{position:relative;cursor:pointer;padding:8px;border-radius:50%;}
.notif-bell:hover{background:var(--surface-2);}
.notif-badge{position:absolute;top:2px;right:2px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;border-radius:999px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 3px;}
.notif-dropdown{position:absolute;top:calc(100% + 10px);right:0;width:340px;max-height:420px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:20;}
.notif-dropdown .notif-item{display:block;padding:12px 16px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text);}
.notif-dropdown .notif-item.unread{background:var(--brand-light);}
.notif-dropdown .notif-item span{display:block;font-size:11px;color:var(--text-faint);margin-top:3px;}
.admin-profile-menu{position:relative;}
.admin-profile-dropdown{position:absolute;top:calc(100% + 10px);right:0;min-width:180px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:20;padding:6px;}
.admin-profile-dropdown a,.admin-profile-dropdown button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text);background:none;border:0;cursor:pointer;}
.admin-profile-dropdown a:hover,.admin-profile-dropdown button:hover{background:var(--surface-2);}
.admin-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:22px;}
.admin-chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-bottom:24px;}
.range-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;}
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);}
table.admin-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:760px;}
table.admin-table th{text-align:left;padding:12px 14px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);border-bottom:1px solid var(--border);white-space:nowrap;}
table.admin-table td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
table.admin-table tr:last-child td{border-bottom:0;}
table.admin-table tr:hover td{background:var(--surface-2);}
table.admin-table img.thumb{width:56px;height:38px;object-fit:cover;border-radius:6px;}
.admin-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;justify-content:space-between;}
.admin-toolbar .filters{display:flex;gap:8px;flex-wrap:wrap;}
.admin-action-btns{display:flex;gap:6px;flex-wrap:wrap;}
.pager{display:flex;gap:6px;justify-content:center;padding:16px;}
.pager button{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--surface);font-weight:700;font-size:13px;}
.pager button.active{background:var(--brand);color:#fff;border-color:var(--brand);}
.status-pill.new,.status-pill.unread{background:var(--gold-light);color:var(--gold);}
.status-pill.active,.status-pill.resolved,.status-pill.replied{background:var(--brand-light);color:var(--brand-dark);}
.status-pill.sold,.status-pill.closed,.status-pill.archived,.status-pill.dismissed{background:var(--surface-3);color:var(--text-muted);}
.status-pill.expired,.status-pill.blocked,.status-pill.spam{background:var(--danger-light);color:var(--danger);}
.status-pill.draft{background:var(--surface-3);color:var(--text-muted);}
.mini-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.mini-bar-row .label{width:110px;font-size:12.5px;color:var(--text-muted);flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mini-bar-row .track{flex:1;height:10px;background:var(--surface-3);border-radius:999px;overflow:hidden;}
.mini-bar-row .track b{display:block;height:100%;background:var(--brand);border-radius:999px;}
.mini-bar-row .val{width:36px;text-align:right;font-size:12px;font-weight:700;flex-shrink:0;}

.faq-cat-btn{flex:0 0 auto;padding:8px 15px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-weight:700;font-size:13px;color:var(--text-muted);}
.faq-cat-btn.active{background:var(--brand);border-color:var(--brand);color:#fff;}

.compare-check-row{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-muted);padding:0 16px 12px;}
.compare-check-row input{accent-color:var(--brand);width:14px;height:14px;}

/* Dark-mode overrides for components added in the CarSpot update (Sept 2026). */
@media (prefers-color-scheme: dark){
  :root[data-theme="dark"] nav.main-nav a.active, :root:not([data-theme="light"]) nav.main-nav a.active{color:var(--brand-ink);}
  :root[data-theme="dark"] .eyebrow, :root:not([data-theme="light"]) .eyebrow{color:var(--brand-ink);}
  :root[data-theme="dark"] .cat-card .icon, :root:not([data-theme="light"]) .cat-card .icon{color:var(--brand-ink);}
  :root[data-theme="dark"] .veh-body .price, :root:not([data-theme="light"]) .veh-body .price{color:var(--brand-ink);}
  :root[data-theme="dark"] .tab-btn.active, :root:not([data-theme="light"]) .tab-btn.active{color:var(--brand-ink);}
  :root[data-theme="dark"] .seller-card .price-big, :root:not([data-theme="light"]) .seller-card .price-big{color:var(--brand-ink);}
  :root[data-theme="dark"] .demo-box, :root:not([data-theme="light"]) .demo-box{color:var(--brand-ink);}
  :root[data-theme="dark"] .dash-nav a.active, :root:not([data-theme="light"]) .dash-nav a.active{color:var(--brand-ink);}
  :root[data-theme="dark"] .status-pill.confirmed, :root:not([data-theme="light"]) .status-pill.confirmed{color:var(--brand-ink);}
  :root[data-theme="dark"] .sel-option.active, :root:not([data-theme="light"]) .sel-option.active{color:var(--brand-ink);}
  :root[data-theme="dark"] .role-pick-card .icon, :root:not([data-theme="light"]) .role-pick-card .icon{color:var(--brand-ink);}
  :root[data-theme="dark"] .bn-item.active, :root:not([data-theme="light"]) .bn-item.active{color:var(--brand-ink);}
  :root[data-theme="dark"] .trust-card .icon, :root:not([data-theme="light"]) .trust-card .icon{color:var(--brand-ink);}
  :root[data-theme="dark"] .stats-band, :root:not([data-theme="light"]) .stats-band{background:var(--surface-2);border:1px solid var(--border);color:var(--text);}
  :root[data-theme="dark"] .step-dot.done, :root:not([data-theme="light"]) .step-dot.done{color:var(--brand-ink);}
  :root[data-theme="dark"] .status-pill.approved, :root:not([data-theme="light"]) .status-pill.approved{color:var(--brand-ink);}
  :root[data-theme="dark"] .bar-chart .bar, :root:not([data-theme="light"]) .bar-chart .bar{background:var(--surface-3);}
  :root[data-theme="dark"] .legal-toc a, :root:not([data-theme="light"]) .legal-toc a{color:var(--brand-ink);}
  :root[data-theme="dark"] .admin-role-badge, :root:not([data-theme="light"]) .admin-role-badge{color:var(--brand-ink);}
  :root[data-theme="dark"] .status-pill.active, :root:not([data-theme="light"]) .status-pill.active,
  :root[data-theme="dark"] .status-pill.resolved, :root:not([data-theme="light"]) .status-pill.resolved,
  :root[data-theme="dark"] .status-pill.replied, :root:not([data-theme="light"]) .status-pill.replied{color:var(--brand-ink);}
  :root[data-theme="dark"] .notif-dropdown .notif-item.unread, :root:not([data-theme="light"]) .notif-dropdown .notif-item.unread{color:var(--brand-ink);}
  :root[data-theme="dark"] .admin-nav a.active, :root:not([data-theme="light"]) .admin-nav a.active{color:var(--brand-ink);}
}

/* ---------------------------- Community, Garage, Guides, Ownership ---------------------------- */
.community-hero{background:linear-gradient(150deg,#0b1f16,#123526 62%,#0e6b3c);color:#fff;padding:40px 0 34px;margin-bottom:6px;}
.community-hero .crumb,.community-hero .crumb a{color:rgba(255,255,255,.72);}
.community-hero h1{font-size:clamp(26px,4vw,38px);margin-top:6px;}
.community-hero p{color:rgba(255,255,255,.82);margin-top:8px;max-width:58ch;}
.garage-hero{background:linear-gradient(150deg,#161a19,#23302b 60%,#0e6b3c);}
.community-stats{display:flex;gap:28px;margin-top:22px;flex-wrap:wrap;}
.community-stats div{display:flex;flex-direction:column;}
.community-stats b{font-size:24px;font-family:var(--font-display);}
.community-stats span{font-size:12.5px;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.04em;}

.forum-toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.forum-select{padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-size:13px;font-weight:600;}
.forum-row{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:10px;transition:border-color .16s ease,transform .16s ease;}
.forum-row:hover{border-color:var(--brand);transform:translateY(-1px);}
.forum-row-main{flex:1;min-width:0;}
.forum-row-title{font-weight:800;font-size:15.5px;color:var(--text);}
.forum-row-main p{color:var(--text-muted);font-size:13.5px;margin-top:4px;line-height:1.5;}
.forum-row-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--text-faint);align-items:center;}
.forum-cat{background:var(--brand-light);color:var(--brand);font-weight:700;font-size:11.5px;padding:3px 9px;border-radius:999px;}
.forum-row-stats{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:74px;}
.forum-row-stats div{display:flex;gap:5px;align-items:baseline;font-size:12px;color:var(--text-faint);}
.forum-row-stats b{font-size:14px;color:var(--text);}
.forum-post{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;}
.forum-post-head{display:flex;gap:12px;align-items:center;}
.forum-body{color:var(--text-muted);line-height:1.68;font-size:15px;white-space:pre-wrap;}
.forum-post-actions{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:16px;}
.btn.voted{background:var(--brand);color:#fff;border-color:var(--brand);}
.forum-reply{display:flex;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:10px;}

.garage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:18px;}
.garage-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;}
.garage-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.garage-photo{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2);}
.garage-photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.garage-card:hover .garage-photo img{transform:scale(1.045);}
.garage-count{position:absolute;right:10px;bottom:10px;background:rgba(8,16,12,.72);color:#fff;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;}
.garage-info{padding:14px 16px 16px;display:flex;flex-direction:column;gap:3px;}
.garage-info b{font-size:15px;}
.garage-nick{font-style:italic;color:var(--brand);font-size:13px;}
.garage-owner{font-size:12.5px;color:var(--text-faint);}
.garage-likes{font-size:12.5px;color:var(--text-muted);margin-top:4px;}
.garage-detail{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;margin-top:16px;align-items:start;}
.garage-main-photo{border-radius:var(--radius);overflow:hidden;background:var(--surface-2);aspect-ratio:4/3;}
.garage-main-photo img{width:100%;height:100%;object-fit:cover;}
.garage-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.garage-thumbs img{width:66px;height:50px;object-fit:cover;border-radius:8px;border:1px solid var(--border);cursor:pointer;transition:border-color .15s ease;}
.garage-thumbs img:hover{border-color:var(--brand);}
.garage-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}
.garage-preview{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.garage-preview-item{position:relative;width:74px;height:58px;border-radius:8px;overflow:hidden;border:1px solid var(--border);}
.garage-preview-item img{width:100%;height:100%;object-fit:cover;}
.garage-preview-item button{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:none;background:rgba(8,16,12,.75);color:#fff;font-size:14px;line-height:1;cursor:pointer;}
.garage-preview-item.loading{display:flex;align-items:center;justify-content:center;background:var(--surface-2);font-size:10.5px;color:var(--text-faint);text-align:center;padding:4px;}

.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;margin-top:20px;}
.guide-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:8px;transition:transform .18s ease,border-color .18s ease;}
.guide-card:hover{transform:translateY(-3px);border-color:var(--brand);}
.guide-cat{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--brand);}
.guide-card h3{font-size:17px;line-height:1.35;}
.guide-card p{color:var(--text-muted);font-size:13.5px;line-height:1.55;}
.guide-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--text-faint);margin-top:auto;padding-top:8px;}
.guide-body{margin-top:26px;}
.guide-body h2{font-size:20px;margin:28px 0 10px;}
.guide-body p{color:var(--text-muted);line-height:1.75;font-size:15.5px;}
.guide-checklist{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-top:34px;}
.guide-checklist-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.guide-progress{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-bottom:16px;}
.guide-progress b{display:block;height:100%;background:var(--brand);border-radius:999px;transition:width .3s ease;}
.checklist-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer;font-size:14.5px;}
.checklist-row:last-of-type{border-bottom:none;}
.checklist-row input{margin-top:3px;width:17px;height:17px;accent-color:var(--brand);flex-shrink:0;}
.checklist-row.done span{text-decoration:line-through;color:var(--text-faint);}

.saved-search-list{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.saved-search-card{display:flex;gap:16px;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;flex-wrap:wrap;}
.saved-search-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;}
.saved-search-criteria{font-size:13px;color:var(--brand);font-weight:600;}
.saved-search-meta{font-size:12px;color:var(--text-faint);}
.saved-search-side{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}

.booking-card{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:10px;}
.booking-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.booking-main span{font-size:13px;color:var(--text-muted);}
.booking-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start;}
.booking-history{margin-top:8px;font-size:12.5px;color:var(--text-muted);}
.booking-history summary{cursor:pointer;color:var(--brand);font-weight:700;}
.booking-history div{padding:4px 0 0 2px;}

.service-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:18px;}
.service-timeline{display:flex;flex-direction:column;gap:10px;}
.service-item{display:grid;grid-template-columns:130px 1fr auto;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;align-items:start;}
.service-date{display:flex;flex-direction:column;}
.service-date b{font-size:14px;}
.service-date span{font-size:12px;color:var(--text-faint);}
.service-body b{font-size:15px;}
.service-workshop{display:block;font-size:12.5px;color:var(--brand);font-weight:600;margin-top:2px;}
.service-body p{color:var(--text-muted);font-size:13.5px;margin-top:6px;line-height:1.55;}
.service-next{display:inline-block;margin-top:8px;font-size:12px;color:var(--text-faint);background:var(--surface-2);padding:3px 9px;border-radius:999px;}
.service-cost{text-align:right;white-space:nowrap;}
.service-cost b{font-size:15px;}

.emergency-panel{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--danger);border-radius:var(--radius);padding:22px;margin-top:22px;}
.emergency-panel h2{font-size:17px;}
.emergency-panel p{color:var(--text-muted);font-size:13.5px;margin-top:6px;}
.emergency-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:16px;}
.emergency-card{display:flex;flex-direction:column;gap:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;transition:border-color .15s ease;}
.emergency-card:hover{border-color:var(--danger);}
.emergency-card b{font-size:22px;font-family:var(--font-mono,monospace);color:var(--danger);}
.emergency-card span{font-size:12.5px;color:var(--text-muted);}

.privacy-counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:14px;}
.settings-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;}
.pref-group{margin-bottom:22px;}
.pref-group:last-child{margin-bottom:0;}
.pref-group h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);margin-bottom:10px;}
.privacy-action-row{display:flex;gap:16px;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.privacy-action-row:last-child{border-bottom:none;padding-bottom:0;}
.privacy-action-row p{color:var(--text-muted);font-size:13px;margin-top:4px;max-width:52ch;line-height:1.55;}
.privacy-action-row.danger b{color:var(--danger);}
.info-callout{background:var(--brand-light);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;font-size:13.5px;color:var(--text-muted);line-height:1.6;}
.info-callout b{color:var(--text);}
.info-callout.warn{background:var(--danger-light);border-color:var(--danger);}
.demo-note{font-size:12px;color:var(--text-faint);line-height:1.55;}

@media (max-width:820px){
  .garage-detail{grid-template-columns:1fr;}
  .service-item{grid-template-columns:1fr;gap:8px;}
  .service-cost{text-align:left;}
  .forum-row{flex-wrap:wrap;}
  .forum-row-stats{flex-direction:row;gap:14px;width:100%;justify-content:flex-start;border-top:1px solid var(--border);padding-top:8px;}
  .saved-search-card,.privacy-action-row{flex-direction:column;align-items:flex-start;}
  .community-stats{gap:18px;}
}
@media (prefers-color-scheme: dark){
  :root[data-theme="dark"] .forum-cat, :root:not([data-theme="light"]) .forum-cat{background:var(--surface-3);color:var(--brand);}
  :root[data-theme="dark"] .info-callout, :root:not([data-theme="light"]) .info-callout{background:var(--surface-2);}
  :root[data-theme="dark"] .guide-cat, :root:not([data-theme="light"]) .guide-cat{color:var(--brand);}
  :root[data-theme="dark"] .btn.voted, :root:not([data-theme="light"]) .btn.voted{color:var(--brand-ink);}
}
.compare-toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:20px 0 10px;}
/* .cookie-toggle-row was originally only used inside the cookie banner, where each row
   carried its own inline margin. Inside the settings cards it needs its own rhythm,
   otherwise the switches stack flush against each other. */
.settings-card .cookie-toggle-row{padding:11px 0;border-bottom:1px solid var(--border);gap:16px;}
.settings-card .cookie-toggle-row:last-child{border-bottom:none;padding-bottom:0;}
.settings-card .pref-group .cookie-toggle-row:last-child{border-bottom:none;}
.settings-card .form-row + .cookie-toggle-row{border-top:1px solid var(--border);}

/* ---------------------------- Premium auth surfaces ---------------------------- */
.split-auth{grid-template-columns:55fr 45fr;}
/* Grid items default to min-width:auto, so the photo header's headline could stretch its
   track past a narrow phone viewport and force a sideways scroll. */
.split-auth > *{min-width:0;}
.auth-mobile-head b{overflow-wrap:anywhere;}
.split-visual{background-size:cover;background-position:center;}
/* A real photograph needs a scrim before white text sits on it — this is the gradient
   overlay, kept dark enough that the headline passes contrast on any of the catalog shots. */
.split-visual-scrim{position:absolute;inset:0;background:linear-gradient(165deg,rgba(6,18,12,.88) 0%,rgba(6,18,12,.66) 45%,rgba(10,77,43,.62) 100%);}
.split-visual.biz .split-visual-scrim{background:linear-gradient(165deg,rgba(10,10,10,.9) 0%,rgba(24,24,24,.7) 45%,rgba(10,77,43,.55) 100%);}
.split-visual > *:not(.split-visual-scrim){position:relative;z-index:1;}
.split-visual-copy h1{font-size:clamp(28px,3.4vw,44px);line-height:1.12;letter-spacing:-.01em;}
.split-visual-copy p.lead{margin-top:14px;font-size:16px;}
.vendor-hero{min-height:200px;padding:32px 34px;background-size:cover;background-position:center;}

.auth-title{font-size:clamp(22px,2.6vw,29px);letter-spacing:-.01em;}
.auth-sub{color:var(--text-muted);margin-top:6px;font-size:14.5px;}
.auth-switch-box{margin-top:16px;text-align:center;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:14px;font-size:13.5px;color:var(--text-muted);}
.auth-switch-box a{display:inline-block;margin-top:4px;color:var(--brand);font-weight:800;letter-spacing:.02em;}

/* Compact photo header: phones only, so the fields stay near the top of the screen. */
.auth-mobile-head{display:none;position:relative;background-size:cover;background-position:center;padding:22px 20px 18px;color:#fff;border-radius:0 0 var(--radius-lg) var(--radius-lg);}
.auth-mobile-head .brand-mark{color:#fff;position:relative;z-index:1;}
.auth-mobile-head b{position:relative;z-index:1;display:block;margin-top:10px;font-size:20px;font-family:var(--font-display);}

.signup-progress{list-style:none;display:flex;gap:6px;margin:20px 0 22px;padding:0;}
.signup-progress li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;}
.signup-progress li span{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;background:var(--surface-2);color:var(--text-faint);border:1px solid var(--border);transition:background .2s ease,color .2s ease;}
.signup-progress li b{font-size:11px;font-weight:700;color:var(--text-faint);text-align:center;}
.signup-progress li.current span{background:var(--brand);color:#fff;border-color:var(--brand);}
.signup-progress li.current b{color:var(--text);}
.signup-progress li.done span{background:var(--brand-light);color:var(--brand);border-color:var(--brand);}
.signup-step-title{font-size:16px;margin-bottom:14px;}
.signup-nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px;}
.signup-nav .btn{min-width:120px;}
.signup-review{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:9px;}
.signup-review div{display:flex;justify-content:space-between;gap:16px;font-size:13.5px;}
.signup-review span{color:var(--text-faint);}
.signup-review b{text-align:right;word-break:break-word;}

.verify-code{font-family:var(--font-mono,monospace);font-size:26px;font-weight:700;letter-spacing:.22em;margin:8px 0 4px;color:var(--brand-dark);}
.verify-tick{width:58px;height:58px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto;}

/* Micro-interactions: subtle, and fully disabled for reduced-motion users. */
.split-form-inner .form-row input,.split-form-inner .form-row select,.split-form-inner textarea{transition:border-color .16s ease,box-shadow .16s ease;}
.split-form-inner .form-row input:focus,.split-form-inner .form-row select:focus{box-shadow:0 0 0 3px var(--brand-light);}
.split-auth .btn{transition:transform .14s ease,box-shadow .14s ease,background .16s ease;}
.split-auth .btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-lg);}
.split-auth .btn:active:not(:disabled){transform:translateY(0);}
.split-visual{animation:authVisualIn .5s ease both;}
@keyframes authVisualIn{from{opacity:.55;transform:scale(1.015);}to{opacity:1;transform:scale(1);}}
.field-error.show{animation:fieldShake .26s ease;}
@keyframes fieldShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-3px);}75%{transform:translateX(3px);}}

@media (max-width:900px){
  .split-auth{grid-template-columns:1fr;}
  .split-visual{display:none;}
  .auth-mobile-head{display:block;}
  .signup-progress li b{display:none;}
  .signup-progress{gap:8px;}
}
@media (prefers-reduced-motion: reduce){
  .split-visual,.field-error.show{animation:none;}
  .split-auth .btn,.split-form-inner .form-row input,.split-form-inner .form-row select{transition:none;}
  .split-auth .btn-primary:hover:not(:disabled){transform:none;}
}

/* ---------------------------- Admin: grouped sidebar, taxonomy, matrix ---------------------------- */
.admin-sidebar-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 8px;}
.sidebar-collapse-btn{background:none;border:1px solid var(--border);border-radius:8px;color:var(--text-muted);cursor:pointer;padding:4px 6px;display:flex;align-items:center;}
.sidebar-collapse-btn:hover{background:var(--surface-2);color:var(--text);}
.admin-sidebar.collapsed{width:72px;}
.admin-sidebar.collapsed .brand-mini-text,.admin-sidebar.collapsed .admin-nav .sub{display:none;}
.admin-sidebar.collapsed .admin-nav a{justify-content:center;padding:10px 6px;}
.admin-sidebar.collapsed .nav-label{display:none;}
.admin-sidebar.collapsed .admin-nav a::before{content:"•";font-size:16px;line-height:1;}
.admin-shell:has(.admin-sidebar.collapsed){grid-template-columns:72px 1fr;}

.tax-chip{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px 9px;margin:0 5px 5px 0;font-size:12.5px;}
.tax-chip button{background:none;border:none;color:var(--text-faint);cursor:pointer;font-size:14px;line-height:1;padding:0 1px;}
.tax-chip button:hover{color:var(--danger);}
.inline-add{display:inline-flex;gap:6px;margin-top:6px;}
.inline-add input{padding:5px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-size:12.5px;max-width:150px;}
table.perm-matrix td,table.perm-matrix th{font-size:12px;}
table.perm-matrix td:first-child{text-transform:capitalize;}