:root {
  --bg: #07110f;
  --panel: #0d1a17;
  --panel-2: #10231e;
  --line: #1d3931;
  --text: #ecf8f3;
  --muted: #91aba1;
  --green: #36d399;
  --amber: #f6c453;
  --red: #ff6b70;
  --cyan: #66d9ef;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 75% -10%, rgba(54, 211, 153, .16), transparent 34rem),
    linear-gradient(180deg, #081411 0%, var(--bg) 72%);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.shell { width: min(1040px, calc(100% - 32px)); margin: 0 auto; padding: 70px 0 44px; }
header { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 38px; }
h1, h2, p { margin: 0; }
h1 { margin-top: 5px; font-size: clamp(34px, 6vw, 56px); letter-spacing: -.04em; line-height: 1.05; }
h2 { font-size: 19px; letter-spacing: -.01em; }
.eyebrow { color: var(--green); font: 700 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; }
.subtitle { margin-top: 13px; color: var(--muted); }
.overall { min-width: 170px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 17px; border: 1px solid var(--line); border-radius: 999px; background: rgba(13, 26, 23, .82); }
.overall span { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 5px rgba(145,171,161,.09); }
.overall.operational span { background: var(--green); box-shadow: 0 0 0 5px rgba(54,211,153,.11); }
.overall.degraded span { background: var(--amber); box-shadow: 0 0 0 5px rgba(246,196,83,.11); }
.overall.outage span { background: var(--red); box-shadow: 0 0 0 5px rgba(255,107,112,.11); }

.live { margin-bottom: 18px; padding: 16px 18px; border: 1px solid rgba(102,217,239,.34); border-radius: 14px; background: rgba(102,217,239,.06); }
.live.hidden { display: none; }
.live-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.live-head span:last-child { margin-left: auto; color: var(--muted); font-family: ui-monospace, monospace; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(102,217,239,.6); animation: pulse 1.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(102,217,239,0); } 100% { box-shadow: 0 0 0 0 rgba(102,217,239,0); } }
.progress { height: 5px; overflow: hidden; border-radius: 10px; background: #172b26; }
.progress div { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--cyan)); transition: width .5s ease; }

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.metrics article, .panel { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(16,35,30,.92), rgba(10,24,20,.96)); box-shadow: 0 18px 60px rgba(0,0,0,.14); }
.metrics article { min-height: 125px; padding: 20px; border-radius: 14px; display: flex; flex-direction: column; justify-content: space-between; }
.metrics span { color: var(--muted); font-size: 13px; }
.metrics strong { font: 650 29px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.05em; }

.panel { margin-top: 18px; padding: 24px; border-radius: 16px; }
.panel-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.panel-title .eyebrow { margin-bottom: 5px; }
.panel-title > p { color: var(--muted); font-size: 13px; }
.timeline { display: flex; align-items: stretch; gap: 3px; height: 52px; }
.tick { flex: 1 1 4px; min-width: 3px; border-radius: 3px; background: #213a33; opacity: .9; }
.tick.operational { background: var(--green); }
.tick.degraded { background: var(--amber); }
.tick.outage { background: var(--red); }
.empty-timeline { color: var(--muted); align-self: center; }
.legend { display: flex; gap: 20px; margin-top: 13px; color: var(--muted); font-size: 12px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 7px; height: 7px; border-radius: 2px; background: var(--muted); }
.legend .ok { background: var(--green); }.legend .warn { background: var(--amber); }.legend .bad { background: var(--red); }

.details { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.details div { padding: 15px 17px; background: rgba(4,14,12,.32); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.details div:nth-child(3n) { border-right: 0; }
.details dt { color: var(--muted); font-size: 12px; }
.details dd { margin: 4px 0 0; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
footer { display: flex; justify-content: space-between; gap: 24px; margin-top: 25px; color: #668078; font-size: 12px; }

@media (max-width: 760px) {
  .shell { padding-top: 38px; }
  header { align-items: flex-start; flex-direction: column; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .details { grid-template-columns: repeat(2, 1fr); }
  .details div:nth-child(3n) { border-right: 1px solid var(--line); }
  .details div:nth-child(2n) { border-right: 0; }
  footer, .panel-title { align-items: flex-start; flex-direction: column; }
}