/* =================================
   GLOBAL SETTINGS
================================= */

*{
    box-sizing:border-box;
}

body{
    margin:0;
    padding-bottom:90px;
    background:#f5f3fb;
    font-family:'Segoe UI',Arial,sans-serif;
    color:#222;
}


a{
    text-decoration:none;
}


.text-purple{
    color:#6d35ff !important;
}


/* =================================
   COMMON CARDS
================================= */

.card{

    border:none;
    border-radius:22px;
    overflow:hidden;
}


.shadow-card{

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}



/* =================================
   HEADER
================================= */

.top-card{

    background:#fff;
    border-radius:20px;
    padding:15px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    box-shadow:0 8px 25px rgba(0,0,0,.06);

}


/* ===============================
 PREMIUM DASHBOARD CARD
================================ */


.dashboard-card{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(135deg,#5f2cff,#a855f7);

    border-radius:35px;

    padding:35px 20px;

    box-shadow:
    0 20px 45px rgba(109,53,255,.35);

}



/* shine effect */

.dashboard-card:before{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    background:rgba(255,255,255,.15);

    border-radius:50%;

    top:-100px;

    right:-80px;

}




/* Balance */


.balance-header{

    position:relative;

    text-align:center;

    color:white;

}



.coin-circle{

    width:100px;

    height:100px;

    margin:auto;

    background:
    rgba(255,255,255,.25);

    backdrop-filter:blur(10px);

    border-radius:50%;

    padding:18px;

    box-shadow:
    0 10px 25px rgba(0,0,0,.15);

}



.coin-circle img{

    width:100%;

}



.balance-header p{


    margin-bottom:5px;

    color:#eee;

    font-size:14px;

}



.balance-header h1{

    font-size:52px;

    font-weight:900;

    margin:0;

}



.wallet-status{

    display:inline-block;

    margin-top:10px;

    padding:7px 15px;

    border-radius:20px;

    background:rgba(255,255,255,.2);

    font-size:12px;

}



/* Stats */


.stats-row{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:12px;

    margin-top:30px;

}



.stat-glass{

    background:

    rgba(255,255,255,.18);

    backdrop-filter:blur(10px);

    border-radius:20px;

    padding:15px 5px;

    text-align:center;

    color:white;

}



.stat-glass i{

    font-size:23px;

    margin-bottom:8px;

}



.stat-glass h6{

    margin:5px;

    font-size:17px;

    font-weight:800;

}



.stat-glass small{

    color:#eee;

}



.action-row{
    display:flex;
    gap:12px;
    margin-top:30px;
}

.action-row a{
    flex:1;
}

.buy-btn,
.refer-btn{
    width:100%;
    height:58px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:700;
    font-size:16px;
    text-decoration:none;
}

.buy-btn{
    background:#fff;
    color:#6d35ff;
}

.refer-btn{
    background:#18b56b;
    color:#fff;
}



@media(max-width:768px){


.balance-header h1{

    font-size:40px;

}


.coin-circle{

    width:80px;

    height:80px;

}


.stats-row{

    gap:8px;

}


.stat-glass{

    padding:12px 3px;

}


.stat-glass h6{

    font-size:14px;

}


.action-row{

    gap:8px;

}


.buy-btn,
.refer-btn{

    font-size:13px;

    height:52px;

}


}


/* =================================
   MINI STAT BOX
================================= */


.mini-box{

    background:rgba(255,255,255,.18);

    border-radius:18px;

    padding:15px 5px;

    color:#fff;

}


.mini-box i{

    font-size:22px;

    margin-bottom:8px;

}


.mini-box h6{

    margin:5px 0;

    font-size:16px;

    font-weight:700;

}


.mini-box small{

    color:#eee;

    font-size:12px;

}



/* =================================
   DASHBOARD BUTTON
================================= */


.dashboard-btn{

    height:55px;

    border-radius:18px;

    font-weight:700;

    font-size:16px;

}


.dashboard-btn i{

    margin-right:7px;

}



/* =================================
   INFO CARDS (3 BUTTONS EQUAL SIZE)
================================= */


/* INFO CARDS */

.row.g-3 > .col-4{
    display:flex;
    align-items:stretch;
}

.row.g-3 > .col-4 > a{
    width:100%;
    display:flex;
}


.info-card{

    background:#fff;

    width:100%;
    height:130px;

    padding:15px 8px;

    text-align:center;

    border-radius:22px;

    box-shadow:0 8px 25px rgba(0,0,0,.06);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}


/* ICON */

.info-card i{

    font-size:28px;

    margin-bottom:8px;

}


/* TITLE */

.info-card h5{

    font-weight:800;

    font-size:15px;

    margin:3px 0;

    line-height:22px;

}


/* TEXT */

.info-card p{

    margin:0;

    color:#777;

    font-size:12px;

    line-height:18px;

}



/* MOBILE */

@media(max-width:768px){


.row.g-3 > .col-4{
    padding-left:5px;
    padding-right:5px;
}


.info-card{

    height:115px;
    min-height:115px;

    padding:8px 4px;

}


.info-card i{

    font-size:22px;
    margin-bottom:5px;

}


.info-card h5{

    font-size:12px;
    line-height:18px;

}


.info-card p{

    font-size:10px;
    line-height:14px;

}

}


.table{

    border-radius:15px;

    overflow:hidden;

}


.table thead{

    background:#f1eaff;

}


.table th{

    color:#6d35ff;

    font-weight:700;

}


.table td{

    vertical-align:middle;

}



.badge{

    padding:8px 14px;

    border-radius:20px;

    font-size:13px;

}



/* =================================
   BUTTONS
================================= */


.btn-success{

    background:#18b56b;

    border:none;

}


.btn-success:hover{

    background:#109458;

}


.btn{

    transition:.3s;

}


.btn:hover{

    transform:translateY(-2px);

}



/* =================================
   BOTTOM NAVIGATION
================================= */


.bottom-nav{

    position:fixed;

    left:0;

    bottom:0;

    width:100%;

    background:#fff;

    padding:12px 5px;

    display:flex;

    justify-content:space-around;

    align-items:center;

    border-radius:25px 25px 0 0;

    box-shadow:
    0 -5px 25px rgba(0,0,0,.12);

    z-index:999;

}



.bottom-nav a{

    color:#888;

    text-align:center;

    font-size:12px;

    display:flex;

    flex-direction:column;

    align-items:center;

}



.bottom-nav i{

    font-size:22px;

    margin-bottom:4px;

}



.bottom-nav .active{

    color:#6d35ff;

    font-weight:700;

}



/* =================================
   ANIMATION
================================= */


.dashboard-card,
.info-card,
.card{

    animation:fadeUp .4s ease;

}



@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* =================================
   MOBILE RESPONSIVE
================================= */


@media(max-width:768px){


    body{

        padding-bottom:85px;

    }


    .container{

        padding-left:12px;

        padding-right:12px;

    }


    .dashboard-card{

        padding:25px 15px;

        border-radius:25px;

    }


    .balance-text{

        font-size:38px;

    }


    .dashboard-logo{

        width:75px;

        height:75px;

    }


    .mini-box{

        padding:12px 3px;

    }


    .mini-box h6{

        font-size:14px;

    }


    .dashboard-btn{

        height:50px;

        font-size:14px;

    }


 


    .bottom-nav{

        padding:10px 0;

    }


    .bottom-nav i{

        font-size:19px;

    }

}
/* =================================
   LOGIN PAGE
================================= */


.login-card{

    border:none;

    border-radius:25px;

    background:#fff;

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);

}


