/* =============================================================
   DECIPHR — Slate Carbon dark theme
   ============================================================= */

:root {
  /* Tell the browser this UI is dark so native widgets (date pickers,
     calendar overlays, scrollbars, autofill, <select> dropdowns) inherit
     the right palette and don't leak white surfaces. */
  color-scheme: dark;

  /* Background layers */
  --bg-deep:        #09090B;
  --bg-base:        #0F0F12;
  --bg-elevated:    #18181C;
  --bg-card:        rgba(24, 24, 28, 0.90);
  --bg-card-solid:  #18181C;
  --bg-hover:       rgba(255, 255, 255, 0.04);
  --bg-active:      rgba(45, 212, 191, 0.08);

  /* Borders */
  --border-soft:    rgba(255, 255, 255, 0.07);
  --border-mid:     rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.16);
  --border-glow:    rgba(45, 212, 191, 0.25);

  /* Text */
  --text-primary:   #F4F4F5;
  --text-secondary: #A1A1AA;
  --text-muted:     #52525B;
  --text-faint:     #3F3F46;

  /* Accent — muted teal */
  --cyan:           #2DD4BF;
  --cyan-light:     #5EEAD4;
  --cyan-soft:      rgba(45, 212, 191, 0.12);
  --blue:           #60A5FA;
  --purple:         #A78BFA;
  --purple-soft:    rgba(167, 139, 250, 0.12);
  --green:          #4ADE80;
  --green-soft:     rgba(74, 222, 128, 0.12);
  --orange:         #FB923C;
  --red:            #F87171;
  --red-soft:       rgba(248, 113, 113, 0.12);
  --yellow:         #FBBF24;

  /* Gradients — minimal */
  --grad-brand:     linear-gradient(135deg, #2DD4BF 0%, #60A5FA 100%);
  --grad-brand-soft:linear-gradient(135deg, rgba(45,212,191,0.12) 0%, rgba(96,165,250,0.12) 100%);
  /* Shadows — clean, no neon */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:      0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:      0 16px 48px rgba(0,0,0,0.5);

  /* Sizing */
  --radius-sm:      6px;
  --radius-md:      8px;
  --radius-lg:      12px;
  --radius-xl:      16px;
  --radius-pill:    999px;

  --sidebar-w:      252px;
  --topbar-h:       64px;
}

/* =============================================================
   LIGHT THEME OVERRIDES — cream palette (feat/45)

   Replaces the previous green-tinted light mode with a warm
   cream/beige neutral palette. Numbers, metrics, and KPIs are
   anchored to true black (#111) for maximum legibility. The brand
   accent stays a deep forest green so it reads as "Deciphr" but
   the surfaces underneath are now sand / parchment, not the
   pale-green wash of the prior revision.

   Dark mode is unchanged.
   ============================================================= */
[data-theme="light"] {
  color-scheme: light;
  /* Surfaces — reverted card backgrounds (#FFF3DB → #FFFAF2) per user. */
  --bg-deep:        #ECE7DD;   /* body / outermost */
  --bg-base:        #ECE7DD;   /* main shell */
  --bg-elevated:    #FFFAF2;   /* reverted from #FFF3DB */
  --bg-card:        #FFFAF2;   /* reverted from #FFF3DB */
  --bg-card-solid:  #FFFAF2;   /* reverted from #FFF3DB */
  --bg-hover:       #E4DECF;
  --bg-active:      rgba(236, 231, 221, 0.60);  /* was rgba(42,42,42,0.07) */

  --border-soft:    #CFC9BE;
  --border-mid:     #CFC9BE;
  --border-strong:  #8E8A83;
  --border-glow:    rgba(236, 231, 221, 0.80);  /* was rgba(42,42,42,0.20) */

  /* Text — all primary/secondary/muted text rendered pure black for
     maximum contrast on the cream palette. --text-faint kept as a
     light taupe because it drives placeholder + disabled text, which
     must visually read as "empty" rather than as filled content. */
  --text-primary:   #000000;
  --text-secondary: #000000;
  --text-muted:     #000000;
  --text-faint:     #CFC9BE;

  /* Brand accent — cream from the approved palette (was #2A2A2A charcoal).
     The variable is still called --cyan for backwards compatibility with
     hundreds of existing usages. */
  --cyan:           #ECE7DD;
  --cyan-soft:      rgba(236, 231, 221, 0.50);

  /* Green and red are PRICE SEMANTICS ONLY — used by .urgl-positive and
     IN-flow indicators. Do not use --green for "success" / "active" /
     "posted" states in light mode; use --cyan (charcoal) instead. */
  --green:          #15803D;
  --green-soft:     rgba(21, 128, 61, 0.08);
  --orange:         #B45309;
  --red:            #B91C1C;
  --red-soft:       rgba(185, 28, 28, 0.08);
  --yellow:         #92400E;

  --shadow-sm:      0 1px 3px rgba(74, 60, 34, 0.06), 0 0 0 1px rgba(74, 60, 34, 0.04);
  --shadow-md:      0 4px 16px rgba(74, 60, 34, 0.08), 0 0 0 1px rgba(74, 60, 34, 0.04);
  --shadow-lg:      0 16px 48px rgba(74, 60, 34, 0.12);
}

/* Sidebar + topbar use a slightly elevated cream so they lift above the body */
[data-theme="light"] .sidebar,
[data-theme="light"] .topbar {
  background: #FFFAF2;
  border-color: #E5DCCD;
}
[data-theme="light"] .profile-menu {
  background: #FFFAF2;
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* =============================================================
   BACKGROUND — flat slate, no animation
   ============================================================= */
.starfield,
.stars,
.stars-1,
.stars-2,
.stars-3,
.nebula,
.nebula-purple,
.nebula-cyan { display: none; }

/* =============================================================
   APP SHELL
   ============================================================= */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  /* Paint the sidebar column bg + border for the full page height, not just
     the sticky sidebar element's own 100vh, so the column never shows the
     bare body background when content scrolls past the viewport. */
  background: linear-gradient(
    to right,
    var(--bg-base) calc(var(--sidebar-w) - 1px),
    var(--border-soft) var(--sidebar-w),
    var(--bg-deep) var(--sidebar-w)
  );
}

/* SIDEBAR */
.sidebar {
  background: var(--bg-base);
  border-right: 1px solid var(--border-soft);
  padding: 22px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 10px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.brand-mark {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan);
}
.brand-mark svg { width: 38px; height: 38px; }
/* feat/43 — Deciphr wordmark refresh: geometric all-caps, wide tracking
   to match the new brand. The bold weight + uppercase + 0.18em letter
   spacing renders the same shape across the navbar, login, mobile wall
   and any future surfaces. */
.brand-name {
  font-weight: 800;
  font-size: 16px;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-feature-settings: "ss01" on, "tnum" on;
  line-height: 1.05;
}
.brand-sub {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 4px;
}
.brand-mark img { display: block; }
[data-theme="light"] .brand-mark img { filter: invert(1); }

/* Theme-aware logo display — dark logo shown by default (dark theme is default) */
.logo-dark { display: block; }
.logo-light { display: none; }
[data-theme="light"] .logo-dark { display: none; }
[data-theme="light"] .logo-light { display: block; }

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: all 0.16s ease;
}
.nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color 0.16s ease;
}
.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.nav-item:hover svg { color: var(--cyan); }
.nav-item.active {
  background: var(--bg-active);
  color: var(--cyan);
}
.nav-item.active svg { color: var(--cyan); }
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 16px;
  border-radius: 0 2px 2px 0;
  background: var(--cyan);
}
.nav-badge {
  margin-left: auto;
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: var(--radius-pill);
}
.nav-item.active .nav-badge {
  background: var(--cyan-soft);
  color: var(--cyan);
}

/* Two-level nav — parent groups */
.nav-group {
  display: flex;
  flex-direction: column;
}
.nav-parent {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: background 0.16s ease, color 0.16s ease;
  margin-top: 4px;
}
.nav-parent svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
}
.nav-parent:hover {
  background: var(--bg-hover);
  color: var(--text-secondary);
}
.nav-parent:hover svg { color: var(--text-secondary); }
.nav-parent.child-active {
  color: var(--text-secondary);
}
.nav-chevron {
  margin-left: auto;
  width: 14px !important;
  height: 14px !important;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.nav-parent[aria-expanded="true"] .nav-chevron {
  transform: rotate(180deg);
}
.nav-children {
  display: none;
  flex-direction: column;
  gap: 1px;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--border-soft);
  margin-bottom: 2px;
  margin-top: 2px;
}
.nav-children.open {
  display: flex;
}
.nav-child {
  padding: 7px 10px !important;
  font-size: 13px !important;
}
.nav-child svg {
  width: 15px !important;
  height: 15px !important;
}

.status-dot {
  width: 7px; height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.topbar-qbo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: var(--green-soft);
  border-radius: var(--radius-pill);
}
.topbar-qbo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.topbar-qbo .status-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  line-height: 1.2;
}
.topbar-qbo-sync {
  font-size: 10px;
  color: var(--green);
  opacity: 0.65;
  line-height: 1.2;
}

