:root{--primary-color:#0073aa;--primary-dark:#005177;--success-color:#00a32a;--success-dark:#008a20;--error-color:#d63638;--error-dark:#b32d2e;--warning-color:#dba617;--warning-dark:#c29400;--info-color:#2271b1;--bg-overlay:rgba(0, 0, 0, 0.8);--bg-modal:#ffffff;--bg-dark:#1e1e1e;--text-primary:#1e1e1e;--text-secondary:#646970;--text-light:#ffffff;--border-radius:12px;--transition-speed:0.3s;--animation-bounce:cubic-bezier(0.68, -0.55, 0.265, 1.55);--animation-smooth:cubic-bezier(0.4, 0, 0.2, 1)}@keyframes fadeIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}@keyframes scaleIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(4);opacity:0}}@keyframes drawLine{0%,100%{stroke-dashoffset:100;opacity:.3}50%{stroke-dashoffset:0;opacity:1}}@keyframes scanMove{0%,100%{top:0;opacity:0}10%,90%{opacity:1}100%{top:100%}}@keyframes strokeCircle{100%{stroke-dashoffset:0}}@keyframes strokeCheck{100%{stroke-dashoffset:0}}@keyframes confetti-fall{to{transform:translateY(100vh) rotate(720deg);opacity:0}}#biometric-modal-overlay,.biometric-modal-overlay,#geo-modal,.geo-modal,#photo-confirm-modal,.photo-confirm-modal,#photo-capture-modal,.photo-capture-modal,#camera-modal,.camera-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-overlay);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;z-index:999999;animation:fadeIn 0.3s var(--animation-smooth)}.biometric-modal-overlay.active,.geo-modal.active,.photo-confirm-modal.active,.photo-capture-modal.active,.camera-modal.active{display:flex!important}#biometric-modal-overlay .biometric-modal-content,.biometric-modal-overlay .biometric-modal-content,#geo-modal .geo-content,.geo-modal .geo-content,#photo-confirm-modal .photo-confirm-content,.photo-confirm-modal .photo-confirm-content,#camera-modal .camera-content,.camera-modal .camera-content{background:var(--bg-modal);border-radius:var(--border-radius);box-shadow:0 20px 60px rgb(0 0 0 / .3);max-width:500px;width:90%;max-height:90vh;overflow-y:auto;animation:slideUp 0.4s var(--animation-bounce)}.biometric-modal-header,.geo-header,.photo-header{padding:20px;border-bottom:2px solid #f0f0f1;position:relative}.biometric-modal-header h2,.geo-header h2,.photo-header h2,.biometric-modal-header h3,.geo-header h3,.photo-header h3{margin:0 0 8px;font-size:24px;color:var(--text-primary);font-weight:700}.biometric-modal-header p,.geo-header p,.photo-header p{margin:5px 0 0;color:var(--text-secondary);font-size:14px;line-height:1.5}.modal-close,#modal-close-btn{position:absolute;top:15px;right:15px;background:#fff0;border:none;font-size:24px;cursor:pointer;color:var(--text-secondary);transition:all var(--transition-speed);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.modal-close:hover,#modal-close-btn:hover{background:rgb(0 0 0 / .1);color:var(--error-color);transform:rotate(90deg)}.biometric-modal-body,#modal-body,.geo-body,.photo-body{padding:20px}.biometric-modal-footer,#modal-footer,.geo-footer,.photo-footer,.photo-confirm-buttons{padding:20px;border-top:2px solid #f0f0f1;display:flex;gap:10px;justify-content:flex-end}#biometric-progress-modal,.biometric-progress-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-overlay);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;z-index:1000000;animation:fadeIn 0.3s}#biometric-progress-modal.active,.biometric-progress-modal.active{display:flex!important}.progress-content{background:var(--bg-modal);border-radius:var(--border-radius);padding:40px;max-width:400px;width:90%;text-align:center;box-shadow:0 20px 60px rgb(0 0 0 / .3);animation:scaleIn 0.4s var(--animation-bounce)}.progress-icon,#progress-icon{width:80px;height:80px;margin:0 auto 20px;position:relative;display:flex;align-items:center;justify-content:center}.spinner{width:80px;height:80px;border:4px solid #f3f3f3;border-top:4px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}.success-check{font-size:60px;color:var(--success-color);animation:scaleIn 0.5s var(--animation-bounce)}#progress-title{font-size:20px;font-weight:600;margin:0 0 10px;color:var(--text-primary)}#progress-message{font-size:14px;color:var(--text-secondary);margin:0 0 20px;line-height:1.5}#progress-bar,.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--primary-color),var(--success-color));transition:width 0.4s var(--animation-smooth);border-radius:10px;box-shadow:0 0 10px rgb(0 115 170 / .5)}.geo-icon-container{position:relative;width:120px;height:120px;margin:20px auto;display:flex;align-items:center;justify-content:center}.pulse-ring{position:absolute;width:100%;height:100%;border:3px solid var(--primary-color);border-radius:50%;animation:ripple 2s ease-out infinite}.geo-icon{color:var(--primary-color);filter:drop-shadow(0 4px 8px rgb(0 115 170 / .3));position:relative;z-index:1}#geo-status,.geo-status{margin:20px 0;padding:15px;background:#f0f7ff;border-radius:8px;border-left:4px solid var(--info-color)}#geo-status p,.geo-status p{margin:0;color:var(--text-primary);font-size:14px}#geo-status p.success,.geo-status p.success{color:var(--success-color);font-weight:600}#geo-status p.error,.geo-status p.error{color:var(--error-color);font-weight:600}#geo-status p.warning,.geo-status p.warning{color:var(--warning-color);font-weight:600}#geo-map,.geo-map-preview{margin-top:20px;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px rgb(0 0 0 / .1)}.map-container{padding:15px;background:#f9f9f9;border-radius:8px;text-align:center}.camera-container{position:relative;width:100%;max-width:400px;margin:0 auto;border-radius:var(--border-radius);overflow:hidden;box-shadow:0 8px 24px rgb(0 0 0 / .2);background:#000}#camera-video,#photo-video{width:100%;height:auto;display:block;background:#000}#camera-canvas{display:none}.face-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.camera-guide,.face-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60%;height:75%;border:3px solid rgb(255 255 255 / .5);border-radius:50%;transition:all 0.3s}.face-frame.detected{border-color:var(--success-color);box-shadow:0 0 20px rgb(0 163 42 / .5);animation:pulse 1.5s infinite}.corner{position:absolute;width:30px;height:30px;border:3px solid #fff}.corner-tl{top:-3px;left:-3px;border-right:none;border-bottom:none;border-radius:8px 0 0 0}.corner-tr{top:-3px;right:-3px;border-left:none;border-bottom:none;border-radius:0 8px 0 0}.corner-bl{bottom:-3px;left:-3px;border-right:none;border-top:none;border-radius:0 0 0 8px}.corner-br{bottom:-3px;right:-3px;border-left:none;border-top:none;border-radius:0 0 8px 0}.face-guide{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60%;height:75%}.guide-dot{position:absolute;width:8px;height:8px;background:rgb(255 255 255 / .7);border-radius:50%;box-shadow:0 0 10px rgb(255 255 255 / .5)}.guide-eye-left{top:35%;left:30%}.guide-eye-right{top:35%;right:30%}.guide-nose{top:50%;left:50%;transform:translate(-50%,-50%)}.guide-mouth{bottom:30%;left:50%;transform:translateX(-50%)}.capture-status{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:rgb(0 0 0 / .8);color:#fff;padding:10px 20px;border-radius:20px;font-size:14px;font-weight:600;backdrop-filter:blur(10px)}.camera-controls{display:flex;gap:10px;margin-top:20px;justify-content:center}.photo-preview{text-align:center;margin:20px 0}#preview-image{max-width:100%;border-radius:var(--border-radius);box-shadow:0 8px 24px rgb(0 0 0 / .2)}#fingerprint-animation,.fingerprint-animation{margin:20px 0;text-align:center;position:relative}.fingerprint-container{position:relative;display:inline-block;width:120px;height:120px}.fingerprint-icon{font-size:80px;animation:pulse 1.5s ease-in-out infinite}.fingerprint-svg,.fingerprint-pulse{filter:drop-shadow(0 0 10px rgb(0 163 42 / .5));animation:pulse 1.5s ease-in-out infinite}.fp-line{stroke:var(--success-color);stroke-dasharray:100;stroke-dashoffset:100;animation:drawLine 2s ease-in-out infinite}.fp-line-1{animation-delay:0s}.fp-line-2{animation-delay:0.3s}.fp-line-3{animation-delay:0.6s}.fp-line-4{animation-delay:0.9s}.scan-line{position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--success-color),transparent);box-shadow:0 0 10px var(--success-color);animation:scanMove 2s ease-in-out infinite}.success-animation{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-overlay);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000001;animation:fadeIn 0.3s}.success-content{background:var(--bg-modal);border-radius:var(--border-radius);padding:40px;text-align:center;box-shadow:0 20px 60px rgb(0 0 0 / .3);animation:scaleIn 0.5s var(--animation-bounce)}.success-checkmark{width:120px;height:120px;margin:0 auto 20px}.checkmark{width:100%;height:100%}.checkmark-circle{stroke:var(--success-color);stroke-width:3;stroke-dasharray:166;stroke-dashoffset:166;animation:strokeCircle 0.6s cubic-bezier(.65,0,.45,1) forwards}.checkmark-check{stroke:var(--success-color);stroke-width:3;stroke-linecap:round;stroke-dasharray:48;stroke-dashoffset:48;animation:strokeCheck 0.3s cubic-bezier(.65,0,.45,1) 0.8s forwards}.success-content h2{font-size:28px;color:var(--success-color);margin:0 0 10px;font-weight:700}.success-content p{font-size:16px;color:var(--text-secondary);margin:0}.biometric-notification{position:fixed;top:20px;right:-400px;max-width:350px;background:var(--bg-modal);border-radius:var(--border-radius);padding:16px 20px;box-shadow:0 8px 24px rgb(0 0 0 / .15);display:flex;align-items:center;gap:12px;z-index:1000002;transition:right 0.4s var(--animation-bounce);border-left:4px solid}.biometric-notification.show{right:20px}.biometric-notification.success{border-left-color:var(--success-color)}.biometric-notification.error{border-left-color:var(--error-color)}.biometric-notification.warning{border-left-color:var(--warning-color)}.biometric-notification.info{border-left-color:var(--info-color)}.notif-icon{font-size:24px;flex-shrink:0}.notif-message{flex:1;font-size:14px;color:var(--text-primary);line-height:1.4}.btn,#allow-geo-btn,#deny-geo-btn,#photo-accept-btn,#photo-skip-btn,#capture-photo-btn,#cancel-photo-btn,#cancel-capture,#register-biometric-btn{padding:12px 24px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all var(--transition-speed);display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;text-decoration:none;line-height:1.5}.btn:before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgb(255 255 255 / .3);transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s}.btn:active:before{width:300px;height:300px}.btn-primary,#allow-geo-btn,#photo-accept-btn,#capture-photo-btn{background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));color:var(--text-light)}.btn-primary:hover,#allow-geo-btn:hover,#photo-accept-btn:hover,#capture-photo-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgb(0 115 170 / .3)}.btn-success{background:linear-gradient(135deg,var(--success-color),var(--success-dark));color:var(--text-light)}.btn-success:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgb(0 163 42 / .3)}.btn-danger{background:linear-gradient(135deg,var(--error-color),var(--error-dark));color:var(--text-light)}.btn-danger:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgb(214 54 56 / .3)}.btn-secondary,#deny-geo-btn,#photo-skip-btn,#cancel-photo-btn,#cancel-capture{background:#f0f0f1;color:var(--text-primary)}.btn-secondary:hover,#deny-geo-btn:hover,#photo-skip-btn:hover,#cancel-photo-btn:hover,#cancel-capture:hover{background:#e0e0e1;transform:translateY(-2px)}.btn-sm{padding:8px 16px;font-size:12px}.btn:disabled,.btn.loading{opacity:.6;cursor:not-allowed;transform:none!important}.btn.loading{position:relative;color:#fff0}.btn.loading:after{content:'';position:absolute;width:16px;height:16px;top:50%;left:50%;margin-left:-8px;margin-top:-8px;border:2px solid #fff0;border-top-color:var(--text-light);border-radius:50%;animation:spin 0.6s linear infinite}#biometric-credentials-list,.devices-list{margin:20px 0}.credential-item,.device-card{display:flex;align-items:center;gap:15px;padding:20px;margin:10px 0;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-radius:12px;border-left:4px solid var(--primary-color);transition:all var(--transition-speed);animation:fadeIn 0.5s var(--animation-smooth)}.credential-item:hover,.device-card:hover{transform:translateX(5px);box-shadow:0 4px 12px rgb(0 0 0 / .1)}.credential-icon{font-size:32px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:rgb(255 255 255 / .8);border-radius:50%;flex-shrink:0}.credential-info,.device-info{flex:1}.credential-name{font-size:16px;margin-bottom:5px;font-weight:600;display:flex;align-items:center;gap:8px}.credential-meta{margin-top:5px}.credential-meta small{color:var(--text-secondary);line-height:1.6;font-size:13px}.badge{display:inline-block;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600}.badge-face{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.badge-digital{background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));color:#fff}.remove-credential-btn,.remove-biometric-device{padding:10px 20px;background:var(--error-color);color:var(--text-light);border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:13px;transition:all var(--transition-speed);flex-shrink:0}.remove-credential-btn:hover,.remove-biometric-device:hover{background:var(--error-dark);transform:translateY(-2px);box-shadow:0 4px 12px rgb(214 54 56 / .3)}.fade-in{animation:fadeIn 0.5s var(--animation-smooth)}.no-data{text-align:center;padding:40px 20px;color:var(--text-secondary);font-style:italic}.biometric-loader-inline{display:inline-block;width:20px;height:20px;border:2px solid #f3f3f3;border-top:2px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}.confetti{position:fixed;width:10px;height:10px;animation:confetti-fall 4s linear forwards;z-index:1000003;pointer-events:none}@media (max-width:768px){.biometric-modal-content,.geo-content,.photo-capture-content,.photo-confirm-content,.camera-content{width:95%;max-width:none}.biometric-modal-footer,.geo-footer,.photo-footer,.photo-confirm-buttons,.camera-controls{flex-direction:column}.btn,#allow-geo-btn,#deny-geo-btn,#photo-accept-btn,#photo-skip-btn,#capture-photo-btn,#cancel-photo-btn{width:100%;justify-content:center}.credential-item,.device-card{flex-direction:column;text-align:center}.remove-credential-btn,.remove-biometric-device{width:100%}.biometric-notification{left:10px;right:10px;max-width:none}.biometric-notification.show{right:10px}.progress-content{padding:30px 20px}.fingerprint-container{width:100px;height:100px}}@media (max-width:480px){.biometric-modal-header h2,.geo-header h2,.photo-header h2{font-size:20px}.progress-content{padding:25px 15px}.progress-icon,#progress-icon{width:60px;height:60px}.spinner{width:60px;height:60px}#progress-title{font-size:18px}.success-checkmark{width:80px;height:80px}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}button:focus-visible{outline:3px solid var(--primary-color);outline-offset:2px}@media (prefers-color-scheme:dark){:root{--bg-modal:#2c2c2c;--text-primary:#ffffff;--text-secondary:#b0b0b0}.biometric-modal-header,.geo-header,.photo-header{border-bottom-color:#3a3a3a}.biometric-modal-footer,.geo-footer,.photo-footer{border-top-color:#3a3a3a}.credential-item,.device-card{background:linear-gradient(135deg,#3a3a3a 0%,#2c2c2c 100%)}.btn-secondary,#deny-geo-btn,#photo-skip-btn,#cancel-photo-btn{background:#3a3a3a;color:var(--text-primary)}.btn-secondary:hover,#deny-geo-btn:hover,#photo-skip-btn:hover,#cancel-photo-btn:hover{background:#4a4a4a}#geo-status,.geo-status{background:rgb(34 113 177 / .2)}}