.mode-selector {
  display: flex;
  gap: 20rpx;
  margin-bottom: 32rpx;
}

.mode-option {
  flex: 1;
  padding: 28rpx 20rpx;
  border: 4rpx solid #e5e5e5;
  border-radius: 24rpx;
  text-align: center;
}

.mode-option.active {
  border-color: #E6508C;
  background: #fdf2f8;
}

.mode-option.locked {
  opacity: 0.7;
}

.mode-option.locked .mode-icon {
  filter: grayscale(1);
}

.mode-icon {
  font-size: 48rpx;
  display: block;
  margin-bottom: 8rpx;
}

.mode-label {
  font-size: 28rpx;
  color: #333333;
}

.mode-option.locked .mode-label {
  color: #999999;
}

.mode-sub {
  font-size: 22rpx;
  color: #999999;
  margin-top: 6rpx;
}

.mode-option.active .mode-sub {
  color: #E6508C;
}

.face-map {
  width: 240rpx;
  height: 280rpx;
  margin: 0 auto 24rpx;
  position: relative;
}

.face-region {
  position: absolute;
  border: 4rpx solid #e5e5e5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22rpx;
  color: #999999;
}

.face-region.active {
  border-color: #E6508C;
  background: rgba(230, 80, 140, 0.2);
  color: #E6508C;
}

.face-region.disabled {
  border-color: #d8d8d8;
  background: #eeeeee;
  color: #999999;
}

.mode-tip {
  color: #999999;
  font-size: 24rpx;
  text-align: center;
  margin: -8rpx 0 20rpx;
}

.face-region.forehead {
  top: 5%;
  left: 25%;
  width: 50%;
  height: 15%;
  border-radius: 40rpx 40rpx 50% 50%;
}

.face-region.left-cheek {
  top: 25%;
  left: 5%;
  width: 30%;
  height: 25%;
}

.face-region.right-cheek {
  top: 25%;
  right: 5%;
  width: 30%;
  height: 25%;
}

.face-region.nose {
  top: 45%;
  left: 35%;
  width: 30%;
  height: 18%;
  border-radius: 40%;
}

.face-region.chin {
  top: 68%;
  left: 25%;
  width: 50%;
  height: 20%;
  border-radius: 0 0 50% 50%;
}

.error-text {
  text-align: center;
  color: #ff4d4f;
  font-size: 26rpx;
  margin-top: 16rpx;
}

.btn-primary::after {
  border: none;
}