/* =====================================================================
   FLUXO — telas do quadro do Daniel (Whimsical, 19/08/2026).

   Correções que ele deu depois de ver a primeira versão:
   - O laranja/dourado/vermelho chapado do quadro era só pra dar destaque
     no desenho. Vale a paleta que o app já usa: verde / amarelo /
     vermelho, e só como SINAL. Linha fina, nada de bloco pintado.
   - O cartão de anúncio continua o MESMO que já existe dentro da loja
     (.produto-card do tokens.css). Aqui só entra o que é novo: as 4
     métricas de tamanho igual, o bloco de marcar e as variações.
   - Nada de texto resumido/cortado — recomendação aparece inteira.
   - App é 95% desktop: a régua é a tela larga, não o celular.
   ===================================================================== */

/* Painel denso (cartões em quadrante + 2 colunas de apoio) precisa de
   mais largura que o .container padrão de 1100px. */
.container.fx-largo{max-width:1560px;}

/* ------------------------------------------------- cabeçalho de loja */
.fx-topo{display:flex;align-items:center;gap:12px;margin-bottom:6px;flex-wrap:wrap;}
.fx-voltar{background:transparent;border:1px solid var(--border);border-radius:8px;
  padding:6px 13px;font-size:12px;color:var(--muted);cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:6px;}
.fx-voltar:hover{border-color:var(--border-accent);color:var(--text-2);}

/* Etiqueta do responsável: ele pediu "3 etiquetas com cores brilhantes"
   pra marcar quem cuida da loja. Fica o sinal de cor, num ponto em vez
   de um bloco chapado. */
.fx-etiqueta{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;
  color:var(--text-2);background:var(--surface);border:1px solid var(--border);
  padding:5px 11px;border-radius:7px;}
.fx-etiqueta .ponto{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.fx-titulo-loja{font-size:20px;font-weight:600;letter-spacing:.2px;}

/* Barra de filtros. O quadro separa "troca página" (navega) de "apenas
   filtro" (só esconde cartão) — quem navega leva seta, quem filtra não. */
.fx-barra-filtros{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  border-bottom:1px solid var(--border);padding-bottom:12px;}
/* Repouso legivel. Era border:var(--border) + color:var(--muted): cinza
   escuro sobre fundo escuro, o filtro sumia mesmo sem estar selecionado. */
.fx-filtro{padding:6px 13px;border-radius:8px;font-size:12.5px;cursor:pointer;
  background:transparent;border:1px solid var(--borda-forte);color:var(--text-2);
  font-family:inherit;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;}
.fx-filtro:hover{border-color:var(--borda-forte);color:var(--text);}
.fx-filtro.on:hover{color:var(--sel-texto);}
.fx-filtro.on{background:var(--sel-fundo);border-color:var(--sel-borda);
  color:var(--sel-texto);font-weight:500;box-shadow:var(--sel-brilho);
  backdrop-filter:blur(6px);}
/* O número dentro do chip selecionado precisa acompanhar o fundo claro -
   senão fica cinza-claro sobre branco e some. */
.fx-filtro.on span{color:rgba(10,15,16,.62) !important;}
.fx-filtro-nav{color:var(--text-2);}
.fx-sep{width:1px;height:20px;background:var(--border);flex-shrink:0;}

/* Diálogo de confirmação. Centralizado e com o peso da ação que ele
   está pedindo - o alert() do navegador aparecia colado no topo, com o
   endereço do site no título. */
.fx-modal-fundo{position:fixed;inset:0;background:rgba(4,8,9,.72);
  backdrop-filter:blur(3px);z-index:90;}
.fx-modal{position:fixed;z-index:91;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(94vw,470px);max-height:86vh;overflow-y:auto;background:var(--surface);
  border:1px solid var(--borda-forte);border-radius:var(--radius);padding:22px 24px;
  display:flex;flex-direction:column;gap:15px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.9);}
.fx-modal-titulo{font-size:17px;font-weight:600;line-height:1.3;color:var(--text);}
.fx-modal-alerta{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;
  line-height:1.5;color:var(--text-2);background:#2a1c1c;border:1px solid var(--crit);
  border-radius:10px;padding:11px 13px;}
.fx-modal-alerta svg{color:var(--crit);flex-shrink:0;margin-top:1px;}
.fx-modal-linhas{display:flex;flex-direction:column;gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.fx-modal-linha{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  background:var(--surface-2);padding:9px 13px;font-size:12.5px;color:var(--muted);}
.fx-modal-linha b{color:var(--text);font-weight:500;text-align:right;}
.fx-modal-passos{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:5px;
  font-size:12.5px;color:var(--text-2);}
.fx-modal-botoes{display:flex;gap:10px;justify-content:flex-end;margin-top:2px;}
.fx-modal-botoes .btn{padding:11px 18px;}

/* Guardião: vermelho com mensagem, verde sem — em borda + ponto. */
.fx-guardiao{margin-left:auto;padding:6px 14px;border-radius:8px;font-size:12px;
  cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:8px;
  background:transparent;}
.fx-guardiao .ponto{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.fx-guardiao.sem-msg{border:1px solid var(--border-accent);color:var(--accent);}
.fx-guardiao.sem-msg .ponto{background:var(--accent);}
.fx-guardiao.com-msg{border:1px solid var(--crit);color:var(--crit);}
.fx-guardiao.com-msg .ponto{background:var(--crit);}

/* ----------------------------------- layout da loja (régua: desktop) */
/* Colunas de apoio enxutas pra sobrar largura ao miolo — é onde estão os
   anúncios, que é o que o Daniel olha o dia inteiro. */
.fx-layout-loja{display:grid;grid-template-columns:196px minmax(0,1fr) 176px;gap:12px;
  align-items:start;}
.fx-col{display:flex;flex-direction:column;gap:12px;min-width:0;}

/* TOP 3 com hierarquia de verdade: a posição manda (número grande e
   apagado à esquerda), o título é UMA linha só (nunca quebra em três,
   que era o que deixava com cara de amador), e as métricas ficam numa
   régua alinhada embaixo. */
/* Numa coluna de 172px não cabe miniatura + nome + números na MESMA
   linha sem picar o nome em 12 caracteres. Então o nome ganha a largura
   inteira do cartão, e a linha de cima carrega posição, foto e o ROAS
   (que é o número que decide quem é top). */
.fx-top3{display:flex;flex-direction:column;}
.fx-top3-item{padding:12px 0;border-bottom:1px solid var(--border);min-width:0;}
.fx-top3-item:last-child{border-bottom:none;padding-bottom:2px;}
.fx-top3-linha{display:flex;align-items:center;gap:8px;min-width:0;}
.fx-top3-pos{font-size:11px;font-weight:700;color:var(--faint);flex-shrink:0;
  font-variant-numeric:tabular-nums;width:15px;}
.fx-top3-img{width:28px;height:28px;border-radius:6px;background:var(--surface-2);
  border:1px solid var(--border);flex-shrink:0;overflow:hidden;display:flex;
  align-items:center;justify-content:center;}
.fx-top3-img img{width:100%;height:100%;object-fit:cover;}
.fx-top3-nome{font-size:11px;color:var(--text-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0;flex:1;}
/* Faturamento é o número que decide a ordem — vem grande. */
.fx-top3-valor{display:flex;align-items:baseline;gap:7px;margin-top:8px;}
.fx-top3-fat{font-size:16px;font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:-.2px;}
.fx-top3-un{font-size:10.5px;color:var(--muted);}
.fx-top3-nums{display:flex;gap:12px;margin-top:6px;font-size:10px;color:var(--muted);
  font-variant-numeric:tabular-nums;}

.fx-meta-linha{display:flex;gap:16px;}
.fx-meta-box{flex:1;min-width:0;}
.fx-meta-box .rot{font-size:10.5px;color:var(--muted);}
.fx-meta-box .val{font-size:16px;font-weight:600;margin-top:3px;}

/* ------------------------------------------- cartão de anúncio
   Estrutura = .produto-card, igual já é hoje. O que muda:

   1) As 4 métricas ficam do MESMO tamanho, sempre (pedido literal: "os
      campos de métricas... todos do mesmo tamanho independente das
      sugestões, a tela não pode quebrar"). minmax(0,1fr) garante isso.
   2) A recomendação NÃO é cortada — texto inteiro, o cartão cresce.
      Por isso align-items:start no grid: cartão alto não estica os
      vizinhos. */
/* Cartão em quadrante, no espírito da vitrine do próprio Mercado Livre
   (referência que o Daniel mandou): a IMAGEM manda, ocupa o topo inteiro;
   embaixo vem título, preço e o resto, compacto e arejado. */
/* Duas garantias ao mesmo tempo:
   - o 220px assegura NO MÍNIMO 3 anúncios lado a lado até num monitor de
     1366 (pedido literal: "quero ao menos 3 anúncios lado a lado");
   - o 23% impede que uma tela grande empilhe 5 ou 6 colunas espremidas —
     em 1920 dá 4 cartões largos, onde "conversão" ainda cabe inteiro.
   Quem vencer manda: em tela estreita vale o pixel, em tela larga vale a
   porcentagem. */
.fx-grid-anuncios{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(max(220px,23%),1fr));
  gap:12px;align-items:start;}

.fx-anuncio{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
  min-width:0;}
/* Foto mais baixa que quadrada: o cartão estava alto demais ("muito
   extensos"), e a foto é o que mais ocupava. */
.fx-anuncio-foto{width:100%;aspect-ratio:16/9;background:var(--surface-2);
  border-bottom:1px solid var(--border);display:flex;align-items:center;
  justify-content:center;position:relative;}
/* A foto fica ABSOLUTA dentro da moldura: fora do fluxo, ela nao
   consegue esticar o cartao. Sem isso uma foto 384x500 forcava a
   moldura a 405px de altura em vez dos 174 do 16:9, e cada cartao
   ficava de um tamanho. */
.fx-anuncio-foto img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;}
/* Faixa de estado: linha fina no topo da foto, em vez de pintar o cartão. */
.fx-anuncio-estado{position:absolute;top:0;left:0;right:0;height:3px;}
/* Expandir variações: discreto, à direita da foto (pedido literal). */
.fx-anuncio-foto .fx-expandir{position:absolute;right:8px;bottom:8px;
  background:rgba(10,15,16,.82);backdrop-filter:blur(2px);}
.fx-anuncio-corpo{padding:12px 13px;display:flex;flex-direction:column;gap:10px;
  min-width:0;}
.fx-anuncio-titulo{font-size:12.5px;line-height:1.4;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:35px;}

/* As 4 métricas: mesma largura sempre (minmax(0,1fr)), sem caixa pintada —
   só uma linha fina separando, pra não competir com a foto. */
.stat-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.stat-grid-4 .stat-mini{background:transparent;border-radius:0;padding:8px 1px;
  text-align:center;min-width:0;overflow:hidden;border-left:1px solid var(--border);}
.stat-grid-4 .stat-mini:first-child{border-left:none;}
/* Nome por extenso, sem abreviar — então nada de letter-spacing comendo
   largura: "conversão" tem que caber inteiro na coluna mais estreita. */
.stat-grid-4 .stat-mini .rotulo{font-size:8px;letter-spacing:0;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;
  font-weight:600;}
.stat-grid-4 .stat-mini .valor{font-size:13.5px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}

/* Preço no formato da vitrine do ML: o cheio riscado em cima, embaixo o
   que vale grande, com o % OFF ao lado — o único verde do bloco. */
.fx-precos{display:flex;flex-direction:column;gap:1px;}
.fx-preco-cheio{font-size:11px;color:var(--muted);text-decoration:line-through;}
.fx-preco-linha{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.fx-preco-promo{font-size:19px;font-weight:600;color:var(--text);letter-spacing:-.2px;}
.fx-off{font-size:11px;font-weight:600;color:var(--accent);}

/* Recomendação: linha fina de estado à esquerda, sem fundo pintado.
   Resposta ao "não teria outra forma de deixar os cards no mesmo tamanho
   sem deixá-los em tamanhos diferentes?": tem — altura fixa com rolagem
   PRÓPRIA. O texto continua inteiro (nada é resumido nem cortado), quem
   rola é a caixinha, não a página, e todo cartão fecha na mesma altura. */
.fx-reco{border-left:2px solid var(--border);padding-left:11px;height:76px;
  overflow-y:auto;overscroll-behavior:contain;}
.fx-reco::-webkit-scrollbar{width:3px;}
.fx-reco::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;}
.fx-reco .titulo{font-size:12.5px;font-weight:600;margin:0 0 4px;}
.fx-reco .detalhe{font-size:12px;color:var(--text-2);line-height:1.55;margin:0;}

/* Histórico da alteração — o quadro pede: o que foi alterado, há quantos
   dias, e o resultado. min-height de 2 linhas pelo mesmo motivo da caixa
   de recomendação: anúncio nunca alterado tem 1 linha, alterado tem 2, e
   essa diferença sozinha já desalinhava a altura dos cartões. */
.fx-historico{font-size:11px;color:var(--muted);line-height:1.5;min-height:33px;}
.fx-historico b{color:var(--text-2);font-weight:600;}

/* Bloco de marcar. "Após marcar não dá opção de desmarcar." */
.fx-marcar{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;
  border-top:1px solid var(--border);padding-top:11px;}
/* Instrução curta pro colaborador: executar primeiro, marcar depois. */
.fx-marcar-aviso{grid-column:1/-1;font-size:10.5px;color:var(--muted);line-height:1.45;
  margin-bottom:2px;}
.fx-marca{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);
  cursor:pointer;background:none;border:none;font-family:inherit;padding:0;text-align:left;}
