/* Carteira Liquix — visual feito à mão, igual ao do painel.
   Sem framework e sem fonte de CDN de propósito: a CSP desta página proíbe qualquer
   origem externa, porque é ela que segura a semente do cliente. A fonte da marca é
   SERVIDA POR NÓS (`font-src 'self'`) — mesma letra do painel, sem abrir a porta. */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* Mesmos tons do painel (liquix.tech): emoldurada, a carteira aparece dentro dele —
     duas paletas diferentes na mesma tela fazem o cliente achar que saiu do site. */
  --fundo:      #0A0F1E;
  --superficie: rgba(255,255,255,.045);
  --borda:      rgba(255,255,255,.10);
  --texto:      #e8eef5;
  --tenue:      #93a4b8;
  --neon:       #2DD4BF;
  --neon-2:     #22D3EE;
  --neon-fraco: rgba(45,212,191,.14);
  --brilho:     0 0 0 1px rgba(45,212,191,.18), 0 18px 48px -22px rgba(34,211,238,.55);
  --alerta:     #ffb020;
  --erro:       #ff5f6d;
  --raio: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* O atributo `hidden` do HTML esconde via `display: none` na folha do navegador — que
   perde para QUALQUER seletor de classe nosso que defina display. Resultado: elementos
   com hidden="" continuavam aparecendo (a faixa de backup surgia com saldo abaixo do
   limite, e o campo de senha ficava sempre visível). Esta regra devolve ao `hidden` o
   poder que ele deveria ter. */
[hidden] { display: none !important; }

body {
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.5 "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
}

/* Dentro do quadro do painel (ver `ajustarParaMoldura` em js/painel.js).
 *
 * Em janela inteira, centralizar no meio da tela é o certo — a carteira é a página. Dentro
 * do quadro isso vira defeito: o `100dvh` passa a valer a altura do QUADRO, a carteira se
 * centraliza nela e sobra tarja preta em cima e embaixo. Quanto maior o quadro, pior fica.
 *
 * Emoldurada, então: sem altura mínima e conteúdo colado no topo. Aí o quadro pode encolher
 * até o tamanho exato do conteúdo, que é o que o painel faz com o aviso de altura. */
html[data-emoldurado] body {
  min-height: 0;
  place-items: start stretch;
  padding: 16px;
  /* Emoldurada, a carteira fica TRANSPARENTE: o painel desenha o fundo vivo (aurora/gotas)
     ATRÁS do quadro, e a carteira flutua nele em vez de ser um bloco preto encaixado numa
     caixa. Sozinha (tela cheia) o fundo volta ao sólido normal. */
  background: transparent;
}
/* O fundo vivo da própria carteira sai quando emoldurada — quem manda no fundo ali é o
   painel. Deixar os dois criaria duas camadas de aurora concorrendo. */
html[data-emoldurado] .fundo-vivo { display: none; }

/* ── fundo vivo ──────────────────────────────────────────────────────
 * Aurora que respira + gotas neon subindo. Tudo em CSS: a CSP proíbe origem externa e não
 * há WebGL aqui. Fica ATRÁS de tudo e não recebe toque. O conteúdo (#app) tem fundo próprio
 * translúcido, então isto aparece nas bordas sem atrapalhar a leitura de nada. */
.fundo-vivo {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  background: radial-gradient(70% 45% at 50% -5%, rgba(45,212,191,.10), transparent 70%);
}

/* Duas manchas de luz que giram devagar e mudam de brilho — o "respirar" do site. */
.aurora {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .5;
  will-change: transform, opacity;
}
.aurora.a1 {
  width: 60vmax; height: 60vmax; top: -22vmax; left: -14vmax;
  background: radial-gradient(circle, rgba(34,211,238,.42), transparent 62%);
  animation: aurora-1 20s ease-in-out infinite;
}
.aurora.a2 {
  width: 52vmax; height: 52vmax; bottom: -20vmax; right: -14vmax;
  background: radial-gradient(circle, rgba(45,212,191,.38), transparent 62%);
  animation: aurora-2 26s ease-in-out infinite;
}
@keyframes aurora-1 {
  0%, 100% { transform: translate(0,0) scale(1);     opacity: .40; }
  50%      { transform: translate(6vmax,4vmax) scale(1.15); opacity: .60; }
}
@keyframes aurora-2 {
  0%, 100% { transform: translate(0,0) scale(1.05);  opacity: .35; }
  50%      { transform: translate(-5vmax,-3vmax) scale(1); opacity: .55; }
}

