/* Painel v3 em teste (22/10/2026). O painel de sempre em /v3, com a mesma essência (visual A: a raposa, o laranja,
   a Inter, as texturas do jogo, a lista com o detalhe ao lado) e menos ruído. Pedido do dono: "manter a essência,
   deixar mais clean, reposicionar as configurações, alinhar as opções e bem menos poluído".
   Só vale com <html data-painel="v3"> (o comum.js liga no endereço /v3; o index.html traz esta folha desligada).
   Os seletores começam com :root[data-painel][data-visual] para passar na frente das regras do visual A
   (:root[data-visual="a"] ...) sem !important. O js/painel-v3.js muda o lugar dos botões do cartão. */

/* ---------------------------------------------------------------- casca */
/* o topo tinha 1120 px e o conteúdo 1360: a raposa e o "Sair" ficavam desalinhados da página */
:root[data-painel][data-visual] .barra-in { max-width: 1360px; padding: 10px 24px; }
:root[data-painel][data-visual] .barra { background: var(--superficie); backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-painel][data-visual] .barra-discord { background: transparent; color: var(--texto); border-color: var(--borda-campo); box-shadow: none; }
:root[data-painel][data-visual] .barra-discord:hover { background: var(--superficie-2); }
:root[data-painel][data-visual] .avatar { background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borda); }
:root[data-painel][data-visual] .conteudo { padding-top: 24px; }
/* o título da tela sem a frase de baixo (cada tela já explica o que precisa no próprio bloco) */
:root[data-painel][data-visual] .cabecalho { align-items: center; margin-bottom: 14px; }
:root[data-painel][data-visual] #sub-vista { display: none; }
:root[data-painel][data-visual] #titulo-vista { font-size: 24px; letter-spacing: -.02em; }
:root[data-painel][data-visual] .navegacao { margin-bottom: 18px; }
:root[data-painel][data-visual] .nav { padding: 11px 12px; }

/* ---------------------------------------------------------------- contas: o topo */
/* indicadores: só os que têm número hoje (os zerados somem), menores e sem a linha de detalhe cortada */
/* auto-fit: os que sobram se esticam e a linha fecha (antes sobrava um cartão sozinho na 2a linha) */
:root[data-painel][data-visual] .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 12px; }
:root[data-painel][data-visual] .kpi.zero { display: none; }
:root[data-painel][data-visual] .kpi { padding: 10px 14px; column-gap: 12px; border-radius: 10px; }
:root[data-painel][data-visual] .kpi-icone { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 8px; border: 0; background: var(--superficie-2); }
:root[data-painel][data-visual] .kpi-icone img { width: 22px; height: 22px; }
:root[data-painel][data-visual] .kpi-rotulo { font-size: 12px; line-height: 1.25; color: var(--muted); white-space: normal; }
:root[data-painel][data-visual] .kpi-valor { margin: 0; font-size: 18px; }
:root[data-painel][data-visual] .kpi-valor small { font-size: 13px; }
:root[data-painel][data-visual] .kpi-sub { display: none; }
/* vagas e tesouros: uma faixa fina cada */
:root[data-painel][data-visual] .vagas-secao,
:root[data-painel][data-visual] .tesouros-cartao { margin-top: 8px; padding: 8px 14px; border-radius: 10px; box-shadow: none; }
:root[data-painel][data-visual] .vagas-secao:not(.fechada),
:root[data-painel][data-visual] .tesouros-cartao:not(.fechada) { padding-bottom: 14px; }
:root[data-painel][data-visual] .vagas-tit,
:root[data-painel][data-visual] .tesouros-topo .vagas-tit { font-size: 14px; }

/* "Precisam de você": o título normal (não rótulo em maiúsculas), o nome nunca invade a frase e a frase cabe em 2 linhas */
:root[data-painel][data-visual] .va-precisa { margin-top: 20px; }
:root[data-painel][data-visual] .va-secao { margin: 0 0 8px; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 650; color: var(--texto); }
:root[data-painel][data-visual] .va-precisa-item { flex-wrap: nowrap; gap: 16px; padding: 10px 16px; }
:root[data-painel][data-visual] .va-quem { flex: 0 0 220px; }
:root[data-painel][data-visual] .va-nomes > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-painel][data-visual] .va-oque { flex: 1 1 auto; }
:root[data-painel][data-visual] .va-titulo { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:root[data-painel][data-visual] .va-sub { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
:root[data-painel][data-visual] .va-acoes { flex: none; }
/* com muitas contas a lista para nos 5 primeiros; "Mostrar mais" abre o resto */
:root[data-painel][data-visual] .va-precisa-mais { padding: 6px 12px; border-top: 1px solid var(--borda); }

/* ---------------------------------------------------------------- contas: filtros e lista */
/* os filtros numa linha; as macros numa faixa que rola de lado (eram 2 a 3 linhas de chips) */
:root[data-painel][data-visual] .va-filtros { gap: 8px; }
:root[data-painel][data-visual] .va-filtro { min-height: 32px; padding: 0 12px; font-size: 13px; }
:root[data-painel][data-visual] .va-filtro.va-macro { padding: 0 10px 0 6px; }
:root[data-painel][data-visual] .va-busca { min-height: 32px; font-size: 14px; }
:root[data-painel][data-visual] .va-macros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
  /* a máscara esmaece a ponta da faixa que rola (mostra que tem mais); não é preenchimento */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); } /* taste-skill-ignore */
:root[data-painel][data-visual] .va-macros::-webkit-scrollbar { display: none; }
:root[data-painel][data-visual] .va-macros .va-filtro { flex: none; }
:root[data-painel][data-visual] .secao-titulo { margin: 28px 0 10px; }

/* "Compacta" (curto) so no celular */
:root[data-painel][data-visual] .va-so-cel { display: none; }

