/* ===== TradeX Pro AI - Professional Trading App CSS ===== */
:root {
    --bg: #0B0E14;
    --bg-elevated: #0F1319;
    --card: #141B26;
    --card-hover: #1A2332;
    --primary: #3B82F6;
    --primary-dark: #2563EB;
    --primary-glow: rgba(59,130,246,0.25);
    --secondary: #06B6D4;
    --accent: #8B5CF6;
    --success: #10B981;
    --danger: #EF4444;
    --warning: #F59E0B;
    --orange: #F97316;
    --text: #F1F5F9;
    --text2: #94A3B8;
    --text3: #64748B;
    --border: rgba(255,255,255,0.08);
    --border-light: rgba(255,255,255,0.04);
    --radius: 14px;
    --radius-lg: 20px;
    --nav-h: 72px;
    --gradient-primary: linear-gradient(135deg, #3B82F6 0%, #06B6D4 100%);
    --gradient-card: linear-gradient(145deg, rgba(59,130,246,0.12) 0%, rgba(6,182,212,0.06) 100%);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.3);
    --shadow-nav: 0 -4px 30px rgba(0,0,0,0.4);
}

/* ===== Animations ===== */
@keyframes bounce { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: translateY(0) } }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes pulse-dot { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }
@keyframes winPulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.03); box-shadow: 0 0 20px rgba(0,200,83,0.3) } }

/* ===== Auth Screens (FIXED FOR CENTERED PROFESSIONAL UI & NO SCROLL) ===== */
.auth-container {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers the form */
    height: 100vh;           /* Forces exactly screen height */
    max-height: 100vh;
    overflow: hidden;        /* Disables unwanted scrolling */
    box-sizing: border-box;  /* Ensures padding doesn't add to height */
    max-width: 420px;        /* Prevents stretching on desktop */
    margin: 0 auto;          /* Horizontally centers the form */
    position: relative;      /* Essential for absolute back button */
}

/* Auth Screens Back Button - Fixed at Top Left */
.auth-container .back-btn {
    position: absolute;
    top: 24px;
    left: 20px;
    margin: 0;
    padding: 10px;
    z-index: 50;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.auth-container .back-btn:active {
    transform: scale(0.9);
    background: rgba(255,255,255,0.1);
}

.auth-logo { font-size: 60px; text-align: center; margin-bottom: 10px; animation: bounce 2s infinite; }
.auth-title { font-size: 28px; font-weight: 800; text-align: center; margin-bottom: 4px; }
.auth-subtitle { color: var(--text2); text-align: center; font-size: 14px; margin-bottom: 28px; }

/* Base Back button for other normal pages */
.back-btn { background: none; border: none; color: white; font-size: 18px; cursor: pointer; padding: 8px; align-self: flex-start; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.input-group { display: flex; flex-direction: column; gap: 6px; }
.input-group label { font-size: 13px; color: var(--text2); font-weight: 500; }
.input-box { display: flex; align-items: center; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 14px; padding: 0 14px; transition: all 0.3s; }
.input-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,92,231,0.1); }
.input-box i { color: var(--primary); font-size: 15px; width: 20px; text-align: center; }
.input-box input { flex: 1; background: none; border: none; color: white; padding: 15px 10px; font-size: 15px; outline: none; }
.input-box input::placeholder { color: rgba(255,255,255,0.25); }
.toggle-icon { cursor: pointer; color: #555!important; font-size: 13px!important; width: auto!important; }

.forgot-link { color: var(--primary); text-align: right; font-size: 13px; text-decoration: none; cursor: pointer; }
.terms-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); }
.terms-row a { color: var(--primary); }

.auth-bottom { text-align: center; margin-top: 24px; color: var(--text2); font-size: 13px; }
.auth-bottom a { color: var(--primary); font-weight: 600; text-decoration: none; cursor: pointer; }

/* ===== Buttons ===== */
.btn { padding: 14px 24px; border: none; border-radius: 14px; font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; }
.btn:active { transform: scale(0.97); }
.btn-gradient { background: var(--gradient-primary); color: white; width: 100%; box-shadow: 0 4px 16px var(--primary-glow); }
.btn-outline { background: transparent; border: 1.5px solid var(--primary); color: var(--primary); }
.btn-full { width: 100%; }
.btn-link { background: none; border: none; color: var(--primary); font-size: 13px; cursor: pointer; margin-top: 8px; }
.btn-spin { display: none; }

