.onboardingProgress {
  margin: 0 16px 18px;
  padding: 18px;
  background: radial-gradient(circle at 100% 0%, rgba(48, 128, 206, 0.13), transparent 34%), linear-gradient(145deg, #f7fbff, #ffffff 58%);
  border: 1px solid #d8e5f1;
  border-radius: 15px;
  box-shadow: 0 14px 34px rgba(24, 64, 104, 0.08);
}
.onboardingProgressHeader { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #244363; font-size: 12px; font-weight: 800; }
.onboardingProgressHeader strong { color: #087d75; font-size: 18px; }
.onboardingProgressBar { height: 8px; margin: 11px 0 17px; overflow: hidden; background: #e3ebf4; border-radius: 999px; }
.onboardingProgressBar span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #176fd1, #18a88f); border-radius: inherit; transition: width 260ms ease; }
.onboardingSteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.onboardingSteps li { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 11px; color: #75869a; background: #fff; border: 1px solid #e0e8f1; border-radius: 11px; }
.onboardingSteps li > span { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; color: #60758c; background: #edf3f8; border-radius: 9px; font-size: 10px; font-weight: 900; }
.onboardingSteps li strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.onboardingSteps li.is-current { color: #174b7f; background: #f4f9ff; border-color: #9dc7ed; box-shadow: 0 7px 18px rgba(25, 103, 176, 0.1); }
.onboardingSteps li.is-current > span { color: #fff; background: linear-gradient(145deg, #126dc8, #278fe1); }
.onboardingSteps li.is-complete { color: #17655f; background: #f1fbf8; border-color: #bde4db; }
.onboardingSteps li.is-complete > span { color: #08766d; background: #d9f2ec; }
.onboardingDraftStatus { margin: 13px 0 0; color: #687b91; font-size: 11px; }
.onboardingDraftStatus.is-dirty { color: #9a6515; font-weight: 800; }
.onboardingActions { align-items: center; justify-content: flex-end; gap: 10px; }
@media (max-width: 700px) {
  .onboardingProgress { margin-inline: 12px; padding: 14px; }
  .onboardingSteps { grid-template-columns: 1fr; }
  .onboardingSteps li strong { white-space: normal; }
  .onboardingActions { align-items: stretch; flex-direction: column-reverse; padding-inline: 12px; }
  .onboardingActions > button { width: 100%; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .onboardingProgressBar span { transition: none; } }