.sync-status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 36px;
  padding: .48rem .8rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}

.sync-status i {
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: #facc15;
  box-shadow: 0 0 0 4px rgba(250, 204, 21, .16);
}

.sync-status[data-state="synced"] i {
  background: #4ade80;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, .16);
}

.sync-status[data-state="protected"] i {
  background: #7dd3fc;
  box-shadow: 0 0 0 4px rgba(125, 211, 252, .16);
}

.sync-status[data-state="syncing"] i {
  animation: sync-pulse 1.1s ease-in-out infinite;
}

.sync-status[data-state="offline"] i,
.sync-status[data-state="error"] i {
  background: #fb7185;
  box-shadow: 0 0 0 4px rgba(251, 113, 133, .16);
}

.sync-status[data-state="protected"] i {
  background: #93c5fd;
  box-shadow: 0 0 0 4px rgba(147, 197, 253, .16);
}

.sync-note {
  color: #477086;
  font-size: .86rem;
  margin-top: .25rem;
}

@keyframes sync-pulse {
  50% { opacity: .35; transform: scale(.82); }
}

@media (max-width: 700px) {
  .sync-status { order: -1; width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sync-status[data-state="syncing"] i { animation: none; }
}