:root {
  --tinta: #1c2b33; --petrol: #14595f; --tembaga: #b06c3f;
  --latar: #f6f4ef; --kartu: #ffffff; --garis: #dcd6c9;
}
* { box-sizing: border-box; margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--latar); color: var(--tinta); padding: 24px;
  max-width: 1180px; margin: 0 auto;
}
h1 { font-size: 1.35rem; color: var(--petrol); }
.sub { color: #5a6b72; font-size: .9rem; margin: 4px 0 18px; }
.chip {
  font-size: .68rem; background: var(--tembaga); color: #fff;
  padding: 2px 8px; border-radius: 99px; vertical-align: middle;
}
.atas { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.keluar { color: #5a6b72; font-size: .85rem; }
.gerbang {
  max-width: 420px; margin: 12vh auto; background: var(--kartu);
  border: 1px solid var(--garis); border-radius: 12px; padding: 28px; text-align: center;
}
.gerbang form { display: grid; gap: 10px; margin-top: 16px; }
.gerbang input {
  padding: 10px 12px; border: 1px solid var(--garis); border-radius: 8px; font-size: 1rem;
}
.gerbang button {
  padding: 10px; border: 0; border-radius: 8px; background: var(--petrol);
  color: #fff; font-size: 1rem; cursor: pointer;
}
.galat { color: #a33; font-size: .9rem; margin-top: 10px; }
#zona {
  border: 2px dashed var(--garis); border-radius: 12px; background: var(--kartu);
  padding: 34px; text-align: center; cursor: pointer; transition: border-color .15s;
}
#zona.seret { border-color: var(--petrol); background: #eef4f3; }
#zona p { color: #5a6b72; font-size: .95rem; }
#zona strong { color: var(--petrol); }
#pratinjau { max-height: 210px; max-width: 100%; margin-top: 12px; border-radius: 8px; }
#status { margin: 14px 0; font-size: .92rem; color: #5a6b72; }
.peringatan {
  background: #fdf3e4; border: 1px solid #e5c791; color: #7a5215;
  border-radius: 8px; padding: 10px 14px; margin: 10px 0; font-size: .9rem;
}
.badge-exact {
  display: inline-block; background: var(--petrol); color: #fff;
  font-size: .72rem; padding: 3px 9px; border-radius: 99px; margin-left: 8px;
  vertical-align: middle;
}
.hasil { display: grid; gap: 16px; margin-top: 18px; }
.kartu {
  background: var(--kartu); border: 1px solid var(--garis); border-radius: 12px;
  padding: 16px; display: grid; grid-template-columns: 190px 1fr; gap: 16px;
}
.kartu img { width: 100%; border-radius: 8px; border: 1px solid var(--garis); }
.kartu h3 { font-size: 1.02rem; }
.meta { color: #5a6b72; font-size: .86rem; margin: 3px 0 8px; }
.skor { font-weight: 700; color: var(--tembaga); font-size: 1.05rem; }
.alasan { font-size: .88rem; margin: 6px 0 10px; }
table { border-collapse: collapse; font-size: .82rem; width: 100%; }
caption { text-align: left; font-size: .78rem; color: #5a6b72; padding: 4px 0; }
th, td { border: 1px solid var(--garis); padding: 4px 8px; text-align: right; }
th { background: #eef0ea; font-weight: 600; }
td:first-child, th:first-child { text-align: left; }
.catatan { font-size: .78rem; color: #5a6b72; margin-top: 22px; line-height: 1.5; }
@media (max-width: 640px) { .kartu { grid-template-columns: 1fr; } }