/* ═══════════════════════════════════════════════════════════════════════════
 * Plan 7 · 宋韵七件套（Component Library v1.0）
 *
 * 设计基调 · 极渊深空 × 赛博古籍 × 浑天仪精密机械感
 *
 * 7 个组件：
 *   1. .abyss-bg          — Abyssal Base · 极渊黑底 + 极淡星点 + 呼吸闪烁
 *   2. .ink-cloud         — Cloud Overlay · 极低透明度动态墨晕（空间深度）
 *   3. .folio-banxin      — Folio Layout · 古籍版心（天头 / 地脚 / 竹丝栏）
 *   4. .jade-slip         — Jade Slip · 玉简竖容器（暗金边 + 微光 + 噪粒）
 *   5. .gold-wire         — Gold Wireframe · 0.5px 精密金线（utility）
 *   6. .cinnabar-seal     — Cinnabar Seal · 朱砂印章（SVG + filter）
 *   7. .p7-typo-*         — Typography System · 瘦金体 + 衬线体
 *
 * 用法：在需要 P7 风格的页面 / 区块上引入本 CSS，配合 .abyss-bg 包裹根容器。
 * 不污染主 styles.css；P7.2 / P7.3 / P7.4 共用本组件库。
 * ════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────
 * Design Tokens · CSS 变量
 * ────────────────────────────────────────────────────────────────────────── */
.p7-scope,
.abyss-bg {
  /* 配色 */
  --p7-abyss:        #0A0A0C;            /* 极渊黑（底） */
  --p7-abyss-soft:   #15151A;            /* 极渊黑浅一档（卡片底） */
  --p7-gold:         #B89B5E;            /* 暗金（线框 / 大字次档） */
  --p7-gold-bright:  #E6D9B4;            /* 暖象牙（大字主档） */
  --p7-gold-dim:     rgba(184, 155, 94, 0.32); /* 暗金弱档（边框） */
  --p7-cinnabar:     #9B2929;            /* 朱砂红（印章 / 点睛） */
  --p7-cinnabar-bright: #C73D3D;         /* 朱砂亮（hover / 点缀） */
  --p7-bone:         rgba(230, 217, 180, 0.55); /* 骨白（meta 文字） */
  --p7-mist:         rgba(184, 155, 94, 0.06); /* 雾金（弱底纹） */
  --p7-ink-cloud:    rgba(155, 41, 41, 0.04);  /* 朱砂雾（点睛底纹） */

  /* 字体 */
  --p7-font-display: "Slender Gold", "HuiZongShouJin", "Noto Serif SC", serif;
  --p7-font-serif:   "Noto Serif SC", "Songti SC", "STSong", serif;
  --p7-font-mono:    "JetBrains Mono", "Source Han Mono", monospace;

  /* 字号刻度 · P7.4.15 瘦金体升档（Steven: "瘦金体本来就是大的好看"）
   * display 三档 +33~40%，让瘦金体真正展开笔锋；body 以下不变（不应该用瘦金） */
  --p7-fs-hero:      3.4rem;   /* 卷首大字（瘦金满力展开） */
  --p7-fs-title:     2.2rem;   /* 区块标题 */
  --p7-fs-h:         1.6rem;   /* 卡片标题 */
  --p7-fs-body:      0.96rem;  /* 主文 */
  --p7-fs-meta:      0.84rem;  /* 小注 */
  --p7-fs-batch:     0.74rem;  /* 旁批 */
  --p7-fs-chip:      0.70rem;  /* 边批 */

  /* 字距 */
  --p7-ls-篆:        0.42em;   /* 篆刻字 */
  --p7-ls-标:        0.18em;   /* 标题字 */
  --p7-ls-注:        0.14em;   /* 注字 */

  /* 线宽 */
  --p7-stroke-hair:  0.5px;    /* 极细金线（utility） */
  --p7-stroke-thin:  1px;      /* 细金线 */
  --p7-stroke-base:  1.5px;    /* 基础线（朱砂方框） */

  /* 节奏 */
  --p7-ease-jade:    cubic-bezier(0.4, 0, 0.2, 1);
  --p7-dur-quick:    0.32s;
  --p7-dur-base:     0.5s;
  --p7-dur-slow:     0.85s;
  --p7-dur-breath:   8s;

  /* 圆角 */
  --p7-r-jade:       2px;      /* 玉简（极小） */
  --p7-r-folio:      4px;      /* 版心（小） */
}

/* ──────────────────────────────────────────────────────────────────────────
 * 1. Abyssal Base · .abyss-bg
 *    极渊黑底 + 90 颗星点（box-shadow 散布法 · 60 远 + 30 近）+ 呼吸闪烁
 *    v1.0.2 (2026-04-29 · Steven 微调)：透明度上限砍 15%（远 0.30-0.50, 近 0.65-0.80），
 *    主星压到 6 颗（1.6-2px + blur halo），其余严格 1px。避免「屏幕灰尘」效应，强化景深
 * ────────────────────────────────────────────────────────────────────────── */
