/* WiseCrypto KYC — 2026 Premium Verification UI */

/* ─── Design Tokens ──────────────────────────────── */

:root {
    --accent: #4ade80;
    --accent-2: #22d3ee;
    --accent-3: #818cf8;
    --gradient: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%);
    --gradient-full: linear-gradient(135deg, #4ade80, #22d3ee, #818cf8);
    --danger: #f87171;
    --bg: #050508;
    --bg-card: rgba(255, 255, 255, 0.035);
    --glass: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.06);
    --text: #f0f0f5;
    --text-dim: rgba(255, 255, 255, 0.5);
    --radius: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: var(--bg); }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

#app { height: 100vh; position: relative; overflow: hidden; }

.screen {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}

/* ─── Ambient Background ─────────────────────────── */

.ambient-bg {
    position: absolute; inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    will-change: transform;
}

.orb-1 {
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(129, 140, 248, 0.3), transparent 70%);
    top: -120px; left: -80px;
    animation: orbDrift1 25s ease-in-out infinite;
}
.orb-2 {
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.25), transparent 70%);
    bottom: -100px; right: -60px;
    animation: orbDrift2 30s ease-in-out infinite;
}
.orb-3 {
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(74, 222, 128, 0.2), transparent 70%);
    top: 45%; left: 40%;
    animation: orbDrift3 22s ease-in-out infinite;
}

@keyframes orbDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40px, 60px) scale(1.1); }
    66% { transform: translate(-20px, 30px) scale(0.95); }
}
@keyframes orbDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-50px, -40px) scale(1.05); }
    66% { transform: translate(30px, -20px) scale(0.9); }
}
@keyframes orbDrift3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    33% { transform: translate(calc(-50% + 30px), calc(-50% - 40px)) scale(1.15); }
    66% { transform: translate(calc(-50% - 20px), calc(-50% + 30px)) scale(0.9); }
}

/* ─── Intro Screen ─────────────────────────────── */

#introScreen { z-index: 1; }

.intro-content {
    text-align: center;
    padding: 36px 28px 32px;
    max-width: 360px;
    width: calc(100% - 32px);
    background: var(--bg-card);
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(40px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 0.5px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    animation: cardAppear 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.intro-icon {
    width: 76px; height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.15), rgba(34, 211, 238, 0.1));
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    position: relative;
    box-shadow: 0 0 40px rgba(74, 222, 128, 0.08);
}
.intro-icon::after {
    content: '';
    position: absolute; inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.4), rgba(34, 211, 238, 0.3));
    z-index: -1;
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}

.intro-content h1 {
    font-size: 24px; font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.75) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.intro-sub {
    color: var(--text-dim);
    font-size: 14px;
    margin-bottom: 32px;
    letter-spacing: 0.1px;
}

.intro-steps {
    text-align: left;
    max-width: 300px;
    margin: 0 auto 28px;
}

.intro-step {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 10px 0;
}

.intro-step + .intro-step {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.step-icon {
    width: 36px; height: 36px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.1), rgba(34, 211, 238, 0.07));
    border: 1px solid rgba(74, 222, 128, 0.12);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.step-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 3px;
}

.step-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.1px;
}

.step-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.1px;
}

/* ─── PoA Screen (Tor fallback) ──────────────────── */

.poa-content {
    text-align: center;
    padding: 36px 28px 32px;
    max-width: 360px;
    width: calc(100% - 32px);
    background: var(--bg-card);
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(40px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 0.5px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    animation: cardAppear 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.poa-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.12), rgba(34, 211, 238, 0.08));
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 0 40px rgba(74, 222, 128, 0.06);
}

.poa-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.75) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.poa-sub {
    color: var(--text-dim);
    font-size: 14px;
    margin-bottom: 24px;
}

.poa-doc-types {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.doc-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    font-weight: 500;
}

.poa-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 280px;
    margin: 0 auto 20px;
}

.poa-camera-btn {
    padding: 14px 24px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #4ade80, #22d3ee);
    color: #0c0c12;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 4px 20px rgba(74, 222, 128, 0.2);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.poa-camera-btn:active { transform: scale(0.97); }

.poa-file-btn {
    padding: 14px 24px;
    border: 1px solid rgba(74, 222, 128, 0.15);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform 0.2s, background 0.2s;
}

.poa-file-btn:active { transform: scale(0.97); background: rgba(255, 255, 255, 0.07); }

.poa-note {
    color: rgba(255, 255, 255, 0.2);
    font-size: 12px;
    letter-spacing: 0.2px;
}

/* ─── CTA Button ──────────────────────────────── */

.cta-btn {
    width: 100%;
    max-width: 300px;
    padding: 15px 32px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%);
    color: #000;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(74, 222, 128, 0.2), 0 0 40px rgba(74, 222, 128, 0.06);
}
.cta-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%);
    transform: translateX(-100%);
    animation: shimmer 3s ease-in-out infinite;
    pointer-events: none;
}
.cta-btn:active {
    transform: scale(0.97);
    box-shadow: 0 2px 10px rgba(74, 222, 128, 0.15);
}

