/* BIG SNIPER ÓRBITA · o caixa (public/big/caixa-pix.js): depositar e sacar sem sair da Órbita.
   Só verdes (docs/paleta.md, decisão do dono em 10/11/2026: nada de azul, ciano, teal ou âmbar;
   o vermelho é só LOSS: erro e aviso aqui vão em lima). Vidro escuro esverdeado, canto cortado,
   Michroma só no número que importa (o valor), Chakra Petch no texto, JetBrains Mono nos rótulos.
   Compacto (pedido do dono, 10/11/2026: "tô sentindo tudo muito grande"): botões de 40 a 44 px,
   texto 11 a 15 px, espaços curtos; o toque nunca abaixo de 40 px. Campo de digitar em 16 px (o
   iPhone não dá zoom). Celular primeiro (375 px): folha de baixo; no computador, janela no meio.
   Prefixo bcx-. */
.bcx-raiz {
  /* os papéis da paleta (public/big/paleta.css, docs/paleta.md); o valor depois da vírgula é o mesmo tom */
  --bcx-verde: var(--o-verde, #19e57a);          /* ação: Gerar, Copiar, Sacar */
  --bcx-menta: var(--o-menta, #b6ffd4);          /* sucesso: caiu, saldo subindo, copiado */
  --bcx-lima: var(--o-lima, #b8f25a);            /* atenção: validade, esperando a Bullex, aviso de rede */
  --bcx-chartreuse: var(--o-chartreuse, #d4f570);
  --bcx-folha: var(--o-folha, #7bd84a);          /* ícones */
  --bcx-salvia: var(--o-salvia, #9ccb9a);        /* rótulos e texto leve */
  --bcx-esmeralda: var(--o-esmeralda, #12c46a);  /* preenchimento (passo feito) */
  --bcx-musgo: var(--o-musgo, #4e8a3a);          /* bordas e trilhos */
  --bcx-floresta: var(--o-floresta, #0b5f35);    /* fundo de botão secundário */
  --bcx-noite: var(--o-noite, #03100a);
  --bcx-casca: var(--o-casca, #071a10);
  --bcx-vidro: var(--o-vidro, rgba(7, 26, 16, .78));
  --bcx-atencao: var(--bcx-lima);                /* erro e aviso no caixa (atenção, não perda) */
  --bcx-texto: var(--o-texto, #ecfff3);
  --bcx-leve: var(--bcx-salvia);
  --bcx-fraco: rgba(156, 203, 154, .62);
  --bcx-linha: var(--bcx-musgo);
  --bcx-linha-2: rgba(78, 138, 58, .45);
  --bcx-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --bcx-ui: 'Chakra Petch', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bcx-num: 'Michroma', 'Chakra Petch', system-ui, sans-serif;
  --bcx-corte: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  --bcx-corte-s: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
  --bcx-toque: 42px;                              /* a altura dos botões (40 a 44) */
  position: fixed; inset: 0; z-index: 9700;
  font: 400 13px/1.4 var(--bcx-ui); color: var(--bcx-texto);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
.bcx-raiz *, .bcx-raiz *::before, .bcx-raiz *::after { box-sizing: border-box; }
:where(.bcx-raiz) :where(button, input, a) { font: inherit; color: inherit; }
.bcx-raiz :focus-visible { outline: 2px solid var(--bcx-menta); outline-offset: 2px; }
.bcx-raiz[hidden], .bcx-raiz [hidden] { display: none !important; }

.bcx-fundo {
  position: absolute; inset: 0; background: rgba(1, 8, 4, .66);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .22s;
}
.bcx-on .bcx-fundo { opacity: 1; }

/* ------------------------------------------------------------ a folha ---- */
.bcx-folha {
  position: absolute; left: 0; right: 0; bottom: var(--bcx-teclado, 0px);
  margin: 0 auto; width: 100%; max-width: 420px;
  max-height: calc(var(--bcx-alto, 100dvh) - 10px);
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(25, 229, 122, .07), transparent 60%),
    linear-gradient(172deg, var(--bcx-casca), var(--bcx-noite) 60%);
  border: 1px solid var(--bcx-linha); border-bottom: 0;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px);
  box-shadow: 0 -16px 50px rgba(0, 0, 0, .5);
  transform: translateY(104%); transition: transform .32s cubic-bezier(.16, 1, .3, 1), bottom .18s;
}
.bcx-on .bcx-folha { transform: none; }
.bcx-folha::before { content: ''; display: block; flex: none; width: 36px; height: 3px; margin: 6px auto 0; background: var(--bcx-linha); }
@media (min-width: 720px) {
  .bcx-folha {
    top: 50%; bottom: auto; max-height: min(720px, calc(100dvh - 40px));
    border-bottom: 1px solid var(--bcx-linha); clip-path: var(--bcx-corte);
    transform: translateY(-46%) scale(.97); opacity: 0; transition: transform .28s cubic-bezier(.16, 1, .3, 1), opacity .2s;
  }
  .bcx-on .bcx-folha { transform: translateY(-50%); opacity: 1; }
  .bcx-folha::before { display: none; }
}

/* topo: as duas abas e o fechar */
.bcx-topo { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 8px 0 12px; }
.bcx-abas { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.bcx-aba {
  position: relative; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px;
  font: 700 11px/1 var(--bcx-mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
  color: var(--bcx-leve); background: rgba(25, 229, 122, .04); border: 1px solid var(--bcx-linha-2); clip-path: var(--bcx-corte-s);
  transition: color .2s, background .2s, border-color .2s;
}
.bcx-aba svg { width: 14px; height: 14px; }
.bcx-aba:hover { color: var(--bcx-texto); }
.bcx-aba[aria-selected="true"] { color: var(--bcx-noite); background: var(--bcx-verde); border-color: var(--bcx-verde); box-shadow: 0 0 16px rgba(25, 229, 122, .3); }
.bcx-x { flex: none; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; color: var(--bcx-leve); display: grid; place-items: center; }
.bcx-x svg { width: 18px; height: 18px; }
.bcx-x:hover { color: var(--bcx-texto); }

/* o saldo, sempre à vista (uma linha fina) */
.bcx-saldo { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 8px 12px 0; padding: 5px 10px;
  border: 1px solid var(--bcx-linha-2); background: rgba(3, 16, 10, .6); clip-path: var(--bcx-corte-s); }
.bcx-saldo small { font: 700 9.5px var(--bcx-mono); letter-spacing: .22em; color: var(--bcx-fraco); }
.bcx-saldo b { font: 600 14px/1.2 var(--bcx-mono); font-variant-numeric: tabular-nums; color: var(--bcx-texto); white-space: nowrap; }
.bcx-saldo.bcx-zero b { color: var(--bcx-lima); }
.bcx-saldo.bcx-sobe b { animation: bcxSobe 1.4s ease-out; }
@keyframes bcxSobe { 0% { color: #fff; text-shadow: 0 0 18px rgba(182, 255, 212, .95); } }

.bcx-ensaio { display: inline-block; white-space: nowrap; padding: 1px 6px; font: 700 9px/1.4 var(--bcx-mono); letter-spacing: .14em; color: var(--bcx-noite); background: var(--bcx-lima); }

/* o corpo de cada passo */
.bcx-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px calc(14px + env(safe-area-inset-bottom)); }
.bcx-passo { display: flex; flex-direction: column; gap: 10px; animation: bcxEntra .24s ease-out; }
@keyframes bcxEntra { from { opacity: 0; transform: translateY(6px); } }
.bcx-titulo { margin: 0; font: 600 15px/1.25 var(--bcx-ui); letter-spacing: .01em; }
.bcx-titulo small { display: block; margin-top: 2px; font: 500 11.5px/1.4 var(--bcx-ui); color: var(--bcx-leve); }
.bcx-rot { margin: 0; font: 700 9.5px/1.3 var(--bcx-mono); letter-spacing: .2em; color: var(--bcx-fraco); }
.bcx-nota { margin: 0; font: 500 11px/1.4 var(--bcx-ui); color: var(--bcx-fraco); text-align: center; }
.bcx-nota.bcx-sub { margin-top: -6px; text-align: left; }

/* a barrinha dos passos e o voltar */
.bcx-trilha { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.bcx-volta { flex: none; width: 40px; height: 32px; margin: -6px 0 -6px -10px; border: 0; background: none; cursor: pointer; color: var(--bcx-leve); display: grid; place-items: center; }
.bcx-volta svg { width: 16px; height: 16px; }
.bcx-volta[hidden] { display: none; }
.bcx-segs { flex: 1; display: flex; gap: 4px; }
.bcx-segs i { flex: 1; height: 3px; background: rgba(25, 229, 122, .12); transition: background .3s, box-shadow .3s; }
.bcx-segs i.bcx-feito { background: var(--bcx-esmeralda); }
.bcx-segs i.bcx-agora { background: var(--bcx-verde); box-shadow: 0 0 8px rgba(25, 229, 122, .7); }

/* o aviso de sem saldo (quem tocou em LIGAR com R$ 0) */
.bcx-faixa { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font: 700 10px/1.35 var(--bcx-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--bcx-lima); background: rgba(184, 242, 90, .08); border: 1px solid rgba(184, 242, 90, .35); clip-path: var(--bcx-corte-s); }
.bcx-faixa svg { flex: none; width: 15px; height: 15px; }

/* ---------------------------------------------------------- o valor ---- */
.bcx-visor { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px 7px;
  border: 1px solid var(--bcx-linha); background: radial-gradient(80% 120% at 50% 50%, rgba(25, 229, 122, .09), rgba(3, 16, 10, .4)); clip-path: var(--bcx-corte); }
.bcx-visor::before, .bcx-visor::after { content: ''; position: absolute; width: 10px; height: 10px; border: 2px solid var(--bcx-verde); }
.bcx-visor::before { left: 6px; top: 6px; border-right: 0; border-bottom: 0; }
.bcx-visor::after { right: 6px; bottom: 6px; border-left: 0; border-top: 0; }
.bcx-visor-num { display: flex; align-items: baseline; justify-content: center; gap: 6px; min-height: 42px; }
.bcx-visor-num span { font: 400 14px var(--bcx-num); color: var(--bcx-leve); }
.bcx-visor-num b, .bcx-visor-num input { font: 400 30px/1.2 var(--bcx-num); font-variant-numeric: tabular-nums; color: var(--bcx-texto); letter-spacing: .01em; }
.bcx-visor-num input { width: 6.2ch; min-width: 0; padding: 0; text-align: center; background: transparent; border: 0; border-bottom: 2px solid var(--bcx-verde); border-radius: 0; caret-color: var(--bcx-verde); }
.bcx-visor-num input::placeholder { color: var(--bcx-fraco); }
.bcx-visor-num input:focus { outline: none; border-bottom-color: var(--bcx-menta); }
.bcx-visor.bcx-ruim { border-color: rgba(184, 242, 90, .6); }
.bcx-visor.bcx-ruim input { border-bottom-color: var(--bcx-atencao); }
.bcx-lim { font: 500 10.5px var(--bcx-mono); letter-spacing: .04em; color: var(--bcx-fraco); }
.bcx-lim b { color: var(--bcx-leve); font-weight: 700; }
.bcx-lim .bcx-erro-txt { color: var(--bcx-atencao); }
.bcx-atalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bcx-ch { min-height: 40px; cursor: pointer; font: 600 13px var(--bcx-mono); font-variant-numeric: tabular-nums; color: var(--bcx-texto);
  background: rgba(25, 229, 122, .05); border: 1px solid var(--bcx-linha-2); clip-path: var(--bcx-corte-s); transition: background .15s, border-color .15s, color .15s, transform .1s; }
.bcx-ch:hover { border-color: var(--bcx-linha); background: rgba(25, 229, 122, .1); }
.bcx-ch:active { transform: scale(.97); }
.bcx-ch[aria-pressed="true"] { color: var(--bcx-noite); background: var(--bcx-menta); border-color: var(--bcx-menta); }
.bcx-ch.bcx-outro { font: 700 10.5px var(--bcx-mono); letter-spacing: .14em; text-transform: uppercase; }

/* ------------------------------------------------- a forma de pagamento ---- */
.bcx-forma, .bcx-fm { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 10px; cursor: pointer; text-align: left;
  background: rgba(25, 229, 122, .05); border: 1px solid var(--bcx-linha-2); clip-path: var(--bcx-corte-s); transition: background .15s, border-color .15s; }
.bcx-forma { margin-top: -4px; border-color: var(--bcx-linha); }
.bcx-forma:hover, .bcx-fm:hover:not(:disabled) { background: rgba(25, 229, 122, .1); border-color: var(--bcx-linha); }
.bcx-fm-ico { flex: none; width: 32px; height: 32px; display: grid; place-items: center; color: var(--bcx-folha); background: rgba(3, 16, 10, .7); border: 1px solid var(--bcx-linha-2); }
.bcx-fm-ico svg { width: 18px; height: 18px; }
.bcx-forma-pix .bcx-fm-ico { color: var(--bcx-verde); border-color: var(--bcx-linha); }
.bcx-fm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bcx-fm-txt b { font: 600 13.5px/1.2 var(--bcx-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcx-fm-txt b em { margin-left: 4px; padding: 1px 5px; font: 700 8.5px/1.3 var(--bcx-mono); font-style: normal; letter-spacing: .12em; vertical-align: 2px; color: var(--bcx-noite); background: var(--bcx-verde); }
.bcx-fm-txt small { font: 500 11px/1.25 var(--bcx-ui); color: var(--bcx-fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcx-fm-trocar { flex: none; display: flex; align-items: center; gap: 4px; font: 700 10px var(--bcx-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bcx-leve); }
.bcx-fm-trocar small { padding: 1px 4px; font-size: 9.5px; letter-spacing: .04em; color: var(--bcx-menta); border: 1px solid var(--bcx-linha-2); }
.bcx-fm-trocar svg { width: 14px; height: 14px; }
.bcx-fm-lado { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
.bcx-fm-lado b { font: 700 10.5px var(--bcx-mono); letter-spacing: .04em; color: var(--bcx-leve); white-space: nowrap; }
.bcx-fm-lado b.bcx-fora { color: var(--bcx-atencao); }
.bcx-fm-lado small { font: 500 10px var(--bcx-mono); color: var(--bcx-fraco); white-space: nowrap; }
.bcx-formas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.bcx-fm.bcx-sel { border-color: var(--bcx-verde); background: rgba(25, 229, 122, .09); }
.bcx-fm:disabled { cursor: default; opacity: .55; }
.bcx-resumo { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--bcx-linha-2); background: rgba(3, 16, 10, .6); clip-path: var(--bcx-corte-s); }
.bcx-resumo b { font: 400 17px/1.2 var(--bcx-num); font-variant-numeric: tabular-nums; }
.bcx-resumo .bcx-link { margin-left: auto; min-height: 32px; }
.bcx-resumo .bcx-chip { margin-left: auto; }
.bcx-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 55%; padding: 3px 7px; font: 600 11px/1.2 var(--bcx-ui); color: var(--bcx-leve); border: 1px solid var(--bcx-linha-2); background: rgba(3, 16, 10, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcx-chip svg { flex: none; width: 13px; height: 13px; color: var(--bcx-folha); }

/* --------------------------------------------------------- os botões ---- */
.bcx-cta { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: var(--bcx-toque); padding: 0 14px; cursor: pointer;
  font: 700 12.5px/1 var(--bcx-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bcx-noite); text-decoration: none;
  background: var(--bcx-verde); border: 0; clip-path: var(--bcx-corte-s);
  box-shadow: 0 0 22px rgba(25, 229, 122, .3); transition: filter .15s, transform .1s; }
.bcx-cta svg { flex: none; width: 17px; height: 17px; }
.bcx-cta:hover { filter: brightness(1.08); }
.bcx-cta:active { transform: scale(.985); }
.bcx-cta:disabled { cursor: default; filter: saturate(.3) brightness(.6); }
.bcx-cta.bcx-ok { background: var(--bcx-menta); }
.bcx-cta.bcx-2 { color: var(--bcx-texto); background: rgba(11, 95, 53, .45); border: 1px solid var(--bcx-linha); box-shadow: none; font-size: 11.5px; min-height: 40px; }
.bcx-link { align-self: center; display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 8px; border: 0; background: none; cursor: pointer;
  font: 600 11px var(--bcx-mono); letter-spacing: .06em; color: var(--bcx-leve); text-decoration: underline; text-underline-offset: 3px; }
.bcx-link svg { width: 13px; height: 13px; }
.bcx-link:hover { color: var(--bcx-texto); }
.bcx-links { display: flex; justify-content: center; gap: 6px; margin-top: -6px; }
.bcx-mini { flex: none; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; color: var(--bcx-noite); background: var(--bcx-verde); border: 0; clip-path: var(--bcx-corte-s); }
.bcx-mini svg { width: 16px; height: 16px; }
.bcx-mini.bcx-ok { background: var(--bcx-menta); }

/* ---------------------------------------------------------- os campos ---- */
.bcx-campo { display: flex; flex-direction: column; gap: 4px; }
.bcx-campo label { font: 700 9.5px var(--bcx-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--bcx-leve); }
.bcx-campo .bcx-in { position: relative; }
.bcx-campo input { width: 100%; min-height: 44px; padding: 0 40px 0 12px; font: 500 16px var(--bcx-mono); letter-spacing: .03em; color: var(--bcx-texto);
  background: rgba(3, 16, 10, .7); border: 1px solid var(--bcx-linha); border-radius: 0; clip-path: var(--bcx-corte-s); caret-color: var(--bcx-verde); }
.bcx-campo input.bcx-nome { font: 500 16px var(--bcx-ui); letter-spacing: .01em; }
.bcx-campo input:focus { outline: none; border-color: var(--bcx-verde); box-shadow: inset 0 0 0 1px var(--bcx-verde); }
.bcx-campo .bcx-marca { position: absolute; right: 10px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--bcx-verde); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.bcx-campo.bcx-certo .bcx-marca { opacity: 1; transform: none; }
.bcx-campo.bcx-ruim input { border-color: var(--bcx-atencao); box-shadow: inset 0 0 0 1px var(--bcx-atencao); }
.bcx-campo .bcx-erro-txt { min-height: 14px; font: 500 11px var(--bcx-mono); color: var(--bcx-atencao); }
.bcx-cadeado { margin: 0; display: flex; align-items: center; gap: 6px; font: 500 10.5px var(--bcx-mono); letter-spacing: .04em; color: var(--bcx-fraco); }
.bcx-cadeado svg { flex: none; width: 13px; height: 13px; color: var(--bcx-esmeralda); }

/* -------------------------------------------------------- a espera (radar) ---- */
.bcx-espera { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 0 12px; text-align: center; }
.bcx-radar { position: relative; width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--bcx-linha);
  background: radial-gradient(circle, rgba(25, 229, 122, .14) 0 2px, transparent 3px), repeating-radial-gradient(circle, transparent 0 11px, rgba(25, 229, 122, .14) 11px 12px); overflow: hidden; }
.bcx-radar::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(25, 229, 122, .55), rgba(25, 229, 122, 0) 28%); animation: bcxGira 1.4s linear infinite; }
@keyframes bcxGira { to { transform: rotate(360deg); } }
.bcx-espera b { font: 700 11px var(--bcx-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--bcx-menta); }

/* ------------------------------------------------ a tela de pagar (todas) ---- */
.bcx-pague-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.bcx-pague-topo > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bcx-valor-pix { font: 400 22px/1.15 var(--bcx-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bcx-valor-pix span { font-size: 13px; color: var(--bcx-leve); }
.bcx-info { margin: 0; display: grid; gap: 0; border-top: 1px dashed rgba(25, 229, 122, .16); }
.bcx-info > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 1px; border-bottom: 1px dashed rgba(25, 229, 122, .16); }
.bcx-info dt { flex: none; font: 600 10px/1.5 var(--bcx-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bcx-fraco); }
.bcx-info dd { margin: 0; font: 500 12px/1.4 var(--bcx-ui); color: var(--bcx-texto); text-align: right; overflow-wrap: anywhere; }
.bcx-depois { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; counter-reset: bcxd; }
.bcx-depois li { position: relative; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 7px; font: 600 10.5px/1.2 var(--bcx-ui); color: var(--bcx-leve);
  background: rgba(25, 229, 122, .04); border: 1px solid var(--bcx-linha-2); clip-path: var(--bcx-corte-s); }
.bcx-depois li svg { flex: none; width: 14px; height: 14px; color: var(--bcx-folha); }
.bcx-depois li span { display: flex; flex-direction: column; min-width: 0; }
.bcx-depois li small { font: 500 9.5px/1.2 var(--bcx-mono); color: var(--bcx-fraco); }

/* ---------------------------------------------------------- o PIX ---- */
.bcx-mira { position: relative; align-self: center; width: min(196px, 54vw); aspect-ratio: 1; padding: 10px; }
.bcx-mira.bcx-mira-p { width: min(150px, 42vw); }
.bcx-mira > i { position: absolute; width: 20px; height: 20px; border: 2px solid var(--bcx-verde); filter: drop-shadow(0 0 5px rgba(25, 229, 122, .7)); }
.bcx-mira > i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.bcx-mira > i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.bcx-mira > i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.bcx-mira > i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.bcx-qr { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: #fff; color: #03100a; overflow: hidden; }
.bcx-qr > svg, .bcx-qr > img { display: block; width: 100%; height: 100%; }
.bcx-qr .bcx-varre { position: absolute; left: 0; right: 0; height: 26%; pointer-events: none;
  background: linear-gradient(180deg, rgba(25, 229, 122, 0), rgba(25, 229, 122, .28) 85%, rgba(25, 229, 122, .7)); animation: bcxVarre 2.6s ease-in-out infinite; }
@keyframes bcxVarre { 0% { top: -26%; } 60%, 100% { top: 100%; } }
.bcx-qr.bcx-vencido > svg, .bcx-qr.bcx-vencido > img { opacity: .12; filter: blur(2px); }
.bcx-qr .bcx-sobre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; text-align: center; color: var(--bcx-noite); }
.bcx-qr .bcx-sobre b { font: 700 13px var(--bcx-mono); letter-spacing: .12em; text-transform: uppercase; }
.bcx-qr .bcx-sobre .bcx-cta { min-height: 40px; font-size: 11px; width: auto; padding: 0 14px; }
.bcx-selo-ensaio { position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%); z-index: 1; }
.bcx-tempo { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: -4px; font: 700 10.5px var(--bcx-mono); letter-spacing: .14em; color: var(--bcx-leve); text-transform: uppercase; }
.bcx-tempo b { font: 700 13px var(--bcx-mono); letter-spacing: .04em; color: var(--bcx-lima); font-variant-numeric: tabular-nums; }
.bcx-tempo.bcx-fim b { color: var(--bcx-lima); animation: bcxPulso 1s ease-in-out infinite; }
.bcx-tempo svg { width: 13px; height: 13px; color: var(--bcx-lima); }
.bcx-codigo { display: block; width: 100%; margin-top: -4px; padding: 6px 10px; font: 500 10.5px/1.4 var(--bcx-mono); color: var(--bcx-salvia); word-break: break-all;
  background: rgba(3, 16, 10, .7); border: 1px dashed var(--bcx-linha); max-height: 3em; overflow: hidden; text-align: left; cursor: text; user-select: all; -webkit-user-select: all; }
.bcx-vivo { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 18px; font: 700 10px var(--bcx-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--bcx-lima); }
.bcx-vivo i { width: 7px; height: 7px; border-radius: 50%; background: var(--bcx-lima); box-shadow: 0 0 8px var(--bcx-lima); animation: bcxPulso 1.1s ease-in-out infinite; }
@keyframes bcxPulso { 50% { opacity: .25; transform: scale(.7); } }

/* ---------------------------------------------------------- o boleto ---- */
.bcx-boleto { display: flex; flex-direction: column; gap: 5px; padding: 8px; border: 1px solid var(--bcx-linha-2); background: rgba(3, 16, 10, .6); clip-path: var(--bcx-corte-s); }
.bcx-barras { display: block; width: 100%; height: 46px; background: #fff; }
.bcx-linha { display: block; font: 600 12.5px/1.45 var(--bcx-mono); letter-spacing: .02em; color: var(--bcx-texto); word-spacing: .15em; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; cursor: text; }
.bcx-boleto .bcx-ensaio { align-self: flex-start; }

/* ---------------------------------------------------------- a cripto ---- */
.bcx-copia { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border: 1px solid var(--bcx-linha-2); background: rgba(3, 16, 10, .6); clip-path: var(--bcx-corte-s); }
.bcx-copia > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bcx-copia code { font: 600 12px/1.35 var(--bcx-mono); color: var(--bcx-texto); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; cursor: text; }
.bcx-copia.bcx-destaque { border-color: var(--bcx-linha); }
.bcx-alerta-rede { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; font: 500 11.5px/1.35 var(--bcx-ui); color: var(--bcx-lima);
  background: rgba(184, 242, 90, .07); border: 1px solid rgba(184, 242, 90, .35); clip-path: var(--bcx-corte-s); }
.bcx-alerta-rede svg { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.bcx-alerta-rede b { font-weight: 700; }

/* --------------------------------------------- cartão e carteira (o quadro) ---- */
.bcx-seguro { display: flex; align-items: center; gap: 6px; font: 600 11px var(--bcx-mono); letter-spacing: .04em; color: var(--bcx-leve); }
.bcx-seguro svg { flex: none; width: 13px; height: 13px; color: var(--bcx-verde); }
.bcx-seguro small { margin-left: auto; font: 500 10px var(--bcx-mono); color: var(--bcx-fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcx-seguro + .bcx-nota { margin-top: -6px; text-align: left; }
.bcx-quadro { position: relative; height: min(56dvh, 460px); min-height: 300px; border: 1px solid var(--bcx-linha); background: var(--bcx-noite); }
.bcx-quadro iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.bcx-quadro-espera { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; background: var(--bcx-noite); }
.bcx-quadro-espera b { font: 700 11px var(--bcx-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--bcx-menta); }
.bcx-quadro-espera .bcx-cta { width: auto; }

/* ---------------------------------------------------------- caiu (a festa) ---- */
.bcx-caiu { position: relative; align-items: center; text-align: center; padding: 6px 0 2px; overflow: hidden; }
.bcx-alvo { position: relative; width: 112px; height: 112px; display: grid; place-items: center; margin-top: 4px; }
.bcx-alvo .bcx-onda { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--bcx-menta); opacity: 0; animation: bcxOnda 1.3s ease-out .15s 2; }
.bcx-alvo .bcx-onda + .bcx-onda { animation-delay: .45s; border-color: var(--bcx-verde); }
@keyframes bcxOnda { 0% { transform: scale(.4); opacity: .95; } 100% { transform: scale(1.9); opacity: 0; } }
.bcx-check { width: 84px; height: 84px; }
.bcx-check .bcx-check-fundo { fill: rgba(182, 255, 212, .12); stroke: var(--bcx-menta); stroke-width: 3; transform-origin: 60px 60px; animation: bcxPop .5s cubic-bezier(.2, 1.6, .4, 1); }
.bcx-check .bcx-check-traco { stroke: var(--bcx-menta); stroke-dasharray: 90; stroke-dashoffset: 90; animation: bcxTraco .5s ease-out .25s forwards; filter: drop-shadow(0 0 8px rgba(182, 255, 212, .9)); }
@keyframes bcxPop { from { transform: scale(.3) rotate(-45deg); opacity: 0; } }
@keyframes bcxTraco { to { stroke-dashoffset: 0; } }
.bcx-faisca { position: absolute; left: 50%; top: 50%; width: 5px; height: 12px; margin: -6px 0 0 -2.5px; background: var(--bcx-cor, var(--bcx-verde)); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transform: rotate(var(--bcx-a)) translateY(0); opacity: 0; animation: bcxFaisca .9s cubic-bezier(.1, .8, .3, 1) var(--bcx-d, .1s) forwards; }
@keyframes bcxFaisca { 0% { opacity: 1; transform: rotate(var(--bcx-a)) translateY(-10px); } 100% { opacity: 0; transform: rotate(var(--bcx-a)) translateY(calc(-1 * var(--bcx-r, 70px))); } }
.bcx-caiu h3 { margin: 2px 0 0; font: 700 15px var(--bcx-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--bcx-menta); }
.bcx-mais { font: 700 12px var(--bcx-mono); letter-spacing: .08em; color: var(--bcx-menta); }
.bcx-novo-saldo { display: flex; flex-direction: column; align-items: center; gap: 1px; margin: 2px 0 4px; }
.bcx-novo-saldo small { font: 700 9.5px var(--bcx-mono); letter-spacing: .22em; color: var(--bcx-fraco); }
.bcx-novo-saldo b { font: 400 26px/1.15 var(--bcx-num); font-variant-numeric: tabular-nums; color: var(--bcx-menta); text-shadow: 0 0 18px rgba(182, 255, 212, .4); }
.bcx-caiu .bcx-cta { align-self: stretch; }

/* ------------------------------------------------- reserva, sessão, erro ---- */
.bcx-icone { align-self: center; width: 52px; height: 52px; display: grid; place-items: center; color: var(--bcx-verde);
  border: 1px solid var(--bcx-linha); background: rgba(25, 229, 122, .07); clip-path: var(--bcx-corte); }
.bcx-icone svg { width: 24px; height: 24px; }
.bcx-icone.bcx-alerta { color: var(--bcx-lima); border-color: rgba(184, 242, 90, .4); background: rgba(184, 242, 90, .07); }
.bcx-icone.bcx-erro { color: var(--bcx-atencao); border-color: rgba(184, 242, 90, .45); background: rgba(184, 242, 90, .07); }
.bcx-centro { text-align: center; }
.bcx-msg-erro { margin: 0; min-height: 0; font: 500 11.5px var(--bcx-mono); color: var(--bcx-atencao); text-align: center; }
.bcx-msg-erro:empty { display: none; }

/* ---------------------------------------------------------- o saque ---- */
.bcx-grande { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px; border: 1px solid var(--bcx-linha); clip-path: var(--bcx-corte);
  background: radial-gradient(80% 120% at 50% 50%, rgba(25, 229, 122, .09), rgba(3, 16, 10, .4)); }
.bcx-grande small { font: 700 9.5px var(--bcx-mono); letter-spacing: .22em; color: var(--bcx-fraco); }
.bcx-grande b { font: 400 26px/1.15 var(--bcx-num); font-variant-numeric: tabular-nums; }
.bcx-rota { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; counter-reset: bcx; }
.bcx-rota li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 7px; text-align: center;
  font: 600 10.5px/1.2 var(--bcx-ui); color: var(--bcx-leve); background: rgba(25, 229, 122, .04); border: 1px solid var(--bcx-linha-2); clip-path: var(--bcx-corte-s); }
.bcx-rota li svg { width: 17px; height: 17px; color: var(--bcx-folha); }
.bcx-rota li::before { counter-increment: bcx; content: counter(bcx); position: absolute; left: 5px; top: 3px; font: 700 9px var(--bcx-mono); color: var(--bcx-fraco); }
.bcx-rota li.bcx-feito { color: var(--bcx-texto); border-color: var(--bcx-linha); }
.bcx-rota li.bcx-feito svg { color: var(--bcx-verde); }
.bcx-rota li.bcx-agora { color: var(--bcx-texto); border-color: var(--bcx-verde); background: rgba(25, 229, 122, .1); }
.bcx-hist { list-style: none; margin: 0; padding: 0; font: 500 11.5px var(--bcx-mono); }
.bcx-hist li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 2px; border-top: 1px dashed rgba(25, 229, 122, .14); color: var(--bcx-leve); }
.bcx-hist li b { font-weight: 700; color: var(--bcx-texto); font-variant-numeric: tabular-nums; }
.bcx-hist li .bcx-st-enviado { color: var(--bcx-verde); }
.bcx-hist li .bcx-st-processando { color: var(--bcx-lima); }
.bcx-hist li .bcx-st-falhou { color: var(--bcx-atencao); }
.bcx-hist-tit { margin: 0; font: 700 9.5px var(--bcx-mono); letter-spacing: .22em; color: var(--bcx-fraco); }
.bcx-recentes { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }

.bcx-vivo-area { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* o QR e o código de barras ficam no branco (a leitura do app do banco); o resto do vidro é verde-noite */
@media (prefers-reduced-motion: reduce) {
  .bcx-raiz *, .bcx-raiz *::before, .bcx-raiz *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .bcx-qr .bcx-varre, .bcx-faisca, .bcx-onda { display: none; }
  .bcx-check .bcx-check-traco { stroke-dashoffset: 0; }
}