/* ===== Logout Button Full ===== */
.logout-btn-full { background: linear-gradient(135deg,#FF1744,#FF5252)!important; color: white!important; width: 100%; padding: 16px; border: none; border-radius: 14px; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; box-shadow: 0 4px 15px rgba(255, 23, 68, 0.25); transition: all 0.2s; }
.logout-btn-full:active { transform: scale(0.97); box-shadow: none; }

/* ===== Email Verification ===== */
.verify-box {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    text-align: center;
    height: 100vh;           /* Forces exactly screen height */
    max-height: 100vh;
    overflow: hidden;        /* Disables scrolling */
    box-sizing: border-box;  /* Includes padding in height calculation */
    max-width: 420px;
    margin: 0 auto;
}
.verify-icon { font-size: 80px; }
.verify-box h2 { font-size: 24px; font-weight: 700; }
.verify-box p { color: var(--text2); font-size: 14px; }
.verify-info { background: rgba(255,152,0,0.08); border: 1px solid rgba(255,152,0,0.2); border-radius: 14px; padding: 16px; text-align: left; width: 100%; }
.verify-info h4 { font-size: 13px; color: var(--orange); margin-bottom: 8px; }
.verify-info ul { list-style: none; font-size: 12px; color: var(--text2); }
.verify-info ul li { padding: 5px 0; }

/* ===== Dashboard ===== */
.dashboard-head{display:flex;justify-content:space-between;align-items:flex-start;padding:16px 16px 0}
.dashboard-head h2{font-size:22px;font-weight:700}
.dashboard-head p{color:var(--text2);font-size:13px}
.dash-head-actions{display:flex;gap:8px}
.icon-btn{background:var(--card);border:1px solid var(--border);color:var(--text);width:40px;height:40px;border-radius:12px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.icon-btn:active{background:var(--card-hover)}

.balance-card{background:var(--gradient-primary);border-radius:var(--radius-lg);padding:22px;margin:16px;box-shadow:0 8px 32px var(--primary-glow);position:relative;overflow:hidden}
.balance-card::before{content:'';position:absolute;top:-50%;right:-30%;width:200px;height:200px;background:rgba(255,255,255,0.06);border-radius:50%}
.bal-label{font-size:12px;opacity:0.85}
.bal-amount{font-size:34px;font-weight:800;margin:8px 0}
.bal-row{display:flex;gap:8px;flex-wrap:wrap}
.tag{padding:6px 14px;border-radius:20px;font-size:11px;font-weight:600}
.tag-success{background:rgba(0,200,83,0.2);color:var(--success)}
.tag-info{background:rgba(0,210,255,0.2);color:var(--secondary)}

.quick-stats{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;padding:0 16px;margin-bottom:16px}
.q-stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 8px;text-align:center;cursor:pointer;transition:all 0.2s}
.q-stat:active{transform:scale(0.95);background:var(--card-hover);border-color:rgba(59,130,246,0.3)}
.q-val{display:block;font-size:18px;font-weight:700;margin-top:6px}
.q-lbl{display:block;font-size:10px;color:var(--text2);margin-top:2px}

.section-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin:0 16px 16px;box-shadow:var(--shadow-sm)}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.section-head h3{font-size:15px;font-weight:600}

.activity-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.activity-item:last-child{border-bottom:none}
.act-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px}
.act-info{flex:1}
.act-title{font-size:13px;font-weight:500}
.act-time{font-size:11px;color:var(--text2)}
.act-amount{font-size:14px;font-weight:600}
.act-info,.ht-info{min-width:0}
.act-title,.ht-chart{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act-time,.ht-detail{word-break:break-word}

/* ===== Page Head ===== */
.page-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.page-head h2{font-size:20px;font-weight:700}

/* ===== Wallet ===== */
.wallet-balance{background:var(--gradient-card);border:1px solid rgba(59,130,246,0.2);border-radius:var(--radius-lg);padding:28px 24px;text-align:center;margin:16px;box-shadow:var(--shadow-md)}
.wallet-balance p{color:var(--text2);font-size:12px;text-transform:uppercase;letter-spacing:1px;font-weight:600}
.wallet-balance h1{font-size:36px;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-top:10px}
.wallet-actions{display:flex;gap:12px;padding:0 16px;margin-bottom:16px}
.wallet-actions .btn{flex:1}

/* ===== Refer ===== */
.refer-banner{background:var(--gradient-card);border-radius:var(--radius-lg);padding:28px 24px;text-align:center;margin:16px;border:1px solid rgba(59,130,246,0.25);box-shadow:var(--shadow-sm)}
.refer-icon{font-size:44px;margin-bottom:10px;color:var(--secondary)}
.refer-banner h3{font-size:20px;margin-bottom:4px}
.refer-banner p{color:var(--text2);font-size:13px}

.refer-code-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin:0 16px}
.refer-code-card p{font-size:13px;color:var(--text2);margin-bottom:6px}
.code-box{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.04);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.code-box span{font-size:15px;font-weight:600;letter-spacing:1px}
.code-box button{background:var(--primary);color:white;border:none;padding:8px 14px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap}
.refer-link-text{color:var(--text2);font-size:12px;margin-top:4px}