/* grupos de contas (22/10): abas em cima dos filtros, o grupo escolhido sublinhado; no celular a faixa rola de lado */
:root[data-painel][data-visual] .va-pastas { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--borda); }
:root[data-painel][data-visual] .va-pastas::-webkit-scrollbar { display: none; }
@media (max-width: 720px) {
  /* no celular a ponta das faixas que rolam de lado esmaece, como a das macros (os estados ficavam cortados secos) */
  /* a busca divide a linha com Agrupar e Compacta; os estados ganham a linha de baixo inteira (ficavam espremidos) */
  :root[data-painel][data-visual] .va-filtros-linha .va-busca { flex: 1 1 0; min-width: 0; }
  :root[data-painel][data-visual] .va-filtros-linha #va-estados { order: 3; flex: 1 1 100%; }
  :root[data-painel][data-visual] .va-so-cel { display: inline; }
  :root[data-painel][data-visual] .va-pastas,
  :root[data-painel][data-visual] #va-estados { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); } /* taste-skill-ignore */
}
:root[data-painel][data-visual] .va-pasta { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0; background: none; color: var(--muted); font-weight: 600; }
:root[data-painel][data-visual] .va-pasta:hover { background: var(--superficie-2); color: var(--texto); }
:root[data-painel][data-visual] .va-pasta[aria-pressed="true"] { background: none; color: var(--texto); border-bottom-color: var(--texto); }
:root[data-painel][data-visual] .va-pasta[aria-pressed="true"] .va-filtro-n { color: var(--fraco); opacity: 1; }
:root[data-painel][data-visual] .va-pasta.sem-grupo:not([aria-pressed="true"]) { font-weight: 500; }
:root[data-painel][data-visual] .va-pasta-nome { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-painel][data-visual] .va-pasta .va-mini { font-size: 12px; font-weight: 600; color: var(--ambar-texto); }
:root[data-painel][data-visual] .va-pasta-nova { flex: none; min-height: 30px; margin: 0 4px 4px; border-style: dashed; color: var(--muted); }
:root[data-painel][data-visual] .va-pasta-campo { flex: none; width: 200px; min-height: 32px; margin: 0 4px 4px; }
:root[data-painel][data-visual] .va-pasta-dica { flex: none; margin-bottom: 4px; font-size: 13px; color: var(--fraco); white-space: nowrap; }
:root[data-painel][data-visual] .va-pasta-acao { flex: none; margin-bottom: 4px; }
:root[data-painel][data-visual] .va-pasta-nova + .va-pasta-acao { margin-left: auto; }
/* arrastando uma conta: os grupos viram alvos (tracejado) e o que está embaixo do mouse acende */
:root[data-painel][data-visual].va-arrastando .va-pasta:not([data-grupo=""]),
:root[data-painel][data-visual].va-arrastando .va-pasta-nova { outline: 1px dashed var(--borda-forte); outline-offset: -4px; }
:root[data-painel][data-visual].va-arrastando .va-pastas button > * { pointer-events: none; }
:root[data-painel][data-visual].va-arrastando .va-pastas .soltar { background: var(--verde-suave); color: var(--verde-texto); outline: 2px solid var(--verde); outline-offset: -2px; }
/* a linha que dá para arrastar mostra a pega (⠿) à esquerda ao passar o mouse */
:root[data-painel][data-visual] .conta.va-fechada[draggable="true"] { position: relative; }
:root[data-painel][data-visual] .conta.va-fechada[draggable="true"]::before { content: "⠿"; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  font-size: 12px; line-height: 1; color: var(--fraco); opacity: 0; transition: opacity .12s; pointer-events: none; }
:root[data-painel][data-visual] .conta.va-fechada[draggable="true"]:hover::before { opacity: 1; }

/* a linha da conta: nick e macro à esquerda; o estado e os coins do dia à direita, um embaixo do outro.
   Todas as linhas têm a mesma altura (antes os coins entravam embaixo do nick e a linha crescia). */
:root[data-painel][data-visual] .conta.va-fechada .conta-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id st" "id coins";
  align-items: center; column-gap: 12px; row-gap: 2px; min-height: 60px; padding: 10px 16px; }
:root[data-painel][data-visual] .conta.va-fechada .conta-topo:not(:has(> .conta-coins)) { grid-template-areas: "id st"; }
:root[data-painel][data-visual] .conta-topo > .conta-id { grid-area: id; }
:root[data-painel][data-visual] .conta-topo > .status { grid-area: st; justify-self: end; }
:root[data-painel][data-visual] .conta-topo > .conta-coins { grid-area: coins; justify-self: end; padding: 0; background: none; color: var(--verde-texto); font-size: 12px; font-weight: 600; }
:root[data-painel][data-visual] .conta-topo > .conta-coins.neutro { color: var(--fraco); }
:root[data-painel][data-visual] .conta.va-fechada .status { padding: 0; border: 0; background: none; max-width: 220px; }
:root[data-painel][data-visual] .conta.va-fechada .nick-linha { flex-wrap: nowrap; min-width: 0; }
:root[data-painel][data-visual] .conta.va-fechada .nick { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-painel][data-visual] .conta.va-fechada .sub { max-width: 100%; }
:root[data-painel][data-visual] .va-duplo.com-detalhe > .contas { flex: 0 1 420px; }
:root[data-painel][data-visual] .va-duplo.com-detalhe > .contas .sub { max-width: 100%; }

/* ---------------------------------------------------------------- o detalhe da conta */
:root[data-painel][data-visual] .va-detalhe > .conta .conta-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id st" "id coins";
  align-items: center; column-gap: 16px; row-gap: 4px; padding: 18px 20px; }
:root[data-painel][data-visual] .va-detalhe > .conta .conta-topo:not(:has(> .conta-coins)) { grid-template-areas: "id st"; }
:root[data-painel][data-visual] .va-detalhe > .conta .conta-topo > .conta-coins { font-size: 13px; }
:root[data-painel][data-visual] .va-detalhe .sub { overflow-wrap: normal; }
/* os avisos colados um no outro (o ban aparecia em dois quadros soltos) */
:root[data-painel][data-visual] .avisos { gap: 6px; padding: 0 20px; }
:root[data-painel][data-visual] .avisos:not(:empty) { padding-top: 14px; }
:root[data-painel][data-visual] .aviso { padding: 10px 12px; border-radius: 8px; }
/* o ban: "conta banida desde... tenta de novo às..." e a frase do servidor viram um quadro só, vermelho */
:root[data-painel][data-visual] .avisos > .aviso-ruim:has(+ .aviso[data-chave=banida]) { border-radius: 8px 8px 0 0; padding-bottom: 4px; }
:root[data-painel][data-visual] .avisos > .aviso-ruim + .aviso[data-chave=banida] { margin-top: -6px; padding-top: 0; border-color: transparent; border-radius: 0 0 8px 8px; background: var(--vermelho-suave); color: var(--vermelho-texto); }
:root[data-painel][data-visual] .avisos > .aviso-ruim + .aviso[data-chave=banida] svg { visibility: hidden; }
/* os títulos de dentro do cartão em letra normal (eram rótulos pequenos em maiúsculas espaçadas) */
:root[data-painel][data-visual] .conta h3 { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 650; color: var(--texto); }
:root[data-painel][data-visual] .conta .escolha-topo h3 { font-size: 16px; }
/* as abas sozinhas na linha ("Trocar macro" foi para a barra de ações) */
:root[data-painel][data-visual] .abas-linha { margin: 14px 20px; }
:root[data-painel][data-visual] .conta .abas-linha .abas-conta { max-width: 100%; }
/* os números: só os que têm valor, sem buraco cinza quando sobram poucos */
:root[data-painel][data-visual] .numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; background: none; margin: 4px -1px -1px 0; border-top: 1px solid var(--borda); border-bottom: 0; }
:root[data-painel][data-visual] .num { border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda); padding: 12px 18px; }
:root[data-painel][data-visual] .num.vazio { display: none; }
:root[data-painel][data-visual] .num .v { font-size: 18px; }
/* o gráfico de 14 dias some quando todos os dias são zero (fica a frase "0 nos últimos 7 dias") */
:root[data-painel][data-visual] .grafico-caixa { padding: 16px 20px 10px; }
:root[data-painel][data-visual] .grafico-caixa:not(:has(.coluna:not(.zero))) .grafico { display: none; }
:root[data-painel][data-visual] .grafico-caixa:not(:has(.coluna:not(.zero))) .grafico-topo h3 { margin-bottom: 0; }
:root[data-painel][data-visual] .eventos { padding: 12px 20px; }

