/* O painel é de tela larga: tabela densa, texto pequeno e o âmbar só
   onde há decisão a tomar. */
:root {
  --fundo: #111211;
  --caixa: #1b1c1b;
  --linha: #2a2c2a;
  --texto: #ecebe8;
  --fraco: #9a9a95;
  --ambar: #f0a500;
  --erro: #e05252;
  --bom: #4caf7d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--linha);
}

header h1 { font-size: 16px; margin: 0; letter-spacing: .02em; }
header .quem { margin-left: auto; color: var(--fraco); font-size: 13px; }

nav { display: flex; gap: 2px; padding: 0 18px; border-bottom: 1px solid var(--linha); }
nav button {
  background: none; border: none; color: var(--fraco);
  padding: 10px 14px; cursor: pointer; font-size: 13px;
  border-bottom: 2px solid transparent;
}
nav button.ativa { color: var(--texto); border-bottom-color: var(--ambar); }

main { padding: 20px 22px 60px; }
section { display: none; }
section.ativa { display: block; }

h2 { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
p.explica { color: var(--fraco); margin: 0 0 16px; max-width: 70ch; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { color: var(--fraco); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:hover { background: var(--caixa); }
td.acoes { white-space: nowrap; }

button.acao {
  background: var(--caixa); color: var(--texto);
  border: 1px solid var(--linha); border-radius: 4px;
  padding: 5px 10px; margin-right: 6px; cursor: pointer; font-size: 12px;
}
button.acao:hover { border-color: var(--ambar); color: var(--ambar); }
button.acao.grave:hover { border-color: var(--erro); color: var(--erro); }

.marca { font-size: 11px; padding: 2px 7px; border-radius: 10px; border: 1px solid var(--linha); color: var(--fraco); }
.marca.pendente { color: var(--ambar); border-color: var(--ambar); }
.marca.suspenso, .marca.banido, .marca.recusado { color: var(--erro); border-color: var(--erro); }
.marca.aprovado, .marca.verificado { color: var(--bom); border-color: var(--bom); }

.vazio { color: var(--fraco); padding: 24px 0; }

#entrar {
  max-width: 320px; margin: 12vh auto; display: flex; flex-direction: column; gap: 10px;
}
#entrar h1 { font-size: 18px; margin: 0 0 6px; }
#entrar input {
  background: var(--caixa); border: 1px solid var(--linha); border-radius: 4px;
  color: var(--texto); padding: 10px 12px; font-size: 14px;
}
#entrar button {
  background: var(--ambar); color: #1a1600; border: none; border-radius: 4px;
  padding: 11px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.recado { color: var(--erro); min-height: 18px; font-size: 13px; }
.recado.ok { color: var(--bom); }