/**
 * Design do painel. Tokens e componentes copiados dos mockups da Claude Designer
 * (NativeForms Telas / Editor), com uma diferença: lá tudo é style inline, aqui
 * virou classe. Inline em mockup é ótimo; em painel de verdade, a mesma borda
 * repetida em quarenta lugares é onde o design começa a divergir de si mesmo.
 *
 * Fonte Geist, sidebar de 237px, acento verde. O escuro é o padrão do desenho —
 * o claro veio junto e os dois são mantidos.
 */

/* ─────────────────────────── tokens ─────────────────────────── */
:root,
html[data-theme='dark'] {
  --bg: #08080a; --side: #0a0a0c; --card: #0d0d10; --well: #08080a;
  --tile: #141418; --tile2: #101015;
  --seg: #26262c; --line: #1e1e24; --line2: #1a1a20; --line3: #2e2e36; --line4: #454550;
  --t1: #f1f1f5; --t2: #c4c4cc; --t3: #a8a8b2; --t4: #8e8e97; --t5: #5c5c66;
  --inv-bg: #f1f1f5; --inv-fg: #08080a;
  --accent: #9fd4a8; --accent-fg: #08120c;
  --accent-weak: rgba(159, 212, 168, .12); --accent-line: rgba(159, 212, 168, .28);
  --warn: #f5b544; --warn-weak: rgba(245, 181, 68, .1); --warn-line: rgba(245, 181, 68, .26);
  --danger: #e5484d; --danger-t: #f0787c; --danger-line: rgba(229, 72, 77, .5);
  --danger-weak: rgba(229, 72, 77, .1);
  --code: #0c0c0e; --code-t: #e4e4e8;
}

html[data-theme='light'] {
  --bg: #f4f4f6; --side: #ffffff; --card: #ffffff; --well: #fafafa;
  --tile: #f0f0f2; --tile2: #fafafa;
  --seg: #e4e4e8; --line: #e8e8ea; --line2: #f0f0f2; --line3: #d6d6dc; --line4: #b4b4c0;
  --t1: #0a0a0c; --t2: #3a3a42; --t3: #52525b; --t4: #6d6d6d; --t5: #b4b4c0;
  --inv-bg: #0c0c0e; --inv-fg: #ffffff;
  --accent: #067446; --accent-fg: #ffffff;
  --accent-weak: rgba(6, 116, 70, .08); --accent-line: rgba(6, 116, 70, .24);
  --warn: #8a5a06; --warn-weak: rgba(138, 90, 6, .07); --warn-line: rgba(138, 90, 6, .22);
  --danger: #b91c1c; --danger-t: #b91c1c; --danger-line: rgba(185, 28, 28, .3);
  --danger-weak: rgba(185, 28, 28, .05);
  --code: #0c0c0e; --code-t: #e4e4e8;
}

* { box-sizing: border-box }

body {
  margin: 0; background: var(--bg); color: var(--t1);
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--t1); text-decoration: none }
svg { display: block }
.mono { font-family: 'Geist Mono', ui-monospace, monospace }
[hidden] { display: none !important }

/* ─────────────────────────── layout ─────────────────────────── */
/* A moldura não rola. Só o conteúdo.
   Antes a página inteira era um scroll só: com 25 pedidos na lista, a barra
   lateral, o título e os números do topo subiam junto e sumiam — e para trocar de
   tela era preciso voltar rolando até em cima. É o padrão que o Shopify usa nas
   listas dele: lateral e cabeçalho parados, a lista rolando por baixo com o
   cabeçalho da tabela grudado. */
/* 100dvh e não 100vh: no celular a barra de endereço some e volta, e 100vh
   conta ela sempre — a tela nasce mais alta que a tela. */
.app { display: flex; height: 100dvh; overflow: hidden }

.side {
  flex: none; width: 237px; background: var(--side); overflow-y: auto;
  border-right: 1px solid var(--line); display: flex; flex-direction: column;
}
.side-topo { display: flex; align-items: center; gap: 11px; padding: 20px 20px 18px }
/* A caixinha da marca é SEMPRE branca, nos dois temas.
   O azul do símbolo é #0d1427: sobre o fundo escuro do painel ele praticamente
   some, e a caixa que invertia com o tema fazia justamente isso no tema claro.
   Branco fixo mantém a marca idêntica em qualquer fundo — que é o ponto de ter
   uma marca. */
.side-marca {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  background: #fff; border: 1px solid var(--line);
  display: grid; place-items: center; overflow: hidden;
}
.side-marca img { display: block; width: 80%; height: auto }
.side-nome { font-size: 14.5px; font-weight: 700; letter-spacing: -.02em }
.side-sub { font-size: 11px; color: var(--t4); margin-top: 1px; white-space: nowrap }
.side-rotulo {
  font-size: 10px; font-weight: 600; letter-spacing: .1em;
  color: var(--t4); padding: 0 20px 9px;
}
.side-nav { padding: 0 10px; display: flex; flex-direction: column; gap: 2px }
.side-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px;
  border-radius: 8px; color: var(--t3); cursor: pointer; transition: .14s;
  font-size: 13px; font-weight: 500; border: 0; background: transparent;
  font-family: inherit; width: 100%; text-align: left;
}
.side-item:hover { background: var(--tile); color: var(--t1) }
.side-item.on { background: var(--tile); color: var(--t1) }
.side-item .conta { margin-left: auto; font-size: 11px; color: var(--t4) }
.side-rodape {
  margin-top: auto; padding: 12px 12px 14px; border-top: 1px solid var(--line2);
  position: relative;
}
.side-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px }

/* ─────────────── faixa de cima, só no celular ─────────────── */
/*
 * Marca, nome da tela e a bolinha da conta. Nasce escondida: acima de 720px quem
 * faz esse papel é a barra lateral, e o nome da tela é o <h1> da própria seção.
 */
.topo-fone {
  display: none; position: sticky; top: 0; z-index: 25;
  align-items: center; gap: 11px; padding: 11px 16px;
  background: var(--side); border-bottom: 1px solid var(--line);
}
.topo-fone .tit {
  flex: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 700;
  letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topo-fone .av {
  flex: none; width: 30px; height: 30px; border-radius: 50%; padding: 0; border: 0;
  background: var(--inv-bg); color: var(--inv-fg); font: inherit; font-size: 12.5px;
  font-weight: 700; text-transform: uppercase; cursor: pointer; display: grid; place-items: center;
}
/* O tema mora no rodapé da barra lateral, que no celular não existe. Então ele
   ganha uma linha no menu da conta — e só lá. */
.usr-item.so-fone, .side-item.so-fone { display: none }

/* O bloco do usuário: e-mail, plano e a seta que abre o menu. */
.usr-bloco {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 9px; border-radius: 9px; border: 0; background: transparent;
  font: inherit; color: var(--t3); cursor: pointer; transition: .14s;
}
.usr-bloco:hover, .usr-bloco[aria-expanded="true"] { background: var(--tile); color: var(--t1) }
.usr-inicial {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--inv-bg); color: var(--inv-fg);
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase;
}
.usr-txt { flex: 1; min-width: 0 }
.usr-txt .mail {
  display: block; font-size: 12px; font-weight: 500; color: var(--t2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.usr-txt .sub { display: block; font-size: 10.5px; color: var(--t4); margin-top: 1px }
.usr-seta { flex: none; color: var(--t4); transition: transform .14s }
.usr-bloco[aria-expanded="true"] .usr-seta { transform: rotate(180deg) }

.usr-menu {
  position: absolute; left: 12px; right: 12px; bottom: calc(100% + 6px); z-index: 40;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .45); padding: 5px;
}
.usr-topo { padding: 11px 11px 9px }
.usr-topo .mail {
  font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.usr-topo .plano { font-size: 11px; color: var(--t4); margin-top: 3px }
.usr-risco { height: 1px; background: var(--line2); margin: 4px 3px }
.usr-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: 7px; border: 0; background: transparent;
  font: inherit; font-size: 13px; color: var(--t2); cursor: pointer; transition: .14s;
  text-decoration: none;
}
.usr-item:hover { background: var(--tile); color: var(--t1) }
.usr-item svg { flex: none }
.usr-item span { flex: 1; min-width: 0 }
.usr-item i { flex: none; display: block; color: var(--t4) }
.usr-item.perigo { color: var(--danger-t) }

.usr-tema {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px; padding: 0 3px;
}
.usr-tema span { font-size: 11px; color: var(--t4) }
.usr-tema button {
  flex: none; width: 28px; height: 28px; border-radius: 8px; padding: 0;
  border: 1px solid var(--line3); background: transparent; color: var(--t3);
  display: grid; place-items: center; cursor: pointer; transition: .14s;
}
.usr-tema button:hover { border-color: var(--line4); color: var(--t1) }
.usr-tema .sol { display: none }
[data-theme="light"] .usr-tema .lua { display: none }
[data-theme="light"] .usr-tema .sol { display: block }

.principal { flex: 1; min-width: 0; height: 100dvh; display: flex; flex-direction: column }
/* Cada tela é uma coluna: cabeçalho parado em cima, corpo rolando embaixo. */
.principal > [data-tela] { flex: 1; min-height: 0; display: flex; flex-direction: column }
/* Precisa vencer o display:flex acima — a regra do navegador para [hidden] tem
   especificidade menor e a tela escondida voltaria a aparecer. */
.principal > [data-tela][hidden] { display: none }
.cabeca { flex: none }
.corpo { --corpo-topo: 24px; flex: 1; min-height: 0; overflow-y: auto }
.cabeca { padding: 26px 30px 22px; border-bottom: 1px solid var(--line) }
.cabeca h1 { font-size: 23px; font-weight: 700; letter-spacing: -.03em; margin: 0 }
.cabeca p { font-size: 13.5px; color: var(--t3); line-height: 1.6; margin: 6px 0 0; max-width: 640px }
.cabeca-linha { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap }
.corpo { padding: 24px 30px 60px }

/* ─────────────────────────── componentes ─────────────────────────── */
.cartao { background: var(--card); border: 1px solid var(--line); border-radius: 12px }
.secao { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; color: var(--t4) }

.btn {
  border-radius: 7px; padding: 11px 19px; font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; white-space: nowrap; transition: .14s;
  background: var(--accent); border: none; color: var(--accent-fg);
}
.btn:hover { filter: brightness(1.08) }
.btn:disabled { opacity: .55; cursor: default; filter: none }
.btn.fantasma {
  background: transparent; border: 1px solid var(--line3);
  color: var(--t3); font-weight: 500; padding: 10px 16px;
}
.btn.fantasma:hover { background: var(--tile); border-color: var(--line4); filter: none }
.btn.perigo { background: transparent; border: 1px solid var(--danger-line); color: var(--danger-t) }
.btn.perigo:hover { background: var(--danger-weak, transparent); filter: none }

.campo { display: block; margin-bottom: 14px }
.campo > span {
  display: block; font-size: 12.5px; font-weight: 500; color: var(--t2); margin-bottom: 7px;
}
.entrada {
  width: 100%; background: var(--tile); border: 1px solid var(--line3);
  border-radius: 7px; padding: 11px 13px; font: inherit; font-size: 13.5px;
  color: var(--t1); outline: none; transition: border-color .14s, box-shadow .14s;
}
.entrada:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-weak) }
.entrada::placeholder { color: var(--t5) }