/* Gotas da marca subindo devagar, com neon — as mesmas do topo do site. */
.gota-flut {
  position: absolute; bottom: -80px;
  background: url("../img/gota.png") center/contain no-repeat;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(34,211,238,.7));
  will-change: transform, opacity;
}
.gota-flut.g1 { left:  8%; width: 26px; height: 26px; animation: subir 19s linear infinite;      }
.gota-flut.g2 { left: 32%; width: 18px; height: 18px; animation: subir 24s linear infinite 4s;   }
.gota-flut.g3 { left: 54%; width: 34px; height: 34px; animation: subir 16s linear infinite 8s;   }
.gota-flut.g4 { left: 73%; width: 20px; height: 20px; animation: subir 27s linear infinite 2s;   }
.gota-flut.g5 { left: 88%; width: 28px; height: 28px; animation: subir 21s linear infinite 11s;  }
@keyframes subir {
  0%   { transform: translateY(0) rotate(0deg);       opacity: 0;   }
  12%  { opacity: .55; }
  88%  { opacity: .45; }
  100% { transform: translateY(-112vh) rotate(38deg); opacity: 0;   }
}

/* Tela parada para quem pediu menos movimento no sistema. */
@media (prefers-reduced-motion: reduce) {
  .aurora, .gota-flut { animation: none; }
  .gota-flut { display: none; }
}

#app { width: 100%; max-width: 420px; }

.tela { display: none; flex-direction: column; gap: 14px; }
.tela.ativa { display: flex; animation: entra .25s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .tela.ativa { animation: none; }
  .girando { animation-duration: 2s; }
}

