/* ============================================================================
   ABCT V2 Dashboard - Professional UI Redesign
   ============================================================================
   Dark-first design with full theme support
   Sidebar navigation, modern card layout, sparkline charts
   ============================================================================ */

/* ============================================================================
   CSS CUSTOM PROPERTIES — THEME SYSTEM
   ============================================================================ */

:root,
[data-theme="dark-mode"] {
    /* Backgrounds */
    --v2-bg-body: #0b0e14;
    --v2-bg-sidebar: #0f1218;
    --v2-bg-sidebar-hover: rgba(255, 255, 255, 0.06);
    --v2-bg-sidebar-active: rgba(0, 210, 106, 0.12);
    --v2-bg-main: #0f1218;
    --v2-bg-card: #151921;
    --v2-bg-card-hover: #1a1f2b;
    --v2-bg-input: #1a1f2b;
    --v2-bg-modal: #151921;
    --v2-bg-table-header: #1a1f2b;
    --v2-bg-table-row-hover: rgba(255, 255, 255, 0.03);
    --v2-bg-table-row-alt: rgba(255, 255, 255, 0.015);
    --v2-bg-skeleton: linear-gradient(90deg, #1a1f2b 25%, #222833 50%, #1a1f2b 75%);
    --v2-bg-topbar: rgba(15, 18, 24, 0.85);
    --v2-bg-dropdown: #1a1f2b;

    /* Borders */
    --v2-border: #1e2433;
    --v2-border-light: rgba(255, 255, 255, 0.06);
    --v2-border-sidebar: #1a1f2b;
    --v2-border-input: #2a3040;
    --v2-border-focus: #00d26a;

    /* Text */
    --v2-text-primary: #e8ecf1;
    --v2-text-secondary: #8b95a5;
    --v2-text-muted: #5a6475;
    --v2-text-heading: #f0f3f7;
    --v2-text-link: #00d26a;
    --v2-text-nav: #8b95a5;
    --v2-text-nav-active: #e8ecf1;

    /* Accents */
    --v2-accent: #00d26a;
    --v2-accent-hover: #00e676;
    --v2-accent-muted: rgba(0, 210, 106, 0.15);
    --v2-accent-text: #00d26a;
    --v2-red: #ff5252;
    --v2-red-muted: rgba(255, 82, 82, 0.15);
    --v2-orange: #ff9800;
    --v2-blue: #448aff;
    --v2-purple: #7c4dff;

    /* Chart */
    --v2-chart-line: #00d26a;
    --v2-chart-fill: rgba(0, 210, 106, 0.08);
    --v2-chart-grid: rgba(255, 255, 255, 0.04);
    --v2-chart-text: #5a6475;
    --v2-chart-crosshair: rgba(255, 255, 255, 0.2);

    /* Shadows */
    --v2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --v2-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --v2-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --v2-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--v2-border);
    --v2-shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.6);

    /* Misc */
    --v2-radius-sm: 6px;
    --v2-radius-md: 10px;
    --v2-radius-lg: 14px;
    --v2-radius-xl: 20px;
    --v2-sidebar-width: 240px;
    --v2-sidebar-collapsed: 64px;
    --v2-topbar-height: 56px;
    --v2-transition: 0.2s ease;
    --v2-transition-slow: 0.3s ease;

    /* Scrollbar */
    --v2-scrollbar-track: #0f1218;
    --v2-scrollbar-thumb: #2a3040;
    --v2-scrollbar-thumb-hover: #3a4555;

    /* Spacing scale (data-dense, professional) */
    --v2-space-xs: 4px;
    --v2-space-sm: 8px;
    --v2-space-md: 12px;
    --v2-space-lg: 16px;
    --v2-space-xl: 20px;
    --v2-space-2xl: 24px;
}

/* Light Theme */
[data-theme="light"] {
    --v2-bg-body: #f5f7fa;
    --v2-bg-sidebar: #ffffff;
    --v2-bg-sidebar-hover: rgba(0, 0, 0, 0.04);
    --v2-bg-sidebar-active: rgba(0, 184, 148, 0.1);
    --v2-bg-main: #f5f7fa;
    --v2-bg-card: #ffffff;
    --v2-bg-card-hover: #f8f9fb;
    --v2-bg-input: #f5f7fa;
    --v2-bg-modal: #ffffff;
    --v2-bg-table-header: #f5f7fa;
    --v2-bg-table-row-hover: rgba(0, 0, 0, 0.02);
    --v2-bg-table-row-alt: rgba(0, 0, 0, 0.015);
    --v2-bg-skeleton: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    --v2-bg-topbar: rgba(255, 255, 255, 0.9);
    --v2-bg-dropdown: #ffffff;

    --v2-border: #e5e7eb;
    --v2-border-light: rgba(0, 0, 0, 0.06);
    --v2-border-sidebar: #e5e7eb;
    --v2-border-input: #d1d5db;
    --v2-border-focus: #00b894;

    --v2-text-primary: #1a1a2e;
    --v2-text-secondary: #6b7280;
    --v2-text-muted: #9ca3af;
    --v2-text-heading: #111827;
    --v2-text-link: #00b894;
    --v2-text-nav: #6b7280;
    --v2-text-nav-active: #1a1a2e;

    --v2-accent: #00b894;
    --v2-accent-hover: #00d2a4;
    --v2-accent-muted: rgba(0, 184, 148, 0.12);
    --v2-accent-text: #00b894;
    --v2-red: #d63031;
    --v2-red-muted: rgba(214, 48, 49, 0.1);
    --v2-orange: #e17055;
    --v2-blue: #0984e3;
    --v2-purple: #6c5ce7;

    --v2-chart-line: #00b894;
    --v2-chart-fill: rgba(0, 184, 148, 0.06);
    --v2-chart-grid: rgba(0, 0, 0, 0.05);
    --v2-chart-text: #9ca3af;
    --v2-chart-crosshair: rgba(0, 0, 0, 0.15);

    --v2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --v2-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --v2-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --v2-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--v2-border);
    --v2-shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.15);

    --v2-scrollbar-track: #f5f7fa;
    --v2-scrollbar-thumb: #d1d5db;
    --v2-scrollbar-thumb-hover: #b0b8c4;

    /* Spacing scale */
    --v2-space-xs: 4px;
    --v2-space-sm: 8px;
    --v2-space-md: 12px;
    --v2-space-lg: 16px;
    --v2-space-xl: 20px;
    --v2-space-2xl: 24px;
}


/* ============================================================================
   GLASS DESIGN TOKENS — per-theme glass & polish system
   Reusable: --glass-bg, --glass-blur, --glass-border, --glass-highlight,
             --glass-shadow, --glass-radius, .glass-card utility
   ============================================================================ */

/* Dark Mode Glass Tokens — black-gloss revision */
[data-theme="dark-mode"] {
    --glass-bg: rgba(10, 10, 12, 0.55);
    --glass-blur: blur(14px) saturate(140%);
    --glass-border: rgba(255, 255, 255, 0.10);
    --glass-highlight: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 30%, transparent 55%);
    --glass-sheen: var(--glass-highlight);          /* default sheen = flat top-to-bottom */
    --glass-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
    --glass-radius: 14px;
}

