:root {
    --bg-dark: #0B1120;
    --bg-card: #1E293B;
    --primary: #F59E0B; 
    --primary-glow: rgba(245, 158, 11, 0.4);
    --secondary: #8B5CF6; 
    --success: #10B981;
    --danger: #EF4444;
    --info: #38BDF8;
    --text-main: #F8FAFC;
    --text-muted: #94A3B8;
    --border-light: rgba(255, 255, 255, 0.1);
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Poppins', 'Hind Siliguri', sans-serif; 
    -webkit-tap-highlight-color: transparent; 
}

/* GLOBAL BUTTON RESETS FOR MOBILE WEBVIEW */
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border: none;
    background: transparent;
    font-family: inherit;
}

body { 
    background-color: var(--bg-dark); 
    color: var(--text-main); 
    user-select: none; 
    background-image: radial-gradient(circle at top right, #1a153a 0%, var(--bg-dark) 50%); 
    background-attachment: fixed; 
}

body.modal-open { 
    overflow: hidden; 
    touch-action: none; 
}

::-webkit-scrollbar { 
    width: 5px; 
}

::-webkit-scrollbar-thumb { 
    background: rgba(255,255,255,0.2); 
    border-radius: 10px; 
}

/* ANIMATIONS */
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

@keyframes zoomIn { 
    from { transform: scale(0.85); opacity: 0; } 
    to { transform: scale(1); opacity: 1; } 
}

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

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

@keyframes pulseGlow { 
    0% { transform: scale(1); opacity: 0.9; } 
    50% { transform: scale(1.05); opacity: 1; filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.6)); } 
    100% { transform: scale(1); opacity: 0.9; } 
}

@keyframes marquee { 
    0% { transform: translate3d(0, 0, 0); } 
    100% { transform: translate3d(-100%, 0, 0); } 
}

@keyframes blink { 
    0% { opacity: 0.2; transform: scale(0.8); } 
    20% { opacity: 1; transform: scale(1.2); } 
    100% { opacity: 0.2; transform: scale(0.8); } 
}

/* LOADER */
.loader-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: var(--bg-dark); 
    z-index: 99999999; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    transition: opacity 0.3s ease, visibility 0.3s ease; 
}

.loader-overlay.hide-loader { 
    opacity: 0; 
    visibility: hidden; 
    pointer-events: none; 
}

.loader-logo-box { 
    width: 80px; 
    height: 80px; 
    border: 2px solid var(--primary); 
    border-radius: 22px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 20px; 
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.15); 
    background: rgba(0,0,0,0.3); 
}

.loader-logo-box i { 
    font-size: 40px; 
    color: #38bdf8; 
}

.loader-title { 
    color: var(--primary); 
    font-size: 24px; 
    font-weight: 800; 
    letter-spacing: 1px; 
    margin-bottom: 8px; 
    text-transform: uppercase; 
}

.loader-text { 
    color: #64748b; 
    font-size: 14px; 
    font-weight: 500; 
    display: flex; 
    gap: 5px; 
}

.dots span { 
    animation: blink 1.4s infinite both; 
    height: 7px; 
    width: 7px; 
    background: var(--primary); 
    border-radius: 50%; 
    display: inline-block; 
    margin: 0 2px; 
    margin-top: 6px;
}

.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }

/* MANDATORY OVERLAY */
.join-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(11, 17, 32, 0.98); 
    backdrop-filter: blur(16px); 
    z-index: 9999999; 
    display: none; 
    align-items: center; 
    justify-content: center; 
    padding: 20px; 
}

.join-card { 
    text-align: center; 
    width: 100%; 
    max-width: 400px; 
    background: linear-gradient(145deg, #1E293B, #0F172A); 
    border: 2px solid var(--primary); 
    border-radius: 28px; 
    padding: 30px 22px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 30px rgba(245, 158, 11, 0.25); 
    animation: zoomIn 0.3s ease; 
}

.join-badge-top { 
    background: rgba(245, 158, 11, 0.15); 
    color: #F59E0B; 
    border: 1px solid rgba(245, 158, 11, 0.35); 
    font-size: 11px; 
    font-weight: 800; 
    padding: 4px 14px; 
    border-radius: 20px; 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
    margin-bottom: 12px; 
}

.shield-icon { 
    font-size: 55px; 
    color: var(--primary); 
    margin-bottom: 12px; 
    display: inline-block; 
    animation: pulseGlow 2.5s infinite ease-in-out; 
}

.join-card h2 { 
    color: white; 
    font-size: 22px; 
    font-weight: 800; 
    margin-bottom: 8px; 
    letter-spacing: -0.3px; 
}

.join-card p.join-desc { 
    color: #CBD5E1; 
    font-size: 13px; 
    margin-bottom: 16px; 
    line-height: 1.6; 
    font-weight: 500; 
}

.join-benefits-box { 
    background: rgba(15, 23, 42, 0.75); 
    border: 1px dashed rgba(245, 158, 11, 0.35); 
    border-radius: 16px; 
    padding: 12px 14px; 
    text-align: left; 
    margin-bottom: 18px; 
}

.join-benefit-item { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-size: 12px; 
    color: #E2E8F0; 
    margin-bottom: 6px; 
    font-weight: 600; 
}

.join-benefit-item:last-child { margin-bottom: 0; }
.join-benefit-item i { color: #10B981; font-size: 13px; flex-shrink: 0; }

.join-btn-outline { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px; 
    border: 1.5px solid var(--primary); 
    color: #FFF; 
    background: rgba(245, 158, 11, 0.1); 
    padding: 13px; 
    border-radius: 14px; 
    font-weight: 700; 
    font-size: 14px; 
    margin-bottom: 10px; 
    cursor: pointer; 
    transition: 0.2s; 
    user-select: none; 
}

.join-btn-outline:active { 
    background: rgba(245, 158, 11, 0.25); 
    transform: scale(0.98); 
}

.join-btn-solid { 
    width: 100%; 
    background: linear-gradient(90deg, #F59E0B, #D97706); 
    color: #000; 
    border: none; 
    padding: 14px; 
    border-radius: 14px; 
    font-weight: 800; 
    font-size: 15px; 
    margin-top: 10px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35); 
    transition: transform 0.1s ease; 
}

.join-btn-solid:active { transform: scale(0.98); }

.join-note-text { 
    font-size: 11px; 
    color: #94A3B8; 
    margin-top: 12px; 
    line-height: 1.4; 
    font-weight: 500; 
}

/* MODAL OVERLAY */
.modal-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.88); 
    z-index: 10000005; 
    display: none; 
    align-items: center; 
    justify-content: center; 
    backdrop-filter: blur(8px); 
    padding: 15px; 
}

.modal-overlay.active { display: flex; }

/* APP HEADER */
.app-header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 65px; 
    background: rgba(11, 17, 32, 0.92); 
    backdrop-filter: blur(12px); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0 15px; 
    z-index: 1000; 
    border-bottom: 1px solid var(--border-light); 
}

.logo-area { 
    font-weight: 800; 
    font-size: 18px; 
    color: white; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    cursor: pointer; 
}

.logo-area i { color: #38bdf8; font-size: 20px; }

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

.wallet-btn { 
    background: rgba(255,255,255,0.05); 
    border: 1px solid var(--border-light); 
    padding: 5px 12px; 
    border-radius: 20px; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    font-size: 13px; 
    font-weight: 700; 
    cursor: pointer; 
}

.profile-avatar { 
    width: 34px; 
    height: 34px; 
    border-radius: 50%; 
    background: url('https://cdn-icons-png.flaticon.com/512/149/149071.png') center/cover; 
    border: 2px solid var(--secondary); 
    cursor: pointer; 
}

.notif-icon { position: relative; font-size: 20px; color: #fff; cursor: pointer; }

.notif-badge { 
    position: absolute; 
    top: -5px; 
    right: -5px; 
    background: var(--danger); 
    color: white; 
    font-size: 9px; 
    height: 15px; 
    width: 15px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 50%; 
    border: 1px solid var(--bg-dark); 
}

/* VIEWS */
.view-section { 
    display: none; 
    animation: fadeIn 0.3s ease forwards; 
    padding: 80px 15px 95px 15px; 
    min-height: 100vh; 
    max-width: 600px; 
    margin: 0 auto; 
}

.active-view { display: block; }

.section-title { 
    font-size: 16px; 
    font-weight: 700; 
    margin: 20px 0 12px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
}

/* HOME COMPONENTS */
.slider-container { 
    width: 100%; 
    aspect-ratio: 16/7; 
    border-radius: 16px; 
    overflow: hidden; 
    margin-bottom: 12px; 
    background: #1E293B; 
    position: relative; 
}

.slides-wrapper { 
    display: flex; 
    width: 100%; 
    height: 100%; 
    transition: transform 0.5s ease-in-out; 
}

.slide { 
    min-width: 100%; 
    height: 100%; 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    background-position: center; 
    position: relative; 
}

.slide-action-btn { 
    position: absolute; 
    bottom: 15px; 
    right: 15px; 
    background: #004AAD; 
    color: #fff; 
    padding: 6px 18px; 
    border-radius: 20px; 
    font-weight: 700; 
    font-size: 12px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.4); 
    border: 1px solid rgba(255,255,255,0.2); 
    cursor: pointer; 
}

.news-ticker { 
    display: flex; 
    align-items: center; 
    background: #FFFFFF; 
    border-radius: 12px; 
    padding: 6px 10px; 
    margin-bottom: 15px; 
    overflow: hidden; 
    height: 38px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); 
}

