/* Páginas públicas de resgate de conta (Netflix / Steam / ChatGPT).
   Sem fontes externas — a CSP do site é self-only, e isso é uma qualidade.

   Sistema de tokens PRÓPRIO desta página (--s* aqui são SUPERFÍCIES, não a
   rampa sequencial do style.css). Nenhuma página carrega as duas CSS ao mesmo
   tempo, então os nomes não colidem — mas não misture.

   Valores alinhados com o sistema de design v2: mesmos neutros enviesados
   para o azul 220°, mesmo ciano, texto que não é branco puro. */
:root{
  --bg:#070B12;--s1:#131B27;--s2:#161F2C;--s3:#1A2432;--s4:#223044;
  --b1:rgba(255,255,255,0.05);--b2:rgba(255,255,255,0.09);--b3:rgba(255,255,255,0.16);
  --a:#33E7FF;--a2:rgba(51,231,255,0.08);--ab:rgba(51,231,255,0.05);
  /* --t4 é SÓ placeholder. Medido: 5,60:1 no campo e 4,77:1 no campo em foco
     (o fundo clareia no foco, então o valor tem que passar nos dois). O antigo
     #3a4356 dava 1,7:1 — placeholder é texto, vale a mesma régua. */
  --t1:#E6EDF6;--t2:#96A6BB;--t3:#75869D;--t4:#8B9CB4;
  --red:#F2545B;--red2:rgba(242,84,91,0.10);
  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --mono:"Cascadia Mono",Consolas,ui-monospace,"SF Mono","Roboto Mono",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:radial-gradient(circle at 50% 30%,rgba(51,231,255,0.05),transparent 70%),linear-gradient(135deg,var(--bg) 0%,#0F1A28 50%,var(--bg) 100%);background-attachment:fixed;color:var(--t1);font-family:var(--sans);min-height:100vh;-webkit-font-smoothing:antialiased;display:flex;align-items:center;justify-content:center;padding:20px;overflow-x:hidden}
.bg-grid{position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,0.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.022) 1px,transparent 1px);background-size:32px 32px;pointer-events:none;z-index:0}
.bg-glow{position:fixed;top:-260px;left:50%;transform:translateX(-50%);width:700px;height:520px;background:radial-gradient(ellipse at 50% 20%,rgba(51,231,255,0.09) 0%,transparent 60%);pointer-events:none;z-index:0}

