/* ============================================================
   牌阵关系 · 独立页面模块样式（sp-* 命名空间，与主站隔离）
   ============================================================
   2026-10-11 重构说明
   ------------------------------------------------------------
   此前全文件用硬编码 hex（var(--sp-bg) / var(--sp-line) / var(--sp-ink-2)…），
   既无法跟随主题，也是「毛坯感」的根本原因 —— 颜色之间
   没有体系、阴影没有层级、间距没有节奏。

   本次重构建立三个维度：
     ① 令牌化 —— 全部颜色改引用 tokens.css 的设计变量，
        天然适配亮/暗主题，与全站其他页面同源；
     ② 分区化 —— 页面明确分为「控制台 / 舞台 / 牌库」三层，
        靠表面明度、投影强度、留白节奏建立秩序，不靠分割线堆砌；
     ③ 材质化 —— 牌位做成"凹陷卡槽"、已放置卡"浮起"，
        牌库卡加"彩色书脊"，用光影而非描边表达层级。

   约束：class 名与 DOM 结构零改动，功能逻辑零改动。
   ============================================================ */

/* ============================================================
   0. 设计令牌层（仅本页作用域）
   ============================================================ */
#page-spread, #relSheet {
  /* —— 表面 ——
     ⚠ 修复（2026-10-11）：此处 4 处令牌的兜底值曾被批量替换成
        var(--sp-自身) 形成自我循环引用。CSS 判定自引用为
        "invalid at computed-value time" → 变量失效 → 所有依赖它的
        背景/文字色全部回退为 transparent / inherit，
        表现为牌阵对比面板"背景透明、底层页面透出"。
        兜底值必须写死字面量，不得引用自身。 */
  --sp-bg: var(--c-surface, var(--c-surface));
  --sp-bg-2: var(--c-surface-2, #F7FAF8);
  --sp-line: var(--c-line, var(--c-line));
  /* —— 文本 —— */
  --sp-ink: var(--c-ink, var(--ink));
  --sp-ink-2: var(--c-sub, var(--c-sub));
  /* 12px 小字在白底需 ≥4.5:1；--c-mut 原值仅 4.46:1，此处兜底值已上调 */
  --sp-ink-3: var(--c-mut, #687770);
  /* —— 品牌 —— */
  --sp-brand: var(--v-600, var(--brand-2));
  --sp-brand-2: var(--v-500, var(--brand-3));
  --sp-brand-3: var(--v-400, var(--brand-1));
  --sp-brand-deep: var(--v-900, var(--v-900));
  --sp-brand-tint: var(--v-50, var(--brand-purple-soft));
  /* —— 三排语义色（优势层暖 / 中性 / 潜意识层冷）—— */
  --sp-row1: var(--s-amber-700); --sp-row1-bg: var(--s-amber-50); --sp-row1-line: var(--s-amber-200);
  --sp-row2: var(--sp-brand); --sp-row2-bg: var(--sp-brand-tint); --sp-row2-line: var(--v-200, var(--brand-5));
  --sp-row3: var(--s-teal-700); --sp-row3-bg: var(--sp-brand-tint); --sp-row3-line: #99F6E4;
  /* —— 阴影体系（环境影 + 接触影）—— */
  --sp-e1: 0 1px 2px rgba(6, 95, 70, .05);
  --sp-e2: 0 1px 2px rgba(6, 95, 70, .05), 0 4px 12px -6px rgba(6, 95, 70, .12);
  --sp-e3: 0 2px 4px rgba(6, 95, 70, .05), 0 10px 24px -10px rgba(6, 95, 70, .18);
  /* —— 圆角 / 间距节奏 —— */
  --sp-r-sm: 10px; --sp-r-md: 14px; --sp-r-lg: 18px; --sp-r-xl: 22px;
  --sp-gap-1: 6px; --sp-gap-2: 10px; --sp-gap-3: 14px; --sp-gap-4: 18px;

  padding-bottom: 92px; /* 底部 tabbar 留白 */
}
#page-spread .page-head h2 {
  background: linear-gradient(120deg, var(--sp-brand-deep), var(--sp-brand));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ============ 整体页面氛围：顶部品牌光晕 + Hero 卡片头部（手机优先） ============ */
#page-spread {
  background:
    radial-gradient(130% 46% at 50% -8%, color-mix(in srgb, var(--sp-brand) 8%, transparent), transparent 72%);
}
#page-spread .page-head {
  position: relative;
  padding: 16px 16px 16px;
  border-radius: var(--sp-r-xl);
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--sp-brand) 9%, var(--sp-bg)) 0%,
    var(--sp-bg) 76%);
  border: 1px solid var(--sp-line);
  box-shadow: var(--sp-e2);
  overflow: hidden;
  margin-bottom: 4px;
}
#page-spread .page-head::before {
  content: ''; position: absolute; right: -46px; top: -56px;
  width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sp-brand-2) 24%, transparent), transparent 70%);
  pointer-events: none;
}
#page-spread .page-head::after {
  content: ''; position: absolute; left: -30px; bottom: -60px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-amber) 14%, transparent), transparent 70%);
  pointer-events: none;
}
#page-spread .page-head h2,
#page-spread .page-head p { position: relative; }
#page-spread .page-head h2 { font-size: 23px; }
#page-spread .page-head p { font-size: 12.5px; line-height: 1.6; color: var(--sp-ink-2); margin-top: 6px; }

/* ---------- 通用矢量图标规格（与全站 icon-system 对齐） ---------- */
.sp-ico {
  width: 1em; height: 1em; flex: none; display: block;
  stroke-width: 1.8;
}

/* ============================================================
   1. 控制台区 —— 场景选择 + 成员切换
   定位：决策入口。做成「悬浮控制台」，与下方舞台拉开层级。

   场景选择器设计（2026-10-11 重做）：
     形态：分段控制器（segmented control）—— 三项共处一个凹槽内，
           激活项以「能量块」抬起并压出边缘高光，物理感明确。
     立体：槽位内凹（inset 双层阴影）→ 激活块浮起（外投影 + 内高光）
           → 图标槽再浮起一层，三级高度关系。
     科技感：激活块的绿色能量辉光 + 顶部扫描高光 + 底部环境反射，
           全部用 box-shadow 实现，不触发重排、不占额外图层。
     克制：辉光透明度 ≤ 12%，不干扰文字可读性。
   ============================================================ */
.sp-scenes {
  position: relative;
  display: flex; gap: 4px;
  margin: 0 0 var(--sp-gap-2);
  padding: 5px;
  background: var(--sp-bg);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-r-lg);
  /* 凹槽：上缘压暗 + 下缘亮边，营造"三个开关嵌在面板里" */
  box-shadow:
    inset 0 2px 5px rgba(15, 45, 35, .07),
    inset 0 -1px 0 rgba(255, 255, 255, .6),
    var(--sp-e2);
}
.sp-scene {
  position: relative; overflow: hidden;
  flex: 1; border: 1px solid transparent; background: transparent;
  color: var(--sp-ink-2);
  padding: 11px 4px 10px;
  border-radius: var(--sp-r-md);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-family: inherit;
  /* 层级：切换只动合成层 */
  transition: color .24s cubic-bezier(.16, 1, .3, 1),
              background-color .24s cubic-bezier(.16, 1, .3, 1),
              box-shadow .28s cubic-bezier(.16, 1, .3, 1),
              transform .28s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

/* —— 图标槽：第二级高度 —— */
.sp-scene-ico {
  position: relative; z-index: 1;
  width: 38px; height: 38px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--sp-bg-2), var(--sp-bg));
  color: var(--sp-ink-3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 2px rgba(15, 45, 35, .06),
    0 1px 2px rgba(15, 45, 35, .06);
  transition: background .26s cubic-bezier(.16, 1, .3, 1),
              color .26s, box-shadow .26s, transform .3s cubic-bezier(.34, 1.42, .64, 1);
}
.sp-scene-ico .sp-ico { width: 20px; height: 20px; transition: transform .3s cubic-bezier(.34, 1.42, .64, 1); }
.sp-scene-lb {
  position: relative; z-index: 1;
  font-size: 12.5px; font-weight: 700; letter-spacing: .3px;
  white-space: nowrap;
}

/* —— 悬停：图标槽抬升一点 + 微微转向用户 —— */
.sp-scene:hover { color: var(--sp-brand-deep); transform: translateY(-1px); }
.sp-scene:hover .sp-scene-ico {
  color: var(--sp-brand);
  background: linear-gradient(160deg, var(--sp-brand-tint), var(--sp-bg));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 4px 12px -5px rgba(5, 150, 105, .48);
  transform: translateY(-1px) scale(1.04);
}
.sp-scene:hover .sp-scene-ico .sp-ico { transform: scale(1.06); }