/* Light Mode Glass Tokens */
[data-theme="light"] {
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-blur: blur(16px) saturate(130%);
    --glass-border: rgba(255, 255, 255, 0.72);
    --glass-highlight: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, transparent 50%);
    --glass-sheen: var(--glass-highlight);          /* default sheen = flat top-to-bottom */
    --glass-shadow: 0 8px 24px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
    --glass-radius: 14px;
}

/* Ocean Depths Theme */
[data-theme="ocean-depths"] {
    --v2-bg-body: #060e1a;
    --v2-bg-sidebar: #0a1628;
    --v2-bg-sidebar-hover: rgba(0, 180, 216, 0.08);
    --v2-bg-sidebar-active: rgba(0, 180, 216, 0.15);
    --v2-bg-main: #060e1a;
    --v2-bg-card: #0d1f35;
    --v2-bg-card-hover: #112a45;
    --v2-bg-input: #0d1f35;
    --v2-bg-modal: #0d1f35;
    --v2-bg-table-header: #0a1628;
    --v2-bg-table-row-hover: rgba(0, 180, 216, 0.04);
    --v2-bg-table-row-alt: rgba(0, 180, 216, 0.02);
    --v2-bg-skeleton: linear-gradient(90deg, #0d1f35 25%, #112a45 50%, #0d1f35 75%);
    --v2-bg-topbar: rgba(6, 14, 26, 0.85);
    --v2-bg-dropdown: #0d1f35;

    --v2-border: #153050;
    --v2-border-light: rgba(0, 180, 216, 0.1);
    --v2-border-sidebar: #102a45;
    --v2-border-input: #1a4060;
    --v2-border-focus: #00b4d8;

    --v2-text-primary: #e0f4ff;
    --v2-text-secondary: #7ec8e3;
    --v2-text-muted: #4a8aa5;
    --v2-text-heading: #e0f4ff;
    --v2-text-link: #00b4d8;
    --v2-text-nav: #7ec8e3;
    --v2-text-nav-active: #e0f4ff;

    --v2-accent: #00b4d8;
    --v2-accent-hover: #00d4ff;
    --v2-accent-muted: rgba(0, 180, 216, 0.15);
    --v2-accent-text: #00b4d8;
    --v2-red: #ef476f;
    --v2-red-muted: rgba(239, 71, 111, 0.15);
    --v2-orange: #ffd166;
    --v2-blue: #48cae4;
    --v2-purple: #7209b7;

    --v2-chart-line: #00b4d8;
    --v2-chart-fill: rgba(0, 180, 216, 0.08);
    --v2-chart-grid: rgba(0, 180, 216, 0.06);
    --v2-chart-text: #4a8aa5;

    --v2-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--v2-border);
    --v2-shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.6);

    --v2-scrollbar-track: #060e1a;
    --v2-scrollbar-thumb: #153050;
    --v2-scrollbar-thumb-hover: #1a4060;
}

/* Sunset Horizon Theme */
[data-theme="sunset-horizon"] {
    --v2-bg-body: #120810;
    --v2-bg-sidebar: #1a0a1a;
    --v2-bg-sidebar-hover: rgba(255, 107, 53, 0.08);
    --v2-bg-sidebar-active: rgba(255, 107, 53, 0.15);
    --v2-bg-main: #120810;
    --v2-bg-card: #251530;
    --v2-bg-card-hover: #2d1a38;
    --v2-bg-input: #251530;
    --v2-bg-modal: #251530;
    --v2-bg-table-header: #1a0a1a;
    --v2-bg-table-row-hover: rgba(255, 107, 53, 0.04);
    --v2-bg-table-row-alt: rgba(255, 107, 53, 0.02);
    --v2-bg-skeleton: linear-gradient(90deg, #251530 25%, #2d1a38 50%, #251530 75%);
    --v2-bg-topbar: rgba(18, 8, 16, 0.85);
    --v2-bg-dropdown: #251530;

    --v2-border: #3d1a42;
    --v2-border-light: rgba(255, 107, 53, 0.1);
    --v2-border-sidebar: #2d1233;
    --v2-border-input: #4a2050;
    --v2-border-focus: #ff6b35;

    --v2-text-primary: #ffe4e1;
    --v2-text-secondary: #ffb4a2;
    --v2-text-muted: #9a6858;
    --v2-text-heading: #ffe4e1;
    --v2-text-link: #ff6b35;
    --v2-text-nav: #ffb4a2;
    --v2-text-nav-active: #ffe4e1;

    --v2-accent: #ff6b35;
    --v2-accent-hover: #ff8a55;
    --v2-accent-muted: rgba(255, 107, 53, 0.15);
    --v2-accent-text: #ff6b35;
    --v2-red: #ff3366;
    --v2-red-muted: rgba(255, 51, 102, 0.15);
    --v2-orange: #ffc145;
    --v2-blue: #ff8c42;
    --v2-purple: #9b59b6;

    --v2-chart-line: #ff6b35;
    --v2-chart-fill: rgba(255, 107, 53, 0.08);
    --v2-chart-grid: rgba(255, 107, 53, 0.06);
    --v2-chart-text: #9a6858;

    --v2-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--v2-border);
    --v2-shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.6);

    --v2-scrollbar-track: #120810;
    --v2-scrollbar-thumb: #3d1a42;
    --v2-scrollbar-thumb-hover: #4a2050;
}

/* Cypherpunk Theme */
[data-theme="cypherpunk1"] {
    --v2-bg-body: #020206;
    --v2-bg-sidebar: #050510;
    --v2-bg-sidebar-hover: rgba(0, 212, 255, 0.08);
    --v2-bg-sidebar-active: rgba(217, 70, 239, 0.15);
    --v2-bg-main: #020206;
    --v2-bg-card: #0a0a1e;
    --v2-bg-card-hover: #0e0e28;
    --v2-bg-input: #0a0a1e;
    --v2-bg-modal: #0a0a1e;
    --v2-bg-table-header: #050510;
    --v2-bg-table-row-hover: rgba(0, 212, 255, 0.04);
    --v2-bg-table-row-alt: rgba(0, 212, 255, 0.02);
    --v2-bg-skeleton: linear-gradient(90deg, #0a0a1e 25%, #0e0e28 50%, #0a0a1e 75%);
    --v2-bg-topbar: rgba(2, 2, 6, 0.85);
    --v2-bg-dropdown: #0a0a1e;

    --v2-border: #1a1a3e;
    --v2-border-light: rgba(124, 58, 237, 0.2);
    --v2-border-sidebar: #0c0c24;
    --v2-border-input: #2a2a5e;
    --v2-border-focus: #d946ef;

    --v2-text-primary: #e0f0ff;
    --v2-text-secondary: #8ec8ff;
    --v2-text-muted: #5a7aaa;
    --v2-text-heading: #e0f0ff;
    --v2-text-link: #00d4ff;
    --v2-text-nav: #8ec8ff;
    --v2-text-nav-active: #e0f0ff;

    --v2-accent: #d946ef;
    --v2-accent-hover: #e855ff;
    --v2-accent-muted: rgba(217, 70, 239, 0.15);
    --v2-accent-text: #d946ef;
    --v2-red: #ff3366;
    --v2-red-muted: rgba(255, 51, 102, 0.15);
    --v2-orange: #ffd166;
    --v2-blue: #00d4ff;
    --v2-purple: #7c3aed;

    --v2-chart-line: #00d4ff;
    --v2-chart-fill: rgba(0, 212, 255, 0.08);
    --v2-chart-grid: rgba(124, 58, 237, 0.08);
    --v2-chart-text: #5a7aaa;

    --v2-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--v2-border), 0 0 15px rgba(124, 58, 237, 0.05);
    --v2-shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 20px rgba(124, 58, 237, 0.1);

    --v2-scrollbar-track: #020206;
    --v2-scrollbar-thumb: #1a1a3e;
    --v2-scrollbar-thumb-hover: #2a2a5e;
}