.news-badge { 
    background: #004AAD; 
    color: #FFFFFF; 
    font-size: 11px; 
    font-weight: 700; 
    padding: 4px 12px; 
    border-radius: 8px; 
    white-space: nowrap; 
    display: flex; 
    align-items: center; 
    gap: 4px; 
}

.ticker-content { 
    flex: 1; 
    overflow: hidden; 
    position: relative; 
    display: flex; 
    align-items: center; 
    margin-left: 10px; 
}

.ticker-content span { 
    display: inline-block; 
    white-space: nowrap; 
    color: #1E293B; 
    font-size: 12px; 
    font-weight: 600; 
    padding-left: 100%; 
    animation: marquee 15s linear infinite; 
}

.activation-card { 
    background: linear-gradient(135deg, #1e1b4b, #312e81); 
    border: 1px solid var(--primary); 
    border-radius: 16px; 
    padding: 15px; 
    margin-bottom: 20px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
}

.activate-btn { 
    background: var(--primary) !important; 
    color: #000 !important; 
    border: none; 
    padding: 8px 15px; 
    border-radius: 8px; 
    font-weight: 800; 
    font-size: 12px; 
    cursor: pointer; 
}

.activate-btn.active { 
    background: var(--success) !important; 
    color: white !important; 
}

.card-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px; 
    margin-bottom: 20px; 
}

.action-card { 
    background: var(--bg-card); 
    border: 1px solid var(--border-light); 
    border-radius: 12px; 
    padding: 15px; 
    text-align: center; 
    cursor: pointer; 
}

.action-card:active { 
    transform: scale(0.95); 
    background: rgba(255,255,255,0.05); 
}

.action-card i { font-size: 24px; margin-bottom: 8px; display: block; }
.action-card span { font-size: 12px; font-weight: 600; display: block; }
.action-card p { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.c-green { color: var(--success); border-color: var(--success); }
.c-red { color: var(--danger); border-color: var(--danger); }

/* DASHBOARD CONTAINER CARD */
.dashboard-container-card { 
    background: #FFFFFF; 
    border-radius: 24px; 
    padding: 16px; 
    margin-bottom: 16px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.12); 
    color: #1E293B; 
}

.dashboard-header-box { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    margin-bottom: 16px; 
    padding-bottom: 10px; 
    border-bottom: 1.5px dashed #E2E8F0; 
}

.dashboard-icon-wrap { 
    width: 44px; 
    height: 44px; 
    border-radius: 12px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 20px; 
    flex-shrink: 0; 
}

.dashboard-main-title { 
    font-size: 22px; 
    font-weight: 800; 
    color: #1E293B; 
    font-family: 'Hind Siliguri', sans-serif; 
    letter-spacing: -0.4px; 
    white-space: nowrap; 
}

.dashboard-grid-layout { display: grid; gap: 10px; }
.grid-2-columns { grid-template-columns: repeat(2, 1fr); }
.grid-3-columns { grid-template-columns: repeat(3, 1fr); }
.grid-4-columns { grid-template-columns: repeat(4, 1fr); }

.dashboard-box-card { 
    border-radius: 14px; 
    padding: 14px 6px; 
    text-align: center; 
    cursor: pointer; 
    transition: all 0.2s ease-in-out; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    text-decoration: none; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); 
}

.dashboard-box-card:active { transform: scale(0.95); opacity: 0.9; }
.dashboard-box-card i { font-size: 24px; }
.dashboard-box-card span { 
    font-size: 12px; 
    font-weight: 800; 
    font-family: 'Hind Siliguri', sans-serif; 
    color: #1E293B; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    width: 100%; 
}