/* —— 激活：能量块抬起 —— */
.sp-scene.active {
  color: var(--sp-brand-deep);
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--sp-brand) 14%, var(--sp-bg)) 0%,
    color-mix(in srgb, var(--sp-brand) 5%, var(--sp-bg)) 100%);
  border-color: color-mix(in srgb, var(--sp-brand) 34%, transparent);
  box-shadow:
    /* 环境影 */
    0 4px 14px -6px rgba(5, 150, 105, .46),
    /* 接触影 */
    0 1px 2px rgba(15, 45, 35, .08),
    /* 边缘高光 */
    inset 0 1px 0 rgba(255, 255, 255, .9),
    /* 底部环境反射（模拟能量溢出）*/
    inset 0 -1px 0 color-mix(in srgb, var(--sp-brand) 22%, transparent);
}
/* 激活态顶部扫描高光：一条极淡的横向光带，缓慢往复 */
.sp-scene-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(100deg,
    transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
  background-size: 220% 100%;
  opacity: 0;
  transition: opacity .3s;
}
.sp-scene.active .sp-scene-glow {
  opacity: .55;
  animation: spSceneSweep 5.5s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes spSceneSweep {
  0%   { background-position: -160% 0; }
  55%  { background-position: 260% 0; }
  100% { background-position: 260% 0; }   /* 停顿，避免持续动画消耗 */
}

/* 激活态图标槽：品牌渐变 + 外辉光 */
.sp-scene.active .sp-scene-ico {
  color: var(--c-surface);
  background: linear-gradient(150deg, var(--sp-brand-2) 0%, var(--sp-brand) 58%, var(--sp-brand-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 0 -1px 2px rgba(0, 0, 0, .14),
    0 6px 16px -6px rgba(5, 150, 105, .62);
  transform: translateY(-2px) scale(1.06);
}
.sp-scene.active .sp-scene-ico .sp-ico { transform: scale(1.02); }
/* 激活项的文字加一点字重，形成明确的当前态 */
.sp-scene.active .sp-scene-lb { font-weight: 800; }
/* 按下反馈 */
.sp-scene:active { transform: translateY(0) scale(.975); }

/* ---------- 成员 tabs：横向滑动的身份胶囊 ---------- */
.sp-tabs {
  display: flex; gap: var(--sp-gap-1); align-items: center;
  overflow-x: auto; padding: 5px;
  background: var(--sp-bg);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-r-lg);
  box-shadow: var(--sp-e2);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sp-tabs::-webkit-scrollbar { display: none; }
.sp-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid transparent; background: transparent; color: var(--sp-ink-2);
  font-size: 13px; font-weight: 700; padding: 8px 13px; border-radius: 999px;
  cursor: pointer; font-family: inherit;
  transition: background-color .2s, color .2s, box-shadow .2s, transform .2s var(--ease-out, ease);
}
.sp-tab-c {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 1px 2px rgba(0, 0, 0, .18);
  transition: box-shadow .2s, transform .2s;
}
.sp-tab:hover { background: var(--sp-bg-2); color: var(--sp-ink); transform: translateY(-1px); }
.sp-tab.active {
  background: linear-gradient(150deg, var(--sp-brand-deep), var(--brand-deep, var(--sp-brand-deep)));
  color: var(--sp-bg);
  box-shadow: 0 4px 14px -5px rgba(6, 95, 70, .48);
}
.sp-tab.active .sp-tab-c { box-shadow: 0 0 0 2px rgba(255, 255, 255, .34), 0 1px 3px rgba(0,0,0,.3); transform: scale(1.15); }
.sp-tab.add { color: var(--sp-brand); border: 1px dashed var(--sp-brand-line, var(--v-200, var(--brand-5))); }
.sp-tab.add:hover { background: var(--sp-brand-tint); border-style: solid; }
.sp-tab-name { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-tab-dot {
  text-decoration: none; font-style: normal; font-size: 11px; font-weight: 800;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--sp-bg-2); color: var(--sp-ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.sp-tab.active .sp-tab-dot { background: rgba(255, 255, 255, .22); color: var(--sp-bg); }
.sp-tab-dot.ok { background: var(--sp-brand-2); color: var(--sp-bg); }

/* ---------- 主导速览（控制台底部的洞察条） ---------- */
.sp-compare {
  display: flex; align-items: center; gap: var(--sp-gap-2); flex-wrap: wrap;
  margin: var(--sp-gap-2) 0 0; padding: 11px var(--sp-gap-3);
  border-radius: var(--sp-r-md);
  background: linear-gradient(150deg, var(--s-amber-50), var(--s-amber-25));
  border: 1px solid var(--s-amber-200);
  box-shadow: var(--sp-e1);
}
.sp-cmp-h {
  font-size: 11.5px; font-weight: 800; color: var(--s-amber-700);
  display: inline-flex; align-items: center; gap: 5px;
  letter-spacing: .3px;
}
.sp-cmp-h::before {
  content: ''; width: 3px; height: 12px; border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-amber), #EA580C);
}
.sp-cmp-item { font-size: 12.5px; color: var(--sp-ink-2); display: inline-flex; align-items: center; gap: 5px; }
.sp-cmp-item i {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .8);
}

/* ============================================================
   2. 舞台区 —— 成员操作栏 + 三排牌位（页面视觉中心）
   定位：核心操作区。用更强的表面与阴影托起，形成"舞台"。
   ============================================================ */

/* ---------- 成员操作栏：舞台的头部 ---------- */
.sp-member-bar {
  display: flex; align-items: center; gap: var(--sp-gap-2); flex-wrap: wrap;
  margin: var(--sp-gap-3) 0 var(--sp-gap-2);
  padding: var(--sp-gap-2) var(--sp-gap-3);
  background: linear-gradient(150deg, var(--sp-bg), var(--sp-bg-2));
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-r-lg);
  box-shadow: var(--sp-e2);
  position: relative; overflow: hidden;
}
/* 顶部一道品牌渐隐高光，暗示"这是一个独立面板" */
.sp-member-bar::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--sp-brand-2), transparent);
  opacity: .8; pointer-events: none;
}
.sp-member-name {
  font-size: 15px; font-weight: 800; color: var(--sp-ink);
  letter-spacing: -.1px; display: inline-flex; align-items: center; gap: 7px;
}
/* 进度胶囊：数字等宽，跳动时不抖 */
.sp-prog {
  font-size: 12px; font-weight: 800; color: var(--sp-brand-deep);
  background: var(--sp-brand-tint);
  border: 1px solid var(--sp-brand-line, var(--v-200, var(--brand-5)));
  padding: 4px 11px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

/* ---------- 操作按钮：三级反馈 ---------- */
.sp-act {
  border: 1px solid var(--sp-line); background: var(--sp-bg); color: var(--sp-ink-2);
  font-size: 12px; font-weight: 700; padding: 6px 13px; border-radius: var(--sp-r-sm);
  cursor: pointer; font-family: inherit;
  box-shadow: var(--sp-e1);
  transition: color .18s, border-color .18s, background-color .18s,
              box-shadow .18s, transform .18s var(--ease-out, ease);
}
.sp-act:hover {
  border-color: var(--sp-brand); color: var(--sp-brand-deep);
  background: var(--sp-brand-tint);
  box-shadow: 0 4px 12px -6px rgba(5, 150, 105, .42);
  transform: translateY(-1px);
}
.sp-act:active { transform: translateY(0) scale(.97); }
.sp-act.danger { color: var(--s-red-700); }
.sp-act.danger:hover {
  border-color: var(--s-red-300); color: var(--s-red-700);
  background: var(--s-red-50);
  box-shadow: 0 4px 12px -6px rgba(220, 38, 38, .34);
}
.sp-act.primary {
  background: linear-gradient(140deg, var(--sp-brand-2), var(--sp-brand));
  border-color: transparent; color: var(--sp-bg);
  box-shadow: 0 3px 10px -3px rgba(5, 150, 105, .50);
}
.sp-act.primary:hover {
  background: linear-gradient(140deg, var(--sp-brand), var(--sp-brand-deep));
  color: var(--sp-bg);
  box-shadow: 0 6px 16px -5px rgba(5, 150, 105, .58);
}
.sp-act.primary { background: var(--sp-brand); border-color: var(--sp-brand); color: var(--sp-bg); }
.sp-act.primary:hover { background: var(--sp-brand-deep); color: var(--sp-bg); }

/* ---------- 结果对比弹层 ---------- */
/* 遮罩：加深到 72% 并叠一层极淡压暗，确保底层页面文字"透"不出来。
   原 55% 在浅色页面上会让底层标题/按钮与面板文字互相干扰（截图症状）。 */
.sp-cmask {
  position: fixed; inset: 0; z-index: 900;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(6, 95, 70, .52), transparent 62%),
    rgba(4, 20, 15, .72);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: spFade .2s ease-out;
}
/* 面板：不透明表面 + 发丝边 + 顶部安全区，视觉上"浮起"而非"贴着" */
.sp-csheet {
  background: var(--sp-bg);
  border: 1px solid var(--sp-line);
  border-bottom: none;
  border-radius: var(--sp-r-xl) var(--sp-r-xl) 0 0;
  width: 100%; max-width: 720px;
  max-height: 88vh; overflow-y: auto;
  padding: var(--sp-gap-3) var(--sp-gap-3) calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 8px rgba(6, 95, 70, .10),
              0 -18px 48px rgba(4, 20, 15, .40);
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  /* 顶部一道高光，暗示面板厚度 */
  position: relative;
}
.sp-csheet::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sp-brand-2), transparent);
  opacity: .55; pointer-events: none;
}
.sp-csheet > * { position: relative; }
@media (min-width: 640px) {
  .sp-cmask { align-items: center; padding: 20px; }
  .sp-csheet { border-radius: var(--sp-r-xl); border-bottom: 1px solid var(--sp-line); }
}
/* ============================================================
   对比层（sp-c*）—— 牌阵结果对比弹层
   ------------------------------------------------------------
   可读性要点：
     · 面板底用不透明表面色，确保与底层页面完全隔离；
     · 遮罩加深，避免底层文字"透"上来干扰阅读；
     · 四型卡与 AB 徽标用「浅底 + 深字」，保证数字在手机屏可读；
     · 层级靠投影与发丝边，不用粗描边。
   ============================================================ */
