/*
 * ARQUIVO: public/assets/css/site.css
 * MÓDULO: Telas — aparência de todas as páginas.
 * FAZ: o VISUAL NOVO do design system (D138; fundo preto puro e filtros no topo, estilo Netflix — D141; capas sem o
 *      nome escrito por cima — D142; barra de baixo do tamanho da Netflix — D143; a moldura da Central da equipe, com
 *      menu lateral, barra de baixo, busca e avisos — D145; o link de pagamento da atendente e o painel novo dela, com as 4
 *      abas embaixo — D163; as fileiras de séries como as do app da Netflix, até a borda da tela, e a fileira toda em grade — D312; os cartões do Front do Início do dono, com as setas ↑ ↓ — D318; a oferta teste do Atender, tracejada — 18/10), feito PRIMEIRO PARA O CELULAR (a maioria dos clientes usa
 *      Android): uma coluna, botões grandes para o dedo, letra legível; em telas maiores o conteúdo só
 *      fica centralizado. Todas as cores, letras, cantos, sombras e tempos vêm das variáveis do
 *      tokens.css (cópia fiel do design system): fundo preto, um vermelho só (#E11D48), Montserrat
 *      nos títulos e números grandes, DM Sans no resto, JetBrains Mono em códigos. Os tamanhos de letra
 *      continuam os do celular (16 px nos campos, para o Android não dar zoom). A única cor que não é do
 *      design system é o verde do WhatsApp (--whats). Nenhuma cor em "#..." aqui e nenhum estilo escrito
 *      dentro das páginas (a regra do navegador proíbe) — conferido pelo tests/Estrutura/VisualTest.php.
 * RECEBE: nada. DEVOLVE: nada (é lido pelo navegador, depois do tokens.css).
 * DEPENDE: public/assets/css/tokens.css (variáveis), resources/views/*.php (as classes usadas aqui).
 */

:root {
    color-scheme: dark;                  /* caixinhas, datas e listas do navegador no modo escuro */
    --whats: rgb(37, 211, 102);          /* verde do WhatsApp: só nos botões que abrem o WhatsApp */
    --topo-vidro: rgba(0, 0, 0, .86);    /* cabeçalho fixo: preto 86% + desfoque (estilo Netflix, D141) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg-app);
    color: var(--text-body);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
}
body.com-janela { overflow: hidden; }
a { color: inherit; }
button, input, select, textarea { font-family: inherit; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }
::selection { background: var(--brand-soft); color: var(--text-strong); }
:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.escondido { display: none !important; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-strong); letter-spacing: -.01em; line-height: var(--lh-snug); }
h1 { font-size: 1.35rem; font-weight: var(--fw-bold); margin: 0 0 10px; }
h2 { font-size: 1.1rem; font-weight: var(--fw-bold); margin: 0 0 10px; }
h3 { font-size: 1.15rem; font-weight: var(--fw-bold); margin: 0 0 8px; }
p { margin: 0 0 8px; color: var(--text-muted); }

@keyframes sobe { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

/* ── cabeçalho ── */
.topo {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    height: 56px; padding: 0 var(--space-4); border-bottom: 1px solid var(--border-subtle);
}
.topo-centro { justify-content: center; }
.topo-fixo {
    position: sticky; top: 0; z-index: var(--z-topbar); border-bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .95), rgba(0, 0, 0, 0));
    transition: background var(--dur-slow) var(--ease-out);
}
.topo-fixo.topo-solido {
    background: var(--topo-vidro);
    -webkit-backdrop-filter: blur(var(--blur-overlay)); backdrop-filter: blur(var(--blur-overlay));
}
.marca { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; min-width: 0; }
.marca-app { gap: 10px; }
.marca-icone { width: 32px; height: 32px; border-radius: var(--radius-md); display: block; flex-shrink: 0; }
.marca-icone-p { width: 24px; height: 24px; border-radius: var(--radius-sm); display: block; flex-shrink: 0; }
.topo-titulo {
    font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--fw-bold); letter-spacing: -.02em;
    color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.logo-texto { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.15rem; letter-spacing: -.02em; color: var(--text-strong); }
.logo-texto b { color: var(--brand); font-weight: inherit; }
.topo-acoes { display: flex; gap: 6px; align-items: center; min-width: 0; }
/* o contador "Faltam X dias" no meio da barra (D168): amarelo; nos 2 últimos dias, vermelho */
.topo-dias {
    margin: 0 auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px;
    border-radius: var(--radius-full); border: 1px solid var(--warning); background: var(--warning-soft); color: var(--warning-fg);
    font-family: inherit; font-size: .8rem; font-weight: var(--fw-bold); white-space: nowrap; cursor: pointer;
}
.topo-dias-urgente { border-color: var(--danger); background: var(--danger-soft); color: var(--danger-fg); }
@media (max-width: 379px) {
    .topo-dias-longo { display: none; }   /* celular estreito: só "⏳ 5 dias", para o "Início" caber inteiro */
}
.form-sair { margin: 0; }
.topo-botao {
    width: 44px; height: 44px; border-radius: var(--radius-full); border: 0; background: none;
    color: var(--text-strong); display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}
.topo-botao:active { background: var(--neutral-soft); }
.topo-botao svg { width: 24px; height: 24px; }
.voltar { color: var(--text-muted); text-decoration: none; font-weight: var(--fw-semibold); font-size: .95rem; padding: 8px 0; }

/* ── conteúdo ── */
.conteudo { padding: var(--space-4) var(--space-4) 96px; max-width: 640px; margin: 0 auto; }
.cartao {
    background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
    box-shadow: var(--inset-top); padding: var(--space-6) 18px; margin-bottom: var(--space-4);
}
.cartao-entrada { max-width: 420px; margin: var(--space-6) auto; background: var(--gradient-brand-glow), var(--surface-card); }
.titulo-entrada { text-align: center; font-size: 1.3rem; font-weight: var(--fw-bold); }
.sub-entrada { text-align: center; font-size: .9rem; margin-bottom: var(--space-5); }
.sub-pequeno { font-size: .8rem; margin-top: 14px; margin-bottom: 0; }
.rodape-entrada { text-align: center; font-size: .8rem; color: var(--text-subtle); margin: 18px 0 0; }
.rodape-entrada a { color: var(--text-link); font-weight: var(--fw-semibold); }

/* ── mensagens (cores de aviso do design system, sempre em fundo suave) ── */
.msg { border-radius: var(--radius-md); padding: var(--space-3) 14px; margin-bottom: var(--space-4); font-size: .88rem; font-weight: var(--fw-medium); line-height: 1.55; border: 1px solid transparent; }
.msg-info { background: var(--info-soft); border-color: rgba(76, 141, 255, .3); color: var(--info-fg); }
.msg-aviso { background: var(--warning-soft); border-color: rgba(245, 165, 36, .3); color: var(--warning-fg); }
.msg-erro { background: var(--danger-soft); border-color: rgba(242, 86, 29, .35); color: var(--danger-fg); }
.msg-bloqueio { background: var(--danger-soft); border-color: rgba(242, 86, 29, .3); color: var(--danger-fg); }
.msg-wv { background: var(--success-soft); border-color: rgba(34, 184, 104, .3); color: var(--success-fg); }
.msg-alerta { background: var(--warning-soft); border-color: rgba(245, 165, 36, .3); color: var(--warning-fg); font-weight: var(--fw-regular); }
.msg-achou { background: var(--success-soft); border-color: rgba(34, 184, 104, .3); color: var(--success-fg); }
.msg-achou strong, .msg-achou small { display: block; margin-top: 6px; }
.msg-achou strong { color: var(--text-strong); }
.msg-achou small { color: var(--text-muted); font-weight: var(--fw-regular); }

/* ── formulários e botões ── */
.campo { display: block; margin-bottom: 14px; }
.campo span {
    display: block; margin-bottom: 6px; font-size: .72rem; font-weight: var(--fw-semibold); color: var(--text-subtle);
    text-transform: uppercase; letter-spacing: var(--ls-caps);
}
.campo input {
    width: 100%; padding: 13px 14px; min-height: var(--control-lg); border-radius: var(--radius-md); border: 1px solid var(--border-default);
    background: var(--surface-input); color: var(--text-strong); font-size: 1rem; font-weight: var(--fw-medium); outline: none;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.campo input:focus { border-color: var(--border-focus); box-shadow: var(--ring-focus); }
.botao {
    display: block; width: 100%; margin-top: 12px; padding: 14px 16px; min-height: 50px; border: 1px solid transparent;
    border-radius: var(--radius-md); background: var(--brand); color: var(--on-brand); text-align: center;
    font-weight: var(--fw-semibold); font-size: 1rem; letter-spacing: .005em; text-decoration: none; cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.botao:active { transform: scale(.98); background: var(--brand-press); }
.botao:disabled { opacity: .45; cursor: not-allowed; }
.botao-secundario { background: var(--surface-raised); border-color: var(--border-default); color: var(--text-strong); }
.botao-secundario:active { background: var(--surface-active); }
.botao-whatsapp { background: var(--whats); color: var(--ink-950); }
.botao-whatsapp:active { background: var(--whats); filter: brightness(.92); }
.botao-mini {
    padding: 8px 12px; border-radius: var(--radius-md); background: var(--brand); color: var(--on-brand);
    font-size: .8rem; font-weight: var(--fw-semibold); text-decoration: none; white-space: nowrap;
}
.botoes-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.botoes-lado .botao { margin-top: 12px; }

/* ── passos numerados ── */
.passos { list-style: none; margin: 8px 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: 10px; }
.passos li { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--text-muted); }
.passo-n {
    width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--brand); color: var(--on-brand); font-size: .75rem;
    font-family: var(--font-display); font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contagem { text-align: center; margin-top: 8px; }
.contagem-n { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: var(--fw-black); color: var(--text-brand); font-variant-numeric: tabular-nums; }
.contagem-txt { font-size: .75rem; color: var(--text-subtle); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); }

/* ── home: avisos e oferta ── */
.faixa-aviso {
    background: var(--warning-soft); border: 1px solid rgba(245, 165, 36, .3); color: var(--warning-fg); border-radius: var(--radius-lg);
    padding: var(--space-3) 14px; margin-bottom: var(--space-3); font-weight: var(--fw-semibold); font-size: .9rem;
}
.faixa-erro { background: var(--danger-soft); border-color: rgba(242, 86, 29, .35); color: var(--danger-fg); }
.faixa-ok { background: var(--success-soft); border-color: rgba(34, 184, 104, .35); color: var(--success-fg); }
.oferta-catalogo {
    display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 14px; margin-bottom: 14px; border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(225, 29, 72, .24), rgba(225, 29, 72, .07)); border: 1px solid rgba(225, 29, 72, .35);
    text-decoration: none;
}
.oferta-icone { font-size: 1.5rem; }
.oferta-texto { flex: 1; display: flex; flex-direction: column; font-size: .8rem; color: var(--text-muted); }
.oferta-texto strong { color: var(--text-strong); font-size: .95rem; font-weight: var(--fw-bold); }
.oferta-seta { font-weight: var(--fw-bold); color: var(--text-brand); }
/* o aviso "Seu catálogo vence em X dias" com a renovação ali mesmo (D196) */
.renovar-aviso { padding: var(--space-4); margin-bottom: 14px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--brand); }
.renovar-aviso-titulo { margin: 0 0 var(--space-1); font-weight: var(--fw-bold); color: var(--text-strong); }
.renovar-aviso-texto { margin: 0 0 var(--space-3); font-size: .85rem; color: var(--text-muted); }
.renovar-aviso-cartao { display: block; margin-top: var(--space-2); text-align: center; font-size: .85rem; color: var(--text-muted); }
/* o RELÓGIO VERMELHO da subida para o catálogo (D244): em destaque no alto do Início, com o tempo correndo (relogio.js) */
.relogio-subida { padding: var(--space-4); margin-bottom: 14px; border-radius: var(--radius-lg); text-align: center;
    background: linear-gradient(180deg, rgba(225, 29, 72, .28), rgba(122, 15, 40, .55)); border: 1px solid var(--red-500);
    box-shadow: 0 0 0 3px var(--brand-soft); }
.relogio-subida-topo { margin: 0; font-size: .8rem; font-weight: var(--fw-semibold); letter-spacing: .02em; color: var(--red-100); text-transform: uppercase; }
.relogio-subida-tempo { margin: 2px 0 var(--space-2); font-family: var(--font-display); font-size: 2.4rem; font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--on-brand); }
.relogio-subida-texto { margin: 0 0 var(--space-1); font-size: .88rem; color: var(--red-50); }
.relogio-subida-texto strong { color: var(--on-brand); }
.botao-relogio { background: var(--on-brand); color: var(--red-600); font-weight: var(--fw-bold); }
.botao-relogio:hover, .botao-relogio:focus-visible { background: var(--red-50); }
.relogio-subida-cartao { display: block; margin-top: var(--space-2); font-size: .85rem; color: var(--red-100); }
.relogio-subida-fim { margin: var(--space-2) 0 0; font-size: .88rem; color: var(--red-100); }
.relogio-acabou { background: var(--surface-card); box-shadow: none; }
.relogio-acabou .relogio-subida-tempo { color: var(--text-muted); }
.relogio-mini { margin: 0 0 var(--space-3); padding: 8px 12px; border-radius: var(--radius-md); text-align: center; font-size: .88rem;
    background: var(--brand-soft); border: 1px solid var(--red-500); color: var(--red-100); }
.relogio-mini strong { font-family: var(--font-display); font-variant-numeric: tabular-nums; color: var(--on-brand); }

/* ── banners ── */
.banners { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); margin-bottom: 14px; }
.banners-trilho { display: flex; transition: transform .5s var(--ease-out); }
.banner { flex: 0 0 100%; aspect-ratio: 16 / 9; background: var(--gradient-hero); }
.banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner img.quebrada { display: none; }
/* o 1º banner: as novidades, montado sozinho (D249) — 2 fileiras de 5 capas ocupando a largura toda (D250, a opção B do
   dono): cabem no 16:9 do celular ao computador; a capa corta um pouquinho em cima e embaixo; embaixo, o espaço das bolinhas */
.banner-novidades { display: flex; flex-direction: column; gap: clamp(4px, 1.2vw, 10px); min-height: 0; overflow: hidden;
    padding: clamp(6px, 2vw, 16px) clamp(8px, 2.4vw, 18px) clamp(18px, 4.6vw, 28px); }
.novidades-titulo { margin: 0; font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(.8rem, 3.6vw, 1.3rem);
    line-height: 1.15; letter-spacing: -.005em; color: var(--text-strong); text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.novidades-capas { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(4px, 1.2vw, 10px); }
.novidade { position: relative; display: block; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: var(--radius-sm);
    overflow: hidden; background: var(--surface-card); box-shadow: 0 4px 12px rgba(0, 0, 0, .45); cursor: pointer; }
.novidade::before { content: "🎬"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.1rem; opacity: .5; }   /* capa que não carregou */
.novidade img { position: relative; object-position: center 30%; }
span.novidade { cursor: default; }
.novidade:active { transform: scale(.97); }
.banners-pontos { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.ponto { width: 6px; height: 6px; border-radius: var(--radius-full); background: rgba(255, 255, 255, .35); transition: width var(--dur-base) var(--ease-out); }
.ponto.ativo { background: var(--ink-0); width: 16px; }

/* ── busca ── */
.busca { position: relative; margin-bottom: 18px; }
.busca svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-subtle); }
.busca input {
    width: 100%; min-height: 46px; padding: 12px 14px 12px 42px; border-radius: var(--radius-md); border: 1px solid var(--border-default);
    background: var(--surface-input); color: var(--text-strong); font-size: 1rem; outline: none;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.busca input::placeholder { color: var(--text-subtle); }
.busca input:focus { border-color: var(--border-focus); box-shadow: var(--ring-focus); }

/* ── faixas e cartões das séries (pôster com véu escuro, como o MediaThumb do design system) ── */
.faixa { margin-bottom: 22px; }
.faixa-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.faixa-topo h2 { margin: 0; font-size: 1.05rem; font-weight: var(--fw-bold); }
/* D312 — a fileira do jeito do app da Netflix no celular: o título se toca e tem a seta "›" (abre a fileira toda, em
   grade — comum.js); a fileira vai até a borda da tela (a margem negativa desfaz o recuo do .conteudo e o recuo de dentro
   deixa a 1ª capa alinhada com o título), com 3 capas e o pedaço da 4ª cortado na beirada — o sinal de que desliza;
   rolagem solta, com o embalo do dedo, sem trava em cada capa e sem barra aparente. */
.faixa-ver {
    display: inline-flex; align-items: center; gap: 2px; margin: -6px 0; padding: 6px 0; border: 0; background: none;
    font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.faixa-seta { width: 20px; height: 20px; flex: 0 0 auto; stroke-width: 2.5; color: var(--text-muted); transition: transform var(--dur-fast) var(--ease-out); }
.faixa-ver:active .faixa-seta { transform: translateX(3px); }
.faixa-linha {
    display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4) 6px; scroll-padding-inline: var(--space-4); scrollbar-width: none;
}
.faixa-linha::-webkit-scrollbar { display: none; }
.faixa-linha .card { flex: 0 0 30%; max-width: 160px; }
/* a fileira toda (o "ver tudo" da Netflix): uma tela por cima, com a seta de voltar, o nome e todas as capas em grade */
body.com-fileira { overflow: hidden; }
.fileira-toda {
    position: fixed; inset: 0; z-index: var(--z-overlay); overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg-app); animation: aparece var(--dur-fast) var(--ease-out);
}
.fileira-toda-topo {
    position: sticky; top: 0; z-index: var(--z-topbar); display: flex; align-items: center; gap: 4px; height: 56px;
    padding: 0 var(--space-2); background: var(--topo-vidro);
    -webkit-backdrop-filter: blur(var(--blur-overlay)); backdrop-filter: blur(var(--blur-overlay));
}
.fileira-toda-topo h2 { margin: 0; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fileira-toda-miolo { max-width: 640px; margin: 0 auto; padding: var(--space-2) var(--space-4) calc(32px + env(safe-area-inset-bottom)); }
.card {
    position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; padding: 0; border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); overflow: hidden; background: var(--gradient-hero); color: var(--text-strong); cursor: pointer; text-align: left;
    transition: transform var(--dur-fast) var(--ease-out);
}
.card:active { transform: scale(.98); }
.card .capa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .capa.quebrada { display: none; }
.card-sem-capa { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; z-index: 0; }
.card .capa { z-index: 1; }
.card-titulo {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 26px 8px 8px; font-size: .75rem; font-weight: var(--fw-semibold);
    line-height: 1.25; color: var(--text-strong); background: linear-gradient(to top, rgba(0, 0, 0, .95), rgba(0, 0, 0, 0));
}
/* com a capa na tela, o nome não aparece por cima dela (só a arte, como na Netflix — D142); continua para leitor de
   tela. Sem capa, ou se ela não carregar ("quebrada"), o nome aparece para o cartão não ficar sem nome. */
.card .capa:not(.quebrada) ~ .card-titulo {
    width: 1px; height: 1px; padding: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); background: none;
}
.card-marca {
    position: absolute; top: 6px; left: 6px; z-index: 2; font-size: .65rem; font-weight: var(--fw-bold); padding: 3px 7px;
    border-radius: var(--radius-full); background: rgba(0, 0, 0, .7); color: var(--text-strong);
}
/* só as "Recém Chegadas" têm selo: "Novo", em vermelho, como o "Novidade" da Netflix (os 🔥 e ⭐ saíram — D141) */
.marca-nova { background: var(--brand); color: var(--on-brand); }
/* a etiqueta do idioma no canto de baixo da capa e na página da série: Dublado, Legendado ou Brasileira (D227) */
.card-idioma, .etiqueta-idioma {
    font-size: .6rem; font-weight: var(--fw-bold); letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px;
    border-radius: var(--radius-full); background: rgba(0, 0, 0, .74); color: var(--ink-0); line-height: 1.4; white-space: nowrap;
}
.card-idioma { position: absolute; left: 6px; bottom: 6px; z-index: 2; }
.idioma-legendado { color: var(--amber-400); }
.idioma-brasileira { color: var(--green-400); }
.serie-idioma { margin: 2px 0 6px; }
.etiqueta-idioma { font-size: .7rem; padding: 3px 9px; border: 1px solid rgba(255, 255, 255, .18); }

