:root {
  --bg: #f6f7f9;
  --card: #fff;
  --txt: #1c2024;
  --fraco: #6b7280;
  --linha: #e3e6ea;
  --azul: #1f6feb;
  --verde: #17803d;
  --amarelo: #a16207;
  --vermelho: #b42318;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171a;
    --card: #1c2024;
    --txt: #e8eaed;
    --fraco: #9aa3ad;
    --linha: #2c3238;
    --azul: #4c8dff;
    --verde: #3fb950;
    --amarelo: #d29922;
    --vermelho: #f85149;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

header {
  padding: 14px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--linha);
}
header .sub { color: var(--fraco); font-size: 13px; margin-left: 8px; }

nav {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--linha);
  font-size: 14px;
}
nav .spacer { flex: 1; }
nav a { color: var(--azul); text-decoration: none; }
nav a:hover { text-decoration: underline; }
nav .quem { color: var(--fraco); }
nav .quem em { font-style: normal; opacity: .7; }

main { max-width: 860px; margin: 0 auto; padding: 20px; }
footer { max-width: 860px; margin: 0 auto; padding: 8px 20px 32px; color: var(--fraco); font-size: 12px; }

h1 { font-size: 20px; margin: 0 0 14px; }
h2 { font-size: 16px; margin: 0 0 10px; }

.card {
  background: var(--card);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 16px;
}
.card.estreito { max-width: 420px; }
.card .linha { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.card .linha h1, .card .linha h2 { margin: 0; }

label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--fraco); }
input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;
  font: inherit;
  color: var(--txt);
  background: var(--bg);
  border: 1px solid var(--linha);
  border-radius: 6px;
}
input:focus { outline: 2px solid var(--azul); outline-offset: -1px; }

button, .botao {
  display: inline-block;
  padding: 9px 14px;
  font: inherit;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: var(--bg);
  color: var(--txt);
  cursor: pointer;
  text-decoration: none;
}
button:hover:not(:disabled), .botao:hover { border-color: var(--azul); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primario { background: var(--azul); border-color: var(--azul); color: #fff; }
button.perigo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
button.perigo-leve { color: var(--vermelho); }
button.link { background: none; border: none; color: var(--azul); padding: 0; text-decoration: underline; }

form.inline { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.sub-form { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--linha); }

dl { margin: 0; }
dl.grade { display: grid; grid-template-columns: 180px 1fr; gap: 6px 12px; }
dt { color: var(--fraco); font-size: 13px; }
dd { margin: 0; }
.banda dl { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; }

code {
  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 4px;
}

.badge {
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid;
}
.badge.on { color: var(--verde); border-color: var(--verde); }
.badge.off { color: var(--fraco); border-color: var(--linha); }

.aviso {
  padding: 11px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid;
  font-size: 14px;
}
.aviso.ok { color: var(--verde); border-color: var(--verde); }
.aviso.atencao { color: var(--amarelo); border-color: var(--amarelo); }
.aviso.erro { color: var(--vermelho); border-color: var(--vermelho); }

table.lista {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--linha);
  border-radius: 10px;
  overflow: hidden;
  font-size: 14px;
}
table.lista th, table.lista td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--linha);
  vertical-align: top;
}
table.lista th { color: var(--fraco); font-weight: 600; font-size: 13px; }
table.lista tr:last-child td { border-bottom: none; }
table.lista a { color: var(--azul); text-decoration: none; }

.fraco { color: var(--fraco); font-size: 13px; }
.ok-txt { color: var(--verde); }
.at-txt { color: var(--amarelo); }
.err-txt { color: var(--vermelho); }

/* A auditoria e a unica tabela que pode ficar larga: rola dentro de si mesma
   em vez de fazer a pagina rolar de lado. */
main > table.lista { display: block; overflow-x: auto; }

/* Realce do trecho digitado na busca ao vivo. O mark padrao do navegador e
   amarelo com texto preto, que no tema escuro fica ilegivel — daqui sai o
   contraste certo nos dois temas. */
mark {
  background: transparent;
  color: var(--azul);
  font-weight: 700;
  border-radius: 2px;
}

/* Linha de status da busca ("3 ONUs", "buscando…"). Ocupa altura fixa para a
   tabela nao pular de lugar a cada tecla. */
#estado-busca {
  min-height: 20px;
  margin: -4px 0 10px;
}