/* Estilo único das três telas. Deliberadamente simples: é ferramenta interna, não produto. */
:root {
  --fundo: #0b0e14; --painel: #141922; --borda: #232b39;
  --texto: #e6e9ef; --fraco: #8b93a7; --marca: #4c8dff;
  --ok: #3ddc84; --alerta: #ffb020; --erro: #ff5c5c;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, sans-serif;
}
a { color: var(--marca); }
code, pre, .mono { font-family: ui-monospace, "JetBrains Mono", monospace; }

.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 22px; border-bottom: 1px solid var(--borda); background: var(--painel);
  position: sticky; top: 0; z-index: 10;
}
.marca { font-weight: 800; letter-spacing: -0.3px; }
.marca span { color: var(--marca); }
.abas { display: flex; gap: 4px; }
.abas a {
  padding: 7px 14px; border-radius: 8px; text-decoration: none;
  color: var(--fraco); font-size: 13px; font-weight: 600;
}
.abas a.ativo { background: var(--marca); color: #fff; }
.conteudo { max-width: 1100px; margin: 0 auto; padding: 22px; }

.cartoes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cartao { background: var(--painel); border: 1px solid var(--borda); border-radius: 12px; padding: 16px; }
.cartao h3 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--fraco); }
.numero { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }

.bolinha { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }
.b-ok { background: var(--ok); } .b-alerta { background: var(--alerta); } .b-erro { background: var(--erro); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--fraco); padding: 8px 12px; }
td { padding: 9px 12px; border-top: 1px solid var(--borda); }
.secao { margin-top: 28px; }
.secao h2 { font-size: 15px; margin: 0 0 12px; }

button {
  font: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
  background: var(--marca); color: #fff; border: 0; border-radius: 9px; padding: 9px 16px;
}
button.fantasma { background: transparent; color: var(--fraco); border: 1px solid var(--borda); }
button.perigo { background: var(--erro); }
button:disabled { opacity: .45; cursor: not-allowed; }

textarea, input {
  width: 100%; font: inherit; background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 10px; padding: 11px 13px;
}
textarea { resize: vertical; }
.saida {
  background: #05070b; border: 1px solid var(--borda); border-radius: 10px;
  padding: 14px; font-family: ui-monospace, monospace; font-size: 12.5px;
  white-space: pre-wrap; word-break: break-word; max-height: 460px; overflow-y: auto;
}
.aviso { border-radius: 10px; padding: 12px 14px; font-size: 14px; }
.aviso-alerta { background: rgba(255,176,32,.1); border: 1px solid rgba(255,176,32,.35); color: #ffd27d; }
.aviso-erro { background: rgba(255,92,92,.1); border: 1px solid rgba(255,92,92,.35); color: #ff9d9d; }
.fraco { color: var(--fraco); font-size: 13px; }