/* BTCopySite: o estilo.
 *
 * A identidade e a do app BTCopy (APPinfinitycopy/padrao.md): fundo quase
 * preto com a arte `background1`, ouro como acento, cartao claro-translucido
 * com borda (sombra escura nao aparece sobre preto) e halo dourado como unica
 * "sombra". Contrastes medidos contra #000 no padrao.md, secao 4.
 *
 * Espacamento so de 4 em 4 (4, 8, 12, 16, 24, 32, 48, 64). Texto nunca abaixo
 * de 12 px. */

:root {
  --fundo: #000000;
  --texto: #ffffff;          /* 21,0:1 */
  --texto-2: #a1a1aa;        /* 8,2:1 */
  --acento: #d4a340;         /* 9,1:1, o ouro que carrega informacao */
  --acento-forte: #e8b84b;   /* 11,4:1 */
  --ouro-moldura: #fccc21;   /* 13,3:1 */
  --alta: #34d399;           /* 10,9:1, sempre com sinal */
  --baixa: #f87171;          /* 7,6:1, sempre com sinal */

  --cartao: rgba(255, 255, 255, 0.06);
  --borda: rgba(255, 255, 255, 0.12);
  --borda-fraca: rgba(255, 255, 255, 0.08);
  --ouro-vidro: rgba(212, 163, 64, 0.1);
  --ouro-linha: rgba(212, 163, 64, 0.4);
  --halo: rgba(252, 204, 33, 0.22);

  --raio: 16px;
  --raio-p: 12px;
  --largura: 1160px;
  --margem: 24px;

  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-titulo: "Exo 2", "Inter", system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ⚠️ `hidden` ESCONDE SEMPRE. Sem isto, o `display: grid` do `.heroi` e da
 * `.vitrine` vence o atributo, e a abertura continuava na tela de quem ja
 * tinha entrado (23/10/2026). */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
  font: 400 16px/1.6 var(--fonte);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* O fundo do app, fixo, num lugar so (padrao.md, secao 1). Cortar e melhor
 * que distorcer: o grafismo e decorativo. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--fundo) url("../assets/img/fundo.webp") center / cover no-repeat;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 75% 18%, rgba(252, 204, 33, 0.1), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.8));
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--fonte-titulo);
  letter-spacing: -0.01em;
}

:focus-visible {
  outline: 2px solid var(--acento-forte);
  outline-offset: 3px;
  border-radius: 8px;
}

.pular {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: var(--raio-p);
  background: var(--acento-forte);
  color: #000;
  font-weight: 600;
  text-decoration: none;
}

.pular:focus {
  top: 16px;
}

.ouro {
  color: var(--acento-forte);
}

/* ---------------------------------------------------------------- topo */

.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda-fraca);
}

.topo__dentro {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 8px var(--margem);
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.topo__marca img {
  height: 28px;
  width: auto;
}

.topo__menu {
  display: flex;
  gap: 24px;
}

.topo__menu a {
  padding: 8px 0;
  color: var(--texto-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.topo__menu a:hover {
  color: var(--texto);
}

/* O link de parceria (um mailto). O texto encolhe com a tela: "Para parceria,
 * clique aqui" no PC, "Parceria" no celular largo e so o envelope no celular
 * estreito, onde entre o logo e o "Fazer login" sobram ~65 px. */
.topo__parceria {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--texto-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.topo__parceria:hover {
  color: var(--acento-forte);
}

.topo__parceria svg {
  width: 18px;
  height: 18px;
  color: var(--acento);
  flex: none;
}

.topo__parceria-curto {
  display: none;
}

.topo__conta {
  margin-left: auto;
  min-height: 40px;
  display: flex;
  align-items: center;
}

/* A pessoa logada, no topo. */
.usuario {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.usuario__foto {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--ouro-linha);
  object-fit: cover;
  background: var(--cartao);
  flex: none;
}

.usuario__inicial {
  display: grid;
  place-items: center;
  color: var(--acento-forte);
  font-weight: 700;
}

.usuario__nome {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}

/* --------------------------------------------------------------- botoes */

.botao-fantasma,
.botao-contorno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font: 600 14px/1 var(--fonte);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.botao-fantasma {
  min-height: 36px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--texto-2);
}

.botao-fantasma:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--texto);
}

.botao-contorno {
  background: transparent;
  border: 1px solid var(--acento);
  color: var(--acento-forte);
  font-size: 15px;
}

.botao-contorno:hover {
  background: var(--ouro-vidro);
}

.botao-contorno[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.link-secundario {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 8px;
  color: var(--texto);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 6px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.link-secundario:hover {
  color: var(--acento-forte);
  text-decoration-color: var(--acento);
}

/* O botao do Google e desenhado pelo proprio Google (regra de marca deles).
 * O halo dourado em volta e o que casa ele com o resto da tela.
 *
 * ⚠️ A CAIXA TEM DE TER O TAMANHO EXATO DO BOTAO, 280 x 40. O Google desenha o
 * botao "large" com 40 px de altura dentro de um iframe de 44 px, puxado 2 px
 * para cima (`margin: -2px -10px`). Com a caixa de 44 px o contorno dourado
 * ficava 4 px abaixo da borda do botao (23/10/2026). A largura e a mesma do
 * `width: 280` do `renderButton` (app.js). A area de toque continua com 44 px,
 * que e o iframe. */
.google-alvo {
  width: 280px;
  height: 40px;
  border-radius: 20px;
  line-height: 0;
  box-shadow: 0 0 0 1px rgba(252, 204, 33, 0.45), 0 0 24px var(--halo);
}

.google-alvo--topo {
  width: auto;
  height: auto;
  box-shadow: none;
}

.google-alvo:empty {
  background: var(--cartao);
}

/* -------------------------------------------------------------- esqueleto */

.esqueleto {
  display: inline-block;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  background-size: 200% 100%;
  animation: brilhar 1.4s ease-in-out infinite;
}

.esqueleto--pilula {
  width: 168px;
  height: 40px;
  border-radius: 999px;
}

@keyframes brilhar {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* ----------------------------------------------------------------- heroi */

.heroi {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 24px var(--margem) 16px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  align-items: center;
}

.selo {
  display: inline-flex;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--ouro-linha);
  border-radius: 999px;
  background: var(--ouro-vidro);
  color: var(--acento-forte);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.heroi h1 {
  margin: 16px 0 12px;
  font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1.08;
}

.heroi__lead {
  max-width: 64ch;
  margin: 0 0 20px;
  color: var(--texto-2);
  font-size: 16px;
  line-height: 1.55;
}

.heroi__acao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  min-height: 48px;
}

.aviso-erro {
  margin: 12px 0 0;
  max-width: 56ch;
  color: var(--baixa);
  font-size: 14px;
}

.aviso-erro::before {
  content: "⚠ ";
}

/* No lugar do botao do Google, quando o endereco nao e seguro (o teste pelo
 * Wi-Fi). E aviso, nao erro: ouro, e nao vermelho. */
.aviso-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 420px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--ouro-linha);
  border-radius: var(--raio-p);
  background: var(--ouro-vidro);
  color: var(--texto);
  font-size: 14px;
}

.aviso-info svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--acento-forte);
  flex: none;
}

.garantias {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: var(--texto-2);
  font-size: 13px;
}

.garantias li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.garantias svg {
  width: 16px;
  height: 16px;
  color: var(--acento);
  flex: none;
}

.heroi__arte {
  position: relative;
  display: grid;
  place-items: center;
}

.heroi__brilho {
  position: absolute;
  inset: 8% 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 204, 33, 0.28), transparent 65%);
  filter: blur(24px);
}

/* O Bitcoin acompanha a ALTURA da tela: a pagina inicial cabe inteira no PC,
 * sem rolar (pedido do dono, 23/10). */
.heroi__btc {
  position: relative;
  width: auto;
  height: min(300px, 34vh);
  max-width: 100%;
  animation: flutuar 6s ease-in-out infinite;
}

@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ---------------------------------------------------------------- rodada */

/* As regras e a rodada inicial: lado a lado no PC (regras a esquerda) e um
 * embaixo do outro no celular (regras em cima). A faixa da Binance vai embaixo
 * dos dois. */
.vitrine {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--margem) 16px;
  display: grid;
  gap: 12px;
}

.vitrine__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.rodada {
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
  border-radius: 20px;
  border: 1px solid rgba(252, 204, 33, 0.55);
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(212, 163, 64, 0.18), transparent 60%),
    linear-gradient(135deg, rgba(212, 163, 64, 0.08), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 0 0 1px rgba(252, 204, 33, 0.08), 0 0 48px rgba(252, 204, 33, 0.14);
}

.rodada__selo {
  margin: 0;
  color: var(--ouro-moldura);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.rodada__valor {
  margin: 4px 0 8px;
  font-size: clamp(44px, 4.4vw, 56px);
  font-style: italic;
  font-weight: 800;
  line-height: 1;
}

.rodada__moeda {
  margin-right: 8px;
  color: var(--acento-forte);
  font-size: 0.42em;
  vertical-align: 0.9em;
}

.rodada__periodo {
  margin-left: 12px;
  color: var(--texto-2);
  font: 500 16px/1 var(--fonte);
  font-style: normal;
  letter-spacing: 0;
}

.rodada__texto {
  max-width: 44ch;
  margin: 0 0 12px;
  color: var(--texto-2);
  font-size: 14px;
  line-height: 1.5;
}

/* Os tres fatos, lado a lado no PC (cabe a pagina sem rolar) e em lista no
 * celular. */
.rodada__fatos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.rodada__fatos li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: rgba(0, 0, 0, 0.4);
  line-height: 1.35;
}

.rodada__fatos strong {
  font-size: 14px;
  font-weight: 700;
}

.rodada__fatos span {
  color: var(--texto-2);
  font-size: 12px;
}

/* ---------------------------------------------------------------- cartao */

.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

/* ---------------------------------------------------------------- passos */

.passos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.passo {
  padding: 24px;
}

.passo__numero {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border: 1px solid var(--acento);
  border-radius: 50%;
  color: var(--acento-forte);
  font: 700 16px/1 var(--fonte-titulo);
  box-shadow: 0 0 16px var(--halo);
}

/* O passo 1 ja esta feito: so quem entrou ve esta secao. */
.passo--feito .passo__numero {
  background: var(--acento-forte);
  border-color: var(--acento-forte);
  color: #000;
}

.passo h3 {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 600;
}

.passo p {
  margin: 0;
  color: var(--texto-2);
  font-size: 15px;
}

/* ----------------------------------------------------------------- robos */

.robos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.robo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 10px;
  padding: 14px 16px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.robo:hover {
  border-color: var(--ouro-linha);
  box-shadow: 0 0 24px rgba(252, 204, 33, 0.1);
  transform: translateY(-2px);
}

/* O robo com operacao aberta agora (02/11/2026, pedido do dono): borda e
 * brilho verdes, e o selo "Em operacao ao vivo" embaixo do nome. O verde e o
 * da alta, e nunca vem sozinho: o selo diz em texto o que a cor diz. */
.robo--ao-vivo,
.robo--ao-vivo:hover {
  border-color: rgba(52, 211, 153, 0.55);
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.1), rgba(52, 211, 153, 0.02) 55%), var(--cartao);
  box-shadow: 0 0 24px rgba(52, 211, 153, 0.14);
}

.robo__ao-vivo {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid rgba(52, 211, 153, 0.45);
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.1);
  color: var(--alta);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.robo__ponto {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--alta);
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.7);
}

@media (prefers-reduced-motion: no-preference) {
  .robo__ponto {
    animation: robo-vivo 1.6s ease-in-out infinite;
  }

  @keyframes robo-vivo {
    50% {
      opacity: 0.35;
      box-shadow: 0 0 2px rgba(52, 211, 153, 0.4);
    }
  }
}