.abyss-bg {
  background-color: var(--p7-abyss);
  color: var(--p7-gold-bright);
  font-family: var(--p7-font-serif);
  position: relative;
  isolation: isolate;
  min-height: 100%;
}
/* 星点层 A · 远星 60 颗（暗，呼吸 8s 正相位） */
.abyss-bg::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 1px; height: 1px;
  background: transparent;
  z-index: 0;
  pointer-events: none;
  box-shadow: 1309px 228px 0 0 rgba(230, 217, 180, 0.31), 563px 501px 0 0 rgba(230, 217, 180, 0.34), 1508px 209px 0 0 rgba(230, 217, 180, 0.44), 1116px 178px 0 0 rgba(230, 217, 180, 0.42), 65px 61px 0 0 rgba(230, 217, 180, 0.32), 476px 1034px 0 0 rgba(230, 217, 180, 0.42), 1149px 407px 0 0 rgba(230, 217, 180, 0.44), 1436px 859px 0 0 rgba(230, 217, 180, 0.34), 1206px 569px 0 0 rgba(230, 217, 180, 0.46), 13px 326px 0 0 rgba(230, 217, 180, 0.44), 696px 569px 0 0 rgba(230, 217, 180, 0.33), 1563px 689px 0 0 rgba(230, 217, 180, 0.32), 778px 198px 0 0 rgba(230, 217, 180, 0.37), 704px 541px 0 0 rgba(230, 217, 180, 0.46), 1494px 940px 0 0 rgba(230, 217, 180, 0.41), 775px 161px 0 0 rgba(230, 217, 180, 0.41), 1287px 740px 0 0 rgba(230, 217, 180, 0.42), 1442px 142px 0 0 rgba(230, 217, 180, 0.31), 466px 592px 0 0 rgba(230, 217, 180, 0.5), 476px 206px 0 0 rgba(230, 217, 180, 0.38), 928px 747px 0 0 rgba(230, 217, 180, 0.33), 727px 429px 0 0 rgba(230, 217, 180, 0.43), 1437px 146px 0 0 rgba(230, 217, 180, 0.42), 350px 1093px 0 0 rgba(230, 217, 180, 0.45), 334px 946px 0 0 rgba(230, 217, 180, 0.38), 1310px 449px 0 0 rgba(230, 217, 180, 0.44), 1573px 114px 0 0 rgba(230, 217, 180, 0.35), 65px 646px 0 0 rgba(230, 217, 180, 0.38), 135px 432px 0 0 rgba(230, 217, 180, 0.48), 1161px 644px 0 0 rgba(230, 217, 180, 0.34), 1022px 810px 0 0 rgba(230, 217, 180, 0.48), 1316px 939px 0 0 rgba(230, 217, 180, 0.33), 285px 505px 0 0 rgba(230, 217, 180, 0.45), 1103px 538px 0 0 rgba(230, 217, 180, 0.45), 877px 817px 0 0 rgba(230, 217, 180, 0.37), 283px 1043px 0 0 rgba(230, 217, 180, 0.4), 1547px 96px 0 0 rgba(230, 217, 180, 0.47), 313px 327px 0 0 rgba(230, 217, 180, 0.46), 864px 130px 0 0 rgba(230, 217, 180, 0.38), 1220px 958px 0 0 rgba(230, 217, 180, 0.41), 1133px 23px 0 0 rgba(230, 217, 180, 0.44), 234px 1099px 0 0 rgba(230, 217, 180, 0.45), 1574px 696px 0 0 rgba(230, 217, 180, 0.32), 890px 323px 0 0 rgba(230, 217, 180, 0.39), 1478px 539px 0 0 rgba(230, 217, 180, 0.49), 1560px 365px 0 0 rgba(230, 217, 180, 0.4), 217px 611px 0 0 rgba(230, 217, 180, 0.47), 1039px 407px 0 0 rgba(230, 217, 180, 0.33), 1561px 330px 0 0 rgba(230, 217, 180, 0.41), 1594px 1086px 0 0 rgba(230, 217, 180, 0.48), 1226px 663px 0 0 rgba(230, 217, 180, 0.4), 229px 743px 0 0 rgba(230, 217, 180, 0.48), 629px 490px 0 0 rgba(230, 217, 180, 0.31), 1161px 161px 0 0 rgba(230, 217, 180, 0.32), 995px 141px 0 0 rgba(230, 217, 180, 0.5), 1090px 257px 0 0 rgba(230, 217, 180, 0.33), 973px 338px 0 0 rgba(230, 217, 180, 0.35), 1242px 866px 0 0 rgba(230, 217, 180, 0.49), 1104px 411px 0 0 rgba(230, 217, 180, 0.44), 817px 764px 0 0 rgba(230, 217, 180, 0.39);
  animation: p7-star-breath var(--p7-dur-breath) ease-in-out infinite;
}
/* 星点层 B · 近星 30 颗（24 普通 1px + 6 主星 1.6-2px+blur halo，呼吸 8s 反相位） */
.abyss-bg::after {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 1px; height: 1px;
  background: transparent;
  z-index: 0;
  pointer-events: none;
  box-shadow: 1180px 968px 0 0 rgba(230, 217, 180, 0.68), 340px 832px 0 0 rgba(230, 217, 180, 0.71), 692px 43px 0 0 rgba(230, 217, 180, 0.73), 200px 103px 0 0 rgba(230, 217, 180, 0.73), 223px 509px 0 0 rgba(230, 217, 180, 0.67), 418px 643px 2.2px 0.4px rgba(184, 155, 94, 0.72), 451px 14px 0 0 rgba(230, 217, 180, 0.66), 833px 389px 0 0 rgba(230, 217, 180, 0.66), 30px 191px 0 0 rgba(230, 217, 180, 0.77), 154px 907px 0 0 rgba(230, 217, 180, 0.76), 438px 270px 0 0 rgba(230, 217, 180, 0.74), 287px 864px 0 0 rgba(230, 217, 180, 0.67), 481px 826px 1.7px 0.5px rgba(230, 217, 180, 0.71), 380px 140px 0 0 rgba(230, 217, 180, 0.73), 647px 148px 2.1px 0.4px rgba(184, 155, 94, 0.7), 1138px 996px 0 0 rgba(230, 217, 180, 0.67), 1101px 436px 1.8px 0.3px rgba(184, 155, 94, 0.75), 584px 866px 0 0 rgba(230, 217, 180, 0.74), 322px 116px 0 0 rgba(184, 155, 94, 0.77), 725px 867px 0 0 rgba(230, 217, 180, 0.7), 145px 1052px 0 0 rgba(230, 217, 180, 0.68), 468px 138px 0 0 rgba(230, 217, 180, 0.77), 500px 756px 2.0px 0.4px rgba(184, 155, 94, 0.73), 110px 201px 0 0 rgba(230, 217, 180, 0.66), 799px 543px 0 0 rgba(230, 217, 180, 0.77), 1196px 976px 0 0 rgba(230, 217, 180, 0.72), 1059px 924px 0 0 rgba(230, 217, 180, 0.67), 821px 120px 0 0 rgba(184, 155, 94, 0.67), 119px 124px 0 0 rgba(184, 155, 94, 0.75), 1268px 167px 2.0px 0.4px rgba(230, 217, 180, 0.74);
  animation: p7-star-breath var(--p7-dur-breath) ease-in-out infinite reverse;
  animation-delay: -3s;
}
@keyframes p7-star-breath {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1.0;  }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 2. Cloud Overlay · .ink-cloud
 *    背景层极低透明度动态墨晕（空间深度，缓慢漂移）
 * ────────────────────────────────────────────────────────────────────────── */
.ink-cloud {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 18% 20%, var(--p7-mist), transparent 65%),
    radial-gradient(ellipse 70% 45% at 82% 78%, var(--p7-ink-cloud), transparent 65%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(184, 155, 94, 0.025), transparent 70%);
  filter: blur(2px);
  animation: p7-ink-drift 38s ease-in-out infinite;
}
@keyframes p7-ink-drift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
  33%      { transform: translate(-2%, 1%) scale(1.04); opacity: 0.85; }
  66%      { transform: translate(2%, -1%) scale(0.98); opacity: 0.95; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 3. Folio Layout · .folio-banxin
 *    古籍版心（天头 / 地脚 / 竹丝栏）
 * ────────────────────────────────────────────────────────────────────────── */
.folio-banxin {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  padding: 32px clamp(20px, 4vw, 48px) 28px;
  border: var(--p7-stroke-hair) solid var(--p7-gold-dim);
  border-radius: var(--p7-r-folio);
  background: var(--p7-abyss-soft);
  isolation: isolate;
}
/* 天头 / 地脚共有：上下两道极细竹丝栏 */
.folio-banxin::before,
.folio-banxin::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--p7-gold-dim) 8%, var(--p7-gold-dim) 92%, transparent);
  pointer-events: none;
}
.folio-banxin::before { top: 18px; }
.folio-banxin::after  { bottom: 16px; }

.folio-tianhou {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-top: 6px;
}
.folio-tianhou-eyebrow {
  font-family: var(--p7-font-display);
  font-size: var(--p7-fs-batch);
  letter-spacing: var(--p7-ls-篆);
  color: var(--p7-gold);
  margin: 0;
}
.folio-tianhou-title {
  font-family: var(--p7-font-display);
  font-size: var(--p7-fs-title);
  letter-spacing: var(--p7-ls-标);
  color: var(--p7-gold-bright);
  margin: 0;
  font-weight: 500;
}

