*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow-x:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#1e293b,#334155 25%,#475569 75%,#64748b);margin:0;padding:0}#root{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:0}.app{width:100%;height:100vh;height:100dvh;max-width:100%;margin:0;padding:0;display:flex;flex-direction:column;background:#fff;position:relative;overflow:hidden}@media (min-width: 768px){#root{padding:20px}.app{max-width:390px;height:90vh;height:90dvh;max-height:800px;border-radius:24px;box-shadow:0 0 50px #0000004d}}.app-header{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;padding:env(safe-area-inset-top,0px) 24px 16px;padding-top:max(env(safe-area-inset-top,0px),16px);text-align:center;position:relative;flex-shrink:0}.app-header:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:#fff3}.app-header h1{font-size:22px;font-weight:700;margin-bottom:2px;letter-spacing:-.025em}.app-header p{font-size:14px;opacity:.9;font-weight:400}.verification-container{flex:1;display:flex;flex-direction:column;padding:20px;background:#fff;overflow-y:auto;min-height:0}.app-footer{padding:12px 24px;padding-bottom:max(env(safe-area-inset-bottom,0px),12px);background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.privacy-badge{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#64748b;font-weight:500}.method-selection-screen{flex:1;display:flex;flex-direction:column;justify-content:center;padding:20px 0}.method-intro{text-align:center;margin-bottom:32px}.method-intro h2{font-size:24px;font-weight:700;color:#1e293b;margin-bottom:8px;letter-spacing:-.025em}.method-intro p{font-size:16px;color:#64748b;font-weight:500}.method-options{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.method-option{display:flex;align-items:center;padding:20px;background:#fff;border:2px solid #e2e8f0;border-radius:16px;cursor:pointer;transition:all .2s ease;text-align:left;position:relative}.method-option:hover{border-color:#3b82f6;transform:translateY(-2px);box-shadow:0 4px 12px #3b82f626}.method-option.selected{border-color:#3b82f6;background:linear-gradient(135deg,#eff6ff,#dbeafe);box-shadow:0 4px 12px #3b82f633}.method-icon{font-size:32px;margin-right:16px;flex-shrink:0}.method-content{flex:1}.method-content h3{font-size:18px;font-weight:700;color:#1e293b;margin-bottom:4px}.method-content p{font-size:14px;color:#64748b;line-height:1.4}.method-check{width:24px;height:24px;border-radius:50%;background:#3b82f6;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;opacity:0;transition:opacity .2s ease}.method-option.selected .method-check{opacity:1}.continue-button{width:100%;padding:16px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #3b82f64d;letter-spacing:.025em}.continue-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #3b82f666}.camera-container{position:relative;border-radius:20px;overflow:hidden;margin-bottom:20px;background:#000;box-shadow:0 8px 25px #00000026;border:2px solid #e2e8f0}.camera-video{width:100%;height:280px;object-fit:cover;transform:scaleX(-1);background:#000}@media (max-height: 700px){.camera-video{height:240px}}.camera-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;border:3px solid rgba(255,255,255,.8);border-radius:50%;pointer-events:none}.capture-button{width:100%;padding:16px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #3b82f64d}.capture-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #3b82f666}.capture-button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.file-upload{margin-bottom:20px}.file-input{width:100%;padding:12px;border:2px dashed #ccc;border-radius:8px;background:#f9f9f9;text-align:center;cursor:pointer}.processing{text-align:center;padding:40px 20px}.spinner{border:4px solid #f1f5f9;border-top:4px solid #3b82f6;border-radius:50%;width:48px;height:48px;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.result{text-align:center;padding:32px 20px;border-radius:16px;margin:16px 0}.result.success{background:linear-gradient(135deg,#ecfdf5,#f0fdf4);border:2px solid #bbf7d0;color:#16a34a}.result.failure{background:linear-gradient(135deg,#fef2f2,#fef7f7);border:2px solid #fecaca;color:#dc2626}.result-icon{font-size:64px;margin-bottom:16px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.result h3{font-size:22px;font-weight:700;margin-bottom:12px}.result p{font-size:16px;margin-bottom:8px;font-weight:500}.retry-button{margin-top:20px;padding:14px 28px;background:transparent;border:2px solid #3b82f6;color:#3b82f6;border-radius:12px;cursor:pointer;font-weight:600;font-size:15px;transition:all .2s ease}.retry-button:hover{background:#3b82f6;color:#fff;transform:translateY(-1px)}.error{color:#dc2626;text-align:center;padding:20px;background:linear-gradient(135deg,#fef2f2,#fef7f7);border:2px solid #fecaca;border-radius:12px;margin-bottom:20px;font-weight:500}.guided-verification{width:100%;flex:1;display:flex;flex-direction:column}.verification-loading,.verification-ready,.verification-processing{text-align:center;padding:24px 20px;flex:1;display:flex;flex-direction:column;justify-content:center}@media (max-height: 700px){.verification-loading,.verification-ready,.verification-processing{padding:16px 20px}}.loading-spinner,.processing-spinner{width:64px;height:64px;border:4px solid #f1f5f9;border-top:4px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 24px}.verification-loading h3,.verification-ready h3,.verification-processing h3{font-size:20px;font-weight:700;margin-bottom:8px;color:#1e293b}.verification-loading p,.verification-processing p{color:#64748b;font-size:16px}.progress-bar{width:100%;height:6px;background:#e2e8f0;border-radius:3px;margin:20px 0;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#1d4ed8);border-radius:3px;transition:width .4s ease}.ready-icon{font-size:72px;margin-bottom:24px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1))}.start-verification-btn{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;padding:18px 36px;border-radius:16px;font-size:17px;font-weight:700;cursor:pointer;margin-top:24px;transition:all .2s ease;box-shadow:0 4px 12px #3b82f64d;letter-spacing:.025em}.start-verification-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #3b82f666}.instructions-preview{text-align:left;background:linear-gradient(135deg,#f8fafc,#f1f5f9);padding:20px;border-radius:16px;margin:20px 0;border:2px solid #e2e8f0;box-shadow:0 2px 8px #0000000d}@media (max-height: 700px){.instructions-preview{padding:16px;margin:16px 0}}.instructions-preview p{margin-bottom:16px;font-size:17px;font-weight:600;color:#1e293b}.instructions-preview ol{margin:16px 0;padding-left:24px}.instructions-preview li{margin-bottom:12px;font-size:15px;line-height:1.5;color:#475569;font-weight:500}.privacy-note{background:linear-gradient(135deg,#ecfdf5,#f0fdf4);padding:16px;border-radius:12px;margin-top:20px;font-size:14px;border:2px solid #bbf7d0;color:#16a34a;font-weight:600}.verification-active{text-align:center;flex:1;display:flex;flex-direction:column}.verification-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.face-guide{width:220px;height:260px;border:4px solid rgba(59,130,246,.8);border-radius:50%/60% 60% 40% 40%;background:#3b82f61a;animation:pulse 2s infinite;box-shadow:0 0 20px #3b82f64d}@keyframes pulse{0%{transform:scale(1);opacity:.8}50%{transform:scale(1.05);opacity:.6}to{transform:scale(1);opacity:.8}}.verification-instructions{padding:24px;background:linear-gradient(135deg,#fffffffa,#f8fafcfa);border-radius:16px;margin-top:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.8);box-shadow:0 4px 16px #0000001a}.step-indicator{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;padding:6px 16px;border-radius:24px;font-size:13px;font-weight:700;display:inline-block;margin-bottom:16px;letter-spacing:.025em;box-shadow:0 2px 8px #3b82f64d}.verification-instructions h3{font-size:18px;font-weight:700;color:#1e293b;margin-bottom:12px}.countdown{font-size:56px;font-weight:800;color:#3b82f6;margin-top:16px;animation:countdownPulse 1s infinite;text-shadow:0 2px 4px rgba(59,130,246,.3)}@keyframes countdownPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.camera-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:280px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);color:#64748b;border-radius:20px}@media (max-height: 700px){.camera-loading{height:240px}}.camera-loading .loading-spinner{width:48px;height:48px;margin-bottom:20px}.camera-loading p{font-size:16px;margin:0;font-weight:500}.direction-indicator{position:absolute;top:50%;transform:translateY(-50%);z-index:10}.direction-left{left:10px}.direction-right{right:10px}.direction-smile{top:20px;left:50%;transform:translate(-50%)}.arrow{font-size:52px;color:#fff;background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-radius:50%;width:88px;height:88px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px #3b82f666;border:4px solid #ffffff;animation:arrowPulse 1.2s infinite}.smile-indicator{font-size:48px;animation:bounce 1s infinite}@keyframes arrowPulse{0%,to{opacity:.8;transform:scale(1);box-shadow:0 6px 16px #3b82f666}50%{opacity:1;transform:scale(1.15);box-shadow:0 8px 24px #3b82f699}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.capture-indicator{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;color:#3b82f6;font-size:15px;font-weight:600}.capture-pulse{width:14px;height:14px;background:#3b82f6;border-radius:50%;animation:capturePulse .8s infinite;box-shadow:0 0 8px #3b82f680}@keyframes capturePulse{0%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.face-guide{width:200px;height:240px;border:3px solid rgba(102,126,234,.8);border-radius:50%/60% 60% 40% 40%;background:#667eea1a;animation:pulse 2s infinite;transition:all .3s ease}.face-guide.capturing{border-color:#10b981;background:#10b9811a;animation:captureGlow .6s infinite;box-shadow:0 0 25px #10b98166}@keyframes captureGlow{0%,to{border-color:#10b981;box-shadow:0 0 25px #10b98166}50%{border-color:#059669;box-shadow:0 0 35px #10b981b3}}.document-instructions{flex:1;display:flex;flex-direction:column;justify-content:center;padding:20px 0}.instruction-content{text-align:center;background:linear-gradient(135deg,#f8fafc,#f1f5f9);padding:32px 24px;border-radius:20px;border:2px solid #e2e8f0;box-shadow:0 4px 16px #0000001a}.document-icon{font-size:64px;margin-bottom:20px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1))}.instruction-content h3{font-size:24px;font-weight:700;color:#1e293b;margin-bottom:24px;letter-spacing:-.025em}.instructions-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px;text-align:left}.instruction-item{display:flex;align-items:center;gap:16px;padding:16px;background:#fff;border-radius:12px;border:2px solid #e2e8f0;font-size:15px;font-weight:500;color:#475569}.instruction-item span:first-child{font-size:24px;flex-shrink:0}.start-camera-button{width:100%;padding:18px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;border-radius:16px;font-size:17px;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #3b82f64d;letter-spacing:.025em}.start-camera-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #3b82f666}.document-camera-container{flex:1;display:flex;flex-direction:column}.document-camera-header{text-align:center;margin-bottom:20px}.document-camera-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:8px;letter-spacing:-.025em}.document-camera-header p{font-size:15px;color:#64748b;font-weight:500}.document-camera-view{position:relative;border-radius:20px;overflow:hidden;margin-bottom:20px;background:#000;box-shadow:0 8px 25px #00000026;border:2px solid #e2e8f0;flex:1;display:flex;flex-direction:column}.document-camera-video{width:100%;height:auto;object-fit:contain;background:#000;transform:none;max-height:400px;min-height:280px}.document-capture-button{width:100%;padding:16px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #3b82f64d;margin-top:auto}.document-capture-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #3b82f666}.document-capture-button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.document-countdown-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0006;pointer-events:none}.countdown-circle{width:120px;height:120px;border:4px solid rgba(255,255,255,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;background:#3b82f6e6;box-shadow:0 0 30px #3b82f680;margin-bottom:30px;animation:countdownPulse 1s infinite}.countdown-number{font-size:48px;font-weight:800;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3)}.capture-progress{text-align:center;background:#000000b3;padding:16px 20px;border-radius:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.attempt-indicators{display:flex;gap:12px;margin-bottom:12px;justify-content:center}.attempt-dot{width:16px;height:16px;border-radius:50%;transition:all .3s ease}.attempt-dot.pending{background:#ffffff4d;border:2px solid rgba(255,255,255,.5)}.attempt-dot.active{background:#3b82f6;border:2px solid #1d4ed8;animation:dotPulse .8s infinite}.attempt-dot.success{background:#10b981;border:2px solid #059669}.attempt-dot.failed{background:#ef4444;border:2px solid #dc2626}@keyframes dotPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}.capture-hint{color:#fff;font-size:14px;font-weight:600;margin:0;text-shadow:0 1px 2px rgba(0,0,0,.5)}