* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {

    --bg: #08111d;
    --card: rgba(21, 29, 46, .72);
    --card2: rgba(34, 46, 70, .55);

    --green: #00e59b;
    --blue: #4b8cff;

    --text: #ffffff;
    --text2: #9eb0cb;

    --border: rgba(255, 255, 255, .08);

}

html {

    scroll-behavior: smooth;

}

body {

    background: var(--bg);
    color: var(--text);

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

    overflow-x: hidden;

    min-height: 100vh;

}

.bg1 {

    position: fixed;

    width: 550px;

    height: 550px;

    background: #00e59b33;

    filter: blur(180px);

    top: -220px;

    left: -150px;

    border-radius: 50%;

    z-index: -2;

}

.bg2 {

    position: fixed;

    width: 600px;

    height: 600px;

    background: #4b8cff33;

    filter: blur(180px);

    bottom: -260px;

    right: -200px;

    border-radius: 50%;

    z-index: -2;

}

header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(8,17,29,.85);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.navbar{
    max-width:1200px;
    height:70px;
    margin:auto;
    padding:0 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;
}

.logoIcon{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#00e59b,#4b8cff);
    color:#fff;
    font-size:16px;
    font-weight:700;
}

.logo h2{
    font-size:22px;
    font-weight:600;
    line-height:1;
    margin:0;
}

.logo span{
    display:block;
    margin-top:2px;
    font-size:11px;
    color:#94a3b8;
}

.navRight{
    display:flex;
    align-items:center;
    gap:12px;
}

#networkBadge{
    padding:8px 14px;
    border-radius:999px;
    background:#16233d;
    color:#00e59b;
    font-size:13px;
    border:1px solid rgba(255,255,255,.08);
}

#connectWallet{
    height:42px;
    padding:0 18px;
    border-radius:10px;
    background:linear-gradient(135deg,#00e59b,#00c987);
    color:#001d13;
    font-size:14px;
    font-weight:600;
}

#connectWallet:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 30px #00e59b55;

}

.hero {

    max-width: 1200px;

    margin: 60px auto;

    padding: 0 20px;

}

.hero h1 {

    font-size: 56px;

    margin-bottom: 10px;

}

.hero p {

    color: var(--text2);

    font-size: 18px;

}

.glass {

    background: var(--card);

    backdrop-filter: blur(15px);

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

    border-radius: 22px;

}

main {

    max-width: 1200px;

    margin: auto;

    padding: 20px;

}

.sectionTitle {

    font-size: 26px;

    font-weight: 700;

    margin-bottom: 25px;

}

.dashboard {

    padding: 30px;

}

.dashboardGrid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 20px;

}

.statCard {

    background: var(--card2);

    border-radius: 18px;

    padding: 22px;

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

    transition: .3s;

}

.statCard:hover {

    transform: translateY(-4px);

    border-color: #00e59b55;

}

.statCard h4 {

    color: var(--text2);

    font-size: 14px;

    margin-bottom: 12px;

}

.statCard p {

    font-size: 22px;

    font-weight: 600;

    word-break: break-word;

}

.progressSection {

    margin-top: 35px;

}

.progressInfo {

    display: flex;

    justify-content: space-between;

    margin-bottom: 12px;

}

.progressBar {

    width: 100%;

    height: 18px;

    background: #16233d;

    border-radius: 30px;

    overflow: hidden;

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

}

#progressFill {

    width: 0%;

    height: 100%;

    border-radius: 30px;

    background: linear-gradient(90deg, var(--green), var(--blue));

    transition: width 1s ease;

}

.actionButtons {

    margin-top: 35px;

    display: flex;

    gap: 20px;

}

.actionButtons button {

    flex: 1;

    padding: 16px;

    border-radius: 14px;

    font-size: 17px;

    font-weight: 600;

}

#stakeBtn {

    background: linear-gradient(135deg, var(--green), #00b87b);

    color: #001d13;

}

#unstakeBtn {

    background: #24324a;

    color: white;

}

#stakeBtn:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 25px #00e59b44;

}

#unstakeBtn:hover {

    background: #31425e;

}

/* ===========================
   STAKING PLANS
=========================== */

.plans{

    margin-top:35px;

    padding:30px;

}

.plansGrid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:22px;

}

.plan{

    position:relative;

    padding:30px;

    text-align:center;

    border-radius:20px;

    background:var(--card2);

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

    transition:.35s;

    overflow:hidden;

}

.plan:hover{

    transform:translateY(-8px);

    border-color:var(--green);

    box-shadow:0 15px 40px rgba(0,229,155,.18);

}

.plan h3{

    margin-bottom:15px;

    color:var(--text2);

    font-size:20px;

}

.plan h1{

    font-size:54px;

    color:var(--green);

    margin-bottom:10px;

}

.plan p{

    color:var(--text2);

}

.featured{

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

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

}

.badge{

    position:absolute;

    top:15px;

    right:-40px;

    width:150px;

    text-align:center;

    background:var(--green);

    color:#001d13;

    transform:rotate(45deg);

    padding:6px 0;

    font-size:12px;

    font-weight:700;

}


/* ===========================
   REBATES
=========================== */

.rebates{

    margin-top:35px;

    padding:30px;

}

table{

    width:100%;

    border-collapse:collapse;

}

th{

    text-align:left;

    padding:18px;

    background:#182338;

    color:white;

}

td{

    padding:18px;

    border-top:1px solid rgba(255,255,255,.06);

}

tbody tr{

    transition:.25s;

}

tbody tr:hover{

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

}


/* ===========================
   REFERRALS
=========================== */

