/* Visual "Grafite" (31/10/2026, pedido do Enzo: "a melhor versão estilizada",
   a partir de ui8, uiuxshowcase, Rebrand, Landings e ilovecreatives). O que
   eles têm em comum e vale aqui: fundo quase preto NEUTRO (antes puxava
   para o roxo), uma cor de destaque só (o roxo da paleta fica no botão
   principal, no estado ativo e nos selos; sai do fundo, dos degradês e dos
   títulos), título enorme e apertado, cartões planos com borda de 1 px e
   sem brilho. O roxo e as outras paletas continuam em js/tema.js. */
:root {
  --neon: #B14BFF;
  --neon-claro: #D08BFF;
  --neon-escuro: #6A1FB0;
  --tinta: #0A0A0C;
  --superficie: #141418;
  --texto: #F3F3F5;
  --texto-fraco: #9A9AA6;
  --verde: #3FBF62;
  --laranja: #FF9F43;
  --amarelo: #F2C023;
  --perigo: #FF7B7B;
  --ciano: #5ad7d0;
  --borda: rgba(255, 255, 255, .09);
  --borda-fraca: rgba(255, 255, 255, .06);
  /* Texto em cima do neon: escuro, nos dois temas. Branco sobre o neon dava
     3,95 no Giratina e 1,70 no Pikachu; com este tom, as cinco paletas passam
     de 4,5 (Giratina 5,06 é a pior). */
  --no-neon: #0B0710;
  /* Texto em cima de --verde ou --laranja: escuro aqui, branco no tema claro,
     onde as duas cores escurecem. */
  --no-verde: #0B0710;
}

* { box-sizing: border-box; }

/* ---------- Tipografia ----------
   Duas famílias, com papéis separados.

   O CORPO fica na fonte do sistema. Num iPhone e num Mac isso é a SF Pro, que
   é melhor em texto miúdo do que quase tudo que daria para baixar, e custa
   zero byte.

   Os TÍTULOS e os NÚMEROS vão para a Space Grotesk, geométrica e um pouco
   torta, que combina com carta holográfica e neon roxo. Ela é hospedada aqui
   (22 KB, só o subconjunto latino, que cobre todos os acentos do português),
   e não puxada do Google: assim o site não depende de outro servidor para
   desenhar a própria marca.

   `font-display: swap` porque texto invisível esperando fonte é pior que
   texto na fonte errada por meio segundo. */
/* O VALOR da coleção e o nome do binder ou deck aberto vão numa serifa de
   display (Instrument Serif, 31/10/2026, o "título que é a identidade" das
   referências), também hospedada aqui, só o subconjunto latino. */
@font-face {
  font-family: 'Instrument Serif';
  src: url('fontes/instrument-serif-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fontes/space-grotesk-latin.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --sistema: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --titulo: 'Space Grotesk', var(--sistema);
  --display: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* Cinco tamanhos, e só. Antes eram 44, 24, 20, 16, 14, 13, 12, 10 e mais
     alguns escolhidos caso a caso, o que é o mesmo que não ter escala. */
  --t1: clamp(44px, 12vw, 72px);
  --t2: 20px;
  --t3: 16px;
  --t4: 14px;
  --t5: 12px;
}

/* Uma escala só de tempos e curvas, para tudo no site se mover igual. */
:root {
  --rapido: 130ms;
  --normal: 220ms;
  --lento: 360ms;
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --curva-forte: cubic-bezier(0.23, 1, 0.32, 1); /* entradas: sai rápido e assenta devagar */
}

/* Quem pediu menos movimento no sistema recebe menos movimento. Não é
   enfeite: animação demais causa enjoo em quem tem sensibilidade vestibular. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Anel de foco visível só para quem navega pelo teclado. */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--neon-claro);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Some da tela, mas o leitor de tela lê. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* "Pular para o conteúdo": fica fora da tela até receber o foco do Tab. */
.pular {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 200;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--superficie);
  color: var(--texto);
  border: 2px solid var(--neon-claro);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--rapido) var(--curva);
}
.pular:focus { top: 12px; }
/* Fora do app (capa, login) não há lateral para pular. */
body:not(.no-app) .pular { display: none; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--tinta);
  color: var(--texto);
  font: var(--t3)/1.45 var(--sistema);
  -webkit-font-smoothing: antialiased;
}

/* Título é título: a fonte de display, apertada, porque em corpo grande o
   espaçamento normal parece frouxo. */
.marca, .valor, h1, h2, h3,
.capa-frase, .capa-titulo, .vitrine-valor,
.pagina-titulo strong, .cartao-info strong, .estat-valor, .recurso strong {
  font-family: var(--titulo);
  letter-spacing: -0.02em;
}

/* Todo número que a pessoa compara com outro número usa algarismo de largura
   fixa. Sem isso, uma coluna de preços dança conforme os dígitos mudam, e
   R$ 1.111,11 fica visivelmente mais estreito que R$ 8.888,88. */
.valor, .carta-preco, .estat-valor, .vitrine-valor, .detalhe,
.variacao, .sinal-conta, .linha-deck .preco, .linha-deck .qtd, .valor-linha {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* A margem respeita o entalhe e a barra flutuante do Safari no iPhone: sem
   isto o topo some atrás do relógio e a última fileira fica embaixo da barra
   de endereço. */
.tela {
  max-width: 1000px;
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right))
           calc(80px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));
}
[hidden] { display: none !important; }

/* ---------- Apresentação ----------
   Tudo aqui sai das variáveis de tema, então a tela acompanha as cinco
   paletas em vez de ter uma cor própria colada. */

.capa {
  max-width: 620px;
  margin: 6vh auto 0;
  text-align: center;
}

.capa .marca { font-size: clamp(46px, 12vw, 68px); }

.capa-frase {
  font-size: clamp(17px, 4.4vw, 21px);
  line-height: 1.4;
  color: var(--texto);
  margin: 14px auto 26px;
  max-width: 30ch;
}

.capa-acoes {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.capa-acoes.centro { margin: 26px 0 8px; }
.capa-acoes .primario, .capa-acoes .secundario { padding: 13px 22px; font-size: 16px; }

.capa-nota {
  color: var(--texto-fraco);
  font-size: 13px;
  margin: 16px auto 0;
  max-width: 34ch;
}

.capa-titulo {
  font-size: 20px;
  text-align: center;
  margin: 44px 0 18px;
}

/* A amostra do produto. Não é imagem: é o mesmo CSS do site montando uma
   coleção de exemplo, então ela nunca fica desatualizada em relação ao tema
   e não custa download nenhum. */
.vitrine {
  max-width: 480px;
  margin: 40px auto 0;
  padding: 20px 18px 14px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 18px;
  text-align: center;
}

.vitrine-topo .rotulo {
  display: block;
  color: var(--texto-fraco);
  font-size: 13px;
}
/* Bloco com a altura de linha da própria letra: inline, herdava os 23 px de
   linha do corpo e, quebrando em 320 px, as duas linhas ficavam soltas. */
.vitrine-topo .dica { display: block; line-height: 1.4; }
.vitrine-valor {
  display: block;
  font-size: clamp(28px, 8vw, 38px);
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 2px 0 4px;
  color: var(--texto);
}

/* A amostra reusa `.parede`, `.carta`, `.estatisticas`, `.chip` e
   `.grade-pagina`, que são as classes de verdade das telas. Aqui só entram os
   ajustes de escala, porque a caixa da amostra é bem mais estreita que a tela.

   Os seletores levam `.vitrine` na frente de propósito. Sem isso eles têm a
   mesma especificidade de `.parede`, que está MAIS ABAIXO neste arquivo e
   portanto vencia: a grade da amostra ficava com o `auto-fill` da coleção e
   ignorava tudo que está escrito aqui. */
.vitrine .parede {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 10px;
  text-align: left;
}
.vitrine .carta-nome { font-size: 13px; margin-top: 6px; }
.vitrine .carta-preco { font-size: 13px; line-height: 18px; }
.vitrine .selo-copias { font-size: 11px; padding: 2px 6px; }

.vitrine-estat { margin: 14px 0 12px; }
/* As abas da amostra são botões DE VERDADE.
   Antes eram inertes (`pointer-events: none`), tratadas como figura. Só que
   chip com cara de botão é botão para quem olha: a pessoa clicava, nada
   acontecia, e concluía que o site estava quebrado. */
.vitrine-abas { justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }
.vitrine-abas .chip { font-size: 12px; padding: 6px 12px; cursor: pointer; }

.painel-amostra { animation: aparecer var(--normal) var(--curva); }
@keyframes aparecer { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

/* A Pokédex da amostra: poucas espécies, maiores que na tela real, porque
   aqui elas são ilustração e não uma lista para percorrer. */
.amostra-dex { grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
@media (max-width: 420px) { .amostra-dex .dex:nth-child(n + 7) { display: none; } }

.vitrine .linha-deck { text-align: left; }
.vitrine .sinal { text-align: left; margin: 0 0 10px; }

/* Os chips de medida: a mesma folha em 3×3 e em 4×4, que são as duas medidas
   de binder que existem na prateleira. */
.medidas-amostra { justify-content: center; margin-bottom: 4px; }
.medidas-amostra .chip { font-size: 12px; padding: 5px 12px; cursor: pointer; }

/* O teto vai no CONTAINER, não na grade: `desenharPaginas` escreve um
   `max-width` no estilo do elemento (148px por coluna) e estilo escrito no
   elemento ganha de folha, então mirar a grade aqui não faria efeito nenhum
   sem `!important`. Apertando o pai, a grade encolhe sozinha.

   O número existe porque a folha inteira é alta: 4×4 de carta 63×88 dá altura
   de 1,4× a largura, e sem teto a amostra ficava com 600px de altura e fazia a
   seção pular de tamanho a cada troca de aba. */
.vitrine-binder { max-width: 380px; margin: 12px auto; }
/* Nada de `grid-template-columns` aqui. Quem escreve a coluna é
   `desenharPaginas`, a partir da medida da página — uma regra fixa em CSS
   mentiria assim que a medida mudasse, e foi exatamente o que aconteceu com a
   versão anterior desta amostra. */
.vitrine-binder .pagina { margin: 0; }
.vitrine-binder .pagina-titulo { margin: 0 auto 8px; max-width: 420px; }
.vitrine-binder .grade-pagina { margin: 0 auto; }

.vitrine-aviso { color: var(--texto-fraco); font-size: 12px; margin: 0; }

@media (max-width: 420px) {
  /* No celular sobram duas cartas: quatro viram quatro unhas, e a arte é o
     ponto inteiro da amostra. */
  .vitrine .carta:nth-child(n + 3) { display: none; }
}

.recursos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 0 auto;
  max-width: 900px;
}
.recurso {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 15px 16px;
}
.recurso strong { display: block; margin-bottom: 5px; }
.recurso p { margin: 0; color: var(--texto-fraco); font-size: 14px; line-height: 1.45; }

/* A seção do que o site NÃO faz.
   Fica antes do cadastro de propósito: quem chega precisa saber onde a
   ferramenta para, senão descobre depois e se sente enganado. */
.franqueza {
  max-width: 620px;
  margin: 40px auto 0;
  padding: 18px 18px 6px;
  border: 1px dashed var(--borda);
  border-radius: 14px;
}
.franqueza h2 { font-size: 17px; margin: 0 0 10px; }
.franqueza p { color: var(--texto-fraco); font-size: 14px; line-height: 1.5; margin: 0 0 12px; }
.franqueza strong { color: var(--texto); }

.rodape {
  max-width: 560px;
  margin: 28px auto 0;
  text-align: center;
  color: var(--texto-fraco);
  font-size: 13px;
}

/* Só o "‹ O que é o HoloSafe" do login é centrado. Sem o `.login-caixa` na
   frente, esta regra também pegava o "‹ Voltar" de dentro do binder, que
   ficava boiando no meio da tela em vez de no canto, onde se procura. */
.login-caixa .link.voltar { display: block; margin: 18px auto 0; padding-inline: 6px; }

@media (max-width: 560px) {
  .capa { margin-top: 3vh; }
  .capa-acoes .primario, .capa-acoes .secundario { flex: 1 1 100%; }
}

/* ---------- Login ---------- */

.login-caixa {
  max-width: 380px;
  margin: 12vh auto 0;
  text-align: center;
}

.marca {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -1px;
  margin: 0;
  color: var(--texto);
}
.marca.pequena { font-size: 24px; }

/* A marca do cabeçalho é desenho, não texto: o nome vira contorno no
   ferramentas/marca_svg.py, então não depende da fonte carregar. A altura
   manda, a largura acompanha. */
/* aspect-ratio é obrigatório: svg sem width vira 300px de caixa e a marca
   fica boiando no meio de espaço vazio. O número é o viewBox do marca.svg. */
.marca-desenho { height: 52px; width: auto; aspect-ratio: 5578 / 1180; display: block; }
.marca.pequena .marca-desenho { height: 26px; }
/* Bloco não centraliza com text-align: na apresentação e no login a marca
   ficava colada à esquerda, com a frase e os botões centrados embaixo
   (varredura de 03/10/2026). */
.capa .marca-desenho, .login-caixa .marca-desenho { margin-inline: auto; }
@media (max-width: 560px) {
  .marca-desenho { height: 42px; }
  .marca.pequena .marca-desenho { height: 24px; }
}


.sub { color: var(--texto-fraco); margin: 6px 0 26px; }

form { display: flex; flex-direction: column; gap: 10px; }

input {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto);
  font-size: 16px; /* 16px evita o zoom automático do Safari no iPhone */
}
input:focus { outline: 2px solid var(--neon-claro); outline-offset: 1px; }

button { font: inherit; cursor: pointer; }

.primario {
  padding: 13px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--neon);
  color: var(--no-neon);
  font-weight: 700;
}
.primario:disabled { opacity: 0.5; cursor: default; }
.primario.compacto { padding: 9px 14px; border-radius: 10px; font-size: 14px; }

.link {
  background: none;
  border: 0;
  color: var(--neon-claro);
  padding: 10px 4px;
  font-size: 14px;
}

.aviso {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  font-size: 14px;
  text-align: left;
}
.aviso.bom { color: var(--verde); }
.aviso.ruim { color: var(--laranja); }

/* ---------- Topo da coleção ---------- */

.topo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
/* A fileira de ações ocupa o resto da linha e o texto de sincronização
   encolhe com reticências: entre 561 e 620 px ele empurrava os botões para
   uma segunda linha, colados à esquerda (varredura de 03/10/2026). */
.topo-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 1 1 0; min-width: 0; }

.estado { font-size: 12px; color: var(--texto-fraco); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rotulo { color: var(--texto-fraco); font-weight: 600; margin: 0; }
.valor {
  font-family: var(--display);
  font-size: var(--t1);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: .98;
  margin: 2px 0 0;
  color: var(--texto);
}
.detalhe { color: var(--texto-fraco); font-size: 14px; margin: 2px 0 18px; }

.filtros { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Resumo recolhível ----------
   Ver o comentário no index.html: no celular o gráfico e as estatísticas
   empurravam a primeira carta para fora da tela. */
.resumo-botao { margin: 0 0 14px; padding: 0; font-size: 13px; }
.resumo-topo.recolhido { display: none; }

/* ---------- Barra que rola de lado ----------
   As abas ocupavam 645px num espaço de 339, e os chips de set 669 em 339. Rola
   na horizontal, só que nada na tela dizia isso, então "Sinais" e "Guia"
   simplesmente não existiam para quem não descobrisse o gesto por acidente.
   A ponta direita do trilho esmaece (máscara), e o trilho tem 24 px de folga
   no fim: com conteúdo escondido, o chip da ponta some aos poucos; rolado até
   o fim, ou sem nada para rolar, o último chip fica fora do esmaecido.
   Antes eram tampas pintadas na cor --tinta sobre sombras roxas, só que o
   fundo da página tem um brilho roxo no alto e as tampas apareciam como um
   retângulo escuro atrás do primeiro chip (varredura de 03/10/2026). */
:root { --esmaecer-rolagem: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
/* As abas não rolam mais (são três e um "Mais"), então a dica de rolagem
   saiu daqui: ficava um retângulo escuro ao lado do último botão. */

.chip {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--borda);
  background: transparent;
  color: var(--texto);
  font-size: 14px;
  font-weight: 600;
}
/* O chip ligado inverte (texto sobre fundo), e o roxo fica só para o botão principal. */
.chip.ativo { background: var(--texto); border-color: transparent; color: var(--tinta); }

/* ---------- Parede de cartas ---------- */

.parede {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 18px;
}
@media (max-width: 420px) {
  .parede { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}



/* Altura de linha normal: o 0 que estava aqui servia para a <img> não
   ganhar folga embaixo, mas ela já é bloco. Com 0, os selos de texto em
   cima da arte (RF, "tenho", N/RF/PB da busca, nome da versão) ficavam com
   4 a 6 px de altura e as letras vazavam da pílula (varredura de 03/10/2026). */
.carta-imagem { position: relative; line-height: normal; }
.carta img {
  width: 100%;
  aspect-ratio: 63 / 88;
  object-fit: cover;
  border-radius: 10px;
  background: var(--superficie);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  display: block;
  /* Some até carregar e então aparece: sem isto a parede pisca, com
     retângulos vazios virando carta de repente. */
  opacity: 0;
  transition: opacity var(--normal) var(--curva),
              transform var(--normal) var(--curva),
              box-shadow var(--normal) var(--curva);
}
.carta img.pronta { opacity: 1; }
.carta img.quebrada { opacity: 0.25; }

/* Enquanto a imagem não chega, um brilho corre pelo espaço dela. */
.carta-imagem:has(img:not(.pronta))::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: linear-gradient(100deg, var(--superficie) 30%,
              rgba(255, 255, 255, 0.07) 50%, var(--superficie) 70%);
  background-size: 220% 100%;
  animation: varrer 1.3s linear infinite;
}
@keyframes varrer { from { background-position: 140% 0; } to { background-position: -40% 0; } }

/* O brilho de vidro que passa na carta ao apontar. Raio de 11 px, o mesmo
   da arte (o de 10 deixava um fiapo claro nos cantos). */
.carta-imagem::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 11px;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%,
              rgba(255, 255, 255, 0.16) 48%, transparent 62%);
  opacity: 0;
  transition: opacity var(--normal) var(--curva);
}
/* Hover só com mouse: no iPhone o toque deixava o :hover grudado depois de
   fechar o painel (carta 4 px acima, com brilho). */
@media (hover: hover) and (pointer: fine) { .carta:hover .carta-imagem::after { opacity: 1; } }
/* Quem sobe ao apontar é a moldura inteira, não só a arte: subindo só a
   <img>, o "×2", o "×" de remover e o brilho ficavam parados, 4 px fora do
   lugar (varredura de 03/10/2026). */
.carta-imagem { transition: transform var(--normal) var(--curva); }
@media (hover: hover) and (pointer: fine) {
  .carta:hover .carta-imagem:has(img.pronta) { transform: translateY(-4px); }
  .carta:hover img.pronta { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5); }
}
.carta:active img.pronta {
  transform: scale(0.97);
  transition-duration: var(--rapido);
}
.carta-nome {
  font-size: 14px;
  font-weight: 700;
  margin: 7px 0 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Uma linha só, com altura fixa: preço que quebrava em duas linhas fazia a
   fileira inteira crescer e abria buraco embaixo das outras cartas. */
.carta-preco {
  font-size: 14px;
  line-height: 20px;
  color: var(--texto-fraco);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carta-preco.sem { color: var(--laranja); font-weight: 700; }

/* O "×2": uma pílula escura e discreta sobre a arte, como os outros selos
   de canto, em vez do degradê neon com borda branca que gritava. */
.selo-copias {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  border: 0;
  font: 700 11px/1 var(--titulo);
  color: #fff;
}

.remover {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 15px;
  line-height: 1;
}
/* Na coleção o × não fica plantado em cima de toda arte: com mouse aparece
   ao apontar ou no foco; no toque some (remover fica no detalhe e no
   Selecionar, com confirmação). */
@media (hover: hover) {
  #parede .remover { opacity: 0; transition: opacity var(--rapido) var(--curva); }
  #parede .carta:hover .remover, #parede .carta:focus-within .remover { opacity: 1; }
}
@media (hover: none) { #parede .remover { display: none; } }

.vazio {
  text-align: center;
  color: var(--texto-fraco);
  padding: 60px 20px;
}
.vazio-caixa { max-width: 420px; margin: 0 auto; display: grid; gap: 12px; justify-items: center; }
.vazio-caixa h2 { margin: 0; color: var(--texto); font-family: var(--titulo); font-size: var(--t2); }
.vazio-caixa p { margin: 0; }
.vazio-caixa .primario { margin-top: 6px; padding: 12px 22px; }

/* ---------- Painel de adicionar ---------- */

.painel {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 10;
  animation: escurecer var(--normal) var(--curva);
}
@keyframes escurecer { from { opacity: 0; } }
@media (min-width: 700px) { .painel { align-items: center; } }

.painel-caixa {
  width: min(560px, 100%);
  max-height: 88dvh;
  /* Painel maior que a tela rola por dentro: o da vitrine, com perfil e
     vendas, passava do pé e o campo de contato ficava para fora da caixa
     (print do Enzo, 29/09/2026). */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: var(--tinta);
  border: 1px solid var(--borda);
  border-radius: 18px 18px 0 0;
  /* No telefone sobe de baixo, como folha do iOS (a curva de folha: sai
     rápido e assenta devagar); no computador cresce do centro, porque ali
     "subir da borda" não quer dizer nada. */
  animation: subir 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes subir {
  from { transform: translateY(28px); opacity: 0; }
}
@media (min-width: 700px) {
  .painel-caixa { border-radius: 18px; animation: crescer var(--normal) var(--curva); }
  @keyframes crescer { from { transform: scale(0.96); opacity: 0; } }
}
/* Painel aberto a partir de outro: o véu já está lá, só a caixa entra. */
.painel.trocando { animation: none; }
/* Saída curta, mais rápida que a entrada. O hidden só vem no fim (js). */
.painel.fechando { animation: some 160ms var(--curva) forwards; pointer-events: none; }
.painel.fechando .painel-caixa { animation: descer 160ms var(--curva) forwards; }
@keyframes some { to { opacity: 0; } }
@keyframes descer { to { opacity: 0; transform: translateY(16px); } }
@media (min-width: 700px) {
  .painel.fechando .painel-caixa { animation-name: descer-centro; }
  @keyframes descer-centro { to { opacity: 0; transform: scale(0.97); } }
}

.painel-topo { display: flex; align-items: center; justify-content: space-between; }
.painel-topo h2 { font-size: 18px; margin: 0; }

.resultados { overflow-y: auto; flex: 1; min-height: 160px; }

/* Grade do resultado da busca: arte grande, que é como se reconhece carta. */
.parede.busca {
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 14px;
  padding: 2px;
}
.parede.busca .carta-nome { font-size: 13px; margin-top: 6px; }
.carta-set {
  font-size: 12px;
  color: var(--texto-fraco);
  margin: 1px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.parede.busca .carta-preco {
  font-size: 12px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Já possuída fica levemente recuada: o olho vai para o que falta. */
.carta.possuida img { outline: 2px solid var(--verde); outline-offset: -2px; }

.ja-tenho.no-canto {
  position: absolute;
  top: 5px; left: 5px;
  margin: 0;
  font-size: 11px;
  padding: 2px 7px;
}

.resultado {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.resultado img { width: 46px; border-radius: 4px; background: var(--superficie); }
.resultado-info { flex: 1; min-width: 0; }
.resultado-nome { font-weight: 700; font-size: 15px; }
.resultado-set { font-size: 13px; color: var(--texto-fraco); }
.resultado-preco { font-size: 13px; font-weight: 700; color: var(--neon-claro); }

.ja-tenho {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(63, 191, 98, 0.18);
  color: var(--verde);
  font-size: 12px;
  font-weight: 700;
}

.mais {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: var(--neon);
  color: var(--no-neon);
  font-size: 19px;
  line-height: 1;
  flex: none;
}
.mais.feito { background: var(--verde); color: var(--no-verde); }

.resumo {
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  font-size: 14px;
  font-weight: 600;
}

.carregando { color: var(--texto-fraco); padding: 20px 0; text-align: center; }

/* Faixa de erro: fica por cima de tudo, com o texto selecionável para a
   pessoa copiar e mandar. Melhor uma faixa feia que uma tela em branco. */
.faixa-erro {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  padding: 12px 16px;
  background: #3A0D0D;
  border-top: 2px solid #FF6B6B;
  color: #FFD9D9;
  font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  user-select: text;
  -webkit-user-select: text;
  max-height: 40dvh;
  overflow: auto;
}

.secundario {
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--superficie);
  color: var(--texto);
  padding: 13px 18px;
  font-weight: 600;
}
.secundario.compacto { padding: 9px 14px; border-radius: 10px; font-size: 14px; }

.dica { font-size: 13px; color: var(--texto-fraco); margin: 0; }

textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto);
  font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  resize: vertical;
}
textarea:focus { outline: 2px solid var(--neon-claro); outline-offset: 1px; }

.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--texto-fraco); }

/* ---------- Estatísticas ---------- */

.estatisticas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
/* Bloco como o cartão de rota do Skyward (01/11/2026): a faixa roxa em
   cima com o rótulo, o valor grande embaixo. */
.estat {
  --estat-x: 13px; --estat-y: 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--estat-y) var(--estat-x);
  border-radius: 12px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  overflow: hidden;
}
.estat-rotulo {
  margin: calc(-1 * var(--estat-y)) calc(-1 * var(--estat-x)) 6px; padding: 6px var(--estat-x);
  background: color-mix(in srgb, var(--neon) 16%, transparent); color: var(--neon-claro);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A linha de baixo do "Valor do que tenho": de onde o número saiu. */
.estat-nota { font-size: 11px; color: var(--texto-fraco); margin-top: 2px; line-height: 1.3; }
.estat-valor {
  font-size: 17px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip.fino { font-size: 13px; padding: 6px 11px; font-weight: 500; }

/* ---------- Detalhe da carta ---------- */

.carta { cursor: pointer; }

.detalhe-carta { display: grid; gap: 18px; overflow-y: auto; }
@media (min-width: 560px) {
  .detalhe-carta { grid-template-columns: 190px minmax(0, 1fr); align-items: start; }
}
.detalhe-imagem { width: 100%; border-radius: 10px; display: block; }
.detalhe-lado { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.detalhe-linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.detalhe-linha span { color: var(--texto-fraco); }
.detalhe-linha strong { text-align: right; overflow-wrap: anywhere; }

.detalhe-copias {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--superficie);
  border: 1px solid var(--borda);
}
.detalhe-copias button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: var(--neon);
  color: var(--no-neon);
  font-size: 19px;
  line-height: 1;
}


/* ---------- Importar ---------- */

.linha-import {
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--texto-fraco);
}
.linha-import.ok { color: var(--verde); }
.linha-import.falhou { color: var(--laranja); }
/* Entrou, mas não é o que você pediu: nem verde de "deu certo", nem laranja de
   "falhou". Amarelo é o "olha isso aqui". */
.linha-import.conferir { color: var(--amarelo); }
.aviso-estimativa.conferir {
  border-left: 3px solid var(--amarelo);
  padding-left: 10px;
}

/* ---------- Gráfico ---------- */

.grafico-caixa {
  padding: 13px 15px;
  border-radius: 14px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  margin-bottom: 18px;
}
.grafico-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}
.grafico-topo .sobe { color: var(--verde); }
.grafico-topo .desce { color: var(--laranja); }
#grafico svg { width: 100%; height: 110px; display: block; }

/* ---------- Abas ---------- */

/* Três abas e um "Mais": cabe numa linha até em 375px sem rolar, e o menu
   do "Mais" precisa de overflow visível para abrir por cima da página. */
.abas {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.aba { flex: none; }
.mais-aba .seta { font-size: 11px; opacity: .8; }
.busca-linha { display: flex; gap: 8px; }
.busca-linha #filtro { flex: 1; min-width: 0; }
.filtros-botao { flex: none; width: 48px; padding: 0; display: grid; place-items: center; border-radius: 12px; }
.filtros-botao svg { width: 22px; height: 22px; }
.filtros-botao[aria-expanded="true"] { border-color: var(--neon); color: var(--neon-claro); }
@media (min-width: 561px) { .filtros-botao { display: none; } }
@media (max-width: 560px) {
  #linha-de-chips:not(.abertos) { display: none; }
  .aba { padding: 9px 13px; }
}
.dica.alternativa { margin: 14px 0 0; text-align: center; }
.dica.alternativa .link { font-weight: 600; }
.aba {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: transparent;
  color: var(--texto-fraco);
  font-size: 14px;
  font-weight: 600;
  transition: color var(--rapido) var(--curva), border-color var(--rapido) var(--curva),
              background var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.aba:hover { color: var(--texto); }
.aba:active { transform: scale(0.95); }
.aba.ativa { background: var(--texto); color: var(--tinta); border-color: transparent; }

/* Conteúdo da seção entra deslizando de baixo, curto o bastante para não
   atrapalhar quem só quer trocar de aba rápido. */
main:not([hidden]), #detalhe-aberto:not([hidden]) {
  animation: entrar var(--lento) var(--curva) both;
}
@keyframes entrar {
  from { opacity: 0; transform: translateY(14px); }
}
/* No Início os blocos entram um atrás do outro (31/10/2026, o ritmo dos
   sites de referência): cada um 45 ms depois do anterior. */
.inicio > * { animation: entrar var(--lento) var(--curva) both; }
.inicio > :nth-child(2) { animation-delay: 45ms; }
.inicio > :nth-child(3) { animation-delay: 90ms; }
.inicio > :nth-child(4) { animation-delay: 135ms; }
.inicio > :nth-child(5) { animation-delay: 180ms; }
.inicio > :nth-child(6) { animation-delay: 225ms; }
.inicio > :nth-child(n+7) { animation-delay: 270ms; }

.chip, .primario, .secundario, .mais, .link {
  transition: transform var(--rapido) var(--curva), background var(--rapido) var(--curva),
              color var(--rapido) var(--curva), opacity var(--rapido) var(--curva);
}
.chip:active, .primario:active, .secundario:active, .mais:active { transform: scale(0.95); }
.primario:hover, .secundario:hover { filter: brightness(1.1); }

.cartao-lista {
  transition: transform var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
@media (hover: hover) and (pointer: fine) { .cartao-lista.clicavel:hover { transform: translateX(3px); border-color: var(--neon); } }
.cartao-lista.clicavel:active { transform: scale(0.99); }

/* ---------- Listas de binder e deck ---------- */

.lista-larga { display: flex; flex-direction: column; gap: 10px; }

.cartao-lista {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--superficie);
  border: 1px solid var(--borda);
}
.capa-binder {
  width: 46px;
  height: 62px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  flex: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.cartao-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cartao-info strong { font-size: 15px; }
.cartao-info span { font-size: 13px; color: var(--texto-fraco); }
.cartao-info .valor-linha { color: var(--neon-claro); font-weight: 700; }

/* ---------- Temas ---------- */

.temas { display: flex; gap: 10px; flex-wrap: wrap; }
.tema {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
}
.tema.ativo { border-color: #fff; box-shadow: 0 0 0 3px var(--borda); }

/* ---------- Campos no detalhe ---------- */

.detalhe-campo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--texto-fraco);
  padding-top: 6px;
}
.aviso-estimativa {
  margin: 10px 0 0;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(255, 159, 67, 0.12);
  border: 1px solid rgba(255, 159, 67, 0.3);
  color: var(--laranja);
  font-size: 12px;
  line-height: 1.4;
}

/* ---------- Valor do ponto no gráfico ---------- */

#grafico { position: relative; touch-action: pan-y; cursor: crosshair; }
.balao {
  position: absolute;
  top: 2px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 10px;
  border-radius: 9px;
  background: var(--tinta);
  border: 1px solid var(--neon);
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
.balao strong { font-size: 14px; color: var(--neon-claro); }
.balao span { color: var(--texto-fraco); }

/* ---------- Dentro do binder e do deck ---------- */

.cartao-lista.clicavel {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.seta { margin-left: auto; color: var(--texto-fraco); font-size: 22px; }
.voltar { align-self: flex-start; padding-left: 0; }
#detalhe-aberto h2 { margin: 0 0 4px; font-family: var(--display); font-weight: 400; font-size: 34px; letter-spacing: -.01em; }
/* A volta e o nome na mesma linha (24/10/2026). */
.detalhe-topo { display: flex; align-items: center; gap: 2px; min-width: 0; }
#detalhe-aberto .detalhe-topo h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.voltar-seta {
  flex: none; width: 40px; height: 40px; margin-left: -10px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 12px; color: var(--neon-claro); cursor: pointer;
}
.voltar-seta svg { width: 24px; height: 24px; }
.voltar-seta:active { transform: scale(0.92); }

.pagina { margin-bottom: 22px; }
/* Computador largo: as folhas de duas em duas, lado a lado, como o binder
   aberto. Cada uma fica na medida dela (o teto vem do js); a 4×4 encolhe um
   pouco para caber ao lado de outra. */
@media (min-width: 1100px) {
  #detalhe-conteudo .paginas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start; }
}
.pagina-titulo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 14px 0 8px;
  font-size: 14px;
}
.pagina-titulo span { color: var(--texto-fraco); font-size: 12px; }
/* Os botões de quem completa set, logo abaixo do nome dele. */
.set-acoes { margin: 0 0 14px; }
.set-acoes .chip { font-size: 13px; padding: 7px 12px; }

/* Comparar com a vitrine de um amigo. */
.comparar .linha-busca { margin: 10px 0; }
.comparar .recentes { margin-bottom: 6px; }
.comparar .resultado .chips { margin: 4px 0 10px; }
.comparar .carta { cursor: pointer; }

/* Entrada das cartas: sobem e aparecem conforme entram na tela, com um
   atraso curto por lote (js/secoes.js). O ✓ dá um pulo quando acende. */
.carta.entra { opacity: 0; transform: translateY(8px); }
.carta.entra.visivel {
  opacity: 1; transform: none;
  transition: opacity 260ms var(--curva) var(--atraso, 0ms), transform 260ms var(--curva) var(--atraso, 0ms);
}
.selo-tenho { animation: pulo 360ms var(--curva); }
@keyframes pulo { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: none; } }
.barra-progresso.animada div { transition: width 900ms var(--curva); }
.barra-progresso.animada.atualiza div { transition-duration: 300ms; }
.set-painel { margin: 0 0 12px; }
.set-painel .estat-valor { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips.versoes { margin: 0 0 12px; }
@media (prefers-reduced-motion: reduce) {
  .carta.entra { opacity: 1; transform: none; transition: none; }
  .selo-tenho { animation: none; }
  .barra-progresso.animada div { transition: none; }
}

/* Master set no Por set, como no PokéCardex e no Dex: cada versão é a sua
   própria carta na grade, lado a lado com as irmãs, com o nome da versão
   num selo na arte. */
.selo-versao {
  position: absolute; left: 5px; bottom: 5px; max-width: calc(100% - 44px);
  padding: 3px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, .74); color: #fff;
  font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* O "−" de tirar: escuro com aro branco, para se ver em cima de qualquer arte
   (o translúcido branco sumia nas cartas claras). */
.mais.tirar { background: rgba(0, 0, 0, .62); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .75); }

