:root{
    --bg:#0b0b0e;
    --card:#17171d;
    --card2:#202028;
    --text:#f5f5f7;
    --muted:#a5a5b0;
    --red:#e53935;
    --red2:#a80f0f;
    --border:rgba(255,255,255,.09);
    --shadow:0 18px 45px rgba(0,0,0,.32);
}

*{box-sizing:border-box}
body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at top right,rgba(229,57,53,.14),transparent 30%),
        linear-gradient(180deg,#09090b,#111116);
    min-height:100vh;
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
.container{width:min(1100px,calc(100% - 32px));margin:auto}

.hero{
    padding:44px 0 38px;
    border-bottom:1px solid var(--border);
    background:linear-gradient(135deg,rgba(229,57,53,.16),rgba(255,255,255,.02));
}
.brand{display:flex;gap:10px;align-items:center;margin-bottom:28px}
.pill{
    display:inline-block;
    padding:8px 12px;
    border:1px solid rgba(229,57,53,.3);
    background:rgba(229,57,53,.12);
    color:#ff9b98;
    border-radius:999px;
    font-size:.88rem;
    font-weight:700;
}
.hero h1{font-size:clamp(2.5rem,7vw,5rem);line-height:.95;margin:18px 0 10px}
.hero h1 span{color:#ff625d}
.hero p{max-width:650px;color:var(--muted);font-size:1.08rem;line-height:1.6}

.main{padding:26px 0 60px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.stat,.card{
    background:linear-gradient(180deg,var(--card),#121217);
    border:1px solid var(--border);
    border-radius:21px;
    box-shadow:var(--shadow);
}
.stat{padding:21px}
.stat small,.card small{display:block;color:var(--muted)}
.stat strong{display:block;font-size:2rem;margin-top:7px}

.content-grid,.admin-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:20px;align-items:start}
.admin-grid{grid-template-columns:1fr 1fr;margin-bottom:20px}
.card{padding:22px}
.card h1,.card h2{margin-top:0}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.section-head h2{margin:0}

.rank-row,.payment-row,.member-row{
    display:grid;
    align-items:center;
    gap:12px;
    border-bottom:1px solid var(--border);
    padding:14px 0;
}
.rank-row{grid-template-columns:34px 1fr auto}
.payment-row{grid-template-columns:1fr auto}
.member-row{grid-template-columns:1fr auto}
.rank-row:last-child,.payment-row:last-child,.member-row:last-child{border-bottom:0}
.rank{width:30px;height:30px;display:grid;place-items:center;background:#292932;border-radius:10px;font-weight:800}
.rank-row b,.payment-row b{color:#ff817c}

label{display:block;font-size:.9rem;font-weight:700;margin:13px 0 7px}
input,select{
    width:100%;
    padding:13px 14px;
    background:#0d0d11;
    color:white;
    border:1px solid var(--border);
    border-radius:13px;
    outline:none;
}
input:focus,select:focus{border-color:rgba(229,57,53,.8);box-shadow:0 0 0 4px rgba(229,57,53,.1)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.btn{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    border:1px solid var(--border);
    background:#292932;
    color:white;
    border-radius:12px;
    padding:11px 14px;
    font-weight:800;
    cursor:pointer;
}
form>.btn{width:100%;margin-top:16px}
.btn.primary{background:linear-gradient(145deg,var(--red),var(--red2));border:0}
.btn.danger{background:rgba(229,57,53,.13);color:#ffaaa7;border-color:rgba(229,57,53,.28)}
.btn.small{padding:8px 10px;font-size:.82rem;width:auto;margin-top:0}

.empty,.notice,.error{
    padding:15px;
    border-radius:13px;
    border:1px solid var(--border);
    color:var(--muted);
    background:rgba(255,255,255,.025);
}
.notice.success{color:#b9f6cf;border-color:rgba(46,204,113,.25);background:rgba(46,204,113,.08)}
.error{color:#ffbbb8;border-color:rgba(229,57,53,.3);background:rgba(229,57,53,.09)}
.member-list{margin-top:20px}
.table-card{margin-top:0}
.admin-payment{grid-template-columns:1fr auto auto}

.admin-nav{border-bottom:1px solid var(--border);background:#111116}
.nav-inner{min-height:66px;display:flex;justify-content:space-between;align-items:center;gap:15px}
.nav-inner div{display:flex;gap:16px;color:var(--muted)}
.admin-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.admin-title h1{margin:0}
.admin-title p{margin:6px 0 0;color:var(--muted)}

.page{min-height:100vh;display:grid;place-items:center;padding:20px}
.page.narrow{width:min(480px,100%);margin:auto}
.back{display:block;text-align:center;color:var(--muted);margin-top:18px}
footer{text-align:center;color:#777784;padding:0 15px 30px}

@media(max-width:800px){
    .stats,.content-grid,.admin-grid{grid-template-columns:1fr}
    .admin-payment{grid-template-columns:1fr auto}
    .admin-payment form{grid-column:1/-1}
    .admin-payment .btn{width:100%}
}
@media(max-width:480px){
    .form-grid{grid-template-columns:1fr}
    .nav-inner{align-items:flex-start;flex-direction:column;padding:15px 0}
}