html[data-tema="claro"]{--graphite:#f7f5f0;--graphite-2:#fff;--graphite-3:#eeede9;--hairline:#dedfdc;--bone:#1b1d1b;--muted:#737875;--amber:#9d4f19;--sinal-ok:#1f7a44;--sinal-critico:#c0392b;--luz-topo:inset 0 1px 0 rgba(255,255,255,.75);--sombra-1:0 8px 28px -28px rgba(0,0,0,.6);color-scheme:light}
html[data-tema="escuro"]{--graphite:#15171a;--graphite-2:#1e2126;--graphite-3:#262a30;--hairline:#343941;--bone:#e8e4dc;--muted:#9298a0;--amber:#ff9f1c;--sinal-ok:#4ddb8a;--sinal-critico:#ff6b6b;--luz-topo:inset 0 1px 0 rgba(255,255,255,.055);--sombra-1:0 1px 2px rgba(0,0,0,.4);color-scheme:dark}
html{scroll-behavior:smooth}body{padding-bottom:0;background:var(--graphite);color:var(--bone);overscroll-behavior-y:auto}

/* Cabeçalho: a mesma assinatura e os mesmos planos da biblioteca. */
#topo.barra{min-height:86px;padding:calc(12px + env(safe-area-inset-top)) max(24px,calc((100vw - 1160px)/2)) 12px;flex-wrap:nowrap;gap:12px;background:var(--graphite);background:color-mix(in srgb,var(--graphite) 88%,transparent);border-color:var(--hairline);box-shadow:none}
#topo .bib-marca{width:auto;min-height:52px;gap:12px;color:#12802f;font:750 27px/1 var(--sans);letter-spacing:-.04em}
#topo .bib-marca img{width:49px;height:49px;border-radius:13px}#topo .bib-marca span{display:block}
/* Como usar / Sair: um par de utilidades, mesma forma e mesmo peso. Fundo
   suave (chip), ícone em tom secundário que acende no hover — sem a borda
   dura que fazia os dois parecerem caixinhas soltas ao lado da marca. */
#topo .topo-acao{min-height:42px;padding:0 15px;gap:8px;border:1px solid transparent;
  border-radius:12px;background:var(--graphite-3);color:var(--bone);box-shadow:none;
  font:600 var(--t-apoio)/1 var(--sans);
  transition:background .16s ease,border-color .16s ease,color .16s ease}
#topo .topo-acao svg{width:17px;height:17px;color:var(--muted);transition:color .16s ease}
#topo .topo-acao:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media (hover:hover){
  #topo .topo-acao:hover{background:color-mix(in srgb,var(--bone) 8%,var(--graphite-3));
    border-color:color-mix(in srgb,var(--muted) 45%,transparent)}
  #topo .topo-acao:hover svg{color:var(--bone)}
}
#topo .topo-acao:active{background:color-mix(in srgb,var(--bone) 13%,var(--graphite-3))}
#topo .chip{background:var(--graphite-2);border-color:var(--hairline);color:var(--muted)}