/* ── catálogo ── */
.catalogo-titulo { font-size: 1.05rem; font-weight: var(--fw-bold); }
/* filtros do catálogo lá em cima, presos logo abaixo do cabeçalho, como os botões do app da Netflix (D141) */
.filtros { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtros-topo {
    position: sticky; top: 56px; z-index: var(--z-topbar); margin: -10px calc(-1 * var(--space-4)) 14px;
    padding: 6px var(--space-4) 10px; background: var(--topo-vidro);
    -webkit-backdrop-filter: blur(var(--blur-overlay)); backdrop-filter: blur(var(--blur-overlay));
}
.filtro {
    flex-shrink: 0; min-height: 38px; padding: 7px 16px; border-radius: var(--radius-full); border: 1px solid rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .06); color: var(--text-strong); font-weight: var(--fw-semibold); font-size: .88rem; cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.filtro.ativo { background: var(--ink-0); border-color: var(--ink-0); color: var(--ink-1000); }
/* com um filtro escolhido (não "Todos"), a home mostra só o catálogo daquela categoria, como a Netflix faz */
.so-catalogo .banners, .so-catalogo .faixa { display: none; }
.grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grade-conta { font-size: .78rem; color: var(--text-subtle); margin-bottom: 10px; }
/* o catálogo público (/catalogo — D198): as capas são só para ver (não abrem nada) */
.card-vitrine { cursor: default; }
.card-vitrine:active { transform: none; }
/* a série bloqueada do modo visitante (D199): o player com o cadeado, o nome e os 3 planos */
a.card-vitrine { cursor: pointer; }
.bloqueada-voltar { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2; width: 40px; height: 40px; display: flex;
    align-items: center; justify-content: center; border-radius: var(--radius-full); background: rgba(0, 0, 0, .55); color: var(--ink-0); }
.bloqueada-voltar .icone { width: 22px; height: 22px; }
.bloqueada-player { position: relative; aspect-ratio: 16 / 9; margin: 0 calc(-1 * var(--space-4)) var(--space-4); overflow: hidden; background: var(--surface-raised); }
.bloqueada-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(6px) brightness(.45); transform: scale(1.1); }
.bloqueada-cadeado { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); color: var(--ink-0); }
.bloqueada-cadeado span { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: rgba(0, 0, 0, .55); font-size: 1.5rem; }
.bloqueada-nome { margin: 0; font-size: 1.25rem; font-weight: var(--fw-bold); color: var(--text-strong); }
.bloqueada-sub { margin: var(--space-1) 0 var(--space-4); font-size: .85rem; color: var(--text-muted); }
.bloqueada-chamada { margin: 0 0 var(--space-2); font-size: .9rem; color: var(--text-body); }
.bloqueada-botao { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: var(--space-2); padding: var(--space-3);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); color: var(--text-strong); text-decoration: none; }
.bloqueada-botao strong { font-weight: var(--fw-bold); }
.bloqueada-botao span { font-size: .78rem; color: var(--text-muted); }
.bloqueada-principal { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.bloqueada-principal span { color: var(--on-brand); opacity: .9; }
.bloqueada-faixa { margin: var(--space-5) 0 var(--space-2); font-size: .9rem; font-weight: var(--fw-bold); color: var(--text-body); }
.bloqueada-outras { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
/* "Já pagou? Entre na sua conta" logo abaixo dos preços, legível (rodada 2, 15/10 — antes no fim, pequeno e apagado) */
.bloqueada-cliente { margin: var(--space-4) 0 var(--space-2); text-align: center; font-size: .95rem; color: var(--text-muted); }
.bloqueada-cliente a { color: var(--text-strong); font-weight: 700; text-decoration: underline; }
.bloqueada-ja-cliente { margin: var(--space-4) 0; line-height: 1.45; }
.bloqueada-ja-cliente .botao { display: block; margin-top: var(--space-3); text-align: center; }
/* a série bloqueada da CLIENTE (D208): o bloco da compra; o formulário dos planos (Pix ou Cartão numa escolha só, sem
   script) é o mesmo da "Minha conta" — partes/planos_compra.php (D209) */
.bloqueada-compra { padding: var(--space-4) var(--space-3); border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); }
.bloqueada-compra h2 { margin: 0 0 4px; text-align: center; font-size: 1.15rem; font-weight: var(--fw-bold); color: var(--text-strong); }
.bloqueada-compra-sub { margin: 0 0 var(--space-3); text-align: center; font-size: .9rem; color: var(--text-muted); }
.planos-compra { margin: 0; }
.planos-compra .checkout-meio { position: relative; cursor: pointer; }
.planos-compra .checkout-meio input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.planos-compra .checkout-meio:has(input:checked) { background: var(--brand); color: var(--on-brand); }
.planos-compra .checkout-meio:has(input:focus-visible) { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.bloqueada-agora-nao { display: block; margin: var(--space-3) 0 0; text-align: center; font-size: .9rem; color: var(--text-muted); }
.vitrine-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-3); font-size: .8rem; color: var(--text-muted); }
.vitrine-topo p { margin: 0; }
.vitrine-topo strong { color: var(--text-strong); }
.grade-vazia { grid-column: 1 / -1; text-align: center; padding: 48px 12px; color: var(--text-subtle); font-weight: var(--fw-medium); }

/* ── barra de baixo: flutuante, com 4 ícones, do tamanho da do app da Netflix (D133; menor e centralizada — D143):
      ~80% da largura (no máximo 300 px), 54 px de altura, ícones de 21 px com traço fino, letra de 10,5 px ── */
.barra {
    position: fixed; left: 0; right: 0; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: var(--z-topbar);
    display: flex; gap: 2px; width: calc(100% - 64px); max-width: 300px; margin: 0 auto; padding: 5px;
    border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-full);
    background: rgba(28, 28, 33, .78); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
}
.barra-item {
    position: relative; flex: 1; min-width: 0; min-height: 42px; padding: 3px 2px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px; border: 0; border-radius: var(--radius-full); background: none;
    color: var(--text-muted); font-size: .66rem; font-weight: var(--fw-medium); line-height: 1.1; text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.barra-item span { white-space: nowrap; }
.barra-item svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.barra-item:active { transform: scale(.94); }
.barra-ativo { color: var(--text-strong); background: rgba(255, 255, 255, .13); }
.barra-selo {
    position: absolute; top: 1px; left: 50%; margin-left: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-full);
    background: var(--brand); color: var(--on-brand); font-size: .6rem; font-weight: var(--fw-bold); line-height: 16px; text-align: center;
}

/* ── janelas (no celular sobem de baixo, como no design system) ── */
.janela {
    position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: flex-end; justify-content: center;
    background: var(--surface-overlay); -webkit-backdrop-filter: blur(var(--blur-overlay)); backdrop-filter: blur(var(--blur-overlay));
    animation: aparece var(--dur-base) var(--ease-out);
}
.janela[hidden] { display: none; }
.janela-centro { align-items: center; padding: var(--space-4); }
.janela-caixa {
    width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; background: var(--surface-raised);
    border: 1px solid var(--border-default); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-lg);
    padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); animation: sobe var(--dur-slow) var(--ease-out);
}
.janela-centro .janela-caixa { border-radius: var(--radius-xl); text-align: center; }
.janela-alca { width: 36px; height: 4px; border-radius: var(--radius-full); background: var(--border-strong); margin: 0 auto 14px; }
.janela-texto { font-size: .9rem; }
.janela-secao { font-size: .72rem; font-weight: var(--fw-semibold); color: var(--text-subtle); text-transform: uppercase; letter-spacing: var(--ls-caps); margin: 18px 0 10px; }
.janela-ou { text-align: center; font-size: .8rem; color: var(--text-subtle); margin: 10px 0; }
.janela-dica { font-size: .75rem; color: var(--text-subtle); text-align: center; }
.janela-dica span { color: var(--text-muted); }
.janela-fechar {
    display: block; width: 100%; margin-top: 10px; padding: 12px; border: 0; border-radius: var(--radius-md); background: none;
    color: var(--text-muted); font-weight: var(--fw-semibold); cursor: pointer;
}
.janela-icone { display: block; font-size: 2.4rem; margin-bottom: 6px; }
.conta-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.conta-topo h3 { margin-bottom: 2px; }
.conta-topo p { margin: 0; font-size: .85rem; }
.conta-validade { color: var(--warning-fg) !important; font-weight: var(--fw-semibold); }
.selo-creditos { padding: 6px 12px; border-radius: var(--radius-full); background: var(--brand-soft); border: 1px solid rgba(225, 29, 72, .3); font-size: .8rem; white-space: nowrap; }
.selo-creditos strong { font-family: var(--font-display); color: var(--text-brand); font-size: 1rem; }
.linha-serie { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border-subtle); }
.linha-serie-nome { font-weight: var(--fw-semibold); font-size: .9rem; color: var(--text-strong); }
.linha-serie-nome small { display: block; color: var(--text-subtle); font-weight: var(--fw-medium); }
.plano {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 10px; border-radius: var(--radius-lg);
    background: var(--surface-card); border: 1px solid var(--border-default); text-decoration: none; text-align: left;
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.plano-popular { border-color: rgba(225, 29, 72, .5); background: rgba(225, 29, 72, .07); }
/* os planos que são botão (a compra pela tela "Seus créditos acabaram" — D184) */
.plano-form { margin: 0; }
button.plano { width: 100%; font: inherit; color: inherit; cursor: pointer; }
.plano-selo {
    position: absolute; top: -9px; right: 12px; padding: 2px 8px; border-radius: var(--radius-full); background: var(--brand);
    color: var(--on-brand); font-size: .65rem; font-weight: var(--fw-bold);
}
.plano-icone { font-size: 1.5rem; }
.plano-info { flex: 1; display: flex; flex-direction: column; font-size: .78rem; color: var(--text-muted); }
.plano-info strong { color: var(--text-strong); font-size: .95rem; font-weight: var(--fw-bold); }
.plano-preco { font-family: var(--font-display); font-weight: var(--fw-black); color: var(--text-brand); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dado { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-card); border: 1px solid var(--border-subtle); font-size: .88rem; }
.dado span { color: var(--text-muted); }
.dado strong { color: var(--text-strong); }
.dado-dica { font-size: .8rem; margin: 10px 0 0; }
/* a Minha conta (D209): a série liberada com a capa, as compras, a troca de senha e a ajuda */
a.linha-serie { text-decoration: none; color: inherit; }
.linha-serie-capa { width: 34px; height: 48px; flex: none; border-radius: 6px; object-fit: cover; }
.linha-serie .linha-serie-nome { flex: 1; }
.compras { display: flex; flex-direction: column; }
.compra { display: flex; justify-content: space-between; gap: 10px; padding: 8px 2px; border-bottom: 1px dashed var(--border-subtle); font-size: .82rem; color: var(--text-muted); }
.compra span:first-child { color: var(--text-body); }
.dado + .dado, .dado + .dado-senha, .dado-senha + .dado, .dado-acao + .dado-acao { margin-top: 8px; }
.dado-link { color: var(--text-link) !important; font-weight: var(--fw-semibold); }
a.dado { text-decoration: none; }
.dado-senha > summary { cursor: pointer; list-style: none; }
.dado-senha > summary::-webkit-details-marker { display: none; }
.dado-senha-form { margin: 10px 0 0; }
.dado-senha-form .botao { margin-top: 4px; }
.dado-senha[open] .dado-link { opacity: .6; }
.dado-dica a { color: var(--text-link); font-weight: var(--fw-semibold); }
.garantias { display: flex; justify-content: center; gap: var(--space-4); font-size: .78rem; margin-top: 6px; }
.enviar-foto {
    display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
    cursor: pointer; font-weight: var(--fw-semibold); font-size: .88rem; color: var(--text-strong);
}
.enviar-foto small { display: block; color: var(--text-subtle); font-weight: var(--fw-regular); }
.enviar-foto-icone { font-size: 1.5rem; }
.previa { display: block; max-width: 100%; max-height: 180px; margin: 10px auto; border-radius: var(--radius-md); }
.pedido-ok { text-align: center; padding: var(--space-5) 0; }
.pedido-ok-icone { font-size: 2.6rem; }
.credito-capa { display: block; width: 120px; aspect-ratio: 2 / 3; object-fit: cover; margin: 0 auto 12px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }

/* ── página da série ── */
.serie { text-align: center; }
.serie-titulo {
    display: inline-block; padding: 8px 14px; border-radius: var(--radius-lg); background: var(--neutral-soft); border: 1px solid var(--border-subtle);
    font-family: var(--font-display); font-size: 1rem; font-weight: var(--fw-bold);
}
.serie-dica { font-size: .85rem; }
.serie-expira { font-size: .8rem; color: var(--warning-fg); font-weight: var(--fw-semibold); }
.serie-avisar { margin-top: var(--space-4); font-size: .85rem; }   /* 15/10: o aviso da série incompleta (a Ajuda) */
.serie-avisar a { color: var(--text-muted); text-decoration: underline; }
.player { width: 100%; max-width: 420px; margin: 12px auto 0; }
.player-vturb { display: block; width: 100%; }
.player-desligado {
    display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; aspect-ratio: 9 / 16;
    border-radius: var(--radius-xl); border: 1px dashed var(--border-strong); background: var(--gradient-hero); padding: var(--space-5); color: var(--text-muted);
}
.player-desligado strong { color: var(--text-strong); }

/* ── telas de situação (renovar, teste acabou, bloqueado) ── */
.cartao-situacao { max-width: 440px; margin: var(--space-6) auto; background: var(--gradient-brand-glow), var(--surface-card); }
.situacao-topo { text-align: center; margin-bottom: 18px; }
.situacao-topo h1 { font-size: 1.4rem; font-weight: var(--fw-bold); }
.situacao-icone {
    display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin: 0 auto 14px;
    border-radius: var(--radius-full); background: var(--brand-soft); border: 1px solid rgba(225, 29, 72, .3); font-size: 2.1rem;
}
.situacao-pulsa { animation: pulsa 2.4s ease-in-out infinite; }
@keyframes pulsa { 0%, 100% { box-shadow: 0 0 28px rgba(225, 29, 72, .3); } 50% { box-shadow: 0 0 44px rgba(225, 29, 72, .55); } }
/* "Seu catálogo venceu" no jeito dos sites profissionais (D197): a data, as capas em alta, um botão, o cartão pequeno,
   as garantias numa linha, a saída mais barata e o rodapé pequeno */
.renovar-pro { max-width: 420px; margin: var(--space-6) auto var(--space-4); padding: 0 var(--space-1); text-align: center; }
.renovar-pro-titulo { margin: 0; font-size: 1.4rem; font-weight: var(--fw-bold); color: var(--text-strong); }
.renovar-pro-sub { margin: var(--space-1) 0 var(--space-5); font-size: .9rem; color: var(--text-muted); }
.renovar-pro-faixa { margin: 0 0 var(--space-2); text-align: left; font-size: .85rem; font-weight: var(--fw-bold); color: var(--text-body); }
.renovar-capas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-5); }
.renovar-capa { position: relative; aspect-ratio: 2 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-raised); }
.renovar-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.renovar-capa span { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-4) var(--space-1) var(--space-1); font-size: .7rem; text-align: left;
    color: var(--ink-0); background: linear-gradient(transparent, rgba(0, 0, 0, .8)); }
.renovar-pro-botao { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-3) var(--space-4);
    border: 0; border-radius: var(--radius-lg); background: var(--brand); color: var(--on-brand); font: inherit; cursor: pointer; }
.renovar-pro-botao strong { font-size: 1.05rem; font-weight: var(--fw-bold); }
.renovar-pro-botao span { font-size: .8rem; opacity: .9; }
.renovar-pro-botao:hover { background: var(--brand-hover); }
.renovar-pro-cartao { display: inline-block; margin: var(--space-3) 0 var(--space-1); font-size: .9rem; color: var(--text-body); text-decoration: underline; }
.renovar-pro-garantias { margin: 0 0 var(--space-5); font-size: .75rem; color: var(--text-subtle); }
.renovar-pro-menos { margin: 0 0 var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); font-size: .9rem; color: var(--text-muted); }
.renovar-pro-menos a { color: var(--text-strong); font-weight: var(--fw-bold); }
.renovar-pro-rodape { margin: 0; font-size: .75rem; color: var(--text-subtle); }
.renovar-pro-rodape a { color: var(--text-muted); }
.garantia-renovar { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 14px 0 4px; font-size: .8rem; color: var(--text-muted); text-align: center; }
.garantia-renovar strong { color: var(--success-fg); }
.selo-telefone { margin-top: 6px; padding: 6px 12px; border-radius: var(--radius-full); background: var(--surface-raised); border: 1px solid var(--border-subtle); }
.selo-telefone strong { color: var(--text-strong); font-family: var(--font-mono); font-weight: var(--fw-medium); }
.situacao-rodape { text-align: center; font-size: .8rem; color: var(--text-subtle); border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); }

/* ── aprenda ── */
.alerta-fixo {
    position: sticky; top: 0; z-index: 30; background: var(--brand); color: var(--on-brand); font-weight: var(--fw-bold); font-size: .82rem;
    text-align: center; padding: 10px 14px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-md);
}
.alerta-fixo span { display: block; font-weight: var(--fw-medium); opacity: .9; }
.aprenda { text-align: center; padding-top: var(--space-4); }
.rodape-aprenda { font-size: .75rem; color: var(--text-subtle); margin-top: var(--space-5); }

/* ── erros ── */
.discreto { font-size: .875rem; }
.detalhe {
    white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-sunken); border: 1px solid var(--border-default); border-radius: var(--radius-md);
    padding: 10px; font-family: var(--font-mono); font-size: .8rem; color: var(--danger-fg); text-align: left;
}