/* a barra de ações: Pausar/Ligar, Configurar e Trocar macro; o resto no "Mais", em grupos */
:root[data-painel][data-visual] .acoes { gap: 8px; padding: 12px 16px; background: var(--superficie); border-top: 1px solid var(--borda); }
:root[data-painel][data-visual] .acoes > [data-acao=config] { border-color: var(--borda-campo); color: var(--texto); }
:root[data-painel][data-visual] .acoes > .troca-macro { min-height: 0; }
/* os grupos lado a lado: o menu fica baixo e não é cortado no alto do painel da conta */
:root[data-painel][data-visual] .mais-lista { display: flex; align-items: stretch; width: max-content; max-width: min(620px, calc(100vw - 48px)); min-width: 0; padding: 4px; gap: 0; }
:root[data-painel][data-visual] .mais-grupo { display: flex; flex-direction: column; flex: 0 0 auto; min-width: 160px; padding: 4px 0; }
:root[data-painel][data-visual] .mais-grupo + .mais-grupo { border-left: 1px solid var(--borda); }
:root[data-painel][data-visual] .mais-grupo:not(:has(> .btn:not([hidden]))) { display: none; }
:root[data-painel][data-visual] .mais-grupo-tit { margin: 4px 12px 2px; font-size: 12px; font-weight: 650; color: var(--fraco); }
:root[data-painel][data-visual] .mais-lista .btn { min-height: 36px; padding: 6px 12px; font-size: 14px; color: var(--texto); text-align: left; white-space: nowrap; }
:root[data-painel][data-visual] .mais-lista .btn-perigo { color: var(--vermelho-texto); }

/* ---------------------------------------------------------------- Configurar */
/* sem o parágrafo de instruções; a chave "Mostrar as explicações" fica na linha do título */
:root[data-painel][data-visual] dialog.janela-cfg .cfg-legenda { display: none; }
:root[data-painel][data-visual] dialog.janela-cfg .cfg-legenda-linha { justify-content: flex-end; margin: 0 0 10px; }
:root[data-painel][data-visual] dialog.janela-cfg .cfg-explicacoes { margin: 0; color: var(--muted); }
:root[data-painel][data-visual] dialog.janela-cfg > form > h2 { margin-bottom: 10px; font-size: 18px; }
:root[data-painel][data-visual] .cfg-nota-salvar { display: none; }
/* os passos: uma lista simples, sem uma caixa em volta de cada um */
:root[data-painel][data-visual] .cfg-aba { border: 0; background: none; box-shadow: none; border-radius: 8px; }
:root[data-painel][data-visual] .cfg-aba:hover { background: var(--superficie-2); }
:root[data-painel][data-visual] .cfg-aba.sel { background: var(--laranja-suave); box-shadow: none; }
:root[data-painel][data-visual] .cfg-aba.sel .enc-tipo-nome { color: var(--texto); font-weight: 650; }
:root[data-painel][data-visual] .cfg-aba .enc-tipo-nome { font-weight: 550; color: var(--muted); }
:root[data-painel][data-visual] .cfg-aba.falta:not(.sel) { background: var(--vermelho-suave); }
/* o passo aberto: sem a caixa cinza em volta; o título com uma linha embaixo */
:root[data-painel][data-visual] .cfg-painel { padding: 0; margin: 0; border: 0; background: none; }
:root[data-painel][data-visual] .cfg-topo { padding: 2px 0 12px; margin: 0; border-bottom: 1px solid var(--borda); }
:root[data-painel][data-visual] .cfg-topo .enc-icone { width: 28px; height: 28px; }
/* os campos numa coluna só, separados por uma linha: cada opção numa linha alinhada (antes era uma grade de
   cartões de alturas diferentes, com buracos entre eles) */
:root[data-painel][data-visual] .cfg-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
:root[data-painel][data-visual] .cfg-grade > :is(.cfg-toggle, .cfg-campo, .cfg-home, .cfg-escolha) { margin: 0; padding: 14px 2px; border: 0; border-bottom: 1px solid var(--borda); border-radius: 0; background: none; box-shadow: none; }
:root[data-painel][data-visual] .cfg-grade > :last-child { border-bottom: 0; }
:root[data-painel][data-visual] .cfg-grade .cfg-rotulo { margin-bottom: 0; gap: 12px; }
:root[data-painel][data-visual] .cfg-grade .cfg-rotulo b { font-weight: 600; }
/* uma coluna de 24 px para o ícone em toda linha (com ou sem ícone): todos os textos começam no mesmo x */
:root[data-painel][data-visual] .cfg-grade .cfg-rotulo .enc-icone { width: 24px; height: 24px; }
:root[data-painel][data-visual] .cfg-grade .cfg-rotulo:not(:has(> .enc-icone))::before { content: ""; flex: none; width: 24px; }
:root[data-painel][data-visual] .cfg-grade > .cfg-escolha > :not(.cfg-rotulo),
:root[data-painel][data-visual] .cfg-grade > .cfg-campo > small.ajuda,
:root[data-painel][data-visual] .cfg-grade > .cfg-home > :not(.cfg-rotulo, .cfg-home-linha) { margin-left: 36px; }
/* (22/10) a opção do passo Homes que mostra ou esconde homes (ex.: "Guardar cada minério num MKB próprio"), em cima
   da lista, no mesmo jeito das linhas; a explicação só com "Mostrar as explicações" ou o "?" */