/* MAIN */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-base);
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: var(--topbar-h);
}
.view-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}
.view-sub {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar-wrap {
  position: relative;
}
.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.15s;
  user-select: none;
}
.avatar:hover { border-color: var(--border-strong); }
.avatar-wrap.open .avatar { border-color: var(--cyan); }

.profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 500;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.avatar-wrap.open .profile-menu { display: flex; }

.profile-menu-user {
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 6px;
}
.profile-menu-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-menu-email {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
  transition: background 0.12s, color 0.12s;
  box-sizing: border-box;
}
.profile-menu-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.profile-menu-item svg {
  width: 15px; height: 15px;
  flex-shrink: 0;
  color: var(--text-muted);
}
.profile-menu-item:hover svg { color: var(--text-secondary); }
.profile-menu-item.danger { color: var(--red); }
.profile-menu-item.danger svg { color: var(--red); }
.profile-menu-item.danger:hover { background: var(--red-soft); color: var(--red); }

/* Appearance row — label on left, toggle on right */
.profile-menu-appearance {
  justify-content: space-between;
  cursor: default;
}
.profile-menu-appearance:hover { background: none; color: var(--text-secondary); }
.pm-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 13px;
}
.pm-label svg { width: 15px; height: 15px; color: var(--text-muted); }

.theme-toggle {
  display: flex;
  align-items: center;
  background: var(--bg-deep);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-pill);
  padding: 2px;
  gap: 0;
  flex-shrink: 0;
}
.theme-toggle-btn {
  width: 28px;
  height: 22px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
}
.theme-toggle-btn.active {
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.content {
  padding: 28px;
  min-height: calc(100vh - var(--topbar-h));
}

/* =============================================================
   COMPONENTS — BUTTONS
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-primary);
  transition: all 0.16s ease;
  white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--cyan);
  color: #09090B;
  border-color: transparent;
}
.btn-primary:hover { background: var(--cyan-light); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-mid);
  color: var(--text-primary);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-strong);
}
.btn-cb-dirty {
  background: var(--green);
  color: #09090B;
  border-color: transparent;
  font-weight: 600;
}
.btn-cb-dirty:hover { filter: brightness(1.1); }
.btn-outline {
  border-color: var(--border-mid);
  color: var(--text-secondary);
}
.btn-outline:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}
.btn-sm {
  padding: 6px 10px;
  font-size: 11.5px;
}
.btn-icon {
  padding: 7px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-mid);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 0;
}
.btn-icon svg { width: 16px; height: 16px; display: block; }
.btn-icon:hover { color: var(--cyan); border-color: var(--cyan); }
.btn-danger { color: var(--red); border-color: rgba(255,107,122,0.3); }
.btn-danger:hover { background: var(--red-soft); }

/* =============================================================
   COMPONENTS — CARDS
   ============================================================= */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.card-glow { position: relative; }
.card-glow:hover { border-color: var(--border-mid); }

.card-padded { padding: 20px 22px; }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
}
.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.card-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* =============================================================
   COMPONENTS — KPI CARDS
   ============================================================= */
.kpi {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent, var(--cyan));
  opacity: 0.7;
}
.kpi-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi-label svg { width: 13px; height: 13px; opacity: 0.7; }
.kpi-value {
  margin-top: 4px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  font-feature-settings: 'tnum';
}
.kpi-value-sub {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 6px;
}
.kpi.cyan    { --accent: var(--cyan); }
.kpi.green   { --accent: var(--green); }
.kpi.orange  { --accent: var(--orange); }
.kpi.red     { --accent: var(--red); }
.kpi.purple  { --accent: var(--purple); }
.kpi-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.kpi-sub svg { width: 12px; height: 12px; }
/* .kpi-trend removed — unused */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.dashboard-grid { display: flex; flex-direction: column; gap: 12px; }
.dash-main { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }

/* =============================================================
   PIPELINE STATUS
   ============================================================= */
.pipeline-list { display: flex; flex-direction: column; }
.pipeline-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-soft);
}
.pipeline-item:last-child { border-bottom: none; }
.pipeline-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pipeline-icon.success { background: var(--green-soft);            color: var(--green); }
.pipeline-icon.warning { background: rgba(240,160,77,0.15);        color: var(--orange); }
.pipeline-icon.error   { background: var(--red-soft);              color: var(--red); }
.pipeline-info { flex: 1; min-width: 0; }
.pipeline-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.pipeline-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============================================================
   COMPONENTS — BADGES
   ============================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
  border: 1px solid var(--border-mid);
  white-space: nowrap;
}
.badge-cyan    { background: var(--cyan-soft);                color: var(--cyan);   border-color: rgba(45,212,191,0.25); }
.badge-green   { background: var(--green-soft);               color: var(--green);  border-color: rgba(74,222,128,0.25); }
.badge-red     { background: var(--red-soft);                 color: var(--red);    border-color: rgba(248,113,113,0.25); }
.badge-orange  { background: rgba(251,146,60,0.12);           color: var(--orange); border-color: rgba(251,146,60,0.25); }
.badge-yellow  { background: rgba(251,191,36,0.12);           color: var(--yellow); border-color: rgba(251,191,36,0.25); }
/* aliases — purple/magenta map to neutral teal */
.badge-purple  { background: var(--cyan-soft);   color: var(--cyan);   border-color: rgba(45,212,191,0.25); }
.badge-magenta { background: var(--cyan-soft);   color: var(--cyan);   border-color: rgba(45,212,191,0.25); }
.badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.chain-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 4px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-mid);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.chain-icon {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: var(--bg-deep);
}

/* =============================================================
   COMPONENTS — INPUTS & FILTERS
   ============================================================= */
.input, .select, .form-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
  transition: all 0.16s ease;
}
.input:focus, .select:focus, .form-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-soft);
}
.input::placeholder, .form-input::placeholder { color: var(--text-muted); }
.input-search {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C607D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
  background-repeat: no-repeat;
  background-position: 10px 50%;
  padding-left: 32px;
}
.select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239498B5' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.select option,
.select optgroup {
  background: #18181C;
  color: #F4F4F5;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
  user-select: none;
}
.filter-chip:hover { background: var(--bg-hover); color: var(--text-primary); }
.filter-chip.active {
  background: var(--cyan-soft);
  color: var(--cyan);
  border-color: rgba(45,212,191,0.3);
}
.filter-chip svg { width: 13px; height: 13px; }
.filter-chip-sep { color: var(--text-muted); font-size: 13px; padding: 0 2px; }
.filter-chip-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 300;
  min-width: 180px;
  padding: 4px;
}
.filter-chip-dropdown button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px;
  background: none; border: none;
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-secondary);
  cursor: pointer; text-align: left; font-family: inherit;
}
.filter-chip-dropdown button:hover { background: var(--bg-hover); color: var(--text-primary); }

.toggle-group {
  display: inline-flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
}
.toggle-group button {
  background: transparent;
  border: none;
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
  letter-spacing: 0.02em;
}
.toggle-group button:hover:not(.active) {
  background: rgba(255,255,255,0.07);
  color: var(--text-primary);
}
.toggle-group button.active {
  background: var(--cyan-soft);
  color: var(--cyan);
  box-shadow: inset 0 0 0 1px rgba(46,230,240,0.35);
}

/* =============================================================
   COMPONENTS — TABLE
   ============================================================= */
.table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table thead th {
  background: rgba(255,255,255,0.02);
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.table thead th.right { text-align: right; }
.table tbody tr {
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.12s ease;
}
.table tbody tr:hover { background: rgba(255,255,255,0.025); }
.table tbody tr:last-child { border-bottom: none; }
.table tbody td {
  padding: 13px 16px;
  vertical-align: middle;
}
.table tbody td.right { text-align: right; }
.table tbody td.num {
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

.cell-primary {
  color: var(--text-primary);
  font-weight: 500;
}
.cell-secondary {
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 2px;
}
.cell-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.row-checkbox {
  appearance: none;
  width: 14px; height: 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  background: transparent;
  vertical-align: middle;
}
.row-checkbox:checked {
  background: var(--cyan);
  border-color: var(--cyan);
}
.row-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 3px; top: 0px;
  width: 4px; height: 8px;
  border: solid var(--bg-deep);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* DONUT CHART */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px;
}
.donut {
  width: 160px;
  height: 160px;
  position: relative;
  flex-shrink: 0;
}
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.donut-center-label {
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.6px;
}
.donut-center-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
/* SPARKLINE */
.sparkline {
  width: 100%;
  height: 50px;
  margin-top: 8px;
}

/* =============================================================
   TRANSACTIONS — TULO-STYLE LAYOUT
   ============================================================= */
.tx-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.tx-toolbar-left, .tx-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.tx-row-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.tx-status-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tx-status-dot {
  width: 18px; height: 18px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-mid);
  color: var(--text-muted);
}
.tx-status-dot.active   { background: var(--green-soft); color: var(--green); border-color: rgba(77,214,143,0.3); }
.tx-status-dot.warning  { background: rgba(240,160,77,0.15); color: var(--orange); border-color: rgba(240,160,77,0.3); }
.tx-status-dot.synced   { background: var(--cyan-soft); color: var(--cyan); border-color: rgba(46,230,240,0.3); }

