:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#3b82f6;
  --border:#1f2937;
}

*{ box-sizing:border-box; }
html, body { height:100%; margin:0; background:var(--bg); color:var(--text); font:14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji"; }

/* HEADER CENTRALIZADO */
header{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:#0c1426;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
}
header h1{ font-size:18px; margin:0; }
.toolbar{
  display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
  max-width:1200px;
}
.toolbar label{ display:flex; align-items:center; gap:6px; }
select, input{
  background:#0b1426; color:var(--text);
  border:1px solid var(--border); border-radius:8px; padding:8px 10px;
}
button{
  padding:8px 12px; border-radius:10px; border:1px solid var(--border);
  background:#182036; color:var(--text); cursor:pointer;
}
button.ghost{ background:transparent; }
button:hover{ border-color:#2b3b58; }

/* LAYOUT: legenda mais estreita */
main{
  display:grid;
  grid-template-columns: 260px 1fr;
  height: calc(100vh - 86px);
}
#graph{ position:relative; }
#cy{ position:absolute; inset:0; }

#legend{
  padding:12px; overflow:auto; border-right:1px solid var(--border);
  background:var(--panel);
}
#legend h2{ margin:4px 0 12px; font-size:16px; }
#legend h3{ margin:12px 0 8px; font-size:13px; color:var(--muted); }

/* NODES legend */
.legend-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  margin-bottom:12px;
}
.legend-item{
  display:flex; align-items:center; gap:10px;
}
.shape{
  width:20px; height:20px; border:2px solid #64748b; border-radius:6px; background:#cbd5e1;
}
.box-blue{ background:#93c5fd; border-color:#2563eb; border-radius:10px; }
.box-blue-legend{ background:#93c5fd; border-color:#2563eb; }
.box-blue-light{ background:#93c5fd; border-color:#2563eb; border-radius:10px; filter:brightness(1.08); }
.circle-orange{ background:#fbbf24; border-color:#d97706; border-radius:50%; }
.diamond-orange{ background:#f59e0b; border-color:#b45309; transform:rotate(45deg); }
.triangle-purple{
  width:0; height:0; border-radius:0; border:0;
  border-left:10px solid transparent; border-right:10px solid transparent;
  border-bottom:18px solid #a78bfa; position:relative; top:-2px; background-color: transparent;
}
.triangle-blue{
  width:0; height:0; border-radius:0; border:0;
  border-left:10px solid transparent; border-right:10px solid transparent;
  border-bottom:18px solid #93c5fd; /* fill */
  position:relative; top:-2px; background-color: transparent; 
}

.diamond-pink{ background:#f0abfc; border-color:#a21caf; transform:rotate(45deg); }
.hexagon-red{
  width:26px; height:18px; background:#fca5a5; border:2px solid #dc2626; border-radius:3px;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.hexagon-orange{
  width:26px; height:18px; background:#fdba74; border:2px solid #ea580c; border-radius:3px;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

/* EDGES legend */
.legend-edges{
  display:grid; grid-template-columns: 32px 1fr; align-items:center; row-gap:8px; column-gap:10px;
  margin-bottom:14px;
}
.edge-sample{
  height:0; border-top:3px solid #94a3b8; position:relative;
}
.edge-sample::after{
  content:""; position:absolute; right:-1px; top:-4px;
  border-left:6px solid #94a3b8; border-top:4px solid transparent; border-bottom:4px solid transparent;
}
.edge-gray{ border-color:#94a3b8; }
.edge-gray::after{ border-left-color:#94a3b8; }

.edge-green{ border-color:#22c55e; }
.edge-green::after{ border-left-color:#22c55e; }

.edge-pink{ border-color:#fa61ff; }
.edge-pink::after{ border-left-color:#fa61ff; }

.edge-blue{ border-color:#3b82f6; }
.edge-blue::after{ border-left-color:#3b82f6; }

/* dashed/dotted variants */
.edge-purple{ border-color:#a855f7; }
.edge-purple::after{ border-left-color:#a855f7; }
.edge-orange{ border-color:#f97316; }
.edge-orange::after{ border-left-color:#f97316; }

.dashed{ border-top-style: dashed; }
.dotted{ border-top-style: dotted; }

#details .kv{ margin:6px 0; color:#cbd5e1; }
#details code{ background:#0b1426; padding:2px 6px; border-radius:6px; border:1px solid var(--border); }
#details .empty{ color:#9aa6bf; }

/* combobox (lista suspensa) */
.resource-field{ display:flex; align-items:center; gap:8px; }
.combo{ position:relative; min-width: 240px; }
.combo input{ width:100%; }
.combo-list{
  position:absolute; left:0; right:0; top: calc(100% + 4px);
  background:#0b1426; border:1px solid var(--border); border-radius:8px;
  max-height:260px; overflow-y:auto; box-shadow:0 10px 24px #0008; z-index:50;
}
.combo-item{
  padding:8px 10px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.combo-item:hover, .combo-item.active{ background:#172036; }

/* util */
.hidden{ display:none !important; }
.stats{ color:#9aa6bf; }

#legend-footer{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:center;
  background:linear-gradient(to bottom,#0f172a 0%,#0f172ad0 70%,#0f172acc 100%);
}

.footer-logos{
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  padding:4px 0 8px;
}

.footer-logos img{
  max-width:100%;
  max-height:80px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:brightness(.95) saturate(.95);
  transition:filter .25s;
}

.footer-logos img:hover{
  filter:brightness(1.05) saturate(1);
}

@media (max-width: 980px){
  main{ grid-template-columns: 1fr; }
  #legend{ border-right: none; border-bottom:1px solid var(--border); }
  #graph{ height: 55vh; }
  .footer-logos img{ max-height:56px; }
}