/* Sign-in and sync dialogs (they reuse the page's color tokens) */
.sync-overlay{position:fixed;inset:0;z-index:60;background:rgba(10,20,16,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.sync-box{background:var(--surface);color:var(--ink);width:min(420px,100%);border-radius:16px;padding:22px 20px;display:grid;gap:12px;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.sync-box h2{font:800 22px var(--f-display);margin:0}
.sync-box p{margin:0;line-height:1.45}
.sync-field{display:grid;gap:6px;font-weight:600;font-size:13px}
.sync-field input{font:16px var(--f-body);padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);width:100%}
.sync-field input:focus{outline:2px solid var(--accent);outline-offset:1px}
#sl-code{font-family:var(--f-mono);letter-spacing:.2em;font-size:20px}
.sync-actions{display:flex;flex-wrap:wrap;gap:8px}
.sync-actions .btn{padding:10px 14px;font-size:14px}
.sync-error{color:var(--bad);font-size:13px;min-height:1em}
.sync-error:empty{display:none}
.sync-secondary{justify-self:start;font-size:12px}
#btn-sync.sync-bad{border-color:var(--warn);color:var(--warn)}
#btn-sync.sync-ok{color:var(--good)}
@media (max-width:520px){#btn-sync .sync-label{display:none}#btn-sync{font-size:15px;padding:5px 10px}}