:root{
  --bg:#0b0f0c; 
  --fg:#c8facc; 
  --muted:#75f28a;
  --card:#12171c; 
  --border:#1e2730; 
  --input:#0e1318;
  --accent:#3cff8f; 
  --good:#5ee17a;
  --in:#59a14f; 
  --out:#e15759;
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;margin:16px;background:var(--bg);color:var(--fg)}
h1{font-size:18px;margin:0 0 8px}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.muted{color:var(--muted);font-size:12px}

/* tabs */
.tabs{display:flex;gap:8px;align-items:center;margin:8px 0 12px;position:sticky;top:8px;z-index:5}
.tab{padding:8px 14px;border:1px solid var(--border);border-radius:999px;background:#0f1419;color:var(--fg);cursor:pointer}
.tab:hover{border-color:var(--accent)}
.open-mode{margin-left:auto;font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center}

/* controls */
.head{display:flex;gap:8px;align-items:center;margin-bottom:12px}
input[type=text]{flex:1;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--input);color:var(--fg)}
button{padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--input);color:var(--fg);cursor:pointer}
button:hover{border-color:var(--accent)}

/* layout */
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px}
.card-head{margin-bottom:8px}

/* graph */
.graph{position:relative;height:460px;border:1px solid var(--border);border-radius:8px;background:var(--input);margin-top:12px;overflow:hidden}
.graph .vis-network,.graph canvas{position:relative;z-index:2}
.legend{
  position:absolute;left:8px;bottom:8px;z-index:0;background:rgba(10,14,18,.72);
  border:1px solid var(--border);border-radius:10px;padding:10px;font-size:12px;color:var(--fg);
  pointer-events:none;backdrop-filter:blur(2px);max-width:260px
}
.legend-title{font-weight:600;color:#cbd5e1;margin:6px 0}
.legend-grid{display:grid;grid-template-columns:auto 1fr;column-gap:8px;row-gap:6px}
.legend-item{display:contents}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid #e6e6e9;margin-top:2px}
.legend-sizes{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.size-dot{display:inline-block;border-radius:50%;background:#9aa4af;outline:1px solid #e6e6e9}
.size-dot.s36{width:36px;height:36px}.size-dot.s30{width:30px;height:30px}.size-dot.s24{width:24px;height:24px}.size-dot.s16{width:16px;height:16px}.size-dot.s12{width:12px;height:12px}
.lbl{margin-right:6px;color:#cbd5e1}
.legend-note{color:#cbd5e1;line-height:1.3}
.ring{display:inline-block;padding:0 6px;border-radius:999px;border:2px solid currentColor}
.ring.in{color:var(--in)} .ring.out{color:var(--out)}

/* table */
.table-wrap{max-height:320px;overflow:auto;margin-top:8px}
table{width:100%;border-collapse:collapse;font-size:12px;background:var(--input);color:var(--fg)}
th,td{padding:6px 8px;border-top:1px solid var(--border);text-align:left;white-space:nowrap}
tbody tr:hover{background:#141b22}
a{color:var(--accent)} a:hover{color:var(--good)}
.badge{display:inline-block;padding:2px 6px;border-radius:999px;font-size:11px;border:1px solid transparent}
.badge.in{color:var(--in);background:rgba(89,161,79,.15);border-color:rgba(89,161,79,.35)}
.badge.out{color:var(--out);background:rgba(225,87,89,.15);border-color:rgba(225,87,89,.35)}
.xchg{display:inline-block;padding:2px 6px;border-radius:6px;font-size:11px;border:1px solid var(--border);background:#0e1318;color:#cbd5e1;margin-left:6px}

@media (max-width:900px){.row{grid-template-columns:1fr}.graph{height:360px}}