/* Cypher Theme */
[data-theme="cypher"] {
    --v2-bg-body: #000000;
    --v2-bg-sidebar: #050505;
    --v2-bg-sidebar-hover: rgba(168, 85, 247, 0.08);
    --v2-bg-sidebar-active: rgba(168, 85, 247, 0.15);
    --v2-bg-main: #000000;
    --v2-bg-card: #0a0a0a;
    --v2-bg-card-hover: #111111;
    --v2-bg-input: #0a0a0a;
    --v2-bg-modal: #0a0a0a;
    --v2-bg-table-header: #050505;
    --v2-bg-table-row-hover: rgba(168, 85, 247, 0.04);
    --v2-bg-table-row-alt: rgba(168, 85, 247, 0.02);
    --v2-bg-skeleton: linear-gradient(90deg, #0a0a0a 25%, #151515 50%, #0a0a0a 75%);
    --v2-bg-topbar: rgba(0, 0, 0, 0.9);
    --v2-bg-dropdown: #0a0a0a;

    --v2-border: #1a1a1a;
    --v2-border-light: rgba(168, 85, 247, 0.12);
    --v2-border-sidebar: #111111;
    --v2-border-input: #2a2a2a;
    --v2-border-focus: #a855f7;

    --v2-text-primary: #e0e0e0;
    --v2-text-secondary: #888888;
    --v2-text-muted: #555555;
    --v2-text-heading: #f0f0f0;
    --v2-text-link: #a855f7;
    --v2-text-nav: #888888;
    --v2-text-nav-active: #e0e0e0;

    --v2-accent: #a855f7;
    --v2-accent-hover: #c084fc;
    --v2-accent-muted: rgba(168, 85, 247, 0.15);
    --v2-accent-text: #a855f7;

    --v2-chart-line: #a855f7;
    --v2-chart-fill: rgba(168, 85, 247, 0.08);
    --v2-chart-grid: rgba(168, 85, 247, 0.06);
    --v2-chart-text: #555555;

    --v2-scrollbar-track: #000000;
    --v2-scrollbar-thumb: #1a1a1a;
    --v2-scrollbar-thumb-hover: #2a2a2a;
}

/* Cypher2 Theme */
[data-theme="cypher2"] {
    --v2-bg-body: #000000;
    --v2-bg-sidebar: #050505;
    --v2-bg-sidebar-hover: rgba(0, 210, 106, 0.08);
    --v2-bg-sidebar-active: rgba(0, 210, 106, 0.15);
    --v2-bg-main: #000000;
    --v2-bg-card: #0a0a0a;
    --v2-bg-card-hover: #111111;
    --v2-bg-input: #0a0a0a;
    --v2-bg-modal: #0a0a0a;
    --v2-bg-table-header: #050505;

    --v2-border: #1a1a1a;
    --v2-border-light: rgba(0, 210, 106, 0.12);
    --v2-border-sidebar: #111111;
    --v2-border-input: #2a2a2a;
    --v2-border-focus: #00d26a;

    --v2-text-primary: #e0e0e0;
    --v2-text-secondary: #888888;
    --v2-text-muted: #555555;
    --v2-text-heading: #f0f0f0;
    --v2-text-link: #00d26a;
    --v2-text-nav: #888888;
    --v2-text-nav-active: #e0e0e0;

    --v2-accent: #00d26a;
    --v2-accent-hover: #00e676;
    --v2-accent-muted: rgba(0, 210, 106, 0.15);
    --v2-accent-text: #00d26a;

    --v2-chart-line: #00d26a;
    --v2-chart-fill: rgba(0, 210, 106, 0.08);
    --v2-chart-grid: rgba(0, 210, 106, 0.06);
    --v2-chart-text: #555555;

    --v2-scrollbar-track: #000000;
    --v2-scrollbar-thumb: #1a1a1a;
    --v2-scrollbar-thumb-hover: #2a2a2a;
}

/* Cypher3 Theme */
[data-theme="cypher3"] {
    --v2-bg-body: #000000;
    --v2-bg-sidebar: #030303;
    --v2-bg-sidebar-hover: rgba(255, 255, 255, 0.05);
    --v2-bg-sidebar-active: rgba(255, 255, 255, 0.1);
    --v2-bg-main: #000000;
    --v2-bg-card: #080808;
    --v2-bg-card-hover: #0e0e0e;
    --v2-bg-input: #080808;
    --v2-bg-modal: #080808;
    --v2-bg-table-header: #030303;

    --v2-border: #1a1a1a;
    --v2-border-light: rgba(255, 255, 255, 0.08);
    --v2-border-sidebar: #0e0e0e;
    --v2-border-input: #2a2a2a;
    --v2-border-focus: #ffffff;

    --v2-text-primary: #e0e0e0;
    --v2-text-secondary: #888888;
    --v2-text-muted: #555555;
    --v2-text-heading: #ffffff;
    --v2-text-link: #ffffff;
    --v2-text-nav: #888888;
    --v2-text-nav-active: #ffffff;

    --v2-accent: #ffffff;
    --v2-accent-hover: #e0e0e0;
    --v2-accent-muted: rgba(255, 255, 255, 0.1);
    --v2-accent-text: #ffffff;

    --v2-chart-line: #ffffff;
    --v2-chart-fill: rgba(255, 255, 255, 0.05);
    --v2-chart-grid: rgba(255, 255, 255, 0.04);
    --v2-chart-text: #555555;

    --v2-scrollbar-track: #000000;
    --v2-scrollbar-thumb: #1a1a1a;
    --v2-scrollbar-thumb-hover: #2a2a2a;
}


/* ============================================================================
   RESET & BASE
   ============================================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-color: var(--v2-scrollbar-thumb) var(--v2-scrollbar-track);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--v2-bg-body);
    color: var(--v2-text-primary);
    line-height: 1.5;
    overflow-x: hidden;
    min-height: 100vh;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--v2-scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--v2-scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--v2-scrollbar-thumb-hover); }

a { color: var(--v2-text-link); text-decoration: none; }
a:hover { opacity: 0.85; }

/* ============================================================================
   LAYOUT — SIDEBAR + MAIN
   ============================================================================ */

.v2-layout {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.v2-sidebar {
    width: var(--v2-sidebar-width);
    background: var(--v2-bg-sidebar);
    border-right: 1px solid var(--v2-border-sidebar);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
    transition: width var(--v2-transition-slow);
    overflow: hidden;
}

.v2-sidebar.collapsed {
    width: var(--v2-sidebar-collapsed);
}

.v2-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    border-bottom: 1px solid var(--v2-border);
    min-height: 60px;
    cursor: pointer;
    transition: background var(--v2-transition);
}

.v2-sidebar-logo:hover {
    background: var(--v2-bg-sidebar-hover);
}

.v2-sidebar-logo .logo-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    object-fit: contain;
}

