/* 人脸识别 UI 屏（1024×576 / 16:9）— 结构样式，背景图后续替换 */

.view-face-rec .fr-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.view-face-rec .fr-shell[data-fr-layout] .fr-row2 {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding: 0 38px;
  box-sizing: border-box;
}

.view-face-rec .fr-stage {
  width: 100%;
  height: 100%;
  min-height: 380px;
  box-sizing: border-box;
  position: relative;
}

/* ---------- 图2：初始化（方框脸 + 标题切图） ---------- */
.fr-screen--init {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  padding: 15px 0 0;
  box-sizing: border-box;
}

.fr-init-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.fr-init-face {
  display: block;
  width: 324px;
  height: 311px;
  margin: 0 0 22px;
  object-fit: contain;
  flex-shrink: 0;
  -webkit-user-drag: none;
  user-select: none;
}

.fr-init-title {
  display: block;
  width: 301px;
  height: 90px;
  object-fit: contain;
  flex-shrink: 0;
  -webkit-user-drag: none;
  user-select: none;
}

/* ---------- 图1：素材库三图（219×300，上 34px，间距 63px） ---------- */
.fr-screen--pick-samples {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  min-height: 0;
  padding: 34px 0 0;
  box-sizing: border-box;
}

.fr-pick-gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 63px;
  flex-wrap: nowrap;
}

.fr-pick-gallery-item {
  display: block;
  flex: 0 0 auto;
  width: 219px;
  height: 300px;
  margin: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fr-pick-gallery-item:hover {
  border-color: rgba(0, 229, 255, 0.75);
  box-shadow: 0 0 16px rgba(0, 180, 255, 0.35);
}

.fr-pick-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 219px;
  max-height: 300px;
  object-fit: cover;
  pointer-events: none;
}

/* ---------- 图2 / 图6：摄像头预览 ---------- */
.fr-screen--pick-camera {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 432px;
  padding: 16px 0;
  box-sizing: border-box;
}

.fr-preview-video-wrap {
  position: relative;
  width: 500px;
  height: 400px;
  max-width: 500px;
  max-height: 400px;
  flex-shrink: 0;
  background: rgba(0, 20, 50, 0.6);
  border: 1px solid rgba(0, 200, 255, 0.45);
  border-radius: 4px;
  overflow: hidden;
}

.fr-preview-frame,
.fr-preview-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #06122b;
}

.fr-preview-frame[hidden],
.fr-preview-video[hidden] {
  display: none !important;
}

.fr-preview-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(160, 220, 255, 0.85);
  text-align: center;
  pointer-events: none;
}

.fr-preview-hint {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(140, 190, 230, 0.72);
  max-width: 280px;
}

.fr-preview-video-wrap.has-frame .fr-preview-placeholder {
  display: none;
}

/* ---------- 双栏：533+26+377（录入扫描/结果、识别步骤3） ---------- */
.fr-screen--dual.fr-dual-pair-34 {
  display: grid;
  grid-template-columns: 533px 377px;
  column-gap: 26px;
  justify-content: center;
  align-content: start;
  width: 100%;
  height: auto;
  min-height: 359px;
  box-sizing: border-box;
}

/* 录入分析 / 录入结果：双栏距 Tab 下 23px */
.fr-shell[data-fr-layout="dual-scan"] .fr-screen--dual.fr-dual-pair-34,
.fr-shell[data-fr-layout="dual-done"] .fr-screen--dual.fr-dual-pair-34 {
  margin-top: 23px;
}

.fr-dual-pair-34 > .fr-panel {
  position: relative;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}

.fr-dual-pair-34 > .fr-panel:first-child {
  width: 533px;
  height: 359px;
  background-image: var(--fr-img-panel-l-34);
  background-size: 533px 359px;
}

.fr-dual-pair-34 > .fr-panel:last-child {
  width: 377px;
  height: 359px;
  background-image: var(--fr-img-panel-r-34);
  background-size: 377px 359px;
}

