/* CSS Design System for Pump Mini App */
:root {
    --bg-primary: #080b11;
    --bg-secondary: #0f1420;
    --bg-tertiary: #171f32;
    --text-primary: #ffffff;
    --text-main: #ffffff;
    --text-muted: #7e8b9b;
    
    /* Dynamic Bottom Navigation Clearance Variable */
    --nav-bar-height: 65px;
    --bottom-nav-height: calc(var(--nav-bar-height) + env(safe-area-inset-bottom, 0px));
    
    /* Default Cyan Theme Variables (Will be updated dynamically by JS) */
    --neon-main: #00f2fe;
    --neon-main-glow: rgba(0, 242, 254, 0.35);
    --neon-accent: #4facfe;
    --neon-accent-glow: rgba(79, 172, 254, 0.25);
    
    /* Global Semantic Colors */
    --success: #00e676;
    --error: #ff1744;
    --warning: #ffb300;
    
    --border-color: rgba(255, 255, 255, 0.08);
    --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
    --font-main: 'Tajawal', sans-serif;
    --font-tech: 'Orbitron', sans-serif;
    
    --transition-speed: 0.3s;
}

/* Reset and Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 14px;
    line-height: 1.6;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

body.light-mode {
    --bg-primary: #f4f7fb;
    --bg-secondary: #ffffff;
    --bg-tertiary: #edf2f7;
    --text-primary: #111827;
    --text-main: #111827;
    --text-muted: #4b5563;
    --border-color: rgba(17, 24, 39, 0.14);
    --card-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

body.light-mode .app-container,
body.light-mode .registration-overlay {
    background-color: var(--bg-primary);
}

body.light-mode .app-header,
body.light-mode .app-nav {
    background-color: rgba(255, 255, 255, 0.96);
    border-color: rgba(17, 24, 39, 0.12);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

body.light-mode .glow-card,
body.light-mode .mini-card,
body.light-mode .leaderboard-item,
body.light-mode .transaction-history-item,
body.light-mode .referrals-table-wrapper,
body.light-mode .security-log-container,
body.light-mode .ref-tiers-info,
body.light-mode .registration-card,
body.light-mode .form-card,
body.light-mode .readonly-input,
body.light-mode .security-log-item,
body.light-mode .rank-badge {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: rgba(17, 24, 39, 0.12);
}

body.light-mode .border-glow-theme {
    border-left-color: var(--neon-main);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(17, 24, 39, 0.04);
}

body.light-mode .card-glow-theme,
body.light-mode .leaderboard-item.is-self-card,
body.light-mode .balance-card,
body.light-mode .profile-settings-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 251, 0.98));
}

body.light-mode .countdown-text,
body.light-mode .balance-amount,
body.light-mode .btn-secondary,
body.light-mode .w-btn,
body.light-mode .custom-select,
body.light-mode .input-group input,
body.light-mode .input-row-action input,
body.light-mode .ref-link-wrapper input,
body.light-mode .registration-card input,
body.light-mode .registration-card select,
body.light-mode textarea,
body.light-mode select,
body.light-mode input {
    color: var(--text-primary);
}

body.light-mode .btn-secondary,
body.light-mode .w-btn,
body.light-mode .theme-select-btn,
body.light-mode .custom-select,
body.light-mode .input-group input,
body.light-mode .input-row-action input,
body.light-mode .ref-link-wrapper input,
body.light-mode .registration-card input,
body.light-mode .registration-card select,
body.light-mode textarea,
body.light-mode select,
body.light-mode input {
    background-color: #ffffff !important;
    border: 1px solid rgba(17, 24, 39, 0.16) !important;
}

body.light-mode .btn-secondary:hover,
body.light-mode .w-btn:hover,
body.light-mode .theme-select-btn:hover {
    border-color: var(--neon-main);
    box-shadow: 0 0 0 3px rgba(var(--neon-main-rgb), 0.14);
}

body.light-mode .btn-primary {
    color: #071018;
    box-shadow: 0 10px 24px rgba(var(--neon-main-rgb), 0.18);
}

body.light-mode .btn-danger.btn-outline {
    background-color: #ffffff;
}

body.light-mode .nav-item,
body.light-mode .user-rank,
body.light-mode .card-desc,
body.light-mode .mini-card-label,
body.light-mode .form-sub-label,
body.light-mode .setting-desc,
body.light-mode .item-username,
body.light-mode .invested-lbl,
body.light-mode .progress-labels,
body.light-mode .tx-timestamp,
body.light-mode .log-time,
body.light-mode .log-ip,
body.light-mode .ref-stat-label,
body.light-mode .referrals-list-header,
body.light-mode .empty-ref-item,
body.light-mode .user-tag,
body.light-mode .registration-card p.subtitle,
body.light-mode .registration-card label,
body.light-mode .input-group label {
    color: var(--text-muted);
}

body.light-mode .user-name,
body.light-mode .card-title,
body.light-mode .sub-section-title,
body.light-mode .setting-name,
body.light-mode .item-name,
body.light-mode .tx-type-title,
body.light-mode .log-action-text,
body.light-mode .app-logo,
body.light-mode .profile-header-inline h4 {
    color: var(--text-primary);
}

body.light-mode .progress-bar-wrapper,
body.light-mode .slider-toggle,
body.light-mode .rank-badge {
    background-color: var(--bg-tertiary);
}

body.light-mode .referrals-list-header,
body.light-mode .leaderboard-item.loading,
body.light-mode .security-log-item.loading {
    background-color: var(--bg-tertiary);
}

body.light-mode .toast {
    background-color: rgba(255, 255, 255, 0.98);
    color: var(--text-primary);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

body.light-mode input,
body.light-mode select,
body.light-mode textarea {
    color: var(--text-primary) !important;
}

/* App Layout Container */
.app-container {
    width: 100%;
    max-width: 480px;
    background-color: var(--bg-primary);
    display: flex;
    flex-direction: column;
    position: relative;
    border-left: 1px solid rgba(255, 255, 255, 0.03);
    border-right: 1px solid rgba(255, 255, 255, 0.03);
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.font-orbitron {
    font-family: var(--font-tech);
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Header Styling */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: rgba(15, 20, 32, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Global Live Ticker Bar */
.live-ticker-bar {
    width: 100%;
    background: #080c14;
    background: linear-gradient(90deg, #050810 0%, #0d1525 50%, #050810 100%);
    border-top: 1px solid rgba(0, 242, 254, 0.2);
    border-bottom: 1px solid rgba(241, 196, 15, 0.25);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 242, 254, 0.12);
    overflow: hidden;
    white-space: nowrap;
    position: sticky;
    top: 70px;
    z-index: 998;
    font-family: 'Cairo', 'Tajawal', sans-serif;
    font-size: 13px;
    height: 38px;
    display: flex;
    align-items: center;
    direction: rtl;
}

.live-ticker-bar::before,
.live-ticker-bar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 35px;
    z-index: 3;
    pointer-events: none;
}
.live-ticker-bar::before {
    right: 0;
    background: linear-gradient(to left, rgba(5, 8, 16, 0.95), transparent);
}
.live-ticker-bar::after {
    left: 0;
    background: linear-gradient(to right, rgba(5, 8, 16, 0.95), transparent);
}

.live-ticker-track {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    animation: live-ticker-loop 35s linear infinite;
    will-change: transform;
    padding-left: 20px;
    padding-right: 20px;
}

.live-ticker-track:hover {
    animation-play-state: paused;
}

@keyframes live-ticker-loop {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(50%);
    }
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #e2e8f0;
    padding: 3px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Cairo', 'Tajawal', sans-serif;
    font-size: 12.5px;
    line-height: 1.4;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.ticker-tag-deposit {
    color: #00f2fe;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(0, 242, 254, 0.6);
}

.ticker-tag-withdrawal {
    color: #f1c40f;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(241, 196, 15, 0.6);
}

.ticker-tag-announcement {
    color: #ffb300;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(255, 179, 0, 0.6);
}

.ticker-name {
    color: #ffffff;
    font-weight: 600;
}

.ticker-text-announcement {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

.ticker-amount-deposit {
    color: #00f2fe;
    font-weight: 700;
    font-family: 'Orbitron', 'Cairo', 'Tajawal', sans-serif;
    text-shadow: 0 0 5px rgba(0, 242, 254, 0.4);
}

.ticker-amount-withdrawal {
    color: #f1c40f;
    font-weight: 700;
    font-family: 'Orbitron', 'Cairo', 'Tajawal', sans-serif;
    text-shadow: 0 0 5px rgba(241, 196, 15, 0.4);
}

.ticker-item.is-announcement {
    border-color: rgba(255, 179, 0, 0.3);
    background: rgba(255, 179, 0, 0.08);
}

.user-badge {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neon-main), var(--neon-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: var(--font-tech);
    color: #000;
    box-shadow: 0 0 10px var(--neon-main-glow);
    transition: all var(--transition-speed);
}

.user-avatar.large-avatar {
    width: 60px;
    height: 60px;
    font-size: 24px;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: 700;
    font-size: 13px;
}

.user-rank {
    font-size: 10px;
    color: var(--text-muted);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.header-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-bell-icon {
    font-size: 15px;
    line-height: 1;
}

.app-logo {
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 1px;
    font-family: var(--font-tech);
    white-space: nowrap;
    overflow: visible;
    line-height: 1.1;
    max-width: none;
    flex-shrink: 0;
    direction: ltr;
    padding-inline-start: 4px;
}

/* Neon Text Helpers linked to dynamic variables */
.neon-text-main {
    color: var(--neon-main);
    text-shadow: 0 0 8px var(--neon-main-glow);
}

.neon-text-accent {
    color: var(--neon-accent);
    text-shadow: 0 0 8px var(--neon-accent-glow);
}

/* App Main Content Area */
.app-content {
    padding: 16px;
    padding-bottom: 65px !important;
    margin-bottom: 0 !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Tab Panes switching */
.tab-pane, .page, .tab-content {
    display: none;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    animation: fadeIn var(--transition-speed) ease-in-out;
}

.tab-pane.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

/* Glow Cards & Containers */
.glow-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--card-shadow);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-speed);
}

.glow-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
}

.border-glow-theme {
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 4px 20px var(--neon-main-glow);
    border-left: 2px solid var(--neon-main);
}

.card-glow-theme {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.08);
}

