.bonus-review-progress {
  padding: 0.35rem 1rem 1.1rem;
}
.bonus-review-progress-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 0.55rem;
  color: var(--ink, #fff);
}
.bonus-review-progress-heading strong {
  font-size: 1rem;
}
.bonus-review-progress-heading .bonus-review-current {
  font-size: 0.93rem;
  font-weight: 550;
  opacity: 0.85;
}
.bonus-review-progress-heading span {
  font-size: 0.86rem;
  opacity: 0.78;
}
.bonus-review-progress-track {
  position: relative;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--line, #8a6554);
  overflow: visible;
}
.bonus-review-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--orange, #f2a034);
  transition: width 300ms ease;
}
.bonus-review-progress-marker {
  position: absolute;
  top: 50%;
  width: 0.68rem;
  height: 0.68rem;
  border: 2px solid var(--orange, #f2a034);
  border-radius: 50%;
  background: var(--paper, #57392e);
  transform: translate(-50%, -50%);
}
.bonus-review-progress-marker.is-reached {
  background: var(--orange, #f2a034);
}
.bonus-view .bonus-month-field { display: grid; }
.bonus-view .bonus-month-stepper[hidden], .bonus-view .bonus-current-month[hidden] { display: none; }
.bonus-current-month { font-size: 1rem; font-weight: 650; }
.bonus-percentage-admin {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.bonus-percentage-admin .target-field { display: grid; gap: 0.4rem; }
.bonus-percentage-controls {
  display: flex;
  align-items: end;
  gap: 0.75rem;
  grid-column: 1 / -1;
}
.bonus-percentage-controls label { display: grid; gap: 0.4rem; min-width: 13rem; }
@media (max-width: 640px) {
  .bonus-review-progress { padding-inline: 0.6rem; }
  .bonus-percentage-admin { grid-template-columns: 1fr; }
  .bonus-percentage-controls { align-items: stretch; flex-direction: column; }
}