.tx-flow-cell { text-align: right; }
.tx-flow-amount {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13.5px;
  font-feature-settings: 'tnum';
}
.tx-flow-amount.in  { color: var(--green); }
.tx-flow-amount.out { color: var(--red); }
.tx-flow-amount svg { width: 12px; height: 12px; }
.tx-flow-native {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 500;
}

.wallet-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 3px;
}
.wallet-icon {
  width: 14px; height: 14px;
  border-radius: 4px;
  background: var(--cyan-soft);
  border: 1px solid var(--border-mid);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: var(--cyan);
}

.tx-list {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.masked-hex {
  cursor: pointer;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  border-bottom: 1px dotted var(--text-muted);
  transition: color 120ms ease, border-color 120ms ease;
}
.masked-hex:hover {
  color: var(--accent, #6ea8ff);
  border-bottom-color: var(--accent, #6ea8ff);
}

/* ERP combobox — typeahead + dark-themed dropdown panel. Replaces native
   <select> that rendered with OS-default white background on dark mode. */
.erp-combo { position: relative; max-width: 200px; }
.erp-combo-input {
  width: 100%;
  font-size: 11.5px;
  padding: 4px 8px;
  border-radius: 5px;
  background: var(--bg-elev);
  color: var(--text-primary);
  border: 1px solid var(--border-mid);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.erp-combo-input::placeholder { color: var(--text-muted); }
.erp-combo-input:focus {
  border-color: var(--accent, #6ea8ff);
  box-shadow: 0 0 0 2px rgba(110, 168, 255, 0.18);
}
.erp-combo-panel {
  /* fixed so the dropdown escapes .table-wrap { overflow:hidden };
     top/left/width are set inline by wireErpCombo at open time. */
  position: fixed;
  z-index: 200;
  background: var(--bg-elev);
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  max-height: 220px;
  overflow-y: auto;
}
.erp-combo-input:disabled {
  opacity: 0.6;
  cursor: wait;
}
.erp-combo-opt {
  padding: 6px 10px;
  font-size: 11.5px;
  color: var(--text-primary);
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
}
.erp-combo-opt:last-child { border-bottom: none; }
.erp-combo-opt:hover,
.erp-combo-opt.active { background: var(--bg-hover); }
.erp-combo-empty {
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--text-muted);
  font-style: italic;
}
.tx-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  gap: 12px;
  transition: background 0.12s ease;
}
.tx-row:last-child { border-bottom: none; }
.tx-row:hover { background: var(--bg-hover); }
.tx-row-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.tx-row-meta {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.tx-row-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sync-dot.synced   { background: var(--green); }
.sync-dot.unsynced { background: var(--orange); }
.type-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-mid);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* =============================================================
   HOLDINGS
   ============================================================= */
.holdings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.holding-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}
.holding-card:hover {
  border-color: var(--border-mid);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.holding-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.token-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #09090B;
}
.holding-list { display: flex; flex-direction: column; gap: 2px; padding: 0 16px 16px; }
.holding-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
}
.holding-row:hover { background: var(--bg-hover); }
.holding-info { flex: 1; min-width: 0; }
.holding-sym { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.holding-right { text-align: right; }
.holding-val { font-size: 13px; font-weight: 600; color: var(--text-primary); font-feature-settings: 'tnum'; }
.holding-pct { font-size: 11px; color: var(--text-muted); }

.token-icon.lg { width: 44px; height: 44px; font-size: 15px; }
.holding-card-name {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}
.holding-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  padding: 14px 0;
  margin: 12px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.holding-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.holding-stat-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 3px;
  font-feature-settings: 'tnum';
}
.holding-stat-val.green { color: var(--green); }
.holding-stat-val.red   { color: var(--red); }
.holding-card-chains {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.chain-pip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.badge-outline {
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--text-secondary);
}

/* =============================================================
   COST BASIS / DISPOSALS
   ============================================================= */
.lot-progress {
  width: 100px;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.lot-progress-bar {
  height: 100%;
  background: var(--cyan);
  border-radius: 3px;
}

.method-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}
.method-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.method-banner-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--cyan-soft);
  color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
}
.method-banner-text { display: flex; flex-direction: column; }
.method-banner-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.method-banner-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }

/* =============================================================
   SETTINGS
   ============================================================= */
.settings-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
}
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-nav a {
  padding: 9px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.16s ease;
}
.settings-nav a:hover { background: var(--bg-hover); color: var(--text-primary); }
.settings-nav a.active { background: var(--bg-active); color: var(--cyan); }

.settings-section {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 16px;
}
.settings-section h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.settings-section p { color: var(--text-secondary); font-size: 12.5px; margin: 0 0 16px; }

.settings-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
  align-items: center;
}
.settings-row:first-child { border-top: none; padding-top: 4px; }
.setting-label { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.setting-desc  { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

.switch {
  position: relative;
  width: 36px; height: 20px;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.16s ease;
  border: 1px solid var(--border-mid);
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text-secondary);
  transition: all 0.16s ease;
}
.switch.on { background: var(--cyan-soft); border-color: var(--cyan); }
.switch.on::after {
  left: 18px;
  background: var(--cyan);
}

/* =============================================================
   TOAST + MODAL
   ============================================================= */
.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-left: 3px solid var(--cyan);
  color: var(--text-primary);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.toast svg { width: 16px; height: 16px; color: var(--cyan); }

/* ---------- Pull-progress pill (non-blocking wallet pull feedback) ---------- */
.pull-pill {
  position: fixed;
  bottom: 24px; left: 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-left: 3px solid var(--cyan);
  color: var(--text-primary);
  padding: 12px 14px 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  box-shadow: var(--shadow-lg);
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
  max-width: 380px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.28s ease, transform 0.28s ease, border-left-color 0.3s ease, bottom 0.25s ease;
  pointer-events: auto;
}
.pull-pill.show { opacity: 1; transform: translateY(0); }
.pull-pill.pill-success { border-left-color: #22c55e; }
.pull-pill.pill-error   { border-left-color: var(--red, #ef4444); }

.pull-pill .pill-spinner {
  width: 15px; height: 15px; flex-shrink: 0;
  border: 2px solid var(--border-mid);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
.pull-pill .pill-icon { width: 15px; height: 15px; flex-shrink: 0; }
.pull-pill .pill-msg  { flex: 1; line-height: 1.4; }
.pull-pill .pill-dismiss {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 2px 4px;
  font-size: 17px; line-height: 1; flex-shrink: 0;
  transition: color 0.15s;
}
.pull-pill .pill-dismiss:hover { color: var(--text-primary); }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Session-expired overlay ---------------------------------------- */
.session-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn 0.25s ease;
}
.session-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-top: 3px solid var(--cyan);
  border-radius: var(--radius-lg, 12px);
  padding: 32px 28px 24px;
  max-width: 380px;
  width: 90%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.25s ease;
}
.session-card .session-icon {
  width: 44px; height: 44px;
  background: rgba(46,230,240,0.1);
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan);
}
.session-card h2 {
  font-size: 17px; font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.session-card p {
  font-size: 13px; color: var(--text-muted);
  line-height: 1.5; margin: 0 0 24px;
}
@keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { transform: translateY(16px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 600;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-overlay.show { display: flex; }
.modal {
  background: var(--bg-card-solid);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-xl);
  width: 480px;
  max-width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.modal-body { padding: 20px 24px; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-soft);
}
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group:last-child { margin-bottom: 0; }
.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.card-body { padding: 18px 20px; }

/* =============================================================
   SCROLLBAR
   ============================================================= */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.06);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); background-clip: content-box; }

/* =============================================================
   UTILITIES
   ============================================================= */
.muted { color: var(--text-muted); }
.dim   { color: var(--text-secondary); }
.mono  { font-family: 'JetBrains Mono', monospace; }
.tnum  { font-feature-settings: 'tnum'; }
.right { text-align: right; }
.flex  { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.mb-12  { margin-bottom: 12px; }
.mb-16  { margin-bottom: 16px; }
.mb-22  { margin-bottom: 22px; }
.mt-8   { margin-top: 8px; }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  gap: 12px;
}
.empty-state-icon { color: var(--text-muted); opacity: 0.6; }
.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.empty-state-msg {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 360px;
  margin: 0;
  line-height: 1.6;
}
.empty-hint {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.holding-card-sym {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.mt-22  { margin-top: 22px; }

/* Empty state */
.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.empty-icon {
  width: 60px; height: 60px;
  margin: 0 auto 14px;
  opacity: 0.3;
}
.empty h4 { color: var(--text-secondary); margin: 0 0 6px; font-size: 15px; }
.empty p  { font-size: 12.5px; margin: 0; }

/* =============================================================
   MODE BADGE  (Live / Demo)
   ============================================================= */
.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.16s ease;
}
.mode-badge:hover { border-color: var(--border-strong); color: var(--text-primary); }
.mode-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
}
.mode-badge.mode-live {
  background: var(--green-soft);
  color: var(--green);
  border-color: rgba(77,214,143,0.3);
}
.mode-badge.mode-live .mode-dot {
  background: var(--green);
  animation: pulse 2s ease-in-out infinite;
}
.mode-badge.mode-demo {
  background: rgba(245,213,71,0.10);
  color: var(--yellow);
  border-color: rgba(245,213,71,0.25);
}
.mode-badge.mode-demo .mode-dot {
  background: var(--yellow);
  opacity: 0.8;
}

/* =============================================================
   AI CHAT  (floating launcher + slide-out panel)
   ============================================================= */
.chat-fab {
  position: fixed;
  left: calc(var(--sidebar-w) + 16px); bottom: 28px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border-mid);
  background: var(--bg-elevated);
  color: var(--cyan);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 200;
}
.chat-fab:hover {
  transform: translateY(-2px);
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(46,230,240,0.25), var(--shadow-lg);
}
.chat-fab svg { width: 22px; height: 22px; }
.chat-fab.hidden { display: none; }

