.scan-face-module{
  position:relative;
  /* width:min(680px, 100%); */
  max-width: 600px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border-radius:18px;
  overflow:hidden;
  background:#070b12;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.scan-face-img{ width:100%; height:100%; object-fit:cover; display:block; }
.scan-face-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.scan-dot{
  position:absolute;
  width:14px;height:14px;
  transform:translate(-50%,-50%);
  border-radius:999px;
  border:none;
  cursor:pointer;
  z-index:5;
  background: radial-gradient(circle at 30% 30%, #eaffff 0%, #68f0ff 25%, #00aaff 60%, rgba(0,0,0,0) 72%);
  box-shadow: 0 0 0 2px rgba(0,200,255,.35), 0 0 18px rgba(0,200,255,.85), 0 0 48px rgba(0,140,255,.55);
}
.scan-dot::after{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:999px;
  border:1px solid rgba(120,240,255,.25);
  box-shadow:0 0 28px rgba(0,200,255,.25);
  opacity:.75;
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%{transform:scale(.85);opacity:.35;}
  50%{transform:scale(1.15);opacity:.85;}
  100%{transform:scale(.85);opacity:.35;}
}