.selo {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600;
  border-radius: 99px; padding: 5px 11px; white-space: nowrap;
  color: var(--accent); background: var(--accent-weak); border: 1px solid var(--accent-line);
}
.selo > i { width: 5px; height: 5px; border-radius: 50%; background: currentColor }
.selo.apagado { color: var(--t4); background: var(--tile); border-color: var(--line3) }
.selo.alerta { color: var(--warn); background: var(--warn-weak); border-color: var(--warn-line) }

.aviso {
  border-radius: 10px; padding: 13px 15px; font-size: 13px; line-height: 1.55;
  color: var(--danger-t); background: rgba(229, 72, 77, .08); border: 1px solid var(--danger-line);
}
.aviso.alerta { color: var(--warn); background: var(--warn-weak); border-color: var(--warn-line) }

.codigo {
  background: var(--code); color: var(--code-t); border-radius: 8px; padding: 13px 15px;
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12.5px; line-height: 1.7;
  overflow-x: auto; white-space: pre; border: 1px solid var(--line);
}

/* ─────────────── lista de formulários ─────────────── */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px }
.form-cartao {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px 16px; cursor: pointer; transition: .14s; display: flex;
  flex-direction: column; gap: 12px; text-align: left; font: inherit; color: inherit;
}
.form-cartao:hover { border-color: var(--line4) }
.form-cartao .titulo { font-size: 15px; font-weight: 600; letter-spacing: -.015em }
.form-cartao .slug { font-size: 11.5px; color: var(--t4); margin-top: 3px }
.form-cartao .numeros { display: flex; gap: 20px; padding-top: 12px; border-top: 1px solid var(--line2) }
.form-cartao .numeros b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em }
.form-cartao .numeros span { font-size: 11px; color: var(--t4) }

.vazio { text-align: center; padding: 64px 24px; color: var(--t3) }
.vazio h2 { font-size: 17px; font-weight: 600; color: var(--t1); margin: 0 0 8px }
.vazio p { font-size: 13.5px; line-height: 1.6; margin: 0 auto 22px; max-width: 380px }

/* ─────────────── entrar ─────────────── */
/* ─────────────── telas de acesso ─────────────── */
/* Sete estados num cartão só: entrar, criar conta, confirmar por código, esqueci a
   senha, aviso neutro, nova senha e pronto. Um cartão e não sete páginas porque a
   pessoa está atravessando UM assunto — e porque o que ela digitou não pode se
   perder ao mudar de passo. */
/* Duas colunas no desktop: o argumento à esquerda, o formulário à direita.
   Um cartão sozinho no meio de uma tela de 1900px é muito vazio para a primeira
   coisa que um cliente novo vê do produto. No celular sobra só o formulário — ali
   a pessoa quer entrar, não ler. */
.entrar {
  min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 60px; padding: 40px 48px;
}
.ac-lado { max-width: 460px; justify-self: end; align-self: center }
.ac-lado .ac-marca { text-decoration: none; color: inherit; margin-bottom: 40px }
.ac-titulo {
  font-size: 34px; font-weight: 700; letter-spacing: -.035em; line-height: 1.15;
  margin: 0; color: var(--t1);
}
.ac-texto { font-size: 15px; color: var(--t3); line-height: 1.6; margin: 16px 0 0 }
.ac-provas { list-style: none; margin: 30px 0 0; padding: 0 }
.ac-provas li {
  position: relative; padding: 0 0 0 24px; margin-bottom: 13px;
  font-size: 13.5px; color: var(--t2); line-height: 1.55;
}
.ac-provas li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent);
}
.ac-pe-lado { font-size: 11.5px; color: var(--t5); margin: 44px 0 0 }

@media (max-width: 900px) {
  .entrar {
    grid-template-columns: 1fr; gap: 0; padding: 34px 20px 40px;
    align-content: start; justify-items: center;
  }
  /* No celular a coluna de argumento sai: quem abre o painel do telefone quer
     entrar, e rolar um texto de venda antes do campo de e-mail é atrito. */
  .ac-lado { display: none }
}
.ac-marca { display: flex; align-items: center; gap: 11px }
.ac-marca span { font-size: 15px; font-weight: 700; letter-spacing: -.02em }
.ac-marca-q {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  background: #fff; border: 1px solid var(--line);
  display: grid; place-items: center; overflow: hidden;
}
.ac-marca-q img { display: block; width: 80%; height: auto }

.ac-coluna { width: 100%; max-width: 404px; justify-self: start }
/* O rodapé já está na coluna do lado. Repetir embaixo do cartão é a mesma frase
   duas vezes na mesma tela. */
@media (min-width: 901px) { .ac-coluna .ac-pe { display: none } }

.ac-cartao {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 26px 24px 24px;
}
.ac-cartao h1 { font-size: 20px; font-weight: 700; letter-spacing: -.025em; margin: 0 }
.ac-sub { font-size: 13px; color: var(--t3); line-height: 1.6; margin: 6px 0 20px }
.ac-sub .forte { color: var(--t1) }
.ac-email-eco { font-size: 13px; font-weight: 500; color: var(--t1); margin: -14px 0 0 }
.ac-dica { font-size: 11.5px; color: var(--t3); line-height: 1.55; margin: 7px 0 0 }
.ac-pe { text-align: center; font-size: 11.5px; color: var(--t4); line-height: 1.6; margin-top: 18px }

.ac-rot { display: block; font-size: 12px; font-weight: 600; color: var(--t2); margin-bottom: 7px }
.ac-rot-linha {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-top: 15px;
}
.ac-rot-linha .ac-rot { margin-bottom: 7px }

.ac-campo {
  width: 100%; background: var(--card); border: 1px solid var(--line3); border-radius: 9px;
  padding: 12px 13px; font: inherit; font-size: 14px; color: var(--t1); min-height: 46px;
}
.ac-campo::placeholder { color: var(--t4) }
.ac-campo:hover { border-color: var(--line4) }
.ac-campo:focus { outline: 0; border-color: var(--t4) }
.ac-campo.ruim { border-color: var(--danger) }

/* O olho fica DENTRO do campo: senha errada quase sempre é senha digitada às cegas,
   e mandar a pessoa procurar o botão em outro lugar não resolve isso. */
.ac-campo-olho { position: relative }
.ac-campo-olho .ac-campo { padding-right: 44px }
.ac-olho {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 0; color: var(--t4); cursor: pointer; padding: 0;
}
.ac-olho:hover { color: var(--t2) }
.ac-olho svg { width: 17px; height: 17px }

.ac-erro-campo { display: flex; align-items: flex-start; gap: 7px; margin-top: 7px;
  font-size: 12px; color: var(--danger-t); line-height: 1.5 }