@keyframes shimmer {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

/* ─── Camera Screen ─────────────────────────────── */

.camera-screen {
    background: #000;
    justify-content: stretch;
    z-index: 2;
}

.camera-screen video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

.camera-screen.mirror video {
    transform: scaleX(-1);
}

/* Overlay with cutout */
.overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
    pointer-events: none;
}

/* Guide cutout */
.guide {
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ID mode: rectangle */
.guide.id-mode {
    width: 88%;
    max-width: 340px;
    aspect-ratio: 1.586;
    border-radius: 16px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
}

/* Face mode: oval — shifted up so user can read instructions and see oval together */
.guide.face-mode {
    width: 68%;
    max-width: 300px;
    aspect-ratio: 0.78;
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75);
    transform: translateY(-12%);
}

/* Pulsing guide ring — gradient glow */
.guide.ready {
    box-shadow: 0 0 0 2px var(--accent), 0 0 20px 2px rgba(74, 222, 128, 0.15), 0 0 0 9999px rgba(0, 0, 0, 0.7);
    animation: pulseGuide 2s ease-in-out infinite;
}
.guide.face-mode.ready {
    box-shadow: 0 0 0 2px var(--accent), 0 0 20px 2px rgba(74, 222, 128, 0.15), 0 0 0 9999px rgba(0, 0, 0, 0.75);
}

@keyframes pulseGuide {
    0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 9999px rgba(0,0,0,0.7); }
    50% { box-shadow: 0 0 0 3px var(--accent-2), 0 0 24px 4px rgba(34, 211, 238, 0.2), 0 0 0 9999px rgba(0,0,0,0.7); }
}
.guide.face-mode.ready { animation-name: pulseGuideFace; }
@keyframes pulseGuideFace {
    0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 9999px rgba(0,0,0,0.75); }
    50% { box-shadow: 0 0 0 3px var(--accent-2), 0 0 24px 4px rgba(34, 211, 238, 0.2), 0 0 0 9999px rgba(0,0,0,0.75); }
}

/* Corner brackets (ID mode) */
.corners { display: none; }
.guide.id-mode .corners { display: block; }

.c {
    position: absolute;
    width: 28px; height: 28px;
    border-color: rgba(255,255,255,0.7);
    border-style: solid;
    transition: border-color 0.3s, filter 0.3s;
}
.guide.ready .c {
    border-color: var(--accent);
    filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.4));
}

.c.tl { top: -1px; left: -1px; border-width: 3px 0 0 3px; border-radius: 10px 0 0 0; }
.c.tr { top: -1px; right: -1px; border-width: 3px 3px 0 0; border-radius: 0 10px 0 0; }
.c.bl { bottom: -1px; left: -1px; border-width: 0 0 3px 3px; border-radius: 0 0 0 10px; }
.c.br { bottom: -1px; right: -1px; border-width: 0 3px 3px 0; border-radius: 0 0 10px 0; }

/* ─── Scanner Corner Indicators ────────────────── */
.scan-corners {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: none;
}
.guide.id-mode .scan-corners,
.guide.poa-mode .scan-corners { display: block; }

.sc {
    position: absolute;
    width: 32px; height: 32px;
    border-style: solid;
    border-color: rgba(255,255,255,0.6);
    transition: border-color 0.3s, filter 0.3s;
    will-change: transform;
}
.sc-tl { top: 0; left: 0; border-width: 3px 0 0 3px; border-radius: 4px 0 0 0; }
.sc-tr { top: 0; right: 0; border-width: 3px 3px 0 0; border-radius: 0 4px 0 0; }
.sc-bl { bottom: 0; left: 0; border-width: 0 0 3px 3px; border-radius: 0 0 0 4px; }
.sc-br { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-radius: 0 0 4px 0; }

/* Yellow: quad detected but low sharpness or unstable */
.sc.detected {
    border-color: #fbbf24;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.45));
}

/* Green: sharp + stable, auto-capture imminent */
.sc.locked {
    border-color: #4ade80;
    filter: drop-shadow(0 0 10px rgba(74, 222, 128, 0.6));
    animation: scGlow 0.8s ease-in-out infinite;
}
@keyframes scGlow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.5)); }
    50% { filter: drop-shadow(0 0 16px rgba(74, 222, 128, 0.8)); }
}

