:root {
  --fundo: #060a13;
  --painel: #0d1525;
  --painel-2: #111c30;
  --borda: #1e2c46;
  --borda-forte: #2c3f63;
  --texto: #d7e1f0;
  --texto-2: #8796b0;
  --ouro: #f2b33d;
  --ouro-esc: #b9831f;
  --ciano: #45c8e6;
  --perigo: #ff6b5b;
  --ok: #5fd68f;
  --metal: #a9bbd0;
  --cristal: #5ad1ff;
  --combustivel: #ff9a4a;
  --energia: #ffd84a;
  --raio: 10px;
  --titulo: 'Rajdhani', 'Segoe UI', sans-serif;
  --corpo: 'IBM Plex Sans', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--corpo);
  font-size: 14px;
  color: var(--texto);
  background-color: var(--fundo);
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 34%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 72%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 82%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 8%, #fff6 50%, transparent 51%),
    radial-gradient(900px 600px at 85% -10%, #1b2a5a55, transparent 70%),
    radial-gradient(700px 500px at -10% 110%, #3a1d4a44, transparent 70%);
  background-attachment: fixed;
  background-size: 400px 400px, 520px 520px, 610px 610px, 470px 470px, 380px 380px, auto, auto;
  min-height: 100vh;
}
a { color: var(--ciano); text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--titulo); font-weight: 700; letter-spacing: .02em; margin: 0; }
.miudo { color: var(--texto-2); font-size: 12px; }
.pos { color: var(--ok); }
.neg { color: var(--perigo) !important; }
.oculto { display: none !important; }

