@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* =========================================
   TOKENIZED THEME SYSTEM
========================================= */

:root{

    /* CORE */
    --bg:#081000;
    --bg-secondary:#0d1604;
    --panel:#162900;
    --panel-2:#1b3200;
    --panel-3:#233f00;

    /* PRIMARY */
    --primary:#9DFF00;
    --primary-soft:#7dd600;
    --primary-glow:rgba(157,255,0,0.18);

    /* ACCENTS */
    --accent:#233f00;
    --accent2:#3f6f00;
    --accent-hover:#4f8d00;

    /* TEXT */
    --text:#ffffff;
    --text-dark:#ffffff;
    --text-muted:#93a18a;
    --text-fade:#718061;

    /* SURFACES */
    --surface:#1b2f06;
    --surface-2:#243d08;
    --surface-3:#304f0b;

    /* BORDERS */
    --border:rgba(157,255,0,0.10);
    --border-strong:rgba(157,255,0,0.18);

    /* INPUTS */
    --input-bg:#101d03;
    --input-border:rgba(157,255,0,0.10);
    --input-focus:rgba(157,255,0,0.25);

    /* STATUS */
    --success:#7dff7a;
    --danger:#ff5d8f;
    --warning:#ffd86b;
    --info:#5bbcff;

    /* SHADOWS */
    --shadow-sm:0 4px 10px rgba(0,0,0,0.18);
    --shadow-md:0 8px 24px rgba(0,0,0,0.22);
    --shadow-lg:0 12px 34px rgba(0,0,0,0.28);
    --shadow-glow:0 0 18px rgba(157,255,0,0.12);

    /* RADII */
    --card-radius:16px;
    --radius-sm:10px;
    --radius-md:14px;
    --radius-lg:18px;

    /* TRANSITIONS */
    --transition:.22s ease;
}

/* =========================================
   BASE
========================================= */

*{
    box-sizing:border-box;
}

.app{
    max-width:420px;
    margin:0 auto;
    min-height:100vh;
    padding:25px 15px 80px;
}

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

header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:22px;
}

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

.brand .logo{
    width:50px;
    height:50px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:700;
    font-size:18px;
    box-shadow:var(--shadow-glow);
    border:1px solid var(--border-strong);
}

.brand h1{
    margin:0;
    font-size:20px;
    font-weight:700;
    color:var(--primary);
}

/* =========================================
   MARKET INFO
========================================= */

.market-info{
    display:flex;
    align-items:center;
    gap:10px;
    background:linear-gradient(90deg,var(--accent),var(--accent2));
    color:#fff;
    padding:6px 10px;
    border-radius:12px;
    width:150px;
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
}

.btc-icon{
    font-size:20px;
    color:#f5b72b;
}

.market-text p{
    font-size:12px;
    margin:0;
    color:rgba(255,255,255,0.75);
}

.market-text h4{
    font-size:14px;
    margin:0;
    font-weight:700;
    color:#fff;
}

/* =========================================
   WALLET CARD
========================================= */

.wallet-card{
    background:linear-gradient(180deg,var(--panel),var(--panel-2));
    border-radius:var(--card-radius);
    padding:20px;
    border:1px solid var(--border);
    box-shadow:var(--shadow-md);
    margin-bottom:18px;
}

.wallet-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.balance-value{
    font-size:28px;
    font-weight:700;
    color:var(--primary);
}

.balance-label{
    color:var(--text-muted);
    font-size:13px;
}

/* =========================================
   ACTIONS
========================================= */

.action-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:25px;
}

.action-btn{
    flex:1;

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

    gap:8px;

    padding:14px;

    border:none;
    border-radius:12px;

    font-weight:700;
    font-size:15px;

    cursor:pointer;

    transition:var(--transition);
}

.action-btn ion-icon{
    font-size:18px;
}

.action-btn.primary{
    background:linear-gradient(90deg,var(--accent),var(--accent2));
    color:#fff;
    border:1px solid var(--border);
}

.action-btn.secondary{
    background:var(--surface);
    border:1px solid var(--border-strong);
    color:var(--primary);
}

.action-btn:hover{
    transform:translateY(-2px);
}

/* =========================================
   GAMES
========================================= */

.games-section h3{
    margin:10px 0;
    color:var(--primary);
    font-size:18px;
}

.games-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:5px;
}

.game-card{
    border-radius:var(--card-radius);
    text-align:center;
    transition:var(--transition);
    cursor:pointer;
    padding:8px 4px;
}

.game-card:hover{
    transform:translateY(-4px);
    background:rgba(157,255,0,0.03);
    box-shadow:var(--shadow-sm);
}

.game-card img{
    width:60px;
    margin-bottom:8px;
}

.game-card h4{
    margin:0;
    font-size:15px;
    color:var(--text);
}

.game-card p{
    margin:3px 0 0;
    font-size:12px;
    color:var(--text-muted);
}

/* =========================================
   TRANSACTIONS
========================================= */

.tx-section h3{
    margin:25px 0 10px;
    font-size:18px;
    color:var(--primary);
}

.tx-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px;
    border-radius:10px;
    background:linear-gradient(180deg,var(--panel),var(--panel-2));
    margin-bottom:10px;
    transition:var(--transition);
    border:1px solid var(--border);
}

.tx-item:hover{
    box-shadow:var(--shadow-sm);
}

.tx-icon{
    width:42px;
    height:42px;
    border-radius:10px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    border:1px solid var(--border);
}

.tx-icon i{
    font-size:18px;
    color:#fff;
}

.tx-info{
    flex:1;
    margin-left:12px;
}

.tx-info h4{
    margin:0;
    font-size:15px;
    color:var(--text);
}

.tx-info p{
    margin:0;
    font-size:12px;
    color:var(--text-muted);
}

.tx-amount{
    font-weight:700;
    color:var(--success);
}

.tx-amount.negative{
    color:var(--danger);
}

/* =========================================
   NO TRANSACTIONS
========================================= */

.no-tx{
    text-align:center;
    padding:30px;
    border-radius:14px;
    background:linear-gradient(180deg,var(--panel),var(--panel-2));
    color:var(--text-muted);
    margin-top:20px;
    border:1px solid var(--border);
}

.no-tx img{
    width:70px;
    opacity:.5;
    margin-bottom:10px;
}

/* =========================================
   DEPOSIT LAYOUT
========================================= */

.deposit-section{
    padding:0 16px;
    margin-top:20px;
}

.deposit-wrapper{
    display:block;
}

/* =========================================
   DEPOSIT CARD
========================================= */

.deposit-card{
    background:linear-gradient(180deg,var(--panel),var(--panel-2));
    border-radius:var(--card-radius);
    padding:18px;
    margin-bottom:18px;
    border:1px solid var(--border);
    box-shadow:var(--shadow-md);
}

.deposit-heading{
    font-size:18px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:16px;
}

.deposit-sub-heading{
    font-size:17px;
    margin-bottom:14px;
    color:var(--text);
}

.deposit-subtext{
    font-size:13px;
    line-height:1.7;
    color:var(--text-muted);
    margin-bottom:18px;
}

/* =========================================
   TOP BAR
========================================= */

.deposit-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px;
}

.deposit-history-link{
    color:var(--primary);
    font-size:13px;
    font-weight:600;
    text-decoration:none;
}

.deposit-history-link:hover{
    color:var(--primary-soft);
}

/* =========================================
   BALANCE CARD
========================================= */

.deposit-balance-card{
    margin-bottom:22px;
}

.deposit-refresh-btn{
    width:42px;
    height:42px;
    border-radius:12px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:18px;
    flex-shrink:0;
    border:1px solid var(--border);
}

/* =========================================
   INPUTS
========================================= */

.deposit-address-wrap{
    position:relative;
    margin-bottom:18px;
    width:100%;
}

.deposit-copy-btn{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    color:var(--primary);
    font-size:18px;
    cursor:pointer;
    z-index:2;
}

.deposit-input,
.deposit-custom-input{
    width:100%;
    border:none;
    outline:none;
    background:var(--input-bg);
    font-family:"Poppins",sans-serif;
    color:var(--text);
    box-sizing:border-box;
    border:1px solid var(--input-border);
    transition:var(--transition);
}

.deposit-input{
    height:54px;
    border-radius:14px;
    padding:0 16px 0 50px;
    font-size:13px;
}

.deposit-custom-input{
    height:58px;
    border-radius:16px;
    padding:0 16px 0 60px;
    font-size:15px;
}

.deposit-input:focus,
.deposit-custom-input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px var(--input-focus);
}

.deposit-custom-input-wrap{
    position:relative;
    margin-top:20px;
}

.deposit-currency-icon{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    font-size:24px;
    font-weight:700;
    color:var(--warning);
}

/* =========================================
   QR SECTION
========================================= */

.deposit-qr-box{
    text-align:center;
    padding:18px;
    background:var(--surface);
    border-radius:16px;
    margin-bottom:20px;
    border:1px solid var(--border);
}

.deposit-qr-box img{
    width:100%;
    max-width:220px;
    border-radius:12px;
}

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

.deposit-btn,
.deposit-btn-small{
    border:none;
    font-family:"Poppins",sans-serif;
    font-weight:700;
    cursor:pointer;
    background:linear-gradient(90deg,var(--accent),var(--accent2));
    color:#fff;
    transition:var(--transition);
    border:1px solid var(--border);
}

.deposit-btn{
    width:100%;
    height:52px;
    border-radius:14px;
    font-size:15px;
}

.deposit-btn-small{
    height:50px;
    min-width:120px;
    border-radius:14px;
    font-size:14px;
}

.deposit-btn:hover,
.deposit-btn-small:hover{
    transform:translateY(-2px);
}

/* =========================================
   DEPOSIT INFO
========================================= */

.deposit-info-item{
    background:var(--surface);
    border-radius:14px;
    padding:14px;
    margin-bottom:12px;
    border:1px solid var(--border);
}

.deposit-label{
    font-size:12px;
    color:var(--text-muted);
    margin-bottom:6px;
    font-weight:600;
}

.deposit-value{
    font-size:14px;
    color:var(--text);
    line-height:1.6;
    word-break:break-word;
}

.deposit-token{
    display:flex;
    align-items:center;
    gap:10px;
}

.deposit-token img{
    width:36px;
    height:36px;
    border-radius:50%;
    object-fit:cover;
}

/* =========================================
   WARNING / NOTES
========================================= */

.deposit-warning{
    margin-top:18px;
}

.deposit-warning h4{
    margin-bottom:12px;
    font-size:16px;
    color:var(--primary);
}

.deposit-warning ul{
    padding-left:18px;
    margin:0;
}

.deposit-warning li,
.deposit-instruction-list li{
    margin-bottom:10px;
    color:var(--text-muted);
    line-height:1.7;
    font-size:13px;
}

