* { box-sizing: border-box; margin: 0; }
body { font-family: "Segoe UI", system-ui, sans-serif; font-size: 14px; background: #F4F6F8;
  color: #222; }
header { background: #1F3864; color: #fff; padding: 14px 22px; }
header h1 { font-size: 18px; }
header p { font-size: 12px; opacity: .85; margin-top: 3px; }
header a { color: #BBD3F5; }
main { max-width: 980px; margin: 18px auto; padding: 0 14px; display: grid; gap: 16px; }
.kartu { background: #fff; border: 1px solid #DDD; border-radius: 8px; padding: 16px; }
.kartu h2 { font-size: 15px; color: #1F3864; margin-bottom: 10px; }
label { display: block; font-size: 12px; color: #444; margin-top: 8px; }
input[type=text], input[type=password], select { width: 100%; padding: 6px; margin-top: 3px; border: 1px solid #CCC;
  border-radius: 4px; font-size: 13px; }
.baris { display: flex; gap: 12px; align-items: flex-end; }
.baris label { flex: 1; }
button { padding: 8px 14px; border-radius: 5px; cursor: pointer; font-size: 13px;
  border: 1px solid #1F3864; margin-top: 10px; }
button.primary { background: #1F3864; color: #fff; }
button.secondary { background: #fff; color: #1F3864; }
button:disabled { opacity: .45; cursor: not-allowed; }
.hint { font-size: 12px; color: #666; margin: 8px 0; }
.info { font-size: 12px; color: #1F3864; margin-top: 8px; }
.hidden { display: none; }
.pasangan { display: grid; grid-template-columns: 1fr 220px 1fr; gap: 10px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid #EEE; }
.pasangan .kri { font-size: 12px; }
.pasangan .kri.kanan { text-align: right; }
.pasangan i { color: #B8860B; }
.hasil { padding: 9px; border-radius: 5px; margin-top: 10px; font-size: 13px; }
.hasil.ok { background: #E2EFDA; border: 1px solid #2E7D32; }
.hasil.gagal { background: #FCE4E4; border: 1px solid #C00000; }
table { border-collapse: collapse; margin-top: 8px; font-size: 12px; }
th, td { border: 1px solid #DDD; padding: 4px 10px; text-align: left; }
th { background: #DCE6F1; }
.rekap-baris { border-bottom: 1px solid #EEE; padding: 8px 0; }
.tag { font-size: 11px; border-radius: 9px; padding: 1px 8px; color: #fff; }
.tag.hijau { background: #2E7D32; } .tag.merah { background: #C00000; } .tag.abu { background: #9E9E9E; }
details { margin-top: 10px; background: #FAFAFA; border: 1px solid #E0E0E0; border-radius: 6px;
  padding: 8px; }
summary { cursor: pointer; font-size: 13px; color: #1F3864; font-weight: 600; }