/* ==========================================================================
   SHARK — Layout: Painel, Vitrine, Checkout e Área de Membros
   ========================================================================== */

/* ============================== APP SHELL ================================ */
/* As duas luzes de ambiente moram aqui, não no `body`: a vitrine usa
   `body.store` e é vestida pelo template ativo — o painel é que ganha o
   fundo premium. `fixed` prende as luzes à janela, senão elas se esticariam
   ao longo do scroll e sumiriam em páginas longas. */
.app {
  display: flex;
  min-height: 100vh;
  background:
    radial-gradient(1200px 760px at 6% -14%, var(--luz-1), transparent 58%),
    radial-gradient(1020px 700px at 97% 2%, var(--luz-2), transparent 60%),
    var(--bg-0);
  background-attachment: fixed, fixed, scroll;
}

/* -------------------------------- sidebar ------------------------------- */
.side {
  width: var(--sidebar-w);
  flex: none;
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 60;
  transition: width var(--t), transform var(--t);
}

.side-brand {
  height: var(--topbar-h);
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
/* Marca da Shark, sem texto ao lado.
   É imagem e não máscara: a arte original tem anel azul em degradê e o S
   metálico: máscara só recorta silhueta de UMA cor e jogaria fora o desenho.
   O `background-size` acima de 100% corta a margem morta do arquivo, para o
   S encher a caixa nos 30px da barra lateral. */
.logo-mark {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  background: #0b0f16 var(--marca-shark) center / 116% no-repeat;
}
:root {
  --marca-shark: url("../img/marca-shark.jpg");
}

/* Caixa do logo DA LOJA — o emoji ou a imagem que o lojista subiu.
   Separada da marca da plataforma de propósito: antes as duas usavam
   `.logo-mark`, e a máscara recortava o logo do lojista na silhueta da
   plataforma. São marcas diferentes e agora têm regras diferentes. */
.loja-mark {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--ac-soft); color: var(--ac); font-size: 15px;
}

/* traço em pé separando a marca do seletor de loja */
.brand-risco {
  width: 1px; height: 22px; flex: none;
  background: var(--line-strong);
}

.brand-loja {
  display: flex; align-items: center; gap: 9px;
  min-width: 0; height: 34px; padding: 0 8px 0 4px;
  border-radius: 9px; background: none;
  font: inherit; font-size: 14px; font-weight: 640; color: var(--tx-0);
  letter-spacing: -0.01em; cursor: pointer;
  transition: background var(--t);
}
.brand-loja:hover { background: var(--bg-2); }
.brand-loja .thumb {
  width: 26px; height: 26px; flex: none; border-radius: 8px;
  display: grid; place-items: center; font-size: 13px;
}
.brand-loja .caret { width: 15px; height: 15px; flex: none; color: var(--tx-3); }

.side-store {
  margin: 12px; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-2);
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; transition: all var(--t);
}
.side-store:hover { border-color: var(--line-strong); background: var(--bg-3); }
.side-store .ic-loja {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--bg-3); color: var(--tx-2);
}
.side-store .ic-loja svg { width: 16px; height: 16px; }
.side-store .trocar { width: 16px; height: 16px; flex: none; color: var(--tx-3); }

.side-nav { flex: 1; overflow-y: auto; padding: 4px 10px 16px; }
.side-nav::-webkit-scrollbar { width: 6px; }

.nav-group { margin-top: 14px; }
.nav-group > .label { padding: 0 8px 7px; display: block; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 10px; border-radius: 9px;
  color: var(--tx-1); font-size: 13.5px; font-weight: 500;
  transition: all var(--t); position: relative; cursor: pointer;
  width: 100%;
}
.nav-item svg { width: 16px; height: 16px; flex: none; color: var(--tx-2); transition: color var(--t); }
.nav-item:hover { background: var(--bg-2); color: var(--tx-0); }
.nav-item:hover svg { color: var(--tx-1); }
.nav-item.on { background: var(--ac-soft); color: var(--ac); font-weight: 600; }
.nav-item.on svg { color: var(--ac); }
.nav-item.on::before {
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--ac);
}
.nav-item .caret { margin-left: auto; width: 13px; height: 13px; transition: transform var(--t); }
.nav-item.open .caret { transform: rotate(90deg); }
.nav-item .tag {
  margin-left: auto; font-size: 10px; font-weight: 650; padding: 2px 6px;
  border-radius: 5px; background: var(--vi-soft); color: var(--vi);
}

.nav-sub {
  display: none;
  margin: 2px 0 4px 19px;
  padding: 2px 0 2px 12px;
  border-left: 1px solid var(--line);
}
.nav-sub.open { display: block; }
.nav-sub a {
  display: flex; align-items: center; gap: 9px;
  height: 32px; padding: 0 10px; border-radius: 8px;
  font-size: 12.5px; color: var(--tx-2); transition: all var(--t);
}
.nav-sub a svg { width: 14px; height: 14px; flex: none; color: var(--tx-3); }
.nav-sub a:hover { color: var(--tx-0); background: var(--bg-2); }
.nav-sub a:hover svg { color: var(--tx-1); }
.nav-sub a.on { color: var(--ac); font-weight: 580; background: var(--ac-soft); }
.nav-sub a.on svg { color: var(--ac); }
.nav-sub a .tag {
  margin-left: auto; font-size: 10px; font-weight: 620;
  padding: 2px 7px; border-radius: 6px;
  background: var(--bg-3); color: var(--tx-2); border: 1px solid var(--line);
}

/* pai de grupo aberto: destaca sem competir com o item filho ativo */
.nav-item.open.on { background: transparent; color: var(--tx-0); }
.nav-item.open.on::before { display: none; }
.nav-item.open.on > svg:first-child { color: var(--tx-1); }

.side-foot { padding: 12px; border-top: 1px solid var(--line); flex: none; }

.goal-card {
  padding: 12px; border-radius: var(--r-md);
  background: var(--bg-2);
  border: 1px solid var(--line);
}

/* -------------------------------- topbar -------------------------------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-h); flex: none;
  padding: 0 22px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-0) 82%, transparent);
  backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 50;
}

.cmd-trigger {
  display: flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 10px 0 11px; min-width: 240px;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--tx-3); font-size: 13px;
  transition: all var(--t);
}
.cmd-trigger:hover { border-color: var(--line-strong); background: var(--bg-3); color: var(--tx-2); }
.cmd-trigger svg { width: 15px; height: 15px; }
.cmd-trigger .kbd { margin-left: auto; }

.icon-btn {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: grid; place-items: center; color: var(--tx-2);
  border: 1px solid transparent; transition: all var(--t); position: relative;
}
.icon-btn:hover { background: var(--bg-2); color: var(--tx-0); border-color: var(--line); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn .ping {
  position: absolute; top: 6px; right: 7px; width: 7px; height: 7px;
  border-radius: 99px; background: var(--rd); border: 2px solid var(--bg-0);
}

/* ====================== switch de tema (header) =========================
   Regra que o componente representa, e que vale a pena escrever porque é
   contraintuitiva à primeira vista:

     VERDE  + bolinha à DIREITA   → modo CLARO   (a luz está acesa)
     CINZA  + bolinha à ESQUERDA  → modo ESCURO  (a luz está apagada)

   O switch mostra o estado ATUAL, não o que acontece ao clicar. Por isso o
   verde aparece quando a interface já está clara.

   As cores são literais de propósito: são as do componente do sistema
   operacional que a referência copia, e amarrá-las ao acento da loja faria
   o switch mudar de cor quando o lojista trocasse a paleta dele.
   ===================================================================== */
.shark-theme-switch {
  position: relative;
  width: 46px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #5c5c62;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .22s ease, box-shadow .22s ease;
}

.shark-theme-switch__thumb {
  position: absolute;
  width: 22px;
  height: 22px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28), 0 1px 2px rgba(0, 0, 0, .16);
  transform: translateX(0);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

/* MODO CLARO — verde, bolinha à direita */
.shark-theme-switch.is-light { background: #30d158; }
.shark-theme-switch.is-light .shark-theme-switch__thumb { transform: translateX(20px); }

/* MODO ESCURO — cinza, bolinha à esquerda */
.shark-theme-switch.is-dark { background: #5c5c62; }
.shark-theme-switch.is-dark .shark-theme-switch__thumb { transform: translateX(0); }

.shark-theme-switch:hover { box-shadow: 0 0 0 4px rgba(255, 255, 255, .06); }
.shark-theme-switch:focus-visible {
  outline: 2px solid rgba(48, 209, 88, .45);
  outline-offset: 3px;
}
.shark-theme-switch:active .shark-theme-switch__thumb { width: 25px; }

/* Quem pediu menos movimento recebe a troca sem o deslize. */
@media (prefers-reduced-motion: reduce) {
  .shark-theme-switch, .shark-theme-switch__thumb { transition: none; }
}
.page { padding: 26px 22px 60px; flex: 1; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }

/* ------------------------------ métrica KPI -----------------------------
   Desenho vindo da referência do Power BI: orbe de luz colorido à esquerda
   e o bloco de números à direita. Cada cartão recebe sua cor em `--kpi`.

   O orbe ocupa o mesmo lugar onde o ícone já estava, então em vez de
   empilhar um brilho ao lado do ícone, o ícone passou a morar DENTRO do
   brilho — é uma peça só, não duas. */
/* A moldura acesa na cor da métrica é o que separa os quatro cartões de
   relance — a borda e o brilho externo, não um fundo colorido, que
   competiria com o número. A curva no rodapé sangra até as bordas. */
.kpi {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 16px 18px 0;
  border-radius: var(--r-xl);
  border-color: color-mix(in srgb, var(--kpi) 42%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--kpi) 18%, transparent),
    0 6px 26px -10px color-mix(in srgb, var(--kpi) 55%, transparent),
    var(--sh-2);
}
/* Luz difusa vinda de cima, atrás do conteúdo. */
.kpi::after {
  content: "";
  position: absolute; inset: -60% -20% auto -20%; height: 150%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--kpi) 16%, transparent), transparent 70%);
  pointer-events: none;
}
.kpi > * { position: relative; z-index: 1; }

.kpi-cima {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.kpi-ic {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--kpi);
  background: color-mix(in srgb, var(--kpi) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--kpi) 32%, transparent);
}
.kpi-ic svg { width: 17px; height: 17px; }

.kpi .val { font-size: 26px; font-weight: 680; letter-spacing: -0.035em; line-height: 1.15; margin-top: 2px; }
.kpi .cap { font-size: 12.5px; color: var(--tx-2); margin-top: 5px; }

/* A curva encosta nas laterais e no fundo do cartão: o padding do bloco é
   anulado com margem negativa, e o cartão não tem padding inferior. */
.kpi-curva { margin: 14px -18px 0; line-height: 0; }
.kpi.com-curva { padding-bottom: 0; }
.kpi-curva .spark { width: 100%; height: 54px; display: block; }

/* ------------------------- conversão da loja ---------------------------- */
.conv-numero { display: flex; align-items: center; gap: 10px; }
.conv-numero .pct {
  font-size: 40px; font-weight: 700; letter-spacing: -.04em; line-height: 1;
  color: var(--ac);
}
.conv-numero .seta { display: grid; place-items: center; }
.conv-numero .seta svg { width: 22px; height: 22px; }
.conv-numero .seta.up { color: var(--ac); }
.conv-numero .seta.down { color: var(--rd); }

/* Duas colunas de rótulo + número. Sem caixas: a referência separa por
   espaço, o que deixa os quatro números mais fáceis de comparar. */
.conv-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.conv-grade .rot {
  display: block; font-size: 11.5px; color: var(--tx-3);
  letter-spacing: .04em; margin-bottom: 3px;
}
.conv-grade b { font-size: 20px; font-weight: 680; letter-spacing: -.02em; }
.conv-grade b.ruim { color: var(--rd); }
.conv-grade b .tiny { font-size: 12px; font-weight: 500; }

/* ------------------------- ponta da sparkline --------------------------- */
/* A curva estica para preencher a largura (`preserveAspectRatio: none`), o
   que deformaria um <circle> dentro do SVG. O ponto é um elemento HTML
   posicionado por cima, então continua redondo em qualquer largura. */
.spark-caixa { position: relative; display: block; line-height: 0; }
.spark-fim {
  position: absolute; right: 0; translate: 50% -50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cor);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor) 24%, transparent);
}

/* --------------------------- leitura rápida ----------------------------- */
.leitura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; }
@media (max-width: 860px) { .leitura { grid-template-columns: 1fr; gap: 24px; } }

.leitura .frase {
  font-size: 14px; color: var(--tx-1); line-height: 1.6;
  padding-left: 12px; border-left: 2px solid var(--ac-line);
  margin-bottom: 10px;
}

/* Quatro colunas fixas para os números alinharem entre as linhas: sigla,
   percentual, barra e valor. */
.linha-uf {
  display: grid; grid-template-columns: 28px 38px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 5px 0;
}
.linha-uf .uf { font-size: 12.5px; font-weight: 640; }
.linha-uf .pct { font-size: 12px; color: var(--tx-3); text-align: right; }
.linha-uf .trilho {
  height: 8px; border-radius: 99px; overflow: hidden;
  background: var(--bg-3);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
}
.linha-uf .trilho i {
  display: block; height: 100%; border-radius: 99px;
  background-image: linear-gradient(180deg, rgba(255,255,255,.3), rgba(0,0,0,.2));
}
.linha-uf .val { font-size: 12.5px; white-space: nowrap; }

/* Título de eixo, menor e mais apagado que os números da escala. */
.chart .axis-tit {
  fill: var(--tx-3); font-size: 10px; font-weight: 600;
  letter-spacing: .04em; font-family: var(--ff);
}

/* ======================= grade da tela de análises ======================
   Três colunas iguais. A versão anterior usava seis colunas com spans
   diferentes e a conta estourava (2+3+2 = 7): o terceiro cartão caía para a
   linha seguinte e deixava buraco. Três colunas não têm como somar errado.

   `stretch` iguala a altura dos cartões da mesma linha — com `start`, o
   cartão mais baixo deixava um vão embaixo. */
.grid-an {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; align-items: stretch;
}
/* Cartão que cresce mais que os vizinhos empurra o conteúdo para o topo e
   deixa o rodapé colado embaixo, em vez de sobrar espaço no meio. */
.grid-an > * { display: flex; flex-direction: column; }
.grid-an > * > .rodape-cartao { margin-top: auto; }

@media (max-width: 1100px) { .grid-an { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .grid-an { grid-template-columns: 1fr; } }

.rodape-cartao {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--tx-2);
}

