/* ==========================================================================
   cards.css —— 全站卡牌统一视觉层
   --------------------------------------------------------------------------
   背景：卡牌曾在 5 处各自实现，视觉语言互不一致——
       牌阵     .sp-card     彩色书脊 + 顶面高光（设计最好的那套）
       主测评   .card        白底 + 四色描边（style.css）
       团测摆牌 .card        复制粘贴的又一份（assess-card.html 内联）
       结果页   .rc-slot     无背景/无阴影，颜色写死在 inline style
       团测报告 .ps-slot     CSS 整段硬编码在 JS 字符串里

   本文件确立**唯一卡牌设计语言**，并适配到上述 5 套 class。
   一处改动，全站卡牌同步升级。

   设计语言（以牌阵为基准并强化）：
     ① 彩色书脊   左侧 4px 实色条 = 卡牌类型身份，零额外 DOM
     ② 顶面高光   inset 1px 白线，模拟卡纸顶面反光
     ③ 同色厚度   底部 2px 同色内阴影 = 卡牌"厚度"，这是立体感的关键
     ④ 三级阴影   环境影 + 接触影，与品牌绿同源而非纯黑
     ⑤ A/B 层标   右上角切角标记，区分「意识层 / 需照看层」，零布局占用
     ⑥ 交互       悬停抬升 2px + 阴影升级；按下回弹 scale(.97)

   性能约束：
     - 全部效果用 box-shadow / transform / background 实现，零重排
     - 无 filter: blur、无无限动画（仅一次性入场）
     - 令牌挂在 :root，全站共享，改一处即全站生效
   ========================================================================== */

/* ==========================================================================
   1. 卡牌设计令牌
   ========================================================================== */
:root {
  /* —— 几何 —— */
  --cd-r: 9px;             /* 卡牌圆角 */
  --cd-r-sm: 7px;          /* 小卡圆角 */
  --cd-spine-w: 4px;       /* 书脊宽度 */
  --cd-h: 48px;            /* 卡库卡牌高度 */
  --cd-h-slot: 46px;       /* 槽内卡牌高度 */
  --cd-slot-h: 48px;       /* 空槽高度 */
  --cd-gap: 8px;           /* 卡库网格间距 */

  /* —— 阴影体系（绿色调，与品牌同源；深底上由暗色块加深刻度）——
     纯黑阴影在墨绿底上会显脏，绿色调阴影与页面气质一致。 */
  --cd-e1: 0 1px 2px rgba(6, 95, 70, .05);
  --cd-e2: 0 1px 2px rgba(6, 95, 70, .05), 0 4px 12px -6px rgba(6, 95, 70, .12);
  --cd-e3: 0 2px 4px rgba(6, 95, 70, .06), 0 10px 24px -10px rgba(6, 95, 70, .20);

  /* —— 四色卡牌（类型身份）——
     spine 书脊 / tint 淡染 / line 描边 / ink 文字 / fold 层标 */
  --cd-y-spine: var(--brand-amber); --cd-y-tint: rgba(245, 158, 11, .10);
  --cd-y-line: rgba(245, 158, 11, .40);         --cd-y-ink: var(--s-amber-800);
  --cd-b-spine: var(--c-info); --cd-b-tint: rgba(59, 130, 246, .10);
  --cd-b-line: rgba(59, 130, 246, .40);         --cd-b-ink: var(--s-blue-800);
  --cd-r-spine: var(--s-red-500); --cd-r-tint: rgba(239, 68, 68, .10);
  --cd-r-line: rgba(239, 68, 68, .40);          --cd-r-ink: var(--s-red-800);
  --cd-g-spine: var(--s-green-500); --cd-g-tint: rgba(34, 197, 94, .10);
  --cd-g-line: rgba(34, 197, 94, .40);          --cd-g-ink: var(--s-green-800);

  /* —— 槽位（凹陷）—— */
  --cd-slot-bg: #F7FAF8;
  --cd-slot-line: var(--n-300);
  --cd-slot-plus: var(--n-400);
  --cd-slot-inset: inset 0 2px 5px rgba(15, 45, 35, .08);

  /* —— 动效 —— */
  --cd-t: .22s;
  --cd-ease: cubic-bezier(.16, 1, .3, 1);   /* 减速缓动，末端柔和 */
  --cd-pop: cubic-bezier(.34, 1.56, .64, 1); /* 回弹，用于入场 */

  /* —— A/B 意识层标记 —— */
  --cd-ab-a: var(--brand-amber);   /* 意识层 */
  --cd-ab-b: var(--n-500);   /* 需照看层 */
}

/* ==========================================================================
   2. 卡牌材质（核心）—— 用属性选择器一次性适配全部 5 套 class
   --------------------------------------------------------------------------
   之所以能用属性选择器，是因为 5 套 class 的共同点是：
     都有 .yellow/.blue/.red/.green 修饰类，或 data-color 属性。
   ========================================================================== */

/* 2.1 材质基座 */
.card, .result-card, .rc-slot, .ps-slot, .slot, .sp-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--cd-r);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  /* 兼容写法：确保内边距为文字让出书脊与层标的空间 */
  box-sizing: border-box;
  transition:
    transform var(--cd-t) var(--cd-ease),
    box-shadow var(--cd-t) var(--cd-ease),
    border-color var(--cd-t) var(--cd-ease),
    background-color var(--cd-t) var(--cd-ease);
}

/* 2.2 四色身份映射 */
.yellow, .card-yellow, .result-card-yellow, .slot.yellow, .ps-slot.yellow, .rc-slot.yellow {
  --cd-spine: var(--cd-y-spine); --cd-tint: var(--cd-y-tint);
  --cd-line: var(--cd-y-line);   --cd-ink: var(--cd-y-ink);
  --cd-card-c: var(--cd-y-spine); /* 兼容既有 --card-c 消费者 */
}
.blue, .card-blue, .result-card-blue, .slot.blue, .ps-slot.blue, .rc-slot.blue {
  --cd-spine: var(--cd-b-spine); --cd-tint: var(--cd-b-tint);
  --cd-line: var(--cd-b-line);   --cd-ink: var(--cd-b-ink);
  --cd-card-c: var(--cd-b-spine);
}
.red, .card-red, .result-card-red, .slot.red, .ps-slot.red, .rc-slot.red {
  --cd-spine: var(--cd-r-spine); --cd-tint: var(--cd-r-tint);
  --cd-line: var(--cd-r-line);   --cd-ink: var(--cd-r-ink);
  --cd-card-c: var(--cd-r-spine);
}
.green, .card-green, .result-card-green, .slot.green, .ps-slot.green, .rc-slot.green {
  --cd-spine: var(--cd-g-spine); --cd-tint: var(--cd-g-tint);
  --cd-line: var(--cd-g-line);   --cd-ink: var(--cd-g-ink);
  --cd-card-c: var(--cd-g-spine);
}

/* 2.3 材质本体（所有卡牌共用的"卡纸质感"） */
.card, .result-card, .rc-slot, .ps-slot, .slot, .sp-card {
  color: var(--cd-ink, var(--c-ink, var(--ink)));
  background: var(--cd-tint, var(--c-surface, var(--c-surface)));
  border: 1px solid var(--cd-line, var(--c-line, var(--c-line)));
  box-shadow:
    /* 顶面高光 */
    inset 0 1px 0 rgba(255, 255, 255, .9),
    /* 同色厚度：卡牌的"厚度"，立体感的关键 */
    inset 0 -2px 0 var(--cd-tint, rgba(15, 23, 42, .06)),
    /* 接触影 + 环境影 */
    var(--cd-e2);
}

/* 2.3b 文字严格居中
   ⚠ 必须显式声明 flex 居中：部分页面（如 assess-card.html）不加载
     style.css，仅靠 text-align:center 只能管横向，纵向会偏上；
     且原 padding 左侧为书脊让位（9px）、右侧仅 2~4px，
     左右不等 → 文字视觉重心整体偏移，不算真正居中。
   现改为左右对称内距；书脊为绝对定位、不占布局，不会压到文字。 */
.card, .result-card, .rc-slot, .ps-slot, .slot, .sp-card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px 5px;
}

/* 2.4 彩色书脊：用 ::before 承载，零额外 DOM */
.card::before, .result-card::before, .rc-slot::before,
.ps-slot::before, .slot::before, .sp-card::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--cd-spine-w);
  background: var(--cd-spine, transparent);
  border-radius: var(--cd-r) 0 0 var(--cd-r);
  /* 书脊亮边：让色条看起来有弧面而非平涂 */
  box-shadow: 1px 0 2px rgba(0, 0, 0, .12);
}

/* 2.5 A/B 意识层标记 —— 右上角切角，零布局占用
   A（意识层）= 实心角；B（需照看层）= 空心角。
   通过 [data-ab] 或 .ab-a/.ab-b 类注入，未标注时自动隐藏。 */
.card[data-ab]::after, .rc-slot[data-ab]::after, .ps-slot[data-ab]::after {
  content: ''; position: absolute;
  right: 0; top: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 9px 9px 0;
  border-color: transparent var(--cd-ab-a, var(--brand-amber)) transparent transparent;
  border-top-right-radius: var(--cd-r);
  opacity: .85;
}
.card[data-ab="B"]::after, .rc-slot[data-ab="B"]::after, .ps-slot[data-ab="B"]::after {
  border-color: transparent var(--cd-ab-b, var(--n-500)) transparent transparent;
}

/* ==========================================================================
   3. 交互反馈
   ========================================================================== */

/* 3.1 悬停抬升（卡库中的可点卡） */
.card:hover, .result-card:hover, .sp-card.lib:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -2px 0 var(--cd-tint, rgba(15, 23, 42, .06)),
    var(--cd-e3);
}
/* 按下回弹 */
.card:active, .result-card:active, .sp-card.lib:active {
  transform: translateY(0) scale(.97);
}
/* 拖拽中：跟随辉光 */
.card.dragging {
  transform: scale(1.06) rotate(-1.5deg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 14px 28px -8px rgba(6, 95, 70, .34),
    0 0 0 2px var(--cd-line, rgba(16, 185, 129, .4));
  cursor: grabbing;
}

/* 拖拽幽灵卡：跟随指针的轻量残影（主系统 / 团测作答页共用）
   定位由调用方用 left/top（± transform）控制，这里不写 transform，
   避免影响团测作答页既有的左上角定位行为。 */
.card-ghost {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  min-width: 72px;
  padding: 10px 8px;
  border-radius: 10px;
  color: var(--c-surface);
  font-size: 12.5px;
  font-weight: 800;
  text-align: center;
  line-height: 1.4;
  box-shadow: 0 14px 30px -8px rgba(6, 95, 70, .45);
  will-change: left, top;
}

/* ==========================================================================
   4. 槽位（凹陷卡槽）
   --------------------------------------------------------------------------
   立体感的关键在于「凹陷 ↔ 浮起」的反向关系：
     空槽用内阴影（凹进去）· 已放置的卡用外投影（浮起来）
   ========================================================================== */
.card-slot, .cslot, .sp-slot {
  border: 1.5px dashed var(--cd-slot-line, var(--n-300));
  border-radius: var(--cd-r);
  background: var(--cd-slot-bg, #F7FAF8);
  box-shadow: var(--cd-slot-inset);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  transition:
    border-color var(--cd-t) var(--cd-ease),
    background-color var(--cd-t) var(--cd-ease),
    box-shadow var(--cd-t) var(--cd-ease),
    transform var(--cd-t) var(--cd-ease);
}
/* 空槽的加号 */
.card-slot::before, .cslot::before, .sp-slot::before {
  content: '＋';
  color: var(--cd-slot-plus, var(--n-400));
  font-size: 17px; line-height: 1;
  border: 0; box-shadow: none;          /* 覆盖卡牌的书脊样式 */
  background: none;
  transition: color var(--cd-t), transform var(--cd-t) var(--cd-ease);
}
/* 悬停：槽位亮起，提示可放置 */
.card-slot:hover, .cslot:hover, .sp-slot:hover {
  border-color: var(--brand-2, var(--brand-3));
  background: var(--v-50, var(--brand-purple-soft));
  box-shadow:
    inset 0 1px 3px rgba(15, 45, 35, .05),
    0 0 0 3px rgba(16, 185, 129, .12);
}
.card-slot:hover::before, .cslot:hover::before, .sp-slot:hover::before {
  color: var(--brand-2, var(--brand-3));
  transform: scale(1.12);
}

/* 已放置：卡浮起（与凹槽形成反向对比）
   ⚠ .cslot 必须与 .card-slot / .sp-slot 同时列出：
     团测页（assess-card.html）由 JS 加 .filled 类，
     若此处漏写 .cslot，会导致「卡已入槽但加号仍在、边框仍是虚线」。

   边框色取 var(--cd-line)：JS 会给卡位加上 yellow/blue/red/green
   类型类，故此处的 var(--cd-line) 会自动解析为「该卡牌的类型色」，
   实现卡位边框跟随卡牌类型 —— 无需 inline style，且自动适配明暗主题。
   边框加粗到 2px：卡位是卡牌的"外框"，需在视觉上统领卡内文字。 */
.card-slot.filled, .cslot.filled, .sp-slot.filled {
  border-style: solid;
  border-width: 2px;
  border-color: var(--cd-line, var(--c-line, var(--c-line)));
  background: var(--c-surface, var(--c-surface));
  box-shadow: var(--cd-e2);
  animation: cdSeatIn .34s var(--cd-pop);
}
/* 加号只属于「空槽」，一旦有卡必须彻底移除 */
.card-slot.filled::before, .cslot.filled::before, .sp-slot.filled::before { content: none; }
@keyframes cdSeatIn {
  0%   { transform: scale(.9) translateY(4px); opacity: .4; }
  100% { transform: none; opacity: 1; }
}
/* 槽内卡牌：铺满槽位，阴影由槽承担（避免双重投影） */
.card-slot .card, .card-slot.filled .card,
.cslot .card, .cslot.filled .card { height: 100%; width: 100%; box-shadow: none; }

/* 拖拽悬停：槽位张开 */
.card-slot.dragover, .card-slot.drop-active, .cslot.dragover, .sp-slot.dragover {
  border-style: solid;
  border-color: var(--brand-2, var(--brand-3));
  background: var(--v-50, var(--brand-purple-soft));
  box-shadow: inset 0 0 0 2px rgba(16, 185, 129, .25);
  transform: scale(1.02);
}

/* ==========================================================================
   5. 各页面 class 适配（几何尺寸，因各页布局不同而略有差异）
   ========================================================================== */

/* 5.1 主测评卡库（index.html · app.js） */
.card-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--cd-gap); }
.card {
  height: var(--cd-h);
  padding: 4px 4px 4px calc(var(--cd-spine-w) + 5px);
  cursor: grab; touch-action: none;
  user-select: none; -webkit-user-select: none;
  font-size: 12px;
}

/* 5.2 主测评槽位（index.html） */
.card-slot { flex: 1; height: var(--cd-slot-h); touch-action: none; }

/* 5.3 结果页卡位 + 卡牌（index.html · app.js） */
.result-card-slot {
  flex: 1; height: 58px;
  border: 1.5px solid var(--c-line, var(--c-line));
  border-radius: var(--cd-r);
  background: var(--c-surface, var(--c-surface));
  display: flex; align-items: center; justify-content: center;
  padding: 3px; position: relative; overflow: hidden;
  box-shadow: var(--cd-e1);
}
.result-card {
  width: 100%; height: 100%;
  padding: 4px 5px;
  font-size: 12px;
}

/* 5.4 独立结果页（report.html · report.js）
   注意：report.js 原用 inline style 写死背景与文字色，
   已改为 data-color 驱动，颜色完全交给本层处理。 */
.rc-slot {
  padding: 8px 5px;
  font-size: 12px;
  border-radius: var(--cd-r);
  background: var(--cd-tint, var(--c-surface, var(--c-surface))) !important;
  color: var(--cd-ink, var(--c-ink, var(--ink))) !important;
  border-color: var(--cd-line, var(--c-line, var(--c-line))) !important;
}

/* 5.5 团测报告（shared/report.js → .ps-slot） */
.ps-slot {
  min-height: 44px;
  padding: 8px 5px;
  font-size: 11.5px;
  border-radius: var(--cd-r);
  background: var(--cd-tint, var(--c-surface, var(--c-surface))) !important;
  color: var(--cd-ink, var(--c-ink, var(--ink))) !important;
  border-color: var(--cd-line, var(--c-line, var(--c-line))) !important;
}
/* 空槽（未选卡牌） */
.ps-slot.empty, .slot.empty {
  background: var(--cd-slot-bg, #F7FAF8) !important;
  color: var(--cd-slot-plus, var(--n-400)) !important;
  border: 1.5px dashed var(--cd-slot-line, var(--n-300)) !important;
  box-shadow: var(--cd-slot-inset) !important;
}
.ps-slot.empty::before, .slot.empty::before,
.ps-slot.empty::after, .slot.empty::after { display: none; }

/* 5.6 团测摆牌槽位（assess-card.html · .cslot） */
.cslot {
  flex: 1; height: var(--cd-slot-h);
  touch-action: none;
}
.cslot .card { height: 100%; width: 100%; box-shadow: none; padding: 4px 5px; }

/* 5.7 assess-card 结果页卡位（assess-card.html · .slot） */
.slot {
  padding: 8px 5px;
  font-size: 11.5px;
  border-radius: var(--cd-r);
  background: var(--cd-tint, var(--c-surface, var(--c-surface))) !important;
  color: var(--cd-ink, var(--c-ink, var(--ink))) !important;
}

/* 5.8 牌阵卡牌（spread.css · .sp-card）—— 令牌接管，形态保持
   牌阵原本已有书脊与高光，这里只补齐材质一致性与 A/B 层标。 */
.sp-card.lib {
  height: var(--cd-h);
  border: 1px solid var(--cd-line, var(--c-line, var(--c-line)));
  background: var(--c-surface, var(--c-surface));
  box-shadow: var(--cd-e1), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.sp-card.lib.yellow { border-color: var(--cd-y-line); }
.sp-card.lib.blue   { border-color: var(--cd-b-line); }
.sp-card.lib.red    { border-color: var(--cd-r-line); }
.sp-card.lib.green  { border-color: var(--cd-g-line); }

/* ==========================================================================
   5.9 测评页三排语义色 —— 与牌阵完全一致的语义分层
   --------------------------------------------------------------------------
   三排不是「重复三遍」，而是三个心理层级，各有语义色：
     第一排 最符合   = 优势层   暖金   （意识层优势，向上生长）
     第二排 比较符合 = 中性层   品牌绿 （均衡态）
     第三排 最不符合 = 潜意识层 冷青   （需照看特质，向下沉淀）

   实现：只换令牌，不改几何 —— 槽位的凹陷、悬停、填充全部自动跟随。
   用 :nth-child 而非 JS 写 data-row，避免任何 DOM / JS 契约变更。
   ========================================================================== */
#page-test .match-row:nth-child(1),
.crow:nth-child(1) {
  --cd-row-ink: var(--s-amber-700);
  --cd-slot-bg: var(--s-amber-50);
  --cd-slot-line: var(--s-amber-200);
  --cd-slot-plus: var(--s-amber-700);
}
#page-test .match-row:nth-child(2),
.crow:nth-child(2) {
  --cd-row-ink: var(--v-700);
  --cd-slot-bg: var(--v-50, var(--brand-purple-soft));
  --cd-slot-line: var(--v-200, var(--brand-5));
  --cd-slot-plus: var(--v-700);
}
#page-test .match-row:nth-child(3),
.crow:nth-child(3) {
  --cd-row-ink: var(--s-teal-700);
  --cd-slot-bg: var(--s-teal-50);
  --cd-slot-line: #99F6E4;
  --cd-slot-plus: var(--s-teal-700);
}
/* —— 牌阵页（#page-spread）：三排语义色
   结构（spread.js paint 生成，label 与 row 交替为兄弟节点）：
     .sp-grid > .sp-rowlabel(1) .sp-row[data-row="1"](2)
     .sp-grid > .sp-rowlabel(3) .sp-row[data-row="2"](4)
     .sp-grid > .sp-rowlabel(5) .sp-row[data-row="3"](6)
   卡位色用 [data-row] 绑定（更稳，不依赖位置）；
   排标题色用 nth-child 绑定（label 无 data-row）。 */
#page-spread .sp-row[data-row="1"] {
  --cd-row-ink: var(--s-amber-700);
  --cd-slot-bg: var(--s-amber-50);
  --cd-slot-line: var(--s-amber-200);
  --cd-slot-plus: var(--s-amber-700);
}
#page-spread .sp-row[data-row="2"] {
  --cd-row-ink: var(--v-700);
  --cd-slot-bg: var(--v-50, var(--brand-purple-soft));
  --cd-slot-line: var(--v-200, var(--brand-5));
  --cd-slot-plus: var(--v-700);
}
#page-spread .sp-row[data-row="3"] {
  --cd-row-ink: var(--s-teal-700);
  --cd-slot-bg: var(--s-teal-50);
  --cd-slot-line: #99F6E4;
  --cd-slot-plus: var(--s-teal-700);
}
#page-spread .sp-grid > .sp-rowlabel:nth-child(1) { --cd-row-ink: var(--s-amber-700); }
#page-spread .sp-grid > .sp-rowlabel:nth-child(3) { --cd-row-ink: var(--v-700); }
#page-spread .sp-grid > .sp-rowlabel:nth-child(5) { --cd-row-ink: var(--s-teal-700); }

