:root {
  --fundo: #f6f5f8;
  --superficie: #ffffff;
  --borda: #e3e0ea;
  --texto: #1d1a24;
  --mudo: #6e6878;
  --pri: #7c3aed;
  --pri-texto: #ffffff;
  --verde: #15803d;
  --verde-fundo: #dcfce7;
  --amarelo: #a16207;
  --amarelo-fundo: #fef3c7;
  --vermelho: #b91c1c;
  --vermelho-fundo: #fee2e2;
  --raio: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #121016;
    --superficie: #1c1922;
    --borda: #2e2a37;
    --texto: #ece9f1;
    --mudo: #9d97a8;
    --pri: #a78bfa;
    --pri-texto: #121016;
    --verde: #4ade80;
    --verde-fundo: #12301e;
    --amarelo: #facc15;
    --amarelo-fundo: #3a2f0b;
    --vermelho: #f87171;
    --vermelho-fundo: #3b1414;
  }
}

* { box-sizing: border-box; }
/* "hidden" sempre vence: um display:grid em label fazia campos escondidos aparecerem (bug do "Partes"). */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--pri); }
code { background: var(--borda); padding: 1px 6px; border-radius: 6px; }
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.15rem; margin: 0; }
h3 { font-size: 1rem; margin: 0 0 6px; }
.mudo { color: var(--mudo); }

.topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px;
  background: var(--superficie); border-bottom: 1px solid var(--borda);
}
.marca { font-weight: 700; color: var(--texto); text-decoration: none; white-space: nowrap; }
.abas { display: flex; gap: 4px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.abas a, .sino {
  padding: 6px 12px; border-radius: 999px; color: var(--mudo);
  text-decoration: none; white-space: nowrap;
}
.abas a.ativa, .sino.ativa { background: var(--borda); color: var(--texto); }
.sino { position: relative; font-size: 1.15rem; padding: 4px 10px; }
.contador {
  position: absolute; top: -2px; right: -2px;
  background: var(--vermelho); color: #fff; font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  display: grid; place-items: center;
}

main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 40px; display: grid; gap: 16px; }
/* Itens de grid não encolhem abaixo do conteúdo por padrão: uma tabela larga vazava a página no celular. */
main > *, .grade > *, .campos > *, .lista > *, .formulario > * { min-width: 0; }
.rolagem { overflow-x: auto; }
.tabela select { max-width: 160px; }
.rodape { text-align: center; color: var(--mudo); font-size: 13px; padding: 16px; border-top: 1px solid var(--borda); }

.cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; }
.cartao.vazio { text-align: center; padding: 40px 16px; }
.grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.grade.dupla { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cartao.num { color: var(--mudo); text-decoration: none; }
.cartao.num span { display: block; font-size: 2rem; font-weight: 700; color: var(--texto); }
.celular { margin: 0; }
.erro { color: var(--vermelho); margin: 4px 0; }

.barra { height: 8px; background: var(--borda); border-radius: 4px; overflow: hidden; margin: 6px 0; }
.barra div { height: 100%; background: var(--pri); }

.log {
  margin: 0; max-height: 260px; overflow: auto; font-size: 12px;
  background: var(--fundo); padding: 10px; border-radius: 8px; white-space: pre-wrap;
}

button, .botao {
  font: inherit; cursor: pointer; border-radius: 8px; padding: 7px 14px;
  border: 1px solid var(--borda); text-decoration: none; display: inline-block;
}
.pri { background: var(--pri); color: var(--pri-texto); border-color: var(--pri); }
.sec { background: var(--superficie); color: var(--texto); }
.perigo { background: transparent; color: var(--vermelho); border-color: var(--vermelho); }
input { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--borda); background: var(--fundo); color: var(--texto); }

.selo { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--borda); color: var(--texto); }
.selo.verde { background: var(--verde-fundo); color: var(--verde); }
.selo.amarelo { background: var(--amarelo-fundo); color: var(--amarelo); }
.status { display: flex; align-items: center; gap: 10px; }

.dia { display: grid; gap: 12px; }
.lista { display: grid; gap: 12px; }
.video {
  display: grid; grid-template-columns: 180px 1fr; gap: 16px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px;
}
.video.postado { opacity: .75; }
.player video { width: 100%; aspect-ratio: 9 / 16; background: #000; border-radius: 8px; display: block; }
.info { min-width: 0; display: grid; gap: 6px; align-content: start; }
.info p { margin: 0; }
.descricao { white-space: pre-line; }
.hashtags { color: var(--pri); }
.historia { white-space: pre-line; color: var(--mudo); margin-top: 6px !important; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; }
details summary { cursor: pointer; color: var(--mudo); }
details[open] { padding-bottom: 4px; }
.linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 8px 0; }
.linha label { display: grid; font-size: 13px; color: var(--mudo); }

.aviso {
  display: flex; justify-content: space-between; gap: 12px; align-items: start;
  background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--mudo);
  border-radius: var(--raio); padding: 12px;
}
.aviso p { margin: 4px 0; }
.aviso.nivel-aviso { border-left-color: var(--amarelo); }
.aviso.nivel-erro { border-left-color: var(--vermelho); }
.aviso.lido { opacity: .55; }