.deposit-note{
    margin-top:22px;
    font-size:12px;
    line-height:1.7;
    color:var(--text-muted);
    text-align:center;
}

/* =========================================
   ADD WALLET
========================================= */

.deposit-add-wallet{
    text-align:center;
    padding:40px 10px;
}

.deposit-add-wallet a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:50px;
    padding:0 28px;
    border-radius:14px;
    background:linear-gradient(90deg,var(--accent),var(--accent2));
    color:#fff;
    text-decoration:none;
    font-weight:700;
    font-size:14px;
    border:1px solid var(--border);
}

/* =========================================
   CHANNEL SELECTION
========================================= */

.deposit-channel-wrapper{
    margin-top:6px;
}

.deposit-channel{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px;
    border-radius:16px;
    background:linear-gradient(180deg,var(--surface),var(--surface-2));
    margin-bottom:14px;
    cursor:pointer;
    transition:var(--transition);
    text-decoration:none;
    position:relative;
    border:1px solid var(--border);
}

.deposit-channel:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-sm);
    text-decoration:none;
}

.deposit-channel.active{
    background:linear-gradient(135deg,var(--accent2),var(--accent-hover));
    border-color:rgba(157,255,0,0.28);
}

.deposit-channel-left{
    flex-shrink:0;
}

.deposit-channel-right{
    flex:1;
}

.deposit-channel-icon{
    width:52px;
    height:52px;
    border-radius:16px;
    background:rgba(255,255,255,0.08);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
}

.deposit-channel-icon.qr{
    background:rgba(255,255,255,0.06);
}

.deposit-channel-title{
    font-size:15px;
    font-weight:700;
    color:#fff;
    margin-bottom:2px;
}

.deposit-channel-desc{
    font-size:12px;
    color:rgba(255,255,255,0.72);
    line-height:1.5;
}

.deposit-channel-bonus{
    font-size:12px;
    color:var(--warning);
    margin-top:4px;
    font-weight:600;
}

.deposit-channel-arrow{
    color:#fff;
    font-size:24px;
    opacity:.8;
}

/* =========================================
   AMOUNT SELECTION
========================================= */

.deposit-amount-heading{
    display:flex;
    align-items:center;
    gap:10px;
}

.deposit-amount-heading img{
    width:26px;
    height:26px;
    border-radius:50%;
}

.deposit-amount-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:18px;
}

.deposit-amount-btn{
    height:52px;
    border-radius:14px;
    border:1px solid var(--border);
    background:var(--surface);
    font-size:15px;
    font-weight:700;
    color:var(--primary);
    cursor:pointer;
    transition:var(--transition);
    font-family:"Poppins",sans-serif;
}

.deposit-amount-btn.active{
    background:linear-gradient(90deg,var(--accent),var(--accent2));
    color:#fff;
    border-color:transparent;
}

/* =========================================
   INSTRUCTIONS
========================================= */

.deposit-instruction-box{
    border:1px solid var(--border);
    border-radius:16px;
    padding:16px;
    background:var(--surface);
}

.deposit-instruction-list{
    margin:0;
    padding-left:18px;
}

/* =========================================
   BOTTOM BAR
========================================= */

.deposit-bottom-bar{
    position:sticky;
    bottom:10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    background:linear-gradient(180deg,var(--panel),var(--panel-2));
    border-radius:18px;
    padding:14px;
    margin-top:20px;
    box-shadow:var(--shadow-md);
    border:1px solid var(--border);
}

.deposit-bottom-label{
    font-size:12px;
    color:var(--text-muted);
}

.deposit-bottom-method{
    font-size:14px;
    font-weight:700;
    color:var(--text);
}

/* =========================================
   LABEL FLEX
========================================= */

.deposit-label-flex{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
}

/* =========================================
   BADGES
========================================= */

.deposit-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 10px;
    border-radius:30px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.5px;
    white-space:nowrap;
}

.deposit-badge.secure{
    background:rgba(34,197,94,0.12);
    color:var(--success);
}

.deposit-badge.live{
    background:rgba(59,130,246,0.12);
    color:var(--info);
}

/* =========================================
   WALLET BOX
========================================= */

.deposit-wallet-box{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:10px;
    width:100%;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    padding:12px;
    overflow:hidden;
}

.deposit-wallet-icon{
    width:44px;
    height:44px;
    min-width:44px;
    border-radius:14px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:18px;
    flex-shrink:0;
    border:1px solid var(--border);
}

.deposit-wallet-address{
    flex:1;
    min-width:0;
    font-size:13px;
    line-height:1.6;
    color:var(--text);
    font-weight:600;
    overflow-wrap:anywhere;
    word-break:break-word;
}

/* =========================================
   HASH
========================================= */

.deposit-mini-heading{
    font-size:16px;
    margin-top:8px;
    margin-bottom:14px;
    color:var(--text);
}

.deposit-hash-wrap{
    width:100%;
    margin-bottom:18px;
}

.deposit-hash-input{
    padding-left:16px;
}

/* =========================================
   CONTRACT LINK
========================================= */

.deposit-contract-link{
    color:var(--primary);
    text-decoration:none;
    word-break:break-word;
    overflow-wrap:anywhere;
}

.deposit-contract-link:hover{
    color:var(--primary-soft);
}

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

@media(max-width:767px){

    .deposit-section{
        padding:0 12px;
    }

    .deposit-card{
        padding:16px;
        border-radius:14px;
    }

    .deposit-heading{
        font-size:17px;
    }

    .deposit-topbar{
        margin-bottom:16px;
    }

    .deposit-sub-heading{
        font-size:16px;
    }

    .deposit-input{
        font-size:12px;
    }

    .deposit-custom-input{
        height:54px;
        font-size:14px;
    }

    .deposit-info-item{
        padding:12px;
    }

    .deposit-value{
        font-size:13px;
    }

    .deposit-warning li,
    .deposit-instruction-list li{
        font-size:12px;
    }

    .deposit-channel{
        padding:12px;
        gap:12px;
        border-radius:14px;
    }

    .deposit-channel-icon{
        width:46px;
        height:46px;
        border-radius:14px;
        font-size:20px;
    }

    .deposit-channel-title{
        font-size:14px;
    }

    .deposit-channel-desc{
        font-size:11px;
    }

    .deposit-channel-arrow{
        font-size:20px;
    }

    .deposit-amount-grid{
        gap:10px;
    }

    .deposit-amount-btn{
        height:48px;
        font-size:14px;
    }

    .deposit-bottom-bar{
        padding:12px;
    }

    .deposit-btn-small{
        min-width:100px;
        height:46px;
    }

    .deposit-label-flex{
        align-items:flex-start;
    }

    .deposit-wallet-box{
        padding:10px;
        gap:10px;
        border-radius:12px;
    }

    .deposit-wallet-icon{
        width:38px;
        height:38px;
        min-width:38px;
        border-radius:12px;
        font-size:16px;
    }

    .deposit-wallet-address{
        font-size:12px;
        line-height:1.5;
    }

    .deposit-badge{
        font-size:9px;
        padding:4px 8px;
    }

    .deposit-mini-heading{
        font-size:15px;
    }

    .deposit-input{
        height:50px;
        font-size:12px;
    }

    .deposit-copy-btn{
        left:14px;
        font-size:16px;
    }
}
/* =========================================
   FLOATING BOTTOM NAV
========================================= */

.bottom-nav-wrap{
    position:fixed;
    left:0;
    right:0;
    bottom:14px;
    z-index: 999;
    display:flex;
    justify-content:center;
    pointer-events:none;
}

/* =========================================
   GLOW
========================================= */

.bottom-nav-glow{
    position:absolute;
    bottom:-10px;
    width:220px;
    height:60px;
    border-radius:50%;
    background:rgba(157,255,0,0.12);
    filter:blur(30px);
    pointer-events:none;
}

/* =========================================
   NAV CONTAINER
========================================= */

.bottom-nav{
    width:calc(100% - 24px);
    max-width:420px;
    height:74px;
    background:rgba(16,29,3,0.88);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

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

    border-radius:26px;

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

    padding:0 18px;

    box-shadow:
        0 12px 32px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.03);

    position:relative;

    pointer-events:auto;
	
}

/* =========================================
   NAV ITEMS
========================================= */

.bottom-nav-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;

    text-decoration:none;

    position:relative;

    transition:var(--transition);
}

.bottom-nav-item span{
    font-size:10px;
    font-weight:600;
    color:var(--text-muted);
    transition:var(--transition);
}

.bottom-nav-icon{
    width:42px;
    height:42px;

    border-radius:14px;

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

    font-size:18px;

    color:var(--text-muted);

    transition:var(--transition);

    position:relative;
}



.bottom-nav-item:hover .bottom-nav-icon{
    transform:translateY(-2px);
    color:var(--primary);
}

.bottom-nav-item:hover span{
    color:var(--primary);
}

.bottom-nav-center{
    width:68px;
    min-width:68px;
    height:68px;

    margin-top:-34px;

    border-radius:50%;

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

    text-decoration:none;

    position:relative;
}

.bottom-nav-center::before{
    content:"";
    position:absolute;
    inset:0;

    border-radius:50%;

    background:rgba(157,255,0,0.12);

    filter:blur(18px);

    transform:scale(.9);
}

.bottom-nav-center-inner{
    width:60px;
    height:60px;

    border-radius:22px;

    background:linear-gradient(135deg, #45730a, #10120a);

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

    font-size:24px;
    color:#111;

    position:relative;
    z-index:2;

    box-shadow:
        0 10px 24px rgba(157,255,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.35);

    transition:var(--transition);
}

.bottom-nav-center:hover .bottom-nav-center-inner{
    transform:translateY(-3px) scale(1.03);
}

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

@media(max-width:767px){

    .bottom-nav{
        height:70px;
        border-radius:24px;
        padding:0 14px;
    }

    .bottom-nav-icon{
        width:38px;
        height:38px;
        border-radius:12px;
        font-size:16px;
    }

    .bottom-nav-item span{
        font-size:9px;
    }

    .bottom-nav-center{
        width:62px;
        min-width:62px;
        height:62px;
        margin-top:-30px;
    }

    .bottom-nav-center-inner{
        width:54px;
        height:54px;
        border-radius:18px;
        font-size:22px;
    }

}

/* =========================================
   UNIVERSAL FORM SYSTEM
   TOKENIZED DARK GLASS UI
========================================= */

/* =========================================
   FORM SECTION
========================================= */

.ui-form-section{
    padding:16px;
}

/* =========================================
   FORM CARD
========================================= */

.ui-form-card{
    position:relative;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.015),
            rgba(255,255,255,0.01)
        ),
        linear-gradient(
            180deg,
            var(--panel),
            var(--panel-2)
        );

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

    border-radius:var(--card-radius);

    padding:22px;

    overflow:hidden;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.24),
        inset 0 1px 0 rgba(255,255,255,0.02);
}

