html, body { height: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif; font-variant-numeric: tabular-nums;
  display: grid; grid-template-rows: auto 1fr auto; gap: 1.6vh; padding: 2.4vh calc(2 * var(--u));
  overflow: hidden;
}

header { display: flex; align-items: center; gap: calc(1.5 * var(--u)); }
h1 { margin: 0; font-size: calc(2.2 * var(--u)); font-weight: 700; }
.pontos { display: flex; gap: calc(.5 * var(--u)); }
.pontos span { width: calc(.7 * var(--u)); height: calc(.7 * var(--u)); border-radius: 50%; background: var(--trilho); }
.pontos span.ativo { background: var(--destaque); }
.info { margin-left: auto; text-align: right; color: var(--suave); font-size: calc(1.1 * var(--u)); line-height: 1.4; }
.info .relogio { color: var(--texto); font-size: calc(1.6 * var(--u)); font-weight: 600; }
.info .atrasado { color: var(--erro); font-weight: 700; }
.tema {
  padding: .3em .8em; border-radius: 999px; border: 1px solid var(--suave); background: transparent;
  color: var(--suave); font: inherit; font-size: calc(.9 * var(--u)); cursor: pointer; opacity: .4;
}
.tema:hover, .tema:focus-visible { opacity: 1; }

main { display: grid; gap: calc(1.4 * var(--u)); min-height: 0; align-content: stretch; }
.cartao {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: calc(1 * var(--u)); padding: 2.2vh calc(1.6 * var(--u));
  display: flex; flex-direction: column; gap: 2vh; min-width: 0; min-height: 0; overflow: hidden;
  container-type: inline-size;
}
.cartao h2 { margin: 0; font-size: calc(1.7 * var(--u)); font-weight: 700; }
/* Logo da operação (selo com o fundo original) e, ao lado, o do marketplace. */
.marca { display: flex; align-items: center; gap: calc(.9 * var(--u)); height: calc(3.8 * var(--u)); }
.marca .logo { height: 100%; max-width: 70%; object-fit: contain; border-radius: calc(.5 * var(--u)); }
.marca .selo { height: 58%; }
.marca .logo-texto { font-size: calc(2 * var(--u)); font-weight: 800; white-space: nowrap; }
.marca .selo-texto {
  font-size: calc(1 * var(--u)); font-weight: 600; color: var(--suave);
  border: 1px solid var(--borda); border-radius: 999px; padding: .2em .8em;
}
.rotulo { font-size: calc(.95 * var(--u)); color: var(--suave); text-transform: uppercase; letter-spacing: .08em; }
.hoje .valor { font-size: min(calc(4.2 * var(--u)), 13cqi); white-space: nowrap; font-weight: 800; color: var(--destaque); line-height: 1.05; }
.periodos { display: grid; gap: 2.4vh; }
.periodo { display: grid; gap: .6vh; }
.periodo .linha { display: flex; justify-content: space-between; align-items: baseline; gap: calc(1 * var(--u)); }
.periodo .valor { font-size: calc(2 * var(--u)); font-weight: 700; }
.periodo .pct { font-size: calc(1.3 * var(--u)); font-weight: 700; color: var(--destaque); }
.barra { height: 1vh; border-radius: 999px; background: var(--trilho); overflow: hidden; }
.periodo.principal .valor { font-size: min(calc(2.8 * var(--u)), 9cqi); }
.periodo.principal .pct { font-size: calc(2 * var(--u)); }
.periodo.principal .barra { height: 2.6vh; }
.periodo.principal .detalhe { font-size: calc(1.3 * var(--u)); }
.periodo.passada .valor { font-size: calc(1.6 * var(--u)); }
.periodo.passada .barra { height: .8vh; }
.periodo.passada .barra > div { opacity: .6; }
.barra > div { height: 100%; background: var(--destaque); border-radius: inherit; }
.detalhe { font-size: calc(1.05 * var(--u)); color: var(--suave); }
.detalhe b { color: var(--texto); }
.batida { color: var(--destaque); font-weight: 700; }
.comparacao { display: grid; gap: .4vh; font-size: calc(1.15 * var(--u)); color: var(--suave); padding-top: 1.6vh; border-top: 1px solid var(--borda); }
.comparacao b { color: var(--texto); }
.comparacao .acima { color: var(--destaque); font-weight: 600; }
.comparacao .abaixo { color: var(--suave); font-weight: 600; }
main.tudo .comparacao { font-size: calc(1.6 * var(--u)); }

