/* cores no estilo do Gerenciador de Anúncios do Facebook (26/10, pedido dele: minimalista e intuitivo): fundo cinza
   claro, painéis brancos, azul da Meta nos botões principais, avisos discretos. Tema claro, como o do Gerenciador. */
:root {
  color-scheme: light;
  --fundo: #f0f2f5;
  --painel: #ffffff;
  --texto: #1c2b33;
  --fraco: #606770;
  --borda: #dadde1;
  --borda-forte: #c4c8cf;
  --hover: #f2f3f5;
  --azul: #0866ff;
  --azul-esc: #0754d4;
  --azul-bg: #ebf2ff;
  --verde: #1b7f37;
  --verde-bg: #e6f4ea;
  --amarelo: #8a5a00;
  --amarelo-bg: #fff4d4;
  --laranja: #b54708;
  --laranja-bg: #fdecdf;
  --vermelho: #c81e3a;
  --vermelho-bg: #fdecee;
  --cinza: #8a8d91;
  --cinza-bg: #f0f2f5;
  --ig: #c13584;
  --perfil: #d4006f;      /* rosa choque: tudo que é perfil do AdsPower */
  --perfil-bg: #ffe3f1;
  --fb: #0866ff;
  --prim: #0866ff;
  --prim-texto: #ffffff;
  --raio: 8px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .08);
  --sombra-alta: 0 12px 28px rgba(0, 0, 0, .16), 0 2px 4px rgba(0, 0, 0, .08);
  --lateral: 76px;
}

* { box-sizing: border-box; }

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

h1, h2, h3 { margin: 0; }
h2 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fraco); }
h3 { font-size: 17px; display: flex; align-items: center; gap: 8px; }
a { color: inherit; }

.topo {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 16px;
  background: var(--painel);
  border-bottom: 1px solid var(--borda);
}
.marca { font-weight: 700; font-size: 18px; }
.marca small { font-weight: 400; font-size: 13px; color: var(--fraco); margin-left: 4px; }
.contadores { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.menu { display: flex; gap: 6px; }

.chip { padding: 3px 10px; border-radius: 999px; font-size: 13px; background: var(--cinza-bg); white-space: nowrap; }
.chip.verde { background: var(--verde-bg); color: var(--verde); }
.chip.amarelo { background: var(--amarelo-bg); color: var(--amarelo); }
.chip.laranja { background: var(--laranja-bg); color: var(--laranja); }
.chip.vermelho { background: var(--vermelho-bg); color: var(--vermelho); font-weight: 600; }
.chip.bloq { color: var(--vermelho); }

main { max-width: 1400px; margin: 0 auto; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
main > section:empty, #bms:empty { display: none; }
#bms { display: grid; gap: 22px; }
.bm { display: grid; gap: 8px; }
.bm-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.contas { display: flex; flex-wrap: wrap; gap: 4px; }
.conta { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--verde-bg); color: var(--verde); }
.conta.ruim { background: var(--vermelho-bg); color: var(--vermelho); }
.link { border: 0; background: none; padding: 0; color: var(--fraco); text-decoration: underline; font-size: 12px; }
.ruim-txt { color: var(--vermelho); }
.pend-txt { color: var(--amarelo); }
.conexao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--raio); }
.ajuda ol { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; color: var(--fraco); }
.ajuda summary { font-size: 13px; }

button {
  font: inherit;
  border: 1px solid var(--borda);
  background: var(--painel);
  color: var(--texto);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
button:hover { border-color: var(--fraco); }
button.prim { background: var(--prim); color: var(--prim-texto); border-color: var(--prim); }
button.perigo { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }
button:disabled { opacity: .55; cursor: progress; }

.tarefas { display: grid; gap: 8px; margin-top: 8px; }
.tarefa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 12px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--amarelo);
  border-radius: var(--raio);
}
.tarefa.n0 { border-left-color: var(--vermelho); background: var(--vermelho-bg); }
.tarefa.n1 { border-left-color: var(--laranja); }
.tarefa.n2 { border-left-color: var(--verde); }