.folio-banxin-body {
  /* 版心主体；外层提供必需的层次，内部让 P7.2 / P7.3 自填 */
  position: relative;
}

.folio-dijiao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
  font-size: var(--p7-fs-batch);
  letter-spacing: var(--p7-ls-注);
  color: var(--p7-bone);
  font-family: var(--p7-font-serif);
}

/* 竹丝栏 utility（卡片间分隔） */
.folio-zhusilan {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--p7-gold-dim) 12%, var(--p7-gold-dim) 88%, transparent);
  border: 0;
  margin: 14px 0;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 4. Jade Slip · .jade-slip
 *    玉简竖容器（暗金边 + 微光 + 极低噪粒）
 * ────────────────────────────────────────────────────────────────────────── */
.jade-slip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 14px 18px;
  min-width: 78px;
  background: linear-gradient(180deg, rgba(184, 155, 94, 0.05), rgba(184, 155, 94, 0.01));
  border: var(--p7-stroke-hair) solid var(--p7-gold-dim);
  border-radius: var(--p7-r-jade);
  isolation: isolate;
  transition: border-color var(--p7-dur-base) var(--p7-ease-jade),
              box-shadow var(--p7-dur-base) var(--p7-ease-jade),
              transform var(--p7-dur-base) var(--p7-ease-jade);
}
.jade-slip::before {
  /* 微光顶端 + 底端（玉简光感） */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(184, 155, 94, 0.18) 0%, transparent 12%),
    linear-gradient(0deg,   rgba(184, 155, 94, 0.10) 0%, transparent 10%);
  border-radius: inherit;
  pointer-events: none;
}
.jade-slip:hover,
.jade-slip:focus-within {
  border-color: rgba(184, 155, 94, 0.78);
  box-shadow: 0 0 0 1px rgba(184, 155, 94, 0.28),
              0 0 16px -4px rgba(184, 155, 94, 0.32);
  transform: translateY(-1px);
}
.jade-slip-slot {
  font-family: var(--p7-font-display);
  font-size: var(--p7-fs-batch);
  letter-spacing: var(--p7-ls-注);
  color: var(--p7-gold);
}
.jade-slip-stem,
.jade-slip-branch {
  font-family: var(--p7-font-display);
  font-size: var(--p7-fs-hero);
  color: var(--p7-gold-bright);
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 0 8px rgba(184, 155, 94, 0.18);
}
.jade-slip-meta {
  font-family: var(--p7-font-serif);
  font-size: var(--p7-fs-meta);
  color: var(--p7-bone);
  letter-spacing: var(--p7-ls-注);
}
.jade-slip-batch {
  /* 旁批：小号瘦金体垂挂主干下方，极细引导线 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 6px;
  border-top: var(--p7-stroke-hair) solid var(--p7-gold-dim);
  width: 80%;
  font-family: var(--p7-font-display);
  font-size: var(--p7-fs-meta);
  color: var(--p7-gold);
  letter-spacing: var(--p7-ls-注);
}

/* ──────────────────────────────────────────────────────────────────────────
 * 5. Gold Wireframe · .gold-wire
 *    0.5px 精密金线 utility（直线 / 弧线 / 圆环）
 * ────────────────────────────────────────────────────────────────────────── */
.gold-wire { stroke: var(--p7-gold); stroke-width: var(--p7-stroke-hair); fill: none; }
.gold-wire-bright { stroke: var(--p7-gold-bright); stroke-width: var(--p7-stroke-hair); fill: none; }
.gold-wire-dim    { stroke: var(--p7-gold-dim);    stroke-width: var(--p7-stroke-hair); fill: none; }

.hr-gold {
  height: 0;
  border: 0;
  border-top: var(--p7-stroke-hair) solid var(--p7-gold-dim);
  margin: 18px 0;
}
.box-gold {
  border: var(--p7-stroke-hair) solid var(--p7-gold-dim);
  border-radius: var(--p7-r-jade);
}
.box-gold-strong {
  border: var(--p7-stroke-thin) solid var(--p7-gold);
  border-radius: var(--p7-r-jade);
}

/* ──────────────────────────────────────────────────────────────────────────
 * 6. Cinnabar Seal · .cinnabar-seal
 *    朱砂印章（SVG 模板 + filter）
 *    用法：包裹一个 <svg> 印章；class 切换 size 和 variant
 *    - .cinnabar-seal-corner : 微型角印（盖在玉简侧边）
 *    - .cinnabar-seal-block  : 方块朱砂方框（用神 / 忌神）
 *    - .cinnabar-seal-large  : 大印（落款）
 * ────────────────────────────────────────────────────────────────────────── */
.cinnabar-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--p7-font-display);
  color: #fff;
  background: var(--p7-cinnabar);
  border: 1px solid var(--p7-cinnabar-bright);
  letter-spacing: var(--p7-ls-注);
  /* 朱砂噪粒：用 multiple inset shadow 模拟 */
  box-shadow:
    inset 0 0 0 1px rgba(199, 61, 61, 0.6),
    inset 0 0 4px 1px rgba(155, 41, 41, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 0 8px rgba(199, 61, 61, 0.15);
  transform: rotate(-2deg);
  position: relative;
  isolation: isolate;
}
.cinnabar-seal::after {
  /* 朱砂粒纹理 */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 0.8px at 22% 31%, rgba(0, 0, 0, 0.35), transparent),
    radial-gradient(circle 0.6px at 67% 18%, rgba(0, 0, 0, 0.25), transparent),
    radial-gradient(circle 0.7px at 41% 72%, rgba(0, 0, 0, 0.35), transparent),
    radial-gradient(circle 0.5px at 78% 55%, rgba(0, 0, 0, 0.30), transparent),
    radial-gradient(circle 0.6px at 14% 86%, rgba(0, 0, 0, 0.30), transparent);
  background-repeat: no-repeat;
  pointer-events: none;
  mix-blend-mode: multiply;
  border-radius: inherit;
}

.cinnabar-seal-corner {
  width: 24px;
  height: 24px;
  font-size: 0.62rem;
  border-radius: 1px;
  padding: 2px;
  line-height: 1;
}
.cinnabar-seal-block {
  padding: 6px 14px;
  font-size: 0.85rem;
  border-radius: 1px;
  transform: rotate(0deg);
}
.cinnabar-seal-large {
  width: 64px;
  height: 64px;
  font-size: 1.3rem;
  border-radius: 2px;
  flex-direction: column;
  line-height: 1.1;
}

/* CTA 印章（替代 primary-cta 实心按钮） */
.cinnabar-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  background: transparent;
  border: var(--p7-stroke-hair) solid var(--p7-gold);
  border-radius: var(--p7-r-jade);
  color: var(--p7-gold-bright);
  font-family: var(--p7-font-display);
  font-size: 0.96rem;
  letter-spacing: var(--p7-ls-标);
  cursor: pointer;
  position: relative;
  transition: border-color var(--p7-dur-base) var(--p7-ease-jade),
              color var(--p7-dur-base) var(--p7-ease-jade),
              box-shadow var(--p7-dur-base) var(--p7-ease-jade);
}
.cinnabar-cta::before {
  /* 落角朱砂小印 */
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  background: var(--p7-cinnabar);
  border: 0.5px solid var(--p7-cinnabar-bright);
  border-radius: 1px;
  transform: rotate(8deg);
}
.cinnabar-cta:hover,
.cinnabar-cta:focus-visible {
  border-color: var(--p7-gold-bright);
  color: #fff;
  box-shadow: 0 0 0 1px var(--p7-gold-dim),
              0 0 16px -4px rgba(184, 155, 94, 0.4);
  outline: none;
}

