:root{
  --slate-950:#020617; --slate-900:#0f172a; --slate-800:#1e293b;
  --slate-500:#64748b; --slate-400:#94a3b8; --slate-100:#f1f5f9;
  --emerald-500:#10b981; --emerald-400:#34d399; --teal-300:#5eead4;
  --amber-500:#f59e0b; --red-500:#ef4444;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--slate-900); color:var(--slate-100);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  display:flex; flex-direction:column; justify-content:space-between;
}
.icon{width:1em;height:1em;vertical-align:-0.125em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Header */
.header{
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 1.5rem; border-bottom:1px solid var(--slate-800);
  background:rgba(2,6,23,.5); backdrop-filter:blur(8px);
}
.brand{display:flex; align-items:center; gap:.75rem}
.brand-logo{
  background:var(--emerald-500); color:var(--slate-950);
  padding:.5rem; border-radius:.5rem; font-weight:700; display:flex;
}
.brand-name{font-weight:700; font-size:1.25rem; letter-spacing:-.01em}
.brand-ver{color:var(--emerald-400); font-size:.8rem; font-weight:500; margin-left:.25rem}
.status{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .75rem; border-radius:9999px; font-size:.75rem; font-weight:500;
  background:rgba(16,185,129,.1); color:var(--emerald-400);
  border:1px solid rgba(16,185,129,.2);
}
.dot{width:.4rem; height:.4rem; border-radius:9999px; background:var(--emerald-400);
  display:inline-block; animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
/* Main */
.main{
  max-width:56rem; margin:0 auto; padding:5rem 1.5rem; text-align:center;
  flex-grow:1; display:flex; flex-direction:column; justify-content:center;
}
.title{font-size:3rem; line-height:1.1; font-weight:800; letter-spacing:-.02em;
  color:#fff; margin:0 0 1.5rem}
@media(min-width:640px){.title{font-size:3.75rem}}
.grad{background:linear-gradient(to right,var(--emerald-400),var(--teal-300));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size:1.125rem; color:var(--slate-400); max-width:42rem;
  margin:0 auto 2.5rem}
.card{
  background:var(--slate-950); border:1px solid var(--slate-800);
  padding:1.5rem; border-radius:1rem; max-width:28rem; width:100%; margin:0 auto;
  box-shadow:0 20px 25px -5px rgba(0,0,0,.4);
}
.card-top{display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--slate-800); padding-bottom:1rem; margin-bottom:1rem}
.card-label{color:var(--slate-400); font-size:.875rem; display:inline-flex; align-items:center; gap:.5rem}
#latency{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:700; font-size:1.125rem}
.lat-ok{color:var(--emerald-400)} .lat-warn{color:var(--amber-500)} .lat-bad{color:var(--red-500)}
.card-meta{text-align:left; font-size:.75rem; color:var(--slate-500); display:flex; flex-direction:column; gap:.25rem}
.card-meta p{margin:0; display:inline-flex; align-items:center; gap:.5rem}
/* Footer */
.footer{border-top:1px solid var(--slate-800); padding:1.5rem; text-align:center;
  font-size:.875rem; color:var(--slate-500); background:rgba(2,6,23,.2)}