.sync-button {
  margin-left: auto;
  padding: 8px 11px;
  border: 1px solid #b9dcc7;
  border-radius: 999px;
  background: #f5fff8;
  color: #176e56;
  font-size: .76rem;
  font-weight: 800;
}

.sync-button[data-state="ready"] { background: #dff4e7; border-color: #78bd98; }
.sync-button[data-state="working"] { opacity: .72; }
.sync-dialog { width: min(460px, calc(100% - 30px)); border: 0; border-radius: 22px; padding: 0; color: var(--ink); box-shadow: 0 24px 70px rgba(22,62,45,.28); }
.sync-dialog::backdrop { background: rgba(15,47,34,.42); backdrop-filter: blur(4px); }
.sync-form { display: grid; gap: 11px; padding: 4px 25px 16px; }
.sync-form label { display: grid; gap: 5px; color: var(--muted); font-size: .74rem; font-weight: 800; }
.sync-actions, .sync-footer { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.sync-actions button, .sync-footer button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--accent); color: #fff; font-weight: 800; }
.sync-actions .secondary, .sync-footer .secondary { border: 1px solid #b9dcc7; background: #f6fff8; color: var(--accent-dark); }
.sync-footer { padding: 0 25px 22px; }
.text-button { background: transparent !important; color: var(--muted) !important; text-decoration: underline; }
#syncStatus { width: 100%; min-height: 1.25em; margin: 2px 0 0; color: var(--muted); font-size: .78rem; }

@media (max-width: 580px) {
  .topbar { flex-wrap: wrap; }
  .today-stat { margin-left: 0; }
  .sync-button { margin-left: 0; }
  .card-side.back { overflow-y: auto; }
  .sync-form, .sync-footer { padding-left: 19px; padding-right: 19px; }
}