.parados { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dica { padding: 12px 14px; background: var(--painel); border: 1px dashed var(--borda); border-radius: var(--raio); color: var(--fraco); margin: 8px 0 0; }

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.cartao {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 10px 12px 12px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-top: 3px solid var(--cinza);
  border-radius: var(--raio);
  min-width: 0;
}
.cartao.aovivo { border-top-color: var(--verde); }
.cartao.aguardando { border-top-color: var(--amarelo); }
.cartao.alerta, .cartao.erro { border-top-color: var(--laranja); }
.cartao header { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cartao header .titulo { display: grid; gap: 1px; min-width: 0; }
.cartao header .titulo .nome { overflow: hidden; text-overflow: ellipsis; }
.campo-foto { display: flex; gap: 12px; align-items: center; font-size: 13px; }
.campo-foto input[type=file] { margin-top: 6px; padding: 4px; font-size: 12px; }
.avatar { flex: none; border-radius: 50%; object-fit: cover; background: var(--cinza-bg); }
.avatar.g { width: 40px; height: 40px; margin-right: 4px; }
.avatar.p { width: 26px; height: 26px; }
.avatar.iniciais { display: inline-grid; place-items: center; color: #fff; font-weight: 700; letter-spacing: .02em; }
.avatar.g.iniciais { font-size: 15px; }
.avatar.p.iniciais { font-size: 10px; }
.nome { font-weight: 600; white-space: nowrap; }
.arroba { color: var(--fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.engrenagem { margin-left: auto; border: 0; padding: 2px 6px; background: transparent; color: var(--fraco); font-size: 15px; }
.logo { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; }
.logo.ig { border-radius: 28%; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.logo.ig svg { width: 66%; height: 66%; }
.passos { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; }
.passos .link { font-size: 12px; }
button .logo { width: 16px; height: 16px; margin-right: 7px; vertical-align: -3px; display: inline-grid; }
h3 .logo { width: 22px; height: 22px; margin-right: 8px; vertical-align: -4px; }
h3 .logo.ig { display: inline-grid; }
.meta, .fraca { color: var(--fraco); font-size: 12px; }
.estado { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.bola { width: 9px; height: 9px; border-radius: 50%; background: var(--cinza); flex: none; }
.aovivo .bola { background: var(--verde); box-shadow: 0 0 0 3px var(--verde-bg); }
.aguardando .bola { background: var(--amarelo); }
.alerta .bola, .erro .bola { background: var(--laranja); }
.bloqueado .bola { background: var(--vermelho); }
.aovivo .estado { color: var(--verde); }
.bloqueado .estado { color: var(--vermelho); }
.alerta .estado, .erro .estado { color: var(--laranja); }
.erro-txt { color: var(--laranja); font-size: 13px; overflow-wrap: anywhere; }
.tag { font-size: 11px; background: var(--laranja-bg); color: var(--laranja); border-radius: 4px; padding: 0 5px; }
.botoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.botoes.fim { justify-content: flex-end; }
.botoes .link.dir { margin-left: auto; align-self: center; }

details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸"; color: var(--fraco); font-size: 12px; }
details[open] > summary::before { content: "▾"; }
details[open] > summary { margin-bottom: 8px; }
.tabela { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--painel); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--borda); font-size: 13px; white-space: nowrap; }
th { color: var(--fraco); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
.avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.aviso { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; font-size: 13px; overflow-wrap: anywhere; }
.aviso-ico { display: inline-flex; width: 26px; height: 26px; border-radius: 7px; align-items: center; justify-content: center;
  background: var(--cinza-bg); color: var(--fraco); flex: none; }
.aviso-ico .ico { width: 15px; height: 15px; }
.aviso-txt { min-width: 0; }
.aviso-hora { color: var(--fraco); font-variant-numeric: tabular-nums; font-size: 12px; white-space: nowrap; }
.aviso.alerta { border-color: color-mix(in srgb, var(--laranja) 45%, var(--borda)); }
.aviso.alerta .aviso-ico { background: var(--laranja-bg); color: var(--laranja); }
.vazio { color: var(--fraco); margin: 0; }

dialog {
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--painel);
  color: var(--texto);
  padding: 18px;
  width: min(480px, calc(100vw - 32px));
}
dialog::backdrop { background: rgba(0, 0, 0, .45); }
.form { display: grid; gap: 12px; }
.form p { margin: 0; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
label { display: grid; gap: 4px; font-size: 13px; color: var(--fraco); }
label.linha-check { display: flex; align-items: center; gap: 8px; color: var(--texto); }
input, select {
  font: inherit;
  color: var(--texto);
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo);
  min-width: 0;
}
input[type=checkbox], input[type=radio] { padding: 0; }
.lista-videos { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; }
label.opcao-video { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); color: var(--texto); cursor: pointer; }
label.opcao-video:has(input:checked) { border-color: var(--texto); }
label.opcao-video input { margin-top: 2px; }
.erro-form { color: var(--vermelho); font-size: 13px; min-height: 0; }
.erro-form:empty { display: none; }

#aviso {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 20px);
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--prim);
  color: var(--prim-texto);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 20;
}
#aviso.mostra { opacity: 1; transform: translate(-50%, 0); }
#aviso.ruim { background: var(--vermelho); color: #fff; }

body.entrada { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.caixa-entrar { width: min(340px, 100%); padding: 22px; background: var(--painel); border: 1px solid var(--borda); border-radius: 14px; }
.caixa-entrar h1 { font-size: 22px; }

@media (max-width: 560px) {
  .topo { padding: 8px 12px; }
  main { padding: 12px; }
  .duas { grid-template-columns: 1fr; }
}

/* cartão da página: a página e o Instagram conectado nela, cada um com a sua live */
.cartao.b-aovivo { border-top-color: var(--verde); }
.cartao.b-aguardando { border-top-color: var(--amarelo); }
.cartao.b-alerta { border-top-color: var(--laranja); }
.alvo { display: grid; gap: 4px; padding-top: 8px; margin-top: 6px; border-top: 1px dashed var(--borda); }
.alvo-cab { display: flex; align-items: center; gap: 6px; min-width: 0; }
.alvo-cab .nome { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ok-txt { color: var(--verde); }
.nota { margin: 0 0 8px; }

/* prévia do vídeo no cartão e os comandos da live */
.previa-caixa { display: grid; gap: 4px; margin: 2px 0 4px; }
.previa-caixa video { display: block; width: 100%; height: 300px; object-fit: contain; background: #000; border-radius: 8px; }
.linha-tempo { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fraco); font-variant-numeric: tabular-nums; }
.linha-tempo input[type=range] { flex: 1; min-width: 0; padding: 0; border: 0; background: none; accent-color: var(--ig); cursor: pointer; height: 22px; }
.controles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.controles button { padding: 4px 9px; font-size: 13px; }

/* listas paginadas */
.paginacao { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.paginacao button { padding: 4px 10px; font-size: 13px; }

/* usuários e computadores ligados ao AdsPower */
.menu { flex-wrap: wrap; }
button.chip { border: 0; cursor: pointer; font: inherit; font-size: 13px; color: inherit; }
button.chip.verde { color: var(--verde); }
button.chip.amarelo { color: var(--amarelo); }
.passos { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14px; }
.passos li > p { margin: 4px 0 0; }
.comando {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 6px;
  overflow-wrap: anywhere;
  user-select: all;
}
.maquinas { display: grid; gap: 6px; }
.maquina { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); font-size: 13px; }
.maquina .botoes { margin: 0; }
dialog:has(.largo) { width: min(620px, calc(100vw - 32px)); }

/* abas do painel: Lives, Estoque, BMs */
[hidden] { display: none !important; }
.abas { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--fundo); border: 1px solid var(--borda); }
.abas button { border: 0; background: transparent; padding: 5px 12px; border-radius: 8px; color: var(--fraco); font-weight: 600; }
.abas button:hover { color: var(--texto); }
.abas button.ativa { background: var(--painel); color: var(--texto); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.badge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--verde-bg); color: var(--verde); font-size: 11px; line-height: 18px; text-align: center; }

/* estoque */
.sub-abas { display: flex; flex-wrap: wrap; gap: 6px; }
.sub-abas button { font-weight: 600; }
.sub-abas button.ativa { background: var(--prim); color: var(--prim-texto); border-color: var(--prim); }
.conta-sub { font-weight: 400; font-size: 12px; opacity: .75; margin-left: 2px; }
.barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.barra input[type=search] { flex: 1; min-width: 220px; }
.barra .fraca { flex: 1; min-width: 220px; }
label.linha { display: flex; align-items: center; gap: 8px; color: var(--texto); }
a.botao { display: inline-block; padding: 6px 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--painel); color: var(--texto); text-decoration: none; white-space: nowrap; }
a.botao:hover { border-color: var(--fraco); }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip-filtro { padding: 3px 10px; border-radius: 999px; font-size: 13px; background: var(--cinza-bg); border: 1px solid transparent; color: var(--fraco); }
.chip-filtro b { color: var(--texto); font-weight: 600; }
.chip-filtro.ativa { border-color: var(--texto); color: var(--texto); }
button.mini { padding: 2px 8px; font-size: 12px; border-radius: 6px; margin: 1px 4px 1px 0; }
button.mini.prim { font-weight: 600; }
button.codigo { font-variant-numeric: tabular-nums; }
table.estoque td { vertical-align: top; white-space: normal; }
table.estoque th { white-space: normal; }  /* título comprido quebra em vez de empurrar os botões para fora (27/10: + coluna BM) */
table.estoque td.acoes { white-space: nowrap; text-align: right; }
table.estoque td.onde { font-size: 12px; min-width: 140px; }
.nota-linha { max-width: 280px; margin-top: 2px; }
.chip.st-ig-disponivel, .chip.st-paginas-disponivel, .chip.st-proxies-livre { background: var(--verde-bg); color: var(--verde); }
.chip.st-ig-problema { background: var(--amarelo-bg); color: var(--amarelo); }
.chip.st-ig-banido, .chip.st-paginas-caiu, .chip.st-proxies-defeito { background: var(--vermelho-bg); color: var(--vermelho); }
.perigo-txt { color: var(--vermelho); }
.segredo { -webkit-text-security: disc; }
textarea { font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--texto); padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); resize: vertical; min-width: 0; }
label.arquivo input[type=file] { padding: 4px; font-size: 12px; }
.previa-tab th { padding: 4px; }
.previa-tab select { padding: 4px 6px; font-size: 12px; }
.previa-tab td { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.historico { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; max-height: 40vh; overflow-y: auto; }
.ig-do-estoque:empty { display: none; }
.ig-do-estoque { display: grid; gap: 6px; padding: 10px; border: 1px dashed var(--borda); border-radius: 8px; }
dialog:has(.largo2) { width: min(900px, calc(100vw - 32px)); }

/* BMs */
.grade-bms { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.bm-cartao { display: grid; gap: 8px; align-content: start; padding: 12px 14px; background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); font-size: 13px; }
.bm-cartao header { display: grid; gap: 2px; }
.lista-bm { margin: 0; padding-left: 18px; display: grid; gap: 2px; }

@media (max-width: 560px) {
  .abas { order: 3; width: 100%; }
  .abas button { flex: 1; }
}

/* aba Lives: filtros e visão em lista; aba Preparar */
.lives-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.lives-barra .filtros { margin: 0; }
.lives-barra select { padding: 5px 8px; font-size: 13px; }
.lives-barra input[type=search] { flex: 1; min-width: 180px; max-width: 280px; padding: 5px 10px; font-size: 13px; }
.modo { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--fundo); border: 1px solid var(--borda); }
.modo button { border: 0; background: transparent; padding: 3px 10px; border-radius: 7px; font-size: 13px; color: var(--fraco); }
.modo button.ativa { background: var(--painel); color: var(--texto); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.badge.amarelo { background: var(--amarelo-bg); color: var(--amarelo); }
.alvo.compacto .alvo-cab { gap: 8px; }
.alvo.compacto .alvo-cab .fraca { white-space: nowrap; }
.alvo.compacto .alvo-cab button { margin-left: auto; }
.quem { display: flex; align-items: center; gap: 6px; min-width: 0; }
.quem b { white-space: nowrap; }
table.lista-lives td, table.preparar td { vertical-align: middle; white-space: normal; }
table.lista-lives td.acoes .botoes { margin: 0; justify-content: flex-end; flex-wrap: nowrap; }
table.lista-lives td.acoes button { padding: 3px 9px; font-size: 13px; }
.estado-mini { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }
tr.aovivo .estado-mini { color: var(--verde); }
tr.alerta .estado-mini, tr.erro .estado-mini { color: var(--laranja); }
tr.bloqueado .estado-mini { color: var(--vermelho); }
tr.aguardando .estado-mini { color: var(--amarelo); }

/* topo: marca, abas e menu numa linha; os contadores embaixo (com 4 abas não cabia tudo numa linha) */
.topo .menu { margin-left: auto; }
.topo .contadores { order: 3; flex: 1 1 100%; }

/* Subir campanha: modelo e checklist */
.tres { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.modelo-resumo { border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; background: var(--fundo); display: grid; gap: 8px; }
.nome-camp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nome-camp code { flex: 1; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
/* Subir campanha: a página na BM e as contas da BM (situação, pixel, o que subiu no dia, Abrir/Subi) */
.sobe-pagina { border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px 12px; background: var(--fundo); display: grid; gap: 4px; }
.sobe-pagina.pend { border-color: var(--amarelo); }
.sobe-pagina p { margin: 0; }
.sobe-pagina select { max-width: 260px; padding: 3px 6px; font-size: 12px; }
table.sobe td { vertical-align: top; white-space: normal; font-size: 13px; }
table.sobe td:first-child { width: 22px; }
table.sobe td .fraca { font-size: 12px; overflow-wrap: anywhere; }
table.sobe td.acoes { white-space: nowrap; text-align: right; }
table.sobe td.acoes button.mini { margin: 0 0 0 4px; }
/* Campanhas subidas: a que subiu sem BM tem o seletor em amarelo até alguém colocar a BM */
table.sobe.subidas td:first-child { width: auto; white-space: nowrap; }
table.sobe select.pend { border-color: var(--amarelo); color: var(--amarelo); }
.modelo-passos { font-size: 13px; gap: 3px; }
.modelo-passos b { font-weight: 600; }
@media (max-width: 560px) { .tres { grid-template-columns: 1fr 1fr; } }

/* 📈 Relatório (admin) */
#aba-relatorio { gap: 14px; }
.rel-barra select { padding: 5px 8px; font-size: 13px; max-width: 280px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.kpi { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 14px; }
.kpi-t { font-size: 11px; font-weight: 600; color: var(--fraco); text-transform: uppercase; letter-spacing: .05em; }
.kpi-v { font-size: 22px; font-weight: 700; margin-top: 2px; }
#rel-graficos, #rel-tabelas { display: grid; gap: 14px; }
.grafico { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; display: grid; gap: 8px; min-width: 0; }
.grafico-svg { width: 100%; height: auto; display: block; }
.g-barras rect { fill: var(--fb); opacity: .7; }
.g-linha { stroke: var(--amarelo); stroke-width: 2; }
.g-ponto { fill: var(--amarelo); }
.g-rotulos text { fill: var(--fraco); font-size: 11px; }
.legenda { margin: 0; }
.legenda .leg-b, .legenda .leg-l { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; }
.legenda .leg-b { background: var(--fb); opacity: .7; }
.legenda .leg-l { background: var(--amarelo); }
td.rel-nome { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* relatório: filtro de contas individuais */
.contas-filtro { flex-basis: 100%; margin-top: 2px; }
.contas-filtro .chip-filtro { font-size: 12px; }

/* usuários: edição, permissões e foto */
.usuario-card { border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo); padding: 10px 12px; margin-bottom: 8px; }
.u-topo { display: flex; gap: 10px; align-items: center; }
.u-ident { flex: 1; min-width: 0; }
.u-nome { width: 100%; max-width: 280px; margin-top: 4px; }
.avatar.avatar-vazio { display: inline-grid; place-items: center; color: #fff; font-weight: 700; background: #6b4ea8; }
.u-perms { display: grid; gap: 4px 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 8px 0 4px; }
.u-perm { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; }
.u-perm input { margin-top: 2px; flex: none; }
.u-senha:not(:empty) { margin-top: 8px; }
.senha-nova { font-size: 13px; background: var(--verde-bg); border: 1px solid var(--verde); border-radius: 8px; padding: 8px 10px; }
.senha-nova code { font-size: 15px; font-weight: 700; }

/* admin passa a página para alguém operar (seletor no cabeçalho do cartão) */
.cartao header { flex-wrap: wrap; }
.resp { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.resp select { font-size: 12px; padding: 2px 4px; max-width: 150px; }

/* carga por gestor (admin) + destaque da página que está com alguém */
.gestores { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.chip-gestor { font-size: 12px; padding: 4px 10px; border: 1px solid var(--borda); border-radius: 999px; background: var(--painel); color: var(--texto); cursor: pointer; }
.chip-gestor.ativa { background: var(--prim); color: var(--prim-texto); border-color: var(--prim); }
.chip-gestor.alerta { border-color: var(--amarelo); }
.chip-gestor.alerta.ativa { background: var(--amarelo); color: #1a1407; border-color: var(--amarelo); }
.resp.com { background: rgba(107, 78, 168, .16); border: 1px solid rgba(107, 78, 168, .45); border-radius: 999px; padding: 1px 6px 1px 8px; }
.resp.com b { font-weight: 700; }

/* ícones SVG no lugar dos emojis */
.ico { width: 1.05em; height: 1.05em; vertical-align: -0.16em; flex: none; stroke-width: 2; }
button .ico:first-child, a.botao .ico:first-child, .chip .ico:first-child { margin-right: 2px; }
.ico-so { width: 1.2em; height: 1.2em; }
.bola-st { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 3px; vertical-align: 0; background: var(--cinza); }
.bola-st.verde { background: var(--verde); } .bola-st.amarelo { background: var(--amarelo); }
.bola-st.laranja { background: var(--laranja); } .bola-st.cinza { background: var(--cinza); }

/* aba Preparar: caixa do Instagram em uso sem página e o conectar Instagram na linha da página */
.cockpit { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; margin: 0 0 12px; }
.cockpit > h3 { margin: 0 0 8px; font-size: 15px; }
.cockpit .tabela { margin-top: 4px; }
.cockpit select { max-width: 260px; }
.cockpit p.fraca { margin: 8px 0 0; }
.cockpit td.acoes { white-space: nowrap; text-align: right; }
.conectar-ig { display: flex; align-items: center; gap: 6px; }
.conectar-ig select { flex: 0 1 210px; min-width: 150px; padding: 3px 6px; font-size: 12px; }
.conectar-ig button.mini { margin: 0; }
table.preparar .quem .engrenagem { margin-left: 2px; }

/* sinal ao vivo do OBS (fonte das lives ao vivo do expert) */
.aovivo-faixa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; padding: 10px 14px; border: 1px solid var(--vermelho); border-radius: var(--raio); background: var(--vermelho-bg); }
.aovivo-faixa button { margin-left: auto; }
.previa-aovivo { display: grid; place-items: center; min-height: 120px; margin: 2px 0 4px; background: #000; border-radius: 8px; color: #fff; font-weight: 600; }
.copiavel { display: flex; gap: 6px; align-items: center; }
.copiavel input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
label.opcao-video.com-foto { align-items: center; }
label.opcao-video.com-foto input { margin-top: 0; }

/* aba Lives: o Instagram que ainda não tem a chave do stream (ou a página sem Instagram) aparece avisando */
.semchave .bola { background: var(--amarelo); }
.semchave .estado, tr.semchave .estado-mini { color: var(--amarelo); }

/* pixels (aba BMs → Pixels): onde está cada um e a tabela conta × pixel */
.px-cartao header { gap: 4px; }
.px-id { display: flex; align-items: center; gap: 6px; }
.px-id code { font-size: 13px; }
table.pixels td, table.pixels th { white-space: nowrap; }
table.pixels th .fraca { font-weight: 400; }
button.px-cel { border: 0; background: transparent; padding: 2px 4px; font-size: 13px; text-align: left; }
button.px-cel:hover { background: var(--cinza-bg); }
fieldset.px-bms { border: 1px solid var(--borda); border-radius: 8px; padding: 6px 10px 8px; display: grid; gap: 4px; margin: 0; }
fieldset.px-bms legend { font-size: 13px; color: var(--fraco); padding: 0 4px; }
fieldset.px-bms { max-height: 46vh; overflow-y: auto; }
.px-bm { display: grid; gap: 2px; }
.px-contas { display: grid; gap: 2px; padding-left: 26px; font-size: 13px; }
.px-contas label.linha-check { display: block; }
.px-contas label.linha-check input { margin: 0 6px 0 0; vertical-align: -2px; }
.px-lista { display: grid; gap: 10px; max-height: 52vh; overflow-y: auto; }
.px-st, .px-res { font-size: 12px; }
.linha-perfil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; }
.linha-perfil input { width: 7em; }
.linha-perfil select { max-width: 240px; }

/* seguidores do Instagram (o Instagram só deixa fazer live com 1000+): pílula clicável no cartão, no Preparar e no estoque */
button.seg { flex: none; padding: 0 7px; border-radius: 999px; font-size: 11px; line-height: 18px; font-weight: 600; margin-left: 4px; }
button.seg.sim { background: var(--verde-bg); color: var(--verde); border-color: transparent; }
button.seg.nao { background: var(--amarelo-bg); color: var(--amarelo); border-color: var(--amarelo); }
button.seg.perto { background: var(--amarelo-bg); color: var(--amarelo); border-color: transparent; }
.seg-par { display: inline-flex; flex: none; flex-wrap: wrap; row-gap: 2px; max-width: 100%; align-items: center; margin-left: 4px; }
.seg-par button.seg { margin-left: 0; }
button.seg-contar { flex: none; padding: 0 3px; margin-left: 1px; border: 0; background: transparent; color: var(--fraco); line-height: 18px; }
button.seg-contar:hover:not(:disabled) { color: var(--azul); }
button.seg-contar svg { width: 13px; height: 13px; vertical-align: -2px; }
button.seg-contar.girando svg { animation: seg-gira 1s linear infinite; }
@keyframes seg-gira { to { transform: rotate(360deg); } }
button.seg.nd { background: transparent; color: var(--fraco); border-style: dashed; font-weight: 400; }
/* o Instagram já liberou a live da conta (28/10): marca à mão ao lado dos seguidores */
button.seg-lib { flex: none; padding: 0 7px; margin-left: 2px; border-radius: 999px; font-size: 11px; line-height: 18px;
  background: transparent; color: var(--fraco); border-style: dashed; font-weight: 400; }
button.seg-lib:hover:not(:disabled) { color: var(--azul); border-color: var(--azul); }
button.seg-lib.sim { background: var(--verde-bg); color: var(--verde); border: 1px solid transparent; font-weight: 600; }
.seg-opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
button.seg-op { display: grid; gap: 2px; padding: 10px; text-align: left; white-space: normal; }
button.seg-op span { font-size: 12px; color: var(--fraco); }
button.seg-op.ativa { border-width: 2px; }
button.seg-op.sim.ativa { border-color: var(--verde); }
button.seg-op.nao.ativa { border-color: var(--amarelo); }
button.seg-op.nd.ativa { border-color: var(--texto); }
.poucos .bola { background: var(--amarelo); }
.poucos .estado, tr.poucos .estado-mini { color: var(--amarelo); }
label.opcao-video.desligada { opacity: .6; cursor: not-allowed; }

/* busca nos seletores de Instagram: digita parte do @ e o seletor ao lado só mostra os que batem */
.busca-sel { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.busca-sel input[type=search] { width: 110px; flex: none; padding: 3px 6px; font-size: 12px; }
label > .busca-sel { display: flex; }
label > .busca-sel input[type=search] { width: 140px; padding: 8px 10px; font-size: 13px; }
label > .busca-sel select { flex: 1; }
.campo-fixo { color: var(--texto); padding: 8px 0; }
.duas > label.linha-inteira { grid-column: 1 / -1; }  /* o perfil do AdsPower: a lista com o nome inteiro */
.conectar-ig .busca-sel select { flex: 0 1 210px; min-width: 150px; padding: 3px 6px; font-size: 12px; }
div.linha-check { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
div.linha-check label { display: flex; align-items: center; gap: 8px; color: var(--texto); }
div.linha-check input[type=search] { flex: 0 1 220px; padding: 5px 8px; font-size: 13px; }

/* Subir campanha: quem administra a página (o perfil da página), sempre à vista */
.admin-pag { font-size: 13px; }
.admin-pag .ico { vertical-align: -2px; }
.alvo-cab .titulo { display: grid; gap: 2px; justify-items: start; min-width: 0; }
.alvo-cab .titulo .nome { max-width: 100%; }
.alvo-cab .titulo button.seg, .cartao header button.seg, .alvo-cab .titulo .seg-par, .cartao header .seg-par { margin-left: 0; }

/* aba Lives por perfil do AdsPower (23/10): o bloco do perfil, as BMs dele e quem tem acesso a cada página */
.perfil-cab .contas { align-items: center; }
.conta.bm-do-perfil { display: inline-flex; align-items: center; gap: 2px; background: var(--cinza-bg); color: var(--texto); }
.conta.bm-do-perfil .fraca { font-size: 11px; }
button.x { border: 0; background: transparent; padding: 0 2px 0 4px; font-size: 13px; line-height: 1; color: var(--fraco); }
button.x:hover { color: var(--vermelho); }
.acessos { display: inline; }
.acessos button.link { font-size: 12px; margin-left: 2px; }
.lista-bms { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; }
.lista-bms label.linha-check input { margin: 0; }
/* a linha "Acesso: nº 52 (admin) · nº 58 · passar acesso" do cartão da página: embaixo do cabeçalho, com a largura toda */
.acessos-linha { font-size: 12px; color: var(--fraco); margin-top: 2px; }
.so-acesso { margin: 0; font-size: 13px; }

/* perfil do AdsPower = rosa choque, em todo o painel (23/10) */
.nperfil, h2.pf { color: var(--perfil); }
.nperfil { font-weight: 600; }
h2.pf { font-size: 13px; }
.conta.chip-perfil { background: var(--perfil-bg); color: var(--texto); display: inline-flex; align-items: center; gap: 2px; }
.conta.chip-perfil.susp { opacity: .7; }
.tag-susp { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--vermelho); border-radius: 4px; padding: 1px 6px; }
.perfil-acoes { display: inline-flex; gap: 10px; margin-left: auto; }
.perfil-acoes button.link { font-size: 12px; }
.perigo-txt { color: var(--vermelho); }
.perfil-bms { flex-basis: 100%; display: grid; gap: 4px; }
.perfil-bms > button.link { justify-self: start; font-size: 12px; }
/* contas de anúncio: disponível (verde), em uso hoje (amarelo), desativada (vermelho) */
.conta.st-livre { background: var(--verde-bg); color: var(--verde); }
.conta.st-uso { background: var(--amarelo-bg); color: var(--amarelo); }
.conta.st-ruim { background: var(--vermelho-bg); color: var(--vermelho); }
details.excluidos { font-size: 13px; }
details.excluidos > div { margin: 4px 0 0 14px; }
/* prontos para live: um cartão por conta com o botão verde */
.prontos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 8px; }
.pronto { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 10px; padding: 10px 12px; background: var(--painel); border: 1px solid var(--borda); border-left: 3px solid var(--verde); border-radius: var(--raio); min-width: 0; }
.pronto button.vai { grid-column: 1 / -1; width: 100%; }
.pronto .avatar.g { margin-right: 0; }
.pronto-info { display: grid; gap: 1px; min-width: 0; flex: 1; }
.pronto-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pronto-info .fraca { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.vai { background: #16a34a; border-color: #16a34a; color: #fff; font-weight: 600; }
button.vai:hover { background: #15803d; border-color: #15803d; }
button.vai .badge { background: rgba(255, 255, 255, .25); color: #fff; }
/* perfil do AdsPower aberto agora com alguém (o AdsPower deixa um perfil aberto num lugar só): âmbar = com outra pessoa */
.uso { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--amarelo-bg); color: var(--amarelo); white-space: nowrap; }
.uso.meu { background: var(--cinza-bg); color: var(--fraco); font-weight: 400; }
.uso-txt { color: var(--amarelo); font-size: 12px; }
.pronto .uso-txt { grid-column: 1 / -1; }
.pronto.ocupado { border-left-color: var(--amarelo); }
.pronto.ocupado button.vai:disabled { background: var(--cinza-bg); border-color: var(--borda); color: var(--fraco); cursor: not-allowed; opacity: 1; }
/* aba BMs: pixels (● verde = recebendo eventos) e as páginas com que dá para anunciar pelos perfis */
.px-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--cinza-bg); }
.px-chip .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--cinza); }
.px-chip.vivo { background: var(--verde-bg); color: var(--verde); }
.px-chip.vivo .ponto { background: var(--verde); box-shadow: 0 0 0 2px rgba(22, 163, 74, .25); }
.bm-paginas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin-top: 6px; }
.bm-pagina { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); min-width: 0; }
.bm-pagina > div { min-width: 0; }
.bm-pagina .avatar.p { width: 22px; height: 22px; vertical-align: middle; }
.bm-pagina .fraca .avatar.p { width: 16px; height: 16px; font-size: 8px; }
.duracao { align-self: end; padding-bottom: 10px; }
/* pedido de passar o acesso: o nome da conta do Facebook do perfil que recebe (quem passa procura em Adicionar novo) */
input[data-conta-fb] { width: 240px; max-width: 100%; padding: 3px 6px; font-size: 12px; }

/* aba Lives em quadro (26/10): colunas por situação lado a lado (rola na horizontal), cartões compactos (clicar abre o
   cartão completo); as pastas (Instagram bloqueado, escondidas) e as colunas vazias começam dobradas */
#bms { grid-template-columns: minmax(0, 1fr); }
.quadro { display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; padding: 2px 2px 12px; }
.kcol { --k: var(--fraco); flex: 1 0 250px; max-width: 360px; min-width: 0; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--k) 9%, var(--painel)); border: 1px solid color-mix(in srgb, var(--k) 30%, var(--borda));
  border-radius: 14px; }
.kcol.k-semchave { --k: var(--amarelo); }
.kcol.k-poucos { --k: var(--laranja); }
.kcol.k-prontas { --k: var(--fb); }
.kcol.k-noar { --k: var(--verde); }
.kcol.k-bloqueados { --k: var(--vermelho); }
.kcol-cab { display: flex; align-items: center; gap: 8px; padding: 10px 8px 4px 14px; }
.kcol-cab h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--k); }
.kcol-cab > .ico, .kcol.dobrada > .ico { color: var(--k); width: 16px; height: 16px; }
.kcol-n { min-width: 24px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--k) 22%, transparent);
  color: var(--k); font-weight: 700; font-size: 13px; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.kcol-cab .kcol-n { margin-left: auto; }
