:root {
  --net-border: rgba(0, 0, 0, 0.10);
  --net-muted: rgba(0, 0, 0, 0.62);
  --net-link: rgba(0, 0, 0, 0.18);
  --net-fill: #0e7490;
  --net-bg: #ffffff;
  --net-panel: #fafafa;
}

/* Page heading */
.net-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 10px;
}

.net-title h1 {
  font-size: 32px;
  line-height: 1.1;
  margin: 0;
  font-weight: 600;
}

.net-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--net-border);
  color: rgba(0, 0, 0, 0.55);
}

/* Tabs */
.net-tabs {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid var(--net-border);
  margin-top: 12px;
}

.net-tabbtn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 14px 4px 12px;
  font: inherit;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.70);
  position: relative;
}

.net-tabbtn.is-active {
  color: #0b61d6;
  font-weight: 600;
}

.net-tabbtn.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #0b61d6;
}

.net-tabpanel {
  padding: 14px 0 0;
}

.net-tabpanel[hidden] {
  display: none;
}

/* Layout matching reference: left filters + right canvas */
.net-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  align-items: stretch;
}

.net-sidebar {
  background: var(--net-bg);
  border: 1px solid var(--net-border);
  min-height: 620px;
  padding: 14px;
}

.side-group {
  padding: 6px 0 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.side-group:last-child {
  border-bottom: 0;
}

.side-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  color: rgba(0, 0, 0, 0.72);
  font-size: 14px;
}

.side-check input {
  width: 14px;
  height: 14px;
}

.side-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.side-row label {
  color: rgba(0, 0, 0, 0.70);
  font-size: 14px;
}

.side-row select {
  height: 28px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  padding: 0 8px;
  background: #fff;
  font-family: inherit;
}

.side-help {
  margin-top: 12px;
  color: rgba(0, 0, 0, 0.55);
  font-size: 13px;
  line-height: 1.4;
}

.side-help .hint {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.side-help .dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--net-border);
  display: grid;
  place-items: center;
  font-size: 12px;
}

.net-main {
  border: 1px solid var(--net-border);
  background: var(--net-bg);
  min-height: 620px;
  position: relative;
}

.net-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.seg {
  display: inline-flex;
  gap: 8px;
}

.tbtn {
  height: 28px;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #f3f3f3;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}

.tbtn.is-active {
  background: #fff;
}

.tools {
  display: inline-flex;
  gap: 6px;
}

.iconbtn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #fff;
  cursor: pointer;
  font-weight: 700;
}

.search {
  margin-left: auto;
  position: relative;
  width: min(360px, 45%);
}

.search input {
  width: 100%;
  height: 28px;
  padding: 0 34px 0 10px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #fff;
  font-family: inherit;
}

.search .mag {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.55;
}

.net-canvas {
  height: calc(620px - 49px);
}

.net-canvas svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Graph styling */
.net-link {
  stroke: var(--net-link);
  stroke-width: 1.1;
}

.net-link.is-dim { opacity: 0.1; }

.net-node { cursor: grab; }
.net-node:active { cursor: grabbing; }

.net-label {
  font-size: 12px;
  fill: rgba(0, 0, 0, 0.68);
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 4px;
  stroke-linejoin: round;
  pointer-events: none;
}

.net-label.is-dim { opacity: 0.1; }
.net-node.is-dim { opacity: 0.12; }

.net-node.is-center {
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 2.5;
}

.net-detail {
  position: absolute;
  left: 12px;
  bottom: 12px;
  max-width: 360px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 6px;
  padding: 10px 12px;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.10);
}

.net-detail .dt-title {
  font-weight: 700;
  margin-bottom: 4px;
}

.net-detail .dt-sub {
  color: rgba(0, 0, 0, 0.62);
  font-size: 13px;
  line-height: 1.35;
}

.net-detail ul {
  margin: 8px 0 0 18px;
  padding: 0;
}

/* Map tab */
.map-header {
  padding: 6px 0 8px;
}

.map-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.map-title h2 {
  margin: 0;
  font-weight: 600;
}

.map-sub {
  margin: 10px 0 0;
  color: rgba(0, 0, 0, 0.60);
  max-width: 980px;
}

.map-canvas {
  border: 1px solid var(--net-border);
  background: #fff;
  min-height: 640px;
  margin-top: 14px;
}

.map-canvas svg {
  width: 100%;
  height: 640px;
  display: block;
}

.map-land {
  fill: rgba(0, 0, 0, 0.36);
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 0.6;
}

.map-bubble {
  fill: #0b61d6;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 2;
  opacity: 0.9;
}

.placeholder {
  border: 1px dashed rgba(0, 0, 0, 0.18);
  background: rgba(0, 0, 0, 0.02);
  border-radius: 10px;
  padding: 18px;
}

@media (max-width: 980px) {
  .net-layout {
    grid-template-columns: 1fr;
  }
  .search {
    width: 100%;
  }
  .net-canvas {
    height: 520px;
  }
  .net-main {
    min-height: 520px;
  }
  .net-sidebar {
    min-height: auto;
  }
  .map-canvas svg {
    height: 520px;
  }
}


/* Tab panels */
.tab-panel{display:none}
.tab-panel.active{display:block}

