:root {
  --tinta: #101418;
  --tinta-fraca: #5b6570;
  --linha: #e2e6ea;
  --fundo: #ffffff;
  --fundo-fraco: #f7f8fa;
  --acento: #1b4dff;
  --erro: #b3261e;
  --ok: #146c43;
  --aviso: #8a5a00;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #e8ebee; --tinta-fraca: #9aa4ae; --linha: #2a2f36;
    --fundo: #101418; --fundo-fraco: #171c22; --acento: #7d9bff;
    --erro: #ef8a83; --ok: #6fd08c; --aviso: #e0b155;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; color: var(--tinta); background: var(--fundo);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--acento); }

.topo {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 20px; border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; background: var(--fundo); z-index: 5;
}
.marca { font-weight: 600; }
.topo nav { display: flex; gap: 16px; }
/* `display: flex` acima ganha a regra `[hidden] { display: none }` do browser,
   por especificidade. Sem isto, `nav.hidden = true` no ecrã de entrada punha o
   atributo mas deixava os links visíveis -- e a apontar para ecrãs que exigem
   sessão. Medido: hidden=true, offsetParent≠null. */
.topo nav[hidden] { display: none; }
.topo nav a { text-decoration: none; color: var(--tinta-fraca); padding: 4px 0; }
.topo nav a.activo { color: var(--tinta); box-shadow: inset 0 -2px 0 var(--acento); }
.sessao { margin-left: auto; color: var(--tinta-fraca); font-size: 13px; }

main { max-width: 1000px; margin: 0 auto; padding: 24px 20px 64px; }
h1 { font-size: 20px; margin: 0 0 4px; }
.sub { color: var(--tinta-fraca); margin: 0 0 20px; }
.vazio { color: var(--tinta-fraca); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { color: var(--tinta-fraca); font-weight: 500; font-size: 13px; }
tbody tr:hover { background: var(--fundo-fraco); }

.tabela-rolavel { overflow-x: auto; }

.cartao {
  border: 1px solid var(--linha); border-radius: 10px;
  padding: 16px; margin-bottom: 12px; background: var(--fundo-fraco);
}

label { display: block; margin: 14px 0 4px; font-size: 13px; color: var(--tinta-fraca); }
input, textarea, select {
  width: 100%; padding: 9px 11px; font: inherit; color: var(--tinta);
  background: var(--fundo); border: 1px solid var(--linha); border-radius: 7px;
}
textarea { min-height: 120px; resize: vertical; }

button {
  font: inherit; padding: 9px 16px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--linha); background: var(--fundo); color: var(--tinta);
}
button.principal { background: var(--acento); border-color: var(--acento); color: #fff; }
button.perigo { color: var(--erro); border-color: var(--erro); }
button:disabled { opacity: .5; cursor: not-allowed; }
.botoes { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

.etiqueta {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; border: 1px solid var(--linha); color: var(--tinta-fraca);
}
.etiqueta.publicado { color: var(--ok); border-color: currentColor; }
.etiqueta.falhou { color: var(--erro); border-color: currentColor; }
.etiqueta.agendado { color: var(--acento); border-color: currentColor; }
.etiqueta.a_publicar { color: var(--aviso); border-color: currentColor; }

.contador { font-variant-numeric: tabular-nums; color: var(--tinta-fraca); font-size: 13px; }
.contador.excedido { color: var(--erro); }

.aviso {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px;
  padding: 12px 18px; border-radius: 8px; max-width: 90vw;
  background: var(--tinta); color: var(--fundo); font-size: 14px;
}
.aviso.mau { background: var(--erro); color: #fff; }