/* ──────────────────────────────────────────────────────────────────────────
 * 7. Typography System
 *    瘦金体大字 + 衬线体正文（utility class）
 * ────────────────────────────────────────────────────────────────────────── */
.p7-typo-hero    { font-family: var(--p7-font-display); font-size: var(--p7-fs-hero);  letter-spacing: var(--p7-ls-标); color: var(--p7-gold-bright); font-weight: 500; }
.p7-typo-title   { font-family: var(--p7-font-display); font-size: var(--p7-fs-title); letter-spacing: var(--p7-ls-标); color: var(--p7-gold-bright); font-weight: 500; }
.p7-typo-h       { font-family: var(--p7-font-display); font-size: var(--p7-fs-h);     letter-spacing: var(--p7-ls-标); color: var(--p7-gold-bright); font-weight: 500; }
.p7-typo-body    { font-family: var(--p7-font-serif);   font-size: var(--p7-fs-body);  letter-spacing: 0.04em; color: var(--p7-gold-bright); line-height: 1.65; }
.p7-typo-meta    { font-family: var(--p7-font-serif);   font-size: var(--p7-fs-meta);  letter-spacing: 0.03em; color: var(--p7-bone);        line-height: 1.55; }
.p7-typo-batch   { font-family: var(--p7-font-display); font-size: var(--p7-fs-batch); letter-spacing: var(--p7-ls-篆);  color: var(--p7-gold); }
.p7-typo-chip    { font-family: var(--p7-font-serif);   font-size: var(--p7-fs-chip);  letter-spacing: 0.18em; color: var(--p7-gold); text-transform: none; }

.p7-typo-vert    { writing-mode: vertical-rl; text-orientation: upright; }
.p7-typo-cinnabar { color: var(--p7-cinnabar-bright); }

