:root {
  --latar: #f5f6f8;
  --kartu: #ffffff;
  --teks: #1d2433;
  --redup: #667085;
  --garis: #e2e5ea;
  --utama: #1f5fbf;
  --utama-teks: #ffffff;
  --sukses: #1d7a46;
  --sukses-latar: #e6f4ec;
  --galat: #b42318;
  --galat-latar: #fdecea;
  --waspada: #9a6700;
  --waspada-latar: #fff4d6;
  --info-latar: #e8f0fb;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--latar); color: var(--teks); font: 14px/1.45 "Segoe UI", system-ui, sans-serif; }
a { color: var(--utama); text-decoration: none; }
a:hover { text-decoration: underline; }
main { max-width: 1400px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-size: 20px; margin: 0 0 16px; }
h2 { font-size: 16px; margin: 24px 0 10px; }

.atas { display: flex; align-items: center; gap: 24px; background: #17233b; color: #fff; padding: 0 16px; height: 52px; }
.atas a { color: #cfd8e8; }
.atas .merek { color: #fff; font-weight: 600; font-size: 16px; }
.atas nav { display: flex; gap: 4px; flex: 1; }
.atas nav a { padding: 6px 12px; border-radius: 6px; }
.atas nav a.aktif, .atas nav a:hover { background: #2a3a5c; color: #fff; text-decoration: none; }
.atas .akun { display: flex; align-items: center; gap: 12px; }
.atas form { margin: 0; }
button.tautan { background: none; border: 0; color: #cfd8e8; cursor: pointer; font: inherit; padding: 0; }

.pesan { padding: 10px 14px; border-radius: 6px; margin-bottom: 10px; }
.pesan.sukses { background: var(--sukses-latar); color: var(--sukses); }
.pesan.galat { background: var(--galat-latar); color: var(--galat); }

.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: 8px; padding: 16px; }
.angka { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.angka .kartu b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
.angka .kartu span { color: var(--redup); }

button, .tombol { background: var(--utama); color: var(--utama-teks); border: 0; border-radius: 6px; padding: 7px 14px;
  font: inherit; cursor: pointer; display: inline-block; }
button.kedua, .tombol.kedua { background: #fff; color: var(--teks); border: 1px solid var(--garis); }
button.kecil { padding: 3px 9px; font-size: 13px; }
input, select { font: inherit; padding: 6px 8px; border: 1px solid var(--garis); border-radius: 6px; background: #fff; }
input[type=file] { border: 0; padding: 0; }

.saring { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; }
.saring label { display: flex; flex-direction: column; gap: 3px; color: var(--redup); font-size: 12px; }
.chip { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--garis);
  color: var(--teks); margin: 0 4px 6px 0; font-size: 13px; }
.chip.aktif { background: var(--utama); color: #fff; border-color: var(--utama); }

table { width: 100%; border-collapse: collapse; background: var(--kartu); border: 1px solid var(--garis); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--garis); vertical-align: top; }
th { background: #fafbfc; font-weight: 600; font-size: 12px; color: var(--redup); text-transform: uppercase; letter-spacing: .02em; }
td.uang, th.uang { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.redup { color: var(--redup); font-size: 12px; }
.kecil { font-size: 12px; }
.nowrap { white-space: nowrap; }

.thumb { width: 72px; height: 96px; object-fit: cover; border-radius: 4px; border: 1px solid var(--garis); display: block; }
.label { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.label.COCOK { background: var(--sukses-latar); color: var(--sukses); }
.label.PILIH, .label.SATU_KANDIDAT { background: var(--waspada-latar); color: var(--waspada); }
.label.BELUM_ADA, .label.DATA_KURANG { background: var(--galat-latar); color: var(--galat); }
.label.BUKAN_BUKTI, .label.DIABAIKAN { background: #eef0f3; color: var(--redup); }

.kandidat { list-style: none; margin: 0 0 6px; padding: 0; }
.kandidat li { padding: 5px 6px; border: 1px solid var(--garis); border-radius: 6px; margin-bottom: 4px; display: flex; gap: 8px; align-items: flex-start; }
.kandidat li.saran { border-style: dashed; }
.kandidat label { flex: 1; cursor: pointer; }
.selisih { color: var(--galat); font-weight: 600; }
.cocok-info { background: var(--sukses-latar); border-radius: 6px; padding: 6px 8px; }
details summary { cursor: pointer; color: var(--utama); font-size: 13px; }
.baris-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.baris-form input { width: 130px; }
.wa-teks { white-space: pre-wrap; max-width: 280px; }

.login { max-width: 360px; margin: 80px auto; }
.login label { display: block; margin-bottom: 12px; }
.login input { width: 100%; margin-top: 4px; }
.login button { width: 100%; }
.form-kolom label { display: block; margin-bottom: 12px; max-width: 360px; }
.form-kolom input { width: 100%; margin-top: 4px; }

@media (max-width: 800px) {
  .atas { flex-wrap: wrap; height: auto; padding: 8px 16px; gap: 8px; }
  table, thead, tbody, tr, td { display: block; }
  thead { display: none; }
  tr { border-bottom: 2px solid var(--garis); }
  td { border: 0; }
}