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

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top right, #173a2c 0, #08100d 42%); }
.shell { width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 56px 0 32px; }
header { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; }
.eyebrow { color: #74e8aa; letter-spacing: .18em; font-size: .78rem; font-weight: 700; margin: 0 0 8px; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1; margin: 0; }
h2 { font-size: 1rem; letter-spacing: .04em; color: #9fb7aa; margin: 0 0 16px; }
h3 { font-size: 1rem; margin: 0; }
.summary { color: #b6c9bf; margin: 12px 0 0; }
button { border: 1px solid #426353; color: #e9f6ef; background: #122019; padding: 10px 16px; border-radius: 10px; cursor: pointer; }
button:hover { border-color: #74e8aa; }
button:disabled { opacity: .55; cursor: wait; }
.release-panel, .artifacts { background: rgba(16, 31, 24, .82); border: 1px solid #243d31; border-radius: 16px; padding: 22px; margin-bottom: 28px; }
dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; }
dt { color: #769084; font-size: .78rem; margin-bottom: 4px; }
dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
.service { display: grid; grid-template-columns: 12px 1fr; column-gap: 10px; align-items: center; min-height: 112px; padding: 18px; background: rgba(16, 31, 24, .82); border: 1px solid #243d31; border-radius: 14px; }
.service p { grid-column: 2; margin: 8px 0 0; color: #8da397; font-size: .88rem; overflow-wrap: anywhere; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #66736c; box-shadow: 0 0 0 4px rgba(102,115,108,.12); }
.healthy .dot { background: #4be696; box-shadow: 0 0 0 4px rgba(75,230,150,.12); }
.unhealthy .dot { background: #ff6b71; box-shadow: 0 0 0 4px rgba(255,107,113,.12); }
.unknown .dot { background: #e9ba62; box-shadow: 0 0 0 4px rgba(233,186,98,.12); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }
th, td { text-align: left; border-bottom: 1px solid #243d31; padding: 10px 8px; overflow-wrap: anywhere; }
th { color: #769084; }
footer { color: #60786c; font-size: .8rem; text-align: center; padding-top: 8px; }

@media (max-width: 800px) {
  header { align-items: start; flex-direction: column; }
  dl, .service-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .shell { padding-top: 32px; }
  dl, .service-grid { grid-template-columns: 1fr; }
}