/* ============================================================
   BikeBid — Design Language v2
   "Soft appraisal workspace" — muted neutrals, frosted sidebar,
   floating page card, restrained blue accent.
   Load AFTER app.css. Page-scoped (only pages that opt in load this
   file), so it is safe to redefine :root tokens here.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ---------------- seamless page-to-page navigation ----------------
   Opts every converted page into the browser's native cross-document
   View Transitions API. This is NOT a JS router — every click still
   does a real navigation (URL changes normally, back/forward just
   works, every page's own JS runs fresh exactly as it does today).
   The browser just animates the swap instead of hard-cutting to a
   blank page.
   The sidebar gets its own view-transition-name so the browser treats
   it as the SAME element across the navigation — it holds perfectly
   still with zero flash/reload, while only the page card's content
   crossfades. The background gradient is intentionally left UNnamed
   (see body::before further down — it's static, no drift animation)
   so it just rides along inside the root group's own instant swap
   below, rather than being pinned as its own position:fixed group —
   that avoids browser-side geometry/viewport quirks that come with
   morphing a separately-named, oversized fixed element. Purely
   additive: unsupported browsers (Safari, Firefox as of writing) just
   ignore this and get today's normal instant navigation — nothing
   breaks, nothing regresses. */
@view-transition{ navigation: auto; }
.sidebar{ view-transition-name: bb-sidebar; }
.main{ view-transition-name: bb-main-card; }

/* Everything else (background gradient, topbar padding/gap, etc.)
   falls into the implicit root group. It's all static/identical
   across pages already, so kill its default cross-fade — an instant,
   invisible swap reads as "nothing changed" rather than a flash. */
::view-transition-old(root),
::view-transition-new(root){ animation: none; }

/* The sidebar is pixel-identical on every page, so the browser's
   default group animation would just crossfade two identical images
   against each other — a pointless flash. Snap it in with zero
   animation so it reads as never having changed at all. */
::view-transition-group(bb-sidebar),
::view-transition-old(bb-sidebar),
::view-transition-new(bb-sidebar){ animation: none !important; }

/* Keep the card's own crossfade quick and contained so it reads as
   "this card updated", not "the page reloaded". */
::view-transition-old(bb-main-card),
::view-transition-new(bb-main-card){ animation-duration: 0.18s; }

@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation-duration: 0.001ms !important; }
}