.referrals{

    margin-top:35px;

    padding:30px;

}

.refGrid{

    display:grid;

    grid-template-columns:1fr 2fr;

    gap:40px;

}

.rewardRow{

    display:flex;

    justify-content:space-between;

    padding:16px 0;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.rewardRow strong{

    color:var(--green);

}

.refBox{

    display:flex;

    margin-top:15px;

}

.refBox input{

    flex:1;

    background:#182338;

    color:white;

    border:none;

    outline:none;

    padding:15px;

    border-radius:12px 0 0 12px;

}

.refBox button{

    padding:0 24px;

    background:var(--green);

    color:#001d13;

    font-weight:600;

    border-radius:0 12px 12px 0;

}

.refStats{

    margin-top:30px;

    display:grid;

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

    gap:20px;

}

.stat{

    background:var(--card2);

    padding:25px;

    border-radius:18px;

    text-align:center;

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

}

.stat h3{

    font-size:34px;

    margin-bottom:10px;

    color:var(--green);

}

.stat p{

    color:var(--text2);

}


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

.modal{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:999;

    padding:20px;

}

.modalContent{

    width:460px;

    max-width:100%;

    background:#111b2d;

    border-radius:22px;

    padding:30px;

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

    animation:popup .3s ease;

}

@keyframes popup{

    from{

        transform:translateY(20px) scale(.95);

        opacity:0;

    }

    to{

        transform:translateY(0) scale(1);

        opacity:1;

    }

}

.modalHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.modalHeader button{

    width:40px;

    height:40px;

    border-radius:50%;

    background:#24324a;

    color:white;

    font-size:18px;

}

.inputGroup{

    margin-bottom:25px;

}

.inputGroup label{

    display:block;

    margin-bottom:10px;

    color:var(--text2);

}

.inputGroup input,

.inputGroup select{

    width:100%;

    padding:15px;

    border-radius:12px;

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

    background:#182338;

    color:white;

    font-size:16px;

}

.inputGroup input:focus,

.inputGroup select:focus{

    border-color:var(--green);

}

.estimate{

    margin-bottom:25px;

    background:#182338;

    padding:20px;

    border-radius:15px;

}

.estimate span{

    color:var(--text2);

}

.estimate h2{

    margin-top:8px;

    color:var(--green);

}

.primaryBtn{

    width:100%;

    padding:16px;

    border-radius:14px;

    background:linear-gradient(135deg,var(--green),var(--blue));

    color:white;

    font-size:17px;

    font-weight:600;

}


/* ===========================
   TOAST
=========================== */

#toast{

    position:fixed;

    bottom:30px;

    right:30px;

    background:#111b2d;

    color:white;

    padding:16px 24px;

    border-radius:12px;

    border-left:5px solid var(--green);

    opacity:0;

    pointer-events:none;

    transition:.35s;

    z-index:1000;

}

#toast.show{

    opacity:1;

    transform:translateY(-10px);

}


/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:var(--green);

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#0b1220;

}


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

@media(max-width:900px){

    .navbar{

        flex-direction:column;

        gap:20px;

    }

    .navRight{

        width:100%;

        flex-direction:column;

    }

    #connectWallet{

        width:100%;

    }

    .hero h1{

        font-size:38px;

    }

    .refGrid{

        grid-template-columns:1fr;

    }

    .refStats{

        grid-template-columns:1fr;

    }

    .actionButtons{

        flex-direction:column;

    }

}

@media(max-width:600px){

    .dashboardGrid{

        grid-template-columns:1fr;

    }

    .plansGrid{

        grid-template-columns:1fr;

    }

    .hero{

        margin:40px auto;

    }

    .hero h1{

        font-size:32px;

    }

    .sectionTitle{

        font-size:22px;

    }

}

.navbar{
    position:sticky;
    top:0;
    width:100%;
    height:70px;

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

    padding:0 30px;

    background:#0f1728;
    border-bottom:1px solid rgba(255,255,255,.08);

    z-index:999;
}

.nav-left{
    display:flex;
    align-items:center;
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;
}

.logoIcon{
    width:40px;
    height:40px;

    border-radius:50%;

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

    background:linear-gradient(135deg,#00e59b,#4b8cff);

    font-weight:bold;
    color:white;
}

.logo span{
    font-size:22px;
    font-weight:600;
    color:white;
}

.nav-right{
    display:flex;
    align-items:center;
    gap:15px;
}

#networkBadge{
    padding:8px 14px;
    border-radius:20px;

    background:#16233d;

    color:#00e59b;

    font-size:14px;
}

#connectWallet{

    height:42px;

    padding:0 20px;

    border:none;

    border-radius:10px;

    background:#00e59b;

    color:#08111d;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

#connectWallet:hover{

    transform:translateY(-2px);

    box-shadow:0 0 20px rgba(0,229,155,.4);

}

@media (max-width:768px){

    .navbar{
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        height:60px;
        padding:0 12px;
    }

    .logo{
        gap:8px;
    }

    .logoIcon{
        width:34px;
        height:34px;
        font-size:14px;
    }

    .logo span{
        font-size:16px;
    }

    .nav-right{
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:8px;
    }

    #networkBadge{
        padding:6px 10px;
        font-size:11px;
    }

    #connectWallet{
        height:36px;
        padding:0 12px;
        font-size:12px;
        white-space:nowrap;
    }

}

@media (max-width:380px){

    #networkBadge{
        display:none;
    }

    .logo span{
        font-size:15px;
    }

    #connectWallet{
        padding:0 10px;
        font-size:12px;
    }

}