.chat-panel {
  position: fixed;
  left: calc(var(--sidebar-w) + 16px); bottom: 28px;
  width: 400px;
  max-width: calc(100vw - var(--sidebar-w) - 32px);
  height: 580px;
  max-height: calc(100vh - 56px);
  background: var(--bg-card-solid);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 201;
}
.chat-panel.open {
  display: flex;
  animation: chatSlide 0.22s ease-out;
}
@keyframes chatSlide {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.chat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.chat-head-title { display: flex; align-items: center; gap: 12px; }
.chat-head-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--cyan-soft);
  color: var(--cyan);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-mid);
}
.chat-head-mark svg { width: 18px; height: 18px; }
.chat-head-name {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
}
.chat-head-status {
  font-size: 11px; color: var(--text-muted); margin-top: 2px;
  display: flex; align-items: center; gap: 6px;
}
.chat-head-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  display: inline-block;
}
.chat-head-status.live { color: var(--green); }
.chat-head-status.live::before { background: var(--green); box-shadow: 0 0 6px var(--green); }

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-empty {
  text-align: center;
  margin: 30px auto;
  color: var(--text-muted);
  font-size: 13px;
  max-width: 280px;
}
.chat-empty .chat-empty-mark {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--bg-active);
  color: var(--cyan);
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
}
.chat-empty .chat-empty-mark svg { width: 24px; height: 24px; }

.chat-msg {
  display: flex;
  gap: 8px;
  max-width: 90%;
}
.chat-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg-bubble {
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.chat-msg.user .chat-msg-bubble {
  background: var(--cyan);
  color: #09090B;
  border-bottom-right-radius: 4px;
}
.chat-msg.bot .chat-msg-bubble {
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
  border: 1px solid var(--border-soft);
  border-bottom-left-radius: 4px;
}
.chat-msg.bot .chat-msg-bubble pre {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--cyan);
  overflow-x: auto;
}
.chat-tool-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--purple-soft);
  color: var(--purple);
  border: 1px solid rgba(155,93,255,0.3);
  border-radius: var(--radius-pill);
  margin-bottom: 6px;
}

.chat-typing {
  display: flex;
  gap: 4px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  width: fit-content;
}
.chat-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: 0.5;
  animation: chatBlink 1.4s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatBlink {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}


.chat-input {
  display: flex;
  gap: 8px;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border-soft);
  background: rgba(0,0,0,0.15);
}
.chat-input input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
  transition: all 0.16s ease;
}
.chat-input input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-soft);
}
.chat-input input::placeholder { color: var(--text-muted); }
.chat-input button { padding: 9px 13px; }
.chat-input button svg { width: 14px; height: 14px; }

@media (max-width: 480px) {
  .chat-panel {
    left: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    border-radius: var(--radius-lg);
  }
  .chat-fab { left: 16px; bottom: 16px; }
}

/* Responsive */
@media (max-width: 1100px) {
  .kpi-grid, .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .dash-main { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --sidebar-w: 0px; }
  .sidebar { display: none; }
  .content { padding: 18px; }
  .topbar { padding: 14px 18px; }
  .kpi-grid, .kpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================
   CRYPTO LOADER OVERLAY
   ============================================================= */
#cryptoLoader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease;
}
#cryptoLoader.cl-fade-out { opacity: 0; }

.cl-bg {
  position: absolute;
  inset: 0;
  background: var(--bg-deep);
}
.cl-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 30%, rgba(45,212,191,0.06) 0%, transparent 70%);
}

.cl-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}

/* Network graph */
.cl-network {
  width: 320px;
  height: 220px;
  margin-bottom: -20px;
}
.cl-net-svg { width: 100%; height: 100%; }

.cl-edge {
  stroke: var(--cyan);
  stroke-opacity: 0.20;
  stroke-width: 1;
  animation: edgePulse 2.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes edgePulse {
  0%, 100% { stroke-opacity: 0.10; }
  50%       { stroke-opacity: 0.35; }
}

.cl-node {
  fill: var(--cyan);
  fill-opacity: 0.10;
  stroke: var(--cyan);
  stroke-opacity: 0.45;
  stroke-width: 1.5;
  animation: nodePulse 2s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.cl-node-center {
  fill: var(--cyan);
  fill-opacity: 0.18;
  stroke: var(--cyan);
  stroke-opacity: 1;
  stroke-width: 2;
  animation: nodePulse 1.6s ease-in-out infinite;
}
@keyframes nodePulse {
  0%, 100% { opacity: 0.7; r: 7; }
  50%       { opacity: 1;   r: 8; }
}

.cl-travel {
  fill: var(--cyan);
  opacity: 0.85;
}
.cl-travel-purple {
  fill: var(--cyan);
  opacity: 0.5;
}

/* Logo */
.cl-logo {
  width: 160px;
  height: auto;
  margin-bottom: 20px;
}

.cl-logo img {
  width: 100%;
  height: auto;
}

.cl-status {
  font-size: 13px;
  color: var(--text-secondary);
  height: 20px;
  font-family: 'JetBrains Mono', monospace;
  transition: opacity 0.3s;
  margin-bottom: 24px;
}

/* Progress bar */
.cl-bar-wrap { width: 220px; margin-bottom: 24px; }
.cl-bar-track {
  height: 3px;
  border-radius: 99px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}
.cl-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: var(--cyan);
  transition: width 0.4s ease-out;
}
.cl-pct {
  text-align: center;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  margin-top: 8px;
  letter-spacing: 0.04em;
}

/* Ticker strip */

/* =============================================================
   IDLE TIMEOUT WARNING BANNER
   ============================================================= */
#idleWarningBanner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--bg-elevated);
  border: 1px solid rgba(240, 160, 77, 0.45);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 20px rgba(240,160,77,0.15);
  color: var(--orange);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  animation: bannerSlideUp 0.3s ease;
}
@keyframes bannerSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* =============================================================
   MOBILE WALL — shown on screens narrower than 1024px
   ============================================================= */
.mobile-wall {
  display: none;
}
@media (max-width: 1024px) {
  .mobile-wall {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 99999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 32px 24px;
    background: var(--bg-deep);
    text-align: center;
  }
  .mobile-wall::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 70% 40% at 50% 20%, rgba(46,230,240,0.08) 0%, transparent 70%),
      radial-gradient(ellipse 60% 40% at 60% 80%, rgba(155,93,255,0.08) 0%, transparent 70%);
    pointer-events: none;
  }
  .mobile-wall-logo {
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 12px rgba(46,230,240,0.5));
  }
  .mobile-wall-name {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #2EE6F0 0%, #5B8DEF 50%, #9B5DFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 28px;
  }
  .mobile-wall-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(46,230,240,0.08);
    border: 1px solid rgba(46,230,240,0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--cyan);
  }
  .mobile-wall h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 10px;
  }
  .mobile-wall p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 300px;
    line-height: 1.6;
  }
  .mobile-wall-badge {
    margin-top: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 99px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
  }
  .mobile-wall-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 6px rgba(46,230,240,0.7);
  }
}

/* =============================================================
   AUDITOR MODE (read-only watermark banner + control hiding)
   ============================================================= */
.auditor-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 7px 16px;
  background: linear-gradient(90deg, rgba(245,213,71,0.18), rgba(240,160,77,0.18));
  border-bottom: 1px solid rgba(245,213,71,0.4);
  color: var(--yellow);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.auditor-banner svg { vertical-align: -2px; margin-right: 6px; }
body.is-auditor .app-shell { padding-top: 32px; }
body.is-auditor [data-mut],
body.is-auditor .chat-fab,
body.is-auditor #saveViewBtn,
body.is-auditor #dedustBtn,
body.is-auditor [data-action="refresh"],
body.is-auditor [data-action="delete"],
body.is-auditor [data-action="toggle-active"],
body.is-auditor [data-action="set-group"],
body.is-auditor [onclick*="openAddWalletModal"],
body.is-auditor [onclick*="openCloseAssistant"],
body.is-auditor [onclick*="saveCurrentTxView"],
body.is-auditor [onclick*="runDedust"] { display: none !important; }

/* =============================================================
   REALTIME — new transaction highlight + nav unread dot
   ============================================================= */