/* ---------- Botões / formulários ---------- */
.btn {
  font-family: var(--titulo); font-weight: 700; font-size: 15px; letter-spacing: .04em;
  background: var(--painel-2); color: var(--texto); border: 1px solid var(--borda-forte);
  border-radius: 8px; padding: 8px 16px; cursor: pointer; display: inline-block; text-align: center;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover:not(:disabled) { border-color: var(--ouro); color: var(--ouro); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.principal { background: linear-gradient(180deg, var(--ouro), var(--ouro-esc)); color: #1a1205; border-color: var(--ouro); width: 100%; }
.btn.principal:hover { color: #1a1205; filter: brightness(1.08); }
.link { background: none; border: 0; color: var(--texto-2); cursor: pointer; font-size: 12px; padding: 0; text-decoration: underline; }
.link:hover { color: var(--perigo); }

label { display: block; font-size: 12px; color: var(--texto-2); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .06em; }
input {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit; font-size: 15px;
  color: var(--texto); background: #070d19; border: 1px solid var(--borda); border-radius: 8px; text-transform: none; letter-spacing: 0;
}
input:focus { outline: none; border-color: var(--ciano); }

.alerta { padding: 10px 12px; border-radius: 8px; margin: 12px 0; font-size: 13px; }
.alerta.erro { background: #ff6b5b1a; border: 1px solid #ff6b5b55; color: #ffb3aa; }
.alerta.ok { background: #5fd68f1a; border: 1px solid #5fd68f55; color: #b4f0cb; }

/* ---------- Entrada ---------- */
.tela-entrada { display: grid; place-items: center; padding: 24px 16px; }
.caixa-entrada {
  width: 100%; max-width: 400px; background: #0d1525e6; border: 1px solid var(--borda);
  border-radius: 16px; padding: 32px 28px; backdrop-filter: blur(6px);
  box-shadow: 0 30px 80px #0008;
}
.logo { font-family: var(--titulo); font-size: 44px; letter-spacing: .28em; color: var(--ouro); text-align: center; margin: 0; }
.logo.pequeno { font-size: 22px; letter-spacing: .22em; text-align: left; }
.sub { text-align: center; color: var(--texto-2); margin: 4px 0 24px; }
.abas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 18px; background: #070d19; padding: 4px; border-radius: 10px; }
.aba { font-family: var(--titulo); font-weight: 700; font-size: 15px; background: none; border: 0; color: var(--texto-2); padding: 8px; border-radius: 7px; cursor: pointer; }
.aba.ativa { background: var(--painel-2); color: var(--texto); }
.rodape-entrada { text-align: center; color: var(--texto-2); font-size: 12px; margin: 18px 0 0; }

/* ---------- Topo ---------- */
.topo {
  display: flex; align-items: center; gap: 24px; padding: 12px 24px;
  background: #080e1bee; border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(6px);
}
.topo nav { display: flex; gap: 4px; flex: 1; }
.topo nav a { font-family: var(--titulo); font-weight: 600; font-size: 16px; color: var(--texto-2); padding: 6px 12px; border-radius: 6px; }
.topo nav a:hover { color: var(--texto); }
.topo nav a.ativo { color: var(--ouro); background: #f2b33d14; }
.cmd { display: flex; align-items: center; gap: 10px; }
.cmd-nome { font-weight: 600; }
.cmd-nivel { font-family: var(--titulo); font-weight: 700; background: var(--ouro); color: #1a1205; padding: 1px 8px; border-radius: 5px; }
.sair { color: var(--texto-2); font-size: 13px; }

/* ---------- Barra de recursos ---------- */
.barra-recursos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px 24px 0; max-width: 1280px; margin: 0 auto; }
.rec { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 14px; display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 2px; border-top: 3px solid var(--c); }
.rec-metal { --c: var(--metal); } .rec-cristal { --c: var(--cristal); } .rec-combustivel { --c: var(--combustivel); } .rec-energia { --c: var(--energia); }
.rec-nome { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-2); grid-column: 1 / -1; }
.rec-valor { font-family: var(--titulo); font-size: 24px; font-weight: 700; color: var(--c); font-variant-numeric: tabular-nums; }
.rec-valor.cheio { color: var(--perigo); }
.rec-taxa { font-size: 12px; color: var(--texto-2); }
.rec-cap { grid-column: 1 / -1; height: 3px; background: #ffffff10; border-radius: 2px; margin-top: 6px; overflow: hidden; }
.rec-cap i { display: block; height: 100%; background: var(--c); opacity: .7; width: 0; transition: width .5s; }

/* ---------- Tela do planeta ---------- */
.jogo { display: grid; grid-template-columns: 300px 1fr; gap: 16px; padding: 16px 24px 40px; max-width: 1280px; margin: 0 auto; }
.lateral { display: flex; flex-direction: column; gap: 16px; }
.painel { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; }
.painel h3 { font-size: 16px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; }

.planeta-info { text-align: center; }
.planeta-orbe {
  --cor: #888; width: 120px; height: 120px; margin: 4px auto 14px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--cor) 60%, white), var(--cor) 45%, color-mix(in srgb, var(--cor) 30%, black) 100%);
  box-shadow: 0 0 40px color-mix(in srgb, var(--cor) 40%, transparent), inset -14px -10px 30px #0007;
}
.planeta-info h2 { font-size: 22px; }
.coords { color: var(--texto-2); font-size: 12px; margin: 2px 0 14px; }
.dados { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; text-align: left; margin: 0; font-size: 13px; }
.dados dt { color: var(--texto-2); }
.dados dd { margin: 0; text-align: right; }

.xp { height: 8px; background: #ffffff10; border-radius: 4px; overflow: hidden; }
.xp i { display: block; height: 100%; background: linear-gradient(90deg, var(--ouro-esc), var(--ouro)); width: 0; transition: width .6s; }
.painel p.miudo { margin: 8px 0 0; }

.fila { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fila li { background: var(--painel-2); border: 1px solid var(--borda); border-radius: 8px; padding: 10px; }
.fila li.vazio { color: var(--texto-2); font-size: 13px; text-align: center; border-style: dashed; background: none; }
.fila-topo { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.progresso { height: 4px; background: #ffffff10; border-radius: 2px; margin-top: 8px; overflow: hidden; }
.progresso i { display: block; height: 100%; background: var(--ciano); width: 0; transition: width 1s linear; }

.grade-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; align-content: start; }
.card { display: grid; grid-template-columns: 52px 1fr; gap: 0 14px; background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px; }
.card:hover { border-color: var(--borda-forte); }
.card-icone {
  width: 52px; height: 52px; display: grid; place-items: center; font-family: var(--titulo); font-weight: 700; font-size: 18px;
  color: var(--ouro); background: linear-gradient(145deg, #1b2a45, #0b1222); border: 1px solid var(--borda-forte);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.card.novo .card-icone { color: var(--texto-2); }
.card header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card h4 { font-size: 17px; }
.nivel { font-family: var(--titulo); font-weight: 700; color: var(--ouro); }
.tag { font-size: 11px; background: #45c8e61f; color: var(--ciano); padding: 1px 7px; border-radius: 10px; }
.tag-meu { background: #f2b33d22; color: var(--ouro); }
.card p { color: var(--texto-2); font-size: 13px; margin: 4px 0 10px; line-height: 1.4; }
.custos { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
.custo::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; background: var(--c); }
.custo-metal { --c: var(--metal); } .custo-cristal { --c: var(--cristal); } .custo-combustivel { --c: var(--combustivel); }
.custo.falta { color: var(--perigo); }
.tempo { color: var(--texto-2); margin-left: auto; }
.tempo::before { content: '⧗ '; }
.card-acao { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borda); }
.card-acao .btn { min-width: 120px; }
.motivo { font-size: 12px; color: var(--texto-2); }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--painel-2); border: 1px solid var(--ok); color: var(--texto); padding: 10px 18px; border-radius: 8px;
  transition: opacity .2s, transform .2s; z-index: 50; box-shadow: 0 10px 30px #0008;
}
.toast.visivel { opacity: 1; transform: translate(-50%, 0); }
.toast.erro { border-color: var(--perigo); }

/* ---------- Galáxia ---------- */
.galaxia, .ranking, .relatorios { max-width: 1100px; margin: 0 auto; padding: 20px 24px 40px; }
.nav-universo, .nav-sistemas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.nav-universo a, .nav-sistemas a {
  font-family: var(--titulo); font-weight: 600; font-size: 15px; padding: 7px 14px; border-radius: 8px;
  background: var(--painel); border: 1px solid var(--borda); color: var(--texto-2); display: flex; align-items: center; gap: 8px;
}
.nav-universo a.ativo, .nav-sistemas a.ativo { color: var(--ouro); border-color: var(--ouro); }
.nav-universo a.trancado::after { content: '🔒'; font-size: 11px; opacity: .7; }

.estrela { width: 10px; height: 10px; border-radius: 50%; background: var(--ce); box-shadow: 0 0 8px var(--ce); flex-shrink: 0; }
.estrela-amarela { --ce: #ffd35c; } .estrela-vermelha { --ce: #ff6a4a; } .estrela-azul { --ce: #7cb7ff; }
.estrela-branca { --ce: #f2f6ff; } .estrela-binaria { --ce: #ffb36b; }
.sistema-cabecalho { display: flex; align-items: center; gap: 20px; margin: 20px 0; }
.sistema-cabecalho h1 { font-size: 32px; }
.sistema-cabecalho p { color: var(--texto-2); margin: 2px 0 0; }
.estrela-grande { width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, var(--ce) 40%, transparent 72%); box-shadow: 0 0 60px var(--ce); flex-shrink: 0; }

.orbitas { display: flex; flex-direction: column; gap: 4px; }
.orbita {
  display: grid; grid-template-columns: 32px 48px 1fr auto; align-items: center; gap: 12px;
  background: var(--painel); border: 1px solid var(--borda); border-radius: 8px; padding: 8px 14px;
}
.orbita.ocupado { background: var(--painel-2); }
.orbita.meu { border-color: var(--ouro); box-shadow: inset 3px 0 0 var(--ouro); }
.orbita .pos { font-family: var(--titulo); font-weight: 700; color: var(--texto-2); text-align: right; }
.mini-planeta {
  --tam: 22px; width: var(--tam); height: var(--tam); border-radius: 50%; justify-self: center;
  background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--cor) 55%, white), var(--cor) 50%, color-mix(in srgb, var(--cor) 35%, black));
}
.orbita-info { display: flex; flex-direction: column; }
.orbita-dono { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.livre { color: var(--ok); }
.trancado-aviso { text-align: center; padding: 48px 24px; }
.trancado-aviso p { color: var(--texto-2); max-width: 480px; margin: 12px auto 20px; }

/* ---------- Ranking ---------- */
.ranking h1 { font-size: 28px; margin-bottom: 16px; }
.tabela { width: 100%; border-collapse: collapse; background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.tabela th, .tabela td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--borda); }
.tabela th { font-family: var(--titulo); color: var(--texto-2); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.tabela tr.meu td { color: var(--ouro); }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .jogo { grid-template-columns: 1fr; padding: 12px 16px 32px; }
  .barra-recursos { grid-template-columns: repeat(2, 1fr); padding: 12px 16px 0; }
  .grade-cards { grid-template-columns: 1fr; }
  .topo { flex-wrap: wrap; gap: 8px 16px; padding: 10px 16px; }
  .topo nav { order: 3; flex-basis: 100%; }
  .galaxia, .ranking, .relatorios { padding: 16px; }
  .orbita { grid-template-columns: 24px 36px 1fr; }
  .orbita-dono { grid-column: 2 / -1; align-items: flex-start; flex-direction: row; gap: 8px; }
}

/* ---------- v2: abas, seletores, cartões extras ---------- */
select {
  font: inherit; font-size: 13px; color: var(--texto); background: #070d19; border: 1px solid var(--borda);
  border-radius: 7px; padding: 5px 8px; max-width: 220px;
}
select:focus { outline: none; border-color: var(--ciano); }
.idioma-canto { position: fixed; top: 16px; right: 16px; }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--ciano); color: #04121a; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; font-family: var(--corpo); }
.badge.perigo { background: var(--perigo); color: #fff; }

.conteudo { min-width: 0; }
.abas-jogo { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--borda); overflow-x: auto; }
.abas-jogo button {
  font-family: var(--titulo); font-weight: 700; font-size: 16px; background: none; border: 0; color: var(--texto-2);
  padding: 8px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.abas-jogo button:hover { color: var(--texto); }
.abas-jogo button.ativa { color: var(--ouro); border-bottom-color: var(--ouro); }
.painel.faixa { margin-bottom: 12px; }
.painel.faixa .fila { gap: 8px; }
.aviso-vazio { text-align: center; color: var(--texto-2); padding: 28px 16px; line-height: 1.6; }
.contagem { display: block; margin-top: 6px; color: var(--texto-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.link.cancelar { margin-top: 4px; }
.req { font-size: 12px !important; color: var(--ciano) !important; margin-top: -4px !important; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 10px; }
.stats div { background: var(--painel-2); border-radius: 6px; padding: 5px 7px; }
.stats dt { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); }
.stats dd { margin: 0; font-family: var(--titulo); font-weight: 700; font-size: 15px; }
input.qtd { width: 80px; margin: 0; padding: 7px 8px; font-size: 14px; display: inline-block; }
.card-acao { flex-wrap: wrap; }

.lista-frotas { display: flex; flex-direction: column; gap: 10px; }
.frota header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.frota p { margin: 4px 0; }
.frota.hostil { border-color: var(--perigo); box-shadow: inset 3px 0 0 var(--perigo); }
.tag-perigo { background: #ff6b5b26; color: var(--perigo); }

/* ---------- Galáxia animada ---------- */
.gal-barra { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.vista-toggle { display: flex; background: var(--painel); border: 1px solid var(--borda); border-radius: 8px; padding: 3px; }
.vista-toggle button { font-family: var(--titulo); font-weight: 600; font-size: 14px; background: none; border: 0; color: var(--texto-2); padding: 5px 14px; border-radius: 6px; cursor: pointer; }
.vista-toggle button.ativo { background: var(--painel-2); color: var(--ouro); }
.galaxia { max-width: 1400px; }
.mapa-wrap {
  position: relative; height: min(78vh, 900px); min-height: 420px; border: 1px solid var(--borda); border-radius: 14px; overflow: hidden;
  background: radial-gradient(ellipse at center, #0c1430 0%, #050811 70%);
}
#ceu { display: block; touch-action: none; cursor: grab; }
#ceu:active { cursor: grabbing; }
.mapa-info { position: absolute; top: 14px; left: 18px; pointer-events: none; }
.mapa-info h1 { font-size: 28px; }
.mapa-info p { margin: 2px 0 0; }
.mapa-ctrl { position: absolute; top: 14px; right: 14px; display: flex; gap: 4px; }
.mapa-ctrl button { background: #0d1525dd; border: 1px solid var(--borda-forte); color: var(--texto); border-radius: 7px; min-width: 34px; height: 32px; cursor: pointer; font-family: var(--titulo); font-weight: 700; font-size: 15px; padding: 0 10px; }
.mapa-ctrl button:hover { border-color: var(--ouro); color: var(--ouro); }
.mapa-dica { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; margin: 0; color: var(--texto-2); font-size: 12px; pointer-events: none; padding: 0 16px; }
.tooltip { position: absolute; pointer-events: none; background: #0d1525f0; border: 1px solid var(--borda-forte); border-radius: 8px; padding: 6px 10px; font-size: 12px; line-height: 1.5; max-width: 240px; z-index: 5; }
.mini-campo { width: 26px; height: 18px; justify-self: center; background:
  radial-gradient(circle at 20% 50%, var(--cor) 2px, transparent 3px), radial-gradient(circle at 50% 30%, var(--cor) 2.5px, transparent 3.5px),
  radial-gradient(circle at 78% 60%, var(--cor) 2px, transparent 3px), radial-gradient(circle at 40% 80%, var(--cor) 1.5px, transparent 2.5px); }
.mini-campo.grande { width: 56px; height: 40px; transform: scale(1.6); transform-origin: left center; margin-right: 30px; }
.mini-planeta.grande { flex-shrink: 0; }
.orbita[data-abrir] { cursor: pointer; }
.orbita[data-abrir]:hover { border-color: var(--borda-forte); }
.sub-titulo { margin: 24px 0 10px; font-size: 18px; }

/* ---------- Modal ---------- */
.modal-fundo { position: fixed; inset: 0; background: #02050ccc; backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 40; padding: 16px; }
.modal {
  position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--painel); border: 1px solid var(--borda-forte); border-radius: 14px; padding: 22px; box-shadow: 0 30px 80px #000a;
}
.modal-fechar { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--texto-2); font-size: 26px; cursor: pointer; line-height: 1; }
.modal-fechar:hover { color: var(--texto); }
.modal-topo { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.modal-topo h2 { font-size: 24px; }
.modal-topo p { margin: 2px 0 0; }
.modal .dados { margin-bottom: 14px; }
.modal > div > .btn { width: 100%; margin-bottom: 8px; }
.barra-campo { height: 6px; background: #ffffff10; border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.barra-campo i { display: block; height: 100%; }
.envio { border-top: 1px solid var(--borda); padding-top: 14px; margin-top: 6px; }
.envio h3 { font-size: 18px; margin-bottom: 10px; color: var(--ouro); }
.envio label.linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--texto); margin-bottom: 8px; }
.envio label.linha input { width: 96px; margin: 0; padding: 6px 8px; font-size: 14px; }
.envio label.linha select { max-width: 260px; }
.nave-ctrl { display: flex; align-items: center; gap: 8px; }
.rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-2); margin: 12px 0 6px; }
.carga { border: 1px solid var(--borda); border-radius: 8px; padding: 8px 12px 2px; margin: 12px 0; }
.carga legend { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-2); padding: 0 4px; }
.previa { background: var(--painel-2); border-radius: 8px; padding: 10px 12px; margin: 12px 0; min-height: 20px; }
.previa:empty { display: none; }
.previa .dados { margin: 0; }
.erro-txt { color: #ffb3aa; font-size: 13px; margin: 8px 0 0; }

/* ---------- Relatórios ---------- */
.relatorios h1 { font-size: 28px; margin-bottom: 16px; }
.relatorio { margin-bottom: 8px; padding: 0; border-left: 3px solid var(--borda-forte); }
.relatorio.bom { border-left-color: var(--ok); }
.relatorio.ruim { border-left-color: var(--perigo); }
.relatorio.novo summary .rel-titulo::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ciano); margin-left: 8px; vertical-align: middle; }
.relatorio summary { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
.relatorio summary::-webkit-details-marker { display: none; }
.rel-corpo { padding: 0 16px 14px; }
.rel-corpo p { margin: 6px 0; }
.rel-lados { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.rel-lados h4 { font-size: 15px; margin-bottom: 6px; }
.tabela.mini th, .tabela.mini td { padding: 5px 8px; font-size: 12px; }

@media (max-width: 900px) {
  .topo .cmd { flex-wrap: wrap; }
  .sel-planeta { max-width: 150px; }
  .mapa-wrap { height: 70vh; }
  .mapa-info h1 { font-size: 20px; }
  .rel-lados { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
.rel-corpo .custos { display: inline-flex; vertical-align: middle; }
@media (max-width: 600px) {
  .mapa-ctrl { top: auto; bottom: 34px; }
  .mapa-info h1 { font-size: 18px; }
  .mapa-info p { max-width: 70vw; }
  .gal-barra { flex-direction: column-reverse; }
}

/* ---------- Pontos de pesquisa ---------- */
.ponto-ico { color: #b48cff; }
.custo-ponto { color: #c9adff; font-weight: 600; }
.pontos-faixa { display: flex; align-items: center; gap: 18px; }
.pontos-faixa h3 { margin-bottom: 4px; }
.pontos-faixa p { margin: 0; }
.pontos-grande { display: flex; align-items: baseline; gap: 6px; font-family: var(--titulo); padding: 6px 16px; border-radius: 10px; background: #b48cff14; border: 1px solid #b48cff44; flex-shrink: 0; }
.pontos-grande b { font-size: 32px; color: #d9c6ff; line-height: 1; }
.pontos-grande .ponto-ico { font-size: 20px; }
.pontos-grande.zerado { background: #ff6b5b10; border-color: #ff6b5b44; }
.pontos-grande.zerado b { color: var(--perigo); }

/* ---------- Árvore de pesquisa ---------- */
.arvore-painel { padding: 12px 0 0; margin-bottom: 12px; }
.arvore-legenda { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 16px 8px; font-size: 12px; color: var(--texto-2); }
.arvore-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--cat); margin-right: 6px; vertical-align: -1px; }
.cat-economia { --cat: #f2b33d; } .cat-militar { --cat: #ff6b5b; } .cat-exploracao { --cat: #45c8e6; } .cat-velocidade { --cat: #b48cff; }
.arvore-wrap { overflow-x: auto; padding: 8px 16px 16px; }
.arvore { position: relative; display: flex; gap: 56px; min-width: min-content; }
.arv-linhas { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.arv-linhas path { fill: none; stroke: #2c3f63; stroke-width: 1.5; }
.arv-linhas path.ok { stroke: #45c8e666; }
.arv-linhas path.ativo { stroke: var(--ouro); stroke-width: 2; }
.arv-col { display: flex; flex-direction: column; justify-content: center; gap: 10px; position: relative; z-index: 1; }
.no-tech {
  display: flex; align-items: center; gap: 10px; width: 200px; padding: 8px 10px; text-align: left; cursor: pointer; position: relative;
  background: var(--painel-2); border: 1px solid var(--borda-forte); border-left: 3px solid var(--cat); border-radius: 9px; color: var(--texto); font: inherit;
  transition: border-color .15s, transform .1s;
}
.no-tech:hover { transform: translateY(-1px); border-color: var(--cat); }
.no-tech.sel { box-shadow: 0 0 0 2px var(--ouro); }
.no-sigla {
  flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; font-family: var(--titulo); font-weight: 700; font-size: 14px;
  color: var(--cat, var(--ouro)); background: #070d19; border: 1px solid var(--borda-forte);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.no-sigla.grande { width: 48px; height: 48px; font-size: 18px; }
.no-txt { display: flex; flex-direction: column; min-width: 0; }
.no-txt b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.no-txt small { font-size: 11px; color: var(--texto-2); }
.no-tech.est-trancada { opacity: .45; border-left-color: var(--borda-forte); }
.no-tech.est-trancada .no-sigla { color: var(--texto-2); }
.no-tech.est-disponivel { background: linear-gradient(90deg, color-mix(in srgb, var(--cat) 12%, var(--painel-2)), var(--painel-2)); }
.no-tech.est-maximo .no-txt small { color: var(--ok); }
.no-tech.est-andamento { border-color: var(--ciano); }
.no-pulso { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--ciano); animation: pulso 1.4s infinite; }
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.arv-detalhe { margin-bottom: 12px; }
.arv-detalhe p { margin: 6px 0; line-height: 1.5; }
.arv-detalhe h4 { font-size: 14px; margin: 12px 0 6px; color: var(--texto-2); text-transform: uppercase; letter-spacing: .06em; }
.det-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.det-topo h3 { font-size: 20px; margin: 0; }
.det-topo p { margin: 0; }
.det-efeito { color: var(--ciano); }
.det-reqs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.det-reqs li { font-size: 12px; padding: 3px 9px; border-radius: 12px; background: var(--painel-2); border: 1px solid var(--borda); }
.det-reqs li.ok { color: var(--ok); border-color: #5fd68f44; }
.det-reqs li.ok::before { content: '✓ '; }
.det-reqs li.falta { color: #ffb3aa; border-color: #ff6b5b44; }
.det-reqs li.falta::before { content: '✕ '; }
.det-custo { margin-top: 12px; }
@media (max-width: 900px) { .no-tech { width: 170px; } .arvore { gap: 40px; } }