/* ─── Sharpness Bar ────────────────────────────── */
.sharpness-bar {
    width: 120px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.1);
    overflow: hidden;
    margin-bottom: 4px;
}
.sharpness-fill {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    background: #f87171;
    transition: width 0.2s ease-out, background 0.3s;
}
.sharpness-fill.sharp {
    background: #4ade80;
}
.sharpness-fill.marginal {
    background: #fbbf24;
}

/* ─── PoA Guide Variant (taller, ~A4 aspect) ──── */
.guide.poa-mode {
    width: 80%;
    max-width: 320px;
    aspect-ratio: 0.77;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
}
.guide.poa-mode .corners { display: none; }
.guide.poa-mode .scan-line { display: block; }
.guide.poa-mode.scanning .scan-line {
    opacity: 0.8;
    animation: scanDown 2.2s ease-in-out infinite;
}
.guide.poa-mode.ready {
    box-shadow: 0 0 0 2px var(--accent), 0 0 20px 2px rgba(74, 222, 128, 0.15), 0 0 0 9999px rgba(0, 0, 0, 0.7);
    animation: pulseGuide 2s ease-in-out infinite;
}

/* Scan line (ID mode) — gradient glow */
.scan-line {
    display: none;
    position: absolute;
    left: 8px; right: 8px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-2), var(--accent), var(--accent-2), transparent);
    border-radius: 1px;
    opacity: 0;
    box-shadow: 0 0 12px var(--accent), 0 0 4px var(--accent-2);
}
.guide.id-mode .scan-line { display: block; }
.guide.id-mode.scanning .scan-line {
    opacity: 0.8;
    animation: scanDown 2.2s ease-in-out infinite;
}

@keyframes scanDown {
    0% { top: 8px; opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { top: calc(100% - 10px); opacity: 0; }
}

/* Tilt challenge — guide rocks side-to-side */
.guide.id-mode.tilting {
    box-shadow: 0 0 0 3px #f59e0b, 0 0 24px 4px rgba(245, 158, 11, 0.3), 0 0 0 9999px rgba(0, 0, 0, 0.7);
    animation: tiltRight 2.5s ease-in-out infinite;
}
.guide.id-mode.tilting .c {
    border-color: #f59e0b;
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.5));
}
.guide.id-mode.tilting .scan-line {
    display: none;
}
@keyframes tiltRight {
    0% { transform: perspective(400px) rotateY(0deg); }
    40% { transform: perspective(400px) rotateY(15deg); }
    70% { transform: perspective(400px) rotateY(15deg); }
    100% { transform: perspective(400px) rotateY(0deg); }
}

/* Tilt instruction overlay */
.tilt-instruction {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 60px);
    background: rgba(245, 158, 11, 0.95);
    color: #000;
    font-weight: 700;
    font-size: 15px;
    padding: 10px 20px;
    border-radius: 24px;
    white-space: nowrap;
    z-index: 30;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 200px;
}
.tilt-instruction .tilt-label { line-height: 1.2; }
.tilt-instruction .tilt-bar {
    width: 100%;
    height: 6px;
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
    overflow: hidden;
}
.tilt-instruction .tilt-fill {
    height: 100%;
    width: 0%;
    background: #000;
    border-radius: 3px;
    transition: width 0.15s ease-out;
}
.tilt-instruction.tilt-done {
    background: rgba(74, 222, 128, 0.95);
}
.tilt-instruction.tilt-done .tilt-fill {
    background: #166534;
}

/* HUD top */
.hud-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 16px 20px;
    z-index: 5;
    text-align: center;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
}

.dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
}

.dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dot.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    width: 28px;
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.3);
}
.dot.done {
    background: var(--accent);
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.2);
}

.hud-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.2px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

/* HUD bottom */
.hud-bottom {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 20px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
}

.status-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    transition: all 0.3s;
}
.status-pill.success {
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.2);
    color: var(--accent);
}

.ring-svg {
    width: 28px; height: 28px;
    flex-shrink: 0;
}

#ringArc {
    transition: stroke-dashoffset 0.1s linear;
}

.manual-btn {
    padding: 14px 48px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
    color: #000;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1);
}
.manual-btn:active { transform: scale(0.95); }

/* Captured layer */
.captured-layer {
    position: absolute; inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.95);
}
.captured-check {
    width: 76px; height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.12), rgba(34, 211, 238, 0.08));
    display: flex; align-items: center; justify-content: center;
    animation: checkPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-bottom: 24px;
    position: relative;
}
.captured-check::after {
    content: '';
    position: absolute; inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    z-index: -1;
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
    animation: ringGlow 2s ease-in-out infinite;
}
.captured-check svg path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: drawCheck 0.5s ease 0.2s forwards;
}
.analyzing-pill {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}

.mini-spin {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: var(--accent);
    border-right-color: var(--accent-2);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* Flash */
.flash {
    position: absolute; inset: 0;
    background: #fff;
    z-index: 9;
    opacity: 0;
    pointer-events: none;
}
.flash.fire {
    animation: flashFire 0.25s ease-out;
}
@keyframes flashFire {
    0% { opacity: 0.6; }
    100% { opacity: 0; }
}

/* ─── Transition Screen ─────────────────────────── */

.transition-screen {
    background: transparent;
    gap: 16px;
    animation: fadeIn 0.3s ease;
    z-index: 1;
}

.trans-check {
    width: 76px; height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.12), rgba(34, 211, 238, 0.08));
    display: flex; align-items: center; justify-content: center;
    animation: checkPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}
.trans-check::after {
    content: '';
    position: absolute; inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    z-index: -1;
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}
.trans-check svg path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: drawCheck 0.5s ease 0.2s forwards;
}

.trans-title {
    font-size: 20px; font-weight: 700;
    letter-spacing: -0.3px;
    animation: fadeUp 0.4s ease 0.15s both;
}

.trans-sub {
    font-size: 17px;
    font-weight: 600;
    color: #c8cad0;
    animation: fadeUp 0.4s ease 0.25s both;
}

/* ─── Error Screen ──────────────────────────────── */

.error-screen {
    background: rgba(5, 5, 8, 0.9);
    z-index: 15;
    animation: fadeIn 0.2s ease;
}

.error-card {
    text-align: center;
    padding: 32px;
    max-width: 300px;
    background: var(--bg-card);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(248, 113, 113, 0.1);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    animation: cardAppear 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.error-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(248, 113, 113, 0.1);
    color: var(--danger);
    font-size: 28px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 0 24px rgba(248, 113, 113, 0.1);
}

.error-card p {
    font-size: 14px;
    color: var(--text-dim);
    line-height: 1.5;
    margin-bottom: 24px;
}

.error-card .cta-btn {
    background: linear-gradient(135deg, #f87171, #fb923c);
    box-shadow: 0 4px 20px rgba(248, 113, 113, 0.2);
}
.error-card .cta-btn::before { display: none; }

/* ─── Processing Screen ─────────────────────────── */

.processing-screen {
    background: transparent;
    gap: 20px;
    z-index: 1;
}

.proc-spinner {
    width: 52px; height: 52px;
    position: relative;
}
.proc-spinner::before,
.proc-spinner::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
}
.proc-spinner::before {
    border-top-color: var(--accent);
    border-right-color: var(--accent-2);
    animation: spin 0.9s linear infinite;
}
.proc-spinner::after {
    inset: 6px;
    border-bottom-color: var(--accent-3);
    border-left-color: rgba(129, 140, 248, 0.3);
    animation: spin 1.4s linear infinite reverse;
}

.proc-text {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.2px;
}
.proc-sub {
    font-size: 13px;
    color: var(--text-dim);
}

/* Progress bar */
.proc-progress {
    width: 200px;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}
.proc-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius: 2px;
    transition: width 0.4s ease-out;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
}

/* Stage text fade transitions */
.proc-fade-out {
    animation: procFadeOut 0.3s ease forwards;
}
.proc-fade-in {
    animation: procFadeIn 0.3s ease forwards;
}
@keyframes procFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}
@keyframes procFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Result Screen ─────────────────────────────── */

.result-screen {
    background: transparent;
    gap: 12px;
    padding: 32px;
    text-align: center;
    z-index: 1;
    overflow-y: auto;
}

.result-badge {
    width: 84px; height: 84px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 40px;
    margin-bottom: 8px;
    animation: checkPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}
.result-badge.pass {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.12), rgba(34, 211, 238, 0.08));
}
.result-badge.pass::after {
    content: '';
    position: absolute; inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    z-index: -1;
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}
.result-badge.pass svg path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: drawCheck 0.6s ease 0.3s forwards;
}
.result-badge.fail {
    background: rgba(248, 113, 113, 0.1);
}
.result-badge.fail::after {
    content: '';
    position: absolute; inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f87171, #fb923c);
    z-index: -1;
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}

.result-screen h2 {
    font-size: 22px; font-weight: 700;
    letter-spacing: -0.3px;
    animation: fadeUp 0.4s ease 0.15s both;
}
.result-screen p {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.6;
    max-width: 280px;
    margin-bottom: 20px;
    animation: fadeUp 0.4s ease 0.25s both;
}
.result-screen .cta-btn {
    animation: fadeUp 0.4s ease 0.35s both;
}

/* ─── MRZ Confirmation Screen ──────────────────── */

#mrzScreen { z-index: 1; }

.mrz-content {
    text-align: center;
    padding: 28px 24px 32px;
    width: calc(100% - 32px);
    max-width: 360px;
    background: var(--bg-card);
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(40px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 0.5px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    animation: cardAppear 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    max-height: 100vh;
}

.mrz-icon {
    width: 68px; height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.12), rgba(34, 211, 238, 0.08));
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    position: relative;
}
.mrz-icon::after {
    content: '';
    position: absolute; inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    z-index: -1;
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}

.mrz-content h2 {
    font-size: 21px; font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: -0.3px;
}

.mrz-sub {
    color: var(--text-dim);
    font-size: 13px;
    margin-bottom: 24px;
}

.mrz-form {
    text-align: left;
    margin-bottom: 24px;
}

.mrz-field {
    margin-bottom: 16px;
}

.mrz-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.mrz-field input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}

.mrz-field input:focus,
.mrz-field select:focus {
    border-color: rgba(74, 222, 128, 0.4);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.08), 0 0 20px rgba(74, 222, 128, 0.04);
}

.mrz-field select {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

.mrz-field select option {
    background: #1a1a24;
    color: #f0f0f5;
}

/* ─── Confirm Details Screen ──────────────────── */

#confirmScreen { z-index: 1; }

.confirm-details {
    text-align: left;
    margin-bottom: 24px;
}

.confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--glass-border);
}

.confirm-row:last-child {
    border-bottom: none;
}

.confirm-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.confirm-value {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    text-align: right;
}

.edit-btn,
.close-btn {
    width: 100%;
    max-width: 300px;
    padding: 12px 32px;
    margin-top: 10px;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    background: transparent;
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.edit-btn:active,
.close-btn:active {
    border-color: rgba(74, 222, 128, 0.3);
    color: var(--text);
}

/* ─── ID Photo Review (HUD-style) ──────────────── */

.review-screen {
    background: #000 !important;
    padding: 0 !important;
}

.review-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 20;
    padding: 16px 20px 18px;
    text-align: center;
    background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 70%, transparent 100%);
}
.review-title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.2px;
    background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.review-sub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    margin-top: 6px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.review-sub svg { opacity: 0.5; flex-shrink: 0; }

.review-photo-full {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 16px 100px;
    touch-action: none;
    overflow: hidden;
}

.review-photo-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    transform-origin: center center;
}
.review-photo-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    display: block;
}

/* Corner brackets around photo */
.review-corners {
    position: absolute;
    inset: -8px;
    pointer-events: none;
}
.review-corners .rc {
    position: absolute;
    width: 24px; height: 24px;
    border-color: var(--accent);
    border-style: solid;
    filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.35));
    transition: border-color 0.3s;
}
.review-corners .rc.tl { top: 0; left: 0; border-width: 2.5px 0 0 2.5px; border-radius: 8px 0 0 0; }
.review-corners .rc.tr { top: 0; right: 0; border-width: 2.5px 2.5px 0 0; border-radius: 0 8px 0 0; }
.review-corners .rc.bl { bottom: 0; left: 0; border-width: 0 0 2.5px 2.5px; border-radius: 0 0 0 8px; }
.review-corners .rc.br { bottom: 0; right: 0; border-width: 0 2.5px 2.5px 0; border-radius: 0 0 8px 0; }

/* Scan line across photo */
.review-scan-line {
    position: absolute;
    left: 4px; right: 4px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-2), var(--accent), var(--accent-2), transparent);
    border-radius: 1px;
    box-shadow: 0 0 12px var(--accent), 0 0 4px var(--accent-2);
    opacity: 0;
    animation: reviewScan 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes reviewScan {
    0% { top: 4px; opacity: 0; }
    8% { opacity: 0.5; }
    92% { opacity: 0.5; }
    100% { top: calc(100% - 6px); opacity: 0; }
}

/* Zoom hint pill */
.review-zoom-hint {
    position: fixed;
    bottom: 88px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 19;
    padding: 6px 16px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 100px;
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    animation: fadeIn 0.5s ease 1s both;
    pointer-events: none;
    transition: opacity 0.3s;
}
.review-zoom-hint.hidden { opacity: 0; }

.review-actions {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 20;
    display: flex;
    gap: 12px;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.5) 70%, transparent 100%);
}
.review-retake-btn {
    flex: 1;
    padding: 14px 0;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: rgba(255,255,255,0.75);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.review-retake-btn:active {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    transform: scale(0.97);
}
.review-upload-btn {
    flex: 2;
    padding: 14px 0;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%);
    color: #000;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 20px rgba(74, 222, 128, 0.2), 0 0 40px rgba(74, 222, 128, 0.06);
    -webkit-tap-highlight-color: transparent;
}
.review-upload-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%);
    transform: translateX(-100%);
    animation: shimmer 3s ease-in-out infinite;
}
.review-upload-btn:active { transform: scale(0.97); }

/* ─── Tap-to-Focus Ring ──────────────────────────── */

.focus-ring {
    display: none;
    position: absolute;
    width: 70px;
    height: 70px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 50;
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
}
.focus-ring.active {
    display: block;
    animation: focusPulse 0.8s ease-out forwards;
}
@keyframes focusPulse {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
    40%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
    70%  { opacity: 0.8; transform: translate(-50%, -50%) scale(1.05); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.0); }
}

/* ─── Liveness Flow Tracker (top bar) ──────────── */

.liveness-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 12px;
    animation: fadeIn 0.3s ease;
}

.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.3;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.flow-step span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.flow-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.1);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.flow-step.active {
    opacity: 1;
}
.flow-step.active .flow-icon {
    background: rgba(250, 204, 21, 0.12);
    border-color: rgba(250, 204, 21, 0.5);
    color: #facc15;
    box-shadow: 0 0 16px rgba(250, 204, 21, 0.15);
    animation: flowPulse 1.8s ease-in-out infinite;
}
.flow-step.done {
    opacity: 1;
}
.flow-step.done .flow-icon {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.5);
    color: #4ade80;
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.12);
}

.flow-line {
    width: 28px; height: 2px;
    background: rgba(255,255,255,0.08);
    margin: 0 6px;
    margin-bottom: 18px;
    transition: all 0.4s;
    border-radius: 1px;
}
.flow-line.done {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.2);
}

@keyframes flowPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 12px rgba(250, 204, 21, 0.1); }
    50% { transform: scale(1.08); box-shadow: 0 0 20px rgba(250, 204, 21, 0.25); }
}

/* Liveness hint text */
.liveness-hint {
    margin-top: 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    animation: fadeIn 0.2s ease;
    letter-spacing: 0.2px;
}

/* Hide bottom HUD only during liveness step (manual capture defeats liveness) */
.camera-screen.liveness-active .hud-bottom {
    display: none;
}

/* ─── Liveness Turn Chevrons ───────────────────── */

.turn-chevron {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 3;
    color: rgba(255,255,255,0.1);
    transition: color 0.4s ease, filter 0.4s;
}
.left-chevron { left: 8px; flex-direction: row; }
.right-chevron { right: 8px; flex-direction: row; }

.turn-chevron svg { opacity: 0.5; }
.turn-chevron svg:first-child { margin-right: -16px; opacity: 0.3; }

.turn-chevron.waiting { color: rgba(255,255,255,0.06); }

.turn-chevron.active {
    color: #facc15;
    filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.3));
}
.turn-chevron.active svg:first-child { opacity: 0.4; }
.turn-chevron.active svg:last-child { opacity: 0.9; }
.left-chevron.active svg { animation: bounceLeft 1s ease-in-out infinite; }
.left-chevron.active svg:first-child { animation-delay: 0.15s; }
.right-chevron.active svg { animation: bounceRight 1s ease-in-out infinite; }
.right-chevron.active svg:first-child { animation-delay: 0.15s; }

.turn-chevron.done {
    color: #4ade80;
    filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.3));
}
.turn-chevron.done svg { animation: none; opacity: 0.6; }

@keyframes bounceLeft {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-8px); }
}
@keyframes bounceRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

/* Liveness guide glow states */
.guide.face-mode.liveness-left {
    box-shadow: 0 0 0 2px #facc15, 0 0 20px 2px rgba(250, 204, 21, 0.12), 0 0 0 9999px rgba(0,0,0,0.75);
}
.guide.face-mode.liveness-done {
    box-shadow: 0 0 0 3px #4ade80, 0 0 24px 4px rgba(74, 222, 128, 0.2), 0 0 0 9999px rgba(0,0,0,0.75);
}

/* ─── Animations ──────────────────────────────── */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes checkPop {
    0% { opacity: 0; transform: scale(0.3); }
    50% { transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes cardAppear {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes drawCheck {
    to { stroke-dashoffset: 0; }
}
@keyframes ringGlow {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════
   FUTURISTIC FACE HUD — Biometric Scanner UI
   ═══════════════════════════════════════════════════ */

/* ─── Face Reticle (scanning rings + ticks) ──────── */

.face-reticle { display: none; }
.guide.face-mode .face-reticle {
    display: block;
    position: absolute; inset: 0;
    pointer-events: none;
}

/* Outer dashed scanning ring — slow rotation */
.r-ring-1 {
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    border: 1.5px dashed rgba(34, 211, 238, 0.25);
    animation: reticleRing 10s linear infinite;
}

/* Inner solid scanning ring — counter-rotation */
.r-ring-2 {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(74, 222, 128, 0.1);
    animation: reticleRing 14s linear infinite reverse;
}

@keyframes reticleRing {
    to { transform: rotate(360deg); }
}

/* Activate rings: glow when scanning */
.guide.face-mode.scanning-face .r-ring-1 {
    border-color: rgba(34, 211, 238, 0.4);
    filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.2));
}
.guide.face-mode.scanning-face .r-ring-2 {
    border-color: rgba(74, 222, 128, 0.2);
}

/* Cardinal tick marks (N/E/S/W targeting) */
.reticle-tick {
    position: absolute;
    background: rgba(34, 211, 238, 0.3);
    transition: all 0.3s ease;
}
.rt-n { width: 16px; height: 2px; top: -16px; left: 50%; transform: translateX(-50%); }
.rt-e { width: 2px; height: 16px; right: -16px; top: 50%; transform: translateY(-50%); }
.rt-s { width: 16px; height: 2px; bottom: -16px; left: 50%; transform: translateX(-50%); }
.rt-w { width: 2px; height: 16px; left: -16px; top: 50%; transform: translateY(-50%); }

.guide.face-mode.scanning-face .reticle-tick {
    background: rgba(34, 211, 238, 0.6);
    box-shadow: 0 0 6px rgba(34, 211, 238, 0.3);
}
.guide.ready .reticle-tick,
.guide.liveness-done .reticle-tick {
    background: var(--accent);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
}
.guide.liveness-left .reticle-tick {
    background: rgba(250, 204, 21, 0.5);
    box-shadow: 0 0 6px rgba(250, 204, 21, 0.2);
}

/* ─── Face Scan Beam ─────────────────────────────── */

.face-scan-beam {
    display: none;
    position: absolute;
    left: 10%; right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-2), var(--accent), var(--accent-2), transparent);
    box-shadow: 0 0 16px var(--accent-2), 0 0 4px var(--accent);
    border-radius: 1px;
    opacity: 0;
}
.guide.face-mode .face-scan-beam { display: block; }
.guide.face-mode.scanning-face .face-scan-beam {
    opacity: 0.7;
    animation: faceScanBeam 2.8s ease-in-out infinite;
}

@keyframes faceScanBeam {
    0% { top: 8%; opacity: 0; }
    10% { opacity: 0.7; }
    90% { opacity: 0.7; }
    100% { top: 92%; opacity: 0; }
}

/* ─── HUD Callout Flash (big text overlay) ───────── */

.hud-callout {
    position: absolute;
    top: 40%;
    left: 0; right: 0;
    z-index: 6;
    text-align: center;
    pointer-events: none;
}

.hud-callout span {
    display: inline-block;
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: #fff;
    text-shadow:
        0 0 30px rgba(34, 211, 238, 0.6),
        0 0 60px rgba(34, 211, 238, 0.2),
        0 2px 4px rgba(0,0,0,0.8);
    animation: calloutFlash 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes calloutFlash {
    0% { opacity: 0; transform: scale(0.6); letter-spacing: 12px; }
    25% { opacity: 1; transform: scale(1.05); }
    50% { opacity: 1; transform: scale(1); letter-spacing: 6px; }
    100% { opacity: 0; transform: scale(1.02); letter-spacing: 8px; }
}

/* ─── Tilt Challenge Overlay ─────────────────────── */

.flat-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.75);
    color: #fff;
    text-align: center;
    animation: fadeIn 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.tilt-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 100px;
    pointer-events: none;
    animation: fadeIn 0.3s ease;
}

.tilt-overlay::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 55%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
    pointer-events: none;
}

.tilt-icon {
    position: relative;
    color: #4ade80;
    margin-bottom: 16px;
    z-index: 1;
    filter: drop-shadow(0 0 20px rgba(74, 222, 128, 0.4));
}

/* Card icon rocks forward — far edge tilts away */
.tilt-icon svg {
    animation: tiltCard 1.8s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes tiltCard {
    0%, 100% { transform: perspective(120px) rotateX(0deg); }
    50% { transform: perspective(120px) rotateX(35deg); }
}

.tilt-text {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
    z-index: 1;
}

.tilt-sub {
    margin-top: 8px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    z-index: 1;
}

.tilt-overlay.tilt-detected .tilt-icon {
    color: #22d3ee;
    filter: drop-shadow(0 0 20px rgba(34, 211, 238, 0.5));
}

.tilt-overlay.tilt-detected .tilt-icon svg {
    animation: none;
    transform: perspective(120px) rotateX(35deg);
}

.tilt-overlay.tilt-detected .tilt-text {
    color: #22d3ee;
}

.tilt-overlay .tilt-tap-hint {
    margin-top: 24px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: rgba(74, 222, 128, 0.2);
    border: 1.5px solid rgba(74, 222, 128, 0.5);
    border-radius: 28px;
    pointer-events: auto;
    cursor: pointer;
    z-index: 1;
    animation: fadeIn 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.tilt-overlay .tilt-tap-hint:active {
    background: rgba(74, 222, 128, 0.4);
}

/* Place flat phase */
.tilt-overlay.place-flat .tilt-icon svg {
    animation: none;
    transform: perspective(120px) rotateX(0deg);
}

.tilt-overlay.place-flat .tilt-icon {
    color: #22d3ee;
    filter: drop-shadow(0 0 20px rgba(34, 211, 238, 0.5));
}

/* ─── Biometric Readout ──────────────────────────── */

.bio-readout {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(34, 211, 238, 0.12);
    border-radius: 100px;
    white-space: nowrap;
    animation: fadeIn 0.4s ease;
}

.bio-pulse {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent-2);
    flex-shrink: 0;
    animation: bioPulse 1.2s ease-in-out infinite;
}

.bio-text {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(34, 211, 238, 0.7);
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
}

@keyframes bioPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--accent-2); }
    50% { opacity: 0.2; box-shadow: none; }
}

/* ─── Face HUD Mode (enhanced text) ──────────────── */

.camera-screen.face-hud-active .hud-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.3px;
    text-shadow: 0 0 24px rgba(34, 211, 238, 0.3), 0 2px 12px rgba(0,0,0,0.6);
}

.camera-screen.face-hud-active .liveness-hint {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.85);
    text-shadow: 0 0 16px rgba(34, 211, 238, 0.35), 0 2px 8px rgba(0,0,0,0.6);
}

.liveness-hint.hud-pop {
    animation: hudTextPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes hudTextPop {
    0% { opacity: 0.5; transform: scale(0.9) translateY(3px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─── Enhanced Liveness Chevrons ─────────────────── */

.camera-screen.face-hud-active .turn-chevron.active {
    filter: drop-shadow(0 0 16px rgba(250, 204, 21, 0.5));
}
.camera-screen.face-hud-active .turn-chevron.active svg {
    transform: scale(1.15);
}
.camera-screen.face-hud-active .left-chevron.active svg {
    animation: bounceLeftBig 0.8s ease-in-out infinite;
}
.camera-screen.face-hud-active .right-chevron.active svg {
    animation: bounceRightBig 0.8s ease-in-out infinite;
}

@keyframes bounceLeftBig {
    0%, 100% { transform: translateX(0) scale(1.15); }
    50% { transform: translateX(-12px) scale(1.25); }
}
@keyframes bounceRightBig {
    0%, 100% { transform: translateX(0) scale(1.15); }
    50% { transform: translateX(12px) scale(1.25); }
}

/* ─── Manual Capture Pulse Hint ──────────────────── */

.manual-btn.poa-green {
    background: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%);
    box-shadow: 0 4px 16px rgba(74, 222, 128, 0.2);
}

.manual-btn.pulse-hint {
    animation: pulseHint 1.5s ease-in-out infinite;
    box-shadow: 0 0 16px rgba(74, 222, 128, 0.3), 0 4px 16px rgba(255, 255, 255, 0.1);
}

@keyframes pulseHint {
    0%, 100% { transform: scale(1); box-shadow: 0 0 12px rgba(74, 222, 128, 0.2), 0 4px 16px rgba(255, 255, 255, 0.1); }
    50% { transform: scale(1.05); box-shadow: 0 0 24px rgba(74, 222, 128, 0.4), 0 4px 20px rgba(255, 255, 255, 0.15); }
}

/* ─── Landscape: reduce face oval vertical shift ── */

@media (min-aspect-ratio: 1/1) {
    .guide.face-mode {
        transform: translateY(-5%);
    }
}