.sp-chead { position: sticky; top: 0; z-index: 10; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-gap-2); background: var(--sp-bg); padding: 2px 0 10px; margin: -2px 0 -4px; }
.sp-chead-act { display: flex; align-items: center; gap: 8px; flex: none; }
.sp-cexport {
  flex: none; border: 1px solid var(--sp-row2-line); background: var(--sp-row2-bg); color: var(--sp-brand);
  font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: .15s;
}
.sp-cexport:active { transform: scale(.96); }
.sp-chead b { font-size: 15px; font-weight: 800; color: var(--sp-ink); letter-spacing: -.1px; }
.sp-chead span { display: block; font-size: 11.5px; color: var(--sp-ink-2); margin-top: 3px; }
.sp-cclose {
  flex-shrink: 0; width: 32px; height: 32px; border: 1px solid var(--sp-line); border-radius: 10px;
  background: var(--sp-bg-2); color: var(--sp-ink-2); font-size: 17px; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--sp-e1);
  transition: background-color .18s, color .18s, transform .18s var(--ease-out, ease);
}
.sp-cclose:hover { background: var(--sp-line); color: var(--sp-ink); transform: scale(1.06); }
.sp-cclose:active { transform: scale(.94); }

/* 分区标题（信息层级：01 牌阵对照 / 02 关系洞察 / 03 深度支持） */
.sp-csec-title { display: flex; align-items: center; gap: 8px; margin: 20px 0 10px; font-size: 13.5px; font-weight: 800; color: var(--sp-ink); }
.sp-csec-title i { font-style: normal; width: 21px; height: 21px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: var(--c-surface); background: linear-gradient(135deg, var(--brand-2), #0A5540); box-shadow: 0 2px 6px -2px rgba(5, 150, 105, .5); flex: none; }
.sp-csec-title span { font-size: 11px; color: var(--sp-ink-3); font-weight: 500; margin-left: auto; }

/* ============ 板块① 牌阵基本情况 ============ */
.sp-cov-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--sp-r-md);
  background: var(--sp-bg-2); border: 1px solid var(--sp-line); margin-bottom: 10px;
}
.sp-cov-scene {
  font-size: 12px; font-weight: 800; color: var(--sp-brand-deep);
  background: var(--sp-brand-tint); padding: 3px 10px; border-radius: 999px;
}
.sp-cov-meta > span:last-child { font-size: 11.5px; color: var(--sp-ink-2); }
.sp-cmembers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-cmember {
  border: 1px solid var(--sp-line); border-radius: var(--sp-r-md);
  background: var(--sp-bg-2); padding: 12px; min-width: 0;
}
.sp-cmember-top { display: flex; align-items: center; gap: 7px; }
.sp-cmember-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px rgba(5, 150, 105, .12); }
.sp-cmember-top b { font-size: 13px; font-weight: 800; color: var(--sp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-cmember-type { font-size: 10.5px; font-weight: 800; margin-left: auto; flex: none; }
.sp-cmember-traits { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.sp-cmember-traits em {
  font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--sp-ink-2);
  background: var(--sp-bg); border: 1px solid var(--sp-line); padding: 3px 8px; border-radius: 7px;
}

/* ============ 板块③ 具体情况 · 建议方向 ============ */
.sp-cprofile {
  position: relative; border: 1px solid var(--sp-line); border-radius: var(--sp-r-md);
  background: var(--sp-bg-2); padding: 14px 14px 13px 16px; margin-bottom: 10px; overflow: hidden;
}
.sp-cprofile::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--brand-2), #0A5540);
}
.sp-cprofile-h { display: flex; align-items: center; gap: 7px; }
.sp-cprofile-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sp-cprofile-h b { font-size: 14px; font-weight: 800; color: var(--sp-ink); }
.sp-cprofile-h span { font-size: 11px; font-weight: 800; margin-left: auto; }
.sp-cprofile-sum { font-size: 13px; line-height: 1.7; color: var(--sp-ink); margin: 9px 0 0; }
.sp-cprofile-traits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sp-cprofile-traits span {
  font-size: 11px; font-weight: 700; color: var(--sp-brand-deep);
  background: var(--sp-brand-tint); border: 1px solid var(--brand-5); padding: 4px 10px; border-radius: 8px;
}
.sp-cprofile-sug { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--sp-line); }
.sp-cprofile-sug b { display: block; font-size: 12px; font-weight: 800; color: var(--sp-ink-2); margin-bottom: 7px; }
.sp-cprofile-sug ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sp-cprofile-sug li {
  position: relative; padding-left: 22px; font-size: 12.5px; line-height: 1.55; color: var(--sp-ink);
}
.sp-cprofile-sug li::before {
  content: '✓'; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--sp-brand-tint); color: var(--sp-brand-deep); font-size: 9px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}

/* 对比层顶部的洞察条：暖色系，与页内 .sp-compare 同一视觉语言 */
.sp-cbrief {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: var(--sp-gap-3) 0;
  padding: 9px 10px;
  background: linear-gradient(150deg, var(--s-amber-50), var(--s-amber-25));
  border: 1px solid var(--s-amber-200); border-radius: var(--sp-r-md);
  box-shadow: var(--sp-e1);
}
/* 弹层内速览项 chip 化：白底胶囊 + 类型色圆点，成员名与主导型一眼分项 */
.sp-cbrief .sp-cmp-item {
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--s-amber-200); border-radius: 999px;
  padding: 3px 10px 3px 8px;
}

/* 成员对比卡：auto-fit 自适应列数 —— 2 人并排两列、3 人自动三列，
   消除奇数成员时「孤卡 + 右侧大片空白」的失衡观感 */
.sp-ccols { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: var(--sp-gap-2); }
.sp-ccol {
  border: 1px solid var(--sp-line); border-radius: var(--sp-r-md);
  overflow: hidden; background: var(--sp-bg); min-width: 0;
  box-shadow: var(--sp-e1);
}
/* 栏头：成员色实底 + 白字（色底对比度已由 JS 内联色保证为深色） */
.sp-ccol-h {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 9px 11px; color: var(--c-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.sp-ccol-h b { font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-ccol-h span {
  font-size: 10px; font-weight: 800; white-space: nowrap; flex-shrink: 0;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .24);
  font-variant-numeric: tabular-nums;
}

/* 四型格 */
.sp-cct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: var(--sp-gap-1); }
.sp-cct {
  border: 1px solid var(--sp-line); border-radius: var(--sp-r-sm);
  padding: 7px 6px; background: var(--sp-bg-2); text-align: center;
  transition: border-color .2s, box-shadow .2s;
}
.sp-cct b { display: block; font-size: 10px; font-weight: 800; color: var(--sp-ink-2); margin-bottom: 2px; }
.sp-cct i {
  font-style: normal; font-size: 14px; font-weight: 900; letter-spacing: .2px;
  color: var(--sp-ink); font-variant-numeric: tabular-nums;
}
.sp-cct.dom {
  border-color: var(--sp-brand);
  background: var(--sp-brand-tint);
  box-shadow: 0 0 0 1px var(--sp-brand), 0 3px 10px -4px rgba(5, 150, 105, .40);
}
.sp-cct.dom b { color: var(--sp-brand-deep); }
/* 数字格内能量条：正分占比（positive/15） */
.sp-cct-bar { height: 4px; border-radius: 999px; background: rgba(15, 23, 42, .08); margin-top: 5px; overflow: hidden; }
.sp-cct-bar span { display: block; height: 100%; border-radius: 999px; transition: width .3s var(--ease-out, ease); }

/* 摆牌还原：每人一块，三排 × 5 张卡名（通栏区，跟在成员得分卡之后） */
.sp-cgx-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-gap-2); margin-top: var(--sp-gap-2); }
.sp-cgx {
  border: 1px solid var(--sp-line); border-radius: var(--sp-r-md);
  padding: 9px 10px 6px; background: var(--sp-bg-2); min-width: 0;
}
.sp-cgx-h { font-size: 11.5px; font-weight: 800; color: var(--sp-ink); margin-bottom: 5px; }
.sp-cgx-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.sp-cgx-rl { flex-shrink: 0; width: 42px; font-size: 9.5px; font-weight: 700; color: var(--sp-ink-2); }
.sp-cgx-cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; flex: 1; min-width: 0; }
.sp-cgx-cell {
  font-size: 9px; font-weight: 700; text-align: center; padding: 4px 1px;
  border: 1px solid var(--sp-line); border-radius: 6px; background: var(--sp-bg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sp-ink-2);
}
@media (max-width: 420px) {
  .sp-cgx-wrap { grid-template-columns: 1fr; }
}

/* ============================================================
   结果对比重构：每人一张完整分析卡（得分 + AB + 摆牌合一）
   —— 不再「得分一块 / 摆牌一块」割裂；卡牌全名展示不截断；
      行首三排语义色条无声区分（最符合 / 比较符合 / 最不符合）
   ============================================================ */
