:root {
    /* DEFAULT LIGHT THEME VARIABLES (সাদা ব্যাকগ্রাউন্ড) */
    --primary: #4F46E5;      /* Slate Indigo */
    --secondary: #0EA5E9;    /* Sky Blue */
    --accent: #F59E0B;       /* Fintech Amber */
    --bg: #F8FAFC;           /* Clean Slate Light Background */
    --surface: #FFFFFF;      /* Pure White Card */
    --text: #0F172A;         /* Slate Black */
    --text-muted: #64748B;   /* Slate Gray */
    --border: #E2E8F0;       /* Fine Border Line */
    --danger: #EF4444;
    --success: #10B981;
    --header-gradient: linear-gradient(135deg, #3B82F6, #4F46E5);
    --nav-bg: rgba(255, 255, 255, 0.85);
    --nav-border: rgba(226, 232, 240, 0.8);
    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --btn-dark-bg: #0F172A;
    --btn-dark-text: #FFFFFF;
    --modal-bg: #FFFFFF;
    --modal-overlay: rgba(15, 23, 42, 0.25);
    --input-bg: #F8FAFC;
    
    /* Ad Slots backgrounds */
    --slot-1-bg: #FEF2F2;
    --slot-2-bg: #F0F9FF;
    --slot-3-bg: #ECFDF5;
    --slot-4-bg: #F5F3FF;
}

/* DARK THEME VARIABLE OVERRIDES */
body.dark-theme {
    --bg: #0B0F19;           /* Deep Midnight Black */
    --surface: #1E293B;      /* Dark Slate Card */
    --text: #F8FAFC;         /* Light Text */
    --text-muted: #94A3B8;   /* Light Slate Gray */
    --border: #334155;       /* Darker Slate Border */
    --header-gradient: linear-gradient(135deg, #1E1B4B, #312E81);
    --nav-bg: rgba(30, 41, 59, 0.85);
    --nav-border: rgba(51, 65, 85, 0.8);
    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    --btn-dark-bg: #F8FAFC;
    --btn-dark-text: #0F172A;
    --modal-bg: #1E293B;
    --modal-overlay: rgba(0, 0, 0, 0.6);
    --input-bg: #0F172A;
    
    --slot-1-bg: rgba(239, 68, 68, 0.12);
    --slot-2-bg: rgba(14, 165, 233, 0.12);
    --slot-3-bg: rgba(16, 185, 129, 0.12);
    --slot-4-bg: rgba(139, 92, 246, 0.12);
}

*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}
body{
    background: var(--bg);
    color: var(--text);
    padding-bottom: 100px;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
    transition: background 0.3s ease, color 0.3s ease;
}
#app{max-width:480px;margin:0 auto;min-height:100vh;position:relative;display:none; transition:filter .25s ease;}
#app.blurred{filter:blur(10px);}
.page-section { display: none; animation: fadeIn 0.3s ease; }
.page-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Minimalist Clean Loader */
.loader-overlay{position:fixed;inset:0;z-index:9999;display:flex;justify-content:center;align-items:center;flex-direction:column;background: var(--bg);overflow:hidden;}
.loader-card{position:relative;z-index:2;width:min(340px,90vw);border-radius:24px;padding:30px 20px;background: var(--surface);border:1px solid var(--border);box-shadow: var(--card-shadow);text-align:center;}
.loader-core{position:relative;width:80px;height:80px;margin:0 auto 20px;display:grid;place-items:center;}
.core-ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--bg);}
.core-spin{position:absolute;inset:-3px;border-radius:50%;border:3px solid transparent;border-top-color: var(--primary);border-right-color: var(--secondary);animation: spin 1s linear infinite;}
.core-logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg, var(--primary), var(--secondary));display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.25rem;}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.loader-title{color:var(--text);font-weight:800;letter-spacing:1px;font-size:1.1rem;margin-bottom:6px;}
.loader-sub{color:var(--text-muted);font-weight:500;font-size:.85rem;line-height:1.4;margin-bottom:12px;}
.loader-dots{display:flex;gap:6px;justify-content:center;align-items:center;}
.dot{width:7px;height:7px;border-radius:50%;background:#CBD5E1;animation:bounce 1.2s infinite;}
.dot:nth-child(2){animation-delay:.15s; background: var(--primary);}
.dot:nth-child(3){animation-delay:.3s; background: var(--secondary);}
@keyframes bounce{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-6px);opacity:1}}

