:root {
  --bg: #0f172a;
  --card: #1e293b;
  --card-border: #334155;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --up: #22c55e;
  --degraded: #f59e0b;
  --down: #ef4444;
  --unknown: #64748b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 20px 64px;
}

.head { text-align: center; margin-bottom: 32px; }
.brand { font-size: 20px; font-weight: 600; letter-spacing: .2px; margin-bottom: 20px; }

.banner {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 600;
  border: 1px solid var(--card-border);
  background: var(--card);
}
.banner.operational { color: var(--up);       border-color: rgba(34,197,94,.4); }
.banner.degraded    { color: var(--degraded); border-color: rgba(245,158,11,.4); }
.banner.outage      { color: var(--down);     border-color: rgba(239,68,68,.4); }
.banner.unknown     { color: var(--unknown); }

.components { display: flex; flex-direction: column; gap: 10px; }

.component {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
}

.dot { width: 11px; height: 11px; border-radius: 50%; background: var(--unknown); flex: 0 0 auto; }
.component.operational .dot { background: var(--up); }
.component.degraded    .dot { background: var(--degraded); }
.component.outage      .dot { background: var(--down); }

.info { display: flex; flex-direction: column; }
.name { font-weight: 600; }
.desc { color: var(--muted); font-size: 13px; }

.meta { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 2px; }
.uptime { color: var(--muted); font-size: 12px; }
.state { font-size: 12px; text-transform: capitalize; color: var(--muted); }
.component.operational .state { color: var(--up); }
.component.degraded    .state { color: var(--degraded); }
.component.outage      .state { color: var(--down); }

.foot { margin-top: 40px; text-align: center; color: var(--muted); font-size: 12px; }
.foot p { margin: 4px 0; }