/* ── marca ───────────────────────────────────────────── */
.marca { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.marca h1 {
  font-size: 30px; letter-spacing: -.02em; font-weight: 700;
  background: linear-gradient(100deg, var(--neon) 10%, var(--neon-2) 60%, #a5f3fc 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* A gota de verdade da marca, com o mesmo neon pulsante do topo do site — antes era um
   quadradinho arredondado em CSS, que não é a identidade e destoava do painel. */
.gota {
  width: 34px; height: 34px; flex: none;
  background: url("../img/gota.png") center/contain no-repeat;
  filter: drop-shadow(0 0 5px var(--neon)) drop-shadow(0 0 16px rgba(34,211,238,.75));
  animation: gota-neon 6s ease-in-out infinite;
}
@keyframes gota-neon {
  0%, 100% { filter: drop-shadow(0 0 4px var(--neon)) drop-shadow(0 0 14px rgba(34,211,238,.6)); }
  50%      { filter: drop-shadow(0 0 8px var(--neon)) drop-shadow(0 0 26px rgba(34,211,238,.95)); }
}
/* Respeita quem pediu menos movimento no sistema. */
@media (prefers-reduced-motion: reduce) { .gota { animation: none; } }

/* O neon da gota DENTRO do QR.
 *
 * Anima só a opacidade de um brilho que já está recortado no disco branco (ver `qrSvg` em
 * js/qr.js). Nada de `filter: drop-shadow` aqui: sombra vaza para fora do elemento e cairia
 * nos quadradinhos do QR — leitora trabalha por contraste, e preto lavado de azul vira
 * cinza. Opacidade dentro de um recorte não tem como escapar. */
.qr-brilho {
  opacity: .55;
  animation: qr-neon 3.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes qr-neon {
  0%, 100% { opacity: .35; }
  50%      { opacity: .9; }
}
@media (prefers-reduced-motion: reduce) { .qr-brilho { animation: none; opacity: .5; } }

/* ── o copo: neon antes, líquido depois ──────────────────────────────────────
 *
 * A ordem importa e é decisão do dono, que também é a decisão SEGURA:
 *
 *   ANTES de ser lido  → o QR fica limpo. Só a gota no meio e o neon pulsando na BORDA de
 *                        fora. Nada encosta nos quadradinhos nem na margem branca em volta
 *                        (a norma do QR exige essa margem; leitora sem ela falha).
 *   DEPOIS de enviado  → aí o líquido sobe POR CIMA do código, e pode: quem ia ler já leu,
 *                        o dinheiro já está na rede. Um QR que ninguém mais precisa
 *                        escanear não precisa mais ser escaneável.
 *
 * E o nível é DADO, não enfeite: 0 parado, 55% quando a rede já viu o dinheiro mas ainda
 * não confirmou, 100% confirmado. Barra que sobe sozinha enquanto nada acontece é mentira
 * educada — e aqui o cliente está esperando DINHEIRO. */
/* SÓ o cartão branco do QR, com um HALO neon em volta. Sem caixa escura, sem linha de
   borda — era isso que fazia parecer "caixa dentro de caixa". O copo agora só abraça o
   cartão (largura do conteúdo) e recorta o líquido no formato dele. */
.qr-copo {
  position: relative;
  align-self: center;
  width: fit-content;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .4s ease;
}
.qr-copo .qr { position: relative; z-index: 1; display: block; }

/* Parado: um halo que respira em volta do cartão branco — glow puro, sem anel de borda. */
.qr-copo[data-estado="parado"] { animation: qr-glow 3.6s ease-in-out infinite; }
@keyframes qr-glow {
  0%, 100% { box-shadow: 0 0 20px -4px rgba(34,211,238,.45); }
  50%      { box-shadow: 0 0 42px -2px rgba(34,211,238,.95); }
}

/* O líquido fica ACIMA do QR (z-index 2). Só aparece quando já há dinheiro a caminho —
   com `--nivel: 0%` ele tem altura zero e não cobre nada. */
.qr-liquido {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--nivel, 0%);
  background:
    linear-gradient(180deg, rgba(34,211,238,.62), rgba(45,212,191,.42) 45%, rgba(45,212,191,.30));
  backdrop-filter: blur(1.5px) saturate(150%);
  -webkit-backdrop-filter: blur(1.5px) saturate(150%);
  transition: height 1.4s cubic-bezier(.22,.9,.3,1);
  z-index: 2;
  pointer-events: none;
}
/* A crista ondulando, para parecer líquido e não barra de progresso. */
.qr-liquido::before {
  content: "";
  position: absolute; left: -50%; right: -50%; top: -9px; height: 18px;
  background: radial-gradient(50% 100% at 50% 100%, rgba(150,245,255,.95), transparent 72%);
  animation: qr-onda 4.5s ease-in-out infinite;
}
@keyframes qr-onda {
  0%, 100% { transform: translateX(-6%) scaleY(.8); }
  50%      { transform: translateX(6%)  scaleY(1.15); }
}

.qr-copo[data-estado="chegando"]   { animation: none; box-shadow: 0 0 36px -4px rgba(34,211,238,.85); }
.qr-copo[data-estado="confirmado"] { animation: none; box-shadow: 0 0 44px -2px rgba(45,212,191,.95); }

.qr-situacao { font-size: 13px; color: var(--neon); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .qr-copo[data-estado="parado"] { animation: none; box-shadow: 0 0 22px -6px rgba(34,211,238,.4); }
  .qr-liquido { transition: none; }
  .qr-liquido::before { animation: none; }
}
}

h2 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.sub { color: var(--tenue); font-size: 15px; }
.rotulo { color: var(--tenue); font-size: 12px; text-transform: uppercase; letter-spacing: .09em; }

/* ── campos ──────────────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span { font-size: 13px; color: var(--tenue); }

input, textarea {
  width: 100%;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--texto);
  padding: 13px 14px;
  font: inherit;
  transition: border-color .15s;
}
textarea { resize: vertical; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15px; }
input:focus, textarea:focus { outline: none; border-color: var(--neon); }
input::placeholder, textarea::placeholder { color: #4a5a6d; }

/* ── botões ──────────────────────────────────────────── */
.btn {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--raio);
  padding: 14px 18px;
  font: inherit; font-weight: 600;
  cursor: pointer;
  transition: transform .12s, filter .15s, background .15s;
}
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }

.primario {
  background: linear-gradient(100deg, var(--neon), var(--neon-2));
  color: #04201b;
  box-shadow: var(--brilho);
}
.primario:hover:not(:disabled) { filter: brightness(1.08); }
.secundario { background: var(--superficie); color: var(--texto); border-color: var(--borda); }
.fantasma   { background: none; color: var(--tenue); }
.fantasma:hover { color: var(--texto); }
.pequeno    { width: auto; padding: 9px 16px; font-size: 14px; background: var(--alerta); color: #241800; }
.link { background: none; border: none; color: var(--tenue); font: inherit; cursor: pointer; text-decoration: underline; }

/* ── carteira ────────────────────────────────────────── */
.topo { display: flex; justify-content: space-between; align-items: center; }
.saldo {
  font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
  background: linear-gradient(100deg, #e8fbff 10%, var(--neon) 55%, var(--neon-2) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.saldo-cripto { color: var(--tenue); font-size: 14px; margin-top: -8px; }

/* ── lista de ativos (como qualquer carteira Liquid) ─────────────── */
.ativos { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ativo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.ativo-nome { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ativo-nome strong { font-size: 15px; font-weight: 650; }
.ativo-nome span { font-size: 11.5px; color: var(--tenue); }
.ativo-valor { text-align: right; font-weight: 700; font-size: 16px; white-space: nowrap;
  display: flex; flex-direction: column; gap: 1px; }
.ativo-chegando { font-size: 11.5px; font-weight: 600; color: var(--neon); }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.cartao.tenue { background: none; }

.endereco {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px; line-height: 1.7;
  word-break: break-all;
  color: var(--texto);
}
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--tenue); }

/* ── código que se copia com um toque ────────────────────────
   O cliente não deveria precisar mirar num botão para copiar um código de 60
   caracteres — ainda mais no celular. Tocar no próprio código copia.
   `user-select: all` faz um toque selecionar o código INTEIRO: quem preferir
   copiar do jeito antigo (selecionar e Ctrl+C) também consegue, sem pegar
   metade do endereço por engano. */
.copiavel {
  cursor: pointer;
  user-select: all;
  -webkit-user-select: all;
  position: relative;
  border-radius: 8px;
  padding: 6px 8px;
  margin: -6px -8px;                 /* compensa o padding: não desloca o layout */
  transition: background-color .15s;
}
.copiavel:hover  { background: rgba(255, 255, 255, .04); }
.copiavel:active { background: rgba(255, 255, 255, .08); }

/* Aviso de "copiado" preso ao próprio código, para o olho não procurar longe. */
.copiavel.copiado::after {
  content: "Copiado ✓";
  position: absolute; right: 6px; top: -1.5em;
  font-size: 12px; font-weight: 600;
  color: var(--neon);
  font-family: system-ui, sans-serif;
  pointer-events: none;
}
/* Dica discreta de que dá para tocar — some quando já copiou. */
.copiavel::before {
  content: "toque para copiar";
  position: absolute; right: 6px; top: -1.5em;
  font-size: 11px; color: var(--tenue);
  font-family: system-ui, sans-serif;
  opacity: .7; pointer-events: none;
}
.copiavel.copiado::before { content: none; }

.faixa-backup {
  background: #2a1f05;
  border: 1px solid #5a4310;
  border-radius: var(--raio);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.faixa-backup strong { color: var(--alerta); }
.faixa-backup span { font-size: 14px; color: #d8c9a4; }

/* ── palavras do backup ──────────────────────────────── */
.palavras {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px; margin: 4px 0;
  list-style: none; counter-reset: p;
}
.palavras li {
  counter-increment: p;
  font-family: ui-monospace, Menlo, monospace; font-size: 15px;
  display: flex; gap: 8px; align-items: baseline;
}
.palavras li::before {
  content: counter(p);
  color: var(--tenue); font-size: 11px; min-width: 16px; text-align: right;
}

/* ── avisos ──────────────────────────────────────────── */
.aviso { color: var(--erro); font-size: 14px; }
.aviso.fixo {
  color: #d8c9a4; background: #2a1f05; border: 1px solid #5a4310;
  border-radius: var(--raio); padding: 12px 14px; font-size: 13.5px;
}

/* ── carregando ──────────────────────────────────────── */
.girando {
  width: 34px; height: 34px; margin: 0 auto;
  border: 3px solid var(--borda); border-top-color: var(--neon);
  border-radius: 50%;
  animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
#tela-carregando { text-align: center; gap: 18px; }

/* ── QR do endereço ──────────────────────────────────────── */
.qr {
  align-self: center;
  background: #fff;              /* leitor de QR precisa de fundo claro */
  padding: 10px;
  border-radius: 10px;
  line-height: 0;                /* tira o espaço fantasma abaixo do svg */
}
.qr svg { width: 168px; height: 168px; display: block; }

/* ── extrato ─────────────────────────────────────────────── */
.extrato { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.extrato li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--borda);
}
.extrato li:last-child { border-bottom: none; }
.extrato .quando { color: var(--tenue); font-size: 13px; }
.extrato .valor { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.extrato .entrou { color: var(--neon); }
.extrato .saiu { color: var(--texto); }
.extrato .pendente { color: var(--alerta); font-size: 12px; }
.extrato .vazio { color: var(--tenue); font-size: 14px; padding: 6px 0; }

/* ── conferência do envio ────────────────────────────────── */
.linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.linha span { color: var(--tenue); font-size: 14px; }
.linha strong { font-variant-numeric: tabular-nums; }
.linha.total { border-top: 1px solid var(--borda); padding-top: 10px; margin-top: 2px; }
.linha.total strong { color: var(--neon); font-size: 18px; }
.campo .dica { font-size: 12.5px; color: var(--tenue); margin-top: -2px; }

/* ── convite para instalar ───────────────────────────────── */
.faixa-instalar {
  background: linear-gradient(160deg, #0d2b28, #0e151d);
  border: 1px solid #1b7a6b;
  border-radius: var(--raio);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.faixa-instalar strong { color: var(--neon); }
.faixa-instalar span { font-size: 14px; color: #a8c8c2; }
.faixa-instalar .btn.claro { background: var(--neon); color: #04201b; }
.faixa-instalar .link { color: #7d9e98; font-size: 13px; }

.faixa-instalar .passos {
  margin: 2px 0 0 18px; padding: 0;
  font-size: 14px; color: #cfe6e1; line-height: 1.7;
}
.faixa-instalar .passos b { color: var(--neon); font-weight: 600; }
.faixa-instalar .porque { font-size: 13px; color: var(--alerta); }

/* ── palavras escondidas até tocar ───────────────────────────
   Quem está atrás do cliente não lê, e print acidental não entrega tudo. */
.palavras.borrado li { filter: blur(6px); user-select: none; }
.palavras.borrado { position: relative; }

/* Mesma proteção para a chave secreta (um <strong>, não uma lista). */
strong.borrado { filter: blur(6px); user-select: none; }

/* ── kit de troca de aparelho (código + chave secreta) ───────── */
.kit-recuperacao { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.kit-recuperacao .linha strong { max-width: 60%; text-align: right; word-break: break-all; }
.sub.tenue { color: var(--tenue); font-size: 13px; }
.linha-botoes { display: flex; gap: 8px; margin-top: 4px; }
.linha-botoes .btn { flex: 1; }