/* Faixa de erro geral (o que aconteceu com a tentativa inteira) — separada do erro
   de campo (o que está errado num campo). Misturar os dois faz a pessoa procurar no
   lugar errado. */
.ac-faixa {
  display: flex; align-items: flex-start; gap: 10px; border-radius: 9px;
  padding: 12px 14px; margin-bottom: 16px; font-size: 12.5px; color: var(--t2); line-height: 1.6;
}
.ac-faixa b { font-weight: 600; color: var(--t1) }
.ac-faixa .ic { flex: none; margin-top: 1px; display: block }
.ac-faixa .ic svg { width: 15px; height: 15px }
.ac-faixa.ruim { background: var(--danger-weak); border: 1px solid var(--danger-line); }
.ac-faixa.ruim .ic { color: var(--danger-t) }
.ac-faixa.alerta { background: var(--warn-weak); border: 1px solid var(--warn-line); margin-bottom: 12px }
.ac-faixa.alerta .ic { color: var(--warn) }

.ac-prim {
  width: 100%; margin-top: 20px; background: var(--inv-bg); border: 0; border-radius: 9px;
  padding: 13px; font: inherit; font-size: 14px; font-weight: 600; color: var(--inv-fg);
  cursor: pointer; min-height: 48px; display: flex; align-items: center;
  justify-content: center; gap: 9px; transition: filter .14s;
}
.ac-prim:hover:not(:disabled) { filter: brightness(1.25) }
.ac-prim:disabled { opacity: .55; cursor: not-allowed }
.ac-prim .roda { width: 16px; height: 16px; animation: ac-gira .8s linear infinite; display: none }
.ac-prim.ocupado .roda { display: block }
@keyframes ac-gira { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .ac-prim .roda { animation: none } }

.ac-lnk {
  background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--t2); cursor: pointer; border-bottom: 1px solid var(--line3);
}
.ac-lnk:hover { color: var(--t1); border-bottom-color: var(--t4) }
.ac-rot-linha .ac-lnk, .ac-reenvio .ac-lnk { font-size: 12.5px }

.ac-rodape {
  text-align: center; font-size: 13px; color: var(--t3); line-height: 1.6;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line2);
}
.ac-rodape .menor { font-size: 11.5px }
.ac-motivo { text-align: center; font-size: 11.5px; color: var(--t3); margin: 9px 0 0 }
.ac-reenvio { display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 15px; font-size: 12.5px; color: var(--t3) }

/* Seis campos e não um: além de ler melhor, o comprovante de "onde eu parei" fica
   visível — e colar o código inteiro continua funcionando, distribuído por JS. */
.ac-digitos { display: flex; gap: 8px }
.ac-dig {
  width: 100%; min-width: 0; height: 56px; border: 1px solid var(--line3); border-radius: 9px;
  background: var(--card); color: var(--t1); font: inherit; font-size: 20px; font-weight: 600;
  text-align: center; padding: 0;
}
.ac-dig:focus { outline: 0; border-color: var(--inv-bg); border-width: 1.5px }
.ac-digitos.ruim .ac-dig { border-color: var(--danger); color: var(--danger-t) }
.ac-digitos.vencido .ac-dig { background: var(--tile); color: var(--t5); border-color: var(--line) }

.ac-regras { list-style: none; margin: 11px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.ac-regras li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--t3) }
.ac-regras li .marca {
  flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line3); color: transparent;
}
.ac-regras li .marca svg { width: 10px; height: 10px }
.ac-regras li.ok { color: var(--t2) }
.ac-regras li.ok .marca { background: var(--accent); border-color: var(--accent); color: var(--accent-fg) }

.ac-termos { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; cursor: pointer }
.ac-termos input { position: absolute; opacity: 0; width: 0; height: 0 }
.ac-termos .caixa {
  flex: none; width: 18px; height: 18px; border-radius: 5px; margin-top: 1px;
  display: grid; place-items: center; background: var(--card); border: 1px solid var(--line4);
  color: transparent; transition: .14s;
}
.ac-termos .caixa svg { width: 11px; height: 11px }
.ac-termos input:checked + .caixa {
  background: var(--inv-bg); border-color: var(--inv-bg); color: var(--inv-fg);
}
.ac-termos input:focus-visible + .caixa { outline: 2px solid var(--t4); outline-offset: 2px }
.ac-termos > span:last-child { font-size: 12.5px; color: var(--t2); line-height: 1.6 }
.ac-termos a { color: var(--t2); border-bottom: 1px solid var(--line3); text-decoration: none }
.ac-termos a:hover { color: var(--t1) }

.ac-icone {
  width: 46px; height: 46px; border-radius: 12px; background: var(--tile);
  display: grid; place-items: center; color: var(--t2); margin-bottom: 15px;
}
.ac-icone svg { width: 21px; height: 21px }
.ac-icone.ok {
  width: 48px; height: 48px; border-radius: 50%; background: var(--accent-weak);
  border: 1px solid var(--accent-line); color: var(--accent);
}
.ac-icone.ok svg { width: 23px; height: 23px }

@media (max-width: 420px) {
  .entrar { padding: 22px 14px 30px }
  .ac-digitos { gap: 6px }
  .ac-dig { height: 50px; font-size: 18px }
}

/* ─────────────── responsivo ─────────────── */
/* O desenho veio com min-width:1320px. Isso vale pro editor, que é dois painéis
   lado a lado — mas não pra listar formulários, que é o que se abre do celular
   pra ver se vendeu. Abaixo de 1080 a sidebar vira uma faixa no topo. */
@media (max-width: 1080px) {
  .app { flex-direction: column; height: auto; overflow: visible }
  .side {
    width: 100%; flex-direction: row; align-items: center; gap: 8px;
    border-right: 0; border-bottom: 1px solid var(--line); padding: 0 14px;
    overflow: visible;
  }
  .side-topo { padding: 12px 6px 12px 0 }
  .side-sub, .side-rotulo { display: none }
  /*
   * Quem rola é a NAVEGAÇÃO, não a faixa inteira.
   *
   * A faixa era `overflow-x:auto` e o rodapé era empurrado por `margin-left:auto`.
   * Numa faixa que transborda, essa margem joga o rodapé para FORA da área
   * rolável: em 390px o botão de conta e o de tema ficavam 75px fora da tela —
   * e era essa a razão de o painel inteiro andar para o lado, em toda tela.
   * Agora a faixa não rola; rola a lista de destinos dentro dela, e o rodapé
   * fica ancorado onde dá para alcançar.
   */
  .side-nav {
    flex: 1; min-width: 0; flex-direction: row; padding: 0; gap: 4px;
    overflow-x: auto; scrollbar-width: none;
  }
  .side-nav::-webkit-scrollbar { display: none }
  .side-item { padding: 8px 12px; white-space: nowrap }
  /* O rodapé NÃO some: com Conta fora da navegação, ele é o único caminho até a
     conta e até o botão de sair. Vira só a bolinha, encostada à direita. */
  .side-rodape {
    flex: none; margin: 0; padding: 0; border-top: 0;
    display: flex; align-items: center; gap: 6px;
  }
  .usr-tema { margin-top: 0 }
  .usr-bloco { width: auto; padding: 6px }
  .usr-txt, .usr-seta, .usr-tema span { display: none }
  .usr-menu {
    position: fixed; left: auto; right: 12px; bottom: auto; width: 236px;
  }
  .cabeca, .corpo { padding-left: 18px; padding-right: 18px }
  .principal { height: auto; display: block }
  .principal > [data-tela] { display: block }
  .corpo { overflow: visible; min-height: 0 }
}

/* ─────────────── celular ─────────────── */
/*
 * Abaixo de 720 a faixa DESCE e vira barra de destinos.
 *
 * São três destinos. Menu recolhido esconderia três coisas atrás de um toque
 * para economizar um espaço que sobra — e o painel é aberto em pé, com uma mão,
 * onde a parte de cima da tela é justamente a mais longe do polegar.
 *
 * A barra é fixa porque abaixo de 1080 a página volta ao fluxo normal e rola
 * inteira: encostada no fim do documento, ela só apareceria depois do último
 * pedido da lista.
 */
