/* ---------- sync: header button ---------- */
.syncbtn{position:relative}
.syncdot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;
  background:var(--faint);box-shadow:0 0 0 2px var(--card);transition:.15s}
.syncdot[data-status="synced"],.syncdot[data-status="idle"]{background:var(--accent)}
.syncdot[data-status="syncing"]{background:var(--amber);animation:syncpulse 1s ease-in-out infinite}
.syncdot[data-status="offline"],.syncdot[data-status="error"]{background:var(--clay)}
.syncdot[data-status="off"]{background:var(--faint)}
@keyframes syncpulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- sync: panel (reuses .sheet/.sheetcard from style.css) ---------- */
.sync-card{width:min(380px,100%)}
.sync-p{margin:0 0 16px;font-size:13.5px;color:var(--muted);line-height:1.55}
.sync-p b{color:var(--ink-2)}
.sync-note{margin:14px 0 0;font-size:11.5px;color:var(--faint);text-align:center}
.sync-warn{margin:0 0 16px;font-size:12.5px;color:var(--clay);background:var(--clay-soft);
  border-radius:10px;padding:9px 12px;line-height:1.5}
.sync-actions{display:flex;flex-direction:column;gap:9px}
.sync-card .w{width:100%;justify-content:center;display:flex}
.sync-card .ghost{border:1.5px solid var(--line-2);background:var(--card);box-shadow:var(--lift)}

.sync-input{width:100%;padding:11px 16px;font:inherit;font-size:16px;letter-spacing:.06em;
  text-align:center;text-transform:uppercase;color:var(--ink);background:var(--card-2);
  border:1.5px solid var(--line-2);border-radius:12px;outline:none;transition:.15s;margin-bottom:10px}
.sync-input::placeholder{color:var(--faint);letter-spacing:.06em}
.sync-input:focus{border-color:var(--accent);background:var(--card)}
.sync-err{font-size:12.5px;color:var(--clay);margin:-2px 0 12px}
.sync-err[hidden]{display:none}

.sync-code-display{font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:.06em;
  text-align:center;padding:14px;margin-bottom:14px;color:var(--accent);background:var(--accent-soft);
  border-radius:12px;user-select:all}
.qr-wrap{display:flex;justify-content:center;margin-bottom:14px}
.qr-wrap svg{width:172px;height:172px;background:#fff;border-radius:12px;padding:10px;
  box-shadow:0 0 0 1.5px var(--line-2)}
.qr-wrap[hidden]{display:none}

.sync-status-row{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;
  color:var(--ink-2);margin-bottom:14px}
.sync-status-row .syncdot{position:static;box-shadow:none;width:9px;height:9px}
.sync-code-row{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:16px;
  background:var(--card-2);border:1.5px solid var(--line-2);border-radius:12px}
.sync-code-mono{flex:1;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--ink-2)}
.sync-code-row .linkbtn{white-space:nowrap}

.sync-danger-zone{margin-top:16px;padding-top:14px;border-top:1.5px solid var(--line);
  display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.sync-danger{color:var(--faint);font-size:12px}
.sync-danger:hover{color:var(--clay);background:var(--clay-soft)}

/* ---------- sync: first-visit nudge ---------- */
.sync-banner{position:fixed;right:18px;bottom:18px;z-index:55;display:flex;align-items:center;gap:10px;
  max-width:min(360px,calc(100vw - 36px));padding:12px 12px 12px 16px;background:var(--card);
  border:1.5px solid var(--line-2);border-radius:14px;box-shadow:0 10px 30px rgba(35,32,28,.22);
  font-size:13px;color:var(--ink-2);transform:translateY(12px) scale(.97);opacity:0;
  transition:transform .2s cubic-bezier(.2,.8,.3,1),opacity .2s}
.sync-banner.show{transform:translateY(0) scale(1);opacity:1}
.sync-banner .linkbtn{color:var(--accent);font-weight:700;padding:0}
.sync-banner .icon.xs{flex:none}

/* ---------- sync: toast ---------- */
.sync-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,10px);z-index:70;
  max-width:min(420px,calc(100vw - 32px));padding:11px 18px;background:var(--ink);color:var(--paper);
  font-size:13px;font-weight:600;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.3);
  opacity:0;transition:transform .2s cubic-bezier(.2,.8,.3,1),opacity .2s}
.sync-toast.show{transform:translate(-50%,0);opacity:1}

@media (max-width:760px){
  .sync-banner{left:14px;right:14px;bottom:max(14px,env(safe-area-inset-bottom));max-width:none}
}