.kcol-dobrar { border: 0; background: transparent; padding: 2px 5px; color: var(--fraco); }
.kcol-dobrar:hover { color: var(--texto); }
.kcol-corpo { display: grid; gap: 8px; align-content: start; padding: 2px 8px 10px; max-height: 72vh; overflow-y: auto; }
.kcol-desc { margin: 0 4px 2px; font-size: 12px; color: var(--fraco); }
.kcol-vazio { margin: 4px 4px 2px; font-size: 13px; color: var(--fraco); font-style: italic; }
/* coluna dobrada: uma tira fina com a contagem e o nome de lado */
.kcol.dobrada { flex: 0 0 46px; max-width: 46px; align-items: center; gap: 10px; padding: 10px 0 16px; min-height: 230px; cursor: pointer; }
.kcol.dobrada:hover, .kcol.dobrada:focus-visible { border-color: var(--k); outline: 0; }
.kcol.dobrada .kcol-nome { writing-mode: vertical-rl; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--k); white-space: nowrap; }
/* cartão do quadro */
.kcard { display: grid; gap: 6px; padding: 9px 10px 10px; background: var(--painel); border: 1px solid var(--borda);
  border-radius: 10px; cursor: pointer; min-width: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.kcard:hover { border-color: color-mix(in srgb, var(--k) 65%, var(--borda)); }
.kcard:focus-visible { outline: 2px solid var(--k); outline-offset: 1px; }
.k-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; }
.k-et { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; line-height: 18px; padding: 0 7px;
  border-radius: 4px; background: var(--cinza-bg); color: var(--fraco); white-space: nowrap; }