/* ──────────────────────────────────────────────────────────────────────────
 * 响应式 + a11y
 * ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .abyss-bg::before,
  .abyss-bg::after,
  .ink-cloud { animation: none; }
}
@media (max-width: 720px) {
  :root {
    /* P7.4.15 · mobile 同步升档（瘦金体在小屏上仍需展开） */
    --p7-fs-hero:  2.6rem;
    --p7-fs-title: 1.78rem;
    --p7-fs-h:     1.35rem;
  }
  .folio-banxin { padding: 24px 18px 22px; gap: 18px; }
  .jade-slip { padding: 18px 10px 14px; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * 调试 utility（仅 demo 页用）
 * ────────────────────────────────────────────────────────────────────────── */
.p7-demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.p7-demo-section {
  margin-bottom: 56px;
}
.p7-demo-section-head {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: var(--p7-stroke-hair) solid var(--p7-gold-dim);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * P7.2 · 八字 atlas 容器适配（chart 主页 + detail 兼容层）
 * ════════════════════════════════════════════════════════════════════════ */
.bazi-atlas-panel.p7-scope,
.star-atlas-panel.p7-scope {
  background: var(--p7-abyss);
  padding: 32px clamp(20px, 4vw, 48px) 48px;
  min-height: 100vh;
}
.bazi-atlas-panel.p7-scope .bazi-atlas-shell,
.star-atlas-panel.p7-scope .star-atlas-shell {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  color: var(--p7-gold-bright);
}
.bazi-atlas-panel .folio-banxin {
  margin-bottom: 24px;
}
/* P7.2 · chart 玉简群专属 hover 联动（玉简 hover 时整组其他玉简略暗，强化焦点） */
.bazi-jade-group:hover .jade-slip:not(:hover) {
  opacity: 0.65;
  transition: opacity var(--p7-dur-base) var(--p7-ease-jade);
}
/* P7.2 · 神煞角印 hover 显示完整名（tooltip 走原生 title） */
.jade-slip-seals .cinnabar-seal:hover {
  transform: rotate(0deg) scale(1.15);
  transition: transform var(--p7-dur-quick) var(--p7-ease-jade);
}
/* P7.2 · detail 兼容层：把内部 v6 panel 的 tone-ember 蒙暗金 */
.bazi-atlas-panel.p7-scope .display-chapter,
.bazi-atlas-panel.p7-scope .panel,
.bazi-atlas-panel.p7-scope .display-panel-card {
  background-color: var(--p7-abyss-soft) !important;
  border-color: var(--p7-gold-dim) !important;
  color: var(--p7-gold-bright) !important;
}
.bazi-atlas-panel.p7-scope .display-panel-grid.tone-ember,
.bazi-atlas-panel.p7-scope .tone-ember {
  background: transparent !important;
}
.bazi-atlas-panel.p7-scope .eyebrow {
  color: var(--p7-gold) !important;
  font-family: var(--p7-font-display);
  letter-spacing: var(--p7-ls-注);
}
.bazi-atlas-panel.p7-scope h3,
.bazi-atlas-panel.p7-scope h4,
.bazi-atlas-panel.p7-scope h5,
.bazi-atlas-panel.p7-scope h6 {
  font-family: var(--p7-font-display) !important;
  color: var(--p7-gold-bright) !important;
}
.bazi-atlas-panel.p7-scope .chip {
  background: rgba(184, 155, 94, 0.06);
  border: 0.5px solid var(--p7-gold-dim);
  color: var(--p7-gold);
  border-radius: 1px;
  padding: 3px 10px;
  font-size: var(--p7-fs-meta);
  font-family: var(--p7-font-serif);
  letter-spacing: 0.04em;
}
.bazi-atlas-panel.p7-scope .ghost-button,
.bazi-atlas-panel.p7-scope .primary-cta {
  background: transparent !important;
  border: 0.5px solid var(--p7-gold) !important;
  color: var(--p7-gold-bright) !important;
  font-family: var(--p7-font-display);
  letter-spacing: var(--p7-ls-标);
  border-radius: 2px;
}
.bazi-atlas-panel.p7-scope .warning-list,
.bazi-atlas-panel.p7-scope .warning-item {
  background: transparent !important;
  border-color: var(--p7-cinnabar) !important;
  color: var(--p7-cinnabar-bright) !important;
}
@media (max-width: 720px) {
  .bazi-atlas-panel.p7-scope { padding: 24px 18px 32px; }
  .bazi-jade-group { gap: 10px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * P7.2.5 · 星盘 atlas 容器（chart 主页 P7 速改 + detail 兼容层）
 * 真正的浑天仪 4 层游环重画在 P7.3
 * ════════════════════════════════════════════════════════════════════════ */
/* 镜像 .bazi-atlas-panel.p7-scope 的兼容 shim 到星盘 */
.star-atlas-panel.p7-scope .display-chapter,
.star-atlas-panel.p7-scope .panel,
.star-atlas-panel.p7-scope .display-panel-card,
.star-atlas-panel.p7-scope .star-observatory-panel,
.star-atlas-panel.p7-scope .star-identity-band,
.star-atlas-panel.p7-scope .star-support-panel,
.star-atlas-panel.p7-scope .star-time-layer,
.star-atlas-panel.p7-scope .star-career-evidence {
  background-color: var(--p7-abyss-soft) !important;
  border-color: var(--p7-gold-dim) !important;
  color: var(--p7-gold-bright) !important;
}
.star-atlas-panel.p7-scope [class*="tone-"],
.star-atlas-panel.p7-scope .tone-ember,
.star-atlas-panel.p7-scope .tone-mist {
  background: transparent !important;
}
.star-atlas-panel.p7-scope .eyebrow {
  color: var(--p7-gold) !important;
  font-family: var(--p7-font-display);
  letter-spacing: var(--p7-ls-注);
}
.star-atlas-panel.p7-scope h3,
.star-atlas-panel.p7-scope h4,
.star-atlas-panel.p7-scope h5,
.star-atlas-panel.p7-scope h6 {
  font-family: var(--p7-font-display) !important;
  color: var(--p7-gold-bright) !important;
}
.star-atlas-panel.p7-scope .chip {
  background: rgba(184, 155, 94, 0.06);
  border: 0.5px solid var(--p7-gold-dim);
  color: var(--p7-gold);
  border-radius: 1px;
  padding: 3px 10px;
  font-size: var(--p7-fs-meta);
  font-family: var(--p7-font-serif);
  letter-spacing: 0.04em;
}
.star-atlas-panel.p7-scope .ghost-button,
.star-atlas-panel.p7-scope .primary-cta {
  background: transparent !important;
  border: 0.5px solid var(--p7-gold) !important;
  color: var(--p7-gold-bright) !important;
  font-family: var(--p7-font-display);
  letter-spacing: var(--p7-ls-标);
  border-radius: 2px;
}
.star-atlas-panel.p7-scope .warning-list,
.star-atlas-panel.p7-scope .warning-item {
  background: transparent !important;
  border-color: var(--p7-cinnabar) !important;
  color: var(--p7-cinnabar-bright) !important;
}

/* P7.2.5 · star wheel 暗金圆框（P7.3 真重画前的过渡视觉） */
.star-p7-wheel-frame {
  position: relative;
}
.star-p7-wheel-shell {
  position: relative;
  border: 0.5px solid var(--p7-gold-dim);
  border-radius: 50%;
  padding: 14px;
  background:
    radial-gradient(circle at 50% 50%, rgba(184, 155, 94, 0.05), transparent 70%);
  box-shadow:
    inset 0 0 0 1px rgba(184, 155, 94, 0.1),
    0 0 24px -8px rgba(184, 155, 94, 0.18);
  isolation: isolate;
}
.star-p7-wheel-shell::before {
  /* 第二圈极细装饰环（向"机械浑天仪"过渡） */
  content: "";
  position: absolute;
  inset: 6px;
  border: 0.5px solid rgba(184, 155, 94, 0.18);
  border-radius: 50%;
  pointer-events: none;
}
.star-p7-wheel-shell svg,
.star-p7-wheel-shell .star-wheel-svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 6px rgba(184, 155, 94, 0.18));
}
/* 把旧 wheel 内部的颜色尽量蒙到暗金 */
.star-atlas-panel.p7-scope .star-wheel-svg [stroke="#"]:not([stroke="#0A0A0C"]),
.star-atlas-panel.p7-scope .star-wheel-svg [stroke="black"] {
  stroke: var(--p7-gold) !important;
}
.star-atlas-panel.p7-scope .star-wheel-svg text {
  fill: var(--p7-gold-bright) !important;
  font-family: var(--p7-font-display) !important;
}

.star-p7-signal-rail {
  position: relative;
}
@media (max-width: 720px) {
  .star-p7-stage { grid-template-columns: 1fr !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
 * Plan 7 · 宋韵七件套 v1.2 · 「暗金游丝」全面替换 border
 *
 * v1.0 → v1.2 演进：
 *   v1.0：朱砂大块 + 实线 border
 *   v1.1：杀朱砂、零边框、改背景微提
 *   v1.2：引入 Steven 钦定「暗金游丝」三件套（h / v / box）+ 浑天 wireframe-ring
 *
 * 核心铁律（Steven 2026-04-29 锁定）：
 *   ① 朱砂只做"刺点"绝不做"容器"（命主签名印 + 神煞角批 共 2 处）
 *   ② 容器边界用 0.5px 暗金游丝（中实两端虚 fade-out + 内发光金属反光）
 *   ③ 浑天三环必须 wireframe-ring（双层 inset + outset glow）
 * ════════════════════════════════════════════════════════════════════════ */

:root {
  --p7-gold-wire-base: rgba(184, 155, 94, 0.25);
  --p7-gold-wire-glow: rgba(184, 155, 94, 0.05);
  --p7-gold-wire-bright: rgba(184, 155, 94, 0.45);
}

/* ──────────────────────────────────────────────────────────────────────────
 * §A · folio-banxin · 整框零 border + 背景微提
 * ────────────────────────────────────────────────────────────────────────── */
.folio-banxin {
  border: 0 !important;
  background: var(--p7-abyss-soft) !important;
}
.folio-banxin::before,
.folio-banxin::after {
  display: none !important;
}
.folio-zhusilan {
  display: none;
}
.box-gold,
.box-gold-strong {
  border: 0 !important;
  background: rgba(184, 155, 94, 0.04);
}
.section-gap-md { height: 28px; }
.section-gap-lg { height: 40px; }

/* ──────────────────────────────────────────────────────────────────────────
 * §B · 暗金游丝三件套（Steven 钦定 · 直接 paste 版）
 * ────────────────────────────────────────────────────────────────────────── */

/* B.1 · 水平游丝分隔（替代 hr / cinnabar-cta 上方等所有水平断点） */
.wireframe-divider-h {
  height: 1px;
  width: 100%;
  border: none;
  margin: 24px 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--p7-gold-wire-base) 20%,
    var(--p7-gold-wire-base) 80%,
    transparent 100%
  );
  position: relative;
}

/* 章回断点（短款，居中 40% 宽 —— 用于主断上方 / CTA 上方） */
.wireframe-divider-h.is-short {
  width: 40%;
  margin: 24px auto;
}

/* 章回断点（更短，居中 28% 宽） */
.wireframe-divider-h.is-mini {
  width: 28%;
  margin: 18px auto;
}

/* B.2 · 竖向游丝分隔（玉简之间） */
.wireframe-divider-v {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--p7-gold-wire-base) 20%,
    var(--p7-gold-wire-base) 80%,
    transparent 100%
  );
}

/* B.3 · 游丝框（精密玉简框） */
.wireframe-box {
  border: 0.5px solid var(--p7-gold-wire-base);
  border-radius: 4px;
  background: transparent;
  box-shadow: inset 0 0 24px var(--p7-gold-wire-glow);
  position: relative;
}