.sp-ccols-full { grid-template-columns: 1fr 1fr; }
.sp-ccols-full .sp-cempty { border-style: dashed; background: transparent; box-shadow: none; }
.sp-ccols-full .sp-ccol { display: flex; flex-direction: column; }
.sp-ccols-full .sp-cgx {
  margin: 0; border: none; border-radius: 0; padding: 10px 10px 8px; background: transparent;
}
.sp-ccols-full .sp-cgx-row { position: relative; padding-left: 8px; margin: 0 0 4px; }
.sp-ccols-full .sp-cgx-row:last-child { margin-bottom: 0; }
.sp-ccols-full .sp-cgx-row::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 2px;
}
.sp-ccols-full .sp-cgx-row[data-row="1"]::before { background: var(--s-amber-700); }
.sp-ccols-full .sp-cgx-row[data-row="2"]::before { background: var(--brand-2); }
.sp-ccols-full .sp-cgx-row[data-row="3"]::before { background: var(--s-teal-700); }
.sp-ccols-full .sp-cgx-cells { gap: 4px; }
.sp-ccols-full .sp-cgx-cell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 5px 3px; border-radius: 8px;
  font-size: 10.5px; font-weight: 700; line-height: 1.3;
  white-space: normal; word-break: break-all; overflow: visible;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}
/* 共性（同位同牌）：品牌色加粗边框标识，不占牌面 */
.sp-ccols-full .sp-cgx-cell.same { border-width: 2px; border-color: var(--sp-brand) !important; box-shadow: 0 0 0 2px var(--sp-brand-tint); }
/* 图例 */
.sp-legend { font-style: normal; display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--sp-brand); color: var(--c-surface); font-size: 10px; font-weight: 900; text-align: center; line-height: 14px; margin: 0 2px; vertical-align: middle; }

/* 测算结果（2×2）+ AB（2列）融合模块：与卡牌区同宽对齐，融合成一整体 */
.sp-cres { padding: 0 10px 10px; }
.sp-cres .sp-cct-grid { padding: 0; gap: 8px; }
.sp-cres .sp-cct-ab { padding: 8px 0 0; }
.sp-cct { position: relative; }
/* 主导角标（四型卡右上） */
.sp-cdom { position: absolute; top: 6px; right: 8px; font-style: normal; font-size: 9px; font-weight: 900; color: var(--v-700); background: var(--v-100); padding: 1px 7px; border-radius: 999px; }
/* 移动端对比：保留「一行两人同位对照」不降单列，仅紧凑适配（对比价值优先于绝对可读性） */
@media (max-width: 640px) {
  .sp-ccols-full { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sp-ccols-full .sp-cgx { padding: 8px 8px 6px; }
  .sp-ccols-full .sp-cgx-row { padding-left: 6px; margin: 0 0 3px; }
  .sp-ccols-full .sp-cgx-row::before { top: 3px; bottom: 3px; width: 2px; }
  .sp-ccols-full .sp-cgx-cells { gap: 3px; }
  .sp-ccols-full .sp-cgx-cell { min-height: 32px; padding: 3px 2px; font-size: 9px; border-radius: 6px; line-height: 1.2; }
  .sp-cres { padding: 0 8px 8px; }
  .sp-cres .sp-cct-grid { gap: 4px; }
  .sp-cres .sp-cct-ab { padding: 6px 0 0; gap: 4px; }
  .sp-cct { padding: 5px 3px; }
  .sp-cct b { font-size: 9px; }
  .sp-cct i { font-size: 12px; }
  .sp-cct-ab span { font-size: 11px; padding: 4px 0 5px; }
  .sp-cct-ab em { font-size: 8.5px; }
  .sp-cdom { font-size: 8px; top: 3px; right: 4px; padding: 1px 5px; }
  .sp-cmembers { grid-template-columns: 1fr; gap: 8px; }
  .sp-cmember { padding: 10px 12px; }
  .sp-cprofile { padding: 12px 12px 12px 14px; }
  .sp-cprofile-sum { font-size: 12.5px; }
  .sp-cprofile-sug li { font-size: 12px; }
  .sp-csec-title { margin: 16px 0 9px; }
}

/* 全部组合解读：第 2 组起的紧凑卡（第 1 组沿用大卡 sp-rel） */
.sp-relx-sec { margin-top: 10px; }
.sp-relx-title { font-size: 12.5px; font-weight: 800; color: var(--sp-ink); margin-bottom: 8px; }
.sp-relx-list { display: grid; gap: 8px; }
.sp-relx {
  border: 1px solid var(--brand-5); border-radius: 12px; padding: 10px 12px;
  background: linear-gradient(135deg, var(--sp-brand-tint), var(--sp-brand-tint));
}
.sp-relx-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.sp-relx-h b { font-size: 12.5px; font-weight: 800; color: var(--sp-brand-deep); }
.sp-relx-h span { font-size: 10.5px; font-weight: 700; color: var(--sp-bg); background: var(--sp-brand); padding: 2px 9px; border-radius: 999px; }
.sp-relx p { font-size: 12px; color: var(--sp-ink); line-height: 1.65; margin: 6px 0 0; }
.sp-relx-tip { color: var(--s-amber-700); }

/* AB 计数徽标（意识层 / 潜意识层）：小标签 + 大数字两级排版 */
.sp-cct-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 var(--sp-gap-1) var(--sp-gap-1); }
.sp-cct-ab span {
  text-align: center; font-size: 13px; font-weight: 900;
  border-radius: var(--sp-r-sm); padding: 5px 0 6px; letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.sp-cct-ab em {
  display: block; font-style: normal; font-size: 9.5px; font-weight: 800;
  opacity: .72; letter-spacing: .5px; margin-bottom: 1px;
}
.sp-cct-ab .a { background: var(--v-25); color: var(--s-green-700); border-color: var(--s-green-200); }
.sp-cct-ab .b { background: var(--s-red-50); color: var(--s-red-700); border-color: var(--s-red-200); }
@keyframes spFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 深度解读关系（在线咨询师 / 倾听师） ---------- */
.sp-pros { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sp-line); }
.sp-pros-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.sp-pros-h b { font-size: 14.5px; font-weight: 800; color: var(--sp-ink); }
.sp-pros-h span { font-size: 11.5px; color: var(--sp-ink-3); }
.sp-pros-load { padding: 18px 0; text-align: center; color: var(--sp-ink-3); font-size: 12.5px; }
.sp-pros-sec + .sp-pros-sec { margin-top: 14px; }
.sp-pros-sec-h { font-size: 12.5px; font-weight: 800; color: var(--sp-ink-2); margin-bottom: 9px; }
.sp-pros-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.sp-pro {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  border: 1px solid var(--sp-line); border-radius: 12px; padding: 10px; background: var(--sp-bg);
  cursor: pointer; transition: .15s; min-width: 0;
}
.sp-pro:hover { border-color: var(--brand-5); box-shadow: 0 4px 14px rgba(6, 95, 70, .06); }
.sp-pro-ava {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; background: var(--sp-brand-tint);
  display: flex; align-items: center; justify-content: center; font-size: 20px; overflow: hidden;
}
.sp-pro-ava img { width: 100%; height: 100%; object-fit: cover; }
.sp-pro-main { flex: 1; min-width: 0; }
.sp-pro-name { font-size: 13px; font-weight: 800; color: var(--sp-ink); display: flex; align-items: center; gap: 5px; }
.sp-pro-tag {
  font-size: 9.5px; font-weight: 700; color: var(--sp-brand); background: var(--sp-brand-tint);
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
}
.sp-pro-title { font-size: 11px; color: var(--sp-ink-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-pro-meta { font-size: 10.5px; color: var(--sp-ink-3); margin-top: 3px; }
.sp-pro-meta i { font-style: normal; }
.sp-pro-meta i.on { color: var(--s-green-600); font-weight: 700; }
.sp-pro-btn {
  flex-shrink: 0; border: none; background: linear-gradient(135deg, var(--sp-brand-2), var(--sp-brand));
  color: var(--sp-bg); font-size: 11px; font-weight: 800; padding: 7px 13px; border-radius: 8px; cursor: pointer;
}

/* ---------- 引导语 + 推荐课程 ---------- */
.sp-guide {
  margin-bottom: 14px; padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(135deg, var(--sp-brand-tint), var(--sp-brand-tint)); border: 1px solid var(--brand-5);
  color: var(--sp-brand-deep); font-size: 13px; line-height: 1.7; font-weight: 600;
}
.sp-pros-sec-sub { font-weight: 400; color: var(--sp-ink-3); font-size: 11px; margin-left: 2px; }
.sp-courses { display: grid; grid-template-columns: 1fr; gap: 8px; }
.sp-course {
  display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--sp-line); border-radius: 12px;
  padding: 10px; background: var(--sp-bg); cursor: pointer; transition: .15s; min-width: 0;
}
.sp-course:hover { border-color: var(--brand-5); box-shadow: 0 4px 14px rgba(6, 95, 70, .06); }
.sp-course-name {
  font-size: 12.5px; font-weight: 800; color: var(--sp-ink); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-course-sub { font-size: 10.5px; color: var(--sp-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-course-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }
.sp-course-price { font-size: 14px; font-weight: 900; color: var(--brand-orange); }
.sp-course-free { font-size: 12px; font-weight: 800; color: var(--s-green-600); }
.sp-course-btn {
  font-size: 10.5px; font-weight: 800; color: var(--sp-bg); background: linear-gradient(135deg, var(--sp-brand-2), var(--sp-brand));
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}

/* ---------- 三排语义底色分区（优势层=暖金 / 潜意识层=冷绿） ---------- */
.sp-row[data-row="1"] .sp-slot:not(.filled) { background: var(--s-amber-25); border-color: #fed7aa; }
.sp-row[data-row="3"] .sp-slot:not(.filled) { background: var(--sp-brand-tint); border-color: var(--brand-5); }

/* ---------- 关系解读卡片 ---------- */
.sp-rel {
  margin: 12px 0; padding: 14px; border-radius: 14px;
  background: linear-gradient(135deg, var(--sp-brand-tint), var(--sp-brand-tint));
  border: 1px solid var(--brand-5);
}
.sp-rel-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.sp-rel-ico { font-size: 22px; line-height: 1; }
.sp-rel-main { flex: 1; min-width: 0; }
.sp-rel-main b { font-size: 14px; font-weight: 800; color: var(--sp-brand-deep); display: block; }
.sp-rel-tags { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.sp-rel-tags i { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--sp-bg); padding: 2px 9px; border-radius: 999px; }
.sp-rel-btn {
  flex-shrink: 0; border: 1.5px solid var(--sp-brand-2); background: var(--sp-bg); color: var(--sp-brand-deep);
  font-size: 11px; font-weight: 800; padding: 6px 11px; border-radius: 9px; cursor: pointer; white-space: nowrap;
  font-family: inherit;
}
.sp-rel-btn:active { transform: scale(.96); }
/* 窄屏：两个按钮成对整行铺满，不再与标题抢一行 */
@media (max-width: 430px) {
  .sp-rel-head .sp-rel-btn { flex: 1 1 calc(50% - 5px); text-align: center; padding: 8px 0; margin-left: auto; }
}
.sp-rel-desc { font-size: 13px; color: var(--sp-ink); line-height: 1.7; margin: 10px 0 4px; }
.sp-rel-tip { font-size: 12px; color: var(--s-amber-700); line-height: 1.7; margin: 0; }

/* ---------- 轻提示（放牌归属 / 完成庆祝） ---------- */
.sp-toast {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%) translateY(-10px);
  background: rgba(6, 95, 70, .95); color: var(--sp-bg); padding: 9px 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; z-index: 950; opacity: 0; pointer-events: none;
  transition: .3s; max-width: 86%; text-align: center; box-shadow: 0 8px 24px rgba(6, 95, 70, .3);
}
.sp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sp-toast.celebrate { background: linear-gradient(135deg, var(--brand-amber), var(--brand-orange)); }

/* ============================================================
   5. 牌库区 —— 次级分区（材料来源）
   定位：相比舞台弱一档（表面更轻、投影更浅），保持主次分明。
   ============================================================ */
.sp-lib-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-gap-2);
  margin: var(--sp-gap-4) 0 var(--sp-gap-2);
}
.sp-lib-head .sp-lib-t { margin: 0; }
.sp-lib-mode {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--sp-line); background: var(--sp-bg); color: var(--sp-ink-2);
  font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  box-shadow: var(--sp-e1);
  transition: color .2s, border-color .2s, background-color .2s, box-shadow .2s, transform .2s var(--ease-out, ease);
}
.sp-lib-mode .sp-ico { width: 13px; height: 13px; }
.sp-lib-mode:hover { color: var(--sp-brand-deep); border-color: var(--sp-brand); transform: translateY(-1px); }
.sp-lib-mode.manual {
  background: var(--sp-brand-tint); border-color: var(--sp-brand); color: var(--sp-brand-deep);
  box-shadow: 0 3px 10px -4px rgba(5, 150, 105, .40);
}

/* 已选中卡牌提示：蓝色信息条，与主品牌色区分，避免误读为"可点击主操作" */
.sp-selhint {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 var(--sp-gap-2); padding: 9px var(--sp-gap-3); border-radius: var(--sp-r-md);
  background: linear-gradient(150deg, var(--s-blue-50), #F5F9FF);
  border: 1px solid #BFDBFE; color: var(--s-blue-800);
  font-size: 12px; font-weight: 700; line-height: 1.5;
  box-shadow: var(--sp-e1);
  animation: spFadeUp .28s ease both;
}

/* ---------- 首次使用引导 ---------- */
.sp-guide-mask {
  position: fixed; inset: 0; background: rgba(6, 95, 70, .6); z-index: 960;
  display: flex; align-items: center; justify-content: center; padding: 24px; animation: spFade .2s;
}
.sp-guide-card { background: var(--sp-bg); border-radius: 20px; padding: 24px 20px; max-width: 340px; width: 100%; box-shadow: 0 20px 50px rgba(6, 95, 70, .3); }
.sp-guide-t { font-size: 18px; font-weight: 900; color: var(--sp-brand-deep); }
.sp-guide-sub { font-size: 12.5px; color: var(--sp-ink-2); margin: 6px 0 16px; line-height: 1.6; }
.sp-guide-step { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--sp-line); }
.sp-guide-step b { flex-shrink: 0; font-size: 13px; color: var(--sp-brand); }
.sp-guide-step span { font-size: 12.5px; color: var(--sp-ink-2); line-height: 1.5; }
.sp-guide-btn {
  width: 100%; margin-top: 16px; border: none; background: linear-gradient(135deg, var(--sp-brand-2), var(--sp-brand));
  color: var(--sp-bg); font-size: 14px; font-weight: 800; padding: 12px; border-radius: 12px; cursor: pointer; font-family: inherit;
}

/* ---------- 摆牌网格 ---------- */
/* ============================================================
   3. 摆牌舞台 —— 三排卡槽（核心交互区）
   ------------------------------------------------------------
   材质表达：空牌位是「凹陷卡槽」（inset 阴影，视觉上凹进去）；
           放入的卡「浮起」（外投影 + 顶部高光），形成清晰的
           放置反馈与前后关系。三排用左侧语义轨标区分
           （暖=优势层 / 中性 / 冷=潜意识层）。
   ============================================================ */
.sp-grid { display: flex; flex-direction: column; gap: 2px; }

/* 行标签做成「轨标」：与下方牌位同色系，建立语义分区 */
.sp-rowlabel {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--sp-ink-3); font-weight: 700;
  margin-top: var(--sp-gap-3); letter-spacing: .2px;
}
.sp-rowlabel::before {
  content: ''; width: 3px; height: 13px; border-radius: 2px; flex: none;
  background: var(--sp-rail, var(--sp-brand));
  box-shadow: 0 0 6px -1px var(--sp-rail, var(--sp-brand));
}
/* 行标签与牌位靠"负间距 + 同色"视觉绑定成一组 */
.sp-grid > .sp-rowlabel:nth-child(1),     /* 第一排 */
.sp-grid > .sp-rowlabel:nth-child(3),     /* 第二排 */
.sp-grid > .sp-rowlabel:nth-child(5) {    /* 第三排 */
  margin-bottom: 7px;
}
.sp-grid > .sp-rowlabel:nth-child(1)::before { --sp-rail: var(--sp-row1); background: var(--sp-row1); box-shadow: 0 0 6px -1px var(--sp-row1); }
.sp-grid > .sp-rowlabel:nth-child(3)::before { --sp-rail: var(--sp-row2); background: var(--sp-row2); box-shadow: 0 0 6px -1px var(--sp-row2); }
.sp-grid > .sp-rowlabel:nth-child(5)::before { --sp-rail: var(--sp-row3); background: var(--sp-row3); box-shadow: 0 0 6px -1px var(--sp-row3); }

.sp-row { display: flex; gap: var(--sp-gap-1); }

/* —— 牌位：凹陷卡槽 —— */
.sp-slot {
  flex: 1; height: 58px;
  border: 1.5px dashed var(--sp-slot-line, var(--n-300));
  border-radius: var(--sp-r-md);
  background: var(--sp-slot-bg, var(--sp-bg-2));
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  /* 凹陷：上缘暗影 + 下缘亮边 */
  box-shadow: inset 0 2px 5px rgba(15, 45, 35, .07);
  transition: border-color .22s var(--ease-out, ease), background-color .22s,
              box-shadow .22s, transform .22s var(--ease-out, ease);
}
.sp-slot::before {
  content: '＋'; color: var(--sp-slot-plus, var(--n-300));
  font-size: 17px; line-height: 1;
  transition: color .22s, opacity .22s, transform .22s var(--ease-out, ease);
}
.sp-slot:hover {
  border-color: var(--sp-brand);
  background: var(--sp-brand-tint);
  box-shadow: inset 0 1px 3px rgba(15, 45, 35, .05),
              0 0 0 3px color-mix(in srgb, var(--sp-brand) 12%, transparent);
}
.sp-slot:hover::before { color: var(--sp-brand); transform: scale(1.12); }

/* —— 已放置：卡浮起 —— */
.sp-slot.filled {
  border-style: solid;
  border-color: var(--sp-line);
  background: var(--sp-bg);
  box-shadow: var(--sp-e2);
  animation: spSeatIn .34s cubic-bezier(.34, 1.56, .64, 1);
}
.sp-slot.filled::before { content: none; }
@keyframes spSeatIn { 0% { transform: scale(.9) translateY(4px); opacity: .4; } 100% { transform: none; opacity: 1; } }
/* 原有 .just 动画保留 */
.sp-slot.just .sp-card { animation: spDrop .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes spDrop { 0% { transform: scale(.55); opacity: .3; } 100% { transform: scale(1); opacity: 1; } }

/* 三排语义底色（优势层暖金 / 中性 / 潜意识层冷绿）
   「＋」号取各排语义主色本身 —— 实测亮色 4.84~5.25:1，
   此前用浅淡色（1.55:1）导致空牌位几乎看不出可放置。 */
.sp-row[data-row="1"] { --sp-slot-bg: var(--sp-row1-bg); --sp-slot-line: var(--sp-row1-line); --sp-slot-plus: var(--s-amber-700); }
.sp-row[data-row="2"] { --sp-slot-bg: var(--sp-row2-bg); --sp-slot-line: var(--sp-row2-line); --sp-slot-plus: var(--v-700); }
.sp-row[data-row="3"] { --sp-slot-bg: var(--sp-row3-bg); --sp-slot-line: var(--sp-row3-line); --sp-slot-plus: var(--s-teal-700); }

/* ============================================================
   4. 卡牌材质 —— 彩色书脊 + 顶面高光
   ============================================================ */
.sp-card {
  width: 100%; height: 100%; border-radius: var(--sp-r-sm);
  display: flex; align-items: center;
  justify-content: center; cursor: pointer; user-select: none;
  font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center;
  padding: 4px 4px 4px 9px; box-sizing: border-box;
  word-break: break-all;
  position: relative; overflow: hidden;
  transition: transform .2s var(--ease-out, ease), box-shadow .2s;
}
/* 左侧彩色书脊：用 ::before 承载颜色，避免额外 DOM */
.sp-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--sp-card-spine, transparent);
  border-radius: var(--sp-r-sm) 0 0 var(--sp-r-sm);
}
.sp-card.yellow { color: var(--s-amber-800); --sp-card-spine: var(--brand-amber); }
.sp-card.blue { color: var(--s-blue-800); --sp-card-spine: var(--c-info); }
.sp-card.red { color: var(--s-red-800); --sp-card-spine: var(--s-red-500); }
.sp-card.green { color: var(--s-green-800); --sp-card-spine: var(--s-green-500); }