.robo__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.robo__nome {
  font-size: 16px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.robo__sobre {
  margin: 2px 0 0;
  color: var(--texto-2);
  font-size: 12px;
}

.etiqueta {
  flex: none;
  padding: 2px 8px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  color: var(--texto-2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.etiqueta--usdc {
  border-color: var(--ouro-linha);
  color: var(--acento);
}

/* O selo com o logo da moeda (USDT ou USDC) na frente do nome (23/10). */
.etiqueta--moeda {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: 3px;
}

.etiqueta--moeda img {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.moedas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.moeda {
  padding: 3px 10px;
  border: 1px solid rgba(212, 163, 64, 0.35);
  border-radius: 8px;
  background: var(--ouro-vidro);
  color: var(--acento-forte);
  font-size: 13px;
  font-weight: 600;
}

/* Os 7 dias dos FRANK: etiquetas que se acomodam na largura, como as moedas
 * dos PCraft. Grade de 7 colunas nao cabe no card (37 px por dia), e grade de 3
 * deixava o domingo sozinho na ultima linha. */
.semana {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.semana li {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid rgba(212, 163, 64, 0.3);
  border-radius: 8px;
  background: rgba(212, 163, 64, 0.06);
}

.semana__dia {
  color: var(--texto-2);
  font-size: 12px;
}

/* ⚠️ A CARTEIRA NUMA LINHA SO (pedido do dono, 23/10): a faixa rola para o
 * lado, as setas andam por ela e o dedo tambem. A linha tem a mesma altura da
 * moeda do PCraft, e e isso que deixa todos os cards do mesmo tamanho. */
.moedas,
.carrossel {
  min-height: 28px;
}

.carrossel {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.semana.carrossel__lista {
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.carrossel__lista::-webkit-scrollbar {
  display: none;
}

.carrossel__lista li {
  flex: none;
  scroll-snap-align: start;
}

.carrossel__seta {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--ouro-linha);
  border-radius: 50%;
  background: var(--ouro-vidro);
  color: var(--acento-forte);
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.carrossel__seta svg {
  width: 14px;
  height: 14px;
}

.carrossel__seta:hover:not(:disabled) {
  background: rgba(212, 163, 64, 0.22);
}

.carrossel__seta:disabled {
  opacity: 0.3;
  cursor: default;
}

.semana__moeda {
  color: var(--acento-forte);
  font-size: 13px;
  font-weight: 600;
}

/* O resultado do robo, vindo do CELBD. O dinheiro e o numero grande; o
 * percentual vem embaixo, porque nem todo robo tem um (sem margem unica, o app
 * tambem nao mostra). Cor sempre junto com o sinal: verde nunca sozinho. */
.robo__numeros {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  padding-top: 10px;
  border-top: 1px solid var(--borda-fraca);
}

.robo__numeros--vazio p {
  margin: 0;
  color: var(--texto-2);
  font-size: 14px;
}

.robo__rotulo {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  margin: 0;
  color: var(--texto-2);
  font-size: 12px;
}

/* Com quanto o robo opera hoje (margem e alavancagem), ao lado do "Resultado
 * desde" (pedido do dono, 23/10). Informacao, e nao resultado: ouro, e nao
 * verde nem vermelho. */
.robo__config {
  padding: 1px 8px;
  border: 1px solid var(--ouro-linha);
  border-radius: 999px;
  background: var(--ouro-vidro);
  color: var(--acento-forte);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  cursor: help;
}

.robo__valor {
  margin: 0;
  font: italic 800 23px/1.2 var(--fonte-titulo);
  font-variant-numeric: tabular-nums;
}

.robo__valor--alta,
.robo__pct--alta,
.cal__total--alta {
  color: var(--alta);
}

.robo__valor--baixa,
.robo__pct--baixa,
.cal__total--baixa {
  color: var(--baixa);
}

.robo__valor--zero,
.cal__total--zero {
  color: var(--texto);
}

.robo__pct {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.robo__pct small {
  color: var(--texto-2);
  font-size: 12px;
  font-weight: 500;
}

.robo__pct--zero {
  color: var(--texto);
}

.robo__pct--sem {
  padding: 1px 8px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: var(--texto-2);
  font-size: 12px;
  font-weight: 600;
  cursor: help;
}

.robo__fatos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.robo__fatos li {
  display: flex;
  flex-direction: column;
  padding: 5px 8px;
  border: 1px solid var(--borda-fraca);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--texto-2);
  font-size: 12px;
  line-height: 1.3;
}

.robo__fatos strong {
  color: var(--texto);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* Os ultimos 30 dias: uma barra por dia, para cima o que ganhou e para baixo o
 * que perdeu. Barra fina com folga de 2 px entre elas, cantos de 1,5 px. */
.barras {
  margin: 0;
}

.barras svg {
  display: block;
  width: 100%;
  height: 32px;
  overflow: visible;
}

.barras__base {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.barras__alta {
  fill: var(--alta);
}

.barras__baixa {
  fill: var(--baixa);
}

/* Dia que fechou no zero a zero: aparece, mas sem cor de ganho nem de perda. */
.barras__zero {
  fill: var(--texto-2);
}

.barras rect:hover {
  opacity: 0.75;
}

.barras figcaption {
  margin-top: 2px;
  color: var(--texto-2);
  font-size: 12px;
}

.robo__calendario {
  margin-top: auto;
  width: 100%;
  min-height: 36px;
  font-size: 14px;
}

.robo__calendario svg {
  width: 16px;
  height: 16px;
}

.robo__calendario:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* O card enquanto o CELBD responde: o mesmo tamanho do card cheio, para a
 * grade nao pular quando os numeros chegarem. */
.robo--esqueleto {
  min-height: 300px;
}

.robo--esqueleto:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--borda);
}

.esqueleto--linha {
  width: 60%;
  height: 20px;
  border-radius: 6px;
}

.esqueleto--curta {
  width: 35%;
  height: 14px;
}

.esqueleto--bloco {
  width: 100%;
  height: 130px;
  margin-top: auto;
  border-radius: var(--raio-p);
}

/* Erro ou vazio no lugar da grade inteira. */
.estado-vazio {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
}

.estado-vazio p {
  flex: 1 1 320px;
  margin: 0;
  color: var(--texto-2);
}

/* ---------------------------------------------------------------- painel */

.painel {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 24px var(--margem) 32px;
}

.painel__ola {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.painel__sub {
  margin: 4px 0 0;
  color: var(--texto-2);
  font-size: 15px;
}

/* As abas: uma barra de pilulas, a ativa em ouro. No celular os rotulos
 * encolhem ("Minha assinatura" vira "Assinatura") para as quatro caberem numa
 * linha a 375 px, sem rolar para o lado. */
/* A linha das abas: as abas a esquerda e, na aba Robos, o seletor de ordem a
 * direita. No celular o seletor desce para baixo das abas. */
.painel__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 24px;
}

/* Menor desde 23/10 (pedido do dono): e um ajuste, e nao a acao principal da
 * tela, e com 44 px ele chamava mais atencao que a lista. */
.ordenar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 3px 0 10px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--texto-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.ordenar:hover,
.ordenar:focus-within {
  border-color: var(--ouro-linha);
}

.ordenar svg {
  width: 14px;
  height: 14px;
  color: var(--acento);
  flex: none;
}

/* O seletor nativo, sem a seta do sistema: a seta dourada vem do fundo. Nativo
 * de proposito: no celular abre a roda do proprio aparelho, e o teclado e o
 * leitor de tela funcionam sem codigo nenhum. */
.ordenar select {
  min-height: 26px;
  padding: 0 24px 0 8px;
  border: 0;
  border-radius: 999px;
  background: var(--ouro-vidro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8B84B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 12px;
  color: var(--acento-forte);
  font: 600 12px/1 var(--fonte);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.ordenar select:focus-visible {
  outline: 2px solid var(--acento-forte);
  outline-offset: 2px;
}

/* A lista que abre no PC: fundo escuro, senao o Windows a pinta de branco com
 * o texto dourado em cima. */
.ordenar option {
  background: #0b0b0d;
  color: var(--texto);
}

/* ⚠️ A BARRA QUEBRA EM VEZ DE SAIR DA TELA (03/11/2026): com a Abrir conta
 * sao seis abas (oito no admin), e entre o celular e a tela larga elas nao
 * cabiam numa linha. Os 28 px de canto dao a mesma pilula numa linha so. */
.abas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--borda);
  border-radius: 28px;
  background: rgba(0, 0, 0, 0.45);
  width: fit-content;
  max-width: 100%;
}

.abas__aba {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--texto-2);
  font: 600 14px/1 var(--fonte);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.abas__aba svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.abas__aba:hover {
  color: var(--texto);
}

.abas__aba[aria-selected="true"] {
  border-color: var(--ouro-linha);
  background: var(--ouro-vidro);
  color: var(--acento-forte);
  box-shadow: 0 0 16px rgba(252, 204, 33, 0.12);
}

.abas__curto {
  display: none;
}

/* Na tela media, os rotulos curtos do celular: as seis cabem numa linha. */
@media (max-width: 1000px) {
  .abas__longo {
    display: none;
  }

  .abas__curto {
    display: inline;
  }
}

.aba:focus-visible {
  outline-offset: 8px;
}

.aba__nota {
  max-width: 72ch;
  margin: 20px 0 0;
  color: var(--texto-2);
  font-size: 13px;
}

/* As abas que ainda nao abriram. */
.em-breve {
  max-width: 640px;
  padding: 24px;
}

.em-breve__selo {
  display: inline-flex;
  margin: 0 0 12px;
  padding: 4px 10px;
  border: 1px dashed var(--ouro-linha);
  border-radius: 999px;
  color: var(--acento-forte);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.em-breve h2 {
  font-size: 22px;
  font-weight: 700;
}

.em-breve > p {
  margin: 8px 0 16px;
  color: var(--texto-2);
}

.em-breve .regras__lista li {
  font-size: 14px;
}

.regras--painel {
  margin-top: 16px;
}

.regras--painel h2 {
  margin-bottom: 12px;
}

/* ------------------------------------------------------- minha assinatura */

/* Texto so para o leitor de tela (a legenda dos grupos de escolha). */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* O botao principal, cheio de ouro. Uma acao principal por tela. */
.botao-ouro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ouro-moldura), var(--acento));
  color: #000;
  font: 700 15px/1 var(--fonte);
  cursor: pointer;
  box-shadow: 0 0 24px var(--halo);
}

.botao-ouro:disabled {
  background: var(--cartao);
  border: 1px dashed var(--ouro-linha);
  color: var(--texto-2);
  box-shadow: none;
  cursor: not-allowed;
}

.assinatura-estado {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px 20px;
  border-color: var(--ouro-linha);
}

.assinatura-estado__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ouro-linha);
  border-radius: 50%;
  background: var(--ouro-vidro);
  color: var(--acento-forte);
}

.assinatura-estado__icone svg {
  width: 22px;
  height: 22px;
}

.assinatura-estado h2 {
  font-size: 18px;
  font-weight: 700;
}

.assinatura-estado p {
  margin: 2px 0 0;
  color: var(--texto-2);
  font-size: 14px;
}

/* A lista dos robos a esquerda e o resumo a direita, que acompanha a rolagem
 * no PC. No celular o resumo desce para baixo da lista. */
.assinatura-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

.montar {
  padding: 16px 20px;
  /* As linhas dos robos se arrumam pela largura da LISTA, e nao da tela: no PC
   * a lista divide a largura com o resumo, e a tela larga nao diz o quanto
   * sobra para ela. */
  container-type: inline-size;
}

/* O titulo a esquerda e o Ordenar a direita (23/10). Sem espaco, o Ordenar
 * desce para baixo do titulo. */
.montar__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

/* O texto cede espaco (a frase quebra em duas linhas) para o Ordenar ficar ao
 * lado do titulo; abaixo de uns 260 px de texto, o Ordenar e que desce. */
.montar__cabeca > div {
  flex: 1 1 260px;
  min-width: 0;
}

.montar__cabeca .ordenar {
  flex: none;
}

.montar__cabeca h2 {
  font-size: 20px;
  font-weight: 700;
}

/* "4 escolhidos", ao lado do titulo, escrito pelo assinatura.js. */
.montar__cabeca h2[data-contagem]:not([data-contagem=""])::after {
  content: attr(data-contagem);
  display: inline-block;
  margin-left: 10px;
  white-space: nowrap;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--ouro-vidro);
  color: var(--acento-forte);
  font: 600 12px/1.6 var(--fonte);
  vertical-align: middle;
}

.montar__cabeca p {
  margin: 2px 0 0;
  color: var(--texto-2);
  font-size: 14px;
}

.montar__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.montar__robo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 0;
  border-top: 1px solid var(--borda-fraca);
}

.montar__escolha {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  min-width: 0;
  cursor: pointer;
}

.montar__escolha input {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--acento-forte);
  cursor: pointer;
}

.montar__nome {
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.montar__opcoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* Robo nao escolhido: as opcoes ficam apagadas ate a caixa ser marcada. */
.montar__robo:not(.montar__robo--escolhido) .montar__opcoes {
  opacity: 0.4;
}

/* O desempenho do robo na frente da moeda (pedido do dono, 23/10): o
 * resultado em dolar, quantas deram gain e loss, e o %. Os mesmos numeros do
 * card da aba Robos. Ocupa o meio da linha e empurra as opcoes para a direita. */
.montar__desempenho {
  display: inline-flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
  color: var(--texto-2);
  font-size: 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.montar__valor {
  font-size: 14px;
  font-weight: 700;
}

.montar__gl b {
  font-weight: 700;
}

.montar__pct {
  font-size: 13px;
  font-weight: 700;
}

.montar__pct--sem,
.montar__sem {
  color: var(--texto-2);
  font-weight: 500;
}

/* ⚠️ UM ARRANJO SO PARA CADA LARGURA, para todas as linhas terem a mesma
 * altura (23/10/2026). Com o `flex-wrap` solto, a linha de nome comprido
 * quebrava e a de nome curto nao, e a lista ficava em degraus.
 *
 * Lista larga: uma linha (nome e moeda | desempenho | opcoes); se o meio
 * apertar, so o desempenho quebra, dentro do espaco dele. Lista media: duas
 * linhas. Lista estreita: tres. */
@container (min-width: 680px) {
  .montar__robo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 12px;
  }
}

/* Lista media (o PC de 1024 px): nome e desempenho juntos, opcoes embaixo. */
@container (min-width: 480px) and (max-width: 679.98px) {
  .montar__robo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
  }

  .montar__opcoes {
    grid-column: 1 / -1;
    padding-left: 28px;
  }
}

/* Lista estreita (o celular): nome, desempenho e opcoes, cada um na sua. */
@container (max-width: 479.98px) {
  .montar__desempenho,
  .montar__opcoes {
    width: 100%;
    flex: none;
    padding-left: 28px;
  }
}

.cor-alta {
  color: var(--alta);
}

.cor-baixa {
  color: var(--baixa);
}

/* Os botoes de escolha, colados: "US$ 10 | US$ 20" e "1x | 2x | 3x". */
.segmento {
  display: inline-flex;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
}

.segmento label {
  position: relative;
  cursor: pointer;
}

.segmento input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmento span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--texto-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.segmento input:checked + span {
  background: var(--ouro-vidro);
  box-shadow: inset 0 0 0 1px var(--ouro-linha);
  color: var(--acento-forte);
}

.segmento input:focus-visible + span {
  outline: 2px solid var(--acento-forte);
  outline-offset: 1px;
}

.segmento:disabled label {
  cursor: not-allowed;
}

.resumo {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
  border-color: var(--ouro-linha);
  box-shadow: 0 0 32px rgba(252, 204, 33, 0.08);
}

.resumo h2 {
  font-size: 18px;
  font-weight: 700;
}

.resumo__vazio {
  margin: 0;
  color: var(--texto-2);
  font-size: 14px;
}

.resumo__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--borda-fraca);
  color: var(--texto-2);
  font-size: 14px;
}

.resumo__preco {
  color: var(--texto);
  font: italic 800 26px/1 var(--fonte-titulo);
  font-variant-numeric: tabular-nums;
}

.resumo__preco small {
  margin-left: 6px;
  color: var(--texto-2);
  font: 500 12px/1 var(--fonte);
}

.resumo__rotulo {
  margin: 0;
  color: var(--texto-2);
  font-size: 13px;
}

