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

body{
    background:#070b14;
    color:white;
    font-family:Arial;
    padding:20px;
}

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.logo{
    font-size:28px;
    font-weight:bold;
    color:#00bfff;
}

.balance-box{
    background:#111827;
    padding:10px 18px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.08);
}

.hero{
    background:linear-gradient(
        135deg,
        #0f172a,
        #111827
    );

    padding:30px;
    border-radius:25px;

    margin-bottom:30px;

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

.hero-title{
    font-size:34px;
    font-weight:bold;
    margin-bottom:10px;
}

.hero-subtitle{
    color:#9ca3af;
}

.section-title{
    font-size:22px;
    margin-bottom:20px;
}

.card{
    background:#111827;

    padding:20px;

    border-radius:22px;

    margin-bottom:18px;

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

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

.card-title{
    font-size:20px;
    font-weight:bold;
}

.card-price{
    color:#00bfff;
    font-size:20px;
}

.card-tag{
    display:inline-block;

    background:#1e293b;

    color:#00bfff;

    padding:6px 12px;

    border-radius:10px;

    margin-top:14px;

    font-size:14px;
}

.buy-btn{
    width:100%;

    height:52px;

    border:0;

    border-radius:18px;

    background:#00bfff;

    color:white;

    font-size:18px;

    font-weight:bold;

    margin-top:18px;
}

.loading{
    text-align:center;
    margin-top:50px;
    color:#9ca3af;
}