.sync-button{min-height:38px;padding:0 12px;border:0;border-radius:8px;color:#4e5470;background:#eef1f8;font-weight:850;cursor:pointer;white-space:nowrap}
.sync-button.connected{color:#12664c;background:#dff8ed}
.sync-dialog{width:min(92vw,460px);padding:0;border:0;border-radius:18px;color:#27304a;box-shadow:0 24px 70px rgba(20,24,55,.25)}
.sync-dialog::backdrop{background:rgba(25,29,55,.42);backdrop-filter:blur(3px)}
.sync-panel{padding:22px;font-family:Arial,"Microsoft YaHei",system-ui,sans-serif}
.sync-panel h2{margin:0 0 7px;font-size:22px}.sync-panel p{margin:0 0 16px;color:#68708a;font-size:14px;line-height:1.65}
.sync-code-box{display:none;margin:12px 0;padding:14px;border-radius:12px;text-align:center;color:#342d89;background:#eeebff;font-size:20px;font-weight:900;letter-spacing:.08em;user-select:all}
.sync-code-box.show{display:block}.sync-join{display:flex;gap:8px;margin:10px 0}
.sync-join input{flex:1;min-width:0;height:42px;padding:0 12px;border:1px solid #d8daec;border-radius:10px;text-transform:uppercase}
.sync-actions{display:flex;flex-wrap:wrap;gap:8px}
.sync-actions button,.sync-join button{min-height:40px;padding:0 14px;border:0;border-radius:10px;color:#fff;background:#6758d7;font-weight:800;cursor:pointer}
.sync-actions .secondary{color:#4e5470;background:#eef1f8}.sync-actions .danger{color:#8b3440;background:#ffe8ea}
.sync-status{min-height:22px;margin-top:12px;color:#198563;font-size:13px;font-weight:750}
@media(max-width:520px){.toolbar{grid-template-columns:1fr auto!important}.sync-button{grid-column:1/-1}.sync-panel{padding:18px}.sync-join{flex-direction:column}}