.fx-marca:hover{color:var(--text-2);}
.fx-marca .bolinha{width:13px;height:13px;border-radius:50%;background:transparent;
  border:1px solid var(--border);flex-shrink:0;transition:background .12s ease;}
.fx-marca.feita{color:var(--accent);cursor:default;}
.fx-marca.feita .bolinha{background:var(--accent);border-color:var(--accent);}

.fx-rodape{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--border);padding-top:11px;flex-wrap:wrap;}
.fx-feito{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);
  cursor:pointer;background:none;border:none;font-family:inherit;padding:0;flex-shrink:0;}
.fx-feito .quad{width:14px;height:14px;border-radius:4px;background:transparent;
  border:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;
  justify-content:center;color:var(--bg);}
.fx-feito.on{color:var(--accent);}
.fx-feito.on .quad{background:var(--accent);border-color:var(--accent);}

.fx-expandir{background:transparent;border:1px solid var(--border);border-radius:7px;
  padding:5px 10px;font-size:11px;color:var(--muted);cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.fx-expandir:hover{border-color:var(--border-accent);color:var(--text-2);}

/* Variações abrem num painel FIXO na lateral direita — a tela não mexe e
   o usuário não precisa rolar nada pra ver ("a variação deve ser
   expandida para lateral direita sem o usuário precisar rolar a tela").
   Quem rola, se a família for grande, é a lista dentro do painel. */
.fx-variacoes{display:flex;flex-direction:column;flex:1;overflow-y:auto;min-height:0;}
.fx-var{display:flex;align-items:center;gap:12px;padding:10px 2px;
  border-bottom:1px solid var(--border);}
.fx-var:last-child{border-bottom:none;}
.fx-var .mini{width:28px;height:28px;border-radius:6px;background:var(--surface-2);
  border:1px solid var(--border);flex-shrink:0;overflow:hidden;display:flex;
  align-items:center;justify-content:center;}
.fx-var .mini img{width:100%;height:100%;object-fit:cover;}
.fx-var .campos{display:grid;grid-template-columns:1.6fr repeat(4,minmax(56px,1fr));
  gap:4px 12px;flex:1;min-width:0;align-items:center;}
.fx-var .campos span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:block;min-width:0;font-size:12px;color:var(--text-2);}
.fx-var .campos .rot{font-size:8.5px;font-weight:600;color:var(--faint);letter-spacing:.3px;
  text-transform:uppercase;line-height:1.1;}
.fx-var .campos .zerado{color:var(--crit);}
.fx-var .campos .baixo{color:var(--warn);}

/* --------------------------------------------- página de promoção */
.fx-layout-promo{display:grid;grid-template-columns:270px minmax(0,1fr) 230px;gap:16px;
  align-items:start;}
.fx-linha-toggle{display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--border);}
.fx-linha-toggle:last-child{border-bottom:none;}

/* Cada tipo de promoção é uma automação com seu próprio bloco: quando
   ligada, abre nome + % e o botão Iniciar dela. */
.fx-bloco-promo{border-top:1px solid var(--border);}
.fx-bloco-promo.ligado{background:var(--surface-2);border-radius:10px;padding:0 11px;
  margin:8px -11px;border-top:none;}

.fx-grid-promo{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.fx-card-promo{background:transparent;border:1px solid var(--border);border-radius:10px;
  padding:11px;display:flex;flex-direction:column;gap:7px;cursor:pointer;
  font-family:inherit;text-align:left;color:inherit;}
.fx-card-promo:hover{border-color:var(--border-accent);}
.fx-card-promo.sel{border-color:var(--accent);background:var(--surface);}
.fx-card-promo .capa{width:100%;height:52px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;
  justify-content:center;overflow:hidden;}
.fx-card-promo .capa img{width:100%;height:100%;object-fit:cover;}
.fx-card-promo .nome{font-size:11px;line-height:1.35;color:var(--text-2);}

.fx-nota{border-left:2px solid var(--border);padding:3px 0 3px 12px;font-size:12px;
  color:var(--muted);line-height:1.55;}

/* ------------------------- resultado das automações (aprendizado)
   Cada execução vira uma linha avaliável: + acertou, − errou. */
.fx-exec{display:flex;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--border);}
.fx-exec:last-child{border-bottom:none;}
.fx-nota-botoes{display:flex;gap:6px;flex-shrink:0;}
.fx-nota-btn{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);
  background:transparent;color:var(--muted);cursor:pointer;display:flex;
  align-items:center;justify-content:center;font-family:inherit;padding:0;}
.fx-nota-btn.mais:hover,.fx-nota-btn.mais.on{border-color:var(--accent);color:var(--accent);}
.fx-nota-btn.menos:hover,.fx-nota-btn.menos.on{border-color:var(--crit);color:var(--crit);}
.fx-nota-btn.on{background:var(--surface-2);}

/* ----------------------------------------------------- responsivo
   Só rede de segurança — a régua do desenho é desktop. */