@keyframes streamGlow {
  0%   { box-shadow: 0 0 0 0 rgba(46, 230, 240, 0); background: rgba(46, 230, 240, 0.18); }
  60%  { box-shadow: 0 0 18px 4px rgba(46, 230, 240, 0.45); background: rgba(46, 230, 240, 0.12); }
  100% { box-shadow: 0 0 0 0 rgba(46, 230, 240, 0); background: transparent; }
}
.tx-fresh td { animation: streamGlow 2s ease-out 1; }

.nav-unread-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(46, 230, 240, 0.7);
  margin-left: 6px;
  vertical-align: middle;
  animation: pulse 2s ease-in-out infinite;
}

/* =============================================================
   EVIDENCE DRAWER (right-side slide-in)
   ============================================================= */
.evidence-backdrop {
  position: fixed; inset: 0;
  background: rgba(4,6,15,0.55);
  backdrop-filter: blur(3px);
  z-index: 400;
  display: none;
}
.evidence-backdrop.show { display: block; }

.evidence-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: 380px;
  max-width: calc(100vw - 32px);
  background: var(--bg-card-solid);
  border-left: 1px solid var(--border-strong);
  box-shadow: -12px 0 28px rgba(0,0,0,0.35);
  z-index: 401;
  transform: translateX(100%);
  transition: transform 0.18s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.evidence-drawer.show { transform: translateX(0); }
.evidence-head {
  display: flex; align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(46,230,240,0.05), transparent);
}
/* feat/44 — hash + label get a full row, buttons can wrap to a
   second row below if the explorer label is long ("Open Etherscan",
   "Open Polygonscan", etc.). Prevents the close X from overlapping
   the Open CTA on narrow widths. */
.evidence-head > :first-child { flex: 1 1 100%; min-width: 0; }
.evidence-head .btn,
.evidence-head .btn-icon { flex: 0 0 auto; min-height: 32px; }
.evidence-head #evidenceExplorer { white-space: nowrap; }
.evidence-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  font-size: 13px;
  color: var(--text-primary);
}
.evidence-section {
  margin-bottom: 18px;
}
.evidence-section-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight: 600;
  margin: 0 0 8px;
}
.evidence-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-soft);
  font-size: 12.5px;
}
.evidence-row .key { color: var(--text-muted); }
.evidence-row .val { color: var(--text-primary); font-family: 'JetBrains Mono', monospace; font-size: 12px; max-width: 60%; text-align: right; word-break: break-all; }
.evidence-related-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
}
.evidence-skeleton {
  height: 14px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s infinite;
  border-radius: 4px;
  margin-bottom: 8px;
}
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.evidence-summary {
  font-size: 13px;
  line-height: 1.5;
  background: rgba(46,230,240,0.05);
  border: 1px solid rgba(46,230,240,0.2);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text-primary);
}

/* feat/44 — generic action / form-row patterns inside the evidence
   drawer, applied wherever app.js renders sets of buttons or inline
   selects (e.g. ERP account assignment). */
.evidence-drawer .form-row,
.evidence-drawer .drawer-row {
  display: flex; align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.evidence-drawer .form-row > label,
.evidence-drawer .drawer-row > label {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.6px;
  flex: 0 0 100%;
}
.evidence-drawer .form-row > select,
.evidence-drawer .form-row > input,
.evidence-drawer .drawer-row > select,
.evidence-drawer .drawer-row > input {
  flex: 1 1 auto; min-width: 0;
}
.evidence-drawer .drawer-actions {
  display: flex; flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.evidence-drawer button,
.evidence-drawer .btn { min-height: 36px; }
.evidence-drawer .evidence-section + .evidence-section { margin-top: 4px; }

/* =============================================================
   COMMAND PALETTE (Cmd+K / Ctrl+K)
   ============================================================= */
.cmdk-overlay {
  position: fixed; inset: 0;
  background: rgba(4, 6, 15, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 500;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.cmdk-overlay.show { display: flex; }
.cmdk-panel {
  width: 640px;
  max-width: calc(100vw - 40px);
  max-height: 70vh;
  background: var(--bg-card-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(46,230,240,0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: cmdkSlide 0.16s ease-out;
}
@keyframes cmdkSlide {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cmdk-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.cmdk-search-icon { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.cmdk-input-row input {
  flex: 1;
  background: transparent;
  border: none; outline: none;
  font-family: inherit; font-size: 15px;
  color: var(--text-primary);
}
.cmdk-input-row input::placeholder { color: var(--text-muted); }
.cmdk-esc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  color: var(--text-muted);
}
.cmdk-results {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.cmdk-section-label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 12px 6px;
  font-weight: 600;
}
.cmdk-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s ease;
}
.cmdk-item:hover, .cmdk-item.active {
  background: var(--bg-active);
}
.cmdk-item.active {
  box-shadow: inset 0 0 0 1px rgba(46, 230, 240, 0.25);
}
.cmdk-item-icon {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 7px;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan);
}
.cmdk-item-icon svg { width: 14px; height: 14px; }
.cmdk-item-body { flex: 1; min-width: 0; }
.cmdk-item-primary {
  font-size: 13.5px;
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmdk-item-secondary {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmdk-item-badge {
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.05);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.cmdk-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 28px 16px;
}
.cmdk-footer {
  display: flex; gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--border-soft);
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(0,0,0,0.15);
}
.cmdk-footer kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  margin: 0 1px;
}

/* =============================================================
   DARK-MODE LEAK FIXES (feat/22)
   Native widgets and autofill paint white surfaces unless we
   explicitly override them. color-scheme on :root handles most of
   it; these rules handle the rest.
   ============================================================= */

/* Calendar picker indicator inversion so the icon stays visible on dark inputs */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
  cursor: pointer;
}
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: none;
}

/* Autofill — webkit paints a thick white box over the field; mask it. */
.input:-webkit-autofill,
.form-input:-webkit-autofill,
.select:-webkit-autofill,
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-card-solid) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary);
  transition: background-color 9999s ease-in-out 0s;
}

/* Light-mode <select> options were hardcoded to dark earlier. Match theme. */
[data-theme="light"] .select option,
[data-theme="light"] .select optgroup,
[data-theme="light"] .form-input option,
[data-theme="light"] .form-input optgroup {
  background: #FFFFFF;
  color: #111;
}

/* =============================================================
   TOKEN DISTRIBUTION PREVIEW (feat/23)
   ============================================================= */
.distribution-preview { transition: border-color 0.16s ease, transform 0.16s ease; }
.distribution-preview:hover {
  border-color: var(--cyan);
  transform: translateY(-1px);
}

/* =============================================================
   HOLDINGS SPAM (feat/26) — long-press to mark + collapsible section
   ============================================================= */
@keyframes shake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-3px) rotate(-.5deg)}
  40%{transform:translateX(3px) rotate(.5deg)}
  60%{transform:translateX(-3px) rotate(-.5deg)}
  80%{transform:translateX(3px) rotate(.5deg)}
}
.holding-card.shaking {
  animation: shake 0.4s ease-in-out infinite;
  user-select: none;
  border-color: var(--red);
}
.holding-card .spam-x {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: none;
  align-items: center; justify-content: center;
  border: none; padding: 0;
  cursor: pointer;
  opacity: 0; transition: opacity 0.16s ease;
  font-size: 14px; line-height: 1;
  font-weight: 700;
  z-index: 2;
}
.holding-card.shaking .spam-x { display: flex; opacity: 1; }

.spam-section {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-soft);
}
.spam-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  color: var(--text-muted);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  cursor: pointer;
  margin-bottom: 12px;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.spam-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-mid);
}
.spam-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.spam-toggle svg { transition: transform 0.18s ease; }

.spam-grid .holding-card {
  opacity: 0.65;
  transition: opacity 0.16s ease;
}
.spam-grid .holding-card:hover { opacity: 1; }

/* =============================================================
   DATEPICKER (feat/27) — dark popover replacing <input type=date>
   ============================================================= */
