:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0e1525;
  color: #f3f6fc;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }

.shell {
  width: min(100% - 40px, 960px);
  min-height: 100vh;
  margin: auto;
  display: flex;
  flex-direction: column;
}

.brand { padding-top: 32px; font-size: 14px; font-weight: 750; letter-spacing: .12em; }
.brand span { color: #8290ad; padding-inline: 7px; }
.panel { margin: auto 0; padding: 52px; border: 1px solid #2e405e; border-radius: 20px; background: #172238; box-shadow: 0 24px 80px #070c1790; }
.eyebrow { margin: 0 0 12px; color: #aebce0; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(56px, 10vw, 96px); line-height: 1; letter-spacing: -.06em; }
.intro { margin: 20px 0 36px; color: #c4cde1; font-size: 17px; }
.health { display: flex; gap: 16px; align-items: center; padding: 20px; border: 1px solid #334663; border-radius: 12px; background: #101a2d; }
.indicator { width: 11px; height: 11px; flex: none; border-radius: 50%; }
.checking { background: #f5bd66; }
.healthy { background: #56dbaa; }
.offline { background: #fa7474; }
.health strong { font-size: 16px; }
.health p { margin: 5px 0 0; color: #aebce0; font-size: 14px; }
.actions { display: flex; gap: 24px; align-items: center; margin-top: 26px; }
button { padding: 11px 16px; border: 0; border-radius: 8px; background: #7eafff; color: #0a172c; font: inherit; font-weight: 700; cursor: pointer; }
button:hover { background: #a4c6ff; }
button:disabled { opacity: .6; cursor: wait; }
a { color: #c4dcff; text-decoration: none; }
a:hover { text-decoration: underline; }
footer { padding-bottom: 28px; color: #8c9ab7; font-size: 13px; }

@media (max-width: 600px) {
  .panel { padding: 30px 22px; }
  .actions { align-items: flex-start; flex-direction: column; gap: 20px; }
}