:root{
  --bg: #0b0f14;
  --card: #10161b;
  --muted: #89929b;
  --text: #e6edf3;
  --accent: #2dd4bf;
  --accent-600:#0ea5a3;
  --rose:#f87171;
  --border:#1f2933;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.container{max-width:1100px; margin:0 auto; padding:0 20px}
.site-header{
  border-bottom:1px solid var(--border);
  position:sticky; top:0; backdrop-filter:saturate(1.3) blur(6px); background:rgba(11,15,20,.7);
}
.site-header .container{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
.logo{width:24px; height:24px; color:var(--accent)}
.brand-name{font-size:18px}
.nav a{margin-left:10px}

.hero{padding:48px 0 24px}
.hero h1{font-size:32px; margin:0 0 8px}
.hero .sub{color:var(--muted); margin:0}

.status{display:flex; align-items:center; gap:8px; margin-top:16px}
.dot{display:inline-block; width:10px; height:10px; border-radius:999px; background:#9aa4b2}
.dot.ok{background:#34d399}
.dot.bad{background:var(--rose)}
.status-text{font-size:14px; color:var(--muted)}

.grid{
  display:grid; gap:16px; padding:16px 0 48px;
  grid-template-columns:repeat(12,1fr);
}
.card{
  grid-column:span 12;
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px;
}
.card h2{margin:0 0 8px; font-size:18px}
.card p{margin:0 0 10px; color:var(--muted)}

@media (min-width:800px){
  .card{grid-column:span 4}
}

pre{
  margin:10px 0; padding:12px; border-radius:10px; overflow:auto;
  background:#0a0f14; border:1px solid var(--border);
}
code{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size:12.5px; color:#cbd5e1}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 14px; border-radius:10px; border:1px solid var(--border);
  background:#121820; color:var(--text); cursor:pointer; text-decoration:none; font-weight:600
}
.btn:hover{filter:brightness(1.1)}
.btn--ghost{background:transparent}
.btn--primary{background:var(--accent); color:#052625; border-color:transparent}
.btn--primary:hover{background:var(--accent-600)}

.site-footer{
  border-top:1px solid var(--border); padding:16px 0; color:var(--muted); font-size:14px
}
.site-footer .container{display:flex; gap:10px; align-items:center; justify-content:center}
.sep{opacity:.4}