.liveness-demo{max-width:660px;margin:0 auto 2rem}.liveness-demo-card{background:linear-gradient(90deg,#b4b9be0a 1px,#0000 1px) 0 0/5px 5px,linear-gradient(#b4b9be0a 1px,#0000 1px) 0 0/5px 5px,#f7f6f3;border:1px solid #e5e5e5;border-radius:16px;flex-direction:column;gap:20px;min-height:575px;padding:36px 40px;display:flex;box-shadow:0 2px 12px #0000000f}.liveness-demo-title{color:#1a1a1a;text-align:center;margin:0;font-size:1.125rem;font-weight:600}.liveness-idle{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:20px;padding:0;display:flex}.liveness-viewport-placeholder{aspect-ratio:4/3;color:#a3a3a3;background:#f7f6f3;border:2px dashed #d4d4d4;border-radius:14px;justify-content:center;align-items:center;width:100%;max-width:480px;display:flex}.liveness-btn{cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;padding:12px 28px;font-family:inherit;font-size:.9rem;font-weight:500;transition:background .2s,box-shadow .2s,transform .15s;display:inline-flex}.liveness-btn:active{transform:scale(.97)}.liveness-btn-start{color:#fff;background:#1a1a1a;width:100%;max-width:280px}.liveness-btn-start:hover{background:#333;box-shadow:0 2px 8px #00000026}.liveness-btn-cancel{color:#737373;background:0 0;padding:8px 20px;font-size:.8rem}.liveness-btn-cancel:hover{color:#525252;background:#f5f5f5}.liveness-loading{flex-direction:column;align-items:center;gap:16px;padding:40px 0;display:flex}.liveness-spinner{border:3px solid #e5e5e5;border-top-color:var(--color-primary);border-radius:50%;width:36px;height:36px;animation:.8s linear infinite liveness-spin}@keyframes liveness-spin{to{transform:rotate(360deg)}}.liveness-loading-overlay{z-index:10;background:#0a0a0a;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;inset:0}.liveness-camera-section{flex-direction:column;flex:1;align-items:center;gap:16px;display:flex}.liveness-steps{align-items:center;gap:0;margin-bottom:4px;display:flex}.liveness-step-group{align-items:center;display:flex}.liveness-step{opacity:.4;align-items:center;gap:6px;transition:opacity .3s;display:flex}.liveness-step.active{opacity:1}.liveness-step-num{color:#737373;background:#e5e5e5;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:.8rem;font-weight:600;transition:background .3s,color .3s;display:flex}.liveness-step.active .liveness-step-num{background:var(--color-primary);color:#fff}.liveness-step.done .liveness-step-num{color:#fff;background:#16a34a}.liveness-step-label{color:#525252;font-size:.9rem;font-weight:600}.liveness-step-line{background:#e5e5e5;width:40px;height:2px;margin:0 12px}.liveness-viewport{aspect-ratio:4/3;background:#0a0a0a;border-radius:14px;width:100%;max-width:480px;position:relative;overflow:hidden}.liveness-video{object-fit:cover;opacity:0;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.liveness-canvas{object-fit:cover;width:100%;height:100%;position:absolute;top:0;left:0}.liveness-overlay{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.liveness-feedback{color:#1a1a1a;text-align:center;min-height:1.4em;margin:0;font-size:.9rem;font-weight:500;transition:color .2s}.liveness-result{flex-direction:column;flex:1;align-items:center;gap:16px;display:flex}.liveness-result-box{border:1px solid #e5e5e5;flex-direction:column;justify-content:center;gap:16px;padding:36px 32px}.liveness-result-icon{border-radius:50%;justify-content:center;align-items:center;width:84px;height:84px;display:flex}.liveness-result-icon.success{color:#16a34a;background:#f0fdf4}.liveness-result-icon.fail{color:#dc2626;background:#fef2f2}.liveness-result-title{color:#1a1a1a;margin:0;font-size:1.25rem;font-weight:600}.liveness-breakdown{flex-direction:column;gap:10px;width:100%;max-width:440px;margin-top:8px;display:flex}.liveness-breakdown-row{grid-template-columns:24px 1fr auto auto;align-items:center;gap:10px;padding:5px 0;font-size:.88rem;display:grid}.liveness-breakdown-icon{text-align:center;font-size:.85rem;font-weight:700}.liveness-breakdown-icon.pass{color:#16a34a}.liveness-breakdown-icon.fail{color:#dc2626}.liveness-breakdown-label{color:#374151;font-weight:500}.liveness-breakdown-strength{text-align:center;border-radius:6px;min-width:72px;padding:3px 10px;font-size:.78rem;font-weight:600}.liveness-breakdown-strength.strong{color:#15803d;background:#f0fdf4}.liveness-breakdown-strength.moderate{color:#a16207;background:#fffbeb}.liveness-breakdown-strength.weak{color:#dc2626;background:#fef2f2}.liveness-breakdown-strength.normal{color:#15803d;background:#f0fdf4}.liveness-breakdown-strength.low{color:#a16207;background:#fffbeb}.liveness-breakdown-strength.suspicious{color:#dc2626;background:#fef2f2}.liveness-breakdown-time{color:#9ca3af;text-align:right;min-width:34px;font-size:.8rem}.liveness-breakdown-sep{border-top:1px dashed #e5e5e5;width:100%;height:1px;margin:6px 0}.liveness-demo-notice{background:0 0;border:1px solid #e5e5e5;border-radius:8px;align-self:center;align-items:flex-start;gap:10px;max-width:480px;margin-top:auto;padding:16px 16px 12px;display:flex}.liveness-notice-icon{color:#fff;background:#6b8cae;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;margin-top:1px;font-size:12px;font-weight:600;display:flex}.liveness-demo-notice p{color:#6b7280;margin:0;font-size:.75rem;line-height:1.55}.liveness-notice-link{color:var(--color-primary);text-underline-offset:2px;text-decoration:underline}.liveness-notice-link:hover{color:var(--color-primary-hover)}@media (max-width:600px){.liveness-demo-card{border-radius:12px;gap:12px;min-height:auto;padding:20px 16px}.liveness-demo-title{margin:0;font-size:1rem}.liveness-idle{gap:12px}.liveness-viewport,.liveness-viewport-placeholder{border-radius:10px}.liveness-camera-section{gap:10px}.liveness-result{gap:12px}.liveness-result-box{padding:20px 16px}.liveness-result-icon{width:56px;height:56px}.liveness-result-icon svg{width:40px;height:40px}.liveness-result-title{font-size:1rem}.liveness-confidence{font-size:1.1rem}.liveness-breakdown{max-width:100%}.liveness-breakdown-row{grid-template-columns:20px 1fr auto auto;gap:6px;font-size:.78rem}.liveness-breakdown-strength{min-width:56px;padding:2px 6px;font-size:.7rem}.liveness-steps{margin-bottom:0}.liveness-step-label{font-size:.72rem}.liveness-step-num{width:24px;height:24px;font-size:.72rem}.liveness-step-line{width:16px;margin:0 4px}.liveness-demo-notice{padding:10px 14px}}
