:root {
  font-family: system-ui, sans-serif;
  color: #14202b;
  background: #f3f6f8;
}

body { margin: 0; }
main { max-width: 64rem; margin: 0 auto; padding: 2rem; }
.status-banner { padding: 1rem 2rem; color: #fff; background: #a21b1b; font-weight: 700; }
dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
dl div { padding: 1rem; border: 1px solid #cad3da; border-radius: .35rem; background: #fff; }
dt { font-size: .85rem; color: #54636f; }
dd { margin: .35rem 0 0; font-weight: 700; }
dd[data-value='HEALTHY'] { color: #16713b; }
dd[data-value='DEGRADED'], dd[data-value='NOT_CONFIGURED'] { color: #8a5400; }
dd[data-value='UNAVAILABLE'] { color: #a21b1b; }

@media (prefers-color-scheme: dark) {
  :root { color: #e8eef2; background: #101820; }
  dl div { background: #18242d; border-color: #344552; }
  dt { color: #a8bac7; }
}