@media (max-width: 720px) {
  .topo-fone { display: flex }
  .side {
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; gap: 0; align-items: stretch;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border-bottom: 0; border-top: 1px solid var(--line);
  }
  .side-topo { display: none }
  /*
   * O rodapé fica em `contents`, e não em `none`.
   *
   * O MENU DA CONTA mora dentro dele — e `display:none` no pai apaga o filho
   * inteiro, por mais que o filho seja `position:fixed` e tenha regra própria.
   * Escondendo o rodapé, o celular ficava sem caminho nenhum para Conta, plano,
   * integração, tema e SAIR: o botão abria um menu que não existia.
   *
   * `contents` faz o rodapé sumir como caixa e deixa os filhos no lugar. Os dois
   * que têm corpo somem um a um; o menu, que é fixo, continua abrindo.
   */
  .side-rodape { display: contents }
  .usr-bloco, .usr-tema { display: none }
  .side-nav { gap: 0; overflow: visible }
  .side-item {
    flex: 1; flex-direction: column; justify-content: center; gap: 4px;
    padding: 7px 4px 5px; font-size: 10.5px; font-weight: 500; text-align: center;
    white-space: normal; position: relative; border-radius: 9px;
  }
  .side-item > span { flex: none }
  .side-item .conta { display: none }
  .side-item:hover, .side-item.on { background: transparent; color: var(--t1) }
  .side-item.on::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 20px; height: 2px; border-radius: 99px; background: var(--accent);
  }
  /*
   * O espaço embaixo é O DA BARRA, e mais nada.
   *
   * Eram 142px de vazio: os 60px de rodapé do corpo, que existem no
   * computador para a lista não terminar colada no fim da janela, somados aos
   * 82px reservados para a barra. No celular a tela acaba no funil — e vazio
   * no fim de uma tela curta parece coisa que faltou carregar.
   */
  .corpo { padding-bottom: 14px }
  .principal { padding-bottom: calc(68px + env(safe-area-inset-bottom)) }

  /* Ícone de 16px foi desenhado para uma lista lateral de 237px, lida de perto.
     Na barra de baixo, tocada com o polegar, ele fica pequeno. */
  .side-item svg { width: 20px; height: 20px }
  /* O título da tela já está na faixa de cima. Repetido aqui, é a mesma palavra
     duas vezes com vinte pixels entre uma e outra. */
  .cabeca h1 { display: none }
  .cabeca { padding-top: 16px }
  .cabeca, .corpo { padding-left: 16px; padding-right: 16px }
  /*
   * O menu da conta SOBE da barra de baixo, que é de onde ele foi aberto.
   * Menu que aparece longe do dedo que o abriu parece de outra coisa.
   */
  .usr-menu {
    position: fixed; top: auto; left: 12px; right: 12px; width: auto;
    bottom: calc(env(safe-area-inset-bottom) + 64px);
  }
  .usr-item.so-fone, .side-item.so-fone { display: flex }
  .side-item.so-fone { flex-direction: column }
}

/* ─────────────── Resultados ─────────────── */
.ed-periodos { display: flex; gap: 4px; background: var(--tile); border-radius: 8px; padding: 4px }
.ed-periodos button {
  border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--t3); padding: 7px 13px; border-radius: 6px; cursor: pointer; transition: .14s;
}
.ed-periodos button:hover { color: var(--t1) }
.ed-periodos button.on { background: var(--card); color: var(--t1); font-weight: 600 }

/* Cinco agora, com a abertura na frente. A divisória é por POSIÇÃO na linha, e
   não por "não ser o primeiro": quebrando em três colunas, o quarto começa uma
   linha nova e ficava com um risco solto à esquerda. */
.res-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; padding: 20px 22px; margin-bottom: 14px }
.res-kpis > div { padding-left: 20px; border-left: 1px solid var(--line2) }
.res-kpis > div:nth-child(5n + 1) { padding-left: 0; border-left: 0 }
.res-kpis .rot { font-size: 12.5px; color: var(--t3); min-height: 32px }
.res-kpis .num { font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1; margin-top: 9px }
.res-kpis .nota { font-size: 11.5px; color: var(--t4); line-height: 1.5; margin-top: 10px }
@media (max-width: 1220px) {
  .res-kpis { grid-template-columns: repeat(3, 1fr); gap: 18px 20px }
  .res-kpis > div:nth-child(3n + 1) { padding-left: 0; border-left: 0 }
  .res-kpis > div:nth-child(5n + 1):not(:nth-child(3n + 1)) { padding-left: 20px; border-left: 1px solid var(--line2) }
}
@media (max-width: 900px) {
  .res-kpis { grid-template-columns: repeat(2, 1fr); gap: 18px }
  .res-kpis > div { padding-left: 0; border-left: 0 }
}

.res-grade { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start }
@media (max-width: 1080px) { .res-grade { grid-template-columns: 1fr } }

.res-tabela { overflow: visible }
.res-tabela > :last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px }
.res-tabela-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px 15px }
.cartao .titulo { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em }
.cartao .sub { font-size: 12.5px; color: var(--t4); line-height: 1.55; margin-top: 3px }
/* Grudado no topo da rolagem: passar do vigésimo pedido sem saber mais qual coluna
   é o valor e qual é a data é o que torna uma lista longa inútil. */
.res-cabecalho {
  position: sticky; top: calc(-1 * var(--corpo-topo, 0px)); z-index: 5;
  display: flex; align-items: center; gap: 14px; padding: 10px 22px; background: var(--well);
  border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2);
  font-size: 10px; font-weight: 600; letter-spacing: .08em; color: var(--t4);
}
.res-linha { display: flex; align-items: center; gap: 14px; padding: 13px 22px; transition: background .14s }
.res-linha + .res-linha { border-top: 1px solid var(--line2) }
.res-linha:hover { background: var(--tile2) }
.res-linha .prod { flex: 1; min-width: 0; font-size: 12.5px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
/*
 * As colunas viraram CLASSE.
 *
 * Eram estilo inline no template do JS e no cabeçalho do HTML — e estilo inline
 * ganha da folha, então nenhuma media query conseguia desmontar a tabela no
 * celular. Era isso que travava a tela de Resultados em 695px de largura numa
 * tela de 390.
 */
.res-num { flex: none; width: 118px; min-width: 0; overflow: hidden; text-overflow: ellipsis }
.res-item { flex: none; width: 150px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.res-val { flex: none; width: 96px; text-align: right }
.res-quando { flex: none; width: 118px; text-align: right }
.res-cabecalho .prod { flex: 1; min-width: 0 }

/* O seletor de formulário e o texto da zona de risco tinham largura mínima
   cravada no HTML — 180px e 260px. Somadas às cinco colunas da tabela, eram elas
   que davam à tela 695px de piso num celular de 390. Aqui a mínima existe, mas
   cede quando não cabe. */
.res-form { width: auto; min-width: 180px; max-width: 100% }
@media (max-width: 720px) { .res-form { width: 100%; min-width: 0 } }
.ct-meio { flex: 1; min-width: 260px }
@media (max-width: 560px) { .ct-meio { min-width: 0 } }
.res-linha .res-num { font-size: 12px; color: var(--t2) }
.res-linha .res-item { font-size: 12.5px; color: var(--t3) }
.res-linha .res-val { font-size: 12.5px; font-weight: 600 }
.res-linha .res-quando { font-size: 11.5px; color: var(--t4) }


.res-barras { display: flex; flex-direction: column; gap: 13px }
.res-barra .topo { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px }
.res-barra .topo .rot { flex: 1; min-width: 0; font-size: 12.5px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.res-barra .trilho { height: 5px; border-radius: 3px; background: var(--line2); overflow: hidden }
.res-barra .trilho > i { display: block; height: 100%; border-radius: 3px; background: var(--accent) }
.res-site { display: flex; align-items: center; gap: 14px; padding: 11px 0 }
.res-site + .res-site { border-top: 1px solid var(--line2) }

.ed-periodos button svg { display: block }
.res-datas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px }
.res-datas label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--t3) }
.res-datas .entrada { width: auto; padding: 8px 11px; font-size: 12.5px; color-scheme: dark }
html[data-theme='light'] .res-datas .entrada { color-scheme: light }

/* ─────────────── linha recusada e ficha do pedido ─────────────── */
/* Recusado mora na MESMA lista dos que deram certo: é ali que o lojista olha, e é
   justamente ele que precisa de ação — a venda não existe em lugar nenhum. */
.res-linha.recusado { background: var(--danger-weak) }
.marca-recusado {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--danger-t);
}
.res-linha { cursor: pointer }
.res-linha:hover { background: var(--tile) }
.res-linha.recusado:hover { filter: brightness(1.15) }
.res-linha:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px }
.res-linha .prod i { display: block; font-size: 11.5px; font-style: normal; color: var(--t4); margin-top: 2px }

/* ─────────────── o pedido como cartão, no celular ─────────────── */
/*
 * Cinco colunas de largura fixa não cabem em 390px — e cortar coluna é decidir
 * por ele qual informação ele não vai ter. Aqui a linha vira três: quem e quanto
 * em cima, o que embaixo, e o número com a hora no pé. Nada é escondido.
 *
 * O cabeçalho da tabela sai junto: rótulo de coluna sem coluna é ruído.
 */
@media (max-width: 720px) {
  .res-cabecalho { display: none }
  .res-linha {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 12px; align-items: baseline; padding: 13px 16px;
  }
  .res-linha .prod {
    grid-column: 1; grid-row: 1; font-size: 13.5px; font-weight: 600; color: var(--t1);
  }
  .res-linha .prod i { display: none }
  .res-linha .res-val {
    grid-column: 2; grid-row: 1; width: auto; font-size: 14px; font-weight: 700;
    letter-spacing: -.02em;
  }
  .res-linha .res-item { grid-column: 1 / -1; grid-row: 2; width: auto; font-size: 12px }
  .res-linha .res-num { grid-column: 1; grid-row: 3; width: auto; font-size: 11px }
  .res-linha .res-quando { grid-column: 2; grid-row: 3; width: auto; font-size: 11px }
}

