.faceauth-wrap { margin-top: 12px; }
.faceauth-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.faceauth-tabs button {
  flex: 1; border: 1px solid #d0d7de; background: #f6f8fa; padding: 8px 10px;
  border-radius: 6px; cursor: pointer; font-weight: 600;
}
.faceauth-tabs button.is-active { background: #1e3a4c; color: #fff; border-color: #1e3a4c; }
.faceauth-panel { display: none; }
.faceauth-panel.is-open { display: block; }
.faceauth-video-shell {
  position: relative; background: #0f172a; border-radius: 10px; overflow: hidden;
  aspect-ratio: 4/3; max-width: 100%;
}
.faceauth-video-shell video {
  width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block;
}
.faceauth-frame {
  pointer-events: none; position: absolute; inset: 12%;
  border: 2px dashed rgba(255,255,255,.55); border-radius: 50%;
}
.faceauth-status {
  margin-top: 10px; min-height: 22px; font-size: 13px; color: #334155;
}
.faceauth-status.is-ok { color: #15803d; }
.faceauth-status.is-err { color: #b91c1c; }
.faceauth-status.is-info { color: #1d4ed8; }
.faceauth-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.faceauth-badge {
  display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.faceauth-badge.ok { background: #dcfce7; color: #166534; }
.faceauth-badge.warn { background: #fef3c7; color: #92400e; }
.faceauth-badge.bad { background: #fee2e2; color: #991b1b; }