.divisor-secao {
  display: flex; align-items: center; gap: 14px;
  margin: 32px 0 16px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-3);
}
.divisor-secao::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------------------------- funil em escada --------------------------- */
.escada { display: flex; flex-direction: column; }
.degrau {
  display: grid; grid-template-columns: 20px minmax(70px, 1fr) minmax(0, 2fr) auto;
  align-items: center; gap: 10px;
}
.degrau .n {
  font-family: var(--ff-mono); font-size: 11px; color: var(--tx-3);
  font-variant-numeric: tabular-nums;
}
.degrau .rot { font-size: 12.5px; color: var(--tx-1); }
.degrau .barra {
  height: 26px; border-radius: 6px; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line);
}
.degrau .barra i {
  display: block; height: 100%; border-radius: 5px;
  background: var(--ac);
  background-image: linear-gradient(180deg, rgba(255,255,255,.28), rgba(0,0,0,.18));
}
.degrau .v { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* A queda vive entre dois degraus, alinhada à coluna da barra. */
.queda {
  grid-column: 1 / -1;
  display: flex; justify-content: flex-end;
  padding: 3px 0;
}
.queda span {
  font-size: 11px; font-weight: 640; color: var(--rd);
  background: var(--rd-soft); padding: 1px 7px; border-radius: 5px;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------ legenda PIX ----------------------------- */
.legenda-pix {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--tx-2);
}
.legenda-pix span { display: inline-flex; align-items: center; gap: 7px; }
.legenda-pix i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.legenda-pix b { color: var(--tx-0); }

/* Três fatos empilhados: rótulo à esquerda, número à direita. Ocupa o vão
   que sobrava embaixo do donut sem inventar mais um gráfico. */
.fatos { display: grid; gap: 1px; margin-top: 16px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.fatos > div {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; background: var(--panel-soft);
}
.fatos .rot { font-size: 12.5px; color: var(--tx-2); }
.fatos b { font-size: 14px; font-weight: 660; font-variant-numeric: tabular-nums; }
.fatos b.ruim { color: var(--rd); }
.fatos b.boa { color: var(--ac); }

/* ===================== vitrine renderizada do template ================== */
/* O template ocupa a janela inteira: ele traz o próprio cabeçalho, rodapé e
   fundo, então qualquer moldura desta página apareceria como borda estranha
   em volta da loja. */
body.com-template { margin: 0; overflow: hidden; }
.vitrine-tpl {
  display: block; border: 0;
  width: 100vw; height: 100vh;
  background: var(--bg-0);
}

/* --------------------------- tabela de produtos ------------------------- */
.tabela-top .cabecalho,
.linha-top {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 54px 76px;
  align-items: center; gap: 10px;
}
.tabela-top .cabecalho {
  grid-template-columns: 30px minmax(0, 1fr) 54px 76px;
  padding: 0 0 8px; border-bottom: 1px solid var(--line);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tx-3); font-weight: 700;
}
.tabela-top .cabecalho span:first-child { grid-column: 1 / 3; }

/* A barra e o percentual ocupam a segunda linha da mesma célula, ligados ao
   produto acima — assim a leitura "quanto pesa" fica colada ao item. */
.linha-top {
  grid-template-areas: "capa nome qtd rec" ".    prog prog pct";
  grid-template-columns: 30px minmax(0, 1fr) 54px 76px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  row-gap: 6px;
}
.linha-top:last-child { border-bottom: 0; }
.linha-top:hover .nome { color: var(--ac); }
.linha-top .capa {
  grid-area: capa; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; font-size: 14px; border: 1px solid var(--line);
}
.linha-top .nome { grid-area: nome; font-size: 13px; font-weight: 560; }
.linha-top .qtd { grid-area: qtd; font-size: 12.5px; color: var(--tx-2); }
.linha-top .rec { grid-area: rec; font-size: 12.5px; font-weight: 640; }
.linha-top .prog {
  grid-area: prog; height: 6px; border-radius: 99px; overflow: hidden;
  background: var(--bg-3);
}
.linha-top .prog i { display: block; height: 100%; border-radius: 99px; background: var(--ac); }
.linha-top .pctp { grid-area: pct; font-size: 11px; color: var(--tx-3); text-align: right; }

/* --------------------------- origem do tráfego -------------------------- */
.linha-origem {
  display: grid; grid-template-columns: minmax(78px, auto) minmax(0, 1fr) 34px auto;
  align-items: center; gap: 10px; padding: 5px 0;
}
.linha-origem .nome { font-size: 12.5px; }
.linha-origem .trilho {
  height: 8px; border-radius: 99px; overflow: hidden; background: var(--bg-3);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
}
.linha-origem .trilho i {
  display: block; height: 100%; border-radius: 99px;
  background-image: linear-gradient(180deg, rgba(255,255,255,.3), rgba(0,0,0,.2));
}
.linha-origem .pct { font-size: 11.5px; color: var(--tx-3); text-align: right; }
.linha-origem .val { font-size: 12.5px; white-space: nowrap; }
.kpi .delta {
  display: inline-flex; align-items: center; gap: 3px; height: 21px; padding: 0 7px;
  border-radius: 6px; font-size: 11.5px; font-weight: 650;
}
.kpi .delta.up { background: var(--ac-soft); color: var(--ac); }
.kpi .delta.down { background: var(--rd-soft); color: var(--rd); }
.kpi .delta.flat { background: var(--bg-3); color: var(--tx-2); }
.kpi .delta svg { width: 12px; height: 12px; }

/* ------------------------------- gráficos ------------------------------- */
.chart { width: 100%; overflow: visible; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; }
.chart .axis-t { fill: var(--tx-3); font-size: 10px; font-family: var(--ff); }

.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.chart-legend .it { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tx-2); }
.chart-legend .sw { width: 9px; height: 9px; border-radius: 3px; }

.chart-tip {
  position: fixed; z-index: 300; pointer-events: none;
  padding: 8px 11px; border-radius: 9px;
  background: var(--bg-3); border: 1px solid var(--line-strong);
  box-shadow: var(--sh-2); font-size: 12px; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 10px));
  opacity: 0; transition: opacity 120ms;
}
.chart-tip.on { opacity: 1; }

/* ---------------------------- mapa do Brasil ---------------------------- */
.mapa-br { position: relative; width: 100%; }
.mapa-br svg { width: 100%; height: auto; overflow: visible; }
.mapa-br .uf-path {
  stroke: var(--bg-0);
  stroke-width: 1.1;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 160ms linear, stroke 160ms linear;
}
.mapa-br .uf-path:hover { stroke: var(--tx-0); stroke-width: 1.6; }
.mapa-br .uf-label {
  font-size: 9px; font-weight: 620; fill: var(--tx-2);
  pointer-events: none; user-select: none;
}
.mapa-br .uf-label.forte { fill: var(--ac-tx); }

.mapa-zoom {
  position: absolute; right: 0; top: 0; display: flex; gap: 2px;
  padding: 3px; border-radius: 9px;
  background: var(--bg-2); border: 1px solid var(--line);
}
.mapa-zoom button {
  width: 26px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  color: var(--tx-2); transition: all var(--t);
}
.mapa-zoom button:hover { background: var(--bg-3); color: var(--tx-0); }

.mapa-escala { display: flex; align-items: center; gap: 8px; }
.mapa-escala .faixa {
  flex: 1; height: 7px; border-radius: 99px;
  background: linear-gradient(90deg, var(--bg-3), var(--ac));
}

/* ------------------------------ lista rank ------------------------------ */
.rank-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 10px; transition: background var(--t);
}
.rank-item:hover { background: var(--bg-2); }
.rank-n {
  width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center;
  font-size: 11px; font-weight: 680; background: var(--bg-3); color: var(--tx-2);
}
.rank-item:nth-child(1) .rank-n { background: var(--ac-soft); color: var(--ac); }

/* ------------------------------ IA insights ----------------------------- */
.insight {
  display: flex; gap: 11px; padding: 13px;
  border-radius: var(--r-md); background: var(--bg-2);
  border: 1px solid var(--line); transition: all var(--t);
}
.insight:hover { border-color: var(--line-strong); }
.insight .ic { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; }
.insight.op .ic { background: var(--ac-soft); color: var(--ac); }
.insight.rk .ic { background: var(--am-soft); color: var(--am); }
.insight.al .ic { background: var(--rd-soft); color: var(--rd); }
.insight .ic svg { width: 15px; height: 15px; }

/* --------------------------- feed em tempo real -------------------------- */
.feed { display: flex; flex-direction: column; }
.feed-item { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.feed-item:last-child { border-bottom: 0; }
.feed-item .dotcol { display: flex; flex-direction: column; align-items: center; flex: none; padding-top: 4px; }
.feed-item .d { width: 8px; height: 8px; border-radius: 99px; background: var(--tx-3); }
.feed-item.ok .d { background: var(--ac); }
.feed-item.pend .d { background: var(--am); }
.feed-item.fail .d { background: var(--rd); }

/* ------------------------------ command palette -------------------------- */
.cmdk-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(3, 6, 5, 0.6); backdrop-filter: blur(8px);
  display: flex; justify-content: center; padding-top: 12vh;
  animation: fade 120ms ease;
}
.cmdk {
  width: min(600px, calc(100% - 32px)); height: fit-content; max-height: 62vh;
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  display: flex; flex-direction: column; overflow: hidden;
  animation: pop 160ms cubic-bezier(.2,.9,.3,1);
}
.cmdk-inp { display: flex; align-items: center; gap: 11px; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.cmdk-inp input { flex: 1; background: none; border: 0; outline: none; font-size: 15px; }
.cmdk-inp input::placeholder { color: var(--tx-3); }
.cmdk-list { overflow-y: auto; padding: 8px; }
.cmdk-sec { padding: 8px 10px 5px; }
.cmdk-it {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px; border-radius: 9px; font-size: 13.5px; color: var(--tx-1);
  transition: background var(--t);
}
.cmdk-it svg { width: 16px; height: 16px; color: var(--tx-3); flex: none; }
.cmdk-it.sel { background: var(--ac-soft); color: var(--ac); }
.cmdk-it.sel svg { color: var(--ac); }
.cmdk-it .rt { margin-left: auto; font-size: 11px; color: var(--tx-3); }

/* ------------------------------- drawer --------------------------------- */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(3,6,5,.6); backdrop-filter: blur(4px);
  display: flex; justify-content: flex-end; animation: fade 140ms ease;
}
.drawer {
  width: min(520px, 100%); height: 100%; overflow-y: auto;
  background: var(--panel); border-left: 1px solid var(--line-strong);
  box-shadow: var(--sh-3); animation: slidein 220ms cubic-bezier(.2,.9,.3,1);
}
.drawer-head {
  position: sticky; top: 0; z-index: 2; background: var(--panel);
  padding: 18px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}

/* ------------------------------ produtos grid ---------------------------- */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px; }
.prod-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: all var(--t); cursor: pointer; display: flex; flex-direction: column;
}
.prod-card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--sh-2); }
.prod-cover {
  aspect-ratio: 16/9; position: relative;
  display: grid; place-items: center; font-size: 34px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.prod-cover .over { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.prod-body { padding: 14px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.prod-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }

/* ------------------------------ tabs ------------------------------------ */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button {
  padding: 10px 14px; font-size: 13px; font-weight: 550; color: var(--tx-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: all var(--t); white-space: nowrap;
}
.tabs button:hover { color: var(--tx-0); }
.tabs button.on { color: var(--ac); border-bottom-color: var(--ac); }
/* variante neutra: sublinhado na cor do texto, sem acento */
.tabs.claro button.on { color: var(--tx-0); border-bottom-color: var(--tx-0); }

/* ============================== GATEWAYS ================================ */
.gw-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.gw-item:last-child { border-bottom: 0; }

.gw-selo {
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--m); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: -.02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  overflow: hidden;
}
/* Variante com logotipo real. `contain` porque cortar a marca de um parceiro
   para preencher o quadro é o tipo de coisa que descaracteriza a marca —
   sobra de fundo é preferível a logo espremida. */
.gw-selo.marca { background: #fff; padding: 3px; }
.gw-selo.marca img { width: 100%; height: 100%; object-fit: contain; display: block; }

.gw-info { flex: 1; min-width: 0; }
.gw-nome {
  display: flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 620; letter-spacing: -.01em;
}
.gw-nome a { display: flex; color: var(--tx-3); }
.gw-nome a:hover { color: var(--ac); }
.gw-nome a svg { width: 13px; height: 13px; }

.gw-taxa {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 3px; font-size: 12.5px; color: var(--tx-1);
}
.gw-taxa .metodo { color: var(--tx-3); }
.gw-taxa b { font-weight: 560; }
.gw-taxa .plataforma { color: var(--ac); font-weight: 560; }

.gw-estado {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-size: 13px; color: var(--tx-2); white-space: nowrap;
}
.gw-estado .dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; display: block; }
.gw-estado.ok { color: var(--ac); }
.gw-estado.off { color: var(--tx-3); }
.gw-estado.off .dot { background: none; box-shadow: inset 0 0 0 1px currentColor; }
/* Pendência de aprovação e falha de credencial não são "desconectado": o
   lojista precisa distinguir "ainda não comecei" de "comecei e travou". */
.gw-estado.warn { color: var(--am); }
.gw-estado.bad { color: var(--rd); }

.gw-item .btn { min-width: 106px; justify-content: center; flex: none; }

@media (max-width: 720px) {
  .gw-item { flex-wrap: wrap; gap: 10px; }
  .gw-info { flex-basis: calc(100% - 52px); }
  .gw-estado { order: 3; }
  .gw-item .btn { order: 4; margin-left: auto; }
}

/* caixa tracejada de estado vazio */
.vazio-tracejado {
  padding: 34px 20px; border-radius: var(--r-lg);
  border: 1px dashed var(--line-strong);
  text-align: center; font-size: 13.5px; color: var(--tx-2);
}

/* ============================== VITRINE ================================== */
.store { background: var(--bg-0); min-height: 100vh; }

.store-nav {
  position: sticky; top: 0; z-index: 40;
  height: 66px; padding: 0 24px;
  display: flex; align-items: center; gap: 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-0) 85%, transparent);
  backdrop-filter: blur(14px);
}
.store-wrap { max-width: 1220px; margin: 0 auto; padding: 0 24px; }

.hero {
  position: relative; overflow: hidden;
  border-radius: 26px; padding: 56px 44px;
  background: var(--bg-1);
  border: 1px solid var(--line);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: .5;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(30px, 4.4vw, 50px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.06; }

.chipbar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.chip {
  height: 34px; padding: 0 14px; border-radius: 99px; white-space: nowrap;
  border: 1px solid var(--line); background: var(--bg-1);
  font-size: 13px; font-weight: 520; color: var(--tx-1); transition: all var(--t);
}
.chip:hover { border-color: var(--line-strong); color: var(--tx-0); }
.chip.on { background: var(--ac); border-color: var(--ac); color: var(--ac-tx); font-weight: 620; }

.sc { /* store card */
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; display: flex; flex-direction: column; transition: all var(--t);
}
.sc:hover { transform: translateY(-3px); border-color: var(--ac-line); box-shadow: var(--sh-2); }
.sc-cover {
  aspect-ratio: 16/10; position: relative; display: grid; place-items: center;
  font-size: 42px; border-bottom: 1px solid var(--line);
}
.sc-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sc-price { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }
.sc-old { font-size: 12.5px; color: var(--tx-3); text-decoration: line-through; }

.stars { display: inline-flex; gap: 1px; color: var(--am); }
.stars svg { width: 13px; height: 13px; }

/* ============================ TEMPLATES DA LOJA ========================== */
.tpl-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
  position: relative;
}
.tpl-card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--sh-2); }
.tpl-card.on { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac-line); }
.tpl-card .tpl-info { padding: 14px 16px 16px; }
.tpl-card .tpl-nome { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 620; }
.tpl-card .tpl-nome button { color: var(--tx-3); display: flex; }
.tpl-card .tpl-nome button:hover { color: var(--ac); }

/* botão de três pontos sobre a capa */
.tpl-menu-btn {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(10, 10, 12, .72); color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--t), background var(--t);
}
.tpl-card:hover .tpl-menu-btn, .tpl-menu-btn.on { opacity: 1; }
.tpl-menu-btn:hover { background: rgba(10, 10, 12, .92); }

