:root {
            --bg-color: #f6f8fb;
            --surface: #ffffff;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --primary-color: #2563eb; 
            --primary-hover: #1d4ed8;
            --danger: #ef4444;
            --danger-bg: #fef2f2;
            --border: #e2e8f0;
            --card-bg: #f1f5f9;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-primary);
            font-family: 'Inter', sans-serif;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .login-card {
            background: var(--surface);
            width: 100%;
            max-width: 400px;
            padding: 40px 24px;
            border-radius: 24px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.04);
            border: 1px solid var(--border);
            animation: slideUp 0.4s ease forwards;
        }

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

        .logo-wrap {
            text-align: center;
            margin-bottom: 16px;
        }

        .logo-wrap img {
            width: 75px;
            height: 75px;
            border-radius: 20px;
            object-fit: cover;
            border: 2px solid var(--card-bg);
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }

        .brand-name {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 24px;
            font-weight: 800;
            color: var(--text-primary);
            text-align: center;
            margin-bottom: 6px;
            letter-spacing: -0.5px;
        }

        .subtitle {
            font-size: 14px;
            color: var(--text-secondary);
            text-align: center;
            font-weight: 500;
            margin-bottom: 30px;
        }

        .err-alert {
            display: none;
            align-items: flex-start;
            gap: 10px;
            background: var(--danger-bg);
            border: 1px solid #fecaca;
            border-radius: 14px;
            padding: 12px 16px;
            margin-bottom: 20px;
            animation: shake 0.4s ease;
        }
        .err-alert.show { display: flex; }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-5px); }
            60% { transform: translateX(5px); }
        }

        .err-icon {
            color: var(--danger);
            font-size: 16px;
            margin-top: 1px;
        }
        .err-text {
            font-size: 13px;
            font-weight: 600;
            color: var(--danger);
            line-height: 1.5;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .input-wrap {
            position: relative;
        }

        .input-icon {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-secondary);
            font-size: 18px;
            transition: 0.2s;
        }

        .form-input {
            width: 100%;
            height: 55px;
            background: var(--card-bg);
            border: 2px solid transparent;
            border-radius: 16px;
            padding: 0 16px 0 44px;
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
            outline: none;
            transition: 0.2s;
        }

        .form-input::placeholder {
            color: #94a3b8;
            font-weight: 500;
        }

        .form-input:focus {
            background: var(--surface);
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(37,99,235,0.1);
        }

        .form-input:focus + .input-icon {
            color: var(--primary-color);
        }

        .form-input.has-error {
            border-color: var(--danger);
            background: var(--danger-bg);
        }

        .field-err-text {
            display: none;
            font-size: 12px;
            color: var(--danger);
            margin-top: 6px;
            padding-left: 4px;
            align-items: center;
            gap: 4px;
            font-weight: 600;
        }

        .form-input.has-error ~ .field-err-text { display: flex; }

        .pw-toggle {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-secondary);
            font-size: 18px;
            cursor: pointer;
            transition: 0.2s;
        }
        .pw-toggle:hover { color: var(--text-primary); }

        .opt-row {
            display: flex;
            align-items: flex-start;
            margin-bottom: 24px;
        }

        .chk-wrap {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            cursor: pointer;
            user-select: none;
        }

        .chk-native { display: none; }

        .chk-box {
            width: 20px;
            height: 20px;
            border: 2px solid var(--text-secondary);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.2s;
            margin-top: 2px;
        }

        .chk-box i {
            font-size: 12px;
            color: white;
            opacity: 0;
            transform: scale(0.5);
            transition: 0.2s;
        }

        .chk-native:checked + .chk-box {
            background: var(--primary-color);
            border-color: var(--primary-color);
        }

        .chk-native:checked + .chk-box i {
            opacity: 1;
            transform: scale(1);
        }

        .chk-lbl {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        .chk-lbl button {
            color: var(--primary-color);
            font-weight: 700;
            text-decoration: underline;
        }

        .btn-submit {
            width: 100%;
            height: 55px;
            border-radius: 16px;
            background: var(--primary-color);
            color: white;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 800;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 6px 15px rgba(37,99,235,0.25);
            transition: 0.2s;
        }

        .btn-submit:active { transform: scale(0.98); }
        
        .btn-submit:disabled {
            background: var(--card-bg);
            color: #94a3b8;
            box-shadow: none;
            cursor: not-allowed;
            border: 1px solid var(--border);
        }

        .spinner {
            display: none;
            animation: spin 1s linear infinite;
        }
        @keyframes spin { 100% { transform: rotate(360deg); } }

        .divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 24px 0;
        }

        .div-line { flex: 1; height: 1px; background: var(--border); }
        .div-text { font-size: 13px; font-weight: 600; color: var(--text-secondary); }

        .reg-block { text-align: center; }
        .reg-block p { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
        .reg-block a { color: var(--primary-color); font-weight: 700; text-decoration: none; transition: 0.2s; }
        .reg-block a:hover { color: var(--primary-hover); }

        .sheet-backdrop {
            position: fixed; inset: 0; background: rgba(15,23,42,0.5); backdrop-filter: blur(3px);
            z-index: 9000; opacity: 0; visibility: hidden; transition: 0.3s;
        }
        .sheet-backdrop.open { opacity: 1; visibility: visible; }

        .bottom-sheet {
            position: fixed; left: 0; right: 0; bottom: 0; z-index: 9001; background: var(--surface);
            border-radius: 24px 24px 0 0; box-shadow: 0 -8px 40px rgba(0,0,0,0.1); max-height: 70vh;
            display: flex; flex-direction: column; transform: translateY(100%); transition: 0.3s cubic-bezier(0.16,1,0.3,1);
        }
        .bottom-sheet.open { transform: translateY(0); }

        .sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 14px auto 0; }
        
        .sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
        .sheet-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 800; color: var(--text-primary); }
        .sheet-close { font-size: 20px; color: var(--text-secondary); }

        .sheet-body { overflow-y: auto; padding: 20px; line-height: 1.6; font-size: 14px; color: var(--text-secondary); }
        .sheet-body h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 800; color: var(--text-primary); margin: 16px 0 8px; }
        .sheet-body h3:first-child { margin-top: 0; }
        .sheet-body ul { padding-left: 20px; margin-bottom: 10px; }

