/*
================================================================================
| REEBUX — DASHBOARD v7.0 | dashboard.css
| Standalone, mobile-first total override.
| Loaded after main.css and BEFORE mobile.css, so !important + high-specificity
| selectors are used aggressively to defeat mobile.css's max-width:992px block.
================================================================================
*/
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap');

/* ================================================================
   1. DESIGN TOKENS (welcome-event / split-deposit aesthetic)
   ================================================================ */
:root,
.dashboard-layout,
#toast-container,
#spinner-overlay {
    --c-bg:         #04040A;
    --c-bg1:        #0A0A14;
    --c-bg2:        #111120;
    --c-bg3:        #1A1A2E;
    --c-border:     rgba(255,255,255,0.08);
    --c-border-h:   rgba(0,191,255,0.4);
    --c-primary:    #00BFFF;
    --c-primary-g:  rgba(0,191,255,0.18);
    --c-primary-gd: rgba(0,191,255,0.05);
    --c-accent:     #39FF14;
    --c-accent-g:   rgba(57,255,20,0.15);
    --c-gold:       #FFD700;
    --c-error:      #FF495C;
    --c-error-g:    rgba(255,73,92,0.15);
    --c-warning:    #FFB020;
    --c-warning-g:  rgba(255,176,32,0.15);
    --c-success:    #39FF14;
    --c-txt1:       #F0F2F5;
    --c-txt2:       #A0AEC0;
    --c-txt3:       #5A6A7E;
    --font:         'Rajdhani', system-ui, sans-serif;
    --mono:         var(--font);
    --r-sm:  6px;  --r-md: 12px; --r-lg: 16px;
    --sp-xs:  4px; --sp-sm:  8px; --sp-md: 14px;
    --sp-lg: 20px; --sp-xl: 28px;
    --trans-fast:   150ms cubic-bezier(0.4,0,0.2,1);
    --trans-mid:    280ms cubic-bezier(0.4,0,0.2,1);
    --header-h-mobile:  60px;
    --header-h:         70px;
    --icon-btn:         42px;
}

/* ================================================================
   2. GLOBAL FOUNDATION (lock background, kill any white)
   ================================================================ */
html, body {
    background: #04040A !important;
    background-color: #04040A !important;
    background-image: none !important;
    color: var(--c-txt2) !important;
    width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
}
body {
    font-family: var(--font) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    min-height: 100vh !important;
    -webkit-font-smoothing: antialiased;
    transition: none !important;
}
body strong { color: var(--c-txt1); font-weight: 700; }
body * { -webkit-tap-highlight-color: transparent; }

/* Tabular figures for everything financial — clean column alignment */
.stat-card-value,
.stat-card-footer,
.responsive-table td,
.crypto-price-item .price,
.crypto-price-item .change,
.dashboard-grid-main .text-primary,
.dashboard-grid-main .text-success {
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1, "lnum" 1 !important;
}

/* ================================================================
   3. ROOT LAYOUT
   ================================================================ */
.dashboard-layout {
    display: block !important;
    width: 100% !important;
    min-height: 100vh !important;
    background: #04040A !important;
    color: var(--c-txt2);
    font-family: var(--font);
    position: relative !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ================================================================
   4. SIDEBAR — clean, prominent logo, footer pinned bottom
   ================================================================ */
   5. MAIN COLUMN
   ================================================================ */
.dashboard-layout .dashboard-main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #04040A !important;
    background-color: #04040A !important;
    overflow: visible !important;
}

/* ================================================================
   6. HEADER (sticky glass)
   ================================================================ */
.dashboard-layout .dashboard-header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 200 !important;
    width: 100% !important;
    height: var(--header-h-mobile) !important;
    min-height: var(--header-h-mobile) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 0 var(--sp-md) !important;
    margin: 0 !important;
    background: rgba(4,4,10,0.92) !important;
    backdrop-filter: blur(16px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
    border-bottom: 1px solid var(--c-border) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.4) !important;
}
.dashboard-header .dashboard-header-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}
.dashboard-header .dashboard-header-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
}
/* Wrappers for bell + avatar — never stretch, always centered */
.header-notif-wrap,
.profile-header-wrap {
    position: relative !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--icon-btn) !important;
    height: var(--icon-btn) !important;
}

/* Hamburger — exact 42px square */
.mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--icon-btn) !important;
    height: var(--icon-btn) !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-md) !important;
    color: var(--c-txt1) !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: var(--trans-fast) !important;
}
.mobile-menu-toggle:hover {
    border-color: var(--c-primary) !important;
    color: var(--c-primary) !important;
}
.mobile-menu-toggle:active { transform: scale(0.96) !important; }

/* Welcome message */
.welcome-message {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
    text-align: left !important;
}
.welcome-message h1,
.welcome-message #welcome-heading {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    color: var(--c-txt1) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: none !important;
    text-transform: none !important;
    text-align: left !important;
}
.welcome-message p,
.welcome-message #account-status {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font) !important;
    font-size: 0.7rem !important;
    color: var(--c-txt3) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
}
.welcome-message p .badge,
.welcome-message #account-status .badge {
    transform: scale(0.85);
    transform-origin: left center;
    margin-left: 2px;
}

