body{font-family:Arial,Helvetica,sans-serif;margin:0;background:#0f172a;color:#e5e7eb}
.container{max-width:1100px;margin:0 auto;padding:18px}
.grid{display:grid;grid-template-columns:1fr 1.2fr;gap:16px}
.card{background:#111827;border:1px solid #243244;border-radius:12px;padding:16px}
h1,h2{margin:0 0 10px}
label{display:block;margin-top:10px;font-size:14px;color:#cbd5e1}
input,select,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #243244;background:#0b1220;color:#e5e7eb}
textarea{min-height:90px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{background:#2563eb;border:0;color:white;padding:10px 14px;border-radius:10px;cursor:pointer;margin-top:12px}
.btn2{background:#334155;border:0;color:white;padding:10px 14px;border-radius:10px;cursor:pointer;margin-top:12px}
.small{font-size:13px;color:#93c5fd}
.badge{padding:4px 10px;border-radius:999px;font-size:12px;display:inline-block}
.badge.aktif{background:#1d4ed8}
.badge.telat{background:#b91c1c}
.badge.kembali{background:#15803d}
table{width:100%;border-collapse:collapse;margin-top:10px}
th,td{border-bottom:1px solid #243244;padding:10px;text-align:left;font-size:14px}
a{color:#93c5fd;text-decoration:none}
canvas{border:1px dashed #334155;border-radius:12px;background:#0b1220}
@media (max-width:900px){.grid{grid-template-columns:1fr}}