:root{
  --escuro:#0D0D0E; --escuro2:#18181A; --escuro3:#2A2A2D; --texto:#EDEDED; --suave:#A3A3A8;
  --ouro:linear-gradient(100deg,#B7823A 0%,#D5AC4C 22%,#F2D75C 45%,#FAEB99 58%,#E9C85C 76%,#BA863D 100%);
  --ouro1:#D5AC4C; --erro:#FF8A8A; --fundo-sistema:#EEF0F3;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:15px/1.45 "Saira",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--texto);background:var(--escuro);overflow:hidden}
.brilho{position:fixed;inset:-20%;background:radial-gradient(40% 35% at 50% 38%,rgba(213,172,76,.16),transparent 70%);pointer-events:none}
.cena{position:relative;min-height:100%;display:grid;place-items:center;padding:24px 16px}
.cartao{width:min(400px,100%);padding:30px 28px 22px;border-radius:18px;background:linear-gradient(180deg,#1C1C1F,#141416);
  border:1px solid #2E2E32;box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04);position:relative;overflow:hidden;
  animation:chegar .6s cubic-bezier(.2,.8,.2,1) both}
.cartao::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ouro)}
.marca{display:block;width:210px;height:auto;margin:4px auto 22px}
.sub{margin:2px 0 18px;text-align:center;font-weight:700;font-style:italic;letter-spacing:.32em;text-transform:uppercase;font-size:12px;
  background:var(--ouro);-webkit-background-clip:text;background-clip:text;color:transparent}
h1{font-size:19px;margin:0 0 14px;font-weight:700}
.etapa{display:flex;flex-direction:column;gap:12px}
label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:#CFCFD3}
input,select{height:44px;border-radius:10px;border:1px solid #3A3A3E;background:#0F0F11;color:var(--texto);padding:0 12px;font:inherit;font-size:15px;width:100%}
input:focus,select:focus{outline:none;border-color:var(--ouro1);box-shadow:0 0 0 3px rgba(213,172,76,.22)}
.senha{position:relative;display:block}
.senha input{padding-right:52px}
.ver{position:absolute;right:6px;top:6px;height:32px;padding:0 10px;border:0;border-radius:8px;background:#26262A;color:#CFCFD3;font:inherit;font-size:12px;cursor:pointer}
.codigo{height:58px;text-align:center;font-size:30px;letter-spacing:.42em;font-weight:700;font-variant-numeric:tabular-nums;padding-left:.42em}
.bt{height:46px;border:0;border-radius:10px;background:var(--ouro);color:#1B1406;font:inherit;font-weight:700;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;margin-top:4px}
.bt:hover{filter:brightness(1.06)}
.bt:disabled{opacity:.6;cursor:wait}
.link{background:none;border:0;color:var(--ouro1);font:inherit;font-weight:600;cursor:pointer;padding:4px;align-self:center}
.dica{margin:-6px 0 2px;font-size:13px;color:var(--suave)}
.dica code,.segredo code{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:#F2D75C;word-break:break-all}
.msg{min-height:20px;margin:12px 0 0;font-size:13px;color:var(--erro);text-align:center}
.msg.ok{color:#8FE0A8}
.cadeado{margin:8px 0 0;text-align:center;font-size:11.5px;color:#7C7C82}
.qr{align-self:center;background:#fff;padding:12px;border-radius:12px;line-height:0}
.qr img,.qr canvas{width:200px;height:200px;image-rendering:pixelated}
.segredo{margin:0;font-size:12px;color:var(--suave);text-align:center}
:focus-visible{outline:2px solid var(--ouro1);outline-offset:2px}
[hidden]{display:none!important}
.tremer{animation:tremer .35s}

/* saída do cartão → logo → zoom */
.cartao.saindo{animation:sair .5s cubic-bezier(.6,0,.8,.4) forwards}
.intro{position:fixed;inset:0;display:grid;place-items:center;background:var(--escuro);opacity:0;pointer-events:none;z-index:5}
.intro img{width:min(420px,70vw);height:auto;opacity:0;transform:scale(.86)}
.intro.ativo{opacity:1;transition:opacity .25s}
.intro.ativo img{animation:logoChega .55s cubic-bezier(.2,.8,.2,1) forwards}
.intro.zoom img{animation:logoZoom 1s cubic-bezier(.7,0,.9,.35) forwards}
.intro.zoom{animation:clarear 1s cubic-bezier(.7,0,.9,.35) forwards}

@keyframes chegar{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sair{to{opacity:0;transform:translateY(-26px) scale(.9);filter:blur(4px)}}
@keyframes logoChega{to{opacity:1;transform:scale(1)}}
@keyframes logoZoom{0%{opacity:1;transform:scale(1)}70%{opacity:1}100%{opacity:0;transform:scale(16)}}
@keyframes clarear{0%,55%{background:var(--escuro)}100%{background:var(--fundo-sistema)}}
@keyframes tremer{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

@media (prefers-reduced-motion:reduce){
  .cartao,.cartao.saindo,.intro.ativo img,.intro.zoom img,.intro.zoom{animation-duration:.01s}
}
.pedido{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px;border-radius:12px;background:#0F0F11;border:1px dashed #D5AC4C}
.pedido span{font-size:12px;color:var(--suave)}
.pedido b{font-size:28px;letter-spacing:.3em;font-family:ui-monospace,Consolas,monospace;color:#F2D75C;padding-left:.3em}
.espera{display:flex;align-items:center;gap:10px;margin:0;font-size:13px;color:#CFCFD3}
.girando{width:18px;height:18px;border-radius:50%;border:2px solid #3A3A3E;border-top-color:#D5AC4C;animation:girar .9s linear infinite;flex:none}
@keyframes girar{to{transform:rotate(360deg)}}