/* ============================================================
   PLATFORM PROCESSING — Design System
   Salesforce Invoice CRM Dashboard Style
   ============================================================ */

/* ---- 1. DESIGN TOKENS ---- */
:root {
    /* -- Backgrounds -- */
    --color-bg-base:        #111315;
    --color-bg-surface:     #1D2125;
    --color-bg-elevated:    #282C31;
    --color-bg-overlay:     #1A1D21;
    --color-bg-hover:       #2A2E33;
    --color-bg-white-card:  #FFFFFF;
    --color-bg-white-hover: #F9FAFB;
    --color-bg-white-head:  #F9FAFB;

    /* -- Borders -- */
    --color-border:         rgba(255, 255, 255, 0.08);
    --color-border-strong:  rgba(255, 255, 255, 0.12);
    --color-border-light:   #E5E7EB;

    /* -- Accent -- */
    --color-accent:         #8FFF00;
    --color-accent-dim:     rgba(143, 255, 0, 0.15);
    --color-accent-hover:   #7AE000;
    --color-accent2:        #FD7557;
    --color-accent2-dim:    rgba(253, 117, 87, 0.15);

    /* -- Text -- */
    --color-text-primary:   #FFFFFF;
    --color-text-secondary: #8A8F98;
    --color-text-muted:     #5A5F66;
    --color-text-on-accent: #111315;
    --color-text-dark:      #1A1D21;
    --color-text-dark-sec:  #6B7280;

    /* -- Status -- */
    --color-success:        #34D399;
    --color-success-dim:    rgba(52, 211, 153, 0.12);
    --color-warning:        #FBBF24;
    --color-warning-dim:    rgba(251, 191, 36, 0.12);
    --color-danger:         #F87171;
    --color-danger-dim:     rgba(248, 113, 113, 0.12);
    --color-info:           #60A5FA;
    --color-info-dim:       rgba(96, 165, 250, 0.12);
    --color-online:         #34D399;
    --color-offline:        #5A5F66;

    /* -- Light-theme badges -- */
    --badge-success-bg:     #ECFDF5;
    --badge-success-text:   #059669;
    --badge-warning-bg:     #FFFBEB;
    --badge-warning-text:   #D97706;
    --badge-danger-bg:      #FEF2F2;
    --badge-danger-text:    #DC2626;
    --badge-info-bg:        #EFF6FF;
    --badge-info-text:      #2563EB;

    /* -- Shadows -- */
    --shadow-sm:            0 1px 3px rgba(0,0,0,0.08);
    --shadow-card:          0 4px 24px rgba(0,0,0,0.3);
    --shadow-dropdown:      0 8px 32px rgba(0,0,0,0.4);
    --shadow-modal:         0 24px 80px rgba(0,0,0,0.6);
    --shadow-light-card:    0 1px 3px rgba(0,0,0,0.08);

/* ---- LIGHT THEME ---- */
[data-theme="light"] {
    /* Backgrounds */
    --color-bg-base:        #F8FAFC;
    --color-bg-surface:     #FFFFFF;
    --color-bg-elevated:    #F1F5F9;
    --color-bg-overlay:     #F8FAFC;
    --color-bg-hover:       #F1F5F9;
    --color-bg-white-card:  #FFFFFF;
    --color-bg-white-hover: #F8FAFC;
    --color-bg-white-head:  #F8FAFC;

    /* Borders */
    --color-border:         #E2E8F0;
    --color-border-strong:  #CBD5E1;
    --color-border-light:   #E2E8F0;

    /* Accent — Indigo */
    --color-accent:         #4F46E5;
    --color-accent-dim:     #EEF2FF;
    --color-accent-hover:   #4338CA;
    --color-accent2:        #DC2626;
    --color-accent2-dim:    #FEF2F2;

    /* Text */
    --color-text-primary:   #0F172A;
    --color-text-secondary: #64748B;
    --color-text-muted:     #94A3B8;
    --color-text-on-accent: #FFFFFF;
    --color-text-dark:      #0F172A;
    --color-text-dark-sec:  #64748B;

    /* Status */
    --color-success:        #16A34A;
    --color-success-dim:    #F0FDF4;
    --color-warning:        #D97706;
    --color-warning-dim:    #FFFBEB;
    --color-danger:         #DC2626;
    --color-danger-dim:     #FEF2F2;
    --color-info:           #2563EB;
    --color-info-dim:       #EFF6FF;
    --color-online:         #16A34A;
    --color-offline:        #94A3B8;

    /* Shadows */
    --shadow-sm:            0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-card:          0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-dropdown:      0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);
    --shadow-modal:         0 20px 60px rgba(0,0,0,0.12);
    --shadow-light-card:    0 1px 3px rgba(0,0,0,0.06);
}

    /* -- Radii -- */
    --radius-xs:    3px;
    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    14px;
    --radius-xl:    18px;
    --radius-2xl:   24px;
    --radius-full:  9999px;

    /* -- Spacing -- */
    --space-1:      4px;
    --space-2:      8px;
    --space-3:      12px;
    --space-4:      16px;
    --space-5:      20px;
    --space-6:      24px;
    --space-8:      32px;
    --space-10:     40px;
    --space-12:     48px;

    /* -- Typography -- */
    /* DM Sans (Latin) → Inter (full Cyrillic support, same modern geometric feel) → system fallbacks */
    --font-family:  'DM Sans', 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-cyr: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-xs:      11px;
    --font-sm:      12px;
    --font-base:    13px;
    --font-md:      14px;
    --font-lg:      16px;
    --font-xl:      20px;
    --font-2xl:     28px;
    --font-3xl:     36px;
    --font-4xl:     48px;

    /* -- Layout -- */
    --topbar-h:     56px;

    /* -- Transitions -- */
    --transition:   150ms ease;
    --transition-md: 200ms ease;
    --transition-spring: 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- 2. BASE RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    font-family: var(--font-family);
    font-size: var(--font-base);
    font-weight: 500;
    background-color: #111315;
    background-image:
        radial-gradient(ellipse 80% 60% at 15% 5%, rgba(45, 50, 56, 0.6) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 85% 0%, rgba(143, 255, 0, 0.03) 0%, transparent 60%),
        radial-gradient(ellipse 100% 80% at 50% 20%, rgba(35, 39, 44, 0.5) 0%, transparent 70%),
        radial-gradient(ellipse 120% 120% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.3) 100%);
    background-attachment: fixed;
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
}

/* Noise texture overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* Content above noise */
#app { position: relative; z-index: 1; }

/* ============================================================
   LIGHT THEME — INDIGO ACCENT (#4F46E5)
   ============================================================ */
