/* ============================================================
   LIVE FACE SCAN — v5.0
   Full-screen overlay. Reuses existing brand tokens only (no new
   colors/fonts introduced) so it matches the rest of the app exactly.
   NOTE: never visually tested on-device from this environment — sizing/
   spacing should be sanity-checked on a real phone before ship.
   ============================================================ */
.ls-root {
  position: fixed; inset: 0; z-index: 999;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  background: var(--obsidian); padding: 24px; padding-bottom: calc(24px + var(--sab));
}
.ls-root.open { display: flex; }

.ls-stage {
  position: relative; width: min(86vw, 340px); height: min(86vw, 340px);
  border-radius: 50%; overflow: hidden;
  box-shadow: var(--edge-light-strong), 0 0 0 1px rgba(196,154,74,.25), 0 8px 40px rgba(0,0,0,.5);
}
.ls-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scaleX(-1); /* natural mirror-like preview; captured pixels are un-mirrored, see normalize.js */
}
.ls-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.ls-ring {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--hairline-strong); pointer-events: none;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.ls-ring--ready {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px rgba(221,184,104,.22), 0 0 24px rgba(221,184,104,.4);
  animation: lsReadyPulse 1.4s ease-in-out infinite;
}
@keyframes lsReadyPulse { 0%,100% { opacity: 1; } 50% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .ls-ring--ready { animation: none; } }

.ls-guidance {
  margin-top: 26px; font-family: var(--ff-display); font-size: var(--fs-base); font-weight: 700;
  color: var(--snow); text-align: center; min-height: 24px;
}

.ls-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 22px; width: 100%; max-width: 320px; }
.ls-capture {
  width: 68px; height: 68px; border-radius: 50%; border: 3px solid var(--gold-bright);
  background: var(--grad-gold, var(--gold)); box-shadow: var(--edge-light-strong), var(--glow-gold-md);
  transition: opacity .2s var(--ease-out), transform .15s var(--ease-out);
}
.ls-capture:disabled { opacity: .3; box-shadow: none; }
.ls-capture:not(:disabled):active { transform: scale(.94); }
.ls-cancel { font-size: var(--fs-sm); color: var(--mist); padding: 8px 16px; }
.ls-cancel:hover { color: var(--snow); }