/* Tabs */
.net-tabs{display:flex;gap:18px;border-bottom:1px solid var(--net-border);margin:14px 0 18px}
.tabbtn{border:none;background:none;padding:12px 2px;margin-bottom:-1px;color:rgba(0,0,0,.65);font-weight:500;cursor:pointer}
.tabbtn.active{color:#0b6aa8;border-bottom:2px solid #0b6aa8;font-weight:600}

/* Shell layout */
.net-shell{display:grid;grid-template-columns:260px 1fr;gap:18px}
.net-sidebar{border-right:1px solid var(--net-border);padding-right:16px}
.side-card{padding:10px 4px}
.side-title{font-weight:600;color:rgba(0,0,0,.7);margin-bottom:10px}

/* Toolbar */
.net-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px;border:1px solid var(--net-border);border-radius:10px;background:#fff}
.tool-left,.tool-mid{display:flex;align-items:center;gap:8px}
.toolbtn{border:1px solid var(--net-border);background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer;font-weight:600}
.toolbtn.active{background:#f2f6fb;border-color:rgba(11,106,168,.35)}
.toolicon{border:1px solid var(--net-border);background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer}
.search{width:280px;max-width:40vw;border:1px solid var(--net-border);border-radius:8px;padding:8px 10px}

/* Stage */
.net-stage{position:relative;height:560px;border:1px solid var(--net-border);border-radius:10px;overflow:hidden;background:#fff;margin-top:12px}
#net-svg{width:100%;height:100%}

/* Nodes/links */
.net-link{stroke:rgba(0,0,0,.2)}
.node .node-icon{fill:rgba(0,0,0,.78)}
.node.owner .node-icon{fill:#0b6aa8}
.node.published .node-icon{fill:#1f8a3b}
.node.published .node-label{fill:rgba(0,0,0,.75)}
.node.published.owner .node-icon{fill:#1f8a3b}
.node .node-label{font-size:12px;fill:rgba(0,0,0,.75)}
.node.dim{opacity:.18}
.node.hit .node-label{font-weight:700;fill:#0b6aa8}

/* Details */
.net-detail{position:absolute;right:14px;top:14px;width:280px;max-width:70vw;background:#fff;border:1px solid var(--net-border);border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.08);display:none}
.net-detail.open{display:block}
.detail-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--net-border)}
.detail-title{font-weight:700}
.detail-close{border:none;background:none;cursor:pointer;font-size:16px;color:rgba(0,0,0,.5)}
.detail-body{padding:10px 12px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0}
.kv .k{color:rgba(0,0,0,.55)}
.kv .v{color:rgba(0,0,0,.85);text-align:right}

/* Map */
.map-head h2{margin:0 0 8px;font-size:24px}
.map-sub{color:rgba(0,0,0,.6);font-size:13px}
.map-stage{height:620px;border:1px solid var(--net-border);border-radius:10px;overflow:hidden;background:#fff}
#map-svg{width:100%;height:100%}
.map-land{fill:rgba(0,0,0,.35);stroke:rgba(255,255,255,.9);stroke-width:.6}
.map-bubble{fill:rgba(11,106,168,.9);stroke:#fff;stroke-width:2}

/* Cards list */
.list-cards{display:flex;flex-direction:column;gap:10px}
.card-row{display:flex;gap:10px;align-items:center;border:1px solid var(--net-border);border-radius:12px;padding:10px 12px;background:#fff}
.card-icon{width:32px;height:32px;border-radius:10px;border:1px solid var(--net-border);display:flex;align-items:center;justify-content:center;color:rgba(0,0,0,.6)}
.card-title{font-weight:700}
.card-sub{color:rgba(0,0,0,.6);font-size:13px;margin-top:2px}

@media (max-width: 900px){
  .net-shell{grid-template-columns:1fr}
  .net-sidebar{border-right:none;padding-right:0}
  .search{width:100%}
}


.legend-row{display:flex;align-items:center;gap:10px;margin:8px 0;color:rgba(0,0,0,.8);font-size:14px}
.legend-icon{width:18px;height:18px;display:inline-block;border:1px solid rgba(0,0,0,.15);border-radius:4px;background:#fff;position:relative}
.legend-icon.person::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;transform:translate(-50%,-50%);background:rgba(0,0,0,.75);
-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm89.6 32h-11.8c-22.2 10.2-46.9 16-73.8 16s-51.6-5.8-73.8-16h-11.8C63.7 288 0 351.7 0 430.4V464c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V430.4c0-78.7-63.7-142.4-142.4-142.4z"/></svg>') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm89.6 32h-11.8c-22.2 10.2-46.9 16-73.8 16s-51.6-5.8-73.8-16h-11.8C63.7 288 0 351.7 0 430.4V464c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V430.4c0-78.7-63.7-142.4-142.4-142.4z"/></svg>') center/contain no-repeat;}
.legend-icon.inst::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;transform:translate(-50%,-50%);background:rgba(0,0,0,.75);
-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M243.4 2.6c8-3.5 17.2-3.5 25.2 0l216 96C500.4 105.6 512 121.5 512 140.2V176c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V140.2c0-18.7 11.6-34.6 27.4-41.6l216-96zM64 224h64V448H64V224zm384 0v224H384V224h64zM192 224h64V448H192V224zm128 0h64V448H320V224zM24 480H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/></svg>') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M243.4 2.6c8-3.5 17.2-3.5 25.2 0l216 96C500.4 105.6 512 121.5 512 140.2V176c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V140.2c0-18.7 11.6-34.6 27.4-41.6l216-96zM64 224h64V448H64V224zm384 0v224H384V224h64zM192 224h64V448H192V224zm128 0h64V448H320V224zM24 480H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/></svg>') center/contain no-repeat;}
.legend-hint{margin-top:12px;color:rgba(0,0,0,.55);font-size:13px;line-height:1.4}