:root[data-painel][data-visual] .ilu-lista > .ilu-opcao { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; margin: 0; padding: 12px 2px; border: 0;
  border-bottom: 1px solid var(--borda); border-radius: 0; background: none; box-shadow: none; }
:root[data-painel][data-visual] .ilu-lista > .ilu-opcao .enc-icone { width: 24px; height: 24px; align-self: center; }
:root[data-painel][data-visual] .janela-cfg:not(.com-ajuda) .ilu-opcao .ajuda:not(.aberta) { display: none; }
/* (22/10) campos opcionais que andam juntos (ex.: as homes dos blocos) numa caixa que abre e fecha */
:root[data-painel][data-visual] .cfg-recolhido { padding: 0 2px; border-bottom: 1px solid var(--borda); }
:root[data-painel][data-visual] .cfg-recolhido:not(:has(> :not(summary):not([hidden]))) { display: none; }
:root[data-painel][data-visual] .cfg-recolhido > summary { padding: 14px 0 14px 36px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
:root[data-painel][data-visual] .cfg-recolhido > :is(.cfg-campo, .cfg-home, .cfg-toggle) { margin: 0 0 0 36px; padding: 10px 0; border-top: 1px solid var(--borda); }
:root[data-painel][data-visual] .cfg-recolhido > [hidden] { display: none; }
:root[data-painel][data-visual] .cfg-recolhido > .cfg-home > :not(.cfg-rotulo, .cfg-home-linha) { margin-left: 36px; }

/* (22/10, dono: "o filtro de vender e a venda na placa do minerar estão muito sujos") uma linha por minério: o nome,
   o que fazer depois de derreter (Bloco, Solto, Vender), as placas que valem agora em escolhas curtas e a frase do
   que o robô faz com ele */
:root[data-painel][data-visual] .cfg-mnv-nada { margin-top: 6px; font-size: 13px; }
:root[data-painel][data-visual] .cfg-mnv-linha { padding: 12px 0; border-top: 1px solid var(--borda); }
:root[data-painel][data-visual] .cfg-mnv-linha[hidden] { display: none; }
:root[data-painel][data-visual] .cfg-mnv-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 32px; }
:root[data-painel][data-visual] .cfg-mnv-topo > .enc-icone { width: 22px; height: 22px; }
:root[data-painel][data-visual] .cfg-mnv-topo > b { font-size: 14px; font-weight: 600; }
:root[data-painel][data-visual] .cfg-mnv-modo { display: inline-flex; margin-left: auto; border: 1px solid var(--borda-campo); border-radius: 8px; overflow: hidden; }
:root[data-painel][data-visual] .cfg-mnv-modo[hidden] { display: none; }
:root[data-painel][data-visual] .cfg-mnv-modo > button { min-height: 30px; padding: 0 12px; border: 0; background: var(--superficie); color: var(--muted); font: 600 13px Inter, system-ui, sans-serif; cursor: pointer; }
:root[data-painel][data-visual] .cfg-mnv-modo > button + button { border-left: 1px solid var(--borda-campo); }
:root[data-painel][data-visual] .cfg-mnv-modo > button:hover { color: var(--texto); }
:root[data-painel][data-visual] .cfg-mnv-modo > button.sel { background: var(--laranja-suave); color: var(--texto); }
:root[data-painel][data-visual] .cfg-mnv-modo > button[hidden] { display: none; }
:root[data-painel][data-visual] .cfg-mnv-modo > button:disabled { opacity: .45; cursor: not-allowed; }
:root[data-painel][data-visual] .cfg-mnv-forma { margin-left: 0; align-self: flex-end; }
:root[data-painel][data-visual] .cfg-mnv-forma > button { min-height: 34px; font-weight: 500; }
:root[data-painel][data-visual] .cfg-mnv-campos { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 8px 0 0 32px; }
:root[data-painel][data-visual] .cfg-mnv-campos[hidden] { display: none; }
:root[data-painel][data-visual] .cfg-mnv-frase { margin: 6px 0 0 32px; font-size: 13px; line-height: 1.45; color: var(--muted); }
:root[data-painel][data-visual] .cfg-mnv-aviso { color: var(--ambar-texto); }
:root[data-painel][data-visual] .cfg-lhv .cfg-mnv-campos,
:root[data-painel][data-visual] .cfg-lhv .cfg-mnv-frase { margin-left: 0; }
:root[data-painel][data-visual] .cfg-lhv .cfg-mnv-campos { margin-top: 10px; }
:root[data-painel][data-visual] .cfg-cel { display: grid; gap: 3px; min-width: 0; }
:root[data-painel][data-visual] .cfg-cel[hidden] { display: none; }
:root[data-painel][data-visual] .cfg-cel-rot { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
:root[data-painel][data-visual] .cfg-cel-rot .enc-icone { width: 16px; height: 16px; }
:root[data-painel][data-visual] .cfg-cel-rot .enc-icone img { width: 16px; height: 16px; }
:root[data-painel][data-visual] .cfg-cel :is(select, input) { min-height: 32px; max-width: 240px; padding: 0 8px; border: 1px solid var(--borda-campo); border-radius: 8px;
  background: var(--superficie); color: var(--texto); font: 400 13px Inter, system-ui, sans-serif; }
:root[data-painel][data-visual] .cfg-cel input[type=number] { width: 110px; }

/* (22/10, dono: "abrir os menus também no configurar") os outros menus da macro embaixo dos passos; abrem por cima */
:root[data-painel][data-visual] .cfg-menus { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borda); }
:root[data-painel][data-visual] .cfg-menus-tit { margin: 0 10px 4px; font-size: 12px; font-weight: 650; color: var(--fraco); }
:root[data-painel][data-visual] .cfg-menu .cfg-menu-seta { margin-left: auto; padding-left: 6px; font-size: 12px; color: var(--fraco); }
@media (max-width: 1099px) {
  :root[data-painel][data-visual] .cfg-menus { flex-direction: row; flex: none; align-items: center; gap: 6px; margin: 0; padding: 0 0 0 8px; border-top: 0; border-left: 1px solid var(--borda); }
  :root[data-painel][data-visual] .cfg-menus-tit { display: none; }
}
@media (max-width: 560px) {
  :root[data-painel][data-visual] .cfg-mnv-campos,
  :root[data-painel][data-visual] .cfg-mnv-frase { margin-left: 0; }
  :root[data-painel][data-visual] .cfg-mnv-modo { margin-left: 0; }
}
/* interruptor: ícone e texto à esquerda, a chave à direita; ligado = só a chave laranja (sem pintar a linha) */
:root[data-painel][data-visual] .cfg-grade > .cfg-toggle { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; }
:root[data-painel][data-visual] .cfg-grade > .cfg-toggle:not(:has(> .enc-icone))::before { content: ""; }
:root[data-painel][data-visual] .cfg-grade > .cfg-toggle .ajuda { margin-top: 2px; }
:root[data-painel][data-visual] .cfg-grade > .cfg-toggle.on { background: none; border-color: var(--borda); }
:root[data-painel][data-visual] .cfg-toggle .enc-icone { width: 24px; height: 24px; align-self: center; }
:root[data-painel][data-visual] .cfg-toggle-txt b { font-weight: 600; }
/* número e texto: o rótulo à esquerda e o campo estreito à direita (90 não precisa de uma caixa de 450 px) */
:root[data-painel][data-visual] .cfg-grade > .cfg-campo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; }
:root[data-painel][data-visual] .cfg-grade > .cfg-campo > :is(input, .senha-caixa) { width: 260px; max-width: 100%; }
:root[data-painel][data-visual] .cfg-grade > .cfg-campo > input[type=number] { width: 110px; }
:root[data-painel][data-visual] .cfg-grade > .cfg-campo:has(> textarea) { grid-template-columns: minmax(0, 1fr); }
:root[data-painel][data-visual] .cfg-grade > .cfg-campo > small.ajuda { grid-column: 1 / -1; margin: 0; }
/* home: o rótulo à esquerda e o "/home nome" à direita */
:root[data-painel][data-visual] .cfg-grade > .cfg-home { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: center; gap: 6px 16px; }
:root[data-painel][data-visual] .cfg-grade > .cfg-home > :not(.cfg-rotulo, .cfg-home-linha) { grid-column: 1 / -1; }
/* escolha: o rótulo em cima e as opções numa fila do tamanho do texto (antes uma grade de colunas fixas deixava
   "Oeste" ou "Manter desligado" sozinho na linha de baixo) */
