:root {
  --vidro: rgba(255, 255, 255, .08);
  --vidro-borda: rgba(255, 255, 255, .16);
  --brilho-menta: 0 0 0 1px rgba(151, 204, 180, .35), 0 10px 40px rgba(151, 204, 180, .18);
  --gradiente-ouro: linear-gradient(135deg, #f3d48a, #e2b04a 45%, #b9862c);
  --gradiente-navy: linear-gradient(135deg, #0f1b2e 0%, #18304f 55%, #22385a 100%);
  --sombra-luxo: 0 1px 2px rgba(15, 27, 46, .06), 0 12px 32px rgba(15, 27, 46, .10), 0 30px 60px -30px rgba(15, 27, 46, .25);
}

.selo { position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(151, 204, 180, .25), 0 6px 18px rgba(0, 0, 0, .25); }
.selo::after {
  content: ""; position: absolute; top: -50%; bottom: -50%; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg); animation: reflexo 5.5s ease-in-out infinite;
}
@keyframes reflexo { 0%, 70% { left: -60%; } 100% { left: 140%; } }

.tela-centro { position: relative; }
.tela-centro, .tela-boas-vindas { overflow: hidden; isolation: isolate; }
.tela-centro::before, .tela-boas-vindas::before {
  content: ""; position: absolute; inset: -20%; z-index: -1;
  background:
    radial-gradient(38% 34% at 22% 28%, rgba(151, 204, 180, .30), transparent 70%),
    radial-gradient(32% 30% at 78% 70%, rgba(79, 195, 232, .22), transparent 70%),
    radial-gradient(28% 26% at 70% 18%, rgba(226, 176, 74, .18), transparent 70%);
  filter: blur(20px); animation: aurora 18s ease-in-out infinite alternate;
}
.tela-centro::after, .tela-boas-vindas::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px); background-size: 26px 26px;
  mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%);
}
@keyframes aurora {
  0% { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(3%, 4%, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(-2%, 5%, 0) rotate(-6deg) scale(1.03); }
}

.cartao-login, .cartao-instalacao {
  position: relative; background: rgba(255, 255, 255, .94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .6); animation: entrarCartao .6s cubic-bezier(.2, .8, .2, 1) both;
}
.cartao-login::before, .cartao-instalacao::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(140deg, rgba(151, 204, 180, .9), rgba(226, 176, 74, .7) 40%, transparent 60%, rgba(79, 195, 232, .7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.cartao-login h1::after, .cartao-instalacao h1::after {
  content: ""; display: block; width: 46px; height: 3px; border-radius: 3px; margin-top: 10px; background: var(--gradiente-ouro);
}
@keyframes entrarCartao { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

.botao { position: relative; overflow: hidden; letter-spacing: .2px; }
.botao.primario { background: var(--gradiente-navy); box-shadow: 0 8px 22px rgba(15, 27, 46, .28); }
.botao.primario:hover { box-shadow: 0 12px 28px rgba(15, 27, 46, .38), 0 0 0 3px rgba(151, 204, 180, .25); }
.botao.menta { background: linear-gradient(135deg, #b5e0cc, #97ccb4 50%, #79b79b); box-shadow: 0 8px 22px rgba(95, 165, 135, .3); }
.botao.dourado { background: var(--gradiente-ouro); border-color: transparent; color: #2b1d02; box-shadow: 0 8px 22px rgba(185, 134, 44, .3); }
.botao::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .6s ease;
}
.botao:hover::after { left: 130%; }

input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(151, 204, 180, .25); border-color: var(--menta-escura); }

.lateral { background: var(--gradiente-navy); position: sticky; overflow: hidden; }
.lateral::before {
  content: ""; position: absolute; width: 320px; height: 320px; right: -160px; top: -120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(151, 204, 180, .22), transparent 70%); pointer-events: none;
}
.lateral::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, rgba(226, 176, 74, .6), transparent); }
.menu button { position: relative; transition: background .2s, color .2s, transform .2s; }
.menu button:hover { transform: translateX(3px); }
.menu button.ativo { background: linear-gradient(90deg, rgba(151, 204, 180, .22), rgba(151, 204, 180, .04)); box-shadow: inset 0 0 0 1px rgba(151, 204, 180, .18); }
.menu button.ativo::before {
  content: ""; position: absolute; left: -16px; top: 20%; bottom: 20%; width: 4px; border-radius: 0 4px 4px 0;
  background: var(--menta); box-shadow: 0 0 14px var(--menta);
}

.barra-topo { background: rgba(255, 255, 255, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.barra-topo h1 { background: linear-gradient(90deg, var(--navy), var(--navy-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
body:not(.leitura) { background: radial-gradient(1200px 600px at 100% -10%, rgba(151, 204, 180, .14), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(79, 195, 232, .10), transparent 60%), var(--fundo); background-attachment: fixed; }

.conteudo > * { animation: subirSuave .5s cubic-bezier(.2, .8, .2, 1) both; }
.conteudo > *:nth-child(2) { animation-delay: .06s; }
.conteudo > *:nth-child(3) { animation-delay: .12s; }
.conteudo > *:nth-child(4) { animation-delay: .18s; }
.conteudo > *:nth-child(5) { animation-delay: .24s; }
@keyframes subirSuave { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.cartao, .numero, .cartao-porta { box-shadow: var(--sombra-luxo); border: 1px solid rgba(15, 27, 46, .05); transition: transform .25s, box-shadow .25s; }
.cartao-porta:hover, .numero:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(15, 27, 46, .06), 0 22px 44px rgba(15, 27, 46, .14); }
.numero { padding-left: 74px; min-height: 92px; }
.numero::after { width: 4px; background: linear-gradient(var(--cor, var(--menta)), transparent); }
.numero .icone-numero {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center; color: #fff; background: var(--cor, var(--menta)); box-shadow: 0 8px 20px -6px var(--cor, var(--menta));
}
.numero .icone-numero svg { width: 22px; height: 22px; }
.numero strong { font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.cartao h2 { display: flex; align-items: center; gap: 10px; }
.cartao h2::before { content: ""; width: 4px; height: 18px; border-radius: 4px; background: var(--gradiente-ouro); }

tbody tr { transition: background .15s; }
tbody tr:hover td { background: linear-gradient(90deg, rgba(151, 204, 180, .10), transparent 70%); }
tbody tr { animation: linhaEntra .35s ease-out both; }
@keyframes linhaEntra { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

.ponto.online { animation: batida 2s ease-in-out infinite; }
@keyframes batida { 0%, 100% { box-shadow: 0 0 0 3px rgba(32, 178, 106, .18); } 50% { box-shadow: 0 0 0 7px rgba(32, 178, 106, .0); } }

.fundo-modal { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(9, 16, 28, .5); }
.modal { animation: modalEntra .32s cubic-bezier(.2, .9, .25, 1.1) both; }
.modal > header { background: linear-gradient(180deg, #fafcfe, #fff); border-radius: 20px 20px 0 0; }
@keyframes modalEntra { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
.abas button { transition: color .2s, border-color .2s; }
.abas button.ativa { border-bottom-color: transparent; background: linear-gradient(var(--menta), var(--menta)) bottom / 100% 3px no-repeat; }

.miniatura { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(151, 204, 180, .7); }
.etiqueta { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); }

.esqueleto { background: linear-gradient(90deg, #eef2f6 25%, #f7f9fb 50%, #eef2f6 75%); background-size: 200% 100%; animation: carregarFundo 1.2s infinite; border-radius: 10px; min-height: 18px; }
@keyframes carregarFundo { to { background-position: -200% 0; } }

.efeito-onda { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, .45); animation: onda .6s ease-out; pointer-events: none; }
@keyframes onda { to { transform: scale(3.2); opacity: 0; } }

.moldura::before, .moldura::after {
  content: ""; position: absolute; width: 34px; height: 34px; border: 3px solid var(--menta); filter: drop-shadow(0 0 6px rgba(151, 204, 180, .8));
}
.moldura::before { left: -6%; top: -2%; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.moldura::after { right: -6%; bottom: -2%; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
.moldura .varredura {
  position: absolute; left: 8%; right: 8%; height: 3px; top: 10%; border-radius: 3px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--menta), transparent); box-shadow: 0 0 18px 4px rgba(151, 204, 180, .55);
}
.moldura[data-estado="parado"] .varredura, .moldura[data-estado="enviando"] .varredura { opacity: 1; animation: varrer 1.6s ease-in-out infinite alternate; }
.moldura[data-estado="enviando"] .varredura { background: linear-gradient(90deg, transparent, var(--ciano), transparent); }
@keyframes varrer { from { top: 8%; } to { top: 90%; } }
.moldura .progresso { filter: drop-shadow(0 0 6px rgba(151, 204, 180, .9)); }
.moldura[data-estado="desafio"] { animation: chamarAtencao 1s ease-in-out infinite; }
@keyframes chamarAtencao { 50% { transform: translate(-50%, -50%) scale(1.025); } }
.instrucao { transition: opacity .2s; letter-spacing: .2px; }
.instrucao.trocou { animation: trocarTexto .35s ease-out; }
@keyframes trocarTexto { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.resultado { overflow: hidden; }
.resultado.permitido { background: radial-gradient(circle at 50% 40%, #22c26b, #138a47 70%); }
.resultado.negado { background: radial-gradient(circle at 50% 40%, #ef4b4b, #b71f1f 70%); }
.resultado::before, .resultado::after {
  content: ""; position: absolute; left: 50%; top: 40%; width: 160px; height: 160px; margin: -80px 0 0 -80px;
  border-radius: 50%; border: 3px solid rgba(255, 255, 255, .55); animation: ondaResultado 1.6s ease-out infinite;
}
.resultado::after { animation-delay: .8s; }
@keyframes ondaResultado { from { transform: scale(.6); opacity: 1; } to { transform: scale(4.2); opacity: 0; } }
.resultado .icone-resultado { position: relative; z-index: 1; background: rgba(255, 255, 255, .16); border-radius: 50%; padding: 22px; box-shadow: 0 0 0 10px rgba(255, 255, 255, .08); }
.resultado .icone-resultado path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: desenhar .5s .15s ease-out forwards; }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
.resultado .titulo-resultado, .resultado .nome-resultado, .resultado .motivo-resultado { position: relative; z-index: 1; text-shadow: 0 4px 18px rgba(0, 0, 0, .25); animation: subirSuave .45s .1s both; }
.resultado .nome-resultado { animation-delay: .2s; }
.resultado .motivo-resultado { animation-delay: .28s; }
.resultado .titulo-resultado { text-transform: uppercase; }

.toque-grande { position: relative; background: radial-gradient(circle, rgba(151, 204, 180, .22), rgba(151, 204, 180, .05) 70%); backdrop-filter: blur(6px); }
.toque-grande::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px dashed rgba(151, 204, 180, .5); animation: girar 18s linear infinite; }

.app-topo { background: var(--gradiente-navy); box-shadow: 0 10px 30px rgba(15, 27, 46, .25); position: relative; }
.app-topo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gradiente-ouro); opacity: .7; }
.botao-qr { position: relative; overflow: hidden; background: var(--gradiente-navy); box-shadow: 0 18px 40px -12px rgba(15, 27, 46, .55); }
.botao-qr::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(151, 204, 180, .35), transparent 30%); animation: girar 6s linear infinite; }
.botao-qr > * { position: relative; }
.botao-qr::after { content: ""; position: absolute; inset: 2px; border-radius: 20px; background: var(--gradiente-navy); }
.botao-qr svg, .botao-qr { z-index: 0; }
.botao-qr svg { z-index: 1; filter: drop-shadow(0 0 10px rgba(151, 204, 180, .6)); }
.botao-qr span { position: relative; z-index: 1; }
.cartao-app { border: 1px solid rgba(15, 27, 46, .05); box-shadow: var(--sombra-luxo); }
.alvo-qr::after {
  content: ""; position: absolute; left: 6%; right: 6%; height: 2px; top: 10%;
  background: linear-gradient(90deg, transparent, var(--menta), transparent); box-shadow: 0 0 16px var(--menta); animation: varrer 1.8s ease-in-out infinite alternate;
}

@media (max-width: 820px) {
  .lateral { overflow-x: auto; overflow-y: hidden; }
  .lateral::before { display: none; }
  .menu button.ativo::before { left: 10%; right: 10%; top: auto; bottom: -2px; width: auto; height: 3px; border-radius: 3px; }
  .menu button:hover { transform: none; }
  .numero { padding-left: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}