:root {
  --bg: #0e0e12;
  --card: #17171d;
  --line: #2a2a33;
  --gold: #f5c542;
  --gold-dim: #8a7226;
  --text: #f2f2f4;
  --muted: #8b8b94;
  --green: #3ddc84;
  --red: #ff5c5c;
  --blue: #4ea8ff;
  --danger: #3a1414;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { background:var(--bg); color:var(--text); font-family:-apple-system,'Segoe UI',Roboto,sans-serif; min-height:100vh; padding-bottom:80px; }
.topbar { position:sticky; top:0; z-index:50; background:linear-gradient(180deg,#14141a,#0e0e12); padding:14px 16px 12px; border-bottom:1px solid var(--line); }
.topbar h1 { font-size:17px; font-weight:800; letter-spacing:.5px; }
.topbar h1 span { color:var(--gold); }
.profile { display:flex; align-items:center; gap:12px; }
.pp { width:42px; height:42px; border-radius:50%; border:2px solid var(--gold-dim); background:var(--card); object-fit:cover; }
.pp-big { width:80px; height:80px; border-radius:50%; border:3px solid var(--gold-dim); background:var(--card); object-fit:cover; display:block; margin:0 auto 12px; }
.profile-card { text-align:center; }
.prof-name { font-size:18px; font-weight:800; }
.prof-user { color:var(--blue); font-size:13px; margin-top:4px; }
.prof-id { color:var(--muted); font-size:12px; margin-top:2px; }
.profile-meta { color:var(--muted); font-size:12px; margin-top:2px; }
.saldo-card { display:flex; justify-content:space-between; align-items:center; background:linear-gradient(135deg,#1c1c24,#15151b); border:1px solid var(--gold-dim); border-radius:14px; padding:14px 16px; margin:12px 12px 0; }
.saldo-card .label { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:1px; }
.saldo-card .val { font-size:22px; font-weight:800; color:var(--gold); }
.btn-depo { background:var(--gold); color:#171200; font-weight:800; border:none; border-radius:10px; padding:10px 16px; font-size:13px; cursor:pointer; }
.sec { padding:14px 12px 4px; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; font-weight:700; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px 12px; }
.cat { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; cursor:pointer; transition:transform .08s; }
.cat:active { transform:scale(.97); }
.cat .name { font-weight:800; font-size:15px; }
.cat .meta { color:var(--muted); font-size:12px; margin-top:6px; }
.cat .price { color:var(--gold); font-weight:700; font-size:13px; margin-top:4px; }
.badge-diskon { display:inline-block; background:rgba(61,220,132,.15); color:var(--green); font-size:10px; font-weight:700; padding:2px 6px; border-radius:6px; margin-top:6px; }
.list { padding:6px 12px; }
.acc { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:10px; }
.acc .row { display:flex; justify-content:space-between; align-items:center; }
.acc .phone { font-size:16px; font-weight:800; font-family:ui-monospace,monospace; }
.acc .harga { color:var(--gold); font-weight:800; }
.acc .harga-asli { color:var(--muted); text-decoration:line-through; font-size:12px; margin-right:6px; }
.acc .desc { color:var(--muted); font-size:12.5px; margin-top:8px; white-space:pre-line; }
.acc .user { color:var(--blue); font-size:12.5px; margin-top:4px; }
.btn-buy { width:100%; margin-top:12px; background:var(--gold); color:#171200; border:none; border-radius:10px; padding:12px; font-weight:800; font-size:14px; cursor:pointer; }
.btn-buy:disabled { opacity:.5; }
.btn { width:100%; border:none; border-radius:10px; padding:12px; font-weight:800; font-size:14px; cursor:pointer; margin-top:10px; }
.btn-gold { background:var(--gold); color:#171200; }
.btn-gray { background:var(--card2,#1e1e26); color:var(--text); border:1px solid var(--line); }
.panel { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin:10px 12px; }
.field-label { display:block; color:var(--muted); font-size:12px; margin-bottom:8px; }
.input { width:100%; background:var(--bg); border:1px solid var(--line); border-radius:10px; color:var(--text); padding:12px; font-size:15px; margin-bottom:4px; }
.input:focus { outline:none; border-color:var(--gold); }
.qris { display:block; width:220px; height:220px; margin:14px auto 4px; border-radius:12px; border:1px solid var(--line); }
.depo-line { display:flex; justify-content:space-between; padding:6px 0; font-size:14px; color:var(--muted); border-bottom:1px dashed var(--line); }
.depo-line b { color:var(--text); }
.depo-line.total { border-bottom:none; font-size:16px; }
.depo-line.total b { color:var(--gold); font-size:18px; }
.warn-box { background:rgba(255,92,92,.08); border:1px solid rgba(255,92,92,.25); color:var(--red); border-radius:10px; padding:10px; font-size:12.5px; margin:12px 0; }
.status-msg { margin-top:10px; font-size:13px; text-align:center; padding:10px; border-radius:10px; display:none; }
.status-msg.ok { display:block; background:rgba(61,220,132,.1); color:var(--green); }
.status-msg.wait { display:block; background:rgba(245,197,66,.1); color:var(--gold); }
.status-msg.err { display:block; background:rgba(255,92,92,.1); color:var(--red); }
.bottom-nav { position:fixed; bottom:0; left:0; right:0; background:#14141a; border-top:1px solid var(--line); display:flex; z-index:50; padding-bottom:env(safe-area-inset-bottom); }
.nav-btn { flex:1; background:none; border:none; color:var(--muted); font-weight:700; font-size:13px; padding:13px 0; cursor:pointer; }
.nav-btn.active { color:var(--gold); }
.order-item { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:0 12px 10px; }
.order-item .o-top { display:flex; justify-content:space-between; align-items:center; }
.order-item .o-kat { font-weight:800; font-size:14px; }
.order-item .o-harga { color:var(--gold); font-weight:800; font-size:13px; }
.order-item .o-phone { font-family:ui-monospace,monospace; color:var(--muted); font-size:12.5px; margin-top:6px; }
.order-item .o-time { color:var(--muted); font-size:11px; margin-top:4px; }
.empty { text-align:center; color:var(--muted); padding:40px 20px; font-size:14px; }
.toast { position:fixed; left:50%; bottom:100px; transform:translateX(-50%); background:#22222b; border:1px solid var(--line); color:var(--text); padding:10px 18px; border-radius:10px; font-size:13px; font-weight:600; z-index:99; display:none; box-shadow:0 4px 20px rgba(0,0,0,.4); }