.sync-indicator{display:inline-flex;align-items:center;gap:7px;max-width:250px;padding:7px 10px;border:1px solid #dce6f2;border-radius:18px;background:#f7faff;color:#49617d;font:inherit;font-size:11px;line-height:1.3;cursor:pointer;white-space:nowrap}
.sync-indicator[hidden]{display:none}
.sync-indicator [data-sync-spinner]{width:12px;height:12px;flex:none;border:2px solid #dce6f2;border-top-color:#244d86;border-radius:50%;animation:sync-turn 1s linear infinite}
.sync-indicator[data-state=saved] [data-sync-spinner]{animation:none;border-color:#7e95b0;background:#e3ebf6}
.sync-indicator[data-state=error]{background:#fff8ee;border-color:#ebcc98;color:#87550d}
.sync-indicator[data-state=error] [data-sync-spinner]{animation:none;border-color:#bd8024}
.sync-details{width:min(540px,calc(100vw - 32px));max-height:80dvh;border:1px solid #dce6f2;border-radius:18px;padding:24px;color:#1e3655}
.sync-details::backdrop{background:#16365b40}
.sync-details h2{margin:0 0 10px;font-size:21px}
.sync-details>p{color:#65778e;font-size:13px;line-height:1.6}
.sync-details ul{list-style:none;padding:0;margin:18px 0}
.sync-details li{padding:14px 0;border-top:1px solid #e3ebf6}
.sync-details li p{font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.sync-details li button{margin:4px 8px 0 0}
@keyframes sync-turn{to{transform:rotate(360deg)}}
@media(max-width:1000px){.topbar-right .topbar-date{display:none}.sync-indicator{max-width:190px;font-size:10px}}
@media(max-width:600px){.sync-indicator{max-width:130px;white-space:normal;padding:5px 8px}}
@media(prefers-reduced-motion:reduce){.sync-indicator [data-sync-spinner]{animation:none}}

.sync-details .sync-job-items{margin:8px 0;padding-left:12px;border-left:2px solid #dce6f2}.sync-details .sync-job-items li{border:0;padding:6px 0;overflow-wrap:anywhere;font-size:12px}.sync-job-items small{display:block;color:#65778e;margin-top:3px;font-size:10px}.sync-job-items [data-failed=true]>span{font-weight:600}.sync-job-context{color:#65778e}