/* ============================================================
   Fantasy Adda Financial Hub — Redesign v3
   Direct translation of the two reference dashboards.
   Light: blush bg + black sidebar + white cards + hot pink CTA.
   Dark:  deep violet bg + near-black sidebar + violet cards.
   ============================================================ */

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  /* Hot pink CTA — matches ref 2 "Transfer" button */
  --primary:       #F43F5E;
  --primary-dark:  #E11D48;
  --primary-light: #FB7185;
  --primary-glow:  rgba(244, 63, 94, 0.24);
  --primary-glow2: rgba(244, 63, 94, 0.08);

  /* Dark filled pill — matches ref 2 "Home" active nav + "Calculate" button */
  --ink:           #0A0A0F;
  --ink-2:         #1A1A22;

  /* Accents for hero cards, chips, sparks */
  --accent-violet: #7C3AED;
  --accent-indigo: #4F46E5;
  --accent-pink:   #EC4899;
  --accent-cyan:   #06B6D4;
  --accent-amber:  #F59E0B;
  --accent-emerald:#10B981;

  --hero-gradient:      linear-gradient(135deg, #7C3AED 0%, #4F46E5 45%, #EC4899 110%);
  --hero-gradient-dark: linear-gradient(135deg, #6D28D9 0%, #4338CA 45%, #DB2777 110%);
  --card-gradient-dark: linear-gradient(160deg, #6D28D9 0%, #4C1D95 60%, #1E1B4B 100%);

  /* Light-mode surfaces — soft blush background from ref 2 */
  --bg:       #F0E4E4;
  --bg-2:     #E8DADA;
  --surface:  #E8DADA;
  --card:     #FFFFFF;
  --card-2:   #F7F1F1;
  --card-3:   #FDFAFA;
  --card-border:       rgba(10, 10, 15, 0.06);
  --card-border-2:     rgba(10, 10, 15, 0.04);
  --card-border-hover: rgba(244, 63, 94, 0.28);

  /* Text scale */
  --text:   #0A0A0F;
  --text-1: #0A0A0F;
  --text-2: #3F3F46;
  --text-3: #71717A;
  --text-4: #A1A1AA;

  /* Sidebar is always dark — ref 1 aesthetic — even in light mode */
  --sb-bg:       #0A0A0F;
  --sb-bg-2:     #14141C;
  --sb-border:   rgba(255, 255, 255, 0.06);
  --sb-text:     #FFFFFF;
  --sb-text-2:   rgba(255, 255, 255, 0.60);
  --sb-text-3:   rgba(255, 255, 255, 0.35);
  --sb-active:   #FFFFFF;
  --sb-active-fg:#0A0A0F;

  --success:    #10B981;
  --success-2:  #059669;
  --danger:     #EF4444;
  --danger-2:   #DC2626;
  --warning:    #F59E0B;
  --warning-2:  #D97706;
  --info:       #3B82F6;
  --info-2:     #2563EB;

  --success-bg: rgba(16, 185, 129, 0.12);
  --danger-bg:  rgba(239, 68,  68, 0.12);
  --warning-bg: rgba(245, 158,  11, 0.12);
  --info-bg:    rgba(59, 130, 246, 0.12);

  /* Outer frame color (body bg, shows around the rounded container) */
  --frame-bg: #4C1D95;

  /* Category chip pastels — ref 2 category pills */
  --chip-pink-bg:    #FCE7F3; --chip-pink-fg:    #BE185D;
  --chip-purple-bg:  #EDE9FE; --chip-purple-fg:  #6D28D9;
  --chip-green-bg:   #D1FAE5; --chip-green-fg:   #047857;
  --chip-orange-bg:  #FED7AA; --chip-orange-fg:  #B45309;
  --chip-blue-bg:    #DBEAFE; --chip-blue-fg:    #1D4ED8;
  --chip-red-bg:     #FEE2E2; --chip-red-fg:     #B91C1C;

  /* Very rounded — the whole point of these refs */
  --radius-sm:  12px;
  --radius:     18px;
  --radius-lg:  24px;
  --radius-xl:  28px;
  --pill:       999px;

  --shadow-xs:  0 1px 2px rgba(10, 10, 15, 0.03);
  --shadow-sm:  0 2px 6px rgba(10, 10, 15, 0.05), 0 1px 2px rgba(10, 10, 15, 0.03);
  --shadow:     0 4px 16px rgba(10, 10, 15, 0.06), 0 1px 3px rgba(10, 10, 15, 0.04);
  --shadow-lg:  0 16px 40px rgba(10, 10, 15, 0.10), 0 4px 12px rgba(10, 10, 15, 0.06);
  --shadow-hero: 0 20px 60px rgba(124, 58, 237, 0.35);
  --shadow-glow: 0 0 0 4px var(--primary-glow);
  --shadow-card: var(--shadow-xs);

  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: light;
}

/* ── Dark mode (system) ───────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --primary:       #A78BFA;
    --primary-dark:  #8B5CF6;
    --primary-light: #C4B5FD;
    --primary-glow:  rgba(167, 139, 250, 0.28);
    --primary-glow2: rgba(167, 139, 250, 0.10);

    --ink:           #FFFFFF;
    --ink-2:         #F5F3FF;

    --frame-bg: #0A0510;

    --hero-gradient: var(--hero-gradient-dark);

    /* Deep violet-black canvas — ref 1 aesthetic */
    --bg:       #0D0619;
    --bg-2:     #14082B;
    --surface:  #1A0F35;
    --card:     #1A1030;
    --card-2:   #221540;
    --card-3:   #150A28;
    --card-border:       rgba(255, 255, 255, 0.06);
    --card-border-2:     rgba(255, 255, 255, 0.04);
    --card-border-hover: rgba(167, 139, 250, 0.40);

    --text:   #F5F3FF;
    --text-1: #F5F3FF;
    --text-2: #D1CFE8;
    --text-3: #A8A4C7;
    --text-4: #6B678A;

    --sb-bg:       #08040F;
    --sb-bg-2:     #0F0820;
    --sb-border:   rgba(255, 255, 255, 0.05);
    --sb-text:     #FFFFFF;
    --sb-text-2:   rgba(255, 255, 255, 0.60);
    --sb-text-3:   rgba(255, 255, 255, 0.35);
    --sb-active:   var(--primary);
    --sb-active-fg: var(--ink);

    --success:   #34D399; --success-2: #10B981;
    --danger:    #F87171; --danger-2:  #EF4444;
    --warning:   #FBBF24; --warning-2: #F59E0B;
    --info:      #60A5FA; --info-2:    #3B82F6;

    --success-bg: rgba(52, 211, 153, 0.16);
    --danger-bg:  rgba(248, 113, 113, 0.16);
    --warning-bg: rgba(251, 191,  36, 0.16);
    --info-bg:    rgba(96, 165, 250, 0.16);

    /* Chip pastels get slightly deeper for dark mode contrast */
    --chip-pink-bg:    rgba(236, 72, 153, 0.18); --chip-pink-fg:    #F9A8D4;
    --chip-purple-bg:  rgba(124, 58, 237, 0.20); --chip-purple-fg:  #C4B5FD;
    --chip-green-bg:   rgba(16, 185, 129, 0.18); --chip-green-fg:   #6EE7B7;
    --chip-orange-bg:  rgba(245, 158,  11, 0.18); --chip-orange-fg:  #FCD34D;
    --chip-blue-bg:    rgba(59, 130, 246, 0.18); --chip-blue-fg:    #93C5FD;
    --chip-red-bg:     rgba(239, 68,  68, 0.18); --chip-red-fg:     #FCA5A5;

    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow:     0 4px 16px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-lg:  0 16px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-hero: 0 20px 60px rgba(139, 92, 246, 0.50);

    color-scheme: dark;
  }
}

