/* Komponen Progress "Akurasi" — aman dipasang di bawah dropdown pasaran */
.accuracy-wrap{
  margin-top: 8px;
  display: block;
  color:#e8eefc; /* teks utama terang */
}

.accuracy-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}

.accuracy-text{
  font-size:12px;
  line-height:1.2;
  color:#b6c1d9; /* label lembut, selaras tema */
}

.accuracy-value{
  font-weight:800;
  color:#ffffff; /* angka % putih (default) */
}

.accuracy-track{
  position:relative;
  height:8px;
  border-radius:999px;
  background:#0b1328;            /* track gelap */
  border:1px solid #22304d;       /* garis tepi tipis */
  overflow:hidden;
}

.accuracy-fill{
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #16a34a, #22c55e); /* hijau lembut → hijau terang */
  transition:width .6s ease;      /* animasi lebar */
}

/* ====== STATE: LOW (< 50%) → MERAH ====== */
/* JS menambahkan class .is-low pada wrap/track/fill */
.accuracy-wrap.is-low .accuracy-value{ color:#f87171; } /* merah terang untuk angka */
.accuracy-wrap.is-low .accuracy-track,
.accuracy-track.is-low{
  background:#1a0b0b;   /* sedikit gelap bernuansa merah */
  border-color:#7f1d1d; /* tepi merah tua */
}
.accuracy-wrap.is-low .accuracy-fill,
.accuracy-track.is-low .accuracy-fill,
.accuracy-fill.is-low{
  background:linear-gradient(90deg, #b91c1c, #ef4444); /* merah tua → merah sedang */
}

/* State tersembunyi (JS akan toggle [hidden]) */
.accuracy-wrap[hidden]{
  display:none !important;
}

/* Responsif ringan (biar rapih di mobile juga) */
@media (max-width:700px){
  .accuracy-text{ font-size:12px; }
}