.msg-sucesso { background: var(--success-soft); border-color: rgba(34, 184, 104, .3); color: var(--success-fg); }
.mensagem-pronta {
    white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-sunken); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
    padding: 12px; font-size: .85rem; color: var(--text-strong); font-family: inherit; line-height: 1.5;
}
.carteira-barra {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px; border-radius: var(--radius-lg);
    border: 1px solid rgba(34, 184, 104, .3); background: var(--success-soft); color: var(--text-strong); text-align: left; cursor: pointer;
}
.carteira-icone { font-size: 1.2rem; }
.carteira-info { flex: 1; display: flex; flex-direction: column; font-size: .75rem; color: var(--text-muted); }
.carteira-info strong { font-family: var(--font-display); color: var(--success-fg); font-size: 1rem; font-variant-numeric: tabular-nums; }
.carteira-info small { color: var(--text-subtle); font-weight: var(--fw-medium); }
.carteira-ir { font-size: .75rem; color: var(--success-fg); font-weight: var(--fw-semibold); }
.linha-valor { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border-subtle); font-size: .85rem; }
.linha-valor small { color: var(--text-subtle); }
.linha-valor strong { color: var(--success-fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rotulo { display: block; font-size: .72rem; font-weight: var(--fw-semibold); color: var(--text-subtle); text-transform: uppercase; letter-spacing: var(--ls-caps); margin: 14px 0 8px; }
.planos-venda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.plano-venda {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border-radius: var(--radius-lg);
    border: 1px solid var(--border-default); background: var(--surface-raised); color: var(--text-muted); cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.plano-venda strong { color: var(--text-strong); font-size: .86rem; white-space: nowrap; }
.plano-venda-preco { font-family: var(--font-display); font-size: 1.05rem; font-weight: var(--fw-black); color: var(--text-brand); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plano-venda small { font-size: .7rem; }
.plano-venda-teste { border-style: dashed; }   /* a oferta teste do Atender (18/10): separada das outras */
.plano-venda.ativo { border-color: var(--brand); background: var(--brand-soft); }
.cartao-destaque { border-color: rgba(34, 184, 104, .4); }
.papeis { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.papel { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--border-default); font-size: .82rem; }
.titulo-lista { margin: 18px 0 10px; }
.conta-inativa { opacity: .6; }
.conta-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.conta-usuario { color: var(--text-subtle); font-family: var(--font-mono); font-size: .8rem; }
.conta-situacao { margin-left: auto; font-size: .78rem; }
.conta-login { font-size: .78rem; }
.conta-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.conta-botoes form { margin: 0; }

/* ── telas maiores ── */
@media (min-width: 640px) {
    .grade { grid-template-columns: repeat(4, 1fr); }
    .faixa-linha .card { flex-basis: 150px; }
}
@media (min-width: 900px) {
    .conteudo, .fileira-toda-miolo { max-width: 960px; }
    .grade { grid-template-columns: repeat(6, 1fr); }
}

/* ═══════════════ Telegram (Etapa 5): oferta, Pix, retenção e acesso — o desenho da página atual, nas cores novas ═══════════════ */
.pagina-telegram { background: var(--bg-app); color: var(--text-body); overflow-x: hidden; }
.tg-wrap { width: 100%; max-width: 440px; margin: 0 auto; padding: 0 var(--space-5); }
.tg-nav { display: flex; align-items: center; justify-content: center; padding: 22px 0 6px; position: relative; }
.tg-voltar { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--text-subtle); font-size: 18px; text-decoration: none; padding: 6px 8px; }
.tg-marca { font-family: var(--font-display); font-size: 13px; font-weight: var(--fw-black); letter-spacing: .28em; color: var(--text-strong); }
.tg-marca span { color: var(--brand); }
.tg-hero { text-align: center; padding: 46px 0 0; }
.tg-selo {
    display: inline-block; margin-bottom: 22px; padding: 7px 15px; font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .14em;
    color: var(--text-body); background: var(--neutral-soft); border: 1px solid var(--border-default); border-radius: var(--radius-full);
}
.tg-titulo { margin: 0; font-size: clamp(30px, 8.5vw, 42px); font-weight: var(--fw-black); line-height: 1.06; letter-spacing: -.03em; color: var(--text-strong); }
.tg-destaque { color: var(--brand); }
.tg-sub { margin: 22px auto 0; font-size: 13.5px; font-weight: var(--fw-medium); letter-spacing: .02em; color: var(--text-muted); }
.tg-sub b { color: var(--text-body); font-weight: var(--fw-semibold); }
.tg-sub-2 { margin-top: 10px; }
.tg-sep { color: var(--text-subtle); margin: 0 7px; }
.tg-palco { margin: 32px 0 0; }
.tg-moldura {
    position: relative; width: 100%; border-radius: var(--radius-2xl); overflow: hidden; background: var(--surface-sunken); border: 1px solid var(--border-strong);
    box-shadow: 0 30px 80px -20px rgba(225, 29, 72, .28), var(--shadow-lg);
}
.tg-moldura .player-desligado { margin: 0; border-radius: 0; border: 0; aspect-ratio: 9 / 16; }
.tg-moldura-estreita { max-width: 400px; margin: 0 auto; }
.tg-carrossel { position: relative; margin: 26px -20px 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 9%, rgb(0, 0, 0) 91%, transparent); mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 9%, rgb(0, 0, 0) 91%, transparent); }
.tg-trilho { display: flex; gap: 12px; width: max-content; animation: tg-rolar 66s linear infinite; }
.tg-carrossel:hover .tg-trilho { animation-play-state: paused; }
.tg-story {
    flex: 0 0 auto; width: 288px; aspect-ratio: 9 / 16; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-raised);
    border: 1px solid var(--border-strong); box-shadow: var(--shadow-md);
}
.tg-story img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes tg-rolar { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.tg-pitch { text-align: center; padding: 40px 6px 0; }
.tg-pitch h2 { margin: 0; font-size: clamp(21px, 5.5vw, 25px); font-weight: var(--fw-black); line-height: 1.2; letter-spacing: -.02em; color: var(--text-strong); }
.tg-pitch p { margin: 14px auto 0; max-width: 330px; font-size: 14px; line-height: 1.62; color: var(--text-muted); }
.tg-preco-bloco { padding: 34px 0 0; }
.tg-preco-cartao {
    position: relative; padding: 30px 24px 26px; border-radius: var(--radius-2xl); text-align: center;
    background: var(--gradient-brand-glow), linear-gradient(180deg, var(--ink-850) 0%, var(--ink-950) 100%);
    border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
}
.tg-preco-selo {
    display: inline-block; margin-bottom: 18px; padding: 6px 13px; font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: .13em;
    color: var(--red-100); background: var(--brand-soft); border: 1px solid rgba(225, 29, 72, .3); border-radius: var(--radius-full);
}
.tg-preco-antes { margin: 0 0 6px; font-size: 13px; color: var(--text-subtle); letter-spacing: .02em; }
.tg-preco-antes s { color: var(--text-muted); text-decoration-color: rgba(225, 29, 72, .7); }
.tg-preco-linha { display: flex; align-items: baseline; justify-content: center; gap: 4px; font-family: var(--font-display); }
.tg-preco-rs { font-size: 22px; font-weight: var(--fw-bold); color: var(--text-muted); align-self: flex-start; margin-top: 9px; }
.tg-preco-valor { font-size: 58px; font-weight: var(--fw-black); letter-spacing: -.04em; line-height: 1; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.tg-preco-centavos { font-size: 19px; font-weight: var(--fw-bold); color: var(--text-muted); align-self: flex-start; margin-top: 8px; }
.tg-preco-nota { margin: 10px auto 0; font-size: 12.5px; color: var(--text-subtle); letter-spacing: .02em; }
.tg-vantagens { display: flex; flex-direction: column; gap: 1px; margin: 24px 0 4px; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-subtle); }
.tg-vantagem { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: rgba(255, 255, 255, .02); text-align: left; }
.tg-vantagem span:last-child { font-size: 13px; color: var(--text-body); font-weight: var(--fw-medium); }
.tg-vantagem b { color: var(--text-strong); font-weight: var(--fw-bold); }
.tg-ic {
    flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: var(--radius-full);
    background: var(--success-soft); color: var(--success-fg); font-size: 11px; font-weight: var(--fw-bold);
}
.tg-vantagem-quente { background: rgba(225, 29, 72, .07); }
.tg-ic-quente { background: var(--brand-soft); }
.tg-aviso-adulto { margin: 14px auto 0; max-width: 300px; font-size: 11px; line-height: 1.5; color: var(--text-subtle); }
.tg-aviso-adulto b { color: var(--ink-200); }
.tg-botao {
    display: block; width: 100%; margin-top: 22px; padding: 19px 20px; border: 0; cursor: pointer; border-radius: var(--radius-lg);
    color: var(--on-brand); font: inherit; font-size: 16px; font-weight: var(--fw-bold); letter-spacing: .01em; text-align: center; text-decoration: none;
    background: var(--brand); box-shadow: var(--shadow-brand);
    transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tg-botao:active { transform: scale(.98); background: var(--brand-press); }
.tg-botao:disabled { opacity: .7; cursor: default; }
.tg-botao-gerar { margin-top: 18px; }
.tg-botao-sub { margin: 12px 0 0; font-size: 12px; color: var(--text-muted); text-align: center; }
.tg-seguro { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 16px 0 0; color: var(--text-subtle); font-size: 12px; }
.tg-pagamento { display: none; scroll-margin-top: 18px; margin-top: 24px; }
.tg-pagamento.visivel { display: block; animation: tg-subir var(--dur-slow) var(--ease-out) both; }
.tg-pagamento-cartao { padding: 28px 22px; border: 1px solid var(--border-strong); border-radius: var(--radius-2xl); background: var(--surface-card); text-align: center; }
.tg-pagamento-cartao h2 { margin: 0; font-size: 22px; font-weight: var(--fw-black); letter-spacing: -.02em; }
.tg-pagamento-cartao #dados > p { max-width: 330px; margin: 11px auto 22px; color: var(--text-muted); font-size: 13px; line-height: 1.55; }
.tg-campo { text-align: left; }
.tg-campo label { display: block; margin: 0 0 9px; color: var(--text-body); font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .02em; }
.tg-campo input {
    width: 100%; height: 56px; padding: 0 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: 0;
    background: var(--surface-input); color: var(--text-strong); font-family: var(--font-sans); font-size: 16px; font-weight: var(--fw-semibold);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tg-campo input:focus { border-color: var(--border-focus); box-shadow: var(--ring-focus); }
.tg-erro { display: none; margin: 12px 0 0; color: var(--danger-fg); font-size: 12.5px; }
.tg-erro.visivel { display: block; }
.tg-pix { display: none; }
.tg-pix.visivel { display: block; }
.tg-pix h2 { margin-bottom: 18px; }
.tg-qr { display: grid; place-items: center; width: 210px; height: 210px; margin: 0 auto 18px; border-radius: var(--radius-xl); background: var(--ink-0); padding: 8px; }
.tg-qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.tg-copia { display: flex; gap: 8px; }
.tg-codigo {
    flex: 1; min-width: 0; overflow: hidden; padding: 13px; border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: var(--surface-sunken); color: var(--text-muted); text-align: left; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-mono); font-size: 11px;
}
.tg-copiar { min-width: 82px; border: 1px solid var(--brand); border-radius: var(--radius-md); background: transparent; color: var(--text-strong); cursor: pointer; font-size: 11px; font-weight: var(--fw-bold); }
.tg-esperando { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; color: var(--text-muted); font-size: 12.5px; }
.tg-ponto { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--brand); animation: tg-pulsar 1.7s infinite; }
.tg-ajuda { display: inline-block; margin-top: 20px; color: var(--ink-200); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.tg-simular {
    display: block; width: 100%; margin-top: 16px; padding: 12px; border: 1px dashed rgba(245, 165, 36, .6); border-radius: var(--radius-md);
    background: var(--warning-soft); color: var(--warning-fg); font: inherit; font-size: 13px; font-weight: var(--fw-bold); cursor: pointer;
}
.tg-simular[hidden] { display: none; }
.tg-rodape { text-align: center; padding: 44px 0 40px; margin: 0; color: var(--text-subtle); font-size: 11px; line-height: 1.7; }
/* Retenção ao apertar "voltar" */
.tg-ret-fundo {
    position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 20px; background: var(--surface-overlay);
    -webkit-backdrop-filter: blur(var(--blur-overlay)) saturate(.5); backdrop-filter: blur(var(--blur-overlay)) saturate(.5); opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
.tg-ret-fundo.aberto { display: flex; }
.tg-ret-fundo.visivel { opacity: 1; }
.tg-ret-cartao {
    width: 100%; max-width: 330px; max-height: 94vh; overflow-y: auto; padding: 24px 27px; text-align: center;
    background: radial-gradient(120% 85% at 50% 0%, rgba(225, 29, 72, .18) 0%, rgba(225, 29, 72, 0) 60%), var(--ink-950);
    border: 1.5px solid var(--brand); border-radius: var(--radius-2xl);
    box-shadow: 0 0 22px rgba(225, 29, 72, .34), 0 0 70px rgba(225, 29, 72, .14), var(--shadow-lg);
    transform: scale(.94); transition: transform var(--dur-slow) var(--ease-out);
}
.tg-ret-fundo.visivel .tg-ret-cartao { transform: scale(1); }
.tg-ret-selo {
    display: inline-block; padding: 11px 30px; font-size: 13.5px; font-weight: var(--fw-bold); letter-spacing: 2px; color: var(--text-strong);
    background: rgba(225, 29, 72, .22); border: 1px solid rgba(225, 29, 72, .55); border-radius: var(--radius-full); box-shadow: 0 0 14px rgba(225, 29, 72, .28);
}
.tg-ret-titulo { margin: 24px 0 0; font-size: 29px; font-weight: var(--fw-black); line-height: 1.02; letter-spacing: -.03em; color: var(--text-strong); white-space: nowrap; }
.tg-ret-titulo em {
    display: block; margin-top: 2px; font-style: normal; font-size: 43px; line-height: .98; letter-spacing: -.042em; color: var(--brand);
    text-shadow: 0 0 26px rgba(225, 29, 72, .38); white-space: nowrap;
}
.tg-ret-texto { margin: 20px auto 0; font-size: 18px; font-weight: var(--fw-bold); line-height: 1.35; letter-spacing: -.018em; color: var(--text-body); }
.tg-ret-precos { display: flex; align-items: center; justify-content: center; gap: 11px; margin: 22px 0 0; white-space: nowrap; font-family: var(--font-display); }
.tg-ret-de { font-size: 17px; font-weight: var(--fw-bold); color: var(--text-subtle); text-decoration: line-through; text-decoration-thickness: 2px; }
.tg-ret-por { font-size: 41px; font-weight: var(--fw-black); line-height: 1; letter-spacing: -.042em; color: var(--text-strong); }
.tg-ret-tempo {
    display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 10px 20px; border-radius: var(--radius-full);
    background: rgba(0, 0, 0, .5); border: 1px solid rgba(225, 29, 72, .5); font-size: 16px; font-weight: var(--fw-bold); color: var(--red-300);
}
.tg-ret-tempo b { font-size: 18px; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.tg-ret-sim {
    display: block; width: 100%; height: 60px; margin: 20px 0 0; border: 0; border-radius: var(--radius-lg); cursor: pointer; background: var(--brand); color: var(--on-brand);
    font: inherit; font-size: 18.5px; font-weight: var(--fw-bold); letter-spacing: -.015em; white-space: nowrap;
    box-shadow: 0 0 26px rgba(225, 29, 72, .5), var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .24);
}
.tg-ret-sim:active { background: var(--brand-press); transform: scale(.98); }
.tg-ret-nao {
    display: block; width: 100%; margin: 20px 0 0; padding: 0 0 4px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px;
    color: var(--text-subtle); text-decoration: underline; text-underline-offset: 3px;
}
.tg-faixa {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; display: none; padding: 12px 16px; text-align: center;
    background: linear-gradient(180deg, var(--red-600), var(--red-800)); color: var(--on-brand); font-size: 13px; font-weight: var(--fw-bold); box-shadow: var(--shadow-lg);
}
.tg-faixa.visivel { display: block; }
.tg-faixa b { font-variant-numeric: tabular-nums; }
@media (max-width: 360px) {
    .tg-ret-cartao { padding: 22px 20px; }
    .tg-ret-titulo { font-size: 26px; }
    .tg-ret-titulo em { font-size: 39px; }
    .tg-ret-texto { font-size: 17px; }
    .tg-ret-por { font-size: 37px; }
    .tg-ret-de { font-size: 16px; }
    .tg-ret-sim { font-size: 17px; height: 56px; }
}
/* Depois do pagamento */
.tg-conferindo { text-align: center; padding: 80px 0; }
.tg-roda { width: 44px; height: 44px; margin: 0 auto 22px; border: 3px solid var(--border-default); border-top-color: var(--brand); border-radius: var(--radius-full); animation: tg-girar 1s linear infinite; }
.tg-conferindo-k { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .14em; color: var(--text-subtle); }
.tg-conferindo-t { margin-top: 10px; font-family: var(--font-display); font-size: 22px; font-weight: var(--fw-bold); letter-spacing: -.02em; color: var(--text-strong); }
.tg-conferindo-c { margin-top: 10px; font-size: 14px; color: var(--text-muted); }
.tg-falha { text-align: center; padding: 70px 0; }
.tg-falha-sinal {
    display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: var(--radius-full);
    background: var(--brand-soft); border: 1px solid rgba(225, 29, 72, .3); color: var(--text-brand); font-size: 26px;
}
.tg-falha-t { font-family: var(--font-display); font-size: 21px; font-weight: var(--fw-bold); letter-spacing: -.02em; color: var(--text-strong); }
.tg-falha-c { margin: 12px auto 0; max-width: 320px; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.tg-conferindo[hidden], .tg-falha[hidden], .tg-aprovado[hidden] { display: none; }
.tg-aprovado { animation: tg-subir .35s var(--ease-out) both; }
.tg-aprovado-topo { text-align: center; padding: 34px 0 0; }
.tg-carimbo {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius-full); background: var(--success-soft);
    border: 1px solid rgba(34, 184, 104, .28); color: var(--success-fg); font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .08em;
}
.tg-carimbo-ok { width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--success); color: var(--ink-950); display: grid; place-items: center; font-size: 10px; font-weight: var(--fw-bold); }
.tg-aprovado-topo h1 { margin: 22px auto 0; font-size: clamp(25px, 7vw, 32px); font-weight: var(--fw-black); line-height: 1.1; letter-spacing: -.03em; }
.tg-aprovado-topo p { margin: 14px auto 0; max-width: 330px; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.tg-grupos { margin: 48px auto 0; max-width: 400px; }
.tg-baixar { text-align: center; }
.tg-baixar h2, .tg-suporte h2 { margin: 0; font-size: 17px; font-weight: var(--fw-bold); letter-spacing: -.01em; color: var(--text-body); }
.tg-baixar p { margin: 10px auto 0; max-width: 320px; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.tg-lojas { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.tg-loja {
    flex: 1 1 160px; display: inline-flex; align-items: center; justify-content: center; padding: 14px 16px; border: 1px solid rgba(34, 184, 104, .45);
    border-radius: var(--radius-lg); background: var(--success-soft); color: var(--success-fg); font-size: 13px; font-weight: var(--fw-bold);
    text-decoration: none; animation: tg-pular 2.4s ease-in-out infinite;
}
.tg-entrar { margin: 34px 0 0; text-align: center; }
.tg-entrar-t { margin: 0; font-size: 15px; font-weight: var(--fw-bold); color: var(--text-strong); }
.tg-entrar-sub { margin: 8px auto 0; max-width: 300px; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.tg-convite { margin-top: 18px; }
.tg-convite-quente {
    margin-top: 12px; background: linear-gradient(135deg, var(--ink-800), var(--ink-900)); border: 1px solid rgba(225, 29, 72, .55);
    box-shadow: 0 14px 32px -10px rgba(225, 29, 72, .35);
}
.tg-convite.preparando { opacity: .45; pointer-events: none; }
.tg-convite.preparando::after { content: " · preparando…"; font-weight: var(--fw-semibold); opacity: .8; }
.tg-suporte { margin: 56px auto 0; padding: 26px 22px; max-width: 400px; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--surface-card); box-shadow: var(--inset-top); text-align: center; }
.tg-suporte p { margin: 12px auto 0; max-width: 320px; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.tg-suporte-nota { font-size: 12px; color: var(--text-subtle); }
.tg-suporte-botao {
    display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 20px; padding: 15px 18px; border: 1px solid var(--border-default);
    border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text-strong); font-size: 14px; font-weight: var(--fw-semibold); text-decoration: none;
}
@keyframes tg-subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tg-pulsar { 0%, 100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, .45); } 55% { box-shadow: 0 0 0 8px rgba(225, 29, 72, 0); } }
@keyframes tg-girar { to { transform: rotate(360deg); } }
@keyframes tg-pular { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* Oferta na home: botão flutuante e popup (RN-57) */
.of-botao {
    position: fixed; right: 16px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: var(--z-overlay); display: flex; align-items: center; gap: 8px;
    padding: 12px 18px; border-radius: var(--radius-full); background: var(--brand); color: var(--on-brand); font-size: 13.5px; font-weight: var(--fw-bold);
    letter-spacing: -.01em; text-decoration: none; box-shadow: 0 0 22px rgba(225, 29, 72, .45), var(--shadow-md);
}
.of-botao:active { transform: scale(.96); background: var(--brand-press); }
.of-fundo {
    position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(5, 5, 7, .9);
    -webkit-backdrop-filter: blur(var(--blur-overlay)); backdrop-filter: blur(var(--blur-overlay)); opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
.of-fundo.aberto { display: flex; }
.of-fundo.visivel { opacity: 1; }
.of-cartao {
    position: relative; width: 100%; max-width: 352px; max-height: 94vh; overflow-y: auto; padding: 30px 24px 22px; text-align: center;
    background: var(--gradient-brand-glow), var(--surface-sunken); border: 1.5px solid var(--brand); border-radius: var(--radius-2xl);
    box-shadow: 0 0 34px rgba(225, 29, 72, .34), var(--shadow-lg); transform: scale(.93); transition: transform var(--dur-slow) var(--ease-out);
}
.of-fundo.visivel .of-cartao { transform: scale(1); }
.of-x {
    position: absolute; top: 20px; right: 20px; width: 38px; height: 38px; display: grid; place-items: center; border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-full); background: var(--neutral-soft); color: var(--text-strong); cursor: pointer; padding: 0;
}
.of-x svg { width: 15px; height: 15px; }
.of-selo {
    display: inline-block; padding: 11px 26px; font-family: var(--font-display); font-size: 14px; font-weight: var(--fw-bold); letter-spacing: .1em; color: var(--text-strong);
    border: 1.5px solid var(--brand); border-radius: var(--radius-full); box-shadow: 0 0 16px rgba(225, 29, 72, .4), inset 0 0 14px rgba(225, 29, 72, .14);
}
.of-titulo { margin: 22px 0 0; font-size: 52px; font-weight: var(--fw-black); line-height: .98; letter-spacing: -.035em; color: var(--text-strong); text-shadow: 0 0 26px rgba(255, 255, 255, .24); }
.of-titulo span { display: block; font-size: 47px; letter-spacing: -.045em; }
.of-quente {
    display: flex; align-items: center; justify-content: center; gap: 9px; margin: 16px 0 0; font-family: var(--font-display); font-size: 19px;
    font-weight: var(--fw-black); color: var(--text-brand); text-shadow: 0 0 18px rgba(225, 29, 72, .5);
}
.of-sub { margin: 13px 0 0; font-size: 15px; font-weight: var(--fw-semibold); color: var(--text-muted); }
.of-lista { margin: 22px 0 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; background: rgba(255, 255, 255, .025); text-align: left; }
.of-item { display: flex; align-items: center; gap: 14px; padding: 15px 17px; font-size: 15.5px; font-weight: var(--fw-semibold); color: var(--text-strong); }
.of-item + .of-item { border-top: 1px solid var(--border-subtle); }
.of-item svg { flex: 0 0 auto; width: 26px; height: 26px; color: var(--success); }
.of-item svg.of-ic-quente { color: var(--brand); }
.of-cta {
    display: block; margin: 22px 0 0; padding: 20px; border-radius: var(--radius-lg); text-decoration: none; background: var(--brand); color: var(--on-brand);
    font-family: var(--font-display); font-size: 21px; font-weight: var(--fw-black); box-shadow: 0 0 26px rgba(225, 29, 72, .55), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.of-cta:active { background: var(--brand-press); transform: scale(.98); }
.of-nao { display: block; width: 100%; margin: 16px 0 2px; padding: 4px; border: 0; background: none; color: var(--text-subtle); font: inherit; font-size: 16px; cursor: pointer; }
@media (max-width: 360px) { .of-titulo { font-size: 46px; } .of-titulo span { font-size: 41px; } .of-cta { font-size: 19px; padding: 18px; } }
/* A promoção "SÓ HOJE" do Telegram (18/10, o botão promo_telegram em Ofertas): a página, o pop-up e o botão do Início */
.tg-promo-faixa {
    position: sticky; top: 0; z-index: 9997; margin: 0 calc(-1 * var(--space-5)); padding: 10px 14px; text-align: center;
    background: linear-gradient(180deg, var(--red-600), var(--red-800)); color: var(--on-brand); font-size: 13px; font-weight: var(--fw-semibold);
    box-shadow: var(--shadow-md);
}
.tg-promo-faixa b { font-weight: var(--fw-black); }
.tg-promo-rel { font-variant-numeric: tabular-nums; }
.tg-selo-promo { color: var(--on-brand); background: var(--brand); border-color: var(--brand); animation: tg-pulsar 1.8s ease-in-out infinite; }
.tg-titulo-de { font-size: .55em; font-weight: var(--fw-bold); color: var(--text-muted); letter-spacing: -.01em; }
.tg-titulo-de s { text-decoration-color: rgba(225, 29, 72, .8); }
.tg-preco-cartao-promo { border-color: var(--brand); box-shadow: 0 0 30px rgba(225, 29, 72, .3), var(--shadow-lg); }
.tg-preco-selo-promo { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.tg-promo-economia { margin: 10px 0 0; font-size: 14px; font-weight: var(--fw-bold); color: var(--success-fg); }
.tg-promo-relogio {
    display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 16px auto 0; padding: 12px 16px; max-width: 260px;
    border: 1px solid rgba(225, 29, 72, .45); border-radius: var(--radius-lg); background: var(--brand-soft);
}
.tg-promo-relogio span { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--red-100); }
.tg-promo-relogio b { font-family: var(--font-display); font-size: 30px; font-weight: var(--fw-black); letter-spacing: .02em; color: var(--text-strong); }
.of-botao-promo { animation: tg-pulsar 1.8s ease-in-out infinite; }
.of-promo-selo {
    display: inline-block; padding: 10px 22px; font-family: var(--font-display); font-size: 14px; font-weight: var(--fw-black); letter-spacing: .08em;
    color: var(--on-brand); background: var(--brand); border-radius: var(--radius-full); box-shadow: 0 0 18px rgba(225, 29, 72, .55);
    animation: tg-pulsar 1.8s ease-in-out infinite;
}
.of-promo-preco { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 20px 0 0; }
.of-promo-de { font-size: 15px; font-weight: var(--fw-semibold); color: var(--text-muted); }
.of-promo-de s { text-decoration-color: rgba(225, 29, 72, .8); }
.of-promo-por { font-family: var(--font-display); font-size: 44px; font-weight: var(--fw-black); line-height: 1.05; letter-spacing: -.03em; color: var(--text-strong); }
.of-promo-relogio { margin: 8px 0 0; font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-brand); }
.of-promo-relogio b { font-variant-numeric: tabular-nums; font-weight: var(--fw-black); }
@media (prefers-reduced-motion: reduce) { .tg-selo-promo, .of-botao-promo, .of-promo-selo { animation: none; } }
/* celular pequeno (tela baixa): o pop-up da promoção compacto, o botão de comprar sem precisar rolar */
@media (max-height: 760px) {
    .of-cartao-promo { padding: 20px 20px 14px; }
    .of-cartao-promo .of-titulo { margin-top: 14px; font-size: 40px; }
    .of-cartao-promo .of-titulo span { font-size: 36px; }
    .of-cartao-promo .of-quente { margin-top: 10px; font-size: 16px; }
    .of-cartao-promo .of-sub, .of-cartao-promo .of-lista { display: none; }
    .of-cartao-promo .of-promo-preco { margin-top: 14px; }
    .of-cartao-promo .of-promo-por { font-size: 40px; }
    .of-cartao-promo .of-cta { margin-top: 14px; padding: 16px; font-size: 19px; }
    .of-cartao-promo .of-nao { margin-top: 10px; }
}
.fora-da-tela { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

/* ═══════════════ Painéis de gestão (Etapa 6): operações, comissões, clientes, séries, pedidos, ajustes ═══════════════ */
.titulo-painel { font-size: 1.4rem; font-weight: var(--fw-bold); margin: 6px 0 12px; }

/* ── Página de instalação do servidor, /instalar (D172) ── */
.instalar { max-width: 520px; }
.instalar-titulo { font-size: 1rem; font-weight: var(--fw-bold); margin: var(--space-5) 0 var(--space-3); color: var(--text-strong); }
.instalar-titulo small { font-weight: var(--fw-regular); color: var(--text-muted); font-size: .8rem; }
.instalar-texto { font-size: .88rem; color: var(--text-muted); line-height: var(--lh-relaxed); margin: 0 0 var(--space-2); }
.instalar-feito { list-style: none; padding: 0; margin: 0 0 var(--space-4); font-size: .9rem; line-height: 1.9; color: var(--success-fg); }
.instalar-senha { font-size: 1.05rem; font-weight: var(--fw-bold); }
.instalar-dica { display: block; margin-top: 6px; font-size: .78rem; color: var(--text-subtle); line-height: 1.4; }
.instalar-opcionais { margin: var(--space-4) 0; }
.instalar-opcionais summary { cursor: pointer; color: var(--text-link); font-weight: var(--fw-semibold); font-size: .9rem; margin-bottom: var(--space-3); }

/* ── Ofertas do dono (D169): um cartão por oferta, com o interruptor Ligada / Desligada ── */
.ofp-resumo { margin: 4px 0 0; font-size: .9rem; color: var(--text-muted); }
.ofp-resumo strong { color: var(--text-strong); }
.ofp-item { transition: opacity var(--dur-base) var(--ease-out); }
.ofp-desligada .ofp-nome, .ofp-desligada .ofp-quando { color: var(--text-subtle); }
.ofp-cabeca { display: flex; align-items: center; gap: var(--space-3); }
.ofp-numero {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;
    background: var(--neutral-soft); color: var(--text-strong); font-size: .8rem; font-weight: var(--fw-bold);
}
.ofp-nome { flex: 1; min-width: 0; margin: 0; font-size: 1rem; font-weight: var(--fw-semibold); color: var(--text-strong); }
.ofp-form { margin: 0; flex-shrink: 0; }
.ofp-quando { margin: 10px 0 0; font-size: .85rem; color: var(--text-muted); line-height: var(--lh-relaxed); }
.ofp-mudou { margin: 6px 0 0; font-size: .75rem; color: var(--text-subtle); }
.interruptor {
    display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: var(--touch-min); padding: 4px 0;
    border: 0; background: none; color: var(--success-fg); font-family: inherit; font-size: .7rem; font-weight: var(--fw-bold); cursor: pointer;
}
.interruptor-trilho {
    position: relative; width: 48px; height: 28px; border-radius: var(--radius-full); background: var(--success);
    transition: background var(--dur-fast) var(--ease-out);
}
.interruptor-bolinha {
    position: absolute; top: 3px; left: 23px; width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--ink-0);
    box-shadow: var(--shadow-sm); transition: left var(--dur-fast) var(--ease-out);
}
.interruptor[aria-checked="false"] { color: var(--text-subtle); }
.interruptor[aria-checked="false"] .interruptor-trilho { background: var(--border-strong); }
.interruptor[aria-checked="false"] .interruptor-bolinha { left: 3px; }
.interruptor:focus-visible { outline: none; }
.interruptor:focus-visible .interruptor-trilho { box-shadow: var(--ring-focus); }
/* ── Front do Início do dono (D318): um cartão por faixa, com as setas ↑ ↓ e os interruptores deitados ── */
.fip-item { padding: var(--space-4) 16px; margin-bottom: var(--space-3); scroll-margin-top: 72px; }
.fip-cabeca { display: flex; align-items: flex-start; gap: var(--space-3); }
.fip-texto { flex: 1; min-width: 0; }
.fip-nome { margin: 3px 0 0; font-size: 1rem; font-weight: var(--fw-semibold); color: var(--text-strong); }
.fip-explica { margin: 4px 0 0; font-size: .8rem; color: var(--text-muted); line-height: var(--lh-relaxed); }
.fip-escondida { margin: 6px 0 0; font-size: .75rem; font-weight: var(--fw-semibold); color: var(--text-subtle); }
.fip-desligada .ofp-numero, .fip-desligada .fip-texto { opacity: .5; }
.fip-form { margin: 0; }
.fip-setas { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.fip-seta {
    display: flex; align-items: center; justify-content: center; width: var(--touch-min); height: var(--touch-min); padding: 0;
    border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--text-strong); cursor: pointer;
}
.fip-seta:active { background: var(--surface-active); }
.fip-seta:disabled { opacity: .3; cursor: default; }
.fip-seta:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.fip-chaves { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.interruptor-lado { flex-direction: row; gap: 8px; font-size: .85rem; min-height: var(--touch-min); }
/* abas: o "pill" do design system (fundo único, aba ativa um degrau mais clara) */
.abas {
    display: flex; gap: 4px; overflow-x: auto; margin-bottom: 12px; scrollbar-width: none; width: fit-content; max-width: 100%;
    padding: 4px; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--border-subtle);
}
.abas::-webkit-scrollbar { display: none; }
.aba {
    flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 38px; padding: 8px 14px; border-radius: var(--radius-md);
    color: var(--text-muted); font-weight: var(--fw-semibold); font-size: .85rem; text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.aba-ativa { background: var(--surface-active); color: var(--text-strong); box-shadow: var(--shadow-sm), var(--inset-top); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.chip {
    display: inline-flex; align-items: center; padding: 7px 12px; border-radius: var(--radius-full); background: var(--surface-raised);
    border: 1px solid var(--border-default); color: var(--text-muted); font-size: .78rem; font-weight: var(--fw-semibold); text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chip-ativo { background: var(--brand-soft); border-color: rgba(225, 29, 72, .5); color: var(--text-strong); }
.linha-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0 0 12px; }
.linha-form .campo { margin: 0; flex: 1 1 130px; }
.linha-form .botao { width: auto; margin-top: 0; flex: 1 1 100%; min-height: 44px; padding: 10px 16px; }
.linha-form input, .linha-form select, .linha-form textarea, .campo select, .campo textarea {
    min-height: 44px; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface-input);
    color: var(--text-strong); font: inherit; font-size: .95rem;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.linha-form input:focus, .linha-form select:focus, .linha-form textarea:focus, .campo select:focus, .campo textarea:focus {
    outline: none; border-color: var(--border-focus); box-shadow: var(--ring-focus);
}
.campo select, .campo textarea { width: 100%; }
.campo textarea { min-height: 70px; resize: vertical; }
.campo-largo { flex: 2 1 200px; min-width: 0; }
.campo-erro input { border-color: var(--danger); }
.campo-erro input:focus { box-shadow: 0 0 0 3px var(--danger-soft); }
.texto-erro { display: block; margin-top: 4px; color: var(--danger-fg); font-size: .8rem; font-weight: var(--fw-medium); }
.periodo-nome { margin: -4px 0 12px; font-size: .8rem; color: var(--text-subtle); }
.periodo-nome a { color: var(--text-link); }
/* iPhone: o campo de data não encolhia e o "Até" passava da tela (D178) — só no iPhone, que é quem tem o -webkit-touch-callout */
.linha-form .campo { min-width: 0; }
@supports (-webkit-touch-callout: none) {
    input[type="date"] { min-width: 0; -webkit-appearance: none; appearance: none; }
    input[type="date"]::-webkit-date-and-time-value { text-align: left; }
}
/* números grandes: o StatCard do design system */
.indicadores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.indicador {
    display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--radius-lg); background: var(--surface-card);
    border: 1px solid var(--border-subtle); box-shadow: var(--inset-top); color: var(--text-strong); text-decoration: none; min-width: 0;
}
.indicador span { font-size: .68rem; font-weight: var(--fw-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.indicador strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: var(--fw-bold); letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.indicador small { font-size: .72rem; color: var(--text-subtle); }
.indicador-destaque { grid-column: span 2; background: var(--gradient-brand-glow), var(--surface-card); }
.indicador-destaque strong { font-size: 1.7rem; }
.indicador-ativo { border-color: rgba(225, 29, 72, .6); background: var(--brand-soft); }
.indicadores-pequenos strong { font-size: 1.1rem; }
.positivo { color: var(--success-fg); }
.negativo { color: var(--danger-fg); }
/* tabelas: o DataTable do design system (no celular, a tabela rola para o lado dentro da moldura) */
.rolagem { overflow-x: auto; margin: 0 0 14px; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--surface-card); }
.tabela { width: 100%; border-collapse: collapse; font-size: .8rem; background: var(--surface-card); font-variant-numeric: tabular-nums; }
.tabela th, .tabela td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.tabela th {
    font-size: .66rem; font-weight: var(--fw-semibold); color: var(--text-subtle); text-transform: uppercase; letter-spacing: var(--ls-caps);
    background: var(--surface-raised);
}
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela-conta td:last-child { text-align: right; font-weight: var(--fw-bold); }
.tabela-conta td { white-space: normal; }
.linha-total td { font-size: .95rem; font-weight: var(--fw-bold); color: var(--text-strong); border-bottom: 0; border-top: 1px solid var(--border-default); }
.vazio { color: var(--text-subtle); font-size: .85rem; margin: 6px 0 14px; }
/* ação que apaga: laranja, de propósito diferente do vermelho da marca (guia do design) */
.botao-perigo { background: var(--danger-soft); color: var(--danger-fg); border: 1px solid rgba(242, 86, 29, .35); }
.botao-perigo:active { background: var(--danger); color: var(--on-brand); }
.botoes-linha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.botoes-linha form { margin: 0; }
.botoes-linha .botao { width: auto; margin-top: 0; }
.gasto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 0; border-top: 1px solid var(--border-subtle); }
.gasto .linha-form { margin: 0; flex: 1 1 100%; }
.gasto form { margin: 0; }
.total-filtrado { font-size: .85rem; color: var(--text-muted); }
.barras { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding-top: 10px; }
.barra-mes { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.barra-coluna { width: 100%; max-width: 40px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: linear-gradient(to top, var(--red-700), var(--chart-1)); min-height: 3px; }
.barra-0 { height: 3px; } .barra-1 { height: 10%; } .barra-2 { height: 20%; } .barra-3 { height: 30%; } .barra-4 { height: 40%; } .barra-5 { height: 50%; }
.barra-6 { height: 60%; } .barra-7 { height: 70%; } .barra-8 { height: 80%; } .barra-9 { height: 90%; } .barra-10 { height: 100%; }
.barra-valor { font-size: .75rem; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.barra-nome { font-size: .68rem; color: var(--text-subtle); }
/* a aba "De onde vêm as vendas" das Operações (D183): as renovações por canal e por quem; o Telegram por preço e origem */
.origem { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .origem { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.origem-bloco h2 { margin-bottom: 2px; }
.origem-total { margin: 0 0 6px; font-size: 1rem; color: var(--text-muted); }
.origem-total strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--success-fg); }
.origem-sub { margin: 12px 0 2px; font-size: .78rem; }
.origem-linha { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: .85rem; }
.origem-nome { flex: 0 0 44%; min-width: 0; color: var(--text-body); }
.origem-barra { flex: 1; height: 8px; border-radius: var(--radius-full); background: var(--surface-sunken); overflow: hidden; }
.origem-barra i { display: block; height: 100%; border-radius: var(--radius-full); background: var(--brand); }
.origem-n { flex: none; min-width: 92px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-strong); }
.origem-barra .w-0 { width: 0; } .origem-barra .w-5 { width: 5%; } .origem-barra .w-10 { width: 10%; } .origem-barra .w-15 { width: 15%; }
.origem-barra .w-20 { width: 20%; } .origem-barra .w-25 { width: 25%; } .origem-barra .w-30 { width: 30%; } .origem-barra .w-35 { width: 35%; }
.origem-barra .w-40 { width: 40%; } .origem-barra .w-45 { width: 45%; } .origem-barra .w-50 { width: 50%; } .origem-barra .w-55 { width: 55%; }
.origem-barra .w-60 { width: 60%; } .origem-barra .w-65 { width: 65%; } .origem-barra .w-70 { width: 70%; } .origem-barra .w-75 { width: 75%; }
.origem-barra .w-80 { width: 80%; } .origem-barra .w-85 { width: 85%; } .origem-barra .w-90 { width: 90%; } .origem-barra .w-95 { width: 95%; }
.origem-barra .w-100 { width: 100%; }
.origem .tabela th, .origem .tabela td { padding: 8px; }
.origem .tabela td:first-child { white-space: normal; min-width: 110px; }
.origem-nota { margin: 10px 0 0; font-size: .75rem; }
.origem-ver { display: inline-block; margin-top: 10px; font-size: .85rem; font-weight: var(--fw-semibold); color: var(--text-link); }
.comissao-valor { margin-left: auto; font-family: var(--font-display); font-size: 1.15rem; font-weight: var(--fw-bold); color: var(--success-fg); font-variant-numeric: tabular-nums; }
.recibo h1 { font-size: 1.2rem; }
.recibo-valor { font-family: var(--font-display); font-size: 2rem; font-weight: var(--fw-bold); color: var(--success-fg); margin: 6px 0; font-variant-numeric: tabular-nums; }
.busca-ficha .botao { flex: 0 0 auto; width: auto; }
.lista-clientes { display: flex; flex-direction: column; gap: 6px; }
.linha-cliente {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px; border-radius: var(--radius-lg); background: var(--surface-card);
    border: 1px solid var(--border-subtle); color: var(--text-strong); text-decoration: none; transition: background var(--dur-fast) var(--ease-out);
}
.linha-cliente:active { background: var(--surface-hover); }
.linha-cliente-tel { font-family: var(--font-mono); font-weight: var(--fw-medium); }
.linha-cliente-info { flex: 1 1 100%; font-size: .75rem; color: var(--text-muted); }
/* etiquetas: os "badges" suaves do design system */
.etiqueta { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--radius-full); font-size: .66rem; font-weight: var(--fw-semibold); letter-spacing: .02em; }
.etiqueta-ok { background: var(--success-soft); color: var(--success-fg); }
.etiqueta-alerta { background: var(--warning-soft); color: var(--warning-fg); }
.etiqueta-perigo { background: var(--danger-soft); color: var(--danger-fg); }
.etiqueta-info { background: var(--info-soft); color: var(--info-fg); }
.etiqueta-neutra { background: var(--neutral-soft); color: var(--text-muted); }
.linha-escolha, .linha-pedido { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid var(--border-subtle); font-size: .85rem; }
.linha-escolha form, .linha-pedido form { margin: 0; }
.linha-tipo { padding-top: 8px; }
.auditoria { list-style: none; padding: 0; margin: 0 0 14px; font-size: .8rem; color: var(--text-muted); }
.auditoria li { padding: 6px 0; border-bottom: 1px solid var(--border-subtle); }
.serie-painel { padding: 12px; }
.serie-painel-topo { display: flex; gap: 12px; align-items: flex-start; }
.serie-painel-topo small { display: block; margin: 4px 0; }
.serie-painel-capa { flex: 0 0 auto; width: 54px; height: 80px; border-radius: var(--radius-md); object-fit: cover; background: var(--gradient-hero); border: 1px solid var(--border-subtle); }
.serie-painel-sem-capa { display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.serie-painel details, details.cartao { margin-top: 8px; }
.serie-painel summary, details.cartao > summary { cursor: pointer; font-weight: var(--fw-semibold); color: var(--text-muted); padding: 6px 0; }
.grupo-pedido summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.grupo-qtd { font-size: .75rem; font-weight: var(--fw-bold); color: var(--text-brand); }
.nuvem { display: flex; flex-wrap: wrap; gap: 6px; }
.ranking { margin: 0; padding-left: 20px; font-size: .9rem; }
.ranking li { padding: 3px 0; }
@media (min-width: 640px) {
    .indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .indicador-destaque { grid-column: span 1; }
    .linha-form .botao { flex: 0 0 auto; }
}
.trocar-senha {
    display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
    color: var(--text-muted); font-size: .85rem; cursor: pointer;
}
.trocar-senha strong { color: var(--text-strong); }
.trocar-senha input { width: 20px; height: 20px; flex: 0 0 auto; }
.trocar-senha small { display: block; font-size: .75rem; color: var(--text-subtle); }

/* ═══════════════ Central da equipe (D145): a moldura de todo o painel — "Shell" do design system ═══════════════
      celular: topo de vidro (ícone + TopDoramax + "Equipe", lupa e sininho) e a barra flutuante de baixo (a mesma do
      cliente, D143) com 4 áreas + "Mais"; de 768 px: menu lateral só de ícones (72 px) e a busca no topo; de 1100 px:
      menu lateral inteiro (248 px), com os grupos e o nome da pessoa. */
.icone { width: 20px; height: 20px; flex: 0 0 auto; }
.pular { position: absolute; left: -9999px; top: 0; }
.pular:focus {
    left: var(--space-4); top: var(--space-2); z-index: var(--z-tooltip); padding: 8px 14px; border-radius: var(--radius-md);
    background: var(--surface-raised); color: var(--text-strong); font-weight: var(--fw-semibold);
}
.central-lado { display: none; }
.central-topo {
    position: sticky; top: 0; z-index: var(--z-topbar); display: flex; align-items: center; gap: 8px;
    height: 56px; padding: 0 var(--space-2) 0 var(--space-4); border-bottom: 1px solid var(--border-subtle);
    background: var(--topo-vidro); -webkit-backdrop-filter: blur(var(--blur-overlay)); backdrop-filter: blur(var(--blur-overlay));
}
.central-topo-marca { flex: 1 1 auto; gap: 6px; }
.central-topo-marca .logo-texto { font-size: 1rem; }
.marca-equipe {
    margin-left: 2px; padding: 3px 7px; border-radius: var(--radius-full); background: var(--neutral-soft); font-size: .62rem;
    font-weight: var(--fw-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--ls-caps);
}
.central-topo .topo-acoes { margin-left: auto; gap: 2px; }
.central-busca { display: none; }
.central-sino { position: relative; }
.central-selo {
    position: absolute; top: 5px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full);
    background: var(--brand); color: var(--on-brand); font-size: .66rem; font-weight: var(--fw-bold); line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px var(--bg-app);
}
.conteudo-equipe { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
.barra-equipe { width: calc(100% - 24px); max-width: 360px; }
@media (max-width: 359px) { .barra-equipe .barra-item span { font-size: .6rem; letter-spacing: -.01em; } }
.barra-itens-2 { max-width: 170px; }
.barra-itens-3 { max-width: 240px; }
.barra-itens-4 { max-width: 300px; }

/* a pessoa (no menu lateral e na janela "Mais") */
.central-avatar {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;
    background: var(--brand-soft); border: 1px solid var(--brand-ring); color: var(--text-strong);
    font-family: var(--font-display); font-weight: var(--fw-bold); font-size: .95rem;
}
.central-pessoa-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.central-pessoa-texto strong { color: var(--text-strong); font-size: .9rem; font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.central-pessoa-texto small { color: var(--text-subtle); font-size: .72rem; }
.central-pessoa-janela { display: flex; align-items: center; gap: 12px; padding: 0 2px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--border-subtle); }

/* listas de linhas (janela "Mais", avisos, "Precisa de você", busca) */
.central-lista { display: flex; flex-direction: column; gap: 2px; }
.central-linha {
    display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 10px; border-radius: var(--radius-lg);
    color: var(--text-body); text-decoration: none; transition: background var(--dur-fast) var(--ease-out);
}
.central-linha:active { background: var(--surface-hover); }
.central-linha-ativa { background: var(--brand-soft); }
.central-linha-icone {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
    background: var(--surface-raised); border: 1px solid var(--border-subtle); color: var(--text-strong);
}
.central-linha-icone svg { width: 20px; height: 20px; }
.central-linha-ativa .central-linha-icone { color: var(--brand); }
.central-linha-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.central-linha-texto strong { color: var(--text-strong); font-size: .92rem; font-weight: var(--fw-semibold); line-height: 1.3; }
.central-linha-texto small { color: var(--text-subtle); font-size: .75rem; line-height: 1.35; }
.central-linha .etiqueta { flex: 0 0 auto; }
.central-linha-seta { width: 18px; height: 18px; color: var(--text-subtle); }
.central-tom-info .central-linha-icone { background: var(--info-soft); border-color: transparent; color: var(--info-fg); }
.central-tom-alerta .central-linha-icone { background: var(--warning-soft); border-color: transparent; color: var(--warning-fg); }
.central-tom-perigo .central-linha-icone { background: var(--danger-soft); border-color: transparent; color: var(--danger-fg); }
.central-sair { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; }
.central-sair svg { width: 18px; height: 18px; }
.central-janela-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1.05rem; }
.central-janela-titulo svg { width: 20px; height: 20px; color: var(--brand); }
.central-tudo-certo {
    display: flex; align-items: center; gap: 10px; margin: 0 0 var(--space-4); padding: 14px; border-radius: var(--radius-lg);
    background: var(--success-soft); color: var(--success-fg); font-weight: var(--fw-semibold); font-size: .9rem;
}
.central-tudo-certo svg { width: 22px; height: 22px; flex: 0 0 auto; }
.central-ver-tudo { display: block; margin-top: 10px; padding: 8px; text-align: center; color: var(--text-link); font-weight: var(--fw-semibold); font-size: .85rem; text-decoration: none; }

/* ── Visão geral ── */
.vg-ola { margin: 4px 0 var(--space-5); }
.vg-ola h1 { font-size: 1.6rem; margin: 0 0 2px; }
.vg-ola p { margin: 0; font-size: .85rem; color: var(--text-subtle); }
.vg-ola p::first-letter { text-transform: uppercase; }
.vg-secao { margin: 0 0 var(--space-6); }
.vg-secao-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.vg-secao-topo h2 { margin: 0; font: var(--text-section-title); font-size: 1.05rem; color: var(--text-strong); }
.vg-ver { display: inline-flex; align-items: center; gap: 2px; color: var(--text-muted); font-size: .8rem; font-weight: var(--fw-semibold); text-decoration: none; }
.vg-ver svg { width: 16px; height: 16px; }
.vg-secao .indicadores { margin-bottom: 0; }
.vg-secao .vg-bloco, .vg-secao .central-tudo-certo { margin-bottom: 0; }
.vg-secao .vg-vencendo { margin-top: 8px; padding: 8px 10px; }
.vg-secao .indicador { text-decoration: none; }
.vg-bloco { margin: 0 0 var(--space-4); padding: 4px; border-radius: var(--radius-xl); background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--inset-top); }
.vg-carteira-icone { display: flex; align-items: center; justify-content: center; color: var(--success-fg); }
.vg-carteira-icone svg { width: 26px; height: 26px; }
a.carteira-barra { text-decoration: none; margin-bottom: var(--space-6); }
.vg-atalhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vg-atalho {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 84px; padding: 14px; border-radius: var(--radius-lg);
    background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--inset-top); color: var(--text-strong);
    font-weight: var(--fw-semibold); font-size: .9rem; line-height: 1.25; text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.vg-atalho svg { width: 22px; height: 22px; color: var(--brand); }
.vg-atalho:active { transform: scale(.98); background: var(--surface-hover); }
.vg-atalho-destaque { background: var(--gradient-brand-glow), var(--surface-card); border-color: var(--brand-ring); }
.menu-equipe { display: flex; flex-direction: column; gap: 8px; }
.menu-item {
    display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--radius-lg); background: var(--surface-card);
    border: 1px solid var(--border-subtle); box-shadow: var(--inset-top); text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.menu-item:active { background: var(--surface-hover); }
.menu-icone {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
    background: var(--surface-raised); border: 1px solid var(--border-subtle); color: var(--brand);
}
.menu-icone svg { width: 22px; height: 22px; }
.menu-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .78rem; color: var(--text-muted); line-height: 1.4; }
.menu-texto strong { color: var(--text-strong); font-size: .98rem; font-weight: var(--fw-semibold); }
.menu-seta { width: 18px; height: 18px; color: var(--text-subtle); }

/* a lista de acontecimentos (Visão geral, Atividade, erros do Sistema) */
.atividade { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.atividade.vg-bloco { padding: 4px; }
.atividade-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px; }
.atividade-item + .atividade-item { border-top: 1px solid var(--border-subtle); }
.atividade-icone {
    flex: 0 0 auto; width: 30px; height: 30px; margin-top: 1px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;
    background: var(--neutral-soft); color: var(--text-muted);
}
.atividade-icone svg { width: 16px; height: 16px; }
.atividade-venda .atividade-icone { background: var(--brand-soft); color: var(--brand); }
.atividade-texto { flex: 1 1 auto; min-width: 0; font-size: .85rem; color: var(--text-muted); line-height: 1.45; overflow-wrap: anywhere; }
.atividade-texto strong { color: var(--text-strong); font-weight: var(--fw-semibold); }
.atividade-texto a { color: var(--text-body); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.atividade-texto small { display: block; color: var(--text-subtle); font-size: .72rem; }
.atividade-texto code { font-family: var(--font-mono); font-size: .75rem; color: var(--text-strong); background: var(--surface-raised); padding: 1px 5px; border-radius: var(--radius-xs); }
.atividade-hora { flex: 0 0 auto; padding-top: 2px; font-size: .72rem; color: var(--text-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── busca ── */
.busca-central { position: relative; display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-4); }
.busca-central > svg { position: absolute; left: 14px; width: 20px; height: 20px; color: var(--text-subtle); pointer-events: none; }
.busca-central input {
    flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 14px 0 44px; border-radius: var(--radius-lg); border: 1px solid var(--border-default);
    background: var(--surface-input); color: var(--text-strong); font-size: 16px;
}
.busca-central input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring-focus); }
.busca-central .botao-mini { flex: 0 0 auto; height: 50px; padding: 0 16px; border: 0; cursor: pointer; font-size: .9rem; }
.busca-dicas p { color: var(--text-strong); }
.busca-dicas ul { margin: 0; padding-left: 20px; color: var(--text-muted); font-size: .9rem; line-height: 1.7; }
.busca-gerar { flex-direction: row; align-items: center; min-height: 56px; margin: 0 0 var(--space-4); }

/* ── sistema ── */
.sis-faixa { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--space-4); padding: 14px 16px; border-radius: var(--radius-lg); font-size: .88rem; }
.sis-faixa svg { width: 24px; height: 24px; flex: 0 0 auto; }
.sis-faixa strong { display: block; font-size: 1rem; }
.sis-faixa-ok { background: var(--success-soft); color: var(--success-fg); }
.sis-faixa-aviso { background: var(--warning-soft); color: var(--warning-fg); }
.sis-faixa-erro { background: var(--danger-soft); color: var(--danger-fg); }
.sis-lista { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sis-item {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: var(--radius-lg); background: var(--surface-card);
    border: 1px solid var(--border-subtle); box-shadow: var(--inset-top);
}
.sis-erro { border-color: var(--danger-soft); }
.sis-aviso { border-color: var(--warning-soft); }
.sis-ok .central-linha-icone { color: var(--success-fg); }
.sis-erro .central-linha-icone { background: var(--danger-soft); border-color: transparent; color: var(--danger-fg); }
.sis-aviso .central-linha-icone { background: var(--warning-soft); border-color: transparent; color: var(--warning-fg); }
.sis-desligado .central-linha-icone { color: var(--text-subtle); }
.sis-computador .central-linha-icone { color: var(--info-fg); }
.sis-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sis-nome { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sis-nome strong { color: var(--text-strong); font-size: .95rem; font-weight: var(--fw-semibold); }
.sis-situacao { font-size: .85rem; color: var(--text-body); }
.sis-texto small { font-size: .75rem; color: var(--text-subtle); line-height: 1.4; }
.sis-fora p { font-size: .85rem; }
.sis-fora ul { margin: 0; padding-left: 20px; color: var(--text-muted); font-size: .88rem; line-height: 1.8; }
.sis-fora strong { color: var(--text-strong); }

/* ── vendas das atendentes (D151): "é uma NOVA compra", canceladas riscadas, desempenho ── */
.nova-compra { border-color: var(--warning); background: var(--warning-soft); }
.linha-cancelada td { color: var(--text-subtle); }
.linha-cancelada small { color: var(--danger-fg); }
.vendas { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.vendas.vg-bloco { padding: 4px; }
.venda { display: flex; align-items: flex-start; gap: 10px; padding: 10px; }
.venda + .venda { border-top: 1px solid var(--border-subtle); }
.venda-numero { flex: 0 0 auto; min-width: 52px; padding-top: 2px; font-family: var(--font-mono); font-size: .75rem; color: var(--text-subtle); }
.venda-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.venda-texto strong { color: var(--text-strong); font-size: .9rem; font-weight: var(--fw-semibold); }
.venda-texto small { color: var(--text-muted); font-size: .75rem; line-height: 1.4; }
.venda-texto a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.venda-texto .venda-motivo { color: var(--danger-fg); }
.venda-tel { white-space: nowrap; }
.venda-lado { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.venda-comissao { font-family: var(--font-display); font-size: .95rem; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.venda-cancelada .venda-texto strong, .venda-cancelada .venda-comissao { text-decoration: line-through; color: var(--text-subtle); }
.venda-cancelar { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-size: .75rem; font-weight: var(--fw-semibold); color: var(--warning-fg); text-decoration: none; }
.venda-cancelar svg { width: 14px; height: 14px; }
.cancelar-efeitos ul { margin: 0; padding-left: 20px; color: var(--text-body); font-size: .9rem; line-height: 1.7; }
.motivos { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.motivo {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: var(--radius-md);
    border: 1px solid var(--border-default); background: var(--surface-raised); color: var(--text-strong); cursor: pointer;
}
.motivo input { width: 18px; height: 18px; flex: 0 0 auto; }
.motivo:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }

/* ── ao vivo (D155): o selo no topo e o brilho rápido no que acabou de mudar ── */
.central-ao-vivo {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; padding: 3px 9px; border-radius: var(--radius-full);
    background: var(--success-soft); color: var(--success-fg); font-size: .66rem; font-weight: var(--fw-semibold); text-transform: uppercase;
    letter-spacing: var(--ls-caps); white-space: nowrap;
}
.central-ao-vivo[hidden] { display: none; }
.central-ao-vivo::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--success); animation: pulsa-vivo 2s ease-in-out infinite; }
.central-ao-vivo:not([hidden]) + .topo-acoes { margin-left: 0; }
@keyframes pulsa-vivo { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.ao-vivo-mudou { animation: brilho-vivo 1.6s var(--ease-out); border-radius: var(--radius-lg); }
@keyframes brilho-vivo { from { background-color: var(--neutral-soft); } to { background-color: transparent; } }
@media (max-width: 400px) { .central-ao-vivo { gap: 0; padding: 5px; font-size: 0; } }

/* ── o link de pagamento da atendente (D163): a página do plano, a do Pix, "Crie sua senha" e a de boas-vindas (D166) ── */
.cartao-checkout { padding: var(--space-5) 18px; }
.checkout-plano { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; margin-bottom: var(--space-5); }
.checkout-rotulo { font-size: .78rem; color: var(--text-subtle); }
.checkout-plano-nome { font-family: var(--font-display); font-size: 1.3rem; color: var(--text-strong); }
.checkout-plano-detalhe { font-size: .9rem; color: var(--text-muted); }
.checkout-preco { font-family: var(--font-display); font-size: 2.2rem; font-weight: var(--fw-bold); color: var(--text-strong); margin: 6px 0 4px; }
/* o passo 1 do link da atendente: "Crie sua conta", com cara de cadastro (D190) */
.conta-titulo { margin-top: var(--space-2); }
.conta-plano { margin: var(--space-3) 0 var(--space-2); text-align: center; }
.conta-etiqueta { display: inline-block; padding: 5px 12px; border-radius: var(--radius-full); background: var(--surface-raised); border: 1px solid var(--border-default); font-size: .82rem; color: var(--text-muted); }
.conta-dica { margin: -4px 0 var(--space-2); font-size: .82rem; color: var(--text-muted); }
.conta-dica strong { color: var(--text-strong); }
.conta-quase { margin-bottom: var(--space-4); }
.conta-quase a { color: inherit; font-weight: var(--fw-bold); }
/* as abas Pix · Cartão (D189) e o formulário do cartão */
.checkout-meios { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-sunken); border: 1px solid var(--border-default); }
.checkout-meio { padding: 11px 4px; border-radius: var(--radius-md); text-align: center; text-decoration: none; font-weight: var(--fw-bold); color: var(--text-muted); }
.checkout-meio.ativo { background: var(--brand); color: var(--on-brand); }
.janela-meios { margin: 4px 0 var(--space-3); }
.tg-meios { margin: 14px 0 4px; }
.janela-meios .checkout-meio, .tg-meios .checkout-meio { border: 0; cursor: pointer; font-family: inherit; font-size: .95rem; }
.janela-meios .checkout-meio:not(.ativo), .tg-meios .checkout-meio:not(.ativo) { background: transparent; box-shadow: none; }
.tg-cartao-nota { margin: 2px 0 0; font-size: .78rem; color: var(--text-muted); }
.form-cartao-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.botao-copiar-pix { min-height: 60px; font-size: 1.1rem; box-shadow: var(--shadow-brand); }
.botao-copiar-pix.copiado { background: var(--green-500); box-shadow: none; }
.checkout-passos { margin: var(--space-4) 0 0; padding: var(--space-3) 14px; border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--border-subtle); font-size: .9rem; }
.checkout-passos strong { color: var(--text-strong); }
.checkout-passos ol { margin: 6px 0 0; padding-left: 20px; color: var(--text-body); line-height: 1.7; }
.checkout-passo-volte, .checkout-passo-volte strong { color: var(--warning-fg); }
.checkout-passos + .botao-copiar-pix { margin-top: var(--space-4); }
.checkout-volte {
    display: flex; align-items: flex-start; gap: 10px; margin-top: var(--space-3); padding: 12px 14px; border-radius: var(--radius-md);
    background: var(--warning-soft); border: 1px solid rgba(245, 165, 36, .45); color: var(--text-body); font-size: .92rem; line-height: 1.45;
}
.checkout-volte strong { display: block; color: var(--warning-fg); font-size: 1rem; }
.checkout-volte-icone { font-size: 1.4rem; line-height: 1; }
.checkout-esperando { display: flex; align-items: center; justify-content: center; gap: 8px; margin: var(--space-4) 0 0; color: var(--text-muted); font-weight: var(--fw-semibold); }
.girando { width: 18px; height: 18px; border: 2px solid var(--ink-700); border-top-color: var(--brand); border-radius: 50%; display: inline-block; animation: gira .9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.checkout-qr { margin-top: var(--space-4); text-align: center; font-size: .88rem; color: var(--text-muted); }
.checkout-qr summary { cursor: pointer; text-decoration: underline; }
.checkout-qr img { display: block; margin: 12px auto 0; background: var(--ink-0); border-radius: var(--radius-md); padding: 8px; width: 220px; height: 220px; }
.checkout-pronto { display: flex; flex-direction: column; align-items: center; text-align: center; }
.checkout-pronto-icone {
    width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
    font-size: 2rem; font-weight: var(--fw-bold); background: var(--success-soft); color: var(--green-400); border: 1px solid rgba(34, 184, 104, .4);
}
.checkout-subtitulo { text-align: center; margin: var(--space-5) 0 4px; }
.campo-senha6 input { font-family: var(--font-mono); font-size: 1.4rem; letter-spacing: .5em; text-align: center; }
.guarde-dados { margin: 0 0 var(--space-4); padding: 0; display: grid; gap: 8px; }
.guarde-dados div {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px;
    border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--border-subtle);
}
.guarde-dados dt { font-size: .8rem; color: var(--text-muted); }
.guarde-dados dd { margin: 0; font-weight: var(--fw-bold); color: var(--text-strong); overflow-wrap: anywhere; text-align: right; }
.guarde-senha { font-family: var(--font-mono); font-size: 1.3rem; letter-spacing: .2em; }
.guarde-passos { margin-top: 12px; }
/* o primeiro acesso guiado (D181): uma coisa por tela, com a barrinha "Passo X de Y" */
.comecar { max-width: 420px; margin: 0 auto; padding-top: var(--space-2); }
.barra-passos { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.barra-passos-tracos { display: flex; gap: 6px; }
.barra-passos-tracos i { flex: 1; height: 5px; border-radius: var(--radius-full); background: var(--surface-raised); }
.barra-passos-tracos i.feito { background: var(--brand); }
.barra-passos-texto { font-size: .78rem; color: var(--text-muted); }
.comecar-titulo { margin: 4px 0 6px; font-size: 1.45rem; font-weight: var(--fw-bold); color: var(--text-strong); }
.comecar-sub { margin: 0 0 var(--space-4); font-size: .95rem; color: var(--text-muted); }
.comecar-selo { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .85rem; font-weight: var(--fw-bold); color: var(--success-fg); }
.comecar-selo .icone { width: 18px; height: 18px; }
.comecar-tranquilo { margin: 0 0 4px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-sunken); font-size: .82rem; color: var(--text-muted); }
.comecar .botao { min-height: 54px; font-size: 1.05rem; }
.comecar-celular { width: 150px; margin: 0 auto var(--space-4); padding: 14px; border-radius: 26px; border: 2px solid var(--border-strong); background: var(--surface-raised); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.comecar-celular i { aspect-ratio: 1; border-radius: 10px; background: var(--surface-sunken); display: block; }
.comecar-celular img { width: 100%; aspect-ratio: 1; border-radius: 10px; box-shadow: 0 0 0 3px var(--brand-soft); }
.comecar-iphone { margin: 0 0 var(--space-3); }
.comecar-ic { display: inline-flex; vertical-align: middle; color: var(--text-link); }
.comecar-ic .icone { width: 18px; height: 18px; }
/* a demonstração animada do iPhone (D191): um iPhone desenhado (tela de 240 x 480) e o "dedo" fazendo o caminho, a cada 14 s */
.demo-iphone { width: 254px; margin: 0 auto var(--space-3); padding: 7px; border-radius: 38px; background: var(--ink-700); zoom: .78; }
.demo-tela { position: relative; width: 240px; height: 480px; border-radius: 31px; overflow: hidden; background: var(--ink-1000); color: var(--ink-0); font-family: var(--font-sans); font-size: 11px; line-height: 1.3; }
.demo-tela .icone { width: 15px; height: 15px; flex: none; }
.demo-ilha { position: absolute; top: 8px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: 10px; background: var(--ink-1000); z-index: 6; }
.demo-cena { position: absolute; inset: 0; opacity: 0; animation-duration: 14s; animation-iteration-count: infinite; animation-fill-mode: both; }
.demo-td { display: block; border-radius: 22%; }
.demo-td-p { display: inline-block; width: 16px; height: 16px; vertical-align: middle; border-radius: 4px; }
.demo-td-m { width: 34px; height: 34px; flex: none; }
.demo-td-g { width: 52px; height: 52px; }
.demo-pagina-topo { position: absolute; top: 34px; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: var(--fw-bold); }
.demo-pagina-meio { position: absolute; top: 140px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; }
.demo-barra { position: absolute; left: 8px; right: 8px; bottom: 12px; height: 36px; display: flex; gap: 6px; align-items: center; }
.demo-bola { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--ink-600); display: flex; align-items: center; justify-content: center; }
.demo-pilula { flex: 1; height: 36px; padding: 0 10px; border-radius: 18px; background: var(--ink-600); display: flex; align-items: center; justify-content: space-between; }
.demo-alvo { display: inline-flex; }
.demo-endereco { position: absolute; left: 16px; right: 16px; bottom: 50px; height: 30px; border-radius: 10px; background: var(--ink-600); display: flex; align-items: center; justify-content: center; }
.demo-barra-antiga { position: absolute; left: 0; right: 0; bottom: 8px; height: 34px; display: flex; justify-content: space-around; align-items: center; color: var(--blue-400); }
.demo-menu { position: absolute; top: 190px; left: 28px; width: 172px; padding: 6px 0; border-radius: 20px; background: var(--ink-200); color: var(--ink-950); display: flex; flex-direction: column; }
.demo-menu span { height: 32px; padding: 0 14px; display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.demo-menu .demo-on, .demo-lista .demo-on { background: var(--ink-0); font-weight: var(--fw-bold); box-shadow: inset 0 0 0 2px var(--brand); }
.demo-folha { position: absolute; top: 196px; left: 6px; right: 6px; bottom: 6px; padding: 12px; border-radius: 24px; background: var(--ink-100); color: var(--ink-950); }
.demo-folha-toda { top: 30px; }
.demo-cab { display: flex; gap: 8px; align-items: center; font-size: 11.5px; font-weight: var(--fw-bold); }
.demo-cab small, .demo-cartao small { display: block; font-size: 10px; font-weight: var(--fw-regular); color: var(--ink-400); }
.demo-linha { display: flex; justify-content: space-between; margin-top: 12px; }
.demo-contato { display: block; width: 36px; height: 36px; border-radius: 50%; background: var(--ink-200); }
.demo-app { display: block; width: 36px; height: 36px; border-radius: 10px; background: var(--ink-300); }
.demo-acoes span { width: 46px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 8.5px; text-align: center; }
.demo-acoes b { width: 34px; height: 34px; border-radius: 50%; background: var(--ink-200); display: flex; align-items: center; justify-content: center; }
.demo-acoes .demo-on b { background: var(--ink-0); box-shadow: 0 0 0 2px var(--brand); }
.demo-acoes b .icone { width: 18px; height: 18px; }
.demo-acoes .demo-on { font-weight: var(--fw-bold); }
.demo-lista { margin-top: 10px; border-radius: 12px; background: var(--ink-50); overflow: hidden; display: flex; flex-direction: column; }
.demo-lista span { height: 28px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ink-100); }
.demo-c5 { background: var(--ink-50); color: var(--ink-950); }
.demo-add-topo { position: absolute; top: 34px; left: 8px; right: 8px; display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; font-weight: var(--fw-bold); }
.demo-add-topo b { width: 26px; height: 26px; border-radius: 50%; background: var(--ink-100); display: flex; align-items: center; justify-content: center; }
.demo-add-topo em { padding: 6px 10px; border-radius: 14px; background: var(--blue-500); color: var(--ink-0); font-style: normal; }
.demo-add-corpo { position: absolute; top: 76px; left: 8px; right: 8px; display: flex; flex-direction: column; gap: 10px; }
.demo-cartao { padding: 10px; border-radius: 12px; background: var(--ink-0); display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: var(--fw-bold); }
.demo-cartao-chave { justify-content: space-between; font-weight: var(--fw-regular); }
.demo-chave { position: relative; display: block; width: 36px; height: 22px; border-radius: 11px; background: var(--green-500); }
.demo-chave::after { content: ""; position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-0); }
.demo-c6 { background: linear-gradient(160deg, var(--blue-900) 0%, var(--ink-900) 100%); }
.demo-icone-novo { position: absolute; top: 50px; left: 58px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 9.5px; animation: demo-pop 14s infinite both; }
.demo-dedo { position: absolute; top: 0; left: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: rgba(255, 255, 255, .5); border: 2px solid var(--ink-0); box-shadow: 0 0 0 6px var(--brand-soft); z-index: 7; animation: demo-dedo-novo 14s infinite both; }
.demo-novo .demo-c1 { animation-name: demo-n1; }
.demo-novo .demo-c2 { animation-name: demo-n2; }
.demo-novo .demo-c3 { animation-name: demo-n3; }
.demo-novo .demo-c4 { animation-name: demo-n4; }
.demo-antigo .demo-c1 { animation-name: demo-a1; }
.demo-antigo .demo-c4 { animation-name: demo-a4; }
.demo-c5 { animation-name: demo-c5; }
.demo-c6 { animation-name: demo-c6; }
.demo-antigo .demo-dedo { animation-name: demo-dedo-antigo; }
.demo-passos .demo-p1 { animation: demo-p1 14s infinite both; }
.demo-passos .demo-p2 { animation: demo-p2 14s infinite both; }
.demo-passos .demo-p3 { animation: demo-p3 14s infinite both; }
@keyframes demo-n1 { 0%, 8% { opacity: 1; } 9%, 97% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes demo-n2 { 0%, 8% { opacity: 0; } 9%, 19% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes demo-n3 { 0%, 19% { opacity: 0; } 20%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes demo-n4 { 0%, 33% { opacity: 0; } 34%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes demo-a1 { 0%, 19% { opacity: 1; } 20%, 97% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes demo-a4 { 0%, 19% { opacity: 0; } 20%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes demo-c5 { 0%, 49% { opacity: 0; } 50%, 66% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes demo-c6 { 0%, 66% { opacity: 0; } 67%, 97% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes demo-pop { 0%, 69% { transform: scale(0); } 73% { transform: scale(1.15); } 76%, 100% { transform: scale(1); } }
@keyframes demo-dedo-novo {
    0% { left: 150px; top: 380px; transform: scale(1); opacity: 0; } 3% { opacity: 1; }
    5% { left: 67px; top: 450px; transform: scale(1); } 6.5% { left: 67px; top: 450px; transform: scale(.7); } 8% { left: 67px; top: 450px; transform: scale(1); }
    15% { left: 95px; top: 212px; transform: scale(1); } 16.5% { left: 95px; top: 212px; transform: scale(.7); } 18% { left: 95px; top: 212px; transform: scale(1); }
    28% { left: 199px; top: 367px; transform: scale(1); } 29.5% { left: 199px; top: 367px; transform: scale(.7); } 31% { left: 199px; top: 367px; transform: scale(1); }
    43% { left: 110px; top: 320px; transform: scale(1); } 44.5% { left: 110px; top: 320px; transform: scale(.7); } 46% { left: 110px; top: 320px; transform: scale(1); }
    57% { left: 197px; top: 47px; transform: scale(1); } 58.5% { left: 197px; top: 47px; transform: scale(.7); } 60% { left: 197px; top: 47px; transform: scale(1); }
    80% { left: 84px; top: 76px; transform: scale(1); } 85.5% { left: 84px; top: 76px; transform: scale(.7); } 87% { left: 84px; top: 76px; transform: scale(1); }
    95% { opacity: 1; } 98%, 100% { left: 84px; top: 76px; opacity: 0; }
}
@keyframes demo-dedo-antigo {
    0% { left: 150px; top: 380px; transform: scale(1); opacity: 0; } 3% { opacity: 1; }
    12% { left: 120px; top: 455px; transform: scale(1); } 13.5% { left: 120px; top: 455px; transform: scale(.7); } 15% { left: 120px; top: 455px; transform: scale(1); }
    40% { left: 110px; top: 260px; transform: scale(1); } 43.5% { left: 110px; top: 260px; transform: scale(.7); } 45% { left: 110px; top: 260px; transform: scale(1); }
    57% { left: 197px; top: 47px; transform: scale(1); } 58.5% { left: 197px; top: 47px; transform: scale(.7); } 60% { left: 197px; top: 47px; transform: scale(1); }
    80% { left: 84px; top: 76px; transform: scale(1); } 85.5% { left: 84px; top: 76px; transform: scale(.7); } 87% { left: 84px; top: 76px; transform: scale(1); }
    95% { opacity: 1; } 98%, 100% { left: 84px; top: 76px; opacity: 0; }
}
@keyframes demo-p1 { 0%, 19% { opacity: 1; } 20%, 66% { opacity: .4; } 67%, 100% { opacity: 1; } }
@keyframes demo-p2 { 0%, 19% { opacity: .4; } 20%, 49% { opacity: 1; } 50%, 66% { opacity: .4; } 67%, 100% { opacity: 1; } }
@keyframes demo-p3 { 0%, 49% { opacity: .4; } 50%, 100% { opacity: 1; } }
/* a demonstração animada do Android (D205): um celular desenhado e o "dedo" no caminho do Chrome — 3 pontinhos → Instalar
   app → Instalar → o ícone; usa os mesmos tempos da do iPhone antigo (cenas e passos) */
.demo-android { width: 252px; margin: 0 auto var(--space-3); padding: 6px; border-radius: 30px; background: var(--ink-700); zoom: .78; }
.demo-android .demo-tela { border-radius: 24px; }
.dand-camera { position: absolute; top: 9px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--ink-800); z-index: 6; }
.dand-chrome { position: absolute; top: 26px; left: 8px; right: 4px; height: 36px; display: flex; align-items: center; gap: 2px; }
.dand-endereco { flex: 1; height: 30px; padding: 0 10px; border-radius: 15px; background: var(--ink-700); display: flex; align-items: center; gap: 6px; }
.demo-tela .dand-endereco .icone { width: 12px; height: 12px; }
.dand-pontos { width: 30px; height: 36px; display: flex; align-items: center; justify-content: center; }
.demo-tela .dand-pontos .icone { width: 18px; height: 18px; }
.demo-android .demo-pagina-meio { top: 150px; }
.dand-menu { position: absolute; top: 30px; right: 6px; width: 160px; padding: 6px 0; border-radius: 8px; background: var(--ink-800); box-shadow: 0 8px 24px rgba(0, 0, 0, .6); display: flex; flex-direction: column; }
.dand-menu span { height: 30px; padding: 0 12px; display: flex; align-items: center; gap: 10px; font-size: 11.5px; }
.dand-menu .demo-on { background: var(--ink-600); font-weight: var(--fw-bold); box-shadow: inset 0 0 0 2px var(--brand); }
.dand-escuro { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.dand-janela { position: absolute; top: 170px; left: 20px; right: 20px; padding: 16px; border-radius: 20px; background: var(--ink-800); display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.dand-botoes { display: flex; justify-content: flex-end; align-items: center; gap: 14px; font-size: 11.5px; font-weight: var(--fw-bold); }
.dand-botoes span { color: var(--blue-400); }
.dand-botoes em { padding: 7px 14px; border-radius: 16px; background: var(--blue-500); color: var(--ink-0); font-style: normal; }
.dand-c1 { animation-name: demo-a1; }
.dand-c2 { animation-name: demo-a4; }
.dand-c3 { animation-name: demo-c5; }
.demo-android .demo-dedo { animation-name: demo-dedo-android; }
@keyframes demo-dedo-android {
    0% { left: 150px; top: 380px; transform: scale(1); opacity: 0; } 3% { opacity: 1; }
    12% { left: 221px; top: 45px; transform: scale(1); } 13.5% { left: 221px; top: 45px; transform: scale(.7); } 15% { left: 221px; top: 45px; transform: scale(1); }
    40% { left: 130px; top: 201px; transform: scale(1); } 43.5% { left: 130px; top: 201px; transform: scale(.7); } 45% { left: 130px; top: 201px; transform: scale(1); }
    57% { left: 174px; top: 274px; transform: scale(1); } 58.5% { left: 174px; top: 274px; transform: scale(.7); } 60% { left: 174px; top: 274px; transform: scale(1); }
    80% { left: 84px; top: 76px; transform: scale(1); } 85.5% { left: 84px; top: 76px; transform: scale(.7); } 87% { left: 84px; top: 76px; transform: scale(1); }
    95% { opacity: 1; } 98%, 100% { left: 84px; top: 76px; opacity: 0; }
}
/* a do navegador da SAMSUNG (D207): menu ≡ embaixo → Adicionar página a → Tela inicial → Adicionar → Adicionar; usa os
   tempos da do Safari novo (5 toques) */
.dsam-endereco { position: absolute; top: 26px; left: 10px; right: 10px; height: 30px; border-radius: 15px; background: var(--ink-700); display: flex; align-items: center; justify-content: center; gap: 6px; }
.demo-tela .dsam-endereco .icone { width: 12px; height: 12px; }
.dsam-barra { position: absolute; left: 0; right: 0; bottom: 6px; height: 40px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; justify-items: center; }
.dsam-barra b { width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 9px; }
.dsam-menu-ic { display: inline-flex; }
.dsam-folha { position: absolute; left: 6px; right: 6px; bottom: 52px; padding: 12px; border-radius: 20px; background: var(--ink-800); }
.dsam-grade { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 10px; }
.dsam-grade span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 9px; text-align: center; line-height: 1.2; }
.dsam-grade b { width: 34px; height: 34px; border-radius: 50%; background: var(--ink-700); display: flex; align-items: center; justify-content: center; }
.dsam-grade .demo-on b { box-shadow: 0 0 0 2px var(--brand); background: var(--ink-600); }
.dsam-grade .demo-on { font-weight: var(--fw-bold); }
.dsam-lista { display: flex; flex-direction: column; }
.dsam-lista strong { font-size: 12px; margin: 0 0 8px 8px; }
.dsam-lista span { height: 36px; padding: 0 10px; border-radius: 10px; display: flex; align-items: center; gap: 10px; font-size: 11.5px; }
.dsam-lista .demo-on { background: var(--ink-600); font-weight: var(--fw-bold); box-shadow: inset 0 0 0 2px var(--brand); }
.dsam-c1 { animation-name: demo-n1; }
.dsam-c2 { animation-name: demo-n2; }
.dsam-c3 { animation-name: demo-n3; }
.dsam-c4 { animation-name: demo-n4; }
.dsam-c5 { animation-name: demo-c5; }
.demo-samsung .demo-dedo { animation-name: demo-dedo-samsung; }
@keyframes demo-dedo-samsung {
    0% { left: 150px; top: 380px; transform: scale(1); opacity: 0; } 3% { opacity: 1; }
    5% { left: 216px; top: 454px; transform: scale(1); } 6.5% { left: 216px; top: 454px; transform: scale(.7); } 8% { left: 216px; top: 454px; transform: scale(1); }
    15% { left: 196px; top: 299px; transform: scale(1); } 16.5% { left: 196px; top: 299px; transform: scale(.7); } 18% { left: 196px; top: 299px; transform: scale(1); }
    28% { left: 120px; top: 386px; transform: scale(1); } 29.5% { left: 120px; top: 386px; transform: scale(.7); } 31% { left: 120px; top: 386px; transform: scale(1); }
    43% { left: 174px; top: 274px; transform: scale(1); } 44.5% { left: 174px; top: 274px; transform: scale(.7); } 46% { left: 174px; top: 274px; transform: scale(1); }
    57% { left: 174px; top: 274px; transform: scale(1); } 58.5% { left: 174px; top: 274px; transform: scale(.7); } 60% { left: 174px; top: 274px; transform: scale(1); }
    80% { left: 84px; top: 76px; transform: scale(1); } 85.5% { left: 84px; top: 76px; transform: scale(.7); } 87% { left: 84px; top: 76px; transform: scale(1); }
    95% { opacity: 1; } 98%, 100% { left: 84px; top: 76px; opacity: 0; }
}
/* a do CHROME no iPhone (D207): o Compartilhar fica no alto, ao lado do endereço; o resto é o caminho do Safari antigo */
.dcri-topo { position: absolute; top: 30px; left: 10px; right: 10px; height: 32px; display: flex; align-items: center; gap: 6px; }
.dcri-endereco { flex: 1; height: 32px; border-radius: 16px; background: var(--ink-600); display: flex; align-items: center; justify-content: center; gap: 6px; }
.demo-tela .dcri-endereco .icone { width: 12px; height: 12px; }
.dcri-topo .demo-alvo { width: 32px; height: 32px; align-items: center; justify-content: center; color: var(--blue-400); }
.dcri-barra { position: absolute; left: 0; right: 0; bottom: 8px; height: 34px; display: flex; justify-content: space-around; align-items: center; }
.dcri-barra b { width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 9px; }
.demo-chrome-ios .demo-dedo { animation-name: demo-dedo-chrome-ios; }
@keyframes demo-dedo-chrome-ios {
    0% { left: 150px; top: 380px; transform: scale(1); opacity: 0; } 3% { opacity: 1; }
    12% { left: 214px; top: 46px; transform: scale(1); } 13.5% { left: 214px; top: 46px; transform: scale(.7); } 15% { left: 214px; top: 46px; transform: scale(1); }
    40% { left: 110px; top: 260px; transform: scale(1); } 43.5% { left: 110px; top: 260px; transform: scale(.7); } 45% { left: 110px; top: 260px; transform: scale(1); }
    57% { left: 197px; top: 47px; transform: scale(1); } 58.5% { left: 197px; top: 47px; transform: scale(.7); } 60% { left: 197px; top: 47px; transform: scale(1); }
    80% { left: 84px; top: 76px; transform: scale(1); } 85.5% { left: 84px; top: 76px; transform: scale(.7); } 87% { left: 84px; top: 76px; transform: scale(1); }
    95% { opacity: 1; } 98%, 100% { left: 84px; top: 76px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .demo-cena, .demo-icone-novo, .demo-passos li { animation: none; }
    .demo-iphone .demo-c1, .demo-android .dand-c1, .demo-samsung .dsam-c1 { opacity: 1; }
    .demo-dedo { display: none; }
}
.comecar-depois { margin: 6px 0 0; text-align: center; }
.comecar-depois button { padding: 10px 16px; border: 0; background: none; font: inherit; font-size: .9rem; color: var(--text-muted); text-decoration: underline; cursor: pointer; }
/* "Abrir no Chrome" do Android, dentro de outro app (D180), e o passo a passo de reserva */
.botao-chrome { margin-top: var(--space-3); }
.passos-reserva { margin-top: 14px; }
.passos-reserva summary { cursor: pointer; font-size: .85rem; color: var(--text-link); text-align: center; }
.passos-reserva .passos { margin-top: 10px; }
/* o número dela em cima do "Crie sua senha", só para ler (D179) */
.campo-numero input { color: var(--text-muted); border-style: dashed; }
/* a tela de boas-vindas (D166): só o vídeo vertical e o botão de instalar, como a página de uma série */
.bem-vinda { max-width: 420px; margin: 0 auto; padding-top: var(--space-2); }
.player-vertical { max-width: 340px; margin: 0 auto; }
.player-vertical .player-desligado { aspect-ratio: 9 / 16; height: auto; }
.bem-vinda .botao { margin-top: var(--space-4); min-height: 56px; font-size: 1.05rem; }

/* ── painel novo da atendente, no celular (D159–D163): só as 4 abas embaixo (sem barra em cima — D162), profundidade
   (as sombras e o brilho vermelho do design system — pedido do dono: "está seco") e todo botão que abre o WhatsApp no
   verde do próprio WhatsApp ── */
body.corpo-atendente { background: radial-gradient(120% 40% at 50% -5%, rgba(225, 29, 72, .18), rgba(225, 29, 72, 0) 60%), var(--bg-app); background-attachment: fixed; }
.at { min-height: 100vh; }
.at-pagina { max-width: 480px; margin: 0 auto; padding: 18px var(--space-4) calc(96px + env(safe-area-inset-bottom)); }
.at-titulo { font-family: var(--font-display); font-size: 1.35rem; font-weight: var(--fw-bold); letter-spacing: -.01em; margin: 0; color: var(--text-strong); }
.at-sub { font-size: .85rem; color: var(--text-muted); margin: 2px 0 0; }
.at-cabeca { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.at-grupo { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font-family: var(--font-sans); font-size: .88rem; font-weight: var(--fw-bold); color: var(--text-strong); }
.at-grupo .at-apagado { font-weight: var(--fw-regular); margin: 0; }
.at-ponto { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .06); }
.at-ponto-verde { background: var(--green-400); }
.at-ponto-rosa { background: var(--red-400); }
.at-apagado { color: var(--text-muted); font-size: .82rem; margin: 6px 0 0; }
.at-centro { text-align: center; }
.at-centro a { color: var(--text-link); }
.at-link { background: none; border: 0; padding: 0; font-family: inherit; font-size: .82rem; color: var(--text-link); text-decoration: underline; cursor: pointer; }
.at-cartao {
    background: linear-gradient(160deg, var(--ink-800) 0%, var(--ink-900) 100%); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md), var(--inset-top); padding: 13px; margin-bottom: 10px;
}
.at-cartao-topo { display: flex; align-items: center; gap: 12px; }
.at-cartao-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.at-cartao-quem strong { font-size: 1rem; color: var(--text-strong); }
.at-cartao-quem span { font-size: .82rem; color: var(--text-muted); }
.at-cartao-titulo { font-family: var(--font-sans); font-size: 1rem; font-weight: var(--fw-bold); margin: 0 0 8px; }
.at-cartao-chamar { border-color: rgba(245, 83, 122, .35); }
.at-cartao-espera { border-color: rgba(245, 165, 36, .3); }
/* o X da aba Agora (D176): o cartão de quem já recebeu o acesso fica, marcado, até a atendente tirar da lista */
.at-cartao-enviado { border-color: rgba(34, 184, 104, .35); }
.at-fechar-form { margin: 0; flex: none; }
.at-fechar {
    width: 40px; height: 40px; border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--surface-raised);
    color: var(--text-strong); display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out);
}
.at-fechar .icone { width: 18px; height: 18px; }
.at-fechar:active { transform: scale(.94); }
.at-enviado { margin: 8px 0 0; font-size: .82rem; color: var(--green-400); }
.at-resumo { list-style: none; margin: 0; padding: 0; font-size: .92rem; line-height: 1.8; color: var(--text-muted); }
.at-resumo b { color: var(--text-strong); }
.at-vazio { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 20px 14px; }
.at-vazio-icone { display: flex; color: var(--green-400); }
.at-vazio-icone .icone { width: 32px; height: 32px; }
.at-vazio strong { color: var(--text-strong); }
.at-vazio span { color: var(--text-muted); font-size: .88rem; }
.at-vazio-grande { padding: 30px 14px; }
.at-vazio-grande .at-vazio-icone .icone { width: 48px; height: 48px; }
.at-vazio-grande strong { font-size: 1.25rem; }

/* a inicial da cliente, na cor do tipo */
.at-av {
    width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
    font-weight: var(--fw-bold); font-size: 1.05rem; color: var(--ink-0); box-shadow: 0 4px 12px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.at-av-pix { background: linear-gradient(135deg, var(--red-400), var(--red-800)); }
.at-av-teste { background: linear-gradient(135deg, var(--violet-400), var(--violet-900)); }
.at-av-vence { background: linear-gradient(135deg, var(--amber-500), var(--amber-900)); }
.at-av-pago { background: linear-gradient(135deg, var(--green-500), var(--green-900)); }
.at-cor-pix, .at-cor-perigo { color: var(--red-300); }
.at-cor-teste { color: var(--violet-400); }
.at-cor-vence { color: var(--amber-400); }
.at-cor-verde { color: var(--green-400); }
.at-cor-apagada { color: var(--text-muted); }
.at-etiqueta { flex: none; font-size: .75rem; font-weight: var(--fw-bold); border-radius: 7px; padding: 2px 7px; white-space: nowrap; border: 1px solid var(--border-strong); }
.at-etiqueta-pix { color: var(--red-300); border-color: rgba(245, 83, 122, .55); }
.at-etiqueta-teste { color: var(--violet-400); border-color: rgba(167, 139, 250, .55); }
.at-etiqueta-vence { color: var(--amber-400); border-color: rgba(245, 165, 36, .55); }
.at-etiqueta-verde { color: var(--green-400); border-color: rgba(34, 184, 104, .55); }
.at-etiqueta-neutra { color: var(--ink-200); }

/* botões */
.at-botao {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding: 12px; min-height: 48px;
    border: 0; border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--text-strong); font-family: inherit;
    font-size: .95rem; font-weight: var(--fw-bold); text-align: center; text-decoration: none; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.at-botao .icone { width: 20px; height: 20px; flex: none; }
.at-botao:active { transform: scale(.98); }
.at-botao:disabled { opacity: .6; }
.at-botao-marca { background: linear-gradient(180deg, var(--red-400) 0%, var(--red-500) 100%); color: var(--on-brand); box-shadow: var(--shadow-brand); }
.at-botao-wa { background: linear-gradient(180deg, var(--green-400) 0%, var(--whats) 100%); color: var(--ink-0); box-shadow: 0 6px 18px rgba(37, 211, 102, .3); }
.at-botao-wa:active { filter: brightness(.92); }
.at-botao-contorno { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); box-shadow: none; }
.at-botao-perigo { background: var(--danger-soft); color: var(--danger-fg); border: 1px solid rgba(242, 86, 29, .35); box-shadow: none; }
.at-botao-grande { min-height: 60px; margin: 0; font-size: 1.05rem; border-radius: var(--radius-xl); box-shadow: 0 8px 22px rgba(37, 211, 102, .4); }
.at-botao-grande .icone { width: 24px; height: 24px; }
.at-botao-leve {
    display: inline-flex; align-items: center; gap: 6px; margin: 10px 6px 0 0; padding: 8px 11px; border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: var(--ink-200); font-family: inherit;
    font-size: .85rem; text-decoration: none; cursor: pointer;
}
.at-botao-leve .icone { width: 16px; height: 16px; }
.at-chamado { opacity: .55; }
.at-copiado { background: var(--green-500); color: var(--ink-0); }
.at-redondo {
    width: 44px; height: 44px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
    color: var(--ink-200); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
}
.at-redondo .icone { width: 20px; height: 20px; }
.at-voltar { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--text-muted); font-size: .88rem; text-decoration: none; }
.at-voltar .icone { width: 18px; height: 18px; }

/* as 4 abas embaixo */
.at-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-topbar); padding-bottom: env(safe-area-inset-bottom);
    background: rgba(17, 17, 20, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
}
.at-nav-dentro { max-width: 480px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.at-aba { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 10px; font-size: .75rem; color: var(--text-muted); text-decoration: none; }
.at-aba-icone { display: flex; align-items: center; justify-content: center; width: 56px; height: 30px; border-radius: 14px; }
.at-aba-icone .icone { width: 23px; height: 23px; }
.at-aba-ativa { color: var(--text-strong); }
.at-aba-ativa .at-aba-icone { background: rgba(225, 29, 72, .16); color: var(--brand); }
.at-selo { position: absolute; top: 4px; left: 56%; min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--brand); color: var(--on-brand); font-size: .7rem; line-height: 18px; text-align: center; }

/* Recuperar: a fila com um botão só (D159) */
.at-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.at-filtro {
    flex: none; padding: 6px 11px; border-radius: 20px; font-size: .82rem; white-space: nowrap; text-decoration: none;
    color: var(--ink-200); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09);
}
.at-filtro-ativo { background: linear-gradient(180deg, var(--red-400), var(--red-500)); border-color: transparent; color: var(--on-brand); box-shadow: 0 4px 14px rgba(225, 29, 72, .35); }
.at-fila-conta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 14px 0 10px; }
.at-fila-conta strong { font-size: 1.1rem; color: var(--text-strong); }
.at-fila-conta .at-apagado { margin: 0; }
.at-fila-numero { font-family: var(--font-display); font-size: 1.9rem; font-weight: var(--fw-bold); color: var(--red-300); }
.at-fila {
    background: linear-gradient(160deg, var(--ink-800), var(--ink-900)); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md); overflow: hidden; margin-bottom: 10px;
}
.at-linha { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .05); color: inherit; text-decoration: none; }
.at-linha:last-child { border-bottom: 0; }
.at-linha-primeira { background: rgba(37, 211, 102, .08); }
.at-linha .at-av { width: 38px; height: 38px; font-size: 1rem; }
.at-linha .at-apagado { margin: 0; }
.at-linha-meio { flex: 1; min-width: 0; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.at-linha-meio .at-etiqueta { align-self: flex-start; margin-top: 2px; }
.at-linha-nome { font-size: 1rem; font-weight: var(--fw-bold); color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-linha-valor { font-size: .875rem; font-weight: var(--fw-regular); color: var(--text-muted); }
.at-linha-tempo { display: flex; align-items: center; gap: 4px; margin-top: 1px; font-size: .8rem; font-weight: var(--fw-bold); }
.at-linha-tempo .icone { width: 14px; height: 14px; }
.at-linha-icone { flex: none; display: flex; color: var(--text-muted); }
.at-linha-icone .icone { width: 22px; height: 22px; }
.at-bola-wa {
    width: 46px; height: 46px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer;
    color: var(--ink-0); background: linear-gradient(180deg, var(--green-400), var(--whats)); box-shadow: 0 4px 12px rgba(37, 211, 102, .35);
}
.at-bola-wa .icone { width: 24px; height: 24px; }
.at-esperando { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 16px 0 6px; text-align: center; font-size: .82rem; color: var(--text-muted); }
.at-esperando .icone { width: 15px; height: 15px; flex: none; }
.at-espaco-proxima { height: 84px; }
.at-proxima {
    position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 64px); z-index: var(--z-sidebar); max-width: 480px; margin: 0 auto;
    padding: 10px 14px 8px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--bg-app) 35%);
}

/* detalhes de uma cliente da fila */
.at-destaque { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 4px 10px; border-radius: 7px; font-size: .85rem; font-weight: var(--fw-bold); border: 1px solid var(--border-strong); }
.at-destaque .icone { width: 15px; height: 15px; }
.at-destaque-pix { color: var(--red-300); border-color: rgba(245, 83, 122, .55); background: rgba(245, 83, 122, .08); }
.at-destaque-teste { color: var(--violet-400); border-color: rgba(167, 139, 250, .55); background: rgba(167, 139, 250, .08); }
.at-destaque-vence { color: var(--amber-400); border-color: rgba(245, 165, 36, .55); background: rgba(245, 165, 36, .08); }
.at-situacao { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-weight: var(--fw-bold); }
.at-situacao .icone { width: 18px; height: 18px; }
.at-bolinhas { display: flex; gap: 6px; margin: 10px 0 4px; }
.at-bolinhas span { flex: 1; text-align: center; padding: 4px 0; border-radius: 8px; font-size: .75rem; border: 1px solid var(--border-default); color: var(--text-subtle); }
.at-bolinhas .at-bolinha-feita { background: var(--amber-900); border-color: rgba(245, 165, 36, .45); color: var(--amber-400); }
.at-bolinhas .at-bolinha-vez { border-color: var(--red-400); color: var(--red-300); }
.at-bolha {
    margin-top: 10px; padding: 10px; border-radius: 10px; background: var(--surface-sunken); border: 1px solid var(--border-subtle);
    font-size: .9rem; color: var(--text-body); white-space: pre-wrap; overflow-wrap: anywhere;
}
.at-bolha-rotulo { display: block; margin-bottom: 4px; font-size: .8rem; color: var(--text-muted); white-space: normal; }
.at-bolha-whats { background: var(--green-900); border-color: rgba(34, 184, 104, .25); color: var(--ink-50); }
.at-trava {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; padding: 12px; border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .05); color: var(--text-muted); font-size: .9rem; font-weight: var(--fw-bold); text-align: center;
}
.at-trava .icone { width: 18px; height: 18px; flex: none; }
.at-descartar summary, .at-pronta summary, .at-recuperacao summary { list-style: none; cursor: pointer; }
.at-descartar summary::-webkit-details-marker, .at-pronta summary::-webkit-details-marker,
.at-recuperacao summary::-webkit-details-marker { display: none; }
.at-descartar summary { display: flex; align-items: center; gap: 6px; color: var(--ink-200); font-size: .9rem; }
.at-descartar summary .icone { width: 18px; height: 18px; }
.at-opcao { display: flex; align-items: center; gap: 10px; margin-top: 7px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 10px; cursor: pointer; }

/* Minhas chamadas */
.at-tempos { padding: 4px 13px; }
.at-tempo { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.at-tempo:last-child { border-bottom: 0; }
.at-tempo-texto { font-size: .9rem; color: var(--text-strong); }
.at-unidades { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.at-unidade { position: relative; }
.at-unidade input { position: absolute; opacity: 0; pointer-events: none; }
.at-unidade span { display: inline-block; padding: 3px 9px; border-radius: 14px; border: 1px solid var(--border-default); font-size: .78rem; color: var(--ink-200); cursor: pointer; }
.at-unidade input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.at-unidade input:focus-visible + span { box-shadow: var(--ring-focus); }
.at-passo { display: flex; align-items: center; gap: 6px; flex: none; }
.at-passo button { width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--ink-750); color: var(--text-strong); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.at-passo button .icone { width: 18px; height: 18px; }
.at-passo input { width: 44px; text-align: center; font-family: inherit; font-size: 1.05rem; font-weight: var(--fw-bold); background: transparent; border: 0; color: var(--text-strong); -moz-appearance: textfield; appearance: textfield; }
.at-passo input::-webkit-outer-spin-button, .at-passo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.at-abas-chamada { display: flex; gap: 6px; margin-bottom: 10px; }
.at-aba-chamada { flex: 1; padding: 8px 0; border-radius: 10px; border: 1px solid var(--border-default); background: transparent; color: var(--text-body); font-family: inherit; font-size: .88rem; cursor: pointer; }
.at-aba-chamada-ativa { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.at-versao { display: block; margin-bottom: 8px; }
.at-versao span { display: block; margin-bottom: 4px; font-size: .78rem; color: var(--text-muted); }
.at-versao textarea {
    width: 100%; min-height: 120px; padding: 10px; border-radius: 12px; border: 1px solid var(--border-default); background: var(--surface-input);
    color: var(--text-strong); font-family: var(--font-sans); font-size: 1rem; line-height: 1.45; resize: vertical;
}
.at-variaveis { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.at-variaveis button { padding: 7px 10px; border: 0; border-radius: 9px; background: var(--violet-900); color: var(--violet-400); font-family: inherit; font-size: .82rem; cursor: pointer; }
.at-previa-cabeca { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; font-size: .82rem; color: var(--text-muted); }
.at-aviso-link { margin: 6px 0 0; font-size: .82rem; color: var(--amber-400); }
.at-form-padrao { margin-top: 6px; }

/* Atender (D160) */
.at-numero {
    width: 100%; padding: 13px; border-radius: 12px; border: 1px solid var(--border-default); background: var(--surface-input); color: var(--text-strong);
    font-family: var(--font-sans); font-size: 1.2rem; font-weight: var(--fw-bold); letter-spacing: .5px;
}
.at-numero::placeholder { color: var(--text-subtle); font-size: 1rem; font-weight: var(--fw-regular); letter-spacing: 0; }
.at-numero:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring-focus); }
.at-quem { margin: 8px 0 0; font-size: .9rem; font-weight: var(--fw-bold); }
.at-quem-vazio { color: var(--text-muted); font-weight: var(--fw-regular); }
.at-quem-nova { color: var(--blue-400); }
.at-quem-ativa { color: var(--green-400); }
.at-quem-vencida { color: var(--red-300); }
.at-quem-bloqueada { color: var(--danger-fg); }
.at-resultado { margin-top: 12px; }
.at-feito { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--green-400); font-size: .88rem; font-weight: var(--fw-bold); }
.at-feito .icone { width: 18px; height: 18px; flex: none; }
/* Atender numa tela só (D185): as escolhas são rádios dentro de cartões (com o script, a bolinha some e o cartão acende) */
.at-cartao [hidden] { display: none !important; }
.at-ultima { margin: 4px 0 0; font-size: .8rem; color: var(--text-muted); }
/* a gaveta que desliza depois do número (D188): teste grátis, reenviar acesso, nova senha — só o que vale para ela */
.at-gaveta { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out); }
.at-gaveta.aberta { grid-template-rows: 1fr; opacity: 1; }
.at-gaveta-dentro { overflow: hidden; min-height: 0; }
.at-opcoes { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.at-opcao {
    flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--radius-lg); cursor: pointer;
    border: 1px solid var(--border-default); background: var(--surface-raised); color: var(--text-strong); font-family: inherit; text-align: left;
}
.at-opcao:active { transform: scale(.98); }
.at-opcao .icone { width: 22px; height: 22px; flex: none; }
.at-opcao span { display: flex; flex-direction: column; min-width: 0; }
.at-opcao strong { font-size: .9rem; line-height: 1.2; }
.at-opcao small { font-size: .72rem; color: var(--text-muted); }
.at-opcao-teste { border-color: rgba(245, 165, 36, .35); background: var(--warning-soft); }
.at-opcao-teste .icone, .at-opcao-teste strong { color: var(--amber-400); }
.at-opcao-reenviar { border-color: rgba(76, 141, 255, .35); background: var(--info-soft); }
.at-opcao-reenviar .icone, .at-opcao-reenviar strong { color: var(--blue-400); }
.at-opcao-senha { border-color: rgba(167, 139, 250, .35); background: rgba(167, 139, 250, .12); }
.at-opcao-senha .icone, .at-opcao-senha strong { color: var(--violet-400); }
/* pular a tela de nota fiscal (só Suporte — D200): numa linha inteira, embaixo das outras */
.at-opcao-nota { flex-basis: 100%; }
.at-opcao-nota .icone, .at-opcao-nota strong { color: var(--text-strong); }
/* a tela Notas fiscais (D201): o período numa fileira só — "Datas" abre o de… até… embaixo, na linha inteira */
.notas-periodo { gap: 5px; }
.notas-periodo .chip { padding-left: 10px; padding-right: 10px; }
.notas-datas > summary { cursor: pointer; list-style: none; }
.notas-datas > summary::-webkit-details-marker { display: none; }
.notas-datas > summary .icone { width: 16px; height: 16px; }
.notas-datas[open] { flex-basis: 100%; }
.notas-datas[open] > summary { display: inline-flex; }
.notas-datas form { margin: 10px 0 0; }
.notas-planos, .notas-numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.notas-numeros .indicador-destaque { grid-column: 1 / -1; }
.notas-baixar h2 { font-size: 1rem; margin: 0 0 8px; }
.notas-baixar .botao { display: flex; align-items: center; justify-content: center; gap: 8px; }
.notas-baixar form + form .botao { margin-top: 8px; }
.notas-tabela td { white-space: nowrap; }
.notas-cpf { font-variant-numeric: tabular-nums; }
/* Operações: a isca da 1 série (D218) */
.isca-dica { margin: -4px 0 10px; font-size: .82rem; color: var(--text-muted); }
/* Conferir HooPay (D210–D213) */
.hp-ok, .hp-alerta { font-size: .9rem; line-height: 1.45; }
.hp-ok { border-color: rgba(34, 184, 104, .35); background: var(--success-soft); color: var(--success-fg); }
.hp-alerta { border-color: var(--danger-fg); background: var(--danger-soft); color: var(--danger-fg); }
.hp-alerta h2 { font-size: 1.05rem; margin: 0 0 8px; }
.hp-alerta p { margin: 8px 0 4px; }
.hp-alerta ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .84rem; }
.hp-titulo { font-size: 1rem; margin: 0 0 8px; }
.hp-dica { margin: 0 0 6px; font-size: .84rem; color: var(--text-muted); line-height: 1.45; }
.hp-atencao { color: var(--warning-fg); }
.hp-relatorio-form input[type="file"] { flex: 1 1 100%; min-width: 0; font-size: .86rem; color: var(--text-muted); }
.hp-resultado { margin: 10px 0 8px; padding: 10px 12px; border: 1px solid; border-radius: var(--radius-md); }
.hp-resultado p { margin: 0 0 4px; }
.hp-resultado ul { margin: 0 0 8px; }
.repasse-conta { margin: 4px 0 10px; display: grid; gap: 4px; }
.repasse-conta > div { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; }
.repasse-conta dt { color: var(--text-muted); }
.repasse-conta dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--text-strong); white-space: nowrap; }
.repasse-total { border-top: 1px solid var(--border-subtle); padding-top: 6px; margin-top: 2px; }
.repasse-total dt, .repasse-total dd { font-weight: var(--fw-bold); color: var(--text-strong); font-size: 1rem; }
.repasse-form { margin-top: 12px; }
.repasses { margin-top: 4px; font-size: .86rem; }
.repasses summary { cursor: pointer; color: var(--text-muted); }
.repasses ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.repasses li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-subtle); }
.repasses li span { min-width: 0; overflow-wrap: anywhere; }
.at-escolha { position: relative; cursor: pointer; }
.at-js .at-radio { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.at-js .at-escolha:has(> .at-radio:focus-visible) { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.at-formas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.at-forma {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; border-radius: var(--radius-lg); text-align: center;
    border: 1px solid var(--border-default); background: var(--surface-raised); color: var(--text-muted);
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.at-forma strong { color: var(--text-strong); font-size: .92rem; white-space: nowrap; }
.at-forma-pix.ativo, .at-forma-cartao.ativo { border-color: var(--success); background: var(--success-soft); }
.at-falta { margin: 10px 0 0; font-size: .85rem; font-weight: var(--fw-semibold); color: var(--danger-fg); text-align: center; }
.at-gerar { width: 100%; margin-top: 14px; }
.at-venda-no { margin: 6px 0 0; font-size: .82rem; color: var(--text-muted); }
.at-venda-no strong { color: var(--green-400); white-space: nowrap; }
.at-venda-no a { color: var(--warning-fg); font-weight: var(--fw-semibold); }
.at-resultado .at-bolha { margin-top: 8px; }
.at-linha-pronta { align-items: flex-start; }
.at-pronta { flex: 1; min-width: 0; }
.at-pronta summary { display: flex; flex-direction: column; }

/* Ganhos (D161) */
.at-eu {
    width: 44px; height: 44px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(135deg, var(--red-500), var(--red-900)); color: var(--on-brand);
    font-size: 1.1rem; font-weight: var(--fw-bold); box-shadow: 0 4px 12px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.at-seletor { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 12px 0; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.at-seletor a { padding: 9px 0; border-radius: 10px; text-align: center; font-size: .8rem; font-weight: var(--fw-bold); white-space: nowrap; color: var(--text-muted); text-decoration: none; }
.at-seletor .at-seletor-ativo { background: linear-gradient(180deg, var(--red-400), var(--red-500)); color: var(--on-brand); box-shadow: 0 4px 12px rgba(225, 29, 72, .3); }
.at-heroi {
    display: flex; flex-direction: column;
    background: radial-gradient(120% 90% at 100% 0%, rgba(37, 211, 102, .22) 0%, rgba(37, 211, 102, 0) 60%), linear-gradient(160deg, var(--ink-800) 0%, var(--ink-900) 100%);
}
.at-heroi-rotulo { font-size: .88rem; color: var(--text-muted); }
.at-heroi-valor { font-family: var(--font-display); font-size: 2.4rem; font-weight: var(--fw-bold); letter-spacing: -.02em; line-height: 1.15; color: var(--green-400); }
.at-heroi-vendas { font-size: .95rem; color: var(--text-body); }
.at-barras { display: flex; align-items: flex-end; gap: 8px; height: 110px; margin-top: 10px; }
/* o mesmo cartão no Resumo de Operações, logo depois do período (D178) */
.op-heroi { margin-bottom: 14px; }
.op-heroi .at-apagado b { color: var(--text-strong); }
@media (min-width: 640px) { .op-heroi .at-barras { height: 150px; } }
.at-barras-fina { gap: 3px; }
.at-barra { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; }
.at-barra-coluna { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.at-barra-coluna i { display: block; width: 100%; border-radius: 6px 6px 3px 3px; background: rgba(255, 255, 255, .13); }
.at-barras-fina .at-barra-coluna i { border-radius: 3px 3px 1px 1px; }
.at-barra-on .at-barra-coluna i { background: linear-gradient(180deg, var(--green-400), var(--green-500)); box-shadow: 0 4px 12px rgba(37, 211, 102, .35); }
.at-barra-futura .at-barra-coluna i { background: transparent; border: 1px dashed rgba(255, 255, 255, .18); }
.at-barra small { height: 15px; font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.at-barras-fina .at-barra small { font-size: .62rem; }
.at-barra-on small { color: var(--text-strong); font-weight: var(--fw-bold); }
.at-h-5 { height: 5%; } .at-h-10 { height: 10%; } .at-h-15 { height: 15%; } .at-h-20 { height: 20%; } .at-h-25 { height: 25%; }
.at-h-30 { height: 30%; } .at-h-35 { height: 35%; } .at-h-40 { height: 40%; } .at-h-45 { height: 45%; } .at-h-50 { height: 50%; }
.at-h-55 { height: 55%; } .at-h-60 { height: 60%; } .at-h-65 { height: 65%; } .at-h-70 { height: 70%; } .at-h-75 { height: 75%; }
.at-h-80 { height: 80%; } .at-h-85 { height: 85%; } .at-h-90 { height: 90%; } .at-h-95 { height: 95%; } .at-h-100 { height: 100%; }
.at-receber { display: flex; justify-content: space-between; align-items: center; }
.at-receber .at-apagado { margin: 0; }
.at-receber strong { display: block; font-size: 1.6rem; font-weight: var(--fw-bold); color: var(--text-strong); }
.at-receber-icone { display: flex; color: var(--green-400); }
.at-receber-icone .icone { width: 30px; height: 30px; }
.at-recuperacao[open] .at-seta { transform: rotate(180deg); }
.at-hora { width: 40px; flex: none; font-size: .8rem; color: var(--text-muted); }
.at-venda-fim { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.at-desfazer { padding: 2px 8px; border-radius: 8px; border: 1px solid rgba(245, 83, 122, .45); font-size: .75rem; color: var(--red-300); text-decoration: none; }
.at-desfeitas { opacity: .6; }
.at-riscado { text-decoration: line-through; }
.at-cartao-topo .at-eu { width: 48px; height: 48px; }

/* ── tela média (tablet, computador pequeno): menu lateral só de ícones, busca no topo, sem a barra de baixo ── */
@media (min-width: 768px) {
    .central { display: flex; align-items: flex-start; min-height: 100vh; }
    .central-lado {
        position: sticky; top: 0; z-index: var(--z-sidebar); display: flex; flex-direction: column; flex: 0 0 var(--sidebar-w-collapsed);
        width: var(--sidebar-w-collapsed); height: 100vh; padding: 0 12px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
        background: var(--surface-sidebar); border-right: 1px solid var(--border-subtle);
    }
    .central-lado::-webkit-scrollbar { display: none; }
    .central-corpo { flex: 1 1 auto; min-width: 0; }
    .central-marca { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 10px; height: var(--topbar-h); text-decoration: none; }
    .central-marca .logo-texto { display: none; }
    .central-menu { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--space-4); }
    .central-grupo { height: 1px; margin: 8px 6px; overflow: hidden; background: var(--border-subtle); font-size: 0; }
    .central-item {
        position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; height: 42px; border-radius: var(--radius-md);
        color: var(--text-muted); font: var(--text-ui); font-size: .9rem; text-decoration: none;
        transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .central-item svg { width: 20px; height: 20px; flex: 0 0 auto; }
    .central-item span { display: none; }
    .central-item-ativo { background: var(--brand-soft); color: var(--text-strong); }
    .central-item-ativo svg { color: var(--brand); }
    .central-item-ativo::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--brand); }
    .central-lado .central-pessoa {
        margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0 16px;
        border-top: 1px solid var(--border-subtle);
    }
    .central-lado .central-pessoa-texto { display: none; }
    .central-lado .topo-botao { width: 40px; height: 40px; color: var(--text-muted); }
    .central-lado .topo-botao svg { width: 20px; height: 20px; }
    .central-topo { height: var(--topbar-h); padding: 0 var(--space-6); gap: 12px; }
    .central-topo-marca, .central-so-celular { display: none; }
    .central-busca { position: relative; display: flex; align-items: center; flex: 1 1 auto; max-width: 460px; margin: 0; }
    .central-busca svg { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--text-subtle); pointer-events: none; }
    .central-busca input {
        width: 100%; height: 40px; padding: 0 14px 0 38px; border-radius: var(--radius-md); border: 1px solid var(--border-default);
        background: var(--surface-input); color: var(--text-strong); font-size: .9rem;
    }
    .central-busca input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring-focus); }
    .barra-equipe { display: none; }
    .conteudo-equipe { padding: var(--space-6) var(--space-6) var(--space-12); }
    .janela-lado { align-items: flex-start; justify-content: flex-end; padding: calc(var(--topbar-h) + 6px) var(--space-6) 0; }
    .janela-lado .janela-caixa { max-width: 400px; border-radius: var(--radius-xl); padding-bottom: 16px; }
    .janela-lado .janela-alca { display: none; }
    .vg-atalhos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .menu-equipe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ── computador: menu lateral inteiro, com os grupos e o nome da pessoa ── */
@media (min-width: 1100px) {
    .central-lado { flex-basis: var(--sidebar-w); width: var(--sidebar-w); }
    .central-marca { justify-content: flex-start; padding: 0 6px; }
    .central-marca .logo-texto { display: inline; }
    .central-grupo {
        height: auto; margin: 16px 0 6px; padding: 0 12px; background: none; font: var(--text-overline); letter-spacing: var(--ls-caps);
        text-transform: uppercase; color: var(--text-subtle);
    }
    .central-menu .central-grupo:first-child { margin-top: 6px; }
    .central-item { justify-content: flex-start; padding: 0 12px; }
    .central-item span { display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .central-lado .central-pessoa { flex-direction: row; gap: 10px; padding: 14px 0 16px; }
    .central-lado .central-pessoa-texto { display: flex; }
    .conteudo-equipe { padding-left: var(--space-8); padding-right: var(--space-8); }
}
/* ── impressão (recibo de comissão): só a tela, sem a moldura ── */
@media print {
    .central-lado, .central-topo, .barra-equipe, .janela, .pular { display: none !important; }
    .conteudo-equipe { padding: 0; }
}

/* ── quem tem mouse (computador): o "passar por cima" do design system ── */
@media (hover: hover) {
    .botao:hover { background: var(--brand-hover); box-shadow: var(--shadow-brand); }
    .botao-secundario:hover { background: var(--surface-hover); border-color: var(--border-strong); box-shadow: none; }
    .botao-whatsapp:hover { background: var(--whats); filter: brightness(1.06); box-shadow: none; }
    .botao-perigo:hover { background: var(--danger); color: var(--on-brand); box-shadow: none; }
    .botao-mini:hover, .tg-botao:hover, .of-botao:hover, .of-cta:hover, .tg-ret-sim:hover { background: var(--brand-hover); }
    .tg-suporte-botao:hover { background: var(--surface-hover); }
    .menu-item:hover, .linha-cliente:hover, .plano:hover, .vg-atalho:hover { background: var(--surface-hover); border-color: var(--border-default); }
    .vg-atalho-destaque:hover { background: var(--gradient-brand-glow), var(--surface-hover); border-color: var(--brand); }
    .central-item:hover { background: var(--surface-hover); color: var(--text-strong); }
    .central-item-ativo:hover { background: var(--brand-soft); }
    .central-linha:hover { background: var(--surface-hover); }
    .central-linha-ativa:hover { background: var(--brand-soft); }
    .vg-ver:hover, .central-ver-tudo:hover { color: var(--text-strong); }
    .venda-cancelar:hover, .desfazer-venda a:hover, a.desfazer-venda:hover { text-decoration: underline; }
    .motivo:hover { border-color: var(--border-strong); }
    .atividade-texto a:hover { text-decoration-color: var(--text-strong); }
    .aba:hover, .chip:hover { color: var(--text-strong); }
    .filtro:hover { border-color: var(--ink-0); }
    .tabela tbody tr:hover td { background: var(--surface-hover); }
    .topo-botao:hover { background: var(--neutral-soft); }
    .barra-item:hover { color: var(--text-strong); }
    .voltar:hover, .tg-voltar:hover { color: var(--text-strong); }
}

/* ── quem pediu menos movimento no aparelho ── */
@media (prefers-reduced-motion: reduce) {
    .janela, .janela-caixa, .situacao-pulsa { animation: none; }
    .central-item, .central-linha, .vg-atalho, .menu-item { transition: none; }
    .ao-vivo-mudou, .central-ao-vivo::before { animation: none; }
    .tg-trilho { animation: none; }
    .tg-carrossel { overflow-x: auto; }
    .tg-loja, .tg-ponto, .tg-roda, .tg-aprovado, .tg-pagamento.visivel { animation: none; }
}

/* ── "Ver como" do dono (D229): os links fixos de cada situação ── */
.vc-lista { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
@media (min-width: 720px) { .vc-lista { grid-template-columns: repeat(2, 1fr); } }
.vc-item { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; margin: 0; }
.vc-item strong { color: var(--text-strong); }
.vc-item span { color: var(--text-muted); font-size: .9rem; }
.vc-item small { color: var(--text-subtle); font-size: .72rem; word-break: break-all; }

/* ── Indique e ganhe (D236): a aba "Indique", o convite da amiga, os avisos do Início e a barra com 5 itens ── */
.barra-itens-5 { max-width: 360px; }
@media (max-width: 359px) { .barra-itens-5 .barra-item span { font-size: .58rem; letter-spacing: -.01em; } }
.indique, .convite { max-width: 560px; margin: 0 auto; padding: var(--space-4) var(--space-4) calc(110px + env(safe-area-inset-bottom)); }
.indique-heroi, .convite-heroi { padding: var(--space-5) var(--space-4); border-radius: var(--radius-xl); background: var(--gradient-hero); border: 1px solid rgba(225, 29, 72, .35); }
.indique-heroi h1, .convite-heroi h1 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.45rem; line-height: var(--lh-tight); color: var(--text-strong); }
.indique-heroi p, .convite-heroi p { margin: 0; font-size: .95rem; line-height: var(--lh-normal); color: var(--text-body); }
.indique-heroi strong, .convite-heroi strong { color: var(--amber-400); }
.indique-heroi .botao { margin-top: var(--space-4); }
.indique-link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); padding: 10px 12px; border-radius: var(--radius-lg); background: var(--surface-sunken); border: 1px solid var(--border-default); }
.indique-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: .82rem; color: var(--text-body); }
.indique button[data-copiar] { flex: 0 0 auto; min-height: 36px; padding: 6px 14px; border: 0; border-radius: var(--radius-full); background: var(--brand); color: var(--on-brand); font-weight: var(--fw-bold); cursor: pointer; }
.indique button.copiado { background: var(--success); }
.indique .cartao { margin-top: var(--space-4); }
.indique h2 { margin: 0 0 var(--space-3); font-size: 1.05rem; color: var(--text-strong); }
.indique-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.indique-numeros div { padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface-sunken); }
.indique-numeros strong { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: var(--fw-black); color: var(--text-strong); }
.indique-numeros span { font-size: .8rem; color: var(--text-muted); }
.indique-barra { display: block; width: 100%; height: 10px; margin: var(--space-3) 0 var(--space-2); border: 0; border-radius: var(--radius-full); background: var(--surface-active); overflow: hidden; appearance: none; }
.indique-barra::-webkit-progress-bar { background: var(--surface-active); border-radius: var(--radius-full); }
.indique-barra::-webkit-progress-value { background: var(--brand); border-radius: var(--radius-full); }
.indique-barra::-moz-progress-bar { background: var(--brand); border-radius: var(--radius-full); }
.indique-niveis, .indique-dica, .indique-vazio, .indique-regras { margin: 0; font-size: .82rem; line-height: var(--lh-normal); color: var(--text-muted); }
.indique-niveis strong { color: var(--text-strong); }
.indique-linha { display: flex; justify-content: space-between; gap: var(--space-2); padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: .9rem; color: var(--text-body); }
.indique-linha:last-child { border-bottom: 0; }
.indique-linha small { color: var(--text-muted); }
.indique-premiada, .indique-limite { color: var(--success-fg); font-weight: var(--fw-bold); text-align: right; }
.indique-recusada, .indique-cancelada { color: var(--text-muted); text-align: right; }
.indique-arsenal { margin-top: var(--space-6); }
.indique-arsenal h2 { margin: 0 0 var(--space-1); font-size: 1.15rem; color: var(--text-strong); }
.indique-arsenal h3 { margin: var(--space-5) 0 var(--space-1); font-size: .95rem; color: var(--text-strong); }
.indique-msg { margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-default); }
.indique-msg p { margin: 0 0 var(--space-3); font-size: .9rem; line-height: var(--lh-normal); color: var(--text-body); word-break: break-word; }
.indique-msg-botoes { display: flex; gap: var(--space-2); }
.indique-msg-botoes button, .indique-msg-botoes a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: var(--radius-full); font-size: .88rem; font-weight: var(--fw-bold); text-decoration: none; }
.indique-msg-botoes a { background: var(--whats); color: var(--ink-950); }
.indique-como p { margin: 0 0 var(--space-2); font-size: .9rem; line-height: var(--lh-relaxed); color: var(--text-body); }
.indique-aviso { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; padding: 12px; border-radius: var(--radius-lg); text-decoration: none; }
.indique-aviso { background: var(--success-soft); border: 1px solid var(--success); }
.indique-aviso strong { color: var(--text-strong); }
.indique-aviso span { font-size: .85rem; color: var(--text-body); }
.convite-capas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-4) 0 var(--space-2); }
.convite-capas figure { min-width: 0; margin: 0; }
.convite-capas img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius-md); background: var(--surface-card); }
.convite-capas figcaption { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; color: var(--text-muted); }
.convite-sub { margin: 0 0 var(--space-4); font-size: .82rem; color: var(--text-muted); }
.convite-presente { margin-top: var(--space-2); }

