/* 结果页：对齐管理端 Dashboard 分布条视觉（浅色轨 + 实色填充） */
.dash-section-title {
  display: block;
  font-size: 26rpx;
  font-weight: 700;
  color: #374151;
  margin: 8rpx 0 20rpx;
  letter-spacing: 0.02em;
}

.dash-dimension-row {
  margin-bottom: 18rpx;
}

.dash-dimension-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6rpx;
}

.dash-lab {
  font-size: 22rpx;
  color: #4b5563;
}

.dash-track {
  height: 10rpx;
  background: #e5e7eb;
  border-radius: 6rpx;
  overflow: hidden;
}

.dash-fill {
  height: 100%;
  border-radius: 6rpx;
  transition: width 0.35s ease;
}

.dash-fill--ei { background: #3b82f6; }
.dash-fill--sn { background: #6366f1; }
.dash-fill--tf { background: #f97316; }
.dash-fill--jp { background: #14b8a6; }

.dash-fill--disc-d { background: #ef4444; }
.dash-fill--disc-i { background: #f59e0b; }
.dash-fill--disc-s { background: #10b981; }
.dash-fill--disc-c { background: #3b82f6; }

.dash-fill--pdp-tiger      { background: #f59e0b; }
.dash-fill--pdp-peacock    { background: #8b5cf6; }
.dash-fill--pdp-koala      { background: #10b981; }
.dash-fill--pdp-owl        { background: #3b82f6; }
.dash-fill--pdp-chameleon  { background: #06b6d4; }

.dash-fill--sbti { background: linear-gradient(90deg, #14b8a6 0%, #22d3ee 100%); }

.dash-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 6rpx;
  font-size: 22rpx;
  color: #6b7280;
}

.preview-teaser-card {
  margin-top: 24rpx;
  padding: 28rpx;
  border-radius: 20rpx;
  background: #fafafa;
  border: 1rpx solid #f3f4f6;
}

.preview-teaser-title {
  display: block;
  font-size: 28rpx;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12rpx;
}

.preview-teaser-desc {
  display: block;
  font-size: 26rpx;
  color: #4b5563;
  line-height: 1.65;
  margin-bottom: 16rpx;
}

.preview-teaser-hint {
  display: block;
  font-size: 22rpx;
  color: #9ca3af;
  margin-top: 8rpx;
}

.preview-strength-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10rpx;
}

.preview-strength-dot {
  color: #8b5cf6;
  margin-right: 10rpx;
  font-size: 26rpx;
}

.preview-strength-text {
  flex: 1;
  font-size: 26rpx;
  color: #4b5563;
  line-height: 1.55;
}

/* 底部工具条：看全文 / 朋友圈 / 拍照（按步骤解锁·放大更清晰版） */
.result-bottom-tools {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 180;
  padding: 20rpx 24rpx 18rpx;
  padding-bottom: calc(18rpx + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -8rpx 32rpx rgba(15, 23, 42, 0.08);
  border-top: 1rpx solid #f3f4f6;
  backdrop-filter: saturate(140%) blur(6rpx);
}

.journey-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8rpx;
  margin-bottom: 18rpx;
  padding: 0 6rpx;
}

.journey-stepper__item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rpx;
}

.journey-stepper__dot {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  background: #e5e7eb;
  color: #94a3b8;
  font-size: 26rpx;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, 0.6);
}

.journey-stepper__dot--done {
  background: #10b981;
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.25);
}

.journey-stepper__dot--active {
  background: #6366f1;
  color: #fff;
  box-shadow: 0 0 0 8rpx rgba(99, 102, 241, 0.16),
              0 6rpx 16rpx rgba(99, 102, 241, 0.28);
  transform: scale(1.06);
}

.journey-stepper__label {
  font-size: 22rpx;
  color: #6b7280;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.journey-stepper__label--active {
  color: #6366f1;
  font-weight: 600;
}

.journey-stepper__bar {
  flex: 1 1 auto;
  height: 4rpx;
  background: #e5e7eb;
  border-radius: 2rpx;
  align-self: center;
  margin: 0 0 26rpx;
  transition: background 0.3s ease;
}

.journey-stepper__bar--done { background: #10b981; }

.result-bottom-tools__row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 14rpx;
}

.result-tool-btn {
  flex: 1;
  margin: 0;
  padding: 14rpx 12rpx;
  min-height: 104rpx;
  line-height: 1.25;
  border-radius: 20rpx;
  font-size: 28rpx;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  box-sizing: border-box;
  transition: all 0.2s ease;
  position: relative;
}

.result-tool-btn::after {
  border: none;
}

.result-tool-btn--primary {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  flex: 1.4;
  box-shadow: 0 10rpx 28rpx rgba(99, 102, 241, 0.32);
  transform: translateY(-2rpx);
}

.result-tool-btn--rose {
  background: linear-gradient(135deg, #e63946 0%, #ff6b9d 100%);
  color: #fff;
  flex: 1.4;
  box-shadow: 0 10rpx 28rpx rgba(230, 57, 70, 0.28);
  transform: translateY(-2rpx);
}

.result-tool-btn--ghost {
  background: linear-gradient(135deg, #14b8a6 0%, #22c55e 100%);
  color: #fff;
  border: none !important;
  flex: 1.4;
  box-shadow: 0 10rpx 28rpx rgba(20, 184, 166, 0.28);
  transform: translateY(-2rpx);
}

.result-tool-btn--locked {
  background: #f3f4f6 !important;
  color: #9ca3af !important;
  box-shadow: none !important;
  border: 1rpx solid #e5e7eb !important;
  opacity: 0.78;
  flex: 1;
  transform: none;
}

.result-tool-btn__lock {
  display: inline-block;
  margin-right: 6rpx;
  font-size: 22rpx;
}

/* 步骤角标：按钮左上角 01/02/03（用 :nth-child 自动编号，零接触 wxml） */
.result-bottom-tools__row .result-tool-btn {
  padding-top: 22rpx;
}
.result-bottom-tools__row .result-tool-btn::before {
  position: absolute;
  top: 8rpx;
  left: 14rpx;
  font-size: 18rpx;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.06em;
}
.result-bottom-tools__row .result-tool-btn:nth-child(1)::before { content: '01'; }
.result-bottom-tools__row .result-tool-btn:nth-child(2)::before { content: '02'; }
.result-bottom-tools__row .result-tool-btn:nth-child(3)::before { content: '03'; }
.result-bottom-tools__row .result-tool-btn--locked::before {
  color: #b0b7bf;
}

.result-tool-sub {
  display: block;
  font-size: 22rpx;
  font-weight: 400;
  opacity: 0.9;
  margin-top: 6rpx;
  letter-spacing: 0.02em;
}

/*
 * 底部固定条占位：须用 .content-container.content-container--with-bottom-tools
 * 否则各页 wxss 里单独的 .content-container { padding-bottom: 64rpx } 会晚加载并覆盖单类名修饰符，导致「深度解读」等末尾区块被挡住。
 */
.content-container.content-container--with-bottom-tools {
  padding-bottom: calc(
    120rpx + 400rpx + env(safe-area-inset-bottom)
  );
}

.content-scroll--with-bottom-tools {
  height: 100vh;
}

/* 分享落地：双按钮行 */
.result-share-footer--stack {
  flex-direction: column;
  gap: 16rpx;
}

.result-share-footer-row2 {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
}

.result-share-footer-btn--ghost {
  flex: 1;
  background: #fff !important;
  color: #e63946 !important;
  border: 2rpx solid #fecdd3 !important;
}

.result-share-footer-btn--ghost::after {
  border: none;
}

.result-share-footer-btn--share {
  flex: 1;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%) !important;
}

/* ========== 高级排版（hero / 洞察 / 两栏 / 网格 / 引用 / CTA） ========== */

.hero-card {
  position: relative;
  border-radius: 28rpx;
  padding: 56rpx 40rpx 44rpx;
  overflow: hidden;
  color: #fff;
  box-shadow: 0 20rpx 48rpx rgba(15, 23, 42, 0.18);
  margin-bottom: 28rpx;
}

.hero-card::before {
  content: '';
  position: absolute;
  left: -60rpx;
  top: -60rpx;
  width: 260rpx;
  height: 260rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.hero-card::after {
  content: '';
  position: absolute;
  right: -90rpx;
  bottom: -80rpx;
  width: 340rpx;
  height: 340rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.hero-card--mbti {
  background: linear-gradient(140deg, #7c3aed 0%, #8b5cf6 45%, #6366f1 100%);
}
.hero-card--disc {
  background: linear-gradient(140deg, #2563eb 0%, #3b82f6 45%, #0ea5e9 100%);
}
.hero-card--pdp {
  background: linear-gradient(140deg, #d97706 0%, #f59e0b 45%, #ea580c 100%);
}
.hero-card--sbti {
  background: linear-gradient(140deg, #0f766e 0%, #14b8a6 55%, #22d3ee 100%);
}
.hero-card--face {
  background: linear-gradient(140deg, #be185d 0%, #db2777 55%, #f97316 100%);
}

.hero-eyebrow {
  display: block;
  font-size: 24rpx;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  margin-bottom: 12rpx;
  position: relative;
  z-index: 1;
}

.hero-code {
  display: block;
  font-size: 108rpx;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 4rpx;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.18);
  position: relative;
  z-index: 1;
  margin-bottom: 8rpx;
}

.hero-title {
  display: block;
  font-size: 36rpx;
  font-weight: 700;
  margin-top: 14rpx;
  position: relative;
  z-index: 1;
}

.hero-subtitle {
  display: block;
  font-size: 26rpx;
  margin-top: 10rpx;
  line-height: 1.6;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-top: 24rpx;
  position: relative;
  z-index: 1;
}

.hero-badge {
  padding: 8rpx 20rpx;
  border-radius: 999rpx;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 22rpx;
  backdrop-filter: blur(4rpx);
}

.hero-badge--solid {
  background: #fff;
  color: #111827;
  font-weight: 600;
}

/* 洞察三宫格 */
.insight-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin: 0 0 28rpx;
}

.insight-card {
  flex: 1 1 30%;
  min-width: 180rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 20rpx;
  border: 1rpx solid #eef0f5;
  box-shadow: 0 4rpx 14rpx rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.insight-card__icon {
  width: 54rpx;
  height: 54rpx;
  border-radius: 14rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  margin-bottom: 14rpx;
}

.insight-card__icon--purple { background: #f5f3ff; color: #7c3aed; }
.insight-card__icon--blue { background: #eff6ff; color: #3b82f6; }
.insight-card__icon--orange { background: #fffbeb; color: #d97706; }
.insight-card__icon--teal { background: #ecfeff; color: #0d9488; }
.insight-card__icon--rose { background: #fff1f2; color: #e11d48; }

.insight-card__label {
  display: block;
  font-size: 22rpx;
  color: #6b7280;
  margin-bottom: 4rpx;
}

.insight-card__value {
  display: block;
  font-size: 26rpx;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
}

/* 两栏卡：优势 vs 注意 */
.trait-dual {
  display: flex;
  gap: 16rpx;
  margin-bottom: 28rpx;
}

.trait-dual__col {
  flex: 1;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 22rpx;
  border: 1rpx solid #eef0f5;
  box-shadow: 0 4rpx 14rpx rgba(15, 23, 42, 0.04);
}

.trait-dual__col--strength { border-top: 6rpx solid #14b8a6; }
.trait-dual__col--caution { border-top: 6rpx solid #f97316; }

.trait-dual__title {
  display: flex;
  align-items: center;
  gap: 10rpx;
  font-size: 26rpx;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12rpx;
}

.trait-dual__ic {
  width: 40rpx;
  height: 40rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
}

.trait-dual__ic--strength { background: #ecfdf5; color: #0f766e; }
.trait-dual__ic--caution { background: #fff7ed; color: #c2410c; }

.trait-dual__chip {
  display: inline-block;
  padding: 8rpx 16rpx;
  border-radius: 10rpx;
  margin: 6rpx 8rpx 0 0;
  font-size: 22rpx;
  line-height: 1.5;
}

.trait-dual__chip--strength {
  background: #f0fdfa;
  color: #0f766e;
  border: 1rpx solid #99f6e4;
}

.trait-dual__chip--caution {
  background: #fff7ed;
  color: #c2410c;
  border: 1rpx solid #fed7aa;
}

/* 职业网格 */
.career-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-top: 12rpx;
}

.career-grid__item {
  flex: 1 1 calc(50% - 16rpx);
  min-width: 220rpx;
  background: #f8fafc;
  border: 1rpx solid #e2e8f0;
  border-radius: 16rpx;
  padding: 18rpx 20rpx;
  display: flex;
  align-items: center;
  gap: 14rpx;
}

.career-grid__ic {
  width: 48rpx;
  height: 48rpx;
  border-radius: 12rpx;
  background: #eef2ff;
  color: #4338ca;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  flex-shrink: 0;
}

.career-grid__text {
  flex: 1;
  font-size: 26rpx;
  color: #111827;
  font-weight: 600;
}

/* 引用风格人际关系 */
.quote-card {
  position: relative;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 20rpx;
  padding: 40rpx 28rpx 28rpx;
  color: #78350f;
  box-shadow: 0 10rpx 28rpx rgba(180, 83, 9, 0.12);
  margin-bottom: 28rpx;
}

.quote-card::before {
  content: '“';
  position: absolute;
  top: -20rpx;
  left: 20rpx;
  font-size: 140rpx;
  line-height: 1;
  font-family: Georgia, serif;
  color: rgba(120, 53, 15, 0.2);
}

.quote-card__label {
  display: block;
  font-size: 22rpx;
  letter-spacing: 0.2em;
  opacity: 0.75;
  margin-bottom: 8rpx;
}

.quote-card__text {
  display: block;
  font-size: 28rpx;
  line-height: 1.75;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

/* 深度解读 CTA */
.deep-cta-card {
  margin-top: 28rpx;
  background: linear-gradient(140deg, #ede9fe 0%, #e0e7ff 100%);
  border: 1rpx solid #ddd6fe;
  border-radius: 24rpx;
  padding: 32rpx 28rpx;
  position: relative;
  overflow: hidden;
}

.deep-cta-card::before {
  content: '';
  position: absolute;
  right: -50rpx;
  top: -50rpx;
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.2), transparent 70%);
}

.deep-cta-head {
  display: flex;
  align-items: center;
  gap: 14rpx;
  margin-bottom: 14rpx;
  position: relative;
  z-index: 1;
}

.deep-cta-ic {
  width: 56rpx;
  height: 56rpx;
  border-radius: 16rpx;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  box-shadow: 0 6rpx 18rpx rgba(99, 102, 241, 0.18);
}

.deep-cta-title {
  font-size: 30rpx;
  font-weight: 700;
  color: #312e81;
}

.deep-cta-desc {
  display: block;
  font-size: 24rpx;
  color: #4338ca;
  line-height: 1.65;
  margin-bottom: 20rpx;
  position: relative;
  z-index: 1;
}

.deep-cta-actions {
  display: flex;
  gap: 14rpx;
  position: relative;
  z-index: 1;
}

.deep-cta-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 26rpx;
  font-weight: 600;
  border-radius: 16rpx;
}

.deep-cta-btn--primary {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  box-shadow: 0 10rpx 24rpx rgba(99, 102, 241, 0.3);
}

.deep-cta-btn--ghost {
  background: #fff;
  color: #4338ca;
  border: 2rpx solid #c7d2fe;
}

/* 分区标题（高级版） */
.section-head {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin: 8rpx 4rpx 18rpx;
}

.section-head__bar {
  width: 6rpx;
  height: 28rpx;
  border-radius: 4rpx;
  background: linear-gradient(180deg, #7c3aed 0%, #6366f1 100%);
}

.section-head__bar--disc { background: linear-gradient(180deg, #2563eb 0%, #0ea5e9 100%); }
.section-head__bar--pdp { background: linear-gradient(180deg, #d97706 0%, #f59e0b 100%); }
.section-head__bar--sbti { background: linear-gradient(180deg, #0f766e 0%, #22d3ee 100%); }
.section-head__bar--face { background: linear-gradient(180deg, #be185d 0%, #f97316 100%); }

.section-head__title {
  font-size: 32rpx;
  font-weight: 700;
  color: #111827;
  letter-spacing: 0.02em;
}

.section-head__desc {
  font-size: 22rpx;
  color: #6b7280;
  margin-left: auto;
}

/* 四维条：尾部描述小字 */
.dash-dim-desc {
  display: block;
  font-size: 22rpx;
  color: #6b7280;
  margin-top: 6rpx;
  line-height: 1.55;
}

/* 职业领域 chip 行 */
.field-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14rpx;
  margin-bottom: 28rpx;
}

.field-chip {
  padding: 12rpx 22rpx;
  border-radius: 14rpx;
  background: #eef2ff;
  color: #4338ca;
  font-size: 24rpx;
  font-weight: 600;
}

/* 发展建议 */
.growth-list {
  display: flex;
  flex-direction: column;
  gap: 14rpx;
  margin-bottom: 28rpx;
}

.growth-item {
  display: flex;
  gap: 18rpx;
  padding: 22rpx 22rpx;
  background: #fff;
  border-radius: 18rpx;
  border-left: 6rpx solid #6366f1;
  box-shadow: 0 4rpx 14rpx rgba(15, 23, 42, 0.04);
}

.growth-item__no {
  flex: 0 0 52rpx;
  height: 52rpx;
  border-radius: 14rpx;
  background: #eef2ff;
  color: #4338ca;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 26rpx;
}

.growth-item__text {
  flex: 1;
  font-size: 26rpx;
  color: #1e293b;
  line-height: 1.7;
}