/* 排标题：仅左侧标识条取语义色；文字保持页面原有深色，
   既对齐视觉稿（彩条 + 深字），也避免彩色正文对比度不足。 */
#page-test .row-title,
.crow-t,
#page-spread .sp-rowlabel {
    display: flex; align-items: center; gap: 7px;
    font-weight: 700; letter-spacing: .2px;
}
#page-test .row-title::before,
.crow-t::before,
#page-spread .sp-rowlabel::before {
    content: ''; flex: none;
    width: 3px; height: 13px;
    border-radius: 999px;
    background: var(--cd-row-ink, var(--brand-2, var(--brand-3)));
    box-shadow: 0 0 6px -1px var(--cd-row-ink, rgba(16, 185, 129, .6));
}

/* ==========================================================================
   5.10 牌阵页卡位布局 · 对齐首页测评页基准
   --------------------------------------------------------------------------
   基准（首页测评页 style.css / #page-test）：
     模块容器  14px 圆角 / 1px 描边 / 12px 内距 / 10px 外距
     排标题    12px 字号 / 距卡位 8px / 排间距 14px
     卡位      flex:1 / 44px 高 / 1.5px 虚线 / 10px 圆角 / 加号 18px
     卡位行    gap 6px
     卡库      6 列 / gap 8px / 卡高 44px
   本节在 cards.css（最后加载）以 #page-spread 提高特异性覆盖，
   避免 spread.css 与本文件基座规则互相覆盖导致尺寸漂移。
   ========================================================================== */