/* 牌库卡：白卡面 + 书脊 + 接触影，悬浮时抬升 */
.sp-card.lib {
  height: 48px; border: 1px solid var(--sp-line); background: var(--sp-bg);
  box-shadow: var(--sp-e1), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.sp-card.lib:hover {
  transform: translateY(-2px);
  box-shadow: var(--sp-e3), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.sp-card.lib:active { transform: translateY(0) scale(.97); }
/* 牌库卡的边框与书脊同色，保持色彩识别 */
.sp-card.lib.yellow { border-color: color-mix(in srgb, var(--brand-amber) 34%, var(--sp-line)); }
.sp-card.lib.blue { border-color: color-mix(in srgb, var(--c-info) 34%, var(--sp-line)); }
.sp-card.lib.red { border-color: color-mix(in srgb, var(--s-red-500) 34%, var(--sp-line)); }
.sp-card.lib.green { border-color: color-mix(in srgb, var(--s-green-500) 34%, var(--sp-line)); }

/* 已放置的卡：底色随四型淡染，与书脊呼应 */
.sp-card.in { border: 1px solid var(--sp-line); }
.sp-card.in.yellow { background: color-mix(in srgb, var(--brand-amber) 8%, var(--sp-bg)); }
.sp-card.in.blue { background: color-mix(in srgb, var(--c-info) 8%, var(--sp-bg)); }
.sp-card.in.red { background: color-mix(in srgb, var(--s-red-500) 8%, var(--sp-bg)); }
.sp-card.in.green { background: color-mix(in srgb, var(--s-green-500) 8%, var(--sp-bg)); }

/* ---------- 提示 / 结果开关 ---------- */
/* ---------- 舞台提示条：引导语（低调，不抢牌位） ---------- */
.sp-hint {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: var(--sp-gap-3); padding: 11px var(--sp-gap-3); border-radius: var(--sp-r-md);
  background: var(--sp-bg-2); border: 1px dashed var(--sp-line);
  color: var(--sp-ink-3); font-size: 12px; line-height: 1.7;
}
/* 左侧信息图标（纯 CSS，无需额外 DOM） */
.sp-hint::before {
  content: ''; flex: none; width: 14px; height: 14px; margin-top: 2px;
  border-radius: 50%; border: 1.5px solid currentColor; opacity: .5;
  background:
    linear-gradient(transparent, transparent) padding-box,
    radial-gradient(circle at 50% 62%, currentColor 1px, transparent 1.2px) border-box;
}

/* ---------- 主 CTA：查看结果 ---------- */
.sp-showbtn {
  width: 100%; margin-top: var(--sp-gap-3);
  border: none; background: linear-gradient(140deg, var(--sp-brand-2), var(--sp-brand) 60%, var(--sp-brand-deep));
  color: var(--sp-bg); font-weight: 800; font-size: 13.5px; letter-spacing: .3px;
  padding: 13px; border-radius: var(--sp-r-md);
  cursor: pointer; font-family: inherit;
  box-shadow: 0 4px 14px -5px rgba(5, 150, 105, .55), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .2s var(--ease-out, ease), box-shadow .2s, filter .2s;
}
.sp-showbtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -7px rgba(5, 150, 105, .62), inset 0 1px 0 rgba(255, 255, 255, .34);
  filter: saturate(1.06);
}
.sp-showbtn:active { transform: translateY(0) scale(.985); }
.sp-result-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.sp-result-head b { font-size: 14px; font-weight: 800; color: var(--sp-ink); }

/* ---------- 结果面板 ---------- */
.sp-result { margin-top: 10px; }
.sp-traits { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.sp-chip {
  border: 1.5px solid var(--sp-line); background: var(--sp-bg); border-radius: 8px;
  font-size: 12px; font-weight: 700; padding: 5px 11px;
}
.sp-types { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; }
.sp-type {
  position: relative; border: 1.5px solid var(--sp-line); border-radius: 12px;
  padding: 12px 13px; background: var(--sp-bg); display: flex; flex-direction: column; gap: 4px;
  align-items: center; text-align: center;
}
.sp-type b { font-size: 13px; font-weight: 800; }
.sp-type i { font-style: normal; font-size: 24px; font-weight: 900; letter-spacing: .5px; }
.sp-type.dom { box-shadow: 0 0 0 2px rgba(16,185,129,.25); border-width: 2px; }
.sp-type-bar { width: 100%; height: 4px; border-radius: 99px; background: var(--n-100); overflow: hidden; margin-top: 2px; }
.sp-type-bar span { display: block; height: 100%; border-radius: 99px; transition: width .4s ease; }
.sp-result { animation: spFadeUp .4s ease; }
@keyframes spFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sp-dom {
  position: absolute; top: -9px; right: 8px; font-style: normal; font-size: 10px;
  font-weight: 800; color: var(--sp-bg); background: linear-gradient(135deg, var(--brand-amber), var(--brand-orange));
  padding: 2px 9px; border-radius: 999px; box-shadow: 0 2px 6px rgba(249, 115, 22, .35);
}
.sp-abrow { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.sp-ab { border-radius: 12px; padding: 12px 14px; text-align: center; }
.sp-ab b { display: block; font-size: 22px; font-weight: 900; letter-spacing: .5px; }
.sp-ab1 { background: var(--v-25); border: 1px solid var(--s-green-200); }
.sp-ab1 b { color: var(--s-green-600); }
.sp-ab2 { background: var(--s-red-50); border: 1px solid var(--s-red-200); }
.sp-ab2 b { color: var(--s-red-600); }

/* ---------- 牌库（按颜色分组，每色一行固定 6 张） ---------- */
/* ---------- 牌库网格：轻于舞台，保持主次 ---------- */
.sp-lib-t {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--sp-ink-2); font-weight: 700;
  margin: var(--sp-gap-4) 0 var(--sp-gap-2); letter-spacing: .2px;
}
/* 标题前的数量徽标 */
.sp-lib-t::before {
  content: ''; width: 3px; height: 13px; border-radius: 2px; flex: none;
  background: linear-gradient(180deg, var(--sp-brand-2), var(--sp-brand));
}
.sp-lib { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-gap-1); }
.sp-lib .sp-card { height: 48px; }
.sp-empty { padding: 60px 20px; text-align: center; color: var(--sp-ink-3); font-size: 13px; }

@media (max-width: 374px) {
  .sp-lib { gap: 6px; }
  .sp-slot { height: 50px; }
  .sp-card { font-size: 10px; padding-left: 8px; }
  .sp-scene-lb { font-size: 11.5px; }
  .sp-lib .sp-card { height: 44px; }
}

/* ============================================================
   6. 暗色适配 —— 令牌化的直接收益：只需覆写令牌，全模块自动跟随
   ============================================================ */
@media (prefers-color-scheme: dark) {
  #page-spread {
    /* 三排语义色：深底上用「暗底 + 亮字」，而非「亮底 + 深字」 */
    --sp-row1: #FCD34D; --sp-row1-bg: #2B220E; --sp-row1-line: #4A3A16;
    --sp-row2: var(--brand-4); --sp-row2-bg: #122A22; --sp-row2-line: #1F4A3C;
    --sp-row3: #7DD8FC; --sp-row3-bg: #0F2628; --sp-row3-line: #1B4048;

    /* 阴影在深底上要更深才有层次 */
    --sp-e1: 0 1px 2px rgba(0, 0, 0, .34);
    --sp-e2: 0 1px 2px rgba(0, 0, 0, .36), 0 4px 12px -6px rgba(0, 0, 0, .50);
    --sp-e3: 0 2px 4px rgba(0, 0, 0, .40), 0 10px 24px -10px rgba(0, 0, 0, .62);
  }
  /* 卡牌四型文字在深底上需提亮 */
  .sp-card.yellow { color: var(--s-amber-200); }
  .sp-card.blue { color: #BFDBFE; }
  .sp-card.red { color: var(--s-red-200); }
  .sp-card.green { color: var(--s-green-200); }
  .sp-card.lib { background: var(--sp-bg); box-shadow: var(--sp-e1), inset 0 1px 0 rgba(255, 255, 255, .06); }
  .sp-card.lib:hover { box-shadow: var(--sp-e3), inset 0 1px 0 rgba(255, 255, 255, .08); }
  .sp-card.in.yellow { background: rgba(245, 158, 11, .14); }
  .sp-card.in.blue { background: rgba(59, 130, 246, .14); }
  .sp-card.in.red { background: rgba(239, 68, 68, .14); }
  .sp-card.in.green { background: rgba(34, 197, 94, .14); }

  /* 牌位凹陷在深底上靠内阴影 + 极淡描边 */
  .sp-slot { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .40); }
  /* 暗色下「＋」号直接用各排亮语义色（实测 9.86~10.89:1）*/
  .sp-row[data-row="1"] { --sp-slot-plus: #FCD34D; }
  .sp-row[data-row="2"] { --sp-slot-plus: var(--brand-4); }
  .sp-row[data-row="3"] { --sp-slot-plus: #7DD8FC; }

  /* 场景选择器：深底上改为「外浮起」逻辑（亮底是凹槽，深底反过来） */
  .sp-scenes {
    background: var(--sp-bg-2);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .05),
      inset 0 -2px 5px rgba(0, 0, 0, .40),
      var(--sp-e2);
  }
  .sp-scene-ico {
    background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
    color: var(--sp-ink-2);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .10),
      0 2px 5px rgba(0, 0, 0, .40);
  }
  .sp-scene:hover .sp-scene-ico {
    color: var(--brand-4);
    background: linear-gradient(160deg, rgba(52, 211, 153, .18), rgba(52, 211, 153, .06));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .14),
      0 6px 16px -6px rgba(52, 211, 153, .50);
  }
  .sp-scene.active {
    color: var(--brand-5);
    background: linear-gradient(165deg, rgba(52, 211, 153, .20), rgba(52, 211, 153, .06));
    border-color: rgba(52, 211, 153, .42);
    box-shadow:
      0 6px 18px -8px rgba(52, 211, 153, .58),
      0 1px 2px rgba(0, 0, 0, .40),
      inset 0 1px 0 rgba(255, 255, 255, .14),
      inset 0 -1px 0 rgba(52, 211, 153, .28);
  }
  .sp-scene.active .sp-scene-ico {
    color: #022C22;
    background: linear-gradient(150deg, var(--brand-4) 0%, var(--brand-1) 58%, var(--brand-3) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .50),
      0 8px 20px -8px rgba(52, 211, 153, .70);
  }
  .sp-scene.active .sp-scene-glow {
    /* 深底上白色扫光会过亮，改用薄荷绿调 */
    background: linear-gradient(100deg,
      transparent 30%, rgba(167, 243, 208, .42) 50%, transparent 70%);
  }

  /* 半透明白改为半透明亮，模拟深底上的反光 */
  .sp-act, .sp-lib-mode, .sp-tab-dot {
    box-shadow: var(--sp-e1), inset 0 1px 0 rgba(255, 255, 255, .07);
  }
  .sp-prog { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
  .sp-tab-c { box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4); }

  /* 暖色区块改暗底 */
  .sp-compare { background: linear-gradient(150deg, #2B220E, #241C0C); border-color: #4A3A16; }
  .sp-cmp-h { color: #FCD34D; }
  .sp-cmp-h::before { background: linear-gradient(180deg, var(--brand-amber), #EA580C); }
  .sp-cmp-item i { box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
  .sp-selhint { background: linear-gradient(150deg, #16233D, #131E33); border-color: #1E3A5F; color: #93C5FD; }
  .sp-guide {
    background: linear-gradient(150deg, #122A22, #0F2019);
    border-color: #1F4A3C; color: var(--brand-4);
  }
  .sp-rel { background: linear-gradient(150deg, #122A22, #0F2019); border-color: #1F4A3C; }
  .sp-rel-main b { color: var(--brand-4); }
  .sp-rel-btn { background: var(--sp-bg); color: var(--brand-4); border-color: var(--brand-1); }
  .sp-ab1 { background: #0F2A1C; border-color: #1F4A3C; }
  .sp-ab1 b { color: var(--brand-4); }
  .sp-ab2 { background: #33191A; border-color: #5A2A2A; }
  .sp-ab2 b { color: var(--s-red-300); }
  .sp-toast { background: rgba(6, 95, 70, .96); }
}

/* ============================================================
   7. 降动效 —— 与全站一致
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sp-scene, .sp-tab, .sp-act, .sp-slot, .sp-slot::before,
  .sp-card, .sp-lib-mode, .sp-selhint, .sp-showbtn,
  .sp-scene-ico, .sp-scene-ico .sp-ico {
    transition: none !important;
    animation: none !important;
  }
  .sp-scene:hover, .sp-scene:active, .sp-tab:hover, .sp-act:hover,
  .sp-card.lib:hover, .sp-showbtn:hover, .sp-act.primary:hover,
  .sp-scene-ico, .sp-scene:hover .sp-scene-ico, .sp-scene.active .sp-scene-ico {
    transform: none !important;
  }
  .sp-slot.filled, .sp-slot.just .sp-card, .sp-selhint { animation: none !important; }
  /* 扫描高光静态保留一点亮度，不做动画 */
  .sp-scene.active .sp-scene-glow { animation: none !important; opacity: .3; }
}

/* ============================================================
   8. 舞台底纹 —— 克制的点阵科技感（仅舞台区，< 2% 不透明度）
   ============================================================ */
.sp-member-bar::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(16, 185, 129, .07) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, .7), transparent 62%);
          mask-image: linear-gradient(100deg, rgba(0, 0, 0, .7), transparent 62%);
}
.sp-member-bar > * { position: relative; z-index: 1; }

/* 算法版本标识（牌阵结果面板底部，标识本次测算使用的算法规则） */
.sp-algo-tag {
  margin-top: 10px; padding-top: 9px; text-align: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  color: var(--sp-ink-3);
  border-top: 1px dashed var(--sp-line);
}

/* ============================================================
   9.5 关系画像 PDF 版式（DOM + 原生打印）
   ------------------------------------------------------------
   设计要点：
     ① 用 flex/grid 排版（不是 canvas 手算坐标），不会失衡/溢出
     ② 白卡 + 左侧语义色竖条（取代满圈彩边），层级干净
     ③ 四型分数为横向条形，按该成员正分峰值归一，横向可比
     ④ 字号遵循字阶（27/44/30/24/20/17），层次分明
     ⑤ 总高适配 A4 一页（内容 ≈ 960px ≈ 254mm < 可用 277mm）
   打印隔离：@media print 仅显示 #relSheet，隐藏页面其余部分，
   并用 print-color-adjust:exact 保证底色/色条被真实打印（非「省墨模式」）。
   ============================================================ */
#relSheet { display: none; }

/* 屏幕预览态（点「保存 PDF」后由 JS 填充并唤起打印） */
.rel-page {
  width: 680px; margin: 0 auto; padding: 30px 28px 24px;
  box-sizing: border-box; background: #F6FBF8;
  border-top: 6px solid transparent;
  border-image: linear-gradient(90deg, #04291D, #0F3D2F 55%, var(--brand-2)) 1;
  color: #0F2A20;
}
.rel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid #E4EDE8; }
.rel-head-l b { display: block; font-size: 27px; font-weight: 800; color: var(--brand-deep); letter-spacing: .5px; }
.rel-head-l span { display: block; margin-top: 5px; font-size: 20px; color: var(--gray-3); }
.rel-head-tag {
  flex: none; padding: 9px 20px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-2), var(--brand-3)); color: var(--c-surface);
  font-size: 19px; font-weight: 700; letter-spacing: .5px; box-shadow: 0 6px 16px -8px rgba(5,150,105,.6);
}
.rel-title {
  margin: 26px 0 24px; text-align: center;
  font-size: 44px; font-weight: 800; color: #0F2A20; letter-spacing: 1px;
}
.rel-title em { font-style: normal; color: var(--brand-2); margin: 0 16px; font-weight: 700; }

/* —— 成员网格：2 人大卡 / 3~6 人紧凑三列，6 人亦可完整呈现 —— */
.rel-mems { display: grid; gap: 14px; }
.rel-mems[data-n="2"] { grid-template-columns: repeat(2, 1fr); }
.rel-mems[data-n="3"], .rel-mems[data-n="4"],
.rel-mems[data-n="5"], .rel-mems[data-n="6"] { grid-template-columns: repeat(3, 1fr); }

/* —— 紧凑态（3 列及以上）：字号与内距收紧，保证 6 人一屏可读 —— */
.rel-mems[data-n="3"] .rel-mem,
.rel-mems[data-n="4"] .rel-mem,
.rel-mems[data-n="5"] .rel-mem,
.rel-mems[data-n="6"] .rel-mem { padding: 16px 16px 14px 20px; }
.rel-mems[data-n="3"] .rel-mem-name,
.rel-mems[data-n="4"] .rel-mem-name,
.rel-mems[data-n="5"] .rel-mem-name,
.rel-mems[data-n="6"] .rel-mem-name { font-size: 23px; }
.rel-mems[data-n="3"] .rel-mem-badge,
.rel-mems[data-n="4"] .rel-mem-badge,
.rel-mems[data-n="5"] .rel-mem-badge,
.rel-mems[data-n="6"] .rel-mem-badge { padding: 5px 12px; font-size: 16px; }
.rel-mems[data-n="3"] .rel-sname,
.rel-mems[data-n="4"] .rel-sname,
.rel-mems[data-n="5"] .rel-sname,
.rel-mems[data-n="6"] .rel-sname { width: 62px; font-size: 16px; }
.rel-mems[data-n="3"] .rel-sval,
.rel-mems[data-n="4"] .rel-sval,
.rel-mems[data-n="5"] .rel-sval,
.rel-mems[data-n="6"] .rel-sval { width: 52px; font-size: 16px; }
.rel-mems[data-n="3"] .rel-strack,
.rel-mems[data-n="4"] .rel-strack,
.rel-mems[data-n="5"] .rel-strack,
.rel-mems[data-n="6"] .rel-strack { height: 10px; }
.rel-mems[data-n="3"] .rel-srow,
.rel-mems[data-n="4"] .rel-srow,
.rel-mems[data-n="5"] .rel-srow,
.rel-mems[data-n="6"] .rel-srow { gap: 8px; }

/* —— 成员卡 —— */
.rel-mem {
  position: relative; margin-bottom: 16px; padding: 20px 24px 18px 28px;
  background: var(--c-surface); border-radius: 20px; overflow: hidden;
  box-shadow: 0 6px 20px -12px rgba(6,60,45,.22);
}
.rel-mem::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 3px 3px 0; background: var(--rel-accent, var(--brand-2)); }
.rel-mem-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 13px; margin-bottom: 14px; border-bottom: 1px solid #EDF2F0; }
.rel-mem-name { font-size: 30px; font-weight: 800; color: #0F2A20; }
.rel-mem-badge { flex: none; padding: 7px 18px; border-radius: 999px; background: var(--rel-accent, var(--brand-2)); color: var(--c-surface); font-size: 20px; font-weight: 700; }

/* —— 四型分数条 —— */
.rel-scores { display: flex; flex-direction: column; gap: 11px; }
.rel-srow { display: flex; align-items: center; gap: 12px; }
.rel-sdot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.rel-sname { flex: none; width: 84px; font-size: 21px; font-weight: 600; color: #3D4F49; }
.rel-strack { flex: 1; height: 12px; border-radius: 999px; background: #EEF3F1; overflow: hidden; }
.rel-strack b { display: block; height: 100%; border-radius: 999px; min-width: 14px; }
.rel-sval { flex: none; width: 84px; text-align: right; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rel-sval.is-zero { font-weight: 600; }

/* —— 关系解读 —— */
.rel-ins {
  position: relative; margin-top: 16px; padding: 22px 24px 20px 28px;
  background: var(--c-surface); border-radius: 20px;
  box-shadow: 0 6px 20px -12px rgba(6,60,45,.22);
}
.rel-ins::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 3px 3px 0; background: var(--brand-2); }
.rel-ins-t { margin: 0 0 12px; font-size: 30px; font-weight: 800; color: var(--brand-deep); }
.rel-ins-d { margin: 0 0 16px; font-size: 24px; line-height: 1.75; color: #3D4F49; }

/* —— 全员组合（3 人以上）：逐行列出所有两两关系，完整不省略 —— */
.rel-ins--list .rel-ins-t { font-size: 26px; }
.rel-pairs { display: flex; flex-direction: column; }
.rel-pair { padding: 11px 0; border-top: 1px solid #EFF4F1; }
.rel-pair:first-child { border-top: none; padding-top: 4px; }
.rel-pair-ab { font-size: 21px; font-weight: 700; color: #0F2A20; }
.rel-pair-ab em { font-style: normal; color: var(--brand-2); margin: 0 6px; }
.rel-pair-n { margin-left: 12px; font-size: 19px; font-weight: 700; color: var(--brand-2); }
.rel-pair-tip { margin: 6px 0 0; font-size: 19px; line-height: 1.6; color: #6B7F78; }
.rel-tip { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: 14px; background: var(--s-amber-50); box-shadow: inset 3px 0 0 var(--s-amber-600); }
.rel-tip b { flex: none; font-size: 18px; font-weight: 800; color: var(--s-amber-700); padding-top: 3px; }
.rel-tip p { margin: 0; font-size: 21px; line-height: 1.65; color: #7C4A03; }

/* —— 落款 —— */
.rel-foot { margin-top: 20px; text-align: center; }
.rel-foot b { display: block; font-size: 21px; font-weight: 600; color: #5F7A70; }
.rel-foot span { display: block; margin-top: 8px; font-size: 17px; color: #9CB0A8; }

/* —— 屏幕上的“保存 PDF”按钮（与既有按钮同规格） —— */
.sp-rel-btn--pdf { background: linear-gradient(135deg, #0F3D2F, var(--brand-2)); color: var(--c-surface); border-color: transparent; }
.sp-rel-btn--pdf:hover { background: linear-gradient(135deg, #04291D, var(--v-700)); }

/* ============ 打印隔离：只输出关系画像 ============ */
@page { size: A4 portrait; margin: 10mm; }

@media print {
  html, body { background: var(--c-surface) !important; }
  /* 隐藏页面除 #relSheet 以外的一切 */
  body > *:not(#relSheet) { display: none !important; }
  #relSheet { display: block !important; }
  #relSheet .rel-page {
    width: 100% !important; margin: 0 !important; padding: 0 !important;
    box-shadow: none !important; background: var(--c-surface) !important;
    border-top-width: 6px !important;
  }
  /* 保证背景色/色条真实打印（否则浏览器「省墨」会抹掉底色） */
  #relSheet, #relSheet * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .rel-mem, .rel-ins { box-shadow: none !important; border: 1px solid #E4EDE8; }
  /* 分页保护：卡片与每条关系不被分页切断（6 人时内容会自然跨页） */
  .rel-mem, .rel-ins, .rel-pair { break-inside: avoid; page-break-inside: avoid; }
  .rel-mems { break-inside: auto; page-break-inside: auto; }

  /* —— 完整测评报告（#relSheet 内嵌 .sp-csheet）打印适配 —— */
  #relSheet .sp-cmask {
    position: static !important; inset: auto !important;
    display: block !important; background: transparent !important;
    backdrop-filter: none !important; padding: 0 !important; animation: none !important;
  }
  #relSheet .sp-csheet {
    position: static !important; max-height: none !important; overflow: visible !important;
    width: 100% !important; max-width: 100% !important; margin: 0 !important;
    box-shadow: none !important; border: none !important; border-radius: 0 !important;
    padding: 4px 0 0 !important;
  }
  #relSheet .sp-csheet::before { display: none !important; }
  #relSheet .sp-chead { position: static !important; }
  /* 交互元素不出现在打印件 */
  #relSheet .sp-cclose, #relSheet .sp-cexport, #relSheet .sp-pro-btn, #relSheet .sp-course-btn { display: none !important; }
  /* 分页保护：每人对照卡 / 画像卡 / 关系卡 / 老师区块不被拦腰截断 */
  #relSheet .sp-ccols, #relSheet .sp-ccol, #relSheet .sp-cprofile,
  #relSheet .sp-relx, #relSheet .sp-pros-sec, #relSheet .sp-course,
  #relSheet .sp-csec-title { break-inside: avoid; page-break-inside: avoid; }
  #relSheet .sp-csec-title { break-after: avoid; }
}

/* ============================================================
   9. 会员拦截卡（牌阵测评 = 会员专享）
   ------------------------------------------------------------
   非会员摆满 15 张后，结果面板位置显示此卡，引导开通会员。
   采用品牌色系 + 三级阴影 + 内高光，与牌阵整体科技气质一致。
   ============================================================ */
.sp-gate {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 24px 18px; text-align: center;
  border-radius: var(--sp-r-lg);
  background: linear-gradient(160deg, var(--sp-brand-tint), var(--sp-bg));
  border: 1px solid color-mix(in srgb, var(--sp-brand) 22%, transparent);
  box-shadow: var(--sp-e2), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.sp-gate-ico { font-size: 30px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(5, 150, 105, .25)); }
.sp-gate-t { font-size: 15px; font-weight: 800; color: var(--sp-brand-deep); letter-spacing: .3px; }
.sp-gate-d { font-size: 12px; color: var(--sp-ink-2); line-height: 1.55; }
.sp-gate-btn {
  margin-top: 5px; padding: 10px 26px; border-radius: 999px;
  background: linear-gradient(135deg, var(--sp-brand-2), var(--sp-brand));
  color: var(--c-surface); font-size: 13px; font-weight: 800; letter-spacing: .5px;
  border: none; cursor: pointer; font-family: inherit;
  box-shadow: 0 6px 16px -6px rgba(5, 150, 105, .55), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .2s var(--ease-out, ease), box-shadow .2s;
}
.sp-gate-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 22px -7px rgba(5, 150, 105, .6), inset 0 1px 0 rgba(255, 255, 255, .3); }
.sp-gate-btn:active { transform: scale(.97); }

@media (prefers-color-scheme: dark) {
  .sp-gate {
    background: linear-gradient(160deg, rgba(52, 211, 153, .12), var(--sp-bg-2));
    border-color: rgba(52, 211, 153, .30);
    box-shadow: var(--sp-e2), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  .sp-gate-t { color: var(--brand-5); }
  .sp-gate-d { color: var(--sp-ink-2); }
  .sp-gate-btn {
    background: linear-gradient(135deg, var(--brand-4), var(--brand-1));
    color: #022C22;
  }
}