.v2-sidebar-logo .logo-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--v2-text-heading);
    white-space: nowrap;
    opacity: 1;
    transition: opacity var(--v2-transition);
}

.v2-sidebar.collapsed .logo-text {
    opacity: 0;
    pointer-events: none;
}

/* Navigation */
.v2-nav {
    flex: 1;
    padding: 12px 8px;
    overflow-y: auto;
    overflow-x: hidden;
}

.v2-nav-section {
    margin-bottom: 20px;
}

.v2-nav-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--v2-text-muted);
    padding: 6px 12px 6px;
    white-space: nowrap;
    overflow: hidden;
    opacity: 1;
    transition: opacity var(--v2-transition);
}

.v2-sidebar.collapsed .v2-nav-label {
    opacity: 0;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.v2-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--v2-radius-sm);
    color: var(--v2-text-nav);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--v2-transition);
    white-space: nowrap;
    position: relative;
    text-decoration: none;
}

.v2-nav-item:hover {
    background: var(--v2-bg-sidebar-hover);
    color: var(--v2-text-primary);
    opacity: 1;
}

.v2-nav-item.active {
    background: var(--v2-bg-sidebar-active);
    color: var(--v2-text-nav-active);
    font-weight: 600;
}

.v2-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--v2-accent);
    border-radius: 0 2px 2px 0;
}

.v2-nav-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    opacity: 0.75;
}

.v2-nav-item.active .v2-nav-icon {
    opacity: 1;
}

.v2-nav-item .nav-text {
    opacity: 1;
    transition: opacity var(--v2-transition);
}

.v2-sidebar.collapsed .v2-nav-item .nav-text {
    opacity: 0;
    pointer-events: none;
}

.v2-sidebar.collapsed .v2-nav-item {
    justify-content: center;
    padding: 9px;
}

/* Sidebar footer */
.v2-sidebar-footer {
    padding: 12px 8px;
    border-top: 1px solid var(--v2-border);
}

.v2-sidebar-collapse-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--v2-radius-sm);
    color: var(--v2-text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--v2-transition);
    background: none;
    border: none;
    width: 100%;
    white-space: nowrap;
}

.v2-sidebar-collapse-btn:hover {
    background: var(--v2-bg-sidebar-hover);
    color: var(--v2-text-primary);
}

.v2-sidebar.collapsed .v2-sidebar-collapse-btn {
    justify-content: center;
    padding: 9px;
}

.v2-sidebar.collapsed .v2-sidebar-collapse-btn .nav-text {
    opacity: 0;
    pointer-events: none;
}

.collapse-arrow {
    transition: transform var(--v2-transition-slow);
}

.v2-sidebar.collapsed .collapse-arrow {
    transform: rotate(180deg);
}


/* ============================================================================
   MAIN CONTENT AREA
   ============================================================================ */

.v2-main {
    flex: 1;
    margin-left: var(--v2-sidebar-width);
    transition: margin-left var(--v2-transition-slow);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.v2-sidebar.collapsed ~ .v2-main,
.v2-layout.sidebar-collapsed .v2-main {
    margin-left: var(--v2-sidebar-collapsed);
}

/* Top Bar */
.v2-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: var(--v2-topbar-height);
    background: var(--v2-bg-topbar);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--v2-border);
    position: sticky;
    top: 0;
    z-index: 50;
}

.v2-topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.v2-topbar-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--v2-text-heading);
}

.v2-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Search */
.v2-search {
    position: relative;
}

.v2-search input {
    width: 240px;
    padding: 7px 12px 7px 34px;
    background: var(--v2-bg-input);
    border: 1px solid var(--v2-border-input);
    border-radius: var(--v2-radius-md);
    color: var(--v2-text-primary);
    font-size: 13px;
    transition: all var(--v2-transition);
    outline: none;
}

.v2-search input::placeholder {
    color: var(--v2-text-muted);
}

.v2-search input:focus {
    border-color: var(--v2-border-focus);
    box-shadow: 0 0 0 3px var(--v2-accent-muted);
}

.v2-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--v2-text-muted);
    font-size: 14px;
    pointer-events: none;
}

/* Topbar buttons */
.v2-topbar-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--v2-radius-sm);
    border: 1px solid var(--v2-border-input);
    background: var(--v2-bg-input);
    color: var(--v2-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--v2-transition);
    font-size: 15px;
}

.v2-topbar-btn:hover {
    border-color: var(--v2-border-focus);
    color: var(--v2-text-primary);
    background: var(--v2-bg-card-hover);
}

/* User avatar */
.v2-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--v2-accent);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: transform var(--v2-transition);
}

.v2-avatar:hover {
    transform: scale(1.05);
}


/* ============================================================================
   PAGE CONTENT
   ============================================================================ */

.v2-content {
    flex: 1;
    padding: 20px;
    max-width: 1400px;
    width: 100%;
}

.v2-content-wide {
    max-width: 100%;
}

.v2-wide-left,
.v2-wide-right,
.v2-wide-full {
    background: transparent;
}


/* ============================================================================
   CARDS
   ============================================================================ */

.v2-card {
    background: var(--v2-bg-card);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-lg);
    padding: 16px;
    transition: all var(--v2-transition);
}

.v2-card:hover {
    border-color: var(--v2-border-light);
}

/* When .v2-card has .glass-card, use glass-bg instead of solid */
.v2-card.glass-card {
    padding: 16px;
    background: var(--glass-bg);
    border-color: var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.v2-card.glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--glass-sheen);
    pointer-events: none;
    z-index: 0;
}

.v2-card.glass-card > * {
    position: relative;
    z-index: 1;
}

.v2-card.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
    transform: translateY(-2px);
}

[data-theme="light"] .v2-card.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
}

.v2-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.v2-card-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--v2-text-secondary);
}

.v2-card-action {
    font-size: 12px;
    color: var(--v2-text-link);
    cursor: pointer;
    transition: opacity var(--v2-transition);
}

.v2-card-action:hover { opacity: 0.8; }


/* ============================================================================
   HERO — PORTFOLIO VALUE
   ============================================================================ */

.v2-hero {
    padding: 20px;
    margin-bottom: 24px;
}

.v2-hero-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--v2-text-heading);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.v2-hero-change {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 500;
}

.v2-hero-change.positive { color: var(--v2-accent); }
.v2-hero-change.negative { color: var(--v2-red); }

.v2-hero-change .change-arrow {
    font-size: 10px;
}

.v2-hero-sub {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--v2-text-secondary);
}

.v2-hero-sub .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--v2-text-muted);
}


/* ============================================================================
   STATS GRID
   ============================================================================ */

.v2-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
    background: transparent;
}

.v2-stat-card {
    background: var(--v2-bg-card);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-md);
    padding: 12px;
    transition: all var(--v2-transition);
}

.v2-stat-card:hover {
    border-color: var(--v2-border-light);
    background: var(--v2-bg-card-hover);
}

/* When .v2-stat-card has .glass-card, use glass-bg instead of solid */
.v2-stat-card.glass-card {
    padding: 12px;
    background: var(--glass-bg);
    border-color: var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.v2-stat-card.glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--glass-sheen);
    pointer-events: none;
    z-index: 0;
}