:root {
    --bg: #07070c;
    --bg-2: #0b0b12;
    --surface: #11111a;
    --surface-2: #171722;
    --surface-3: #1d1d2a;
    --text: #f7f7fb;
    --muted: #9292aa;
    --line: rgba(255,255,255,.08);
    --oi-orange: #ff7a00;
    --oi-orange-2: #ffb347;
    --gold: #f59e0b;
    --gold-2: #fcd34d;
    --green: #10b981;
    --red: #ef4444;
    --shadow: 0 22px 60px rgba(0,0,0,.38);
    --radius: 22px;
}
html {
    background: var(--bg);
    scroll-behavior: smooth;
}
body {
    background:
        radial-gradient(circle at 15% -10%, rgba(139,92,246,.20), transparent 32%),
        radial-gradient(circle at 90% 10%, rgba(245,158,11,.12), transparent 28%),
        linear-gradient(180deg, #090910 0%, #07070c 100%) !important;
    color: var(--text) !important;
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 75%);
}
a {
    color: inherit;
}
.container,
.dashboard-container {
    width: min(100% - 28px, 720px) !important;
    margin-inline: auto !important;
}
.top-header,
.topbar,
header {
    background: rgba(12,12,19,.84) !important;
    border-color: var(--line) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.22) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.header-brand,