.t-bg-daily { background: #F3E8FF; color: #7B1FA2; }
.t-bg-weekly { background: #EDE9FE; color: #6D28D9; }

/* 3-MODE VIDEO DASHBOARD (SCREENSHOT EXACT MATCH) */
.video-session-container { 
    background: #111827 !important; 
    border: 1.8px solid #D97706 !important; 
    border-radius: 24px !important; 
    padding: 16px 14px !important; 
    margin-bottom: 16px !important; 
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 18px rgba(217, 119, 6, 0.2) !important; 
    color: #FFFFFF !important; 
    width: 100% !important; 
    box-sizing: border-box !important; 
    overflow: hidden !important; 
}

.vs-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 12px; 
    padding-bottom: 8px; 
    border-bottom: 1px solid rgba(255,255,255,0.08); 
}

.vs-title { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    font-size: 16px; 
    font-weight: 800; 
    color: #FFFFFF; 
}

.vs-title i { color: #38BDF8; font-size: 18px; }

.vs-status-pill { 
    background: rgba(30, 41, 59, 0.9); 
    border: 1px solid #475569; 
    color: #94A3B8; 
    font-size: 10px; 
    font-weight: 800; 
    padding: 4px 12px; 
    border-radius: 16px; 
    white-space: nowrap; 
}

.vs-modes-grid { 
    display: grid; 
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
    gap: 6px; 
    margin-bottom: 10px; 
    width: 100%; 
}

.vs-mode-card { 
    background: #1E293B; 
    border: 1.2px solid #334155; 
    border-radius: 14px; 
    padding: 8px 4px; 
    text-align: center; 
    position: relative; 
    transition: all 0.2s ease; 
    min-width: 0; 
    overflow: hidden; 
    box-sizing: border-box; 
    cursor: pointer; 
}

.vs-mode-card.active-mode { 
    border-color: #10B981; 
    background: linear-gradient(180deg, #1E293B 0%, rgba(16, 185, 129, 0.15) 100%); 
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3); 
}

.vs-mode-card.active-mode.vip { 
    border-color: #F59E0B; 
    background: linear-gradient(180deg, #1E293B 0%, rgba(245, 158, 11, 0.15) 100%); 
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.3); 
}

.vs-mode-head { 
    font-size: 10px; 
    font-weight: 800; 
    color: #FFF; 
    margin-bottom: 4px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 3px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.vs-mode-badge { 
    display: inline-block; 
    background: rgba(239, 68, 68, 0.2); 
    color: #EF4444; 
    border: 1px solid rgba(239, 68, 68, 0.35); 
    font-size: 9px; 
    font-weight: 800; 
    padding: 1px 8px; 
    border-radius: 10px; 
    margin-bottom: 5px; 
    white-space: nowrap; 
}

.vs-mode-badge.unlocked { 
    background: rgba(16, 185, 129, 0.2); 
    color: #10B981; 
    border-color: rgba(16, 185, 129, 0.35); 
}

.vs-mode-sub { 
    font-size: 9px; 
    color: #94A3B8; 
    margin-bottom: 3px; 
    line-height: 1.25; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: block; 
    width: 100%; 
}

.vs-mode-val { 
    font-size: 10px; 
    font-weight: 800; 
    color: #F8FAFC; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.vs-stats-row { 
    display: grid; 
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
    gap: 6px; 
    margin-bottom: 10px; 
    width: 100%; 
}

.vs-stat-box { 
    background: #1E293B; 
    border: 1px solid #334155; 
    border-radius: 12px; 
    padding: 8px 3px; 
    text-align: center; 
    min-width: 0; 
    overflow: hidden; 
}

.vs-sb-label { 
    font-size: 9px; 
    color: #94A3B8; 
    margin-bottom: 3px; 
    font-weight: 600; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.vs-sb-val { 
    font-size: 11px; 
    font-weight: 900; 
    color: #FFFFFF; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: block; 
    width: 100%; 
}

.vs-sb-val.gold { color: #F59E0B; }
.vs-sb-val.cyan { color: #38BDF8; }

.vs-info-box { 
    background: #1E293B !important; 
    border: 1px solid #78350F !important; 
    border-radius: 14px !important; 
    padding: 10px 14px !important; 
    display: flex !important; 
    align-items: center !important; 
    gap: 10px !important; 
    margin-bottom: 12px !important; 
}

.vs-info-icon { color: #F59E0B; font-size: 18px; flex-shrink: 0; }
.vs-info-text h5 { font-size: 12px; font-weight: 800; color: #FFFFFF; margin-bottom: 2px; }
.vs-info-text p { font-size: 11px; color: #CBD5E1; line-height: 1.4; font-weight: 500; }

.vs-action-btn { 
    width: 100% !important; 
    background: linear-gradient(90deg, #F59E0B 0%, #EC4899 100%) !important; 
    border: none !important; 
    padding: 12px !important; 
    border-radius: 14px !important; 
    font-size: 13px !important; 
    font-weight: 900 !important; 
    color: #000000 !important; 
    cursor: pointer !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 8px !important; 
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35) !important; 
    transition: transform 0.2s ease !important; 
}

.vs-action-btn:active { transform: scale(0.98); }

/* VIP LIVE COUNTDOWN BOX */
.vip-timer-banner { 
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.25)) !important; 
    border: 1.5px dashed #F59E0B !important; 
    border-radius: 14px !important; 
    padding: 10px 14px !important; 
    display: none; 
    align-items: center !important; 
    justify-content: space-between !important; 
    margin-bottom: 12px !important; 
}

.vip-tb-left { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-size: 11px; 
    font-weight: 800; 
    color: #FCD34D; 
}

.vip-tb-timer { 
    font-size: 12px; 
    font-weight: 900; 
    color: #FFF; 
    background: rgba(0,0,0,0.4); 
    padding: 4px 10px; 
    border-radius: 8px; 
    letter-spacing: 0.5px; 
}

/* DRIVE OFFERS VIEW */
.drive-op-filter-wrap { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 15px; }

.drive-op-chip { 
    background: #1E293B; 
    border: 1px solid rgba(255,255,255,0.1); 
    color: #CBD5E1; 
    font-size: 12px; 
    font-weight: 700; 
    padding: 6px 14px; 
    border-radius: 20px; 
    cursor: pointer; 
    white-space: nowrap; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
}

.drive-op-chip.active { background: #004AAD; color: #FFF; border-color: #38BDF8; }

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

.drive-card { 
    background: linear-gradient(145deg, #1E293B, #0F172A); 
    border: 1px solid rgba(255,255,255,0.08); 
    border-radius: 18px; 
    padding: 16px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
}

.drive-c-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

.drive-op-badge { 
    font-size: 11px; 
    font-weight: 800; 
    padding: 3px 10px; 
    border-radius: 10px; 
    display: inline-flex; 
    align-items: center; 
    gap: 4px; 
}

.op-gp { background: rgba(56, 189, 248, 0.15); color: #38BDF8; border: 1px solid rgba(56, 189, 248, 0.4); }
.op-bl { background: rgba(245, 158, 11, 0.15); color: #F59E0B; border: 1px solid rgba(245, 158, 11, 0.4); }
.op-robi { background: rgba(239, 68, 68, 0.15); color: #EF4444; border: 1px solid rgba(239, 68, 68, 0.4); }
.op-airtel { background: rgba(236, 72, 153, 0.15); color: #EC4899; border: 1px solid rgba(236, 72, 153, 0.4); }

.drive-c-title { font-size: 15px; font-weight: 800; color: #FFF; margin-bottom: 6px; }
.drive-c-details { font-size: 12px; color: #94A3B8; margin-bottom: 12px; line-height: 1.4; }

.drive-price-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-top: 1px dashed rgba(255,255,255,0.1); 
    padding-top: 10px; 
}

.drive-prices { display: flex; align-items: baseline; gap: 8px; }
.drive-cur-price { font-size: 18px; font-weight: 900; color: #10B981; }
.drive-reg-price { font-size: 12px; color: #64748B; text-decoration: line-through; }

.drive-comm-badge { 
    font-size: 10px; 
    font-weight: 800; 
    background: rgba(16, 185, 129, 0.15); 
    color: #10B981; 
    padding: 2px 6px; 
    border-radius: 6px; 
    border: 1px solid rgba(16, 185, 129, 0.3); 
}

.drive-buy-btn { 
    background: linear-gradient(90deg, #F59E0B, #D97706); 
    color: #000; 
    border: none; 
    padding: 8px 16px; 
    border-radius: 12px; 
    font-size: 12px; 
    font-weight: 800; 
    cursor: pointer; 
}

/* TEAM MEMBERS & LEADERBOARD */
.refer-card { 
    background: linear-gradient(135deg, #a855f7, #ec4899); 
    border-radius: 25px; 
    padding: 25px 18px; 
    text-align: center; 
    margin-bottom: 20px; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); 
}

.refer-card h2 { 
    font-size: 24px; 
    font-weight: 900; 
    text-transform: uppercase; 
    margin-bottom: 4px; 
    color: white; 
}

.refer-card p { font-size: 12px; opacity: 0.95; margin-bottom: 16px; color: white; }

.refer-link-box { 
    background: rgba(0,0,0,0.25); 
    border-radius: 14px; 
    display: flex; 
    align-items: center; 
    padding: 6px 12px; 
    gap: 8px; 
}

.refer-link-box input { 
    background: transparent; 
    border: none; 
    color: white; 
    font-size: 12px; 
    width: 100%; 
    outline: none; 
}

.copy-btn-new { 
    background: rgba(255,255,255,0.25); 
    padding: 7px 16px; 
    border-radius: 10px; 
    font-weight: 800; 
    cursor: pointer; 
    font-size: 13px; 
    color: white; 
}

.network-stats-card { 
    background: linear-gradient(180deg, #3b82f6, #2563eb); 
    border-radius: 22px; 
    padding: 16px; 
    margin-bottom: 18px; 
}

.ns-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ns-header i { background: rgba(255,255,255,0.2); padding: 10px; border-radius: 10px; font-size: 18px; }
.ns-header h3 { font-size: 18px; font-weight: 800; color: white; }
.ns-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.ns-item { 
    background: rgba(255,255,255,0.15); 
    padding: 12px 4px; 
    border-radius: 14px; 
    text-align: center; 
    color: white; 
}

.ns-item h4 { font-size: 20px; font-weight: 900; }
.ns-item p { font-size: 10px; opacity: 0.85; margin-top: 3px; }

/* UPLINE CARD (SCREENSHOT 1 FIX) */
.upline-card-new { 
    background: #1E293B !important; 
    border: 1px solid rgba(139, 92, 246, 0.4) !important; 
    border-radius: 16px !important; 
    padding: 14px 16px !important; 
    display: flex !important; 
    align-items: center !important; 
    gap: 14px !important; 
    margin-bottom: 18px !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.25) !important;
}

.upline-card-new .up-icon { 
    background: rgba(139, 92, 246, 0.2) !important; 
    color: #8b5cf6 !important; 
    width: 44px !important; 
    height: 44px !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    border-radius: 50% !important; 
    font-size: 20px !important; 
    flex-shrink: 0 !important;
}

.up-info-text { flex: 1; }
.up-info-text p { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.up-info-text h4 { font-size: 15px; font-weight: 800; color: white; line-height: 1.2; }
.up-info-text span { font-size: 12px; color: #cbd5e1; }

.leaderboard-wrap { 
    background: #1E293B; 
    border-radius: 20px; 
    padding: 15px; 
    border: 1px solid var(--border-light); 
    margin-bottom: 20px; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.25); 
}

.lb-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 12px; 
    padding-bottom: 8px; 
    border-bottom: 1px dashed rgba(255,255,255,0.1); 
}

.lb-title { 
    font-size: 14px; 
    font-weight: 800; 
    color: #F8FAFC; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
}

.lb-list { display: flex; flex-direction: column; gap: 7px; max-height: 380px; overflow-y: auto; }

.lb-item { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 9px 12px; 
    border-radius: 12px; 
    background: rgba(15, 23, 42, 0.65); 
    border: 1px solid rgba(255,255,255,0.06); 
}

.lb-item.top-1 { background: linear-gradient(90deg, rgba(245, 158, 11, 0.2), rgba(15, 23, 42, 0.7)); border-color: rgba(245, 158, 11, 0.45); }
.lb-item.top-2 { background: linear-gradient(90deg, rgba(148, 163, 184, 0.2), rgba(15, 23, 42, 0.7)); border-color: rgba(148, 163, 184, 0.45); }
.lb-item.top-3 { background: linear-gradient(90deg, rgba(217, 119, 6, 0.2), rgba(15, 23, 42, 0.7)); border-color: rgba(217, 119, 6, 0.45); }

.lb-left { display: flex; align-items: center; gap: 8px; overflow: hidden; }

.lb-rank { 
    width: 26px; 
    height: 26px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 11px; 
    font-weight: 900; 
    flex-shrink: 0; 
    background: rgba(255,255,255,0.08); 
    color: #94A3B8; 
}

.rank-1 { background: #F59E0B; color: #000; box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); }
.rank-2 { background: #94A3B8; color: #000; }
.rank-3 { background: #B45309; color: #FFF; }

.lb-user-name { font-size: 12px; font-weight: 800; color: #FFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.lb-user-sub { font-size: 10px; color: #94A3B8; }

.lb-right { 
    display: flex; 
    align-items: center; 
    gap: 5px; 
    font-size: 11px; 
    font-weight: 800; 
    color: #10B981; 
    background: rgba(16, 185, 129, 0.12); 
    padding: 4px 10px; 
    border-radius: 12px; 
    border: 1px solid rgba(16, 185, 129, 0.3); 
    white-space: nowrap; 
}

/* LEVEL ROW & VIEW BUTTON (SCREENSHOT 1 FIX) */
.level-container { margin-top: 15px; }

.level-row { 
    background: #1E293B !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important; 
    border-radius: 14px !important; 
    padding: 12px 14px !important; 
    display: flex !important; 
    flex-direction: row !important;
    justify-content: space-between !important; 
    align-items: center !important; 
    margin-bottom: 10px !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
}

.level-row span { font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 8px; }

.lvl-count-pill { 
    background: rgba(245, 158, 11, 0.15); 
    color: #F59E0B; 
    border: 1px solid rgba(245, 158, 11, 0.3); 
    font-size: 11px; 
    font-weight: 800; 
    padding: 2px 8px; 
    border-radius: 10px; 
}

.view-btn { 
    background: #F59E0B !important; 
    color: #000 !important; 
    padding: 6px 16px !important; 
    border-radius: 10px !important; 
    font-weight: 800 !important; 
    font-size: 12px !important; 
    cursor: pointer !important; 
    border: none !important;
    display: inline-block !important;
}

.member-list-area { 
    background: #0f172a; 
    border-radius: 16px; 
    margin-top: -5px; 
    margin-bottom: 15px; 
    padding: 10px; 
    display: none; 
    max-height: 300px; 
    overflow-y: auto; 
    border: 1px solid rgba(255,255,255,0.06); 
}

.member-card-box { 
    background: rgba(30, 41, 59, 0.7); 
    border: 1px solid rgba(255,255,255,0.06); 
    border-radius: 12px; 
    padding: 10px 12px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 8px; 
}

.member-card-box:last-child { margin-bottom: 0; }

.member-serial-badge { 
    background: rgba(56, 189, 248, 0.15); 
    color: #38BDF8; 
    font-weight: 900; 
    font-size: 11px; 
    width: 26px; 
    height: 26px; 
    border-radius: 50%; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    margin-right: 8px; 
    flex-shrink: 0; 
}

.status-active { color: #10b981; font-weight: 800; font-size: 11px; }
.status-inactive { color: #ef4444; font-weight: 800; font-size: 11px; }

/* TRANSACTIONS */
.trx-item { 
    background: var(--bg-card); 
    border: 1px solid var(--border-light); 
    border-radius: 18px; 
    padding: 15px 16px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-bottom: 12px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.25); 
}

.trx-left { display: flex; align-items: center; gap: 14px; flex: 1; }

.trx-icon { 
    width: 44px; 
    height: 44px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 18px; 
    flex-shrink: 0; 
}

.trx-in { background: rgba(16, 185, 129, 0.15); color: var(--success); border: 1px solid rgba(16,185,129,0.3); }
.trx-out { background: rgba(239, 68, 68, 0.15); color: var(--danger); border: 1px solid rgba(239,68,68,0.3); }
.trx-pend { background: rgba(245, 158, 11, 0.15); color: var(--primary); border: 1px solid rgba(245,158,11,0.3); }

.trx-details h4 { font-size: 14px; font-weight: 800; color: white; margin-bottom: 3px; }
.trx-details p { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

.trx-status-badge { 
    display: inline-block; 
    padding: 3px 10px; 
    border-radius: 12px; 
    font-size: 10px; 
    font-weight: 800; 
    margin-top: 5px; 
}

.badge-pending { background: rgba(245,158,11,0.15); color: #F59E0B; border: 1px solid rgba(245,158,11,0.4); }
.badge-success { background: rgba(16,185,129,0.15); color: #10B981; border: 1px solid rgba(16,185,129,0.4); }
.badge-danger { background: rgba(239,68,68,0.15); color: #EF4444; border: 1px solid rgba(239,68,68,0.4); }
.badge-info { background: rgba(56,189,248,0.15); color: #38BDF8; border: 1px solid rgba(56,189,248,0.4); }

.trx-amount { 
    font-size: 16px; 
    font-weight: 900; 
    text-align: right; 
    white-space: nowrap; 
    margin-left: 10px; 
}

/* BOTTOM NAV FIXED */
.bottom-nav { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 65px; 
    background: rgba(11, 17, 32, 0.98); 
    backdrop-filter: blur(12px); 
    display: flex; 
    justify-content: space-around; 
    align-items: center; 
    border-top: 1px solid var(--border-light); 
    z-index: 1000; 
    padding-bottom: env(safe-area-inset-bottom, 0px); 
}

.nav-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    color: var(--text-muted); 
    font-size: 11px; 
    font-weight: 600; 
    width: 20%; 
    height: 100%; 
    cursor: pointer; 
    transition: all 0.2s ease; 
}

.nav-item i { font-size: 20px; margin-bottom: 4px; display: block; }
.nav-item.active { color: var(--primary); }
.nav-item:active { transform: scale(0.92); }

/* MODALS */
.action-modal-yellow { 
    background: #0f172a; 
    width: 100%; 
    max-width: 440px; 
    border-radius: 22px; 
    overflow: hidden; 
    animation: slideUp 0.3s ease; 
    max-height: 90vh; 
    overflow-y: auto; 
}

.y-header { background: #facc15; padding: 18px; text-align: center; position: relative; }
.y-header h2 { color: #fff; font-size: 22px; font-weight: 900; letter-spacing: 0.5px; }

.y-close { 
    position: absolute; 
    right: 15px; 
    top: 15px; 
    background: #ef4444; 
    color: #fff; 
    width: 32px; 
    height: 32px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    border: 2px solid #fff; 
}

.y-body { padding: 20px; }
.y-method-row { display: flex; justify-content: center; gap: 15px; margin-bottom: 25px; }
.y-method-item { display: flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; }
.y-method-item input { transform: scale(1.2); accent-color: var(--primary); }

.y-admin-num-box { 
    background: #facc15; 
    padding: 14px; 
    border-radius: 10px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    color: #000; 
    font-weight: 800; 
    font-size: 18px; 
    margin-bottom: 25px; 
}

.y-input { 
    width: 100%; 
    padding: 13px 14px; 
    border-radius: 12px; 
    border: 1px solid rgba(255,255,255,0.1); 
    background: #1E293B; 
    color: #F8FAFC; 
    font-weight: 600; 
    text-align: left; 
    margin-bottom: 12px; 
    outline: none; 
    font-size: 13px; 
}

.y-input:focus { border-color: var(--primary); }

.y-submit-btn { 
    background: #4f46e5; 
    color: #fff; 
    width: 100%; 
    padding: 14px; 
    border-radius: 12px; 
    border: none; 
    font-weight: 800; 
    font-size: 15px; 
    margin: 10px auto; 
    display: block; 
    cursor: pointer; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); 
}

.y-warning { color: #facc15; font-size: 12px; text-align: center; line-height: 1.6; margin-top: 15px; font-weight: 500; }
.y-bal-text { color: #facc15; font-size: 19px; font-weight: 800; text-align: center; margin-bottom: 20px; }

/* ADVANCED NOTICE CARD */
.adv-notice-card { 
    background: linear-gradient(145deg, #1E293B 0%, #0F172A 100%); 
    border: 2px solid var(--primary); 
    border-radius: 24px; 
    padding: 24px 18px; 
    width: 100%; 
    max-width: 350px; 
    text-align: center; 
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(245, 158, 11, 0.25); 
    animation: zoomIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    color: #FFFFFF; 
}

.adv-notice-icon-box { 
    width: 65px; 
    height: 65px; 
    margin: 0 auto 14px auto; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 32px; 
    background: rgba(245, 158, 11, 0.12); 
    border: 2.5px solid var(--primary); 
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.35); 
}

.adv-notice-title { font-size: 19px; font-weight: 800; margin-bottom: 8px; color: #FFFFFF; }
.adv-notice-msg { font-size: 13px; color: #CBD5E1; line-height: 1.55; margin-bottom: 20px; font-weight: 500; }
.adv-notice-btn { 
    background: linear-gradient(90deg, #F59E0B, #D97706); 
    color: #000000; 
    border: none; 
    width: 100%; 
    padding: 13px; 
    border-radius: 14px; 
    font-weight: 800; 
    font-size: 15px; 
    cursor: pointer; 
}

/* YOUTUBE VIDEO CARD (100% FIXED: ZERO DOUBLE-LAYER, SEAMLESS IN-PLACE PLAYER) */
.yt-video-card { 
    background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%) !important; 
    border-radius: 20px !important; 
    overflow: hidden !important; 
    margin-bottom: 18px !important; 
    border: 1.5px solid rgba(255,255,255,0.08) !important; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important; 
    position: relative !important;
    display: block !important;
}

/* THUMBNAIL WRAPPER: CLEAN DISPLAY WITH OVERRIDE CAPABILITY (NO FORCED BLOCK) */
.yt-thumb-wrapper { 
    position: relative !important; 
    width: 100% !important; 
    aspect-ratio: 16/9 !important; 
    background: #000000 !important; 
    cursor: pointer !important; 
    overflow: hidden !important; 
    display: block; 
}

/* STRICT CLASS-BASED TOGGLE SO JS CAN RELIABLY HIDE THUMBNAIL */
.yt-thumb-wrapper.is-hidden,
.yt-thumb-wrapper[style*="display: none"] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.yt-hd-thumb { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    display: block !important; 
    transition: transform 0.4s ease; 
}

.yt-thumb-wrapper:hover .yt-hd-thumb { transform: scale(1.04); }

.yt-play-overlay { 
    position: absolute !important; 
    top: 50% !important; 
    left: 50% !important; 
    transform: translate(-50%, -50%) !important; 
    width: 54px !important; 
    height: 54px !important; 
    background: rgba(239, 68, 68, 0.95) !important; 
    border-radius: 50% !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    color: #FFFFFF !important; 
    font-size: 20px !important; 
    border: 3px solid #FFFFFF !important; 
    box-shadow: 0 0 25px rgba(239,68,68,0.7) !important; 
    pointer-events: none !important;
}

.yt-duration-badge { 
    position: absolute !important; 
    bottom: 10px !important; 
    right: 10px !important; 
    background: rgba(0,0,0,0.85) !important; 
    color: #FFF !important; 
    font-size: 10px !important; 
    font-weight: 800 !important; 
    padding: 3px 8px !important; 
    border-radius: 6px !important; 
    display: flex !important; 
    align-items: center !important; 
    gap: 4px !important; 
    border: 1px solid rgba(255,255,255,0.2) !important; 
}

/* VIDEO PLAYER WRAPPER: EXACT 16/9 RATIO IN PLACE OF THUMBNAIL (NO EXTRA GAP) */
.yt-video-player-wrap { 
    position: relative !important; 
    width: 100% !important; 
    aspect-ratio: 16/9 !important; 
    background: #000000 !important; 
    display: none; 
    overflow: hidden !important;
}

.yt-video-player-wrap.is-visible,
.yt-video-player-wrap[style*="display: block"] {
    display: block !important;
}

.yt-video-player-wrap iframe, 
.yt-video-player-wrap div[id^="yt-player-"] { 
    width: 100% !important; 
    height: 100% !important; 
    border: none !important; 
    display: block !important;
}

.yt-card-info { padding: 14px 15px !important; }

.yt-header-row { 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: flex-start !important; 
    gap: 10px !important; 
    margin-bottom: 8px !important; 
}

.yt-card-title { 
    font-size: 14px !important; 
    font-weight: 800 !important; 
    color: #FFFFFF !important; 
    line-height: 1.4 !important; 
    flex: 1 !important; 
    display: -webkit-box !important; 
    -webkit-line-clamp: 2 !important; 
    -webkit-box-orient: vertical !important; 
    overflow: hidden !important; 
}

.yt-card-tag { 
    font-size: 10px !important; 
    font-weight: 800 !important; 
    background: rgba(239, 68, 68, 0.15) !important; 
    color: #EF4444 !important; 
    border: 1px solid rgba(239, 68, 68, 0.3) !important; 
    padding: 2px 8px !important; 
    border-radius: 8px !important; 
    white-space: nowrap !important; 
}

.yt-tracking-box { 
    background: rgba(15, 23, 42, 0.85) !important; 
    border: 1px solid rgba(255,255,255,0.06) !important; 
    border-radius: 12px !important; 
    padding: 10px 12px !important; 
    margin-top: 10px !important; 
}

.yt-progress-status-row { 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    font-size: 11px !important; 
    font-weight: 600 !important; 
    margin-bottom: 6px !important; 
}

.yt-status-text { color: #94A3B8; display: flex; align-items: center; gap: 5px; }
.yt-timer-digits { font-weight: 800; color: #F59E0B; }
.yt-progress-bar-bg { width: 100%; height: 7px; background: #334155; border-radius: 10px; overflow: hidden; }
.yt-progress-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #3B82F6, #10B981); transition: width 0.3s linear; }

.yt-card-play-btn { 
    width: 100% !important; 
    margin-top: 10px !important; 
    background: linear-gradient(135deg, #EF4444, #DC2626) !important; 
    color: #FFFFFF !important; 
    border: none !important; 
    padding: 11px !important; 
    border-radius: 12px !important; 
    font-size: 13px !important; 
    font-weight: 800 !important; 
    cursor: pointer !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 8px !important; 
    box-shadow: 0 4px 15px rgba(239,68,68,0.3) !important; 
}

/* PACKAGES MODAL */
.packages-modal-card { 
    background: #0F172A; 
    border: 2px solid var(--primary); 
    border-radius: 26px; 
    width: 100%; 
    max-width: 450px; 
    max-height: 88vh; 
    overflow-y: auto; 
    padding: 22px 18px; 
    animation: zoomIn 0.3s ease; 
    color: #FFFFFF; 
}

.pkg-modern-card { 
    background: linear-gradient(145deg, #1E293B, #172033); 
    border: 1.5px solid rgba(245, 158, 11, 0.25); 
    border-radius: 20px; 
    padding: 18px; 
    margin-bottom: 16px; 
    position: relative; 
    overflow: hidden; 
    box-shadow: 0 8px 25px rgba(0,0,0,0.3); 
}

.pkg-badge-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 12px; 
    border-bottom: 1px dashed rgba(255,255,255,0.1); 
    padding-bottom: 10px; 
}

.pkg-badge-title { font-size: 17px; font-weight: 800; color: #FFF; display: flex; align-items: center; gap: 8px; }
.pkg-badge-cost { font-size: 20px; font-weight: 900; color: #F59E0B; }
.pkg-features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; font-size: 11px; }

.pkg-feature-item { 
    background: rgba(15, 23, 42, 0.7); 
    border: 1px solid rgba(255,255,255,0.06); 
    border-radius: 10px; 
    padding: 8px 10px; 
}

.pkg-feature-item span { color: #94A3B8; display: block; margin-bottom: 2px; }
.pkg-feature-item b { color: #F8FAFC; font-size: 12px; }

.pkg-modern-buy-btn { 
    width: 100%; 
    background: linear-gradient(90deg, #10B981, #059669); 
    color: #FFF; 
    border: none; 
    padding: 12px; 
    border-radius: 12px; 
    font-weight: 800; 
    font-size: 13px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35); 
}

.ad-running-modal { 
    background: linear-gradient(135deg, #111827 0%, #1E1B4B 100%); 
    border: 2px solid var(--primary); 
    width: 90%; 
    max-width: 380px; 
    border-radius: 26px; 
    padding: 28px 22px; 
    text-align: center; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.7); 
    animation: zoomIn 0.3s ease; 
}

.ad-countdown-circle { 
    width: 75px; 
    height: 75px; 
    border-radius: 50%; 
    border: 3.5px solid var(--primary); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin: 0 auto 16px auto; 
    font-size: 26px; 
    font-weight: 900; 
    color: #F59E0B; 
    background: rgba(245, 158, 11, 0.12); 
}

.welcome-modal-content { 
    background: #1B1E32; 
    width: 90%; 
    max-width: 340px; 
    border-radius: 20px; 
    border: 1px solid var(--primary); 
    overflow: hidden; 
    animation: zoomIn 0.3s ease; 
    display: flex; 
    flex-direction: column; 
    padding-bottom: 18px; 
}

.w-top-header { padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; color: #fff; font-weight: 600; font-size: 14px; }
.w-top-header .close-btn-red { 
    background: #EF4444; 
    color: #fff; 
    width: 26px; 
    height: 26px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    border: 2px solid #fff; 
    font-size: 12px; 
}

.w-inner-card { 
    background: #262940; 
    margin: 0 18px 15px 18px; 
    border-radius: 14px; 
    border: 1px solid rgba(245,158,11,0.2); 
    padding: 20px 15px; 
    text-align: center; 
}

.w-gift-icon { font-size: 40px; color: var(--primary); margin-bottom: 12px; display: block; }
.w-main-title { font-size: 16px; font-weight: 800; margin-bottom: 12px; color: #fff; line-height: 1.4; }
.w-feature-list { text-align: left; list-style: none; margin-bottom: 20px; padding: 0 5px; }
.w-feature-list li { font-size: 12px; color: #cbd5e1; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 8px; font-weight: 500;}

.w-join-btn { 
    background: var(--primary); 
    color: #000; 
    border: none; 
    padding: 10px 20px; 
    border-radius: 25px; 
    font-weight: 800; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    font-size: 13px; 
    min-width: 150px; 
    cursor: pointer; 
}

.w-close-footer { 
    background: var(--primary); 
    color: #000; 
    margin: 0 auto; 
    padding: 9px 22px; 
    border-radius: 25px; 
    font-weight: 700; 
    text-align: center; 
    cursor: pointer; 
    display: inline-block; 
    font-size: 13px; 
    min-width: 160px; 
}

/* PROFILE SECTION */
.profile-container { display: flex; flex-direction: column; align-items: center; padding-top: 10px; width: 100%; }

.p-lang-bar { 
    display: flex; 
    align-items: center; 
    background: rgba(30,41,59,0.8); 
    border: 1px solid rgba(255,255,255,0.12); 
    padding: 4px; 
    border-radius: 25px; 
    margin-bottom: 18px; 
}

.p-lang-btn { 
    background: transparent; 
    border: none; 
    color: #94A3B8; 
    font-size: 12px; 
    font-weight: 800; 
    padding: 6px 16px; 
    border-radius: 20px; 
    cursor: pointer; 
    transition: 0.2s; 
}

.p-lang-btn.active { background: var(--primary); color: #000; }
.p-avatar-wrap { position: relative; margin-bottom: 15px; }
.p-avatar-wrap img { width: 100px; height: 100px; border-radius: 50%; border: 3px solid #f59e0b; padding: 3px; object-fit: cover;}
.p-name { font-size: 24px; font-weight: 800; color: #fff; text-transform: uppercase; margin-bottom: 12px; text-align: center; }
.p-uid-box { background: rgba(255, 255, 255, 0.08); padding: 6px 18px; border-radius: 20px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #cbd5e1; margin-bottom: 10px; }
.p-username { color: #facc15; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 20px; } 

/* WEB ACCESS KEY CARD (SCREENSHOT 4 FIX - UGLY BUTTONS COMPLETELY FIXED) */
.web-access-key-card { 
    width: 100% !important; 
    background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%) !important; 
    border: 1.5px solid var(--primary) !important; 
    border-radius: 18px !important; 
    padding: 16px !important; 
    margin-bottom: 20px !important; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important; 
    text-align: left !important; 
}

.wak-title { font-size: 13px; font-weight: 800; color: #F59E0B; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.wak-desc { font-size: 11px; color: #CBD5E1; line-height: 1.45; margin-bottom: 12px; }

.wak-input-box { 
    display: flex !important; 
    align-items: center !important; 
    background: rgba(0,0,0,0.4) !important; 
    border: 1px solid rgba(255,255,255,0.15) !important; 
    border-radius: 12px !important; 
    padding: 6px 12px !important; 
    margin-bottom: 12px !important; 
}

.wak-input-box input { 
    background: transparent !important; 
    border: none !important; 
    outline: none !important; 
    color: #FFFFFF !important; 
    font-weight: 800 !important; 
    font-size: 14px !important; 
    letter-spacing: 1px !important; 
    width: 100% !important; 
}

.wak-icons { display: flex; align-items: center; gap: 10px; color: #94A3B8; font-size: 16px; cursor: pointer; }

.wak-btn-row { 
    display: flex !important; 
    gap: 8px !important; 
    flex-wrap: wrap !important; 
}

.wak-regen-btn { 
    flex: 1 !important; 
    min-width: 140px !important; 
    background: rgba(245, 158, 11, 0.15) !important; 
    border: 1.5px solid #F59E0B !important; 
    color: #F59E0B !important; 
    padding: 10px 12px !important; 
    border-radius: 12px !important; 
    font-size: 11px !important; 
    font-weight: 800 !important; 
    cursor: pointer !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 6px !important; 
    box-shadow: none !important;
}

.wak-kill-btn { 
    flex: 1 !important; 
    min-width: 140px !important; 
    background: rgba(239, 68, 68, 0.15) !important; 
    border: 1.5px solid #EF4444 !important; 
    color: #EF4444 !important; 
    padding: 10px 12px !important; 
    border-radius: 12px !important; 
    font-size: 11px !important; 
    font-weight: 800 !important; 
    cursor: pointer !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 6px !important; 
    box-shadow: none !important;
}

.wak-regen-btn:active, .wak-kill-btn:active {
    transform: scale(0.97);
}

.p-menu-card { background: #1e293b; width: 100%; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.05); }
.p-menu-item { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); cursor: pointer; transition: 0.2s; }
.p-menu-item:last-child { border-bottom: none; }
.p-menu-item:active { background: rgba(255,255,255,0.04); }
.p-menu-left { display: flex; align-items: center; gap: 16px; font-size: 15px; font-weight: 600; color: #f8fafc; }
.p-menu-icon { font-size: 18px; width: 22px; text-align: center; }
.i-stats { color: #10b981; }
.i-support { color: #3b82f6; }
.i-channel { color: #f59e0b; }
.i-rules { color: #a855f7; }
.i-about { color: #38bdf8; }
.i-review { color: #ec4899; }
.i-dev { color: #06B6D4; }
.i-logout { color: #ef4444; }
.p-menu-right { color: #64748b; font-size: 14px; }
.profile-fabs { position: fixed; bottom: 85px; right: 15px; display: flex; flex-direction: column; gap: 15px; z-index: 100; }
.p-fab { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.4); text-decoration: none; cursor: pointer; }
.fab-wa { background: #25D366; }
.fab-tg { background: #0088cc; }

/* MY STATISTICS MODAL */
.stats-modal-card { 
    background: #0F172A; 
    border: 2px solid var(--primary); 
    border-radius: 26px; 
    width: 100%; 
    max-width: 420px; 
    padding: 22px 18px; 
    color: white; 
    animation: zoomIn 0.3s ease; 
}

.stats-grid-card { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }

.stat-box-modern { 
    background: #1E293B; 
    border: 1px solid rgba(255,255,255,0.08); 
    border-radius: 16px; 
    padding: 14px 12px; 
    text-align: center; 
}

.stat-box-modern span { font-size: 11px; color: #94A3B8; font-weight: 600; display: block; margin-bottom: 4px; }
.stat-box-modern h3 { font-size: 18px; font-weight: 800; color: #10B981; }

/* MICROJOBS */
.microjob-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.mj-view-title { font-size: 22px; font-weight: 800; color: #FFFFFF !important; display: flex; align-items: center; gap: 10px; }

.mj-history-btn { 
    background: #1E293B !important; 
    color: #38BDF8 !important; 
    border: 1px solid rgba(56,189,248,0.4) !important; 
    padding: 7px 18px !important; 
    border-radius: 20px !important; 
    font-weight: 700 !important; 
    font-size: 13px !important; 
    display: flex !important; 
    align-items: center !important; 
    gap: 6px !important; 
    cursor: pointer !important; 
}

.mj-post-btn { 
    background: linear-gradient(135deg, #10B981, #059669) !important; 
    color: white !important; 
    border: none !important; 
    padding: 7px 16px !important; 
    border-radius: 20px !important; 
    font-weight: 700 !important; 
    font-size: 12px !important; 
    cursor: pointer !important; 
    display: flex !important; 
    align-items: center !important; 
    gap: 5px !important; 
}

.mj-task-card { 
    background: #1E293B; 
    border: 1px solid rgba(255,255,255,0.08); 
    border-radius: 20px; 
    padding: 18px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 15px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.25); 
    color: #FFFFFF; 
}

.mj-task-name { font-size: 16px; font-weight: 800; color: #FFFFFF; margin-bottom: 6px; }

.mj-task-badge { 
    background: rgba(16, 185, 129, 0.15); 
    color: #10B981; 
    border: 1px solid rgba(16,185,129,0.3); 
    font-weight: 800; 
    font-size: 12px; 
    padding: 4px 10px; 
    border-radius: 12px; 
    display: inline-block; 
}

.mj-limit-badge { 
    background: rgba(245, 158, 11, 0.15); 
    color: #F59E0B; 
    border: 1px solid rgba(245,158,11,0.3); 
    font-weight: 700; 
    font-size: 11px; 
    padding: 3px 8px; 
    border-radius: 8px; 
    margin-left: 6px; 
}

.mj-view-job-btn { 
    background: #4F46E5 !important; 
    color: #FFFFFF !important; 
    border: none !important; 
    padding: 10px 22px !important; 
    border-radius: 14px !important; 
    font-weight: 800 !important; 
    font-size: 13px !important; 
    cursor: pointer !important; 
}

.mj-detail-container { 
    background: #1E293B; 
    border: 1px solid rgba(255,255,255,0.1); 
    border-radius: 28px; 
    padding: 22px 18px; 
    color: #FFFFFF; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
    width: 100%; 
    max-width: 440px; 
    margin: 0 auto; 
}

.mj-detail-title { font-size: 20px; font-weight: 800; color: #FFFFFF; margin-bottom: 8px; }

.mj-detail-reward { 
    background: rgba(16, 185, 129, 0.15); 
    color: #10B981; 
    border: 1px solid #10B981; 
    font-size: 13px; 
    font-weight: 800; 
    padding: 5px 12px; 
    border-radius: 12px; 
    display: inline-block; 
}

.mj-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 16px 0; }
.mj-desc-label { font-size: 13px; font-weight: 700; color: #94A3B8; margin-bottom: 6px; display: block; }

.mj-desc-box { 
    font-size: 13px; 
    font-weight: 600; 
    color: #E2E8F0; 
    line-height: 1.5; 
    margin-bottom: 18px; 
    background: #0F172A; 
    padding: 12px; 
    border-radius: 12px; 
}

.mj-search-copy-box { 
    background: rgba(56, 189, 248, 0.1); 
    border: 1.5px dashed #38BDF8; 
    border-radius: 14px; 
    padding: 12px; 
    margin-bottom: 18px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.mj-search-copy-val { font-size: 14px; font-weight: 800; color: #38BDF8; word-break: break-all; }

.mj-search-copy-btn { 
    background: #38BDF8 !important; 
    color: #000 !important; 
    padding: 6px 14px !important; 
    border-radius: 10px !important; 
    font-size: 12px !important; 
    font-weight: 800 !important; 
    border: none !important; 
    cursor: pointer !important; 
}

.mj-guide-preview-box { 
    text-align: center; 
    margin-bottom: 18px; 
    background: #0F172A; 
    border-radius: 14px; 
    padding: 10px; 
    border: 1px solid rgba(255,255,255,0.08); 
}

.mj-guide-preview-box img { max-height: 150px; border-radius: 10px; object-fit: contain; }
.mj-upload-group { margin-bottom: 15px; }
.mj-upload-label { font-size: 11px; font-weight: 800; color: #94A3B8; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 6px; display: block; }

.mj-file-input-box { 
    background: #0F172A; 
    border: 1.5px solid rgba(255,255,255,0.1); 
    border-radius: 14px; 
    padding: 6px; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.mj-choose-btn { 
    background: #3B82F6 !important; 
    color: #FFFFFF !important; 
    font-size: 12px !important; 
    font-weight: 700 !important; 
    padding: 8px 16px !important; 
    border-radius: 10px !important; 
    cursor: pointer !important; 
    display: inline-block !important; 
    flex-shrink: 0 !important; 
}

.mj-file-name { font-size: 12px; color: #94A3B8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

.mj-submit-task-btn { 
    width: 100% !important; 
    background: #059669 !important; 
    color: #FFFFFF !important; 
    border: none !important; 
    padding: 14px !important; 
    border-radius: 14px !important; 
    font-weight: 800 !important; 
    font-size: 15px !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 8px !important; 
    cursor: pointer !important; 
    margin-top: 20px !important; 
}

.mj-back-btn { 
    background: transparent; 
    border: none; 
    color: #94A3B8; 
    font-weight: 700; 
    font-size: 13px; 
    margin-bottom: 12px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
}

.budget-fee-card { 
    background: #1e1b4b; 
    border: 1.5px solid rgba(255,255,255,0.12); 
    border-radius: 18px; 
    padding: 14px 18px; 
    margin: 15px 0; 
    color: #fff; 
}

.budget-fee-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; }
.budget-fee-row:last-child { margin-bottom: 0; }
.b-val { font-size: 16px; font-weight: 800; }
.b-divider { height: 1px; background: rgba(255,255,255,0.15); margin: 8px 0; }

.mj-cat-chip-container { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 12px; }

.mj-cat-chip { 
    background: #1E293B; 
    border: 1px solid rgba(255,255,255,0.1); 
    color: #CBD5E1; 
    font-size: 12px; 
    font-weight: 600; 
    padding: 6px 12px; 
    border-radius: 16px; 
    cursor: pointer; 
    white-space: nowrap; 
}

.mj-cat-chip.active { background: var(--primary); color: #000; border-color: var(--primary); font-weight: 800; }

/* PROMO & AD */
.promo-premium-card { 
    background: linear-gradient(135deg, #1E1B4B, #311042); 
    border: 2px solid var(--primary); 
    border-radius: 24px; 
    padding: 25px 20px; 
    text-align: center; 
}

.promo-input-box { 
    background: rgba(0,0,0,0.3); 
    border: 2px dashed var(--primary); 
    border-radius: 16px; 
    padding: 12px; 
    margin: 20px 0; 
}

.promo-input-box input { 
    width: 100%; 
    background: transparent; 
    border: none; 
    outline: none; 
    color: #FACC15; 
    font-size: 18px; 
    font-weight: 800; 
    text-align: center; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
}

.promo-claim-btn { 
    width: 100% !important; 
    background: linear-gradient(90deg, #F59E0B, #D97706) !important; 
    color: #000 !important; 
    border: none !important; 
    padding: 14px !important; 
    border-radius: 14px !important; 
    font-size: 16px !important; 
    font-weight: 800 !important; 
    cursor: pointer !important; 
}

.ad-view-card-advanced { 
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); 
    border-radius: 26px; 
    padding: 24px 20px; 
    color: #1E293B; 
    text-align: center; 
    box-shadow: 0 10px 35px rgba(0,0,0,0.18); 
    border: 1.5px solid #E2E8F0; 
}

.ad-gem-wrap { 
    width: 75px; 
    height: 75px; 
    margin: 0 auto 15px auto; 
    background: linear-gradient(135deg, #FEF3C7, #FDE68A); 
    border-radius: 22px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.ad-gem-wrap i { font-size: 38px; color: #D97706; }

/* SPECIAL INCOME STYLES */
.special-view-wrap { max-width: 480px; margin: 0 auto; min-height: 100vh; padding-bottom: 40px; }
.sp-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }

.sp-back-btn { 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    background: rgba(255, 255, 255, 0.15); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: white; 
    cursor: pointer; 
    border: none; 
    font-size: 16px; 
}

.sp-page-title { font-size: 20px; font-weight: 800; color: white; }

.sp-hist-clock-btn { 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    background: rgba(255, 255, 255, 0.15); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: white; 
    cursor: pointer; 
    border: none; 
    font-size: 18px; 
}

.sp-banner-card { 
    border-radius: 20px; 
    padding: 14px 16px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-bottom: 16px; 
    box-shadow: 0 6px 18px rgba(0,0,0,0.25); 
    cursor: pointer; 
}

.sp-banner-left { display: flex; align-items: center; gap: 12px; }

.sp-banner-icon { 
    width: 42px; 
    height: 42px; 
    border-radius: 50%; 
    background: rgba(255,255,255,0.25); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 20px; 
    color: white; 
}

.sp-banner-text h4 { font-size: 15px; font-weight: 800; color: white; margin-bottom: 2px; }
.sp-banner-text p { font-size: 11px; color: rgba(255,255,255,0.85); }

.sp-banner-arrow { 
    width: 32px; 
    height: 32px; 
    border-radius: 50%; 
    background: rgba(255,255,255,0.2); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: white; 
    font-size: 14px; 
}

.sp-white-card { 
    background: #FFFFFF; 
    border-radius: 20px; 
    padding: 18px 16px; 
    margin-bottom: 16px; 
    color: #1E293B; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
}

.sp-card-head { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-size: 16px; 
    font-weight: 800; 
    margin-bottom: 14px; 
    padding-bottom: 10px; 
    border-bottom: 1px dashed #E2E8F0; 
}

.sp-rule-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.sp-rule-item { 
    display: flex; 
    align-items: flex-start; 
    gap: 10px; 
    font-size: 12px; 
    font-weight: 600; 
    color: #475569; 
    line-height: 1.45; 
}

.sp-rule-item i { margin-top: 3px; font-size: 13px; }

.sp-task-card { 
    border-radius: 22px; 
    padding: 20px 18px; 
    color: white; 
    margin-bottom: 16px; 
    box-shadow: 0 8px 24px rgba(0,0,0,0.25); 
}

.sp-task-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.sp-th-left { display: flex; align-items: center; gap: 12px; }

.sp-th-icon { 
    width: 44px; 
    height: 44px; 
    border-radius: 50%; 
    background: rgba(255,255,255,0.2); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 22px; 
}

.sp-th-info h4 { font-size: 16px; font-weight: 800; line-height: 1.3; }
.sp-th-info span { font-size: 11px; opacity: 0.85; }
.sp-th-reward { text-align: right; }
.sp-th-reward h3 { font-size: 20px; font-weight: 900; }
.sp-th-reward p { font-size: 10px; opacity: 0.8; }

.sp-pass-box { 
    background: rgba(255,255,255,0.2); 
    border-radius: 14px; 
    padding: 12px 14px; 
    margin-bottom: 14px; 
    border: 1px dashed rgba(255,255,255,0.3); 
}

.sp-pass-label { font-size: 11px; opacity: 0.85; margin-bottom: 4px; }
.sp-pass-row { display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: 900; letter-spacing: 0.5px; }
.sp-copy-icon { font-size: 20px; cursor: pointer; padding: 4px; }

.sp-pool-row { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; margin-bottom: 6px; }
.sp-pool-bar-bg { width: 100%; height: 8px; background: rgba(255,255,255,0.25); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.sp-pool-bar-fill { height: 100%; background: #FFFFFF; border-radius: 10px; transition: width 0.4s ease; }

.sp-stats-row { 
    display: flex; 
    justify-content: space-around; 
    text-align: center; 
    border-top: 1px dashed rgba(255,255,255,0.2); 
    padding-top: 10px; 
}

.sp-stat-box p { font-size: 10px; opacity: 0.8; margin-bottom: 2px; }
.sp-stat-box h4 { font-size: 17px; font-weight: 900; }

.sp-submit-card { 
    background: #FFFFFF; 
    border-radius: 20px; 
    padding: 20px 16px; 
    color: #1E293B; 
    margin-bottom: 16px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
}

.sp-form-label { font-size: 12px; font-weight: 700; color: #64748B; margin-bottom: 6px; display: block; }

.sp-form-input { 
    width: 100%; 
    padding: 13px 14px; 
    border-radius: 12px; 
    border: 1.5px solid #E2E8F0; 
    background: #F8FAFC; 
    font-size: 13px; 
    font-weight: 600; 
    color: #1E293B; 
    margin-bottom: 14px; 
    outline: none; 
}

.sp-submit-btn { 
    width: 100% !important; 
    border: none !important; 
    padding: 14px !important; 
    border-radius: 14px !important; 
    font-weight: 800 !important; 
    font-size: 15px !important; 
    color: white !important; 
    cursor: pointer !important; 
}

.sp-closed-card { 
    background: #FFFFFF; 
    border-radius: 22px; 
    padding: 35px 20px; 
    text-align: center; 
    color: #1E293B; 
}

.sp-closed-card h3 { font-size: 18px; font-weight: 900; margin-bottom: 20px; color: #0F172A; }
.sp-hourglass-box { font-size: 55px; color: #0284C7; margin-bottom: 20px; animation: spin 4s infinite linear; display: inline-block; }
.sp-closed-card p { font-size: 13px; color: #64748B; font-weight: 600; line-height: 1.6; }

/* TARGET BONUS VIEW */
.tb-view-wrap { max-width: 480px; margin: 0 auto; min-height: auto; padding: 0 0 20px 0; }
.tb-top-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.tb-back-btn { 
    width: 36px; 
    height: 36px; 
    border-radius: 50%; 
    background: rgba(255, 255, 255, 0.15); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: white; 
    cursor: pointer; 
    border: none; 
    font-size: 15px; 
}

.tb-page-title { font-size: 18px; font-weight: 800; color: white; }

.tb-notice-box { 
    background: #FFFFFF; 
    border-radius: 16px; 
    padding: 12px 14px; 
    color: #1E293B; 
    font-size: 12px; 
    font-weight: 600; 
    line-height: 1.5; 
    margin-bottom: 12px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
}

.tb-card { 
    border-radius: 20px; 
    padding: 16px 14px; 
    color: white; 
    box-shadow: 0 8px 24px rgba(0,0,0,0.25); 
    position: relative; 
}

.tb-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.tb-ch-left { display: flex; align-items: center; gap: 10px; }

.tb-ch-icon { 
    width: 38px; 
    height: 38px; 
    border-radius: 50%; 
    background: rgba(255,255,255,0.25); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 18px; 
    color: white; 
}

.tb-ch-info h3 { font-size: 16px; font-weight: 800; line-height: 1.2; }
.tb-ch-info p { font-size: 11px; opacity: 0.85; }
.tb-ch-right { text-align: right; }
.tb-ch-right h2 { font-size: 18px; font-weight: 900; }
.tb-ch-right p { font-size: 10px; opacity: 0.85; }

.tb-timer-card { 
    background: rgba(255, 255, 255, 0.2); 
    border-radius: 12px; 
    padding: 8px 10px; 
    text-align: center; 
    margin-bottom: 10px; 
    backdrop-filter: blur(4px); 
}

.tb-timer-label { font-size: 10px; opacity: 0.85; margin-bottom: 1px; }
.tb-timer-digits { font-size: 16px; font-weight: 900; letter-spacing: 0.5px; }

.tb-prog-info { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; margin-bottom: 4px; }
.tb-prog-bg { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.25); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.tb-prog-fill { height: 100%; background: #FFFFFF; border-radius: 10px; transition: width 0.4s ease; }

.tb-stats-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    text-align: center; 
    border-top: 1px dashed rgba(255,255,255,0.2); 
    padding-top: 10px; 
    margin-bottom: 12px; 
}

.tb-stat-cell p { font-size: 10px; opacity: 0.85; margin-bottom: 2px; }
.tb-stat-cell h4 { font-size: 16px; font-weight: 900; }

.tb-claim-btn { 
    width: 100% !important; 
    background: #FFFFFF !important; 
    border: none !important; 
    padding: 11px !important; 
    border-radius: 12px !important; 
    font-size: 14px !important; 
    font-weight: 800 !important; 
    cursor: pointer !important; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important; 
    transition: 0.2s; 
}

.tb-claim-btn:active { transform: scale(0.97); }
.tb-claim-btn.disabled { opacity: 0.6; cursor: not-allowed; }

/* COURSES */
.courses-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 20px; }

.course-card-item { 
    background: #1E293B; 
    border-radius: 20px; 
    overflow: hidden; 
    border: 1px solid rgba(255,255,255,0.08); 
}

.course-thumb-box { width: 100%; aspect-ratio: 16/9; background: #000; position: relative; overflow: hidden; }
.course-thumb-box img { width: 100%; height: 100%; object-fit: cover; }

.course-price-badge { 
    position: absolute; 
    top: 12px; 
    right: 12px; 
    background: var(--primary); 
    color: #000; 
    font-weight: 900; 
    font-size: 13px; 
    padding: 4px 12px; 
    border-radius: 20px; 
}

.course-body { padding: 16px; color: white; }
.course-title { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.course-desc { font-size: 12px; color: #CBD5E1; margin-bottom: 12px; line-height: 1.5; }

.course-footer-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-top: 1px solid rgba(255,255,255,0.08); 
    padding-top: 10px; 
}

.course-buy-btn { 
    background: linear-gradient(90deg, #10B981, #059669) !important; 
    color: white !important; 
    border: none !important; 
    padding: 8px 18px !important; 
    border-radius: 12px !important; 
    font-weight: 800 !important; 
    font-size: 13px !important; 
    cursor: pointer !important; 
}

/* PUBLIC LANDING PAGE */
#public-landing-page { 
    display: none; 
    background: #0B1120; 
    color: #F8FAFC; 
    min-height: 100vh; 
    overflow-x: hidden; 
    user-select: auto; 
}

.pub-nav { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 70px; 
    background: rgba(11, 17, 32, 0.95); 
    backdrop-filter: blur(14px); 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 0 5%; 
    z-index: 10000; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); 
}

.pub-logo { 
    font-size: 22px; 
    font-weight: 900; 
    color: #FFF; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    text-decoration: none; 
}

.pub-logo i { color: #38BDF8; font-size: 24px; }
.pub-nav-links { display: flex; align-items: center; gap: 24px; }
.pub-nav-links a { color: #CBD5E1; text-decoration: none; font-size: 14px; font-weight: 600; transition: color 0.2s; }
.pub-nav-links a:hover { color: var(--primary); }
.pub-nav-actions { display: flex; align-items: center; gap: 12px; }

.pub-btn-login { 
    background: transparent !important; 
    border: 1.5px solid var(--primary) !important; 
    color: var(--primary) !important; 
    padding: 8px 20px !important; 
    border-radius: 12px !important; 
    font-weight: 800 !important; 
    font-size: 13px !important; 
    cursor: pointer !important; 
    transition: 0.2s; 
}

.pub-btn-login:hover { background: var(--primary) !important; color: #000 !important; }

.pub-btn-signup { 
    background: linear-gradient(90deg, #F59E0B, #D97706) !important; 
    color: #000 !important; 
    border: none !important; 
    padding: 9px 22px !important; 
    border-radius: 12px !important; 
    font-weight: 800 !important; 
    font-size: 13px !important; 
    cursor: pointer !important; 
    text-decoration: none; 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); 
}

.pub-hero-section { 
    padding: 140px 5% 70px; 
    text-align: center; 
    background: radial-gradient(circle at 50% 20%, #1e1b4b 0%, #0B1120 70%); 
    position: relative; 
}

.pub-badge-tag { 
    background: rgba(245, 158, 11, 0.12); 
    color: #F59E0B; 
    border: 1px solid rgba(245, 158, 11, 0.3); 
    padding: 6px 18px; 
    border-radius: 25px; 
    font-size: 13px; 
    font-weight: 800; 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    margin-bottom: 24px; 
}

.pub-hero-title { 
    font-size: clamp(32px, 5vw, 56px); 
    font-weight: 900; 
    color: #FFFFFF; 
    line-height: 1.25; 
    margin-bottom: 20px; 
    letter-spacing: -0.5px; 
}

.pub-hero-title span { 
    background: linear-gradient(90deg, #F59E0B, #38BDF8); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

.pub-hero-sub { 
    font-size: clamp(14px, 2vw, 18px); 
    color: #94A3B8; 
    max-width: 720px; 
    margin: 0 auto 35px; 
    line-height: 1.7; 
}

.pub-hero-cta-group { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-bottom: 50px; }

.pub-cta-primary { 
    background: linear-gradient(90deg, #F59E0B, #D97706) !important; 
    color: #000 !important; 
    border: none !important; 
    padding: 16px 36px !important; 
    border-radius: 16px !important; 
    font-size: 16px !important; 
    font-weight: 900 !important; 
    cursor: pointer !important; 
    display: inline-flex; 
    align-items: center; 
    gap: 10px; 
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4); 
    text-decoration: none; 
}

.pub-cta-secondary { 
    background: rgba(30, 41, 59, 0.8) !important; 
    color: #FFFFFF !important; 
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important; 
    padding: 16px 32px !important; 
    border-radius: 16px !important; 
    font-size: 16px !important; 
    font-weight: 800 !important; 
    cursor: pointer !important; 
    display: inline-flex; 
    align-items: center; 
    gap: 10px; 
}

.pub-stats-ribbon { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 20px; 
    max-width: 1100px; 
    margin: 0 auto; 
    background: rgba(30, 41, 59, 0.7); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 24px; 
    padding: 25px 20px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
}

.pub-stat-cell h3 { font-size: 28px; font-weight: 900; color: #F59E0B; margin-bottom: 4px; }
.pub-stat-cell p { font-size: 13px; color: #94A3B8; font-weight: 600; }
.pub-section { padding: 90px 5%; max-width: 1200px; margin: 0 auto; }
.pub-section-header { text-align: center; margin-bottom: 50px; }
.pub-section-header h2 { font-size: clamp(26px, 3.5vw, 38px); font-weight: 900; margin-bottom: 12px; color: #FFFFFF; }
.pub-section-header p { font-size: 15px; color: #94A3B8; max-width: 600px; margin: 0 auto; line-height: 1.6; }

.pub-footer { 
    background: #070B14; 
    border-top: 1px solid rgba(255, 255, 255, 0.08); 
    padding: 60px 5% 30px; 
    color: #64748B; 
    font-size: 13px; 
}

.pub-footer-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 35px; 
    max-width: 1200px; 
    margin: 0 auto 40px; 
}

.pub-footer-col h4 { color: #FFFFFF; font-size: 15px; font-weight: 800; margin-bottom: 16px; }
.pub-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pub-footer-col a { color: #94A3B8; text-decoration: none; transition: color 0.2s; }
.pub-footer-col a:hover { color: var(--primary); }
.pub-footer-bottom { text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 25px; }

@media (max-width: 768px) {
    .pub-nav-links { display: none; }
    .pub-hero-section { padding-top: 110px; }
}