:root { --latar:#f6f7f9; --panel:#fff; --teks:#16232e; --redup:#5b6b78; --garis:#dde3e8; --utama:#1f6feb;
  --hijau:#1a7f37; --merah:#cf222e; --siap:#bf8700; }
@media (prefers-color-scheme: dark) { :root { --latar:#0f171e; --panel:#16232e; --teks:#e6edf3; --redup:#8b9aa7;
  --garis:#2a3a47; --utama:#4493f8; --hijau:#3fb950; --merah:#f85149; --siap:#d29922; } }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--latar); color:var(--teks); }
a { color:var(--utama); }
.kepala { display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; border-bottom:1px solid var(--garis); background:var(--panel); }
.merek { font-weight:700; text-decoration:none; color:var(--teks); }
.menu { display:flex; gap:1rem; align-items:center; }
main { max-width:960px; margin:0 auto; padding:1rem; }
.panel { background:var(--panel); border:1px solid var(--garis); border-radius:10px; padding:1rem; margin:0 0 1rem; }
.panel.sempit { max-width:460px; margin:2rem auto; }
h1, h2 { margin:0 0 .75rem; font-size:1.15rem; } h1 { font-size:1.35rem; }
.redup { color:var(--redup); font-weight:400; font-size:.9rem; }
.hijau { color:var(--hijau); } .merah, .galat-teks { color:var(--merah); }
.flash { padding:.6rem .9rem; border-radius:8px; border:1px solid var(--hijau); margin:0 0 1rem; }
.flash-galat { border-color:var(--merah); }
.kartu-baris { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:.75rem; }
.kartu { border:1px solid var(--garis); border-radius:8px; padding:.6rem .75rem; display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.kartu .label { color:var(--redup); font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; }
.kartu .redup { overflow-wrap:anywhere; }
form.kolom { display:flex; flex-direction:column; gap:.5rem; margin:0 0 1rem; }
form.sebaris { display:inline; }
label { display:flex; flex-direction:column; gap:.25rem; font-size:.9rem; }
input, textarea { font:inherit; padding:.5rem .6rem; border:1px solid var(--garis); border-radius:6px;
  background:var(--latar); color:var(--teks); width:100%; }
textarea { resize:vertical; margin:0 0 .5rem; }
button { font:inherit; padding:.45rem .9rem; border-radius:6px; border:1px solid var(--garis); background:var(--panel);
  color:var(--teks); cursor:pointer; align-self:flex-start; }
button.utama { background:var(--utama); border-color:var(--utama); color:#fff; }
button.siap { background:var(--siap); border-color:var(--siap); color:#fff; }
button.tautan { border:0; background:none; color:var(--utama); padding:0; text-decoration:underline; }
pre.layar { margin:0; padding:.75rem; background:var(--latar); border-radius:6px; overflow-x:auto; font-size:12px; line-height:1.35; max-height:420px; }
code { font-size:.9em; }
.tabel { width:100%; border-collapse:collapse; font-size:.85rem; }
.tabel th, .tabel td { text-align:left; padding:.35rem .5rem; border-bottom:1px solid var(--garis); vertical-align:top; overflow-wrap:anywhere; }