:root {
  --bg:#0b0f17; --panel:#121826; --muted:#7a88a8; --text:#e6eefc;
  --ok:#22c55e; --bad:#ef4444; --warn:#f59e0b;
  --card:#111827; --border:#1f2937; --accent:#1f2a44;
}
* { box-sizing:border-box }
body {
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
  background:radial-gradient(1200px 600px at 20% 0%, #0c1424 0%, #0b0f17 50%, #070b12 100%);
  color:var(--text);
}
.big { font-size:26px; font-weight:700 }
.wrap { max-width:1200px; margin:0 auto; padding:24px }
h1 { font-size:22px; margin:0 0 6px }
.sub { color:var(--muted); font-size:12px }

.toolbar { display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 }
button { background:#141c2c; border:1px solid var(--border); color:var(--text);
  padding:8px 12px; border-radius:10px; cursor:pointer }
button:hover { background:#182238 }

.hdr { display:grid; gap:14px; grid-template-columns:repeat(3,1fr); margin-bottom:8px }
.hdr .card { padding:16px 16px 12px; }

.grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(360px,1fr)) }
.card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:14px;
  box-shadow:0 10px 20px rgba(0,0,0,.25); transition:transform .15s ease, outline-color .15s ease }
.card:hover { outline:1px solid #2b3a5c; transform: translateY(-2px) }
.row { display:flex; justify-content:space-between; align-items:center; gap:8px }
.name { font-weight:600; font-size:15px }
.url { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:240px }

.badge { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 8px; font-size:12px; border:1px solid var(--border) }
.ok { background:rgba(34,197,94,.12); color:#86efac; border-color:rgba(34,197,94,.35) }
.bad { background:rgba(239,68,68,.12); color:#fca5a5; border-color:rgba(239,68,68,.35) }
.warn{ background:rgba(245,158,11,.12); color:#fcd34d; border-color:rgba(245,158,11,.35) }

.stat { border:1px solid var(--border); border-radius:12px; padding:8px }
.stat .label { color:var(--muted); font-size:11px }
.stat .value { font-size:13px; font-weight:600; margin-top:4px }
.stats, .net-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:10px }
.net-stats { grid-template-columns: repeat(4, 1fr); }

.progress { height:8px; border-radius:999px; background:#0c1426; border:1px solid var(--border); overflow:hidden }
.bar { height:100%; background:linear-gradient(90deg,#2dd4bf,#60a5fa); width:0% }

.spark { width:100%; height:64px; display:block; margin-top:10px }
.netcard { grid-column: 1 / -1; }
.netspark { width:100%; height:120px; display:block; margin-top:12px }

dialog { border:none; border-radius:16px; padding:0; background:var(--panel); color:var(--text); width:min(820px,92vw) }
dialog::backdrop { background:rgba(3,6,14,.65) }
.dlg-h { padding:16px 18px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center }
.btn-close { background:transparent; border:1px solid var(--border); padding:6px 10px; border-radius:8px; color:var(--text); cursor:pointer }
.dlg-b { padding:16px 18px }
.kvs { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px }
.kv { border:1px solid var(--border); border-radius:12px; padding:10px }
.kv .k { color:var(--muted); font-size:12px }
.kv .v { font-weight:600; margin-top:2px }
.incidents { display:grid; gap:8px }
.inc { border:1px solid var(--border); border-radius:12px; padding:10px; font-size:13px }
.muted { color:var(--muted) }