/* D305 (busca do app): o painel da busca que acha (em cima do filtro instantâneo) e a faixa "🔥 Em anúncio agora" */
.busca-esperta { margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.busca-esperta h3 { margin: 0 0 var(--space-3); font-size: 1.05rem; font-weight: var(--fw-bold); color: var(--text-strong); }
.busca-esperta-texto { margin: 0 0 var(--space-3); font-size: .9rem; color: var(--text-muted); }
.busca-destaque { display: flex; gap: var(--space-3); align-items: flex-start; }
.busca-destaque .card { flex: 0 0 38%; max-width: 160px; }
.busca-destaque-info { flex: 1; min-width: 0; }
.busca-destaque-info strong { display: block; font-size: 1rem; line-height: 1.3; color: var(--text-strong); }
.busca-destaque-info .botao { margin-top: var(--space-3); }
.busca-anuncio { margin-top: calc(-1 * var(--space-2)); }

/* D305 (pedidos): o pedido volta para a cliente — a bolinha do "Pedir Série", Meus pedidos e o "Já temos!" */
.barra-bolinha { position: absolute; top: 3px; left: 50%; margin-left: 7px; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--brand); box-shadow: 0 0 0 2px var(--surface-raised); }
.meus-pedidos { margin-bottom: var(--space-3); }
.meu-pedido-novo { margin: 0 -10px; padding: 10px; border-radius: var(--radius-md); background: var(--success-soft); }
.meu-pedido .botao-mini { flex: none; }
.msg-achou .botao { margin-top: var(--space-3); }
.chegou-grupo label { display: flex; align-items: center; gap: 6px; font-size: .8rem; }