.card-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
}

.card-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.text-center {
    text-align: center;
}

/* Countdown Timer Styling */
.countdown-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.countdown-circle {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring-bg {
    stroke: rgba(255, 255, 255, 0.08);
}

.progress-ring-bar {
    transition: stroke-dashoffset 1s linear;
}

.countdown-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: 700;
    font-family: var(--font-tech);
    color: var(--text-primary);
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
    text-align: center;
    width: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.3;
    pointer-events: none;
    box-sizing: border-box;
}

.pump-active-text {
    font-size: 18px;
    font-weight: 800;
    color: #00ffcc;
    text-shadow: 0 0 12px rgba(0, 255, 204, 0.8), 0 0 24px rgba(0, 255, 204, 0.4);
    display: inline-block;
    text-align: center;
}

/* Light mode theme adaptations for the progress circle & timer text */
body.light-mode .progress-ring-bg {
    stroke: #cbd5e1 !important;
}

body.light-mode .countdown-text {
    color: #0f172a !important;
    text-shadow: none !important;
}

body.light-mode .pump-active-text {
    color: #0284c7 !important;
    text-shadow: none !important;
}

/* Countdown inner label + time digits — theme-aware classes */
.cd-label {
    font-size: 11px;
    color: var(--neon-accent);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-main);
}

.cd-label-launch {
    color: var(--neon-main);
}

.cd-time {
    font-size: 20px;
    font-weight: bold;
    font-family: var(--font-tech);
    color: var(--text-primary);
    letter-spacing: 1px;
}

/* Light mode overrides for countdown */
body.light-mode .cd-label {
    color: #0369a1;
}

body.light-mode .cd-label-launch {
    color: #0284c7;
}

body.light-mode .cd-time {
    color: #0f172a;
    text-shadow: none;
}

.pulse-animation {
    animation: pumpPulse 1.2s infinite ease-in-out;
}

@keyframes pumpPulse {
    0% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.1); opacity: 1; text-shadow: 0 0 18px rgba(0, 255, 204, 1), 0 0 30px rgba(0, 255, 204, 0.7); }
    100% { transform: scale(1); opacity: 0.9; }
}

/* Progress bar inside home */
.progress-target-container {
    margin-top: 15px;
}

.progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.progress-bar-wrapper {
    height: 10px;
    background-color: var(--bg-tertiary);
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--neon-main), var(--neon-accent));
    box-shadow: 0 0 8px var(--neon-main-glow);
    border-radius: 5px;
    transition: width 0.5s ease-out;
}

/* Stats grid */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.mini-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all var(--transition-speed);
}

.mini-card-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.mini-card-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--neon-main);
    text-shadow: 0 0 4px var(--neon-main-glow);
}

/* Button system */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 10px;
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: all 0.25s ease-in-out;
    outline: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--neon-main), var(--neon-accent));
    color: #000000;
    font-weight: 900;
}

.btn-primary:active {
    transform: scale(0.97);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: #fff;
}

.btn-secondary:hover {
    border-color: var(--neon-main);
    box-shadow: 0 0 6px var(--neon-main-glow);
}

.btn-secondary:active {
    transform: scale(0.97);
}

.btn-success {
    background-color: var(--success);
    color: #000;
}

.btn-danger {
    background-color: var(--error);
    color: #fff;
}

.btn-danger.btn-outline {
    background: transparent;
    border: 1px solid var(--error);
    color: var(--error);
}

.btn-full-width {
    width: 100%;
}

.btn-glow {
    box-shadow: 0 0 12px var(--neon-main-glow);
}

.btn-glow:hover {
    box-shadow: 0 0 18px var(--neon-main);
}

.btn:disabled,
.btn.is-loading {
    opacity: 0.8;
    cursor: wait;
}

.btn.is-loading {
    gap: 8px;
}

.btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: currentColor;
    border-radius: 50%;
    display: inline-block;
    animation: btn-spin 0.8s linear infinite;
}

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

.action-btn-container {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.action-btn-container .btn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
}

/* Wallet styling */
.balance-card {
    background: radial-gradient(circle at top right, var(--bg-tertiary), var(--bg-secondary));
    text-align: center;
}

.card-label {
    font-size: 12px;
    color: var(--text-muted);
}

.balance-amount {
    font-size: 32px;
    font-weight: 900;
    margin: 10px 0 20px 0;
    color: #fff;
}

.currency-symbol {
    font-size: 16px;
    color: var(--neon-main);
    font-weight: 700;
}

.wallet-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.w-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-tertiary);
    color: #fff;
    cursor: pointer;
    font-family: var(--font-main);
    font-weight: bold;
    transition: all 0.2s;
}

.w-btn:active {
    transform: scale(0.95);
}

.w-btn-deposit {
    border-color: rgba(0, 230, 118, 0.25);
}

.w-btn-deposit:hover {
    background-color: rgba(0, 230, 118, 0.05);
}

.w-btn-withdraw {
    border-color: rgba(255, 23, 68, 0.25);
}

.w-btn-withdraw:hover {
    background-color: rgba(255, 23, 68, 0.05);
}

.sub-price-tag {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 15px 0;
    justify-content: center;
}

.price-val {
    font-family: var(--font-tech);
    font-size: 24px;
    font-weight: 900;
    color: var(--neon-main);
}

.price-period {
    font-size: 11px;
    color: var(--text-muted);
}


/* Payment option feedback */
.pay-option-card {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform .15s ease, opacity .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pay-option-card:active {
    transform: scale(.985);
}
.pay-option-card.is-loading {
    opacity: .55;
    pointer-events: none;
    position: relative;
}
.pay-option-card.is-loading::after {
    content: 'جاري الإنشاء...';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 11, 17, .55);
    color: var(--neon-main);
    border-radius: inherit;
    font-size: 10px;
    font-weight: 700;
    z-index: 2;
}

/* Modals & Forms styles */
.wallet-form-container {
    animation: slideUp 0.3s ease-out;
}

.wallet-form-container.hidden {
    display: none !important;
}

.overlay-modal {
    position: fixed;
    inset: 0;
    background: rgba(8, 11, 17, 0.85);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    isolation: isolate;
}

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

.form-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-card h4 {
    font-size: 14px;
    margin-bottom: 4px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.input-group label {
    font-size: 11px;
    color: var(--text-muted);
}

.input-group input {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 14px;
    color: #fff;
    outline: none;
    font-family: var(--font-main);
    font-size: 13px;
    transition: border-color 0.2s;
}

.input-group input:focus {
    border-color: var(--neon-main);
}

.form-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px;
}

/* Leaderboard view */
.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.leaderboard-self-card-container {
    margin-top: 14px;
}

.leaderboard-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 10px 14px;
    border-radius: 10px;
    transition: all 0.2s;
}

.leaderboard-item:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.leaderboard-item.loading {
    justify-content: center;
    color: var(--text-muted);
}

.leaderboard-item.is-self-card {
    border-color: var(--neon-main);
    background-color: rgba(255, 255, 255, 0.03);
    box-shadow: 0 0 10px var(--neon-main-glow);
}

.leaderboard-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rank-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-tech);
    font-weight: bold;
    font-size: 11px;
    color: var(--text-muted);
}