.dp-wrap {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.dp-input { padding-right: 32px !important; }
.dp-input.dp-invalid {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px var(--red-soft) !important;
}
.dp-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border: none; background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.dp-btn:hover { color: var(--cyan); background: var(--bg-hover); }
.dp-btn svg { width: 15px; height: 15px; }

.dp-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 24px rgba(45,212,191,0.12);
  padding: 14px;
  z-index: 1000;
  min-width: 280px;
  color: var(--text-primary);
}
.dp-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.dp-month {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.dp-nav {
  width: 26px; height: 26px;
  border: 1px solid var(--border-mid);
  background: transparent;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.dp-nav:hover { color: var(--cyan); border-color: var(--cyan); }
.dp-dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px; margin-bottom: 4px;
  font-size: 10.5px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  text-align: center;
}
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-day {
  padding: 8px 0; text-align: center; font-size: 13px;
  border: none; background: transparent;
  border-radius: 6px; cursor: pointer; color: var(--text-primary);
  font-family: inherit;
}
.dp-day:hover { background: var(--bg-hover); }
.dp-day.muted    { color: var(--text-muted); }
.dp-day.today    { box-shadow: inset 0 0 0 1px var(--cyan); }
.dp-day.selected { background: var(--cyan); color: #061021; font-weight: 600; }
.dp-day.selected:hover { background: var(--cyan); }
.dp-day.disabled { color: var(--text-faint); cursor: not-allowed; }
.dp-day.disabled:hover { background: transparent; }
.dp-foot {
  display: flex; justify-content: space-between;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.dp-link {
  background: transparent; border: none;
  color: var(--cyan); font-size: 12px; cursor: pointer;
  padding: 4px 6px; border-radius: 4px;
  font-family: inherit;
}
.dp-link:hover { background: var(--bg-hover); }

/* feat/28 — CoinGecko logo images */
.token-img {
  border-radius: 50%;
  object-fit: contain;
  background: rgba(255,255,255,0.04);
  display: inline-block;
  vertical-align: middle;
}
.token-icon-slot { display: inline-flex; align-items: center; justify-content: center; }

/* =============================================================
   PRICING OVERRIDE MENU (feat/29)
   ============================================================= */
.card-kebab {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.16s ease, color 0.16s ease, background 0.16s ease;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
}
.holding-card:hover .card-kebab { opacity: 1; }
.card-kebab:hover { color: var(--text-primary); background: var(--bg-hover); }
.card-kebab svg { width: 16px; height: 16px; }

/* Don't double up with the spam X */
.holding-card .spam-x + .card-kebab { right: 36px; }

.pricing-menu {
  position: absolute;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  min-width: 280px;
  z-index: 1100;
}
.pricing-menu-option {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
}
.pricing-menu-option:hover { background: var(--bg-hover); }
.pricing-menu-option.selected {
  background: var(--cyan-soft);
  color: var(--cyan);
}
.pricing-menu-option input[type="radio"] { accent-color: var(--cyan); }
.pricing-menu-option .recommended-tag {
  margin-left: auto;
  background: var(--green-soft); color: var(--green);
  font-size: 10px; padding: 2px 6px; border-radius: 6px;
  text-transform: uppercase; letter-spacing: 0.4px;
  font-weight: 600;
}
.pricing-method-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--purple-soft); color: var(--purple);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 600;
  padding: 3px 8px;
  letter-spacing: 0.3px; text-transform: uppercase;
  margin-left: 6px;}

/* =============================================================
   feat/45 — light mode numeric readability lock
   ============================================================= */
[data-theme="light"] .kpi-value,
[data-theme="light"] .holding-card-stats .holding-stat-val,
[data-theme="light"] .cell-amount,
[data-theme="light"] .num,
[data-theme="light"] td.right,
[data-theme="light"] .tx-row-amount,
[data-theme="light"] .holding-card-value {
  color: #111111;
  font-feature-settings: 'tnum' on;
}
/* PnL keeps the green/red signal but tuned for WCAG AA on cream */
[data-theme="light"] .green,
[data-theme="light"] .holding-stat-val.green,
[data-theme="light"] .urgl-positive { color: #15803D !important; }
[data-theme="light"] .red,
[data-theme="light"] .holding-stat-val.red,
[data-theme="light"] .urgl-negative { color: #B91C1C !important; }

/* ── Pagination bar ──────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.015);
}
.pg-count {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.pg-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pg-label {
  font-size: 12px;
  color: var(--text-muted);
}
.pg-size-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color 0.15s;
  min-width: 60px;
  text-align: center;
}
.pg-size-select:hover { border-color: var(--border-strong); }
.pg-size-select:focus { outline: none; border-color: var(--cyan); }
.pg-info {
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 0 4px;
}
.pg-arrows {
  display: flex;
  gap: 4px;
}
.pg-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-mid);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.pg-btn svg { width: 15px; height: 15px; display: block; }
.pg-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.pg-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Tables should not tint rows green on hover in cream mode */
[data-theme="light"] .table tbody tr:hover,
[data-theme="light"] .nav-item:hover,
[data-theme="light"] .btn-ghost:hover { background: #F1EADF; }

/* Chart axis / labels: any inline rgba light-on-dark assumptions get
   read against the cream background here. */
[data-theme="light"] .card-sub,
[data-theme="light"] .holding-card-name { color: #000000; }

/* ─────────────────────────────────────────────────────────────────────
   Dashboard v2 — Exec/CFO refresh
   Re-implements the structure of the design refresh in vanilla CSS,
   using the existing color palette (var(--cyan), --green, --orange,
   --bg-elevated, --border-soft, etc.). Scoped under .dash-v2 so it
   never affects other views.
   ───────────────────────────────────────────────────────────────────── */

.dashboard-grid.dash-v2 { display: flex; flex-direction: column; gap: 20px; }

.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.dash-kpi {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px 18px;
  overflow: hidden;
}
.dash-kpi-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent, var(--cyan));
  opacity: 0.85;
}
.dash-kpi-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dash-kpi-value {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.dash-kpi-value.green  { color: var(--green); }
.dash-kpi-value.red    { color: var(--red); }
.dash-kpi-value.orange { color: var(--orange); }
.dash-kpi-sub {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.dash-row {
  display: grid;
  gap: 14px;
}
.dash-row-1-4-1 { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 1100px) {
  .dash-row-1-4-1 { grid-template-columns: 1fr; }
  .dash-kpi-row    { grid-template-columns: repeat(2, 1fr); }
}

.dash-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dash-card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dash-card-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.dash-card-sub   { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* Composition card body — donut + legend side-by-side */
.dash-composition-body {
  padding: 24px 28px;
  display: flex;
  gap: 32px;
  align-items: center;
}
/* Override the global 160px donut to a proper hero size here */
.dash-composition-body .donut { width: 220px; height: 220px; }
.dash-composition-body .donut-center-label { font-size: 11px; letter-spacing: 0.8px; }
.dash-composition-body .donut-center-value { font-size: 22px; }
.dash-composition-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.dash-legend-row {
  display: grid;
  grid-template-columns: 14px 1fr auto 48px;
  gap: 10px;
  align-items: center;
  font-size: 12.5px;
}
.dash-legend-swatch { width: 10px; height: 10px; border-radius: 3px; }
.dash-legend-label  { color: var(--text-primary); font-weight: 500; }
.dash-legend-val    { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.dash-legend-pct    { color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }

/* Period-close bar + checklist rows */
.dash-close-bar-wrap { padding: 16px 18px 10px; }
.dash-close-bar-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.dash-close-pct {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.dash-close-meta { font-size: 12px; color: var(--text-muted); }
.dash-close-bar {
  height: 8px;
  background: var(--bg-deep);
  border-radius: 999px;
  overflow: hidden;
}
.dash-close-bar-fill { height: 100%; background: var(--green); }

.dash-checklist-row {
  display: flex;
  gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid var(--border-soft);
  align-items: center;
}
.dash-checklist-dot {
  width: 22px; height: 22px;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dash-checklist-text { flex: 1; min-width: 0; }
.dash-checklist-label { font-size: 12.5px; font-weight: 500; color: var(--text-primary); }
.dash-checklist-sub   { font-size: 10.5px; color: var(--text-muted); margin-top: 1px; }

/* Top movers rows */
.dash-mover-row {
  display: grid;
  grid-template-columns: 28px 1fr 110px 110px;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid var(--border-soft);
}
.dash-mover-sym   { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.dash-mover-name  { font-size: 11px; color: var(--text-muted); }
.dash-mover-urgl  { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-mover-urgl.green { color: var(--green); }
.dash-mover-urgl.red   { color: var(--red); }
.dash-mover-pct   { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dash-mover-mv    { font-size: 13px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.dash-mover-alloc { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Risk surface rows */
.dash-risk-row {
  display: flex;
  gap: 12px;
  padding: 13px 18px;
  border-top: 1px solid var(--border-soft);
  align-items: flex-start;
}
.dash-risk-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dash-risk-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.dash-risk-sub   { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* Variant switcher tabs (top of dashboard) */
.dash-variant-tabs {
  display: inline-flex;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 16px;
  gap: 2px;
}
.dash-variant-tab {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.dash-variant-tab:hover { color: var(--text-primary); }
.dash-variant-tab.active {
  background: var(--cyan-soft);
  color: var(--cyan);
}

/* Wider-left layout for activity variants */
.dash-row.dash-row-1-5-1 { grid-template-columns: 1.5fr 1fr; }
@media (max-width: 1100px) { .dash-row.dash-row-1-5-1 { grid-template-columns: 1fr; } }

/* Activity rows (variants B & C) */
.dash-activity-date {
  padding: 9px 18px;
  background: var(--bg-deep);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dash-activity-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  padding: 13px 18px;
  align-items: center;
  border-top: 1px solid var(--border-soft);
}
.dash-activity-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dash-activity-icon.in  { background: rgba(74,222,128,0.10); color: var(--green); }
.dash-activity-icon.out { background: rgba(248,113,113,0.10); color: var(--red); }
.dash-activity-title    { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.dash-activity-kind     { font-weight: 600; color: var(--text-primary); }
.dash-activity-sep      { color: var(--text-muted); }
.dash-activity-cp       { color: var(--text-secondary); font-size: 12.5px; }
.dash-activity-meta {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.dash-activity-meta .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.dash-activity-usd { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-activity-usd.green { color: var(--green); }
.dash-activity-usd.red   { color: var(--red); }
.dash-activity-qty       { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Hybrid hero card (variant C) */
.dash-hero-card { padding: 0; }
.dash-hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 24px;
  padding: 24px 28px;
}
.dash-hero-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dash-hero-pct-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 8px;
}
.dash-hero-pct {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.dash-hero-pct-sub { font-size: 13px; color: var(--text-secondary); }
.dash-hero-bar {
  margin-top: 12px;
  height: 10px;
  background: var(--bg-deep);
  border-radius: 999px;
  overflow: hidden;
  display: flex;
}
.dash-hero-legend {
  margin-top: 8px;
  font-size: 11.5px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.dash-hero-kpi {
  padding-left: 24px;
  border-left: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dash-hero-kpi-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dash-hero-kpi-value {
  margin-top: 8px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.dash-hero-kpi-value.green { color: var(--green); }
.dash-hero-kpi-value.red   { color: var(--red); }
.dash-hero-kpi-trend {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}
.dash-hero-kpi-trend.green { color: var(--green); }
.dash-hero-kpi-trend.red   { color: var(--red); }
@media (max-width: 1100px) {
  .dash-hero-grid { grid-template-columns: 1fr; }
  .dash-hero-kpi { border-left: none; border-top: 1px solid var(--border-soft); padding-left: 0; padding-top: 16px; }
}

/* By-token rows (hybrid right column) */
.dash-bytoken-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 18px;
  border-top: 1px solid var(--border-soft);
  font-size: 12.5px;
}

/* ─────────────────────────────────────────────────────────────────────
   Transactions — Classic ledger grid (refresh)
   ───────────────────────────────────────────────────────────────────── */
.tx-status-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 4px;
  width: fit-content;
}
.tx-status-tab {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.tx-status-tab:hover { color: var(--text-primary); }
.tx-status-tab.active {
  background: var(--cyan-soft);
  color: var(--cyan);
}
.tx-status-tab-count {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-deep);
  color: var(--text-muted);
}
.tx-status-tab.active .tx-status-tab-count {
  background: var(--cyan);
  color: #fff;
}
.tx-status-tab-count.tone-warn { color: var(--orange); }
.tx-status-tab-count.tone-pos  { color: var(--green); }
.tx-status-tab-count.tone-neg  { color: var(--red); }

/* Status pills inside the ledger Status column */
.tx-status-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tx-status-pill.warn    { background: rgba(240,160,77,0.15); color: var(--orange); border: 1px solid rgba(240,160,77,0.25); }
.tx-status-pill.pos     { background: rgba(74,222,128,0.10); color: var(--green);  border: 1px solid rgba(74,222,128,0.25); }
.tx-status-pill.neg     { background: rgba(248,113,113,0.10); color: var(--red);   border: 1px solid rgba(248,113,113,0.25); }
.tx-status-pill.neutral { background: var(--bg-deep); color: var(--text-secondary); border: 1px solid var(--border-soft); }

/* Chain pip — small colored chip next to the tx hash */
.tx-chain-pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid;
}

/* Footer summary row */
.tx-ledger-footer td {
  background: var(--bg-deep);
  border-top: 1px solid var(--border-soft);
}

/* ─────────────────────────────────────────────────────────────────────
   Settings — tabbed shell (refresh)
   ───────────────────────────────────────────────────────────────────── */
.settings-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: flex-start;
}
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 16px;
}
.settings-nav-item {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  padding: 9px 14px;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.settings-nav-item:hover { color: var(--text-primary); background: var(--bg-elevated); }
.settings-nav-item.active {
  background: var(--cyan-soft);
  color: var(--cyan);
  font-weight: 600;
}

.settings-content { min-width: 0; }

.settings-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
}
.settings-section-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.settings-section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.settings-section-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}
.settings-section-body { padding: 4px 22px 0; }

.settings-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--border-soft);
}
.settings-row:first-child { border-top: none; }
.settings-row-label { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.settings-row-desc  { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* Integration cards (Integrations tab) */
.settings-int-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 14px 0 18px;
}
.settings-int-card {
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}
.settings-int-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.settings-int-sub  { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }

/* Classification rule rows (COA tab) */
.settings-rule-row {
  display: grid;
  grid-template-columns: 130px 100px 1fr 24px 1fr 70px 32px;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--border-soft);
}
.settings-rule-row:first-child { border-top: none; }

/* Dashboard row-2 became three columns (Composition / Period close / Approvals) */
.dash-row.dash-row-3col { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1280px) { .dash-row.dash-row-3col { grid-template-columns: 1fr 1fr; } .dash-comp-compact { grid-column: span 2; } }
@media (max-width: 900px)  { .dash-row.dash-row-3col { grid-template-columns: 1fr; } .dash-comp-compact { grid-column: auto; } }

/* Compact composition card variant — donut shrinks, legend tightens */
.dash-composition-body.dash-composition-compact { padding: 18px 20px; gap: 18px; }
.dash-composition-body.dash-composition-compact .donut { width: 140px; height: 140px; }
.dash-composition-body.dash-composition-compact .donut-center-value { font-size: 16px; }
.dash-composition-body.dash-composition-compact .donut-center-label { font-size: 10px; }
.dash-composition-body.dash-composition-compact .dash-legend-row {
  grid-template-columns: 12px 1fr auto;
  font-size: 12px;
  gap: 8px;
}

/* Payment approvals card — empty state and (future) list rows */
.dash-approvals-body { padding: 22px 22px 24px; }
.dash-approvals-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.dash-approvals-empty-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--cyan-soft);
  color: var(--cyan);
  display: inline-flex; align-items: center; justify-content: center;
}
.dash-approvals-empty-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.dash-approvals-empty-sub   { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; max-width: 280px; }

/* ─────────────────────────────────────────────────────────────────────
   Wallets — Card grid variant
   ───────────────────────────────────────────────────────────────────── */
.wallet-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  padding: 18px;
}
.wallet-card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.wallet-card-stripe { height: 6px; }
.wallet-card-head {
  padding: 12px 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.wallet-card-label {
  padding: 10px 16px 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.wallet-card-addr {
  padding: 0 16px;
  font-size: 11px;
  color: var(--text-muted);
}
.wallet-card-stats {
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid var(--border-soft);
  margin-top: 12px;
}
.wallet-card-stat-label {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.wallet-card-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.wallet-card-actions {
  padding: 0 16px 14px;
  display: flex;
  gap: 6px;
}

/* ─────────────────────────────────────────────────────────────────────
   Palette enforcement (light mode) — strip green from non-price contexts.
   Approved palette: #FFF3DB · #ECE7DD · #CFC9BE · #8E8A83 · #2A2A2A.
   Green is reserved exclusively for price-positive (+ deltas, inflow icons).
   ───────────────────────────────────────────────────────────────────── */

/* Posted status pill (was green, now charcoal — "posted" is not price up) */
[data-theme="light"] .tx-status-pill.pos {
  background: rgba(236, 231, 221, 0.55);
  color: var(--text-primary);
  border-color: var(--border-soft);
}

/* Generic green badge — neutral in light mode */
[data-theme="light"] .badge-green {
  background: rgba(236, 231, 221, 0.55);
  color: var(--text-primary);
  border-color: var(--border-soft);
}

/* Pull-pill success state — neutral */
[data-theme="light"] .pull-pill.pill-success { border-left-color: var(--text-primary); }

/* Dashboard variant tabs / TX status tabs active state — charcoal pill */
[data-theme="light"] .dash-variant-tab.active,
[data-theme="light"] .tx-status-tab.active,
[data-theme="light"] .settings-nav-item.active {
  background: var(--cyan-soft);   /* now charcoal-soft, not green */
  color: var(--text-primary);
}
[data-theme="light"] .tx-status-tab.active .tx-status-tab-count {
  background: var(--text-primary);
  color: var(--bg-elevated);
}

/* KPI accent stripes that were "green" (positive) keep their meaning since
   they sit at the top of cards showing price values. Only the structural
   accents (was forest green) got changed via the --cyan remap. */

/* ─────────────────────────────────────────────────────────────────────
   Active-state contrast fix (light mode)
   --cyan is now cream (#ECE7DD) — so any rule that did `color: var(--cyan)`
   on an active item rendered cream-on-cream and was invisible. Force black
   text + visible accent for every active state across the app.
   ───────────────────────────────────────────────────────────────────── */
[data-theme="light"] .nav-item.active,
[data-theme="light"] .nav-item.active svg,
[data-theme="light"] .nav-item:hover svg,
[data-theme="light"] .settings-nav a.active,
[data-theme="light"] .filter-chip.active,
[data-theme="light"] .theme-toggle-btn.active,
[data-theme="light"] .toggle-group button.active,
[data-theme="light"] .cmdk-item.active {
  color: var(--text-primary);
}

/* The 2px left-edge stripe on the active nav item — must be visible,
   so use the dark palette gray instead of cream. */
[data-theme="light"] .nav-item.active::before {
  background: var(--border-strong);  /* #8E8A83 */
}

/* Sidebar nav badge inside an active item — black text on taupe pill */
[data-theme="light"] .nav-item.active .nav-badge {
  background: var(--border-soft);    /* #CFC9BE */
  color: var(--text-primary);
}

/* Active tab count chip — black text on taupe so it reads on cream */
[data-theme="light"] .tx-status-tab.active .tx-status-tab-count {
  background: var(--border-strong);
  color: #FFFAF2;
}

/* Background of the active row itself — give it a hair more contrast
   than --bg-active so it's distinguishable from the page bg. */
[data-theme="light"] .nav-item.active,
[data-theme="light"] .settings-nav-item.active,
[data-theme="light"] .settings-nav a.active,
[data-theme="light"] .dash-variant-tab.active,
[data-theme="light"] .tx-status-tab.active {
  background: var(--border-soft);    /* #CFC9BE — clearly distinct taupe */
}

/* =============================================================
   PHASE 0 — Reference primitives (Subframe port)
   =============================================================
   Pure-additive: all classes prefixed `.ref-` to guarantee no
   collision with existing rules. Used by the new pages introduced
   in Phase 2+ (dashboards, grants, payments, invoices, etc.).
   The existing app's look and feel is unchanged.

   Token mapping notes:
   - Reference accent (T.accent #047857) maps to our existing
     --cyan in dark / brand green in light, kept literal here for
     full reference fidelity until later phases tune.
   - tones (pos/neg/warn/info) pull from reference's exact values
     so cross-checks against the Subframe HTML look identical.
   ============================================================= */

:root {
  /* Reference palette — semantic tokens (theme-neutral so far) */
  --ref-accent:        #047857;
  --ref-accent-soft:   rgba(4,120,87,0.08);
  --ref-accent-softer: rgba(4,120,87,0.04);
  --ref-accent-ink:    #065F46;
  --ref-pos:           #15803D;
  --ref-pos-soft:      rgba(21,128,61,0.08);
  --ref-neg:           #B91C1C;
  --ref-neg-soft:      rgba(185,28,28,0.08);
  --ref-warn:          #B45309;
  --ref-warn-soft:     rgba(180,83,9,0.08);
  --ref-info:          #1D4ED8;
  --ref-info-soft:     rgba(29,78,216,0.08);
}

/* Dark-theme overrides for reference tones — slightly brighter so
   they read on dark surfaces. */
:root {
  --ref-accent-dark:        #5EEAD4;
  --ref-pos-dark:           #4ADE80;
  --ref-neg-dark:           #F87171;
  --ref-warn-dark:          #FB923C;
  --ref-info-dark:          #60A5FA;
}
html:not([data-theme="light"]) .ref-btn-primary,
html:not([data-theme="light"]) .ref-badge-pos,
html:not([data-theme="light"]) .ref-badge-neg,
html:not([data-theme="light"]) .ref-badge-warn,
html:not([data-theme="light"]) .ref-badge-info { /* placeholder — dark tweaks added when needed */ }

/* ── Btn ─────────────────────────────────────────────────────── */
.ref-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 8px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px; font-weight: 600; line-height: 1;
  white-space: nowrap; cursor: pointer; user-select: none;
  border: 1px solid transparent; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ref-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.ref-btn-sm { padding: 6px 10px; font-size: 11.5px; gap: 5px; }
.ref-btn-lg { padding: 11px 18px; font-size: 14px; gap: 8px; }

.ref-btn-primary {
  background: var(--ref-accent); color: #fff; border-color: var(--ref-accent);
}
.ref-btn-primary:hover { background: var(--ref-accent-ink); border-color: var(--ref-accent-ink); }

.ref-btn-ghost {
  background: var(--bg-card-solid, #fff); color: var(--text-primary, #111);
  border-color: var(--border-soft, rgba(0,0,0,0.08));
}
.ref-btn-ghost:hover { background: var(--bg-hover, rgba(0,0,0,0.03)); }

.ref-btn-soft {
  background: rgba(0,0,0,0.04); color: var(--text-primary, #111); border-color: transparent;
}
.ref-btn-soft:hover { background: rgba(0,0,0,0.07); }

.ref-btn-outline {
  background: transparent; color: var(--ref-accent);
  border-color: rgba(4,120,87,0.3);
}
.ref-btn-outline:hover { background: var(--ref-accent-soft); }

.ref-btn-danger {
  background: var(--bg-card-solid, #fff); color: var(--ref-neg);
  border-color: rgba(185,28,28,0.25);
}
.ref-btn-danger:hover { background: var(--ref-neg-soft); }

.ref-btn-icon {
  display: inline-flex; width: 14px; height: 14px; flex-shrink: 0;
}
.ref-btn-sm .ref-btn-icon { width: 13px; height: 13px; }
.ref-btn-lg .ref-btn-icon { width: 16px; height: 16px; }

/* ── Badge ───────────────────────────────────────────────────── */
.ref-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.2px;
  white-space: nowrap; border: 1px solid transparent;
}
.ref-badge-dot::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.ref-badge-neutral { background: rgba(0,0,0,0.04); color: var(--text-secondary, #4B5563); border-color: var(--border-soft, rgba(0,0,0,0.08)); }
.ref-badge-accent  { background: var(--ref-accent-soft); color: var(--ref-accent); border-color: rgba(4,120,87,0.25); }
.ref-badge-pos     { background: var(--ref-pos-soft);    color: var(--ref-pos);    border-color: rgba(21,128,61,0.25); }
.ref-badge-neg     { background: var(--ref-neg-soft);    color: var(--ref-neg);    border-color: rgba(185,28,28,0.25); }
.ref-badge-warn    { background: var(--ref-warn-soft);   color: var(--ref-warn);   border-color: rgba(180,83,9,0.25); }
.ref-badge-info    { background: var(--ref-info-soft);   color: var(--ref-info);   border-color: rgba(29,78,216,0.25); }

/* ── Card ────────────────────────────────────────────────────── */
.ref-card {
  background: var(--bg-card-solid, #fff);
  border: 1px solid var(--border-soft, rgba(0,0,0,0.08));
  border-radius: 14px;
  overflow: hidden;
}
.ref-card-header {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.08));
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.ref-card-title { font-size: 13px; font-weight: 600; color: var(--text-primary, #111); }
.ref-card-sub   { font-size: 11.5px; color: var(--text-muted, #9CA3AF); margin-top: 2px; }
.ref-card-body  { padding: 18px 20px; }
.ref-card-body-flush { padding: 0; }

/* ── KPI tile ───────────────────────────────────────────────── */
.ref-kpi {
  background: var(--bg-card-solid, #fff);
  border: 1px solid var(--border-soft, rgba(0,0,0,0.08));
  border-radius: 14px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative; overflow: hidden;
}
.ref-kpi-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--text-muted, #9CA3AF);
}
.ref-kpi-value {
  font-size: 22px; font-weight: 700; letter-spacing: -0.4px;
  color: var(--text-primary, #111);
  font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.ref-kpi-sub { font-size: 11.5px; color: var(--text-muted, #9CA3AF); }
.ref-kpi-tone-pos  .ref-kpi-value { color: var(--ref-pos); }
.ref-kpi-tone-neg  .ref-kpi-value { color: var(--ref-neg); }
.ref-kpi-tone-warn .ref-kpi-value { color: var(--ref-warn); }
.ref-kpi-tone-info .ref-kpi-value { color: var(--ref-info); }

/* ── Segmented control ───────────────────────────────────────── */
.ref-segmented {
  display: inline-flex; padding: 2px; gap: 1px;
  background: var(--bg-deep, #EEEEF1);
  border: 1px solid var(--border-soft, rgba(0,0,0,0.08));
  border-radius: 8px;
}
.ref-segmented-btn {
  padding: 5px 11px; border: none; border-radius: 6px;
  background: transparent; color: var(--text-secondary, #4B5563);
  font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600;
  cursor: pointer; min-width: 32px;
  transition: background 0.12s, color 0.12s;
}
.ref-segmented-btn.is-active {
  background: var(--bg-card-solid, #fff); color: var(--text-primary, #111);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04);
}

/* ── TokenChip ──────────────────────────────────────────────── */
/* Use inline style="--token-color:#XXX" to pass the per-token color. */
.ref-token-chip {
  --token-color: #6B7280;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--token-color) 0%, var(--token-color) 100%);
  color: #fff; font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 0;
}
.ref-token-chip-sm { width: 18px; height: 18px; font-size: 8px; }
.ref-token-chip-lg { width: 28px; height: 28px; font-size: 10px; }

/* ── ChainPip ───────────────────────────────────────────────── */
.ref-chain-pip {
  --chain-color: #6B7280;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px 2px 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--chain-color) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--chain-color) 19%, transparent);
  color: var(--text-secondary, #4B5563);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px;
  text-transform: uppercase; white-space: nowrap;
}
.ref-chain-pip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--chain-color);
}

/* ── Tabular nums helper ────────────────────────────────────── */
.ref-tnum { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.ref-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
             font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }