:root{--bg:#0b1220;--card:#0f1b33;--muted:#98a2b3;--line:#1f2a44;--brand:#facc15;--btn:#f5c400;}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:#eef2f7;color:#0b1220}
a{color:inherit}
.container{max-width:900px;margin:24px auto;padding:0 14px}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.brand{font-weight:800;letter-spacing:.3px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 8px 22px rgba(16,24,40,.06);overflow:hidden}
.card-hd{padding:14px 16px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between}
.badge{font-size:12px;padding:6px 10px;border-radius:999px;background:#111827;color:#fff}
.form{padding:16px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:720px){.grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
label{font-size:12px;color:#374151}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid #d1d5db;border-radius:10px;outline:none}
textarea{min-height:130px;resize:vertical}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn{appearance:none;border:none;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer}
.btn-primary{background:linear-gradient(180deg,#ffd94a,#f5c400);color:#1f2937}
.btn-ghost{background:#f3f4f6}
.help{font-size:12px;color:#6b7280}
.alert{padding:12px 14px;border-radius:12px;margin:12px 0}
.alert-ok{background:#ecfdf3;border:1px solid #a7f3d0;color:#065f46}
.alert-err{background:#fff1f2;border:1px solid #fecdd3;color:#9f1239}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 12px;border-bottom:1px solid #e5e7eb;font-size:14px;vertical-align:top}
.table th{background:#f9fafb;text-align:left;font-size:12px;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700}
.pill-pending{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}
.pill-proses{background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8}
.pill-selesai{background:#ecfdf3;border:1px solid #a7f3d0;color:#065f46}
.pill-urgent{background:#fff1f2;border:1px solid #fecdd3;color:#9f1239}
.small{font-size:12px;color:#6b7280}
.footer{padding:14px 16px;border-top:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}