:root{--primary:#4f46e5;--primary-hover:#4338ca;--bg-gradient-start:#e1e8ed;--bg-gradient-end:#f8fafc;--card-bg:#ffffffd9;--text-main:#1e293b;--text-muted:#64748b;--success:#10b981;--error:#ef4444}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);width:100vw;height:100dvh;color:var(--text-main);margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;overflow:hidden}.app-container{box-sizing:border-box;flex-direction:column;align-items:center;width:100vw;height:100dvh;padding:1rem;display:flex;overflow:hidden}.header{text-align:center;flex-shrink:0;margin-bottom:1rem}.header h3{background:linear-gradient(to right, var(--primary), #818cf8);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0;font-size:2rem;font-weight:800}.header p{color:var(--text-muted);margin-top:.25rem;margin-bottom:0;font-size:1rem}.main-content{flex-direction:column;flex:1;width:100%;max-width:600px;min-height:0;display:flex}.camera-card{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);border:1px solid #fff6;border-radius:20px;flex-direction:column;flex:1;gap:1rem;min-height:0;padding:1rem;display:flex;overflow:hidden;box-shadow:0 10px 30px #00000014}.webcam-container{flex-direction:column;flex:1;align-items:center;gap:1rem;width:100%;min-height:0;display:flex}.webcam-frame{border-radius:12px;flex:1;width:100%;min-height:0;position:relative;overflow:hidden}.webcam-video{object-fit:cover;background-color:#000;border-radius:12px;width:100%;height:100%;display:block;transform:scaleX(-1);box-shadow:0 4px 10px #0000001a}.face-overlay-wrap{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.face-overlay-img{object-fit:cover;opacity:.55;filter:drop-shadow(0 2px 8px #00000059);width:100%;height:100%;animation:3s ease-in-out infinite overlayPulse}@keyframes overlayPulse{0%,to{opacity:.55;transform:scale(1)}50%{opacity:.72;transform:scale(1.015)}}button,a.btn-primary{cursor:pointer;box-sizing:border-box;text-align:center;border:none;border-radius:10px;flex-shrink:0;width:100%;padding:.75rem 1rem;font-size:1rem;font-weight:600;text-decoration:none;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-block}button:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.btn-primary{background-color:var(--primary);color:#fff;box-shadow:0 4px 10px #4f46e533}.btn-primary:hover:not(:disabled){background-color:var(--primary-hover);transform:translateY(-2px);box-shadow:0 6px 15px #4f46e54d}.btn-primary:active:not(:disabled){transform:translateY(0)}.capture-btn{justify-content:center;align-items:center;display:flex}.uploading-card{justify-content:center;align-items:center;position:relative}.uploading-preview{object-fit:cover;filter:brightness(.45);border-radius:12px;flex:1;width:100%;min-height:0;transform:scaleX(-1)}.uploading-overlay{border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:1.2rem;display:flex;position:absolute;inset:0}.spinner{border:4px solid #fff3;border-top-color:var(--primary);border-radius:50%;width:52px;height:52px;animation:.85s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.uploading-text{color:#fff;text-shadow:0 1px 6px #00000080;margin:0;font-size:1.05rem;font-weight:600}.result-card{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);border:1px solid #fff6;border-radius:24px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1rem;min-height:0;padding:2rem 1.5rem;animation:.45s cubic-bezier(.22,1,.36,1) both cardIn;display:flex;box-shadow:0 10px 40px #0000001a}@keyframes cardIn{0%{opacity:0;transform:translateY(30px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.result-icon-wrap{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:80px;height:80px;animation:.5s cubic-bezier(.34,1.56,.64,1) .2s both iconPop;display:flex}.result-icon-wrap.success{color:var(--success,#10b981);background:#10b9811f;border:2px solid #10b9814d}.result-icon-wrap.error{color:var(--error,#ef4444);background:#ef44441a;border:2px solid #ef444440}@keyframes iconPop{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}.result-icon{width:44px;height:44px}.result-title{text-align:center;margin:0;font-size:1.5rem;font-weight:800}.result-title.success{color:var(--success,#10b981)}.result-title.error{color:var(--error,#ef4444)}.result-message{color:var(--text-muted);text-align:center;margin:0;font-size:1rem;line-height:1.55}.result-preview-wrap{border:3px solid #10b98159;border-radius:16px;flex-shrink:0;width:100%;max-width:260px;overflow:hidden;box-shadow:0 8px 24px #00000026}.result-preview{object-fit:cover;width:100%;display:block;transform:scaleX(-1)}.retry-btn{max-width:200px;margin-top:.5rem}@media (width<=600px){.header h3{font-size:1.5rem}}