.login-card .card-body{

    padding:35px;

}



.login-card img{

    background:#6d35ff;

    padding:15px;

    border-radius:50%;

}



.login-card h2{

    font-size:32px;

    font-weight:800;

}



.login-card p{

    color:#777;

}



.input-group-text{

    background:#6d35ff;

    color:#fff;

    border:none;

}



.form-control{

    height:52px;

    border-radius:0 12px 12px 0;

    border:1px solid #ddd;

}



.form-control:focus{

    border-color:#6d35ff;

    box-shadow:0 0 0 .15rem rgba(109,53,255,.15);

}



.login-card .btn-success{

    height:55px;

    border-radius:15px;

    font-weight:700;

    font-size:18px;

}






.withdraw-page{

    background:#f7f3ff;

}



.main-card{

    background:#f8edff;

    border-radius:30px;

    padding:30px 20px;

    text-align:center;

    box-shadow:
    0 10px 25px rgba(0,0,0,.06);

}



.balance-label{

    display:inline-block;

    background:#eadcff;

    color:#6d35ff;

    padding:10px 25px;

    border-radius:20px;

    font-weight:700;

}



.balance-price{

    font-size:65px;

    font-weight:900;

    margin:20px 0;

}



.exchange-btn{

    width:100%;

    height:60px;

    border:none;

    border-radius:25px;

    background:#46b5ef;

    color:#fff;

    font-size:22px;

    font-weight:700;

}



