/* ════════════════════════════════════════════════════════════════
   Car Friend — Seller & Dealer UI system (www dashboard shell)
   Tokens + base + components. Green-on-white, amber = attention only.
   Source of truth: carfriend-seller-dealer-ui skill (§3–§7).
   ════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── §3 tokens ── */
:root{
  --cf-bg:#F3F7F3; --cf-surface:#FFFFFF; --cf-ink:#122019; --cf-ink-soft:#3B4B42; --cf-muted:#5E7267;
  --cf-green:#15603E; --cf-green-deep:#0F4A2F; --cf-green-bright:#1FA463;
  --cf-green-050:#F0F7F2; --cf-green-100:#E4F1EA; --cf-green-200:#CDE6D8;
  --cf-line:#E2EAE5; --cf-line-strong:#CBD9D0;
  --cf-amber:#9A5B0C; --cf-amber-bright:#C98A17; --cf-amber-bg:#FBF3E3; --cf-amber-line:#EAD6AE;
  --cf-radius:18px; --cf-pill:999px;
  --ease:cubic-bezier(.22,1,.36,1);
  --cf-shadow:0 1px 2px rgba(18,32,25,.04), 0 18px 38px -22px rgba(18,32,25,.18);
  --cf-shadow-card:0 1px 2px rgba(18,32,25,.04), 0 12px 26px -18px rgba(18,32,25,.16);
  --z-nav:100; --z-tabbar:120; --z-dropdown:200;
}

/* ── §4 typography ── */
body{ font-family:'Plus Jakarta Sans', system-ui, -apple-system,'Segoe UI', Roboto, sans-serif; }

/* ── §5 icon base ── */
svg.i{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.i-sm{ width:16px; height:16px; }

/* ── §6 base + primitives ── */
*{ -webkit-tap-highlight-color:transparent; }
html,body{ background:var(--cf-bg); }
body{ color:var(--cf-ink); margin:0; -webkit-font-smoothing:antialiased; }
body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(1000px 480px at 88% -12%, rgba(31,164,99,.09), transparent 60%),
            radial-gradient(820px 460px at -8% 110%, rgba(21,96,62,.05), transparent 60%); }
.cf-wrap{ position:relative; z-index:1; }
:focus-visible{ outline:3px solid rgba(31,164,99,.45); outline-offset:2px; border-radius:6px; }
.cf-container{ max-width:1240px; margin-inline:auto; padding-inline:clamp(14px,4vw,32px); }
.cf-focus{ max-width:860px; margin-inline:auto; }

.cf-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer;
  font-weight:700; font-size:.94rem; border-radius:12px; padding:.72rem 1.2rem; border:1px solid transparent;
  text-decoration:none; line-height:1; white-space:nowrap; font-family:inherit;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); }
