:root{--bg:#f4f6f9;--kartu:#fff;--teks:#1b2430;--redup:#5d6b7c;--garis:#dfe4ea;--utama:#0e6e8c;--utama2:#0a5168;--hijau:#1f8a4c;--kuning:#a86a00;--merah:#b3261e}
@media (prefers-color-scheme:dark){:root{--bg:#10151b;--kartu:#18202a;--teks:#e6ebf1;--redup:#9aa7b6;--garis:#2a3542;--utama:#3fb3d6;--utama2:#69c8e4;--hijau:#5cc98a;--kuning:#e8b04a;--merah:#ef7a72}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--teks);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
header{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--kartu);border-bottom:1px solid var(--garis)}
.merek{font-weight:600;letter-spacing:.08em}.merek b{color:var(--utama)}.merek span{color:var(--redup);font-size:.8em}
nav{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
nav a,.link{color:var(--utama);text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer}
main{max-width:1100px;margin:0 auto;padding:16px}
h1{font-size:1.4rem;margin:.2em 0 .8em}h2{font-size:1.1rem;margin:1.4em 0 .6em}
.kotak,.kartu{background:var(--kartu);border:1px solid var(--garis);border-radius:10px;padding:14px 16px;margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.angka{font-size:1.5rem;font-weight:600;font-variant-numeric:tabular-nums}.ket{color:var(--redup);font-size:.85rem}
.tabel{width:100%;overflow-x:auto}
table{width:100%;border-collapse:collapse;background:var(--kartu);border:1px solid var(--garis);border-radius:10px;overflow:hidden}
th,td{padding:8px 10px;border-bottom:1px solid var(--garis);text-align:left;vertical-align:top;font-variant-numeric:tabular-nums}
th{font-size:.8rem;color:var(--redup);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
tr:last-child td{border-bottom:0}
label{display:block;margin:10px 0 4px;font-weight:500}
input[type=text],input[type=password],input[type=url],input[type=number],input[type=date],select,textarea{width:100%;padding:9px 10px;border:1px solid var(--garis);border-radius:8px;background:var(--bg);color:var(--teks);font:inherit}
textarea{min-height:260px;font-family:ui-monospace,Consolas,monospace;font-size:13px}
button,.tombol{display:inline-block;background:var(--utama);color:#fff;border:0;border-radius:8px;padding:9px 14px;font:inherit;cursor:pointer;text-decoration:none}
button.kedua{background:transparent;color:var(--utama);border:1px solid var(--utama)}
button:hover{opacity:.92}
form.inline{display:inline}
.baris{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:12px;border:1px solid}
.flash.ok{border-color:var(--hijau);color:var(--hijau)}.flash.err{border-color:var(--merah);color:var(--merah)}
.lencana{display:inline-block;padding:1px 8px;border-radius:99px;font-size:.78rem;border:1px solid currentColor}
.lencana.hijau{color:var(--hijau)}.lencana.kuning{color:var(--kuning)}.lencana.merah{color:var(--merah)}.lencana.abu{color:var(--redup)}
details summary{cursor:pointer;color:var(--utama)}
pre{white-space:pre-wrap;word-break:break-word;background:var(--bg);border:1px solid var(--garis);border-radius:8px;padding:10px;font-size:13px}
.redup{color:var(--redup)}
footer{color:var(--redup);font-size:.8rem;text-align:center;padding:20px 16px}
.masuk{max-width:380px;margin:40px auto}
.sempit{max-width:220px}.jarak{margin-top:10px}label.inline{display:inline-flex;gap:4px;margin:0;font-weight:400}
.lencana{white-space:nowrap}
@media (max-width:700px){.tabel table{min-width:680px}main{padding:12px}}
a{color:var(--utama)}a:hover{color:var(--utama2)}