.face-login-separator{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;color:var(--text-muted);font-size:.82rem;font-weight:800}.face-login-separator::before,.face-login-separator::after{content:"";height:1px;background:var(--border)}
.face-login-button{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;gap:9px}.face-login-button svg{width:18px;height:18px}
.face-login-modal{position:fixed;inset:0;z-index:1000;background:rgba(35,17,48,.54);display:none;place-items:center;padding:20px}.face-login-modal.is-open{display:grid}.face-login-dialog{width:min(720px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 24px 80px rgba(58,21,83,.18)}
.face-login-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:20px 22px;border-bottom:1px solid var(--border)}.face-login-head h3{margin:2px 0 4px;font-size:1.35rem}.face-login-head p{margin:0;color:var(--text-muted);font-size:.9rem}.face-login-close{border:1px solid var(--border);background:#fff;color:var(--text);width:36px;height:36px;border-radius:6px;cursor:pointer;font-size:1.2rem}
.face-login-body{padding:22px;display:grid;gap:18px}.face-login-camera{position:relative;overflow:hidden;background:#160d1d;border:1px solid #2d1838;border-radius:8px;aspect-ratio:4/3}.face-login-camera video{width:100%;height:100%;object-fit:contain;background:#160d1d}.face-login-guide{position:absolute;inset:12% 25%;border:2px solid rgba(224,170,255,.85);border-radius:46%;box-shadow:0 0 0 999px rgba(20,10,27,.13);pointer-events:none}.face-login-state{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.93);color:#5A189A;border-radius:6px;padding:7px 9px;font-size:.76rem;font-weight:900}
.face-login-message{padding:11px 12px;border:1px solid var(--border);background:#fcfaff;border-radius:6px;font-weight:700;color:var(--text-muted)}.face-login-message.is-good{border-color:#b9e6c9;background:#f5fff8;color:#176638}.face-login-message.is-error{border-color:#f3c0c0;background:#fff7f7;color:#9b2525}
.face-login-meter{height:8px;background:#f0e7f5;border-radius:5px;overflow:hidden}.face-login-meter>span{display:block;width:0;height:100%;background:linear-gradient(90deg,#C77DFF,#7B2CBF);transition:width .2s ease}.face-login-meter-label{font-size:.8rem;color:var(--text-muted);font-weight:700;margin-top:6px}.face-login-checks{display:flex;gap:8px;flex-wrap:wrap}.face-login-check{border:1px solid var(--border);background:#fff;border-radius:6px;padding:7px 9px;font-size:.8rem;font-weight:800;color:var(--text-muted)}.face-login-check.is-good{border-color:#b9e6c9;color:#176638;background:#f5fff8}.face-login-check.is-warn{border-color:#ead5f5;color:#6d3a87;background:#fdfaff}
.face-login-actions{display:flex;justify-content:flex-end;gap:10px}.face-login-note{font-size:.82rem;color:var(--text-muted);line-height:1.55}.face-login-note strong{color:var(--text)}
@media(max-width:620px){.face-login-modal{padding:0;align-items:end}.face-login-dialog{max-height:92vh;border-radius:10px 10px 0 0}.face-login-body,.face-login-head{padding:16px}.face-login-guide{inset:11% 20%}.face-login-actions{flex-direction:column-reverse}.face-login-actions .btn{width:100%}}
/* Compact Face Login: keep the full live frame visible without taking over the page. */
.face-login-guide{display:none!important}
.face-login-modal{padding:16px;overflow:auto}
.face-login-dialog{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto}
.face-login-head{padding:16px 18px}.face-login-head h3{font-size:1.2rem}.face-login-head p{font-size:.84rem}
.face-login-body{padding:16px;gap:12px}
.face-login-camera{width:100%;height:clamp(220px,42dvh,360px);aspect-ratio:auto;display:grid;place-items:center}
.face-login-message{padding:9px 10px;font-size:.86rem}.face-login-note{margin:0;font-size:.77rem;line-height:1.4}.face-login-check{padding:6px 8px;font-size:.74rem}
@media(max-width:620px){.face-login-modal{padding:8px;align-items:center}.face-login-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:10px}.face-login-head,.face-login-body{padding:12px}.face-login-head p{display:none}.face-login-camera{height:clamp(200px,40dvh,320px)}.face-login-actions{flex-direction:column-reverse}.face-login-actions .btn{width:100%}}
@media(max-height:620px){.face-login-head{padding:10px 14px}.face-login-body{padding:10px;gap:8px}.face-login-camera{height:min(42dvh,250px)}.face-login-note{display:none}}