.offline-status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  margin:0;
  padding:9px 13px;
  border:1px solid var(--badge-warning-text);
  border-radius:999px;
  background:var(--badge-warning-bg);
  color:var(--badge-warning-text);
  font-size:.84rem;
  font-weight:850;
  box-shadow:var(--shadow);
}

.offline-status-slot{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-left:50px;
}

.top{
  position:relative;
}

.top #offlineConceptStatus{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}

[hidden].offline-status-badge{
  display:none;
}

.offline-only-message{
  display:none;
  margin-top:7px;
  color:var(--badge-warning-text);
  font-size:.82rem;
  font-weight:800;
}

body.is-offline [data-offline-disabled="true"]{
  opacity:.48;
  filter:grayscale(45%);
  cursor:not-allowed;
}

body.is-offline [data-offline-disabled="true"] .offline-only-message{
  display:block;
}

body.is-offline [data-offline-disabled="true"] .dash-item-action,
body.is-offline [data-offline-disabled="true"] .dash-link,
body.is-offline [data-offline-disabled="true"] .dash-chip{
  color:var(--muted);
}

.offline-sync-toast{
  position:fixed;
  left:50%;
  bottom:18px;
  z-index:10001;
  max-width:min(460px, calc(100vw - 32px));
  transform:translateX(-50%);
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  color:var(--text);
  box-shadow:var(--shadow);
  font-size:.9rem;
  font-weight:750;
}

@media (max-width: 600px){
  .offline-status-slot{
    width:100%;
    justify-content:center;
    margin-left:0;
  }

  .offline-status-badge{
    max-width:calc(100vw - 42px);
    white-space:normal;
    text-align:center;
  }

  .top #offlineConceptStatus{
    position:static;
    transform:none;
    margin:0 auto 10px;
  }
}