.leaderboard-item.is-self-card .rank-badge {
    width: auto;
    min-width: 24px;
    padding: 0 8px;
}

.rank-badge.rank-1 {
    background: linear-gradient(135deg, #ffd700, #ffb300);
    color: #000;
}

.rank-badge.rank-2 {
    background: linear-gradient(135deg, #c0c0c0, #9e9e9e);
    color: #000;
}

.rank-badge.rank-3 {
    background: linear-gradient(135deg, #cd7f32, #8c5d2e);
    color: #000;
}

.item-details {
    display: flex;
    flex-direction: column;
}

.item-name-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.leaderboard-flag {
    font-size: 16px;
    line-height: 1;
}

.item-name {
    font-weight: 700;
    font-size: 13px;
}

.item-username {
    font-size: 10px;
    color: var(--text-muted);
}

.leaderboard-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.invested-val {
    font-family: var(--font-tech);
    font-weight: 700;
    font-size: 13px;
    color: var(--neon-main);
}

.invested-lbl {
    font-size: 9px;
    color: var(--text-muted);
}

/* Settings & Developer tab */
.profile-settings-card {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
}

.admin-select-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-user-summary-card {
    padding: 14px 12px;
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 0;
    min-height: 74px;
}

.admin-user-summary-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.admin-user-summary-main strong,
.admin-user-summary-main span {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    word-break: break-word;
    line-height: 1.45;
}

.admin-user-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.admin-user-open-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    margin-inline-start: auto;
    align-self: center;
    border-radius: 10px;
    font-size: 14px;
}

.profile-header-inline {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-header-inline h4 {
    font-size: 16px;
    font-weight: 700;
}

.user-tag {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-tech);
}

/* Theme customizer styling */
.theme-selector-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.theme-toggle-settings-btn {
    width: 100%;
    margin-bottom: 12px;
    gap: 10px;
}

.theme-select-btn {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 4px;
    font-size: 11px;
    color: #fff;
    cursor: pointer;
    font-family: var(--font-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all var(--transition-speed);
}

.theme-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
}

.cyan-dot { background-color: #00f2fe; box-shadow: 0 0 6px rgba(0, 242, 254, 0.5); }
.gray-dot { background-color: #7f8c9d; box-shadow: 0 0 6px rgba(127, 140, 157, 0.45); }
.gold-dot { background-color: #ffb300; box-shadow: 0 0 6px rgba(255, 179, 0, 0.5); }

.theme-select-btn.active {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: var(--neon-main);
    color: var(--neon-main);
    box-shadow: 0 0 10px var(--neon-main-glow);
}

/* Network selection styling */
.network-select-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

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

.custom-select {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    color: #fff;
    font-family: var(--font-main);
    font-size: 12px;
    outline: none;
    transition: border-color var(--transition-speed);
}

.custom-select:focus {
    border-color: var(--neon-main);
}

.input-row-action {
    display: flex;
    gap: 8px;
}

.input-row-action input {
    flex: 1;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 14px;
    color: #fff;
    outline: none;
    font-family: var(--font-tech);
    font-size: 11px;
    transition: border-color 0.2s;
}

.input-row-action input:focus {
    border-color: var(--neon-main);
}

/* Toggle settings switcher */
.toggle-setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.setting-name {
    font-weight: 700;
    font-size: 13px;
    display: block;
    margin-bottom: 2px;
}

.setting-desc {
    font-size: 10px;
    color: var(--text-muted);
    max-width: 250px;
}

/* Switch styling */
.switch-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-toggle {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-tertiary);
    transition: .3s;
    border-radius: 24px;
    border: 1px solid var(--border-color);
}

.slider-toggle:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-muted);
    transition: .3s;
    border-radius: 50%;
}

.switch-toggle input:checked + .slider-toggle {
    background-color: rgba(255, 255, 255, 0.02);
    border-color: var(--neon-main);
}

.switch-toggle input:checked + .slider-toggle:before {
    transform: translateX(20px);
    background-color: var(--neon-main);
    box-shadow: 0 0 6px var(--neon-main-glow);
}

/* Referral box styles & lists */
.ref-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.ref-badge-tier {
    font-size: 10px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 4px 8px;
    border-radius: 12px;
    color: var(--neon-main);
    font-weight: bold;
    text-shadow: 0 0 4px var(--neon-main-glow);
}

/* Referral tiers visual indicator steps */
.ref-tiers-info {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 20px;
    background-color: var(--bg-tertiary);
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.ref-tier-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0.35;
    transition: opacity var(--transition-speed);
}

.ref-tier-step.active {
    opacity: 1;
}

.tier-icon {
    font-size: 18px;
    margin-bottom: 4px;
}

.tier-lbl {
    font-size: 9px;
    font-weight: 500;
}

.referral-box {
    margin-bottom: 15px;
}

.ref-link-wrapper {
    display: flex;
    gap: 8px;
}

.ref-link-wrapper input {
    flex: 1;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    color: var(--text-muted);
    outline: none;
    font-size: 11px;
}

.ref-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
    margin-bottom: 20px;
}

.ref-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ref-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.ref-stat-val {
    font-size: 14px;
    font-weight: 700;
}

/* Active referral list sub section styling */
.active-referrals-section {
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}

.sub-section-title {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.referrals-table-wrapper {
    background-color: var(--bg-tertiary);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.referrals-list-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 8px 12px;
    background-color: rgba(255, 255, 255, 0.02);
    font-size: 10px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}

.referrals-list-items {
    max-height: 150px;
    overflow-y: auto;
}

.referral-row-item {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 8px 12px;
    font-size: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.referral-row-item:last-child {
    border-bottom: none;
}

.empty-ref-item {
    padding: 16px;
    font-size: 11px;
    color: var(--text-muted);
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.ref-comm-val {
    color: var(--success);
    font-family: var(--font-tech);
    font-weight: bold;
}

.ref-inv-val {
    font-family: var(--font-tech);
}

/* Security log container styling */
.security-log-container {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    max-height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.security-log-card.is-collapsed .security-log-container {
    display: none;
}

.security-log-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
    text-align: right;
    margin-bottom: 12px;
}

.security-log-toggle .card-title,
.security-log-toggle .card-desc {
    text-align: right;
}

.security-log-toggle-icon {
    font-size: 20px;
    color: var(--neon-main);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.security-log-card:not(.is-collapsed) .security-log-toggle-icon {
    transform: rotate(180deg);
}

.security-log-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    font-size: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.security-log-item:last-child {
    border-bottom: none;
}

.security-log-item.loading {
    justify-content: center;
    color: var(--text-muted);
    padding: 16px;
}

.log-action-text {
    flex: 1;
    color: var(--text-primary);
}

.log-meta-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.log-time {
    font-family: var(--font-tech);
    font-size: 9px;
    color: var(--text-muted);
}

.log-ip {
    font-family: var(--font-tech);
    font-size: 8px;
    background-color: rgba(255, 255, 255, 0.04);
    padding: 2px 6px;
    border-radius: 6px;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

/* Navigation bottom bar */
.app-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: rgba(15, 20, 32, 0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-color);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 65px;
    z-index: 9999;
    padding-bottom: env(safe-area-inset-bottom);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-main);
    transition: all 0.2s;
    outline: none;
}

.nav-item svg {
    transition: transform 0.2s;
}

.nav-item span {
    font-size: 10px;
    font-weight: 500;
}

.nav-item.active {
    color: var(--neon-main);
    text-shadow: 0 0 6px var(--neon-main-glow);
}

.nav-item.active svg {
    transform: translateY(-2px);
    stroke: var(--neon-main);
    filter: drop-shadow(0 0 4px var(--neon-main-glow));
}

/* Hide helper */
.hidden {
    display: none !important;
}

/* Toast alert notification styling (Floating Glassmorphism) */
.toast-container {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    width: max-content;
    max-width: 90vw;
}

.toast, .toast-message {
    position: relative;
    top: auto;
    left: auto;
    transform: translateY(-20px);
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 242, 254, 0.4);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 242, 254, 0.25);
    z-index: 999999;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    text-align: center;
    max-width: 90vw;
    word-break: break-word;
    direction: rtl;
}

.toast.show, .toast-message.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.toast-error, .toast-message.toast-error {
    background: rgba(40, 10, 20, 0.92);
    border-color: rgba(255, 77, 77, 0.6);
    color: #ff6b6b;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 77, 77, 0.3);
}

.toast.toast-success, .toast-message.toast-success {
    background: rgba(10, 35, 25, 0.92);
    border-color: rgba(0, 230, 118, 0.6);
    color: #5cf29d;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 230, 118, 0.3);
}

.toast.toast-warning, .toast-message.toast-warning {
    background: rgba(40, 30, 10, 0.92);
    border-color: rgba(255, 179, 0, 0.6);
    color: #ffd54f;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 179, 0, 0.3);
}

.toast.toast-info, .toast-message.toast-info {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(0, 242, 254, 0.6);
    color: #64ffda;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 242, 254, 0.3);
}

/* Custom Scrollbars for lists */
.referrals-list-items::-webkit-scrollbar,
.security-log-container::-webkit-scrollbar,
.transactions-history-list::-webkit-scrollbar {
    width: 4px;
}

.referrals-list-items::-webkit-scrollbar-track,
.security-log-container::-webkit-scrollbar-track,
.transactions-history-list::-webkit-scrollbar-track {
    background: transparent;
}

.referrals-list-items::-webkit-scrollbar-thumb,
.security-log-container::-webkit-scrollbar-thumb,
.transactions-history-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

.referrals-list-items::-webkit-scrollbar-thumb:hover,
.security-log-container::-webkit-scrollbar-thumb:hover,
.transactions-history-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Transactions History List Styles */
.transactions-history-list {
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 2px;
}

.transaction-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 10px 14px;
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
}

.transaction-history-item:hover {
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.tx-info-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tx-type-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary);
}