.ui-form-card::before{
    content:"";

    position:absolute;

    top:-90px;
    right:-90px;

    width:200px;
    height:200px;

    border-radius:50%;

    background:rgba(157,255,0,0.04);

    filter:blur(38px);

    pointer-events:none;
}

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

.ui-form-header{
    position:relative;
    z-index:2;

    margin-bottom:24px;
}

.ui-form-title{
    margin:0 0 6px;

    font-size:24px;
    font-weight:700;

    letter-spacing:.2px;

    color:var(--primary);
}

.ui-form-subtitle{
    margin:0;

    font-size:13px;

    color:var(--text-muted);

    line-height:1.7;
}

/* =========================================
   FORM GROUP
========================================= */

.ui-form-group{
    position:relative;
    z-index:2;

    margin-bottom:18px;
}

/* =========================================
   LABEL
========================================= */

.ui-label{
    display:block;

    margin-bottom:10px;

    font-size:13px;
    font-weight:600;

    color:var(--text);
}

/* =========================================
   INPUT WRAP
========================================= */

.ui-input-wrap{
    position:relative;
}

/* =========================================
   LEFT ICON
========================================= */

.ui-input-icon{
    position:absolute;

    left:16px;
    top:50%;

    transform:translateY(-50%);

    width:20px;
    height:20px;

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

    color:var(--primary);

    font-size:18px;

    z-index:3;

    opacity:.95;
}

/* =========================================
   UNIVERSAL INPUTS
========================================= */

.ui-input,
.ui-select,
.ui-textarea{
    width:100%;

    border:none;
    outline:none;

    box-sizing:border-box;

    font-family:"Poppins",sans-serif;

    color:var(--text);

    transition:all .2s ease;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.025),
            rgba(255,255,255,0.01)
        );

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.02),
        inset 0 -1px 0 rgba(0,0,0,0.18);
}

/* =========================================
   INPUT + SELECT
========================================= */

.ui-input,
.ui-select{
    height:58px;

    border-radius:18px;

    padding-left:54px;
    padding-right:96px;

    font-size:14px;
    font-weight:500;

    letter-spacing:.2px;
}

/* =========================================
   TEXTAREA
========================================= */

.ui-textarea{
    min-height:120px;

    resize:none;

    border-radius:18px;

    padding:16px;

    font-size:14px;

    line-height:1.7;
}

/* =========================================
   PLACEHOLDERS
========================================= */

.ui-input::placeholder,
.ui-textarea::placeholder{
    color:rgba(255,255,255,0.34);

    font-weight:400;
}

/* =========================================
   INPUT FOCUS
========================================= */

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus{
    border-color:rgba(157,255,0,0.32);

    background:rgba(157,255,0,0.03);

    box-shadow:
        0 0 0 4px rgba(157,255,0,0.05),
        0 0 18px rgba(157,255,0,0.05);
}

/* =========================================
   SELECT
========================================= */

.ui-select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    cursor:pointer;

    color:var(--text) !important;

    padding-right:52px;

    background-image:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.025),
            rgba(255,255,255,0.01)
        ),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%239DFF00' viewBox='0 0 256 256'%3E%3Cpath d='M208.49 88.49a12 12 0 0 0-17 0L128 152 64.49 88.49a12 12 0 0 0-17 17l72 72a12 12 0 0 0 17 0l72-72a12 12 0 0 0 0-17Z'%3E%3C/path%3E%3C/svg%3E");

    background-repeat:no-repeat,no-repeat;

    background-position:
        0 0,
        right 16px center;

    background-size:
        100% 100%,
        16px;
}

/* =========================================
   SELECT OPTIONS
========================================= */

.ui-select option{
    background:#162900 !important;

    color:#ffffff !important;

    border:none !important;
}

/* =========================================
   SELECT HOVER
========================================= */

.ui-select:hover{
    border-color:rgba(157,255,0,0.16);
}

/* =========================================
   REMOVE EDGE DEFAULT
========================================= */

.ui-select::-ms-expand{
    display:none;
}

/* =========================================
   CLEAR BUTTON
========================================= */

.ui-clear{
    position:absolute;

    right:12px;
    top:50%;

    transform:translateY(-50%);

    height:34px;

    padding:0 11px;

    border:none;
    outline:none;

    border-radius:12px;

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

    gap:4px;

    background:rgba(255,255,255,0.03);

    border:1px solid rgba(255,255,255,0.05);

    color:rgba(255,255,255,0.56);

    font-size:11px;
    font-weight:600;

    cursor:pointer;

    transition:all .18s ease;

    opacity:0;

    pointer-events:none;

    z-index:5;

    backdrop-filter:blur(12px);
}

.ui-clear ion-icon{
    font-size:14px;
}

.ui-clear span{
    position:relative;
    top:.5px;
}

.ui-clear:hover{
    background:rgba(255,93,143,0.12);

    border-color:rgba(255,93,143,0.16);

    color:var(--danger);

    transform:translateY(-50%) scale(1.03);
}

/* =========================================
   ACTIVE CLEAR STATE
========================================= */

.ui-input-wrap.has-value .ui-clear{
    opacity:1;

    pointer-events:auto;
}

/* =========================================
   CHECK / TERMS
========================================= */

.ui-check{
    display:flex;
    align-items:flex-start;

    gap:10px;

    margin-top:8px;

    color:var(--text-muted);

    font-size:13px;

    line-height:1.7;
}

.ui-check ion-icon{
    color:var(--primary);

    font-size:18px;

    margin-top:2px;

    flex-shrink:0;
}

.ui-check a{
    color:var(--primary);

    text-decoration:none;

    font-weight:600;

    transition:var(--transition);
}

.ui-check a:hover{
    color:var(--primary-soft);
}

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

.ui-btn{
    width:100%;

    height:56px;

    border:none;
    outline:none;

    border-radius:16px;

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

    gap:10px;

    cursor:pointer;


    font-family:"Poppins",sans-serif;

    font-size:15px;
    font-weight:700;

    transition:all .2s ease;
}

/* PRIMARY */

.ui-btn-primary{
    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );

    color:#fff;

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

    box-shadow:
        0 8px 24px rgba(0,0,0,0.24),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

.ui-btn-primary:hover{
    transform:translateY(-2px);

    box-shadow:
        0 0 18px rgba(157,255,0,0.08),
        0 12px 28px rgba(0,0,0,0.26);
}

/* SECONDARY */

.ui-btn-secondary{
    background:var(--surface);

    border:1px solid var(--border-strong);

    color:var(--primary);
}

.ui-btn-secondary:hover{
    background:var(--surface-2);
}

/* DANGER */

.ui-btn-danger{
    background:linear-gradient(
        135deg,
        #6b112b,
        #8f1d3c
    );

    color:#fff;
}

/* =========================================
   BUTTON GROUP
========================================= */

.ui-btn-group{
    display:flex;

    gap:12px;

    margin-top:20px;
}

.ui-btn-group .ui-btn{
    flex:1;
}

/* =========================================
   DIVIDER
========================================= */

.ui-divider{
    height:1px;

    background:var(--border);

    margin:22px 0;
}

/* =========================================
   BADGE
========================================= */

.ui-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:5px 12px;

    border-radius:30px;

    background:rgba(157,255,0,0.08);

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

    color:var(--primary);

    font-size:11px;
    font-weight:700;

    letter-spacing:.3px;
}

/* =========================================
   INFO BOX
========================================= */

.ui-info-box{
    padding:14px 16px;

    border-radius:16px;

    background:rgba(157,255,0,0.04);

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

    color:var(--text-muted);

    font-size:13px;

    line-height:1.7;
}

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

@media(max-width:767px){

    .ui-form-section{
        padding:12px;
    }

    .ui-form-card{
        padding:18px;

        border-radius:18px;
    }

    .ui-form-title{
        font-size:22px;
    }

    .ui-input,
    .ui-select{
        height:54px;

        border-radius:16px;

        font-size:13px;

        padding-left:50px;
        padding-right:90px;
    }

    .ui-textarea{
        border-radius:16px;

        font-size:13px;
    }

    .ui-btn{
        height:52px;

        border-radius:14px;

        font-size:14px;
    }

    .ui-clear{
        height:32px;

        padding:0 10px;

        border-radius:10px;

        font-size:10px;
    }

    .ui-clear ion-icon{
        font-size:13px;
    }

    .ui-btn-group{
        flex-direction:column;
    }

    .ui-select{
        background-position:
            0 0,
            right 14px center;

        background-size:
            100% 100%,
            14px;
    }

}
/* =========================================
   GAME SIDEBAR PANEL
========================================= */

#sidebarPanel .modal-dialog{
    margin:0;

    max-width:340px;
    width:100%;

    height:100vh;
}

#sidebarPanel .modal-content{
    height:100vh;

    border:none;

    border-radius:0 28px 28px 0;

    overflow:hidden;

    background:
        radial-gradient(circle at top right, rgba(157,255,0,0.08), transparent 30%),
        linear-gradient(
            180deg,
            var(--panel),
            var(--panel-2)
        );

    box-shadow:
        0 0 40px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.02);
}

/* =========================================
   BODY
========================================= */

#sidebarPanel .modal-body{
    overflow-y:auto;

    padding-bottom:120px;

    scrollbar-width:none;
}

#sidebarPanel .modal-body::-webkit-scrollbar{
    display:none;
}

/* =========================================
   PROFILE BOX
========================================= */

#sidebarPanel .profileBox{
    position:relative;

    display:flex;
    align-items:center;

    gap:14px;

    padding:22px 18px !important;

    background:
        linear-gradient(
            135deg,
            rgba(157,255,0,0.08),
            rgba(157,255,0,0.02)
        );

    border-bottom:1px solid rgba(157,255,0,0.08);

    overflow:hidden;
}

#sidebarPanel .profileBox::before{
    content:"";

    position:absolute;

    top:-50px;
    right:-50px;

    width:140px;
    height:140px;

    border-radius:50%;

    background:rgba(157,255,0,0.08);

    filter:blur(34px);
}

/* =========================================
   PROFILE IMAGE
========================================= */

#sidebarPanel .profileBox .image-wrapper{
    position:relative;

    z-index:2;
}

#sidebarPanel .profileBox .imaged{
    width:58px !important;
    height:58px !important;

    border-radius:18px;

    object-fit:cover;

    border:2px solid rgba(157,255,0,0.14);

    box-shadow:
        0 8px 20px rgba(0,0,0,0.25),
        0 0 20px rgba(157,255,0,0.08);
}

/* =========================================
   PROFILE TEXT
========================================= */

