:root{
  --bg:#f6f8fc;
  --ink:#0f1a2a;
  --muted:#6b7a90;
  --border:#e6ebf3;
  --brand:#0f62fe;
  --ok:#10b981;
  --warn:#f59e0b;
  --down:#ef4444;
  --maint:#6366f1;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
}
.container{width:min(1100px,92vw);margin:0 auto}

/* Header */
.status-header{
  background:linear-gradient(180deg,#ffffff,#f3f7ff);
  border-bottom:1px solid var(--border);
  padding:24px 0;
}
.sh-grid{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.status-header h1{margin:0 0 4px}
.status-header p{margin:0;color:var(--muted)}

/* Panel */
.panel{
  background:#fff;border:1px solid var(--border);border-radius:14px;
  margin:18px 0;padding:18px;
  box-shadow:0 10px 30px rgba(10,35,80,.05);
}
.panel h2{margin:0 0 12px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.card{border:1px solid var(--border);border-radius:12px;padding:14px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.muted{color:var(--muted)}
.fineprint{font-size:14px}

/* Badges */
.badge{
  display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;color:#fff
}
.badge.ok{background:var(--ok)}
.badge.warn{background:var(--warn)}
.badge.down{background:var(--down)}
.badge.maint{background:var(--maint)}
.badge.unknown{background:#94a3b8}

/* Buttons */
.btn{
  background:var(--brand);color:#fff;border:0;border-radius:10px;
  padding:10px 14px;font-weight:700;cursor:pointer
}
.btn:hover{filter:brightness(.97)}
.panel-actions{margin-top:12px}

/* Responsive */
@media (max-width: 800px){
  .grid{grid-template-columns:1fr}
}