*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,
  'Segoe UI',Roboto,sans-serif;background:#0f172a;
  color:#e2e8f0;min-height:100vh}
header{text-align:center;padding:3rem 1rem 1rem}
header h1{font-size:2rem;font-weight:700;
  background:linear-gradient(135deg,#60a5fa,#a78bfa);
  -webkit-background-clip:text;color:transparent}
header p{color:#94a3b8;margin-top:.5rem;font-size:.95rem}
.grid{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1.25rem;max-width:960px;margin:2rem auto;
  padding:0 1.5rem}
.card{background:#1e293b;border:1px solid #334155;
  border-radius:12px;padding:1.5rem;position:relative;
  text-decoration:none;color:#e2e8f0;
  transition:transform .15s,border-color .15s}
.status-dot{position:absolute;top:1rem;right:1rem;
  width:10px;height:10px;border-radius:50%;
  background:#64748b;transition:background .25s,
  box-shadow .25s}
.status-dot.up{background:#22c55e;
  box-shadow:0 0 8px rgba(34,197,94,.5)}
.status-dot.down{background:#ef4444;
  box-shadow:0 0 8px rgba(239,68,68,.5)}
.card:hover{transform:translateY(-3px);
  border-color:#60a5fa}
.card .icon{font-size:2rem;margin-bottom:.75rem}
.card h2{font-size:1.1rem;font-weight:600;
  margin-bottom:.35rem}
.card p{font-size:.85rem;color:#94a3b8;line-height:1.5}
.card .port{display:inline-block;margin-top:.75rem;
  font-size:.75rem;color:#60a5fa;
  background:#1e3a5f;padding:2px 8px;border-radius:4px}
footer{text-align:center;padding:2rem;
  color:#475569;font-size:.8rem}