#sidebarPanel .profileBox strong{
    display:block;

    color:#fff;

    font-size:15px;
    font-weight:700;

    letter-spacing:.2px;
}

#sidebarPanel .profileBox .text-muted{
    margin-top:2px;

    color:rgba(255,255,255,0.55) !important;

    font-size:12px;
}

/* =========================================
   CLOSE BUTTON
========================================= */

#sidebarPanel .sidebar-close{
    margin-left:auto;

    width:38px;
    height:38px;

    min-width:38px;

    border-radius:14px;

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

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,255,255,0.04);

    color:var(--text-muted) !important;

    transition:var(--transition);
}

#sidebarPanel .sidebar-close:hover{
    background:rgba(255,93,143,0.12);

    border-color:rgba(255,93,143,0.12);

    color:var(--danger) !important;

    transform:rotate(90deg);
}

#sidebarPanel .sidebar-close ion-icon{
    font-size:20px;
}

/* =========================================
   SECTION TITLE
========================================= */

#sidebarPanel .listview-title{
    padding:18px 18px 10px;

    color:var(--primary);

    font-size:12px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

/* =========================================
   MENU LIST
========================================= */

#sidebarPanel .image-listview{
    padding:0 12px !important;

    background:transparent !important;
}

#sidebarPanel .image-listview li{
    margin-bottom:8px;
}

/* =========================================
   MENU ITEM
========================================= */

#sidebarPanel .image-listview .item{
    position:relative;

    display:flex;
    align-items:center;

    gap:14px;

    min-height:64px;

    padding:12px 14px;

    border-radius:18px;

    text-decoration:none;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.02),
            rgba(255,255,255,0.01)
        );

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

    transition:all .2s ease;
}

/* =========================================
   HOVER
========================================= */

#sidebarPanel .image-listview .item:hover{
    transform:translateY(-2px);

    border-color:rgba(157,255,0,0.16);

    background:
        linear-gradient(
            135deg,
            rgba(157,255,0,0.08),
            rgba(157,255,0,0.02)
        );

    box-shadow:
        0 10px 20px rgba(0,0,0,0.18),
        0 0 20px rgba(157,255,0,0.04);
}

/* =========================================
   ICON BOX
========================================= */

#sidebarPanel .image-listview .icon-box{
    width:46px;
    height:46px;

    min-width:46px;

    border-radius:16px;

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

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 8px 16px rgba(0,0,0,0.16);
}

#sidebarPanel .image-listview .icon-box ion-icon{
    font-size:22px;

    color:var(--primary);
}

/* =========================================
   MENU TEXT
========================================= */

#sidebarPanel .image-listview .in{
    display:flex;
    align-items:center;

    flex:1;

    color:#fff;

    font-size:14px;
    font-weight:600;

    letter-spacing:.2px;
}

/* =========================================
   ACTIVE ITEM
========================================= */

#sidebarPanel .image-listview .item.active{
    background:
        linear-gradient(
            135deg,
            rgba(157,255,0,0.12),
            rgba(157,255,0,0.04)
        );

    border-color:rgba(157,255,0,0.16);

    box-shadow:
        0 0 20px rgba(157,255,0,0.05);
}

#sidebarPanel .image-listview .item.active .icon-box{
    background:
        linear-gradient(
            135deg,
            var(--primary),
            #d7ff87
        );
}

#sidebarPanel .image-listview .item.active .icon-box ion-icon{
    color:#081000;
}

/* =========================================
   LOGOUT
========================================= */

#sidebarPanel .image-listview .item.logout-item{
    margin-top:18px;

    border-color:rgba(255,93,143,0.08);

    background:
        linear-gradient(
            135deg,
            rgba(255,93,143,0.06),
            rgba(255,93,143,0.02)
        );
}

#sidebarPanel .image-listview .item.logout-item .icon-box{
    background:
        linear-gradient(
            135deg,
            #6b112b,
            #8f1d3c
        );

    border-color:rgba(255,93,143,0.12);
}

#sidebarPanel .image-listview .item.logout-item .icon-box ion-icon{
    color:#ffb6cb;
}

/* =========================================
   MODAL BACKDROP
========================================= */

.modal-backdrop.show{
    opacity:.82;

    backdrop-filter:blur(6px);

    background:#050805;
}

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

@media(max-width:767px){

    #sidebarPanel .modal-dialog{
        max-width:88%;
    }

    #sidebarPanel .profileBox{
        padding:20px 16px !important;
    }

    #sidebarPanel .profileBox .imaged{
        width:54px !important;
        height:54px !important;

        border-radius:16px;
    }

    #sidebarPanel .image-listview .item{
        min-height:60px;

        border-radius:16px;

        padding:11px 13px;
    }

    #sidebarPanel .image-listview .icon-box{
        width:42px;
        height:42px;

        min-width:42px;

        border-radius:14px;
    }

    #sidebarPanel .image-listview .icon-box ion-icon{
        font-size:20px;
    }

    #sidebarPanel .image-listview .in{
        font-size:13px;
    }

}
/* =========================================
   ICO GATEWAY CARD
   AUDITED + CLEANED
========================================= */

.gateway-card{
    position:relative;

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

    gap:16px;

    overflow:hidden;

    padding:16px;

    margin-bottom:18px;

    border-radius:24px;

    background:
        radial-gradient(circle at top right, rgba(157,255,0,0.08), transparent 28%),
        linear-gradient(
            180deg,
            rgba(255,255,255,0.02),
            rgba(255,255,255,0.01)
        ),
        linear-gradient(
            180deg,
            var(--panel),
            var(--panel-2)
        );

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

    box-shadow:
        0 14px 30px rgba(0,0,0,0.34),
        inset 0 1px 0 rgba(255,255,255,0.03);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}

/* =========================================
   GLOW
========================================= */

.gateway-glow{
    position:absolute;

    top:-60px;
    right:-60px;

    width:140px;
    height:140px;

    border-radius:50%;

    background:rgba(157,255,0,0.08);

    filter:blur(40px);

    pointer-events:none;
}

/* =========================================
   LEFT SIDE
========================================= */

.gateway-left{
    flex:1;

    min-width:0;

    position:relative;
    z-index:2;
}

/* =========================================
   LIVE BADGE
========================================= */

.gateway-badge{
    display:inline-flex;
    align-items:center;

    gap:5px;

    height:28px;

    padding:0 12px;

    margin-bottom:12px;

    border-radius:30px;

    background:rgba(157,255,0,0.10);

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

    color:var(--primary);

    font-size:10px;
    font-weight:700;

    letter-spacing:.5px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04);
}

.gateway-badge ion-icon{
    font-size:13px;
}

/* =========================================
   TOKEN ROW
========================================= */

.gateway-token-row{
    display:flex;
    align-items:center;

    gap:12px;

    margin-bottom:14px;
}

/* =========================================
   TOKEN ICON
========================================= */

.gateway-token-icon{
    width:58px;
    height:58px;

    min-width:58px;

    border-radius:18px;

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

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );

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

    box-shadow:
        0 8px 18px rgba(0,0,0,0.24),
        0 0 16px rgba(157,255,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.06);
}

.gateway-token-icon img{
    width:34px;
    height:34px;

    object-fit:contain;
}

/* =========================================
   TOKEN META
========================================= */

.gateway-token-meta{
    min-width:0;
}

.gateway-token-meta h3{
    margin:0 0 3px;

    color:#fff;

    font-size:20px;
    font-weight:700;

    letter-spacing:.2px;

    line-height:1.1;
}

.gateway-token-meta p{
    margin:0;

    color:var(--text-muted);

    font-size:12px;

    letter-spacing:.2px;

    white-space:nowrap;
}

/* =========================================
   PROGRESS
========================================= */

.gateway-progress-wrap{
    width:100%;
}

.gateway-progress-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    margin-bottom:8px;
}

.gateway-progress-top span{
    color:var(--text-muted);

    font-size:11px;

    white-space:nowrap;
}

.gateway-progress-top strong{
    color:var(--primary);

    font-size:12px;
    font-weight:700;

    white-space:nowrap;
}

/* =========================================
   PROGRESS BAR
========================================= */

.gateway-progress{
    position:relative;

    overflow:hidden;

    height:10px;

    border-radius:30px;

    background:rgba(255,255,255,0.04);

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

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.24);
}

.gateway-progress-fill{
    position:relative;

    height:100%;

    border-radius:30px;

    background:
        linear-gradient(
            90deg,
            var(--accent),
            var(--accent2)
        );

    box-shadow:
        0 0 18px rgba(157,255,0,0.16);
}

.gateway-progress-fill::after{
    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;
    bottom:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.22),
            transparent
        );
}

/* =========================================
   RIGHT SIDE
========================================= */

.gateway-right{
    width:92px;

    display:flex;
    flex-direction:column;

    align-items:flex-end;
    justify-content:space-between;

    gap:14px;

    position:relative;
    z-index:2;
}

/* =========================================
   PRICE
========================================= */

.gateway-price{
    text-align:right;
}

.gateway-price span{
    display:block;

    margin-bottom:4px;

    color:rgba(255,255,255,0.5);

    font-size:10px;
    font-weight:700;

    letter-spacing:1px;
}

.gateway-price strong{
    color:#fff;

    font-size:22px;
    font-weight:800;

    line-height:1;
}

/* =========================================
   ACTIONS
========================================= */

.gateway-actions{
    display:flex;

    gap:10px;
}

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

.gateway-btn{
    width:64px;
    height:64px;

    border-radius:18px;

    display:flex;
    flex-direction:column;

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

    gap:4px;

    text-decoration:none;

    transition:all .2s ease;

    user-select:none;

    position:relative;

    overflow:hidden;
}

.gateway-btn::before{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.12),
            transparent
        );

    opacity:.8;
}

.gateway-btn ion-icon{
    position:relative;
    z-index:2;

    font-size:20px;
}

.gateway-btn small{
    position:relative;
    z-index:2;

    font-size:9px;
    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

    line-height:1;

    opacity:.95;
}

/* =========================================
   PRIMARY BUTTON
========================================= */

.gateway-btn-primary{
    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );

    color:#fff;

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

    box-shadow:
        0 8px 18px rgba(0,0,0,0.24),
        0 0 18px rgba(157,255,0,0.05);
}

.gateway-btn-primary:hover{
    transform:translateY(-2px) scale(1.04);

    box-shadow:
        0 0 18px rgba(157,255,0,0.08),
        0 12px 22px rgba(0,0,0,0.26);
}

/* =========================================
   SECONDARY BUTTON
========================================= */

.gateway-btn-secondary{
    background:rgba(255,255,255,0.03);

    border:1px solid rgba(255,255,255,0.05);

    color:var(--text);
}