.share-btn{background:var(--gradient-primary);color:white;border:none;padding:14px 24px;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%;justify-content:center;margin-top:10px;box-shadow:0 4px 16px var(--primary-glow)}

/* ===== Referral Items ===== */
.ref-item{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid var(--border);background:var(--card);margin-bottom:4px;border-radius:10px}
.ref-info span{display:block;font-size:13px;font-weight:600}
.ref-info small{color:var(--text2);font-size:11px}
.ref-status{font-size:10px;padding:4px 8px;border-radius:6px;font-weight:600}
.ref-status.pending{background:rgba(255,152,0,0.2);color:#FF9800}
.ref-status.completed{background:rgba(0,200,83,0.2);color:#00C853}

/* ===== Filter Tabs ===== */
.filter-tabs{display:flex;gap:8px;padding:12px 16px;overflow-x:auto}
.f-tab{background:var(--card);border:1px solid var(--border);color:var(--text2);padding:8px 16px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all 0.2s}
.f-tab.active{background:var(--gradient-primary);color:white;border-color:transparent;box-shadow:0 2px 10px var(--primary-glow)}

/* ===== Profile Section - Premium Redesign ===== */
.profile-header {
    text-align: center;
    padding: 32px 20px 24px;
    background: linear-gradient(180deg, rgba(30,41,59,0.4) 0%, transparent 100%);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 24px;
}
.profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    overflow: hidden;
    background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient-primary) border-box;
    border: 3px solid transparent;
    box-shadow: 0 8px 24px var(--primary-glow);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.profile-avatar i { color: var(--primary); font-size: 40px; }
.profile-header h3 { font-size: 22px; font-weight: 700; color: white; letter-spacing: 0.5px; }
.profile-header p { color: var(--text2); font-size: 14px; margin-top: 4px; }

.profile-id-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    background: rgba(0,0,0,0.25);
    padding: 6px 6px 6px 16px;
    border-radius: 30px;
    border: 1px solid var(--border);
}
.profile-id-text {
    font-size: 13px;
    color: var(--text);
    font-weight: 600;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}
.profile-id-copy {
    background: var(--primary);
    color: white;
    cursor: pointer;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 20px;
    border: none;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(59,130,246,0.4);
}
.profile-id-copy:active { transform: scale(0.92); box-shadow: none; }

.profile-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 20px;
    margin-bottom: 24px;
}
.p-menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    color: white;
    padding: 16px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    width: 100%;
    text-align: left;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.p-menu-item:active {
    transform: scale(0.98);
    background: var(--card-hover);
    border-color: rgba(255,255,255,0.15);
}
.p-menu-item i:first-child {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59,130,246,0.1);
    color: var(--primary);
    border-radius: 10px;
    font-size: 18px;
}
.p-menu-item i:last-child {
    margin-left: auto;
    color: var(--text3);
    font-size: 14px;
}

/* ===== Content Pages (Terms, Privacy, Help) ===== */
.content-page {
    padding: 24px 20px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.7;
}
.content-page h3 {
    font-size: 18px;
    color: white;
    margin: 28px 0 12px;
    font-weight: 600;
    border-left: 3px solid var(--primary);
    padding-left: 12px;
}
.content-page h3:first-child { margin-top: 0; }
.content-page p { color: var(--text2); margin-bottom: 16px; }
.content-page ul { color: var(--text2); padding-left: 20px; margin-bottom: 16px; }
.content-page ul li { margin-bottom: 8px; }

/* Help Cards */
.help-card {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.help-card h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-size: 16px;
    margin-bottom: 12px;
}
.help-card h4 i { color: var(--primary); font-size: 20px; }
.help-card p { margin-bottom: 10px; font-size: 13.5px; }
.help-card p:last-child { margin-bottom: 0; }
.help-card strong { color: var(--text); font-weight: 600; }

/* ===== Trading Stats Grid ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 20px;
}
.stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 20px 16px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--gradient-primary);
    opacity: 0.3;
    transition: all 0.3s;
}
.stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.15);
}
.stat-card:hover::before { opacity: 1; }
.stat-label {
    font-size: 12px;
    color: var(--text2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stat-card strong {
    font-size: 24px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
}

/* ===== Empty State ===== */
.empty-state{text-align:center;padding:40px 20px;color:var(--text2)}
.empty-state i{font-size:40px;opacity:0.3;margin-bottom:12px}
.empty-state p{font-size:13px}