.tx-timestamp {
    font-family: var(--font-tech);
    font-size: 9px;
    color: var(--text-muted);
}

.tx-info-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.tx-amount {
    font-size: 13px;
    font-weight: 700;
}

.amount-deposit {
    color: var(--success);
}

.amount-withdraw {
    color: var(--error);
}

.amount-invest {
    color: var(--neon-main);
    text-shadow: 0 0 4px var(--neon-main-glow);
}

.tx-status-badge {
    font-size: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}

.status-completed {
    background-color: rgba(0, 230, 118, 0.08);
    color: var(--success);
    border: 1px solid rgba(0, 230, 118, 0.15);
}

.status-pending {
    background-color: rgba(255, 179, 0, 0.08);
    color: var(--warning);
    border: 1px solid rgba(255, 179, 0, 0.15);
}

.status-failed {
    background-color: rgba(244, 67, 54, 0.08);
    color: var(--error);
    border: 1px solid rgba(244, 67, 54, 0.15);
}

.browser-landing {
    min-height: 100vh;
    background:
        radial-gradient(circle at top, rgba(79, 172, 254, 0.18), transparent 35%),
        radial-gradient(circle at bottom, rgba(0, 242, 254, 0.12), transparent 30%),
        linear-gradient(180deg, #060b13 0%, #0b1220 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.browser-landing-card {
    width: 100%;
    max-width: 460px;
    background: rgba(10, 16, 28, 0.88);
    border: 1px solid rgba(79, 172, 254, 0.22);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    border-radius: 28px;
    padding: 36px 28px;
    text-align: center;
    backdrop-filter: blur(10px);
}

.browser-landing-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
    color: var(--neon-main);
    background: rgba(0, 242, 254, 0.08);
    border: 1px solid rgba(0, 242, 254, 0.18);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.browser-landing-title {
    margin: 0 0 12px;
    font-size: 32px;
    font-weight: 900;
    color: var(--text-main);
}

.browser-landing-subtitle {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 15px;
}

.browser-landing-warning {
    margin: 24px 0 18px;
    padding: 14px 16px;
    border-radius: 16px;
    color: #ffd166;
    background: rgba(255, 209, 102, 0.08);
    border: 1px solid rgba(255, 209, 102, 0.2);
    font-weight: 700;
}

.browser-landing-btn {
    width: 100%;
    margin-top: 8px;
}

/* Registration Overlay Screen */
.registration-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
    overflow-y: auto;
}

.registration-card {
    width: 100%;
    max-width: 420px;
    background: rgba(15, 20, 32, 0.75);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 28px;
    box-shadow: var(--card-shadow), 0 0 25px rgba(0, 242, 254, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.registration-card h2 {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2px;
}

.registration-card p.subtitle {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 8px;
    line-height: 1.4;
}

.registration-card .input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.registration-card label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.registration-card input, .registration-card select {
    width: 100%;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 16px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.registration-card input:focus, .registration-card select:focus {
    border-color: var(--neon-main);
    box-shadow: 0 0 8px var(--neon-main-glow);
}

/* Read-Only inputs styling */
.readonly-input {
    background-color: rgba(23, 31, 50, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

select.readonly-input {
    pointer-events: none;
}


/* Fix: Transaction history card must stay in normal flow, never overlap dashboard */
.transactions-history-card {
    position: relative !important;
    z-index: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.deposit-admin-row input, .deposit-admin-row select { width:100%; box-sizing:border-box; }
.btn-select-bank-request { cursor:pointer; }

/* Admin pending deposits/withdrawals split view */
@media (max-width: 720px) {
    #admin-pending-details-grid {
        grid-template-columns: 1fr !important;
    }
    #admin-pending-summary-stats {
        grid-template-columns: 1fr 1fr !important;
    }
}


/* ====================================================
   PUMP LIFECYCLE — Closed subscription button state
   ==================================================== */
.pump-closed-btn {
    background: linear-gradient(135deg, #ff5252 0%, #b71c1c 100%) !important;
    color: #fff !important;
    cursor: not-allowed !important;
    opacity: 0.9 !important;
    box-shadow: 0 0 18px rgba(255, 82, 82, 0.35) !important;
    animation: pumpClosedPulse 2.2s ease-in-out infinite;
}
@keyframes pumpClosedPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 82, 82, 0.35); }
    50%      { box-shadow: 0 0 26px rgba(255, 82, 82, 0.65); }
}
.pump-frozen-btn-click {
    animation: pumpFrozenBtnBounce 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
@keyframes pumpFrozenBtnBounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(0.92); box-shadow: 0 0 22px rgba(0, 195, 255, 0.75); }
    75%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}
.pump-active-text.pulse-animation {
    display: inline-block;
    color: #ffb300;
    font-weight: 800;
    animation: pumpActivePulse 1.4s ease-in-out infinite;
}
@keyframes pumpActivePulse {
    0%, 100% { transform: scale(1); text-shadow: 0 0 10px rgba(255,179,0,0.55); }
    50%      { transform: scale(1.06); text-shadow: 0 0 22px rgba(255,179,0,0.95); }
}

/* ====================================================
   FULLSCREEN SPLASH SCREEN WITH ANIMATED ROCKET & GRAPH
   ==================================================== */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-primary, #080b11);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.7s ease-in-out, visibility 0.7s ease-in-out;
}

.splash-screen.splash-fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.splash-bg-glow {
    position: absolute;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, var(--neon-main-glow, rgba(0, 242, 254, 0.35)) 0%, rgba(0,0,0,0) 70%);
    border-radius: 50%;
    animation: splashGlowPulse 3s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes splashGlowPulse {
    0% { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(1.3); opacity: 0.9; }
}

.splash-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 420px;
    padding: 24px;
    text-align: center;
}