.gateway-btn-secondary:hover{
    background:rgba(157,255,0,0.06);

    border-color:rgba(157,255,0,0.12);

    color:var(--primary);

    transform:translateY(-2px);
}

/* =========================================
   ACTIVE PRESS
========================================= */

.gateway-btn:active{
    transform:scale(.96);
}

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

@media(max-width:767px){

    .gateway-card{
        padding:14px;

        border-radius:22px;

        gap:12px;
    }

    .gateway-token-row{
        gap:10px;

        margin-bottom:12px;
    }

    .gateway-token-icon{
        width:52px;
        height:52px;

        min-width:52px;

        border-radius:16px;
    }

    .gateway-token-icon img{
        width:30px;
        height:30px;
    }

    .gateway-token-meta h3{
        font-size:18px;
    }

    .gateway-token-meta p{
        font-size:11px;
    }

    .gateway-price strong{
        font-size:18px;
    }

    .gateway-right{
        width:84px;

        gap:12px;
    }

    .gateway-btn{
        width:58px;
        height:58px;

        border-radius:16px;
    }

    .gateway-btn ion-icon{
        font-size:18px;
    }

    .gateway-btn small{
        font-size:8px;
    }

}
/* =========================================
   TEAM STAT CARD
========================================= */

.stat-card{
    position:relative;

    overflow:hidden;

    min-height:138px;

    border-radius:24px !important;

    padding:16px !important;

    transition:all .2s ease;

    background:
        radial-gradient(circle at top right, rgba(157,255,0,0.08), transparent 28%),
        linear-gradient(
            180deg,
            rgba(255,255,255,0.02),
            rgba(255,255,255,0.01)
        ),
        linear-gradient(
            180deg,
            var(--panel),
            var(--panel-2)
        ) !important;

    border:1px solid rgba(157,255,0,0.06) !important;

    box-shadow:
        0 12px 24px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.03);
}

.stat-card:hover{
    transform:translateY(-3px);

    border-color:rgba(157,255,0,0.14) !important;

    box-shadow:
        0 0 20px rgba(157,255,0,0.05),
        0 18px 30px rgba(0,0,0,0.26);
}

/* =========================================
   TOP
========================================= */

.stat-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:18px;
}

/* =========================================
   ICON
========================================= */

.stat-card-icon{
    width:48px;
    height:48px;

    border-radius:16px;

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

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );

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

    box-shadow:
        0 8px 18px rgba(0,0,0,0.24),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

.stat-card-icon ion-icon{
    font-size:22px;

    color:#fff;
}

/* =========================================
   BADGE
========================================= */

.stat-card-badge{
    height:28px;

    padding:0 10px;

    border-radius:30px;

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

    background:rgba(157,255,0,0.08);

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

    color:var(--primary);

    font-size:10px;
    font-weight:700;

    letter-spacing:.5px;
}

.stat-card-badge.active{
    background:rgba(25,208,110,0.10);

    border-color:rgba(25,208,110,0.12);

    color:#1dd16f;
}

/* =========================================
   LABEL
========================================= */

.stat-card-label{
    color:var(--text-muted);

    font-size:13px;
    font-weight:500;

    margin-bottom:8px;

    line-height:1.4;
}

/* =========================================
   VALUE
========================================= */

.stat-card-value{
    color:#fff;

    font-size:28px;
    font-weight:800;

    line-height:1;

    letter-spacing:.3px;
}

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

@media(max-width:767px){

    .stat-card{
        min-height:128px;

        border-radius:22px !important;

        padding:14px !important;
    }

    .stat-card-top{
        margin-bottom:16px;
    }

    .stat-card-icon{
        width:42px;
        height:42px;

        border-radius:14px;
    }

    .stat-card-icon ion-icon{
        font-size:20px;
    }

    .stat-card-value{
        font-size:24px;
    }

}
/* =========================================
   PROFILE AVATAR
========================================= */

.profile-avatar-wrap{
    position:relative;

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

/* =========================================
   GLOW
========================================= */

.profile-avatar-glow{
    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

    background:rgba(157,255,0,0.08);

    filter:blur(40px);

    pointer-events:none;
}

/* =========================================
   LINK
========================================= */

.profile-avatar-link{
    position:relative;

    display:inline-flex;

    text-decoration:none;
}

/* =========================================
   FRAME
========================================= */

.profile-avatar-frame{
    position:relative;

    width:160px;
    height:160px;

    padding:6px;

    border-radius:38px;

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );

    box-shadow:
        0 18px 34px rgba(0,0,0,0.34),
        0 0 24px rgba(157,255,0,0.08);
}

/* =========================================
   IMAGE
========================================= */

.profile-avatar-img{
    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:32px;

    border:2px solid rgba(255,255,255,0.05);

    display:block;

    background:#111;
}

/* =========================================
   CAMERA BUTTON
========================================= */

.profile-avatar-camera{
    position:absolute;

    right:-4px;
    bottom:-4px;

    width:54px;
    height:54px;

    border-radius:18px;

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

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );

    border:3px solid var(--panel);

    box-shadow:
        0 10px 22px rgba(0,0,0,0.26);

    transition:all .2s ease;
}

.profile-avatar-camera ion-icon{
    font-size:24px;

    color:#fff;
}

.profile-avatar-link:hover .profile-avatar-camera{
    transform:translateY(-2px) scale(1.05);

    box-shadow:
        0 0 18px rgba(157,255,0,0.08),
        0 14px 24px rgba(0,0,0,0.28);
}

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

@media(max-width:767px){

    .profile-avatar-frame{
        width:140px;
        height:140px;

        border-radius:32px;
    }

    .profile-avatar-img{
        border-radius:26px;
    }

    .profile-avatar-camera{
        width:48px;
        height:48px;

        border-radius:16px;
    }

    .profile-avatar-camera ion-icon{
        font-size:22px;
    }

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

.ico-slim-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    margin-bottom:14px;
}

.ico-slim-title{
    color:#fff;

    font-size:18px;
    font-weight:800;
}

.ico-slim-subtitle{
    margin-top:2px;

    color:var(--text-muted);

    font-size:11px;
}

.ico-slim-live{
    height:28px;

    padding:0 12px;

    border-radius:30px;

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

    gap:7px;

    background:rgba(24,184,91,0.10);

    border:1px solid rgba(24,184,91,0.12);

    color:#1dd16f;

    font-size:10px;
    font-weight:700;
}

.ico-slim-live span{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#1dd16f;

    box-shadow:
        0 0 12px rgba(24,184,91,0.30);
}

/* =========================================
   TIMELINE
========================================= */

.ico-slim-timeline{
    display:flex;
    flex-direction:column;

    gap:10px;
}

/* =========================================
   ITEM
========================================= */

.ico-slim-item{
    display:flex;

    gap:10px;

    align-items:stretch;
}

/* =========================================
   NODE
========================================= */

.ico-slim-node{
    position:relative;

    width:18px;

    display:flex;
    justify-content:center;

    flex-shrink:0;
}

.ico-slim-dot{
    position:relative;

    z-index:2;

    width:10px;
    height:10px;

    margin-top:22px;

    border-radius:50%;

    border:2px solid rgba(10,12,10,1);
}

.ico-slim-dot.live{
    background:#1dd16f;

    box-shadow:
        0 0 14px rgba(24,184,91,0.34);
}

.ico-slim-dot.upcoming{
    background:#ffd54d;

    box-shadow:
        0 0 14px rgba(255,193,7,0.28);
}

.ico-slim-dot.closed{
    background:#b9c0cb;
}

.ico-slim-line{
    position:absolute;

    top:34px;
    bottom:-12px;

    width:2px;

    border-radius:20px;

    background:
        linear-gradient(
            180deg,
            rgba(157,255,0,0.22),
            rgba(157,255,0,0.02)
        );
}

/* =========================================
   CARD
========================================= */

.ico-slim-card{
    flex:1;

    position:relative;

    overflow:hidden;

    border-radius:18px;

    padding:12px;

    background:
        radial-gradient(circle at top right, rgba(157,255,0,0.05), transparent 32%),
        linear-gradient(
            180deg,
            rgba(255,255,255,0.02),
            rgba(255,255,255,0.01)
        ),
        linear-gradient(
            180deg,
            var(--panel),
            var(--panel-2)
        );

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

    box-shadow:
        0 10px 20px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.03);

    transition:all .2s ease;
}

.ico-slim-card:hover{
    transform:translateY(-2px);

    border-color:rgba(157,255,0,0.10);
}

/* =========================================
   TOP
========================================= */

.ico-slim-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:10px;

    margin-bottom:10px;
}

.ico-slim-round{
    color:#fff;

    font-size:15px;
    font-weight:800;

    line-height:1.2;
}

.ico-slim-date{
    margin-top:3px;

    color:var(--text-muted);

    font-size:10px;
}

/* =========================================
   STATUS
========================================= */

.ico-slim-status{
    height:24px;

    padding:0 8px;

    border-radius:20px;

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

    text-transform:uppercase;

    font-size:9px;
    font-weight:700;

    letter-spacing:.4px;

    flex-shrink:0;
}

.ico-slim-status.live{
    background:rgba(24,184,91,0.10);

    border:1px solid rgba(24,184,91,0.12);

    color:#1dd16f;
}

.ico-slim-status.upcoming{
    background:rgba(255,193,7,0.10);

    border:1px solid rgba(255,193,7,0.12);

    color:#ffd54d;
}

.ico-slim-status.closed{
    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,255,255,0.06);

    color:#bcc2ce;
}

/* =========================================
   MIDDLE
========================================= */

.ico-slim-middle{
    display:grid;

    grid-template-columns:110px 1fr;

    gap:10px;

    margin-bottom:10px;
}

/* =========================================
   PRICE
========================================= */

.ico-slim-price-box{
    padding:10px;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            rgba(157,255,0,0.10),
            rgba(157,255,0,0.03)
        );

    border:1px solid rgba(157,255,0,0.08);
}

.ico-slim-price{
    color:#fff;

    font-size:22px;
    font-weight:900;

    line-height:1;
}

.ico-slim-unit{
    margin-top:3px;

    color:var(--primary);

    font-size:10px;
    font-weight:700;
}

/* =========================================
   CAPS
========================================= */

.ico-slim-caps{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8px;
}

.ico-slim-cap{
    padding:10px;

    border-radius:14px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.02),
            rgba(255,255,255,0.01)
        );

    border:1px solid rgba(157,255,0,0.05);
}

.ico-slim-cap span{
    display:block;

    color:var(--text-muted);

    font-size:9px;

    margin-bottom:5px;

    text-transform:uppercase;
}

.ico-slim-cap strong{
    color:#fff;

    font-size:11px;
    font-weight:700;
}

/* =========================================
   PROGRESS
========================================= */

