:root{
  --bg:#09111f;
  --panel:#111b2e;
  --panel2:#0f1727;
  --line:#26324d;
  --text:#eef4ff;
  --muted:#9fb0d1;
  --accent:#58d7ff;
  --good:#31d38b;
  --bad:#ff6b81;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:linear-gradient(180deg,#050b16,#0b1424 65%,#09111f);
  color:var(--text);
}
.wrap{max-width:1200px;margin:0 auto;padding:24px}
.hero{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:20px;
  align-items:start;
  margin-bottom:20px;
}
.eyebrow{
  display:inline-block;
  margin:0 0 10px;
  padding:7px 12px;
  border:1px solid #1f5c73;
  background:#0d2534;
  color:#9ae8ff;
  border-radius:999px;
  font-size:13px;
}
h1{margin:0;font-size:42px;line-height:1.1}
.sub{color:var(--muted);font-size:18px;max-width:760px}
.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:16px;
}
.card,.status-card{
  background:rgba(17,27,46,.92);
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.full{margin-bottom:16px}
.label{color:var(--muted);font-size:14px;margin-bottom:10px}
.value{font-size:38px;font-weight:700}
.value.small{font-size:18px;line-height:1.4;word-break:break-word}
.status-row,.row{
  display:flex;
  align-items:center;
}
.between{justify-content:space-between}
.badge{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:14px;
  font-weight:700;
}
.badge.on{background:#0f2c20;color:#7ff0ba;border-color:#1e7b59}
.badge.off{background:#35131a;color:#ffb7c1;border-color:#7f2a3b}
.endpoint-label{margin-top:14px;color:var(--muted);font-size:13px}
.endpoint{
  margin-top:6px;
  padding:10px 12px;
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--accent);
  font-size:14px;
  word-break:break-all;
}
.log{
  margin:0;
  min-height:220px;
  overflow:auto;
  padding:14px;
  background:#09101e;
  border:1px solid var(--line);
  border-radius:16px;
  color:#98f0ff;
}
button{
  border:0;
  border-radius:14px;
  padding:12px 16px;
  background:var(--accent);
  color:#03111b;
  font-weight:700;
  cursor:pointer;
}
.steps{color:var(--muted);line-height:1.8;margin:0;padding-left:18px}
code{color:#a7efff}
@media (max-width: 900px){
  .hero,.grid{grid-template-columns:1fr}
  h1{font-size:34px}
}

.status-grid .card{min-height:154px}
.status-line{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.meta{color:var(--muted);font-size:13px;line-height:1.5;word-break:break-word}