/* Explicit theme choice wins over system. */
:root[data-theme="light"] {
  color-scheme: light;
  --frame-bg: #4C1D95;
  --primary:       #F43F5E; --primary-dark:  #E11D48; --primary-light: #FB7185;
  --primary-glow:  rgba(244, 63, 94, 0.24); --primary-glow2: rgba(244, 63, 94, 0.08);
  --ink: #0A0A0F; --ink-2: #1A1A22;
  --hero-gradient: linear-gradient(135deg, #7C3AED 0%, #4F46E5 45%, #EC4899 110%);
  --bg: #F0E4E4; --bg-2: #E8DADA; --surface: #E8DADA;
  --card: #FFFFFF; --card-2: #F7F1F1; --card-3: #FDFAFA;
  --card-border: rgba(10, 10, 15, 0.06);
  --card-border-2: rgba(10, 10, 15, 0.04);
  --card-border-hover: rgba(244, 63, 94, 0.28);
  --text: #0A0A0F; --text-1: #0A0A0F; --text-2: #3F3F46;
  --text-3: #71717A; --text-4: #A1A1AA;
  --sb-bg: #0A0A0F; --sb-bg-2: #14141C; --sb-border: rgba(255,255,255,0.06);
  --sb-text: #FFFFFF; --sb-text-2: rgba(255,255,255,0.60);
  --sb-text-3: rgba(255,255,255,0.35);
  --sb-active: #FFFFFF; --sb-active-fg: #0A0A0F;
  --success: #10B981; --success-2: #059669;
  --danger: #EF4444; --danger-2: #DC2626;
  --warning: #F59E0B; --warning-2: #D97706;
  --info: #3B82F6; --info-2: #2563EB;
  --success-bg: rgba(16, 185, 129, 0.12);
  --danger-bg: rgba(239, 68, 68, 0.12);
  --warning-bg: rgba(245, 158, 11, 0.12);
  --info-bg: rgba(59, 130, 246, 0.12);
  --chip-pink-bg: #FCE7F3; --chip-pink-fg: #BE185D;
  --chip-purple-bg: #EDE9FE; --chip-purple-fg: #6D28D9;
  --chip-green-bg: #D1FAE5; --chip-green-fg: #047857;
  --chip-orange-bg: #FED7AA; --chip-orange-fg: #B45309;
  --chip-blue-bg: #DBEAFE; --chip-blue-fg: #1D4ED8;
  --chip-red-bg: #FEE2E2; --chip-red-fg: #B91C1C;
  --shadow-xs: 0 1px 2px rgba(10, 10, 15, 0.03);
  --shadow-sm: 0 2px 6px rgba(10, 10, 15, 0.05), 0 1px 2px rgba(10, 10, 15, 0.03);
  --shadow: 0 4px 16px rgba(10, 10, 15, 0.06), 0 1px 3px rgba(10, 10, 15, 0.04);
  --shadow-lg: 0 16px 40px rgba(10, 10, 15, 0.10), 0 4px 12px rgba(10, 10, 15, 0.06);
  --shadow-hero: 0 20px 60px rgba(124, 58, 237, 0.35);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --frame-bg: #0A0510;
  --primary: #A78BFA; --primary-dark: #8B5CF6; --primary-light: #C4B5FD;
  --primary-glow: rgba(167, 139, 250, 0.28); --primary-glow2: rgba(167, 139, 250, 0.10);
  --ink: #FFFFFF; --ink-2: #F5F3FF;
  --hero-gradient: linear-gradient(135deg, #6D28D9 0%, #4338CA 45%, #DB2777 110%);
  --bg: #0D0619; --bg-2: #14082B; --surface: #1A0F35;
  --card: #1A1030; --card-2: #221540; --card-3: #150A28;
  --card-border: rgba(255, 255, 255, 0.06);
  --card-border-2: rgba(255, 255, 255, 0.04);
  --card-border-hover: rgba(167, 139, 250, 0.40);
  --text: #F5F3FF; --text-1: #F5F3FF; --text-2: #D1CFE8;
  --text-3: #A8A4C7; --text-4: #6B678A;
  --sb-bg: #08040F; --sb-bg-2: #0F0820; --sb-border: rgba(255,255,255,0.05);
  --sb-text: #FFFFFF; --sb-text-2: rgba(255,255,255,0.60);
  --sb-text-3: rgba(255,255,255,0.35);
  --sb-active: #A78BFA; --sb-active-fg: #FFFFFF;
  --success: #34D399; --success-2: #10B981;
  --danger: #F87171; --danger-2: #EF4444;
  --warning: #FBBF24; --warning-2: #F59E0B;
  --info: #60A5FA; --info-2: #3B82F6;
  --success-bg: rgba(52, 211, 153, 0.16);
  --danger-bg: rgba(248, 113, 113, 0.16);
  --warning-bg: rgba(251, 191, 36, 0.16);
  --info-bg: rgba(96, 165, 250, 0.16);
  --chip-pink-bg: rgba(236, 72, 153, 0.18); --chip-pink-fg: #F9A8D4;
  --chip-purple-bg: rgba(124, 58, 237, 0.20); --chip-purple-fg: #C4B5FD;
  --chip-green-bg: rgba(16, 185, 129, 0.18); --chip-green-fg: #6EE7B7;
  --chip-orange-bg: rgba(245, 158, 11, 0.18); --chip-orange-fg: #FCD34D;
  --chip-blue-bg: rgba(59, 130, 246, 0.18); --chip-blue-fg: #93C5FD;
  --chip-red-bg: rgba(239, 68, 68, 0.18); --chip-red-fg: #FCA5A5;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-hero: 0 20px 60px rgba(139, 92, 246, 0.50);
}

/* ── Base ─────────────────────────────────────────────────── */
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-feature-settings: 'ss01', 'cv01', 'cv02';
  letter-spacing: -0.008em;
  min-height: 100vh;
  transition: background 200ms ease, color 200ms ease;
}

/* Clean layout — no outer frame. Dark sidebar on left, light content on right. */
.sidebar {
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  border-radius: 0 !important;
  border-right: 1px solid var(--sb-border) !important;
}
.sidebar-logo { border-radius: 0; }

.main-content {
  margin-left: var(--sidebar-w) !important;
  min-height: 100vh;
  background: var(--bg);
  border-radius: 0;
  padding: 0;
  border-top: none;
}
.sidebar.collapsed ~ .main-content {
  margin-left: var(--sidebar-w-col) !important;
}

.topbar {
  background: color-mix(in oklab, var(--bg) 90%, transparent) !important;
  backdrop-filter: saturate(140%) blur(12px);
  border-radius: 0;
  border-top: none;
  border-bottom: 1px solid var(--card-border-2);
  margin: 0;
}

.page-content {
  background: var(--bg);
  border-radius: 0;
  min-height: calc(100vh - 64px);
}

@media (max-width: 768px) {
  .sidebar { border-right: none !important; }
}

.kpi-value, .pnl-card-value, .gateway-balance,
.summary-strip-value, .gw-summary-value,
.td-amount, .text-right, .font-mono, th, td {
  font-variant-numeric: tabular-nums;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--text-3) 30%, transparent);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--text-3) 55%, transparent); }

/* ── Sidebar — always dark (ref 1 aesthetic) ─────────────── */
.sidebar {
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  box-shadow: none;
}
.sidebar-logo {
  border-bottom: 1px solid var(--sb-border);
  padding: 22px 20px 20px;
}
.logo-icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--hero-gradient);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.55), inset 0 1px 0 rgba(255,255,255,0.20);
  font-size: 17px; font-weight: 800; color: #fff;
}
.logo-text h2 {
  font-size: 15.5px; font-weight: 700; color: var(--sb-text);
  letter-spacing: -0.02em;
}
.logo-text span {
  font-size: 9.5px; color: var(--sb-text-3); letter-spacing: 1.4px; font-weight: 700;
}