.v2-stat-card.glass-card > * {
    position: relative;
    z-index: 1;
}

.v2-stat-card.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
    transform: translateY(-2px);
}

[data-theme="light"] .v2-stat-card.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
}

.v2-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--v2-text-secondary);
    margin-bottom: 4px;
}

.v2-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--v2-text-heading);
    letter-spacing: -0.01em;
}

.v2-stat-desc {
    font-size: 11px;
    color: var(--v2-text-muted);
    margin-top: 4px;
}

.v2-stat-sub {
    font-size: 12px;
    color: var(--v2-text-muted);
    margin-top: 4px;
}

.v2-stat-sub.positive { color: var(--v2-accent); }
.v2-stat-sub.negative { color: var(--v2-red); }




/* ============================================================================
   GLASS CARD UTILITY — reusable frosted-glass card style
   Usage: add class="glass-card" to any card container
   Applies: translucent fill, backdrop blur, hairline border, specular sheen,
            layered shadow, hover lift. Falls back to solid card in unsupported envs.
   ============================================================================ */

.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition: transform var(--v2-transition), border-color var(--v2-transition), box-shadow var(--v2-transition);
}

/* Specular top-sheen via ::before */
.glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--glass-sheen);
    pointer-events: none;
    z-index: 0;
}

/* Ensure content sits above the sheen */
.glass-card > * {
    position: relative;
    z-index: 1;
}

/* Hover lift */
.glass-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}

[data-theme="light"] .glass-card:hover {
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
}

/* ============================================================================
   GLASS SHEEN VARIANTS — deliberate cascade across dashboard cards
   Each variant overrides ::before { background: ... } only.
   Usage: class="glass-card glass-sheen-1" etc.
   ============================================================================ */

/* Sheen 1 — Diagonal from top-left (~135deg), gentle corner catch */
.glass-sheen-1::before {
    --_glass-alpha: rgba(255,255,255,0.12);
    background: linear-gradient(135deg, var(--_glass-alpha) 0%, transparent 45%, transparent 60%);
}

/* Sheen 2 — Diagonal from top-right (~45deg), asymmetric sweep */
.glass-sheen-2::before {
    --_glass-alpha: rgba(255,255,255,0.10);
    background: linear-gradient(45deg, transparent 0%, var(--_glass-alpha) 55%, transparent 85%);
}

/* Sheen 3 — Soft radial corner gloss (bottom-left origin, wide falloff) */
.glass-sheen-3::before {
    background: radial-gradient(ellipse 60% 50% at 5% 95%, rgba(255,255,255,0.08) 0%, transparent 70%);
}

/* Sheen 4 — Steep low-angle sweep (~160deg), catches near bottom edge */
.glass-sheen-4::before {
    --_glass-alpha: rgba(255,255,255,0.09);
    background: linear-gradient(160deg, transparent 0%, transparent 65%, var(--_glass-alpha) 88%, var(--_glass-alpha) 100%);
}

/* Sheen 5 — Split highlight (dual subtle bands, off-axis) */
.glass-sheen-5::before {
    background: linear-gradient(150deg, transparent 0%, transparent 38%, rgba(255,255,255,0.06) 42%, transparent 46%, transparent 54%, rgba(255,255,255,0.05) 58%, transparent 62%);
}

/* Guardrail: @supports backdrop-filter fallback */
@supports not (backdrop-filter: blur(1px)) {
    .glass-card {
        background: var(--v2-bg-card);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .glass-card:hover {
        border-color: var(--v2-border-light);
        box-shadow: var(--v2-shadow-card);
    }
}

/* Guardrail: prefers-reduced-transparency -> solid panels */
@media (prefers-reduced-transparency: reduce) {
    .glass-card {
        background: var(--v2-bg-card);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: var(--v2-shadow-card);
    }
    .glass-card::before { display: none; }
    .glass-card:hover {
        border-color: var(--v2-border-light);
        box-shadow: var(--v2-shadow-card);
    }
}

/* Guardrail: prefers-reduced-motion -> no transform/sheen anim */
@media (prefers-reduced-motion: reduce) {
    .glass-card,
    .glass-card:hover {
        transform: none;
        transition: none;
    }
    .glass-card::before {
        background: transparent;
    }
}
/* ============================================================================
   CHART SECTION
   ============================================================================ */

.v2-chart-section {
    margin-bottom: 16px;
}

.v2-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.v2-chart-ranges {
    display: flex;
    gap: 4px;
    background: var(--v2-bg-input);
    border-radius: var(--v2-radius-sm);
    padding: 3px;
}

.v2-range-btn {
    padding: 5px 12px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--v2-text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--v2-transition);
}

.v2-range-btn:hover {
    color: var(--v2-text-primary);
}

.v2-range-btn.active {
    background: var(--v2-accent-muted);
    color: var(--v2-accent-text);
    font-weight: 600;
}

/* Chart container base (non-glass) */
.v2-chart-container {
    background: var(--v2-bg-card);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-lg);
    padding: 16px;
    position: relative;
    min-height: 300px;
}

/* Chart container with glass-card override */
.v2-chart-container.glass-card {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.v2-chart-container.glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--glass-sheen);
    pointer-events: none;
    z-index: 0;
}

.v2-chart-container.glass-card > * {
    position: relative;
    z-index: 1;
}

.v2-chart-container.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
    transform: translateY(-2px);
}

[data-theme="light"] .v2-chart-container.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
}

.v2-chart-canvas-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
}

.v2-chart-canvas-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}


/* ============================================================================
   ASSETS TABLE
   ============================================================================ */

.v2-table-section {
    margin-bottom: 16px;
}

.v2-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.v2-table-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--v2-text-heading);
}

.v2-table-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.v2-table-filter {
    padding: 6px 12px;
    background: var(--v2-bg-input);
    border: 1px solid var(--v2-border-input);
    border-radius: var(--v2-radius-sm);
    color: var(--v2-text-primary);
    font-size: 12px;
    outline: none;
}

.v2-table-filter:focus {
    border-color: var(--v2-border-focus);
}

/* Table wrapper: glass-card panel with container-level frosted glass + sheen.
   Non-glass themes (ocean-depths, sunset-horizon, cypherpunk1, cypher) fall
   through to the solid-card rules below because they have no --glass-* tokens.
   overflow: hidden clips the ::before sheen to the border-radius; table body
   overflows naturally within the dashboard layout (no per-row scroll needed). */
.v2-table-wrapper.glass-card {
    padding: 0;
    background: var(--glass-bg);
    border-color: var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    position: relative;
    overflow: hidden;
    transition: transform var(--v2-transition), border-color var(--v2-transition), box-shadow var(--v2-transition);
}

/* Specular top-sheen via ::before (inherited from .glass-card) */

/* Content sits above the sheen (inherited from .glass-card) */

/* Hover lift on the wrapper only when the table is scrolled out of view */
.v2-table-wrapper.glass-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}

[data-theme="light"] .v2-table-wrapper.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
}

/* Fallback for browsers / themes that don't support glass */
@supports not (backdrop-filter: blur(1px)) {
    .v2-table-wrapper.glass-card {
        background: var(--v2-bg-card);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: var(--v2-shadow-card);
    }
    .v2-table-wrapper.glass-card:hover {
        border-color: var(--v2-border-light);
        box-shadow: var(--v2-shadow-card);
        transform: none;
    }
}