#page-spread .sp-slot {
  height: 44px;              /* 对齐 --card-h */
  border-radius: 10px;       /* 对齐测评页卡位圆角 */
}
#page-spread .sp-slot::before { font-size: 18px; }

/* 卡位区模块容器：对齐测评页 .slots-module */
#page-spread .sp-grid {
  background: var(--cd-surface, var(--c-surface, var(--c-surface)));
  border: 1px solid var(--c-line, var(--c-line));
  border-radius: 14px;
  padding: 12px;
  margin-top: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

/* 排标题：12px 字号。
   间距换算（.sp-grid 自带 gap:2px）：
     排间距   = gap2 + margin-top12  = 14px ✓（测评页 .match-row margin-bottom:14px）
     标题距卡位 = gap2 + margin-bottom6 = 8px ✓（测评页 .row-title margin-bottom:8px） */
#page-spread .sp-grid > .sp-rowlabel {
  font-size: 12px;
  margin-top: 12px;
  margin-bottom: 6px;
}
#page-spread .sp-grid > .sp-rowlabel:nth-child(1) { margin-top: 0; }

/* 卡库：6 列 / gap 8px / 卡高 44px（对齐测评页卡库） */
#page-spread .sp-lib { gap: 8px; }
#page-spread .sp-lib .sp-card { height: 44px; }

/* 面板已自带 12px 内距与外距，原 .sp-lib-head 的上/下外距会与面板叠加，
   这里收敛为「标题距卡库 8px、无额外外距」。 */
#page-spread .sp-lib-head { margin: 0 0 8px; }

/* 模块容器观感：与测评页 .slots-module / .cards-module 同规格 */
#page-spread .sp-progress,
#page-spread .sp-lib-panel {
  background: var(--cd-surface, var(--c-surface, var(--c-surface)));
  border: 1px solid var(--c-line, var(--c-line));
  border-radius: 14px;
  padding: 12px;
  margin-top: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

/* 进度条：沿用测评页视觉（8px 纤细胶囊 + 品牌渐变 + 末端能量头） */
#page-spread .sp-progress-bar {
  position: relative; height: 8px; border-radius: 999px;
  background-color: rgba(15, 45, 35, .07);
  box-shadow: inset 0 1px 2px rgba(15, 45, 35, .12);
  overflow: hidden;
}
#page-spread .sp-progress-fill {
  position: relative; height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-2), var(--brand-3) 55%, var(--brand-1));
  box-shadow: 0 1px 4px rgba(5, 150, 105, .32);
  transition: width .42s cubic-bezier(.16, 1, .3, 1);
}
#page-spread .sp-progress-fill::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0;
  width: 16px; pointer-events: none; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45));
}
#page-spread .sp-progress-text {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; font-size: 12.5px;
  color: var(--c-sub, var(--c-sub)); line-height: 1.4;
}
#page-spread .sp-progress-text b {
  font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: .4px;
  color: var(--cd-brand, var(--v-700));
}