.sidebar-collapse {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--sb-bg-2); border: 1px solid var(--sb-border);
  color: var(--sb-text-2);
  z-index: 10;
  cursor: pointer;
}
.sidebar-collapse:hover {
  background: #fff; color: var(--ink); border-color: #fff;
}

/* Collapsed state — logo/text out, expand button centered and clickable. */
.sidebar.collapsed .sidebar-logo {
  padding: 20px 0;
  justify-content: center;
}
.sidebar.collapsed .logo-icon,
.sidebar.collapsed .logo-text { display: none; }
.sidebar.collapsed .sidebar-collapse {
  position: static;
  right: auto; top: auto; transform: none;
  margin: 0 auto;
}
/* Icon-only nav items when collapsed, centered */
.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 11px 0;
}
.sidebar.collapsed .nav-label { display: none; }
.sidebar.collapsed .nav-section-label { display: none; }
.sidebar.collapsed .user-card {
  justify-content: center;
  padding: 10px;
}
.sidebar.collapsed .user-info { display: none; }
.sidebar.collapsed .sidebar-footer-actions { flex-direction: column; }
.sidebar.collapsed .sidebar-footer-actions button {
  font-size: 0 !important;
  padding: 8px !important;
  width: 100%;
}
.sidebar.collapsed .sidebar-footer-actions button i { font-size: 14px; }

.sidebar-nav { padding: 14px 14px; }
.nav-section-label {
  font-size: 10px; font-weight: 700; color: var(--sb-text-3);
  letter-spacing: 1.6px; text-transform: uppercase;
  padding: 16px 12px 8px;
}

.nav-item {
  border-radius: 14px;
  padding: 11px 14px;
  margin: 3px 0;
  color: var(--sb-text-2); font-weight: 500; font-size: 13.5px;
  border-left: none;
  gap: 12px;
  transition: background var(--transition), color var(--transition);
}
.nav-item:hover { background: var(--sb-bg-2); color: var(--sb-text); }
.nav-item.active {
  background: var(--sb-active);
  color: var(--sb-active-fg);
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,0.30);
}
.nav-item.active .nav-icon { color: var(--sb-active-fg); }
.nav-icon { width: 22px; font-size: 14.5px; color: var(--sb-text-3); }

.sidebar-footer {
  border-top: 1px solid var(--sb-border);
  padding: 14px;
}
.user-card {
  background: var(--sb-bg-2);
  border: 1px solid var(--sb-border);
  border-radius: 16px;
  padding: 12px 14px;
}
.user-avatar {
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--hero-gradient);
  font-size: 13px; font-weight: 700; color: #fff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.40);
}
.user-name { font-size: 13px; font-weight: 700; color: var(--sb-text); }
.user-status { font-size: 10.5px; color: var(--sb-text-3); }
.status-dot { background: var(--success); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25); }

/* Footer buttons in sidebar need light text */
.sidebar-footer-actions button {
  color: var(--sb-text-2) !important;
  background: transparent !important;
  border: 1px solid var(--sb-border) !important;
  border-radius: var(--pill) !important;
  padding: 7px 12px !important;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
}
.sidebar-footer-actions button:hover {
  background: var(--sb-bg-2) !important; color: var(--sb-text) !important;
}
.sidebar-footer-actions .btn-logout:hover {
  background: rgba(239, 68, 68, 0.20) !important; color: #FCA5A5 !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}

/* ── Topbar ───────────────────────────────────────────────── */
.topbar {
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--card-border-2);
  height: 66px;
}
.breadcrumb { font-size: 13px; color: var(--text-3); font-weight: 500; }
.breadcrumb .sep { color: var(--text-4); }
.breadcrumb .current { color: var(--text-1); font-weight: 700; }
.topbar-date {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--pill);
  padding: 8px 16px;
  font-size: 12px; color: var(--text-2); font-weight: 600;
  box-shadow: var(--shadow-xs);
}
.topbar-date i { color: var(--primary); }

/* ── Page ─────────────────────────────────────────────────── */
.page-content { padding: 24px 28px; }
.page-header {
  margin-bottom: 22px;
  align-items: center;
  gap: 16px;
}
.page-title {
  display: flex;
  align-items: center;
  gap: 16px;
}
.page-title-text { min-width: 0; }
.page-title h1 {
  font-size: 24px; font-weight: 800;
  letter-spacing: -0.03em; color: var(--text-1);
  line-height: 1.1;
}
.page-title p {
  font-size: 13px; color: var(--text-3);
  margin-top: 4px;
}

/* Per-page identity tile — FA icon in a tinted rounded square */
.page-title-icon {
  width: 54px; height: 54px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center; justify-content: center;
  line-height: 1;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.page-title-icon::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.55) 0%, transparent 50%);
  pointer-events: none;
}
.page-title-icon i {
  font-size: 22px;
  position: relative; z-index: 1;
}

