*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Arial;background:#f4f7fb;color:#172033}
.app{display:flex;min-height:100vh}
.sidebar{width:270px;background:linear-gradient(180deg,#0f172a,#111827);color:white;padding:24px;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:24px}
.brand-logo{width:42px;height:42px;border-radius:14px;background:#2563eb;display:grid;place-items:center;font-weight:900;font-size:22px}
.brand b{display:block;font-size:18px}
.brand small,.userbox small{display:block;color:#94a3b8;font-size:12px;margin-top:3px}
.userbox{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.06);padding:12px;border-radius:16px;margin-bottom:20px}
.avatar{width:38px;height:38px;border-radius:50%;background:#1d4ed8;display:grid;place-items:center;font-weight:900}
.menu a,.logout-btn{display:block;color:#dbeafe;text-decoration:none;padding:12px 14px;border-radius:12px;margin:5px 0;background:transparent;border:0;width:100%;text-align:left;font:inherit;cursor:pointer}
.menu a:hover,.logout-btn:hover{background:#1e293b}
.logout-btn{color:#fecaca}
.content{flex:1;padding:30px;overflow:auto}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.topbar h1{margin:0;font-size:30px}
.topbar p{margin:6px 0 0;color:#64748b}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:18px 0}
.card{background:white;border-radius:20px;padding:20px;box-shadow:0 10px 30px rgba(15,23,42,.07);border:1px solid #eef2f7}
.card span{color:#64748b;font-size:13px}
.card b{display:block;font-size:28px;margin-top:8px}
table{width:100%;border-collapse:collapse;background:white;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(15,23,42,.07);margin-top:16px;border:1px solid #eef2f7}
th,td{padding:14px;border-bottom:1px solid #e5e7eb;text-align:left;vertical-align:top}
th{background:#f8fafc;color:#475569;font-size:13px}
tr:hover td{background:#fbfdff}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800}
.success,.PAID,.ACTIVE,.SUCCESS{background:#dcfce7;color:#166534}
.warning,.PENDING,.APPROVED{background:#fef3c7;color:#92400e}
.danger,.FAILED,.SUSPENDED,.REJECTED{background:#fee2e2;color:#991b1b}
.secondary,.EXPIRED,.CANCELLED,.REFUNDED{background:#e2e8f0;color:#334155}
.info{background:#dbeafe;color:#1e40af}
input,select,button,textarea{padding:11px 12px;border:1px solid #cbd5e1;border-radius:12px;font:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid #bfdbfe;border-color:#2563eb}
button,.btn{background:#2563eb;color:white;border:0;font-weight:800;cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.btn:hover{background:#1d4ed8}
form.grid{display:grid;gap:12px;background:white;padding:20px;border-radius:18px;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.auth{max-width:420px;margin:8vh auto;background:white;padding:28px;border-radius:22px;box-shadow:0 15px 50px rgba(15,23,42,.12)}
.auth input,.auth button{width:100%;margin:8px 0 14px}
.alert{padding:12px 16px;border-radius:12px;margin-bottom:16px}
.ok{background:#dcfce7;color:#166534}
.err{background:#fee2e2;color:#991b1b}
.checkout{max-width:520px;margin:40px auto;text-align:center}
.payamount{font-size:38px;font-weight:900}
.qris{max-width:320px;width:100%;border-radius:18px;border:1px solid #e5e7eb}
code,pre{background:#f1f5f9;padding:3px 6px;border-radius:8px;white-space:pre-wrap}
pre{padding:16px;overflow:auto}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.copy{background:#0f172a}
.muted{color:#64748b}
@media(max-width:800px){
  .app{display:block}
  .sidebar{width:100%;height:auto;position:relative}
  .content{padding:16px}
  .topbar{display:block}
  table{display:block;overflow-x:auto}
}
.auth-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:20px;
  background:#f4f7fb;
}