#passport-ui-container { max-width: 400px; margin: 20px auto; text-align: center; font-family: sans-serif; }
#camera-box { position: relative; width: 100%; aspect-ratio: 1/1; background: #000; border: 4px solid #333; overflow: hidden; }
#v-feed, #result-img { width: 100%; height: 100%; object-fit: cover; }

#face-guide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 45%, transparent 32%, rgba(0,0,0,0.7) 42%);
    z-index: 5;
}
#face-guide::after {
    content: ''; position: absolute; top: 15%; left: 25%; width: 50%; height: 60%;
    border: 2px dashed #00ff00; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

#loader { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.85); color: #fff; z-index: 10;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.spinner { width: 30px; height: 30px; border: 3px solid #f3f3f3; border-top: 3px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 10px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.ui-controls { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
button, .button { background: #0073aa; color: #fff; padding: 15px; border: none; border-radius: 5px; cursor: pointer; text-decoration: none; }
button:disabled { background: #666; }