.step-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f7f8fc;
}

/* 顶部进度 */
.step-header {
  background: #ffffff;
  padding: 20rpx 32rpx 16rpx;
  border-bottom: 1rpx solid #F0F0F0;
  flex-shrink: 0;
}
.step-progress-bar {
  height: 8rpx;
  background: #EEEEEE;
  border-radius: 4rpx;
  overflow: hidden;
  margin-bottom: 12rpx;
}
.step-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6C8CFF, #FFB84D);
  border-radius: 4rpx;
  transition: width 0.3s ease;
}
.step-counter {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.step-current {
  font-size: 28rpx;
  font-weight: 600;
  color: #6C8CFF;
}
.step-total {
  font-size: 24rpx;
  color: #AAAAAA;
}

/* 主内容 */
.step-body {
  flex: 1;
  overflow: hidden;
}

.step-title-wrap {
  padding: 32rpx 32rpx 0;
  display: flex;
  align-items: center;
  gap: 16rpx;
}
.step-badge {
  background: #EEF1FF;
  color: #6C8CFF;
  font-size: 22rpx;
  padding: 6rpx 18rpx;
  border-radius: 20rpx;
  font-weight: 500;
  flex-shrink: 0;
}
.step-name {
  font-size: 36rpx;
  font-weight: 700;
  color: #333333;
}

/* 示意图 */
.step-image-wrap {
  padding: 24rpx 32rpx;
}
.step-image-placeholder {
  border-radius: 24rpx;
  height: 380rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
}
.step-image-emoji {
  font-size: 100rpx;
}
.step-image-hint {
  font-size: 24rpx;
  color: rgba(255,255,255,0.7);
}

/* 讲解文字 */
.step-desc-wrap {
  margin: 0 32rpx 20rpx;
  padding: 28rpx;
}
.step-desc-title {
  display: block;
  font-size: 26rpx;
  font-weight: 600;
  color: #888888;
  margin-bottom: 16rpx;
}
.step-desc {
  font-size: 30rpx;
  color: #333333;
  line-height: 1.8;
}

/* 关键提示 */
.step-tip-wrap {
  margin: 0 32rpx 20rpx;
  background: #FFF9E6;
  border-left: 6rpx solid #FFB84D;
  border-radius: 0 16rpx 16rpx 0;
  padding: 20rpx 24rpx;
}
.step-tip {
  font-size: 26rpx;
  color: #B8860B;
  line-height: 1.6;
}

/* 底部按钮 */
.step-footer {
  display: flex;
  gap: 20rpx;
  padding: 20rpx 32rpx;
  background: #ffffff;
  border-top: 1rpx solid #F0F0F0;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  flex-shrink: 0;
}
.step-btn {
  flex: 1;
  border-radius: 50rpx;
  font-size: 30rpx;
  font-weight: 500;
  padding: 24rpx 0;
  text-align: center;
}
.step-btn::after { border: none; }
.btn-prev {
  background: #F0F0F0;
  color: #666666;
}
.btn-prev.disabled {
  background: #F5F5F5;
  color: #CCCCCC;
}
.btn-next {
  flex: 2;
  background: #6C8CFF;
  color: #ffffff;
}