:root { --bg:#f6f4ee; --panel:#ffffff; --line:#e3e0d6; --text:#141512; --mute:#6d6b63; --accent:#d8ff3e; --link:#3d5a00; --ink:#141512;
  --critical:#d92d20; --high:#e2620f; --medium:#b07d00; --low:#2f62d0; --info:#6d6b63; --safe:#15803d; }
* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.5 ui-sans-serif,system-ui,sans-serif }
a { color:var(--link); text-decoration:none } a:hover { text-decoration:underline }

header { border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(246,244,238,.9); backdrop-filter:blur(8px); z-index:5 }
header .in { max-width:1100px; margin:0 auto; padding:14px 16px; display:flex; align-items:center; gap:24px; flex-wrap:wrap }
.logo { display:flex; align-items:center; gap:10px; font:700 18px ui-monospace,monospace; letter-spacing:.2em; color:var(--text) } .logo:hover { text-decoration:none }
nav { display:flex; gap:4px; flex-wrap:wrap }
nav a { color:var(--mute); padding:6px 10px; border-radius:6px; font-size:13px } nav a:hover { color:var(--text); text-decoration:none; background:var(--panel) }
nav a.on { color:var(--text); background:var(--panel) }
.chain { margin-left:auto; color:var(--mute); font:12px ui-monospace,monospace; display:flex; align-items:center; gap:6px }
.dot { width:7px; height:7px; border-radius:50%; background:var(--mute) } .dot.ok { background:var(--safe) } .dot.bad { background:var(--critical) }

main { max-width:1100px; margin:0 auto; padding:32px 16px 80px }
h1 { font-size:26px; margin:0 0 4px } .sub { color:var(--mute); margin:0 0 24px }
h2 { font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--mute); margin:0 0 12px; font-weight:600 }
section, .card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; margin-top:16px }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.grid > .card { margin-top:0 }
.stat b { display:block; font:700 30px ui-monospace,monospace } .stat span { color:var(--mute); font-size:12px }
.two { display:grid; gap:16px; grid-template-columns:1fr 1fr } @media (max-width:760px) { .two { grid-template-columns:1fr } }
.two > section { margin-top:0 }

form { display:flex; gap:8px; flex-wrap:wrap }
input, select { flex:1; min-width:0; background:var(--panel); border:1px solid var(--line); color:var(--text); padding:12px; border-radius:8px; font:13px ui-monospace,monospace }
select { flex:0 0 auto }
button { background:var(--ink); color:#fff; border:0; border-radius:8px; padding:12px 18px; font-weight:700; cursor:pointer }
button.ghost { background:transparent; color:var(--text); border:1px solid var(--line) } button.sm { padding:6px 10px; font-size:12px }
button:disabled { opacity:.5 }

.pill { flex-shrink:0; align-self:flex-start; white-space:nowrap; font:700 11px ui-monospace,monospace; text-transform:uppercase; padding:2px 8px; border-radius:99px; border:1px solid currentColor }
.score { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap } .score b { font:700 48px ui-monospace,monospace }
.f { display:flex; gap:10px; padding:10px 0; border-top:1px solid var(--line) } .f:first-child { border:0 }
.f .d { color:var(--mute); font-size:12px; word-break:break-all }
.mono { font-family:ui-monospace,monospace; font-size:12px; word-break:break-all } .mute { color:var(--mute) }
.wrap { overflow-x:auto }
table { width:100%; border-collapse:collapse; font-size:12px } th { text-align:left; color:var(--mute); font-weight:500; padding:6px 4px } td { padding:8px 4px; border-top:1px solid var(--line); vertical-align:top }
pre { white-space:pre-wrap; margin:0; font:12px/1.6 ui-monospace,monospace }
code { font:12px ui-monospace,monospace; background:var(--bg); border:1px solid var(--line); padding:1px 5px; border-radius:4px }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; font-size:13px } .kv dt { color:var(--mute) } .kv dd { margin:0; word-break:break-all }
.empty { color:var(--mute); padding:8px 0 }
footer { max-width:1100px; margin:0 auto; padding:24px 16px; color:var(--mute); font-size:12px; border-top:1px solid var(--line) }

/* Phones: logo + chain status on one row, menu as a single swipeable row under it. */
@media (max-width:640px) {
  header .in { padding:10px 16px; gap:8px 12px }
  .logo { font-size:16px; letter-spacing:.16em } .logo svg { width:26px; height:26px }
  .chain { font-size:11px }
  nav { order:3; width:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -6px }
  nav::-webkit-scrollbar { display:none }
  nav a { white-space:nowrap; padding:6px 8px }
  .hide-sm { display:none }
  main { padding-top:24px }
}

.a-short { display:none; white-space:nowrap }
form.stack #l { flex:0 1 220px }
@media (max-width:640px) {
  .a-full { display:none } .a-short { display:inline }
  form.stack > *, form.stack #l { flex:1 1 100% }
}