:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c232c; --line:#2b333d;
  --fg:#e6edf3; --dim:#8b949e; --accent:#2f81f7;
  --ok:#2ea043; --warn:#d29922; --bad:#da3633;
  --src:#7c5cff; --dst:#2f81f7;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
a{color:var(--accent)}
header.top{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:18px 28px; border-bottom:1px solid var(--line); background:var(--panel);
  flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:14px}
.mark{
  width:34px; height:34px; border-radius:9px; flex:none;
  background:linear-gradient(135deg,var(--accent),var(--src));
}
.op{font-weight:650; font-size:17px; letter-spacing:.2px}
.sub{color:var(--dim); font-size:12.5px}
.target{text-align:right}
.target .label{color:var(--dim); font-size:11.5px; text-transform:uppercase; letter-spacing:.6px}
.target .value{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:17px}
main{max-width:1240px; margin:0 auto; padding:22px 20px 60px}

.banner{
  border:1px solid var(--line); border-left:5px solid var(--dim);
  background:var(--panel); border-radius:12px; padding:16px 18px; margin-bottom:18px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.banner.ok{border-left-color:var(--ok)}
.banner.degraded{border-left-color:var(--warn)}
.banner.down{border-left-color:var(--bad)}
.banner.stale{border-left-color:var(--dim)}
.pill{
  padding:5px 13px; border-radius:999px; font-weight:650; font-size:12px;
  letter-spacing:.8px; text-transform:uppercase; background:#30363d; color:var(--fg);
}
.pill.ok{background:rgba(46,160,67,.18); color:#57d364}
.pill.degraded{background:rgba(210,153,34,.18); color:#e3b341}
.pill.down{background:rgba(218,54,51,.18); color:#ff7b72}
.headline{flex:1; min-width:240px; font-size:15.5px}
.stamp{color:var(--dim); font-size:12.5px}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-bottom:26px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.card .k{color:var(--dim); font-size:11.5px; text-transform:uppercase; letter-spacing:.6px}
.card .v{font-size:27px; font-weight:640; margin:4px 0 2px}
.card .n{color:var(--dim); font-size:12px}

.block{margin:0 0 30px}
.block h2{font-size:16.5px; margin:0 0 6px; font-weight:640}
.hint{color:var(--dim); font-size:13px; margin:0 0 14px; max-width:80ch}

.providers{display:grid; gap:8px}
.prow{
  display:grid; grid-template-columns:14px 1.6fr repeat(4,minmax(70px,.7fr)) 1.4fr;
  gap:10px; align-items:center; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:11px 14px;
}
.prow.head{background:none; border:none; padding:0 14px; color:var(--dim);
  font-size:11.5px; text-transform:uppercase; letter-spacing:.6px}
.dot{width:10px; height:10px; border-radius:50%; background:var(--dim)}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)}
.pname{font-weight:560}
.pasn{color:var(--dim); font-size:12px; font-family:ui-monospace,Menlo,monospace}
.num{font-variant-numeric:tabular-nums}
.num.ok{color:#57d364} .num.warn{color:#e3b341} .num.bad{color:#ff7b72}
.via{color:var(--dim); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.heat{display:grid; gap:5px}
.hrow{display:grid; grid-template-columns:190px 1fr; gap:10px; align-items:center}
.hname{font-size:12.5px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hcells{display:flex; gap:2px}
.hc{flex:1; height:16px; border-radius:2px; background:#21262d}
.hc.ok{background:var(--ok)} .hc.warn{background:var(--warn)} .hc.bad{background:var(--bad)}

.ingress{display:grid; gap:8px}
.irow{display:grid; grid-template-columns:1.2fr 1.6fr .6fr; gap:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 14px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px}

.traces{display:grid; gap:6px}
.trow{background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.thead{display:grid; grid-template-columns:14px 1.5fr 1.3fr .6fr .6fr; gap:10px;
  padding:10px 14px; cursor:pointer; align-items:center}
.thead:hover{background:var(--panel2)}
.tbody{display:none; border-top:1px solid var(--line); padding:10px 14px; background:#11161d}
.trow.open .tbody{display:block}
.hop{display:grid; grid-template-columns:34px 150px 1fr 78px; gap:10px; padding:3px 0;
  font-family:ui-monospace,Menlo,monospace; font-size:12.5px; border-bottom:1px dashed #222a33}
.hop:last-child{border-bottom:none}
.hop .as{color:var(--dim)}
.hop.star{color:#6e7681}

.events{display:grid; gap:6px}
.ev{background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--dim);
  border-radius:8px; padding:9px 13px; font-size:13.5px}
.ev.asn_down{border-left-color:var(--bad)}
.ev.asn_recovered{border-left-color:var(--ok)}
.ev.path_change{border-left-color:var(--warn)}
.ev .t{color:var(--dim); font-size:12px; margin-right:8px}
.empty{color:var(--dim); font-size:13px; padding:10px 2px}

footer{
  border-top:1px solid var(--line); padding:16px 28px; color:var(--dim);
  font-size:12px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
@media (max-width:760px){
  .prow{grid-template-columns:14px 1fr repeat(2,minmax(56px,.6fr)); }
  .prow > :nth-child(n+6){display:none}
  .hrow{grid-template-columns:120px 1fr}
  .thead{grid-template-columns:14px 1fr .8fr}
  .thead > :nth-child(n+4){display:none}
}