:root{
  --bg:#07090d; --card:#10141b; --card2:#151a22; --line:#252c37;
  --text:#f5f7fa; --muted:#8f99a8; --accent:#8b5cf6; --accent2:#a78bfa;
  --success:#34d399;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
.bg-glow{position:fixed;border-radius:50%;filter:blur(100px);opacity:.18;pointer-events:none}
.glow-1{width:350px;height:350px;background:#7c3aed;top:-120px;left:-80px}
.glow-2{width:300px;height:300px;background:#2563eb;right:-100px;top:40%}
.navbar{height:76px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100% - 1050px)/2));background:rgba(7,9,13,.8);backdrop-filter:blur(15px);position:sticky;top:0;z-index:5}
.brand{display:flex;gap:11px;align-items:center}
.brand-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#7c3aed,#a78bfa);font-weight:900;box-shadow:0 8px 25px rgba(124,58,237,.3)}
.brand strong{display:block;letter-spacing:.5px}.brand strong span{color:var(--accent2)}
.brand small{display:block;font-size:9px;color:var(--muted);letter-spacing:2px;margin-top:2px}
.status{font-size:11px;font-weight:800;color:#9ca3af;letter-spacing:1px}.status i{display:inline-block;width:7px;height:7px;background:var(--success);border-radius:50%;margin-right:7px;box-shadow:0 0 10px var(--success)}
.container{width:min(900px,calc(100% - 30px));margin:auto}
.hero{text-align:center;padding:68px 10px 35px}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--accent2);font-weight:800;margin-bottom:12px}
.hero h1{font-size:clamp(38px,7vw,66px);line-height:.98;margin:0;font-weight:900;letter-spacing:-2.5px}.hero h1 span{color:var(--accent2)}
.hero p{color:var(--muted);max-width:570px;margin:18px auto 0;line-height:1.7}
.card{background:linear-gradient(145deg,rgba(21,26,34,.96),rgba(12,15,21,.96));border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 20px 70px rgba(0,0,0,.25)}
.step-title{font-weight:850;font-size:16px;margin-bottom:15px}.step-title span{color:var(--accent2);font-size:11px;margin-right:9px;letter-spacing:1px}
label{display:block;color:#c2c9d3;font-size:12px;margin-bottom:7px}
.input-wrap{display:flex;align-items:center;border:1px solid var(--line);background:#0b0e13;border-radius:12px;overflow:hidden;transition:.2s}
.input-wrap:focus-within{border-color:#7c5ce8;box-shadow:0 0 0 3px rgba(124,92,232,.12)}
.input-wrap span{color:#687383;padding-left:15px}.input-wrap input{width:100%;background:transparent;border:0;outline:0;color:#fff;padding:14px;font-size:14px}
.hint{font-size:11px;color:#697484;margin:8px 0 30px}.package-title{margin-top:4px}
.category{margin-top:18px}.normal-category{margin-top:30px}.category-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.category-head h2{font-size:14px;margin:0}.category-head p{font-size:11px;color:var(--muted);margin:4px 0 0}.badge{font-size:9px;letter-spacing:1px;border:1px solid #353c48;padding:5px 8px;border-radius:7px;color:#aab3c0}
.packages{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.package{border:1px solid var(--line);background:#0c1016;color:#fff;border-radius:12px;padding:13px 8px;text-align:center;cursor:pointer;transition:.18s;position:relative}
.package:hover{border-color:#6651b7;transform:translateY(-1px)}.package.selected{border-color:var(--accent);background:rgba(124,58,237,.13);box-shadow:0 0 0 1px var(--accent) inset}
.package .robux{font-weight:900;font-size:16px}.package .unit{font-size:9px;color:#8892a0;display:block;margin-top:2px}.package .price{font-size:11px;color:var(--accent2);font-weight:750;margin-top:9px}
.continue-btn,.paid-btn{width:100%;border:0;border-radius:12px;padding:15px;font-weight:900;letter-spacing:.4px;cursor:pointer;margin-top:25px;transition:.2s}
.continue-btn{background:linear-gradient(135deg,#7c3aed,#8b5cf6);color:#fff}.continue-btn:disabled{opacity:.35;cursor:not-allowed}.continue-btn:not(:disabled):hover,.paid-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.payment-card{margin-top:25px}.payment-top{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.payment-top h2{margin:0;font-size:25px}.pending{font-size:9px;font-weight:900;letter-spacing:1px;color:#fbbf24;border:1px solid rgba(251,191,36,.25);padding:7px 9px;border-radius:8px}
.summary{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid var(--line);border-radius:13px;margin:22px 0;padding:17px;background:#0b0e13}.summary div+div{border-left:1px solid var(--line);padding-left:18px}.summary small{display:block;color:#6f7988;font-size:9px;letter-spacing:1px}.summary strong{display:block;margin-top:6px;font-size:14px}
.qris-box{display:grid;place-items:center;background:#fff;border-radius:15px;padding:18px;overflow:hidden}.qris-image{display:block;width:100%;max-width:520px;height:auto;border-radius:10px}
.payment-note{background:rgba(251,191,36,.06);border:1px solid rgba(251,191,36,.15);border-radius:12px;padding:13px 15px;margin-top:18px}.payment-note strong{font-size:12px;color:#fbbf24}.payment-note p{font-size:11px;color:#9ca3af;line-height:1.5;margin:5px 0 0}.paid-btn{background:#fff;color:#090b10;margin-top:18px}.back-btn{display:block;width:100%;border:0;background:transparent;color:#7f8997;font-size:12px;margin-top:14px;padding:9px;cursor:pointer}
.success{text-align:center;margin-top:25px;padding:55px 25px}.success-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(52,211,153,.12);color:var(--success);font-size:28px;margin:0 auto 20px}.success h2{font-size:28px;margin:0 0 10px}.success p{color:var(--muted);font-size:13px;line-height:1.6}.order-number{font-size:23px;font-weight:900;letter-spacing:1px;color:var(--accent2);margin:20px}.muted{font-size:11px!important}.success .back-btn{border:1px solid var(--line);border-radius:10px;margin:20px auto 0;max-width:250px}
.hidden{display:none!important}
footer{display:flex;justify-content:space-between;color:#596372;font-size:10px;padding:28px 4px 45px}
@media(max-width:650px){.navbar{padding:0 16px}.packages{grid-template-columns:repeat(3,1fr)}.card{padding:20px}.summary{grid-template-columns:1fr;gap:13px}.summary div+div{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:13px}.hero{padding-top:48px}.payment-top{display:block}.pending{display:inline-block;margin-top:12px}footer{display:block;text-align:center;line-height:2}}

.proof-box{margin-top:18px;border:1px solid var(--line);background:#0b0e13;border-radius:13px;padding:15px}
.proof-box label{margin-bottom:8px}
.proof-box label span{color:#fbbf24;font-size:10px}
.proof-box input{width:100%;color:#cfd6df;font-size:12px}
.proof-hint{font-size:10px;color:#697484;margin:8px 0 0;line-height:1.5}
.proof-preview{margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#07090d;padding:8px}
.proof-preview img{display:block;width:100%;max-height:260px;object-fit:contain;border-radius:8px}


.browser-notice{margin:18px 0 0;border:1px solid rgba(251,191,36,.25);background:rgba(251,191,36,.06);border-radius:13px;padding:14px 15px}.browser-notice strong{display:block;color:#fbbf24;font-size:12px}.browser-notice p{margin:6px 0 10px;color:#a5acb8;font-size:11px;line-height:1.55}.browser-actions{display:flex;gap:9px;flex-wrap:wrap}.browser-actions button,.resume-row button{border:1px solid rgba(255,255,255,.1);background:#171b22;color:#fff;border-radius:9px;padding:9px 12px;font-size:10px;font-weight:800;cursor:pointer}.browser-actions button:last-child{background:#fff;color:#090b10}.browser-hint{display:block;margin-top:10px;color:#7f8997;font-size:10px;line-height:1.5}.resume-box{margin-top:15px;border:1px solid var(--line);background:#0b0e13;border-radius:13px;padding:13px 15px}.resume-box small{display:block;color:#6f7988;font-size:9px;letter-spacing:1px}.resume-box p{font-size:10px;color:#697484;line-height:1.5;margin:8px 0 0}.resume-row{display:flex;gap:8px;margin-top:7px}.resume-row input{flex:1;min-width:0;background:#07090d;border:1px solid var(--line);border-radius:9px;color:#cfd6df;padding:9px;font-size:10px;outline:none}.resume-row button{white-space:nowrap}.resume-row button:hover,.browser-actions button:hover{filter:brightness(1.1)}
@media(max-width:650px){.resume-row{display:block}.resume-row button{width:100%;margin-top:8px}.browser-actions{display:block}.browser-actions button{width:100%;margin-top:7px}.browser-actions button:first-child{margin-top:0}}