:root{--bg:#fbfbfa;--fg:#1d1c1a;--mut:#6b6862;--line:#e4e1db;--acc:#1f5d50;--warn:#8a5a00;--bad:#8c2f2a;--ok:#1f5d50}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
/* Atribut hidden harus mengalahkan seluruh aturan display pada selektor kelas.
   Tanpa ini, [hidden] (gaya bawaan peramban) kalah spesifisitas terhadap
   .admin{display:flex} dan button{display:inline-block}. */
[hidden]{display:none !important}
.bar{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--line);background:#fff}
h1{font-size:1.05rem;margin:0}
.sub{margin:.15rem 0 0;color:var(--mut);font-size:.85rem}
.who{font-size:.85rem;color:var(--mut);white-space:nowrap}
.who nav{display:inline}.who nav a{color:var(--acc);margin-right:.5rem;text-decoration:none;font-weight:600}
.gate{max-width:34rem;margin:5rem auto;padding:2rem;background:#fff;border:1px solid var(--line);border-radius:10px}
main{padding:1.25rem;max-width:1200px;margin:0 auto}
.stats{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:8px;padding:.5rem .8rem;min-width:7rem}
.stat b{display:block;font-size:1.3rem;line-height:1.2}
.stat span{color:var(--mut);font-size:.78rem}
.controls{display:flex;flex-wrap:wrap;gap:.75rem;align-items:end;margin-bottom:1rem}
.controls label{display:flex;flex-direction:column;gap:.2rem;font-size:.78rem;color:var(--mut)}
.controls .grow{flex:1;min-width:12rem}
select,input{font:inherit;padding:.35rem .5rem;border:1px solid var(--line);border-radius:6px;background:#fff}
.admin{background:#fff;border:1px solid var(--line);border-radius:8px;padding:.75rem 1rem;margin-bottom:1rem;display:flex;gap:.75rem;align-items:end;flex-wrap:wrap}
.admin h3{margin:0;font-size:.9rem;align-self:center}
.accounts{background:#fff;border:1px solid var(--line);border-radius:8px;padding:.75rem 1rem;margin-bottom:1rem}
.account-create{background:#fff;border:1px solid var(--line);border-radius:8px;padding:1rem;margin-bottom:1rem}.account-create h2{font-size:1rem;margin:0 0 .25rem}.account-create p{margin:.1rem 0 .8rem;color:var(--mut);font-size:.82rem}
.accounts-head{display:flex;justify-content:space-between;gap:1rem;align-items:end}.account-search{display:flex;flex-direction:column;gap:.2rem;font-size:.78rem;color:var(--mut);min-width:15rem}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:8px}.account-table{width:100%;border-collapse:collapse;min-width:780px}.account-table th,.account-table td{padding:.65rem .7rem;border-bottom:1px solid var(--line);vertical-align:middle}.account-table th{background:#f6f5f2;text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}.account-table tr:last-child td{border-bottom:0}.account-table tr:hover{background:#f9f8f6}.account-name{font-weight:650}.account-email,.account-last{font-size:.8rem;color:var(--mut)}.role-list{display:flex;gap:.25rem;flex-wrap:wrap}.role-chip{padding:.12rem .42rem;border-radius:99px;background:#e8f0ee;color:var(--acc);font-size:.75rem}.status{display:inline-block;padding:.14rem .45rem;border-radius:99px;font-size:.76rem;background:#e8f0ee;color:var(--acc)}.status-suspended{background:#fdf0e3;color:var(--warn)}.status-disabled{background:#f2f1ee;color:var(--mut)}.actions{display:flex;gap:.35rem;white-space:nowrap}.danger{border-color:#d9b0ad;color:var(--bad)}.dialog-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}
.section-head h3{margin:0;font-size:.95rem}.section-head p{margin:.15rem 0 .7rem;color:var(--mut);font-size:.78rem}
.account{border-top:1px solid var(--line);padding:.65rem 0}.account:first-child{border-top:0}.account-name{font-weight:600}.account-meta{color:var(--mut);font-size:.78rem}.account .row{margin:.35rem 0 0}
.hint{color:var(--mut);font-size:.78rem}
table.tasks{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);background:#f6f5f2}
tbody tr:hover{background:#f9f8f6;cursor:pointer}
td.code{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.gate-flag{color:var(--bad);font-weight:700}
.pill{display:inline-block;padding:.1rem .5rem;border-radius:999px;font-size:.74rem;border:1px solid var(--line)}
.s-belum{background:#f2f1ee;color:var(--mut)}
.s-berjalan{background:#e8f0ee;color:var(--acc)}
.s-terhambat{background:#fdf0e3;color:var(--warn)}
.s-selesai{background:#e6f2e9;color:var(--ok)}
.s-tidak_berlaku{background:#f2f1ee;color:var(--mut);text-decoration:line-through}
button,.primary,.ghost{font:inherit;border-radius:6px;padding:.35rem .7rem;cursor:pointer;text-decoration:none;display:inline-block}
.primary{background:var(--acc);color:#fff;border:1px solid var(--acc)}
.ghost{background:#fff;border:1px solid var(--line);color:var(--fg)}
.sm{padding:.3rem .6rem;font-size:.85rem}
dialog{border:1px solid var(--line);border-radius:10px;padding:1.25rem;max-width:44rem;width:92%}
dialog h2{margin:.2rem 0 .4rem;font-size:1rem}
.meta{color:var(--mut);font-size:.82rem;margin-bottom:.75rem}
.row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:end;margin:.6rem 0}
.log{border-top:1px solid var(--line);margin-top:.9rem;padding-top:.6rem;font-size:.82rem;color:var(--mut)}
.log div{margin:.2rem 0}
.close{margin-top:1rem;text-align:right}
@media (max-width:720px){th:nth-child(4),td:nth-child(4){display:none}.accounts-head{align-items:stretch;flex-direction:column}.account-search{min-width:0}}