:root{
  --bg:#0b0e14; --fg:#e7edf5; --muted:#8b98a9;
  --line:#232b38; --accent:#4c8dff; --ok:#3fb950; --bad:#f85149;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--fg); min-height:100vh;
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",system-ui,sans-serif;
  display:flex; justify-content:center; padding:48px 18px 80px;
}
main{width:100%; max-width:760px}
header{margin-bottom:28px}
h1{margin:0 0 6px; font-size:clamp(24px,4vw,32px); letter-spacing:-.5px; font-weight:650}
.sub{margin:0; color:var(--muted); font-size:14px}
.card{
  background:linear-gradient(180deg,#131a24,#0f141c);
  border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; margin-bottom:14px;
}
.card h2{margin:0 0 12px; font-size:15px; font-weight:620; letter-spacing:.2px; color:#cdd9e5}
.hint{margin:0 0 10px; color:var(--muted); font-size:13px}
code{
  background:#0a0e14; border:1px solid var(--line); border-radius:5px;
  padding:1px 5px; font-size:12.5px; color:#9ecbff;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}
.kv{margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0; font-family:ui-monospace,Consolas,monospace; font-size:13px; word-break:break-all}
.kv.small{display:block; padding-left:18px; color:var(--muted); font-size:13px}
.kv.small li{margin-bottom:5px}
button{
  background:var(--accent); color:#fff; border:0; border-radius:8px;
  padding:9px 16px; font-size:14px; font-weight:520; cursor:pointer;
  transition:filter .15s,transform .05s;
}
button:hover{filter:brightness(1.12)}
button:active{transform:translateY(1px)}
button:focus-visible{outline:2px solid #7fb0ff; outline-offset:2px}
pre{
  background:#080b11; border:1px solid var(--line); border-radius:8px;
  padding:12px 14px; margin:12px 0 0; overflow:auto;
  font:12.5px/1.6 ui-monospace,Consolas,monospace; color:#a5d6ff;
  max-height:320px;
}
.checks{list-style:none; margin:12px 0 0; padding:0; font-size:13px}
.checks li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 8px;
  padding:7px 0; border-bottom:1px solid #1a2230;
}
.checks li:last-child{border-bottom:0}
.checks .mark{width:14px; font-weight:700}
.checks li.ok .mark{color:var(--ok)}
.checks li.bad .mark{color:var(--bad)}
.checks strong{font-weight:560; min-width:110px}
.checks .val{color:var(--muted); font-family:ui-monospace,Consolas,monospace; font-size:11.5px; word-break:break-all; flex:1 1 100%}
@media (max-width:560px){
  body{padding:28px 14px 60px}
  .card{padding:15px 16px}
  .checks strong{min-width:0}
}