@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* ========================================== */
/* 🌙 FULL NIGHT THEME (DEFAULT)              */
/* ========================================== */
:root {
    --gold: #00c46a; 
    --bg: #0e1117; 
    --card-bg: #0e1117; 
    --text: #ffffff;
    --text-muted: #8491a5;
    --border: #232b36;
    --danger: #ef4444;

    /* [RESPONSIVE] Reference ফোন ~400px (Realme 8)। clamp(min, vw, max) —
       সব browser এ box এর অনুপাত এক থাকে। market পেজের style.css এর
       variable গুলোর সাথে হুবহু মিল, তাই দুই পেজ একই রকম দেখাবে। */
    --sp-1: clamp(2px,  0.6vw, 4px);
    --sp-2: clamp(3px,  1vw,   6px);
    --sp-3: clamp(6px,  2vw,   11px);
    --sp-4: clamp(8px,  3vw,   16px);
    --sp-5: clamp(12px, 3.6vw, 20px);
    --r-sm: clamp(4px,  1.2vw, 7px);
    --r-md: clamp(6px,  2vw,   11px);
    --r-lg: clamp(10px, 3.4vw, 18px);
    --fs-xs: clamp(9px,  2.6vw, 12px);
    --fs-sm: clamp(11px, 3vw,   14px);
    --fs-md: clamp(13px, 3.6vw, 17px);
    --fs-lg: clamp(15px, 4.4vw, 21px);
    --fs-xl: clamp(18px, 5.4vw, 26px);
    --h-nav: clamp(38px, 10vw, 46px);   /* [SMALLER] শুধু লোগো, তাই কম উচ্চতা */
}

/* ========================================== */
/* 🌞 LIGHT MODE THEME                        */
/* ========================================== */
body[data-theme="light"] {
    --bg: #f4f6f9;         
    --card-bg: #ffffff;    
    --text: #111827;       
    --text-muted: #6b7280; 
    --border: #e5e7eb;     
}

