:root {
  --latar: #E9EEF1; --kartu: #FFFFFF; --tinta: #16232E; --redup: #5B6B78; --garis: #D3DCE2;
  --aksen: #1F6F8B; --aksen-gelap: #155268; --ok: #2E7D4F; --tunggu: #A8650F; --bahaya: #B42318;
  --ungu: #6B4FA0; --proses: #2F5EA8; --terminal: #101B24; --kuning: #F2B84B;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--latar); color: var(--tinta); font: 15px/1.5 var(--sans); }
a { color: var(--aksen-gelap); }
:focus-visible { outline: 3px solid var(--kuning); outline-offset: 2px; }

.kepala { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem; background: var(--tinta); color: #fff; }
.kepala a { color: #fff; text-decoration: none; }
.kepala nav { display: flex; gap: 1rem; align-items: center; }
.merek { font-weight: 700; }
main { max-width: 1100px; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.3rem; margin: .2rem 0 .8rem; }
h2 { font-size: 1.05rem; margin: 0 0 .5rem; }

.panel { background: var(--kartu); border: 1px solid var(--garis); border-radius: 10px;
  padding: 1rem 1.1rem; margin-bottom: 1rem; }
.sempit { max-width: 440px; margin: 3rem auto; }

button { font: inherit; border: 1px solid var(--garis); background: var(--kartu); color: var(--tinta);
  border-radius: 8px; padding: .45rem .85rem; cursor: pointer; min-height: 40px; }
button:hover { border-color: var(--aksen); }
button.utama { background: var(--aksen); border-color: var(--aksen); color: #fff; }
button.kedua { color: var(--redup); }
button.tautan { background: none; border: 0; color: #fff; padding: 0; min-height: 0; text-decoration: underline; }
button.siap { background: var(--bahaya); border-color: var(--bahaya); color: #fff; }
.sebaris { display: inline; }
.kanan { float: right; }

.flash { background: #E6F2EA; border: 1px solid #B9D9C4; color: #1E5233; padding: .6rem .8rem; border-radius: 8px; }
.flash-galat { background: #FBEAE8; border-color: #F0C2BD; color: #7A1A12; }

.bot-bot { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 1rem; }
@media (min-width: 760px) { .bot-bot { grid-template-columns: 1fr 1fr; } }
.bot { background: var(--kartu); border: 1px solid var(--garis); border-radius: 10px; padding: 1rem; }
.bot header { display: flex; justify-content: space-between; align-items: center; }
.bot h2 { margin: 0; }
.status-mati { border-color: #F0C2BD; }
.pil { font-size: .8rem; padding: .15rem .6rem; border-radius: 999px; background: #E6ECEF; }
.pil-diam { background: #E3F1E8; color: var(--ok); }
.pil-sibuk { background: #FBF0DC; color: var(--tunggu); }
.pil-mati, .pil-galat { background: #FBEAE8; color: var(--bahaya); }
.tahan button { opacity: .55; cursor: wait; }
.angka { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem 1rem; margin: .8rem 0; }
.angka dt { font-size: .78rem; color: var(--redup); }
.angka dd { margin: 0; font-variant-numeric: tabular-nums; }
.peringatan { color: var(--tunggu); font-weight: 600; }
.tugas { font-size: .88rem; color: var(--redup); margin: .4rem 0; }
.tugas-ok { color: var(--ok); }
.tugas-galat { color: var(--bahaya); }
.tombol-baris { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.izin { background: var(--terminal); color: #E8EEF2; border-left: 6px solid var(--kuning); border-radius: 10px;
  padding: 1rem 1.1rem; margin-bottom: 1rem; }
.izin h2 { color: var(--kuning); }
.izin pre { background: #0A1219; border: 1px solid #24323D; border-radius: 6px; padding: .75rem;
  font: 13px/1.45 var(--mono); white-space: pre-wrap; word-break: break-word; overflow-x: auto; }
.izin .catatan { color: #A9B7C2; }
.izin button { background: #1D2A35; border-color: #33434F; color: #E8EEF2; }
.izin button.utama { background: var(--kuning); border-color: var(--kuning); color: var(--tinta); font-weight: 700; }
.izin button.siap { background: var(--bahaya); border-color: var(--bahaya); color: #fff; }

.tab { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .5rem 0 .8rem; }
.tab a { padding: .35rem .7rem; border-radius: 999px; text-decoration: none; color: var(--tinta);
  background: var(--kartu); border: 1px solid var(--garis); }
.tab a[aria-current] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.tab .org { margin-left: auto; display: flex; gap: .3rem; flex-wrap: wrap; }
.tab .org a { font-size: .85rem; }

.daftar-pr { list-style: none; margin: 0; padding: 0; background: var(--kartu); border: 1px solid var(--garis);
  border-radius: 10px; }
.pr { display: flex; gap: 1rem; justify-content: space-between; align-items: center; padding: .75rem 1rem;
  border-top: 1px solid var(--garis); }
.pr:first-child { border-top: 0; }
.pr-perlu { box-shadow: inset 4px 0 0 var(--kuning); }
.pr-utama { min-width: 0; }
.pr-baris { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0; }
.pr-judul { margin: .2rem 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-meta { margin: 0; font-size: .85rem; color: var(--redup); }
.pr-aksi { display: flex; gap: .4rem; flex-shrink: 0; }
@media (max-width: 640px) {
  .pr { flex-direction: column; align-items: stretch; }
  .pr-judul { white-space: normal; }
  .tab .org { margin-left: 0; }
}
.kosong { padding: 1.2rem 1rem; color: var(--redup); }

.kode { font-family: var(--mono); font-size: .9em; }
a.kode { font-weight: 600; }
.badge { font-size: .78rem; padding: .1rem .5rem; border-radius: 6px; background: #E6ECEF; color: var(--redup); }
.badge-ok { background: #E3F1E8; color: var(--ok); }
.badge-tunggu { background: #FBF0DC; color: var(--tunggu); }
.badge-ubah { background: #FBEAE8; color: var(--bahaya); }
.badge-proses { background: #E4ECF7; color: var(--proses); }
.badge-redup { background: #EEF1F3; color: var(--redup); }
.chip { font-size: .75rem; padding: .08rem .45rem; border-radius: 999px; border: 1px solid var(--garis); color: var(--redup); }
.chip-ungu { border-color: #CFC4E3; color: var(--ungu); }
.catatan { color: var(--redup); font-size: .9rem; }
.galat-teks { color: var(--bahaya); }

.linimasa { margin: 0; padding-left: 1.1rem; }
.linimasa time { font-variant-numeric: tabular-nums; color: var(--redup); margin-right: .4rem; }
.temuan { border-top: 1px solid var(--garis); padding: .7rem 0; }
.temuan:first-of-type { border-top: 0; }
.temuan pre, .review { background: #F4F7F9; border: 1px solid var(--garis); border-radius: 6px; padding: .6rem .75rem;
  font: 13px/1.45 var(--mono); white-space: pre-wrap; word-break: break-word; overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabel th, .tabel td { text-align: left; padding: .4rem .5rem; border-top: 1px solid var(--garis); vertical-align: top; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }