.photo-preview-video { width: 100%; height: 100%; object-fit: cover; }
#selfie-camera { transform: scaleX(-1); }
.camera-shutter { position: absolute; left: 50%; bottom: .75rem; z-index: 2; transform: translateX(-50%); }
.camera-switch { position: absolute; right: .75rem; top: .75rem; z-index: 4; }
.camera-fullscreen-exit { position: absolute; left: .75rem; top: .75rem; z-index: 4; }
.id-document-guide {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: var(--document-guide-width, 88%);
    height: var(--document-guide-height, 32%);
    border: 2px dashed rgba(255,255,255,.92);
    border-radius: .65rem;
    box-shadow: 0 0 0 9999px rgba(15,23,42,.42), 0 1px 12px rgba(15,23,42,.55);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width 350ms ease, height 350ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.id-document-guide[data-detected="true"] {
    border-color: #34d399;
    box-shadow: 0 0 0 9999px rgba(15,23,42,.32), 0 0 16px rgba(16,185,129,.8);
}
.id-document-guide-status {
    position: absolute;
    top: -5.5rem;
    left: 50%;
    width: max-content;
    max-width: min(90vw, 30rem);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: .85rem;
    background: rgba(15,23,42,.88);
    padding: .65rem 1rem;
    color: #fff;
    font-size: clamp(.95rem, 3.8vw, 1.2rem);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    transform: translateX(-50%);
}
.id-document-guide[data-detected="true"] .id-document-guide-status {
    border-color: rgba(52,211,153,.65);
    background: rgba(6,78,59,.92);
}
.id-document-guide-corner {
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-color: #fff;
    border-style: solid;
    border-width: 0;
    filter: drop-shadow(0 1px 2px rgba(15,23,42,.7));
    transition: border-color 180ms ease;
}
.id-document-guide[data-detected="true"] .id-document-guide-corner { border-color: #34d399; }
.id-document-guide-corner--top-left { top: -2px; left: -2px; border-top-width: 4px; border-left-width: 4px; border-top-left-radius: .55rem; }
.id-document-guide-corner--top-right { top: -2px; right: -2px; border-top-width: 4px; border-right-width: 4px; border-top-right-radius: .55rem; }
.id-document-guide-corner--bottom-left { bottom: -2px; left: -2px; border-bottom-width: 4px; border-left-width: 4px; border-bottom-left-radius: .55rem; }
.id-document-guide-corner--bottom-right { right: -2px; bottom: -2px; border-right-width: 4px; border-bottom-width: 4px; border-bottom-right-radius: .55rem; }
.photo-preview-frame #selfie-camera-message {
    top: max(1rem, env(safe-area-inset-top));
    z-index: 8;
    width: min(88vw, 34rem);
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(15,23,42,.94);
    padding: .8rem 1rem;
    color: #fff;
    font-size: clamp(1rem, 4vw, 1.25rem);
    font-weight: 700;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    pointer-events: none;
}
.face-guide-wrap { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.face-guide-oval {
    position: absolute;
    left: 50%;
    top: var(--face-guide-top, 46%);
    width: var(--face-guide-width, 28%);
    height: var(--face-guide-height, 38%);
    border: 4px solid rgba(255,255,255,.95);
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(255,255,255,.88), 0 0 18px rgba(15,23,42,.2);
    transform: translate(-50%, -50%);
    overflow: hidden;
    isolation: isolate;
    transition: top 350ms ease, width 350ms ease, height 350ms ease, border-color 180ms ease;
}
.face-guide-oval[data-shape="circle"] { border-radius: 50%; }
.face-guide-oval[data-shape="rounded-rectangle"] { border-radius: 22%; }
.face-guide-oval[data-ready="true"] { border-color: #10b981; }
.face-guide-oval[data-capturing="true"] {
    border-color: #10b981;
    border-width: 5px;
    animation: selfie-guide-outline 1s ease-in-out infinite alternate;
}
.face-guide-oval[data-capturing="true"]::before,
.face-guide-oval[data-capturing="true"]::after {
    position: absolute;
    border-radius: inherit;
    content: "";
    pointer-events: none;
}
.face-guide-oval[data-capturing="true"]::before {
    inset: 0;
    z-index: 0;
    background: linear-gradient(to top, rgba(16,185,129,.34), rgba(52,211,153,.1));
    transform: scaleY(0);
    transform-origin: bottom;
    animation: selfie-guide-fill 1s linear forwards;
}
.face-guide-oval[data-capturing="true"]::after {
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 22%;
    background: linear-gradient(to bottom, rgba(71,85,105,.44), rgba(148,163,184,.18), transparent);
    box-shadow: 0 1px 5px rgba(71,85,105,.28);
    animation: selfie-guide-scan 1s linear forwards;
}
@keyframes selfie-guide-fill {
    to { transform: scaleY(1); }
}
@keyframes selfie-guide-scan {
    to { top: 78%; }
}
@keyframes selfie-guide-outline {
    from { box-shadow: 0 0 0 9999px rgba(255,255,255,.88), 0 0 8px 2px rgba(16,185,129,.4); }
    to { box-shadow: 0 0 0 9999px rgba(255,255,255,.88), 0 0 18px 5px rgba(16,185,129,.85); }
}
.photo-preview-frame.selfie-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 100;
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    aspect-ratio: auto !important;
    border: 0;
    border-radius: 0;
    background: #0f172a;
}
.photo-preview-frame.selfie-fullscreen .photo-preview-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.selfie-camera-fullscreen { overflow: hidden; }
.selfie-video-guide {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}
.selfie-oval-progress {
    position: absolute;
    top: var(--face-guide-top, 52%);
    left: 50%;
    width: calc(var(--face-guide-width, 28%) + 1rem);
    height: calc(var(--face-guide-height, 38%) + 1rem);
    overflow: visible;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: top 350ms ease, width 350ms ease, height 350ms ease, filter 220ms ease;
}
.selfie-oval-track,
.selfie-oval-fill {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}
.selfie-oval-track { stroke: rgba(148,163,184,.38); }
.selfie-oval-fill {
    stroke: #34d399;
    stroke-width: 2.4;
    stroke-dasharray: var(--turn-progress, 0) 100;
    transition: stroke-dasharray 320ms linear;
}
.selfie-oval-fill[data-side][data-complete="true"] {
    stroke: #10b981;
}
.selfie-video-instruction {
    position: absolute;
    top: max(1rem, env(safe-area-inset-top));
    left: 50%;
    width: min(88vw, 34rem);
    z-index: 1;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    border-radius: 1rem;
    background: rgba(15,23,42,.94);
    padding: .8rem 1rem;
    color: white;
    font-size: clamp(1rem, 4vw, 1.35rem);
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.selfie-video-arrow {
    display: none;
    width: 1.65rem;
    height: 1.65rem;
    flex: 0 0 auto;
    fill: none;
    stroke: #6ee7b7;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px rgba(52,211,153,.4));
}
.selfie-video-guide[data-direction="left"] [data-direction-arrow="left"],
.selfie-video-guide[data-direction="right"] [data-direction-arrow="right"] {
    display: block;
    animation: selfie-arrow-nudge 700ms ease-in-out infinite alternate;
}
@keyframes selfie-arrow-nudge {
    to { transform: translateX(var(--arrow-nudge, 0)); }
}
.selfie-video-guide[data-direction="left"] [data-direction-arrow="left"] { --arrow-nudge: -.25rem; }
.selfie-video-guide[data-direction="right"] [data-direction-arrow="right"] { --arrow-nudge: .25rem; }
@media (prefers-reduced-motion: reduce) {
    .selfie-video-arrow { animation: none; }
    .selfie-oval-fill { transition: none; }
    .face-guide-oval[data-capturing="true"]::before,
    .face-guide-oval[data-capturing="true"]::after,
    .face-guide-oval[data-capturing="true"] { animation-duration: 1ms; }
}