:root{
  --bg:#0e1116; --bg2:#141a22;
  --card:rgba(22,28,37,.82); --linha:rgba(255,255,255,.09);
  --tx:#e9edf3; --tx2:#9aa7b6; --tx3:#67748699;
  --ac:#5b9dff; --ac2:#7cf1c8;
  --ok:#37d9a0; --err:#ff6b6b;
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--tx); background:var(--bg);
  min-height:100dvh; line-height:1.5;
  display:flex; flex-direction:column;
}
.fundo{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(60vw 60vw at 78% -10%, #23407055 0, transparent 60%),
    radial-gradient(50vw 50vw at 8% 108%, #1f5a4f44 0, transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}
.wrap{
  width:100%; max-width:460px; margin:0 auto;
  padding:22px 18px 30px; flex:1;
  display:flex; flex-direction:column;
}
.marca{
  display:flex; align-items:center; gap:10px;
  font-family:Fraunces,serif; font-weight:600; font-size:1.05rem;
  letter-spacing:.2px; color:var(--tx2); margin-bottom:18px;
}
.marca .logo{height:26px;width:auto;border-radius:6px}

.cartao{
  background:var(--card); border:1px solid var(--linha);
  border-radius:var(--r); padding:24px 20px 22px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 60px -24px #000a;
}
.cartao.largo{max-width:none}
.titulo{font-family:Fraunces,serif; font-weight:600; font-size:1.5rem; letter-spacing:.2px}
.sub{color:var(--tx2); margin-top:6px; font-size:.95rem}

.campos{display:flex;flex-direction:column;gap:12px;margin:16px 0 4px}
label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:var(--tx2)}
input[type=text],input[type=tel],input[type=url],input[type=number],input[type=file]{
  font:inherit; color:var(--tx); background:#0d1219;
  border:1px solid var(--linha); border-radius:11px; padding:11px 12px;
  width:100%;
}
input:focus{outline:2px solid var(--ac);outline-offset:1px;border-color:transparent}
#nome{text-transform:uppercase}
.consent{flex-direction:row;gap:9px;align-items:flex-start;font-size:.8rem;color:var(--tx2);line-height:1.45}
.consent input{margin-top:3px;flex:none;width:18px;height:18px;accent-color:var(--ac)}
.consent a,.link,.rodape a{color:var(--ac);text-decoration:none}
.consent a:hover,.link:hover{text-decoration:underline}

.palco{
  position:relative; width:230px; height:230px; margin:20px auto 8px;
  border-radius:50%; overflow:hidden;
  background:#0a0d12; border:1px solid var(--linha);
}
#video,#overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
#overlay{transform:scaleX(-1)}
.alvo{
  position:absolute; inset:10px; border-radius:50%;
  border:2px dashed #ffffff2e; transition:border-color .25s, box-shadow .25s;
  pointer-events:none;
}
.alvo.ok{border-color:var(--ok);border-style:solid;box-shadow:0 0 0 4px #37d9a033}
.alvo.busca{border-color:var(--ac);border-style:solid}

.instrucao{text-align:center;color:var(--tx);font-weight:500;min-height:1.4em;margin-top:6px}
.barra{height:4px;background:#ffffff12;border-radius:4px;overflow:hidden;margin:12px 0 4px}
.barra-progresso{height:100%;width:0;background:linear-gradient(90deg,var(--ac),var(--ac2));transition:width .3s}

.acoes{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:16px}
.btn{
  font:inherit;font-weight:600; cursor:pointer;
  background:linear-gradient(180deg,#6aa6ff,#4d86e6); color:#08111f;
  border:0; border-radius:12px; padding:13px 22px; width:100%;
  transition:transform .12s, filter .12s, opacity .12s;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:progress}
.btn-min{font:inherit;font-size:.8rem;cursor:pointer;background:#ffffff10;color:var(--tx2);border:1px solid var(--linha);border-radius:8px;padding:6px 10px}
.btn-min.perigo{color:var(--err);border-color:#ff6b6b3a}
.link{font-size:.86rem}

.msg{text-align:center;margin-top:14px;font-size:.9rem;min-height:1.3em}
.msg.ok{color:var(--ok)} .msg.err{color:var(--err)}
.diag{text-align:center;margin-top:6px;font-size:.72rem;color:var(--tx3);font-family:ui-monospace,Menlo,Consolas,monospace}

.itens{list-style:none;display:flex;flex-direction:column;gap:10px;margin:18px 0 4px}
.itens a{
  display:flex;flex-direction:column;gap:3px;
  background:#0d1219;border:1px solid var(--linha);border-radius:12px;
  padding:13px 14px;color:var(--tx);text-decoration:none;transition:border-color .15s
}
.itens a:hover{border-color:var(--ac)}
.itens span{color:var(--tx2);font-size:.85rem}
.vazio,.hint{color:var(--tx3);font-size:.85rem;margin:10px 0}
.flash{background:#37d9a01a;border:1px solid #37d9a03a;color:var(--ok);border-radius:10px;padding:9px 12px;margin:12px 0;font-size:.88rem}

h2{font-family:Fraunces,serif;font-weight:600;font-size:1.05rem;margin:22px 0 10px;color:var(--tx)}
.tab{width:100%;border-collapse:collapse;font-size:.86rem}
.tab th{text-align:left;color:var(--tx3);font-weight:500;padding:6px 8px;border-bottom:1px solid var(--linha)}
.tab td{padding:8px;border-bottom:1px solid var(--linha);vertical-align:middle}
.tab .trunc{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx2)}
.form-grid{display:flex;flex-direction:column;gap:11px;margin-bottom:8px}

.rodape{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:22px;padding-top:14px;font-size:.78rem;color:var(--tx3);
}

@media (max-width:380px){ .palco{width:200px;height:200px} }