@media(max-width:1180px){
  .fx-layout-loja,.fx-layout-promo{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .stat-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fx-var .campos{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---------------------------------------------- publicidade da loja
   Cartões de campanha em quadrante (regra do Daniel: cartão, nunca
   lista). O minmax de 31% garante 3 por linha no desktop de 1366 e
   impede que virem 5 espremidos no monitor grande. */
.fx-grid-camp{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(max(280px,31%),1fr));
  gap:12px;align-items:start;}

.fx-card-camp{padding:14px 15px;}

/* Etiqueta de situação: linha fina, sem cartão pintado. */
.fx-status-camp{flex-shrink:0;font-size:10px;font-weight:600;
  letter-spacing:.3px;padding:2px 7px;border-radius:999px;
  border:1px solid var(--border);color:var(--muted);white-space:nowrap;}
.fx-status-camp.on{color:var(--accent);border-color:var(--accent);}

/* Aviso de campanha travando por verba — o texto NUNCA é cortado, ele
   quebra em quantas linhas precisar. */
.fx-aviso-camp{margin-top:10px;padding:8px 10px;border-radius:7px;
  border:1px solid var(--warn);color:var(--warn);
  font-size:11px;line-height:1.5;display:flex;gap:6px;align-items:flex-start;}
.fx-aviso-camp svg{flex-shrink:0;margin-top:2px;}

/* Caixinha de marcacao no cartao do produto.
   Clicar no cartao sempre marcou, mas nada na tela dizia isso - a pessoa
   descobria por acidente. A caixinha diz antes de clicar. */
.fx-card-promo{position:relative}
.caixa-sel{
  position:absolute;top:7px;left:7px;z-index:2;
  width:17px;height:17px;border-radius:5px;
  border:1.5px solid var(--borda-forte);background:var(--surface);
  display:grid;place-items:center;
  font-size:11px;font-weight:700;color:#0b1012;line-height:1;
}
.caixa-sel.on{background:var(--accent);border-color:var(--accent)}
.fx-card-promo .capa{margin-left:2px}

/* Recados no grupo (2026-08-26).
   Quatro colunas cabem no desktop; no celular a linha estourava a largura
   da tela e o painel inteiro passava a rolar de lado — conferido a 375px
   antes de existir esta regra. Abaixo de 720px vira lista empilhada. */
.rc-linha-loja{
  display:grid;gap:10px;align-items:center;
  grid-template-columns:minmax(130px,1fr) minmax(150px,1.2fr) minmax(120px,1fr) auto;
}
.rc-linha-loja .rc-nome{
  font-size:13px;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rc-canal-topo{display:grid;gap:10px;grid-template-columns:1fr 110px}
.rc-canal-json{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:10px}
@media(max-width:720px){
  .rc-linha-loja{grid-template-columns:1fr}
  .rc-linha-loja button{justify-self:start}
  .rc-canal-topo,.rc-canal-json{grid-template-columns:1fr}
}

/* Grade dos cards de Publicidade (31/08/2026).
   Substituiu a tabela: o pedido era "não preciso ficar abrindo loja para
   ver como está", então cada loja virou um card com o diagnóstico inteiro.
   auto-fill com minmax deixa a grade decidir quantas colunas cabem — no
   celular vira uma, sem media query. */
.fx-grade-ads{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  margin-bottom:20px;
}
@media(max-width:420px){
  .fx-grade-ads{grid-template-columns:1fr}
  /* Investido / GMV / ROAS empilham antes de espremer o número. */
  .fx-card-ads > div:nth-child(2){grid-template-columns:1fr 1fr}
}

/* ------------------------------ cartão de anúncio (desenho de 01/09)
   Chip de estado no topo e borda colorida no card inteiro. Antes o estado
   só aparecia numa faixa de 3px em cima da foto e no texto da recomendação
   — dava pra passar o olho por uma grade de 40 cartões sem enxergar quais
   pediam ação. */
.fx-anuncio-chip{
  display:flex;align-items:center;gap:6px;
  font-size:10px;font-weight:500;letter-spacing:.05em;
  padding:7px 12px;border-bottom:1px solid var(--border);
}
/* A recomendação ganha fundo da própria cor (o `14` no fim do hex é ~8%
   de opacidade), como no desenho. Sem isso ela some no meio do card. */
.fx-reco{border-radius:0 8px 8px 0;padding:9px 11px !important;}
.fx-secao-exec{
  font-size:9.5px;font-weight:500;letter-spacing:.06em;color:var(--faint);
  margin-bottom:6px;
}

/* Resultado da última execução de promoção (02/09). Uma linha por
   anúncio: nome à esquerda, o que aconteceu à direita. O nome trunca e o
   motivo NÃO - quando falta espaço, quem tem que sobreviver é a razão da
   falha, que é o que o operador precisa ler. */
.fx-res-linha{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;padding:5px 0;border-bottom:1px solid var(--border);font-size:12px;}
.fx-res-linha:last-child{border-bottom:none;}
.fx-res-nome{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0;}
.fx-res-valor{flex-shrink:0;font-weight:600;text-align:right;}
.fx-res-mais{font-size:11px;color:var(--faint);padding:6px 0 0;}

/* ============================================================== CATÁLOGO
   Reconstruído a partir do documento de referência que o Daniel mandou
   (artifact "Catálogo por Loja", 02/09) — que é bem mais preciso que os
   prints: traz a paleta em hexadecimal, as oito larguras de coluna e as
   medidas de tipografia.

   Duas correções que o documento me obrigou a fazer:

   1. A paleta é PAPEL no claro e ARDÓSIA no escuro, e o amarelo é o do
      Mercado Livre (#FFE600) — não o mostarda que eu tinha usado.
   2. "O amarelo tinge o botão Novo produto, o selo da plataforma e o
      fundo da coluna de preço a 10% — em nenhum outro lugar." Eu tinha
      pintado os chips de filtro e o toggle Clássico/Premium também.

   O painel Liberty é escuro, então os tokens abaixo são os do tema
   ESCURO do app (#14171c / #1b1f26 / #2a2f38). São os valores do próprio
   documento — fiel e coerente com o painel ao mesmo tempo. */
.cat-pagina{
  --c-bg:#14171c;
  --c-surface:#1b1f26;
  --c-border:#2a2f38;
  --c-border-soft:#23272f;
  --c-ink:#e6e8ec;
  --c-muted:#b3bac6;
  --c-highlight:#1f2a3a;
  --c-highlight-line:#2c3a52;
  --c-ml:#FFE600;
  --c-ml-ink:#1a1a1a;
  /* 18 em hex = ~9% de opacidade. E o valor do ProductsPage no tema
     escuro (`${cor}18`); eu tinha posto 26 (~15%) e a coluna gritava
     mais que no original. */
  --c-ml-wash:#FFE60018;
  --c-ok:#4ade80;      --c-ok-bg:#4ade8021;  --c-ok-line:#4ade8047;
  --c-warn:#fbbf24;    --c-warn-bg:#fbbf2421;--c-warn-line:#fbbf2447;
  --c-bad:#f87171;     --c-bad-bg:#f8717121; --c-bad-line:#f8717147;
  color:var(--c-ink);
}

/* ------------------------------------------------------- faixa da loja */
.cat-faixa{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border:1px solid var(--c-border);background:var(--c-surface);
  border-radius:16px;padding:10px 16px;margin-bottom:8px;}
.cat-pilula{display:inline-flex;align-items:center;gap:6px;height:32px;
  padding:0 12px;border-radius:999px;font-size:12px;font-weight:500;
  border:1px solid var(--c-border);background:var(--c-bg);color:var(--c-ink);
  cursor:pointer;}
.cat-pilula:hover{border-color:var(--c-muted);}
.cat-loja-nome{font-size:14px;font-weight:600;line-height:1.3;}
.cat-loja-sub{font-size:11.5px;color:var(--c-muted);}
.cat-troca{margin-left:auto;height:36px;border-radius:999px;
  padding:0 14px;font-size:12px;font-weight:500;
  border:1px solid var(--c-border);background:var(--c-bg);color:var(--c-ink);}

/* ------------------------------------------------------ barra de ações */
.cat-barra{border:1px solid var(--c-border);background:var(--c-surface);
  border-radius:16px;padding:14px 18px;margin-bottom:12px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
/* Sem box-shadow. O brilho amarelo embaixo de cada botao era o que fazia
   a tela parecer um semaforo quando havia mais de um - e no passo a passo
   havia tres ao mesmo tempo. O amarelo ja destaca sozinho. */
.cat-btn-ml{display:inline-flex;align-items:center;gap:8px;height:36px;
  padding:0 16px;border-radius:999px;font-size:12px;font-weight:600;
  cursor:pointer;background:var(--c-ml);color:var(--c-ml-ink);
  border:1px solid var(--c-ml);}
.cat-btn-ml:hover{filter:brightness(1.05);}
.cat-btn-suave{display:inline-flex;align-items:center;gap:8px;height:34px;
  padding:0 14px;border-radius:999px;font-size:12px;font-weight:500;
  cursor:pointer;background:var(--c-highlight);color:var(--c-ink);
  border:1px solid var(--c-highlight-line);}
.cat-selo{width:42px;height:42px;border-radius:999px;display:inline-flex;
  align-items:center;justify-content:center;font-weight:800;font-size:13px;
  background:var(--c-ml);color:var(--c-ml-ink);border:1px solid #00000018;}
.cat-busca{display:flex;align-items:center;gap:8px;height:36px;
  padding:0 14px;border-radius:999px;border:1px solid var(--c-border);
  background:var(--c-bg);color:var(--c-ink);font-size:13px;min-width:230px;}
.cat-busca input{flex:1;background:none;border:none;color:inherit;
  font-size:13px;outline:none;min-width:0;}
.cat-busca input::placeholder{color:var(--c-muted);}
.cat-centro{flex:1;display:flex;justify-content:center;}
.cat-direita{flex:1;display:flex;justify-content:flex-end;}


/* ------------------------------------------------------------- tabela */
.cat-caixa{border:1px solid var(--c-border);border-radius:16px;
  overflow:hidden;background:var(--c-bg);}
.cat-rolagem{overflow-x:auto;max-height:70vh;overflow-y:auto;}
.cat-tabela{width:100%;border-collapse:collapse;font-size:13px;
  min-width:1000px;}
/* Cabeçalho grudado: em catálogo longo os rótulos ficam no topo
   enquanto a lista rola. */
.cat-tabela > thead > tr > th{position:sticky;top:0;z-index:2;height:48px;
  padding:0 8px;text-align:left;font-weight:400;font-size:10px;
  text-transform:uppercase;letter-spacing:.18em;color:var(--c-muted);
  background:var(--c-surface);border-bottom:1px solid var(--c-border);
  border-right:1px solid var(--c-border-soft);white-space:nowrap;
  box-shadow:0 1px 0 var(--c-border), 0 4px 8px rgba(0,0,0,.35);}
.cat-tabela > thead > tr > th:last-child{border-right:none;}
.cat-tabela > tbody > tr > td{padding:10px 12px;vertical-align:middle;font-size:13px;
  border-bottom:1px solid var(--c-border-soft);
  border-right:1px solid var(--c-border-soft);}
.cat-tabela > tbody > tr > td:last-child{border-right:none;}
/* 120px, medidos na Area do Cliente em 09/09. E' o item que sozinho tira a
   sensacao de tela apertada: o conteudo e' o mesmo, o que muda e' o ar em
   volta dele. Linha de variacao e espacador ficam de fora - elas nao sao
   produto, e forcar 120px ali abriria buraco no meio da lista. */
.cat-tabela > tbody > tr{height:120px;}
.cat-tabela > tbody > tr.cat-espaco,
.cat-tabela > tbody > tr.cat-varrow{height:auto;}
.cat-tabela > tbody > tr:last-child > td{border-bottom:none;}
.cat-obrig{color:#f87171;}

/* ---- popover de custos, medido no "Editar custos" da Area do Cliente ----
   288px de largura (w-72), 12px de respiro (p-3), rotulo de 10px com
   tracking .18em, campo de 120px e 32px de altura, numero a direita. O
   afixo mora dentro do campo: diz o formato sem gastar uma linha. */
.cat-editcusto{position:relative;display:inline-flex;align-items:center;gap:4px;
  height:24px;padding:0 8px;margin-top:6px;border-radius:999px;font-size:10px;
  font-weight:500;white-space:nowrap;cursor:pointer;font-family:inherit;
  background:var(--c-bg);border:1px solid var(--c-border);color:var(--c-ink);}
.cat-editcusto:hover{opacity:.8;border-color:var(--c-ml);}
/* O pontinho de estado no canto: verde = da' pra precificar, ambar = falta
   peso. E' o aviso que evita descobrir o problema so' na hora de anunciar. */
.cat-ponto-ok,.cat-ponto-falta{position:absolute;top:-2px;right:-2px;
  width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 1.5px var(--c-surface);}
.cat-ponto-ok{background:#22c55e;}
.cat-ponto-falta{background:#f59e0b;}

.cat-pop{position:fixed;z-index:88;width:288px;padding:12px;border-radius:12px;
  background:var(--c-surface);border:1px solid var(--c-border);
  box-shadow:0 18px 44px -12px rgba(0,0,0,.6);}
.cat-pop-titulo{margin:0 0 10px;font-size:10px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--c-muted);}
.cat-pop-campos{display:flex;flex-direction:column;gap:8px;}
.cat-pop-linha{display:flex;align-items:center;justify-content:space-between;
  gap:8px;}
.cat-pop-linha label{font-size:12px;color:var(--c-ink);}
.cat-pop-campo{position:relative;width:120px;flex-shrink:0;}
.cat-pop-campo input{width:100%;height:32px;border-radius:6px;font-size:12px;
  text-align:right;padding:0 8px;font-family:inherit;
  font-variant-numeric:tabular-nums;
  background:var(--c-bg);border:1px solid var(--c-border);color:var(--c-ink);}
.cat-pop-campo input:focus{outline:none;border-color:var(--c-ml);}
.cat-pop-campo > span{position:absolute;top:50%;transform:translateY(-50%);
  font-size:11px;color:var(--c-muted);pointer-events:none;}
.cat-pop-campo > span{right:8px;}
.cat-pop-campo.pre > span{left:8px;right:auto;}
.cat-pop-campo.pre input{padding-left:28px;}
.cat-pop-campo:not(.pre) input{padding-right:28px;}
.cat-pop-ok{width:100%;margin-top:12px;height:34px;border-radius:8px;
  font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;
  background:var(--c-ml);color:var(--c-ml-ink);border:1px solid var(--c-ml);}
.cat-pop-ok:hover{filter:brightness(1.06);}
.cat-pop-ok:disabled{opacity:.6;cursor:progress;}

.cat-thumb{width:68px;height:68px;border-radius:8px;
  border:1px solid var(--c-border-soft);display:flex;align-items:center;
  justify-content:center;overflow:hidden;background:var(--c-surface);
  cursor:pointer;}
.cat-thumb img{width:100%;height:100%;object-fit:cover;}
.cat-thumb.vazia{background:var(--c-bg);border-style:dashed;
  color:var(--c-muted);opacity:.75;}
.cat-thumb:hover{border-color:var(--c-ml);}

.cat-nome{font-weight:500;line-height:1.3;}
/* Era um texto cinza de 11px que nao parecia clicavel - e e' a unica porta
   pras variacoes. Agora e' pilula com contorno e seta pra baixo, que gira
   quando abre. */
.cat-vars-btn{font-size:11.5px;font-weight:500;color:var(--c-muted);
  display:inline-flex;align-items:center;gap:5px;margin-top:5px;
  background:var(--c-bg);border:1px solid var(--c-border);border-radius:999px;
  cursor:pointer;padding:3px 9px;transition:.12s;font-family:inherit;}
.cat-vars-btn:hover{color:var(--c-ink);border-color:var(--c-ml);}
.cat-vars-btn.on{color:var(--c-ml);border-color:var(--c-ml);
  background:var(--c-ml-wash);}
.cat-vars-btn svg{transition:transform .15s;}

.cat-sku{display:inline-block;font-family:ui-monospace,SFMono-Regular,
  Menlo,monospace;font-size:11.5px;font-weight:500;padding:3px 7px;
  border-radius:6px;background:var(--c-surface);
  border:1px solid var(--c-border-soft);}
.cat-num{font-variant-numeric:tabular-nums;}
.cat-custo{font-variant-numeric:tabular-nums;font-size:13px;
  background:none;border:none;color:inherit;cursor:pointer;padding:0;
  text-align:left;font-family:inherit;}
.cat-custo:hover{color:var(--c-ml);}
.cat-sub{font-size:10.5px;color:var(--c-muted);letter-spacing:.02em;}
.cat-preco{font-variant-numeric:tabular-nums;font-size:15px;font-weight:700;
  letter-spacing:-.01em;}

.cat-status{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;
  border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;}
.cat-s-ok{background:var(--c-ok-bg);color:var(--c-ok);
  border:1px solid var(--c-ok-line);}
.cat-s-warn{background:var(--c-warn-bg);color:var(--c-warn);
  border:1px solid var(--c-warn-line);}
.cat-s-bad{background:var(--c-bad-bg);color:var(--c-bad);
  border:1px solid var(--c-bad-line);}

.cat-acoes{display:inline-flex;gap:6px;}
.cat-ico{width:28px;height:28px;border-radius:7px;display:inline-flex;
  align-items:center;justify-content:center;border:1px solid var(--c-border-soft);
  background:var(--c-surface);color:var(--c-muted);cursor:pointer;padding:0;}
.cat-ico:hover{color:var(--c-ink);border-color:var(--c-muted);}
.cat-ico.perigo:hover{color:var(--c-bad);border-color:var(--c-bad-line);}

/* ---------------------------------------------------------- variações */
.cat-varrow td{background:var(--c-surface);}
.cat-vartabela{width:100%;border-collapse:collapse;font-size:12px;}
.cat-vartabela th{height:32px;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-muted);font-weight:400;
  text-align:left;padding:0 8px;border-bottom:1px solid var(--c-border-soft);}
.cat-vartabela td{padding:7px 8px;border-bottom:1px solid var(--c-border-soft);}
.cat-vartabela tbody tr:last-child td{border-bottom:none;}
.cat-herdado{color:var(--c-muted);}
/* Variacao se edita aqui, aberta debaixo do produto. Os campos parecem
   texto ate' o mouse chegar: a lista continua legivel de relance, e quem
   quer mexer clica e digita - sem um modo de edicao pra entrar antes. */
.cat-vartabela input{width:100%;background:transparent;font:inherit;
  font-size:12px;color:var(--c-ink);border:1px solid transparent;
  border-radius:6px;padding:5px 7px;}
.cat-vartabela input::placeholder{color:var(--c-muted);opacity:.7;}
.cat-vartabela input:hover{border-color:var(--c-border-soft);}
.cat-vartabela input:focus{outline:none;border-color:var(--c-ml);
  background:var(--c-surface);}
.cat-vartabela input[readonly]{opacity:.6;cursor:default;}
.cat-vartabela input[readonly]:hover{border-color:transparent;}
.cat-vartabela th input{font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-muted);padding:3px 7px;}
.cat-var-preco b{color:var(--c-ml);}
.cat-var-x{background:none;border:none;color:var(--c-muted);cursor:pointer;
  padding:4px;border-radius:6px;display:inline-flex;}
.cat-var-x:hover{color:var(--c-bad);background:var(--c-surface);}
.cat-var-acoes{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap;}
.cat-var-acoes button{display:inline-flex;align-items:center;gap:4px;
  background:var(--c-bg);border:1px solid var(--c-border);border-radius:8px;
  color:var(--c-muted);font-size:11.5px;padding:5px 10px;cursor:pointer;}
.cat-var-acoes button:hover{color:var(--c-ml);border-color:var(--c-ml);}

/* ------------------------------------------------------------ modal */
/* Ancorado no TOPO (24px), nao centralizado: e assim no ProductsPage, e
   faz diferenca em painel alto - centralizado, o cabecalho sobe e desce
   conforme o conteudo cresce. O fundo atras e' quase invisivel (6%) de
   proposito: a tabela continua legivel enquanto se mexe no preco. */
/* Gaveta na direita, nao caixa no meio: e' o `aside.fixed` da Area do
   Cliente. Muda o gesto - a lista continua atras, e fechar e' um passo pro
   lado em vez de um retorno. */
.cat-modal-fundo{position:fixed;inset:0;background:rgba(0,0,0,.45);
  z-index:80;display:flex;justify-content:flex-end;}
.cat-modal{background:var(--c-surface);border-left:1px solid var(--c-border);
  width:min(840px,100vw);height:100vh;display:flex;flex-direction:column;
  box-shadow:-24px 0 60px -20px rgba(0,0,0,.7);}
.cat-modal-topo{display:flex;justify-content:space-between;align-items:center;
  padding:18px 20px 0;}
.cat-modal-corpo{padding:16px 20px 20px;}
.cat-modal-cols{display:grid;grid-template-columns:1fr 1fr 300px;gap:14px;}
@media (max-width:900px){.cat-modal-cols{grid-template-columns:1fr;}}
.cat-bloco{background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:12px;padding:15px;}
.cat-bloco h4{font-size:10px;letter-spacing:.18em;color:var(--c-muted);
  font-weight:400;margin:0 0 12px;text-transform:uppercase;}
.cat-campo{display:flex;align-items:center;justify-content:space-between;
  gap:9px;margin-bottom:9px;}
.cat-campo > span{font-size:12.5px;color:var(--c-ink);}
.cat-campo input{width:120px;padding:7px 10px;border-radius:8px;
  background:var(--c-bg);border:1px solid var(--c-border);color:var(--c-ink);
  font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums;}
.cat-campo input[type=text]{text-align:left;width:150px;}
.cat-campo input:focus{outline:none;border-color:var(--c-ml);}
.cat-modo{display:inline-flex;background:var(--c-bg);
  border:1px solid var(--c-border);border-radius:999px;padding:2px;}
.cat-modo button{background:none;border:none;color:var(--c-muted);
  font-size:11px;font-weight:600;padding:4px 12px;border-radius:999px;
  cursor:pointer;}
.cat-modo button.on{background:var(--c-highlight);color:var(--c-ink);}
.cat-modal-acoes{display:grid;grid-template-columns:1fr 1fr;gap:11px;
  padding:0 20px 20px;}
.cat-x{background:none;border:none;color:var(--c-muted);cursor:pointer;
  font-size:19px;line-height:1;padding:2px 7px;}
.cat-x:hover{color:var(--c-ink);}
.cat-rodape{font-size:12px;color:var(--c-muted);padding:12px 2px 0;}
.cat-replicar{background:none;border:none;color:var(--c-muted);font-size:9.5px;
  cursor:pointer;display:block;margin-bottom:2px;padding:0;text-align:left;}
.cat-replicar:hover{color:var(--c-ink);}

/* ------------------------------------------- arquivos do produto (02/09)
   O que aposenta a pasta do Drive. A área de arrastar é grande de
   propósito: é assim que a pessoa usa o Drive hoje, e o hábito não
   deveria mudar por causa da nossa tela. */
.cat-drop{border:1.5px dashed var(--c-border);border-radius:12px;
  padding:20px 16px;text-align:center;cursor:pointer;
  background:var(--c-surface);transition:border-color .12s,background .12s;}
.cat-drop:hover,.cat-drop.sobre{border-color:var(--c-ml);
  background:var(--c-ml-wash);}
.cat-drop-txt{font-size:12.5px;color:var(--c-muted);}
.cat-drop-txt b{color:var(--c-ink);}

.cat-fila-linha{display:flex;justify-content:space-between;gap:10px;
  padding:8px 2px 0;font-size:12px;}

.cat-grade{display:grid;gap:9px;margin-top:11px;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));}
.cat-arq{border:1px solid var(--c-border);border-radius:10px;
  overflow:hidden;background:var(--c-surface);}
/* A capa se distingue pela borda, não por cor de marca: a regra do
   documento é que o amarelo só aparece em três lugares. */
.cat-arq.capa{border-color:var(--c-ink);}
.cat-arq-mid{position:relative;aspect-ratio:1;background:var(--c-bg);
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
.cat-arq-mid img,.cat-arq-mid video{width:100%;height:100%;object-fit:cover;}
.cat-play{position:absolute;color:#fff;font-size:19px;
  text-shadow:0 1px 6px rgba(0,0,0,.6);pointer-events:none;}
.cat-arq-ico{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;color:var(--c-muted);letter-spacing:.08em;}
.cat-arq-pe{display:flex;align-items:center;justify-content:space-between;
  gap:6px;padding:6px 8px;}
.cat-arq-btn{background:var(--c-bg);border:1px solid var(--c-border);
  border-radius:5px;color:var(--c-muted);cursor:pointer;font-size:10px;
  padding:2px 6px;line-height:1.5;}
.cat-arq-btn:hover{color:var(--c-ink);border-color:var(--c-muted);}
.cat-arq-btn.perigo:hover{color:var(--c-bad);border-color:var(--c-bad-line);}
.cat-arq-capa-tag{font-size:10px;color:var(--c-ink);border:1px solid var(--c-ink);
  border-radius:5px;padding:2px 6px;line-height:1.5;}

.cat-arq-topo{display:flex;justify-content:space-between;align-items:center;
  gap:10px;margin-bottom:9px;}
/* Copiar o preço: ele vai colar isso no Mercado Livre, e digitar de novo
   um número calculado é onde o erro entra. */
.cat-copiar{background:var(--c-bg);border:1px solid var(--c-border);
  border-radius:6px;color:var(--c-muted);cursor:pointer;font-size:10px;
  padding:2px 7px;line-height:1.6;}
.cat-copiar:hover{color:var(--c-ink);border-color:var(--c-muted);}

/* Barra de seleção — aparece só com linha marcada, sobre o realce azulado.
   É o padrão do ProductsPage: a ação em massa não fica escondida num menu,
   ela surge quando há o que agir. */
.cat-selecao{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;padding:10px 16px;border-radius:10px;
  margin-bottom:12px;background:var(--c-highlight);
  border:1px solid var(--c-highlight-line);color:var(--c-ink);}
.cat-pilula.perigo{border-color:var(--c-bad-line);color:var(--c-bad);}
.cat-pilula.perigo:hover{background:var(--c-bad-bg);}
/* Desabilitado fica VISÍVEL, com o motivo no title — regra do painel desde
   o começo: esconder faz parecer que a função não existe. */
.cat-pilula:disabled{opacity:.45;cursor:not-allowed;}
.cat-pilula:disabled:hover{border-color:var(--c-border);}

/* Espaçador entre produtos, na cor do FUNDO (não da superfície). Sem ele a
   lista vira um bloco contínuo e a variação expandida cola no produto de
   baixo. É o `colSpan={100} height:10` do ProductsPage. */
.cat-espaco td{height:10px;padding:0 !important;border:none !important;
  background:var(--c-bg);}
.cat-tabela > tbody > tr.cat-espaco:hover{background:var(--c-bg);}

/* ---- linha da tabela, fiel aos prints do ProductsPage (02/09) ---- */

/* Rótulo pequeno acima de cada preço. A coluna carrega DOIS valores —
   o de venda e o cheio — e sem rótulo eles viram dois números soltos. */
.cat-rot{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-muted);}
.cat-aviso{font-size:10.5px;color:var(--c-warn);margin-top:5px;}

/* Selo KIT ao lado do nome. Amarelo porque no original ele é da cor da
   marca — é o único lugar fora dos três em que isso acontece, e é assim
   nos prints. */
.cat-kit{font-size:9.5px;font-weight:800;letter-spacing:.1em;
  background:var(--c-ml);color:var(--c-ml-ink);border-radius:999px;
  padding:3px 9px;line-height:1;flex-shrink:0;}

/* SKU editável na própria linha. */
.cat-sku-campo{width:100%;min-width:0;font-family:ui-monospace,SFMono-Regular,
  Menlo,monospace;font-size:11px;letter-spacing:.04em;padding:5px 8px;
  border-radius:6px;background:var(--c-bg);border:1px solid var(--c-border-soft);
  color:var(--c-ink);}
.cat-sku-campo:focus{outline:none;border-color:var(--c-ml);}
.cat-sku-campo::placeholder{color:var(--c-muted);opacity:.6;}

.cat-calcular{display:inline-flex;align-items:center;gap:5px;height:28px;
  padding:0 10px;border-radius:7px;font-size:11.5px;cursor:pointer;
  background:var(--c-surface);border:1px solid var(--c-border-soft);
  color:var(--c-ink);white-space:nowrap;}
.cat-calcular:hover{border-color:var(--c-muted);}

/* Contador de arquivos no canto da miniatura. */
.cat-thumb{position:relative;}
.cat-thumb{transition:border-color .12s;}
.cat-thumb:hover{border-color:var(--c-ml);}
.cat-thumb-n{position:absolute;right:-3px;bottom:-3px;min-width:14px;height:14px;
  border-radius:7px;background:var(--c-bg);border:1px solid var(--c-border);
  color:var(--c-muted);font-size:9px;line-height:12px;text-align:center;
  padding:0 3px;}

/* Os quatro círculos de plataforma. Só o ML fica aceso — o catálogo é de
   conta ML; as outras existem no original e ficam apagadas. */
.cat-selo{width:36px;height:36px;font-size:11px;opacity:.4;
  border:1px solid transparent;}
.cat-selo.on{width:42px;height:42px;font-size:13px;opacity:1;}

/* ---- edição inline (02/09) ----
   Três estados de linha, na ordem do ProductsPage: edição, kit, aberto.
   A barra de 4px à esquerda é `inset box-shadow`, e só existe no kit e na
   linha com a calculadora aberta — é o que faz o kit saltar da lista. */
.cat-pagina{--c-edit-bg:rgba(255,230,0,.06);--c-kit-bg:rgba(251,191,36,.10);}

/* Nome e SKU são campos SEMPRE, com readonly fora da edição: mantém a
   largura estável entre os estados, em vez de a linha pular de tamanho
   quando o lápis é clicado. */
.cat-nome-campo{flex:1;min-width:0;background:transparent;border:1px solid transparent;
  border-radius:6px;padding:4px 6px;font-size:13px;font-weight:500;
  color:var(--c-ink);font-family:inherit;}
.cat-nome-campo[readonly]{cursor:default;}
.cat-nome-campo.edit{background:var(--c-bg);border-color:var(--c-border);}
.cat-nome-campo.edit:focus,.cat-sku-campo.edit:focus{outline:none;
  border-color:var(--c-ml);}
.cat-sku-campo[readonly]{cursor:default;background:var(--c-surface);
  border-color:var(--c-border-soft);}
.cat-sku-campo.edit{background:var(--c-bg);border-color:var(--c-border);}

.cat-salvar{display:inline-flex;align-items:center;gap:5px;height:28px;
  padding:0 12px;border-radius:999px;font-size:11px;font-weight:600;
  cursor:pointer;background:var(--c-ml);color:var(--c-ml-ink);
  border:1px solid var(--c-ml);white-space:nowrap;}
.cat-salvar:hover{filter:brightness(1.06);}
.cat-salvar:disabled{opacity:.6;cursor:progress;}
/* O lápis leva a cor de ação, como no original (primary/60%). */
.cat-ico.lapis{border-color:rgba(255,230,0,.5);color:var(--c-ml);}
.cat-ico.lapis:hover{border-color:var(--c-ml);}
.cat-calcular{border-color:rgba(255,230,0,.33);}

/* ================= melhorias pedidas em 02/09 ================= */

/* Foto e nome no topo do modal — ver de qual produto se trata enquanto se
   mexe no custo. */
.cat-modal-foto{width:52px;height:52px;border-radius:10px;flex-shrink:0;
  border:1px solid var(--c-border);background:var(--c-bg);overflow:hidden;
  display:flex;align-items:center;justify-content:center;}
.cat-modal-foto img,.cat-modal-foto video{width:100%;height:100%;object-fit:cover;}
.cat-modal-nome{width:100%;background:transparent;border:1px solid transparent;
  border-radius:7px;padding:3px 6px;margin:1px 0;font-size:15px;font-weight:600;
  color:var(--c-ink);font-family:inherit;}
.cat-modal-nome:focus{outline:none;background:var(--c-bg);
  border-color:var(--c-ml);}

/* SKU: botão de gerar com rótulo, e cadeado quando já está gravado. */
.cat-sku-gerar{display:inline-flex;align-items:center;gap:3px;background:var(--c-bg);
  border:1px solid var(--c-border-soft);border-radius:6px;color:var(--c-muted);
  cursor:pointer;padding:4px 7px;font-size:9.5px;letter-spacing:.06em;
  font-weight:600;line-height:1;flex-shrink:0;}
.cat-sku-gerar:hover{color:var(--c-ml);border-color:var(--c-ml);}
.cat-sku-trava{color:var(--c-muted);opacity:.55;flex-shrink:0;padding:0 3px;}

/* O id do anuncio no ML, debaixo do SKU. Fonte de codigo e menor que o
   SKU: e' identificador de maquina, nao numero pra ler de relance. */
.cat-mlid{width:100%;min-width:0;font-family:ui-monospace,SFMono-Regular,
  Menlo,monospace;font-size:10px;letter-spacing:.03em;padding:4px 7px;
  border-radius:6px;background:transparent;border:1px solid transparent;
  color:var(--c-muted);}
.cat-mlid[readonly]{cursor:default;}
.cat-mlid.edit{background:var(--c-bg);border-color:var(--c-border);
  color:var(--c-ink);}
.cat-mlid.edit:focus{outline:none;border-color:var(--c-ml);}
.cat-mlid::placeholder{color:var(--c-muted);opacity:.5;}
.cat-mlid-ir{color:var(--c-muted);display:inline-flex;flex-shrink:0;
  padding:0 2px;}
.cat-mlid-ir:hover{color:var(--c-ml);}

/* Passo a passo do produto novo. */
.cat-passos{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding-bottom:13px;margin-bottom:14px;border-bottom:1px solid var(--c-border);}
.cat-passo{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  color:var(--c-muted);padding:5px 11px;border-radius:999px;
  border:1px solid transparent;}
.cat-passo.on{color:var(--c-ink);border-color:var(--c-ml);}
.cat-passo.feito{color:var(--c-ok);}
.cat-passo-n{display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;font-size:9.5px;font-weight:700;
  background:var(--c-surface);border:1px solid var(--c-border);}
.cat-passo.on .cat-passo-n{background:var(--c-ml);color:var(--c-ml-ink);
  border-color:var(--c-ml);}
.cat-passo.feito .cat-passo-n{border-color:var(--c-ok);color:var(--c-ok);}
.cat-passo-dica{flex-basis:100%;font-size:11.5px;color:var(--c-muted);
  padding-top:4px;}

/* Calculadora lateral — simulação sem produto. */
.cat-lateral{position:fixed;top:0;right:0;bottom:0;width:min(400px,100vw);
  z-index:85;background:var(--c-bg);border-left:1px solid var(--c-border);
  box-shadow:-18px 0 44px rgba(0,0,0,.45);display:flex;flex-direction:column;}
.cat-lateral-topo{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:16px 18px 12px;border-bottom:1px solid var(--c-border);}
.cat-lateral-corpo{padding:15px 18px 22px;overflow-y:auto;flex:1;}

/* Zoom da foto sem abrir o produto. */
.cat-zoom-fundo{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.86);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:26px;}
.cat-zoom{max-width:min(1100px,92vw);max-height:78vh;display:flex;
  align-items:center;justify-content:center;}
.cat-zoom img,.cat-zoom video{max-width:100%;max-height:78vh;
  border-radius:10px;object-fit:contain;}
.cat-zoom-pe{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  justify-content:center;}

/* Rodapé do passo a passo: UMA linha, voltar à esquerda e a ação à
   direita. Era um grid 2x2 com quatro botões, dois deles amarelos —
   ninguém sabia qual era o caminho para a frente. */
.cat-modal-acoes.cat-passo-acoes{display:flex;justify-content:space-between;
  align-items:center;gap:11px;}
.cat-modal-acoes.cat-passo-acoes > button{flex:0 0 auto;min-width:150px;}
.cat-modal-acoes.cat-passo-acoes > button[hidden]{display:none !important;}

/* "Nova variação" visível sem ser amarelo: o realce azulado do próprio
   app já separa da superfície. */
.cat-btn-suave.cat-destaque{border-color:var(--c-highlight-line);
  background:var(--c-highlight);font-weight:600;}
.cat-btn-suave.cat-destaque:hover{filter:brightness(1.12);}

/* `hidden` tem que vencer o style inline. Sem isto o passo a passo não
   escondia as seções com `display:flex` no atributo style — o passo 1
   mostrava a linha do Mercado Livre e os cabeçalhos de arquivos e
   variações, que é como ele parecia não funcionar. */
[hidden]{display:none !important;}

/* ==================================================================
   MODAL DE PRODUTO — redesenho de 04/09 (guia-mudancas.md)

   O amarelo sai como cor de interface. O resto do painel ja fala
   verde = acao/sucesso, vermelho = alerta sobre grafite; o modal era o
   unico lugar amarelo, e por isso brigava com tudo em volta.

   O truque de uma linha: aqui dentro `--c-ml` PASSA A SER VERDE. Cada
   foco, cada borda de arrastar, cada botao primario ja lia essa
   variavel — trocar o valor vira a tela inteira sem cacar usos.

   Vale para o modal e para a calculadora lateral, que dividem o mesmo
   cartao de resultado. Duas paletas para o mesmo cartao seria a porta
   de entrada para as duas divergirem.
   ================================================================== */
:is(.cat-modal-fundo,.cat-lateral){
  --cm-app:#0d1117;
  --cm-modal:#151b23;
  --cm-field-focus:#12202b;
  --cm-line-strong:#3a4757;
  --cm-mute:#63707e;
  --cm-accent-soft:#1b3a30;

  --c-bg:#0f151d;
  --c-surface:#1a212b;
  --c-border:#28313d;
  --c-border-soft:#28313d;
  --c-ink:#e7edf4;
  --c-muted:#9aa7b5;
  --c-highlight:#12202b;
  --c-highlight-line:#3a4757;
  --c-ml:#34d399;
  --c-ml-ink:#06231a;
  --c-ml-wash:#1b3a30;
  --c-ok:#34d399;      --c-ok-bg:#34d39921;  --c-ok-line:#34d39947;
  --c-warn:#e8b23a;    --c-warn-bg:#e8b23a21;--c-warn-line:#e8b23a47;
  --c-bad:#f0616d;     --c-bad-bg:#f0616d21; --c-bad-line:#f0616d47;
}

.cat-modal-fundo .cat-modal{background:var(--cm-modal);}

/* ---- cabecalho ---- */
.cat-m-head{display:flex;align-items:center;gap:13px;
  padding:14px;border-bottom:1px solid var(--c-border);}
.cat-m-thumb{width:52px;height:52px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,#202b38,#161e27);
  border:1px solid var(--cm-line-strong);color:var(--cm-mute);
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
.cat-m-thumb img,.cat-m-thumb video{width:100%;height:100%;object-fit:cover;}
.cat-m-eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;
  color:var(--c-ml);text-transform:uppercase;margin-bottom:3px;}
.cat-m-h1{font-size:20px;font-weight:650;letter-spacing:-.01em;line-height:1.15;
  margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cat-m-sku{font-size:12px;color:var(--cm-mute);margin-top:3px;
  font-variant-numeric:tabular-nums;}
.cat-m-close{margin-left:auto;width:34px;height:34px;border-radius:8px;
  border:1px solid transparent;background:transparent;color:var(--c-muted);
  font-size:18px;cursor:pointer;transition:.15s;flex-shrink:0;}
.cat-m-close:hover{background:var(--c-surface);border-color:var(--c-border);
  color:var(--c-ink);}

/* ---- corpo ---- */
.cat-m-body{padding:14px;overflow-y:auto;flex:1;min-height:0;
  display:flex;flex-direction:column;gap:10px;scrollbar-gutter:stable;}
.cat-m-pane{display:flex;flex-direction:column;gap:10px;}
.cat-m-body::-webkit-scrollbar{width:9px;}
.cat-m-body::-webkit-scrollbar-thumb{background:var(--cm-line-strong);
  border-radius:9px;border:2px solid var(--cm-modal);}
.cat-m-lead{font-size:14px;color:var(--c-muted);margin:0 0 22px;line-height:1.5;}
.cat-m-lead b{color:var(--c-ink);font-weight:600;}
.cat-m-pane{display:none;}
.cat-m-pane.on{display:block;animation:catMFade .25s ease;}
@keyframes catMFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- campos: o label carrega o peso, a explicacao vira dica ---- */
.cat-m-field{margin-bottom:18px;}
.cat-m-field > label{display:block;font-size:13px;font-weight:600;
  color:var(--c-ink);margin-bottom:7px;}
.cat-m-hint{font-size:12.5px;color:var(--cm-mute);margin-top:6px;line-height:1.45;}
.cat-m-input,.cat-m-select{width:100%;background:var(--c-bg);
  border:1px solid var(--cm-line-strong);border-radius:9px;color:var(--c-ink);
  font-size:14.5px;padding:11px 13px;transition:.15s;font-family:inherit;}
.cat-m-input::placeholder{color:var(--cm-mute);}
.cat-m-input:focus,.cat-m-select:focus{outline:none;
  border-color:var(--c-ml);background:var(--cm-field-focus);
  box-shadow:0 0 0 3px rgba(52,211,153,.12);}
.cat-m-input[readonly]{opacity:.65;cursor:default;}
.cat-m-num{font-variant-numeric:tabular-nums;}
.cat-m-row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.cat-m-pre{position:relative;display:flex;align-items:center;}
.cat-m-pre > span{position:absolute;left:13px;font-size:14px;
  color:var(--cm-mute);pointer-events:none;}
.cat-m-pre > input{padding-left:34px;}
.cat-m-suf{position:relative;display:flex;align-items:center;}
.cat-m-suf > span{position:absolute;right:13px;font-size:13px;
  color:var(--cm-mute);pointer-events:none;}
.cat-m-suf > input{padding-right:34px;}

/* ---- cartao de grupo ---- */
.cat-m-group{background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:12px;padding:20px 20px 6px;margin-bottom:20px;}
.cat-m-gtitle{font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-muted);margin-bottom:16px;
  display:flex;align-items:center;gap:8px;}
.cat-m-gtitle::before{content:"";width:3px;height:14px;border-radius:2px;
  background:var(--c-ml);}
.cat-m-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;}

/* ---- fotos ---- */
.cat-m-photos{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));}
.cat-m-drop{aspect-ratio:1;border:1.5px dashed var(--cm-line-strong);
  border-radius:9px;background:var(--c-bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;color:var(--cm-mute);
  cursor:pointer;transition:.15s;font-size:12px;text-align:center;padding:6px;}
.cat-m-drop:hover,.cat-m-photos.sobre .cat-m-drop{border-color:var(--c-ml);
  color:var(--c-ml);background:var(--cm-field-focus);}
.cat-m-card{aspect-ratio:1;border-radius:9px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#233040,#1a2330);border:1px solid var(--c-border);}
.cat-m-card.capa{border-color:var(--c-ml);}
.cat-m-card.pendente{opacity:.72;border-style:dashed;}
.cat-m-card img,.cat-m-card video{width:100%;height:100%;object-fit:cover;
  cursor:zoom-in;display:block;}
.cat-m-ext{position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-size:11px;letter-spacing:.08em;
  color:var(--cm-mute);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
/* Marcar arquivo pra baixar so' alguns. A caixa fica no canto oposto das
   acoes pra nao competir com o apagar - errar o clique ali custa caro. */
.cat-m-pick{position:absolute;top:5px;left:5px;z-index:2;display:flex;
  width:22px;height:22px;border-radius:6px;background:rgba(10,14,20,.8);
  align-items:center;justify-content:center;cursor:pointer;}
.cat-m-pick input{cursor:pointer;margin:0;}
.cat-m-card.escolhido{outline:2px solid var(--c-ml);outline-offset:-2px;}
.cat-m-acts{position:absolute;top:5px;right:5px;display:flex;gap:4px;}
.cat-m-acts button{width:22px;height:22px;border-radius:6px;border:none;
  background:rgba(10,14,20,.8);color:var(--c-muted);cursor:pointer;
  font-size:12px;line-height:1;display:flex;align-items:center;
  justify-content:center;padding:0;}
.cat-m-acts button:hover{color:var(--c-ink);}
.cat-m-acts button.perigo:hover{color:var(--c-bad);}
.cat-m-cover{position:absolute;bottom:5px;left:5px;font-size:10px;
  font-weight:600;background:var(--c-ml);color:var(--c-ml-ink);
  padding:2px 6px;border-radius:5px;line-height:1.5;}
.cat-m-setcover{position:absolute;bottom:5px;left:5px;font-size:10px;
  background:rgba(10,14,20,.8);color:var(--c-muted);border:none;
  padding:3px 7px;border-radius:5px;line-height:1.4;cursor:pointer;}
.cat-m-setcover:hover{color:var(--c-ml);}

/* ---- cartao do preco ---- */
.cat-m-result{background:linear-gradient(160deg,#16241d,#141a22);
  border:1px solid var(--cm-accent-soft);border-radius:12px;padding:20px;
  position:sticky;top:0;}
.cat-m-result .cat-m-gtitle{color:var(--c-ml);}
.cat-m-big{font-size:30px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin:2px 0 4px;}
.cat-m-big.vazio{color:var(--cm-mute);font-size:26px;}
.cat-m-note{font-size:13px;color:var(--c-warn);line-height:1.5;
  display:flex;gap:8px;align-items:flex-start;}
.cat-m-note svg{flex-shrink:0;margin-top:2px;}
.cat-m-cheio{font-size:12.5px;color:var(--cm-mute);line-height:1.45;}
/* Detalhamento em DUAS colunas: sao nove linhas de conferencia, e
   empilhadas elas dobravam a altura da gaveta sozinhas. Em duas colunas a
   precificacao inteira cabe na tela sem rolagem, que era o pedido. */
/* O detalhamento em cartoes, nao em linhas de pontilhado.
   Em duas colunas apertadas o par "rotulo .... valor" na mesma linha
   espremia os dois, e o olho tinha que atravessar o vao pra casar um com o
   outro. Agora rotulo em cima, valor embaixo e maior - le-se de relance. */
.cat-m-brk{margin-top:4px;padding-top:12px;
  border-top:1px solid var(--cm-accent-soft);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:7px;align-content:start;}
.cat-m-brk-row{display:flex;flex-direction:column;gap:2px;
  padding:7px 9px;border-radius:8px;
  background:var(--c-bg);border:1px solid var(--c-border);}
.cat-m-brk-row > span{font-size:10px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--c-muted);line-height:1.3;}
.cat-m-brk-row b{color:var(--c-ink);font-variant-numeric:tabular-nums;
  font-weight:600;font-size:14px;white-space:nowrap;}
.cat-m-brk-row.total{border-color:var(--c-ml);background:var(--c-ml-wash);}
.cat-m-brk-row.total > span,.cat-m-brk-row.total b{color:var(--c-ml);}
.cat-m-brk-nota{grid-column:1 / -1;font-size:11px;color:var(--cm-mute);
  margin:-1px 0 1px;}

/* ---- rodape ---- */
.cat-m-foot{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-top:1px solid var(--c-border);background:var(--cm-app);flex-wrap:wrap;}
.cat-m-spacer{flex:1;}
.cat-m-btn{padding:10px 18px;border-radius:10px;font-size:14px;font-weight:600;
  cursor:pointer;transition:.15s;border:1px solid transparent;
  font-family:inherit;display:inline-flex;align-items:center;gap:8px;}
.cat-m-btn:disabled{opacity:.55;cursor:progress;}
.cat-m-soft{background:var(--c-surface);border-color:var(--cm-line-strong);
  color:var(--c-muted);}
.cat-m-soft:hover{background:var(--cm-field-focus);color:var(--c-ink);}
.cat-m-primary{background:var(--c-ml);color:var(--c-ml-ink);
  box-shadow:0 4px 14px -4px rgba(52,211,153,.5);}
.cat-m-primary:hover{filter:brightness(1.08);
  box-shadow:0 6px 18px -4px rgba(52,211,153,.6);}
.cat-m-mini{padding:8px 14px;font-size:13px;border-radius:9px;}

@media (max-width:720px){
  .cat-m-cols,.cat-m-row2{grid-template-columns:1fr;}
  .cat-m-body{padding:18px;}
  .cat-m-head,.cat-m-foot{padding-left:18px;padding-right:18px;}
}

/* ---- linha do Mercado Livre, medida no DOM da Area do Cliente (09/09) ----
   Rotulo de 10px com tracking .18em, chip "Taxa automatica" arredondado,
   select de 36px com raio 12, e o par Classico/Premium num trilho de
   pilulas. As taxas vao DENTRO dos rotulos - "Classico (14%)" - pra nao
   precisar procurar em outro canto quanto cada modalidade cobra. */
.cat-m-ml{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  border-radius:16px;padding:8px;
  background:var(--c-bg);border:1px solid var(--c-border);}
.cat-m-ml-rot{flex-shrink:0;font-size:10px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--c-muted);}
.cat-m-chip{border-radius:999px;padding:4px 8px;font-size:10px;
  white-space:nowrap;color:var(--c-muted);
  background:var(--c-surface);border:1px solid var(--c-border-soft);}
.cat-m-ml-cat{display:flex;flex:1;min-width:280px;align-items:center;gap:8px;}
.cat-m-ml-cat .cat-m-select{height:36px;border-radius:12px;font-size:12px;
  padding:0 12px;}
.cat-m-ml-anuncio{display:flex;align-items:center;gap:8px;}
.cat-m-ml .cat-modo{background:var(--c-surface);padding:2px;}
.cat-m-ml .cat-modo button{height:28px;font-size:10px;padding:0 10px;
  display:inline-flex;align-items:center;gap:4px;}
/* A ligada fica CHEIA, com check e sombra. Antes as duas so' se
   diferenciavam por dois tons de fundo, e dava pra sair da tela sem saber
   qual modalidade valia - que e' justamente a que define a comissao. */
.cat-m-ml .cat-modo button.on{background:var(--c-ml);color:var(--c-ml-ink);
  font-weight:700;box-shadow:0 2px 8px -2px rgba(52,211,153,.55);}
.cat-m-ml .cat-modo button:not(.on):hover{color:var(--c-ink);}

/* ---- resultado, no formato dele: preco grande, o par cheio/margem, e as
   duas caixas de lucro e repasse ---- */
/* Hierarquia em tres degraus, e nao dois: o preco de venda manda, o par
   cheio/margem e' o segundo nivel, e o resto e' conferencia. O que estava
   errado era o espaco - tudo com o mesmo respiro de 14px fazia o numero
   grande parecer so' um numero maior. */
.cat-m-caixa{border-radius:10px;padding:11px 12px;
  background:var(--c-bg);border:1px solid var(--c-border);}
.cat-m-caixa.destaque{padding:13px 14px;}
.cat-m-topo{display:flex;align-items:flex-end;justify-content:space-between;
  gap:10px;flex-wrap:wrap;}
.cat-m-par{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--c-border);}
.cat-m-par b{font-size:14px;font-variant-numeric:tabular-nums;}
.cat-m-par-r{font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--c-muted);margin-bottom:2px;}
.cat-m-duo{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.cat-m-duo b{font-size:15px;font-variant-numeric:tabular-nums;}
.cat-m-duo b.verde{color:var(--c-ml);}
/* O repasse e' o numero que responde "quanto precisa cair na conta". Ele
   pediu destaque maior, e ganha: caixa com contorno de acento e numero
   grande, ao lado do lucro. */
.cat-m-caixa.destaque-repasse{border-color:var(--c-ml);
  background:linear-gradient(160deg,var(--c-ml-wash),var(--c-bg));}
.cat-m-duo b.grande{font-size:22px;letter-spacing:-.01em;color:var(--c-ink);}
.cat-m-erro{font-size:12.5px;color:var(--c-bad);line-height:1.45;}

/* A celula de preco inteira e' clicavel: e' de la' que a precificacao abre. */
.cat-precocel{display:block;width:100%;text-align:left;background:none;
  border:1px solid transparent;border-radius:8px;color:inherit;font:inherit;
  cursor:pointer;padding:4px 6px;margin:-4px -6px;}
.cat-precocel:hover{border-color:var(--c-border);background:var(--c-bg);}

@media (max-width:560px){
  .cat-m-par,.cat-m-duo{grid-template-columns:1fr;}
}

/* ---- NESTA LOJA: o card que se clica ----
   Ele carrega todas as funcoes da loja e estava com o mesmo peso visual do
   TOP 3 logo acima: mesma borda, titulo de 10px, botoes numa coluna fina.
   Era o unico card da tela que se CLICA e parecia quadro de leitura.
   Contorno de acento, barra a esquerda e grade de dois. */
.fx-nesta-loja{padding:14px 15px;border-color:var(--accent);
  box-shadow:inset 3px 0 0 var(--accent), 0 6px 20px -12px rgba(0,0,0,.6);}
.fx-nesta-loja-topo{display:flex;align-items:center;gap:7px;margin-bottom:11px;
  color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.14em;}
.fx-nesta-loja-grade{display:flex;flex-direction:column;gap:7px;}
.fx-nesta-loja-grade .btn{width:100%;padding:11px 10px;justify-content:flex-start;
  font-size:12.5px;}
.fx-nesta-loja-grade .btn:hover{border-color:var(--accent);}

/* ---- filtro de periodo, separado dos filtros de anuncio ----
   Os chips da esquerda dizem QUE anuncio mostrar; o periodo diz QUANDO. As
   duas coisas tinham a mesma cara e ficavam na mesma fila. Agora o periodo
   e' um bloco proprio, com rotulo, empurrado pra direita. */
.fx-periodo{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  padding:3px 4px 3px 10px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border);}
.fx-periodo-rot{font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--muted);}
.fx-periodo-bt{border:1px solid transparent;background:transparent;
  color:var(--muted);font-size:11.5px;font-weight:600;padding:4px 10px;
  border-radius:999px;cursor:pointer;font-family:inherit;transition:.12s;}