:root[data-painel][data-visual] .cfg-grade > .cfg-escolha > .cfg-rotulo { margin-bottom: 10px; }
:root[data-painel][data-visual] .cfg-opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
:root[data-painel][data-visual] .cfg-opcao { flex: 0 1 auto; padding: 7px 12px; border-radius: 8px; background: var(--superficie); border-color: var(--borda-campo); }
:root[data-painel][data-visual] .cfg-opcao.sel { border-color: var(--laranja); background: var(--laranja-suave); box-shadow: 0 0 0 1px var(--laranja) inset; color: var(--texto); }
/* opções com desenho (Fazer Poções) continuam em grade, que é o certo para cartões com imagem */
:root[data-painel][data-visual] .cfg-opcoes:has(> .cfg-opcao.com-icone) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
/* (26/10) os grupos (Para você / Contra o inimigo) numa coluna sem quebra: com o wrap de cima o Chrome media cada grupo
   como se os cartões estivessem um embaixo do outro e deixava um vão enorme, empurrando o resto da etapa para baixo */
:root[data-painel][data-visual] .cfg-opcoes.com-grupos { flex-wrap: nowrap; gap: 10px; }
/* (26/10) etapa compacta (Poção): tudo numa tela de 1366x768 sem rolar; cartões menores, 5 por fila, a receita deitada */
:root[data-painel][data-visual] .cfg-compacta .cfg-grade > :is(.cfg-toggle, .cfg-campo, .cfg-home, .cfg-escolha) { padding: 5px 2px; }
:root[data-painel][data-visual] .cfg-compacta .cfg-grade > .cfg-escolha > .cfg-rotulo { margin-bottom: 6px; }
:root[data-painel][data-visual] .cfg-compacta .cfg-opcoes:has(> .cfg-opcao.com-icone) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 5px; }
:root[data-painel][data-visual] .cfg-compacta .cfg-opcoes.com-grupos { gap: 6px; }
:root[data-painel][data-visual] .cfg-compacta .cfg-opcoes-grupo { gap: 4px; }
:root[data-painel][data-visual] .cfg-compacta .cfg-opcao.com-icone { padding: 4px 8px; gap: 8px; }
:root[data-painel][data-visual] .cfg-compacta .cfg-opcao.com-icone .enc-icone { width: 24px; height: 24px; }
:root[data-painel][data-visual] .cfg-compacta .cfg-receita { gap: 4px; }
:root[data-painel][data-visual] .cfg-compacta .cfg-receita-passo { flex-direction: row; min-width: 0; max-width: none; padding: 4px 6px; gap: 5px; text-align: left; }
:root[data-painel][data-visual] .cfg-compacta .cfg-receita-passo.fim { max-width: 190px; }
@media (min-width: 900px) {
  /* o título do grupo à esquerda dos cartões, não numa linha em cima */
  :root[data-painel][data-visual] .cfg-compacta .cfg-opcoes-grupo { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; column-gap: 10px; }
  :root[data-painel][data-visual] .cfg-compacta .cfg-opcoes:has(> .cfg-opcao.com-icone) { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  :root[data-painel][data-visual] .cfg-compacta .cfg-opcoes-grupo > .cfg-itens-titulo { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
  /* o título da etapa e o resumo numa linha só */
  :root[data-painel][data-visual] .cfg-compacta .cfg-topo { align-items: center; padding-bottom: 8px; }
  :root[data-painel][data-visual] .cfg-compacta .cfg-topo > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
  :root[data-painel][data-visual] .cfg-compacta .cfg-topo small { margin-top: 0; }
  /* Amplificador: o rótulo, os cartões e a nota do filtro ("Invisibilidade não tem o nível II...") na mesma linha */
  :root[data-painel][data-visual] .cfg-compacta .cfg-escolha:has(> .cfg-filtro-nota) { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 14px; }
  :root[data-painel][data-visual] .cfg-compacta .cfg-escolha:has(> .cfg-filtro-nota) > :not(.cfg-rotulo, .cfg-opcoes, .cfg-filtro-nota) { grid-column: 1 / -1; }
  :root[data-painel][data-visual] .cfg-compacta .cfg-escolha:has(> .cfg-filtro-nota) > .cfg-rotulo { margin-bottom: 0; }
  :root[data-painel][data-visual] .cfg-compacta .cfg-escolha:has(> .cfg-filtro-nota) > .cfg-opcoes { display: flex; margin-left: 0; }
  :root[data-painel][data-visual] .cfg-compacta .cfg-escolha:has(> .cfg-filtro-nota) .cfg-opcao { width: 170px; }
  :root[data-painel][data-visual] .cfg-compacta .cfg-escolha > .cfg-filtro-nota { margin: 0; }
  /* a receita numa linha só: com a pólvora e o amplificador o nome de cada passo quebra em duas linhas em vez de a fila descer */
  :root[data-painel][data-visual] .cfg-compacta .cfg-receita { flex-wrap: nowrap; }
  :root[data-painel][data-visual] .cfg-compacta .cfg-receita-passo { flex: 0 1 auto; min-width: 0; }
}
:root[data-painel][data-visual] .cfg-compacta .cfg-receita-passo .enc-icone { width: 20px; height: 20px; flex: none; }
:root[data-painel][data-visual] .cfg-compacta .cfg-receita-mkb { margin: 4px 0 0; }
/* grade de itens (filtros com textura): sem a caixa em volta */
:root[data-painel][data-visual] .cfg-grade > .cfg-escolha.cfg-itens .cfg-itens-legenda { margin: 4px 0 8px; }
/* "No jogo, confira" do passo Homes em letra normal */
:root[data-painel][data-visual] .ilu-dicas > summary { text-transform: none; letter-spacing: 0; font-size: 13px; }
/* o "?" menor e mais discreto */
:root[data-painel][data-visual] .ajuda-bt { width: 18px; height: 18px; border-color: var(--borda); color: var(--fraco); }

@media (min-width: 1100px) {
  /* título à esquerda e a chave das explicações à direita, na mesma linha */
  :root[data-painel][data-visual] dialog.janela-cfg form > h2 { grid-column: 1 / -1; grid-row: 1; align-self: center; margin: 0 0 14px; }
  :root[data-painel][data-visual] dialog.janela-cfg form > .cfg-legenda-linha { grid-column: 2; grid-row: 1; align-self: center; margin: 0 0 14px; }
  :root[data-painel][data-visual] dialog.janela-cfg form > .cfg-abas { gap: 2px; }
  :root[data-painel][data-visual] .cfg-aba { padding: 7px 10px; }
  :root[data-painel][data-visual] .cfg-aba .enc-icone { width: 22px; height: 22px; }
}
@media (max-width: 1099px) {
  /* passos numa faixa que rola de lado (antes 8 a 12 quadrados ocupavam a 1a tela do celular) */
  :root[data-painel][data-visual] .cfg-abas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 12px; padding-bottom: 2px; }
  :root[data-painel][data-visual] .cfg-abas::-webkit-scrollbar { display: none; }
  :root[data-painel][data-visual] .cfg-aba { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--borda); }
  :root[data-painel][data-visual] .cfg-aba.sel { border-color: var(--laranja-borda); }
  :root[data-painel][data-visual] .cfg-aba .cfg-passo { position: static; }
  :root[data-painel][data-visual] .cfg-aba .cfg-badge { position: static; }
  :root[data-painel][data-visual] .cfg-aba .enc-icone { width: 20px; height: 20px; }
  :root[data-painel][data-visual] .cfg-aba .enc-tipo-nome { white-space: nowrap; }
}