.form-card{

    background:#fff;

    padding:25px;

    border-radius:25px;

    box-shadow:
    0 8px 25px rgba(0,0,0,.08);

}



.amount-input{

    height:70px;

    text-align:center;

    font-size:32px;

    font-weight:800;

    border-radius:20px;

}



.withdraw-btn{

    height:58px;

    width:100%;

    border:none;

    border-radius:30px;

    background:#ff9800;

    color:#fff;

    font-size:20px;

    font-weight:700;

}




/* =================================
   FRIENDS PAGE
================================= */


.invite-box{

    background:#f1e8ff;

    padding:18px;

    border-radius:20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.invite-box span{

    color:#6d35ff;

    font-size:22px;

    font-weight:800;

}



.invite-box button{

    background:#6d35ff;

    border:none;

    color:white;

    padding:10px 20px;

    border-radius:25px;

}



.stat-box{

    background:#fff;

    padding:18px 5px;

    border-radius:20px;

    text-align:center;

    box-shadow:
    0 5px 15px rgba(0,0,0,.05);

}



.stat-box h3{

    color:#6d35ff;

    font-weight:800;

}



.stat-box p{

    color:#777;

    font-size:13px;

}



.empty-friend{

    text-align:center;

    padding:40px;

    color:#999;

}



.empty-friend i{

    font-size:60px;

    color:#d8c5ff;

}




/* =================================
   RANK PAGE
================================= */


.rank-icon{

    height:90px;

    width:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ffe8a3;

    color:#ff9800;

    font-size:45px;

}



.progress-box{

    background:#fff;

    padding:20px;

    border-radius:20px;

}



.progress{

    height:12px;

    border-radius:20px;

}



.progress-bar{

    background:#ff9800;

}



.rank-list{

    background:#fff;

    padding:18px;

    border-radius:20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

}



.rank-list i{

    color:#ff9800;

}



.rank-list span{

    color:#777;

}



.active-rank{

    background:#eadcff;

    color:#6d35ff;

}




/* =================================
   INTRODUCTION PAGE
================================= */


.intro-icon{

    width:90px;

    height:90px;

    background:#eadcff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    color:#6d35ff;

    font-size:45px;

}



.intro-item{

    background:#fff;

    padding:18px;

    border-radius:20px;

    display:flex;

    gap:15px;

    align-items:center;

    margin-top:15px;

    box-shadow:
    0 5px 15px rgba(0,0,0,.05);

}



.intro-item i{

    font-size:25px;

    color:#6d35ff;

}



.intro-item h6{

    font-weight:800;

    margin:0;

}



.intro-item p{

    color:#777;

    margin:5px 0 0;

    font-size:14px;

}



.feature-box{

    background:#f1e8ff;

    padding:15px;

    border-radius:18px;

    margin-top:12px;

    font-weight:600;

}



.feature-box i{

    color:#6d35ff;

    margin-right:10px;

}



/* =================================
   FINAL MOBILE FIX
================================= */


@media(max-width:768px){


    .login-card .card-body{

        padding:25px 18px;

    }


    .login-card h2{

        font-size:26px;

    }


    .balance-price{

        font-size:45px;

    }


    .exchange-btn{

        font-size:18px;

    }


    .amount-input{

        font-size:25px;

    }


    .invite-box span{

        font-size:18px;

    }


    .rank-icon{

        width:70px;

        height:70px;

        font-size:32px;

    }


    .intro-icon{

        width:70px;

        height:70px;

        font-size:32px;

    }


}
/* =================================
 PREMIUM HEADER
================================= */


.top-card{

    background:#ffffff;

    border-radius:25px;

    padding:12px 15px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

}



/* Earn Box */


.earning-box{

    display:flex;

    align-items:center;

    gap:12px;

}


.earning-icon{

    width:48px;

    height:48px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    linear-gradient(135deg,#ffd54f,#ff9800);

    color:white;

    font-size:22px;

}



.earning-box small{

    color:#888;

    font-size:12px;

}



.earning-box h6{

    margin:3px 0 0;

    font-size:20px;

    font-weight:800;

    color:#16a34a;

}



/* Actions */


.top-actions{

    display:flex;

    gap:12px;

}



.header-action{

    text-decoration:none;

    color:#555;

    text-align:center;

    font-size:11px;

    font-weight:600;

}



.header-icon{

    width:42px;

    height:42px;

    border-radius:15px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    margin:auto;

    font-size:17px;

    transition:.3s;

}



.header-action:hover .header-icon{

    transform:translateY(-4px);

}




/* Colors */


.deposit .header-icon{

    background:
    linear-gradient(135deg,#2563eb,#38bdf8);

}



.withdraw .header-icon{

    background:
    linear-gradient(135deg,#f59e0b,#fb7185);

}



.support .header-icon{

    background:
    linear-gradient(135deg,#0088cc,#38bdf8);

}



/* Mobile */


@media(max-width:768px){


.top-card{

    padding:12px;

}



.earning-icon{

    width:42px;

    height:42px;

    font-size:18px;

}



.earning-box h6{

    font-size:16px;

}



.top-actions{

    gap:8px;

}



.header-icon{

    width:38px;

    height:38px;

    border-radius:12px;

    font-size:15px;

}


.header-action span{

    font-size:10px;

}


}
.cube-img{
    width:70px;
    height:70px;
    object-fit:contain;
}
.dashboard-card {

    position:relative;
    overflow:hidden;

    padding:25px;

    border-radius:20px;

    background:
    linear-gradient(145deg,#0b1220,#05080f);

    border:1px solid rgba(0,255,170,.15);

    box-shadow:
    0 0 40px rgba(0,255,170,.08),
    inset 0 0 40px rgba(255,255,255,.02);

    color:#fff;

}


/* Trading grid background */

.dashboard-card::before {

    content:"";

    position:absolute;
    inset:0;

    background-image:

    linear-gradient(
    rgba(255,255,255,.03) 1px,
    transparent 1px
    ),

    linear-gradient(
    90deg,
    rgba(255,255,255,.03) 1px,
    transparent 1px
    );

    background-size:
    35px 35px;

    opacity:.4;

}



/* Green market glow */

.dashboard-card::after {

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    right:-100px;
    top:-100px;

    background:#00ff9d;

    filter:blur(120px);

    opacity:.12;

}



.dashboard-card > * {

    position:relative;
    z-index:2;

}



/* Balance */

.balance-header h1 {

    font-size:45px;

    font-weight:700;

    color:#00ff9d;

    text-shadow:
    0 0 20px rgba(0,255,157,.5);

}



/* Wallet active */

.wallet-status {

    display:inline-flex;

    gap:8px;

    padding:8px 16px;

    border-radius:30px;

    background:
    rgba(0,255,157,.08);

    border:1px solid rgba(0,255,157,.25);

    color:#00ff9d;

}



/* Stats */

.stat-glass {

    background:

    rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    border-radius:15px;

    padding:18px;

    backdrop-filter:blur(10px);

}



.stat-glass i {

    color:#00ff9d;

    font-size:22px;

}



.stat-glass h6 {

    color:white;

    font-size:20px;

}



/* Buy button */

.buy-btn {

    background:

    linear-gradient(
    135deg,
    #00ff9d,
    #00c2ff
    );

    color:#001;

    font-weight:700;

    border-radius:12px;

    padding:14px 30px;

}



/* Refer button */

.refer-btn {

    background:#111827;

    color:white;

    border:1px solid #263244;

    border-radius:12px;

    padding:14px 30px;

}



/* Hover */

.stat-glass:hover {

    border-color:#00ff9d;

    transform:translateY(-5px);

    transition:.3s;

}
/* ================================
 BUY TP PREMIUM PAGE
================================ */
/* ==========================================
   BUY TP PAGE - UPDATED PREMIUM COMPACT UI
========================================== */

/* ---------- PACKAGE CARD ---------- */

.tp-package{
    background:linear-gradient(145deg,#111827,#1f2937);
    border:1px solid rgba(59,130,246,.18);
    border-radius:22px;
    padding:18px;
    max-width:320px;
    margin:auto;
    transition:.3s ease;
    box-shadow:0 12px 25px rgba(0,0,0,.12);
}

.tp-package:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 35px rgba(37,99,235,.20);
}

/* ---------- TOP ---------- */

/* ---------- PACKAGE TOP HEADER ---------- */

.package-head{
    display:flex;
    flex-direction:column;
    align-items:center;
}


/* Top Row */

.package-top-row{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


/* Icon Left */

.package-icon{

    width:60px;
    height:60px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

    color:#fff;

    flex-shrink:0;

}


/* Icon Colors */

.starter-icon{
    background:linear-gradient(135deg,#22c55e,#15803d);
}


.growth-icon{
    background:linear-gradient(135deg,#3b82f6,#1d4ed8);
}


.premium-icon{
    background:linear-gradient(135deg,#a855f7,#6b21a8);
}


.vip-icon{
    background:linear-gradient(135deg,#f59e0b,#b45309);
}



/* Badge Right */

.plan-badge{

    padding:6px 15px;

    border-radius:25px;

    background:#0f172a;

    color:#38bdf8;

    font-size:11px;

    font-weight:700;

    letter-spacing:.8px;

}



/* Package Name Center */

.package-head h3{

    width:100%;

    margin:15px 0 0;

    text-align:center;

    font-size:20px;

    font-weight:800;

    color:#fff;

}



/* Line */

.package-line{

    height:1px;

    background:#374151;

    margin:18px 0;

}

/* ---------- DETAILS ---------- */

.package-data{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
}

.package-data span{
    color:#9ca3af;
    font-size:13px;
}

.package-data h5{
    margin:0;
    color:#22c55e;
    font-size:20px;
    font-weight:800;
}

.package-data h4{
    margin:0;
    color:#fff;
    font-size:15px;
    font-weight:700;
}

/* ---------- FORM ---------- */

label{
    color:#d1d5db;
    font-size:14px;
    font-weight:600;
}

/* ---------- BUTTON ---------- */

.buy-tp-btn{
    width:100%;
    height:46px;
    border:none;
    border-radius:12px;
    font-size:15px;
    font-weight:700;
    color:#fff;
    background:linear-gradient(90deg,#06b6d4,#2563eb);
    transition:.3s;
}

.buy-tp-btn i{
    margin-right:8px;
}

.buy-tp-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(37,99,235,.30);
}

/* ---------- ALERT ---------- */

.trade-alert{
    padding:15px;
    border-radius:15px;
    margin-bottom:20px;
    font-weight:600;
}

.trade-alert.success{
    background:#dcfce7;
    color:#15803d;
}

.trade-alert.error{
    background:#fee2e2;
    color:#dc2626;
}


/* ADD USER PREMIUM */


.add-user-card{

background:
linear-gradient(145deg,#050914,#111827);

padding:30px;

border-radius:30px;

box-shadow:
0 20px 50px rgba(0,0,0,.25);

color:white;

}



.user-header{

text-align:center;

}



.user-icon{

width:90px;

height:90px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

border-radius:30px;

font-size:40px;


background:
linear-gradient(135deg,#00ff9d,#00c2ff);


color:#001;


box-shadow:
0 0 40px rgba(0,255,157,.4);


}



.user-header h2{

margin-top:20px;

font-weight:900;

}



.user-header p{

color:#94a3b8;

}





.form-group{

margin-top:20px;

}



.form-group label{

color:#cbd5e1;

font-weight:700;

margin-bottom:8px;

display:block;

}




.user-input{

width:100%;

height:55px;

padding:0 18px;

border-radius:18px;

border:1px solid #334155;

background:#0f172a;

color:white;

font-size:16px;

}



.user-input:focus{

outline:none;

border-color:#00ff9d;

box-shadow:0 0 15px rgba(0,255,157,.2);

}



.user-option{

width:100%;

height:55px;

padding:0 18px;

border-radius:18px;

border:1px solid #334155;

background:#0f172a;

color:white;

font-size:16px;

}



.user-select:focus{

outline:none;

border-color:#00ff9d;

box-shadow:0 0 15px rgba(0,255,157,.2);

}



.add-user-btn{

width:100%;

height:55px;

border:none;

border-radius:18px;

font-size:17px;

font-weight:800;


background:

linear-gradient(90deg,#00ff9d,#00c2ff);


color:#001;


transition:.3s;


}


.add-user-btn:hover{

transform:translateY(-3px);

box-shadow:

0 15px 30px rgba(0,255,157,.3);

}




@media(max-width:768px){


.add-user-card{

padding:20px;

}


.user-icon{

width:75px;

height:75px;

font-size:32px;

}


}
.approval-header{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:25px;
}


.approval-header h3{
    margin:0;
    font-weight:800;
}


.approval-header p{
    margin:3px 0;
    color:#777;
    font-size:14px;
}


.back-circle{

    width:45px;
    height:45px;
    background:white;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#333;
    box-shadow:0 8px 20px #0001;
    text-decoration:none;

}



.user-card{

    background:linear-gradient(135deg,#6f42c1,#2563eb);
    color:white;
    padding:22px;
    border-radius:25px;
    display:flex;
    align-items:center;
    gap:15px;
    box-shadow:0 15px 30px #0002;

}



.user-icon{

    width:55px;
    height:55px;
    background:white;
    color:#6f42c1;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;

}


.user-card span{

    font-size:13px;
    opacity:.8;

}


.user-card h4{

    margin:3px 0;
    font-weight:800;

}


.request-count{

    background:#ffffff30;
    padding:10px 15px;
    border-radius:30px;

}





.fund-card{

    background:white;
    padding:20px;
    border-radius:25px;
    box-shadow:0 10px 30px #0001;

}



.card-title-box{

    margin-bottom:20px;

}


.card-title-box div{

    display:flex;
    align-items:center;
    gap:10px;

}


.card-title-box i{

    color:#16a34a;
    font-size:22px;

}


.fund-table{

    margin:0;

}


.fund-table thead{

    background:#111827;
    color:white;

}



.fund-table th{

    padding:15px;

}



.fund-table td{

    padding:18px 15px;
    vertical-align:middle;

}




.amount{

    color:#16a34a;
    font-weight:800;
    font-size:17px;

}



.payment{

    color:#2563eb;
}



.txn{

    background:#f1f5f9;
    padding:6px 10px;
    border-radius:10px;
    font-size:13px;

}




.badge{

    padding:8px 14px;
    border-radius:20px;

}


.pending{

    background:#fef3c7;
    color:#92400e;

}


.approved{

    background:#dcfce7;
    color:#166534;

}


.rejected{

    background:#fee2e2;
    color:#991b1b;

}



.approve-btn,
.reject-btn{

    width:38px;
    height:38px;
    border-radius:50%;
    border:none;
    color:white;
    margin:2px;

}


.approve-btn{

    background:#16a34a;

}


.reject-btn{

    background:#dc2626;

}


.done{

    color:#64748b;
    font-size:13px;

}



@media(max-width:600px){

.user-card{

    flex-wrap:wrap;

}

.fund-table{

    font-size:13px;

}


}
.withdraw-banner{

background:linear-gradient(135deg,#2563eb,#7c3aed);
color:white;
padding:22px;
border-radius:25px;
display:flex;
align-items:center;
gap:18px;
box-shadow:0 15px 30px rgba(0,0,0,.15);

}


.withdraw-banner h3{

font-weight:800;
margin:0;

}


.withdraw-banner p{

margin:5px 0 0;
opacity:.8;

}



.withdraw-icon{

width:60px;
height:60px;
border-radius:50%;
background:#ffffff30;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;

}




.balance-small{

background:white;
padding:20px;
border-radius:22px;
display:flex;
justify-content:space-between;
align-items:center;
box-shadow:0 8px 25px rgba(0,0,0,.08);

}


.balance-small span{

color:#777;
font-size:14px;

}


.balance-small h2{

margin:5px 0 0;
font-weight:800;

}


.balance-small i{

font-size:35px;
color:#2563eb;

}





.form-card{

background:white;
padding:25px;
border-radius:25px;
box-shadow:0 10px 30px rgba(0,0,0,.08);

}




.amount-title{

display:flex;
justify-content:space-between;
align-items:center;

}


.amount-title a{

color:#2563eb;
font-weight:600;
text-decoration:none;

}




.input-box{

display:flex;
align-items:center;
background:#f8fafc;
border-radius:15px;
padding:0 15px;
margin-top:10px;

}


.input-box i{

color:#64748b;

}


.input-box input{

border:0;
background:transparent;
height:50px;

}


.input-box input:focus{

box-shadow:none;

}




.warning-box{

background:#fff7ed;
color:#c2410c;
padding:12px;
border-radius:15px;
font-size:13px;

}



.withdraw-btn{

background:linear-gradient(135deg,#2563eb,#7c3aed);
color:white;
border:0;
padding:15px;
border-radius:15px;
font-weight:700;
font-size:16px;

}



.history-card{

background:white;
padding:20px;
border-radius:25px;
box-shadow:0 10px 30px rgba(0,0,0,.08);

}


.history-card h5{

font-weight:700;

}


.history-card i{

color:#2563eb;

}
.profile-modal{

border-radius:25px;
border:0;
padding:10px;

}



.profile-circle{

width:80px;
height:80px;

margin:auto;

border-radius:50%;

background:linear-gradient(135deg,#2563eb,#7c3aed);

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:35px;

}




.profile-info{

display:flex;

gap:15px;

margin-top:25px;

}



.profile-info div{

background:#f8fafc;

padding:15px;

border-radius:18px;

flex:1;

}



.profile-info i{

color:#2563eb;

font-size:20px;

}



.profile-info span{

display:block;

font-size:12px;

color:#777;

}



.logout-button{

display:block;

margin-top:25px;

background:#dc2626;

color:white;

padding:14px;

border-radius:15px;

text-decoration:none;

font-weight:700;

}
.profile-close{

position:absolute;

right:20px;

top:20px;

background-color:#f1f5f9;

border-radius:50%;

padding:10px;

}


.profile-modal{

position:relative;

border-radius:25px;

overflow:hidden;

}
/* Success Dialog */

.success-overlay{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.55);

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:9999;

    backdrop-filter:none;

}


.success-box{

    width:330px;

    background:#fff;

    border-radius:30px;

    padding:35px 25px;

    text-align:center;

    box-shadow:
    0 20px 50px rgba(0,0,0,.25);

    animation:popup .35s ease;

}


@keyframes popup{

    from{
        transform:scale(.7);
        opacity:0;
    }

    to{
        transform:scale(1);
        opacity:1;
    }

}



.success-icon{

    width:80px;
    height:80px;

    margin:auto;

    border-radius:50%;

    background:
    linear-gradient(135deg,#18b56b,#00d084);

    color:white;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:40px;

    box-shadow:
    0 10px 25px rgba(24,181,107,.4);

}



.success-box h3{

    margin-top:20px;

    font-weight:800;

    color:#222;

}



.success-box p{

    color:#777;

    font-size:14px;

    margin-top:10px;

}



.success-btn{

    margin-top:20px;

    width:100%;

    height:50px;

    border:none;

    border-radius:18px;

    background:
    linear-gradient(135deg,#6d35ff,#a855f7);

    color:white;

    font-weight:700;

    font-size:16px;

}
.premium-success-popup{

    border-radius:30px !important;

    padding:25px !important;

    box-shadow:
    0 20px 60px rgba(0,0,0,.25);

}


.swal-title{

    font-size:24px;

    font-weight:800;

    color:#222;

}



.success-check{

    width:80px;
    height:80px;

    margin:10px auto 20px;

    border-radius:50%;

    background:
    linear-gradient(135deg,#18b56b,#00d084);

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    font-size:35px;

    box-shadow:
    0 10px 25px rgba(24,181,107,.4);

}



.success-text{

    color:#666;

    font-size:15px;

}



.user-detail-box{

    margin-top:20px;

    background:#f7f7ff;

    border-radius:20px;

    padding:15px;

}



.user-detail-box div{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px;

    margin-bottom:8px;

    background:white;

    border-radius:15px;

}



.user-detail-box i{

    color:#6d35ff;

    width:25px;

}



.user-detail-box span{

    color:#777;

    flex:1;

    text-align:left;

}



.user-detail-box b{

    color:#222;

}
/* BUY TP NEW DESIGN */







/* SUCCESS ALERT */

.trade-alert{

    margin-top:20px;
    padding:15px;
    border-radius:15px;
    font-weight:600;

}


.trade-alert.success{

    background:#e9fff0;
    color:#16a34a;

}


.trade-alert.error{

    background:#fff0f0;
    color:#dc2626;

}


/* ==========================================
   BUY TP AMOUNT PLAN PAGE
========================================== */


.buy-page{
    padding-bottom:20px;
}


/* HEADER */

.buy-title{

    text-align:center;
    margin-top:20px;

}


.buy-icon{

    width:75px;
    height:75px;

    margin:auto;

    border-radius:25px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
    linear-gradient(135deg,#6d35ff,#00c2ff);

    color:white;

    font-size:32px;

    box-shadow:
    0 15px 35px rgba(109,53,255,.35);

}



.buy-title h2{

    margin-top:18px;

    font-weight:900;

    color:#111827;

}



.buy-title p{

    color:#6b7280;

    font-size:14px;

}



/* FORM CARD */


.buy-form-box{

    background:white;

    padding:25px;

    border-radius:30px;

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);

}



/* LABEL */


.form-group label{

    font-weight:700;

    color:#374151;

    margin-bottom:10px;

    display:block;

}




/* AMOUNT INPUT */


.trade-input{

    width:100%;

    height:60px;

    border-radius:18px;

    border:1px solid #e5e7eb;

    background:#f8fafc;

    padding:0 20px;

    font-size:18px;

    font-weight:700;

    color:#111827;

}



.trade-input:focus{

    outline:none;

    border-color:#6d35ff;

    background:white;

    box-shadow:
    0 0 15px rgba(109,53,255,.15);

}




/* SELECTED PLAN BOX */


#planBox{

    animation:planShow .4s ease;

}



@keyframes planShow{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}




.tp-package{


    background:
    linear-gradient(145deg,#111827,#1f2937);


    border-radius:25px;

    padding:22px;

    color:white;

    box-shadow:

    0 20px 40px rgba(0,0,0,.20);


}



/* PLAN HEADER */


.package-head{

    text-align:center;

}



.package-top-row{

    display:flex;

    justify-content:center;

    align-items:center;

}




.package-icon{

    width:70px;

    height:70px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

}



.starter-icon{

background:
linear-gradient(135deg,#00ff9d,#00c2ff);

color:#001;

}





.plan-badge{

    display:inline-block;

    margin-top:15px;

    padding:7px 18px;

    border-radius:30px;

    background:
    rgba(255,255,255,.1);

    color:#38bdf8;

    font-size:12px;

    font-weight:700;

}



.package-head h3{

    margin-top:15px;

    font-size:24px;

    font-weight:900;

}



/* LINE */


.package-line{

    height:1px;

    background:#374151;

    margin:20px 0;

}



/* DATA */


.package-data{

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.package-data span{

    color:#9ca3af;

}



.package-data h5{

    color:#00ff9d;

    font-size:22px;

    font-weight:800;

}




/* BUY BUTTON */


.buy-tp-btn{


    width:100%;

    height:58px;

    border:0;

    border-radius:20px;


    background:

    linear-gradient(135deg,#6d35ff,#00c2ff);


    color:white;


    font-size:17px;

    font-weight:800;


    box-shadow:

    0 15px 30px rgba(109,53,255,.3);


    transition:.3s;


}



.buy-tp-btn i{

    margin-right:8px;

}



.buy-tp-btn:hover{


    transform:translateY(-3px);


}



/* SWEET ALERT */


.swal2-popup{

    border-radius:30px!important;

}



.swal2-title{

    font-weight:900!important;

}



.swal2-confirm{

    border-radius:15px!important;

    padding:12px 35px!important;

}




/* MOBILE */


@media(max-width:768px){


.buy-form-box{

    padding:18px;

}


.buy-title h2{

    font-size:25px;

}



.trade-input{

    height:55px;

}


.tp-package{

    padding:18px;

}


.package-head h3{

    font-size:21px;

}


}
#levelPopup .modal-content
{
    background: linear-gradient(135deg,#6a11cb,#2575fc);
    color:white;
    border-radius:25px;
    border:none;
    box-shadow:0 20px 50px rgba(0,0,0,0.4);
    padding:20px;
}


#levelPopup .modal-body
{
    padding:35px 25px;
}


#levelPopup h4
{
    font-size:26px;
    font-weight:700;
}


#levelPopup p
{
    font-size:16px;
    opacity:0.9;
}


#levelPopup .fa-trophy
{
    background:white;
    color:#ffb300;
    padding:20px;
    border-radius:50%;
}


#levelPopup .btn-primary
{
    background:white;
    color:#2575fc;
    border:none;
    border-radius:30px;
    padding:10px 35px;
    font-weight:600;
}


#levelPopup .btn-primary:hover
{
    background:#f1f1f1;
}


/* FIX MODAL BLUR ISSUE */

.modal-backdrop{
    z-index:1040;
}

.modal{
    z-index:1050;
}

.wallet-actions{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:15px;
}

.wallet-actions .btn{
    border-radius:30px;
    padding:10px 22px;
    font-weight:600;
}
.trade-card{

background:#fff;

border-radius:25px;

padding:18px;

box-shadow:
0 8px 25px rgba(0,0,0,.08);

}


.trade-header{

display:flex;

justify-content:space-between;

align-items:center;

}


.trade-header h5{

margin:0;

font-weight:800;

font-size:18px;

}


.trade-header small{

color:#777;

}


.growth-box{

background:#e8fff0;

color:#12a04a;

padding:8px 14px;

border-radius:20px;

font-weight:700;

}



.chart-area{

height:180px;

margin-top:15px;

}



.trade-footer{

display:flex;

justify-content:space-between;

font-size:12px;

color:#777;

margin-top:10px;

}
.trade-header label{
    color:#111827;
    font-weight:700;
}
.trade-chart-card{

background:white;

border-radius:25px;

padding:18px;

box-shadow:0 8px 25px rgba(0,0,0,.08);

}


.chart-top{

display:flex;

justify-content:space-between;

align-items:center;

}


.chart-top h5{

font-weight:800;

margin:0;

}


.chart-top label{

color:#555;

font-size:12px;

}


.growth{

background:#dcfce7;

color:#16a34a;

padding:8px 15px;

border-radius:20px;

font-weight:800;

}
#tradeChart{
    width:100%;
    height:300px;
    background:#0f172a;
    border-radius:20px;
}