/* D305 (furos): a faixa "Abrir no Chrome" das telas que recebem link do robô; a série que já foi dela; "Meus convites" na
   compra do Telegram (o "Tudo pronto" por plano e o quadrinho "Aqui tem tudo" saíram com a tela — 18/10) */
.faixa-chrome { margin: 0 0 var(--space-3); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--brand); }
.faixa-chrome p { margin: 0; font-size: .88rem; line-height: var(--lh-normal); color: var(--text-body); }
.bloqueada-fechada-dica { margin: var(--space-3) 0 0; font-size: .88rem; color: var(--text-body); text-align: center; }
.compra-convites { display: block; margin-top: 2px; font-size: .8rem; font-weight: var(--fw-semibold); color: var(--text-link); }

/* D305 (ajuda): a tela Ajuda da cliente, a ajuda sem login e a bolinha da barra */
.barra-bolinha[hidden] { display: none; }
.ajuda-titulo { margin: 0 0 var(--space-4); font-size: 1.3rem; color: var(--text-strong); }
.ajuda-rotulo { margin: 0 0 var(--space-2); font-size: .72rem; font-weight: var(--fw-semibold); color: var(--text-subtle); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.ajuda-conta { margin-bottom: var(--space-4); }
.ajuda-acabou .linha-serie-nome { color: var(--text-muted); }
.ajuda-dica { margin: var(--space-2) 0 0; font-size: .8rem; color: var(--text-muted); }
.ajuda-botao-conta { margin-top: var(--space-4); }
.ajuda-assunto, .ajuda-mais { margin-bottom: var(--space-3); border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-default); }
.ajuda-assunto > summary, .ajuda-mais > summary { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: var(--space-3) var(--space-4); list-style: none; cursor: pointer; font-weight: var(--fw-bold); font-size: 1rem; color: var(--text-strong); }
.ajuda-assunto > summary::-webkit-details-marker, .ajuda-mais > summary::-webkit-details-marker, .ajuda-sub > summary::-webkit-details-marker { display: none; }
.ajuda-assunto > summary::after, .ajuda-mais > summary::after { content: '›'; margin-left: auto; font-size: 1.4rem; color: var(--text-muted); transition: transform var(--dur-base) var(--ease-out); }
.ajuda-assunto[open] > summary::after, .ajuda-mais[open] > summary::after { transform: rotate(90deg); }
.ajuda-icone { font-size: 1.5rem; }
.ajuda-resposta { padding: 0 var(--space-4) var(--space-4); font-size: .9rem; line-height: var(--lh-normal); color: var(--text-body); }
.ajuda-resposta p { margin: 0 0 var(--space-3); }
.ajuda-resposta .botao, .ajuda-sub .botao { margin-bottom: var(--space-3); }
.ajuda-resposta .dado { margin-bottom: var(--space-2); }
.ajuda-lista { margin: 0 0 var(--space-4); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.ajuda-form { margin: var(--space-3) 0; }
.ajuda-problemas { margin: 0 0 var(--space-4); padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ajuda-problemas legend { margin-bottom: var(--space-2); font-size: .85rem; font-weight: var(--fw-semibold); color: var(--text-strong); }
.ajuda-opcao { display: flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-3); border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--border-subtle); cursor: pointer; }
.ajuda-opcao input { width: 20px; height: 20px; accent-color: var(--brand); }
.ajuda-pessoa { display: block; margin-top: var(--space-2); padding: var(--space-3) 0 0; border-top: 1px solid var(--border-subtle); text-align: center; font-weight: var(--fw-semibold); color: var(--text-link); text-decoration: none; }
.ajuda-mais { padding-bottom: var(--space-2); }
.ajuda-sub { margin: 0 var(--space-3) var(--space-2); padding: 0 var(--space-3); border-radius: var(--radius-md); background: var(--surface-raised); font-size: .9rem; color: var(--text-body); }
.ajuda-sub > summary { min-height: 48px; display: flex; align-items: center; list-style: none; cursor: pointer; font-weight: var(--fw-semibold); color: var(--text-strong); }
.ajuda-sub[open] { padding-bottom: var(--space-3); }
.ajuda-sub p { margin: 0 0 var(--space-3); }
.ajuda-pe { margin: var(--space-6) 0 var(--space-4); text-align: center; }
.ajuda-pe p { margin: 0 0 var(--space-2); color: var(--text-muted); }
.ajuda-entrar .ajuda-assunto { text-align: left; }
.ajuda-voltar { margin-top: var(--space-2); }
.ajuda-nao-consigo { display: flex; align-items: center; justify-content: center; min-height: 52px; margin-top: var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--border-default); background: var(--surface-raised); font-weight: var(--fw-bold); color: var(--text-strong); text-decoration: none; }