.k-et .ico { width: 11px; height: 11px; }
.k-et.verde { background: var(--verde-bg); color: var(--verde); }
.k-et.amarelo { background: var(--amarelo-bg); color: var(--amarelo); }
.k-et.laranja { background: var(--laranja-bg); color: var(--laranja); }
.k-et.vermelho { background: var(--vermelho-bg); color: var(--vermelho); }
.k-quem { display: flex; align-items: center; gap: 8px; min-width: 0; }
.k-nomes { display: grid; min-width: 0; }
.k-nomes b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-arroba { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--fraco); font-size: 12px; white-space: nowrap; overflow: hidden; }
.k-arroba .logo { width: 14px; height: 14px; }
.k-info { font-size: 12px; color: var(--fraco); overflow-wrap: anywhere; }
.k-info b { color: var(--texto); }
.k-info .erro-txt { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.k-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; }
.k-resp { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; padding: 0 7px; border-radius: 999px;
  background: rgba(107, 78, 168, .16); border: 1px solid rgba(107, 78, 168, .45); font-weight: 600; }
.kcard .botoes { margin: 0; }
.kcard button.vai { width: 100%; }
.kcard.ocupado button.vai:disabled { background: var(--cinza-bg); border-color: var(--borda); color: var(--fraco); cursor: not-allowed; opacity: 1; }
.kcard button.mini { margin: 0; }
/* o cartão aberto do quadro (a janela) */
dialog.cartao-dlg { padding: 0; width: min(440px, calc(100vw - 32px)); }
.cdlg { padding: 10px 14px 14px; }
.cdlg-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cdlg-fechar { border: 0; background: transparent; font-size: 16px; padding: 2px 6px; color: var(--fraco); }
.cdlg-fechar:hover { color: var(--texto); }
.cartao-dlg .cartao { border-width: 3px 0 0; border-radius: 0; padding: 10px 0 0; background: transparent; margin-top: 6px; }
/* a pasta dos Instagram bloqueados nas visões Por perfil e Lista */
details.pasta-bloq > summary { font-size: 13px; font-weight: 600; color: var(--vermelho); }
details.pasta-bloq > summary .ico { width: 15px; height: 15px; }
@media (max-width: 560px) {
  .quadro { scroll-snap-type: x proximity; }
  .kcol { flex-basis: 82vw; scroll-snap-align: start; }
}