/* 卡库底部按钮：对齐测评页 .btn-calculate（13px 内距 / 12px 圆角 / 15px 字） */
#page-spread .sp-calc-btn {
  display: block; width: 100%; margin-top: 14px;
  padding: 13px; border: none; border-radius: 12px;
  font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: 1px;
  color: var(--c-surface); cursor: pointer;
  background: linear-gradient(135deg, var(--s-indigo-600), var(--brand-2) 55%, var(--brand-3));
  box-shadow: 0 8px 22px rgba(16, 185, 129, .35);
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
#page-spread .sp-calc-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(16, 185, 129, .40);
}
#page-spread .sp-calc-btn:active:not(:disabled) { transform: scale(.985); }
#page-spread .sp-calc-btn:disabled {
  cursor: not-allowed; opacity: .55;
  background: #9FB3AC; box-shadow: none;
}

/* 暗色适配 */
@media (prefers-color-scheme: dark) {
  #page-spread .sp-progress,
  #page-spread .sp-lib-panel,
  #page-spread .sp-grid {
    background: var(--c-surface);
    border-color: var(--c-line);
  }
  #page-spread .sp-progress-bar { background-color: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .34); }
  #page-spread .sp-progress-fill { box-shadow: 0 1px 6px rgba(52, 211, 153, .42); }
  #page-spread .sp-progress-fill::after { background: linear-gradient(90deg, transparent, rgba(236, 253, 245, .40)); }
  #page-spread .sp-progress-text { color: var(--c-sub); }
  #page-spread .sp-progress-text b { color: var(--brand-4); }
  #page-spread .sp-calc-btn { background: linear-gradient(135deg, var(--s-indigo-600), var(--brand-3) 55%, var(--brand-1)); }
  #page-spread .sp-calc-btn:disabled { background: #2A3F38; color: #8AA69C; }
}