.page-title-icon[data-tone="violet"]   { background: linear-gradient(140deg, #EDE9FE 0%, #C4B5FD 100%); }
.page-title-icon[data-tone="violet"] i { color: #6D28D9; }
.page-title-icon[data-tone="green"]    { background: linear-gradient(140deg, #D1FAE5 0%, #86EFAC 100%); }
.page-title-icon[data-tone="green"] i  { color: #047857; }
.page-title-icon[data-tone="blue"]     { background: linear-gradient(140deg, #DBEAFE 0%, #93C5FD 100%); }
.page-title-icon[data-tone="blue"] i   { color: #1D4ED8; }
.page-title-icon[data-tone="red"]      { background: linear-gradient(140deg, #FEE2E2 0%, #FCA5A5 100%); }
.page-title-icon[data-tone="red"] i    { color: #B91C1C; }
.page-title-icon[data-tone="emerald"]  { background: linear-gradient(140deg, #D1FAE5 0%, #6EE7B7 100%); }
.page-title-icon[data-tone="emerald"] i{ color: #047857; }
.page-title-icon[data-tone="orange"]   { background: linear-gradient(140deg, #FED7AA 0%, #FB923C 100%); }
.page-title-icon[data-tone="orange"] i { color: #B45309; }
.page-title-icon[data-tone="purple"]   { background: linear-gradient(140deg, #EDE9FE 0%, #A78BFA 100%); }
.page-title-icon[data-tone="purple"] i { color: #6D28D9; }

/* Dark mode variants keep the same accent hue but lower luminance */
:root[data-theme="dark"] .page-title-icon,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-title-icon[data-tone="violet"]  { background: linear-gradient(140deg, rgba(124,58,237,0.35) 0%, rgba(76,29,149,0.55) 100%); }
  :root:not([data-theme="light"]) .page-title-icon[data-tone="green"]   { background: linear-gradient(140deg, rgba(16,185,129,0.30) 0%, rgba(6,95,70,0.55) 100%); }
  :root:not([data-theme="light"]) .page-title-icon[data-tone="blue"]    { background: linear-gradient(140deg, rgba(59,130,246,0.30) 0%, rgba(30,58,138,0.55) 100%); }
  :root:not([data-theme="light"]) .page-title-icon[data-tone="red"]     { background: linear-gradient(140deg, rgba(239,68,68,0.30) 0%, rgba(153,27,27,0.55) 100%); }
  :root:not([data-theme="light"]) .page-title-icon[data-tone="emerald"] { background: linear-gradient(140deg, rgba(16,185,129,0.30) 0%, rgba(6,78,59,0.55) 100%); }
  :root:not([data-theme="light"]) .page-title-icon[data-tone="orange"]  { background: linear-gradient(140deg, rgba(245,158,11,0.30) 0%, rgba(146,64,14,0.55) 100%); }
  :root:not([data-theme="light"]) .page-title-icon[data-tone="purple"]  { background: linear-gradient(140deg, rgba(167,139,250,0.30) 0%, rgba(76,29,149,0.55) 100%); }
}

/* ── Grids ────────────────────────────────────────────────── */
.grid-2, .grid-3, .grid-4, .grid-2-1, .grid-1-2, .kpi-grid-5 { gap: 16px; }

/* ── Cards — big 24px radius, pure white on blush ────────── */
.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  box-shadow: var(--shadow-xs);
  padding: 22px 24px;
}
.card-header {
  padding: 0 0 16px 0; margin-bottom: 16px;
  border-bottom: 1px solid var(--card-border-2);
}
.card-title {
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--text-1);
  display: flex; align-items: center; gap: 10px;
}
.card-title i {
  width: 34px; height: 34px; border-radius: 12px;
  background: var(--card-2); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}

/* ── KPI Card — big numbers, subtle hover lift ───────────── */
.kpi-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: 22px 24px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  position: relative;
  transition: transform 160ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.kpi-card:hover {
  transform: translateY(-3px);
  border-color: var(--card-border-hover);
  box-shadow: var(--shadow);
}
.kpi-card-bg { opacity: 0.04; }
.kpi-top { margin-bottom: 14px; }
.kpi-label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-3);
}
.kpi-icon {
  width: 44px; height: 44px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.kpi-value {
  font-size: 32px; font-weight: 800;
  letter-spacing: -0.035em; color: var(--text-1); line-height: 1.02;
}
.kpi-trend {
  font-size: 11.5px; font-weight: 700; margin-top: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--pill);
  background: var(--card-2);
}
.kpi-trend.up   { color: var(--success); background: var(--success-bg); }
.kpi-trend.down { color: var(--danger);  background: var(--danger-bg); }

/* ── Hero card — the big gradient purple card (ref 1) ────── */
.card.hero,
.card.section[style*="linear-gradient"] {
  background: var(--hero-gradient) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: var(--shadow-hero);
  border-radius: 28px !important;
  padding: 30px 32px !important;
  position: relative; overflow: hidden;
}
.card.hero *, .card.section[style*="linear-gradient"] * {
  color: #fff !important; border-color: rgba(255,255,255,0.16) !important;
}
.card.hero .card-title i,
.card.section[style*="linear-gradient"] .card-title i {
  background: rgba(255,255,255,0.16) !important;
  color: #fff !important;
}
.card.hero .card-header,
.card.section[style*="linear-gradient"] .card-header {
  border-bottom-color: rgba(255,255,255,0.18) !important;
}
.card.hero::before,
.card.section[style*="linear-gradient"]::before {
  content: '';
  position: absolute; inset: -40% -20% auto auto;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(255,255,255,0.28) 0%, transparent 65%);
  pointer-events: none;
}

/* ── PnL Card ────────────────────────────────────────────── */
.pnl-card {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 24px; padding: 22px 24px;
  box-shadow: var(--shadow-xs);
}
.pnl-card-label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-3);
}
.pnl-card-value {
  font-size: 30px; font-weight: 800; letter-spacing: -0.035em;
  color: var(--text-1); margin-top: 10px;
}
.pnl-card-sub { font-size: 11.5px; color: var(--text-3); margin-top: 6px; }
.pnl-positive { color: var(--success); }
.pnl-negative { color: var(--danger); }
.pnl-red      { color: var(--danger); }
.pnl-neutral  { color: var(--text-2); }

/* ── Buttons — dark pill for secondary/active, hot pink primary ── */
.btn {
  border-radius: var(--pill);
  padding: 10px 20px;
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  gap: 6px;
  transition: background var(--transition), color var(--transition), transform 80ms ease, box-shadow var(--transition);
}
.btn:active { transform: translateY(1px); }
.btn i { font-size: 12px; }

/* Primary = hot pink (ref 2 "Transfer") */
.btn-primary {
  background: var(--primary); color: #fff;
  box-shadow: 0 6px 18px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,0.18);
  border: none;
}
.btn-primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 10px 26px var(--primary-glow);
  transform: translateY(-1px);
}

/* Secondary = filled dark pill (ref 2 "Home" active nav / "Calculate") */
.btn-secondary {
  background: var(--ink); color: #fff;
  border: 1px solid var(--ink);
}
.btn-secondary:hover {
  background: var(--ink-2); border-color: var(--ink-2);
  transform: translateY(-1px);
}

/* Ghost = subtle transparent for icon buttons */
.btn-ghost {
  background: transparent; color: var(--text-2);
  border: 1px solid transparent;
}
.btn-ghost:hover { background: var(--card-2); color: var(--text-1); }

.btn-danger  { background: var(--danger);  color: #fff; border: none; }
.btn-danger:hover  { background: var(--danger-2); box-shadow: 0 6px 18px rgba(239,68,68,0.32); transform: translateY(-1px); }
.btn-success { background: var(--success); color: #fff; border: none; }
.btn-success:hover { background: var(--success-2); box-shadow: 0 6px 18px rgba(16,185,129,0.32); transform: translateY(-1px); }

.btn-sm  { padding: 7px 14px; font-size: 12px; }
.btn-icon { padding: 8px; width: 38px; height: 38px; border-radius: 14px; }
.btn-icon.btn-sm { width: 32px; height: 32px; padding: 6px; border-radius: 12px; }

/* ── Forms — cleaner, rounder inputs ─────────────────────── */
.form-label {
  font-size: 12px; font-weight: 700; color: var(--text-2);
  letter-spacing: 0.01em;
}
.form-control {
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text-1);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 13.5px;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-control::placeholder { color: var(--text-4); }
.form-control:hover { border-color: color-mix(in oklab, var(--text-3) 30%, var(--card-border)); }
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-glow);
}
.form-error { color: var(--danger); font-size: 11.5px; margin-top: 4px; }

.filter-bar input,
.filter-bar select,
.filter-bar .form-control {
  border-radius: var(--pill) !important;
  padding-left: 18px; padding-right: 18px;
}

/* ── Tables ──────────────────────────────────────────────── */
.table-wrapper {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  overflow: hidden;
}
.table-wrapper table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-wrapper thead {
  background: var(--card-2);
  border-bottom: 1px solid var(--card-border-2);
}
.table-wrapper th {
  font-size: 10.5px; font-weight: 700;
  color: var(--text-3);
  letter-spacing: 1.1px; text-transform: uppercase;
  padding: 14px 18px; text-align: left;
  white-space: nowrap;
}
.table-wrapper td {
  padding: 14px 18px;
  font-size: 13px;
  color: var(--text-1);
  border-bottom: 1px solid var(--card-border-2);
  vertical-align: middle;
}
.table-wrapper tbody tr:last-child td { border-bottom: none; }
.table-wrapper tbody tr:hover { background: var(--card-2); }
.td-muted { color: var(--text-3); font-size: 12.5px; }

/* ── Badges — pastel category chips (ref 2) ──────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px;
  border-radius: var(--pill);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.badge-success { background: var(--chip-green-bg);  color: var(--chip-green-fg); }
.badge-danger  { background: var(--chip-red-bg);    color: var(--chip-red-fg); }
.badge-warning { background: var(--chip-orange-bg); color: var(--chip-orange-fg); }
.badge-info    { background: var(--chip-blue-bg);   color: var(--chip-blue-fg); }
.badge-primary { background: var(--chip-pink-bg);   color: var(--chip-pink-fg); }

.cat-dot { border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 20%, transparent); }

/* ── Modal ───────────────────────────────────────────────── */
.modal-overlay { background: rgba(10, 10, 15, 0.55); backdrop-filter: blur(6px); }
.modal {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
}
.modal-header {
  padding: 20px 24px; border-bottom: 1px solid var(--card-border-2);
}
.modal-title {
  font-size: 15.5px; font-weight: 700; color: var(--text-1);
  letter-spacing: -0.015em;
}
.modal-title i {
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--card-2); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; margin-right: 10px;
}
.modal-close {
  width: 36px; height: 36px; border-radius: 12px;
  color: var(--text-3); background: transparent; border: 1px solid transparent;
}
.modal-close:hover { background: var(--card-2); color: var(--text-1); }
.modal-body   { padding: 22px 24px; }
.modal-footer { padding: 18px 24px; border-top: 1px solid var(--card-border-2); gap: 10px; }

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 14px 16px;
}
.toast-title { font-weight: 700; font-size: 13px; color: var(--text-1); }
.toast-msg   { font-size: 12.5px; color: var(--text-3); }

/* ── Gateway Cards — big, prominent balance ──────────────── */
.gateway-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: 22px 24px;
  box-shadow: var(--shadow-xs);
  transition: transform 160ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.gateway-card:hover {
  transform: translateY(-3px);
  border-color: var(--card-border-hover);
  box-shadow: var(--shadow);
}
.gateway-name { font-size: 15px; font-weight: 700; color: var(--text-1); letter-spacing: -0.01em; }
.gateway-icon { border-radius: 14px; font-size: 13px; font-weight: 800; }
.gateway-balance {
  font-size: 32px; font-weight: 800;
  letter-spacing: -0.035em;
  margin: 10px 0 14px;
  line-height: 1.02;
  color: var(--text-1);
}
.gateway-stats {
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--card-border-2);
}
.gateway-stat-label {
  font-size: 10.5px; font-weight: 700;
  color: var(--text-3);
  letter-spacing: 1px; text-transform: uppercase;
}
.gateway-stat-value { font-size: 14px; font-weight: 700; color: var(--text-1); margin-top: 4px; }

/* ── Gateway summary bar ─────────────────────────────────── */
.gw-summary-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 22px;
  padding: 16px 20px;
  box-shadow: var(--shadow-xs);
}
.gw-summary-icon { border-radius: 14px; }
.gw-summary-label {
  font-size: 10.5px; font-weight: 700; color: var(--text-3);
  letter-spacing: 1.1px; text-transform: uppercase;
}
.gw-summary-value {
  font-size: 22px; font-weight: 800;
  color: var(--text-1); letter-spacing: -0.03em;
}

/* ── Filter bar / summary strip ──────────────────────────── */
.filter-bar {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--pill);
  padding: 10px 14px;
  gap: 10px;
}
.summary-strip {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 22px;
  padding: 18px 22px;
}
.summary-strip-label { font-size: 10.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 1.1px; }
.summary-strip-value { font-size: 22px; font-weight: 800; color: var(--text-1); letter-spacing: -0.03em; }

/* ── Empty state ─────────────────────────────────────────── */
.empty-state { color: var(--text-3); padding: 44px 20px; }
.empty-state i {
  font-size: 32px; color: var(--primary); margin-bottom: 12px;
  display: inline-flex; width: 64px; height: 64px;
  border-radius: 20px; align-items: center; justify-content: center;
  background: var(--chip-pink-bg);
}
.empty-state h3 { font-size: 15px; color: var(--text-1); font-weight: 700; margin-bottom: 4px; letter-spacing: -0.01em; }
.empty-state p  { font-size: 12.5px; color: var(--text-3); }

/* ── Theme toggle button ─────────────────────────────────── */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid var(--sb-border);
  border-radius: var(--pill);
  cursor: pointer;
  color: var(--sb-text-2);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.03em;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.theme-toggle:hover {
  background: var(--sb-bg-2); color: var(--sb-text);
  border-color: var(--sb-text-3);
}
.theme-toggle i { font-size: 12px; }

.sidebar-footer .footer-row {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
}
.sidebar.collapsed .footer-row .theme-toggle { display: none; }

/* ── Focus ring for keyboard users ───────────────────────── */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--primary-glow);
  border-radius: 10px;
}

hr, .divider { border-color: var(--card-border-2); background: var(--card-border-2); }
code, kbd, pre { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ── Dashboard v3: Greeting hero (ref-inspired dark gradient card) ── */
.dash-greet {
  position: relative;
  border-radius: 28px;
  padding: 26px 28px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(236, 72, 153, 0.35) 0%, transparent 55%),
    radial-gradient(120% 120% at 0% 100%, rgba(6, 182, 212, 0.20) 0%, transparent 55%),
    linear-gradient(135deg, #2E1065 0%, #5B21B6 45%, #7C3AED 100%);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(88, 28, 135, 0.30);
}
:root[data-theme="dark"] .dash-greet,
:root:not([data-theme="light"]) .dash-greet {
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(236, 72, 153, 0.30) 0%, transparent 55%),
    radial-gradient(120% 120% at 0% 100%, rgba(6, 182, 212, 0.18) 0%, transparent 55%),
    linear-gradient(135deg, #1E1338 0%, #3B1E7A 45%, #6D28D9 100%);
}

/* Soft star/dot pattern behind text */
.dash-greet-glow {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.10) 1px, transparent 2px),
    radial-gradient(circle at 60% 80%, rgba(255,255,255,0.08) 1px, transparent 2px),
    radial-gradient(circle at 80% 25%, rgba(255,255,255,0.06) 1px, transparent 2px);
  background-size: 220px 220px, 180px 180px, 260px 260px;
  pointer-events: none;
  opacity: 0.7;
}

.dash-greet-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
}
@media (max-width: 780px) {
  .dash-greet-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .dash-greet-avatar { justify-self: center; }
}

/* Big emoji avatar in a soft glass bubble */
.dash-greet-avatar {
  width: 72px; height: 72px;
  border-radius: 22px;
  background:
    linear-gradient(140deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08));
  border: 1px solid rgba(255,255,255,0.22);
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
}
.dash-greet-avatar i {
  font-size: 30px;
  color: #FBBF24;
  filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.35));
}