.ico-slim-progress-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:6px;

    color:var(--text-muted);

    font-size:10px;
    font-weight:600;
}

.ico-slim-progress-top strong{
    color:#fff;
}

.ico-slim-progress{
    overflow:hidden;

    height:6px;

    border-radius:20px;

    background:rgba(255,255,255,0.05);

    margin-bottom:10px;
}

.ico-slim-progress-fill{
    height:100%;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            var(--accent),
            var(--accent2)
        );

    box-shadow:
        0 0 12px rgba(157,255,0,0.16);
}

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

.ico-slim-btn,
.ico-slim-disabled{
    width:100%;
    height:36px;

    border-radius:12px;

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

    gap:6px;

    text-decoration:none;

    font-size:12px;
    font-weight:700;
}

.ico-slim-btn{
    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );

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

    color:#fff;

    box-shadow:
        0 8px 16px rgba(0,0,0,0.18);

    transition:all .2s ease;
}

.ico-slim-btn:hover{
    transform:translateY(-1px);

    color:#fff;
}

.ico-slim-disabled{
    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,255,255,0.05);

    color:var(--text-muted);
}

/* =========================================
   LIVE CARD
========================================= */

.ico-slim-item.live .ico-slim-card{
    border-color:rgba(24,184,91,0.10);

    box-shadow:
        0 0 20px rgba(24,184,91,0.04),
        0 12px 24px rgba(0,0,0,0.24);
}

/* =========================================
   DESKTOP FIX
========================================= */

@media(min-width:768px){

    .ico-slim-timeline{
        max-width:820px;
    }


}

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

@media(max-width:767px){

    .ico-slim-card{
        padding:11px;
    }

    .ico-slim-middle{
        grid-template-columns:1fr;
    }

    .ico-slim-caps{
        grid-template-columns:1fr 1fr;
    }

    .ico-slim-price{
        font-size:20px;
    }

}

@media(max-width:480px){

    .ico-slim-caps{
        grid-template-columns:1fr;
    }

    .ico-slim-top{
        flex-direction:column;

        align-items:flex-start;
    }

}
/* =========================================
   ICOX SLEEK BUY UI
========================================= */

.icox-shell{
    position:relative;

    padding:18px;

    border-radius:28px;

    overflow:hidden;

    background:
        radial-gradient(circle at top right, rgba(157,255,0,0.08), transparent 28%),
        linear-gradient(
            180deg,
            rgba(255,255,255,0.02),
            rgba(255,255,255,0.01)
        ),
        linear-gradient(
            180deg,
            var(--panel),
            var(--panel-2)
        );

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

    box-shadow:
        0 16px 40px rgba(0,0,0,0.30),
        inset 0 1px 0 rgba(255,255,255,0.03);

    backdrop-filter:blur(18px);
}

/* =========================================
   TOP
========================================= */

.icox-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:14px;

    margin-bottom:16px;
}

.icox-top-left{
    flex:1;
    min-width:0;
}

/* =========================================
   LIVE
========================================= */

.icox-live-pill{
    display:inline-flex;
    align-items:center;

    gap:7px;

    height:28px;

    padding:0 12px;

    border-radius:999px;

    margin-bottom:12px;

    background:rgba(157,255,0,0.08);

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

    color:var(--primary);

    font-size:10px;
    font-weight:700;

    letter-spacing:.7px;
}

.icox-live-pill span{
    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--primary);

    box-shadow:0 0 12px rgba(157,255,0,0.35);
}

/* =========================================
   TITLE
========================================= */

.icox-round-name{
    color:#fff;

    font-size:28px;
    font-weight:800;

    line-height:1.05;

    letter-spacing:-0.4px;
}

.icox-round-sub{
    margin-top:6px;

    color:var(--text-muted);

    font-size:12px;
}

/* =========================================
   PRICE
========================================= */

.icox-price-box{
    padding:12px 14px;

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            rgba(157,255,0,0.10),
            rgba(157,255,0,0.03)
        );

    border:1px solid rgba(157,255,0,0.08);
}

.icox-price-label{
    color:var(--text-muted);

    font-size:9px;
    font-weight:700;

    letter-spacing:1px;

    margin-bottom:6px;
}

.icox-price-row{
    display:flex;
    align-items:flex-end;

    gap:6px;
}

.icox-price{
    color:#fff;

    font-size:26px;
    font-weight:900;

    line-height:1;
}

.icox-price-unit{
    color:var(--primary);

    font-size:11px;
    font-weight:700;

    margin-bottom:3px;
}

/* =========================================
   INLINE STATS
========================================= */

.icox-mini-stats{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    padding:14px 4px;

    margin-bottom:16px;
}

.icox-mini-stat{
    flex:1;

    min-width:0;

    text-align:center;
}

.icox-mini-label{
    color:var(--text-muted);

    font-size:9px;
    font-weight:700;

    letter-spacing:.8px;

    margin-bottom:6px;
}

.icox-mini-value{
    color:#fff;

    font-size:15px;
    font-weight:800;

    white-space:nowrap;

    overflow:hidden;
    text-overflow:ellipsis;
}

.icox-mini-divider{
    width:1px;
    height:34px;

    background:rgba(157,255,0,0.08);
}

/* =========================================
   FORM
========================================= */

.icox-form2{
    display:flex;
    flex-direction:column;

    gap:14px;
}

/* =========================================
   INPUT SHELL
========================================= */

.icox-input-shell{
    padding:16px;

    border-radius:24px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.02),
            rgba(255,255,255,0.01)
        );

    border:1px solid rgba(157,255,0,0.06);
}

.icox-input-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    margin-bottom:14px;
}

.icox-input-title{
    color:#fff;

    font-size:13px;
    font-weight:700;
}

.icox-input-hint{
    color:var(--text-muted);

    font-size:11px;
}

/* =========================================
   INPUT
========================================= */

.icox-amount-wrap{
    position:relative;
}

.icox-amount-input{
    width:100%;
    height:64px;

    border:none;
    outline:none;

    border-radius:18px;

    padding:0 82px 0 18px;

    background:rgba(255,255,255,0.03);

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

    color:#fff;

    font-size:28px;
    font-weight:900;

    transition:var(--transition);
}

.icox-amount-input:focus{
    border-color:rgba(157,255,0,0.18);

    background:rgba(157,255,0,0.03);

    box-shadow:
        0 0 0 4px rgba(157,255,0,0.05);
}

.icox-input-currency{
    position:absolute;

    top:50%;
    right:18px;

    transform:translateY(-50%);

    color:var(--primary);

    font-size:12px;
    font-weight:800;
}

/* =========================================
   PRESETS
========================================= */

.icox-preset-row{
    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:8px;

    margin-top:12px;
}

.icox-preset{
    width:100%;

    min-width:0;

    height:34px;

    border:none;

    border-radius:12px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.03),
            rgba(255,255,255,0.015)
        );

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

    color:#dbe7d6;

    font-size:10px;
    font-weight:700;

    letter-spacing:.3px;

    transition:var(--transition);

    overflow:hidden;

    white-space:nowrap;
    text-overflow:ellipsis;
}

.icox-preset:hover{
    background:
        linear-gradient(
            135deg,
            rgba(157,255,0,0.10),
            rgba(157,255,0,0.03)
        );

    border-color:rgba(157,255,0,0.12);

    color:#fff;

    transform:translateY(-1px);
}

/* =========================================
   RECEIVE STRIP
========================================= */

.icox-receive-strip{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:14px;

    padding:16px 18px;

    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            rgba(157,255,0,0.10),
            rgba(157,255,0,0.03)
        );

    border:1px solid rgba(157,255,0,0.08);
}

.icox-receive-label{
    color:var(--text-muted);

    font-size:10px;
    font-weight:700;

    letter-spacing:.8px;

    margin-bottom:6px;
}

.icox-receive-amount{
    display:flex;
    align-items:flex-end;

    gap:6px;

    color:#fff;

    font-size:28px;
    font-weight:900;

    line-height:1;
}

.icox-receive-amount small{
    color:var(--primary);

    font-size:12px;
    font-weight:700;

    margin-bottom:4px;
}

.icox-receive-icon{
    width:48px;
    height:48px;

    min-width:48px;

    border-radius:16px;

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

    background:rgba(157,255,0,0.10);

    color:var(--primary);

    font-size:20px;
}

/* =========================================
   MESSAGE
========================================= */

.icox-inline-message{
    min-height:16px;

    color:var(--warning);

    font-size:11px;
    font-weight:600;
}

.icox-inline-status{
    min-height:16px;

    color:var(--text-muted);

    font-size:11px;
}

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

.icox-action-btn{
    width:100%;
    height:54px;

    border:none;
    outline:none;

    border-radius:18px;

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

    gap:8px;

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );

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

    color:#fff;

    font-size:14px;
    font-weight:800;

    box-shadow:
        0 10px 22px rgba(0,0,0,0.22);

    transition:var(--transition);
}

.icox-action-btn:hover{
    transform:translateY(-1px);
}

.icox-action-btn:disabled{
    opacity:.45;

    cursor:not-allowed;

    transform:none;
}

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

@media(max-width:767px){

    .icox-shell{
        padding:16px;

        border-radius:24px;
    }

    .icox-top{
        align-items:flex-start;
    }

    .icox-round-name{
        font-size:24px;
    }

    .icox-price{
        font-size:22px;
    }

    .icox-mini-value{
        font-size:13px;
    }

    .icox-amount-input{
        height:58px;

        font-size:22px;
    }

    .icox-receive-amount{
        font-size:24px;
    }

}

@media(max-width:520px){

    .icox-shell{
        padding:14px;
    }

    .icox-top{
        flex-direction:column;

        gap:12px;
    }

    .icox-price-box{
        width:100%;
    }

    .icox-mini-stats{
        overflow-x:auto;

        padding-bottom:4px;

        gap:14px;
    }

    .icox-mini-stat{
        min-width:70px;
    }

    .icox-mini-divider{
        display:none;
    }

    .icox-input-shell{
        padding:14px;
    }

    .icox-input-top{
        flex-direction:column;
        align-items:flex-start;

        gap:4px;
    }

    .icox-amount-input{
        height:54px;

        font-size:20px;

        padding-right:72px;
    }

    

    .icox-receive-strip{
        padding:14px;
    }

    .icox-receive-amount{
        font-size:22px;
    }

    .icox-action-btn{
        height:50px;

        font-size:13px;
    }

}
/* =========================================
   ACTIVATION CTA CARD
   FULL REFINED VERSION
   MATCHING YOUR DARK GLASS LIME THEME
========================================= */