/* ---------- Tema claro ----------
   Os tokens mudam aqui; a paleta (js/tema.js) põe os dela por cima, já
   sabendo que é claro. O que era branco translúcido vira preto translúcido,
   sombra fica mais leve. Selos sobre a arte e o scanner continuam escuros:
   estão em cima de imagem. */
html[data-tema="claro"] {
  --tinta: #F4F4F6;
  --superficie: #FFFFFF;
  --texto: #141418;
  --texto-fraco: #6B6B76;
  --borda: rgba(0, 0, 0, .1);
  --borda-fraca: rgba(0, 0, 0, .06);
  --elevacao: none;
  /* As cores de estado escurecem para passar de 4,5 sobre #F6F3FB e #FFF
     (verde 4,9, laranja 5,3, amarelo 4,6, perigo 6,0, ciano 5,6). Em cima
     delas, o texto vira branco (5,4 no verde, 5,8 no laranja). */
  --verde: #1B7A38;
  --laranja: #A64B00;
  --amarelo: #8A6A00;
  --perigo: #B3261E;
  --ciano: #0B6E68;
  --no-verde: #FFFFFF;
  --neon-claro: #6A1FB0; /* o js/tema.js põe o da paleta por cima */
  color-scheme: light;
}
/* No claro, o --neon-claro é o tom escuro da paleta, e o degradê dos botões
   ia do escuro ao neon: nenhum texto passava nos dois extremos. Aqui o fundo
   é o neon chapado, com o texto escuro de --no-neon. */
html[data-tema="claro"] .primario,
html[data-tema="claro"] .dialogo-botoes button.primario,
html[data-tema="claro"] .passo i { background: var(--neon); }
/* Número grande em degradê: no claro vai do texto da paleta ao tom escuro,
   sem passar pelo neon, que some no fundo claro (Pikachu dava 1,55). */
html[data-tema="claro"] .carta-preco.aproximado { color: var(--texto); }
/* O aviso rápido tinha fundo escuro fixo com o texto do tema: no claro, texto
   escuro sobre escuro. */
html[data-tema="claro"] .aviso-rapido { background: var(--superficie); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .25); }
html[data-tema="claro"] .aviso-rapido.ruim { color: var(--laranja); }
html[data-tema="claro"] body { background: var(--tinta); }
html[data-tema="claro"] body.no-app .lateral { background: rgba(255, 255, 255, .8); }
html[data-tema="claro"] .lateral .item:hover { background: rgba(0, 0, 0, .05); }
/* Só o chip neutro fica cinza no claro. Sem o :not, este seletor (0,2,1)
   vencia o .chip-rar.sir (0,2,0) e SIR e HR perdiam a cor, enquanto AR e
   UR, mais baixas, continuavam tingidas. */
