.api-status {
  margin: 1rem 0 1.5rem;
  padding: .8rem 1rem;
  border: 1px solid #cbd5e1;
  border-radius: .75rem;
  background: #f8fafc;
  color: #334155;
}
.api-status p { margin: 0; }
.api-status__heading { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.api-status__heading::before { content: ''; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.api-status__message { margin-top: .35rem !important; font-size: .9rem; }
.api-status[data-state="online"] { border-color: #86b79c; background: #f0fdf4; color: #166534; }
.api-status[data-state="drain"] { border-color: #d6ac69; background: #fffbeb; color: #854d0e; }
.api-status[data-state="maintenance"],
.api-status[data-state="offline"] { border-color: #dba3a3; background: #fff1f2; color: #9f1239; }