.activation-card{
    position:relative;

    overflow:hidden;

    padding:20px;

    margin-bottom:18px;

    border-radius:24px;

    background:
        radial-gradient(
            circle at top right,
            rgba(157,255,0,0.04),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,0.015),
            rgba(255,255,255,0.008)
        ),
        linear-gradient(
            180deg,
            var(--panel),
            var(--panel-2)
        );

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

    backdrop-filter:blur(18px);

    box-shadow:
        0 14px 34px rgba(0,0,0,0.34),
        inset 0 1px 0 rgba(255,255,255,0.03);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.activation-card:hover{
    transform:translateY(-2px);
}

/* =========================================
   TOP GLOW
========================================= */

.activation-card::before{
    content:"";

    position:absolute;

    top:-70px;
    right:-70px;

    width:180px;
    height:180px;

    border-radius:50%;

    filter:blur(42px);

    pointer-events:none;

    animation:activationGlow 5s ease-in-out infinite;
}

/* =========================================
   ACTIVE STATE
========================================= */

.activation-card.active{

    border-color:rgba(125,255,122,0.14);

    box-shadow:
        0 0 24px rgba(125,255,122,0.04),
        0 18px 36px rgba(0,0,0,0.36);
}

.activation-card.active::before{
    background:rgba(125,255,122,0.08);
}

/* =========================================
   INACTIVE STATE
========================================= */

.activation-card.inactive{

    border-color:rgba(255,93,143,0.16);

    background:
        radial-gradient(
            circle at top right,
            rgba(255,93,143,0.06),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,0.015),
            rgba(255,255,255,0.008)
        ),
        linear-gradient(
            180deg,
            #251019,
            #1a0c13
        );

    box-shadow:
        0 0 24px rgba(255,93,143,0.05),
        0 18px 36px rgba(0,0,0,0.36);
}

.activation-card.inactive::before{
    background:rgba(255,93,143,0.10);
}

/* =========================================
   TOP LAYOUT
========================================= */

.activation-top{
    position:relative;
    z-index:2;

    display:flex;

    align-items:flex-start;

    gap:14px;
}

/* =========================================
   ICON
========================================= */

.activation-icon{
    width:58px;
    height:58px;

    min-width:58px;

    margin-top:2px;

    border-radius:18px;

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

    flex-shrink:0;

    position:relative;

    box-shadow:
        0 10px 22px rgba(0,0,0,0.24),
        inset 0 1px 0 rgba(255,255,255,0.04);

    animation:activationFloat 3s ease-in-out infinite;
}

.activation-icon ion-icon{
    font-size:26px;
}

/* ACTIVE ICON */

.activation-card.active .activation-icon{

    background:
        linear-gradient(
            135deg,
            rgba(24,184,91,0.18),
            rgba(24,184,91,0.08)
        );

    border:1px solid rgba(24,184,91,0.14);
}

.activation-card.active .activation-icon ion-icon{
    color:#7dff7a;
}

/* INACTIVE ICON */

.activation-card.inactive .activation-icon{

    background:
        linear-gradient(
            135deg,
            rgba(255,93,143,0.18),
            rgba(255,93,143,0.08)
        );

    border:1px solid rgba(255,93,143,0.16);
}

.activation-card.inactive .activation-icon ion-icon{
    color:#ff7ba5;
}

/* =========================================
   CONTENT
========================================= */

.activation-content{
    flex:1;

    min-width:0;

    padding-top:2px;
}

.activation-title{
    margin:0 0 8px;

    font-size:20px;
    font-weight:800;

    line-height:1.15;

    letter-spacing:.2px;

    color:#fff;
}

.activation-subtitle{
    margin:0;

    font-size:12px;

    line-height:1.72;

    color:var(--text-muted);

    max-width:92%;
}

/* =========================================
   BADGES
========================================= */

.activation-badge{
    height:30px;

    min-width:88px;

    padding:0 14px;

    margin-top:2px;

    border-radius:999px;

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

    flex-shrink:0;

    font-size:10px;
    font-weight:800;

    letter-spacing:.8px;
}

/* ACTIVE BADGE */

.activation-badge.success{

    background:rgba(24,184,91,0.12);

    border:1px solid rgba(24,184,91,0.16);

    color:#7dff7a;

    box-shadow:
        0 0 16px rgba(24,184,91,0.08);
}

/* INACTIVE BADGE */

.activation-badge.danger{

    background:rgba(255,93,143,0.12);

    border:1px solid rgba(255,93,143,0.18);

    color:#ff7ba5;

    box-shadow:
        0 0 16px rgba(255,93,143,0.08);
}

/* =========================================
   FOOTER
========================================= */

.activation-footer{
    position:relative;
    z-index:2;

    margin-top:20px;
}

/* =========================================
   CTA BUTTON
========================================= */

.activation-btn{
    position:relative;

    overflow:hidden;

    width:100%;
    height:58px;

    border:none;
    outline:none;

    border-radius:18px;

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

    gap:10px;

    text-decoration:none;

    background:
        linear-gradient(
            135deg,
            #8f1238,
            #c61f5d
        );

    border:1px solid rgba(255,93,143,0.22);

    color:#fff;

    font-size:15px;
    font-weight:700;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease;

    box-shadow:
        0 14px 28px rgba(255,93,143,0.18),
        inset 0 1px 0 rgba(255,255,255,0.06);
}

.activation-btn ion-icon{
    font-size:20px;

    color:#ffd5e2;
}

.activation-btn:hover{

    transform:translateY(-2px);

    filter:brightness(1.03);

    box-shadow:
        0 0 24px rgba(255,93,143,0.16),
        0 18px 38px rgba(255,93,143,0.22);
}

.activation-btn:active{
    transform:scale(.985);
}

/* BUTTON SHINE */

.activation-btn::before{
    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:70%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.12),
            transparent
        );

    transform:skewX(-20deg);

    animation:activationShine 3s linear infinite;
}

/* =========================================
   META TEXT
========================================= */

.activation-meta{
    margin-top:12px;

    text-align:center;

    color:rgba(255,255,255,0.42);

    font-size:11px;

    letter-spacing:.2px;
}

/* =========================================
   ANIMATIONS
========================================= */

@keyframes activationGlow{

    0%,100%{
        transform:scale(1);
        opacity:.8;
    }

    50%{
        transform:scale(1.08);
        opacity:1;
    }
}

@keyframes activationFloat{

    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-2px);
    }
}

@keyframes activationShine{

    0%{
        left:-120%;
    }

    100%{
        left:130%;
    }
}

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


@media(max-width:767px){

    .activation-card{
        padding:18px;

        border-radius:22px;
    }

    .activation-top{
        gap:12px;
    }

    .activation-icon{
        width:52px;
        height:52px;

        min-width:52px;

        border-radius:16px;
    }

    .activation-icon ion-icon{
        font-size:24px;
    }

    .activation-title{
        font-size:17px;
    }

    .activation-subtitle{
        font-size:11px;

        max-width:100%;
    }

    .activation-badge{
        height:28px;

        min-width:78px;

        padding:0 10px;

        font-size:9px;
    }

    .activation-btn{
        height:54px;

        border-radius:16px;

        font-size:14px;
    }

}
/* =========================================
   PACKAGE GRID
========================================= */

.package-grid-v2{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* =========================================
   CARD
========================================= */

.pkg-card{
    position:relative;

    overflow:hidden;

    border-radius:26px;

    padding:18px;

    background:
        radial-gradient(circle at top right,
        rgba(157,255,0,0.08),
        transparent 32%),

        linear-gradient(
            180deg,
            rgba(255,255,255,0.02),
            rgba(255,255,255,0.01)
        ),

        linear-gradient(
            180deg,
            var(--panel),
            var(--panel-2)
        );

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

    box-shadow:
        0 16px 36px rgba(0,0,0,0.32),
        inset 0 1px 0 rgba(255,255,255,0.03);

    transition:all .24s ease;
}

.pkg-card:hover{
    transform:translateY(-2px);

    border-color:rgba(157,255,0,0.14);

    box-shadow:
        0 0 22px rgba(157,255,0,0.06),
        0 22px 42px rgba(0,0,0,0.36);
}

/* =========================================
   GLOW
========================================= */

.pkg-glow{
    position:absolute;

    top:-70px;
    right:-70px;

    width:180px;
    height:180px;

    border-radius:50%;

    background:rgba(157,255,0,0.08);

    filter:blur(44px);

    pointer-events:none;
}

/* =========================================
   TOP
========================================= */

.pkg-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    position:relative;
    z-index:2;

    margin-bottom:20px;
}

/* =========================================
   TIER
========================================= */

.pkg-tier{
    display:flex;
    align-items:center;
    gap:14px;
}

.pkg-tier-icon{
    width:56px;
    height:56px;

    min-width:56px;

    border-radius:18px;

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

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );

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

    box-shadow:
        0 10px 22px rgba(0,0,0,0.24);
}

.pkg-tier-icon ion-icon{
    font-size:28px;

    color:var(--primary);
}

.pkg-tier-name{
    color:#fff;

    font-size:20px;
    font-weight:800;

    line-height:1.1;
}

.pkg-tier-sub{
    margin-top:4px;

    color:var(--text-muted);

    font-size:11px;
}

/* =========================================
   LIVE
========================================= */

.pkg-live{
    height:30px;

    padding:0 12px;

    border-radius:999px;

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

    gap:7px;

    background:rgba(24,184,91,0.10);

    border:1px solid rgba(24,184,91,0.14);

    color:#7dff7a;

    font-size:10px;
    font-weight:800;

    letter-spacing:.7px;
}

.pkg-live span{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#7dff7a;

    box-shadow:
        0 0 12px rgba(24,184,91,0.34);
}

/* =========================================
   MAIN LAYOUT
========================================= */

.pkg-main{
    display:flex;
    align-items:stretch;

    gap:16px;

    margin-bottom:18px;
}

/* =========================================
   LEFT
========================================= */

.pkg-left{
    flex:1;

    min-width:0;

    padding:18px;

    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            rgba(157,255,0,0.08),
            rgba(157,255,0,0.02)
        );

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

    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* =========================================
   PRICE
========================================= */

.pkg-price-label{
    color:var(--text-muted);

    font-size:10px;
    font-weight:700;

    letter-spacing:1px;

    margin-bottom:10px;
}

.pkg-price{
    display:flex;
    align-items:flex-end;

    gap:8px;

    color:#fff;

    font-size:34px;
    font-weight:900;

    line-height:1;
}

.pkg-price small{
    color:var(--primary);

    font-size:13px;
    font-weight:700;

    margin-bottom:4px;
}

.pkg-price-range{
    margin-top:10px;

    color:var(--text-muted);

    font-size:11px;
}

/* =========================================
   RIGHT
========================================= */

.pkg-right{
    width:46%;

    display:flex;
    flex-direction:column;

    gap:10px;
}

/* =========================================
   FEATURE
========================================= */

