/* ── Status hero banner ──────────────────────────────────────── */
.status-banner {
  padding: 64px 0 48px;
  text-align: center;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(74,222,128,0.10);
  border: 1px solid rgba(74,222,128,0.3);
  color: var(--green);
  padding: 9px 18px;
  border-radius: 24px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  margin-bottom: 22px;
}
.status-pill.degraded {
  background: rgba(251,191,36,0.10);
  border-color: rgba(251,191,36,0.3);
  color: #FBBF24;
}
.status-pill.down {
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.3);
  color: #EF4444;
}
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: pulse 2s infinite; }
.status-banner h1 { margin-bottom: 10px; }
.status-banner .updated { color: var(--muted-2); font-family: var(--font-mono); font-size: 0.82rem; margin-top: 16px; }

/* ── Metric strip ────────────────────────────────────────────── */
.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 56px;
}
.metric {
  background: var(--surface);
  padding: 26px 24px;
}
.metric .l {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.metric .v {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
}
.metric .v.small { font-size: 1.15rem; }
.metric .bar-track {
  height: 5px;
  background: var(--surface-2);
  border-radius: 3px;
  margin-top: 12px;
  overflow: hidden;
}
.metric .bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  border-radius: 3px;
  transition: width .6s ease;
}

/* ── Service rows ────────────────────────────────────────────── */
.service-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 56px;
}
.service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 26px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.service-row:last-child { border-bottom: none; }
.service-name { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.service-name .ic { font-size: 1.2rem; }
.service-meta { display: flex; align-items: center; gap: 20px; }
.service-ping { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); }
.service-state {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
}
.service-state.up { color: var(--green); }
.service-state.down { color: #EF4444; }
.service-state .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ── Uptime history bars ─────────────────────────────────────── */
.uptime-block { margin-bottom: 56px; }
.uptime-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 16px;
}
.uptime-head h3 { font-size: 0.95rem; }
.uptime-head .pct { font-family: var(--font-mono); color: var(--green); font-weight: 600; }
.uptime-bars {
  display: flex;
  gap: 3px;
  height: 44px;
}
.uptime-bars .bar {
  flex: 1;
  border-radius: 2px;
  background: var(--surface-2);
  position: relative;
  cursor: pointer;
}
.uptime-bars .bar.up { background: var(--green); opacity: 0.85; }
.uptime-bars .bar.partial { background: #FBBF24; opacity: 0.85; }
.uptime-bars .bar.down { background: #EF4444; opacity: 0.85; }
.uptime-bars .bar:hover { opacity: 1; transform: scaleY(1.08); }
.uptime-foot { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted-2); }

/* ── Incidents ───────────────────────────────────────────────── */
.incident-list { display: flex; flex-direction: column; gap: 14px; }
.incident-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
}
.incident-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.incident-title { font-weight: 600; font-size: 0.94rem; }
.incident-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 3px 9px;
  border-radius: 5px;
  text-transform: uppercase;
}
.incident-badge.resolved { background: rgba(74,222,128,0.12); color: var(--green); }
.incident-badge.open { background: rgba(239,68,68,0.12); color: #EF4444; }
.incident-desc { color: var(--muted); font-size: 0.86rem; }
.incident-time { font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted-2); margin-top: 8px; }
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: 0.88rem;
}

@media (max-width: 860px) {
  .metric-strip { grid-template-columns: 1fr 1fr; }
  .service-meta { gap: 12px; }
}
@media (max-width: 560px) {
  .metric-strip { grid-template-columns: 1fr; }
  .uptime-bars { height: 36px; }
  .service-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}