.dash-greet-text { min-width: 0; }
.dash-greet-eyebrow {
  font-size: 11.5px; font-weight: 700;
  color: rgba(255,255,255,0.72);
  letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
.dash-greet-title {
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff; line-height: 1.15;
  margin-bottom: 4px;
}
.dash-greet-sub {
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.72);
  font-variant-numeric: tabular-nums;
}

/* Rounded action buttons at the right — matches ref's dark circular action row */
.dash-greet-actions {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 780px) {
  .dash-greet-actions { justify-content: center; }
}
.dash-greet-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 160ms ease, transform 80ms ease, box-shadow 160ms ease;
}
.dash-greet-btn i { font-size: 11px; }
.dash-greet-btn:hover {
  background: rgba(255,255,255,0.18);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.20);
}
.dash-greet-btn.primary {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.20);
}
.dash-greet-btn.primary:hover {
  background: rgba(255,255,255,0.92);
}

/* ── Dashboard v2: hero row + compact flow + pastel balance grid ── */
.dash-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .dash-hero-row { grid-template-columns: 1fr; }
}

/* Hero main — big white Total Assets card */
.dash-hero-main {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 28px;
  padding: 28px 30px;
  box-shadow: var(--shadow-xs);
  position: relative; overflow: hidden;
}
.dash-hero-main::before {
  content: '';
  position: absolute; inset: -50% -30% auto auto;
  width: 300px; height: 300px; pointer-events: none;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.10) 0%, transparent 60%);
}
.dash-hero-eyebrow {
  font-size: 11px; font-weight: 700;
  color: var(--text-3);
  letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 12px;
}
.dash-hero-value {
  font-size: 44px; font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--text-1);
  line-height: 1.02;
  font-variant-numeric: tabular-nums;
}
.dash-hero-trend {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
}
.dash-hero-sparkline {
  height: 60px;
  margin: 14px -6px 12px;
  position: relative;
}
.dash-hero-sparkline canvas { max-height: 60px; }

