:root { color-scheme: light dark; }
body { font-family: system-ui, sans-serif; margin: 0 1rem; }
nav { display: flex; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid #8884; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.card { border: 1px solid #8886; border-radius: 8px; padding: .75rem; }
.card h3 { margin: 0 0 .5rem; display: flex; justify-content: space-between; }
.badge { font-size: .75rem; padding: .1rem .5rem; border-radius: 4px; color: #fff; }
.badge.ok { background: #2e7d32; }
.badge.degraded { background: #f9a825; }
.badge.down { background: #c62828; }
.metric-line { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.spark { color: #4569a0; }
.error { color: #c62828; }
table { border-collapse: collapse; width: 100%; }
td, th { border-bottom: 1px solid #8884; padding: .3rem .5rem; text-align: left; }