.tpl-selo {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  height: 24px; padding: 0 9px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: -.01em;
  background: rgba(10, 10, 12, .72); color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
}
.tpl-selo.quente { background: #f5a524; color: #1a1205; border-color: #f5a524; right: 10px; left: auto; }

/* ---- miniatura da vitrine, montada com divs ---- */
.tpl-capa {
  aspect-ratio: 16 / 10; overflow: hidden; position: relative;
  background: var(--c-bg); padding: 7px 8px; display: flex; flex-direction: column; gap: 6px;
  container-type: inline-size;
}
.tpl-capa * { border-radius: 2px; }
.tpl-capa .t-bar {
  height: 9px; background: var(--c-painel); display: flex; align-items: center; gap: 4px; padding: 0 5px; flex: none;
}
.tpl-capa .t-bar i { display: block; height: 3px; background: var(--c-tx); opacity: .35; border-radius: 99px; }
.tpl-capa .t-bar .t-logo { width: 9px; background: var(--c-ac); opacity: 1; height: 4px; }
.tpl-capa .t-bar .t-cta { width: 12px; background: var(--c-ac); opacity: 1; height: 4px; margin-left: auto; }

.tpl-capa .t-bar .t-busca {
  width: 30px; height: 5px; margin-left: auto; background: var(--c-tx); opacity: .16; border-radius: 99px;
}
.tpl-capa .t-bar .t-cta { margin-left: 4px; }

.tpl-capa .t-hero { display: flex; gap: 7px; flex: 1.35; min-height: 0; }
.tpl-capa .t-hero.coluna { flex-direction: column; }
.tpl-capa .t-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; justify-content: center; padding: 3px 2px; }
.tpl-capa .t-txt.centro { align-items: center; }
.tpl-capa .t-txt.centro .t-p, .tpl-capa .t-txt.centro .t-h1, .tpl-capa .t-txt.centro .t-h2 { align-self: center; }
.tpl-capa .t-h1 { height: 8px; width: 72%; background: var(--c-tx); opacity: .95; }
.tpl-capa .t-h2 { height: 8px; width: 56%; background: var(--c-ac); }
.tpl-capa .t-p { height: 2.5px; width: 84%; background: var(--c-tx); opacity: .28; margin-top: 1px; }
.tpl-capa .t-btns { display: flex; gap: 4px; margin-top: 3px; }
.tpl-capa .t-btn { height: 7px; width: 26px; background: var(--c-ac); }
.tpl-capa .t-btn.alt { width: 20px; background: var(--c-painel); }

.tpl-capa .t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; min-height: 0; }
.tpl-capa .t-grid.g4 { grid-template-columns: repeat(4, 1fr); flex: 1; }
.tpl-capa .t-mosaico { flex: 1.15; }
.tpl-capa .t-tile {
  background: var(--c-ac); opacity: .92; display: flex; align-items: flex-end; padding: 2px; min-height: 0;
}
.tpl-capa .t-tile i { display: block; height: 2px; width: 62%; background: #fff; opacity: .75; }
.tpl-capa .t-tile.card { background: var(--c-painel); opacity: 1; }
.tpl-capa .t-tile.card i { background: var(--c-tx); opacity: .45; }

/* faixa de categoria abaixo do topo */
.tpl-capa .t-sec { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; }
.tpl-capa .t-sec-tit { height: 4px; width: 38%; margin: 0 auto; background: var(--c-tx); opacity: .55; flex: none; }
.tpl-capa .t-sec .t-grid { flex: 1; }

.tpl-capa.quadrado * { border-radius: 0; }
.tpl-capa.editorial .t-h1 { width: 84%; height: 10px; }
.tpl-capa.editorial .t-h2 { width: 60%; }

/* menu flutuante do card */
.tpl-menu {
  position: fixed; z-index: 90; min-width: 208px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 13px; box-shadow: var(--sh-3);
}
.tpl-menu button {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 9px;
  font-size: 13px; color: var(--tx-1); text-align: left;
  transition: background var(--t), color var(--t);
}
.tpl-menu button:hover { background: var(--bg-2); color: var(--tx-0); }
.tpl-menu button svg { width: 15px; height: 15px; color: var(--tx-3); }
.tpl-menu button:hover svg { color: var(--tx-1); }
.tpl-menu button.perigo { color: var(--rd); }
.tpl-menu button.perigo svg { color: var(--rd); }
.tpl-menu button.perigo:hover { background: var(--rd-soft); }
.tpl-menu .divider { margin: 5px 2px; }

@media (max-width: 720px) { .tpl-menu { min-width: 180px; } }

/* ========================= menu do avatar (conta) ======================== */
/* `relative` aqui é o que ancora o menu no avatar: sem isso ele se
   posicionaria pela janela e desgrudaria do botão ao rolar a página. */
.conta-wrap { position: relative; flex: none; }

.conta-menu {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 95;
  min-width: 244px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 14px; box-shadow: var(--sh-3);
}
/* O atributo `hidden` precisa vencer o display das regras acima —
   sem isto o menu nasce aberto. */
.conta-menu[hidden] { display: none; }

.conta-menu .cabeca { padding: 10px 10px 12px; }
.conta-menu .cabeca b {
  display: block; font-size: 14px; font-weight: 640;
  letter-spacing: -0.01em; color: var(--tx-0);
}
.conta-menu .cabeca span { font-size: 12.5px; color: var(--tx-2); }

.conta-menu .rotulo {
  padding: 6px 10px 4px; font-size: 10.5px; font-weight: 650;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--tx-3);
}

.conta-menu .grupo { display: flex; flex-direction: column; }
.conta-menu a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 9px;
  font-size: 13.5px; color: var(--tx-1);
  transition: background var(--t), color var(--t);
}
.conta-menu a:hover { background: var(--bg-2); color: var(--tx-0); }
.conta-menu a svg { width: 16px; height: 16px; flex: none; color: var(--tx-3); }
.conta-menu a:hover svg { color: var(--tx-1); }
.conta-menu .divider { margin: 5px 2px; }

/* O avatar virou <button>: sem isto ele herda o reset de button e perde o
   círculo que tinha como <a>. */
button.av { border: 1px solid var(--line-strong); cursor: pointer; }

@media (max-width: 720px) { .conta-menu { min-width: 214px; } }

/* ========================== área da conta =============================== */
.voltar-conta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 16px; font-size: 13.5px; color: var(--tx-2);
  transition: color var(--t);
}
.voltar-conta:hover { color: var(--tx-0); }
.voltar-conta svg { width: 16px; height: 16px; }

/* Segmentado, não sublinhado: na referência as abas moram dentro de uma
   caixa arredondada e a ativa é uma pastilha mais clara. */
.abas-conta {
  display: flex; gap: 2px; padding: 5px; overflow-x: auto;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 13px;
}
.abas-conta::-webkit-scrollbar { height: 0; }
.abas-conta button {
  position: relative; flex: none;
  padding: 9px 16px; border-radius: 9px;
  font-size: 13.5px; font-weight: 550; color: var(--tx-2);
  white-space: nowrap;
  transition: background var(--t), color var(--t);
}
.abas-conta button:hover { color: var(--tx-0); }
.abas-conta button.on { background: var(--panel); color: var(--tx-0); box-shadow: var(--sh-1); }
/* Pontinho de "requer atenção", como no Segurança da referência. */
.abas-conta .sinal {
  position: absolute; top: 7px; right: 8px;
  width: 6px; height: 6px; border-radius: 99px; background: var(--rd);
}

/* ------------------------------ ficha de loja --------------------------- */
.loja-ficha {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border-radius: var(--r-lg);
  background: var(--bg-2); border: 1px solid var(--line);
  cursor: pointer; transition: border-color var(--t), background var(--t);
}
.loja-ficha:hover { border-color: var(--line-strong); }
.loja-ficha.atual { border-color: var(--ac-line); background: var(--ac-soft); }

.loja-ficha .capa {
  width: 46px; height: 46px; flex: none; border-radius: 11px;
  display: grid; place-items: center; overflow: hidden; font-size: 20px;
  background: var(--bg-3); border: 1px solid var(--line);
}
.loja-ficha .corpo { flex: 1; min-width: 0; }
.loja-ficha .nome { font-size: 14.5px; font-weight: 640; letter-spacing: -0.01em; }

.loja-ficha .meta,
.loja-ficha .datas {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  font-size: 12.5px; color: var(--tx-2); margin-top: 5px;
}
.loja-ficha .datas { gap: 16px; font-size: 12px; color: var(--tx-3); margin-top: 7px; }
.loja-ficha .datas svg { width: 13px; height: 13px; }
.loja-ficha .ponto { color: var(--tx-3); }

.loja-ficha .marca-atual {
  flex: none; width: 26px; height: 26px; border-radius: 99px;
  display: grid; place-items: center;
  background: var(--ac); color: var(--ac-tx);
}
.loja-ficha .marca-atual svg { width: 15px; height: 15px; }

@media (max-width: 720px) {
  .loja-ficha { align-items: flex-start; }
  .loja-ficha .datas { gap: 8px; }
}

/* --------------------------- linha de categoria ------------------------ */
/* Linhas encostadas dentro de um `.panel flush`, separadas só por um traço —
   é o que a referência usa no lugar de tabela com cabeçalho. */
.cat-linha {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--t);
}
.cat-linha:last-child { border-bottom: 0; }
.cat-linha:hover { background: var(--bg-2); }

/* Alça de arrastar: seis pontos, a convenção de "pegue aqui". */
.cat-linha .pegar {
  flex: none; width: 22px; height: 30px;
  display: grid; place-items: center;
  color: var(--tx-3); cursor: grab;
  transition: color var(--t);
}
.cat-linha .pegar:active { cursor: grabbing; }
.cat-linha:hover .pegar { color: var(--tx-1); }
.cat-linha .pegar svg { width: 17px; height: 17px; }
/* Travada por busca/filtro: some o cursor de arrasto para não prometer algo
   que não vai funcionar. */
.cat-linha .pegar[data-travado] { cursor: default; opacity: 0.35; }

/* Miniatura: imagem da categoria, ou o quadro vazio com ícone quando não há.
   Sem emoji — a categoria se identifica pela arte que o lojista subir. */
.cat-linha .capa {
  width: 56px; height: 40px; flex: none; border-radius: 9px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--bg-3); border: 1px solid var(--line);
  color: var(--tx-3);
}
.cat-linha .capa img { width: 100%; height: 100%; object-fit: cover; }
.cat-linha .capa svg { width: 19px; height: 19px; }

.cat-linha .corpo { flex: 1; min-width: 0; }
.cat-linha .nome { font-size: 14px; font-weight: 640; letter-spacing: -0.01em; }
.cat-linha .meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 12px; margin-top: 4px;
  font-family: var(--ff-mono);
}
.cat-linha .rota { color: var(--tx-2); }
.cat-linha .idnum { color: var(--tx-3); }

/* Contagem de produtos: pílula fixa, não some no hover como as ações. */
.cat-linha .conta { flex: none; }

.cat-linha.arrastando { opacity: 0.45; }
.cat-linha.alvo { background: var(--ac-soft); }

.fim-lista {
  text-align: center; font-size: 12px; color: var(--tx-3);
  margin-top: 14px;
}

/* ====================== editor de produto (página) ====================== */
/* Três colunas: etapas à esquerda, formulário no meio, apoio à direita.
   As laterais grudam ao rolar porque o meio é sempre o mais longo. */