/* ================================================================ visual do Gerenciador de Anúncios (26/10)
   Pedido dele: "mais parecido com o gerenciador de anúncios do Facebook, minimalista e intuitivo, inclusive os botões e
   os avisos". Barra de ícones à esquerda, topo branco com o nome da seção, botões azuis/brancos, avisos com ícone,
   tabelas leves, notificações no sininho do canto. Vem por último: vale por cima das regras de antes. */
body { padding-left: var(--lateral); font: 14px/1.43 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; }
main { max-width: 1600px; padding: 20px 24px 96px; gap: 20px; }
h2 { font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--texto); }
h3 { font-size: 16px; font-weight: 600; }
.fraca, .meta { color: var(--fraco); }
.ok-txt { color: var(--verde); }
.pend-txt { color: var(--amarelo); }
.erro-txt { color: var(--laranja); }

/* barra da esquerda: as seções em ícones, como a do Gerenciador */
.lateral { position: fixed; z-index: 6; left: 0; top: 0; bottom: 0; width: var(--lateral); display: flex; flex-direction: column;
  align-items: center; gap: 6px; padding: 12px 0; background: var(--painel); border-right: 1px solid var(--borda); }
.lateral-logo { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; border-radius: 10px;
  background: var(--azul); color: #fff; }
.lateral-logo svg { width: 22px; height: 22px; }
.lateral .abas { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; border-radius: 0; background: none; width: 100%; }
.lateral button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px;
  margin: 0 auto; padding: 8px 2px 6px; border: 0; border-radius: 10px; background: transparent; color: var(--fraco);
  font-size: 11px; font-weight: 600; line-height: 1.2; white-space: normal; box-shadow: none; }