/* Non-glass themes: fall back to solid card style */
[data-theme="ocean-depths"] .v2-table-wrapper.glass-card,
[data-theme="sunset-horizon"] .v2-table-wrapper.glass-card,
[data-theme="cypherpunk1"] .v2-table-wrapper.glass-card,
[data-theme="cypher"] .v2-table-wrapper.glass-card {
    background: var(--v2-bg-card);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-lg);
    box-shadow: var(--v2-shadow-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ============================================================================
   TABLE — no per-row backdrop-filter (perf on long lists)
   ============================================================================ */

.v2-table {
    width: 100%;
    border-collapse: collapse;
}

/* Sticky frosted header */
.v2-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.v2-table th {
    padding: 8px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--v2-text-muted);
    border-bottom: 1px solid var(--v2-border);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: color var(--v2-transition);
}

/* Frosted glass header background (dark + light) */
.v2-table-wrapper.glass-card .v2-table thead {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* Non-glass themes: solid header */
[data-theme="ocean-depths"] .v2-table-wrapper.glass-card .v2-table thead,
[data-theme="sunset-horizon"] .v2-table-wrapper.glass-card .v2-table thead,
[data-theme="cypherpunk1"] .v2-table-wrapper.glass-card .v2-table thead,
[data-theme="cypher"] .v2-table-wrapper.glass-card .v2-table thead {
    background: var(--v2-bg-table-header);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.v2-table th:hover {
    color: var(--v2-text-secondary);
}

.v2-table th.sorted {
    color: var(--v2-accent-text);
}

.v2-table th .sort-icon {
    margin-left: 4px;
    font-size: 9px;
    opacity: 0.5;
}

.v2-table th.sorted .sort-icon {
    opacity: 1;
}

.v2-table td {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--v2-text-primary);
    border-bottom: 1px solid var(--v2-border);
    transition: background var(--v2-transition);
}

.v2-table tbody tr {
    transition: background var(--v2-transition);
    cursor: pointer;
}

.v2-table tbody tr:hover {
    background: var(--v2-bg-table-row-hover);
}

.v2-table tbody tr:nth-child(even) {
    background: var(--v2-bg-table-row-alt);
}

.v2-table tbody tr:nth-child(even):hover {
    background: var(--v2-bg-table-row-hover);
}

.v2-table td.right,
.v2-table th.right {
    text-align: right;
}

/* Asset name cell */
.v2-asset-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.v2-asset-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: var(--v2-bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.v2-asset-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.v2-asset-icon .fallback {
    font-size: 11px;
    font-weight: 700;
    color: var(--v2-text-secondary);
}

.v2-asset-info .name {
    font-weight: 600;
    color: var(--v2-text-heading);
    font-size: 13px;
}

.v2-asset-info .ticker {
    font-size: 11px;
    color: var(--v2-text-muted);
    text-transform: uppercase;
}

/* Sparkline */
.v2-sparkline {
    width: 80px;
    height: 32px;
}

.v2-sparkline canvas {
    width: 100%;
    height: 100%;
}

/* Value cells */
.v2-value-positive { color: var(--v2-accent); }
.v2-value-negative { color: var(--v2-red); }

.v2-amount {
    font-weight: 600;
}

.v2-amount-sub {
    font-size: 11px;
    color: var(--v2-text-muted);
}

/* Privacy blur — only blur when privacy mode is active */
.v2-blur {
    transition: filter var(--v2-transition);
}

body.privacy-mode .v2-blur {
    filter: blur(8px);
    user-select: none;
}


/* ============================================================================
   BUTTONS
   ============================================================================ */

.v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--v2-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--v2-transition);
    white-space: nowrap;
}

.v2-btn-primary {
    background: var(--v2-accent);
    color: #000;
    font-weight: 600;
}

.v2-btn-primary:hover {
    background: var(--v2-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--v2-accent-muted);
}

.v2-btn-secondary {
    background: var(--v2-bg-input);
    color: var(--v2-text-primary);
    border-color: var(--v2-border-input);
}

.v2-btn-secondary:hover {
    background: var(--v2-bg-card-hover);
    border-color: var(--v2-text-muted);
}

.v2-btn-ghost {
    background: transparent;
    color: var(--v2-text-secondary);
}

.v2-btn-ghost:hover {
    background: var(--v2-bg-sidebar-hover);
    color: var(--v2-text-primary);
}

.v2-btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}

.v2-btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--v2-radius-sm);
}


/* ============================================================================
   LOADING SKELETONS
   ============================================================================ */

.v2-skeleton {
    background: var(--v2-bg-skeleton);
    background-size: 200% 100%;
    animation: v2-shimmer 1.5s infinite;
    border-radius: var(--v2-radius-sm);
}

@keyframes v2-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.v2-skeleton-text {
    height: 14px;
    width: 100%;
    margin-bottom: 8px;
}

.v2-skeleton-text.short { width: 60%; }
.v2-skeleton-text.xs { width: 40%; }

.v2-skeleton-value {
    height: 28px;
    width: 120px;
}

.v2-skeleton-chart {
    height: 280px;
    width: 100%;
}

.v2-skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--v2-border);
}

.v2-skeleton-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}


/* ============================================================================
   BADGES & TAGS
   ============================================================================ */

.v2-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    white-space: nowrap;
}

.v2-badge-green {
    background: var(--v2-accent-muted);
    color: var(--v2-accent-text);
}

.v2-badge-red {
    background: var(--v2-red-muted);
    color: var(--v2-red);
}

.v2-badge-neutral {
    background: rgba(255, 255, 255, 0.06);
    color: var(--v2-text-secondary);
}

.v2-chain-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--v2-text-secondary);
    text-transform: capitalize;
    letter-spacing: 0.02em;
}