.pkg-feature{
    flex:1;

    display:flex;
    align-items:center;

    gap:12px;

    padding:12px;

    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.02),
            rgba(255,255,255,0.01)
        );

    border:1px solid rgba(157,255,0,0.05);
}

.pkg-feature-icon{
    width:42px;
    height:42px;

    min-width:42px;

    border-radius:14px;

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

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );

    border:1px solid rgba(157,255,0,0.10);
}

.pkg-feature-icon ion-icon{
    font-size:18px;

    color:var(--primary);
}

.pkg-feature-text{
    min-width:0;
}

.pkg-feature-title{
    color:#fff;

    font-size:13px;
    font-weight:700;

    line-height:1.2;
}

.pkg-feature-sub{
    margin-top:3px;

    color:var(--text-muted);

    font-size:10px;
}

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

.pkg-btn{
    position:relative;

    overflow:hidden;

    width:100%;
    height:56px;

    border-radius:18px;

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

    gap:10px;

    text-decoration:none;

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );

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

    color:#fff;

    font-size:15px;
    font-weight:800;

    box-shadow:
        0 14px 28px rgba(0,0,0,0.24);

    transition:all .22s ease;
}

.pkg-btn:hover{
    transform:translateY(-2px);

    color:#fff;

    box-shadow:
        0 0 22px rgba(157,255,0,0.08),
        0 18px 34px rgba(0,0,0,0.28);
}

.pkg-btn ion-icon{
    font-size:20px;

    color:var(--primary);
}

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

@media(max-width:767px){

    .pkg-card{
        padding:16px;

        border-radius:22px;
    }

    .pkg-main{
        flex-direction:column;
    }

    .pkg-right{
        width:100%;
    }

    .pkg-tier-icon{
        width:50px;
        height:50px;

        min-width:50px;
    }

    .pkg-tier-name{
        font-size:18px;
    }

    .pkg-price{
        font-size:30px;
    }

    .pkg-btn{
        height:52px;

        font-size:14px;
    }
}
.wallet-tabs{
    display:flex;
    gap:4px;
    padding:4px;
    margin-bottom:14px;
    border-radius:14px;
    background:rgba(255,255,255,0.03);
    border:1px solid var(--border);
}

.wallet-tab{
    flex:1;
    height:38px;
    border:0;
    cursor:pointer;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    color:var(--text-muted);
    background:transparent;
    transition:.25s;
}

.wallet-tab.active{
    background:linear-gradient(
        135deg,
        var(--accent),
        var(--accent2)
    );
    color:#fff;
    box-shadow:0 4px 14px rgba(157,255,0,.15);
}

.wallet-balance-view{
    display:none;
}

.wallet-balance-view.active{
    display:block;
}
.market-card{
    position:relative;

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

    gap:14px;

    overflow:hidden;

    margin-bottom:18px;
    padding:14px 16px;

    border-radius:22px;

    cursor:pointer;

    background:
        radial-gradient(
            circle at top right,
            rgba(157,255,0,0.08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,0.02),
            rgba(255,255,255,0.01)
        ),
        linear-gradient(
            180deg,
            var(--panel),
            var(--panel-2)
        );

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

    box-shadow:
        0 12px 28px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.03);

    transition:all .22s ease;
}

.market-card:hover{
    transform:translateY(-2px);

    border-color:rgba(157,255,0,0.18);

    box-shadow:
        0 0 18px rgba(157,255,0,0.05),
        0 16px 30px rgba(0,0,0,0.28);
}

.market-card-glow{
    position:absolute;
    top:-50px;
    right:-50px;

    width:120px;
    height:120px;

    border-radius:50%;

    background:rgba(157,255,0,0.08);

    filter:blur(40px);

    pointer-events:none;
}

.market-card-left{
    display:flex;
    align-items:center;
    gap:12px;

    position:relative;
    z-index:2;
}

.market-icon{
    width:52px;
    height:52px;

    border-radius:16px;

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

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );

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

    box-shadow:
        0 8px 18px rgba(0,0,0,0.22);
}

.market-icon ion-icon{
    font-size:24px;
    color:#fff;
}

.market-pair{
    color:#fff;

    font-size:15px;
    font-weight:800;

    line-height:1.1;
}

.market-label{
    margin-top:4px;

    color:var(--text-muted);

    font-size:11px;
}

.market-card-right{
    text-align:right;

    position:relative;
    z-index:2;
}

.market-price{
    color:var(--primary);

    font-size:22px;
    font-weight:900;

    line-height:1;
}

.market-status{
    margin-top:5px;

    display:inline-flex;

    padding:4px 10px;

    border-radius:30px;

    background:rgba(24,184,91,0.10);

    border:1px solid rgba(24,184,91,0.12);

    color:#1dd16f;

    font-size:9px;
    font-weight:700;

    letter-spacing:.6px;
}
.referral-card{
    position:relative;

    overflow:hidden;

    margin-bottom:18px;
    padding:16px;

    border-radius:24px;

    background:
        radial-gradient(
            circle at top right,
            rgba(157,255,0,.08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.02),
            rgba(255,255,255,.01)
        ),
        linear-gradient(
            180deg,
            var(--panel),
            var(--panel-2)
        );

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

    box-shadow:
        0 14px 30px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.03);
}

.referral-glow{
    position:absolute;

    top:-60px;
    right:-60px;

    width:140px;
    height:140px;

    border-radius:50%;

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

    filter:blur(40px);

    pointer-events:none;
}

.referral-card-top{
    margin-bottom:14px;
}

.referral-badge{
    display:inline-flex;
    align-items:center;

    gap:6px;

    padding:6px 12px;

    border-radius:30px;

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

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

    color:var(--primary);

    font-size:10px;
    font-weight:700;
}

.referral-main{
    display:flex;
    gap:14px;
    align-items:center;
}

.referral-qr-wrap{
    flex-shrink:0;
}

.referral-qr{
    width:82px;
    height:82px;

    border-radius:20px;

    padding:5px;

    background:#fff;

    cursor:pointer;

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

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

.referral-content{
    flex:1;
    min-width:0;
}

.referral-title{
    color:#fff;

    font-size:16px;
    font-weight:800;
}

.referral-subtitle{
    margin-top:4px;

    color:var(--text-muted);

    font-size:12px;

    line-height:1.5;

    margin-bottom:12px;
}

.referral-link-box{
    width:100%;
}

.referral-input{
    width:100%;
    height:46px;

    border:none;
    outline:none;

    border-radius:14px;

    padding:0 14px;

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

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

    color:var(--primary);

    font-size:12px;
    font-weight:600;
}

.referral-actions{
    display:flex;

    gap:10px;

    margin-top:14px;
}

.referral-btn{
    flex:1;

    height:46px;

    border:none;

    border-radius:14px;

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

    gap:8px;

    text-decoration:none;

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

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

    color:#fff;

    font-size:13px;
    font-weight:700;

    transition:.2s;
}

.referral-btn:hover{
    transform:translateY(-2px);
    color:#fff;
}

.referral-btn-primary{
    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );

    border-color:
        rgba(157,255,0,.14);
}

.referral-modal{
    background:
        linear-gradient(
            180deg,
            var(--panel),
            var(--panel-2)
        );

    border-radius:24px;

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

.referral-modal-header{
    padding:18px 18px 0;
}

.referral-modal-title{
    color:#fff;

    font-size:18px;
    font-weight:800;
}

.referral-modal-subtitle{
    color:var(--text-muted);

    font-size:12px;

    margin-top:4px;
}

.referral-modal-body{
    padding:30px;

    text-align:center;
}

.referral-modal-qr{
    width:240px;
    max-width:100%;

    background:#fff;

    border-radius:20px;

    padding:10px;
}
.signup-logo-section{
    position:relative;

    text-align:center;

    margin-bottom:18px;
}

.signup-logo-img{
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:28px;
    padding:14px;
}
.tree-stats-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.tree-stat-card{
    padding:14px;

    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.02),
            rgba(255,255,255,.01)
        );

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03);
}

.tree-stat-label{
    color:var(--text-muted);

    font-size:11px;

    margin-bottom:8px;
}

.tree-stat-value{
    color:#fff;

    font-size:18px;
    font-weight:800;

    line-height:1.2;
}

.tree-stat-success{
    color:var(--success);
}

@media(max-width:767px){

    .tree-stat-card{
        padding:12px;
    }

    .tree-stat-value{
        font-size:16px;
    }

}
.blockchain-id-icon{
	width:84px;
	height:84px;
	margin:0 auto 20px;
	border-radius:24px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:linear-gradient(
		135deg,
		var(--accent),
		var(--accent2)
	);
	border:1px solid var(--border);
	box-shadow:var(--shadow-md);
}

.blockchain-id-icon ion-icon{
	font-size:40px;
	color:#fff;
}

.blockchain-id-content{
	text-align:center;
	margin-bottom:22px;
}

.blockchain-id-title{
	margin:0 0 8px;
	font-size:22px;
	font-weight:800;
	color:#fff;
}

.blockchain-id-description{
	margin:0;
	font-size:13px;
	line-height:1.8;
	color:var(--text-muted);
}

.blockchain-id-info-title{
	font-size:14px;
	font-weight:700;
	color:var(--primary);
	margin-bottom:12px;
}
.withdraw-guide{
    margin-top:18px;

    background:
        linear-gradient(
            180deg,
            rgba(157,255,0,.04),
            rgba(157,255,0,.02)
        );

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

    border-radius:18px;

    padding:18px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02),
        0 8px 20px rgba(0,0,0,.15);
}

.withdraw-guide-title{
    display:flex;
    align-items:center;
    gap:10px;

    color:var(--primary);

    font-size:15px;
    font-weight:700;

    margin-bottom:16px;
}

.withdraw-guide-title ion-icon{
    font-size:20px;
}

.withdraw-guide-item{
    display:flex;
    gap:12px;

    padding:12px 0;

    border-bottom:1px solid rgba(157,255,0,.06);
}

.withdraw-guide-item:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.withdraw-guide-item ion-icon{
    font-size:20px;
    color:var(--primary);
    margin-top:2px;
    flex-shrink:0;
}

.withdraw-guide-item strong{
    display:block;
    color:#fff;
    font-size:13px;
    margin-bottom:2px;
}

.withdraw-guide-item span{
    display:block;
    color:var(--text-muted);
    font-size:12px;
    line-height:1.6;
}

.withdraw-guide-item.danger{
    background:rgba(255,93,143,.05);
    border:1px solid rgba(255,93,143,.08);
    border-radius:12px;
    padding:12px;
    margin:6px 0;
}

.withdraw-guide-item.danger ion-icon{
    color:var(--danger);
}

.withdraw-guide-item.danger strong{
    color:#ff93b4;
}