/* ── Série em tela cheia (D321, pedido do dono: como a tela de assistir dos apps de mini-série) ──
   resources/views/serie.php: fundo preto, o player no meio do tamanho da tela (sem rolagem), a seta de voltar no alto
   (o serie_tela_cheia.js a deixa discreta depois de 3 s sem toque) e, embaixo, o nome + as etiquetas + o "⋯".
   A seta e a faixa de baixo ficam fora da área de controle do player (o play/pause é do VTurb). */
body.corpo-tela-cheia { background: var(--ink-1000); overflow: hidden; }
.conteudo-tela-cheia { display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding: 0; margin: 0; }
.serie-tela { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--ink-1000); }
.serie-tela-video { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; container-type: size; }
.serie-tela-video .player { width: min(100%, calc((100vh - 120px) * 9 / 16)); max-width: none; margin: 0; }
@supports (width: 1cqh) { .serie-tela-video .player { width: min(100cqw, 100cqh * 9 / 16); } }
.serie-tela-video .player-desligado { aspect-ratio: 9 / 16; height: auto; margin: 0; border-radius: 0; }
.serie-voltar {
    position: absolute; z-index: 5; top: calc(12px + env(safe-area-inset-top)); left: 12px;
    display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
    background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .22); color: var(--ink-0);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .4s ease;
}
.serie-voltar svg { width: 30px; height: 30px; margin-left: -2px; }
.serie-voltar.quieta { opacity: .35; }
.serie-voltar:active { transform: scale(.94); }
.serie-tela-info {
    flex: none; width: 100%; max-width: 480px; margin: 0 auto; box-sizing: border-box;
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--ink-1000) 45%);
}
.serie-tela-nome {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    width: 100%; padding: 0; border: 0; background: none; color: var(--ink-0); text-align: left; cursor: pointer;
    font: inherit; font-weight: var(--fw-bold); font-size: 1.05rem; line-height: 1.3;
}
.serie-tela-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }
.serie-tela-etiqueta {
    display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--radius-full);
    background: rgba(255, 255, 255, .12); color: var(--ink-0); font-size: .75rem; font-weight: var(--fw-semibold);
}
.serie-tela-completa { background: var(--success-soft); color: var(--success-fg); }
.serie-tela-mais {
    margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .1); color: var(--ink-0); font-size: 1.4rem; line-height: 1;
}
.serie-detalhe-nome { margin: 0; font-size: 1.15rem; color: var(--text-strong); line-height: 1.3; }
.serie-detalhe-avisar { margin-top: var(--space-4); }
#modal-serie .serie-expira { margin: 12px 0 0; }
/* O pedido de série pelo link do grupo (/pedir — D331): a tela pura, só o campo e o print */
.pedir-grupo-icone { margin: 0 0 6px; text-align: center; font-size: 44px; line-height: 1; }
.pedir-grupo .botao { width: 100%; }
.pedir-grupo-print input[type="file"] { width: 100%; padding: 10px 0; color: var(--text-muted); font-size: 14px; }
/* A moedinha do 🧪 teste da subida por +R$ 10 (D335; D337: a PILHA DE CAPAS passando, o rascunho B do dono): no meio da borda
   direita, as capas em leque (a da frente passa — moeda_subida.js), "+N séries por R$10" e o tempo; abre a janela */