.card{position:relative;z-index:1;width:100%;max-width:400px;background:var(--s1);border:1px solid var(--b2);border-radius:12px;padding:30px 26px;animation:fadeIn .4s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px}
.logo-icon{width:34px;height:34px;background:var(--a);border-radius:9px;display:flex;align-items:center;justify-content:center}
.logo-icon svg{width:18px;height:18px;stroke:#000}
.logo-name{font-size:17px;font-weight:800;letter-spacing:-.4px}
.logo-name span{color:var(--a)}
.sub{text-align:center;font-size:12px;color:var(--t3);margin-bottom:22px}

label{display:block;font-size:10px;font-weight:700;color:var(--t3);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.mt16{margin-top:16px}
input{width:100%;background:var(--s3);border:1px solid var(--b2);border-radius:9px;color:var(--t1);font-size:15px;padding:12px 14px;font-family:var(--mono);outline:none;transition:border-color .15s,background .15s;text-align:center;letter-spacing:2px}
input::placeholder{color:var(--t4);letter-spacing:1px;font-size:12px}
input:focus{border-color:rgba(51,231,255,0.4);background:var(--s4)}
.time-row{display:flex;gap:8px;align-items:stretch}
#time{flex:1;letter-spacing:normal;font-size:15px;text-align:left;font-family:var(--sans)}
.now-btn{background:var(--s3);border:1px solid var(--b2);border-radius:9px;color:var(--t2);font-size:12px;font-weight:600;padding:0 14px;cursor:pointer;transition:all .15s;font-family:var(--sans)}
.now-btn:hover{border-color:rgba(51,231,255,0.35);color:var(--a)}

.btn{width:100%;background:var(--a);color:#000;border:none;border-radius:9px;padding:13px;font-family:var(--sans);font-size:14px;font-weight:800;cursor:pointer;transition:opacity .15s,transform .1s;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px}
.btn:hover:not(:disabled){opacity:.9}
.btn:active{transform:scale(.99)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.spin{width:15px;height:15px;border:2px solid rgba(0,0,0,.2);border-top-color:#000;border-radius:50%;animation:rot .6s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

.err{background:var(--red2);border:1px solid rgba(239,67,67,0.18);border-radius:9px;padding:11px 13px;font-size:12.5px;color:#ff8f8f;margin-top:14px;display:none;line-height:1.5;text-align:center}
.err.show{display:block}

.result{margin-top:20px;display:none}
.result.show{display:block;animation:fadeIn .3s ease}
.result-meta{text-align:center;font-size:11px;color:var(--t3);margin-bottom:14px}
.note{text-align:center;font-size:11px;border-radius:9px;padding:9px 11px;margin-bottom:12px;line-height:1.5}
.note.used{background:var(--s3);border:1px solid var(--b2);color:var(--t2)}
.note.once{background:var(--ab);border:1px solid rgba(51,231,255,0.14);color:var(--t3)}
.note.once strong{color:var(--a)}
.tpl-block{background:var(--s2);border:1px solid var(--b2);border-radius:12px;padding:16px;font-size:14px;line-height:1.7;color:var(--t2);white-space:pre-wrap;word-break:break-word;text-align:left;font-family:var(--sans)}
.tpl-code{display:inline-block;font-family:var(--mono);font-size:26px;font-weight:800;color:var(--a);letter-spacing:3px;line-height:1.2;cursor:pointer;padding:0 2px}
.tpl-code:hover{opacity:.85}
.copyall{width:100%;background:var(--a);color:#000;border:none;border-radius:9px;padding:11px;font-family:var(--sans);font-size:13px;font-weight:800;cursor:pointer;margin-top:12px;transition:opacity .15s}
.copyall:hover{opacity:.9}
/* 🎬 "Ainda tem dúvida? Olhe o tutorial" (04/11/2026): só aparece quando o dono põe o link no modelo geral */
.tutorial-box{margin-top:14px;padding:12px;border:1px solid var(--b2);border-radius:12px;background:var(--s2);text-align:center}
.tutorial-ask{font-size:13px;color:var(--t2);margin-bottom:8px}
.tutorial-btn{display:block;background:var(--a);color:#000;border-radius:9px;padding:11px;font-size:13px;font-weight:800;text-decoration:none}
.tutorial-btn:hover{opacity:.9}
.copyall.done{background:var(--s3);color:var(--a);border:1px solid rgba(51,231,255,0.3)}

.none{text-align:center;padding:14px 6px}
.none-icon{width:50px;height:50px;background:var(--s3);border:1px solid var(--b2);border-radius:13px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.none-icon svg{width:22px;height:22px;stroke:var(--t3)}
.none p{font-size:12.5px;color:var(--t3);line-height:1.6}
.refresh{background:var(--s3);border:1px solid var(--b2);border-radius:9px;color:var(--t2);font-size:12px;font-weight:600;padding:9px;cursor:pointer;margin-top:14px;width:100%;transition:all .15s;font-family:var(--sans)}
.refresh:hover{border-color:var(--b3);color:var(--t1)}
.foot{text-align:center;font-size:10px;color:var(--t3);margin-top:18px}

/* fluxo em etapas */
.step[hidden]{display:none}
.step{animation:fadeIn .3s ease}
.btn.ghost{background:var(--s3);color:var(--t2);border:1px solid var(--b2)}
.btn.ghost:hover:not(:disabled){border-color:var(--b3);color:var(--t1);opacity:1}
.ask{text-align:center;font-size:16px;font-weight:700;margin-top:6px}
.ask-sub{text-align:center;font-size:11px;color:var(--t3);margin:6px 0 14px}
.link-back{display:block;width:100%;background:none;border:none;color:var(--t3);font-size:12px;cursor:pointer;margin-top:12px;font-family:var(--sans)}
.link-back:hover{color:var(--t2)}
.inst{background:var(--s2);border:1px solid var(--b2);border-radius:11px;padding:14px 15px;font-size:13px;line-height:1.7;color:var(--t2);margin-bottom:14px}
.inst p{margin:0 0 6px}
.inst p:last-child{margin:0}
.inst b{color:var(--t1)}
.timer{text-align:center;font-size:12.5px;color:var(--t3);margin-bottom:12px}
.timer b{color:var(--a);font-family:var(--mono);font-size:14px}
.searching{display:flex;gap:7px;justify-content:center;margin:26px 0 14px}
.searching span{width:9px;height:9px;border-radius:50%;background:var(--a);animation:bounce 1.2s ease infinite}
.searching span:nth-child(2){animation-delay:.2s}
.searching span:nth-child(3){animation-delay:.4s}
@keyframes bounce{0%,80%,100%{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}
.searching-txt{text-align:center;font-size:13px;color:var(--t3);margin-bottom:8px}

/* ── Tela "key já usada": boas-vindas ao jogo ─────────────────── */
.welcome-emoji{font-size:44px;text-align:center;margin:6px 0 2px}
.welcome-title{text-align:center;font-size:22px;font-weight:900;margin:6px 0 14px;line-height:1.3}
.welcome-sub{text-align:center;font-size:14px;color:var(--t2);margin:12px 0 0}

/* ── "Avalie com 5 estrelas e ganhe um brinde" ────────────────── */
.rate-cta{margin-top:16px;padding:16px 14px;border-radius:12px;text-align:center;
  background:var(--ab);border:1px solid rgba(51,231,255,0.16)}
.rate-cta .rc-stars{font-size:20px;letter-spacing:5px;margin-bottom:8px}
.rate-cta p{font-size:12.5px;color:var(--t2);line-height:1.55;margin:0}
.rate-cta p b{color:var(--t1)}
.rc-btn{display:block;background:var(--a);color:#000;border-radius:9px;padding:12px;
  font-size:13.5px;font-weight:800;text-decoration:none;margin-top:12px}
.rc-btn:hover{opacity:.9}

/* ── Brinde "7 dias grátis" (só GameMarket) ───────────────────────
   Dois PASSOS numerados em vez de dois botões soltos brigando pela
   atenção: "1 Avaliar" leva pra loja, "2 Resgatar" abre o campo. */
.bri-cta{position:relative;padding-top:22px;
  background:linear-gradient(180deg,rgba(34,197,94,0.07),rgba(51,231,255,0.04));
  border-color:rgba(34,197,94,0.22)}
.bri-selo{position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:#2FBF71;color:#04150a;font-size:11px;font-weight:800;letter-spacing:.3px;
  padding:4px 12px;border-radius:99px;white-space:nowrap;box-shadow:0 3px 12px rgba(34,197,94,0.3)}
.bri-passo{display:flex;align-items:center;gap:10px;margin-top:10px;text-align:left}
.bri-num{flex:0 0 22px;height:22px;border-radius:50%;background:var(--s4);color:var(--t2);
  font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.bri-passo .rc-btn{flex:1;margin-top:0}
.bri-oculto{display:none !important}
/* o passo 2 é secundário: mesma forma, peso menor que o "Avaliar" */
.bri-abrir{background:transparent;color:var(--a);border:1px solid var(--b3);
  font-family:var(--sans);cursor:pointer}
.bri-abrir:hover{background:var(--a2);opacity:1}

.bri-form{margin-top:14px;padding-top:12px;border-top:1px solid var(--b2);text-align:left}
.bri-lab{display:block;font-size:11.5px;font-weight:700;color:var(--t2);margin-bottom:6px}
.bri-linha{display:flex;gap:8px}
.bri-cod{flex:1;min-width:0;background:var(--s2);border:1px solid var(--b2);border-radius:9px;
  padding:11px 12px;color:var(--t1);font-family:var(--mono);font-size:15px;letter-spacing:1px;
  text-transform:uppercase;outline:none}
.bri-cod::placeholder{color:var(--t4);letter-spacing:1px}
.bri-cod:focus{border-color:rgba(51,231,255,0.45);background:var(--s3)}
.bri-cod:disabled{opacity:.55}
.bri-enviar{flex:0 0 auto;background:var(--a);color:#001018;border:none;border-radius:9px;
  padding:11px 18px;font-family:var(--sans);font-size:13px;font-weight:800;cursor:pointer}
.bri-enviar:hover:not(:disabled){opacity:.9}
.bri-enviar:disabled{opacity:.5;cursor:default}
.bri-dica{font-size:11px !important;color:var(--t3) !important;margin-top:7px !important}
.bri-msg{font-size:12.5px !important;line-height:1.5;margin-top:10px !important;
  padding:9px 11px;border-radius:9px;background:var(--s3);border:1px solid var(--b2)}
.bri-msg.bom{color:#86efac !important;background:rgba(34,197,94,0.08);border-color:rgba(34,197,94,0.25)}
.bri-msg.ruim{color:#fca5a5 !important;background:var(--red2);border-color:rgba(239,67,67,0.25)}
@media (max-width:420px){
  .bri-linha{flex-wrap:wrap}
  .bri-enviar{width:100%}
}

/* ── Credenciais da conta Steam (login + senha) na entrega ────── */
.stm-creds{margin:14px 0;padding:12px;border-radius:12px;background:var(--s3);border:1px solid var(--b2);text-align:left}
.stm-creds-h{font-size:12px;font-weight:800;color:var(--t2);margin-bottom:8px}
.stm-cred{display:flex;align-items:center;gap:8px;margin-top:6px}
.stm-cred-l{flex:0 0 46px;font-size:12px;color:var(--t3);font-weight:700}
.stm-cred-v{flex:1;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;
  background:var(--s2);border:1px solid var(--b2);border-radius:8px;padding:8px 10px;color:var(--t1);
  overflow:hidden;overflow-wrap:anywhere;white-space:normal;line-height:1.35}
.stm-cred-copy{flex:0 0 auto;background:var(--a);color:#001018;border:none;border-radius:8px;
  padding:8px 12px;font-family:var(--sans);font-size:12px;font-weight:800;cursor:pointer}
.stm-cred-copy:hover{opacity:.9}
.copyall.ghost{background:transparent;color:var(--a);border:1px solid var(--b2);margin-top:8px}

/* ===== BRINDE — 3 passos, escolha de assinatura e entrega ==============
   A barra existe porque o passo 2 tira a pessoa do site: ver "2 de 3" antes
   de sair é o que a faz voltar. Tokens desta página (--a, --t1, --s1...),
   não os do style.css — nenhuma tela carrega as duas folhas juntas. */
.bri-barra-wrap{margin:14px 0 4px}
.bri-barra{display:flex;flex-direction:column;gap:6px}
.bri-segs{display:flex;gap:4px}
.bri-seg{flex:1;height:4px;border-radius:99px;background:var(--s4);transition:background .3s ease}
.bri-seg.on{background:var(--a)}
.bri-passo-txt{font-size:10px;color:var(--t3);letter-spacing:.5px;text-transform:uppercase}

.bri-planos{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:12px}
.bri-plano{display:flex;flex-direction:column;gap:3px;padding:12px 10px;cursor:pointer;
  background:var(--s3);border:1px solid var(--b2);border-radius:10px;
  font-family:var(--sans);text-align:center;transition:border-color .15s,background .15s}
.bri-plano:hover{border-color:rgba(51,231,255,.45);background:var(--s4)}
.bri-plano-nome{font-size:13px;font-weight:700;color:var(--t1)}
.bri-plano-dias{font-size:11px;color:var(--a)}
.bri-vazio{font-size:12px;color:var(--t3);margin:12px 0 0}

.bri-escolhido{font-size:12px;color:var(--t2);margin:12px 0 10px}
.bri-escolhido b{color:var(--t1)}
.bri-trocar{background:none;border:0;color:var(--a);font-size:12px;cursor:pointer;
  text-decoration:underline;font-family:var(--sans);padding:0 0 0 4px}

/* A conta entregue. Fundo verde discreto: é o único desfecho bom da tela. */
.bri-conta{margin-top:14px;padding:14px;border-radius:11px;text-align:left;
  background:rgba(47,191,113,.07);border:1px solid rgba(47,191,113,.28)}
.bri-conta-topo{font-size:13px;font-weight:800;color:#5fdc9b;margin-bottom:12px}
.bri-campo{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bri-campo-lab{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:1px;width:48px;flex:none}
.bri-campo-val{flex:1;font-family:var(--mono);font-size:13px;color:var(--t1);
  background:var(--s1);border:1px solid var(--b2);border-radius:7px;padding:8px 10px;
  min-width:0;overflow:hidden;overflow-wrap:anywhere;white-space:normal;line-height:1.35;user-select:all}
.bri-conta-aviso{font-size:11px;color:var(--t2);line-height:1.5;margin:10px 0 0}
.bri-conta-aviso b{color:#f5b944}

/* Entrega por LINK de convite (Canva Pro, Game Pass): o botão é a ação, o
   link em texto embaixo serve pra copiar quando o clique não funciona. */
.bri-conta-txt{font-size:12.5px;color:var(--t2);line-height:1.55;margin:0 0 12px}
.bri-conta-link{display:block;background:var(--a);color:#000;border-radius:9px;padding:12px;
  font-family:var(--sans);font-size:14px;font-weight:800;text-align:center;text-decoration:none;
  margin-bottom:12px;transition:opacity .15s}
.bri-conta-link:hover{opacity:.9}

/* ⚠️ A key não é o código (06/11/2026): o cliente achava que a key era o código de verificação */
.key-aviso { margin: 4px 0 10px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.4; background: rgba(255, 184, 0, 0.12); border: 1px solid rgba(255, 184, 0, 0.45); color: #ffd98a; text-align: left; }
.key-aviso b { color: #fff; }