:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f1f1f3;
  background: #11131a;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --line: #383a43;
  --muted: #a4a6b0;
  --orange: #28d7ff;
  --green: #54d89c;
  --red: #ff687e;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse at 80% -15%, #102b3a 0, transparent 36%), #11131a;
}

a { color: inherit; }

.shell { width: min(100% - 48px, 1480px); margin: 0 auto; }

.masthead {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.server-identity { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.server-identity span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.server-identity strong { color: #67e5ff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.environment { border: 1px solid #167d9b; padding: 7px 10px; color: #67e5ff; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 16px; margin-top: 18px; }
.intro { min-height: 126px; display: flex; flex-direction: column; justify-content: center; padding: 16px 24px; border: 1px solid #28d7ff; background: linear-gradient(110deg, #122b36, #191b22 74%); box-shadow: 0 0 16px #28d7ff28, inset 0 0 20px #28d7ff0a; }
.intro-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.eyebrow { margin: 0 0 5px; color: var(--orange); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.server-clock { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.server-clock-label { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.server-clock time { color: #67e5ff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-variant-numeric: tabular-nums; }
h1 { margin: 0; font-size: clamp(22px, 3vw, 32px); font-weight: 650; letter-spacing: -.045em; line-height: 1.1; }
.lede { max-width: 600px; margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

.overall { min-height: 126px; display: flex; align-items: center; gap: 18px; padding: 20px 24px; border: 1px solid var(--line); background: #191b22; }
.signal { width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%; background: #b2b4bd; }
.overall[data-state="healthy"] { border-color: #347154; background: #15231e; }
.overall[data-state="healthy"] .signal { background: var(--green); box-shadow: 0 0 12px #54d89c66; }
.overall[data-state="unhealthy"] { border-color: #7b3943; background: #291a1e; }
.overall[data-state="unhealthy"] .signal { background: var(--red); box-shadow: 0 0 12px #ff687e66; }
.overall-copy { min-width: 0; }
.overall-label { margin: 0 0 5px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.overall h2 { display: flex; align-items: center; gap: 11px; margin: 0; font-size: 17px; font-weight: 650; }
.check-meta { margin-left: auto; text-align: right; }
.uptime { margin: 0 0 5px; color: var(--green); text-shadow: 0 0 8px #54d89c66; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.checked { margin: 0; color: var(--muted); font-size: 12px; text-align: right; }
.next-check { margin: 5px 0 0; color: #f1f1f3; font-size: 11px; font-variant-numeric: tabular-nums; }

.checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 16px 0 26px; }
.check-card { min-height: 270px; padding: 23px 24px 20px; border: 1px solid var(--line); background: #191b22; }
.check-card[data-state="healthy"] { border-top: 2px solid var(--green); }
.check-card[data-state="unhealthy"] { border-top: 2px solid var(--red); }
.uptime[data-state="unhealthy"] { color: var(--red); text-shadow: 0 0 8px #ff687e66; }
.pm2-card, .event-card { grid-column: span 2; min-height: 0; padding: 16px 20px 14px; }
.event-card .description { min-height: 0; font-size: 12px; }
.event-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; margin-top: 9px; }
.event-card dl div { display: grid; align-content: start; gap: 4px; padding: 6px 0; }
.event-card dd { text-align: left; }
.event-message { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); color: #e6e6ea; font-size: 12px; line-height: 1.45; }
.pm2-card .description { min-height: 0; font-size: 12px; }
.pm2-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; margin-top: 9px; }
.pm2-card dl div { display: grid; align-content: start; gap: 4px; padding: 6px 0; }
.pm2-card dd { text-align: left; }
.card-top { display: flex; justify-content: space-between; align-items: center; }
.check-index { color: #777a86; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.state-tag { color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
[data-state="healthy"] .state-tag { color: var(--green); }
[data-state="unhealthy"] .state-tag { color: var(--red); }
.check-card h2 { margin: 25px 0 7px; font-size: 21px; font-weight: 620; letter-spacing: -.025em; }
.pm2-card h2, .event-card h2 { margin: 12px 0 4px; }
.description { min-height: 42px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
dl { margin: 20px 0 0; border-top: 1px solid var(--line); }
dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #2d2f37; }
dt { color: #9295a0; font-size: 12px; }
dd { margin: 0; color: #e6e6ea; font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.api-link { color: var(--green); text-decoration-color: #54d89c66; text-underline-offset: 3px; }
.api-link:hover { color: #a7f5d1; text-decoration-color: currentColor; }
.api-link[data-state="unhealthy"] { color: var(--red); text-decoration-color: #ff687e88; }
.api-link[data-state="unhealthy"]:hover { color: #ffb0bb; text-decoration-color: currentColor; }
.pm2-sites { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-content: start; gap: 8px; max-height: 100px; overflow-y: auto; margin-top: 8px; }
.pm2-site { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-width: 0; padding: 9px 11px; border: 1px solid var(--line); background: #15171d; }
.pm2-site-name { overflow: hidden; color: #f1f1f3; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.pm2-site-meta { margin-top: 4px; color: var(--muted); font-size: 11px; }
.pm2-site-status { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.pm2-site[data-state="healthy"] .pm2-site-status { color: var(--green); }
.pm2-site[data-state="unhealthy"] .pm2-site-status { color: var(--red); }
.pm2-empty { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 12px; }

.footer { display: flex; justify-content: space-between; gap: 12px; padding: 22px 0 36px; color: #858893; font-size: 12px; }

@media (max-width: 650px) {
  .shell { width: min(100% - 32px, 1040px); }
  .summary { grid-template-columns: 1fr; }
  .checks { grid-template-columns: 1fr; }
  .intro { padding: 16px; }
  .intro-top { gap: 8px; }
  .server-clock time { max-width: 165px; font-size: 11px; }
  .check-card { min-height: unset; }
  .pm2-card, .event-card { grid-column: span 1; min-height: 200px; }
  .pm2-card dl { grid-template-columns: 1fr; }
  .pm2-sites { max-height: 150px; }
  .check-meta { max-width: 155px; }
  .checked, .uptime, .next-check { line-height: 1.5; }
  .server-identity strong { font-size: 13px; }
  .footer { flex-direction: column; }
}

@media (min-width: 651px) and (max-width: 1100px) {
  .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm2-card, .event-card { grid-column: span 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .signal { animation: pulse 1.1s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .62; transform: scale(.82); } }
}