:root {
  --color-bg: #0b1220;
  --color-card: #111c2e;
  --color-border: #1f2d45;
  --color-text: #e8eef8;
  --color-muted: #94a3b8;
  --color-healthy: #22c55e;
  --color-unhealthy: #ef4444;
  --color-unknown: #f59e0b;
  --color-accent: #38bdf8;
  --container: 900px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

.hero {
  padding: 3rem 0;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.hero h1 {
  margin: 0 0 0.5rem;
  font-size: 2rem;
}

.tagline {
  margin: 0;
  color: var(--color-muted);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  background: var(--color-card);
  border: 1px solid var(--color-border);
}

.status-badge.healthy { color: var(--color-healthy); border-color: var(--color-healthy); }
.status-badge.unhealthy { color: var(--color-unhealthy); border-color: var(--color-unhealthy); }
.status-badge.unknown { color: var(--color-unknown); border-color: var(--color-unknown); }

.section { padding: 2.5rem 0; }
.section.alternate { background: #0e1624; }

.section h2 {
  margin: 0 0 1.5rem;
  font-size: 1.25rem;
}

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.service-card {
  padding: 1.25rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  border-left: 4px solid var(--color-unknown);
}

.service-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.service-card p { margin: 0; color: var(--color-muted); }

.service-card.healthy { border-left-color: var(--color-healthy); }
.service-card.unhealthy { border-left-color: var(--color-unhealthy); }
.service-card.unknown { border-left-color: var(--color-unknown); }

.refresh {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  border-radius: 0.375rem;
  cursor: pointer;
  font: inherit;
}

.button:hover { background: rgba(56, 189, 248, 0.1); }

footer {
  padding: 2rem 0;
  border-top: 1px solid var(--color-border);
  text-align: center;
  color: var(--color-muted);
}

footer a { color: var(--color-accent); text-decoration: none; }