.top-title,
.service-header,
.page-title {
    color: var(--text) !important;
    font-weight: 800 !important;
    letter-spacing: -.025em;
}
.header-brand img,
.nav-profile img,
.avatar-img {
    border-color: rgba(167,139,250,.28) !important;
    box-shadow: 0 0 0 4px rgba(139,92,246,.08), 0 10px 30px rgba(0,0,0,.28);
}
.card,
.panel,
.section,
.action-card,
.task-card,
.history-card,
.member-card,
.info-card,
.summary-card,
.total-assets-card,
.balance-card-new,
.s-card,
.profile-header,
.team-hero,
.game-card,
.code-section,
.history-item,
.support-card,
.free-card,
.pending-card,
.closed-card,
.form-section,
.method-card,
.pay-type-card,
.inst-card,
.auto-banner,
.disabled-banner,
.week-info,
.no-plan,
.limit-box {
    background: linear-gradient(145deg, rgba(24,24,35,.96), rgba(14,14,22,.96)) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
    box-shadow: var(--shadow) !important;
}
.action-card,
.task-card,
.member-card,
.method-card,
.pay-type-card,
.history-card,
.info-card,
.s-card {
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
.action-card:hover,
.task-card:hover,
.member-card:hover,
.method-card:hover,
.pay-type-card:hover,
.history-card:hover,
.s-card:hover {
    transform: translateY(-3px);
    border-color: rgba(139,92,246,.35) !important;
    box-shadow: 0 24px 55px rgba(0,0,0,.42) !important;
}
.balance-card-new,
.total-assets-card,
.team-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 0%, rgba(245,158,11,.22), transparent 36%),
        radial-gradient(circle at 10% 100%, rgba(139,92,246,.25), transparent 42%),
        linear-gradient(135deg, #171324, #0e0e17) !important;
}
.balance-card-new::after,
.total-assets-card::after,
.team-hero::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: -65px;
    top: -75px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 50%;
    box-shadow: 0 0 0 24px rgba(255,255,255,.018), 0 0 0 48px rgba(255,255,255,.012);
}
.bc-lbl,
.bc-info,
.st-lbl,
.sc-title,
.section-title,
.sec-label,
.form-label,
.hc-date,
.hc-title,
.member-plan,
.task-desc,
.support-text,
.week-info,
.empty-state,
.history-date,
.history-name {
    color: var(--muted) !important;
}
.bc-amt,
.st-val,
.sc-num,
.s-price,
.hc-amount,
.bonus-amount-big,
.my-plan-price,
.task-reward,
.history-amount,
.bdt-amount {
    color: var(--gold-2) !important;
}
.bc-btn,
.ipg-btn,
.btn-primary,
.btn-submit,
.btn-open,
.btn-done,
.btn-claim,
.submit,
.s-btn-buy,
.action-btn {
    background: linear-gradient(135deg, var(--oi-orange), #6d3fe3) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 12px 28px rgba(139,92,246,.25) !important;
}
.bc-btn:hover,
.ipg-btn:hover,
.btn-primary:hover,
.btn-submit:hover,
.btn-open:hover,
.btn-done:hover,
.btn-claim:hover,
.submit:hover,
.s-btn-buy:hover,
.action-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
input,
select,
textarea,
.form-input,
.input,
.input-wrap input {
    background: rgba(255,255,255,.045) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}
input::placeholder,
textarea::placeholder {
    color: #68687d !important;
}
input:focus,
select:focus,
textarea:focus,
.form-input:focus {
    border-color: rgba(139,92,246,.65) !important;
    box-shadow: 0 0 0 4px rgba(139,92,246,.10) !important;
}
.icon-circle,
.qa-icon,
.history-icon,
.hc-icon-box,
.member-avatar,
.support-icon,
.modal-icon-wrap {
    background: linear-gradient(145deg, rgba(139,92,246,.20), rgba(245,158,11,.10)) !important;
    color: var(--oi-orange-2) !important;
    border-color: rgba(139,92,246,.18) !important;
}
.status-badge,
.status-chip,
.s-badge-bought,
.code-status,
.stat-pill {
    border-color: rgba(255,255,255,.08) !important;
}
.filter-chips,
.filter-scroll,
.summary-bar,
.sb-row,
.sc-grid,
.intro-stats,
.qa-grid {
    border-color: var(--line) !important;
}
.back-btn,
.hamburger-btn,
.icon-btn,
.btn-icon,
.edit-btn,
.hist-trigger,
.top-action,
.popup-close-btn {
    background: rgba(255,255,255,.055) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
}
.bottom-nav-wrapper,
.bottom-nav {
    position: fixed !important;
    left: 50% !important;
    bottom: 12px !important;
    transform: translateX(-50%) !important;
    width: min(calc(100% - 20px), 680px) !important;
    height: 74px !important;
    padding: 8px !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    align-items: stretch !important;
    gap: 5px !important;
    background: rgba(16,16,24,.90) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 24px !important;
    box-shadow: 0 22px 55px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    z-index: 1000 !important;
}
.nav-item {
    position: relative !important;
    width: auto !important;
    min-width: 0 !important;
    height: 58px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 0 4px !important;
    border-radius: 18px !important;
    color: #77778e !important;
    text-decoration: none !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .03em !important;
    transition: .2s ease !important;
}
.nav-item i {
    font-size: 20px !important;
    line-height: 1 !important;
    margin: 0 !important;
}
.nav-item.active {
    color: #fff !important;
    background: linear-gradient(145deg, rgba(139,92,246,.24), rgba(245,158,11,.10)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.18) !important;
}
.nav-item.active i {
    color: var(--gold-2) !important;
    filter: drop-shadow(0 0 8px rgba(245,158,11,.35));
}
.nav-item:active {
    transform: scale(.96);
}
body {
    padding-bottom: 104px !important;
}
.modal-overlay,
.hist-overlay,
.ipg-overlay,
.edit-overlay,
.sidebar-overlay {
    background: rgba(0,0,0,.72) !important;
    backdrop-filter: blur(10px) !important;
}
.modal-box,
.hist-panel,
.ipg-popup,
.edit-panel,
.sidebar {
    background: linear-gradient(160deg, #181821, #0f0f16) !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.6) !important;
}
.modal-box p,
.sheet-body,
.sheet-body p,
.hist-date,
.hist-type-icon,
.input-hint,
.form-label small {
    color: var(--muted) !important;
}
.empty-icon {
    color: var(--oi-orange-2) !important;
    opacity: .75;
}
.toast-container > *,
.toast {
    border: 1px solid var(--line) !important;
    background: #171720 !important;
    color: var(--text) !important;
}
@media (max-width: 480px) {
    .container,
    .dashboard-container {
        width: min(100% - 20px, 720px) !important;
    }
    .bottom-nav-wrapper,
    .bottom-nav {
        width: calc(100% - 14px) !important;
        bottom: 7px !important;
        height: 70px !important;
        border-radius: 22px !important;
    }
    .nav-item {
        height: 54px !important;
        font-size: 9px !important;
    }
    .nav-item i {
        font-size: 19px !important;
    }
}



html { scroll-behavior: auto; }
.topbar, .bottom-nav, .drawer, .drawer-backdrop, .overlay { transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.task-card, .service, .history-card, .action-card, .form-section, .quick-card, .stat-pill { backface-visibility: hidden; -webkit-backface-visibility: hidden; }