.resumo__moedas {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resumo__moeda {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 10px;
  padding: 10px 12px;
  border: 1px solid var(--borda-fraca);
  border-radius: var(--raio-p);
  background: rgba(0, 0, 0, 0.3);
}

.resumo__moeda .etiqueta {
  grid-row: 1 / span 2;
}

.resumo__total {
  grid-column: 2;
  grid-row: 1;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.resumo__conta {
  grid-column: 2;
  grid-row: 2;
  color: var(--texto-2);
  font-size: 12px;
}

.resumo__dica,
.resumo__nota {
  margin: 0;
  color: var(--texto-2);
  font-size: 12px;
}

/* As explicacoes, abertas: a pessoa le tudo antes de escolher (23/10). */
.explicacoes {
  margin-top: 0;
}

.explicacoes__titulo {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 700;
}

.explica {
  margin-top: 8px;
  padding: 16px 20px 6px;
}

.explica h3 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
}

.explica .regras__lista {
  margin-bottom: 10px;
}

.explica p {
  max-width: 72ch;
  margin: 0 0 10px;
  color: var(--texto-2);
  font-size: 14px;
}

.explica p strong {
  color: var(--texto);
}

.explica .regras__lista li {
  font-size: 14px;
}

.explica__exemplo {
  padding: 10px 14px;
  border-left: 2px solid var(--acento);
  border-radius: 0 var(--raio-p) var(--raio-p) 0;
  background: var(--ouro-vidro);
}

/* As etapas da assinatura: 1 ler e aceitar, 2 escolher, 3 pagar. */
.etapas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.etapas__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  color: var(--texto-2);
  font-size: 13px;
  font-weight: 600;
}

.etapas__numero {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--borda);
  border-radius: 50%;
  font-size: 12px;
}

.etapas__item[aria-current="step"] {
  border-color: var(--ouro-linha);
  background: var(--ouro-vidro);
  color: var(--acento-forte);
}

.etapas__item[aria-current="step"] .etapas__numero {
  border-color: var(--acento-forte);
  background: var(--acento-forte);
  color: #000;
}

.etapas__item--feita {
  color: var(--texto);
}

.etapas__item--feita .etapas__numero {
  border-color: var(--acento);
  color: var(--acento-forte);
}

.explicacoes__sub {
  margin: -4px 0 12px;
  color: var(--texto-2);
  font-size: 14px;
}

/* O fim da leitura: os termos, a caixa do aceite e o botao que abre os robos. */
.termos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 20px 24px;
  border-color: var(--ouro-linha);
  box-shadow: 0 0 32px rgba(252, 204, 33, 0.08);
}

.termos h2 {
  font-size: 20px;
  font-weight: 700;
}

.termos > p {
  max-width: 72ch;
  margin: 0;
  color: var(--texto-2);
  font-size: 14px;
}

.termos__aceite {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: rgba(0, 0, 0, 0.35);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.termos__aceite:has(input:checked) {
  border-color: var(--ouro-linha);
  background: var(--ouro-vidro);
}

.termos__aceite input {
  flex: none;
  width: 20px;
  height: 20px;
  accent-color: var(--acento-forte);
  cursor: pointer;
}

.termos .botao-ouro {
  width: auto;
  min-width: 240px;
}

.termos .botao-ouro svg {
  width: 18px;
  height: 18px;
}

.termos__nota {
  font-size: 12px !important;
}

/* E um <button>, entao tira o fundo e a borda que o navegador poe em todo
 * botao: aqui ele tem cara de link, como o .link-secundario das outras telas. */
.ass-voltar {
  margin: -4px 0 8px;
  padding-left: 0;
  border: 0;
  background: transparent;
  font-family: var(--fonte);
  text-decoration: none;
  cursor: pointer;
}

.resumo .botao-ouro svg {
  width: 18px;
  height: 18px;
}

/* O passo 3: como criar a chave, os campos e o que vai ser conferido. */
.chave-api {
  padding: 16px 20px 20px;
}

.chave-api h2 {
  font-size: 20px;
  font-weight: 700;
}

.chave-api__lead {
  max-width: 64ch;
  margin: 4px 0 16px;
  color: var(--texto-2);
  font-size: 14px;
}

.chave-api h3 {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
}

.chave-api__passos {
  display: grid;
  gap: 8px;
  margin: 0 0 20px;
  padding-left: 20px;
  color: var(--texto-2);
  font-size: 14px;
}

.chave-api__passos li::marker {
  color: var(--acento-forte);
  font-weight: 700;
}

.chave-api__passos strong {
  color: var(--texto);
}

.chave-api__form {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--borda-fraca);
}

.campo {
  display: grid;
  gap: 6px;
}

.campo__rotulo {
  color: var(--texto-2);
  font-size: 13px;
  font-weight: 600;
}

.campo input {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: rgba(0, 0, 0, 0.45);
  color: var(--texto);
  font: 500 14px/1 var(--fonte);
}

.campo input:focus-visible {
  outline: 2px solid var(--acento-forte);
  outline-offset: 1px;
}

.campo input:disabled {
  border-style: dashed;
  opacity: 0.6;
  cursor: not-allowed;
}

.chave-api__form .botao-ouro {
  justify-self: start;
  width: auto;
  min-width: 220px;
}

.chave-api__nota {
  margin: 0;
  color: var(--texto-2);
  font-size: 12px;
}

/* A lista do que vai ser conferido. A marca e um circulo vazio: ainda "a
 * conferir". Quando a validacao existir, ela vira um certo ou um X. */
.conferencia {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.conferencia__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--texto-2);
  font-size: 14px;
}

.conferencia__item strong {
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.conferencia__marca {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1.5px dashed var(--ouro-linha);
  border-radius: 50%;
}

/* O resultado da conferencia (27/10/2026): certo verde, X vermelho, e a
 * mensagem do que falta logo embaixo do item que falhou. O que vem depois da
 * falha fica como estava, "a conferir": a conferencia para na primeira. */
.conferencia__texto {
  display: grid;
  gap: 4px;
}

.conferencia__item--ok .conferencia__marca,
.conferencia__item--falha .conferencia__marca {
  display: grid;
  place-items: center;
  border-style: solid;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.conferencia__item--ok .conferencia__marca {
  border-color: var(--alta);
  color: var(--alta);
}

.conferencia__item--ok .conferencia__marca::before {
  content: "✓";
}

.conferencia__item--falha .conferencia__marca {
  border-color: var(--baixa);
  color: var(--baixa);
}

.conferencia__item--falha .conferencia__marca::before {
  content: "✕";
}

.conferencia__item--ok {
  color: var(--texto);
}

/* O item que a funcao esta conferindo agora: o circulo gira, e o texto
 * acende. Vem um de cada vez, na ordem, enquanto a Binance responde. */
.conferencia__item--conferindo {
  color: var(--texto);
}

.conferencia__item--conferindo .conferencia__marca {
  border: 2px solid rgba(245, 197, 66, 0.25);
  border-top-color: var(--acento-forte);
  animation: conferencia-gira 0.8s linear infinite;
}

@keyframes conferencia-gira {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .conferencia__item--conferindo .conferencia__marca {
    border-color: var(--acento-forte);
    animation: conferencia-pulsa 1.4s ease-in-out infinite;
  }

  @keyframes conferencia-pulsa {
    50% { opacity: 0.35; }
  }
}

.conferencia__erro {
  color: var(--baixa);
  font-size: 13px;
}

/* O passo que a funcao pulou (o saldo, por enquanto): traco cinza, e a nota
 * em cinza tambem, e nao em vermelho, porque nao e falha. */
.conferencia__item--pulado .conferencia__marca {
  display: grid;
  place-items: center;
  border-style: solid;
  border-color: var(--texto-2);
  color: var(--texto-2);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.conferencia__item--pulado .conferencia__marca::before {
  content: "–";
}

.conferencia__item--pulado .conferencia__erro {
  color: var(--texto-2);
}

.chave-api__nota--erro {
  color: var(--baixa);
}

.chave-api__nota--ok {
  color: var(--alta);
}

/* A chave salva: no passo 3, em cima do formulario, e na aba Chave da
 * Binance. So o comeco da API Key aparece; o resto e *. */
.chave-salva {
  max-width: 640px;
  padding: 24px;
}

.chave-salva h2 {
  margin-bottom: 12px;
  font-size: 22px;
  font-weight: 700;
}

.chave-salva--passo {
  max-width: none;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--borda-fraca);
  border-radius: var(--raio-p);
  background: rgba(0, 0, 0, 0.3);
}

.chave-salva__titulo {
  margin: 0 0 10px;
  font-weight: 700;
}

.chave-salva__dados {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

.chave-salva__dados div {
  display: grid;
  gap: 2px;
}

.chave-salva__dados dt {
  color: var(--texto-2);
  font-size: 12px;
  font-weight: 600;
}

.chave-salva__dados dd {
  margin: 0;
  color: var(--texto);
}

.chave-salva__valor {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.chave-salva__marcas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.chave-salva__vazia {
  margin: 0 0 8px;
  color: var(--texto);
  font-weight: 600;
}

.chave-salva > div > p,
.chave-salva__nota {
  color: var(--texto-2);
  font-size: 14px;
}

.chave-salva__nota {
  margin: 0 0 12px;
}

/* A aba Abrir conta (03/11/2026, pedido do dono): um box por link de
 * indicacao, o texto a esquerda e a arte da campanha a direita. */
.links {
  display: grid;
  gap: 16px;
}

.link-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  max-width: 880px;
  padding: 28px 32px;
  border-color: var(--ouro-linha);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(240, 185, 11, 0.12), transparent 60%),
    var(--cartao);
  overflow: hidden;
}

.link-box__texto {
  display: grid;
  justify-items: start;
  gap: 12px;
  min-width: 0;
}

.link-box__texto p {
  margin: 0;
}

.link-box__logo {
  width: 133px;
  height: auto;
}

.link-box h2 {
  margin: 0;
  font: 700 26px/1.2 var(--fonte-titulo);
}

/* O amarelo da Binance, o mesmo da arte. */
.link-box__selo {
  padding: 5px 12px;
  border-radius: 999px;
  background: #f0b90b;
  color: #000;
  font-size: 13px;
  font-weight: 700;
}

.link-box__descricao {
  max-width: 52ch;
  color: var(--texto-2);
  font-size: 15px;
  line-height: 1.55;
}

.link-box__codigo {
  display: grid;
  gap: 6px;
}

.link-box__rotulo {
  color: var(--texto-2);
  font-size: 12px;
}

.link-box__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.link-box__valor {
  padding: 6px 12px;
  border: 1px solid var(--ouro-linha);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--acento-forte);
  font: 700 16px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  user-select: all;
}

.link-box__botao {
  width: auto;
  margin-top: 4px;
  padding: 0 24px;
  text-decoration: none;
}

.link-box__nota {
  color: var(--texto-2);
  font-size: 12px;
}

.link-box__arte {
  width: 190px;
  height: auto;
  filter: drop-shadow(0 12px 32px rgba(240, 185, 11, 0.2));
}

/* No celular a arte sobe, pequena, e o botao enche a linha. */
@media (max-width: 640px) {
  .link-box {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 20px;
  }

  .link-box__arte {
    grid-row: 1;
    justify-self: center;
    width: 104px;
  }

  .link-box h2 {
    font-size: 21px;
  }

  .link-box__botao {
    width: 100%;
  }
}

/* O aviso do IP dos robos (03/11/2026, pedido do dono): bem destacado, no
 * passo 3 da assinatura e na aba Chave da Binance, com o Copiar. */
.aviso-ip {
  display: grid;
  gap: 8px;
  margin: 4px 0 16px;
  padding: 14px 16px;
  border: 2px solid var(--acento-forte);
  border-radius: var(--raio-p);
  background: var(--ouro-vidro);
  box-shadow: 0 0 24px rgba(252, 204, 33, 0.12);
  color: var(--texto);
  font-size: 14px;
  line-height: 1.5;
}

.aviso-ip p {
  margin: 0;
}

.aviso-ip__titulo {
  color: var(--acento-forte);
  font-size: 16px;
  font-weight: 700;
}

.aviso-ip__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.aviso-ip__ip {
  padding: 6px 12px;
  border: 1px solid var(--ouro-linha);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--acento-forte);
  font: 700 18px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  user-select: all;
}

.aviso-ip__nota {
  color: var(--texto-2);
  font-size: 13px;
}

/* A chave nova de quem ja assina, na aba Chave da Binance (02/11/2026): os
 * robos para marcar, o capital que eles pedem, a chave com o Validar do lado
 * e a lista do que e conferido. As linhas dos robos sao as da compra
 * (`.montar__robo`), e se arrumam pela largura deste bloco. */
.nova-chave {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  container-type: inline-size;
}

.nova-chave__robos .montar__robo:first-child {
  border-top: 0;
}

.nova-chave__conta {
  margin: 0;
  color: var(--texto-2);
  font-size: 14px;
}

.nova-chave__conta strong {
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.nova-chave__form {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--borda-fraca);
}

.nova-chave__titulo {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 700;
}

/* No PC o Validar fica do lado da chave (pedido do dono), na altura da
 * Secret Key; no celular, embaixo dela, na largura toda. */
@container (min-width: 520px) {
  .nova-chave__form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .nova-chave__form .campo {
    grid-column: 1;
  }

  .nova-chave__validar {
    grid-column: 2;
    grid-row: 2;
    min-width: 140px;
    min-height: 44px;
  }
}

.botao-perigo {
  border-color: rgba(248, 113, 113, 0.5);
  color: var(--baixa);
}

/* --------------------------------------------------------------------------
 * A janelinha do "Cancelar renovação" e do "Reativar" (renovacao.html,
 * 27/10/2026, pedidos do dono): um cartao so, no meio da janela a parte, com
 * o robo, o que muda e o botao. Os tres momentos (o robo, o "pronto" e os
 * recados) trocam no mesmo cartao.
 * ------------------------------------------------------------------------ */
.janelinha {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 24px 16px;
}

.renovacao {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: min(440px, 100%);
}

.renovacao__marca {
  width: 112px;
  height: auto;
}

.renovacao__cartao {
  display: grid;
  gap: 16px;
  width: 100%;
  padding: 24px;
  border-color: var(--ouro-linha);
  background: rgba(12, 12, 14, 0.82);
  box-shadow: 0 0 48px rgba(252, 204, 33, 0.12), 0 24px 64px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Cada troca de momento entra de leve, de baixo para cima. */
.renovacao__cartao > * {
  animation: renovacao-entra 0.35s ease-out both;
}

.renovacao__carregando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 24px 0;
  color: var(--texto-2);
  font-size: 14px;
}

.renovacao__giro {
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: conferencia-gira 0.8s linear infinite;
}

/* A acao em cima ("Cancelar renovação", "Reativar") e o estado do robo ao
 * lado: vermelho, nao renova; verde, ativo. */