/* ---------------------------------------------------------------- Configurar: tamanho fixo */
/* a janela fica do mesmo tamanho em todos os passos (antes crescia e encolhia a cada aba); o que passar rola dentro
   dela, com os passos e os botões sempre no lugar */
:root[data-painel][data-visual] dialog.janela.janela-cfg { height: min(880px, calc(100vh - 32px)); }
:root[data-painel][data-visual] dialog.janela-cfg > form { min-height: 100%; }
@media (min-width: 1100px) {
  :root[data-painel][data-visual] dialog.janela-cfg > form { grid-template-rows: auto auto minmax(0, 1fr) auto; }
  :root[data-painel][data-visual] dialog.janela-cfg > form > .cfg-sobre { grid-row: 2; }
  :root[data-painel][data-visual] dialog.janela-cfg > form > .cfg-abas,
  :root[data-painel][data-visual] dialog.janela-cfg > form > .cfg-paineis { grid-row: 3; align-self: start; }
  :root[data-painel][data-visual] dialog.janela-cfg > form > .cfg-botoes { grid-row: 4; align-self: end; }
}
@media (max-width: 1099px) {
  :root[data-painel][data-visual] dialog.janela-cfg > form { display: flex; flex-direction: column; }
  :root[data-painel][data-visual] dialog.janela-cfg > form > .cfg-paineis { flex: 1 0 auto; }
}
@media (max-width: 560px) {
  :root[data-painel][data-visual] dialog.janela.janela-cfg { height: calc(100vh - 16px); }
}

/* ---------------------------------------------------------------- Configurar: o passo Homes */
/* as homes numa lista de linhas finas (eram cartões com borda colorida, ~70 px cada: com 13 homes a lista passava de
   1.000 px). O estado fica só na marca (verde = gravada, vermelha = falta, número tracejado = opcional); a linha aberta fica laranja-clara */
:root[data-painel][data-visual] .ilu-lista { gap: 0; border-top: 1px solid var(--borda); }
:root[data-painel][data-visual] .cfg-home.ilu-linha { padding: 5px 8px; border: 0; border-bottom: 1px solid var(--borda); border-radius: 0; background: none; box-shadow: none; }
:root[data-painel][data-visual] .cfg-home.ilu-linha:hover { background: var(--superficie-2); }
:root[data-painel][data-visual] .cfg-home.ilu-linha.ativa { background: var(--laranja-suave); border-radius: 8px; border-bottom-color: transparent; box-shadow: none; }
:root[data-painel][data-visual] .ilu-linha .cfg-rotulo { font-size: 13px; }
:root[data-painel][data-visual] .ilu-linha .cfg-rotulo b { font-weight: 600; }
:root[data-painel][data-visual] .ilu-linha .cfg-home-linha input { min-height: 32px; height: 32px; padding: 0 8px; font-size: 13.5px; }
:root[data-painel][data-visual] .ilu-linha .cfg-prefixo { padding: 0 6px; background: var(--superficie-2); border-color: var(--borda); color: var(--fraco); }
:root[data-painel][data-visual] .ilu-linha .ilu-marca { width: 20px; height: 20px; font-size: 11.5px; }
:root[data-painel][data-visual] .ilu-linha small.ajuda,
:root[data-painel][data-visual] .ilu-linha .cfg-sethome { padding: 2px 0 4px 27px; }
:root[data-painel][data-visual] .ilu-resumo { padding: 8px 12px; border-radius: 8px; }

