:root{
  --bg:#f6f7f9; --card:#fff; --teks:#111827; --samar:#6b7280;
  --garis:#e5e7eb; --aksen:#1e4d8f; --aksen-lembut:#e8effa;
  --hijau:#0f766e; --kuning:#b45309; --merah:#b91c1c;
}
*{box-sizing:border-box}
body{
  margin:0; padding:0 0 40px; background:var(--bg); color:var(--teks);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
header[hidden]{display:none}
header{
  position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:10px 14px; background:var(--card); border-bottom:1px solid var(--garis);
}
header small{display:block; color:var(--samar); font-size:12px}
.kepala-kiri{display:flex; align-items:center; gap:10px}
.kepala-kanan{display:flex; align-items:center; gap:10px}
.samar{color:var(--samar); font-size:13px}
main{max-width:760px; margin:0 auto; padding:16px 14px}
h1{font-size:19px; margin:0 0 4px}
h2{font-size:16px; margin:22px 0 10px}
h3{font-size:15px; margin:0 0 6px}
p{margin:0 0 10px}
.ikon{
  border:1px solid var(--garis); background:var(--card); border-radius:10px;
  width:34px; height:34px; font-size:17px; cursor:pointer; color:var(--teks);
}
.tautan{border:0; background:none; color:var(--aksen); cursor:pointer; font-size:14px; padding:4px}
.kartu{background:var(--card); border:1px solid var(--garis); border-radius:14px; padding:14px; margin-bottom:12px}
.statistik{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.statistik .kartu{margin:0}
.statistik b{display:block; font-size:26px; line-height:1.2}
.statistik span{color:var(--samar); font-size:13px}
.menu{display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:10px}
.menu button{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px;
  background:var(--card); border:1px solid var(--garis); border-radius:14px; cursor:pointer;
  font-size:13px; color:var(--teks); text-align:center;
}
.menu button:hover{border-color:var(--aksen); background:var(--aksen-lembut)}
.menu .lambang{font-size:20px}
label{display:block; font-size:13px; color:var(--samar); margin:10px 0 4px}
input,select,textarea{
  width:100%; padding:10px 11px; font:inherit; color:inherit; background:var(--card);
  border:1px solid var(--garis); border-radius:10px;
}
textarea{min-height:70px; resize:vertical}
button.utama{
  background:var(--aksen); color:#fff; border:0; border-radius:10px; padding:11px 16px;
  font:inherit; font-weight:600; cursor:pointer; width:100%; margin-top:14px;
}
button.utama:disabled{opacity:.6; cursor:not-allowed}
button.sekunder{
  background:var(--card); color:var(--aksen); border:1px solid var(--aksen);
  border-radius:10px; padding:8px 12px; font:inherit; cursor:pointer;
}
.baris{display:flex; gap:10px; flex-wrap:wrap}
.baris > *{flex:1 1 140px}
.daftar{list-style:none; margin:0; padding:0}
.daftar li{
  background:var(--card); border:1px solid var(--garis); border-radius:12px;
  padding:12px; margin-bottom:10px;
}
.daftar li.kepala{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.daftar .judul{font-weight:600}
.daftar .rinci{color:var(--samar); font-size:13px}
.lencana{
  display:inline-block; font-size:11px; padding:2px 8px; border-radius:99px;
  background:var(--aksen-lembut); color:var(--aksen); white-space:nowrap;
}
.lencana.aktif{background:#e7f6ef; color:var(--hijau)}
.lencana.usulan{background:#fef3c7; color:var(--kuning)}
.lencana.inaktif{background:#eef2ff; color:#3730a3}
.pesan{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  background:#111827; color:#fff; padding:10px 16px; border-radius:10px; font-size:13px;
  max-width:90vw; z-index:50;
}
.pesan.galat{background:var(--merah)}
.kosong{color:var(--samar); text-align:center; padding:24px 8px}
.masuk{max-width:360px; margin:12vh auto 0}
.masuk h1{text-align:center; margin-bottom:16px}
.baris-tombol{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.baris-tombol button{flex:1 1 auto}