/* ============================================================
   公共样式 common.css v3
   三层信息层次 · 折叠面板 · 精简排版
   ============================================================ */

/* ========== 报告历史 Banner 全局样式（只补充 flex 内部布局，不覆盖各模块的背景/边框） ========== */
.report-banner {
  margin: 0 16px 12px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(135deg, #EDFFED, #E5FFE8);
  border: 1px solid rgba(0,184,148,.4);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  animation: fadeSlideIn .4s ease;
}
[data-theme="dark"] .report-banner,
.dark .report-banner,
body[data-theme="dark"] .report-banner {
  background: linear-gradient(135deg, #162E1A, #16213E);
  border-color: rgba(62,184,100,.25);
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.report-banner-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.report-banner-info .resume-text {
  flex: 1;
  min-width: 0;
}
.report-banner-info .resume-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.report-banner-info .resume-text span {
  display: block;
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}
[data-theme="dark"] .report-banner-info .resume-text span,
.dark .report-banner-info .resume-text span {
  color: #A0A0B0;
}
[data-theme="dark"] .report-banner-info .resume-text strong,
.dark .report-banner-info .resume-text strong {
  color: #E8E8E8;
}

/* ========== 答题卡浮标（全局隐藏） ========== */
#answer-sheet-fab, .answer-sheet-fab { display: none !important; }

/* ========== 合拍分享区域 ========== */
.compat-share-section {
  margin: 20px 16px;
  padding: 28px 20px;
  border-radius: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.compat-share-section::before {
  content: '';
  position: absolute;
  top: -60px; right: -40px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: rgba(108,92,231,.08);
  animation: floatBubble 6s ease-in-out infinite;
}
.compat-share-section::after {
  content: '';
  position: absolute;
  bottom: -30px; left: -20px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(224,64,251,.06);
  animation: floatBubble 8s ease-in-out infinite reverse;
}
.compat-share-section.light {
  background: linear-gradient(135deg, #F8F0FF 0%, #EDE7FF 50%, #E3F1FF 100%);
  border: 1px solid rgba(108,92,231,.12);
}
.compat-share-section.dark {
  background: linear-gradient(135deg, #1E1E3A 0%, #2A1E3E 50%, #1E2A3A 100%);
  border: 1px solid rgba(160,130,255,.15);
}
.compat-share-icon { font-size: 44px; margin-bottom: 12px; animation: bounceIn .6s ease; }
.compat-share-title { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.light .compat-share-title { color: #2D3436; }
.dark .compat-share-title { color: #E8E8E8; }
.compat-share-desc { font-size: 13px; line-height: 1.7; margin-bottom: 20px; position: relative; z-index: 1; }
.light .compat-share-desc { color: #636E72; }
.dark .compat-share-desc { color: #A0A0B0; }

.btn-compat-share {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 36px;
  border: none; border-radius: 50px;
  background: linear-gradient(135deg, #6C5CE7, #E040FB);
  color: #fff; font-size: 16px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(108,92,231,.35);
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
  letter-spacing: .5px;
  position: relative; z-index: 1;
}
.btn-compat-share:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 28px rgba(108,92,231,.45); }
.btn-compat-share:active { transform: scale(.95); }

/* ========== Toast ========== */
.compat-link-toast {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.8);
  background: rgba(0,0,0,.88); color: #fff;
  padding: 18px 32px; border-radius: 16px;
  font-size: 15px; font-weight: 600;
  z-index: 99999; opacity: 0;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  pointer-events: none; text-align: center;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.compat-link-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ========== 邀请提示条 ========== */
.compat-invite-banner {
  margin: 12px 16px; padding: 16px 20px;
  border-radius: 20px;
  display: flex; align-items: center; gap: 14px;
  animation: slideUpFade .5s ease;
  position: relative; overflow: hidden;
}
.compat-invite-banner::after {
  content: ''; position: absolute; right: -20px; top: -20px;
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,152,0,.1);
}
.compat-invite-banner.light { background: linear-gradient(135deg, #FFF8E1, #FFE0B2); border: 1px solid rgba(255,152,0,.2); }
.compat-invite-banner.dark { background: linear-gradient(135deg, #2A2000, #3A2A00); border: 1px solid rgba(255,152,0,.25); }
.compat-invite-icon { font-size: 32px; flex-shrink: 0; animation: pulse 2s infinite; }
.compat-invite-text { flex: 1; }
.compat-invite-text strong { display: block; font-size: 16px; margin-bottom: 4px; }
.light .compat-invite-text strong { color: #E65100; }
.dark .compat-invite-text strong { color: #FFB74D; }
.compat-invite-text span { font-size: 13px; }
.light .compat-invite-text span { color: #BF360C; }
.dark .compat-invite-text span { color: #FFA726; }

/* ========== 合拍报告主容器 ========== */
.compat-report { padding: 0 0 20px; overflow-x: hidden; max-width: 100%; }

/* ========== 章节标题 ========== */
.compat-section-heading {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 16px 8px;
  padding-bottom: 8px;
}
.compat-section-icon { font-size: 22px; flex-shrink: 0; }
.compat-section-text { flex: 1; }
.compat-section-title { font-size: 17px; font-weight: 800; }
.light .compat-section-title { color: #2D3436; }
.dark .compat-section-title { color: #E8E8E8; }
.compat-section-subtitle { font-size: 12px; margin-top: 2px; }
.light .compat-section-subtitle { color: #999; }
.dark .compat-section-subtitle { color: #777; }

/* ========== Hero区 v2 ========== */
.compat-hero-v2 {
  margin: 16px 16px 8px;
  padding: 24px 12px 20px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--theme-color), #E040FB);
  text-align: center; color: #fff;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 32px rgba(108,92,231,.3);
}
.compat-sparkle-bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 70% 20%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.3), transparent),
    radial-gradient(1.5px 1.5px at 80% 60%, rgba(255,255,255,.35), transparent),
    radial-gradient(2px 2px at 10% 80%, rgba(255,255,255,.25), transparent),
    radial-gradient(1px 1px at 60% 50%, rgba(255,255,255,.4), transparent);
  animation: sparkle 4s ease-in-out infinite alternate;
}
.compat-hero-content { position: relative; z-index: 1; }
.compat-score-circle {
  width: 120px; height: 120px;
  margin: 0 auto 12px;
  position: relative;
}
.compat-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.compat-ring-progress { transition: stroke-dasharray 1.5s cubic-bezier(.4,0,.2,1); }
.compat-score-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  pointer-events: none;
}
.compat-score-big { font-size: 44px; font-weight: 900; line-height: 1; display: block; }
.compat-score-unit { font-size: 13px; opacity: .75; margin-top: 3px; line-height: 1; display: block; }
.compat-level-badge {
  display: inline-block;
  padding: 5px 18px;
  border-radius: 50px;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(4px);
  font-size: 17px; font-weight: 800;
  margin-bottom: 6px;
}
.compat-desc-text { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.compat-fun-comment { font-size: 13px; opacity: .85; margin-bottom: 10px; }

/* Hero内嵌标签 */
.compat-hero-tags {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin-top: 6px;
}
.compat-hero-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 50px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
  font-size: 12px; font-weight: 600;
  animation: tagPop .4s ease backwards;
}
.compat-hero-tag:nth-child(1) { animation-delay: .1s; }
.compat-hero-tag:nth-child(2) { animation-delay: .2s; }
.compat-hero-tag:nth-child(3) { animation-delay: .3s; }
.compat-hero-tag:nth-child(4) { animation-delay: .4s; }
.compat-hero-tag:nth-child(5) { animation-delay: .5s; }

/* ===== 双人头像对比行 ===== */
.compat-hero-players {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 16px;
  width: 100%;
}
.compat-hero-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 0 0 80px;
  width: 80px;
}
.compat-hero-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,.8);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  flex-shrink: 0;
}
.compat-hero-avatar-fallback {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  border: 3px solid rgba(255,255,255,.8);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  flex-shrink: 0;
}
.compat-hero-player-name {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  line-height: 1.3;
}
.compat-hero-vs-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 120px;
  width: 120px;
  padding: 0 4px;
}
/* vs中心的分数圆圈尺寸，适配双人布局 */
.compat-hero-vs-center .compat-score-circle {
  width: 96px;
  height: 96px;
  margin: 0 0 4px;
}
.compat-hero-vs-center .compat-score-big {
  font-size: 32px;
}
.compat-hero-vs-center .compat-score-unit {
  font-size: 12px;
  margin-top: 1px;
}

/* ========== 通用卡片 ========== */
.compat-card {
  margin: 8px 16px;
  padding: 16px;
  border-radius: 18px;
  animation: cardFadeUp .5s ease backwards;
  overflow: hidden;
  word-break: break-word;
}
.light .compat-card { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.dark .compat-card { background: #1A1A2E; box-shadow: 0 2px 12px rgba(0,0,0,.25); }
.compat-card:nth-child(2) { animation-delay: .05s; }
.compat-card:nth-child(3) { animation-delay: .1s; }

.compat-card-compact {
  padding: 12px 16px;
}

.compat-card-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(108,92,231,.08);
}
.dark .compat-card-header { border-bottom-color: rgba(160,130,255,.1); }
.compat-card-icon { font-size: 20px; }
.compat-card-title { font-size: 16px; font-weight: 800; }
.light .compat-card-title { color: #2D3436; }
.dark .compat-card-title { color: #E8E8E8; }

/* 折叠面板内部的卡片样式 */
.compat-card-inner {
  padding: 4px 0;
}

/* ========== 折叠面板 ========== */
.compat-collapse {
  margin: 8px 16px;
  border-radius: 16px;
  overflow: hidden;
  animation: cardFadeUp .4s ease backwards;
  /* 防止内容溢出 */
  word-break: break-word;
}
.light .compat-collapse { background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,.04); }
.dark .compat-collapse { background: #1A1A2E; box-shadow: 0 1px 8px rgba(0,0,0,.2); }

.compat-collapse-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  transition: background .2s;
}
.light .compat-collapse-header:hover { background: rgba(108,92,231,.03); }
.dark .compat-collapse-header:hover { background: rgba(160,130,255,.05); }
.compat-collapse-header:active { opacity: .7; }

.compat-collapse-title {
  font-size: 15px; font-weight: 700;
}
.light .compat-collapse-title { color: #2D3436; }
.dark .compat-collapse-title { color: #E0E0E0; }

.compat-collapse-arrow {
  font-size: 18px; font-weight: 700;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
}
.light .compat-collapse-arrow { color: #999; }
.dark .compat-collapse-arrow { color: #777; }

.compat-collapse-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.4,0,.2,1), padding .3s;
  padding: 0 18px;
}

.compat-collapse.open .compat-collapse-arrow {
  transform: rotate(90deg);
}
.compat-collapse.open .compat-collapse-body {
  max-height: 2000px;
  padding: 0 18px 18px;
}

/* ========== 底部默契率（精简版） ========== */
.compat-mini-match {
  display: flex; align-items: center; gap: 10px;
}
.compat-mini-match-label {
  font-size: 13px; font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
.light .compat-mini-match-label { color: #2D3436; }
.dark .compat-mini-match-label { color: #DDD; }
.compat-mini-match-bar {
  flex: 1; height: 8px; border-radius: 4px; overflow: hidden;
}
.light .compat-mini-match-bar { background: #F0EDFF; }
.dark .compat-mini-match-bar { background: #2A2040; }
.compat-mini-match-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--bar-color), #E040FB);
  transition: width 1s cubic-bezier(.4,0,.2,1);
}
.compat-mini-match-val {
  font-size: 14px; font-weight: 800; flex-shrink: 0;
}
.light .compat-mini-match-val { color: #6C5CE7; }
.dark .compat-mini-match-val { color: #A29BFE; }
.compat-mini-match-hint {
  font-size: 12px; text-align: center; margin-top: 8px;
}
.light .compat-mini-match-hint { color: #999; }
.dark .compat-mini-match-hint { color: #888; }

/* ========== MBTI 类型对决 ========== */
.compat-type-battle {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 14px;
}
.compat-type-avatar {
  text-align: center;
  padding: 12px 10px;
  border-radius: 16px;
  border: 3px solid var(--avatar-color);
  flex: 1;
  min-width: 0;
  max-width: 120px;
  overflow: hidden;
}
.light .compat-type-avatar { background: linear-gradient(135deg, #FAFAFE, #F5F0FF); }
.dark .compat-type-avatar { background: linear-gradient(135deg, #1E1E30, #2A2040); }
.compat-type-label {
  font-size: 11px; font-weight: 700;
  padding: 2px 10px; border-radius: 10px;
  display: inline-block; margin-bottom: 4px;
  color: #fff; background: var(--avatar-color);
}
.compat-type-code { font-size: 24px; font-weight: 900; letter-spacing: 1px; word-break: keep-all; }
.light .compat-type-code { color: #2D3436; }
.dark .compat-type-code { color: #E8E8E8; }

.compat-vs-badge { text-align: center; flex-shrink: 0; }
.compat-vs-emoji { font-size: 24px; margin-bottom: 2px; }
.compat-vs-text { font-size: 13px; font-weight: 900; opacity: .4; }

/* 化学方程式 */
.compat-chemistry {
  text-align: center; padding: 12px; border-radius: 14px;
  margin-bottom: 12px;
}
.light .compat-chemistry { background: linear-gradient(135deg, #F8F5FF, #F0EDFF); }
.dark .compat-chemistry { background: linear-gradient(135deg, #1E1E30, #2A2040); }
.compat-chem-title { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.light .compat-chem-title { color: #6C5CE7; }
.dark .compat-chem-title { color: #A29BFE; }
.compat-chem-desc { font-size: 13px; line-height: 1.7; }
.light .compat-chem-desc { color: #636E72; }
.dark .compat-chem-desc { color: #A0A0B0; }

/* 四维度精简芯片条 */
.compat-dim-summary-strip {
  display: flex; justify-content: center; gap: 8px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.compat-dim-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 12px;
  font-size: 14px; font-weight: 700;
}
.light .compat-dim-chip.same { background: #E8F5E9; color: #2E7D32; }
.dark .compat-dim-chip.same { background: #1A2E1A; color: #66BB6A; }
.light .compat-dim-chip.diff { background: #FFF3E0; color: #E65100; }
.dark .compat-dim-chip.diff { background: #2A1A00; color: #FFB74D; }
.compat-dim-chip-emoji { font-size: 14px; }
.compat-dim-chip-letters { font-family: monospace; font-size: 15px; }

/* 四维度PK详细 */
.compat-dim-battle { margin-bottom: 12px; }
.compat-dim-label { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.light .compat-dim-label { color: #2D3436; }
.dark .compat-dim-label { color: #CCC; }
.compat-dim-vs-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.compat-dim-side { display: flex; align-items: center; gap: 6px; flex: 1; }
.compat-dim-side.left { justify-content: flex-end; }
.compat-dim-side.right { justify-content: flex-start; }
.compat-dim-letter {
  font-size: 22px; font-weight: 900;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
}
.light .compat-dim-letter { background: #F0EDFF; color: #5B4CC0; }
.dark .compat-dim-letter { background: #2A2040; color: #C0B0FF; }
.compat-dim-letter.match { color: #fff !important; }
.light .compat-dim-letter.match { background: linear-gradient(135deg, #00B894, #55EFC4); }
.dark .compat-dim-letter.match { background: linear-gradient(135deg, #00B894, #55EFC4); }
.compat-dim-pct { font-size: 12px; font-weight: 600; opacity: .6; }
.compat-dim-center { font-size: 16px; flex-shrink: 0; }
.compat-dim-closeness-bar { height: 4px; border-radius: 2px; overflow: hidden; }
.light .compat-dim-closeness-bar { background: #F0F0F0; }
.dark .compat-dim-closeness-bar { background: #2A2A3E; }
.compat-dim-closeness-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #6C5CE7, #00B894);
  transition: width 1s ease;
}
.compat-dim-summary {
  text-align: center; font-size: 14px; font-weight: 800;
  margin-top: 8px; padding: 8px; border-radius: 12px;
}
.light .compat-dim-summary { background: #F0EDFF; color: #6C5CE7; }
.dark .compat-dim-summary { background: #2A2040; color: #A29BFE; }

/* ========== 日常场景预测 ========== */
.compat-scene { margin-bottom: 14px; }
.compat-scene:last-child { margin-bottom: 0; }
.compat-scene-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.light .compat-scene-title { color: #2D3436; }
.dark .compat-scene-title { color: #E0E0E0; }
.compat-scene-dialog { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.compat-dialog-bubble {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 13px; font-weight: 500;
  max-width: 82%;
  line-height: 1.6;
  word-break: break-word;
}
.compat-dialog-bubble.left {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.light .compat-dialog-bubble.left { background: linear-gradient(135deg, #E8E0FF, #D5CCFF); color: #3D2E8A; }
.dark .compat-dialog-bubble.left { background: linear-gradient(135deg, #2A2050, #3A2A60); color: #D0C0FF; }
.compat-dialog-bubble.right {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.light .compat-dialog-bubble.right { background: linear-gradient(135deg, #FFE0F0, #FFD0E5); color: #8A2E6A; }
.dark .compat-dialog-bubble.right { background: linear-gradient(135deg, #3A1A30, #4A2040); color: #FFC0E0; }
.compat-scene-verdict {
  font-size: 12px; text-align: center;
  padding: 6px 10px; border-radius: 10px;
}
.light .compat-scene-verdict { background: #FFF8E1; color: #E65100; }
.dark .compat-scene-verdict { background: #2A2000; color: #FFB74D; }

/* ========== BDSM 专属 ========== */
.compat-ds-compare { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; overflow: hidden; }
.compat-ds-gauge { flex: 1; }
.compat-ds-label { font-size: 13px; font-weight: 700; text-align: center; margin-bottom: 4px; }
.light .compat-ds-label { color: #2D3436; }
.dark .compat-ds-label { color: #CCC; }
.compat-ds-bar-wrap {
  display: flex; height: 28px; border-radius: 14px; overflow: hidden;
}
.compat-ds-bar-d {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700;
  min-width: 28px;
}
.compat-ds-bar-s {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  min-width: 28px;
}
.light .compat-ds-bar-s { background: #E8E0FF; color: #5B4CC0; }
.dark .compat-ds-bar-s { background: #2A2040; color: #C0B0FF; }
.compat-ds-leaning { font-size: 11px; text-align: center; margin-top: 3px; font-weight: 600; }
.light .compat-ds-leaning { color: #999; }
.dark .compat-ds-leaning { color: #888; }

/* 角色摘要（精简Top3） */
.compat-role-summary {
  display: flex; gap: 10px; margin-bottom: 10px;
}
.compat-role-summary-col { flex: 1; }
.compat-role-summary-label { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.compat-role-chip {
  display: inline-block; padding: 4px 10px; border-radius: 10px;
  font-size: 12px; font-weight: 600; margin: 2px;
}
.light .compat-role-chip { background: #F8F5FF; color: #2D3436; }
.dark .compat-role-chip { background: #1E1E30; color: #DDD; }
.compat-role-chip.overlap {
  font-weight: 700;
}
.light .compat-role-chip.overlap { background: #F0EDFF; border: 1.5px solid #6C5CE7; color: #5B4CC0; }
.dark .compat-role-chip.overlap { background: #2A2050; border: 1.5px solid #A29BFE; color: #C0B0FF; }

/* 互补摘要 */
.compat-complement-summary {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 0 0;
}
.compat-comp-chip {
  display: inline-block; padding: 4px 10px; border-radius: 10px;
  font-size: 14px;
}
.light .compat-comp-chip { background: #F8F5FF; }
.dark .compat-comp-chip { background: #1E1E30; }
.compat-comp-hint { font-size: 12px; font-weight: 600; }
.light .compat-comp-hint { color: #E65100; }
.dark .compat-comp-hint { color: #FFB74D; }

/* 角色对比完整版（折叠面板内） */
.compat-role-compare { display: flex; gap: 8px; overflow-x: auto; }
.compat-role-col { flex: 1; min-width: 120px; }
.compat-role-col-title { font-size: 13px; font-weight: 700; text-align: center; margin-bottom: 8px; }
.compat-role-item {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 8px; border-radius: 10px; margin-bottom: 5px;
  font-size: 12px;
}
.light .compat-role-item { background: #F8F5FF; }
.dark .compat-role-item { background: #1E1E30; }
.light .compat-role-item.overlap { background: #F0EDFF; border: 1.5px solid #6C5CE7; }
.dark .compat-role-item.overlap { background: #2A2050; border: 1.5px solid #A29BFE; }
.compat-role-rank { font-weight: 800; font-size: 11px; opacity: .5; width: 20px; }
.compat-role-icon { font-size: 14px; }
.compat-role-name { flex: 1; font-weight: 600; }
.light .compat-role-name { color: #2D3436; }
.dark .compat-role-name { color: #DDD; }
.compat-role-score { font-weight: 800; font-size: 12px; }
.light .compat-role-score { color: #6C5CE7; }
.dark .compat-role-score { color: #A29BFE; }

.compat-overlap-badge {
  text-align: center; font-size: 13px; font-weight: 700;
  margin-top: 8px; padding: 6px; border-radius: 10px;
}
.light .compat-overlap-badge { background: #FFF3E0; color: #E65100; }
.dark .compat-overlap-badge { background: #2A2000; color: #FFB74D; }

/* 互补配对（折叠面板内） */
.compat-complement-pair {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px; border-radius: 14px; margin-bottom: 6px;
}
.light .compat-complement-pair { background: #F8F5FF; }
.dark .compat-complement-pair { background: #1E1E30; }
.compat-comp-role { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 13px; }
.compat-comp-arrow { font-size: 18px; }
.compat-comp-note { text-align: center; font-size: 12px; margin-top: 6px; }
.light .compat-comp-note { color: #999; }
.dark .compat-comp-note { color: #888; }

/* 五大类对比条形图 */
.compat-cat-row { margin-bottom: 10px; }
.compat-cat-name { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.light .compat-cat-name { color: #2D3436; }
.dark .compat-cat-name { color: #CCC; }
.compat-cat-bar-pair { display: flex; flex-direction: column; gap: 3px; }
.compat-cat-bar {
  height: 20px; border-radius: 10px;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 8px;
  color: #fff; font-size: 11px; font-weight: 700;
  min-width: 4px;
  transition: width 1s cubic-bezier(.4,0,.2,1);
}
.compat-legend {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 12px; font-size: 12px; font-weight: 600;
}
.light .compat-legend { color: #999; }
.dark .compat-legend { color: #888; }
.compat-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ========== 九型人格专属 ========== */
.compat-enn-avatar {
  text-align: center;
  padding: 12px 10px;
  border-radius: 16px;
  border: 3px solid var(--avatar-color);
  flex: 1;
  min-width: 0;
  max-width: 120px;
  overflow: hidden;
}
.light .compat-enn-avatar { background: linear-gradient(135deg, #FAFAFE, #FFF5F0); }
.dark .compat-enn-avatar { background: linear-gradient(135deg, #1E1E30, #2A2030); }
.compat-enn-num { font-size: 26px; font-weight: 900; }
.light .compat-enn-num { color: #2D3436; }
.dark .compat-enn-num { color: #E8E8E8; }
.compat-enn-name { font-size: 12px; font-weight: 600; margin-top: 3px; }
.light .compat-enn-name { color: #636E72; }
.dark .compat-enn-name { color: #A0A0B0; }

/* 三元组精简条 */
.compat-triad-strip {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; border-radius: 12px;
  font-size: 13px; font-weight: 700;
}
.light .compat-triad-strip { background: #F8F5FF; color: #2D3436; }
.dark .compat-triad-strip { background: #1E1E30; color: #DDD; }
.compat-triad-vs { font-size: 12px; font-weight: 600; }
.light .compat-triad-vs { color: #6C5CE7; }
.dark .compat-triad-vs { color: #A29BFE; }

.compat-enn-row { margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.compat-enn-row.highlight { padding: 3px 0; }
.compat-enn-type-label { width: 56px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.light .compat-enn-type-label { color: #2D3436; }
.dark .compat-enn-type-label { color: #CCC; }
.compat-enn-bars { flex: 1; }

/* ========== SCL-90 专属 ========== */
.compat-gsi-compare {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.compat-gsi-item { text-align: center; flex: 1; padding: 14px 8px; border-radius: 14px; }
.light .compat-gsi-item { background: #F8F5FF; }
.dark .compat-gsi-item { background: #1E1E30; }
.compat-gsi-label { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.light .compat-gsi-label { color: #636E72; }
.dark .compat-gsi-label { color: #A0A0B0; }
.compat-gsi-value { font-size: 28px; font-weight: 900; color: var(--gsi-color); }
.compat-gsi-vs { font-size: 16px; font-weight: 900; opacity: .3; }

/* 相似/差异双列条 */
.compat-sim-diff-strip {
  display: flex; gap: 10px; margin-top: 12px;
}
.compat-sim-diff-col { flex: 1; }
.compat-sim-diff-heading {
  font-size: 13px; font-weight: 800; margin-bottom: 8px;
  padding: 4px 0;
}
.light .compat-sim-diff-heading.same { color: #2E7D32; }
.dark .compat-sim-diff-heading.same { color: #66BB6A; }
.light .compat-sim-diff-heading.diff { color: #C62828; }
.dark .compat-sim-diff-heading.diff { color: #EF5350; }
.compat-sim-diff-item {
  font-size: 13px; font-weight: 600;
  padding: 5px 0;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.light .compat-sim-diff-item { color: #2D3436; }
.dark .compat-sim-diff-item { color: #DDD; }
.compat-sim-diff-badge {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 8px;
  white-space: nowrap;
}
.compat-sim-diff-badge.same { background: #C8F7C5; color: #1B7A1B; }
.dark .compat-sim-diff-badge.same { background: #1A3A1A; color: #6ECF6E; }
.compat-sim-diff-badge.diff { background: #FFE0D0; color: #C0392B; }
.dark .compat-sim-diff-badge.diff { background: #3A1A1A; color: #FF8070; }

/* SCL-90 增强：健康等级 */
.compat-gsi-level {
  font-size: 12px; font-weight: 700; margin-top: 6px;
  padding: 2px 10px; border-radius: 10px; display: inline-block;
}
.compat-gsi-level--good { background: #E8F5E9; color: #2E7D32; }
.dark .compat-gsi-level--good { background: #1A3A1A; color: #66BB6A; }
.compat-gsi-level--mild { background: #FFF8E1; color: #F57F17; }
.dark .compat-gsi-level--mild { background: #3A3010; color: #FFD54F; }
.compat-gsi-level--moderate { background: #FFF3E0; color: #E65100; }
.dark .compat-gsi-level--moderate { background: #3A2010; color: #FFB74D; }
.compat-gsi-level--severe { background: #FFEBEE; color: #C62828; }
.dark .compat-gsi-level--severe { background: #3A1010; color: #EF5350; }

/* SCL-90 增强：整体解读 */
.compat-scl-comment {
  text-align: center; font-size: 13px; font-weight: 600;
  padding: 10px 14px; border-radius: 12px; margin: 10px 0;
  line-height: 1.6;
}
.light .compat-scl-comment { background: #F0FFF4; color: #2D3436; }
.dark .compat-scl-comment { background: #1A2A1A; color: #CCC; }

/* SCL-90 增强：互相支持建议 */
.compat-scl-support {
  margin-top: 14px; padding: 14px; border-radius: 14px;
}
.light .compat-scl-support { background: #F8F5FF; }
.dark .compat-scl-support { background: #1E1E30; }
.compat-scl-support-title {
  font-size: 14px; font-weight: 800; margin-bottom: 10px;
}
.light .compat-scl-support-title { color: #6C5CE7; }
.dark .compat-scl-support-title { color: #A29BFE; }
.compat-scl-support-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,.04);
}
.dark .compat-scl-support-item { border-bottom-color: rgba(255,255,255,.06); }
.compat-scl-support-item:last-child { border-bottom: none; }
.compat-scl-support-emoji { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.compat-scl-support-text { flex: 1; min-width: 0; }
.compat-scl-support-who { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.light .compat-scl-support-who { color: #2D3436; }
.dark .compat-scl-support-who { color: #DDD; }
.compat-scl-support-tip { font-size: 12px; line-height: 1.5; }
.light .compat-scl-support-tip { color: #636E72; }
.dark .compat-scl-support-tip { color: #A0A0B0; }

/* SCL-90 增强：逐因子对比卡片 */
.compat-scl-factor {
  padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,.05);
}
.dark .compat-scl-factor { border-bottom-color: rgba(255,255,255,.06); }
.compat-scl-factor:last-of-type { border-bottom: none; }
.compat-scl-factor-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.compat-scl-factor-name { font-size: 14px; font-weight: 700; }
.light .compat-scl-factor-name { color: #2D3436; }
.dark .compat-scl-factor-name { color: #E0E0E0; }
.compat-scl-factor-diff {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 8px;
}
.compat-scl-factor-diff--same { background: #C8F7C5; color: #1B7A1B; }
.dark .compat-scl-factor-diff--same { background: #1A3A1A; color: #6ECF6E; }
.compat-scl-factor-diff--mid { background: #FFF8E1; color: #F57F17; }
.dark .compat-scl-factor-diff--mid { background: #3A3010; color: #FFD54F; }
.compat-scl-factor-diff--diff { background: #FFE0D0; color: #C0392B; }
.dark .compat-scl-factor-diff--diff { background: #3A1A1A; color: #FF8070; }
.compat-scl-factor-desc {
  font-size: 11px; line-height: 1.5; margin-bottom: 8px;
}
.light .compat-scl-factor-desc { color: #999; }
.dark .compat-scl-factor-desc { color: #888; }
.compat-scl-factor-bars { margin-top: 4px; }
.compat-scl-bar-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.compat-scl-bar-label {
  width: 36px; font-size: 11px; font-weight: 600; flex-shrink: 0; text-align: right;
}
.light .compat-scl-bar-label { color: #636E72; }
.dark .compat-scl-bar-label { color: #A0A0B0; }
.compat-scl-bar-bg {
  flex: 1; height: 16px; border-radius: 8px; overflow: hidden;
}
.light .compat-scl-bar-bg { background: #F0EDFF; }
.dark .compat-scl-bar-bg { background: #2A2040; }
.compat-scl-bar-fill {
  height: 100%; border-radius: 8px; min-width: 4px;
  transition: width 1s cubic-bezier(.4,0,.2,1);
}
.compat-scl-bar-val {
  width: 52px; font-size: 12px; font-weight: 700; flex-shrink: 0;
  display: flex; align-items: center; gap: 3px;
}
.light .compat-scl-bar-val { color: #2D3436; }
.dark .compat-scl-bar-val { color: #DDD; }
.compat-scl-bar-lv { font-size: 12px; }

/* ========== 性压抑专属 ========== */
.compat-open-compare {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.compat-open-item { flex: 1; text-align: center; }
.compat-open-label { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.light .compat-open-label { color: #636E72; }
.dark .compat-open-label { color: #A0A0B0; }
.compat-open-value {
  padding: 14px 8px; border-radius: 14px;
  border: 2px solid var(--open-color);
}
.light .compat-open-value { background: #FAFAFE; }
.dark .compat-open-value { background: #1E1E30; }
.compat-open-emoji { display: block; font-size: 24px; margin-bottom: 4px; }
.compat-open-score { display: block; font-size: 26px; font-weight: 900; color: var(--open-color); }
.compat-open-text { display: block; font-size: 12px; font-weight: 600; margin-top: 3px; }
.light .compat-open-text { color: #636E72; }
.dark .compat-open-text { color: #A0A0B0; }
.compat-open-vs { font-size: 16px; font-weight: 900; opacity: .3; }
.compat-open-comment {
  text-align: center; font-size: 13px; padding: 10px; border-radius: 10px; line-height: 1.6;
}
.light .compat-open-comment { background: #F8F5FF; color: #636E72; }
.dark .compat-open-comment { background: #1E1E30; color: #A0A0B0; }

.compat-yayi-dim { margin-bottom: 14px; }
.compat-yayi-dim-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
}
.compat-yayi-dim-header > span:first-child { font-size: 14px; font-weight: 700; }
.light .compat-yayi-dim-header > span:first-child { color: #2D3436; }
.dark .compat-yayi-dim-header > span:first-child { color: #DDD; }
.compat-yayi-diff { font-size: 12px; font-weight: 600; }
.compat-yayi-bars { display: flex; flex-direction: column; gap: 3px; }
.compat-yayi-bar-row { display: flex; align-items: center; gap: 6px; }
.compat-yayi-bar-label { width: 18px; font-size: 12px; font-weight: 600; text-align: right; }
.light .compat-yayi-bar-label { color: #999; }
.dark .compat-yayi-bar-label { color: #888; }
.compat-yayi-bar-bg { flex: 1; height: 18px; border-radius: 9px; overflow: hidden; }
.light .compat-yayi-bar-bg { background: #F0F0F0; }
.dark .compat-yayi-bar-bg { background: #2A2A3E; }
.compat-yayi-bar-fill {
  height: 100%; border-radius: 9px;
  transition: width 1s cubic-bezier(.4,0,.2,1);
}
.compat-yayi-bar-val { width: 26px; font-size: 12px; font-weight: 700; }
.light .compat-yayi-bar-val { color: #2D3436; }
.dark .compat-yayi-bar-val { color: #DDD; }

/* ========== 16PF 专属 ========== */
.compat-traits-compare { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.compat-traits-col { flex: 1; min-width: 120px; }
.compat-traits-label { font-size: 13px; font-weight: 700; text-align: center; margin-bottom: 6px; }
.compat-trait-tag {
  display: inline-block; padding: 4px 10px; border-radius: 50px;
  font-size: 12px; font-weight: 600; margin: 2px;
}
.light .compat-trait-tag { background: #F0EDFF; color: #5B4CC0; }
.dark .compat-trait-tag { background: #2A2040; color: #C0B0FF; }
.compat-trait-tag.common {
  background: linear-gradient(135deg, #FFD700, #FFA000) !important;
  color: #fff !important;
}
.compat-common-badge {
  text-align: center; font-size: 13px; font-weight: 700;
  padding: 6px 10px; border-radius: 10px; margin-bottom: 10px;
}
.light .compat-common-badge { background: #FFF8E1; color: #E65100; }
.dark .compat-common-badge { background: #2A2000; color: #FFB74D; }

.compat-pf-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 10px; margin-bottom: 5px;
}
.light .compat-pf-row.similar { background: #F0FFF0; }
.dark .compat-pf-row.similar { background: #1A2A1A; }
.light .compat-pf-row.different { background: #FFF5F0; }
.dark .compat-pf-row.different { background: #2A1A1A; }
.compat-pf-emoji { font-size: 16px; }
.compat-pf-name { font-size: 13px; font-weight: 700; flex: 1; }
.light .compat-pf-name { color: #2D3436; }
.dark .compat-pf-name { color: #DDD; }
.compat-pf-scores { font-size: 14px; font-weight: 800; }
.compat-pf-scores em { font-style: normal; }
.compat-pf-label { font-size: 11px; font-weight: 600; opacity: .6; }

/* 16因素轨道图 */
.compat-pf-factor { margin-bottom: 8px; }
.compat-pf-factor-name { font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.light .compat-pf-factor-name { color: #2D3436; }
.dark .compat-pf-factor-name { color: #CCC; }
.compat-pf-factor-bar { display: flex; align-items: center; gap: 5px; }
.compat-pf-end { font-size: 10px; font-weight: 600; width: 28px; }
.compat-pf-end.low { text-align: right; }
.compat-pf-end.high { text-align: left; }
.light .compat-pf-end { color: #999; }
.dark .compat-pf-end { color: #888; }
.compat-pf-track {
  flex: 1; height: 6px; border-radius: 3px; position: relative;
}
.light .compat-pf-track { background: #F0F0F0; }
.dark .compat-pf-track { background: #2A2A3E; }
.compat-pf-dot {
  width: 12px; height: 12px; border-radius: 50%;
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  z-index: 1;
}

/* ========== 动画 ========== */
@keyframes floatBubble {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-10px, 10px); }
}
@keyframes sparkle {
  0% { opacity: .6; }
  100% { opacity: 1; }
}
@keyframes bounceIn {
  0% { transform: scale(.3); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes tagPop {
  from { opacity: 0; transform: scale(.5); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ============================================================
   报告通用样式 v1 — 替代模块内 inline style
   ============================================================ */

/* ========== 滚动入场动画 ========== */
.rpt-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
}
.rpt-reveal.visible {
  opacity: 1;
  transform: none;
}
.rpt-reveal:nth-child(2) { transition-delay: .08s; }
.rpt-reveal:nth-child(3) { transition-delay: .16s; }
.rpt-reveal:nth-child(4) { transition-delay: .24s; }
.rpt-reveal:nth-child(5) { transition-delay: .32s; }

/* ========== 布局 ========== */
.rpt-center { text-align: center; }
.rpt-flex-center { display: flex; justify-content: center; align-items: center; }
.rpt-flex-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.rpt-mb-8 { margin-bottom: 8px; }
.rpt-mb-12 { margin-bottom: 12px; }
.rpt-mb-16 { margin-bottom: 16px; }
.rpt-mb-20 { margin-bottom: 20px; }

/* ========== 总览区域 ========== */
.rpt-icon-lg { font-size: 56px; margin-bottom: 8px; }
.rpt-type-name {
  font-size: 24px; font-weight: 800;
  margin-bottom: 4px;
}
.rpt-type-desc {
  font-size: 14px; color: var(--text-light);
  line-height: 1.8; margin-bottom: 16px;
}
.rpt-score-pill {
  display: inline-block; padding: 6px 20px;
  border-radius: 50px; color: #fff;
  font-size: 14px; font-weight: 700;
  margin-bottom: 12px;
}

/* 维度总览网格 */
.rpt-dim-grid {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 12px;
  margin-bottom: 16px;
}
.rpt-dim-mini {
  text-align: center; flex: 1;
  min-width: 100px; max-width: 160px;
  padding: 14px 8px;
  border-radius: var(--radius-sm, 10px);
  background: var(--bg-card-alt, #FAF5F5);
  border: 1px solid var(--border, #E8E0E0);
  transition: transform .2s;
}
.rpt-dim-mini:hover { transform: translateY(-2px); }
.rpt-dim-mini-icon { font-size: 28px; }
.rpt-dim-mini-name {
  font-size: 12px; font-weight: 700;
  margin: 4px 0;
}
.rpt-dim-mini-score {
  font-size: 24px; font-weight: 800;
}
.rpt-dim-mini-level {
  font-size: 10px; color: var(--text-muted, #999);
  margin-top: 2px;
}

/* ========== 维度详解卡片 ========== */
.rpt-dim-card {
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border, #E8E0E0);
}
.rpt-dim-card:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.rpt-dim-header {
  display: flex; align-items: center;
  gap: 8px; margin-bottom: 8px;
}
.rpt-dim-icon { font-size: 22px; }
.rpt-dim-name {
  font-size: 15px; font-weight: 700; flex: 1;
}
.rpt-dim-score {
  font-size: 20px; font-weight: 800;
}

/* 进度条 */
.rpt-bar-track {
  height: 10px;
  background: var(--border, #E8E0E0);
  border-radius: 5px;
  overflow: hidden; margin-bottom: 8px;
}
.rpt-bar-fill {
  height: 100%; border-radius: 5px;
  transition: width 1s cubic-bezier(.4,0,.2,1);
}
.rpt-bar-fill-animated { width: 0; }

.rpt-dim-level {
  font-size: 13px; color: var(--text-light, #636E72);
  margin-bottom: 8px;
}
.rpt-dim-desc {
  font-size: 13px; color: var(--text-light, #636E72);
  line-height: 1.8; margin-bottom: 8px;
}

/* 特质标签 */
.rpt-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.rpt-tag {
  padding: 2px 10px; border-radius: 50px;
  font-size: 11px; font-weight: 600;
}

/* ========== 双面解读 ========== */
.rpt-dual-card {
  margin-bottom: 16px; padding: 14px;
  border-radius: var(--radius-sm, 10px);
  background: var(--bg-card-alt, #FAF5F5);
  border-left: 4px solid;
}
.rpt-dual-title {
  font-size: 14px; font-weight: 700;
  margin-bottom: 8px;
}
.rpt-dual-label {
  font-size: 13px; font-weight: 600;
  margin-bottom: 4px;
}
.rpt-dual-label.positive { color: #2ECC71; }
.rpt-dual-label.negative { color: #E74C3C; }
.rpt-dual-list {
  padding-left: 16px; margin: 0 0 8px;
}
.rpt-dual-list li {
  font-size: 12px; color: var(--text-light, #636E72);
  line-height: 1.8;
}

/* ========== 成长建议 ========== */
.rpt-advice-box {
  padding: 14px;
  border-radius: var(--radius-sm, 10px);
  margin-bottom: 12px;
}
.rpt-advice-box.primary {
  background: rgba(108,92,231,.04);
  border: 1px solid rgba(108,92,231,.1);
}
.rpt-advice-box.secondary {
  background: var(--bg-card-alt, #FAF5F5);
  border: 1px solid var(--border, #E8E0E0);
}
.rpt-advice-title {
  display: block; font-weight: 700;
  margin-bottom: 8px;
}
.rpt-advice-title.accent { color: var(--accent, #6C5CE7); }
.rpt-advice-item {
  font-size: 13px; color: var(--text-light, #636E72);
  line-height: 1.8; padding: 4px 0;
}

/* ========== 优劣势分析（EQ等模块） ========== */
.rpt-strength-box {
  padding: 14px;
  border-radius: var(--radius-sm, 10px);
  margin-bottom: 12px;
}
.rpt-strength-box.good {
  background: rgba(46,204,113,.05);
  border: 1px solid rgba(46,204,113,.15);
}
.rpt-strength-box.weak {
  background: rgba(231,76,60,.05);
  border: 1px solid rgba(231,76,60,.15);
}
.rpt-strength-title {
  font-size: 14px; font-weight: 700;
  margin-bottom: 6px;
}
.rpt-strength-title.good { color: #2ECC71; }
.rpt-strength-title.weak { color: #E74C3C; }
.rpt-strength-desc {
  font-size: 13px; color: var(--text-light, #636E72);
  line-height: 1.8;
}

/* ========== 章节导航浮标 ========== */
.rpt-chapter-nav {
  position: fixed; right: 16px; top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  display: flex; flex-direction: column;
  gap: 6px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.rpt-chapter-nav.visible {
  opacity: 1; pointer-events: auto;
}
.rpt-chapter-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--border, #E8E0E0);
  cursor: pointer;
  transition: all .25s;
  position: relative;
}
.rpt-chapter-dot.active {
  background: var(--accent, #6C5CE7);
  transform: scale(1.4);
  box-shadow: 0 0 8px var(--accent, rgba(108,92,231,.4));
}
.rpt-chapter-dot:hover {
  transform: scale(1.3);
}
.rpt-chapter-tooltip {
  position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.8); color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 6px;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.rpt-chapter-dot:hover .rpt-chapter-tooltip {
  opacity: 1;
}

/* ========== 雷达图容器 ========== */
.rpt-radar-wrap {
  display: flex; justify-content: center;
  margin: 16px 0;
}
.rpt-radar-canvas {
  max-width: 300px; width: 100%; height: auto;
}

@media(max-width:374px){
  .rpt-dim-mini { min-width: 80px; padding: 10px 6px; }
  .rpt-dim-mini-score { font-size: 20px; }
  .rpt-chapter-nav { display: none; }
}
@media(min-width:768px){
  .rpt-dim-grid { gap: 16px; }
  .rpt-dim-mini { padding: 18px 12px; }
}

/* ========== 章节付费墙 ========== */
/* 旧版模糊锁定（保留兼容） */
.paywall-locked {
  position: relative;
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transition: filter .4s ease;
}
.paywall-locked::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 100%);
  z-index: 10;
  pointer-events: none;
}
[data-theme="dark"] .paywall-locked::after,
.dark .paywall-locked::after {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 100%);
}

/* 新版：模糊遮罩，显示内容轮廓引导付费 */
.paywall-content-hidden {
  position: relative;
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  max-height: 220px;
  overflow: hidden;
  transition: filter .4s ease;
}
.paywall-content-hidden::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 100%);
  z-index: 2;
  pointer-events: none;
}
[data-theme="dark"] .paywall-content-hidden::after,
.dark .paywall-content-hidden::after {
  background: linear-gradient(180deg, rgba(18,18,30,0) 0%, rgba(18,18,30,.95) 100%);
}

/* 新版：模糊包裹容器 */
.pw-chapter-blur-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  margin-bottom: 8px;
  min-height: 240px;
}
/* ★ 未付费时隐藏报告结果区域（类型代码、名称、emoji等） */
.pw-result-hidden {
  display: none !important;
}
/* 包裹容器内的内容模糊：加深模糊，确保内容完全不可读 */
.pw-chapter-blur-wrap > *:not(.pw-chapter-overlay) {
  filter: blur(10px) saturate(0.5);
  -webkit-filter: blur(10px) saturate(0.5);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  max-height: 160px;
  overflow: hidden;
  opacity: 0.5;
}
/* 遮罩层：覆盖在模糊内容上方，按钮垂直居中 */
.pw-chapter-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0; top: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.55) 20%, rgba(255,255,255,.82) 45%, rgba(255,255,255,.95) 70%, rgba(255,255,255,.98) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 16px 0;
}
[data-theme="dark"] .pw-chapter-overlay,
.dark .pw-chapter-overlay {
  background: linear-gradient(180deg, rgba(18,18,30,0.15) 0%, rgba(18,18,30,0.55) 20%, rgba(18,18,30,.82) 45%, rgba(18,18,30,.95) 70%, rgba(18,18,30,.98) 100%);
}
.pw-co-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  text-align: center;
}
.pw-co-icon {
  font-size: 22px;
  margin-bottom: 2px;
}
.pw-co-title {
  font-size: 18px;
  font-weight: 800;
  color: #2D3436;
}
[data-theme="dark"] .pw-co-title,
.dark .pw-co-title { color: #D0C8E8; }
.pw-co-desc {
  font-size: 14px;
  color: #888;
  line-height: 1.5;
  margin-bottom: 8px;
  max-width: 300px;
}
[data-theme="dark"] .pw-co-desc,
.dark .pw-co-desc { color: #7A7A9A; }
.pw-co-btn {
  padding: 14px 36px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, #6C5CE7, #A855F7);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(108,92,231,.35);
  transition: transform .2s, box-shadow .2s;
  white-space: nowrap;
  animation: pw-breathe 2.5s ease-in-out infinite;
}
.pw-co-btn:active {
  transform: scale(.96);
  box-shadow: 0 2px 8px rgba(108,92,231,.25);
  animation: none;
}
.pw-co-btn-secondary {
  background: linear-gradient(135deg, #A29BFE, #6C5CE7);
  font-size: 13px;
  padding: 8px 22px;
  box-shadow: 0 3px 10px rgba(108,92,231,.25);
}

/* 章节付费引导卡片（每章标题下方，旧版兼容） */
.pw-chapter-lock-card {
  margin: 0 16px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #F8F5FF 0%, #F0EAFF 100%);
  border: 1.5px dashed rgba(108,92,231,.25);
  overflow: hidden;
  animation: slideUpFade .4s ease;
}
[data-theme="dark"] .pw-chapter-lock-card,
.dark .pw-chapter-lock-card {
  background: linear-gradient(135deg, #1A1630 0%, #1E1838 100%);
  border-color: rgba(160,130,255,.2);
}
.pw-clc-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}
.pw-clc-left {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.pw-clc-lock {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  opacity: .7;
}
.pw-clc-info {
  flex: 1;
  min-width: 0;
}
.pw-clc-name {
  font-size: 14px;
  font-weight: 700;
  color: #2D3436;
  margin-bottom: 3px;
}
[data-theme="dark"] .pw-clc-name,
.dark .pw-clc-name { color: #D0C8E8; }
.pw-clc-desc {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
[data-theme="dark"] .pw-clc-desc,
.dark .pw-clc-desc { color: #7A7A9A; }
.pw-clc-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, #6C5CE7, #A855F7);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(108,92,231,.3);
  transition: transform .2s, box-shadow .2s;
}
.pw-clc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(108,92,231,.4);
}
.pw-clc-btn:active { transform: scale(.95); }
.pw-clc-locked-tag {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 50px;
  background: rgba(108,92,231,.08);
  color: #A29BFE;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
[data-theme="dark"] .pw-clc-locked-tag,
.dark .pw-clc-locked-tag {
  background: rgba(108,92,231,.15);
  color: #9B8FE0;
}

.paywall-unlock-banner {
  text-align: center;
  padding: 0;
  margin: 24px 0;
  border-radius: 24px;
  background: linear-gradient(160deg, #F3EEFF 0%, #E8E0FF 40%, #F0E4FF 100%);
  border: 1.5px solid rgba(108,92,231,.15);
  position: relative;
  z-index: 20;
  animation: slideUpFade .5s ease;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(108,92,231,.12);
}
[data-theme="dark"] .paywall-unlock-banner,
.dark .paywall-unlock-banner {
  background: linear-gradient(160deg, #1A1630 0%, #241D45 40%, #1E1838 100%);
  border-color: rgba(160,130,255,.2);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

/* --- Price Highlight --- */
.pw-price-highlight {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  margin: 0 16px 4px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(231,76,60,.06), rgba(231,76,60,.03));
  border: 1px solid rgba(231,76,60,.12);
  flex-wrap: wrap;
}
.pw-price-label {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #E74C3C;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.pw-price-amount {
  font-size: 32px;
  font-weight: 900;
  color: #E74C3C;
  line-height: 1;
}
.pw-price-desc {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
}
[data-theme="dark"] .pw-price-highlight,
.dark .pw-price-highlight {
  background: rgba(231,76,60,.08);
  border-color: rgba(231,76,60,.15);
}

/* --- Header --- */
.pw-header {
  padding: 28px 24px 20px;
  background: linear-gradient(180deg, rgba(108,92,231,.08) 0%, transparent 100%);
}
[data-theme="dark"] .pw-header,
.dark .pw-header {
  background: linear-gradient(180deg, rgba(108,92,231,.15) 0%, transparent 100%);
}
.pw-icon-ring {
  width: 56px; height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6C5CE7, #A29BFE);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(108,92,231,.3);
  animation: pwPulse 2s ease-in-out infinite;
}
@keyframes pwPulse {
  0%,100% { box-shadow: 0 4px 16px rgba(108,92,231,.3); }
  50% { box-shadow: 0 4px 24px rgba(108,92,231,.5); }
}
.pw-icon { font-size: 26px; filter: brightness(1.2); }
.pw-title {
  font-size: 20px;
  font-weight: 800;
  color: #2D3436;
  margin-bottom: 6px;
  letter-spacing: .5px;
}
[data-theme="dark"] .pw-title,
.dark .pw-title { color: #F0EAFF; }
.pw-subtitle {
  font-size: 14px;
  color: #636E72;
  line-height: 1.6;
}
[data-theme="dark"] .pw-subtitle,
.dark .pw-subtitle { color: #A0A0B0; }

/* --- Chapters Preview --- */
.pw-chapters-preview {
  padding: 16px 24px 12px;
  margin: 0 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="dark"] .pw-chapters-preview,
.dark .pw-chapters-preview {
  background: rgba(255,255,255,.06);
}
.pw-chapters-label {
  font-size: 11px;
  font-weight: 700;
  color: #6C5CE7;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}
[data-theme="dark"] .pw-chapters-label,
.dark .pw-chapters-label { color: #A29BFE; }
.pw-chapter-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(108,92,231,.08);
}
.pw-chapter-item:last-child { border-bottom: none; }
[data-theme="dark"] .pw-chapter-item,
.dark .pw-chapter-item { border-bottom-color: rgba(255,255,255,.06); }
.pw-chapter-left {
  flex-shrink: 0;
  padding-top: 1px;
}
.pw-chapter-right {
  flex: 1;
  min-width: 0;
}
.pw-chapter-lock {
  font-size: 14px;
  opacity: .7;
}
.pw-chapter-name {
  font-size: 14px;
  font-weight: 700;
  color: #2D3436;
  margin-bottom: 2px;
}
[data-theme="dark"] .pw-chapter-name,
.dark .pw-chapter-name { color: #D0C8E8; }
.pw-chapter-desc {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
}
[data-theme="dark"] .pw-chapter-desc,
.dark .pw-chapter-desc { color: #7A7A9A; }
.pw-chapter-more {
  font-size: 13px;
  color: #999;
  padding: 6px 0 2px;
  justify-content: center;
}
[data-theme="dark"] .pw-chapter-more,
.dark .pw-chapter-more { color: #777; }

/* --- Benefits --- */
.pw-benefits {
  padding: 12px 24px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pw-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.pw-benefit-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.pw-benefit-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pw-benefit-text strong {
  font-size: 13px;
  font-weight: 700;
  color: #2D3436;
}
[data-theme="dark"] .pw-benefit-text strong,
.dark .pw-benefit-text strong { color: #D0C8E8; }
.pw-benefit-text span {
  font-size: 12px;
  color: #888;
  line-height: 1.4;
}
[data-theme="dark"] .pw-benefit-text span,
.dark .pw-benefit-text span { color: #7A7A9A; }

/* --- Price Row --- */
.pw-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px;
  margin: 8px 16px 0;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(108,92,231,.06), rgba(168,85,247,.04));
  border: 1px solid rgba(108,92,231,.1);
  flex-wrap: wrap;
}
[data-theme="dark"] .pw-price-row,
.dark .pw-price-row {
  background: rgba(108,92,231,.1);
  border-color: rgba(160,130,255,.15);
}
.pw-price-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pw-price-label {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #E74C3C;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.pw-price-amount {
  font-size: 28px;
  font-weight: 900;
  color: #E74C3C;
  line-height: 1;
}

/* --- Highlights (legacy, keep for compat) --- */
.pw-highlights {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 16px 24px;
  flex-wrap: wrap;
}
.pw-highlight-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
}
[data-theme="dark"] .pw-highlight-item,
.dark .pw-highlight-item { color: #B0A8C8; }
.pw-hi-icon { font-size: 15px; }

/* --- Unlock Button --- */
@keyframes pw-breathe {
  0%, 100% { box-shadow: 0 8px 28px rgba(108,92,231,.5); transform: scale(1); }
  50% { box-shadow: 0 12px 40px rgba(108,92,231,.7), 0 0 20px rgba(168,85,247,.3); transform: scale(1.03); }
}
.paywall-unlock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 48px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, #6C5CE7, #A855F7);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(108,92,231,.5);
  transition: transform .25s, box-shadow .25s;
  letter-spacing: .5px;
  white-space: nowrap;
  flex-shrink: 0;
  width: calc(100% - 24px);
  max-width: 420px;
  animation: pw-breathe 2.5s ease-in-out infinite;
}
.paywall-unlock-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(108,92,231,.5);
  animation: none;
}
.paywall-unlock-btn:active {
  transform: scale(.96);
  animation: none;
}
.pw-btn-text { font-size: 26px; }
.pw-btn-arrow {
  font-size: 28px;
  transition: transform .2s;
}
.paywall-unlock-btn:hover .pw-btn-arrow {
  transform: translateX(3px);
}

/* --- Trust Bar --- */
.pw-trust {
  padding: 14px 24px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pw-trust-item {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
}
[data-theme="dark"] .pw-trust-item,
.dark .pw-trust-item { color: #777; }
.pw-trust-sep {
  font-size: 10px;
  color: #CCC;
}
[data-theme="dark"] .pw-trust-sep,
.dark .pw-trust-sep { color: #555; }

/* --- Paywall Banner Inner Elements --- */
.pw-banner-head { padding: 20px 20px 0; }
.pw-banner-copy { margin-bottom: 14px; }
.pw-banner-headline {
  font-size: 18px; font-weight: 800; color: #2D3436;
  line-height: 1.4; margin-bottom: 6px;
}
[data-theme="dark"] .pw-banner-headline,
.dark .pw-banner-headline { color: #E8E8E8; }
.pw-banner-subline {
  font-size: 14px; color: #636E72; line-height: 1.5;
}
[data-theme="dark"] .pw-banner-subline,
.dark .pw-banner-subline { color: #A0A0B0; }
.pw-banner-accent { color: #6C5CE7; }
[data-theme="dark"] .pw-banner-accent,
.dark .pw-banner-accent { color: #A29BFE; }
.pw-banner-list {
  background: #F8F7FF; border-radius: 14px;
  padding: 12px 14px; margin-bottom: 16px;
}
[data-theme="dark"] .pw-banner-list,
.dark .pw-banner-list {
  background: rgba(108,92,231,.1);
}
.pw-banner-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid rgba(108,92,231,.06);
}
[data-theme="dark"] .pw-banner-item,
.dark .pw-banner-item { border-bottom-color: rgba(160,130,255,.1); }
.pw-banner-item:last-child { border-bottom: none; }
.pw-banner-item-icon { font-size: 18px; flex-shrink: 0; }
.pw-banner-item-text { font-size: 15px; color: #4A4A6A; line-height: 1.5; flex: 1; min-width: 0; word-break: break-word; overflow-wrap: break-word; white-space: normal; display: block; }
[data-theme="dark"] .pw-banner-item-text,
.dark .pw-banner-item-text { color: #C0B8D8; }
.pw-banner-item-lock {
  margin-left: auto; font-size: 14px; color: #A29BFE; flex-shrink: 0;
}

/* --- Chapter Overlay Dark Theme --- */
[data-theme="dark"] .pw-chapter-overlay,
.dark .pw-chapter-overlay {
  background: linear-gradient(180deg, rgba(18,18,30,0.15) 0%, rgba(18,18,30,0.55) 20%, rgba(18,18,30,.82) 45%, rgba(18,18,30,.95) 70%, rgba(18,18,30,.98) 100%);
}
[data-theme="dark"] .pw-co-title,
.dark .pw-co-title { color: #E8E8E8; }
[data-theme="dark"] .pw-co-desc,
.dark .pw-co-desc { color: #A0A0B0; }
[data-theme="dark"] .pw-clc-name,
.dark .pw-clc-name { color: #E8E8E8; }
[data-theme="dark"] .pw-clc-desc,
.dark .pw-clc-desc { color: #A0A0B0; }
[data-theme="dark"] .pw-chapter-lock-card,
.dark .pw-chapter-lock-card {
  background: rgba(26,26,46,.9);
  border-color: rgba(160,130,255,.15);
}

/* --- Pay Modal Dark Theme --- */
[data-theme="dark"] .pay-modal-card,
.dark .pay-modal-card {
  background: #1A1A2E;
  color: #E8E8E8;
}
[data-theme="dark"] .pay-modal-header,
.dark .pay-modal-header {
  background: linear-gradient(160deg, #1E1838, #2A1D50);
}
[data-theme="dark"] .pay-product-name,
.dark .pay-product-name { color: #E8E8E8; }
[data-theme="dark"] .pay-modal-close,
.dark .pay-modal-close {
  background: rgba(255,255,255,.1);
  color: #A0A0B0;
}
[data-theme="dark"] .pay-wxpay-tips,
.dark .pay-wxpay-tips {
  background: rgba(7,193,96,.08);
}
[data-theme="dark"] .pay-wxpay-tips div[style*="color:#2D3436"],
.dark .pay-wxpay-tips div[style*="color:#2D3436"] {
  color: #E8E8E8 !important;
}
[data-theme="dark"] .pay-wxpay-tips div[style*="color:#636E72"],
.dark .pay-wxpay-tips div[style*="color:#636E72"] {
  color: #A0A0B0 !important;
}
[data-theme="dark"] .pay-trust-bar,
.dark .pay-trust-bar { color: #666680; }
[data-theme="dark"] .pay-book-recommend .pay-book-card,
.dark .pay-book-recommend .pay-book-card {
  background: linear-gradient(135deg, #2A2018, #1E1A2E);
  border-color: rgba(255,152,0,.15);
}
[data-theme="dark"] .pay-book-title,
.dark .pay-book-title { color: #E8E8E8; }
[data-theme="dark"] .pay-book-desc,
.dark .pay-book-desc { color: #A0A0B0; }
[data-theme="dark"] .pay-book-divider,
.dark .pay-book-divider { color: #666680; }
[data-theme="dark"] .pay-book-divider::before,
[data-theme="dark"] .pay-book-divider::after,
.dark .pay-book-divider::before,
.dark .pay-book-divider::after { background: #2A2A3E; }

/* ========== 报告测试时间 ========== */
.report-test-time {
  text-align: center;
  font-size: 13px;
  color: #999;
  padding: 10px 16px 2px;
  letter-spacing: 0.3px;
}
[data-theme="dark"] .report-test-time,
.dark .report-test-time { color: #777; }

/* ========== 合拍悬浮图标 ========== */
.compat-fab {
  position: fixed;
  bottom: 100px;
  right: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6C5CE7, #E040FB);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 90;
  box-shadow: 0 4px 20px rgba(108,92,231,.45);
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: compatFabIn .4s ease backwards;
}
.compat-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(108,92,231,.55);
}
.compat-fab:active {
  transform: scale(.95);
}
.compat-fab svg {
  flex-shrink: 0;
}
.compat-fab-label {
  font-size: 9px;
  font-weight: 700;
  margin-top: -2px;
  letter-spacing: .5px;
}
@keyframes compatFabIn {
  from { opacity: 0; transform: scale(.3) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@media(min-width:768px){
  .compat-fab { bottom: 108px; right: 32px; width: 60px; height: 60px; }
  .compat-fab-label { font-size: 10px; }
}

/* ========== 合拍社交分享区 ========== */
.compat-social-section {
  margin: 20px 0 0;
  padding: 24px 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, #FDFCFF, #F5F0FF);
  border: 1px solid rgba(108,92,231,.1);
}
.dark .compat-social-section {
  background: linear-gradient(135deg, #1A1A2E, #16162A);
  border-color: rgba(108,92,231,.15);
}
.compat-social-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.compat-social-icon {
  font-size: 22px;
}
.compat-social-title {
  font-size: 16px;
  font-weight: 800;
  background: linear-gradient(135deg, #6C5CE7, #E040FB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.compat-share-textbox {
  background: #fff;
  border: 1px solid rgba(108,92,231,.1);
  border-radius: 14px;
  padding: 16px;
  font-size: 13px;
  line-height: 1.8;
  color: #2D3436;
  margin-bottom: 12px;
  white-space: pre-wrap;
  word-break: break-all;
}
.dark .compat-share-textbox {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
  color: #E0E0E0;
}
.compat-copy-btn {
  display: block;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #6C5CE7, #A29BFE);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  margin-bottom: 16px;
}
.compat-copy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(108,92,231,.35);
}
.compat-copy-btn:active {
  transform: scale(.97);
}
.compat-copy-btn.copied {
  background: linear-gradient(135deg, #00B894, #55EFC4);
}
.compat-challenge-cta {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid rgba(108,92,231,.08);
}
.dark .compat-challenge-cta {
  border-top-color: rgba(255,255,255,.06);
}
.compat-challenge-text {
  font-size: 13px;
  color: #636E72;
  margin-bottom: 10px;
}
.dark .compat-challenge-text {
  color: #A0A0B0;
}
.compat-challenge-btn {
  display: inline-block;
  padding: 10px 28px;
  border-radius: 50px;
  background: linear-gradient(135deg, #E040FB, #6C5CE7);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.compat-challenge-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(224,64,251,.35);
}

/* ========== 返回首页按钮 ========== */
.btn-back-home {
  display: block;
  width: fit-content;
  margin: 16px auto 32px;
  padding: 12px 32px;
  border-radius: 50px;
  background: transparent;
  border: 1.5px solid #D5D5DC;
  color: #636E72;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: all .25s ease;
  cursor: pointer;
}
.btn-back-home:hover {
  background: #F5F0FF;
  border-color: #6C5CE7;
  color: #6C5CE7;
  transform: translateY(-1px);
}
.dark .btn-back-home,
[data-theme="dark"] .btn-back-home {
  border-color: #3A3A4E;
  color: #A0A0B0;
}
.dark .btn-back-home:hover,
[data-theme="dark"] .btn-back-home:hover {
  background: rgba(108,92,231,.12);
  border-color: #6C5CE7;
  color: #A29BFE;
}

/* ========== 首页悬浮标 (FAB) ========== */
.home-fab {
  position: fixed;
  left: 16px;
  bottom: 90px;
  z-index: 999;
  height: 36px;
  padding: 0 12px 0 10px;
  border-radius: 18px;
  background: linear-gradient(135deg, #6C5CE7, #A29BFE);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 4px 16px rgba(108,92,231,.35);
  text-decoration: none;
  transition: all .25s ease;
  opacity: 0.85;
}
.home-fab:hover,
.home-fab:active {
  opacity: 1;
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(108,92,231,.45);
}
.home-fab-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.home-fab-text {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.dark .home-fab,
[data-theme="dark"] .home-fab {
  background: linear-gradient(135deg, #4A3EAF, #6C5CE7);
  box-shadow: 0 4px 16px rgba(108,92,231,.5);
}

/* ============================================================
   报告专业性增强样式 v1
   ============================================================ */

/* ========== 方法论标注条 ========== */
.report-pro-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 16px;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(108,92,231,.08), rgba(0,184,148,.08));
  border-radius: 12px;
  border: 1px solid rgba(108,92,231,.12);
  position: relative;
  z-index: 1;
}
.report-pro-bar::-webkit-scrollbar { display: none; }
.report-pro-bar-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(108, 92, 231, .85);
  white-space: nowrap;
}
.report-pro-bar-item .pro-icon {
  font-size: 12px;
  opacity: .85;
}
.report-pro-bar-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(108, 92, 231, .3);
  flex-shrink: 0;
}

/* ========== 报告模块完整度环形图 ========== */
.report-completeness {
  margin: 14px 16px 6px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(108,92,231,.05), rgba(0,206,201,.05));
  border-radius: 14px;
  border: 1px solid rgba(108,92,231,.1);
  display: flex;
  align-items: center;
  gap: 16px;
}
[data-theme="dark"] .report-completeness,
.dark .report-completeness {
  background: linear-gradient(135deg, rgba(108,92,231,.12), rgba(0,206,201,.08));
  border-color: rgba(108,92,231,.2);
}
.report-completeness-ring {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  position: relative;
}
.report-completeness-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.report-completeness-ring .ring-bg {
  fill: none;
  stroke: rgba(108,92,231,.12);
  stroke-width: 5;
}
[data-theme="dark"] .report-completeness-ring .ring-bg,
.dark .report-completeness-ring .ring-bg { stroke: rgba(108,92,231,.25); }
.report-completeness-ring .ring-fill {
  fill: none;
  stroke: url(#completeness-grad);
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1);
}
.report-completeness-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  line-height: 1;
}
.report-completeness-info {
  flex: 1;
  min-width: 0;
}
.report-completeness-title {
  font-size: 13px;
  font-weight: 700;
  color: #2D3436;
  margin-bottom: 6px;
}
[data-theme="dark"] .report-completeness-title,
.dark .report-completeness-title { color: #E0E0E0; }
.report-completeness-modules {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.report-completeness-dot {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: #636E72;
  background: rgba(108,92,231,.06);
  padding: 2px 8px;
  border-radius: 50px;
  white-space: nowrap;
}
[data-theme="dark"] .report-completeness-dot,
.dark .report-completeness-dot {
  color: #A0A0B8;
  background: rgba(108,92,231,.15);
}
.report-completeness-dot::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6C5CE7;
  flex-shrink: 0;
}

/* ========== 报告顶部专业徽标 ========== */
.report-pro-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 50px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.3);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  letter-spacing: .5px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.report-pro-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2ECC71;
  box-shadow: 0 0 6px #2ECC71;
  animation: proBadgePulse 2s ease-in-out infinite;
}
@keyframes proBadgePulse {
  0%,100% { opacity: 1; }
  50% { opacity: .4; }
}

/* ========== 章节分隔符专业增强 ========== */
.chapter-divider-pro {
  margin: 32px 16px 12px;
  padding: 0 4px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.chapter-divider-pro::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 4px;
  right: 4px;
  height: 1px;
  background: linear-gradient(90deg, rgba(108,92,231,.3), rgba(108,92,231,.1) 60%, transparent 100%);
}
.chapter-divider-pro .cdp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6C5CE7, #A29BFE);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(108,92,231,.25);
}
.chapter-divider-pro .cdp-title {
  font-size: 17px;
  font-weight: 800;
  color: #2D3436;
  flex: 1;
}
.chapter-divider-pro .cdp-tag {
  font-size: 10px;
  font-weight: 700;
  color: #6C5CE7;
  background: rgba(108,92,231,.08);
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: .5px;
  white-space: nowrap;
}

/* ========== 报告 section 卡片专业增强 ========== */
/* 顶部彩色标识线常显（不依赖 hover） */
.report-section-pro::before {
  opacity: 1 !important;
}
/* 卡片内标题增加序号标记 */
.report-section-pro h3 {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.04);
  margin-bottom: 14px;
}

/* ========== 数据来源说明条 ========== */
.report-data-note {
  margin: 0 16px 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(108,92,231,.04);
  border: 1px solid rgba(108,92,231,.08);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #999;
  line-height: 1.5;
}
.report-data-note .note-icon {
  font-size: 13px;
  flex-shrink: 0;
  opacity: .7;
}

/* ========== 报告完成度指示器 ========== */
.report-completion-bar {
  margin: 0 16px 20px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #F8F7FF, #F0EDFF);
  border: 1px solid rgba(108,92,231,.1);
  display: flex;
  align-items: center;
  gap: 12px;
}
.rcb-label {
  font-size: 12px;
  font-weight: 700;
  color: #6C5CE7;
  white-space: nowrap;
  flex-shrink: 0;
}
.rcb-track {
  flex: 1;
  height: 6px;
  background: rgba(108,92,231,.12);
  border-radius: 3px;
  overflow: hidden;
}
.rcb-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #6C5CE7, #00B894);
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.rcb-pct {
  font-size: 12px;
  font-weight: 800;
  color: #6C5CE7;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 32px;
  text-align: right;
}

/* ========== 报告 Hero 专业信息注入区 ========== */
.report-hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.report-hero-meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.report-hero-meta-val {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.report-hero-meta-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  letter-spacing: .5px;
}
.report-hero-meta-sep {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,.2);
  flex-shrink: 0;
}

/* ========== 报告 section 入场动画 ========== */
.report-section {
  animation: rptSectionIn .5s cubic-bezier(.4,0,.2,1) backwards;
}
@keyframes rptSectionIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.report-section:nth-child(1) { animation-delay: .05s; }
.report-section:nth-child(2) { animation-delay: .1s; }
.report-section:nth-child(3) { animation-delay: .15s; }
.report-section:nth-child(4) { animation-delay: .2s; }
.report-section:nth-child(5) { animation-delay: .25s; }

/* ========== 报告顶部彩色标识线常显 ========== */
.report-section::before {
  opacity: .6 !important;
}
.report-section:hover::before {
  opacity: 1 !important;
}

/* ========== 报告 section 标题样式增强 ========== */
.report-section h3 {
  font-size: 16px !important;
  letter-spacing: .3px;
}
.report-section h3 .icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(108,92,231,.1), rgba(0,184,148,.08));
  border-radius: 8px;
  font-size: 17px !important;
  flex-shrink: 0;
}

/* ========== 章节分隔符增强 ========== */
.chapter-divider {
  font-size: 17px !important;
}
.chapter-divider span {
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
}

/* ========== 报告底部专业声明 ========== */
.report-disclaimer {
  margin: 8px 16px 24px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.05);
  font-size: 11px;
  color: #bbb;
  line-height: 1.7;
  text-align: center;
}
.report-disclaimer a {
  color: #A29BFE;
  text-decoration: none;
}

@media(max-width:374px){
  .report-pro-bar { gap: 4px; padding: 6px 12px; }
  .report-pro-bar-item { font-size: 10px; }
  .report-hero-meta-val { font-size: 15px; }
}