body[data-theme="light"] .theme-dropdown {
    background: #ffffff;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
body[data-theme="light"] .hamburger-menu {
    background: rgba(255,255,255,0.97);
    border-color: rgba(0,204,85,0.25);
    box-shadow: 0 24px 80px rgba(0,0,0,0.15);
}
body[data-theme="light"] .hamburger-menu a:hover { background: rgba(0,204,85,0.06); color: #00884a; }
body[data-theme="light"] .menu-ico-green { border-color: rgba(0,136,74,0.3); background: rgba(0,136,74,0.08); }
body[data-theme="light"] .menu-ico-green i { color: #00884a; }
body[data-theme="light"] .theme-item:hover,
body[data-theme="light"] .menu-item:hover { background: #f3f4f6; }
body[data-theme="light"] .bottom-nav { background: #ffffff; }
body[data-theme="light"] input, 
body[data-theme="light"] textarea { background: #f9fafb; color: #111827; }
body[data-theme="light"] .chat-input-area input { background: #f3f4f6; }
body[data-theme="light"] .grid-box-label { background: #ffffff; }

/* ========================================== */
/* ⛅ TWILIGHT THEME (Blueish Dark)           */
/* ========================================== */
body[data-theme="twilight"] {
    --bg: #131722;         
    --card-bg: #1e222d;    
    --text: #d1d4dc;       
    --text-muted: #787b86; 
    --border: #2a2e39;     
}
body[data-theme="twilight"] .bottom-nav { background: #1e222d; }
body[data-theme="twilight"] .grid-box-label { background: #1e222d; }

/* ========================================== */
/* GENERAL STYLES                             */
/* ========================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body { font-family: 'Roboto', sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.3s, color 0.3s; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--text); }
a { text-decoration: none; color: inherit; }

/* Top Header */
.top-header { position: fixed; top: 0; left: 0; right: 0; height: 65px; background: var(--card-bg); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; padding: 0 20px; z-index: 1000; transition: background 0.3s, border 0.3s; }
.logo { cursor: pointer; display: flex; align-items: center; }
.gv-logo-wrap { display: flex; align-items: center; gap: 8px; }
.gv-logo-icon {
    width: 32px; height: 32px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, #0d1a12, #111620);
    border: 1.5px solid #00cc55;
    box-shadow: 0 0 14px rgba(0,204,85,0.35), 0 0 5px rgba(0,204,85,0.15), inset 0 1px 0 rgba(0,255,100,0.1);
}
.gv-logo-text { display: flex; flex-direction: column; line-height: 1; }
/* Hardcoded — all themes */
.gv-logo-name { font-size: 16px; font-weight: 800; color: #f0f2f8 !important; letter-spacing: -0.3px; }
.gv-logo-name span { color: #00cc55 !important; }
.gv-logo-sub { font-size: 7.5px; font-weight: 600; color: #8892a4 !important; letter-spacing: 2px; text-transform: uppercase; margin-top: 2px; }
body[data-theme="light"] .gv-logo-name { color: #1a1d28 !important; }
body[data-theme="light"] .gv-logo-name span { color: #00aa44 !important; }
body[data-theme="light"] .gv-logo-sub { color: #6b7280 !important; }
body[data-theme="light"] .gv-logo-icon { border-color: #00aa44 !important; box-shadow: 0 0 14px rgba(0,170,68,0.3) !important; }
body[data-theme="twilight"] .gv-logo-name { color: #f0f2f8 !important; }
body[data-theme="twilight"] .gv-logo-name span { color: #00cc55 !important; }
.hamburger {
    display: flex; flex-direction: column; gap: 5px;
    cursor: pointer; padding: 5px;
    width: 38px; height: 38px;
    align-items: center; justify-content: center;
    border-radius: 10px;
    transition: background 0.2s;
}
.hamburger:active { background: rgba(255,255,255,0.04); }
.hamburger span {
    width: 20px; height: 2px;
    background: #8892a4;
    border-radius: 2px;
    transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
    transform-origin: center;
}
/* Open state — green glow X */
.hamburger.open { filter: drop-shadow(0 0 5px #00cc55); }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: #00cc55; }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: #00cc55; }

/* Loader */
.loader { position: fixed; inset: 0; background: var(--bg); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; }
.spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.loader p { color: var(--text-muted); font-weight: 500; font-size: 14px; }

/* Container & Pages */
.container { padding: 85px 15px 90px 15px; max-width: 500px; margin: 0 auto; height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.container::-webkit-scrollbar { display: none; }
.page { display: none; animation: fadeIn 0.3s ease; }
.page.active-page { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Cards */
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-4); box-shadow: 0 4px 20px rgba(0,0,0,0.05); transition: background 0.3s, border 0.3s; }
.card-header, .wallet-header, .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-5); }
.wallet-header h3 { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-lg); }
.page-title { font-size: var(--fs-lg); font-weight: 700; display: flex; align-items: center; gap: var(--sp-3); }
.close-btn { width: clamp(32px,9vw,42px); height: clamp(32px,9vw,42px); border-radius: var(--r-md); background: var(--card-bg); border: 1px solid var(--border); color: var(--text); font-size: var(--fs-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: 0.2s; }
.close-btn:active { transform: scale(0.95); }

/* Wallet Stats */
.wallet-stats { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); }

/* ── Wallet Balance Cards ── */
.stat-box {
    flex: 1; border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-4);
    cursor: pointer; transition: 0.2s;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
}

/* Live — Green gradient */
.stat-live {
    background: linear-gradient(135deg, #0a1f0f 0%, #0d2416 100%);
    border: 1.5px solid rgba(0,230,100,0.4);
    box-shadow: 0 4px 20px rgba(0,204,85,0.15), inset 0 1px 0 rgba(0,255,100,0.08);
}
.stat-live::after {
    content: ''; position: absolute; top: -30px; right: -30px;
    width: 100px; height: 100px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,204,85,0.12), transparent 70%);
}
.stat-live.active-card {
    border-color: rgba(0,255,100,0.6);
    box-shadow: 0 0 20px rgba(0,204,85,0.25), inset 0 1px 0 rgba(0,255,100,0.1);
}

/* Demo — Cyan-Blue gradient */
.stat-demo {
    background: linear-gradient(135deg, #071620 0%, #0a1c28 100%);
    border: 1.5px solid rgba(0,160,255,0.35);
    box-shadow: 0 0 20px rgba(0,140,255,0.1), inset 0 1px 0 rgba(0,180,255,0.06);
}
.stat-demo::after {
    content: ''; position: absolute; top: -30px; right: -30px;
    width: 100px; height: 100px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,160,255,0.1), transparent 70%);
}
.stat-demo.active-card {
    border-color: rgba(0,180,255,0.55);
    box-shadow: 0 0 22px rgba(0,150,255,0.2), inset 0 1px 0 rgba(0,200,255,0.1);
}

/* Dot indicator */
.stat-label {
    font-size: 10px; color: #8892a4; font-weight: 700;
    margin-bottom: 8px; text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex; align-items: center; gap: 5px;
}
.stat-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.stat-dot-live {
    background: #00e064;
    box-shadow: 0 0 6px #00cc55;
    animation: dot-pulse 2s infinite;
}
.stat-dot-demo { background: #00a0ff; }
@keyframes dot-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

.stat-value {
    font-size: clamp(15px, 4.5vw, 22px); font-weight: 800;
    color: #f0f2f8 !important;
    word-wrap: break-word; overflow-wrap: anywhere;
    line-height: 1.2; letter-spacing: -0.5px;
}
.stat-sub { font-size: 10px; margin-top: 5px; opacity: 0.55; color: #8892a4; }
.stat-live .stat-sub { color: #00cc55; opacity: 0.8; }
.stat-demo .stat-sub { color: #0090e0; opacity: 0.8; }

/* Badges */
.gold-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 196, 106, 0.1); color: var(--gold); padding: 8px 14px; border-radius: 20px; font-size: 13px; font-weight: 700; }

/* Active account badge — gradient green */
.active-account-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(90deg, rgba(0,204,85,0.1), rgba(0,150,255,0.1));
    border: 1px solid rgba(0,200,100,0.3);
    color: #00ee66;
    padding: 7px 16px; border-radius: 20px;
    font-size: 12px; font-weight: 600;
}

/* Buttons */
.action-row { display: flex; gap: var(--sp-4); margin-top: var(--sp-5); }
.btn { flex: 1; padding: var(--sp-4); background: linear-gradient(135deg, #00e060, #00aa44); color: #ffffff; border: none; border-radius: var(--r-md); font-size: var(--fs-md); font-weight: 700; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); box-shadow: 0 4px 18px rgba(0,220,80,0.35); }
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn-secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border); box-shadow: none; }
.btn-sm { padding: var(--sp-3) var(--sp-4); background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; width: 100%; margin-top: var(--sp-3); transition: 0.2s;}
.btn-sm:active { background: var(--card-bg); }
.refresh-btn { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); padding: var(--sp-3) var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: var(--sp-2); }

/* Market List */
.flex-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.market-item { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); }
.market-item:last-child { border-bottom: none; padding-bottom: 0; }
.market-name { font-size: 15px; font-weight: 600; color: var(--text); }
.market-price { font-size: 16px; font-weight: 700; }
.market-change { font-size: 13px; font-weight: 600; padding: 4px 8px; border-radius: 6px; margin-left: 8px; }
.market-change.positive { background: rgba(0, 196, 106, 0.1); color: var(--gold); }
.market-change.negative { background: rgba(239, 68, 68, 0.1); color: var(--danger); }

/* Bottom Nav */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    /* [FIX] gesture-bar ওয়ালা ফোনে (iPhone/নতুন Android) nav চাপা পড়ত —
       safe-area-inset-bottom সেই ফোনে বাড়তি জায়গা দেয়, অন্য ফোনে 0 (কোনো বদল নেই) */
    height: calc(var(--h-nav) + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; justify-content: space-around; align-items: center;
    padding: 0 var(--sp-3) calc(2px + env(safe-area-inset-bottom, 0px)); gap: var(--sp-1); z-index: 1000;
}
.nav-item {
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: var(--sp-1);
    color: #4b5563; font-size: var(--fs-xs); font-weight: 600;
    cursor: pointer; flex: 1;
    padding-top: var(--sp-2);
    transition: color 0.2s;
    position: relative;
}
/* [LOGO ONLY] footer এ শুধু আইকন — লেখা লুকানো, তাই nav পাতলা ও chart বড় */
.nav-item span { display: none; }
.nav-item { padding-top: 0 !important; gap: 0 !important; }
.nav-item svg { transition: 0.2s; width: clamp(20px, 5.6vw, 26px); height: clamp(20px, 5.6vw, 26px); }
.nav-dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: transparent;
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    transition: all 0.2s;
}
.nav-item.active { color: #00cc55; }
.nav-item.active .nav-dot {
    background: #00cc55;
    box-shadow: 0 0 6px #00cc55, 0 0 12px rgba(0,204,85,0.4);
}
.nav-item:not(.active):active { color: #8892a4; }

/* Hamburger Menu Dropdown */
.hamburger-menu { position: fixed; top: 70px; right: 17px; width: 232px; background: rgba(14, 17, 23, 0.98); border: 1px solid rgba(0, 204, 85, 0.2); border-radius: 20px; padding: 8px; display: none; z-index: 1001; box-shadow: 0 0 0 1px rgba(0,204,85,0.06), 0 24px 80px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.04); backdrop-filter: blur(20px); max-height: 420px; overflow-y: auto; }
.hamburger-menu a, .menu-item { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-3); color: var(--text); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; cursor: pointer; border-radius: var(--r-md); transition: 0.18s; margin-bottom: 2px; }
.hamburger-menu a:hover, .menu-item:hover { background: rgba(0,204,85,0.07); color: #00cc55; }
.hamburger-menu a:hover .menu-ico { border-color: rgba(0,204,85,0.6); box-shadow: 0 0 10px rgba(0,204,85,0.25); }
.hamburger-menu i { font-size: 14px; }
.menu-ico { width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid rgba(0,204,85,0.35); background: rgba(0,204,85,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: 0.18s; }
.menu-ico-green { border-color: rgba(0,204,85,0.35); background: rgba(0,204,85,0.1); color: #00cc55; }
.menu-ico-green i { color: #00e066; }
.menu-ico-red { border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.1); color: #ef4444; }
.menu-ico-red i { color: #ef4444; }
.menu-logout { color: #ef4444 !important; }
.menu-logout:hover { background: rgba(239,68,68,0.08) !important; color: #ef4444 !important; }
.menu-logout:hover .menu-ico { border-color: rgba(239,68,68,0.6) !important; box-shadow: 0 0 10px rgba(239,68,68,0.2) !important; }
.menu-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 4px; }

/* Theme Switcher */
.theme-dropdown { position: fixed; top: 70px; right: 65px; width: 210px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 12px; display: none; flex-direction: column; gap: 10px; z-index: 1001; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.theme-item { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: 30px; cursor: pointer; font-size: var(--fs-md); font-weight: 600; color: var(--text); background: transparent; border: 1px solid var(--border); transition: all 0.2s; }
.theme-item i { font-size: var(--fs-lg); width: 20px; text-align: center; }
.theme-item:hover { background: rgba(132, 145, 165, 0.1); }
.theme-item.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.theme-item.active i { color: var(--bg) !important; }

/* Forms / Inputs */
input[type="text"], textarea { width: 100%; padding: var(--sp-4); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); font-size: var(--fs-md); font-weight: 500; outline: none; margin-bottom: var(--sp-4); font-family: inherit; transition: 0.2s; }
input:focus, textarea:focus { border-color: var(--gold); }
.referral-link { background: var(--bg); border: 1px dashed var(--border); padding: var(--sp-4); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--gold); word-break: break-all; margin-bottom: var(--sp-4); text-align: center; font-weight: 600;}

/* Tx Items */
.tx-item { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.tx-item:last-child { border-bottom: none; }
.tx-item b { font-size: var(--fs-md); color: var(--text); display: block; margin-bottom: var(--sp-2); }
.tx-item small { font-size: var(--fs-xs); color: var(--text-muted); }

/* Toast */
.toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: var(--card-bg); color: var(--text); padding: 14px 28px; border-radius: 40px; font-size: 14px; font-weight: 600; box-shadow: 0 4px 20px rgba(0,0,0,0.6); z-index: 10000; border: 1px solid var(--border); white-space: nowrap; transition: 0.3s; }

/* Settings Page */
.settings-section-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 12px; padding-left: 5px; }
.settings-card { background: var(--card-bg); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-5); border: 1px solid var(--border); }
.settings-item { display: flex; align-items: center; padding: var(--sp-4); border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.2s; }
.settings-item:hover { background: rgba(132, 145, 165, 0.05); }
.settings-item:last-child { border-bottom: none; }
.settings-icon { width: clamp(32px,9vw,42px); display: flex; justify-content: flex-start; align-items: center; font-size: var(--fs-lg); color: var(--text); }
.settings-text { flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); }
.settings-title { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.settings-subtitle { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; line-height: 1.3; }
.settings-action { font-size: var(--fs-md); display: flex; align-items: center; justify-content: center; padding-left: var(--sp-3); }

/* Chat Support */
.chat-container { display: flex; flex-direction: column; height: calc(100vh - 220px); background: var(--card-bg); border-radius: 16px; border: 1px solid var(--border); overflow: hidden; }
.chat-messages { flex: 1; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.message { max-width: 82%; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); font-size: var(--fs-sm); line-height: 1.4; word-wrap: break-word; position: relative; }
.bot-message { background: var(--bg); border: 1px solid var(--border); color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; }
.user-message { background: var(--gold); color: #ffffff; font-weight: 600; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-input-area { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--bg); border-top: 1px solid var(--border); }
.chat-input-area input { flex: 1; margin-bottom: 0; border: 1px solid var(--border); background: var(--card-bg); border-radius: 24px; padding: var(--sp-4) var(--sp-4); color: var(--text); outline: none; transition: 0.2s; font-size: var(--fs-sm); }
.chat-input-area input:focus { border-color: var(--gold); }
.chat-input-area button { width: clamp(42px,12vw,54px); height: clamp(42px,12vw,54px); border-radius: 50%; background: var(--gold); color: #ffffff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--fs-md); transition: 0.2s; flex-shrink: 0; }
.chat-input-area button:active { transform: scale(0.9); }
.chat-bot-typing { font-size: 12px; color: var(--text-muted); align-self: flex-start; margin-bottom: 5px; display: none; padding-left: 5px; font-style: italic;}

/* ========================================== */
/* GRID & COLOR POPUP                         */
/* ========================================== */
.grid-modal { position: fixed; inset: 0; z-index: 3000; align-items: flex-end; justify-content: center; display: none; }
.grid-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); }
.grid-content { position: relative; z-index: 3001; background: var(--card-bg); border-radius: 24px 24px 0 0; width: 100%; max-width: 480px; padding: 24px 20px 32px; border-top: 1px solid var(--border); box-shadow: 0 -8px 32px rgba(0,0,0,0.5); transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.34,1.1,0.64,1); }

/* Opacity Stepper */
.grid-box { position: relative; border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; margin-top: 10px; }
.grid-box-label { position: absolute; top: -10px; left: 16px; background: #151921; padding: 0 6px; color: var(--text-muted); font-size: 13px; }
.grid-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(132, 145, 165, 0.1); border: none; color: var(--text); font-size: 20px; font-weight: 300; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.grid-btn:hover { background: rgba(132, 145, 165, 0.2); }
.grid-val { color: var(--text); font-size: 20px; font-weight: 500; }

/* Graph Colors */
.color-section-title { font-size: 12px; color: var(--text); font-weight: 700; text-transform: uppercase; margin-bottom: 16px; letter-spacing: 0.5px; }
.color-row-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.color-circle { width: 20px; height: 20px; border-radius: 50%; }
.color-row-header span { font-size: 15px; font-weight: 700; color: var(--text); }
.color-palette { background: rgba(132, 145, 165, 0.05); border: 1px solid var(--border); border-radius: 8px; padding: 10px; display: flex; gap: 12px; margin-bottom: 20px; }
.color-box { width: 38px; height: 38px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: transparent; font-size: 16px; transition: transform 0.2s; }
.color-box:active { transform: scale(0.9); }
.color-box.selected { color: white; }

/* ========================================== */
/* STYLED SELECT BOX (Language & Timezone)    */
/* ========================================== */
.styled-select-container { position: relative; margin-bottom: 20px; }
.styled-select-container:last-child { margin-bottom: 10px; }
.styled-select-label { position: absolute; top: -8px; left: 14px; background: var(--card-bg); padding: 0 6px; font-size: 12px; color: var(--text-muted); z-index: 5; font-weight: 600; letter-spacing: 0.3px; transition: background 0.3s; }
.styled-select { width: 100%; padding: 14px 40px 14px 44px; background: transparent; border: 1.5px solid var(--border); border-radius: 10px; color: var(--text); font-size: 15px; font-weight: 600; outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color 0.2s, color 0.3s; }
.styled-select:focus { border-color: var(--gold); }
.styled-select-icon { position: absolute; top: 50%; left: 16px; transform: translateY(-50%); color: var(--text-muted); font-size: 16px; pointer-events: none; }
.styled-select-arrow { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; pointer-events: none; }
.styled-select option { background: var(--card-bg); color: var(--text); }

/* ========================================== */
/* REFERRAL STATISTICS & PROGRESS (NEW)       */
/* ========================================== */
.stats-trigger-btn { background: var(--bg); border: 1.5px solid var(--border); border-radius: 16px; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: 0.2s; }
.stats-trigger-btn:active { transform: scale(0.97); }

.stats-info-box { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin-bottom: 24px; }
.stat-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 14.5px; color: var(--text-muted); font-weight: 500; }
.stat-row strong { color: var(--text); font-size: 16px; font-weight: 700; }
.stat-row.highlight { margin-bottom: 0; padding-top: 14px; border-top: 1px dashed var(--border); }
.stat-row.highlight strong { font-size: 19px; font-weight: 800; }

.progress-section { margin-bottom: 15px; }
.progress-labels { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text-muted); margin-bottom: 10px; font-weight: 600; }
.progress-track { width: 100%; height: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; position: relative; }
.progress-fill { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, #00c46a, #10b981); width: 0%; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 12px; box-shadow: 0 0 10px rgba(0, 196, 106, 0.3); }


/* ══════════════════════════════════════════
   PERSONAL INFORMATION PAGE
══════════════════════════════════════════ */
.pi-header {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    background: var(--bg);
}
.pi-back-btn {
    width: clamp(32px,9vw,42px); height: clamp(32px,9vw,42px); border-radius: var(--r-md);
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text); font-size: var(--fs-sm);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
}
.pi-header-title {
    font-size: var(--fs-md); font-weight: 700; color: var(--text);
}

/* Avatar */
.pi-avatar-section {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-4);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    margin: 0 var(--sp-4) var(--sp-3);
}
.pi-avatar {
    width: clamp(56px,16vw,76px); height: clamp(56px,16vw,76px); border-radius: 50%;
    background: linear-gradient(135deg, #0d1a12, #111620);
    border: 2px solid #00cc55;
    box-shadow: 0 0 18px rgba(0,204,85,0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xl); font-weight: 800; color: #00cc55;
    flex-shrink: 0;
}
.pi-avatar-info { flex: 1; min-width: 0; overflow: hidden; }
.pi-avatar-name { font-size: var(--fs-lg); font-weight: 700; color: var(--text); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-avatar-id { font-size: var(--fs-xs); color: var(--text-muted); }

/* Section label */
.pi-section-label {
    font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
}

/* Card */
.pi-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    margin: 0 var(--sp-4);
    overflow: hidden;
}

/* Row — read only */
.pi-row {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-4);
}
.pi-row-icon {
    width: clamp(32px,9vw,42px); height: clamp(32px,9vw,42px); border-radius: var(--r-md);
    background: rgba(255,255,255,0.04);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: var(--fs-sm); flex-shrink: 0;
}
.pi-row-content { flex: 1; min-width: 0; }
.pi-row-label { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 2px; }
.pi-row-value { font-size: var(--fs-sm); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-row-badge {
    font-size: 10px; font-weight: 700; color: #00cc55;
    background: rgba(0,204,85,0.12);
    border: 1px solid rgba(0,204,85,0.2);
    border-radius: 6px; padding: 2px 8px;
    flex-shrink: 0;
}

/* Divider */
.pi-divider { height: 1px; background: var(--border); margin: 0 var(--sp-4); }

/* Field — editable */
.pi-field { padding: var(--sp-3) var(--sp-4); }
.pi-field-label {
    display: block; font-size: 11px; font-weight: 600;
    color: var(--text-muted); margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.pi-input {
    width: 100%; background: transparent !important;
    border: none !important; outline: none !important;
    color: var(--text) !important; font-size: 14px !important;
    font-weight: 500; font-family: inherit;
    padding: 0 !important; margin: 0 !important;
    border-radius: 0 !important;
}
.pi-input:focus { color: #00cc55 !important; }
.pi-select {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.pi-input::placeholder { color: var(--text-muted) !important; font-weight: 400; }

/* Save button */
.pi-save-btn {
    width: calc(100% - 32px);
    margin: 20px 16px;
    padding: 15px;
    background: linear-gradient(135deg, #00cc55, #00aa44);
    border: none; border-radius: 14px;
    color: white; font-size: 15px; font-weight: 700;
    cursor: pointer; font-family: inherit;
    box-shadow: 0 4px 20px rgba(0,204,85,0.35);
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.pi-save-btn:active { transform: scale(0.98); opacity: 0.9; }

/* Light mode */
body[data-theme="light"] .pi-back-btn { background: #f3f4f6; border-color: #e5e7eb; color: #374151; }
body[data-theme="light"] .pi-avatar { background: #f0fdf4; }
body[data-theme="light"] .pi-row-icon { background: #f3f4f6; }
body[data-theme="light"] .pi-input { color: #111827 !important; }
body[data-theme="light"] .pi-input:focus { color: #00aa44 !important; }


/* ══════════════════════════════════════════
   PASSWORD PAGE
══════════════════════════════════════════ */
.pw-notice {
    display: flex; align-items: center; gap: 10px;
    margin: 0 16px 4px;
    padding: 12px 16px;
    background: rgba(0,204,85,0.06);
    border: 1px solid rgba(0,204,85,0.15);
    border-radius: 12px;
    font-size: 12px; color: #8892a4; line-height: 1.4;
}
.pw-notice i { color: #00cc55; font-size: 16px; flex-shrink: 0; }

/* Input with eye toggle */
.pw-input-wrap { display: flex; align-items: center; gap: 8px; }
.pw-eye {
    background: transparent; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 14px; padding: 0;
    flex-shrink: 0; transition: color 0.2s;
}
.pw-eye:hover { color: var(--text); }

/* Strength bars */
.pw-strength-wrap {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px;
}
.pw-strength-bars { display: flex; gap: 5px; flex: 1; }
.pw-bar {
    flex: 1; height: 4px; border-radius: 4px;
    background: rgba(255,255,255,0.08);
    transition: background 0.3s;
}
.pw-strength-label { font-size: 12px; font-weight: 700; min-width: 50px; text-align: right; }

/* Rules */
.pw-rules { padding: 8px 16px 12px; display: flex; flex-direction: column; gap: 6px; }
.pw-rule { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; transition: color 0.2s; }
.pw-rule i { font-size: 13px; color: #e53935; }
.pw-rule.pw-rule-ok { color: #00cc55; }
.pw-rule.pw-rule-ok i { color: #00cc55; }

/* Forgot password button */
.pw-forgot-btn {
    width: calc(100% - 32px);
    margin: 0 16px 24px;
    padding: 13px;
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    color: var(--text-muted); font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all 0.2s;
}
.pw-forgot-btn:hover { border-color: rgba(0,204,85,0.3); color: #00cc55; }
.pw-forgot-btn i { font-size: 14px; }

body[data-theme="light"] .pw-notice { background: rgba(0,170,68,0.05); }
body[data-theme="light"] .pw-bar { background: #e5e7eb; }
body[data-theme="light"] .pw-forgot-btn { border-color: #e5e7eb; color: #6b7280; }


/* ══════════════════════════════════════════
   TRANSACTIONS PAGE
══════════════════════════════════════════ */
.tx-refresh-btn {
    margin-left: auto;
    background: transparent; border: none;
    color: var(--text-muted); font-size: 16px;
    cursor: pointer; padding: 6px;
    transition: color 0.2s, transform 0.3s;
}
.tx-refresh-btn:active { transform: rotate(180deg); color: #00cc55; }

/* Summary */


/* Tabs */
.tx-tabs {
    display: flex; gap: 8px;
    padding: 12px 16px 8px;
}
.tx-tab {
    flex: 1; font-size: var(--fs-sm); padding: 8px 4px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted); font-size: 12px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    transition: all 0.2s;
}
.tx-tab.active {
    background: rgba(0,204,85,0.1);
    border-color: rgba(0,204,85,0.35);
    color: #00cc55;
}

/* Loading */
.tx-loading {
    text-align: center; color: var(--text-muted);
    padding: 40px 20px; font-size: 14px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}

/* Empty */
.tx-empty {
    text-align: center; color: var(--text-muted);
    padding: 50px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.tx-empty i { font-size: 36px; opacity: 0.3; }
.tx-empty p { font-size: 14px; }

/* List */
.tx-list { padding: 0 16px 24px; display: flex; flex-direction: column; gap: 8px; }

/* Card */
.tx-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    transition: background 0.15s;
}
.tx-card:active { background: rgba(255,255,255,0.03); }
.tx-card-icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.tx-icon-dep   { background: rgba(0,204,85,0.12);  color: #00cc55; }
.tx-icon-with  { background: rgba(229,57,53,0.12); color: #e53935; }
.tx-icon-other { background: rgba(240,180,41,0.12); color: #f0b429; }

.tx-card-info { flex: 1; min-width: 0; }
.tx-card-title { font-size: 14px; font-weight: 600; color: var(--text); }
.tx-card-row2  { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tx-card-id    { font-size: 11px; color: var(--text-muted); font-weight: 500; font-family: monospace; letter-spacing: 0.3px; }
.tx-card-sub   { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

.tx-card-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; flex-shrink: 0; }
.tx-card-amount { font-size: 14px; font-weight: 700; }

/* Pending — red */
.tx-status-pending { background: rgba(229,57,53,0.12) !important; color: #e53935 !important; }

/* Status badge */
.tx-status {
    font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 6px;
}
.tx-status-ok      { background: rgba(0,204,85,0.12);  color: #00cc55; }
.tx-status-fail    { background: rgba(229,57,53,0.12); color: #e53935; }
.tx-status-pending { background: rgba(240,180,41,0.12); color: #f0b429; }

/* Light mode */
body[data-theme="light"] .tx-tab { background: #f9fafb; border-color: #e5e7eb; }
body[data-theme="light"] .tx-card { background: #ffffff; border-color: #e5e7eb; }



/* ── Featured Markets ── */
.feat-market-row {
    cursor: pointer; padding: var(--sp-3) 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    display: flex; align-items: center; justify-content: space-between;
    transition: background 0.15s; border-radius: 0;
}
.feat-market-row:last-child { border-bottom: none; }
.feat-market-row:active { background: rgba(255,255,255,0.03); }

.hot-badge-feat {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,107,53,0.12); border: 1px solid rgba(255,107,53,0.25);
    color: #ff6b35; font-size: var(--fs-xs); font-weight: 700;
    padding: var(--sp-2) var(--sp-3); border-radius: 20px;
}


/* Featured Markets skeleton */
.feat-loading { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.feat-skel {
    height: clamp(46px, 13vw, 60px); border-radius: var(--r-md);
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s infinite;
}
@keyframes skel-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ── Support Ticket System ── */
.spt-desc { font-size: 13px; color: var(--text-muted); margin: 14px 0 10px; }
.spt-options { display: flex; flex-direction: column; gap: 8px; }
.spt-option {
    display: flex; align-items: center; gap: 12px;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 12px; padding: 14px 16px; cursor: pointer;
    transition: 0.15s;
}
.spt-option:active { background: rgba(0,204,85,0.06); border-color: rgba(0,204,85,0.3); }
.spt-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(0,204,85,0.1); display: flex; align-items: center; justify-content: center; color: #00cc55; font-size: 15px; flex-shrink: 0; }
.spt-info { flex: 1; }
.spt-title { font-size: 13px; font-weight: 600; color: var(--text); }
.spt-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.spt-arrow { color: var(--text-muted); font-size: 12px; }
.spt-back-btn { display: flex; align-items: center; gap: 6px; background: none; border: none; color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; margin-bottom: 14px; }
.spt-issue-badge { background: rgba(0,204,85,0.08); border: 1px solid rgba(0,204,85,0.2); color: #00cc55; border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 600; margin-bottom: 14px; }
.spt-tx-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; max-height: 180px; overflow-y: auto; }
.spt-tx-item { display: flex; align-items: center; gap: 10px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-size: 12px; color: var(--text); transition: 0.15s; }
.spt-tx-item.selected { border-color: #00cc55; background: rgba(0,204,85,0.06); }
.spt-upload-area {
    border: 2px dashed var(--border); border-radius: 12px; padding: 20px;
    text-align: center; cursor: pointer; color: var(--text-muted);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    font-size: 13px; transition: 0.2s;
}
.spt-upload-area:active { border-color: #00cc55; }
.spt-upload-area i { font-size: 24px; color: #00cc55; }
.spt-textarea { width: 100%; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px; color: var(--text); font-size: 13px; resize: none; height: 80px; outline: none; }
.spt-textarea:focus { border-color: #00cc55; }
.spt-submit-btn { width: 100%; margin-top: 16px; background: linear-gradient(135deg, #00e060, #00aa44); border: none; border-radius: 12px; padding: 15px; color: white; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.spt-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }


/* ── KYC Verification ── */
.kyc-steps {
    display: flex; align-items: center; justify-content: center;
    gap: 0; margin: 16px 0 24px; padding: 0 8px;
}
.kyc-step { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.kyc-step-dot {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--card-bg); border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: var(--text-muted);
    transition: 0.2s;
}
.kyc-step.active .kyc-step-dot { background: #00cc55; border-color: #00cc55; color: white; }
.kyc-step.done .kyc-step-dot { background: rgba(0,204,85,0.2); border-color: #00cc55; color: #00cc55; }
.kyc-step-label { font-size: 10px; color: var(--text-muted); font-weight: 600; }
.kyc-step.active .kyc-step-label { color: #00cc55; }
.kyc-step-line { flex: 1; height: 2px; background: var(--border); min-width: 24px; margin-bottom: 14px; }

.kyc-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.kyc-back-link { display: flex; align-items: center; gap: 6px; background: none; border: none; color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; margin-bottom: 14px; }

.kyc-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.kyc-field { display: flex; flex-direction: column; gap: 5px; }
.kyc-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.kyc-input { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; color: var(--text); font-size: 14px; outline: none; width: 100%; transition: 0.2s; }
.kyc-input:focus { border-color: #00cc55; }

.kyc-doc-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.kyc-doc-option {
    display: flex; align-items: center; gap: 14px;
    background: var(--card-bg); border: 1.5px solid var(--border);
    border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: 0.15s;
}
.kyc-doc-option.selected { border-color: #00cc55; background: rgba(0,204,85,0.06); }
.kyc-doc-option i { font-size: 22px; color: #00cc55; width: 28px; text-align: center; flex-shrink: 0; }
.kyc-doc-title { font-size: 14px; font-weight: 700; color: var(--text); }
.kyc-doc-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.kyc-upload-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--card-bg); border: 1.5px dashed var(--border);
    border-radius: 12px; padding: 14px 16px; cursor: pointer;
    transition: 0.15s; margin-bottom: 10px;
}
.kyc-upload-card.uploaded { border-style: solid; border-color: #00cc55; }
.kyc-upload-card:active { border-color: #00cc55; }
.kyc-upload-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(0,204,85,0.1); display: flex; align-items: center; justify-content: center; color: #00cc55; font-size: 18px; flex-shrink: 0; }
.kyc-upload-info { flex: 1; }
.kyc-upload-title { font-size: 14px; font-weight: 700; color: var(--text); }
.kyc-upload-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.kyc-tip { font-size: 11px; color: var(--text-muted); background: rgba(0,204,85,0.06); border: 1px solid rgba(0,204,85,0.15); border-radius: 8px; padding: 10px 12px; margin: 12px 0 20px; display: flex; align-items: flex-start; gap: 8px; }
.kyc-tip i { color: #00cc55; margin-top: 1px; flex-shrink: 0; }

.kyc-next-btn { width: 100%; background: linear-gradient(135deg, #00e060, #00aa44); border: none; border-radius: 12px; padding: 15px; color: white; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.kyc-submit-btn { width: 100%; background: linear-gradient(135deg, #00e060, #00aa44); border: none; border-radius: 12px; padding: 15px; color: white; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
.kyc-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.kyc-review-box { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.kyc-review-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.kyc-review-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; flex-shrink: 0; }
.kyc-review-val { font-size: 13px; font-weight: 600; color: var(--text); text-align: right; }
.kyc-review-imgs { display: flex; gap: 8px; margin-top: 4px; }
.kyc-review-imgs img { width: 80px; height: 55px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }

/* KYC status banner */
.kyc-banner { border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.kyc-banner-pending  { background: rgba(240,180,41,0.1);  border: 1px solid rgba(240,180,41,0.3);  color: #f0b429; }
.kyc-banner-approved { background: rgba(0,204,85,0.1);    border: 1px solid rgba(0,204,85,0.3);    color: #00cc55; }
.kyc-banner-rejected { background: rgba(229,57,53,0.1);   border: 1px solid rgba(229,57,53,0.3);   color: #e53935; }


/* ── Profile Picture ── */
.pi-avatar { position: relative; overflow: visible !important; }
.pi-avatar-edit-icon {
    position: absolute; bottom: -2px; right: -2px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #00cc55; border: 2px solid var(--card-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: white; pointer-events: none;
}
.pi-avatar img {
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%;
}

/* ══════════════════════════════════════════════════════════════
   [LEADERBOARD] Top 30 — ২৪ ঘণ্টার নিট লাভ
   ══════════════════════════════════════════════════════════════ */
.lb-note {
    font-size: var(--fs-xs); color: var(--text-muted);
    padding: 0 var(--sp-1) var(--sp-3); line-height: 1.5;
}
.lb-note b { color: #f59e0b; }

.lb-head {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border);
}
.lb-h-pos    { width: 26px; flex-shrink: 0; }
.lb-h-user   { flex: 1; }
.lb-h-profit { text-align: right; }

.lb-row {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
}
.lb-row:last-child { border-bottom: none; }
.lb-row.me { background: rgba(0,204,85,0.07); }

.lb-pos {
    width: 26px; flex-shrink: 0;
    font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted);
}
/* প্রথম তিনজন — সোনা/রুপা/ব্রোঞ্জ */
.lb-pos.p1 { color: #f59e0b; }
.lb-pos.p2 { color: #94a3b8; }
.lb-pos.p3 { color: #b45309; }

/* [FLAG] গোল বৃত্ত — ভেতরে SVG ছবি object-fit: cover দিয়ে বসে */
.lb-flag {
    flex-shrink: 0;
    width: clamp(19px, 5.2vw, 24px);
    height: clamp(19px, 5.2vw, 24px);
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.lb-user {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: var(--sp-2);
}
.lb-name {
    font-size: var(--fs-sm); font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-bot {
    font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
    color: #f59e0b; background: rgba(245,158,11,0.14);
    padding: 2px 5px; border-radius: 4px; flex-shrink: 0;
}
.lb-profit {
    font-size: var(--fs-sm); font-weight: 700; flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
/* [FIX] style.css এ Up/Down বাটনের জন্য খোলা `.up`/`.down` নিয়ম আছে
   (background সবুজ/লাল)। market পেজ দুটো CSS ই লোড করে, তাই সেটা
   leaderboard এর profit এও রঙিন ব্লক বসিয়ে দিত। background বাতিল করি। */
.lb-profit.up   { color: #00cc55;        background: none; }
.lb-profit.down { color: var(--danger);  background: none; }

.lb-empty {
    padding: var(--sp-5) var(--sp-4);
    text-align: center; font-size: var(--fs-sm); color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════
   [DRAWER] Top 30 — chart পেজে পুরো পর্দা জুড়ে (market drawer এর মতো)
   ডান দিক থেকে স্লাইড করে আসে, পেজ reload হয় না।
   ══════════════════════════════════════════════════════════════ */
.lb-drawer {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: var(--bg);
    /* নিচ থেকে উপরে উঠে আসে */
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px);
}
.lb-drawer.open { transform: translateY(0); }

/* তালিকা বাকি জায়গা নেয় — খালি হলেও পাতা পুরো থাকে */
#lbListMarket { flex: 1 1 auto; overflow-y: auto; min-height: 0; }


/* ══════════════════════════════════════════════════════════════
   [LB HERO] Top 30 এর উপরের অংশ — শান্ত highlight, লোগো ছাড়া
   ══════════════════════════════════════════════════════════════ */
.lb-hero {
    position: relative;
    padding: calc(var(--sp-5) + 6px) var(--sp-4) var(--sp-5);
    text-align: center;
    /* সবুজ আভা উপরে থেকে মিলিয়ে যায় — শান্ত ও প্রিমিয়াম */
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(0,204,85,0.16) 0%, rgba(0,204,85,0) 70%),
        linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%);
    border-bottom: 1px solid var(--border);
}
.lb-hero-title {
    font-size: clamp(19px, 5.6vw, 26px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    line-height: 1.15;
}
.lb-hero-sub {
    margin-top: 6px;
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #00cc55;
}
/* সূক্ষ্ম সবুজ রেখা — শিরোনামের নিচে */
.lb-hero::after {
    content: '';
    position: absolute; left: 50%; bottom: -1px;
    width: 54px; height: 2px; transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(0,204,85,0), #00cc55, rgba(0,204,85,0));
}
.lb-close {
    position: absolute; top: var(--sp-3); right: var(--sp-3);
    width: clamp(30px, 8vw, 38px); height: clamp(30px, 8vw, 38px);
    border: none; border-radius: 50%;
    background: rgba(255,255,255,0.06); color: var(--text-muted);
    font-size: var(--fs-md); cursor: pointer; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.lb-close:active { background: rgba(255,255,255,0.12); color: var(--text); }

/* note — hero এর ঠিক নিচে, ছোট ও শান্ত */
.lb-drawer .lb-note {
    text-align: center;
    padding: var(--sp-3) var(--sp-4) var(--sp-2);
}

/* light theme — আভা হালকা রাখি */
body[data-theme="light"] .lb-hero {
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(0,180,75,0.12) 0%, rgba(0,180,75,0) 70%),
        linear-gradient(180deg, rgba(15,23,42,0.03) 0%, rgba(15,23,42,0) 100%);
}
body[data-theme="light"] .lb-close { background: rgba(15,23,42,0.06); }


/* ══════════════════════════════════════════════════════════════
   [LB ME] নিজের ২৪ ঘণ্টার হিসাব + অবস্থান — তালিকার ঠিক উপরে
   ══════════════════════════════════════════════════════════════ */
/* card এর ভেতরে — নিজের নিজস্ব border/radius নেই, শুধু আলাদা আভা ও
   নিচে বিভাজক রেখা যাতে তালিকা থেকে আলাদা বোঝা যায় */
.lb-me-box {
    padding: var(--sp-4);
    background: rgba(0, 204, 85, 0.07);
    border-bottom: 1px solid var(--border);
}
.lb-me {
    display: flex; align-items: center; gap: var(--sp-3);
}
/* নিজের সারির নিচে সূক্ষ্ম রেখা */
.lb-me-sep {
    height: 1px; margin: var(--sp-3) 0;
    background: rgba(0, 204, 85, 0.20);
}
.lb-me-pos {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-xs); color: var(--text-muted);
}
.lb-me-dots {
    flex: 1; border-bottom: 1px dashed rgba(255,255,255,0.16);
}
.lb-me-rank {
    font-size: var(--fs-sm); font-weight: 700; color: #00cc55;
    font-variant-numeric: tabular-nums;
}
body[data-theme="light"] .lb-me-dots { border-bottom-color: rgba(15,23,42,0.18); }
.lb-me-flag {
    flex-shrink: 0;
    width: clamp(19px, 5.2vw, 24px);
    height: clamp(19px, 5.2vw, 24px);
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.lb-me-name {
    flex: 1; min-width: 0;
    font-size: var(--fs-sm); font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-me-profit {
    font-size: var(--fs-sm); font-weight: 700; flex-shrink: 0;
    font-variant-numeric: tabular-nums; color: var(--text-muted);
}
.lb-me-profit.up   { color: #00cc55;       background: none; }
.lb-me-profit.down { color: var(--danger); background: none; }

body[data-theme="light"] .lb-me-box {
    background: rgba(0, 180, 75, 0.08);
}


/* [LB HERO — page] dashboard পাতায় hero নিচের card এর সাথে মাপে মেলে:
   একই প্রস্থ, একই radius, একই border। drawer এ (chart পেজে) আগের মতোই
   পুরো প্রস্থ জুড়ে থাকে। */
.lb-hero-card {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    margin-bottom: var(--sp-4);
    padding: var(--sp-5) var(--sp-4);
    overflow: hidden;
}
/* card রূপে থাকলে নিচের সবুজ রেখাটা ভেতরে টেনে আনি */
.lb-hero-card::after { bottom: 0; }


/* ══════════════════════════════════════════════════════════════
   [FLAG] SVG পতাকা — গোল বৃত্তে, পুরো পতাকা দেখা যায়, ফাঁক থাকে না।
   object-fit: cover মানে ছবি বৃত্ত ভরে নেয় আর অনুপাত ঠিক থাকে —
   পতাকার দুই পাশ সামান্য কাটে, কিন্তু নকশা স্পষ্ট বোঝা যায়।
   ══════════════════════════════════════════════════════════════ */
.flag-img {
    /* [FIX] img নিজের SVG viewBox অনুযায়ী স্বাভাবিক আকার নিয়ে নিচ্ছিল
       (width:100% যথেষ্ট জোরালো হয়নি), তাই পতাকা বিশাল বড় দেখাচ্ছিল।
       এখন নির্দিষ্ট px মাপে সরাসরি বাঁধা — parent (.lb-flag) এর মাপের
       সাথেই মিলিয়ে রাখা হয়েছে। */
    width: clamp(19px, 5.2vw, 24px) !important;
    height: clamp(19px, 5.2vw, 24px) !important;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
/* ছবি না এলে emoji — তখন বৃত্ত ভরাতে একটু বড় করি */
.flag-fb {
    font-size: clamp(26px, 7.2vw, 33px);
    line-height: 1;
}