/* Header CTA — hide tiny mobile, show ≥520px */
.dashboard-header-right .btn,
.dashboard-header-right .btn-primary,
.dashboard-header-right a.btn-primary {
    display: none !important;
}
@media (min-width: 520px) {
    .dashboard-header-right .btn,
    .dashboard-header-right .btn-primary,
    .dashboard-header-right a.btn-primary {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 9px 16px !important;
        background: linear-gradient(135deg, var(--c-primary), #0088cc) !important;
        border: none !important;
        border-radius: var(--r-md) !important;
        color: #000 !important;
        font-family: var(--font) !important;
        font-size: 0.78rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        line-height: 1 !important;
        transition: var(--trans-fast) !important;
    }
    .dashboard-header-right .btn:hover {
        box-shadow: 0 4px 14px rgba(0,191,255,0.4) !important;
    }
}

/* ================================================================
   7. NOTIFICATION BELL  +  AVATAR  — IDENTICAL 42px circles
   ================================================================ */
.notification-bell {
    position: relative !important;
    flex-shrink: 0 !important;
    width: var(--icon-btn) !important;
    height: var(--icon-btn) !important;
}
.notification-btn {
    width: var(--icon-btn) !important;
    height: var(--icon-btn) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 1px solid var(--c-border) !important;
    border-radius: 50% !important;
    color: var(--c-txt1) !important;
    font-size: 1.15rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: var(--trans-fast) !important;
    box-sizing: border-box !important;
}
.notification-btn:hover {
    border-color: var(--c-primary) !important;
    color: var(--c-primary) !important;
}
.notification-btn:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
.notification-badge {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    background: var(--c-error) !important;
    color: #fff !important;
    border: 2px solid #04040A !important;
    border-radius: 999px !important;
    font-family: var(--mono) !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    line-height: 12px !important;
    text-align: center !important;
    text-indent: 0 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
}
.notification-badge.visible {
    display: inline-flex !important;
}

.notification-dropdown {
    position: fixed !important;
    top: calc(var(--header-h-mobile) + 8px) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: 420px !important;
    max-height: min(72vh, 580px) !important;
    margin-left: auto !important;
    background: #080E1C !important;
    border: 1px solid #1A2D46 !important;
    border-radius: var(--r-lg) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.65) !important;
    overflow: hidden !important;
    z-index: 9999 !important;
    display: none !important;
    /* Flex column so footer always stays visible */
    flex-direction: column !important;
}
.notification-dropdown.visible { display: flex !important; }
.notification-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 12px var(--sp-md) !important;
    border-bottom: 1px solid #1A2D46 !important;
    background: rgba(0,191,255,0.04) !important;
    flex-shrink: 0 !important;
}
.notification-header h5 {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font) !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: var(--c-txt1) !important;
    text-shadow: none !important;
}
.notification-header .btn-link,
.notification-footer .btn-link {
    color: var(--c-primary) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.notification-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    background: #060D1C !important;
}
/* Themed scrollbar */
.notification-list::-webkit-scrollbar { width: 4px !important; }
.notification-list::-webkit-scrollbar-track { background: #060D1C !important; }
.notification-list::-webkit-scrollbar-thumb { background: #1A2D46 !important; border-radius: 2px !important; }
.notification-list::-webkit-scrollbar-thumb:hover { background: #22D3EE !important; }

/* ── Notification Dropdown Items — 2026 Fintech ─────────────────────────── */
.notification-item {
    display: flex !important; align-items: stretch !important;
    cursor: pointer !important; border-bottom: 1px solid #0D1E33 !important;
    transition: background 0.13s !important;
    position: relative !important; overflow: hidden !important;
    background: transparent !important; min-height: 64px !important;
}
.notification-item:last-child { border-bottom: none !important; }
.notification-item:hover  { background: rgba(255,255,255,0.03) !important; }
.notification-item.unread { background: rgba(34,211,238,0.06) !important; }
.notification-item.unread:hover { background: rgba(34,211,238,0.1) !important; }

/* ── Corner tag — TOP RIGHT of dropdown item ── */
.notif-cat-lbl {
    position: absolute !important; top: 0 !important; right: 0 !important;
    border-radius: 0 0 0 7px !important;
    font-size: 0.53rem !important; font-weight: 900 !important;
    letter-spacing: 0.07em !important; text-transform: uppercase !important;
    padding: 2px 7px !important; line-height: 1.6 !important; z-index: 2 !important;
}
.notif-cat-lbl.cat-cyan   { background: #22D3EE !important; color: #020F14 !important; }
.notif-cat-lbl.cat-green  { background: #22C55E !important; color: #021008 !important; }
.notif-cat-lbl.cat-red    { background: #F43F5E !important; color: #fff !important; }
.notif-cat-lbl.cat-gold   { background: #EAB308 !important; color: #130C00 !important; }
.notif-cat-lbl.cat-orange { background: #F97316 !important; color: #fff !important; }
.notif-cat-lbl.cat-purple { background: #A855F7 !important; color: #fff !important; }
.notif-cat-lbl.cat-neon   { background: #34D399 !important; color: #021408 !important; }

.notif-item-inner {
    flex: 1 !important; min-width: 0 !important;
    padding: 26px 13px 10px 14px !important;
    display: flex !important; flex-direction: column !important; gap: 3px !important;
}
.notif-item-title {
    font-size: 0.82rem !important; font-weight: 800 !important; color: #F0F8FF !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    line-height: 1.3 !important;
}
.notification-item.unread .notif-item-title { color: #FFFFFF !important; }
.notif-item-preview {
    font-size: 0.73rem !important; color: #6B8DAF !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
.notification-item.unread .notif-item-preview { color: #7BA0C0 !important; }
.notif-item-foot {
    display: flex !important; align-items: center !important; gap: 6px !important; margin-top: 2px !important;
}
.notif-item-time {
    font-size: 0.68rem !important; color: #6B8DAF !important; font-family: var(--font) !important;
}
.notif-item-dot {
    width: 5px !important; height: 5px !important; border-radius: 50% !important;
    background: #22D3EE !important; flex-shrink: 0 !important; margin-left: auto !important;
    box-shadow: 0 0 6px rgba(34,211,238,0.7) !important;
}
.notification-empty {
    padding: 28px var(--sp-md) !important; text-align: center !important;
    color: #6B8DAF !important; font-size: 0.82rem !important;
}
.notification-footer {
    padding: 10px var(--sp-md) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-top: 1px solid #1A2D46 !important; background: #060D1C !important;
    flex-shrink: 0 !important;
}
.notification-footer .btn-link {
    display: inline-block !important;
    padding: 4px 0 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #22D3EE !important;
    text-decoration: none !important;
    letter-spacing: 0.02em !important;
}
.notification-footer .btn-link:hover { color: #67E8F9 !important; }

/* ================================================================
   SHARED — Category chip, detail card, overlay, badge, profile dropdown
   (used on all dashboard pages)
   ================================================================ */

/* ── Detail card centered chip (solid vivid pill) ── */
.notif-chip {
    display: inline-block !important;
    font-size: 0.62rem !important; font-weight: 900 !important;
    letter-spacing: 0.1em !important; text-transform: uppercase !important;
    padding: 5px 18px !important; border-radius: 100px !important;
}
.notif-chip.cat-cyan   { background: #22D3EE !important; color: #020F14 !important; }
.notif-chip.cat-green  { background: #22C55E !important; color: #021008 !important; }
.notif-chip.cat-red    { background: #F43F5E !important; color: #fff !important; }
.notif-chip.cat-gold   { background: #EAB308 !important; color: #130C00 !important; }
.notif-chip.cat-orange { background: #F97316 !important; color: #fff !important; }
.notif-chip.cat-purple { background: #A855F7 !important; color: #fff !important; }
.notif-chip.cat-neon   { background: #34D399 !important; color: #021408 !important; }

/* ── Overlay ── */
@keyframes notifOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes notifCardIn    { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

.notif-overlay {
    position: fixed !important; inset: 0 !important;
    background: rgba(0,4,14,0.82) !important;
    backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important;
    z-index: 99999 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 20px !important;
    animation: notifOverlayIn 0.15s ease-out !important;
}
.notif-overlay.closing { animation: notifOverlayIn 0.12s ease-out reverse !important; }

/* ── Detail card ── */
.notif-detail-card {
    background: #0A1422 !important;
    border-radius: 18px !important; border: 1px solid #1E3352 !important;
    width: 100% !important; max-width: 500px !important;
    max-height: 88vh !important; overflow-y: auto !important;
    position: relative !important;
    box-shadow: 0 40px 90px rgba(0,0,0,0.5) !important;
    animation: notifCardIn 0.22s cubic-bezier(0.22,1,0.36,1) !important;
}
.notif-detail-card::-webkit-scrollbar { width: 3px !important; }
.notif-detail-card::-webkit-scrollbar-thumb { background: #1A2D46 !important; border-radius: 2px !important; }

/* Centered chip row at top */
.notif-chip-row {
    display: flex !important; justify-content: center !important;
    padding: 24px 56px 0 !important;
}

/* Close — bare ✕, no background */
.notif-detail-close {
    position: absolute !important; top: 18px !important; right: 20px !important;
    background: none !important; border: none !important;
    color: #4A6B8A !important; font-size: 1.1rem !important; line-height: 1 !important;
    cursor: pointer !important; padding: 4px 6px !important;
    transition: color 0.13s !important; z-index: 3 !important;
}
.notif-detail-close:hover { color: #94A3B8 !important; }

/* Heading — big and centered */
.notif-detail-top {
    padding: 14px 28px 16px !important;
    text-align: center !important;
    }
.notif-detail-heading {
    font-size: 1.45rem !important; font-weight: 900 !important;
    color: #FFFFFF !important; line-height: 1.25 !important;
    margin: 0 !important; letter-spacing: -0.02em !important;
    text-align: center !important;
}

/* Horizontal divider */
.notif-detail-div {
    height: 1px !important; background: #0F1E31 !important; margin: 0 !important;
}

.notif-detail-body { padding: 20px 24px 16px !important; }
.notif-detail-message {
    color: #FFFFFF !important; font-size: 0.9rem !important;
    line-height: 1.9 !important; white-space: pre-line !important;
    word-break: break-word !important; margin: 0 0 16px 0 !important;
}
.notif-detail-message:last-child { margin-bottom: 0 !important; }

/* ── Key-value data grid ── */
.notif-kv-grid {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important;
}
.notif-kv-item {
    background: #060E1C !important;
    border: 1px solid #1A2D46 !important; border-radius: 10px !important;
    padding: 12px 14px !important;
    display: flex !important; flex-direction: column !important; gap: 5px !important;
}
.notif-kv-label {
    font-size: 0.6rem !important; font-weight: 700 !important;
    letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #4A6B8A !important;
}
.notif-kv-value {
    font-size: 0.9rem !important; font-weight: 700 !important;
    color: #F0F8FF !important; font-family: var(--mono) !important;
}

/* ── Auto-highlight marks ── */
mark.hl-amount  { background: rgba(52,211,153,0.22) !important; color: #34D399 !important; border-radius: 3px !important; padding: 0 4px !important; font-family: var(--mono) !important; font-weight: 700 !important; font-style: normal !important; }
mark.hl-percent { background: rgba(253,224,71,0.16) !important; color: #FDE047 !important; border-radius: 3px !important; padding: 0 4px !important; font-weight: 700 !important; font-style: normal !important; }
mark.hl-date    { background: rgba(165,180,252,0.16) !important; color: #A5B4FC !important; border-radius: 3px !important; padding: 0 4px !important; font-style: normal !important; }
mark.hl-email   { background: rgba(125,211,252,0.15) !important; color: #7DD3FC !important; border-radius: 3px !important; padding: 0 4px !important; font-style: normal !important; }

/* ── Footer — buttons centered at the bottom (time moved up into the
   header area, right under the heading). ── */
.notif-detail-footer {
    padding: 14px 24px 20px !important;
    border-top: 1px solid #0F1E31 !important;
    display: flex !important; justify-content: center !important; align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
/* The time inside .notif-detail-top sits on its own centred line right
   below the heading. */
.notif-detail-top .notif-detail-time-foot {
    display: block !important;
    margin-top: 6px !important;
    text-align: center !important;
}
.btn-notif-cta {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    background: #1D4ED8 !important; color: #fff !important;
    padding: 9px 22px !important; border-radius: 8px !important;
    font-size: 0.82rem !important; font-weight: 700 !important;
    text-decoration: none !important; transition: background 0.13s !important;
}
.btn-notif-cta:hover { background: #2563EB !important; }
.btn-notif-confirm {
    display: inline-flex !important; align-items: center !important;
    background: transparent !important;
    border: 1.5px solid #22D3EE !important; color: #22D3EE !important;
    padding: 8px 22px !important; border-radius: 8px !important;
    font-size: 0.82rem !important; font-weight: 700 !important;
    cursor: pointer !important; transition: all 0.15s !important;
}
.btn-notif-confirm:hover { background: rgba(34,211,238,0.1) !important; }
.notif-detail-time-foot {
    font-size: 0.72rem !important; color: #6B8DAF !important;
    font-family: var(--font) !important; font-style: normal !important;
    white-space: nowrap !important;
}

/* ── Sidebar nav unread badge — tiny dot (hidden by default, shown via .visible) ── */
.nav-notif-badge {
    display: none;
    width: 7px !important; height: 7px !important;
    background: #F43F5E !important;
    border-radius: 50% !important; margin-left: auto !important;
    flex-shrink: 0 !important;
}
.nav-notif-badge.visible { display: inline-block !important; }

/* ================================================================
   PROFILE HEADER DROPDOWN
   ================================================================ */
.profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 256px;
    background: #0A1422 !important;
    border: 1px solid #1E3352 !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important;
    z-index: 99998 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-6px) scale(0.97) !important;
    /* will-change lets the browser composite this layer ahead of time so
       toggling .open feels instant — no per-frame layout/paint cost. */
    will-change: opacity, transform !important;
    transition: opacity 0.12s ease, transform 0.12s ease !important;
    overflow: hidden !important;
}
.profile-dropdown.open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}
.pd-top {
    padding: 14px 14px 12px !important;
    display: flex !important; align-items: center !important; gap: 11px !important;
    background: linear-gradient(135deg, rgba(29,78,216,0.14), rgba(34,211,238,0.06)) !important;
    border-bottom: 1px solid #0F1E31 !important;
}
.pd-avatar {
    width: 40px !important; height: 40px !important; border-radius: 50% !important;
    object-fit: cover !important; border: 2px solid #1E3352 !important; flex-shrink: 0 !important;
}
.pd-info { min-width: 0 !important; flex: 1 !important; }
.pd-name {
    font-size: 0.87rem !important; font-weight: 800 !important; color: #F0F8FF !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
.pd-email {
    font-size: 0.66rem !important; color: #3A5470 !important; margin-top: 2px !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
.pd-status-pill {
    display: inline-block !important; margin-top: 4px !important;
    font-size: 0.54rem !important; font-weight: 900 !important;
    text-transform: uppercase !important; letter-spacing: 0.08em !important;
    padding: 2px 7px !important; border-radius: 100px !important;
}
.pd-status-pill.active { background: rgba(34,197,94,0.18) !important; color: #4ADE80 !important; }
.pd-status-pill.inactive { background: rgba(244,63,94,0.15) !important; color: #F87171 !important; }
.pd-status-pill.verified { background: rgba(34,197,94,0.18) !important; color: #4ADE80 !important; }
.pd-status-pill.unverified { background: rgba(250,204,21,0.15) !important; color: #FACC15 !important; }
.pd-stats {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    border-bottom: 1px solid #0F1E31 !important;
}
.pd-stat {
    padding: 10px 12px !important;
    display: flex !important; flex-direction: column !important; gap: 3px !important;
    border-right: 1px solid #0F1E31 !important;
}
.pd-stat:last-child { border-right: none !important; }
.pd-stat-lbl {
    font-size: 0.57rem !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 0.06em !important; color: #2A3D55 !important;
}
.pd-stat-val {
    font-size: 0.84rem !important; font-weight: 700 !important;
    color: #F0F8FF !important; font-family: var(--mono) !important;
}
.pd-actions {
    padding: 10px 12px !important;
    display: flex !important; flex-direction: column !important; gap: 6px !important;
}
.pd-btn-primary {
    display: block !important; text-align: center !important;
    background: linear-gradient(135deg, #1D4ED8, #2563EB) !important; color: #fff !important;
    padding: 8px 12px !important; border-radius: 8px !important;
    font-size: 0.78rem !important; font-weight: 700 !important;
    text-decoration: none !important; transition: opacity 0.13s !important;
}
.pd-btn-primary:hover { opacity: 0.88 !important; }
.pd-btn-logout {
    width: 100% !important; background: transparent !important;
    border: 1px solid #1A2D46 !important; color: #3A5470 !important;
    padding: 7px 12px !important; border-radius: 8px !important;
    text-align: center !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    font-size: 0.75rem !important; font-weight: 600 !important; cursor: pointer !important;
    transition: all 0.13s !important;
}
.pd-btn-logout:hover { border-color: #F43F5E !important; color: #F87171 !important; }

/* ================================================================
   FORM CONTROLS — all dashboard pages: cyan/blue theme
   ================================================================ */
.dashboard-content .form-control {
    width: 100%;
    padding: 14px 16px;
    background: rgba(0,191,255,0.04);
    border: 1px solid rgba(0,191,255,0.18);
    border-radius: 12px;
    color: #F1F5F9;
    font-family: var(--font);
    font-size: 0.96rem;
    font-weight: 500;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}
.dashboard-content .form-control:focus {
    border-color: #00BFFF;
    background: rgba(0,191,255,0.07);
    box-shadow: 0 0 0 3px rgba(0,191,255,0.18);
}
.dashboard-content .form-control option {
    background: #0B1120;
    color: #fff;
}
.dashboard-content select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath stroke='%2300BFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px 18px;
    padding-right: 44px;
    cursor: pointer;
}
.dashboard-content select.form-control:hover {
    border-color: #00BFFF;
}
.dashboard-content .form-control::placeholder {
    color: #6B7385;
    opacity: 1;
}
.dashboard-content textarea.form-control {
    min-height: 100px;
    resize: vertical;
}
.dashboard-content .form-control.is-invalid {
    border-color: var(--c-error);
}
.dashboard-content .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(255,73,92,0.1);
}

/* ================================================================
   HEADER NOTIFICATION BELL (non-dashboard pages) — same size as dashboard bell
   ================================================================ */
.header-notif-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: var(--icon-btn) !important; height: var(--icon-btn) !important;
    min-width: var(--icon-btn) !important; min-height: var(--icon-btn) !important;
    background: transparent !important;
    border: 1px solid var(--c-border) !important;
    border-radius: 50% !important; cursor: pointer !important; font-size: 1.15rem !important;
    transition: var(--trans-fast) !important; text-decoration: none !important;
    color: var(--c-txt1) !important; flex-shrink: 0 !important;
    box-sizing: border-box !important; padding: 0 !important;
    appearance: none !important; -webkit-appearance: none !important;
}
.header-notif-btn:hover {
    border-color: var(--c-primary) !important;
    color: var(--c-primary) !important;
}
.header-notif-count {
    position: absolute !important; top: -3px !important; right: -3px !important;
    min-width: 16px !important; height: 16px !important;
    background: var(--c-error) !important; color: #fff !important;
    border-radius: 999px !important; border: 2px solid #04040A !important;
    font-size: 0.6rem !important; font-weight: 700 !important;
    display: none !important; align-items: center !important; justify-content: center !important;
    padding: 0 4px !important; line-height: 12px !important;
    font-family: var(--mono) !important;
}
.header-notif-count.visible { display: inline-flex !important; }

@media (max-width: 600px) {
    .notif-overlay { padding: 12px !important; align-items: center !important; }
    .notif-detail-card { max-width: 100% !important; }
    .notif-kv-grid { grid-template-columns: 1fr !important; }

    /* ── Mobile profile dropdown card — position/size set by JS to bypass overflow clipping ── */
    .profile-dropdown {
        border-radius: 18px !important;
        box-shadow: 0 24px 70px rgba(0,0,0,0.85) !important;
        border-color: #223352 !important;
    }
    .pd-top {
        padding: 16px 16px 14px !important;
        gap: 13px !important;
    }
    .pd-avatar {
        width: 48px !important;
        height: 48px !important;
        border-width: 2px !important;
        border-color: #22D3EE !important;
        box-shadow: 0 0 0 4px rgba(34,211,238,0.10) !important;
    }
    .pd-name { font-size: 0.93rem !important; }
    .pd-email { font-size: 0.70rem !important; color: #5A7490 !important; }
    .pd-status-pill { font-size: 0.58rem !important; padding: 3px 8px !important; margin-top: 5px !important; }
    .pd-stats { gap: 0 !important; }
    .pd-stat { padding: 12px 14px !important; }
    .pd-stat-lbl { font-size: 0.60rem !important; color: #3A5470 !important; }
    .pd-stat-val { font-size: 0.90rem !important; }
    .pd-actions { padding: 12px 14px !important; gap: 8px !important; }
    .pd-btn-primary {
        padding: 10px 14px !important;
        font-size: 0.82rem !important;
        border-radius: 10px !important;
    }
    .pd-btn-logout {
        padding: 9px 14px !important;
        font-size: 0.80rem !important;
        border-radius: 10px !important;
    }
}

/* ================================================================
   8. AVATAR — same 42px circle, identical look to bell
   ================================================================ */
.user-avatar-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--icon-btn) !important;
    height: var(--icon-btn) !important;
    min-width: var(--icon-btn) !important;
    min-height: var(--icon-btn) !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--c-bg2) !important;
    border: 1px solid var(--c-border) !important;
    box-sizing: border-box !important;
    transition: var(--trans-fast) !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    text-decoration: none !important;
}
.user-avatar,
.user-avatar-btn img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    border: none !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}
.user-avatar-btn:hover {
    border-color: var(--c-primary) !important;
}

/* ================================================================
   9. CONTENT WRAPPER (centered, uniform gap)
   ================================================================ */
.dashboard-layout .dashboard-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: var(--sp-md) !important;
    gap: var(--sp-md) !important;
    background: transparent !important;
    box-sizing: border-box !important;
}
.dashboard-layout .dashboard-content > .d-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--sp-md) !important;
    width: 100% !important;
    margin: 0 !important;
    align-items: stretch !important;
}

/* ================================================================
   10. REFERRAL / SPLIT PROMO CARD (inline-styled in HTML)
   ================================================================ */
.referral-promo-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: var(--sp-md) !important;
    background: linear-gradient(135deg, rgba(0,200,150,0.12), rgba(0,150,255,0.05)) !important;
    border: 1px solid rgba(0,200,150,0.35) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: 0 4px 18px rgba(0,200,150,0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.referral-promo-card > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px !important;
    width: 100% !important;
}
.referral-promo-card > div > div:first-child {
    font-size: 2.2rem !important;
    line-height: 1 !important;
}
.referral-promo-card h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #00d9a3 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    text-shadow: none !important;
    text-align: center !important;
}
@media (min-width: 993px) {
    .referral-promo-card h3 { text-align: left !important; }
}
.referral-promo-card p {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font) !important;
    font-size: 0.85rem !important;
    color: var(--c-txt2) !important;
    line-height: 1.45 !important;
    text-align: center !important;
}
.referral-promo-card .btn,
.referral-promo-card .btn-primary,
.referral-promo-card a.btn {
    width: 100% !important;
    max-width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 20px !important;
    background: linear-gradient(135deg, #00C896, #0096cc) !important;
    border: none !important;
    border-radius: var(--r-md) !important;
    color: #000 !important;
    font-family: var(--font) !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(0,200,150,0.28) !important;
    transition: var(--trans-fast) !important;
    white-space: nowrap !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* ================================================================
   11. STAT CARDS GRID
   ----------------------------------------------------------------
   ALL 4 BASIC CARDS — identical size, identical text layout (centered).
   SPLIT-LOCKED — auto-pushed to bottom row, spans full width, same text style.
   ================================================================ */
.dashboard-content .stat-cards-grid,
.stat-cards-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 1fr !important;
    gap: var(--sp-sm) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
}
.stat-cards-grid .stat-card-split-locked {
    order: 99 !important;
    grid-column: 1 / -1 !important;
}

.stat-card {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    padding: 16px 14px !important;
    background: #0F0F18 !important;
    background-color: #0F0F18 !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-lg) !important;
    overflow: hidden !important;
    transition: border-color var(--trans-fast) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    gap: 12px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    box-sizing: border-box !important;
}
.stat-card::before,
.stat-card::after {
    content: none !important;
    display: none !important;
}
.stat-card:hover { border-color: var(--c-border-h) !important; }

/* Header row: icon on top, label below */
.stat-card-header {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}
.stat-card-icon {
    font-size: 1.2rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    filter: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(0,191,255,0.08) !important;
    border: 1px solid rgba(0,191,255,0.18) !important;
}
.stat-card-header h4 {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: var(--c-txt3) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    line-height: 1.2 !important;
    text-align: center !important;
    width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
.stat-card-value {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
    color: var(--c-txt1) !important;
    text-shadow: none !important;
    text-align: center !important;
    width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}
.stat-card-footer {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font) !important;
    font-size: 0.72rem !important;
    color: var(--c-txt3) !important;
    line-height: 1.35 !important;
    text-align: center !important;
    width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}
.stat-card-footer strong {
    color: var(--c-txt1) !important;
    font-family: var(--font) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
}
.stat-card-footer .btn-link,
.stat-card-footer a {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    color: var(--c-primary) !important;
    font-family: var(--font) !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    text-decoration: none !important;
}
.stat-card-footer .btn-link:hover,
.stat-card-footer a:hover { text-decoration: underline !important; }
.stat-card-footer .positive {
    color: var(--c-success) !important;
    font-family: var(--font) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
}
.stat-card-footer .negative {
    color: var(--c-error) !important;
    font-family: var(--font) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
}

/* Split-locked card variant — same text style, just gold accent */
.stat-card-split-locked {
    border-color: rgba(255,176,32,0.35) !important;
    background: linear-gradient(135deg, #0F0F18 0%, rgba(255,176,32,0.06) 100%) !important;
}
.stat-card-split-locked .stat-card-icon {
    background: rgba(255,176,32,0.1) !important;
    border-color: rgba(255,176,32,0.3) !important;
}
.stat-card-split-locked .stat-card-header h4 { color: var(--c-warning) !important; }
.stat-card-split-locked .stat-card-value { color: var(--c-warning) !important; }

/* ================================================================
   12. CARD (chart, referral stats)
   ================================================================ */
.dashboard-content .card,
.dashboard-grid-main .card {
    width: 100% !important;
    max-width: 100% !important;
    background: #0F0F18 !important;
    background-color: #0F0F18 !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-lg) !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.dashboard-content .card::before,
.dashboard-content .card::after {
    content: none !important;
    display: none !important;
}
.dashboard-content .card:hover { border-color: var(--c-border-h) !important; }

.dashboard-content .card .card-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px var(--sp-md) !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--c-border) !important;
    background: rgba(0,191,255,0.03) !important;
    text-align: center !important;
}
.dashboard-content .card .card-header h4 {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--c-txt1) !important;
    text-shadow: none !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    text-align: center !important;
    width: 100% !important;
}
.dashboard-content .card .card-body {
    padding: var(--sp-md) !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Chart container */
.card .chart-container {
    position: relative !important;
    width: 100% !important;
    height: 200px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.card .chart-container canvas {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
}

/* Tabs SM (chart range buttons) — compact */
.tabs-sm {
    display: inline-flex !important;
    background: #04040A !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-md) !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: auto !important;
    max-width: max-content !important;
}
.tab-btn {
    padding: 7px 12px !important;
    background: transparent !important;
    border: none !important;
    border-left: 1px solid var(--c-border) !important;
    color: var(--c-txt2) !important;
    font-family: var(--font) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: var(--trans-fast) !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 32px !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: none !important;
}
.tab-btn:first-child { border-left: none !important; }
.tab-btn:hover { color: var(--c-txt1) !important; background: rgba(0,191,255,0.06) !important; }
.tab-btn.active {
    color: #000 !important;
    background: linear-gradient(135deg, var(--c-primary), #0088cc) !important;
}

/* ================================================================
   13. DASHBOARD GRID MAIN (chart + referral stats + prices)
   ================================================================ */
.dashboard-content .dashboard-grid-main {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--sp-md) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
}
.dashboard-grid-main .d-flex.direction-column {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--sp-md) !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Referral stats inner 3-col mini grid */
.dashboard-grid-main .card-body .d-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.dashboard-grid-main .text-center {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-md) !important;
    padding: 12px 6px !important;
    text-align: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}
.dashboard-grid-main .text-secondary {
    display: block !important;
    font-family: var(--font) !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    color: var(--c-txt3) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    width: 100% !important;
}
.dashboard-grid-main .text-primary,
.dashboard-grid-main .text-success {
    display: block !important;
    font-family: var(--font) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--c-txt1) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
}
.dashboard-grid-main .text-success { color: var(--c-success) !important; }

.btn-link {
    color: var(--c-primary) !important;
    font-family: var(--font) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.btn-link:hover { text-decoration: underline !important; }

/* ================================================================
   14. PRICE WIDGET CARD (Live Crypto Prices) — strict 3-col grid
   ================================================================ */
.price-widget-card {
    width: 100% !important;
    max-width: 100% !important;
    background: #0F0F18 !important;
    background-color: #0F0F18 !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-lg) !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.price-widget-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 12px var(--sp-md) !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--c-border) !important;
    background: rgba(0,191,255,0.03) !important;
}
.price-widget-header h4 {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font) !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: var(--c-txt1) !important;
    text-shadow: none !important;
    line-height: 1.2 !important;
}
.price-widget-header .text-secondary {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--mono) !important;
    font-size: 0.65rem !important;
    color: var(--c-txt3) !important;
    line-height: 1.2 !important;
    text-align: right !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 60% !important;
}
.price-widget-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 6px !important;
    margin: 0 !important;
    flex-grow: 1 !important;
    background: transparent !important;
}
.crypto-price-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    column-gap: 10px !important;
    row-gap: 0 !important;
    align-items: center !important;
    width: 100% !important;
    padding: 9px 10px !important;
    margin: 0 !important;
    border-radius: var(--r-md) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    transition: var(--trans-fast) !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}
.crypto-price-item:hover { background: rgba(255,255,255,0.02) !important; }
.crypto-price-item .name {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    font-family: var(--font) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: var(--c-txt1) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}
.crypto-price-item .name span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
}
.crypto-price-item .icon {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}
.crypto-price-item .price {
    font-family: var(--font) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: var(--c-txt1) !important;
    text-align: right !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    letter-spacing: -0.01em !important;
}
.crypto-price-item .change {
    font-family: var(--font) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-align: right !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 56px !important;
    white-space: nowrap !important;
    color: var(--c-txt2) !important;
    letter-spacing: -0.01em !important;
}
.crypto-price-item .change.positive,
.crypto-price-item .change.text-success { color: var(--c-success) !important; }
.crypto-price-item .change.negative,
.crypto-price-item .change.text-error { color: var(--c-error) !important; }

/* Skeleton loaders */
.skeleton-loader {
    background: linear-gradient(90deg, #14141C 0%, #1A1A26 50%, #14141C 100%) !important;
    background-size: 200% 100% !important;
    animation: skel 1.4s ease-in-out infinite !important;
    border-radius: var(--r-sm) !important;
    margin: 4px 0 !important;
    height: 30px !important;
    width: 100% !important;
}
@keyframes skel {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ================================================================
   15. TABLES (Active Investments, Recent Deposits, Withdrawals)
   ================================================================ */
.table-container {
    width: 100% !important;
    max-width: 100% !important;
    background: #0F0F18 !important;
    background-color: #0F0F18 !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-lg) !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    box-sizing: border-box !important;
}
.table-container .table-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px var(--sp-md) !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--c-border) !important;
    background: rgba(0,191,255,0.03) !important;
    flex-shrink: 0 !important;
    text-align: center !important;
    width: 100% !important;
}
.table-container .table-header h4 {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--c-txt1) !important;
    text-shadow: none !important;
    text-align: center !important;
    width: 100% !important;
    line-height: 1.2 !important;
}
.table-container .table-header .btn,
.table-container .table-header .btn-primary,
.table-container .table-header a.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 11px 16px !important;
    background: linear-gradient(135deg, var(--c-primary), #0088cc) !important;
    border: none !important;
    border-radius: var(--r-md) !important;
    color: #000 !important;
    font-family: var(--font) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: var(--trans-fast) !important;
    white-space: nowrap !important;
    margin: 0 auto !important;
    line-height: 1 !important;
    min-height: 40px !important;
}
/* Desktop only: lay the table-header out as a horizontal strip with the
   title on the LEFT and the action button on the RIGHT, instead of the
   full-width stack that mobile uses. Fixes the dashboard "Start New
   Investment" button being stretched across the entire width on web. */
@media (min-width: 993px) {
    .dashboard-content .table-container .table-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: left !important;
        gap: var(--sp-md) !important;
    }
    .dashboard-content .table-container .table-header h4 {
        text-align: left !important;
        width: auto !important;
    }
    .dashboard-content .table-container .table-header .btn,
    .dashboard-content .table-container .table-header .btn-primary,
    .dashboard-content .table-container .table-header a.btn {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
}

.table-container .table-header .btn-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 11px 16px !important;
    background: rgba(0,191,255,0.06) !important;
    border: 1px solid rgba(0,191,255,0.3) !important;
    border-radius: var(--r-md) !important;
    color: var(--c-primary) !important;
    font-family: var(--font) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    margin: 0 !important;
    min-height: 40px !important;
}
.table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    flex-grow: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.responsive-table {
    width: 100% !important;
    min-width: 540px !important;
    border-collapse: collapse !important;
    font-family: var(--font) !important;
    margin: 0 !important;
    padding: 0 !important;
}
.responsive-table th,
.responsive-table td {
    padding: 11px var(--sp-md) !important;
    text-align: left !important;
    font-family: var(--font) !important;
    font-size: 0.85rem !important;
    border-bottom: 1px solid var(--c-border) !important;
    white-space: nowrap !important;
    color: var(--c-txt2) !important;
    vertical-align: middle !important;
    line-height: 1.3 !important;
}
.responsive-table th {
    background: rgba(0,0,0,0.3) !important;
    font-family: var(--font) !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    color: var(--c-txt3) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
}
.responsive-table tbody tr { transition: background var(--trans-fast) !important; }
.responsive-table tbody tr:hover { background: rgba(0,191,255,0.04) !important; }
.responsive-table tr:last-child td { border-bottom: none !important; }
.responsive-table .text-primary { color: var(--c-txt1) !important; font-weight: 700 !important; }
.responsive-table .text-success { color: var(--c-success) !important; font-weight: 700 !important; }
.responsive-table .text-error   { color: var(--c-error)   !important; font-weight: 700 !important; }
.responsive-table .text-warning { color: var(--c-warning) !important; font-weight: 700 !important; }

.empty-table-state {
    text-align: center !important;
    padding: 32px var(--sp-md) !important;
    color: var(--c-txt3) !important;
    font-family: var(--font) !important;
    font-size: 0.9rem !important;
    white-space: normal !important;
}

.text-crypto {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.text-crypto .icon {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
}

/* Progress bar */
.progress-bar {
    width: 100% !important;
    min-width: 80px !important;
    max-width: 220px !important;
    height: 6px !important;
    background: rgba(255,255,255,0.06) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    display: block !important;
    margin: 0 auto !important;
}
.progress-bar-inner {
    height: 100% !important;
    background: linear-gradient(90deg, var(--c-primary), var(--c-accent)) !important;
    border-radius: 999px !important;
    transition: width 0.4s ease !important;
}

/* ================================================================
   16. BADGES
   ================================================================ */
.badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 9px !important;
    font-family: var(--font) !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    line-height: 1.2 !important;
    border: 1px solid transparent !important;
    white-space: nowrap !important;
    vertical-align: baseline !important;
}
.badge-success { background: var(--c-accent-g) !important; color: var(--c-accent) !important; border-color: rgba(57,255,20,0.3) !important; }
.badge-warning { background: var(--c-warning-g) !important; color: var(--c-warning) !important; border-color: rgba(255,176,32,0.35) !important; }
.badge-error   { background: var(--c-error-g) !important; color: var(--c-error) !important; border-color: rgba(255,73,92,0.35) !important; }
.badge-primary { background: var(--c-primary-g) !important; color: var(--c-primary) !important; border-color: rgba(0,191,255,0.35) !important; }
.badge-secondary { background: rgba(255,255,255,0.04) !important; color: var(--c-txt2) !important; border-color: var(--c-border) !important; }

/* ================================================================
   17. UTILITY
   ================================================================ */
.hidden { display: none !important; }
.dashboard-content .gap-lg { gap: var(--sp-lg) !important; }
.dashboard-content .gap-md { gap: var(--sp-md) !important; }
.dashboard-content .gap-sm { gap: var(--sp-sm) !important; }
.dashboard-content .d-flex { display: flex !important; }
.dashboard-content .direction-column { flex-direction: column !important; }
.dashboard-content .justify-between { justify-content: space-between !important; }
.dashboard-content .align-center { align-items: center !important; }
.dashboard-content .text-center { text-align: center !important; }

/* Loader / spinner / toasts */
.spinner-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(2,2,8,0.75);
    backdrop-filter: blur(6px);
    align-items: center; justify-content: center;
}
.spinner-overlay.is-visible { display: flex !important; }
.spinner {
    width: 44px; height: 44px;
    border: 3px solid rgba(0,191,255,0.18);
    border-top-color: var(--c-primary);
    border-radius: 50%;
    animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#toast-container {
    position: fixed; bottom: 16px; right: 16px;
    z-index: 9998;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    background: var(--c-bg2);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-primary);
    border-radius: var(--r-md);
    padding: 12px 16px;
    color: var(--c-txt1);
    font-family: var(--font);
    font-size: 0.86rem;
    font-weight: 500;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    max-width: 320px;
}
.toast.toast-success, .toast-success { border-left-color: var(--c-accent) !important; }
.toast.toast-error,   .toast-error   { border-left-color: var(--c-error)  !important; }
.toast.toast-warning, .toast-warning { border-left-color: var(--c-warning) !important; }

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-6px); }
    60% { transform: translateY(-3px); }
}
@keyframes pulse-badge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,73,92,0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(255,73,92,0); }
}

/* ================================================================
   18. RESPONSIVE — TABLET (>= 600px)
   ================================================================ */
@media (min-width: 600px) {
    .dashboard-content { padding: var(--sp-lg) !important; gap: var(--sp-lg) !important; }

    .dashboard-header { height: 64px !important; padding: 0 var(--sp-lg) !important; }
    .welcome-message h1, .welcome-message #welcome-heading { font-size: 1.05rem !important; }
    .welcome-message p, .welcome-message #account-status { font-size: 0.78rem !important; }

    .stat-cards-grid { grid-template-columns: 1fr 1fr !important; gap: var(--sp-md) !important; }
    .stat-card { padding: 18px !important; }
    .stat-card-value { font-size: 1.65rem !important; }
    .stat-card-header h4 { font-size: 0.72rem !important; }

    .referral-promo-card {
        flex-direction: row !important;
        text-align: left !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: var(--sp-lg) !important;
        gap: 16px !important;
    }
    .referral-promo-card > div {
        flex-direction: row !important;
        text-align: left !important;
        align-items: center !important;
        gap: 14px !important;
        flex: 1 1 auto !important;
        width: auto !important;
    }
    .referral-promo-card h3 { text-align: left !important; font-size: 1.15rem !important; }
    .referral-promo-card p { text-align: left !important; }
    .referral-promo-card .btn,
    .referral-promo-card .btn-primary {
        width: auto !important;
        padding: 12px 24px !important;
    }

    .table-container .table-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: left !important;
    }
    .table-container .table-header h4 { text-align: left !important; width: auto !important; flex: 1 1 auto !important; }
    .table-container .table-header .btn,
    .table-container .table-header .btn-primary,
    .table-container .table-header .btn-link {
        width: auto !important;
        max-width: max-content !important;
        flex: 0 0 auto !important;
        padding: 9px 16px !important;
        min-height: 36px !important;
    }

    .dashboard-layout .dashboard-content > .d-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ================================================================
   19. RESPONSIVE — DESKTOP (>= 993px)
   ================================================================ */
@media (min-width: 993px) {
    .dashboard-layout {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
    }


    .dashboard-layout .dashboard-main {
        flex: 1 1 auto !important;
        height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-width: 0 !important;
    }

    .dashboard-layout .dashboard-header {
        height: var(--header-h) !important;
        padding: 0 var(--sp-xl) !important;
    }
    .mobile-menu-toggle { display: none !important; }
    .welcome-message h1, .welcome-message #welcome-heading { font-size: 1.2rem !important; }
    .welcome-message p, .welcome-message #account-status { font-size: 0.82rem !important; }

    .dashboard-layout .dashboard-content {
        padding: var(--sp-xl) !important;
        gap: var(--sp-xl) !important;
        max-width: 1400px !important;
    }

    /* 4 across, split-locked spans full width below */
    .stat-cards-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: var(--sp-lg) !important;
    }
    .stat-card { padding: 20px !important; }
    .stat-card-value { font-size: 1.75rem !important; }

    .dashboard-content .dashboard-grid-main {
        grid-template-columns: 2fr 1fr !important;
        gap: var(--sp-lg) !important;
    }

    .dashboard-layout .dashboard-content > .d-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--sp-lg) !important;
    }

    .notification-dropdown {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 0 !important;
        left: auto !important;
        width: 380px !important;
        max-width: 380px !important;
        margin: 0 !important;
    }

    .card .chart-container { height: 240px !important; }
    .responsive-table th,
    .responsive-table td { padding: 14px var(--sp-lg) !important; font-size: 0.88rem !important; }

    /* On desktop card headers can be left-aligned with tabs on right */
    .dashboard-content .card .card-header {
        flex-direction: row !important;
        justify-content: space-between !important;
        text-align: left !important;
        padding: 14px var(--sp-lg) !important;
    }
    .dashboard-content .card .card-header h4 { text-align: left !important; }
    .dashboard-content .card .card-body { padding: var(--sp-lg) !important; }
    .tabs-sm { margin: 0 !important; }
}

/* ================================================================
   20. WIDE DESKTOP (>= 1280px)
   ================================================================ */
@media (min-width: 1280px) {
    .stat-card-value { font-size: 1.9rem !important; }
    .card .chart-container { height: 280px !important; }
}

/* ================================================================
   21. SAFETY OVERRIDES — defeat aggressive mobile.css rules
   ================================================================ */
@media (max-width: 992px) {
    body { padding-bottom: 0 !important; }

    .dashboard-layout {
        flex-direction: column !important;
        display: block !important;
        height: auto !important;
        min-height: 100vh !important;
        background: #04040A !important;
    }

    .dashboard-layout .dashboard-main {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: #04040A !important;
    }

    main, section, article, header, aside { background-color: transparent !important; }
    .dashboard-main, .dashboard-content { background: #04040A !important; background-color: #04040A !important; }

    /* Mobile.css forces the tabs-sm to width:100% — ours stays compact, centered */
    .tabs-sm { width: max-content !important; max-width: max-content !important; }
    .tab-btn { width: auto !important; flex: 0 0 auto !important; }

    /* === MOBILE TABLE FIX — keep content inside screen, centered === */
    /* Force deposits/withdrawals grid to single column (overrides inline style) */
    .dashboard-content .d-grid,
    .dashboard-content section.d-grid,
    .dashboard-layout .dashboard-content > .d-grid,
    .dashboard-layout .dashboard-content > section.d-grid {
        grid-template-columns: 1fr !important;
    }

    .table-container { overflow: hidden !important; }
    .table-wrapper {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .responsive-table,
    .responsive-table thead,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table th,
    .responsive-table td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    /* High-specificity override to beat any min-width from mobile.css */
    .dashboard-layout .dashboard-content .table-wrapper .responsive-table,
    .responsive-table { min-width: 0 !important; }
    .responsive-table thead { display: none !important; }
    .responsive-table tbody tr {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid var(--c-border) !important;
        background: transparent !important;
    }
    .responsive-table tbody tr:last-child { border-bottom: none !important; }
    .responsive-table tbody td {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 10px var(--sp-md) !important;
        border: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.04) !important;
        white-space: normal !important;
        text-align: center !important;
        font-size: 0.9rem !important;
        color: var(--c-txt1) !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        line-height: 1.4 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .responsive-table tbody td:last-child { border-bottom: none !important; }
    .responsive-table tbody td::before {
        content: attr(data-label) !important;
        display: block !important;
        width: 100% !important;
        font-family: var(--font) !important;
        font-size: 0.62rem !important;
        font-weight: 700 !important;
        color: var(--c-txt3) !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        text-align: center !important;
        white-space: nowrap !important;
        margin-bottom: 2px !important;
    }
    .responsive-table tbody td:not([data-label])::before { content: '' !important; display: none !important; }
    .responsive-table .text-crypto { justify-content: center !important; }
    .responsive-table .progress-bar { max-width: 60% !important; margin: 0 auto !important; }
    /* Empty/loading rows: override the flex on td so text centers properly */
    .responsive-table tbody td.empty-table-state {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 28px var(--sp-md) !important;
        justify-content: center !important;
    }
    .responsive-table tbody td.empty-table-state::before { content: none !important; }
    .empty-table-state {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 28px var(--sp-md) !important;
    }
    .empty-table-state::before { content: none !important; }
}

/* ================================================================
   STICKY-AT-VIEWPORT HEADER  (parity with premium.html)
   ----------------------------------------------------------------
   `.dashboard-header { position: sticky }` was failing on mobile
   because the global `html, body { overflow-x: hidden }` rule
   throws the body into a non-scrolling-container quirk that
   breaks `position: sticky` bind. The premium page sidesteps the
   issue by using `position: fixed` — we do the same here so the
   header stays pinned to the viewport top while the page scrolls,
   on every dashboard page (deposit, withdraw, profile, support,
   referrals, notifications, packages, etc.).

   Pure CSS lift — no HTML, no JS, no content changes.
   ================================================================ */
.dashboard-layout .dashboard-header {
    position: fixed !important;
    top:   0 !important;
    left:  0 !important;
    right: 0 !important;
    width: auto !important; /* let left+right determine width on every viewport */
}
/* Push the page content below the now-out-of-flow header so the
   first screen of content is not hidden behind it. */
.dashboard-layout .dashboard-content {
    padding-top: calc(var(--header-h-mobile) + var(--sp-md)) !important;
}

@media (min-width: 993px) {
    /* On desktop the sidebar takes a fixed slot on the left, so the
       fixed header must start AFTER the sidebar — otherwise it would
       paint over it. */
    .dashboard-layout .dashboard-header {
        left:  var(--sidebar-w) !important;
        right: 0 !important;
        width: auto !important;
    }
    .dashboard-layout .dashboard-content {
        padding-top: calc(var(--header-h) + var(--sp-xl)) !important;
    }
}

/* Chat promo tile in the dual-promo strip is desktop-only. On mobile,
   only the split-deposit tile is visible — keeps the mobile flow as
   a single full-width hero promo. */
.dashboard-layout .dual-promo .chat-promo-card { display: none !important; }

/* ── Promo tile base layout (applies to BOTH split-deposit + live-chat
   tiles).  Identical structure / sizing — only colors differ between
   the two via the --split / --chat modifier classes below. */
.dashboard-layout .dual-promo .promo-tile {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 1.4rem !important;
    padding: 1.6rem 1.5rem !important;
    margin-bottom: 1.5rem !important;
    border-radius: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.dashboard-layout .dual-promo .promo-tile .promo-tile-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
}
.dashboard-layout .dual-promo .promo-tile .promo-tile-title {
    margin: 0 !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}
.dashboard-layout .dual-promo .promo-tile .promo-tile-lead {
    margin: 0 !important;
    color: #B6BFCC !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
}
.dashboard-layout .dual-promo .promo-tile .promo-tile-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0.3rem 0 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    color: #B6BFCC !important;
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
    text-align: left !important;
    width: 100% !important;
}
/* Flex layout puts ✓ inline at the very left of each row, no extra
   indent — bullets align flush with the lead paragraph above. */
.dashboard-layout .dual-promo .promo-tile .promo-tile-features li {
    display: flex !important;
    align-items: baseline !important;
    gap: 0.55rem !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
}
.dashboard-layout .dual-promo .promo-tile .promo-tile-features li::before {
    content: "✓" !important;
    position: static !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
}
/* Both CTAs are now full-width inside their tile (matches the original
   split-deposit button's stretched feel). align-self: stretch + 100% so
   the parent's flex stretching never gets confused. */
.dashboard-layout .dual-promo .promo-tile .promo-tile-cta {
    align-self: stretch !important;
    width: 100% !important;
    text-align: center !important;
    padding: 0.875rem 1.5rem !important;
    font-size: 0.95rem !important;
    border: none !important;
    white-space: nowrap !important;
    margin-top: 0.5rem !important;
}
@media (min-width: 993px) {
    .dashboard-layout .dual-promo .promo-tile .promo-tile-cta--chat {
        font-size: 0.85rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        line-height: 1 !important;
        color: #ffffff !important;
    }
}

/* Hide the chat tile on mobile — desktop-only promo. */
@media (max-width: 992px) {
    .dashboard-layout .dual-promo .promo-tile--chat { display: none !important; }
}

/* ── Split-deposit modifier — green/cyan palette (kept from before). */
.dashboard-layout .dual-promo .promo-tile--split {
    background: linear-gradient(135deg, rgba(0,200,150,0.16), rgba(0,150,255,0.07)) !important;
    border: 2px solid rgba(0,200,150,0.5) !important;
    box-shadow: 0 0 20px rgba(0,200,150,0.2) !important;
}
.dashboard-layout .dual-promo .promo-tile--split .promo-tile-title { color: #00C896 !important; }
.dashboard-layout .dual-promo .promo-tile--split .promo-tile-features li::before { color: #00C896 !important; }
.dashboard-layout .dual-promo .promo-tile--split .promo-tile-features strong { color: #00C896 !important; }
.dashboard-layout .dual-promo .promo-tile--split .promo-tile-lead strong { color: #00C896 !important; }
.dashboard-layout .dual-promo .promo-tile-cta--split {
    background: linear-gradient(135deg, #00C896, #0096CC) !important;
    box-shadow: 0 0 15px rgba(0,200,150,0.4) !important;
}

/* ── Live-chat modifier — cyan/blue palette. */
.dashboard-layout .dual-promo .promo-tile--chat {
    background: linear-gradient(135deg, rgba(0,191,255,0.16), rgba(29,78,216,0.06)) !important;
    border: 2px solid rgba(0,191,255,0.45) !important;
    box-shadow: 0 0 20px rgba(0,191,255,0.18) !important;
}
.dashboard-layout .dual-promo .promo-tile--chat .promo-tile-title { color: #00BFFF !important; }
.dashboard-layout .dual-promo .promo-tile--chat .promo-tile-features li::before { color: #00BFFF !important; }
.dashboard-layout .dual-promo .promo-tile--chat .promo-tile-features strong { color: #00BFFF !important; }
.dashboard-layout .dual-promo .promo-tile--chat .promo-tile-lead strong { color: #00BFFF !important; }
.dashboard-layout .dual-promo .promo-tile-cta--chat {
    background: linear-gradient(135deg, #00BFFF, #1D4ED8) !important;
    box-shadow: 0 0 15px rgba(0,191,255,0.4) !important;
}

/* ── Mobile: centre the Performance chart card's header (title + tabs)
   so the new multi-series chart's header reads cleanly on phones.
   Strictly mobile-only — desktop keeps its split-row header layout. */
@media (max-width: 992px) {
    .dashboard-layout .dashboard-content .dashboard-grid-main .card .card-header {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 5px !important;
    }
    .dashboard-layout .dashboard-content .dashboard-grid-main .card .card-header h4 {
        margin: 0 !important;
        text-align: center !important;
    }
    .dashboard-layout .dashboard-content .dashboard-grid-main .card .card-header .tabs-sm {
        display: inline-flex !important;
        justify-content: center !important;
    }

    /* mobile.css force-centres everything inside .referral-promo-card, but
       our new bullet list looks broken when each "✓ feature text" line is
       centre-aligned (the ✓ sits at left:0 absolute while the text drifts
       to the middle). Keep the features left-aligned on mobile — the
       title, lead paragraph, and button keep their centred behaviour. */
    .dashboard-layout .dual-promo .promo-tile .promo-tile-features,
    .dashboard-layout .dual-promo .promo-tile .promo-tile-features li {
        text-align: left !important;
    }
}

/* ================================================================
   DESKTOP-ONLY DASHBOARD ENHANCEMENTS  (>= 993px)
   ----------------------------------------------------------------
   Everything in this block is scoped strictly to the desktop break
   point so the mobile build stays 100% as-is.
   ================================================================ */
@media (min-width: 993px) {

    /* ── 2. Dual promo strip — desktop grid layout.
       Both tiles share the .promo-tile structure defined OUTSIDE this
       @media block (so mobile shows the same content vertically), and
       here we just turn the wrapper into a 2-col grid that stretches
       both tiles to equal height. */
    .dashboard-layout .dual-promo {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: var(--sp-md) !important;
        margin-bottom: var(--sp-lg) !important;
        align-items: stretch !important;
    }
    .dashboard-layout .dual-promo .promo-tile {
        margin-bottom: 0 !important;
        height: 100% !important;
    }

    /* ── 3. Recent Deposits / Withdrawals — kill row overflow ────── */

    /* The side-by-side recent-deposits / recent-withdrawals tables sit
       inside a 1fr 1fr grid. The base `.responsive-table { min-width: 540px }`
       rule forces them to overflow their columns. Drop that floor inside
       the dual grid and tighten cell padding so all 4 columns fit. */
    .dashboard-layout .dashboard-content > .d-grid > .table-container .table-wrapper {
        overflow-x: hidden !important;
    }
    .dashboard-layout .dashboard-content > .d-grid > .table-container .responsive-table {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: auto !important;
    }
    .dashboard-layout .dashboard-content > .d-grid > .table-container .responsive-table th,
    .dashboard-layout .dashboard-content > .d-grid > .table-container .responsive-table td {
        padding: 10px 10px !important;
        font-size: 0.78rem !important;
        white-space: nowrap !important;
    }
    .dashboard-layout .dashboard-content > .d-grid > .table-container .responsive-table td .icon,
    .dashboard-layout .dashboard-content > .d-grid > .table-container .responsive-table td img {
        width: 18px !important;
        height: 18px !important;
        margin-right: 6px !important;
        vertical-align: -3px !important;
    }
    .dashboard-layout .dashboard-content > .d-grid > .table-container .responsive-table td .badge,
    .dashboard-layout .dashboard-content > .d-grid > .table-container .responsive-table td span.badge {
        font-size: 0.7rem !important;
        padding: 2px 8px !important;
    }

    /* ── 4. Live Crypto Prices — 2 cols × 3 rows of square-ish tiles ── */

    .dashboard-layout .price-widget-card {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }
    .dashboard-layout .price-widget-card .price-widget-list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-auto-rows: 1fr !important;
        gap: 10px !important;
        flex: 1 1 auto !important;
        padding: 0 !important;
    }
    /* New layout: column-stack with the LOGO front-and-centre at the top,
       price centred below, change % centred at the bottom. No background
       fills — only a barely-visible border defines the resting tile.
       A cyan glow + brighter border only appears on hover. */
    .dashboard-layout .price-widget-card .crypto-price-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 14px 10px !important;
        background: transparent !important;
        border: 1px solid rgba(0,191,255,0.10) !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        min-height: 130px !important;
        height: 100% !important;
        transition: border-color 0.18s ease, box-shadow 0.22s ease, transform 0.18s ease !important;
    }
    .dashboard-layout .price-widget-card .crypto-price-item:hover {
        background: transparent !important;
        border-color: rgba(0,191,255,0.6) !important;
        box-shadow: 0 0 18px rgba(0,191,255,0.22), 0 0 1px rgba(0,191,255,0.35) inset !important;
        transform: translateY(-1px) !important;
    }
    /* Top row: icon centred, label text hidden (logo speaks for itself). */
    .dashboard-layout .price-widget-card .crypto-price-item .name {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        width: 100% !important;
    }
    .dashboard-layout .price-widget-card .crypto-price-item .name span {
        display: none !important; /* hide the crypto name text — icon-only */
    }
    /* Logo big enough to fill roughly half the tile's height. */
    .dashboard-layout .price-widget-card .crypto-price-item .name .icon,
    .dashboard-layout .price-widget-card .crypto-price-item .name img {
        width: 54px !important;
        height: 54px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        display: block !important;
    }
    /* Price — centred line. */
    .dashboard-layout .price-widget-card .crypto-price-item .price {
        font-family: var(--font) !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: var(--c-txt1) !important;
        text-align: center !important;
        width: 100% !important;
    }
    /* Change % — centred line below price. */
    .dashboard-layout .price-widget-card .crypto-price-item .change {
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        text-align: center !important;
        width: 100% !important;
    }
    /* Skeleton loaders inherit the new tile height. */
    .dashboard-layout .price-widget-card .price-widget-list .skeleton-loader {
        width: 100% !important;
        height: 130px !important;
        min-height: 130px !important;
        border-radius: 14px !important;
    }

    /* ── 5. Themed scrollbars (DARK — match the page background) ───── */

    /* Track + thumb both sit in the same dark family as the page bg
       (#04040A) so the scrollbar disappears into the chrome instead of
       drawing attention to itself. Only the thumb is one shade lighter
       than the track so the user can still grab it. */
    html, body {
        scrollbar-color: #1A1F2E #04040A;
        scrollbar-width: thin;
    }
    *::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    *::-webkit-scrollbar-track {
        background: #04040A !important;
        border-radius: 0 !important;
    }
    *::-webkit-scrollbar-thumb {
        background: #1A1F2E !important;
        border: 2px solid #04040A !important;
        border-radius: 6px !important;
    }
    *::-webkit-scrollbar-thumb:hover {
        background: #2A3142 !important;
    }
    *::-webkit-scrollbar-corner { background: #04040A !important; }
    /* ── 6. Bulletproof table row dividers (desktop only) ──────────
       The base rule  `.responsive-table td { border-bottom: 1px solid }`
       produces broken / mis-aligned lines whenever rows have different
       heights (badge cells push some rows taller than others). Switch
       to an inset box-shadow on each `tr` — that's a SINGLE 1-pixel
       horizontal line stretching the full row width regardless of cell
       padding, alignment, or border-collapse rounding errors. We also
       neutralise the per-cell `border-bottom` so the two systems can't
       fight each other. */
    .dashboard-layout .dashboard-content .table-container .responsive-table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }
    .dashboard-layout .dashboard-content .table-container .responsive-table td,
    .dashboard-layout .dashboard-content .table-container .responsive-table th {
        border-bottom: none !important;
        border-top: none !important;
    }
    .dashboard-layout .dashboard-content .table-container .responsive-table tbody tr {
        box-shadow: inset 0 -1px 0 0 rgba(255,255,255,0.08) !important;
    }
    .dashboard-layout .dashboard-content .table-container .responsive-table tbody tr:last-child {
        box-shadow: none !important;
    }
    .dashboard-layout .dashboard-content .table-container .responsive-table tbody tr:hover {
        background: rgba(0,191,255,0.04) !important;
        box-shadow: inset 0 -1px 0 0 rgba(0,191,255,0.18) !important;
    }
    /* Underline below the header row, same width / same line as body rows. */
    .dashboard-layout .dashboard-content .table-container .responsive-table thead tr {
        box-shadow: inset 0 -1px 0 0 rgba(255,255,255,0.10) !important;
    }
}

/* ================================================================
   DESKTOP ONLY — chat card: restore its own colors after inheriting
   referral-promo-card rules for title/button text styling.
   Mobile untouched (min-width: 993px guard).
   ================================================================ */
@media (min-width: 993px) {
    .dashboard-layout .dual-promo .chat-promo-card.referral-promo-card {
        background: linear-gradient(135deg, rgba(0,191,255,0.16), rgba(29,78,216,0.06)) !important;
        border: 2px solid rgba(0,191,255,0.45) !important;
        box-shadow: 0 0 20px rgba(0,191,255,0.18) !important;
        text-align: left !important;
    }
    .dashboard-layout .dual-promo .chat-promo-card.referral-promo-card > div {
        text-align: left !important;
    }
    .dashboard-layout .dual-promo .chat-promo-card.referral-promo-card h3,
    .dashboard-layout .dual-promo .chat-promo-card.referral-promo-card p {
        text-align: left !important;
    }
    .dashboard-layout .dual-promo .chat-promo-card.referral-promo-card .btn.promo-tile-cta--chat {
        background: linear-gradient(135deg, #00BFFF, #1D4ED8) !important;
        box-shadow: 0 0 15px rgba(0,191,255,0.4) !important;
        color: #ffffff !important;
    }
}

/* ================================================================
   GLOBAL MODAL OVERLAY (confirmations, password, delete, etc.)
   Mobile-first: bottom-sheet on small screens, centered card ≥769px
   ================================================================ */

/* ── Overlay ── */
.modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 80000 !important;
    display: none !important;
    align-items: flex-end !important;
    justify-content: center !important;
    background: rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 0 !important;
    overscroll-behavior: contain;
}

.modal.is-visible {
    display: flex !important;
}

/* ── Card ── */
.modal-content {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    max-height: 90dvh !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--c-bg2, #111120) !important;
    border: 1px solid var(--c-border, rgba(255,255,255,0.08)) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 30px rgba(0,0,0,0.5) !important;
    overflow: hidden !important;
    animation: modalSlideUp 0.3s ease-out !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

@keyframes modalSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ── Header ── */
.modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 16px 18px !important;
    border-bottom: 1px solid var(--c-border, rgba(255,255,255,0.08)) !important;
    flex-shrink: 0 !important;
}

.modal-header h3 {
    margin: 0 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--c-txt1, #F0F2F5) !important;
    font-family: var(--font, 'Rajdhani', system-ui, sans-serif) !important;
}

.modal-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--c-txt2, #A0AEC0) !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 1.3rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s !important;
    flex-shrink: 0 !important;
}

.modal-close:hover {
    background: rgba(255,255,255,0.08) !important;
    color: var(--c-txt1, #F0F2F5) !important;
}

/* ── Body ── */
.modal-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 18px !important;
    -webkit-overflow-scrolling: touch;
}

/* ── Footer ── */
.modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 14px 18px !important;
    border-top: 1px solid var(--c-border, rgba(255,255,255,0.08)) !important;
    background: rgba(255,255,255,0.02) !important;
    flex-shrink: 0 !important;
}

.modal-footer .btn {
    min-width: 100px !important;
}

/* ── Scroll lock when any .modal.is-visible is in the page ── */
body:has(.modal.is-visible),
html:has(.modal.is-visible) {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
}

/* ================================================================
   DESKTOP (≥769px): centered floating card with fade+scale
   ================================================================ */
@media (min-width: 769px) {
    .modal {
        align-items: center !important;
        padding: 24px !important;
    }

    .modal-content {
        width: auto !important;
        min-width: 420px !important;
        max-width: 520px !important;
        border-radius: 16px !important;
        box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
        animation: modalFadeIn 0.25s ease-out !important;
    }

    @keyframes modalFadeIn {
        from { opacity: 0; transform: scale(0.95) translateY(8px); }
        to   { opacity: 1; transform: none; }
    }

    .modal-footer .btn {
        min-width: auto !important;
    }
}