.renovacao__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.renovacao__rotulo {
  margin: 0;
  color: var(--acento);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.renovacao__selo {
  padding: 4px 10px;
  border: 1px solid rgba(248, 113, 113, 0.5);
  border-radius: 999px;
  color: var(--baixa);
  font-size: 12px;
  font-weight: 700;
}

.renovacao__selo--ativo {
  border-color: rgba(52, 211, 153, 0.45);
  color: var(--alta);
}

.renovacao__robo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.renovacao__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border: 1px solid var(--ouro-linha);
  border-radius: var(--raio);
  background: var(--ouro-vidro);
  color: var(--acento-forte);
  box-shadow: 0 0 24px var(--halo);
}

.renovacao__avatar svg {
  width: 28px;
  height: 28px;
}

.renovacao__nome {
  display: grid;
  justify-items: start;
  gap: 6px;
  min-width: 0;
}

.renovacao__titulo {
  margin: 0;
  font: 700 22px/1.2 var(--fonte-titulo);
  overflow-wrap: anywhere;
}

.renovacao__titulo--centro,
.renovacao__texto--centro {
  text-align: center;
}

.renovacao__texto {
  margin: 0;
  color: var(--texto-2);
  font-size: 14px;
  line-height: 1.55;
}

.renovacao__texto strong {
  color: var(--texto);
}

.renovacao__dados {
  margin: 0;
  border: 1px solid var(--borda-fraca);
  border-radius: var(--raio-p);
  overflow: hidden;
}

.renovacao__dados div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 10px 14px;
  font-size: 14px;
}

.renovacao__dados div + div {
  border-top: 1px solid var(--borda-fraca);
}

.renovacao__dados dt {
  color: var(--texto-2);
}

.renovacao__dados dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.renovacao__botao {
  width: 100%;
  min-height: 48px;
  font-size: 16px;
}

.renovacao__botao:disabled {
  opacity: 0.75;
  cursor: wait;
}

/* O "Cancelar renovação": vermelho, a cor do que desfaz (branco sobre
 * #dc2626, 4,8:1). */
.renovacao__botao--perigo {
  background: #dc2626;
  color: #fff;
  box-shadow: 0 0 24px rgba(248, 113, 113, 0.25);
}

.renovacao__botao--perigo:hover:not(:disabled) {
  background: #b91c1c;
}

/* Sem motivo escolhido, o cancelar fica apagado e travado. */
.renovacao__botao[data-espera-motivo] {
  background: rgba(220, 38, 38, 0.3);
  color: rgba(255, 255, 255, 0.65);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}

/* Os motivos do cancelamento (pedido do dono, 27/10/2026): um por linha,
 * a escolhida com a borda e o fundo de ouro. */
.renovacao__motivos {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.renovacao__motivos legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
}

.renovacao__motivo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--borda-fraca);
  border-radius: var(--raio-p);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.renovacao__motivo:hover {
  border-color: var(--borda);
}

.renovacao__motivo:has(input:checked) {
  border-color: var(--ouro-linha);
  background: var(--ouro-vidro);
}

.renovacao__motivo:has(input:focus-visible) {
  outline: 2px solid var(--acento-forte);
  outline-offset: 2px;
}

.renovacao__motivo input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--acento-forte);
  cursor: pointer;
}

.renovacao__dica {
  margin: -8px 0 0;
  color: var(--texto-2);
  font-size: 12px;
  text-align: center;
}

.renovacao__nao {
  justify-self: center;
  margin-top: -8px;
  padding: 8px 16px;
  border: 0;
  background: transparent;
  color: var(--texto-2);
  font: 600 14px/1 var(--fonte);
  cursor: pointer;
}

.renovacao__nao:hover {
  color: var(--texto);
  text-decoration: underline;
}

.renovacao__aviso {
  text-align: center;
}

.renovacao__aviso:empty {
  display: none;
}

.renovacao__icone {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

/* O "pronto": o circulo e o certo verdes, desenhados um depois do outro. */
.renovacao__icone--ok {
  background: rgba(52, 211, 153, 0.08);
  box-shadow: 0 0 32px rgba(52, 211, 153, 0.25);
}

.renovacao__icone--ok svg {
  width: 72px;
  height: 72px;
  fill: none;
  stroke: var(--alta);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.renovacao__icone--ok circle {
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: renovacao-traco 0.6s ease-out forwards;
}

.renovacao__icone--ok path {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: renovacao-traco 0.35s 0.45s ease-out forwards;
}

/* O cancelamento feito: o mesmo certo, em ouro (deu certo, mas nao e uma
 * vitoria verde). */
.renovacao__icone--ouro {
  background: var(--ouro-vidro);
  box-shadow: 0 0 32px var(--halo);
}

.renovacao__icone--ouro svg {
  stroke: var(--acento-forte);
}

.renovacao__icone--erro {
  border: 1px solid var(--ouro-linha);
  background: var(--ouro-vidro);
  color: var(--acento-forte);
}

.renovacao__icone--erro svg {
  width: 32px;
  height: 32px;
}

.renovacao__rodape {
  margin: 0;
  color: var(--texto-2);
  font-size: 12px;
  text-align: center;
}

@keyframes renovacao-entra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes renovacao-traco {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .renovacao__cartao > *,
  .renovacao__giro,
  .renovacao__icone--ok circle,
  .renovacao__icone--ok path {
    animation: none;
  }

  .renovacao__icone--ok circle,
  .renovacao__icone--ok path {
    stroke-dashoffset: 0;
  }
}

@media (max-width: 420px) {
  .renovacao__cartao {
    padding: 20px 16px;
  }

  .renovacao__titulo {
    font-size: 20px;
  }
}

/* O "Conferir o saldo com esta chave" do passo 3 (27/10/2026): quem ja tem a
 * chave salva confere o saldo com ela, sem colar de novo. */
.chave-salva__conferir {
  width: auto;
  margin: 0 0 12px;
}

.chave-salva--passo .chave-api__nota {
  margin: 0 0 12px;
}

/* --------------------------------------------------------------------------
 * Quem ja assina e compra mais (27/10/2026, pedido do dono): o resumo das
 * compras no selo, o "Como funciona" recolhido com a seta, sem os termos e
 * sem o "Rever como funciona"; na lista, os robos ja assinados travados.
 * ------------------------------------------------------------------------ */
.assinatura-estado > div:last-child {
  flex: 1 1 auto;
  min-width: 0;
}

.assinatura-estado:has(#ass-resumo:not([hidden])) {
  align-items: flex-start;
}

.ass-resumo {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.ass-resumo__pacote {
  padding: 8px 12px;
  border: 1px solid var(--borda-fraca);
  border-radius: var(--raio-p);
}

.ass-resumo__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  font-size: 14px;
}

.ass-resumo__linha span {
  color: var(--texto-2);
  font-size: 13px;
}

.assinatura-estado .ass-resumo__robos {
  margin: 2px 0 0;
  font-size: 13px;
}

.assinatura--assinante #explica-titulo,
.assinatura--assinante .explicacoes__sub,
.assinatura--assinante .termos,
.assinatura--assinante #voltar-leitura {
  display: none;
}

.recolher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-bottom: 16px;
  padding: 14px 20px;
  color: var(--texto);
  font: 700 16px/1.2 var(--fonte);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.recolher:hover {
  border-color: var(--ouro-linha);
}

.recolher svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--acento-forte);
  transition: transform 0.2s ease;
}

.recolher[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.assinatura--assinante #explica-corpo {
  margin: -8px 0 16px;
}

@media (prefers-reduced-motion: reduce) {
  .recolher,
  .recolher svg {
    transition: none;
  }
}

.montar__assinado {
  padding: 2px 8px;
  border: 1px solid rgba(52, 211, 153, 0.45);
  border-radius: 999px;
  color: var(--alta);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.montar__robo--assinado .montar__escolha {
  cursor: default;
}

.montar__robo--assinado .montar__escolha input {
  cursor: not-allowed;
}

/* A margem e a alavancagem do robo assinado aparecem, mas travadas. */
.montar__robo.montar__robo--assinado .montar__opcoes {
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
 * A aba Meu robo (27/10/2026): o plano e o saldo lado a lado no PC, os robos
 * assinados, e a curva e o calendario. No celular, um embaixo do outro.
 * ------------------------------------------------------------------------ */
#meu-robo-conteudo {
  display: grid;
  gap: 16px;
}

.meu-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

/* O saldo e o plano na mesma caixa (pedido do dono, 27/10/2026), separados
 * por uma linha. */
.conta {
  display: grid;
  align-content: start;
  gap: 12px;
}

.conta__divisa {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--borda-fraca);
}

/* As duas caixas de uma linha com a mesma altura. */
.meu-grade > div > .cartao {
  height: 100%;
}

/* ⚠️ A ABA E COMPACTA (pedido do dono, 27/10/2026): as caixas de cima tinham
 * 600 px de altura no PC. Fontes, espacos e as casas do calendario menores. */
#meu-robo-conteudo .cartao {
  padding: 16px 18px;
}

.meu__titulo,
.plano h2,
.saldo h2 {
  font-size: 16px;
  font-weight: 700;
}

.meu__titulo {
  margin-bottom: 6px;
}

.meu__carregando,
.meu__vazio {
  margin: 8px 0 0;
  color: var(--texto-2);
  font-size: 14px;
}

.plano {
  display: grid;
  gap: 6px;
  align-content: start;
}

.plano__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}

.plano__selo {
  padding: 3px 10px;
  border: 1px solid rgba(52, 211, 153, 0.45);
  border-radius: 999px;
  color: var(--alta);
  font-size: 12px;
  font-weight: 700;
}

/* Cancelado e atrasado em vermelho (pedido do dono, 27/10/2026). */
.plano__selo--cancelado,
.plano__selo--atrasada {
  border-color: rgba(248, 113, 113, 0.5);
  color: var(--baixa);
}

.plano__valor {
  margin: 0;
  font-size: 14px;
}

.plano__valor strong {
  font-size: 22px;
  font-weight: 800;
}

.plano__valor span,
.plano__data {
  color: var(--texto-2);
}

.plano__data {
  margin: 0;
  font-size: 13px;
}

.plano__data strong {
  color: var(--texto);
}

.plano__aviso,
.meu-robo__aviso {
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--ouro-linha);
  border-radius: var(--raio-p);
  background: rgba(245, 197, 66, 0.08);
  color: var(--acento-forte);
  font-size: 13px;
  font-weight: 600;
}

/* O botao e a nota na mesma linha; sem espaco, a nota desce. */
.plano__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 2px;
}

.plano__acoes .botao-contorno {
  flex: none;
}

.plano__acoes .chave-api__nota {
  flex: 1 1 200px;
}