/* B.4 · 浑天专用同心环（陀飞轮机械感） */
.wireframe-ring {
  border: 0.5px solid var(--p7-gold-wire-base);
  border-radius: 50%;
  background: transparent;
  box-shadow:
    inset 0 0 32px var(--p7-gold-wire-glow),
    0 0 16px var(--p7-gold-wire-glow);
}

/* ──────────────────────────────────────────────────────────────────────────
 * §C · 朱砂归印 · 零容忍 · 砍掉所有 cinnabar 容器残留 border
 * ────────────────────────────────────────────────────────────────────────── */

/* §C · v1.3 决议：朱砂在屏幕上的「容器形态」全部清零（Steven 2026-04-29 拍板）
 *  根因：CSS 模拟的朱砂红块无论多斑驳，都会被读为 SaaS dashboard 的红色 badge
 *        屏幕介质天然无法还原朱砂泥的物质感（厚度 / 不规则边缘 / 纸纤维吸印）
 *  铁律：朱砂红仅允许出现在「真警示性温度」语境，且必须是文字形态非容器形态
 *  保留：.jade-slip-shensha-vertical （神煞 / 旬空小红宋体竖批）—— 这是文字非容器
 *  砍掉：.cinnabar-seal-block / .cinnabar-seal-corner / .cinnabar-mark / .cinnabar-cta
 *       全部 display:none 永不复用
 */
.cinnabar-seal-block,
.cinnabar-seal-corner,
.cinnabar-mark,
.cinnabar-cta {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
 * §D · 玉简 v1.2：零 border，靠竖向游丝分隔（不再每柱画框）
 * ────────────────────────────────────────────────────────────────────────── */
.jade-slip {
  border: 0 !important;
  background: transparent !important;
  position: relative;
  isolation: isolate;
  padding: 36px 16px 28px !important;
  text-align: center;
}
.jade-slip::before {
  display: none !important;
}
.jade-slip:hover {
  background: rgba(184, 155, 94, 0.04) !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

/* ──────────────────────────────────────────────────────────────────────────
 * §E · vertical-rl 真竖排（藏干 / 神煞 / 批注）
 * ────────────────────────────────────────────────────────────────────────── */
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.5em;
  line-height: 1.85;
}
.jade-slip-canggan {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--p7-font-display);
  font-size: 0.56rem;
  letter-spacing: 0.45em;
  color: rgba(184, 155, 94, 0.65);
  line-height: 1.6;
  margin-top: 6px;
}
.jade-slip-shensha-vertical {
  position: absolute;
  left: 4px;
  top: 12px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--p7-font-serif);
  font-size: 0.56rem;
  letter-spacing: 0.4em;
  color: rgba(199, 61, 61, 0.78);
  line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────────────────────
 * §F · 次要数据（sans-serif + 40% 透明）
 * ────────────────────────────────────────────────────────────────────────── */
.p7-typo-secondary {
  font-family: ui-sans-serif, -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: rgba(230, 217, 180, 0.40);
  line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────────────────────
 * §G · 主断 / 时令 句（碑文式宽字距）
 * ────────────────────────────────────────────────────────────────────────── */
.zhuduan-line {
  font-family: var(--p7-font-display);
  font-size: 1.05rem;
  letter-spacing: 0.32em;
  color: var(--p7-gold-bright);
  text-align: center;
  margin: 0;
  text-indent: 0.32em;
  line-height: 2;
}
.shilign-line {
  font-family: var(--p7-font-display);
  font-size: 0.92rem;
  letter-spacing: 0.24em;
  color: rgba(230, 217, 180, 0.78);
  text-align: center;
  line-height: 1.95;
  text-indent: 0.24em;
  margin: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
 * §H · CTA 极简（透明 + 底部游丝，hover 拉满）
 * ────────────────────────────────────────────────────────────────────────── */
.guji-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  background: transparent;
  border: 0;
  color: rgba(230, 217, 180, 0.78);
  font-family: var(--p7-font-display);
  font-size: 1.0rem;
  letter-spacing: var(--p7-ls-标);
  cursor: pointer;
  position: relative;
  transition: color var(--p7-dur-base) var(--p7-ease-jade);
}
.guji-cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28%;
  height: 0.5px;
  background: var(--p7-gold-wire-bright);
  transition: width var(--p7-dur-base) var(--p7-ease-jade);
}
.guji-cta:hover {
  color: var(--p7-gold-bright);
}
.guji-cta:hover::after {
  width: 100%;
}

/* ──────────────────────────────────────────────────────────────────────────
 * §I · 玉简 hover 联动（其他玉简略暗，强化焦点）
 * ────────────────────────────────────────────────────────────────────────── */