[data-theme="light"] body,
html[data-theme="light"] body {
    background-color: #F8FAFC;
    background-image: none;
    color: #0F172A;
}
[data-theme="light"] body::after { display: none; }
[data-theme="light"] select, [data-theme="light"] select option { background: #FFFFFF; color: #0F172A; }

/* -- Topbar -- */
[data-theme="light"] .topbar { background: rgba(255,255,255,0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid #E2E8F0; }
[data-theme="light"] .topbar__pill { background: #F1F5F9; border-color: #E2E8F0; box-shadow: inset 0 1px 2px rgba(0,0,0,0.03); }
[data-theme="light"] .nav-item { color: #64748B; }
[data-theme="light"] .nav-item:hover { color: #0F172A; background: #F1F5F9; }
[data-theme="light"] .nav-item.active { background: #4F46E5; color: #FFFFFF; }
[data-theme="light"] .topbar__icon-btn { background: #F1F5F9; color: #64748B; }
[data-theme="light"] .topbar__icon-btn:hover { background: #E2E8F0; color: #0F172A; }
[data-theme="light"] .topbar__icon-btn--active { background: #4F46E5 !important; color: #FFFFFF !important; }
[data-theme="light"] .topbar__avatar { border-color: rgba(79,70,229,0.4); }
[data-theme="light"] .topbar__logo svg circle, [data-theme="light"] .topbar__logo svg ellipse { stroke: #0F172A; }
[data-theme="light"] .topbar__logo svg circle:last-child { fill: #4F46E5; stroke: none; }
[data-theme="light"] .topbar__title { background: linear-gradient(90deg, #0F172A 0%, #0F172A 40%, #4F46E5 60%, #0F172A 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; }
[data-theme="light"] .topbar__theme-toggle { background: #F1F5F9; color: #64748B; }
[data-theme="light"] .topbar__theme-toggle:hover { background: #E2E8F0; color: #4F46E5; }

/* -- Profile balance card -- */
[data-theme="light"] .bal-card,
[data-theme="light"] .trf-card,
[data-theme="light"] .rates-card,
[data-theme="light"] .act-table-wrap { background: #FFFFFF; border-color: #E2E8F0; box-shadow: var(--shadow-card); }
[data-theme="light"] .bal-section { border-color: #F1F5F9; }
[data-theme="light"] .bal-label { color: #64748B; }
[data-theme="light"] .bal-number { color: #0F172A; }
[data-theme="light"] .bal-prefix { color: #94A3B8; }
[data-theme="light"] .bal-sub { color: #94A3B8; }
[data-theme="light"] .bal-user-name { color: #0F172A; }
[data-theme="light"] .bal-user-role { color: #94A3B8; }
[data-theme="light"] .bal-user-avatar { border-color: rgba(79,70,229,0.3); }
[data-theme="light"] .bal-col-accent { background: #EEF2FF; border-left-color: #C7D2FE; }
[data-theme="light"] .bal-number-accent { color: #4F46E5; }
[data-theme="light"] .bal-label-accent { color: #4F46E5; }
[data-theme="light"] .bal-deposit-bar { background: #E0E7FF; }
[data-theme="light"] .bal-deposit-fill { background: #4F46E5; }
[data-theme="light"] .bal-deposit-ok { color: #15803D; }
[data-theme="light"] .bal-deposit-warn { color: #B45309; }
[data-theme="light"] .bal-usdt-tag { background: #EEF2FF; color: #4F46E5; }
[data-theme="light"] .bal-usdt-icon circle { stroke: #4F46E5; }
[data-theme="light"] .bal-usdt-icon path { fill: #4F46E5; }
[data-theme="light"] .trf-title { color: #0F172A; }
[data-theme="light"] .trf-hint { color: #94A3B8; }
[data-theme="light"] .trf-icon-on { background: #EEF2FF; color: #4F46E5; }
[data-theme="light"] .rates-title { color: #0F172A; }
[data-theme="light"] .rates-val { color: #0F172A; }
[data-theme="light"] .rates-badge { background: #F1F5F9; color: #0F172A; }
[data-theme="light"] .rates-time { color: #94A3B8; background: #F1F5F9; }
[data-theme="light"] .rates-arrow { color: #94A3B8; }

/* -- Stat cards (pg-*) -- */
[data-theme="light"] .pg-stats { background: #FFFFFF; border-color: #E2E8F0; box-shadow: var(--shadow-card); }
[data-theme="light"] .pg-stat { border-color: #F1F5F9; }
[data-theme="light"] .pg-stat-label { color: #64748B; }
[data-theme="light"] .pg-stat-num { color: #0F172A; }
[data-theme="light"] .pg-stat-num--warn { color: #B45309; }
[data-theme="light"] .pg-stat-num--ok { color: #15803D; }
[data-theme="light"] .pg-stat-num--accent { color: #4F46E5; }
[data-theme="light"] .pg-stat-sub { color: #94A3B8; }
[data-theme="light"] .pg-stat--accent { background: #EEF2FF; }

/* -- Toolbar -- */
[data-theme="light"] .pg-search { background: #FFFFFF; border-color: #E2E8F0; }
[data-theme="light"] .pg-search input { color: #0F172A; }
[data-theme="light"] .pg-search input::placeholder { color: #94A3B8; }
[data-theme="light"] .pg-search i { color: #94A3B8; }
[data-theme="light"] .pg-search:focus-within { border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
[data-theme="light"] .pg-select { background: #FFFFFF; border-color: #E2E8F0; color: #0F172A; }
[data-theme="light"] .pg-view-toggle { border-color: #E2E8F0; }
[data-theme="light"] .pg-view-btn { color: #94A3B8; }
[data-theme="light"] .pg-view-btn:hover { color: #0F172A; background: #F1F5F9; }
[data-theme="light"] .pg-view-btn--active { background: #EEF2FF; color: #4F46E5; }

/* -- Table -- */
[data-theme="light"] .pg-table-wrap { background: #FFFFFF; border-color: #E2E8F0; box-shadow: var(--shadow-card); }
[data-theme="light"] .pg-table thead th { color: #64748B; border-color: #F1F5F9; }
[data-theme="light"] .pg-table tbody tr { border-color: #F1F5F9; }
[data-theme="light"] .pg-table tbody tr:hover { background: #F8FAFC; }
[data-theme="light"] .pg-table tbody td { color: #0F172A; }
[data-theme="light"] .pg-table-mono { color: #64748B; }
[data-theme="light"] .pg-table-muted { color: #94A3B8; }
[data-theme="light"] .pg-table-action { background: #F1F5F9; color: #64748B; }
[data-theme="light"] .pg-table-action:hover { background: #E2E8F0; color: #0F172A; }

/* -- Grid cards -- */
[data-theme="light"] .pg-grid-card { background: #FFFFFF; border-color: #E2E8F0; box-shadow: var(--shadow-card); }
[data-theme="light"] .pg-grid-card:hover { background: #F8FAFC; box-shadow: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04); }
[data-theme="light"] .pg-grid-card--warn { border-left-color: #D97706; }
[data-theme="light"] .pg-grid-card--ok { border-left-color: #16A34A; }
[data-theme="light"] .pg-grid-card--err { border-left-color: #DC2626; }
[data-theme="light"] .pg-grid-card-merchant { color: #0F172A; }
[data-theme="light"] .pg-grid-card-id { color: #94A3B8; }
[data-theme="light"] .pg-grid-row { color: #64748B; }
[data-theme="light"] .pg-grid-row span:last-child { color: #0F172A; }
[data-theme="light"] .pg-grid-amount { color: #4F46E5 !important; }
[data-theme="light"] .pg-grid-card-head { border-color: #F1F5F9; }
[data-theme="light"] .pg-grid-card-foot { border-color: #F1F5F9; }

/* -- Pagination -- */
[data-theme="light"] .pg-pagination-info { color: #94A3B8; }
[data-theme="light"] .pg-page-btn { border-color: #E2E8F0; color: #64748B; }
[data-theme="light"] .pg-page-btn:hover:not(:disabled) { background: #F1F5F9; color: #0F172A; }
[data-theme="light"] .pg-page-current { background: #4F46E5; color: #FFFFFF; }

/* -- Tabs -- */
[data-theme="light"] .act-tabs-wrap { background: #F1F5F9; }
[data-theme="light"] .act-tab { color: #64748B; }
[data-theme="light"] .act-tab:hover { color: #0F172A; background: #E2E8F0; }
[data-theme="light"] .act-tab-active { background: #4F46E5 !important; color: #FFFFFF !important; }
[data-theme="light"] .act-empty i { color: #CBD5E1; }
[data-theme="light"] .act-empty div { color: #64748B; }
[data-theme="light"] .act-empty-sub { color: #94A3B8; }

/* -- Buttons -- */
[data-theme="light"] .bal-btn-primary { background: #4F46E5; color: #FFFFFF; }
[data-theme="light"] .bal-btn-primary:hover { background: #4338CA; box-shadow: 0 4px 12px rgba(79,70,229,0.2); }
[data-theme="light"] .bal-btn-outline { background: #FFFFFF; border-color: #E2E8F0; color: #0F172A; }
[data-theme="light"] .bal-btn-outline:hover { background: #F8FAFC; border-color: #4F46E5; color: #4F46E5; }
[data-theme="light"] .bal-eye-btn { color: #94A3B8; }
[data-theme="light"] .bal-eye-btn:hover { color: #64748B; }

/* -- Badges -- */
[data-theme="light"] .badge-success { background: #F0FDF4; color: #15803D; border-color: #BBF7D0; }
[data-theme="light"] .badge-warning { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
[data-theme="light"] .badge-danger { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
[data-theme="light"] .badge-info { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
[data-theme="light"] .badge-muted { background: #F1F5F9; color: #64748B; border-color: #E2E8F0; }
[data-theme="light"] .badge-admin { background: #EEF2FF; color: #4F46E5; border-color: #C7D2FE; }
[data-theme="light"] .badge-trader { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }

/* -- Modals / Popups -- */
[data-theme="light"] .modal-backdrop { background: rgba(15,23,42,0.3); }
[data-theme="light"] .glass-modal { background: #FFFFFF; border-color: #E2E8F0; box-shadow: var(--shadow-modal); }
[data-theme="light"] .gm-title { color: #0F172A; }
[data-theme="light"] .gm-body { color: #0F172A; }
[data-theme="light"] .pop { background: #FFFFFF; border-color: #E2E8F0; box-shadow: var(--shadow-dropdown); }
[data-theme="light"] .pop__item { color: #64748B; }
[data-theme="light"] .pop__item:hover { background: #F8FAFC; color: #0F172A; }
[data-theme="light"] .pop__hr { background: #F1F5F9; }
[data-theme="light"] .pop__uname { color: #0F172A; }
[data-theme="light"] .pop__urole { color: #94A3B8; }
[data-theme="light"] .notif-pop { background: #FFFFFF; border-color: #E2E8F0; box-shadow: var(--shadow-dropdown); }
[data-theme="light"] .notif-pop-title { color: #0F172A; }
[data-theme="light"] .notif-pop-mark { color: #4F46E5; }
[data-theme="light"] .notif-pop-empty { color: #CBD5E1; }

/* -- Docs -- */
[data-theme="light"] .docs-nav { background: #FFFFFF; border-color: #E2E8F0; box-shadow: var(--shadow-card); }
[data-theme="light"] .docs-nav-title { color: #94A3B8; }
[data-theme="light"] .docs-nav-item { color: #64748B; }
[data-theme="light"] .docs-nav-item:hover { background: #F8FAFC; color: #0F172A; }
[data-theme="light"] .docs-nav-item--active { background: #4F46E5 !important; color: #FFFFFF !important; }
[data-theme="light"] .docs-content { background: #FFFFFF; border-color: #E2E8F0; box-shadow: var(--shadow-card); }
[data-theme="light"] .docs-content-title { color: #0F172A; }
[data-theme="light"] .docs-content-badge { background: #EEF2FF; color: #4F46E5; }
[data-theme="light"] .docs-section h2 { color: #0F172A; }
[data-theme="light"] .docs-section h3 { color: #334155; }
[data-theme="light"] .docs-section p, [data-theme="light"] .docs-section li { color: #475569; }
[data-theme="light"] .docs-section strong { color: #0F172A; }
[data-theme="light"] .docs-table-wrap { background: #F8FAFC; border-color: #E2E8F0; }
[data-theme="light"] .docs-table th { color: #64748B; border-color: #E2E8F0; }
[data-theme="light"] .docs-table td { color: #334155; border-color: #F1F5F9; }
[data-theme="light"] .docs-callout--warn { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
[data-theme="light"] .docs-callout--info { background: #EFF6FF; border-color: #BFDBFE; color: #1E40AF; }
[data-theme="light"] .docs-callout div { color: #475569; }

/* -- Forms -- */
[data-theme="light"] .form-input, [data-theme="light"] .form-select, [data-theme="light"] .form-textarea {
    background: #FFFFFF; border-color: #E2E8F0; color: #0F172A;
}
[data-theme="light"] .form-input:focus, [data-theme="light"] .form-textarea:focus { border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
[data-theme="light"] .form-label { color: #64748B; }
[data-theme="light"] .form-input::placeholder, [data-theme="light"] .form-textarea::placeholder { color: #94A3B8; }

/* -- Geo dropdown -- */
[data-theme="light"] .pro-geo-btn { background: #F1F5F9; border-color: #E2E8F0; color: #0F172A; }
[data-theme="light"] .pro-geo-btn:hover { background: #E2E8F0; }
[data-theme="light"] .pro-geo-btn i:first-child { color: #4F46E5; }
[data-theme="light"] .pro-geo-chevron { color: #94A3B8; }
[data-theme="light"] .pro-geo-menu { background: #FFFFFF; border-color: #E2E8F0; box-shadow: var(--shadow-dropdown); }
[data-theme="light"] .pro-geo-option { color: #64748B; }
[data-theme="light"] .pro-geo-option:hover { background: #F8FAFC; color: #0F172A; }
[data-theme="light"] .pro-geo-option-active { color: #4F46E5; }

/* -- Error toast -- */
[data-theme="light"] .error-toast { background: #FFFFFF; border-color: #FECACA; box-shadow: 0 10px 25px rgba(220,38,38,0.1); }
[data-theme="light"] .error-toast-title { color: #B91C1C; }
[data-theme="light"] .error-toast-title i { background: #FEF2F2; color: #DC2626; }
[data-theme="light"] .error-toast-msg { color: #64748B; }
[data-theme="light"] .error-toast-close { background: #F1F5F9; color: #94A3B8; }
[data-theme="light"] .error-toast-reload { background: #FEF2F2; border-color: #FECACA; color: #DC2626; }

/* -- Login -- */
[data-theme="light"] .login-landing { background: #F8FAFC; }
[data-theme="light"] .login-globe circle, [data-theme="light"] .login-globe ellipse { stroke: #334155; }
[data-theme="light"] .login-globe circle:last-child { fill: #4F46E5; stroke: none; }
[data-theme="light"] .login-globe circle:nth-last-child(2) { stroke: #4F46E5; }
[data-theme="light"] .login-brand { background: linear-gradient(135deg, #0F172A 0%, #4F46E5 50%, #0F172A 100%); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; }
[data-theme="light"] .login-tagline { color: #94A3B8; }
[data-theme="light"] .login-enter-btn {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(79, 70, 229, 0.15);
    color: #4F46E5;
    box-shadow: 0 8px 32px rgba(79, 70, 229, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px) saturate(1.5);
}
[data-theme="light"] .login-enter-btn::before {
    background: linear-gradient(90deg, transparent, rgba(79, 70, 229, 0.15), transparent);
}
[data-theme="light"] .login-enter-btn:hover {
    background: rgba(238, 242, 255, 0.9);
    border-color: rgba(79, 70, 229, 0.35);
    color: #4338CA;
    box-shadow: 0 12px 40px rgba(79,70,229,0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .login-orb-1 { background: rgba(79,70,229,0.05); }
[data-theme="light"] .login-orb-2 { background: rgba(59,130,246,0.04); }
[data-theme="light"] .login-orb-3 { background: rgba(168,85,247,0.03); }
[data-theme="light"] .login-grid-lines { background-image: linear-gradient(rgba(0,0,0,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.025) 1px, transparent 1px); }
[data-theme="light"] .login-footer { color: #CBD5E1; }
[data-theme="light"] .login-modal-overlay { background: rgba(15,23,42,0.2); }
[data-theme="light"] .login-modal { background: #FFFFFF; border-color: #E2E8F0; box-shadow: var(--shadow-modal); }
[data-theme="light"] .login-modal-icon { background: #EEF2FF; color: #4F46E5; }
[data-theme="light"] .login-modal-icon--blue { background: #EFF6FF; color: #2563EB; }
[data-theme="light"] .login-modal-title { color: #0F172A; }
[data-theme="light"] .login-modal-sub { color: #94A3B8; }
[data-theme="light"] .login-modal-err { color: #DC2626; }
[data-theme="light"] .login-input { background: #F8FAFC; border-color: #E2E8F0; color: #0F172A; }
[data-theme="light"] .login-input::placeholder { color: #CBD5E1; }
[data-theme="light"] .login-input:focus { border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
[data-theme="light"] .login-input-err { border-color: #DC2626; }
[data-theme="light"] .login-modal-cta { background: #4F46E5; color: #FFFFFF; }
[data-theme="light"] .login-modal-cta:hover:not(:disabled) { background: #4338CA; box-shadow: 0 8px 24px rgba(79,70,229,0.2); }
[data-theme="light"] .login-modal-back { border-color: #E2E8F0; color: #94A3B8; }
[data-theme="light"] .login-modal-back:hover { border-color: #CBD5E1; color: #0F172A; }
[data-theme="light"] .login-attempts { color: #94A3B8; }
[data-theme="light"] .login-bg--blur { filter: blur(4px); }
[data-theme="light"] .login-content--blur { filter: blur(3px); opacity: 0.5; }

/* -- Toggle switch -- */
[data-theme="light"] .toggle-slider { background: #CBD5E1; }
[data-theme="light"] .toggle-switch input:checked + .toggle-slider { background: #4F46E5; }

/* -- Spinner -- */
[data-theme="light"] .spinner::before { border-color: #E2E8F0; }
[data-theme="light"] .spinner::after { border-top-color: #4F46E5; }

/* -- Refresh indicator -- */
[data-theme="light"] .refresh-dot { background: #4F46E5; }
[data-theme="light"] .refresh-indicator { color: #94A3B8; }

/* -- Countdown -- */
[data-theme="light"] .payin-countdown-normal { color: #B45309; background: #FFFBEB; }
[data-theme="light"] .payin-countdown-urgent { color: #B91C1C; background: #FEF2F2; }

/* -- Card detail -- */
[data-theme="light"] .cd-qr-section { background: #FFFFFF; border-color: #E2E8F0; box-shadow: var(--shadow-card); }
[data-theme="light"] .cd-section-title { color: #64748B; }
[data-theme="light"] .cd-upload-zone { border-color: #E2E8F0; background: #F8FAFC; }
[data-theme="light"] .cd-upload-zone:hover { border-color: #4F46E5; background: #EEF2FF; }
[data-theme="light"] .cd-upload-icon { background: #EEF2FF; color: #4F46E5; }
[data-theme="light"] .cd-upload-title { color: #334155; }
[data-theme="light"] .cd-upload-hint { color: #94A3B8; }

/* -- Scrollbar -- */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #CBD5E1; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ---- LIGHT THEME: Settings page inline-style overrides ---- */
/* The SettingsPage.razor uses many inline styles with #fff and rgba(255,255,255,...)
   which render invisible on white light-theme bg. Override them using attribute selectors. */
[data-theme="light"] .pro [style*="color:#fff"],
[data-theme="light"] .pro [style*="color: #fff"] {
    color: #0F172A !important;
}
[data-theme="light"] .pro [style*="rgba(255,255,255,0.45)"],
[data-theme="light"] .pro [style*="rgba(255, 255, 255, 0.45)"] {
    color: #64748B !important;
}
[data-theme="light"] .pro [style*="rgba(255,255,255,0.35)"],
[data-theme="light"] .pro [style*="rgba(255, 255, 255, 0.35)"] {
    color: #94A3B8 !important;
}
[data-theme="light"] .pro [style*="rgba(255,255,255,0.5)"],
[data-theme="light"] .pro [style*="rgba(255, 255, 255, 0.5)"] {
    color: #64748B !important;
}
[data-theme="light"] .pro [style*="rgba(255,255,255,0.6)"],
[data-theme="light"] .pro [style*="rgba(255, 255, 255, 0.6)"] {
    color: #475569 !important;
}
[data-theme="light"] .pro [style*="rgba(255,255,255,0.7)"],
[data-theme="light"] .pro [style*="rgba(255, 255, 255, 0.7)"] {
    color: #334155 !important;
}
[data-theme="light"] .pro [style*="rgba(255,255,255,0.85)"],
[data-theme="light"] .pro [style*="rgba(255, 255, 255, 0.85)"] {
    color: #1E293B !important;
}
/* Sections with hardcoded dark backgrounds */
[data-theme="light"] .pro [style*="rgba(255,255,255,0.03)"],
[data-theme="light"] .pro [style*="rgba(255, 255, 255, 0.03)"] {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: var(--shadow-card) !important;
}
[data-theme="light"] .pro [style*="rgba(255,255,255,0.06)"],
[data-theme="light"] .pro [style*="rgba(255, 255, 255, 0.06)"] {
    border-color: #E2E8F0 !important;
}

/* Nav item focus shouldn't steal active state */
.nav-item.active:focus,
.nav-item.active:hover { background: var(--color-accent); color: var(--color-text-on-accent); }
[data-theme="light"] .nav-item.active:focus,
[data-theme="light"] .nav-item.active:hover {
    background: #4F46E5 !important;
    color: #FFFFFF !important;
}

/* ---- LIGHT THEME: additional fixes ---- */

/* Background with subtle texture + gradient */
[data-theme="light"] body {
    background-color: #F8FAFC !important;
    background-image:
        radial-gradient(ellipse 80% 60% at 15% 5%, rgba(79, 70, 229, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 85% 10%, rgba(99, 102, 241, 0.035) 0%, transparent 55%),
        radial-gradient(ellipse 100% 80% at 50% 100%, rgba(168, 85, 247, 0.025) 0%, transparent 70%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%234F46E5' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
    background-attachment: fixed !important;
}

/* Header: remove bg and border-bottom */
[data-theme="light"] .topbar {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
}

/* Logo text — fully indigo, no gradient shimmer issue */
[data-theme="light"] .topbar__title {
    background: none;
    -webkit-text-fill-color: #4F46E5;
    color: #4F46E5;
}

/* Logo SVG — remove green dot, use accent */
[data-theme="light"] .topbar__logo svg circle[fill="#8FFF00"] { fill: #4F46E5 !important; }
[data-theme="light"] .topbar__logo svg circle[stroke="#8FFF00"] { stroke: #4F46E5 !important; }

/* Nav hover — no green shadows */
[data-theme="light"] .nav-item:hover,
[data-theme="light"] .nav-item:focus { background: #EEF2FF; color: #4338CA; }
[data-theme="light"] .nav-item.active,
[data-theme="light"] .nav-item.active:hover,
[data-theme="light"] .nav-item.active:focus {
    background: #4F46E5 !important;
    color: #FFFFFF !important;
}
[data-theme="light"] .nav-item.active i { color: #FFFFFF !important; }
[data-theme="light"] .nav-item i { color: inherit; }

/* Icon buttons hover — no green */
[data-theme="light"] .topbar__icon-btn:hover { background: #EEF2FF; color: #4338CA; box-shadow: none; }
[data-theme="light"] .topbar__theme-toggle:hover { background: #EEF2FF; color: #4338CA; }

/* Active icon-btn (settings/docs current page) */
[data-theme="light"] .topbar__icon-btn--active i { color: #FFFFFF !important; }

/* Avatar border */
[data-theme="light"] .topbar__avatar { border-color: #C7D2FE; }
[data-theme="light"] .topbar__avatar:hover { border-color: #4F46E5; }

/* Settings page — indigo accents for tg/2fa icons */
[data-theme="light"] .settings-section { background: #FFFFFF !important; border-color: #E2E8F0 !important; box-shadow: var(--shadow-card); }

/* Telegram connected text */
[data-theme="light"] .telegram-connected { color: #15803D; }
[data-theme="light"] .telegram-waiting { color: #64748B; }

/* Geo dropdown checkmark — indigo not green */
[data-theme="light"] .pro-geo-option-active { color: #4F46E5; }
[data-theme="light"] .pro-geo-option-active i { color: #4F46E5 !important; }

/* PAY-IN/OUT amounts — indigo instead of green */
[data-theme="light"] .bal-number-accent,
[data-theme="light"] .pg-grid-amount,
[data-theme="light"] .pg-stat-num--accent { color: #4F46E5 !important; }

/* Green success amounts in tables */
[data-theme="light"] td[style*="color:var(--color-accent)"],
[data-theme="light"] td[style*="color: var(--color-accent)"] { color: #4F46E5 !important; }

/* Payin card amount (green in dark) */
[data-theme="light"] .payin-card-amount { color: #4F46E5; }

/* QR upload hover — indigo not green */
[data-theme="light"] .cd-upload-zone { background: #F8FAFC; border-color: #E2E8F0; }
[data-theme="light"] .cd-upload-zone:hover { background: #EEF2FF !important; border-color: #4F46E5 !important; }
[data-theme="light"] .cd-upload-icon { background: #EEF2FF; color: #4F46E5; }

/* Status stat numbers — vivid but readable */
[data-theme="light"] .pg-stat-num--ok { color: #16A34A; }
[data-theme="light"] .pg-stat-num--warn { color: #EA580C; }
[data-theme="light"] .pg-stat-num--danger { color: #DC2626; }

/* Success/warning/error vivid badges */
[data-theme="light"] .badge-success {
    background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
    color: #166534; border-color: #86EFAC;
}
[data-theme="light"] .badge-warning {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #92400E; border-color: #FCD34D;
}
[data-theme="light"] .badge-danger {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    color: #991B1B; border-color: #FCA5A5;
}
[data-theme="light"] .badge-info {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    color: #1E40AF; border-color: #93C5FD;
}
[data-theme="light"] .badge-admin,
[data-theme="light"] .badge-primary {
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    color: #3730A3; border-color: #C7D2FE;
}
[data-theme="light"] .badge-trader {
    background: linear-gradient(135deg, #CFFAFE 0%, #A5F3FC 100%);
    color: #155E75; border-color: #67E8F9;
}
[data-theme="light"] .badge-support {
    background: linear-gradient(135deg, #FCE7F3 0%, #FBCFE8 100%);
    color: #9D174D; border-color: #F9A8D4;
}
[data-theme="light"] .badge-muted {
    background: #F1F5F9; color: #475569; border-color: #CBD5E1;
}

/* Custom file input (hide) */
[data-theme="light"] ::-webkit-file-upload-button,
[data-theme="light"] .custom-file-input { display: none; }

/* ---- LIGHT THEME: hardcoded dark/green overrides ---- */

/* Balance card dividers */
[data-theme="light"] .bal-col { border-right-color: #E2E8F0; }
[data-theme="light"] .bal-user { border-bottom-color: #E2E8F0; }

/* Modal sections (card-detail-grid, detail-section) — inline dark bg override */
[data-theme="light"] .detail-section,
[data-theme="light"] [style*="background:rgba(255,255,255,0.03)"],
[data-theme="light"] .card-detail-grid > div { background: #FFFFFF !important; border-color: #E2E8F0 !important; }
[data-theme="light"] .detail-section-title { color: #64748B !important; }
[data-theme="light"] .detail-row { border-color: #F1F5F9 !important; color: #0F172A; }
[data-theme="light"] .detail-label { color: #64748B !important; }

/* Glass modal icon circles (green → indigo) */
[data-theme="light"] .gm-icon-accent { background: #EEF2FF; color: #4F46E5; }
[data-theme="light"] .gm-icon-circle { background: #EEF2FF; color: #4F46E5; }

/* Ticket/dispute messages */
[data-theme="light"] .ticket-msg { border-color: #E2E8F0; background: #F8FAFC; }
[data-theme="light"] .ticket-msg-admin { background: #EEF2FF; border-color: #C7D2FE; }
[data-theme="light"] .ticket-msg-user { background: #F8FAFC; }
[data-theme="light"] .ticket-msg-header { color: #0F172A; }
[data-theme="light"] .ticket-msg-name { color: #0F172A; }
[data-theme="light"] .ticket-msg-body { color: #334155; }
[data-theme="light"] .ticket-msg-attachment { color: #4F46E5; }
[data-theme="light"] .ticket-messages-label { color: #64748B; }

/* Ticket ID badge */
[data-theme="light"] .ticket-id-badge { background: #EEF2FF; color: #4F46E5; }

/* Ticket info bar */
[data-theme="light"] .ticket-info-bar { background: #F8FAFC; }
[data-theme="light"] .ticket-description { background: #F8FAFC; }

/* Reply form */
[data-theme="light"] .ticket-reply textarea { background: #FFFFFF; border-color: #E2E8F0; color: #0F172A; }

/* Logo glow (remove green, use indigo) */
[data-theme="light"] .topbar__logo-glow { background: radial-gradient(circle, rgba(79,70,229,0.15) 0%, transparent 70%); }
[data-theme="light"] .topbar__brand:hover .topbar__logo { filter: drop-shadow(0 0 8px rgba(79,70,229,0.3)); }

/* Btn primary hover glow */
[data-theme="light"] .btn-primary:hover:not(:disabled) { box-shadow: 0 0 12px rgba(79,70,229,0.2); }

/* Badge admin/primary */
[data-theme="light"] .badge-admin { background: #EEF2FF; color: #4F46E5; border-color: #C7D2FE; }
[data-theme="light"] .badge-primary { background: #EEF2FF; color: #4F46E5; border-color: #C7D2FE; }

/* Key cell */
[data-theme="light"] .key-cell { background: #EEF2FF; color: #4F46E5; }

/* Merchant key cell */
[data-theme="light"] .merchant-key-cell { color: #4F46E5; }

/* Drawer */
[data-theme="light"] .drawer { background: #FFFFFF; border-left-color: #E2E8F0; }
[data-theme="light"] .drawer-header { border-color: #E2E8F0; }
[data-theme="light"] .drawer-title { color: #0F172A; }
[data-theme="light"] .drawer-section-title { color: #94A3B8; }
[data-theme="light"] .drawer-field { border-color: #F1F5F9; }
[data-theme="light"] .drawer-field-label { color: #64748B; }
[data-theme="light"] .drawer-field-value { color: #0F172A; }

/* Card PayIn grid card accent colors */
[data-theme="light"] .pg-grid-amount { color: #4F46E5 !important; }
[data-theme="light"] .payin-card-amount { color: #4F46E5; }

/* Confirm modal */
[data-theme="light"] .confirm-modal { background: #FFFFFF; }
[data-theme="light"] .confirm-title { color: #0F172A; }
[data-theme="light"] .confirm-desc { color: #64748B; }

/* Settings sections (inline dark styles) */
[data-theme="light"] .settings-section { background: #FFFFFF; border-color: #E2E8F0; }

/* TopUp / Withdrawal modals */
[data-theme="light"] .gm-step-title { color: #64748B; }
[data-theme="light"] .gm-balance-pill { background: #F8FAFC; }
[data-theme="light"] .gm-balance-val { color: #16A34A; }
[data-theme="light"] .gm-equiv { background: #EEF2FF; color: #4F46E5; }
[data-theme="light"] .topup-field { border-color: #F1F5F9; }
[data-theme="light"] .topup-field-label { color: #64748B; }
[data-theme="light"] .topup-field-val { color: #0F172A; }
[data-theme="light"] .topup-field-id { color: #4F46E5; }
[data-theme="light"] .topup-amount-box { background: #F0FDF4; }
[data-theme="light"] .topup-amount-val { color: #16A34A; }
[data-theme="light"] .topup-warn { background: #FFFBEB; border-color: #FDE68A; color: #334155; }
[data-theme="light"] .topup-warn i { color: #D97706; }
[data-theme="light"] .topup-auto-notice { background: #EFF6FF; color: #1D4ED8; }

/* Step dots */
[data-theme="light"] .step-dot { background: #F1F5F9; border-color: #E2E8F0; color: #94A3B8; }
[data-theme="light"] .step-dot.active, [data-theme="light"] .dot-active { background: #4F46E5; border-color: #4F46E5; color: #FFFFFF; }
[data-theme="light"] .step-line { background: #E2E8F0; }
[data-theme="light"] .step-line.done, [data-theme="light"] .line-done { background: #4F46E5; }

/* Alert success */
[data-theme="light"] .alert-success { background: #F0FDF4; color: #15803D; border-color: #BBF7D0; }
[data-theme="light"] .alert-warning { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
[data-theme="light"] .alert-info { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }

/* Accent dim (used in various places) */
[data-theme="light"] .text-accent { color: #4F46E5; }

/* Pro role badge */
[data-theme="light"] .pro-role-badge { background: #EEF2FF; color: #4F46E5; }

/* Pinfo (profile info card if visible) */
[data-theme="light"] .pinfo-icon { background: #EEF2FF; color: #4F46E5; }

/* Settings section icon */
[data-theme="light"] .settings-section-icon { background: #EEF2FF; color: #4F46E5; }

/* Upload zone */
[data-theme="light"] .upload-zone { border-color: #E2E8F0; }
[data-theme="light"] .upload-zone:hover { border-color: #4F46E5; background: #EEF2FF; }

/* Priority selector */
[data-theme="light"] .priority-btn { background: #FFFFFF; border-color: #E2E8F0; color: #64748B; }

/* Wallet cell */
[data-theme="light"] .wallet-cell { color: #64748B; }

/* Accum bar */
[data-theme="light"] .accum-bar { background: #E2E8F0; }
[data-theme="light"] .accum-bar-fill { background: #4F46E5; }

/* Deposit progress bar on dark cards */
[data-theme="light"] .deposit-progress { background: #E2E8F0; }
[data-theme="light"] .deposit-bar { background: #4F46E5; }

/* Inline dark background overrides for CardDetail */
[data-theme="light"] .cd-qr-preview img { border-color: #E2E8F0; }

/* Refresh dot */
[data-theme="light"] .refresh-dot { background: #4F46E5; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
input, button, select, textarea { font-family: var(--font-family); font-weight: 500; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
select, select option {
    background: #1A1D22;
    color: rgba(255,255,255,0.88);
}
select option {
    padding: 10px 14px;
    background: #1A1D22;
    color: rgba(255,255,255,0.88);
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;
}
select option:checked {
    background: #8FFF00 !important;
    color: #0A0A0A !important;
    font-weight: 600;
}
select option:hover,
select option:focus {
    background: #2A2E35 !important;
    color: #FFFFFF !important;
}
select:focus {
    outline: none;
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 3px rgba(143, 255, 0, 0.15) !important;
}
[data-theme="light"] select,
[data-theme="light"] select option {
    background: #FFFFFF;
    color: #0F172A;
}
[data-theme="light"] select option:checked {
    background: #4F46E5 !important;
    color: #FFFFFF !important;
}
[data-theme="light"] select option:hover,
[data-theme="light"] select option:focus {
    background: #EEF2FF !important;
    color: #1E293B !important;
}
[data-theme="light"] select:focus {
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
}

/* ---- 3. BLAZOR LOADING ---- */
.app-loading {
    position: fixed; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: var(--color-bg-base); gap: var(--space-4);
}

.loading-progress { display: block; width: 72px; height: 72px; }
.loading-progress circle { fill: none; stroke: var(--color-border); stroke-width: 6px; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child {
    stroke: var(--color-accent);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text { font-size: var(--font-sm); color: var(--color-text-secondary); font-weight: 600; }
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Loading"); }

/* ---- 4. BLAZOR ERROR ---- */
#blazor-error-ui {
    background: var(--color-danger); color: white; bottom: 0; left: 0;
    width: 100%; padding: var(--space-3) var(--space-6); position: fixed;
    z-index: 9999; display: none; align-items: center;
    justify-content: space-between; font-size: var(--font-sm);
}
#blazor-error-ui .reload { color: white; font-weight: 700; text-decoration: underline; }
#blazor-error-ui .dismiss { cursor: pointer; font-size: var(--font-lg); opacity: 0.8; }
.blazor-error-boundary { padding: var(--space-4); background: var(--color-danger-dim); color: var(--color-danger); border-radius: var(--radius-md); }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ============================================================
   5. LAYOUT — TOP NAVIGATION
   ============================================================ */
.app-shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ========== TOPBAR ========== */
/* ========== TOPBAR ========== */
.topbar {
    height: 64px;
    flex-shrink: 0;
    background: transparent;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    margin-top: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.topbar__left {
    flex-shrink: 0;
}

.topbar__brand {
    display: flex; align-items: center; gap: 16px;
    text-decoration: none; color: inherit;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.topbar__brand:hover { text-decoration: none; }

.topbar__icon { display: none; }

/* -- Logo wrap with glow -- */
.topbar__logo-wrap {
    position: relative;
    width: 56px; height: 56px;
    flex-shrink: 0;
}
.topbar__logo {
    width: 56px; height: 56px;
    position: relative; z-index: 1;
    color: #FFFFFF;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}
.topbar__logo-core { color: var(--color-accent); }
[data-theme="light"] .topbar__logo { color: #4F46E5; }
[data-theme="light"] .topbar__logo-core { color: #4F46E5; }
.topbar__logo-glow {
    position: absolute; inset: -10px;
    background: radial-gradient(circle, rgba(143, 255, 0, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

/* Hover: spin globe + green glow */
.topbar__brand:hover .topbar__logo {
    transform: rotate(360deg);
    filter: drop-shadow(0 0 8px rgba(143, 255, 0, 0.4));
}
.topbar__brand:hover .topbar__logo-glow {
    opacity: 1;
}
.topbar__brand:hover .topbar__title {
    background-position: 100% 0;
}

.topbar__title {
    font-size: 26px; font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    white-space: nowrap;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 40%, #8FFF00 60%, #ffffff 100%);
    background-size: 200% 100%;
    background-position: 0 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background-position 0.6s ease;
}

/* ========== WHITE PILL CONTAINER ========== */
.topbar__pill {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-full);
    padding: 5px;
    box-shadow: none;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.topbar__pill::-webkit-scrollbar { display: none; }

.nav-section-label { display: none; }

.nav-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px;
    border-radius: var(--radius-full); cursor: pointer;
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px; font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none; border: none; background: transparent;
    white-space: nowrap; flex-shrink: 0;
}
.nav-item:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
}
.nav-item.active {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    font-weight: 600;
}
.nav-item.active:hover {
    background: var(--color-accent-hover);
    color: var(--color-text-on-accent);
}

/* Icons: only visible on active item */
.nav-item i { display: none; }
.nav-item.active i {
    display: inline-block;
    font-size: 14px;
    color: var(--color-text-on-accent);
}

/* ========== TOP RIGHT ========== */
.topbar__right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.topbar__icon-btn {
    width: 40px; height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 16px;
    transition: all 0.2s ease;
    text-decoration: none;
    position: relative;
}
.topbar__bell-dot {
    position: absolute;
    top: 8px; right: 8px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #EF4444;
    border: 2px solid var(--color-bg-base, #0a0a0a);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    animation: bellDotPulse 2s infinite;
}
@keyframes bellDotPulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
[data-theme="light"] .topbar__bell-dot { border-color: #FFFFFF; }

/* Header action counters (active payins / pool payouts) */
.topbar__counter {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px;
    border-radius: 16px;
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}
.topbar__counter:hover { transform: translateY(-1px); text-decoration: none; }
.topbar__counter--warn {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
    border-color: rgba(245, 158, 11, 0.3);
}
.topbar__counter--warn:hover { background: rgba(245, 158, 11, 0.25); color: #FBBF24; }
.topbar__counter--info {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
    border-color: rgba(59, 130, 246, 0.3);
}
.topbar__counter--info:hover { background: rgba(59, 130, 246, 0.25); color: #60A5FA; }
.topbar__counter--danger {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
    border-color: rgba(239, 68, 68, 0.3);
}
.topbar__counter--danger:hover { background: rgba(239, 68, 68, 0.25); color: #F87171; }

/* Notification dropdown items */
.notif-item {
    display: flex; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease;
    cursor: default;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(255, 255, 255, 0.03); }
.notif-item--unread { background: rgba(143, 255, 0, 0.04); }
.notif-item--unread:hover { background: rgba(143, 255, 0, 0.06); }
.notif-item-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}
.notif-item--critical .notif-item-icon { background: rgba(239, 68, 68, 0.15); color: #EF4444; }
.notif-item--high .notif-item-icon { background: rgba(245, 158, 11, 0.15); color: #F59E0B; }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.notif-item-msg { font-size: 12px; color: rgba(255, 255, 255, 0.6); line-height: 1.4; }
.notif-item-time { font-size: 11px; color: rgba(255, 255, 255, 0.35); margin-top: 4px; }
[data-theme="light"] .notif-item { border-bottom: 1px solid #E2E8F0; }
[data-theme="light"] .notif-item:last-child { border-bottom: none; }
[data-theme="light"] .notif-item:hover { background: #F8FAFC; }
[data-theme="light"] .notif-item--unread { background: #EEF2FF; }
[data-theme="light"] .notif-item--unread:hover { background: #E0E7FF; }
[data-theme="light"] .notif-item-icon { background: #F1F5F9; color: #64748B; }
[data-theme="light"] .notif-item-title { color: #0F172A; }
[data-theme="light"] .notif-item-msg { color: #475569; }
[data-theme="light"] .notif-item-time { color: #94A3B8; }

/* Toast stack — appears below header on the right */
.notif-toast-stack {
    position: fixed;
    top: 80px; right: 24px;
    z-index: 9999;
    display: flex; flex-direction: column; gap: 8px;
    width: 360px; max-width: calc(100vw - 48px);
    pointer-events: none;
}
.notif-toast {
    pointer-events: auto;
    display: flex; gap: 12px; align-items: flex-start;
    background: rgba(20, 20, 24, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid #8FFF00;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    animation: toastSlideIn 0.3s ease;
}
.notif-toast--high { border-left-color: #F59E0B; }
.notif-toast--critical { border-left-color: #EF4444; }
.notif-toast-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(143, 255, 0, 0.15);
    color: #8FFF00;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.notif-toast--high .notif-toast-icon { background: rgba(245, 158, 11, 0.15); color: #F59E0B; }
.notif-toast--critical .notif-toast-icon { background: rgba(239, 68, 68, 0.15); color: #EF4444; }
.notif-toast-body { flex: 1; min-width: 0; }
.notif-toast-title { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.notif-toast-msg { font-size: 12px; color: rgba(255, 255, 255, 0.65); line-height: 1.4; }
.notif-toast-close {
    background: none; border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer; padding: 0;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    border-radius: 4px;
    flex-shrink: 0;
}
.notif-toast-close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
@keyframes toastSlideIn {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
[data-theme="light"] .notif-toast {
    background: rgba(255, 255, 255, 0.98);
    border-color: #E2E8F0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .notif-toast-title { color: #0F172A; }
[data-theme="light"] .notif-toast-msg { color: #475569; }
[data-theme="light"] .notif-toast-close { color: #64748B; }
[data-theme="light"] .notif-toast-close:hover { color: #0F172A; background: #F1F5F9; }
.topbar__icon-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
}
.topbar__icon-btn--active {
    background: var(--color-accent) !important;
    color: var(--color-text-on-accent) !important;
}
.topbar__icon-btn--active:hover {
    background: var(--color-accent-hover) !important;
}

/* -- Notifications popup -- */
.notif-pop {
    position: absolute;
    top: calc(100% + 8px); right: 80px;
    width: 340px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-dropdown);
    z-index: 100;
    overflow: hidden;
    animation: pop-in 160ms cubic-bezier(.16,1,.3,1);
}
.notif-pop-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}
.notif-pop-title {
    font-size: 15px; font-weight: 700; color: #fff;
}
.notif-pop-mark {
    background: none; border: none;
    font-size: 12px; font-weight: 500;
    color: var(--color-accent); cursor: pointer;
    font-family: var(--font-family);
}
.notif-pop-mark:hover { text-decoration: underline; }
.notif-pop-body {
    padding: 20px;
}
.notif-pop-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; padding: 20px 0;
    color: rgba(255,255,255,0.25);
}
.notif-pop-empty i { font-size: 28px; }
.notif-pop-empty span { font-size: 13px; }

/* Theme toggle */
.topbar__theme-toggle {
    width: 36px; height: 36px;
    border: none; border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 15px;
    transition: all 0.3s ease;
}
.topbar__theme-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #FBBF24;
    transform: rotate(20deg);
}
[data-theme="light"] .topbar__theme-toggle {
    background: rgba(0,0,0,0.04);
    color: #5A5F66;
}
[data-theme="light"] .topbar__theme-toggle:hover {
    background: rgba(0,0,0,0.08);
    color: #6366F1;
    transform: rotate(-20deg);
}

.topbar__user {
    cursor: pointer;
    display: flex; align-items: center;
    border-radius: var(--radius-full);
    transition: opacity 0.2s ease;
}
.topbar__user:hover { opacity: 0.85; }

.topbar__avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(143, 255, 0, 0.4);
    transition: border-color 0.2s ease;
    cursor: pointer;
}
.topbar__avatar--fallback {
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 600; color: #fff;
}
.topbar__avatar:hover { border-color: var(--color-accent); }
.topbar__avatar--sm { width: 28px; height: 28px; font-size: 12px; }

/* NFT Avatar — table inline */
.nft-avatar-sm {
    width: 28px; height: 28px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0; vertical-align: middle;
    margin-right: 6px;
}

/* ========== ACCOUNT POPUP ========== */
.pop__backdrop { position: fixed; inset: 0; z-index: 99; }

.pop {
    position: absolute;
    top: calc(100% + var(--space-2)); right: 0;
    width: 220px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 100; padding: var(--space-2);
    animation: pop-in 160ms cubic-bezier(.16,1,.3,1);
}
@keyframes pop-in {
    from { opacity: 0; transform: translateY(-6px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pop__head {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2);
}
.pop__uinfo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pop__uname {
    font-size: var(--font-sm); font-weight: 700;
    color: var(--color-text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 1.3;
}
.pop__urole {
    font-size: 10px; font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.4;
}

.pop__hr {
    border: none; height: 1px;
    background: var(--color-border); margin: var(--space-1) 0;
}

.pop__item {
    display: flex; align-items: center; gap: var(--space-3);
    width: 100%; padding: 8px var(--space-3);
    border: none; border-radius: var(--radius-md);
    background: transparent; font-family: var(--font-family);
    font-size: var(--font-sm); font-weight: 600;
    color: var(--color-text-secondary); cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.pop__item:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.pop__item i { width: 16px; text-align: center; font-size: 13px; opacity: 0.65; }
.pop__item:hover i { opacity: 1; }

.pop__item--danger { color: var(--color-danger); }
.pop__item--danger:hover { background: var(--color-danger-dim); color: var(--color-danger); }
.pop__item--danger i { opacity: 1; }

/* ========== MAIN ========== */
.main-content,
.main {
    flex: 1; overflow-y: auto;
    padding: var(--space-8); min-width: 0;
}

/* Legacy sidebar classes — no-op for backward compat */
.sb, .sb--mini, .sb__head, .sb__nav, .sb__foot, .sb__brand, .sb__icon,
.sb__title, .sb__toggle, .sb__theme, .sb__user, .sb__avatar, .sb__avatar--sm,
.sb__uinfo, .sb__uname, .sb__urole, .sb__dots { display: none; }

/* ============================================================
   6. BUTTONS
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-2); padding: 0 var(--space-5);
    height: 36px; border-radius: var(--radius-full);
    font-family: var(--font-family); font-size: var(--font-sm); font-weight: 700;
    cursor: pointer; border: none;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
    white-space: nowrap; letter-spacing: 0.1px;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.btn-primary { background: var(--color-accent); color: var(--color-text-on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); box-shadow: 0 0 12px rgba(143, 255, 0, 0.3); }

.btn-ghost {
    background: transparent; color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}
.btn-ghost:hover:not(:disabled) {
    background: var(--color-bg-hover); color: var(--color-text-primary);
    border-color: var(--color-border-strong);
}

.btn-danger { background: var(--color-danger-dim); color: var(--color-danger); border: 1px solid transparent; }
.btn-danger:hover:not(:disabled) { background: var(--color-danger); color: white; }

.btn-success { background: var(--color-success-dim); color: var(--color-success); border: 1px solid transparent; }
.btn-success:hover:not(:disabled) { background: var(--color-success); color: white; }

.btn-warning { background: var(--color-warning-dim); color: var(--color-warning); border: 1px solid transparent; }
.btn-warning:hover:not(:disabled) { background: var(--color-warning); color: #1D2125; }

.btn-sm { height: 30px; padding: 0 var(--space-3); font-size: var(--font-xs); }
.btn-lg { height: 46px; padding: 0 var(--space-8); font-size: var(--font-md); }
.btn-xs { padding: 4px 10px; font-size: var(--font-xs); border-radius: var(--radius-full); }

.btn-icon {
    width: 32px; height: 32px; padding: 0;
    border-radius: var(--radius-full);
    background: transparent; color: var(--color-text-secondary); border: none;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px;
    transition: background var(--transition), color var(--transition);
}
.btn-icon:hover:not(:disabled) { background: var(--color-bg-hover); color: var(--color-text-primary); }

.btn-outline {
    background: transparent;
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-primary);
    cursor: pointer; border-radius: var(--radius-full);
    padding: 0 var(--space-4); height: 36px; font-weight: 600;
    font-size: var(--font-sm);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--transition), border-color var(--transition);
}
.btn-outline:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-text-muted);
}

/* ============================================================
   7. FORMS
   ============================================================ */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-group:last-child { margin-bottom: 0; }

.form-label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--color-text-muted);
}
.form-label .req { color: var(--color-danger); font-weight: 800; }

.form-input, .form-select, .form-textarea {
    background: var(--color-bg-overlay);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4); height: 40px;
    font-family: var(--font-family); font-size: var(--font-sm); font-weight: 600;
    color: var(--color-text-primary);
    transition: border-color var(--transition), box-shadow var(--transition);
    width: 100%;
}

.form-textarea { height: auto; padding: var(--space-3); resize: none; min-height: 80px; max-height: 160px; overflow-y: auto; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--color-text-muted); font-weight: 500; }

.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-dim);
}

.form-input.error { border-color: var(--color-danger); }
.form-input.error:focus { box-shadow: 0 0 0 3px var(--color-danger-dim); }
.form-error { font-size: var(--font-xs); color: var(--color-danger); font-weight: 600; }
.form-hint { font-size: var(--font-xs); color: var(--color-text-muted); }
.form-hint-error { color: var(--color-danger); }
.form-input-sm { padding: 6px 10px; font-size: var(--font-sm); border-radius: var(--radius-md); }
.form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* ============================================================
   8. CARDS
   ============================================================ */
.card {
    background: var(--color-bg-surface);
    border: none;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-dropdown);
}

.card-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}

.card-title { font-size: var(--font-md); font-weight: 700; color: var(--color-text-primary); }
.card-body { padding: var(--space-5); }

.card-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
}

/* ============================================================
   9. PAGE HEADER
   ============================================================ */
.page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-6); gap: var(--space-4);
}

.page-title { font-size: var(--font-2xl); font-weight: 800; color: var(--color-text-primary); letter-spacing: -0.5px; }
.page-subtitle { font-size: var(--font-sm); color: var(--color-text-muted); margin-top: 2px; font-weight: 500; }

/* ============================================================
   10. BADGES
   ============================================================ */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border-radius: var(--radius-full);
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
    text-transform: uppercase; border: 1px solid transparent;
}
.badge-sm { font-size: 10px; padding: 2px 8px; }

.badge-admin   { background: rgba(143,255,0,0.08); color: var(--color-accent); border-color: rgba(143,255,0,0.15); }
.badge-trader  { background: rgba(96,165,250,0.08); color: #93B8F8; border-color: rgba(96,165,250,0.15); }
.badge-support { background: rgba(139,92,246,0.08); color: #B4A0E8; border-color: rgba(139,92,246,0.15); }
.badge-success { background: rgba(52,211,153,0.08); color: #6EE7B7; border-color: rgba(52,211,153,0.18); }
.badge-warning { background: rgba(251,191,36,0.08); color: #FCD34D; border-color: rgba(251,191,36,0.18); }
.badge-danger  { background: rgba(248,113,113,0.08); color: #FCA5A5; border-color: rgba(248,113,113,0.18); }
.badge-info    { background: rgba(96,165,250,0.08); color: #93C5FD; border-color: rgba(96,165,250,0.18); }
.badge-muted   { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.4); border-color: rgba(255,255,255,0.08); }
.badge-neutral { background: rgba(148,163,184,0.1); color: #CBD5E1; border-color: rgba(148,163,184,0.2); }
.badge-freeze  { background: rgba(56,189,248,0.1); color: #7DD3FC; border-color: rgba(56,189,248,0.25); }
.badge-primary { background: rgba(143,255,0,0.08); color: var(--color-accent); border-color: rgba(143,255,0,0.15); }

/* Text color helpers */
.text-neutral { color: #94A3B8; }
.text-freeze  { color: #38BDF8; }

/* Light theme */
[data-theme="light"] .badge-neutral { background: #F1F5F9; color: #475569; border-color: #CBD5E1; }
[data-theme="light"] .badge-freeze { background: #E0F2FE; color: #0369A1; border-color: #7DD3FC; }
[data-theme="light"] .text-neutral { color: #64748B; }
[data-theme="light"] .text-freeze  { color: #0284C7; }

/* ============================================================
   11. STATUS DOT
   ============================================================ */
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.online  { background: var(--color-online); box-shadow: 0 0 0 3px var(--color-success-dim); }
.status-dot.offline { background: var(--color-offline); }
.status-dot.banned  { background: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-dim); }

/* ============================================================
   12. DATA TABLE
   ============================================================ */
.data-table-wrapper {
    border-radius: var(--radius-xl);
    border: none;
    background: var(--color-bg-white-card);
    color: var(--color-text-dark);
    overflow: hidden;
    box-shadow: var(--shadow-light-card);
}

.data-table { width: 100%; border-collapse: collapse; font-size: var(--font-sm); }

.data-table thead th {
    padding: 12px var(--space-5);
    text-align: left;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--color-text-dark-sec);
    background: var(--color-bg-white-head);
    border-bottom: 1px solid #F3F4F6;
    white-space: nowrap;
}

.data-table tbody tr {
    border-bottom: 1px solid #F3F4F6;
    transition: background var(--transition);
    cursor: pointer;
}
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--color-bg-white-hover); }

.data-table tbody td {
    padding: 12px var(--space-5);
    color: var(--color-text-dark);
    vertical-align: middle;
}
.data-table tbody td.muted { color: var(--color-text-dark-sec); }

.key-cell {
    font-family: 'Courier New', monospace;
    font-size: 12px; font-weight: 700;
    color: var(--color-accent); letter-spacing: 1.5px;
    background: var(--color-accent-dim);
    padding: 3px 8px; border-radius: var(--radius-sm);
}

/* ============================================================
   13. TABLE (ticket system variant)
   ============================================================ */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    background: var(--color-bg-white-card);
    color: var(--color-text-dark);
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-light-card);
}
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
}
.table thead {
    border-bottom: 1px solid #F3F4F6;
}
.table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: 600;
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-dark-sec);
    background: var(--color-bg-white-head);
    white-space: nowrap;
}
.table td {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid #F3F4F6;
    color: var(--color-text-dark);
    vertical-align: middle;
}
.table tbody tr:first-child td { border-top: none; }
.table-row-clickable { cursor: pointer; transition: background 100ms ease; }
.table-row-clickable:hover { background: var(--color-bg-white-hover); }

/* ============================================================
   14. SEARCH BAR
   ============================================================ */
.search-bar {
    display: flex; align-items: center;
    gap: var(--space-3); margin-bottom: var(--space-5);
}

.search-input-wrap { flex: 1; position: relative; max-width: 400px; }

.search-input-wrap i {
    position: absolute; left: var(--space-3);
    top: 50%; transform: translateY(-50%);
    color: var(--color-text-muted); font-size: 12px;
}

.search-input-wrap .form-input {
    padding-left: calc(var(--space-3) + 18px);
    height: 36px;
}

/* ============================================================
   15. PAGINATION
   ============================================================ */
.pagination {
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-3) var(--space-5);
    gap: var(--space-2);
    margin-top: var(--space-5);
    font-size: var(--font-sm); color: var(--color-text-muted);
}

.pagination-pages { display: flex; align-items: center; gap: 2px; }

.page-btn {
    width: 32px; height: 32px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-sm); font-weight: 700;
    cursor: pointer; border: 1px solid transparent;
    background: transparent; color: var(--color-text-secondary);
    transition: background var(--transition), color var(--transition);
    font-family: var(--font-family);
}
.page-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.page-btn.active { background: var(--color-accent); color: var(--color-text-on-accent); }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ============================================================
   16. MODAL
   ============================================================ */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-4);
    animation: fade-in var(--transition) ease;
}

.modal {
    background: var(--color-bg-surface);
    border: none;
    border-radius: var(--radius-2xl);
    width: 100%; max-width: 460px;
    max-height: 90vh; overflow-y: auto;
    box-shadow: var(--shadow-modal);
    animation: slide-up var(--transition-spring) cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: space-between;
}

.modal-title { font-size: var(--font-lg); font-weight: 700; color: var(--color-text-primary); }
.modal-body { padding: var(--space-5) var(--space-6); }

.modal-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
}

/* ============================================================
   17. DRAWER
   ============================================================ */
.drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45); z-index: 900;
    animation: fade-in var(--transition) ease;
}

.drawer {
    position: fixed; top: 0; right: 0;
    height: 100vh; width: 420px;
    background: var(--color-bg-surface);
    border-left: none;
    box-shadow: var(--shadow-lg);
    z-index: 901;
    display: flex; flex-direction: column; overflow: hidden;
    animation: slide-in-right var(--transition-md) ease;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}

.drawer-header {
    padding: var(--space-5) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}

.drawer-title { font-size: var(--font-lg); font-weight: 700; color: var(--color-text-primary); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }

.drawer-section-title {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.8px; color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.drawer-field {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0; border-bottom: 1px solid var(--color-border);
    gap: var(--space-4);
}
.drawer-field:last-child { border-bottom: none; }

.drawer-field-label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--color-text-muted); flex-shrink: 0;
}

.drawer-field-value { font-size: var(--font-sm); color: var(--color-text-primary); font-weight: 600; }
.drawer-actions { display: flex; flex-direction: column; gap: var(--space-2); }

/* ============================================================
   18. STEPPER
   ============================================================ */
.step-indicator { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }

.step-dot {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; flex-shrink: 0;
    border: 2px solid var(--color-border);
    color: var(--color-text-muted); background: var(--color-bg-elevated);
    transition: all var(--transition-md);
}
.step-dot.active, .dot-active { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-text-on-accent); }
.step-dot.done { border-color: var(--color-success); background: var(--color-success); color: white; }

.step-line { flex: 1; height: 2px; background: var(--color-border); transition: background var(--transition-md); }
.step-line.done, .line-done { background: var(--color-accent); }

/* ============================================================
   19. KEY DISPLAY
   ============================================================ */
.key-display {
    display: flex; align-items: center; gap: var(--space-3);
    background: var(--color-bg-overlay);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}

.key-display-value {
    flex: 1; font-family: 'Courier New', monospace;
    font-size: var(--font-lg); font-weight: 800;
    color: var(--color-accent); letter-spacing: 3px;
}

.key-display-warning {
    display: flex; align-items: flex-start; gap: var(--space-2);
    background: var(--color-warning-dim);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-sm); color: var(--color-warning); font-weight: 600;
}

/* ============================================================
   20. ALERTS
   ============================================================ */
.alert {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--font-sm); font-weight: 600;
}
.alert i { flex-shrink: 0; margin-top: 1px; }
.alert-success { background: var(--color-success-dim); color: var(--color-success); border: 1px solid var(--color-success); }
.alert-warning  { background: var(--color-warning-dim); color: var(--color-warning);  border: 1px solid var(--color-warning); }
.alert-danger   { background: var(--color-danger-dim);  color: var(--color-danger);   border: 1px solid var(--color-danger); }

/* -- Dispute attachment chips -- */
.dispute-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.dispute-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 14px;
    background: rgba(143, 255, 0, 0.08);
    border: 1px solid rgba(143, 255, 0, 0.2);
    border-radius: 9999px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    max-width: 320px;
}
.dispute-attachment-chip > i { font-size: 11px; color: var(--color-accent); flex-shrink: 0; }
.dispute-attachment-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
.dispute-attachment-size {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
}
.dispute-attachment-remove {
    width: 20px; height: 20px; border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 10px;
    flex-shrink: 0;
    transition: all 0.15s ease;
    padding: 0;
}
.dispute-attachment-remove:hover {
    background: rgba(248, 113, 113, 0.2);
    color: #FCA5A5;
}
[data-theme="light"] .dispute-attachment-chip {
    background: #EEF2FF;
    border-color: #C7D2FE;
    color: #1E293B;
}
[data-theme="light"] .dispute-attachment-chip > i { color: #4F46E5; }
[data-theme="light"] .dispute-attachment-name { color: #0F172A; }
[data-theme="light"] .dispute-attachment-size { color: #64748B; }
[data-theme="light"] .dispute-attachment-remove { background: #F1F5F9; color: #64748B; }
[data-theme="light"] .dispute-attachment-remove:hover { background: #FEE2E2; color: #DC2626; }

/* -- Success Toast (centered popup, auto-dismiss) -- */
.success-toast-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    pointer-events: none;
    padding-top: 10vh;
}
.success-toast {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 28px 16px 20px;
    background: #121A14;
    border: 1px solid rgba(52, 211, 153, 0.3);
    border-radius: 9999px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(52, 211, 153, 0.15);
    pointer-events: auto;
    animation: successToastIn 0.4s cubic-bezier(0.16, 1, 0.3, 1),
               successToastOut 0.4s cubic-bezier(0.4, 0, 1, 1) 2.1s forwards;
}
.success-toast-icon {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(52, 211, 153, 0.18);
    color: #34D399;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.success-toast-msg {
    font-size: 14px;
    font-weight: 600;
    color: #D1FAE5;
    white-space: nowrap;
}
@keyframes successToastIn {
    from { opacity: 0; transform: translateY(-30px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes successToastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-20px) scale(0.95); }
}
/* Light theme */
[data-theme="light"] .success-toast {
    background: #FFFFFF;
    border-color: #BBF7D0;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1), 0 0 20px rgba(22, 163, 74, 0.1);
}
[data-theme="light"] .success-toast-icon {
    background: #DCFCE7;
    color: #16A34A;
}
[data-theme="light"] .success-toast-msg {
    color: #166534;
}

/* -- Error Toast Popup -- */
.error-toast {
    position: fixed;
    bottom: 24px; right: 24px;
    max-width: 420px; width: calc(100% - 48px);
    background: #1E1215;
    border: 1px solid rgba(248, 113, 113, 0.25);
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 20px rgba(248,113,113,0.1);
    z-index: 9000;
    display: flex; flex-direction: column; gap: 14px;
    animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.error-toast-header {
    display: flex; align-items: center; justify-content: space-between;
}
.error-toast-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; color: #FCA5A5;
}
.error-toast-title i {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(248, 113, 113, 0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: #F87171;
}
.error-toast-close {
    width: 28px; height: 28px; border-radius: 50%;
    border: none; background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; transition: all 0.15s ease;
}
.error-toast-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.error-toast-msg {
    font-size: 13px; color: rgba(255,255,255,0.55);
    line-height: 1.5; word-break: break-word;
}
.error-toast-actions {
    display: flex; gap: 8px;
}
.error-toast-reload {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: 9999px;
    color: #FCA5A5; font-size: 12px; font-weight: 600;
    cursor: pointer; font-family: var(--font-family);
    transition: all 0.15s ease;
}
.error-toast-reload:hover {
    background: rgba(248, 113, 113, 0.2);
    color: #fff;
}
.alert-info     { background: var(--color-info-dim);    color: var(--color-info);     border: 1px solid var(--color-info); }

/* ============================================================
   21. LOGIN — LANDING PAGE
   ============================================================ */

/* -- Full-screen landing -- */
.login-landing {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* -- Animated background -- */
.login-bg {
    position: absolute; inset: 0;
    z-index: 0;
}
.login-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    animation: orbFloat 8s ease-in-out infinite;
}
.login-orb-1 {
    width: 500px; height: 500px;
    background: rgba(143, 255, 0, 0.08);
    top: -10%; left: -5%;
    animation-delay: 0s;
}
.login-orb-2 {
    width: 400px; height: 400px;
    background: rgba(96, 165, 250, 0.06);
    bottom: -10%; right: -5%;
    animation-delay: 3s;
}
.login-orb-3 {
    width: 300px; height: 300px;
    background: rgba(139, 92, 246, 0.05);
    top: 40%; right: 20%;
    animation-delay: 5s;
}

@keyframes orbFloat {
    0%, 100% { opacity: 0.4; transform: translate(0, 0) scale(1); }
    25% { opacity: 0.7; transform: translate(30px, -20px) scale(1.05); }
    50% { opacity: 0.5; transform: translate(-20px, 30px) scale(0.95); }
    75% { opacity: 0.8; transform: translate(15px, 15px) scale(1.02); }
}

/* Grid lines background */
.login-grid-lines {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 70%);
}

/* -- Content layer -- */
.login-content {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    align-items: center; gap: 40px;
    padding: 40px 20px;
    animation: fadeSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* -- Hero / Logo block -- */
.login-hero {
    display: flex; flex-direction: column;
    align-items: center; gap: 16px;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.login-logo-anim {
    position: relative;
    animation: logoSpin 20s linear infinite;
}
@keyframes logoSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.login-globe {
    width: 100px; height: 100px;
    color: #FFFFFF;
    filter: drop-shadow(0 0 20px rgba(143, 255, 0, 0.2));
}
.login-globe-core { color: var(--color-accent); }
[data-theme="light"] .login-globe {
    color: #4F46E5;
    filter: drop-shadow(0 0 20px rgba(79, 70, 229, 0.2));
}
[data-theme="light"] .login-globe-core { color: #4F46E5; }

.login-brand {
    font-size: 48px; font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #ffffff 0%, #8FFF00 50%, #ffffff 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: brandShimmer 4s ease-in-out infinite;
    margin: 0;
}
@keyframes brandShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.login-tagline {
    font-size: 14px; font-weight: 500;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0;
}

/* -- Blur states -- */
.login-bg--blur { filter: blur(6px); transition: filter 0.4s ease; }
.login-content--blur { filter: blur(4px); pointer-events: none; transition: filter 0.4s ease; opacity: 0.6; }

/* -- Enter button (transparent, blends with bg) -- */
.login-enter-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 14px;
    min-width: 320px;
    padding: 20px 56px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    color: rgba(255,255,255,0.85);
    font-family: var(--font-family);
    font-size: 17px; font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.login-enter-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(143, 255, 0, 0.15), transparent);
    transition: left 0.7s ease;
}
.login-enter-btn:hover::before { left: 100%; }
.login-enter-btn:hover {
    background: rgba(143, 255, 0, 0.12);
    border-color: rgba(143, 255, 0, 0.4);
    color: #fff;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 40px rgba(143, 255, 0, 0.15);
}
.login-enter-btn i {
    font-size: 14px; transition: transform 0.3s ease;
}
.login-enter-btn:hover i { transform: translateX(4px); }

/* -- Modal overlay -- */
.login-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
    animation: fade-in 0.3s ease;
}

/* -- Modal -- */
.login-modal {
    width: 100%; max-width: 420px;
    background: rgba(25, 28, 32, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 40px 36px;
    backdrop-filter: blur(24px);
    display: flex; flex-direction: column;
    align-items: center; gap: 16px;
    animation: fadeSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}

.login-modal-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(143, 255, 0, 0.1);
    color: #8FFF00;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.login-modal-icon--blue {
    background: rgba(96, 165, 250, 0.1); color: #60A5FA;
}

.login-modal-title {
    font-size: 22px; font-weight: 700; color: #fff; margin: 0;
}
.login-modal-sub {
    font-size: 13px; color: rgba(255,255,255,0.4); margin: 0; text-align: center;
}
.login-modal-err {
    font-size: 13px; color: var(--color-danger); font-weight: 600; text-align: center;
}

/* -- Modal CTA -- */
.login-modal-cta {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; width: 100%;
    padding: 14px 24px; margin-top: 4px;
    background: #8FFF00;
    color: #111315;
    border: none; border-radius: 9999px;
    font-family: var(--font-family);
    font-size: 15px; font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
}
.login-modal-cta:hover:not(:disabled) {
    background: #7AE000;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(143, 255, 0, 0.25);
}
.login-modal-cta:disabled { opacity: 0.4; cursor: not-allowed; }

.login-modal-back {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; width: 100%;
    padding: 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    color: rgba(255,255,255,0.5);
    font-family: var(--font-family);
    font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all 0.2s ease;
}
.login-modal-back:hover { border-color: rgba(255,255,255,0.15); color: #fff; }

/* 2FA input reuse */
.login-field { width: 100%; }
.login-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px 20px;
    font-family: 'Courier New', monospace;
    font-size: 20px; font-weight: 800;
    letter-spacing: 4px; text-align: center;
    color: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.login-input::placeholder { color: rgba(255,255,255,0.2); font-weight: 500; letter-spacing: 2px; }
.login-input:focus { outline: none; border-color: #8FFF00; box-shadow: 0 0 0 4px rgba(143,255,0,0.1); }
.login-input-err { border-color: var(--color-danger); }
.login-input-code { font-size: 28px; letter-spacing: 8px; }
.login-attempts { font-size: 11px; color: rgba(255,255,255,0.35); font-weight: 600; text-align: center; }

/* -- Footer -- */
.login-footer {
    font-size: 11px; color: rgba(255,255,255,0.2);
    letter-spacing: 0.05em;
}

.theme-toggle { display: none; }

/* -- Responsive login -- */
@media (max-width: 480px) {
    .login-brand { font-size: 32px; letter-spacing: 0.2em; }
    .login-globe { width: 70px; height: 70px; }
    .login-modal { padding: 32px 24px; max-width: 90vw; }
    .login-key-slot { width: 32px; height: 42px; font-size: 17px; }
    .login-enter-btn { padding: 14px 32px; font-size: 14px; }
}

/* ============================================================
   DOCUMENTATION PAGE
   ============================================================ */
.docs {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    min-height: 60vh;
}

/* -- Sidebar nav -- */
.docs-nav {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 20px 12px;
    position: sticky;
    top: 90px;
    align-self: start;
    display: flex; flex-direction: column; gap: 2px;
}
.docs-nav-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; color: rgba(255,255,255,0.35);
    padding: 0 12px 12px; margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.docs-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: none; border-radius: 10px;
    background: transparent;
    color: rgba(255,255,255,0.5);
    font-family: var(--font-family);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.docs-nav-item:hover {
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.04);
}
.docs-nav-item--active {
    color: var(--color-text-on-accent) !important;
    background: var(--color-accent) !important;
    font-weight: 600;
}
.docs-nav-item i { width: 16px; text-align: center; font-size: 13px; }

/* -- Content area -- */
.docs-content {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
}
.docs-content-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.docs-content-title {
    font-size: 20px; font-weight: 700; color: #fff; margin: 0;
}
.docs-content-badge {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--color-accent-dim); color: var(--color-accent);
    padding: 4px 12px; border-radius: 9999px;
}

.docs-body {
    padding: 32px;
}

/* -- Content styling -- */
.docs-section h2 {
    font-size: 18px; font-weight: 700; color: #fff;
    margin: 0 0 12px;
}
.docs-section h3 {
    font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.8);
    margin: 24px 0 10px;
}
.docs-section p {
    font-size: 14px; color: rgba(255,255,255,0.55);
    line-height: 1.7; margin: 0 0 12px;
}
.docs-section ul, .docs-section ol {
    font-size: 14px; color: rgba(255,255,255,0.55);
    line-height: 1.7; margin: 0 0 16px;
    padding-left: 24px;
}
.docs-section li { margin-bottom: 6px; }
.docs-section strong { color: rgba(255,255,255,0.85); font-weight: 600; }

/* Docs table */
.docs-table-wrap {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    margin: 12px 0 16px;
}
.docs-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.docs-table th {
    padding: 10px 16px; text-align: left;
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: rgba(255,255,255,0.35);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.docs-table td {
    padding: 10px 16px; color: rgba(255,255,255,0.7);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    vertical-align: middle;
}
.docs-table tr:last-child td { border-bottom: none; }

/* Callouts */
.docs-callout {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 13px; line-height: 1.6;
    margin: 16px 0;
}
.docs-callout i { font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.docs-callout--warn {
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.15);
    color: #FCD34D;
}
.docs-callout--info {
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.15);
    color: #93C5FD;
}
.docs-callout div { color: rgba(255,255,255,0.6); }
.docs-callout strong { color: inherit; }

/* Responsive docs */
@media (max-width: 900px) {
    .docs { grid-template-columns: 1fr; }
    .docs-nav { position: static; flex-direction: row; flex-wrap: wrap; padding: 12px; }
    .docs-nav-title { display: none; }
    .docs-nav-item { padding: 8px 14px; font-size: 12px; }
}

/* ============================================================
   CARD DETAIL COMPONENTS
   ============================================================ */
.cd-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 20px 24px;
}
[data-theme="light"] .cd-section {
    background: #FFFFFF;
    border-color: #E2E8F0;
}
.cd-qr-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 24px 28px;
    max-width: 560px;
}

/* CardDetail 3-column and 2-column grids */
.cd-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.cd-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
@media (max-width: 1100px) {
    .cd-grid-3 { grid-template-columns: 1fr; }
    .cd-grid-2 { grid-template-columns: 1fr; }
}

.cd-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 24px 28px;
    display: flex; flex-direction: column;
}
.cd-hint { font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 12px; }

/* History card with fixed height to match QR card */
.cd-history-card {
    max-height: 100%;
    overflow: hidden;
    display: flex; flex-direction: column;
}
#cd-qr-card { display: flex; flex-direction: column; }

.cd-grid-2 { align-items: stretch; }
.cd-grid-2 > .cd-section { height: 100%; }

.cd-history-scroll {
    flex: 1;
    overflow-y: auto;
    max-height: 420px;
    padding-right: 8px;
    margin-right: -8px;
}

/* Custom scrollbar (dark theme) */
.cd-history-scroll::-webkit-scrollbar { width: 6px; }
.cd-history-scroll::-webkit-scrollbar-track { background: transparent; }
.cd-history-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
.cd-history-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
[data-theme="light"] .cd-history-scroll::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
[data-theme="light"] .cd-history-scroll::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* Timeline */
.cd-timeline {
    position: relative;
    padding-left: 20px;
}
.cd-timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: rgba(255,255,255,0.08);
}
[data-theme="light"] .cd-timeline::before { background: #E2E8F0; }

.cd-timeline-item {
    position: relative;
    padding-bottom: 16px;
}
.cd-timeline-item:last-child { padding-bottom: 0; }

.cd-timeline-dot {
    position: absolute;
    left: -19px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-bg-base);
    border: 2px solid var(--color-accent);
    z-index: 1;
}
[data-theme="light"] .cd-timeline-dot {
    background: #FFFFFF;
    border-color: #4F46E5;
}

.cd-timeline-body {
    padding-left: 4px;
}
.cd-timeline-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    line-height: 1.4;
}
[data-theme="light"] .cd-timeline-title { color: #0F172A; }

.cd-timeline-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
}
[data-theme="light"] .cd-timeline-meta { color: #64748B; }

/* pro-detail overrides for cd-section */
.cd-section .pro-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 13px;
}
.cd-section .pro-detail-row:last-child { border-bottom: none; }
[data-theme="light"] .cd-section .pro-detail-row { border-color: #F1F5F9; }
.cd-section .pro-detail-label { color: rgba(255,255,255,0.5); }
.cd-section .pro-detail-value { color: rgba(255,255,255,0.9); font-weight: 500; }
[data-theme="light"] .cd-section .pro-detail-label { color: #64748B; }
[data-theme="light"] .cd-section .pro-detail-value { color: #0F172A; }
.cd-section-title {
    font-size: 14px; font-weight: 600;
    color: rgba(255,255,255,0.5);
    margin: 0 0 20px;
    display: flex; align-items: center; gap: 8px;
}
.cd-qr-preview {
    margin-bottom: 20px;
    display: flex; justify-content: center;
}
.cd-qr-preview img {
    max-width: 280px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
}

/* Upload zone */
.cd-upload-zone {
    display: flex; align-items: center; gap: 16px;
    padding: 24px;
    border: 2px dashed rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.02);
}
.cd-upload-zone:hover {
    border-color: var(--color-accent);
    background: rgba(143, 255, 0, 0.03);
}
.cd-upload-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(143, 255, 0, 0.08);
    color: var(--color-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
    transition: all 0.2s ease;
}
.cd-upload-zone:hover .cd-upload-icon {
    background: rgba(143, 255, 0, 0.15);
    transform: translateY(-2px);
}
.cd-upload-text {
    display: flex; flex-direction: column; gap: 2px;
}
.cd-upload-title {
    font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.7);
}
.cd-upload-hint {
    font-size: 12px; color: rgba(255,255,255,0.3);
}

/* ============================================================
   22. SETTINGS PAGE
   ============================================================ */
.settings-sections { display: flex; flex-direction: column; gap: var(--space-5); max-width: 640px; }
.settings-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    align-items: start;
}
.settings-col {
    display: flex; flex-direction: column; gap: var(--space-5);
}
@media (max-width: 900px) {
    .settings-grid-2col { grid-template-columns: 1fr; }
}

.settings-section {
    background: var(--color-bg-surface);
    border: none;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.settings-section-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    display: flex; align-items: center; gap: var(--space-3);
}

.settings-section-icon {
    width: 32px; height: 32px; border-radius: var(--radius-md);
    background: var(--color-accent-dim);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-accent); font-size: 14px;
}

.settings-section-title { font-size: var(--font-md); font-weight: 700; color: var(--color-text-primary); }
.settings-section-body { padding: var(--space-5); }

.settings-field {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; border-bottom: 1px solid var(--color-border);
    gap: var(--space-4);
}
.settings-field:last-child { border-bottom: none; }
.settings-field-info { flex: 1; }
.settings-field-label { font-size: var(--font-sm); font-weight: 700; color: var(--color-text-primary); }
.settings-field-desc { font-size: var(--font-xs); color: var(--color-text-muted); margin-top: 2px; }

.telegram-step { display: flex; flex-direction: column; gap: var(--space-4); animation: slide-down 0.24s ease; }
.telegram-waiting { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-secondary); font-size: var(--font-sm); font-weight: 600; }
.telegram-connected { display: flex; align-items: center; gap: var(--space-3); color: var(--color-success); font-size: var(--font-sm); font-weight: 700; }

.section-locked { opacity: 0.45; pointer-events: none; }
.section-lock-notice { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-sm); color: var(--color-text-muted); padding: var(--space-3); background: var(--color-bg-overlay); border-radius: var(--radius-md); font-weight: 600; }

/* ============================================================
   23. CONFIRM DIALOG
   ============================================================ */
.confirm-modal { max-width: 340px; }
.confirm-modal .modal-body { text-align: center; padding: var(--space-8) var(--space-6); }

.confirm-icon {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; margin: 0 auto var(--space-4);
}
.confirm-icon.danger  { background: var(--color-danger-dim);  color: var(--color-danger); }
.confirm-icon.warning { background: var(--color-warning-dim); color: var(--color-warning); }

.confirm-title { font-size: var(--font-md); font-weight: 700; color: var(--color-text-primary); margin-bottom: var(--space-2); }
.confirm-desc { font-size: var(--font-sm); color: var(--color-text-secondary); line-height: 1.5; }

/* ============================================================
   24. SPINNER
   ============================================================ */
/* -- Atlas Spinner -- */
.spinner {
    display: inline-block; position: relative;
    width: 20px; height: 20px; flex-shrink: 0;
}
.spinner::before, .spinner::after {
    content: ''; position: absolute; inset: 0;
    border-radius: 50%;
}
.spinner::before {
    border: 2px solid rgba(143, 255, 0, 0.15);
}
.spinner::after {
    border: 2px solid transparent;
    border-top-color: #8FFF00;
    animation: atlas-spin 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.spinner-sm { width: 14px; height: 14px; }
.spinner-lg {
    width: 44px; height: 44px;
}
.spinner-lg::before { border-width: 3px; }
.spinner-lg::after { border-width: 3px; }

/* Orbital ring effect for lg */
.spinner-lg::before {
    border: 3px solid rgba(143, 255, 0, 0.08);
    animation: atlas-pulse 2s ease-in-out infinite;
}

@keyframes atlas-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes atlas-pulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.15); opacity: 0.08; }
}

/* ============================================================
   25. EMPTY STATE
   ============================================================ */
.empty-state {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center;
    min-height: 50vh;
    color: var(--color-text-muted); gap: var(--space-3); text-align: center;
}
.empty-state i { font-size: 32px; opacity: 0.4; }
.empty-state-title { font-size: var(--font-md); font-weight: 700; color: var(--color-text-secondary); }
.empty-state-desc { font-size: var(--font-sm); }

/* ============================================================
   26. UTILITIES
   ============================================================ */
.text-muted     { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-accent    { color: var(--color-accent); }
.text-success   { color: var(--color-success); }
.text-danger    { color: var(--color-danger); }
.text-warning   { color: var(--color-warning); }
.text-sm        { font-size: var(--font-sm); }
.text-xs        { font-size: var(--font-xs); }
.text-bold      { font-weight: 700; }
.text-mono      { font-family: 'Courier New', monospace; }
.d-flex         { display: flex; }
.align-center   { align-items: center; }
.gap-1          { gap: var(--space-1); }
.gap-2          { gap: var(--space-2); }
.gap-3          { gap: var(--space-3); }
.gap-4          { gap: var(--space-4); }
.mb-2           { margin-bottom: var(--space-2); }
.mb-4           { margin-bottom: var(--space-4); }
.mb-6           { margin-bottom: var(--space-6); }
.mt-4           { margin-top: var(--space-4); }
.w-full         { width: 100%; }

/* ============================================================
   27. ANIMATIONS
   ============================================================ */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.pulse { animation: pulse 1.5s ease-in-out infinite; }

/* ============================================================
   28. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ============================================================
   29. USER DETAIL PAGE
   ============================================================ */
.user-detail-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-5);
    align-items: start;
}
.user-detail-main { display: flex; flex-direction: column; gap: var(--space-5); }
.user-detail-aside { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: var(--space-5); }

/* ============================================================
   30. GLASSMORPHISM → SOLID CARDS
   ============================================================ */
.glass-card {
    background: var(--color-bg-surface);
    border: none;
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.glass-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-dropdown);
}

.glass-bar {
    background: var(--color-bg-surface);
    border: none;
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-card);
}

/* -- Glass buttons -- */
.glass-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-2); padding: 10px var(--space-5);
    border-radius: var(--radius-full); font-size: var(--font-sm);
    font-weight: 700; cursor: pointer; border: none;
    transition: all 180ms ease; width: 100%;
}
.glass-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.glass-btn-accent {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
}
.glass-btn-accent:hover:not(:disabled) {
    background: var(--color-accent-hover);
    box-shadow: 0 0 16px rgba(143, 255, 0, 0.3);
    transform: translateY(-1px);
}

.glass-btn-outline {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}
.glass-btn-outline:hover:not(:disabled) {
    background: var(--color-bg-hover);
    border-color: var(--color-border-strong);
}

.glass-btn-ghost {
    background: transparent; border: none;
    color: var(--color-text-secondary);
    padding: 10px var(--space-4);
}
.glass-btn-ghost:hover { color: var(--color-text-primary); }
.glass-btn-sm { width: auto; padding: 8px var(--space-4); font-size: var(--font-sm); }

/* ============================================================
   31. PROFILE PAGE
   ============================================================ */
.profile-page {
    display: flex; flex-direction: column;
    gap: var(--space-4);
}
.profile-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-4);
    align-items: start;
}
.profile-col {
    display: flex; flex-direction: column; gap: var(--space-4);
}

/* -- Topbar -- */
.profile-topbar {
    display: flex; align-items: center; justify-content: space-between;
}
.topbar-left {
    display: flex; align-items: center; gap: var(--space-3);
}
.topbar-avatar {
    width: 40px; height: 40px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-md); font-weight: 800; color: var(--color-text-on-accent);
    flex-shrink: 0;
}
.topbar-name { font-size: var(--font-md); font-weight: 700; }
.topbar-role { font-size: var(--font-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

.geo-pill { position: relative; }
.geo-select-pill {
    appearance: none; -webkit-appearance: none;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-primary);
    padding: 8px 32px 8px 14px;
    font-size: var(--font-sm); font-weight: 600;
    cursor: pointer; font-family: var(--font-family);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239CA3AF' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.geo-select-pill:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* -- Traffic -- */
.traffic-glass { position: relative; }
.traffic-glow {
    position: absolute; top: -40px; right: -40px;
    width: 120px; height: 120px; border-radius: 50%;
    filter: blur(50px); opacity: 0.2; pointer-events: none;
}
.glow-green { background: var(--color-accent); }
.glow-red { background: var(--color-danger); }
.traffic-body {
    display: flex; align-items: center; justify-content: space-between;
    position: relative; z-index: 1;
}
.traffic-left { display: flex; align-items: center; gap: var(--space-4); }
.traffic-indicator {
    width: 44px; height: 44px; border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-lg);
}
.ind-on { background: var(--color-success-dim); color: var(--color-success); }
.ind-off { background: var(--color-danger-dim); color: var(--color-danger); }
.traffic-state { font-size: var(--font-md); font-weight: 700; }
.traffic-hint { font-size: var(--font-xs); color: var(--color-text-muted); }

/* -- Toggle (shared) -- */
.toggle-switch {
    position: relative; display: inline-block;
    width: 44px; height: 24px; flex-shrink: 0;
}
.toggle-lg { width: 52px; height: 28px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: var(--color-border-strong);
    border-radius: var(--radius-full);
    transition: background 250ms ease;
}
.toggle-slider::before {
    content: ""; position: absolute;
    height: 18px; width: 18px; left: 3px; bottom: 3px;
    background: white; border-radius: 50%;
    transition: transform 250ms cubic-bezier(.4,0,.2,1);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.toggle-lg .toggle-slider::before {
    height: 22px; width: 22px;
}
.toggle-switch input:checked + .toggle-slider { background: var(--color-accent); }
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
    box-shadow: 0 0 8px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,255,255,0.15);
}
.toggle-lg input:checked + .toggle-slider::before { transform: translateX(24px); }

/* -- Balance row -- */
.balance-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}
.balance-glass {
    display: flex; flex-direction: column;
    gap: var(--space-3);
}
.balance-usdt { border-color: var(--color-accent-dim); }
.bal-top {
    display: flex; align-items: center; justify-content: space-between;
}
.bal-label {
    font-size: var(--font-xs); font-weight: 700; color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.bal-eye {
    background: none; border: none; color: var(--color-text-muted);
    cursor: pointer; font-size: var(--font-sm); padding: 4px;
    border-radius: var(--radius-sm);
    transition: color var(--transition);
}
.bal-eye:hover { color: var(--color-text-primary); }
.bal-usdt-badge {
    font-size: 10px; font-weight: 800;
    color: var(--color-accent); background: var(--color-accent-dim);
    padding: 2px 8px; border-radius: var(--radius-full);
    letter-spacing: 0.5px;
}
.bal-amount {
    display: flex; align-items: baseline; gap: var(--space-2);
    margin: var(--space-1) 0;
}
.bal-big {
    font-size: 28px; font-weight: 800;
    color: var(--color-text-primary);
    letter-spacing: -0.8px;
    font-variant-numeric: tabular-nums;
}
.bal-cur {
    font-size: var(--font-sm); font-weight: 700;
    color: var(--color-text-muted);
}
.bal-actions {
    display: flex; gap: var(--space-2); margin-top: auto;
}

/* -- Deposit progress -- */
.deposit-progress {
    width: 100%; height: 4px;
    background: var(--color-bg-overlay); border-radius: var(--radius-full);
    margin-top: var(--space-2); overflow: hidden;
}
.deposit-bar {
    height: 100%; border-radius: var(--radius-full);
    background: var(--color-accent);
    transition: width 0.4s ease;
}
.bal-hint {
    font-size: var(--font-xs); margin-top: var(--space-1);
    display: flex; align-items: center; gap: 4px;
}

/* -- Traffic deposit warning -- */
.traffic-deposit-warn {
    font-size: var(--font-xs); color: var(--color-warning);
    padding: var(--space-2) var(--space-4);
    display: flex; align-items: center; gap: 6px;
    border-top: 1px solid var(--color-border);
}

/* -- Rates -- */
.rates-glass { padding: var(--space-5); }
.rates-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-4);
}
.rates-title { font-size: var(--font-md); font-weight: 700; }
.rates-time {
    font-size: var(--font-xs); color: var(--color-text-muted);
    background: var(--color-bg-elevated); padding: 4px 10px;
    border-radius: var(--radius-full);
}
.rates-row {
    display: flex; align-items: center; gap: var(--space-4);
}
.rate-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-bg-overlay);
    border-radius: var(--radius-lg);
}
.rate-badges {
    display: flex; align-items: center; gap: var(--space-2);
}
.r-badge {
    font-size: 10px; font-weight: 800;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); padding: 2px 8px;
    letter-spacing: 0.4px;
}
.rate-arrow { font-size: 10px; color: var(--color-text-muted); }
.rate-num {
    font-size: 24px; font-weight: 800;
    color: var(--color-text-primary);
    letter-spacing: -0.6px;
    font-variant-numeric: tabular-nums;
}
.rate-divider {
    width: 1px; height: 50px;
    background: var(--color-border);
    flex-shrink: 0;
}

/* -- Profile info card -- */
.profile-info-glass { padding: 0; }
.pinfo-header {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}
.pinfo-icon {
    width: 32px; height: 32px; border-radius: var(--radius-md);
    background: var(--color-accent-dim); color: var(--color-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-sm);
}
.pinfo-title { font-size: var(--font-md); font-weight: 700; }
.pinfo-rows { padding: var(--space-2) 0; }
.pinfo-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--space-5);
    transition: background 120ms ease;
}
.pinfo-row:hover { background: var(--color-bg-overlay); }
.pinfo-label {
    font-size: var(--font-sm); font-weight: 600;
    color: var(--color-text-secondary);
}
.pinfo-val { font-size: var(--font-sm); font-weight: 600; }
.pinfo-id { color: var(--color-accent); font-variant-numeric: tabular-nums; }

/* ============================================================
   32. GLASS MODALS
   ============================================================ */
.glass-modal {
    background: var(--color-bg-surface);
    border: none;
    border-radius: var(--radius-2xl);
    width: 100%; max-width: 440px;
    box-shadow: var(--shadow-modal);
    animation: slide-up var(--transition-spring) cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.glass-modal-lg { max-width: 560px; }
.glass-modal-xl { max-width: 720px; max-height: 90vh; display: flex; flex-direction: column; }
.glass-modal-xl > .gm-body { overflow-y: auto; flex: 1; min-height: 0; }

.gm-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-5) var(--space-5) 0;
}
.gm-title {
    font-size: var(--font-lg); font-weight: 700;
    display: flex; align-items: center; gap: var(--space-2);
}
.gm-body { padding: var(--space-5); }
.gm-footer {
    display: flex; justify-content: flex-end; gap: var(--space-3);
    padding: 0 var(--space-5) var(--space-5);
}
.gm-icon-circle {
    width: 40px; height: 40px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-md);
}
.gm-icon-accent {
    background: var(--color-accent-dim); color: var(--color-accent);
}

/* -- Step dots -- */
.step-dots {
    display: flex; align-items: center; justify-content: center;
    gap: 0; padding: var(--space-4) var(--space-5) 0;
}

/* -- Modal fields -- */
.gm-step-title {
    font-size: var(--font-sm); font-weight: 700;
    color: var(--color-text-muted); text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: var(--space-4);
}
.gm-balance-pill {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--color-bg-overlay); border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
    font-size: var(--font-sm);
}
.gm-balance-val { font-weight: 700; color: var(--color-success); }

.gm-equiv {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-accent-dim); border-radius: var(--radius-lg);
    font-size: var(--font-sm); font-weight: 600; color: var(--color-accent);
    margin-bottom: var(--space-4);
}

/* -- TopUp step 2 -- */
.topup-auto-notice {
    display: flex; align-items: flex-start; gap: var(--space-3);
    background: var(--color-info-dim); border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-sm); color: var(--color-info);
    margin-bottom: var(--space-4); line-height: 1.5;
}
.topup-auto-notice i { margin-top: 3px; flex-shrink: 0; }

.topup-field {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.topup-field-label {
    font-size: var(--font-xs); font-weight: 700; color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.3px;
}
.topup-field-val {
    font-size: var(--font-sm); font-weight: 600;
    word-break: break-all; text-align: right; max-width: 240px;
}
.topup-field-id { color: var(--color-accent); }
.topup-field-wallet { font-family: monospace; font-size: var(--font-xs); }

.topup-amount-box {
    margin: var(--space-4) 0;
    background: var(--color-success-dim);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
}
.topup-amount-label {
    font-size: var(--font-xs); font-weight: 700;
    color: var(--color-text-muted); text-transform: uppercase;
    margin-bottom: var(--space-2);
}
.topup-amount-val {
    font-size: 22px; font-weight: 800; color: var(--color-success);
    letter-spacing: -0.3px; font-variant-numeric: tabular-nums;
}

.topup-qr-wrap {
    display: flex; justify-content: center;
    margin: var(--space-3) 0;
}
.topup-qr-box {
    width: 120px; height: 120px;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--color-text-muted); font-size: 2.5rem;
    gap: var(--space-1);
}
.topup-qr-box span { font-size: var(--font-xs); }

.topup-warn {
    background: var(--color-warning-dim); border-radius: var(--radius-lg);
    padding: var(--space-4);
    font-size: var(--font-sm); color: var(--color-text-primary);
    display: flex; align-items: flex-start; gap: var(--space-3);
    line-height: 1.6;
    border: 1px solid var(--color-warning);
}
.topup-warn i {
    color: var(--color-warning); font-size: var(--font-lg);
    flex-shrink: 0; margin-top: 1px;
}
.topup-warn strong { color: var(--color-warning); }

/* ============================================================
   33. ADMIN EXTRAS
   ============================================================ */
.wallet-cell {
    font-family: monospace; font-size: var(--font-xs);
    color: var(--color-text-secondary);
}

/* ============================================================
   34. TICKET SYSTEM
   ============================================================ */

/* -- Summary cards -- */
.ticket-summary-row {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4); margin-bottom: var(--space-4);
}
.ticket-summary-card {
    background: var(--color-bg-overlay);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 100%);
    border: none;
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-5);
    display: flex; align-items: center; gap: var(--space-4);
    box-shadow: var(--shadow-sm);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.ticket-summary-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.tsc-icon {
    width: 44px; height: 44px; border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-lg);
}
.tsc-new .tsc-icon { background: var(--color-danger-dim); color: var(--color-danger); }
.tsc-open .tsc-icon { background: var(--color-info-dim); color: var(--color-info); }
.tsc-resolved .tsc-icon { background: var(--color-success-dim); color: var(--color-success); }
.tsc-high .tsc-icon { background: var(--color-warning-dim); color: var(--color-warning); }
.tsc-info { display: flex; flex-direction: column; }
.tsc-label {
    font-size: 10px; font-weight: 800; color: var(--color-text-muted);
    letter-spacing: 0.5px;
}
.tsc-count { font-size: 26px; font-weight: 800; color: var(--color-text-primary); line-height: 1.1; }
.tsc-sub { font-size: var(--font-xs); color: var(--color-text-muted); }

/* -- Toolbar -- */
.ticket-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); margin-bottom: var(--space-3);
}
.ticket-search {
    display: flex; align-items: center; gap: var(--space-2);
    background: var(--color-bg-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-full); padding: 0 var(--space-4);
    flex: 1; max-width: 480px;
}
.ticket-search i { color: var(--color-text-muted); font-size: var(--font-sm); }
.ticket-search .form-input {
    border: none; background: transparent;
    padding: 10px 0; flex: 1; font-size: var(--font-sm);
}
.ticket-search .form-input:focus { outline: none; box-shadow: none; }

/* -- Status tabs -- */
.ticket-tabs {
    display: flex; gap: var(--space-1);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0;
}
.ticket-tab {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--color-text-secondary); font-size: var(--font-sm);
    font-weight: 600; cursor: pointer;
    transition: all 150ms ease;
    margin-bottom: -1px;
}
.ticket-tab:hover { color: var(--color-text-primary); }
.ticket-tab-active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}
.ticket-tab-sm { padding: var(--space-1) var(--space-3); font-size: 0.8rem; }
.ticket-tab-count {
    background: var(--color-bg-elevated);
    padding: 2px 8px; border-radius: var(--radius-full);
    font-size: 11px; font-weight: 700;
}
.ticket-tab-active .ticket-tab-count {
    background: var(--color-accent-dim);
    color: var(--color-accent);
}

/* -- Ticket detail -- */
.ticket-detail-body { display: flex; flex-direction: column; gap: var(--space-4); }

.ticket-id-badge {
    font-size: var(--font-sm); font-weight: 800;
    color: var(--color-accent); background: var(--color-accent-dim);
    padding: 4px 12px; border-radius: var(--radius-full);
    font-variant-numeric: tabular-nums;
}

.ticket-info-bar {
    display: flex; flex-wrap: wrap; gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-overlay);
    border-radius: var(--radius-lg);
}
.ticket-info-item {
    display: flex; flex-direction: column; gap: 2px;
}

.ticket-description {
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-overlay);
    border-radius: var(--radius-lg);
}
.ticket-desc-label {
    font-size: var(--font-xs); font-weight: 700;
    color: var(--color-text-muted); text-transform: uppercase;
    margin-bottom: var(--space-2);
}
.ticket-description p {
    font-size: var(--font-sm); color: var(--color-text-primary);
    line-height: 1.6; margin: 0;
}

.ticket-screenshot { text-align: center; }
.ticket-screenshot-img {
    max-width: 100%; max-height: 300px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

/* -- Messages list -- */
.ticket-messages-label {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--font-sm); font-weight: 700;
    color: var(--color-text-secondary);
}
.ticket-messages-list {
    display: flex; flex-direction: column; gap: var(--space-3);
    margin-top: var(--space-3);
}
.ticket-msg {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}
.ticket-msg-admin {
    background: var(--color-accent-dim);
    border-color: rgba(143, 255, 0, 0.2);
}
.ticket-msg-user { background: var(--color-bg-overlay); }
.ticket-msg-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-2);
}
.ticket-msg-name { font-size: var(--font-sm); font-weight: 700; }
.ticket-msg-body {
    font-size: var(--font-sm); color: var(--color-text-primary);
    line-height: 1.6; white-space: pre-wrap;
}
.ticket-msg-attachment {
    display: inline-flex; align-items: center; gap: var(--space-1);
    margin-top: var(--space-2); font-size: var(--font-xs);
    color: var(--color-accent); text-decoration: none; font-weight: 600;
}
.ticket-msg-attachment:hover { text-decoration: underline; }

/* -- Reply form -- */
.ticket-reply {
    display: flex; flex-direction: column; gap: var(--space-2);
}
.ticket-reply-actions {
    display: flex; align-items: center; justify-content: space-between;
}

/* -- Priority selector -- */
.priority-selector { display: flex; gap: var(--space-2); }
.priority-btn {
    flex: 1; display: flex; align-items: center; justify-content: center;
    gap: var(--space-2); padding: 10px var(--space-3);
    border-radius: var(--radius-lg); border: 1px solid var(--color-border);
    background: var(--color-bg-surface); color: var(--color-text-secondary);
    font-size: var(--font-sm); font-weight: 600; cursor: pointer;
    transition: all 150ms ease;
}
.priority-btn:hover { border-color: var(--color-border-strong); }
.priority-active { font-weight: 700; }
.priority-low { border-color: var(--color-success); color: var(--color-success); background: var(--color-success-dim); }
.priority-medium { border-color: var(--color-warning); color: var(--color-warning); background: var(--color-warning-dim); }
.priority-high { border-color: var(--color-danger); color: var(--color-danger); background: var(--color-danger-dim); }
.priority-dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-low { background: var(--color-success); }
.dot-medium { background: var(--color-warning); }
.dot-high { background: var(--color-danger); }

/* -- Upload zone -- */
.upload-zone {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: var(--space-2);
    padding: var(--space-5);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer; transition: all 150ms ease;
}
.upload-zone:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-dim);
}
.upload-zone-filled {
    flex-direction: row; padding: var(--space-3) var(--space-4);
    border-style: solid; border-color: var(--color-success);
    background: var(--color-success-dim);
}
.upload-zone-icon { font-size: var(--font-lg); color: var(--color-text-muted); }
.upload-zone-text { font-size: var(--font-sm); font-weight: 600; color: var(--color-text-secondary); }
.upload-zone-hint { font-size: var(--font-xs); color: var(--color-text-muted); }

/* ============================================================
   35. CARD DETAIL LAYOUT
   ============================================================ */
.card-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.card-detail-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.detail-section {
    background: var(--color-bg-surface);
    border: none;
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}
.detail-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3) 0;
}
.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
}
.detail-row:last-child { border-bottom: none; }
.detail-label {
    color: var(--color-text-secondary);
    min-width: 120px;
}

/* -- History Entries -- */
.history-entry {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.history-entry:last-child { border-bottom: none; }
.history-entry-icon { color: var(--color-accent); padding-top: 2px; }
.history-entry-title { font-size: 0.875rem; font-weight: 500; }
.history-entry-meta { font-size: 0.75rem; color: var(--color-text-secondary); margin-top: 2px; }

/* -- QR upload zone -- */
.qr-upload-zone {
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
}

/* ============================================================
   36. PAY-IN & MERCHANTS
   ============================================================ */

/* -- View toggle -- */
.view-toggle {
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.view-toggle-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: transparent; border: none;
    color: var(--color-text-secondary); cursor: pointer;
    transition: all 180ms ease;
    font-size: var(--font-sm);
}
.view-toggle-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.view-toggle-active { background: var(--color-accent-dim); color: var(--color-accent); }

/* -- PayIn grid -- */
.payin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-4);
}

.payin-card {
    background: var(--color-bg-surface);
    border: none;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 200ms ease;
    border-left: 4px solid var(--color-border);
}
.payin-card:hover { box-shadow: var(--shadow-md); }
.payin-card-waiting  { border-left-color: var(--color-warning); }
.payin-card-completed { border-left-color: var(--color-success); }
.payin-card-expired  { border-left-color: var(--color-danger); }
.payin-card-failed   { border-left-color: var(--color-danger); }

.payin-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.payin-card-merchant {
    font-size: var(--font-sm); font-weight: 700;
    display: flex; align-items: center; gap: var(--space-2);
}
.payin-card-id {
    font-size: 10px; color: var(--color-text-muted);
    font-family: 'Courier New', monospace;
    padding: var(--space-1) 0;
}
.payin-card-body { padding: var(--space-3) var(--space-4); }
.payin-card-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 3px 0; font-size: var(--font-sm);
}
.payin-card-label { color: var(--color-text-secondary); font-weight: 500; }
.payin-card-value { font-weight: 600; color: var(--color-text-primary); }
.payin-card-amount {
    font-size: var(--font-lg); font-weight: 800;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}

.payin-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    gap: var(--space-2);
}

/* -- Countdown -- */
.payin-countdown {
    font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
    padding: 2px 8px; border-radius: var(--radius-full);
}
.payin-countdown-urgent { color: var(--color-danger); background: var(--color-danger-dim); animation: pulse 1.5s ease-in-out infinite; }
.payin-countdown-normal { color: var(--color-warning); background: var(--color-warning-dim); }

/* -- Auto-refresh indicator -- */
.refresh-indicator {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: 11px; color: var(--color-text-muted); font-weight: 600;
}
.refresh-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-accent);
    animation: pulse 2s ease-in-out infinite;
}

/* -- Merchant key cell -- */
.merchant-key-cell {
    font-family: 'Courier New', monospace;
    font-size: 11px; font-weight: 600;
    color: var(--color-accent); letter-spacing: 0.3px;
    max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* -- Accumulation progress bar -- */
.accum-bar { height: 4px; border-radius: 2px; background: var(--color-bg-elevated); margin-top: var(--space-1); overflow: hidden; }
.accum-bar-fill { height: 100%; border-radius: 2px; background: var(--color-accent); transition: width 300ms ease; }

/* -- Confirm section -- */
.confirm-section {
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: var(--color-warning-dim);
    margin-top: var(--space-4);
}
.confirm-section .detail-section-title { color: var(--color-warning); }

/* ============================================================
   37. RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .topbar { padding: 0 var(--space-3); height: 56px; }
    .topbar__title { display: none; }
    .topbar__pill { padding: 3px; }
    /* Scope old pill-label hiding to topbar pill only — mobile drawer needs labels */
    .topbar__pill .nav-item span { display: none; }
    .topbar__pill .nav-item { padding: 8px 10px; font-size: 12px; }
    .topbar__pill .nav-item.active i { display: inline-block; font-size: 13px; }
    .drawer { width: 100%; border-radius: 0; }
    .main-content, .main { padding: var(--space-4); }
    .login-card { padding: var(--space-8) var(--space-5); }
    .ticket-summary-row { grid-template-columns: repeat(2, 1fr); }
    .ticket-toolbar { flex-direction: column; align-items: stretch; }
    .ticket-search { max-width: 100%; }
    .ticket-tabs { overflow-x: auto; }
    .form-row-2col, .form-row { grid-template-columns: 1fr; }
    .payin-grid { grid-template-columns: 1fr; }
    .view-toggle { display: none; }
    .card-detail-grid, .card-detail-grid-3 { grid-template-columns: 1fr; }
    .profile-grid { grid-template-columns: 1fr; }
    .balance-row { grid-template-columns: 1fr; }
    .rates-row { flex-direction: column; }
    .rate-divider { width: 100%; height: 1px; }
}

@media (max-width: 1200px) {
    .nav-item { padding: 6px 12px; font-size: 12px; }
    .topbar__pill { padding: 3px; }
}

/* ============================================================
   38. PROFILE PAGE — Atlas Dashboard
   ============================================================ */
.pro {
    display: flex; flex-direction: column;
    gap: var(--space-5);
    animation: fade-in 300ms ease;
}

.pro-topbar {
    display: flex; align-items: center; justify-content: space-between;
}

/* -- DASHBOARD 2-COL LAYOUT -- */
.dash-row {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px;
    align-items: stretch;
}
.dash-right {
    display: flex; flex-direction: column; gap: 16px;
}
.dash-right .rates-card {
    flex: 1;
}

/* -- BALANCE CARD (3 balances + user header) -- */
.bal-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
    animation: cardIn 400ms ease both;
}

/* User identity inside balance card */
.bal-user {
    display: flex; align-items: center; gap: 14px;
    padding: 20px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.bal-user-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    border: 2px solid rgba(143, 255, 0, 0.4);
}
.bal-user-avatar--fb {
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 800; color: var(--color-text-on-accent);
}
.bal-user-info { display: flex; flex-direction: column; }
.bal-user-name { font-size: 15px; font-weight: 700; color: #fff; }
.bal-user-role {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; color: rgba(255,255,255,0.4);
}

/* Balance columns */
.bal-cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
}
.bal-col {
    padding: 24px 28px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex; flex-direction: column; gap: 6px;
}
.bal-col:last-child { border-right: none; }
.bal-col-accent {
    background: linear-gradient(135deg, rgba(143, 255, 0, 0.08) 0%, rgba(143, 255, 0, 0.02) 100%);
}

.bal-header {
    display: flex; align-items: center; justify-content: space-between;
}
.bal-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; color: rgba(255,255,255,0.45);
}
.bal-label-accent { color: rgba(143, 255, 0, 0.6); }
.bal-eye-btn {
    background: none; border: none; color: rgba(255,255,255,0.3);
    cursor: pointer; font-size: 14px; padding: 2px;
    transition: color 0.2s ease;
}
.bal-eye-btn:hover { color: rgba(255,255,255,0.6); }
.bal-usdt-tag {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    background: rgba(143, 255, 0, 0.15); color: var(--color-accent);
    padding: 3px 8px; border-radius: 6px;
}

.bal-value {
    display: flex; align-items: baseline; gap: 4px;
    margin: 4px 0;
}
.bal-prefix {
    font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.4);
}
.bal-prefix-accent { color: rgba(143, 255, 0, 0.5); }
.bal-usdt-icon { width: 26px; height: 26px; flex-shrink: 0; }
.bal-number {
    font-size: 32px; font-weight: 700; color: #fff;
    letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.bal-number-lg { font-size: 32px; }
.bal-number-accent { color: var(--color-accent); }
.bal-sub {
    font-size: 12px; color: rgba(255,255,255,0.35);
}

.bal-actions {
    display: flex; gap: 10px; margin-top: 16px;
}
.bal-btn-outline {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff; padding: 10px 20px;
    border-radius: 9999px; font-size: 13px; font-weight: 500;
    cursor: pointer; font-family: var(--font-family);
    transition: all 0.2s ease;
}
.bal-btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
}
.bal-btn-primary {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--color-accent); border: none;
    color: var(--color-text-on-accent); padding: 10px 20px;
    border-radius: 9999px; font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: var(--font-family);
    transition: all 0.2s ease;
}
.bal-btn-primary:hover {
    background: var(--color-accent-hover);
    transform: scale(1.02);
}

.bal-deposit-bar {
    width: 100%; height: 4px;
    background: rgba(143, 255, 0, 0.1); border-radius: 2px;
    overflow: hidden; margin-top: 4px;
}
.bal-deposit-fill {
    height: 100%; border-radius: 2px;
    background: var(--color-accent);
    transition: width 0.4s ease;
}
.bal-deposit-status {
    font-size: 12px; font-weight: 500;
    display: flex; align-items: center; gap: 4px;
    margin-top: 8px;
}
.bal-deposit-ok { color: var(--color-accent); }
.bal-deposit-warn { color: var(--color-warning); }

/* -- TRAFFIC CARD (right column) -- */
.trf-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 20px 24px;
    display: flex; align-items: center; gap: 16px;
}
.trf-icon {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.trf-icon-on { background: rgba(143, 255, 0, 0.1); color: var(--color-accent); }
.trf-icon-off { background: var(--color-danger-dim); color: var(--color-danger); }
.trf-text { flex: 1; }
.trf-title { font-size: 15px; font-weight: 600; color: #fff; }
.trf-hint { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 2px; }

.rates-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 20px 24px;
    display: flex; flex-direction: column; gap: 16px;
}
.rates-top {
    display: flex; align-items: center; justify-content: space-between;
}
.rates-title { font-size: 15px; font-weight: 600; white-space: nowrap; }
.rates-pairs-col { display: flex; flex-direction: column; gap: 14px; }
.rates-pairs { display: flex; align-items: center; gap: 20px; flex: 1; }
.rates-pair {
    display: grid;
    grid-template-columns: 42px 16px 42px 1fr;
    align-items: center; gap: 8px;
}
.rates-badge {
    font-size: 11px; font-weight: 600;
    background: rgba(255,255,255,0.08); border-radius: 6px;
    padding: 4px 8px; text-align: center;
}
.rates-arrow { font-size: 10px; color: rgba(255,255,255,0.3); text-align: center; }
.rates-val {
    font-size: 20px; font-weight: 700; color: #fff;
    letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
    text-align: right;
}
.rates-divider {
    width: 1px; height: 28px;
    background: rgba(255,255,255,0.06); flex-shrink: 0;
}
.rates-time {
    font-size: 11px; color: rgba(255,255,255,0.3);
    white-space: nowrap; margin-left: auto;
}

/* -- ACTIVITY TABS -- */
.act-tabs-wrap {
    display: flex; align-items: center; gap: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 9999px; padding: 4px;
    width: fit-content;
}
.act-tab {
    padding: 8px 16px; border-radius: 9999px;
    font-size: 13px; font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer; border: none; background: transparent;
    font-family: var(--font-family);
    transition: all 0.2s ease;
}
.act-tab:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.04);
}
.act-tab-active {
    background: #fff !important;
    color: #111315 !important;
    font-weight: 600;
}

/* -- ACTIVITY TABLE -- */
.act-table-wrap {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
    min-height: 200px;
}
.act-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 60px 20px;
    text-align: center;
}
.act-empty i { font-size: 48px; margin-bottom: 16px; color: rgba(255,255,255,0.15); }
.act-empty div { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.3); }
.act-empty-sub { font-size: 12px; color: rgba(255,255,255,0.15); margin-top: 4px; }

/* -- Custom GEO dropdown -- */
.pro-geo-dropdown {
    position: relative;
}
.pro-geo-btn {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 8px var(--space-4);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: var(--font-md); font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}
.pro-geo-btn:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-strong);
}
.pro-geo-btn i:first-child {
    color: var(--color-accent); font-size: 14px;
}
.pro-geo-chevron {
    font-size: 10px; color: var(--color-text-muted);
    transition: transform 200ms ease;
    margin-left: var(--space-1);
}
.pro-geo-chevron-open {
    transform: rotate(180deg);
}
.pro-geo-backdrop {
    position: fixed; inset: 0; z-index: 99;
}
.pro-geo-menu {
    position: absolute; top: calc(100% + var(--space-2)); right: 0;
    min-width: 220px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dropdown);
    z-index: 100;
    padding: var(--space-1);
    animation: pop-in 160ms cubic-bezier(.16,1,.3,1);
}
.pro-geo-option {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 10px var(--space-4);
    border: none; border-radius: var(--radius-md);
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--font-md); font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition);
}
.pro-geo-option:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}
.pro-geo-option-active {
    color: var(--color-accent);
    font-weight: 600;
}
.pro-geo-option-active i {
    color: var(--color-accent); font-size: 12px;
}

/* -- Responsive -- */
@media (max-width: 1100px) {
    .dash-row { grid-template-columns: 1fr; }
    .dash-right { flex-direction: row; }
    .bal-cols { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 768px) {
    .bal-cols { grid-template-columns: 1fr; }
    .bal-col { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .bal-col:last-child { border-bottom: none; }
    .dash-right { flex-direction: column; }
    .act-tabs-wrap { overflow-x: auto; width: 100%; }
}

/* ============================================================
   PAGE COMPONENTS (shared across Payments, PayOuts, etc.)
   ============================================================ */

/* -- Page header -- */
.pg-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-5);
}
.pg-title {
    font-size: 24px; font-weight: 700; color: #fff;
    letter-spacing: -0.02em; margin: 0;
}
.pg-subtitle { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 4px; }
.pg-header-right { display: flex; align-items: center; gap: 12px; }

/* -- Stat cards (4-col, same visual as bal-card) -- */
.pg-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px; overflow: hidden;
    margin-bottom: var(--space-5);
    animation: cardIn 400ms ease both;
}
.pg-stat {
    padding: 24px 28px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex; flex-direction: column; gap: 4px;
}
.pg-stat:last-child { border-right: none; }
.pg-stat--accent {
    background: linear-gradient(135deg, rgba(143, 255, 0, 0.08) 0%, rgba(143, 255, 0, 0.02) 100%);
}
.pg-stat-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; color: rgba(255,255,255,0.45);
}
.pg-stat-num {
    font-size: 32px; font-weight: 700; color: #fff;
    letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.pg-stat-num--warn { color: var(--color-warning); }
.pg-stat-num--ok { color: var(--color-success); }
.pg-stat-num--accent { color: var(--color-accent); }
.pg-stat-sub { font-size: 12px; color: rgba(255,255,255,0.35); }

/* -- Toolbar -- */
.pg-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: var(--space-4);
}
.pg-search {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 9999px; padding: 0 16px;
    flex: 1; max-width: 420px;
}
.pg-search i { color: rgba(255,255,255,0.3); font-size: 13px; flex-shrink: 0; }
.pg-search input {
    background: transparent; border: none; outline: none;
    color: #fff; font-family: var(--font-family);
    font-size: 13px; font-weight: 500;
    padding: 10px 0; width: 100%;
}
.pg-search input::placeholder { color: rgba(255,255,255,0.3); }
.pg-search:focus-within { border-color: var(--color-accent); }

.pg-select {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    color: var(--color-text-primary);
    font-family: var(--font-family); font-size: 14px; font-weight: 600;
    padding: 8px 36px 8px 16px;
    cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
    transition: all var(--transition);
}
.pg-select:hover {
    background-color: var(--color-bg-hover);
    border-color: var(--color-border-strong);
}
.pg-select:focus { outline: none; border-color: var(--color-accent); }

/* Unify form-select with pg-select (geo-dropdown style) */
select.form-input, select.form-select {
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
    cursor: pointer;
}
select.form-input:hover, select.form-select:hover {
    background-color: var(--color-bg-hover);
    border-color: var(--color-border-strong);
}

/* Receipt viewer (full-screen image modal) */
.receipt-viewer {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    animation: fadeSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.receipt-viewer img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6);
    object-fit: contain;
}
.receipt-viewer-close {
    position: absolute;
    top: -16px; right: -16px;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.receipt-viewer-close:hover {
    background: var(--color-danger);
    transform: scale(1.1);
}

/* Receipt preview in detail modal */
.receipt-preview {
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 12px;
    max-width: 100%;
    transition: transform 0.2s ease;
}
.receipt-preview:hover { transform: scale(1.02); }
.receipt-preview img {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    display: block;
    border-radius: 10px;
    background: rgba(0,0,0,0.3);
}
[data-theme="light"] .receipt-preview img { background: #F1F5F9; }
.receipt-preview-hint {
    position: absolute;
    bottom: 8px; right: 8px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.receipt-preview:hover .receipt-preview-hint { opacity: 1; }
.pg-select option {
    background: var(--color-bg-elevated);
    color: rgba(255,255,255,0.85);
    padding: 8px 12px;
}

.pg-view-toggle {
    display: flex;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 9999px; overflow: hidden;
}
.pg-view-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: transparent; border: none;
    color: rgba(255,255,255,0.4); cursor: pointer;
    transition: all 0.2s ease; font-size: 13px;
}
.pg-view-btn:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.04); }
.pg-view-btn--active { background: var(--color-accent); color: var(--color-text-on-accent); }

/* -- Table -- */
.pg-table-wrap {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px; overflow: hidden;
}
.pg-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.pg-table thead th {
    padding: 12px 20px; text-align: left;
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: rgba(255,255,255,0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    white-space: nowrap;
}
.pg-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer; transition: background 0.15s ease;
}
.pg-table tbody tr:last-child { border-bottom: none; }
.pg-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.pg-table tbody td {
    padding: 14px 20px; color: rgba(255,255,255,0.85);
    vertical-align: middle;
}
.pg-table-mono { font-family: 'Courier New', monospace; font-size: 12px; color: rgba(255,255,255,0.5); }
.pg-table-muted { color: rgba(255,255,255,0.35); font-size: 12px; }
.pg-table-action {
    width: 32px; height: 32px; border-radius: 50%;
    border: none; background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.4); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; transition: all 0.2s ease;
}
.pg-table-action:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* -- Grid cards -- */
.pg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}
.pg-grid-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px; overflow: hidden; cursor: pointer;
    border-left: 4px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}
.pg-grid-card:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-2px); }
.pg-grid-card--warn { border-left-color: var(--color-warning); }
.pg-grid-card--ok { border-left-color: var(--color-success); }
.pg-grid-card--err { border-left-color: var(--color-danger); }

.pg-grid-card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.pg-grid-card-merchant { font-size: 13px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 6px; }
.pg-grid-card-id { font-size: 11px; color: rgba(255,255,255,0.35); font-family: monospace; margin-top: 2px; }
.pg-grid-card-body { padding: 12px 20px; }
.pg-grid-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 0; font-size: 13px; color: rgba(255,255,255,0.6);
}
.pg-grid-row span:last-child { color: rgba(255,255,255,0.85); font-weight: 500; }
.pg-grid-amount { color: var(--color-accent) !important; font-weight: 700 !important; font-size: 15px !important; }
.pg-grid-card-foot {
    padding: 12px 20px; border-top: 1px solid rgba(255, 255, 255, 0.04);
    display: flex; justify-content: flex-end;
}

/* -- Pagination -- */
.pg-pagination {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: var(--space-4); padding: var(--space-3) 0;
}
.pg-pagination-info { font-size: 12px; color: rgba(255,255,255,0.35); }
.pg-page-btn {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent; color: rgba(255,255,255,0.5);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 12px; transition: all 0.2s ease;
    font-family: var(--font-family);
}
.pg-page-btn:hover:not(:disabled) { background: rgba(255,255,255,0.06); color: #fff; }
.pg-page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.pg-page-current {
    min-width: 56px; height: 32px; padding: 0 12px;
    border-radius: 16px;
    background: var(--color-accent); color: var(--color-text-on-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; white-space: nowrap;
}
.pg-pagesize-select {
    height: 32px; padding: 0 28px 0 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent; color: rgba(255,255,255,0.7);
    font-size: 12px; font-weight: 600; cursor: pointer;
    font-family: var(--font-family);
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394A3B8'><path d='M4 6l4 4 4-4'/></svg>");
    background-repeat: no-repeat; background-position: right 8px center;
}
.pg-pagesize-select:hover { background-color: rgba(255,255,255,0.04); }
.pg-pagesize-select:focus { outline: none; border-color: var(--color-accent); }
[data-theme="light"] .pg-pagesize-select { color: #475569; border-color: #E2E8F0; }
[data-theme="light"] .pg-pagesize-select:hover { background-color: #F8FAFC; }

/* -- Responsive pg -- */
@media (max-width: 1100px) {
    .pg-stats { grid-template-columns: repeat(2, 1fr); }
    .pg-stat:nth-child(2) { border-right: none; }
    .pg-stat:nth-child(3) { border-top: 1px solid rgba(255,255,255,0.06); }
    .pg-stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.06); }
}
@media (max-width: 768px) {
    .pg-stats { grid-template-columns: 1fr; }
    .pg-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .pg-stat:last-child { border-bottom: none; }
    .pg-toolbar { flex-direction: column; align-items: stretch; }
    .pg-search { max-width: 100%; }
    .pg-grid { grid-template-columns: 1fr; }
    .pg-view-toggle { display: none; }
}

/* ============================================================
   PRO CRM DASHBOARD COMPONENTS — Trader Pages
   ============================================================ */

/* -- Page wrapper -- */
.pro-page {
    display: flex; flex-direction: column;
    gap: var(--space-5);
}

/* -- Stat row (horizontal card strip) -- */
.pro-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}
.pro-stat-card .pro-stat-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-lg);
    flex-shrink: 0;
}
.pro-stat-card .pro-stat-info {
    display: flex; flex-direction: column;
    gap: 2px;
}
.pro-stat-card .pro-stat-info .pro-stat-value {
    font-size: var(--font-2xl);
    letter-spacing: -0.5px;
}
.pro-stat-card .pro-stat-info .pro-stat-label {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.pro-stat-row .pro-stat-card {
    display: flex; flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
}

/* -- Toolbar -- */
.pro-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    flex-wrap: wrap;
}

/* -- Pill tabs / buttons -- */
.pro-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 16px;
    font-size: var(--font-sm); font-weight: 600;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 180ms ease;
    white-space: nowrap;
}
.pro-pill:hover {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}
.pro-pill-active {
    background: var(--color-accent-dim);
    color: var(--color-accent);
    border-color: rgba(143, 255, 0, 0.2);
}

/* -- Search -- */
.pro-search {
    display: flex; align-items: center; gap: var(--space-2);
    background: var(--color-bg-elevated);
    border-radius: var(--radius-full);
    padding: 6px 14px;
    min-width: 240px;
}
.pro-search i { color: var(--color-text-muted); font-size: var(--font-sm); }
.pro-search-input {
    background: transparent; border: none; outline: none;
    color: var(--color-text-primary);
    font-size: var(--font-sm);
    width: 100%;
}
.pro-search-input::placeholder { color: var(--color-text-muted); }

/* -- Filter select -- */
.pro-filter-select {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 6px 12px;
    font-size: var(--font-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    outline: none;
}
.pro-filter-select:focus {
    border-color: var(--color-accent);
}

/* -- Table wrapper (white background CRM style) -- */
.pro-table-wrapper {
    background: var(--color-bg-white-card);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border-light);
}

/* -- Table -- */
.pro-table {
    width: 100%; border-collapse: collapse;
    font-size: var(--font-sm);
}
.pro-table thead {
    background: var(--color-bg-white-head);
}
.pro-table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: var(--font-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--color-text-dark-sec);
    border-bottom: 1px solid var(--color-border-light);
    white-space: nowrap;
}
.pro-table td {
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-dark);
    border-bottom: 1px solid #F3F4F6;
    vertical-align: middle;
}
.pro-table tbody tr:last-child td { border-bottom: none; }
.pro-table-row-clickable {
    cursor: pointer;
    transition: background 120ms ease;
}
.pro-table-row-clickable:hover {
    background: var(--color-bg-white-hover);
}

/* -- Card grid (for pool items) -- */
.pro-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-4);
}

/* -- Data cards (white background items) -- */
.pro-data-card {
    background: var(--color-bg-white-card);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.pro-data-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-dropdown);
}
.pro-data-card-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid #F3F4F6;
}
.pro-data-card-title {
    font-size: var(--font-sm); font-weight: 700;
    color: var(--color-text-dark);
    display: flex; align-items: center; gap: 6px;
}
.pro-data-card-body {
    padding: var(--space-3) var(--space-5);
}
.pro-data-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid #F9FAFB;
}
.pro-data-row:last-child { border-bottom: none; }
.pro-data-label {
    font-size: var(--font-xs); font-weight: 600;
    color: var(--color-text-dark-sec);
    text-transform: uppercase; letter-spacing: 0.3px;
}
.pro-data-value {
    font-size: var(--font-sm);
    color: var(--color-text-dark);
}
.pro-data-card-footer {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid #F3F4F6;
    display: flex; justify-content: flex-end;
}

/* -- Empty state -- */
.pro-empty-state {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: var(--space-3);
    padding: var(--space-10) var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--font-sm);
}
.pro-empty-state i {
    font-size: 2.5rem; opacity: 0.3;
}

/* -- Pagination -- */
.pro-pagination {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-2);
}
.pro-page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px;
    padding: 0 8px;
    font-size: var(--font-sm); font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 150ms ease;
}
.pro-page-btn:hover:not(:disabled) {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}
.pro-page-btn:disabled {
    opacity: 0.4; cursor: not-allowed;
}
.pro-page-btn-current {
    background: var(--color-accent-dim);
    color: var(--color-accent);
    border-color: rgba(143, 255, 0, 0.2);
    pointer-events: none;
}

/* -- Detail sections (white background panels) -- */
.pro-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
.pro-detail-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.pro-detail-section {
    background: var(--color-bg-white-card);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-light);
    padding: var(--space-5) var(--space-6);
    box-shadow: var(--shadow-card);
}
.pro-detail-section-title {
    font-size: var(--font-md); font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid #F3F4F6;
    display: flex; align-items: center; gap: var(--space-2);
}
.pro-detail-section-title i {
    color: var(--color-text-dark-sec);
    font-size: var(--font-sm);
}
.pro-detail-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) 0;
    border-bottom: 1px solid #F9FAFB;
}
.pro-detail-row:last-child { border-bottom: none; }
.pro-detail-label {
    font-size: var(--font-sm); font-weight: 600;
    color: var(--color-text-dark-sec);
}
.pro-detail-value {
    font-size: var(--font-sm); font-weight: 500;
    color: var(--color-text-primary);
    text-align: right;
}

/* -- Form grid (2-col layout in modals/forms) -- */
.pro-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

/* -- Timeline (history entries) -- */
.pro-timeline {
    display: flex; flex-direction: column;
    position: relative;
    padding-left: var(--space-5);
}
.pro-timeline::before {
    content: '';
    position: absolute;
    left: 7px; top: 0; bottom: 0;
    width: 2px;
    background: #E5E7EB;
    border-radius: 1px;
}
.pro-timeline-entry {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3) 0;
    position: relative;
}
.pro-timeline-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--color-bg-white-card);
    border: 2px solid var(--color-info);
    flex-shrink: 0;
    margin-left: calc(-1 * var(--space-5) - 5px);
    margin-top: 4px;
    z-index: 1;
}
.pro-timeline-content { flex: 1; }
.pro-timeline-title {
    font-size: var(--font-sm); font-weight: 600;
    color: var(--color-text-dark);
}
.pro-timeline-meta {
    font-size: var(--font-xs);
    color: var(--color-text-dark-sec);
    margin-top: 2px;
}

/* -- Responsive for pro CRM components -- */
@media (max-width: 1100px) {
    .pro-stat-row { grid-template-columns: repeat(2, 1fr); }
    .pro-detail-grid { grid-template-columns: 1fr; }
    .pro-detail-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .pro-stat-row { grid-template-columns: 1fr; }
    .pro-detail-grid-3 { grid-template-columns: 1fr; }
    .pro-toolbar { flex-direction: column; align-items: stretch; }
    .pro-card-grid { grid-template-columns: 1fr; }
    .pro-form-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LANGUAGE SWITCHER
   ============================================================ */
.lang-switch { position: relative; }
.lang-switch__btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 40px; padding: 0 12px;
    border: none; border-radius: 9999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--font-family);
    font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
    cursor: pointer; transition: all 0.2s ease;
}
.lang-switch__btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.lang-switch__btn i { font-size: 13px; }
.lang-switch__code { font-variant-numeric: tabular-nums; }
.lang-switch__backdrop { position: fixed; inset: 0; z-index: 98; }
.lang-switch__menu {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 180px;
    background: var(--color-bg-elevated, #1F2327);
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
    border-radius: 12px;
    box-shadow: var(--shadow-dropdown);
    padding: 6px; z-index: 99;
    display: flex; flex-direction: column; gap: 2px;
}
.lang-switch__item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: none; background: transparent;
    color: rgba(255,255,255,0.75);
    font-family: var(--font-family);
    font-size: 13px; font-weight: 500;
    border-radius: 8px;
    cursor: pointer; text-align: left;
    transition: all 0.15s ease;
}
.lang-switch__item:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}
.lang-switch__item.is-active {
    background: var(--color-accent-dim);
    color: var(--color-accent);
    font-weight: 600;
}
.lang-switch__item .fa-check { margin-left: auto; font-size: 11px; }
.lang-switch__flag { font-size: 15px; line-height: 1; }
.lang-switch__label { flex: 1; }
[data-theme="light"] .lang-switch__btn { background: #F1F5F9; color: #64748B; }
[data-theme="light"] .lang-switch__btn:hover { background: #E2E8F0; color: #0F172A; }
[data-theme="light"] .lang-switch__menu { background: #FFFFFF; border-color: #E2E8F0; }
[data-theme="light"] .lang-switch__item { color: #0F172A; }
[data-theme="light"] .lang-switch__item:hover { background: #F1F5F9; }
[data-theme="light"] .lang-switch__item.is-active { background: #EEF2FF; color: #4F46E5; }

.login-lang {
    position: fixed;
    top: 24px; right: 24px;
    z-index: 3;
}
.login-lang .lang-switch__btn {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ============================================================
   CYRILLIC TYPOGRAPHY
   DM Sans lacks full Cyrillic — Inter has excellent coverage.
   ============================================================ */
html[lang="ru"] body,
html[data-lang="ru"] body,
html[lang="ru"] button,
html[lang="ru"] input,
html[lang="ru"] textarea,
html[lang="ru"] select,
html[data-lang="ru"] button,
html[data-lang="ru"] input,
html[data-lang="ru"] textarea,
html[data-lang="ru"] select {
    font-family: var(--font-family-cyr);
    letter-spacing: 0.005em;
}
html[data-lang="ru"] .topbar__title,
html[data-lang="ru"] .login-brand {
    font-family: var(--font-family-cyr);
}

/* ============================================================
   MOBILE NAV / HAMBURGER
   ============================================================ */
.topbar__burger {
    display: none;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    border: none; border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
    font-size: 17px; cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 8px;
}
.topbar__burger:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
[data-theme="light"] .topbar__burger { background: #F1F5F9; color: #0F172A; }
[data-theme="light"] .topbar__burger:hover { background: #E2E8F0; }

.mobile-nav__backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 199;
    animation: mobileNavFade 0.2s ease;
}
.mobile-nav {
    display: none;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 85%; max-width: 320px;
    background: var(--color-bg-surface, #1D2125);
    border-right: 1px solid var(--color-border);
    z-index: 200;
    flex-direction: column;
    animation: mobileNavSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.4);
}
[data-theme="light"] .mobile-nav { background: #FFFFFF; border-right-color: #E2E8F0; }
.mobile-nav__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--color-border);
}
.mobile-nav__title {
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--color-text-secondary);
}
.mobile-nav__close {
    width: 36px; height: 36px;
    border: none; border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-primary);
    font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.mobile-nav__close:hover { background: rgba(255,255,255,0.12); }
[data-theme="light"] .mobile-nav__close { background: #F1F5F9; color: #0F172A; }
[data-theme="light"] .mobile-nav__close:hover { background: #E2E8F0; }
.mobile-nav__body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex; flex-direction: column; gap: 4px;
}
.mobile-nav__body .nav-item {
    display: flex !important;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 12px;
    gap: 14px;
    justify-content: flex-start;
    white-space: normal;
    color: var(--color-text-primary) !important;
    background: transparent;
    text-decoration: none;
}
.mobile-nav__body .nav-item:hover { background: rgba(255,255,255,0.04); }
.mobile-nav__body .nav-item i {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    font-size: 16px;
    width: 22px; height: 22px; text-align: center;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}
.mobile-nav__body .nav-item span {
    display: inline-block !important;
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    color: inherit;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
}
.mobile-nav__body .nav-item.active,
.mobile-nav__body .nav-item.active:hover {
    background: var(--color-accent);
    color: var(--color-text-on-accent) !important;
    font-weight: 600;
}
.mobile-nav__body .nav-item.active i,
.mobile-nav__body .nav-item.active span {
    color: var(--color-text-on-accent) !important;
}
[data-theme="light"] .mobile-nav__body .nav-item { color: #0F172A !important; }
[data-theme="light"] .mobile-nav__body .nav-item:hover { background: #F1F5F9; }
[data-theme="light"] .mobile-nav__body .nav-item.active,
[data-theme="light"] .mobile-nav__body .nav-item.active:hover {
    background: #4F46E5;
    color: #FFFFFF !important;
}
[data-theme="light"] .mobile-nav__body .nav-item.active i,
[data-theme="light"] .mobile-nav__body .nav-item.active span { color: #FFFFFF !important; }

.mobile-nav__footer {
    padding: 16px;
    border-top: 1px solid var(--color-border);
    display: flex; flex-direction: column; gap: 10px;
}
.mobile-nav__theme {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: transparent;
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: 14px; font-weight: 500;
    cursor: pointer; transition: all 0.2s ease;
}
.mobile-nav__theme:hover { background: rgba(255,255,255,0.04); }
[data-theme="light"] .mobile-nav__theme { color: #0F172A; }
[data-theme="light"] .mobile-nav__theme:hover { background: #F1F5F9; }

@keyframes mobileNavFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mobileNavSlide { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* ============================================================
   MASTER MOBILE BREAKPOINTS
   ============================================================ */
@media (max-width: 960px) {
    .topbar { padding: 0 16px; margin-top: 6px; height: 60px; }
    .topbar__burger { display: inline-flex; }
    .topbar__pill { display: none; }
    .topbar__title { font-size: 18px; letter-spacing: 0.18em; }
    .topbar__logo-wrap { width: 40px; height: 40px; }
    .topbar__logo { width: 40px; height: 40px; }
    .topbar__right { gap: 6px; }
    .topbar__counter { display: inline-flex; height: 30px; padding: 0 9px; }
    .mobile-nav__backdrop,
    .mobile-nav { display: flex; }

    /* Tighten main content spacing on tablet */
    .main { padding: 12px !important; }
    .pg-title, .pg-page-title { font-size: 22px !important; }
    .pg-subtitle { font-size: 13px !important; }
}

/* App shell should not clip the drawer — the drawer is position:fixed */
.app-shell--mobile-nav-open { overflow: hidden; }

@media (max-width: 720px) {
    .topbar { padding: 0 12px; height: 56px; margin-top: 4px; }
    .topbar__title { display: none; }
    .topbar__theme-toggle,
    .lang-switch__btn { height: 36px; width: auto; padding: 0 10px; }
    .topbar__icon-btn { width: 36px; height: 36px; font-size: 14px; }
    .topbar__avatar { width: 34px; height: 34px; }
    .topbar__counter span { font-size: 12px; }
    .topbar__counter { gap: 4px; }

    .main { padding: 10px !important; }

    .cd-grid-2, .cd-grid-3,
    .pro-detail-grid, .pro-detail-grid-3 {
        grid-template-columns: 1fr !important;
    }
    .pro-stat-row, .pg-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .pg-toolbar, .pro-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .pg-search, .pro-search,
    .pg-select, .pro-select {
        width: 100% !important;
    }
    .pg-view-toggle { justify-content: center; }

    .pg-table-wrap, .pro-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .pg-table, .pro-table {
        font-size: 12px;
        min-width: 640px;
    }
    .pg-table th, .pg-table td,
    .pro-table th, .pro-table td {
        padding: 10px 12px !important;
        white-space: nowrap;
    }

    .pg-card-grid, .pro-card-grid,
    .cards-grid, .pay-grid, .pay-grid--3 {
        grid-template-columns: 1fr !important;
    }

    .modal, .pg-modal, .pro-modal,
    .appeal-modal, .ticket-modal,
    .topup-modal, .withdraw-modal,
    .pay-modal, .dispute-modal, .drawer {
        max-width: 100vw !important;
        width: 100vw !important;
        max-height: 100vh !important;
        height: 100vh !important;
        border-radius: 0 !important;
        top: 0 !important; left: 0 !important;
        right: 0 !important; bottom: 0 !important;
        transform: none !important;
        margin: 0 !important;
    }
    .drawer, .drawer__panel,
    .user-drawer, .merchant-drawer {
        width: 100vw !important; max-width: 100vw !important;
    }

    .bal-card, .bal-section, .trf-card, .rates-card { padding: 16px !important; }
    .bal-grid, .bal-row { grid-template-columns: 1fr !important; }
    .bal-number { font-size: 28px !important; }

    .docs { grid-template-columns: 1fr !important; gap: 12px; }
    .docs-nav { position: static; flex-direction: row; flex-wrap: wrap; }
    .docs-content-header { padding: 16px !important; }
    .docs-body { padding: 16px !important; }

    .ticket-thread, .dispute-thread { padding: 12px !important; }

    .pag-bar { flex-wrap: wrap; gap: 6px; justify-content: center; }
    .pag-btn { min-width: 34px; padding: 6px 10px; font-size: 12px; }

    .notif-pop {
        left: 6px !important; right: 6px !important;
        width: auto !important;
        top: calc(var(--topbar-h, 56px) + 6px) !important;
    }
    .pop {
        left: 6px !important; right: 6px !important;
        width: auto !important;
        top: calc(var(--topbar-h, 56px) + 6px) !important;
    }
    .notif-toast-stack {
        left: 8px !important; right: 8px !important;
        bottom: 8px !important; width: auto !important;
    }
    .notif-toast { width: 100%; }
}

@media (max-width: 480px) {
    .topbar { padding: 0 10px; }
    .topbar__burger { width: 36px; height: 36px; margin-right: 4px; font-size: 15px; }
    .topbar__logo-wrap { width: 34px; height: 34px; }
    .topbar__logo { width: 34px; height: 34px; }
    .topbar__brand { gap: 8px; }
    .topbar__counter { padding: 0 7px; font-size: 11px; height: 26px; }
    .topbar__icon-btn { width: 34px; height: 34px; font-size: 13px; }
    .lang-switch__btn { padding: 0 8px; height: 34px; gap: 4px; }
    .lang-switch__btn .lang-switch__code { font-size: 11px; }

    .main { padding: 8px !important; }

    .pg-stats { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .pg-stat { padding: 12px !important; }
    .pg-stat-num { font-size: 18px !important; }
    .pg-stat-label { font-size: 10px !important; }

    .pg-title, .pg-page-title { font-size: 20px !important; }

    .btn, .pg-btn, .pro-btn {
        font-size: 13px !important;
        padding: 9px 14px !important;
    }

    .topbar__counter i { font-size: 11px; }
}

@media (max-width: 360px) {
    .topbar__right { gap: 4px; }
    .topbar__avatar { width: 30px; height: 30px; }
    .topbar__icon-btn,
    .topbar__theme-toggle { width: 32px; height: 32px; }
    .lang-switch__btn i { display: none; }
    .login-brand { font-size: 28px !important; letter-spacing: 0.16em !important; }
}

html.is-mobile-nav-open, html.is-mobile-nav-open body {
    overflow: hidden;
}

@media (max-width: 960px) {
    .has-sidebar, .with-sidebar, .two-col {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }
    .sidebar, .aside, .side-panel {
        position: static !important;
        width: 100% !important;
    }
}