/* Sinapse — carvão, creme e laranja queimado. Nada de roxo. */
:root {
  --fundo: #17120d;
  --painel: #211a13;
  --borda: #3a2f22;
  --texto: #f2e8d8;
  --suave: #b3a28c;
  --laranja: #e86a2c;
  --laranja2: #f09048;
  --vermelho: #d95f4b;
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--fundo); color: var(--texto);
  font: 16px/1.55 "Segoe UI", Roboto, Ubuntu, sans-serif;
  min-height: 100vh;
}
h1, h2, .nome { font-family: Georgia, "Times New Roman", serif; }
h2 { font-size: 1.15rem; margin-bottom: .7rem; }
h2 .dica { font-family: inherit; font-size: .8rem; color: var(--suave); margin-left: .5rem; }

header {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .8rem 1.2rem; border-bottom: 1px solid var(--borda);
  background: linear-gradient(180deg, #1d1610, var(--fundo));
  position: sticky; top: 0; z-index: 5;
}
.logo { display: flex; align-items: baseline; gap: .45rem; }
.cerebro { font-size: 1.5rem; }
.nome { font-size: 1.5rem; letter-spacing: .5px; }
.sub { color: var(--suave); font-size: .8rem; }
.pulso {
  background: var(--laranja); color: #fff; border-radius: 999px;
  font-size: .7rem; padding: 0 .45rem; animation: some 2s forwards;
}
@keyframes some { 0% {opacity:1} 80% {opacity:1} 100% {opacity:0} }
nav { display: flex; gap: .3rem; margin-left: auto; flex-wrap: wrap; }
nav button {
  background: none; border: 1px solid transparent; color: var(--suave);
  padding: .45rem .9rem; border-radius: 8px; cursor: pointer; font-size: .95rem;
}
nav button:hover { color: var(--texto); border-color: var(--borda); }
nav button.on { color: var(--texto); background: var(--borda); }

main { padding: 1.2rem; max-width: 1100px; margin: 0 auto; }
section > * + * { margin-top: 1rem; }

.painel {
  background: var(--painel); border: 1px solid var(--borda);
  border-radius: 14px; padding: 1.1rem 1.2rem;
}
.painel.suave { border-style: dashed; color: var(--texto); }
.dica { color: var(--suave); font-size: .85rem; }
.duo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 760px) { .cards { grid-template-columns: repeat(2, 1fr); } }
.card {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 14px;
  padding: 1rem; text-align: center;
}
.card .n { font-size: 2rem; font-family: Georgia, serif; color: var(--laranja2); }
.card .l { color: var(--suave); font-size: .85rem; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }
.chip {
  border: 1px solid var(--borda); border-radius: 999px; padding: .15rem .7rem;
  font-size: .8rem; color: var(--suave); cursor: default;
}
.chip.ativa { color: var(--texto); border-color: var(--laranja); }
.chip.clicavel { cursor: pointer; }
.chip b { color: var(--laranja2); font-weight: 600; }

.lista { list-style: none; }
.lista li {
  padding: .55rem 0; border-bottom: 1px solid var(--borda); display: flex;
  gap: .6rem; align-items: baseline; cursor: pointer;
}
.lista li:last-child { border-bottom: none; }
.lista li:hover { color: var(--laranja2); }
.tag {
  font-size: .72rem; border: 1px solid var(--borda); border-radius: 6px;
  padding: .05rem .45rem; color: var(--suave); flex-shrink: 0;
}
.tag. Quando { }
.meta-d { margin-left: auto; color: var(--suave); font-size: .78rem; flex-shrink: 0; }
.quem { color: var(--suave); font-size: .78rem; }

input, textarea, select {
  background: var(--fundo); border: 1px solid var(--borda); color: var(--texto);
  border-radius: 10px; padding: .6rem .8rem; font: inherit; width: 100%;
}
input:focus, textarea:focus, select:focus { outline: 1px solid var(--laranja); }
button {
  background: var(--laranja); border: none; color: #fff; font: inherit;
  padding: .6rem 1.1rem; border-radius: 10px; cursor: pointer;
}
button:hover { background: var(--laranja2); }
button.sec { background: transparent; border: 1px solid var(--borda); color: var(--texto); }
button.sec:hover { border-color: var(--laranja); }

