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

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top right, #14315a 0, #07111f 42rem); }
.shell { width: min(1280px, calc(100% - 2rem)); margin: 0 auto; padding: 3rem 0; }
header { margin-bottom: 2rem; }
.eyebrow { margin: 0 0 .4rem; color: #66d9ef; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(2rem, 4vw, 4rem); line-height: 1.05; }
.lede { max-width: 850px; color: #a9b9cf; font-size: 1.08rem; }
.status-grid, .data-grid { display: grid; gap: 1rem; }
.status-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 1rem; }
.status-grid article, .data-grid article, .log-panel { border: 1px solid #29415f; border-radius: 16px; background: rgba(8, 23, 42, .86); box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.status-grid article { padding: 1rem 1.1rem; }
.status-grid span { display:block; color:#8ca1bc; font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; }
.status-grid strong { display:block; margin-top:.35rem; font-size:1.15rem; color:#7ee787; }
.controls { display:flex; flex-wrap:wrap; gap:.75rem; margin:1rem 0; }
button { border:1px solid #3e6ea8; border-radius:10px; padding:.8rem 1rem; background:#12335c; color:#f4f8ff; font-weight:700; cursor:pointer; }
button:hover:not(:disabled) { background:#194779; }
button:disabled { opacity:.4; cursor:not-allowed; }
.data-grid { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.data-grid article, .log-panel { padding:1rem; }
h2 { margin:.2rem 0 .8rem; font-size:1rem; color:#b9d7ff; }
pre { margin:0; max-height:480px; overflow:auto; padding:1rem; border-radius:10px; background:#030913; color:#cfe1f7; font-size:.82rem; }
.log-panel { margin-top:1rem; }
#eventLog { max-height:260px; overflow:auto; margin:.2rem 0; padding-left:1.5rem; color:#c5d2e3; }
#eventLog li { margin:.35rem 0; }
footer { margin-top:1.3rem; color:#71849d; font-size:.82rem; }
@media (max-width: 560px) { .data-grid { grid-template-columns:1fr; } }