/* Animated Rocket Container */
.splash-rocket-container {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.splash-rocket {
    font-size: 54px;
    filter: drop-shadow(0 0 16px var(--neon-main, #00f2fe));
    animation: rocketLaunch 2.2s ease-in-out infinite alternate;
    z-index: 2;
}

.splash-flame {
    position: absolute;
    bottom: 2px;
    left: 24px;
    font-size: 26px;
    transform: rotate(45deg);
    animation: flameFlicker 0.3s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 10px #ff5252);
    z-index: 1;
}

@keyframes rocketLaunch {
    0% { transform: translateY(6px) rotate(-5deg); }
    100% { transform: translateY(-16px) rotate(5deg); }
}

@keyframes flameFlicker {
    0% { transform: scale(0.85) translateY(0); opacity: 0.8; }
    100% { transform: scale(1.2) translateY(4px); opacity: 1; }
}

.splash-particles .particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: var(--neon-main, #00f2fe);
    border-radius: 50%;
    opacity: 0;
    animation: particleFly 1.5s infinite linear;
}

.splash-particles .p1 { left: 40%; bottom: 10px; animation-delay: 0s; }
.splash-particles .p2 { left: 50%; bottom: 10px; animation-delay: 0.5s; }
.splash-particles .p3 { left: 60%; bottom: 10px; animation-delay: 1s; }

@keyframes particleFly {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(50px) scale(0); opacity: 0; }
}

/* Brand Text */
.splash-brand {
    margin-bottom: 24px;
}

.splash-title {
    font-size: 28px;
    font-weight: 900;
    font-family: var(--font-tech, 'Orbitron', sans-serif);
    color: var(--text-primary, #ffffff);
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.splash-subtitle {
    font-size: 13px;
    color: var(--text-muted, #7e8b9b);
}

/* Oscillating Crypto Graph */
.splash-graph-container {
    position: relative;
    width: 100%;
    height: 100px;
    margin-bottom: 24px;
    background: rgba(15, 20, 32, 0.6);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

.splash-graph-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.splash-graph-line {
    fill: none;
    stroke: var(--neon-main, #00f2fe);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px var(--neon-main, #00f2fe));
}

.splash-graph-area {
    fill: url(#splashGraphGrad);
}

/* Progress & Status */
.splash-status-container {
    width: 100%;
}

.splash-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.splash-progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--neon-accent, #4facfe), var(--neon-main, #00f2fe));
    box-shadow: 0 0 10px var(--neon-main, #00f2fe);
    border-radius: 10px;
    transition: width 0.3s ease-out;
}

.splash-status-text {
    font-size: 12px;
    color: var(--text-muted, #7e8b9b);
    font-weight: 500;
}

/* ===== Custom Searchable Country Dropdown ===== */
.country-dropdown-wrapper {
    position: relative;
    width: 100%;
}

.country-display-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 10px;
    color: var(--text-primary, #fff);
    cursor: pointer;
    font-family: var(--font-main, 'Tajawal', sans-serif);
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    user-select: none;
}

.country-display-btn:hover,
.country-display-btn:focus {
    border-color: var(--neon-main, #00f2fe);
    box-shadow: 0 0 8px var(--neon-main-glow, rgba(0,242,254,0.3));
    outline: none;
}

.country-display-btn.open {
    border-color: var(--neon-main, #00f2fe);
    box-shadow: 0 0 12px var(--neon-main-glow, rgba(0,242,254,0.3));
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.country-dropdown-arrow {
    font-size: 16px;
    color: var(--neon-main, #00f2fe);
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-right: 6px;
}

.country-display-btn.open .country-dropdown-arrow {
    transform: rotate(180deg);
}

.country-list-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--bg-secondary, #0f1420);
    border: 1px solid var(--neon-main, #00f2fe);
    border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.6), 0 0 15px var(--neon-main-glow, rgba(0,242,254,0.2));
    overflow: hidden;
}

.country-search-box {
    padding: 10px 10px 6px;
    background: var(--bg-secondary, #0f1420);
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

.country-search-box input {
    width: 100%;
    padding: 9px 12px;
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
    border-radius: 8px;
    color: var(--text-primary, #fff);
    font-family: var(--font-main, 'Tajawal', sans-serif);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.country-search-box input:focus {
    border-color: var(--neon-main, #00f2fe);
}

.country-search-box input::placeholder {
    color: var(--text-muted, #7e8b9b);
}

.country-options-list {
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

.country-options-list::-webkit-scrollbar {
    width: 5px;
}

.country-options-list::-webkit-scrollbar-track {
    background: transparent;
}

.country-options-list::-webkit-scrollbar-thumb {
    background: var(--neon-main, #00f2fe);
    border-radius: 4px;
}

.country-group-label {
    padding: 7px 14px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--neon-main, #00f2fe);
    text-transform: uppercase;
    background: rgba(0,242,254,0.05);
    border-bottom: 1px solid rgba(0,242,254,0.1);
    pointer-events: none;
    user-select: none;
}

.country-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary, #fff);
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.country-option:hover,
.country-option:focus {
    background: rgba(0,242,254,0.1);
    outline: none;
}

.country-option.selected {
    background: rgba(0,242,254,0.15);
    color: var(--neon-main, #00f2fe);
    font-weight: 600;
}

.country-option .co-flag {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}

.country-option .co-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.country-option .co-dial {
    font-size: 12px;
    color: var(--text-muted, #7e8b9b);
    flex-shrink: 0;
    direction: ltr;
    font-family: monospace;
}

.country-no-results {
    padding: 20px 14px;
    text-align: center;
    color: var(--text-muted, #7e8b9b);
    font-size: 13px;
}

/* Binance Modal & Status Badges Styling */
.binance-status-badge.status-completed {
    background: rgba(14, 203, 129, 0.15);
    color: #0ecb81;
    border: 1px solid rgba(14, 203, 129, 0.3);
}
.binance-status-badge.status-completed .binance-status-dot {
    background: #0ecb81;
    box-shadow: 0 0 6px #0ecb81;
}

.binance-status-badge.status-pending {
    background: rgba(240, 185, 11, 0.15);
    color: #f0b90b;
    border: 1px solid rgba(240, 185, 11, 0.3);
}
.binance-status-badge.status-pending .binance-status-dot {
    background: #f0b90b;
    box-shadow: 0 0 6px #f0b90b;
}

.binance-status-badge.status-failed {
    background: rgba(246, 70, 93, 0.15);
    color: #f6465d;
    border: 1px solid rgba(246, 70, 93, 0.3);
}
.binance-status-badge.status-failed .binance-status-dot {
    background: #f6465d;
    box-shadow: 0 0 6px #f6465d;
}

.btn-close-binance-modal:hover {
    color: #f0b90b !important;
    background: rgba(240, 185, 11, 0.1) !important;
}

#btn-copy-tx-address:hover, #btn-copy-tx-hash:hover {
    color: #f0b90b !important;
    background: rgba(240, 185, 11, 0.2) !important;
    border-color: rgba(240, 185, 11, 0.4) !important;
}

#tx-modal-help-link:hover {
    color: #f0b90b !important;
}

#tx-modal-report-link:hover {
    color: #ff6b72 !important;
}

.transaction-history-item {
    cursor: pointer !important;
}
.transaction-history-item:hover {
    background-color: var(--bg-secondary, rgba(255,255,255,0.05));
    border-color: var(--neon-main, #f0b90b);
}

/* Admin Dashboard Grid Icons Layout */
.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 640px) {
    .admin-dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
}
@media (max-width: 320px) {
    .admin-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
}

/* Grid Mode Control Circular Icon Buttons */
.btn-grid-control {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-color);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    user-select: none;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.btn-grid-control:hover, .btn-grid-control:focus {
    background: rgba(0, 242, 254, 0.18);
    border-color: var(--neon-main);
    transform: scale(1.08);
}

.btn-grid-control:active {
    transform: scale(0.95);
}

@keyframes spin-refresh {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.btn-grid-control.spinning {
    animation: spin-refresh 0.8s linear infinite;
    pointer-events: none;
    opacity: 0.8;
}

/* ── Refresh Dashboard pill button (far-left corner of card header) ── */
.btn-refresh-dashboard {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 22px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #00f0ff;
    background: linear-gradient(135deg, rgba(0, 220, 255, 0.22) 0%, rgba(0, 140, 255, 0.18) 100%);
    border: 2px solid rgba(0, 220, 255, 0.80);
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    user-select: none;
    white-space: nowrap;
    box-shadow:
        0 0 10px rgba(0, 220, 255, 0.45),
        0 0 22px rgba(0, 180, 255, 0.20),
        inset 0 0 8px rgba(0, 220, 255, 0.10),
        0 2px 8px rgba(0, 0, 0, 0.35);
    text-shadow: 0 0 8px rgba(0, 220, 255, 0.7);
}

.btn-refresh-dashboard:hover,
.btn-refresh-dashboard:focus {
    background: linear-gradient(135deg, rgba(0, 220, 255, 0.38) 0%, rgba(0, 140, 255, 0.30) 100%);
    border-color: #00f0ff;
    box-shadow:
        0 0 16px rgba(0, 220, 255, 0.75),
        0 0 36px rgba(0, 180, 255, 0.40),
        inset 0 0 12px rgba(0, 220, 255, 0.18),
        0 2px 10px rgba(0, 0, 0, 0.40);
    transform: scale(1.05);
    color: #ffffff;
    text-shadow: 0 0 12px rgba(0, 240, 255, 1);
}

.btn-refresh-dashboard:active {
    transform: scale(0.96);
    box-shadow:
        0 0 8px rgba(0, 220, 255, 0.50),
        0 1px 4px rgba(0, 0, 0, 0.30);
}

.btn-refresh-dashboard.spinning {
    pointer-events: none;
    opacity: 0.80;
    cursor: wait;
}

/* Only the icon span rotates — static label stays readable */
.btn-refresh-dashboard.spinning .refresh-icon {
    display: inline-block;
    animation: spin-refresh 0.75s linear infinite;
    transform-origin: center;
}

/* Ensure icon is always inline-block so transform is available */
.btn-refresh-dashboard .refresh-icon {
    display: inline-block;
    line-height: 1;
}

.admin-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    color: var(--text-main);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s, box-shadow 0.2s, background 0.2s;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    outline: none;
    user-select: none;
    touch-action: manipulation;
}

.admin-grid-item:hover, .admin-grid-item:focus {
    transform: translateY(-3px);
    border-color: var(--neon-main);
    background: rgba(0, 242, 254, 0.08);
    box-shadow: 0 6px 18px rgba(0, 242, 254, 0.25);
}

/* Edit Mode Unlocked State */
.admin-dashboard-grid.is-editing-grid .admin-grid-item {
    cursor: grab !important;
    border: 1px dashed rgba(234, 179, 8, 0.6) !important;
    background: rgba(234, 179, 8, 0.04) !important;
}

.admin-dashboard-grid.is-editing-grid .admin-grid-item:hover {
    border-color: #eab308 !important;
    box-shadow: 0 0 14px rgba(234, 179, 8, 0.4) !important;
}

.admin-dashboard-grid.is-editing-grid .admin-grid-item:active {
    cursor: grabbing !important;
}

.admin-grid-item.dragging {
    opacity: 0.35;
    border: 2px dashed #eab308 !important;
    background: rgba(234, 179, 8, 0.1) !important;
    transform: scale(0.95);
}

.admin-grid-item.drag-over {
    border-color: #00f2fe !important;
    box-shadow: 0 0 16px rgba(0, 242, 254, 0.6) !important;
    transform: translateY(-4px) scale(1.03);
    background: rgba(0, 242, 254, 0.15) !important;
}

.admin-grid-item .grid-icon {
    font-size: 24px;
    line-height: 1;
    pointer-events: none;
}

.admin-grid-item .grid-title {
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    pointer-events: none;
}

.admin-grid-item .grid-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 12px;
    background: #ff4d4d !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(255, 77, 77, 0.6);
    z-index: 3;
    line-height: 1.1;
    min-width: 18px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

.admin-feature-card {
    animation: fadeInAdminCard 0.25s ease-in-out forwards;
}

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

/* ─── SortableJS drag-and-drop visual feedback ─────────────────────────────── */

/* Ghost: translucent placeholder that marks the drop destination */
.admin-grid-item.sortable-ghost {
    opacity: 0.25;
    border: 2px dashed #eab308 !important;
    background: rgba(234, 179, 8, 0.08) !important;
    transform: scale(0.96);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Chosen: the card the user has touched / selected before lift-off */
.admin-grid-item.sortable-chosen {
    cursor: grabbing !important;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.5) !important;
    border-color: var(--neon-main) !important;
    z-index: 10;
}

/* Drag: the floating clone that follows the finger / cursor */
.admin-grid-item.sortable-drag {
    opacity: 0.9;
    transform: scale(1.06) rotate(1.5deg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 18px rgba(0, 242, 254, 0.45) !important;
    border: 2px solid var(--neon-main) !important;
    background: rgba(15, 23, 42, 0.95) !important;
    transition: box-shadow 0.12s ease;
    z-index: 9999;
}

/* Container state while any item is being dragged */
.admin-dashboard-grid.is-dragging-active .admin-grid-item:not(.sortable-drag):not(.sortable-ghost) {
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* Trade Pump Ai: visible skip-agent link */
.tp-skip-agent-emphasis {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 18px !important;
    border: 1.5px solid #ffbd19 !important;
    border-radius: 12px !important;
    background: rgba(255,189,25,.13) !important;
    color: #ffd452 !important;
    font-weight: 800 !important;
    box-shadow: 0 0 16px rgba(255,189,25,.14);
    text-decoration: none !important;
    cursor: pointer;
}
.tp-skip-agent-emphasis:focus-visible { outline: 2px solid #ffd452; outline-offset: 3px; }

/* Spot mobile trading terminal - intentionally scoped to #tab-spot */
#tab-spot{padding:0!important;background:#0c111e;color:#f5f7fb;min-height:calc(100dvh - 210px)}
#tab-spot .spot-terminal{padding:12px 10px 26px;max-width:850px;margin:auto;font-family:inherit}
#tab-spot button,#tab-spot select,#tab-spot input{font:inherit;box-sizing:border-box}
#tab-spot .st-header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:43px}
#tab-spot .st-pair-title{background:none;border:0;color:#fff;font-size:20px;font-weight:800;display:flex;align-items:center;gap:9px;padding:5px 0}
#tab-spot .st-last-price{color:#2ec994;font-size:19px;font-weight:800;direction:ltr}
#tab-spot .st-market-summary{display:flex;justify-content:space-between;font-size:11px;color:#8e9aad;padding:0 0 12px}
#tab-spot .st-pair-picker{background:#171f30;border:1px solid #344157;border-radius:12px;padding:10px;margin:5px 0 12px}
#tab-spot .st-pair-picker input,#tab-spot .st-pair-picker select{width:100%;background:#101727;color:#fff;border:1px solid #334155;border-radius:8px;padding:10px;margin-bottom:7px}
#tab-spot .st-pair-picker select{margin:0;max-height:180px}
#tab-spot .st-trade-layout{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:12px;direction:rtl}
#tab-spot .st-form,#tab-spot .st-orderbook{min-width:0}
#tab-spot .st-side-switch{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:12px;background:#1b2536;padding:3px;border-radius:9px}
#tab-spot .st-side-switch button{border:0;background:transparent;color:#9ca7b9;padding:9px 2px;border-radius:7px;font-weight:700}
#tab-spot .st-side-switch #st-side-buy.selected{background:#19b889;color:white}
#tab-spot .st-side-switch #st-side-sell.selected{background:#ed4260;color:white}
#tab-spot .st-form>select,#tab-spot .st-form input{width:100%;background:#192334;color:#fff;border:1px solid #2e3c50;border-radius:8px;padding:11px 9px;margin:4px 0 10px;min-height:43px}
#tab-spot .st-form label{display:block;font-size:12px;color:#a9b5c6;margin-top:5px}
#tab-spot .st-percentages{display:flex;gap:4px;margin:4px 0 10px}
#tab-spot .st-percentages button{flex:1;min-width:0;background:#1a2638;border:1px solid #39475d;color:#b7c4d6;padding:6px 0;font-size:11px;border-radius:5px}
#tab-spot .st-muted{font-size:11px;color:#8b99ae;margin:8px 0;overflow-wrap:anywhere}
#tab-spot .st-submit{width:100%;border:0;border-radius:9px;padding:12px 5px;background:#19b889;color:white;font-weight:800;margin-top:8px}
#tab-spot #spot-sell.st-submit{background:#ec3f5b}
#tab-spot .st-book-heading{display:flex;justify-content:space-between;font-size:11px;color:#b5bfd0;gap:5px;padding:10px 0}
#tab-spot .st-book-heading span{font-size:10px}
#tab-spot .st-book-list{min-height:103px;display:flex;flex-direction:column;gap:7px}
#tab-spot .st-book-row{display:flex;justify-content:space-between;direction:ltr;font-size:11px;gap:5px;font-variant-numeric:tabular-nums}
#tab-spot .st-book-row.ask{color:#f36b7b}#tab-spot .st-book-row.bid{color:#31c69c}
#tab-spot .st-book-price{font-size:19px;font-weight:800;color:#20c997;direction:ltr;text-align:left;margin:12px 0}
#tab-spot .st-book-note{font-size:10px}
#tab-spot .st-chart-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:22px 0 8px}
#tab-spot .st-chart-heading strong{font-size:15px}
#tab-spot #spot-intervals{display:flex;gap:3px;flex-wrap:wrap;direction:ltr}
#tab-spot #spot-intervals button{border:0;background:transparent;color:#a2adc0;padding:6px;font-size:11px;border-radius:4px}
#tab-spot #spot-intervals button.selected{background:#23324b;color:#f6c452}
#tab-spot .st-chart{height:270px;min-height:270px;background:#0e1625;border:1px solid #1f2d42;border-radius:8px;overflow:hidden;direction:ltr}
#tab-spot .st-chart-loading{display:grid;place-items:center;height:100%;color:#8f9bad;font-size:12px}
#tab-spot .st-chart-error{color:#f5ad6d;font-size:12px;padding:8px}
#tab-spot .st-tabs{display:flex;gap:14px;border-bottom:1px solid #263448;margin-top:18px;overflow-x:auto}
#tab-spot .st-tabs button{white-space:nowrap;background:none;border:0;color:#a0aec2;padding:12px 0;font-size:12px}
#tab-spot .st-tabs button.selected{color:#fff;border-bottom:2px solid #f3bd3d;font-weight:700}
#tab-spot .st-bottom-panel{min-height:60px;padding:12px 0;font-size:12px;color:#c3ccda}
#tab-spot .st-status{font-size:12px;color:#f6be52;min-height:18px}
#spot-admin-modal{align-items:flex-start;overflow-y:auto!important}
#spot-admin-modal>.glow-card{width:100%;box-sizing:border-box;margin:12px auto!important;max-height:none!important;overflow:visible!important}
#spot-admin-modal input{display:block;width:100%;max-width:100%;box-sizing:border-box;margin:7px 0 10px;padding:11px;background:#182336;color:white;border:1px solid #35455e;border-radius:9px}
#spot-admin-modal h3{margin:20px 0 8px;border-bottom:1px solid #35455e;padding-bottom:7px}
@media(max-width:390px){#tab-spot .st-trade-layout{gap:8px;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}#tab-spot .st-pair-title{font-size:17px}#tab-spot .st-book-row{font-size:10px}}
/* Spot usability fixes */
#tab-spot .st-pair-picker{position:fixed;inset:0;z-index:12020;margin:0;padding:0;border:0;border-radius:0;background:#050812b8;display:flex;align-items:flex-end;justify-content:center}
#tab-spot .st-pair-picker.hidden{display:none!important}
#tab-spot .st-picker-sheet{width:100%;max-width:650px;height:min(82dvh,750px);background:#111827;border-radius:22px 22px 0 0;padding:16px;display:flex;flex-direction:column;box-shadow:0 -10px 40px #0008}
#tab-spot .st-picker-grip{width:46px;height:5px;border-radius:10px;background:#4b5563;margin:-5px auto 18px}
#tab-spot .st-picker-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;font-size:17px}
#tab-spot .st-picker-top button{background:transparent;border:0;color:#eee;font-size:21px;padding:5px 10px}
#tab-spot .st-market-tabs{display:flex;gap:15px;padding:12px 3px;border-bottom:1px solid #2b3647;color:#8793a8;font-size:13px}
#tab-spot .st-market-tabs .selected{color:#f9c847;border-bottom:2px solid #f9c847;padding-bottom:9px}
#tab-spot .st-market-results{overflow:auto;flex:1}
#tab-spot .st-market-row{display:flex;align-items:center;gap:13px;width:100%;background:transparent;border:0;border-bottom:1px solid #202b3b;color:#f6f8ff;text-align:right;padding:13px 3px}
#tab-spot .st-market-row.current{background:#182435}
#tab-spot .st-market-icon{background:#243449;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-weight:800;color:#f9c847}
#tab-spot .st-market-row b,#tab-spot .st-market-row small{display:block}
#tab-spot .st-market-row small{color:#8998ac;margin-top:4px}
#tab-spot .st-market-arrow{margin-right:auto;color:#8491a6;font-size:24px}
#tab-spot .st-chart{height:320px;min-height:320px;touch-action:pan-y}
#tab-spot #st-chart-toggle{background:#1d2a3d;border:1px solid #34445c;color:#d5dfed;border-radius:7px;padding:7px;font-size:11px}
#tab-spot .st-chart.hidden{display:none!important}
.st-confirm-overlay{position:fixed;inset:0;z-index:13000;background:#030711c9;display:grid;place-items:center;padding:20px}
.st-confirm-overlay.hidden{display:none!important}
.st-confirm-card{background:#172235;border:1px solid #34445a;color:#f7f8ff;width:min(100%,400px);padding:24px 20px;border-radius:20px;box-shadow:0 20px 65px #0008;text-align:center}
.st-confirm-mark{background:#183d36;color:#1fcea0;border-radius:50%;font-size:26px;width:54px;height:54px;display:grid;place-items:center;margin:0 auto 12px}
.st-confirm-card h3{font-size:19px;margin:10px 0}.st-confirm-card p{color:#afbdce;line-height:1.9;overflow-wrap:anywhere}
.st-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}.st-confirm-actions button{padding:13px;border:0;border-radius:10px;font-weight:700;color:#fff;background:#37445b}.st-confirm-actions #spot-confirm-yes{background:#16b88e}
#spot-admin-modal{z-index:14000!important}

/* Spot UI patch 4 */
#tab-spot .st-market-summary #st-market-change{font-size:13px;font-weight:700}#tab-spot .st-market-summary #st-market-change.st-up{color:#18bf93}#tab-spot .st-market-summary #st-market-change.st-down{color:#f65c78}
#tab-spot .st-book-note{font-size:10px;line-height:1.5;color:#9caac0}#tab-spot .st-book-row{transition:background .3s ease}
#spot-confirm-modal{z-index:2147483000!important}#spot-admin-modal{z-index:2147482000!important}

/* Spot 24h Binance ticker and expanded chart */
#tab-spot .st-price-wrap{display:flex;align-items:center;gap:9px;direction:ltr}
#tab-spot .st-price-chart-btn{background:#1c2a40;border:1px solid #38536a;color:#25c9a6;border-radius:9px;font-size:24px;width:38px;height:38px;cursor:pointer}
#tab-spot .st-24h-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 2px}
#tab-spot .st-24h-stats>div{background:#172238;border:1px solid #2b3b54;border-radius:9px;padding:10px;display:flex;flex-direction:column;gap:5px;min-width:0}
#tab-spot .st-24h-stats span{font-size:12px;color:#91a2b8}
#tab-spot .st-24h-stats b{font-size:13px;color:#f3f5fa;overflow-wrap:anywhere}
#tab-spot .st-data-source{font-size:11px;color:#8b9aab;margin:4px 0 12px}
#tab-spot .st-chart-expanded{position:fixed;inset:0;z-index:100500;overflow:auto;background:#0b1423;padding:18px 12px 25px;box-sizing:border-box}
#tab-spot .st-chart-expanded .st-chart-heading{margin-top:8px}
body.st-chart-open{overflow:hidden}
#tab-spot #st-chart-close{background:#23334a;color:#fff;border:1px solid #42536d;border-radius:8px;padding:8px}

/* Polished compact spot details */
#tab-spot .st-price-wrap{gap:8px}
#tab-spot .st-price-chart-btn{width:33px;height:33px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:transparent;border:1px solid #273a4d;color:#22c9aa;padding:3px;flex-shrink:0}
#tab-spot .st-market-summary #st-market-change{font-size:14px;font-weight:750;letter-spacing:.2px}
#tab-spot .st-chart-heading strong{font-size:18px}
#tab-spot .st-24h-stats{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:15px 0 0;padding:10px 0;border-top:1px solid #26344a;border-bottom:1px solid #26344a}
#tab-spot .st-chart-expanded .st-24h-stats{display:grid}
#tab-spot .st-24h-stats>div{border:0;border-radius:0;background:transparent;padding:9px 12px;gap:5px}
#tab-spot .st-24h-stats>div:nth-child(odd){border-left:1px solid #26344a}
#tab-spot .st-24h-stats span{font-size:12px;color:#91a2b8}
#tab-spot .st-24h-stats b{font-size:15px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#tab-spot .st-assets-list{display:flex;flex-direction:column;width:100%;gap:0;direction:rtl}
#tab-spot .st-asset-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:74px;padding:12px 4px;border-bottom:1px solid #243149}
#tab-spot .st-asset-identity{display:flex;align-items:center;gap:12px;min-width:0}
#tab-spot .st-coin-icon{height:40px;width:40px;display:flex;align-items:center;justify-content:center;flex:none;border-radius:50%;font-size:22px;font-weight:800;background:#2c3b52;color:#f4f5f8}
#tab-spot .st-coin-BTC{background:#f7931a;color:#fff}#tab-spot .st-coin-ETH{background:#6477d6;color:#fff}#tab-spot .st-coin-BNB{background:#f0b90b;color:#151b27}#tab-spot .st-coin-USDT{background:#26a17b;color:white}#tab-spot .st-coin-ADA{background:#285ab9;color:white}#tab-spot .st-coin-AVAX{background:#e84142;color:white}#tab-spot .st-coin-SOL{background:#252c42;color:#8bf8b5}
#tab-spot .st-asset-name,#tab-spot .st-asset-values{display:flex;flex-direction:column;gap:4px;min-width:0}
#tab-spot .st-asset-name b{font-size:16px;color:#f4f7fc}#tab-spot .st-asset-name small{font-size:12px;color:#8d9eb5}
#tab-spot .st-asset-values{text-align:left;align-items:flex-end;font-variant-numeric:tabular-nums}#tab-spot .st-asset-values b{font-size:14px;color:#f4f7fc;overflow-wrap:anywhere}#tab-spot .st-asset-values span{font-size:13px;color:#9baac0}#tab-spot .st-asset-values small{font-size:11px;color:#e6b34d}
#tab-spot .st-assets-total{padding:17px 5px 10px;display:flex;flex-direction:column;gap:8px;border-top:1px solid #3d5069;margin-top:8px}#tab-spot .st-assets-total>span{color:#a6b5c8;font-size:13px}#tab-spot .st-assets-total strong{font-size:24px;letter-spacing:.1px;color:#f5f7fc;font-variant-numeric:tabular-nums}#tab-spot .st-assets-total strong small{font-size:14px;color:#a7b5c6}
#tab-spot .st-bottom-panel{min-width:0;overflow-wrap:anywhere}

/* Wallet and admin refinement */
#tab-wallet #spot-wallet-card{margin-top:16px;margin-bottom:18px;padding:18px 16px}
#tab-wallet #spot-wallet-card h3{font-size:19px;margin:0 0 8px;text-align:right}
#tab-wallet #spot-wallet-card .st-assets-list{display:flex;flex-direction:column;direction:rtl}
#tab-wallet #spot-wallet-card .st-asset-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:74px;padding:12px 2px;border-bottom:1px solid #28354b}
#tab-wallet #spot-wallet-card .st-asset-identity{display:flex;align-items:center;gap:11px;min-width:0}
#tab-wallet #spot-wallet-card .st-coin-icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:#34425a;color:#fff;font-size:23px;font-weight:800}
#tab-wallet #spot-wallet-card .st-coin-BTC{background:#f7931a}#tab-wallet #spot-wallet-card .st-coin-USDT{background:#26a17b}#tab-wallet #spot-wallet-card .st-coin-BNB{background:#f0b90b;color:#141b2a}#tab-wallet #spot-wallet-card .st-coin-ETH{background:#627eea}
#tab-wallet #spot-wallet-card .st-asset-name,#tab-wallet #spot-wallet-card .st-asset-values{display:flex;flex-direction:column;gap:4px;min-width:0}
#tab-wallet #spot-wallet-card .st-asset-name b{font-size:16px}#tab-wallet #spot-wallet-card .st-asset-name small{font-size:12px;color:#98a8bd}
#tab-wallet #spot-wallet-card .st-asset-values{text-align:left;align-items:flex-end;font-variant-numeric:tabular-nums}
#tab-wallet #spot-wallet-card .st-asset-values b{font-size:14px}#tab-wallet #spot-wallet-card .st-asset-values span{font-size:12px;color:#9eacc0}
#tab-wallet #spot-wallet-card .st-asset-values small{font-size:11px;color:#e6b34d}
#tab-wallet .balance-amount{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#tab-spot .st-order-select-wrap{position:relative;width:100%}
#tab-spot #spot-order-type{width:100%;min-width:0;max-width:100%;font-size:16px}
#tp-admin-password-overlay{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(2,6,15,.78);backdrop-filter:blur(5px)}
.tp-admin-password-dialog{width:min(100%,390px);padding:26px 22px;border-radius:22px;background:#192538;border:1px solid #354761;color:#f5f7fa;box-shadow:0 20px 70px #0009;text-align:center}
.tp-admin-lock{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#28394f;margin:0 auto 14px;font-size:30px}
.tp-admin-password-dialog h3{font-size:23px;margin:0 0 8px}.tp-admin-password-dialog p{font-size:14px;color:#aab9ca;margin:0 0 20px}
.tp-admin-password-dialog input{width:100%;box-sizing:border-box;background:#0e1727;color:#fff;border:1px solid #40526c;border-radius:12px;padding:14px;font-size:17px;outline:none}
.tp-admin-password-dialog input:focus{border-color:#f5ba19}.tp-admin-password-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.tp-admin-password-actions button{border:0;border-radius:12px;padding:13px 10px;font-size:16px;font-weight:700;background:#36445e;color:#fff}.tp-admin-password-actions button[type=submit]{background:#f4bd16;color:#141821}

#tab-spot .st-order-select-wrap .st-native-hidden{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}
#tab-spot #st-order-select-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;background:#1c293e;border:1px solid #3c4e69;border-radius:12px;color:#fff;font-size:16px;text-align:right}
#tab-spot #st-order-select-trigger span{color:#aabbd0}
#tab-spot .st-order-options{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:50;background:#1b293d;border:1px solid #40536d;border-radius:12px;overflow:hidden;box-shadow:0 10px 25px #0008}
#tab-spot .st-order-options.hidden{display:none!important}
#tab-spot .st-order-options button{display:block;width:100%;padding:13px 15px;border:0;background:transparent;color:#f6f8ff;text-align:right;font-size:15px}
#tab-spot .st-order-options button+button{border-top:1px solid #35445c}
#tab-spot .st-order-options button:active{background:#2a3c56}
/* Trade management dashboard */
#spot-admin-modal{position:fixed;inset:0;z-index:10100;background:rgba(2,6,15,.82);padding:0!important;overflow-y:auto;align-items:flex-start;justify-content:center}
#spot-admin-modal.hidden{display:none!important}
.sa-panel{box-sizing:border-box;width:min(100%,750px);min-height:100dvh;margin:0 auto;background:#0e1626;color:#f4f7ff;box-shadow:0 0 60px #0008;direction:rtl}
.sa-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:24px 18px 18px;background:linear-gradient(135deg,#1b2b43,#101929)}
.sa-eyebrow{font-size:10px;letter-spacing:1.5px;color:#e9b837}.sa-head h2{font-size:24px;margin:8px 0}.sa-head p{font-size:13px;color:#a8b6c8;line-height:1.6;margin:0}.sa-close{background:#2b3951;color:white;border:1px solid #43516a;border-radius:12px;min-width:44px;height:44px;font-size:22px}
.sa-tabs{display:flex;gap:6px;overflow-x:auto;padding:12px 14px;background:#111d30;scrollbar-width:none;position:sticky;top:0;z-index:2}
.sa-tab{flex:none;border:1px solid #35435b;background:#1b2940;color:#afbed0;border-radius:12px;padding:10px 13px;font-size:13px;font-weight:700;white-space:nowrap}
.sa-tab.active{color:#141c2b;background:#f5bc1a;border-color:#f5bc1a}
.sa-content{padding:18px 16px 36px}.sa-page{display:none}.sa-page.active{display:block}.sa-page h3{font-size:20px;margin:6px 0 16px}.sa-hint{font-size:13px;color:#a8b7c9;line-height:1.8}
.sa-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:25px}.sa-summary-grid article{background:#1b2940;border:1px solid #35445b;border-radius:14px;padding:14px 9px;min-width:0}.sa-summary-grid small{display:block;color:#9baabe;font-size:11px}.sa-summary-grid strong{display:block;font-size:22px;margin-top:9px;color:#f5c12b}
.sa-asset-list,.sa-treasury-list,.sa-trade-list{border:1px solid #2e4058;border-radius:16px;overflow:hidden;background:#142036}.sa-asset-item{display:flex;align-items:center;gap:12px;padding:13px 12px;border-bottom:1px solid #2b3b52;min-width:0}.sa-asset-item:last-child{border-bottom:0}.sa-asset-badge{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:#30435e;color:#f6c237;font-size:19px;font-weight:800}.sa-asset-info{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}.sa-asset-info b{font-size:15px}.sa-asset-info small,.sa-asset-price small{color:#98a9bd;font-size:11px}.sa-asset-price{font-size:15px;font-weight:700;direction:ltr;text-align:left;overflow-wrap:anywhere}.sa-side{border-radius:9px;padding:7px 10px;background:#314259;color:white}.sa-side.buy{color:#18c69a}.sa-side.sell{color:#ff657b}
.sa-form{display:flex;flex-direction:column;gap:16px}.sa-form label{display:flex;flex-direction:column;gap:8px;color:#d9e2ef;font-size:14px;font-weight:600}.sa-form input,.sa-form select{box-sizing:border-box;width:100%;height:52px;padding:0 15px;border:1px solid #42516b;border-radius:12px;background:#1b2940;color:#fff;font-size:17px;outline:none;text-align:right;direction:rtl}.sa-form input:focus,.sa-form select:focus{border-color:#f5bc1a}.sa-form input::placeholder{color:#7e8da2;font-size:14px}.sa-primary{align-self:stretch;border:0;border-radius:13px;background:#f5bc1a;color:#151d2b;font-weight:800;font-size:17px;padding:15px}.sa-status{margin-top:18px;color:#f1c858;font-size:14px;line-height:1.6}
@media(min-width:760px){.sa-panel{margin:25px auto;min-height:0;border:1px solid #35435b;border-radius:20px;overflow:hidden}.sa-content{min-height:320px}}

/* Internal asset simulation controls */
#spot-admin-modal .sa-page[data-sa-page="simulation"] .sa-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;align-items:end}
#spot-admin-modal .sa-page[data-sa-page="simulation"] .sa-form label{min-width:0}
#spot-admin-modal .sa-page[data-sa-page="simulation"] .sa-sim-check{display:flex;align-items:center;gap:12px;justify-content:flex-start;min-height:52px}
#spot-admin-modal .sa-page[data-sa-page="simulation"] .sa-sim-check input{width:22px;height:22px;accent-color:#f6bb1a}
#spot-admin-modal .sa-page[data-sa-page="simulation"] .sa-primary{width:100%;min-height:52px}