.saldo__ao-vivo {
  color: var(--alta);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.saldo__sub {
  margin: 0 0 8px;
  color: var(--texto-2);
  font-size: 12px;
}

.saldo__moedas {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.saldo__moeda {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
  padding: 8px 12px;
  border: 1px solid var(--borda-fraca);
  border-radius: var(--raio-p);
}

.saldo__total {
  justify-self: end;
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.saldo__partes {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 2px 12px;
  margin: 0;
  font-size: 12px;
}

/* O nome e o valor na mesma linha: "Saldo US$ 152,37". */
.saldo__partes > div {
  display: flex;
  gap: 4px;
}

.saldo__partes dt {
  color: var(--texto-2);
}

.saldo__partes dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* As duas sub-abas da Meu robo (29/10/2026, pedido do dono): Resumo e Robos
 * ao vivo. Mais discretas que as abas de cima (sem a moldura em volta, letra
 * menor), com o mesmo ouro na escolhida. */
.subabas {
  display: flex;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
}

.subabas__aba {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--texto-2);
  font: 600 14px/1 var(--fonte);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.subabas__aba svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.subabas__aba:hover {
  color: var(--texto);
}

.subabas__aba[aria-selected="true"] {
  border-color: var(--ouro-linha);
  background: var(--ouro-vidro);
  color: var(--acento-forte);
}

.subaba {
  display: grid;
  gap: 16px;
}

.subaba:focus-visible {
  outline-offset: 8px;
}

/* Os cards da Robos ao vivo: a grade da vitrine, um pouco mais larga (o
 * "Configurações US$ 20 · 3x" quebrava em 250 px), e cada card com a altura
 * dele (o de quem tem as Configuracoes abertas fica mais alto). */
.mr-robos {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  align-items: start;
}

/* A data e o Cancelar renovação, no pe do card, separados por uma linha. */
.mr-renovacao {
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--borda-fraca);
}

/* A data de cada robo e o "Cancelar renovação" ou "Reativar" (27/10/2026):
 * cada compra tem a sua data, e cada robo cancela sozinho. */
.meu-robo__data {
  margin: 0;
  color: var(--texto-2);
  font-size: 13px;
}

.meu-robo__data strong {
  color: var(--texto);
}

.meu-robo__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 2px;
}

.meu-robo__acoes .botao-contorno {
  flex: none;
}

.meu-robo__acoes .chave-api__nota:empty {
  display: none;
}

@media (max-width: 560px) {
  .subabas {
    width: 100%;
  }

  .subabas__aba {
    flex: 1 1 0;
    padding: 0 12px;
  }
}

.curva__total {
  margin: 0 0 8px;
  font-size: 14px;
}

.curva {
  display: block;
  width: 100%;
  height: auto;
}

.curva__zero {
  stroke: var(--borda);
  stroke-dasharray: 4 4;
}

.curva__linha {
  fill: none;
  stroke: var(--acento-forte);
  stroke-width: 2;
  stroke-linejoin: round;
}

.curva__linha--alta {
  stroke: var(--alta);
}

.curva__linha--baixa {
  stroke: var(--baixa);
}

.curva__ponto {
  fill: var(--fundo, #0b0b0b);
  stroke: var(--acento-forte);
  stroke-width: 1.5;
}

/* O calendario da aba, menor que o do popup dos robos (que fica como esta). */
.meu-cal .cal__nav {
  margin: 0 0 6px;
}

.meu-cal .cal__seta {
  width: 36px;
  height: 36px;
}

.meu-cal .cal__seta svg {
  width: 18px;
  height: 18px;
}

.meu-cal .cal__mes {
  font-size: 15px;
}

.meu-cal .cal__semana,
.meu-cal .cal__grade {
  gap: 3px;
}

.meu-cal .cal__semana li {
  padding-bottom: 2px;
  font-size: 11px;
}

.meu-cal .cal__casa {
  gap: 0;
  min-height: 42px;
  padding: 4px 2px;
  border-radius: 8px;
}

.meu-cal .cal__dia {
  font-size: 11px;
}

.meu-cal .cal__valor {
  font-size: 11px;
}

.meu-cal .cal__resumo {
  margin-top: 8px;
  font-size: 13px;
}

.meu-vazio {
  display: grid;
  gap: 10px;
  max-width: 640px;
}

.meu-vazio h2 {
  font-size: 20px;
  font-weight: 700;
}

.meu-vazio p {
  margin: 0;
  color: var(--texto-2);
}

.meu-vazio .botao-ouro {
  justify-self: start;
  width: auto;
}

@media (max-width: 820px) {
  .meu-grade {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  #meu-robo-conteudo .cartao {
    padding: 14px;
  }

  .saldo__total {
    font-size: 17px;
  }

  .meu-vazio .botao-ouro {
    width: 100%;
  }
}

/* O "Seguir para o pagamento", embaixo do formulario da chave salva. */
.chave-api__seguir {
  justify-self: start;
  margin-top: 16px;
}

/* O passo 4: os robos escolhidos, o total e o botao do Stripe. */
.pagamento {
  display: grid;
  gap: 12px;
  max-width: 640px;
  padding: 20px 24px 24px;
}

.pagamento h2 {
  font-size: 20px;
  font-weight: 700;
}

.pagamento__robos {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagamento__robo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 12px;
  border: 1px solid var(--borda-fraca);
  border-radius: var(--raio-p);
  font-size: 14px;
}

.pagamento__nome {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pagamento__conta {
  color: var(--texto-2);
  font-size: 13px;
}

.pagamento__total {
  margin: 4px 0 0;
  color: var(--texto-2);
}

.pagamento__total strong {
  color: var(--texto);
}

.pagamento .botao-ouro {
  justify-self: start;
  min-width: 220px;
}

@media (max-width: 560px) {
  .pagamento {
    padding: 16px;
  }

  .pagamento__robo {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .pagamento__conta {
    grid-column: 1;
    grid-row: 2;
  }

  .pagamento .botao-ouro,
  .chave-api__seguir {
    width: 100%;
    min-width: 0;
  }
}

/* O campo da chave mostra * no lugar das letras: fonte de largura fixa, para
 * os * e as 5 letras visiveis ficarem alinhados e faceis de conferir. */
#chave-form input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
}

/* O titulo do passo 3 com o "Ver tutorial" a direita. */
.chave-api__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.botao-contorno--pequeno {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.botao-contorno--pequeno svg {
  width: 16px;
  height: 16px;
}

.chave-api__dica {
  margin: -8px 0 20px;
  color: var(--texto-2);
  font-size: 13px;
}

.chave-api__dica strong {
  color: var(--acento-forte);
}

/* O popup do tutorial: a mesma moldura do calendario, mais largo, porque o
 * video precisa de espaco para o texto da Binance ficar legivel. */
.tutorial {
  width: min(880px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--ouro-linha);
  border-radius: 20px;
  background: #0b0b0d;
  color: var(--texto);
  box-shadow: 0 0 48px rgba(252, 204, 33, 0.12), 0 24px 64px rgba(0, 0, 0, 0.7);
  overflow: auto;
}

.tutorial::backdrop {
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.tut {
  padding: 20px 24px 16px;
}

.tut__numero {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--acento-forte);
  color: #000;
  font-size: 14px;
}

.tut__nota {
  padding: 8px 12px;
  border-left: 2px solid var(--acento);
  border-radius: 0 var(--raio-p) var(--raio-p) 0;
  background: var(--ouro-vidro);
  font-size: 13px !important;
}

/* O reprodutor de video do BTCopy (03/11/2026, pedido do dono, js/video.js):
 * o YouTube por baixo, sem os controles dele, e os nossos por cima, com o play
 * e a barra em ouro. A tela e 16:9 e encolhe pela altura da janela, para o
 * popup inteiro caber sem rolar no notebook. As partes aparecem e somem pelas
 * classes `vid--*` que o js poe na raiz. */
.vid {
  position: relative;
  container-type: inline-size;
  width: min(100%, max(320px, calc((100dvh - 260px) * 16 / 9)));
  margin: 16px auto 0;
}

.vid__tela {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--ouro-linha);
  border-radius: var(--raio-p);
  background: #000;
  isolation: isolate;
}

.vid__frame,
.vid__toque,
.vid__capa,
.vid__fim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vid__frame {
  overflow: hidden;
}

.vid__frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  transform-origin: 0 0;
}

/* ⚠️ DEPOIS DO PRIMEIRO PLAY, O IFRAME E GRANDE POR DENTRO E ENCOLHIDO NA
 * TELA: o YouTube escolhe a qualidade pelo tamanho do player, e com o tamanho
 * do popup ficava em 480p. O js/video.js poe 1920 x 1080 e a escala da tela.
 * Antes do play nao: o primeiro toque cai dentro do iframe (js/video.js, no
 * topo), e toque em iframe encolhido e onde os navegadores erram. Depois, quem
 * recebe o toque e a `.vid__toque`. */
.vid--comecou .vid__frame iframe {
  width: var(--vid-largura, 100%);
  height: var(--vid-altura, 100%);
  transform: scale(var(--vid-escala, 1));
}

/* Depois do primeiro play, esta camada fica por cima do iframe: o clique
 * pausa e toca por aqui, e o YouTube nao mostra os botoes dele. */
.vid__toque {
  z-index: 1;
  display: none;
  cursor: pointer;
}

.vid--comecou .vid__toque {
  display: block;
}

.vid--quieto .vid__toque {
  cursor: none;
}

/* A capa e o fim: a arte do site com o halo de ouro. */
.vid__capa,
.vid__fim {
  place-items: center;
  background:
    radial-gradient(50% 60% at 50% 50%, rgba(252, 204, 33, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.82)),
    #000 url("../assets/img/fundo.webp") center / cover;
}

/* ⚠️ A CAPA DEIXA O CLIQUE PASSAR para o YouTube: o primeiro play tem de ser
 * um toque no player dele (js/video.js, no topo). O play amarelo so recebe o
 * Enter do teclado. */
.vid__capa {
  z-index: 2;
  display: grid;
  pointer-events: none;
}

.vid--comecou .vid__capa {
  display: none;
}

.vid__logo {
  position: absolute;
  top: 16px;
  left: 20px;
  width: 112px;
  height: auto;
}

.vid__grande {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--ouro-moldura), var(--acento));
  color: #000;
  box-shadow: 0 0 0 8px rgba(252, 204, 33, 0.16), 0 0 48px rgba(252, 204, 33, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vid__grande svg {
  width: 36px;
  height: 36px;
  margin-left: 4px;
  fill: currentColor;
}

/* O mouse em cima do iframe tambem conta: o iframe e filho da tela. */
.vid__tela:hover .vid__grande {
  transform: scale(1.06);
  box-shadow: 0 0 0 12px rgba(252, 204, 33, 0.2), 0 0 64px rgba(252, 204, 33, 0.55);
}

.vid__grande:focus-visible {
  outline: 3px solid var(--texto);
  outline-offset: 6px;
}

/* O play pedido antes do player ficar pronto: uma roda em volta. */
.vid--esperando .vid__grande::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 3px solid transparent;
  border-top-color: var(--ouro-moldura);
  border-radius: 50%;
  animation: vid-gira 0.9s linear infinite;
}

.vid__legenda {
  position: absolute;
  left: 20px;
  bottom: 14px;
  margin: 0;
  color: var(--texto);
  font: 600 14px/1.3 var(--fonte);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

.vid__duracao {
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}

/* O fim cobre a tela: no lugar das sugestoes do YouTube, o "Assistir de
 * novo". */
.vid__fim {
  z-index: 3;
  display: none;
}

.vid--fim .vid__fim {
  display: grid;
}

.vid__denovo {
  width: auto;
  padding: 0 24px;
}

.vid__girando {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: none;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border: 4px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--ouro-moldura);
  border-radius: 50%;
  pointer-events: none;
  animation: vid-gira 0.9s linear infinite;
}

.vid--comecou.vid--carregando .vid__girando {
  display: block;
}

@keyframes vid-gira {
  to {
    transform: rotate(360deg);
  }
}

.vid__erro {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  place-content: center;
  margin: 0;
  padding: 24px;
  background: rgba(0, 0, 0, 0.88);
  color: var(--texto-2);
  font-size: 14px;
  text-align: center;
}

.vid--erro .vid__erro {
  display: grid;
}

/* Os controles: a barra em cima, os botoes embaixo, sobre um degrade para o
 * branco aparecer em qualquer cena. Tocando e parado, eles somem. */
.vid__controles {
  position: absolute;
  inset: auto 0 0;
  z-index: 6;
  display: none;
  padding: 24px 8px 4px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85));
  transition: opacity 0.25s ease;
}

.vid--comecou .vid__controles {
  display: block;
}

.vid--quieto .vid__controles {
  opacity: 0;
  pointer-events: none;
}

.vid__barra {
  --andado: 0;
  --carregado: 0;
  --dica: 0;
  position: relative;
  height: 20px;
  margin: 0 8px;
  cursor: pointer;
  touch-action: none;
}

.vid__barra:focus-visible {
  outline: 2px solid var(--ouro-moldura);
  outline-offset: 2px;
  border-radius: 4px;
}

.vid__trilho {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  margin-top: -2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
  transition: height 0.15s ease, margin-top 0.15s ease;
}

.vid__barra:hover .vid__trilho,
.vid__barra:focus-visible .vid__trilho,
.vid--arrastando .vid__trilho {
  height: 6px;
  margin-top: -3px;
}

.vid__carregado,
.vid__andado {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 999px;
}

.vid__carregado {
  width: calc(var(--carregado) * 100%);
  background: rgba(255, 255, 255, 0.3);
}

.vid__andado {
  width: calc(var(--andado) * 100%);
  background: linear-gradient(90deg, var(--acento), var(--ouro-moldura));
}

.vid__bolinha {
  position: absolute;
  top: 50%;
  left: calc(var(--andado) * 100%);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--ouro-moldura);
  box-shadow: 0 0 0 4px rgba(252, 204, 33, 0.25), 0 0 12px rgba(252, 204, 33, 0.6);
  transform: scale(0);
  transition: transform 0.15s ease;
}

.vid__barra:hover .vid__bolinha,
.vid__barra:focus-visible .vid__bolinha,
.vid--arrastando .vid__bolinha {
  transform: scale(1);
}

/* O balao com o tempo do ponteiro, sem sair da tela nas pontas. */
.vid__dica {
  position: absolute;
  bottom: 22px;
  left: clamp(24px, calc(var(--dica) * 100%), calc(100% - 24px));
  padding: 3px 8px;
  border: 1px solid var(--ouro-linha);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.88);
  color: var(--texto);
  font: 600 12px/1.2 var(--fonte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.vid--arrastando .vid__dica {
  opacity: 1;
}

@media (hover: hover) {
  .vid__barra:hover .vid__dica {
    opacity: 1;
  }
}

/* Sem mouse (celular), a bolinha fica sempre a mostra: e por ela que se
 * arrasta. */
@media (hover: none) {
  .vid__bolinha {
    transform: scale(1);
  }
}

.vid__linha {
  display: flex;
  align-items: center;
  gap: 2px;
}

.vid__botao {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--texto);
  font: 700 13px/1 var(--fonte);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.vid__botao svg {
  width: 22px;
  height: 22px;
}

.vid__botao:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ouro-moldura);
}

.vid__botao:focus-visible {
  outline: 2px solid var(--ouro-moldura);
  outline-offset: -2px;
}

/* O play e o pause em ouro, como pediu o dono. */
.vid__tocar {
  color: var(--ouro-moldura);
}

.vid__tocar svg {
  fill: currentColor;
}

.vid__icone-pausar,
.vid__icone-mudo,
.vid__icone-sair {
  display: none;
}

.vid--tocando .vid__icone-tocar,
.vid--mudo .vid__icone-som,
.vid--cheia .vid__icone-entrar {
  display: none;
}

.vid--tocando .vid__icone-pausar,
.vid--mudo .vid__icone-mudo,
.vid--cheia .vid__icone-sair {
  display: block;
}

.vid__volume {
  display: flex;
  align-items: center;
}

/* O volume abre ao lado do alto-falante, com o mouse ou o foco nele. */
.vid__nivel {
  width: 0;
  height: 4px;
  margin: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ouro-moldura) calc(var(--nivel, 1) * 100%), rgba(255, 255, 255, 0.25) 0);
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: width 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
}

.vid__volume:hover .vid__nivel,
.vid__volume:focus-within .vid__nivel {
  width: 72px;
  margin: 0 10px 0 2px;
  opacity: 1;
}

.vid__nivel::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--ouro-moldura);
  -webkit-appearance: none;
  appearance: none;
}

.vid__nivel::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--ouro-moldura);
}

.vid__nivel:focus-visible {
  outline: 2px solid var(--ouro-moldura);
  outline-offset: 4px;
}

/* No celular o volume e o do aparelho. */
@media (hover: none) {
  .vid__nivel {
    display: none;
  }
}

/* ⚠️ A BARRA CABE ATE NUM VIDEO DE 230 PX (celular de 320 px, janela
 * estreita): com a engrenagem, os botoes pediam 283 px. Abaixo de 300 px de
 * video eles encolhem e o som sai: no celular o volume e o do aparelho, e no
 * teclado o M continua. O menu fica compacto, sem a nota. A medida e a do
 * video (`.vid`), e nao a da janela. */
@container (max-width: 299px) {
  .vid__botao {
    min-width: 34px;
    padding: 0 5px;
  }

  .vid__volume {
    display: none;
  }

  .vid__tempo {
    margin-left: 2px;
  }

  .vid__menu {
    gap: 10px;
    padding: 10px 12px;
  }

  .vid__opcoes {
    gap: 4px;
  }

  .vid__opcao {
    min-width: 0;
    height: 30px;
    padding: 0 7px;
    font-size: 12px;
  }

  .vid__nota {
    display: none;
  }
}

/* A engrenagem gira um pouco e fica em ouro com o menu aberto. */
.vid__ajustes svg {
  transition: transform 0.2s ease;
}

.vid__ajustes[aria-expanded="true"] {
  color: var(--ouro-moldura);
}

.vid__ajustes[aria-expanded="true"] svg {
  transform: rotate(45deg);
}

