/* ── Cloud sync controls in the header ─────────────────────────── */

.sync-stamp {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  margin-inline-end: 2px;
}

.cloud-btn { position: relative; }
.cloud-label { display: none; }

.cloud-spin {
  display: none;
  width: 18px;
  height: 18px;
  flex: none;
  place-items: center;
}
.cloud-spin .ic { width: 18px; height: 18px; }
.cloud-btn.spinning > .ic { display: none; }
.cloud-btn.spinning .cloud-spin {
  display: grid;
  animation: syncSpin .7s linear infinite;
}
.cloud-btn.spinning { color: var(--gold); }
.cloud-btn .ic { transition: color .18s; }
.cloud-btn.has-pending { color: var(--gold); }
.cloud-btn.spinning .ic { animation: syncSpin .8s linear infinite; }
.cloud-btn:disabled { opacity: .7; cursor: default; }

@keyframes syncSpin { to { transform: rotate(360deg); } }

.sync-badge {
  position: absolute;
  top: 1px;
  inset-inline-end: 1px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 99px;
  border: 2px solid var(--surface);
  background: var(--gold-2);
  color: #1F2A20;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  display: grid;
  place-items: center;
  box-sizing: content-box;
}

@media (min-width: 1180px) {
  .cloud-with-label {
    width: auto;
    height: 38px;
    padding: 0 12px;
    gap: 7px;
    display: inline-flex;
    align-items: center;
  }
  .cloud-with-label .cloud-label {
    display: inline;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .01em;
  }
  .cloud-with-label .sync-badge {
    top: -4px;
    inset-inline-end: -4px;
  }
}

@media (max-width: 1000px) {
  .sync-stamp { display: none; }
}