.dash-hero-chips {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 14px;
}
.dash-hero-chip {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card-2);
  display: flex; flex-direction: column; gap: 3px;
}
.dash-hero-chip-label {
  font-size: 10px; font-weight: 700;
  color: var(--text-3);
  letter-spacing: 1px; text-transform: uppercase;
}
.dash-hero-chip-value {
  font-size: 15px; font-weight: 800;
  color: var(--text-1);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.dash-hero-chip.chip-gateway { background: var(--chip-green-bg); }
.dash-hero-chip.chip-gateway .dash-hero-chip-value { color: var(--chip-green-fg); }
.dash-hero-chip.chip-crypto  { background: var(--chip-orange-bg); }
.dash-hero-chip.chip-crypto  .dash-hero-chip-value { color: var(--chip-orange-fg); }
.dash-hero-chip.chip-people  { background: var(--chip-purple-bg); }
.dash-hero-chip.chip-people  .dash-hero-chip-value { color: var(--chip-purple-fg); }

/* Hero side — the vivid gradient Net Position card */
.dash-hero-side {
  background: var(--hero-gradient);
  border-radius: 28px;
  padding: 26px 26px;
  color: #fff;
  box-shadow: var(--shadow-hero);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.dash-hero-side::before {
  content: '';
  position: absolute; inset: -40% -20% auto auto;
  width: 260px; height: 260px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.24) 0%, transparent 60%);
}
.dash-side-eyebrow {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.75);
  letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 10px;
  display: inline-flex; align-items: center; gap: 6px;
}
.dash-side-value {
  font-size: 34px; font-weight: 800;
  letter-spacing: -0.035em;
  color: #fff; line-height: 1.02;
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
}
.dash-side-formula {
  padding: 12px 14px;
  background: rgba(255,255,255,0.14);
  border-radius: 14px;
  margin-bottom: 12px;
  backdrop-filter: blur(4px);
}
.dash-side-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; padding: 3px 0;
}
.dash-side-row span:first-child {
  color: rgba(255,255,255,0.72);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.dash-side-row span:last-child {
  color: #fff; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dash-side-status {
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.90);
  padding: 8px 12px;
  border-radius: var(--pill);
  background: rgba(255,255,255,0.14);
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 14px;
  align-self: flex-start;
}
.dash-side-cta {
  background: #fff !important;
  color: var(--ink) !important;
  border: none !important;
  font-weight: 700 !important;
  align-self: stretch;
  margin-top: auto;
  box-shadow: 0 4px 14px rgba(0,0,0,0.20);
}
.dash-side-cta:hover { background: rgba(255,255,255,0.90) !important; transform: translateY(-1px); }

/* Row 2: compact daily flow strip */
.dash-flow-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .dash-flow-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .dash-flow-grid { grid-template-columns: repeat(2, 1fr); } }

.dash-flow-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column;
  min-width: 0;
}
.dash-flow-top {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.dash-flow-icon {
  width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.dash-flow-card.tone-success .dash-flow-icon { background: var(--chip-green-bg);  color: var(--chip-green-fg); }
.dash-flow-card.tone-danger  .dash-flow-icon { background: var(--chip-red-bg);    color: var(--chip-red-fg); }
.dash-flow-card.tone-warning .dash-flow-icon { background: var(--chip-orange-bg); color: var(--chip-orange-fg); }
.dash-flow-card.tone-info    .dash-flow-icon { background: var(--chip-blue-bg);   color: var(--chip-blue-fg); }
.dash-flow-label {
  font-size: 10.5px; font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.9px; text-transform: uppercase;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-flow-value {
  font-size: 20px; font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  margin-bottom: 6px;
}

/* Row 3: balance breakdown — bigger pastel-tinted cards */
.dash-balance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .dash-balance-grid { grid-template-columns: 1fr; } }

.dash-balance-card {
  border-radius: 22px;
  padding: 20px 22px;
  border: 1px solid transparent;
  min-height: 140px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.dash-balance-card.tone-gateway { background: var(--chip-green-bg);  border-color: color-mix(in oklab, var(--chip-green-fg) 20%, transparent); }
.dash-balance-card.tone-crypto  { background: var(--chip-orange-bg); border-color: color-mix(in oklab, var(--chip-orange-fg) 20%, transparent); }
.dash-balance-card.tone-people  { background: var(--chip-purple-bg); border-color: color-mix(in oklab, var(--chip-purple-fg) 20%, transparent); }

.dash-balance-top {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.dash-balance-icon {
  width: 36px; height: 36px; border-radius: 12px;
  background: rgba(255,255,255,0.55);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.dash-balance-card.tone-gateway .dash-balance-icon { color: var(--chip-green-fg); }
.dash-balance-card.tone-crypto  .dash-balance-icon { color: var(--chip-orange-fg); }
.dash-balance-card.tone-people  .dash-balance-icon { color: var(--chip-purple-fg); }
:root[data-theme="dark"] .dash-balance-icon,
:root:not([data-theme="light"]) .dash-balance-icon { background: rgba(255,255,255,0.10); }

.dash-balance-label {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
}
.dash-balance-card.tone-gateway .dash-balance-label { color: var(--chip-green-fg); }
.dash-balance-card.tone-crypto  .dash-balance-label { color: var(--chip-orange-fg); }
.dash-balance-card.tone-people  .dash-balance-label { color: var(--chip-purple-fg); }

.dash-balance-value {
  font-size: 28px; font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.02;
  margin-bottom: auto;
}
.dash-balance-card.tone-gateway .dash-balance-value { color: var(--chip-green-fg); }
.dash-balance-card.tone-crypto  .dash-balance-value { color: var(--chip-orange-fg); }
.dash-balance-card.tone-people  .dash-balance-value { color: var(--chip-purple-fg); }

.dash-balance-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 12px;
}
.dash-balance-sub {
  font-size: 11.5px; font-weight: 600;
  color: color-mix(in oklab, currentColor 70%, transparent);
}

/* ── Gateways page hero row ────────────────────────────── */
.gw-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .gw-hero-row { grid-template-columns: 1fr; }
}

.gw-hero-main {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 28px;
  padding: 26px 28px;
  box-shadow: var(--shadow-xs);
  position: relative; overflow: hidden;
}
.gw-hero-main::before {
  content: '';
  position: absolute; inset: -50% -30% auto auto;
  width: 280px; height: 280px; pointer-events: none;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.08) 0%, transparent 60%);
}
.gw-hero-eyebrow {
  font-size: 11px; font-weight: 700;
  color: var(--text-3);
  letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 10px;
}
.gw-hero-value {
  font-size: 40px; font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-1);
  line-height: 1.02;
  font-variant-numeric: tabular-nums;
  margin-bottom: 20px;
}
.gw-hero-chip-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.gw-hero-chip {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card-2);
}
.gw-hero-chip.gw-hero-chip-muted { background: color-mix(in oklab, var(--text-3) 8%, var(--card-2)); }
.gw-hero-chip-label {
  font-size: 10px; font-weight: 700;
  color: var(--text-3);
  letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 4px;
}
.gw-hero-chip-value {
  font-size: 16px; font-weight: 800;
  color: var(--text-1);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Today's Activity gradient card */
.gw-hero-side {
  background: var(--hero-gradient);
  border-radius: 28px;
  padding: 24px 26px;
  color: #fff;
  box-shadow: var(--shadow-hero);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.gw-hero-side::before {
  content: '';
  position: absolute; inset: -40% -20% auto auto;
  width: 240px; height: 240px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 60%);
}
.gw-side-eyebrow {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.80);
  letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.gw-side-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: auto;
}
.gw-side-mini-label {
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,0.72);
  letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 3px;
}
.gw-side-mini-value {
  font-size: 18px; font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

/* ── Transactions page hero row ────────────────────────── */
.tx-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .tx-hero-row { grid-template-columns: 1fr; }
}