.fx-periodo-bt:hover{color:var(--text);}
.fx-periodo-bt.on{background:var(--accent);color:#06231a;}

/* ---- custos dentro da gaveta de precificacao (11/09) ----
   Ele pediu pra poder mudar os custos ali mesmo, sem abrir o popover da
   linha. Duas colunas: sao sete campos curtos, e em coluna unica eles
   empurrariam o resultado pra fora da tela - que era justamente o que a
   gente acabou de consertar. */
.cat-m-custos{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;}
.cat-m-custo{display:flex;align-items:center;justify-content:space-between;
  gap:8px;}
.cat-m-custo label{font-size:12px;color:var(--c-ink);}
.cat-m-custo .cat-pop-campo{width:104px;}
@media (max-width:560px){.cat-m-custos{grid-template-columns:1fr;}}

/* ---- botao de anuncios na linha do produto ----
   Substitui o campo de ID inline: um produto pode ter 1 ou 3 anuncios, e
   tres campos na linha poluiriam a tabela inteira por uma coisa que se
   mexe uma vez na vida. */
.cat-anuncios{display:inline-flex;align-items:center;gap:5px;margin-top:5px;
  height:22px;padding:0 8px;border-radius:999px;font-size:10.5px;
  font-family:inherit;cursor:pointer;white-space:nowrap;
  background:var(--c-bg);border:1px solid var(--c-border);color:var(--c-muted);}
.cat-anuncios:hover{color:var(--c-ml);border-color:var(--c-ml);}
.cat-anuncios.tem{color:var(--c-ink);border-color:var(--c-border-soft);}
.cat-anun-lista{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;}
.cat-anun-linha{display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:5px 8px;border-radius:7px;
  background:var(--c-bg);border:1px solid var(--c-border);}
.cat-anun-linha a{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;color:var(--c-ink);text-decoration:none;}
.cat-anun-linha a:hover{color:var(--c-ml);text-decoration:underline;}
.cat-anun-x{background:none;border:none;color:var(--c-muted);cursor:pointer;
  padding:2px;display:inline-flex;border-radius:5px;}
.cat-anun-x:hover{color:var(--c-bad);}
.cat-anun-novo{display:flex;gap:7px;}
.cat-anun-novo input{flex:1;min-width:0;height:32px;border-radius:6px;
  padding:0 9px;font-size:12px;font-family:ui-monospace,SFMono-Regular,
  Menlo,monospace;background:var(--c-bg);border:1px solid var(--c-border);
  color:var(--c-ink);}
.cat-anun-novo input:focus{outline:none;border-color:var(--c-ml);}
.cat-anun-novo .cat-pop-ok{width:auto;margin-top:0;padding:0 14px;height:32px;}

/* Custos a esquerda, resultado a direita. Os sete campos de custo voltaram
   pra gaveta em 11/09 e somaram ~180px de altura - ela voltou a rolar, que
   era justamente o que consertamos em 09/09. Em duas colunas a altura cai
   pela metade sem esconder nada dele. A gaveta foi de 560 pra 840px. */
.cat-m-lado{display:grid;grid-template-columns:300px minmax(0,1fr);gap:12px;
  align-items:start;}
.cat-m-lado .cat-m-custos{grid-template-columns:1fr;}
.cat-m-lado .cat-m-custo .cat-pop-campo{width:120px;}
@media (max-width:860px){
  .cat-m-lado{grid-template-columns:1fr;}
  .cat-m-lado .cat-m-custos{grid-template-columns:1fr 1fr;}
}

/* Os dois ROAS. Quando o orcado fica ABAIXO do minimo, o preco esta'
   assumindo uma verba de ads que a conta nao sustenta - a caixa acende. */
.cat-m-caixa.alerta{border-color:var(--c-bad);
  background:linear-gradient(160deg,var(--c-bad-bg),var(--c-bg));}
.cat-m-duo b.vermelho{color:var(--c-bad);}