/* O menu da engrenagem: a qualidade e a velocidade, em pilulas. Ele fica
 * fora da tela do video (que corta o que passa da borda), em cima da barra,
 * e no celular sobe por cima do titulo do popup. */
.vid__menu {
  position: absolute;
  right: 8px;
  bottom: 52px;
  z-index: 7;
  display: grid;
  gap: 12px;
  width: max-content;
  max-width: calc(100% - 16px);
  padding: 12px 14px;
  border: 1px solid var(--ouro-linha);
  border-radius: var(--raio-p);
  background: #0b0b0d;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* Sem espaco em cima (o popup corta o que passa da borda), o menu abre
 * embaixo do video (js/video.js, `abrirMenu`). */
.vid__menu--embaixo {
  top: calc(100% + 8px);
  bottom: auto;
}

.vid__grupo {
  display: grid;
  gap: 6px;
}

.vid__grupo-titulo {
  margin: 0;
  color: var(--texto-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vid__agora {
  margin-left: 4px;
  color: var(--acento-forte);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.vid__opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vid__opcao {
  min-width: 52px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: transparent;
  color: var(--texto);
  font: 600 13px/1 var(--fonte);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.vid__opcao:hover {
  border-color: var(--ouro-linha);
  color: var(--ouro-moldura);
}

.vid__opcao[aria-pressed="true"] {
  border-color: var(--ouro-moldura);
  background: var(--ouro-moldura);
  color: #000;
}

.vid__opcao:focus-visible {
  outline: 2px solid var(--ouro-moldura);
  outline-offset: 2px;
}

.vid__nota {
  max-width: 30ch;
  margin: 0;
  color: var(--texto-2);
  font-size: 12px;
  line-height: 1.4;
}

.vid__tempo {
  margin-left: 6px;
  color: var(--texto);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* O CC: um selo, em ouro quando a legenda esta ligada. */
.vid__legendas {
  margin-left: auto;
}

.vid__legendas span {
  padding: 3px 4px;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.vid__legendas[aria-pressed="true"] {
  color: var(--ouro-moldura);
}

/* Na tela cheia, o video no meio da tela preta, do maior tamanho que cabe. */
.vid--cheia {
  display: grid;
  place-items: center;
  width: 100%;
  margin: 0;
  background: #000;
}

.vid--cheia .vid__tela {
  width: min(100vw, calc(100vh * 16 / 9));
  border: 0;
  border-radius: 0;
}

/* O IP embaixo do video, menor que o aviso do passo 3. */
.aviso-ip--video {
  margin: 16px 0 0;
  padding: 12px 14px;
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .vid__grande,
  .vid__trilho,
  .vid__bolinha,
  .vid__controles,
  .vid__nivel,
  .vid__ajustes svg,
  .vid__opcao {
    transition: none;
  }
}

/* A barra do rodape com o resumo: so no celular (abaixo). No PC o resumo ja
 * fica ao lado da lista, e ela nao existe. */
.barra-resumo {
  display: none;
}

/* ------------------------------------------------------------ calendario */

/* A janela do calendario. `dialog` nativo: o Esc fecha, o foco fica preso
 * dentro e o fundo escurece sem codigo nenhum. */
.calendario {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--ouro-linha);
  border-radius: 20px;
  background: #0b0b0d;
  color: var(--texto);
  box-shadow: 0 0 48px rgba(252, 204, 33, 0.12), 0 24px 64px rgba(0, 0, 0, 0.7);
  overflow: auto;
}

.calendario::backdrop {
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.cal {
  padding: 20px 24px 24px;
}

.cal__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.cal__rotulo {
  margin: 0;
  color: var(--acento);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cal__titulo {
  font-size: 22px;
  font-weight: 700;
}

.cal__fechar,
.cal__seta {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--borda);
  border-radius: 50%;
  background: transparent;
  color: var(--texto-2);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.cal__fechar svg,
.cal__seta svg {
  width: 20px;
  height: 20px;
}

.cal__fechar:hover,
.cal__seta:not(:disabled):hover {
  border-color: var(--ouro-linha);
  color: var(--acento-forte);
}

.cal__seta:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.cal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 12px;
}

.cal__mes {
  margin: 0;
  font: 700 17px/1.2 var(--fonte-titulo);
}

.cal__semana,
.cal__grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cal__semana li {
  padding-bottom: 4px;
  color: var(--texto-2);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.cal__casa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-width: 0;
  min-height: 64px;
  padding: 6px 2px;
  border: 1px solid var(--borda-fraca);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}

.cal__casa--fora {
  border-color: transparent;
  background: transparent;
}

.cal__casa--alta {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.1);
}

.cal__casa--baixa {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.1);
}

.cal__casa--hoje {
  box-shadow: inset 0 0 0 1px var(--acento-forte);
}

.cal__dia {
  color: var(--texto-2);
  font-size: 12px;
  font-weight: 600;
}

.cal__valor {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cal__casa--alta .cal__valor {
  color: var(--alta);
}

.cal__casa--baixa .cal__valor {
  color: var(--baixa);
}

.cal__moeda {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--acento);
  font-size: 12px;
}

.cal__resumo {
  margin: 16px 0 0;
  color: var(--texto-2);
  font-size: 14px;
}

/* A chave Calendario/Lista (04/11/2026), so no calendario "a sua conta". */
.cal__vistas {
  display: flex;
  gap: 4px;
  width: fit-content;
  margin: 16px auto 0;
  padding: 4px;
  border: 1px solid var(--borda-fraca);
  border-radius: 999px;
}

.cal__vistas[hidden] {
  display: none;
}

.cal__vista {
  min-width: 104px;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--texto-2);
  font: 600 13px/1 var(--fonte);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cal__vista:hover {
  color: var(--texto);
}

.cal__vista[aria-pressed="true"] {
  background: var(--acento);
  color: #0b0b0d;
}

.cal__vista:focus-visible {
  outline: 2px solid var(--acento-forte);
  outline-offset: 2px;
}

.cal__semana[hidden],
.cal__grade[hidden],
.cal-lista[hidden] {
  display: none;
}

/* A lista das operacoes do mes: a tabela do painel, com a moeda. Cada celula
 * tem o numero de cima e um detalhe embaixo. Na coluna estreita (celular),
 * cada linha vira um cartao com o nome de cada coluna. */
.cal-lista {
  container-type: inline-size;
}

.cal-lista__aviso {
  margin: 12px 0 0;
  color: var(--texto-2);
  font-size: 14px;
}

.cal-lista__denovo {
  min-height: 36px;
  margin-left: 4px;
  padding: 0 12px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: transparent;
  color: var(--texto);
  cursor: pointer;
}

.cal-lista__tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.cal-lista__tabela th {
  padding: 0 5px 8px;
  border-bottom: 1px solid var(--borda);
  background: #0b0b0d;
  color: var(--texto-2);
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  vertical-align: bottom;
}

.cal-lista__tabela td {
  padding: 8px 5px;
  border-bottom: 1px solid var(--borda-fraca);
  vertical-align: top;
}

.cal-lista__tabela th:first-child,
.cal-lista__tabela td:first-child {
  padding-left: 0;
}

.cal-lista__tabela th:last-child,
.cal-lista__tabela td:last-child {
  padding-right: 0;
}

.cal-lista__tabela th small {
  display: block;
  font-weight: 400;
  white-space: nowrap;
}

/* O detalhe que so o cartao do celular mostra; na tabela, vai no `title`. */
.cal-lista__tabela .cal-lista__extra {
  display: none;
}

.cal-lista__tabela td > * {
  display: block;
  white-space: nowrap;
}

.cal-lista__tabela small,
.cal-lista__tabela th small {
  margin-top: 2px;
  color: var(--texto-2);
  font-size: 11px;
}

.cal-lista__tabela .cal-lista__num {
  text-align: right;
}

.cal-lista__tabela tfoot td {
  border-bottom: 0;
  color: var(--texto-2);
  font-weight: 600;
}

.cal-lista__tabela tfoot td:last-child,
.cal-lista__tabela tfoot td:nth-last-child(2),
.cal-lista__tabela tfoot td:nth-last-child(3) {
  color: var(--texto);
}

.cal-lista__nota {
  margin: 8px 0 0;
  color: var(--texto-2);
  font-size: 12px;
}

@container (max-width: 480px) {
  .cal-lista__tabela thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .cal-lista__tabela,
  .cal-lista__tabela tbody,
  .cal-lista__tabela tfoot,
  .cal-lista__tabela tr {
    display: block;
  }

  .cal-lista__tabela tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--borda-fraca);
    border-radius: var(--raio-p);
    background: rgba(255, 255, 255, 0.02);
  }

  .cal-lista__tabela td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .cal-lista__tabela .cal-lista__num {
    text-align: left;
  }

  .cal-lista__tabela td::before {
    content: attr(data-rotulo);
    display: block;
    margin-bottom: 2px;
    color: var(--texto-2);
    font-size: 11px;
    font-weight: 600;
  }

  .cal-lista__tabela td > * {
    white-space: normal;
  }

  .cal-lista__tabela small.cal-lista__extra {
    display: block;
  }

  .cal-lista__tabela span.cal-lista__extra {
    display: inline;
  }

  .cal-lista__tabela td:first-child,
  .cal-lista__tabela td:last-child {
    padding: 0;
  }

  .cal-lista__tabela tfoot tr {
    border-color: var(--ouro-linha);
  }
}

.cal__resumo strong {
  font-variant-numeric: tabular-nums;
}

/* Os numeros da conta (28/10/2026, pedido do dono): o filtro de datas, as
 * quatro caixas e o ping das 24 horas. So no calendario "a sua conta". No PC
 * as caixas ficam lado a lado; no celular, duas por linha. */
.cal-num {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--borda-fraca);
}

.cal-num[hidden],
.cal-num__limpar[hidden] {
  display: none;
}

.cal-num__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.cal-num__titulo {
  margin: 0;
  font: 700 15px/1.2 var(--fonte-titulo);
}

.cal-num__periodo {
  margin: 0;
  color: var(--texto-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.cal-num__filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

.cal-num__filtro .campo {
  flex: 1 1 140px;
  min-width: 0;
}

.cal-num__filtro input {
  width: 100%;
  color-scheme: dark;
}

.cal-num__limpar {
  min-height: 44px;
}

.cal-num__caixas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* As duas de resultado ficam sempre lado a lado, tambem no celular. */
.cal-num__caixas--resultado {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cal-num__caixa {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--borda-fraca);
  border-radius: var(--raio-p);
  background: rgba(255, 255, 255, 0.02);
}

.cal-num__rotulo,
.cal-num__nota {
  color: var(--texto-2);
  font-size: 12px;
}

.cal-num__rotulo {
  font-weight: 600;
}

.cal-num__valor {
  overflow: hidden;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-ping {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.cal-ping__grafico {
  position: relative;
  padding-top: 16px;
}

/* O teto da escala, em cima da linha tracejada que marca a altura dele. */
.cal-ping__teto {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--texto-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.cal-ping__barras {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  align-items: end;
  gap: 2px;
  height: 72px;
  margin: 0;
  padding: 0;
  border-top: 1px dashed var(--borda-fraca);
  border-bottom: 1px solid var(--borda);
  list-style: none;
}

/* A coluna inteira e o alvo do dedo e do mouse, e nao so a barra. */
.cal-ping__hora {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100%;
  border-radius: 4px 4px 0 0;
}

/* O numero da media em cima da barra (04/11/2026, pedido do dono). */
.cal-ping__num {
  position: absolute;
  left: 50%;
  margin-bottom: 2px;
  transform: translateX(-50%);
  color: var(--texto-2);
  font-size: 9px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
  pointer-events: none;
}

.cal-ping__hora:hover .cal-ping__num,
.cal-ping__hora:focus-visible .cal-ping__num {
  color: var(--texto);
}

.cal-ping__hora:focus-visible {
  outline: 2px solid var(--acento-forte);
  outline-offset: 1px;
}

.cal-ping__barra {
  width: min(100%, 14px);
  margin-inline: auto;
  border-radius: 4px 4px 0 0;
  background: var(--acento);
  transition: background-color 0.15s ease;
}

.cal-ping__hora:hover .cal-ping__barra,
.cal-ping__hora:focus-visible .cal-ping__barra {
  background: var(--acento-forte);
}

/* Hora sem ping: um risco no chao, para nao parecer ping zero. */
.cal-ping__barra--vazia {
  min-height: 2px;
  border-radius: 1px;
  background: var(--borda);
}

.cal-ping__eixo {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  color: var(--texto-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.cal-ping__vazio {
  margin: 0;
  color: var(--texto-2);
  font-size: 13px;
}

@media (max-width: 560px) {
  .cal-num__caixas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* O calendario "a sua conta" no PC (04/11/2026, pedido do dono): a janela
 * abre larga, com os numeros a esquerda e o calendario a direita, e cabe na
 * tela sem rolar. No celular fica como era: uma coluna, o calendario em cima.
 * A da vitrine nao tem numeros, e nao ganha a classe (js/painel.js). */
@media (min-width: 960px) {
  .calendario--conta {
    width: min(1160px, calc(100% - 48px));
  }

  .calendario--conta .cal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .calendario--conta .cal__topo {
    grid-column: 1 / -1;
  }

  .calendario--conta .cal-num {
    grid-column: 1;
    grid-row: 2;
    margin-top: 16px;
    padding: 0 28px 0 0;
    border-top: 0;
    container-type: inline-size;
  }

  /* Coluna estreita (notebook de 1024): as quatro caixas do periodo em duas
   * linhas, senao o valor ("US$ 0,01") sai cortado. */
  @container (max-width: 480px) {
    .cal-num__caixas {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* O risco entre as duas colunas faz o papel do risco de cima no celular. */
  .calendario--conta .cal__calendario {
    grid-column: 2;
    grid-row: 2;
    padding-left: 28px;
    border-left: 1px solid var(--borda-fraca);
  }

  /* A lista rola por dentro, na altura da grade do mes, com o cabecalho
   * parado: um mes cheio nao faz a janela inteira rolar. */
  .calendario--conta .cal-lista {
    max-height: 420px;
    margin-top: 4px;
    padding-right: 10px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .calendario--conta .cal-lista__tabela thead th {
    position: sticky;
    top: 0;
    z-index: 1;
  }
}

/* ---------------------------------------------------------------- regras */

.regras {
  padding: 20px 24px;
}

.regras h2 {
  font-size: 20px;
  font-weight: 700;
}

.regras__sub {
  margin: 2px 0 12px;
  color: var(--texto-2);
  font-size: 13px;
}

.regras__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.regras__lista li {
  position: relative;
  padding-left: 28px;
  color: var(--texto-2);
  font-size: 13px;
  line-height: 1.5;
}

.regras__lista li + li {
  margin-top: 8px;
}

.regras__lista li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--acento);
  color: var(--acento-forte);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.regras__lista strong {
  color: var(--texto);
}

/* A faixa da Binance, embaixo da rodada e das regras. */
.binance {
  display: flex;
  align-items: center;
  gap: 12px 24px;
  padding: 12px 20px;
}

.binance__texto {
  flex: 1;
  min-width: 0;
}

.binance h3 {
  font-size: 15px;
  font-weight: 600;
}

.binance p {
  margin: 2px 0 0;
  color: var(--texto-2);
  font-size: 13px;
}

.binance .botao-contorno {
  flex: none;
}

/* ---------------------------------------------------------------- rodape */

/* O rodape numa linha so no PC: logo, aviso de risco e o copyright. */
.rodape {
  margin-top: 8px;
  border-top: 1px solid var(--borda-fraca);
  background: rgba(0, 0, 0, 0.6);
}

.rodape__dentro {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 16px var(--margem) 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}

.rodape img {
  height: 20px;
  width: auto;
}

.rodape p {
  flex: 1 1 480px;
  margin: 0;
  color: var(--texto-2);
  font-size: 12px;
  line-height: 1.5;
}

.rodape .rodape__copia {
  flex: none;
}

.rodape strong {
  color: var(--texto);
}

/* ---------------------------------------------------------- aviso flutuante */

.aviso-flutuante {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  max-width: calc(100% - 32px);
  transform: translateX(-50%);
  padding: 12px 20px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: rgba(16, 16, 18, 0.96);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  font-size: 14px;
}

.aviso-flutuante--erro {
  border-color: rgba(248, 113, 113, 0.5);
}

/* ------------------------------------------------------------- responsivo */

/* PC com pouca altura (notebook: 1536 x 730, 1366 x 650). A pagina inicial
 * tem de caber sem rolar (pedido do dono, 23/10): sai o selo e as tres
 * garantias, que repetem o que ja esta nas regras e na rodada, e o resto
 * aperta. Em tela alta (Full HD) nada disto vale. */
@media (min-width: 961px) and (max-height: 860px) {
  .heroi {
    padding-top: 16px;
    padding-bottom: 8px;
  }

  .heroi .selo,
  .garantias,
  .regras__sub {
    display: none;
  }

  .regras h2 {
    margin-bottom: 12px;
  }

  .heroi h1 {
    margin-top: 0;
    font-size: clamp(30px, 3.2vw, 40px);
  }

  .heroi__btc {
    height: min(240px, 30vh);
  }

  .regras,
  .rodada {
    padding: 16px 20px;
  }

  .regras__lista li + li {
    margin-top: 6px;
  }

  .binance {
    padding: 10px 20px;
  }

  .rodape__dentro {
    padding: 12px var(--margem) 14px;
  }
}

@media (max-width: 960px) {
  .heroi {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-top: 32px;
  }

  .heroi__arte {
    order: -1;
  }

  .heroi__btc {
    height: min(220px, 26vh);
  }

  .passos {
    grid-template-columns: repeat(2, 1fr);
  }

  .vitrine__grade {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  :root {
    --margem: 16px;
  }

  .topo__menu {
    display: none;
  }

  .topo__dentro {
    gap: 16px;
  }

  .topo__parceria-longo {
    display: none;
  }

  .topo__parceria-curto {
    display: inline;
  }

  .topo__marca img {
    height: 28px;
  }

  .usuario__nome {
    display: none;
  }

  .rodada,
  .regras {
    padding: 20px 16px;
  }

  .rodada__fatos {
    grid-template-columns: 1fr;
  }

  .rodada__fatos li {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
  }

  .binance {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }

  .rodada__periodo {
    display: block;
    margin: 8px 0 0;
  }

  .heroi h1 {
    font-size: 30px;
  }

  .rodape__dentro {
    flex-direction: column;
    align-items: flex-start;
  }

  .rodape p {
    flex: none;
  }

  .passos {
    grid-template-columns: 1fr;
  }

  /* ⚠️ `minmax(0, 1fr)` E NAO `1fr`. O `1fr` cresce ate o conteudo, e a
   * faixa de moedas da carteira, numa linha so, esticava o card para fora da
   * tela do celular (23/10/2026). */
  .robos {
    grid-template-columns: minmax(0, 1fr);
  }

  /* As abas de ponta a ponta, com os rotulos curtos e o icone em cima, em
   * duas linhas de tres (03/11/2026): com a Abrir conta sao seis, e numa
   * linha so cada uma ficava com 50 px, menos que o rotulo. */
  .abas {
    width: 100%;
    gap: 4px;
    border-radius: 18px;
  }

  .painel__barra {
    gap: 8px;
  }

  .ordenar {
    width: 100%;
  }

  .ordenar select {
    flex: 1;
    min-width: 0;
  }

  .abas__aba {
    flex: 1 1 30%;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 14px;
    font-size: 12px;
  }

  .abas__longo {
    display: none;
  }

  .abas__curto {
    display: inline;
  }

  .painel {
    padding-top: 16px;
  }

  .robo__valor {
    font-size: 22px;
  }

  .robo__calendario {
    min-height: 44px;
  }

  .assinatura-grade {
    grid-template-columns: minmax(0, 1fr);
  }

  .resumo {
    position: static;
  }

  .assinatura-estado,
  .montar,
  .resumo {
    padding: 14px 16px;
  }

  .explica {
    padding: 14px 16px 4px;
  }

  .termos {
    padding: 16px;
  }

  .termos .botao-ouro,
  .chave-api__form .botao-ouro {
    width: 100%;
    min-width: 0;
  }

  .chave-api {
    padding: 14px 16px 16px;
  }

  /* No celular o tutorial ocupa a largura, e o video encolhe junto: o
   * logo, o play e a legenda menores, para a capa caber em 330 px. */
  .tutorial {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 16px;
  }

  .tut {
    padding: 16px 14px 14px;
  }

  .vid {
    width: 100%;
    margin-top: 12px;
  }

  .vid__logo {
    top: 10px;
    left: 12px;
    width: 80px;
  }

  .vid__grande {
    width: 64px;
    height: 64px;
  }

  .vid__grande svg {
    width: 28px;
    height: 28px;
  }

  .vid__legenda {
    left: 12px;
    bottom: 10px;
    font-size: 12px;
  }

  .vid__controles {
    padding: 16px 4px 2px;
  }

  .vid__tempo {
    font-size: 12px;
  }

  .etapas__item {
    padding-right: 10px;
    font-size: 12px;
  }



  /* O nome, a moeda e a posicao numa linha so, ate no "FRANK Carteira 1". */
  .montar__escolha {
    gap: 8px;
  }

  .montar__nome {
    font-size: 14px;
  }

  .segmento span {
    min-height: 36px;
    padding: 0 10px;
  }

  /* A barra fixa no rodape, com o resumo da assinatura (pedido do dono,
   * 23/10). O `env()` afasta da barra de gestos do iPhone. */
  .barra-resumo {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px 10px 16px;
    border: 1px solid var(--ouro-linha);
    border-radius: 16px;
    background: rgba(11, 11, 13, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 24px rgba(252, 204, 33, 0.12);
  }

  .barra-resumo__texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .barra-resumo__texto strong {
    font: italic 800 17px/1.2 var(--fonte-titulo);
    font-variant-numeric: tabular-nums;
  }

  /* A conta pode quebrar em duas linhas: com valores como "US$ 187,5 USDT +
   * US$ 37,5 USDC", uma linha so cortaria o fim, que e justamente o numero. */
  .barra-resumo__texto > span {
    color: var(--texto-2);
    font-size: 12px;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
  }

  .barra-resumo__texto .inteiro {
    white-space: nowrap;
  }

  .barra-resumo__botao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--ouro-moldura), var(--acento));
    color: #000;
    font: 700 14px/1 var(--fonte);
    cursor: pointer;
  }

  .barra-resumo__botao svg {
    width: 16px;
    height: 16px;
  }

  /* A folga embaixo, para a barra nao cobrir o fim das explicacoes. */
  #painel-assinatura {
    padding-bottom: 88px;
  }

  .estado-vazio {
    padding: 16px;
  }

  /* No celular o calendario ocupa a largura toda, com casas mais baixas. */
  .calendario {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 16px;
  }

  .cal {
    padding: 16px 12px 20px;
  }

  .cal__titulo {
    font-size: 19px;
  }

  .cal__semana,
  .cal__grade {
    gap: 3px;
  }

  .cal__casa {
    min-height: 56px;
    padding: 4px 1px;
    border-radius: 8px;
  }

  .cal__valor {
    font-size: 12px;
  }

  .heroi__lead {
    font-size: 15px;
  }

  /* No celular o Bitcoin vem antes do titulo: menor, para o botao de entrar
   * aparecer sem rolar tanto. */
  .heroi__btc {
    height: min(150px, 20vh);
  }
}

/* Celular estreito: so o envelope, num circulo de 44 px (area de toque). */
@media (max-width: 400px) {
  .topo__parceria-curto {
    display: none;
  }

  .topo__parceria {
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ouro-linha);
    border-radius: 50%;
    flex: none;
  }

  .topo__parceria:hover {
    border-color: var(--acento);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
 * A aba TESTE TEMP (28/10/2026, pedidos do dono): o teste dos robos TESTESITE
 * e TESTE2 com contas da Binance Demo (js/testetemp.js). O card de cada robo
 * e o MESMO da vitrine (`.robo`, do painel.js), com as operacoes da conta da
 * pessoa. Tudo aqui comeca com `tt` ou com `abas__aba--teste`.
 *
 * ⚠️ AS CLASSES `tt-*` DO CARD NAO SAO SO DO TESTE (29/10/2026): a sub-aba
 * Robos ao vivo da Meu robo (js/aovivo.js) usa o mesmo card, com o ao vivo,
 * as Configuracoes e os botoes. Tirar o teste nao pode levar estas junto.
 * ------------------------------------------------------------------------ */
.abas__aba--teste {
  border-style: dashed;
  border-color: var(--ouro-linha);
}

/* No celular as cinco abas de sempre ja enchem a linha: a do teste desce
 * para uma linha so dela, e as outras ficam exatamente como eram. */
@media (max-width: 720px) {
  .abas {
    flex-wrap: wrap;
  }

  .abas__aba--teste {
    flex: 1 1 100%;
    flex-direction: row;
    min-height: 40px;
    padding: 6px 12px;
  }
}

.tt {
  display: grid;
  gap: 16px;
}

.tt__aviso {
  max-width: 900px;
  margin: 0;
  padding: 12px 16px;
  border: 1px dashed var(--ouro-linha);
  border-radius: var(--raio-p);
  background: var(--ouro-vidro);
  color: var(--texto-2);
  font-size: 14px;
  line-height: 1.5;
}

.tt__aviso strong {
  color: var(--texto);
}

.tt-fraco {
  margin: 0;
  color: var(--texto-2);
  font-size: 13px;
  line-height: 1.5;
}

/* ------------------------------------------------------------- a chave */

.tt-chave {
  display: grid;
  gap: 10px;
  max-width: 900px;
  padding: 16px;
}

.tt-chave h3 {
  margin: 0;
  font-size: 16px;
}

#tt-chave {
  display: grid;
  gap: 10px;
}

.tt-chave__linha {
  margin: 0;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.tt-chave__linha code {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}

.tt-form {
  display: grid;
  gap: 12px;
}

.tt-form__campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tt-form__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.tt-form__acoes .botao-ouro {
  width: auto;
  flex: 0 1 auto;
}

/* ------------------------------------------------- o card (o da vitrine) */

/* A grade e a `.robos` da vitrine; aqui so o limite de largura, para dois
 * cards nao esticarem numa tela larga, e cada card com a altura dele (o robo
 * desligado e curto, e esticado ficava com um vao no meio). */
.tt-robos {
  max-width: 640px;
  align-items: start;
}

.tt-robo--ligado {
  border-color: rgba(52, 211, 153, 0.35);
}

/* O plano venceu (28/10/2026, pedido do dono): a borda vermelha, tambem com
 * o mouse em cima, e a tag PLANO EXPIRADO embaixo do nome. */
.tt-robo--expirado,
.tt-robo--expirado:hover {
  border-color: var(--baixa);
}

.tt-expirado {
  display: inline-block;
  margin-top: 8px;
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.12);
  color: var(--baixa);
  letter-spacing: 0.04em;
}

/* "Configuracoes · US$ 20 · 3x": a configuracao de agora, no proprio botao. */
.tt-config__agora {
  margin-left: auto;
  color: var(--acento-forte);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.tt-config {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--borda-fraca);
  border-radius: var(--raio-p);
  background: rgba(0, 0, 0, 0.35);
}

.tt-opcoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.tt-opcoes__rotulo {
  min-width: 100%;
  color: var(--texto-2);
  font-size: 12px;
  font-weight: 600;
}

.tt-opcao {
  flex: 1 1 0;
  min-width: 48px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--texto-2);
  font: 600 14px/1 var(--fonte);
  cursor: pointer;
}

.tt-opcao:hover {
  color: var(--texto);
}

.tt-opcao[aria-pressed="true"] {
  border-color: var(--ouro-linha);
  background: var(--ouro-vidro);
  color: var(--acento-forte);
}

.tt-opcao:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* O ao vivo, no alto do card, so com o robo ligado. */
.tt-vivo {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--borda-fraca);
  border-radius: var(--raio-p);
  background: rgba(0, 0, 0, 0.35);
  color: var(--texto-2);
  font-size: 13px;
  line-height: 1.45;
}

.tt-vivo--erro {
  color: var(--baixa);
}

.tt-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  color: var(--texto-2);
  font-size: 12px;
}

.tt-status strong {
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.tt-ponto {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--alta);
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.7);
}

.tt-status--erro {
  margin: 0;
  color: var(--baixa);
}

.tt-status--erro .tt-ponto {
  background: var(--baixa);
  box-shadow: none;
}

.tt-vivo__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 8px;
  margin: 0;
  color: var(--texto);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.tt-vivo__linha {
  margin: 0;
}

.tt-vivo__linha strong {
  color: var(--acento-forte);
  font-variant-numeric: tabular-nums;
}

.tt-vivo__lucro {
  font-variant-numeric: tabular-nums;
}

.tt-vivo__lucro--alta {
  color: var(--alta);
}

.tt-vivo__lucro--baixa {
  color: var(--baixa);
}

/* Os botoes. */
.tt-ligar svg {
  width: 18px;
  height: 18px;
}

.tt-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Um embaixo do outro, como o "Ver o calendario": o card e estreito, e lado a
 * lado o "Encerrar operacao" quebrava em duas linhas. */
.tt-botao {
  flex: 1 1 100%;
  width: auto;
  min-height: 44px;
}

.tt-botao:disabled,
.tt-ligar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tt-botoes--fracos {
  gap: 4px 16px;
}

.tt button.link-secundario {
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.tt button.link-secundario:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tt-apagar {
  color: var(--baixa);
}

.tt-recado {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda);
  font-size: 13px;
  line-height: 1.5;
}

.tt-recado--ok {
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(52, 211, 153, 0.08);
  color: var(--alta);
}

.tt-recado--erro {
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.08);
  color: var(--baixa);
}

.tt-recado--info {
  border-color: var(--ouro-linha);
  background: var(--ouro-vidro);
  color: var(--acento-forte);
}

@media (max-width: 760px) {
  .tt-form__campos {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .tt-form__acoes .botao-ouro {
    width: 100%;
    flex-basis: 100%;
  }
}

/* --------------------------------------------------------------------------
 * A aba Analise (28/10/2026, pedido do dono): so o admin ve. O filtro, as
 * caixas de numeros, um cartao por pessoa, o comparativo vela a vela e a
 * janela do detalhe. As tabelas rolam dentro da propria caixa, e a pagina
 * nunca rola para o lado.
 * ------------------------------------------------------------------------ */
.abas__aba[hidden] {
  display: none;
}

.an {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.an-fraco {
  margin: 0;
  color: var(--texto-2);
  font-size: 13px;
}

.an-bloco {
  display: block;
  font-size: 12px;
}

.an-filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 20px;
}

.an-filtro__grupo {
  flex: 0 1 auto;
  min-width: 0;
}

.an-filtro__grupo .tt-opcao {
  flex: 0 0 auto;
  padding: 0 14px;
}

.an-atualizar {
  min-height: 40px;
}

.an-caixas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.an-caixa {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--borda-fraca);
  border-radius: var(--raio-p);
  background: rgba(255, 255, 255, 0.02);
}

.an-caixa__rotulo,
.an-caixa__nota {
  color: var(--texto-2);
  font-size: 12px;
}

.an-caixa__rotulo {
  font-weight: 600;
}

/* O numero quebra a linha em vez de ser cortado: data e valor pela metade
 * nao servem para nada. */
.an-caixa__valor {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.an-alta {
  color: var(--alta);
}

.an-baixa {
  color: var(--baixa);
}

.an-zero {
  color: var(--texto);
}

.an-pessoas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* O cartao inteiro e o botao: o dedo e o teclado abrem o detalhe. */
.an-pessoa {
  display: grid;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 14px 16px;
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.an-pessoa:hover,
.an-pessoa:focus-visible {
  border-color: var(--ouro-linha);
  box-shadow: 0 0 24px rgba(252, 204, 33, 0.1);
}

.an-pessoa:focus-visible {
  outline: 2px solid var(--acento-forte);
  outline-offset: 2px;
}

.an-pessoa__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.an-pessoa__nome {
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.an-pessoa__resultado {
  flex: none;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.an-pessoa__email {
  overflow: hidden;
  color: var(--texto-2);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.an-pessoa__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.an-etiqueta--alerta {
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.12);
  color: var(--baixa);
}

.an-etiqueta--info {
  border-color: var(--ouro-linha);
  color: var(--acento);
}

.an-pessoa__dados {
  display: grid;
  gap: 4px;
  margin: 0;
}

.an-pessoa__linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  font-size: 13px;
}

.an-pessoa__linha dt {
  flex: none;
  color: var(--texto-2);
}

.an-pessoa__linha dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Uma pessoa por linha, fina (pedido do dono, 03/11/2026): quem e a esquerda,
 * o essencial em colunas curtas no meio, e o resultado a direita. Os cartoes
 * de robo do Comparativo continuam como acima. */
.an-pessoas--linhas {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  container-type: inline-size;
}

.an-pessoa--linha {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 10px 20px;
  height: auto;
  padding: 10px 16px;
}

.an-pessoa__quem {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.an-pessoa__fim {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.an-pessoa--linha .an-pessoa__dados {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
}

.an-pessoa--linha .an-pessoa__linha {
  display: grid;
  gap: 1px;
}

.an-pessoa--linha .an-pessoa__linha dt {
  font-size: 11px;
}

.an-pessoa--linha .an-pessoa__linha dd {
  text-align: left;
}

@container (min-width: 520px) {
  .an-pessoa--linha .an-pessoa__dados {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Com espaco, as tres partes numa linha so. */
@container (min-width: 760px) {
  .an-pessoa--linha {
    grid-template-columns: minmax(170px, 1.1fr) minmax(0, 4fr) auto;
  }

  .an-pessoa--linha .an-pessoa__dados {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .an-pessoa--linha .an-pessoa__fim {
    display: grid;
    justify-items: end;
    gap: 2px;
  }
}

.an-pessoa__mais {
  color: var(--acento-forte);
  font-size: 13px;
  font-weight: 600;
}

/* A tabela rola dentro da caixa dela, e a pagina continua parada. */
.an-tabela-caixa {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--borda-fraca);
  border-radius: var(--raio-p);
}

.an-tabela-caixa:focus-visible {
  outline: 2px solid var(--acento-forte);
  outline-offset: 2px;
}

.an-tabela {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.an-tabela th,
.an-tabela td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--borda-fraca);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.an-tabela th {
  position: sticky;
  top: 0;
  background: #0b0b0d;
  color: var(--texto-2);
  font-size: 12px;
  font-weight: 600;
}

.an-tabela tbody tr:last-child td {
  border-bottom: 0;
}

.an-tabela tr.an-alerta td {
  background: rgba(248, 113, 113, 0.06);
}

/* O detalhe de uma pessoa: a janela do calendario, mais larga. */
.an-janela {
  width: min(1100px, calc(100% - 32px));
}

.an-janela .cal {
  display: grid;
  gap: 14px;
}

.an-sub {
  margin: 8px 0 0;
  font: 700 16px/1.2 var(--fonte-titulo);
}

/* O funil do site (03/11/2026): um degrau por linha, a barra em ouro do
 * tamanho de quem chegou nele, o numero e a fracao contra o degrau de cima.
 * No celular o nome e o numero ficam em cima e a barra embaixo. */
.an-funil {
  display: grid;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.an-funil__degrau {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) 3.5rem minmax(0, 10rem);
  grid-template-areas: "nome trilho valor taxa";
  align-items: center;
  gap: 4px 12px;
  font-size: 14px;
}

.an-funil__nome {
  grid-area: nome;
}

.an-funil__trilho {
  grid-area: trilho;
  height: 12px;
  border-radius: 999px;
  background: var(--cartao);
  overflow: hidden;
}

.an-funil__barra {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--acento), var(--ouro-moldura));
}

.an-funil__valor {
  grid-area: valor;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.an-funil__taxa {
  grid-area: taxa;
  color: var(--texto-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .an-funil__degrau {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nome valor" "trilho trilho" "taxa taxa";
  }
}

.an-lista,
.an-robos {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.an-robo {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--borda-fraca);
  border-radius: var(--raio-p);
}

.an-robo__nome {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.an-mais {
  justify-self: start;
}

/* A janela de um robo: cada vela, o resumo dela e a operacao de cada conta. */
.an-velas {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.an-vela {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--borda-fraca);
  border-radius: var(--raio-p);
}

.an-vela--alerta {
  border-color: rgba(248, 113, 113, 0.35);
}

.an-vela__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 14px;
}

.an-vela__resumo {
  margin: 0;
  color: var(--texto-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Uma tabela por vela, e as colunas de todas na mesma largura: os olhos
 * descem de uma vela para a outra sem procurar a coluna. */
.an-tabela--vela {
  min-width: 900px;
  table-layout: fixed;
}

.an-tabela--vela th:nth-child(1) { width: 14%; }
.an-tabela--vela th:nth-child(2) { width: 13%; }
.an-tabela--vela th:nth-child(3) { width: 8%; }
.an-tabela--vela th:nth-child(4),
.an-tabela--vela th:nth-child(5) { width: 13%; }
.an-tabela--vela th:nth-child(6) { width: 12%; }
.an-tabela--vela th:nth-child(7),
.an-tabela--vela th:nth-child(9) { width: 9%; }
.an-tabela--vela th:nth-child(8) { width: 9%; }

.an-tabela--vela td {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* O motivo pode ser longo ("Cancelada (Vela seguinte)"): quebra a linha. */
.an-tabela--vela td:nth-child(6) {
  white-space: normal;
}

/* A visao Saude: as secoes uma embaixo da outra, e o "tudo bem" em verde. */
.an-secao {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.an-tudo-bem {
  margin: 0;
  color: var(--alta);
  font-size: 13px;
}

.an-tabela--saude {
  min-width: 640px;
}

@media (max-width: 560px) {
  .an-caixas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .an-pessoas {
    grid-template-columns: minmax(0, 1fr);
  }

  .an-janela {
    width: 100%;
    max-height: 100dvh;
    border-radius: 0;
  }

  .an-janela .cal {
    padding: 16px;
  }
}

/* -------------------------------------------------------------- o Telegram
 *
 * O "Entrar no Telegram" da aba Meu robo (29/10/2026, pedido do dono): o
 * botao na linha do nome, a direita, e o popup com o numero, o bot (botao e
 * QR code) e o codigo (js/telegram.js). A moldura e a do calendario. */

/* A linha do nome: o "Ola" a esquerda e o botao a direita. Sem espaco, o
 * botao desce para baixo do nome (no celular). */
.painel__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.tg-botao svg {
  width: 16px;
  height: 16px;
}

.tg-botao--ok {
  border-color: rgba(52, 211, 153, 0.6);
  color: var(--alta);
}

.tg-botao--ok:hover {
  background: rgba(52, 211, 153, 0.08);
}

.tg-janela {
  width: min(520px, calc(100% - 32px));
}

.tg__carregando {
  margin: 20px 0 0;
  color: var(--texto-2);
  font-size: 14px;
}

.tg__parte {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--borda-fraca);
}

/* A primeira parte que aparece, logo abaixo do titulo, sem a linha. */
.cal__topo + .tg__carregando + .tg__parte {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}

.tg__titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.tg__texto {
  margin: 0;
  color: var(--texto-2);
  font-size: 14px;
  line-height: 1.5;
}

.tg__texto strong {
  color: var(--texto);
}

/* O campo e o botao na mesma linha; sem espaco, o botao desce. */
.tg__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.tg__campo {
  flex: 1 1 200px;
}

.tg__campo--codigo {
  flex: 0 1 180px;
}

.tg__campo--codigo input {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-align: center;
}

.tg__acao.botao-ouro {
  width: auto;
  flex: none;
}

.tg__acao.botao-contorno--pequeno {
  min-height: 44px;
}

.tg__aviso {
  margin: 0;
  color: var(--texto-2);
}

/* Abrir o bot: o texto e o botao a esquerda, o QR code a direita. */
.tg__abrir {
  display: flex;
  align-items: center;
  gap: 20px;
}

.tg__abrir-texto {
  display: grid;
  flex: 1;
  gap: 12px;
  justify-items: start;
}

.tg__link svg {
  width: 18px;
  height: 18px;
}

/* ⚠️ O QR E PRETO NO BRANCO, nunca invertido: muita camera nao le QR claro
 * sobre escuro. */
.tg__qr {
  display: grid;
  flex: none;
  justify-items: center;
  gap: 8px;
  margin: 0;
}

.tg__qr img {
  display: block;
  width: 132px;
  height: 132px;
  padding: 8px;
  border-radius: var(--raio-p);
  background: #fff;
}

.tg__qr figcaption {
  max-width: 148px;
  color: var(--texto-2);
  font-size: 12px;
  text-align: center;
}

.tg__validado {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgba(52, 211, 153, 0.4);
  border-radius: var(--raio-p);
  background: rgba(52, 211, 153, 0.08);
  color: var(--alta);
  font-size: 15px;
  font-weight: 700;
}

.tg__validado svg {
  width: 20px;
  height: 20px;
  flex: none;
}

#tg-erro {
  margin-top: 16px;
  font-size: 13px;
}

/* No celular a pessoa ja esta no celular: o QR some, e o popup ocupa a
 * largura inteira, como o detalhe da Analise. */
@media (max-width: 560px) {
  .tg__qr {
    display: none;
  }

  .tg-janela {
    width: 100%;
    max-height: 100dvh;
    border-radius: 0;
  }

  .tg-janela .cal {
    padding: 16px;
  }

  .tg__acao.botao-ouro,
  .tg__acao.botao-contorno--pequeno {
    width: 100%;
  }

  .tg__campo--codigo {
    flex-basis: 100%;
  }
}

/* O "Entrar no grupo" do popup validado (29/10/2026): a acao principal
 * depois de validar, por isso o ouro. */
.tg__grupo {
  justify-self: start;
  width: auto;
  text-decoration: none;
}

.tg__grupo svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 560px) {
  .tg__grupo {
    justify-self: stretch;
  }
}

/* O pedaco do texto que fala do QR code: so onde o QR aparece. */
@media (max-width: 560px) {
  .tg__so-pc {
    display: none;
  }
}

/* O QR code do grupo, montado na hora a partir da grade que vem do CELBD
 * (29/10/2026). Mesma caixa branca do QR do bot. */
.tg__qr-desenho {
  width: 132px;
  height: 132px;
  padding: 8px;
  border-radius: var(--raio-p);
  background: #fff;
}

.tg__qr-desenho svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Expulso do grupo pela moderacao (29/10/2026): o aviso em vermelho. */
.tg__expulso {
  border-left-color: var(--baixa) !important;
  background: rgba(248, 113, 113, 0.08) !important;
  color: var(--texto);
}