/* red when offline */

body {
  font-family: system-ui, sans-serif;
  background: #f5f7fa;
  color: #222;
  margin: 3rem;
}

h1 {
  color: #0a4b8f;
}

p {
  max-width: 600px;
}

/* --- Connection status banner --- */
.status-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #4caf50; /* default = online */
  color: #fff;
  text-align: center;
  padding: 8px 0;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  z-index: 9999;
  transition: background 0.3s ease;
}

.status-banner.offline {
  background: #f44336; /* red when offline */
}