/* ==========================================================================
   6. 暗色适配 —— 令牌化的直接收益：只需覆写令牌，全站自动跟随
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* 四色卡牌：深底上文字必须提亮，否则不可读 */
    --cd-y-tint: rgba(245, 158, 11, .14); --cd-y-ink: var(--s-amber-200); --cd-y-line: rgba(245, 158, 11, .34);
    --cd-b-tint: rgba(59, 130, 246, .14);  --cd-b-ink: #BFDBFE; --cd-b-line: rgba(59, 130, 246, .34);
    --cd-r-tint: rgba(239, 68, 68, .14);   --cd-r-ink: var(--s-red-200); --cd-r-line: rgba(239, 68, 68, .34);
    --cd-g-tint: rgba(34, 197, 94, .14);   --cd-g-ink: var(--s-green-200); --cd-g-line: rgba(34, 197, 94, .34);

    /* 书脊在深底上稍微提亮，保持识别度 */
    --cd-y-spine: var(--s-amber-400); --cd-b-spine: #60A5FA;
    --cd-r-spine: var(--s-red-400); --cd-g-spine: #4ADE80;

    /* 阴影在深底上要更深才有层次 */
    --cd-e1: 0 1px 2px rgba(0, 0, 0, .34);
    --cd-e2: 0 1px 2px rgba(0, 0, 0, .36), 0 4px 12px -6px rgba(0, 0, 0, .50);
    --cd-e3: 0 2px 4px rgba(0, 0, 0, .40), 0 10px 24px -10px rgba(0, 0, 0, .62);

    /* 顶面高光在深底上必须大幅降低，否则变成刺眼白线 */
    --cd-slot-bg: #0F221C;
    --cd-slot-line: #26453A;
    --cd-slot-plus: #5C7A6F;
    --cd-slot-inset: inset 0 2px 5px rgba(0, 0, 0, .40);
  }
  /* 顶面高光降级 */
  .card, .result-card, .rc-slot, .ps-slot, .slot, .sp-card,
  .sp-card.lib {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .06),
      inset 0 -2px 0 var(--cd-tint, rgba(15, 23, 42, .06)),
      var(--cd-e2);
  }
  .card:hover, .result-card:hover, .sp-card.lib:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .08),
      inset 0 -2px 0 var(--cd-tint, rgba(15, 23, 42, .06)),
      var(--cd-e3);
  }
  /* 书脊亮边在深底上过亮，关闭 */
  .card::before, .result-card::before, .rc-slot::before,
  .ps-slot::before, .slot::before, .sp-card::before {
    box-shadow: none;
  }
  /* 空槽在深底上靠内阴影凹陷 */
  .card-slot, .cslot, .sp-slot { box-shadow: var(--cd-slot-inset); }
  .card-slot:hover, .cslot:hover, .sp-slot:hover {
    border-color: var(--brand-2, var(--brand-1));
    background: rgba(52, 211, 153, .10);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3), 0 0 0 3px rgba(52, 211, 153, .16);
  }
  .card-slot:hover::before, .cslot:hover::before, .sp-slot:hover::before { color: var(--brand-4); }

  /* 三排语义色：深底上改用「暗底 + 亮字」，而非「亮底 + 深字」 */
  #page-test .match-row:nth-child(1),
  .crow:nth-child(1) {
    --cd-row-ink: #FCD34D; --cd-slot-bg: #2B220E; --cd-slot-line: #4A3A16; --cd-slot-plus: #FCD34D;
  }
  #page-test .match-row:nth-child(2),
  .crow:nth-child(2) {
    --cd-row-ink: var(--brand-4); --cd-slot-bg: #122A22; --cd-slot-line: #1F4A3C; --cd-slot-plus: var(--brand-4);
  }
  #page-test .match-row:nth-child(3),
  .crow:nth-child(3) {
    --cd-row-ink: #7DD8FC; --cd-slot-bg: #0F2628; --cd-slot-line: #1B4048; --cd-slot-plus: #7DD8FC;
  }

  /* 牌阵页三排语义色：深底上改用「暗底 + 亮字/亮加号」 */
  #page-spread .sp-row[data-row="1"] {
    --cd-row-ink: #FCD34D; --cd-slot-bg: #2B220E; --cd-slot-line: #4A3A16; --cd-slot-plus: #FCD34D;
  }
  #page-spread .sp-row[data-row="2"] {
    --cd-row-ink: var(--brand-4); --cd-slot-bg: #122A22; --cd-slot-line: #1F4A3C; --cd-slot-plus: var(--brand-4);
  }
  #page-spread .sp-row[data-row="3"] {
    --cd-row-ink: #7DD8FC; --cd-slot-bg: #0F2628; --cd-slot-line: #1B4048; --cd-slot-plus: #7DD8FC;
  }
  #page-spread .sp-grid > .sp-rowlabel:nth-child(1) { --cd-row-ink: #FCD34D; }
  #page-spread .sp-grid > .sp-rowlabel:nth-child(3) { --cd-row-ink: var(--brand-4); }
  #page-spread .sp-grid > .sp-rowlabel:nth-child(5) { --cd-row-ink: #7DD8FC; }
}

/* ==========================================================================
   7. 降动效 —— 入场与回弹动画必须可关闭
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .card, .result-card, .rc-slot, .ps-slot, .slot, .sp-card,
  .card-slot, .cslot, .sp-slot {
    transition: none !important;
    animation: none !important;
  }
  .card:hover, .card:active, .result-card:hover, .result-card:active,
  .sp-card.lib:hover, .sp-card.lib:active, .card.dragging,
  .card-slot:hover, .cslot:hover, .sp-slot:hover,
  .card-slot.dragover, .card-slot.drop-active {
    transform: none !important;
  }
  .card-slot.filled, .cslot.filled, .sp-slot.filled { animation: none !important; }
}

/* ==========================================================================
   8. 响应式 —— 窄屏收紧间距与字号
   ========================================================================== */
@media (max-width: 374px) {
  :root { --cd-gap: 6px; --cd-h: 44px; --cd-slot-h: 44px; }
  .card { font-size: 11px; padding: 4px 4px; }
  .card-slot { height: 44px; }
  .rc-slot, .ps-slot, .slot { font-size: 11px; }
}

/* ==========================================================================
   9. 高对比度偏好 —— 加深描边，保证边界清晰
   ========================================================================== */
@media (prefers-contrast: more) {
  :root {
    --cd-y-line: var(--s-amber-700); --cd-b-line: var(--s-blue-700);
    --cd-r-line: var(--s-red-700); --cd-g-line: var(--s-green-700);
    --cd-slot-line: var(--n-500);
  }
  .card, .result-card, .rc-slot, .ps-slot, .slot, .sp-card,
  .card-slot, .cslot, .sp-slot, .result-card-slot { border-width: 2px; }
}