:root{
  /* the "--blue" token is retained for backwards compatibility (every
     page's CSS still references it), but it's no longer electric blue —
     it's aliased to the same teal used across the redesign, since blue
     accents kept getting flagged for replacement page after page.
     Anything still reading var(--blue) — including reports.js's
     accent() helper, which reads this at runtime — picks up teal
     automatically. */
  --blue:#1f7d5f;
  --blue-d:color-mix(in oklab, var(--blue) 84%, #000);
  --blue-50:#e4f3ee;
  --blue-100:color-mix(in oklab, var(--blue) 20%, #fff);

  /* soft teal/green — positive / complete */
  --green:#2f9e7a;
  --green-50:#e4f3ee;
  --green-700:#1f7d5f;

  /* warm cream/orange — attention / waiting */
  --amber:#c8862c;
  --amber-50:#faf1e2;
  --amber-700:#96631c;

  /* coral/red — lost, declined, expired */
  --red:#c4523f;
  --red-50:#f9ebe8;
  --red-700:#9c3f30;

  /* charcoal ink scale */
  --ink:#232a2f;
  --ink-2:#565f66;
  --ink-3:#818891;
  --ink-4:#aeb4bb;

  /* warm neutral surfaces */
  --bg:#eef1f0;
  --card:#ffffff;
  --line:#e7e5df;
  --line-2:#f0eee8;

  --r-lg:22px;
  --r-md:14px;
  --r-sm:10px;
  --shadow:0 1px 2px rgba(30,32,28,.03), 0 10px 30px rgba(30,32,28,.05);
  --shadow-sm:0 1px 2px rgba(30,32,28,.03);
  --sidebar:264px;

  font-family:'Plus Jakarta Sans', 'Poppins', system-ui, sans-serif;
}

:root[data-theme="dark"]{
  --blue-50:color-mix(in oklab, var(--blue) 22%, var(--card));
  --blue-100:color-mix(in oklab, var(--blue) 34%, var(--card));
  --green:#3ec295;
  --green-50:color-mix(in oklab, var(--green) 20%, var(--card));
  --green-700:#7be0bf;
  --amber:#e0a752;
  --amber-50:color-mix(in oklab, var(--amber) 20%, var(--card));
  --amber-700:#f0c688;
  --red:#e0796a;
  --red-50:color-mix(in oklab, var(--red) 20%, var(--card));
  --red-700:#f2a99d;

  --ink:#eef1f0;
  --ink-2:#c1c7c4;
  --ink-3:#8d9490;
  --ink-4:#5e6460;

  --bg:#0d1012;
  --card:#1f2429;
  --line:#343c41;
  --line-2:#2a3136;
}

body{
  font-family:'Plus Jakarta Sans', 'Poppins', system-ui, sans-serif;
  background:var(--bg);
  position:relative;
}
/* background gradient — a fixed, oversized layer behind everything.
   Static (no drift animation): it's pinned via view-transition-name
   across every page in the app shell, so any animation restarting its
   own timeline on each fresh document load would show through the
   frosted sidebar as a colour shift/flash during navigation. A static
   gradient is pixel-identical on every page, so it truly never changes. */
body::before{
  content:"";
  position:fixed; inset:-40%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 102% -8%, color-mix(in oklab, var(--amber) 44%, transparent), transparent 62%),
    radial-gradient(1000px 640px at -6% 106%, color-mix(in oklab, var(--green) 40%, transparent), transparent 62%),
    radial-gradient(900px 620px at 50% 40%, color-mix(in oklab, var(--blue) 20%, transparent), transparent 65%),
    radial-gradient(800px 560px at 15% 10%, color-mix(in oklab, var(--red) 14%, transparent), transparent 60%);
}
:root[data-theme="dark"] body::before{
  background:
    radial-gradient(1200px 700px at 102% -8%, color-mix(in oklab, var(--amber) 24%, transparent), transparent 62%),
    radial-gradient(1000px 640px at -6% 106%, color-mix(in oklab, var(--green) 26%, transparent), transparent 62%),
    radial-gradient(900px 620px at 50% 40%, color-mix(in oklab, var(--blue) 18%, transparent), transparent 65%),
    radial-gradient(800px 560px at 15% 10%, color-mix(in oklab, var(--red) 12%, transparent), transparent 60%);
}

/* ---------------- shell: frosted sidebar + floating page card ---------------- */
/* the page card and sidebar each handle their own internal scroll
   (.main-scroll), so the document itself should never scroll — this
   stops a stray outer scrollbar from appearing on pages where content
   is a hair taller than 100vh */
html, body{ height:100%; overflow:hidden; }

.app{ display:flex; align-items:flex-start; gap:0; height:100vh; padding:16px; box-sizing:border-box; background:transparent; }

.sidebar{
  background:color-mix(in oklab, var(--card) 62%, transparent);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid color-mix(in oklab, #fff 50%, var(--line));
  border-radius:var(--r-lg);
  border-top-right-radius:0; border-bottom-right-radius:0; border-right:none;
  box-shadow:0 1px 1px rgba(30,32,28,.02), 0 12px 34px rgba(30,32,28,.05);
  top:16px; height:calc(100vh - 32px);
}
:root[data-theme="dark"] .sidebar{
  background:color-mix(in oklab, color-mix(in oklab, var(--card), #fff 14%) 88%, transparent);
  border-color:color-mix(in oklab, #fff 6%, var(--line));
}

/* collapse arrow sits inline at the end of the brand row — plain icon, no box */
.brand{ padding-bottom:18px; }
.brand .nav-collapse{ margin:0 0 0 auto; align-self:center; width:24px; height:24px; padding:0;
  border-radius:0; border:none; background:none; color:var(--ink-3); }
.brand .nav-collapse:hover{ background:none; color:var(--ink); }
.brand .nav-collapse i[data-lucide]{ width:18px; height:18px; }
.app.collapsed .brand{ flex-direction:column; gap:10px; padding-bottom:18px; }
.app.collapsed .brand .nav-collapse{ margin:0; }

/* wordmark — plain dark slate, no logo image */
.brand .word{ color:#2c333a; }
.brand .word b{ color:#2c333a; font-weight:800; }
:root[data-theme="dark"] .brand .word,
:root[data-theme="dark"] .brand .word b{ color:var(--ink); }
.brand .mark{ display:none; font-size:26px; line-height:1.2; font-weight:800; color:#2c333a; }
:root[data-theme="dark"] .brand .mark{ color:var(--ink); }
.app.collapsed .brand .mark{ display:block; }

/* inset nav items from the sidebar's right edge so the active pill
   doesn't run flush against the page card that overlaps it */
.nav a{ margin-right:10px; padding:8px 10px; font-size:11px; gap:10px; }
.nav a i[data-lucide]{ width:11px; height:11px; }
.nav a.active{ background:var(--card); color:var(--ink); box-shadow:var(--shadow-sm); }
.nav a.active i[data-lucide]{ color:var(--blue); }
/* dark mode's sidebar is now lighter than plain --card, so the active
   pill needs its own lighter tone to still read as a highlight and
   not a shadow */
:root[data-theme="dark"] .nav a.active{ background:color-mix(in oklab, var(--card), #fff 22%); }
.nav .bell-nav .bell-badge{ background:var(--blue); }
.app.collapsed .nav a{ margin-right:0; }

/* borderless, compact profile block — just avatar + name by default;
   company/role flip open on hover (or while the menu is open).
   Inset from the sidebar's right edge so its hover background never
   touches the overlapping page card. */
.profile{ padding:6px 4px; gap:8px; border-radius:12px; border:none; margin-right:10px; perspective:600px; }
.app.collapsed .profile{ margin-right:0; padding:6px 0; }
.profile .pic{ width:28px; height:28px; background:#e2eeeb; color:#5c7d75; }
:root[data-theme="dark"] .profile .pic{ background:color-mix(in oklab, var(--green) 16%, var(--card)); color:#8fb3aa; }
.profile .pic i[data-lucide]{ width:16px; height:16px; }
.profile .nm{ font-size:12.5px; line-height:1.2; }
.profile .org,
.profile .role{
  font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px;
  transform-origin:top center; transform:rotateX(-90deg); opacity:0; max-height:0;
  transition:transform .3s cubic-bezier(.34,1.3,.64,1), opacity .2s ease, max-height .3s ease;
}
.profile .role{ margin-top:1px; }
.profile:hover .org, .profile:hover .role,
.profile.menu-open .org, .profile.menu-open .role{
  transform:rotateX(0deg); opacity:1; max-height:16px;
}
.profile .chev{ display:none; }

/* page card — the main floating working surface, overlapping the sidebar's
   flat right edge so it reads as one continuous surface. Left corners
   are square (matching the sidebar's flat right edge) so there's no
   rounded-corner arc gap revealing the background behind it — that
   arc gap was the real cause of the seam, not spacing/overlap, so no
   overlap hack is needed at all: the two just sit flush.
   The card frame itself stays pinned to the viewport (like the sidebar);
   .main-scroll is the single scroll container inside it, with the topbar
   sticky at its top and a blurred fade masking the seam as content
   scrolls underneath — no hard cut-off line. */
.main{
  flex:1; min-width:0; background:var(--card); border-radius:var(--r-lg);
  border-top-left-radius:0; border-bottom-left-radius:0;
  border:1px solid color-mix(in oklab, #fff 50%, var(--line)); border-left:none;
  box-shadow:0 1px 1px rgba(30,32,28,.02), 0 16px 44px rgba(30,32,28,.06);
  padding:0; overflow:hidden;
  margin-left:0; position:sticky; top:16px; z-index:2;
  height:calc(100vh - 32px);
}
:root[data-theme="dark"] .main{ border-color:color-mix(in oklab, #fff 4%, var(--line)); }

.main-scroll{ height:100%; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; }
.main-scroll::-webkit-scrollbar{ display:none; }

.page-topbar{ display:flex; align-items:center; justify-content:space-between; padding:22px 32px;
  position:sticky; top:0; z-index:3; background:color-mix(in oklab, var(--card) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.page-topbar::after{ content:""; position:absolute; left:0; right:0; top:100%; height:26px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  mask-image:linear-gradient(to bottom, black, transparent);
  -webkit-mask-image:linear-gradient(to bottom, black, transparent);
  pointer-events:none; }
.page-crumb{ font-size:15px; color:var(--ink-3); display:flex; align-items:center; gap:8px; }
.page-crumb b{ color:var(--ink); font-weight:700; }
.page-crumb .sep{ color:var(--ink-4); }
.page-bell{ width:30px; height:30px; border-radius:9px; border:1px solid var(--line); background:var(--card);
  color:var(--ink-3); display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative;
  transition:background .12s, color .12s, border-color .12s; }
.page-bell:hover{ background:var(--bg); color:var(--ink); }
.page-bell i[data-lucide]{ width:14px; height:14px; }
.page-bell .bell-badge{ position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px;
  border-radius:8px; background:var(--blue); color:#fff; font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center; line-height:1;
  text-align:center; border:2px solid var(--card); }

.page-content{ padding:6px 32px 32px; display:flex; flex-direction:column; gap:20px; }

/* generic .card (filters rail, tables, panels on other pages) gets the
   same very-slightly-darker tint as the dashboard's .dv2-card tiles,
   so every page reads consistently once it adopts this stylesheet */
.card{ background:color-mix(in oklab, var(--card), var(--ink) 1.4%); }
/* light mode's subtle "mix toward ink" trick barely registers once
   --card itself is dark, so dark mode instead lifts tiles with a
   visible lighter tint + a touch more shadow — standard dark-UI
   elevation (surfaces get lighter, not darker, as they float higher) */
:root[data-theme="dark"] .card{ background:color-mix(in oklab, var(--card), #fff 6%);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 6px 18px rgba(0,0,0,.28); }

/* ---------------- de-electric-blue the shared button/table components ----------------
   Blue stays only for small accents (focus rings, tiny badges/dots,
   text links, key icons) per the design language. Solid "block"
   buttons — primary CTA, active tab, active pager, active toggles,
   the row action button — move to charcoal/slate instead. */
.btn.primary{ background:#232a2f; color:#fff; box-shadow:0 6px 18px rgba(35,42,47,.22); }
.btn.primary:hover{ background:#000; }
:root[data-theme="dark"] .btn.primary{ background:var(--card); color:var(--ink); border:1px solid var(--line); box-shadow:none; }
:root[data-theme="dark"] .btn.primary:hover{ background:var(--bg); }

.atab.active{ background:#232a2f; border-color:#232a2f; color:#fff; }
.atab.active .ct{ background:rgba(255,255,255,.18); color:#fff; }

.apager button.active{ background:#232a2f; border-color:#232a2f; color:#fff; }

.calc-toggle-btn.active{ background:var(--bg); border-color:var(--ink-4); color:var(--ink); }

.act-btn{ color:var(--ink-2); }
.act-btn:hover{ background:var(--bg); border-color:var(--ink-4); }

.clear-filters{ background:var(--bg); color:var(--ink-2); }
.clear-filters:hover{ background:color-mix(in oklab, var(--ink-4) 16%, var(--bg)); }

.calc-result-val.valid{ color:var(--green-700); }

.density-btn.active{ background:var(--bg); color:var(--ink); }

/* .btn.outline used across several pages (Wholesalers modals, etc.) —
   was blue text/hover-border, now slate */
.btn.outline{ color:var(--ink-2); }
.btn.outline:hover{ border-color:var(--ink-4); }

/* ---------------- wholesalers page ---------------- */
.wstat .wico{ background:#e2eeeb; color:#4c7a70; }
:root[data-theme="dark"] .wstat .wico{ background:color-mix(in oklab, var(--green) 16%, var(--card)); color:#8fb3aa; }

.wtab.active{ background:#232a2f; color:#fff; }

.wsearch input:focus,
.fld input:focus, .fld select:focus,
.brand-search input:focus{ border-color:#2f9e7a; box-shadow:0 0 0 3px color-mix(in oklab, #2f9e7a 14%, transparent); }

.pill-pref{ color:var(--green-700); background:var(--green-50); }

.pager button.active{ background:#232a2f; border-color:#232a2f; color:#fff; }

.wside .card-h .va{ color:#3f474e; }
:root[data-theme="dark"] .wside .card-h .va{ color:var(--ink-2); }

.tp-row:first-of-type .tp-rank{ background:var(--green-50); color:var(--green-700); }

.ra-ico{ background:var(--bg); color:var(--ink-3); }
.ra-s b{ color:var(--ink); }
.ra-foot{ color:#3f474e; }
:root[data-theme="dark"] .ra-foot{ color:var(--ink-2); }

.brand-pick label:hover{ border-color:#2f9e7a; }
.brand-pick input{ accent-color:#2f9e7a; }
.brand-pick label.on{ border-color:#2f9e7a; background:var(--green-50); color:var(--green-700); }

.vd-ava{ background:#e2eeeb; color:#4c7a70; }
:root[data-theme="dark"] .vd-ava{ background:color-mix(in oklab, var(--green) 16%, var(--card)); color:#8fb3aa; }

/* "inhouse" row accent stripe — was hardcoded blue */
.wt-row.wt-inhouse{ box-shadow:inset 3px 0 0 #2f9e7a; background:var(--green-50); }
.wt-row.wt-inhouse:hover{ background:color-mix(in oklab, var(--green) 14%, var(--card)); }

/* amber-family badges/notes that were hardcoded hex instead of tokens */
.pill-new-tag{ color:var(--amber-700); background:var(--amber-50); }
.pill-pending-tag{ color:var(--amber-700); background:var(--amber-50); }
.badge.amber{ background:var(--amber-50); color:var(--amber-700); }
.reqnote{ background:var(--amber-50); border-color:color-mix(in oklab, var(--amber) 30%, transparent); color:var(--amber-700); }
.reqnote i[data-lucide]{ color:var(--amber); }
.reqnote b{ color:var(--amber-700); }

/* ---------------- reports page ---------------- */
.ract .rico.won{ background:var(--amber-50); color:var(--amber-700); }
.ract .rico.lost{ background:var(--red-50); color:var(--red); }

/* ---------------- dashboard v2 components ---------------- */
/* independent columns — each stacks its own cards, so a short card in
   one column doesn't leave a gap before the next card below it */
.dv2-cols{ display:grid; grid-template-columns:1.05fr 1fr; gap:20px; align-items:start; }
.dv2-col{ display:flex; flex-direction:column; gap:20px; min-width:0; }
@media (max-width:1180px){ .dv2-cols{ grid-template-columns:1fr; } }

/* very slightly darker than the page card so the inner tiles read as
   distinct surfaces without looking like separate white cards */
.dv2-card{ background:color-mix(in oklab, var(--card), var(--ink) 1.4%); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px;
  transition:transform .18s cubic-bezier(.2,.8,.3,1.1), box-shadow .18s ease, border-color .18s ease; }
.dv2-card:hover{ transform:scale(1.012); box-shadow:0 10px 26px rgba(30,32,28,.07); border-color:color-mix(in oklab, var(--ink-4) 40%, var(--line)); }
:root[data-theme="dark"] .dv2-card{ background:color-mix(in oklab, var(--card), #fff 6%);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 6px 18px rgba(0,0,0,.28); }
.dv2-card.flush{ padding:0; }
.dv2-h{ font-size:19px; font-weight:800; letter-spacing:-.01em; margin:0 0 4px; }
.dv2-sub{ font-size:13.5px; color:var(--ink-3); margin:0 0 20px; }

.dv2-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
.dv2-stat{ display:flex; flex-direction:column; gap:12px; }
.dv2-stat .ico{ width:38px; height:38px; border-radius:11px; background:var(--bg); color:var(--ink-2);
  display:flex; align-items:center; justify-content:center; }
.dv2-stat .ico i[data-lucide]{ width:18px; height:18px; }
.dv2-stat.ok .ico{ background:var(--green-50); color:var(--green-700); }
.dv2-stat .lbl{ font-size:13px; color:var(--ink-3); font-weight:600; }
.dv2-stat .big{ font-size:26px; font-weight:800; letter-spacing:-.02em; }

.dv2-quick-lbl{ font-size:12px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; margin:0 0 12px; }
.dv2-quick{ display:flex; gap:10px; flex-wrap:wrap; }
.dv2-btn{ display:inline-flex; align-items:center; gap:9px; font-family:inherit; font-weight:700; font-size:14px;
  padding:12px 18px; border-radius:var(--r-md); cursor:pointer; border:1px solid transparent;
  transition:transform .08s ease, box-shadow .12s ease, background .12s; }
.dv2-btn:hover{ transform:translateY(-1px); }
.dv2-btn.dark{ background:var(--ink); color:var(--card); }
:root[data-theme="dark"] .dv2-btn.dark{ background:var(--card); color:var(--ink); border-color:var(--line); }
.dv2-btn.ghost{ background:var(--card); color:var(--ink); border-color:var(--line); }
.dv2-btn.ghost:hover{ border-color:var(--ink-4); }
.dv2-btn i[data-lucide]{ width:16px; height:16px; }

/* featured appraisal — show the whole photo (no cropping). Letterbox
   background matches the card itself (not the app --bg) so any
   uncovered space blends in seamlessly instead of reading as a
   separate bordered frame. */
.dv2-feat-photo{ width:100%; height:260px; border-radius:var(--r-md); background:inherit; overflow:hidden;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.dv2-feat-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.dv2-feat-photo i[data-lucide]{ width:40px; height:40px; color:var(--ink-4); }
.dv2-feat-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.dv2-feat-title{ font-size:17px; font-weight:800; letter-spacing:-.01em; }
.dv2-feat-rows{ display:flex; flex-direction:column; }
.dv2-feat-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line-2); font-size:13.5px; }
.dv2-feat-row:last-child{ border-bottom:none; }
.dv2-feat-row .k{ color:var(--ink-3); }
.dv2-feat-row .v{ font-weight:700; color:var(--ink); }
.dv2-feat-link{ display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; color:#3f474e;
  margin-top:16px; cursor:pointer; width:fit-content; }
:root[data-theme="dark"] .dv2-feat-link{ color:var(--ink-2); }
.dv2-feat-link i[data-lucide]{ width:15px; height:15px; }
.dv2-feat-link:hover{ text-decoration:underline; }

/* chips */
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; }
.chip.green{ background:var(--green-50); color:var(--green-700); }
.chip.amber{ background:var(--amber-50); color:var(--amber-700); }
.chip.red{ background:var(--red-50); color:var(--red-700); }
.chip.gray{ background:var(--bg); color:var(--ink-3); }
.chip.blue{ background:var(--blue-50); color:var(--blue); }

/* needs attention / recent activity lists */
.dv2-list{ display:flex; flex-direction:column; }
.dv2-item{ display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--line-2); cursor:pointer; }
.dv2-item:last-child{ border-bottom:none; }
.dv2-item .ico{ width:34px; height:34px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; }
.dv2-item .ico.amber{ background:var(--amber-50); color:var(--amber-700); }
.dv2-item .ico.green{ background:var(--green-50); color:var(--green-700); }
.dv2-item .ico.red{ background:var(--red-50); color:var(--red-700); }
.dv2-item .ico.gray{ background:var(--bg); color:var(--ink-3); }
.dv2-item .ico i[data-lucide]{ width:16px; height:16px; }
.dv2-item .body{ flex:1; min-width:0; }
.dv2-item .nm{ font-size:14px; font-weight:700; color:var(--ink); }
.dv2-item .ds{ font-size:12.5px; color:var(--ink-3); margin-top:1px; }
.dv2-item .time{ font-size:12px; color:var(--ink-4); flex:none; }
.dv2-item .chev{ color:var(--ink-4); flex:none; }
.dv2-item .chev i[data-lucide]{ width:16px; height:16px; }
.dv2-foot-link{ display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; color:#3f474e;
  margin-top:14px; cursor:pointer; width:fit-content; }
:root[data-theme="dark"] .dv2-foot-link{ color:var(--ink-2); }
.dv2-foot-link i[data-lucide]{ width:15px; height:15px; }
.dv2-foot-link:hover{ text-decoration:underline; }
.dv2-empty{ padding:26px 0; text-align:center; color:var(--ink-4); font-size:13.5px; font-weight:600; }