.ped-fundo { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40 }
.ped-ficha {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); z-index: 41;
  background: var(--card); border-left: 1px solid var(--line); padding: 20px;
  overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
}
.ped-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px }
.ped-titulo { font-size: 15px; font-weight: 700; letter-spacing: -.01em }
.ped-sub { font-size: 12px; color: var(--t4); margin-top: 3px }
.ped-alerta {
  background: var(--danger-weak); border: 1px solid var(--danger-line); border-radius: 10px;
  padding: 12px 14px; font-size: 12.5px; color: var(--t2); line-height: 1.6;
}
/* Entrou, mas com conserto nosso no caminho: é aviso, não falha. O vermelho da
   recusa diria "você perdeu a venda" — e a venda está feita. */
.ped-alerta.atencao { background: var(--warn-weak); border-color: var(--warn-line) }
.ped-alerta b { color: var(--t1) }
/* `pre-line` porque o motivo pode trazer DUAS linhas — a tentativa original e a
   do nosso conserto. Numa linha só elas viram um parágrafo onde não se acha
   onde uma acaba. */
.ped-alerta .motivo {
  margin-top: 8px; font-size: 11.5px; color: var(--t4);
  word-break: break-word; white-space: pre-line;
}
.ped-bloco { border: 1px solid var(--line3); border-radius: 10px; padding: 4px 14px }
.ped-linha { display: flex; gap: 14px; padding: 10px 0; align-items: baseline }
.ped-linha + .ped-linha { border-top: 1px solid var(--line2) }
.ped-linha .rot { flex: none; width: 92px; font-size: 12px; color: var(--t4) }
.ped-linha .val { flex: 1; min-width: 0; font-size: 13px; color: var(--t1); word-break: break-word }
@media (max-width: 520px) { .ped-ficha { width: 100vw } }

/* paginação da lista de pedidos */
.res-paginas {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 14px 18px; border-top: 1px solid var(--line2);
  font-size: 12.5px; color: var(--t3);
}
.res-paginas button:disabled { opacity: .4; cursor: not-allowed }

/* o caminho da compra: principal e as ofertas aceitas depois */
.ped-secao {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em; color: var(--t4);
  margin-top: 4px;
}
.ped-jornada { border: 1px solid var(--line3); border-radius: 10px; padding: 4px 14px }
.ped-passo { display: flex; gap: 12px; padding: 12px 0; align-items: flex-start }
.ped-passo + .ped-passo, .ped-soma { border-top: 1px solid var(--line2) }
.ped-passo .ponto {
  flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px;
  background: var(--accent);
}
.ped-passo.recusado .ponto { background: var(--danger-t) }
.ped-passo.atual { background: var(--tile); margin: 0 -14px; padding-left: 14px; padding-right: 14px }
.ped-passo > div { flex: 1; min-width: 0 }
.ped-passo .topo { display: flex; justify-content: space-between; gap: 10px; font-size: 13px }
.ped-passo .sub { font-size: 11.5px; color: var(--t4); margin-top: 3px }
.ped-passo .sub i { font-style: normal; margin-left: 6px }
.ped-passo .sub i.ruim { color: var(--danger-t) }
.ped-soma {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 12px 0; font-size: 13px; font-weight: 700;
}

/* ─────────────── intervalo livre ─────────────── */
/* Linha própria, alinhada à direita como o seletor de períodos. Dentro dele, os dois
   campos de data alargavam o bloco e a barra inteira pulava de lugar a cada clique
   no calendário — parecia defeito, e era. */
.res-datas {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  flex-wrap: wrap; margin-top: 12px;
}
.res-datas label {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--t3);
}
.res-datas .entrada { width: auto; padding: 7px 10px; font-size: 12.5px }
@media (max-width: 720px) { .res-datas { justify-content: flex-start } }

/* ─────────────── tela de Conta ─────────────── */
.ct-abas { display: flex; align-items: center; gap: 26px; margin-top: 18px }
.ct-abas button {
  background: none; border: 0; padding: 0 0 12px; font: inherit; font-size: 13.5px;
  font-weight: 600; color: var(--t4); cursor: pointer; box-shadow: inset 0 -2px 0 transparent;
}
.ct-abas button:hover { color: var(--t2) }
.ct-abas button.on { color: var(--t1); box-shadow: inset 0 -2px 0 var(--t1) }

/* O aviso da integração fica no cabeçalho porque é o que decide se o produto
   funciona. Antes só aparecia depois de rolar até o segundo cartão — quem não rolou
   ficou sem receber pedido sem saber. */
.ct-alerta {
  display: flex; align-items: flex-start; gap: 10px; text-align: left; cursor: pointer;
  background: var(--warn-weak); border: 1px solid var(--warn-line); border-radius: 10px;
  padding: 11px 14px; font: inherit; color: var(--warn); max-width: 340px;
}
.ct-alerta:hover { filter: brightness(1.1) }
.ct-alerta svg { flex: none; margin-top: 1px }
.ct-alerta b { display: block; font-size: 12.5px; font-weight: 600 }
.ct-alerta i { display: block; font-style: normal; font-size: 11.5px; color: var(--t3); line-height: 1.5; margin-top: 3px }

.ct-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start }
@media (max-width: 1080px) { .ct-grade { grid-template-columns: 1fr } }
.ct-cartao { padding: 20px 22px 22px }
.ct-avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: var(--inv-bg); color: var(--inv-fg);
  display: grid; place-items: center; font-size: 19px; font-weight: 700; text-transform: uppercase;
}
.ct-linhas { margin-top: 20px; border-top: 1px solid var(--line2) }
.ct-linha { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line2) }
.ct-linha:last-child { border-bottom: 0; padding-bottom: 0 }
.ct-linha .rot { flex: none; width: 150px; font-size: 12.5px; font-weight: 600; color: var(--t3) }
.ct-linha > div { flex: 1; min-width: 0 }
.ct-linha b { display: block; font-size: 13px; font-weight: 400; color: var(--t1); word-break: break-word }
.ct-linha i { display: block; font-style: normal; font-size: 11.5px; color: var(--t4); line-height: 1.5; margin-top: 3px }

.ct-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 16px }
.ct-lista > div { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--t2); line-height: 1.5 }
.ct-lista .m {
  flex: none; width: 15px; height: 15px; border-radius: 50%; margin-top: 1px;
  background: var(--accent-weak); color: var(--accent); display: grid; place-items: center;
}
.ct-uso-l { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line2) }
.ct-uso-l:last-child { border-bottom: 0 }
.ct-uso-l span:first-child { flex: 1; min-width: 0; font-size: 12.5px; color: var(--t3) }
.ct-uso-l span:last-child { flex: none; font-size: 13.5px; font-weight: 600 }

.ct-planos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; max-width: 900px }
@media (max-width: 900px) { .ct-planos { grid-template-columns: 1fr } }
.ct-plano { padding: 24px 26px 26px }
.ct-plano.atual { border-color: var(--accent-line) }
.ct-plano .selo-p {
  font-size: 11px; font-weight: 600; border-radius: 99px; padding: 4px 11px; white-space: nowrap;
  background: var(--tile); color: var(--t4);
}
.ct-plano.atual .selo-p { background: var(--accent); color: var(--accent-fg) }

.ct-falta {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 0 0; margin-top: 12px; border-top: 1px solid var(--line2);
}
.ct-falta span:first-child {
  flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--line3); color: var(--t5);
  display: grid; place-items: center; font-size: 11px; line-height: 1; margin-top: 1px;
}
.ct-falta span:last-child { flex: 1; min-width: 0; font-size: 12.5px; color: var(--t4); line-height: 1.55 }

.ct-sinal { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line2) }
.ct-sinal:last-child { border-bottom: 0 }
.ct-sinal .ic { flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px }
.ct-sinal .ic.ok { background: var(--accent-weak); color: var(--accent) }
.ct-sinal .ic.nao { border: 1px solid var(--line3); color: var(--t5) }
.ct-sinal b { display: block; font-size: 12.5px; font-weight: 500; color: var(--t2) }
.ct-sinal i { display: block; font-style: normal; font-size: 11.5px; color: var(--t4); line-height: 1.5; margin-top: 3px }