.editor-prod {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 280px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1180px) {
  .editor-prod { grid-template-columns: 210px minmax(0, 1fr); }
  .editor-prod .lado { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 780px) {
  .editor-prod { grid-template-columns: 1fr; }
  .editor-prod .lado { grid-template-columns: 1fr; }
}

.etapas {
  position: sticky; top: 84px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
@media (max-width: 780px) { .etapas { position: static; } }

.etapa {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px; border-radius: var(--r-md);
  text-align: left; color: var(--tx-2);
  transition: background var(--t), color var(--t);
}
.etapa:hover { background: var(--bg-2); color: var(--tx-0); }
.etapa.on { background: var(--bg-2); color: var(--tx-0); }
.etapa .ic { flex: none; display: grid; place-items: center; color: var(--tx-3); margin-top: 1px; }
.etapa.on .ic { color: var(--ac); }
.etapa .ic svg { width: 17px; height: 17px; }
.etapa .txt { min-width: 0; }
.etapa .txt b {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 620; color: inherit;
}
.etapa .txt > span {
  display: block; font-size: 11.5px; color: var(--tx-3);
  line-height: 1.45; margin-top: 3px;
}
.selo-vivo {
  font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .06em;
  padding: 2px 5px; border-radius: 4px;
  background: var(--rd); color: #fff;
}

.editor-prod .meio { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.editor-prod .lado {
  position: sticky; top: 84px;
  display: flex; flex-direction: column; gap: 16px;
}
@media (max-width: 1180px) { .editor-prod .lado { position: static; } }

/* Bloco de formulário: cabeçalho separado do corpo por um traço, como na
   referência — o título explica a seção sem virar mais um campo. */
.bloco-form {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.bloco-form .cab { padding: 18px 20px 16px; border-bottom: 1px solid var(--line); }
.bloco-form .cab h3 { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.bloco-form .cab p { font-size: 12.5px; color: var(--tx-2); margin-top: 3px; }
.bloco-form .corpo { padding: 20px; }
.bloco-form .campo { display: block; }
.bloco-form .rot {
  display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px;
}
.bloco-form .rot .obr { color: var(--rd); }
.bloco-form .rot .leve { font-weight: 400; color: var(--tx-3); }
.bloco-form .hint { display: block; font-size: 11.5px; color: var(--tx-3); margin-top: 6px; }
.bloco-form textarea.inp { height: auto; padding: 11px 13px; resize: vertical; line-height: 1.55; }

/* Cabeçalho com ação à direita (o seletor Linhas|Texto, o selo Opcional). */
.bloco-form .cab.between {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.etiqueta-op {
  flex: none; font-size: 10.5px; font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase; color: var(--tx-3);
}

/* ------------------- caixa de código (chaves da entrega) ---------------- */
/* Régua de números à esquerda + textarea transparente à direita. As duas
   compartilham fonte e altura de linha, senão a numeração desalinha. */
.cod-caixa {
  display: flex;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--bg-1); overflow: hidden;
}
.cod-caixa .linhas-num,
.cod-caixa .cod-area {
  font-family: var(--ff-mono);
  font-size: 12.5px; line-height: 1.7;
  padding: 12px 0;
}
.cod-caixa .linhas-num {
  flex: none; width: 44px;
  padding-right: 10px; text-align: right;
  color: var(--tx-3); background: var(--bg-2);
  border-right: 1px solid var(--line);
  overflow: hidden;            /* rola junto com a textarea, via JS */
  user-select: none;
}
.cod-caixa .cod-area {
  flex: 1; min-width: 0;
  height: 300px; padding-left: 14px; padding-right: 14px;
  background: none; border: 0; outline: none; resize: vertical;
  color: var(--tx-0);
  white-space: pre; overflow-wrap: normal; overflow-x: auto;
}
.cod-caixa .cod-area::placeholder { color: var(--tx-3); }

/* ------------------------------- anexo ---------------------------------- */
.alvo-anexo {
  position: relative;
  width: 100%; min-height: 150px; padding: 26px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-md);
  border: 1px dashed var(--line-strong); background: var(--bg-2);
  color: var(--tx-2); cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.alvo-anexo:hover { border-color: var(--ac); }
.alvo-anexo.cheio { border-style: solid; }
.alvo-anexo .ic { color: var(--tx-3); }
.alvo-anexo .ic svg { width: 26px; height: 26px; }
.alvo-anexo b { font-size: 13.5px; font-weight: 600; color: var(--tx-0); }
.alvo-anexo .tirar {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border-radius: 99px;
  display: grid; place-items: center;
  background: var(--bg-3); color: var(--tx-1); border: 1px solid var(--line);
}
.alvo-anexo .tirar svg { width: 13px; height: 13px; }

/* ------------------------- editor de descrição -------------------------- */
.rico { border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; }
.rico .barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 6px; background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.rico .grupo { display: flex; gap: 2px; }
/* Traço entre grupos em vez de espaço largo: agrupa sem esticar a barra. */
.rico .grupo + .grupo { margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--line); }
.rico .barra button {
  min-width: 28px; height: 28px; padding: 0 6px; border-radius: 6px;
  font-size: 13px; font-weight: 600; color: var(--tx-2);
  transition: background var(--t), color var(--t);
}
.rico .barra button:hover { background: var(--bg-3); color: var(--tx-0); }
.rico .area {
  min-height: 200px; padding: 14px;
  font-size: 13.5px; line-height: 1.6; color: var(--tx-0);
  outline: none; overflow-wrap: anywhere;
}
/* Marca d'água só quando está vazio de verdade — `:empty` não pega o <br>
   que o navegador insere sozinho, por isso o seletor extra. */
.rico .area:empty::before,
.rico .area:has(> br:only-child)::before {
  content: attr(data-vazio); color: var(--tx-3);
}
.rico .area img { max-width: 100%; border-radius: 8px; margin: 8px 0; }
.rico .area a { color: var(--ac); text-decoration: underline; }
.rico .area ul, .rico .area ol { padding-left: 22px; margin: 8px 0; }
.rico .area ul { list-style: disc; }
.rico .area ol { list-style: decimal; }

/* ------------------------------ galeria --------------------------------- */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.galeria .foto {
  position: relative; aspect-ratio: 1; border-radius: var(--r-md);
  overflow: hidden; background: var(--bg-2); border: 1px solid var(--line);
}
.galeria .foto img { width: 100%; height: 100%; object-fit: cover; }
.galeria .foto .tirar {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 99px;
  display: grid; place-items: center;
  background: rgba(10, 10, 12, 0.7); color: #fff;
}
.galeria .foto .tirar svg { width: 12px; height: 12px; }
.galeria .foto.add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border-style: dashed; border-color: var(--line-strong);
  color: var(--tx-3); font-size: 11.5px; cursor: pointer;
  transition: border-color var(--t), color var(--t);
}
.galeria .foto.add:hover { border-color: var(--ac); color: var(--tx-1); }
.galeria .foto.add svg { width: 20px; height: 20px; }

/* Campo com ícone à esquerda (vídeo do YouTube). */
.inp-icone { position: relative; }
.inp-icone > svg {
  position: absolute; left: 13px; top: 50%; translate: 0 -50%;
  width: 17px; height: 17px; color: var(--tx-3); pointer-events: none;
}
.inp-icone .inp { padding-left: 40px; }

/* ------------------------- sequência das seções ------------------------- */
.linha-seq {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-md);
  background: var(--bg-2); border: 1px solid var(--line);
  cursor: grab;
  transition: border-color var(--t), opacity var(--t);
}
.linha-seq:active { cursor: grabbing; }
.linha-seq:hover { border-color: var(--line-strong); }
.linha-seq.arrastando { opacity: 0.45; }
.linha-seq .pegar { flex: none; display: grid; place-items: center; color: var(--tx-3); }
.linha-seq .pegar svg { width: 16px; height: 16px; }
.linha-seq b { font-size: 13.5px; font-weight: 600; }

/* --------------------------- opção de entrega --------------------------- */
.opcao {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border-radius: var(--r-md);
  background: var(--bg-2); border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.opcao:hover { border-color: var(--line-strong); }
.opcao.on { border-color: var(--ac); background: var(--ac-soft); }
.opcao .marca {
  flex: none; width: 20px; height: 20px; border-radius: 99px; margin-top: 1px;
  display: grid; place-items: center;
  border: 1.5px solid var(--line-strong);
}
.opcao.on .marca { background: var(--ac); border-color: var(--ac); color: var(--ac-tx); }
.opcao .marca svg { width: 12px; height: 12px; }
.opcao b { display: block; font-size: 13.5px; font-weight: 620; }
.opcao .d { display: block; font-size: 12.5px; color: var(--tx-2); margin-top: 3px; }

/* ===================== escolha do tipo de produto ======================= */
.tipos-produto { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .tipos-produto { grid-template-columns: 1fr; } }

.tipo-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 30px 22px; text-align: center;
  border-radius: var(--r-lg);
  background: var(--bg-2); border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.tipo-card:hover {
  border-color: var(--ac); background: var(--ac-soft);
  transform: translateY(-2px);
}
.tipo-card:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.tipo-card svg { width: 34px; height: 34px; color: var(--tx-1); }
.tipo-card:hover svg { color: var(--ac); }
.tipo-card b { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.tipo-card p { font-size: 12.5px; color: var(--tx-2); line-height: 1.55; }

/* ----------------------------- variantes -------------------------------- */
/* Nome ocupa o espaço livre; preço e estoque têm largura fixa para as
   colunas se alinharem entre as linhas. */
.linha-var {
  display: flex; align-items: center; gap: 8px;
  padding: 10px; border-radius: var(--r-md);
  background: var(--bg-2); border: 1px solid var(--line);
}
.linha-var > .inp:first-child { flex: 1; min-width: 0; }
@media (max-width: 620px) {
  .linha-var { flex-wrap: wrap; }
  .linha-var > .inp:first-child { flex: 1 0 100%; }
}

/* ==================== produtos agrupados por categoria ================== */
.grupo-cat {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  margin-bottom: 14px;
}

.cab-grupo {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  transition: background var(--t);
}
.cab-grupo:hover { background: var(--bg-2); }
.cab-grupo .nome {
  font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.cab-grupo .virar {
  flex: none; display: grid; place-items: center;
  color: var(--tx-3);
}
.cab-grupo .virar svg { width: 17px; height: 17px; transition: transform var(--t); }
/* Seta apontando para o lado quando o grupo está fechado. */
.grupo-cat.fechado .virar svg { transform: rotate(-90deg); }
.grupo-cat.fechado .itens { display: none; }

.grupo-cat .itens { border-top: 1px solid var(--line); }

/* ------------------------------ linha de produto ------------------------ */
.prod-linha {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--t);
}
.prod-linha:last-child { border-bottom: 0; }
.prod-linha:hover { background: var(--bg-2); }
.prod-linha.marcado { background: var(--ac-soft); }
.prod-linha.arrastando { opacity: .45; }

.prod-linha .pegar {
  flex: none; width: 20px; height: 28px;
  display: grid; place-items: center;
  color: var(--tx-3); cursor: grab;
}
.prod-linha .pegar:active { cursor: grabbing; }
.prod-linha .pegar svg { width: 16px; height: 16px; }

/* A caixa de seleção só aparece no hover ou marcada — a lista fica limpa
   até o momento em que você realmente quer selecionar. */
.prod-linha .caixa-sel.plana { opacity: 0; }
.prod-linha:hover .caixa-sel.plana,
.prod-linha .caixa-sel.plana.on { opacity: 1; }
@media (hover: none) { .prod-linha .caixa-sel.plana { opacity: 1; } }

.prod-linha .capa {
  width: 62px; height: 44px; flex: none; border-radius: 8px;
  display: grid; place-items: center; overflow: hidden;
  font-size: 20px; border: 1px solid var(--line);
}
.prod-linha .capa img { width: 100%; height: 100%; object-fit: cover; }

.prod-linha .corpo { flex: 1; min-width: 0; }
.prod-linha .nome { font-size: 14px; font-weight: 640; letter-spacing: -.01em; }
.prod-linha .meta {
  display: flex; align-items: center; gap: 12px; margin-top: 3px;
}
.prod-linha .preco { font-size: 13px; font-weight: 650; color: var(--ac); }
.prod-linha .idnum { font-family: var(--ff-mono); font-size: 11.5px; color: var(--tx-3); }

.sel-estoque { flex: none; }

@media (max-width: 620px) {
  .prod-linha { flex-wrap: wrap; }
  .prod-linha .corpo { flex: 1 0 55%; }
}

/* ----------------------- caixa de seleção (massa) ----------------------- */
/* Sobre a capa do produto, então precisa de fundo próprio para ser legível
   em cima de qualquer cor de cartão. */
.caixa-sel {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  background: rgba(10, 10, 12, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  color: var(--ac-tx);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background var(--t), border-color var(--t), opacity var(--t);
  opacity: 0;
}
.caixa-sel svg { width: 13px; height: 13px; }
/* Aparece no hover ou quando já marcada — senão a grade vira um tabuleiro
   de caixas competindo com a arte dos produtos. */
.prod-card:hover .caixa-sel,
.caixa-sel.on { opacity: 1; }
@media (hover: none) { .caixa-sel { opacity: 1; } }
.caixa-sel.on { background: var(--ac); border-color: var(--ac); }

/* Na tabela ela é uma célula normal, sempre visível e sem sobreposição. */
.caixa-sel.plana {
  position: static; opacity: 1;
  background: var(--bg-2); border-color: var(--line-strong);
  backdrop-filter: none;
}
.caixa-sel.plana.on { background: var(--ac); border-color: var(--ac); }

.prod-card.marcado { border-color: var(--ac); }
tr.marcado > td { background: var(--ac-soft); }

/* Funil aceso quando há filtro diferente de "todas". */
.btn.icon.on { color: var(--ac); border-color: var(--ac-line); background: var(--ac-soft); }


/* ===================== formulário de categoria (modal) ================== */
.form-cat { display: flex; flex-direction: column; gap: 20px; }
.form-cat .campo { display: block; }
.form-cat .rot {
  display: block; font-size: 13.5px; font-weight: 620;
  margin-bottom: 8px; color: var(--tx-0);
}
.form-cat .rot .obr { color: var(--rd); }
/* O "(opcional — vincula como subcategoria)" é apoio, não parte do rótulo:
   peso e cor menores para não competir com o nome do campo. */
.form-cat .rot .leve { font-weight: 400; color: var(--tx-3); }
.form-cat .inp { height: 44px; }
.form-cat textarea.inp { height: auto; min-height: 84px; padding: 11px 13px; resize: vertical; }
.form-cat .hint { display: block; font-size: 12px; color: var(--tx-3); margin-top: 6px; }

/* Linha com interruptor: texto à esquerda, chave à direita. */
.linha-sw { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.linha-sw b { font-size: 13.5px; font-weight: 620; }
.linha-sw p { font-size: 12.5px; color: var(--tx-2); margin-top: 3px; line-height: 1.45; max-width: 46ch; }
.linha-sw .switch { flex: none; margin-top: 2px; }

/* ------------------------------- imagens -------------------------------- */
.grid-img { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .grid-img { grid-template-columns: 1fr; } }

.campo-img .rot { display: block; font-size: 13.5px; font-weight: 620; margin-bottom: 8px; }
.alvo-img {
  position: relative; overflow: hidden;
  width: 100%; height: 104px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--r-md);
  border: 1px dashed var(--line-strong);
  background: var(--bg-2);
  color: var(--tx-3); font-size: 12px;
  cursor: pointer;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.alvo-img:hover { border-color: var(--ac); color: var(--tx-1); }
.alvo-img svg { width: 22px; height: 22px; }
.alvo-img.cheio { border-style: solid; padding: 0; }
.alvo-img img { width: 100%; height: 100%; object-fit: cover; }
.alvo-img .tirar {
  position: absolute; top: 7px; right: 7px;
  width: 24px; height: 24px; border-radius: 99px;
  display: grid; place-items: center;
  background: rgba(10, 10, 12, 0.72); color: #fff;
  backdrop-filter: blur(4px);
}
.alvo-img .tirar svg { width: 13px; height: 13px; }

/* ---------------------------- opções avançadas -------------------------- */
.avancado { border-top: 1px solid var(--line); padding-top: 16px; }
.avancado summary {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--tx-1);
  cursor: pointer; list-style: none;
}
.avancado summary::-webkit-details-marker { display: none; }
.avancado summary:hover { color: var(--tx-0); }
.avancado summary svg { width: 15px; height: 15px; transition: transform var(--t); }
.avancado[open] summary svg { transform: rotate(180deg); }
.avancado .dentro { display: flex; flex-direction: column; gap: 18px; padding-top: 18px; }

.icoBtn {
  width: 40px; height: 40px; border-radius: 11px; font-size: 19px;
  background: var(--bg-2); border: 2px solid var(--line);
  transition: border-color var(--t);
}
.icoBtn.on { border-color: var(--ac); }

.resumo-cat {
  padding: 11px 13px; border-radius: var(--r-md);
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--tx-2);
}

/* ---------------- linha de configuração (o tijolo repetido) ------------- */
.conta-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 0; border-bottom: 1px solid var(--line);
}
.conta-linha:last-child { border-bottom: 0; }
.conta-linha .txt { min-width: 0; }
.conta-linha .txt b { font-size: 13.5px; font-weight: 640; }
.conta-linha .valor { font-size: 13.5px; color: var(--tx-1); margin-top: 3px; }
.conta-linha .apoio { font-size: 12px; color: var(--tx-3); margin-top: 3px; }
.conta-linha .acao { flex: none; }
.conta-linha .ic-linha { color: var(--tx-3); display: grid; place-items: center; }
.conta-linha .ic-linha svg { width: 15px; height: 15px; }

.rotulo-secao {
  padding: 18px 0 4px; font-size: 13px; font-weight: 640; color: var(--tx-0);
  border-top: 1px solid var(--line);
}

/* -------------------------- cartão do perfil --------------------------- */
.g-12 { display: grid; grid-template-columns: 300px 1fr; gap: 16px; }
@media (max-width: 900px) { .g-12 { grid-template-columns: 1fr; } }

.cartao-perfil {
  display: flex; flex-direction: column; align-items: center;
  padding: 30px 22px; text-align: center;
}
.cartao-perfil .nome { font-size: 16px; font-weight: 650; margin-top: 16px; }
.cartao-perfil .email { font-size: 13px; color: var(--tx-2); margin-top: 3px; }
.cartao-perfil .divider { width: 100%; }
.cartao-perfil .tiny { display: block; line-height: 1.7; }

.avatar-grande {
  position: relative;
  width: 96px; height: 96px; border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  font-size: 38px; font-weight: 700; letter-spacing: -0.03em;
  background: var(--ac); color: var(--ac-tx);
}
.avatar-grande .selo-ok {
  position: absolute; right: -4px; bottom: -4px;
  width: 26px; height: 26px; border-radius: 99px;
  display: grid; place-items: center;
  background: var(--ac); color: var(--ac-tx);
  border: 3px solid var(--panel);
}
.avatar-grande .selo-ok svg { width: 13px; height: 13px; }
.avatar-grande img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* O selo precisa escapar do recorte redondo do avatar. */
.avatar-caixa { position: relative; width: 96px; height: 96px; flex: none; }
.avatar-caixa .selo-ok {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  width: 26px; height: 26px; border-radius: 99px;
  display: grid; place-items: center;
  background: var(--ac); color: var(--ac-tx); border: 3px solid var(--panel);
}
.avatar-caixa .selo-ok svg { width: 13px; height: 13px; }

/* Aviso de conta não verificada. Fundo próprio porque ele precisa saltar
   da lista de linhas — é uma pendência, não mais um campo. */
.aviso-verificar {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  margin: 18px 0 0; padding: 22px;
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, color-mix(in srgb, var(--ac) 12%, transparent), transparent 62%), var(--bg-2);
  border: 1px solid var(--ac-line);
}
.aviso-verificar .corpo { flex: 1; min-width: 0; }
.aviso-verificar .ic { color: var(--ac); display: grid; place-items: center; }
.aviso-verificar .ic svg { width: 19px; height: 19px; }
.aviso-verificar .etiqueta {
  font-size: 11px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ac);
}
.aviso-verificar .mascote { flex: none; color: var(--ac); opacity: 0.18; }
.aviso-verificar .mascote svg { width: 96px; height: 96px; }
@media (max-width: 720px) { .aviso-verificar .mascote { display: none; } }

/* --------------------------- dispositivos ------------------------------ */
.disp-ficha {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border-radius: var(--r-lg);
  background: var(--bg-2); border: 1px solid var(--line);
}
.disp-ficha > .ic {
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--bg-3); color: var(--tx-2); border: 1px solid var(--line);
}
.disp-ficha .corpo { flex: 1; min-width: 0; }
.disp-ficha .nome { font-size: 13.5px; font-weight: 640; }
.disp-ficha .local { font-size: 12.5px; color: var(--tx-2); margin-top: 4px; }
.disp-ficha .datas {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 11.5px; color: var(--tx-3); margin-top: 6px;
}
.disp-ficha .ponto { color: var(--tx-3); }

