:root {
  --bg: #0f1419;
  --panel: #1c232b;
  --panel-2: #232c36;
  --text: #e6e9ed;
  --muted: #8a949f;
  --accent: #4ea3ff;
  --accent-2: #1abc9c;
  --warn: #f39c12;
  --crit: #e74c3c;
  --border: #2a3340;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { display:flex; align-items:center; gap:18px; padding:10px 18px;
  background:#0a0d12; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20; }
.brand { font-weight:700; font-size:18px; }
.brand a { color: var(--text); }
.theme-pill { background:#1a2733; color:#9ec3ff; font-size:11px; padding:2px 6px;
  border-radius:4px; margin-left:6px; }
.topnav { display:flex; gap:14px; flex:1; }
.topnav a { color: var(--muted); font-size: 14px; }
.topnav a:hover { color: var(--text); }
.status { font-size:12px; color:var(--muted); }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#666; margin-right:4px; vertical-align:middle; }
.dot.ok { background:#27ae60; }
.dot.off { background:#7f8c8d; }

.content { max-width:1480px; margin:0 auto; padding:20px; }
.hero h1 { font-size:30px; margin: 0 0 4px 0; }
.sub { color: var(--muted); }
.cards { display:grid; gap:14px; margin-top:20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:16px; display:block; color:var(--text); position:relative; }
.card:hover { background:var(--panel-2); text-decoration:none; }
.card h3 { margin: 0 0 4px 0; font-size: 15px; }
.card p { margin: 0; color: var(--muted); font-size: 13px; }
.card .big { position:absolute; right:14px; bottom:10px; font-size:22px;
  font-weight:700; color:var(--accent); }

.page { padding: 4px 0; }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.page h1 { font-size: 24px; margin: 4px 0; }
.toolbar { display:flex; gap:10px; align-items:center; margin: 10px 0; flex-wrap:wrap; }
.toolbar input, .toolbar select, .toolbar button {
  background:var(--panel); color:var(--text); border:1px solid var(--border);
  padding:6px 10px; border-radius:6px; font-size:13px; }
.toolbar button { cursor:pointer; }
.toolbar button:hover { background: var(--panel-2); }

/* Network */
.network-wrap { display:grid; grid-template-columns: 1fr 320px; gap:14px;
  height: calc(100vh - 180px); }
#cy { width:100%; height:100%; background:#0a0d12; border:1px solid var(--border);
  border-radius:8px; }
#sidepane { background:var(--panel); border:1px solid var(--border); border-radius:8px;
  padding:14px; overflow:auto; font-size:13px; }
#sidepane h3 { margin:0 0 6px 0; }
#sidepane .empty { color:var(--muted); }
#sidepane .chip { display:inline-block; padding:2px 6px; margin:2px;
  background:#0a0d12; border:1px solid var(--border); border-radius:4px;
  color:var(--accent); font-size:11px; }

/* Tables */
table.kv, table.rel, table.data { width:100%; border-collapse:collapse;
  font-size: 13px; }
table.kv th, table.kv td, table.rel th, table.rel td, table.data th, table.data td {
  padding: 6px 8px; border-bottom: 1px solid var(--border); text-align:left;
  vertical-align: top; }
table.kv th { color: var(--muted); width: 30%; font-weight: normal; }
table.rel th, table.data th { color: var(--muted); font-weight:600; font-size:12px;
  text-transform: uppercase; letter-spacing: 0.04em; }
.dim { color: var(--muted); font-size: 12px; }
.crit { font-size:11px; padding:2px 5px; border-radius:3px; color:#fff;
  background:#7f8c8d; }
.crit.critical { background:#c0392b; }
.crit.high { background:#e67e22; }
.crit.medium { background:#7f8c8d; }
.crit.low { background:#95a5a6; }
.chip { display:inline-block; padding:2px 7px; margin:2px;
  background:#0a0d12; border:1px solid var(--border); border-radius:4px;
  color:var(--accent); font-size:12px; }

.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin: 14px 0; }
.panel { background:var(--panel); border:1px solid var(--border); border-radius:8px;
  padding: 12px 14px; }
.panel h2 { font-size: 15px; margin: 0 0 8px 0; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em; }
pre.md { background:#0a0d12; color:var(--text); padding:12px; border-radius:6px;
  overflow:auto; white-space:pre-wrap; font-size:12px; }

/* Bottlenecks */
.bot-row { padding: 12px 14px; margin: 8px 0; border-radius: 6px;
  border-left: 4px solid var(--border); }
.bot-name { font-weight: 600; }
.bot-note { color: var(--muted); font-size: 13px; margin: 4px 0 8px 0; }

/* Geography */
.geo-row { padding:12px 0; border-bottom:1px solid var(--border); }
.geo-head { font-size:15px; margin-bottom:6px; }
.geo-bar { height:8px; background:#0a0d12; border-radius:4px; overflow:hidden;
  margin-bottom:8px; }
.geo-bar span { display:block; height:100%; }
.geo-items .pill { display:inline-block; background:var(--panel-2); padding:2px 7px;
  margin:2px; border-radius:10px; font-size:12px; color:var(--muted); }

/* Layer cards */
#layer-grid { display:grid; gap:12px; margin-top:14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.layer-card { padding: 14px; border-radius: 8px; color:#1f1f1f;
  border: 1px solid rgba(0,0,0,0.1); }
.layer-card p { font-size:13px; margin: 2px 0 8px 0; color:#3b3b3b; }
.layer-card .lc-h { font-size:15px; }
.layer-card .lc-chips .chip { color:#1f1f1f; background:#fff; border-color:#ddd; }
.layer-card .dim { color: #5a5a5a; }

/* Mobile */
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; }
  .topnav { gap: 10px; order: 3; width: 100%; overflow-x: auto; }
  .grid-2 { grid-template-columns: 1fr; }
  .network-wrap { grid-template-columns: 1fr; height: auto; }
  #cy { height: 60vh; }
  #sidepane { max-height: 40vh; }
}