/* Visão "tudo junto": um cartão grande. */
main.tudo .cartao { justify-content: center; padding: 4vh calc(6 * var(--u)); gap: 5vh; }
main.tudo .cartao h2 { display: none; }
main.tudo .hoje .valor { font-size: calc(9 * var(--u)); }
main.tudo .periodos { grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(6 * var(--u)); }
main.tudo .periodo.principal .valor { font-size: calc(4.6 * var(--u)); }
main.tudo .periodo.principal .pct { font-size: calc(3 * var(--u)); }
main.tudo .periodo.principal .barra { height: 3.6vh; }
main.tudo .periodo.principal .detalhe { font-size: calc(1.8 * var(--u)); }
main.tudo .periodo .valor { font-size: calc(3.6 * var(--u)); }
main.tudo .periodo .pct { font-size: calc(2.2 * var(--u)); }
main.tudo .barra { height: 1.8vh; }
main.tudo .detalhe, main.tudo .rotulo { font-size: calc(1.4 * var(--u)); }

/* Marketplaces dentro do cartão de uma operação. */
table.mkts { width: 100%; border-collapse: collapse; font-size: calc(1.05 * var(--u)); margin-top: auto; }
table.mkts th { text-align: right; font-weight: 500; color: var(--suave); padding: .4vh 0 .4vh calc(.6 * var(--u)); }
table.mkts th:first-child, table.mkts td:first-child { text-align: left; padding-left: 0; }
table.mkts td { text-align: right; padding: .6vh 0 .6vh calc(.6 * var(--u)); border-top: 1px solid var(--borda); white-space: nowrap; }
table.mkts td small { color: var(--suave); }

/* Visão "progresso do mês": um cartão por operação × marketplace. */
main.mes .cartao { justify-content: center; gap: 3.2vh; }
main.mes .mes-valor { font-size: min(calc(3.4 * var(--u)), 12cqi); white-space: nowrap; font-weight: 800; color: var(--destaque); line-height: 1.05; }
main.mes .mes-linha { display: flex; justify-content: space-between; align-items: baseline; gap: calc(1 * var(--u)); }
main.mes .mes-linha .pct { font-size: calc(2.6 * var(--u)); font-weight: 800; white-space: nowrap; }
main.mes .barra { height: 4vh; }
main.mes .detalhe { font-size: calc(1.4 * var(--u)); line-height: 1.5; }