/* Sleek Minimal Header & Balance */
.header{
    background: var(--header-gradient);
    padding: 35px 20px 75px;
    border-radius: 0 0 35px 35px;
    color: #fff;
    position: relative;
    box-shadow: 0 10px 25px rgba(79, 70, 229, 0.15);
}
.top-bar{display:flex;justify-content:space-between;align-items:center;}
.user-pill{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.15);padding:5px 14px 5px 5px;border-radius:50px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);}
.user-pill img{width:38px;height:38px;border-radius:50%;border:2px solid #fff;object-fit:cover;}
.user-info h3{font-size:.9rem;font-weight:700;line-height:1.1;}
.user-info p{font-size:.7rem;opacity:.85;}
.support-btn{background:rgba(255,255,255,0.2);color:#fff;width:38px;height:38px;border-radius:50%;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(5px);transition: 0.2s;}
.support-btn:active{transform: scale(0.92); background: rgba(255,255,255,0.35);}

/* Floating Flat Corporate Card */
.balance-card{
    background: var(--surface);
    width: 88%;
    margin: -50px auto 25px;
    padding: 24px;
    border-radius: 24px;
    box-shadow: var(--card-shadow);
    text-align: center;
    position: relative;
    z-index: 10;
    color: var(--text);
    border: 1px solid var(--border);
}
.bal-title{font-size:.75rem;text-transform:uppercase;color:var(--text-muted);letter-spacing:1.5px;font-weight:700;}
.bal-amt{font-size:2.5rem;font-weight:800;color:var(--text);margin:5px 0;}
.currency{color:var(--accent);font-size:1.2rem;}
.stats{display:flex;justify-content:space-between;margin-top:20px;padding-top:20px;border-top:1px dashed var(--border);}
.stat-box{flex:1;}
.stat-box:first-child{border-right: 1px solid var(--border);}
.stat-box h4{font-size:1.15rem;color:var(--text);font-weight:700;margin-bottom:2px;}
.stat-box p{font-size:.75rem;color:var(--text-muted);font-weight:600;}

.sec-head{font-size:1rem;font-weight:800;margin:25px 0 15px;color:var(--text);display:flex;align-items:center;gap:8px;padding:0 20px;}
.sec-head i{color:var(--primary);font-size:1.1rem;}

/* Clean Modern Fintech Ad Cards */
.ad-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:0 20px;}
.ad-card{
    position:relative;
    border-radius:20px;
    cursor:pointer;
    height:130px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ad-card:active{
    transform: scale(0.96);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}
.ad-inner{
    padding:14px 10px;
    text-align:center;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
}
.ad-inner i{font-size:1.8rem;margin:0;display:block;}
.ad-inner h4{font-size:.85rem;font-weight:700;color:var(--text);margin:2px 0;}
.ad-inner .reward-pill{
    font-size:.7rem;
    font-weight:700;
    padding:3px 10px;
    border-radius:50px;
    display:inline-flex;
    gap:4px;
    align-items:center;
}
.ad-inner .progress-pill{
    font-size:.65rem;
    color:var(--text-muted);
    background: var(--bg);
    padding:3px 8px;
    border-radius:50px;
    display:inline-block;
    font-weight:600;
}

/* Specific Soft Pastel Color Themes for Slots */
.slot-1{ border-color: #FEE2E2; }
.slot-1:active{ border-color: #F87171; }
.slot-1 .ad-inner{ background: linear-gradient(180deg, var(--surface) 0%, var(--slot-1-bg) 100%); }
.slot-1 i { color: #EF4444; }
.slot-1 .reward-pill { background: #FEE2E2; color: #EF4444; }

.slot-2{ border-color: #E0F2FE; }
.slot-2:active{ border-color: #38BDF8; }
.slot-2 .ad-inner{ background: linear-gradient(180deg, var(--surface) 0%, var(--slot-2-bg) 100%); }
.slot-2 i { color: #0EA5E9; }
.slot-2 .reward-pill { background: #E0F2FE; color: #0EA5E9; }

.slot-3{ border-color: #D1FAE5; }
.slot-3:active{ border-color: #34D399; }
.slot-3 .ad-inner{ background: linear-gradient(180deg, var(--surface) 0%, var(--slot-3-bg) 100%); }
.slot-3 i { color: #10B981; }
.slot-3 .reward-pill { background: #D1FAE5; color: #10B981; }

.slot-4{ border-color: #F3E8FF; }
.slot-4:active{ border-color: #C084FC; }
.slot-4 .ad-inner{ background: linear-gradient(180deg, var(--surface) 0%, var(--slot-4-bg) 100%); }
.slot-4 i { color: #8B5CF6; }
.slot-4 .reward-pill { background: #F3E8FF; color: #8B5CF6; }

.ad-card.disabled{
    opacity:.5;
    filter:grayscale(1);
    pointer-events:none;
    border-color: var(--border) !important;
}
.ad-card.disabled .ad-inner { background: var(--bg) !important; }

/* Minimal Fresh Tasks */
.task-list{display:flex;flex-direction:column;gap:12px;padding:0 20px 30px;}
.task-item{
    background: var(--surface);
    padding:15px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    border:1px solid var(--border);
}
.task-left{display:flex;align-items:center;gap:15px;}
.task-icon{width:42px;height:42px;border-radius:12px;object-fit:cover;border:1px solid var(--border);}
.task-info h4{font-size:.9rem;font-weight:700;line-height:1.2;color:var(--text);}
.task-info small{color:var(--primary);font-weight:700;font-size:.8rem;}

.btn-act{
    padding:8px 18px;
    border-radius:50px;
    border:none;
    font-weight:700;
    font-size:.78rem;
    cursor:pointer;
    min-width:85px;
    transition: 0.2s ease;
}
.btn-act:active{transform:scale(0.95);}
.btn-start{background:var(--text);color:var(--surface);}
.btn-wait{background:rgba(255, 193, 7, 0.12);color:#D97706;border:1px solid #FDE68A;cursor:not-allowed;}
.btn-claim{background:var(--primary);color:#fff;animation:pulse 1.2s infinite;}
@keyframes pulse{50%{transform:scale(1.04)}}

/* Fintech Style Premium Cards & Modals */
.premium-card {
    background: var(--surface);
    margin: 0 20px 15px;
    padding: 22px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    border: 1px solid var(--border);
}
.card-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 12px; color: var(--text); display:flex; align-items:center; gap:8px; }
.ref-link-box {
    background: var(--input-bg);
    padding: 15px;
    border-radius: 12px;
    font-size: 0.85rem;
    word-break: break-all;
    margin-bottom: 15px;
    border: 1px dashed var(--primary);
    text-align: center;
    font-weight: 700;
    color: var(--primary);
}
.flex-btns { display: flex; gap: 10px; }
.btn-blue {
    flex: 1;
    background: linear-gradient(135deg, #0284C7, #0EA5E9);
    color: #fff;
    padding: 12px;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.15);
}
.btn-dark {
    background: var(--btn-dark-bg);
    color: var(--btn-dark-text);
    padding: 12px 16px;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    cursor: pointer;
}
.btn-red {
    background: linear-gradient(135deg, #EF4444, #F87171);
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    color: white;
    font-weight: 700;
    border: none;
    margin-top: 10px;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.15);
}
.input-group { margin-bottom: 15px; }
.input-group select, .input-group input {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 0.92rem;
    background: var(--input-bg);
    outline: none;
    transition: 0.2s;
    font-weight: 600;
    color: var(--text);
}
.input-group select:focus, .input-group input:focus {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.btn-main {
    width: 100%;
    padding: 15px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), #6366F1);
    color: #fff;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-main:active { transform: scale(0.98); }

/* Leaderboard Podium (Clean Style) */
.leaderboard-title { text-align:center; font-weight:800; font-size:1.25rem; color:var(--text); margin-top:20px; z-index: 20; position: relative; }
.podium-container { display: flex; justify-content: center; align-items: flex-end; gap: 8px; margin: 90px 10px 30px; }
.podium-item { text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; background: var(--surface); padding: 18px 8px 12px; border-radius: 20px; box-shadow: var(--card-shadow); width: 31%; border: 1px solid var(--border); }
.podium-img { width: 50px; height: 50px; border-radius: 50%; border: 3px solid; object-fit: cover; background: var(--surface); position: absolute; top: -25px; }
.crown { position: absolute; top: -46px; font-size: 1.5rem; text-shadow: 0 2px 4px rgba(0,0,0,0.1); z-index: 5; }
.rank-name { font-size: 0.8rem; font-weight: 700; color: var(--text); margin-top: 28px; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;}
.rank-stats-col { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.rank-badge { font-size: 0.65rem; font-weight: 700; padding: 4px 2px; border-radius: 6px; width: 100%; }
.badge-bal { background: var(--bg); color: var(--primary); border: 1px solid var(--border); }
.badge-ref { background: rgba(16, 185, 129, 0.1); color: var(--success); border: 1px solid rgba(16, 185, 129, 0.2); }

.rank-1 { z-index: 10; margin: 0 4px; transform: translateY(-12px); width: 34%; border: 2px solid #F59E0B; background: var(--surface); box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.15); }
.rank-1 .podium-img { width: 60px; height: 60px; border-color: #F59E0B; top: -30px; }
.rank-1 .crown { color: #F59E0B; font-size: 2rem; top: -58px; }

.rank-2 { border: 2px solid #94A3B8; }
.rank-2 .podium-img { border-color: #94A3B8;}
.rank-2 .crown { color: #94A3B8; }

.rank-3 { border: 2px solid #D97706; }
.rank-3 .podium-img { border-color: #D97706;}
.rank-3 .crown { color: #D97706; }

.leader-list { padding: 0 20px 30px; }
.leader-row { display: flex; align-items: center; justify-content: space-between; background: var(--surface); padding: 12px 15px; border-radius: 15px; margin-bottom: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.02); border: 1px solid var(--border); border-left: 5px solid var(--primary);}
.leader-left { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 0.9rem; color: var(--text); }
.leader-left img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
.rank-num { font-size: 1.05rem; font-weight: 800; color: #94A3B8; width: 28px; text-align: center; }
.leader-right-stats { text-align: right; display: flex; flex-direction: column; gap: 4px; }
.leader-right-bal { font-weight: 700; color: var(--primary); font-size: 0.82rem; background: var(--bg); border: 1px solid var(--border); padding: 3px 10px; border-radius: 6px; display: inline-block;}
.leader-right-ref { font-size: 0.72rem; color: var(--success); font-weight: 700; background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.15); padding: 3px 10px; border-radius: 6px; display: inline-block;}

/* Bottom Nav capsule (Wise/Stripe style) */
.nav{
    position:fixed;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    max-width:390px;
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display:flex;
    justify-content:space-around;
    padding:14px;
    border-radius:24px;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--nav-border);
    z-index:100;
}
.nav i{font-size:1.3rem;color:var(--text-muted);cursor:pointer;transition:.3s ease;}
.nav i.active{color:var(--primary);transform:translateY(-3px);text-shadow: 0 4px 10px rgba(79, 70, 229, 0.2);}

/* Minimal Dark Toast */
.toast{
    position:fixed;
    top:-60px;
    left:50%;
    transform:translateX(-50%);
    background: #0F172A;
    color:#fff;
    padding:12px 24px;
    border-radius:50px;
    font-size:.85rem;
    font-weight:600;
    opacity:0;
    transition:.3s ease;
    z-index:10000;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.toast.show{opacity:1;top:25px;}

/* Fresh Light Bonus Modal */
.bonus-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:12000;padding:18px;background: var(--modal-overlay);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.bonus-overlay.show{display:flex;}
.bonus-card{width:100%;max-width:400px;border-radius:26px;overflow:hidden;background: var(--modal-bg);box-shadow: 0 20px 50px rgba(0,0,0,0.15);border:1px solid var(--border);position:relative;animation:pop .22s ease-out;}
@keyframes pop{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.bonus-body{position:relative;padding:25px 20px;color:var(--text);text-align:center;}
.bonus-badge{display:inline-flex;gap:6px;align-items:center;background:rgba(245, 158, 11, 0.1);border:1px solid #FDE68A;color:#D97706;padding:6px 12px;border-radius:999px;font-weight:700;font-size:.75rem;letter-spacing:.5px;margin-bottom:14px;text-transform:uppercase;}
.bonus-title{font-size:1.25rem;font-weight:800;margin-bottom:6px;color:var(--text);}
.bonus-sub{font-size:.85rem;color:var(--text-muted);margin-bottom:16px;line-height:1.4;}
.bonus-amt{font-size:2.3rem;font-weight:900;color:#D97706;text-shadow:0 4px 10px rgba(217, 119, 6, 0.1);margin-bottom:14px;}
.bonus-actions{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.bonus-btn{width:100%;border:none;border-radius:14px;padding:14px;font-weight:700;font-size:0.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:0.2s;}
.bonus-btn:active{transform:scale(0.97);}
.bonus-btn:disabled{opacity:0.7;cursor:not-allowed;}
.bonus-claim{background:linear-gradient(135deg, var(--primary), #6366F1);color:#fff;box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);}
.bonus-close{background: var(--input-bg);color:var(--text);border:1px solid var(--border);}