/* Chain-specific badge colors (dark theme) */
.v2-chain-badge.chain-cardano {
    background: rgba(0, 82, 255, 0.2);
    color: #5c9eff;
    border: 1px solid rgba(92, 158, 255, 0.25);
}
.v2-chain-badge.chain-ethereum {
    background: rgba(98, 126, 234, 0.2);
    color: #8ba4f5;
    border: 1px solid rgba(139, 164, 245, 0.25);
}
.v2-chain-badge.chain-bitcoin {
    background: rgba(247, 147, 26, 0.2);
    color: #ffb74d;
    border: 1px solid rgba(255, 183, 77, 0.25);
}
.v2-chain-badge.chain-solana {
    background: rgba(20, 241, 149, 0.2);
    color: #3dffb3;
    border: 1px solid rgba(61, 255, 179, 0.25);
}
.v2-chain-badge.chain-polygon {
    background: rgba(130, 71, 229, 0.2);
    color: #a673f0;
    border: 1px solid rgba(166, 115, 240, 0.25);
}
.v2-chain-badge.chain-base {
    background: rgba(0, 82, 255, 0.2);
    color: #5c9eff;
    border: 1px solid rgba(92, 158, 255, 0.25);
}
.v2-chain-badge.chain-arbitrum {
    background: rgba(40, 159, 237, 0.2);
    color: #51b0f5;
    border: 1px solid rgba(40, 159, 237, 0.25);
}
.v2-chain-badge.chain-avalanche {
    background: rgba(232, 65, 66, 0.2);
    color: #f06667;
    border: 1px solid rgba(232, 65, 66, 0.25);
}
.v2-chain-badge.chain-bsc {
    background: rgba(240, 185, 11, 0.2);
    color: #f0b90b;
    border: 1px solid rgba(240, 185, 11, 0.25);
}
.v2-chain-badge.chain-tron {
    background: rgba(235, 0, 41, 0.2);
    color: #ff4d6a;
    border: 1px solid rgba(235, 0, 41, 0.25);
}
.v2-chain-badge.chain-xrp {
    background: rgba(35, 41, 47, 0.4);
    color: #a0aab4;
    border: 1px solid rgba(160, 170, 180, 0.25);
}
.v2-chain-badge.chain-algorand {
    background: rgba(0, 0, 0, 0.2);
    color: #c4c4c4;
    border: 1px solid rgba(196, 196, 196, 0.25);
}
.v2-chain-badge.chain-cosmos {
    background: rgba(46, 49, 72, 0.3);
    color: #7b80c0;
    border: 1px solid rgba(123, 128, 192, 0.25);
}
.v2-chain-badge.chain-near {
    background: rgba(0, 236, 151, 0.15);
    color: #00d897;
    border: 1px solid rgba(0, 216, 151, 0.25);
}
.v2-chain-badge.chain-ton {
    background: rgba(0, 136, 204, 0.2);
    color: #33a8e0;
    border: 1px solid rgba(0, 136, 204, 0.25);
}

/* CEX exchange chain badges */
.v2-chain-badge.chain-coinbase {
    background: rgba(0, 82, 255, 0.2);
    color: #4d8bff;
    border: 1px solid rgba(0, 82, 255, 0.25);
}
.v2-chain-badge.chain-binance {
    background: rgba(240, 185, 11, 0.2);
    color: #f0b90b;
    border: 1px solid rgba(240, 185, 11, 0.25);
}

/* ADA Handle Badge */
.v2-ada-handle-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(0, 210, 106, 0.15);
    color: #00d26a;
    border: 1px solid rgba(0, 210, 106, 0.3);
    white-space: nowrap;
    letter-spacing: 0.02em;
    margin-left: 6px;
    vertical-align: middle;
}

[data-theme="light"] .v2-ada-handle-badge {
    background: rgba(0, 184, 148, 0.10);
    color: #00926e;
    border-color: rgba(0, 184, 148, 0.25);
}

/* Direction badges */
.v2-direction-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    text-transform: capitalize;
}
.v2-direction-badge.direction-sent {
    background: rgba(214, 48, 49, 0.15);
    color: #ff5252;
    border: 1px solid rgba(214, 48, 49, 0.25);
}
.v2-direction-badge.direction-received {
    background: rgba(0, 210, 106, 0.15);
    color: #00d26a;
    border: 1px solid rgba(0, 210, 106, 0.25);
}
.v2-direction-badge.direction-buy {
    background: rgba(0, 210, 106, 0.15);
    color: #00d26a;
    border: 1px solid rgba(0, 210, 106, 0.25);
}
.v2-direction-badge.direction-sell {
    background: rgba(214, 48, 49, 0.15);
    color: #ff5252;
    border: 1px solid rgba(214, 48, 49, 0.25);
}
.v2-direction-badge.direction-transfer {
    background: rgba(68, 138, 255, 0.15);
    color: #448aff;
    border: 1px solid rgba(68, 138, 255, 0.25);
}

/* Light theme overrides for chain and direction badges */
[data-theme="light"] .v2-chain-badge.chain-cardano {
    background: rgba(0, 51, 173, 0.08);
    color: #0033ad;
}
[data-theme="light"] .v2-chain-badge.chain-ethereum {
    background: rgba(98, 126, 234, 0.08);
    color: #4a5fd8;
}
[data-theme="light"] .v2-chain-badge.chain-bitcoin {
    background: rgba(247, 147, 26, 0.08);
    color: #f7931a;
}
[data-theme="light"] .v2-chain-badge.chain-solana {
    background: rgba(20, 241, 149, 0.08);
    color: #00bf88;
}
[data-theme="light"] .v2-chain-badge.chain-polygon {
    background: rgba(130, 71, 229, 0.08);
    color: #8247E5;
}
[data-theme="light"] .v2-chain-badge.chain-base {
    background: rgba(0, 82, 255, 0.08);
    color: #0052ff;
}
[data-theme="light"] .v2-direction-badge.direction-sent {
    background: rgba(214, 48, 49, 0.08);
    color: #c92a2a;
}
[data-theme="light"] .v2-direction-badge.direction-received {
    background: rgba(0, 184, 148, 0.08);
    color: #00a884;
}
[data-theme="light"] .v2-direction-badge.direction-buy {
    background: rgba(0, 184, 148, 0.08);
    color: #00a884;
}
[data-theme="light"] .v2-direction-badge.direction-sell {
    background: rgba(214, 48, 49, 0.08);
    color: #c92a2a;
}


/* ============================================================================
   SEARCH RESULTS DROPDOWN
   ============================================================================ */

.v2-search-results {
    scrollbar-width: thin;
    scrollbar-color: var(--v2-border) transparent;
}
.v2-search-results::-webkit-scrollbar { width: 6px; }
.v2-search-results::-webkit-scrollbar-track { background: transparent; }
.v2-search-results::-webkit-scrollbar-thumb { background: var(--v2-border); border-radius: 3px; }


/* ============================================================================
   DROPDOWN MENUS
   ============================================================================ */

.v2-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--v2-bg-dropdown);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-md);
    box-shadow: var(--v2-shadow-dropdown);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all var(--v2-transition);
}

.v2-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.v2-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 13px;
    color: var(--v2-text-primary);
    cursor: pointer;
    transition: background var(--v2-transition);
}

.v2-dropdown-item:hover {
    background: var(--v2-bg-sidebar-hover);
}

.v2-dropdown-item:first-child {
    border-radius: var(--v2-radius-md) var(--v2-radius-md) 0 0;
}

.v2-dropdown-item:last-child {
    border-radius: 0 0 var(--v2-radius-md) var(--v2-radius-md);
}

.v2-dropdown-divider {
    border-top: 1px solid var(--v2-border);
    margin: 4px 0;
}

.v2-dropdown-label {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--v2-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* ============================================================================
   MODALS
   ============================================================================ */

.v2-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transition: all var(--v2-transition);
}

.v2-modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.v2-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: var(--v2-bg-modal);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-xl);
    box-shadow: var(--v2-shadow-lg);
    z-index: 301;
    min-width: 400px;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: all var(--v2-transition);
}

.v2-modal.open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.v2-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
}

.v2-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--v2-text-heading);
}

.v2-modal-close {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--v2-text-muted);
    font-size: 18px;
    cursor: pointer;
    border-radius: var(--v2-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--v2-transition);
}

.v2-modal-close:hover {
    background: var(--v2-bg-sidebar-hover);
    color: var(--v2-text-primary);
}

.v2-modal-body {
    padding: 20px 24px 24px;
    max-height: 75vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--v2-border) transparent;
}
.v2-modal-body::-webkit-scrollbar { width: 6px; }
.v2-modal-body::-webkit-scrollbar-track { background: transparent; }
.v2-modal-body::-webkit-scrollbar-thumb { background: var(--v2-border); border-radius: 3px; }