/* ─────────────── Pagamentos ─────────────── */
.ct-coluna { display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.pg-quadro { overflow: visible }
.pg-quadro > :last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px }
.pg-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 22px 15px;
}
.pg-tit { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em }
.pg-sub { font-size: 12.5px; color: var(--t4); margin-top: 3px }
.pg-cab, .pg-linha { display: flex; align-items: center; gap: 14px; padding: 10px 22px }
.pg-cab {
  position: sticky; top: calc(-1 * var(--corpo-topo, 0px)); z-index: 5;
  background: var(--well); border-top: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
  font-size: 10px; font-weight: 600; letter-spacing: .08em; color: var(--t4);
}
.pg-linha { padding: 12px 22px; border-bottom: 1px solid var(--line2); font-size: 12.5px }
.pg-linha:last-child { border-bottom: 0 }
.pg-linha:hover { background: var(--tile2) }
.c-data { flex: none; width: 96px }
.c-plano { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.c-valor { flex: none; width: 92px; text-align: right; font-weight: 600 }
.c-estado { flex: none; width: 88px; display: flex; justify-content: flex-end }
.c-pdf { flex: none; width: 64px; text-align: right }
.pg-vazio {
  padding: 30px 22px 34px; text-align: center; font-size: 13px;
  color: var(--t3); line-height: 1.65;
}
.pg-vazio b { display: block; font-size: 13.5px; color: var(--t1); margin-bottom: 5px }
.pg-cartao {
  flex: none; width: 42px; height: 29px; border-radius: 5px;
  background: var(--tile); border: 1px solid var(--line3); color: var(--t3);
  display: grid; place-items: center;
}
.btn.peq { padding: 8px 14px; font-size: 12px }
@media (max-width: 720px) {
  .pg-cab .c-plano, .pg-linha .c-plano, .c-pdf { display: none }
}

.selo-f {
  font-size: 10.5px; font-weight: 600; border-radius: 99px; padding: 3px 9px;
  white-space: nowrap; border: 1px solid;
}
.selo-f.paga { color: var(--accent); background: var(--accent-weak); border-color: var(--accent-line) }
.selo-f.aberta { color: var(--warn); background: var(--warn-weak); border-color: var(--warn-line) }
.c-pdf a { font-size: 12px; font-weight: 600; color: var(--t3) }
.c-pdf a:hover { color: var(--t1) }

/* ─────────────── janela do checkout ─────────────── */
.janela {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(0, 0, 0, .55); padding: 20px;
}
.janela-cx {
  width: 100%; max-width: 620px; max-height: 92vh; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); overflow: hidden;
}
.janela-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--line2); flex: none;
}
.janela-topo b { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em }
.janela-x {
  flex: none; width: 30px; height: 30px; border-radius: 8px; padding: 0;
  border: 1px solid var(--line3); background: transparent; color: var(--t3);
  display: grid; place-items: center; cursor: pointer; transition: .14s;
}
.janela-x:hover { background: var(--tile); color: var(--t1) }
/* O iframe do Stripe cresce sozinho; a rolagem é daqui, para o rodapé dele nunca
   ficar fora do alcance numa tela baixa. */
.janela-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 22px }
.janela-feito { text-align: center; padding: 26px 10px 14px }
.janela-feito .marca {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 14px;
  background: var(--accent-weak); color: var(--accent); display: grid; place-items: center;
}
.janela-feito b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.02em }
.janela-feito p { font-size: 13px; color: var(--t3); line-height: 1.6; margin: 8px 0 20px }

/* Aviso que responde a um salvar — não uma faixa que mora na tela. */
.ed-salvo {
  display: flex; align-items: flex-start; gap: 11px; margin: 16px 30px 0;
  padding: 13px 15px; border-radius: 10px; font-size: 13px; line-height: 1.55;
  background: var(--warn-weak); border: 1px solid var(--warn-line); color: var(--warn);
}
.ed-salvo svg { flex: none; margin-top: 1px }
.ed-salvo > div { flex: 1; min-width: 0 }
.ed-salvo b { font-weight: 600 }
.ed-salvo button {
  flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: inherit; opacity: .7;
  display: grid; place-items: center; cursor: pointer;
}
.ed-salvo button:hover { opacity: 1; background: rgba(0, 0, 0, .06) }
@media (max-width: 1080px) { .ed-salvo { margin-left: 18px; margin-right: 18px } }

/* ── Trocar de plano: a pergunta antes de mexer em dinheiro já pago ── */
.janela-troca { padding: 20px 22px 22px }
.janela-troca p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--t2) }
.janela-troca p b { color: var(--t1) }
.janela-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px }

/* ═════════════ tela de início: resumo, busca, cartão com ações ═════════════ */

.cabeca-acoes { display: flex; align-items: center; gap: 10px; flex: none }
.busca { position: relative; display: block }
.busca > svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--t4); pointer-events: none;
}
.busca > input {
  width: 176px; background: var(--tile); border: 1px solid var(--line3);
  border-radius: 7px; padding: 10px 12px 10px 32px; font: inherit; font-size: 12.5px;
  color: var(--t1); outline: none; transition: border-color .14s, box-shadow .14s, width .16s;
}
.busca > input::placeholder { color: var(--t5) }
.busca > input:focus {
  width: 220px; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-weak);
}

/* O resumo é uma linha só. Virar quatro cartões faria dele o assunto da tela — e
   o assunto são os formulários; isto é a manchete. */
.resumo {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 17px 20px; margin-bottom: 14px;
}
.resumo-nums { display: flex; align-items: center; gap: 26px; flex-wrap: wrap }
.resumo-nums > div:not(:first-child) { padding-left: 26px; border-left: 1px solid var(--line2) }
.resumo-rot { font-size: 11.5px; color: var(--t4); white-space: nowrap }
.resumo-val { display: flex; align-items: baseline; gap: 8px; margin-top: 5px }
.resumo-val b { font-size: 19px; font-weight: 700; letter-spacing: -.02em }
.resumo-val span { font-size: 12px; color: var(--t4); white-space: nowrap }
.resumo-link {
  margin-left: auto; background: none; border: 0; padding: 0; font: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--t2); cursor: pointer; white-space: nowrap;
}
.resumo-link:hover { color: var(--t1) }

/* O cartão deixou de ser um <button> gigante: agora tem botões DENTRO, e botão
   dentro de botão não é HTML válido — o navegador desmonta a árvore sozinho. */
.form-cartao { position: relative; cursor: default; gap: 0 }
.form-cartao .cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px }
.form-cartao .abre { cursor: pointer; min-width: 0; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit }
.form-cartao .titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.form-cartao .slug { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.form-cartao .selos { flex: none; display: flex; align-items: center; gap: 6px }
.form-cartao .numeros { margin-top: 14px; gap: 22px }
.form-cartao .numeros .fim { margin-left: auto; text-align: right }
.form-cartao .numeros .fim b { font-size: 12.5px; font-weight: 500; color: var(--t2); white-space: nowrap }
.form-cartao .janela-que { font-size: 11px; color: var(--t4); margin-top: 9px }
.form-cartao .boa { color: var(--accent) }
.form-cartao .acoes { display: flex; align-items: center; gap: 7px; margin-top: 13px }

/* Ação secundária: mesma altura dos três, sem competir com "Novo formulário". */
.ac {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--t3);
  background: transparent; border: 1px solid var(--line3); border-radius: 6px;
  padding: 7px 12px; cursor: pointer; transition: .14s; white-space: nowrap;
}
.ac:hover { background: var(--tile); border-color: var(--line4); color: var(--t1) }

.dots {
  width: 29px; height: 29px; border-radius: 6px; padding: 0; flex: none;
  display: grid; place-items: center; color: var(--t4); cursor: pointer;
  background: transparent; border: 1px solid transparent; transition: .14s;
}
.dots:hover { background: var(--tile); border-color: var(--line3); color: var(--t1) }

.menu-form {
  position: absolute; top: 50px; right: 16px; z-index: 40; width: 196px;
  background: var(--card); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .38); padding: 5px;
}
.menu-form button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border-radius: 6px; font: inherit; font-size: 13px; color: var(--t2);
  background: none; border: 0; cursor: pointer; text-align: left; transition: .14s;
}
.menu-form button:hover { background: var(--tile); color: var(--t1) }
.menu-form button svg { color: var(--t4) }
.menu-form button.risco { color: var(--danger-t) }
.menu-form button.risco svg { color: currentColor }
.menu-form hr { height: 1px; background: var(--line2); border: 0; margin: 5px 3px }