/* ===== Bottom Navigation - Premium Redesign ===== */
.bottom-nav {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    background: rgba(15, 19, 25, 0.85); /* Darker transparent bg for glass effect */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 76px; /* Slightly taller for breathing room */
    padding: 0 8px;
    z-index: 999;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.b-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--text3);
    cursor: pointer;
    padding: 8px;
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 60px;
    position: relative;
}
.b-nav-item i {
    font-size: 20px;
    transition: all 0.3s ease;
}
.b-nav-item span {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    opacity: 0.7;
    transition: all 0.3s ease;
}
.b-nav-item:hover {
    color: var(--text2);
}
.b-nav-item.active {
    color: var(--primary);
}
.b-nav-item.active i {
    transform: translateY(-4px); /* Slides up slightly when active */
    text-shadow: 0 4px 12px var(--primary-glow);
}
.b-nav-item.active span {
    opacity: 1;
    transform: translateY(-2px);
}
.b-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 0px;
    width: 18px;
    height: 3px;
    background: var(--primary);
    border-radius: 4px;
    box-shadow: 0 -2px 8px var(--primary-glow); /* Glowing active indicator */
}

/* Center Button (Trade) - Floating Design */
.b-nav-item.center {
    position: relative;
    margin-top: -32px; /* Pops out significantly */
}
.b-nav-item.center .nav-center-btn {
    width: 62px;
    height: 62px;
    border-radius: 20px; /* Squircle shape */
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    border: 3px solid #0B0E14; /* Separates the button visually from the nav bar */
}
.b-nav-item.center .nav-center-btn i {
    font-size: 24px;
    color: white;
}
.b-nav-item.center.active .nav-center-btn {
    transform: translateY(-4px) scale(1.05); /* Extra pop on active */
    box-shadow: 0 12px 28px rgba(59, 130, 246, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.2);
}
.b-nav-item.center span {
    margin-top: 10px;
}
.b-nav-item.center.active::after {
    display: none; /* Disables the bottom line for the center button */
}

/* ===== Toast ===== */
.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);padding:12px 22px;border-radius:12px;color:white;font-size:13px;z-index:9999;opacity:0;transition:opacity 0.3s;pointer-events:none;max-width:90%;text-align:center;font-weight:500}
.toast.show{opacity:1}
.toast.success{background:var(--success)}
.toast.error{background:var(--danger)}
.toast.warning{background:var(--orange)}
.toast.info{background:var(--primary)}

/* ===== Scrollbar ===== */
::-webkit-scrollbar{width:0}

/* ===== RESPONSIVE CHARTS GRID ===== */
.charts-responsive-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:500px){.charts-responsive-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){.charts-responsive-grid{grid-template-columns:repeat(5,1fr)}}

.chart-mini-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 10px;cursor:pointer;transition:all 0.2s;text-align:center}
.chart-mini-card:active{transform:scale(0.95);border-color:var(--primary);background:var(--card-hover)}
.cmc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.cmc-symbol{font-size:14px;font-weight:800;color:white}
.cmc-change{font-size:11px;font-weight:600}
.cmc-change.up{color:var(--success)}
.cmc-change.down{color:var(--danger)}
.cmc-price{font-size:18px;font-weight:800;color:var(--text);margin-bottom:4px}
.cmc-name{font-size:10px;color:var(--text2);margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmc-bar{height:3px;background:var(--border-light);border-radius:2px;overflow:hidden;margin-bottom:4px}
.cmc-bar-fill{height:100%;border-radius:2px}
.cmc-vol{font-size:9px;color:var(--text3)}

/* ===== Live Badge ===== */
.live-badge{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--success);font-weight:700;letter-spacing:1px;background:rgba(16,185,129,0.1);padding:5px 10px;border-radius:12px}
.live-dot{width:6px;height:6px;background:var(--success);border-radius:50%;animation:pulse-dot 1.5s infinite}
.live-badge-sm{display:inline-flex;align-items:center;gap:4px;font-size:9px;color:var(--success);font-weight:600;background:rgba(16,185,129,0.1);padding:3px 8px;border-radius:10px}