/* Visão "anúncios em alta": uma coluna por operação × marketplace. */
main.em-alta .cartao { gap: 1.4vh; padding: 2vh calc(1.2 * var(--u)); }
.anuncios { display: grid; grid-auto-rows: 1fr; gap: 1.2vh; flex: 1; min-height: 0; }
.anuncio {
  display: flex; align-items: center; gap: calc(.9 * var(--u)); min-width: 0; min-height: 0;
  border-top: 1px solid var(--borda); padding-top: 1.2vh;
}
.anuncio .posicao { flex: 0 0 calc(2.4 * var(--u)); font-size: calc(1.9 * var(--u)); font-weight: 800; color: var(--suave); text-align: center; }
.anuncio:first-child .posicao { color: var(--destaque); }
.anuncio .foto {
  flex: 0 0 auto; width: calc(5.4 * var(--u)); height: calc(5.4 * var(--u)); max-height: 11vh; border-radius: calc(.5 * var(--u));
  object-fit: contain; background: #fff; border: 1px solid var(--borda);
}
.anuncio .foto.sem { background: var(--borda); }
.anuncio .texto { flex: 1; min-width: 0; display: grid; gap: .5vh; }
.anuncio .produto {
  font-size: calc(1.15 * var(--u)); font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.anuncio .numeros { font-size: calc(1 * var(--u)); color: var(--suave); white-space: nowrap; }
.anuncio .numeros b { font-size: calc(1.5 * var(--u)); color: var(--destaque); }
.cartao .sem-vendas { color: var(--suave); font-size: calc(1.2 * var(--u)); }

.vazio { place-self: center; text-align: center; color: var(--suave); font-size: calc(1.6 * var(--u)); }

footer { display: flex; gap: calc(1 * var(--u)); align-items: stretch; min-width: 0; }
footer .rotulo { align-self: center; white-space: nowrap; }
.vendas {
  display: flex; gap: calc(.8 * var(--u)); overflow: hidden; min-width: 0; flex: 1;
  mask-image: linear-gradient(to right, #000 85%, transparent);
}
.venda {
  display: flex; gap: calc(.7 * var(--u)); align-items: center;
  flex: 0 0 auto; max-width: calc(24 * var(--u)); background: var(--cartao); border: 1px solid var(--borda); border-radius: calc(.7 * var(--u));
  padding: .8vh calc(.9 * var(--u)); font-size: calc(.95 * var(--u)); line-height: 1.35; min-width: 0;
}
.venda .foto {
  flex: 0 0 auto; width: calc(3.6 * var(--u)); height: calc(3.6 * var(--u)); border-radius: calc(.4 * var(--u)); object-fit: contain;
  background: #fff; border: 1px solid var(--borda);
}
.venda .foto.sem { background: var(--borda); }
.venda .texto { min-width: 0; }
.venda .topo { display: flex; justify-content: space-between; gap: calc(.8 * var(--u)); }
.venda .topo b { color: var(--destaque); }
.venda .quem { color: var(--suave); }
.venda .produto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pop-up de pergunta nova: por cima de tudo, com o resto da tela borrado. */
#pergunta {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center;
  backdrop-filter: blur(14px) brightness(.55); -webkit-backdrop-filter: blur(14px) brightness(.55);
  background: rgb(0 0 0 / .25);
}
#pergunta[hidden] { display: none; }
#pergunta .caixa {
  width: min(70vw, calc(110 * var(--u))); background: var(--cartao); border: 2px solid var(--destaque);
  border-radius: calc(1.4 * var(--u)); padding: 4vh calc(3 * var(--u)); display: grid; gap: 3vh;
  box-shadow: 0 2vh 8vh rgb(0 0 0 / .5);
}
#pergunta .titulo { font-size: calc(2.4 * var(--u)); font-weight: 800; color: var(--destaque); }
#pergunta .texto { font-size: calc(3.4 * var(--u)); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
#pergunta .anuncio { display: flex; align-items: center; gap: calc(1 * var(--u)); color: var(--suave); font-size: calc(1.4 * var(--u)); }
#pergunta .anuncio .foto { width: calc(5 * var(--u)); height: calc(5 * var(--u)); }
#pergunta .tempo { height: .8vh; border-radius: 999px; background: var(--trilho); overflow: hidden; }
#pergunta .tempo > div { height: 100%; background: var(--destaque); animation: esvaziar linear forwards; }
/* Lembrete de pergunta ainda sem resposta: em vermelho. */
#pergunta .caixa.lembrete { border-color: var(--erro); box-shadow: 0 0 0 .6vh rgb(255 60 60 / .25), 0 2vh 8vh rgb(0 0 0 / .5); }
#pergunta .caixa.lembrete .titulo { color: var(--erro); }
#pergunta .caixa.lembrete .tempo > div { background: var(--erro); }
@keyframes esvaziar { from { width: 100%; } to { width: 0; } }
/* Modo alteração (tecla M): configuração da TV e metas, com uma conta admin. */
#alteracao {
  width: min(780px, 94vw); max-height: 92vh; padding: 0; border: 1px solid var(--borda); border-radius: 14px;
  background: var(--fundo); color: var(--texto); font-size: 16px; line-height: 1.45;
}
#alteracao::backdrop { background: rgb(0 0 0 / .6); }
#alteracao .corpo { padding: 22px 24px 26px; }
#alteracao .cabecalho { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#alteracao h2 { margin: 0; font-size: 1.35rem; }
#alteracao h3 { margin: 0 0 6px; font-size: 1.05rem; }
#alteracao section { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 16px 18px; margin-top: 16px; }
#alteracao .dica { color: var(--suave); margin: 4px 0 8px; font-size: .92rem; }
#alteracao label { display: block; font-size: .9rem; color: var(--suave); margin: 10px 0 4px; }
#alteracao input, #alteracao select {
  width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--borda);
  background: var(--fundo); color: var(--texto); font: inherit;
}
#alteracao button {
  margin-top: 12px; padding: 9px 16px; border-radius: 8px; border: 0; background: var(--destaque);
  color: var(--fundo); font: inherit; font-weight: 600; cursor: pointer;
}
#alteracao button.secundario { background: transparent; color: var(--destaque); border: 1px solid var(--destaque); margin: 0; }
#alteracao .oculto { display: none !important; }
#alteracao .mensagem { margin-top: 8px; min-height: 1.2em; }
#alteracao .mensagem.erro { color: var(--erro); font-weight: 600; }
#alteracao .grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 12px; }
#alteracao label.opcao { display: flex; gap: 8px; align-items: center; color: var(--texto); }
#alteracao label.opcao input { width: auto; }
#alteracao .meta-par { border-top: 1px solid var(--borda); padding: 10px 0 12px; }
#alteracao .meta-par > b { display: block; margin-top: 6px; font-weight: 600; }
#alteracao .meta-par .destaque label { color: var(--destaque); font-weight: 600; }
#alteracao .meta-par .destaque input { border-color: var(--destaque); }
#alteracao details { margin-top: 8px; color: var(--suave); }
#alteracao summary { cursor: pointer; }
#alteracao .teclas { color: var(--suave); font-size: .9rem; }

/* TV sem pareamento: o código no lugar do painel. */
#pareamento {
  position: fixed; inset: 0; z-index: 5; background: var(--fundo); color: var(--texto);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; text-align: center; padding: 4vh;
}
#pareamento[hidden] { display: none; }
#pareamento h2 { margin: 0; font-size: calc(2.4 * var(--u)); }
#pareamento .codigo {
  font-family: ui-monospace, Consolas, monospace; font-size: calc(7 * var(--u)); font-weight: 700; letter-spacing: .12em;
  color: var(--destaque); background: var(--cartao); border: 1px solid var(--borda); border-radius: calc(1 * var(--u)); padding: 2vh calc(3 * var(--u));
}
#pareamento p { margin: 0; color: var(--suave); font-size: calc(1.4 * var(--u)); max-width: 60ch; }