* { box-sizing: border-box; margin: 0; }
body { font-family: "Segoe UI", system-ui, sans-serif; font-size: 14px; }
#app { display: flex; height: 100vh; }
#sidebar { width: 360px; overflow-y: auto; padding: 14px; background: #FAFAF7;
  border-right: 2px solid #1F3864; }
#map { flex: 1; }
h1 { color: #1F3864; font-size: 20px; }
.subtitle { color: #666; font-size: 12px; margin: 4px 0 10px; }
details { margin: 8px 0; background: #fff; border: 1px solid #DDD; border-radius: 6px; padding: 8px; }
summary { font-weight: 600; color: #1F3864; cursor: pointer; }
select { width: 100%; margin-top: 6px; padding: 5px; }
.note-box { background: #FFF3CD; border: 1px solid #B8860B; border-radius: 6px;
  padding: 8px; font-size: 12px; margin: 6px 0; }
.hidden { display: none; }
.hint { font-size: 12px; color: #666; margin: 6px 0; }
.badge { background: #B8860B; color: #fff; font-size: 10px; border-radius: 8px; padding: 1px 7px; }
.leg { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: 3px 0; }
.leg span { width: 16px; height: 12px; display: inline-block; border: 1px solid #999; }
#detail { margin-top: 10px; background: #fff; border: 1px solid #1F3864;
  border-radius: 6px; padding: 10px; }
#detail h2 { font-size: 15px; color: #1F3864; }
.d-klaster { padding: 6px; }
.d-klaster table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
.d-klaster th, .d-klaster td { border: 1px solid #DDD; padding: 3px 5px; text-align: left; }
.badge-kelas { color: #fff; font-size: 11px; border-radius: 4px; padding: 1px 6px; }
footer { margin-top: 14px; font-size: 11px; color: #888; }
button.primary, button.secondary { width: 100%; padding: 7px; margin-top: 8px; cursor: pointer;
  border-radius: 5px; border: 1px solid #1F3864; font-size: 13px; }
button.primary { background: #1F3864; color: #fff; }
button.secondary { background: #fff; color: #1F3864; }
button:disabled { opacity: .5; cursor: not-allowed; }
input[type=text], input[type=date] { width: 100%; padding: 4px; margin-top: 4px; }
input[type=range] { width: 100%; }
label { display: block; margin-top: 8px; font-size: 12px; color: #333; }
.dua-kolom { display: flex; gap: 8px; }
.dua-kolom label { flex: 1; }
.metrik { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.metrik div { background: #F1F5FB; border-radius: 5px; padding: 6px; text-align: center; }
.metrik .lbl { display: block; font-size: 10px; color: #666; }
.metrik b { font-size: 14px; color: #1F3864; }
#k-riwayat table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 4px; }
#k-riwayat th, #k-riwayat td { border: 1px solid #DDD; padding: 2px 4px; }
.tombol-ekspor { flex: 1; display: block; text-align: center; margin-top: 8px; padding: 7px;
  border: 1px solid #2E7D32; border-radius: 5px; background: #fff; color: #2E7D32;
  text-decoration: none; font-size: 12px; }
.tombol-ekspor:hover { background: #E2EFDA; }
.tautan-kalibrasi { margin-top: 10px; text-align: center; }
.tautan-kalibrasi a { font-size: 12px; color: #1F3864; text-decoration: none;
  border: 1px dashed #1F3864; border-radius: 5px; padding: 6px 10px; display: block; }
.tautan-kalibrasi a:hover { background: #DCE6F1; }
#bar-akun { display: flex; gap: 8px; align-items: center; font-size: 12px; margin: 8px 0;
  padding: 6px 8px; background: #EDF1F7; border-radius: 5px; }
#bar-akun a { color: #1F3864; }
.peran { color: #fff; border-radius: 9px; padding: 1px 8px; font-size: 10px; font-weight: 700; }
.peran.anonim { background: #9E9E9E; } .peran.tier1 { background: #607D8B; }
.peran.tier2 { background: #B8860B; } .peran.tier3 { background: #2E7D32; }
.peran.admin { background: #C00000; }
#v-isi table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 6px; }
#v-isi th, #v-isi td { border: 1px solid #DDD; padding: 3px 5px; }
#v-isi button { padding: 2px 6px; font-size: 11px; margin: 0 1px; }