.msk-offline-status{
  position:fixed;
  z-index:2147483000;
  left:50%;
  bottom:calc(18px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  border:1px solid rgba(148,163,184,.35);
  border-radius:999px;
  padding:9px 14px;
  background:rgba(18,24,33,.94);
  color:#d8dee8;
  font:600 13px/1.1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.msk-offline-status:active,
.msk-offline-status.is-syncing{
  transform:translate(-50%,-6px);
  background:rgba(30,42,59,.98);
  box-shadow:0 16px 36px rgba(0,0,0,.46);
}
.msk-offline-status.is-syncing::before{
  content:'';
  display:inline-block;
  vertical-align:-2px;
  margin-right:7px;
  width:11px;
  height:11px;
  border:2px solid rgba(247,200,107,.3);
  border-top-color:#f7c86b;
  border-radius:50%;
  animation:msk-outbox-spin .8s linear infinite;
}
.msk-offline-status:disabled{opacity:1;cursor:progress}
@keyframes msk-outbox-spin{to{rotate:360deg}}
@media(prefers-reduced-motion:reduce){.msk-offline-status{transition:none}.msk-offline-status.is-syncing::before{animation:none}}
.msk-offline-status.has-pending{border-color:rgba(235,99,99,.65);color:#ffb1b1}
.msk-offline-status.is-offline{border-color:rgba(148,163,184,.5);color:#b9c1ce}
.msk-offline-status[hidden]{display:none!important}