.sync-status-dot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #d7b46a;
  box-shadow: inset 0 0 0 13px color-mix(in srgb, var(--card, #fff) 78%, transparent);
}
.sync-status-dot[data-tone="ok"] { background: #72ad7d; }
.sync-status-dot[data-tone="offline"] { background: #a7a7a7; }
.sync-status-dot[data-tone="pending"] { animation: sync-pulse 1.2s ease-in-out infinite; }
@keyframes sync-pulse { 50% { opacity: .45; transform: scale(.92); } }
#loginForm button:disabled { opacity: .65; cursor: wait; }