.server-sync-status{
  position:fixed;right:14px;bottom:14px;z-index:9999;display:flex;align-items:center;gap:7px;
  max-width:min(340px,calc(100vw - 28px));padding:8px 11px;border:1px solid #d7e0e8;border-radius:999px;
  background:rgba(255,255,255,.94);box-shadow:0 10px 30px rgba(7,29,52,.14);backdrop-filter:blur(12px);
  color:#475467;font:700 10px/1.2 Inter,"Segoe UI",Arial,sans-serif;transition:.2s ease;
}
.server-sync-status::before{content:"";width:8px;height:8px;border-radius:50%;background:#d99521;box-shadow:0 0 0 3px rgba(217,149,33,.13)}
.server-sync-status.is-online::before{background:#16835d;box-shadow:0 0 0 3px rgba(22,131,93,.13)}
.server-sync-status.is-offline::before,.server-sync-status.is-error::before{background:#c24138;box-shadow:0 0 0 3px rgba(194,65,56,.13)}
.server-sync-status.is-syncing::before{background:#126fa6;box-shadow:0 0 0 3px rgba(18,111,166,.13);animation:serverPulse 1s ease infinite}
.server-sync-status.is-conflict{border-color:#f0c36d;color:#7a4d00;background:#fffaeb}
.server-sync-status.is-conflict::before{background:#d99521}
@keyframes serverPulse{50%{opacity:.35}}
@media(max-width:620px){.server-sync-status{right:10px;bottom:10px;max-width:calc(100vw - 20px)}}
@media(prefers-reduced-motion:reduce){.server-sync-status,.server-sync-status::before{animation:none!important;transition:none!important}}