.sync-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;max-width:1440px;margin:1.2rem auto;padding:1rem 1.25rem;background:#fff;border:1px solid #bcdce9;border-radius:18px;box-shadow:0 10px 28px #173b5a12;color:#17455b}
#sync-status{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;font-size:1rem}
#sync-status small{color:#517087}
.sync-indicator{width:.75rem;height:.75rem;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 4px #f59e0b24}
.sync-online{background:#14b8a6;box-shadow:0 0 0 4px #14b8a624}
.sync-conflict{background:#e85959;box-shadow:0 0 0 4px #e8595924}
.sync-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.sync-actions button,.sync-link{border:1px solid #83c7dc;background:#ecfbff;color:#096684;border-radius:999px;padding:.62rem 1rem;font:inherit;font-weight:700;cursor:pointer}
.sync-actions button:disabled{opacity:.5;cursor:default}
#sync-conflict-actions{width:100%;padding:.8rem 1rem;border-radius:12px;background:#fff1f0;color:#873535}
#sync-conflict-actions p{margin:0 0 .6rem}
#sync-conflict-actions button{border:1px solid #e7a3a3;background:#fff;border-radius:9px;padding:.5rem .8rem;margin-right:.5rem;font:inherit;cursor:pointer}
.sync-auth{max-width:560px;margin:5rem auto!important;padding:2rem!important;background:#fff!important}
.sync-auth h1{font-size:clamp(2rem,5vw,3rem);line-height:1.2;margin:.5rem 0 1rem;color:#173b5a}
.sync-auth p{font-size:1.08rem;line-height:1.75;color:#517087}
.sync-auth form,.sync-dialog-form{display:grid;gap:1rem}
.sync-auth label,.sync-dialog-form label{display:grid;gap:.4rem;font-weight:700;color:#173b5a}
.sync-auth input,.sync-dialog-form input,.sync-dialog-form select,.sync-dialog-form textarea{width:100%;border:1px solid #aac6d5;border-radius:10px;background:#fff;padding:.75rem;font:inherit;color:#173b5a}
.sync-auth .sync-link{margin-top:1rem}
.sync-error{min-height:1.5rem;color:#b42339!important;margin:0!important}
#sync-dialog{border:0;border-radius:18px;padding:2rem;width:min(92vw,540px);box-shadow:0 20px 80px #08223b55}
#sync-dialog::backdrop{background:#092b45a8}
.sync-dialog-form h2{font-size:1.7rem;color:#173b5a;margin:0}
.sync-dialog-form p{margin:0;color:#517087;line-height:1.6}
.sync-dialog-form textarea{min-height:90px;overflow-wrap:anywhere}
.sync-history{max-height:55vh;overflow:auto;margin:0;padding-left:1.3rem;color:#315269;line-height:1.6}
.sync-history li{padding:.4rem 0;border-bottom:1px solid #dcebf1}
@media(max-width:700px){.sync-toolbar{margin:.75rem .8rem;padding:.85rem}.sync-actions{width:100%}.sync-actions button{flex:1 1 auto}.sync-auth{margin:2rem .8rem!important;padding:1.4rem!important}}