html[data-tema="claro"] .chip-rar:not(.sir):not(.hr):not(.ir):not(.ar):not(.ur):not(.rr):not(.sr):not(.venda):not(.nova):not(.prevista) { background: rgba(0, 0, 0, .06); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
html[data-tema="claro"] .pilula { background: rgba(0, 0, 0, .04); }
html[data-tema="claro"] .var { background: rgba(0, 0, 0, .04); }
html[data-tema="claro"] .var.tenho { background: var(--neon); }
html[data-tema="claro"] .mais.tirar { background: rgba(0, 0, 0, .38); }
html[data-tema="claro"] .carta img { box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
html[data-tema="claro"] .detalhe-imagem { box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
html[data-tema="claro"] .aba.ativa { background: var(--texto); color: var(--tinta); }
/* Branco translúcido sobre branco some: o trilho da barra de progresso e a
   divisória das linhas de deck (varredura de 03/10/2026). */
html[data-tema="claro"] .barra-progresso { background: rgba(0, 0, 0, .08); }
html[data-tema="claro"] .linha-deck { border-bottom-color: var(--borda-fraca); }
/* A espécie que falta: o clareamento (brightness 1,6) existe para o fundo
   escuro; no claro ele apagava a borda e o fundo e a caixa sumia. */
html[data-tema="claro"] .dex:not(.tenho) { filter: grayscale(1); opacity: .55; }
html[data-tema="claro"] .dex:not(.tenho):hover { filter: grayscale(.3); opacity: .9; }
/* O quadrado da marca é creme e some no fundo claro: ganha contorno (usado
   pelo <symbol id="marca-holosafe"> do index.html). */
html[data-tema="claro"] { --marca-contorno: rgba(26, 18, 38, .3); }
@media (max-width: 560px) {
  html[data-tema="claro"] .abas { background: rgba(255, 255, 255, .88); }
}

/* ---------- Lateral do computador ---------- */
.lateral { display: none; }
@media (min-width: 960px) {
  body.no-app { padding-left: 252px; }
  body.no-app .lateral {
    display: flex; flex-direction: column; gap: 2px;
    position: fixed; top: 0; bottom: 0; left: 0; width: 252px; box-sizing: border-box;
    padding: 20px 14px 16px; overflow-y: auto; z-index: 35;
    background: color-mix(in srgb, var(--tinta) 80%, transparent); border-right: 1px solid var(--borda);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  /* Com a lateral, a marca e a fileira de abas do topo seriam repetição. */
  body.no-app #tela-colecao .abas { display: none; }
  body.no-app #tela-colecao .topo-linha .marca { display: none; }
  body.no-app #tela-colecao .topo-linha { justify-content: flex-end; }
}
.lateral-marca { padding: 4px 10px 16px; }
.lateral-marca .marca-desenho { height: 26px; }
.lateral .grupo { margin: 14px 12px 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-fraco); font-weight: 700; }
.lateral .item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: 12px; border: 0; background: transparent;
  color: var(--texto-fraco); font: 600 14px var(--sistema); text-align: left; cursor: pointer;
  transition: background var(--rapido), color var(--rapido);
}
.lateral .item svg { width: 18px; height: 18px; flex: none; }
.lateral .item:hover { background: rgba(255, 255, 255, .05); color: var(--texto); }
.lateral .item.ativa { background: color-mix(in srgb, var(--texto) 9%, transparent); color: var(--texto); }
.lateral .item.usuario { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--borda); border-radius: 0; }
.lateral .usuario-texto { display: flex; flex-direction: column; min-width: 0; }
.lateral .usuario-texto strong { font-size: 13px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral .usuario-texto small { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca-set { width: 100%; margin: 6px 0 10px; }
#detalhe-conteudo > .barra-progresso { margin: 0 0 12px; }

/* Selos de variante embaixo de cada carta, aceso o que você tem. */
.variantes { display: flex; gap: 4px; margin-top: 4px; }
.var {
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto-fraco); font-size: 10px; font-weight: 800;
}
.var.tenho { background: var(--neon); border-color: transparent; color: var(--no-neon); }
.selo-variante {
  position: absolute; bottom: 5px; left: 5px;
  padding: 2px 6px; border-radius: 999px;
  background: rgba(0, 0, 0, .7); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1.2;
}
/* Com o "×2" no canto esquerdo, o selo de variante vai para o direito em vez
   de cair por cima dele. */
.selo-copias ~ .selo-variante { left: auto; right: 6px; bottom: 6px; }

/* A grade respeita colunas, linhas e a posição de cada bloco, então a página
   aparece aqui como foi montada no app. */
.grade-pagina {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  background: #000;
  border: 1px solid var(--borda);
}
.grade-pagina.clara { background: #EFEFEF; }
/* A página é preta ou clara nos dois temas: o texto dos bolsos segue a
   página, não o tema do site (senão o cinza do claro some no preto). */
html[data-tema="claro"] .grade-pagina:not(.clara) { --texto-fraco: #B3A9C4; --neon-claro: var(--neon); }
.grade-pagina.clara { --texto-fraco: #5E5470; --neon-claro: var(--neon-escuro); }

.bolso {
  aspect-ratio: 63 / 88;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--texto-fraco);
  overflow: hidden;
}
.grade-pagina.clara .bolso {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.15);
}
.bolso.ocupado { border-style: solid; border-color: transparent; }
.bolso.clicavel { cursor: grab; }

/* ---------- Arrastar para trocar de bolso ---------- */

/* Enquanto arrasta, o dedo move o bloco em vez de rolar a página. */
.grade-pagina.arrastando { touch-action: none; }
.grade-pagina.arrastando .bolso { transition: transform 0.12s, outline-color 0.12s; }

.bolso.saindo { opacity: 0.25; }

.bolso.alvo {
  outline: 3px solid var(--neon);
  outline-offset: -2px;
  transform: scale(1.06);
}
.bolso.invalido {
  outline: 3px solid var(--perigo);
  outline-offset: -2px;
}

.bolso.fantasma {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  border-radius: 6px;
  transform: scale(1.08) rotate(-2deg);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
  opacity: 0.95;
}

/* Sem seleção de texto nem menu de imagem atrapalhando o arrasto. */
.grade-pagina .bolso, .grade-pagina img {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.bolso img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bolso.arte { color: #fff; font-weight: 700; text-align: center; padding: 4px; }

.linha-deck {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 14px;
}
/* ---------- Pokédex ---------- */

.barra-progresso {
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 18px;
}
.barra-progresso div {
  height: 100%;
  border-radius: 99px;
  background: var(--neon);
}
.barra-progresso.fina { height: 5px; margin: 5px 0 0; }

.grade-dex {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}
.dex {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 4px;
  border-radius: 11px;
  /* Sem a carta, a espécie fica em cinza claro, só o desenho (22/10/2026,
     o mesmo visual da página do set): o número e o nome seguem legíveis. */
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
}
.dex:not(.tenho) img { filter: grayscale(1) contrast(.6) brightness(1.5); }
.dex:not(.tenho) .dex-nome { color: var(--texto-fraco); }
html[data-tema="claro"] .dex:not(.tenho) { background: #fff; border-color: rgba(0, 0, 0, .1); }
html[data-tema="claro"] .dex:not(.tenho) img { filter: grayscale(1) contrast(.6) brightness(1.15); }
.dex.tenho {
  filter: none;
  opacity: 1;
  border-color: var(--cor-tipo);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor-tipo) 22%, transparent),
                              var(--superficie));
  cursor: pointer;
}
.dex { transition: transform var(--rapido) var(--curva); }
@media (hover: hover) and (pointer: fine) { .dex.tenho:hover { transform: translateY(-3px) scale(1.04); } }
.dex.tenho:active { transform: scale(0.96); }
/* Espécie que falta acende ao apontar: dá para reconhecer sem clicar. */
@media (hover: hover) and (pointer: fine) { .dex:not(.tenho):hover img { filter: none; opacity: 1; } }

.dex img {
  width: 52px; height: 52px;
  object-fit: contain;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity var(--normal) var(--curva), filter var(--normal) var(--curva);
}
.dex img.pronta { opacity: 1; }
.dex:not(.tenho) img.pronta { opacity: .7; }
@media (hover: hover) and (pointer: fine) { .dex:not(.tenho):hover img.pronta { opacity: 1; } }
.dex-num { font-size: 10px; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }
.dex-nome {
  font-size: 11px;
  font-weight: 600;
  color: var(--texto);
  text-align: center;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ---------- Por set ---------- */

.logo-set {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}
.logo-set img { max-width: 30px; max-height: 30px; }

/* A carta que falta fica em preto e branco (pedido do Cestari no grupo,
   27/09/2026: "fica mais fácil de ver na hora que tá procurando"), mas
   quase sem transparência, para continuar legível: é ela que a pessoa
   está procurando. Colorida = já é sua. */
/* Desde 22/10/2026 (o Enzo achou bonito assim) o cinza é CLARO e suave,
   como uma impressão apagada, e só na arte: o texto embaixo segue legível. */
.carta.falta .carta-imagem img { filter: grayscale(1) contrast(.6) brightness(1.18); opacity: .9; transition: opacity var(--normal), filter var(--normal); }
/* Só com mouse: no toque o hover grudava e a carta que falta ficava colorida, como se já fosse sua. */
@media (hover: hover) and (pointer: fine) { .carta.falta:hover .carta-imagem img { opacity: 1; filter: none; } }

/* A grade do set: cada carta num cartão de borda leve, com o código e a
   raridade por extenso em cima do nome ("039/182 · Rara Dupla"). */
.parede.set-grade .carta {
  padding: 8px 8px 10px; border-radius: 14px;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08);
}
.parede.set-grade .carta img { border-radius: 8px; }
.parede.set-grade .carta-codigo {
  margin: 9px 0 2px; font: 700 13px/1.25 var(--titulo); color: var(--texto);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.parede.set-grade .carta-nome { margin: 0; font-size: 13px; font-weight: 600; color: var(--texto-fraco); }
html[data-tema="claro"] .parede.set-grade .carta { background: #fff; border-color: rgba(0, 0, 0, .1); }

.selo-tenho {
  position: absolute;
  top: 5px; left: 5px;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--verde);
  color: var(--no-verde);
  font-size: 13px;
  font-weight: 800;
}

/* Esqueleto: a forma do resultado enquanto a base responde. */
.carta.esqueleto { pointer-events: none; }
.carta.esqueleto .carta-imagem {
  aspect-ratio: 63 / 88;
  border-radius: 10px;
  background: linear-gradient(100deg, var(--superficie) 30%,
              rgba(255, 255, 255, 0.07) 50%, var(--superficie) 70%);
  background-size: 220% 100%;
  animation: varrer 1.3s linear infinite;
}
.mais.no-canto { position: absolute; right: 5px; bottom: 5px; width: 28px; height: 28px; font-size: 16px; }
/* No dedo, 28 px é pouco para acertar. */
@media (hover: none) { .mais.no-canto { width: 36px; height: 36px; font-size: 19px; } }

/* ---------- Guia ---------- */

.principio {
  display: flex;
  gap: 13px;
  padding: 14px;
  border-radius: 14px;
  background: var(--superficie);
  border: 1px solid var(--borda);
}
.principio .marca { width: 6px; border-radius: 99px; flex: none; }
.principio strong { display: block; margin-bottom: 3px; }
.principio p { margin: 0; font-size: 14px; color: var(--texto-fraco); line-height: 1.45; }

.passos {
  padding: 15px;
  border-radius: 14px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.passo { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.passo .numero {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--neon);
  color: var(--no-neon);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
#tela-guia h2 { margin: 0 0 2px; font-size: 21px; }

/* ---------- Criar e editar ---------- */

.primario.criar { align-self: flex-start; margin-bottom: 4px; }

.barra-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.barra-acoes .perigo { border-color: rgba(255, 107, 107, 0.45); color: var(--perigo); }
/* As ações em ícone (17/10/2026): a dica aparece ao passar o mouse, no foco
   do teclado e, no toque, segurando o dedo (.mostrar-dica). */
:is(.barra-acoes, .tema-linha) .acao-icone { position: relative; width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border-radius: 12px; }
:is(.barra-acoes, .tema-linha) .acao-icone svg { width: 21px; height: 21px; }
/* O "Mais" (js/acoes.js): a lista abre sob o botão, encostada na direita
   dele, ou na esquerda quando o botão está perto da borda esquerda. */
.mais-acoes { position: relative; }
.mais-acoes .acao-icone[aria-expanded="true"] { border-color: var(--neon); color: var(--neon-claro); }
.mais-acoes .acao-icone[aria-expanded="true"]::after { display: none !important; }
.menu-acoes {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 220px; padding: 6px;
  display: flex; flex-direction: column; border-radius: 14px;
  background: var(--superficie); border: 1px solid var(--borda); box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  transform-origin: top right; animation: menu-abre .14s var(--curva, ease-out);
}
.menu-acoes.pela-esquerda { right: auto; left: 0; transform-origin: top left; }
.menu-acoes[hidden] { display: none; }
@keyframes menu-abre { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
.menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px;
  background: none; color: var(--texto); font: 500 15px/1.2 var(--sistema); text-align: left; cursor: pointer;
}
.menu-item svg { flex: none; width: 20px; height: 20px; color: var(--texto-fraco); }
.menu-item:is(:hover, :focus-visible) { background: rgba(127, 127, 127, .14); outline: none; }
.menu-item.ativo, .menu-item.ativo svg { color: var(--neon-claro); }
.menu-item.perigo { position: relative; margin-top: 7px; color: var(--perigo); }
.menu-item.perigo svg { color: var(--perigo); }
.menu-item.perigo::before { content: ''; position: absolute; top: -4px; left: 10px; right: 10px; height: 1px; background: var(--borda); }
.barra-acoes .acao-icone.ativo { border-color: var(--neon); color: var(--neon-claro); }
.acao-icone[data-dica]::after {
  content: attr(data-dica); position: absolute; top: calc(100% + 8px); left: 50%; z-index: 30; display: none;
  width: max-content; max-width: 210px; padding: 6px 10px; border-radius: 8px;
  background: var(--superficie); border: 1px solid var(--borda); box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
  color: var(--texto); font: 500 12px/1.35 var(--sistema); text-align: left; white-space: normal;
  opacity: 0; transform: translate(-50%, -4px); pointer-events: none; transition: opacity .12s ease-out, transform .12s ease-out;
}
/* A dica escondida fica fora do leiaute (19/10/2026: com `opacity: 0` ela
   ainda ocupava espaço, e a do ícone perto da borda alargava a página no
   celular). Ela aparece no hover, no foco e segurando o dedo. */
.acao-icone[data-dica]:focus-visible::after, .acao-icone.mostrar-dica::after { display: block; opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) { .acao-icone[data-dica]:hover::after { display: block; opacity: 1; transform: translate(-50%, 0); } }
/* Perto da borda da tela a dica encosta no ícone (o lado vem de js/acoes.js,
   pela posição na tela, que muda quando a barra quebra em duas linhas). */
.acao-icone[data-lado="esq"]::after { left: 0; }
.acao-icone[data-lado="dir"]::after { left: auto; right: 0; }
.acao-icone[data-lado]:is(:focus-visible, .mostrar-dica)::after { transform: none; }
@media (hover: hover) { .acao-icone[data-lado]:hover::after { transform: none; } }
@media (max-width: 420px) {
  .barra-acoes:has(.acao-icone) { gap: 5px; }
  :is(.barra-acoes, .tema-linha) .acao-icone { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .acao-icone[data-dica]::after { transition: none; } .menu-acoes { animation: none; } }

.campo-dialogo {
  width: 100%;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid var(--borda);
  background: var(--tinta);
  color: var(--texto);
  font-size: 16px;
  margin-bottom: 4px;
}

#dialogo .temas { margin-bottom: 8px; }
#dialogo .tema { width: 28px; height: 28px; }

/* Escolher carta para o bolso: carta grande, nome e set embaixo. O seletor
   leva .dialogo-botoes porque o estilo dos botões do diálogo (padding e
   fundo) vencia o .escolha e a carta ficava miúda num quadrado grande. */
#dialogo.escolher { width: min(940px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
/* Um scroll só (01/11/2026, Yumi: "vem o menu com 2 scrolls", "o segundo
   scroll desce até certo ponto, aí pra seguir tem que descer o primeiro"):
   o diálogo aberto é uma coluna; a grade de cartas é a única parte que
   rola e ocupa o que sobra da altura. Se o cabeçalho (busca, sugestões,
   energias, filtros) não couber num celular baixo, o diálogo rola como
   reserva, mas a grade nunca fica menor que 140px. */
#dialogo.escolher[open] { display: flex; flex-direction: column; overflow-y: auto; }
#dialogo.escolher .dialogo-botoes { flex: 1; min-height: 0; }
#dialogo.escolher .escolher-caixa { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#dialogo.escolher .escolher-caixa > * { flex: none; }   /* as fileiras não encolhem: a caixa rola */
#dialogo.escolher .escolher-cartas:not(.deck-energias) { max-height: none; overflow: visible; }
/* A folga para a barra de rolagem do Mac (padding 14px e margem -14px, mais
   abaixo) não vale aqui: dentro da caixa que rola ela sobrava 14px de lado. */
#dialogo.escolher .escolher-cartas { padding-right: 2px; margin-right: 0; }
/* A busca fica presa no topo enquanto a lista rola. */
#dialogo.escolher .escolher-busca { position: sticky; top: 0; z-index: 1; flex: none; }
.escolher-caixa { display: flex; flex-direction: column; gap: 10px; }
.escolher-busca {
  height: 44px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto);
  font-size: 16px;
}
.escolher-nada { margin: 0; }
.escolher-cartas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 14px 10px;
  max-height: 56dvh;
  overflow-y: auto;
  margin-bottom: 10px;
  padding: 2px;
}
@media (min-width: 720px) {
  .escolher-cartas { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); max-height: 62dvh; }
}
.dialogo-botoes .escolha {
  padding: 0;
  border: 0;
  background: none;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  font-weight: 400;
  min-width: 0;
}
.escolha[hidden] { display: none; }
.escolha img {
  flex: none;              /* sem isso a imagem ainda sem carregar encolhe */
  width: 100%;
  aspect-ratio: 63 / 88;
  object-fit: cover;
  border-radius: 7px;
  display: block;
}
.escolha-nome { font-size: 13px; font-weight: 600; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.escolha-set { font-size: 11px; color: var(--texto-fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.escolha:hover img, .escolha:focus-visible img { outline: 2px solid var(--neon); outline-offset: 1px; }
/* Já está neste binder: continua escolhível (pode repetir), mas apagada. */
.escolha.no-binder img { opacity: .35; }
.escolha.no-binder .escolha-nome { color: var(--texto-fraco); }

/* Bolso livre convida a receber carta, em vez de ser só um buraco. */
.bolso.livre {
  cursor: pointer;
  font-size: 22px;
  color: var(--texto-fraco);
  transition: background var(--rapido), color var(--rapido), border-color var(--rapido);
}
.bolso.livre:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--neon);
  color: var(--neon-claro);
}

.tirar-do-bolso {
  position: absolute;
  top: 4px; right: 4px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--rapido);
}
.bolso.ocupado { position: relative; }
.bolso.ocupado:hover .tirar-do-bolso,
.bolso.ocupado:focus-within .tirar-do-bolso { opacity: 1; }
/* No toque não existe "apontar". Carta e bolso que falta saem pelo toque
   nelas (detalhe com "Tirar deste bolso", diálogo com "Tirar do binder"):
   nove × pretos por página tampavam as cartas. O × fica só onde não há
   outro caminho (carta que saiu da coleção, bloco de arte). */
@media (pointer: coarse) {
  .tirar-do-bolso { opacity: 0.85; }
  .bolso.clicavel .tirar-do-bolso { display: none; }
}

.qtd-controles { display: flex; gap: 5px; }
.qtd-controles button {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto);
  font-size: 15px;
  line-height: 1;
}
.qtd-controles button:hover { border-color: var(--neon); }

.linha-deck { grid-template-columns: 32px minmax(0, 1fr) auto auto auto; }
.linha-deck .qtd { color: var(--neon-claro); font-weight: 700; }
.linha-deck .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-deck .set { color: var(--texto-fraco); font-size: 12px; }
.linha-deck .preco { color: var(--texto-fraco); font-size: 12px; }

.campo-com-botao { display: flex; gap: 6px; align-items: center; flex: 1; justify-content: flex-end; }
.campo-com-botao input { flex: 1; min-width: 0; text-overflow: ellipsis; }
.campo-com-botao .primario.compacto { flex: none; padding: 7px 12px; font-size: 13px; }
.campo-com-botao .primario.confirmado { background: var(--verde); color: var(--no-verde); }

.detalhe-campo select,
.detalhe-campo input {
  flex: 1;
  max-width: 190px;
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid var(--borda);
  background: var(--tinta);
  color: var(--texto);
  font-size: 13px;
}

/* ---------- Diálogo ---------- */

#dialogo {
  width: min(360px, calc(100vw - 36px));
  padding: 20px;
  border: 1px solid var(--borda);
  border-radius: 16px;
  background: var(--superficie);
  color: var(--texto);
}
#dialogo::backdrop { background: rgba(0, 0, 0, 0.6); }
#dialogo h3 { margin: 0 0 6px; font-size: 17px; }
#dialogo p { margin: 0 0 16px; font-size: 14px; color: var(--texto-fraco); }
#dialogo-texto:empty { display: none; }
#dialogo h3:has(+ #dialogo-texto:empty) { margin-bottom: 14px; }

.dialogo-botoes { display: flex; flex-direction: column; gap: 8px; }
.dialogo-botoes button {
  padding: 12px;
  border-radius: 11px;
  border: 1px solid var(--borda);
  background: var(--tinta);
  color: var(--texto);
  font-weight: 600;
}
.dialogo-botoes button.perigo { color: var(--perigo); }
.dialogo-botoes button.cancelar { background: transparent; border-color: transparent; color: var(--texto-fraco); }
.dialogo-botoes button.cancelar:hover { color: var(--texto); }

/* ---------- Sinais ---------- */

/* O aviso vem antes de tudo e não se esconde: a pessoa precisa saber o que
   este número é e o que ele não é antes de olhar para ele. */
.aviso-honesto {
  margin: 0 0 14px;
  padding: 11px 13px;
  border-radius: 11px;
  background: rgba(255, 159, 67, 0.1);
  border: 1px solid rgba(255, 159, 67, 0.28);
  color: var(--laranja);
  font-size: 13px;
  line-height: 1.5;
}

.sinal {
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sinal-topo {
  display: flex;
  align-items: center;
  gap: 11px;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.sinal-topo img { width: 42px; border-radius: 5px; flex: none; }
.sinal-cabeca { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.sinal-cabeca strong { font-size: 15px; }

.variacao {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.variacao.sobe { color: var(--verde); }
.variacao.desce { color: var(--laranja); }

.sinal-conta {
  margin: 0;
  font-size: 13px;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.sinal-conta.fraco { color: var(--texto-fraco); }

.fato {
  margin: 0;
  padding-left: 13px;
  border-left: 3px solid var(--borda);
  font-size: 13px;
  line-height: 1.45;
  color: var(--texto-fraco);
}
.fato.bom { border-left-color: var(--verde); }
.fato.atencao { border-left-color: var(--laranja); }

.sinal { position: relative; }
.sair-da-lista {
  position: absolute;
  top: 8px; right: 8px;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--borda);
  background: var(--tinta);
  color: var(--texto-fraco);
  font-size: 14px;
  line-height: 1;
}
.sair-da-lista:hover { color: var(--perigo); border-color: var(--perigo); }

/* O olho fica ao lado do +, no canto da arte. */
.observar.no-canto {
  position: absolute;
  right: 5px;
  bottom: 39px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  font-size: 13px;
  line-height: 1;
  filter: grayscale(1);
  opacity: 0.75;
}
.observar.no-canto:hover { opacity: 1; }
.observar.no-canto.ativo {
  filter: none;
  opacity: 1;
  background: var(--neon);
}

/* ---------- Celular ----------
   O cabeçalho inteiro era do tamanho de computador: com valor, gráfico,
   três cartões de estatística e dois filtros empilhados, era preciso rolar
   mais de uma tela para ver a primeira carta. Aqui tudo encolhe para o
   conteúdo aparecer logo. */
@media (max-width: 560px) {
  .tela { padding-top: calc(14px + env(safe-area-inset-top)); }

  .topo-linha { margin-bottom: 12px; gap: 8px; flex-wrap: nowrap; }
  .topo-acoes { gap: 6px; margin-left: auto; }
  /* Com o seletor de idioma, a marca inteira não cabia ao lado das ações e
     ficava por baixo do "+ Adicionar": no celular fica só o desenho. */
  .topo-linha .marca.pequena { flex: 0 0 auto; width: 26px; overflow: hidden; }
  .topo-acoes button { white-space: nowrap; }
  .topo-acoes .compacto { padding: 8px 11px; font-size: 13px; }
  /* O nome já aparece na saudação logo abaixo; repetir só rouba espaço. */
  .estado { display: none; }
  .marca.pequena { font-size: 20px; }

  .valor { font-size: 34px; }
  .detalhe { font-size: 13px; margin-bottom: 12px; }

  .grafico-caixa { padding: 10px 12px; margin-bottom: 12px; }
  #grafico svg { height: 78px; }
  .grafico-topo { font-size: 13px; margin-bottom: 4px; }

  /* Três em linha, curtos: o terceiro cartão sozinho numa fileira era
     desperdício de meia tela. */
  .estatisticas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
  .estat { --estat-x: 9px; --estat-y: 7px; border-radius: 10px; }
  .estat-rotulo { font-size: 10px; line-height: 1.2; }
  .estat-valor { font-size: 14px; }

  .abas { margin-bottom: 12px; }
  .aba { padding: 8px 13px; font-size: 13px; }
  .filtros { gap: 8px; margin-bottom: 14px; }
  .chip { padding: 7px 12px; font-size: 13px; }
  .chip.fino { font-size: 12px; padding: 5px 9px; }

  .painel-caixa { padding: 14px; gap: 10px; }
  .barra-acoes { gap: 6px; }

  /* Os filtros de set rolam de lado em vez de empilhar. Com 7 sets já eram
     cinco linhas empurrando as cartas para fora da tela; com trinta, o
     conteúdo sumiria de vez. */
  /* O #filtro-set saiu da lista: virou <select>, e o padding de trilho
     deixava o texto dele 7 px abaixo do meio da caixa. */
  #ordenacao, #ordem-busca, #foco-descobrir, #teto-descobrir {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* 4 px de folga em volta, devolvidos pela margem negativa: o overflow
       recorta, e o anel de foco dos chips saía cortado em cima e embaixo. */
    padding: 4px 24px 4px 4px;
    margin: -4px;
    /* O esmaecido que diz "tem mais coisa para o lado". */
    -webkit-mask-image: var(--esmaecer-rolagem);
    mask-image: var(--esmaecer-rolagem);
  }
  #ordenacao::-webkit-scrollbar,
  #ordem-busca::-webkit-scrollbar, #foco-descobrir::-webkit-scrollbar,
  #teto-descobrir::-webkit-scrollbar { display: none; }
  #ordenacao .chip, #ordem-busca .chip,
  #foco-descobrir .chip, #teto-descobrir .chip { flex: none; }
}

/* ---------- Hierarquia e escala ----------
   Duas correções que valem para a folha inteira e por isso ficam no fim, onde
   vencem por ordem em vez de por especificidade inflada.

   O PROBLEMA DA HIERARQUIA: vinte blocos usavam exatamente a mesma borda roxa
   translúcida sobre o mesmo fundo. Estatística, recurso, binder, deck, set,
   sinal e painel tinham o mesmo peso, então o olho não sabia onde pousar e uma
   tela com oito blocos iguais cansava.

   A regra agora é: quem é CONTEÚDO ganha elevação (sombra), quem é CONTROLE
   perde a borda colorida e fica com um contorno neutro. Cor vira informação de
   novo, em vez de decoração espalhada.

   O PROBLEMA DA ESCALA: eram dezenove tamanhos de fonte diferentes, escolhidos
   caso a caso. Aqui os principais passam a sair das cinco medidas do topo. */

:root {
  /* Contorno de controle: some para o fundo em vez de disputar atenção. */
  --borda-fraca: rgba(255, 255, 255, 0.08);
  /* Um brilho de um pixel no topo, como luz batendo na quina, mais uma sombra
     larga e baixa. É o que separa o bloco do fundo sem precisar de borda. */
  --elevacao: none;   /* Grafite (31/10/2026): bloco plano, só a borda */
}

/* Conteúdo: levanta do fundo. */
.grafico-caixa, .cartao-lista, .recurso, .franqueza, .vitrine,
.sinal, .principio, .passos, .painel-caixa, .pagina {
  box-shadow: var(--elevacao);
}

/* Controle: contorno neutro. O estado ativo continua colorido, e agora ele é
   a única coisa colorida da fileira, que é o ponto. */
.chip, .aba, .estat, .secundario,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], textarea, select {
  border-color: var(--borda-fraca);
}

/* Escala. */
.aba, .chip { font-size: var(--t4); }
.carta-nome { font-size: var(--t4); }
.carta-preco { font-size: var(--t4); }
.dica, .estat-rotulo, .carta-set, .vitrine-aviso, .rodape { font-size: var(--t5); }
.estat-valor { font-size: var(--t4); }
.recurso p, .franqueza p { font-size: var(--t4); }
.capa-titulo, .franqueza h2 { font-size: var(--t2); }
.pagina-titulo strong, .cartao-info strong { font-size: var(--t3); }

/* ---------- Cabeçalho enxuto no celular ----------
   Medido antes: 415px de cabeçalho e a primeira carta só aos 451px, numa tela
   de 812. O peso não estava no gráfico (que nem aparece em coleção nova), e
   sim nos filtros (132px) e na fileira do topo (77px, quebrada em duas linhas).
   Aqui os três maiores encolhem. */

/* Ordenação e sets numa fileira só, que rola de lado inteira. */
.linha-de-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.linha-de-chips .chips { flex-wrap: wrap; }

@media (max-width: 560px) {
  /* A segunda palavra dos botões some: "Importar lista" vira "Importar". */
  .so-largo { display: none; }

  /* A saudação sai. O número grande com "4 cartas · 5 cópias" logo abaixo já
     diz o que é, e o nome da pessoa não vale 23px do topo da tela dela. */

  /* As duas fileiras de chips viram uma, que rola de lado como um trilho só. */
  .linha-de-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 24px 4px 4px;
    margin: -4px;
    -webkit-mask-image: var(--esmaecer-rolagem);
    mask-image: var(--esmaecer-rolagem);
    /* Sem isto o trilho esticava os chips à altura do seletor de coleção
       (com a margem dele, 47 px) e eles viravam pílulas gordas. */
    align-items: center;
  }
  .linha-de-chips .filtro-set-caixa { margin: 0; flex: none; }
  /* Largura fixa no trilho: o seletor tomava a largura do nome de coleção
     mais longo (380 px numa tela de 375) e nunca cabia inteiro. O nome
     escolhido termina em "…". */
  .linha-de-chips .filtro-set-caixa select { flex: none; width: 210px; }
  .linha-de-chips::-webkit-scrollbar { display: none; }
  /* Os filhos param de rolar sozinhos: quem rola agora é o trilho.
     `flex: none` é obrigatório: dentro de um pai `nowrap`, os dois grupos
     encolhiam até caber e cortavam os próprios chips no meio da palavra
     ("Maior pre…"). Sem encolher, eles mantêm a largura natural e o trilho
     rola. */
  /* Com o id na frente: a regra dos trilhos acima é por id (#ordenacao) e
     venceria uma classe, deixando um trilho dentro do outro. */
  #linha-de-chips .chips {
    flex: none;
    flex-wrap: nowrap;
    overflow: visible;
    padding: 0;
    margin: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .linha-de-chips .chip { flex: none; }

  .filtros { gap: 10px; margin-bottom: 12px; }
}

/* Nome brasileiro, embaixo do original. Só aparece quando difere, então não
   pode empurrar o preço: fica compacto e some por completo quando não há. */
.carta-nome-pt {
  margin: -2px 0 0;
  font-size: .72rem;
  color: var(--texto-fraco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Escanear pela câmera ---------- */

/* stretch: Escanear e Fotos ficam com a altura do campo (47 px), em vez de
   40 px centrados ao lado dele (varredura de 03/10/2026). */
.linha-busca { display: flex; gap: 8px; align-items: stretch; }
.linha-busca input { flex: 1; min-width: 0; }
/* O botão dos filtros do "Adicionar carta": figura só, com o ponto quando há filtro ligado. */
.filtros-busca { position: relative; flex: none; width: 48px; padding: 0; display: grid; place-items: center; border-radius: 12px; }
.filtros-busca svg { width: 22px; height: 22px; }
.filtros-busca.ativo { border-color: var(--neon); color: var(--neon-claro); }
.filtros-busca.com-filtro::after { content: ''; position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--neon); }
#painel-add .linha-busca .filtros-busca { flex: none; }
/* No celular o campo vai inteiro na primeira linha (tinha 49% da largura,
   espremido entre Escanear e Fotos) e os dois dividem a de baixo. */
@media (max-width: 560px) {
  #painel-add .linha-busca { flex-wrap: wrap; }
  #painel-add .linha-busca input { flex: 1 1 calc(100% - 56px); }
  #painel-add .linha-busca button { flex: 1 1 0; }
}
/* Computador: o painel de adicionar é uma galeria, e 560 px davam três
   cartas por linha com metade da janela vazia. */
@media (min-width: 900px) {
  #painel-add .painel-caixa { width: min(880px, calc(100% - 48px)); }
}
.busca-dica { padding: 28px 8px; text-align: center; }

/* Tela cheia: a câmera inteira para a carta, sem nada em volta. */
.scanner {
  position: fixed; inset: 0; z-index: 200;
  background: #000; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.scanner video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.scanner-aviso {
  position: relative; margin-top: 18px; padding: 8px 16px;
  border-radius: 999px; background: rgba(0, 0, 0, .65);
  color: #fff; font-size: 14px; font-weight: 600; text-align: center;
  max-width: 80vw;
}
.scanner-acoes {
  position: absolute; left: 0; right: 0; bottom: max(24px, env(safe-area-inset-bottom));
  display: flex; gap: 12px; justify-content: center; align-items: center;
}
.scanner-acoes .link { color: #fff; }


/* ---------- Filtro de coleção ---------- */

/* Uma linha, no lugar da parede de chips: com 35 coleções eram doze linhas
   de botões antes da primeira carta. */
.filtro-set-caixa {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0 4px;
}
.filtro-set-caixa > span {
  font-size: 13px; font-weight: 600;
  color: var(--texto-fraco);
  flex: none;
}
/* Cores dos tokens do tema: com branco translúcido fixo, no tema claro o
   rótulo sumia e a caixa do seletor não aparecia, só o texto e a seta soltos
   (varredura de 03/10/2026). A seta é a de todo <select>, no fim do arquivo. */
.filtro-set-caixa select {
  flex: 1; min-width: 0;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--borda-fraca);
  background-color: var(--superficie);
  color: inherit; font: inherit; font-size: 14px;
}


/* ==================== Casca (07/09/2026) ====================
   Início, barra inferior no celular e cartas no padrão da vitrine. */

/* Início */
.inicio { display: flex; flex-direction: column; gap: 22px; }
/* O leque das três cartas mais caras atrás do valor (31/10/2026). Fica
   atrás do texto, esmaece para a esquerda (o número continua legível) e,
   onde o navegador tem animação por rolagem, desce metade do que a página
   sobe e some: a página passa, o leque fica para trás. */
/* overflow-x clip: a terceira carta do leque, girada e deslocada para a
   direita, passava da tela no celular e a página inteira ganhava rolagem de
   lado (medidor de layout, 01/11/2026). Só no eixo x: o leque ainda desce
   pela animação de rolagem. */
.inicio-hero { position: relative; isolation: isolate; overflow-x: clip; }
/* O que vem depois do hero passa POR CIMA do leque quando ele desce. */
.inicio > :not(.inicio-hero) { position: relative; z-index: 1; }
.hero-leque {
  position: absolute; right: 4%; top: 0; z-index: -1; width: clamp(120px, 30%, 220px); aspect-ratio: 63 / 88;
  pointer-events: none; opacity: .8;
}
.hero-leque img {
  position: absolute; inset: 0; width: 100%; border-radius: 8px; transform-origin: 50% 115%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.hero-leque img:nth-child(1) { transform: rotate(-14deg) translateX(-28%); }
.hero-leque img:nth-child(2) { transform: rotate(0deg) translateY(-4%); }
.hero-leque img:nth-child(3) { transform: rotate(14deg) translateX(28%); }
/* Print do Enzo, 02/11/2026: no computador o clip acima cortava o Mewtwo ao
   meio. Girada 14° pela base e empurrada 28%, a terceira carta passa ~65% da
   largura do leque para fora da caixa; com right: 4% sobravam ~90px fora do
   hero. Onde há espaço, o leque recua esse tanto e a carta cabe inteira. */
@media (min-width: 700px) {
  .hero-leque { --leque-l: clamp(120px, 30%, 220px); width: var(--leque-l); right: calc(var(--leque-l) * .68); }
}
@supports (animation-timeline: scroll()) {
  .hero-leque { animation: leque-fica linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
  @keyframes leque-fica { 60% { opacity: 0; } to { translate: 0 30vh; scale: .9; opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .hero-leque { animation: none; } }
/* Entrada da capa (04/11/2026, referência: aberturas do rebrand.gallery).
   Só com .entrada, que o js põe UMA vez por sessão e tira depois: a capa é
   repintada a cada atualização de preço e a cada volta ao Início, e repetir
   a entrada aí seria barulho. O valor sobe por trás de uma máscara (como a
   Long.xyz); as cartas se abrem em leque a partir da do meio. Só transform,
   opacity e clip-path. Menos movimento: a regra geral do topo zera a duração. */
.inicio-hero.entrada #saudacao { animation: revela-mascara 480ms var(--curva-forte) backwards; }
.inicio-hero.entrada #valor-total { animation: revela-mascara 600ms var(--curva-forte) 60ms backwards; }
.inicio-hero.entrada #pilulas-inicio { animation: chega-capa 360ms var(--curva-forte) 240ms backwards; }
@keyframes revela-mascara { from { clip-path: inset(100% 0 0 0); transform: translateY(40%); } to { clip-path: inset(0); transform: none; } }
@keyframes chega-capa { from { opacity: 0; transform: translateY(6px); } }
.inicio-hero.entrada .hero-leque img { animation: leque-abre 620ms var(--curva-forte) 120ms backwards; }
.inicio-hero.entrada .hero-leque img:nth-child(2) { animation-name: leque-sobe; animation-delay: 40ms; }
/* Sem "to": cada carta termina no próprio giro (as regras :nth-child acima). */
@keyframes leque-abre { from { opacity: 0; transform: rotate(0deg) translateY(6%) scale(.92); } }
@keyframes leque-sobe { from { opacity: 0; transform: translateY(14%) scale(.94); } }
/* O cartão levanta um pouco no mouse (como os do ui8). */
@media (hover: hover) and (pointer: fine) {
  :is(.acao, .passo, .cartao-lista, .estat) { transition: transform var(--rapido) var(--curva), border-color var(--rapido) var(--curva); }
  :is(.acao, .passo, .estat):hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--texto) 22%, transparent); }
}
.inicio-hero .valor { font-size: clamp(56px, 15vw, 96px); margin: 6px 0 10px; }
.inicio-hero .rotulo { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-fraco); }
.pilulas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pilula { background: transparent; border: 1px solid var(--borda); border-radius: 999px;
          padding: 6px 12px; font-size: 13px; color: var(--texto-fraco); }
.pilula b { color: var(--texto); font-family: var(--titulo); font-weight: 600; }
.acoes-rapidas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .acoes-rapidas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.acao {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px;
  border-radius: 18px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto);
  font: 700 14px var(--sistema); cursor: pointer; text-align: left;
}
.acao:active { transform: scale(.97); }
/* O ícone do atalho: fundo neutro e a cor da categoria só no traço. */
.acao .ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-style: normal;
            font-size: 20px; background: color-mix(in srgb, var(--texto) 7%, transparent); }
.ic.roxo { color: var(--neon-claro); }
.ic.azul { color: #3fbfb8; }
.ic.laranja { color: #f0742a; }
.ic.indigo { color: #7a84f0; }
.ic.verde { color: #2fae5a; }
.ic.vermelho { color: #e0403f; }
.ic.rosa { color: #e0489f; }
.ic.cinza { color: #8d91a8; }
.acao .ic svg { width: 22px; height: 22px; }
.organizar .ic svg { width: 15px; height: 15px; }
/* Na tela "Mais" cada azulejo diz para que serve. */
.acao small { font-weight: 500; font-size: 12px; color: var(--texto-fraco); line-height: 1.3; }
.acao.ferramenta { gap: 8px; }
.tela-mais { display: flex; flex-direction: column; gap: 12px; }
.grupo-titulo { margin: 8px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-fraco); }
.organizar-link { align-self: center; margin-top: 8px; }
/* Escolher e ordenar os atalhos do Início (no diálogo). */
.organizar { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.organizar li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.organizar label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; flex: 1; min-width: 0; }
/* A caixinha pegava o `width: 100%` de todo input e disputava a linha com o
   ícone e o nome: coluna em zigue-zague, ícone espremido e nome quebrando
   palavra por palavra (varredura de 03/10/2026). */
.organizar input[type="checkbox"] { width: 18px; height: 18px; padding: 0; margin: 0; flex: none; accent-color: var(--neon); }
.organizar .ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--texto) 7%, transparent); font-style: normal; font-size: 14px; flex: none; }
.organizar .setas { display: flex; gap: 4px; }
.organizar .setas button { padding: 4px 8px; border-radius: 8px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); font-size: 11px; }
.organizar .setas button:disabled { opacity: .3; }
.passos { display: flex; flex-direction: column; gap: 10px; }
.passos h2 { margin: 0 0 4px; font-size: 20px; }
.passo {
  display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; text-align: left;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); cursor: pointer; font: inherit;
}
.passo i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
           background: var(--neon); color: var(--no-neon); font: 700 15px var(--titulo); font-style: normal; }
.passo div { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.passo strong { font-size: 15px; }
.passo span { font-size: 13px; color: var(--texto-fraco); }
.passo b { color: var(--texto-fraco); font-size: 18px; }
.bloco-inicio { display: flex; flex-direction: column; gap: 12px; }
.bloco-topo { display: flex; align-items: baseline; justify-content: space-between; }
.bloco-topo h2 { margin: 0; font-size: 20px; }
/* Com o leque recuado (02/11/2026) o "Organizar" cai em cima da terceira
   carta e o roxo some na arte. Uma pílula da cor da página dá o fundo. */
#organizar-atalhos { background: var(--tinta); border-radius: 999px; padding: 6px 12px; }
.colecao-resumo { margin: 0 0 2px; }

/* Cartas no padrão da vitrine */
.carta img { border-radius: 11px; box-shadow: 0 14px 30px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.05); }
.carta-nome { font-family: var(--titulo); font-weight: 600; margin-top: 9px; }
.carta-preco { color: var(--verde); font-weight: 700; font-family: var(--titulo); }
/* Dólar convertido: o "~" já diz que é estimativa; o número fica com o
   peso de valor, não com a cor da linha de set. O verde é do que você marcou. */
.carta-preco.aproximado { color: var(--texto); font-weight: 600; }
.carta-meta { margin: 2px 0 0; font-size: 12px; color: var(--texto-fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-rar {
  display: inline-block; vertical-align: 1px; margin-right: 6px; font: 700 11px/1 var(--titulo); letter-spacing: .04em;
  padding: 3px 5px; border-radius: 5px; color: var(--texto-fraco); background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.chip-rar.sir { background: linear-gradient(120deg, #f6d365, #fda085); color: #2a1200; box-shadow: none; }
.chip-rar.ir { background: rgba(177,75,255,.28); color: var(--neon-claro); box-shadow: none; }
.chip-rar.hr { background: linear-gradient(120deg, #a1c4fd, #c2e9fb, #fbc2eb); color: #1a0f2a; box-shadow: none; }
.chip-rar.ar { background: rgba(90, 215, 208, .22); color: #9ff1eb; box-shadow: none; }
.chip-rar.ur, .chip-rar.rr { background: rgba(255, 180, 107, .2); color: #ffd2a3; box-shadow: none; }
.chip-rar.sr { background: rgba(255, 154, 213, .22); color: #ffc0e6; box-shadow: none; }
.chip-rar.venda { background: rgba(63, 191, 98, .22); color: #9ff0b3; box-shadow: none; text-transform: none; letter-spacing: 0; }
.campo.campo-linha { flex-direction: row; align-items: center; gap: 10px; }

/* A busca como galeria, do jeito do Dex: só a arte, em grade larga; o "+"
   aparece no hover (no toque fica sempre), o "tenho" no canto, e os selos
   de variante sobre a arte quando o detalhe chega. */
.parede.galeria { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.parede.galeria .carta-imagem img { width: 100%; aspect-ratio: 63 / 88; object-fit: cover; display: block; }
@media (hover: hover) {
  .parede.galeria .mais.no-canto { opacity: 0; transition: opacity var(--rapido); }
  .parede.galeria .carta:hover .mais.no-canto,
  .parede.galeria .carta:focus-within .mais.no-canto { opacity: 1; }
}
@media (max-width: 420px) { .parede.galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Embaixo da arte, o set e o número; as variantes vêm logo depois (js). */
.parede.galeria .carta-set { margin-top: 7px; }
.busca-contagem { margin: 0 0 8px; font-size: 12px; color: var(--texto-fraco); }
.set-ordem { margin: 0 0 12px; }
.chip-rar.prevista { background: rgba(240, 179, 90, .2); color: #ffd28a; box-shadow: none; text-transform: none; letter-spacing: 0; font-size: 11px; }
.chip-rar.nova { background: rgba(63, 191, 98, .22); color: #9ff0b3; box-shadow: none; text-transform: none; letter-spacing: 0; font-size: 11px; }

/* Carta sem arte em base nenhuma: um quadro com o nome, no lugar do ícone quebrado. */
.sem-arte {
  aspect-ratio: 63 / 88; border-radius: 11px; display: grid; place-items: center; padding: 10px;
  background: var(--superficie); border: 1px dashed var(--borda); color: var(--texto-fraco);
  font-size: 13px; font-weight: 700; text-align: center;
}

/* A bandeira do idioma da carta, na linha da raridade. */
.bandeira { font-size: 13px; margin-right: 5px; vertical-align: -1px; }

/* Perfil da vitrine: as miniaturas de capa e destaques no painel. */
.vitrine-escolhas { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vitrine-escolhas .escolha-mini { position: relative; width: 44px; display: block; }
.vitrine-escolhas img { width: 44px; border-radius: 5px; display: block; }
.vitrine-escolhas .tirar-mini {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; padding: 0;
  border-radius: 50%; border: 0; background: #000; color: #fff; font-size: 12px; line-height: 18px;
}
#vitrine-bio { resize: vertical; min-height: 44px; font: inherit; }

/* O alvo "procuro" no resultado da busca, acima do olho e do "+". */
.procurar.no-canto {
  position: absolute; right: 5px; bottom: 73px; width: 28px; height: 28px;
  border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff;
  display: grid; place-items: center; opacity: .8; cursor: pointer;
}
.procurar.no-canto svg { width: 16px; height: 16px; }
.procurar.no-canto:hover { opacity: 1; }
.procurar.no-canto.ativo { background: #e0489f; opacity: 1; }
/* A lista de caça. */
/* Procuro em grade de cards (29/09/2026): várias na tela, tamanho bom de
   ver, sem o "pago até"; seleção para tirar várias reaproveita o modo da
   coleção (.parede.selecionando, .marca-selecao). */
.procuro-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.procuro-topo .dica { margin: 0; flex: 1 1 320px; }
.procuro-acoes { display: flex; gap: 6px; flex: none; align-items: center; flex-wrap: wrap; }
.procuro-acoes .chip.ativo { background: var(--texto); color: var(--tinta); border-color: transparent; }
.procuro-grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 12px; margin-top: 14px; }
.procuro-carta { cursor: default; }
.procuro-carta .carta-nome { font-size: 13px; }
#tela-procuro .selecao-barra { margin-top: 14px; }
.campo.campo-linha input { width: auto; accent-color: var(--neon); }

/* Ícones da barra */
.aba svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }

/* Barra inferior no celular, como a do app */
@media (max-width: 560px) {
  /* Pílula flutuante (01/11/2026, do reel do Skyward e da barra do iOS 26):
     solta do pé da tela, cantos redondos, e a aba ativa numa pastilha roxa.
     Antes era uma faixa colada embaixo com borda em cima. A altura é a
     mesma de antes: a barra de seleção e o aviso contam com ela. */
  .abas {
    position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40; margin: 0;
    padding: 6px;
    background: rgba(11, 7, 16, .82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--borda); border-radius: 999px; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .8);
    display: flex; flex-wrap: nowrap; gap: 4px;
  }
  /* As quatro abas dividem a largura por igual. */
  .abas > .aba { flex: 1 1 0; min-width: 0; }
  .abas > .aba {
    display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%;
    border: 0; background: transparent; padding: 6px 4px; font-size: 11px; border-radius: 999px; color: var(--texto-fraco);
  }
  .abas > .aba svg { width: 22px; height: 22px; margin: 0; }
  /* Rótulo numa linha só: em duas, a barra crescia 16 px ao entrar numa
     ferramenta e deixava de bater com a barra de seleção e o aviso, que
     contam com a altura fixa (varredura de 03/10/2026). */
  .abas > .aba > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .abas > .aba.ativa { background: var(--neon); color: var(--no-neon); }
  .tela { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}


/* ==================== Detalhe da carta (07/09/2026) ==================== */
.detalhe-carta { gap: 16px; }
@media (min-width: 560px) { .detalhe-carta { grid-template-columns: 230px minmax(0, 1fr); gap: 22px; } }
.detalhe-moldura { max-width: 260px; margin: 0 auto; width: 100%; }
/* A carta fica para trás quando o painel rola (31/10/2026, o mesmo
   movimento do leque do Início): desce metade, encolhe um pouco e some. No
   computador ela é fixa ao lado do texto, então ali não anima. */
@supports (animation-timeline: scroll()) {
  #painel-carta .detalhe-moldura { animation: carta-fica linear both; animation-timeline: scroll(nearest); animation-range: 0 60vh; transform-origin: 50% 0; }
  @keyframes carta-fica { 70% { opacity: 0; } to { translate: 0 30vh; scale: .9; opacity: 0; } }
  @media (min-width: 960px) { #painel-carta .detalhe-moldura { animation: none; } }
  @media (prefers-reduced-motion: reduce) { #painel-carta .detalhe-moldura { animation: none; } }
}
#painel-carta .detalhe-moldura ~ * { position: relative; z-index: 1; }
/* O binder (31/10/2026): a contracapa fica para trás quando sai pelo alto e
   as páginas passam por cima; cada página e cada carta da coleção entram
   esmaecendo quando chegam na tela. Tudo por rolagem, sem JS. */
@supports (animation-timeline: view()) {
  #detalhe-conteudo .lado-capa:not(.verso) .contracapa {
    animation: capa-fica linear both; animation-timeline: view(); animation-range: exit 0% exit 100%;
  }
  @keyframes capa-fica { to { translate: 0 45%; scale: .96; opacity: .25; } }
  #detalhe-conteudo .pagina { position: relative; z-index: 1; }
  /* Só o que é menor que a tela (a página do binder é mais alta e ficaria
     apagada antes de completar a entrada). */
  .parede .carta, .destaques > * {
    animation: chega linear both; animation-timeline: view(); animation-range: entry 0% entry 35%;
  }
  @keyframes chega { from { opacity: 0; translate: 0 12px; } }
  @media (prefers-reduced-motion: reduce) {
    #detalhe-conteudo .lado-capa:not(.verso) .contracapa, .parede .carta, .destaques > * { animation: none; }
  }
}
.detalhe-imagem { border-radius: 12px; box-shadow: 0 24px 50px -22px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.06); }
.detalhe-lado { gap: 12px; }
.d-secao { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px;
           background: var(--superficie); border: 1px solid var(--borda); }
.d-secao h3 { margin: 0 0 2px; font-size: 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.d-cabecalho { background: transparent; border: 0; padding: 0 2px; gap: 4px; }
.d-pt { margin: 0; color: var(--texto-fraco); font-size: 14px; }
.d-meta { margin: 0; color: var(--texto-fraco); font-size: 13px; }
.d-artista { margin: 0; color: var(--texto-fraco); font-size: 12px; }
.d-preco { margin: 0; font: 800 34px/1 var(--titulo); color: var(--verde); letter-spacing: -.02em; }
.d-preco.aprox { color: var(--texto); }
.d-origem { margin: 0 0 4px; color: var(--texto-fraco); font-size: 13px; }
.d-sem { margin: 0; color: var(--laranja); font-weight: 600; }
/* O balão do toque mora dentro do gráfico (antes ia parar no topo da página). */
.d-grafico { margin-top: 6px; position: relative; }
.d-grafico svg { width: 100%; height: 70px; display: block; }
.d-hp { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--texto-fraco); font-weight: 600; }
.d-marca { padding: 2px 7px; border-radius: 999px; color: var(--no-verde); font-size: 11px; }
.d-marca.legal { background: var(--verde); } .d-marca.fora { background: var(--laranja); }
.d-habilidade, .d-ataque { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.06); }
.d-nome { margin: 0; font-weight: 700; font-size: 14px; display: flex; justify-content: space-between; gap: 10px; }
.d-habilidade .d-nome { color: var(--neon-claro); }
.d-nome b { color: var(--neon-claro); font-family: var(--titulo); font-size: 15px; }
.d-custo { margin: 0; font-size: 12px; color: var(--texto-fraco); }
.d-texto { margin: 0; font-size: 13px; color: var(--texto-fraco); line-height: 1.4; }
.d-regra { margin: 0; font-size: 12px; color: var(--texto-fraco); font-style: italic; }
.d-loja { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px;
          text-decoration: none; color: var(--texto); background: rgba(255,255,255,.04); border: 1px solid var(--borda); }
.d-loja span { display: flex; flex-direction: column; }
.d-loja strong { font-size: 14px; } .d-loja small { font-size: 12px; color: var(--texto-fraco); }
.d-loja b { font-size: 16px; }
.d-loja.verde b { color: var(--verde); } .d-loja.azul b { color: var(--ciano); } .d-loja.roxo b { color: var(--neon-claro); }
.d-loja.laranja b { color: var(--laranja); } .d-loja.amarelo b { color: var(--amarelo); }
.d-adicionar { width: 100%; padding: 14px; font-size: 16px; }
/* A pergunta do Preço Médio da Liga, depois de abrir a Liga (02/11/2026). */
.pergunta-liga { margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--verde) 40%, var(--borda));
                 background: color-mix(in srgb, var(--verde) 6%, transparent); display: flex; flex-direction: column; gap: 6px; }
.pergunta-liga strong { font-size: 14px; }
.pergunta-liga .dica { margin: 0; }
.pergunta-liga-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.pergunta-liga-campo { display: flex; flex-direction: column; gap: 3px; flex: 1 1 90px; min-width: 0; font-size: 12px; color: var(--texto-fraco); }
.pergunta-liga-campo input { width: 100%; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--borda);
                             background: var(--tinta); color: var(--texto); font-size: 13px; }
.d-remover { margin-top: 4px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255,107,107,.35); background: transparent;
             color: var(--perigo); font-weight: 600; cursor: pointer; }
.d-remover:hover { background: rgba(255,107,107,.1); }
/* Tirar do bolso não apaga nada (a carta fica na coleção): mesma forma, sem o vermelho. */
.d-remover.d-neutro { border-color: var(--borda); color: var(--texto); }
.d-remover.d-topo { margin: 0 0 14px; }
/* A nota do "~" desce inteira no celular, em vez de quebrar no meio. */
.d-remover.d-neutro:hover { background: color-mix(in srgb, var(--neon) 10%, transparent); }


/* ==================== Versão online e app instalado (26/09/2026) ==================== */

/* Antes de o app.js assumir as telas, quem tem sessão (ou abriu pelo ícone)
   não vê a apresentação piscar. Ver o script no <head>. */
.pre-js.com-sessao #tela-inicio,
.pre-js.instalado #tela-inicio { display: none !important; }

/* ---------- Folhas por cima da barra de abas ----------
   A barra inferior do celular (z-index 40) ficava POR CIMA dos painéis
   (z-index 10): tampava o "Remover da coleção" no detalhe da carta, o "Colar
   uma lista inteira" no adicionar e o "Sair da conta". Folha aberta é a
   tela da vez, então cobre a barra, como no iOS. */
.painel { z-index: 60; }
/* E a página de trás para de rolar junto com o dedo. */
html:has(.painel:not([hidden])), html:has(.painel:not([hidden])) body { overflow: hidden; }
@media (max-width: 699px) {
  .painel-caixa { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

/* Dentro da folha só rola o miolo (resultado da busca, detalhe da carta). O
   resto não encolhe: a fileira de ordenação da busca, com o `overflow-x` do
   celular, podia encolher até 6px de altura e virava um risco no lugar dos
   chips. */
.painel-caixa > :not(.resultados):not(.detalhe-carta) { flex-shrink: 0; }
.painel-caixa > .detalhe-carta { flex: 1 1 auto; min-height: 0; }

/* ---------- Aviso rápido ---------- */
.aviso-rapido {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 90;
  transform: translateX(-50%);
  width: max-content; max-width: min(460px, calc(100vw - 32px));
  padding: 11px 16px; border-radius: 14px;
  background: #1F1830; color: var(--texto); border: 1px solid var(--borda);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .8);
  font-size: 14px; font-weight: 600; line-height: 1.35; text-align: center;
  animation: aviso-entra var(--normal) var(--curva);
  pointer-events: none;
}
.aviso-rapido.bom { border-color: rgba(63, 191, 98, .45); }
.aviso-rapido.bom::before { content: '✓ '; color: var(--verde); }
.aviso-rapido.ruim { border-color: rgba(255, 159, 67, .55); color: #FFD6B0; }
@keyframes aviso-entra { from { opacity: 0; transform: translate(-50%, 10px); } }
@media (max-width: 560px) {
  /* Acima da barra de abas. */
  .aviso-rapido { bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* ---------- Início: esperando a coleção ---------- */
.inicio.esperando .valor { opacity: .35; }
/* Pulsa só enquanto carrega: sem conexão não há o que esperar piscando. */
.inicio.carregando .valor { animation: pulsar 1.3s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .15; } }
.aviso-conexao {
  margin: 12px 0 0; padding: 11px 13px; border-radius: 12px;
  background: rgba(255, 159, 67, .1); border: 1px solid rgba(255, 159, 67, .3);
  color: var(--texto-fraco); font-size: 13px; line-height: 1.45;
}
.aviso-conexao .link { padding: 0 0 0 4px; font-weight: 700; }

/* ---------- Gráfico: períodos ---------- */
.faixas { margin: 2px 0 8px; gap: 6px; }
.faixas .chip { cursor: pointer; }

/* ---------- Destaques: grade de miniaturas ----------
   Numa fileira que rolava de lado, o celular mostrava duas das seis cartas e
   as outras quatro ficavam escondidas atrás de um gesto. Em grade aparecem
   as seis de uma vez. */
.destaques {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px;
}
@media (min-width: 700px) { .destaques { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.destaque {
  display: flex; flex-direction: column; gap: 7px; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.destaque img {
  width: 100%; aspect-ratio: 63 / 88; object-fit: cover; display: block; border-radius: 9px;
  background: var(--superficie);
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .05);
  opacity: 0; transition: opacity var(--normal) var(--curva), transform var(--rapido) var(--curva);
}
.destaque img.pronta { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .destaque:hover img.pronta { transform: translateY(-3px); } }
.destaque:active img.pronta { transform: scale(.97); }
.destaque-preco {
  font: 700 14px var(--titulo); color: var(--verde);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.destaque-preco.aproximado { color: var(--texto); font-weight: 600; }
.destaque-preco.sem { color: var(--laranja); font-size: 12px; }

/* ---------- Estatísticas preenchem a fileira ----------
   No celular a grade tinha três colunas fixas; com dois cartões sobrava uma
   coluna vazia e "Mega Darkrai ex" virava "Mega Darkr…". */
@media (max-width: 560px) {
  .estatisticas { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}

/* ---------- Bolso cuja carta saiu da coleção ---------- */
/* Fundo opaco: embaixo dele mora o bolso livre com o "+", que vazava. */
.bolso.orfao {
  border: 1px dashed rgba(255, 255, 255, .25); background: var(--superficie);
  color: var(--texto-fraco); font-size: 10px; line-height: 1.2; text-align: center; padding: 6px;
}
.grade-pagina.clara .bolso.orfao { border-color: rgba(0, 0, 0, .25); background: #E6E6E6; color: #555; }

/* ---------- Diálogo: botão principal e medida da página ----------
   `.dialogo-botoes button` pintava todo botão do diálogo igual, então o
   "Criar" com classe `primario` saía com cara de "Cancelar". */
.dialogo-botoes button.primario {
  background: var(--neon);
  border-color: transparent; color: var(--no-neon);
}
#dialogo .medidas-dialogo { flex-direction: row; gap: 8px; margin-bottom: 6px; }
#dialogo .medidas-dialogo .chip {
  flex: 1 1 0; padding: 9px 10px; border-radius: 999px; font-size: 13px;
  background: var(--tinta); border: 1px solid var(--borda-fraca); color: var(--texto);
}
#dialogo .medidas-dialogo .chip.ativo { background: var(--texto); border-color: transparent; color: var(--tinta); }

/* ---------- Instalar como app ---------- */
.instalar-capa {
  display: flex; align-items: center; gap: 12px; margin: 18px auto 0; max-width: 380px; width: 100%;
  padding: 12px 14px; border-radius: 14px; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px dashed var(--borda); color: var(--texto);
  font: inherit;
}
.instalar-capa svg { width: 28px; height: 28px; flex: none; color: var(--neon-claro); }
.instalar-capa span { display: flex; flex-direction: column; gap: 2px; }
.instalar-capa strong { font-size: 15px; }
.instalar-capa small { font-size: 12px; color: var(--texto-fraco); line-height: 1.35; }
.instalar-capa:hover { border-color: var(--neon); }

.cartao-instalar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px 10px 14px; border-radius: 18px;
  background: var(--superficie);
  border: 1px solid var(--borda);
}
.cartao-instalar-icone { flex: none; width: 24px; height: 24px; color: var(--neon-claro); }
.cartao-instalar strong { flex: 1; min-width: 0; font-family: var(--titulo); font-size: 15px; }
.cartao-instalar .primario { flex: none; }
.cartao-instalar-fechar {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 12px; background: none; color: var(--texto-fraco); cursor: pointer;
}
.cartao-instalar-fechar svg { width: 20px; height: 20px; }
.cartao-instalar-fechar:hover { color: var(--texto); }

.linha-instalar { width: 100%; margin-top: 4px; }

.dialogo-instalar {
  width: min(400px, calc(100vw - 32px)); padding: 20px; border-radius: 18px;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto);
}
.dialogo-instalar::backdrop { background: rgba(0, 0, 0, .6); }
.dialogo-instalar h3 { margin: 0 0 12px; font-size: 18px; }
.passos-instalar { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 10px; font-size: 14px; line-height: 1.45; }
.passos-instalar li::marker { color: var(--neon-claro); font-weight: 700; }
.dialogo-instalar .dica { margin: 0 0 14px; }
.dialogo-instalar .primario { width: 100%; }
.ic-inline { width: 17px; height: 17px; vertical-align: -3px; color: var(--neon-claro); }


/* ==================== Vitrine pública pelo site (27/09/2026) ==================== */

/* A linha da Conta que leva à vitrine: rótulo, estado e seta. */
.linha-conta {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
}
.linha-conta span { flex: 1; }
.linha-conta small { color: var(--texto-fraco); font-weight: 500; font-size: 13px; }
.linha-conta b { color: var(--texto-fraco); font-size: 18px; line-height: 1; }

.vitrine-no-ar {
  display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px;
  background: var(--superficie); border: 1px solid rgba(63, 191, 98, .35);
}
.vitrine-no-ar-topo { margin: 0; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.vitrine-no-ar-topo .dica { font-weight: 500; }
.ponto-verde {
  width: 9px; height: 9px; border-radius: 50%; background: var(--verde); flex: none;
  box-shadow: 0 0 0 4px rgba(63, 191, 98, .18);
}
.vitrine-link {
  color: var(--neon-claro); font-weight: 600; font-size: 15px; word-break: break-all; text-decoration: none;
}
.vitrine-no-ar .barra-acoes { margin: 0; }
.vitrine-no-ar .secundario.compacto { text-decoration: none; display: inline-flex; align-items: center; }
.vitrine-no-ar .dica { margin: 0; }

/* O endereço com o começo fixo na frente, como ele vai aparecer no link. */
.campo-endereco {
  display: flex; align-items: center; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--borda-fraca); background: var(--superficie);
}
.campo-endereco span {
  padding: 0 4px 0 12px; color: var(--texto-fraco); font-size: 14px; white-space: nowrap; flex: none;
}
.campo-endereco input { border: 0; border-radius: 0; background: transparent; padding-left: 2px; min-width: 0; }
.campo-endereco:focus-within { outline: 2px solid var(--neon-claro); outline-offset: 1px; }
.campo-endereco input:focus { outline: none; }

.link.perigo-link { color: var(--perigo); align-self: center; }

.pilula-vitrine { text-decoration: none; color: var(--verde); border-color: rgba(63, 191, 98, .4); }

/* O logo da expansão (mais largo que o antigo símbolo) cabe inteiro no quadro. */
.logo-set img { max-width: 42px; max-height: 32px; object-fit: contain; }

/* ---------- Esqueci a senha ---------- */
.link.esqueci { display: block; margin: 0 auto; color: var(--texto-fraco); font-size: 13px; }

/* ---------- Foto das cartas ---------- */

.foto-acoes-topo { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.fotos-lidas { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.foto-grupo { display: flex; flex-direction: column; gap: 8px; }
/* A foto pequena com as caixas: verde é carta achada, laranja é bloco sem
   forma de carta. A pessoa vê na hora o que o site enxergou. */
.foto-mapa { width: 100%; max-height: 200px; object-fit: contain; border-radius: 10px; background: #000; }
.foto-nota { margin: 0; font-size: 13px; color: var(--laranja); }
/* Recorte da foto ao lado da arte da base: é assim que se confere se acertou. */
.foto-carta {
  display: grid; grid-template-columns: 64px 64px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 8px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--borda);
}
.foto-recorte, .foto-arte { width: 64px; aspect-ratio: 63 / 88; border-radius: 6px; background: rgba(0, 0, 0, .35); overflow: hidden; }
.foto-recorte canvas, .foto-arte img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sem-arte-mini { display: grid; place-items: center; height: 100%; color: var(--texto-fraco); font-weight: 800; font-size: 20px; }
.foto-carta-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 13px; }
.foto-carta-info strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foto-estado { font-size: 12px; color: var(--texto-fraco); }
.foto-carta.ok .foto-estado { color: var(--verde); }
.foto-carta.conferir .foto-estado { color: var(--amarelo); }
.foto-carta.falhou .foto-estado { color: var(--laranja); }
.foto-carta.fora { opacity: .45; }
.foto-carta.feito { border-color: var(--verde); }
.foto-carta select, .foto-carta input { font-size: 13px; padding: 6px 8px; max-width: 100%; min-width: 0; }
.foto-carta-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.foto-carta-acoes .link { font-size: 13px; padding: 0; }
.foto-busca { display: flex; gap: 6px; }
.foto-busca input { flex: 1; }

/* ---------- Seleção múltipla na página do set ---------- */

.marca-selecao {
  position: absolute; top: 6px; left: 6px; z-index: 3;
  width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid #fff; background: rgba(0, 0, 0, .45);
  display: grid; place-items: center;
  color: transparent; font-size: 13px; font-weight: 800; line-height: 1;
}
.carta.selecionada .marca-selecao { background: var(--neon); border-color: var(--neon); color: var(--no-neon); }
/* O contorno segue o raio da caixa: sem o raio da arte (11 px), a moldura
   saía de canto reto e sobrava um triângulo de fundo em cada canto. */
.carta.selecionada .carta-imagem { outline: 3px solid var(--neon); outline-offset: -3px; border-radius: 11px; }
.parede.selecionando .carta.nao-selecionavel { opacity: .3; pointer-events: none; }
.parede.selecionando .mais { display: none; }
.parede.selecionando .carta.selecionavel { cursor: pointer; }
.selecao-barra {
  position: sticky; bottom: 12px; z-index: 5;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px; border-radius: 14px;
  background: var(--tinta); border: 1px solid var(--borda);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.selecao-barra .conta { font-weight: 700; margin-right: auto; font-size: 14px; }
.selecao-barra .link { font-size: 13px; }

/* Escolha de várias cartas da coleção (à venda): marca no canto, como a
   seleção da página do set. */
.escolha { position: relative; }
.escolha.marcada img { outline: 3px solid var(--neon); outline-offset: -3px; }
.escolha.marcada::after {
  content: '✓'; position: absolute; top: 6px; left: 6px;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--neon); color: var(--no-neon); font-size: 13px; font-weight: 800; line-height: 22px; text-align: center;
}
/* No deck a marca conta as cópias (×2, ×4). */
.escolha.marcada[data-conta]::after { content: '×' attr(data-conta); width: auto; min-width: 22px; padding: 0 6px; box-sizing: border-box; }
/* Os filtros do montador de deck e a marca do fim da grade (quando ela
   aparece na tela, vem a próxima leva de cartas). */
.deck-filtros { margin: 14px 0 2px; }
.deck-mais { height: 1px; grid-column: 1 / -1; }
.deck-carta-legenda .deck-versao { display: block; font-size: 11px; color: var(--texto-fraco); }
/* A fileira das energias básicas: cartas pequenas, rolando de lado. */
.deck-energias { display: grid; grid-auto-flow: column; grid-auto-columns: 84px; grid-template-columns: none; overflow-x: auto; padding-bottom: 4px; }

/* O link do Guia no topo da tela de Binders. */
.guia-link { align-self: flex-start; margin: 0 0 10px; }

/* ---------- Meta atual (Limitless), cartões como as expansões do Dex ---------- */
.meta { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.meta .pagina-titulo { margin-bottom: 0; }
.meta-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.meta-carta {
  display: grid; grid-template-columns: 28px 64px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  text-align: left; padding: 12px 14px; border-radius: 16px;
  background: var(--superficie); border: 1px solid var(--borda); color: inherit; cursor: pointer;
  transition: transform var(--rapido, .15s) var(--curva, ease), border-color var(--rapido, .15s);
}
@media (hover: hover) and (pointer: fine) { .meta-carta:hover { transform: translateY(-1px); border-color: var(--neon); } }
.meta-posicao { font-size: 18px; font-weight: 800; color: var(--texto-fraco); text-align: center; }
.meta-icones { display: flex; align-items: center; justify-content: center; gap: 0; height: 44px; }
.meta-icones img { width: 40px; height: 40px; object-fit: contain; margin-right: -10px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4)); }
.meta-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.meta-info strong { font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
.meta-linha { font-size: 12px; color: var(--texto-fraco); }
.meta-info .barra-progresso { margin: 2px 0 0; }
.meta-info .barra-progresso span { display: block; height: 100%; border-radius: 99px; background: var(--neon); }
.meta-carta .seta { color: var(--texto-fraco); font-size: 18px; }
.meta-corpo { max-height: 52dvh; }
.meta-linha-deck { display: grid; grid-template-columns: 28px 34px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.meta-linha-deck img { width: 28px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 3px; background: rgba(0, 0, 0, .3); }
.meta-linha-deck .tem { font-size: 11px; color: var(--verde); font-weight: 700; }
.meta-linha-deck.tenho .nome { color: var(--verde); }

/* ---------- Decks: seletor de vistas e torneios ---------- */
.decks-vistas { margin: 0 0 14px; }
.chip.com-icone { display: inline-flex; align-items: center; gap: 6px; }
.chip.com-icone svg { width: 15px; height: 15px; }
.decks-miolo { display: flex; flex-direction: column; }
.torneios { display: flex; flex-direction: column; gap: 10px; }
.torneios .pagina-titulo { margin-bottom: 0; }
.torneios-lista { display: flex; flex-direction: column; gap: 8px; }
/* O número de jogadores cabe na caixa: "2793" e "~5000" em 18 px passavam
   8 px dos dois lados do quadrado de 46 px (varredura de 03/10/2026). */
.torneio-jogadores { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; width: 60px; min-width: 60px; padding: 0 4px; box-sizing: border-box; }
.torneio-jogadores strong { font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; max-width: 100%; }
.torneio-jogadores small { font-size: 10px; opacity: .8; }
.torneio-corpo { max-height: 56dvh; display: flex; flex-direction: column; gap: 6px; }
.torneio-linha {
  display: grid; grid-template-columns: 34px 52px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  width: 100%; text-align: left; padding: 8px 10px; border-radius: 12px;
  background: var(--superficie); border: 1px solid var(--borda); color: inherit; font: inherit;
}
.torneio-linha.clicavel { cursor: pointer; }
.torneio-linha.clicavel:hover { border-color: var(--neon); }
.torneio-linha:disabled { opacity: .7; }
.torneio-posicao { font-weight: 800; color: var(--texto-fraco); text-align: center; }
.torneio-icones { display: flex; justify-content: center; }
.torneio-icones img { width: 32px; height: 32px; object-fit: contain; margin-right: -8px; }
.torneio-info { display: flex; flex-direction: column; min-width: 0; }
.torneio-info strong { font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; }
.torneio-info .dica { font-size: 12px; }
.torneio-record { font-size: 12px; font-weight: 700; color: var(--texto-fraco); white-space: nowrap; }

/* ---------- Decklist em grade, como no Limitless ---------- */
.decklist-vistas { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 4px; }
.decklist-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-bottom: 8px; }
.decklist-carta { position: relative; aspect-ratio: 63 / 88; border-radius: 8px; overflow: hidden; background: rgba(0, 0, 0, .3); }
.decklist-carta img { width: 100%; height: 100%; object-fit: cover; display: block; }
.decklist-carta .sem-arte { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; font-size: 12px; text-align: center; }
.decklist-carta.tenho { outline: 2px solid var(--verde); outline-offset: -2px; }
.decklist-carta .selo-tenho { position: absolute; top: 6px; left: 6px; }
/* O hexágono com a quantidade, no canto de baixo. */
.decklist-conta {
  position: absolute; right: 6px; bottom: 6px; width: 30px; height: 34px;
  display: grid; place-items: center; color: var(--no-neon); font-weight: 800; font-size: 15px;
  background: var(--neon); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
@media (max-width: 480px) { .decklist-grade { grid-template-columns: repeat(3, 1fr); } }
.torneios-fontes { margin-bottom: -4px; }
/* A fatia de uso, o número grande do cartão do meta. */
.meta-fatia { font-size: 22px; font-weight: 800; color: var(--neon-claro); white-space: nowrap; letter-spacing: -.02em; }
.meta-fontes { margin: 0; }
/* Nome completo, sempre: quebra a linha em vez de cortar com reticências
   (pedido de 29/09/2026). */
.meta-linha-deck .nome, .linha-deck .nome, .cartao-info strong { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* ---------- Deck seu: miniatura na lista e grade com cópias ---------- */
.linha-deck.com-arte { grid-template-columns: 30px 32px minmax(0, 1fr) auto auto auto; }
.linha-deck .deck-mini { width: 30px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 3px; background: rgba(0, 0, 0, .3); }
.deck-grade { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.deck-carta { display: flex; flex-direction: column; gap: 6px; }
.deck-carta-legenda .nome { display: block; font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
.deck-carta .qtd-controles { display: flex; justify-content: center; gap: 8px; }
@media (max-width: 480px) { .deck-grade { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Cópias separadas no detalhe ---------- */
.separar-copias { align-self: flex-start; font-size: 13px; padding: 0; margin: -4px 0 6px; }
.copias-irmas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; }
.copias-irmas .dica { width: 100%; }

/* ---------- Painel da carta com espaço no computador (29/09/2026) ----------
   "Muito apertado as coisas": numa janela de 1900 px o painel tinha 560 px,
   a coluna dos campos 330, o rótulo "À venda por" quebrava em três linhas e
   o campo de preço mostrava duas letras. A partir de 1000 px o painel da
   carta (e o de importar) alarga, a arte fica presa no alto enquanto o lado
   direito rola, e cada campo vira uma grade rótulo | controle. */
@media (min-width: 1000px) {
  #painel-carta .painel-caixa, #painel-import .painel-caixa {
    width: min(980px, calc(100% - 48px)); padding: 22px 28px; max-height: 90dvh;
  }
  #painel-carta .detalhe-carta { grid-template-columns: 320px minmax(0, 1fr); gap: 34px; }
  #painel-carta .detalhe-moldura { max-width: 320px; position: sticky; top: 0; align-self: start; }
  #painel-carta .detalhe-lado { gap: 14px; }
  #painel-carta .d-secao { padding: 18px 20px; gap: 10px; }
  #painel-carta .d-secao h3 { font-size: 16px; }
  #painel-carta .detalhe-linha { font-size: 15px; }
  #painel-carta .detalhe-copias { padding: 10px 14px; }
  #painel-carta .detalhe-campo {
    display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center;
    gap: 14px; font-size: 14px; padding-top: 8px;
  }
  #painel-carta .detalhe-campo select, #painel-carta .detalhe-campo input {
    max-width: none; width: 100%; padding: 9px 11px; font-size: 14px;
  }
  #painel-carta .campo-com-botao { width: 100%; }
  #painel-carta .separar-copias, #painel-carta .copias-irmas { font-size: 14px; }
}

/* ---------- Importar planilha (29/09/2026) ---------- */
#import-colar { display: flex; flex-direction: column; gap: 10px; }
.import-planilha { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--borda); }
.import-planilha .dica { margin: 0; }
.botao-arquivo { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; align-self: flex-start; }
#mapa-planilha { display: flex; flex-direction: column; gap: 10px; }
#mapa-planilha .dica { margin: 0; }
.planilha-arquivo { margin: 0; font-size: 14px; }
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); }
.tabela-planilha { border-collapse: collapse; width: 100%; font-size: 12px; }
.tabela-planilha th, .tabela-planilha td {
  padding: 6px 9px; text-align: left; white-space: nowrap; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.tabela-planilha thead select {
  font-size: 12px; padding: 5px 6px; border-radius: 8px; border: 1px solid var(--borda);
  background: var(--tinta); color: var(--texto); max-width: 170px;
}
.tabela-planilha .cabecalho-original th { color: var(--texto-fraco); font-weight: 500; }
.tabela-planilha td.ignorada { opacity: .4; }
.tabela-planilha .mais-linhas { color: var(--texto-fraco); font-style: italic; }
.linha-import.progresso { color: var(--texto); font-weight: 600; border-bottom: 0; }
.planilha-problemas .linha-import { white-space: normal; overflow-wrap: anywhere; }

/* ---------- Revisão da planilha antes de gravar (29/09/2026) ---------- */
.revisao { display: flex; flex-direction: column; gap: 8px; }
.revisao-resumo { margin: 0; font-size: 13px; color: var(--texto-fraco); }
.revisao-titulo { margin: 6px 0 0; font-size: 14px; }
.revisao-linha {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px;
  background: var(--superficie); border: 1px solid var(--borda); border-left-width: 3px;
}
.revisao-linha.conferir { border-left-color: var(--amarelo); }
.revisao-linha.falhou { border-left-color: var(--laranja); }
.revisao-linha.exata, .revisao-linha.escolhida { border-left-color: var(--verde); }
.revisao-linha.pulada { opacity: .55; }
.revisao-bruta { font-size: 12px; color: var(--texto-fraco); overflow-wrap: anywhere; }
.revisao-escolha { display: flex; gap: 10px; align-items: center; }
.revisao-arte { width: 40px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 4px; background: rgba(0, 0, 0, .3); flex: none; }
.revisao-texto { display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 0; }
.revisao-texto .dica { margin: 0; }
.revisao-motivo { font-size: 12px; color: var(--amarelo); }
.revisao-motivo.ok { color: var(--verde); }
.revisao-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.revisao-busca { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--borda); }
.revisao-campo { display: flex; gap: 6px; }
.revisao-campo input {
  flex: 1; min-width: 0; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--borda);
  background: var(--tinta); color: var(--texto); font-size: 14px;
}
.revisao-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.revisao-opcoes .dica, .revisao-opcoes .carregando { grid-column: 1 / -1; margin: 0; padding: 6px 0; }
.revisao-opcao {
  display: flex; flex-direction: column; gap: 3px; align-items: stretch; padding: 6px; border-radius: 10px;
  border: 1px solid var(--borda); background: var(--tinta); color: var(--texto); font-size: 11px;
  line-height: 1.2; text-align: left; cursor: pointer;
}
.revisao-opcao img { width: 100%; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 5px; background: rgba(0, 0, 0, .3); }
.revisao-opcao span { font-weight: 600; overflow-wrap: anywhere; }
.revisao-opcao small { color: var(--texto-fraco); overflow-wrap: anywhere; }
.revisao-opcao.atual { border-color: var(--neon); }
.revisao-opcao:hover { border-color: var(--neon-claro); }
.revisao-exatas { display: flex; flex-direction: column; gap: 8px; }
.revisao-exatas summary { cursor: pointer; font-size: 13px; color: var(--texto-fraco); }

/* ---------- Selecionar na Coleção: pôr à venda, tirar da venda, remover (29/09/2026) ---------- */
.colecao-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.colecao-topo .colecao-resumo { margin: 0; }
#alternar-selecao.ativo { background: var(--texto); color: var(--tinta); border-color: transparent; }
.parede.selecionando .remover { display: none; }
.parede.selecionando .carta button { pointer-events: none; }
#selecao-colecao .selecao-barra { margin-top: 12px; }
.selecao-barra .perigo-chip { color: var(--laranja); border-color: rgba(255, 159, 67, .45); }
.dialogo-valor { display: flex; gap: 6px; }
.dialogo-valor input {
  flex: 1; min-width: 0; padding: 12px; border-radius: 11px; border: 1px solid var(--borda);
  background: var(--tinta); color: var(--texto); font-size: 15px;
}
.dialogo-botoes .dialogo-valor button { flex: none; }

/* ---------- Preço de venda em relação ao mercado (29/09/2026) ---------- */
.venda-mercado { display: flex; flex-direction: column; gap: 6px; margin: -2px 0 6px; }
.venda-mercado .dica { margin: 0; font-size: 12px; }
.venda-mercado .dica.abaixo { color: var(--verde); }
.venda-mercado .dica.acima { color: var(--laranja); }
.venda-mercado .chips { gap: 6px; }
.venda-mercado .chip.fino { font-size: 12px; padding: 4px 9px; }

/* ---------- Busca tolerante (29/09/2026) ---------- */
.busca-corrigida { margin: -4px 0 10px; font-size: 13px; }
.busca-corrigida strong { color: var(--neon-claro); font-weight: 600; }

/* ---------- Quantas quero no Procuro (29/09/2026) ---------- */
.procuro-qtd { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.procuro-qtd .qtd-botao {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto); font-size: 15px; line-height: 1; padding: 0;
}
.procuro-qtd .qtd-botao:disabled { opacity: .35; }
.procuro-qtd .qtd-valor { font-size: 12px; color: var(--texto-fraco); min-width: 52px; text-align: center; }
.parede.selecionando .procuro-qtd { visibility: hidden; }

/* ---------- Busca aberta da tela Procuro: o "+" vira alvo (29/09/2026) ---------- */
.mais.procurar { background: rgba(10, 10, 12, .7); box-shadow: 0 0 0 1.5px var(--neon-claro); color: var(--neon-claro); font-size: 16px; }
.mais.procurar.ativo { background: var(--neon); color: var(--no-neon); box-shadow: none; }

/* ---------- Promo de pré-lançamento (29/09/2026) ---------- */
.d-carimbada { align-self: flex-start; font-size: 13px; padding: 4px 0; }

/* ---------- Arrastar arquivos para o site (29/09/2026) ---------- */
.solta-aqui {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; pointer-events: none;
  background: rgba(11, 7, 16, .84); backdrop-filter: blur(4px);
}
.solta-aqui > div {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 44px;
  border: 3px dashed var(--neon); border-radius: 22px; color: var(--texto); text-align: center;
}
.solta-aqui strong { font-size: 24px; }
.solta-aqui span { color: var(--texto-fraco); font-size: 14px; }

/* ---------- Conferência da foto: coleção ou à venda (29/09/2026) ---------- */
.fotos-lote {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; padding: 10px 12px;
  border-radius: 12px; background: var(--superficie); border: 1px solid var(--borda);
}
.fotos-lote-titulo { font-size: 14px; margin-right: 4px; }
.fotos-lote .dica { margin: 0; flex-basis: 100%; }
.foto-carta-acoes .destino { display: inline-flex; gap: 0; border: 1px solid var(--borda); border-radius: 999px; overflow: hidden; }
.foto-carta-acoes .destino .chip { border: 0; border-radius: 0; padding: 5px 10px; font-size: 12px; }
.foto-carta-acoes .destino .chip.ativo { background: var(--texto); color: var(--tinta); }
.foto-carta-acoes .destino .chip.venda-chip.ativo { background: var(--verde); color: var(--no-verde); }

/* ---------- Ajustes na lateral, cores nos dois temas, promos carimbadas (30/09/2026) ---------- */
.lateral-rodape { margin-top: auto; display: flex; align-items: center; gap: 4px; padding-top: 10px; border-top: 1px solid var(--borda); }
/* O rodapé (conta e engrenagem) fica preso ao pé da lateral: em janela com
   menos de ~705 px de altura ele saía da tela e a engrenagem só aparecia
   rolando a própria lateral (varredura de 03/10/2026). O -16 px cobre o
   padding de baixo da lateral; o fundo é o da lateral sobre o da página. */
.lateral-rodape {
  position: sticky; bottom: -16px; z-index: 1; margin-bottom: -16px; padding-bottom: 16px;
  background: color-mix(in srgb, rgb(11, 7, 16) 72%, var(--tinta));
}
html[data-tema="claro"] .lateral-rodape { background: color-mix(in srgb, #fff 80%, var(--tinta)); }
.lateral .lateral-rodape .item.usuario { margin-top: 0; padding-top: 9px; border-top: 0; border-radius: 12px; flex: 1; min-width: 0; }
.lateral .item.ajustes { width: 38px; height: 38px; padding: 0; justify-content: center; flex: none; }
/* 264 px: em 224 os chips de Tema e de Valor quebravam um a um, desalinhados.
   O teto de altura é para janela baixa, onde o topo saía da tela. */
.ajustes-balao {
  position: fixed; left: 14px; width: 264px; max-height: calc(100dvh - 84px); overflow-y: auto; z-index: 60; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px;
  background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--elevacao);
}
.ajustes-balao .rotulo { margin: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-fraco); font-weight: 700; }
.ajustes-balao .chips + .rotulo { margin-top: 6px; }
.ajustes-balao .temas .tema { width: 28px; height: 28px; }
.ajustes-balao .link { align-self: flex-start; font-size: 13px; margin-top: 4px; }
html[data-tema="claro"] .tema.ativo { border-color: var(--texto); }

/* Texto que era claro sobre fundo escuro precisa escurecer no tema claro:
   "sempre tem que ser visível" (Enzo, 30/09/2026). */
html[data-tema="claro"] .chip-rar.venda, html[data-tema="claro"] .chip-rar.nova { color: #1B6B33; background: rgba(63, 191, 98, .2); }
html[data-tema="claro"] .chip-rar.prevista { color: #8A4B00; background: rgba(240, 179, 90, .26); }
html[data-tema="claro"] .chip-rar.ar { color: #0B6E68; background: rgba(90, 215, 208, .26); }
/* No claro o --neon-claro já é o tom de texto da paleta (passa de 4,5 em todas). */
html[data-tema="claro"] .chip-rar.ir { background: color-mix(in srgb, var(--neon) 16%, transparent); color: var(--neon-claro); }
html[data-tema="claro"] .chip-rar.ur, html[data-tema="claro"] .chip-rar.rr { color: #8A4B00; background: rgba(255, 180, 107, .3); }
html[data-tema="claro"] .chip-rar.sr { color: #93245F; background: rgba(255, 154, 213, .3); }
html[data-tema="claro"] .mais.procurar:not(.ativo) { background: rgba(255, 255, 255, .9); }
html[data-tema="claro"] .selecao-barra .perigo-chip { border-color: rgba(166, 75, 0, .45); }
html[data-tema="claro"] .selecao-barra { box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
html[data-tema="claro"] .solta-aqui { background: rgba(246, 243, 251, .88); }

/* A dica da permissão da câmera, no scanner (fundo preto nos dois temas). */
.scanner .dica-camera {
  position: absolute; left: 16px; right: 16px; margin: 0; text-align: center;
  bottom: calc(max(24px, env(safe-area-inset-bottom)) + 48px);
  color: rgba(255, 255, 255, .7); font-size: 12px; line-height: 1.35;
}

/* Promos carimbadas no detalhe: pré-lançamento, STAFF, Professor, campeonato. */
.d-carimbadas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.d-carimbadas .dica { margin: 0 2px 0 0; }
.d-carimbadas .chip.ativo { background: var(--verde); border-color: transparent; color: var(--no-verde); }

/* A barra da seleção da Coleção fica presa embaixo da JANELA: presa ao fim
   da lista, com 200 cartas ela nunca aparecia (30/09/2026). Na lateral do
   computador ela começa depois da barra; no celular, acima das abas. */
#selecao-colecao .selecao-barra { position: fixed; left: 12px; right: 12px; bottom: 12px; margin: 0; z-index: 45; }
@media (min-width: 960px) { body.no-app #selecao-colecao .selecao-barra { left: 264px; } }
@media (max-width: 560px) { #selecao-colecao .selecao-barra { bottom: calc(76px + env(safe-area-inset-bottom)); } }
.parede.selecionando { padding-bottom: 84px; }

/* ---------- Fundo da página do binder (02/10/2026) ---------- */
.pagina-titulo { align-items: center; }
.pagina-titulo-acoes { display: flex; align-items: center; gap: 8px; }
.grade-pagina { position: relative; }
.grade-pagina.com-fundo { background: var(--cor-pagina, #000); }
.fundo-camada {
  position: absolute; inset: 10px; overflow: hidden; border-radius: 4px;
  z-index: 0; pointer-events: none; background-color: var(--cor-pagina, #000);
}
.fundo-camada img { position: absolute; max-width: none; transform-origin: center; }
/* Canto reto: com o canto arredondado, o cruzamento de quatro bolsos ficava
   com um pontinho da imagem aparecendo no trilho. */
.grade-pagina.com-fundo .bolso { position: relative; z-index: 1; border-radius: 0; box-shadow: 0 0 0 3px var(--cor-pagina, #000); }
.grade-pagina.com-fundo .bolso.ocupado img { border-radius: 4px; }
.grade-pagina.com-fundo .bolso:not(.ocupado) { background: transparent; border-color: transparent; }
.grade-pagina.com-fundo .bolso.livre { color: transparent; }
.grade-pagina.com-fundo .bolso.livre:hover { background: rgba(0, 0, 0, .35); color: #fff; border-color: var(--neon); }

/* Editor do fundo e impressão (diálogo largo). */
#dialogo.largo { width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; }
.editor-fundo { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.fundo-previa { display: flex; gap: 10px; justify-content: center; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.fundo-previa.arrastando { cursor: grabbing; }
.fundo-previa .grade-pagina { flex: 1 1 0; max-width: 280px; padding: 6px; gap: 4px; }
.fundo-previa .fundo-camada { inset: 6px; }
.fundo-previa .grade-pagina.com-fundo .bolso { box-shadow: 0 0 0 2px var(--cor-pagina, #000); border: 0; }
#dialogo .fundo-aviso { margin: 0; color: var(--laranja); font-size: 12px; }
.fundo-linha-imagem { display: flex; gap: 8px; }
.fundo-cores { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dialogo-botoes .fundo-cor { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid var(--borda); }
.dialogo-botoes .fundo-cor.ativo { outline: 2px solid var(--neon); outline-offset: 2px; }
.fundo-cor-livre { width: 34px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; }
.fundo-controles { display: flex; flex-direction: column; gap: 8px; }
.fundo-controle { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 10px; font-size: 13px; color: var(--texto-fraco); }
.fundo-controle input[type=range] { width: 100%; accent-color: var(--neon); }
.fundo-botoes-linha { display: flex; gap: 6px; flex-wrap: wrap; }
.dialogo-botoes .chip { padding: 6px 12px; border-radius: 999px; font-weight: 500; font-size: 13px; }
.dialogo-botoes .chip:disabled { opacity: .45; }
.dialogo-botoes .secundario.compacto { padding: 9px 14px; }
.imprimir-opcoes { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.imprimir-grupo { display: flex; flex-direction: column; gap: 6px; }
.imprimir-rotulo { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-fraco); font-weight: 700; }
#dialogo .imprimir-resumo { margin: 0; font-size: 13px; }

/* ---------- Cadastro, conta e acessibilidade (03/10/2026) ---------- */
.idade { border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.idade legend { padding: 0 4px; font-size: 13px; color: var(--texto-fraco); font-weight: 600; }
.idade label { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--texto); cursor: pointer; }
.idade input { accent-color: var(--neon); width: 18px; height: 18px; margin: 0; }
.aviso-termos { margin: 4px 0 0; text-align: center; }
.aviso-termos a, .rodape-legal a, .conta-legal a { color: var(--neon-claro); }
.rodape-legal { font-size: 12px; line-height: 1.6; }
.conta-legal { margin: 6px 0 0; }
#dialogo .campo-senha-dialogo {
  width: 100%; box-sizing: border-box; padding: 12px; border-radius: 11px; border: 1px solid var(--borda);
  background: var(--tinta); color: var(--texto); font-size: 15px;
}
/* O nome da carta é o botão de abrir (teclado), com cara de texto. */
.carta-abrir {
  all: unset; cursor: pointer; display: inline; color: inherit; font: inherit; overflow-wrap: anywhere;
}
.carta-abrir:focus-visible { outline: 2px solid var(--neon-claro); outline-offset: 2px; border-radius: 4px; }
.carta:focus-within .carta-imagem { box-shadow: 0 0 0 2px var(--neon-claro); border-radius: 12px; }
/* Bolso livre virou botão: sem a cara padrão de botão. */
button.bolso { padding: 0; font: inherit; font-size: 22px; color: var(--texto-fraco); cursor: pointer; width: 100%; }
.bolso:focus-visible { outline: 3px solid var(--neon-claro); outline-offset: -2px; }
/* `all: unset` do .carta-abrir apagava o esconder do .so-leitor: o texto para
   leitor de tela aparecia por cima das cartas. Aqui ele volta a esconder. */
.carta-abrir.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0;
}

/* O botão do nome é atômico (botão nunca é inline de verdade): as reticências
   têm de ser dele, senão o nome longo saía cortado no meio da letra. */
.carta-nome .carta-abrir { display: block; width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carta-nome .carta-abrir:focus-visible { outline-offset: -2px; }
/* Carta do binder com foco de teclado (o botão dela é invisível). */
.bolso.ocupado:focus-within { outline: 3px solid var(--neon-claro); outline-offset: -2px; }

/* ---------- Seletores: seta própria, com folga ----------
   A seta nativa do Chrome e do Brave encostava na borda direita da caixa
   (print do Enzo no detalhe da carta, 03/10/2026). Aqui todo <select> perde
   a seta do sistema e ganha uma desenhada, sempre a 12 px da borda. Os
   `!important` são porque várias regras usam o atalho `background:` e
   `padding:`, que apagariam a seta e a folga. */
:root { --seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23B3A9C4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-tema="claro"] { --seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23685D7C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--seta-select) !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 8px !important;
  padding-right: 34px !important;
  text-overflow: ellipsis;
}
select::-ms-expand { display: none; }

/* ---------- Campos de texto: puxador e zoom do iPhone ----------
   O puxador de redimensionar dos <textarea> ficava em cima do canto
   arredondado, encostado na borda (varredura de 03/10/2026). Os campos já
   têm altura própria; o puxador sai. */
textarea { resize: none; }
/* No celular, campo com letra menor que 16 px faz o iPhone dar zoom na
   página ao tocar (a bio da vitrine tinha 13 px, a lista 14 px e os campos
   do detalhe 13 px). */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select, textarea { font-size: 16px !important; }
}

/* Detalhe da carta no celular: rótulo em cima, campo na largura toda. Com o
   seletor preso em 190 px, "Moderately Played (MP)", "Promo pré-lançamento"
   e "Promo de campeonato" não cabiam (varredura de 03/10/2026). */
@media (max-width: 480px) {
  .detalhe-campo { flex-wrap: wrap; row-gap: 6px; }
  .detalhe-campo > span:first-child { flex: 1 0 100%; }
  .detalhe-campo > select, .detalhe-campo > input, .detalhe-campo > .campo-com-botao { flex: 1 1 100%; max-width: none; width: 100%; }
  .detalhe-campo > .campo-com-botao input { max-width: none; }
}

/* Tema escuro avisa o navegador: sem isso, bolinhas e caixas de marcar,
   barras de rolagem e a lista que abre no seletor vinham brancas, fora do
   tema (varredura de 03/10/2026). O claro já declara `light`. */
html:not([data-tema="claro"]) { color-scheme: dark; }

/* ---------- Varredura de layout (03/10/2026) ----------
   "Ver se as coisas estão dentro" (Enzo): o que cada regra daqui conserta.
   Ficam no fim porque sobrescrevem regras de mais acima; o que estava errado
   na origem foi corrigido no lugar. */

/* Amostra de deck na apresentação: as linhas têm 4 filhos, e a grade de 5
   colunas (a 5ª é dos botões de quantidade do deck de verdade) deixava um
   vão de 10 px depois do preço. O nome quebrava letra a letra em 320 px. */
.vitrine .linha-deck { grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 8px; }
.vitrine .linha-deck .nome { overflow-wrap: normal; }
@media (max-width: 420px) {
  .vitrine .linha-deck { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .vitrine .linha-deck .set { display: none; }
}

/* Pokédex da amostra: a grade da Pokédex de verdade (auto-fill de 84 px)
   vencia as 4 colunas por vir depois, e sobravam 5 + 3 no computador. No
   celular são 6 espécies, em 3 + 3. */
.vitrine .amostra-dex { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 420px) { .vitrine .amostra-dex { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Título da página na amostra (binder e deck): os dois textos quebravam em
   duas linhas cada, lado a lado; agora o segundo desce inteiro. A página da
   amostra não tem fundo, e a sombra de conteúdo virava um retângulo
   fantasma em volta dela no tema claro. */
.vitrine .pagina-titulo { flex-wrap: wrap; row-gap: 2px; }
.vitrine .pagina-titulo strong { white-space: nowrap; }
.vitrine-binder .pagina { box-shadow: none; }

/* Barra da seleção: os botões tinham 29, 33, 38 e 39 px de altura na mesma
   fileira. No celular ela quebrava em até 4 linhas (182 px em 320) e cobria
   o fim da última carta; virou uma fileira que rolava de lado, com a barra
   escondida. Com Idioma e Criar binder (01/11/2026) metade dos botões ficava
   fora da tela sem pista nenhuma: volta a quebrar, em duas linhas, com os
   chips mais compactos, e a parede ganha folga embaixo para a última carta. */
.selecao-barra > button { min-height: 34px; padding-block: 0; display: inline-flex; align-items: center; }
.selecao-barra .primario.compacto { font-size: 13px; padding: 0 12px; }
@media (max-width: 560px) {
  #selecao-colecao .selecao-barra { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
  #selecao-colecao .selecao-barra > button { min-height: 30px; font-size: 12px; padding: 0 9px; }
  #selecao-colecao .selecao-barra .conta { font-size: 13px; }
  .parede.selecionando { padding-bottom: 160px; }
}

/* Detalhe da carta entre 481 e 999 px (iPhone deitado, iPad, janela
   estreita): rótulo e campo em grade, para todos os campos começarem na
   mesma coluna. Antes os seletores ficavam presos em 190 px à direita e os
   campos de preço começavam logo depois do rótulo. A partir de 1000 px vale
   a grade de 150 px do #painel-carta. */
@media (min-width: 481px) {
  .detalhe-campo { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .detalhe-campo select, .detalhe-campo input { max-width: none; width: 100%; }
  .detalhe-campo .campo-com-botao { width: 100%; }
}
/* Com o painel de 560 px, a coluna dos campos ficava com 270 px: o preço
   aparecia "118" no lugar de "1180". De 700 a 999 px o painel alarga; de
   560 a 699 a arte vai para cima e os campos usam a largura toda. */
@media (min-width: 700px) and (max-width: 999px) {
  #painel-carta .painel-caixa { width: min(860px, calc(100% - 48px)); }
}
@media (min-width: 560px) and (max-width: 699px) {
  #painel-carta .detalhe-carta { grid-template-columns: minmax(0, 1fr); }
}
/* 4 px de folga dentro da área que rola: o anel de foco dos botões de
   largura total (Adicionar à coleção, Procuro, Remover) saía sem as laterais. */
.detalhe-carta { padding: 4px; margin: -4px; }

/* Busca do Adicionar: texto que não cabe termina em "…" em vez de cortar no
   meio da letra. */
#busca { text-overflow: ellipsis; }

/* Faixa da barra de rolagem nas listas que rolam por dentro de um painel
   (detalhe da carta, resultados da busca, seletor de cartas). No Mac a
   barra é desenhada POR CIMA do conteúdo, sem ocupar espaço, e passava em
   cima da borda direita das caixas (print do Enzo no detalhe da Clarita,
   04/10/2026). Folga à direita só para ela; a margem negativa devolve o
   espaço, então o conteúdo continua alinhado com o resto do painel. */
@media (min-width: 560px) {
  .detalhe-carta { padding-right: 16px; margin-right: -16px; }
  .resultados, .escolher-cartas { padding-right: 14px; margin-right: -14px; }
}

/* Foco dado pelo código, não pela pessoa: o título do painel aberto e a área
   principal (tabindex="-1") recebem o foco para o leitor de tela começar
   ali. O anel ficava desenhado nelas como uma borda verde esquisita em volta
   do "Clarita" e da tela inteira (print do Enzo, 04/10/2026). Botões e
   campos continuam com o anel de teclado normal. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

/* ---------- Brilho holográfico ----------
   O foil imita o da carta física (o perfil sai de js/holo.js, em
   data-atributos):
     data-regiao   onde a folha aparece: retângulos medidos na carta
                   (abaixo); no reverse, a face menos a janela da arte;
     data-padrao   o desenho da folha da era. Quase invisível parado: só
                   acende onde a faixa de luz passa, como na mão;
     data-relevo   no detalhe, a máscara gerada da arte (--relevo, blob:):
                   contornos do desenho (gravado) ou áreas claras (brilho);
     data-cintila  estrelinhas (ex) ou glitter (SIR, hiper);
     data-cor      arco-íris, prata, ouro ou magenta.
   Camadas: ::before é um véu da cor na região, bem fraco; .holo-foil é a
   cor que a faixa de luz acende, recortada por padrão, relevo e região
   (color-dodge escurecido: realça sem estourar para o branco);
   .holo-cintila, as estrelinhas ou o glitter; ::after, a faixa de luz.
   js/holo.js só escreve --rx, --ry, --mx, --my e --brilho; aqui é tudo
   transform, opacity e background-position, nada recalcula layout. As
   camadas têm o raio da arte e não passam do canto. */
.holo, .carta-imagem[data-holo] {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --brilho: 0;
  --veu: 0; --veu-parado: 0; --forca: 0; --cobertura: 1; --cintila: 0; --reflexo: 0; --reflexo-parado: 0;
  /* A face (interior da borda): x 3,9-96 %, y 2,7-97,3 %. Retângulo em
     máscara: tamanho, e posição = início / (100 - tamanho). */
  --face-tam: 92.1% 94.6%; --face-em: 49.37% 50%;
  --reg-tam: var(--face-tam); --reg-em: var(--face-em);
  --reg-op: intersect; --reg-op-wk: source-in;
  /* A borda da carta (fora da face), somada à região quando a folha também
     pega nela (data-borda="foil", o 30th Celebration). */
  --borda-mascara: linear-gradient(transparent 0 0);
  --padrao: linear-gradient(#000 0 0); --padrao-tam: 100% 100%;
  --relevo: linear-gradient(#000 0 0);
  --cintila-forma: linear-gradient(transparent 0 0); --cintila-tam: auto;
  --angulo: 115deg; --cor-tam: 300% 300%; --saturar: 1.4;
  --matiz: hsl(0 80% 62%) 0%, hsl(45 85% 60%) 4%, hsl(120 65% 58%) 8%,
           hsl(185 80% 60%) 12%, hsl(250 75% 66%) 16%, hsl(310 75% 64%) 20%, hsl(360 80% 62%) 24%;
  --cor: repeating-linear-gradient(var(--angulo), var(--matiz));
  /* Faixa de luz: preta fora, clara no meio. Multiplicada pela cor, só o
     trecho iluminado da folha aparece. */
  --faixa-mascara: linear-gradient(115deg, #000 36%, #fff 50%, #000 64%);
  --faixa: linear-gradient(115deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, 0) 68%);
}
:is(.holo, .carta-imagem)[data-holo="leve"] {
  --veu: .16; --veu-parado: .07; --forca: .85; --reflexo: .3; --reflexo-parado: .11;
}
:is(.holo, .carta-imagem)[data-holo="forte"] {
  --veu: .18; --veu-parado: .09; --forca: .85; --cintila: .6; --reflexo: .36; --reflexo-parado: .14;
}

/* As cores. Prata: cinzas frios com um fio de iridescência (reverse e
   arte completa do Escarlate e Violeta). */
:is(.holo, .carta-imagem)[data-cor="prata"] {
  --matiz: hsl(210 10% 58%) 0%, hsl(200 22% 84%) 4%, hsl(250 14% 72%) 8%, hsl(185 18% 86%) 12%,
           hsl(320 10% 74%) 16%, hsl(215 14% 90%) 20%, hsl(210 10% 58%) 24%;
  --saturar: 1;
}
:is(.holo, .carta-imagem)[data-cor="ouro"] {
  --matiz: hsl(42 90% 52%) 0%, hsl(50 100% 78%) 6%, hsl(36 90% 48%) 12%, hsl(55 100% 88%) 18%, hsl(42 90% 52%) 24%;
}
:is(.holo, .carta-imagem)[data-cor="magenta"] {
  --matiz: hsl(320 75% 60%) 0%, hsl(290 60% 66%) 4%, hsl(340 80% 64%) 8%, hsl(200 55% 66%) 12%,
           hsl(300 70% 62%) 16%, hsl(330 80% 66%) 20%, hsl(320 75% 60%) 24%;
}

/* As regiões, em % da carta (medidas nas imagens 733×1024 das bases). */
/* Pokémon, janela da arte (SV, ME, SWSH): x 8-92 %, y 9,8-47,3 % */
:is(.holo, .carta-imagem):is([data-regiao="janela"], [data-regiao="fora-da-janela"]) {
  --reg-tam: 84% 37.5%; --reg-em: 50% 15.68%;
}
/* Sol e Lua: x 7,7-92,1 %, y 9,7-47,2 % */
:is(.holo, .carta-imagem)[data-era="sm"]:is([data-regiao="janela"], [data-regiao="fora-da-janela"]) {
  --reg-tam: 84.4% 37.5%; --reg-em: 49.36% 15.52%;
}
/* Janela e a moldura prateada em volta (SV, ME): x 7,2-92,7 %, y 9,25-48,3 % */
:is(.holo, .carta-imagem)[data-regiao="janela-e-moldura"] {
  --reg-tam: 85.5% 39.05%; --reg-em: 49.66% 15.18%;
}
/* Treinador: janela x 8-91,9 %, y 14,3-51,6 %; com a moldura, x 7,1-92,6 %,
   y 13,8-52,1 % (o alto e o pé da moldura são estimados). */
:is(.holo, .carta-imagem)[data-layout="treinador"]:is([data-regiao="janela"], [data-regiao="fora-da-janela"]) {
  --reg-tam: 83.9% 37.3%; --reg-em: 49.69% 22.81%;
}
:is(.holo, .carta-imagem)[data-layout="treinador"][data-regiao="janela-e-moldura"] {
  --reg-tam: 85.5% 38.3%; --reg-em: 48.97% 22.37%;
}
/* Energia Especial: a arte vai de borda a borda, x 3,9-95,8 %, y 13,7-64,6 % */
:is(.holo, .carta-imagem)[data-layout="energia"]:not([data-regiao="inteira"]) {
  --reg-tam: 91.9% 50.9%; --reg-em: 48.15% 27.9%;
}
/* Reverse: a face menos a janela. */
:is(.holo, .carta-imagem)[data-regiao="fora-da-janela"] { --reg-op: exclude; --reg-op-wk: xor; }
/* A borda em foil: a carta menos a face (x 3,9-96 %, y 2,7-97,3 %). */
:is(.holo, .carta-imagem)[data-borda="foil"] {
  --borda-mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H1000V1000H0Z M39 27V973H960V27Z'/%3E%3C/svg%3E");
}

/* Os padrões da folha, como máscara (onde é opaca, a luz acende a cor).
   Todos com fundo fraco e o desenho só um pouco mais forte: de longe é
   foil, de perto aparece o desenho. Os lisos tiram o desenho da cor:
   sheen horizontal (holo SV e ME) deita as faixas; o diagonal (ex, V, GX)
   inclina. Cobrem a região toda, então acendem menos. */
:is(.holo, .carta-imagem):is([data-padrao="liso"], [data-padrao="sheen-horizontal"], [data-padrao="sheen-diagonal"]) { --cobertura: .5; }
:is(.holo, .carta-imagem)[data-padrao="sheen-horizontal"] { --angulo: 0deg; }
:is(.holo, .carta-imagem)[data-padrao="sheen-diagonal"] { --angulo: 135deg; }
/* holo SWSH: linhas verticais finas */
:is(.holo, .carta-imagem)[data-padrao="linhas-verticais"] {
  --padrao: repeating-linear-gradient(90deg, rgba(0, 0, 0, .55) 0 1px, rgba(0, 0, 0, .3) 1px 3.5px);
  --padrao-tam: auto;
}
/* arte completa SM: relevo de linhas paralelas */
:is(.holo, .carta-imagem)[data-padrao="paralelas"] {
  --padrao: repeating-linear-gradient(135deg, rgba(0, 0, 0, .55) 0 1px, rgba(0, 0, 0, .3) 1px 5px);
  --padrao-tam: auto;
}
/* holo SM: water web, curvas de nível de um ruído */
:is(.holo, .carta-imagem)[data-padrao="water-web"] {
  --padrao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='.15 .15 .15 .2 .5 .2 .2 .5 .2 .2 .5 .2 .2 .5 .2 .2 .5 .2 .15 .15 .15'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  --padrao-tam: 160px 160px;
}
/* promos: cosmos, discos e anéis de tamanhos variados */
:is(.holo, .carta-imagem)[data-padrao="cosmos"] {
  --padrao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Crect width='140' height='140' opacity='.18'/%3E%3Ccircle cx='18' cy='22' r='9' opacity='0.5'/%3E%3Ccircle cx='62' cy='14' r='4' opacity='0.7'/%3E%3Ccircle cx='104' cy='30' r='14' opacity='0.35'/%3E%3Ccircle cx='40' cy='64' r='6' opacity='0.6'/%3E%3Ccircle cx='86' cy='74' r='10' opacity='0.45'/%3E%3Ccircle cx='126' cy='88' r='5' opacity='0.7'/%3E%3Ccircle cx='20' cy='110' r='12' opacity='0.4'/%3E%3Ccircle cx='66' cy='118' r='3' opacity='0.8'/%3E%3Ccircle cx='108' cy='124' r='7' opacity='0.55'/%3E%3Ccircle cx='132' cy='8' r='2.5' opacity='0.8'/%3E%3Ccircle cx='8' cy='52' r='2' opacity='0.8'/%3E%3Ccircle cx='56' cy='92' r='2.4' opacity='0.8'/%3E%3Ccircle cx='90' cy='46' r='1.8' opacity='0.9'/%3E%3Ccircle cx='122' cy='108' r='2' opacity='0.8'/%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1' opacity='.5'%3E%3Ccircle cx='50' cy='38' r='11'/%3E%3Ccircle cx='120' cy='56' r='8'/%3E%3Ccircle cx='34' cy='88' r='16'/%3E%3Ccircle cx='92' cy='104' r='6'/%3E%3Ccircle cx='10' cy='138' r='7'/%3E%3C/g%3E%3C/svg%3E");
  --padrao-tam: 120px 120px;
  --angulo: 135deg;
}
/* reverse SV: espelho com pedras arredondadas */
:is(.holo, .carta-imagem)[data-padrao="pedras"] {
  --padrao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='60'%3E%3Crect width='72' height='60' opacity='.4'/%3E%3Cg opacity='.3'%3E%3Crect x='2' y='2' width='20' height='15' rx='7'/%3E%3Crect x='25' y='1' width='22' height='16' rx='6'/%3E%3Crect x='50' y='3' width='19' height='14' rx='7'/%3E%3Crect x='-9' y='21' width='19' height='16' rx='7'/%3E%3Crect x='13' y='20' width='24' height='17' rx='8'/%3E%3Crect x='40' y='22' width='20' height='15' rx='6'/%3E%3Crect x='63' y='21' width='19' height='16' rx='7'/%3E%3Crect x='3' y='41' width='18' height='16' rx='6'/%3E%3Crect x='24' y='40' width='25' height='17' rx='8'/%3E%3Crect x='52' y='42' width='18' height='15' rx='7'/%3E%3C/g%3E%3C/svg%3E");
  --padrao-tam: 48px 40px;
  --angulo: 160deg;
}
/* reverse SWSH e SM: chevrons em fileira */
:is(.holo, .carta-imagem)[data-padrao="ladrilho"] {
  --padrao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14'%3E%3Crect width='22' height='14' opacity='.3'/%3E%3Cpath d='M0 10L11 3L22 10L22 12.5L11 5.5L0 12.5Z' opacity='.3'/%3E%3C/svg%3E");
  --padrao-tam: 16px 10px;
}
/* Radiant: diagonais em X */
:is(.holo, .carta-imagem)[data-padrao="cruzado"] {
  --padrao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect width='12' height='12' opacity='.3'/%3E%3Cpath d='M0 0L12 12M12 0L0 12' stroke='%23000' stroke-width='.8' opacity='.35'/%3E%3C/svg%3E");
  --padrao-tam: 10px 10px;
}
/* O brilho por cima: estrelinhas esparsas (ex) ou glitter fino (SIR, hiper). */
:is(.holo, .carta-imagem)[data-cintila="estrelas"] {
  --cintila-forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='144'%3E%3Cpath d='M18.0 15.0L19.1 18.9L23.0 20.0L19.1 21.1L18.0 25.0L16.9 21.1L13.0 20.0L16.9 18.9ZM84.0 30.8L84.7 33.3L87.2 34.0L84.7 34.7L84.0 37.2L83.3 34.7L80.8 34.0L83.3 33.3ZM46.0 66.0L46.9 69.1L50.0 70.0L46.9 70.9L46.0 74.0L45.1 70.9L42.0 70.0L45.1 69.1ZM110.0 90.5L111.2 94.8L115.5 96.0L111.2 97.2L110.0 101.5L108.8 97.2L104.5 96.0L108.8 94.8ZM26.0 115.4L26.6 117.4L28.6 118.0L26.6 118.6L26.0 120.6L25.4 118.6L23.4 118.0L25.4 117.4ZM130.0 11.6L130.5 13.5L132.4 14.0L130.5 14.5L130.0 16.4L129.5 14.5L127.6 14.0L129.5 13.5ZM70.0 128.6L70.7 131.3L73.4 132.0L70.7 132.7L70.0 135.4L69.3 132.7L66.6 132.0L69.3 131.3ZM132.0 59.8L132.5 61.5L134.2 62.0L132.5 62.5L132.0 64.2L131.5 62.5L129.8 62.0L131.5 61.5Z'/%3E%3Ccircle cx='56' cy='28' r='0.9'/%3E%3Ccircle cx='100' cy='8' r='0.7'/%3E%3Ccircle cx='12' cy='78' r='0.8'/%3E%3Ccircle cx='92' cy='70' r='0.7'/%3E%3Ccircle cx='124' cy='128' r='0.9'/%3E%3Ccircle cx='40' cy='104' r='0.6'/%3E%3Ccircle cx='70' cy='52' r='0.5'/%3E%3C/svg%3E");
  --cintila-tam: 110px 110px;
}
:is(.holo, .carta-imagem)[data-cintila="glitter"] {
  --cintila-forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 8 0 0 0 -5.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --cintila-tam: 180px 180px;
}
/* Relevo pronto: o desenho é fino, então acende mais que o liso. Até ele
   chegar, a folha fica apagada (sem um clarão liso antes); se falhar,
   fica a região lisa. */
.holo.relevo-pronto[data-relevo="gravado"] { --cobertura: .9; }
.holo.relevo-pronto[data-relevo="brilho"] { --cobertura: .55; }
.holo:is([data-relevo="gravado"], [data-relevo="brilho"]):not(.relevo-pronto, .relevo-falhou) .holo-foil { opacity: 0; }

/* As máscaras, iguais no detalhe e na grade: padrão x relevo x região. */
.holo-foil {
  -webkit-mask-image: var(--borda-mascara), var(--padrao), var(--relevo), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-image: var(--borda-mascara), var(--padrao), var(--relevo), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-size: 100% 100%, var(--padrao-tam), 100% 100%, var(--reg-tam), var(--face-tam);
  mask-size: 100% 100%, var(--padrao-tam), 100% 100%, var(--reg-tam), var(--face-tam);
  -webkit-mask-position: 0 0, 0 0, 0 0, var(--reg-em), var(--face-em);
  mask-position: 0 0, 0 0, 0 0, var(--reg-em), var(--face-em);
  -webkit-mask-repeat: no-repeat, repeat, no-repeat, no-repeat, no-repeat;
  mask-repeat: no-repeat, repeat, no-repeat, no-repeat, no-repeat;
  -webkit-mask-composite: source-over, source-in, source-in, var(--reg-op-wk), source-over;
  mask-composite: add, intersect, intersect, var(--reg-op), add;
}

/* No detalhe, um invólucro em volta da <img>; a moldura fica parada e o JS
   mede o ponteiro por ela. Dedo de lado inclina; de pé (ou pinça) continua
   sendo do painel, que rola. */
.holo {
  position: relative;
  border-radius: 12px;
  isolation: isolate;      /* o foil se mistura só com a arte */
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 650ms var(--curva);
  touch-action: pan-y pinch-zoom;
}
.holo.holo-ativo { transition: transform 120ms ease-out; }
.holo::before, .holo::after, .holo-foil, .holo-cintila {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity var(--lento) var(--curva), background-position 650ms var(--curva);
}
.holo.holo-ativo::before, .holo.holo-ativo::after, .holo.holo-ativo .holo-foil, .holo.holo-ativo .holo-cintila {
  transition: opacity var(--normal) var(--curva), background-position 120ms ease-out;
}
/* (1) O véu: a cor da folha na região, bem fraca. Overlay tinge sem clarear. */
.holo::before {
  background-image: var(--cor);
  background-size: var(--cor-tam);
  background-position: var(--mx) var(--my);
  mix-blend-mode: overlay;
  -webkit-mask-image: var(--borda-mascara), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-image: var(--borda-mascara), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-size: 100% 100%, var(--reg-tam), var(--face-tam);
  mask-size: 100% 100%, var(--reg-tam), var(--face-tam);
  -webkit-mask-position: 0 0, var(--reg-em), var(--face-em);
  mask-position: 0 0, var(--reg-em), var(--face-em);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-over, var(--reg-op-wk), source-over;
  mask-composite: add, var(--reg-op), add;
  opacity: calc(var(--veu-parado) + var(--brilho) * (var(--veu) - var(--veu-parado)));
}
/* (2) A folha: a cor vezes a faixa de luz, recortada pelas máscaras. */
.holo .holo-foil {
  background-image: var(--faixa-mascara), var(--cor);
  background-blend-mode: multiply;
  background-size: 300% 300%, var(--cor-tam);
  background-position: var(--mx) var(--my), calc(100% - var(--mx)) calc(100% - var(--my));
  mix-blend-mode: color-dodge;
  filter: brightness(.75) saturate(var(--saturar));
  opacity: calc(var(--forca) * var(--cobertura) * (.75 + .25 * var(--brilho)));
}
/* (3) Estrelinhas ou glitter, também só onde a luz passa. */
.holo-cintila {
  background-image: var(--faixa-mascara), var(--cor);
  background-blend-mode: multiply;
  background-size: 300% 300%, var(--cor-tam);
  background-position: var(--mx) var(--my), var(--my) var(--mx);
  -webkit-mask-image: var(--cintila-forma), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-image: var(--cintila-forma), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-size: var(--cintila-tam), var(--reg-tam), var(--face-tam);
  mask-size: var(--cintila-tam), var(--reg-tam), var(--face-tam);
  -webkit-mask-position: 0 0, var(--reg-em), var(--face-em);
  mask-position: 0 0, var(--reg-em), var(--face-em);
  -webkit-mask-repeat: repeat, no-repeat, no-repeat;
  mask-repeat: repeat, no-repeat, no-repeat;
  -webkit-mask-composite: source-in, var(--reg-op-wk), source-over;
  mask-composite: intersect, var(--reg-op), add;
  mix-blend-mode: color-dodge;
  filter: brightness(.8);
  opacity: var(--cintila);
}
/* (4) A faixa de luz. */
.holo::after {
  background-image: var(--faixa);
  background-size: 300% 300%;
  background-position: var(--mx) var(--my);
  mix-blend-mode: overlay;
  opacity: calc(var(--reflexo-parado) + var(--brilho) * (var(--reflexo) - var(--reflexo-parado)));
}
.holo[data-holo="nenhum"]::before, .holo[data-holo="nenhum"]::after { display: none; }

/* Parada, a luz corre devagar de um canto ao outro e volta. O ciclo começa
   e termina no centro, e espera os 650 ms da volta: ao soltar, a transição
   leva a luz de onde estava até o meio e o ciclo parte dali. Começando em
   0% 0%, a luz pulava para o canto num quadro a cada soltura. */
@keyframes holo-vivo {
  0%, 100% { background-position: 50% 50%; }
  25% { background-position: 0% 0%; }
  75% { background-position: 100% 100%; }
}
.holo:not(.holo-ativo)::before,
.holo:not(.holo-ativo)::after,
.holo:not(.holo-ativo) .holo-foil,
.holo:not(.holo-ativo) .holo-cintila {
  animation: holo-vivo 11s ease-in-out 650ms infinite;
}

/* Na grade, a folha fica parada e sem mistura de cores (dezenas de tiles
   misturando pesariam na rolagem do celular): só a cor recortada por
   padrão e região, bem leve, sem relevo nem cintila. Com o mouse em cima,
   ela acompanha o ponteiro. Some enquanto a arte carrega. */
.carta-imagem .holo-foil {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  background-image: var(--cor);
  background-size: var(--cor-tam);
  background-position: var(--mx) var(--my);
  opacity: calc(var(--forca) * var(--cobertura) * .2);
  transition: background-position var(--normal) var(--curva), opacity var(--normal) var(--curva);
}
.carta-imagem:has(img:not(.pronta)) .holo-foil { display: none; }

/* Na grade, só com mouse: o tile inteiro (arte e selos) inclina junto com o
   "sobe 4 px" do hover, e nas raras o vidro de passar vira a faixa de luz
   que segue o ponteiro. Comum e incomum ficam com o vidro de sempre. */
@media (hover: hover) and (pointer: fine) {
  .carta:hover .carta-imagem.holo-ativo:has(img.pronta) {
    transform: translateY(-4px) perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
    transition-duration: 120ms;
  }
  .carta-imagem[data-holo="leve"]::after, .carta-imagem[data-holo="forte"]::after {
    background: var(--faixa);
    background-size: 300% 300%;
    background-position: var(--mx) var(--my);
    mix-blend-mode: overlay;
    transition: opacity var(--normal) var(--curva), background-position var(--normal) var(--curva);
  }
  .carta:hover .carta-imagem[data-holo="leve"]::after,
  .carta:hover .carta-imagem[data-holo="forte"]::after { opacity: var(--reflexo); }
  .carta:hover .carta-imagem .holo-foil { opacity: calc(var(--forca) * var(--cobertura) * .32); }
}

/* Menos movimento: a carta não inclina e nada corre; nas raras fica o foil
   parado, com a luz num canto. */
@media (prefers-reduced-motion: reduce) {
  .holo, .holo.holo-ativo { transform: none; }
  .holo::before, .holo::after, .holo .holo-foil, .holo-cintila { animation: none; }
  .holo::before { opacity: var(--veu-parado); background-position: 30% 20%; }
  .holo::after { opacity: var(--reflexo-parado); background-position: 30% 20%; }
  .holo .holo-foil, .holo-cintila { background-position: 30% 20%, 70% 80%; }
}

/* ---------- Binder por tema (10/10/2026) ----------
   A escolha do tema (painel), o bolso que falta (cinza, com "falta") e o
   cartão de progresso do binder. Protótipo aprovado em 10/10/2026. */
.criar-binders { display: flex; gap: 8px; flex-wrap: wrap; align-self: flex-start; margin-bottom: 4px; }
.criar-binders .criar { margin-bottom: 0; }
/* A lista colada no "Importar lista" dos decks. */
#dialogo-botoes .campo-lista { min-height: 180px; margin-bottom: 4px; font-size: 16px; }

#painel-tema .painel-caixa { width: min(760px, 100%); padding-bottom: 0; }
.tema-corpo, .tema-miolo { display: flex; flex-direction: column; gap: 14px; }
.tema-busca { display: flex; flex-direction: column; gap: 10px; }
.tema-rotulo { margin: 0; font-size: 13px; font-weight: 600; color: var(--texto-fraco); }
.tema-campo {
  display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px;
  border-radius: 14px; background: var(--superficie); border: 1.5px solid var(--neon); color: var(--neon-claro);
}
.tema-campo:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--neon) 28%, transparent); }
.tema-campo input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none;
  background: transparent; color: var(--texto); font-size: 17px;
}
.tema-campo input:focus { outline: none; }
.tema-que { margin-top: -4px; }
.tema-que:empty { display: none; }
.tema-sugestoes {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie);
}
.tema-sugestao {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px;
  padding: 8px 14px; border: 0; border-bottom: 1px solid var(--borda); background: transparent;
  color: var(--texto); font-weight: 600; text-align: left;
}
.tema-sugestao:last-child { border-bottom: 0; }
.tema-sugestao:hover, .tema-sugestao:focus-visible { background: color-mix(in srgb, var(--neon) 14%, transparent); }
.tema-sugestao .dica { flex-shrink: 0; font-weight: 500; }
.tema-cenas { display: flex; flex-direction: column; gap: 6px; }
.tema-incluir { display: flex; flex-direction: column; gap: 10px; }
/* No celular os chips de Incluir e de cena rolam de lado numa linha, como as eras,
   em vez de empilhar três linhas antes da primeira carta. */
@media (max-width: 560px) {
  /* A folga de 4 px (devolvida pela margem) não deixa o overflow cortar o anel de foco. */
  .tema-incluir .chips, .tema-cenas .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px 24px 4px 4px; margin: -4px;
                         -webkit-mask-image: var(--esmaecer-rolagem); mask-image: var(--esmaecer-rolagem); }
  .tema-incluir .chips::-webkit-scrollbar, .tema-cenas .chips::-webkit-scrollbar { display: none; }
  .tema-incluir .chip, .tema-cenas .chip { flex: none; }
}
.chip.tema-inclui {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 10px;
  background: transparent; color: var(--texto-fraco); border: 1.5px dashed rgba(179, 169, 196, .5);
}
.chip.tema-inclui.ligado { background: color-mix(in srgb, var(--neon) 16%, transparent); color: var(--texto); border: 1.5px solid var(--neon); }
.tema-inclui svg { flex-shrink: 0; }
.tema-resultado {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--borda);
}
.tema-conta { margin: 0; font-size: 15px; color: var(--texto-fraco); }
.tema-conta strong { font-family: var(--titulo); font-size: 18px; color: var(--texto); }
.tema-resultado + .dica { margin-top: -10px; }
.tema-andamento:empty { display: none; }
.tema-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px 10px; }
.tema-grade > .vazio { grid-column: 1 / -1; }
.tema-carta {
  position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0;
  padding: 0; border: 0; background: transparent; color: var(--texto); text-align: left;
}
.tema-arte {
  position: relative; display: block; width: 100%; aspect-ratio: 63 / 88; overflow: hidden; border-radius: 7px;
  background: var(--superficie); box-shadow: 0 6px 16px rgba(0, 0, 0, .45); transition: opacity var(--rapido);
}
.tema-arte img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A carta que nenhuma base fotografou: um cartão com nome, set e número no
   lugar da arte (grade do tema, bolso do binder, prévia do PDF). O texto
   acompanha a largura do cartão (cqi), do bolso de celular à grade larga. */
.cartao-sem-arte {
  container-type: inline-size; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 4px; width: 100%; height: 100%; padding: 10% 8%; overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--texto-fraco) 40%, transparent); border-radius: inherit;
  background: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--texto) 5%, transparent) 7px 8px), var(--superficie);
  color: var(--texto); text-align: center;
}
.cartao-sem-arte strong { font-size: clamp(8px, 13cqi, 14px); line-height: 1.2; overflow-wrap: anywhere; }
.cartao-sem-arte span { font-size: clamp(7px, 10cqi, 11px); line-height: 1.25; color: var(--texto-fraco); overflow-wrap: anywhere; }
.bolso.falta .cartao-sem-arte { opacity: .7; }
/* Na prévia do PDF o cartão tem 53px no celular: letra menor, a palavra
   inteira (ou hifenizada) e o pé livre para a etiqueta FALTA. */
.folha-carta .cartao-sem-arte {
  gap: 2px; padding: 8% 6% 24%; border: .5px solid #9A9A9A; border-radius: 0; background: #E6E6E6; color: #333333;
}
.folha-carta .cartao-sem-arte strong { font-size: clamp(5px, 12cqi, 14px); overflow-wrap: break-word; hyphens: auto; }
.folha-carta .cartao-sem-arte span { font-size: clamp(4px, 9cqi, 11px); color: #555555; overflow-wrap: break-word; hyphens: auto; }
.tema-carta.fora .tema-arte { opacity: .3; filter: grayscale(1); }
@media (hover: hover) and (pointer: fine) {
  .tema-arte { transition: opacity var(--rapido), transform var(--rapido); }
  .tema-carta:hover .tema-arte { transform: translateY(-2px); }
}
/* A marca só existe na carta que a pessoa tirou: um + para pôr de volta. */
.tema-marca {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
  display: none; place-items: center;
  background: rgba(11, 7, 16, .78); border: 1.5px solid rgba(244, 240, 250, .6); color: #F4F0FA;
}
.tema-carta.fora .tema-marca { display: grid; }
.tema-carta:focus-visible { outline: none; }
.tema-carta:focus-visible .tema-arte { outline: 3px solid var(--neon-claro); outline-offset: 2px; }
/* Legenda em três linhas fixas: nome (com o visto de quem tem), número e
   set, e o tipo da versão (promo, raridade ou estampa). */
.tema-nome, .tema-set, .tema-selo { line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tema-nome { font-size: 12px; font-weight: 600; }
.tema-set { font-size: 11px; color: var(--texto-fraco); }
.tema-selo { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--neon-claro); }
.tema-carta.estampada .tema-selo { color: var(--amarelo); }
html[data-tema="claro"] .tema-carta.estampada .tema-selo { color: #9A6B00; }
.tema-tenho {
  display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px;
  border-radius: 50%; background: var(--verde); color: var(--no-verde);
}
.tema-tenho[hidden] { display: none; }
/* 16 px com o check de 10 (02/11/2026): em 14 o check ficava a 2 px da borda do círculo (medidor). */
.tema-tenho svg { width: 10px; height: 10px; }
.tema-rodape {
  position: sticky; bottom: 0; z-index: 2; margin: 0 -18px; padding: 12px 18px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px; background: var(--superficie); border-top: 1px solid var(--borda);
}
.tema-resumo { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; font-size: 14px; }
.tema-medida { padding: 4px 0; font-size: 13px; }
.tema-rodape .primario { width: 100%; font-family: var(--titulo); font-size: 17px; }
.tema-vazio { margin: 4px 0 20px; }
@media (max-width: 560px) {
  #painel-tema .painel-caixa { padding-left: 16px; padding-right: 16px; }
  .tema-rodape { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
}

/* O bolso da carta que falta: a arte em cinza e o selo da versão. */
.bolso.falta { background: rgba(255, 255, 255, .04); border: 1px solid rgba(244, 240, 250, .08); }
/* Cinza claro e suave, como na página do set (22/10/2026). */
.bolso.falta img { filter: grayscale(1) contrast(.6) brightness(1.18); opacity: .85; }
.bolso.falta.clicavel { cursor: pointer; }
/* Marcar várias que tenho (25/10/2026): a marca no canto de cada bolso que
   falta; a marcada fica com contorno e já colorida. */
.marca-bolso { display: none; }
.marcando-cartas .bolso.falta { position: relative; }
.marcando-cartas .marca-bolso {
  position: absolute; top: 6px; right: 6px; z-index: 3; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .9); background: rgba(0, 0, 0, .45); box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.marcando-cartas .bolso.falta.marcada { outline: 3px solid var(--neon); outline-offset: -3px; }
.marcando-cartas .bolso.falta.marcada img, .marcando-cartas .bolso.falta.marcada svg.estampa { filter: none; opacity: 1; }
.marcando-cartas .bolso.falta.marcada .marca-bolso { background: var(--neon); border-color: var(--neon); }
.marcando-cartas .bolso.falta.marcada .marca-bolso::after {
  content: ''; width: 10px; height: 5px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg);
}
.marcando-cartas { padding-bottom: 84px; }
#selecao-colecao .barra-marcacao { flex-wrap: nowrap; }
.barra-marcacao [data-marcar] { flex: 1; min-width: 0; }
.fechar-marcacao {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 12px; background: none; color: var(--texto-fraco); cursor: pointer;
}
.fechar-marcacao svg { width: 20px; height: 20px; }
/* No computador a barra não atravessa a tela (25/10/2026, print do Enzo com
   o "Marcar que tenho (146)" esticado de ponta a ponta): vira uma pílula no
   canto de baixo, do tamanho do que tem dentro. */
@media (min-width: 561px) {
  body #selecao-colecao .selecao-barra.barra-marcacao { left: auto; right: 24px; bottom: 24px; width: auto; }
  .barra-marcacao [data-marcar] { flex: none; }
}

/* As folhas em JPEG prontas: a prévia de cada uma, que a pessoa marca ou
   desmarca (a caixinha fica escondida; a folha marcada ganha o contorno). */
.folhas-prontas { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; margin-bottom: 4px; }
.folha-pronta { position: relative; display: grid; gap: 6px; text-align: center; font-size: 12px; color: var(--texto-fraco); cursor: pointer; }
.folha-pronta input { position: absolute; opacity: 0; pointer-events: none; }
.folha-pronta img {
  width: 100%; aspect-ratio: 210 / 297; object-fit: cover; background: #fff; border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35); opacity: .45; transition: opacity .15s, outline-color .15s;
  outline: 2px solid transparent; outline-offset: 2px;
}
.folha-pronta:has(input:checked) img { opacity: 1; outline-color: var(--neon); }
.folha-pronta:has(input:checked) span { color: var(--texto); }
.folha-pronta:has(input:checked) span::before { content: '✓ '; color: var(--neon); }
.folha-pronta:has(input:focus-visible) img { outline-color: var(--texto); }
/* Enquanto a arte desce, o bolso pisca de leve no lugar do preto parado, e
   a carta entra com um esmaecer curto. Vem depois do .falta para o opacity
   0 valer também na carta que falta. */
.bolso img { transition: opacity .25s ease-out; }
.bolso.carregando {
  background: linear-gradient(100deg, rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, .11) 50%, rgba(255, 255, 255, .03) 70%) 0 0 / 300% 100%;
  animation: bolso-carregando 1.4s ease-in-out infinite;
}
.grade-pagina.clara .bolso.carregando {
  background-image: linear-gradient(100deg, rgba(0, 0, 0, .03) 30%, rgba(0, 0, 0, .09) 50%, rgba(0, 0, 0, .03) 70%);
}
.bolso.carregando img { opacity: 0; }
@keyframes bolso-carregando { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .bolso.carregando { animation: none; }
  .bolso img { transition: none; }
}
.selo-bolso {
  position: absolute; top: 5px; left: 5px; max-width: calc(100% - 30px); overflow-wrap: anywhere;
  padding: 1px 4px; border-radius: 5px; line-height: 1.2;
  background: var(--tinta); color: var(--neon-claro); border: 1px solid color-mix(in srgb, var(--neon-claro) 60%, transparent);
  font-size: 9px; font-weight: 700; letter-spacing: .02em; pointer-events: none;
}
.bolso.apagado { opacity: .28; }
.grade-pagina.clara .bolso.falta { background: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .12); }

/* O cartão de progresso no topo do binder por tema. */
.tema-progresso {
  display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; padding: 14px 16px;
  border-radius: 16px; background: var(--superficie); border: 1px solid var(--borda); max-width: 560px;
}
.tema-progresso-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tema-progresso-conta { margin: 0; font-size: 15px; color: var(--texto-fraco); }
.tema-progresso-conta strong { font-family: var(--titulo); font-size: 26px; color: var(--texto); }
.tema-pct { font-family: var(--titulo); font-size: 18px; font-weight: 700; color: var(--neon-claro); }
.tema-progresso .barra-progresso { height: 8px; margin: 0; }
.tema-linha { display: flex; align-items: center; gap: 6px; }
.tema-linha .chips { margin-right: auto; }

/* A estampa colada na arte (js/estampa.js): um <svg> logo depois da <img>,
   do tamanho dela e com o mesmo corte (slice = object-fit: cover). Segue a
   arte no cinza da que falta, no aperto do toque e na inclinação do holo. */
svg.estampa { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.bolso.falta svg.estampa { filter: grayscale(1) contrast(.6) brightness(1.18); opacity: .85; }
.folha-grade.cinza .folha-carta svg.estampa { filter: grayscale(1) contrast(.9) brightness(1.05); }
.carta:active .carta-imagem:has(img.pronta) svg.estampa { transform: scale(0.97); transition: transform var(--rapido); }

/* A prévia da folha A4 no diálogo de imprimir. */
.folha-previa {
  position: relative; width: min(220px, 60%); aspect-ratio: 210 / 297; margin: 4px auto 0; container-type: inline-size;
  background: #FFFFFF; border-radius: 3px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.folha-grade { position: absolute; display: grid; grid-template-columns: repeat(3, 1fr); }
.folha-carta { position: relative; aspect-ratio: var(--proporcao, 63 / 88); overflow: hidden; outline: .5px solid #BDBDBD; background: #EEEEEE; }
.folha-carta img { display: block; width: 100%; height: 100%; object-fit: cover; }
.folha-grade.cinza .folha-carta img { filter: grayscale(1) contrast(.9) brightness(1.05); }
.folha-marca {
  position: absolute; left: 3px; bottom: 3px; padding: 0 2px; background: #FFFFFF; color: #222222;
  font-size: 6px; font-weight: 800; letter-spacing: .04em; line-height: 1.4; border: .5px solid #222222;
}
#dialogo .imprimir-aviso { margin: 0; font-size: 12px; line-height: 1.4; }
/* Muitas eras: a fileira rola de lado em vez de empurrar a grade para baixo. */
.chips.tema-eras { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; -webkit-mask-image: var(--esmaecer-rolagem); mask-image: var(--esmaecer-rolagem); scrollbar-width: none; }
.chips.tema-eras::-webkit-scrollbar { display: none; }
.chips.tema-eras .chip { flex-shrink: 0; }
.chips.tema-eras::after { content: ''; flex: 0 0 16px; }
/* 12px: com 14 o visto encostava na borda do círculo de 26 (medidor de layout). */
.tema-marca svg { width: 12px; height: 12px; }

/* ---------- Foto da capa (js/capa-foto.js) ----------
   Diálogo próprio: dicas de como fotografar, os quatro cantos para conferir
   e a prévia endireitada. O palco da foto é sempre escuro (é foto, nos dois
   temas), e o verde dos cantos é fixo pelo mesmo motivo. */
.capa-foto {
  --capa-foto-verde: #3FBF62;
  width: min(600px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: 18px;
  background: var(--superficie);
  color: var(--texto);
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7);
}
.capa-foto[open] { display: flex; flex-direction: column; }
.capa-foto:not([data-etapa="dicas"]) { height: min(820px, calc(100dvh - 24px)); }
.capa-foto::backdrop { background: rgba(6, 3, 10, .72); }
.capa-foto-topo { display: flex; align-items: center; gap: 12px; padding: 14px 12px 8px 20px; }
.capa-foto-titulo { flex: 1; min-width: 0; margin: 0; font-family: var(--titulo); font-size: var(--t2); font-weight: 700; letter-spacing: -.01em; }
.capa-foto-fechar {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--texto-fraco);
  transition: color var(--rapido), background-color var(--rapido);
}
.capa-foto-fechar svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .capa-foto-fechar:hover { color: var(--texto); background: rgba(255, 255, 255, .08); }
}
.capa-foto-etapa {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 14px;
  padding: 0 20px 20px; overflow-y: auto;
  animation: capa-foto-entra var(--normal) var(--curva);
}
.capa-foto-etapa[hidden] { display: none; }
@keyframes capa-foto-entra { from { opacity: 0; transform: translateY(6px); } }

/* Dicas. */
.capa-foto-guia { display: grid; grid-template-columns: 168px 1fr; gap: 20px; align-items: center; }
.capa-foto-desenho { display: block; width: 100%; height: auto; }
.capa-foto-d-celular { fill: #0A0A0C; }
.capa-foto-d-mesa { fill: #D9CFBF; }
.capa-foto-d-sombra { fill: rgba(40, 28, 10, .22); }
.capa-foto-d-capa { fill: #15121A; }
.capa-foto-d-ziper { fill: none; stroke: #C4962A; stroke-width: 2.5; stroke-dasharray: 3 2; }
.capa-foto-d-marca { fill: none; stroke: #2C2833; stroke-width: 1.5; }
.capa-foto-d-pagina { fill: #121016; }
.capa-foto-d-costura { fill: none; stroke: #5D5866; stroke-width: 1.2; stroke-dasharray: 2.5 2; }
.capa-foto-d-cantos { fill: none; stroke: var(--capa-foto-verde); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.capa-foto-dicas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: var(--t4); line-height: 1.4; color: var(--texto-fraco); }
.capa-foto-dicas li { position: relative; padding-left: 16px; }
.capa-foto-dicas li::before { content: ''; position: absolute; left: 1px; top: .5em; width: 6px; height: 6px; border-radius: 2px; background: var(--verde); }
.capa-foto-dicas strong { color: var(--texto); font-weight: 600; }
.capa-foto-erro { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 123, 123, .1); color: var(--perigo); font-size: var(--t4); line-height: 1.4; }
.capa-foto-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: auto; }
.capa-foto-acoes .primario, .capa-foto-acoes .secundario { min-height: 46px; }

/* Cantos. */
.capa-foto-status { margin: 0; font-size: var(--t4); line-height: 1.4; color: var(--texto-fraco); }
.capa-foto-palco {
  position: relative; flex: 1 1 0; min-height: 240px; border-radius: 14px; overflow: hidden;
  background: #0A0A0C; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.capa-foto-foto { position: absolute; left: 0; top: 0; }
.capa-foto-vista { display: block; width: 100%; height: 100%; border-radius: 3px; }
.capa-foto-linhas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.capa-foto-sombra { fill: rgba(5, 2, 9, .55); }
.capa-foto-contorno { fill: none; stroke: var(--capa-foto-verde); stroke-width: 2; stroke-linejoin: round; }
.capa-foto-alca {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 999px; background: transparent; cursor: grab; touch-action: none;
}
.capa-foto-alca::before {
  content: ''; position: absolute; inset: 11px; border-radius: 999px;
  border: 2.5px solid var(--capa-foto-verde); background: rgba(63, 191, 98, .25);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .55);
  transition: transform var(--rapido) var(--curva), background-color var(--rapido);
}
.capa-foto-alca.ativa { cursor: grabbing; }
.capa-foto-alca.ativa::before { transform: scale(1.2); background: rgba(63, 191, 98, .5); }
.capa-foto-alca:focus-visible { outline: none; }
.capa-foto-alca:focus-visible::before { box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 1px 5px rgba(0, 0, 0, .55); }
.capa-foto-lupa {
  position: absolute; left: 0; top: 0; width: 112px; height: 112px; border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 10px 28px -6px rgba(0, 0, 0, .7);
  pointer-events: none; opacity: 0; transition: opacity var(--rapido) var(--curva);
}
.capa-foto-lupa.visivel { opacity: 1; }
.capa-foto-ferramentas { display: flex; flex-wrap: wrap; gap: 8px; }
.capa-foto-ferramentas .chip { min-height: 36px; }
.capa-foto-ferramentas .chip:disabled { opacity: .45; cursor: default; }

/* Resultado. */
.capa-foto-resultado { position: relative; flex: 1 1 0; min-height: 240px; display: grid; place-items: center; }
.capa-foto-imagem { display: block; border-radius: 8px; box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06); }

/* No celular, tela cheia: a foto precisa de todo o espaço. */
@media (max-width: 560px) {
  .capa-foto, .capa-foto:not([data-etapa="dicas"]) {
    width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0;
  }
  .capa-foto-topo { padding: calc(10px + env(safe-area-inset-top)) 8px 6px 16px; }
  .capa-foto-etapa { padding: 0 16px calc(16px + env(safe-area-inset-bottom)); gap: 12px; }
  .capa-foto-guia { grid-template-columns: 1fr; justify-items: center; gap: 16px; }
  .capa-foto-desenho { width: 136px; }
  .capa-foto-dicas { justify-self: stretch; }
  .capa-foto-acoes { flex-direction: column-reverse; }
  .capa-foto-acoes > button { width: 100%; }
  .capa-foto-palco { margin: 0 -16px; border-radius: 0; }
}

/* ---------- Estilo do binder (11/10/2026, js/estilo.js) ----------
   O binder de verdade do Enzo: lona preta com trama, costura e zíper
   mostarda, cantos redondos do lado da abertura, marca em baixo-relevo,
   lombada com texto em foil, contracapa de camurça, páginas pretas com
   costura pontilhada e o miolo em zigue-zague. São objetos físicos: as cores
   não mudam com o tema do site. Tudo em CSS (tramas em gradiente, grão em SVG
   de ruído), nada de imagem baixada. */
:root {
  --camurca: #151314;
  --foil-ouro: linear-gradient(100deg, #8C6A1F 0%, #E7C46A 16%, #FFF2C4 28%, #C1912E 44%, #F5D98D 60%, #9A7424 78%, #E8C25F 100%);
  --foil-prata: linear-gradient(100deg, #7E848B 0%, #E6E9EC 18%, #FFFFFF 29%, #9DA3AA 45%, #EEF0F2 61%, #868C93 79%, #D9DDE1 100%);
  --foil-ouro-v: linear-gradient(185deg, #8C6A1F 0%, #E7C46A 18%, #FFF2C4 30%, #C1912E 48%, #F5D98D 66%, #9A7424 84%, #E8C25F 100%);
  --foil-prata-v: linear-gradient(185deg, #7E848B 0%, #E6E9EC 18%, #FFFFFF 30%, #9DA3AA 48%, #EEF0F2 66%, #868C93 84%, #D9DDE1 100%);
  --grao-couro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.5 -.68'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --brilho-couro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .84 0 0 0 -1.1 .4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --grao-camurca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --estrela: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.9l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3C/svg%3E");
  --zigue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12'%3E%3Cpath d='M2 0 8 6 2 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-dasharray='3.2 1.6'/%3E%3C/svg%3E");
}

/* O foil: dourado ou prateado, no texto e na estrela. */
.letras-dourado { --foil: var(--foil-ouro); --foil-v: var(--foil-ouro-v); }
.letras-prateado { --foil: var(--foil-prata); --foil-v: var(--foil-prata-v); }
.foil {
  background-image: var(--foil, var(--foil-ouro)); background-size: 220% 100%; background-position: var(--brilho, 30%) 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55));
}
.foil-estrela {
  display: block; flex: none; aspect-ratio: 1; background-image: var(--foil, var(--foil-ouro)); background-size: 220% 100%;
  background-position: var(--brilho, 30%) 0;
  -webkit-mask: var(--estrela) center / contain no-repeat; mask: var(--estrela) center / contain no-repeat;
}

/* Os materiais (a capa, a lombada e as amostras do diálogo). */
.mat-lona :is(.bf-capa, .bf-lombada), .amostra-lona {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .45) 0 1px, transparent 1px 3px),
    linear-gradient(155deg, rgba(255, 255, 255, .08), transparent 42%, rgba(0, 0, 0, .3)),
    var(--material, #1A1A1D);
}
.mat-couro :is(.bf-capa, .bf-lombada), .amostra-couro {
  background:
    var(--brilho-couro) 0 0 / 120px 120px, var(--grao-couro) 0 0 / 120px 120px,
    radial-gradient(130% 90% at 28% 12%, rgba(255, 220, 180, .14), transparent 55%),
    linear-gradient(160deg, transparent 50%, rgba(0, 0, 0, .35)),
    var(--material, #3A2519);
}
.mat-liso :is(.bf-capa, .bf-lombada), .amostra-liso {
  background: linear-gradient(150deg, rgba(255, 255, 255, .12), transparent 38%, rgba(0, 0, 0, .3)), var(--material, #7BCDB9);
}
.mat-foto :is(.bf-capa, .bf-lombada) {
  background: linear-gradient(150deg, rgba(255, 255, 255, .1), transparent 40%, rgba(0, 0, 0, .3)), var(--material, #222);
}

/* ----- O binder fechado: lombada à esquerda, capa com os cantos redondos do
   lado da abertura. As medidas em cqi seguem a largura dele, então a capinha
   da lista e a prévia grande são o mesmo desenho. ----- */
.binder-fechado {
  container-type: inline-size;
  position: relative; display: grid; grid-template-columns: 10.7% 1fr;
  user-select: none; -webkit-user-select: none;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .42)) drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
}
/* O corpo do texto da lombada é medido aqui, na horizontal: dentro do texto
   em pé o cqi seguiria o outro eixo (e a altura do binder não é medida). */
.bf-lombada {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3cqi;
  padding: 5cqi 0 4cqi; overflow: hidden; border-radius: 2.6cqi 0 0 2.6cqi;
  font-size: 10px; font-size: clamp(5px, 4.4cqi, 15px);
}
/* A lombada é redonda: luz no meio, sombra nas beiradas e o vinco da capa. */
.bf-lombada::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(255, 255, 255, .09) 36%, rgba(0, 0, 0, .04) 62%, rgba(0, 0, 0, .62));
}
.bf-lombada .foil-estrela { position: relative; z-index: 1; width: 5.6cqi; }
.bf-lombada-texto {
  position: relative; z-index: 1; writing-mode: vertical-rl; min-height: 0; max-height: 100%;
  font: 700 1em/1 var(--titulo); letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background-image: var(--foil-v, var(--foil-ouro-v)); background-size: 100% 220%;
}
.bf-capa { position: relative; overflow: hidden; border-radius: .8cqi 6cqi 6cqi .8cqi; box-shadow: inset 1.2cqi 0 1.4cqi -1cqi rgba(0, 0, 0, .6); }
.bf-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mat-foto .bf-capa::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, .14), transparent 34%, transparent 70%, rgba(0, 0, 0, .25));
}
.bf-costura {
  position: absolute; inset: 6cqi 6.2cqi 6cqi 3.6cqi; pointer-events: none;
  border: 1px dashed var(--ziper); border-width: max(1px, .5cqi); border-radius: .6cqi 3.6cqi 3.6cqi .6cqi; opacity: .9;
}
/* O zíper em volta (cima, abertura e baixo): um anel recortado por máscara
   (os dentes são desenhados lá embaixo, junto com os do binder aberto). O
   lado da lombada fica de fora. */
.bf-ziper {
  --zw: 2.4cqi;
  position: absolute; inset: 1.4cqi 1.4cqi 1.4cqi -6cqi; pointer-events: none; z-index: 2;
  border-radius: 0 4.8cqi 4.8cqi 0;
}
/* A marca em baixo-relevo: o nome afundado no material. */
.bf-marca {
  position: absolute; left: 10cqi; right: 10cqi; bottom: 15%; z-index: 1; text-align: center;
  font: 700 16px/1.15 var(--titulo); font-size: clamp(8px, 6.4cqi, 24px); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(0, 0, 0, .34); text-shadow: 0 .3cqi 0 rgba(255, 255, 255, .14), 0 -.3cqi 0 rgba(0, 0, 0, .55);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.material-claro .bf-marca { color: rgba(0, 0, 0, .2); text-shadow: 0 .3cqi 0 rgba(255, 255, 255, .5), 0 -.3cqi 0 rgba(0, 0, 0, .28); }
/* A capinha da lista: zíper mais grosso, iniciais no meio. */
.binder-fechado.mini { filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .4)); }
.binder-fechado.mini .bf-ziper { --zw: 3.8cqi; }
.binder-fechado.mini .bf-costura { inset: 10cqi 10cqi 10cqi 6cqi; border-width: 1px; }
.binder-fechado.mini .bf-lombada .foil-estrela { width: 7.5cqi; }
.binder-fechado.mini .bf-marca { top: 50%; bottom: auto; left: 6cqi; right: 6cqi; transform: translateY(-50%); font-size: 21cqi; letter-spacing: .02em; -webkit-line-clamp: 1; }
.cartao-lista > .binder-fechado { width: 54px; flex: none; }

/* ----- O binder aberto: a dupla sem estilo some do leiaute (tudo como era). */
.paginas .dupla { display: contents; }
.paginas.livro { --miolo: 26px; }
.paginas.livro .dupla { display: block; }
.paginas.livro .miolo, .paginas.livro .lado-capa.verso { display: none; }
.lado-capa { margin-bottom: 22px; }
.contracapa {
  container-type: inline-size; position: relative; overflow: hidden; display: grid; place-items: center;
  /* No celular ela vem antes da página 1: baixa, para a página 1 aparecer logo. */
  width: 100%; aspect-ratio: var(--proporcao, .74); max-height: min(32vh, 280px); border-radius: 8px;
  background:
    var(--grao-camurca) 0 0 / 120px 120px,
    linear-gradient(115deg, rgba(255, 255, 255, .045), transparent 38%, rgba(255, 255, 255, .025) 64%, transparent),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .45)),
    var(--camurca);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.cc-costura { position: absolute; inset: 10px; border: 1.5px dashed var(--ziper); border-radius: 5px; opacity: .7; pointer-events: none; }
.cc-texto { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14%; text-align: center; max-width: 100%; }
.cc-texto .foil-estrela { width: 22px; width: clamp(12px, 7cqi, 28px); margin-bottom: 6px; }
.cc-linha {
  max-width: 100%; overflow-wrap: anywhere;
  font: 600 14px/1.3 var(--titulo); font-size: clamp(9px, 4.4cqi, 17px); letter-spacing: .18em; text-transform: uppercase;
}

/* A página com estilo: preta com a costura pontilhada em volta de cada bolso
   e a faixa preta entre as colunas (foto 18 do binder do Enzo), branca, ou
   transparente sobre a camurça. A costura sai pelo outline, que não mexe no
   leiaute; arrastar e o foco do teclado continuam com o outline deles. */
.grade-pagina.folha-estilo { border-radius: 8px; border-color: rgba(255, 255, 255, .06); }
.grade-pagina.folha-preta { --costura-folha: rgba(255, 255, 255, .27); }
.grade-pagina.folha-preta:not(.com-fundo) { background: #09090A; column-gap: 14px; }
.folha-preta:not(.com-fundo) .bolso:not(.ocupado) { background: rgba(255, 255, 255, .035); border-color: transparent; }
.grade-pagina.folha-branca { --costura-folha: rgba(0, 0, 0, .3); border-color: rgba(0, 0, 0, .08); }
.grade-pagina.folha-branca:not(.com-fundo) { column-gap: 14px; }
.folha-branca:not(.com-fundo) .bolso:not(.ocupado) { border-color: transparent; }
.grade-pagina.folha-transparente { --costura-folha: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .16); }
.grade-pagina.folha-transparente:not(.com-fundo) {
  background:
    linear-gradient(125deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .02) 32%, rgba(255, 255, 255, .0) 58%, rgba(255, 255, 255, .08)),
    var(--grao-camurca) 0 0 / 120px 120px, var(--camurca);
}
.folha-transparente:not(.com-fundo) .bolso:not(.ocupado) { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); }
.folha-estilo .bolso:not(.alvo):not(.invalido):not(:focus-visible):not(:focus-within) {
  outline: 1.5px dotted var(--costura-folha); outline-offset: 2px;
}
.folha-transparente .bolso:not(.alvo):not(.invalido):not(:focus-visible):not(:focus-within) { outline-style: solid; outline-width: 1px; }

/* O sleeve (13/10/2026): o verso colorido aparece em volta da carta, como a
   capinha de 66 × 91 mm na carta de 63 × 88, e a frente leva a textura por
   cima de tudo. O enchimento em cima e embaixo é maior para a carta manter
   a proporção. Só na carta que a pessoa tem: o bolso que falta fica nu. */
.folha-estilo.com-sleeve .bolso.ocupado:not(.falta) {
  position: relative; padding: 3.2% 2.3%; background: var(--sleeve, transparent); border-radius: 5px;
}
.folha-estilo.com-sleeve .bolso.ocupado:not(.falta) > img { border-radius: 3px; }
.folha-estilo.sleeve-transparente .bolso.ocupado:not(.falta) {
  padding: 1.6% 1.2%; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}
.folha-estilo.com-sleeve .bolso.ocupado:not(.falta)::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
}
.folha-estilo.sleeve-brilhante .bolso.ocupado:not(.falta)::after {
  background: linear-gradient(125deg, transparent 28%, rgba(255, 255, 255, .2) 40%, transparent 52%, transparent 70%, rgba(255, 255, 255, .08) 80%, transparent 90%);
}
.folha-estilo.sleeve-fosco .bolso.ocupado:not(.falta)::after {
  background: var(--grao-camurca) 0 0 / 90px 90px, rgba(255, 255, 255, .07); opacity: .55; mix-blend-mode: screen;
}
.folha-estilo.sleeve-holo .bolso.ocupado:not(.falta) {
  background:
    linear-gradient(115deg, rgba(255, 70, 160, .5), rgba(255, 210, 60, .5) 22%, rgba(60, 255, 190, .5) 44%,
      rgba(60, 150, 255, .5) 66%, rgba(200, 80, 255, .5) 88%) var(--holo, 30%) 50% / 260% 260%,
    var(--sleeve, #B9BDC3);
  background-blend-mode: screen, normal;
}
.folha-estilo.sleeve-holo .bolso.ocupado:not(.falta)::after {
  background: linear-gradient(125deg, transparent 38%, rgba(255, 255, 255, .2) 50%, transparent 62%) var(--holo, 50%) 0 / 300% 100%;
}
/* As amostras no editor: sem sleeve (risco) e transparente (xadrez). */
.dialogo-botoes .estilo-cor.sem-sleeve {
  background: linear-gradient(135deg, transparent 44%, var(--perigo) 44% 56%, transparent 56%), rgba(255, 255, 255, .06);
}
.dialogo-botoes .estilo-cor.sleeve-claro { background: repeating-conic-gradient(#C9C9CF 0 25%, #F4F4F6 0 50%) 50% / 10px 10px; }

/* Computador largo: cada dupla vira o binder aberto. Os lados somem do
   leiaute (display: contents) para o título e a grade de cada um caírem na
   grade da dupla: títulos em cima, páginas embaixo, o miolo no meio. A
   camurça e o zíper são o ::before e o ::after da dupla, atrás das páginas. */
@media (min-width: 1100px) {
  #detalhe-conteudo .paginas.livro { display: flex; flex-direction: column; gap: 34px; }
  .paginas.livro .dupla {
    display: grid; grid-template-columns: var(--colunas-dupla, 1fr); grid-template-rows: auto auto;
    row-gap: 30px; justify-content: center; isolation: isolate; padding: 0 22px 22px;
  }
  .paginas.livro .dupla > :is(.pagina, .lado-capa) { display: contents; }
  .paginas.livro .dupla .pagina-titulo { grid-row: 1; align-self: end; width: 100%; margin: 0; }
  .paginas.livro .dupla :is(.grade-pagina, .contracapa) { grid-row: 2; position: relative; z-index: 1; width: 100%; }
  .paginas.livro .lado-esq > * { grid-column: 1; justify-self: end; }
  .paginas.livro .lado-dir > * { grid-column: 3; justify-self: start; }
  .paginas.livro .grade-pagina { align-self: stretch; align-content: start; }
  .paginas.livro .contracapa { aspect-ratio: auto; max-height: none; align-self: stretch; min-height: 100%; }
  .paginas.livro .miolo {
    display: block; position: relative; grid-row: 2; grid-column: 2; margin: -22px 0; z-index: 2;
    background:
      linear-gradient(90deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .12) 30%, rgba(255, 255, 255, .05) 50%, rgba(0, 0, 0, .12) 70%, rgba(0, 0, 0, .62)),
      var(--grao-camurca) 0 0 / 120px 120px, var(--camurca);
  }
  .paginas.livro .miolo::before {
    content: ''; position: absolute; top: 26px; bottom: 26px; left: 50%; width: 10px; transform: translateX(-50%);
    background: var(--ziper); opacity: .85;
    -webkit-mask: var(--zigue) center top / 10px 12px repeat-y; mask: var(--zigue) center top / 10px 12px repeat-y;
  }
  .paginas.livro .dupla::before {
    content: ''; grid-row: 2; grid-column: 1 / -1; margin: -22px; border-radius: 18px; z-index: 0;
    background:
      var(--grao-camurca) 0 0 / 120px 120px,
      radial-gradient(140% 100% at 50% 0%, rgba(255, 255, 255, .04), transparent 60%),
      var(--camurca);
    box-shadow: 0 0 0 3px var(--material, #1A1A1D), 0 0 0 4px rgba(0, 0, 0, .45), 0 34px 60px -30px rgba(0, 0, 0, .85);
  }
  .paginas.livro .dupla::after {
    --zw: 6px;
    content: ''; grid-row: 2; grid-column: 1 / -1; margin: -19px; border-radius: 15px; z-index: 0; pointer-events: none;
  }
  .paginas.livro .lado-capa.verso { display: contents; }
}

/* Os dentes do zíper: duas fileiras, uma em cada fita, em tons alternados
   (o brilho do metal). Cada dente passa do meio e encaixa entre os da outra
   fita: no meio a fileira é cheia, nas beiradas aparece a fita entre os
   dentes. Em pé em cima e embaixo, deitados nos lados. --zw é a largura do
   zíper; a máscara deixa só o anel, que segue os cantos redondos. */
.bf-ziper, .paginas.livro .dupla::after, .estilo-aberto::after, .folhear-ziper {
  --dente: calc(var(--zw) * .42); --passo: calc(var(--zw) * .84);
  --fileira: calc(var(--zw) * .62); --resto: calc(var(--zw) * .38);
  padding: var(--zw);
  background:
    repeating-linear-gradient(90deg, var(--ziper) 0 var(--dente), transparent 0 var(--passo)) 0 0 / 100% var(--fileira) no-repeat,
    repeating-linear-gradient(90deg, var(--ziper-claro) 0 var(--dente), transparent 0 var(--passo)) var(--dente) var(--resto) / 100% var(--fileira) no-repeat,
    repeating-linear-gradient(90deg, var(--ziper-claro) 0 var(--dente), transparent 0 var(--passo)) var(--dente) calc(100% - var(--resto)) / 100% var(--fileira) no-repeat,
    repeating-linear-gradient(90deg, var(--ziper) 0 var(--dente), transparent 0 var(--passo)) 0 100% / 100% var(--fileira) no-repeat,
    repeating-linear-gradient(180deg, var(--ziper) 0 var(--dente), transparent 0 var(--passo)) 0 0 / var(--fileira) 100% no-repeat,
    repeating-linear-gradient(180deg, var(--ziper-claro) 0 var(--dente), transparent 0 var(--passo)) var(--resto) var(--dente) / var(--fileira) 100% no-repeat,
    repeating-linear-gradient(180deg, var(--ziper-claro) 0 var(--dente), transparent 0 var(--passo)) calc(100% - var(--resto)) var(--dente) / var(--fileira) 100% no-repeat,
    repeating-linear-gradient(180deg, var(--ziper) 0 var(--dente), transparent 0 var(--passo)) 100% 0 / var(--fileira) 100% no-repeat,
    var(--fita);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* ----- Diálogo "Estilo do binder" -----
   O topo fica preso: a altura muda quando "Cor da capa" e "Tirar outra foto"
   aparecem e somem, e centralizado o diálogo andava debaixo do ponteiro. */
#dialogo.largo.estilo {
  --topo-estilo: 12px;
  width: min(880px, calc(100vw - 24px));
  margin: var(--topo-estilo) auto auto; max-height: calc(100dvh - var(--topo-estilo) - 12px);
}
.estilo-editor { display: grid; gap: 16px; margin-bottom: 6px; }
@media (min-width: 720px) {
  #dialogo.largo.estilo { --topo-estilo: clamp(16px, 5vh, 56px); }
  .estilo-editor { grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); align-items: start; gap: 22px; }
  .estilo-palco { position: sticky; top: 0; }
}
.estilo-palco {
  display: grid; gap: 14px; justify-items: center; padding: 16px 16px 20px; border-radius: 14px;
  background: var(--tinta);
  border: 1px solid var(--borda-fraca);
}
.estilo-vistas { display: flex; gap: 6px; justify-self: center; }
.dialogo-botoes .estilo-vistas .chip { padding: 6px 14px; }
.estilo-previa { width: 100%; min-height: 250px; display: grid; place-items: center; }
.estilo-previa .binder-fechado { width: min(236px, 74%); }
.estilo-opcoes { display: grid; gap: 14px; min-width: 0; }
.estilo-grupo { display: grid; gap: 7px; margin: 0; padding: 0; border: 0; min-width: 0; }
.estilo-grupo > legend { padding: 0; margin-bottom: 7px; }
.estilo-capas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dialogo-botoes .estilo-capa {
  display: grid; gap: 6px; justify-items: stretch; padding: 6px 6px 8px; border-radius: 12px; font-size: 12px; font-weight: 600;
  background: var(--tinta); border: 1px solid var(--borda-fraca); color: var(--texto); cursor: pointer;
  transition: border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.dialogo-botoes .estilo-capa:active { transform: scale(.96); }
.dialogo-botoes .estilo-capa[aria-pressed="true"] { border-color: var(--neon); box-shadow: inset 0 0 0 1px var(--neon); }
.estilo-amostra { display: block; aspect-ratio: 1.25; border-radius: 4px 9px 9px 4px; overflow: hidden; position: relative; }
.estilo-amostra.amostra-foto { display: grid; place-items: center; background: var(--superficie); border: 1px dashed var(--borda); color: var(--texto-fraco); }
.estilo-amostra.amostra-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.estilo-amostra svg { width: 22px; height: 22px; }
.estilo-cores { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dialogo-botoes .estilo-cor {
  width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .25);
}
html[data-tema="claro"] .dialogo-botoes .estilo-cor { border-color: rgba(0, 0, 0, .12); }
.dialogo-botoes .estilo-cor[aria-pressed="true"] { outline: 2px solid var(--neon); outline-offset: 2px; }
/* Outra cor: redonda como as outras, com o anel de arco-íris dizendo que abre o seletor. */
.estilo-cor-livre {
  -webkit-appearance: none; appearance: none; width: 30px; height: 30px; padding: 3px; border: 0; border-radius: 50%; cursor: pointer;
  background: conic-gradient(#FF5A5A, #FFD84A, #5BE07A, #4AD8FF, #5A6BFF, #E05AFF, #FF5A5A);
}
.estilo-cor-livre::-webkit-color-swatch-wrapper { padding: 0; }
.estilo-cor-livre::-webkit-color-swatch { border: 2px solid var(--superficie); border-radius: 50%; }
.estilo-cor-livre::-moz-color-swatch { border: 2px solid var(--superficie); border-radius: 50%; }
.estilo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.estilo-chips .chip { display: inline-flex; align-items: center; gap: 7px; }
.estilo-chip-amostra { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.estilo-chip-amostra.foil-ouro { background: var(--foil-ouro); }
.estilo-chip-amostra.foil-prata { background: var(--foil-prata); }
.estilo-chip-amostra.pag-preta { background: #09090A; }
.estilo-chip-amostra.pag-branca { background: #EFEFEF; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.estilo-chip-amostra.pag-transparente { background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08) 55%, rgba(255, 255, 255, .35)), #2a2a2e; }
#dialogo .estilo-campo, #dialogo .estilo-texto {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--borda);
  background: var(--tinta); color: var(--texto); font: inherit; font-size: 15px;
}
#dialogo .estilo-texto { resize: vertical; min-height: 74px; line-height: 1.4; }
.estilo-trocar { justify-self: start; }
.dialogo-botoes .estilo-trocar { padding: 7px 12px; font-size: 13px; }

/* No celular a prévia vem em cima das opções: presa no topo, menor e de
   ponta a ponta (o canto redondo do diálogo recorta), para cada toque em
   Letras, Lombada, Contracapa ou Página mostrar o resultado. O sticky conta
   a partir do padding do diálogo (20px): -20px encosta na borda dele. */
@media (max-width: 719.98px) {
  .estilo-palco {
    position: sticky; top: -20px; z-index: 3; margin: 0 -20px; gap: 8px; padding: 10px 16px 12px;
    border-radius: 0; border-width: 1px 0;
    box-shadow: 0 10px 16px -12px rgba(0, 0, 0, .55);
  }
  .estilo-previa { min-height: 150px; }
  .estilo-previa .binder-fechado { width: 120px; }
  .estilo-previa .estilo-aberto { width: min(100%, 236px); }
  .dialogo-botoes .estilo-vistas .chip { padding: 5px 12px; }
}

/* A prévia do binder aberto no diálogo: contracapa, miolo e a página 1. */
.estilo-aberto {
  position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr);
  padding: 12px; isolation: isolate;
}
.estilo-aberto::before {
  content: ''; position: absolute; inset: 0; border-radius: 12px; z-index: 0;
  background: var(--grao-camurca) 0 0 / 120px 120px, var(--camurca);
  box-shadow: 0 0 0 2px var(--material, #1A1A1D), 0 18px 34px -18px rgba(0, 0, 0, .8);
}
.estilo-aberto::after {
  --zw: 4px;
  content: ''; position: absolute; inset: 2px; border-radius: 10px; z-index: 0; pointer-events: none;
}
.estilo-aberto > * { position: relative; z-index: 1; }
.estilo-aberto .contracapa { aspect-ratio: auto; max-height: none; height: 100%; border-radius: 5px; }
.estilo-aberto .cc-costura { inset: 6px; border-width: 1px; }
.estilo-aberto .miolo {
  display: block; margin: -12px 0; z-index: 2;
  background: linear-gradient(90deg, rgba(0, 0, 0, .62), rgba(255, 255, 255, .05) 50%, rgba(0, 0, 0, .62)), var(--camurca);
}
.estilo-aberto .miolo::before {
  content: ''; position: absolute; top: 14px; bottom: 14px; left: 50%; width: 7px; transform: translateX(-50%); background: var(--ziper); opacity: .85;
  -webkit-mask: var(--zigue) center top / 7px 9px repeat-y; mask: var(--zigue) center top / 7px 9px repeat-y;
}
.estilo-aberto .grade-pagina { padding: 6px; gap: 4px; border-radius: 5px; }
.estilo-aberto .grade-pagina.folha-estilo:not(.com-fundo) { column-gap: 7px; }
.estilo-aberto .bolso { border-radius: 3px; }
.estilo-aberto .folha-estilo .bolso:not(.alvo):not(.invalido) { outline-width: 1px; outline-offset: 1px; }

/* As quatro folhas no "Novo binder": uma grade de quatro, nome e bolsos. */
#dialogo .medidas-dialogo.folhas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#dialogo .medidas-dialogo.folhas .chip { display: grid; gap: 2px; justify-items: center; padding: 8px 4px; border-radius: 12px; line-height: 1.15; }
#dialogo .medidas-dialogo.folhas .chip strong { font-size: 14px; }
#dialogo .medidas-dialogo.folhas .chip small { font-size: 11px; font-weight: 500; opacity: .82; }

/* ---------- Medidor de centralização (17/10/2026, js/centralizacao.js) ---------- */
dialog.centralizacao {
  width: min(720px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 20px;
  border: 1px solid var(--borda); border-radius: 18px; background: var(--superficie); color: var(--texto);
}
dialog.centralizacao::backdrop { background: rgba(5, 3, 8, .6); }
.centr-titulo { margin: 0 0 6px; font: 700 20px/1.2 var(--titulo); }
.centr-lados { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 14px 0; }
.centr-lado { display: grid; gap: 8px; align-content: start; }
.centr-lado h3 { margin: 0; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-fraco); }
.centr-foto:empty { aspect-ratio: 63 / 88; max-width: 252px; border-radius: 10px; border: 1px dashed var(--borda); }
.centr-previa { width: 100%; max-width: 252px; height: auto; border-radius: 8px; display: block; }
.centr-numeros { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.centr-veredito { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.centr-nota { font: 700 18px/1.25 var(--titulo); color: var(--verde); }
.centr-botoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
@media (max-width: 560px) { .centr-lados { grid-template-columns: 1fr 1fr; gap: 10px; } dialog.centralizacao { padding: 16px; } }

/* Sugestões para os bolsos vazios e Conferir binder (17/10/2026). */
.sugestoes-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; }
.sugestoes-topo:first-child { margin-top: 0; }
.sugestoes-topo .imprimir-rotulo { margin: 0; }
.conferencia { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-bottom: 4px; }
.conferencia-ponto { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
  border-radius: 12px; border: 1px solid var(--borda); text-align: left; }
.conferencia-ponto p { margin: 0; font-size: 14px; line-height: 1.4; }
.conferencia-ponto button { flex-shrink: 0; }
@media (max-width: 560px) {
  .conferencia-ponto { flex-direction: column; align-items: stretch; }
}
.dialogo-botoes .sugestoes-topo button.link { background: none; border: 0; padding: 4px 2px; color: var(--neon-claro); font-weight: 600; font-size: 13px; }
.bolso-sugestoes { grid-auto-columns: 112px; }
.bolso-sugestoes .carregando { grid-column: 1 / -1; margin: 6px 0; white-space: nowrap; }

/* O idioma do site (18/10/2026): sigla no topo, nome inteiro na capa. */
.seletor-idioma { background: transparent; color: var(--texto-fraco); border: 1px solid var(--borda); border-radius: 8px;
  padding: 4px 6px; font: inherit; font-size: 13px; cursor: pointer; }
.seletor-idioma:hover, .seletor-idioma:focus-visible { color: var(--texto); }
.seletor-idioma option { color: var(--texto); background: var(--superficie); }
#tela-inicio { position: relative; }
.seletor-idioma.no-canto { position: absolute; top: 16px; right: 16px; z-index: 2; }

/* Relatar um problema (18/10/2026). */
.relato-texto, .relato-contato { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--borda); background: var(--tinta); color: var(--texto); font: inherit; font-size: 14px; }
.relato-texto { resize: vertical; min-height: 110px; }
.relato-aviso:empty { display: none; }

/* Apagar e marcar páginas do binder (18/10/2026). */
/* O "⋯" da página (24/10/2026): discreto, sem contorno até abrir. */
.pagina-titulo .acao-icone {
  position: relative; width: 34px; height: 34px; padding: 0; display: grid; place-items: center;
  border-radius: 10px; border-color: transparent; background: none; color: var(--texto-fraco);
}
.pagina-titulo .acao-icone svg { width: 20px; height: 20px; }
.lado-capa .contracapa.tocavel { cursor: pointer; }
.lado-capa .contracapa.tocavel:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
.pagina.pagina-marcada .grade-pagina { outline: 3px solid var(--perigo); outline-offset: 3px; border-radius: 10px; }
.faixa-selecao { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin: 8px 0 14px; border: 1px solid var(--borda); border-radius: 12px; font-size: 14px; }

/* Página nova no fim do binder (18/10/2026): na contracapa de trás, ou num
   cartão depois da última página quando ela não aparece. */
.nova-pagina-cartao { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 20px;
  border: 1px dashed var(--borda); border-radius: 14px; background: color-mix(in srgb, var(--superficie) 88%, transparent);
  text-align: center; position: relative; z-index: 1; }
.nova-pagina-cartao strong { font-size: 15px; }
.nova-pagina-opcoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.nova-pagina-solta { margin: 6px auto 24px; display: flex; justify-content: center; }
.nova-pagina-solta .nova-pagina-cartao { width: 100%; padding: 26px 20px; }
@media (min-width: 1100px) {
  #detalhe-conteudo .paginas.livro:has(.lado-capa.verso .nova-pagina-cartao) ~ .nova-pagina-solta { display: none; }
}
.nova-pagina-opcoes button { border: 1px solid var(--borda); padding: 8px 16px; border-radius: 10px; }
.nova-pagina-opcoes button:hover { border-color: var(--neon-claro); color: var(--texto); }

/* Organizar a página (18/10/2026): cada jeito com a página em miniatura. */
.org-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; width: 100%; margin-bottom: 4px; }
/* No celular, duas opções por linha: uma por linha virava uma rolagem longa. */
@media (max-width: 560px) {
  .org-opcoes { grid-template-columns: 1fr 1fr; gap: 8px; }
  .org-opcao { padding: 8px; gap: 8px; border-radius: 12px; }
  .org-texto strong { font-size: 14px; }
  .org-texto .dica { font-size: 12px; }
  .org-tag { font-size: 10px; padding: 1px 6px; }
}
.org-opcao { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--borda);
  background: transparent; color: var(--texto); text-align: left; cursor: pointer; font: inherit;
  transition: border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva); }
.org-opcao:hover:not(:disabled) { border-color: var(--neon); transform: translateY(-1px); }
.org-opcao:disabled { opacity: .55; cursor: default; }
.org-opcao.recomendado { border-color: var(--neon); }
.org-texto { display: flex; flex-direction: column; gap: 4px; }
.org-texto strong { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.org-texto .dica { font-size: 13px; line-height: 1.4; margin: 0; }
.org-tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--neon-claro);
  border: 1px solid var(--borda); border-radius: 999px; padding: 2px 8px; }
.org-previa { display: grid; gap: 3px; padding: 6px; border-radius: 8px; background: rgba(0, 0, 0, .25); }
.org-bolso { aspect-ratio: 63 / 88; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.org-bolso img { width: 100%; height: 100%; object-fit: cover; display: block; }
.org-bolso.org-vazio { background: transparent; border: 1px dashed rgba(255, 255, 255, .18); }
html[data-tema="claro"] .org-previa { background: rgba(0, 0, 0, .06); }
html[data-tema="claro"] .org-bolso.org-vazio { border-color: rgba(0, 0, 0, .22); }
.org-bolso.org-falta img { opacity: .45; filter: grayscale(1); }
.org-bolso.org-fixo { background: color-mix(in srgb, var(--neon) 18%, transparent); }

/* Reordenar páginas (18/10/2026): a lista com a miniatura de cada página. */
.reordenar-lista { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%;
  max-height: 60vh; overflow: auto; }
.reordenar-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--borda);
  background: var(--superficie); }
.reordenar-item.arrastando { border-color: var(--neon); box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .6); }
.reordenar-pos { min-width: 1.6em; text-align: center; font-weight: 700; color: var(--texto-fraco); }
.reordenar-alca { cursor: grab; touch-action: none; user-select: none; padding: 8px 4px; font-size: 18px; color: var(--texto-fraco); }
.reordenar-item.arrastando .reordenar-alca { cursor: grabbing; }
.org-previa.reordenar-previa { width: 58px; flex-shrink: 0; padding: 3px; gap: 2px; }
.reordenar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.reordenar-info .dica { margin: 0; font-size: 13px; }
.reordenar-setas { display: flex; gap: 6px; }
.dialogo-botoes .reordenar-setas button { padding: 6px 12px; font-size: 16px; line-height: 1; }
.dialogo-botoes .reordenar-setas button:disabled { opacity: .35; }
@media (max-width: 560px) {
  .reordenar-item { gap: 6px; padding: 6px 8px; }
  .reordenar-pos { min-width: 1.2em; font-size: 13px; }
  .reordenar-alca { padding: 8px 2px; font-size: 16px; }
  .org-previa.reordenar-previa { width: 46px; }
  .reordenar-info strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reordenar-info .dica { font-size: 12px; white-space: nowrap; }
  .dialogo-botoes .reordenar-setas button { padding: 6px 9px; }
}

/* ---------- Folhear o binder como livro (19/10/2026, js/folhear.js) ---------- */
html.folheando, html.folheando body { overflow: hidden; }
.folhear {
  position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: radial-gradient(120% 90% at 50% 40%, #1C1C21, #0A0A0C 70%); color: #F3F3F5;
  user-select: none; -webkit-user-select: none;
}
.folhear-barra {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 6px calc(16px + env(safe-area-inset-left));
}
.folhear-nome { font-family: var(--titulo); font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.folhear-onde { flex: 1; min-width: 0; color: #B3A9C4; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folhear-fechar {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06); color: inherit; font-size: 24px; line-height: 1; cursor: pointer;
}
/* Nada rola dentro do palco: o dedo é todo da folha (sem o pan do navegador
   cancelando o arrasto no meio). */
.folhear-palco { position: relative; display: grid; place-items: center; overflow: hidden; perspective: 2600px; touch-action: none; cursor: pointer; }
.folhear-livro { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.4, .1, .2, 1); will-change: transform; }
.folhear-livro.sem-animacao, .folhear-livro.sem-animacao .folhear-folha { transition: none; }
.folhear-folha {
  position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.4, .1, .2, 1); will-change: transform;
}
.folhear-folha.virada { transform: rotateY(-180deg); }
.folhear-folha.girando, .folhear-folha.no-dedo, .folhear-folha.girando-solta { z-index: 999 !important; }
/* Longe da dupla da vez a folha não é desenhada (cada folha em 3D pesa no celular). */
.folhear-folha.longe { visibility: hidden; }
/* No dedo, a folha e o livro seguem o gesto sem atraso; ao soltar, terminam
   no tempo que falta (--folhear-dur, do js). */
.folhear.arrastando .folhear-livro, .folhear.arrastando .folhear-folha.no-dedo { transition: none; }
.folhear.soltando .folhear-livro, .folhear.soltando .folhear-folha.girando-solta {
  transition-duration: var(--folhear-dur, .75s); transition-timing-function: cubic-bezier(.2, .7, .3, 1);
}
.folhear-face {
  position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 0 6px 6px 0; background: #0E0B12; box-shadow: 0 10px 28px rgba(0, 0, 0, .42);
}
.folhear-face.verso { transform: rotateY(180deg); border-radius: 6px 0 0 6px; }
.folhear-face:empty { visibility: hidden; }
/* A sombra da lombada, no lado de dentro de cada face. */
.folhear-face::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.folhear-face.frente::after { background: linear-gradient(to right, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 9%); }
.folhear-face.verso::after { background: linear-gradient(to left, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 9%); }
/* A folha no dedo escurece no meio da volta, como papel contra a luz. */
.folhear-face.frente::after, .folhear-face.verso::after { background-color: rgba(0, 0, 0, var(--sombra, 0)); transition: background-color .3s; }
.folhear.arrastando .folhear-face::after { transition: none; }
/* A folha virando escurece e clareia como papel na luz. */
.folhear-folha.girando .folhear-face::after { animation: folhear-luz .75s ease-in-out; }
@keyframes folhear-luz { 50% { background-color: rgba(0, 0, 0, .28); } }
.folhear-conteudo { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.folhear-conteudo.e-pagina > * { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.folhear .pagina { margin: 0; }
.folhear .grade-pagina { border-radius: 4px; }
/* A capa ocupa a face inteira, sem a lombada (a lombada é a dobra do livro). */
.folhear-capa { width: 100%; height: 100%; aspect-ratio: auto !important; grid-template-columns: 1fr; filter: none; }
.folhear-capa .bf-lombada { display: none; }
.folhear-capa .bf-capa { border-radius: 0 6px 6px 0; }
.folhear-capa.de-tras .bf-capa { border-radius: 6px 0 0 6px; transform: scaleX(-1); }
/* A foto da capa: pequena e emoldurada enquanto só há a miniatura; a alta
   cobre a capa inteira. */
.folhear-foto-capa {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  max-width: min(68%, 360px); max-height: min(68%, 480px); border-radius: 4px;
  border: 6px solid #F4F0FA; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); object-fit: contain;
}
.folhear-foto-capa.alta { inset: 0; left: 0; top: 0; transform: none; width: 100%; height: 100%; max-width: none; max-height: none;
  border: 0; border-radius: 0 6px 6px 0; box-shadow: none; object-fit: cover; }
.folhear-conteudo.e-contracapa .contracapa { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; }
.folhear-seta {
  position: absolute; top: 50%; z-index: 2; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(20, 14, 28, .7); color: inherit;
  font-size: 30px; line-height: 1; cursor: pointer; backdrop-filter: blur(6px);
}
.folhear-seta.anterior { left: calc(10px + env(safe-area-inset-left)); }
.folhear-seta.proxima { right: calc(10px + env(safe-area-inset-right)); }
.folhear-seta:disabled { opacity: .25; cursor: default; }
.folhear-dica { margin: 0; padding: 4px 16px calc(10px + env(safe-area-inset-bottom)); text-align: center; color: #8F84A2; font-size: 12px; }
.folhear-rascunho { position: absolute; left: -10000px; top: 0; width: 1200px; visibility: hidden; }
@media (max-width: 560px) {
  .folhear-seta { width: 40px; height: 40px; margin-top: -20px; font-size: 26px; background: rgba(20, 14, 28, .55); }
}
@media (prefers-reduced-motion: reduce) {
  .folhear-livro, .folhear-folha { transition-duration: .01s; }
  .folhear-folha.girando .folhear-face::after { animation: none; }
}

/* O "Desfazer" no aviso rápido (19/10/2026). */
.aviso-rapido.com-acao { display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.aviso-acao {
  pointer-events: auto; border: 0; background: none; padding: 2px 4px; color: var(--neon-claro);
  font: inherit; font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.barra-acoes .acao-icone:disabled { opacity: .35; cursor: default; }

/* Etiquetas da Pokédex: os números da faixa e a prévia das três primeiras. */
.etiqueta-numeros { display: flex; align-items: center; gap: 8px; }
.etiqueta-numeros input { width: 84px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--borda); background: var(--tinta); color: var(--texto); font: inherit; }
.etiqueta-previa { display: flex; gap: 10px; justify-content: center; align-items: flex-start; min-height: 60px; margin: 4px 0; flex-wrap: wrap; }
.etiqueta-previa img { display: block; border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); background: #fff; }
.etiqueta-previa.formato-inteira img { width: 110px; }
.etiqueta-previa.formato-terco img { width: 170px; }
.etiqueta-previa.formato-faixa img { width: 200px; }
.pokedex-etiquetas { margin-bottom: 12px; }

/* O material dentro do livro (19/10/2026, "no modo livro não tem as
   texturas"): a camurça com grão, a costura, a moldura em volta da página e
   o zíper na beirada de fora, como no binder aberto da tela. */
.folhear-conteudo:not(.e-capa) {
  background:
    var(--grao-camurca) 0 0 / 120px 120px,
    radial-gradient(140% 100% at 50% 0%, rgba(255, 255, 255, .05), transparent 60%),
    var(--camurca);
}
.folhear-ziper { --zw: 7px; position: absolute; z-index: 4; pointer-events: none; }
.folhear-face.frente .folhear-ziper { inset: 10px 10px 10px -12px; border-radius: 0 14px 14px 0; }
.folhear-face.verso .folhear-ziper { inset: 10px -12px 10px 10px; border-radius: 14px 0 0 14px; }
.folhear-conteudo.e-pagina::before {
  content: ''; position: absolute; inset: 24px; z-index: 0; pointer-events: none;
  border: 1.5px dashed var(--ziper); border-radius: 8px; opacity: .55;
}
.folhear-face.frente .folhear-conteudo.e-pagina::before { left: 14px; }
.folhear-face.verso .folhear-conteudo.e-pagina::before { right: 14px; }
.folhear-conteudo.e-pagina > .paginas { z-index: 1; }
.folhear-conteudo.e-pagina .grade-pagina { box-shadow: 0 12px 30px rgba(0, 0, 0, .55); }
/* A capa com a foto em alta: a foto cobre, o brilho do material vem por cima. */
.folhear-capa.com-foto-alta .bf-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.folhear-capa .bf-capa::after { z-index: 3; }

/* A medida do bolso e o guia de condições (19/10/2026). */
.medida-campos { display: flex; gap: 10px; max-width: 360px; }
.medida-campo { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texto-fraco); }
.medida-campo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.medida-campo input { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--borda); background: var(--tinta); color: var(--texto); font: inherit; }
.medida-nota { margin: 2px 0 0; }
.guia-previa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: min(100%, 330px); margin: 4px auto; }
.guia-previa img { display: block; width: 100%; aspect-ratio: var(--proporcao, 65 / 90); object-fit: cover; border-radius: 4px; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }

/* Várias cartas em sequência (19/10/2026): a contagem no alto, as últimas
   lidas embaixo da moldura e um clarão verde quando uma conta. */
.scanner-contagem {
  position: absolute; top: max(18px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  margin: 0; padding: 6px 16px; border-radius: 999px; background: rgba(0, 0, 0, .65);
  color: #fff; font-size: 16px; font-weight: 800; white-space: nowrap;
}
.scanner-lista {
  position: relative; list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 86vw;
}
.scanner-lista li {
  padding: 3px 12px; border-radius: 999px; background: rgba(0, 0, 0, .55);
  color: rgba(255, 255, 255, .9); font-size: 13px; font-weight: 600;
  max-width: 86vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scanner-lista li:first-child { background: rgba(46, 158, 79, .85); color: #fff; }
.scanner.varias .scanner-acoes { flex-wrap: wrap; padding: 0 12px; }

/* A conferência das escaneadas. */
.esc-conferir { display: flex; flex-direction: column; gap: 8px; text-align: left; margin-bottom: 6px; }
.esc-titulo { margin: 10px 0 0; font-size: 15px; }
.esc-explica { margin: 0; }
.esc-linha {
  display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 8px 12px; align-items: start;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie);
}
.esc-linha .esc-arte { grid-row: span 2; }
.esc-linha.conferir { border-color: var(--amarelo); }
.esc-linha.sem-carta { opacity: .75; }
.esc-arte { flex: none; width: 60px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 4px; background: var(--tinta); }
.esc-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.esc-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.esc-cabeca strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esc-trocar { flex: none; padding: 0; font-size: 13px; }
.esc-aviso { color: var(--amarelo); font-size: 13px; }
.esc-ja { color: var(--neon-claro); font-size: 13px; font-weight: 700; }
.esc-alternativas { max-width: 100%; margin: 4px 0; }
.esc-controles { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.esc-controles .chips { gap: 6px; }
@media (max-width: 560px) {
  .esc-linha .esc-arte { grid-row: auto; }
  .esc-controles { grid-column: 1 / -1; }
  .dialogo-botoes .esc-controles .chip, .dialogo-botoes .esc-todas .chip { padding: 6px 10px; }
}
.esc-qtd { display: inline-flex; align-items: center; gap: 4px; padding: 2px; border: 1px solid var(--borda); border-radius: 999px; }
.esc-passo {
  display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--texto); font-size: 18px; line-height: 1; cursor: pointer;
}
.esc-passo:hover:not(:disabled) { background: var(--tinta); }
.esc-passo:disabled { opacity: .35; cursor: default; }
.esc-n { min-width: 30px; text-align: center; font-weight: 800; font-size: 14px; }
.esc-controles .chips { margin: 0; }
.esc-todas { margin-bottom: 2px; }
/* Dentro do diálogo, o botão genérico é bloco largo: estes voltam ao tamanho deles. */
.dialogo-botoes .esc-trocar { width: auto; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--neon-claro); font-size: 13px; font-weight: 600; }
.dialogo-botoes .esc-trocar:hover { text-decoration: underline; background: transparent; }
.dialogo-botoes .esc-passo { width: 30px; height: 30px; min-height: 0; padding: 0; border: 0; background: transparent; font-size: 18px; line-height: 1; }
.dialogo-botoes .esc-passo:hover:not(:disabled) { background: var(--tinta); }
.esc-sem-arte { display: grid; place-items: center; color: var(--texto-fraco); font-size: 22px; font-weight: 800; }
.esc-variantes { gap: 6px; margin: 4px 0 2px; align-items: center; }
.dialogo-botoes .esc-variantes .chip { padding: 4px 10px; font-size: 12px; }
.dialogo-botoes .esc-separar { width: auto; padding: 0 2px; border: 0; background: transparent; color: var(--neon-claro); font-size: 12px; font-weight: 600; }
.dialogo-botoes .esc-separar:hover { text-decoration: underline; background: transparent; }
.esc-busca { display: flex; gap: 6px; margin-top: 6px; }
.esc-busca input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--borda); background: var(--tinta); color: var(--texto); font: inherit; }
.dialogo-botoes .esc-busca button { padding: 8px 12px; }
.esc-lote { margin: 0; }

/* Várias cartas sem moldura (19/10/2026): o desenho da carta achada por
   cima do vídeo, e a lanterna. */
.scanner.livre .scanner-desenho { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scanner.livre .scanner-aviso { position: absolute; bottom: calc(max(24px, env(safe-area-inset-bottom)) + 96px); margin: 0; }
.scanner.livre .scanner-lista { position: absolute; top: calc(max(18px, env(safe-area-inset-top)) + 44px); margin: 0; }
.scanner-lanterna {
  position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(0, 0, 0, .55); color: #fff; font-weight: 700; font-size: 13px;
}
.scanner-lanterna.ativo { background: #e6b422; border-color: #e6b422; color: #000; }
.d-loja span { flex-direction: row; align-items: center; gap: 8px; }
.d-loja-bandeira { font-style: normal; font-size: 16px; line-height: 1; }
.d-lojas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.d-lojas .d-loja { margin: 0; }

/* A trava com Face ID e digital (20/10/2026): tampa o app inteiro. */
.trava {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: var(--tinta);
}
.trava-caixa { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(320px, 86vw); text-align: center; }
.trava-marca { width: 180px; height: 48px; margin-bottom: 18px; }
.trava-caixa .primario { width: 100%; }
.trava-erro { margin: 0; }
#trava-linha { padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); color: var(--texto); font-weight: 600; cursor: pointer; }
#trava-linha input { width: 20px; height: 20px; margin: 0; }
.scanner.varias .scanner-foto { padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); color: #fff; font-weight: 700; }
/* A moldura no formato da carta (22/10/2026, como a da Liga): no alto do
   meio, acima do painel e dos botões. Branca esperando, laranja lendo,
   verde achou. */
.scanner-guia {
  position: absolute; left: 50%; top: calc(max(18px, env(safe-area-inset-top)) + 96px); z-index: 1;
  width: min(74vw, 340px, calc((100vh - 360px) * 63 / 88)); aspect-ratio: 63 / 88; transform: translateX(-50%);
  border: 3px solid rgba(255, 255, 255, .9); border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .32); transition: border-color .2s, box-shadow .2s;
}
.scanner-guia[hidden] { display: none; }
.scanner-guia.lendo { border-color: var(--laranja); }
.scanner-guia.longe { border-color: var(--amarelo); }
.scanner-guia.achou { border-color: #3ddc84; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .32), 0 0 28px 4px rgba(61, 220, 132, .55); }
/* O escurecido em volta da moldura não cobre os botões nem os avisos. */
.scanner.com-guia :is(.scanner-acoes, .scanner-aviso, .scanner-contagem, .scanner-lanterna) { z-index: 2; }
/* Com a moldura, o aviso fica entre a contagem e ela. */
.scanner.com-guia .scanner-aviso { top: calc(max(18px, env(safe-area-inset-top)) + 50px); bottom: auto; }
.scanner.com-guia:not(.uma) .scanner-lista { display: none; }

/* O scanner de uma carta com a câmera aberta (22/10/2026): a carta achada
   num painel embaixo e o número digitado com sugestões em cima. */
.scanner.uma .scanner-aviso { top: calc(max(18px, env(safe-area-inset-top)) + 52px); bottom: auto; }
.scanner-resultado {
  position: absolute; left: 12px; right: 12px; bottom: calc(max(24px, env(safe-area-inset-bottom)) + 58px); z-index: 3;
  display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px 12px; align-items: center;
  padding: 10px; border-radius: 16px; color: #fff;
  background: rgba(18, 12, 26, .92); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(8px);
}
.scanner-resultado[hidden] { display: none; }
.scanner-resultado.subindo { animation: painel-sobe .38s cubic-bezier(.23, 1, .32, 1); }
@keyframes painel-sobe { from { transform: translateY(72px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .scanner-resultado.subindo { animation-name: painel-aparece; }
  @keyframes painel-aparece { from { opacity: 0; } }
}
/* No de várias o painel mostra a última contada: sem Adicionar e Detalhes
   (tudo entra na conferência), e a lista de cima dá lugar ao aviso. */
.scanner:not(.uma) :is([data-res-adicionar], [data-res-detalhes]) { display: none; }
.scanner.com-painel:not(.uma) .scanner-lista { display: none; }
.scanner.com-painel:not(.uma) .scanner-aviso { top: calc(max(18px, env(safe-area-inset-top)) + 52px); bottom: auto; }
.scanner-resultado img { grid-row: 1 / span 2; width: 62px; aspect-ratio: 63 / 88; object-fit: cover; border-radius: 6px; background: rgba(255, 255, 255, .06); }
.scanner-resultado.buscando img { opacity: .25; }
.scanner-resultado-info { display: grid; gap: 1px; min-width: 0; }
.scanner-resultado-info strong { font: 700 15px var(--titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scanner-resultado-linha { font-size: 12px; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scanner-resultado-preco { font: 700 14px var(--titulo); color: var(--verde); }
.scanner-resultado-preco:empty { display: none; }
.scanner-resultado-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.scanner-resultado-acoes .link { color: rgba(255, 255, 255, .8); font-size: 13px; }
.scanner-resultado.buscando .scanner-resultado-acoes { visibility: hidden; }
.scanner-digitar {
  position: absolute; left: 12px; right: 12px; top: calc(max(16px, env(safe-area-inset-top)) + 8px); z-index: 4;
  display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: 62vh;
  padding: 10px; border-radius: 16px; background: rgba(18, 12, 26, .96); border: 1px solid rgba(255, 255, 255, .14);
}
.scanner-digitar[hidden] { display: none; }
.scanner-digitar-linha { display: flex; gap: 8px; align-items: center; }
.scanner-digitar input {
  flex: 1; min-width: 0; padding: 12px 14px; border-radius: 12px; font: 600 18px var(--titulo); letter-spacing: .02em;
  color: #fff; background: #0A0A0C; border: 1px solid var(--laranja);
}
.scanner-digitar-linha .link { color: #fff; font-size: 26px; line-height: 1; padding: 4px 8px; }
.scanner-sugestoes { list-style: none; margin: 8px 0 0; padding: 0; overflow: auto; display: grid; gap: 6px; }
.scanner-sugestoes button {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 12px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .07); color: #fff; text-align: left; cursor: pointer;
}
.scanner-sugestoes strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scanner-sugestoes span { flex: none; color: rgba(255, 255, 255, .65); font-size: 13px; }

/* O scanner de uma carta (20/10/2026): o motor do de várias sem a contagem. */
.scanner.uma :is(.scanner-contagem, .scanner-lista, [data-fim], [data-desfazer], [data-mais]) { display: none !important; }

/* ---------- O scanner, visual novo (22/10/2026) ----------
   Enzo: "a visualização tá feia". Em cima o × , a contagem e a lanterna; no
   meio a moldura, com o resto escurecido e as etapas da abertura dentro
   dela; logo abaixo o aviso; embaixo botões redondos com ícone. */
/* A moldura no meio do espaço livre do celular (Enzo: "tem que centralizar
   mais a moldura", "o iPhone tem o notch"): entre a barra de cima, abaixo do
   notch, e os botões, acima da barra do início. O aviso fica logo acima dela.
   Ela não se mexe: a câmera fica parada, e a moldura andando tirava a carta
   do centro (no modo de várias ela contaria duas vezes). O painel que sobe é
   baixo e sai quando a próxima carta entra. */
.scanner {
  --topo-livre: calc(max(12px, env(safe-area-inset-top)) + 56px);
  --baixo-livre: calc(max(18px, env(safe-area-inset-bottom)) + 84px);
  --guia-w: min(78vw, 340px, calc((100dvh - 240px) * 63 / 88));
  --guia-h: calc(var(--guia-w) * 88 / 63);
  --guia-meio: calc(var(--topo-livre) + 40px + max(0px, (100dvh - var(--topo-livre) - 40px - var(--baixo-livre) - var(--guia-h)) / 2));
  --guia-topo: var(--guia-meio);
}
/* Na tela deitada (computador, Mac, tablet de lado) a webcam tem pouca
   resolução: a moldura cresce para a carta ocupar mais pixels da câmera. */
@media (min-aspect-ratio: 1/1) {
  .scanner { --guia-w: min(78vw, 520px, calc((100dvh - 300px) * 63 / 88)); }
}
.scanner-topo {
  position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 5;
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px;
}
.scanner-topo .scanner-contagem {
  position: static; transform: none; justify-self: center; margin: 0; padding: 7px 16px;
  font: 700 15px var(--titulo); background: rgba(0, 0, 0, .45); backdrop-filter: blur(8px);
}
.scanner.uma .scanner-topo .scanner-contagem { display: block !important; }
.scanner-icone {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer; backdrop-filter: blur(8px);
}
.scanner-icone svg { width: 22px; height: 22px; }
.scanner-icone[hidden] { display: none; }
.scanner-icone.confirmando { background: var(--perigo); border-color: var(--perigo); color: #000; }
.scanner-topo .scanner-lanterna { position: static; grid-column: 3; padding: 0; font-size: 0; }
.scanner-topo .scanner-lanterna.ativo { background: var(--amarelo); border-color: var(--amarelo); color: #000; }

/* "Ficou feio" (22/10/2026): só os quatro cantos, grossos, na cor do
   estado, sobre um contorno fininho; fora da moldura, escuro, porque o que
   está fora não é lido. */
.scanner.com-guia .scanner-guia {
  top: var(--guia-topo); width: var(--guia-w); border-radius: 18px; border: 1px solid rgba(255, 255, 255, .3);
  color: #fff; box-shadow: 0 0 0 100vmax rgba(5, 3, 8, .66); transition: color .2s, box-shadow .2s;
}
.scanner.com-guia .scanner-guia.lendo { color: var(--laranja); border-color: rgba(255, 255, 255, .3); }
.scanner.com-guia .scanner-guia.longe { color: var(--amarelo); border-color: rgba(255, 255, 255, .3); }
.scanner.com-guia .scanner-guia.achou { color: #3ddc84; border-color: rgba(61, 220, 132, .5); box-shadow: 0 0 0 100vmax rgba(5, 3, 8, .66), 0 0 30px 2px rgba(61, 220, 132, .45); }
.guia-canto { position: absolute; width: 17%; aspect-ratio: 1; border: 0 solid currentColor; }
.guia-canto:nth-of-type(1) { top: -3px; left: -3px; border-width: 5px 0 0 5px; border-top-left-radius: 20px; }
.guia-canto:nth-of-type(2) { top: -3px; right: -3px; border-width: 5px 5px 0 0; border-top-right-radius: 20px; }
.guia-canto:nth-of-type(3) { bottom: -3px; left: -3px; border-width: 0 0 5px 5px; border-bottom-left-radius: 20px; }
.guia-canto:nth-of-type(4) { bottom: -3px; right: -3px; border-width: 0 5px 5px 0; border-bottom-right-radius: 20px; }
.scanner.preparando .guia-canto { opacity: 0; }
/* A sugestão da imagem: "É esta" e "Não" no lugar dos botões do resultado. */
.scanner-resultado :is([data-sug-sim], [data-sug-nao]) { display: none; }
.scanner-resultado.sugestao :is([data-sug-sim], [data-sug-nao]) { display: inline-flex; }
.scanner-resultado.sugestao :is([data-res-adicionar], [data-res-detalhes], [data-res-outra]) { display: none !important; }
.scanner-resultado.sugestao { border-color: var(--laranja); }
/* O modo de teste (?quadros): o botão que manda os quadros, abaixo da
   lanterna, com quantos já estão guardados. */
/* Os cinco toques no título não podem virar zoom de toque duplo. */
.scanner-topo .scanner-contagem { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.scanner-quadros { position: absolute; top: calc(max(12px, env(safe-area-inset-top)) + 54px); right: 12px; z-index: 5; }
.scanner-quadros span {
  position: absolute; top: -4px; right: -4px; min-width: 18px; padding: 1px 4px; border-radius: 9px;
  background: var(--perigo); color: #000; font: 700 11px var(--titulo); text-align: center;
}
/* Na tela larga o painel e o digitar não esticam. */
.scanner :is(.scanner-resultado, .scanner-digitar) { max-width: 460px; margin-inline: auto; }
/* O painel baixo: os três botões numa linha só, para cobrir pouco da moldura. */
.scanner.com-guia .scanner-resultado { grid-template-columns: 52px minmax(0, 1fr); gap: 6px 12px; padding: 9px 10px; }
.scanner.com-guia .scanner-resultado img { width: 52px; }
.scanner.com-guia .scanner-resultado-acoes { flex-wrap: nowrap; gap: 6px; }
.scanner.com-guia .scanner-resultado-acoes .compacto { padding: 7px 12px; font-size: 13px; }
.scanner.com-guia .scanner-resultado-acoes .link { white-space: nowrap; padding: 4px 2px; }
.guia-preparo {
  position: absolute; inset: 0; display: none; place-content: center; justify-items: center; gap: 12px;
  border-radius: 17px; background: rgba(5, 3, 8, .82); color: #fff; text-align: center; padding: 16px;
}
.scanner.preparando .guia-preparo { display: grid; }
.guia-giro { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .18); border-top-color: var(--neon); animation: guia-giro .9s linear infinite; }
@keyframes guia-giro { to { transform: rotate(360deg); } }
.guia-passo { font: 600 14px var(--titulo); }
.guia-barra { width: 70%; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.guia-barra i { display: block; height: 100%; width: 0; background: var(--neon); transition: width .35s ease; }
@media (prefers-reduced-motion: reduce) { .guia-giro { animation: none; } }

/* O aviso logo acima da moldura, preso pelo pé: com duas linhas (tela
   estreita) ele cresce para cima e não cobre a moldura. */
.scanner.com-guia .scanner-aviso,
.scanner.com-guia.uma .scanner-aviso,
.scanner.com-guia.com-painel .scanner-aviso {
  position: absolute; top: auto; bottom: calc(100% - var(--guia-topo) + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 88vw; margin: 0; padding: 8px 16px; z-index: 2;
  font: 600 14px var(--titulo); background: rgba(0, 0, 0, .55); backdrop-filter: blur(8px);
}
.scanner.preparando .scanner-aviso { visibility: hidden; }

/* Os botões de baixo: redondos, com ícone e o nome embaixo. */
.scanner.com-guia .scanner-acoes {
  bottom: max(18px, env(safe-area-inset-bottom)); padding: 0 12px; gap: 18px; flex-wrap: nowrap; align-items: flex-end; z-index: 2;
}
.scanner-acao {
  display: grid; justify-items: center; gap: 5px; padding: 0; border: 0; background: none; color: #fff;
  font: 600 11px var(--titulo); cursor: pointer; min-width: 52px;
}
.scanner-acao svg {
  width: 22px; height: 22px; padding: 13px; border-radius: 50%; box-sizing: content-box;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(8px);
}
.scanner-acao:active svg { background: rgba(255, 255, 255, .26); }
.scanner-acao[hidden] { display: none; }
.scanner.varias .scanner-acao.scanner-foto { padding: 0; border: 0; background: none; border-radius: 0; }
.scanner-fim { align-self: center; padding: 12px 20px; border-radius: 999px; white-space: nowrap; }
.scanner.preparando :is(.scanner-acoes, .scanner-resultado) { opacity: .4; pointer-events: none; }
/* No de várias cabem quatro ícones e o Finalizar numa linha do celular. */
.scanner.com-guia:not(.uma) .scanner-acoes { gap: 8px; }
.scanner.com-guia:not(.uma) .scanner-acao { min-width: 48px; }
.scanner.com-guia:not(.uma) .scanner-fim { padding: 12px 16px; }


/* ==================== Do reel do Skyward (01/11/2026) ==================== */
/* Enzo: "veja como ficou essa UI" (dailyflutterui_2001). Quatro coisas
   trazidas para o nosso roxo: a barra em pílula (acima, no bloco do
   celular), o cartão em formato de passagem, o campo com o rótulo miúdo em
   cima do valor, e a espera com o fundo desfocado. */

/* A linha do deck em LISTA como uma passagem: cartão com a miniatura, o
   nome grande, e o canhoto do preço separado por uma linha tracejada com
   os dois recortes. */
.linha-deck.com-arte {
  position: relative; grid-template-columns: 40px auto minmax(0, 1fr) auto auto auto;
  gap: 10px 12px; margin: 0 0 8px; padding: 10px 12px;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie);
}
.linha-deck.com-arte .deck-mini { width: 40px; border-radius: 4px; }
.linha-deck.com-arte .nome { font-weight: 700; font-size: 15px; }
.linha-deck.com-arte .set { font-size: 12px; white-space: nowrap; }
.linha-deck.com-arte .qtd-controles { order: 1; }
.linha-deck.com-arte .preco {
  order: 2; position: relative; align-self: stretch; display: flex; align-items: center;
  margin-left: 2px; padding-left: 14px; min-width: 64px; justify-content: flex-end;
  border-left: 1px dashed color-mix(in srgb, var(--texto) 28%, transparent);
  font: 700 15px var(--titulo); color: var(--neon-claro);
}
.linha-deck.com-arte .preco:empty { display: none; }
.linha-deck.com-arte .preco::before, .linha-deck.com-arte .preco::after {
  content: ''; position: absolute; left: -7px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--tinta); border: 1px solid var(--borda); box-sizing: border-box;
}
.linha-deck.com-arte .preco::before { top: -17px; }
.linha-deck.com-arte .preco::after { bottom: -17px; }
html[data-tema="claro"] .linha-deck.com-arte .preco::before, html[data-tema="claro"] .linha-deck.com-arte .preco::after { background: var(--tinta); }
@media (max-width: 560px) {
  .linha-deck.com-arte { grid-template-columns: 36px auto minmax(0, 1fr) auto; }
  .linha-deck.com-arte .set { grid-column: 2 / 4; font-size: 11px; }
  .linha-deck.com-arte .preco { grid-row: 1 / 3; grid-column: 4; }
  .linha-deck.com-arte .qtd-controles { grid-column: 1 / 4; justify-content: flex-start; }
}

/* O campo com o rótulo miúdo em cima do valor ("Departure / Fri, 4 Sep"). */
.campo-rotulado {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie);
  transition: border-color var(--rapido) var(--curva);
}
.campo-rotulado:focus-within { border-color: var(--neon); }
.campo-rotulo { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-fraco); }
.campo-rotulado .campo-dialogo { margin: 0; padding: 2px 0; border: 0; border-radius: 0; background: transparent; font-size: 17px; font-weight: 600; }
.campo-rotulado .campo-dialogo:focus { outline: none; }
#dialogo .campo-rotulado .temas, #dialogo .campo-rotulado .medidas-dialogo { margin: 0; }
.campos-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 420px) { .campos-par { grid-template-columns: 1fr; } }
.filtros .campo-rotulado .chips { gap: 6px; }

/* A espera com o fundo desfocado ("Logging you in / Getting your tickets
   ready"): para o que leva segundos. Uma cartinha roxa gira enquanto o
   texto diz o andamento. */
.espera {
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center;
  background: rgba(10, 10, 12, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: espera-entra var(--normal) var(--curva);
}
.espera[hidden] { display: none; }
.espera-caixa {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 22px 26px; border-radius: 18px; background: #1F1830; border: 1px solid var(--borda);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .8); max-width: min(360px, calc(100vw - 32px)); text-align: center;
}
.espera-caixa p { margin: 0; font-size: 14px; font-weight: 600; color: var(--texto); }
.espera-carta {
  width: 34px; height: 48px; border-radius: 5px;
  background: linear-gradient(135deg, var(--neon), var(--neon-escuro)); box-shadow: 0 6px 16px rgba(177, 75, 255, .4);
  animation: espera-vira 1.2s ease-in-out infinite;
}
@keyframes espera-vira { to { transform: rotateY(360deg); } }
@keyframes espera-entra { from { opacity: 0; } }
html[data-tema="claro"] .espera { background: rgba(255, 255, 255, .5); }
html[data-tema="claro"] .espera-caixa { background: #fff; }
@media (prefers-reduced-motion: reduce) { .espera-carta { animation: none; } .espera { animation: none; } }