:root{--bg:#0b0614;--kad:rgba(255,255,255,.06);--garis:rgba(167,139,250,.28);--teks:#ede9fe;--sub:#b4a7d6;--ung:#7c3aed;--ung2:#a78bfa;--kn:#facc15;--mr:#f87171;--ok:#34d399}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--teks);font:15px/1.45 -apple-system,Segoe UI,Roboto,sans-serif}
body{background:linear-gradient(165deg,#0b0614,#1a0b2e) fixed;min-height:100vh}
header{position:sticky;top:0;z-index:5;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(11,6,20,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--garis)}
nav{display:flex;gap:6px}nav button,.julat button{padding:8px 14px;border-radius:99px;border:1px solid var(--garis);background:none;color:var(--sub);font:inherit;cursor:pointer}
nav button.on,.julat button.on{background:linear-gradient(135deg,var(--ung2),var(--ung));color:#fff;border-color:transparent}
main{max-width:980px;margin:0 auto;padding:16px}.tab{display:none}.tab.on{display:block}
input,select{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--garis);background:rgba(0,0,0,.3);color:var(--teks);font:inherit}
.kecil{font-size:13px;color:var(--sub);margin:8px 0}
.baris{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px 14px;margin:8px 0;border:1px solid var(--garis);border-radius:14px;background:var(--kad)}
.baris .nm b{display:block}.baris .nm span{font-size:12.5px;color:var(--sub)}
.btns{display:flex;flex-wrap:wrap;gap:8px}.btns button,.tirai button{padding:8px 12px;border-radius:10px;border:0;background:linear-gradient(135deg,var(--ung2),var(--ung));color:#fff;font:inherit;font-size:13px;cursor:pointer}
.btns button:active{transform:scale(.97)}.btns .sek,.tirai .sek{background:rgba(255,255,255,.1)}
.lencana{font-size:11px;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.1);margin-left:6px}.lencana.aktif{color:var(--ok)}.lencana.tamat,.lencana.habis{color:var(--mr)}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}.bar select{width:auto;min-width:200px}.julat{display:flex;flex-wrap:wrap;gap:6px}
.lgd{display:flex;gap:12px;font-size:12.5px;margin:6px 0}.kn::before,.mr::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}.kn::before{background:var(--kn)}.mr::before{background:var(--mr)}
.lm{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:9px 12px;margin:4px 0;border-radius:10px;border:1px solid var(--garis);background:var(--kad)}
.lm.sosial{border-color:var(--kn);background:rgba(250,204,21,.12)}.lm.judi,.lm.dewasa,.lm.vpn{border-color:var(--mr);background:rgba(248,113,113,.14)}
.lm small{color:var(--sub)}.lm.klik{cursor:pointer}.cp{font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px}.cp.kn{background:var(--kn);color:#1a1300}.cp.mr{background:var(--mr);color:#2a0606}
.tirai{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(5,1,14,.7)}.kotak{width:min(92vw,380px);padding:20px;border-radius:18px;background:#1a0b2e;border:1px solid var(--garis)}.kotak .btns{justify-content:flex-end;margin-top:14px}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);padding:10px 16px;border-radius:12px;background:#2a1650;border:1px solid var(--garis);z-index:30}
[hidden]{display:none!important}
