.progress-sync-badge{
  width:max-content;
  max-width:calc(100% - 28px);
  margin:10px auto 4px;
  padding:7px 12px;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.82rem;
  font-weight:800;
  color:#5a3a67;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(106,42,145,.14);
  box-shadow:0 5px 16px rgba(78,37,101,.08);
}
.progress-sync-badge[data-state="saving"],
.progress-sync-badge[data-state="loading"]{opacity:.82}
.progress-sync-badge[data-state="offline"],
.progress-sync-badge[data-state="error"]{background:#fff7df;color:#744f16;border-color:#efd58e}
@media (max-width:640px){
  .progress-sync-badge{font-size:.76rem;margin-top:8px;padding:6px 10px}
}