.lateral button .ico { width: 22px; height: 22px; margin: 0; }
.lateral button:hover { background: var(--hover); color: var(--texto); }
.lateral .abas button.ativa { background: var(--azul-bg); color: var(--azul); box-shadow: none; }
.lateral button .badge { position: absolute; top: 2px; right: 6px; min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 16px;
  background: #e4e6eb; color: var(--texto); }
.lateral button .badge.amarelo { background: #f7b928; color: #1c2b33; }
.lateral-fim { margin-top: auto; display: flex; flex-direction: column; gap: 4px; width: 100%; }

/* topo: o nome da seção à esquerda, as ferramentas à direita, a situação embaixo */
.topo { gap: 6px 16px; padding: 10px 24px; min-height: 56px; border-bottom: 1px solid var(--borda); box-shadow: none; }
.marca { font-size: 20px; font-weight: 700; color: var(--texto); }
.marca small { font-size: 13px; font-weight: 400; color: var(--fraco); margin-left: 6px; }
.topo .menu { gap: 8px; }
.topo .menu button { padding: 6px 12px; font-size: 13px; }
.topo .contadores { order: 3; flex: 1 1 100%; gap: 6px; }
.chip { padding: 2px 10px; font-size: 12px; font-weight: 600; line-height: 20px; background: var(--cinza-bg); color: var(--fraco); }
.chip.vermelho { background: var(--vermelho); color: #fff; }
button.chip { border: 0; }

/* botões: branco com borda (secundário), azul (principal), verde (subir a live), vermelho só no texto (destrutivo) */
button, a.botao { border: 1px solid var(--borda-forte); background: var(--painel); color: var(--texto); border-radius: 6px;
  padding: 7px 14px; font-weight: 600; line-height: 1.25; box-shadow: none; transition: background .12s, border-color .12s; }
button:hover, a.botao:hover { background: var(--hover); border-color: var(--borda-forte); }
button:focus-visible, a.botao:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--azul); outline-offset: 1px; }
button.prim { background: var(--azul); border-color: var(--azul); color: #fff; }
button.prim:hover { background: var(--azul-esc); border-color: var(--azul-esc); }
button.perigo { background: var(--painel); border-color: var(--borda-forte); color: var(--vermelho); }
button.perigo:hover { background: var(--vermelho-bg); border-color: var(--vermelho); }
button.vai { background: #1f8f3e; border-color: #1f8f3e; color: #fff; }
button.vai:hover { background: #177633; border-color: #177633; }
button:disabled, button:disabled:hover { opacity: .5; cursor: not-allowed; background: var(--painel); }
button.prim:disabled, button.vai:disabled { background: var(--cinza-bg); border-color: var(--borda); color: var(--fraco); opacity: 1; }
button.mini { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.controles button { padding: 5px 10px; font-size: 13px; }
.link, button.link { border: 0; background: none; padding: 0; color: var(--azul); text-decoration: none; font-weight: 600; font-size: 12px; }
.link:hover, button.link:hover { background: none; text-decoration: underline; }
.engrenagem, .engrenagem:hover { border: 0; background: transparent; }
.engrenagem:hover { color: var(--texto); }

/* campos */
input, select, textarea { background: var(--painel); border: 1px solid var(--borda-forte); border-radius: 6px; color: var(--texto); }
input:focus, select:focus, textarea:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 2px var(--azul-bg); }
label { color: var(--fraco); font-weight: 600; font-size: 12px; }

/* avisos ("Fazer agora" e afins): cartão branco com o ícone do tipo, o texto e os botões à direita */
.tarefas { gap: 8px; }
.tarefa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; background: var(--painel);
  border: 1px solid var(--borda); border-left: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.tarefa.n0, .tarefa.n1, .tarefa.n2 { border-left-color: var(--borda); background: var(--painel); }
.tarefa-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--amarelo-bg); color: var(--amarelo); }
.tarefa-ico .ico { width: 17px; height: 17px; margin: 0; }
.tarefa.n0 .tarefa-ico { background: var(--vermelho-bg); color: var(--vermelho); }
.tarefa.n1 .tarefa-ico { background: var(--laranja-bg); color: var(--laranja); }
.tarefa.n2 .tarefa-ico { background: var(--verde-bg); color: var(--verde); }
.tarefa.n3 .tarefa-ico { background: var(--azul-bg); color: var(--azul); }
.tarefa-txt { flex: 1 1 320px; min-width: 0; }
.tarefa > .botoes { margin: 0 0 0 auto; }
.dica { background: var(--azul-bg); border: 1px solid #cddcf7; border-radius: var(--raio); color: var(--texto); }
.aovivo-faixa { background: var(--vermelho-bg); border: 1px solid #f3c1c9; color: var(--texto); }

/* o aviso rápido (embaixo, à esquerda, como no Facebook) */
#aviso { left: calc(var(--lateral) + 20px); bottom: 20px; transform: translateY(16px); max-width: min(460px, calc(100vw - var(--lateral) - 120px));
  background: #1c2b33; color: #fff; border-radius: 8px; padding: 12px 16px; box-shadow: var(--sombra-alta); font-weight: 600; }
#aviso.mostra { transform: translateY(0); }
#aviso.ruim { background: #1c2b33; color: #fff; border-left: 4px solid #ff6b81; }

/* janelas: brancas, com sombra, título em cima e os botões embaixo à direita */
dialog { border: 0; border-radius: 12px; padding: 20px 24px; box-shadow: var(--sombra-alta); }
dialog::backdrop { background: rgba(0, 0, 0, .4); }
dialog .form > h3:first-child, .dlg-cab h3 { font-size: 20px; font-weight: 700; }
dialog .botoes.fim { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--borda); }
.dlg-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dlg-x, .dlg-x:hover { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: var(--cinza-bg); color: var(--fraco); font-size: 15px; }
.dlg-x:hover { background: #e4e6eb; color: var(--texto); }

/* tabelas: leves, cabeçalho cinza, linha que acende ao passar o mouse */
.tabela { border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
th { background: #f7f8fa; color: var(--fraco); font-size: 12px; font-weight: 600; padding: 9px 12px; border-bottom: 1px solid var(--borda); }
td { padding: 9px 12px; border-bottom: 1px solid #ebedf0; }
tbody tr:hover td { background: #f7f8fa; }

/* cartões, listas e abas */
.cartao { border: 1px solid var(--borda); border-top-width: 3px; border-radius: var(--raio); box-shadow: var(--sombra); }
.pronto, .bm-cartao, .kpi, .grafico, .cockpit, .usuario-card, .aviso { box-shadow: var(--sombra); }
.sub-abas { gap: 0; border-bottom: 1px solid var(--borda); }
.sub-abas button, .sub-abas button:hover { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none;
  padding: 10px 16px 9px; color: var(--fraco); }
.sub-abas button:hover { color: var(--texto); }
.sub-abas button.ativa { background: none; color: var(--azul); border-bottom-color: var(--azul); }
.modo { background: var(--cinza-bg); border-color: var(--borda); }
.modo button, .modo button:hover { border: 0; background: transparent; padding: 5px 12px; }
.modo button.ativa { background: var(--painel); color: var(--texto); box-shadow: var(--sombra); }
.chip-filtro, .chip-filtro:hover { background: var(--painel); border: 1px solid var(--borda-forte); color: var(--texto); font-weight: 600; padding: 4px 12px; }
.chip-filtro b { color: var(--fraco); }
.chip-filtro.ativa { background: var(--azul-bg); border-color: var(--azul); color: var(--azul); }
.chip-filtro.ativa b { color: var(--azul); }
.chip-gestor { box-shadow: none; }
.badge { background: var(--cinza-bg); color: var(--texto); font-weight: 700; }
details > summary { padding: 4px 0; }
.abas button.ativa { box-shadow: none; }

/* quadro (kanban): colunas neutras com a cor só no fio de cima e na bolinha; cartões brancos */
.kcol { --k: #8a8d91; background: #f7f8fa; border: 1px solid var(--borda); border-top: 3px solid var(--k); border-radius: 10px; }
.kcol.k-semchave { --k: #e0a800; }
.kcol.k-poucos { --k: #f2711c; }
.kcol.k-prontas { --k: #0866ff; }
.kcol.k-noar { --k: #31a24c; }
.kcol.k-bloqueados { --k: #e41e3f; }
.kcol-cab h3 { display: flex; align-items: center; gap: 7px; color: var(--texto); text-transform: none; letter-spacing: 0; font-size: 14px; }
.kcol-cab h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--k); flex: none; }
.kcol.pasta .kcol-cab h3::before { display: none; }
.kcol-n { background: #e4e6eb; color: var(--texto); }
.kcol-dobrar, .kcol-dobrar:hover { border: 0; background: transparent; }
.kcol.dobrada .kcol-nome { color: var(--texto); text-transform: none; letter-spacing: .02em; font-size: 13px; }
.kcol.dobrada:hover { background: var(--painel); border-color: var(--borda-forte); border-top-color: var(--k); }
.kcard { border: 1px solid var(--borda); box-shadow: var(--sombra); }
.kcard:hover { border-color: var(--azul); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.kcard:focus-visible { outline: 2px solid var(--azul); }
.k-et { font-weight: 600; border-radius: 999px; padding: 0 8px; }
.k-comp, .k-comp:hover { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; padding: 2px 7px; border: 0;
  border-radius: 999px; background: transparent; color: var(--fraco); font-size: 12px; }
.k-comp:hover { background: var(--azul-bg); color: var(--azul); }
.k-comp .ico { width: 15px; height: 15px; margin: 0; }
.k-resp + .k-comp { margin-left: 0; }
.cartao-dlg .cartao { box-shadow: none; }

/* o sininho no canto e a lista de notificações */
.sino { position: fixed; z-index: 15; right: 24px; bottom: 24px; display: grid; place-items: center; width: 52px; height: 52px;
  padding: 0; border: 1px solid var(--borda); border-radius: 50%; background: var(--painel); color: var(--texto); box-shadow: var(--sombra-alta); }
.sino:hover, .sino.aberto { background: var(--azul-bg); border-color: var(--azul); color: var(--azul); }
.sino .ico { width: 24px; height: 24px; margin: 0; }
.sino-n { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: #e41e3f; color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; border: 2px solid var(--painel); }
.notif { position: fixed; z-index: 16; right: 24px; bottom: 88px; width: min(400px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column; background: var(--painel); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-alta); }
.notif[hidden] { display: none; }
.notif-cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
.notif-cab h3 { font-size: 20px; font-weight: 700; }
.notif-cab .link { margin-left: auto; margin-right: 10px; font-size: 13px; }  /* "Ver tudo" / "Só o que pede ação", junto do ✕ */
.notif-lista { list-style: none; margin: 0; padding: 0 8px 8px; overflow-y: auto; display: grid; gap: 2px; }
.notif-item { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 9px 10px; border-radius: 8px; position: relative; }
.notif-item:hover { background: var(--hover); }
.notif-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--cinza-bg); color: var(--fraco); }
.notif-ico .ico { width: 16px; height: 16px; margin: 0; }
.notif-item.alerta .notif-ico { background: var(--laranja-bg); color: var(--laranja); }
.notif-txt { display: grid; gap: 2px; font-size: 13px; overflow-wrap: anywhere; padding-right: 14px; }
.notif-txt time { font-size: 12px; color: var(--fraco); }
.notif-item.novo { background: var(--azul-bg); }
.notif-item.novo .notif-txt time { color: var(--azul); font-weight: 600; }
.notif-item.novo::after { content: ""; position: absolute; right: 10px; top: 50%; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--azul); }
.notif-mais { margin: 0 auto 12px; }
.notif-vazio { padding: 6px 16px 18px; }

/* Compartilhar página: os 3 passos (a BM que tem a página → abrir no AdsPower → a BM que vai anunciar) */
dialog.dlg-comp { width: min(560px, calc(100vw - 32px)); }
.comp-pag { display: flex; align-items: center; gap: 10px; }
.comp-pag > div { display: grid; }
.comp-pag .fraca { display: inline-flex; align-items: center; gap: 5px; }
.comp-pag .logo { width: 15px; height: 15px; }
/* min-width: 0 nos passos e nas linhas: a lista de perfis com nome comprido ("· aberto com …") encolhe em vez de alargar a
   janela (antes ela passava da borda e abria cortada) */
.comp-passos { margin: 0; padding: 0; list-style: none; counter-reset: passo; display: grid; gap: 14px; min-width: 0; }
.comp-passos > li { counter-increment: passo; display: grid; gap: 6px; padding-left: 36px; position: relative; color: var(--texto); min-width: 0; }
.comp-passos > li::before { content: counter(passo); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--azul-bg); color: var(--azul); font-weight: 700; font-size: 13px; }
.comp-passos p { margin: 0; }
.comp-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.comp-linha select { flex: 1 1 220px; min-width: 0; max-width: 100%; }
.comp-linha input[data-comp-outra] { flex: 1 1 180px; }
.comp-linha .busca-sel { flex: 1 1 260px; }
.comp-linha .busca-sel select { flex: 1; }
.comp-id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--cinza-bg); }
.comp-id code { font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.comp-ja { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; }
.comp-ja ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.bms-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; font-size: 12px; margin-top: 2px; }

/* celular: a barra das seções vira uma faixa no alto e o conteúdo usa a tela toda */
@media (max-width: 640px) {
  body { padding-left: 0; }
  .lateral { position: sticky; top: 0; bottom: auto; width: 100%; height: auto; flex-direction: row; gap: 2px; padding: 4px 6px;
    border-right: 0; border-bottom: 1px solid var(--borda); overflow-x: auto; }
  .lateral-logo { display: none; }
  .lateral .abas { flex-direction: row; width: auto; }
  .lateral-fim { flex-direction: row; margin: 0 0 0 auto; width: auto; }
  .lateral button { width: 58px; }
  .topo { position: static; padding: 8px 14px; }
  main { padding: 14px 12px 96px; }
  #aviso { left: 12px; max-width: calc(100vw - 96px); }
  .sino { right: 14px; bottom: 14px; }
  .notif { right: 8px; bottom: 76px; }
}
/* iniciais no lugar da foto: uma cor por nome (classe, porque o CSP do painel barra style inline) */
.avatar.iniciais { background: #5b6470; }
.avatar.iniciais.av0 { background: #1b6fd8; } .avatar.iniciais.av1 { background: #2f8f3a; }
.avatar.iniciais.av2 { background: #b06d00; } .avatar.iniciais.av3 { background: #d6334f; }
.avatar.iniciais.av4 { background: #7b3fe4; } .avatar.iniciais.av5 { background: #0f8a8f; }
.avatar.iniciais.av6 { background: #d9620b; } .avatar.iniciais.av7 { background: #5b6470; }
/* o ✕ do cartão aberto igual ao das outras janelas */
.cdlg-fechar, .cdlg-fechar:hover { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: var(--cinza-bg); color: var(--fraco); font-size: 15px; }
.cdlg-fechar:hover { background: #e4e6eb; color: var(--texto); }
/* Compartilhar pixel: o ícone do pixel no lugar da foto da página */
.comp-px { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--azul-bg); color: var(--azul); flex: none; }
.comp-px .ico { width: 20px; height: 20px; margin: 0; }

/* ao vivo agora (26/10, pedido dele: "bordas vermelhas brilhosas e o Ao vivo em vermelho piscando"): o cartão da live no
   ar (quadro, por perfil, lista) ganha a borda vermelha que pulsa, e o "Ao vivo" fica vermelho piscando, como no
   Instagram. Só o que está no ar com sinal: o "ao vivo sem sinal" segue laranja (é problema). */
:root { --vivo: #e41e3f; }
@keyframes vivo-brilho {
  0%, 100% { box-shadow: 0 0 0 1px var(--vivo), 0 0 8px 1px rgba(228, 30, 63, .35); }
  50% { box-shadow: 0 0 0 2px var(--vivo), 0 0 20px 6px rgba(228, 30, 63, .55); }
}
@keyframes vivo-pisca { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.kcard.vivo, .kcard.vivo:hover, .cartao.aovivo, .cartao.b-aovivo { border-color: var(--vivo); animation: vivo-brilho 1.6s ease-in-out infinite; }
.cartao.aovivo, .cartao.b-aovivo { border-top-color: var(--vivo); }
.k-et.vivo { background: var(--vivo); color: #fff; animation: vivo-pisca 1.1s ease-in-out infinite; }
.aovivo .estado, tr.aovivo .estado-mini { color: var(--vivo); animation: vivo-pisca 1.1s ease-in-out infinite; }
.aovivo .bola { background: var(--vivo); box-shadow: 0 0 0 3px rgba(228, 30, 63, .2); }
.chip.vivo { display: inline-flex; align-items: center; gap: 6px; background: var(--vivo); color: #fff; }
.ponto-vivo { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: vivo-pisca 1s ease-in-out infinite; }
.kcol.k-noar { --k: var(--vivo); }
/* dentro da janela do cartão aberto o brilho sairia cortado: lá fica só o fio vermelho e o "Ao vivo" piscando */
.cartao-dlg .cartao { animation: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .kcard.vivo, .cartao.aovivo, .cartao.b-aovivo, .k-et.vivo, .aovivo .estado, tr.aovivo .estado-mini, .ponto-vivo { animation: none; }
}

/* Instagram que pediu verificação do número (31/10): laranja, fora das lives até alguém clicar Já verifiquei */
.verificacao .bola { background: var(--laranja); }
.verificacao .estado, tr.verificacao .estado-mini, .verif-txt, .chip.verif { color: var(--laranja); }
.kcol.k-verificacao { --k: #b54708; }
.botoes .marcas-ig { margin-left: auto; align-self: center; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; }