:root{--bg:#0b1220;--card:#111a2e;--text:#e7eefc;--muted:#9fb3d8;--accent:#38bdf8;--danger:#fb7185;--ok:#34d399;}
*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
body{margin:0;background:linear-gradient(180deg,#070b14, #0b1220 40%, #070b14);color:var(--text);}
a{color:var(--accent);text-decoration:none}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.nav{display:flex;gap:12px;flex-wrap:wrap;align-items:center;background:rgba(17,26,46,.75);border:1px solid rgba(56,189,248,.2);padding:12px 14px;border-radius:16px;backdrop-filter: blur(8px);}
.nav a{padding:8px 10px;border-radius:12px;color:var(--text);border:1px solid transparent}
.nav a:hover{border-color:rgba(56,189,248,.35);background:rgba(56,189,248,.07)}
.brand{font-weight:800;letter-spacing:.3px;margin-right:auto}
.card{background:rgba(17,26,46,.8);border:1px solid rgba(56,189,248,.18);border-radius:18px;padding:16px;margin:16px 0;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.h1{font-size:22px;font-weight:800;margin:0 0 10px}
.muted{color:var(--muted);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.col-6{grid-column:span 6}
.col-4{grid-column:span 4}
.col-3{grid-column:span 3}
.col-12{grid-column:span 12}
@media(max-width:900px){.col-6,.col-4,.col-3{grid-column:span 12}}
label{display:block;font-size:13px;color:var(--muted);margin:0 0 6px}
input,select,textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(159,179,216,.25);background:rgba(7,11,20,.6);color:var(--text);outline:none}
textarea{min-height:84px;resize:vertical}
button{padding:10px 14px;border-radius:12px;border:1px solid rgba(56,189,248,.35);background:rgba(56,189,248,.12);color:var(--text);cursor:pointer;font-weight:700}
button:hover{background:rgba(56,189,248,.18)}
.table{width:100%;border-collapse:separate;border-spacing:0;margin-top:10px;overflow:hidden;border-radius:14px;border:1px solid rgba(159,179,216,.18)}
.table th,.table td{padding:10px 10px;border-bottom:1px solid rgba(159,179,216,.12);font-size:13px;vertical-align:top}
.table th{color:var(--muted);text-align:left;background:rgba(7,11,20,.45)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid rgba(159,179,216,.25);font-size:12px}
.badge.cod{border-color:rgba(251,113,133,.35);background:rgba(251,113,133,.08)}
.badge.lunas{border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.08)}
.badge.kantor{border-color:rgba(56,189,248,.35);background:rgba(56,189,248,.08)}
.badge.antar{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08)}
.ok{color:var(--ok)}
.danger{color:var(--danger)}
.notice{padding:10px 12px;border-radius:12px;border:1px solid rgba(56,189,248,.25);background:rgba(56,189,248,.08);font-size:13px}