.tx-hero-main {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 28px;
  padding: 24px 26px;
  box-shadow: var(--shadow-xs);
  position: relative; overflow: hidden;
}
.tx-hero-main::before {
  content: '';
  position: absolute; inset: -50% -30% auto auto;
  width: 260px; height: 260px; pointer-events: none;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.06) 0%, transparent 60%);
}
.tx-hero-eyebrow {
  font-size: 11px; font-weight: 700;
  color: var(--text-3);
  letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 8px;
}
.tx-hero-value {
  font-size: 40px; font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  font-variant-numeric: tabular-nums;
  margin-bottom: 20px;
}
.tx-hero-value.is-positive { color: var(--success); }
.tx-hero-value.is-negative { color: var(--danger); }

.tx-hero-chip-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.tx-hero-chip {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card-2);
}
.tx-hero-chip-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 4px;
  display: inline-flex; align-items: center; gap: 5px;
}
.tx-hero-chip-label i { font-size: 9px; }
.tx-hero-chip-value {
  font-size: 16px; font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tx-hero-chip.chip-deposit    { background: var(--chip-green-bg); }
.tx-hero-chip.chip-deposit .tx-hero-chip-label,
.tx-hero-chip.chip-deposit .tx-hero-chip-value { color: var(--chip-green-fg); }
.tx-hero-chip.chip-withdrawal { background: var(--chip-red-bg); }
.tx-hero-chip.chip-withdrawal .tx-hero-chip-label,
.tx-hero-chip.chip-withdrawal .tx-hero-chip-value { color: var(--chip-red-fg); }
.tx-hero-chip.chip-charge     { background: var(--chip-orange-bg); }
.tx-hero-chip.chip-charge .tx-hero-chip-label,
.tx-hero-chip.chip-charge .tx-hero-chip-value { color: var(--chip-orange-fg); }

/* Right-side gradient Volume card */
.tx-hero-side {
  background: var(--hero-gradient);
  border-radius: 28px;
  padding: 22px 24px;
  color: #fff;
  box-shadow: var(--shadow-hero);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.tx-hero-side::before {
  content: '';
  position: absolute; inset: -40% -20% auto auto;
  width: 220px; height: 220px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 60%);
}
.tx-hero-side-eyebrow {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.80);
  letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 8px;
  display: inline-flex; align-items: center; gap: 6px;
}
.tx-hero-side-value {
  font-size: 30px; font-weight: 800;
  letter-spacing: -0.035em;
  color: #fff; line-height: 1.02;
  font-variant-numeric: tabular-nums;
}
.tx-hero-side-sub {
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.75);
  margin-top: 6px; margin-bottom: 16px;
}
.tx-hero-side-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.16);
  margin-top: auto;
}
.tx-hero-side-mini-label {
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,0.72);
  letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 3px;
}
.tx-hero-side-mini-value {
  font-size: 17px; font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ── Expenses page hero row ────────────────────────────── */
.exp-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .exp-hero-row { grid-template-columns: 1fr; } }

.exp-hero-main {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 28px;
  padding: 24px 26px;
  box-shadow: var(--shadow-xs);
  position: relative; overflow: hidden;
}
.exp-hero-main::before {
  content: '';
  position: absolute; inset: -50% -30% auto auto;
  width: 260px; height: 260px; pointer-events: none;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.06) 0%, transparent 60%);
}
.exp-hero-eyebrow {
  font-size: 11px; font-weight: 700;
  color: var(--text-3);
  letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 8px;
}
.exp-hero-value {
  font-size: 38px; font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--danger);
  line-height: 1.02;
  font-variant-numeric: tabular-nums;
  margin-bottom: 20px;
}
.exp-hero-chip-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.exp-hero-chip {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card-2);
}
.exp-hero-chip-label {
  font-size: 10px; font-weight: 700;
  color: var(--text-3);
  letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 4px;
}
.exp-hero-chip-value {
  font-size: 16px; font-weight: 800;
  color: var(--text-1);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.exp-hero-chip.chip-count { background: var(--chip-blue-bg); }
.exp-hero-chip.chip-count .exp-hero-chip-label,
.exp-hero-chip.chip-count .exp-hero-chip-value { color: var(--chip-blue-fg); }
.exp-hero-chip.chip-avg { background: var(--chip-orange-bg); }
.exp-hero-chip.chip-avg .exp-hero-chip-label,
.exp-hero-chip.chip-avg .exp-hero-chip-value { color: var(--chip-orange-fg); }
.exp-hero-chip.chip-cats { background: var(--chip-purple-bg); }
.exp-hero-chip.chip-cats .exp-hero-chip-label,
.exp-hero-chip.chip-cats .exp-hero-chip-value { color: var(--chip-purple-fg); }

/* Right-side Top Category gradient card */
.exp-hero-side {
  background: var(--hero-gradient);
  border-radius: 28px;
  padding: 22px 24px;
  color: #fff;
  box-shadow: var(--shadow-hero);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.exp-hero-side::before {
  content: '';
  position: absolute; inset: -40% -20% auto auto;
  width: 220px; height: 220px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 60%);
}
.exp-side-eyebrow {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.80);
  letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 10px;
  display: inline-flex; align-items: center; gap: 6px;
}
.exp-side-name {
  font-size: 20px; font-weight: 800;
  color: #fff; letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.exp-side-value {
  font-size: 28px; font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff; line-height: 1.02;
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.exp-side-progress-row {
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.exp-side-progress-label {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.80);
  letter-spacing: 0.5px; text-transform: uppercase;
  margin-bottom: 6px;
}
.exp-side-progress-track {
  height: 6px;
  background: rgba(255,255,255,0.20);
  border-radius: 999px; overflow: hidden;
}
.exp-side-progress-fill {
  height: 100%;
  background: #fff;
  border-radius: 999px;
  transition: width .4s ease;
}

/* ──────────────────────────────────────────────────────────
   Shared hero pattern — used by Crypto (cx-), People (pp-), Profits (pf-).
   Same 2:1 grid, same big number, same chip row.
   ────────────────────────────────────────────────────────── */
.cx-hero-row, .pp-hero-row, .pf-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .cx-hero-row, .pp-hero-row, .pf-hero-row { grid-template-columns: 1fr; }
}

.cx-hero-main, .pp-hero-main, .pf-hero-main {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 28px;
  padding: 24px 26px;
  box-shadow: var(--shadow-xs);
  position: relative; overflow: hidden;
}
.cx-hero-main::before, .pp-hero-main::before, .pf-hero-main::before {
  content: '';
  position: absolute; inset: -50% -30% auto auto;
  width: 260px; height: 260px; pointer-events: none;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.07) 0%, transparent 60%);
}

.cx-hero-eyebrow, .pp-hero-eyebrow, .pf-hero-eyebrow {
  font-size: 11px; font-weight: 700;
  color: var(--text-3);
  letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 8px;
}
.cx-hero-value, .pp-hero-value, .pf-hero-value {
  font-size: 40px; font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-1);
  line-height: 1.02;
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
}
.pp-hero-value.is-positive, .pf-hero-value.is-positive { color: var(--success); }
.pp-hero-value.is-negative, .pf-hero-value.is-negative { color: var(--danger); }

