.sync-pill{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--muted);font-size:11px;font-weight:650;white-space:nowrap}
.sync-pill .icon{width:14px;height:14px}
.sync-pill.saved{color:var(--green)}
.sync-pill.saving .icon{animation:sync-turn 1.1s linear infinite}
.sync-pill.error,.sync-pill.offline{color:var(--gold)}
@keyframes sync-turn{to{transform:rotate(360deg)}}
.sync-card{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:16px;display:grid;gap:14px}
.sync-line{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px}
.sync-line .row{gap:8px;min-width:0}
.sync-line strong{font-size:13px;font-weight:600}
.sync-code{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}
.sync-code code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;letter-spacing:.4px;padding:7px 9px;border:1px dashed var(--line);border-radius:5px;background:var(--surface);color:var(--ink)}
.sync-card details summary{cursor:pointer;font-size:12px;color:var(--muted)}
.sync-card .text-input{flex:1;min-width:200px;min-height:38px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;letter-spacing:.4px}
@media(max-width:680px){.sync-pill span{display:none}.sync-pill{width:32px;min-height:30px;justify-content:center;padding:0}.sync-card{padding:14px}}