/* ---------------------------------------------------------------- lista compacta (muitas contas) */
/* uma linha fina por conta: o nick e a macro à esquerda, o estado e os coins do dia à direita (40 px por conta) */
:root[data-painel][data-visual] .va-compacta[aria-pressed="true"] { background: var(--laranja-suave); border-color: var(--laranja-borda); color: var(--texto); }
:root[data-painel][data-visual] .contas.compacta .conta.va-fechada .conta-topo { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "id st coins"; min-height: 40px; padding: 6px 14px; column-gap: 14px; }
:root[data-painel][data-visual] .contas.compacta .conta.va-fechada .conta-topo:not(:has(> .conta-coins)) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id st"; }
:root[data-painel][data-visual] .contas.compacta .conta.va-fechada .conta-avatar { width: 24px; height: 24px; border-radius: 6px; font-size: 11px; }
:root[data-painel][data-visual] .contas.compacta .conta.va-fechada .conta-id { gap: 10px; }
:root[data-painel][data-visual] .contas.compacta .conta.va-fechada .conta-id > div { display: flex; flex: 1 1 0; align-items: baseline; gap: 8px; min-width: 0; }
:root[data-painel][data-visual] .contas.compacta .conta.va-fechada .nick { font-size: 14px; }
/* o nick nunca encolhe antes da macro */
:root[data-painel][data-visual] .contas.compacta .conta.va-fechada .nick-linha { flex: 0 0 auto; max-width: 70%; min-width: 0; }
/* da linha de baixo fica só o nome da macro (o resto da frase some) */
:root[data-painel][data-visual] .contas.compacta .conta.va-fechada .sub { flex: 1 1 0; min-width: 0; font-size: 0; }
:root[data-painel][data-visual] .contas.compacta .conta.va-fechada .sub .sub-macro { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--fraco); }
/* com o detalhe aberto: a lista um pouco mais larga e sem o nome da macro */
:root[data-painel][data-visual] .va-duplo.com-detalhe > .contas.compacta { flex: 0 1 460px; }
:root[data-painel][data-visual] .va-duplo.com-detalhe > .contas.compacta .conta.va-fechada .sub { display: none; }
:root[data-painel][data-visual] .va-duplo.com-detalhe > .contas.compacta .conta.va-fechada .status { max-width: 160px; }
:root[data-painel][data-visual] .contas.compacta .conta.va-fechada .conta-vip,
:root[data-painel][data-visual] .contas.compacta .conta.va-fechada .conta-servidor { display: none; }
:root[data-painel][data-visual] .contas.compacta .conta.va-fechada .status { max-width: 200px; font-size: 12.5px; }
:root[data-painel][data-visual] .contas.compacta .conta-topo > .conta-coins { min-width: 76px; text-align: right; }
:root[data-painel][data-visual] .contas.compacta .va-grupo { min-height: 34px; }

/* ---------------------------------------------------------------- aba Skills e itens */
/* (22/10, dono: "a aba de skills ta muito grande") uma linha por skill: nome, barra fina, XP/h (quando sobe) e nível;
   o próximo nível e a passiva no passar do mouse. Com espaço (sem o quadro de itens ao lado), 2 ou 3 colunas */