.moeda-subida { position: fixed; right: 6px; top: 50%; transform: translateY(-50%); z-index: var(--z-overlay); width: 80px; }
.moeda-subida[hidden] { display: none; }
.moeda-subida-botao {
    display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; padding: 0; border: 0; background: none;
    font-family: inherit; line-height: 1.15; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.moeda-subida-botao:active { transform: scale(.95); }
/* o X (D338): tira da tela só nesta tela */
.moeda-subida-x {
    position: absolute; top: -12px; right: -2px; z-index: 5; width: 26px; height: 26px; padding: 0; border-radius: 50%;
    border: 1px solid var(--border-strong); background: var(--surface-raised); color: var(--text-strong); font-size: 12px; line-height: 1;
    cursor: pointer; box-shadow: var(--shadow-md); -webkit-appearance: none; appearance: none;
}
.moeda-subida-pilha { position: relative; display: block; width: 72px; height: 84px; }
.moeda-subida-capa {
    position: absolute; left: 50%; top: 4px; width: 50px; height: 72px; margin-left: -25px; object-fit: cover;
    border-radius: 7px; border: 1.5px solid var(--amber-400); background: var(--surface-raised); box-shadow: var(--shadow-md);
    opacity: 0; transition: transform .45s var(--ease-out), opacity .45s var(--ease-out);
}
.moeda-subida-capa.p0 { opacity: 1; z-index: 3; transform: translateY(4px); }
.moeda-subida-capa.p1 { opacity: 1; z-index: 2; transform: translate(-11px, 2px) rotate(-12deg); }
.moeda-subida-capa.p2 { opacity: 1; z-index: 1; transform: translate(11px, 2px) rotate(12deg); }
.moeda-subida-capa.sai { opacity: 0; z-index: 4; transform: translate(-46px, 4px) rotate(-22deg); }
.moeda-subida-moeda { font-size: 34px; line-height: 1; }
.moeda-subida-faixa {
    display: block; padding: 3px 7px; border-radius: 10px; background: var(--brand); color: var(--on-brand);
    font-size: 10.5px; text-align: center; box-shadow: var(--shadow-md); animation: moeda-pulsar 2.4s ease-in-out infinite;
}
.moeda-subida-faixa b { display: block; font-size: 11.5px; font-weight: var(--fw-bold); }
.moeda-subida-tempo { padding: 1px 6px; border-radius: 8px; background: var(--surface-raised); font-size: 10.5px; font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums; color: var(--amber-400); }
.moeda-subida-selo { margin: 0 0 var(--space-2); font-size: .85rem; color: var(--amber-400); }
.moeda-subida-selo b { font-variant-numeric: tabular-nums; }
.moeda-subida-caixa .botao { width: 100%; margin-top: var(--space-3); }
.moeda-subida-cartao { display: block; margin-top: var(--space-2); font-size: .85rem; color: var(--text-muted); }
/* o Pix DENTRO DA JANELA (D340): o código, os 3 passos e "Esperando o pagamento…"; caiu, "🎉 Catálogo liberado!" */
.moeda-subida-erro { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--danger-soft);
    color: var(--danger-fg); font-size: .9rem; }