/* ===== TRADING SCREEN ===== */
.trade-header{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.trade-header-info{flex:1}
.trade-header-info h2{font-size:16px;font-weight:700}

.trade-chart-wrapper{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin:8px 12px;overflow:hidden}
.trade-price-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border-light)}
.tp-price{font-size:26px;font-weight:800}
.tp-change{font-size:12px;font-weight:600;margin-left:8px}
.tp-change.up{color:var(--success)}
.tp-change.down{color:var(--danger)}
.tp-label{font-size:10px;color:var(--text2);background:var(--border-light);padding:4px 8px;border-radius:4px}
.chart-frame{width:100%;height:220px;position:relative;background:var(--bg);padding:4px}
.chart-frame canvas{width:100%;height:100%;display:block}
.trade-timer-bar{display:flex;align-items:center;height:24px;position:relative}
.timer-fill{height:100%;background:var(--gradient-primary);transition:width 1s linear;width:100%}
.timer-fill.warning{background:linear-gradient(90deg,#FF9800,#FF5722)}
.timer-fill.danger{background:linear-gradient(90deg,#FF1744,#D50000)}
.timer-text{position:absolute;right:10px;font-size:12px;font-weight:700;color:white}

/* ===== LIVE TRADE STATUS ===== */
.live-trade-status{padding:0 12px;margin-bottom:10px;animation:slideUp 0.3s ease}
.live-trade-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;transition:all 0.3s}
.live-trade-card.profit{border-color:rgba(0,200,83,0.3);box-shadow:0 0 15px rgba(0,200,83,0.1)}
.live-trade-card.loss{border-color:rgba(255,23,68,0.3);box-shadow:0 0 15px rgba(255,23,68,0.1)}
.ltc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.ltc-direction{font-size:14px;font-weight:800;padding:5px 12px;border-radius:8px;letter-spacing:1px}
.ltc-direction.call{background:rgba(0,200,83,0.15);color:#00C853}
.ltc-direction.put{background:rgba(255,23,68,0.15);color:#FF1744}
.ltc-timer{font-size:16px;font-weight:700;color:var(--primary)}
.ltc-body{display:flex;flex-direction:column;gap:6px}
.ltc-row{display:flex;justify-content:space-between;align-items:center}
.ltc-label{font-size:11px;color:var(--text2)}
.ltc-value{font-size:12px;font-weight:600}
.text-success{color:#00C853}
.text-danger{color:#FF1744}
.ltc-status{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:1px}
.ltc-status.winning{color:#00C853}
.ltc-status.losing{color:#FF1744}
.status-dot-anim{width:6px;height:6px;border-radius:50%;animation:pulse-dot 1s infinite}
.ltc-status.winning .status-dot-anim{background:#00C853;box-shadow:0 0 8px rgba(0,200,83,0.5)}
.ltc-status.losing .status-dot-anim{background:#FF1744;box-shadow:0 0 8px rgba(255,23,68,0.5)}

/* ===== TRADE PANEL ===== */
.trade-panel{padding:0 12px}
.trade-selectors{display:flex;gap:10px;margin:10px 0 8px}
.selector-group{flex:1}
.selector-group label{display:block;font-size:10px;color:#ADB5BD;margin-bottom:4px;font-weight:500}
.selector-btns{display:flex;gap:3px;background:rgba(255,255,255,0.03);border-radius:8px;padding:2px}
.sel-btn{flex:1;padding:7px 4px;border:none;background:transparent;color:#ADB5BD;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer}
.sel-btn.active{background:var(--primary);color:white}
.amount-input-group{display:flex;align-items:center;background:rgba(255,255,255,0.03);border-radius:8px;overflow:hidden}
.amt-btn{width:30px;height:30px;border:none;background:rgba(255,255,255,0.05);color:white;font-size:16px;font-weight:700;cursor:pointer}
.amt-input{flex:1;background:transparent;border:none;color:white;text-align:center;font-size:14px;font-weight:600;width:50px;outline:none;-moz-appearance:textfield}
.amt-input::-webkit-outer-spin-button,.amt-input::-webkit-inner-spin-button{-webkit-appearance:none}
.quick-amounts{display:flex;gap:5px;margin-bottom:10px}
.qa-btn{flex:1;padding:7px 4px;border:1px solid rgba(255,255,255,0.08);background:transparent;color:#ADB5BD;border-radius:6px;font-size:10px;font-weight:600;cursor:pointer}
.qa-btn.active{background:rgba(59,130,246,0.15);border-color:var(--primary);color:var(--primary)}

/* CALL / PUT Buttons */
.trade-buttons{display:flex;gap:6px;align-items:stretch;margin-bottom:12px}
.trade-btn-call,.trade-btn-put{flex:1;border:none;border-radius:14px;cursor:pointer;padding:16px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all 0.2s}
.trade-btn-call:active,.trade-btn-put:active{transform:scale(0.95)}
.trade-btn-call{background:linear-gradient(135deg,#10B981,#34D399);box-shadow:0 4px 12px rgba(16,185,129,0.3)}
.trade-btn-put{background:linear-gradient(135deg,#EF4444,#F87171);box-shadow:0 4px 12px rgba(239,68,68,0.3)}
.tb-direction{font-size:18px;font-weight:800;color:white;letter-spacing:3px}
.tb-profit{font-size:11px;color:rgba(255,255,255,0.75);font-weight:600}
.trade-divider{display:flex;align-items:center;justify-content:center;min-width:24px}
.trade-divider span{font-size:9px;font-weight:700;color:#555;background:rgba(255,255,255,0.04);padding:4px 7px;border-radius:10px}

/* Trade Result */
.trade-result{padding:0 12px;margin-bottom:12px;animation:slideUp 0.3s ease}
.result-content{padding:20px;border-radius:14px;text-align:center}
.result-content.win{background:rgba(0,200,83,0.08);border:1px solid rgba(0,200,83,0.25)}
.result-content.lose{background:rgba(255,23,68,0.08);border:1px solid rgba(255,23,68,0.25)}
.result-content .result-amount{font-size:28px;font-weight:800;margin:6px 0}
.result-content .result-msg{font-size:13px;color:#ADB5BD}

/* Trade History Items */
.trade-history-item{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.03)}
.trade-history-item:last-child{border-bottom:none}
.th-direction{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0}
.th-direction.call{background:rgba(0,200,83,0.12);color:#00C853}
.th-direction.put{background:rgba(255,23,68,0.12);color:#FF1744}
.th-info{flex:1;min-width:0}
.th-info .th-chart{font-size:12px;font-weight:600}
.th-info .th-time{font-size:10px;color:#ADB5BD}
.th-amount{text-align:right;flex-shrink:0}
.th-amount .th-profit{font-size:13px;font-weight:700}
.th-amount .th-amount-val{font-size:10px;color:#ADB5BD}

/* ===== HISTORY SCREEN ===== */
.history-trade-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-light);background:var(--card);transition:background 0.2s}
.history-trade-item:last-child{border-bottom:none}
.ht-direction{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.ht-direction i{font-size:12px}
.ht-info{flex:1}
.ht-info .ht-chart{font-size:14px;font-weight:600}
.ht-info .ht-detail{font-size:11px;color:#ADB5BD}
.ht-result{text-align:right}
.ht-result .ht-profit{font-size:15px;font-weight:700}
.ht-result .ht-amount{font-size:11px;color:#ADB5BD}

@media(max-width:600px){
    .quick-stats{grid-template-columns:repeat(2,1fr)}
    .wallet-actions{flex-direction:column}
    .history-trade-item{padding:12px}
    .ht-direction{width:30px;height:30px}
    .ht-direction i{font-size:11px}
    .ht-info .ht-chart{font-size:12px}
    .ht-info .ht-detail{font-size:10px}
    .ht-result .ht-profit{font-size:13px}
    .page-head h2{font-size:18px}
    .dashboard-head h2{font-size:20px}
}

/* ===== DEPOSIT SCREEN ===== */
.deposit-container{padding:16px}
.deposit-network-badge{background:rgba(255,214,0,0.1);border:1px solid rgba(255,214,0,0.3);color:#FFD600;padding:8px 16px;border-radius:8px;text-align:center;font-weight:700;font-size:14px;margin-bottom:8px}
.deposit-address-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;text-align:center;margin-bottom:16px}
.deposit-qr{width:120px;height:120px;margin:0 auto 12px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.deposit-qr img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.deposit-addr{font-size:11px;word-break:break-all;color:var(--text2);background:rgba(255,255,255,0.04);padding:10px;border-radius:8px;margin-bottom:12px;font-family:monospace}
.deposit-warning{background:rgba(255,152,0,0.1);border:1px solid rgba(255,152,0,0.3);border-radius:10px;padding:12px;display:flex;gap:8px;align-items:center;color:var(--orange);font-size:12px;margin-bottom:16px}
.deposit-verify{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}
.deposit-verify h4{font-size:15px;margin-bottom:4px}
.deposit-verify p{color:var(--text2);font-size:12px;margin-bottom:12px}
.deposit-input{width:100%;padding:14px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:12px;color:white;font-size:14px;outline:none;margin-bottom:12px}
.deposit-input:focus{border-color:var(--primary)}

/* ===== WITHDRAWAL SCREEN ===== */
.withdraw-container{padding:16px}
.withdraw-balance{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;text-align:center;margin-bottom:16px}
.withdraw-balance p{color:var(--text2);font-size:13px}
.withdraw-balance h2{font-size:28px;font-weight:800;color:var(--primary);margin-top:4px}
.withdraw-conditions{background:rgba(255,152,0,0.08);border:1px solid rgba(255,152,0,0.2);border-radius:12px;padding:14px;margin-bottom:16px}
.withdraw-conditions h4{font-size:13px;color:var(--orange);margin-bottom:8px}
.withdraw-conditions ul{font-size:11px;color:var(--text2);padding-left:16px}
.withdraw-conditions li{padding:3px 0}

/* ===== CONTENT PAGES ===== */
.content-page{padding:16px 20px}
.content-page h3{font-size:17px;font-weight:700;margin:20px 0 8px;color:var(--primary)}
.content-page p{color:var(--text2);font-size:13px;line-height:1.7;margin-bottom:8px}
.content-page ul{color:var(--text2);font-size:13px;padding-left:20px}
.content-page li{padding:4px 0}

/* ===== HELP CARDS ===== */
.help-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:12px}
.help-card h4{font-size:15px;margin-bottom:6px;color:var(--primary)}
.help-card p{color:var(--text2);font-size:13px;line-height:1.6}

/* ===== PROFESSIONAL ROULETTE MACHINE ===== */
.roulette-tickets-bar{display:flex;justify-content:center;align-items:center;padding:12px 16px;background:linear-gradient(135deg,rgba(108,92,231,0.15),rgba(0,210,255,0.05));margin:8px 16px;border-radius:14px;border:1px solid rgba(108,92,231,0.2)}
.ticket-info{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700}
.ticket-info i{color:#FFD600;font-size:22px}

.roulette-machine{margin:12px 16px;background:linear-gradient(180deg,#1a1a2e 0%,#0a0a1a 50%,#1a1a2e 100%);border:2px solid rgba(108,92,231,0.3);border-radius:24px;overflow:hidden;box-shadow:0 0 40px rgba(108,92,231,0.15),inset 0 0 60px rgba(0,0,0,0.3)}
.roulette-top-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:rgba(0,0,0,0.4);border-bottom:1px solid rgba(108,92,231,0.2)}
.roulette-title{font-size:13px;font-weight:800;letter-spacing:3px;color:#FFD600;text-shadow:0 0 10px rgba(255,214,0,0.3)}
.roulette-light{width:10px;height:10px;border-radius:50%;background:#FFD600;box-shadow:0 0 10px #FFD600,0 0 20px #FFD600;animation:pulse-dot 1.5s infinite}
.roulette-light.small{width:6px;height:6px}
.roulette-light.left{animation-delay:0s}
.roulette-light.right{animation-delay:0.75s}

.roulette-screen-frame{position:relative;padding:8px;background:rgba(0,0,0,0.5)}
.roulette-row{display:flex;gap:4px;margin-bottom:4px}
.roulette-row.top-row,.roulette-row.bottom-row{opacity:0.3;filter:blur(1px)}
.roulette-row.middle-row{display:flex;gap:6px;padding:8px;background:rgba(108,92,231,0.1);border:2px solid rgba(108,92,231,0.4);border-radius:12px;position:relative;transition:box-shadow 0.3s}
.roulette-column{flex:1;display:flex;flex-direction:column;gap:4px;background:rgba(0,0,0,0.3);border-radius:8px;padding:4px;overflow:hidden;min-height:170px;justify-content:center}

.slot-cell{height:55px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.03);border-radius:8px;margin:2px 0;transition:all 0.1s}
.slot-cell span{font-size:32px;transition:all 0.1s}
.slot-cell.win-cell{background:rgba(0,200,83,0.2);animation:winPulse 0.3s ease 3}

.win-line-indicator{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px;background:rgba(255,214,0,0.1);border-top:1px dashed rgba(255,214,0,0.3);border-bottom:1px dashed rgba(255,214,0,0.3);margin:4px 0}
.win-line-arrow{color:#FFD600;font-size:14px}
.win-line-text{font-size:10px;font-weight:700;letter-spacing:2px;color:#FFD600}

.roulette-bottom-bar{display:flex;justify-content:center;gap:20px;padding:10px;background:rgba(0,0,0,0.4);border-top:1px solid rgba(108,92,231,0.2)}

.roulette-spin-btn{display:block;margin:12px auto;padding:16px 50px;background:linear-gradient(135deg,#FF6B6B,#FF8E53);color:white;border:none;border-radius:50px;font-size:18px;font-weight:700;cursor:pointer;letter-spacing:2px;box-shadow:0 6px 25px rgba(255,107,107,0.4);transition:all 0.2s}
.roulette-spin-btn:active{transform:scale(0.95)}
.roulette-spin-btn:disabled{opacity:0.5;cursor:not-allowed}

.roulette-result{padding:0 16px;margin-bottom:12px;animation:slideUp 0.3s ease}
.result-reward{padding:16px;border-radius:14px;text-align:center}
.result-reward.win{background:linear-gradient(135deg,rgba(0,200,83,0.1),rgba(0,210,255,0.05));border:1px solid rgba(0,200,83,0.4);animation:winPulse 0.4s ease 3}
.result-reward.lose{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1)}
.reward-emoji{font-size:40px;margin-bottom:6px}
.reward-amount{font-size:30px;font-weight:800;color:#00C853}
.reward-detail{font-size:12px;color:#ADB5BD;margin-top:4px}

.ticket-earn-option{display:flex;justify-content:space-between;align-items:center;padding:14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);border-radius:12px;margin-bottom:8px;cursor:pointer;transition:all 0.2s}
.ticket-earn-option:active{background:rgba(108,92,231,0.1);border-color:rgba(108,92,231,0.3)}
.ticket-earn-option div{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500}
.ticket-earn-option i{font-size:20px}

.prize-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.prize-item{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:rgba(255,255,255,0.03);border-radius:10px;font-size:13px}
.prize-item span:last-child{font-weight:700}

.spin-history-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.03);font-size:13px}
.spin-history-item .spin-symbols{font-size:20px;letter-spacing:4px}
.spin-history-item .spin-reward{font-weight:700;margin-left:auto;font-size:14px}
.spin-history-item .spin-time{font-size:10px;color:#ADB5BD}

/* ===== Transaction Cards (Wallet) ===== */
.tx-list{display:flex;flex-direction:column;gap:8px;padding:4px 0}
.tx-card{display:flex;align-items:center;gap:12px;padding:14px;background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:12px;transition:background 0.2s}
.tx-card:active{background:rgba(108,92,231,0.06)}
.tx-card-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.tx-card-body{flex:1;min-width:0}
.tx-card-top{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.tx-card-type{font-size:13px;font-weight:600}
.tx-card-date{font-size:11px;color:var(--text2)}
.tx-card-detail{font-size:10px;color:var(--text2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-card-amount{font-size:15px;font-weight:700;flex-shrink:0}
.tx-status{font-size:9px;padding:2px 6px;border-radius:4px;font-weight:700;text-transform:uppercase;margin-left:4px}
.tx-pending{background:rgba(255,152,0,0.15);color:#FF9800}
.tx-completed{background:rgba(0,200,83,0.15);color:#00C853}
.tx-rejected{background:rgba(255,23,68,0.15);color:#FF1744}

/* ===== History List ===== */
.history-list{padding:0}
.history-list .history-trade-item{border-radius:0}
.history-list:not(.empty-state){background:var(--card);margin:0 16px 16px;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.history-list.empty-state{margin:0 16px;background:transparent;border:none}

/* ===== Trading Stats Grid ===== */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center}
.stat-label{display:block;font-size:11px;color:var(--text2);margin-bottom:6px}
.stat-card strong{font-size:20px;font-weight:800}

/* ===== Refresh Spin ===== */
.icon-btn.spinning i{animation:spin 0.6s linear infinite}

/* ===== Extra Responsive ===== */
@media(max-width:380px){
    .auth-title{font-size:24px}
    .auth-logo{font-size:48px}
    .bal-amount{font-size:28px}
    .q-val{font-size:15px}
    .q-stat i{font-size:20px!important}
    .quick-amounts{flex-wrap:wrap}
    .qa-btn{min-width:calc(33% - 4px)}
    .cmc-price{font-size:15px}
    .trade-btn-call,.trade-btn-put{padding:12px 8px}
    .tb-direction{font-size:15px}
    .filter-tabs{padding:8px 12px;gap:6px}
    .f-tab{padding:6px 12px;font-size:11px}
    .tx-card{padding:10px}
    .tx-card-amount{font-size:13px}
}
@media(max-width:600px){
    .stats-grid{grid-template-columns:1fr 1fr}
    .wallet-balance h1{font-size:26px}
    .refer-banner h3{font-size:17px}
    .code-box{flex-direction:column;gap:8px;align-items:stretch}
    .code-box button{width:100%}
}
@media(min-width:768px){
    #app{max-width:480px;margin:0 auto;border-left:1px solid var(--border);border-right:1px solid var(--border)}
    .bottom-nav{max-width:456px;left:50%;transform:translateX(-50%);right:auto;width:calc(100% - 24px)}
    .toast{max-width:440px}
}