.barra-busca, .barra-grafo { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.barra-busca input { flex: 2; min-width: 240px; }
.barra-busca .sec, .barra-busca button { flex: 0; }
.barra-grafo { color: var(--suave); font-size: .85rem; }
.barra-grafo input { flex: 1; min-width: 200px; }
.zoom button { padding: .3rem .6rem; margin-left: .25rem; }

.stage { position: relative; height: 72vh; min-height: 420px; }
#grafo { width: 100%; height: 100%; display: block; border-radius: 14px;
  background: radial-gradient(ellipse at 50% 40%, #1e1710 0%, var(--fundo) 70%);
  border: 1px solid var(--borda); cursor: grab; }
#grafo.arrastando { cursor: grabbing; }
#tooltip {
  position: absolute; pointer-events: none; display: none; max-width: 260px;
  background: #0f0b08ee; border: 1px solid var(--borda); border-radius: 10px;
  padding: .5rem .7rem; font-size: .8rem; z-index: 3;
}
#detalhe {
  position: absolute; top: 0; right: 0; bottom: 0; width: 300px; overflow-y: auto;
  background: #211a13f2; border-left: 1px solid var(--borda); border-radius: 0 14px 14px 0;
  padding: 1rem; font-size: .88rem;
}
#detalhe h3 { font-family: Georgia, serif; margin-bottom: .4rem; }
#detalhe .fechar { position: absolute; top: .5rem; right: .5rem; padding: .1rem .5rem; }
#detalhe ul { list-style: none; margin-top: .5rem; }
#detalhe li { padding: .3rem 0; border-bottom: 1px solid var(--borda); cursor: pointer; }
#detalhe li:hover { color: var(--laranja2); }

.resultado {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 12px;
  padding: .9rem 1rem; margin-top: .7rem;
}
.resultado .cab { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.resultado h3 { font-size: 1rem; cursor: pointer; }
.resultado h3:hover { color: var(--laranja2); }
.resultado .escore { margin-left: auto; color: var(--suave); font-size: .78rem; }
.resultado .trecho { color: var(--suave); margin-top: .35rem; font-size: .9rem; }
.resultado .via { color: var(--laranja); font-size: .72rem; }
.marcado { background: #e86a2c33; color: var(--texto); border-radius: 3px; }

.linha { display: flex; gap: .8rem; flex-wrap: wrap; align-items: end; margin-top: .6rem; }
.linha label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: var(--suave); flex: 1; min-width: 140px; }
.linha.fim { justify-content: flex-end; align-items: center; margin-top: .8rem; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid var(--borda); }
th { color: var(--suave); font-weight: 500; font-size: .8rem; }

.bloco-copia { margin-top: .8rem; }
.bloco-copia b { color: var(--laranja2); }
.bloco-copia pre {
  background: #0f0b08; border: 1px solid var(--borda); border-radius: 10px;
  padding: .7rem .9rem; margin-top: .3rem; overflow-x: auto; font-size: .82rem;
  color: #d8cbb8; position: relative;
}
.copiar { position: relative; float: right; margin-top: .3rem; padding: .15rem .6rem; font-size: .78rem; }

.overlay {
  position: fixed; inset: 0; background: #0009; backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.caixa {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 16px;
  padding: 2rem; width: min(420px, 92vw); text-align: center;
}
.caixa.larga { width: min(760px, 94vw); text-align: left; }
.caixa h1 { font-size: 1.6rem; margin-bottom: .5rem; }
.caixa input { margin: .8rem 0; }
.caixa pre {
  background: #0f0b08; border-radius: 10px; padding: .8rem; overflow-x: auto;
  max-height: 50vh; white-space: pre-wrap; color: #d8cbb8; font-size: .85rem;
}
.erro { color: var(--vermelho); font-size: .85rem; }

#toasts { position: fixed; bottom: 1rem; right: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 60; }
.toast {
  background: var(--painel); border: 1px solid var(--laranja); border-radius: 10px;
  padding: .7rem 1rem; font-size: .9rem; max-width: 340px;
  animation: entra .25s ease-out;
}
.toast.erro { border-color: var(--vermelho); }
@keyframes entra { from { transform: translateY(8px); opacity: 0 } }

#spark { width: 100%; height: 150px; }