:root{
  --bg:#070a13; --panel:#0e1626; --border:#1e2a3f; --muted:#7e8ea8;
  --text:#dfe7f5; --accent:#00b4ff; --accent2:#18e0ff; --gold:#ffd400;
  --ok:#22d39a; --no:#ff8a5c;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 50% -10%, #10203a 0%, var(--bg) 60%);
  color:var(--text);font:16px/1.6 system-ui,Segoe UI,Roboto,sans-serif;padding:2rem}
.wrap{max-width:640px;text-align:center}
.badge{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.14em;
  color:var(--gold);border:1px solid rgba(255,212,0,.35);border-radius:99px;
  padding:5px 14px;margin-bottom:1.6rem}
.logo{font-weight:800;font-size:1.6rem;letter-spacing:.02em;margin-bottom:2rem}
.logo .mark{color:var(--accent);font-style:italic}
.logo small{color:var(--muted);font-size:.7rem;letter-spacing:.3em;vertical-align:super}
h1{font-size:1.9rem;line-height:1.2;margin:0 0 1rem}
.lead{color:#aebbd2;margin:0 0 2.5rem}
.lead strong{color:#fff}
.diag{background:var(--panel);border:1px solid var(--border);border-radius:16px;
  padding:1.4rem 1.6rem;text-align:left;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.diag h2{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  margin:0 0 1rem}
.diag ul{list-style:none;margin:0;padding:0}
.diag li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;
  border-bottom:1px solid var(--border);font-size:.9rem}
.diag li:last-child{border-bottom:0}
.diag li span{color:var(--muted)}
.diag li b{color:#fff;font-weight:600;word-break:break-all;text-align:right}
.diag b.ok{color:var(--ok)} .diag b.no{color:var(--no)}
.foot{color:var(--muted);font-size:.78rem;margin-top:2.5rem;line-height:1.7}
.foot a{color:var(--accent);text-decoration:none}
h1,.diag,.badge{animation:rise .6s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}