/* Face Recognition: kamera wajah, pendaftaran, sakelar metode presensi */
.pres-switch{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.seg-method button{display:inline-flex;align-items:center;gap:7px}
.seg-method button svg{width:16px;height:16px}
.fstage{position:relative;aspect-ratio:4/3;background:#0d1627 var(--kawung);border-radius:10px;overflow:hidden;display:grid;place-items:center}
.fstage video,.fstage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.fstage.on video,.fstage.on canvas{display:block}
.fstage.mirror video,.fstage.mirror canvas{transform:scaleX(-1)}
.fguide{position:absolute;left:50%;top:48%;width:42%;aspect-ratio:3/4;transform:translate(-50%,-50%);border:3px dashed rgba(255,255,255,.45);border-radius:50%;display:none;pointer-events:none}
.fstage.on .fguide{display:block}
.fidle{position:relative;z-index:1;text-align:center;color:#c9d4e6;padding:20px;max-width:34ch;font-size:14px}
.fidle b{display:block;color:#fff;font-size:16px;margin-bottom:4px}
.fstage.on .fidle{display:none}
.fchip{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;background:rgba(13,22,39,.8);color:#fff;font-size:13px;font-weight:700;padding:6px 14px;border-radius:99px;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.fchip.ok{background:rgba(29,127,83,.92)}
.fchip.warn{background:rgba(149,96,15,.92)}
.fchip.err{background:rgba(179,54,43,.92)}
.fstage.flash-ok{box-shadow:inset 0 0 0 6px #2fbf7a}
.fstage.flash-warn{box-shadow:inset 0 0 0 6px #e3a53b}
.fstage.flash-err{box-shadow:inset 0 0 0 6px #e25545}
.fc-blink{margin-left:auto;font-size:13.5px}
.fc-blink small{display:block;color:var(--muted);font-size:12px}
/* pendaftaran */
.en-tabs{margin:14px 0 12px}
.en-prog{display:flex;align-items:center;gap:12px;margin:12px 0 4px;font-size:13.5px;color:var(--muted)}
.en-prog .dots{display:flex;gap:6px;flex:none}
.en-prog .dots i{width:12px;height:12px;border-radius:50%;background:var(--line);display:block;transition:background .2s}
.en-prog .dots i.on{background:var(--ok)}
.fstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fstats div{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px}
.fstats b{display:block;font-size:1.6rem;line-height:1.1}
.fstats span{font-size:13px;color:var(--muted)}
@media (max-width:640px){
  .fstage{aspect-ratio:3/4}
  .fguide{width:62%}
  .fc-blink{margin-left:0}
}