/* ------------------------------ taxas ---------------------------------- */
.canais {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  padding: 5px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line);
}
.canais button {
  padding: 10px; border-radius: 9px;
  font-size: 13.5px; font-weight: 560; color: var(--tx-3);
  transition: background var(--t), color var(--t);
}
.canais button:hover { color: var(--tx-1); }
.canais button.on { background: var(--panel); color: var(--tx-0); box-shadow: var(--sh-1); }

.linha-taxa {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.linha-taxa .quem b { font-size: 13.5px; font-weight: 640; }
.linha-taxa .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-taxa {
  display: flex; align-items: center; gap: 14px;
  min-width: 150px; padding: 9px 13px;
  border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: 12.5px;
}
.chip-taxa .n { color: var(--tx-3); flex: 1; }
.chip-taxa b { font-variant-numeric: tabular-nums; }

/* Builder: uma taxa só, então ela ocupa o bloco inteiro em vez de virar
   mais um chip perdido numa fileira. */
.cartao-taxa {
  padding: 20px; border-radius: var(--r-lg);
  background: var(--bg-2); border: 1px solid var(--line);
}
.cartao-taxa .rot { font-size: 12.5px; color: var(--tx-2); }
.cartao-taxa .valor {
  font-size: 30px; font-weight: 700; letter-spacing: -0.035em;
  margin: 6px 0 4px;
}

/* Cartão: faixa de condições no topo, tabela de parcelas embaixo. */
.faixa-cartao {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px; border-radius: var(--r-lg);
  background: var(--bg-2); border: 1px solid var(--line);
}
.faixa-cartao > .ic {
  width: 36px; height: 36px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--bg-3); color: var(--tx-2); border: 1px solid var(--line);
}
.faixa-cartao .ic svg { width: 17px; height: 17px; }
.faixa-cartao .chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }

/* `grid-auto-flow: column` com 4 linhas fixas: os itens descem a coluna
   antes de pular para a próxima, então 1×–4× ficam juntos na primeira. */
.grade-parcelas {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--line);
}
.parcela {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; background: var(--bg-1);
  font-size: 13px;
}
.parcela .n { color: var(--tx-2); }
.parcela b { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
/* Zebra por LINHA: com fluxo em coluna, 4n+2 e 4n+4 são a 2ª e a 4ª linha. */
.parcela:nth-child(4n + 2),
.parcela:nth-child(4n + 4) { background: var(--bg-2); }

@media (max-width: 720px) {
  .grade-parcelas { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
  .parcela:nth-child(4n + 2), .parcela:nth-child(4n + 4) { background: var(--bg-1); }
  .parcela:nth-child(4n + 3), .parcela:nth-child(4n + 4) { background: var(--bg-2); }
}

/* --------------------------- notificações ------------------------------ */
.bloco-notif {
  padding: 18px; border-radius: var(--r-lg);
  background: var(--bg-2); border: 1px solid var(--line);
}
.bloco-notif svg { width: 17px; height: 17px; }

/* ----------------------- segmentado (tema/idioma) ---------------------- */
.seg {
  display: flex; gap: 3px; padding: 4px;
  border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line);
}
.seg button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 7px;
  font-size: 12.5px; font-weight: 560; color: var(--tx-3);
  transition: background var(--t), color var(--t);
}
.seg button svg { width: 14px; height: 14px; }
.seg button.on { background: var(--panel); color: var(--tx-0); box-shadow: var(--sh-1); }

/* ============================ EDITOR DE CÓDIGO =========================== */
.ide {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-columns: 48px 262px 1fr; grid-template-rows: 44px 1fr;
  grid-template-areas: "topo topo topo" "rail painel main";
  background: #0b0b0d; color: #d6d6d8;
  font-family: var(--ff);
  animation: ideEntra .18s ease;
}
@keyframes ideEntra { from { opacity: 0; transform: scale(.995); } }