/* Login com o mesmo fundo claro, marca e cartão da biblioteca. */
body:not(.dentro) .centro{position:relative;min-height:100dvh;padding:64px 20px;background:radial-gradient(circle at 50% 20%,rgba(157,79,25,.07),transparent 25rem),var(--graphite)}
.login-marca{max-width:none!important;width:auto!important;display:flex!important;align-items:center;justify-content:center;gap:13px;margin:0 auto 25px!important;color:#12802f;font:760 31px/1 var(--sans);letter-spacing:-.045em}
.login-marca img{width:58px;height:58px;border-radius:15px}.login-marca span{display:block}
.dentro .login-marca{display:none!important}
.acesso-profissional{max-width:430px!important;padding:32px;border:1px solid var(--hairline);border-radius:22px;background:var(--graphite-2);box-shadow:0 24px 70px -48px rgba(36,28,20,.7);text-align:left}
.acesso-sobrelinha{color:var(--amber)}.acesso-profissional h1{color:var(--bone);font-size:29px}.acesso-texto{font-size:14px}
.login-google .btn{border-color:var(--hairline);background:#fff;color:#292a2d;box-shadow:0 8px 24px -20px rgba(0,0,0,.7)}
.senha-toggle{color:var(--muted)}.senha-toggle:hover,.senha-toggle:focus-visible{color:var(--bone)}
#entrar .entrada{background:var(--graphite);border-color:var(--hairline);color:var(--bone)}
#botao.btn.primary{border-color:var(--amber);background:var(--amber);color:#fff}

/* Navegação: abas no topo no computador, barra inferior no celular (onde o
   polegar mora). As abas grudam sob a barra do topo — top:85px e não 86 para
   a linha de baixo da barra e a de cima das abas não abrirem um fio de vão. */
.painel-nav{display:none}.dentro .painel-nav{position:sticky;top:85px;z-index:19;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px max(24px,calc((100vw - 1160px)/2));background:var(--graphite);background:color-mix(in srgb,var(--graphite) 88%,transparent);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border-bottom:1px solid var(--hairline)}
.painel-nav a{min-height:46px;display:flex;align-items:center;gap:10px;padding:0 16px;border-radius:11px;color:var(--muted);font:600 12px/1 var(--sans)}
.painel-nav a.ativo,.painel-nav a:hover{background:var(--graphite-3);color:var(--amber)}
/* A seta diz, antes do clique, que esta entrada NAVEGA (abre a Biblioteca)
   enquanto as outras trocam de aba aqui dentro. */
.painel-nav a.externa::after{content:'↗';margin-left:2px;font-size:11px;opacity:.65}
.painel-nav svg{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Abas de verdade: tudo carregado junto — upload, fila e consultas vivem na
   página, e é por isso que as abas NÃO viraram páginas — mas cada aba mostra
   só os próprios blocos. O `hidden` dos blocos continua mandando por cima
   disto (o [hidden]{!important} do painel.html), então o painel.js segue
   dono de esconder bloco vazio dentro da aba. */
.dentro #painel [data-aba]{display:none}
.dentro[data-aba=geral] #painel [data-aba=geral],
.dentro[data-aba=publicar] #painel [data-aba=publicar],
.dentro[data-aba=coletas] #painel [data-aba=coletas],
.dentro[data-aba=assinatura] #painel [data-aba=assinatura]{display:block}

/* Conteúdo: mesma largura útil da biblioteca e cartões de papel. */
body.dentro .centro{width:min(930px,calc(100% - 48px));max-width:none;margin:0 auto;padding:30px 0 70px;text-align:left}
body.dentro .centro>*,body.dentro #painel{width:100%;max-width:none}
.painel-cabeca{display:flex;align-items:end;justify-content:space-between;gap:28px;margin:4px 0 28px;padding-bottom:24px;border-bottom:1px solid var(--hairline);scroll-margin-top:172px}
.painel-cabeca .eyebrow{margin:0;color:var(--amber)}.painel-cabeca h1{margin:8px 0 0;font:740 clamp(34px,5vw,48px)/1 var(--sans);letter-spacing:-.045em}
.painel-cabeca>p{max-width:440px;margin:0;color:var(--muted);font:400 14px/1.55 var(--sans)}
.painel-ancora{display:block;scroll-margin-top:166px}
.bloco{padding:26px;margin-bottom:14px;border-color:var(--hairline);border-radius:18px;background:var(--graphite-2);box-shadow:var(--sombra-1);scroll-margin-top:166px}
.bloco h2{font-size:20px;letter-spacing:-.025em}.bloco h2 .icone{color:var(--amber)}.bloco .exp{max-width:760px}
#bloco-publicar{position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--amber) 25%,var(--hairline))}
#bloco-publicar::after{content:'';position:absolute;z-index:0;right:-80px;top:-100px;width:260px;height:260px;border-radius:50%;background:rgba(157,79,25,.05);pointer-events:none}#bloco-publicar>*{position:relative;z-index:1}
.entrada{background:var(--graphite);border-color:var(--hairline);color:var(--bone)}.entrada:focus{border-color:var(--amber)}
.solta{border-color:var(--hairline);background:var(--graphite);border-radius:14px}.solta.tem{background:var(--graphite-3)}.solta.sobre{border-color:var(--amber);background:rgba(157,79,25,.06)}
.btn.primary{border-color:var(--amber);background:var(--amber);color:#fff}.btn.primary:hover{background:color-mix(in srgb,var(--amber) 88%,#000);color:#fff}.btn{border-color:var(--hairline);background:var(--graphite-3);color:var(--bone);box-shadow:none}
.saida,.link-pronto code{background:var(--graphite);border-color:var(--hairline);color:var(--bone)}
.link-pronto{border-color:rgba(35,117,71,.28);background:rgba(77,219,138,.07)}
.marca-gestao{display:grid;grid-template-columns:170px minmax(0,1fr);gap:24px;align-items:center}.marca-previa{height:112px;display:grid;place-items:center;padding:14px;border:1px dashed var(--hairline);border-radius:15px;background:var(--graphite)}.marca-previa img{display:block;max-width:100%;max-height:82px;object-fit:contain}.marca-previa svg{width:38px;height:38px;fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.marca-conteudo h2{margin-top:0}.marca-conteudo .exp{margin-bottom:13px}.marca-acoes{display:flex;flex-wrap:wrap;gap:8px}.marca-status{min-height:18px;margin:8px 0 0;color:var(--muted);font:600 11px/1.45 var(--sans)}.marca-status.ok{color:var(--confirm)}.marca-status.erro{color:var(--danger)}

/* --- Assinatura ---
   Três cartões: estado do plano (com o uso aninhado), alerta de e-mail e
   pagamento. Layout inspirado num painel de billing moderno, mas as CORES
   seguem o invariante 5: tela administrativa é neutro + linha fina, e âmbar só
   onde há AÇÃO ou ALERTA real (teste acabando, cota no limite, botão) — sempre
   com palavra junto, nunca cor sozinha. Nada de verde nem azul de enfeite: o
   verde do produto significa "disponível offline" e não pode diluir. */
.assina{scroll-margin-top:166px;margin-bottom:14px}
.assina .assina-eyebrow{display:block;color:var(--muted);font:700 10px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase}

/* Cabeçalho da seção */
.assina-cabeca{display:flex;align-items:center;gap:15px;margin-bottom:16px}
.assina-cabeca-icone{flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:13px;background:var(--graphite-3);color:var(--muted)}
.assina-cabeca-icone svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.assina-cabeca h2{margin:0;font:730 22px/1.1 var(--sans);letter-spacing:-.03em;color:var(--bone)}
.assina-cabeca p{margin:3px 0 0;color:var(--muted);font:400 13px/1.4 var(--sans)}

/* Cartão principal */
.assina-card{position:relative;overflow:hidden;padding:24px;border:1px solid var(--hairline);border-radius:20px;
  background:linear-gradient(162deg,color-mix(in srgb,var(--amber) 5%,var(--graphite-2)) 0%,var(--graphite-2) 44%);
  box-shadow:var(--luz-topo),var(--sombra-2)}
.assina-card-deco{position:absolute;top:0;right:0;width:220px;height:200px;pointer-events:none;z-index:0;
  color:color-mix(in srgb,var(--muted) 26%,transparent);
  background:
    radial-gradient(circle at 76% 24%,color-mix(in srgb,var(--amber) 13%,transparent),transparent 60%),
    radial-gradient(circle,currentColor 1.15px,transparent 1.3px);
  background-size:100% 100%,16px 16px;
  -webkit-mask-image:linear-gradient(212deg,#000 4%,transparent 58%);
  mask-image:linear-gradient(212deg,#000 4%,transparent 58%)}
.assina-card > *:not(.assina-card-deco){position:relative;z-index:1}

/* Topo: texto à esquerda, anel do teste à direita (preenche o espaço vazio) */
.assina-card-topo{display:flex;align-items:center;gap:24px}
.assina-card-txt{flex:1;min-width:0}

.assina-selo{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--hairline);background:var(--graphite-2);color:var(--muted);
  font:700 10px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase}
.assina-selo-icone{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Semáforo do teste — verde (folga), âmbar (perto de vencer), vermelho (vence
   hoje ou já venceu). É uso de ESTADO, como a barra de acurácia do GPS, não
   enfeite: ver a nota no invariante 5 do CLAUDE.md. Só o anel, o número-herói
   e o selo pegam cor; o resto do cartão segue neutro. */
.assina-selo.ok{color:var(--sinal-ok);border-color:color-mix(in srgb,var(--sinal-ok) 40%,var(--hairline));background:color-mix(in srgb,var(--sinal-ok) 8%,var(--graphite-2))}
.assina-selo.atencao{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 42%,var(--hairline));background:color-mix(in srgb,var(--amber) 8%,var(--graphite-2))}
.assina-selo.critico{color:var(--sinal-critico);border-color:color-mix(in srgb,var(--sinal-critico) 42%,var(--hairline));background:color-mix(in srgb,var(--sinal-critico) 8%,var(--graphite-2))}

.assina-eyebrow{margin:16px 0 0}
.assina-hero{display:block;margin:9px 0 0;color:var(--bone);font:750 clamp(23px,4vw,29px)/1.08 var(--sans);letter-spacing:-.03em}
.assina-hero em{font-style:normal;font-size:clamp(38px,7.4vw,52px);letter-spacing:-.04em;margin-right:3px}
.assina-hero.ok,.assina-hero.ok em{color:var(--sinal-ok)}
.assina-hero.atencao,.assina-hero.atencao em{color:var(--amber)}
.assina-hero.critico,.assina-hero.critico em{color:var(--sinal-critico)}
.assina-hero-sub{display:flex;align-items:center;gap:8px;margin:11px 0 0;color:var(--muted);font:500 12.5px/1.4 var(--sans)}
.assina-hero-sub[hidden]{display:none}
.assina-hero-sub svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.assina-hero-sub.so-texto svg{display:none}

/* Anel do teste — arco = fração de dias que faltam (drena até o fim) */
.assina-anel{position:relative;flex:none;width:118px;height:118px}
.assina-anel[hidden]{display:none}
.assina-anel svg{width:100%;height:100%;transform:rotate(-90deg)}
.assina-anel circle{fill:none;stroke-width:7;stroke-linecap:round}
.assina-anel-trilha{stroke:var(--graphite-3)}
.assina-anel-arco{stroke:var(--muted);transition:stroke-dashoffset .8s cubic-bezier(.3,.9,.3,1)}
.assina-anel.ok .assina-anel-arco{stroke:var(--sinal-ok)}
.assina-anel.atencao .assina-anel-arco{stroke:var(--amber)}
.assina-anel.critico .assina-anel-arco{stroke:var(--sinal-critico)}
/* Encerrado: sem arco — a trilha vazia já diz que acabou */
.assina-anel.terminou .assina-anel-arco{display:none}
.assina-anel-centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;text-align:center}
.assina-anel-centro b{font:750 27px/1 var(--sans);letter-spacing:-.03em;color:var(--bone)}
.assina-anel.ok .assina-anel-centro b{color:var(--sinal-ok)}
.assina-anel.atencao .assina-anel-centro b{color:var(--amber)}
.assina-anel.critico .assina-anel-centro b{color:var(--sinal-critico)}
.assina-anel-centro span{margin-top:4px;font:700 9px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.assina-anel-arco{transition:none}}

/* Uso — cartão aninhado com uma linha por cota */
.assina-uso{margin:20px 0 0;border:1px solid var(--hairline);border-radius:15px;background:var(--graphite-2);overflow:hidden}
.assina-uso[hidden]{display:none}
.assina-linha{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1px 13px;padding:15px 17px}
.assina-linha + .assina-linha{border-top:1px solid var(--hairline)}
.assina-linha-icone{grid-row:1/3;width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--graphite-3);color:var(--muted)}
.assina-linha-icone svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.assina-linha-rot{font:600 13px/1.35 var(--sans);color:var(--bone)}
.assina-linha-val{font:600 13px/1 var(--mono);color:var(--bone);white-space:nowrap;text-align:right}
.assina-linha-val u{text-decoration:none;color:var(--muted);font-family:var(--sans);font-weight:500}
.assina-linha.cheio .assina-linha-val{color:var(--amber)}
.assina-linha-medidor{grid-column:2/4;height:4px;margin-top:9px;border-radius:999px;background:var(--graphite-3);overflow:hidden}
.assina-linha-medidor i{display:block;height:100%;border-radius:999px;background:var(--muted);transition:width .6s cubic-bezier(.3,.9,.3,1)}
.assina-linha.cheio .assina-linha-medidor i{background:var(--amber)}
.assina-linha.sem-cota .assina-linha-val{color:var(--muted);font-family:var(--sans);font-weight:500}
.assina-linha.sem-cota .assina-linha-medidor{display:none}
@media (prefers-reduced-motion:reduce){.assina-linha-medidor i{transition:none}}

/* Ação principal do cartão */
.assina-cta{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:18px;font-size:14px}
.assina-cta[hidden]{display:none}
.assina-cta svg{position:absolute;right:18px;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.assina-cta-nota{margin:12px 0 0;text-align:center}
.assina-cta-nota[hidden]{display:none}

/* Assinatura vigente: até quando vale, e como encerrar.
   Neutro de propósito — assinatura em dia não é "estado bom confirmado" a
   pintar de verde; o semáforo desta tela é do contador do teste, e só (ver
   invariante 5 no CLAUDE.md). */
.assina-vinculo{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:16px 0 0;padding:15px 17px;border:1px solid var(--hairline);border-radius:15px;background:var(--graphite-2)}
.assina-vinculo[hidden]{display:none}
.assina-vinculo-txt{min-width:0}
.assina-vinculo-txt b{display:block;font:700 13.5px/1.25 var(--sans);color:var(--bone)}
.assina-vinculo-txt p{margin:4px 0 0;color:var(--muted);font:400 12px/1.45 var(--sans)}
.assina-vinculo-acao{flex:none;min-height:44px;padding:0 16px;font-size:12.5px}
.assina-vinculo-acao[hidden]{display:none}

/* Anual x mensal.

   Era um par de pílulas pequenas que nem parecia controle. Agora é um
   segmentado de verdade: 48 px de altura, o rótulo em cima e o que ele
   significa embaixo, para a escolha não depender de o usuário adivinhar que
   "20% menos" é clicável.

   NEUTRO: o segmento ativo é osso sobre grafite, o mesmo par do selo "Seu
   plano". Pintar o anual de verde diria "esta é a opção boa", que é opinião
   nossa sobre o dinheiro do cliente — e diluiria o verde que no campo
   significa "disponível offline" (invariante 5). */
.assina-ciclo{display:inline-flex;gap:4px;margin:0 0 8px;padding:5px;
  border:1px solid var(--hairline);border-radius:15px;background:var(--graphite-2)}
.assina-ciclo[hidden]{display:none}
.assina-ciclo-op{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:3px;min-height:48px;padding:0 18px;border:0;border-radius:11px;background:transparent;
  color:var(--muted);font:650 13px/1 var(--sans);letter-spacing:-.01em;cursor:pointer;
  transition:background .16s ease,color .16s ease}
.assina-ciclo-op small{font:500 10.5px/1 var(--sans);opacity:.85;letter-spacing:0}
.assina-ciclo-op[aria-pressed="true"]{background:var(--bone);color:var(--graphite)}
.assina-ciclo-op:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media (hover:hover){
  .assina-ciclo-op:not([aria-pressed="true"]):hover{background:var(--graphite-3);color:var(--bone)}
}
@media (prefers-reduced-motion:reduce){.assina-ciclo-op{transition:none}}
/* No celular os dois segmentos dividem a largura, senão o "Anual" fica com o
   dobro do alvo de toque do "Mensal" por causa do texto mais longo. */
@media (max-width:560px){
  .assina-ciclo{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .assina-ciclo-op{align-items:center;text-align:center;padding:0 10px}
}


/* Fatura Pix no cartão — só o ESTADO.

   O QR e o código copia-e-cola saíram daqui para a folha: são 168 px de
   imagem mais uma linha de 200 caracteres, e fixos no cartão enterravam o
   resto. O que fica é o que precisa estar sempre à vista — que existe uma
   fatura, quanto é e até quando vale.

   NEUTRO, e isso é decisão: uma fatura paga não é "estado bom confirmado" a
   pintar de verde, nem uma vencida é falha de GPS a pintar de vermelho. O
   semáforo desta tela é o contador do teste, e só — invariante 5. */
.assina-pix{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:16px 0 0;padding:15px 17px;border:1px solid var(--hairline);
  border-radius:15px;background:var(--graphite-2)}
.assina-pix[hidden]{display:none}
.assina-pix-txt{min-width:0}
.assina-pix-txt b{display:block;font:700 13.5px/1.25 var(--sans);color:var(--bone)}
.assina-pix-txt p{margin:4px 0 0;color:var(--muted);font:400 12px/1.45 var(--sans)}
.assina-pix-abrir{flex:none;min-height:44px;padding:0 16px;font-size:12.5px}
.assina-pix-abrir[hidden]{display:none}

/* A folha do Pix. <dialog> nativo, mesmo molde do diálogo de confirmação:
   modal, foco e Esc por conta do navegador.

   DUAS COLUNAS NO DESKTOP. Empilhada, ela passava de 640 px de altura e
   começava a rolar em qualquer janela com barra de navegador — e uma folha
   que rola esconde justamente os botões de ação. Lado a lado, a altura cai
   para perto de 430 px e o código ganha largura, que é o que ele precisa. */
.pix-folha{width:min(660px,calc(100% - 28px));margin:auto;padding:26px 26px 22px;
  border:1px solid var(--hairline);border-radius:24px;background:var(--graphite-2);
  color:var(--bone);box-shadow:var(--luz-topo),0 40px 120px -35px rgba(0,0,0,.55)}
.pix-folha::backdrop{background:color-mix(in srgb,#0c0e0c 52%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pix-folha-cabeca{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.pix-folha-cabeca h2{margin:6px 0 0;font:720 19px/1.25 var(--sans);letter-spacing:-.025em}
.pix-folha-cabeca p{margin:6px 0 0;color:var(--muted);font:400 12.5px/1.55 var(--sans)}
/* O X é alvo de toque de 40 px, não um ícone de 16 solto no canto. */
.pix-folha-x{flex:none;width:40px;height:40px;min-height:0;padding:0;justify-content:center;
  border-radius:11px}
.pix-folha-x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}

.pix-folha-corpo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;
  align-items:start;margin:20px 0 0}

/* Fundo branco fixo, e não o token da folha: o QR é preto sobre branco e
   precisa continuar legível no tema escuro, onde a folha é grafite. Leitor de
   banco falha em QR de baixo contraste, e o sintoma seria "o app do meu banco
   não lê" — reclamação que ninguém consegue depurar. */
.pix-folha-qr{display:block;width:206px;height:206px;padding:11px;border-radius:14px;
  background:#fff;image-rendering:pixelated}
.pix-folha-qr[hidden]{display:none}

.pix-folha-codigo{min-width:0}
.pix-folha-codigo .assina-eyebrow{display:block;margin-bottom:8px}
/* O código tem ~200 caracteres e quebra em qualquer ponto. O teto é generoso
   de propósito: apertado, ele produzia uma barra de rolagem por QUATRO pixels
   — e rolagem dentro de um código que se copia inteiro não serve a ninguém.
   Só sobra rolagem em EMV fora do comum, que é quando ela de fato ajuda. */
.pix-folha-codigo code{display:block;max-height:150px;overflow-y:auto;padding:11px 13px;
  border:1px solid var(--hairline);border-radius:11px;background:var(--graphite);
  color:var(--muted);font:400 11px/1.55 var(--mono,ui-monospace,monospace);
  word-break:break-all;user-select:all}
.pix-folha-copiar{width:100%;min-height:46px;margin-top:10px;font-size:12.5px}

.pix-folha-nota{margin:12px 0 0}
.pix-folha-acoes{display:flex;gap:10px;margin:20px 0 0}
.pix-folha-acoes .btn{flex:1;min-height:50px;justify-content:center;border-radius:13px;font-weight:640}

dialog.pix-folha[open]{animation:confirma-entra .24s cubic-bezier(.2,.85,.3,1.05)}
dialog.pix-folha[open]::backdrop{animation:confirma-veu .24s ease}
@media (prefers-reduced-motion:reduce){
  dialog.pix-folha[open],dialog.pix-folha[open]::backdrop{animation:none}
}

/* Janela baixa (notebook, navegador com muitas barras): a folha para de
   crescer e rola por dentro, mas as AÇÕES ficam presas no rodapé — rolar para
   achar "Já paguei" é o defeito que esta folha existe para não ter.

   O `display` VAI NO [open], e isso não é detalhe de estilo: <dialog> fechado
   é escondido pelo `display:none` do próprio navegador, e qualquer `display`
   declarado no seletor solto anula essa regra. Foi o que aconteceu — a folha
   passou a aparecer no meio da página, em toda aba, sem ninguém abrir nada.
   Ela mora fora do #painel, então o CSS que troca de aba também não a
   escondia. */
dialog.pix-folha[open]{display:flex;flex-direction:column;overflow:hidden;
  max-height:min(92dvh,760px)}
.pix-folha-corpo{overflow-y:auto;min-height:0}
.pix-folha-cabeca,.pix-folha-acoes{flex:none}

/* No celular a largura é que falta, então volta a empilhar — e a folha ancora
   embaixo, onde o polegar já está.

   O QR ENCOLHE AQUI, e não é para caber: no celular ele é o meio MENOS útil,
   porque ninguém escaneia a própria tela. Quem paga pelo aparelho usa o
   copia-e-cola logo abaixo; o QR só serve para um segundo aparelho ler, e
   150 px bastam para isso. Dar a ele o mesmo tamanho do desktop empurrava a
   nota para fora da área visível, cortada no meio da frase. */
@media (max-width:600px){
  .pix-folha{width:min(420px,calc(100% - 28px));margin:auto auto 14px;
    padding:22px 20px 18px;border-radius:22px}
  .pix-folha-corpo{grid-template-columns:minmax(0,1fr);gap:16px;justify-items:center}
  .pix-folha-qr{width:150px;height:150px;padding:9px}
  .pix-folha-codigo{width:100%}
  .pix-folha-nota{text-align:center}
  .pix-folha-acoes{flex-direction:column-reverse;margin-top:16px}
  .pix-folha-acoes .btn{width:100%}
}

/* Dois caminhos de pagamento no mesmo cartão de plano. O secundário é o do
   trilho que a pessoa NÃO usa — quem já paga por Pix não veio trocar para
   cartão, e o contrário também vale. */
.assina-plano-pix{width:100%;min-height:46px;font-size:12.5px}
.assina-plano-acao + .assina-plano-pix{margin-top:8px}
.assina-plano-acao[hidden],.assina-plano-pix[hidden]{display:none}

/* Cartão de alerta: e-mail não confirmado */
.assina-alerta{display:flex;gap:14px;margin:14px 0 0;padding:18px;border-radius:17px;
  border:1px solid color-mix(in srgb,var(--amber) 28%,var(--hairline));
  background:color-mix(in srgb,var(--amber) 7%,var(--graphite))}
.assina-alerta[hidden]{display:none}
.assina-alerta-icone{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;
  background:color-mix(in srgb,var(--amber) 15%,var(--graphite-2));color:var(--amber)}
.assina-alerta-icone svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.assina-alerta b{display:block;font:700 14px/1.2 var(--sans);color:var(--bone)}
.assina-alerta p{margin:5px 0 0;color:var(--muted);font:400 12.5px/1.5 var(--sans)}
.assina-alerta-acao{position:relative;display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:46px;margin-top:12px;
  border-color:color-mix(in srgb,var(--amber) 32%,var(--hairline));background:transparent;color:var(--amber);font-size:12.5px}
.assina-alerta-acao svg{position:absolute;right:14px;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Planos disponíveis — comparação lado a lado */
.assina-planos{margin:20px 0 0}
.assina-planos[hidden]{display:none}
.assina-planos-intro{margin:8px 0 16px;max-width:62ch;color:var(--muted);font:400 12.5px/1.55 var(--sans)}
/* padding-top: o selo do plano atual flutua 10 px acima da borda do cartao,
   e sem folga aqui ele seria cortado pelo alternador de ciclo. */
/* auto-fit desde 08/10/2026: com o Gratuito sao quatro cartoes, e tres colunas
   fixas deixariam o quarto sozinho numa linha. */
.assina-planos-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;
  align-items:stretch;padding-top:13px}

.assina-plano-card{position:relative;display:flex;flex-direction:column;padding:20px 19px;
  border:1px solid var(--hairline);border-radius:17px;background:var(--graphite-2);
  transition:border-color .16s ease,box-shadow .16s ease}
@media (hover:hover){
  .assina-plano-card:hover{border-color:color-mix(in srgb,var(--bone) 20%,var(--hairline));
    box-shadow:var(--luz-topo),var(--sombra-1)}
}
/* PLANO ATUAL: tres camadas neutras somadas, nenhuma delas cor de estado.

   Qual plano a pessoa tem nao e bom nem ruim, e um fato — pintar de verde
   diria "voce esta bem" a quem talvez precise subir de plano, e diluiria o
   verde que no campo significa "disponivel offline" (invariante 5).

   O que destaca e forma: borda em osso, halo fino em volta e elevacao. A
   borda sozinha era quase igual ao hover, e o cartao nao se achava na grade.

   O selo FLUTUA sobre a borda de cima em vez de ocupar linha propria: uma
   faixa dentro do cartao empurraria o titulo para baixo so nele, e as tres
   colunas perderiam o alinhamento que a lista depende para se comparar. */
.assina-plano-card.atual{
  border-color:color-mix(in srgb,var(--bone) 80%,var(--hairline));
  box-shadow:var(--luz-topo),
             0 0 0 4px color-mix(in srgb,var(--bone) 15%,transparent),
             0 24px 56px -32px rgba(0,0,0,.62)}
@media (hover:hover){
  /* Sem realce de hover no que ja esta realcado: piscar ao passar o mouse
     sugeriria que da para "escolher" o plano que a pessoa ja tem. */
  .assina-plano-card.atual:hover{border-color:color-mix(in srgb,var(--bone) 80%,var(--hairline))}
}

.assina-plano-card-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
.assina-plano-card-topo b{font:730 15.5px/1.2 var(--sans);letter-spacing:-.01em;color:var(--bone)}
.assina-plano-selo{position:absolute;z-index:1;top:-10px;left:50%;transform:translateX(-50%);
  white-space:nowrap;padding:6px 13px;border-radius:999px;background:var(--bone);
  color:var(--graphite);font:700 9px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  box-shadow:0 5px 14px -7px rgba(0,0,0,.55)}

/* O preço é a âncora da comparação: número grande, "R$" e "/mês" apagados
   em volta. Antes os três competiam pelo mesmo peso e o olho não pousava. */
.assina-plano-preco{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px;margin:16px 0 4px}
.assina-plano-preco b{font:760 34px/1 var(--sans);letter-spacing:-.035em;color:var(--bone)}
.assina-plano-cifra{font:650 13px/1 var(--sans);color:var(--muted)}
.assina-plano-preco small{font:500 12px/1 var(--sans);color:var(--muted)}
/* Preço antigo riscado: apagado e menor, ao lado do valor atual. Neutro
   (osso/muted), não vermelho — riscar já diz "não vale mais", e vermelho é
   falha neste app (invariante 5). */
.assina-plano-antes{font:600 13px/1 var(--sans);color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.assina-plano-nota{margin:0;min-height:30px;color:var(--muted);font:400 11px/1.4 var(--sans)}

/* Em reais, e não em porcentagem: "R$ 120" decide mais que "20%", e é uma
   conta que ninguém deveria ter de fazer de cabeça na hora de escolher.
   Neutro (osso sobre grafite), porque economia não é estado bom confirmado a
   pintar de verde — invariante 5. */
.assina-plano-economia{display:inline-block;align-self:flex-start;margin:11px 0 0;padding:5px 10px;border-radius:999px;
  background:var(--graphite-3);color:var(--bone);font:650 10.5px/1.2 var(--sans);letter-spacing:.01em}
/* Reserva o espaco do selo no Teste: sem ele, a lista sobe e as tres
   colunas param de alinhar no ciclo anual. */
.assina-plano-economia.vazia{visibility:hidden}

.assina-plano-itens{list-style:none;margin:15px 0 0;padding:15px 0 0;
  border-top:1px solid var(--hairline);display:grid;gap:11px}
.assina-plano-itens li{display:grid;grid-template-columns:27px minmax(0,1fr);gap:10px;
  align-items:center;color:var(--muted);font:400 11.5px/1.4 var(--sans)}
/* O número em osso e o rótulo em cinza: quem compara três colunas está lendo
   "20 · 500 MB · 1 GB", não frases inteiras. */
.assina-plano-itens li b{color:var(--bone);font-weight:730}
.assina-plano-item-icone{width:27px;height:27px;display:grid;place-items:center;
  border-radius:9px;background:var(--graphite-3);color:var(--muted)}
.assina-plano-item-icone svg{width:14px;height:14px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* O que o plano NÃO tem: sem check (um ✓ ao lado de "Sem vídeo" dizia o
   contrário do texto), ícone vazado e a linha apagada. */
.assina-plano-itens li.ausente{opacity:.62}
.assina-plano-itens li.ausente .assina-plano-item-icone{background:transparent;
  border:1px dashed var(--hairline)}

/* As ações é que grudam no rodapé do cartão — a lista, não. Empurrar a lista
   desalinha as três colunas assim que um cartão tem mais botões que outro. */
.assina-plano-acoes{margin-top:auto;padding-top:16px}
.assina-plano-acoes:empty{display:none}
/* O rodape do Teste: informacao no lugar do vao, no mesmo tom apagado do
   resto do cartao — nao e botao e nao deve parecer um. */
.assina-plano-rodape{margin:0;padding:13px 2px 0;border-top:1px dashed var(--hairline);
  color:var(--muted);font:500 11px/1.4 var(--sans);text-align:center}
.assina-plano-acao{width:100%;min-height:46px;font-size:12.5px}
.assina-plano-pix{width:100%;min-height:46px;font-size:12.5px}
.assina-plano-acao + .assina-plano-pix{margin-top:8px}
.assina-plano-acao[hidden],.assina-plano-pix[hidden]{display:none}

@media (max-width:640px){
  .assina-planos-grade{grid-template-columns:1fr}
  .assina-plano-nota{min-height:0}
  /* Empilhados, os cartoes nao precisam alinhar entre si — entao o espaco
     reservado do selo de economia vira so uma faixa vazia no Teste. */
  .assina-plano-economia.vazia{display:none}
}

/* Cartão de pagamento */
.assina-pagamento{display:flex;gap:14px;align-items:flex-start;margin:14px 0 0;padding:18px;border:1px solid var(--hairline);border-radius:17px;background:var(--graphite)}
.assina-pagamento[hidden]{display:none}
.assina-pagamento-icone{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--graphite-3);color:var(--muted)}
.assina-pagamento-icone svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.assina-pagamento b{display:block;font:700 14px/1.2 var(--sans);color:var(--bone)}
.assina-pagamento p{margin:4px 0 0;color:var(--muted);font:400 12.5px/1.55 var(--sans)}

.assina .marca-status{margin-top:12px}

@media (max-width:560px){
  .assina-card{padding:20px}
  .assina-card-deco{width:150px;height:140px}
  /* anel continua do LADO do texto, só encolhe para caber */
  .assina-card-topo{gap:14px}
  .assina-anel{width:88px;height:88px}
  .assina-anel-centro b{font-size:22px}
  .assina-anel-centro span{margin-top:3px;font-size:8px}
  .assina-hero{font-size:22px}
  .assina-hero em{font-size:35px}
  .assina-linha{padding:14px}
  .assina-alerta,.assina-pagamento{padding:16px}
}
@media (max-width:360px){
  .assina-card-topo{gap:11px}
  .assina-anel{width:78px;height:78px}
  .assina-anel-centro b{font-size:19px}
  .assina-hero{font-size:20px}
  .assina-hero em{font-size:31px}
}

/* Confirmacao propria — substitui o confirm() nativo onde ja migrou.
   No celular vira folha ancorada embaixo, que e onde o polegar ja esta; a
   entrada anima uma vez e para (regra de animacao do CLAUDE.md). */
/* O diálogo de confirmação virou compartilhado em 14/09/2026 (assets/
   dialogo.js, CSS no app.css): o mesmo componente serve painel, mapa e
   Biblioteca. As regras .confirma* saíram daqui; os dois @keyframes ficam,
   porque a folha do Pix os usa. */
@keyframes confirma-entra{from{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes confirma-veu{from{opacity:0}}

/* Listas ganham o mesmo ritmo compacto dos mapas da biblioteca. */
.mapas{border-top:1px solid var(--hairline)}.mapas li{min-height:92px;padding:13px 4px;border-color:var(--hairline)}.mapas .mapa-card{position:relative;transition:background .16s ease,border-color .16s ease}.mapas .mapa-card:hover{background:color-mix(in srgb,var(--graphite-2) 94%,var(--amber))}.mapas .mapa-card-abrir{position:absolute;z-index:1;inset:3px 0;border-radius:12px;cursor:pointer}.mapas .mapa-card-abrir:focus-visible{outline:3px solid color-mix(in srgb,var(--amber) 65%,transparent);outline-offset:1px}.mapas .mini{width:88px;border-radius:13px;background:var(--graphite);border-color:var(--hairline)}
.mapas .quem b{color:var(--bone);font-size:14px;text-transform:uppercase}.mapas .quem span{font-family:var(--sans);font-size:11px}.mapas .acoes{position:relative;z-index:2;gap:8px}.mapas .btn{border-radius:10px;background:var(--graphite);border-color:var(--hairline)}.mapas .mapa-acao-enviar{gap:7px;justify-content:center;white-space:nowrap}.mapas .mapa-acao-icone{width:44px;padding:8px;justify-content:center}
.mapas .btn:not(.fantasma){background:var(--graphite-3)}.vazio{background:var(--graphite);border-color:var(--hairline);border-radius:13px}
.etapas li .marca-etapa{background:var(--graphite-2)}.aviso-troca{color:var(--bone)}

/* O acervo completo mora na Biblioteca. No painel fica somente um atalho
   contextual, para não manter duas interfaces de gestão para os mesmos mapas. */
.bloco-biblioteca{padding:0;overflow:hidden}
.biblioteca-atalho{display:grid;grid-template-columns:50px minmax(0,1fr) 24px;
  align-items:center;gap:16px;min-height:112px;padding:22px 24px;color:var(--bone);
  text-decoration:none;background:linear-gradient(115deg,var(--graphite-2),
  color-mix(in srgb,var(--graphite-2) 92%,var(--amber)));transition:background .18s ease}
.biblioteca-atalho:hover{background:linear-gradient(115deg,var(--graphite-3),
  color-mix(in srgb,var(--graphite-3) 88%,var(--amber)))}
.biblioteca-atalho:focus-visible{outline:3px solid color-mix(in srgb,var(--amber) 60%,transparent);
  outline-offset:-3px}
.biblioteca-atalho-icone{width:50px;height:50px;display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--amber) 28%,var(--hairline));border-radius:14px;
  background:color-mix(in srgb,var(--amber) 9%,var(--graphite));color:var(--amber)}
.biblioteca-atalho-icone svg,.biblioteca-atalho-seta{width:24px;height:24px;fill:none;
  stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.biblioteca-atalho-texto{min-width:0}.biblioteca-atalho-texto .eyebrow{display:block;margin-bottom:5px}
.biblioteca-atalho-texto strong{display:block;font:750 18px/1.25 var(--sans);letter-spacing:-.02em}
.biblioteca-atalho-texto>span:last-child{display:block;margin-top:5px;color:var(--muted);
  font:450 12px/1.4 var(--sans)}
.biblioteca-atalho-seta{color:var(--muted);transition:transform .18s ease,color .18s ease}
.biblioteca-atalho:hover .biblioteca-atalho-seta{color:var(--amber);transform:translateX(3px)}

@media(max-width:899px){
  body.dentro{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  #topo.barra{min-height:76px;justify-content:center;padding-left:18px;padding-right:18px}
  #topo .bib-marca{font-size:24px}#topo .bib-marca img{width:43px;height:43px}
  #topo .espaco{display:none}
  /* No celular a ajuda nao some: os dois viram circulos de icone, mesma forma
     e mesmo tamanho, encostados no canto direito. O rotulo some pelo <span>. */
  #topo .topo-acao{position:absolute;right:16px;width:44px;height:44px;min-height:0;
    padding:0;gap:0;border-radius:50%;justify-content:center}
  #topo a.topo-acao{right:68px}
  #topo .topo-acao>span{display:none}
  #topo .topo-acao svg{width:19px;height:19px;color:var(--bone)}
  #topo #chip-fila{position:absolute;left:18px;padding:7px}#topo #chip-fila.off{display:none}#topo #chip-fila-txt{display:none}
  /* Barra fixa de 5 abas, no mesmo molde da .bib-nav (que já funciona no
     celular): min-height no container, folga de baixo generosa — a barra
     retrátil do navegador come os últimos pixels de um `bottom:0` até rolar —
     e o -webkit- do backdrop, sem o qual o Safari não pinta o fundo. */
  /* Fundo SÓLIDO no celular, sem backdrop-filter: em WebView/Chrome antigo o
     blur num `fixed` congela o que estava atrás e só repinta ao rolar — o
     texto das abas parecia cortado até o usuário rolar. Sólido nunca falha. */
  .dentro .painel-nav{position:fixed;z-index:35;top:auto;left:0;right:0;bottom:0;width:auto;display:grid;grid-template-columns:repeat(5,1fr);min-height:74px;padding:7px 2px calc(env(safe-area-inset-bottom) + 12px);border:0;border-top:1px solid var(--hairline);border-radius:0;background:var(--graphite-2);backdrop-filter:none;-webkit-backdrop-filter:none}
  .painel-cabeca,.painel-ancora,.bloco{scroll-margin-top:96px}
  /* Sem ellipsis. O rótulo quebra em duas linhas se precisar ("Visão geral"),
     e no pior caso parte a palavra — nunca corta o texto. */
  .painel-nav a{min-width:0;min-height:54px;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:2px 1px;border-radius:9px;font:600 9px/1.1 var(--sans);letter-spacing:-.01em;text-align:center}
  .painel-nav a span{display:block;max-width:100%;overflow-wrap:break-word;hyphens:none}
  .painel-nav a.externa::after{content:none}.painel-nav a.ativo{background:transparent}.painel-nav svg{width:21px;height:21px}
  body.dentro .centro{width:100%;max-width:none;margin:0;padding:24px 16px 28px}
  .painel-cabeca{display:block;margin-bottom:20px;padding:0 2px 19px}.painel-cabeca h1{font-size:34px}.painel-cabeca>p{margin-top:12px;font-size:13px}
  .bloco{padding:20px 17px;border-radius:16px}.bloco h2{font-size:18px}.bloco .exp{font-size:12px}
}

@media(max-width:560px){
  body:not(.dentro) .centro{justify-content:flex-start;padding-top:40px}.acesso-profissional{padding:24px 20px;border-radius:19px}.login-marca{font-size:28px}.login-marca img{width:53px;height:53px}
  .mapas li{display:grid;grid-template-columns:74px minmax(0,1fr);gap:12px}.mapas .mini{width:74px}.mapas .acoes{grid-column:2/-1;width:min(100%,260px);display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;justify-self:start}.mapas .acoes .btn{width:100%;min-width:0;margin:0}.mapas .acoes .mapa-acao-icone{padding:8px}.mapas .acoes .mapa-acao-enviar{padding-left:12px;padding-right:12px}
  .link-pronto .caixa{display:grid}.link-pronto code{min-width:0;width:100%}.linha>div{min-width:100%}
  .marca-gestao{grid-template-columns:1fr;gap:16px}.marca-previa{height:100px}.marca-acoes .btn{flex:1;justify-content:center}
  .biblioteca-atalho{grid-template-columns:44px minmax(0,1fr) 20px;gap:12px;
    min-height:96px;padding:17px 16px}.biblioteca-atalho-icone{width:44px;height:44px;border-radius:12px}
  .biblioteca-atalho-texto strong{font-size:16px}
}

/* A tinta do botão forte do diálogo e do tour acompanha o --amber DO TEMA.
   No claro ele é #9d4f19, e só o branco se lê (5,9:1; a tinta escura dá
   3,1:1). No escuro ele volta a ser #ff9f1c, e ali vale o padrão do app.css,
   a tinta escura (9,0:1) — o branco valia para os dois temas até 29/09/2026 e
   dava 2,0:1 no escuro. Por isso o branco mora SÓ no claro. */
html[data-tema="claro"] .sigon-dlg{--dlg-forte-tinta:#fff}
html[data-tema="claro"] .sigon-tour{--tour-forte-tinta:#fff}

/* Dentro do app das lojas a aba Assinatura some (.so-web, ver assets/nativo.js)
   e a barra de baixo do celular fica com quatro abas: sem isto sobraria uma
   coluna vazia no fim. No desktop a barra é flex e isto não pesa. */
html[data-app="nativo"] .dentro .painel-nav{grid-template-columns:repeat(4,1fr)}