/* ─────────────── diálogos de duplicar e excluir ─────────────── */
.janela-cx.estreita { max-width: 478px }
.janela-pe {
  display: flex; align-items: center; justify-content: flex-end; gap: 9px;
  padding: 15px 20px; border-top: 1px solid var(--line2); background: var(--well); flex: none;
}
.dlg .dlg-sub { font-size: 13px; color: var(--t3); line-height: 1.6; margin: 0 0 18px }
.dlg .campo:last-of-type { margin-bottom: 0 }
.dlg .dlg-nota { display: block; font-style: normal; font-size: 11.5px; color: var(--t4); line-height: 1.55; margin-top: 7px }
.dlg code {
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11.5px;
  background: var(--tile); border-radius: 4px; padding: 1px 6px; color: var(--t2);
}
.dlg-nao { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line2) }
.dlg-nao > b { font-size: 11px; font-weight: 600; letter-spacing: .09em; color: var(--t4) }
.dlg-nao > div { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--t3); line-height: 1.55 }
.dlg-nao > div > span {
  flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--line3);
  color: var(--t5); display: grid; place-items: center; font-size: 11px; line-height: 1; margin-top: 2px;
}
.dlg-perigo { display: flex; align-items: flex-start; gap: 13px }
.dlg-perigo p { font-size: 13px; color: var(--t3); line-height: 1.6; margin: 0 }
.dlg-perigo p b { color: var(--t1); font-weight: 600 }
.dlg-icone {
  flex: none; width: 36px; height: 36px; border-radius: 8px;
  background: var(--danger-weak); color: var(--danger-t); display: grid; place-items: center;
}
.dlg-cuidado {
  display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 18px;
  background: var(--warn-weak); border: 1px solid var(--warn-line);
  border-radius: 8px; padding: 12px 14px; color: var(--warn);
}
.dlg-cuidado p { font-size: 12.5px; color: var(--t2); line-height: 1.6; margin: 0 }
.dlg-cuidado p b { color: var(--t1); font-weight: 600 }
.dlg-cuidado svg { flex: none; margin-top: 1px }
.btn.perigo[disabled] { opacity: .5; cursor: not-allowed }

@media (max-width: 640px) {
  .cabeca-acoes { width: 100%; justify-content: space-between }
  .busca > input, .busca > input:focus { width: 100% }
  .busca { flex: 1 }
  .resumo-nums > div:not(:first-child) { padding-left: 18px }
}

/* ─────────────── escolher o plano ao entrar ─────────────── */
.janela-cx.bv { max-width: 760px }
.janela-cx.bv .janela-corpo { padding: 30px 30px 24px }
.bv-topo { text-align: center; margin-bottom: 24px }
.bv-topo h2 { font-size: 21px; font-weight: 700; letter-spacing: -.03em; margin: 0 }
.bv-topo p {
  font-size: 13.5px; color: var(--t3); line-height: 1.6;
  margin: 8px auto 0; max-width: 430px;
}
.janela-cx.bv .ct-planos { max-width: none }
.bv-pular {
  display: block; margin: 22px auto 0; background: none; border: 0; padding: 6px 10px;
  font: inherit; font-size: 12.5px; color: var(--t4); cursor: pointer; transition: color .14s;
}
.bv-pular:hover { color: var(--t2); text-decoration: underline }

.faixa-plano {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 14px; padding: 12px 16px;
  background: var(--warn-weak); border: 1px solid var(--warn-line); border-radius: 10px;
}
.faixa-txt { font-size: 12.5px; color: var(--t2); line-height: 1.55 }
.faixa-txt b { color: var(--t1); font-weight: 600 }

/* Na janela os dois cartões ficam da mesma altura e os botões alinhados embaixo.
   Desalinhados, o olho lê o mais alto como "o completo" e o outro como sobra —
   e aqui os dois são escolhas legítimas. */
.janela-cx.bv .ct-planos { align-items: stretch }
.janela-cx.bv .ct-plano { display: flex; flex-direction: column }
.janela-cx.bv .ct-plano > .btn { margin-top: auto }
.janela-cx.bv .ct-falta { margin-bottom: 18px }

/* O botão do cartão de plano. Era estilo inline, e inline vence a folha: dentro da
   janela o `margin-top:auto` que alinha os dois botões embaixo simplesmente não
   pegava, e a regra parecia não existir. */
.ct-assinar { width: 100%; margin-top: 18px }
.janela-cx.bv .ct-assinar { margin-top: auto }

/* Nota abaixo do botão de reenviar: responde "vai cobrar de novo?" antes de a
   pergunta existir. Sem ela, o lojista hesita — e hesitar aqui é perder a venda
   que o botão existe para salvar. */
.ped-nota { font-size: 11.5px; color: var(--t4); line-height: 1.55; margin: 8px 0 12px }
.aviso.bom { background: var(--accent-weak); border-color: var(--accent-line); color: var(--t2) }
.aviso.bom b { color: var(--t1) }

/* ─────────────── notificações ─────────────── */
.nt-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start }
@media (max-width: 1080px) { .nt-grade { grid-template-columns: 1fr } }
.nt-coluna { display: flex; flex-direction: column; gap: 14px; min-width: 0 }

.nt-estado { padding: 18px 18px 17px; display: flex; flex-direction: column; gap: 13px }
.nt-estado .linha { display: flex; align-items: center; gap: 12px }
.nt-icone {
  flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--tile); color: var(--t3); border: 1px solid var(--line3);
}
.nt-icone.ligado { background: var(--accent-weak); border-color: var(--accent-line); color: var(--accent) }
.nt-icone.ruim { background: var(--danger-weak); border-color: var(--danger-line); color: var(--danger-t) }
.nt-icone.alerta { background: var(--warn-weak); border-color: var(--warn-line); color: var(--warn) }
.nt-estado .txt { flex: 1; min-width: 0 }
.nt-estado .txt b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em }
.nt-estado .txt span { display: block; font-size: 12px; color: var(--t4); margin-top: 3px; line-height: 1.5 }
.nt-passos { display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; color: var(--t2); line-height: 1.5 }
.nt-passos > div { display: flex; gap: 10px }
.nt-passos b { color: var(--t1); font-weight: 600 }

/* A escolha entre valor e margem. É botão, não label: o que ela muda é estado do
   servidor, e um clique que grava é ação, não formulário. */
.nt-opcao {
  display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  border: 1px solid var(--line3); border-radius: 11px; padding: 13px 14px;
  background: var(--tile2); color: inherit; transition: .14s;
}
.nt-opcao + .nt-opcao { margin-top: 9px }
.nt-opcao:hover { border-color: var(--line4) }
.nt-opcao.on { border-color: var(--accent-line); background: var(--accent-weak) }
.nt-opcao .cab { display: flex; align-items: center; gap: 10px }
.nt-opcao .cab b { font-size: 13px; font-weight: 600 }
.nt-opcao .cab i { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--t4); font-family: 'Geist Mono', ui-monospace, monospace }
.nt-opcao .exp { display: block; font-size: 11.5px; color: var(--t4); line-height: 1.55; margin: 7px 0 0 27px }
.nt-radio {
  flex: none; width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--line4);
  display: grid; place-items: center;
}
.nt-opcao.on .nt-radio, .nt-som.on .nt-radio { border-color: var(--accent) }
.nt-opcao.on .nt-radio::after, .nt-som.on .nt-radio::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}

.nt-bloco { padding: 4px 16px 14px }
.linha-chave { display: flex; align-items: center; gap: 13px; padding: 12px 2px }
.linha-chave + .linha-chave { border-top: 1px solid var(--line2) }
.linha-chave .tx { flex: 1; min-width: 0 }
.linha-chave .tx b { display: block; font-size: 12.5px; font-weight: 600 }
.linha-chave .tx span { display: block; font-size: 11px; color: var(--t4); margin-top: 3px; line-height: 1.5 }

/* Número convertido sem dizer por quanto foi convertido é número sem
   procedência — e ninguém teria como desconfiar quando estivesse errado. */
.nt-cotacao {
  display: flex; align-items: center; gap: 12px; margin: 4px 0 2px;
  padding: 11px 12px; border: 1px dashed var(--line3); border-radius: 10px;
}
.nt-cotacao .tx { flex: 1; min-width: 0 }
.nt-cotacao .tx b { display: block; font-size: 12.5px; font-weight: 600 }
.nt-cotacao .tx span { display: block; font-size: 11px; color: var(--t4); margin-top: 3px; line-height: 1.5 }

.nt-som {
  display: flex; align-items: center; gap: 11px; width: 100%; font: inherit; text-align: left;
  border: 1px solid var(--line3); border-radius: 10px; padding: 9px 11px;
  cursor: pointer; background: var(--tile2); color: inherit; transition: .14s;
}
.nt-som + .nt-som { margin-top: 7px }
.nt-som:hover { border-color: var(--line4) }
.nt-som.on { border-color: var(--accent-line); background: var(--accent-weak) }
.nt-som .nome { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--t2) }
.nt-som.on .nome { color: var(--t1); font-weight: 600 }
.nt-som .tocar {
  flex: none; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line3);
  display: grid; place-items: center; color: var(--t3);
}
.nt-som.soando .tocar { border-color: var(--accent); color: var(--accent); background: var(--accent-weak) }
#nt-sons { margin-top: 4px }

.nt-aparelho { display: flex; align-items: center; gap: 12px; padding: 12px 0 }
.nt-aparelho + .nt-aparelho { border-top: 1px solid var(--line2) }
.nt-aparelho .qd {
  flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--tile);
  border: 1px solid var(--line3); display: grid; place-items: center; color: var(--t3);
}
.nt-aparelho .tx { flex: 1; min-width: 0 }
.nt-aparelho .tx b { display: block; font-size: 12.5px; font-weight: 600 }
.nt-aparelho .tx span { display: block; font-size: 11px; color: var(--t4); margin-top: 2px }
.nt-aparelho .x {
  flex: none; border: 0; background: transparent; color: var(--t5); cursor: pointer;
  padding: 6px; border-radius: 7px; transition: .14s;
}
.nt-aparelho .x:hover { color: var(--danger-t); background: var(--danger-weak) }