dialog {
  border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie);
  color: var(--texto); padding: 20px; max-width: min(420px, calc(100vw - 32px));
}
dialog::backdrop { background: rgb(0 0 0 / .5); }
dialog form { display: grid; gap: 12px; }
dialog label { display: flex; gap: 8px; align-items: start; }
dialog .acoes { justify-content: flex-end; }

select, textarea {
  font: inherit; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--borda);
  background: var(--fundo); color: var(--texto); width: 100%;
}
textarea { resize: vertical; line-height: 1.55; }
.formulario, .editor { display: grid; gap: 12px; }
.formulario label, .editor label { display: grid; gap: 4px; font-size: 13px; color: var(--mudo); }
.campos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
input[type=range] { width: 100%; accent-color: var(--pri); }
.editor input[name=titulo] { font-size: 1.05rem; font-weight: 600; }
.passos { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 13px; }
.passos li { padding: 4px 10px; border-radius: 999px; background: var(--borda); color: var(--mudo); }
.passos li.ativo { background: var(--pri); color: var(--pri-texto); }
.ideias { display: grid; gap: 6px; }
.ideia { text-align: left; background: var(--fundo); color: var(--texto); }
.ideia:hover { border-color: var(--pri); }
.ideia.repetida { opacity: .55; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }
button:disabled { opacity: .6; cursor: progress; }
.erro-cartao { border-color: var(--vermelho); background: var(--vermelho-fundo); }
.linha-historia { margin: 6px 0; }
.faixa-dry { background: var(--amarelo-fundo); color: var(--amarelo); text-align: center; padding: 6px; font-weight: 600; }

/* Barras horizontais: uma série, uma cor; valor na ponta; trilho recessivo; dica no hover/foco. */
.barras { display: grid; gap: 6px; margin: 8px 0; }
.barra-linha { display: grid; grid-template-columns: minmax(70px, 30%) 1fr auto; align-items: center; gap: 10px;
  position: relative; padding: 4px 0; border-radius: 6px; outline: none; }
.barra-linha:hover, .barra-linha:focus-visible { background: var(--fundo); }
.barra-rotulo { font-size: 13px; color: var(--texto); overflow-wrap: anywhere; }
.barra-trilho { height: 16px; border-left: 1px solid var(--borda); }
.barra-valor { display: block; height: 100%; min-width: 2px; background: var(--pri); border-radius: 0 4px 4px 0; }
.barra-num { font-size: 13px; color: var(--mudo); font-variant-numeric: tabular-nums; }
.barra-linha:hover::after, .barra-linha:focus-visible::after {
  content: attr(data-dica); position: absolute; left: 30%; bottom: calc(100% + 4px); z-index: 2;
  background: var(--texto); color: var(--superficie); font-size: 12px; padding: 4px 8px; border-radius: 6px;
  white-space: nowrap; pointer-events: none; }
.destaque-num { color: var(--mudo); }
.destaque-num span { display: block; font-size: 2.4rem; font-weight: 700; color: var(--texto); }
.tabela td.num, .tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
.titulo-curto { flex: 1 1 220px; min-width: 0; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th, .tabela td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--borda); }
.tabela th { color: var(--mudo); font-weight: 600; font-size: 13px; }
.tabela select { width: auto; }
.cartao { overflow-x: auto; }
.gates ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.gates li.ok { color: var(--mudo); }
.gates li.erro { color: var(--vermelho); }
.filtro-idioma { display: flex; gap: 6px; flex-wrap: wrap; }
.filtro-idioma a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--borda); color: var(--mudo); text-decoration: none; }
.filtro-idioma a.ativa { background: var(--pri); color: var(--pri-texto); border-color: var(--pri); }
.faixa-estoque { background: var(--amarelo-fundo); color: var(--texto); padding: 8px 16px; border-bottom: 1px solid var(--borda); }
.faixa-estoque.vazio { background: var(--vermelho-fundo); }
.faixa-estoque summary { color: var(--texto); }
.faixa-estoque form { max-width: 760px; margin: 10px 0; }
.login { max-width: 380px; margin: 12vh auto 0; width: 100%; }
.login h1 { font-size: 1.3rem; }
.sair { padding: 4px 10px; font-size: 13px; }
.alerta { border-color: var(--amarelo); background: var(--amarelo-fundo); }
.selo.vermelho { background: var(--vermelho-fundo); color: var(--vermelho); }
.fonte { display: grid; grid-template-columns: 160px 1fr; gap: 14px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; }
.verificacao .fonte { border: 0; padding: 0; }
.fonte img, .sem-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--borda); }
.sem-thumb { display: grid; place-items: center; font-size: 2rem; }
.fonte .info p { margin: 2px 0; }
.check { display: flex !important; gap: 8px; align-items: center; color: var(--texto) !important; font-size: 15px !important; }
.check input { width: auto; }
.check select { width: auto; max-width: 100%; }
fieldset { border: 1px solid var(--borda); border-radius: 8px; display: grid; gap: 8px; }
legend { color: var(--mudo); font-size: 13px; padding: 0 6px; }
.barra.grande { height: 14px; border-radius: 7px; }
.barra div { transition: width .6s ease; }

@media (max-width: 640px) {
  .fonte { grid-template-columns: 1fr; }
  .topo { flex-wrap: wrap; }
  .abas { order: 3; flex-basis: 100%; }
  .sino { margin-left: auto; }
  .video { grid-template-columns: 1fr; }
  .player video { max-height: 70vh; width: auto; margin: 0 auto; }
}