:root{
    --bg: radial-gradient(circle at top, #0f172a 0%, #020617 60%);
    --glass: rgba(6,10,24,.45);
    --border: rgba(255,255,255,.08);
    --accent: #ff7a18;
    --text: #e2e8f0;
    --muted: #94a3b8;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #020617;
    background-image: radial-gradient(circle at top, rgba(255,122,24,.1), rgba(2,6,23,1) 40%), linear-gradient(180deg,#020617 0%,#0f172a 100%);
    color: var(--text);
    min-height: 100vh;
}
a{text-decoration:none;color:inherit;}
.topbar{
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(2,6,23,.65);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 2.5rem;
}
.logo-wrap{
    display:flex;
    align-items:center;
    gap:.5rem;
}
.logo-svg{
    filter: drop-shadow(0 0 12px rgba(255,122,24,.6));
}
.logo-title{
    font-weight:700;
    letter-spacing:.02em;
}
.main-nav{
    display:flex;
    gap:1rem;
}
.main-nav a{
    font-size:.9rem;
    color:var(--muted);
    padding:.35rem .6rem;
    border-radius:.55rem;
    transition:.2s;
}
.main-nav a:hover{
    background:rgba(255,255,255,.04);
    color:var(--text);
}
.auth-box{
    display:flex;
    gap:.5rem;
    align-items:center;
}
.btn{
    background:linear-gradient(135deg,#ff7a18 0%,#af002d 100%);
    color:white;
    border:none;
    border-radius:.6rem;
    padding:.45rem .95rem;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}
.btn:hover{
    transform:translateY(-1px);
    filter:brightness(1.02);
}
.btn.ghost{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.02);
}
.btn.small,.btn.btn-small{
    font-size:.7rem;
    padding:.35rem .75rem;
}
.btn.full{width:100%;text-align:center;}

.hero{
    max-width:1200px;
    margin:3.5rem auto 2rem;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:2.5rem;
    padding:0 1.5rem;
}
.hero-text h1{
    font-size:2.6rem;
    line-height:1.1;
    margin-bottom:1rem;
}
.hero-text p{
    color:var(--muted);
    max-width:38rem;
}
.hero-actions{
    margin-top:1.5rem;
    display:flex;
    gap:.75rem;
}
.hero-badges{
    display:flex;
    gap:.5rem;
    margin-top:1.5rem;
    flex-wrap:wrap;
}
.badge{
    background:rgba(148,163,184,.09);
    border:1px solid rgba(148,163,184,.3);
    border-radius:.75rem;
    padding:.35rem .6rem;
    display:flex;
    gap:.25rem;
    align-items:center;
    font-size:.7rem;
}
.badge svg{
    width:16px;height:16px;
}
.hero-img{
    display:flex;
    flex-direction:column;
    gap:1rem;
}
.glass-card{
    background:rgba(6,10,24,.45);
    border:1px solid rgba(255,255,255,.03);
    border-radius:1rem;
    padding:1rem 1.1rem;
    box-shadow:0 25px 35px rgba(0,0,0,.1);
}
.chart-bar{
    width:100%;
    height:8px;
    background:rgba(255,255,255,.02);
    border-radius:999px;
    margin:.75rem 0 1rem;
    overflow:hidden;
}
.chart-bar span{
    display:block;
    height:100%;
    background:linear-gradient(135deg,#22c55e,#16a34a);
    border-radius:999px;
}
.tiny{
    font-size:.7rem;
    color:var(--muted);
}

.section{
    max-width:1200px;
    margin:3.5rem auto;
    padding:0 1.5rem;
}
.section h2{
    font-size:1.7rem;
    margin-bottom:.35rem;
}
.section-sub{
    color:var(--muted);
    margin-bottom:2rem;
}
.cards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1.25rem;
}
.game-card{
    background:rgba(6,10,24,.55);
    border:1px solid rgba(255,255,255,.02);
    border-radius:1rem;
    padding:1rem 1.1rem 1.15rem;
    display:flex;
    flex-direction:column;
    gap:.6rem;
}
.game-icon{
    font-size:2rem;
}
.game-card h3{
    font-size:1rem;
}
.game-card p{
    color:var(--muted);
    font-size:.85rem;
}
.price{
    font-size:1.1rem;
    font-weight:700;
}
.section-dark{
    background:radial-gradient(circle at top, rgba(15,23,42,.4), rgba(2,6,23,0));
}
.features{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:1rem;
    margin-top:1.5rem;
}
.feature{
    background:rgba(6,10,24,.45);
    border:1px solid rgba(255,255,255,.02);
    border-radius:1rem;
    padding:1rem;
}
.footer{
    text-align:center;
    margin:3rem 0 1rem;
    color:rgba(148,163,184,.65);
    font-size:.75rem;
}

.bg-shape{
    position:fixed;
    top:-70px;
    right:-40px;
    width:350px;
    opacity:.9;
    filter:blur(0px);
    z-index:-1;
}
.bg-shape-1{}

/* AUTH */
.auth-body{
    background:radial-gradient(circle at 20% 20%, rgba(255,122,24,.08), rgba(2,6,23,1) 40%);
}
.auth-card{
    max-width:360px;
    margin:4.5rem auto;
    background:rgba(6,10,24,.55);
    border:1px solid rgba(255,255,255,.01);
    border-radius:1rem;
    padding:1.5rem 1.4rem 1.3rem;
    backdrop-filter: blur(12px);
}
.auth-card h1{
    margin-bottom:1rem;
}
.auth-card label{
    display:block;
    font-size:.75rem;
    margin-bottom:.65rem;
}
.auth-card input{
    width:100%;
    background:rgba(2,6,23,.35);
    border:1px solid rgba(148,163,184,.25);
    border-radius:.55rem;
    padding:.45rem .55rem;
    color:var(--text);
    margin-top:.25rem;
}
.auth-switch{
    font-size:.75rem;
    margin-top:.75rem;
    color:var(--muted);
}
.alert{
    background:rgba(244,63,94,.08);
    border:1px solid rgba(244,63,94,.2);
    color:#fda4af;
    padding:.4rem .6rem;
    border-radius:.5rem;
    margin-bottom:.85rem;
    font-size:.75rem;
}

/* PANEL / TABLE */
.panel{
    max-width:1100px;
    margin:3.25rem auto;
    padding:0 1.5rem;
}
.table-wrap{
    margin-top:1.5rem;
    overflow-x:auto;
}
.table{
    width:100%;
    border-spacing:0;
    border-collapse:separate;
}
.table th{
    text-align:left;
    font-size:.7rem;
    color:var(--muted);
    padding:.4rem .4rem;
    border-bottom:1px solid rgba(148,163,184,.1);
}
.table td{
    padding:.5rem .4rem;
    border-bottom:1px solid rgba(148,163,184,.03);
    font-size:.82rem;
}
.status{
    background:rgba(148,163,184,.12);
    padding:.15rem .5rem;
    border-radius:999px;
    font-size:.68rem;
}
.status.green{background:rgba(34,197,94,.12);color:#bbf7d0;}
.status.yellow{background:rgba(250,204,21,.12);color:#fef9c3;}
.status.red{background:rgba(248,113,113,.12);color:#fee2e2;}
.empty-state{
    background:rgba(6,10,24,.45);
    border:1px solid rgba(255,255,255,.02);
    border-radius:1rem;
    padding:1.5rem;
    text-align:center;
    margin-top:1.25rem;
}

/* responsive */
@media (max-width: 950px){
    .hero{
        grid-template-columns:1fr;
    }
    .main-nav{
        display:none;
    }
    .topbar{
        justify-content:space-between;
    }
}