/* SYNRGII marketplace-app status pages. OKLCH only — no pure black/white (design-library rule). */
:root {
  --bg: oklch(0.17 0.006 250);
  --surface: oklch(0.22 0.008 250);
  --text: oklch(0.95 0.005 250);
  --muted: oklch(0.72 0.01 250);
  --border: oklch(0.32 0.01 250);
  --ok: oklch(0.75 0.14 155);
  --warn: oklch(0.8 0.13 85);
  --bad: oklch(0.68 0.19 25);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Satoshi', system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; display: flex; align-items: center; }
.wrap { width: min(40rem, 92vw); margin-inline: auto; padding: 2rem 0; }
h1 {
  font-family: 'Cabinet Grotesk', 'Satoshi', system-ui, sans-serif;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}
.status {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 2.5rem 2rem;
  text-align: center;
}
.status-glyph {
  width: 3rem; height: 3rem;
  margin: 0 auto 0.75rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--border);
  font-size: 1.4rem;
  font-weight: 700;
}
.status-glyph.is-ok { border-color: var(--ok); color: var(--ok); }
.status-glyph.is-warn { border-color: var(--warn); color: var(--warn); }
.status-glyph.is-bad { border-color: var(--bad); color: var(--bad); }
.status-word {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}
.status-word.is-ok { color: var(--ok); }
.status-word.is-warn { color: var(--warn); }
.status-word.is-bad { color: var(--bad); }
.status-line { color: var(--muted); line-height: 1.55; margin-bottom: 0.4rem; }
.updated { margin-top: 1.25rem; }
.updated code {
  font-family: ui-monospace, 'Cascadia Mono', monospace;
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.3rem 0.6rem;
}
footer.site { border-top: 1px solid var(--border); }
footer.site .wrap { padding: 1.25rem 0; font-size: 0.85rem; color: var(--muted); }