.it-offline-indicator{
  position:fixed;
  right:16px;
  bottom:18px;
  z-index:12000;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:8px 12px;
  border:1px solid rgba(15,23,42,.14);
  border-radius:999px;
  background:#fff;
  color:#0f172a;
  box-shadow:0 10px 28px rgba(15,23,42,.18);
  font:700 12px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  cursor:pointer;
}
.it-offline-indicator b{
  display:inline-grid;
  place-items:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:rgba(15,23,42,.08);
  font-size:11px;
}
.it-offline-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#16a34a;
  box-shadow:0 0 0 4px rgba(22,163,74,.12);
}
.it-offline-indicator.is-offline .it-offline-dot{background:#d97706;box-shadow:0 0 0 4px rgba(217,119,6,.14)}
.it-offline-indicator.is-pending .it-offline-dot{background:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.it-offline-indicator.is-syncing .it-offline-dot{background:#7c3aed;box-shadow:0 0 0 4px rgba(124,58,237,.14);animation:itOfflinePulse 1s infinite}
.it-offline-indicator.is-error .it-offline-dot{background:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.14)}
@keyframes itOfflinePulse{50%{opacity:.35;transform:scale(.8)}}
.it-sync-center{padding:4px 18px 18px}
.it-sync-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0 14px}
.it-sync-summary>div{padding:12px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc}
.it-sync-summary span{display:block;color:#64748b;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.it-sync-summary strong{display:block;margin-top:5px;color:#0f172a;font-size:17px}
.it-sync-device{margin:0 0 10px;color:#64748b;font-size:12px}
.it-sync-list{display:grid;gap:8px;max-height:330px;overflow:auto;padding-right:3px}
.it-sync-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}
.it-sync-row strong{display:block;color:#0f172a;font-size:13px}
.it-sync-row small{display:block;margin-top:3px;color:#64748b;font-size:11px}
.it-sync-state{padding:5px 8px;border-radius:999px;background:#eef2ff;color:#3730a3;font-size:10px;font-weight:800;text-transform:uppercase}
.it-sync-state.is-failed{background:#fef2f2;color:#991b1b}
.it-sync-state.is-syncing{background:#f5f3ff;color:#6d28d9}
.it-sync-empty{padding:22px;border:1px dashed #cbd5e1;border-radius:12px;text-align:center;color:#64748b}
.it-sync-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
@media(max-width:720px){
  .it-offline-indicator{right:10px;bottom:78px;max-width:calc(100vw - 20px)}
  .it-sync-summary{grid-template-columns:1fr}
  .it-sync-actions{position:sticky;bottom:0;padding-top:12px;background:#fff}
}