/* ============================================================================
   TABS
   ============================================================================ */

.v2-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--v2-border);
    margin-bottom: 20px;
}

.v2-tab {
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--v2-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: all var(--v2-transition);
}

.v2-tab:hover {
    color: var(--v2-text-primary);
}

.v2-tab.active {
    color: var(--v2-accent-text);
    border-bottom-color: var(--v2-accent);
    font-weight: 600;
}


/* ============================================================================
   SYNC / REFRESH BUTTON
   ============================================================================ */

.v2-sync-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--v2-accent-muted);
    border: 1px solid var(--v2-accent);
    border-radius: var(--v2-radius-sm);
    color: var(--v2-accent-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--v2-transition);
}

.v2-sync-btn:hover {
    background: var(--v2-accent);
    color: #000;
}

.v2-sync-btn.syncing .sync-icon {
    animation: v2-spin 1s linear infinite;
}

@keyframes v2-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* ============================================================================
   THEME SELECTOR (embedded in sidebar)
   ============================================================================ */

.v2-theme-select {
    width: 100%;
    padding: 7px 10px;
    background: var(--v2-bg-input);
    border: 1px solid var(--v2-border-input);
    border-radius: var(--v2-radius-sm);
    color: var(--v2-text-primary);
    font-size: 12px;
    outline: none;
    cursor: pointer;
}

.v2-theme-select:focus {
    border-color: var(--v2-border-focus);
}


/* ============================================================================
   FOOTER
   ============================================================================ */

.v2-footer {
    padding: 16px 20px;
    text-align: center;
    font-size: 12px;
    color: var(--v2-text-muted);
    border-top: 1px solid var(--v2-border);
    margin-top: auto;
}


/* ============================================================================
   RESPONSIVE
   ============================================================================ */

/* Wide screens: expand content and use side-by-side layout */
@media (min-width: 1600px) {
    .v2-content {
        max-width: 1800px;
    }

    /* Dashboard-specific wide layout: summary left, assets right */
    .v2-dashboard-wide {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        gap: 20px;
    }

    .v2-dashboard-wide .v2-hero { grid-column: 1 / -1; }
    .v2-dashboard-wide .v2-stats-grid { grid-column: 1 / -1; }
    .v2-dashboard-wide .v2-wide-left { grid-column: 1; }
    .v2-dashboard-wide .v2-wide-right { grid-column: 2; }
    .v2-dashboard-wide .v2-wide-full { grid-column: 1 / -1; }
}

@media (min-width: 1900px) {
    .v2-content {
        max-width: 2200px;
    }
}

@media (max-width: 1200px) {
    .v2-content { padding: 20px; }
    .v2-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .v2-sidebar {
        width: var(--v2-sidebar-collapsed);
    }
    .v2-sidebar .logo-text,
    .v2-sidebar .v2-nav-label,
    .v2-sidebar .v2-nav-item .nav-text,
    .v2-sidebar .v2-sidebar-collapse-btn .nav-text {
        opacity: 0;
        pointer-events: none;
    }
    .v2-sidebar .v2-nav-item {
        justify-content: center;
        padding: 9px;
    }
    .v2-sidebar .v2-sidebar-collapse-btn {
        justify-content: center;
        padding: 9px;
    }
    .v2-main {
        margin-left: var(--v2-sidebar-collapsed);
    }
    .v2-content { padding: 16px; }
    .v2-stats-grid { grid-template-columns: 1fr; }
    .v2-hero-value { font-size: 28px; }
    .v2-search input { width: 160px; }
    .v2-topbar { padding: 0 16px; }
}

@media (max-width: 480px) {
    .v2-sidebar { display: none; }
    .v2-main { margin-left: 0; }
    .v2-search { display: none; }
}


/* ============================================================================
   TRANSITIONS & ANIMATIONS
   ============================================================================ */

.v2-fade-in {
    animation: v2-fadeIn 0.3s ease;
}

@keyframes v2-fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.v2-slide-in {
    animation: v2-slideIn 0.3s ease;
}

@keyframes v2-slideIn {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}


/* ============================================================================
   TOAST NOTIFICATIONS
   ============================================================================ */

.v2-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 400;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.v2-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--v2-bg-card);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-md);
    box-shadow: var(--v2-shadow-lg);
    font-size: 13px;
    color: var(--v2-text-primary);
    animation: v2-toastIn 0.3s ease;
    max-width: 360px;
}

.v2-toast.success { border-left: 3px solid var(--v2-accent); }
.v2-toast.error { border-left: 3px solid var(--v2-red); }
.v2-toast.warning { border-left: 3px solid var(--v2-orange); }

@keyframes v2-toastIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}


/* ============================================================================
   USER MENU DROPDOWN
   ============================================================================ */

.v2-user-menu {
    position: relative;
}

.v2-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 220px;
    background: var(--v2-bg-dropdown);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-md);
    box-shadow: var(--v2-shadow-dropdown);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all var(--v2-transition);
}

.v2-user-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.v2-user-dropdown-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--v2-border);
    font-size: 13px;
    font-weight: 600;
    color: var(--v2-text-heading);
}

.v2-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 13px;
    color: var(--v2-text-primary);
    cursor: pointer;
    transition: background var(--v2-transition);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.v2-user-dropdown-item:hover {
    background: var(--v2-bg-sidebar-hover);
}

.v2-user-dropdown-theme {
    padding: 9px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--v2-text-primary);
}

.v2-user-dropdown-theme select {
    padding: 4px 8px;
    background: var(--v2-bg-input);
    border: 1px solid var(--v2-border-input);
    border-radius: 4px;
    color: var(--v2-text-primary);
    font-size: 12px;
}

.v2-user-dropdown-divider {
    border-top: 1px solid var(--v2-border);
    margin: 4px 0;
}

.v2-user-dropdown-item.logout {
    color: var(--v2-red);
}

.v2-user-dropdown-item.logout:hover {
    background: var(--v2-red-muted);
}

/* ============================================================================
   V1 LINK / BACK TO V1
   ============================================================================ */

.v2-v1-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: var(--v2-text-muted);
    font-size: 12px;
    border-radius: var(--v2-radius-sm);
    transition: all var(--v2-transition);
}

.v2-v1-link:hover {
    background: var(--v2-bg-sidebar-hover);
    color: var(--v2-text-secondary);
    opacity: 1;
}

/* ============================================================================
   EMPTY STATES
   ============================================================================ */

.v2-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.v2-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.v2-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--v2-text-primary);
    margin-bottom: 8px;
}

.v2-empty-desc {
    font-size: 13px;
    color: var(--v2-text-secondary);
    max-width: 360px;
}

/* ============================================================================
   INLINE-STYLED GRID OVERRIDES (tighten hardcoded gap:20px on 2-col grids)
   ============================================================================ */

/* Dashboard 2-col grid (donut + holdings) */
.v2-content [style*="grid-template-columns:1fr 1fr"] {
    gap: var(--v2-space-md) !important;
}

/* Dashboard 3-col grid (3 stat cards inline) */
.v2-content [style*="grid-template-columns:repeat(3, 1fr)"] {
    gap: var(--v2-space-md) !important;
}