.backend-status-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--sand);
  color: var(--ink);
}

.backend-status-banner > div { min-width: 0; }
.backend-status-banner b,
.backend-status-banner small { display: block; }
.backend-status-banner b { font-size: 11px; }
.backend-status-banner small { margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.backend-status-icon { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border-radius: 9px; font-weight: 700; }
.backend-status-refresh { margin-left: auto; flex: 0 0 auto; border: 1px solid currentColor; border-radius: 8px; padding: 6px 9px; background: transparent; color: inherit; font: 600 10px inherit; cursor: pointer; }
.backend-status-refresh:disabled { cursor: wait; opacity: .65; }

.backend-status-banner.is-demo { border-color: #ead7df; background: var(--pink-pale); color: #914e67; }
.backend-status-banner.is-demo .backend-status-icon { background: rgba(255,255,255,.7); }
.backend-status-banner.is-blocked { border-color: #e9d5aa; background: #fff8e9; color: #8a641c; }
.backend-status-banner.is-blocked .backend-status-icon { background: rgba(255,255,255,.78); }
.backend-status-banner.is-ready { border-color: #b7d8c3; background: var(--sage-pale); color: #3f7658; }
.backend-status-banner.is-ready .backend-status-icon { background: rgba(255,255,255,.72); }

body.dark .backend-status-banner.is-blocked { background: #423a2a; color: #f0c36b; }

@media (max-width: 650px) {
  .backend-status-banner { align-items: flex-start; }
  .backend-status-refresh { padding-inline: 7px; }
}