html,body{background:#121212!important;color:#fff;min-height:100vh;margin:1;padding:0;font-family:Roboto,sans-serif}.container{max-width:100%;padding:24px 16px;margin:0 auto;background:#323232;border-radius:10px;box-shadow:0 0 12px #0000004d}.id-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh}.captureArea{position:relative;aspect-ratio:3/4;width:100%;max-width:400px;margin:0 auto;background:#222;border-radius:8px;overflow:hidden}video,canvas{width:100%;height:auto;aspect-ratio:3/4;border-radius:12px;object-fit:cover}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;justify-content:center;align-items:center;z-index:10}.frame-id{width:80%;aspect-ratio:1.6;border:3px dashed rgba(255,255,255,.9);border-radius:6px}.frame-face{width:80%;aspect-ratio:.8;border:3px solid rgba(255,255,255,.9);border-radius:50%;box-shadow:0 0 0 9999px #00000080;filter:blur(2px)}.btn-primary{background:#005bea;color:#fff;border:none;border-radius:24px;padding:14px 36px;font-size:1.1rem;font-weight:600;letter-spacing:1px;box-shadow:0 4px 16px #00000026;cursor:pointer;transition:background .2s,transform .1s}.btn-primary:hover,.btn-primary:focus{background:#00c6fb;transform:translateY(-2px) scale(1.03);outline:none}