.bazi-jade-group:hover .jade-slip:not(:hover) {
  opacity: 0.5;
  transition: opacity var(--p7-dur-base) var(--p7-ease-jade);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * P7.3 v1.4 · 浑天 wheel 固定盘面 + 强制文本字形
 *   语义盘面保持静止，避免 Safari/PWA 恢复后 SVG 文字与盘环变换失步。
 *   font-variant-emoji: text 强制所有 SVG text 走文本字形（黑白线条），
 *   避免 ♈♀♃ 等 Unicode 在 Chrome 被 fallback 成彩色 sticker emoji。
 * ════════════════════════════════════════════════════════════════════════ */
.star-wheel-svg,
.star-wheel-svg text {
  font-variant-emoji: text;
  -webkit-font-feature-settings: "ss01";
}
.star-wheel-ring { transform: none; }

/* ═══════════════════════════════════════════════════════════════════════════
 * P7 v1.6.1 · 卡 #7 · 字重光晕调优（防致盲 / 防糊 / 防强光）
 *   ① 全局抗锯齿（macOS / iOS 高 DPI 屏必备）
 *   ② 瘦金体大字加 1px halo「增肉」—— 防细笔画在 OLED 强光下糊成一团
 *   ③ 主大字双层 halo —— 命主名 / 干支级别
 *   ④ 砍掉所有 #FFFFFF —— 改用稍暖的 #F4ECC8 象牙白
 * ════════════════════════════════════════════════════════════════════════ */
.abyss-bg,
.p7-scope,
.abyss-bg * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.abyss-bg .p7-typo-hero,
.abyss-bg .p7-typo-title,
.abyss-bg .zhuduan-line,
.abyss-bg .shilign-line,
.abyss-bg .folio-tianhou-title {
  text-shadow: 0 0 1px rgba(184, 155, 94, 0.22);
}
.abyss-bg h2[style*="2.6rem"],
.bazi-jade-group .jade-slip [style*="font-size:2"],
.bazi-jade-group .jade-slip [style*="font-size: 2"] {
  text-shadow:
    0 0 1px rgba(184, 155, 94, 0.32),
    0 0 4px rgba(184, 155, 94, 0.16);
}
/* 日主柱原本是纯白 #FFF，改稍暖象牙 */
.bazi-jade-group .jade-slip[data-pillar-key="day_pillar"] [style*="#FFF"],
.bazi-jade-group .jade-slip[data-pillar-key="day_pillar"] [style*="#fff"] {
  color: #F4ECC8 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * P7 v1.6.1 · 卡 #5 · 起盘仪式罩 + 双保险
 * ════════════════════════════════════════════════════════════════════════ */
.ritual-veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0A0A0C;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  /* 5s CSS-only failsafe：万一 JS 没加载，最终也会自动淡出 */
  animation: p7-ritual-failsafe 5s ease 0s 1 both;
}
.ritual-veil.is-ready {
  animation: p7-ritual-fade-out 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}
@keyframes p7-ritual-failsafe {
  0%, 80% { opacity: 1; }
  100%    { opacity: 0; pointer-events: none; visibility: hidden; }
}
@keyframes p7-ritual-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}
.ritual-veil-glyph {
  filter: drop-shadow(0 0 6px rgba(184, 155, 94, 0.28));
}
.ritual-veil-line {
  stroke-dasharray: 0 60;
  animation: p7-ritual-line 1.6s ease-in-out infinite;
}
@keyframes p7-ritual-line {
  0%, 100% { stroke-dasharray: 0 60; opacity: 0.3; }
  50%      { stroke-dasharray: 60 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ritual-veil-line { animation: none; opacity: 0.7; stroke-dasharray: 60 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * P7 v1.6.1 · 卡 #1 · 朱砂主印（命途页 / atlas 右下角）
 * ════════════════════════════════════════════════════════════════════════ */
.p7-cinnabar-host {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 64px;
  height: 64px;
  pointer-events: none;
  z-index: 5;
  opacity: 0.92;
  mix-blend-mode: multiply;  /* "渗" 进背景，非贴在表面 */
}
.p7-cinnabar-mark {
  display: block;
  width: 100%;
  height: 100%;
}
/* iOS 13- · @supports 检测 SVG filter 支持，不支持时退到红边瘦金体 */
@supports not (filter: url(#cinnabar-grain-S0)) {
  .p7-cinnabar-mark { display: none; }
  .p7-cinnabar-host::after {
    content: attr(data-fallback-surname) "\A 之 印";
    white-space: pre-line;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 0.5px solid rgba(199, 41, 41, 0.62);
    background: transparent;
    font-family: "Slender Gold", "HuiZongShouJin", "Noto Serif SC", serif;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: rgba(199, 41, 41, 0.85);
    line-height: 1.15;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * P7 v1.6.1 · 卡 #4 · 环境钩子（节气 / 月相 / 子时）attribute selector
 * ════════════════════════════════════════════════════════════════════════ */
/* 子时压暗 */
html[data-timezone="zishi"] .abyss-bg {
  filter: brightness(0.85) saturate(0.92);
  transition: filter 1.2s ease;
}
html[data-timezone="night"] .abyss-bg {
  filter: brightness(0.92);
  transition: filter 1.2s ease;
}
/* 节气：惊蛰星点呼吸节奏从 8s → 5s */
html[data-jieqi="jingzhe"] .abyss-bg::before,
html[data-jieqi="jingzhe"] .abyss-bg::after {
  animation-duration: 5s !important;
}
/* 谷雨 + 立夏：墨晕漂移略快 */
html[data-jieqi="guyu"] .ink-cloud,
html[data-jieqi="lixia"] .ink-cloud {
  animation-duration: 28s !important;
}
/* 冬至：色温降低 */
html[data-jieqi="dongzhi"] .abyss-bg {
  --p7-gold-bright: #D8CDA8;
}
/* 月相：新月 / 满月 */
html[data-moon-phase="new"]   .moon-anchor   { clip-path: inset(0 50% 0 0); }
html[data-moon-phase="full"]  .moon-anchor   { filter: drop-shadow(0 0 8px rgba(230, 217, 180, 0.6)); }
html[data-moon-phase="waxing"] .moon-anchor  { clip-path: inset(0 30% 0 0); }
html[data-moon-phase="waning"] .moon-anchor  { clip-path: inset(0 0 0 30%); }

/* ═══════════════════════════════════════════════════════════════════════════
 * P7 v1.6.1 · 卡 #3 · Bottom Sheet 触发 main 缩放（独立容器）
 *   - .app-content 提前加 will-change，避免 sheet 弹起时复合层重建抖动
 *   - body.bottom-sheet-open 触发 scale + filter
 *   - 不在 body / html 上加 transform（避免全局 reflow + fixed 失效）
 * ════════════════════════════════════════════════════════════════════════ */
.app-content {
  position: relative;
  will-change: transform, filter;
  transition:
    transform 0.45s cubic-bezier(0.32, 0.72, 0, 1),
    filter 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  transform-origin: center top;
  min-height: 100vh;
}
body.bottom-sheet-open .app-content {
  transform: scale(0.985);
  filter: brightness(0.7);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * P7 v1.6.1 · 卡 #2 · 极淡尘埃 parallax 近景层
 *   星点远景仍是 fixed 不动；这一层为 absolute + JS 视差驱动
 *   不用 CSS perspective 是因为祖先 overflow audit 复杂；改用 RAF + transform3d
 *   单层 30 颗近尘，与 90 颗远星错开，形成 Z 轴双层
 * ════════════════════════════════════════════════════════════════════════ */
.parallax-stardust {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  width: 100%;
  height: 200vh;  /* 超出视口高度，给视差足够位移空间 */
  will-change: transform;
}
.parallax-stardust::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 0.8px at 12% 8%,  rgba(184, 155, 94, 0.42), transparent 1px),
    radial-gradient(circle 0.6px at 28% 18%, rgba(230, 217, 180, 0.32), transparent 1px),
    radial-gradient(circle 0.7px at 47% 12%, rgba(184, 155, 94, 0.38), transparent 1px),
    radial-gradient(circle 0.6px at 64% 22%, rgba(230, 217, 180, 0.30), transparent 1px),
    radial-gradient(circle 0.8px at 82% 6%,  rgba(184, 155, 94, 0.45), transparent 1px),
    radial-gradient(circle 0.5px at 18% 32%, rgba(230, 217, 180, 0.28), transparent 1px),
    radial-gradient(circle 0.7px at 36% 38%, rgba(184, 155, 94, 0.36), transparent 1px),
    radial-gradient(circle 0.6px at 56% 42%, rgba(230, 217, 180, 0.32), transparent 1px),
    radial-gradient(circle 0.8px at 74% 36%, rgba(184, 155, 94, 0.40), transparent 1px),
    radial-gradient(circle 0.6px at 92% 28%, rgba(230, 217, 180, 0.28), transparent 1px),
    radial-gradient(circle 0.7px at 8%  52%, rgba(184, 155, 94, 0.38), transparent 1px),
    radial-gradient(circle 0.5px at 22% 62%, rgba(230, 217, 180, 0.26), transparent 1px),
    radial-gradient(circle 0.8px at 42% 58%, rgba(184, 155, 94, 0.42), transparent 1px),
    radial-gradient(circle 0.6px at 62% 64%, rgba(230, 217, 180, 0.30), transparent 1px),
    radial-gradient(circle 0.7px at 84% 56%, rgba(184, 155, 94, 0.36), transparent 1px),
    radial-gradient(circle 0.5px at 14% 74%, rgba(230, 217, 180, 0.26), transparent 1px),
    radial-gradient(circle 0.8px at 34% 82%, rgba(184, 155, 94, 0.40), transparent 1px),
    radial-gradient(circle 0.6px at 54% 76%, rgba(230, 217, 180, 0.30), transparent 1px),
    radial-gradient(circle 0.7px at 76% 88%, rgba(184, 155, 94, 0.38), transparent 1px),
    radial-gradient(circle 0.5px at 96% 72%, rgba(230, 217, 180, 0.26), transparent 1px),
    radial-gradient(circle 0.6px at 24% 92%, rgba(184, 155, 94, 0.34), transparent 1px),
    radial-gradient(circle 0.8px at 48% 98%, rgba(230, 217, 180, 0.32), transparent 1px),
    radial-gradient(circle 0.7px at 68% 94%, rgba(184, 155, 94, 0.36), transparent 1px),
    radial-gradient(circle 0.5px at 88% 84%, rgba(230, 217, 180, 0.26), transparent 1px),
    radial-gradient(circle 0.6px at 6%  18%, rgba(184, 155, 94, 0.32), transparent 1px),
    radial-gradient(circle 0.7px at 30% 48%, rgba(230, 217, 180, 0.28), transparent 1px),
    radial-gradient(circle 0.5px at 50% 84%, rgba(184, 155, 94, 0.30), transparent 1px),
    radial-gradient(circle 0.8px at 72% 18%, rgba(230, 217, 180, 0.34), transparent 1px),
    radial-gradient(circle 0.6px at 4%  88%, rgba(184, 155, 94, 0.36), transparent 1px),
    radial-gradient(circle 0.7px at 98% 48%, rgba(230, 217, 180, 0.32), transparent 1px);
  background-repeat: no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .parallax-stardust { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * P7.2.1 · Product Clarity Hotfix
 *   B8 · 何以断我（折叠 details）
 *   B10 · 章卷索引胶囊（点击 → Bottom Sheet）
 *   B9 · 主次 CTA 区分
 * ════════════════════════════════════════════════════════════════════════ */

/* B8 · 何以断我 · 折叠态 */
.p7-howijudge {
  max-width: 580px;
  margin: 0 auto;
}
.p7-howijudge-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 0;
  cursor: pointer;
  user-select: none;
  font-family: var(--p7-font-display);
  color: var(--p7-gold);
  transition: color var(--p7-dur-base) var(--p7-ease-jade);
}
.p7-howijudge-summary::-webkit-details-marker { display: none; }
.p7-howijudge-summary:hover { color: var(--p7-gold-bright); }
.p7-howijudge-chevron {
  font-family: ui-monospace, SF Mono, monospace;
  font-size: 0.78rem;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid var(--p7-gold-wire-base);
  border-radius: 50%;
  transition: transform var(--p7-dur-base) var(--p7-ease-jade);
}
.p7-howijudge[open] .p7-howijudge-chevron { transform: rotate(45deg); }
.p7-howijudge-body {
  padding: 18px 24px 8px;
  animation: p7-howijudge-fade 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes p7-howijudge-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.p7-howijudge-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: howijudge-step;
  font-family: var(--p7-font-serif);
  color: var(--p7-gold-bright);
  letter-spacing: 0.04em;
  line-height: 1.85;
  font-size: var(--p7-fs-meta);
}
.p7-howijudge-list li {
  counter-increment: howijudge-step;
  position: relative;
  padding-left: 32px;
  margin-bottom: 6px;
}
.p7-howijudge-list li::before {
  content: counter(howijudge-step, cjk-decimal) "、";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--p7-font-display);
  color: var(--p7-gold);
  letter-spacing: 0.18em;
  font-size: var(--p7-fs-meta);
}

/* B10 · 章卷胶囊（暗金游丝边 + 极弱底，hover 提亮 + 边发光） */
.p7-jian-capsule {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: rgba(184, 155, 94, 0.04);
  border: 0.5px solid var(--p7-gold-wire-base);
  border-radius: 18px;
  font-family: var(--p7-font-display);
  font-size: var(--p7-fs-batch);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: var(--p7-gold);
  cursor: pointer;
  transition:
    color var(--p7-dur-base) var(--p7-ease-jade),
    border-color var(--p7-dur-base) var(--p7-ease-jade),
    box-shadow var(--p7-dur-base) var(--p7-ease-jade),
    background var(--p7-dur-base) var(--p7-ease-jade);
}
.p7-jian-capsule:hover,
.p7-jian-capsule:focus-visible {
  color: var(--p7-gold-bright);
  border-color: var(--p7-gold-wire-bright);
  background: rgba(184, 155, 94, 0.08);
  box-shadow: 0 0 12px -2px rgba(184, 155, 94, 0.32),
              inset 0 0 8px rgba(184, 155, 94, 0.06);
  outline: none;
}
.p7-jian-capsule:active { transform: translateY(0.5px); }

/* B9 · 主 CTA「以此盘问一事」更亮 / 次 CTA 更弱 */
.p7-cta-primary {
  font-size: 1.08rem !important;
  letter-spacing: 0.32em !important;
  color: var(--p7-gold-bright) !important;
}
.p7-cta-primary::after {
  width: 100% !important;
  background: var(--p7-gold) !important;
}
.p7-cta-primary:hover::after {
  background: var(--p7-gold-bright) !important;
  box-shadow: 0 0 8px rgba(184, 155, 94, 0.32);
}
.p7-cta-secondary {
  font-size: 0.86rem !important;
  letter-spacing: 0.24em !important;
  color: rgba(184, 155, 94, 0.62) !important;
}
.p7-cta-secondary::after {
  background: var(--p7-gold-wire-base) !important;
}
.p7-cta-secondary:hover {
  color: rgba(230, 217, 180, 0.85) !important;
}

/* P7.2.1 · B10 · 章卷胶囊 Bottom Sheet */
.p7-jian-sheet {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.32s var(--p7-ease-jade), visibility 0s linear 0.32s;
}
.p7-jian-sheet[data-open] {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.32s var(--p7-ease-jade), visibility 0s linear 0s;
}
.p7-jian-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 12, 0.78);
  backdrop-filter: blur(2px);
}
.p7-jian-sheet-panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: min(640px, 92vw);
  max-height: 78vh;
  padding: 28px 32px 36px;
  background: var(--p7-abyss-soft);
  border-top: 0.5px solid var(--p7-gold-wire-base);
  border-left: 0.5px solid var(--p7-gold-wire-base);
  border-right: 0.5px solid var(--p7-gold-wire-base);
  border-radius: 4px 4px 0 0;
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.p7-jian-sheet[data-open] .p7-jian-sheet-panel {
  transform: translate(-50%, 0);
}
.p7-jian-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.p7-jian-sheet-title {
  font-family: var(--p7-font-display);
  font-size: var(--p7-fs-title);
  letter-spacing: 0.18em;
  color: var(--p7-gold-bright);
}
.p7-jian-sheet-close {
  background: transparent;
  border: 0;
  color: var(--p7-gold);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
}
.p7-jian-sheet-close:hover { color: var(--p7-gold-bright); }
.p7-jian-sheet-body {
  font-family: var(--p7-font-serif);
  font-size: var(--p7-fs-body);
  line-height: 1.85;
  color: var(--p7-gold-bright);
  letter-spacing: 0.04em;
  white-space: pre-line;
  overflow-y: auto;
}