.sync-status {
  max-width: 1120px;
  margin: 12px auto 0;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border: 1px solid #cfe6d8;
  border-radius: 14px;
  background: #edf9f1;
  color: #245d3b;
  font-size: 13px;
}
.sync-status .sync-dot { width: 10px; height: 10px; border-radius: 50%; background: #25a45d; box-shadow: 0 0 0 4px #25a45d22; }
.sync-status.offline { border-color: #efd894; background: #fff8dc; color: #745a00; }
.sync-status.offline .sync-dot { background: #e5a600; box-shadow: 0 0 0 4px #e5a60022; }
.sync-status.has-error { border-color: #efb6b1; background: #fff0ef; color: #8c2d27; }
.sync-status .sync-error { font-weight: 800; }
.pending-sync { border-color: #e5c45b; background: #fffaf0; }
.pending-sync small { color: #806200 !important; }
@media (max-width: 480px) {
  .sync-status { margin: 10px 12px 0; gap: 7px 12px; font-size: 12px; }
  .sync-status span:not(.sync-dot) { width: 100%; }
}