.cf-btn svg.i{ width:18px; height:18px; }
.cf-btn-primary{ background:var(--cf-green); color:#fff; box-shadow:0 8px 18px -9px rgba(21,96,62,.75); }
.cf-btn-primary:hover{ background:var(--cf-green-deep); color:#fff; transform:translateY(-2px); box-shadow:0 14px 26px -10px rgba(21,96,62,.6); }
.cf-btn-ghost{ background:var(--cf-surface); color:var(--cf-ink); border-color:var(--cf-line-strong); }
.cf-btn-ghost:hover{ color:var(--cf-green); border-color:var(--cf-green-200); transform:translateY(-2px); }
.cf-btn-lock{ background:rgba(255,255,255,.7); color:var(--cf-muted); border:1px dashed var(--cf-line-strong); cursor:not-allowed; }
.cf-btn-lock svg.i{ stroke:var(--cf-muted); }

.cf-page-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:clamp(18px,3vw,28px) 0 .5rem; }
.cf-page-head h1{ font-size:clamp(1.35rem,2.6vw,1.8rem); font-weight:800; letter-spacing:-.02em; margin:0; display:flex; align-items:baseline; gap:.5rem; text-wrap:balance; }
.cf-page-head .count{ color:var(--cf-muted); font-weight:600; font-size:.9rem; }

.js .cf-reveal{ opacity:0; transform:translateY(14px); animation:cfUp .65s var(--ease) forwards; }
.js .cf-reveal.d1{ animation-delay:.04s } .js .cf-reveal.d2{ animation-delay:.12s }
@keyframes cfUp{ to{ opacity:1; transform:none } }
@keyframes cfPulse{ 0%{ box-shadow:0 0 0 0 rgba(31,164,99,.5) } 70%{ box-shadow:0 0 0 8px rgba(31,164,99,0) } 100%{ box-shadow:0 0 0 0 rgba(31,164,99,0) } }
@keyframes cfBlink{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
@media (prefers-reduced-motion:reduce){ .js .cf-reveal{ opacity:1; transform:none; animation:none; } *{ transition:none !important; animation:none !important; } }

/* ── §7.1 logo ── */
.cf-logo{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--cf-ink); }
.cf-logo-mark{ width:38px; height:38px; border-radius:11px; background:linear-gradient(150deg,var(--cf-green),var(--cf-green-deep)); display:grid; place-items:center; box-shadow:0 6px 16px -8px rgba(21,96,62,.7); }
.cf-logo-mark svg.i{ stroke:#fff; width:22px; height:22px; }
.cf-logo-name{ font-weight:800; letter-spacing:-.02em; font-size:1.06rem; } .cf-logo-name span{ color:var(--cf-green); }

/* ── §7.2 navigation ── */
.cf-topbar{ position:sticky; top:0; z-index:var(--z-nav); background:rgba(255,255,255,.86); backdrop-filter:saturate(1.3) blur(10px); border-bottom:1px solid var(--cf-line); }
.cf-topbar-inner{ height:72px; display:flex; align-items:center; gap:1rem; }
.cf-seg{ display:inline-flex; align-items:center; gap:3px; padding:4px; margin-inline:auto; background:var(--cf-green-050); border:1px solid var(--cf-line); border-radius:14px; }
.cf-seg a{ display:inline-flex; align-items:center; gap:.45rem; padding:.5rem 1rem; border-radius:10px; font-weight:600; font-size:.92rem; color:var(--cf-ink-soft); text-decoration:none; white-space:nowrap; transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.cf-seg a svg.i{ width:17px; height:17px; }
.cf-seg a:hover{ color:var(--cf-green); }
.cf-seg a.active{ background:#fff; color:var(--cf-green-deep); box-shadow:0 2px 8px -3px rgba(18,32,25,.2), 0 1px 2px rgba(18,32,25,.06); }
.cf-navright{ display:flex; align-items:center; gap:.5rem; }
.cf-iconbtn{ width:42px; height:42px; border-radius:12px; border:1px solid var(--cf-line); background:var(--cf-surface); color:var(--cf-ink-soft); display:grid; place-items:center; position:relative; cursor:pointer; text-decoration:none; transition:transform .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); }
.cf-iconbtn:hover{ transform:translateY(-1px); border-color:var(--cf-green-200); color:var(--cf-green); }
.cf-dot{ position:absolute; top:9px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--cf-amber-bright); box-shadow:0 0 0 2px #fff; }
.cf-mobilebar{ position:sticky; top:0; z-index:var(--z-nav); background:rgba(255,255,255,.9); backdrop-filter:saturate(1.3) blur(10px); border-bottom:1px solid var(--cf-line); }
.cf-mobilebar-inner{ height:60px; display:flex; align-items:center; }
.cf-tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:var(--z-tabbar); background:rgba(255,255,255,.94); backdrop-filter:saturate(1.3) blur(12px); border-top:1px solid var(--cf-line); padding-bottom:env(safe-area-inset-bottom); display:flex; }
.cf-tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:.1rem; padding:.55rem 0 .5rem; text-decoration:none; color:var(--cf-muted); font-weight:600; font-size:.66rem; }
.cf-tab svg.i{ width:22px; height:22px; }
.cf-tab.active{ color:var(--cf-green); } .cf-tab.active svg.i{ filter:drop-shadow(0 4px 6px rgba(31,164,99,.35)); }
@media(max-width:991.98px){ .cf-main{ padding-bottom:82px; } }

/* ── §7.4 status & live pills ── */
.cf-status{ display:inline-flex; align-items:center; gap:.4rem; background:var(--cf-green-100); color:var(--cf-green-deep); font-weight:700; font-size:.75rem; padding:.3rem .58rem; border-radius:var(--cf-pill); }
.cf-status svg.i{ width:14px; height:14px; stroke:var(--cf-green-bright); }
.cf-live{ display:inline-flex; align-items:center; gap:.32rem; background:var(--cf-green); color:#fff; font-size:.63rem; font-weight:800; letter-spacing:.05em; padding:.24rem .5rem; border-radius:var(--cf-pill); }
.cf-live .d{ width:6px; height:6px; border-radius:50%; background:#fff; animation:cfBlink 1.8s infinite; }

/* ── §7.5 action ribbon + docs strip ── */
.cf-ribbon{ background:var(--cf-amber-bg); border:1px solid var(--cf-amber-line); border-radius:var(--cf-radius); overflow:hidden; box-shadow:var(--cf-shadow); }
.cf-ribbon-top{ display:flex; align-items:center; gap:1rem; padding:clamp(15px,2.2vw,20px); }
.cf-warn-ic{ width:46px; height:46px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center; background:#fff; border:1px solid var(--cf-amber-line); color:var(--cf-amber-bright); }
.cf-warn-ic svg.i{ width:24px; height:24px; stroke-width:2.2; }
.cf-ribbon-txt{ flex:1 1 auto; min-width:0; }
.cf-ribbon-txt h2{ font-size:1.02rem; font-weight:800; letter-spacing:-.01em; margin:0; color:var(--cf-ink); }
.cf-ribbon-txt p{ margin:.15rem 0 0; font-size:.88rem; color:var(--cf-amber); font-weight:500; line-height:1.4; }
.cf-ribbon-docs{ display:flex; align-items:center; gap:.55rem 1rem; flex-wrap:wrap; padding:11px clamp(15px,2.2vw,20px); background:rgba(255,255,255,.55); border-top:1px solid var(--cf-amber-line); }
.cf-docs-label{ font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--cf-amber); }
.cf-chip{ display:inline-flex; align-items:center; gap:.35rem; font-size:.82rem; font-weight:600; padding:.28rem .6rem; border-radius:var(--cf-pill); background:#fff; border:1px solid var(--cf-line); color:var(--cf-ink-soft); }
.cf-chip svg.i{ width:15px; height:15px; }
.cf-chip.ok{ color:var(--cf-green-deep); border-color:var(--cf-green-100); background:var(--cf-green-050); } .cf-chip.ok svg.i{ stroke:var(--cf-green-bright); }
.cf-chip.pend{ color:var(--cf-amber); border-color:var(--cf-amber-line); } .cf-chip.pend svg.i{ stroke:var(--cf-amber-bright); }

/* ── §7.6 seller car tile ── */
.cf-tile{ position:relative; background:var(--cf-surface); border-radius:var(--cf-radius); box-shadow:var(--cf-shadow); overflow:hidden; isolation:isolate; }
.cf-tile::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.4px; z-index:3; pointer-events:none;
  background:linear-gradient(135deg, rgba(31,164,99,.55), rgba(21,96,62,.18) 38%, rgba(203,217,208,.6) 70%, rgba(203,217,208,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.cf-tile-head{ position:relative; display:flex; gap:1.1rem; padding:clamp(16px,2.3vw,22px); }
.cf-media{ flex:0 0 auto; width:160px; border-radius:14px; position:relative; overflow:hidden;
  background:radial-gradient(120% 120% at 30% 12%, #EAF3EC 0%, #DCEBE1 45%, #CFE3D6 100%); border:1px solid var(--cf-green-100); display:grid; place-items:center; }
.cf-media .car-glyph{ width:60px; height:60px; stroke:#8FB6A0; }
.cf-media::after{ content:""; position:absolute; top:-20%; left:-70%; width:45%; height:140%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); transform:skewX(-18deg); animation:cfSheen 1.5s var(--ease) .5s 1 both; }
@keyframes cfSheen{ 0%{ left:-70% } 100%{ left:130% } }
.cf-media-tag{ position:absolute; left:7px; top:7px; display:inline-flex; align-items:center; gap:.3rem; z-index:2; font-size:.67rem; font-weight:700; background:rgba(18,32,25,.72); color:#fff; padding:.2rem .45rem; border-radius:7px; }
.cf-media-tag svg.i{ width:12px; height:12px; stroke:#fff; }
.cf-plate{ position:absolute; right:7px; bottom:7px; display:flex; align-items:center; gap:.3rem; z-index:2; background:#122019; color:#fff; padding:.22rem .45rem; border-radius:7px; font-size:.64rem; font-weight:700; }
.cf-plate i{ width:14px; height:14px; border-radius:4px; background:var(--cf-green-bright); display:grid; place-items:center; font-size:.5rem; color:#08351f; font-weight:800; font-style:normal; }
.cf-tile-meta{ flex:1 1 auto; min-width:0; align-self:center; }
.cf-cartitle{ font-weight:800; letter-spacing:-.02em; font-size:1.32rem; margin:.55rem 0 .35rem; line-height:1.12; }
.cf-facts{ display:flex; flex-wrap:wrap; gap:.3rem .95rem; color:var(--cf-muted); font-size:.85rem; font-weight:500; }
.cf-facts span{ display:inline-flex; align-items:center; gap:.35rem; } .cf-facts svg.i{ width:15px; height:15px; stroke:var(--cf-muted); }
.cf-div{ height:1px; background:var(--cf-line); margin:0 clamp(16px,2.3vw,22px); }
.cf-insp{ display:flex; align-items:center; gap:.95rem; padding:clamp(14px,2vw,18px) clamp(16px,2.3vw,22px); }
.cf-grade{ position:relative; width:56px; height:56px; border-radius:15px; flex:0 0 auto; background:var(--cf-green); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; box-shadow:0 10px 22px -10px rgba(31,164,99,.75); }
.cf-grade::after{ content:""; position:absolute; inset:-4px; border-radius:19px; z-index:-1; background:radial-gradient(closest-side, rgba(31,164,99,.35), transparent); }
.cf-grade b{ font-size:1.3rem; font-weight:800; } .cf-grade small{ font-size:.55rem; font-weight:700; opacity:.85; letter-spacing:.05em; margin-top:2px; }
.cf-insp-body .t{ font-weight:800; font-size:1rem; letter-spacing:-.01em; } .cf-insp-body .d{ color:var(--cf-muted); font-size:.84rem; font-weight:500; margin-top:.12rem; }
.cf-tile-foot{ padding:clamp(14px,2vw,18px) clamp(16px,2.3vw,22px) clamp(16px,2.3vw,22px); background:var(--cf-green-050); border-top:1px solid var(--cf-line); }
.cf-sale-btns{ display:flex; gap:.65rem; } .cf-sale-btns .cf-btn{ flex:1; }
.cf-foot-note{ display:flex; align-items:flex-start; gap:.45rem; margin-top:.75rem; font-size:.8rem; color:var(--cf-muted); font-weight:500; line-height:1.4; }
.cf-foot-note svg.i{ width:15px; height:15px; margin-top:1px; stroke:var(--cf-muted); }
@media(max-width:991.98px){ .cf-media{ width:130px; } .cf-media .car-glyph{ width:48px; height:48px; } }

/* ── §7.7 journey tracker ── */
.cf-journey{ padding:clamp(8px,1.6vw,14px) 0 clamp(14px,2vw,18px); }
.cf-journey-h{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--cf-muted); margin:0 clamp(16px,2.3vw,22px) .85rem; display:flex; align-items:center; justify-content:space-between; }
.cf-journey-h .step-of{ color:var(--cf-green); }
.cf-carousel{ position:relative; overflow:hidden; cursor:grab; touch-action:pan-y;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.cf-carousel.grabbing{ cursor:grabbing; }
.cf-carousel-track{ position:relative; display:inline-flex; align-items:center; padding:6px 0; will-change:transform; }
.cf-cap{ display:inline-flex; align-items:center; gap:5px; padding:0 12px; flex:0 0 auto; }
.cf-cap i{ width:5px; height:5px; border-radius:50%; background:var(--cf-line-strong); display:block; }
.cf-chip-step{ position:relative; display:inline-flex; align-items:center; gap:.6rem; padding:.55rem .85rem; border-radius:14px; background:#fff; border:1px solid var(--cf-line); margin-right:1.5rem; flex:0 0 auto; }
.cf-chip-step::after{ content:"›"; position:absolute; right:-1.05rem; top:50%; transform:translateY(-50%); color:var(--cf-line-strong); font-size:1.25rem; font-weight:700; line-height:0; }
.cf-chip-step.is-done::after{ color:var(--cf-green-bright); }
.cf-chip-step.is-current{ border-color:var(--cf-green-bright); background:var(--cf-green-050); box-shadow:0 0 0 3px rgba(31,164,99,.14), 0 12px 24px -12px rgba(21,96,62,.5); }
.cf-node{ position:relative; flex:0 0 auto; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#fff; }
.cf-node svg.i{ width:14px; height:14px; }
.cf-node.done{ background:var(--cf-green); } .cf-node.done svg.i{ stroke:#fff; stroke-width:2.6; }
.cf-node.current{ background:#fff; border:2px solid var(--cf-green-bright); }
.cf-node.current .core{ width:11px; height:11px; border-radius:50%; background:var(--cf-green-bright); box-shadow:0 0 0 0 rgba(31,164,99,.55); animation:cfPulse 2s infinite; }
.cf-node.todo{ background:#fff; border:2px solid var(--cf-line-strong); } .cf-node.todo svg.i{ stroke:var(--cf-muted); }
.cf-step-label{ font-weight:700; font-size:.86rem; letter-spacing:-.01em; white-space:nowrap; }
.cf-chip-step.is-current .cf-step-label{ color:var(--cf-green-deep); }
.cf-chip-step.is-todo .cf-step-label{ color:var(--cf-muted); }
.cf-step-sub{ font-size:.72rem; color:var(--cf-muted); margin-top:.06rem; font-weight:500; white-space:nowrap; }

/* ── §7.8 filter sidebar + drawer ── */
.cf-browse{ display:block; padding-bottom:1rem; }
@media(min-width:992px){ .cf-browse{ display:flex; gap:1.6rem; align-items:flex-start; } }
.cf-filters{ flex:0 0 278px; position:sticky; top:88px; }
.cf-results{ flex:1 1 auto; min-width:0; }
.cf-filter-card{ background:#fff; border:1px solid var(--cf-line); border-radius:16px; padding:1.15rem 1.2rem; box-shadow:var(--cf-shadow-card); }
.cf-filter-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; } .cf-filter-head b{ font-weight:800; font-size:1.05rem; }
.cf-clear{ font-size:.83rem; font-weight:700; color:var(--cf-green); text-decoration:none; }
.cf-fgroup{ padding:1.05rem 0; border-top:1px solid var(--cf-line); } .cf-fgroup:first-of-type{ border-top:0; padding-top:0; }
.cf-flabel{ font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--cf-muted); margin-bottom:.7rem; }
.cf-chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.cf-fchip{ border:1px solid var(--cf-line-strong); background:#fff; color:var(--cf-ink-soft); font-weight:600; font-size:.82rem; padding:.4rem .78rem; border-radius:var(--cf-pill); cursor:pointer; font-family:inherit; transition:background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.cf-fchip:hover{ border-color:var(--cf-green-200); color:var(--cf-green); }
.cf-fchip.is-on{ background:var(--cf-green); border-color:var(--cf-green); color:#fff; }
.cf-search{ display:flex; align-items:center; gap:.5rem; border:1px solid var(--cf-line-strong); border-radius:10px; padding:.5rem .7rem; margin-bottom:.7rem; }
.cf-search svg.i{ stroke:var(--cf-muted); width:16px; height:16px; } .cf-search input{ border:0; outline:0; flex:1; min-width:0; font-size:.88rem; background:transparent; font-family:inherit; color:var(--cf-ink); }
.cf-checklist{ max-height:216px; overflow:auto; scrollbar-width:thin; }
.cf-check{ display:flex; align-items:center; gap:.6rem; padding:.42rem .1rem; cursor:pointer; font-size:.9rem; font-weight:600; color:var(--cf-ink-soft); }
.cf-check input{ width:17px; height:17px; accent-color:var(--cf-green); flex:0 0 auto; cursor:pointer; }
.cf-check span{ flex:1 1 auto; } .cf-check em{ font-style:normal; font-size:.8rem; color:var(--cf-muted); font-weight:600; }
.cf-select-wrap{ position:relative; }
.cf-select{ width:100%; appearance:none; -webkit-appearance:none; border:1px solid var(--cf-line-strong); border-radius:10px; padding:.62rem .9rem; font-size:.9rem; font-weight:600; color:var(--cf-ink); background:#fff; cursor:pointer; font-family:inherit; }
.cf-select-wrap svg.i{ position:absolute; right:.7rem; top:50%; transform:translateY(-50%); pointer-events:none; stroke:var(--cf-muted); }
.cf-drawer{ --bs-offcanvas-width:340px; } #drawerBody .cf-filter-card{ border:0; box-shadow:none; padding:0; }
.cf-drawer-foot{ padding:.9rem 1rem calc(.9rem + env(safe-area-inset-bottom)); border-top:1px solid var(--cf-line); background:#fff; }

/* ── §7.9 auction card + timer ── */
.cf-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,2.2vw,14px); }
@media(min-width:992px){ .cf-grid{ grid-template-columns:repeat(3,1fr); gap:18px; } }
.cf-ac{ position:relative; background:#fff; border:1px solid var(--cf-line); border-radius:16px; overflow:hidden; box-shadow:var(--cf-shadow-card); display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.cf-ac:hover{ transform:translateY(-3px); box-shadow:0 2px 4px rgba(18,32,25,.05), 0 26px 44px -22px rgba(18,32,25,.26); border-color:var(--cf-green-200); }
.cf-ac-media{ position:relative; aspect-ratio:4/3; background:radial-gradient(120% 120% at 30% 12%, #EAF3EC, #CFE3D6); display:grid; place-items:center; border-bottom:1px solid var(--cf-green-100); overflow:hidden; }
.cf-ac-media img{ width:100%; height:100%; object-fit:cover; }
.cf-ac-media .car-glyph{ width:46px; height:46px; stroke:#8FB6A0; }
.cf-timer{ position:absolute; right:8px; top:8px; display:inline-flex; align-items:center; gap:.28rem; background:rgba(18,32,25,.78); color:#fff; font-size:.68rem; font-weight:700; padding:.24rem .45rem; border-radius:7px; font-variant-numeric:tabular-nums; }
.cf-timer svg.i{ width:12px; height:12px; stroke:#fff; } .cf-timer.low{ background:var(--cf-amber); }
.cf-ac-grade{ position:absolute; left:8px; bottom:8px; width:34px; height:34px; border-radius:10px; background:var(--cf-green); color:#fff; display:grid; place-items:center; font-weight:800; font-size:.85rem; box-shadow:0 6px 14px -6px rgba(31,164,99,.7); }
.cf-plate-sm{ position:absolute; right:8px; bottom:8px; display:flex; align-items:center; gap:.25rem; background:#122019; color:#fff; padding:.18rem .4rem; border-radius:6px; font-size:.58rem; font-weight:700; }
.cf-plate-sm svg.i{ width:11px; height:11px; stroke:var(--cf-green-bright); }
.cf-ac-body{ padding:.8rem .9rem 1rem; display:flex; flex-direction:column; flex:1 1 auto; }
.cf-ac-title{ font-weight:800; font-size:.98rem; letter-spacing:-.01em; line-height:1.18; }
.cf-ac-specs{ color:var(--cf-muted); font-size:.79rem; font-weight:500; margin-top:.2rem; }
.cf-ac-bid{ display:flex; align-items:flex-end; justify-content:space-between; margin-top:.6rem; gap:.4rem; }
.cf-bid-l{ font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--cf-muted); }
.cf-bid-v{ font-weight:800; font-size:1.1rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-top:.1rem; }
.cf-bid-n{ font-size:.73rem; color:var(--cf-muted); font-weight:600; white-space:nowrap; }
.cf-met{ display:inline-flex; align-items:center; gap:.25rem; font-size:.7rem; font-weight:700; color:var(--cf-green); margin-top:.1rem; } .cf-met svg.i{ width:12px; height:12px; stroke:var(--cf-green-bright); }
.cf-ac-cta{ margin-top:.75rem; width:100%; padding:.62rem 1rem; font-size:.9rem; }

/* ── §7.10 toolbar / sort / applied chips ── */
.cf-sort{ display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--cf-line-strong); border-radius:12px; padding:.6rem .95rem; font-weight:600; font-size:.9rem; color:var(--cf-ink); cursor:pointer; }
.cf-sort svg.i{ width:16px; height:16px; stroke:var(--cf-muted); } .cf-sort .lbl{ color:var(--cf-muted); }
.cf-toolbar{ display:flex; gap:.6rem; padding:.4rem 0 .2rem; }
.cf-tool-btn{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; background:#fff; border:1px solid var(--cf-line-strong); border-radius:12px; padding:.65rem 1rem; font-weight:700; font-size:.9rem; color:var(--cf-ink); cursor:pointer; }
.cf-tool-btn svg.i{ width:17px; height:17px; }
.cf-badge{ background:var(--cf-green); color:#fff; font-size:.72rem; font-weight:800; min-width:19px; height:19px; padding:0 5px; border-radius:var(--cf-pill); display:inline-grid; place-items:center; }
.cf-applied{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding:.3rem 0 1rem; }
.cf-applied-chip{ display:inline-flex; align-items:center; gap:.4rem; background:var(--cf-green-100); color:var(--cf-green-deep); font-weight:700; font-size:.82rem; padding:.32rem .3rem .32rem .7rem; border-radius:var(--cf-pill); }
.cf-applied-chip svg.i{ width:14px; height:14px; cursor:pointer; opacity:.75; } .cf-applied-chip svg.i:hover{ opacity:1; }

/* ── §7.11 forms ── */
.cf-field{ margin-bottom:1rem; }
.cf-field label{ display:block; font-size:.8rem; font-weight:700; color:var(--cf-ink-soft); margin-bottom:.4rem; }
.cf-input{ width:100%; border:1px solid var(--cf-line-strong); border-radius:12px; padding:.75rem .9rem; font-size:.95rem; font-family:inherit; color:var(--cf-ink); background:#fff; transition:border-color .18s var(--ease), box-shadow .18s var(--ease); }
.cf-input:focus{ outline:none; border-color:var(--cf-green-bright); box-shadow:0 0 0 3px rgba(31,164,99,.14); }
.cf-help{ font-size:.78rem; color:var(--cf-muted); margin-top:.35rem; }
.cf-error{ color:var(--cf-amber); }

/* ── card primitive + empty state (shared) ── */
.cf-card{ background:var(--cf-surface); border:1px solid var(--cf-line); border-radius:var(--cf-radius); box-shadow:var(--cf-shadow-card); }
.cf-empty{ text-align:center; background:var(--cf-surface); border:1px solid var(--cf-line); border-radius:var(--cf-radius); box-shadow:var(--cf-shadow-card); padding:clamp(28px,6vw,52px) clamp(20px,4vw,40px); }
.cf-empty .ic{ width:66px; height:66px; border-radius:20px; margin:0 auto 1rem; display:grid; place-items:center; background:var(--cf-green-050); border:1px solid var(--cf-green-100); color:var(--cf-green-bright); }
.cf-empty .ic svg.i{ width:30px; height:30px; }
.cf-empty h3{ font-weight:800; font-size:1.1rem; margin:0 0 .35rem; }
.cf-empty p{ color:var(--cf-muted); font-size:.92rem; margin:0 auto 1.2rem; max-width:34ch; }