:root[data-painel][data-visual] .painel { padding: 16px 20px; }
:root[data-painel][data-visual] .skills-topo + .skills { margin-top: 4px; }
/* as colunas têm largura fixa (eram "auto" em cada linha e a barra mudava de lugar de uma skill para outra) */
:root[data-painel][data-visual] .skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); column-gap: 32px; }
:root[data-painel][data-visual] .skills.com-xph { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
:root[data-painel][data-visual] .skill { grid-template-columns: minmax(88px, 1.2fr) minmax(40px, 1fr) 100px; grid-template-areas: "nome barra nivel" "det det det";
  align-items: center; column-gap: 10px; margin: 0; padding: 7px 4px; border-bottom: 1px solid var(--borda); cursor: pointer; }
:root[data-painel][data-visual] .skills.com-xph .skill { grid-template-columns: minmax(88px, 1.2fr) minmax(40px, 1fr) 96px 100px; grid-template-areas: "nome barra xph nivel" "det det det det"; }
:root[data-painel][data-visual] .skill:hover { background: var(--superficie-2); }
:root[data-painel][data-visual] .skill:focus-visible { outline: 2px solid var(--laranja); outline-offset: -2px; }
:root[data-painel][data-visual] .skill-nome { grid-area: nome; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-painel][data-visual] .skill > .trilho { grid-area: barra; height: 3px; }
:root[data-painel][data-visual] .skill-xph { grid-area: xph; justify-self: end; font-size: 12px; font-weight: 600; color: var(--verde-texto); font-variant-numeric: tabular-nums; white-space: nowrap; }
:root[data-painel][data-visual] .skill-nivel { grid-area: nivel; justify-self: end; white-space: nowrap; }
/* o clique abre os detalhes embaixo da linha */
:root[data-painel][data-visual] .skill-det { grid-area: det; display: none; gap: 3px; margin: 8px 0 2px; padding: 10px 12px; border-radius: 8px; background: var(--superficie-2); font-size: 13px; line-height: 1.45; color: var(--muted); cursor: default; }
:root[data-painel][data-visual] .skill.aberta { background: none; }
:root[data-painel][data-visual] .skill.aberta .skill-det { display: grid; }
:root[data-painel][data-visual] .skill-det p { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; margin: 0; }
:root[data-painel][data-visual] .skill-det-rot { color: var(--fraco); }
/* no celular o XP/h fica só nos detalhes (a linha não cabe as 4 colunas) */
@media (max-width: 560px) {
  :root[data-painel][data-visual] .skills.com-xph .skill { grid-template-columns: minmax(88px, 1.2fr) minmax(40px, 1fr) 92px; grid-template-areas: "nome barra nivel" "det det det"; }
  :root[data-painel][data-visual] .skill-xph { display: none; }
}
:root[data-painel][data-visual] .skill-det b { color: var(--texto); font-weight: 600; }
:root[data-painel][data-visual] .skill-nivel .mais { padding: 0 5px; font-size: 11.5px; }
:root[data-painel][data-visual] .trilho i { background: var(--laranja); }
:root[data-painel][data-visual] .skill-meta,
:root[data-painel][data-visual] .skill-passiva { display: none; }
:root[data-painel][data-visual] .item { margin: 0; padding: 7px 0; border-top: 1px solid var(--borda); row-gap: 4px; }
:root[data-painel][data-visual] .itens .item:first-child { border-top: 0; }
:root[data-painel][data-visual] .item .trilho { height: 3px; }
:root[data-painel][data-visual] .item .trilho i { background: var(--borda-campo); }
:root[data-painel][data-visual] .rodape-painel { margin-top: 8px; }

/* ---------------------------------------------------------------- outras telas */
/* Macros: o nome comprido ("Upar Mineração/Escavação/Lenhador") quebra em vez de passar da caixa */
:root[data-painel][data-visual] .macro-tit h3,
:root[data-painel][data-visual] .macro-tit h2 { min-width: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- celular */
@media (max-width: 720px) {
  :root[data-painel][data-visual] .barra-in { padding: 8px 16px; gap: 8px; }
  :root[data-painel][data-visual] .usuario { gap: 6px; }
  :root[data-painel][data-visual] .usuario .btn { white-space: nowrap; padding-left: 8px; padding-right: 8px; }
  /* na linha da conta o estado fica com no máximo 42% da tela; o nick nunca vira "Do…" */
  :root[data-painel][data-visual] .conta.va-fechada .status { max-width: 42vw; }
  :root[data-painel][data-visual] .conta.va-fechada .conta-topo { padding: 10px 12px; column-gap: 8px; }
  /* lista compacta no celular: só o nick e o estado */
  :root[data-painel][data-visual] .contas.compacta .conta.va-fechada .conta-topo { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id st"; padding: 6px 12px; }
  :root[data-painel][data-visual] .contas.compacta .conta.va-fechada .sub,
  :root[data-painel][data-visual] .contas.compacta .conta-topo > .conta-coins { display: none; }
  :root[data-painel][data-visual] .contas.compacta .conta.va-fechada .status { max-width: 52vw; }
  :root[data-painel][data-visual] .contas.compacta .conta.va-fechada .nick-linha { max-width: 100%; }
  :root[data-painel][data-visual] .usuario-email,
  :root[data-painel][data-visual] .avatar { display: none; }
  /* o menu do e-mail (26/10) fica so com a letra no celular */
  :root[data-painel][data-visual] .menu-email .avatar { display: grid; }
  :root[data-painel][data-visual] .conteudo { padding: 16px 16px 48px; }
  :root[data-painel][data-visual] #titulo-vista { font-size: 20px; }
  /* os indicadores numa faixa que rola de lado (eram até 4 linhas de cartões antes do "Precisam de você") */
  :root[data-painel][data-visual] .kpis { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 12px; padding: 0 16px 2px; }
  :root[data-painel][data-visual] .kpis::-webkit-scrollbar { display: none; }
  :root[data-painel][data-visual] .kpi { flex: 0 0 auto; min-width: 140px; padding: 8px 10px; column-gap: 8px; }
  :root[data-painel][data-visual] .kpi-icone { width: 30px; height: 30px; }
  :root[data-painel][data-visual] .kpi-icone img { width: 20px; height: 20px; }
  :root[data-painel][data-visual] .kpi-valor { font-size: 16px; }
  :root[data-painel][data-visual] .va-precisa-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  :root[data-painel][data-visual] .va-quem { flex: none; }
  :root[data-painel][data-visual] .va-titulo { -webkit-line-clamp: 2; }
  :root[data-painel][data-visual] .va-sub { display: none; }
  /* o detalhe por cima da lista: nada passa da largura da tela */
  :root[data-painel][data-visual] .contas > .conta.va-aberta .conta-topo { padding: 12px 16px; }
  :root[data-painel][data-visual] .contas > .conta.va-aberta .nick-linha { flex-wrap: wrap; }
  :root[data-painel][data-visual] .abas-linha { margin: 12px 16px; }
  :root[data-painel][data-visual] .conta .abas-linha .abas-conta { width: 100%; }
  :root[data-painel][data-visual] .avisos { padding: 0 16px; }
  :root[data-painel][data-visual] .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-painel][data-visual] .num { padding: 10px 16px; }
  :root[data-painel][data-visual] .grafico-caixa { padding: 14px 16px 8px; overflow: hidden; }
  :root[data-painel][data-visual] .eventos { padding: 12px 16px; }
  :root[data-painel][data-visual] .acoes { padding: 10px 16px; }
  :root[data-painel][data-visual] .acoes > .btn { flex: 1 1 auto; }
  :root[data-painel][data-visual] .mais-lista { flex-direction: column; width: min(300px, calc(100vw - 32px)); }
  :root[data-painel][data-visual] .mais-grupo { flex: none; }
  :root[data-painel][data-visual] .mais-grupo + .mais-grupo { border-left: 0; border-top: 1px solid var(--borda); }
  /* Configurar no celular: rótulo em cima e o campo na largura toda, tudo a partir da margem (sem a coluna do ícone) */
  :root[data-painel][data-visual] .cfg-grade .cfg-rotulo:not(:has(> .enc-icone))::before { display: none; }
  :root[data-painel][data-visual] .cfg-grade .cfg-rotulo { gap: 8px; }
  :root[data-painel][data-visual] .cfg-grade > .cfg-escolha > :not(.cfg-rotulo),
  :root[data-painel][data-visual] .cfg-grade > .cfg-campo > small.ajuda,
  :root[data-painel][data-visual] .cfg-grade > .cfg-home > :not(.cfg-rotulo, .cfg-home-linha) { margin-left: 0; }
  :root[data-painel][data-visual] .cfg-grade > .cfg-toggle:not(:has(> .enc-icone)) { grid-template-columns: minmax(0, 1fr) auto; }
  :root[data-painel][data-visual] .cfg-grade > .cfg-toggle:not(:has(> .enc-icone))::before { display: none; }
  :root[data-painel][data-visual] .cfg-grade > .cfg-campo,
  :root[data-painel][data-visual] .cfg-grade > .cfg-home { grid-template-columns: minmax(0, 1fr); }
  :root[data-painel][data-visual] .cfg-grade > .cfg-campo > :is(input, .senha-caixa),
  :root[data-painel][data-visual] .cfg-grade > .cfg-campo > input[type=number] { width: 100%; }
}