body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;

  color: #000;
}

header {
    padding: 2rem;
    background: #ffffff;
    display: flex
;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid #848484;
    margin-bottom: 2rem;
    box-shadow: 2px 2px 15px #ccc;
}

#search-input {
  flex: 1;
  padding: 8px;
  border-radius: 6px;
  border: none;
}

#graph {
  width: 100vw;
  height: calc(100vh - 70px);
  overflow: hidden;
  position: relative;
}

.tooltip {
  position: absolute;
  padding: 8px 10px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.node-label {
    font: 12px / 1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    fill: #000;
    opacity: .9;
    paint-order: stroke;
    /* stroke: #0b0e13; */
    /* background: red; */
    stroke-width: 3px;
    /* border: 1px solid #000; */
    /* display: inline-block; */
}
}

.dataset-banner{
    background: #437114ee;
    color: #fff;

  border:1px solid #30363d; border-radius:8px;
  padding: 6px 10px; font-size:12px; display:flex; gap:8px; align-items:center;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.dataset-banner.hidden{ display:none; }
.dataset-banner .dot{ opacity:.6 }

/* If WebGL is used, canvases sit under the SVG label layer */
#graph canvas {
  position: absolute;
  inset: 0;
}
#graph svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#graph svg,
#graph .labels,
#graph .labels * {
  pointer-events: none;
}
.viz-toolbar{
top:64px; left:16px;
  display:flex; gap:8px; align-items:center;
  background:rgba(20,24,32,.85); padding:8px 10px;
  border:1px solid rgba(255,255,255,.06); border-radius:8px;
  backdrop-filter: blur(4px);
}
.viz-toolbar button{
  padding:4px 8px; border-radius:6px; border:1px solid rgba(255,255,255,.1);
  background:#1b2332; color:#dbe4ff; cursor:pointer;
}
.viz-toolbar .sep{ width:1px; height:18px; background:rgba(255,255,255,.1); }
#legend {     display: flex
;
    gap: 12px;
    align-items: flex-start;
    flex-direction: column;}
.legend-item { color:#c9d3e6; font-size:12px; }
.legend-item i { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }
aside{     position: sticky;
    left: 10px;
    bottom: 100px;
    max-width: 20%;
    display: flex
;
    flex-direction: column;
    gap: 1rem;
    background: #000000ab;
    padding: 10px;
    border-radius: 8px;}
	
	.tabs { display:flex; gap:.5rem; margin:.6rem 0; }
.tab { padding:.35rem .7rem; border-radius:6px; border:1px solid #2a2f3a; background:#11161f; color:#dbe7ff; cursor:pointer; }
.tab.active { background:#1a2330; border-color:#3a4250; }

.view { display:none; padding: 3rem;}
.view.active { display:block; }

.list-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin:.6rem 0; }
.list-controls input[type="search"] { padding:.4rem .6rem; min-width:260px;  color:#000; border-radius:6px; }
.list-controls .chk { font-size:.9rem; color:#000; }
.list-controls select { padding:.35rem .5rem; border-radius:6px; border:1px solid #2a2f3a; background:#0b0f17; color:#e8f0ff; }

.list-summary { margin:.2rem 0 .5rem; color:#000; font-size:.9rem; }

.list-table-wrap { max-height: 60vh; overflow:auto; border:1px solid #202634; border-radius:8px; }
.list-table { width:100%; border-collapse:collapse; font-size:.95rem; }
.list-table thead { position:sticky; top:0; background:#101724; }
.list-table th, .list-table td { padding:.5rem .7rem;    border-bottom: 1px solid #1b2330;color:#000; }
.list-table tbody tr:nth-child(odd) { background:#efefef; }
.list-table tbody tr:nth-child(even){ background:#fff; }
.list-table td:nth-child(3) { color:#000; }

.list-pager { display:flex; align-items:center; gap:.8rem; margin:.6rem 0 1rem; }
.list-pager button { padding:.35rem .7rem; border-radius:6px; border:1px solid #2a2f3a; background:#101724; color:#dbe7ff; cursor:pointer; }
#list-page-indicator { color:#9fb3d9; }

	/* when list is shown, you might hide map-only controls, or tweak spacing */
body.mode-list #graph-toolbar { display: none; }
body.mode-map  #view-list      { display: none; } /* redundant with .view, but handy */
header img{max-width:50px;}
.list-table th {
    color: #fff;
    text-align: left;
}
button {
    background: #b50000;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #ff4700;
    color: #fff;
}
footer{    padding: 3rem;
    background: #ececec;
    border: 0px;
    display: flex
;
    flex-direction: column;}
	
	.credits{
		    display: flex
;
    flex-direction: column;
	}