.flip-stack {
    position: absolute;
    inset: 0;
    transform: scaleX(-1);
    transform-origin: center center;
    z-index: 1;
  }
  
  #preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .face-scan-fx {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  
  .face-scan-fx:not(.hidden) {
    opacity: 1;
  }
  
  .face-scan-fx--paused .face-scan-fx-wave {
    animation-play-state: paused;
  }
  
  .face-scan-fx--paused .face-scan-fx-tint {
    opacity: 0.45;
  }
  
  .face-scan-fx-clip {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: inset(0);
    filter: saturate(1.02);
    transition: clip-path 0.08s linear;
  }
  
  .face-scan-fx-tint {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      155deg,
      rgba(76, 160, 240, 0.14) 0%,
      rgba(140, 200, 255, 0.2) 45%,
      rgba(61, 156, 245, 0.12) 100%
    );
    mix-blend-mode: soft-light;
    opacity: 0.2;
    transition: opacity 0.3s ease;
  }
  
  .face-scan-fx-wave {
    position: absolute;
    left: 0;
    width: 100%;
    height: 240%;
    top: -70%;
    transform-origin: 50% 50%;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 41%,
      rgba(160, 210, 255, 0.28) 47.2%,
      rgba(240, 252, 255, 0.95) 49.35%,
      rgba(100, 175, 240, 0.55) 50.15%,
      rgba(70, 145, 225, 0.22) 51.2%,
      rgba(255, 255, 255, 0) 56%,
      rgba(255, 255, 255, 0) 100%
    );
    animation: face-scan-sweep 2.2s ease-in-out infinite;
    will-change: transform;
    opacity: 0.45;
  }

  .face-scan-target {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30%;
    height: 36%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    border: 2px solid rgba(159, 115, 255, 0.92);
    box-shadow:
      0 0 0 1px rgba(223, 122, 254, 0.26),
      0 0 18px rgba(129, 74, 200, 0.26),
      inset 0 0 0 1px rgba(76, 227, 255, 0.26);
    background:
      linear-gradient(
        165deg,
        rgba(223, 122, 254, 0.08) 0%,
        rgba(76, 227, 255, 0.06) 60%,
        rgba(76, 227, 255, 0.02) 100%
      );
    transition:
      left 90ms linear,
      top 90ms linear,
      width 90ms linear,
      height 90ms linear,
      opacity 140ms ease;
  }

  .face-scan-target::before,
  .face-scan-target::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }

  .face-scan-target::before {
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(
      135deg,
      rgba(223, 122, 254, 0.9) 0%,
      rgba(159, 115, 255, 0.6) 50%,
      rgba(76, 227, 255, 0.82) 100%
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 2px;
    opacity: 0.8;
  }

  .face-scan-target::after {
    inset: 8%;
    border-radius: 14px;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    opacity: 0.45;
  }

  .face-scan-target-line {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      rgba(223, 122, 254, 0) 0%,
      rgba(223, 122, 254, 0.95) 34%,
      rgba(76, 227, 255, 0.95) 66%,
      rgba(76, 227, 255, 0) 100%
    );
    box-shadow:
      0 0 8px rgba(223, 122, 254, 0.45),
      0 0 14px rgba(76, 227, 255, 0.35);
    transform: translateY(-50%);
    animation: face-target-scan 1.35s ease-in-out infinite;
  }

  .face-scan-target-guide {
    position: absolute;
    left: 50%;
    top: -18px;
    transform: translate(-50%, -100%);
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    color: rgba(243, 248, 255, 0.95);
    background:
      linear-gradient(
        135deg,
        rgba(124, 92, 214, 0.9) 0%,
        rgba(67, 175, 224, 0.85) 100%
      );
    border: 1px solid rgba(234, 240, 255, 0.45);
    box-shadow:
      0 7px 18px rgba(20, 16, 45, 0.42),
      0 0 16px rgba(76, 227, 255, 0.22);
    white-space: nowrap;
    pointer-events: none;
  }

  .face-scan-target.guide-left,
  .face-scan-target.guide-right,
  .face-scan-target.guide-up,
  .face-scan-target.guide-down {
    box-shadow:
      0 0 0 1px rgba(223, 122, 254, 0.3),
      0 0 20px rgba(129, 74, 200, 0.34),
      inset 0 0 0 1px rgba(76, 227, 255, 0.3);
  }

  .face-scan-target.guide-left .face-scan-target-guide,
  .face-scan-target.guide-right .face-scan-target-guide,
  .face-scan-target.guide-up .face-scan-target-guide,
  .face-scan-target.guide-down .face-scan-target-guide {
    animation: face-guide-bob 0.95s ease-in-out infinite;
  }

  .face-scan-target.guide-left .face-scan-target-guide::before,
  .face-scan-target.guide-right .face-scan-target-guide::before,
  .face-scan-target.guide-up .face-scan-target-guide::before,
  .face-scan-target.guide-down .face-scan-target-guide::before {
    content: "";
    display: inline-block;
    margin-right: 6px;
    opacity: 0.88;
  }

  .face-scan-target.guide-left .face-scan-target-guide::before {
    content: "←";
  }

  .face-scan-target.guide-right .face-scan-target-guide::before {
    content: "→";
  }

  .face-scan-target.guide-up .face-scan-target-guide::before {
    content: "↑";
  }

  .face-scan-target.guide-down .face-scan-target-guide::before {
    content: "↓";
  }

  @keyframes face-target-scan {
    0% {
      top: 18%;
      opacity: 0.45;
    }
    50% {
      top: 50%;
      opacity: 1;
    }
    100% {
      top: 82%;
      opacity: 0.45;
    }
  }

  @keyframes face-guide-bob {
    0% {
      transform: translate(-50%, -100%) translateY(0);
    }
    50% {
      transform: translate(-50%, -100%) translateY(-2px);
    }
    100% {
      transform: translate(-50%, -100%) translateY(0);
    }
  }
  
  @keyframes face-scan-sweep {
    0% {
      transform: translateY(-8%);
    }
    50% {
      transform: translateY(22%);
    }
    100% {
      transform: translateY(-8%);
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .face-scan-fx-wave {
      animation: none;
      transform: translateY(8%);
      opacity: 0.85;
    }
  }