.pf-hero-formula {
  font-size: 12px; color: var(--text-3);
  margin-top: -8px; margin-bottom: 16px;
  font-weight: 500;
}

.cx-hero-chip-row, .pp-hero-chip-row, .pf-hero-chip-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 14px;
}
.cx-hero-chip, .pp-hero-chip, .pf-hero-chip {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card-2);
}
.cx-hero-chip-label, .pp-hero-chip-label, .pf-hero-chip-label {
  font-size: 10px; font-weight: 700;
  color: var(--text-3);
  letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 4px;
  display: inline-flex; align-items: center; gap: 5px;
}
.cx-hero-chip-label i, .pp-hero-chip-label i, .pf-hero-chip-label i { font-size: 9px; }
.cx-hero-chip-value, .pp-hero-chip-value, .pf-hero-chip-value {
  font-size: 16px; font-weight: 800;
  color: var(--text-1);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Crypto tint */
.cx-hero-chip.chip-wallets { background: var(--chip-blue-bg); }
.cx-hero-chip.chip-wallets .cx-hero-chip-label,
.cx-hero-chip.chip-wallets .cx-hero-chip-value { color: var(--chip-blue-fg); }
.cx-hero-chip.chip-tx { background: var(--chip-purple-bg); }
.cx-hero-chip.chip-tx .cx-hero-chip-label,
.cx-hero-chip.chip-tx .cx-hero-chip-value { color: var(--chip-purple-fg); }
.cx-hero-chip.chip-coins { background: var(--chip-orange-bg); }
.cx-hero-chip.chip-coins .cx-hero-chip-label,
.cx-hero-chip.chip-coins .cx-hero-chip-value { color: var(--chip-orange-fg); }

/* People tint */
.pp-hero-chip.chip-given { background: var(--chip-red-bg); }
.pp-hero-chip.chip-given .pp-hero-chip-label,
.pp-hero-chip.chip-given .pp-hero-chip-value { color: var(--chip-red-fg); }
.pp-hero-chip.chip-received { background: var(--chip-green-bg); }
.pp-hero-chip.chip-received .pp-hero-chip-label,
.pp-hero-chip.chip-received .pp-hero-chip-value { color: var(--chip-green-fg); }
.pp-hero-chip.chip-people { background: var(--chip-purple-bg); }
.pp-hero-chip.chip-people .pp-hero-chip-label,
.pp-hero-chip.chip-people .pp-hero-chip-value { color: var(--chip-purple-fg); }

/* Profits tint */
.pf-hero-chip.chip-assets { background: var(--chip-green-bg); }
.pf-hero-chip.chip-assets .pf-hero-chip-label,
.pf-hero-chip.chip-assets .pf-hero-chip-value { color: var(--chip-green-fg); }
.pf-hero-chip.chip-balance { background: var(--chip-blue-bg); }
.pf-hero-chip.chip-balance .pf-hero-chip-label,
.pf-hero-chip.chip-balance .pf-hero-chip-value { color: var(--chip-blue-fg); }
.pf-hero-chip.chip-snap { background: var(--chip-purple-bg); }
.pf-hero-chip.chip-snap .pf-hero-chip-label,
.pf-hero-chip.chip-snap .pf-hero-chip-value { color: var(--chip-purple-fg); }

.pf-hero-actions { margin-top: 4px; }

/* Side gradient card */
.cx-hero-side, .pp-hero-side, .pf-hero-side {
  background: var(--hero-gradient);
  border-radius: 28px;
  padding: 22px 24px;
  color: #fff;
  box-shadow: var(--shadow-hero);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.cx-hero-side::before, .pp-hero-side::before, .pf-hero-side::before {
  content: '';
  position: absolute; inset: -40% -20% auto auto;
  width: 220px; height: 220px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 60%);
}
.cx-hero-side-eyebrow, .pp-hero-side-eyebrow, .pf-hero-side-eyebrow {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.80);
  letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 10px;
  display: inline-flex; align-items: center; gap: 6px;
}
.cx-hero-side-name, .pp-hero-side-name {
  font-size: 20px; font-weight: 800;
  color: #fff; letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.cx-hero-side-value, .pp-hero-side-value {
  font-size: 28px; font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff; line-height: 1.02;
  font-variant-numeric: tabular-nums;
}
.pp-hero-side-sub {
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.75);
  margin-top: 6px;
}

.cx-hero-side-progress-row {
  padding-top: 12px; margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.cx-hero-side-progress-label {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.80);
  letter-spacing: 0.5px; text-transform: uppercase;
  margin-bottom: 6px;
}
.cx-hero-side-progress-track {
  height: 6px;
  background: rgba(255,255,255,0.20);
  border-radius: 999px; overflow: hidden;
}
.cx-hero-side-progress-fill {
  height: 100%;
  background: #fff;
  border-radius: 999px;
  transition: width .4s ease;
}

/* Profits side card has a mini split grid instead of progress bar */
.pf-hero-side-value {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  opacity: 0.85;
  margin-bottom: 14px;
  color: rgba(255,255,255,0.9) !important;
}
.pf-hero-side-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.18);
  margin-top: auto;
}
.pf-hero-side-mini-label {
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,0.72);
  letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 3px;
}
.pf-hero-side-mini-value {
  font-size: 15px; font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ── Transactions toolbar — compact single-row filter bar ── */
.tx-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: transparent;
  padding: 0;
  border: none;
  margin-bottom: 16px;
}
.tx-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}
.tx-utility-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}

/* Unified pill control — used for date + gateway + type */
.tx-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.tx-pill:hover { border-color: color-mix(in oklab, var(--text-3) 25%, var(--card-border)); }
.tx-pill:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-glow);
}
.tx-pill > i {
  color: var(--text-3);
  font-size: 13px;
  flex: 0 0 auto;
}

/* Date range pill — two native pickers joined with an arrow */
.tx-pill-date input[type="date"] {
  appearance: none; -webkit-appearance: none;
  background: transparent;
  border: none; outline: none;
  color: var(--text-1);
  font: inherit;
  font-variant-numeric: tabular-nums;
  padding: 0;
  min-width: 110px;
  cursor: pointer;
}
/* Hide the native calendar icon so our leading icon carries it */
.tx-pill-date input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  inset: 0;
  cursor: pointer;
}
.tx-pill-date { position: relative; }
.tx-pill-sep {
  color: var(--text-4);
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}

/* Native select styled as pill */
.tx-pill-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2371717A' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Clear as a text link with an X, not a full button */
.tx-clear-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--pill);
  transition: color var(--transition), background var(--transition);
}
.tx-clear-link:hover { color: var(--danger); background: var(--danger-bg); }
.tx-clear-link i { font-size: 11px; }

/* Utility buttons (Import / Export) — subtle so they don't compete with Filter */
.tx-utility-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--pill);
  color: var(--text-1);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition), transform 80ms ease;
}
.tx-utility-btn:hover {
  border-color: var(--card-border-hover);
  background: var(--card-2);
}
.tx-utility-btn:active { transform: translateY(1px); }
.tx-utility-btn i { font-size: 11px; color: var(--text-3); }
.tx-utility-btn:hover i { color: var(--primary); }

/* Pill secondary buttons in filter bars carry the same treatment */
.filter-bar .btn.btn-primary  { border-radius: var(--pill); }
.filter-bar .btn.btn-secondary { border-radius: var(--pill); }
.filter-bar .btn.btn-ghost    { border-radius: var(--pill); }