*,*:before,*:after{box-sizing:border-box}html{box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;padding:15px;line-height:1.6;background:#fffefe;background:linear-gradient(180deg,#fffefe,#f5f5f7);color:#333;display:flex;flex-direction:column;align-items:center;min-height:100vh}.site-header{width:100%;padding-left:15px;margin-bottom:15px;box-sizing:border-box;height:40px}h1{margin-top:0;margin-bottom:20px;color:#2c3e50;text-align:center}.intro-container,.finish-container{background-color:#fff;padding:30px 15px;border-radius:12px;box-shadow:0 4px 20px #0000001a;width:100%;max-width:480px;text-align:center;margin-top:20px}.intro-container h2,.finish-container h2{margin-top:0;color:#2c3e50;font-size:1.5em}.steps-list{list-style:none;padding:0;margin:30px auto;display:flex;flex-direction:column;align-items:center;gap:25px}.step-item{display:flex;align-items:center;gap:20px;max-width:350px;text-align:left}.step-item .icon{flex-shrink:0;width:48px;height:48px;background-color:#f5f5f7;border-radius:50%;display:flex;align-items:center;justify-content:center}.step-item .icon svg{width:24px;height:24px;stroke:#8e8e93;stroke-width:2}.step-item p{margin:0;color:#555;font-size:.9em;line-height:1.5}.get-started-btn{display:block;width:100%;margin:0 auto;padding:11px 40px;font-size:1.1em;font-weight:700;cursor:pointer;border:none;background-color:#1d1d1f;color:#fff;border-radius:8px;transition:background-color .3s ease;position:relative;border:2px solid rgba(0,0,0,0)}.get-started-btn:hover:not(:disabled){border:2px solid #ffbf1c;color:#ffbf1c}.get-started-btn:disabled{background-color:#bdc3c7;cursor:not-allowed}.get-started-btn.is-loading{color:transparent!important;cursor:not-allowed;background-color:#bdc3c7;background-image:linear-gradient(to right,#1d1d1f,#1d1d1f);background-repeat:no-repeat;background-size:var(--progress, 0%) 100%;transition:background-size .1s ease-out}.get-started-btn.is-loading:after{content:"";display:block;width:1.5em;height:1.5em;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:button-spin .8s linear infinite;position:absolute;left:50%;top:50%;margin-left:-.75em;margin-top:-.75em}@keyframes button-spin{to{transform:rotate(360deg)}}.desktop-intro-message{margin-top:30px;padding-top:25px;border-top:1px solid #e0e0e0;text-align:center}.desktop-intro-message p{margin:0 0 15px;font-weight:500;color:#2c3e50;font-size:1.1em}#qrCodeContainer{display:inline-block;border-radius:8px;background:#fff;padding:8px;box-shadow:0 2px 8px #0000001a;line-height:0}.finish-icon{width:80px;height:80px;border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center}.finish-icon svg{width:40px;height:40px;stroke-width:3;display:none}#finishMessage{font-size:1.1em;color:#333;margin-bottom:5px}#finishInstruction{font-size:1em;color:#555;margin-top:0;margin-bottom:25px}#finishActions{margin-top:20px}.finish-container.status-success .finish-icon{background-color:#e4f8f0}.finish-container.status-success .finish-icon svg{stroke:#27ae60}.finish-container.status-success #successIcon{display:block}.finish-container.status-review .finish-icon{background-color:#fff8e1}.finish-container.status-review .finish-icon svg{stroke:#f39c12}.finish-container.status-review #reviewIcon{display:block}.finish-container.status-error .finish-icon{background-color:#f8e4e4}.finish-container.status-error .finish-icon svg{stroke:#e74c3c}.finish-container.status-error #errorIcon{display:block}.powered-by-idnorm{margin:15px auto 20px;text-align:center;color:#8e8e93;font-size:.8em}#cameraHost{position:relative;width:100%;max-width:640px;max-height:95%;margin-bottom:0;background-color:#000;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #00000026}@keyframes borderPulse{0%{border-color:#1525ff}25%{border-color:#ffbf1c}50%{border-color:#1525ff}75%{border-color:#ffbf1c}to{border-color:#1525ff}}.document-guide-overlay-style,.head-guide-overlay-style{pointer-events:none;z-index:6;display:none;position:absolute;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 9999px #ffffffe6;border:2px solid #1525ff;animation:borderPulse 6s ease-in-out infinite}.document-guide-overlay-style{top:43%;width:87%;aspect-ratio:1.59;border-radius:16px}.head-guide-overlay-style{top:43%;width:60%;border-radius:50%;aspect-ratio:.75}.document-guide-overlay-style.ov-showing,.head-guide-overlay-style.ov-showing{display:block}#cameraHost canvas{display:none;width:100%;height:auto;border-radius:8px}#cameraHost .idnorm-design-video{display:none;width:100%;height:auto;border-radius:8px}#cameraHost .video-overlay-capture-button{position:absolute;bottom:10%;left:50%;transform:translate(-50%);width:11%;max-width:75px;min-width:55px;height:auto;aspect-ratio:1;z-index:11;cursor:pointer;display:none;transition:transform .2s ease}#cameraHost .video-overlay-capture-button.ov-showing{display:block}#cameraHost .video-overlay-capture-button circle{fill:#1d1d1f;transition:all .2s ease-out}#cameraHost .video-overlay-capture-button .button-ring{stroke:#1d1d1f;fill:none}#cameraHost .video-overlay-capture-button:active{transform:translate(-50%) scale(.95)}#cameraHost .camera-powered-by{position:absolute;bottom:4%;left:50%;transform:translate(-50%);color:#1d1d1f66;font-size:.8em;text-shadow:0 1px 2px rgba(0,0,0,.5);z-index:10;pointer-events:none;margin:0;padding:0;white-space:nowrap}#cameraHost>.video-overlay-capture-button.landscape-mode{width:8%;bottom:8%}#cameraHost>.document-guide-overlay-style.landscape-mode{width:55%;top:45%}#cameraHost>.head-guide-overlay-style.landscape-mode{width:auto;height:70%;top:50%}#cameraHost>.video-overlay-capture-button.landscape-mode{width:8%;height:auto;bottom:5%}#cameraHost>.camera-powered-by.landscape-mode{bottom:2%}#cameraHost .processing-overlay-style{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fffefecc;display:none;align-items:center;justify-content:center;z-index:20;border-radius:0}#cameraHost .processing-overlay-style.ov-showing{display:flex}.loader{width:50px;aspect-ratio:1;display:grid}.loader:before,.loader:after{content:"";grid-area:1/1;--c: no-repeat radial-gradient(farthest-side, #25b09b 92%, #0000);background:var(--c) 50% 0,var(--c) 50% 100%,var(--c) 100% 50%,var(--c) 0 50%;background-size:12px 12px;animation:l12 1s infinite}.loader:before{margin:4px;filter:hue-rotate(45deg);background-size:8px 8px;animation-timing-function:linear}@keyframes l12{to{transform:rotate(.5turn)}}@keyframes fadeInDownWithWiggle{0%{opacity:0;transform:translateY(-15px)}50%{opacity:1;transform:translateY(0)}65%{transform:translateY(0) rotate(3deg)}80%{transform:translateY(0) rotate(-3deg)}to{opacity:1;transform:translateY(0)}}#cameraHost .message-overlay-base-style{position:absolute;top:6%;left:50%;transform:translate(-50%);width:min(72%,360px);display:none;flex-direction:column;align-items:center;gap:.22em;padding:0 .25rem;font-size:1.1em;font-weight:500;text-align:center;text-shadow:none;z-index:19}#cameraHost .message-overlay-base-style .message-overlay-title{width:100%;white-space:pre-line;line-height:1.2;font-size:1rem;font-weight:600}#cameraHost .message-overlay-base-style .message-overlay-title.text-wiggle{animation:fadeInDownWithWiggle .7s ease-in-out forwards}#cameraHost .message-overlay-base-style .message-overlay-message{width:100%;white-space:pre-line;line-height:1.2;font-size:.86rem;font-weight:500}#cameraHost .message-overlay-base-style .message-overlay-message.text-wiggle{animation:fadeInDownWithWiggle .7s ease-in-out forwards}#cameraHost .message-overlay-base-style .message-overlay-guidance{width:100%;white-space:pre-line;word-break:break-word;overflow-wrap:anywhere;line-height:1.25;font-size:.8rem;font-weight:450;color:#2c3e50e6}#cameraHost .message-overlay-base-style.ov-showing{display:flex}#cameraHost .message-overlay-base-style.landscape-mode{top:2.5%;width:min(68%,340px)}#cameraHost .message-overlay-base-style.message-type-info,#cameraHost .message-overlay-base-style.message-type-info .message-overlay-title,#cameraHost .message-overlay-base-style.message-type-info .message-overlay-message{color:#2c3e50}#cameraHost .message-overlay-base-style.message-type-warning,#cameraHost .message-overlay-base-style.message-type-warning .message-overlay-title,#cameraHost .message-overlay-base-style.message-type-warning .message-overlay-message,#cameraHost .message-overlay-base-style.message-type-warning .message-overlay-guidance{color:#d35400}body.camera-active{overflow:hidden;padding:0}body.camera-active .site-header,body.camera-active h1,body.camera-active .powered-by-idnorm{display:none}body.camera-active #cameraHost{position:fixed;top:0;left:0;width:100vw;height:100dvh;max-width:none;max-height:none;border-radius:0;z-index:1000;display:flex;align-items:center;justify-content:center}body.camera-active #cameraHost canvas{width:100%;height:100%;object-fit:cover;border-radius:0}body.camera-active #cameraHost .idnorm-design-video{width:100%;height:100%;object-fit:cover;border-radius:0}#designControls{position:fixed;bottom:0;left:0;width:100%;background-color:#2c3e50e6;color:#fff;padding:15px 10px 10px;z-index:2000;box-shadow:0 -2px 10px #0003;display:none;font-size:12px;border-top-left-radius:12px;border-top-right-radius:12px;transition:transform .3s ease-in-out}#designControls.collapsed{transform:translateY(calc(100% - 40px))}#designControlsToggle{position:absolute;top:-30px;left:50%;transform:translate(-50%);width:120px;height:30px;background-color:#2c3e50e6;border-top-left-radius:8px;border-top-right-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}#designControlsToggle svg{width:24px;height:24px;stroke:#fff;stroke-width:2;transition:transform .3s ease-in-out}#designControls.collapsed #designControlsToggle svg{transform:rotate(180deg)}#designControls fieldset{border:1px solid #7f8c8d;border-radius:4px;margin:5px;padding:8px}#designControls legend{padding:0 5px;font-weight:700}#designControls .controls-grid{display:flex;flex-wrap:wrap;gap:8px}#designControls button{padding:5px 10px;font-size:12px;border:1px solid #95a5a6;background-color:#34495e;color:#fff;border-radius:4px;cursor:pointer}#designControls button:hover{background-color:#4e6d8d}