/* ═══════════════════ O CELULAR ═══════════════════ */
/*
 * Abaixo de 720 o painel deixa de ser o painel encolhido e vira um app de três
 * telas: Vendas, Notificações e Conta. Só LEITURA — métrica se olha, venda se
 * resolve no computador. É uma regra que cabe numa frase, e regra que cabe numa
 * frase sobrevive ao próximo recurso que alguém quiser enfiar aqui.
 *
 * O editor, a tabela de cinco colunas, o CSV, os recortes por variação e por
 * site, criar e duplicar formulário: nada disso desce. Ninguém monta uma página
 * de venda no telefone, e tentar fazer caber só produz uma versão pior das duas.
 */
.so-fone { display: none }
@media (max-width: 720px) {
  .so-tela { display: none }
  .so-fone { display: initial }
  .side-item.so-fone { display: flex }

  /* Formulários sai da barra: no celular não se cria nem se edita formulário.
     Eles continuam visíveis em Conta, com o interruptor de ligar e pausar. */
  .side-item[data-ir="formularios"] { display: none }

  /* A moeda só aparece onde há dinheiro na tela. */
  #moeda-chip { display: none }
  body[data-tela-atual="resultados"] #moeda-chip { display: inline-flex }

  /* o que é do computador some */
  #res-conteudo, #res-carregando, .cabeca-linha > div:last-child,
  #res-datas, .ct-abas, .ct-alerta { display: none !important }
  #vendas-fone[hidden], #conta-fone[hidden] { display: none }
  #vendas-fone, #conta-fone { display: flex; flex-direction: column; gap: 16px }
  [data-tela="conta"] .corpo > .ct-grade, [data-tela="conta"] .corpo > .cartao { display: none }

  /* A cabeça vira só o parágrafo: o nome da tela está na faixa de cima. */
  .cabeca { padding-bottom: 6px; border-bottom: 0 }
  .cabeca p { font-size: 14px }
  /* Em Vendas o parágrafo também sai: a tela é para ser lida em três segundos,
     e o primeiro deles não pode ser gasto com uma frase que explica a tela. */
  body[data-tela-atual="resultados"] .cabeca { display: none }
}

/* ─────────── a escala do celular ─────────── */
/*
 * O painel foi desenhado para 1440px com barra lateral, e essa escala desceu
 * inteira para 390px. Num app que se olha de pé, com uma mão, em três segundos,
 * 12,5px de rótulo é pequeno. Com o editor fora do telefone, sobra espaço.
 */
.chip-moeda {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line3);
  background: transparent; color: var(--t2); border-radius: 99px; padding: 7px 12px;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; min-height: 38px;
}
.chip-moeda:hover { border-color: var(--line4); color: var(--t1) }

.rotulo-fone { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--t4); padding: 0 2px }
.vf-pe { font-size: 12.5px; color: var(--t4); line-height: 1.6; margin: -4px 2px 0 }

.vf-card { padding: 19px 20px 17px }
.vf-card .cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px }
.vf-card .cab .nome { font-size: 14px; font-weight: 600; color: var(--t2); letter-spacing: -.01em }
.vf-card .olho { border: 0; background: transparent; color: var(--t4); cursor: pointer; padding: 6px; border-radius: 7px; display: grid; place-items: center }
.vf-card .olho:hover { color: var(--t2) }
.vf-card .olho[aria-pressed="true"] { color: var(--accent) }
.vf-card .val { font-size: 34px; font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums }
.vf-card .linha { font-size: 13.5px; color: var(--t3); margin-top: 11px }
.vf-card .linha b { color: var(--t1); font-weight: 600 }
.vf-card .ontem { font-size: 13.5px; color: var(--t4); margin-top: 6px; font-variant-numeric: tabular-nums }

.sel-periodo {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line3);
  background: transparent; color: var(--t2); border-radius: 99px; padding: 8px 13px;
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; min-height: 38px;
}
.sel-periodo:hover { border-color: var(--line4); color: var(--t1) }

/*
 * O funil em quatro quadrados.
 *
 * Juntos eles respondem uma pergunta que nenhum deles responde sozinho: onde a
 * venda se perde. 205 aberturas com 12 vendas é problema de página; 205
 * aberturas com 51 abandonos no meio do formulário é problema de formulário — e
 * são consertos diferentes.
 */
.funil { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.funil > div { padding: 15px 16px }
.funil .rot { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--t4) }
.funil .num { font-size: 26px; font-weight: 700; letter-spacing: -.03em; margin-top: 7px; line-height: 1; font-variant-numeric: tabular-nums }
.funil .pe { font-size: 12px; color: var(--t5); margin-top: 6px }
.funil .num.bom { color: var(--accent) }
.funil .num.ruim { color: var(--danger-t) }

/* ─────────── a folha que sobe de baixo ─────────── */
.folha-fundo { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 40 }
.folha {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  background: var(--card); border-top: 1px solid var(--line3);
  border-radius: 18px 18px 0 0; padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
}
.folha[hidden], .folha-fundo[hidden] { display: none }
.folha .puxador { width: 38px; height: 4px; border-radius: 99px; background: var(--line4); margin: 0 auto 16px }
.folha h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 14px }
.folha .vf-pe { margin-top: 14px }
.opc-folha {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  border: 1px solid var(--line3); background: transparent; color: var(--t2); border-radius: 11px;
  padding: 15px 16px; font: inherit; font-size: 15px; cursor: pointer; min-height: 52px; text-align: left;
}
.opc-folha + .opc-folha { margin-top: 9px }
.opc-folha.on { background: var(--accent-weak); border-color: var(--accent-line); color: var(--t1); font-weight: 600 }
.opc-folha .qto { font-size: 13.5px; color: var(--t4); font-variant-numeric: tabular-nums; font-weight: 400 }
.opc-folha.on .qto { color: var(--t2) }

/* ─────────── a Conta do celular ─────────── */
.cf-eu { padding: 18px; display: flex; align-items: center; gap: 14px }
.cf-av {
  flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--inv-bg);
  color: var(--inv-fg); display: grid; place-items: center; font-size: 17px; font-weight: 700;
  text-transform: uppercase;
}
.cf-tx { flex: 1; min-width: 0 }
.cf-tx b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cf-tx span { display: block; font-size: 13px; color: var(--t4); margin-top: 3px }

.cf-forms { padding: 2px 16px }
.cf-form { display: flex; align-items: center; gap: 14px; padding: 15px 2px; min-height: 52px }
.cf-form + .cf-form { border-top: 1px solid var(--line2) }
.cf-form .tx { flex: 1; min-width: 0 }
.cf-form .tx b { display: block; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cf-form .tx span { display: block; font-size: 12.5px; color: var(--t4); margin-top: 3px }
.cf-form.pausado .tx { opacity: .6 }

.cf-menu { padding: 2px 16px }
.item-fone {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; font: inherit;
  border: 0; background: transparent; color: var(--t2); font-size: 14.5px; padding: 15px 2px;
  cursor: pointer; min-height: 50px;
}
.item-fone + .item-fone { border-top: 1px solid var(--line2) }
.item-fone.perigo { color: var(--danger-t) }


/* ─────────────── esqueleto de carregamento ─────────────── */
/*
 * A palavra "Carregando" diz que algo está acontecendo e nada sobre o quê — e
 * quando os dados chegam a tela PULA, porque uma linha de texto vira cinco
 * cartões. O esqueleto já tem a forma do que vem, então a tela não se remonta:
 * ela ganha cor.
 *
 * O brilho atravessa a linha uma vez a cada 1,4s. Mais rápido vira nervosismo;
 * mais devagar parece travado. Quem pediu menos movimento no sistema não vê
 * brilho nenhum — fica só a forma, que é o que importa aqui.
 */
.esq { display: flex; flex-direction: column; gap: 14px }
.esq-l {
  display: block; height: 11px; border-radius: 6px; background: var(--tile);
  position: relative; overflow: hidden;
}
.esq-l::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--line3), transparent);
  transform: translateX(-100%);
  animation: esq-brilho 1.4s ease-in-out infinite;
}
@keyframes esq-brilho { to { transform: translateX(100%) } }
@media (prefers-reduced-motion: reduce) { .esq-l::after { animation: none; opacity: .35 } }

.esq-l.curta { width: 60%; height: 9px }
.esq-l.num { width: 44%; height: 24px; margin-top: 11px; border-radius: 7px }

.esq-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; padding: 20px 22px }
@media (max-width: 1220px) { .esq-kpis { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 900px) { .esq-kpis { grid-template-columns: repeat(2, 1fr) } }

.esq-lista { padding: 6px 22px }
.esq-linha { display: flex; align-items: center; gap: 14px; padding: 15px 0 }
.esq-linha + .esq-linha { border-top: 1px solid var(--line2) }

.esq-bloco { padding: 20px; display: flex; flex-direction: column; gap: 12px }