/* ═════ 拍照页样式 ═════ */
.cam {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #101823;
}
.cam-device {
  width: 100%;
  height: 100vh;
}

/* ─── 步骤文案 ─── */
.cam-step {
  position: absolute;
  top: 80rpx;
  left: 0;
  right: 0;
  text-align: center;
}
.cam-step-no {
  color: #FFFFFF;
  font-size: 48rpx;
  font-weight: 600;
}
.cam-step-tip {
  color: #FFFFFF;
  font-size: 40rpx;
  font-weight: 600;
  margin-top: 8rpx;
}

/* ─── 取景蒙版(椭圆线框) ─── */
.cam-mask {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cam-oval {
  width: 560rpx;
  height: 720rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-sizing: border-box;
}
/* 侧脸步轮廓偏移提示(骨架版:向左/右微移示意朝向) */
.mask-1 { transform: translateX(-60rpx); } /* 左脸出镜:耳在画面左 */
.mask-2 { transform: translateX(60rpx); }  /* 右脸出镜:耳在画面右 */

/* ─── 底部引导要点 ─── */
.cam-guide {
  position: absolute;
  bottom: 260rpx;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}
.cam-guide-item {
  color: #FFFFFF;
  font-size: 26rpx;
  padding: 0 24rpx;
  border-right: 2rpx solid rgba(255, 255, 255, 0.4);
}
.cam-guide-item:last-child { border-right: none; }

/* ─── 控制条 ─── */
.cam-controls {
  position: absolute;
  bottom: 80rpx;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.cam-side {
  width: 120rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  color: #FFFFFF;
  font-size: 28rpx;
}
.cam-shutter {
  width: 144rpx;
  height: 144rpx;
  border: 6rpx solid #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cam-shutter-dot {
  width: 108rpx;
  height: 108rpx;
  border-radius: 50%;
  background: #F5F078;
}

/* ─── 停顿卡 ─── */
.cam-done {
  position: absolute;
  top: 45%;
  left: 60rpx;
  right: 60rpx;
  background: rgba(0, 0, 0, 0.65);
  color: #FFFFFF;
  font-size: 28rpx;
  text-align: center;
  border-radius: 16rpx;
  padding: 24rpx;
}

/* ─── 拍后预览 ─── */
.cam-preview {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background: #000000;
}
.cam-preview-img {
  width: 100%;
  height: 78%;
}
.cam-preview-btns {
  position: absolute;
  bottom: 80rpx;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
}
.cam-preview-btn {
  width: 280rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  border-radius: 44rpx;
  border: 2rpx solid #FFFFFF;
  color: #FFFFFF;
  font-size: 30rpx;
}
.cam-preview-btn.ok {
  background: #F5F078;
  border-color: #F5F078;
  color: #282828;
  font-weight: 600;
}

/* ─── 分析中 ─── */
.cam-analyzing {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cam-analyzing-text {
  color: #FFFFFF;
  font-size: 30rpx;
}

/* ─── 隐藏画布(压缩降级用) ─── */
.compress-canvas {
  position: fixed;
  left: -9999rpx;
  top: -9999rpx;
  width: 640px;
  height: 640px;
}
.cam-analyzing { flex-direction: column; }
.cam-cancel { margin-top: 48rpx; color: #fff; font-size: 26rpx; padding: 24rpx; }
.camera-permission { padding: 56rpx 40rpx; color: #fff; line-height: 1.8; }
.camera-permission button { margin-top: 24rpx; }
.debug-banner { padding: 24rpx; background: #F5F078; color: #282828; font-size: 24rpx; }
.debug-results { padding: 32rpx; background: #101823; color: white; line-height: 1.8; }
.debug-title { font-size: 32rpx; font-weight: 600; }
.debug-result { margin: 24rpx 0; }
.debug-result image { display: block; width: 100%; height: 320rpx; }
.debug-results button { margin-top: 24rpx; }