.ide-topo {
  grid-area: topo; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; background: #0e0e11; border-bottom: 1px solid #1e1e22;
}
.ide-topo .nome { font-size: 13px; font-weight: 600; color: #ededee; }
.ide-topo .sujo { width: 7px; height: 7px; border-radius: 99px; background: var(--am); display: none; flex: none; }
.ide-topo .sujo.on { display: block; }
.ide-topo .btn { background: #17171b; border-color: #26262c; color: #d6d6d8; }
.ide-topo .btn:hover:not(:disabled) { background: #1f1f25; border-color: #33333b; }
.ide-topo .btn.pri { background: var(--ac); border-color: var(--ac); color: var(--ac-tx); }
.ide-topo .btn.pri:hover:not(:disabled) { filter: brightness(1.06); }
.ide-topo .btn:disabled { opacity: .45; cursor: default; }
.ide-topo .tiny { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ide-rail {
  grid-area: rail; background: #0e0e11; border-right: 1px solid #1e1e22;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0;
}
.ide-rail button {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  color: #6f6f78; transition: color var(--t), background var(--t);
}
.ide-rail button svg { width: 18px; height: 18px; }
.ide-rail button:hover { color: #d6d6d8; }
.ide-rail button.on { color: var(--ac); background: rgba(255, 255, 255, .06); }
.ide-rail .espaco { flex: 1; }

.ide-painel {
  grid-area: painel; background: #0d0d10; border-right: 1px solid #1e1e22;
  display: flex; flex-direction: column; min-height: 0;
}
.ide-painel .cab {
  padding: 14px 14px 10px; font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: #6f6f78; font-weight: 620;
}
.ide-painel .cab b { color: #d6d6d8; text-transform: none; letter-spacing: 0; font-size: 12px; }
.ide-painel .busca { padding: 0 12px 12px; }
.ide-painel .busca input {
  width: 100%; height: 34px; padding: 0 10px 0 32px;
  background: #141418; border: 1px solid #24242a; border-radius: 9px;
  color: #d6d6d8; font-size: 12.5px; font-family: inherit;
}
.ide-painel .busca { position: relative; }
.ide-painel .busca svg { position: absolute; left: 22px; top: 9px; width: 15px; height: 15px; color: #6f6f78; }
.ide-arvore { flex: 1; overflow-y: auto; padding: 0 8px 14px; }
.ide-arvore .vazio { padding: 10px 6px; font-size: 12.5px; color: #6f6f78; }

.ide-item {
  width: 100%; display: flex; align-items: center; gap: 7px;
  padding: 5px 8px; border-radius: 7px; font-size: 12.5px; color: #b8b8bd;
  text-align: left; transition: background var(--t), color var(--t);
}
.ide-item:hover { background: #17171b; color: #ededee; }
.ide-item.on { background: rgba(255, 255, 255, .07); color: #fff; }
.ide-item svg { width: 14px; height: 14px; flex: none; color: #6f6f78; }
.ide-item .ext { margin-left: auto; font-size: 9.5px; color: #55555e; }
.ide-item .ponto {
  margin-left: auto; width: 6px; height: 6px; flex: none;
  border-radius: 99px; background: var(--am);
}

/* pastas recolhíveis */
.ide-item.pasta { font-weight: 560; color: #d6d6d8; margin-top: 2px; }
.ide-item.pasta svg:first-of-type { color: #8a8a93; }
.ide-item.pasta .caret {
  margin-left: auto; width: 15px; height: 15px;
  transition: transform var(--t); transform: rotate(0deg);   /* fechada: aponta ↓ */
}
.ide-item.pasta.aberta .caret { transform: rotate(180deg); } /* aberta: aponta ↑ */
.ide-item.pasta .ponto + .caret { margin-left: 6px; }

/* ícones de tecnologia na árvore (HTML5, CSS3, JS) */
.ide-item .ico-arq { width: 14px; height: 14px; flex: none; }
.ide-item .cadeado { width: 12px; height: 12px; margin-left: auto; color: #55555e; }
.ide-item.travado span.trunc { color: #8a8a93; }

.ide-travado {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px; padding: 7px 14px;
  background: #17171b; border-bottom: 1px solid #26262c;
  font-size: 11.5px; color: #8a8a93;
}
.ide-travado svg { width: 13px; height: 13px; }
.ide-travado + .ide-linhas, .ide-travado ~ .ide-area { padding-top: 44px; }

.ide-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.ide-abas { display: flex; background: #0e0e11; border-bottom: 1px solid #1e1e22; overflow-x: auto; }
.ide-abas .aba {
  display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 36px;
  font-size: 12.5px; color: #8a8a93; white-space: nowrap;
  border-right: 1px solid #1e1e22; transition: color var(--t), background var(--t);
}
.ide-abas .aba:hover { color: #ededee; }
.ide-abas .aba.on { background: #0b0b0d; color: #fff; box-shadow: inset 0 2px 0 var(--ac); }
.ide-abas .aba i.ponto { width: 6px; height: 6px; border-radius: 99px; background: var(--am); display: none; }
.ide-abas .aba.sujo i.ponto { display: block; }
.ide-abas .aba .x { color: #55555e; display: flex; }
.ide-abas .aba .x:hover { color: var(--rd); }

.ide-corpo { flex: 1; display: flex; min-height: 0; }
.ide-editor { flex: 1; position: relative; min-width: 0; display: flex; overflow: hidden; }

.ide-linhas {
  padding: 14px 8px 14px 14px; text-align: right;
  font: 12.5px/1.65 var(--ff-mono); color: #45454e;
  background: #0b0b0d; user-select: none; overflow: hidden; flex: none;
  white-space: pre;   /* os números vêm separados por \n */
}
.ide-area { position: relative; flex: 1; min-width: 0; overflow: auto; }
.ide-area pre, .ide-area textarea {
  margin: 0; padding: 14px 16px;
  font: 12.5px/1.65 var(--ff-mono);
  white-space: pre; tab-size: 2; border: 0;
  min-width: 100%; width: max-content;
}
.ide-area pre { color: #d6d6d8; pointer-events: none; }
.ide-area textarea {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: transparent; color: transparent; caret-color: var(--ac);
  resize: none; outline: none; overflow: hidden;
}
.ide-area textarea::selection { background: rgba(33, 208, 122, .26); }

/* realce de sintaxe */
.ide-area .t-com { color: #5c6370; font-style: italic; }
.ide-area .t-tag { color: #e06c75; }
.ide-area .t-atr { color: #d19a66; }
.ide-area .t-str { color: #98c379; }
.ide-area .t-sel { color: #e5c07b; }
.ide-area .t-prop { color: #61afef; }
.ide-area .t-var { color: #c678dd; }
.ide-area .t-pal { color: #c678dd; }
.ide-area .t-num { color: #d19a66; }

/* prévia em tela cheia, aberta pelo botão "Ver prévia" */
.ide-prev-full {
  position: absolute; inset: 44px 0 0 0; z-index: 5;
  display: flex; flex-direction: column; background: #0b0b0d;
  animation: ideEntra .16s ease;
}
.ide-prev-full .barra {
  height: 42px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: #0e0e11; border-bottom: 1px solid #1e1e22; font-size: 12.5px; color: #b8b8bd;
}
.ide-prev-full .barra svg { width: 15px; height: 15px; }
.ide-prev-full iframe { flex: 1; width: 100%; border: 0; background: #fff; }

/* terminal */
.ide-term {
  height: 190px; border-top: 1px solid #1e1e22; background: #0d0d10;
  display: flex; flex-direction: column; flex: none;
}
.ide-term .barra {
  height: 32px; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  border-bottom: 1px solid #1e1e22; font-size: 11px; color: #6f6f78;
  letter-spacing: .07em; text-transform: uppercase; font-weight: 620;
}
.ide-term .saida {
  flex: 1; overflow-y: auto; padding: 10px 14px;
  font: 12px/1.7 var(--ff-mono); color: #9a9aa2; white-space: pre-wrap;
}
.ide-term .saida .ok { color: var(--ac); }
.ide-term .saida .erro { color: var(--rd); }
.ide-term .saida .cmd { color: #ededee; }

/* estado vazio */
.ide-vazio {
  flex: 1; display: grid; place-content: center; justify-items: center; gap: 14px;
  color: #6f6f78; text-align: center; padding: 40px;
}
.ide-vazio .logos { display: flex; gap: 14px; }
.ide-vazio .logos svg { width: 42px; height: 42px; }
.ide-vazio p { font-size: 14px; color: #8a8a93; }
.ide-vazio .dica { font-size: 12px; color: #55555e; }

@media (max-width: 900px) {
  .ide { grid-template-columns: 44px 1fr; grid-template-areas: "topo topo" "rail painel"; }
  .ide.com-arquivo { grid-template-areas: "topo topo" "rail main"; }
  .ide.com-arquivo .ide-painel { display: none; }
}

/* ------------------------------ checkout -------------------------------- */
.co { display: grid; grid-template-columns: 1fr 400px; gap: 28px; align-items: start; }
@media (max-width: 900px) { .co { grid-template-columns: 1fr; } }

.co-steps { display: flex; align-items: center; gap: 8px; }
.co-step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tx-3); }
.co-step .n {
  width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center;
  font-size: 11px; font-weight: 680; background: var(--bg-3); color: var(--tx-2);
  border: 1px solid var(--line);
}
.co-step.on { color: var(--tx-0); font-weight: 600; }
.co-step.on .n { background: var(--ac); color: var(--ac-tx); border-color: var(--ac); }
.co-step.done .n { background: var(--ac-soft); color: var(--ac); border-color: var(--ac-line); }

.pay-opt {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-2); cursor: pointer; transition: all var(--t);
}
.pay-opt:hover { border-color: var(--line-strong); }
.pay-opt.on { border-color: var(--ac); background: var(--ac-soft); }
.pay-opt .radio {
  width: 18px; height: 18px; flex: none; border-radius: 99px;
  border: 2px solid var(--line-strong); display: grid; place-items: center;
}
.pay-opt.on .radio { border-color: var(--ac); }
.pay-opt.on .radio::after { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--ac); }

.bump {
  border: 1.5px dashed var(--am); border-radius: var(--r-md);
  background: var(--am-soft); padding: 14px; cursor: pointer; transition: all var(--t);
}
.bump.on { border-style: solid; background: rgba(251,191,36,.18); }

.qr {
  width: 190px; height: 190px; border-radius: 14px; padding: 10px;
  background: #fff; display: grid; place-items: center; margin: 0 auto;
}

/* --------------------------- área de membros ----------------------------- */
.mb { display: grid; grid-template-columns: 300px 1fr; gap: 0; min-height: 100vh; }
@media (max-width: 900px) { .mb { grid-template-columns: 1fr; } }

.mb-side { border-right: 1px solid var(--line); background: var(--bg-1); padding: 20px; height: 100vh; overflow-y: auto; position: sticky; top: 0; }
.mb-mod { border-bottom: 1px solid var(--line); padding: 12px 0; }
.mb-les {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 9px; font-size: 13px; color: var(--tx-1); cursor: pointer; transition: all var(--t);
}
.mb-les:hover { background: var(--bg-2); }
.mb-les.on { background: var(--ac-soft); color: var(--ac); font-weight: 580; }
.mb-les.lock { color: var(--tx-3); cursor: not-allowed; }
.mb-les .st {
  width: 19px; height: 19px; flex: none; border-radius: 99px;
  border: 1.5px solid var(--line-strong); display: grid; place-items: center;
}
.mb-les.done .st { background: var(--ac); border-color: var(--ac); color: var(--ac-tx); }
.mb-les .st svg { width: 11px; height: 11px; }

.player {
  aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--line); display: grid; place-items: center; position: relative;
}
.player .play {
  width: 66px; height: 66px; border-radius: 99px; display: grid; place-items: center;
  background: var(--ac); color: var(--ac-tx);
  transition: transform var(--t);
}
.player:hover .play { transform: scale(1.07); }

/* ------------------------------ auth / login ----------------------------- */
/* =========================== ENTRADA / CADASTRO ========================= */
.auth { min-height: 100vh; display: grid; grid-template-columns: 40% 60%; }
@media (max-width: 980px) { .auth { grid-template-columns: 1fr; } .auth-art { display: none; } }

/* ---- painel promocional (esquerda) ---- */
.auth-art {
  position: relative; overflow: hidden; padding: 40px;
  display: flex; flex-direction: column;
  background: linear-gradient(155deg, #0b2a6b 0%, #08163a 48%, #050b1e 100%);
  color: #fff;
}
.auth-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 20% 10%, rgba(47, 107, 255, .35), transparent 62%);
}
.auth-art > * { position: relative; z-index: 1; }

/* barrinhas de progresso do carrossel */
.auth-passos { display: flex; gap: 10px; margin: 0 auto 44px; }
.auth-passos i {
  display: block; width: 76px; height: 3px; border-radius: 99px;
  background: rgba(255, 255, 255, .22); overflow: hidden;
}
.auth-passos i.on { background: rgba(255, 255, 255, .28); }
.auth-passos i.on::after {
  content: ""; display: block; height: 100%; width: 100%;
  background: #fff; transform-origin: left;
  animation: passo 6s linear forwards;
}
@keyframes passo { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.auth-passos i.feito { background: #fff; }

.auth-art h2 {
  font-size: clamp(34px, 4.4vw, 54px); line-height: 1.04;
  letter-spacing: -.04em; font-weight: 700; max-width: 12ch;
}
.auth-art h2 em { font-style: normal; color: #4d9bff; }
.auth-art h2 .caixa {
  display: inline-block; padding: 0 10px;
  border: 2px solid rgba(255, 255, 255, .55); border-radius: 6px;
}
.auth-art .arte { flex: 1; display: grid; place-items: center; min-height: 0; padding: 24px 0; }
.auth-art .arte svg { width: min(100%, 420px); height: auto; }
.auth-art .marca-rodape { font-size: 13.5px; color: rgba(255, 255, 255, .62); }

/* ---- painel do formulário (direita) ---- */
.auth-form {
  display: grid; place-items: center; padding: 40px 24px;
  background: var(--bg-0);
  background-image:
    linear-gradient(color-mix(in srgb, var(--tx-0) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--tx-0) 3%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
}
.auth-caixa { width: min(400px, 100%); }
.auth-caixa .topo { text-align: center; margin-bottom: 26px; }
.auth-caixa .topo h1 { font-size: 25px; letter-spacing: -.025em; margin-top: 22px; }
.auth-caixa .topo p { font-size: 14px; color: var(--tx-2); margin-top: 6px; }

.auth-cartao {
  padding: 24px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  border: 1px solid var(--line); box-shadow: var(--sh-2);
  backdrop-filter: blur(8px);
}
.auth-cartao .field label { font-size: 13px; margin-bottom: 7px; }

/* campo com ícone à esquerda */
.auth-campo { position: relative; }
.auth-campo > svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--tx-3); pointer-events: none;
}
.auth-campo .inp { height: 46px; padding-left: 40px; }
.auth-campo .olho {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
  color: var(--tx-3); background: none; border: 0; cursor: pointer;
}
.auth-campo .olho:hover { color: var(--tx-0); background: var(--bg-2); }

/* verificação de segurança */
.auth-check {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border-radius: 11px;
  background: var(--bg-2); border: 1px solid var(--line);
}
.auth-check .caixinha {
  width: 24px; height: 24px; flex: none; border-radius: 6px;
  border: 2px solid var(--line-strong); cursor: pointer;
  display: grid; place-items: center; transition: all var(--t);
}
.auth-check.verificando .caixinha,
.auth-check.ok .caixinha { border-color: var(--ac); background: var(--ac); }
.auth-check .caixinha .giro {
  width: 14px; height: 14px; border-radius: 99px; display: none;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: girando .7s linear infinite;
}
.auth-check.verificando .caixinha .giro { display: block; }
.auth-check.verificando .caixinha { background: none; border-color: var(--line-strong); }
@keyframes girando { to { transform: rotate(360deg); } }
.auth-check .caixinha svg { width: 15px; height: 15px; color: var(--ac-tx); display: none; }
.auth-check.ok .caixinha svg { display: block; }
.auth-check .txt { flex: 1; font-size: 13.5px; font-weight: 560; }
.auth-check.ok .txt { color: var(--ac); }
.auth-check .selo { text-align: right; font-size: 9.5px; color: var(--tx-3); line-height: 1.5; }
.auth-check .selo b { display: block; font-size: 11px; color: var(--tx-2); font-weight: 620; }

/* social */
.auth-ou {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 16px; font-size: 12px; color: var(--tx-3);
}
.auth-ou::before, .auth-ou::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.auth-social { display: flex; justify-content: center; gap: 14px; }
.auth-social button {
  width: 46px; height: 46px; border-radius: 99px;
  display: grid; place-items: center; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line);
  transition: transform var(--t), border-color var(--t);
}
.auth-social button:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.auth-social svg { width: 21px; height: 21px; }

.auth-rodape { text-align: center; margin-top: 22px; font-size: 13.5px; color: var(--tx-2); }
.auth-rodape button { color: var(--ac); font-weight: 600; background: none; border: 0; cursor: pointer; }
.auth-rodape button:hover { text-decoration: underline; }

.auth-forca { display: flex; gap: 5px; margin-top: 8px; }
.auth-forca i { flex: 1; height: 3px; border-radius: 99px; background: var(--bg-3); transition: background var(--t); }

/* ---- trilha de etapas do cadastro ---- */
.auth-etapas {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin: 22px 0 24px;
}
.auth-etapas .no {
  width: 26px; height: 26px; flex: none; border-radius: 99px;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 620;
  background: var(--bg-2); color: var(--tx-3);
  border: 1px solid var(--line); cursor: default;
  transition: all var(--t);
}
.auth-etapas .no.feito {
  background: var(--ac-soft); color: var(--ac); border-color: var(--ac-line); cursor: pointer;
}
.auth-etapas .no.on {
  background: var(--ac); color: var(--ac-tx); border-color: var(--ac);
  box-shadow: 0 0 0 4px var(--ac-soft);
}
.auth-etapas .no svg { width: 13px; height: 13px; }
.auth-etapas .risco { width: 18px; height: 1px; background: var(--line); flex: none; }
.auth-etapas .risco.feito { background: var(--ac-line); }

@media (max-width: 420px) {
  .auth-etapas .risco { width: 8px; }
  .auth-etapas .no { width: 22px; height: 22px; font-size: 10.5px; }
}

.auth-pergunta { font-size: 14px; font-weight: 600; margin-bottom: 10px; }

/* texto de apoio abaixo do campo */
.auth-ajuda { margin-top: 9px; font-size: 12.5px; line-height: 1.5; color: var(--tx-2); }
.auth-ajuda + .auth-ajuda { margin-top: 5px; }
.auth-ajuda .ligacao {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ac); font: inherit; font-weight: 600;
}
.auth-ajuda .ligacao:hover { text-decoration: underline; }

/* prefixo @ dentro do campo */
.auth-campo .prefixo {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: var(--tx-3); pointer-events: none;
}

/* DDD + número */
.auth-tel { display: flex; gap: 10px; }
.auth-tel .ddd { width: 84px; height: 46px; text-align: center; flex: none; }

/* código de 6 dígitos */
.inp.cod {
  height: 52px; text-align: center; padding-left: 12px;
  font-family: var(--ff-mono); font-size: 22px;
  letter-spacing: .42em; text-indent: .42em;
}

/* ===================== ESCOLHA DA ÁREA (pós-cadastro) =================== */
.escolha {
  min-height: 100vh; display: grid; place-items: center; padding: 40px 24px;
  background: var(--bg-0);
  background-image:
    linear-gradient(color-mix(in srgb, var(--tx-0) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--tx-0) 3%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
}
.escolha-caixa { width: min(820px, 100%); text-align: center; }
.escolha .sobrenome {
  font-size: 11px; font-weight: 620; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tx-3);
}
.escolha h1 { font-size: 30px; letter-spacing: -.03em; margin-top: 14px; }
.escolha .apoio { margin-top: 8px; font-size: 14.5px; color: var(--tx-2); }

.escolha-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-top: 34px; text-align: left;
}
@media (max-width: 760px) { .escolha-cards { grid-template-columns: 1fr; } }

.card-area {
  position: relative; display: flex; flex-direction: column;
  padding: 22px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color var(--t), transform var(--t);
}
.card-area:not(.travado):hover {
  border-color: var(--ac); transform: translateY(-3px); cursor: pointer;
}
.card-area .topo-card { display: flex; gap: 14px; align-items: flex-start; }
.card-area .ic {
  width: 40px; height: 40px; flex: none; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--bg-3); color: var(--tx-1);
}
.card-area h3 { font-size: 16.5px; font-weight: 650; letter-spacing: -.02em; }
.card-area .desc { margin-top: 3px; font-size: 13px; color: var(--tx-2); line-height: 1.5; }

.card-area ul { list-style: none; margin: 20px 0 22px; display: flex; flex-direction: column; gap: 11px; }
.card-area li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--tx-1); }
.card-area li svg { width: 15px; height: 15px; flex: none; color: var(--tx-3); }

.card-area .acao {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 620; color: var(--ac);
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.card-area .acao svg { width: 15px; height: 15px; }

/* card bloqueado até a área ficar pronta */
.card-area.travado { opacity: .55; }
.card-area.travado .acao { color: var(--tx-3); cursor: not-allowed; }
.card-area .selo-breve {
  position: absolute; top: 16px; right: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; font-weight: 620;
  background: var(--am-soft); color: var(--am);
  border: 1px solid rgba(251, 191, 36, .28);
}
.card-area .selo-breve svg { width: 12px; height: 12px; }

.escolha .rodape-escolha { margin-top: 26px; font-size: 12.5px; color: var(--tx-3); }

/* ========================= CRIAR NOVA LOJA ============================= */
.criar-loja {
  min-height: 100vh; display: grid; place-items: center; padding: 48px 24px;
  position: relative; overflow: hidden; background: var(--bg-0);
  background-image:
    linear-gradient(color-mix(in srgb, var(--tx-0) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--tx-0) 3%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
}
/* brilho difuso à esquerda, como no material de referência */
.criar-loja::before {
  content: ""; position: absolute; left: -18%; top: 50%; transform: translateY(-50%);
  width: 46vw; height: 92vh; pointer-events: none;
  background: radial-gradient(closest-side, rgba(47, 107, 255, .3), transparent 72%);
  filter: blur(28px);
}
.criar-loja > * { position: relative; z-index: 1; }

.criar-caixa { width: min(520px, 100%); }
.criar-caixa > header { text-align: center; margin-bottom: 26px; }
.criar-caixa > header h1 { font-size: 30px; letter-spacing: -.03em; }
.criar-caixa > header p { margin-top: 8px; font-size: 14.5px; color: var(--tx-2); }

.criar-form {
  padding: 26px; border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border: 1px solid var(--line); box-shadow: var(--sh-2);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: 18px;
}
.criar-form label.rot { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.criar-form label.rot .obr { color: var(--rd); }
.criar-form .inp { height: 46px; }
.criar-form textarea.inp { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }

/* campo de subdomínio com ícone e sufixo fixo */
.campo-sub { position: relative; }
.campo-sub > svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--tx-3); pointer-events: none;
}
.campo-sub .inp { padding-left: 40px; padding-right: 116px; }
.campo-sub .sufixo {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 13.5px; color: var(--tx-3); pointer-events: none;
}

/* área de upload do logo */
.solta-logo {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; border-radius: 12px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line);
  transition: border-color var(--t), background var(--t);
}
.solta-logo:hover, .solta-logo.sobre { border-color: var(--ac); background: var(--ac-soft); }
.solta-logo .quadro {
  width: 46px; height: 46px; flex: none; border-radius: 11px; overflow: hidden;
  display: grid; place-items: center;
  background: var(--bg-3); color: var(--tx-2);
}
.solta-logo .quadro img { width: 100%; height: 100%; object-fit: cover; }
.solta-logo b { display: block; font-size: 14px; font-weight: 620; }
.solta-logo span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tx-2); }
.solta-logo .tirar {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--tx-3); display: flex;
}
/* o display da classe venceria o atributo hidden — daí a regra explícita */
.solta-logo .tirar[hidden] { display: none; }
.solta-logo .tirar:hover { color: var(--rd); }

.criar-form .btn.pri { height: 48px; font-size: 15px; }

/* aviso de campo obrigatório */
.aviso-campo {
  display: flex; align-items: center; gap: 8px;
  margin-top: 7px; font-size: 12.5px; color: var(--rd);
}
.aviso-campo svg { width: 14px; height: 14px; flex: none; }

/* Aviso de disponibilidade do subdomínio. Vive junto do campo e muda de cor
   conforme o resultado — neutro antes de digitar, verde quando livre,
   vermelho quando o endereço já é de alguém. */
.status-sub {
  display: flex; align-items: center; gap: 7px;
  margin-top: 8px; font-size: 12.5px; line-height: 1.45;
  color: var(--tx-3);
}
.status-sub svg { width: 14px; height: 14px; flex: none; }
.status-sub.bom { color: var(--ac); }
.status-sub.ruim { color: var(--rd); }
.status-sub b { font-weight: 640; }
.criar-form .inp.erro { border-color: var(--rd); }

/* voltar + próximo lado a lado */
.auth-botoes { display: flex; gap: 10px; margin-top: 18px; }
.auth-botoes .btn { height: 46px; }
.auth-botoes #voltar { flex: none; padding: 0 20px; }
.auth-botoes #voltar svg { transform: rotate(180deg); }
.auth-botoes .grow { flex: 1; }
.auth-botoes .btn:disabled { opacity: .45; cursor: default; }

.float-card {
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); padding: 16px; box-shadow: var(--sh-3);
}

/* ------------------------------ responsivo ------------------------------- */
.side-toggle { display: none; }
@media (max-width: 1024px) {
  .side {
    position: fixed; left: 0; top: 0; transform: translateX(-100%);
    box-shadow: var(--sh-3);
  }
  .side.open { transform: translateX(0); }
  .side-toggle { display: grid; }
  .page { padding: 20px 16px 60px; }
  .topbar { padding: 0 14px; }
  .cmd-trigger { min-width: 0; }
  .cmd-trigger span, .cmd-trigger .kbd { display: none; }
}
@media (max-width: 640px) {
  .kpi .val { font-size: 23px; }
  .hero { padding: 36px 22px; border-radius: 20px; }
  .store-wrap { padding: 0 16px; }
}

@media print {
  .side, .topbar, .btn { display: none !important; }
  .panel { break-inside: avoid; border-color: #ddd; }
}

/* ========================================================================
   EDITOR DE FLUXO — canvas de nós ligados, para montar a regra visualmente

   Os nós são elementos posicionados em coordenadas próprias; as ligações
   são curvas desenhadas num SVG que fica ATRÁS deles. Manter os dois em
   camadas separadas é o que permite arrastar o nó sem redesenhar tudo:
   só os caminhos que tocam aquele nó são recalculados.
   ======================================================================== */

.fluxo-tela {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background: var(--bg-0);
}

.fluxo-topo {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  background: var(--bg-1); flex: none;
}
.fluxo-topo .nome {
  font-size: 15px; font-weight: 620; background: none; border: 0;
  color: var(--tx-1); min-width: 200px; padding: 6px 8px; border-radius: 8px;
}
.fluxo-topo .nome:focus { outline: none; background: var(--bg-2); }

/* A área de trabalho recorta o conteúdo e recebe o arrasto de deslocamento */
.fluxo-area {
  position: relative; flex: 1; overflow: hidden; cursor: grab;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--tx-1) 9%, transparent) 1px, transparent 1px)
    0 0 / 22px 22px;
}
.fluxo-area.arrastando { cursor: grabbing; }

/* Tudo que se move junto no deslocamento fica neste plano */
.fluxo-plano { position: absolute; inset: 0; transform-origin: 0 0; }

.fluxo-linhas { position: absolute; inset: -4000px; pointer-events: none; overflow: visible; }
.fluxo-linhas path {
  fill: none; stroke: color-mix(in srgb, var(--tx-1) 28%, transparent);
  stroke-width: 2; pointer-events: stroke; cursor: pointer;
}
.fluxo-linhas path:hover { stroke: var(--rd); stroke-width: 3; }
.fluxo-linhas path.viva { stroke: var(--ac); stroke-dasharray: 5 4; }

.fluxo-no {
  position: absolute; width: 216px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 13px; box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  user-select: none;
}
.fluxo-no.sel { border-color: var(--ac); box-shadow: 0 0 0 2px var(--ac-soft), 0 6px 20px rgba(0,0,0,.3); }
.fluxo-no .cabeca {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; border-bottom: 1px solid var(--line);
  cursor: grab; border-radius: 12px 12px 0 0;
}
.fluxo-no .cabeca:active { cursor: grabbing; }
.fluxo-no .cabeca .ic {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
}
.fluxo-no .cabeca b { font-size: 12.5px; font-weight: 600; }
.fluxo-no .cabeca .x {
  margin-left: auto; opacity: .45; background: none; border: 0;
  color: inherit; cursor: pointer; display: grid; place-items: center;
}
.fluxo-no .cabeca .x:hover { opacity: 1; color: var(--rd); }
.fluxo-no .corpo {
  padding: 10px 11px; font-size: 12px; color: var(--tx-2);
  line-height: 1.45; cursor: pointer; min-height: 34px;
}
.fluxo-no .corpo:hover { color: var(--tx-1); }
.fluxo-no .corpo em { font-style: normal; opacity: .55; }

/* Portas: entrada à esquerda, saída à direita. A de condição tem duas. */
.fluxo-porta {
  position: absolute; width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg-1); border: 2px solid color-mix(in srgb, var(--tx-1) 40%, transparent);
  cursor: crosshair; z-index: 2;
}
.fluxo-porta:hover, .fluxo-porta.alvo { border-color: var(--ac); background: var(--ac); }
.fluxo-porta.entrada { left: -7px; top: 18px; }
.fluxo-porta.saida   { right: -7px; top: 18px; }
.fluxo-porta.sim     { right: -7px; bottom: 26px; top: auto; border-color: var(--ac); }
.fluxo-porta.nao     { right: -7px; bottom: 8px;  top: auto; border-color: var(--am); }
.fluxo-porta-rot {
  position: absolute; right: 12px; font-size: 9.5px; letter-spacing: .04em;
  text-transform: uppercase; opacity: .6; pointer-events: none;
}
.fluxo-porta-rot.sim { bottom: 24px; }
.fluxo-porta-rot.nao { bottom: 6px; }

/* Paleta lateral de nós disponíveis */
.fluxo-paleta {
  position: absolute; left: 14px; top: 14px; z-index: 3;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 13px; padding: 9px; width: 176px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.fluxo-paleta .label { margin-bottom: 7px; }
.fluxo-paleta button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; border-radius: 9px; border: 1px solid transparent;
  background: none; color: var(--tx-1); font-size: 12.5px; cursor: pointer;
  text-align: left;
}
.fluxo-paleta button:hover { background: var(--bg-2); border-color: var(--line); }

.fluxo-dica {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  font-size: 11.5px; color: var(--tx-3); text-align: right; line-height: 1.6;
  pointer-events: none;
}

@media (max-width: 720px) {
  .fluxo-paleta { position: static; width: auto; margin: 10px; }
  .fluxo-dica { display: none; }
}

/* ========================================================================
   GRAFO DA JORNADA — o ciclo do pedido desenhado, em Recuperação › Fluxos

   Somente leitura: aqui não se arrasta nem se liga nada, então não há
   porta nem cursor de conexão. O que a tela precisa passar é qual caminho
   o pedido seguiu e onde ele parou — daí o contraste entre o nó cumprido
   e o ramo ignorado, que fica apagado em vez de sumir.
   ======================================================================== */

.jor-tela {
  position: relative; overflow: hidden;
  min-height: 340px; padding: 20px;
  cursor: grab; touch-action: none;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--tx-1) 7%, transparent) 1px, transparent 1px)
    0 0 / 20px 20px;
  border-radius: 0 0 var(--raio) var(--raio);
}
.jor-plano {
  position: relative; width: 970px; height: 340px;
  transform-origin: 0 0;
}
/* O plano não transiciona: durante o arrasto a curva chegaria atrasada em
   relação ao nó, e o zoom por botão é um salto pequeno o bastante. */

.jor-linhas { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.jor-linhas path {
  fill: none; stroke: color-mix(in srgb, var(--ac) 55%, transparent); stroke-width: 2;
}
.jor-linhas circle { fill: color-mix(in srgb, var(--ac) 70%, transparent); }
.jor-linhas .morta { stroke: var(--line); }
.jor-linhas circle.morta { fill: var(--line); }

.jor-no {
  position: absolute; width: 186px; min-height: 54px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 11px;
  background: var(--bg-2); border: 1px solid var(--line);
}
.jor-no .ic { flex: none; display: grid; place-items: center; }
.jor-no .txt { min-width: 0; line-height: 1.3; }
.jor-no .est {
  display: block; font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-3); font-weight: 700;
}
.jor-no b { display: block; font-size: 12.5px; font-weight: 600; }
.jor-no .qdo { display: block; font-size: 10.5px; color: var(--tx-3); margin-top: 1px; }

/* cumprido: o pedido passou por aqui */
.jor-no.cumprido { border-color: color-mix(in srgb, var(--ac) 45%, transparent); }
.jor-no.cumprido .est { color: var(--ac); }

/* atual: onde ele está agora — o único com destaque forte */
.jor-no.atual {
  border-color: var(--am);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--am) 16%, transparent);
}
.jor-no.atual .est { color: var(--am); }

/* ignorado: o ramo não tomado. Fica visível, mas recuado — sumir esconderia
   que o caminho existia e não foi seguido. */
.jor-no.ignorado { opacity: .5; border-style: dashed; }

.jor-zoom {
  position: sticky; float: left; left: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 10px; padding: 4px; margin-top: -46px; z-index: 2;
}
.jor-zoom button {
  width: 28px; height: 28px; border: 0; border-radius: 7px;
  background: none; color: var(--tx-2); cursor: pointer;
  font-size: 15px; line-height: 1; display: grid; place-items: center;
}
.jor-zoom button:hover { background: var(--bg-3); color: var(--tx-1); }
.jor-zoom button:focus-visible { outline: 2px solid var(--ac); outline-offset: 1px; }

.jor-tela.arrastando { cursor: grabbing; }
.jor-no { cursor: grab; user-select: none; }
.jor-no:active { cursor: grabbing; }
.jor-zoom { cursor: default; }
/* ========================= EDITOR DE TEXTO RICO =========================
   Usado em Configurações › Geral (termos de uso). Construído sobre
   contenteditable — sem biblioteca, como o resto do projeto.
   ===================================================================== */
.rte {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); overflow: hidden;
}
.rte-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  padding: 7px 8px; border-bottom: 1px solid var(--line); background: var(--bg-2);
}
.rte-bar .sep { width: 1px; align-self: stretch; margin: 2px 6px; background: var(--line); }
.rte-bar button {
  min-width: 30px; height: 30px; padding: 0 6px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  font-size: 13.5px; color: var(--tx-2); background: none; border: 0; cursor: pointer;
  transition: background var(--t), color var(--t);
}
.rte-bar button:hover { background: var(--bg-hover); color: var(--tx-0); }
.rte-bar button.on { background: var(--ac-soft); color: var(--ac); }
.rte-bar button svg { width: 15px; height: 15px; }
.rte-bar .cx { font-size: 8px; opacity: .55; }

.rte-corpo {
  min-height: 240px; max-height: 460px; overflow: auto;
  padding: 16px 18px; font-size: 14.5px; line-height: 1.65; color: var(--tx-0);
  outline: 0;
}
.rte-corpo:empty::before { content: attr(data-vazio); color: var(--tx-3); }
.rte-corpo h1 { font-size: 22px; font-weight: 680; margin: .6em 0 .3em; }
.rte-corpo h2 { font-size: 18px; font-weight: 660; margin: .6em 0 .3em; }
.rte-corpo h3 { font-size: 15.5px; font-weight: 640; margin: .6em 0 .3em; }
.rte-corpo p { margin: 0 0 .7em; }
.rte-corpo ul, .rte-corpo ol { margin: 0 0 .7em; padding-left: 1.5em; }
.rte-corpo blockquote {
  margin: 0 0 .7em; padding-left: 14px; border-left: 3px solid var(--line-2, var(--line));
  color: var(--tx-2);
}
.rte-corpo a { color: var(--ac); text-decoration: underline; }
.rte-corpo hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
.rte-corpo table { border-collapse: collapse; margin: 0 0 .7em; }
.rte-corpo table td { border: 1px solid var(--line); padding: 6px 10px; min-width: 60px; }
/* Modo código: o mesmo campo mostrando o HTML cru. */
.rte-corpo.codigo {
  font-family: ui-monospace, Consolas, monospace; font-size: 12.5px;
  white-space: pre-wrap; color: var(--tx-1);
}

/* Tela cheia: sai do fluxo e cobre a janela, para escrever texto longo. */
.rte.cheio {
  position: fixed; inset: 16px; z-index: 90; border-radius: 14px;
  box-shadow: var(--sh-2, 0 20px 60px rgba(0,0,0,.45)); display: flex; flex-direction: column;
}
.rte.cheio .rte-corpo { flex: 1; max-height: none; }

/* Popover dos botões com seta. */
.rte-pop {
  position: absolute; z-index: 95; min-width: 150px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--sh-2, 0 12px 34px rgba(0,0,0,.35));
}
.rte-pop button {
  display: flex; width: 100%; justify-content: flex-start; height: auto;
  padding: 7px 10px; font-size: 13.5px; border-radius: 7px;
}
.rte-pop .cores { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; min-width: 0; }
.rte-pop .cores button { width: 22px; height: 22px; min-width: 0; padding: 0; border-radius: 5px; }

/* Envio de imagem com prévia — logo e favicon. */
.envio { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.envio-previa {
  height: 46px; min-width: 46px; padding: 5px 10px; border-radius: 10px;
  border: 1px dashed var(--line); background: var(--bg-2);
  display: grid; place-items: center; font-size: 22px; color: var(--tx-3);
}
.envio-previa img { max-height: 36px; max-width: 150px; object-fit: contain; display: block; }

/* Falta de imagem aparece como falta — nunca como emoji. Ver PU.capaProduto. */
.sem-img {
  display: grid; place-items: center; width: 100%; height: 100%;
  color: var(--tx-3); border-radius: inherit;
}
.sem-img svg { width: 48%; height: 48%; max-width: 22px; max-height: 22px; opacity: .75; }
.sem-img.txt {
  font-size: .82em; font-weight: 680; letter-spacing: -.02em; color: var(--tx-2);
}

/* =========================== EQUIPE E CARGOS ===========================
   Cartão de usuário com as etiquetas de cargo embaixo, e a linha de cargo
   arrastável. Ver a seção Equipe em Configurações.
   ===================================================================== */
.user-card {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px;
  background: var(--panel);
}
.user-card.dono { border-color: var(--ac-line); background: var(--ac-soft); }

.marca-eu, .marca-dono {
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
}
.marca-eu { color: var(--ac); }
.marca-dono { color: var(--am); }

.chip-cargo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 540;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--tx-0);
}
.chip-cargo svg { width: 13px; height: 13px; }
.chip-cargo .x {
  display: flex; padding: 0; margin-left: 1px; background: none; border: 0;
  color: var(--tx-3); cursor: pointer;
}
.chip-cargo .x:hover { color: var(--rd); }
.chip-cargo .x svg { width: 12px; height: 12px; }

.cargo-linha {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--panel);
}
.cargo-linha:hover { border-color: var(--line-2, var(--line)); }
.cargo-linha.arrastando { opacity: .45; }
.cargo-linha svg { width: 16px; height: 16px; }
.cargo-linha .pegar { cursor: grab; color: var(--tx-3); display: flex; flex: none; }

.bola-cor {
  width: 26px; height: 26px; border-radius: 8px; border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.bola-cor.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px currentColor; }

/* Ícone da permissão, no modal de cargo. Repete o desenho que a área usa
   na barra lateral, para reconhecer a tela antes de ler o texto. */
.linha-sw.perm { align-items: center; gap: 11px; }
.perm-ic {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--tx-2);
}
.perm-ic svg { width: 15px; height: 15px; }
/* Excluir a loja não é uma permissão como as outras — a cor avisa antes
   de alguém marcar a caixa sem ler. */
.perm-ic.perigo { color: var(--rd); border-color: var(--rd); background: var(--rd-soft); }

/* ============================= INTEGRAÇÕES =============================
   Grade de cards por categoria. Ver Configurações › Integrações.
   ===================================================================== */
.int-grupo { margin-bottom: 26px; }
.int-grupo .label { margin-bottom: 4px; }
.int-sub { margin: 0 0 12px; }
.int-grade {
  display: grid; gap: 14px; margin-top: 10px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.int-card {
  display: flex; flex-direction: column; gap: 9px;
  padding: 16px 17px; min-height: 172px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  transition: border-color var(--t), transform var(--t);
}
.int-card:hover { border-color: var(--line-2, var(--ac-line)); }
.int-card.on { border-color: var(--ac-line); }
.int-card.embreve { opacity: .62; }

.int-topo { display: flex; align-items: center; gap: 10px; }
.int-nome { font-size: 14.5px; font-weight: 620; letter-spacing: -.01em; }
.int-ext { display: flex; margin-left: auto; color: var(--tx-3); }
.int-ext svg { width: 14px; height: 14px; }

.int-marca {
  width: 32px; height: 32px; flex: none; border-radius: 9px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--m); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: -.02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.int-marca.img { background: #fff; padding: 3px; }
.int-marca.img img { width: 100%; height: 100%; object-fit: contain; }

.int-selo {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px;
  background: var(--bg-2); color: var(--tx-3); border: 1px solid var(--line);
}
.int-selo svg { width: 12px; height: 12px; }
.int-selo .dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.int-selo.ok { color: var(--ac); border-color: var(--ac-line); background: var(--ac-soft); }
.int-selo.off { color: var(--am); border-color: var(--am); background: var(--am-soft); }

.int-desc { margin: 0; font-size: 13px; line-height: 1.55; color: var(--tx-2); }
.int-pe { margin-top: auto; display: flex; justify-content: flex-end; padding-top: 4px; }

/* Marca real da integração: sem tile colorido, o logotipo fala sozinho —
   é assim que aparece na referência. O monograma mantém o tile. */
.int-marca.real {
  background: none; box-shadow: none; padding: 0;
  width: 30px; height: 30px;
}
.int-marca.real svg { width: 100%; height: 100%; display: block; }

/* ========================= TABELA DE VENDAS ============================
   Financeiro › Vendas. Colunas densas com hierarquia própria em cada
   célula — o olho precisa achar código, cliente e valor sem ler tudo.
   ===================================================================== */
.seg button .cont {
  margin-left: 7px; padding: 1px 6px; border-radius: 5px;
  font-size: 10.5px; font-weight: 600;
  background: var(--bg-3); color: var(--tx-3);
}
.seg button.on .cont { background: var(--ac-soft); color: var(--ac); }

.tbl-vendas tbody tr { cursor: pointer; }
.tbl-vendas tbody tr:hover { background: var(--bg-hover); }
.tbl-vendas td { vertical-align: middle; }

.cod-pedido {
  font-family: ui-monospace, Consolas, monospace; font-size: 12.5px;
  font-weight: 600; color: var(--ac);
}
.cel-cliente { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cel-cliente b { font-size: 13.5px; font-weight: 560; }
.cel-prod { font-size: 13px; }
.cel-prod b { font-weight: 620; color: var(--tx-2); margin-left: 3px; }
.valor-venda { font-variant-numeric: tabular-nums; color: var(--ac); font-size: 14px; }

/* Faixa colorida à esquerda separa venda direta de venda por campanha —
   é a informação que muda a leitura do resto da linha. */
.cel-tipo {
  display: flex; flex-direction: column; gap: 1px;
  padding-left: 9px; border-left: 2.5px solid var(--tx-3);
}
.cel-tipo.direta { border-left-color: var(--ac); }
.cel-tipo.campanha { border-left-color: var(--vi, #8b7cf6); }
.cel-tipo b { font-size: 13px; font-weight: 600; }

.chip-meio {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 3px 8px; border-radius: 7px; font-size: 11.5px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--tx-2);
}
.chip-meio svg { width: 12px; height: 12px; }
.nowrap { white-space: nowrap; }

.rodape-tbl {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 11px 16px; border-top: 1px solid var(--line);
}
.rodape-tbl label { margin: 0; white-space: nowrap; }
.rodape-tbl .inp.sm { height: 30px; padding: 0 8px; font-size: 12.5px; }
.rodape-tbl .btn.icon.sm { min-width: 28px; height: 28px; font-size: 13px; }

/* =========================== CAIXA DE ENTRADA ==========================
   Conversas: lista à esquerda, histórico à direita, ambas ocupando a
   altura da janela. O atendente rola dentro da lista, não a página —
   perder o campo de resposta de vista é o que faz responder virar caça.
   ===================================================================== */
.inbox {
  display: grid; grid-template-columns: 372px 1fr; gap: 16px;
  align-items: start;
}
.inbox-lista { display: flex; flex-direction: column; max-height: calc(100vh - 108px); }
.inbox-rolagem { flex: 1; overflow-y: auto; min-height: 120px; }
.rotulo-secao {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ac);
}
@media (max-width: 900px) {
  .inbox { grid-template-columns: 1fr; }
  .inbox-lista { max-height: none; }
}

/* ============================= APLICATIVOS =============================
   Fornecedores em linhas largas, com a faixa de promoção acima do card —
   como na referência. Ver Configurações › Aplicativos.
   ===================================================================== */
.app-linha {
  position: relative;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel);
}
.app-linha.on { border-color: var(--ac-line); }
.app-promo {
  position: absolute; top: -10px; left: 14px;
  padding: 3px 10px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--rd); color: #fff;
}

/* Área de credenciais dentro do modal de aplicativo. Caixa própria porque
   agrupa o que é sensível — e o bloco de cadastro fica dentro dela, junto
   de onde a chave é pedida. */
.cred-caixa {
  padding: 16px 17px; border: 1px solid var(--line);
  border-radius: 13px; background: var(--bg-2);
}
.cred-cadastro { padding: 2px; }

/* ======================= COMPARADOR DE FORNECEDORES ====================
   Um cartão por fornecedor, lado a lado. O vencedor ganha borda de acento
   e estrela; quem está fora fica esmaecido com o motivo à mostra — saber
   POR QUE um fornecedor não serve é tão útil quanto saber o preço.
   ===================================================================== */
.shk-servico {
  padding: 15px 16px; border: 1px solid var(--line);
  border-radius: 13px; background: var(--bg-2);
}
.cmp-grade {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.cmp-card {
  padding: 12px 13px; border: 1px solid var(--line);
  border-radius: 11px; background: var(--panel);
}
.cmp-card.vence { border-color: var(--ac); box-shadow: inset 0 0 0 1px var(--ac-line); }
.cmp-card.fora { opacity: .62; }
.cmp-custo { margin: 9px 0 6px; }
.cmp-custo b { font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cmp-estrela { font-size: 11.5px; font-weight: 700; color: var(--ac); }
.cmp-economia {
  margin-top: 11px; padding: 11px 13px; border-radius: 10px;
  background: var(--ac-soft); border: 1px solid var(--ac-line);
}

/* Blocos da aba Integrações do produto. */
.bloco-int {
  padding: 14px 15px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg-2);
}

/* ======================= VITRINE — BARRA SUPERIOR ======================
   Barra única com marca, busca, prova social e ações. Ver assets/js/loja.js.
   ===================================================================== */
.store-nav {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); background: var(--bg-1);
  position: sticky; top: 0; z-index: 40;
}
.sn-marca { display: flex; align-items: center; gap: 9px; flex: none; }
.sn-marca .logo-txt { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; }
.sn-selo {
  display: grid; place-items: center; width: 17px; height: 17px;
  border-radius: 50%; background: var(--ac); color: var(--ac-tx);
}
.sn-selo svg { width: 11px; height: 11px; }

.sn-busca {
  display: flex; align-items: center; gap: 9px; flex: 1 1 220px; max-width: 300px;
  padding: 0 14px; height: 42px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line);
}
.sn-busca svg { width: 16px; height: 16px; color: var(--tx-3); flex: none; }
.sn-busca input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 13.5px; }

/* Prova social: quem mais comprou. Fica escondida no estreito porque é a
   informação que menos custa perder quando o espaço acaba. */
.sn-tops {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line);
}
.sn-top { display: flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.sn-top .pt { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.sn-top b { font-weight: 640; }
.sn-top span { color: var(--tx-3); font-size: 11.5px; }

.sn-icone, .sn-entrar, .sn-carrinho {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 42px; padding: 0 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--tx-0);
  transition: background var(--t), border-color var(--t);
}
.sn-icone { width: 42px; padding: 0; justify-content: center; }
.sn-icone:hover, .sn-entrar:hover { background: var(--bg-3); }
.sn-carrinho {
  position: relative;
  background: var(--ac); border-color: var(--ac); color: var(--ac-tx);
}
.sn-carrinho:hover { filter: brightness(1.06); }
.sn-qtd {
  position: absolute; top: -5px; right: -5px;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; font-style: normal;
  background: var(--rd); color: #fff; border: 2px solid var(--bg-1);
}

@media (max-width: 1180px) { .sn-tops { display: none; } }
@media (max-width: 720px) {
  .sn-entrar span, .sn-carrinho span { display: none; }
  .sn-entrar, .sn-carrinho { width: 42px; padding: 0; justify-content: center; }
}

/* ========================= VITRINE — CARTÕES =========================== */
.sc-secao {
  display: flex; align-items: center; gap: 12px;
  margin: 46px 0 22px; font-size: 19px; font-weight: 750; letter-spacing: -.01em;
}
.sc-secao::before, .sc-secao::after {
  content: ""; height: 1px; background: var(--line); flex: 1;
}
.sc-secao span { font-size: 22px; }

.sc {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.sc:hover { transform: translateY(-3px); border-color: var(--ac-line); box-shadow: var(--sh-2); }
.sc.esgotado { opacity: .78; }
.sc.esgotado:hover { transform: none; }

.sc-cover {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  display: grid; place-items: center;
}
.sc-cover img { width: 100%; height: 100%; object-fit: cover; }
.sc-cover .sem-img svg { max-width: 34px; max-height: 34px; }
.sc-raio {
  position: absolute; top: 10px; left: 10px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(20, 20, 24, .74); color: #fff; backdrop-filter: blur(4px);
}
.sc-raio svg { width: 14px; height: 14px; }
.sc-esgotado {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(10, 10, 12, .66); backdrop-filter: blur(2px);
  font-size: 13px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
  color: #fff;
}

.sc-body { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.sc-nome {
  margin: 0; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-cat { font-style: normal; font-size: 11px; }

.sc-precos { margin-top: auto; }
.sc-linha-off { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.sc-old { font-size: 12.5px; color: var(--tx-3); text-decoration: line-through; }
.sc-off {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--ac);
  padding: 2px 7px; border-radius: 6px; background: var(--ac-soft);
}
.sc-off svg { width: 12px; height: 12px; }
.sc-price { font-size: 21px; font-weight: 750; letter-spacing: -.03em; }
.sc-avista { font-size: 11.5px; color: var(--tx-3); margin-top: 1px; }

.sc-meios { display: flex; gap: 6px; }
.sc-meio {
  width: 30px; height: 24px; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--tx-2);
}
.sc-meio.pix { color: #21d07a; }
.sc-meio svg { width: 15px; height: 15px; }

.sc-comprar {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 42px; border-radius: 10px; border: 0;
  font-size: 13.5px; font-weight: 650; cursor: pointer;
  background: var(--ac); color: var(--ac-tx);
  transition: filter var(--t);
}
.sc-comprar:hover { filter: brightness(1.07); }
.sc-comprar:disabled { background: var(--bg-3); color: var(--tx-3); cursor: not-allowed; filter: none; }
.sc-comprar svg { width: 16px; height: 16px; }

/* ========================= VITRINE — RODAPÉ =========================== */
.sc-rodape { border-top: 1px solid var(--line); background: var(--bg-1); padding: 44px 0 26px; }
.sc-rodape-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
}
.sc-rodape-marca { max-width: 480px; }
.sc-rodape-marca .logo-txt { font-size: 17px; font-weight: 750; }
.sc-rodape-marca p { margin: 12px 0 0; font-size: 13px; line-height: 1.65; color: var(--tx-2); }
.sc-redes { display: flex; gap: 10px; }
.sc-redes a {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--tx-1);
  transition: background var(--t), color var(--t);
}
.sc-redes a:hover { background: var(--bg-3); color: var(--tx-0); }
.sc-redes svg { width: 18px; height: 18px; }
.sc-rodape-base {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--tx-3);
}
.sc-rodape-base a { color: var(--tx-3); }
.sc-rodape-base a:hover { color: var(--tx-0); }

/* Grade da vitrine: 5 cartões por linha no amplo, como a referência.
   `auto-fill` com mínimo garante que ela quebre sozinha no estreito, em
   vez de espremer cinco colunas num celular. */
.grade-vitrine {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
@media (min-width: 1500px) { .grade-vitrine { grid-template-columns: repeat(5, 1fr); } }

/* ---------------------- logo da loja, no cadastro -----------------------
   Passo opcional: a prévia mostra o que foi escolhido, e o quadrado
   tracejado deixa claro que ainda não há imagem — em vez de um espaço em
   branco que parece campo quebrado. */
.auth-logo {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg-2);
}
.auth-logo .previa {
  width: 62px; height: 62px; flex: none; border-radius: 16px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--bg-3); border: 1px dashed var(--line); color: var(--tx-3);
}
.auth-logo .previa img { width: 100%; height: 100%; object-fit: cover; }
.auth-logo .previa svg { width: 24px; height: 24px; }
.auth-logo .grow { display: flex; gap: 8px; flex-wrap: wrap; }

/* ========================== BOT DISCORD — PAINEL =========================
 * Configurações → Bot Discord.
 *
 * Três peças próprias: a grade de produtos publicáveis, o card do produto e
 * a prévia do embed. O resto da tela usa .panel, .tbl e .grid que já existem
 * — e é de propósito: uma tela que inventa o próprio layout deixa de parecer
 * parte do painel.
 *
 * A grade usa auto-fill com mínimo em 268px em vez de contagem fixa de
 * colunas. Assim ela não precisa de breakpoint: encolheu a janela, cabe uma
 * coluna a menos, até chegar a uma só no celular. Nenhuma rolagem horizontal
 * aparece porque nada tem largura mínima maior que a tela.
 * ===================================================================== */
.dc-produtos {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.dc-produto { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.dc-produto-capa {
  height: 132px; display: grid; place-items: center; overflow: hidden;
  background: var(--bg-3); border-bottom: 1px solid var(--line);
}
.dc-produto-capa img { width: 100%; height: 100%; object-fit: cover; }
.dc-produto-icone { font-size: 34px; color: var(--tx-3); }
.dc-produto-icone svg { width: 30px; height: 30px; }
.dc-produto-corpo { padding: 15px; display: flex; flex-direction: column; flex: 1; }
.dc-produto-corpo .row:last-child { margin-top: auto; }

/* Duas linhas e reticências. A descrição de um produto pode ter 4.000
   caracteres, e derramá-la no card desalinharia toda a grade. */
.dc-clamp {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: 4px;
}

/* --------------------------- prévia do embed ---------------------------
   A barra colorida à esquerda é como o Discord desenha o embed. Não é
   decoração: é o que faz a prévia ser reconhecível como "isto vai aparecer
   assim lá", em vez de mais um card do painel. */
.dc-embed {
  border-radius: 6px; overflow: hidden; background: #2b2d31;
  border-left: 4px solid var(--barra, #5865f2); color: #dbdee1; max-width: 460px;
}
.dc-embed-corpo { padding: 13px 16px 16px; }
.dc-embed-titulo { font-weight: 700; font-size: 15px; color: #f2f3f5; }
.dc-embed-desc { font-size: 13.5px; line-height: 1.45; margin-top: 7px; color: #dbdee1; }
.dc-embed-campo { margin-top: 11px; }
.dc-embed-campo-nome { font-size: 12.5px; font-weight: 700; color: #f2f3f5; }
.dc-embed-campo-valor { font-size: 13.5px; margin-top: 2px; }
.dc-embed-campo-valor s { opacity: .55; }
.dc-embed-img { width: 100%; border-radius: 4px; margin-top: 12px; display: block; }
.dc-embed-rodape {
  font-size: 11.5px; color: #949ba4; margin-top: 12px;
  padding-top: 9px; border-top: 1px solid rgba(255,255,255,.06);
}

/* No celular o embed ocupa a largura toda do modal. */
@media (max-width: 560px) {
  .dc-embed { max-width: 100%; }
  .dc-produto-capa { height: 118px; }
}

/* ==================== AS DUAS IMAGENS DA CATEGORIA =====================
 * Dois slots lado a lado com PROPORÇÕES DIFERENTES — e é essa diferença que
 * comunica o papel de cada um antes de qualquer texto:
 *
 *   card    vertical   180/250   a categoria num card da vitrine
 *   banner  horizontal 960/200   a faixa do topo da categoria aberta
 *
 * A proporção vem inline no elemento (`aspect-ratio`), porque ela é dado do
 * campo e não do tema. Aqui fica só o arranjo: o card estreito à esquerda, o
 * banner ocupando o resto.
 * ==================================================================== */
.grid-cat-img {
  display: grid;
  /* `minmax(0, …)` nas duas colunas é o que impede o estouro: sem isso uma
     coluna de grid tem largura mínima automática igual ao conteúdo, e um
     bloco com proporção larga empurra a grade para fora do modal. */
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* ------------------ O SLOT COM PROPORÇÃO DE VERDADE --------------------
 * `.alvo-img` tem `height: 104px` fixa, que serve para os slots quadrados
 * do resto do painel. Com uma proporção declarada, a altura fixa vence e
 * INVERTE a conta: o navegador passa a derivar a LARGURA dela. Um banner
 * 960×200 virava 104 × 4,8 = 499px de largura e furava o modal, deixando a
 * pessoa arrastar de lado só para ver o desenho.
 *
 * Aqui a largura é que manda, e a altura sai da proporção. É o que faz o
 * bloco caber sempre, em qualquer largura de tela.
 * ==================================================================== */
.alvo-img.proporcional {
  height: auto;
  width: 100%;
  /* Teto para o card vertical não virar uma coluna gigante em tela larga. */
  max-height: 200px;
}

/* No celular os dois empilham. O card ganha um teto de largura para não
   esticar a arte vertical na largura inteira da tela. */
@media (max-width: 560px) {
  .grid-cat-img { grid-template-columns: minmax(0, 1fr); }
  .grid-cat-img .campo-img:first-child .alvo-img { max-width: 140px; }
}

/* Enquanto a imagem é redimensionada no navegador. Um arquivo de 10 MB leva
   um instante perceptível, e sem sinal a pessoa clica de novo. */
.alvo-img.carregando { opacity: .55; pointer-events: none; }