.moeda-subida-erro[hidden], .moeda-subida-pix[hidden], .moeda-subida-pronto[hidden], .moeda-subida-caixa .janela-fechar[hidden] { display: none; }
.moeda-subida-pix-valor { margin: var(--space-2) 0 0; font-size: 1rem; color: var(--text-strong); }
.moeda-subida-caixa .botao.copiado { background: var(--green-500); box-shadow: none; }
.moeda-subida-codigo { display: block; width: 100%; margin-top: var(--space-2); padding: 8px 10px; border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; }
.moeda-subida-passos { margin: var(--space-3) 0 0; padding-left: 1.4em; font-size: .9rem; line-height: 1.55; text-align: left; color: var(--text-muted); }
.moeda-subida-passos b { color: var(--text-strong); }
.moeda-subida-esperando { display: flex; align-items: center; justify-content: center; gap: 8px; margin: var(--space-3) 0 0; font-size: .9rem;
    color: var(--warning-fg); }
.moeda-subida-ponto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--amber-400); animation: moeda-piscar 1.2s ease-in-out infinite; }
.moeda-subida-festa { margin: 0 0 var(--space-2); font-size: 44px; line-height: 1; text-align: center; }
.moeda-subida-caixa.com-pix [data-relogio-fim], .moeda-subida-caixa.liberado [data-relogio-fim] { display: none; }
@keyframes moeda-piscar { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .moeda-subida-ponto { animation: none; } }
@keyframes moeda-pulsar { 0%, 100% { box-shadow: var(--shadow-md); } 50% { box-shadow: 0 0 0 6px var(--brand-soft), var(--shadow-md); } }
@media (prefers-reduced-motion: reduce) { .moeda-subida-faixa { animation: none; } .moeda-subida-capa { transition: none; } }