.fr-panel {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.fr-panel--scan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.fr-scan-spinner,
.fr-lottie-scan {
  width: 122px;
  height: 122px;
  flex-shrink: 0;
  overflow: hidden;
  pointer-events: none;
}

.fr-lottie-scan svg {
  width: 100% !important;
  height: 100% !important;
}

.fr-scan-status {
  margin: 0;
  font-size: 22px;
  color: #7ec8ff;
  letter-spacing: 0.05em;
}

.fr-panel--photo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

/* centerBg4 右侧照片框：内图最大 300×300 */
.fr-dual-pair-34 > .fr-panel:last-child .fr-enroll-photo-stage {
  width: 300px;
  height: 300px;
  max-width: 300px;
  max-height: 300px;
}

.fr-dual-pair-34 > .fr-panel:last-child .fr-enroll-scan-frame {
  display: none;
}

.fr-dual-pair-34 > .fr-panel:last-child .fr-enroll-photo-wrap {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.fr-dual-pair-34 > .fr-panel:last-child .fr-enroll-photo {
  max-width: 300px;
  max-height: 300px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---------- 图4 / 图9-10 / 图11：特征 + 照片双栏 ---------- */
.fr-panel--vectors {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px 10px;
  box-sizing: border-box;
}

.fr-panel--vectors .fr-enroll-tezheng-tit {
  display: block;
  width: 262px;
  height: 48px;
  margin: 0 auto 6px;
  flex-shrink: 0;
  object-fit: contain;
}

.fr-panel--vectors .fr-enroll-kp-box {
  position: relative;
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.fr-panel--vectors .fr-enroll-kp-box .fr-enroll-kp-list {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* ---------- 图3：识别步骤 1/2 单图（533×300，上 37px） ---------- */
.fr-screen--rec-step {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 37px 0 0;
  box-sizing: border-box;
}

.fr-rec-step-photo {
  position: relative;
  width: 533px;
  max-width: 533px;
  flex-shrink: 0;
}

.fr-rec-step-photo .fr-enroll-photo-stage {
  width: 533px;
  height: 300px;
  max-width: 533px;
  max-height: 300px;
  margin: 0 auto;
}

.fr-rec-step-photo .fr-enroll-photo-wrap {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.fr-rec-step-photo .fr-enroll-photo {
  max-width: 533px;
  max-height: 300px;
}

/* 识别步骤 3：双栏上 21px */
.fr-shell[data-fr-layout="rec-step-3"] .fr-screen--dual.fr-dual-pair-34 {
  margin-top: 21px;
}

/* ---------- 识别步骤4 / 比对结果：455+26+455 ---------- */
.fr-screen--rec-compare {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: 100%;
  min-height: 359px;
  box-sizing: border-box;
}

.fr-compare-panels.fr-dual-pair-12 {
  display: grid;
  grid-template-columns: 455px 455px;
  column-gap: 26px;
  justify-content: center;
  align-content: start;
  flex: 0 0 auto;
  width: auto;
  min-height: 359px;
}

/* 识别步骤 4 / 比对结果：双栏上 21px */
.fr-shell[data-fr-layout="rec-compare"] .fr-compare-panels.fr-dual-pair-12 {
  margin-top: 21px;
}

.fr-result-bar {
  flex: 0 0 auto;
  margin: 13px auto 0;
  padding: 0 32px;
  min-width: 320px;
  max-width: 100%;
  height: 66px;
  min-height: 66px;
  box-sizing: border-box;
  border: 1px solid rgba(0, 200, 255, 0.65);
  border-radius: 999px;
  background: rgba(8, 40, 90, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1.2;
  color: #ffffff;
  text-align: center;
  letter-spacing: 0.04em;
}

/* 比对结果底栏：左侧百分比 + 右侧文案条（设计稿） */
.fr-compare-result-bar {
  flex: 0 0 auto;
  margin: 13px auto 0;
  padding: 0;
  width: auto;
  max-width: 100%;
  min-height: 62px;
  height: auto;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  background: transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.fr-compare-result-bar[hidden] {
  display: none !important;
}

.fr-compare-result-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

/* 整条底栏：百分比 + 档位 + 文案均在 wenanBg 内，内容区整体左右居中 */
.fr-compare-result-desc-wrap {
  flex: 0 1 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 728px;
  max-width: min(728px, calc(100vw - 80px));
  height: 62px;
  min-height: 62px;
  box-sizing: border-box;
  padding: 0 16px;
  background: transparent var(--fr-img-compare-desc) no-repeat center / 728px 62px;
  background-size: 100% 62px;
}

.fr-compare-result-score {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: auto;
  min-width: 0;
}

.fr-compare-result-pct {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 156px;
  height: 27px;
  flex-shrink: 0;
  box-sizing: border-box;
  background: transparent var(--fr-img-compare-pct) no-repeat center / 156px 27px;
  font-weight: 600;
  font-size: 27px;
  line-height: 27px;
  color: #51f1ec;
  letter-spacing: 0.02em;
}

.fr-compare-result-level {
  font-weight: 400;
  font-size: 21px;
  line-height: 1.15;
  color: #51f1ec;
  white-space: nowrap;
  text-align: center;
}

.fr-compare-result-desc-wrap--fail {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.35;
  color: #7ecdc9;
}

.fr-compare-result-desc-line {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  line-height: 1.35;
  white-space: nowrap;
}

.fr-compare-result-detail {
  flex: 0 0 auto;
  font-weight: 400;
  font-size: 16px;
  color: #7ecdc9;
  white-space: nowrap;
}

.fr-compare-result-sep {
  flex: 0 0 auto;
  font-weight: 400;
  font-size: 16px;
  color: #7ecdc9;
  margin: 0 6px;
  white-space: nowrap;
}

.fr-compare-result-verdict {
  flex: 0 0 auto;
  font-weight: 600;
  font-size: 16px;
  color: #9cfffa;
  white-space: nowrap;
}

.view-face-rec .fr-row2 {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.view-face-rec .fr-row3 {
  flex: 0 0 auto;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  padding: 0 38px 13px;
  box-sizing: border-box;
  min-height: 0;
}

.view-face-rec .fr-rec-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 72px;
}

.view-face-rec .fr-rec-bottom .fr-rec-stepbar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
}

.view-face-rec .fr-rec-bottom:not(:has(#fr-rec-stepbar:not([hidden]))):not(:has(#fr-footer:not([hidden]))) {
  display: none;
}

.fr-shell[data-fr-layout="rec-step-3"] .fr-screen--rec-step-3.fr-screen--dual.fr-dual-pair-34 {
  min-height: 359px;
}

.view-face-rec .fr-tab--display.is-disabled {
  opacity: 0.45;
}

.view-face-rec .fr-step-unit--readonly {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
}

.view-face-rec .fr-step-unit--readonly.is-locked {
  opacity: 0.55;
}

/* 调试模式隐藏装饰按钮后，主舞台占满 */
body.fr-debug-ui .view-face-rec .fr-row1,
body.fr-debug-ui .view-face-rec .fr-row3 {
  pointer-events: none;
}